dsh-design-studio 0.6.2 → 0.7.1

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
   },
 })