dsh-design-studio 0.11.0 → 0.13.0

package/lib/client.js

@@ -1,7 +1,7 @@
 /**
  * dsh-design-studio 的客户端部分
  *
- *   右侧栏标签页「设计工作台」（sidebarRightTabs + sidebar.right.pane.tab）
+ *   右侧栏标签页「设计台」（sidebarRightTabs + sidebar.right.pane.tab）
  *     - 工具栏：地址（点一下能改）、选择、画布 / 单页、类型（网页 / App / 平板 / 海报 / 幻灯片 / 邮件）、刷新、在浏览器打开
  *     - 画布：同一个目录里的几屏按生成顺序排成网格，套上对应的外框（手机、浏览器窗口 …），能拖、能缩放；
  *       模型还在出新的一屏时，末尾留一个「生成中…」的占位
@@ -40,13 +40,47 @@ window.__ModuleLoader__.load({
     const API = '/dsh-design-studio/api/'
 
     const ZH = {
-      title: '设计工作台',
-      guideDesc: '实时看页面，点选要改的地方',
+      title: '设计台',
+      tabTitle: '设计台',
+      guideDesc: '做网页、App、海报，点哪改哪，还能转成代码',
       blockedLink: '已拦下外链：{href}（设计库来的设计不跳到别的网站）',
       blockedDownload: '已拦下下载（设计库来的设计不能下载文件）',
       empty: '还没有要预览的页面',
-      emptyHint: '也可以直接输入 HTML 文件路径或端口：',
-      emptyHintPick: '已有 HTML？点「浏览…」选一个，或直接拖进来；也能输入路径或端口：',
+      emptyHead: '想做点什么？',
+      emptySub: '说一句，设计会一屏一屏出现在画布上；点哪改哪，做完直接转成代码。',
+      homeTab: '开始',
+      askPh: '比如：{ex}',
+      askTab: '用这句',
+      exAuto: '巷口面馆的点单小程序，三屏，暖色手作风',
+      exWeb: '独立咖啡馆的官网首页：招牌豆子、门店地图、在线预订',
+      exApp: '社区健身房的会员 App：约课、打卡、会员卡',
+      exMini: '巷口面馆的点单小程序：菜单、购物车、取餐号',
+      exTablet: '幼儿园老师用的平板 App：点名、课表、家长消息',
+      exDesktop: '小团队记账的桌面软件：流水、报表、设置',
+      exPoster: '周末城市夜跑活动的海报，清爽运动风',
+      exSlides: '新品发布会的五页幻灯片：问题、方案、数字、价格、下一步',
+      exEmail: '会员生日月的优惠邮件：一张大图、一段祝福、一个按钮',
+      askKindLine: '类型：{k}',
+      askMore: '更多开始方式',
+      askMoreD: '打开已有的 HTML、用自己的品牌、从设计库打开',
+      askOpenHtml: '打开已有的 HTML…',
+      askBrand: '用自己的品牌',
+      askLib: '从设计库打开',
+      askRef: '参考图',
+      askRefD: '照一张截图或设计稿做：选一张，也能直接拖进来、粘贴',
+      askStyleAuto: '风格：自动',
+      askStyle: '风格：{name}',
+      askStyleD: '先定个风格；不选就按题材自动挑一个',
+      askStylePick: '挑个风格',
+      askStyleAutoBtn: '自动（按题材挑）',
+      askSend: '开始设计',
+      askSent: '发出去了，第一屏马上出来',
+      homeRecent: '接着做',
+      homeRecentAll: '全部作品 →',
+      waysHtml: '打开已有的 HTML',
+      moreWays: '其他开始方式',
+      emptyHint: '输入文件路径，或本地端口（比如 5173）',
+      emptyHintPick: '点「浏览…」选一个、直接拖进来，或输入文件路径 / 本地端口（比如 5173）',
       browse: '浏览…',
       browseTip: '选一个本地 HTML 文件打开',
       pathNone: '拿不到这个文件的路径，请直接输入它的路径打开',
@@ -96,7 +130,7 @@ window.__ModuleLoader__.load({
       refPick: '照参考图改风格…',
       refChoose: '选一张',
       refPickTip: '选一张参考图，照它的风格改（也可以把图片拖进预览区，或在这里粘贴）',
-      refEmpty: '有参考图？拖进来或粘贴，照它的风格做',
+      refEmpty: '照参考图做：拖进来、粘贴，或',
       refDrop: '松开，作为参考图',
       refDropSub: '存进设计目录的 refs/，提取配色放进输入框',
       refNotImage: '只认图片（PNG / JPG / WebP / GIF）',
@@ -142,9 +176,10 @@ window.__ModuleLoader__.load({
       gShadow: '阴影',
       gOther: '其他',
       exportT: '导出',
-      exFrame: '这一屏 · 带外框',
-      exRaw: '这一屏 · 纯画面',
-      exLong: '这一屏 · 整页长图',
+      exFrame: '{name} · 带外框',
+      exRaw: '{name} · 纯画面',
+      exLong: '{name} · 整页长图',
+      exThisName: '这一屏',
       exShow: '整套展示图',
       exPdf: 'PDF · 每屏一页',
       exPptx: 'PPT · 每屏一页（整页图片）',
@@ -155,7 +190,8 @@ window.__ModuleLoader__.load({
       checking: '正在体检…',
       checkNone: '没发现问题',
       checkSum: '{s} 屏 · {n} 个问题',
-      checkFix: '交给模型修',
+      checkFix: '发到对话',
+      checkFixTip: '把这些问题发到对话，让模型修',
       checkAgain: '再查一次',
       checkFail: '没查成：{msg}',
       checkNote: '只量得出排版上的硬伤，好不好看还得你看',
@@ -164,7 +200,7 @@ window.__ModuleLoader__.load({
       checkTail: '请逐个修好：改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量。',
       ckToolHead: '量了 {s} 屏，发现 {n} 个问题。逐个改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量：',
       ckToolOk: '量了 {s} 屏（{labels}），没发现问题。',
-      ckToolOff: '用户正在看旧版本、演示或多尺寸，右侧栏现在量不了；过一会儿再调，或照「自查」清单自己过一遍。',
+      ckToolOff: '用户正在看旧版本、试用或多尺寸，右侧栏现在量不了；过一会儿再调，或照「自查」清单自己过一遍。',
       ckToolErr: '{label}：没量成（{msg}）',
       ck_hscroll: '超出屏幕',
       ck_clipped: '文字被截断',
@@ -232,7 +268,7 @@ window.__ModuleLoader__.load({
       exportedCopied: '已导出 {name}，也复制到剪贴板了',
       exportFail: '导出失败：{msg}',
       reveal: '打开文件夹',
-      madeWith: '用 DSH 设计工作台做的',
+      madeWith: '用 DSH 设计台做的',
       showSub: '{n} 屏 · {kind} · {date}',
       history: '版本',
       histTip: '每轮对话前后各存一版。点一版看当时的样子，还能和现在左右对比',
@@ -254,19 +290,21 @@ window.__ModuleLoader__.load({
       cmpNow: '现在',
       dark: '深色模式',
       variants: '再出两版',
-      pickThis: '就要这个：其他版本挪进 drafts/，接着做全套',
-      pickShort: '就要这个',
+      pickThis: '用这版：其他版本挪进 drafts/，接着做全套',
+      pickShort: '用这版',
+      takeN: '第 {l} 版',
       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（原版：{where}），会紧挨着原版排在画布上。原版和 tokens.css 别动；新版要换配色就在自己文件里覆盖变量。\n',
       exThis: '导出这一屏',
-      demo: '演示：点页面里的按钮跳到别的屏',
-      demoOn: '演示中 · 点按钮跳转',
+      demo: '试用：点页面里的按钮跳到别的屏',
+      demoOn: '试用中',
+      demoHow: '点按钮跳屏',
       demoBack: '返回上一屏',
       demoRestart: '从头开始',
-      demoExit: '退出演示（Esc）',
+      demoExit: '退出试用',
       textEdit: '改字：点页面里的文字直接改，回车保存（Esc 退出）',
-      mark: '画笔标注：在页面上画圈、箭头、写字，拼成一张图交给模型',
+      mark: '画笔标注：在页面上画圈、箭头、写字，拼成一张图发到对话',
       mkPen: '画笔',
       mkHl: '荧光笔',
       mkArrow: '箭头',
@@ -279,7 +317,7 @@ window.__ModuleLoader__.load({
       mkUndo: '撤销',
       mkRedo: '重做',
       mkClear: '全部清掉',
-      mkHint: '在页面上画，画完点「交给模型」',
+      mkHint: '在页面上画，画完点「发到对话」',
       mkHow_pen: '按住拖动，随手画',
       mkHow_hl: '按住拖过去，把要改的地方涂亮',
       mkHow_arrow: '从起点按住，拖到要指的地方',
@@ -290,13 +328,13 @@ window.__ModuleLoader__.load({
       mkCoach: '直接在页面上画',
       mkCoach1: '上面挑个工具：画笔、箭头、圆圈、文字…',
       mkCoach2: '在页面上按住拖动，画出要改的地方',
-      mkCoach3: '画完点「交给模型」，再补一句要怎么改',
+      mkCoach3: '画完点「发到对话」，再补一句要怎么改',
       mkCancel: '取消',
-      mkSend: '交给模型',
+      mkSend: '发到对话',
       mkCopy: '复制',
       mkCopyTip: '把标注图复制到剪贴板，贴到别的地方用',
       mkCopied: '标注图复制好了，贴到别处就行',
-      mkCopyFail: '没能复制到剪贴板，再点一次「复制」，或者「交给模型」',
+      mkCopyFail: '没能复制到剪贴板，再点一次「复制」，或者「发到对话」',
       mkSending: '正在拼图…',
       mkTextPh: '写点什么，回车完成',
       mkEmpty: '还没画东西',
@@ -307,14 +345,14 @@ window.__ModuleLoader__.load({
       mkIn: '标注图放进输入框了，补一句要怎么改再发',
       mkMany: '画到的屏太多，只拼了前 {n} 屏，其余留成灰块',
       mkMoved: '设计换了，这次标注没交出去',
-      mkNoInput: '没能放进输入框，点一下聊天输入框再点「交给模型」',
-      textSaved: '已改好，写回 {file}',
+      mkNoInput: '没能放进输入框，点一下聊天输入框再点「发到对话」',
+      textSaved: '已改好，保存到 {file}',
       textAsk: '把页面上的「{before}」改成「{after}」（{where}；只改这一处文字，别的不动）。\n',
       styleEdit: '调样式：点页面里的元素，拖滑块改字号、颜色、圆角、间距（Esc 退出）',
       styleAny: '点任意一屏里的元素调样式 · Esc 退出',
       styleOne: '点页面里的元素调样式 · Esc 退出',
       style: '调样式',
-      styleNone: '在页面上点一个元素。改的时候页面上先看效果，满意了再写回文件。',
+      styleNone: '在页面上点一个元素。改的时候页面上先看效果，满意了再保存。',
       styleFont: '字号',
       styleWeight: '字重',
       styleColor: '文字',
@@ -331,14 +369,14 @@ window.__ModuleLoader__.load({
       styleVar: '设计变量 {name}',
       styleGradient: '现在是渐变，选一个颜色会换成纯色',
       styleReset: '还原',
-      styleAsk: '交给模型',
-      styleSave: '写回文件',
+      styleAsk: '发到对话',
+      styleSave: '直接保存',
       styleSaveTip: '写进这个元素在源码里的 style 属性（改前改后各存一版）',
       styleAskTip: '让模型改进样式表（能用设计变量就用）',
-      styleNoWrite: '开发服务器的页面不在这里写回，交给模型改',
-      styleBusyTip: '模型在干活，等它停了再写回',
-      styleSaved: '样式已写回 {file}',
-      styleMiss: '源码里没找到这个元素（可能是脚本生成的），改成交给模型',
+      styleNoWrite: '开发服务器的页面不能直接保存，发到对话让模型改',
+      styleBusyTip: '模型在干活，等它停了再保存',
+      styleSaved: '样式已保存到 {file}',
+      styleMiss: '源码里没找到这个元素（可能是脚本生成的），改成发到对话',
       styleN: '改了 {n} 项',
       styleAskText: '〔调样式〕{name}（{sel}）：{list}。{rules}把这些写进它的样式规则（{where}；能用设计变量就用设计变量），别写成行内 style。\n',
       ruleFrom: '- {props}：现在由 {sel} 决定（{at}）',
@@ -349,11 +387,13 @@ window.__ModuleLoader__.load({
       styleArrow: '{prop} {from} → {to}',
       styleJoin: '；',
       lang: 'zh',
-      stylesHead: '先挑一个风格开工',
-      stylesTip: '点一个看样板，满意了点「用这个风格」，整套配色、字体、圆角放进输入框；再写要做什么',
+      stylesHead: '或者先挑个风格',
+      stylesTip: '点开看样板，满意了点「用这个风格」，再说要做什么',
+      stylesMore: '更多风格（{n}）',
+      stylesLess: '收起',
       stylesOpen: '换个风格…',
       stylesTitle: '换个风格',
-      stylesSwap: '点一个看样板；「用这个风格」让模型把现在的设计换成它（先改 tokens.css，布局和文案不动）',
+      stylesSwap: '点一个看样板；「用这个风格」让模型把现在的设计换成它（只换配色、字体、圆角，布局和文字不动）',
       stylesAll: '全部风格',
       stylePrev: '上一个（←）',
       styleNext: '下一个（→）',
@@ -379,6 +419,7 @@ window.__ModuleLoader__.load({
       styleFonts: '标题 {head}；正文 {body}',
       styleShape: '圆角 {r}px；阴影 {s}',
       styleStart: '照这个风格来做（先把这些定进 tokens.css；不用再问想要什么感觉）：',
+      styleAuto: '这张风格卡是首页按题材自动挑的，不是我选的：直接做全套就照它的配色和字体来（定进 tokens.css）；要先出三个方向，就让方向 A 用它、B 和 C 从风格卡里另挑两种不同的感觉。我在话里另说了风格、或者有默认的品牌设计系统，就以那个为准：',
       styleRestyle: '把现在的设计换成这个风格：先改 tokens.css（配色、字体、圆角、阴影），各屏跟着变；页面里写死的颜色也换成变量；布局和文案先不动。\n',
       demoNone: '这一屏还没有跳到别的屏的按钮；可以让模型用 <a href="detail.html"> 把几屏串起来',
       phone: '在手机上看',
@@ -396,29 +437,111 @@ window.__ModuleLoader__.load({
       phoneAuto: '只有扫了这个码的手机能打开，30 分钟没人看自动关。',
       phoneNoLan: '电脑没连上 Wi-Fi 或有线网，手机连不过来。',
       phoneFail: '没打开：{msg}',
-      phoneHelp: '打不开？确认在同一个 Wi-Fi；手机开着代理 / VPN 的先关掉；电脑问「是否允许传入连接」时点允许。',
+      phoneHelp: '确认在同一个 Wi-Fi；手机开着代理 / VPN 的先关掉；电脑问「是否允许传入连接」时点允许。',
+      phoneTrouble: '打不开？',
       zoomIn: '放大',
       zoomOut: '缩小',
       fit: '适合画布',
       openScreen: '双击只看这一屏',
-      generating: '生成中…',
+      generating: '设计中…',
       waiting: '模型正在工作，页面写出来就显示在这里',
+      waitingLive: '页面正在一段段写出来，写完就能点着改',
       refresh: '刷新',
       external: '在浏览器里打开',
       more: '更多',
-      demoShort: '演示',
+      demoShort: '试用',
+      // 浮块按钮悬停说明：名字下面这一句
+      dPick: '点一个元素或拖出一块区域，发给模型改',
+      dText: '点页面里的字直接改，回车保存',
+      dStyle: '点一个元素，拖滑块调字号、颜色、圆角和间距',
+      dMark: '画圈、画箭头、写字，拼成一张图发给模型',
+      dPlay: '像真的 App 一样点，按钮会跳到对应的屏',
+      dLib: '存过的设计、风格和模板，也能逛设计市场',
+      dLook: '改配色、字体，或整套换个风格',
+      dCheck: '找出文字溢出、重叠、看不清、按钮太小',
+      dCheckN: '上次找到 {n} 个问题，点开看',
+      dExport: '转成代码、存图片 / PDF / PPT、打包分享',
+      dMore: '版本、在手机上看、刷新、在浏览器里打开',
+      dZoom: '按住 {mod} 滚动也能缩放',
+      dScreen: '换一屏、看全部、多尺寸、换类型',
+      toolsT: '工具',
       editAddr: '换一个地址',
+      textShort: '改字',
+      styleShort: '样式',
+      markShort: '画笔',
+      viewT: '视图',
+      canvasShort: '画布',
+      singleShort: '单页',
+      sizesShort: '多尺寸',
+      look: '外观',
+      lookTip: '外观：配色、字体、整套风格',
+      deliver: '导出',
+      deliverTip: '导出：转成代码、存成图片 / PDF / PPT、打包分享',
+      exFiles: '存成文件',
+      checkShort: '体检',
+      zoomT: '缩放',
+      zoomReal: '实际大小',
+      actX: '导出',
+      actV: '再出两版',
+      actO: '单看',
+      deliverCode: '代码',
+      deliverShare: '分享',
+      screensT: '换一屏 / 打开别的页面',
+      screensHd: '屏幕',
+      screensAll: '全部 {n} 屏',
+      screensN: '{name} · {n} 屏',
+      openOther: '打开别的页面…',
+      phoneOnTip: '手机预览开着',
+      lookSet: '整套',
+      lookStyle: '换风格',
+      lookBrand: '品牌',
+      lookColorTip: '点色块直接改，所有屏一起变',
+      lookTokTip: '点一下放进输入框，跟模型说怎么改',
+      lookTw: '调节滑块',
+      lookTwNone: '还没有专属滑块（留白、圆角、排法……）。',
+      lookN: '改了 {n} 处，还没保存',
+      lookSave: '直接保存',
+      lookSaveTip: '写进设计文件（不经过模型；改前改后各存一版）',
+      lookAskHead: '〔外观〕我在右侧外观面板里把这几个设计变量改成了：',
+      lookAskTail: '照这个改：改 tokens.css（或样式里 :root 上）的默认值，页面里写死的同一种颜色也换成变量。',
+      lookInspire: '灵感库',
+      lookRef: '照参考图做…',
+      el_button: '按钮', el_a: '链接', el_img: '图片', el_h: '标题', el_p: '段落', el_input: '输入框', el_li: '列表项', el_ul: '列表', el_nav: '导航', el_header: '顶栏', el_footer: '底栏', el_text: '文字', el_icon: '图标', el_card: '卡片', el_tag: '标签', el_avatar: '头像', el_box: '区块',
+      tkn_bg: '背景', tkn_surface: '卡片底', tkn_text: '正文字', tkn_muted: '次要字', tkn_line: '分隔线', tkn_primary: '主色', tkn_accent: '强调色', tkn_onPrimary: '主色上的字', tkn_link: '链接', tkn_danger: '警示色', tkn_success: '成功色', tkn_warning: '提醒色',
+      tkn_xs: '注释', tkn_sm: '小字', tkn_md: '中号字', tkn_body: '正文', tkn_lg: '大字', tkn_title: '标题', tkn_display: '大标题',
+      tkn_rSm: '小圆角', tkn_rMd: '中圆角', tkn_rLg: '大圆角', tkn_rFull: '全圆', tkn_r: '圆角',
+      tkn_space: '间距', tkn_gutter: '页边距',
+      tkn_fHead: '标题字体', tkn_fBody: '正文字体', tkn_fMono: '等宽字体',
+      tkn_shadow: '阴影', tkn_light: '浅', tkn_dark: '深', tkn_hover: '悬停',
+      phoneOnShort: '开着',
+      sizesNoShort: '固定画幅',
       working: '模型正在工作',
       asking: '模型在等你回答（在对话里）',
       writing: '正在写 {file}',
+      curLayout: '排版',
+      curColor: '配色',
+      curCopy: '文案',
+      stThink: '在想…',
+      stNew: '正在做第 {n} 屏',
+      stEdit: '正在改「{name}」',
+      stWriteAny: '正在改文件',
+      stCheck: '正在体检',
+      stLook: '正在看效果',
+      stPreview: '正在打开预览',
+      stBrand: '正在提取品牌',
+      stCode: '正在转成代码',
+      stCompare: '正在逐像素对比',
+      stShell: '正在跑命令',
+      stRead: '正在看文件',
+      stWeb: '正在查资料',
+      stSkill: '正在看设计规范',
+      stTime: '已用时 {time}',
+      stLines: '已写 {n} 行',
       born: '已生成 {name}',
       updated: '已更新{file}',
       updatedN: '已更新{file} · {n} 处改动',
       updatedWhole: '已更新{file} · 整页重排',
-      step1: '让模型做一个网页、App 界面或海报',
-      step2: '点「选择」，点元素或拖出一块区域',
-      step3: '在输入框补一句要怎么改，发出去',
-      tryHead: '不知道怎么开口？点一句试试',
+      tryHead: '试试这样说',
       try1: '帮我设计一个社区健身房的会员 App',
       try2: '做一个精品咖啡店的落地页',
       try3: '做一张周末市集的活动海报',
@@ -427,7 +550,7 @@ window.__ModuleLoader__.load({
       copied: '已复制，粘贴到输入框里',
       failed: '没放进去：{msg}',
       openFailed: '打不开：{msg}',
-      headerTip: '设计工作台',
+      headerTip: '设计台',
       tweaks: '调节滑块',
       twTip: '模型给这套设计做的几个维度：拖的时候所有屏一起变，还没写进文件。',
       twEmpty: '这套设计还没有专属滑块。让模型挑几个最值得试的维度（留白、圆角、主色、排法……），做成滑块放在这里。',
@@ -439,15 +562,16 @@ window.__ModuleLoader__.load({
       twAskTail: '照这个改设计（改样式源文件，tweaks.json 里对应的 value 也改成新值）。',
       twAskTip: '让模型照这几个值改设计（可以顺手调整相关的地方）',
       twSaveTip: 'CSS 变量写进 tokens.css 的默认值，属性写到每屏的 <html> 上（改前改后各存一版）',
-      twNoWrite: '开发服务器的页面不能直接写回，交给模型改',
+      twNoWrite: '开发服务器的页面不能直接保存，发到对话让模型改',
+      twVer: '正在看旧版本：回到当前版本再保存',
       twMoved: '设计已经换了，没写回；再拖一次',
-      twSaved: '已写回 {n} 项',
-      twMissed: '{names} 在样式里没找到默认值，没写回：交给模型改',
+      twSaved: '已保存 {n} 项',
+      twMissed: '{names} 在样式里没找到默认值，没保存：发到对话让模型改',
       systems: '品牌设计系统',
       sysOpen: '品牌设计系统…',
-      sysEmptyLine: '有自己的品牌？',
+      sysEmptyLine: '用自己的品牌：',
       sysTip: '从你的网站或项目里提取的颜色、字体、圆角和组件。设为默认后，做新设计都照它来。',
-      sysEmpty: '还没有。在下面填你的网站地址或项目文件夹，让模型提一套。',
+      sysEmpty: '还没有。在上面填你的网站地址或项目文件夹，让模型提一套。',
       sysDefault: '默认',
       sysSet: '设为默认',
       sysUnset: '不再默认',
@@ -461,7 +585,9 @@ window.__ModuleLoader__.load({
       handoff: '转成代码',
       hoTip: '把设计做成真项目的代码：先整理交接说明和截图，再一屏一屏写，每屏写完和设计稿逐像素比，对上了再做下一屏。',
       hoFw: '用什么做',
-      hoSame: '跟现有项目一样（{label}）',
+      hoSame: '跟现有项目一样：{label}',
+      hoIn: '在 {dir} 里',
+      hoEdit: '点一下改路径',
       hoHtml: '纯 HTML / CSS',
       hoUni: 'uni-app（小程序 + 网页版）',
       hoWeapp: '微信原生小程序',
@@ -480,10 +606,16 @@ window.__ModuleLoader__.load({
       // 设计库
       library: '设计库',
       libBack: '回到画布',
+      homeBtn: '首页',
+      dHome: '回首页：新做一套、接着做别的、逛设计库',
+      homeBack: '回到「{name}」',
+      askNewLine: '（另起一套新设计，放新文件夹里，别改现在这套）',
+      askNewNote: '新做一套，现在这套不会被改',
+      wkHere: '正在看',
       libMarket: '市场',
       libWorks: '我的作品',
       libInspire: '灵感',
-      libLine: '以前做的设计、存下的灵感、朋友给的设计包',
+      libLine: '以前做的设计、存下的灵感、朋友给的设计包：',
       libOpen: '打开设计库',
       libClose: '返回',
       libFail: '没办成：{msg}',
@@ -497,7 +629,10 @@ window.__ModuleLoader__.load({
       mkOffline: '连不上市场，下面是上次看到的。',
       mkOff: '「设计库不联网」开着：不访问任何网址，只显示下载过的。要联网，去「插件」页关掉「设计库不联网」。',
       mkNeedUpdate: '市场里有新东西要新版设计台才能看：去「插件」页点「更新」。',
-      mkAt: '目录 {ago} 取的',
+      mkAt: '目录更新于 {ago}',
+      mkUse0: '可商用',
+      mkUseBY: '可商用 · 要署名',
+      mkSortT: '排序',
       mkSeedNote: '这是设计台自带的一批',
       mkRefresh: '刷新',
       mkTypeTpl: '模板',
@@ -554,6 +689,9 @@ window.__ModuleLoader__.load({
       wkNow: '正在看',
       wkOpen: '打开',
       wkReveal: '在文件夹里显示',
+      wkRevealShort: '文件夹',
+      wkZipShort: 'zip',
+      wkShareShort: '分享',
       wkPin: '置顶',
       wkUnpin: '取消置顶',
       wkZip: '打成 zip',
@@ -572,7 +710,7 @@ window.__ModuleLoader__.load({
       agoHour: '{n} 小时前',
       agoDay: '{n} 天前',
       inMyStyles: '我的风格',
-      inSaveStyle: '把当前设计存成风格',
+      inSaveStyle: '存当前设计',
       inSaveStyleTip: '存下现在这套的配色、字体、圆角，以后做新设计一键用',
       inStyleSaved: '已存成风格「{name}」',
       inStyleNone: '这套设计没用设计变量（tokens.css），存不了风格',
@@ -644,7 +782,8 @@ window.__ModuleLoader__.load({
       exZip: '打成 zip（发给朋友）',
       exShare: '分享到设计市场',
       shTitle: '分享到设计市场',
-      shTip: '交上去的东西是公开的：别人能看、能拿去用。先查一遍，过了打成 zip，再到 GitHub 上交（要有 GitHub 账号）。',
+      shGh: '投稿要有 GitHub 账号',
+      shTip: '交上去的东西是公开的：别人能看、能拿去用。先查一遍，过了打成 zip，再到 GitHub 上交。',
       shName: '名字',
       shDesc: '一句话介绍',
       shDescPh: '比如：街角茶饮店的三屏点单 App',
@@ -653,7 +792,7 @@ window.__ModuleLoader__.load({
       shAgreePrivate: '里面没有真实的个人信息（手机号、邮箱、证件号、地址、真人照片）',
       shAgreeRules: '同意按选的授权公开；上架后随时能撤，但别人已经复制走的收不回',
       shBYNote: 'CC BY 的署名就是你的 GitHub 用户名。',
-      shGo: '检查并打包',
+      shGo: '检查并投稿',
       shChecking: '在查…',
       shOk: '查过了，打好了：{name}（在「下载」里）',
       shSteps: '还差三步：',
@@ -673,10 +812,44 @@ window.__ModuleLoader__.load({
       title: 'Design Studio',
       blockedLink: 'Blocked an outside link: {href} (designs from the gallery cannot leave the page)',
       blockedDownload: 'Blocked a download (designs from the gallery cannot download files)',
-      guideDesc: 'Live page, pick what to change',
+      tabTitle: 'Design',
+      guideDesc: 'Design pages, apps and posters; click to change, then turn into code',
       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:',
+      emptyHead: 'What do you want to make?',
+      emptySub: 'Describe it in a sentence. Screens appear on the canvas one by one; click anything to change it, then turn it into code.',
+      homeTab: 'Start',
+      askPh: 'e.g. {ex}',
+      askTab: 'use this',
+      exAuto: 'An ordering mini program for a corner noodle shop, 3 screens, warm hand-made style',
+      exWeb: 'Home page for an independent coffee roaster: signature beans, store map, booking',
+      exApp: 'Member app for a neighborhood gym: classes, check-ins, membership card',
+      exMini: 'Ordering mini program for a noodle shop: menu, cart, pickup number',
+      exTablet: 'Tablet app for kindergarten teachers: roll call, timetable, parent messages',
+      exDesktop: 'Desktop bookkeeping app for a small team: transactions, reports, settings',
+      exPoster: 'Poster for a weekend night run in the city, fresh sporty style',
+      exSlides: 'Five-slide launch deck: problem, solution, numbers, pricing, next steps',
+      exEmail: 'Birthday-month offer email for members: one big image, a short note, one button',
+      askKindLine: 'Type: {k}',
+      askMore: 'More ways to start',
+      askMoreD: 'Open existing HTML, use your own brand, open from the library',
+      askOpenHtml: 'Open existing HTML…',
+      askBrand: 'Use your own brand',
+      askLib: 'Open from the library',
+      askRef: 'Reference',
+      askRefD: 'Design from a screenshot or mockup: pick one, or drop / paste it',
+      askStyleAuto: 'Style: auto',
+      askStyle: 'Style: {name}',
+      askStyleD: 'Pick a style first, or one is picked for the subject',
+      askStylePick: 'Pick a style',
+      askStyleAutoBtn: 'Auto (picked for the subject)',
+      askSend: 'Start designing',
+      askSent: 'Sent. The first screen is on its way',
+      homeRecent: 'Continue',
+      homeRecentAll: 'All designs →',
+      waysHtml: 'Open existing HTML',
+      moreWays: 'Other ways to start',
+      emptyHint: 'Enter a file path or a local port (like 5173)',
+      emptyHintPick: 'Click "Browse…", drop it here, or enter a file path / local port (like 5173)',
       browse: 'Browse…',
       browseTip: 'Pick a local HTML file to open',
       pathNone: "Couldn't get this file's path. Type its path to open it.",
@@ -726,7 +899,7 @@ window.__ModuleLoader__.load({
       refPick: 'Restyle from a reference…',
       refChoose: 'Choose one',
       refPickTip: 'Pick a reference image to restyle after (or drop / paste an image into the preview)',
-      refEmpty: 'Have a reference image? Drop or paste it here to design in its style',
+      refEmpty: 'Design from a reference image: drop it, paste it, or',
       refDrop: 'Drop to use as a reference',
       refDropSub: 'Saved to refs/ in the design folder; its colors go into the input',
       refNotImage: 'Images only (PNG / JPG / WebP / GIF)',
@@ -772,9 +945,10 @@ window.__ModuleLoader__.load({
       gShadow: 'Shadows',
       gOther: 'Other',
       exportT: 'Export',
-      exFrame: 'This screen · in frame',
-      exRaw: 'This screen · plain',
-      exLong: 'This screen · full page',
+      exFrame: '{name} · in frame',
+      exRaw: '{name} · plain',
+      exLong: '{name} · full page',
+      exThisName: 'This screen',
       exShow: 'Showcase of all screens',
       exPdf: 'PDF · one page per screen',
       exPptx: 'PowerPoint · one slide per screen (as images)',
@@ -785,7 +959,8 @@ window.__ModuleLoader__.load({
       checking: 'Checking…',
       checkNone: 'No problems found',
       checkSum: '{s} screens · {n} problems',
-      checkFix: 'Ask the model to fix',
+      checkFix: 'Send to chat',
+      checkFixTip: 'Send these issues to the chat for the model to fix',
       checkAgain: 'Check again',
       checkFail: 'Check failed: {msg}',
       checkNote: 'Only measurable layout problems; whether it looks good is still up to you',
@@ -884,17 +1059,19 @@ window.__ModuleLoader__.load({
       cmpNow: 'Now',
       dark: 'Dark mode',
       variants: 'Two more takes',
-      pickThis: 'Use this one: move the other takes to drafts/ and build the rest',
+      pickThis: 'Use this take: move the other takes to drafts/ and build the rest',
       pickShort: 'Use this',
+      takeN: 'Take {l}',
       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 (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',
+      demoOn: 'Playing',
+      demoHow: 'tap buttons to move',
       demoBack: 'Back',
       demoRestart: 'Start over',
-      demoExit: 'Stop playing (Esc)',
+      demoExit: 'Stop playing',
       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',
@@ -909,7 +1086,7 @@ window.__ModuleLoader__.load({
       mkUndo: 'Undo',
       mkRedo: 'Redo',
       mkClear: 'Clear all',
-      mkHint: 'Draw on the page, then send it to the model',
+      mkHint: 'Draw on the page, then click Send to chat',
       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',
@@ -920,13 +1097,13 @@ window.__ModuleLoader__.load({
       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',
+      mkCoach3: 'Then click "Send to chat" and add a line on what to do',
       mkCancel: 'Cancel',
-      mkSend: 'Send to model',
+      mkSend: 'Send to chat',
       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',
+      mkCopyFail: 'Could not copy to the clipboard. Click Copy again, or Send to chat',
       mkSending: 'Building the image…',
       mkTextPh: 'Type a note, Enter to finish',
       mkEmpty: 'Nothing drawn yet',
@@ -937,7 +1114,7 @@ window.__ModuleLoader__.load({
       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',
+      mkNoInput: 'Could not add it to the input. Click the chat input, then Send to chat again',
       textSaved: 'Saved to {file}',
       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)',
@@ -961,14 +1138,14 @@ window.__ModuleLoader__.load({
       styleVar: 'Token {name}',
       styleGradient: 'It is a gradient now; picking a color makes it solid',
       styleReset: 'Reset',
-      styleAsk: 'Ask the model',
-      styleSave: 'Save to file',
+      styleAsk: 'Send to chat',
+      styleSave: 'Save',
       styleSaveTip: 'Writes into this element\'s style attribute in the source (a version is kept before and after)',
       styleAskTip: 'Let the model move it into the stylesheet (using tokens where it can)',
-      styleNoWrite: 'Dev-server pages are not written here; ask the model',
+      styleNoWrite: 'Dev-server pages cannot be saved here; send it to the chat',
       styleBusyTip: 'The model is working; save when it stops',
       styleSaved: 'Style saved to {file}',
-      styleMiss: 'Could not find this element in the source (maybe a script made it); asking the model instead',
+      styleMiss: 'Could not find this element in the source (maybe a script made it); sending it to the chat instead',
       styleN: '{n} changed',
       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})',
@@ -979,11 +1156,13 @@ window.__ModuleLoader__.load({
       styleArrow: '{prop} {from} → {to}',
       styleJoin: '; ',
       lang: 'en',
-      stylesHead: 'Start from a style',
-      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',
+      stylesHead: 'Or pick a style first',
+      stylesTip: 'Open one to preview, click "Use this style", then say what to make',
+      stylesMore: 'More styles ({n})',
+      stylesLess: 'Show less',
       stylesOpen: 'Try another style…',
       stylesTitle: 'Change the style',
-      stylesSwap: 'Pick one to see a sample; "Use this style" has the model restyle 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 (colors, fonts and corners only; layout and copy stay)',
       stylesAll: 'All styles',
       stylePrev: 'Previous (←)',
       styleNext: 'Next (→)',
@@ -1009,6 +1188,7 @@ window.__ModuleLoader__.load({
       styleFonts: 'headings {head}; body {body}',
       styleShape: 'radius {r}px; shadow {s}',
       styleStart: 'Design in this style (put these into tokens.css first; no need to ask about the feel again):',
+      styleAuto: 'Home picked this style card for the subject; I did not choose it. If you build the full set right away, use its colors and fonts (put them into tokens.css); if you start with three directions, make direction A in this style and pick two different feels from the style cards for B and C. If my message names another style, or there is a default brand design system, follow that instead:',
       styleRestyle: 'Restyle the current design to this: update tokens.css first (colors, fonts, radius, shadows) so every screen follows; replace hard-coded colors in the pages with tokens; keep layout and copy for now.\n',
       demoNone: 'This screen has no links to other screens yet. Ask the model to connect screens with <a href="detail.html">',
       phone: 'View on phone',
@@ -1026,29 +1206,110 @@ window.__ModuleLoader__.load({
       phoneAuto: 'Only a phone that scanned this code can open it. Closes after 30 minutes idle.',
       phoneNoLan: 'This computer is not on Wi-Fi or a wired network, so a phone cannot reach it.',
       phoneFail: 'Could not start: {msg}',
-      phoneHelp: "Won't open? Check both are on the same Wi-Fi, turn off any VPN or proxy on the phone, and allow incoming connections if your computer asks.",
+      phoneHelp: 'Check both are on the same Wi-Fi, turn off any VPN or proxy on the phone, and allow incoming connections if your computer asks.',
+      phoneTrouble: "Won't open?",
       zoomIn: 'Zoom in',
       zoomOut: 'Zoom out',
       fit: 'Fit',
       openScreen: 'Double-click to view this screen alone',
-      generating: 'Generating…',
+      generating: 'Designing…',
       waiting: 'The model is working. The page shows up here once it is written',
+      waitingLive: 'The page is being written piece by piece—click to edit once it’s done',
       refresh: 'Reload',
       external: 'Open in browser',
       more: 'More',
       demoShort: 'Play',
+      dPick: 'Click an element or drag a region to send it to the model',
+      dText: 'Click any text in the page and type, Enter to save',
+      dStyle: 'Click an element, then drag sliders for size, colors, radius and spacing',
+      dMark: 'Draw circles, arrows and notes, sent to the model as one image',
+      dPlay: 'Click through it like a real app; buttons jump to their screens',
+      dLib: 'Saved designs, styles and templates, plus the design market',
+      dLook: 'Change colors and fonts, or switch the whole style',
+      dCheck: 'Find overflowing or overlapping text, low contrast and tiny tap targets',
+      dCheckN: '{n} problems last time. Click to see them',
+      dExport: 'Build as code, save images / PDF / PPT, or pack and share',
+      dMore: 'Versions, view on phone, refresh, open in browser',
+      dZoom: 'Hold {mod} and scroll to zoom too',
+      dScreen: 'Switch screens, see all, sizes or type',
+      toolsT: 'Tools',
       editAddr: 'Change address',
+      textShort: 'Text',
+      styleShort: 'Style',
+      markShort: 'Draw',
+      viewT: 'View',
+      canvasShort: 'Canvas',
+      singleShort: 'Single',
+      sizesShort: 'Sizes',
+      look: 'Look',
+      lookTip: 'Look: colors, fonts and overall style',
+      deliver: 'Export',
+      deliverTip: 'Export: build as code, save images / PDF / PPT, pack and share',
+      exFiles: 'Save as file',
+      checkShort: 'Check',
+      zoomT: 'Zoom',
+      zoomReal: 'Actual size',
+      actX: 'Export',
+      actV: 'More takes',
+      actO: 'Open',
+      deliverCode: 'Code',
+      deliverShare: 'Share',
+      screensT: 'Switch screen / open another page',
+      screensHd: 'Screens',
+      screensAll: 'All {n}',
+      screensN: '{name} · {n} screens',
+      openOther: 'Open another page…',
+      phoneOnTip: 'Phone preview is on',
+      lookSet: 'Overall',
+      lookStyle: 'Restyle',
+      lookBrand: 'Brand',
+      lookColorTip: 'Click a swatch to change it; every screen follows',
+      lookTokTip: 'Click to put it in the input, then tell the model how to change it',
+      lookTw: 'Tweaks',
+      lookTwNone: 'No tweaks for this design yet (spacing, corners, layout…).',
+      lookN: '{n} change(s), not saved',
+      lookSave: 'Save',
+      lookSaveTip: 'Write into the design files (no model; a version is kept before and after)',
+      lookAskHead: '[Look] I changed these design tokens in the Look panel:',
+      lookAskTail: 'Make it so: change the defaults in tokens.css (or :root in the styles), and replace hard-coded copies of the same colors with the tokens.',
+      lookInspire: 'Inspiration',
+      lookRef: 'From a reference image…',
+      el_button: 'Button', el_a: 'Link', el_img: 'Image', el_h: 'Heading', el_p: 'Paragraph', el_input: 'Input', el_li: 'List item', el_ul: 'List', el_nav: 'Nav', el_header: 'Header', el_footer: 'Footer', el_text: 'Text', el_icon: 'Icon', el_card: 'Card', el_tag: 'Tag', el_avatar: 'Avatar', el_box: 'Block',
+      tkn_bg: 'Background', tkn_surface: 'Card', tkn_text: 'Text', tkn_muted: 'Muted text', tkn_line: 'Divider', tkn_primary: 'Primary', tkn_accent: 'Accent', tkn_onPrimary: 'Text on primary', tkn_link: 'Link', tkn_danger: 'Danger', tkn_success: 'Success', tkn_warning: 'Warning',
+      tkn_xs: 'Caption', tkn_sm: 'Small', tkn_md: 'Medium', tkn_body: 'Body', tkn_lg: 'Large', tkn_title: 'Title', tkn_display: 'Display',
+      tkn_rSm: 'Small corners', tkn_rMd: 'Medium corners', tkn_rLg: 'Large corners', tkn_rFull: 'Pill', tkn_r: 'Corners',
+      tkn_space: 'Spacing', tkn_gutter: 'Page margin',
+      tkn_fHead: 'Heading font', tkn_fBody: 'Body font', tkn_fMono: 'Mono font',
+      tkn_shadow: 'Shadow', tkn_light: 'light', tkn_dark: 'dark', tkn_hover: 'hover',
+      phoneOnShort: 'On',
+      sizesNoShort: 'Fixed size',
       working: 'The model is working',
       asking: 'The model is waiting for your answer (in the chat)',
       writing: 'Writing {file}',
+      curLayout: 'Layout',
+      curColor: 'Color',
+      curCopy: 'Copy',
+      stThink: 'Thinking…',
+      stNew: 'Designing screen {n}',
+      stEdit: 'Editing "{name}"',
+      stWriteAny: 'Editing files',
+      stCheck: 'Checking the design',
+      stLook: 'Looking at the result',
+      stPreview: 'Opening the preview',
+      stBrand: 'Extracting the brand',
+      stCode: 'Turning it into code',
+      stCompare: 'Comparing pixel by pixel',
+      stShell: 'Running a command',
+      stRead: 'Reading files',
+      stWeb: 'Looking things up',
+      stSkill: 'Reading the design guide',
+      stTime: '{time} elapsed',
+      stLines: '{n} lines so far',
       born: 'Generated {name}',
       updated: 'Updated{file}',
       updatedN: 'Updated{file} · {n} changes',
       updatedWhole: 'Updated{file} · whole page',
-      step1: 'Ask the model for a web page, app screen or poster',
-      step2: 'Click Select, then an element or drag a region',
-      step3: 'Say what to change in the input and send',
-      tryHead: 'Not sure where to start? Try one',
+      tryHead: 'Try saying',
       try1: 'Design a member app for a neighborhood gym',
       try2: 'Make a landing page for a specialty coffee shop',
       try3: 'Make a poster for a weekend street market',
@@ -1069,15 +1330,16 @@ window.__ModuleLoader__.load({
       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',
+      twNoWrite: 'Dev-server pages cannot be saved here. Send it to the chat instead',
+      twVer: 'Viewing an old version. Go back to the current one to save',
       twMoved: 'The design changed, so nothing was written. Try again',
-      twSaved: 'Wrote back {n}',
-      twMissed: 'No default found in the styles for {names}, not written. Ask the model instead',
+      twSaved: 'Saved {n}',
+      twMissed: 'No default found in the styles for {names}, not saved. Send it to the chat instead',
       systems: 'Brand design systems',
       sysOpen: 'Brand design systems…',
-      sysEmptyLine: 'Have your own brand?',
+      sysEmptyLine: 'Use your own brand:',
       sysTip: 'Colors, fonts, radii and components pulled from your site or project. The default one is used for every new design.',
-      sysEmpty: 'None yet. Enter your website or project folder below and let the model extract one.',
+      sysEmpty: 'None yet. Enter your website or project folder above and let the model extract one.',
       sysDefault: 'Default',
       sysSet: 'Make default',
       sysUnset: 'Stop using',
@@ -1091,7 +1353,9 @@ window.__ModuleLoader__.load({
       handoff: 'Build as code',
       hoTip: 'Turn the design into a real project: a handoff note and screenshots first, then one screen at a time, each pixel-compared with the design before moving on.',
       hoFw: 'Build with',
-      hoSame: 'Same as the project ({label})',
+      hoSame: 'Same as the project: {label}',
+      hoIn: 'in {dir}',
+      hoEdit: 'Click to edit the path',
       hoHtml: 'Plain HTML / CSS',
       hoUni: 'uni-app (mini program + H5)',
       hoWeapp: 'WeChat native mini program',
@@ -1109,10 +1373,16 @@ window.__ModuleLoader__.load({
       hoCheckAny: 'After each screen, check it the way HANDOFF.md says (compare_design until the difference is under 3% when it runs in a browser; for a native mini program, ask the user to check it in WeChat DevTools), then move on. ',
       library: 'Library',
       libBack: 'Back to canvas',
+      homeBtn: 'Home',
+      dHome: 'Go home: start a new design, pick up another one, browse the library',
+      homeBack: 'Back to "{name}"',
+      askNewLine: '(Start a new design in a new folder; leave the current one as is.)',
+      askNewNote: 'This starts a new design; the current one stays as is',
+      wkHere: 'Open now',
       libMarket: 'Gallery',
       libWorks: 'My designs',
       libInspire: 'Inspiration',
-      libLine: 'Past designs, saved inspiration, design packs from friends',
+      libLine: 'Past designs, saved inspiration, design packs from friends:',
       libOpen: 'Open the library',
       libClose: 'Back',
       libFail: 'That did not work: {msg}',
@@ -1126,7 +1396,10 @@ window.__ModuleLoader__.load({
       mkOffline: 'Cannot reach the gallery; showing what you saw last time.',
       mkOff: '“Design library offline” is on: no network is used and only downloaded designs are shown. Turn it off in the Plugins page to go online.',
       mkNeedUpdate: 'Some gallery items need a newer Design Studio: click Update on the Plugins page.',
-      mkAt: 'Catalog fetched {ago}',
+      mkAt: 'Catalog updated {ago}',
+      mkUse0: 'Free to use',
+      mkUseBY: 'Free to use · credit',
+      mkSortT: 'Sort',
       mkSeedNote: 'This is the set bundled with the studio',
       mkRefresh: 'Refresh',
       mkTypeTpl: 'Templates',
@@ -1183,6 +1456,9 @@ window.__ModuleLoader__.load({
       wkNow: 'Open now',
       wkOpen: 'Open',
       wkReveal: 'Show in folder',
+      wkRevealShort: 'Folder',
+      wkZipShort: 'Zip',
+      wkShareShort: 'Share',
       wkPin: 'Pin',
       wkUnpin: 'Unpin',
       wkZip: 'Save as zip',
@@ -1201,7 +1477,7 @@ window.__ModuleLoader__.load({
       agoHour: '{n} h ago',
       agoDay: '{n} d ago',
       inMyStyles: 'My styles',
-      inSaveStyle: 'Save this design as a style',
+      inSaveStyle: 'Save current',
       inSaveStyleTip: 'Keep its colors, fonts and corners to reuse in one click',
       inStyleSaved: 'Saved as style "{name}"',
       inStyleNone: 'This design has no design tokens (tokens.css), so there is no style to save',
@@ -1273,7 +1549,8 @@ window.__ModuleLoader__.load({
       exZip: 'Save as zip (to send)',
       exShare: 'Share to the gallery',
       shTitle: 'Share to the gallery',
-      shTip: 'What you share is public: anyone can see and reuse it. It is checked first, saved as a zip, then you submit it on GitHub (a GitHub account is needed).',
+      shGh: 'You need a GitHub account to submit',
+      shTip: 'What you share is public: anyone can see and reuse it. It is checked first, saved as a zip, then you submit it on GitHub.',
       shName: 'Name',
       shDesc: 'One-line description',
       shDescPh: 'e.g. A three-screen ordering app for a corner tea shop',
@@ -1282,7 +1559,7 @@ window.__ModuleLoader__.load({
       shAgreePrivate: 'It contains no real personal data (phone, email, ID numbers, address, photos of real people)',
       shAgreeRules: 'I agree to publish it under the chosen license; it can be taken down any time, but copies others already made stay',
       shBYNote: 'For CC BY, the credit is your GitHub username.',
-      shGo: 'Check and save',
+      shGo: 'Check and submit',
       shChecking: 'Checking…',
       shOk: 'Checked and saved: {name} (in Downloads)',
       shSteps: 'Three more steps:',
@@ -1315,6 +1592,8 @@ window.__ModuleLoader__.load({
     // ── 样式（DSH 设计变量，深浅主题跟着走）──────────────────────────────────
 
     const ACCENT = '#4d6bfe'
+    const TOP_R = 52 // 画布上面一排浮块占的高度：单页、演示、对比让开它，画布排的时候也让开
+    const BOT_R = 64 // 底下一排（工具坞、视图、缩放）占的高度
     const PICK_SRC = 'dsh-design-studio' // 输入框里点选标签的来源名（样式里也用）
     // 输入框里的各种标签：图标按来源名分（DSH 的标签上只带来源名），消息里和悬停卡片按 data-i
     const CHIP_ICON = {
@@ -1335,11 +1614,73 @@ window.__ModuleLoader__.load({
     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}
+/* 浮在画布上的几块：上面一排（左上 设计库 + 屏名，右上 外观 体检 交付 更多）、底部中间工具坞、左下视图和类型、右下缩放 */
+.ddp-isl{position:relative;z-index:9;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:var(--dsw-alias-bg-layer-1);
+  box-shadow:0 6px 20px rgba(0,0,0,.12),0 0 0 .5px var(--dsw-alias-border-l3)}
+.ddp-isl .ddp-btn{height:30px;min-width:30px;border-radius:8px}
+.ddp-isl .ddp-btn svg{width:16px;height:16px}
+.ddp-isl .ddp-btn .cr{width:10px;height:10px}
+.ddp-isl .ddp-sep{height:18px;margin:0 3px}
+.ddp-isl .ddp-menu{top:calc(100% + 8px)}
+.ddp-top{position:absolute;left:10px;right:10px;top:10px;z-index:9;display:flex;align-items:flex-start;gap:8px;pointer-events:none}
+.ddp-top>.ddp-isl{pointer-events:auto}
+.ddp-top>.tl{flex:0 1 auto;min-width:0}
+.ddp-top>.tl.wide{flex:1 1 auto;max-width:560px}
+.ddp-top>.tl.wide .ddp-input{height:30px}
+.ddp-top>.tr{margin-left:auto;flex:none}
+.ddp-isl .ddp-btn.pri{padding:0 8px 0 9px;background:${ACCENT};color:#fff;font-weight:500}
+.ddp-isl .ddp-btn.pri:hover,.ddp-isl .ddp-btn.pri.sel{background:#3d5bf0;color:#fff}
+.ddp-isl .ddp-btn.pri .cr{opacity:.8}
+.ddp-dock{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:4px;gap:2px}
+.ddp-dock .ddp-sep{height:26px}
+/* 悬停说明：深底浅字（跟提示消息一个配色，深色模式自己反过来）；第一行名字 + 快捷键键帽，第二行一句用途
+   说明控制在两行内，text-wrap:pretty 不让一个字单独掉到下一行 */
+.ddp-tipbox{position:absolute;left:0;top:0;z-index:30;display:none;flex-direction:column;gap:3px;width:max-content;max-width:min(228px,calc(100% - 16px));padding:7px 10px 8px;border-radius:9px;
+  background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);font-size:12px;line-height:17px;letter-spacing:.01em;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.2)}
+.ddp-tipbox.on{display:flex;animation:ddp-tip .12s ease}
+.ddp-tipbox .nm{display:flex;align-items:center;gap:10px}
+.ddp-tipbox b{font-weight:600}
+.ddp-tipbox kbd{margin-left:auto;padding:0 5px;border-radius:4px;box-shadow:inset 0 0 0 1px currentColor;font:500 10.5px/16px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.6;white-space:nowrap}
+.ddp-tipbox span{opacity:.72;text-wrap:pretty}
+@keyframes ddp-tip{from{opacity:0}}
+.ddp-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:48px;height:42px;padding:0;border:0;border-radius:8px;background:transparent;
+  color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;line-height:13px;cursor:pointer;flex:none;white-space:nowrap}
+.ddp-tool svg{width:18px;height:18px;flex:none}
+.ddp-tool:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-primary)}
+.ddp-tool.on,.ddp-tool.on:hover:not(:disabled){background:${ACCENT};color:#fff}
+.ddp-tool:disabled{opacity:.4;cursor:default}
+.ddp-isl .ddp-btn.lab{padding:0 9px 0 7px}
+.ddp-isl .ddp-btn .lb{font-size:12px}
+/* 左上菜单里的「类型」：四列小格，一点就换 */
+.ddp-menu.l{min-width:268px}
+.ddp-kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:0 2px 4px}
+.ddp-menu .ddp-kinds button{flex-direction:column;justify-content:center;gap:4px;height:50px;padding:0 2px;font-size:11px;text-align:center}
+.ddp-menu .ddp-kinds button span{max-width:100%}
+.ddp-menu .ddp-kinds button.sel{background:rgba(77,107,254,.12)}
+/* 标注时它有自己的上下两条：浮块都收起来 */
+.ddp-stage:has(>.ddp-mark)>.ddp-top,.ddp-stage:has(>.ddp-mark)>.ddp-isl{display:none}
+/* 上下两排浮块让出来：提示、消息、横幅、生成中、右边的面板都挪到两排中间 */
+.ddp-stage.isl>.ddp-hint{top:58px}
+.ddp-stage.isl>.ddp-toast:not(.mk){top:58px}
+.ddp-stage.isl>.ddp-toast.low{top:104px}
+.ddp-stage.isl>.ddp-banner{top:58px}
+.ddp-stage.isl>.ddp-chip{bottom:76px}
+.ddp-stage.isl>.ddp-chip.side{left:calc((100% - 296px) / 2)}
+.ddp-stage.isl>.ddp-tokens{top:58px;max-height:calc(100% - 58px - 74px)}
+.ddp-kind.ddp-where{flex:0 1 auto;min-width:80px;max-width:320px}
+.ddp-addr{width:100%;min-width:0;display:flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 9px;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-weight:500;cursor:pointer;border:0;overflow:hidden}
+.ddp-addr:hover,.ddp-addr.sel{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.ddp-addr span.lb2 em{color:var(--dsw-alias-label-tertiary);font-weight:400}
+.ddp-addr span{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* 窄了先截名字，「· 3 屏」「· B」留着 */
+.ddp-addr span.lb2{display:flex;overflow:visible}
+.ddp-addr span.lb2 b{min-width:0;font-weight:inherit;overflow:hidden;text-overflow:ellipsis}
+.ddp-addr span.lb2 em{flex:none;font-style:normal;white-space:pre}
+.ddp-addr .cr{width:10px;height:10px;flex:none;opacity:.55}
+.ddp-menu.l{left:0;right:auto;max-width:min(320px,calc(100cqw - 16px))}
+.ddp-menu .ls{max-height:min(360px,55vh);overflow-y:auto}
+.ddp-menu button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-menu .sp{height:.5px;margin:4px 6px;background:var(--dsw-alias-border-l3)}
 .ddp-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;flex:none;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
 .ddp-dot.off{background:var(--dsw-alias-label-tertiary);box-shadow:none}
 .ddp-dot.wait{background:#f5a524;box-shadow:0 0 0 3px rgba(245,165,36,.15);animation:ddp-blink 1s ease-in-out infinite}
@@ -1371,7 +1712,6 @@ window.__ModuleLoader__.load({
 .ddp-menu button.sel,.ddp-menu button.sel svg{color:${ACCENT}}
 .ddp-menu em{margin-left:auto;font-style:normal;color:var(--dsw-alias-label-tertiary);font-size:11px;font-variant-numeric:tabular-nums}
 .ddp-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--dsw-alias-bg-layer-2)}
-.ddp-stage.full{background:#fff}
 .ddp-scr{position:absolute;inset:0;overflow:hidden}
 .ddp-away{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:13px;line-height:1.6;color:var(--dsw-alias-text-secondary,#888);background:var(--dsw-alias-bg-layer-1)}
 .ddp-frame{position:absolute;left:0;top:0;width:100%;height:100%;border:0;background:#fff;opacity:0;z-index:0;pointer-events:none}
@@ -1403,7 +1743,12 @@ window.__ModuleLoader__.load({
 .ddp-cap.w .sp{stroke:rgba(255,255,255,.25)}
 .ddp-cap.w .rg{stroke:#fff}
 .ddp-body{position:absolute;inset:0}
-.ddp-body.vb{top:46px}
+.ddp-body.pad{top:${TOP_R}px;bottom:${BOT_R}px}
+.ddp-body.pad.vb{top:${TOP_R + 46}px}
+.ddp-body.pad.ease{transition:top .42s ${EASE}}
+.ddp-body.pad.ease .ddp-fit{transition:transform .42s ${EASE}}
+/* 网页单页夹在上下两排浮块中间：描一条细边，和画布底色分开 */
+.ddp-body.pad .ddp-dev.fill{box-shadow:0 0 0 .5px var(--dsw-alias-border-l3)}
 .ddp-single{position:absolute;inset:0;overflow:hidden}
 .ddp-fit{position:absolute;left:50%;top:50%;transform-origin:center center}
 .ddp-fit.fill{left:0;top:0;width:100%;height:100%;transform:none}
@@ -1421,15 +1766,64 @@ window.__ModuleLoader__.load({
 .ddp-lab span{overflow:hidden;text-overflow:ellipsis}
 .ddp-cell.sel .ddp-lab{color:${ACCENT};font-weight:500}
 .ddp-lab .sp{width:10px;height:10px;flex:none;border-radius:50%;border:1.5px solid rgba(77,107,254,.25);border-top-color:${ACCENT};animation:ddp-rot .75s linear infinite}
-.ddp-cell.ghost>.ddp-dev{animation:ddp-ghost 1.6s ease-in-out infinite}
 .ddp-cell.ghost .ddp-vp::after{content:"";position:absolute;inset:0;z-index:3;border:calc(2px / var(--z)) dashed rgba(77,107,254,.55);border-radius:inherit}
 .ddp-cell.ghost .ddp-lab{color:${ACCENT}}
 @keyframes ddp-ghost{50%{opacity:.62}}
-.ddp-zoom{position:absolute;right:12px;bottom:12px;z-index:6;display:flex;align-items:center;gap:1px;padding:3px;border-radius:9px;background:var(--dsw-alias-bg-layer-1);
-  box-shadow:0 4px 14px rgba(0,0,0,.14),0 0 0 .5px var(--dsw-alias-border-l3)}
-.ddp-zoom .ddp-btn{height:24px;min-width:24px;padding:0 4px}
-.ddp-zoom .ddp-btn svg{width:14px;height:14px}
-.ddp-zoom b{min-width:36px;text-align:center;font-weight:400;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);font-size:11px}
+/* 生成中的占位：鼠标框版面 */
+.ddp-gd{position:absolute;inset:0;z-index:2;overflow:hidden;background:var(--dsw-alias-bg-layer-1);pointer-events:none}
+.ddp-gd .b{position:absolute;box-sizing:border-box;border:calc(1.5px / var(--z, 1)) dashed var(--c);border-radius:calc(8px / var(--z, 1));
+  background:color-mix(in srgb,var(--c) 9%,transparent);overflow:hidden}
+.ddp-gd .b::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 22%,transparent),transparent);animation:ddp-shine 1.3s ease-in-out infinite}
+.ddp-gd .c{position:absolute;z-index:2;display:block;width:0;height:0}
+.ddp-gd .c svg{display:block;width:calc(16px / var(--z, 1));height:calc(20px / var(--z, 1));overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
+.ddp-gd .c path{fill:var(--c);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
+.ddp-gd .c em{position:absolute;left:calc(12px / var(--z, 1));top:calc(16px / var(--z, 1));padding:calc(2px / var(--z, 1)) calc(7px / var(--z, 1));
+  border-radius:calc(4px / var(--z, 1)) calc(8px / var(--z, 1)) calc(8px / var(--z, 1)) calc(8px / var(--z, 1));background:var(--c);color:#fff;
+  font-style:normal;font-weight:600;font-size:calc(11px / var(--z, 1));line-height:1.35;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18)}
+.ddp-gd .c.flip em{left:auto;right:calc(-4px / var(--z, 1))}
+/* 边写边看：正在写的那页盖在占位上，页面报到了才淡入 */
+.ddp-draft{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;display:block;background:transparent;opacity:0;transition:opacity .5s ${EASE};color-scheme:normal;pointer-events:none}
+.ddp-draft.on{opacity:1}
+.ddp-fitd{position:absolute;inset:0;z-index:3;overflow:hidden}
+.ddp-fitd>div{position:absolute;left:50%;top:50%;transform-origin:center center}
+/* 顶上的状态条：在做什么 · 用了多久；三个点是三只鼠标的颜色 */
+.ddp-busy{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);height:30px;box-sizing:border-box;
+  padding:0 12px 0 11px;border-radius:999px;overflow:hidden;background:rgba(18,18,24,.84);color:#f1f1f4;font-size:12px;line-height:16px;
+  backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 0 0 .5px rgba(255,255,255,.14);pointer-events:none;animation:ddp-drop .34s ${EASE}}
+.ddp-busy.side{left:calc((100% - 296px) / 2);max-width:calc(100% - 320px)}
+.ddp-stage.isl>.ddp-busy{top:58px}
+/* 右侧栏够宽：状态条放进上排两块浮块中间，不挡画布 */
+@container (min-width:860px){.ddp-stage.isl>.ddp-busy:not(.side){top:13px;max-width:calc(100% - 600px)}.ddp-stage.isl.bz:has(>.ddp-busy:not(.side))>.ddp-hint,.ddp-stage.isl.bz:has(>.ddp-busy:not(.side))>.ddp-toast:not(.mk),.ddp-stage.isl.bz:has(>.ddp-busy:not(.side))>.ddp-banner,.ddp-stage.isl.bz:has(>.ddp-busy:not(.side))>.ddp-tokens{top:58px}}
+.ddp-busy .dots{display:flex;gap:3px;flex:none}
+.ddp-busy .dots i{width:5px;height:5px;border-radius:50%;background:#6d87ff;animation:ddp-hop 1.2s ease-in-out infinite}
+.ddp-busy .dots i:nth-child(2){background:#ff8a4c;animation-delay:.15s}
+.ddp-busy .dots i:nth-child(3){background:#2fd3a0;animation-delay:.3s}
+.ddp-busy .q{width:8px;height:8px;flex:none;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
+.ddp-busy .tx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  background:linear-gradient(90deg,#f1f1f4 0 38%,#a9b8ff 50%,#f1f1f4 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ddp-txt 2.2s linear infinite}
+.ddp-busy.ask .tx{background:none;color:#f1f1f4;animation:none}
+.ddp-busy .sub{min-width:0;flex:0 1000 auto;color:rgba(241,241,244,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ddp-busy .tm{flex:none;padding-left:8px;border-left:1px solid rgba(255,255,255,.16);color:rgba(241,241,244,.66);font-variant-numeric:tabular-nums}
+.ddp-busy .bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#6d87ff,#a78bfa,#5eead4,transparent) no-repeat;background-size:38% 100%;animation:ddp-sweep 1.9s ease-in-out infinite}
+@keyframes ddp-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
+@keyframes ddp-sweep{from{background-position:-60% 0}to{background-position:160% 0}}
+@keyframes ddp-drop{from{opacity:0;transform:translate(-50%,-8px)}}
+/* 状态条占了顶上那格：提示、消息、横幅往下挪一格 */
+.ddp-stage.bz>.ddp-hint,.ddp-stage.bz>.ddp-toast:not(.mk),.ddp-stage.bz~.ddp-toast:not(.mk),.ddp-stage.bz>.ddp-banner{top:54px}
+.ddp-stage.isl.bz>.ddp-hint,.ddp-stage.isl.bz>.ddp-toast:not(.mk),.ddp-stage.isl.bz>.ddp-banner,.ddp-stage.isl.bz>.ddp-tokens{top:100px}
+.ddp-stage.isl.bz>.ddp-toast.low{top:146px}
+.ddp-stage.isl.bz>.ddp-tokens{max-height:calc(100% - 100px - 74px)}
+@media (prefers-reduced-motion:reduce){
+  .ddp-busy,.ddp-busy *,.ddp-gd *,.ddp-gd .b::after{animation:none!important}
+  .ddp-busy .bar{display:none}
+  .ddp-body.pad.ease,.ddp-body.pad.ease .ddp-fit{transition:none}
+}
+.ddp-zoom{position:absolute;right:10px;bottom:10px;z-index:6;display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:var(--dsw-alias-bg-layer-1);
+  box-shadow:0 6px 20px rgba(0,0,0,.12),0 0 0 .5px var(--dsw-alias-border-l3)}
+.ddp-zoom .ddp-btn{height:30px;min-width:30px;padding:0 4px;border-radius:8px}
+.ddp-zoom .ddp-btn svg{width:15px;height:15px}
+.ddp-zoom .ddp-btn .lb{min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
+.ddp-zoom .ddp-menu{top:auto;bottom:calc(100% + 8px);min-width:168px}
 .ddp-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:7;max-width:calc(100% - 24px);padding:6px 13px;border-radius:999px;
   background:rgba(18,18,24,.84);color:#ececf0;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
   box-shadow:0 6px 18px rgba(0,0,0,.22);backdrop-filter:blur(8px);pointer-events:none;animation:ddp-in .2s ease}
@@ -1487,7 +1881,7 @@ window.__ModuleLoader__.load({
 .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{position:absolute;left:50%;bottom:72px;z-index:2;transform:translateX(-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}
@@ -1499,38 +1893,30 @@ window.__ModuleLoader__.load({
 @keyframes ddp-shine{100%{transform:translateX(100%)}}
 .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 .card.k-app,.ddp-wait .card.k-miniprogram{width:auto;height:min(62%,560px);aspect-ratio:390/844;border-radius:22px}
+.ddp-wait .card.k-poster{width:auto;height:min(62%,560px);aspect-ratio:3/4}
+.ddp-wait .card.k-slides{aspect-ratio:16/9}
+.ddp-wait .card.k-email{width:min(60%,380px);aspect-ratio:3/4}
+.ddp-wait .card:has(.ddp-gd){animation:none}
 .ddp-wait p{margin:0;color:var(--dsw-alias-label-tertiary);text-align:center;line-height:1.6}
 .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}
-.ddp-steps li{display:flex;align-items:center;gap:9px;color:var(--dsw-alias-label-secondary);line-height:18px}
-.ddp-steps li::before{counter-increment:s;content:counter(s);flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:${ACCENT};background:rgba(77,107,254,.12)}
-.ddp-art{width:176px;height:120px;overflow:visible;margin-bottom:2px}
-.ddp-art .pg{fill:var(--dsw-alias-bg-layer-1);stroke:var(--dsw-alias-border-l3);stroke-width:1}
-.ddp-art .ln{stroke:var(--dsw-alias-border-l3);stroke-width:1}
-.ddp-art .dt{fill:var(--dsw-alias-border-l3)}
-.ddp-art .sk{fill:var(--dsw-alias-bg-layer-2)}
-.ddp-art .bt{fill:${ACCENT};opacity:.9}
-.ddp-art .sel{fill:rgba(77,107,254,.08);stroke:${ACCENT};stroke-width:1.3;stroke-dasharray:4 3;animation:ddp-ants .9s linear infinite,ddp-sel 3.6s ease-in-out infinite}
-.ddp-art .cur{fill:var(--dsw-alias-label-primary);stroke:var(--dsw-alias-bg-layer-1);stroke-width:1;animation:ddp-cur 3.6s ease-in-out infinite}
-@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;flex-wrap:wrap;gap:6px;width:100%;max-width:320px;margin-top:4px}
+.ddp-home form{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin:0}
 .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-go{height:26px;padding:0 12px;border:0;border-radius:999px;background:${ACCENT};color:#fff;font:inherit;cursor:pointer}
+.ddp-go:hover{filter:brightness(.94)}
+.ddp-go.sec{background:transparent;color:var(--dsw-alias-label-primary);box-shadow:inset 0 0 0 1px var(--dsw-alias-separator-primary,rgba(127,127,127,.35))}
+.ddp-go.sec:hover{filter:none;background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.ddp-go:disabled{filter:none;background:transparent;color:var(--dsw-alias-label-tertiary);box-shadow:inset 0 0 0 1px var(--dsw-alias-separator-primary,rgba(127,127,127,.3));cursor:default}
 .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}
 .ddp-head:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-primary)}
 .ddp-head svg{width:16px;height:16px}
 .ddp-head.hint::after{content:"";position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:var(--dsw-alias-accent-primary,#4f6ef7)}
 .ddp-head.live::after{content:"";position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:#22c55e}
-.ddp-tokens{position:absolute;top:10px;right:10px;bottom:10px;width:min(276px,calc(100% - 20px));z-index:7;display:flex;flex-direction:column;border-radius:12px;
+.ddp-tokens{position:absolute;top:10px;right:10px;max-height:calc(100% - 20px);width:min(276px,calc(100% - 20px));z-index:7;display:flex;flex-direction:column;border-radius:12px;
   background:var(--dsw-alias-bg-layer-1);box-shadow:0 12px 36px rgba(0,0,0,.22),0 0 0 .5px var(--dsw-alias-border-l3);overflow:hidden;animation:ddp-in .2s ${EASE}}
 .ddp-tokens header{display:flex;align-items:center;gap:8px;padding:10px 8px 2px 14px;font-size:13px;font-weight:500}
 .ddp-tokens header b{flex:1;font-weight:500}
@@ -1539,7 +1925,9 @@ window.__ModuleLoader__.load({
 .ddp-tokens .tip{margin:0;padding:0 14px 8px;color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:16px}
 .ddp-tokens .bd{flex:1;min-height:0;overflow:auto;padding:0 8px 10px}
 .ddp-tokens h4{margin:10px 6px 4px;font-size:11px;font-weight:500;color:var(--dsw-alias-label-tertiary)}
-.ddp-phone{bottom:auto;max-height:calc(100% - 20px)}
+.ddp-phone details{margin-top:4px;text-align:left}
+.ddp-phone details summary{cursor:pointer;text-align:center}
+.ddp-phone details p{margin-top:4px}
 .ddp-phone .bd{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 16px 14px;gap:6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}
 .ddp-phone .bd>*{flex:none}
 .ddp-phone .qr{width:176px;height:176px;margin:6px 0 4px;padding:0;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
@@ -1560,6 +1948,9 @@ window.__ModuleLoader__.load({
 .ddp-tokens footer button{display:flex;align-items:center;gap:7px;width:100%;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;text-align:left}
 .ddp-tokens footer button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-primary)}
 .ddp-tokens footer svg{width:15px;height:15px;flex:none}
+/* 所有面板一样的禁用样子：描边、浅字，不像能点；主按钮都是 DSH 的蓝 */
+.ddp-tokens footer button:disabled{background:transparent;color:var(--dsw-alias-label-tertiary);box-shadow:none;cursor:default;opacity:1;filter:none}
+.ddp-tokens footer .go:disabled{box-shadow:inset 0 0 0 1px var(--dsw-alias-separator-primary,rgba(127,127,127,.3))}
 .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}
@@ -1567,9 +1958,8 @@ window.__ModuleLoader__.load({
 .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}
-.ddp-empty .ddp-refline{margin-top:0}
-.ddp-empty .lk{border:0;padding:0;background:transparent;color:${ACCENT};font:inherit;cursor:pointer}
-.ddp-empty .lk:hover{text-decoration:underline;text-underline-offset:2px}
+.ddp-home .lk{border:0;padding:0;background:transparent;color:${ACCENT};font:inherit;cursor:pointer}
+.ddp-home .lk:hover{text-decoration:underline;text-underline-offset:2px}
 .ddp-ck{align-items:flex-start}
 .ddp-ck .no{width:18px;height:18px;flex:none;margin-top:1px;border-radius:9px;background:#f59e0b;color:#fff;font:700 10px/18px system-ui,sans-serif;text-align:center}
 .ddp-ck .no.hi{background:#e5484d}
@@ -1577,10 +1967,10 @@ window.__ModuleLoader__.load({
 .ddp-tok.ddp-ck .vl{white-space:normal;overflow-wrap:anywhere}
 .ddp-check .ok{display:flex;align-items:center;gap:8px;padding:14px 6px;color:var(--dsw-alias-label-secondary)}
 .ddp-check .ok svg{width:16px;height:16px;flex:none;color:#30a46c}
-.ddp-check footer.row,.ddp-style footer.row{display:flex;gap:6px}
-.ddp-check footer.row button,.ddp-style footer.row button{flex:1;justify-content:center;padding:0 6px}
-.ddp-check footer .go,.ddp-style footer .go{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
-.ddp-check footer .go:hover,.ddp-style footer .go:hover{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);opacity:.88}
+.ddp-check footer.row,.ddp-style footer.row,.ddp-look footer.row{display:flex;gap:6px}
+.ddp-check footer.row button,.ddp-style footer.row button,.ddp-look footer.row button{flex:1;justify-content:center;padding:0 6px}
+.ddp-check footer .go,.ddp-style footer .go,.ddp-look footer .go{background:${ACCENT};color:#fff}
+.ddp-check footer .go:hover,.ddp-style footer .go:hover,.ddp-look footer .go:hover{background:${ACCENT};color:#fff;filter:brightness(.94)}
 .ddp-check footer button:disabled,.ddp-style footer button:disabled{opacity:.45;cursor:default}
 .ddp-style .bd{padding:0 14px 10px}
 .ddp-style .who{margin:0;padding:0 14px 6px;font-size:12px;line-height:17px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -1648,14 +2038,114 @@ window.__ModuleLoader__.load({
 .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}
-.ddp-try{height:28px;padding:0 12px;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.3));border-radius:999px;background:transparent;
-  color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer}
-.ddp-try:hover{border-color:${ACCENT};color:${ACCENT}}
-.ddp-stylepick{width:100%;max-width:440px;margin:4px 0 6px;text-align:left}
-.ddp-stylepick>b{display:block;margin-bottom:2px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
-.ddp-stylepick>p{margin:0 0 10px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+/* ── 首页：顶上页签、一句问话、大输入框、接着做、模板 ── */
+.ddp-home{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;color:var(--dsw-alias-label-secondary);background:radial-gradient(120% 320px at 50% -80px,color-mix(in srgb,${ACCENT} 14%,transparent),transparent 72%)}
+.ddp-homebar{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 12px 0 16px}
+.ddp-homebar .nm{display:flex;align-items:center;gap:8px;min-width:0}
+.ddp-homebar .nm b{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary);white-space:nowrap}
+.ddp-homebar .mk{flex:none;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#8ea0ff,${ACCENT} 55%,#3a55e0);box-shadow:0 2px 6px rgba(77,107,254,.35)}
+.ddp-homebar .seg{margin-left:auto}
+.ddp-homebar>.ddp-btn{margin-left:-6px}
+.ddp-homeback{display:flex;align-items:center;gap:3px;min-width:0;max-width:46%;height:30px;margin-left:-8px;padding:0 10px 0 5px;border:0;border-radius:8px;background:transparent;
+  color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;cursor:pointer;flex:0 1 auto}
+.ddp-homeback svg{width:15px;height:15px;flex:none}
+.ddp-homeback span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-homeback:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-primary)}
+.ddp-homebar.led .nm{display:none}
+/* 开着设计时叠上来的首页：淡入、轻轻放大；几块依次浮上来；收起反过来 */
+.ddp-home.over~.ddp-libwrap{z-index:11}
+.ddp-home.over{position:absolute;inset:0;z-index:10;background-color:var(--dsw-alias-bg-base,var(--dsw-alias-bg-layer-1));animation:ddp-homein .28s ${EASE} both}
+.ddp-home.over.out{animation:ddp-homeout .19s ease both;pointer-events:none}
+.ddp-home .ddp-start>*{animation:ddp-rise .5s ${EASE} both}
+.ddp-home .ddp-start>:nth-child(2){animation-delay:.05s}
+.ddp-home .ddp-start>:nth-child(3){animation-delay:.1s}
+.ddp-home .ddp-start>:nth-child(4){animation-delay:.15s}
+.ddp-home .ddp-start>:nth-child(n+5){animation-delay:.2s}
+@keyframes ddp-homein{from{opacity:0;transform:scale(.985)}}
+@keyframes ddp-homeout{to{opacity:0;transform:scale(.985)}}
+@keyframes ddp-rise{from{opacity:0;transform:translateY(10px)}}
+.ddp-asknote{display:flex;align-items:center;justify-content:center;gap:5px;margin:-4px 0 0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
+.ddp-asknote svg{width:13px;height:13px;flex:none}
+.ddp-recent .wk{position:relative}
+.ddp-recent .wk.here .im{box-shadow:0 0 0 2px ${ACCENT}}
+.ddp-recent .wk .now{position:absolute;left:8px;top:8px;z-index:2;padding:1px 7px;border-radius:999px;background:${ACCENT};color:#fff;font-style:normal;font-size:11px;font-weight:600;line-height:18px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
+@media (prefers-reduced-motion:reduce){.ddp-home.over,.ddp-home.over.out,.ddp-home .ddp-start>*{animation:none}}
+.ddp-lib>.ddp-homebar{border-bottom:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
+.ddp-homebd{flex:1;min-height:0;overflow-y:auto;padding:0 20px 36px}
+.ddp-start{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:32px;text-align:left}
+.ddp-hero{margin:clamp(12px,7vh,52px) 0 -14px;text-align:center}
+.ddp-hero h1{margin:0;font-size:26px;line-height:34px;font-weight:600;letter-spacing:-.01em;color:var(--dsw-alias-label-primary);text-wrap:balance;word-break:keep-all}
+.ddp-hero p{margin:8px auto 0;max-width:440px;font-size:13px;line-height:20px;text-wrap:balance;word-break:keep-all}
+.ddp-start>.ddp-go{align-self:center;margin:-16px 0}
+.ddp-askwrap{display:flex;flex-direction:column;gap:14px}
+.ddp-ask{position:relative;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.25));border-radius:16px;background:var(--dsw-alias-bg-layer-1);box-shadow:0 10px 30px rgba(0,0,0,.07),0 0 0 4px color-mix(in srgb,${ACCENT} 6%,transparent);transition:border-color .15s,box-shadow .15s}
+.ddp-ask:focus-within{border-color:color-mix(in srgb,${ACCENT} 50%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.09),0 0 0 4px color-mix(in srgb,${ACCENT} 14%,transparent)}
+.ddp-askta{display:block;box-sizing:border-box;width:100%;min-height:78px;max-height:200px;field-sizing:content;padding:14px 16px 2px;border:0;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;resize:none;outline:none}
+.ddp-askta::placeholder{color:var(--dsw-alias-label-tertiary)}
+.ddp-ask>.row{display:flex;align-items:center;gap:6px;padding:6px 10px 10px}
+.ddp-ask .chip{display:inline-flex;align-items:center;gap:5px;min-width:0;height:30px;padding:0 11px;border:0;border-radius:999px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 5%,transparent);color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
+.ddp-ask .chip:hover,.ddp-ask .chip[aria-expanded=true]{background:color-mix(in srgb,var(--dsw-alias-label-primary) 9%,transparent);color:var(--dsw-alias-label-primary)}
+.ddp-ask .chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.ddp-ask .chip svg{flex:none;width:14px;height:14px}
+.ddp-ask .chip .cr{width:10px;height:10px;opacity:.6}
+.ddp-ask .chip.on{background:color-mix(in srgb,${ACCENT} 13%,transparent);color:${ACCENT}}
+.ddp-ask .chip .sw{flex:none;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
+.ddp-askplus>.ddp-btn{width:30px;min-width:30px;height:30px;padding:0;border-radius:999px;background:color-mix(in srgb,var(--dsw-alias-label-primary) 5%,transparent)}
+.ddp-askplus>.ddp-btn:hover,.ddp-askplus>.ddp-btn.sel{background:color-mix(in srgb,var(--dsw-alias-label-primary) 9%,transparent)}
+.ddp-askplus>.ddp-btn svg{width:15px;height:15px}
+.ddp-askplus .ddp-menu{left:0;right:auto;min-width:200px}
+.ddp-ask .tabhint{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:nowrap;cursor:pointer;border:0;padding:0 2px;background:transparent;font-family:inherit}
+.ddp-ask .tabhint:hover{color:var(--dsw-alias-label-secondary)}
+.ddp-ask kbd{padding:0 5px;border-radius:4px;box-shadow:inset 0 0 0 1px currentColor;font:500 10.5px/16px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.8}
+.ddp-ask .send{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:auto;padding:0;border:0;border-radius:50%;background:${ACCENT};color:#fff;cursor:pointer;transition:filter .15s,opacity .15s}
+.ddp-ask .tabhint+.send{margin-left:8px}
+.ddp-ask .send:disabled{opacity:.3;cursor:default}
+.ddp-ask .send:hover:not(:disabled){filter:brightness(1.08)}
+.ddp-ask .send svg{width:17px;height:17px}
+.ddp-askpop{position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);z-index:20;max-height:min(460px,62vh);overflow-y:auto;overscroll-behavior:contain;padding:14px;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.25));border-radius:14px;background:var(--dsw-alias-bg-layer-1);box-shadow:0 16px 40px rgba(0,0,0,.18);text-align:left}
+.ddp-askpop .hd{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
+.ddp-askpop .hd b{font-size:13px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.ddp-askpop .hd .lk{margin-left:auto;font-size:12px}
+.ddp-askpop .ddp-styles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
+.ddp-askkinds{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
+.ddp-askkinds button{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px 0 8px;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.28));border-radius:999px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
+.ddp-askkinds button:hover{border-color:var(--dsw-alias-label-tertiary);color:var(--dsw-alias-label-primary)}
+.ddp-askkinds button.on{border-color:${ACCENT};background:color-mix(in srgb,${ACCENT} 10%,transparent);color:${ACCENT}}
+.ddp-askkinds svg{width:13px;height:13px}
+.ddp-homesec>.hd{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
+.ddp-homesec>.hd b{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.ddp-homesec>.hd .lk{margin-left:auto;font-size:12px}
+.ddp-recent,.ddp-tplstart .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
+.ddp-recent .wk,.ddp-tplstart .tp{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
+.ddp-recent .im,.ddp-tplstart .im{position:relative;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:var(--dsw-alias-bg-layer-2);box-shadow:0 0 0 .5px rgba(127,127,127,.35);color:var(--dsw-alias-label-tertiary);transition:transform .18s ${EASE},box-shadow .18s}
+.ddp-recent .im{aspect-ratio:16/10}
+.ddp-tplstart .im{aspect-ratio:4/5}
+.ddp-recent .im img,.ddp-tplstart .im img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top}
+.ddp-recent .im svg,.ddp-tplstart .im svg{width:22px;height:22px}
+.ddp-recent .wk:hover .im,.ddp-recent .wk:focus-visible .im,.ddp-tplstart .tp:hover .im,.ddp-tplstart .tp:focus-visible .im{transform:translateY(-2px);box-shadow:0 0 0 1.5px ${ACCENT},0 8px 20px rgba(0,0,0,.12)}
+.ddp-recent .wk:focus-visible,.ddp-tplstart .tp:focus-visible{outline:none}
+.ddp-recent .tx,.ddp-tplstart .tx{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 2px}
+.ddp-recent .tx b,.ddp-tplstart .tx b{font-size:12.5px;line-height:18px;font-weight:500;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-recent .tx span,.ddp-tplstart .tx span{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@container (max-width:470px){
+.ddp-homebar .nm b{display:none}
+.ddp-homebd{padding:0 14px 28px}
+.ddp-hero h1{font-size:22px;line-height:30px}
+.ddp-recent,.ddp-tplstart .row{grid-template-columns:repeat(2,minmax(0,1fr))}
+.ddp-recent .wk:nth-child(3){display:none}
+.ddp-ask .tabhint{display:none}
+.ddp-ask .tabhint+.send{margin-left:auto}
+}
+@container (max-width:340px){.ddp-ask .chip.ref>span{display:none}.ddp-ask .chip.ref{padding:0 8px}}
+.ddp-more-st{display:block;margin-top:10px;font-size:12px}
+.ddp-ways{padding-top:16px;border-top:.5px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.3))}
+.ddp-ways summary{display:inline-flex;align-items:center;gap:6px;list-style:none;cursor:pointer;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
+.ddp-ways summary::-webkit-details-marker{display:none}
+.ddp-ways summary:hover{color:var(--dsw-alias-label-primary)}
+.ddp-ways summary svg{width:12px;height:12px;transform:rotate(-90deg);transition:transform .15s ${EASE}}
+.ddp-ways[open] summary svg{transform:none}
+.ddp-ways .in{display:flex;flex-direction:column;gap:10px;margin-top:12px}
+.ddp-ways .in p{margin:0;line-height:1.55}
 .ddp-tok{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:4px 6px;border:0;border-radius:7px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;text-align:left;cursor:pointer}
 .ddp-tok:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
 .ddp-tok .pv{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
@@ -1699,13 +2189,18 @@ window.__ModuleLoader__.load({
   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);font-size:12px;white-space:nowrap;animation:ddp-in .2s ${EASE}}
 .ddp-banner>svg{width:14px;height:14px;flex:none;color:${ACCENT}}
 .ddp-banner>span{overflow:hidden;text-overflow:ellipsis;min-width:0;margin-right:2px}
-.ddp-banner .ddp-go{height:24px;padding:0 10px;font-size:12px;flex:none;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
-.ddp-banner .ddp-go.on{background:${ACCENT};color:#fff}
-.ddp-banner .ddp-go.pri{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
+/* 试用横幅：「试用中」蓝字、屏名正文、提示淡；窄了先收提示 */
+.ddp-banner>b{flex:none;font-weight:600;color:${ACCENT}}
+.ddp-banner>.nm{color:var(--dsw-alias-label-primary)}
+.ddp-banner>em{flex:none;margin-right:4px;font-style:normal;color:var(--dsw-alias-label-tertiary)}
+@container (max-width:420px){.ddp-banner>em{display:none}}
+.ddp-banner .ddp-go{height:24px;padding:0 10px;font-size:12px;flex:none}
+.ddp-banner .ddp-go.sec.on{background:rgba(77,107,254,.12);color:${ACCENT};box-shadow:inset 0 0 0 1px ${ACCENT}}
 .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.side{right:308px}
 .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}
@@ -1722,20 +2217,60 @@ window.__ModuleLoader__.load({
 .ddp-cmp .tag{position:absolute;top:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:500 11px/16px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;pointer-events:none}
 .ddp-cmp .tag.l{left:10px}
 .ddp-cmp .tag.r{right:10px;background:${ACCENT}}
-.ddp-act{margin-left:auto;display:flex;gap:1px;flex:none}
+/* 屏头小按钮：悬停或选中那屏才出来（平时不占地方，给屏名和「用这版」留位置） */
+.ddp-act{margin-left:auto;display:none;gap:1px;flex:none}
+.ddp-cell:hover .ddp-act,.ddp-cell.sel .ddp-act{display:flex}
+.ddp-vt{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:5px;background:rgba(127,127,127,.14);color:var(--dsw-alias-label-secondary);font-size:11px;font-weight:600}
+.ddp-cell.sel .ddp-vt{background:rgba(77,107,254,.14);color:${ACCENT}}
 .ddp-take{flex:none;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 8px 0 6px;border:0;border-radius:10px;
   background:rgba(77,107,254,.12);color:${ACCENT};font:inherit;font-size:11px;font-weight:500;cursor:pointer}
 .ddp-take:hover{background:rgba(77,107,254,.2)}
 .ddp-take svg{width:12px;height:12px;flex:none}
 /* 画布缩得很小时只留 ✓，屏名先保住 */
 .ddp-lab{container-type:inline-size}
-.ddp-lab>span:first-child{min-width:3em}
-@container (max-width:170px){.ddp-take{padding:0 4px}.ddp-take span{display:none}}
+.ddp-lab>span:first-of-type{min-width:3em}
+@container (max-width:130px){.ddp-take{padding:0 4px}.ddp-take span{display:none}}
+@container (max-width:230px){.ddp-cell:hover .ddp-take,.ddp-cell.sel .ddp-take{padding:0 4px}.ddp-cell:hover .ddp-take span,.ddp-cell.sel .ddp-take span{display:none}}
 .ddp-act .ddp-btn{height:22px;min-width:22px;padding:0 4px;color:${ACCENT}}
 .ddp-act .ddp-btn svg{width:13px;height:13px}
-@container (max-width:500px){.ddp-btn.pick span,.ddp-kind>.ddp-btn span{display:none}}
+/* 屏头的小按钮：屏够宽就带字（导出 / 再出两版 / 单看），窄了只剩图标，悬停看说明 */
+.ddp-act .lb{display:none;font-size:11px}
+@container (min-width:300px){.ddp-act .lb{display:inline}.ddp-act{gap:4px}}
 .ddp-tw .row:first-child{border-top:0}
 .ddp-sys .bd{display:flex;flex-direction:column;gap:8px;padding:2px 10px 10px}
+.ddp-sys.bare{flex:1;min-height:0;display:flex;flex-direction:column}
+.ddp-sys>form{display:flex;gap:6px;flex:none;padding:0 10px 10px}
+/* 外观面板：三页切换；整套里颜色两列、点色块直接改 */
+.ddp-lktabs{display:flex;gap:2px;flex:none;margin:6px 12px 8px;padding:2px;border-radius:8px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.1))}
+.ddp-lktabs button{flex:1;height:26px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);font:12px/26px inherit;cursor:pointer}
+.ddp-lktabs button:hover{color:var(--dsw-alias-label-primary)}
+.ddp-lktabs button.on{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,.14)}
+.ddp-look h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:12px}
+.ddp-look .bd>h4:first-child{margin-top:4px}
+.ddp-look h4 span{font-weight:400}
+.ddp-lkc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
+.ddp-lkc .it{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 6px;border-radius:7px;cursor:pointer}
+.ddp-lkc .it:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.ddp-lkc .sw{position:relative;width:24px;height:24px;flex:none;border-radius:7px;box-shadow:inset 0 0 0 .5px rgba(127,127,127,.35);overflow:hidden}
+.ddp-lkc .sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
+.ddp-lkc .it.on .sw{box-shadow:0 0 0 1.5px ${ACCENT}}
+.ddp-lkc .tx{flex:1;min-width:0;display:flex;flex-direction:column}
+.ddp-lkc .nm{font-size:12px;line-height:16px;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-lkc .vl{font:10.5px/14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-lkc .it.on .vl{color:${ACCENT}}
+.ddp-look .ddp-tok .nm{font:12px/16px inherit}
+.ddp-lktw{padding:0 6px}
+.ddp-lktw .row:first-child{border-top:0;padding-top:2px}
+.ddp-lk-none{margin:0 6px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.6}
+.ddp-tokens .lk{border:0;padding:0;background:transparent;color:${ACCENT};font:inherit;cursor:pointer}
+.ddp-tokens .lk:hover{text-decoration:underline;text-underline-offset:2px}
+.ddp-lk-more{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:8px;border-top:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
+.ddp-lk-more button{display:flex;align-items:center;gap:7px;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;text-align:left;cursor:pointer}
+.ddp-lk-more button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-primary)}
+.ddp-lk-more svg{width:15px;height:15px;flex:none}
+.ddp-look footer.row{flex-wrap:wrap;align-items:center}
+.ddp-look footer.row .cnt{flex-basis:100%;padding:0 2px 2px;font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.ddp-style .who b{margin-right:2px;font-weight:500;color:var(--dsw-alias-label-primary)}
 .ddp-sysc{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.08))}
 .ddp-sysc.def{box-shadow:inset 0 0 0 1.5px ${ACCENT}}
 .ddp-sysc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;background:var(--dsw-alias-bg-layer-1)}
@@ -1752,38 +2287,42 @@ window.__ModuleLoader__.load({
 .ddp-sys form{display:flex;gap:6px}
 .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}
+.ddp-sys>form button[type=submit]{height:28px;flex:none;padding:0 12px;border:0;border-radius:8px;background:${ACCENT};color:#fff;font:12px inherit;cursor:pointer}
+.ddp-sys>form button[type=submit]:disabled{background:transparent;color:var(--dsw-alias-label-tertiary);box-shadow:inset 0 0 0 1px var(--dsw-alias-separator-primary,rgba(127,127,127,.3));cursor:default}
 .ddp-ho .bd{padding:0 14px 10px}
 .ddp-ho .row{padding:9px 0 10px;border-top:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
 .ddp-ho .row:first-child{border-top:0}
 .ddp-ho label{display:block;margin-bottom:7px;font-size:12px;color:var(--dsw-alias-label-secondary)}
 .ddp-ho .pathrow{display:flex;gap:6px;align-items:center}
+.ddp-ho .pathv{flex:1;min-width:0;display:flex;align-items:center;gap:6px;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;text-align:left;cursor:text}
+.ddp-ho .pathv:hover{border-color:var(--dsw-alias-label-tertiary)}
+.ddp-ho .pathv svg{width:14px;height:14px;flex:none;color:var(--dsw-alias-label-secondary)}
+.ddp-ho .pathv b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;max-width:60%}
+.ddp-ho .pathv em{font-style:normal;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
 .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-sys>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))}
 .ddp-ho .opt i{width:12px;height:12px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dsw-alias-label-tertiary)}
 .ddp-ho .opt.on{color:var(--dsw-alias-label-primary)}
 .ddp-ho .opt.on i{box-shadow:inset 0 0 0 4px ${ACCENT}}
-.ddp-ho footer .go{justify-content:center;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
-.ddp-ho footer .go:hover{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);opacity:.88}
-.ddp-ho footer .go:disabled{opacity:.45;cursor:default}
-.ddp-libwrap{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;background:var(--dsw-alias-bg-base,var(--dsw-alias-bg-layer-1))}
+.ddp-ho footer .go{justify-content:center;background:${ACCENT};color:#fff}
+.ddp-ho footer .go:hover{background:${ACCENT};color:#fff;filter:brightness(.94)}
+
+.ddp-libwrap{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;background:var(--dsw-alias-bg-base,var(--dsw-alias-bg-layer-1))}
 .ddp-lib{flex:1;min-height:0;display:flex;flex-direction:column;animation:ddp-in .2s ${EASE}}
-.ddp-lib>header{flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 6px;border-bottom:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
-.ddp-lib>header b{font-size:13px;font-weight:600;white-space:nowrap}
-.ddp-lib .seg{margin-left:auto;display:inline-flex;padding:2px;border-radius:8px;background:var(--dsw-alias-bg-layer-2)}
-.ddp-lib .seg button{height:26px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;white-space:nowrap}
-.ddp-lib .seg button:hover{color:var(--dsw-alias-label-primary)}
-.ddp-lib .seg button.on{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,.12)}
+.ddp-lib>header:not(.ddp-homebar){flex:none;display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 6px;border-bottom:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
+.ddp-lib>header:not(.ddp-homebar) b{font-size:13px;font-weight:600;white-space:nowrap}
+.ddp-lib .seg,.ddp-homebar .seg{margin-left:auto;display:inline-flex;padding:2px;border-radius:8px;background:var(--dsw-alias-bg-layer-2)}
+.ddp-lib .seg button,.ddp-homebar .seg button{height:26px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;white-space:nowrap}
+.ddp-lib .seg button:hover,.ddp-homebar .seg button:hover{color:var(--dsw-alias-label-primary)}
+.ddp-lib .seg button.on,.ddp-homebar .seg button.on{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,.12)}
 .ddp-lib>.bd{flex:1;min-height:0;overflow:auto;padding:14px}
 .ddp-pack .lk{border:0;padding:0;background:transparent;color:${ACCENT};font:inherit;cursor:pointer}
 .ddp-pack .lk:hover{text-decoration:underline;text-underline-offset:2px}
@@ -1796,11 +2335,11 @@ window.__ModuleLoader__.load({
 .ddp-libnone p{margin:0;max-width:320px}
 .ddp-libfoot{margin:18px 0 0;font-size:11px;line-height:1.5;color:var(--dsw-alias-label-tertiary);text-align:center}
 .ddp-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px 14px}
-.ddp-work{display:flex;flex-direction:column;gap:4px;min-width:0}
+.ddp-work{display:flex;flex-direction:column;gap:4px;min-width:0;container-type:inline-size}
 .ddp-work .th{position:relative;display:block;aspect-ratio:4/3;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--dsw-alias-bg-layer-2);cursor:pointer;box-shadow:0 0 0 .5px rgba(127,127,127,.35);transition:transform .15s ${EASE},box-shadow .15s}
 .ddp-work .th:hover:not(:disabled),.ddp-work .th:focus-visible{outline:none;transform:translateY(-1px);box-shadow:0 0 0 1.5px ${ACCENT},0 6px 16px rgba(0,0,0,.12)}
 .ddp-work .th:disabled{cursor:default}
-.ddp-work .th img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top}
+.ddp-work .th img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:left top}
 .ddp-work .th .ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dsw-alias-label-tertiary)}
 .ddp-work .th .ic svg{width:26px;height:26px}
 .ddp-work .th em{position:absolute;left:8px;top:8px;z-index:2;padding:1px 7px;border-radius:9px;background:${ACCENT};color:#fff;font-size:11px;font-style:normal}
@@ -1811,13 +2350,17 @@ window.__ModuleLoader__.load({
 .ddp-work .bdg{flex:none;height:17px;padding:0 6px;border-radius:9px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font-size:10.5px;line-height:17px}
 .ddp-work .pin{flex:none;color:#f5a524;font-size:11px}
 .ddp-work .mt{font-size:11px;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.ddp-work .acts{display:flex;align-items:center;gap:2px;min-width:0;margin-left:-4px}
+.ddp-work .acts{display:flex;flex-wrap:wrap;align-items:center;gap:2px;min-width:0;margin-left:-4px}
+/* 卡片窄（侧栏窄、多列）：操作只留图标（悬停有说明），别挤进旁边那件 */
+@container (max-width:259px){.ddp-work .acts button svg+span{display:none}}
 .ddp-work .acts button,.ddp-insp .rm,.ddp-market .rm{display:inline-flex;align-items:center;justify-content:center;flex:none;height:24px;min-width:24px;padding:0 6px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;cursor:pointer;white-space:nowrap}
 .ddp-work .acts button:hover:not(:disabled),.ddp-insp .rm:hover,.ddp-market button.rm:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12));color:var(--dsw-alias-label-primary)}
 .ddp-work .acts button:disabled{opacity:.45;cursor:default}
 .ddp-work .acts button.on{color:#f5a524}
 .ddp-work .acts svg,.ddp-insp .rm svg,.ddp-market .rm svg{width:14px;height:14px}
 .ddp-work .acts .rm{margin-left:auto}
+.ddp-work .acts button span{font-size:11px}
+.ddp-work .acts button svg+span{margin-left:3px}
 .ddp-work .acts .rm.sure,.ddp-insp .rm.sure{color:var(--dsw-alias-state-error-primary,#d54941);background:color-mix(in srgb,var(--dsw-alias-state-error-primary,#d54941) 12%,transparent);font-size:11px}
 .ddp-insp h4{margin:18px 0 8px;font-size:12px;font-weight:500;color:var(--dsw-alias-label-secondary)}
 .ddp-insp h4:first-child{margin-top:0}
@@ -1835,11 +2378,23 @@ window.__ModuleLoader__.load({
 .ddp-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
 .ddp-imgs:empty{display:none}
 .ddp-market .ddp-mkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
-.ddp-market .ddp-mkbar .seg{margin-left:0}
-.ddp-market .ddp-mkbar .q{flex:1 1 140px;min-width:0;height:28px;padding:0 10px;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-market .ddp-mkbar .tabs{display:flex;gap:14px;flex:none}
+.ddp-market .ddp-mkbar .tabs button{display:flex;align-items:baseline;gap:4px;height:28px;padding:0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dsw-alias-label-secondary);font:13px inherit;cursor:pointer;white-space:nowrap}
+.ddp-market .ddp-mkbar .tabs button em{font-style:normal;font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.ddp-market .ddp-mkbar .tabs button:hover{color:var(--dsw-alias-label-primary)}
+.ddp-market .ddp-mkbar .tabs button.on{color:var(--dsw-alias-label-primary);font-weight:500;border-bottom-color:${ACCENT}}
+.ddp-market .ddp-mkbar .q{flex:1 1 140px;min-width:0;height:28px;padding:0 10px 0 28px;background-image:${iconUrl('M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14 M20 20l-4.2-4.2').replace('black', '%23999')};background-repeat:no-repeat;background-size:14px;background-position:8px center;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.3));border-radius:8px;background-color:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:12px inherit;outline:none}
 .ddp-market .ddp-mkbar .q:focus{border-color:${ACCENT}}
-.ddp-market .ddp-mkbar select{height:28px;padding:0 6px;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}
-.ddp-mkkinds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
+/* 窄了：搜索框缩成一个放大镜，点进去再展开 */
+@container (max-width:480px){.ddp-market .ddp-mkbar .q{flex:0 0 32px;padding-right:0;cursor:pointer;transition:flex-basis .15s ${EASE}}.ddp-market .ddp-mkbar .q::placeholder{color:transparent}.ddp-market .ddp-mkbar .q:focus,.ddp-market .ddp-mkbar .q:not(:placeholder-shown){flex:1 1 140px;cursor:text}.ddp-market .ddp-mkbar .q:focus::placeholder{color:var(--dsw-alias-label-tertiary)}}
+.ddp-mkkinds{display:flex;align-items:center;gap:6px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
+.ddp-mkkinds::-webkit-scrollbar{display:none}
+.ddp-mkkinds>button{flex:none}
+.ddp-mkkinds button:disabled{opacity:.4;cursor:default}
+.ddp-mkbar .sort{display:flex;gap:2px;flex:none}
+.ddp-mkbar .sort button{height:24px;padding:0 8px;border:0;border-radius:12px;background:transparent;color:var(--dsw-alias-label-secondary);font:12px inherit;cursor:pointer;white-space:nowrap}
+.ddp-mkbar .sort button:hover{color:var(--dsw-alias-label-primary)}
+.ddp-mkbar .sort button.on{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
 .ddp-mkkinds button,.ddp-mkdots button{height:24px;padding:0 10px;border:0;border-radius:12px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-secondary);font:12px inherit;cursor:pointer;white-space:nowrap}
 .ddp-mkkinds button:hover,.ddp-mkdots button:hover{color:var(--dsw-alias-label-primary)}
 .ddp-mkkinds button.on,.ddp-mkdots button.on{background:${ACCENT};color:#fff}
@@ -1859,25 +2414,14 @@ window.__ModuleLoader__.load({
 .ddp-mkdots{display:flex;flex-wrap:wrap;gap:6px}
 .ddp-mkd .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
 .ddp-pbtn,.ddp-sbtn{height:32px;padding:0 16px;border:0;border-radius:8px;font:13px inherit;cursor:pointer;white-space:nowrap}
-.ddp-pbtn{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);font-weight:600}
+.ddp-pbtn{background:${ACCENT};color:#fff;font-weight:600}
+.ddp-pbtn:hover:not(:disabled){filter:brightness(.94)}
 .ddp-sbtn{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
 .ddp-pbtn:disabled,.ddp-sbtn:disabled{opacity:.5;cursor:default}
 .ddp-mkd .facts{margin:6px 0 0;padding-left:18px;font-size:12px;line-height:1.6;color:var(--dsw-alias-label-secondary)}
 .ddp-mkd .ddp-libfoot a{color:${ACCENT};text-decoration:none}
 .ddp-mkd .ddp-libfoot a:hover{text-decoration:underline}
 .ddp-mkd code{font-size:11px;color:var(--dsw-alias-label-tertiary)}
-.ddp-tplstart{width:100%;max-width:560px;margin:18px auto 0;text-align:left}
-.ddp-tplstart .hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
-.ddp-tplstart .hd b{font-size:13px;font-weight:600}
-.ddp-tplstart .hd .lk{margin-left:auto;border:0;padding:0;background:transparent;color:${ACCENT};font:12px inherit;cursor:pointer}
-.ddp-tplstart .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
-.ddp-tplstart .tp{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:transparent;color:var(--dsw-alias-label-primary);font:11px inherit;text-align:left;cursor:pointer;min-width:0}
-.ddp-tplstart .im{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--dsw-alias-bg-layer-2);box-shadow:0 0 0 .5px rgba(127,127,127,.35);color:var(--dsw-alias-label-tertiary);transition:transform .15s ${EASE},box-shadow .15s}
-.ddp-tplstart .tp:hover .im,.ddp-tplstart .tp:focus-visible .im{transform:translateY(-1px);box-shadow:0 0 0 1.5px ${ACCENT}}
-.ddp-tplstart .tp:focus-visible{outline:none}
-.ddp-tplstart .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
-.ddp-tplstart .im svg{width:20px;height:20px}
-.ddp-tplstart .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ddp-img{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--dsw-alias-bg-layer-2)}
 .ddp-img img{display:block;width:100%;height:100%;object-fit:cover}
 .ddp-img .acts{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:4px;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .15s}
@@ -1896,8 +2440,8 @@ window.__ModuleLoader__.load({
 .ddp-urlform{display:flex;gap:6px}
 .ddp-urlform input{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-urlform input:focus{border-color:${ACCENT}}
-.ddp-urlform button{flex:none;height:28px;padding:0 12px;border:0;border-radius:8px;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);font:12px inherit;cursor:pointer}
-.ddp-urlform button:disabled{opacity:.4;cursor:default}
+.ddp-urlform button{flex:none;height:28px;padding:0 12px;border:0;border-radius:8px;background:${ACCENT};color:#fff;font:12px inherit;cursor:pointer}
+.ddp-urlform button:disabled{background:transparent;color:var(--dsw-alias-label-tertiary);box-shadow:inset 0 0 0 1px var(--dsw-alias-separator-primary,rgba(127,127,127,.3));cursor:default}
 .ddp-pack .which{display:flex;align-items:center;gap:6px;margin:4px 6px 2px;font-size:12px;color:var(--dsw-alias-label-primary);min-width:0}
 .ddp-pack .which svg{width:14px;height:14px;flex:none;color:var(--dsw-alias-label-tertiary)}
 .ddp-pack .which span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -1905,6 +2449,8 @@ window.__ModuleLoader__.load({
 .ddp-pack .lic label{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:8px;color:var(--dsw-alias-label-secondary);line-height:1.5;cursor:pointer}
 .ddp-pack .lic label.on{background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary)}
 .ddp-pack .lic input{flex:none;margin:3px 0 0;accent-color:${ACCENT}}
+.ddp-share .tip.gh{display:flex;align-items:center;gap:6px;margin-bottom:0;color:var(--dsw-alias-label-primary);font-weight:500}
+.ddp-share .tip.gh svg{width:14px;height:14px;flex:none;color:${ACCENT}}
 .ddp-share .agree{display:flex;flex-direction:column;gap:2px;margin-top:10px}
 .ddp-share .agree label{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;border-radius:8px;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.5;cursor:pointer}
 .ddp-share .agree label:hover{color:var(--dsw-alias-label-primary)}
@@ -1925,14 +2471,13 @@ window.__ModuleLoader__.load({
 .ddp-pack .note ul{margin:2px 0 0;padding-left:16px}
 .ddp-pack footer.row{display:flex;gap:6px}
 .ddp-pack footer.row button{flex:1;justify-content:center;padding:0 6px}
-.ddp-pack footer .go{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
-.ddp-pack footer .go:hover{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);opacity:.88}
-.ddp-pack footer .go:disabled{opacity:.45;cursor:default}
+.ddp-pack footer .go{background:${ACCENT};color:#fff}
+.ddp-pack footer .go:hover{background:${ACCENT};color:#fff;filter:brightness(.94)}
+
 .ddp-libwrap>.ddp-toast{z-index:3}
-/* 「更多」一直在：设计库、设计系统只放在这个菜单里；窄的时候再把 o1/o2 收进来 */
-.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}}
+/* 浮块窄了：先截屏名，到 440 再收按钮上的字，400 收工具坞里的演示（演示时横幅上能退出） */
+@container (max-width:440px){.ddp-isl .lab .lb,.ddp-isl .pri .lb{display:none}.ddp-isl .ddp-btn.lab{padding:0 6px}.ddp-tool{width:36px;height:36px}.ddp-tool span{display:none}.ddp-dock .ddp-sep{height:20px}}
+@container (max-width:380px){.ddp-tool{width:32px}.ddp-kind.ddp-where{min-width:64px}}
 /* 标注底栏：右侧栏窄时「这支笔怎么用」折成两行，不被三个按钮挤成省略号 */
 @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}}
 /* 画标注时预览不动，画布右下角的缩放按钮被标注层盖着也点不到：先收起来，免得和底栏叠在一起 */
@@ -2006,9 +2551,11 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       more: () => svg([h('circle', { key: 1, cx: 5.5, cy: 12, r: 1.3 }), h('circle', { key: 2, cx: 12, cy: 12, r: 1.3 }), h('circle', { key: 3, cx: 18.5, cy: 12, r: 1.3 })]),
       play: () => svg([h('path', { key: 1, d: 'M8 5.5v13l10.5-6.5z', strokeLinejoin: 'round' })]),
       back: () => svg([h('path', { key: 1, d: 'M14.5 6l-6 6 6 6', strokeWidth: 2.2 })]),
+      home: () => svg([h('path', { key: 1, d: 'M4.5 10.2 12 4.2l7.5 6V19a1 1 0 0 1-1 1h-4v-5.5h-5V20h-4a1 1 0 0 1-1-1z' })]),
       moon: () => svg([h('path', { key: 1, d: 'M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z' })]),
       sparkle: () => svg([h('path', { key: 1, d: 'M12 3.5l1.8 5.2 5.2 1.8-5.2 1.8L12 17.5l-1.8-5.2L5 10.5l5.2-1.8z' }), h('path', { key: 2, d: 'M18.5 16v4M16.5 18h4' })]),
       plus: () => svg([h('path', { key: 1, d: 'M12 5v14M5 12h14' })]),
+      send: () => svg([h('path', { key: 1, d: 'M12 19V5.5M6 11.5l6-6 6 6', strokeWidth: 2.2 })]),
       minus: () => svg([h('path', { key: 1, d: 'M5 12h14' })]),
       fit: () => svg([h('path', { key: 1, d: 'M4 9V5.5A1.5 1.5 0 0 1 5.5 4H9M15 4h3.5A1.5 1.5 0 0 1 20 5.5V9M20 15v3.5a1.5 1.5 0 0 1-1.5 1.5H15M9 20H5.5A1.5 1.5 0 0 1 4 18.5V15' })]),
       refresh: () => svg([h('path', { key: 1, d: 'M20 11a8 8 0 1 0-2.3 5.7' }), h('path', { key: 2, d: 'M20 5v6h-6' })]),
@@ -2030,6 +2577,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       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' })]),
+      info: () => svg([h('circle', { key: 1, cx: 12, cy: 12, r: 8.5 }), h('path', { key: 2, d: 'M12 11v5.5M12 7.8v.2', strokeWidth: 2 })]),
       box: () => svg([h('path', { key: 1, d: 'M3.5 7.5L12 3.5l8.5 4v9L12 20.5l-8.5-4z' }), h('path', { key: 2, d: 'M3.5 7.5L12 11.5l8.5-4M12 11.5v9' })]),
       share: () => svg([h('path', { key: 1, d: 'M12 15V4' }), h('path', { key: 2, d: 'M7.5 8.5L12 4l4.5 4.5' }), h('path', { key: 3, d: 'M5 13v5.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V13' })]),
       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),
@@ -2371,7 +2919,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         { 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']) })),
+        { i: 'look', label: (v, t) => t('chipLook', { name: v.name }), alts: L.map((x) => tplSrc(x.styleText, { name: '[^\\n]*?', ask: lit(['styleStart', 'styleRestyle', 'styleAuto']) })),
           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)]] },
@@ -2612,6 +3160,106 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     }
 
     /** 点了一个变量 → 输入框里的一段字 */
+    /** 设计变量的人话名字：--bg → 背景，--fs-micro → 注释，--radius-md → 中圆角；认不出的把名字去掉 -- 和连字符 */
+    function tokenLabel(t, tok) {
+      const raw = String(tok.name).replace(/^--/, '')
+      const words = raw.toLowerCase().split(/[-_]+/).filter(Boolean)
+      const has = (re) => words.some((w) => re.test(w))
+      const kind = tokenKind(tok)
+      const rest = (re) => words.filter((w) => !re.test(w) && !/^(color|clr|c|token|tk|font|fs|text|size|radius|r|rounded|space|spacing|sp|gap|shadow|elevation|family|ff)$/.test(w))
+      const mod = (left) => {
+        const out = []
+        for (const w of left) {
+          if (/^(soft|light|lighter|pale|tint|weak|subtle|faint|bg|50|100|200)$/.test(w)) out.push(t('tkn_light'))
+          else if (/^(dark|darker|deep|strong|bold|700|800|900)$/.test(w)) out.push(t('tkn_dark'))
+          else if (/^(hover|active|pressed|focus)$/.test(w)) out.push(t('tkn_hover'))
+          else out.push(w)
+        }
+        return [...new Set(out)].join(' ')
+      }
+      const name = (key, re) => { const m = mod(rest(re)); return m ? `${t('tkn_' + key)} · ${m}` : t('tkn_' + key) }
+      if (kind === 'color') {
+        if (words.includes('on') && words.length > 1) return t('tkn_onPrimary')
+        const roles = [
+          [/^(muted|subtle|dim|faint|placeholder|secondary-text|text2|hint)$/, 'muted'],
+          [/^(line|border|divider|stroke|outline|hairline|sep|separator|rule)$/, 'line'],
+          [/^(surface|card|panel|elev|elevated|sheet|raised|layer|paper)$/, 'surface'],
+          [/^(text|fg|ink|foreground|body|copy)$/, 'text'],
+          [/^(bg|background|page|canvas|base|backdrop)$/, 'bg'],
+          [/^(primary|brand|main|theme)$/, 'primary'],
+          [/^(accent|highlight|secondary)$/, 'accent'],
+          [/^(link|links)$/, 'link'],
+          [/^(danger|error|destructive|alert)$/, 'danger'],
+          [/^(success|positive|ok)$/, 'success'],
+          [/^(warning|warn|caution)$/, 'warning'],
+        ]
+        for (const [re, key] of roles) if (has(re)) return name(key, re)
+      } else if (kind === 'size') {
+        const sizes = [[/^(xs|xxs|micro|tiny|caption|note|footnote|mini)$/, 'xs'], [/^(sm|small)$/, 'sm'], [/^(md|medium)$/, 'md'], [/^(base|body|normal|p|regular)$/, 'body'], [/^(lg|large|lead|sub|subtitle)$/, 'lg'], [/^(xl|title|h2|h3|h4|heading|head)$/, 'title'], [/^(2xl|3xl|4xl|xxl|display|hero|h1|huge|jumbo)$/, 'display']]
+        for (const [re, key] of sizes) if (has(re)) return name(key, re)
+      } else if (kind === 'radius') {
+        const rs = [[/^(xs|sm|small)$/, 'rSm'], [/^(md|base|medium|default)$/, 'rMd'], [/^(lg|xl|large|2xl)$/, 'rLg'], [/^(full|pill|round|circle|999)$/, 'rFull']]
+        for (const [re, key] of rs) if (has(re)) return name(key, re)
+        const m = mod(rest(/^$/))
+        return m ? `${t('tkn_r')} ${m}` : t('tkn_r')
+      } else if (kind === 'space') {
+        if (has(/^(gutter|page|edge|inset)$/)) return t('tkn_gutter')
+        const m = rest(/^$/).join(' ')
+        return m ? `${t('tkn_space')} ${m}` : t('tkn_space')
+      } else if (kind === 'font') {
+        if (has(/^(head|heading|display|title|serif|brand)$/)) return t('tkn_fHead')
+        if (has(/^(mono|code)$/)) return t('tkn_fMono')
+        if (has(/^(body|text|sans|base|ui)$/)) return t('tkn_fBody')
+      } else if (kind === 'shadow') {
+        const m = rest(/^$/).join(' ')
+        return m ? `${t('tkn_shadow')} ${m}` : t('tkn_shadow')
+      }
+      return raw.replace(/[-_]+/g, ' ')
+    }
+
+    /** 一套变量的人话名字（名字 → 名字）：撞名的后面带上原名的尾巴，比如「卡片底（paper）」 */
+    function tokenLabels(t, tokens) {
+      const out = new Map()
+      const seen = new Map()
+      for (const tok of tokens || []) {
+        const l = tokenLabel(t, tok)
+        out.set(tok.name, l)
+        seen.set(l, (seen.get(l) || 0) + 1)
+      }
+      for (const tok of tokens || []) {
+        const l = out.get(tok.name)
+        if (seen.get(l) > 1) out.set(tok.name, `${l}（${String(tok.name).replace(/^--/, '').replace(/^(color|clr|c|font|fs|text|size|radius|space|spacing|shadow)-/i, '')}）`)
+      }
+      return out
+    }
+
+    /** 调样式面板头上：这是个什么（按钮「去预约」），不是一串选择器 */
+    function elemLabel(t, name, text) {
+      const n = String(name || '').toLowerCase()
+      const tag = (/^[a-z][a-z0-9]*/.exec(n) || [''])[0]
+      const cls = n.slice(tag.length)
+      let k = 'box'
+      if (/btn|button/.test(cls) || tag === 'button') k = 'button'
+      else if (/card/.test(cls)) k = 'card'
+      else if (/tag|chip|badge|pill/.test(cls)) k = 'tag'
+      else if (/avatar/.test(cls)) k = 'avatar'
+      else if (/icon|ico\b/.test(cls) || tag === 'svg' || tag === 'i') k = 'icon'
+      else if (tag === 'a') k = 'a'
+      else if (tag === 'img' || tag === 'picture' || tag === 'video') k = 'img'
+      else if (/^h[1-6]$/.test(tag)) k = 'h'
+      else if (tag === 'p') k = 'p'
+      else if (tag === 'input' || tag === 'textarea' || tag === 'select') k = 'input'
+      else if (tag === 'li') k = 'li'
+      else if (tag === 'ul' || tag === 'ol') k = 'ul'
+      else if (tag === 'nav' || /nav|tabbar|tab-bar/.test(cls)) k = 'nav'
+      else if (tag === 'header') k = 'header'
+      else if (tag === 'footer') k = 'footer'
+      else if (/^(span|b|strong|em|small|label|time)$/.test(tag)) k = 'text'
+      const s = String(text || '').replace(/\s+/g, ' ').trim()
+      const short = [...s].length > 14 ? [...s].slice(0, 13).join('') + '…' : s
+      return { role: t('el_' + k), text: short }
+    }
+
     function formatToken(tok, st) {
       return `〔设计变量〕${tok.name}: ${String(tok.value).replace(/\s*\n\s*/g, ' ')}（${whereOf(tok.href, st)}）\n`
     }
@@ -2783,7 +3431,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     }
 
     /** 选了一个风格 → 输入框里的一段字（restyle：给已经打开的设计换风格） */
-    function formatStyle(t, pre, restyle) {
+    function formatStyle(t, pre, restyle, auto) {
       const en = t('lang') === 'en'
       const c = pre.c
       const fonts = t('styleFonts', { head: `${pre.head} · ${pre.w}`, body: SANS })
@@ -2794,10 +3442,47 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         fonts,
         shape: t('styleShape', { r: pre.radius, s: pre.shadow }),
         notes: en ? pre.nen : pre.nzh,
-        ask: t(restyle ? 'styleRestyle' : 'styleStart'),
+        ask: t(restyle ? 'styleRestyle' : auto ? 'styleAuto' : 'styleStart'),
       })
     }
 
+    /** 首页「风格：自动」时按题材替模型挑一张风格卡（模型自己定时，消费类 App 总落回米色暖调）。
+     *  用户话里已经说了风格 → 不挑（null），照他的话来；没认出题材 → 按类型给一张不是米色的 */
+    const AUTO_STYLE = [
+      ['sport', /跑步|健身|运动|赛事|马拉松|骑行|瑜伽|球馆|\b(runners?|running|fitness|gym|workouts?|sports?|marathons?|cycling|athletes?)\b/i],
+      ['cyber', /电音|夜店|电竞|游戏|音乐节|livehouse|酒吧|\b(game|gaming|esports?|nightclub|club|rave|festival)\b/i],
+      ['sale', /促销|大促|双十一|双11|618|秒杀|优惠|团购|外卖|\b(sale|deals?|coupons?|promo|black friday)\b/i],
+      ['tech', /后台|管理系统|仪表盘|看板|数据|金融|理财|银行|证券|\b(saas|crm|erp|dashboard|admin|analytics|finance|fintech|bank|banking|crypto|b2b|devops|api)\b/i],
+      ['dark', /奢|高端|珠宝|腕表|名表|红酒|威士忌|私人|黑卡|\b(luxury|premium|jewel|jewelry|jewellery|wristwatch(es)?|timepieces?|wine|whisky|concierge)\b/i],
+      ['cute', /儿童|幼儿|宠物|猫|狗|萌|甜品|蛋糕|玩具|\b(kids?|children|pets?|cats?|dogs?|puppy|toys?|dessert|candy)\b/i],
+      ['fresh', /健康|医疗|医院|诊所|户外|露营|母婴|植物|花店|有机|环保|民宿|旅行|旅游|度假|\b(health|medical|clinic|hospital|outdoor|camping|baby|plants?|florist|organic|eco|travel|trip|stays?|vacation|hotel|bnb)\b/i],
+      ['playful', /奶茶|果茶|饮品|饮料|社交|交友|学生|校园|潮牌|\b(bubble tea|boba|drinks?|smoothie|social|dating|students?|campus|streetwear)\b/i],
+      ['guochao', /春节|新年|中秋|端午|国潮|老字号|文创|庙会/],
+      ['retro', /咖啡|黑胶|唱片|市集|古着|理发|面包|\b(vinyl|records?|vintage|barber|bakery|coffee)\b/i],
+      ['glass', /音乐|播放器|天气|智能家居|\b(music|player|weather|smart home|podcast)\b/i],
+      ['editorial', /新闻|杂志|博客|阅读|读书|书店|媒体|播客|\b(news|magazine|blog|reading|books?|media|newsletter)\b/i],
+      ['swiss', /设计工作室|建筑|展览|美术馆|画廊|作品集|\b(agency|studio|architecture|exhibition|gallery|museum|portfolio)\b/i],
+    ]
+    const AUTO_BY_KIND = { slides: 'swiss', web: 'minimal', desktop: 'tech', email: 'minimal', poster: 'playful', tablet: 'minimal' }
+    const AUTO_SPREAD = ['minimal', 'editorial', 'playful', 'fresh', 'tech', 'glass', 'dark', 'sport']
+    // 「北欧风」「清新风：首页…」「中国风的界面」算说了风格；先去掉「通风」「台风」「新风系统」「风控」「风景」这类不是风格的词
+    const NOT_STYLE_FENG = /通风|台风|新风(系统|机|量)|风险|风控|风景|风扇|风味|风暴|风光|风速|风向|风筝|风铃|风车|吹风|防风|挡风|避风|屏风|旋风|狂风|微风|寒风|疾风|顺风|逆风|作风|中风|风湿|风水/g
+    const SAID_STYLE = /风格|配色|色调|主色|色系|[^\s。，,、：:；;（(]风|\b(style|styled|aesthetic|vibe|palette|colou?r scheme|look and feel)\b/i
+    // 「风格你定」「配色：随意」「any style」：等于没说（「配色定为蓝白」是说了）
+    const STYLE_FREE = /(风格|配色|色调|主色)[：:]?\s?(你定|您定|你来定|您来定|你决定|你看着办|随意|随便|不限|都行|无所谓|自由发挥)|\b(any|whatever)\s(style|colou?rs?|palette)\b|\b(style|colou?rs?|palette)\s(is\s)?up\sto\syou\b/gi
+    function autoStyle(text, kind) {
+      const s = String(text || '')
+      if (!s.trim()) return null
+      const said = s.replace(STYLE_FREE, ' ').replace(NOT_STYLE_FENG, ' ')
+      if (SAID_STYLE.test(said) || STYLES.some((x) => said.includes(x.zh) || new RegExp(`\\b${x.en}\\s+(style|look|theme|aesthetic|vibe)\\b`, 'i').test(said))) return null
+      const by = (id) => STYLES.find((x) => x.id === id) || null
+      for (const [id, re] of AUTO_STYLE) if (re.test(s)) return by(id)
+      if (AUTO_BY_KIND[kind]) return by(AUTO_BY_KIND[kind])
+      let n = 0
+      for (const ch of s) n = (n * 31 + ch.codePointAt(0)) >>> 0
+      return by(AUTO_SPREAD[n % AUTO_SPREAD.length])
+    }
+
     // ── 设计库：〔模板〕〔准备分享〕标签、我的风格 ──────────────────────────────
 
     const HEAD_STACK = { SANS, SERIF, ROUND, MONO, GROTESK }
@@ -3569,6 +4254,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     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 HOLD_MAX = 15000 // 草稿放到一半真文件就落地了：最多再放这么久（一般几秒放完自己说一声）
     const EDIT_GRACE_MS = 3000 // 退出改字后这么久里，页面交上来的最后一处改动还收
     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 桌面软件的窗口按钮
@@ -3662,7 +4348,8 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
 
     /** 整块居中放进舞台（最大 100%） */
     function fitCam(L, sw, sh) {
-      const z = clampZ(Math.min(1, L.z))
+      // 排的时候按整块舞台算的缩放；右边被面板挡着时 sw 变窄，再缩到放得下
+      const z = clampZ(Math.min(1, L.z, (sw - PAD * 2) / Math.max(1, L.bw), (sh - PAD_TOP - PAD) / Math.max(1, L.bh)))
       return { z, x: (sw - L.bw * z) / 2, y: PAD_TOP + Math.max(0, (sh - PAD_TOP - PAD - L.bh * z) / 2) }
     }
 
@@ -4003,6 +4690,226 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
 
     // ── 小部件 ───────────────────────────────────────────────────────────────
 
+    // 模型在做什么：按它调的工具说人话（写文件另算，见 busyPhase）
+    const TOOL_PHASE = [
+      [/^check_design$/, 'stCheck'], [/^look_design$/, 'stLook'], [/^preview_page$/, 'stPreview'], [/^extract_design_system$/, 'stBrand'],
+      [/^handoff_design$/, 'stCode'], [/^compare_design$/, 'stCompare'], [/^ask_user_question$/, 'asking'],
+      [/^(bash|shell|sh|zsh|powershell|pwsh|exec|run_command|terminal)$/i, 'stShell'],
+      [/^skill$/i, 'stSkill'],
+      [/web|fetch|browse|http/i, 'stWeb'],
+      [/^(write|edit|multi_?edit|create_file|str_replace\w*|apply_patch|patch)$/i, 'stWriteAny'],
+      [/read|grep|glob|list|^ls$|find|search|view/i, 'stRead'],
+    ]
+    const clock = (ms) => {
+      const s = Math.max(0, Math.floor(ms / 1000))
+      const p2 = (n) => String(n).padStart(2, '0')
+      return s >= 3600 ? `${Math.floor(s / 3600)}:${p2(Math.floor(s / 60) % 60)}:${p2(s % 60)}` : `${Math.floor(s / 60)}:${p2(s % 60)}`
+    }
+
+    /** 顶上的状态条：在做什么 · 第几屏 · 用了多久（自己每秒走一下，不带着整个右侧栏重画） */
+    function BusyBar({ t, phase, since, side }) {
+      const [, tick] = useState(0)
+      useEffect(() => {
+        const id = setInterval(() => tick((n) => n + 1), 1000)
+        return () => clearInterval(id)
+      }, [])
+      const tm = clock(Date.now() - since)
+      return h('div', { className: 'ddp-busy' + (phase.asking ? ' ask' : '') + (side ? ' side' : '') },
+        phase.asking ? h('i', { className: 'q', 'aria-hidden': true }) : h('span', { className: 'dots', 'aria-hidden': true }, h('i'), h('i'), h('i')),
+        h('span', { className: 'tx', role: 'status' }, phase.text),
+        phase.sub ? h('span', { className: 'sub' }, phase.sub) : null,
+        h('span', { className: 'tm', title: t('stTime', { time: tm }) }, tm),
+        phase.asking ? null : h('i', { className: 'bar', 'aria-hidden': true }))
+    }
+
+    // 生成中的占位：三只带名字的鼠标轮流框出版面（按类型给个大概的样子），框里闪骨架，一遍遍画。位置都是百分比，放哪都行
+    const GD_PLAN = {
+      app: [[0, 0, 100, 11], [5, 14, 90, 24], [5, 42, 44, 4], [5, 49, 90, 11], [5, 63, 90, 11], [5, 77, 90, 9], [0, 90, 100, 10]],
+      web: [[0, 0, 100, 9], [6, 15, 52, 8], [6, 26, 38, 4], [6, 35, 88, 29], [6, 70, 27, 23], [36.5, 70, 27, 23], [67, 70, 27, 23]],
+      poster: [[8, 6, 84, 50], [8, 61, 70, 8], [8, 72, 50, 4], [8, 84, 36, 7]],
+      slides: [[6, 10, 60, 13], [6, 32, 40, 52], [52, 32, 42, 52]],
+      email: [[10, 4, 80, 7], [10, 14, 80, 30], [10, 48, 60, 5], [10, 56, 80, 14], [10, 75, 30, 6]],
+    }
+    const GD_C = ['#4d6bfe', '#e8590c', '#0ca678']
+    /** 占位里的鼠标什么时候动：换了在做的事、或者又写了 15 行就加一；不在生成就不动 */
+    function pulseStep(pr, busy, key, ln) {
+      if (!busy) {
+        pr.key = ''
+        pr.lines = 0
+        return pr.n
+      }
+      if (ln < pr.lines) pr.lines = ln
+      if (key !== pr.key) {
+        pr.key = key
+        pr.lines = ln
+        pr.n++
+      } else if (ln - pr.lines >= 15) {
+        pr.lines = ln
+        pr.n++
+      }
+      return pr.n
+    }
+    const planOf = (kind) => GD_PLAN[kind === 'miniprogram' ? 'app' : kind === 'tablet' || kind === 'desktop' ? 'web' : kind] || GD_PLAN.web
+    const reduced = () => { try { return matchMedia('(prefers-reduced-motion: reduce)').matches } catch { return false } }
+
+    /**
+     * 生成中的占位。三只带名字的鼠标先把版面框一遍，框完就停住——不循环；之后模型每真有一点动静
+     * （换了在做的事、又写了一截），才有一只去重新框一块。模型停着，它们也停着。
+     */
+    function GhostDraw({ t, kind, pulse = 0 }) {
+      const ref = useRef(null)
+      const plan = planOf(kind)
+      const S = useRef(null)
+      const EASE_K = 'cubic-bezier(.3,.7,.2,1)'
+      useEffect(() => {
+        const el = ref.current
+        if (!el) return
+        const boxes = [...el.querySelectorAll('.b')]
+        const curs = [...el.querySelectorAll('.c')]
+        const s = { boxes, curs, pos: curs.map((_, i) => ({ x: 30 + i * 20, y: 112 })), cur: [], box: [], last: -1, seen: pulse, till: 0, still: typeof el.animate !== 'function' || reduced() }
+        S.current = s
+        if (s.still) return
+        const STEP = 520
+        const MOVE = 320
+        const DRAG = 420
+        const paths = curs.map((_, i) => [{ ms: 0, x: s.pos[i].x, y: s.pos[i].y, o: 0 }])
+        plan.forEach(([x, y, w, hh], i) => {
+          const s0 = 250 + i * STEP
+          const path = paths[i % curs.length]
+          const last = path[path.length - 1]
+          path.push({ ms: s0, x: last.x, y: last.y, o: 1 }, { ms: s0 + MOVE, x, y, o: 1 }, { ms: s0 + MOVE + DRAG, x: Math.min(97, x + w), y: Math.min(97, y + hh), o: 1 })
+          const box = boxes[i]
+          if (box) {
+            s.box[i] = box.animate([
+              { opacity: 0, clipPath: 'inset(0 100% 100% 0)' },
+              { offset: 0.001, opacity: 1, clipPath: 'inset(0 100% 100% 0)', easing: EASE_K },
+              { opacity: 1, clipPath: 'inset(0 0 0 0)' },
+            ], { duration: DRAG, delay: s0 + MOVE, fill: 'both' })
+          }
+        })
+        let end = 0
+        curs.forEach((c, i) => {
+          const path = paths[i]
+          const D = path[path.length - 1].ms || 1
+          end = Math.max(end, D)
+          const kf = []
+          for (const p of path) {
+            const o = p.ms / D
+            if (kf.length && o <= kf[kf.length - 1].offset) continue
+            kf.push({ offset: o, left: p.x + '%', top: p.y + '%', opacity: p.o, easing: EASE_K })
+          }
+          if (kf[kf.length - 1].offset < 1) kf.push({ ...kf[kf.length - 1], offset: 1 })
+          const last = path[path.length - 1]
+          s.pos[i] = { x: last.x, y: last.y }
+          c.classList.toggle('flip', last.x > 78)
+          s.cur[i] = c.animate(kf, { duration: D, fill: 'forwards' })
+        })
+        s.till = performance.now() + end
+        return () => { s.cur.forEach((a) => a && a.cancel()); s.box.forEach((a) => a && a.cancel()) }
+      }, [plan])
+      // 模型真有动静：轮到的那只去重新框一块（框过的那块先收起再跟着鼠标拉开）
+      useEffect(() => {
+        const s = S.current
+        if (!s || s.still || pulse === s.seen) return
+        s.seen = pulse
+        const now = performance.now()
+        if (now < s.till) return // 头一遍还没框完 / 上一下还没做完：这一下不插队
+        const k = pulse % s.curs.length
+        let j = Math.floor(Math.random() * plan.length)
+        if (j === s.last) j = (j + 1) % plan.length
+        s.last = j
+        const [x, y, w, hh] = plan[j]
+        const MOVE = 420
+        const DRAG = 480
+        const from = s.pos[k]
+        const to = { x: Math.min(97, x + w), y: Math.min(97, y + hh) }
+        const c = s.curs[k]
+        const prev = s.cur[k]
+        s.cur[k] = c.animate([
+          { left: from.x + '%', top: from.y + '%', opacity: 1, easing: EASE_K },
+          { offset: MOVE / (MOVE + DRAG), left: x + '%', top: y + '%', opacity: 1, easing: EASE_K },
+          { left: to.x + '%', top: to.y + '%', opacity: 1 },
+        ], { duration: MOVE + DRAG, fill: 'forwards' })
+        if (prev) prev.cancel()
+        s.pos[k] = to
+        c.classList.toggle('flip', to.x > 78)
+        const box = s.boxes[j]
+        if (box) {
+          const pb = s.box[j]
+          s.box[j] = box.animate([
+            { opacity: 1, clipPath: 'inset(0 100% 100% 0)', easing: EASE_K },
+            { opacity: 1, clipPath: 'inset(0 0 0 0)' },
+          ], { duration: DRAG, delay: MOVE, fill: 'both' })
+          if (pb) pb.cancel()
+        }
+        s.till = now + MOVE + DRAG
+      }, [pulse])
+      const names = [t('curLayout'), t('curColor'), t('curCopy')]
+      return h('div', { className: 'ddp-gd', ref, 'aria-hidden': true },
+        ...plan.map(([x, y, w, hh], i) => h('i', { key: 'b' + i, className: 'b', style: { left: x + '%', top: y + '%', width: w + '%', height: hh + '%', '--c': GD_C[i % 3] } })),
+        ...GD_C.map((c, i) => h('span', { key: 'c' + i, className: 'c', style: { '--c': c, left: (30 + i * 20) + '%', top: '112%' } },
+          h('svg', { viewBox: '0 0 17 21' }, h('path', { d: 'M1.2 1.2v15.6l4.3-4 3 6.6 2.9-1.3-3-6.5h6z' })),
+          h('em', null, names[i]))))
+    }
+
+    /**
+     * 边写边看：预览服务器上正在写的那一页（/某屏.html?__ddp_draft=…），浏览器边收边画。
+     * 页面里的小脚本报到后才显出来（之前看到的是底下的占位），画布缩放告诉它，鼠标和字看起来一样大。
+     */
+    function DraftFrame({ url, z = 1, lang, onEnd }) {
+      const ref = useRef(null)
+      const [live, setLive] = useState(false)
+      const zr = useRef(z)
+      zr.current = z
+      const endR = useRef(onEnd)
+      endR.current = onEnd
+      const src = url + (url.includes('?') ? '&' : '?') + 'lang=' + (lang === 'en' ? 'en' : 'zh')
+      let origin = '*'
+      try { origin = new URL(url).origin } catch { /* 地址不对就不发 */ }
+      const tell = (zz) => {
+        const f = ref.current
+        try { if (f && f.contentWindow) f.contentWindow.postMessage({ dshDraft: 'zoom', z: zz }, origin) } catch { /* 页面已经换了 */ }
+      }
+      useEffect(() => {
+        setLive(false)
+        const end = () => { if (endR.current) endR.current(url) }
+        // 一直没报到（草稿已经收走、给的是真文件）：别干等，算放完了
+        let quiet = setTimeout(end, 6000)
+        const on = (e) => {
+          const f = ref.current
+          if (!f || e.source !== f.contentWindow || !e.data) return
+          if (e.data.dshDraft === 'end') return end() // 写完、鼠标也退场了：可以换真文件了
+          if (e.data.dshDraft !== 'hello') return
+          clearTimeout(quiet)
+          quiet = null
+          setLive(true)
+          tell(zr.current)
+        }
+        addEventListener('message', on)
+        return () => { clearTimeout(quiet); removeEventListener('message', on) }
+      }, [src])
+      useEffect(() => { if (live) tell(z) }, [z, live])
+      return h('iframe', { ref, key: src, src, className: 'ddp-draft' + (live ? ' on' : ''), title: 'draft', sandbox: 'allow-scripts allow-same-origin', tabIndex: -1, 'aria-hidden': true })
+    }
+
+    /** 没有外框的地方（第一屏的等待卡片）：按设备大小排好，再整体缩进容器里 */
+    function FitDraft({ url, kind, lang, onEnd }) {
+      const ref = useRef(null)
+      const [sc, setSc] = useState(0)
+      const [w, hh] = sizeOf('', kind)
+      useEffect(() => {
+        const el = ref.current
+        if (!el) return
+        const m = () => setSc(Math.min(el.clientWidth / w, el.clientHeight / hh) || 0)
+        m()
+        const ro = new ResizeObserver(m)
+        ro.observe(el)
+        return () => ro.disconnect()
+      }, [w, hh])
+      return h('div', { ref, className: 'ddp-fitd' },
+        sc ? h('div', { style: { width: w, height: hh, transform: `translate(-50%, -50%) scale(${sc})` } }, h(DraftFrame, { url, z: sc, lang, onEnd })) : null)
+    }
+
     function Skeleton({ gone }) {
       return h('div', { className: 'ddp-skel' + (gone ? ' gone' : '') },
         h('b', { style: { height: 22, width: '38%' } }),
@@ -4057,23 +4964,6 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         err ? h('div', { className: 'ddp-err', style: className ? { width: '100%' } : { position: 'absolute', top: 40, left: 12 } }, err) : null)
     }
 
-    /** 空状态的小插画：页面线框，光标移过去，框出一块 */
-    function EmptyArt() {
-      return h('svg', { className: 'ddp-art', viewBox: '0 0 176 120', 'aria-hidden': true },
-        h('rect', { className: 'pg', x: 8, y: 6, width: 160, height: 108, rx: 11 }),
-        h('path', { className: 'ln', d: 'M8 23h160' }),
-        h('circle', { className: 'dt', cx: 19, cy: 14.5, r: 2.4 }),
-        h('circle', { className: 'dt', cx: 27, cy: 14.5, r: 2.4 }),
-        h('circle', { className: 'dt', cx: 35, cy: 14.5, r: 2.4 }),
-        h('rect', { className: 'sk', x: 22, y: 35, width: 78, height: 9, rx: 4.5 }),
-        h('rect', { className: 'sk', x: 22, y: 50, width: 58, height: 6, rx: 3 }),
-        h('rect', { className: 'bt', x: 22, y: 66, width: 44, height: 15, rx: 7.5 }),
-        h('rect', { className: 'sk', x: 106, y: 35, width: 48, height: 48, rx: 9 }),
-        h('rect', { className: 'sk', x: 22, y: 92, width: 132, height: 10, rx: 5 }),
-        h('rect', { className: 'sel', x: 16, y: 60, width: 56, height: 27, rx: 10 }),
-        h('path', { className: 'cur', d: 'M0 0l6.5 16 2.4-6.6 6.6-2.4z' }))
-    }
-
     /**
      * 外框：网页是浏览器窗口，App / 平板是带圆角边框的设备（App 还有灵动岛，小程序再加右上角的胶囊），海报 / 幻灯片 / 邮件是一张卡片。
      * fill = 铺满舞台（单页看网页）。不管哪种，里面那屏都在同一个位置（换类型不重载页面）。top：页面顶栏右边是深色（胶囊画白的）
@@ -4252,9 +5142,9 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         setCur(id)
         const p = P.current
         const build = first ? !!p.born : !!(changes && changes.whole && p.busy)
-        postTo(id, { type: 'reveal', build })
+        postTo(id, { type: 'zoom', z: p.zoom || 1 }) // 先定缩放：生成动画里的鼠标、名字按它定大小
+        postTo(id, { type: 'reveal', build, lang: p.t && p.t('lang') === 'en' ? 'en' : 'zh' })
         postTo(id, { type: 'busy', on: !!p.busy })
-        postTo(id, { type: 'zoom', z: p.zoom || 1 })
         if (p.picking) postTo(id, pickMsg())
         if (p.demo) postTo(id, { type: 'demo', on: true })
         if (p.textEdit) postTo(id, { type: 'edit', on: true, hint: false })
@@ -4506,27 +5396,6 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     }
 
     /** 类型菜单：网页 / App / 平板 / 海报 / 幻灯片 / 邮件 */
-    function KindMenu({ t, kind, open, setOpen, onPick, disabled }) {
-      const ref = useRef(null)
-      useEffect(() => {
-        if (!open) return undefined
-        const off = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
-        const esc = (e) => { if (e.key === 'Escape') setOpen(false) }
-        document.addEventListener('pointerdown', off, true)
-        window.addEventListener('keydown', esc)
-        return () => {
-          document.removeEventListener('pointerdown', off, true)
-          window.removeEventListener('keydown', esc)
-        }
-      }, [open])
-      return h('div', { className: 'ddp-kind', ref },
-        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')),
-          ...KIND_LIST.map((k) => h('button', { key: k, role: 'menuitemradio', 'aria-checked': k === kind, className: k === kind ? 'sel' : '', onClick: () => onPick(k) },
-            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
@@ -4793,9 +5662,9 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       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 { /* 存不了就每次都教 */ }
+        try { const n = Number(localStorage.getItem('ddp-mk-coach')) || 0; if (n >= 1) return false; localStorage.setItem('ddp-mk-coach', String(n + 1)) } catch { /* 存不了就每次都教 */ }
         return true
       })
       const shapes = hist.list[hist.i]
@@ -5062,39 +5931,76 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             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, onSaveStyle, onLibrary, onClose }) {
+    /** 设计变量的小预览（字号、圆角、间距、阴影、字体） */
+    function tokenPreview(kind, v) {
+      const px = Math.max(0, parseFloat(v) * (/rem|em$/.test(v) ? 16 : 1)) || 0
+      switch (kind) {
+        case 'font': return h('span', { style: { fontFamily: v, fontSize: 15, fontWeight: 600 } }, 'Aa')
+        case 'size': return h('span', { style: { fontSize: Math.min(22, px), fontWeight: 600, lineHeight: 1 } }, '字')
+        case 'space': return h('i', { className: 'bar', style: { width: Math.max(2, Math.min(24, px / 2)) } })
+        case 'radius': return h('i', { className: 'rd', style: { borderTopLeftRadius: Math.min(14, px) } })
+        case 'shadow': return h('i', { className: 'sh', style: { boxShadow: v } })
+        default: return null
+      }
+    }
+
+    /**
+     * 外观面板：整套（配色直接改、别的变量交给模型、调节滑块）｜换风格（风格卡、参考图、我的风格）｜品牌（设计系统）。
+     * 整套里改的颜色和拖的滑块先在页面上看效果，底下「直接保存」写进文件，或「交给模型」。
+     */
+    function LookPanel({ t, tab, setTab, tokens, tv, onTv, onTokAsk, onTokMake, tw, live, onTw, onTwMake, write, onReset, onAsk, onSave, onPickStyle, onRef, onSaveStyle, onInspire, brand, onClose }) {
       const groups = {}
       for (const tok of tokens) (groups[tokenKind(tok)] = groups[tokenKind(tok)] || []).push(tok)
-      const px = (v) => Math.max(0, parseFloat(v) * (/rem|em$/.test(v) ? 16 : 1)) || 0
-      const preview = (kind, v) => {
-        switch (kind) {
-          case 'color': return h('i', { className: 'sw', style: { background: v } })
-          case 'font': return h('span', { style: { fontFamily: v, fontSize: 15, fontWeight: 600 } }, 'Aa')
-          case 'size': return h('span', { style: { fontSize: Math.min(22, px(v)), fontWeight: 600, lineHeight: 1 } }, '字')
-          case 'space': return h('i', { className: 'bar', style: { width: Math.max(2, Math.min(24, px(v) / 2)) } })
-          case 'radius': return h('i', { className: 'rd', style: { borderTopLeftRadius: Math.min(14, px(v)) } })
-          case 'shadow': return h('i', { className: 'sh', style: { boxShadow: v } })
-          default: return null
-        }
-      }
-      return h('div', { className: 'ddp-tokens', onPointerDown: (e) => e.stopPropagation() },
-        h('header', null, h(I.palette), h('b', null, t('tokens')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
-        tokens.length ? h('p', { className: 'tip' }, t('tokensTip')) : null,
-        h('div', { className: 'bd' },
-          tokens.length
-            ? TOKEN_GROUPS.filter((g) => groups[g]).map((g) => h('div', { key: g },
+      const names = tokenLabels(t, tokens)
+      const list = (tw && tw.list) || []
+      const errs = (tw && tw.errors) || []
+      const n = Object.keys(tv).length + list.filter((k) => hasOwn(live, k.id)).length
+      const tabs = [['set', t('lookSet')], ['style', t('lookStyle')], ['brand', t('lookBrand')]]
+      let body
+      if (tab === 'style') {
+        body = [
+          h('p', { className: 'tip', key: 'tip' }, t('stylesSwap')),
+          h('div', { className: 'bd', key: 'bd' }, h(StyleCards, { t, onPick: onPickStyle }),
+            h('div', { className: 'ddp-lk-more' },
+              onRef ? h('button', { title: t('refPickTip'), onClick: onRef }, h(I.image), h('span', null, t('lookRef'))) : null,
+              onSaveStyle && tokens.length ? h('button', { title: t('inSaveStyleTip'), onClick: onSaveStyle }, h(I.plus), h('span', null, t('tkSaveStyle'))) : null,
+              onInspire ? h('button', { onClick: onInspire }, h(I.box), h('span', null, t('lookInspire'))) : null)),
+        ]
+      } else if (tab === 'brand') {
+        body = [brand]
+      } else {
+        const colors = groups.color || []
+        body = [
+          h('div', { className: 'bd', key: 'bd' },
+            tokens.length ? null : h('div', { className: 'none' }, t('tokensEmpty'), h('div', null, h('button', { className: 'ddp-go', onClick: onTokMake }, t('tokensAsk')))),
+            colors.length ? h('h4', null, t('gColor'), h('span', null, t('lookColorTip'))) : null,
+            colors.length ? h('div', { className: 'ddp-lkc' }, ...colors.map((tok) => {
+              const v = hasOwn(tv, tok.name) ? tv[tok.name] : tok.value
+              return h('label', { key: tok.name, className: 'it' + (hasOwn(tv, tok.name) ? ' on' : ''), title: `${tok.name}: ${v}` },
+                h('span', { className: 'sw', style: { background: v } },
+                  h('input', { type: 'color', value: colorHex(v, tokens), 'aria-label': names.get(tok.name), onChange: (e) => onTv(tok.name, e.target.value) })),
+                h('span', { className: 'tx' }, h('span', { className: 'nm' }, names.get(tok.name)), h('span', { className: 'vl' }, v)))
+            })) : null,
+            ...TOKEN_GROUPS.filter((g) => g !== 'color' && groups[g]).map((g) => h('div', { key: g },
               h('h4', null, t(TOKEN_KEY[g])),
-              ...groups[g].map((tok) => h('button', { key: tok.name, className: 'ddp-tok', title: `${tok.name}: ${tok.value}`, onClick: () => onPick(tok) },
-                h('span', { className: g === 'shadow' ? 'pv lt' : 'pv' }, preview(g, tok.value)),
-                h('span', { className: 'tx' }, h('span', { className: 'nm' }, tok.name), h('span', { className: 'vl' }, tok.value))))))
-            : h('div', { className: 'none' }, t('tokensEmpty'), h('div', null, h('button', { className: 'ddp-go', onClick: onAsk }, t('tokensAsk'))))),
-        onRef || onStyles || onLibrary ? h('footer', null,
-          onSaveStyle && tokens.length ? h('button', { title: t('inSaveStyleTip'), onClick: onSaveStyle }, h(I.plus), h('span', null, t('tkSaveStyle'))) : null,
-          onStyles ? h('button', { onClick: onStyles }, h(I.sparkle), h('span', null, t('stylesOpen'))) : null,
-          onSystems ? h('button', { onClick: onSystems }, h(I.library), h('span', null, t('sysOpen'))) : null,
-          onRef ? h('button', { title: t('refPickTip'), onClick: onRef }, h(I.image), h('span', null, t('refPick'))) : null,
-          onLibrary ? h('button', { onClick: onLibrary }, h(I.box), h('span', null, t('library'))) : null) : null)
+              ...groups[g].map((tok) => h('button', { key: tok.name, className: 'ddp-tok', title: `${tok.name}: ${tok.value}\n${t('lookTokTip')}`, onClick: () => onTokAsk(tok) },
+                h('span', { className: g === 'shadow' ? 'pv lt' : 'pv' }, tokenPreview(g, tok.value)),
+                h('span', { className: 'tx' }, h('span', { className: 'nm' }, names.get(tok.name)), h('span', { className: 'vl' }, tok.value)))))),
+            h('h4', null, t('lookTw')),
+            list.length
+              ? h('div', { className: 'ddp-style ddp-lktw' }, ...list.map((k) => tweakRow(t, k, live, onTw)), errs.length ? h('div', { className: 'note', key: 'err' }, errs.join('；')) : null)
+              : h('p', { className: 'ddp-lk-none' }, errs.length ? errs.join('；') : t('lookTwNone'), ' ', h('button', { className: 'lk', onClick: () => onTwMake(errs) }, t(errs.length ? 'twFix' : 'twMake')))),
+          n ? h('footer', { className: 'row', key: 'ft' },
+            h('span', { className: 'cnt' }, t('lookN', { n })),
+            h('button', { onClick: onReset }, h('span', null, t('styleReset'))),
+            h('button', { onClick: onAsk, title: t('twAskTip') }, h('span', null, t('styleAsk'))),
+            h('button', { className: 'go', onClick: onSave, disabled: !write.ok, title: write.ok ? t('lookSaveTip') : write.tip }, h('span', null, t('lookSave')))) : null,
+        ]
+      }
+      return h('div', { className: 'ddp-tokens ddp-look', onPointerDown: (e) => e.stopPropagation() },
+        h('header', null, h(I.palette), h('b', null, t('look')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+        h('div', { className: 'ddp-lktabs', role: 'tablist' }, ...tabs.map(([k, label]) => h('button', { key: k, role: 'tab', 'aria-selected': tab === k, className: tab === k ? 'on' : '', onClick: () => setTab(k) }, label))),
+        ...body)
     }
 
     /** 设计体检的结果：按屏列出问题（和页面上的编号一样），点一条在页面上滚过去、那个框闪一下 */
@@ -5118,7 +6024,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         n ? h('p', { className: 'tip' }, t('checkNote')) : null,
         h('footer', { className: 'row' },
           h('button', { onClick: onAgain, disabled: ck.running }, h(I.refresh), h('span', null, t('checkAgain'))),
-          h('button', { className: 'go', onClick: onFix, disabled: ck.running || !n }, h(I.sparkle), h('span', null, t('checkFix')))))
+          n ? h('button', { className: 'go', onClick: onFix, disabled: ck.running, title: t('checkFixTip') }, h(I.sparkle), h('span', null, t('checkFix'))) : null))
     }
 
     /**
@@ -5136,13 +6042,15 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       // 现在用的是哪个变量：改过的看改成了什么，没改的看样式表里怎么写的
       const varOf = (k) => { const m = VAR_ONLY.exec(String(cur(k) || '').trim()); return m ? m[1] : k in sty.live ? '' : (sty.vars || {})[k] || '' }
       const set = (props, v) => onSet(Object.fromEntries(props.map((p) => [p, v])))
+      const names = tokenLabels(t, tokens)
       const chips = (kind, props) => (groups[kind] || []).slice(0, 10).map((tok) => h('button', {
         key: tok.name,
         className: 'chip' + (kind === 'color' ? ' c' : '') + (varOf(props[0]) === tok.name ? ' on' : ''),
         title: `${tok.name}: ${tok.value}`,
         onClick: () => set(props, `var(${tok.name})`),
-      }, kind === 'color' ? h('i', { style: { background: tok.value } }) : tok.name.replace(/^--/, '')))
-      const shown = (k, text) => (varOf(k) ? h('em', { className: 'v', title: t('styleVar', { name: varOf(k) }) }, varOf(k)) : h('em', null, text))
+      }, kind === 'color' ? h('i', { style: { background: tok.value } }) : names.get(tok.name)))
+      const nice = (v) => names.get(v) || v.replace(/^--/, '')
+      const shown = (k, text) => (varOf(k) ? h('em', { className: 'v', title: t('styleVar', { name: varOf(k) }) }, nice(varOf(k))) : h('em', null, text))
       const slider = (key, props, max, kind) => {
         const v = Math.round(pxOf(cur(props[0]), tokens) ?? 0)
         const c = kind ? chips(kind, props) : []
@@ -5160,7 +6068,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const w = Math.min(700, Math.max(400, Math.round(parseInt(cur('font-weight'), 10) / 100) * 100 || 400))
       const n = Object.keys(sty.live).length
       return box(
-        h('p', { className: 'who', title: sty.selector }, h('code', null, sty.name), sty.text ? ` · ${sty.text}` : ''),
+        h('p', { className: 'who', title: `${sty.name} · ${sty.selector}` }, ...(() => { const e = elemLabel(t, sty.name, sty.text); return [h('b', null, e.role), e.text ? h('span', null, `「${e.text}」`) : null] })()),
         h('div', { className: 'bd' },
           slider('styleFont', ['font-size'], 72, 'size'),
           h('div', { className: 'row', key: 'w' },
@@ -5173,10 +6081,10 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           slider('stylePadX', ['padding-left', 'padding-right'], 48, 'space'),
           sty.layout ? slider('styleGap', ['gap'], 48, 'space') : null),
         n ? h('div', { className: 'cnt' }, t('styleN', { n: styleChanges(t, sty).length })) : null,
-        h('footer', { className: 'row' },
-          h('button', { onClick: onReset, disabled: !n }, h('span', null, t('styleReset'))),
-          h('button', { onClick: onAsk, disabled: !n, title: t('styleAskTip') }, h('span', null, t('styleAsk'))),
-          h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
+        n ? h('footer', { className: 'row' },
+          h('button', { onClick: onReset }, h('span', null, t('styleReset'))),
+          h('button', { onClick: onAsk, title: t('styleAskTip') }, h('span', null, t('styleAsk'))),
+          h('button', { className: 'go', onClick: onSave, disabled: !write.ok, title: write.ok ? t('lookSaveTip') : write.tip }, h('span', null, t('styleSave')))) : null)
     }
 
     /** 风格样板：用这个风格画的一小屏（顶栏、标题、按钮、商品卡、数据卡）；卡片上缩小着放，点开是原大 */
@@ -5207,12 +6115,13 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     }
 
     /** 一排风格卡：每张是缩小的样板；点一张看原大样板（左右翻），「用这个风格」才交给 onPick */
-    function StyleCards({ t, onPick }) {
+    function StyleCards({ t, onPick, limit }) {
       const en = t('lang') === 'en'
       // 内置的 20 张 + 设计库 › 灵感里存的「我的风格」
       const mine = useInspire().filter((x) => x.type === 'style' && x.style && x.style.c).map(myStyleOf)
       const LIST = mine.length ? [...STYLES, ...mine] : STYLES
       const [on, setOn] = useState(-1) // 正在看样板的那个；-1 是看全部
+      const [all, setAll] = useState(false) // 空白页只放前 limit 张，点「更多风格」全展开
       const was = useRef(-1)
       const box = useRef(null)
       useEffect(() => {
@@ -5224,6 +6133,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         // 列表和样板高矮不一样，外面滚动的位置会变：把样板 / 刚才那张卡滚进来
         if (was.current >= 0 || on >= 0) (on >= 0 ? el : f || el).scrollIntoView({ block: 'nearest' })
         if (on >= 0) was.current = on
+        if (on >= 0 && limit && on >= limit) setAll(true) // 样板里翻到了后面的卡：回全部时要看得到它
       }, [on])
       const n = LIST.length
       if (on >= 0) {
@@ -5245,17 +6155,12 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             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 }, ...LIST.map((x, i) => h('button', { key: x.id, className: 'ddp-sc' + (x.mine ? ' mine' : ''), title: en ? x.den : x.dzh, onClick: () => setOn(i) },
+      const cut = limit && !all && n > limit
+      const grid = h('div', { className: 'ddp-styles' + (cut ? ' one' : ''), ref: box }, ...(cut ? LIST.slice(0, limit) : LIST).map((x, i) => h('button', { key: x.id, className: 'ddp-sc' + (x.mine ? ' mine' : ''), 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))))
-    }
-
-    /** 换风格面板（设计已经打开时）：点一张卡让模型整套换成那个风格 */
-    function StylesPanel({ t, onPick, onClose }) {
-      return h('div', { className: 'ddp-tokens', onPointerDown: (e) => e.stopPropagation() },
-        h('header', null, h(I.palette), h('b', null, t('stylesTitle')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
-        h('p', { className: 'tip' }, t('stylesSwap')),
-        h('div', { className: 'bd' }, h(StyleCards, { t, onPick })))
+      if (!limit || n <= limit) return grid
+      return h('div', { className: 'ddp-stylesw' }, grid, h('button', { className: 'lk ddp-more-st', onClick: () => setAll(!all) }, all ? t('stylesLess') : t('stylesMore', { n: n - limit })))
     }
 
     // ── 调节滑块、品牌设计系统、转成代码 ─────────────────────────────────────
@@ -5283,41 +6188,32 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       return t('twAskHead') + '\n' + rows.join('\n') + '\n' + t('twAskTail') + '\n'
     }
 
-    /** 调节滑块面板：模型给这套设计做的几个维度（tweaks.json），拖的时候所有屏一起变，定下来写回文件或交给模型 */
-    function TweaksPanel({ t, tw, live, write, onSet, onReset, onAsk, onSave, onMake, onClose }) {
-      const head = h('header', null, h(I.dial), h('b', null, t('tweaks')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close)))
-      const box = (...kids) => h('div', { className: 'ddp-tokens ddp-style ddp-tw', onPointerDown: (e) => e.stopPropagation() }, head, ...kids)
-      const list = (tw && tw.list) || []
-      const errs = (tw && tw.errors) || []
-      if (!list.length) {
-        return box(h('div', { className: 'bd' }, h('div', { className: 'none' },
-          errs.length ? errs.map((e, i) => h('div', { key: i }, e)) : t('twEmpty'),
-          h('div', null, h('button', { className: 'ddp-go', onClick: () => onMake(errs) }, t(errs.length ? 'twFix' : 'twMake'))))))
-      }
-      const cur = (k) => (hasOwn(live, k.id) ? live[k.id] : k.value)
-      const row = (k) => {
-        const v = cur(k)
-        const lab = h('label', null, h('span', { title: k.var || k.attr }, k.label), h('em', { className: hasOwn(live, k.id) ? 'v' : '' }, tweakShown(k, v)))
-        const note = k.note ? h('div', { className: 'note' }, k.note) : null
-        if (k.kind === 'range') {
-          return h('div', { className: 'row', key: k.id }, lab,
-            h('input', { type: 'range', min: k.min, max: k.max, step: k.step, value: v, 'aria-label': k.label, onChange: (e) => onSet(k, Number(e.target.value)) }), note)
-        }
-        if (k.kind === 'color') {
-          return h('div', { className: 'row', key: k.id }, lab,
-            h('div', { className: 'chips' }, h('input', { type: 'color', value: /^#[0-9a-f]{6}$/i.test(v) ? v : '#000000', 'aria-label': k.label, onChange: (e) => onSet(k, e.target.value) })), note)
-        }
+    /** 调节滑块的一行：模型给这套设计做的维度（tweaks.json），拖的时候所有屏一起变 */
+    function tweakRow(t, k, live, onSet) {
+      const v = hasOwn(live, k.id) ? live[k.id] : k.value
+      const lab = h('label', null, h('span', { title: k.var || k.attr }, k.label), h('em', { className: hasOwn(live, k.id) ? 'v' : '' }, tweakShown(k, v)))
+      const note = k.note ? h('div', { className: 'note' }, k.note) : null
+      if (k.kind === 'range') {
         return h('div', { className: 'row', key: k.id }, lab,
-          h('div', { className: 'seg' }, ...(k.options || []).map((o) => h('button', { key: o.value, className: String(v) === o.value ? 'on' : '', onClick: () => onSet(k, o.value) }, o.label))), note)
+          h('input', { type: 'range', min: k.min, max: k.max, step: k.step, value: v, 'aria-label': k.label, onChange: (e) => onSet(k, Number(e.target.value)) }), note)
       }
-      const n = list.filter((k) => hasOwn(live, k.id)).length
-      return box(
-        h('p', { className: 'tip' }, t('twTip')),
-        h('div', { className: 'bd' }, ...list.map(row), errs.length ? h('div', { className: 'note', key: 'err' }, errs.join('；')) : null),
-        h('footer', { className: 'row' },
-          h('button', { onClick: onReset, disabled: !n }, h('span', null, t('styleReset'))),
-          h('button', { onClick: onAsk, disabled: !n, title: t('twAskTip') }, h('span', null, t('styleAsk'))),
-          h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
+      if (k.kind === 'color') {
+        return h('div', { className: 'row', key: k.id }, lab,
+          h('div', { className: 'chips' }, h('input', { type: 'color', value: /^#[0-9a-f]{6}$/i.test(v) ? v : '#000000', 'aria-label': k.label, onChange: (e) => onSet(k, e.target.value) })), note)
+      }
+      return h('div', { className: 'row', key: k.id }, lab,
+        h('div', { className: 'seg' }, ...(k.options || []).map((o) => h('button', { key: o.value, className: String(v) === o.value ? 'on' : '', onClick: () => onSet(k, o.value) }, o.label))), note)
+    }
+
+    /** 外观面板里改的：滑块 + 直接改的设计变量 → 交给模型的一段字 */
+    function formatLook(t, list, live, tokens, tv) {
+      let out = Object.keys(live).length ? formatTweaks(t, list, live) : ''
+      const rows = Object.entries(tv).map(([name, v]) => {
+        const tok = tokens.find((x) => x.name === name)
+        return `- ${name}（${tok ? tokenLabel(t, tok) : name}）：${tok ? tok.value : '?'} → ${v}`
+      })
+      if (rows.length) out += t('lookAskHead') + '\n' + rows.join('\n') + '\n' + t('lookAskTail') + '\n'
+      return out
     }
 
     async function getJson(path) {
@@ -5348,7 +6244,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       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 }) {
+    function SystemsPanel({ t, rev, hasDesign, onExtract, onApply, onSay, onClose, bare }) {
       const [data, setData] = useState(null)
       const [err, setErr] = useState('')
       const [src, setSrc] = useState('')
@@ -5366,9 +6262,13 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         onExtract(v)
         setSrc('')
       }
-      return h('div', { className: 'ddp-tokens ddp-sys', onPointerDown: (e) => e.stopPropagation() },
-        h('header', null, h(I.library), h('b', null, t('systems')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+      return h('div', { className: bare ? 'ddp-sys bare' : 'ddp-tokens ddp-sys', onPointerDown: (e) => e.stopPropagation() },
+        bare ? null : h('header', null, h(I.library), h('b', null, t('systems')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
         h('p', { className: 'tip' }, t('sysTip')),
+        h('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'))),
         h('div', { className: 'bd' },
           err ? h('div', { className: 'none' }, err) : null,
           data && !list.length ? h('div', { className: 'none' }, t('sysEmpty')) : null,
@@ -5379,12 +6279,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             x.sources && x.sources.length ? h('small', { title: x.sources.join('\n') }, x.sources[0]) : null,
             h('div', { className: 'acts' },
               h('button', { onClick: () => setDef(x, !x.default) }, x.default ? t('sysUnset') : t('sysSet')),
-              hasDesign ? h('button', { onClick: () => onApply(x) }, t('sysApply')) : null)))),
-        h('footer', null,
-          h('form', { onSubmit: go },
-            h('input', { value: src, placeholder: t('sysPh'), 'aria-label': t('sysPh'), onChange: (e) => setSrc(e.target.value) }),
-            h(DirButton, { t, onPicked: setSrc, onSay }),
-            h('button', { type: 'submit', disabled: !src.trim() }, t('sysExtract')))))
+              hasDesign ? h('button', { onClick: () => onApply(x) }, t('sysApply')) : null)))))
     }
 
     const FW_LIST = ['react', 'vue', 'next', 'html']
@@ -5392,6 +6287,12 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     // 小程序的设计：先列 uni-app、原生小程序
     const FW_MINI = ['uniapp', 'weapp']
 
+    /** 「uni-app（HBuilderX，Vue 3）」→「uni-app · HBuilderX · Vue 3」：放进「跟现有项目一样：…」里别括号套括号 */
+    const dirParts = (x) => String(x || '').split(/[\\/]+/).filter(Boolean)
+    const dirName = (x) => dirParts(x).pop() || String(x || '')
+    const dirParent = (x) => { const q = dirParts(x); return q.length > 1 ? q[q.length - 2] : '' }
+    const flatLabel = (x) => String(x || '').replace(/\s*[（(]\s*/g, ' · ').replace(/\s*[，,、]\s*/g, ' · ').replace(/\s*[）)]\s*/g, ' ').replace(/\s+/g, ' ').trim()
+
     /** 转成代码：用什么做、放哪、转几屏；点了把一段话放进输入框，模型调 handoff_design 照交接包做，每屏做完 compare_design */
     function HandoffPanel({ t, sid, root, fileTarget, count, cur, onGo, onSay, onClose }) {
       const [info, setInfo] = useState(null)
@@ -5400,6 +6301,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const [one, setOne] = useState(false)
       const [moved, setMoved] = useState(null) // 选的文件夹不能直接放：{ dest, why }（'nested' 在里面新建、'beside' 放设计目录旁边）
       const [checking, setChecking] = useState('') // 'busy' 正在问服务器这个文件夹；别的字是没问成的原因
+      const [typing, setTyping] = useState(false) // 路径平时只显示文件夹名，点了才变输入框
       // 现在是哪套设计、第几次选：选文件夹的窗口开着时换了设计、或者又选了一次 / 手改了路径，旧的结果作废
       // hand：用户自己点过框架（换设计前一直听用户的，不再按选的文件夹自动换）
       const live = useRef({ root, seq: 0, hand: false })
@@ -5450,7 +6352,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const p = info.project || {}
       const same = !!p.framework
       // 「跟现有项目一样」认得出 HBuilderX 的 uni-app、微信原生小程序（没有 package.json 也行）
-      const sameLabel = p.framework === 'weapp' ? t('hoWeapp') : p.label
+      const sameLabel = flatLabel(p.framework === 'weapp' ? t('hoWeapp') : p.label)
       const list = info.kind === 'miniprogram' ? [...FW_MINI, ...FW_LIST] : FW_LIST
       const name = (k) => (k === 'html' ? t('hoHtml') : k === 'uniapp' ? t('hoUni') : k === 'weapp' ? t('hoWeapp') : FW_LABEL[k])
       const opts = [...(same ? [['same', t('hoSame', { label: sameLabel })]] : []), ...list.map((k) => [k, name(k)])]
@@ -5462,7 +6364,9 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             ...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('div', { className: 'pathrow' },
-              h('input', { type: 'text', value: dest, spellCheck: false, 'aria-label': t('hoDest'), onChange: (e) => typeDest(e.target.value) }),
+              typing || !dest.trim()
+                ? h('input', { type: 'text', value: dest, spellCheck: false, autoFocus: typing, 'aria-label': t('hoDest'), onChange: (e) => typeDest(e.target.value), onBlur: () => setTyping(false), onKeyDown: (e) => { if (e.key === 'Enter' || e.key === 'Escape') e.currentTarget.blur() } })
+                : h('button', { type: 'button', className: 'pathv', title: dest + '\n' + t('hoEdit'), onClick: () => setTyping(true) }, h(I.folder), h('b', null, dirName(dest)), dirParent(dest) ? h('em', null, t('hoIn', { dir: dirParent(dest) })) : null),
               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),
@@ -5487,40 +6391,155 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           window.removeEventListener('keydown', esc)
         }
       }, [open])
+      // 菜单比剩下的地方高（屏多、侧栏矮）：限高、整个菜单能滚，底下的入口也点得到
+      react.useLayoutEffect(() => {
+        const wrap = ref.current
+        const m = open && wrap ? wrap.querySelector(':scope > .ddp-menu') : null
+        const box = wrap ? wrap.closest('.ddp-stage, .ddp') : null
+        if (!m || !box) return
+        const b = box.getBoundingClientRect()
+        const r = m.getBoundingClientRect()
+        const up = r.bottom <= wrap.getBoundingClientRect().top + 1
+        const room = Math.floor(up ? r.bottom - b.top - 8 : b.bottom - r.top - 8)
+        if (r.height > room) { m.style.maxHeight = Math.max(120, room) + 'px'; m.style.overflowY = 'auto' }
+      }, [open])
     }
 
     /** 导出菜单：这一屏（带外框 / 纯画面 / 整页长图）、整套展示图 */
-    function ExportMenu({ t, kind, count, open, setOpen, onPick, disabled, zip }) {
-      const ref = useRef(null)
-      useDismiss(open, setOpen, ref)
+    /** 导出的几种：这一屏（带外框 / 纯画面 / 整页长图）、整套展示图、PDF、PPT */
+    function exportItems(t, kind, count, name) {
       const items = []
-      if (FRAMED[kind]) items.push(['frame', I.single, t('exFrame')])
-      items.push(['raw', I.image, t('exRaw')])
-      if (kind !== 'poster' && kind !== 'slides') items.push(['long', I.long, t('exLong')]) // 海报、幻灯片画幅是定的，没有「整页」
+      const n = { name: name || t('exThisName') } // 写出是哪一屏，别只说「这一屏」
+      if (FRAMED[kind]) items.push(['frame', I.single, t('exFrame', n)])
+      items.push(['raw', I.image, t('exRaw', n)])
+      if (kind !== 'poster' && kind !== 'slides') items.push(['long', I.long, t('exLong', n)]) // 海报、幻灯片画幅是定的，没有「整页」
       if (count > 1) items.push(['show', I.canvas, t('exShow')])
       items.push(['pdf', I.pdf, t('exPdf')], ['pptx', I.deck, t('exPptx')])
-      if (zip) items.push(['zip', I.box, t('exZip')], ['share', I.share, t('exShare')]) // 只有本地的设计才能打包、分享
-      return h('div', { className: 'ddp-kind', ref },
-        h('button', { className: 'ddp-btn' + (open ? ' sel' : ''), title: t('exportT'), disabled, onClick: () => setOpen(!open) }, h(I.download)),
-        open ? h('div', { className: 'ddp-menu', role: 'menu' },
-          h('div', { className: 'hd' }, t('exportT')),
-          ...items.map(([mode, Icon, label]) => h('button', { key: mode, role: 'menuitem', onClick: () => onPick(mode) }, h(Icon), h('span', null, label))),
-          h('div', { className: 'ft' }, t('exWhere'))) : null)
+      return items
     }
 
     /**
-     * 「更多」：右侧栏窄的时候，工具栏上放不下的几个按钮收进这里（哪几个收起来由容器宽度的 CSS 决定）。
-     * items: [显示档 'o1' | 'o2', 图标, 名字, 选中, 不可用, 点了做什么（字符串就是在浏览器里打开的地址）]
+     * 工具栏上的下拉菜单（视图、交付、更多都用它）。
+     * items: [类名, 图标, 名字, 选中, 不可用, 点了做什么（字符串就是在浏览器里打开的地址）, 右边小字]
+     *        字符串 'hd:名字' 是小标题，'sep' 是分隔线
      */
-    function MoreMenu({ t, open, setOpen, has, items }) {
+    // 浮块按钮的悬停说明：系统 title 要等一秒多、只有一行灰字；这里停一下就出，上面名字、下面一句用途
+    // 用法：按钮带上 tipA(名字, 说明)；HoverTip 放进浮块所在的那层，自己盯着里面带 data-tip 的东西
+    const tipA = (name, desc, key) => ({ 'data-tip': name, 'data-tip-d': desc || undefined, 'data-tip-k': key || undefined, 'aria-label': desc ? name + ' — ' + desc : name, 'aria-keyshortcuts': key && !/\s/.test(key) ? key : undefined })
+    function HoverTip() {
+      const ref = useRef(null)
+      const [tip, setTip] = useState(null) // { n, d, k, cx, y, up }
+      useEffect(() => {
+        const el = ref.current
+        const box = el && el.parentElement
+        if (!box) return
+        let cur = null // 鼠标停在哪个按钮上
+        let timer = 0
+        let showing = false
+        let warmTill = 0 // 刚看过一个：挪到旁边的按钮立刻出，不再等
+        const show = (b) => {
+          if (!b.isConnected || b.getAttribute('aria-expanded') === 'true') return
+          const r = b.getBoundingClientRect()
+          const s = box.getBoundingClientRect()
+          const up = r.top + r.height / 2 > s.top + s.height / 2 // 下半截的按钮往上弹
+          showing = true
+          setTip({ n: b.dataset.tip, d: b.dataset.tipD || '', k: b.dataset.tipK || '', cx: r.left + r.width / 2 - s.left, y: up ? r.top - s.top - 8 : r.bottom - s.top + 8, up })
+        }
+        const hide = () => {
+          clearTimeout(timer)
+          if (showing) warmTill = Date.now() + 600
+          showing = false
+          setTip(null)
+        }
+        const enter = (b) => {
+          if (b === cur) return
+          cur = b
+          clearTimeout(timer)
+          if (!b) return hide()
+          if (showing || Date.now() < warmTill) show(b)
+          else timer = setTimeout(() => show(b), 350)
+        }
+        const over = (e) => { const b = e.target.closest ? e.target.closest('[data-tip]') : null; enter(b && box.contains(b) ? b : null) }
+        const leave = () => enter(null)
+        const down = () => { clearTimeout(timer); showing = false; warmTill = 0; setTip(null) } // 点了就收，等鼠标挪开再说
+        const focus = (e) => { const b = e.target.closest ? e.target.closest('[data-tip]') : null; if (b && b.matches(':focus-visible')) { cur = b; clearTimeout(timer); show(b) } }
+        const blur = () => { cur = null; hide() }
+        const key = (e) => { if (e.key === 'Escape') down() }
+        box.addEventListener('pointerover', over)
+        box.addEventListener('pointerleave', leave)
+        box.addEventListener('pointerdown', down, true)
+        box.addEventListener('focusin', focus)
+        box.addEventListener('focusout', blur)
+        box.addEventListener('keydown', key, true)
+        return () => {
+          clearTimeout(timer)
+          box.removeEventListener('pointerover', over)
+          box.removeEventListener('pointerleave', leave)
+          box.removeEventListener('pointerdown', down, true)
+          box.removeEventListener('focusin', focus)
+          box.removeEventListener('focusout', blur)
+          box.removeEventListener('keydown', key, true)
+        }
+      }, [])
+      // 量出自己多宽再摆（画出来之前）：横着别出边，上弹的贴着按钮上沿
+      react.useLayoutEffect(() => {
+        const el = ref.current
+        if (!el || !tip) return
+        const W = el.parentElement ? el.parentElement.clientWidth : 0
+        const w = el.offsetWidth
+        el.style.left = Math.max(8, Math.min(W - w - 8, tip.cx - w / 2)) + 'px'
+        el.style.top = (tip.up ? tip.y - el.offsetHeight : tip.y) + 'px'
+      }, [tip])
+      // 说明已经在按钮的 aria-label 里，读屏不用再念一遍
+      return h('div', { ref, className: 'ddp-tipbox' + (tip ? ' on' : ''), 'aria-hidden': 'true' },
+        tip ? h('div', { className: 'nm' }, h('b', null, tip.n), tip.k ? h('kbd', null, tip.k) : null) : null,
+        tip && tip.d ? h('span', null, tip.d) : null)
+    }
+
+    function DropMenu({ t, cls, btnCls, title, tip, icon, label, caret, has, open, setOpen, disabled, items, foot }) {
       const ref = useRef(null)
       useDismiss(open, setOpen, ref)
-      return h('div', { className: 'ddp-kind ddp-more', ref },
-        h('button', { className: 'ddp-btn' + (open ? ' sel' : '') + (has ? ' has' : ''), title: t('more'), onClick: () => setOpen(!open) }, h(I.more)),
+      return h('div', { className: 'ddp-kind' + (cls ? ' ' + cls : ''), ref },
+        h('button', { className: 'ddp-btn' + (btnCls ? ' ' + btnCls : '') + (open ? ' sel' : '') + (has ? ' has' : ''), ...(tip ? tipA(tip[0], tip[1], tip[2]) : { title }), 'aria-haspopup': 'menu', 'aria-expanded': open, disabled: !!disabled, onClick: () => setOpen(!open) },
+          icon ? h(icon) : null, label ? h('span', { className: 'lb' }, label) : null, caret ? h(I.caret) : null),
         open ? h('div', { className: 'ddp-menu', role: 'menu' },
-          ...items.filter(Boolean).map(([tier, Icon, label, on, off, run]) => (typeof run === 'string'
-            ? h('a', { key: label, className: tier, role: 'menuitem', href: run, target: '_blank', rel: 'noopener noreferrer', onClick: () => setOpen(false) }, h(Icon), h('span', null, label))
-            : h('button', { key: label, className: tier + (on ? ' sel' : ''), role: 'menuitem', disabled: off, onClick: () => { setOpen(false); run() } }, h(Icon), h('span', null, label))))) : null)
+          ...items.filter(Boolean).map((x, i) => {
+            if (typeof x === 'string') {
+              if (x.startsWith('hd:')) return h('div', { key: 'h' + i, className: 'hd' }, x.slice(3))
+              return h('div', { key: 's' + i, className: 'sp ' + x.slice(4), role: 'separator' })
+            }
+            const [tier, Icon, name, on, off, run, em] = x
+            const kids = [h(Icon), h('span', null, name), em != null && em !== '' ? h('em', null, em) : null]
+            return typeof run === 'string'
+              ? h('a', { key: name, className: tier, role: 'menuitem', href: run, target: '_blank', rel: 'noopener noreferrer', onClick: () => setOpen(false) }, ...kids)
+              : h('button', { key: name, className: tier + (on ? ' sel' : ''), role: 'menuitem', disabled: off, onClick: () => { setOpen(false); run() } }, ...kids)
+          }),
+          foot ? h('div', { className: 'ft' }, foot) : null) : null)
+    }
+
+    // 左上屏名 ▾：换屏（画布 / 某一屏）、多尺寸、类型、打开别的页面——「在看什么、怎么看」都在这一个菜单里
+    function ScreenMenu({ t, label, title, tip, src, busy, list, cur, canvas, open, setOpen, onPick, onAll, onOther, sizes, kind, onKind }) {
+      const ref = useRef(null)
+      useDismiss(open, setOpen, ref)
+      const n = list.length
+      const close = (run) => () => { setOpen(false); run() }
+      return h('div', { className: 'ddp-kind ddp-where', ref },
+        h('button', { className: 'ddp-addr' + (open ? ' sel' : ''), ...(tip ? tipA(tip[0], tip[1]) : { title: title || t('screensT') }), 'data-src': src || undefined, 'aria-haspopup': 'menu', 'aria-expanded': open, onClick: () => setOpen(!open) },
+          h('i', { className: 'ddp-dot' + (busy ? ' wait' : '') }),
+          (() => { const m = /^(.+?)( · [^·]+)$/.exec(label || ''); return m ? h('span', { className: 'lb2' }, h('b', null, m[1]), h('em', null, m[2])) : h('span', null, label) })(),
+          h(I.caret)),
+        open ? h('div', { className: 'ddp-menu l', role: 'menu' },
+          h('div', { className: 'hd' }, n > 1 ? t('screensHd') : t('screensT')),
+          h('button', { className: canvas && !(sizes && sizes.on) ? 'sel' : '', role: 'menuitemradio', 'aria-checked': canvas, onClick: close(onAll) }, h(I.canvas), h('span', null, t('canvasShort')), n > 1 ? h('em', null, t('screensAll', { n })) : null),
+          h('div', { className: 'ls' }, ...list.map((x) => h('button', { key: x.key, className: !canvas && !(sizes && sizes.on) && x.key === cur ? 'sel' : '', role: 'menuitemradio', 'aria-checked': !canvas && x.key === cur, title: x.key, onClick: close(() => onPick(x.key)) },
+            h(I.single), h('span', null, x.label)))),
+          sizes ? h('div', { className: 'sp', role: 'separator' }) : null,
+          sizes ? h('button', { className: sizes.on ? 'sel' : '', role: 'menuitemcheckbox', 'aria-checked': !!sizes.on, disabled: !!sizes.off, title: sizes.tip, onClick: close(sizes.run) }, h(I.sizes), h('span', null, t('sizesShort')), sizes.note ? h('em', null, sizes.note) : null) : null,
+          onKind ? h('div', { className: 'hd' }, t('kind')) : null,
+          onKind ? h('div', { className: 'ddp-kinds', role: 'group', 'aria-label': t('kind') }, ...KIND_LIST.map((k) => h('button', { key: k, role: 'menuitemradio', 'aria-checked': k === kind, className: k === kind ? 'sel' : '', title: KIND_SIZE[k].join('×'), onClick: close(() => onKind(k)) },
+            h(I[k]), h('span', null, t(KIND_KEY[k]))))) : null,
+          h('div', { className: 'sp', role: 'separator' }),
+          h('button', { role: 'menuitem', onClick: close(onOther) }, h(I.folder), h('span', null, t('openOther')))) : null)
     }
 
     /** 二维码矩阵（一行一串 0 / 1）→ SVG（四周留 4 格白边） */
@@ -5553,10 +6572,12 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           seen ? h('span', { key: 'st', className: 'st ok' }, h(I.check), t('phoneSeen')) : h('span', { key: 'st', className: 'st' }, h('i'), t('phoneWait')),
           h('p', { key: 'fl', className: 'fine' }, t('phoneFollow')),
           h('div', { key: 'row', className: 'row' },
-            h('button', { className: 'ddp-go', onClick: () => onCopy(res.url) }, t('phoneCopy')),
-            h('button', { className: 'ddp-go', onClick: onStop }, t('phoneStop'))),
-          h('p', { key: 'auto', className: 'fine' }, t('phoneAuto')),
-          seen ? null : h('p', { key: 'help', className: 'fine' }, t('phoneHelp')),
+            h('button', { className: 'ddp-go sec', onClick: onStop }, t('phoneStop')),
+            h('button', { className: 'ddp-go', onClick: () => onCopy(res.url) }, t('phoneCopy'))),
+          h('details', { key: 'more', className: 'fine', open: false },
+            h('summary', null, t('phoneTrouble')),
+            h('p', null, t('phoneHelp')),
+            h('p', null, t('phoneAuto'))),
         ]
       }
       return h('div', { className: 'ddp-tokens ddp-phone', onPointerDown: (e) => e.stopPropagation() },
@@ -5652,9 +6673,9 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
               w.exists
                 ? [
                   h('button', { key: 'o', disabled: cur, onClick: () => onOpen(w) }, t('wkOpen')),
-                  h('button', { key: 'r', title: t('wkReveal'), onClick: () => op(w, 'reveal') }, h(I.folder)),
-                  h('button', { key: 'z', title: t('wkZip'), onClick: () => onPack(w.dir) }, h(I.download)),
-                  h('button', { key: 's', title: t('wkShare'), onClick: () => onShare(w.dir) }, h(I.share)),
+                  h('button', { key: 'r', title: t('wkReveal'), onClick: () => op(w, 'reveal') }, h(I.folder), h('span', null, t('wkRevealShort'))),
+                  h('button', { key: 'z', title: t('wkZip'), onClick: () => onPack(w.dir) }, h(I.download), h('span', null, t('wkZipShort'))),
+                  h('button', { key: 's', title: t('wkShare'), onClick: () => onShare(w.dir) }, h(I.share), h('span', null, t('wkShareShort'))),
                   h('button', { key: 'p', title: t(w.pinned ? 'wkUnpin' : 'wkPin'), className: w.pinned ? 'on' : '', onClick: () => op(w, w.pinned ? 'unpin' : 'pin') }, '★'),
                 ]
                 : dirPicker() ? h('button', { key: 'l', onClick: () => relocate(w) }, t('wkRelocate')) : null,
@@ -5797,28 +6818,108 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     }
     const mkRevoked = (v, id, rev) => !!v && (v.revoked || []).some((r) => r.id === id && (!r.rev || !rev || r.rev === rev))
 
+    // 首页顶上一条：左边名字，右边「开始 / 市场 / 我的作品 / 灵感」——设计库并进首页的页签
+    const HOME_TABS = [['', 'homeTab'], ['market', 'libMarket'], ['works', 'libWorks'], ['inspire', 'libInspire']]
+    function HomeBar({ t, tab, onTab, lead }) {
+      // 左右方向键在几栏之间挪焦点，回车 / 空格再打开（按到哪就开哪会一路弹设计库）
+      const onKey = (e) => {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return
+        const bs = [...e.currentTarget.querySelectorAll('[role=tab]')]
+        const i = Math.max(0, bs.indexOf(document.activeElement))
+        const n = e.key === 'Home' ? 0 : e.key === 'End' ? bs.length - 1 : (i + (e.key === 'ArrowRight' ? 1 : -1) + bs.length) % bs.length
+        e.preventDefault()
+        if (bs[n]) bs[n].focus()
+      }
+      return h('header', { className: 'ddp-homebar' + (lead ? ' led' : '') },
+        lead || null,
+        h('div', { className: 'nm' }, h('i', { className: 'mk', 'aria-hidden': true }), h('b', null, t('title'))),
+        h('div', { className: 'seg', role: 'tablist', onKeyDown: onKey }, ...HOME_TABS.map(([k, key]) => h('button', { key: k || 'home', role: 'tab', 'aria-selected': tab === k, tabIndex: tab === k ? 0 : -1, className: tab === k ? 'on' : '', onClick: () => onTab(k) }, t(key)))))
+    }
+
+    // 首页大输入框：说一句 + 类型 + 风格 → onSend（发给模型）。没写字时 Tab 用占位里的例子
+    const ASK_KINDS = ['app', 'miniprogram', 'web', 'poster', 'slides', 'tablet', 'desktop', 'email']
+    const ASK_EX = { web: 'exWeb', app: 'exApp', miniprogram: 'exMini', tablet: 'exTablet', desktop: 'exDesktop', poster: 'exPoster', slides: 'exSlides', email: 'exEmail' }
+    function HomeAsk({ t, onSend, onRef, plus, draft, note, autoFocus }) {
+      const d0 = (draft && draft.current) || {}
+      const [text, setText] = useState(d0.text || '')
+      const [kind, setKind] = useState(d0.kind || '')
+      const [sty, setSty] = useState(d0.sty || null)
+      useEffect(() => { if (draft) draft.current = { text, kind, sty } }, [text, kind, sty])
+      useEffect(() => { if (autoFocus && ta.current) ta.current.focus({ preventScroll: true }) }, [])
+      const [pop, setPop] = useState('') // 'plus' | 'style'
+      const ta = useRef(null)
+      const card = useRef(null)
+      useDismiss(pop === 'style', () => setPop(''), card)
+      const en = t('lang') === 'en'
+      const ex = t(ASK_EX[kind] || 'exAuto')
+      const back = () => { if (ta.current) ta.current.focus() }
+      const go = () => {
+        const s = text.trim()
+        if (!s) return back()
+        if (onSend({ text: s, kind, style: sty }) !== false) setText('')
+      }
+      const onKey = (e) => {
+        if (e.nativeEvent && e.nativeEvent.isComposing) return
+        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); go() } else if (e.key === 'Tab' && !e.shiftKey && !text) { e.preventDefault(); setText(ex) }
+      }
+      return h('div', { className: 'ddp-askwrap' },
+        h('div', { className: 'ddp-ask', ref: card },
+          h('textarea', { ref: ta, className: 'ddp-askta', rows: 2, value: text, placeholder: t('askPh', { ex }), 'aria-label': t('emptyHead'), onChange: (e) => setText(e.target.value), onKeyDown: onKey }),
+          h('div', { className: 'row' },
+            h(DropMenu, { t, cls: 'ddp-askplus', tip: [t('askMore'), t('askMoreD')], icon: I.plus, open: pop === 'plus', setOpen: (v) => setPop(v ? 'plus' : ''), items: plus }),
+            h('button', { className: 'chip ref', ...tipA(t('askRef'), t('askRefD')), onClick: onRef }, h(I.image), h('span', null, t('askRef'))),
+            h('button', { className: 'chip' + (sty ? ' on' : ''), ...tipA(sty ? t('askStyle', { name: en ? sty.en : sty.zh }) : t('askStyleAuto'), t('askStyleD')), 'aria-haspopup': 'dialog', 'aria-expanded': pop === 'style', onClick: () => setPop(pop === 'style' ? '' : 'style') },
+              sty ? h('i', { className: 'sw', style: { background: `linear-gradient(135deg,${sty.c.primary} 0 50%,${sty.c.accent} 50%)` } }) : h(I.palette),
+              h('span', null, sty ? t('askStyle', { name: en ? sty.en : sty.zh }) : t('askStyleAuto')), h(I.caret)),
+            !text ? h('button', { className: 'tabhint', tabIndex: -1, onClick: () => { setText(ex); back() } }, h('kbd', null, 'Tab'), t('askTab')) : null,
+            h('button', { className: 'send', disabled: !text.trim(), ...tipA(t('askSend'), '', '↵'), onClick: go }, h(I.send))),
+          pop === 'style' ? h('div', { className: 'ddp-askpop', role: 'dialog', 'aria-label': t('askStylePick') },
+            h('div', { className: 'hd' }, h('b', null, t('askStylePick')), h('button', { className: 'lk', onClick: () => { setSty(null); setPop(''); back() } }, t('askStyleAutoBtn'))),
+            h(StyleCards, { t, onPick: (x) => { setSty(x); setPop(''); back() } })) : null),
+        note ? h('p', { className: 'ddp-asknote' }, h(I.info), h('span', null, note)) : null,
+        h('div', { className: 'ddp-askkinds', role: 'radiogroup', 'aria-label': t('kind') }, ...ASK_KINDS.map((k) => h('button', { key: k, role: 'radio', 'aria-checked': kind === k, className: kind === k ? 'on' : '', onClick: () => setKind(kind === k ? '' : k) },
+          h(I[k]), h('span', null, t(KIND_KEY[k]))))))
+    }
+
+    // 首页「接着做」：最近的三套（找不到文件夹的不放），点了直接打开
+    function HomeWorks({ t, onOpen, onAll, cur, onBack }) {
+      const norm = (x) => String(x || '').replace(/[\\/]+$/, '')
+      const [list, setList] = useState(null)
+      useEffect(() => {
+        let dead = false
+        getJson('works').then((d) => { if (!dead) setList(d.works || []) }, () => { if (!dead) setList([]) })
+        return () => { dead = true }
+      }, [])
+      const ws = (list || []).filter((w) => w.exists).slice(0, 3)
+      if (!ws.length) return null
+      return h('section', { className: 'ddp-homesec' },
+        h('div', { className: 'hd' }, h('b', null, t('homeRecent')), h('button', { className: 'lk', onClick: onAll }, t('homeRecentAll'))),
+        h('div', { className: 'ddp-recent' }, ...ws.map((w) => { const here = !!cur && norm(w.dir) === norm(cur); return h('button', { key: w.id, className: 'wk' + (here ? ' here' : ''), title: w.dir, 'aria-current': here ? 'true' : undefined, onClick: () => (here && onBack ? onBack() : onOpen(w)) },
+          here ? h('em', { className: 'now' }, t('wkHere')) : null,
+          h('span', { className: 'im' }, w.thumb ? h('img', { src: `${API}workthumb?id=${w.id}&v=${w.thumb}`, alt: '', loading: 'lazy', onError: (e) => { e.currentTarget.style.visibility = 'hidden' } }) : null, h(I[w.kind] || I.web)),
+          h('span', { className: 'tx' }, h('b', null, w.title), h('span', null, [t(KIND_KEY[w.kind] || 'kindWeb'), t('wkScreens', { n: w.screens }), agoText(t, w.updated)].join(' · ')))) })))
+    }
+
     function TplStart({ t, onOpen, onMore }) {
       const v = useMarketView()
-      const list = v && v.designs ? [...v.designs].sort((a, b) => (b.featured - a.featured) || (Date.parse(b.updated) || 0) - (Date.parse(a.updated) || 0)).slice(0, 6) : []
+      const list = v && v.designs ? [...v.designs].sort((a, b) => (b.featured - a.featured) || String(a.id).localeCompare(String(b.id))).slice(0, 6) : [] // 按名字排：离线目录换成线上目录时不跳
       if (!list.length) return null
-      return h('div', { className: 'ddp-tplstart' },
+      return h('section', { className: 'ddp-homesec ddp-tplstart' },
         h('div', { className: 'hd' }, h('b', null, t('tplStartHead')), h('button', { className: 'lk', onClick: onMore }, t('tplStartMore'))),
         h('div', { className: 'row' }, ...list.map((e) => h('button', { key: e.id, className: 'tp', title: mkPick(t, e.description) || mkPick(t, e.title), onClick: () => onOpen(e.id) },
           h('span', { className: 'im' }, e.thumb ? h('img', { src: `${API}mthumb?id=${encodeURIComponent(e.id)}&r=${encodeURIComponent(e.rev || '')}`, alt: '', loading: 'lazy' }) : h(I[e.kind] || I.web)),
-          h('span', { className: 'nm' }, mkPick(t, e.title))))))
+          h('span', { className: 'tx' }, h('b', null, mkPick(t, e.title)), h('span', null, [t(KIND_KEY[e.kind] || 'kindWeb'), e.screens && e.screens.length ? t('wkScreens', { n: e.screens.length }) : ''].filter(Boolean).join(' · ')))))))
     }
 
-    function MarketTab({ t, focus, onUseTpl, onUseStyle, onSay }) {
+    function MarketTab({ t, cur, setCur, onUseTpl, onUseStyle, onSay }) {
       const [d, setD] = useState(null)
       const [err, setErr] = useState('')
       const [typePick, setType] = useState('template')
       const [kind, setKind] = useState('')
       const [q, setQ] = useState('')
       const [sort, setSort] = useState('featured')
-      const [cur, setCur] = useState(focus || '')
       const [busy, setBusy] = useState(false)
       const mine = useInspire() // 收藏过的风格打勾（按市场 id 认）
-      useEffect(() => { if (focus) setCur(focus) }, [focus])
       const load = (refresh) => {
         if (refresh) setBusy(true)
         return loadMarket(refresh).then((x) => { setD(x); setErr('') }, (e) => setErr(e.message)).finally(() => setBusy(false))
@@ -5858,27 +6959,25 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         .sort((a, b) => (sort === 'featured' ? (b.featured - a.featured) || time(b.updated) - time(a.updated) : sort === 'new' ? time(b.added) - time(a.added) : time(b.updated) - time(a.updated)))
       const kinds = MK_KINDS.filter((k) => d.designs.some((e) => e.kind === k))
       const card = (e) => {
-        const by = e.author && (e.author.name || e.author.login)
-        const meta = [e.type === 'template' ? t(KIND_KEY[e.kind] || 'kindWeb') : '', e.screens && e.screens.length ? t('wkScreens', { n: e.screens.length }) : '', by ? '@' + by : ''].filter(Boolean).join(' · ')
+        const by = e.author && !/^orderg-x$/i.test(e.author.login || '') ? e.author.name || e.author.login : '' // 官方做的不写作者（每张都一样）
+        const meta = [e.type === 'template' ? t(KIND_KEY[e.kind] || 'kindWeb') : '', e.screens && e.screens.length ? t('wkScreens', { n: e.screens.length }) : '', t(e.license === 'CC-BY-4.0' ? 'mkUseBY' : 'mkUse0'), by ? '@' + by : ''].filter(Boolean).join(' · ')
         return h('div', { key: e.id, className: 'ddp-work ddp-mk' },
           h('button', { className: 'th', title: mkPick(t, e.description) || mkPick(t, e.title), onClick: () => setCur(e.id) },
             e.thumb ? h('img', { src: `${API}mthumb?id=${encodeURIComponent(e.id)}&r=${encodeURIComponent(e.rev || '')}`, alt: '', loading: 'lazy', onError: (ev) => { ev.currentTarget.style.visibility = 'hidden' } }) : null,
             h('span', { className: 'ic' }, e.palette && Object.keys(e.palette).length ? h('span', { className: 'pal' }, ...Object.values(e.palette).slice(0, 4).map((c, i) => h('i', { key: i, style: { background: c } }))) : h(I[e.kind] || I.web)),
-            e.featured ? h('em', null, t('mkSortFeatured')) : null),
-          h('div', { className: 'nm' }, h('b', { title: mkPick(t, e.title) }, mkPick(t, e.title)),
-            e.ai && e.ai.generated ? h('span', { className: 'bdg' }, t('mkAi')) : null,
-            h('span', { className: 'bdg' }, e.license === 'CC-BY-4.0' ? 'CC BY' : 'CC0')),
-          h('div', { className: 'mt' }, meta))
+            e.featured && sort !== 'featured' ? h('em', null, t('mkSortFeatured')) : null), // 按精选排时精选的本来就在前面，不再每张标
+          h('div', { className: 'nm' }, h('b', { title: mkPick(t, e.title) }, mkPick(t, e.title))),
+          h('div', { className: 'mt', title: meta }, meta))
       }
       return h('div', { className: 'ddp-market' },
         h('div', { className: 'ddp-mkbar' },
-          types.length > 1 ? h('div', { className: 'seg' }, ...types.map(([k, label, n]) => h('button', { key: k, className: type === k ? 'on' : '', onClick: () => { setType(k); setKind('') } }, `${label} ${n}`))) : null,
+          types.length > 1 ? h('div', { className: 'tabs', role: 'tablist' }, ...types.map(([k, label, n]) => h('button', { key: k, role: 'tab', 'aria-selected': type === k, className: type === k ? 'on' : '', onClick: () => { setType(k); setKind('') } }, label, h('em', null, n)))) : null,
           h('input', { className: 'q', type: 'search', value: q, placeholder: t('mkSearch'), 'aria-label': t('mkSearch'), onChange: (e) => setQ(e.target.value) }),
-          h('select', { value: sort, 'aria-label': t('mkSortFeatured'), onChange: (e) => setSort(e.target.value) },
-            h('option', { value: 'featured' }, t('mkSortFeatured')), h('option', { value: 'new' }, t('mkSortNew')), h('option', { value: 'updated' }, t('mkSortUpdated')))),
-        type === 'template' && kinds.length > 1 ? h('div', { className: 'ddp-mkkinds' },
-          h('button', { className: kind === '' ? 'on' : '', onClick: () => setKind('') }, t('mkAllKinds')),
-          ...kinds.map((k) => h('button', { key: k, className: kind === k ? 'on' : '', onClick: () => setKind(k) }, t(KIND_KEY[k])))) : null,
+          type !== 'style' ? h('div', { className: 'sort', role: 'group', 'aria-label': t('mkSortT') }, ...[['featured', 'mkSortFeatured'], ['new', 'mkSortNew'], ['updated', 'mkSortUpdated']].map(([k, label]) => h('button', { key: k, className: sort === k ? 'on' : '', 'aria-pressed': sort === k, onClick: () => setSort(k) }, t(label)))) : null),
+        // 类型一排横着滑；设计系统、风格不分类型：灰着，不收起来（下面的卡片不跳）
+        kinds.length > 1 ? h('div', { className: 'ddp-mkkinds' },
+          kinds.length > 1 ? [h('button', { key: '', className: kind === '' && type === 'template' ? 'on' : '', disabled: type !== 'template', onClick: () => setKind('') }, t('mkAllKinds')),
+            ...kinds.map((k) => h('button', { key: k, className: kind === k && type === 'template' ? 'on' : '', disabled: type !== 'template', onClick: () => setKind(k) }, t(KIND_KEY[k])))] : null) : null,
         d.off || d.error || d.needUpdate ? h('p', { className: 'ddp-libtip warn' }, d.needUpdate ? t('mkNeedUpdate') : d.off ? t('mkOff') : t('mkOffline')) : null,
         !list.length ? h('div', { className: 'ddp-libnone' }, t('mkNoResult'))
           : type === 'style'
@@ -5947,7 +7046,6 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             : shots && shots.length ? h('img', { key: shots[i], src: `${API}mshot?id=${encodeURIComponent(e.id)}&f=${encodeURIComponent(shots[i])}&r=${encodeURIComponent(e.rev || '')}`, alt: (screens[i] && mkPick(t, screens[i].title)) || '' })
               : e.thumb ? h('img', { src: `${API}mthumb?id=${encodeURIComponent(e.id)}&r=${encodeURIComponent(e.rev || '')}`, alt: '' }) : null
       return h('div', { className: 'ddp-mkd' },
-        h('button', { className: 'lk back', onClick: onBack }, '← ', t('mkBack')),
         h('h3', null, mkPick(t, e.title)),
         h('p', { className: 'mt' }, [isTpl ? t(KIND_KEY[e.kind] || 'kindWeb') : t('mkTypeSys'), screens.length ? t('wkScreens', { n: screens.length }) : '', by ? t('mkBy', { who: by }) : '', e.ai && e.ai.generated ? t('mkAi') : ''].filter(Boolean).join(' · ')),
         mkPick(t, e.description) ? h('p', null, mkPick(t, e.description)) : null,
@@ -5967,18 +7065,26 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           e.derivedFrom ? h('li', null, t('mkDerived', { x: String(e.derivedFrom) })) : null),
         h('p', { className: 'ddp-libfoot' },
           h('a', { href: mkUrl(e), target: '_blank', rel: 'noopener noreferrer' }, t('mkSource')), ' · ',
-          h('a', { href: report, target: '_blank', rel: 'noopener noreferrer' }, t('mkReport')), ' · ', h('code', null, e.id)))
+          h('a', { href: report, target: '_blank', rel: 'noopener noreferrer', title: e.id }, t('mkReport'))))
     }
 
-    function LibraryView({ t, tab, setTab, focus, hasDesign, curRoot, onClose, onOpen, onPack, onShare, onSaveStyle, onUseStyle, onUseTpl, onRef, onExtract, onMarket, onSay }) {
+    function LibraryView({ t, tab, setTab, focus, hasDesign, homey, curRoot, onClose, onOpen, onPack, onShare, onSaveStyle, onUseStyle, onUseTpl, onRef, onExtract, onMarket, onSay }) {
       const tabs = [['market', t('libMarket')], ['works', t('libWorks')], ['inspire', t('libInspire')]]
-      return h('div', { className: 'ddp-lib', onPointerDown: (e) => e.stopPropagation(), onKeyDown: (e) => { if (e.key === 'Escape') { e.stopPropagation(); onClose() } } },
-        h('header', null,
-          h('button', { className: 'ddp-btn', title: t(hasDesign ? 'libBack' : 'libClose'), 'aria-label': t(hasDesign ? 'libBack' : 'libClose'), onClick: onClose }, h(I.back)),
-          h('b', null, t('library')),
-          h('div', { className: 'seg', role: 'tablist' }, ...tabs.map(([k, label]) => h('button', { key: k, role: 'tab', 'aria-selected': tab === k, className: tab === k ? 'on' : '', onClick: () => setTab(k) }, label)))),
+      const [mkCur, setMkCur] = useState(focus || '') // 市场里点开的那一套（详情页）
+      useEffect(() => { if (focus) setMkCur(focus) }, [focus])
+      const inDetail = tab === 'market' && !!mkCur
+      // 只有一个返回：在详情页回列表，不然回画布 / 空白页
+      const back = () => (inDetail ? setMkCur('') : onClose())
+      const backTip = inDetail ? t('mkBack') : t(hasDesign ? 'libBack' : 'libClose')
+      return h('div', { className: 'ddp-lib', onPointerDown: (e) => e.stopPropagation(), onKeyDown: (e) => { if (e.key === 'Escape') { e.stopPropagation(); back() } } },
+        homey
+          ? h(HomeBar, { t, tab, onTab: (k) => { if (!k) onClose(); else { setTab(k); if (k === 'market' && tab === 'market') setMkCur('') } }, lead: inDetail ? h('button', { className: 'ddp-btn', title: backTip, 'aria-label': backTip, onClick: back }, h(I.back)) : null })
+          : h('header', null,
+            h('button', { className: 'ddp-btn', title: backTip, 'aria-label': backTip, onClick: back }, h(I.back)),
+            h('b', null, t('library')),
+            h('div', { className: 'seg', role: 'tablist' }, ...tabs.map(([k, label]) => h('button', { key: k, role: 'tab', 'aria-selected': tab === k, className: tab === k ? 'on' : '', onClick: () => { setTab(k); if (k === 'market' && tab === 'market') setMkCur('') } }, label)))),
         h('div', { className: 'bd' },
-          tab === 'market' ? h(MarketTab, { t, focus, onUseTpl, onUseStyle, onSay })
+          tab === 'market' ? h(MarketTab, { t, cur: mkCur, setCur: setMkCur, onUseTpl, onUseStyle, onSay })
             : tab === 'works' ? h(WorksTab, { t, curRoot, onOpen, onPack, onShare, onMarket, onSay })
               : h(InspireTab, { t, hasDesign, onSaveStyle, onUseStyle, onRef, onExtract, onMarket, onSay })))
     }
@@ -6031,7 +7137,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     const SHARE_AGREE = [['own', 'shAgreeOwn'], ['brand', 'shAgreeBrand'], ['private', 'shAgreePrivate'], ['rules', 'shAgreeRules']]
 
     /** 分享到设计市场：填名字、介绍、授权，勾四个确认 → 按分享的规矩查（个人信息硬拦）→ 打 zip → 打开预填好的 GitHub 投稿页 */
-    function SharePanel({ t, sid, root, onFix, onSay, onClose }) {
+    function SharePanel({ t, sid, root, brand, onFix, onSay, onClose }) {
       const L = t('lang') === 'en' ? 'en' : 'zh'
       const [info, setInfo] = useState(null)
       const [title, setTitle] = useState('')
@@ -6048,7 +7154,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         post('pack', { session: sid, dir: root, info: true, lang: L }).then((d) => {
           if (!on) return
           setInfo(d)
-          setTitle(d.title || '')
+          setTitle(d.title && d.title !== baseName(root) ? d.title : brand || d.title || '')
           setDesc(d.description || '')
           setLic(d.license === 'CC-BY-4.0' ? 'CC-BY-4.0' : 'CC0-1.0')
         }, (e) => { if (on) setInfo({ error: e.message }) })
@@ -6069,6 +7175,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const done = res && res.ok && res.share
       return h('div', { className: 'ddp-tokens ddp-pack ddp-share', onPointerDown: (e) => e.stopPropagation() },
         h('header', null, h(I.share), h('b', null, t('shTitle')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+        h('p', { className: 'tip gh' }, h(I.info), h('span', null, t('shGh'))),
         h('p', { className: 'tip' }, t('shTip')),
         h('div', { className: 'bd' },
           root ? h('p', { className: 'which', title: root }, h(I.folder), h('span', null, baseName(root))) : h('div', { className: 'none' }, t('pkNoDesign')),
@@ -6125,6 +7232,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const [cam, setCam] = useState(null)
       const [anim, setAnim] = useState(false)
       const [drag, setDrag] = useState(false)
+      const [zoomMenu, setZoomMenu] = useState(false)
       const auto = useRef(true)
       const camRef = useRef(cam)
       camRef.current = cam
@@ -6135,8 +7243,15 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       // 多尺寸：每块自己的类型和大小（items[i] = { kind, size }）
       const items = props.items || null
       const boxes = items ? items.map((it) => deviceBox(it.kind, it.size)) : null
-      const L = box.w > 0 && box.h > 0 ? (boxes ? layoutRow(boxes, box.w, box.h) : layoutGrid(n, dw, dh, box.w, box.h)) : null
-      const layoutKey = L ? [n, L.cols, dw, dh, box.w, box.h, boxes ? boxes.join(';') : ''].join('|') : ''
+      // 上下各有一排浮块：排的时候只用中间那块高度，镜头整体往下挪 rt
+      const rt = props.top || 0
+      const bh = Math.max(0, box.h - rt - (props.bottom || 0))
+      const L = box.w > 0 && bh > 0 ? (boxes ? layoutRow(boxes, box.w, bh) : layoutGrid(n, dw, dh, box.w, bh)) : null
+      // 右边开着面板（inset 像素被挡着）：排法不变，镜头只用左边看得见的那块（太窄就不让，照旧整块）
+      const ins = props.inset && box.w - props.inset >= 240 ? props.inset : 0
+      const vw = box.w - ins
+      const layoutKey = L ? [n, L.cols, dw, dh, box.w, box.h, rt, bh, ins, boxes ? boxes.join(';') : ''].join('|') : ''
+      const fitAt = () => { const c = fitCam(L, vw, bh); return { ...c, y: c.y + rt } }
 
       useEffect(() => {
         const el = ref.current
@@ -6154,16 +7269,16 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         if (!L) return
         if (auto.current || !camRef.current) {
           setAnim(!!camRef.current)
-          setCam(fitCam(L, box.w, box.h))
-        }
+          setCam(fitAt())
+        } else if (ins && props.sel) showKey(props.sel) // 自己挪过镜头：只把选中的那屏挪出来，别被面板挡着
       }, [layoutKey])
 
       // 让某一屏露出来（体检里点了一条）：整屏不在看得见的地方就把镜头挪过去；右边 inset 像素被面板挡着
       const rv = props.reveal
-      useEffect(() => {
+      function showKey(key) {
         const c = camRef.current
-        if (!rv || !L || !c) return
-        const i = screens.findIndex((x) => x.key === rv.key)
+        if (!key || !L || !c) return
+        const i = screens.findIndex((x) => x.key === key)
         if (i < 0) return
         const [cw, ch] = boxes ? boxes[i] : [dw, dh]
         const vw = Math.max(120, box.w - (props.inset || 0))
@@ -6174,12 +7289,13 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         let x = c.x
         let y = c.y
         if (x0 < 8 || x0 + w > vw - 8) x += (w > vw - 16 ? 8 : (vw - w) / 2) - x0
-        if (y0 < LAB || y0 + hh > box.h - 8) y += (hh > box.h - LAB - 8 ? LAB : (box.h - hh) / 2) - y0
+        if (y0 < rt + LAB || y0 + hh > rt + bh - 8) y += (hh > bh - LAB - 8 ? rt + LAB : rt + (bh - hh) / 2) - y0
         if (x === c.x && y === c.y) return
         auto.current = false
         setAnim(true)
         setCam({ ...c, x, y })
-      }, [rv && rv.n])
+      }
+      useEffect(() => { if (rv) showKey(rv.key) }, [rv && rv.n])
 
       const zoomAt = (factor, px, py, smooth) => {
         const c = camRef.current
@@ -6199,7 +7315,9 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           if (!c) return
           if (e.ctrlKey || e.metaKey) {
             const r = el.getBoundingClientRect()
-            zoomAt(Math.exp(-e.deltaY * 0.01), e.clientX - r.left, e.clientY - r.top, false)
+            // 触控板捏合每次只给几个像素；鼠标滚轮（Windows 上 Ctrl + 滚轮）一格就是 100 上下，不收住一格放大近 3 倍
+            const dy = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY
+            zoomAt(Math.exp(-Math.max(-25, Math.min(25, dy)) * 0.01), e.clientX - r.left, e.clientY - r.top, false)
           } else {
             auto.current = false
             setAnim(false)
@@ -6247,7 +7365,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         if (!L) return
         auto.current = true
         setAnim(true)
-        setCam(fitCam(L, box.w, box.h))
+        setCam(fitAt())
       }
 
       const z = cam ? cam.z : 1
@@ -6266,7 +7384,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             className: 'ddp-cell' + (on ? ' sel' : ''),
             style: { left: L.pos[i].x, top: L.pos[i].y, width: cw, height: ch },
           },
-          lab(sc.key, [h('span', { key: 's' }, labelOf(sc)), !picking && props.badge ? props.badge(sc) : null, on && !picking && props.actions ? h('span', { key: 'a', className: 'ddp-act' }, ...props.actions(sc)) : null], cw),
+          lab(sc.key, [props.tag ? props.tag(sc) : null, h('span', { key: 's' }, labelOf(sc)), !picking && props.badge ? props.badge(sc) : null, !picking && props.actions ? h('span', { key: 'a', className: 'ddp-act' }, ...props.actions(sc)) : null], cw),
           props.render(sc, z, i),
           picking ? null : h('div', { className: 'ddp-shield', 'data-key': sc.key, title: items ? '' : t('openScreen'), style: { borderRadius: fr.r } })))
         })
@@ -6274,7 +7392,9 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           const p = L.pos[n - 1]
           cells.push(h('div', { key: '__ghost', className: 'ddp-cell ghost', style: { left: p.x, top: p.y, width: dw, height: dh } },
             lab('', [h('i', { key: 'i', className: 'sp' }), h('span', { key: 's' }, t('generating'))]),
-            h(Device, { kind, w: size[0], h: size[1], label: '' }, h(Skeleton, {}))))
+            h(Device, { kind, w: size[0], h: size[1], label: '' },
+              h(GhostDraw, { key: 'gd', t, kind, pulse: props.pulse || 0 }),
+              props.draft ? h(DraftFrame, { key: 'df', url: props.draft, z, lang: t('lang'), onEnd: props.onDraftEnd }) : null)))
         }
       }
       let flowSvg = null
@@ -6296,11 +7416,15 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         className: 'ddp-world' + (anim ? ' anim' : ''),
         style: { transform: `translate(${cam.x}px, ${cam.y}px) scale(${z})`, '--z': z },
       }, ...cells, flowSvg) : null,
+      // 右下缩放：「43% ▾」，点开是放大 / 缩小 / 适合画布 / 实际大小
       h('div', { className: 'ddp-zoom' },
-        h('button', { className: 'ddp-btn', title: t('zoomOut'), onClick: () => center(1 / 1.25) }, h(I.minus)),
-        h('b', null, Math.round(z * 100) + '%'),
-        h('button', { className: 'ddp-btn', title: t('zoomIn'), onClick: () => center(1.25) }, h(I.plus)),
-        h('button', { className: 'ddp-btn', title: t('fit'), onClick: fit }, h(I.fit))))
+        h(DropMenu, { t, tip: [t('zoomT'), t('dZoom', { mod: MOD.replace(/\+$/, '') })], label: Math.round(z * 100) + '%', caret: true, open: zoomMenu, setOpen: setZoomMenu, items: [
+          ['', I.plus, t('zoomIn'), false, z >= ZMAX, () => center(1.25)],
+          ['', I.minus, t('zoomOut'), false, z <= ZMIN, () => center(1 / 1.25)],
+          'sep',
+          ['', I.fit, t('fit'), false, false, fit],
+          ['', I.single, t('zoomReal'), Math.abs(z - 1) < 0.005, false, () => center(1 / z)],
+        ] })))
     }
 
     // ── 右侧栏标签页 ─────────────────────────────────────────────────────────
@@ -6317,7 +7441,6 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const [styleEdit, setStyleEdit] = useState(false) // 调样式：点元素、拖滑块，写回它的 style 属性
       const [sty, setSty] = useState(null) // 调样式选中的元素：{ key, url, name, selector, text, loc, base, vars, gradient, layout, live }
       const [editing, setEditing] = useState(false)
-      const [menu, setMenu] = useState(false)
       const [toast, setToast] = useState('')
       const [flash, setFlash] = useState('')
       const [reloadSeq, setReloadSeq] = useState(0)
@@ -6326,14 +7449,19 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const setTop = (k, dk) => setTops((cur) => (cur[k] === dk ? cur : { ...cur, [k]: dk }))
       const [sel, setSel] = useState('')
       const [panel, setPanel] = useState(false)
-      const [styles, setStyles] = useState(false) // 换风格面板
+      const [lookTab, setLookTab] = useState('set') // 外观面板开在哪一页：set 整套 / style 换风格 / brand 品牌
+      const [tv, setTv] = useState({}) // 外观面板里直接改的设计变量：名字 → 值（还没写进文件）
       const [dropping, setDropping] = useState('') // 正拖着文件进来：dragKind 给的种类
       const [dropSoft, setDropSoft] = useState(false) // 拖动在预览页面里：蒙层只是提示、不挡事件（松手由页面转告）
       const softTimer = useRef(0)
       const refInput = useRef(null)
       const pageInput = useRef(null)
+      const homeRef = useRef(null)
+      const homeKind = useRef('') // 首页发出去时选的类型：第一屏出来前的占位按它画
       const [exMenu, setExMenu] = useState(false)
-      const [more, setMore] = useState(false) // 窄的时候收起来的几个按钮
+      const [more, setMore] = useState(false) // ⋯ 菜单（窄的时候收起来的几个按钮也在这里）
+      const [scrMenu, setScrMenu] = useState(false)
+      const brandMem = useRef({}) // 目录 → 产品名（画布上认出来的），单页时去掉标题里的它
       const [hist, setHist] = useState(false) // 版本面板
       const [versions, setVersions] = useState([])
       const [ver, setVer] = useState(null) // 正在看的旧版本
@@ -6349,6 +7477,27 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const [demo, setDemo] = useState(null) // 演示：{ stack: [屏…], layers: [{ id, key, dir, shown }] }
       const [pane, setPane] = useState('') // 右边的面板：tweaks 调节滑块、systems 品牌设计系统、handoff 转成代码、pack 打成 zip、zip 设计包没过检查
       const [lib, setLib] = useState('') // 设计库：'' 关着；开着时是哪一栏（market / works / inspire）
+      // 开着设计时叠上来的首页：'' 没开 / 'on' 开着 / 'off' 正在收起（放完收起动画再拿掉）
+      const [homeAt, setHomeAt] = useState('')
+      const homeDraft = useRef({ text: '', kind: '', sty: null }) // 首页输入框里写了一半的：收起再打开还在
+      const homeOpen = () => { setLib(''); setLibFocus(''); setHomeAt('on') }
+      const homeClose = () => {
+        setHomeAt((c) => (c === 'on' ? 'off' : c))
+        setTimeout(() => setHomeAt((c) => (c === 'off' ? '' : c)), reduced() ? 0 : 190)
+      }
+      const homeAway = () => { if (homeAt === 'on') homeClose() } // 从首页打开了设计、进了打包面板：首页收起，别挡着
+      // 首页 / 设计库叠在上面时，Esc 只归它们：底下的调样式、改字、点选、试用别跟着退（没存的改动会丢）
+      const overlayUp = () => { try { return !!document.querySelector('.ddp-home.over, .ddp-libwrap') } catch { return false } }
+      useEffect(() => {
+        if (homeAt !== 'on') return undefined
+        const esc = (e) => {
+          if (e.key !== 'Escape' || e.defaultPrevented) return
+          if (document.querySelector('.ddp-home.over [aria-expanded="true"], .ddp-libwrap')) return // 先收菜单、设计库
+          homeClose()
+        }
+        window.addEventListener('keydown', esc)
+        return () => window.removeEventListener('keydown', esc)
+      }, [homeAt])
       const [libFocus, setLibFocus] = useState('') // 从空白页「从模板开始」点进来的那一套
       const libDefault = () => (marketStore.has ? 'market' : 'works')
       // 市场还没读过（刚开页面）：等读完（本地缓存，很快）再定开哪一页
@@ -6387,6 +7536,10 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       // 这一轮开始时已有的屏记下来：这轮里出了新的一屏，就在画布末尾留个「生成中…」等下一屏；
       // 一阵子（GHOST_MS）没再出新屏多半是在改了，占位撤掉；正在写一个还没有的 HTML 时一定留着
       const marks = useRef({ site: '', born: new Map(), built: new Set(), turnKeys: null, lastNew: 0 })
+      const draftedR = useRef(new Map()) // 边写边看过的屏 → 什么时候：真文件出来时不再播一遍生成动画
+      const pulseR = useRef({ key: '', lines: 0, n: 0 }) // 模型真有动静就加一（占位里的鼠标按它动）
+      const singleDraftR = useRef('') // 单屏里正在看着写的那屏：写完换过去看它
+      const playR = useRef({ url: '', key: '', hold: 0, end: false, meta: '', lump: false }) // 在放的草稿（见下面 dr）
       const M = marks.current
       if (M.site !== site) {
         M.site = site
@@ -6402,13 +7555,27 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         M.born.set(sc.key, busy)
         if (busy) M.lastNew = Date.now()
       }
-      const isBorn = (key) => !!M.born.get(key) && !M.built.has(key)
+      const isBorn = (key) => !!M.born.get(key) && !M.built.has(key) && !(Date.now() - (draftedR.current.get(key) || 0) < 180000)
+      // 状态条从哪一刻开始计时：服务端说这一轮开始多久了（右侧栏中途才打开也对得上）
+      const turnT = useRef({ on: false, at: 0 })
+      if (busy && !turnT.current.on) turnT.current = { on: true, at: Date.now() - Math.max(0, Number(st && st.turnFor) || 0) }
+      else if (!busy && turnT.current.on) turnT.current = { on: false, at: 0 }
+      // 开始/结束生成时单屏的设备要让位（给状态条腾一条）：这一下缓过去，别一跳
+      const [ease, setEase] = useState(false)
+      const busySeen = useRef(busy)
+      useEffect(() => {
+        if (busySeen.current === busy) return
+        busySeen.current = busy
+        setEase(true)
+        const id = setTimeout(() => setEase(false), 520)
+        return () => clearTimeout(id)
+      }, [busy])
 
       const infoOf = (key) => info[site + '|' + key] || null
       const ik = (sc) => (sc.v ? 'v' + sc.v + '|' : '') + sc.key // 旧版本的屏单独记标题
       const focus = (st && st.focus) || ''
       const main = infoOf(focus) || (screens[0] && infoOf(screens[0].key)) || {}
-      const meta = parseMeta(main.meta || '')
+      const meta = parseMeta(main.meta || (st && st.draft && st.draft.meta) || (playR.current.end ? '' : playR.current.meta) || '') // 第一屏还在放草稿（真的没摆出来）：按草稿开头写的类型
       const tokens = main.tokens || []
       const kind = (st && st.kind) || meta.kind || 'web'
       const size = sizeOf((st && st.size) || meta.size, kind)
@@ -6416,14 +7583,68 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       const canvas = view === 'canvas'
       const writingNew = !!(st && st.writing) && /\.html?$/i.test(st.writing) && !screens.some((s) => s.key === st.writing)
       const fresh = !!M.turnKeys && screens.some((s) => !M.turnKeys.has(s.key)) && Date.now() - M.lastNew < GHOST_MS
-      const ghost = canvas && busy && !ver && (writingNew || fresh)
+      // 边写边看：模型正在写一屏新的，预览服务器上已经有它的草稿（远程看的时候本机地址打不开，还是放占位）。
+      // 正文先到的草稿 key 是空的（还不知道是哪屏），名字到了才填上；写完落地后草稿还留一会儿，靠它认出新屏
+      const sd = st && st.draft && st.draft.url && (busy || st.draft.live) && !away(st.draft.url) ? st.draft : null // 说完了还报的：刚写完的那份
+      // 看着放的那份草稿：整页一下子到的（lump，预览服务器几秒里一截截放出来），真文件落地了也先放完再换。
+      // 一路流着写的早看过了，落地就换真文件（不等放完：页面引的外部字体卡着的话 load 要等很久）。
+      // 右侧栏头一回看到它时它得是还在写 / 刚写完的（live），中途才打开右侧栏的不补放旧的
+      const PL = playR.current
+      if (sd && sd.url !== PL.url && sd.live) playR.current = { url: sd.url, key: sd.key || '', hold: 0, end: false, meta: sd.meta || '', lump: !!sd.lump }
+      else if (sd && sd.url === PL.url) {
+        if (sd.key) PL.key = sd.key
+        if (sd.meta) PL.meta = sd.meta
+        if (sd.lump) PL.lump = true
+      }
+      const play = playR.current
+      const landed = (key) => !!key && screens.some((x) => x.key === key)
+      const playing = !!play.url && play.lump && !play.end && !(sd && sd.url !== play.url) && (!play.hold || Date.now() - play.hold < HOLD_MAX)
+      const dr = sd && !landed(sd.key) ? sd : playing ? { key: play.key, url: play.url } : null
+      if (dr && dr.url === play.url && !play.hold && (!sd || landed(dr.key))) play.hold = Date.now() // 从这时起是「放完再换」：最多等 HOLD_MAX
+      const hideKey = dr && landed(dr.key) ? dr.key : '' // 放着的这屏已经落地：画布上先不摆真的那块（草稿就在占位那格里放）
+      if (sd && sd.key) draftedR.current.set(sd.key, Date.now())
+      const ghost = canvas && !ver && ((busy && (writingNew || fresh)) || !!dr)
       const [, setTick] = useState(0)
+      const draftEnd = (u) => {
+        const p = playR.current
+        if (p.url !== u || p.end) return
+        p.end = true
+        setTick((n) => n + 1)
+      }
+      useEffect(() => {
+        if (!play.hold || play.end) return
+        const id = setTimeout(() => setTick((n) => n + 1), Math.max(0, play.hold + HOLD_MAX - Date.now()) + 50)
+        return () => clearTimeout(id)
+      }, [play.url, play.hold, play.end])
       useEffect(() => {
         if (!fresh || writingNew) return
         const id = setTimeout(() => setTick((n) => n + 1), Math.max(0, M.lastNew + GHOST_MS - Date.now()) + 50)
         return () => clearTimeout(id)
       }, [fresh, writingNew, M.lastNew])
       const labelOf = (sc) => (infoOf(ik(sc)) || {}).title || sc.label
+      // 状态条上那句：在等你回答 / 正在做第几屏 / 正在改哪屏 / 按调的工具说 / 没调工具就是在想
+      const busyPhase = () => {
+        if (!st) return { text: t('working') }
+        if (st.asking) return { text: t('asking'), asking: true }
+        const newN = screens.length + 1 // 按画布上排第几屏说（已有 3 屏、再出一屏 = 第 4 屏），和新屏出来的位置对得上
+        const w = st.writing || ''
+        const ln = Number(st.lines) || 0
+        const more = ln >= 10 ? t('stLines', { n: ln }) : '' // 写了多少行：写大文件的几分钟里看得到在动
+        if (w) {
+          if (!/\.html?$/i.test(w)) return { text: t('writing', { file: w }), sub: more }
+          const sc = screens.find((x) => x.key === w)
+          return sc ? { text: t('stEdit', { name: labelOf(sc) }), sub: more } : { text: t('stNew', { n: newN }), sub: more ? `${w} · ${more}` : w }
+        }
+        if (st.draft && !st.draft.key && /^(write|create_file)$/i.test(String(st.tool || ''))) return { text: t('stNew', { n: newN }), sub: more } // 正文先到：看得出是新的一屏，名字还没到
+        const tool = String(st.tool || '')
+        if (!tool) return { text: t('stThink') }
+        const m = TOOL_PHASE.find(([re]) => re.test(tool))
+        if (m && m[1] === 'stWriteAny' && !url) return { text: t('stNew', { n: 1 }), sub: more } // 第一屏还没出来：写的就是它
+        return { text: m ? t(m[1]) : t('working'), sub: m && m[1] === 'stWriteAny' ? more : '' }
+      }
+      const busyBar = (side) => h(BusyBar, { key: 'busy', t, phase: busyPhase(), since: turnT.current.at || Date.now(), side })
+      // 占位里的鼠标什么时候动：换了在做的事、或者又写了 15 行——模型停着它们就停着
+      const pulse = pulseStep(pulseR.current, busy, busy ? busyPhase().text + '|' + ((st && st.tool) || '') : '', Number(st && st.lines) || 0)
       // 画布上的标题去掉几屏都带的产品名（「首页 · 梅林练」→「首页」）；产品名留给导出的展示图做大标题
       const shortOf = (sc) => {
         const sp = splitTitles(shown.map(labelOf))
@@ -6448,8 +7669,10 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           return Object.keys(out).length === Object.keys(c).length ? c : out
         })
       }, [tsig])
-      useEffect(() => { setTw({}) }, [site])
-      const tweak = Object.keys(tw).length ? tweakMsg(tlist, tw) : null
+      const twGen = useRef(0) // 换一次设计加一：晚到的保存回包认得出是上一套的
+      useEffect(() => { twGen.current++; setTw({}); setTv({}) }, [site])
+      // 拖的滑块 + 外观面板里直接改的颜色：一起发给页面先看效果
+      const tweak = Object.keys(tw).length || Object.keys(tv).length ? (() => { const m = tweakMsg(tlist, tw); return { vars: { ...m.vars, ...tv }, attrs: m.attrs } })() : null
 
       // 看旧版本：画布上换成那一版的几屏（按现在的顺序，那一版独有的接在后面）
       const vbase = ver ? `${origin}/__dsh_design__/v/${ver.n}/` : ''
@@ -6490,6 +7713,8 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         try {
           await openTarget(sid, p)
           setEditing(false)
+          homeAway() // 从叠着的首页 / 设计库里打开的：收起来，看新打开的
+          setLib('')
         } catch (e) {
           say(t('openFailed', { msg: e.message }))
         }
@@ -6561,6 +7786,16 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         if (!patch.focus && poll && poll.state) poll.set({ ...poll.state, ...patch })
         post('view', { session: sid, ...patch }).then((s) => poll && poll.set(s), (e) => say(t('openFailed', { msg: e.message })))
       }
+      // 单屏里看着写完的那屏：真文件出来了就换过去看它（不然写完一闪又回到原来那屏）
+      useEffect(() => {
+        let k = singleDraftR.current
+        if (k === '*' && sd && sd.key) k = singleDraftR.current = sd.key
+        if (!k || dr) return
+        if (screens.some((x) => x.key === k)) {
+          singleDraftR.current = ''
+          if (!canvas && focus !== k) change({ view: 'single', focus: k })
+        } else if (!busy) singleDraftR.current = ''
+      })
 
       // 量舞台大小，单页时按比例缩放
       useEffect(() => {
@@ -6674,7 +7909,6 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         setPicking(false)
         setTextEdit(false)
         setPanel(false)
-        setStyles(false)
         setHist(false)
         setPhone(false)
         closeCheck()
@@ -6718,7 +7952,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       }
       useEffect(() => {
         if (!styleEdit) return undefined
-        const onKey = (e) => { if (e.key === 'Escape') setStyleEdit(false) }
+        const onKey = (e) => { if (e.key === 'Escape' && !overlayUp()) setStyleEdit(false) }
         window.addEventListener('keydown', onKey)
         return () => window.removeEventListener('keydown', onKey)
       }, [styleEdit])
@@ -6734,14 +7968,14 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
 
       useEffect(() => {
         if (!textEdit) return undefined
-        const onKey = (e) => { if (e.key === 'Escape') setTextEdit(false) }
+        const onKey = (e) => { if (e.key === 'Escape' && !overlayUp()) setTextEdit(false) }
         window.addEventListener('keydown', onKey)
         return () => window.removeEventListener('keydown', onKey)
       }, [textEdit])
 
       useEffect(() => {
         if (!picking) return undefined
-        const onKey = (e) => { if (e.key === 'Escape') setPicking(false) }
+        const onKey = (e) => { if (e.key === 'Escape' && !overlayUp()) setPicking(false) }
         window.addEventListener('keydown', onKey)
         return () => window.removeEventListener('keydown', onKey)
       }, [picking])
@@ -6798,7 +8032,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       }
       useEffect(() => {
         if (!demo) return undefined
-        const onKey = (e) => { if (e.key === 'Escape') setDemo(null) }
+        const onKey = (e) => { if (e.key === 'Escape' && !overlayUp()) setDemo(null) }
         window.addEventListener('keydown', onKey)
         return () => window.removeEventListener('keydown', onKey)
       }, [!!demo])
@@ -6964,15 +8198,21 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         insert(g.letter ? t('pickText', { name: labelOf(sc), where, others, base: g.stem }) : t('pickKeep', { name: labelOf(sc), where, others }), 'insertedSend')
       }
 
-      // 几个方向并排时每屏标题旁都挂着「就要这个」，不用先点中那一屏才看得到
+      // 同一屏的几个版本：标 A / B / C（原版或 -a 是 A）
+      const takeTag = (sc) => {
+        const g = !sc.v && takesOf(shown.map((x) => x.key), sc.key)
+        return g ? (g.letter || 'a').toUpperCase() : ''
+      }
+      const tagOf = (sc) => { const L = takeTag(sc); return L ? h('b', { key: 'g', className: 'ddp-vt', title: t('takeN', { l: L }) }, L) : null }
+      // 几个方向并排时每屏标题旁都挂着「用这版」，不用先点中那一屏才看得到
       const badge = (sc) => !sc.v && takesOf(shown.map((x) => x.key), sc.key)
         ? h('button', { key: 'p', className: 'ddp-take', title: t('pickThis'), onClick: () => pickDirection(sc) }, h(I.check), h('span', null, t('pickShort')))
         : null
 
       const actions = (sc) => [
-        h('button', { key: 'x', className: 'ddp-btn', title: t('exThis'), onClick: () => doExport(FRAMED[kind] ? 'frame' : 'raw', sc.key) }, h(I.download)),
-        sc.v ? null : h('button', { key: 'v', className: 'ddp-btn', title: t('variants'), onClick: () => askVariants(sc) }, h(I.sparkle)),
-        h('button', { key: 'o', className: 'ddp-btn', title: t('openScreen'), onClick: () => change({ view: 'single', focus: sc.key }) }, h(I.single)),
+        h('button', { key: 'x', className: 'ddp-btn', title: t('exThis'), onClick: () => doExport(FRAMED[kind] ? 'frame' : 'raw', sc.key) }, h(I.download), h('span', { className: 'lb' }, t('actX'))),
+        sc.v ? null : h('button', { key: 'v', className: 'ddp-btn', title: t('variants'), onClick: () => askVariants(sc) }, h(I.sparkle), h('span', { className: 'lb' }, t('actV'))),
+        h('button', { key: 'o', className: 'ddp-btn', title: t('openScreen'), onClick: () => change({ view: 'single', focus: sc.key }) }, h(I.single), h('span', { className: 'lb' }, t('actO'))),
       ]
 
       // 对比：拖中间的把手
@@ -7097,14 +8337,13 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         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)
+        setMarkSize(box.w && box.h > TOP_R + BOT_R ? { w: box.w, h: box.h - TOP_R - BOT_R } : null)
         setMark(true)
       }
       // 换了设计、看旧版本、演示：画的东西对不上了，收掉
@@ -7294,13 +8533,14 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       useEffect(() => { if (checkOff && ck) closeCheck() }, [checkOff])
 
       const toggleDemo = () => (demo ? setDemo(null) : startDemo())
-      const toggleHist = () => { setHist(!hist); setPanel(false); setStyles(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+      const openLook = (tab) => { if (tab) setLookTab(tab); setPanel(true); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+      const toggleHist = () => { setHist(!hist); setPanel(false); setPhone(false); closeCheck(); setStyleEdit(false) }
       // 右边同一时间只开一个面板：别的开了，这几个关掉；开这几个时别的关掉
-      const oldOpen = !!(panel || styles || hist || phone || ck || styleEdit)
+      const oldOpen = !!(panel || hist || phone || ck || styleEdit)
       useEffect(() => { if (oldOpen) setPane('') }, [oldOpen])
       const openPane = (p) => {
         const next = pane === p ? '' : p
-        if (next) { setPanel(false); setStyles(false); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+        if (next) { setPanel(false); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) }
         setPane(next)
       }
       const setTweak = (k, v) => setTw((c) => {
@@ -7308,12 +8548,24 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         return { ...c, [k.id]: v }
       })
       const saveTweaks = async () => {
+        if (ver) return say(t('twVer')) // 旧版本的屏不收调节：存了改的是当前设计
         try {
           // 带上拖的是哪套设计：请求路上会话换了设计，服务端就不写
-          const r = await post('tweak', { session: sid, root: st && st.target ? st.target.root : '', values: tw })
+          const sentTw = tw
+          const sentTv = tv
+          const gen = twGen.current
+          const r = await post('tweak', { session: sid, root: st && st.target ? st.target.root : '', values: sentTw, vars: sentTv })
           if (!r.ok) return say(r.reason === 'busy' ? t('styleBusyTip') : r.reason === 'moved' ? t('twMoved') : t('twNoWrite'))
-          if (r.missed && r.missed.length) say(t('twMissed', { names: r.missed.map((x) => x.label).join(t('sep')) }))
+          if (r.missed && r.missed.length) say(t('twMissed', { names: r.missed.map((x) => { const tok = String(x.id).startsWith('--') && tokens.find((k) => k.name === x.id); return tok ? tokenLabel(t, tok) : x.label }).join(t('sep')) }))
           else showFlash(t('twSaved', { n: r.changed.length }))
+          // 写进去的（设计变量、滑块）：放掉，页面重新读文件就是新值了（滑块和配色管同一个颜色时以配色为准，滑块的旧值也得放掉）；
+          // 没写进去的留着，还能交给模型；请求路上又改过的也留着
+          if (r.changed && r.changed.length && gen === twGen.current) {
+            const ids = new Set(r.changed.map((x) => x.id))
+            const drop = (c, sent) => { let out = c; for (const id of Object.keys(c)) if (ids.has(id) && c[id] === sent[id]) { if (out === c) out = { ...c }; delete out[id] } return out }
+            setTv((c) => drop(c, sentTv))
+            setTw((c) => drop(c, sentTw))
+          }
         } catch (e) {
           say(t('failed', { msg: e.message }))
         }
@@ -7330,58 +8582,88 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         }), 'insertedSend')
         setPane('')
       }
-      const togglePhone = () => { setPhone(!phone); setPanel(false); setStyles(false); setHist(false); closeCheck(); setStyleEdit(false) }
+      const togglePhone = () => { setPhone(!phone); setPanel(false); setHist(false); closeCheck(); setStyleEdit(false) }
       const reload = () => setReloadSeq((x) => x + 1)
 
-      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), 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 || 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 || 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'), 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()) },
-          h(I.stetho), ckCount && !ck && !checkOff ? h('span', { className: 'bdg' }, ckCount > 99 ? '99+' : String(ckCount)) : null),
-        h('button', { className: 'ddp-btn o2' + (hist || ver ? ' sel' : ''), title: t('history'), disabled: !fileTarget, onClick: toggleHist }, h(I.history)),
-        h('button', { className: 'ddp-btn o2' + (pane === 'handoff' ? ' sel' : ''), title: t('handoff'), disabled: !url || !!ver, onClick: () => openPane('handoff') }, h(I.code)),
-        h(ExportMenu, { t, kind, count: shown.length, open: exMenu, setOpen: setExMenu, onPick: (m) => doExport(m), disabled: !url, zip: fileTarget }),
-        anyDark || dark ? h('button', { className: 'ddp-btn o1' + (dark ? ' sel' : ''), title: t('dark'), onClick: () => setDark(!dark) }, h(I.moon)) : null,
-        h('button', { className: 'ddp-btn o1' + (phone ? ' sel' : '') + (phoneOn && !phone ? ' has' : ''), title: t('phone'), disabled: !url, onClick: togglePhone }, h(I.scan)),
-        h('button', { className: 'ddp-btn o1', title: t('refresh'), onClick: reload }, h(I.refresh)),
-        h('a', { className: 'ddp-btn o1', title: t('external'), href: url, target: '_blank', rel: 'noopener noreferrer' }, h(I.external)),
-        h(MoreMenu, { t, open: more, setOpen: setMore, has: (phoneOn && !phone) || (!!ckCount && !ck && !checkOff), items: [
-          ['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')],
-          ['o2', I.code, t('handoff'), pane === 'handoff', !url || !!ver, () => openPane('handoff')],
-          ['', I.box, t('library'), !!lib, false, () => { setLibFocus(''); if (lib) setLib(''); else libDefaultThen((k) => setLib((c) => c || k)) }],
-          ['', I.library, t('systems'), pane === 'systems', false, () => openPane('systems')],
-          anyDark || dark ? ['o1', I.moon, t('dark'), dark, false, () => setDark(!dark)] : null,
-          ['o1', I.scan, t('phone'), phone, !url, togglePhone],
-          ['o1', I.refresh, t('refresh'), false, false, reload],
-          ['o1', I.external, t('external'), false, !url, url],
-        ] }))
+      // 浮在画布上的几块，各管一件事，按钮都带字：左上 设计库 ｜ 屏名 ▾（换屏、多尺寸、类型都在这个菜单里）；
+      // 右上 外观 体检 ｜ 导出 ▾ ⋯；底部中间 选择 改字 样式 画笔 ｜ 试用；右下缩放（画布自己带）
+      // 鼠标停一下出说明卡（HoverTip）：名字 + 一句用途
+      // 窄了（样式表里）：先截屏名，再收字
+      const curKey = canvas ? '' : (focus || (screens[0] && screens[0].key) || '')
+      const curSc = screens.find((x) => x.key === curKey)
+      // 产品名：画布上几屏标题都带它时认得出来；单页只拿得到一屏的标题，用记下的那个把它去掉（「订单 · 巷口面馆」→「订单」）
+      const brand0 = splitTitles(shown.map(labelOf)).brand
+      if (brand0) brandMem.current[site] = brand0
+      const brand = brand0 || brandMem.current[site] || ''
+      const dropBrand = (x) => {
+        if (!brand || x === brand) return x
+        const p = x.split(/\s*[·｜|—]\s*|\s+[-–]\s+/).map((y) => y.trim()).filter(Boolean)
+        return p.length >= 2 && (p[0] === brand || p[p.length - 1] === brand) ? p.filter((y) => y !== brand).join(' · ') : x
+      }
+      const stLabel = (st && st.label) || ''
+      const scrLabel = canvas && screens.length > 1
+        ? t('screensN', { name: brand || stLabel, n: screens.length })
+        : curSc ? dropBrand(shortOf(curSc)) + (takeTag(curSc) ? ' · ' + takeTag(curSc) : '') : stLabel
+      // 菜单里点某一屏：单看这一屏（「全部 n 屏」回画布）
+      const pickScreen = (key) => {
+        setMulti(false)
+        if (demo) setDemo(null)
+        setSel(key)
+        if (canvas || key !== focus) change({ view: 'single', focus: key })
+      }
+      // 导出菜单写出是哪一屏（和 doExport 取同一屏）
+      const exSc = shown.find((x) => x.key === (canvas ? sel || focus : focus)) || shown[0]
+      const exName = exSc ? dropBrand(shortOf(exSc)) + (takeTag(exSc) ? ' · ' + takeTag(exSc) : '') : ''
+      const libOpen = () => { setLibFocus(''); if (lib) setLib(''); else libDefaultThen((k) => setLib((c) => c || k)) }
+      const dockTight = box.w > 0 && box.w <= 400 // 侧栏很窄：底部工具坞只放得下四个，「试用」进「更多」
+      const tool = (cls, on, desc, off, run, Icon, label) => h('button', { className: 'ddp-tool' + (cls ? ' ' + cls : '') + (on ? ' on' : ''), ...tipA(label, desc, on ? 'Esc' : ''), 'aria-pressed': !!on, disabled: !!off, onClick: run }, h(Icon), h('span', null, label))
+      const islands = editing
+        ? [h('div', { key: 'top', className: 'ddp-top' },
+          h('div', { className: 'ddp-isl tl wide' },
+            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', { key: 'top', className: 'ddp-top' },
+            h('div', { className: 'ddp-isl tl' },
+              h('button', { className: 'ddp-btn lab' + (homeAt === 'on' ? ' sel' : ''), ...tipA(t('homeBtn'), t('dHome'), homeAt === 'on' ? 'Esc' : ''), 'aria-pressed': homeAt === 'on', onClick: () => (homeAt === 'on' ? homeClose() : homeOpen()) }, h(I.home), h('span', { className: 'lb' }, t('homeBtn'))),
+              h('span', { className: 'ddp-sep' }),
+              h(ScreenMenu, { t, label: scrLabel, tip: [scrLabel || stLabel, t('dScreen')], src: stLabel, busy, list: screens.map((x) => { const L = takeTag(x); return { key: x.key, label: dropBrand(shortOf(x)) + (L ? ' · ' + L : '') } }), cur: curKey, canvas: canvas && !inMulti && !demo, open: scrMenu, setOpen: setScrMenu,
+                onPick: pickScreen, onAll: () => { setMulti(false); if (demo) setDemo(null); change({ view: 'canvas' }) }, onOther: () => setEditing(true),
+                sizes: mark ? null : { on: inMulti, off: !sizeSet || !!ver, tip: sizeSet ? t('sizes') : t('sizesNo'), note: sizeSet ? '' : t('sizesNoShort'), run: () => setMulti(!inMulti) },
+                kind, onKind: mark ? null : (k) => change({ kind: k }) })),
+            h('div', { className: 'ddp-isl tr' },
+              h('button', { className: 'ddp-btn lab' + (panel ? ' sel' : ''), ...tipA(t('look'), t('dLook')), onClick: () => (panel ? setPanel(false) : openLook()) }, h(I.palette), h('span', { className: 'lb' }, t('look'))),
+              h('button', { className: 'ddp-btn lab' + (ck ? ' sel' : ''), ...tipA(t('checkShort'), ckCount && !ck ? t('dCheckN', { n: ckCount }) : t('dCheck')), disabled: checkOff, onClick: () => (ck ? closeCheck() : runCheck()) },
+                h(I.stetho), h('span', { className: 'lb' }, t('checkShort')), ckCount && !ck && !checkOff ? h('span', { className: 'bdg' }, ckCount > 99 ? '99+' : String(ckCount)) : null),
+              h('span', { className: 'ddp-sep' }),
+              h(DropMenu, { t, tip: [t('deliver'), t('dExport')], btnCls: 'pri', icon: I.download, label: t('deliver'), caret: true, open: exMenu, setOpen: setExMenu, disabled: !url, items: [
+                'hd:' + t('deliverCode'),
+                ['', I.code, t('handoff'), pane === 'handoff', !!ver, () => openPane('handoff')],
+                'hd:' + t('exFiles'),
+                ...exportItems(t, kind, shown.length, exName).map(([mode, Icon, label]) => ['', Icon, label, false, false, () => doExport(mode)]),
+                fileTarget ? 'hd:' + t('deliverShare') : null, // 只有本地的设计才能打包、分享
+                fileTarget ? ['', I.box, t('exZip'), false, false, () => doExport('zip')] : null,
+                fileTarget ? ['', I.share, t('exShare'), false, false, () => doExport('share')] : null,
+              ], foot: t('exWhere') }),
+              h(DropMenu, { t, cls: 'ddp-more', tip: [t('more'), phoneOn && !phone ? t('phoneOnTip') + ' · ' + t('dMore') : t('dMore')], icon: I.more, has: phoneOn && !phone, open: more, setOpen: setMore, items: [
+                dockTight ? ['', I.play, t('demoShort'), !!demo, !url || !!ver, toggleDemo] : null, // 侧栏太窄，底部工具坞放不下「试用」：挪到这里
+                dockTight ? 'sep' : null,
+                ['', I.history, t('history'), hist || !!ver, !fileTarget, toggleHist],
+                ['', I.scan, t('phone'), phone, !url, togglePhone, phoneOn ? t('phoneOnShort') : ''],
+                anyDark || dark ? ['', I.moon, t('dark'), dark, false, () => setDark(!dark)] : null,
+                'sep',
+                ['', I.refresh, t('refresh'), false, false, reload],
+                ['', I.external, t('external'), false, !url, url],
+              ] }))),
+          h('div', { key: 'dock', className: 'ddp-isl ddp-dock', role: 'toolbar', 'aria-label': t('toolsT') },
+            tool('pick', picking, t('dPick'), !url || !!ver || !!demo || mark, togglePick, I.pick, t('pick')),
+            tool('', textEdit, t('dText'), !url || !!ver || !!demo || busy || mark, toggleText, I.text, t('textShort')),
+            tool('', styleEdit, t('dStyle'), styleOff || mark, toggleStyle, I.sliders, t('styleShort')),
+            tool('', mark, t('dMark'), markOff, toggleMark, I.pen, t('markShort')),
+            dockTight ? null : h('span', { className: 'ddp-sep dm' }),
+            dockTight ? null : tool('dm', !!demo, t('dPlay'), !url || !!ver, toggleDemo, I.play, t('demoShort'))),
+        ]
 
       // 模型用提问卡问你、在等回答：不转圈，换成一个橙点
-      const busyChip = (cls) => st && st.asking
-        ? h('div', { className: 'ddp-chip' + cls, key: 'busy' }, h('i', { className: 'q' }), h('span', null, t('asking')))
-        : h('div', { className: 'ddp-chip' + cls, key: 'busy' }, h('i', { className: 'sp' }),
-          h('span', { className: 'tx' }, st && st.writing ? t('writing', { file: st.writing }) : t('working')))
-
       // ── 参考图：拖进来 / 粘贴 / 从设计规范面板选；存进设计目录的 refs/，尺寸和主要颜色放进输入框 ──
       const addRef = async (file) => {
         if (!file || !/^image\//.test(file.type)) return say(t('refNotImage'))
@@ -7477,9 +8759,10 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           setTab: (k) => { setLibFocus(''); setLib(k) },
           focus: libFocus,
           hasDesign: !!url,
+          homey: !url || homeAt === 'on',
           curRoot: fileTarget ? st.target.root : '',
           onClose: () => { setLib(''); setLibFocus('') },
-          onOpen: (w) => openTarget(sid, w.dir).then(() => { setLib(''); setEditing(false) }, (e) => say(t('wkOpenFail', { msg: e.message }))),
+          onOpen: (w) => openTarget(sid, w.dir).then(() => { setLib(''); setEditing(false); homeAway() }, (e) => say(t('wkOpenFail', { msg: e.message }))),
           onPack: openPack,
           onShare: openShare,
           onSaveStyle: saveMyStyle,
@@ -7491,17 +8774,20 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           onSay: say,
         }),
         toast ? h('div', { className: 'ddp-toast low' }, h('span', null, toast.text)) : null) : null
-      const root = (...kids) => h('div', rootProps, ...kids, libLayer, dropLayer, fileInput, pageFileInput)
+      // 开着设计时点「首页」：首页叠在画布上（设计库再叠在它上面）
+      const root = (...kids) => h('div', rootProps, ...kids, url && homeAt ? homeView(true) : null, libLayer, dropLayer, fileInput, pageFileInput)
 
       // ── 设计库：打成 zip、拖进来的设计包、存成我的风格 ──
       function openPack(dir) {
         setPackDir(dir || '')
         setLib('')
+        homeAway()
         if (pane !== 'pack') openPane('pack')
       }
       function openShare(dir) {
         setPackDir(dir || '')
         setLib('')
+        homeAway()
         if (pane !== 'share') openPane('share')
       }
       const sameDir = (a, b) => String(a || '').replace(/[\\/]+$/, '') === String(b || '').replace(/[\\/]+$/, '')
@@ -7532,6 +8818,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             if (d.error === 'check') {
               setZipIssues({ errors: d.errors || [], more: d.more || 0 })
               setLib('')
+              homeAway()
               if (pane !== 'zip') openPane('zip')
               return undefined
             }
@@ -7542,6 +8829,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         }
         setLib('')
         setEditing(false)
+        homeAway()
         if (pane === 'zip' || pane === 'pack' || pane === 'share') { setPane(''); setZipIssues(null) }
         if (poll && d.snap) poll.set(d.snap)
         insert(formatTpl(t, d))
@@ -7560,6 +8848,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         }
         setLib('')
         setEditing(false)
+        homeAway()
         if (pane === 'zip' || pane === 'pack' || pane === 'share') { setPane(''); setZipIssues(null) }
         if (poll && d.snap) poll.set(d.snap)
         insert(formatTpl(t, d))
@@ -7585,20 +8874,6 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
 
       // 调节滑块 / 品牌设计系统 / 转成代码（右边的面板）
       const sidePane = () => {
-        if (pane === 'tweaks') {
-          return h(TweaksPanel, {
-            t,
-            tw: tweaks,
-            live: tw,
-            write: busy ? { ok: false, tip: t('styleBusyTip') } : { ok: true, tip: t('twSaveTip') },
-            onSet: setTweak,
-            onReset: () => setTw({}),
-            onAsk: () => insert(formatTweaks(t, tlist, tw), 'insertedSend'),
-            onSave: saveTweaks,
-            onMake: (errs) => insert(errs && errs.length ? t('twFixText', { errs: errs.join('；') }) + '\n' : t('twMakeText') + '\n', 'insertedSend'),
-            onClose: () => setPane(''),
-          })
-        }
         if (pane === 'systems') {
           return h(SystemsPanel, {
             t,
@@ -7614,7 +8889,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           return h(PackPanel, { t, sid, root: packDir || (fileTarget ? st.target.root : ''), onFix: fixPack, onSay: say, onClose: () => setPane('') })
         }
         if (pane === 'share') {
-          return h(SharePanel, { t, sid, root: packDir || (fileTarget ? st.target.root : ''), onFix: fixPack, onSay: say, onClose: () => setPane('') })
+          return h(SharePanel, { t, sid, root: packDir || (fileTarget ? st.target.root : ''), brand: !packDir || (fileTarget && packDir === st.target.root) ? brand : '', onFix: fixPack, onSay: say, onClose: () => setPane('') })
         }
         if (pane === 'zip' && zipIssues) {
           return h(ZipIssues, { t, issues: zipIssues, onClose: () => { setPane(''); setZipIssues(null) } })
@@ -7625,46 +8900,114 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         return null
       }
 
+      // 首页大输入框发出去：放进 DSH 的输入框直接发；输入框里本来有字、或旧版 DSH 没有 submit：放进去等用户自己发
+      const homeSend = ({ text, kind, style }) => {
+        const ia = props.inputActions
+        const cel = composerEl()
+        const was = cel ? composerText(cel) : null
+        const had = was === null || !!was.trim() // 读不出来（有引用标签、分屏）当成有字：只放进去，不替用户发
+        const msg = text + (kind ? '\n' + t('askKindLine', { k: t(KIND_KEY[kind]) }) : '') + (url ? '\n' + t('askNewLine') : '')
+        homeKind.current = kind || ''
+        const pick = style || (had ? null : autoStyle(text, kind)) // 没选风格：按题材替模型挑一张（不然总是米色暖调）；输入框里本来有东西（风格卡、参考图…）就不挑
+        const sty = pick ? formatStyle(t, pick, false, !style) : ''
+        if (!insert(msg, 'inserted', false)) {
+          insert([msg, sty].filter(Boolean).join('\n\n')) // 插不进：整段复制
+          return false
+        }
+        if (sty) insert(sty, 'inserted', false)
+        if (url) homeClose() // 开着设计时从首页发的：收起首页，看着新的一套长出来
+        if (had || !ia || typeof ia.submit !== 'function') { say(t('insertedSend')); return true }
+        setTimeout(() => {
+          try { ia.submit(); say(t('askSent')) } catch (e) { console.warn('[dsh-design-studio] submit 失败', e); say(t('insertedSend')) }
+        }, 80)
+        return true
+      }
+      // 「+」里的「打开已有的 HTML」：桌面版直接选文件；网页版展开下面的地址框
+      const openHtml = () => {
+        if (browse) return browse()
+        const d = homeRef.current && homeRef.current.querySelector('.ddp-ways')
+        if (!d) { if (url) { homeClose(); setEditing(true) } return } // 叠着的首页没有地址框：用左上角的
+        d.open = true
+        d.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+        const i = d.querySelector('input')
+        if (i) i.focus({ preventScroll: true })
+      }
+      const toLib = (k, id) => { setLibFocus(id || ''); setLib(k) }
+      const homeView = (over) => h('div', { key: 'home', className: 'ddp-home' + (over ? ' over' + (homeAt === 'off' ? ' out' : '') : ''), ref: homeRef, 'aria-label': over ? t('homeBtn') : undefined, role: over ? 'dialog' : undefined },
+        h(HomeBar, {
+          t,
+          tab: '',
+          onTab: (k) => { if (k) toLib(k) },
+          lead: over ? h('button', { className: 'ddp-homeback', ...tipA(t('homeBack', { name: scrLabel || stLabel }), '', 'Esc'), onClick: homeClose }, h(I.back), h('span', null, t('homeBack', { name: scrLabel || stLabel }))) : null,
+        }),
+        h('div', { className: 'ddp-homebd' },
+          h('div', { className: 'ddp-start' },
+            h('div', { className: 'ddp-hero' }, h('h1', null, t('emptyHead')), h('p', null, t('emptySub'))),
+            !over && st && st.hint ? h('button', {
+              className: 'ddp-go',
+              onClick: () => post('open', { session: sid, target: st.hint }).then((x) => { if (poll) poll.set(x) }, (e) => say(t('openFailed', { msg: e.message }))),
+            }, t('hintOpen', { name: st.hint.split(/[\\/]/).pop() })) : null,
+            h(HomeAsk, {
+              t,
+              draft: homeDraft,
+              autoFocus: over,
+              note: over ? t('askNewNote') : '',
+              onSend: homeSend,
+              onRef: pickRef,
+              plus: [
+                ['', I.page, t('askOpenHtml'), false, false, openHtml],
+                ['', I.palette, t('askBrand'), false, false, () => { if (over) homeClose(); openPane('systems') }],
+                ['', I.library, t('askLib'), false, false, () => { setLibFocus(''); libDefaultThen((k) => setLib((c) => c || k)) }],
+              ],
+            }),
+            h(HomeWorks, {
+              t,
+              cur: over && fileTarget ? st.target.root : '',
+              onBack: homeClose,
+              onOpen: (w) => openTarget(sid, w.dir).then(() => { setEditing(false); if (over) homeClose() }, (e) => say(t('wkOpenFail', { msg: e.message }))),
+              onAll: () => toLib('works'),
+            }),
+            h(TplStart, { t, onOpen: (id) => toLib('market', id), onMore: () => toLib('market') }),
+            over ? null : h('details', { className: 'ddp-ways' },
+              h('summary', null, h(I.caret), t('waysHtml')),
+              h('div', { className: 'in' },
+                h('p', null, t(browse ? 'emptyHintPick' : 'emptyHint')),
+                h(AddressForm, { t, sid, className: 'ddp-form', onDone: () => {}, onBrowse: browse }))))),
+        h(HoverTip, { key: 'tip' }))
+
       if (!url) {
         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) {
-          // 模型在做第一屏：先放一个生成中的占位
+          // 模型在做第一屏：先放一个生成中的占位（按选的类型画个大概的样子）
+          const waitKind = homeKind.current || (st && st.kind) || 'web'
           return root(
-            h('div', { className: 'ddp-stage', ref: stageRef },
-              h('div', { className: 'ddp-wait' }, h('div', { className: 'card' }, h(Skeleton, {})), h('p', null, t('waiting'))),
+            h('div', { className: 'ddp-stage bz', ref: stageRef },
+              h('div', { className: 'ddp-wait' },
+                h('div', { className: 'card k-' + waitKind },
+                  h(GhostDraw, { key: 'gd', t, kind: waitKind, pulse }),
+                  dr ? h(FitDraft, { key: 'df', url: dr.url, kind: waitKind, lang: t('lang'), onEnd: draftEnd }) : null),
+                h('p', null, t(dr ? 'waitingLive' : 'waiting'))),
               h('div', { className: 'ddp-glow' }),
               h('div', { className: 'ddp-ring' }),
-              busyChip('')),
+              busyBar(false)),
             toastEl)
         }
         return root(
-          h('div', { className: 'ddp-empty' },
-            h(EmptyArt),
-            h('b', null, t('empty')),
-            st && st.hint ? h('button', {
-              className: 'ddp-go',
-              onClick: () => post('open', { session: sid, target: st.hint }).then((s) => { if (poll) poll.set(s) }, (e) => say(t('openFailed', { msg: e.message }))),
-            }, t('hintOpen', { name: st.hint.split(/[\\/]/).pop() })) : null,
-            h('ol', { className: 'ddp-steps' }, h('li', null, t('step1')), h('li', null, t('step2')), h('li', null, t('step3'))),
-            h('div', { className: 'ddp-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('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('libLine'), ' · ', h('button', { className: 'lk', onClick: () => { setLibFocus(''); libDefaultThen((k) => setLib((c) => c || k)) } }, t('libOpen'))),
-            h(TplStart, { t, onOpen: (id) => { setLibFocus(id); setLib('market') }, onMore: () => { setLibFocus(''); setLib('market') } }),
-            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)) }))),
+          homeView(false),
           pane === 'systems' || pane === 'pack' || pane === 'share' || pane === 'zip' ? sidePane() : null,
           toastEl)
       }
 
+      // 上下两排浮块中间那块的高度：单页、演示、对比按它缩放
+      const ah = Math.max(0, box.h - TOP_R - BOT_R)
+      const cvBody = !demo && (inMulti || (canvas && !(ver && cmp)))
       let body
+      let busyGap = false
       if (demo) {
         const fill = kind === 'web'
         const [dw, dh] = deviceBox(kind, size)
-        const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - 32) / dw, (box.h - 32 - 46) / dh))
+        const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - 32) / dw, (ah - 16 - 46) / dh))
         const top = demo.layers[demo.layers.length - 1]
         body = h('div', { className: 'ddp-demo' }, ...demo.layers.map((l) => {
           const isTop = l.id === top.id
@@ -7701,6 +9044,8 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         body = h(Canvas, {
           key: 'multi',
           t,
+          top: TOP_R,
+          bottom: BOT_R,
           screens: fake,
           items,
           kind,
@@ -7738,7 +9083,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         const old = now ? { key: now.key, id: `v${ver.n}|${now.key}`, v: ver.n, url: vbase + encodeURIComponent(now.key), label: now.label } : null
         const fill = kind === 'web'
         const [dw, dh] = deviceBox(kind, size)
-        const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - 32) / dw, (box.h - 32 - (ver ? 46 : 0)) / dh))
+        const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - 32) / dw, (ah - 16 - (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, onPageDrag: pageDrag, src: sc.url, label: labelOf(sc), busy: false, born: false, picking: false, dark, zoom: z, reloadSeq,
@@ -7759,17 +9104,23 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         body = h(Canvas, {
           key: 'grid',
           t,
-          screens: shown,
+          top: TOP_R + (ver ? 46 : 0), // 看旧版本时上面还有一条横幅
+          bottom: BOT_R,
+          screens: hideKey && !ver ? shown.filter((x) => x.key !== hideKey) : shown,
           actions,
           badge,
+          tag: tagOf,
           kind,
           size,
           ghost,
+          draft: ghost && dr ? dr.url : '',
+          onDraftEnd: draftEnd,
+          pulse,
           picking: picking || textEdit || styleEdit,
           sel: sel || focus,
           labelOf: shortOf,
           reveal,
-          inset: ck || styleEdit || panel || styles || pane ? 296 : 0, // 右边的面板 276 宽，离边 10
+          inset: ck || styleEdit || panel || pane || hist || phone ? 296 : 0, // 右边的面板 276 宽，离边 10
           render: (sc, z) => renderScreen(sc, z, false),
           flows,
           onSelect: setSel,
@@ -7779,30 +9130,41 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
         const fill = kind === 'web'
         const [dw, dh] = deviceBox(kind, size)
         // 右边开着面板（体检、调样式、设计规范、换风格）：手机这类有外框的让到面板左边（侧栏够宽时），别被挡住
-        const aside = !fill && (ck || styleEdit || panel || styles || pane) && box.w - 296 >= 240 ? 296 : 0
+        const sideOn = !!(ck || styleEdit || panel || pane || hist || phone) && box.w - 296 >= 240
+        const aside = !fill && sideOn ? 296 : 0
+        // 生成中：右侧栏窄（或开着面板）时状态条在上排浮块下面，手机这类给它让一条；宽的时候它在上排中间，不用让。网页不让（一让就重排）
+        busyGap = busy && !fill && (box.w < 860 || sideOn)
         // 画笔标注开着：网页按开标注时的大小定住（侧栏拉窄了就整体缩小，不重排），画的才对得上
         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 z = lock ? Math.max(0.05, Math.min(1, box.w / lock.w, ah / lock.h)) : fill ? 1 : Math.max(0.05, Math.min(1, (box.w - aside - 32) / dw, (ah - 16 - (ver || hintTop || busyGap ? 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 }
+        // 单屏时模型在写新的一屏：先看着它写（没在选、改字、调样式、标注的时候），写完换过去
+        const watch = dr && !ver && !demo && !picking && !textEdit && !styleEdit && !mark && !lock
+        if (watch) singleDraftR.current = dr.key || '*' // 还不知道是哪屏：名字到了再说
         body = h('div', { className: 'ddp-single', style: aside ? { right: aside } : undefined },
           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)))
+            watch
+              ? h(Device, { key: 'draft', kind, w: size[0], h: size[1], fill, label: '', os: meta.os },
+                h(GhostDraw, { key: 'gd', t, kind, pulse }),
+                h(DraftFrame, { key: 'df', url: dr.url, z: fill ? 1 : z, lang: t('lang'), onEnd: draftEnd }))
+              : renderScreen(one, z, fill)))
       }
 
       let chip = null
-      const side = canvas || inMulti ? ' left' : ''
+      const sideOpen = !!(ck || styleEdit || panel || pane || hist || phone) && box.w - 296 >= 240 // 右边开着面板：提示放在左边那块的中间
+      const side = sideOpen ? ' side' : ''
       const hintText = picking ? t(canvas || inMulti ? 'pickAny' : 'pickOne') : textEdit ? t(canvas || inMulti ? 'textAny' : 'textOne') : styleEdit && !sty ? t(canvas ? 'styleAny' : 'styleOne') : ''
       if (flash) chip = h('div', { className: 'ddp-chip ok' + side, key: 'ok' }, h(I.check), h('span', null, flash))
-      else if (busy) chip = busyChip(side)
 
       return root(
-        bar,
-        h('div', { className: 'ddp-stage' + (!canvas && !inMulti && kind === 'web' ? ' full' : ''), ref: stageRef },
-          h('div', { className: 'ddp-body' + (ver || demo || hintTop ? ' vb' : '') }, body),
+        h('div', { className: 'ddp-stage isl' + (busy ? ' bz' : ''), ref: stageRef },
+          h('div', { className: 'ddp-body' + (cvBody ? '' : ' pad' + (ver || demo || hintTop || busyGap ? ' vb' : '') + (ease ? ' ease' : '')) }, body),
           busy ? h('div', { className: 'ddp-glow' }) : null,
           busy ? h('div', { className: 'ddp-ring' }) : null,
+          busy ? busyBar(sideOpen) : null,
           // 右边开着面板时提示条居中在面板左边那块，别被面板盖住一半
-          hintText ? h('div', { className: 'ddp-hint' + ((ck || styleEdit || panel || styles || pane) && box.w - 296 >= 240 ? ' side' : '') }, hintText) : null,
+          // 提示只占一个位置：有新消息（toast）时它先让开，消息走了再回来
+          hintText && !toast ? h('div', { className: 'ddp-hint' + (sideOpen ? ' side' : '') }, hintText) : null,
           ck ? h(CheckPanel, { t, ck, onFocus: focusIssue, onFix: fixIssues, onAgain: runCheck, onClose: closeCheck }) : null,
           styleEdit ? h(StylePanel, {
             t,
@@ -7815,11 +9177,40 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
             onSave: saveStyle,
             onClose: () => setStyleEdit(false),
           }) : null,
-          panel ? h(TokensPanel, { t, tokens, onPick: (tok) => insert(formatToken(tok, stRef.current)), onAsk: () => insert(t('tokensAskText') + '\n', 'insertedSend'), onRef: pickRef,
-            onStyles: () => { setPanel(false); setStyles(true) }, onSystems: () => openPane('systems'),
-            onSaveStyle: saveMyStyle, onLibrary: () => { setPanel(false); setLib('inspire') }, onClose: () => setPanel(false) }) : null,
+          panel ? h(LookPanel, {
+            t,
+            tab: lookTab,
+            setTab: setLookTab,
+            tokens,
+            tv,
+            onTv: (name, v) => setTv((c) => ({ ...c, [name]: v })),
+            onTokAsk: (tok) => insert(formatToken(tok, stRef.current)),
+            onTokMake: () => insert(t('tokensAskText') + '\n', 'insertedSend'),
+            tw: tweaks,
+            live: tw,
+            onTw: setTweak,
+            onTwMake: (errs) => insert(errs && errs.length ? t('twFixText', { errs: errs.join('；') }) + '\n' : t('twMakeText') + '\n', 'insertedSend'),
+            write: !fileTarget ? { ok: false, tip: t('twNoWrite') } : ver ? { ok: false, tip: t('twVer') } : busy ? { ok: false, tip: t('styleBusyTip') } : { ok: true, tip: t('lookSaveTip') },
+            onReset: () => { setTw({}); setTv({}) },
+            onAsk: () => insert(formatLook(t, tlist, tw, tokens, tv), 'insertedSend'),
+            onSave: saveTweaks,
+            onPickStyle: (x) => { setPanel(false); insert(formatStyle(t, x, true), 'insertedSend') },
+            onRef: pickRef,
+            onSaveStyle: saveMyStyle,
+            onInspire: () => { setPanel(false); setLib('inspire') },
+            brand: lookTab === 'brand' ? h(SystemsPanel, {
+              t,
+              bare: true,
+              rev: (st && st.turns) || 0,
+              hasDesign: !!url,
+              onExtract: (src) => insert(t('sysExtractText', { src }) + '\n', 'insertedSend'),
+              onApply: (x) => insert(t('sysApplyText', { name: x.name, dir: x.dir }) + '\n', 'insertedSend'),
+              onSay: say,
+              onClose: () => setPanel(false),
+            }) : null,
+            onClose: () => setPanel(false),
+          }) : null,
           pane ? sidePane() : null,
-          styles ? h(StylesPanel, { t, onPick: (x) => { setStyles(false); insert(formatStyle(t, x, true), 'insertedSend') }, onClose: () => setStyles(false) }) : null,
           phone ? h(PhonePanel, {
             t,
             sid,
@@ -7833,19 +9224,23 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
           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, ''))),
-            h('button', { className: 'ddp-btn', title: t('demoBack'), disabled: demo.stack.length < 2, onClick: demoBack }, h(I.back)),
-            h('button', { className: 'ddp-btn', title: t('demoRestart'), disabled: demo.stack.length < 2, onClick: demoRestart }, h(I.refresh)),
-            h('button', { className: 'ddp-btn', title: t('demoExit'), onClick: () => setDemo(null) }, h(I.close))) : null,
+            h('b', null, t('demoOn')),
+            h('span', { className: 'nm' }, dropBrand((infoOf(demoKey) || {}).title || demoKey.replace(/\.html?$/i, ''))),
+            demo.stack.length < 2 ? h('em', null, t('demoHow')) : null,
+            h('button', { className: 'ddp-btn', ...tipA(t('demoBack')), disabled: demo.stack.length < 2, onClick: demoBack }, h(I.back)),
+            h('button', { className: 'ddp-btn', ...tipA(t('demoRestart')), disabled: demo.stack.length < 2, onClick: demoRestart }, h(I.refresh)),
+            h('button', { className: 'ddp-btn', ...tipA(t('demoExit'), '', 'Esc'), onClick: () => setDemo(null) }, h(I.close))) : null,
           ver ? h('div', { className: 'ddp-banner' },
             h(I.history),
             h('span', null, t('viewing', { n: ver.n, time: hhmm(ver.at) })),
-            h('button', { className: 'ddp-go' + (cmp ? ' on' : ''), onClick: () => setCmp(!cmp) }, t('compare')),
+            h('button', { className: 'ddp-go sec' + (cmp ? ' on' : ''), onClick: () => setCmp(!cmp) }, t('compare')),
             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' + (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))
+          toast ? h('div', { className: 'ddp-toast' + (mark ? ' mk' : ver || demo ? ' low' : '') + (sideOpen && !mark ? ' side' : ''), role: 'status' }, h('span', null, toast.text),
+            toast.act ? h('button', { onClick: () => { toast.act.run(); setToast('') } }, toast.act.label) : null) : null,
+          ...islands,
+          h(HoverTip, { key: 'tip' })))
     }
 
     // ── 标题栏按钮：打开预览，顺便在模型开了新页面时把右侧栏弹出来 ──────────
@@ -7894,7 +9289,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
       ctx.effect(() => ctx.sidebarRightTabs.register({
         id: TAB_ID,
         kind: KIND,
-        title: () => t('title'),
+        title: () => t('tabTitle'),
         keepMounted: true,
         guide: [{ id: 'open', order: 30, title: () => t('title'), description: () => t('guideDesc'), icon: GuideIcon }],
       }), 'dsh-design-studio: tab type')
@@ -7971,7 +9366,7 @@ ${Object.entries(CHIP_ICON).map(([k, d]) => `[data-composer-chip="${chipSrc(k)}"
     // 注意：这里是客户端**服务名**（短的），不是包名
     exports.inject = INJECT
     // 测试用
-    exports._test = { MarketDetail, 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, formatTpl, formatPrep, styleFromTokens, myStyleOf, isZipFile }
+    exports._test = { pulseStep, MarketDetail, dragKind, droppedOf, pickInfo, pickLabel, pickRanges, pickRule, chipOf, chipRanges, makeT, ZH, EN, formatCheck, formatTweaks, markHit, markPath, STYLES, formatStyle, accentUse, autoStyle, 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, formatTpl, formatPrep, styleFromTokens, myStyleOf, isZipFile }
     return module.exports
   },
 })