dsh-design-studio 0.8.0 → 0.10.0

package/lib/client.js

@@ -44,6 +44,26 @@ window.__ModuleLoader__.load({
       guideDesc: '实时看页面，点选要改的地方',
       empty: '还没有要预览的页面',
       emptyHint: '也可以直接输入 HTML 文件路径或端口：',
+      emptyHintPick: '已有 HTML？点「浏览…」选一个，或直接拖进来；也能输入路径或端口：',
+      browse: '浏览…',
+      browseTip: '选一个本地 HTML 文件打开',
+      pathNone: '拿不到这个文件的路径，请直接输入它的路径打开',
+      pageDrop: '松开，打开这个页面',
+      maybeDrop: '松开，打开这个文件夹或 HTML',
+      pageDropSub: 'HTML 文件，或放着 HTML 的文件夹',
+      dropWeb: '网页版拿不到本地文件的路径',
+      dropWebSub: '请输入它在运行 DSH 的那台电脑上的路径打开',
+      dropWebSay: '网页版拿不到本地文件的路径：请输入它在运行 DSH 的那台电脑上的路径打开',
+      dropWhat: '这里只接 HTML、文件夹或图片',
+      dropWhatSub: 'HTML 或文件夹会打开预览，图片当参考图',
+      dropWhatWeb: '这里只接图片',
+      dropWhatWebSub: '图片当参考图；要打开 HTML，请输入它的路径',
+      pickDir: '选文件夹',
+      pickDirFail: '没打开选文件夹的窗口：{msg}',
+      hoMoved: '选的文件夹里已经有别的东西，代码会放进里面的 {name}（可以改）',
+      hoBeside: '代码不能放进设计目录（设计稿要留着对比），改放在旁边的 {name}（可以改）',
+      hoChecking: '正在看这个文件夹…',
+      hoCheckFail: '没看成这个文件夹（{msg}），开始前请确认路径',
       hintOpen: '预览刚写的 {name}',
       headerHint: '刚写了 {name}，点开能预览',
       placeholder: '/路径/index.html 或 5173',
@@ -52,6 +72,24 @@ window.__ModuleLoader__.load({
       pickTip: '点选元素或框选区域，发给模型（Esc 取消）',
       pickAny: '点选任意一屏里的元素，或拖出一块区域 · Esc 取消',
       pickOne: '点选一个元素，或拖出一块区域 · Esc 取消',
+      pickArea: '选中区域',
+      chipOne: '1 个元素',
+      chipMark: '标注图',
+      chipText: '改字',
+      chipStyle: '样式改动',
+      chipVariant: '再出两版',
+      chipDir: '选定方向',
+      chipCheck: '体检 · {n} 个问题',
+      chipCode: '转成代码',
+      chipRef: '参考图',
+      chipTweak: '滑块调整',
+      chipTwMake: '做调节滑块',
+      chipTwFix: '修调节滑块',
+      chipSysEx: '提取设计系统',
+      chipSysAp: '套用设计系统',
+      chipLook: '风格 · {name}',
+      chipTokens: '建设计变量',
+      pickElems: '{n} 个元素',
       textAny: '点任意一屏里的文字直接改 · 回车保存 · Esc 退出',
       refPick: '照参考图改风格…',
       refChoose: '选一张',
@@ -85,6 +123,7 @@ window.__ModuleLoader__.load({
       kindApp: 'App',
       kindMini: '小程序',
       kindTablet: '平板',
+      kindDesktop: '桌面软件',
       kindPoster: '海报',
       kindSlides: '幻灯片',
       kindEmail: '邮件',
@@ -119,7 +158,8 @@ window.__ModuleLoader__.load({
       checkFail: '没查成：{msg}',
       checkNote: '只量得出排版上的硬伤，好不好看还得你看',
       checkCount: '设计体检：上次量出 {n} 个问题，点开看',
-      checkAsk: '〔设计体检〕发现 {n} 个问题，请逐个修好：改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量。',
+      checkAsk: '〔设计体检〕发现 {n} 个问题：',
+      checkTail: '请逐个修好：改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量。',
       ckToolHead: '量了 {s} 屏，发现 {n} 个问题。逐个改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量：',
       ckToolOk: '量了 {s} 屏（{labels}），没发现问题。',
       ckToolOff: '用户正在看旧版本、演示或多尺寸，右侧栏现在量不了；过一会儿再调，或照「自查」清单自己过一遍。',
@@ -141,6 +181,11 @@ window.__ModuleLoader__.load({
       ck_jserr: '页面脚本报错',
       ck_missing: '文件没载出来',
       ck_capsule: '被小程序胶囊挡住',
+      ck_island: '被灵动岛挡住',
+      ck_homebar: '伸进底部横条区',
+      ck_tabbar: '标签栏项太多',
+      ck_navbar: '没有导航栏',
+      ck_winctl: '被窗口按钮挡住',
       cd_hscroll: '伸出屏幕 {px}px',
       cd_clipped: '被切掉 {px}px',
       cd_overflow: '伸出框 {px}px',
@@ -158,6 +203,15 @@ window.__ModuleLoader__.load({
       cd_jserr: '{msg}{at}',
       cd_missing: '{what} {src} 载不出来（路径写错了，或者文件不在）',
       cd_capsule: '伸进右上角胶囊 {px}px（胶囊是微信画的、盖不住：顶栏右边从 x={x} 起空着）',
+      cd_island: '被灵动岛挡住 {px}px（灵动岛在 y 11–45：状态栏中间空着，内容放到状态栏下面）',
+      cd_homebar: '{bar} 里的字或图标伸进底部横条区 {px}px（底部留 34px：栏加 padding-bottom: 34px，预览里 env(safe-area-inset-bottom) 是 0）',
+      cd_tabbar: '标签栏有 {n} 项（最多 5 项）',
+      cd_navbar: '顶上 y {t}–{b}（导航栏）是空的：一级页放标题或品牌，二级页标题居中加返回',
+      cd_winctl: '伸进{osName}窗口按钮 {px}px（外框画的、盖在页面上面：{zone}空着）',
+      ckOs_mac: ' Mac ',
+      ckOs_win: ' Windows ',
+      ckZone_mac: '左上角 x 80、y 40 以内',
+      ckZone_win: '右上角 138×32',
       ckEdge_top: '顶栏',
       ckEdge_bottom: '底栏',
       ckWhen_top: '没滚时',
@@ -202,7 +256,7 @@ window.__ModuleLoader__.load({
       pickShort: '就要这个',
       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',
+      variantText: '给「{name}」再出两版不同方向的设计（布局或视觉风格明显不同），存成同目录下的 {b}-b.html 和 {b}-c.html（原版：{where}），会紧挨着原版排在画布上。原版和 tokens.css 别动；新版要换配色就在自己文件里覆盖变量。\n',
       exThis: '导出这一屏',
       demo: '演示：点页面里的按钮跳到别的屏',
       demoOn: '演示中 · 点按钮跳转',
@@ -210,8 +264,50 @@ window.__ModuleLoader__.load({
       demoRestart: '从头开始',
       demoExit: '退出演示（Esc）',
       textEdit: '改字：点页面里的文字直接改，回车保存（Esc 退出）',
+      mark: '画笔标注：在页面上画圈、箭头、写字，拼成一张图交给模型',
+      mkPen: '画笔',
+      mkHl: '荧光笔',
+      mkArrow: '箭头',
+      mkRect: '方框',
+      mkOval: '圆圈',
+      mkText: '文字',
+      mkErase: '橡皮',
+      mkColor: '颜色',
+      mkSize: '粗细',
+      mkUndo: '撤销',
+      mkRedo: '重做',
+      mkClear: '全部清掉',
+      mkHint: '在页面上画，画完点「交给模型」',
+      mkHow_pen: '按住拖动，随手画',
+      mkHow_hl: '按住拖过去，把要改的地方涂亮',
+      mkHow_arrow: '从起点按住，拖到要指的地方',
+      mkHow_rect: '按住拖出一个框，框住要改的地方',
+      mkHow_oval: '按住拖一下，圈出要改的地方',
+      mkHow_text: '在要说明的地方点一下，写字，回车写完',
+      mkHow_erase: '点一下笔画就擦掉，也能按住拖过去',
+      mkCoach: '直接在页面上画',
+      mkCoach1: '上面挑个工具：画笔、箭头、圆圈、文字…',
+      mkCoach2: '在页面上按住拖动，画出要改的地方',
+      mkCoach3: '画完点「交给模型」，再补一句要怎么改',
+      mkCancel: '取消',
+      mkSend: '交给模型',
+      mkCopy: '复制',
+      mkCopyTip: '把标注图复制到剪贴板，贴到别的地方用',
+      mkCopied: '标注图复制好了，贴到别处就行',
+      mkCopyFail: '没能复制到剪贴板，再点一次「复制」，或者「交给模型」',
+      mkSending: '正在拼图…',
+      mkTextPh: '写点什么，回车完成',
+      mkEmpty: '还没画东西',
+      mkFail: '标注图没存成：{msg}',
+      mkAsk: '〔标注〕{path}\n{notes}这是我在设计上画了标注的截图（{where}）。先用 read_image 看这张图，按图上的圈、箭头和文字改对应的地方；没标的地方别动。\n',
+      mkNotes: '图上写的字：{notes}\n',
+      mkQuote: '「{v}」',
+      mkIn: '标注图放进输入框了，补一句要怎么改再发',
+      mkMany: '画到的屏太多，只拼了前 {n} 屏，其余留成灰块',
+      mkMoved: '设计换了，这次标注没交出去',
+      mkNoInput: '没能放进输入框，点一下聊天输入框再点「交给模型」',
       textSaved: '已改好，写回 {file}',
-      textAsk: '把页面上的「{before}」改成「{after}」（只改这一处文字，别的不动）。\n{where}\n',
+      textAsk: '把页面上的「{before}」改成「{after}」（{where}；只改这一处文字，别的不动）。\n',
       styleEdit: '调样式：点页面里的元素，拖滑块改字号、颜色、圆角、间距（Esc 退出）',
       styleAny: '点任意一屏里的元素调样式 · Esc 退出',
       styleOne: '点页面里的元素调样式 · Esc 退出',
@@ -242,7 +338,7 @@ window.__ModuleLoader__.load({
       styleSaved: '样式已写回 {file}',
       styleMiss: '源码里没找到这个元素（可能是脚本生成的），改成交给模型',
       styleN: '改了 {n} 项',
-      styleAskText: '〔调样式〕{name}（{sel}）：{list}。{rules}把这些写进它的样式规则（能用设计变量就用设计变量），别写成行内 style。\n{where}\n',
+      styleAskText: '〔调样式〕{name}（{sel}）：{list}。{rules}把这些写进它的样式规则（{where}；能用设计变量就用设计变量），别写成行内 style。\n',
       ruleFrom: '- {props}：现在由 {sel} 决定（{at}）',
       ruleMaybe: '- {props}：大概由 {sel} 决定（{at}；它在 @layer / @container 里，没细算，改之前看一眼）',
       ruleInline: '- {props}：现在写在元素的行内 style 上{over}',
@@ -252,10 +348,26 @@ window.__ModuleLoader__.load({
       styleJoin: '；',
       lang: 'zh',
       stylesHead: '先挑一个风格开工',
-      stylesTip: '点一个，整套配色、字体、圆角放进输入框；再写要做什么',
+      stylesTip: '点一个看样板，满意了点「用这个风格」，整套配色、字体、圆角放进输入框；再写要做什么',
       stylesOpen: '换个风格…',
       stylesTitle: '换个风格',
-      stylesSwap: '点一个，让模型把现在的设计换成这个风格（先改 tokens.css，布局和文案不动）',
+      stylesSwap: '点一个看样板；「用这个风格」让模型把现在的设计换成它（先改 tokens.css，布局和文案不动）',
+      stylesAll: '全部风格',
+      stylePrev: '上一个（←）',
+      styleNext: '下一个（→）',
+      styleUse: '用这个风格',
+      samBrand: '小森',
+      samNav: '发现　课程　我的',
+      samHead: '把日子过得好一点',
+      samSub: '一句说明文字，看看正文和次要文字的样子。',
+      samGo: '开始使用',
+      samMore: '了解更多 →',
+      samItem: '周末手作课',
+      samMeta: '2 小时 · 6 人小班',
+      samPrice: '¥128',
+      samTag: '新',
+      samStat: '本周完成',
+      samStatMeta: '比上周多 12%',
       styleText: '〔风格〕{name}——{desc}\n配色：{colors}\n字体：{fonts}\n形状：{shape}\n要点：{notes}\n{ask}',
       styleColors: '底色 {bg}，卡片 {surface}，文字 {text}，次要文字 {muted}，分隔线 {line}，主色 {primary}（上面的字 {on}），点缀 {accent}（{accUse}），链接和小字强调 {link}{bgImage}',
       accBig: '图形、大字',
@@ -321,7 +433,8 @@ window.__ModuleLoader__.load({
       twFix: '让模型修好',
       twMakeText: '〔调节滑块〕给这套设计做 3–5 个调节滑块：挑最值得试的维度（比如留白、圆角、主色、卡片排法），照 ui-design 技能「调节滑块」一节写进设计目录的 tweaks.json，把样式接上，做完用 check_design 查一遍。',
       twFixText: '〔调节滑块〕tweaks.json 有问题：{errs}。照 ui-design 技能「调节滑块」一节改好。',
-      twAskHead: '〔调节〕我在右侧调节滑块里调成了下面这样，照这个改设计（改样式源文件，tweaks.json 里对应的 value 也改成新值）：',
+      twAskHead: '〔调节〕我在右侧调节滑块里调成了下面这样：',
+      twAskTail: '照这个改设计（改样式源文件，tweaks.json 里对应的 value 也改成新值）。',
       twAskTip: '让模型照这几个值改设计（可以顺手调整相关的地方）',
       twSaveTip: 'CSS 变量写进 tokens.css 的默认值，属性写到每屏的 <html> 上（改前改后各存一版）',
       twNoWrite: '开发服务器的页面不能直接写回，交给模型改',
@@ -363,6 +476,26 @@ window.__ModuleLoader__.load({
       guideDesc: 'Live page, pick what to change',
       empty: 'Nothing to preview yet',
       emptyHint: 'Or enter an HTML path or a port:',
+      emptyHintPick: 'Have HTML already? Click "Browse…" or drop it here, or enter a path or a port:',
+      browse: 'Browse…',
+      browseTip: 'Pick a local HTML file to open',
+      pathNone: "Couldn't get this file's path. Type its path to open it.",
+      pageDrop: 'Drop to open this page',
+      maybeDrop: 'Drop to open this folder or HTML file',
+      pageDropSub: 'An HTML file, or a folder with HTML files',
+      dropWeb: "The web version can't see local file paths",
+      dropWebSub: 'Type its path on the computer running DSH to open it',
+      dropWebSay: "The web version can't see local file paths. Type its path on the computer running DSH to open it.",
+      dropWhat: 'Only HTML, folders or images',
+      dropWhatSub: 'HTML and folders open in the preview; images become references',
+      dropWhatWeb: 'Only images here',
+      dropWhatWebSub: 'Images become references. To open HTML, type its path',
+      pickDir: 'Choose folder',
+      pickDirFail: "Couldn't open the folder picker: {msg}",
+      hoMoved: 'That folder already has other things in it, so the code goes into {name} inside it (you can change this)',
+      hoBeside: "Code can't go inside the design folder (the design stays for comparison), so it goes into {name} next to it (you can change this)",
+      hoChecking: 'Checking this folder…',
+      hoCheckFail: "Couldn't check this folder ({msg}). Check the path before you start",
       hintOpen: 'Preview {name}',
       headerHint: '{name} was just written. Click to preview it',
       placeholder: '/path/index.html or 5173',
@@ -371,6 +504,24 @@ window.__ModuleLoader__.load({
       pickTip: 'Click an element or drag a region to send it to the model (Esc to cancel)',
       pickAny: 'Click an element in any screen, or drag a region · Esc to cancel',
       pickOne: 'Click an element or drag a region · Esc to cancel',
+      pickArea: 'Selected region',
+      chipOne: '1 element',
+      chipMark: 'Markup',
+      chipText: 'Text edit',
+      chipStyle: 'Style changes',
+      chipVariant: 'Two more takes',
+      chipDir: 'Direction picked',
+      chipCheck: 'Check · {n} issues',
+      chipCode: 'Build as code',
+      chipRef: 'Reference image',
+      chipTweak: 'Tweaked values',
+      chipTwMake: 'Make tweaks',
+      chipTwFix: 'Fix tweaks',
+      chipSysEx: 'Extract design system',
+      chipSysAp: 'Apply design system',
+      chipLook: 'Style · {name}',
+      chipTokens: 'Create design tokens',
+      pickElems: '{n} elements',
       textAny: 'Click text in any screen to edit · Enter to save · Esc to stop',
       refPick: 'Restyle from a reference…',
       refChoose: 'Choose one',
@@ -404,6 +555,7 @@ window.__ModuleLoader__.load({
       kindApp: 'App',
       kindMini: 'Mini program',
       kindTablet: 'Tablet',
+      kindDesktop: 'Desktop app',
       kindPoster: 'Poster',
       kindSlides: 'Slides',
       kindEmail: 'Email',
@@ -438,7 +590,8 @@ window.__ModuleLoader__.load({
       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.',
+      checkAsk: '[Design check] Found {n} problems:',
+      checkTail: '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.',
@@ -460,6 +613,11 @@ window.__ModuleLoader__.load({
       ck_jserr: 'Script error',
       ck_missing: 'File failed to load',
       ck_capsule: 'Under the mini program capsule',
+      ck_island: 'Under the Dynamic Island',
+      ck_homebar: 'In the home indicator area',
+      ck_tabbar: 'Too many tabs',
+      ck_navbar: 'No navigation bar',
+      ck_winctl: 'Under the window buttons',
       cd_hscroll: 'sticks out {px}px',
       cd_clipped: '{px}px cut off',
       cd_overflow: 'sticks out {px}px',
@@ -477,6 +635,15 @@ window.__ModuleLoader__.load({
       cd_jserr: '{msg}{at}',
       cd_missing: '{what} {src} did not load (wrong path, or the file is missing)',
       cd_capsule: '{px}px under the top-right capsule (WeChat draws it on top; keep the top bar clear from x={x})',
+      cd_island: '{px}px under the Dynamic Island (it sits at y 11–45: keep the middle of the status bar empty and start content below the status bar)',
+      cd_homebar: 'text or icons in {bar} reach {px}px into the home indicator area (leave 34px: give the bar padding-bottom: 34px; env(safe-area-inset-bottom) is 0 in the preview)',
+      cd_tabbar: 'the tab bar has {n} items (5 at most)',
+      cd_navbar: 'nothing at y {t}–{b} (the navigation bar): top-level pages show a title or brand, other pages a centered title and a back button',
+      cd_winctl: '{px}px under the{osName}window buttons (the frame draws them on top: keep {zone} clear)',
+      ckOs_mac: ' Mac ',
+      ckOs_win: ' Windows ',
+      ckZone_mac: 'the top-left 80×40',
+      ckZone_win: 'the top-right 138×32',
       ckEdge_top: 'top bar',
       ckEdge_bottom: 'bottom bar',
       ckWhen_top: 'before scrolling, ',
@@ -521,7 +688,7 @@ window.__ModuleLoader__.load({
       pickShort: 'Use this',
       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',
+      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 (original: {where}); 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',
       exThis: 'Export this screen',
       demo: 'Play: tap buttons in the page to move between screens',
       demoOn: 'Playing · tap to navigate',
@@ -529,8 +696,50 @@ window.__ModuleLoader__.load({
       demoRestart: 'Start over',
       demoExit: 'Stop playing (Esc)',
       textEdit: 'Edit text: click any text in the page, Enter to save (Esc to stop)',
+      mark: 'Mark up: draw circles, arrows and notes on the page, then hand it to the model as one image',
+      mkPen: 'Pen',
+      mkHl: 'Highlighter',
+      mkArrow: 'Arrow',
+      mkRect: 'Rectangle',
+      mkOval: 'Circle',
+      mkText: 'Text',
+      mkErase: 'Eraser',
+      mkColor: 'Color',
+      mkSize: 'Size',
+      mkUndo: 'Undo',
+      mkRedo: 'Redo',
+      mkClear: 'Clear all',
+      mkHint: 'Draw on the page, then send it to the model',
+      mkHow_pen: 'Press and drag to draw freehand',
+      mkHow_hl: 'Drag over what needs changing to highlight it',
+      mkHow_arrow: 'Press at the start and drag to what you mean',
+      mkHow_rect: 'Drag to box what needs changing',
+      mkHow_oval: 'Drag to circle what needs changing',
+      mkHow_text: 'Click where the note goes, type, Enter to finish',
+      mkHow_erase: 'Click a stroke to erase it, or drag across',
+      mkCoach: 'Draw right on the page',
+      mkCoach1: 'Pick a tool above: pen, arrow, circle, text…',
+      mkCoach2: 'Press and drag on the page to mark what to change',
+      mkCoach3: 'Then click "Send to model" and add a line on what to do',
+      mkCancel: 'Cancel',
+      mkSend: 'Send to model',
+      mkCopy: 'Copy',
+      mkCopyTip: 'Copy the marked-up image to paste somewhere else',
+      mkCopied: 'Markup image copied. Paste it anywhere',
+      mkCopyFail: 'Could not copy to the clipboard. Click Copy again, or Send to model',
+      mkSending: 'Building the image…',
+      mkTextPh: 'Type a note, Enter to finish',
+      mkEmpty: 'Nothing drawn yet',
+      mkFail: 'Could not save the markup: {msg}',
+      mkAsk: '[Markup] {path}\n{notes}A screenshot of the design with my markup on it ({where}). Look at it with read_image first, then change what the circles, arrows and notes point at; leave unmarked parts alone.\n',
+      mkNotes: 'Notes written on it: {notes}\n',
+      mkQuote: '"{v}"',
+      mkIn: 'Markup added to the input. Say what to change, then send',
+      mkMany: 'Too many screens marked: captured the first {n}, the rest are gray',
+      mkMoved: 'The design changed, so the markup was not sent',
+      mkNoInput: 'Could not add it to the input. Click the chat input, then Send to model again',
       textSaved: 'Saved to {file}',
-      textAsk: 'Change the text "{before}" to "{after}" on the page (only this text, nothing else).\n{where}\n',
+      textAsk: 'Change the text "{before}" to "{after}" on the page ({where}; only this text, nothing else).\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',
@@ -561,7 +770,7 @@ window.__ModuleLoader__.load({
       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',
+      styleAskText: '[Style] {name} ({sel}): {list}. {rules}Put it in its stylesheet rule ({where}), using design tokens where you can, not an inline style.\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}',
@@ -571,10 +780,26 @@ window.__ModuleLoader__.load({
       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',
+      stylesTip: 'Pick one to see a sample; "Use this style" puts 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)',
+      stylesSwap: 'Pick one to see a sample; "Use this style" has the model restyle the current design (tokens.css first; layout and copy stay)',
+      stylesAll: 'All styles',
+      stylePrev: 'Previous (←)',
+      styleNext: 'Next (→)',
+      styleUse: 'Use this style',
+      samBrand: 'Bloom',
+      samNav: 'Explore  Classes  Me',
+      samHead: 'Make every day a little better',
+      samSub: 'One line of supporting text to show body and muted colors.',
+      samGo: 'Get started',
+      samMore: 'Learn more →',
+      samItem: 'Weekend workshop',
+      samMeta: '2 hrs · small group of 6',
+      samPrice: '$18',
+      samTag: 'New',
+      samStat: 'Done this week',
+      samStatMeta: '12% more than last week',
       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} ({accUse}), links and small emphasis {link}{bgImage}',
       accBig: 'graphics and large text only',
@@ -640,7 +865,8 @@ window.__ModuleLoader__.load({
       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):',
+      twAskHead: '[Tweaks] I set the tweaks in the sidebar to these values:',
+      twAskTail: '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',
@@ -685,7 +911,8 @@ window.__ModuleLoader__.load({
         let s = ''
         try { s = bound ? bound(key) : '' } catch { s = '' }
         if (!s || s === key || s === `${NS}.${key}`) s = ZH[key] || key
-        if (vars) for (const [k, v] of Object.entries(vars)) s = s.split(`{${k}}`).join(String(v))
+        // 一次替换完：填进去的内容里就算有「{x}」（比如目录名）也不会再被换掉
+        if (vars) s = s.replace(/\{(\w+)\}/g, (m, k) => (Object.prototype.hasOwnProperty.call(vars, k) ? String(vars[k]) : m))
         return s
       }
     }
@@ -693,10 +920,26 @@ window.__ModuleLoader__.load({
     // ── 样式（DSH 设计变量，深浅主题跟着走）──────────────────────────────────
 
     const ACCENT = '#4d6bfe'
+    const PICK_SRC = 'dsh-design-studio' // 输入框里点选标签的来源名（样式里也用）
+    // 输入框里的各种标签：图标按来源名分（DSH 的标签上只带来源名），消息里和悬停卡片按 data-i
+    const CHIP_ICON = {
+      pick: 'M4 4l6.5 16 2.3-6.7L19.5 11z M13 13l6 6',
+      mark: 'M4 20l4.5-1L19 8.5a2.1 2.1 0 0 0-3-3L5.5 16z M14 7.5l3 3',
+      text: 'M5 7V5h14v2 M12 5v14 M9 19h6',
+      style: 'M4 7h9 M17 7h3 M4 17h3 M11 17h9 M13 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0 M7 17a2 2 0 1 0 4 0a2 2 0 1 0-4 0',
+      layers: 'M12 3l9 5-9 5-9-5z M3 13l9 5 9-5',
+      check: 'M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0 M8 12.5l2.7 2.7L16 10',
+      code: 'M8 7l-5 5 5 5 M16 7l5 5-5 5',
+      image: 'M4 5h16v14H4z M4 16l5-5 4 4 2-2 5 5 M14.5 9a1 1 0 1 0 2 0a1 1 0 1 0-2 0',
+      look: 'M12 3a9 9 0 1 0 0 18c1 0 1.6-.8 1.6-1.6 0-1-1-1.4-1-2.4 0-.9.7-1.6 1.6-1.6H16a5 5 0 0 0 5-5c0-4-4-7.4-9-7.4z M7.5 12h.01 M9.5 7.8h.01 M14.5 7.8h.01',
+    }
+    const chipSrc = (i) => i === 'pick' ? PICK_SRC : `${PICK_SRC}-${i}`
+    const iconUrl = (d) => `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='${d}'/></svg>`)}")`
     const EASE = 'cubic-bezier(.2,.8,.2,1)'
     const CSS = `
 .ddp{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--dsw-alias-bg-base,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary);font-family:var(--dsw-font-family,inherit);font-size:12px;container-type:inline-size}
 .ddp-bar{position:relative;z-index:8;display:flex;align-items:center;gap:4px;height:40px;padding:0 8px;border-bottom:.5px solid var(--dsw-alias-border-l2,rgba(127,127,127,.18));flex:none}
+.ddp-bar.editing>:not(form){display:none}
 .ddp-addr{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);cursor:text;border:.5px solid transparent;overflow:hidden}
 .ddp-addr:hover{border-color:var(--dsw-alias-border-l3)}
 .ddp-addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -750,6 +993,11 @@ window.__ModuleLoader__.load({
 .ddp-chrome span{flex:1;min-width:0;margin:0 60px 0 18px;height:20px;border-radius:6px;background:rgba(0,0,0,.05);color:#6b6b74;font:12px/20px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ddp-island{position:absolute;left:50%;width:118px;height:34px;margin-left:-59px;border-radius:20px;background:#000;z-index:4;pointer-events:none}
 .ddp-cap{position:absolute;width:87px;height:32px;z-index:4;pointer-events:none;overflow:visible;fill:#000}
+.ddp-dev.k-desktop{box-shadow:0 0 0 .5px rgba(0,0,0,.3),0 22px 60px rgba(0,0,0,.28)}
+.ddp-dev.fill.k-desktop{box-shadow:none}
+.ddp-win{position:absolute;z-index:4;pointer-events:none;overflow:visible}
+.ddp-win .x{fill:none;stroke:#1f1f1f;stroke-width:1}
+.ddp-win.w .x{stroke:#fff}
 .ddp-cap .pl{fill:rgba(255,255,255,.6);stroke:rgba(0,0,0,.08);stroke-width:.5}
 .ddp-cap .sp{stroke:rgba(0,0,0,.15);stroke-width:.5}
 .ddp-cap .rg{fill:none;stroke:#000;stroke-width:2}
@@ -811,6 +1059,42 @@ window.__ModuleLoader__.load({
 @keyframes ddp-txt{from{background-position:100% 0}to{background-position:-160% 0}}
 @keyframes ddp-blink{50%{opacity:.25}}
 @keyframes ddp-in{from{opacity:0;translate:0 6px;scale:.98}}
+.ddp-mark{position:absolute;inset:0;z-index:6;outline:none;box-shadow:inset 0 0 0 2px rgba(77,107,254,.5)}
+.ddp-mark .cv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
+.ddp-mark .cv.tx{cursor:text}
+.ddp-mark .cv.er{cursor:cell}
+.ddp-mark textarea{position:absolute;z-index:2;margin:0;padding:0 2px;border:1px dashed rgba(77,107,254,.85);border-radius:3px;background:rgba(255,255,255,.1);font-family:${'"Kaiti SC","STKaiti","KaiTi","楷体",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif'};font-weight:700;line-height:1.3;resize:none;overflow:hidden;white-space:pre;outline:none;text-shadow:0 0 2px rgba(255,255,255,.9),0 0 3px rgba(255,255,255,.9)}
+.ddp-mark textarea.lt{text-shadow:0 0 2px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.7)}
+.ddp-mark textarea::placeholder{color:inherit;opacity:.55}
+.ddp-mk-top,.ddp-mk-bot{position:absolute;left:8px;right:8px;z-index:3;display:flex;justify-content:center;pointer-events:none}
+.ddp-mk-top{top:10px}
+.ddp-mk-bot{bottom:12px}
+.ddp-mk-tools{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;max-width:100%;padding:4px;border-radius:12px;background:var(--dsw-alias-bg-layer-1);
+  box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 .5px var(--dsw-alias-border-l3);animation:ddp-in .16s ${EASE}}
+.ddp-mk-tools .ddp-btn.sel{background:rgba(77,107,254,.14);color:${ACCENT}}
+.ddp-mk-color{position:relative;display:inline-flex}
+.ddp-mk-color>.ddp-btn i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.35)}
+.ddp-mk-pal{position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:2;display:grid;grid-template-columns:repeat(4,22px);gap:7px;padding:9px;border-radius:11px;background:var(--dsw-alias-bg-layer-1);
+  box-shadow:0 12px 32px rgba(0,0,0,.24),0 0 0 .5px var(--dsw-alias-border-l3)}
+.ddp-mk-pal button{width:22px;height:22px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
+.ddp-mk-pal button.sel{outline:2px solid ${ACCENT};outline-offset:2px}
+.ddp-mk-sz{display:inline-flex}
+.ddp-mk-sz .ddp-btn{min-width:24px;padding:0 4px}
+.ddp-mk-sz i{border-radius:50%;background:currentColor}
+.ddp-mk-bar{pointer-events:auto;display:flex;align-items:center;gap:6px;max-width:100%;padding:4px 4px 4px 14px;border-radius:999px;background:rgba(24,24,27,.94);color:#f4f4f5;font-size:12px;
+  box-shadow:0 8px 24px rgba(0,0,0,.25);animation:ddp-in .16s ${EASE}}
+.ddp-mk-bar span{flex:1;min-width:0;margin-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(244,244,245,.8)}
+.ddp-mk-bar span b{margin-right:6px;font-weight:600;color:#fff}
+.ddp-mk-bar button{flex:none;height:28px;padding:0 13px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#f4f4f5;font:inherit;cursor:pointer}
+.ddp-mk-bar button:hover:not(:disabled){background:rgba(255,255,255,.2)}
+.ddp-mk-bar button.go{background:${ACCENT};color:#fff;font-weight:600}
+.ddp-mk-bar button.go:hover:not(:disabled){background:#3d5bf0}
+.ddp-mk-bar button.go.idle{background:rgba(77,107,254,.45);color:rgba(255,255,255,.75)}
+.ddp-mk-coach{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 32px);padding:14px 18px 12px;border-radius:14px;pointer-events:none;background:rgba(24,24,27,.86);color:#f4f4f5;font-size:13px;line-height:1.55;box-shadow:0 10px 30px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:ddp-in .2s ease}
+.ddp-mk-coach b{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:#fff}
+.ddp-mk-coach ol{margin:0;padding:0 0 0 1.3em;color:rgba(244,244,245,.86)}
+.ddp-mk-coach li+li{margin-top:2px}
+.ddp-mk-bar button:disabled{opacity:.5;cursor:default}
 .ddp-skel{position:absolute;inset:0;z-index:2;padding:28px 24px;display:flex;flex-direction:column;gap:14px;background:var(--dsw-alias-bg-layer-1);transition:opacity .3s ease;pointer-events:none}
 .ddp-skel.gone{opacity:0}
 .ddp-skel b{display:block;border-radius:8px;background:var(--dsw-alias-bg-layer-2);position:relative;overflow:hidden}
@@ -819,8 +1103,8 @@ window.__ModuleLoader__.load({
 .ddp-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
 .ddp-wait .card{position:relative;width:min(78%,440px);aspect-ratio:16/11;border-radius:12px;overflow:hidden;box-shadow:0 0 0 .5px var(--dsw-alias-border-l3),0 14px 40px rgba(0,0,0,.14);animation:ddp-ghost 1.6s ease-in-out infinite}
 .ddp-wait p{margin:0;color:var(--dsw-alias-label-tertiary);text-align:center;line-height:1.6}
-.ddp-toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:7;padding:7px 14px;border-radius:999px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);font-size:12px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:ddp-in .2s ease}
-.ddp-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 24px;text-align:center;color:var(--dsw-alias-label-tertiary)}
+.ddp-toast{position:absolute;left:12px;right:12px;top:14px;width:fit-content;max-width:calc(100% - 24px);margin-inline:auto;z-index:7;padding:7px 14px;border-radius:14px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);font-size:12px;line-height:1.5;text-align:center;overflow-wrap:anywhere;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:ddp-in .2s ease}
+.ddp-empty{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:12px;padding:32px 24px;text-align:center;color:var(--dsw-alias-label-tertiary)}
 .ddp-empty b{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500}
 .ddp-empty p{margin:6px 0 0;max-width:300px;line-height:1.6}
 .ddp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;text-align:left;counter-reset:s}
@@ -837,7 +1121,11 @@ window.__ModuleLoader__.load({
 @keyframes ddp-ants{to{stroke-dashoffset:-14}}
 @keyframes ddp-sel{0%,30%{opacity:0}42%,88%{opacity:1}100%{opacity:0}}
 @keyframes ddp-cur{0%,100%{transform:translate(132px,98px)}36%,90%{transform:translate(58px,76px)}}
-.ddp-empty form{display:flex;gap:6px;width:100%;max-width:320px;margin-top:4px}
+.ddp-empty form{display:flex;flex-wrap:wrap;gap:6px;width:100%;max-width:320px;margin-top:4px}
+.ddp-browse{height:26px;padding:0 12px;flex:none;border:.5px solid var(--dsw-alias-border-l3,rgba(127,127,127,.4));border-radius:999px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;cursor:pointer}
+.ddp-browse:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.ddp-drop .in.no{border-color:var(--dsw-alias-label-tertiary)}
+.ddp-drop .in.no svg{color:var(--dsw-alias-label-tertiary)}
 .ddp-go{height:26px;padding:0 12px;border:0;border-radius:999px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);font:inherit;cursor:pointer}
 .ddp-err{color:var(--dsw-alias-state-error-primary,#e5484d);font-size:11.5px}
 .ddp-head{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--dsw-radius-md,8px);background:transparent;color:var(--dsw-alias-label-secondary);cursor:pointer;position:relative}
@@ -878,6 +1166,7 @@ window.__ModuleLoader__.load({
 .ddp{position:relative;outline:none}
 .ddp-drop{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;background:color-mix(in srgb,var(--dsw-alias-bg-layer-1) 72%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:ddp-in .15s ease}
 .ddp-drop *{pointer-events:none}
+.ddp-drop.soft{pointer-events:none}
 .ddp-drop .in{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:340px;padding:28px 20px;border:1.5px dashed ${ACCENT};border-radius:16px;background:var(--dsw-alias-bg-layer-1);box-shadow:0 10px 30px rgba(0,0,0,.18);text-align:center;color:var(--dsw-alias-label-tertiary);line-height:1.5}
 .ddp-drop .in svg{width:28px;height:28px;color:${ACCENT};margin-bottom:4px}
 .ddp-drop .in b{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500}
@@ -920,14 +1209,47 @@ window.__ModuleLoader__.load({
 .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 .pv{position:relative;display:block;height:74px;border-radius:10px;overflow:hidden;container-type:inline-size;box-shadow:0 0 0 .5px rgba(127,127,127,.35);transition:transform .15s ${EASE},box-shadow .15s}
+.ddp-sc:hover .pv,.ddp-sc:focus-visible .pv{transform:translateY(-1px);box-shadow:0 0 0 1.5px ${ACCENT},0 6px 16px rgba(0,0,0,.12)}
+.ddp-sc:focus-visible{outline:none}
+.ddp-sc:hover,.ddp-sc:focus-visible{color:var(--dsw-alias-label-primary)}
+.ddp-sc .pv .ddp-sam{width:calc(100cqw / .32);min-height:calc(100% / .32);transform:scale(.32);transform-origin:0 0;pointer-events:none}
+.ddp-sam{display:flex;flex-direction:column;gap:7px;padding:12px 14px 14px;font-size:11px;line-height:1.45;text-align:left;overflow:hidden;box-sizing:border-box}
+.ddp-sam b{font-weight:600;color:inherit} /* 空白页的 .ddp-empty b 会把字染成界面色 */
+.ddp-sam .top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
+.ddp-sam .top b{font-size:12px}
+.ddp-sam .lg{width:14px;height:14px;flex:none}
+.ddp-sam .nv{margin-left:auto;font-size:10px;white-space:nowrap}
+.ddp-sam .av{width:18px;height:18px;flex:none;border-radius:50%}
+.ddp-sam h5{margin:2px 0 0;font-size:21px;line-height:1.2}
+.ddp-sam p{margin:0}
+.ddp-sam .acts{display:flex;align-items:center;gap:12px;margin:2px 0 4px;white-space:nowrap}
+.ddp-sam .bt{display:inline-flex;align-items:center;height:26px;padding:0 13px;font-weight:600}
+.ddp-sam .cards{display:grid;grid-template-columns:1.25fr 1fr;gap:9px;align-items:stretch}
+.ddp-sam .cd{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px;font-size:10px;box-sizing:border-box}
+.ddp-sam .cd>*{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.ddp-sam .cd>b{font-size:11.5px}
+.ddp-sam .im{display:block;flex:none;height:46px;margin-bottom:4px}
+.ddp-sam .pr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px}
+.ddp-sam .pr b{font-size:15px;font-weight:700}
+.ddp-sam .chip{padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:600}
+.ddp-sam .cd>.num{margin:2px 0 6px;font-size:28px;line-height:1.1}
+.ddp-sam .bar{position:relative;display:block;flex:none;height:5px;margin-bottom:5px;border-radius:3px}
+.ddp-sam .bar i{position:absolute;left:0;top:0;bottom:0;width:86%;border-radius:inherit}
+.ddp-samview{display:flex;flex-direction:column;gap:8px;text-align:left}
+.ddp-samview .all{align-self:flex-start;height:24px;margin-left:-4px;font-size:12px}
+.ddp-samview .all svg,.ddp-samview .row svg{width:14px;height:14px}
+.ddp-samview .ddp-sam{border-radius:12px;box-shadow:0 0 0 .5px rgba(127,127,127,.35),0 8px 24px rgba(0,0,0,.10);animation:ddp-in .2s ${EASE}}
+.ddp-samview .meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
+.ddp-samview .meta b{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.ddp-samview .meta p{flex-basis:100%;margin:0;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+.ddp-samview .sw{display:flex;gap:3px;margin-left:auto}
+.ddp-samview .sw i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 .5px rgba(127,127,127,.5)}
+.ddp-samview .row{display:flex;align-items:center;gap:2px}
+.ddp-samview .row .ddp-btn{height:26px;min-width:26px}
+.ddp-samview .row .nx svg{transform:scaleX(-1)}
+.ddp-samview .row em{min-width:40px;font-style:normal;font-size:11px;text-align:center;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
+.ddp-samview .row .ddp-go{margin-left:auto;height:28px;font-size:12px}
 .ddp-sc .nm{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ddp-tries{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:440px}
 .ddp-tries>span{flex-basis:100%;font-size:11px;line-height:16px}
@@ -986,6 +1308,7 @@ window.__ModuleLoader__.load({
 .ddp-banner .ddp-btn{height:24px;min-width:24px;border-radius:999px}
 .ddp-toast{display:flex;align-items:center;gap:10px}
 .ddp-toast.low{top:56px}
+.ddp-toast.mk{top:auto;bottom:62px}
 .ddp-toast button{border:0;padding:0;background:transparent;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
 .ddp-cmp{position:absolute;inset:0;overflow:hidden}
 .ddp-cmp>.ly{position:absolute;inset:0}
@@ -1030,7 +1353,7 @@ window.__ModuleLoader__.load({
 .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,.ddp-ho input[type=text]{flex:1;min-width:0;box-sizing:border-box;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}
@@ -1038,6 +1361,15 @@ window.__ModuleLoader__.load({
 .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 .pathrow{display:flex;gap:6px;align-items:center}
+.ddp-ho .moved{margin:6px 0 0;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+.ddp-ho .moved.bad{color:var(--dsw-alias-state-error-primary,#d54941)}
+.ddp-dirbtn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;padding:0;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-secondary);cursor:pointer}
+.ddp-dirbtn:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3,rgba(127,127,127,.5))}
+.ddp-dirbtn:disabled{opacity:.5;cursor:default}
+.ddp-dirbtn svg{width:15px;height:15px}
+.ddp-tokens.ddp-sys footer form button.ddp-dirbtn{width:28px;padding:0;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.3));background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);border-radius:8px}
+.ddp-tokens.ddp-sys footer form button.ddp-dirbtn:hover:not(:disabled){background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-border-l3,rgba(127,127,127,.5))}
 .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))}
@@ -1051,13 +1383,42 @@ window.__ModuleLoader__.load({
 .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}}
 @container (max-width:580px){.ddp-bar>.o2{display:none}.ddp-menu .o2{display:flex}}
+/* 标注底栏：右侧栏窄时「这支笔怎么用」折成两行，不被三个按钮挤成省略号 */
+@container (max-width:640px){.ddp-mk-bar{border-radius:18px}.ddp-mk-bar span{white-space:normal;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
+/* 画标注时预览不动，画布右下角的缩放按钮被标注层盖着也点不到：先收起来，免得和底栏叠在一起 */
+.ddp-stage:has(>.ddp-mark) .ddp-zoom{display:none}
+/* 输入框里的标签：DSH 的引用标签换成我们的图标 + 底色；消息里我们自己画同样的样子 */
+[data-composer-chip^="${PICK_SRC}"]>span,.ddp-pickpill{border-radius:6px;padding:0 6px 0 5px;background:var(--dsw-alias-state-business-tertiary,color-mix(in srgb,${ACCENT} 13%,transparent));color:var(--dsw-alias-state-business-primary,${ACCENT});cursor:default}
+[data-composer-chip^="${PICK_SRC}"]>span>[aria-hidden]{width:12px;height:12px;align-self:center;font-size:0;background:currentColor}
+[data-composer-chip^="${PICK_SRC}"]>span>[aria-hidden],.ddp-pickpill::before,.ddp-pickcard b::before{-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
+${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"]>span>[aria-hidden],.ddp-pickpill[data-i="${k}"]::before,.ddp-pickcard[data-i="${k}"] b::before{-webkit-mask-image:${iconUrl(d)};mask-image:${iconUrl(d)}}`).join('\n')}
+.ddp-pickpill{display:inline;margin:0 2px;font-weight:500;white-space:inherit;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
+.ddp-pickpill::before{content:'';display:inline-block;width:.86em;height:.86em;margin-right:4px;vertical-align:-.1em;background:currentColor}
+.ddp-pickcard{position:fixed;z-index:2147483000;max-width:min(340px,calc(100vw - 24px));padding:10px 12px;border-radius:12px;pointer-events:none;
+  background:linear-gradient(var(--dsw-specific-menu,transparent),var(--dsw-specific-menu,transparent)),var(--dsw-specific-input-major,var(--dsw-alias-bg-base,#fff));
+  color:var(--dsw-alias-label-primary,#18181b);font-size:13px;line-height:1.5;--dsw-elevation-stroke-color:var(--dsw-alias-border-l1,rgba(0,0,0,.08));
+  box-shadow:var(--dsw-elevation-prominent,0 0 0 1px rgba(0,0,0,.08),0 10px 28px rgba(0,0,0,.18));animation:ddp-in .12s ${EASE}}
+.ddp-pickcard b{display:flex;align-items:center;gap:6px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-pickcard b::before{content:'';flex:none;width:14px;height:14px;background:${ACCENT}}
+.ddp-pickcard code{display:block;margin-top:3px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-secondary,#52525b);word-break:break-all}
+.ddp-pickcard span{display:block;margin-top:2px;color:var(--dsw-alias-label-tertiary,#a1a1aa);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-pickcard p{margin:3px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
+.ddp-pickcard img{display:block;width:100%;max-height:200px;margin:7px 0 2px;object-fit:contain;border-radius:8px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.08))}
+.ddp-pickcard>i{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
+.ddp-pickcard>i>i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
+.ddp-pickcard.wide{width:min(320px,calc(100vw - 24px))}
 `
+    // 页面不刷新就换了新版插件时，旧版留下的样式要换成新的；卸载时一起拿掉
     function ensureStyle() {
-      if (typeof document === 'undefined' || document.getElementById('dsh-design-studio-style')) return
-      const el = document.createElement('style')
-      el.id = 'dsh-design-studio-style'
-      el.textContent = CSS
-      document.head.appendChild(el)
+      if (typeof document === 'undefined') return () => {}
+      let el = document.getElementById('dsh-design-studio-style')
+      if (!el) {
+        el = document.createElement('style')
+        el.id = 'dsh-design-studio-style'
+        document.head.appendChild(el)
+      }
+      if (el.textContent !== CSS) el.textContent = CSS
+      return () => { if (el.textContent === CSS) el.remove() }
     }
 
     // ── 图标 ─────────────────────────────────────────────────────────────────
@@ -1072,6 +1433,7 @@ window.__ModuleLoader__.load({
       app: () => svg([h('rect', { key: 1, x: 7, y: 2.5, width: 10, height: 19, rx: 2.4 }), h('path', { key: 2, d: 'M10.5 5h3' })]),
       miniprogram: () => svg([h('rect', { key: 1, x: 6, y: 2.5, width: 12, height: 19, rx: 2.4 }), h('rect', { key: 2, x: 11.5, y: 5.2, width: 4.5, height: 2.4, rx: 1.2 })]),
       tablet: () => svg([h('rect', { key: 1, x: 4.5, y: 3, width: 15, height: 18, rx: 2.2 }), h('path', { key: 2, d: 'M11 18h2' })]),
+      desktop: () => svg([h('rect', { key: 1, x: 2.5, y: 4.5, width: 19, height: 15, rx: 2.6 }), h('path', { key: 2, d: 'M9 4.5v15' }), h('path', { key: 3, d: 'M4.8 7.2h.01M6.8 7.2h.01' })]),
       poster: () => svg([h('rect', { key: 1, x: 5, y: 3, width: 14, height: 18, rx: 1.8 }), h('path', { key: 2, d: 'M5 16l4-4 3 3 2-2 5 5' }), h('circle', { key: 3, cx: 14.5, cy: 8, r: 1.6 })]),
       slides: () => svg([h('rect', { key: 1, x: 2.5, y: 4, width: 19, height: 12, rx: 1.8 }), h('path', { key: 2, d: 'M12 16v3M8.5 20.5h7' }), h('path', { key: 3, d: 'M6.5 8h6M6.5 11h4' })]),
       email: () => svg([h('rect', { key: 1, x: 3, y: 5, width: 18, height: 14, rx: 2.2 }), h('path', { key: 2, d: 'M3.5 6.5l8.5 6.5 8.5-6.5' })]),
@@ -1108,6 +1470,16 @@ window.__ModuleLoader__.load({
       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' })]),
+      pen: () => svg([h('path', { key: 1, d: 'M4.5 19.5l.9-4.2L15.6 5.1a2 2 0 0 1 2.9 0l.4.4a2 2 0 0 1 0 2.9L8.7 18.6z' }), h('path', { key: 2, d: 'M13.8 6.9l3.3 3.3' })]),
+      marker: () => svg([h('path', { key: 1, d: 'M14.5 4.5l5 5-7.5 7.5H8.5v-3.5z' }), h('path', { key: 2, d: 'M8.5 13.5L4 18h4.5' }), h('path', { key: 3, d: 'M13 20.5h7' })]),
+      arrow: () => svg([h('path', { key: 1, d: 'M5 19L19 5' }), h('path', { key: 2, d: 'M10 5h9v9' })]),
+      square: () => svg([h('rect', { key: 1, x: 4, y: 5, width: 16, height: 14, rx: 1.6 })]),
+      circle: () => svg([h('ellipse', { key: 1, cx: 12, cy: 12, rx: 8.5, ry: 7.5 })]),
+      eraser: () => svg([h('path', { key: 1, d: 'M8.6 19.5L4.4 15.3a1.5 1.5 0 0 1 0-2.1l8.8-8.8a1.5 1.5 0 0 1 2.1 0l4.2 4.2a1.5 1.5 0 0 1 0 2.1L11 19.5z' }), h('path', { key: 2, d: 'M8.8 9.2l6 6' }), h('path', { key: 3, d: 'M11 19.5h9' })]),
+      undo: () => svg([h('path', { key: 1, d: 'M9 14L4.5 9.5 9 5' }), h('path', { key: 2, d: 'M4.5 9.5H15a5 5 0 0 1 0 10h-3' })]),
+      redo: () => svg([h('path', { key: 1, d: 'M15 14l4.5-4.5L15 5' }), h('path', { key: 2, d: 'M19.5 9.5H9a5 5 0 0 0 0 10h3' })]),
+      trash: () => svg([h('path', { key: 1, d: 'M4.5 7h15M9.5 7V4.5h5V7' }), h('path', { key: 2, d: 'M6.5 7l.9 12a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.9-12' }), h('path', { key: 3, d: 'M10.5 11v5.5M13.5 11v5.5' })]),
+      folder: () => svg([h('path', { key: 1, d: 'M3.5 7.5a2 2 0 0 1 2-2h3.8l2 2.2h7.2a2 2 0 0 1 2 2v7.8a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z' })]),
       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),
     }
     // 引导页上的大图标
@@ -1177,6 +1549,63 @@ window.__ModuleLoader__.load({
       return data
     }
 
+    /** 打开一个本地文件 / 文件夹 / 端口（地址栏、「浏览…」、拖进来都走这里），打开后马上拉一次新状态 */
+    async function openTarget(sid, target) {
+      const s = await post('open', { session: sid, target })
+      const p = poller(sid)
+      p.stop()
+      p.start()
+      return s
+    }
+
+    // DSH 桌面版给的两座桥：拿选中 / 拖进来的文件的真实路径；弹系统的选文件夹窗口。网页版没有，对应的按钮就不显示
+    const hostPaths = () => { const b = globalThis.__DSH_HOST_PATHS__; return b && typeof b.pathFor === 'function' ? b : null }
+    const dirPicker = () => { const b = globalThis.__DSH_DIRECTORY_PICKER__; return b && typeof b.pick === 'function' ? b : null }
+    const pathOf = (file) => { try { const b = hostPaths(); return (b && file && b.pathFor(file)) || '' } catch { return '' } }
+    const HTML_FILE = /\.html?$/i
+    const isPageFile = (f) => !!f && (HTML_FILE.test(f.name || '') || /^text\/html$/i.test(f.type || ''))
+
+    /**
+     * 拖进来的是什么：'page' HTML 文件（桌面版能打开）、'maybe' 没类型的（多半是文件夹）、'web' 这两种但网页版拿不到路径、
+     * 'image' 图片（当参考图）、'other' 别的文件。拖着的时候只看得到类型（文件夹、没后缀的文件类型是空的）
+     */
+    function dragKind(dt) {
+      const all = [...((dt && dt.items) || [])].filter(Boolean)
+      const items = all.filter((x) => x.kind === 'file')
+      if (!items.length) return 'image'
+      // 从网页上拖下来的图：带着网址和 <img> 那段 HTML，文件那项常常没类型——是图，不是文件夹
+      const strs = all.filter((x) => x.kind === 'string').map((x) => String(x.type).toLowerCase())
+      if (strs.includes('text/uri-list') && strs.includes('text/html') && items.every((x) => !x.type || /^image\//i.test(x.type))) return 'image'
+      // 拖着时看不到文件名：标了 HTML 的是页面；没类型的多半是文件夹（也可能是 .ts、Makefile 这种），蒙层话说中性一点
+      if (items.some((x) => /^text\/html$/i.test(x.type))) return hostPaths() ? 'page' : 'web'
+      if (items.some((x) => !x.type)) return hostPaths() ? 'maybe' : 'web'
+      if (items.some((x) => /^image\//i.test(x.type))) return 'image'
+      return 'other'
+    }
+
+    /** 松手时拖进来的东西 → { page: 要打开的文件 / 文件夹的 File, dir: 是不是文件夹, image: 图片 File } */
+    function droppedOf(dt) {
+      const out = { page: null, dir: false, image: null, any: false }
+      const items = [...((dt && dt.items) || [])].filter((x) => x && x.kind === 'file')
+      const list = items.length
+        ? items.map((x) => {
+          let dir = false
+          // 文件夹只有 entry 分得出来，得在 drop 里同步取
+          try { const en = typeof x.webkitGetAsEntry === 'function' ? x.webkitGetAsEntry() : null; dir = !!(en && en.isDirectory) } catch { dir = false }
+          let f = null
+          try { f = x.getAsFile() } catch { f = null }
+          return { f, dir }
+        })
+        : [...((dt && dt.files) || [])].map((f) => ({ f, dir: false }))
+      for (const { f, dir } of list) {
+        if (!f) continue
+        out.any = true
+        if (!out.page && (dir || isPageFile(f))) { out.page = f; out.dir = dir }
+        else if (!out.image && !dir && /^image\//i.test(f.type || '')) out.image = f
+      }
+      return out
+    }
+
     // ── 选中内容 → 输入框里的一段字 ──────────────────────────────────────────
 
     /** 页面地址 → 用户认得的位置：本地文件给路径，开发服务器给 localhost 地址 */
@@ -1267,6 +1696,296 @@ window.__ModuleLoader__.load({
       return { text: lead + body, back }
     }
 
+    // ── 点选标签：DSH 0.2.1 起输入框里放一个短标签（像 @文件），悬停看详情；发出去模型照样拿到整段 ──────
+
+    const PICK_LINE = /^((文件|页面|位置|组件|HTML|样式|包含|屏宽)：|- )/
+    const baseName = (s) => String(s || '').replace(/[?#].*$/, '').split(/[\\/]/).filter(Boolean).pop() || ''
+    // 标签复制 / 发出去都是整段，前后空一行：贴回输入框、和用户的话挨着都不会粘成一块
+    const pickClip = (text) => `\n\n${text}\n\n`
+
+    /** 从插进去的那段字里读出标签要显示的：元素名、字、位置、大小、文件 */
+    function pickInfo(text) {
+      const lines = String(text || '').split('\n').map((l) => l.trim()).filter(Boolean)
+      const head = lines[0] || ''
+      const get = (k) => { const l = lines.find((x) => x.startsWith(k)); return l ? l.slice(k.length).trim() : '' }
+      const file = baseName(get('文件：') || get('页面：'))
+      let m = head.match(/^〔选中元素〕(.*?)(?:「(.*)」)?$/)
+      if (m) return { kind: 'el', name: m[1], text: m[2] || '', sel: get('位置：'), size: (get('样式：').match(/^(\d+×\d+)/) || [])[1] || '', file }
+      m = head.match(/^〔选中区域〕.*?(\d+×\d+)/)
+      if (/^〔选中区域〕/.test(head)) return { kind: 'area', n: lines.filter((l) => l.startsWith('- ')).length, size: m ? m[1] : '', file, items: lines.filter((l) => l.startsWith('- ')).slice(0, 3).map((l) => l.slice(2)) }
+      return null
+    }
+
+    /** 标签上的字固定：「1 个元素」，区域写里面有几个元素（是哪个元素悬停看） */
+    function pickLabel(info, t) {
+      if (!info) return ''
+      if (info.kind !== 'area') return t('chipOne')
+      return info.n > 1 ? t('pickElems', { n: info.n }) : info.n === 1 ? t('chipOne') : t('pickArea')
+    }
+
+    /** 点选标签的悬停卡片：元素上的字、元素名、大小、选择器、文件 */
+    function pickItems(info, t) {
+      if (info.kind === 'area') return [['b', t('pickArea')], ['code', [info.n ? t('pickElems', { n: info.n }) : '', info.size].filter(Boolean).join(' · ')], ...info.items.map((x) => ['span', x]), ['span', info.file]]
+      return [['b', info.text || info.name], ['code', [info.name, info.size].filter(Boolean).join(' · ')],
+        info.sel && info.sel !== info.name ? ['code', info.sel.length > 90 ? '…' + info.sel.slice(-90) : info.sel] : null, ['span', info.file]]
+    }
+
+    // ── 别的整段（标注、调样式、风格、体检、转成代码…）也一样：输入框里一个短标签，发出去模型拿到整段 ──────
+    // 按我们自己的模板认（中英文各一份），{x} 那里是一行里的任意字
+
+    const reEsc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    // 「文件：…」以扩展名结尾、「页面：…」是地址（没有空格和中文）：旧消息里紧贴在后面的用户的话不会被算进来
+    const WHERE_RE = '(?:文件：[^\\n]*\\.[A-Za-z0-9]{1,8}|页面：[!-~]*)'
+    /** 模板 → 正则源和各组的名字；sp：哪个 {x} 用什么正则（默认一行里任意字，{where} 是「文件：/页面：」那行） */
+    function tplSrc(tpl, sp = {}) {
+      const keys = []
+      const src = String(tpl).replace(/\n+$/, '').split(/(\{\w+\})/).map((p) => {
+        const m = p.match(/^\{(\w+)\}$/)
+        if (!m) return reEsc(p)
+        keys.push(m[1])
+        return '(' + (sp[m[1]] || (m[1] === 'where' ? WHERE_RE : '[^\\n]*')) + ')'
+      }).join('')
+      return { src, keys }
+    }
+    /** 正则源里的捕获组都改成不捕获（拼进别的模板里，免得组的序号乱） */
+    const noCap = (src) => src.replace(/(?<!\\)\((?!\?)/g, '(?:')
+    const HEX = /#[0-9a-f]{6}\b|#[0-9a-f]{3}\b/gi
+    const hexes = (s) => [...new Set(String(s || '').match(HEX) || [])]
+    const fileOf = (v) => baseName(String(v.where || '').replace(/^(文件|页面)：/, ''))
+
+    // 标注图、参考图的小图（悬停卡片上看一眼）：只在这次打开 DSH 时记着，最多 24 张
+    const chipThumbs = new Map()
+    function keepThumb(path, src) {
+      try {
+        const w = src.naturalWidth || src.width
+        const ht = src.naturalHeight || src.height
+        const k = Math.min(1, 640 / w, 640 / ht)
+        const c = document.createElement('canvas')
+        c.width = Math.max(1, Math.round(w * k))
+        c.height = Math.max(1, Math.round(ht * k))
+        const g = c.getContext('2d')
+        g.fillStyle = '#fff'
+        g.fillRect(0, 0, c.width, c.height)
+        g.drawImage(src, 0, 0, c.width, c.height)
+        chipThumbs.set(path, { src: c.toDataURL('image/jpeg', 0.85), w: c.width, h: c.height })
+        if (chipThumbs.size > 24) chipThumbs.delete(chipThumbs.keys().next().value)
+      } catch { /* 没小图就只显示文件名 */ }
+    }
+
+    let chipKinds = null
+    /** 每种整段：图标、认它的正则（alts）、标签上的字、悬停卡片上的几行（[标签, 内容]） */
+    function kinds() {
+      if (chipKinds) return chipKinds
+      const L = [ZH, EN]
+      const both = (key, sp) => L.map((x) => tplSrc(x[key], sp))
+      const lit = (keys) => '(?:' + keys.flatMap((k) => L.map((x) => reEsc(x[k].replace(/\n+$/, '')))).join('|') + ')'
+      const quote = (t, s) => t('lang') === 'en' ? `"${s}"` : `「${s}」`
+      chipKinds = [
+        { i: 'mark', label: (v, t) => t('chipMark'),
+          alts: L.map((x) => tplSrc(x.mkAsk, { where: '[^\\n]*', notes: `(?:${noCap(tplSrc(x.mkNotes).src)}\\n)?` })),
+          card: (v, t) => [['b', t('chipMark')], ['img', chipThumbs.get(v.path)], ['p', String(v.notes || '').trim().replace(/^[^：:]*[：:]\s*/, '')], ['span', v.where], ['span', baseName(v.path)]] },
+        { i: 'text', label: (v, t) => t('chipText'), alts: both('textAsk'),
+          card: (v, t) => [['b', t('chipText')], ['p', `${quote(t, v.before)} → ${quote(t, v.after)}`], ['span', fileOf(v)]] },
+        { i: 'style', label: (v, t) => t('chipStyle'), alts: both('styleAskText', { rules: '(?:\\n- [^\\n]*)*\\n|' }),
+          card: (v, t) => [['b', t('chipStyle')], ['code', v.sel && v.sel !== v.name ? `${v.name} · ${v.sel}` : v.name], ['p', v.list], ['span', fileOf(v)]] },
+        { i: 'layers', label: (v, t) => t('chipVariant'), alts: both('variantText'),
+          card: (v, t) => [['b', t('chipVariant')], ['code', v.name], ['span', fileOf(v)]] },
+        { i: 'layers', label: (v, t) => t('chipDir'), alts: [...both('pickText'), ...both('pickKeep')],
+          card: (v, t) => [['b', t('chipDir')], ['code', v.name], ['span', v.others], ['span', fileOf(v)]] },
+        { i: 'check', label: (v, t) => t('chipCheck', { n: v.n }),
+          alts: L.map((x) => { const a = tplSrc(x.checkAsk, { n: '\\d+' }); const line = `(?:${noCap(tplSrc(x.ckScreen).src)}|\\d+\\. [^\\n]* — [^\\n]*)`; return { src: `${a.src}(?:\\n+${line})+\\n+${tplSrc(x.checkTail).src}`, keys: a.keys } }),
+          card: (v, t, s) => { const it = s.split('\n').filter((l) => /^\d+\. /.test(l)); return [['b', t('chipCheck', { n: v.n })], ...it.slice(0, 4).map((l) => ['span', l.replace(/ — .*$/, '')]), it.length > 4 ? ['span', '…'] : null] } },
+        { i: 'code', label: (v, t) => t('chipCode'), alts: both('hoText', { only: '(?:，screens: [^\\n]*)?' }),
+          card: (v, t) => [['b', t('chipCode')], ['code', v.fw], ['span', v.dest], ['span', v.scope]] },
+        { i: 'image', label: (v, t) => t('chipRef'), alts: L.map((x) => tplSrc(x.refText, { ask: lit(['refAsk', 'refAskNew']), w: '\\d+', h: '\\d+' })),
+          card: (v, t) => [['b', t('chipRef')], ['img', chipThumbs.get(v.path)], ['sw', hexes(v.colors)], ['span', `${v.w}×${v.h} · ${v.tone}`], ['span', baseName(v.path)]] },
+        { i: 'style', label: (v, t) => t('chipTweak'), alts: L.map((x) => ({ src: `${tplSrc(x.twAskHead).src}(?:\\n- [^\\n]*)+\\n${tplSrc(x.twAskTail).src}`, keys: [] })),
+          card: (v, t, s) => [['b', t('chipTweak')], ...s.split('\n').filter((l) => l.startsWith('- ')).slice(0, 5).map((l) => ['span', l.slice(2)])] },
+        { i: 'style', label: (v, t) => t('chipTwMake'), alts: both('twMakeText'), card: (v, t) => [['b', t('chipTwMake')], ['span', 'tweaks.json']] },
+        { i: 'style', label: (v, t) => t('chipTwFix'), alts: both('twFixText'), card: (v, t) => [['b', t('chipTwFix')], ['p', v.errs]] },
+        { i: 'look', label: (v, t) => t('chipSysEx'), alts: both('sysExtractText'), card: (v, t) => [['b', t('chipSysEx')], ['code', v.src]] },
+        { i: 'look', label: (v, t) => t('chipSysAp'), alts: both('sysApplyText'), card: (v, t) => [['b', t('chipSysAp')], ['code', v.name], ['span', v.dir]] },
+        { i: 'look', label: (v, t) => t('chipLook', { name: v.name }), alts: L.map((x) => tplSrc(x.styleText, { name: '[^\\n]*?', ask: lit(['styleStart', 'styleRestyle']) })),
+          card: (v, t) => [['b', t('chipLook', { name: v.name })], ['p', v.desc], ['sw', hexes(v.colors)], ['span', v.fonts && v.fonts.split(/[;；]/)[0]]] },
+        { i: 'look', label: (v) => v.name, alts: [{ src: `〔设计变量〕([^\\n]*?): ([^\\n]*)（(${WHERE_RE})）`, keys: ['name', 'value', 'where'] }],
+          card: (v) => [['b', v.name], ['code', v.value], ['sw', hexes(v.value)], ['span', fileOf(v)]] },
+        { i: 'look', label: (v, t) => t('chipTokens'), alts: both('tokensAskText'), card: (v, t) => [['b', t('chipTokens')], ['span', 'tokens.css']] },
+      ]
+      // 每种整段都以固定的一句（或固定的括号）收尾，后面还得是空行或结尾：旧版插成字的、用户的话紧跟着的都不认，照原样显示
+      for (const k of chipKinds) for (const a of k.alts) a.re = new RegExp(`${a.src}(?=\\n\\n|$)`, 'y')
+      return chipKinds
+    }
+
+    // 我们的整段没有特别长的行；有（贴进来的大段代码之类）就整条消息都不认，免得正则在长行上来回试很久
+    const longLine = (s) => s.split('\n').some((l) => l.length > 4000)
+
+    /** text 的 pos 处是不是我们的一整段：是就给出种类、各个 {x} 和结尾位置 */
+    function chipAt(text, pos) {
+      for (const k of kinds()) {
+        for (const a of k.alts) {
+          a.re.lastIndex = pos
+          const m = a.re.exec(text)
+          if (!m || !m[0]) continue
+          const end = pos + m[0].length
+          const v = {}
+          a.keys.forEach((key, j) => { if (m[j + 1] != null && !(key in v)) v[key] = m[j + 1] })
+          return { k, v, end }
+        }
+      }
+      return null
+    }
+
+    /** 一个标签存的整段 → 图标、标签上的字、悬停卡片；不是我们的给 null */
+    function chipOf(text, t) {
+      const s = String(text || '').trim()
+      const p = pickInfo(s)
+      if (p) return { i: 'pick', label: pickLabel(p, t), items: () => pickItems(p, t) }
+      if (longLine(s)) return null
+      const c = chipAt(s, 0)
+      if (!c || c.end !== s.length) return null
+      return { i: c.k.i, label: c.k.label(c.v, t), items: () => c.k.card(c.v, t, s) }
+    }
+
+    /** 消息里的点选块（开头一行〔选中元素〕/〔选中区域〕，后面跟着细节行） */
+    function pickRanges(text) {
+      const out = []
+      const re = /(^|\n)〔(?:选中元素|选中区域)〕/g
+      let m
+      while ((m = re.exec(text))) {
+        const start = m.index + m[1].length
+        let end = text.indexOf('\n', start)
+        if (end < 0) end = text.length
+        const n1 = text.indexOf('\n', end + 1)
+        if (end >= text.length || !/^(文件|页面)：/.test(text.slice(end + 1, n1 < 0 ? text.length : n1).trim())) { re.lastIndex = start + 1; continue }
+        while (end < text.length) {
+          const nx = text.indexOf('\n', end + 1)
+          const line = text.slice(end + 1, nx < 0 ? text.length : nx).trim()
+          if (!PICK_LINE.test(line)) break
+          end = nx < 0 ? text.length : nx
+        }
+        const block = text.slice(start, end)
+        const ok = block.startsWith('〔选中元素〕') ? /\n位置：/.test(block) && /\nHTML：</.test(block) && /\n样式：/.test(block) : /^〔选中区域〕页面上 \([-\d.]+, [-\d.]+\) 起 [\d.]+×[\d.]+ 的一块\n/.test(block)
+        if (!ok) { re.lastIndex = start + 1; continue }
+        out.push({ start, end })
+        re.lastIndex = Math.max(end, start + 1)
+      }
+      return out
+    }
+
+    /** 消息里我们的整段都在哪（点选块 + 别的整段），按位置排好 */
+    let rangeMemo = { text: null, out: [] }
+    function chipRanges(text) {
+      if (rangeMemo.text === text) return rangeMemo.out
+      const out = pickRanges(text)
+      for (let pos = longLine(text) ? text.length : 0; pos < text.length;) {
+        if ((pos === 0 || text[pos - 1] === '\n') && !out.some((r) => pos >= r.start && pos < r.end)) {
+          const c = chipAt(text, pos)
+          if (c) { out.push({ start: pos, end: c.end }); pos = c.end; continue }
+        }
+        const nx = text.indexOf('\n', pos)
+        if (nx < 0) break
+        pos = nx + 1
+      }
+      out.sort((x, y) => x.start - y.start)
+      rangeMemo = { text, out }
+      return out
+    }
+
+    /** 发出去的消息里：我们的整段显示成标签，前后的换行显示成一个空格（和用户的话排在一行） */
+    const pickRule = {
+      id: 'ddp-pick',
+      order: -20,
+      match(text, from) {
+        for (const r of chipRanges(text)) {
+          const pre = text.slice(0, r.start).match(/\n+$/)
+          const post = text.slice(r.end).match(/^\n+/)
+          const cands = [
+            pre && r.start - pre[0].length > 0 ? { id: 'text', start: r.start - pre[0].length, end: r.start, data: { text: pre[0], display: ' ' } } : null,
+            { id: 'ddp-pick', start: r.start, end: r.end, data: { text: text.slice(r.start, r.end) } },
+            post && r.end + post[0].length < text.length ? { id: 'text', start: r.end, end: r.end + post[0].length, data: { text: post[0], display: ' ' } } : null,
+          ]
+          for (const c of cands) if (c && c.start >= from) return c
+        }
+        return undefined
+      },
+    }
+
+    /** 悬停卡片：输入框里的标签和消息里的标签共用一个 */
+    function pickCard(t) {
+      if (typeof document === 'undefined') return () => {}
+      let card = null
+      let on = null
+      const hide = () => { on = null; if (card) card.style.display = 'none' }
+      // 输入框里的标签：从编辑器里读出这个标签存的那段字
+      const textOf = (el) => {
+        if (el.dataset && el.dataset.pick) return el.dataset.pick
+        try {
+          const root = el.closest('[data-lexical-editor]')
+          const ed = root && root.__lexicalEditor
+          const k = Object.keys(el).find((x) => x.startsWith('__lexicalKey_'))
+          const node = ed && k ? ed.getEditorState()._nodeMap.get(el[k]) : null
+          return node && typeof node.__ref === 'string' ? node.__ref : ''
+        } catch { return '' }
+      }
+      const show = (el) => {
+        const c = chipOf(textOf(el), t)
+        if (!c) return
+        if (!card) {
+          card = document.createElement('div')
+          card.className = 'ddp-pickcard'
+          document.body.appendChild(card)
+        }
+        on = el
+        for (const x of [el, ...el.querySelectorAll('[title]')]) x.removeAttribute('title') // DSH 自带的悬停提示只有名字，别和卡片叠在一起
+        card.replaceChildren()
+        card.dataset.i = c.i
+        let wide = false
+        for (const it of c.items()) {
+          const [tag, v] = it || []
+          if (!v || (Array.isArray(v) && !v.length)) continue
+          let n
+          if (tag === 'img') {
+            n = document.createElement('img')
+            n.src = v.src
+            n.alt = ''
+            n.style.aspectRatio = `${v.w} / ${v.h}` // 图还没解码时卡片高度也对
+            wide = true
+          } else if (tag === 'sw') {
+            n = document.createElement('i')
+            for (const hex of v.slice(0, 10)) { const d = document.createElement('i'); d.style.background = hex; n.appendChild(d) }
+          } else {
+            n = document.createElement(tag)
+            n.textContent = v
+          }
+          card.appendChild(n)
+        }
+        card.classList.toggle('wide', wide)
+        card.style.display = 'block'
+        const r = el.getBoundingClientRect()
+        const w = card.offsetWidth
+        const ch = card.offsetHeight
+        card.style.left = Math.max(12, Math.min(innerWidth - w - 12, r.left)) + 'px'
+        card.style.top = (r.top - ch - 8 >= 8 ? r.top - ch - 8 : r.bottom + 8) + 'px'
+      }
+      const sel = `[data-composer-chip^="${PICK_SRC}"], .ddp-pickpill`
+      const over = (e) => {
+        const el = e.target && e.target.closest ? e.target.closest(sel) : null
+        if (el === on) return
+        if (el) show(el)
+        else hide()
+      }
+      document.addEventListener('mouseover', over, true)
+      document.addEventListener('scroll', hide, true)
+      return () => {
+        document.removeEventListener('mouseover', over, true)
+        document.removeEventListener('scroll', hide, true)
+        if (card) card.remove()
+      }
+    }
+
+    // 输入框里插标签：apply 里拿到 DSH 的服务后填上（旧版 DSH 没有就一直是 null，照旧插字）
+    let chips = null
+
     // DSH 的输入框（只认一个；分屏开着多个时不碰）
     function composerEl() {
       try {
@@ -1324,7 +2043,7 @@ window.__ModuleLoader__.load({
 
     /** 点了一个变量 → 输入框里的一段字 */
     function formatToken(tok, st) {
-      return `〔设计变量〕${tok.name}: ${tok.value}\n${whereOf(tok.href, st)}\n`
+      return `〔设计变量〕${tok.name}: ${String(tok.value).replace(/\s*\n\s*/g, ' ')}（${whereOf(tok.href, st)}）\n`
     }
 
     // ── 风格卡：开局挑一个风格（或给已有的设计换风格），整套配色、字体、圆角、阴影、要点放进输入框 ──────
@@ -1334,6 +2053,7 @@ window.__ModuleLoader__.load({
     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 MONO = '"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace'
+    const GROTESK = '"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", 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' },
@@ -1411,8 +2131,75 @@ window.__ModuleLoader__.load({
         head: SANS, w: 800, radius: 12, shadow: '0 4px 12px rgba(207,46,14,.12)',
         nzh: '价格用大号粗体数字（¥ 小一号），原价灰色划线；「限时」「包邮」这类小标签用色块；优惠券用金黄色、带锯齿边；倒计时醒目；信息多但分区清楚，主按钮通栏',
         nen: 'Prices in big bold numerals (smaller currency sign), old price struck through in gray; small colored tags like "Limited" and "Free shipping"; gold coupons with notched edges; a prominent countdown; dense but clearly sectioned, full-width main button' },
+      { id: 'japandi', zh: '日系原木', en: 'Japandi', dzh: '米色原木、低饱和、小字大留白', den: 'Oat and wood tones, muted, small type and lots of space',
+        c: { bg: '#F2EEE6', surface: '#FAF8F3', text: '#2F2B26', muted: '#6B645A', line: '#DDD5C8', primary: '#4F4234', accent: '#8C9A6E', on: '#FAF8F3', link: '#6B4F33' },
+        head: SANS, w: 500, radius: 6, shadow: '0 2px 8px rgba(79,66,52,.06)',
+        nzh: '像杂货店和家居品牌：字号偏小、字重不重，留白很多；颜色只有米、原木棕、灰绿，饱和度都低；照片柔光、自然材质（木、麻、陶）；细线分隔，几乎不用阴影；主按钮深棕实底',
+        nen: 'Like a lifestyle or homeware brand: smallish, light type and lots of space; only oat, wood brown and sage, all low saturation; soft-light photos of natural materials (wood, linen, ceramic); hairline dividers, almost no shadow; solid dark-brown main button' },
+      { id: 'swiss', zh: '瑞士网格', en: 'Swiss grid', dzh: '白底黑字红色块、严格网格', den: 'White, black type, red blocks, strict grid',
+        c: { bg: '#FFFFFF', surface: '#F1F1F1', text: '#0A0A0A', muted: '#545454', line: '#0A0A0A', primary: '#D9001B', accent: '#0A0A0A', on: '#FFFFFF', link: '#C2001A' },
+        head: GROTESK, w: 800, radius: 0, shadow: 'none',
+        nzh: '12 栏严格网格、全部左对齐（不居中）；标题是超大粗无衬线、字距收紧（-0.03em）；红色大色块只用一两处；用数字编号（01 02 03）和粗黑线分区；没有圆角、阴影和渐变',
+        nen: 'A strict 12-column grid, everything left-aligned (nothing centered); huge, bold, tightly tracked sans headings (-0.03em); one or two big red blocks; numbered sections (01 02 03) and heavy black rules; no radius, shadow or gradient' },
+      { id: 'brutal', zh: '粗野主义', en: 'Brutalist', dzh: '亮黄底、黑粗框、硬阴影、等宽字', den: 'Bright yellow, thick black borders, hard shadows, monospace',
+        c: { bg: '#FFEF5C', surface: '#FFFFFF', text: '#000000', muted: '#3B3B3B', line: '#000000', primary: '#000000', accent: '#FF5C39', on: '#FFEF5C', link: '#1F3FD1' },
+        head: MONO, w: 800, radius: 0, shadow: '5px 5px 0 #000000',
+        nzh: '卡片和按钮 3px 黑粗边框 + 大偏移的硬阴影（不模糊）；标题等宽字、很大；亮黄、白、橙红高饱和撞色；元素可以故意错位、叠放；不用渐变、圆角和柔和阴影；链接带下划线',
+        nen: '3px black borders and big unblurred offset shadows on cards and buttons; large monospace headings; loud yellow, white and red-orange blocks; deliberate offsets and overlaps are fine; no gradients, radius or soft shadows; underlined links' },
+      { id: 'cream', zh: '奶油风', en: 'Cream', dzh: '奶白燕麦焦糖、大圆角、柔光', den: 'Milk, oat and caramel, big radii, soft light',
+        c: { bg: '#FAF5EE', surface: '#FFFDF9', text: '#3A2F28', muted: '#76675C', line: '#EEE3D5', primary: '#8C5E3C', accent: '#E7C9A6', on: '#FFFFFF', link: '#8A5A36' },
+        head: ROUND, w: 700, radius: 22, shadow: '0 10px 30px rgba(140,94,60,.10)',
+        nzh: '奶白、燕麦、焦糖三个色；圆角大，多用圆形和胶囊形；阴影又大又淡、带一点暖色；字是深咖啡色不用纯黑；照片和插画柔光、低对比；整体软、暖、安静',
+        nen: 'Milk, oat and caramel; big radii, lots of circles and pills; large, faint, warm-tinted shadows; dark coffee text, never pure black; soft, low-contrast photos and illustrations; soft, warm and calm overall' },
+      { id: 'sport', zh: '运动能量', en: 'Sport', dzh: '黑底荧光绿、粗斜体、大数字', den: 'Black with volt green, heavy italics, big numbers',
+        c: { bg: '#0E0F11', surface: '#1A1C20', text: '#F4F5F6', muted: '#A1A5AD', line: '#2B2E35', primary: '#C8FF2E', accent: '#FF5A1F', on: '#0E0F11', link: '#C8FF2E' },
+        head: SANS, w: 900, radius: 6, shadow: 'none',
+        nzh: '标题超粗斜体、全大写、字距收紧；荧光绿只给主按钮、进度和关键数字；配速、心率、卡路里这类数字做得很大（等宽数字）；可以用斜切的色块（transform: skewX(-8deg)）；照片高对比、有动感；橙色只做警示和次要强调',
+        nen: 'Heavy italic, all-caps, tightly tracked headings; volt green only on the main button, progress and key numbers; big tabular numbers for pace, heart rate and calories; slanted blocks (transform: skewX(-8deg)) are fine; high-contrast action photos; orange only for alerts and secondary emphasis' },
     ]
 
+    /** 样板上各风格的招牌细节（卡片、按钮、标题、配图块），没写的按 STYLES 里的圆角阴影来 */
+    const LOOK = {
+      minimal: { card: { boxShadow: '0 1px 2px rgba(24,24,27,.06), inset 0 0 0 1px #E4E4E7' }, img: 'linear-gradient(135deg, #E9EEF8, #C7D6F5)' },
+      warm: { img: 'linear-gradient(135deg, #E7B08A, #A9542A)' },
+      editorial: { card: { background: 'transparent', boxShadow: 'inset 0 3px 0 #111111', borderRadius: 0 }, head: { letterSpacing: '-0.02em' }, img: '#C8231B' },
+      dark: { head: { letterSpacing: '.04em' }, img: 'linear-gradient(135deg, #2A2620, #C9A86A)' },
+      playful: { card: { border: '2px solid #1D1B3A' }, btn: { border: '2px solid #1D1B3A', boxShadow: '3px 3px 0 #1D1B3A' }, img: '#1F9E92' },
+      fresh: { card: { boxShadow: '0 6px 18px rgba(47,125,79,.10), inset 0 0 0 1px #DCE6DA' }, img: 'linear-gradient(135deg, #CFE6C9, #7DB08B)' },
+      tech: { card: { boxShadow: '0 1px 3px rgba(15,23,42,.08), inset 0 0 0 1px #E2E8F0' }, img: 'linear-gradient(135deg, #DCE6FF, #2457F5)' },
+      glass: { card: { background: 'rgba(255,255,255,.55)', backdropFilter: 'blur(14px)', boxShadow: '0 10px 30px rgba(16,21,28,.10), inset 0 0 0 1px rgba(255,255,255,.85)' }, img: 'linear-gradient(135deg, #FFD9C7, #C9E2FF)' },
+      soft: { btn: { boxShadow: '4px 4px 10px #C8CED6, -4px -4px 10px #FFFFFF' }, img: 'linear-gradient(135deg, #DDE2EA, #F4F6F9)' },
+      guochao: { card: { boxShadow: 'inset 0 0 0 1px #C8952E, 0 6px 18px rgba(140,30,20,.12)' } },
+      ink: { head: { letterSpacing: '.12em' }, img: 'radial-gradient(ellipse at 35% 65%, rgba(30,30,28,.55), transparent 62%), #ECE7DD' },
+      cyber: { card: { boxShadow: 'inset 0 0 0 1px #2E2B52' }, head: { textTransform: 'uppercase', letterSpacing: '.04em' } },
+      cute: { btn: { boxShadow: '0 4px 0 #E0628E' }, img: 'linear-gradient(135deg, #FFD3E2, #FFC93C)' },
+      retro: { card: { border: '2px solid #2E1F14' }, btn: { boxShadow: '0 3px 0 #2E1F14' }, img: 'linear-gradient(180deg, #B5471D 0 33%, #E0A526 33% 66%, #2F5D50 66%)' },
+      sale: { img: 'linear-gradient(135deg, #FF8A3D, #CF2E0E)' },
+      japandi: { card: { boxShadow: 'inset 0 0 0 1px #DDD5C8' }, img: 'linear-gradient(160deg, #DCD1BF, #B6A58C)' },
+      swiss: { card: { boxShadow: 'none' }, head: { letterSpacing: '-0.03em' }, img: '#D9001B' },
+      brutal: { card: { border: '3px solid #000000' }, btn: { border: '3px solid #000000', boxShadow: '3px 3px 0 #000000' }, img: '#FF5C39' },
+      cream: { img: 'linear-gradient(135deg, #F3E3CF, #E7C9A6)' },
+      sport: { head: { fontStyle: 'italic', textTransform: 'uppercase', letterSpacing: '-0.01em' }, btn: { transform: 'skewX(-8deg)' }, img: 'linear-gradient(115deg, #C8FF2E 0 42%, #2B2E35 42%)' },
+    }
+
+    /** 一个风格在样板上的样子：卡片、主按钮、标题字、配图块、小标签 */
+    function styleLook(x) {
+      const c = x.c
+      const o = LOOK[x.id] || {}
+      // 小标签是 9.5px 的小字，要 4.5:1：点缀色在卡片和底色上都够就描边写点缀色，色块上正文色够就做色块，都不行用主色
+      const chip = Math.min(hexRatio(c.accent, c.surface), hexRatio(c.accent, c.bg)) >= 4.5 ? { color: c.accent, boxShadow: `inset 0 0 0 1px ${c.accent}` }
+        : hexRatio(c.text, c.accent) >= 4.5 ? { background: c.accent, color: c.text } : { background: c.primary, color: c.on }
+      return {
+        card: { background: c.surface, borderRadius: x.radius, boxShadow: x.shadow === 'none' ? `inset 0 0 0 1px ${c.line}` : x.shadow, ...o.card },
+        btn: { background: c.primary, color: c.on, borderRadius: Math.min(x.radius, 14), ...o.btn },
+        head: { fontFamily: x.head, fontWeight: x.w, ...o.head },
+        img: o.img || `linear-gradient(135deg, ${c.primary}, ${c.accent})`,
+        // 进度条底：分隔线是黑的（杂志、瑞士、粗野）就换成淡一点的正文色，不然和黑色主色分不开
+        track: c.line === c.text || c.line === c.primary ? `color-mix(in srgb, ${c.text} 14%, ${c.surface})` : c.line,
+        chip,
+      }
+    }
+
     /** 两个 #RRGGBB 的对比度（WCAG） */
     function hexRatio(a, b) {
       const l = (hex) => { const v = hex.slice(1).match(/../g).map((x) => parseInt(x, 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)); return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2] }
@@ -1538,6 +2325,8 @@ window.__ModuleLoader__.load({
         otherText: String(it.otherText || '').slice(0, 20),
         edgeName: edge ? t('ckEdge_' + edge) : '',
         when: edge ? t('ckWhen_' + edge) : '',
+        osName: it.type === 'winctl' ? t('ckOs_' + (it.os === 'win' ? 'win' : 'mac')) : '',
+        zone: it.type === 'winctl' ? t('ckZone_' + (it.os === 'win' ? 'win' : 'mac')) : '',
         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 : ''})` : '',
       })
@@ -1568,6 +2357,7 @@ window.__ModuleLoader__.load({
           detail: checkDetail(t, it),
         })))
       }
+      if (head === 'checkAsk') lines.push('', t('checkTail'))
       return lines.join('\n') + '\n'
     }
 
@@ -1597,9 +2387,9 @@ window.__ModuleLoader__.load({
 
     // ── 导出图片：设备外框、整套展示图 ───────────────────────────────────────
 
-    const SHOW_COLS = { app: 4, miniprogram: 4, tablet: 3, web: 2, poster: 3, slides: 2, email: 3 }
+    const SHOW_COLS = { app: 4, miniprogram: 4, tablet: 3, desktop: 2, web: 2, poster: 3, slides: 2, email: 3 }
     const CANVAS_FONT = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif'
-    const FRAMED = { app: 1, miniprogram: 1, tablet: 1, web: 1 }
+    const FRAMED = { app: 1, miniprogram: 1, tablet: 1, desktop: 1, web: 1 }
 
     function loadImg(blob) {
       return new Promise((resolve, reject) => {
@@ -1624,7 +2414,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 在 (x, y) 画一个带外框的屏：w × ht 是屏幕本身；img 按宽铺进去，高出来的裁掉 */
-    function drawDevice(ctx, kind, img, x, y, w, ht, label, capWhite) {
+    function drawDevice(ctx, kind, img, x, y, w, ht, label, capWhite, os) {
       const f = frameOf(kind, w, ht)
       const pad = f.pad || 0
       const top = f.top || 0
@@ -1684,17 +2474,58 @@ window.__ModuleLoader__.load({
       }
       // 胶囊颜色用页面截图那一刻自己量的（和画布上一致）；老页面没报就看截图
       if (f.capsule) drawCapsule(ctx, x + pad + w - CAP.right - CAP.w, y + pad + CAP.top, typeof capWhite === 'boolean' ? capWhite : !!img && capDarkOf(img, w))
+      if (f.win) {
+        rrect(ctx, x + 0.25, y + 0.25, w - 0.5, ht - 0.5, f.r)
+        ctx.strokeStyle = 'rgba(0,0,0,.28)'
+        ctx.lineWidth = 0.5
+        ctx.stroke()
+        drawWinCtl(ctx, x, y, w, os, typeof capWhite === 'boolean' ? capWhite : os === 'win' && !!img && areaDarkOf(img, w, w - WINBTN.w * 3, 0, WINBTN.w * 3, WINBTN.h))
+      }
+    }
+
+    /** 窗口按钮画到导出的图上（和画布上 WinCtl 一样） */
+    function drawWinCtl(ctx, x, y, w, os, white) {
+      ctx.save()
+      if (os === 'win') {
+        const W = WINBTN.w, H = WINBTN.h, x0 = x + w - W * 3
+        ctx.strokeStyle = white ? '#fff' : '#1f1f1f'
+        ctx.lineWidth = 1
+        ctx.beginPath()
+        ctx.moveTo(x0 + W / 2 - 5, y + H / 2 + 0.5); ctx.lineTo(x0 + W / 2 + 5, y + H / 2 + 0.5)
+        ctx.moveTo(x0 + W * 2.5 - 5, y + H / 2 - 5); ctx.lineTo(x0 + W * 2.5 + 5, y + H / 2 + 5)
+        ctx.moveTo(x0 + W * 2.5 + 5, y + H / 2 - 5); ctx.lineTo(x0 + W * 2.5 - 5, y + H / 2 + 5)
+        ctx.stroke()
+        rrect(ctx, x0 + W * 1.5 - 4.5, y + H / 2 - 4.5, 9, 9, 1)
+        ctx.stroke()
+      } else {
+        const { x: lx, y: ly, d, gap } = LIGHTS
+        ;['#FF5F57', '#FEBC2E', '#28C840'].forEach((c, i) => {
+          ctx.beginPath()
+          ctx.arc(x + lx + d / 2 + i * (d + gap), y + ly + d / 2, d / 2 - 0.25, 0, Math.PI * 2)
+          ctx.fillStyle = c
+          ctx.fill()
+          ctx.strokeStyle = 'rgba(0,0,0,.12)'
+          ctx.lineWidth = 0.5
+          ctx.stroke()
+        })
+      }
+      ctx.restore()
     }
 
     /** 截图里胶囊那块是不是深色（导出时没有页面可问，看图） */
     function capDarkOf(img, w) {
+      return areaDarkOf(img, w, w - CAP.right - CAP.w, CAP.top, CAP.w, CAP.h)
+    }
+
+    /** 截图里 (sx, sy, sw, sh) 那块（屏幕坐标）是不是深色 */
+    function areaDarkOf(img, w, sx, sy, sw, sh) {
       try {
         const k = img.width / w
         const c = document.createElement('canvas')
-        c.width = Math.max(1, Math.round(CAP.w * k))
-        c.height = Math.max(1, Math.round(CAP.h * k))
+        c.width = Math.max(1, Math.round(sw * k))
+        c.height = Math.max(1, Math.round(sh * k))
         const g = c.getContext('2d')
-        g.drawImage(img, (w - CAP.right - CAP.w) * k, CAP.top * k, CAP.w * k, CAP.h * k, 0, 0, c.width, c.height)
+        g.drawImage(img, sx * k, sy * k, sw * k, sh * k, 0, 0, c.width, c.height)
         const d = g.getImageData(0, 0, c.width, c.height).data
         let sum = 0
         for (let i = 0; i < d.length; i += 4) sum += 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2]
@@ -1730,7 +2561,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 一屏带外框（四周留出阴影的地方，背景透明） */
-    async function composeOne(kind, size, img, label, top) {
+    async function composeOne(kind, size, img, label, top, os) {
       const [w, ht] = size
       const [W, H] = frameSize(kind, w, ht)
       const m = 56
@@ -1740,7 +2571,7 @@ window.__ModuleLoader__.load({
       c.height = Math.round((H + m * 2) * S)
       const ctx = c.getContext('2d')
       ctx.scale(S, S)
-      drawDevice(ctx, kind, img, m, m, w, ht, label, top)
+      drawDevice(ctx, kind, img, m, m, w, ht, label, top, os)
       return canvasBlob(c)
     }
 
@@ -1874,7 +2705,7 @@ window.__ModuleLoader__.load({
         big.getContext('2d').drawImage(img, 0, 0, big.width, big.height)
         blob = await canvasBlob(big)
       }
-      return { w, h: ht, palette, data: await blobB64(blob) }
+      return { w, h: ht, palette, img, data: await blobB64(blob) }
     }
 
     function lumaOf(color) {
@@ -1894,7 +2725,7 @@ window.__ModuleLoader__.load({
      * 整套展示图：几屏带外框排成网格，上面是品牌名和一行说明，铺一层底色 + 点缀色的光晕。
      * shots: [{ img, label }]
      */
-    async function composeShowcase({ kind, size, shots, title, sub, bg, accent, mark }) {
+    async function composeShowcase({ kind, size, shots, title, sub, bg, accent, mark, os }) {
       const [w, ht] = size
       const [DW, DH] = frameSize(kind, w, ht)
       const u = Math.max(1, Math.min(2, DW / 430))
@@ -1955,7 +2786,7 @@ window.__ModuleLoader__.load({
         const off = ((cols - inRow) * (DW + gap)) / 2 // 最后一行不满就居中
         const x = pad + off + col * (DW + gap)
         const yy = y + row * (DH + labH + gap * 0.6)
-        drawDevice(ctx, kind, s.img, x, yy, w, ht, s.label, s.top)
+        drawDevice(ctx, kind, s.img, x, yy, w, ht, s.label, s.top, os)
         ctx.fillStyle = muted
         ctx.font = `500 ${16 * u}px ${CANVAS_FONT}`
         ctx.textAlign = 'center'
@@ -2008,6 +2839,11 @@ window.__ModuleLoader__.load({
       })
     }
 
+    /** 这里能不能往剪贴板写图（http 远程打开、老浏览器不行；不行就不给「复制」按钮） */
+    function canCopyImage() {
+      try { return !!(window.isSecureContext && navigator.clipboard && typeof navigator.clipboard.write === 'function' && typeof ClipboardItem === 'function') } catch { return false }
+    }
+
     /** 图片放进剪贴板（DSH 窗口没焦点之类的拿不到就算了） */
     async function copyImage(blob) {
       try {
@@ -2032,17 +2868,18 @@ window.__ModuleLoader__.load({
 
     // ── 设计类型：画幅和外框 ─────────────────────────────────────────────────
 
-    const KIND_LIST = ['web', 'app', 'miniprogram', 'tablet', 'poster', 'slides', 'email']
-    const KIND_KEY = { web: 'kindWeb', app: 'kindApp', miniprogram: 'kindMini', tablet: 'kindTablet', poster: 'kindPoster', slides: 'kindSlides', email: 'kindEmail' }
+    const KIND_LIST = ['web', 'app', 'miniprogram', 'tablet', 'desktop', 'poster', 'slides', 'email']
+    const KIND_KEY = { web: 'kindWeb', app: 'kindApp', miniprogram: 'kindMini', tablet: 'kindTablet', desktop: 'kindDesktop', poster: 'kindPoster', slides: 'kindSlides', email: 'kindEmail' }
     const GHOST_MS = 90000 // 这么久没出新屏就撤掉「生成中…」占位
     const EDIT_GRACE_MS = 3000 // 退出改字后这么久里，页面交上来的最后一处改动还收
-    const KIND_SIZE = { web: [1280, 800], app: [390, 844], miniprogram: [375, 812], tablet: [820, 1180], poster: [1080, 1350], slides: [1280, 720], email: [640, 960] }
-    // 外框：pad 边框厚度、top 顶上一条（浏览器栏）、r 外圆角、ir 屏幕圆角、island 灵动岛离顶的距离、capsule 小程序右上角的胶囊
+    const KIND_SIZE = { web: [1280, 800], app: [390, 844], miniprogram: [375, 812], tablet: [820, 1180], desktop: [1280, 800], poster: [1080, 1350], slides: [1280, 720], email: [640, 960] }
+    // 外框：pad 边框厚度、top 顶上一条（浏览器栏）、r 外圆角、ir 屏幕圆角、island 灵动岛离顶的距离、capsule 小程序右上角的胶囊、win 桌面软件的窗口按钮
     const FRAME = {
       web: { pad: 0, top: 34, r: 10, ir: 0 },
       app: { pad: 11, top: 0, r: 55, ir: 44, island: 11 },
       miniprogram: { pad: 11, top: 0, r: 55, ir: 44, island: 11, capsule: 1 },
       tablet: { pad: 14, top: 0, r: 34, ir: 21 },
+      desktop: { pad: 0, top: 0, r: 12, ir: 12, win: 1 },
       poster: { pad: 0, top: 0, r: 6, ir: 6 },
       slides: { pad: 0, top: 0, r: 8, ir: 8 },
       email: { pad: 0, top: 0, r: 10, ir: 10 },
@@ -2055,15 +2892,19 @@ window.__ModuleLoader__.load({
     }
     // 小程序胶囊：离屏幕顶 48（状态栏 44 + 4）、离右边 7、87×32（和页面体检 picker.js 的 CAP 一样）
     const CAP = { top: 48, right: 7, w: 87, h: 32 }
-    const META_ALIAS = { phone: 'app', mobile: 'app', ios: 'app', android: 'app', mini: 'miniprogram', miniapp: 'miniprogram', weapp: 'miniprogram', wechat: 'miniprogram', 小程序: 'miniprogram', pad: 'tablet', ipad: 'tablet', social: 'poster', image: 'poster', slide: 'slides', deck: 'slides', ppt: 'slides', mail: 'email' }
+    // 桌面软件的窗口按钮（和 picker.js 的一样）：Mac 红绿灯在左上 x 20、y 20 起，三个 12px 圆点隔 8；Windows 最小化 / 最大化 / 关闭在右上角，各 46×32
+    const LIGHTS = { x: 20, y: 20, d: 12, gap: 8 }
+    const WINBTN = { w: 46, h: 32 }
+    const META_ALIAS = { phone: 'app', mobile: 'app', ios: 'app', android: 'app', mini: 'miniprogram', miniapp: 'miniprogram', weapp: 'miniprogram', wechat: 'miniprogram', 小程序: 'miniprogram', pad: 'tablet', ipad: 'tablet', pc: 'desktop', electron: 'desktop', tauri: 'desktop', mac: 'desktop', macos: 'desktop', windows: 'desktop', win: 'desktop', 桌面: 'desktop', 桌面软件: 'desktop', social: 'poster', image: 'poster', slide: 'slides', deck: 'slides', ppt: 'slides', mail: 'email' }
 
-    /** 页面里 <meta name="dsh-design" content="app"> / "poster 1080x1920" → { kind, size } */
+    /** 页面里 <meta name="dsh-design" content="app"> / "poster 1080x1920" / "desktop windows" → { kind, size, os }（os：win，不写是 Mac） */
     function parseMeta(content) {
-      const out = { kind: '', size: '' }
+      const out = { kind: '', size: '', os: '' }
       for (const w of String(content || '').toLowerCase().split(/[\s,;]+/)) {
         if (!out.kind && (KIND_LIST.includes(w) || META_ALIAS[w])) out.kind = KIND_LIST.includes(w) ? w : META_ALIAS[w]
         const m = /^(\d{2,5})[x×*](\d{2,5})$/.exec(w)
         if (!out.size && m) out.size = `${m[1]}x${m[2]}`
+        if (!out.os && /^(windows|win|win10|win11)$/.test(w)) out.os = 'win'
       }
       return out
     }
@@ -2133,6 +2974,7 @@ window.__ModuleLoader__.load({
       app: [['szSmall', 'app', [375, 667]], ['szStd', 'app', [393, 852]], ['szLarge', 'app', [430, 932]]],
       miniprogram: [['szSmall', 'miniprogram', [375, 667]], ['szStd', 'miniprogram', [375, 812]], ['szLarge', 'miniprogram', [414, 896]]],
       tablet: [['szSmall', 'tablet', [744, 1133]], ['szStd', 'tablet', [820, 1180]], ['szLarge', 'tablet', [1032, 1376]]],
+      desktop: [['szSmall', 'desktop', [1024, 680]], ['szStd', 'desktop', [1280, 800]], ['szLarge', 'desktop', [1440, 900]]],
     }
 
     /** 大小不一的几块排成一行（顶端对齐），算出整块大小和放得下的缩放 */
@@ -2473,34 +3315,46 @@ window.__ModuleLoader__.load({
         h('b', { style: { height: 14, width: '54%' } }))
     }
 
-    function AddressForm({ t, sid, initial, onDone, autoFocus, className }) {
+    function AddressForm({ t, sid, initial, onDone, autoFocus, className, onBrowse }) {
       const [value, setValue] = useState(initial || '')
       const [err, setErr] = useState('')
       const submit = async (e) => {
         if (e) e.preventDefault()
         if (!value.trim()) return onDone && onDone()
         try {
-          await post('open', { session: sid, target: value.trim() })
-          const p = poller(sid)
-          p.stop()
-          p.start()
+          await openTarget(sid, value.trim())
           setErr('')
           onDone && onDone()
         } catch (x) {
           setErr(t('openFailed', { msg: x.message }))
         }
       }
-      return h('form', { onSubmit: submit, className, style: className ? undefined : { display: 'contents' } },
+      // 工具栏里：焦点离开整个地址栏（输入框和「浏览…」都算在内）才收起；弹出选文件窗口时整个窗口失焦，不收
+      const blur = (e) => {
+        if (!onDone || className) return
+        const form = e.currentTarget
+        if (form.contains(e.relatedTarget)) return
+        setTimeout(() => { if (document.hasFocus() && !form.contains(document.activeElement)) onDone() }, 150)
+      }
+      const esc = (e) => { if (e.key === 'Escape' && !(e.nativeEvent && e.nativeEvent.isComposing) && e.keyCode !== 229 && onDone) onDone() }
+      return h('form', { onSubmit: submit, onBlur: blur, onKeyDown: esc, className, style: className ? undefined : { display: 'contents' } },
         h('input', {
           className: 'ddp-input',
           value,
           autoFocus,
           spellCheck: false,
           placeholder: t('placeholder'),
-          onChange: (e) => setValue(e.target.value),
-          onKeyDown: (e) => { if (e.key === 'Escape') onDone && onDone() },
-          onBlur: () => { if (!err && onDone && !className) setTimeout(onDone, 150) },
+          onChange: (e) => { setValue(e.target.value); if (err) setErr('') },
         }),
+        // 「浏览…」：桌面版弹系统的选文件窗口；按下时不抢输入框的焦点（工具栏里失焦会收起地址栏）
+        onBrowse ? h('button', {
+          type: 'button',
+          className: className ? 'ddp-browse' : 'ddp-btn',
+          title: t('browseTip'),
+          'aria-label': className ? undefined : t('browseTip'),
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: onBrowse,
+        }, className ? t('browse') : h(I.folder)) : null,
         className ? h('button', { className: 'ddp-go', type: 'submit' }, t('go')) : null,
         err ? h('div', { className: 'ddp-err', style: className ? { width: '100%' } : { position: 'absolute', top: 40, left: 12 } }, err) : null)
     }
@@ -2526,7 +3380,7 @@ window.__ModuleLoader__.load({
      * 外框：网页是浏览器窗口，App / 平板是带圆角边框的设备（App 还有灵动岛，小程序再加右上角的胶囊），海报 / 幻灯片 / 邮件是一张卡片。
      * fill = 铺满舞台（单页看网页）。不管哪种，里面那屏都在同一个位置（换类型不重载页面）。top：页面顶栏右边是深色（胶囊画白的）
      */
-    function Device({ kind, w, h: ht, fill, label, top, children }) {
+    function Device({ kind, w, h: ht, fill, label, top, os, children }) {
       const f = fill ? { pad: 0, top: 0, r: 0, ir: 0 } : frameOf(kind, w, ht)
       return h('div', {
         className: `ddp-dev k-${kind}` + (fill ? ' fill' : ''),
@@ -2535,7 +3389,22 @@ window.__ModuleLoader__.load({
       h('div', { className: 'ddp-chrome', style: { display: f.top ? 'flex' : 'none', height: f.top } }, h('i'), h('i'), h('i'), h('span', null, label || '')),
       h('div', { className: 'ddp-vp', style: fill ? { inset: 0 } : { left: f.pad, top: f.pad + f.top, width: w, height: ht, borderRadius: f.ir } }, children),
       h('div', { className: 'ddp-island', style: { display: f.island ? 'block' : 'none', top: (f.pad || 0) + (f.island || 0) } }),
-      f.capsule ? h(Capsule, { white: !!top, style: { top: (f.pad || 0) + CAP.top, right: (f.pad || 0) + CAP.right } }) : null)
+      f.capsule ? h(Capsule, { white: !!top, style: { top: (f.pad || 0) + CAP.top, right: (f.pad || 0) + CAP.right } }) : null,
+      f.win ? h(WinCtl, { os, white: !!top }) : null)
+    }
+
+    /** 桌面软件的窗口按钮：Mac 左上角红绿灯，Windows 右上角最小化 / 最大化 / 关闭（顶栏深色时画白的） */
+    function WinCtl({ os, white }) {
+      if (os === 'win') {
+        const W = WINBTN.w, H = WINBTN.h
+        return h('svg', { className: 'ddp-win' + (white ? ' w' : ''), style: { top: 0, right: 0, width: W * 3, height: H }, viewBox: `0 0 ${W * 3} ${H}`, 'aria-hidden': true },
+          h('path', { className: 'x', d: `M${W / 2 - 5} ${H / 2 + 0.5}h10` }),
+          h('rect', { className: 'x', x: W * 1.5 - 4.5, y: H / 2 - 4.5, width: 9, height: 9, rx: 1 }),
+          h('path', { className: 'x', d: `M${W * 2.5 - 5} ${H / 2 - 5}l10 10M${W * 2.5 + 5} ${H / 2 - 5}l-10 10` }))
+      }
+      const { x, y, d, gap } = LIGHTS
+      return h('svg', { className: 'ddp-win', style: { left: x, top: y, width: d * 3 + gap * 2, height: d }, viewBox: `0 0 ${d * 3 + gap * 2} ${d}`, 'aria-hidden': true },
+        ['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => h('circle', { key: i, cx: d / 2 + i * (d + gap), cy: d / 2, r: d / 2 - 0.25, fill: c, stroke: 'rgba(0,0,0,.12)', strokeWidth: 0.5 })))
     }
 
     function Capsule({ white, style }) {
@@ -2609,6 +3478,9 @@ window.__ModuleLoader__.load({
           }),
           checkFocus: (i) => { if (curRef.current) postTo(curRef.current, { type: 'checkFocus', i }) },
           checkClear: () => { if (curRef.current) postTo(curRef.current, { type: 'checkClear' }) },
+          unpin: () => { if (curRef.current) postTo(curRef.current, { type: 'unpin' }) }, // 去掉「已选」虚线框
+          // 画笔标注：这一屏的页面（iframe）现在摆在哪，拼图时按它的位置放截图
+          frame: () => wins.current.get(curRef.current) || null,
         }
       }
       // 登记到右侧栏：导出图片时按屏找到它
@@ -2760,6 +3632,11 @@ window.__ModuleLoader__.load({
             case 'links':
               if (p.onLinks && Array.isArray(d.links)) p.onLinks(d.links)
               break
+            case 'dragIn':
+            case 'dragOut':
+            case 'dropIn':
+              if (p.onPageDrag) p.onPageDrag(d)
+              break
             case 'top':
               // 每帧记着自己的；只有正显示的那帧算数（预载的换上来时再用，旧帧晚到的不管）
               L.tops.set(id, !!d.dark)
@@ -2922,7 +3799,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 类型菜单：网页 / App / 平板 / 海报 / 幻灯片 / 邮件 */
-    function KindMenu({ t, kind, open, setOpen, onPick }) {
+    function KindMenu({ t, kind, open, setOpen, onPick, disabled }) {
       const ref = useRef(null)
       useEffect(() => {
         if (!open) return undefined
@@ -2936,7 +3813,7 @@ window.__ModuleLoader__.load({
         }
       }, [open])
       return h('div', { className: 'ddp-kind', ref },
-        h('button', { className: 'ddp-btn' + (open ? ' sel' : ''), title: t('kind'), onClick: () => setOpen(!open) },
+        h('button', { className: 'ddp-btn' + (open ? ' sel' : ''), title: t('kind'), disabled: !!disabled, onClick: () => setOpen(!open) },
           h(I[kind]), h('span', null, t(KIND_KEY[kind])), h(I.caret)),
         open ? h('div', { className: 'ddp-menu', role: 'menu' },
           h('div', { className: 'hd' }, t('kind')),
@@ -2944,6 +3821,540 @@ window.__ModuleLoader__.load({
             h(I[k]), h('span', null, t(KIND_KEY[k])), h('em', null, KIND_SIZE[k].join('×'))))) : null)
     }
 
+    // ── 画笔标注：一层透明画布盖在预览上，画的东西按台面上的坐标（CSS 像素）一笔一笔记着，能撤销、能擦 ──
+    // 一笔：pen / hl { p: [[x, y]…] } · arrow / rect / oval { a: [x, y], b: [x, y] } · text { x, y, f, v }；都带颜色 c，线宽 w
+    const MARK_TOOLS = [['pen', 'pen', 'mkPen', 'p'], ['hl', 'marker', 'mkHl', 'h'], ['arrow', 'arrow', 'mkArrow', 'a'], ['rect', 'square', 'mkRect', 'r'], ['oval', 'circle', 'mkOval', 'o'], ['text', 'text', 'mkText', 't'], ['erase', 'eraser', 'mkErase', 'e']]
+    const MARK_COLORS = ['#ef4444', '#f97316', '#facc15', '#22c55e', '#3b82f6', '#a855f7', '#111827', '#ffffff']
+    const MARK_WIDTH = [2, 3, 5]
+    const MARK_FONT = [16, 20, 28]
+    // 手绘风：字用楷体（像手写），没有就退回系统字
+    const MARK_FAMILY = '"Kaiti SC","STKaiti","KaiTi","楷体",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif'
+    const MARK_MAX = 300 // 最多这么多笔（再多就是在乱画了）
+    const MOD = /Mac|iPhone|iPad/i.test((typeof navigator !== 'undefined' && navigator.platform) || '') ? '⌘' : 'Ctrl+'
+
+    let markMeasure = null
+    /** 一行字画出来多宽 */
+    function markTextWidth(text, f) {
+      if (!markMeasure) markMeasure = document.createElement('canvas').getContext('2d')
+      markMeasure.font = `700 ${f}px ${MARK_FAMILY}`
+      return markMeasure.measureText(text).width
+    }
+
+    /** 浅色（白、黄）：字的描边换成深色 */
+    function markLight(hex) {
+      const n = parseInt(String(hex).slice(1), 16)
+      return ((n >> 16 & 255) * 0.299 + (n >> 8 & 255) * 0.587 + (n & 255) * 0.114) > 170
+    }
+
+    /** 一笔占的地方（含线宽）：拼图时裁剪、橡皮擦字都按它 */
+    function markBox(s) {
+      if (s.t === 'text') {
+        const lines = s.v.split('\n')
+        const w = Math.max(...lines.map((l) => markTextWidth(l, s.f)))
+        return { l: s.x, t: s.y, r: s.x + w, b: s.y + lines.length * s.f * 1.3 }
+      }
+      const pts = s.p || [s.a, s.b]
+      const pad = s.w / 2 + (s.t === 'arrow' ? Math.max(14, s.w * 4) : s.p ? 0 : 4 + Math.max(Math.abs(s.b[0] - s.a[0]), Math.abs(s.b[1] - s.a[1])) * 0.06)
+      const xs = pts.map((q) => q[0])
+      const ys = pts.map((q) => q[1])
+      return { l: Math.min(...xs) - pad, t: Math.min(...ys) - pad, r: Math.max(...xs) + pad, b: Math.max(...ys) + pad }
+    }
+
+    /** 这一笔的随机数（-0.5…0.5）：按笔上记的种子 sd 来，重画、拼图时一模一样 */
+    function markRand(seed) {
+      let v = (seed | 0) % 2147483647
+      if (v <= 0) v += 2147483646
+      return () => (v = (v * 16807) % 2147483647) / 2147483647 - 0.5
+    }
+
+    /** 手绘的一条线：两头和中间都抖一点，弯一点（P：CSS 坐标 → 画布坐标；bend：这条线弯多少，描第二遍时一样） */
+    function roughLine(ctx, P, a, b, rnd, amp, bend) {
+      const len = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1
+      const nx = -(b[1] - a[1]) / len
+      const ny = (b[0] - a[0]) / len
+      const j = Math.min(len * 0.015, 2.2) * amp
+      const bow = Math.min(len * 0.05, 9) * amp
+      const pt = (t, off) => [a[0] + (b[0] - a[0]) * t + nx * off + rnd() * j, a[1] + (b[1] - a[1]) * t + ny * off + rnd() * j]
+      const k1 = (bend ? bend[0] : rnd()) * bow * 2
+      const k2 = (bend ? bend[1] : rnd()) * bow * 2
+      const p0 = pt(0, 0)
+      const c1 = pt(0.4, k1)
+      const c2 = pt(0.75, k2)
+      const p1 = pt(1, 0)
+      ctx.moveTo(...P(p0))
+      ctx.bezierCurveTo(...P(c1), ...P(c2), ...P(p1))
+    }
+
+    /** 手绘的圈：从一个随便的角度起笔，绕一圈多一点，半径微微起伏；点和点之间连成顺滑的曲线 */
+    function roughLoop(ctx, P, cx, cy, rx, ry, rnd, amp) {
+      const start = -Math.PI / 2 - 0.6 + rnd() * 1.2
+      const over = 0.45 + rnd() * 0.35
+      const n = 44
+      const wob = [rnd(), rnd()]
+      const pts = []
+      for (let i = 0; i <= n; i++) {
+        const t = i / n
+        const ang = start + t * (Math.PI * 2 + over)
+        const m = 1 - 0.04 * amp + (wob[0] * Math.sin(t * 6.3) + wob[1] * Math.sin(t * 12.6 + 1) * 0.6) * 0.1 * amp + rnd() * 0.02 * amp + t * 0.09 * amp
+        pts.push(P([cx + Math.cos(ang) * rx * m, cy + Math.sin(ang) * ry * m]))
+      }
+      ctx.moveTo(...pts[0])
+      for (let i = 1; i < pts.length - 1; i++) ctx.quadraticCurveTo(...pts[i], (pts[i][0] + pts[i + 1][0]) / 2, (pts[i][1] + pts[i + 1][1]) / 2)
+      ctx.lineTo(...pts[pts.length - 1])
+    }
+
+    /** 一笔画到画布上（k：CSS 像素 → 画布像素；ox / oy：拼图时裁掉的左上角） */
+    function drawMark(ctx, s, k = 1, ox = 0, oy = 0) {
+      const X = (v) => (v - ox) * k
+      const Y = (v) => (v - oy) * k
+      ctx.save()
+      ctx.lineCap = 'round'
+      ctx.lineJoin = 'round'
+      ctx.strokeStyle = s.c
+      ctx.fillStyle = s.c
+      ctx.lineWidth = s.w * k
+      if (s.t === 'pen' || s.t === 'hl') {
+        // 荧光笔：半透明，压在字上还看得见字
+        if (s.t === 'hl') ctx.globalAlpha = 0.38
+        const p = s.p
+        ctx.beginPath()
+        ctx.moveTo(X(p[0][0]), Y(p[0][1]))
+        if (p.length === 1) ctx.lineTo(X(p[0][0]) + 0.01, Y(p[0][1]))
+        // 相邻两点的中点连二次曲线：手画的线顺一点
+        for (let i = 1; i < p.length - 1; i++) ctx.quadraticCurveTo(X(p[i][0]), Y(p[i][1]), X((p[i][0] + p[i + 1][0]) / 2), Y((p[i][1] + p[i + 1][1]) / 2))
+        if (p.length > 1) ctx.lineTo(X(p[p.length - 1][0]), Y(p[p.length - 1][1]))
+        ctx.stroke()
+      } else if (s.t === 'arrow' || s.t === 'rect' || s.t === 'oval') {
+        const P = (q) => [X(q[0]), Y(q[1])]
+        const [x0, y0] = s.a
+        const [x1, y1] = s.b
+        const br = markRand(s.sd || 1)
+        const bends = Array.from({ length: 4 }, () => [br(), br()])
+        for (const pass of [0, 1]) {
+          const rnd = markRand((s.sd || 1) + pass * 7919)
+          ctx.beginPath()
+          if (s.t === 'arrow') {
+            // 杆子微微弯，箭头是两笔撇出去的（不填实心）
+            const ang = Math.atan2(y1 - y0, x1 - x0)
+            const head = Math.min(Math.max(16, s.w * 5), Math.hypot(x1 - x0, y1 - y0) * 0.6)
+            roughLine(ctx, P, s.a, s.b, rnd, 1, bends[0])
+            const sp = 0.5 + bends[3][0] * 0.12
+            roughLine(ctx, P, s.b, [x1 - head * Math.cos(ang - sp), y1 - head * Math.sin(ang - sp)], rnd, 0.6, bends[1])
+            roughLine(ctx, P, s.b, [x1 - head * Math.cos(ang + sp), y1 - head * Math.sin(ang + sp)], rnd, 0.6, bends[2])
+          } else if (s.t === 'rect') {
+            const l = Math.min(x0, x1)
+            const r = Math.max(x0, x1)
+            const tp = Math.min(y0, y1)
+            const bt = Math.max(y0, y1)
+            // 四条边各画一笔，拐角处稍微出头
+            const o = Math.min(6, Math.min(r - l, bt - tp) * 0.06)
+            roughLine(ctx, P, [l - o, tp], [r + o * 0.4, tp], rnd, 1, bends[0])
+            roughLine(ctx, P, [r, tp - o * 0.4], [r, bt + o], rnd, 1, bends[1])
+            roughLine(ctx, P, [r + o, bt], [l - o * 0.4, bt], rnd, 1, bends[2])
+            roughLine(ctx, P, [l, bt + o * 0.4], [l, tp - o], rnd, 1, bends[3])
+          } else {
+            roughLoop(ctx, P, (x0 + x1) / 2, (y0 + y1) / 2, Math.abs(x1 - x0) / 2, Math.abs(y1 - y0) / 2, rnd, 1)
+          }
+          ctx.lineWidth = s.w * (pass ? 0.5 : 0.85) * k
+          ctx.globalAlpha = pass ? 0.75 : 1
+          ctx.stroke()
+        }
+      } else if (s.t === 'text') {
+        // 手写的字：楷体，下面一道手画的线
+        ctx.font = `700 ${s.f * k}px ${MARK_FAMILY}`
+        ctx.textBaseline = 'middle'
+        const lh = s.f * 1.3
+        const rnd = markRand(s.sd || 1)
+        const P = (q) => [X(q[0]), Y(q[1])]
+        s.v.split('\n').forEach((line, i) => {
+          const yy = s.y + lh * i + lh / 2
+          // 描一圈反色的边：白、黄这类浅色描深色，深色描浅色（红字写在红按钮上也看得见）
+          ctx.save()
+          ctx.strokeStyle = markLight(s.c) ? 'rgba(0,0,0,.65)' : 'rgba(255,255,255,.85)'
+          ctx.lineWidth = Math.max(2, s.f / 7) * k
+          ctx.strokeText(line, X(s.x), Y(yy))
+          ctx.restore()
+          ctx.fillText(line, X(s.x), Y(yy))
+          const w = markTextWidth(line, s.f)
+          if (!w) return
+          ctx.beginPath()
+          roughLine(ctx, P, [s.x - 2, yy + s.f * 0.62], [s.x + w + 3, yy + s.f * 0.56], rnd, 0.8)
+          ctx.lineWidth = Math.max(1.2, s.f / 12) * k
+          ctx.stroke()
+        })
+      }
+      ctx.restore()
+    }
+
+    /** 点到线段的距离 */
+    function segDist(px, py, a, b) {
+      const dx = b[0] - a[0]
+      const dy = b[1] - a[1]
+      const len = dx * dx + dy * dy
+      const u = len ? Math.max(0, Math.min(1, ((px - a[0]) * dx + (py - a[1]) * dy) / len)) : 0
+      return Math.hypot(px - a[0] - u * dx, py - a[1] - u * dy)
+    }
+
+    /** 手绘的圈、框、箭头实际画在哪：照 drawMark 同样画一遍，路径记成小段折线（橡皮按它判断，抖出去的线也擦得到） */
+    function markPath(s) {
+      const segs = []
+      let cur = null
+      const add = (q) => { if (cur) segs.push([cur, q]); cur = q }
+      const ctx = {
+        save() {}, restore() {}, stroke() {}, fill() {}, fillText() {}, strokeText() {},
+        beginPath() { cur = null },
+        moveTo(x, y) { cur = [x, y] },
+        lineTo(x, y) { add([x, y]) },
+        quadraticCurveTo(cx, cy, x, y) {
+          const p0 = cur || [x, y]
+          for (let i = 1; i <= 6; i++) { const t = i / 6; const u = 1 - t; add([u * u * p0[0] + 2 * u * t * cx + t * t * x, u * u * p0[1] + 2 * u * t * cy + t * t * y]) }
+        },
+        bezierCurveTo(ax, ay, bx, by, x, y) {
+          const p0 = cur || [x, y]
+          for (let i = 1; i <= 12; i++) { const t = i / 12; const u = 1 - t; add([u * u * u * p0[0] + 3 * u * u * t * ax + 3 * u * t * t * bx + t * t * t * x, u * u * u * p0[1] + 3 * u * u * t * ay + 3 * u * t * t * by + t * t * t * y]) }
+        },
+      }
+      drawMark(ctx, s)
+      return segs
+    }
+
+    /** 橡皮擦到了这一笔没有（r：橡皮半径） */
+    function markHit(s, x, y, r) {
+      if (s.t === 'text') {
+        const b = markBox(s)
+        return x >= b.l - r && x <= b.r + r && y >= b.t - r && y <= b.b + r
+      }
+      const near = r + s.w / 2
+      if (s.p) {
+        if (s.p.length === 1) return Math.hypot(x - s.p[0][0], y - s.p[0][1]) <= near
+        for (let i = 1; i < s.p.length; i++) if (segDist(x, y, s.p[i - 1], s.p[i]) <= near) return true
+        return false
+      }
+      // 只认真正画出来的那条手绘线，不再按看不见的标准形状补判（不然会擦掉旁边的圈）
+      const segs = markPath(s)
+      if (segs.length) return segs.some(([a, b]) => segDist(x, y, a, b) <= near)
+      return Math.hypot(x - s.a[0], y - s.a[1]) <= near
+    }
+
+    /** 按住 Shift：方框 / 圆圈画成正的，箭头吸到 45° 的倍数 */
+    function markSnap(tool, a, b) {
+      const dx = b[0] - a[0]
+      const dy = b[1] - a[1]
+      if (tool === 'arrow') {
+        const ang = Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) * (Math.PI / 4)
+        const len = Math.hypot(dx, dy)
+        return [a[0] + Math.cos(ang) * len, a[1] + Math.sin(ang) * len]
+      }
+      const d = Math.max(Math.abs(dx), Math.abs(dy))
+      return [a[0] + (dx < 0 ? -d : d), a[1] + (dy < 0 ? -d : d)]
+    }
+
+    /**
+     * 一笔跟着它画在的那一屏走：画的时候记下那一屏的位置（an），侧栏拉宽拉窄、开面板、画布自己缩放后，按那一屏现在的位置和大小挪过去。
+     * frames：台面上现在每一屏 { key, l, t, w }（台面坐标）
+     */
+    function markPlace(s, frames) {
+      const fit = (an) => {
+        const now = an && frames.find((x) => x.key === an.key)
+        if (!now) return null
+        const k = now.w / an.w
+        if (Math.abs(k - 1) < 1e-3 && Math.abs(now.l - an.l) < 0.25 && Math.abs(now.t - an.t) < 0.25) return null
+        return { k, P: (q) => [now.l + (q[0] - an.l) * k, now.t + (q[1] - an.t) * k] }
+      }
+      const A = fit(s.an)
+      if (s.t === 'text') { if (!A) return s; const [x, y] = A.P([s.x, s.y]); return { ...s, x, y, f: s.f * A.k } }
+      if (s.p && s.ans) {
+        // 跨了几屏的自由线：每个点跟着自己那一屏（[x, y, 第几个锚点]）
+        const F = s.ans.map(fit)
+        return F.some(Boolean) ? { ...s, p: s.p.map((q) => (F[q[2]] ? [...F[q[2]].P(q), q[2]] : q)) } : s
+      }
+      if (s.p) return A ? { ...s, p: s.p.map(A.P) } : s
+      // 箭头、方框、圆圈：两头各跟各的屏（从这一屏指到那一屏的箭头，画布重新排了也还指着那儿）
+      const B = s.bn ? fit(s.bn) : A
+      if (!A && !B) return s
+      return { ...s, a: A ? A.P(s.a) : s.a, b: B ? B.P(s.b) : s.b }
+    }
+
+    /** 盖在台面上的画布 + 上面一条工具栏 + 下面「取消 / 交给模型」 */
+    function MarkLayer({ t, sending, frames, onCancel, onSend, onCopy }) {
+      const wrap = useRef(null)
+      const cv = useRef(null)
+      const area = useRef(null)
+      const [tool, setTool] = useState('pen')
+      const [color, setColor] = useState(MARK_COLORS[0])
+      const [size, setSize] = useState(1)
+      const [pal, setPal] = useState(false) // 颜色板开着
+      const [hist, setHist] = useState({ list: [[]], i: 0 }) // 每画一笔存一份整张的，撤销 / 重做就是前后挪
+      const [txt, setTxt] = useState(null) // 正在写的字：{ x, y, v }
+      // 头几次打开时页面中间教一下怎么用（画了第一笔就收起）
+      const [coach] = useState(() => {
+        try { const n = Number(localStorage.getItem('ddp-mk-coach')) || 0; if (n >= 3) return false; localStorage.setItem('ddp-mk-coach', String(n + 1)) } catch { /* 存不了就每次都教 */ }
+        return true
+      })
+      const shapes = hist.list[hist.i]
+      const cur = useRef(shapes)
+      cur.current = shapes
+      const opt = useRef({})
+      opt.current = { tool, color, size }
+      const txtRef = useRef(txt)
+      txtRef.current = txt
+      const live = useRef(null) // 正在画的那一笔；橡皮：{ erase: 还剩下的, hit }
+      const raf = useRef(0)
+      const dims = useRef({ w: 0, h: 0, k: 1 })
+      const fr = useRef(frames)
+      fr.current = frames
+      const [, setTick] = useState(0) // 屏挪了：正写着的字框跟着挪
+      const where = () => { try { return fr.current() } catch { return [] } }
+      const placed = (list, f = where()) => list.map((s) => markPlace(s, f))
+
+      const paint = () => {
+        raf.current = 0
+        const c = cv.current
+        if (!c) return
+        const ctx = c.getContext('2d')
+        ctx.clearRect(0, 0, c.width, c.height)
+        const lv = live.current
+        for (const s of placed(lv && lv.erase ? lv.erase : cur.current)) drawMark(ctx, s, dims.current.k)
+        if (lv && !lv.erase) drawMark(ctx, lv, dims.current.k)
+      }
+      const repaint = () => { if (!raf.current) raf.current = requestAnimationFrame(paint) }
+      useEffect(() => () => cancelAnimationFrame(raf.current), [])
+      useEffect(() => { paint() }, [shapes])
+      // 底下的屏挪了（开关面板、画布自己缩放、模型加了一屏）：跟着重画
+      useEffect(() => {
+        let sig = ''
+        const tm = setInterval(() => {
+          const now = where().map((x) => `${x.key}:${Math.round(x.l)},${Math.round(x.t)},${Math.round(x.w)}`).join('|')
+          if (now !== sig) { sig = now; repaint(); if (txtRef.current) setTick((n) => n + 1) }
+        }, 250)
+        return () => clearInterval(tm)
+      }, [])
+
+      // 画布跟着台面一样大（右侧栏拉宽拉窄），按屏幕像素密度画，线不糊
+      useEffect(() => {
+        const el = wrap.current
+        if (!el) return undefined
+        const fit = () => {
+          const r = el.getBoundingClientRect()
+          const k = Math.min(2, Math.max(1, window.devicePixelRatio || 1))
+          dims.current = { w: r.width, h: r.height, k }
+          if (cv.current) {
+            cv.current.width = Math.max(1, Math.round(r.width * k))
+            cv.current.height = Math.max(1, Math.round(r.height * k))
+          }
+          paint()
+        }
+        fit()
+        const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(fit) : null
+        if (ro) ro.observe(el)
+        try { el.focus({ preventScroll: true }) } catch { /* 点一下画布也行 */ }
+        return () => { if (ro) ro.disconnect() }
+      }, [])
+
+      const commit = (next) => setHist((hs) => {
+        const list = hs.list.slice(Math.max(0, hs.i - 79), hs.i + 1)
+        list.push(next)
+        return { list, i: list.length - 1 }
+      })
+      const undo = () => { if (!live.current) setHist((hs) => (hs.i > 0 ? { ...hs, i: hs.i - 1 } : hs)) }
+      const redo = () => { if (!live.current) setHist((hs) => (hs.i < hs.list.length - 1 ? { ...hs, i: hs.i + 1 } : hs)) }
+      // 清掉：正写着的字也不要了
+      const clear = () => {
+        if (txtRef.current) { txtRef.current = null; setTxt(null) }
+        if (cur.current.length) commit([])
+      }
+
+      // 写字：回车 / 点别处算写完；Esc 不要了。颜色、大小按写完那一刻的
+      const textOf = (x) => {
+        const v = String(x.v || '').replace(/\s+$/, '').slice(0, 2000)
+        return v.trim() ? { t: 'text', c: opt.current.color, w: 0, f: MARK_FONT[opt.current.size], x: x.x, y: x.y, v, an: x.an, sd: 1 + Math.floor(Math.random() * 2e9) } : null
+      }
+      // refocus：回车 / Esc / 点画布写完的，键盘交回画布；点到别处（比如聊天输入框）失焦的，别把焦点抢回来
+      const endText = (keep, refocus) => {
+        const x = txtRef.current
+        if (!x) return null
+        txtRef.current = null
+        setTxt(null)
+        const s = keep ? textOf(x) : null
+        if (s && cur.current.length < MARK_MAX) commit([...cur.current, s])
+        if (refocus) { try { wrap.current.focus({ preventScroll: true }) } catch { /* 已经关了 */ } }
+        return s
+      }
+      useEffect(() => {
+        if (!txt || !area.current || document.activeElement === area.current) return undefined
+        const tm = setTimeout(() => { try { area.current.focus({ preventScroll: true }) } catch { /* 关了 */ } }, 0)
+        return () => clearTimeout(tm)
+      }, [!!txt])
+
+      const at = (e) => {
+        const r = wrap.current.getBoundingClientRect()
+        return [e.clientX - r.left, e.clientY - r.top]
+      }
+      const eraseAt = (x, y) => {
+        const lv = live.current
+        const f = where()
+        const left = lv.erase.filter((s) => !markHit(markPlace(s, f), x, y, 6))
+        if (left.length !== lv.erase.length) { lv.erase = left; lv.hit = true; repaint() }
+      }
+      // 画的途中屏要是挪了：按落笔完那一刻那一屏的位置记（这一笔是照着现在看到的画的）
+      const reAnchor = (an) => {
+        const now = an && where().find((q) => q.key === an.key)
+        return now ? { key: now.key, l: now.l, t: now.t, w: now.w } : an
+      }
+      // 自由线：看每个点落在哪屏；只在一屏里的照旧整条跟那一屏，跨屏的每个点记自己那屏（落在屏外的点跟最近的前后点）
+      const penAnchors = (lv) => {
+        const fz = where()
+        const ans = []
+        let last = null
+        const idx = lv.p.map(([x, y]) => {
+          const hit = last && x >= last.l && x <= last.l + last.w && y >= last.t && y <= last.t + last.h ? last
+            : fz.find((q) => x >= q.l && x <= q.l + q.w && y >= q.t && y <= q.t + q.h)
+          if (!hit) return -1
+          last = hit
+          let i = ans.findIndex((a) => a.key === hit.key)
+          if (i < 0) { i = ans.length; ans.push({ key: hit.key, l: hit.l, t: hit.t, w: hit.w }) }
+          return i
+        })
+        if (ans.length < 2) return { ...lv, an: ans[0] || reAnchor(lv.an) }
+        for (let i = 1; i < idx.length; i++) if (idx[i] < 0) idx[i] = idx[i - 1]
+        for (let i = idx.length - 2; i >= 0; i--) if (idx[i] < 0) idx[i] = idx[i + 1]
+        return { ...lv, an: ans[0], ans, p: lv.p.map((q, i) => [q[0], q[1], idx[i]]) }
+      }
+      // 这一点落在哪一屏上（落在屏外就不跟着谁）
+      const anchorAt = (x, y) => {
+        const hit = where().find((q) => x >= q.l && x <= q.l + q.w && y >= q.t && y <= q.t + q.h)
+        return hit ? { key: hit.key, l: hit.l, t: hit.t, w: hit.w } : null
+      }
+      const onDown = (e) => {
+        if (e.button !== 0 || sending || live.current) return
+        e.preventDefault()
+        setPal(false)
+        if (!wrap.current.contains(document.activeElement)) { try { wrap.current.focus({ preventScroll: true }) } catch { /* 键盘快捷键用不了而已 */ } }
+        // 正写着字：这一下只算写完
+        if (txtRef.current) { endText(true, true); return }
+        const [x, y] = at(e)
+        const o = opt.current
+        if (o.tool === 'text') {
+          if (cur.current.length < MARK_MAX) setTxt({ x, y: y - MARK_FONT[o.size] * 0.65, v: '', an: anchorAt(x, y) })
+          return
+        }
+        if (o.tool !== 'erase' && cur.current.length >= MARK_MAX) return
+        try { e.currentTarget.setPointerCapture(e.pointerId) } catch { /* 拖出去就断了也没事 */ }
+        if (o.tool === 'erase') {
+          live.current = { erase: cur.current.slice(), hit: false }
+          eraseAt(x, y)
+          return
+        }
+        const w = MARK_WIDTH[o.size] * (o.tool === 'hl' ? 4 : 1)
+        const an = anchorAt(x, y)
+        live.current = o.tool === 'pen' || o.tool === 'hl' ? { t: o.tool, c: o.color, w, p: [[x, y]], an } : { t: o.tool, c: o.color, w, a: [x, y], b: [x, y], an, sd: 1 + Math.floor(Math.random() * 2e9) }
+        repaint()
+      }
+      const onMove = (e) => {
+        const lv = live.current
+        if (!lv) return
+        const [x, y] = at(e)
+        if (lv.erase) { eraseAt(x, y); return }
+        if (lv.p) {
+          const q = lv.p[lv.p.length - 1]
+          if (Math.hypot(x - q[0], y - q[1]) >= 1.5 && lv.p.length < 5000) lv.p.push([x, y])
+        } else lv.b = e.shiftKey ? markSnap(lv.t, lv.a, [x, y]) : [x, y]
+        repaint()
+      }
+      const onUp = () => {
+        const lv = live.current
+        if (!lv) return
+        live.current = null
+        if (lv.erase) { if (lv.hit) commit(lv.erase); else paint(); return }
+        // 方框、箭头只点了一下没拖：不算
+        if (lv.p) commit([...cur.current, penAnchors(lv)])
+        else if (Math.hypot(lv.b[0] - lv.a[0], lv.b[1] - lv.a[1]) >= 4) {
+          commit([...cur.current, { ...lv, an: reAnchor(lv.an), bn: anchorAt(lv.b[0], lv.b[1]) }])
+        } else paint()
+      }
+
+      const onKey = (e) => {
+        if (e.target === area.current) {
+          if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); endText(false, true) }
+          else if (e.key === 'Enter' && !e.shiftKey && !(e.nativeEvent && e.nativeEvent.isComposing) && e.keyCode !== 229) { e.preventDefault(); e.stopPropagation(); endText(true, true) }
+          return
+        }
+        if (e.target && e.target.tagName === 'BUTTON' && (e.key === 'Enter' || e.key === ' ')) return
+        const mod = e.metaKey || e.ctrlKey
+        const k = String(e.key).toLowerCase()
+        let done = true
+        if (e.key === 'Escape') { if (pal) setPal(false); else if (!sending) onCancel() }
+        else if (mod && k === 'z') { if (e.shiftKey) redo(); else undo() }
+        else if (mod && k === 'y') redo()
+        else if (mod && k === 'c' && onCopy && !e.shiftKey && !e.altKey) copy()
+        else if (!mod && !e.altKey && MARK_TOOLS.some((x) => x[3] === k)) { setTool(MARK_TOOLS.find((x) => x[3] === k)[0]); setPal(false) }
+        else done = false
+        if (done) { e.preventDefault(); e.stopPropagation() }
+      }
+
+      // 交出去的是按屏现在的位置摆好的；正写着的字也算上
+      const done = () => {
+        const s = txtRef.current ? endText(true, true) : null
+        return placed(s && cur.current.length < MARK_MAX ? [...cur.current, s] : cur.current)
+      }
+      const send = () => { if (!sending) onSend(done()) }
+      // 复制：拼成同一张图放进剪贴板，贴到别的地方用（issue #6；不支持的环境不给这个按钮）
+      const copy = () => { if (!sending && onCopy) onCopy(done()) }
+
+      // 工具栏上按下去别抢走焦点：正写着的字不会被打断，快捷键也还管用
+      const keep = (e) => { if (e.target !== area.current) e.preventDefault() }
+      const btn = (key, icon, title, on, run, off) => h('button', { key, type: 'button', className: 'ddp-btn' + (on ? ' sel' : ''), title, 'aria-label': title, 'aria-pressed': on || undefined, disabled: !!off, onClick: run }, h(I[icon]))
+      const f = MARK_FONT[size]
+      let box = null
+      if (txt) {
+        // 字框和写完后的字一样跟着那一屏走
+        const p = markPlace({ t: 'text', x: txt.x, y: txt.y, f, an: txt.an }, where())
+        const pf = p.f
+        const lines = txt.v.split('\n')
+        const w = Math.max(markTextWidth(txt.v ? '' : t('mkTextPh'), pf), ...lines.map((l) => markTextWidth(l, pf))) + pf
+        box = { left: p.x - 3, top: p.y - 1, width: Math.max(pf * 3, Math.min(w, dims.current.w - p.x - 6)), height: lines.length * pf * 1.3 + 2, fontSize: pf, color }
+      }
+      return h('div', { className: 'ddp-mark', ref: wrap, tabIndex: -1, onKeyDown: onKey },
+        h('canvas', { ref: cv, className: 'cv' + (tool === 'text' ? ' tx' : tool === 'erase' ? ' er' : ''), onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onUp }),
+        txt ? h('textarea', {
+          ref: area,
+          className: markLight(color) ? 'lt' : '',
+          value: txt.v,
+          placeholder: t('mkTextPh'),
+          spellCheck: false,
+          rows: 1,
+          style: box,
+          onChange: (e) => setTxt({ ...txt, v: e.target.value }),
+          onBlur: () => endText(true),
+        }) : null,
+        h('div', { className: 'ddp-mk-top' },
+          h('div', { className: 'ddp-mk-tools', onMouseDown: keep },
+            ...MARK_TOOLS.map(([id, icon, label, key]) => btn(id, icon, `${t(label)} (${key.toUpperCase()})`, tool === id, () => { setTool(id); setPal(false) })),
+            h('span', { className: 'ddp-sep' }),
+            h('div', { className: 'ddp-mk-color' },
+              h('button', { type: 'button', className: 'ddp-btn' + (pal ? ' sel' : ''), title: t('mkColor'), 'aria-label': t('mkColor'), 'aria-expanded': pal, onClick: () => setPal(!pal) }, h('i', { style: { background: color } })),
+              pal ? h('div', { className: 'ddp-mk-pal' }, MARK_COLORS.map((c) => h('button', {
+                key: c, type: 'button', className: c === color ? 'sel' : '', style: { background: c }, title: c, 'aria-label': c, onClick: () => { setColor(c); setPal(false) },
+              }))) : null),
+            h('div', { className: 'ddp-mk-sz', role: 'group', 'aria-label': t('mkSize') },
+              MARK_WIDTH.map((_, i) => h('button', { key: i, type: 'button', className: 'ddp-btn' + (i === size ? ' sel' : ''), title: t('mkSize'), 'aria-label': `${t('mkSize')} ${i + 1}`, 'aria-pressed': i === size, onClick: () => setSize(i) },
+                h('i', { style: { width: 4 + i * 3 + 'px', height: 4 + i * 3 + 'px' } })))),
+            h('span', { className: 'ddp-sep' }),
+            btn('undo', 'undo', `${t('mkUndo')} (${MOD}Z)`, false, undo, hist.i === 0),
+            btn('redo', 'redo', `${t('mkRedo')} (${MOD === '⌘' ? '⇧⌘Z' : 'Ctrl+Y'})`, false, redo, hist.i >= hist.list.length - 1),
+            btn('clear', 'trash', t('mkClear'), false, clear, !shapes.length && !txt))),
+        coach && !shapes.length && !txt ? h('div', { className: 'ddp-mk-coach', 'aria-hidden': true },
+          h('b', null, t('mkCoach')),
+          h('ol', null, h('li', null, t('mkCoach1')), h('li', null, t('mkCoach2')), h('li', null, t('mkCoach3')))) : null,
+        h('div', { className: 'ddp-mk-bot' },
+          h('div', { className: 'ddp-mk-bar', onMouseDown: keep },
+            // 现在这个工具怎么用（只认图标的人也知道该怎么画）
+            sending ? h('span', null, t('mkSending')) : h('span', { title: t('mkHow_' + tool) }, h('b', null, t(MARK_TOOLS.find((x) => x[0] === tool)[2])), t('mkHow_' + tool)),
+            h('button', { type: 'button', disabled: sending, onClick: onCancel }, t('mkCancel')),
+            onCopy ? h('button', { type: 'button', className: 'cp', title: `${t('mkCopyTip')} (${MOD}C)`, disabled: sending, onClick: copy }, t('mkCopy')) : null,
+            h('button', { type: 'button', className: 'go' + (shapes.length || (txt && txt.v.trim()) ? '' : ' idle'), disabled: sending, onClick: send }, t('mkSend')))))
+    }
+
     /** 设计规范面板：按组列出变量，点一个放进输入框 */
     function TokensPanel({ t, tokens, onPick, onAsk, onRef, onStyles, onSystems, onClose }) {
       const groups = {}
@@ -3059,17 +4470,71 @@ window.__ModuleLoader__.load({
           h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
     }
 
-    /** 一排风格卡：每张是个小样（底色、标题字、卡片、主色按钮），点了交给 onPick */
+    /** 风格样板：用这个风格画的一小屏（顶栏、标题、按钮、商品卡、数据卡）；卡片上缩小着放，点开是原大 */
+    function StyleSample({ t, x }) {
+      const c = x.c
+      const L = styleLook(x)
+      const muted = { color: c.muted }
+      return h('div', { className: 'ddp-sam', style: { background: c.bg, backgroundImage: x.bgImage || 'none', color: c.text, fontFamily: SANS } },
+        h('div', { className: 'top' },
+          h('i', { className: 'lg', style: { background: c.primary, borderRadius: Math.min(x.radius, 5) } }),
+          h('b', { style: L.head }, t('samBrand')),
+          h('span', { className: 'nv', style: muted }, t('samNav')),
+          h('i', { className: 'av', style: { background: L.img } })),
+        h('h5', { style: L.head }, t('samHead')),
+        h('p', { style: muted }, t('samSub')),
+        h('div', { className: 'acts' }, h('span', { className: 'bt', style: L.btn }, t('samGo')), h('span', { style: { color: c.link } }, t('samMore'))),
+        h('div', { className: 'cards' },
+          h('div', { className: 'cd', style: L.card },
+            h('i', { className: 'im', style: { background: L.img, borderRadius: Math.max(0, x.radius - 6) } }),
+            h('b', null, t('samItem')),
+            h('span', { style: muted }, t('samMeta')),
+            h('div', { className: 'pr' }, h('b', { style: { fontFamily: x.head } }, t('samPrice')), h('span', { className: 'chip', style: L.chip }, t('samTag')))),
+          h('div', { className: 'cd', style: L.card },
+            h('span', { style: muted }, t('samStat')),
+            h('b', { className: 'num', style: L.head }, '86%'),
+            h('i', { className: 'bar', style: { background: L.track } }, h('i', { style: { background: c.primary } })),
+            h('span', { style: muted }, t('samStatMeta')))))
+    }
+
+    /** 一排风格卡：每张是缩小的样板；点一张看原大样板（左右翻），「用这个风格」才交给 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}` : x.id === 'cyber' ? `0 0 6px ${x.c.primary}` : x.id === 'retro' ? `0 1.5px 0 ${x.c.text}` : '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}`
-              : x.id === 'guochao' ? `inset 0 0 0 1px ${x.c.accent}` : x.id === 'retro' ? `0 2px 0 ${x.c.text}` : `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 } }))),
+      const [on, setOn] = useState(-1) // 正在看样板的那个；-1 是看全部
+      const was = useRef(-1)
+      const box = useRef(null)
+      useEffect(() => {
+        // 进样板：焦点给「用这个风格」；回全部：焦点回到刚才那张卡
+        const el = box.current
+        if (!el) return
+        const f = on >= 0 ? el.querySelector('.ddp-go') : was.current >= 0 ? el.querySelectorAll('.ddp-sc')[was.current] : null
+        if (f) f.focus({ preventScroll: true })
+        // 列表和样板高矮不一样，外面滚动的位置会变：把样板 / 刚才那张卡滚进来
+        if (was.current >= 0 || on >= 0) (on >= 0 ? el : f || el).scrollIntoView({ block: 'nearest' })
+        if (on >= 0) was.current = on
+      }, [on])
+      const n = STYLES.length
+      if (on >= 0) {
+        const x = STYLES[on]
+        const go = (d) => setOn((on + d + n) % n)
+        const onKey = (e) => {
+          if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); go(e.key === 'ArrowLeft' ? -1 : 1) } else if (e.key === 'Escape') { e.stopPropagation(); setOn(-1) }
+        }
+        return h('div', { className: 'ddp-samview', ref: box, onKeyDown: onKey },
+          h('button', { className: 'ddp-btn all', onClick: () => setOn(-1) }, h(I.back), h('span', null, t('stylesAll'))),
+          h(StyleSample, { key: x.id, t, x }),
+          h('div', { className: 'meta' },
+            h('b', null, en ? x.en : x.zh),
+            h('span', { className: 'sw' }, ...['bg', 'surface', 'text', 'primary', 'accent'].map((k) => h('i', { key: k, title: x.c[k], style: { background: x.c[k] } }))),
+            h('p', null, en ? x.den : x.dzh)),
+          h('div', { className: 'row' },
+            h('button', { className: 'ddp-btn', title: t('stylePrev'), onClick: () => go(-1) }, h(I.back)),
+            h('em', null, `${on + 1} / ${n}`),
+            h('button', { className: 'ddp-btn nx', title: t('styleNext'), onClick: () => go(1) }, h(I.back)),
+            h('button', { className: 'ddp-go', onClick: () => onPick(x) }, t('styleUse'))))
+      }
+      return h('div', { className: 'ddp-styles', ref: box }, ...STYLES.map((x, i) => h('button', { key: x.id, className: 'ddp-sc', title: en ? x.den : x.dzh, onClick: () => setOn(i) },
+        h('span', { className: 'pv', 'aria-hidden': 'true' }, h(StyleSample, { t, x })),
         h('span', { className: 'nm' }, en ? x.en : x.zh))))
     }
 
@@ -3103,7 +4568,7 @@ window.__ModuleLoader__.load({
     /** 拖过的滑块 → 交给模型的一段字 */
     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'
+      return t('twAskHead') + '\n' + rows.join('\n') + '\n' + t('twAskTail') + '\n'
     }
 
     /** 调节滑块面板：模型给这套设计做的几个维度（tweaks.json），拖的时候所有屏一起变，定下来写回文件或交给模型 */
@@ -3151,6 +4616,26 @@ window.__ModuleLoader__.load({
     }
 
     /** 品牌设计系统库：从用户的网站 / 项目提取的几套，默认那套以后做新设计都照它来。rev 变了（模型干完一轮）重新列 */
+    /** 输入框旁的「选文件夹」：桌面版弹系统的选文件夹窗口，选了填进去；网页版没有这个按钮 */
+    function DirButton({ t, onPicked, onSay }) {
+      const dp = dirPicker()
+      const [busy, setBusy] = useState(false)
+      if (!dp) return null
+      const pick = async () => {
+        if (busy) return
+        setBusy(true)
+        try {
+          const p = await dp.pick()
+          if (p) onPicked(p)
+        } catch (e) {
+          if (onSay) onSay(t('pickDirFail', { msg: e && e.message ? e.message : String(e) }))
+        } finally {
+          setBusy(false)
+        }
+      }
+      return h('button', { type: 'button', className: 'ddp-dirbtn', title: t('pickDir'), 'aria-label': t('pickDir'), disabled: busy, onClick: pick }, h(I.folder))
+    }
+
     function SystemsPanel({ t, rev, hasDesign, onExtract, onApply, onSay, onClose }) {
       const [data, setData] = useState(null)
       const [err, setErr] = useState('')
@@ -3186,6 +4671,7 @@ window.__ModuleLoader__.load({
         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(DirButton, { t, onPicked: setSrc, onSay }),
             h('button', { type: 'submit', disabled: !src.trim() }, t('sysExtract')))))
     }
 
@@ -3193,25 +4679,56 @@ window.__ModuleLoader__.load({
     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 }) {
+    function HandoffPanel({ t, sid, root, fileTarget, count, cur, onGo, onSay, onClose }) {
       const [info, setInfo] = useState(null)
       const [fw, setFw] = useState('')
       const [dest, setDest] = useState('')
       const [one, setOne] = useState(false)
+      const [moved, setMoved] = useState(null) // 选的文件夹不能直接放：{ dest, why }（'nested' 在里面新建、'beside' 放设计目录旁边）
+      const [checking, setChecking] = useState('') // 'busy' 正在问服务器这个文件夹；别的字是没问成的原因
+      // 现在是哪套设计、第几次选：选文件夹的窗口开着时换了设计、或者又选了一次 / 手改了路径，旧的结果作废
+      // hand：用户自己点过框架（换设计前一直听用户的，不再按选的文件夹自动换）
+      const live = useRef({ root, seq: 0, hand: false })
+      live.current.root = root
       // 换了会话或设计目录就重新问：先清掉旧的（别把上一套设计的目标发出去）
       useEffect(() => {
         let alive = true
+        live.current.seq++
+        live.current.hand = false
         setInfo(null)
+        setFw('') // 上一套设计的框架（比如已经没有的「跟项目一样」）别留着
         setDest('')
+        setMoved(null)
+        setChecking('')
         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')
+          setFw(d.fw || 'react')
           setDest(d.root === root ? d.dest || '' : '')
-        }, () => { if (alive) setInfo({}) })
+        }, () => { if (alive) { setInfo({}); setFw('react') } })
         return () => { alive = false }
       }, [sid, root])
+      // 选了文件夹：问一下它是不是项目——是就放进去、跟着它的框架；不是而且有东西，就在里面新建一个目录（下面说一声，能改）
+      const pickDest = (dir) => {
+        if (live.current.root !== root) return
+        const my = ++live.current.seq
+        setDest(dir)
+        setMoved(null)
+        setChecking('busy') // 问清楚之前「开始」点不了：别把没调整过的目录发出去
+        getJson(`project?session=${encodeURIComponent(sid)}&dest=${encodeURIComponent(dir)}`).then((d) => {
+          if (my !== live.current.seq) return
+          if (!d || d.root !== root || typeof d.dest !== 'string') return setChecking(t('hoCheckFail', { msg: '?' }))
+          setChecking('')
+          setInfo(d)
+          setDest(d.dest)
+          setMoved(d.why ? { dest: d.dest, why: d.why } : null)
+          // 框架按服务器给的默认（是项目就跟它一样，纯 HTML 站点就纯 HTML）；用户自己点过就听用户的，除非点的「跟项目一样」没了
+          const same = !!(d.project && d.project.pkg && d.project.framework)
+          setFw((f) => (live.current.hand && (f !== 'same' || same) ? f : d.fw || 'react'))
+        }, (e) => { if (my === live.current.seq) setChecking(t('hoCheckFail', { msg: (e && e.message) || '?' })) })
+      }
+      const typeDest = (v) => { live.current.seq++; setChecking(''); setDest(v) }
       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'))))
@@ -3224,15 +4741,19 @@ window.__ModuleLoader__.load({
         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)))),
+            ...opts.map(([k, l]) => h('button', { key: k, className: 'opt' + (fw === k ? ' on' : ''), onClick: () => { live.current.hand = true; 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) })),
+            h('div', { className: 'pathrow' },
+              h('input', { type: 'text', value: dest, spellCheck: false, 'aria-label': t('hoDest'), onChange: (e) => typeDest(e.target.value) }),
+              h(DirButton, { t, onPicked: pickDest, onSay })),
+            checking ? h('p', { className: 'moved' + (checking === 'busy' ? '' : ' bad') }, checking === 'busy' ? t('hoChecking') : checking)
+              : moved && moved.dest === dest ? h('p', { className: 'moved' }, t(moved.why === 'beside' ? 'hoBeside' : 'hoMoved', { name: moved.dest.split(/[\\/]/).pop() })) : null),
           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')))))
+          h('button', { className: 'go', disabled: !fw || !dest.trim() || checking === 'busy', onClick: () => onGo({ fw, label, dest: dest.trim(), only: one && count > 1 ? cur : '' }) }, h(I.code), h('span', null, t('hoGo')))))
     }
 
     /** 菜单开着时：点外面、按 Esc 关掉 */
@@ -3559,8 +5080,11 @@ window.__ModuleLoader__.load({
       const [sel, setSel] = useState('')
       const [panel, setPanel] = useState(false)
       const [styles, setStyles] = useState(false) // 换风格面板
-      const [dropping, setDropping] = useState(false) // 正拖着图片进来
+      const [dropping, setDropping] = useState('') // 正拖着文件进来：dragKind 给的种类
+      const [dropSoft, setDropSoft] = useState(false) // 拖动在预览页面里：蒙层只是提示、不挡事件（松手由页面转告）
+      const softTimer = useRef(0)
       const refInput = useRef(null)
+      const pageInput = useRef(null)
       const [exMenu, setExMenu] = useState(false)
       const [more, setMore] = useState(false) // 窄的时候收起来的几个按钮
       const [hist, setHist] = useState(false) // 版本面板
@@ -3577,6 +5101,10 @@ window.__ModuleLoader__.load({
       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 [mark, setMark] = useState(false) // 画笔标注
+      const [markBusy, setMarkBusy] = useState(false) // 正在把标注拼成图
+      const [markSize, setMarkSize] = useState(null) // 开标注那一刻台面的大小：单页看网页时按它定住页面，台面变了整体缩放、不重排
+      const markRun = useRef(0) // 每开 / 关一次标注加一：发送途中关掉（或关了又开）的，旧的那次作废
       const [tw, setTw] = useState({}) // 拖过的滑块：id → 值（还没写进文件）
       const apis = useRef(new Map()) // 屏 → 截图用的接口
       const cmpRef = useRef(null)
@@ -3693,6 +5221,36 @@ window.__ModuleLoader__.load({
         toastTimer.current = setTimeout(() => setToast(''), act ? 6000 : 2600)
       }
 
+      // ── 打开本地的 HTML：「浏览…」选一个，或者把文件 / 文件夹拖进来（桌面版才拿得到路径）──
+      const openLocal = async (p) => {
+        if (!p) return say(t('pathNone'))
+        try {
+          await openTarget(sid, p)
+          setEditing(false)
+        } catch (e) {
+          say(t('openFailed', { msg: e.message }))
+        }
+      }
+      const browse = hostPaths() ? () => { if (pageInput.current) pageInput.current.click() } : null
+      // 拖着文件在预览页面里：iframe 把拖动吃掉了（单页铺满时外面收不到 dragenter），页面转告过来。
+      // 蒙层只当提示、不挡事件（不然页面自己的上传区就收不到后面的拖动了）；松手也是页面接住、把文件转过来
+      const pageDrag = (d) => {
+        clearTimeout(softTimer.current)
+        if (d.type === 'dragIn') {
+          const list = (Array.isArray(d.items) ? d.items : []).slice(0, 50).filter((x) => x && typeof x.kind === 'string' && typeof x.type === 'string')
+          setDropSoft(true)
+          setDropping(dragKind({ items: list }))
+          // 拖着时页面隔一会儿就报一次；一阵没报（拖出去了、按了 Esc）就收起
+          softTimer.current = setTimeout(() => setDropping(''), 900)
+          return
+        }
+        setDropping('')
+        if (d.type !== 'dropIn') return // dragOut：到了页面自己的上传区
+        const files = (Array.isArray(d.files) ? d.files : []).slice(0, 20).filter((x) => x && x.f && typeof x.f.name === 'string')
+        onDropped({ items: files.map((x) => ({ kind: 'file', getAsFile: () => x.f, webkitGetAsEntry: () => ({ isDirectory: !!x.dir }) })) })
+      }
+      useEffect(() => () => clearTimeout(softTimer.current), [])
+
       const showFlash = (text) => {
         setFlash(text)
         clearTimeout(flashTimer.current)
@@ -3760,7 +5318,27 @@ window.__ModuleLoader__.load({
         return () => { dead = true }
       }, [hist, sid, vrev, origin])
 
-      const insert = (text, done = 'inserted') => {
+      // 新版 DSH：我们的整段在输入框里放成一个短标签（悬停看要点，发出去模型拿到整段）。放进去了返回 true
+      const chipIn = (text, done) => {
+        const s = String(text).trim()
+        const c = chipOf(s, t)
+        const ia = props.inputActions
+        if (!c || !chips || !ia || typeof ia.captureInsertion !== 'function') return false
+        try {
+          if (!chips.insert(sid, s, c.label, ia.captureInsertion(), chipSrc(c.i))) return false
+        } catch (e) {
+          console.warn('[dsh-design-studio] 插标签失败', e)
+          return false
+        }
+        // 先把焦点从预览页拿回输入框，再让编辑器把光标放回标签后面（只 focus 元素，光标会跑到最前面）
+        try { const el = composerEl(); if (el) { el.focus({ preventScroll: true }); const ed = el.__lexicalEditor; if (ed && typeof ed.focus === 'function') ed.focus() } } catch { /* 用户自己点一下输入框也行 */ }
+        say(t(done))
+        return true
+      }
+
+      // copy：插不进输入框时退回复制到剪贴板（画笔标注不要：别动用户的剪贴板）。插进去了返回 true
+      const insert = (text, done = 'inserted', copy = true) => {
+        if (chipIn(text, done)) return true
         const ia = props.inputActions
         try {
           if (ia && typeof ia.insertText === 'function') {
@@ -3772,17 +5350,20 @@ window.__ModuleLoader__.load({
             const p = padInsert(text, ok ? all.slice(0, at) : null, ok ? all.slice(span.end) : null, at, done === 'inserted')
             if (ia.insertText(p.text, span)) {
               try { focusAfter(el, p.text, p.back) } catch { /* 用户自己点一下输入框也行 */ }
-              return say(t(done))
+              say(t(done))
+              return true
             }
           }
         } catch (e) {
           console.warn('[dsh-design-studio] insertText 失败', e)
         }
+        if (!copy) return false
         if (navigator.clipboard) {
           navigator.clipboard.writeText(text).then(() => say(t('copied')), (e) => say(t('failed', { msg: e.message })))
         } else say(t('failed', { msg: 'no input' }))
       }
 
+      // 点选的元素 / 区域：新版 DSH 放成标签，旧版照旧插成字
       const deliver = (payload, note) => {
         setPicking(false)
         insert(formatPick(payload, stRef.current) + (note || ''))
@@ -3875,7 +5456,8 @@ window.__ModuleLoader__.load({
 
       useEffect(() => {
         if (!dropping) return undefined
-        const off = () => setDropping(false)
+        // 晚一拍再收蒙层：真拖放时这个捕获监听先跑，马上收的话 React 还没把 drop 交给蒙层，蒙层就没了（松手什么都不发生）
+        const off = () => setTimeout(() => setDropping(''), 0)
         window.addEventListener('dragend', off, true)
         window.addEventListener('drop', off, true)
         return () => { window.removeEventListener('dragend', off, true); window.removeEventListener('drop', off, true) }
@@ -3958,8 +5540,8 @@ window.__ModuleLoader__.load({
         else change({ view: 'single' })
       }
 
-      const renderScreen = (sc, z, fill) => h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(sc), top: tops[ik(sc)] },
-        h(Screen, { t, remote,
+      const renderScreen = (sc, z, fill) => h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(sc), top: tops[ik(sc)], os: meta.os },
+        h(Screen, { t, remote, onPageDrag: pageDrag,
           src: sc.url,
           label: labelOf(sc),
           busy: busy && !sc.v,
@@ -4058,6 +5640,7 @@ window.__ModuleLoader__.load({
               kind,
               size,
               shots: shots.map((x, i) => ({ img: x.img, top: x.top, label: sp.labels[i] || x.title })),
+              os: meta.os,
               title: sp.brand || (st && st.target && st.target.kind === 'file' ? String(st.target.file).split(/[\\/]/).slice(-2, -1)[0] : st.label) || '',
               sub: t('showSub', { n: shots.length, kind: t(KIND_KEY[kind]), date: ymd(new Date()) }),
               bg: colors.bg,
@@ -4072,7 +5655,7 @@ window.__ModuleLoader__.load({
           if (!sc) throw new Error('no screen')
           const base = prefix + sc.key.replace(/\.html?$/i, '') + suffix
           const { img, top } = await captureOf(sc, mode === 'long')
-          if (mode === 'frame') await saveImage(base, await composeOne(kind, size, img, labelOf(sc), top))
+          if (mode === 'frame') await saveImage(base, await composeOne(kind, size, img, labelOf(sc), top, meta.os))
           else {
             const c = document.createElement('canvas')
             c.width = img.width
@@ -4233,6 +5816,208 @@ window.__ModuleLoader__.load({
       }
       const checkOff = !url || !!ver || !!demo || inMulti
       const styleOff = !url || !!ver || !!demo || inMulti || busy
+
+      // ── 画笔标注：画完把台面上看得到的几屏各截一张，按位置摆好，叠上画的东西，存进 refs/，路径放进输入框让模型用 read_image 看（不动剪贴板） ──
+      const markOff = !url || !!ver || !!demo || inMulti
+      const toggleMark = () => {
+        markRun.current++
+        if (mark) { setMark(false); return }
+        setPicking(false)
+        setTextEdit(false)
+        setStyleEdit(false)
+        setPanel(false)
+        setStyles(false)
+        setHist(false)
+        setPhone(false)
+        closeCheck()
+        setPane('')
+        // 之前点选 / 调样式留下的「已选」框别夹在标注里
+        for (const a of apis.current.values()) if (a && a.unpin) a.unpin()
+        setMarkSize(box.w && box.h ? { w: box.w, h: box.h } : null)
+        setMark(true)
+      }
+      // 换了设计、看旧版本、演示：画的东西对不上了，收掉
+      useEffect(() => { markRun.current++; setMark(false) }, [url, markOff])
+      // 台面上现在看得到的每一屏：页面 iframe 的位置（台面坐标，画布缩放过的也对），一点没露出来的不要
+      const markFrames = () => {
+        const stage = stageRef.current
+        if (!stage) return []
+        const sr = stage.getBoundingClientRect()
+        const out = []
+        for (const sc of shown) {
+          const api = apis.current.get(ik(sc))
+          const f = api && typeof api.frame === 'function' ? api.frame() : null
+          if (!f) continue
+          const r = f.getBoundingClientRect()
+          if (r.width < 8 || r.height < 8 || r.right <= sr.left || r.left >= sr.right || r.bottom <= sr.top || r.top >= sr.bottom) continue
+          if (typeof f.checkVisibility === 'function' && !f.checkVisibility({ opacityProperty: true, visibilityProperty: true })) continue
+          out.push({ key: ik(sc), sc, api, f, l: r.left - sr.left, t: r.top - sr.top, w: r.width, h: r.height, z: r.width / Math.max(1, f.offsetWidth) })
+        }
+        return out
+      }
+      const MARK_SHOTS = 40
+      // 截到的是哪一页（只用来起名、写进提示）：本地文件按文件名；开发服务器按路由（/account）；单页应用的 #/account 路由带上
+      const markPageOf = (sc, href) => {
+        let key = pageOf(sc, href).key
+        try {
+          const u = new URL(href)
+          if (u.origin !== new URL(sc.url).origin) return key
+          if (key === sc.key && st && st.target && st.target.kind === 'proxy') key = decodeURIComponent(u.pathname) || sc.key
+          if (/^#!?\//.test(u.hash)) key += decodeURIComponent(u.hash)
+        } catch { /* 地址不对 */ }
+        return key
+      }
+      // 把画的拼成一张图：画到的那几屏按现在的位置截图，叠上画的（交给模型、复制共用）
+      const buildMark = async (list, stage) => {
+        const sr = stage.getBoundingClientRect()
+        const all = markFrames().filter((x) => x.api.ready())
+        const ov = (a, b) => a.l < b.r && a.r > b.l && a.t < b.b && a.b > b.t
+        const boxOf = (x) => ({ l: x.l, t: x.t, r: x.l + x.w, b: x.t + x.h })
+        // 画到的那几屏（一屏都没碰到：画在屏外空白处的，就把看得到的都拼上）
+        const marks = list.map(markBox)
+        let shots = all.filter((x) => marks.some((m) => ov(boxOf(x), m)))
+        if (!shots.length) shots = all
+        // 裁到有东西的那块（画到的屏 + 画的），四周留一点；落在这块里的别的屏也拼上，免得图上空一块
+        const pad = 16
+        const span = (bs) => ({
+          l: Math.max(0, Math.min(...bs.map((b) => b.l)) - pad),
+          t: Math.max(0, Math.min(...bs.map((b) => b.t)) - pad),
+          r: Math.min(sr.width, Math.max(...bs.map((b) => b.r)) + pad),
+          b: Math.min(sr.height, Math.max(...bs.map((b) => b.b)) + pad),
+        })
+        const crop = span([...shots.map(boxOf), ...marks])
+        shots = all.filter((x) => shots.includes(x) || ov(boxOf(x), crop))
+        const { l: cl, t: ct, r: cr, b: cb } = crop
+        if (!(cr - cl >= 1 && cb - ct >= 1)) throw new Error('empty')
+        // 清晰度：至少按屏幕像素；画布缩小着看的，按页面原来的大小截（最多 4 倍），整张不超过 4096
+        const zMin = Math.min(1, ...shots.map((x) => x.z))
+        const k = Math.min(4096 / Math.max(cr - cl, cb - ct), Math.max(Math.min(2, Math.max(1, window.devicePixelRatio || 1)), Math.min(4, 1 / Math.max(0.05, zMin))))
+        const c = document.createElement('canvas')
+        c.width = Math.max(1, Math.round((cr - cl) * k))
+        c.height = Math.max(1, Math.round((cb - ct) * k))
+        const ctx = c.getContext('2d')
+        let bg = ''
+        for (let el = stage; el && !bg; el = el.parentElement) {
+          const v = getComputedStyle(el).backgroundColor
+          if (v && !/^(transparent|rgba\(.*,\s*0\))$/.test(v)) bg = v
+        }
+        ctx.fillStyle = bg || '#f4f4f5'
+        ctx.fillRect(0, 0, c.width, c.height)
+        if (shots.length > MARK_SHOTS) say(t('mkMany', { n: MARK_SHOTS }))
+        const names = []
+        for (const [i, x] of shots.entries()) {
+          const X = (x.l - cl) * k
+          const Y = (x.t - ct) * k
+          // 手机框的圆角：往上找一层裁圆角的
+          let rad = 0
+          for (let el = x.f.parentElement, j = 0; el && el !== stage && j < 4 && !rad; el = el.parentElement, j++) {
+            const cs = getComputedStyle(el)
+            const v = parseFloat(cs.borderTopLeftRadius) || 0
+            if (v && cs.overflow !== 'visible' && el.offsetWidth) rad = v * (el.getBoundingClientRect().width / el.offsetWidth)
+          }
+          ctx.save()
+          ctx.beginPath()
+          if (rad && typeof ctx.roundRect === 'function') ctx.roundRect(X, Y, x.w * k, x.h * k, rad * k)
+          else ctx.rect(X, Y, x.w * k, x.h * k)
+          ctx.clip()
+          let name = x.sc.key
+          try {
+            if (i >= MARK_SHOTS) throw new Error('too many')
+            const cap = await x.api.capture({ full: false, scale: Math.min(3, Math.max(1, x.z * k)) })
+            // 页面里点链接跳到别的页了：按真正截到的那页起名
+            if (cap.href) name = markPageOf(x.sc, cap.href)
+            const img = await loadImg(cap.png)
+            ctx.fillStyle = '#fff'
+            ctx.fillRect(X, Y, x.w * k, x.h * k)
+            ctx.drawImage(img, X, Y, cap.w * x.z * k, cap.h * x.z * k)
+          } catch (e) {
+            // 这一屏截不下来：留个灰块，画的东西还在
+            if (i < MARK_SHOTS) console.warn('[dsh-design-studio] 标注截图失败', x.sc.key, e)
+            ctx.fillStyle = 'rgba(127,127,127,.18)'
+            ctx.fillRect(X, Y, x.w * k, x.h * k)
+          }
+          ctx.restore()
+          if (!names.includes(name)) names.push(name)
+        }
+        for (const s of list) drawMark(ctx, s, k, cl, ct)
+        return { c, names, blob: await canvasBlob(c) }
+      }
+      const sendMark = async (list) => {
+        if (markBusy) return
+        if (!list.length) { say(t('mkEmpty')); return }
+        const stage = stageRef.current
+        if (!stage) return
+        const url0 = url
+        const run0 = markRun.current
+        const stale = () => stRef.current.url !== url0 || markRun.current !== run0
+        const root0 = st && st.target && st.target.kind === 'file' ? st.target.root : null
+        setMarkBusy(true)
+        try {
+          const { c, names, blob } = await buildMark(list, stage)
+          // 拼图的时候换了设计、关了标注：这张图对不上了，别交
+          if (stale()) { if (stRef.current.url !== url0) say(t('mkMoved')); return }
+          if (!names.length && curScreen) names.push(curScreen.key)
+          const stem = String(names[0] || 'page').replace(/\.html?(?=$|#)/i, '').split(/[/#!]+/).filter(Boolean).pop() || 'page'
+          const body = { session: sid, name: `markup-${stem}`, data: await blobB64(blob) }
+          if (root0 !== null) body.root = root0
+          let saved
+          try { saved = await post('ref', body) } catch (e) {
+            if (/moved/.test(e.message)) { say(t('mkMoved')); return }
+            throw e
+          }
+          if (stale()) { if (stRef.current.url !== url0) say(t('mkMoved')); return }
+          keepThumb(saved.path, c)
+          const where = (names.length ? names : [st.label || '']).join(t('sep'))
+          // 写在图上的字也用文字带上：模型看图看漏了、或者用的模型看不了图，也知道要改什么
+          const notes = list.filter((x) => x.t === 'text').map((x) => t('mkQuote', { v: x.v.replace(/\s*\n\s*/g, ' ') })).join(t('sep'))
+          // 插不进输入框：标注层留着（画的还在），提示再点一次；不退回剪贴板
+          if (insert(t('mkAsk', { path: saved.path, where, notes: notes ? t('mkNotes', { notes }) : '' }), 'mkIn', false)) setMark(false)
+          else say(t('mkNoInput'))
+        } catch (e) {
+          say(t('mkFail', { msg: e.message }))
+        } finally {
+          setMarkBusy(false)
+        }
+      }
+      // 复制：同一张图放进剪贴板（issue #6）。点按钮这一下就把「等图拼好」交给剪贴板——拼完再写，
+      // Safari 这类会说不是用户点的、不让写；不认这种写法的再用拼好的图写一次
+      const copyMark = (list) => {
+        if (markBusy) return
+        if (!list.length) { say(t('mkEmpty')); return }
+        const stage = stageRef.current
+        if (!stage) return
+        const url0 = url
+        const run0 = markRun.current
+        const stale = () => stRef.current.url !== url0 || markRun.current !== run0
+        const STALE = 'ddp-mark-stale'
+        setMarkBusy(true)
+        const made = buildMark(list, stage).then((r) => { if (stale()) throw new Error(STALE); return r })
+        const png = made.then((r) => r.blob)
+        png.catch(() => {}) // 结果在下面看
+        let wrote
+        try { wrote = navigator.clipboard.write([new ClipboardItem({ 'image/png': png })]) } catch (e) { wrote = Promise.reject(e) }
+        wrote.catch(() => {})
+        ;(async () => {
+          try {
+            const r = await made
+            if (!(await wrote.then(() => true, () => false))) {
+              // 等写的工夫里取消了、换了设计：别再把这张旧图写进去
+              if (stale()) { if (stRef.current.url !== url0) say(t('mkMoved')); return }
+              if (!(await copyImage(r.blob))) { say(t('mkCopyFail')); return }
+            }
+            if (stale()) return
+            say(t('mkCopied'))
+            setMark(false)
+          } catch (e) {
+            if (e && e.message === STALE) { if (stRef.current.url !== url0) say(t('mkMoved')) } else {
+              console.warn('[dsh-design-studio] 标注图复制失败', e)
+              say(t('mkCopyFail'))
+            }
+          } finally {
+            setMarkBusy(false)
+          }
+        })()
+      }
       useEffect(() => { if (styleOff) setStyleEdit(false) }, [styleOff])
       autoCk.current = { ck, off: checkOff, run: runCheck, list: checkList, measure }
       useEffect(() => { if (checkOff && ck) closeCheck() }, [checkOff])
@@ -4275,23 +6060,24 @@ window.__ModuleLoader__.load({
       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' },
+      const bar = h('div', { className: 'ddp-bar' + (editing ? ' editing' : '') },
         editing || !url
-          ? h(AddressForm, { t, sid, initial: st && st.target && st.target.kind === 'file' ? st.target.file : st && st.label ? st.label : '', autoFocus: true, onDone: () => setEditing(false) })
+          ? h(AddressForm, { t, sid, initial: st && st.target && st.target.kind === 'file' ? st.target.file : st && st.label ? st.label : '', autoFocus: true, onDone: () => setEditing(false), onBrowse: browse })
           : h('div', { className: 'ddp-addr', title: t('editAddr'), onClick: () => setEditing(true) },
             h('i', { className: 'ddp-dot' + (busy ? ' wait' : '') }),
             h('span', null, canvas && screens.length > 1 ? `${st.label} · ${screens.length}` : st.label)),
-        h('button', { className: 'ddp-btn pick' + (picking ? ' on' : ''), title: t('pickTip'), disabled: !url || !!ver || !!demo, onClick: togglePick },
+        h('button', { className: 'ddp-btn pick' + (picking ? ' on' : ''), title: t('pickTip'), disabled: !url || !!ver || !!demo || mark, 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('button', { className: 'ddp-btn' + (textEdit ? ' on' : ''), title: t('textEdit'), disabled: !url || !!ver || !!demo || busy || mark, onClick: toggleText }, h(I.text)),
+        h('button', { className: 'ddp-btn' + (styleEdit ? ' on' : ''), title: t('styleEdit'), disabled: styleOff || mark, onClick: toggleStyle }, h(I.sliders)),
+        h('button', { className: 'ddp-btn' + (mark ? ' on' : ''), title: t('mark'), 'aria-pressed': mark, disabled: markOff, onClick: toggleMark }, h(I.pen)),
         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)),
-          h('button', { className: 'ddp-btn' + (!canvas && !inMulti ? ' sel' : ''), title: t('single'), onClick: () => { setMulti(false); openSingle() } }, h(I.single)),
-          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' + (canvas && !inMulti ? ' sel' : ''), title: t('canvas'), disabled: mark, onClick: () => { setMulti(false); change({ view: 'canvas' }) } }, h(I.canvas)),
+          h('button', { className: 'ddp-btn' + (!canvas && !inMulti ? ' sel' : ''), title: t('single'), disabled: mark, onClick: () => { setMulti(false); openSingle() } }, h(I.single)),
+          h('button', { className: 'ddp-btn' + (inMulti ? ' sel' : ''), title: sizeSet ? t('sizes') : t('sizesNo'), disabled: !sizeSet || !!ver || mark, onClick: () => setMulti(!inMulti) }, h(I.sizes))),
+        h('button', { className: 'ddp-btn o2' + (demo ? ' sel' : ''), title: t('demo'), disabled: !url || !!ver || mark, onClick: toggleDemo }, h(I.play)),
+        h(KindMenu, { t, kind, open: menu, setOpen: setMenu, disabled: mark, onPick: (k) => { setMenu(false); change({ kind: k }) } }),
         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()) },
@@ -4304,7 +6090,7 @@ window.__ModuleLoader__.load({
         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) || (!!ckCount && !ck && !checkOff), items: [
-          ['o2', I.play, t('demoShort'), !!demo, !url || !!ver, toggleDemo],
+          ['o2', I.play, t('demoShort'), !!demo, !url || !!ver || mark, 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')],
@@ -4328,6 +6114,7 @@ window.__ModuleLoader__.load({
         try {
           const r = await readRef(file)
           const saved = await post('ref', { session: sid, name: file.name || 'ref', data: r.data })
+          keepThumb(saved.path, r.img)
           insert(formatRef(t, { path: saved.path, w: r.w, h: r.h, palette: r.palette, hasDesign: !!url }), 'insertedSend')
         } catch (e) {
           say(t('refFail', { msg: e.message }))
@@ -4336,11 +6123,30 @@ window.__ModuleLoader__.load({
       const imageOf = (list) => [...(list || [])].find((f) => f && /^image\//.test(f.type))
       const hasFiles = (e) => [...((e.dataTransfer && e.dataTransfer.types) || [])].includes('Files')
       const pickRef = () => { if (refInput.current) refInput.current.click() }
+
+      const onDropped = (dt) => {
+        const d = droppedOf(dt)
+        if (d.page) return hostPaths() ? openLocal(pathOf(d.page)) : say(t('dropWebSay'))
+        if (d.image) return addRef(d.image)
+        return say(d.any ? t(hostPaths() ? 'dropWhat' : 'dropWhatWeb') : t('refNotImage'))
+      }
+
       const rootProps = {
         className: 'ddp',
         tabIndex: -1, // 点了右侧栏就能在这里粘贴图片
-        onDragEnter: (e) => { if (hasFiles(e)) { e.preventDefault(); setDropping(true) } },
-        onDragOver: (e) => { if (hasFiles(e)) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy' } },
+        // 拖动在右侧栏里时别让 DSH 看到：它在整页上数进出、松手就把文件加进对话框——
+        // 不拦的话它的「拖到这里添加」会盖住右侧栏，我们接住松手后它的蒙层还收不回去
+        onDragEnter: (e) => { if (hasFiles(e)) { e.preventDefault(); e.stopPropagation(); clearTimeout(softTimer.current); setDropSoft(false); setDropping(dragKind(e.dataTransfer)) } },
+        onDragOver: (e) => { if (hasFiles(e)) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy' } },
+        onDragLeave: (e) => { if (hasFiles(e)) e.stopPropagation() },
+        onDrop: (e) => {
+          if (!hasFiles(e)) return
+          // 平时是蒙层接住；蒙层刚好不在（比如鼠标动了一下收掉了）也别让文件掉进对话框
+          e.preventDefault()
+          e.stopPropagation()
+          setDropping('')
+          onDropped(e.dataTransfer)
+        },
         onPaste: (e) => {
           const f = imageOf(e.clipboardData && e.clipboardData.files)
           if (!f) return
@@ -4348,26 +6154,42 @@ window.__ModuleLoader__.load({
           addRef(f)
         },
       }
-      // 盖住整个右侧栏接住松手（不然落在页面 iframe 上就被它吃掉了）
+      // 盖住整个右侧栏接住松手（不然落在页面 iframe 上就被它吃掉了）；拖动在预览页面里时只是提示（soft），事件照样给页面
       const dropLayer = dropping ? h('div', {
-        className: 'ddp-drop',
+        key: 'drop',
+        className: 'ddp-drop' + (dropSoft ? ' soft' : ''),
+        // 拖放中不会有 mousemove：鼠标一动就说明拖已经结束了（没收到 drop / dragleave 时别让蒙层一直盖着）
+        onMouseMove: () => setDropping(''),
         onDragOver: (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy' },
-        onDragLeave: (e) => { if (e.target === e.currentTarget) setDropping(false) },
+        onDragLeave: (e) => { if (e.target === e.currentTarget) setDropping('') },
         onDrop: (e) => {
           e.preventDefault()
           e.stopPropagation()
-          setDropping(false)
-          addRef(imageOf(e.dataTransfer.files))
+          setDropping('')
+          onDropped(e.dataTransfer)
         },
-      }, h('div', { className: 'in' }, h(I.image), h('b', null, t('refDrop')), h('span', null, t('refDropSub')))) : null
+      }, h('div', { className: 'in' + (dropping === 'web' || dropping === 'other' ? ' no' : '') },
+        ...(dropping === 'page' || dropping === 'maybe' ? [h(I.page), h('b', null, t(dropping === 'page' ? 'pageDrop' : 'maybeDrop')), h('span', null, t('pageDropSub'))]
+          : dropping === 'web' ? [h(I.page), h('b', null, t('dropWeb')), h('span', null, t('dropWebSub'))]
+            : dropping === 'other' ? (hostPaths() ? [h(I.page), h('b', null, t('dropWhat')), h('span', null, t('dropWhatSub'))] : [h(I.page), h('b', null, t('dropWhatWeb')), h('span', null, t('dropWhatWebSub'))])
+              : [h(I.image), h('b', null, t('refDrop')), h('span', null, t('refDropSub'))]))) : null
       const fileInput = h('input', {
+        key: 'refFile',
         ref: refInput,
         type: 'file',
         accept: 'image/png,image/jpeg,image/webp,image/gif',
         style: { display: 'none' },
         onChange: (e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; if (f) addRef(f) },
       })
-      const root = (...kids) => h('div', rootProps, ...kids, dropLayer, fileInput)
+      const pageFileInput = h('input', {
+        key: 'pageFile',
+        ref: pageInput,
+        type: 'file',
+        accept: '.html,.htm,text/html',
+        style: { display: 'none' },
+        onChange: (e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; if (f) openLocal(pathOf(f)) },
+      })
+      const root = (...kids) => h('div', rootProps, ...kids, dropLayer, fileInput, pageFileInput)
 
       // 调节滑块 / 品牌设计系统 / 转成代码（右边的面板）
       const sidePane = () => {
@@ -4397,13 +6219,14 @@ window.__ModuleLoader__.load({
           })
         }
         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 h(HandoffPanel, { t, sid, root: fileTarget ? st.target.root : '', fileTarget, count: screens.length, cur: (curScreen && curScreen.key) || focus, onGo: doHandoff, onSay: say, onClose: () => setPane('') })
         }
         return null
       }
 
       if (!url) {
-        if (st ? st.loading : !waited) return root(h('div', { className: 'ddp-stage', ref: stageRef }))
+        const toastEl = toast ? h('div', { className: 'ddp-toast' }, h('span', null, toast.text)) : null
+        if (st ? st.loading : !waited) return root(h('div', { className: 'ddp-stage', ref: stageRef }), toastEl)
         if (busy) {
           // 模型在做第一屏：先放一个生成中的占位
           return root(
@@ -4411,7 +6234,8 @@ window.__ModuleLoader__.load({
               h('div', { className: 'ddp-wait' }, h('div', { className: 'card' }, h(Skeleton, {})), h('p', null, t('waiting'))),
               h('div', { className: 'ddp-glow' }),
               h('div', { className: 'ddp-ring' }),
-              busyChip('')))
+              busyChip('')),
+            toastEl)
         }
         return root(
           h('div', { className: 'ddp-empty' },
@@ -4424,13 +6248,13 @@ window.__ModuleLoader__.load({
             h('ol', { className: 'ddp-steps' }, h('li', null, t('step1')), h('li', null, t('step2')), h('li', null, t('step3'))),
             h('div', { className: 'ddp-tries' }, h('span', null, t('tryHead')),
               ['try1', 'try2', 'try3'].map((k) => h('button', { key: k, className: 'ddp-try', onClick: () => insert(t(k), 'insertedSend') }, t(k)))),
-            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', null, t(browse ? 'emptyHintPick' : 'emptyHint')),
+            h(AddressForm, { t, sid, className: 'ddp-form', onDone: () => {}, onBrowse: browse }),
             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')))),
+            h('p', { className: 'ddp-refline' }, t('sysEmptyLine'), ' · ', h('button', { className: 'lk', onClick: () => openPane('systems') }, t('sysOpen'))),
+            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)) }))),
           pane === 'systems' ? sidePane() : null,
-          toast ? h('div', { className: 'ddp-toast' }, h('span', null, toast.text)) : null)
+          toastEl)
       }
 
       let body
@@ -4446,8 +6270,8 @@ window.__ModuleLoader__.load({
           return h('div', { key: l.id, className: cls },
             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, top: tops[l.key] },
-                  h(Screen, { t, remote,
+                h(Device, { kind, w: size[0], h: size[1], fill, label, top: tops[l.key], os: meta.os },
+                  h(Screen, { t, remote, onPageDrag: pageDrag,
                     src: urlOfKey(l.key),
                     label,
                     busy: false,
@@ -4482,8 +6306,8 @@ window.__ModuleLoader__.load({
           picking: picking || textEdit,
           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), top: tops[ik(base) + '|' + i] },
-            h(Screen, { t, remote,
+          render: (sc, z, i) => h(Device, { kind: items[i].kind, w: items[i].size[0], h: items[i].size[1], label: labelOf(base), top: tops[ik(base) + '|' + i], os: meta.os },
+            h(Screen, { t, remote, onPageDrag: pageDrag,
               src: base.url,
               label: labelOf(base),
               busy,
@@ -4514,12 +6338,12 @@ 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 === 'miniprogram' || kind === 'tablet' ? 60 : 10, transform: `scale(${1 / z})`, transformOrigin: 'top ' + side })
-        const screenOf = (sc) => h(Screen, { t, remote, src: sc.url, label: labelOf(sc), busy: false, born: false, picking: false, dark, zoom: z, reloadSeq,
+        const screenOf = (sc) => h(Screen, { t, remote, onPageDrag: pageDrag, 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), onTop: (dk) => setTop(ik(sc), 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})` } },
             // 胶囊那块露的是哪一边（把手拖过胶囊中间就是左边那一版），胶囊就跟哪一边的顶栏
-            now ? h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(now), top: tops[ik(has && (cx / 100) * size[0] > size[0] - CAP.right - CAP.w / 2 ? old : now)] },
+            now ? h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(now), top: tops[ik(has && (cx / 100) * size[0] > size[0] - CAP.right - CAP.w / 2 ? old : now)], os: meta.os },
               h('div', { className: 'ddp-cmp' + (cmpDrag ? ' drag' : ''), ref: cmpRef },
                 h('div', { className: 'ly' }, has ? screenOf(old) : h('div', { className: 'miss' }, t('notInVer', { n: ver.n }))),
                 // 右边一层只露出把手右边那块：外层裁宽度，里面整屏往左挪（iframe 不变大小、不重排；clip-path 盖 iframe 有的内核画不出来）
@@ -4553,10 +6377,12 @@ window.__ModuleLoader__.load({
         const [dw, dh] = deviceBox(kind, size)
         // 右边开着面板（体检、调样式、设计规范、换风格）：手机这类有外框的让到面板左边（侧栏够宽时），别被挡住
         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 lock = fill && mark && markSize ? markSize : null
+        const z = lock ? Math.max(0.05, Math.min(1, box.w / lock.w, box.h / lock.h)) : 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', 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})` } },
+          h('div', { className: 'ddp-fit' + (fill && !lock ? ' fill' : ''), style: fill && !lock ? undefined : { width: lock ? lock.w : dw, height: lock ? lock.h : dh, transform: `translate(-50%, -50%) scale(${z})` } },
             renderScreen(one, z, fill)))
       }
 
@@ -4600,6 +6426,7 @@ window.__ModuleLoader__.load({
             onClose: () => setPhone(false),
           }) : null,
           hist ? h(HistoryPanel, { t, versions, ver, onPick: (v) => { setVer(v); if (!v) setCmp(false) }, onClose: () => setHist(false) }) : null,
+          mark && !markOff ? h(MarkLayer, { t, sending: markBusy, frames: markFrames, onCancel: () => { markRun.current++; setMark(false) }, onSend: sendMark, onCopy: canCopyImage() ? copyMark : null }) : null,
           demo ? h('div', { className: 'ddp-banner' },
             h(I.play),
             h('span', null, t('demoOn') + ' · ' + ((infoOf(demoKey) || {}).title || demoKey.replace(/\.html?$/i, ''))),
@@ -4613,7 +6440,7 @@ window.__ModuleLoader__.load({
             h('button', { className: 'ddp-go pri', onClick: doRestore }, t('restore')),
             h('button', { className: 'ddp-btn', title: t('backNow'), onClick: () => { setVer(null); setCmp(false) } }, h(I.close))) : null,
           chip,
-          toast ? h('div', { className: 'ddp-toast' + (ver || demo || hintText ? ' low' : '') }, h('span', null, toast.text),
+          toast ? h('div', { className: 'ddp-toast' + (mark ? ' mk' : ver || demo || hintText ? ' low' : '') }, h('span', null, toast.text),
             toast.act ? h('button', { onClick: () => { toast.act.run(); setToast('') } }, toast.act.label) : null) : null))
     }
 
@@ -4644,7 +6471,7 @@ window.__ModuleLoader__.load({
     // ── 注册 ─────────────────────────────────────────────────────────────────
 
     function apply(ctx) {
-      ensureStyle()
+      try { ctx.effect(() => ensureStyle(), 'dsh-design-studio: styles') } catch (e) { console.warn('[dsh-design-studio] styles', e) }
       const t = makeT(ctx)
       try { ctx.effect(() => ctx.locale.register(NS, { zh: ZH, en: EN }), 'dsh-design-studio: copy') } catch (e) { console.warn('[dsh-design-studio] locale', e) }
 
@@ -4675,6 +6502,46 @@ window.__ModuleLoader__.load({
         inject: (sessionId) => ({ sid: sessionId, t }),
       }, PreviewTab)), 'dsh-design-studio: tab body')
 
+      // 点选标签（DSH 0.2.1 起有这些服务；没有就不注册，点选照旧插字）
+      if (typeof ctx.inject === 'function') ctx.inject(['sessions', 'inputTriggers'], (scope) => {
+        if (!scope.inputTriggers || typeof scope.inputTriggers.registerSource !== 'function') return
+        // 每种图标一个来源（输入框里的标签只带来源名，图标靠它分）；@ 菜单里不出东西
+        for (const i of Object.keys(CHIP_ICON)) {
+          scope.effect(() => scope.inputTriggers.registerSource({
+            trigger: '@',
+            name: chipSrc(i),
+            order: 1000,
+            showGroupTitle: false,
+            candidates: async () => [],
+            onPick: () => undefined,
+            // 标签存的就是整段字：复制出来是它，发给模型也是它（前后空一行，和用户的话分开）
+            codec: { clipboardText: pickClip, serialize: async (ref) => pickClip(ref) },
+          }), `dsh-design-studio: chips (${i})`)
+        }
+        scope.effect(() => {
+          chips = {
+            insert(sid, text, label, span, source) {
+              const b = scope.sessions && typeof scope.sessions.binding === 'function' ? scope.sessions.binding(sid) : null
+              const actx = b && b.ctx
+              if (!actx || !span || !label) return false
+              return actx.bail(actx, 'slash/input-insert-reference', { reference: { source: source || PICK_SRC, ref: text, label, clipboardText: pickClip(text) }, span }) === true
+            },
+          }
+          return () => { chips = null }
+        }, 'dsh-design-studio: chip insert')
+      })
+      if (typeof ctx.inject === 'function') ctx.inject(['uiConversation'], (scope) => {
+        const ut = scope.uiConversation && scope.uiConversation.userText
+        if (!ut || typeof ut.register !== 'function') return
+        scope.effect(() => ut.register(pickRule), 'dsh-design-studio: chips in messages')
+        scope.effect(() => pickCard(t), 'dsh-design-studio: chip card')
+      })
+      ctx.effect(() => ctx.slots.inject('conversation.user.text.node', () => ctx.slots.register({
+        name: 'conversation.user.text.node',
+        key: 'ddp-pick',
+        priority: 100,
+      }, ({ node }) => { const c = chipOf(node.data.text, t); return h('span', { className: 'ddp-pickpill', 'data-pick': node.data.text, 'data-i': c ? c.i : 'pick' }, h('span', null, c ? c.label : t('chipOne'))) })), 'dsh-design-studio: chips in messages')
+
       ctx.effect(() => ctx.slots.inject('conversation.session.header.utilities', () => ctx.slots.register({
         name: 'conversation.session.header.utilities',
         id: 'dsh-design-studio',
@@ -4688,7 +6555,7 @@ window.__ModuleLoader__.load({
     // 注意：这里是客户端**服务名**（短的），不是包名
     exports.inject = INJECT
     // 测试用
-    exports._test = { STYLES, formatStyle, accentUse, padInsert, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, flowMarks, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
+    exports._test = { dragKind, droppedOf, pickInfo, pickLabel, pickRanges, pickRule, chipOf, chipRanges, makeT, ZH, EN, formatCheck, formatTweaks, markHit, markPath, STYLES, formatStyle, accentUse, styleLook, padInsert, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, flowMarks, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
     return module.exports
   },
 })