dsh-design-studio 0.11.0 → 0.13.0

package/lib/draft.js

@@ -0,0 +1,151 @@
+/**
+ * 边写边看：模型写一整页 HTML 时，write 工具的参数要流好几分钟才到。这里把流到一半的页面内容攒着，
+ * 预览服务器（serve.js：某屏的地址带 ?__ddp_draft=）一边收一边原样吐给 iframe，浏览器就一段段画出来。
+ *
+ *   createDrafts()            文件（绝对路径）→ 正在写的内容；订阅的人随到随收
+ *   createJsonStringDecoder() 参数是 JSON：把流过来的「字符串里面那一截」一块块还原（转义可能被切在两块中间）
+ */
+
+const MAX_TEXT = 4 * 1024 * 1024 // 一页最多攒这么多（再大的也不是正常的设计稿）
+const KEEP = 6 // 最多记几份（每轮开始清一次，这里只是兜底）
+// 「整段一下子到的」：最后一阵（中间没停过 GAP_MS）在 LUMP_MS 里就到齐了，有 LUMP_CHARS 字以上、占全文一半以上。
+// 这种才值得事后补放一遍（serve.js 晚来的也一截截放、右侧栏放完再换真文件）；一路流着写的看过了，不重放
+const LUMP_CHARS = 1500
+const LUMP_MS = 1500
+const GAP_MS = 1000
+
+export function createDrafts({ log = () => {} } = {}) {
+  const map = new Map() // abs → { id, text, done, subs }
+  let ids = 0
+
+  const emit = (d, ev) => {
+    for (const fn of [...d.subs]) {
+      try { fn(ev) } catch (e) { log(e) }
+    }
+  }
+
+  return {
+    /** 开始写（同一个文件重写也从头来）；返回这一份的编号，地址里带上，iframe 才会重载 */
+    begin(abs) {
+      const old = map.get(abs)
+      if (old) emit(old, { done: true, gone: true })
+      const d = { id: ++ids, text: '', done: false, subs: new Set() }
+      map.delete(abs)
+      map.set(abs, d)
+      while (map.size > KEEP) {
+        const [k, v] = map.entries().next().value
+        emit(v, { done: true, gone: true })
+        map.delete(k)
+      }
+      return d.id
+    },
+    // push / end / drop 带上 begin 给的编号时只认那一份（同一个文件后来又开始重写了，旧的不碰新的）
+    push(abs, text, id) {
+      const d = map.get(abs)
+      if (!d || d.done || !text || (id && d.id !== id)) return
+      const room = MAX_TEXT - d.text.length
+      if (room <= 0) return
+      const s = text.length > room ? text.slice(0, room) : text
+      const now = Date.now()
+      if (!d.burstAt || now - d.lastAt > GAP_MS) {
+        d.burstAt = now
+        d.burst = 0
+      }
+      d.burst += s.length
+      d.lastAt = now
+      d.text += s
+      emit(d, { text: s })
+    },
+    /** 参数流完了（或者这次作废了）：在看的那头收尾 */
+    end(abs, id) {
+      const d = map.get(abs)
+      if (!d || d.done || (id && d.id !== id)) return
+      d.done = true
+      d.endAt = Date.now()
+      d.lump = !!d.burstAt && d.burst >= LUMP_CHARS && d.burst * 2 >= d.text.length && d.endAt - d.burstAt < LUMP_MS
+      emit(d, { done: true })
+    },
+    /** 作废：在看的那头收尾，之后这个地址读不到 */
+    drop(abs, id) {
+      const d = map.get(abs)
+      if (!d || (id && d.id !== id)) return
+      d.done = true
+      emit(d, { done: true, gone: true })
+      map.delete(abs)
+    },
+    get(abs) {
+      return map.get(abs) || null
+    },
+    /** 订阅：先拿 get() 的现有内容，之后的增量走 fn({ text }) / fn({ done }) */
+    sub(abs, fn) {
+      const d = map.get(abs)
+      if (!d) return () => {}
+      d.subs.add(fn)
+      return () => d.subs.delete(fn)
+    },
+    clear() {
+      for (const d of map.values()) emit(d, { done: true, gone: true })
+      map.clear()
+    },
+  }
+}
+
+const ESC = { n: '\n', t: '\t', r: '\r', b: '\b', f: '\f', '/': '/', '\\': '\\', '"': '"' }
+
+/** JSON 字符串内容的流式还原：push(原文的一块) → 还原出来的一块；碰到收尾的引号就停（done） */
+export function createJsonStringDecoder() {
+  let pend = '' // 切在两块中间的半个转义
+  let hi = '' // 半个表情（高位代理），等下一块
+  let done = false
+  return {
+    get done() {
+      return done
+    },
+    push(chunk) {
+      if (done) return ''
+      const src = pend + String(chunk || '')
+      pend = ''
+      let out = ''
+      let i = 0
+      while (i < src.length) {
+        const c = src[i]
+        if (c === '"') {
+          done = true
+          break
+        }
+        if (c !== '\\') {
+          let j = i + 1
+          while (j < src.length && src[j] !== '\\' && src[j] !== '"') j++
+          out += src.slice(i, j)
+          i = j
+          continue
+        }
+        if (i + 1 >= src.length) {
+          pend = src.slice(i)
+          break
+        }
+        const e = src[i + 1]
+        if (e === 'u') {
+          if (i + 6 > src.length) {
+            pend = src.slice(i)
+            break
+          }
+          const code = parseInt(src.slice(i + 2, i + 6), 16)
+          if (!Number.isNaN(code)) out += String.fromCharCode(code)
+          i += 6
+          continue
+        }
+        out += ESC[e] ?? e
+        i += 2
+      }
+      out = hi + out
+      hi = ''
+      const last = out.charCodeAt(out.length - 1)
+      if (!done && last >= 0xd800 && last <= 0xdbff) {
+        hi = out.slice(-1)
+        out = out.slice(0, -1)
+      }
+      return out
+    },
+  }
+}

