dsh-design-studio 0.8.0 → 0.10.0

package/README.en.md

@@ -15,7 +15,7 @@
 
 </div>
 
-**Design Studio** is a DeepSeek Harness (DSH) plugin. Say what you want to make, and the model's web pages, app screens, mini programs, posters and slides appear one by one on a canvas in the right sidebar, inside phone or browser frames. Click the direction you like, or click whatever looks off and add a sentence, and the model edits it.
+**Design Studio** is a DeepSeek Harness (DSH) plugin. Say what you want to make, and the model's web pages, app screens, mini programs, desktop apps, posters and slides appear one by one on a canvas in the right sidebar, inside phone, browser or app-window frames. Click the direction you like, or click whatever looks off and add a sentence, and the model edits it.
 
 ![Demo: one sentence → three directions → pick one for the full set → click to edit](assets/demo.gif)
 
@@ -38,7 +38,8 @@ If DSH can't reach the npm registry, it falls back to a mirror in China. To upda
 ## What it does
 
 - **Pick from three directions:** three different first screens side by side, then the full set in the one you pick. Any single screen can also get two alternative takes.
-- **Click to edit:** click an element or drag over an area, and it lands in the input as a ready-made description; just add how to change it. Changed spots flash in the preview.
+- **Click to edit:** click an element or drag over an area, and a small chip lands in the input (hover it for details); just add how to change it. Markup, style changes, style cards and check lists land as chips too, not walls of text. The model still gets the full location and styles. Changed spots flash in the preview. You can also draw circles, arrows and notes right on the page and hand the marked-up screenshot to the model, or copy it to paste elsewhere.
+- **Open what you have:** click "Browse…" on the empty page to pick an HTML file, or drop an HTML file or folder onto the sidebar (desktop app); you can also type a path or a dev-server port.
 - **Design check:** one click finds overflowing text, low contrast, small tap targets and tiny text, marked right on the page. In Design mode the model also checks its own work and fixes what it finds.
 - **Versions and compare:** every turn is saved; drag a slider to compare, and go back to any version.
 - **Export and phone preview:** showcase images, PDF and PowerPoint (links between screens still work); scan a QR code to see it on your phone at real size.

package/README.md

@@ -15,7 +15,7 @@
 
 </div>
 
-**设计工作台**是 DeepSeek Harness（DSH）的插件：说一句要做什么，模型做的网页、App 界面、小程序、海报、幻灯片在右边画布上一屏屏长出来，套着手机或浏览器外框。看中哪个方向点一下，哪里不对点一下说一句，模型就照着改。
+**设计工作台**是 DeepSeek Harness（DSH）的插件：说一句要做什么，模型做的网页、App 界面、小程序、桌面软件、海报、幻灯片在右边画布上一屏屏长出来，套着手机、浏览器或软件窗口外框。看中哪个方向点一下，哪里不对点一下说一句，模型就照着改。
 
 ![演示：一句话 → 三个方向 → 挑一个做全套 → 点一下改](assets/demo.gif)
 
@@ -38,7 +38,8 @@
 ## 能做什么
 
 - **三个方向挑着做**：先出三个风格不同的首屏并排比，挑中再做全套；单独一屏也能「再出两版」。
-- **点一下就改**：点元素或框一块区域，它自动整理成一段话放进输入框，你只要补一句怎么改。改过的地方在预览里闪一下。
+- **点一下就改**：点元素或框一块区域，输入框里出现一个小标签（悬停看详情），你只要补一句怎么改；标注、调样式、风格、体检清单这些放进输入框的也都是小标签，不再是一大段字；发出去模型拿到完整的位置和样式。改过的地方在预览里闪一下。也能直接在页面上画圈、画箭头、写字，拼成一张图交给模型，或者复制下来贴到别处。
+- **打开已有的页面**：空白页点「浏览…」选一个 HTML，或把 HTML 文件 / 文件夹拖进右侧栏就能预览（桌面版）；也能输路径或开发服务器端口。
 - **设计体检**：一键查文字溢出、对比度不够、按钮太小、字太小，问题直接标在页面上；模型做完也会自己查一遍再改。
 - **版本和对比**：每轮自动存一版，左右拖动对比，随时回到任意一版。
 - **导出和手机上看**：导出展示图、PDF、PPT（屏和屏之间的跳转照样能点）；扫码在手机上按真机尺寸看。

package/cordis.patch.yml

@@ -12,8 +12,9 @@
       name: dsh-design-studio/tool
     - id: dsh-design-studio-skill
       name: dsh-design-studio/skill
-    # 设计模式：照抄 DSH 0.2.1 标准模式（web-app 的 presets/standard.patch.yml）的全套插件，
-    # 人设换成做设计的，再挂上预览工具和设计技能。DSH 标准模式有变动时跟着改
+    # 设计模式：照抄 DSH 标准模式（web-app 的 presets/standard.patch.yml）的全套插件，
+    # 人设换成做设计的，再挂上预览工具和设计技能。DSH 标准模式有变动时跟着改；
+    # 只写 0.2.1 和 0.2.2 都有的插件——清单里有一个装不上，整个设计模式就不出来
     - id: preset-design
       name: dsh-design-studio/preset
       config:
