dsh-design-studio 0.6.1 → 0.7.0

package/README.en.md

@@ -19,7 +19,7 @@
 >
 > **Use it for:** "make a landing page", "design an app screen", "make a poster", "make a few slides".
 >
-> **Install:** on the DSH Plugins page, click Add plugin and enter `dsh-design-studio` (an npm package), then restart DSH.
+> **Install:** on the DSH Plugins page, click Add plugin, enter `dsh-design-studio` (an npm package), then click Enable now.
 
 A design workbench for DSH (DeepSeek Harness), in the spirit of Google Stitch. When the model builds a web page, an app screen, a poster or a slide deck, the **Design Studio** tab in the right sidebar shows it live. Screens appear one by one on a canvas, each inside a phone or browser frame. When something looks off, click the element or drag over an area. The plugin turns your pick into text in the chat input. Add "make it orange" and send. The model edits the source, and the change flashes in the preview.
 
@@ -43,10 +43,18 @@ dsh-design-studio
 
 It is an npm package. When DSH installs by package name and can't reach the official npm registry, it falls back to the npmmirror mirror in China, so GitHub is never needed. You can also enter the release tarball `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`, which needs GitHub access.
 
-**Restart DSH** after installing, because client code is bundled when DSH starts. The plugin is listed as 设计工作台 / Design Studio on the Plugins page.
+After installing, click **Enable now** on the card that pops up (plugins start disabled). Recent DSH versions need no restart: new sessions get Design mode in the mode menu right away. On an older DSH, restart once if Design Studio doesn't show up in the right sidebar. The plugin is listed as 设计工作台 / Design Studio on the Plugins page.
+
+**Updating:** uninstall it on the Plugins page and add it again. A new version can be installed by package name about a day after release, because the pnpm that DSH uses skips brand-new versions by default. To get it right away, use the release tarball.
 
 For development, enter the absolute path of a local checkout under **Add plugin**; it installs as a `link:`. Client changes still need a restart. `lib/picker.js` is served fresh on every request, so it doesn't.
 
+## Quick start
+
+1. Pick Design mode for a new session and say what to make, for example "Design a member app for a neighborhood gym". The empty sidebar also has a few example prompts you can click into the input.
+2. The model asks two or three questions with a question card, then lays out three directions side by side. Click **✓ Use this** next to the title of the one you like and send it; the model builds the rest.
+3. To change something, click Select, then the element. The caret waits on a new line in the input, so just type "bigger and bold" and send.
+
 ## What it does
 
 1. **Opens by itself, but only for design work.** Design work means the model loaded the design skill, called `preview_page`, or wrote a page with a design-type tag (`<meta name="dsh-design">`). After that, the tab pops up when the model writes an `.html` file or starts a dev server (`npm run dev` and the like). HTML written by other tasks doesn't pop up. Instead, a blue dot appears on the header button, and clicking it previews the file. Ports the model only probes with `curl` or the browser tools are never opened.
@@ -55,15 +63,15 @@ For development, enter the absolute path of a local checkout under **Add plugin*
 4. **Lets you watch it build.** A placeholder appears while the model works. Each new screen fades in from top to bottom with a scan line. While more screens are coming, a "generating…" card waits at the end of the canvas. When the model asks you something with a question card, the spinner turns into an orange dot reading "The model is waiting for your answer".
 5. **Refreshes live without a white flash.** The next frame loads in the background and cross-fades in, keeping the scroll position. Dev servers keep their own hot reload; Vite and Next WebSockets pass through, including dev servers that only listen on IPv6 `::1` (recent Vite on macOS).
 6. **Highlights what changed.** Changed and new elements glow briefly, and the preview scrolls to them if they are off screen. Shared CSS changes refresh every screen. A change to one screen's HTML leaves the others alone.
-7. **Picks elements for the chat.** Hover outlines elements with their size. Click picks one element. Drag picks a region along with up to 10 main elements in it. The pick becomes a block in the chat input with the file, the CSS path, the HTML and key styles.
+7. **Picks elements for the chat.** Hover outlines elements with their size. Click picks one element. Drag picks a region along with up to 10 main elements in it. The pick becomes a block in the chat input with the file, the CSS path, the HTML and key styles. The caret waits on a new line below it, so you can type the change right away.
 8. **Ships a built-in design guide.** The DSH skill `ui-design` loads before the model designs. It sets the type and canvas, writes `tokens.css` first and uses one file per screen. It covers spacing, type scale, color, contrast, Chinese typography, an "AI-look" blacklist and a self-check list, with notes for each design type. For a brand-new design the model first asks two or three key questions, then lays out three directions for the first screen (`home-a/b/c.html`, each with its own colors and fonts) side by side; you pick one and it builds the rest, moving the others to `drafts/`. If you already chose a feel in the questions, the three directions all stay in that feel and differ in layout and emphasis. Say "just build it", or give a specific brief, to skip this.
 9. **Has a design tokens panel.** It lists the `:root` variables grouped by color, font, size, spacing, radius and shadow, with swatches. Click one to send it to the chat, say "make it forest green", and every screen updates together.
 10. **Exports.** You can export one screen framed or plain, a full-page capture, or a **showcase** of all screens. The showcase uses the brand name as its title and takes its background and accent from your tokens. You can also export every screen as a **PDF** (one page per screen; web and email pages are full length, and page size follows the canvas) or a **PowerPoint** file (one slide per screen as an image, with the slide shape following the canvas; opens in PowerPoint, WPS and Keynote). Links between screens still work: in the PDF a button jumps to its page (and every screen has a bookmark), and in a slideshow it jumps to its slide, so the export is a clickable prototype. Files go to `exports/` in the design folder, and images are also copied to the clipboard.
 11. **Keeps versions.** A version is saved before and after every model turn, named after what you asked (a picked element becomes a short name such as “「3.2 km」 · make it green”, not a selector dump). Open any version, drag the slider to **compare** it with now, or **restore** it. The current state is saved first, so restoring is always reversible.
 12. **Switches to dark mode.** If the page has dark styles (`prefers-color-scheme: dark`, `[data-theme="dark"]` or `.dark`), a moon button toggles them, and exports follow.
-13. **Makes two more versions.** Select a screen and ask for two alternative directions. They appear right next to the original on the canvas (the three starting directions `home-a/b/c` too, kept in a, b, c order). Click the check mark on the one you want: the chat input gets "use this one, move the other takes to `drafts/`, build the rest", ready to send.
+13. **Makes two more versions.** Select a screen and ask for two alternative directions. They appear right next to the original on the canvas (the three starting directions `home-a/b/c` too, kept in a, b, c order). Click **✓ Use this** next to the title of the one you want (it shows on every take, no need to select it first): the chat input gets "use this one, move the other takes to `drafts/`, build the rest", ready to send.
 14. **Views on your phone.** The scan button shows a QR code in the sidebar. Scan it with a phone on the same Wi-Fi and the design opens in the phone's browser at real size, fully tappable. The phone follows the screen you pick on the computer and refreshes when the model changes the design. The panel shows when the phone has opened it, lets you copy the link and stop sharing, and closes the link after 30 minutes idle.
-15. **Works as a clickable prototype.** Screens link to each other with `<a href="detail.html">` or `data-href` (the built-in skill asks the model to do this). Select a screen on the canvas to see arrows for where it leads and what leads to it. Arrows that would cross another screen route around it, above the titles. The play button starts a demo: tap a button in the preview and the linked screen slides in, from the right going forward and from the left going back. The banner has back, restart and exit (Esc).
+15. **Works as a clickable prototype.** Screens link to each other with `<a href="detail.html">` or `data-href` (the built-in skill asks the model to do this). Select a screen on the canvas to see where it leads: each line starts at the button, runs through the gaps between screens with rounded corners, keeps its own lane and avoids crossings, and never cuts through another screen. Navigation that every screen has (tab bar, back) just gets a dashed outline instead of a line. The play button starts a demo: tap a button in the preview and the linked screen slides in, from the right going forward and from the left going back. The banner has back, restart and exit (Esc).
 16. **Shows one screen at several sizes.** The third view button lays the current screen out at several widths: phone, tablet and desktop for web; small, standard and large for apps; three sizes for tablets. Cramped small screens show at a glance. Picking works there too and notes the width.
 17. **Edits text in place.** Turn on the text button and click any text in the preview to edit it. Enter saves and Esc cancels. Local HTML is written back to the source file, only that one spot, with a version saved before and after. For dev-server pages, or when the text isn't in the source, a "change X to Y" request goes into the chat input for the model.
 18. **Takes a reference image.** Drop an image onto the sidebar, paste it there, or use "Restyle from a reference…" in the tokens panel. The image is saved to `refs/` in the design folder (or the plugin cache when there is none). Its main colors with their shares, any small vivid accent, and whether it reads light or dark go into the chat input with the file path and an instruction to update `tokens.css` first.

package/README.md

@@ -19,7 +19,7 @@
 >
 > **什么时候用**：「做个落地页」「设计一个 App 界面」「做张海报」「做几页幻灯片」。新会话可以直接选「设计模式」。
 >
-> **安装**：DSH「插件」页 →「添加插件」，填 `dsh-design-studio`（npm 包，连不上 npm 会自动换国内镜像），重启 DSH。
+> **安装**：DSH「插件」页 →「添加插件」，填 `dsh-design-studio`（npm 包，连不上 npm 会自动换国内镜像），装好点「立即启用」。
 
 让 DSH（DeepSeek Harness）做界面设计时像 Google Stitch / Claude Code 桌面端那样：模型做网页、App 界面、海报、幻灯片时，右侧栏「设计工作台」实时显示——一屏一屏生成出来，在画布上并排摆好，套上手机 / 浏览器外框；看到哪里不对，点一下那个元素、或拖出一块区域，它就整理成一段文字放进输入框，补一句「改成橙色」发出去，模型照着源码改，改过的地方在预览里闪一下。
 