package/lib/index.js

@@ -54,6 +54,7 @@ import { createLibraryRoutes } from './gallery/routes.js'
 import { createMarket } from './gallery/market.js'
 import { createMarketRoutes } from './gallery/market-routes.js'
 import { createTracker, parseTarget, findRule, KINDS } from './core.js'
+import { createDrafts } from './draft.js'
 import { createHistory } from './history.js'
 import { createPhone } from './phone.js'
 import { qrMatrix } from './qr.js'
@@ -657,9 +658,11 @@ export function apply(ctx) {
   const seedDir = fileURLToPath(new URL('../gallery-seed', import.meta.url))
   // 「设计库不联网」那行开着：市场不访问任何网址
   const market = createMarket({ version: VERSION, log, seedDir: fs.existsSync(path.join(seedDir, 'index.json')) ? seedDir : '', online: () => studio.offline === 0 })
+  const drafts = createDrafts({ log }) // 正在写的页面（边写边看）：tracker 往里推，预览服务器往外吐
   const hub = createHub({
     log,
     history,
+    drafts,
     strict: { html: (buf) => library.strictHtml(buf) || market.strictHtml(buf), root: (dir) => library.strictRoot(dir) || market.isStaging(dir), versions: (dir) => library.strictVersions(dir) },
     // 桌面版的 dsh-app://app 是默认就认的；这里补上 DSH 网页端的地址，和 DSH 配置里声明的对外地址（反向代理 / 域名）
     parents: () => {
@@ -679,6 +682,7 @@ export function apply(ctx) {
   }
   tracker = createTracker({
     open,
+    drafts,
     log,
     history,
     // 记会话的同时，在做的设计目录补进「我的作品」
@@ -694,7 +698,7 @@ export function apply(ctx) {
       return s
     },
   })
-  ctx.effect(() => () => hub.closeAll(), 'dsh-design-studio: preview servers')
+  ctx.effect(() => () => { drafts.clear(); hub.closeAll() }, 'dsh-design-studio: preview servers')
   ctx.effect(() => {
     studio.tracker = tracker
     studio.log = log
@@ -799,7 +803,7 @@ export function apply(ctx) {
     return out
   }
 
-  /** 调节滑块写回文件：values = { id: 值 } */
+  /** 调节滑块写回文件：values = { id: 值 }；外观面板里直接改的设计变量：vars = { '--名字': 值 } */
   async function tweakRoute(req, res) {
     if (!admit(req, res)) return
     if (req.method !== 'POST') return json(res, 405, { error: 'method not allowed' })
@@ -807,7 +811,8 @@ export function apply(ctx) {
     try { body = await readBody(req) } catch (e) { return json(res, 400, { error: e.message }) }
     const values = body.values && typeof body.values === 'object' && !Array.isArray(body.values) ? body.values : {}
     try {
-      const r = tracker.editDir(String(body.session || ''), (root) => applyTweaks(root, values), (x) => `调节：${x.changed.map((c) => `${c.label} ${c.to}`).join('、')}`.slice(0, 60), String(body.root || ''))
+      const vars = body.vars && typeof body.vars === 'object' && !Array.isArray(body.vars) ? body.vars : null
+      const r = tracker.editDir(String(body.session || ''), (root) => applyTweaks(root, values, vars), (x) => `调节：${x.changed.map((c) => `${c.label} ${c.to}`).join('、')}`.slice(0, 60), String(body.root || ''))
       json(res, 200, r)
     } catch (e) {
       json(res, 500, { error: e.message })
@@ -1227,5 +1232,14 @@ export function apply(ctx) {
         log(e)
       }
     })
+    // 模型边说边推的流：写大文件时参数要流好几分钟，靠它提前知道在写哪个文件（老版本 DSH 没有这个事件，就只是收不到）
+    ctx.on('agent/assistant-stream', (e) => {
+      try {
+        const id = e && e.agent && e.agent.session && e.agent.session.id
+        if (id && e.frame) tracker.stream(id, e.frame)
+      } catch (err) {
+        log(err)
+      }
+    }, { global: true })
   }
 }

package/lib/picker.js

@@ -605,6 +605,27 @@
 .scan::after{content:"";position:absolute;left:0;right:0;bottom:8%;height:2px;
   background:linear-gradient(90deg,transparent,#8ea2ff 20%,#c4b5fd 50%,#5eead4 80%,transparent);box-shadow:0 0 14px 3px rgba(124,140,255,.55)}
 @keyframes scan{0%{opacity:0;transform:translateY(-38vh)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateY(100vh)}}
+/* 生成动画：带名字的鼠标把版面框出来，再由上往下显出整屏 */
+.bmask{position:fixed;inset:0;background:var(--bg,#fff);clip-path:inset(0 0 0 0)}
+.bmask.go{transition:clip-path var(--dur,900ms) cubic-bezier(.55,.05,.25,1);clip-path:inset(100% 0 0 0)}
+.bbox{position:fixed;box-sizing:border-box;width:0;height:0;border:calc(1.5px * var(--k, 1)) dashed var(--c);border-radius:calc(8px * var(--k, 1));
+  background:color-mix(in srgb,var(--c) 6%,transparent);overflow:hidden;
+  transition:width var(--d,340ms) cubic-bezier(.3,.7,.2,1),height var(--d,340ms) cubic-bezier(.3,.7,.2,1),opacity .3s ease,background .3s ease,border-color .3s ease}
+.bbox::after{content:"";position:absolute;inset:0;transform:translateX(-100%);opacity:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 22%,transparent),transparent)}
+.bbox.fill{border-style:solid;border-color:color-mix(in srgb,var(--c) 42%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent)}
+.bbox.fill::after{opacity:1;animation:bshine 1.2s ease-in-out infinite}
+.bbox b{position:absolute;left:calc(7px * var(--k, 1));top:calc(5px * var(--k, 1));opacity:0;transition:opacity .25s ease;
+  font:600 calc(10.5px * var(--k, 1))/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:.02em;color:var(--c);white-space:nowrap}
+.bbox.fill b{opacity:1}
+.bcur.flip span{left:auto;right:calc(100% - 4px * var(--k, 1));border-radius:calc(8px * var(--k, 1)) calc(4px * var(--k, 1)) calc(8px * var(--k, 1)) calc(8px * var(--k, 1))}
+.bcur.up span{top:auto;bottom:calc(100% - 2px * var(--k, 1))}
+@keyframes bshine{to{transform:translateX(100%)}}
+.bcur{position:fixed;left:0;top:0;z-index:2;opacity:0;will-change:transform;transition:opacity .25s ease}
+.bcur.on{opacity:1}
+.bcur svg{display:block;width:calc(17px * var(--k, 1));height:calc(21px * var(--k, 1));overflow:visible;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
+.bcur span{position:absolute;left:calc(13px * var(--k, 1));top:calc(17px * var(--k, 1));padding:calc(2px * var(--k, 1)) calc(7px * var(--k, 1));
+  border-radius:calc(4px * var(--k, 1)) calc(8px * var(--k, 1)) calc(8px * var(--k, 1)) calc(8px * var(--k, 1));background:var(--c);color:#fff;
+  font:600 calc(11px * var(--k, 1))/1.35 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.18)}
 `
   let fx = null
 
@@ -724,6 +745,211 @@
     setTimeout(() => { if (linkSig) resendLinks() }, DUR + 800) // 动画时按钮挪了一点，播完按最终位置补报
   }
 
+  // ── 生成动画 2：几只带名字的鼠标（排版 / 配色 / 文案）轮流把版面框出来，框里闪骨架，再由上往下显出整屏 ──
+  //
+  // 框的是页面里几大块的真实位置（这屏已经写好了，先量），所以动画和最后的画面对得上。
+  // 系统开了「减少动态效果」就直接显示；点一下、滚一下、按个键就跳过。播完不留任何东西。
+
+  const BUILD_TX = {
+    zh: { cur: ['排版', '配色', '文案'], top: '顶栏', bottom: '底栏', side: '侧栏', img: '图片', title: '标题', list: '列表', form: '表单', card: '卡片', block: '内容' },
+    en: { cur: ['Layout', 'Color', 'Copy'], top: 'Header', bottom: 'Footer', side: 'Sidebar', img: 'Image', title: 'Title', list: 'List', form: 'Form', card: 'Card', block: 'Section' },
+  }
+  const BUILD_C = ['#4d6bfe', '#e8590c', '#0ca678']
+  const ARROW = '<svg viewBox="0 0 17 21"><path d="M1.2 1.2v15.6l4.3-4 3 6.6 2.9-1.3-3-6.5h6z" fill="var(--c)" stroke="#fff" stroke-width="1.5" stroke-linejoin="round"/></svg>'
+  let building = null
+
+  /** 页面里几大块（视口里看得见的部分）：外壳 div 一层层钻进去，太高的一块再拆一层，最多 7 块 */
+  function buildBlocks() {
+    const vw = innerWidth
+    const vh = innerHeight
+    const rectOf = (c) => {
+      if (SIG_SKIP.has(c.tagName)) return null
+      const r = c.getBoundingClientRect()
+      if (r.width < 8 || r.height < 8 || r.bottom <= 0 || r.top >= vh || r.right <= 0 || r.left >= vw) return null
+      const cs = getComputedStyle(c)
+      if (cs.visibility === 'hidden' || cs.display === 'contents' || Number(cs.opacity) === 0) return null
+      return r
+    }
+    const kidsOf = (el) => [...el.children].map((c) => ({ el: c, r: rectOf(c) })).filter((x) => x.r)
+    const seen = (r) => Math.max(0, Math.min(r.bottom, vh) - Math.max(r.top, 0)) * Math.max(0, Math.min(r.right, vw) - Math.max(r.left, 0))
+    let kids = document.body ? kidsOf(document.body) : []
+    for (let d = 0; kids.length === 1 && d < 8; d++) kids = kidsOf(kids[0].el)
+    const min = vw * vh * 0.012
+    const split = (k) => {
+      let sub = kidsOf(k.el)
+      for (let d = 0; sub.length === 1 && d < 6; d++) sub = kidsOf(sub[0].el)
+      return sub.filter((x) => seen(x.r) >= min)
+    }
+    // 太高的一块（整个内容区）往里拆，最多两层
+    const expand = (k, depth) => {
+      if (depth < 2 && k.r.height > vh * 0.55) {
+        const sub = split(k)
+        if (sub.length >= 2 && sub.length <= 6) return sub.flatMap((x) => expand(x, depth + 1))
+      }
+      return [k]
+    }
+    let out = kids.filter((k) => seen(k.r) >= min).flatMap((k) => expand(k, 0))
+    const box = (r) => ({ top: r.top, bottom: r.bottom, left: r.left, right: r.right })
+    for (const k of out) {
+      k.b = box(k.r)
+      const pos = getComputedStyle(k.el).position
+      k.fixed = pos === 'fixed' || pos === 'sticky'
+    }
+    // 浮在上面的条（购物车条、底部导航）：底下那块的框截到它上面，免得两个框叠在一起
+    const wide = (a, b) => Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left)) > (a.right - a.left) * 0.6
+    for (const k of out) {
+      if (k.fixed) continue
+      for (const f of out) {
+        if (!f.fixed || f === k || !wide(k.b, f.b)) continue
+        if (f.b.top > k.b.top + vh * 0.1 && f.b.top < k.b.bottom) k.b.bottom = f.b.top - 6
+        else if (f.b.bottom < k.b.bottom - vh * 0.1 && f.b.bottom > k.b.top) k.b.top = f.b.bottom + 6
+      }
+    }
+    // 还叠着的（一层套一层）只留看得见更多的那个
+    const inter = (a, b) => Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top)) * Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left))
+    out = out.filter((k) => k.b.bottom - k.b.top >= 12 && seen(k.b) >= min * 0.6)
+    out.sort((a, b) => seen(b.b) - seen(a.b))
+    out = out.filter((k, i) => !out.slice(0, i).some((o) => inter(k.b, o.b) > seen(k.b) * 0.5))
+    if (out.length > 7) out = out.slice(0, 7)
+    out.sort((a, b) => a.b.top - b.b.top || a.b.left - b.b.left)
+    const pad = 2
+    return out.map((k) => {
+      const x = Math.max(pad, k.b.left)
+      const y = Math.max(pad, k.b.top)
+      return { el: k.el, r: k.r, x, y, w: Math.max(12, Math.min(vw - pad, k.b.right) - x), h: Math.max(12, Math.min(vh - pad, k.b.bottom) - y) }
+    })
+  }
+
+  /** 这块大概是什么：顶栏 / 底栏 / 图片 / 表单 / 列表 / 标题 / 卡片 */
+  function blockName(el, r, N) {
+    const vh = innerHeight
+    const tag = el.tagName.toLowerCase()
+    const role = el.getAttribute('role') || ''
+    const low = r.top > vh * 0.6
+    if (tag === 'footer' || ((tag === 'nav' || role === 'tablist' || role === 'navigation') && low) || (r.bottom >= vh * 0.94 && r.height < vh * 0.16)) return N.bottom
+    if (tag === 'header' || tag === 'nav' || role === 'banner' || (r.top <= vh * 0.06 && r.height < vh * 0.16)) return N.top
+    if (el.querySelector('input:not([type=hidden]),textarea,select')) return N.form
+    let media = 0
+    for (const m of el.querySelectorAll('img,picture,video,canvas,svg')) {
+      const q = m.getBoundingClientRect()
+      if (q.width * q.height > 400) media += q.width * q.height
+    }
+    if (media > r.width * r.height * 0.45) return N.img
+    if (r.width < innerWidth * 0.36 && r.height > vh * 0.3) return N.side
+    const kids = [...el.children].filter((c) => c.getBoundingClientRect().height > 8)
+    const tags = new Map()
+    for (const c of kids) tags.set(c.tagName, (tags.get(c.tagName) || 0) + 1)
+    const most = Math.max(0, ...tags.values())
+    if (/^(ul|ol|table)$/.test(tag) || (kids.length >= 3 && kids.every((c) => Math.abs(c.getBoundingClientRect().height - kids[0].getBoundingClientRect().height) < 12)) ||
+      (most >= 3 && most >= kids.length * 0.6)) return N.list
+    if (el.matches('h1,h2,h3') || (el.querySelector('h1,h2') && r.height < vh * 0.3)) return N.title
+    return r.height > vh * 0.4 ? N.block : N.card
+  }
+
+  function pageBg() {
+    for (const el of [document.body, document.documentElement]) {
+      if (!el) continue
+      const c = getComputedStyle(el).backgroundColor
+      if (c && c !== 'transparent' && !/rgba\(.*,\s*0\)$/.test(c)) return c
+    }
+    return '#fff'
+  }
+
+  function build(lang) {
+    stopBuild()
+    if (!document.body || (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches)) return
+    const blocks = buildBlocks()
+    if (!blocks.length) return buildIn()
+    const N = BUILD_TX[lang] || BUILD_TX.zh
+    const { root } = fxRoot()
+    const vw = innerWidth
+    const vh = innerHeight
+    const nodes = []
+    const timers = []
+    const at = (ms, f) => timers.push(setTimeout(f, ms))
+    const add = (el) => { root.append(el); nodes.push(el); return el }
+    const mask = add(document.createElement('div'))
+    mask.className = 'bmask'
+    mask.style.setProperty('--bg', pageBg())
+    // 三只鼠标从下面进来
+    const curs = BUILD_C.map((c, i) => {
+      const d = add(document.createElement('div'))
+      d.className = 'bcur'
+      d.style.setProperty('--c', c)
+      d.innerHTML = ARROW
+      const tag = document.createElement('span')
+      tag.textContent = N.cur[i]
+      d.append(tag)
+      d.style.transform = `translate(${vw * (0.3 + i * 0.2)}px, ${vh + 10}px)`
+      return { d, free: 0 }
+    })
+    const move = (cur, x, y, ms) => {
+      x = Math.min(x, vw - 4)
+      cur.d.classList.toggle('flip', x > vw - 84 * K)
+      cur.d.classList.toggle('up', y > vh - 40 * K && y <= vh)
+      cur.d.style.transition = `transform ${ms}ms cubic-bezier(.3,.7,.2,1), opacity .25s ease`
+      cur.d.style.transform = `translate(${x}px, ${y}px)`
+    }
+    at(16, () => curs.forEach((c) => c.d.classList.add('on')))
+    const MOVE = 260
+    const DRAG = 330
+    let end = 0
+    const boxes = blocks.map((b, i) => {
+      const cur = curs[i % curs.length]
+      const t0 = Math.max(80 + i * 170, cur.free)
+      cur.free = t0 + MOVE + DRAG + 60
+      end = Math.max(end, cur.free)
+      const box = add(document.createElement('div'))
+      box.className = 'bbox'
+      box.style.setProperty('--c', BUILD_C[i % BUILD_C.length])
+      box.style.setProperty('--d', DRAG + 'ms')
+      box.style.left = b.x + 'px'
+      box.style.top = b.y + 'px'
+      box.style.opacity = '0'
+      const label = document.createElement('b')
+      label.textContent = blockName(b.el, b.r, N)
+      box.append(label)
+      at(t0, () => move(cur, b.x, b.y, MOVE))
+      at(t0 + MOVE, () => {
+        box.style.opacity = '1'
+        box.style.width = b.w + 'px'
+        box.style.height = b.h + 'px'
+        move(cur, b.x + b.w, b.y + b.h, DRAG)
+      })
+      at(t0 + MOVE + DRAG, () => box.classList.add('fill'))
+      return { box, b }
+    })
+    // 框完了：停一下，再由上往下显出整屏（元素按从上到下浮现、扫描光带一起走），框跟着光带淡掉，鼠标散开
+    const SHOW = end + 220
+    const DUR = 950
+    at(SHOW, () => {
+      mask.style.setProperty('--dur', DUR + 'ms')
+      mask.classList.add('go')
+      for (const { box, b } of boxes) setTimeout(() => { box.style.opacity = '0' }, Math.round((Math.max(0, b.y) / vh) * DUR * 0.7))
+      curs.forEach((c, i) => { move(c, vw * (0.25 + i * 0.25), vh + 30, 520); setTimeout(() => c.d.classList.remove('on'), 260) })
+      buildIn()
+    })
+    const done = () => stopBuild()
+    at(SHOW + DUR + 380, done)
+    // 用户动了（点、滚、按键）：直接跳过，别挡着
+    const skip = () => { if (building && !building.shown) done() }
+    addEventListener('pointerdown', skip, true)
+    addEventListener('wheel', skip, { capture: true, passive: true })
+    addEventListener('keydown', skip, true)
+    building = { nodes, timers, skip, shown: false }
+    at(SHOW, () => { if (building) building.shown = true })
+  }
+
+  function stopBuild() {
+    if (!building) return
+    for (const t of building.timers) clearTimeout(t)
+    for (const n of building.nodes) n.remove()
+    removeEventListener('pointerdown', building.skip, true)
+    removeEventListener('wheel', building.skip, { capture: true })
+    removeEventListener('keydown', building.skip, true)
+    building = null
+  }
+
   // 选中后留一个虚线框，直到下次选择 / 页面刷新
   let pinned = null
 
@@ -1343,7 +1569,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     shown = true
     const c = pending
     pending = null
-    if (opts && opts.build) buildIn()
+    if (opts && opts.build) build(opts.lang === 'en' ? 'en' : 'zh')
     else if (c && c.els.length) setTimeout(() => play(c.els), 60)
     watchHmr()
   }