@@ -104,14 +105,15 @@
             config:
               - id: tool-subagent-control
                 name: '@deepseek-ai/dsh-tool-subagent-control'
-              - id: tool-subagent-list-agents
-                name: '@deepseek-ai/dsh-tool-subagent-control/list-agents'
               - id: tool-subagent
                 name: '@deepseek-ai/dsh-tool-subagent'
                 config:
                   provider: spawn
                   toolName: subagent
+                  # 0.2.1 叫 modelSelectionSettings，0.2.2 拆成下面两个；多写的键旧版新版都不管
                   modelSelectionSettings: true
+                  modelSelection: true
+                  modelDiscovery: true
               - id: tool-subagent-fork
                 name: '@deepseek-ai/dsh-tool-subagent'
                 config:

package/lib/browser.js

@@ -15,6 +15,7 @@ const IDLE_MS = 90000 // 闲置多久关掉
 const CALL_MS = 30000 // 一条指令最多等多久
 const LOAD_MS = 15000 // 页面载入最多等多久（到点照样往下走：有个图一直载不完也能量）
 const MAX_PAGES = 3 // 同时开几个页面
+const MAX_PSEUDO = 1500 // 伪元素最多问几个宿主的框（多了只问靠后的：底栏一般写在最后）
 
 /** 这台电脑上的 Chromium 系浏览器；DSH_DESIGN_BROWSER / CHROME_BIN 可以指定 */
 export function findBrowser({ env = process.env, platform = process.platform, exists = fs.existsSync, home = os.homedir() } = {}) {
@@ -204,6 +205,7 @@ export function createBrowser({ bin = findBrowser(), log = () => {}, idleMs = ID
   /**
    * 开一个 w×h 的页面载入 url，fn(page) 里量 / 截图，完了关掉。
    *   page.eval(表达式)：在页面里算（Promise 会等），返回 JSON 值
+   *   page.pseudo()：把伪元素的真实框挂到宿主元素上，体检时用（页面里量不到伪元素）
    *   page.shot({ clip, format })：截视口；clip（{ x, y, width, height }，CSS 像素，按整页坐标 = 视口位置 + 滚动距离）只截那一块 → JPEG Buffer（format: 'png' 无损）
    *   allow(网址)：给了就只让它说行的页面载入（主页面、iframe，连跳转、脚本改地址都算），别的拦下，记在 page.blocked
    */
@@ -249,6 +251,38 @@ export function createBrowser({ bin = findBrowser(), log = () => {}, idleMs = ID
           const r = await c('Page.captureScreenshot', { format, ...(format === 'jpeg' ? { quality } : {}), ...(clip ? { clip: { ...clip, scale: 1 } } : {}) })
           return Buffer.from(r.data, 'base64')
         },
+        // 伪元素（::before / ::after）的真实框：页面里的脚本量不到，问浏览器要，挂到宿主元素上（__dshPseudo），
+        // 连同当时的滚动位置（__dshPseudoAt）；体检在同一滚动位置时直接用，不再按样式推。返回挂了几个宿主
+        pseudo: async () => {
+          const { root } = await c('DOM.getDocument', { depth: -1 })
+          const hosts = []
+          const walk = (n) => {
+            const ps = (n.pseudoElements || []).filter((p) => p.pseudoType === 'before' || p.pseudoType === 'after')
+            if (ps.length) hosts.push({ id: n.nodeId, ps })
+            for (const k of n.children || []) walk(k)
+          }
+          walk(root)
+          const at = await page.eval('scrollX + "," + scrollY')
+          const tagged = await Promise.all(hosts.slice(-MAX_PSEUDO).map(async (h) => {
+            const boxes = {}
+            for (const p of h.ps) {
+              try {
+                const q = (await c('DOM.getBoxModel', { nodeId: p.nodeId })).model.border
+                const xs = [q[0], q[2], q[4], q[6]], ys = [q[1], q[3], q[5], q[7]]
+                boxes['::' + p.pseudoType] = { l: Math.min(...xs), t: Math.min(...ys), r: Math.max(...xs), b: Math.max(...ys) }
+              } catch { /* 没有框（没排出来） */ }
+            }
+            try {
+              const { object } = await c('DOM.resolveNode', { nodeId: h.id })
+              await c('Runtime.callFunctionOn', { objectId: object.objectId, functionDeclaration: 'function (b) { this.__dshPseudo = b }', arguments: [{ value: { ...boxes, at } }] })
+              c('Runtime.releaseObject', { objectId: object.objectId }).catch(() => {})
+              return 1
+            } catch { return 0 }
+          }))
+          // __dshPseudoAll：全问到了，没挂框的宿主就是伪元素没排出来；没问全时没挂的按样式推
+          await page.eval(`window.__dshPseudoAt = ${JSON.stringify(at)}; window.__dshPseudoAll = ${hosts.length <= MAX_PSEUDO}`)
+          return tagged.reduce((m, x) => m + x, 0)
+        },
         blocked,
       }
       return await fn(page)