@@ -43,10 +43,18 @@ dsh-design-studio
 
 这是 npm 包：按包名装时，DSH 连不上 npm 官方源会自动改用国内镜像（npmmirror），不经过 GitHub。也可以填发布包地址 `https://github.com/OrderG-X/dsh-design-studio/releases/latest/download/dsh-design-studio.tgz`，那样要能连上 GitHub。
 
-装完**重启 DSH**（客户端代码在 DSH 启动时打包）。DSH「插件」页里显示为「设计工作台」。
+装好后在弹出的卡片上点**「立即启用」**（默认是关的）。新版 DSH 不用重启：新会话的模式菜单里就有「设计模式」。老版本 DSH 右侧栏里找不到「设计工作台」的话，重启一次。DSH「插件」页里显示为「设计工作台」。
+
+**更新**：在「插件」页把它卸载，再按上面添加一次。新版发布后大约一天按包名才装得到（DSH 装插件用的 pnpm 默认不装刚发布的版本），急的话填发布包地址。
 
 开发时可以直接链到本地目录：在「添加插件」里填本仓库的绝对路径，装上的是 `link:`，改了客户端代码同样要重启（`lib/picker.js` 每次现给，不用重启）。
 
+## 三步上手
+
+1. 新会话的模式选「设计模式」，说一句要做什么，比如「帮我设计一个社区健身房的会员 App」。右侧栏的空白页上也有几句示例，点一下就放进输入框。
+2. 模型先用提问卡问两三个问题，答完出三个方向并排在画布上。看中哪个，点它标题旁的「✓ 就要这个」，发出去，模型接着做全套。
+3. 哪里不对，点「选择」再点那个元素，光标会停在输入框新的一行，接着说「字大一点、加粗」，发出去。
+
 ## 用起来是什么样
 
 1. **做设计时自动打开**：模型加载了设计技能、调了 `preview_page`，或页面写了设计类型标记（`<meta name="dsh-design">`）之后，再写 `.html` 文件或用命令起开发服务器（`npm run dev` 这类），右侧栏自动弹出「设计工作台」。别的任务写的网页不弹，只在标题栏按钮上亮个蓝点，点开能一键预览；`curl`、浏览器工具去看别的端口，一律不当成要预览的页面。
@@ -60,7 +68,7 @@ dsh-design-studio
    - 点一下：选这个元素
    - 拖一块：选区域，里面的主要元素一起带上（最多 10 个）
    - Esc：取消
-9. **进输入框**：选好的内容整理成一段文字插进输入框（插不进时复制到剪贴板），选中的地方留一个虚线框，例如：
+9. **进输入框**：选好的内容整理成一段文字插进输入框（插不进时复制到剪贴板），光标停在下面新的一行，直接接着打要怎么改；选中的地方留一个虚线框，例如：
 
    ```
    〔选中元素〕a.btn-order「立即点单 →」
@@ -76,9 +84,9 @@ dsh-design-studio
 12. **导出**：工具栏下载按钮，或画布上选中一屏后标签旁的按钮。可以导出这一屏（带手机 / 浏览器外框，或纯画面）、整页长图，以及几屏合成的一张展示图（品牌名做大标题、背景和主色取自设计变量，适合直接发朋友圈 / 小红书 / 作品集）。也能把所有屏导成 **PDF**（每屏一页，网页 / 邮件是整页长图，页面尺寸跟着画幅）或 **PPT**（每屏一张幻灯片，整页图片，幻灯片比例跟着画幅，PowerPoint / WPS / Keynote 都能打开）。屏和屏之间的跳转照样能点：PDF 里点「去点单」翻到菜单那页（每屏还有一条书签），PPT 放映时点了跳到那一张，导出的文件就是能点的原型。文件存到设计目录的 `exports/`，图片同时复制到剪贴板，点「打开文件夹」直接定位。
 13. **版本**：每轮对话开始前、结束后各自动存一版（只存设计文件，名字就是你那句话，例如「主色换成深海蓝」；点选元素发出去的，名字是「「3.2 km」 · 改成绿色」这样，不会是一长串选择器）。工具栏时钟按钮列出所有版本；点一版就看当时的样子（画布 / 单页都行），点「对比」左右拖动把手，比较那一版和现在；「回到这一版」把文件写回去（回之前先把现在的存一版，随时能再切回来）。
 14. **深色模式**：页面写了深色样式（`@media (prefers-color-scheme: dark)`，或 `[data-theme="dark"]` / `.dark`），工具栏多一个月亮按钮，一键切换看深色版，导出的图片也是深色的。
-15. **再出两版**：画布上选中一屏，点标签旁的闪光按钮，让模型给这一屏出两版不同方向的设计（`login-b.html`、`login-c.html`），紧挨着原版排在画布上（开局的三个方向 `home-a/b/c` 也一样，按 a、b、c 排）。挑中哪版就点它标签旁的对勾「就要这个」：输入框里写好「用这一版、其他版本挪进 `drafts/`、接着做全套」，发出去就行。
+15. **再出两版**：画布上选中一屏，点标签旁的闪光按钮，让模型给这一屏出两版不同方向的设计（`login-b.html`、`login-c.html`），紧挨着原版排在画布上（开局的三个方向 `home-a/b/c` 也一样，按 a、b、c 排）。挑中哪版就点它标题旁的「✓ 就要这个」（几个版本并排时每屏都挂着，不用先选中）：输入框里写好「用这一版、其他版本挪进 `drafts/`、接着做全套」，发出去就行。
 16. **在手机上看**：工具栏扫码按钮，右侧栏出一个二维码，手机（和电脑连同一个 Wi-Fi）相机一扫就在手机浏览器里打开这套设计，按真机尺寸看、点得动。电脑上点哪一屏，手机跟着跳；模型改了设计，手机自动刷新。面板上看得到「手机已打开」，也能复制链接、随时停止；30 分钟没人看自动关。
-17. **可点原型**：屏和屏之间用链接连起来（`<a href="detail.html">` 或 `data-href`，内置技能会让模型这么写），画布上选中一屏，就画出它跳去哪、从哪跳来的箭头；隔着别的屏的箭头从屏和屏之间的空当、标题上面绕过去，不穿过中间那屏。点工具栏播放按钮进入演示：在预览里点按钮跳到对应那一屏，前进从右边滑进来、返回从左边；顶上能后退、从头来、退出（Esc）。
+17. **可点原型**：屏和屏之间用链接连起来（`<a href="detail.html">` 或 `data-href`，内置技能会让模型这么写），画布上选中一屏，就画出它能跳去哪：从按钮出发、沿屏和屏之间的空当横平竖直走、转角带圆角，几条线各走各的道、尽量不交叉，不穿过别的屏；底栏、返回这种每屏都有的导航只描虚线框，不画线。点工具栏播放按钮进入演示：在预览里点按钮跳到对应那一屏，前进从右边滑进来、返回从左边；顶上能后退、从头来、退出（Esc）。
 18. **多尺寸并排**：工具栏第三个视图按钮，把现在这一屏按几档宽度并排看：网页是手机 / 平板 / 桌面，App 是小屏 / 标准 / 大屏（小屏是 SE 那种矮屏，没有灵动岛），平板是三种尺寸，小屏挤不挤一眼看出来。并排时也能选择元素，带上是哪一档屏宽。
 19. **预览里直接改字**：工具栏「改字」按钮，点页面里的任意文字就地改，回车保存、Esc 取消。本地 HTML 直接写回源文件（只改那一处，改前改后各存一版，能回退）；开发服务器的页面，或源码里找不到那段字时，改成一句「把「…」改成「…」」放进输入框，交给模型改。
 20. **参考图**：把图片拖进右侧栏、在右侧栏里粘贴，或在设计规范面板点「照参考图改风格…」。图片存进设计目录的 `refs/`（还没有设计目录时存插件缓存），右侧栏从图里取出主要颜色（带占比，少见的鲜艳点缀色也会单独挑出来）和整体深浅，连同图片路径和一句「照这张图的风格改，先更新 tokens.css」放进输入框。
@@ -176,9 +184,9 @@ dsh-design-studio
 ## 测试
 
 ```sh
-node test/test-serve.mjs   # 静态文件、跳不出目录、Host 把门、改动推送、代理、WebSocket、只听 ::1 的开发服务器、连不上的提示页
+node test/test-serve.mjs   # 静态文件、跳不出目录、Host 把门、改动推送、代理、WebSocket、只听 ::1 的开发服务器、连不上的提示页；真浏览器：右侧栏里页面不自己开改动通知（老版右侧栏 3 秒后才开）、导出图里画出外部 icons.svg 的图标
 node test/test-core.mjs    # 地址解析、自动发现（只在做设计时，后台跑的开发服务器也认）、模型 / 用户指定的不被顶掉、重放不动手、存盘恢复（恢复中先不显示空状态）、类型 / 几屏 / 换屏、改字写回、调样式写回（认元素、合并 style、只收安全的值）
-node test/test-client.mjs  # 右侧栏标签页 / 标题栏按钮注册、只给当前会话自动弹出、选中内容整理成的文字、页面 meta、画布排版、设计变量分组、原型箭头（隔屏的绕开别的屏）、多尺寸排版、矮屏手机没有灵动岛、参考图取色
+node test/test-client.mjs  # 右侧栏标签页 / 标题栏按钮注册、只给当前会话自动弹出、选中内容整理成的文字、页面 meta、画布排版、设计变量分组、原型连线（走空当、不穿屏、不交叉、导航只描框）、多尺寸排版、矮屏手机没有灵动岛、参考图取色、插进输入框前后怎么换行
 node test/test-skill.mjs   # 内置技能：名字 / 来源合规、内容读得到、引用的细则文件都在；拆开的几个组件、设计模式带齐标准模式的工具
 node test/test-history.mjs # 版本：存一版 / 没变不存 / 只存设计文件 / 回到某一版 / 上限、每轮前后存、版本名（点选 / 变量 / 参考图换成短名字）、旧版本文件、导出的图不算改动
 node test/test-bundle.mjs  # 远程看的打包：样式表 / @import / url() / 脚本 / 图片 / srcset 内联，外网的、找不到的、越界的原样留着，<base> 和 picker 放对地方，总量上限，@import 循环
