dsh-design-studio 0.4.1 → 0.5.0

package/lib/core.js

@@ -16,7 +16,9 @@ const LOCAL_URL = /^(?:https?:\/\/)?(localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\]):
 // 命令输出里的本机地址（开发服务器启动时会打印）
 const URL_IN_TEXT = /\bhttps?:\/\/(?:localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\]):(\d{2,5})(\/[^\s"'`<>)\]]*)?/gi
 const LIVE_MS = 120000 // 事件时间离现在超过这么久就当是重放历史
+const CHANGE_LOG = 20 // 记最近几批文件改动（远程看按它补齐两次轮询之间的改动）
 const DESIGN_SKILL = 'ui-design'
+const ASK_TOOL = 'ask_user_question' // DSH 的提问卡：模型问了、在等用户回答
 const DESIGN_META = /<meta[^>]+name=["']?dsh-design\b/i
 // 只查看、不启动服务的命令（curl 一下别的项目的端口，不该把那个端口当成在做的设计）
 const PROBE_CMD = /\b(curl|wget|httpie|xh|lsof|netstat|ss|nc|telnet|kill|pkill|open|ps)\b/i
@@ -64,7 +66,8 @@ export function listScreens(root) {
   try { dirents = fs.readdirSync(root, { withFileTypes: true }) } catch { return [] }
   const out = []
   for (const d of dirents) {
-    if (!d.isFile() || !HTML_EXT.test(d.name) || d.name.startsWith('.')) continue
+    // . 开头是隐藏文件，_ 开头当草稿 / 模型的临时探针（_probe.html、_layout.html），都不算一屏
+    if (!d.isFile() || !HTML_EXT.test(d.name) || d.name.startsWith('.') || d.name.startsWith('_')) continue
     let born = 0
     try {
       const st = fs.statSync(path.join(root, d.name))
@@ -267,6 +270,176 @@ export function replaceText(html, before, after, nth = 0) {
   return { ok: false, reason: 'not-found' }
 }
 
+// ── 预览里调样式：在 HTML 源码里找到那个元素的开头标签，把改的样式并进它的 style 属性 ─────────
+
+/** 开头标签（属性值里可以有 >）；注释整块跳过，脚本 / 样式 / 模板这类连内容一起跳过（模板里的元素不在页面上；<SCRIPT> 大写也算） */
+const TAG_SCAN = /<!--[\s\S]*?-->|<(script|style|textarea|title|template)\b(?:[^>"']|"[^"]*"|'[^']*')*>[\s\S]*?<\/\1\s*>|<([a-zA-Z][\w-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/gi
+const ATTR = /([^\s"'>/=]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g
+/** 能调的几项；值只许数字、单位、颜色、var(--x) 这类，引号、分号、尖括号一律不收 */
+export const STYLE_PROPS = ['font-size', 'font-weight', 'color', 'background', 'border-radius', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'gap']
+const STYLE_VALUE = /^[\w\s#%.,()+-]{1,80}$/
+
+function attrsOf(s) {
+  const out = {}
+  ATTR.lastIndex = 0
+  for (let m = ATTR.exec(s); m; m = ATTR.exec(s)) {
+    const k = m[1].toLowerCase()
+    if (!(k in out)) out[k] = { v: m[2] ?? m[3] ?? m[4] ?? '', at: m.index, len: m[0].length }
+  }
+  return out
+}
+
+/**
+ * 页面上那个元素在源码里是哪个开头标签。loc：{ tag, n（页面上第几个这种标签）, total（页面上一共几个）, id, cls（页面上的类） }。
+ * 页面上和源码里这种标签一样多：按第几个找，再核对 id 和类（页面脚本可能加了类，源码里的类都在就行）；
+ * 对不上（页面脚本加过元素）：只认 id 和类完全一样、而且只有一个的。都不行就算找不到，宁可交给模型也别改错地方。
+ */
+export function findTag(html, { tag, n = 0, total = -1, id = '', cls = [] } = {}) {
+  const name = String(tag || '').toLowerCase()
+  if (!/^[a-z][\w-]*$/.test(name)) return null
+  const list = []
+  TAG_SCAN.lastIndex = 0
+  for (let m = TAG_SCAN.exec(html); m; m = TAG_SCAN.exec(html)) {
+    if (m[1] || !m[2] || m[2].toLowerCase() !== name) continue
+    list.push({ start: m.index, end: m.index + m[0].length, name: m[2], attrs: m[3] || '' })
+  }
+  const want = new Set((Array.isArray(cls) ? cls : []).map(String))
+  const classesOf = (x) => { const a = attrsOf(x.attrs); return { id: a.id ? a.id.v : '', cls: a.class ? a.class.v.split(/\s+/).filter(Boolean) : [] } }
+  const same = (x) => { const a = classesOf(x); return a.id === String(id || '') && a.cls.length === want.size && a.cls.every((k) => want.has(k)) }
+  const x = list[n]
+  if (x && total === list.length) {
+    const a = classesOf(x)
+    if (a.id === String(id || '') && a.cls.every((k) => want.has(k))) return x
+  }
+  const hits = list.filter(same)
+  return hits.length === 1 ? hits[0] : null
+}
+
+/** style 属性按 ; 拆成一条条（括号、引号里的不拆，比如 url(data:…;base64,…)） */
+function splitDecls(s) {
+  const out = []
+  let depth = 0
+  let q = ''
+  let cur = ''
+  for (const ch of s) {
+    if (q) { if (ch === q) q = ''; cur += ch; continue }
+    if (ch === '"' || ch === "'") q = ch
+    else if (ch === '(') depth++
+    else if (ch === ')') depth = Math.max(0, depth - 1)
+    else if (ch === ';' && !depth) { out.push(cur); cur = ''; continue }
+    cur += ch
+  }
+  out.push(cur)
+  return out.map((d) => d.trim()).filter(Boolean)
+}
+
+/**
+ * 把 css（属性 → 值，值为空 = 去掉这一条）并进原来的 style（已解开实体的文字）：改过的原地换（同名的几条只留一条），新的放最后；
+ * 写 background 时去掉 background-color / -image（不然前后打架）。自定义属性（--x）区分大小写，原样留着。
+ */
+export function mergeStyle(style, css) {
+  const decls = splitDecls(String(style || '')).map((d) => {
+    const i = d.indexOf(':')
+    if (i <= 0) return null
+    const p = d.slice(0, i).trim()
+    return [p.startsWith('--') ? p : p.toLowerCase(), d.slice(i + 1).trim()]
+  }).filter(Boolean)
+  for (const [k, v] of Object.entries(css || {})) {
+    const prop = k.toLowerCase()
+    if (prop === 'background') for (let i = decls.length - 1; i >= 0; i--) if (/^background-(color|image)$/.test(decls[i][0])) decls.splice(i, 1)
+    const i = decls.findIndex(([p]) => p === prop)
+    for (let j = decls.length - 1; j > i && i >= 0; j--) if (decls[j][0] === prop) decls.splice(j, 1)
+    if (!v) { if (i >= 0) decls.splice(i, 1); continue }
+    if (i >= 0) decls[i][1] = v
+    else decls.push([prop, v])
+  }
+  return decls.map(([p, v]) => `${p}: ${v}`).join('; ')
+}
+
+/** 属性值里的实体解回来（style 里用得到的：引号、&、尖括号） */
+const unAttr = (s) => String(s)
+  .replace(/&(quot|#0*34|#x0*22);/gi, '"').replace(/&(apos|#0*39|#x0*27);/gi, "'")
+  .replace(/&(lt|#0*60|#x0*3c);/gi, '<').replace(/&(gt|#0*62|#x0*3e);/gi, '>').replace(/&(amp|#0*38|#x0*26);/gi, '&')
+
+/** 只留能调的那几项、值合规的；一项都不剩返回 null */
+export function cleanCss(css) {
+  const out = {}
+  for (const [k, v] of Object.entries(css && typeof css === 'object' ? css : {})) {
+    const prop = String(k).toLowerCase()
+    const val = String(v ?? '').trim()
+    if (!STYLE_PROPS.includes(prop)) continue
+    if (val && (!STYLE_VALUE.test(val) || /url\s*\(|expression/i.test(val))) continue
+    out[prop] = val
+  }
+  return Object.keys(out).length ? out : null
+}
+
+/** 选择器写法统一：去引号、:: → :、空白压成一个、组合符和括号两边不留空格 */
+const normSel = (s) => String(s || '').replace(/["']/g, '').replace(/::/g, ':').replace(/\s+/g, ' ').replace(/ ?([>+~,()]) ?/g, '$1').trim()
+
+/**
+ * 一条样式规则在源码（.css，或 HTML 里的 <style>）的第几行。
+ * sel 是浏览器给的（规范化过：组合符两边加空格、属性值加双引号），源码里可能写得紧凑、换了引号、多了换行：都认（大小写照原样比）。
+ * 不用拼正则：逐个字符找规则开头的「{」，把它前面那段选择器统一写法后比较，一遍扫完。
+ * n：同样选择器的第几条（源码顺序，@media 里的也算）。找不到给 0
+ */
+export function findRule(text, sel, n = 0) {
+  const want = normSel(sel)
+  if (!want || want.length > 400) return 0
+  const src = String(text || '').replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, ' ')) // 注释换成空格（位置、行号不变）
+  // HTML 只看 <style> 里面（脚本、正文里像 CSS 的字不算）
+  const regions = []
+  if (/<style\b/i.test(src)) {
+    const re = /<style\b[^>]*>/gi
+    let m
+    while ((m = re.exec(src))) {
+      const from = m.index + m[0].length
+      const end = src.slice(from).search(/<\/style\s*>/i)
+      regions.push([from, end < 0 ? src.length : from + end])
+      re.lastIndex = end < 0 ? src.length : from + end
+    }
+  } else regions.push([0, src.length])
+  let k = 0
+  for (const [from, to] of regions) {
+    let start = from
+    for (let i = from; i < to; i++) {
+      const ch = src[i]
+      if (ch === '"' || ch === "'") { // 字符串里的 { } ; 不算
+        let j = i + 1
+        while (j < to && src[j] !== ch && src[j] !== '\n') j += src[j] === '\\' ? 2 : 1
+        i = j
+      } else if (ch === '{') {
+        const pre = src.slice(start, i)
+        if (normSel(pre) === want && k++ === n) {
+          const at = start + (pre.length - pre.trimStart().length)
+          return src.slice(0, at).split('\n').length
+        }
+        start = i + 1
+      } else if (ch === '}' || ch === ';') start = i + 1
+    }
+  }
+  return 0
+}
+
+/**
+ * 把 css 写进页面上那个元素（loc，见 findTag）在源码里的 style 属性。
+ * @returns {{ ok: true, html } | { ok: false, reason: 'empty' | 'not-found' }}
+ */
+export function setStyle(html, loc, css) {
+  const clean = cleanCss(css)
+  if (!clean) return { ok: false, reason: 'empty' }
+  const x = findTag(html, loc)
+  if (!x) return { ok: false, reason: 'not-found' }
+  const a = attrsOf(x.attrs).style
+  const next = mergeStyle(a ? unAttr(a.v) : '', clean).replace(/&/g, '&amp;').replace(/"/g, '&quot;')
+  let attrs
+  if (a) attrs = x.attrs.slice(0, a.at) + (next ? `style="${next}"` : '') + x.attrs.slice(a.at + a.len)
+  // 自闭合的 / 前面得是空白或引号（src=a.png/ 里的 / 是属性值的一部分）
+  else if (next) attrs = /(^|["'\s])\/\s*$/.test(x.attrs) ? x.attrs.replace(/\s*\/\s*$/, ` style="${next}" /`) : x.attrs + ` style="${next}"`
+  else attrs = x.attrs
+  return { ok: true, html: html.slice(0, x.start) + `<${x.name}${attrs}>` + html.slice(x.end) }
+}
+
 export function serverUrlIn(text, skipPorts = new Set()) {
   let found = null
   URL_IN_TEXT.lastIndex = 0
@@ -291,6 +464,8 @@ export function serverUrlIn(text, skipPorts = new Set()) {
  *   openRev  每次要右侧栏自动弹出来就 +1（客户端看到变大就打开标签页）
  *   rev      页面内容变了就 +1（文件改动）
  *   turn     这个会话正在跑一轮（预览上显示「正在生成」）
+ *   turns    这次运行里干完了几轮（右侧栏看它变了就自动体检）
+ *   asking   模型用提问卡问了用户、在等回答（右侧栏不转圈，提示去对话里回答）
  *
  * @param opts.open (target) => Promise<{ origin }>  开预览服务器
  * @param opts.skipPorts () => Set<number>            不当开发服务器的端口（DSH 自己、预览服务器）
@@ -401,15 +576,21 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     return cwds.get(id) || os.homedir()
   }
 
-  /** 新的一屏排到最后；「再出两版」的 login-b.html / login-c.html 紧跟在 login.html 后面，方便挑 */
+  /**
+   * 新的一屏排到最后；同一屏的几个版本挨在一起、按字母排，方便挑：
+   * 「再出两版」的 login-b.html / login-c.html 紧跟在 login.html 后面；开局的三个方向 home-a / home-b / home-c 哪个先写完都排成 a、b、c
+   */
   function placeScreen(list, k) {
-    const VAR = /^(.+)-[b-z]\.html?$/
-    const stem = (x) => x.toLowerCase().replace(/\.html?$/, '')
-    const m = VAR.exec(k.toLowerCase())
-    if (m && list.some((x) => stem(x) === m[1])) {
-      let at = -1
-      list.forEach((x, i) => { if (stem(x) === m[1] || (VAR.exec(x.toLowerCase()) || [])[1] === m[1]) at = i })
-      list.splice(at + 1, 0, k)
+    const VAR = /^(.+)-([a-z])\.html?$/
+    const part = (x) => {
+      const v = VAR.exec(x.toLowerCase())
+      return v ? { stem: v[1], letter: v[2] } : { stem: x.toLowerCase().replace(/\.html?$/, ''), letter: '' }
+    }
+    const me = part(k)
+    const group = me.letter ? list.map((x, i) => ({ i, ...part(x) })).filter((x) => x.stem === me.stem) : []
+    if (group.length) {
+      const after = group.find((x) => x.letter > me.letter)
+      list.splice(after ? after.i : group[group.length - 1].i + 1, 0, k)
       return
     }
     list.push(k)
@@ -504,12 +685,18 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     persist(id, st)
   }
 
-  /** 预览服务器报告某个目录里有文件改了：用到这个目录的会话都 rev+1 */
-  function changed(root) {
+  /** 预览服务器报告某个目录里有文件改了：用到这个目录的会话都 rev+1（files：改了哪些，远程看的右侧栏按它决定哪几屏重新打包） */
+  function changed(root, files) {
     for (const [id, st] of states) {
       if (st.target && st.target.kind === 'file' && st.target.root === root) {
         st.rev++
         st.changedAt = now()
+        // 文件太多（预览服务器那边已经截断了）就不列：空的 = 不知道改了啥，右侧栏整屏刷新
+        const list = Array.isArray(files) ? files.filter((f) => typeof f === 'string') : []
+        st.changedFiles = list.length > 50 ? [] : list
+        // 最近几批改动（递增序号）：远程看的右侧栏两次轮询之间可能来了好几批，按序号取并集，别只看最后一批
+        st.changeN = (st.changeN || 0) + 1
+        st.changes = [...(st.changes || []), { n: st.changeN, files: st.changedFiles }].slice(-CHANGE_LOG)
         const before = st.screens.join('\n')
         refreshScreens(st)
         if (st.screens.join('\n') !== before) persist(id, st)
@@ -543,7 +730,11 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
       case 'turn/end':
         st.turn = false
         st.writing = ''
-        if (live) keepVersion(st, st.ask)
+        st.asking = false
+        if (live) {
+          keepVersion(st, st.ask)
+          st.turns = (st.turns || 0) + 1 // 右侧栏靠它知道「又干完一轮」（很快的一轮轮询看不到 turn 变 true）
+        }
         st.ask = '' // 用过就清：下一轮不是用户发起的（没有新的一句话）就不借这一句当名字
         break
       case 'tool/call': {
@@ -551,6 +742,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
         if (d.name === 'skill' && argsOf(d.arguments).name === DESIGN_SKILL) st.design = true
         if (d.name === 'preview_page') st.design = true
         if (!live) break
+        if (d.name === ASK_TOOL) st.asking = true
         if (d.callId) {
           st.calls.set(d.callId, { name: d.name, args: argsOf(d.arguments) })
           if (st.calls.size > 64) st.calls.delete(st.calls.keys().next().value)
@@ -575,6 +767,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
         const callId = (d.message && (d.message.toolCallId || (d.message.source && d.message.source.callId))) || d.callId || ''
         const call = callId ? st.calls.get(callId) : null
         if (callId) st.calls.delete(callId)
+        if (!call || call.name === ASK_TOOL) st.asking = false
         if (pending && fs.existsSync(pending) && (!st.target || st.source === 'auto') && !(st.target && st.target.file === pending)) {
           // 只有在做设计（加载了设计技能、或页面写了设计类型标记）才自动打开；别的任务写的网页只记下来，不弹
           // 用户关了「自动打开预览」：也只记下来，右侧栏给个按钮
@@ -623,16 +816,32 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     return v
   }
 
+  /** 预览里直接改字：在这一屏（key = 文件名）的 HTML 里把第 nth 处 before 换成 after，改前改后各存一版 */
+  function editText(id, { key, before, after, nth = 0 } = {}) {
+    const short = String(after).replace(/\s+/g, ' ').trim()
+    return rewrite(id, key, (html) => replaceText(html, before, after, Math.max(0, Math.floor(Number(nth) || 0))),
+      `改字「${short.length > 16 ? short.slice(0, 16) + '…' : short}」`)
+  }
+
+  /** 预览里调样式：把 css 写进这一屏（key）里那个元素（loc，见 findTag）的 style 属性，改前改后各存一版 */
+  function editStyle(id, { key, loc, css, name } = {}) {
+    const short = String(name || (loc && loc.tag) || '').trim()
+    return rewrite(id, key, (html) => setStyle(html, loc || {}, css), `调样式「${short.length > 24 ? short.slice(0, 24) + '…' : short}」`)
+  }
+
   /**
-   * 预览里直接改字：在这一屏（key = 文件名）的 HTML 里把第 nth 处 before 换成 after，改前改后各存一版。
+   * 改这一屏（key = 文件名）的 HTML：fn(原文) → { ok, html }。
    * 开发服务器的页面源码在项目里、不一定是这份 HTML，不在这里改（右侧栏改成让模型去改）。
-   * 模型正在干活时不改：它可能正整份重写这个文件，改了也会被盖掉（右侧栏改成让模型去改）。
+   * 模型正在干活时不改：它可能正整份重写这个文件，改了也会被盖掉。
    */
-  function editText(id, { key, before, after, nth = 0 } = {}) {
+  function rewrite(id, key, fn, label) {
     const st = states.get(id)
     const t = st && st.target
     if (!t || t.kind !== 'file') return { ok: false, reason: 'not-file' }
-    if (st.turn) return { ok: false, reason: 'busy' }
+    // 同一个目录别的会话的模型正在干活也不改（它可能正整份重写这个文件）；经软链接打开的同一个目录也算
+    const realOf = (p) => { try { return fs.realpathSync(p) } catch { return p } }
+    const mine = realOf(t.root)
+    for (const o of states.values()) if (o.turn && o.target && o.target.kind === 'file' && (o.target.root === t.root || realOf(o.target.root) === mine)) return { ok: false, reason: 'busy' }
     const name = String(key || path.basename(t.file))
     const file = path.join(t.root, name)
     if (path.dirname(file) !== t.root || !HTML_EXT.test(name) || !fs.existsSync(file)) return { ok: false, reason: 'no-screen' }
@@ -640,12 +849,11 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     let real = ''
     try { real = fs.realpathSync(file) } catch { real = '' }
     if (!real.startsWith(fs.realpathSync(t.root) + path.sep)) return { ok: false, reason: 'no-screen' }
-    const r = replaceText(fs.readFileSync(file, 'utf8'), before, after, Math.max(0, Math.floor(Number(nth) || 0)))
+    const r = fn(fs.readFileSync(file, 'utf8'))
     if (!r.ok) return r
     keepVersion(st, '')
     fs.writeFileSync(file, r.html)
-    const short = String(after).replace(/\s+/g, ' ').trim()
-    keepVersion(st, `改字「${short.length > 16 ? short.slice(0, 16) + '…' : short}」`)
+    keepVersion(st, label)
     return { ok: true, file: name }
   }
 
@@ -669,7 +877,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     const st = states.get(id)
     if (!(st && st.target)) restore(id)
     else if (st.origin && !alive(st.origin)) revive(id, st)
-    if (!st || !st.target) return { target: null, rev: st ? st.rev : 0, openRev: st ? st.openRev : 0, turn: st ? st.turn : false, writing: '', hint: st && st.hint && fs.existsSync(st.hint) ? st.hint : '', loading: restoring.has(id) }
+    if (!st || !st.target) return { target: null, rev: st ? st.rev : 0, openRev: st ? st.openRev : 0, turn: st ? st.turn : false, turns: st ? st.turns || 0 : 0, asking: !!(st && st.asking), writing: '', hint: st && st.hint && fs.existsSync(st.hint) ? st.hint : '', loading: restoring.has(id) }
     const { target, url, label, source, rev, openRev, turn, writing, changedAt, kind, size, view, origin } = st
     const file = target.kind === 'file'
     return {
@@ -680,8 +888,12 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
       rev,
       openRev,
       turn,
+      turns: st.turns || 0,
+      asking: !!st.asking,
       writing,
       changedAt,
+      changedFiles: st.changedFiles || [],
+      changes: st.changes || [],
       kind,
       size,
       view,
@@ -696,5 +908,5 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     }
   }
 
-  return { observe, setTarget, setView, clear, changed, snapshot, cwdOf, stateOf, versions, restoreVersion, editText, keepVersion: (id, label) => keepVersion(stateOf(id), label) }
+  return { observe, setTarget, setView, clear, changed, snapshot, cwdOf, stateOf, versions, restoreVersion, editText, editStyle, keepVersion: (id, label) => keepVersion(stateOf(id), label) }
 }