@@ -194,6 +202,8 @@ node e2e/e2e-studio.mjs    # 真机（要本机 Chrome，会从 npm 装一个临
 
 ## 已验证
 
+新手走查（2026-11，DSH 0.2.1-rc.5）：按包名装、点「立即启用」不重启就能用；桌面端设计模式里真模型（DeepSeek-V4.1-Flash）从一句「帮我设计一个社区健身房的会员 App」做到六屏全套，再点选改一处。走下来修了五处：画布到 6 屏后预览不再刷新（每屏各开一条改动通知，占满了浏览器对同一地址的 6 条连接，现在由右侧栏转告）；电脑开着「总是显示滚动条」时 App 按 375 宽排版，右侧栏体检和模型的体检对不上；导出的图里外部 `icons.svg` 的图标是空的；整套展示图的大标题是文件夹名；点选进输入框后接着打的字粘在最后一行后面。另外加了几个方向并排时每屏都挂的「✓ 就要这个」和空白页的示例句子。
+
 第一期之后又打磨了一轮，同样在全新的 DSH 0.2.1-rc.3 网页版里实测（`e2e/e2e-studio.mjs`，40 项全过）：模型用提问卡问话时，右侧栏提示「模型在等你回答」，答完提示消失；模型调 `check_design` 前后各一次，第二次只剩它改坏的那屏；「再出一版」写的 home-b 在画布上紧挨着首页；选中它点「就要这个」，输入框里是〔选定方向〕，让模型把原版挪进 `drafts/`。真模型（DeepSeek-V4.1-Flash）在桌面端设计模式里写完首页，自己调了两次 `check_design`（右侧栏量完把清单交回），改完再量一遍「0 个问题」，没有再另开浏览器截图；它写的 `_probe.html` 这类临时文件不再出现在画布上。新加的「文字被挤断行」拿真模型写的首页试，查出 5 处（「可外带」「再来一单」和三个价格）。
 
 第一期（导出 PDF / PPT、设计体检）在一个全新的 DSH 0.2.1-rc.3 网页版里实测（`e2e/e2e-studio.mjs`，36 项全过）：打开设计后按钮上自动标出 4 个问题；模型调 `check_design` 拿回同样的清单（只列首屏，面板关着时再调只列购物车）；模型调 `preview_page` 开三屏 App，体检只在首屏查出埋的四个问题（文字截断、对比度 1.59:1、26×26 的按钮、8px 小字），另两屏零问题，预览里标上编号，点一条闪一下；「交给模型修」把清单放进输入框，发出去模型收到；改好首屏「再查一次」没问题；模型改完这一轮自动再量、按钮上的数字没了；面板开着时模型改坏购物车，面板自己刷新，被挡住的那屏挪出来；导出的 PDF 三页、PPT 三张竖版幻灯片，存进 `exports/`，不当成设计改动，里面「去点单」「加入购物车」能点着跳页，PDF 带每屏书签。PPT 也在 PowerPoint 里打开过，三张都正常、没有修复提示。桌面端重启后插件照常加载。真模型（DeepSeek-V4.1-Flash）在桌面端设计模式里说「帮我设计一个咖啡外带 App 的界面」：先用提问卡问了三个问题（感觉、场景、必须有的），答完写出 home-a / b / c 三个方向并排在画布上，最后再用提问卡问选哪个（也可以混搭）。这次发现两点已改：问完感觉后三个方向不该再跨风格；模型靠另开浏览器截图自查，一轮用掉一百多万 token——所以加了 `check_design`，并让三个方向在画布上按 a、b、c 排。

package/lib/client.js

@@ -196,6 +196,7 @@ window.__ModuleLoader__.load({
       dark: '深色模式',
       variants: '再出两版',
       pickThis: '就要这个：其他版本挪进 drafts/，接着做全套',
+      pickShort: '就要这个',
       pickText: '〔选定方向〕就用「{name}」（{where}）。先把同组的 {others} 挪进 drafts/ 子目录（别删），再把它改名成 {base}.html；它的设计变量搬进 tokens.css（没有就新建）、改用 tokens.css。然后接着做全套。\n',
       pickKeep: '〔选定方向〕留原版「{name}」（{where}）。同组的 {others} 挪进 drafts/ 子目录（别删），其他不动。\n',
       variantText: '给「{name}」再出两版不同方向的设计（布局或视觉风格明显不同），存成同目录下的 {b}-b.html 和 {b}-c.html，会紧挨着原版排在画布上。原版和 tokens.css 别动；新版要换配色就在自己文件里覆盖变量。\n{where}\n',
@@ -297,6 +298,10 @@ window.__ModuleLoader__.load({
       step1: '让模型做一个网页、App 界面或海报',
       step2: '点「选择」，点元素或拖出一块区域',
       step3: '在输入框补一句要怎么改，发出去',
+      tryHead: '不知道怎么开口？点一句试试',
+      try1: '帮我设计一个社区健身房的会员 App',
+      try2: '做一个精品咖啡店的落地页',
+      try3: '做一张周末市集的活动海报',
       inserted: '已放进输入框，补一句要怎么改',
       insertedSend: '已放进输入框，发出去就行',
       copied: '已复制，粘贴到输入框里',
@@ -504,6 +509,7 @@ window.__ModuleLoader__.load({
       dark: 'Dark mode',
       variants: 'Two more takes',
       pickThis: 'Use this one: move the other takes to drafts/ and build the rest',
+      pickShort: 'Use this',
       pickText: '[Direction picked] Use "{name}" ({where}). First move the other takes in its group ({others}) into a drafts/ subfolder (don\'t delete them), then rename it to {base}.html; move its design tokens into tokens.css (create it if missing) and switch it to tokens.css. Then build the rest.\n',
       pickKeep: '[Direction picked] Keep the original "{name}" ({where}). Move the other takes in its group ({others}) into a drafts/ subfolder (don\'t delete them) and leave everything else as is.\n',
       variantText: 'Make two alternative designs of "{name}" in clearly different directions (layout or visual style). Save them next to it as {b}-b.html and {b}-c.html; they will sit right after the original on the canvas. Leave the original and tokens.css unchanged; override variables inside the new files if they need other colors.\n{where}\n',
@@ -605,6 +611,10 @@ window.__ModuleLoader__.load({
       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',
+      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',
       inserted: 'Added to the input. Say what to change',
       insertedSend: 'Added to the input. Just send it',
       copied: 'Copied. Paste it into the input',
@@ -899,6 +909,11 @@ window.__ModuleLoader__.load({
 .ddp-sc .pv .ln{position:absolute;left:6px;top:6px;width:46%;height:3px;border-radius:2px;opacity:.85}
 .ddp-sc .pv .ln.s{top:12px;width:30%;opacity:.6}
 .ddp-sc .nm{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ddp-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)}
@@ -927,10 +942,12 @@ window.__ModuleLoader__.load({
 .ddp-ver span{font-size:12px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ddp-ver small{font-size:11px;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ddp-flows{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:20}
-.ddp-flows path{fill:none;stroke:${ACCENT};stroke-linecap:round;transition:opacity .2s}
+.ddp-flows .halo{fill:none;stroke:var(--dsw-alias-bg-layer-2);stroke-linecap:round;stroke-linejoin:round}
+.ddp-flows .ln{fill:none;stroke:${ACCENT};stroke-linecap:round;stroke-linejoin:round}
 .ddp-flows .hd{fill:${ACCENT};stroke:none}
-.ddp-flows circle{fill:${ACCENT};stroke:#fff}
-.ddp-flows g.dim{opacity:.45}
+.ddp-flows .dot{fill:${ACCENT};stroke:#fff}
+.ddp-flows .hot{fill:rgba(77,107,254,.1);stroke:${ACCENT}}
+.ddp-flows .hot.nav{fill:none;stroke-opacity:.75}
 .ddp-demo{position:absolute;inset:0;overflow:hidden}
 .ddp-demo .lay{position:absolute;inset:0;transition:transform .42s ${EASE},opacity .42s ${EASE}}
 .ddp-demo .lay.wait{opacity:0;pointer-events:none}
@@ -966,6 +983,14 @@ window.__ModuleLoader__.load({
 .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-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-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}}
@@ -1206,6 +1231,56 @@ window.__ModuleLoader__.load({
       return lines.join('\n') + '\n'
     }
 
+    // 插进输入框的字前后怎么接。prev / next 是光标前后的字（读不到为 null），start 是光标位置。
+    // 光标前有字、又不在行首 → 先换行；open（要用户接着说要求）且字以换行结尾 → 末尾多留一个空行给光标：
+    // 输入框里末尾单个换行显示不出来，光标会回到上一行末尾，接着打的字就粘在那行后面。
+    // 不以换行结尾的（「照这个风格来做：」）光标就跟在后面接着写
+    function padInsert(text, prev, next, start, open) {
+      const lead = start > 0 && !(prev != null && prev.endsWith('\n')) ? '\n' : ''
+      let body = text
+      let back = 0
+      if (open && body.endsWith('\n')) {
+        body = body.replace(/\n+$/, '') + '\n'
+        if (!(next != null && next.startsWith('\n'))) { body += '\n'; back = 1 }
+      }
+      return { text: lead + body, back }
+    }
+
+    // DSH 的输入框（只认一个；分屏开着多个时不碰）
+    function composerEl() {
+      try {
+        const els = document.querySelectorAll('[data-lexical-editor="true"]')
+        return els.length === 1 ? els[0] : null
+      } catch { return null }
+    }
+
+    // 输入框的纯文本，段落按换行连起来（和 captureInsertion 的位置对得上）；里面有引用块等别的东西时对不上，给 null
+    function composerText(el) {
+      if (!el || el.querySelector(':scope > :not(p), p :not(span[data-lexical-text]):not(br)')) return null
+      return Array.from(el.children).map((p) => p.textContent).join('\n')
+    }
+
+    // 插完把键盘交回输入框，光标放在刚插的字后面（再往回 back 个字）：用户直接接着说要改什么，或者直接回车发出
+    function focusAfter(el, text, back) {
+      if (!el) return
+      el.focus({ preventScroll: true })
+      const nodes = []
+      let all = ''
+      const w = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
+      for (let n = w.nextNode(); n; n = w.nextNode()) { nodes.push([n, all.length]); all += n.data }
+      const at = all.lastIndexOf(text)
+      const r = document.createRange()
+      if (at < 0) { r.selectNodeContents(el); r.collapse(false) } else {
+        const end = at + text.length - back
+        const hit = nodes.find(([n, o]) => o + n.data.length >= end) || nodes[nodes.length - 1]
+        r.setStart(hit[0], end - hit[1])
+        r.collapse(true)
+      }
+      const s = window.getSelection()
+      s.removeAllRanges()
+      s.addRange(r)
+    }
+
     // ── 设计变量 ─────────────────────────────────────────────────────────────
 
     const TOKEN_GROUPS = ['color', 'font', 'size', 'space', 'radius', 'shadow', 'other']
@@ -1910,6 +1985,7 @@ window.__ModuleLoader__.load({
 
     /**
      * n 屏排成网格：试每种列数，挑缩进舞台后最大的那种。
+     * 一样大时（高度先到顶了）多放几列：拉宽右侧栏就横着多排几屏，像网页卡片换行；但不让最后一行孤零零剩一屏。
      * 行距 = 按比例的空隙 + 标题的高度（标题不缩放，所以换算回画布坐标是 LAB / z）。
      */
     function layoutGrid(n, dw, dh, sw, sh) {
@@ -1924,7 +2000,8 @@ window.__ModuleLoader__.load({
         const zw = (W - (cols - 1) * GAP) / (cols * dw + (cols - 1) * gx)
         const zh = (H - (rows - 1) * LAB) / (rows * dh + (rows - 1) * gy)
         const z = Math.min(zw, zh)
-        if (!best || z > best.z + 1e-9) best = { cols, rows, z }
+        const tie = best && Math.abs(z - best.z) <= best.z * 1e-6
+        if (!best || z > best.z * (1 + 1e-6) || (tie && (rows === 1 || count - (rows - 1) * cols > 1))) best = { cols, rows, z }
       }
       const zl = clampZ(Math.min(1, best.z))
       const stepX = dw + gx + GAP / zl
@@ -1974,102 +2051,307 @@ window.__ModuleLoader__.load({
       return k
     }
 
-    /** 每屏报上来的跳转 → 一屏到另一屏一条（同一对只留第一处） */
+    /**
+     * 每屏报上来的跳转 → 一屏到另一屏一条，hots 是这一对所有的按钮。
+     * nav：「导航」按钮（底栏、返回这种好几屏同一个位置都有、跳到同一屏的），画布上只描框、不画线
+     */
     function flowsOf(screens, linksOf, file) {
       const keys = new Set(screens.map((s) => s.key))
-      const seen = new Set()
+      const spot = (to, l) => to + '|' + Math.round(l.x / 12) + '|' + Math.round(l.y / 12)
+      const where = new Map() // 同一个位置、跳到同一屏的按钮出现在几屏上
+      const per = screens.map((sc) => (linksOf(sc) || []).map((l) => ({ ...l, to: keyOfPath(l.path, file) })))
+      per.forEach((ls) => { for (const k of new Set(ls.map((l) => spot(l.to, l)))) where.set(k, (where.get(k) || 0) + 1) })
       const out = []
-      for (const sc of screens) {
-        for (const l of linksOf(sc) || []) {
-          const to = keyOfPath(l.path, file)
-          if (to === sc.key || !keys.has(to)) continue
-          const k = sc.key + '>' + to
-          if (seen.has(k)) continue
-          seen.add(k)
-          out.push({ from: sc.key, to, x: l.x, y: l.y, w: l.w, h: l.h })
+      screens.forEach((sc, i) => {
+        const pairs = new Map()
+        for (const l of per[i]) {
+          if (l.to === sc.key || !keys.has(l.to)) continue
+          const hot = { x: l.x, y: l.y, w: l.w, h: l.h, nav: (where.get(spot(l.to, l)) || 0) >= 3 }
+          if (!pairs.has(l.to)) pairs.set(l.to, [])
+          pairs.get(l.to).push(hot)
         }
-      }
+        for (const [to, hots] of pairs) out.push({ from: sc.key, to, ...hots[0], hots })
+      })
       return out
     }
 
     /**
-     * 连线的几何（画布坐标）：从页面里那个按钮的边上出发，落到目标屏的左边（目标在左边就落右边），
-     * 两头水平进出的三次曲线；同一屏进来好几条，落点上下错开。
+     * 选中那一屏「通向哪」的连线（画布坐标）。线只走屏和屏之间的缝（列间的竖缝、行间的横缝、外圈），不穿过别的屏：
+     * 从按钮边上出发，就近出屏，在缝里直角转弯（圆角），落到目标屏的边上。几条线各走一道（错开几像素），不叠在一起。
+     * 每种出 / 进的边都试一遍，挑最短、拐弯最少、在屏里走得最少的。
+     * 只有导航按钮连着的（nav）不画线，只给按钮描虚线框。opts.z 是画布缩放（换算几像素的间距），opts.lift 是屏上面标题那一条的高度。
      */
     function flowLines(flows, keys, pos, kind, size, opts = {}) {
       const f = FRAME[kind] || FRAME.web
       const [dw, dh] = deviceBox(kind, size)
+      const z = opts.z || 0.4
+      const px = (n) => n / z
+      const lift = opts.lift || 0
       const idx = new Map(keys.map((k, i) => [k, i]))
-      const incoming = new Map()
-      const out = []
-      const lift = opts.lift || 0 // 屏上面标题那一条有多高（世界坐标）：绕行的线不压标题
-      // 一屏占的地方（连上面的标题）；曲线要是穿过别的屏，就改走屏和屏之间的空当
-      const boxes = pos.map((p) => p && { x0: p.x, y0: p.y - lift, x1: p.x + dw, y1: p.y + dh })
       const xs = [...new Set(pos.filter(Boolean).map((p) => p.x))].sort((m, n) => m - n)
       const ys = [...new Set(pos.filter(Boolean).map((p) => p.y))].sort((m, n) => m - n)
-      const gaps = xs.slice(1).map((x, i) => x - xs[i] - dw).filter((x) => x > 0)
-      const g = (gaps.length ? Math.min(...gaps) : 64) / 2 // 竖着走的线放在两列中间
-      const r = Math.min(g * 0.7, 24) // 拐角圆一点
-      const crosses = (pts, skip) => boxes.some((b, i) => b && !skip.includes(i) && pts.some(([x, y]) => x > b.x0 + 2 && x < b.x1 - 2 && y > b.y0 + 2 && y < b.y1 - 2))
-      const bez = (p0, p1, p2, p3) => Array.from({ length: 23 }, (_, i) => {
-        const t = (i + 1) / 24
-        const u = 1 - t
-        return [0, 1].map((j) => u * u * u * p0[j] + 3 * u * u * t * p1[j] + 3 * u * t * t * p2[j] + t * t * t * p3[j])
-      })
-      /** 横着走那一道的高度：同一排 → 这一排标题上面；不同排 → 下面那排和上一排之间的空当 */
-      function laneOf(ya, yb) {
-        const R = Math.max(ya, yb)
-        const prev = ys.filter((y) => y < R - 1).pop()
-        if (prev === undefined) return R - lift - Math.max(16, g * 0.6)
-        const bottom = prev + dh
-        return bottom + Math.max(R - lift - bottom, 12) / 2
+      const clamp = (v, a, b) => Math.max(a, Math.min(b, v))
+      // 竖缝：第 j 道在第 j 列左边（0 = 最左外圈，xs.length = 最右外圈）
+      const vLane = (j) => {
+        if (j <= 0) return { c: xs[0] - px(14), hw: px(8) }
+        if (j >= xs.length) return { c: xs[xs.length - 1] + dw + px(14), hw: px(8) }
+        const a = xs[j - 1] + dw
+        return { c: (a + xs[j]) / 2, hw: (xs[j] - a) / 2 }
+      }
+      // 横缝：第 i 道在第 i 排上面（标题再上面）；0 = 最上外圈，ys.length = 最下外圈
+      const hLane = (i) => {
+        if (i <= 0) return { c: ys[0] - lift - px(9), hw: px(6) }
+        if (i >= ys.length) return { c: ys[ys.length - 1] + dh + px(14), hw: px(9) }
+        const a = ys[i - 1] + dh
+        const b = ys[i] - lift
+        return { c: (a + b) / 2, hw: Math.max(px(4), (b - a) / 2) }
+      }
+      const at = (lane, o) => lane.c + clamp(o, -lane.hw + px(2), lane.hw - px(2))
+      const cellOf = (i) => ({ x0: pos[i].x, y0: pos[i].y, x1: pos[i].x + dw, y1: pos[i].y + dh, col: xs.indexOf(pos[i].x), row: ys.indexOf(pos[i].y) })
+
+      /** 一条线：出边 E、进边 N、错开 o → 拐点 */
+      function route(S, T, hot, E, N, o) {
+        const cx = hot.x + hot.w / 2
+        const cy = hot.y + hot.h / 2
+        const pts = []
+        let cur // 现在在哪道缝里：{ v: true/false, lane, p: 另一个坐标 }
+        if (E === 'L' || E === 'R') {
+          const lane = at(vLane(E === 'L' ? S.col : S.col + 1), o)
+          pts.push([E === 'L' ? hot.x : hot.x + hot.w, cy], [lane, cy])
+          cur = { v: true, c: lane, p: cy }
+        } else {
+          const lane = at(hLane(E === 'T' ? S.row : S.row + 1), o)
+          pts.push([cx, E === 'T' ? hot.y : hot.y + hot.h], [cx, lane])
+          cur = { v: false, c: lane, p: cx }
+        }
+        const side = N === 'L' || N === 'R'
+        const tLane = side ? at(vLane(N === 'L' ? T.col : T.col + 1), o) : at(hLane(N === 'T' ? T.row : T.row + 1), o)
+        // 落点：侧边上下留 20%；顶边避开左边的标题字，落在右半边
+        // 从上 / 下进同一列的两屏时落点分开（往上进的靠里一点），不在缝里交叉成十字
+        const yIn = (y) => clamp(y, T.y0 + dh * 0.2, T.y0 + dh * 0.8)
+        const xIn = (x) => {
+          const right = x > T.x0 + dw / 2
+          if (N === 'T') return clamp(x, T.x0 + dw * 0.55, T.x0 + dw * (right ? 0.88 : 0.6))
+          return clamp(x, T.x0 + dw * (right ? 0.4 : 0.14), T.x0 + dw * (right ? 0.72 : 0.6))
+        }
+        const edge = (p) => (N === 'L' ? [T.x0, p] : N === 'R' ? [T.x1, p] : N === 'T' ? [p, T.y0] : [p, T.y1])
+        if (cur.v && side) {
+          if (Math.abs(cur.c - tLane) < 0.5) {
+            const y = yIn(cur.p)
+            pts.push([cur.c, y], edge(y))
+          } else {
+            // 两道竖缝之间：找一道横缝过去
+            let k = 0
+            let bestD = Infinity
+            for (let i = 0; i <= ys.length; i++) {
+              const d = Math.abs(hLane(i).c - cur.p) + Math.abs(hLane(i).c - (T.y0 + dh / 2))
+              if (d < bestD) { bestD = d; k = i }
+            }
+            const hy = at(hLane(k), o)
+            const y = yIn(hy)
+            pts.push([cur.c, hy], [tLane, hy], [tLane, y], edge(y))
+          }
+        } else if (cur.v && !side) {
+          const x = xIn(cur.c)
+          pts.push([cur.c, tLane], [x, tLane], edge(x))
+        } else if (!cur.v && side) {
+          const y = yIn(cur.c)
+          pts.push([tLane, cur.c], [tLane, y], edge(y))
+        } else if (Math.abs(cur.c - tLane) < 0.5) {
+          const x = xIn(cur.p)
+          pts.push([x, cur.c], edge(x))
+        } else {
+          // 两道横缝之间：找一道竖缝过去
+          let k = 0
+          let bestD = Infinity
+          for (let j = 0; j <= xs.length; j++) {
+            const d = Math.abs(vLane(j).c - cur.p) + Math.abs(vLane(j).c - (T.x0 + dw / 2))
+            if (d < bestD) { bestD = d; k = j }
+          }
+          const vx = at(vLane(k), o)
+          const x = xIn(vx)
+          pts.push([vx, cur.c], [vx, tLane], [x, tLane], edge(x))
+        }
+        // 去掉重复、共线的点
+        const clean = []
+        for (const p of pts) {
+          const q = clean[clean.length - 1]
+          if (q && Math.abs(q[0] - p[0]) < 0.01 && Math.abs(q[1] - p[1]) < 0.01) continue
+          const r = clean[clean.length - 2]
+          if (q && r && ((Math.abs(r[0] - q[0]) < 0.01 && Math.abs(q[0] - p[0]) < 0.01) || (Math.abs(r[1] - q[1]) < 0.01 && Math.abs(q[1] - p[1]) < 0.01))) clean.pop()
+          clean.push(p)
+        }
+        return clean
+      }
+      const lenOf = (pts) => pts.slice(1).reduce((m, p, i) => m + Math.abs(p[0] - pts[i][0]) + Math.abs(p[1] - pts[i][1]), 0)
+      // 屏里那一小段压过别的按钮（底栏、别的行）分不清是谁的线，宁可绕一点
+      const hits = (a, b, rs, src) => rs.filter((r) => r !== src && Math.min(a[0], b[0]) < r.x + r.w - 1 && Math.max(a[0], b[0]) > r.x + 1 && Math.min(a[1], b[1]) < r.y + r.h - 1 && Math.max(a[1], b[1]) > r.y + 1).length
+      const costOf = (pts, E, N, rs, src) => {
+        const inS = Math.abs(pts[1][0] - pts[0][0]) + Math.abs(pts[1][1] - pts[0][1])
+        return lenOf(pts) + (pts.length - 2) * px(46) + inS * 2 + hits(pts[0], pts[1], rs, src) * px(300) + (E === 'T' ? px(30) : 0) + (N === 'T' ? px(24) : 0)
       }
-      /** 直角绕行：出屏 → 竖着到那一道 → 横着走 → 竖着到目标边上 → 进屏 */
-      function detour(sx, sy, hOut, cx1, lane, cx2, ey, hIn, ex) {
-        const sgn = (v) => (v > 0 ? 1 : v < 0 ? -1 : 0)
-        let d = `M${sx} ${sy}H${cx1 - hOut * r}`
-        const corner = (x, y, dx, dy) => `Q${x} ${y} ${x + dx * r} ${y + dy * r}`
-        const hl = sgn(cx2 - cx1)
-        if (!hl) {
-          const v = sgn(ey - sy)
-          return d + corner(cx1, sy, 0, v) + `V${ey - v * r}` + corner(cx1, ey, hIn, 0) + `H${ex}`
+      // 两条线的横竖段相交几次（共用端点不算）
+      const segs = (pts) => pts.slice(1).map((p, i) => [pts[i], p])
+      const cross = (A, B) => {
+        let n = 0
+        for (const [a, b] of A) {
+          for (const [c, d] of B) {
+            const av = Math.abs(a[0] - b[0]) < 0.01
+            const cv = Math.abs(c[0] - d[0]) < 0.01
+            if (av === cv) continue
+            const [v0, v1, h0, h1] = av ? [a, b, c, d] : [c, d, a, b]
+            const x = v0[0]
+            const y = h0[1]
+            const inV = y > Math.min(v0[1], v1[1]) + 0.01 && y < Math.max(v0[1], v1[1]) - 0.01
+            const inH = x > Math.min(h0[0], h1[0]) + 0.01 && x < Math.max(h0[0], h1[0]) - 0.01
+            if (inV && inH) n++
+          }
+        }
+        return n
+      }
+      /** 拐点 → 圆角折线；末尾留出箭头的长度 */
+      const pathOf = (pts, from, a) => {
+        const P = pts.slice(from)
+        const last = P[P.length - 1]
+        const prev = P[P.length - 2]
+        const ux = Math.sign(last[0] - prev[0])
+        const uy = Math.sign(last[1] - prev[1])
+        P[P.length - 1] = [last[0] - ux * a, last[1] - uy * a]
+        let d = `M${P[0][0]} ${P[0][1]}`
+        for (let i = 1; i < P.length - 1; i++) {
+          const [x0, y0] = P[i - 1]
+          const [x1, y1] = P[i]
+          const [x2, y2] = P[i + 1]
+          const r = Math.min(px(12), Math.hypot(x1 - x0, y1 - y0) / 2, Math.hypot(x2 - x1, y2 - y1) / 2)
+          const ax = x1 - Math.sign(x1 - x0) * r
+          const ay = y1 - Math.sign(y1 - y0) * r
+          const bx = x1 + Math.sign(x2 - x1) * r
+          const by = y1 + Math.sign(y2 - y1) * r
+          d += `L${ax} ${ay}Q${x1} ${y1} ${bx} ${by}`
         }
-        const v1 = sgn(lane - sy)
-        const v2 = sgn(ey - lane)
-        return d + corner(cx1, sy, 0, v1) + `V${lane - v1 * r}` + corner(cx1, lane, hl, 0)
-          + `H${cx2 - hl * r}` + corner(cx2, lane, 0, v2) + `V${ey - v2 * r}` + corner(cx2, ey, hIn, 0) + `H${ex}`
+        return d + `L${P[P.length - 1][0]} ${P[P.length - 1][1]}`
+      }
+
+      const out = []
+      const todo = []
+      // 每屏看得见的按钮框（挑出发点时别从别的按钮上穿过去）
+      const shown = new Map()
+      const spots = (fl, S) => {
+        const ox = S.x0 + f.pad
+        const oy = S.y0 + f.pad + f.top
+        return (fl.hots || [fl]).filter((l) => l.y >= -1 && l.y + l.h <= size[1] + 1 && l.x + l.w > 0 && l.x < size[0])
+          .map((l) => ({ x: ox + Math.max(0, l.x), y: oy + l.y, w: Math.min(l.w, size[0] - Math.max(0, l.x)), h: l.h }))
+      }
+      for (const fl of flows) {
+        const a = idx.get(fl.from)
+        if (a === undefined || !pos[a]) continue
+        if (!shown.has(fl.from)) shown.set(fl.from, [])
+        shown.get(fl.from).push(...spots(fl, cellOf(a)))
       }
       for (const fl of flows) {
         const a = idx.get(fl.from)
         const b = idx.get(fl.to)
         if (a === undefined || b === undefined || a === b || !pos[a] || !pos[b]) continue
-        const pa = pos[a]
-        const pb = pos[b]
-        const ox = pa.x + f.pad
-        const oy = pa.y + f.pad + f.top
-        const dir = pb.x > pa.x + 1 ? 1 : pb.x < pa.x - 1 ? -1 : 0
-        const n = incoming.get(fl.to) || 0
-        incoming.set(fl.to, n + 1)
-        const sy = oy + Math.max(0, Math.min(size[1], fl.y + fl.h / 2))
-        const ey = pb.y + f.pad + f.top + size[1] * Math.min(0.85, 0.32 + n * 0.09)
-        const sx = ox + Math.max(0, Math.min(size[0], dir > 0 ? fl.x + fl.w : fl.x))
-        // 先在这一屏里水平走到边上（不斜着划过画面），出了屏再弯到目标
-        const edge = dir > 0 ? pa.x + dw : pa.x
-        const ex = dir < 0 ? pb.x + dw : pb.x
-        const k = Math.max(90, Math.abs(ex - edge) * 0.42)
-        const c1 = dir > 0 ? edge + k : edge - k - (dir ? 0 : 60)
-        const c2 = dir < 0 ? ex + k : ex - k - (dir ? 0 : 60)
-        let d = `M${sx} ${sy}H${edge}C${c1} ${sy} ${c2} ${ey} ${ex} ${ey}`
-        if (crosses(bez([edge, sy], [c1, sy], [c2, ey], [ex, ey]), [a, b])) {
-          const hOut = dir || -1
-          const hIn = dir || 1
-          d = detour(sx, sy, hOut, edge + hOut * g, laneOf(pa.y, pb.y), ex - hIn * g, ey, hIn, ex)
+        const S = cellOf(a)
+        const T = cellOf(b)
+        const ox = S.x0 + f.pad
+        const oy = S.y0 + f.pad + f.top
+        // 看得见的按钮（在屏幕里、没被往下滚出去）：导航的只描框；别的按钮里挑线最顺的那个出发。
+        // 只有看不见的：从屏幕底边出发，画虚线
+        const seen = (l) => l.y >= -1 && l.y + l.h <= size[1] + 1 && l.x + l.w > 0 && l.x < size[0]
+        const rect = (l) => ({ x: ox + Math.max(0, l.x), y: oy + l.y, w: Math.min(l.w, size[0] - Math.max(0, l.x)), h: l.h })
+        const hots = fl.hots || [fl]
+        for (const l of hots) if (l.nav && seen(l)) out.push({ from: fl.from, to: fl.to, nav: true, hot: rect(l) })
+        const cand = hots.filter((l) => !l.nav && seen(l)).map(rect)
+        if (!cand.length && hots.some((l) => seen(l))) continue
+        if (!cand.length && !hots.some((l) => !l.nav)) continue
+        const rs = shown.get(fl.from) || []
+        const same = (r, q) => Math.abs(r.x - q.x) < 0.5 && Math.abs(r.y - q.y) < 0.5 && Math.abs(r.w - q.w) < 0.5
+        let best = null
+        for (const src of cand.length ? cand : [{ x: ox + size[0] / 2 - 1, y: oy + size[1] - 2, w: 2, h: 2 }]) {
+          const own = rs.find((r) => same(r, src))
+          for (const E of cand.length ? ['L', 'R', 'B', 'T'] : ['B']) {
+            for (const N of ['L', 'R', 'T', 'B']) {
+              const c = costOf(route(S, T, src, E, N, 0), E, N, rs, own)
+              if (!best || c < best.c) best = { c, E, N, src }
+            }
+          }
+        }
+        const hot = cand.length ? best.src : null
+        todo.push({ fl, S, T, hot, src: best.src, E: best.E, N: best.N })
+      }
+      // 各走一道，错开几像素；先按出发点从左上到右下排，线不多时再试各种先后，挑交叉最少的
+      todo.sort((p, q) => p.src.x + p.src.y - (q.src.x + q.src.y))
+      const sp = px(6)
+      const offs = (ord) => ord.map((k) => (k - (todo.length - 1) / 2) * sp)
+      const crossings = (ord) => {
+        const o = offs(ord)
+        const ss = todo.map((it, i) => segs(route(it.S, it.T, it.src, it.E, it.N, o[i])))
+        let n = 0
+        for (let i = 0; i < ss.length; i++) for (let j = i + 1; j < ss.length; j++) n += cross(ss[i], ss[j])
+        return n
+      }
+      let ord = todo.map((_, i) => i)
+      if (todo.length > 1 && todo.length <= 6) {
+        let low = crossings(ord)
+        const perm = (arr, k) => {
+          if (!low) return
+          if (k === arr.length) {
+            const n = crossings(arr)
+            if (n < low) { low = n; ord = arr.slice() }
+            return
+          }
+          for (let i = k; i < arr.length; i++) {
+            ;[arr[k], arr[i]] = [arr[i], arr[k]]
+            perm(arr, k + 1)
+            ;[arr[k], arr[i]] = [arr[i], arr[k]]
+          }
         }
-        out.push({ from: fl.from, to: fl.to, sx, sy, ex, ey, tip: dir < 0 ? -1 : 1, d })
+        perm(ord.slice(), 0)
       }
+      const os = offs(ord)
+      todo.forEach((it, k) => {
+        const pts = route(it.S, it.T, it.src, it.E, it.N, os[k])
+        const a = px(7)
+        const q = pts[pts.length - 1]
+        const pr = pts[pts.length - 2]
+        out.push({
+          from: it.fl.from, to: it.fl.to, hot: it.hot, off: !it.hot,
+          sx: pts[0][0], sy: pts[0][1], ex: q[0], ey: q[1], ux: Math.sign(q[0] - pr[0]), uy: Math.sign(q[1] - pr[1]),
+          d: pathOf(pts, 0, a * 0.7),
+          // 衬底从出了屏幕那一刻开始（屏里那段不用）
+          halo: pathOf([it.E === 'L' ? [it.S.x0, pts[0][1]] : it.E === 'R' ? [it.S.x1, pts[0][1]] : [pts[0][0], it.E === 'T' ? it.S.y0 : it.S.y1], ...pts.slice(1)], 0, a * 0.7),
+          pts,
+        })
+      })
       return out
     }
 
+    /** 连线画成什么（和框架无关的描述，画布用 h() 画出来） */
+    function flowMarks(lines, z) {
+      const px = (n) => n / z
+      const marks = []
+      for (const ln of lines) {
+        if (ln.hot) {
+          const r = Math.min(px(6), ln.hot.w / 2, ln.hot.h / 2)
+          marks.push(['rect', { className: 'hot' + (ln.nav ? ' nav' : ''), x: ln.hot.x, y: ln.hot.y, width: ln.hot.w, height: ln.hot.h, rx: r, strokeWidth: px(1.5), strokeDasharray: ln.nav ? `${px(3)} ${px(2.5)}` : undefined }])
+        }
+      }
+      for (const ln of lines) {
+        if (ln.nav) continue
+        const a = px(7)
+        const bx = ln.ex - ln.ux * a
+        const by = ln.ey - ln.uy * a
+        const vx = -ln.uy * a * 0.56
+        const vy = ln.ux * a * 0.56
+        marks.push(['path', { className: 'halo', d: ln.halo, strokeWidth: px(5.5) }])
+        marks.push(['path', { className: 'ln' + (ln.off ? ' off' : ''), d: ln.d, strokeWidth: px(1.75), strokeDasharray: ln.off ? `${px(4)} ${px(3)}` : undefined }])
+        marks.push(['path', { className: 'hd', d: `M${ln.ex} ${ln.ey}L${bx + vx} ${by + vy}L${bx - vx} ${by - vy}Z` }])
+        marks.push(['circle', { className: 'dot', cx: ln.sx, cy: ln.sy, r: px(3.2), strokeWidth: px(1.4) }])
+      }
+      return marks
+    }
+
     // ── 小部件 ───────────────────────────────────────────────────────────────
 
     function Skeleton({ gone }) {
@@ -2334,7 +2616,7 @@ window.__ModuleLoader__.load({
               const seed = L.seeds.get(id) || L.seedOf.get(id) || null
               L.seeds.delete(id)
               L.seedOf.delete(id)
-              postTo(id, { type: 'init', seed })
+              postTo(id, { type: 'init', seed, relay: true }) // 改动通知由右侧栏转告（见下面「本机预览」），页面别自己开 SSE
               break
             }
             case 'ready':
@@ -2470,6 +2752,21 @@ window.__ModuleLoader__.load({
         refresh()
       }, [chg])
 
+      // 本机预览：同样按轮询到的改动转告页面，页面自己判断跟它有没有关系（有就交指纹、这里载新的一帧）。
+      // 不让每屏各开一条 SSE：画布上到 6 屏就占满浏览器对同一地址的 6 条连接，之后的刷新全卡住
+      const lchg = (!rem && props.remote && props.remote.changes) || []
+      const lN = lchg.length ? lchg[lchg.length - 1].n : 0
+      const lSeen = useRef(lN)
+      useEffect(() => {
+        const from = lSeen.current
+        lSeen.current = lN
+        if (rem || lN === from || !curRef.current) return
+        const fresh = lchg.filter((c) => c.n > from)
+        const unknown = lN < from || !fresh.length || lchg[0].n > from + 1 || fresh.some((c) => !(c.files || []).length)
+        const files = unknown ? [] : [...new Set(fresh.flatMap((c) => c.files || []))]
+        postTo(curRef.current, { type: 'files', file: files[files.length - 1] || '', files })
+      }, [lN])
+
       // 页面没装上脚本（极少数，比如不是 HTML）：载完等一会儿也换上来
       const onFrameLoad = (id) => {
         setTimeout(() => {
@@ -3021,7 +3318,7 @@ window.__ModuleLoader__.load({
       // 拖背景 / 挡板 = 平移；没拖动就算点了一下
       const onPointerDown = (e) => {
         if (e.button !== 0 || !camRef.current) return
-        if (e.target.closest && e.target.closest('.ddp-zoom, .ddp-act')) return
+        if (e.target.closest && e.target.closest('.ddp-zoom, .ddp-act, .ddp-take')) return
         const keyEl = e.target.closest ? e.target.closest('[data-key]') : null
         const d = { x: e.clientX, y: e.clientY, cam: camRef.current, moved: false, key: keyEl ? keyEl.getAttribute('data-key') : '' }
         const move = (ev) => {
@@ -3074,7 +3371,7 @@ window.__ModuleLoader__.load({
             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)), on && !picking && props.actions ? h('span', { key: 'a', className: 'ddp-act' }, ...props.actions(sc)) : null], cw),
+          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),
           props.render(sc, z, i),
           picking ? null : h('div', { className: 'ddp-shield', 'data-key': sc.key, title: items ? '' : t('openScreen'), style: { borderRadius: fr.r } })))
         })
@@ -3087,15 +3384,11 @@ window.__ModuleLoader__.load({
       }
       let flowSvg = null
       if (cam && L && props.flows && props.flows.length && !picking) {
-        const lines = flowLines(props.flows, screens.map((x) => x.key), L.pos, kind, size, { lift: LAB / z }).filter((ln) => !sel || ln.from === sel || ln.to === sel)
+        // 只画选中那屏通向哪（不画哪些通向它），底栏、返回这种每屏都有的导航只描框
+        const lines = sel ? flowLines(props.flows.filter((x) => x.from === sel), screens.map((x) => x.key), L.pos, kind, size, { lift: LAB / z, z }) : []
         if (lines.length) {
-          const sw = 2 / z
-          const a = 9 / z
           flowSvg = h('svg', { key: '__flows', className: 'ddp-flows', width: 1, height: 1 },
-            ...lines.map((ln, i) => h('g', { key: i, className: ln.from === sel ? '' : 'dim' },
-              h('path', { d: ln.d, strokeWidth: sw }),
-              h('path', { className: 'hd', d: `M${ln.ex} ${ln.ey}l${-a * ln.tip} ${-a * 0.62}v${a * 1.24}z` }),
-              h('circle', { cx: ln.sx, cy: ln.sy, r: 4.5 / z, strokeWidth: 1.5 / z }))))
+            ...flowMarks(lines, z).map(([tag, attrs], i) => h(tag, { key: i, ...attrs })))
         }
       }
       return h('div', {
@@ -3213,6 +3506,12 @@ window.__ModuleLoader__.load({
         return () => clearTimeout(id)
       }, [fresh, writingNew, M.lastNew])
       const labelOf = (sc) => (infoOf(ik(sc)) || {}).title || sc.label
+      // 画布上的标题去掉几屏都带的产品名（「首页 · 梅林练」→「首页」）；产品名留给导出的展示图做大标题
+      const shortOf = (sc) => {
+        const sp = splitTitles(shown.map(labelOf))
+        const i = shown.indexOf(sc)
+        return (sp.brand && i >= 0 && sp.labels[i]) || labelOf(sc)
+      }
       const anyDark = Object.keys(info).some((k) => k.startsWith(site + '|') && info[k].dark)
       const fileTarget = !!(st && st.target && st.target.kind === 'file')
       // 远程看（手机走外网等）：本地文件的预览由服务端打包传过来（见 Screen），目录里改了哪些文件也一起带过去
@@ -3337,9 +3636,15 @@ window.__ModuleLoader__.load({
         try {
           if (ia && typeof ia.insertText === 'function') {
             const span = typeof ia.captureInsertion === 'function' ? ia.captureInsertion() : undefined
-            // 光标前面已经有字（用户先打了要求）→ 另起一行，不和那句话粘在一起
-            const lead = span && span.start > 0 ? '\n' : ''
-            if (ia.insertText(lead + text, span)) return say(t(done))
+            const el = composerEl()
+            const all = composerText(el)
+            const at = span ? span.start : 0
+            const ok = all != null && span && span.end <= all.length
+            const p = padInsert(text, ok ? all.slice(0, at) : null, ok ? all.slice(span.end) : null, at, done === 'inserted')
+            if (ia.insertText(p.text, span)) {
+              try { focusAfter(el, p.text, p.back) } catch { /* 用户自己点一下输入框也行 */ }
+              return say(t(done))
+            }
           }
         } catch (e) {
           console.warn('[dsh-design-studio] insertText 失败', e)
@@ -3676,8 +3981,12 @@ window.__ModuleLoader__.load({
         insert(g.letter ? t('pickText', { name: labelOf(sc), where, others, base: g.stem }) : t('pickKeep', { name: labelOf(sc), where, others }), 'insertedSend')
       }
 
+      // 几个方向并排时每屏标题旁都挂着「就要这个」，不用先点中那一屏才看得到
+      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) => [
-        !sc.v && takesOf(shown.map((x) => x.key), sc.key) ? h('button', { key: 'p', className: 'ddp-btn', title: t('pickThis'), onClick: () => pickDirection(sc) }, h(I.check)) : null,
         h('button', { key: 'x', className: 'ddp-btn', title: t('exThis'), onClick: () => doExport(FRAMED[kind] ? 'frame' : 'raw', sc.key) }, h(I.download)),
         sc.v ? null : h('button', { key: 'v', className: 'ddp-btn', title: t('variants'), onClick: () => askVariants(sc) }, h(I.sparkle)),
         h('button', { key: 'o', className: 'ddp-btn', title: t('openScreen'), onClick: () => change({ view: 'single', focus: sc.key }) }, h(I.single)),
@@ -3984,6 +4293,8 @@ window.__ModuleLoader__.load({
               onClick: () => post('open', { session: sid, target: st.hint }).then((s) => { if (poll) poll.set(s) }, (e) => say(t('openFailed', { msg: e.message }))),
             }, t('hintOpen', { name: st.hint.split(/[\\/]/).pop() })) : null,
             h('ol', { className: 'ddp-steps' }, h('li', null, t('step1')), h('li', null, t('step2')), h('li', null, t('step3'))),
+            h('div', { className: 'ddp-tries' }, h('span', null, t('tryHead')),
+              ['try1', 'try2', 'try3'].map((k) => h('button', { key: k, className: 'ddp-try', onClick: () => insert(t(k), 'insertedSend') }, t(k)))),
             h('div', { className: 'ddp-stylepick' }, h('b', null, t('stylesHead')), h('p', null, t('stylesTip')), h(StyleCards, { t, onPick: (x) => insert(formatStyle(t, x, false)) })),
             h('p', null, t('emptyHint')),
             h(AddressForm, { t, sid, className: 'ddp-form', onDone: () => {} }),
@@ -4091,12 +4402,13 @@ window.__ModuleLoader__.load({
           t,
           screens: shown,
           actions,
+          badge,
           kind,
           size,
           ghost,
           picking: picking || textEdit || styleEdit,
           sel: sel || focus,
-          labelOf,
+          labelOf: shortOf,
           reveal,
           inset: ck || styleEdit || panel || styles || pane ? 296 : 0, // 右边的面板 276 宽，离边 10
           render: (sc, z) => renderScreen(sc, z, false),
@@ -4244,7 +4556,7 @@ window.__ModuleLoader__.load({
     // 注意：这里是客户端**服务名**（短的），不是包名
     exports.inject = INJECT
     // 测试用
-    exports._test = { STYLES, formatStyle, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
+    exports._test = { STYLES, formatStyle, padInsert, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, flowMarks, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
     return module.exports
   },
 })

package/lib/picker.js

@@ -28,6 +28,14 @@
   const fitsParent = (o) => o === anc || (o.endsWith(':*') && anc.startsWith(o.slice(0, -1)) && /^\d+$/.test(anc.slice(o.length - 1)))
   const parentOrigins = window.parent === window ? [] : anc ? (allowed.some(fitsParent) ? [anc] : []) : allowed.filter((o) => !o.endsWith(':*'))
   const parentWin = parentOrigins.length ? window.parent : null
+  // 在右侧栏里不画滚动条（和手机上一样）：电脑设成「总是显示滚动条」时它占掉 15px，App 按 375 排版而不是 390，
+  // 右侧栏的体检就和 check_design（无头浏览器不画滚动条）对不上
+  if (parentWin) {
+    const s = document.createElement('style')
+    s.setAttribute('data-dsh-design', '')
+    s.textContent = '*{scrollbar-width:none}*::-webkit-scrollbar{display:none}'
+    ;(document.head || document.documentElement).appendChild(s)
+  }
   const SEED_KEY = '__dsh_design_seed__'
   // 远程看（右侧栏把这一屏打包放进沙盒 iframe 的 srcdoc，location 是 about:srcdoc）：这一屏原本的地址由右侧栏给
   const HERE = cfg.remote && typeof cfg.href === 'string' ? cfg.href : ''
@@ -1131,8 +1139,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
   const LINK_SEL = 'a[href], [data-href], [data-to], [onclick]'
 
-  /** 页面里跳到别的屏的地方：路径 + 在视口里的位置（画布上从这里画一条线到那一屏） */
-  function linksOf() {
+  /** 页面里跳到别的屏的地方：路径 + 在视口里的位置（画布上从这里画一条线到那一屏）
+   *  shown：只要这会儿露在外面的（画布连线用；导出、交接要全部） */
+  function linksOf(shown) {
     const out = []
     const seen = new Set()
     for (const el of document.querySelectorAll(LINK_SEL)) {
@@ -1146,6 +1155,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       // 正在播动画（生成动画、页面自己的淡入）的按钮这会儿透明度是 0，但它是看得见的按钮
       const moving = typeof el.getAnimations === 'function' && el.getAnimations().length > 0
       if (cs.visibility === 'hidden' || cs.display === 'none' || (!moving && Number(cs.opacity) === 0)) continue
+      // 被固定的底栏 / 顶栏盖住的按钮（滚到它下面了）看不见，画布上别从它出线
+      const top = shown ? document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2) : null
+      if (top && top !== el && !el.contains(top) && !(host && host.contains(top))) continue
       const k = p + '|' + Math.round(r.left / 8) + '|' + Math.round(r.top / 8)
       if (seen.has(k)) continue
       seen.add(k)
@@ -1160,14 +1172,14 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   let linkSig = ''
   let linkTimer = 0
   function firstLinks() {
-    const links = linksOf()
+    const links = linksOf(true)
     linkSig = JSON.stringify(links)
     addEventListener('resize', () => { clearTimeout(linkTimer); linkTimer = setTimeout(resendLinks, 120) })
     setTimeout(resendLinks, 600)
     return links
   }
   function resendLinks() {
-    const links = linksOf()
+    const links = linksOf(true)
     const sig = JSON.stringify(links)
     if (sig === linkSig) return
     linkSig = sig
@@ -1432,6 +1444,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     const families = new Set()
     const jobs = []
     let seq = 0
+    // <use href="icons.svg#x">：画成图时（SVG 当图片）不会去载别的文件，图标全没了。
+    // 把用到的那个图标复制进画出来的页面，href 改成指它（和 bundle.js 远程看时一样的道理）
+    const sprites = document.createElementNS(SVGNS, 'svg')
+    sprites.setAttribute('style', 'position:absolute;width:0;height:0;overflow:hidden')
+    const spriteDocs = new Map()
+    const spriteIds = new Map()
+    const spriteOf = (abs) => {
+      if (spriteIds.has(abs)) return spriteIds.get(abs)
+      const u = new URL(abs)
+      const frag = decodeURIComponent(u.hash.slice(1))
+      u.hash = ''
+      if (!spriteDocs.has(u.href)) {
+        spriteDocs.set(u.href, fetch(u.href, { credentials: 'same-origin' })
+          .then((r) => (r.ok ? r.text() : ''))
+          .then((t) => (t ? new DOMParser().parseFromString(t, 'image/svg+xml') : null))
+          .catch(() => null))
+      }
+      const p = spriteDocs.get(u.href).then((doc) => {
+        const src = doc && frag ? doc.getElementById(frag) : null
+        if (!src || src.namespaceURI !== SVGNS) return ''
+        const id = 'ddpu' + (++seq)
+        const copy = document.importNode(src, true)
+        copy.setAttribute('id', id)
+        sprites.appendChild(copy)
+        return id
+      })
+      spriteIds.set(abs, p)
+      return p
+    }
 
     function walk(node) {
       if (node.nodeType === 3) return document.createTextNode(node.nodeValue)
@@ -1486,6 +1527,18 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
         if (href) jobs.push(inline(new URL(href, here()).href).then((d) => { if (d) c.setAttribute('href', d) }))
       }
+      if (el.namespaceURI === SVGNS && el.localName === 'use') {
+        const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
+        let abs = ''
+        try { abs = href && !href.startsWith('#') ? new URL(href, here()).href : '' } catch { /* 怪地址 */ }
+        if (abs && abs.includes('#')) {
+          jobs.push(spriteOf(abs).then((id) => {
+            if (!id) return
+            c.removeAttributeNS('http://www.w3.org/1999/xlink', 'href')
+            c.setAttribute('href', '#' + id)
+          }))
+        }
+      }
       if (tag === 'INPUT') {
         if (el.type === 'checkbox' || el.type === 'radio') { if (el.checked) c.setAttribute('checked', '') } else c.setAttribute('value', el.value)
       }
@@ -1549,6 +1602,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       style.textContent = fontCss + '\n' + pseudoRules.join('\n') + '\n*::-webkit-scrollbar{display:none}'
       const body = [...root.childNodes].find((n) => n.localName === 'body')
       ;(body || root).insertBefore(style, (body || root).firstChild)
+      if (sprites.childNodes.length) (body || root).appendChild(sprites)
       if (!full && (scrollX || scrollY) && body) {
         body.setAttribute('style', body.getAttribute('style') + `transform:translate(${-scrollX}px,${-scrollY}px);`)
       }
@@ -2378,7 +2432,8 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     if (!d || d.dshDesign !== 1) return
     if (d.type === 'pick') start(d.hint !== false)
     else if (d.type === 'cancel') { if (!styleOn) stop(true) }
-    else if (d.type === 'init') boot(d.seed || null)
+    else if (d.type === 'init') { if (d.relay) relay(); boot(d.seed || null) }
+    else if (d.type === 'files') { relay(); onFiles(String(d.file || ''), Array.isArray(d.files) ? d.files : null) }
     else if (d.type === 'reveal') reveal(d)
     else if (d.type === 'zoom') setK(1 / (Number(d.z) || 1))
     else if (d.type === 'snapshot') post({ type: 'snap', seed: seedNow() })
@@ -2512,21 +2567,34 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     return files.every((f) => /\.html?$/i.test(f) && String(f).replace(/\\/g, '/') !== me)
   }
 
+  /** 目录里有文件改了（file 是最后一个，files 是这一批全部；空的 = 不知道改了啥） */
+  function onFiles(file, files) {
+    if (!shown) return
+    if (othersOnly(files)) return
+    if (parentWin) post({ type: 'changed', file, seed: seedNow() })
+    else selfReload()
+  }
+
+  // 改动通知：在右侧栏里由右侧栏转告（init 里说 relay，之后发 files）。每屏各开一条 SSE 的话，
+  // 画布上到 6 屏就占满浏览器对同一地址的 6 条连接，之后刷新要载的页面、样式表全排着队，预览从此不再变。
+  // 不在右侧栏里（手机上看、单独打开），或右侧栏是老版本不转告（等 3 秒没说），才自己开 SSE。
   // 旧版本（/__dsh_design__/v/…）只读，不跟着目录改动刷新
-  if (cfg.live && window.EventSource && !location.pathname.startsWith('/__dsh_design__/v/')) {
-    const es = new EventSource('/__dsh_design__/events')
+  const LIVE = !!cfg.live && !!window.EventSource && !location.pathname.startsWith('/__dsh_design__/v/')
+  let es = null
+  let relayed = false
+  const openEvents = () => {
+    if (es || relayed || !LIVE) return
+    es = new EventSource('/__dsh_design__/events')
     es.addEventListener('change', (e) => {
-      if (!shown) return
-      let file = ''
-      let files = null
-      try {
-        const d = JSON.parse(e.data)
-        file = d.file || ''
-        files = d.files || null
-      } catch { /* 没带文件名 */ }
-      if (othersOnly(files)) return
-      if (parentWin) post({ type: 'changed', file, seed: seedNow() })
-      else selfReload()
+      let d = {}
+      try { d = JSON.parse(e.data) || {} } catch { /* 没带文件名 */ }
+      onFiles(d.file || '', d.files || null)
     })
   }
+  function relay() {
+    relayed = true
+    if (es) { es.close(); es = null }
+  }
+  if (!parentWin) openEvents()
+  else setTimeout(openEvents, 3000)
 })()

package/lib/serve.js

@@ -526,5 +526,12 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     return false
   }
 
-  return { open, close, closeAll, alive, size: () => servers.size }
+  /** 现在一共连着几条改动通知（SSE）：右侧栏里的页面靠转告，不该自己开（浏览器对同一地址最多 6 条连接） */
+  function listeners() {
+    let n = 0
+    for (const e of servers.values()) n += e.clients.size
+    return n
+  }
+
+  return { open, close, closeAll, alive, listeners, size: () => servers.size }
 }

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Design Studio",
-    "description": "A design workbench in the right sidebar: web, app and poster screens generate on a canvas inside device frames; click an element to have the model change it, tweak design tokens across every screen, compare and roll back versions, export share-ready images, and scan a QR code to view it on your phone."
+    "description": "A design workbench in the right sidebar: web, app and poster screens generate on a canvas inside device frames; click an element to have the model change it, drag sliders to tweak design tokens across every screen, compare and roll back versions, extract a brand's design system from a website, turn a design into React / Vue / HTML code and diff it pixel by pixel, export share-ready images, and scan a QR code to view it on your phone."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "设计工作台",
-    "description": "右侧栏的设计工作台：网页、App、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，改设计变量全屏一起变，版本能对比回退，一键导出好看的展示图，扫码就能在手机上看。"
+    "description": "右侧栏的设计工作台：网页、App、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，拖滑块调设计变量全屏一起变，版本能对比回退；能从网站提取品牌设计系统，也能把设计转成 React / Vue / HTML 代码并逐像素对比；一键导出好看的展示图，扫码就能在手机上看。"
   }
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1 test/*.mjs"
   },
-  "description": "Design workbench in the DeepSeek Harness right sidebar: watch web / app / poster screens generate on a canvas with device frames, click an element to send it to the chat, tweak design tokens, compare versions, export share-ready images and scan to view on your phone.",
+  "description": "Design workbench in the DeepSeek Harness right sidebar: watch web / app / poster screens generate on a canvas with device frames, click an element to send it to the chat, tweak design tokens with sliders, compare versions, extract a brand's design system from a site, turn a design into React / Vue / HTML code checked pixel by pixel, export share-ready images and scan to view on your phone.",
   "license": "MIT",
   "repository": {
     "type": "git",

package/skills/ui-design/SKILL.md

@@ -31,7 +31,7 @@
 
 2. **先写设计变量**：在设计目录建 `tokens.css`（起手模板 `tokens.css` 就在这个技能目录里，复制过去再按品牌改；有默认的品牌设计系统就复制它的 `tokens.css` 和 `components.css`），颜色、字体、字号阶梯、间距、圆角、阴影都从这里取。每屏都 `<link rel="stylesheet" href="tokens.css">`。之后要统一改风格，改这一个文件，所有屏一起变。
 
-3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写这屏的中文名（画布上显示它）。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
+3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写「这屏的中文名 · 产品名」（如「首页 · 梅林练」，每屏的产品名写成一样的）：画布上只显示屏名，导出整套展示图时产品名做大标题。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
 
    ```html
    <meta name="dsh-design" content="app">          <!-- 类型；海报可带尺寸：poster 1080x1920 -->