dsh-design-studio 0.10.0 → 0.11.0

package/lib/index.js

@@ -40,13 +40,19 @@
  * 页面本身由 serve.js 开的独立端口提供（见那边的说明）。
  */
 
+import crypto from 'node:crypto'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import os from 'node:os'
 import { execFile } from 'node:child_process'
-import { createHub, webOrigins, trustedOrigins, resolveInRoot, ERR_CATCHER } from './serve.js'
-import { bundle, inlinePicker, MAX_TOTAL as BUNDLE_MAX } from './bundle.js'
+import { createHub, webOrigins, trustedOrigins, resolveInRoot, ERR_CATCHER, defang } from './serve.js'
+import { bundle, inlinePicker, strictMeta, MAX_TOTAL as BUNDLE_MAX } from './bundle.js'
+import { createLibrary } from './works.js'
+import { createInspiration } from './inspire.js'
+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 { createHistory } from './history.js'
 import { createPhone } from './phone.js'
@@ -82,7 +88,7 @@ const SKILL_RANK = 600 // 和 DSH 自带的技能同一档；用户 / 项目里
  * 几行之间靠这个互通（同一个包里的模块 Node 只加载一次）：工作台起来后放 tracker、无头浏览器（browser）；
  * 「自动打开预览」那行开着时 autoOpen > 0
  */
-export const studio = { tracker: null, autoOpen: 0, check: null, browser: null, log: () => {} }
+export const studio = { tracker: null, autoOpen: 0, offline: 0, check: null, browser: null, market: null, log: () => {} }
 
 /** 设计技能：模型做界面设计时加载（DSH 的 skill 工具），也能让用户手动调 */
 export const designSkill = {
@@ -439,10 +445,10 @@ export const handoffTool = {
   name: 'handoff_design',
   description:
     '把右侧「设计工作台」里的设计（本地 HTML 那几屏）整理成交接包，准备做成真项目的代码：写好 <设计目录>/handoff/HANDOFF.md（每屏的文件、建议路由、跳转、设计变量、几屏共用该抽成组件的部分、交互和状态、调节滑块、素材、做法和验收），和每屏从上到下的截图。' +
-    '用户说「转成代码」「做成真的项目」「用 React / Vue 做出来」时先调它，读 HANDOFF.md 照着做；每做完一屏用 compare_design 和设计稿比一遍，差异降到 3% 以下再做下一屏。' +
-    'framework：same 跟目标目录现有项目一样（认得出框架时默认）、react、vue、next、html；dest：代码放哪个目录（不填：会话目录是项目就放进去，不是就新建 <设计名>-app）。要先用 preview_page 打开过设计。',
+    '用户说「转成代码」「做成真的项目」「用 React / Vue / uni-app 做出来」「做成小程序」时先调它，读 HANDOFF.md 照着做；每做完一屏用 compare_design 和设计稿比一遍，差异降到 3% 以下再做下一屏（原生小程序在浏览器里跑不起来，照 HANDOFF.md 说的请用户在微信开发者工具里看）。' +
+    'framework：same 跟目标目录现有项目一样（认得出框架时默认，uni-app（含 HBuilderX 建的、没有 package.json 的）、Taro、微信原生小程序也认得出）、react、vue、next、html、uniapp、weapp；dest：代码放哪个目录（不填：会话目录是项目就放进去，不是就新建 <设计名>-app）。要先用 preview_page 打开过设计。',
   parameters: specToJsonSchema({
-    framework: { type: 'string', enum: ['same', ...Object.keys(FRAMEWORKS)], description: 'same 跟现有项目一样；react（React + Vite）、vue（Vue 3 + Vite）、next（Next.js）、html（纯 HTML / CSS）。不填：目标目录（或它所在的项目）认得出框架就 same，没有 package.json 的纯 HTML 站点 html，别的 react' },
+    framework: { type: 'string', enum: ['same', ...Object.keys(FRAMEWORKS)], description: 'same 跟现有项目一样；react（React + Vite）、vue（Vue 3 + Vite）、next（Next.js）、html（纯 HTML / CSS）、uniapp（uni-app，出微信小程序和网页版）、weapp（微信原生小程序 WXML / WXSS）。不填：目标目录（或它所在的项目）认得出框架就 same，没有 package.json 的纯 HTML 站点 html，小程序的设计 uniapp，别的 react' },
     dest: { type: 'string', description: '代码放哪：现有项目的目录（或它里面的子目录），或要新建的项目目录（绝对路径或相对会话目录）。不填：会话目录有 package.json 就放进去，没有就新建 <设计名>-app（设计目录在会话目录下就建在会话目录里，不然建在设计目录旁边）' },
     screens: { type: 'array', items: { type: 'string' }, description: '只转哪几屏（文件名）；不填全部' },
   }),
@@ -470,15 +476,17 @@ export const handoffTool = {
     const dest = typeof a.dest === 'string' && a.dest.trim() ? resolvePath(a.dest, cwd) : defaultDest(t.root, cwd, detectProject(cwd))
     if (within(dest, t.root)) return { text: `代码别放进设计目录（${t.root}）里：设计稿留着做对比。换一个目录。` }
     const project = projectFor(dest)
-    const framework = typeof a.framework === 'string' && (a.framework === 'same' || FRAMEWORKS[a.framework]) ? a.framework : defaultFramework(project)
-    if (framework === 'same' && !(project.pkg && project.framework)) return { text: `${dest} 里没有认得出的前端项目（package.json 里没有 React / Vue / Next …）：framework 选 react、vue、next 或 html。` }
+    const framework = typeof a.framework === 'string' && (a.framework === 'same' || FRAMEWORKS[a.framework]) ? a.framework : defaultFramework(project, kind)
+    if (framework === 'same' && !project.framework) return { text: `${dest} 里没有认得出的前端项目（package.json 里没有 React / Vue / Next / uni-app …，也不是 HBuilderX 或微信原生小程序的项目）：framework 选 react、vue、next、html、uniapp 或 weapp。` }
     let r
     try {
       r = await buildHandoff(studio.browser, { root: t.root, screens: pick.list, kind, size, framework, dest, project, system: systemOfDir(t.root) })
     } catch (e) {
       return { text: `没写成交接包：${String((e && e.message) || e).slice(0, 200)}` }
     }
-    const head = `交接包写好了：${r.file}（${r.shots} 张截图在 handoff/shots/）。下面是全文，照「做法和验收」一屏一屏做，每屏做完用 compare_design 比。\n\n`
+    // 原生小程序跑不了网页版：比不了，照 HANDOFF.md 请用户在微信开发者工具里看
+    const native = framework === 'weapp' || (framework === 'same' && project.framework === 'weapp')
+    const head = `交接包写好了：${r.file}（${r.shots} 张截图在 handoff/shots/）。下面是全文，照「做法和验收」一屏一屏做，${native ? '每屏做完请用户在微信开发者工具里看' : '每屏做完用 compare_design 比'}。\n\n`
     // 每屏顶上一张附上，直接看到要做成什么样
     const firsts = r.rows.filter((row) => row.shots.length).slice(0, 4).map((row) => ({ key: row.key, jpg: fs.readFileSync(path.join(r.dir, 'shots', row.shots[0])) }))
     const kept = firsts.length ? await keepImages(ctx, id, firsts) : {}
@@ -569,6 +577,8 @@ async function keepImages(ctx, id, list, toFile = false) {
   return { files }
 }
 
+const VERSION = (() => { try { return JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version || '' } catch { return '' } })()
+
 const fileStore = {
   load: () => JSON.parse(fs.readFileSync(STORE_FILE, 'utf8')),
   save: (data) => {
@@ -641,9 +651,16 @@ export function apply(ctx) {
   const previewPorts = new Set()
   let tracker = null
   const history = createHistory({ base: HISTORY_DIR, log })
+  // 我的作品 + 哪些文件是别人做的（设计库来的）：别人做的、没改过的页面预览时加硬规矩
+  const library = createLibrary({ log })
+  // 设计市场：目录和批次包从 npm 镜像来，验过签名、逐个文件核对过才用；市场上的页面原样预览时也加硬规矩
+  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 hub = createHub({
     log,
     history,
+    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: () => {
       let own = []
@@ -664,9 +681,12 @@ export function apply(ctx) {
     open,
     log,
     history,
-    store: fileStore,
+    // 记会话的同时，在做的设计目录补进「我的作品」
+    store: { load: fileStore.load, save: (data) => { fileStore.save(data); try { library.sync(data) } catch (e) { log(e) } } },
     alive: (origin) => hub.alive(origin),
     autoOpen: () => studio.autoOpen > 0,
+    // 装好的别人的设计系统退回旧版：退回来的页面先记成别人做的（预览照样加规矩）
+    beforeRestore: (root, html) => { if (html.length) library.addPast(root, html) },
     skipPorts: () => {
       const s = new Set(previewPorts)
       const own = ownHost(ctx).split(':')[1]
@@ -678,7 +698,11 @@ export function apply(ctx) {
   ctx.effect(() => {
     studio.tracker = tracker
     studio.log = log
-    return () => { if (studio.tracker === tracker) { studio.tracker = null; studio.log = () => {} } }
+    studio.market = market
+    return () => {
+      if (studio.tracker === tracker) { studio.tracker = null; studio.log = () => {} }
+      if (studio.market === market) { market.abort(); studio.market = null }
+    }
   }, 'dsh-design-studio: tracker')
   // check_design / look_design 用的无头浏览器：用到时才开，闲置自己关，这一行停用时关掉
   ctx.effect(() => {
@@ -746,7 +770,33 @@ export function apply(ctx) {
     const t = tracker.stateOf(session).target
     let tweaks = null
     if (t && t.kind === 'file') { try { tweaks = readTweaks(t.root) } catch (e) { log(e) } }
-    json(res, 200, { ...tracker.snapshot(session), phone: { on: ph.on, seen: ph.seen || 0 }, tweaks, ...(c ? { checkReq: c.id } : {}) })
+    const snap = tracker.snapshot(session)
+    json(res, 200, { ...snap, strict: strictScreens(snap), phone: { on: ph.on, seen: ph.seen || 0 }, tweaks, ...(c ? { checkReq: c.id } : {}) })
+  }
+
+  /** 正在看的几屏里，哪些是别人做的、没改过的（地址列表）：右侧栏给它们的 iframe 加沙盒、不给剪贴板 */
+  const strictCache = new Map() // 文件 → { sig, strict }
+  function strictScreens(snap) {
+    const t = snap.target
+    if (!t || t.kind !== 'file' || !Array.isArray(snap.screens)) return []
+    const out = []
+    const files = new Set([...snap.screens.map((s) => s.key), snap.focus].filter(Boolean))
+    for (const key of files) {
+      const file = path.join(t.root, key)
+      let st
+      try { st = fs.statSync(file) } catch { continue }
+      const sig = `${st.mtimeMs}:${st.size}:${library.file && fs.existsSync(library.file) ? fs.statSync(library.file).mtimeMs : 0}`
+      let hit = strictCache.get(file)
+      if (!hit || hit.sig !== sig) {
+        let strict = false
+        try { strict = st.size <= 8 * 1024 * 1024 && library.strictHtml(fs.readFileSync(file)) } catch { strict = false }
+        hit = { sig, strict }
+        strictCache.set(file, hit)
+        if (strictCache.size > 500) strictCache.delete(strictCache.keys().next().value)
+      }
+      if (hit.strict) out.push(`${snap.origin}/${encodeURIComponent(key)}`)
+    }
+    return out
   }
 
   /** 调节滑块写回文件：values = { id: 值 } */
@@ -806,11 +856,12 @@ export function apply(ctx) {
   }
 
   /** 转成代码前：会话目录是不是个前端项目（右侧栏默认选「跟项目一样」、填好放哪） */
-  function projectRoute(req, res) {
+  async function projectRoute(req, res) {
     if (!admit(req, res)) return
     const q = new URL(req.url, 'http://x').searchParams
     const session = q.get('session') || ''
-    const cwd = tracker.cwdOf(session)
+    // 新会话（还没跑过工具，比如从设计库「用这个开始」、浏览打开的）插件不知道目录：问 DSH，别拿家目录当项目找
+    const cwd = await sessionCwd(session)
     const p = detectProject(cwd)
     const t = tracker.stateOf(session).target
     const root = t && t.kind === 'file' ? t.root : ''
@@ -820,7 +871,9 @@ export function apply(ctx) {
     const pk = picked ? pickedDest(resolvePath(picked, cwd), root) : null
     const dest = pk ? pk.dest : defaultDest(root, cwd, p)
     const project = projectFor(dest)
-    json(res, 200, { cwd, root, project, fw: defaultFramework(project), dest, why: pk ? pk.why : '', frameworks: Object.fromEntries(Object.entries(FRAMEWORKS).map(([k, v]) => [k, v.label])) })
+    // 设计类型跟着回去：小程序的设计右侧栏多两个选项（uni-app、原生小程序），默认 uni-app
+    const kind = root ? designFor(session).kind : ''
+    json(res, 200, { cwd, root, kind, project, fw: defaultFramework(project, kind), dest, why: pk ? pk.why : '', frameworks: Object.fromEntries(Object.entries(FRAMEWORKS).map(([k, v]) => [k, v.label])) })
   }
 
   async function checkRoute(req, res) {
@@ -848,7 +901,8 @@ export function apply(ctx) {
     const session = String(body.session || '')
     if (!session) return json(res, 400, { error: '缺 session' })
     try {
-      const target = parseTarget(body.target, tracker.cwdOf(session))
+      // 输入框里写的相对路径按会话目录算（新会话也问 DSH 要）
+      const target = parseTarget(body.target, await sessionCwd(session))
       await tracker.setTarget(session, target, { source: 'user', popup: false })
       json(res, 200, tracker.snapshot(session))
     } catch (e) {
@@ -974,9 +1028,13 @@ export function apply(ctx) {
       const page = read(key)
       if (!page) return json(res, 404, { error: 'no-screen' })
       const href = st.origin ? `${st.origin}/${v ? `__dsh_design__/v/${v}/` : ''}${key.split('/').map(encodeURIComponent).join('/')}` : ''
-      const html = bundle(page.toString('utf8'), { key, read, base: href, lead: ERR_CATCHER, tail: inlinePicker(fs.readFileSync(PICKER_FILE, 'utf8'), parent, href) })
+      // 别人做的设计（设计库来的、没改过）：加硬规矩，右侧栏的沙盒也不放行表单
+      const strict = library.strictHtml(page) || (v > 0 && library.strictVersions(t.root))
+      const nonce = strict ? crypto.randomBytes(16).toString('base64') : ''
+      const lead = strict ? strictMeta(nonce) + ERR_CATCHER.replace('<script>', `<script nonce="${nonce}">`) : ERR_CATCHER
+      const html = bundle(strict ? defang(page.toString('utf8')) : page.toString('utf8'), { key, read, base: href, lead, tail: inlinePicker(fs.readFileSync(PICKER_FILE, 'utf8'), parent, href, nonce) })
       // 用到的文件太多就不列（null = 右侧栏不按文件筛，目录里一有改动就重新打包）
-      json(res, 200, { html, deps: deps.size > 200 ? null : [...deps] })
+      json(res, 200, { html, deps: deps.size > 200 ? null : [...deps], strict })
     } catch (e) {
       json(res, 500, { error: e.message })
     }
@@ -1116,7 +1174,36 @@ export function apply(ctx) {
     json(res, 200, st.on ? { ...st, qr: qrMatrix(st.url).map((row) => row.map((c) => (c ? 1 : 0)).join('')) } : st)
   }
 
-  const routes = { state, open: openRoute, view: viewRoute, close: closeRoute, history: historyRoute, restore: restoreRoute, edit: editRoute, style: styleRoute, bundle: bundleRoute, ref: refRoute, export: exportRoute, doc: docRoute, reveal: revealRoute, phone: phoneRoute, check: checkRoute, locate: locateRoute, tweak: tweakRoute, systems: systemsRoute, systhumb: systhumbRoute, project: projectRoute }
+  // 设计库：我的作品、灵感、打 zip、拖 zip 进来用
+  const inspiration = createInspiration({ log })
+  /**
+   * 会话目录：跑过工具的会话插件自己记着；新会话（还没跑过工具）问 DSH——先看活着的会话，再查存下来的会话头。
+   * 都拿不到给家目录（「用这个开始」就放到 ~/DSH 设计）
+   */
+  async function sessionCwd(id) {
+    const known = tracker.cwdOf(id)
+    if (known && path.resolve(known) !== path.resolve(os.homedir())) return known
+    const ok = (c) => typeof c === 'string' && path.isAbsolute(c) ? c : ''
+    try {
+      const ss = ctx && typeof ctx.get === 'function' ? ctx.get('sessions') : null
+      const live = ss && typeof ss.list === 'function' ? [...ss.list()].find((s) => s && s.id === id) : null
+      const c = live && ok(live.header && live.header.cwd)
+      if (c) return c
+    } catch (e) { log(e) }
+    try {
+      const q = ctx && typeof ctx.get === 'function' ? ctx.get('sessionQuery') : null
+      if (q && typeof q.listSessions === 'function') {
+        const rec = (await q.listSessions()).find((r) => r && r.header && r.header.id === id)
+        const c = rec && ok(rec.header.cwd)
+        if (c) return c
+      }
+    } catch (e) { log(e) }
+    return known
+  }
+  const lib = createLibraryRoutes({ admit, readBody, json, tracker, library, inspiration, studio, open, storeLoad: fileStore.load, version: VERSION, exported, log, sessionCwd })
+  const mk = createMarketRoutes({ admit, readBody, json, tracker, library, market, open, systemsDir: SYSTEMS_DIR, log, sessionCwd })
+
+  const routes = { works: lib.works, workthumb: lib.workthumb, pack: lib.pack, usezip: lib.usezip, inspire: lib.inspire, inspimg: lib.inspimg, ...mk, state, open: openRoute, view: viewRoute, close: closeRoute, history: historyRoute, restore: restoreRoute, edit: editRoute, style: styleRoute, bundle: bundleRoute, ref: refRoute, export: exportRoute, doc: docRoute, reveal: revealRoute, phone: phoneRoute, check: checkRoute, locate: locateRoute, tweak: tweakRoute, systems: systemsRoute, systhumb: systhumbRoute, project: projectRoute }
   for (const [key, handler] of Object.entries(routes)) {
     ctx.effect(() => ctx.webServer.register({
       kind: 'exact',

package/lib/inspire.js

@@ -0,0 +1,142 @@
+/**
+ * 设计库 › 灵感：只存在用户电脑上，不上传、不统计
+ *
+ *   <库>/inspiration.json          { format: 1, items: [{ id, type, at, … }] }，新的在前
+ *     image  { name, file, w, h }   拖进来的参考图（图在 <库>/inspiration/<file>）→「照这个做」走参考图流程
+ *     url    { url, name }          存下的网址 →「提取设计系统」
+ *     style  { name, style, mid? }  我的风格（从当前设计存下来的一组配色、字体、圆角；mid＝从市场收藏的那张）→ 和内置风格卡放一起用
+ *     market { mid, mtype, name }   收藏的市场设计（模板 / 设计系统）：只记 id；离线看靠市场缓存，下架了界面标「已下架」
+ *
+ * 风格的字段和风格卡一样（policy.checkStyle 的白名单）；本机存的不卡对比度（分享时才卡）
+ */
+
+import crypto from 'node:crypto'
+import fs from 'node:fs'
+import path from 'node:path'
+import { LIBRARY_DIR } from './works.js'
+import { checkStyle, imageInfo } from './gallery/policy.js'
+import { ID_RE } from './gallery/market.js'
+
+const MAX_ITEMS = 300
+const MAX_IMAGE = 6 * 1024 * 1024
+const IMG_EXT = { png: 'png', jpg: 'jpg', webp: 'webp', gif: 'gif', avif: 'avif' }
+const oneLine = (s, n) => [...String(s == null ? '' : s).replace(/[\x00-\x1f\x7f\u2028\u2029]+/g, ' ').replace(/\s+/g, ' ').trim()].slice(0, n).join('')
+
+export function createInspiration({ dir = LIBRARY_DIR, log = () => {}, now = Date.now } = {}) {
+  const file = path.join(dir, 'inspiration.json')
+  const imgDir = path.join(dir, 'inspiration')
+
+  function load() {
+    try {
+      const raw = JSON.parse(fs.readFileSync(file, 'utf8'))
+      if (raw && Array.isArray(raw.items)) return { format: 1, items: raw.items.filter((x) => x && typeof x.id === 'string' && /^[a-z0-9]{8,32}$/.test(x.id)) }
+    } catch (e) {
+      if (e.code !== 'ENOENT') {
+        log(e)
+        try { fs.copyFileSync(file, `${file}.bad-${now()}`) } catch { /* 算了 */ }
+      }
+    }
+    return { format: 1, items: [] }
+  }
+
+  function save(data) {
+    // 太多了：最旧的图片 / 网址先删（我的风格、收藏留着）
+    while (data.items.length > MAX_ITEMS) {
+      let i = data.items.length - 1
+      while (i >= 0 && (data.items[i].type === 'style' || data.items[i].type === 'market')) i--
+      if (i < 0) break
+      const [gone] = data.items.splice(i, 1)
+      if (gone.type === 'image' && gone.file) try { fs.rmSync(path.join(imgDir, gone.file), { force: true }) } catch { /* 算了 */ }
+    }
+    fs.mkdirSync(dir, { recursive: true })
+    const tmp = `${file}.${process.pid}.tmp`
+    fs.writeFileSync(tmp, JSON.stringify(data, null, 1), { mode: 0o600 })
+    fs.renameSync(tmp, file)
+  }
+
+  const newId = () => crypto.randomBytes(8).toString('hex')
+
+  function add(item) {
+    const data = load()
+    const it = { id: newId(), at: now(), ...item }
+    data.items.unshift(it)
+    save(data)
+    return it
+  }
+
+  /** 参考图：data 是图片的 Buffer */
+  function addImage({ name, data }) {
+    if (!Buffer.isBuffer(data) || !data.length) throw new Error('不是图片')
+    if (data.length > MAX_IMAGE) throw new Error('图片太大（最多 6MB）')
+    const info = imageInfo(data)
+    const ext = info && IMG_EXT[info.type]
+    if (!ext) throw new Error('不是图片')
+    const id = newId()
+    fs.mkdirSync(imgDir, { recursive: true })
+    fs.writeFileSync(path.join(imgDir, `${id}.${ext}`), data, { mode: 0o600 })
+    const data2 = load()
+    const it = { id, at: now(), type: 'image', name: oneLine(name, 60) || 'image', file: `${id}.${ext}`, w: info.w, h: info.h }
+    data2.items.unshift(it)
+    save(data2)
+    return it
+  }
+
+  /** 网址：只收 http(s)，带不带协议都行 */
+  function addUrl({ url, name }) {
+    let s = String(url || '').trim()
+    if (!/^https?:\/\//i.test(s)) s = 'https://' + s
+    let u
+    try { u = new URL(s) } catch { throw new Error('不是网址') }
+    if (!/^https?:$/.test(u.protocol) || !u.hostname.includes('.') || s.length > 500) throw new Error('不是网址')
+    const data = load()
+    const href = u.href
+    const old = data.items.find((x) => x.type === 'url' && x.url === href)
+    if (old) return old
+    return add({ type: 'url', url: href, name: oneLine(name, 60) || u.hostname })
+  }
+
+  /** 我的风格：字段按风格卡的白名单查；对比度本机不卡 */
+  function addStyle({ name, style, mid }) {
+    const problems = checkStyle(style).filter((p) => p.code !== 'contrast')
+    if (problems.length) throw new Error(`风格不对：${problems.map((p) => p.x).join('、')}`)
+    const s = {}
+    for (const k of ['c', 'head', 'w', 'radius', 'shadow', 'nzh', 'nen', 'dzh', 'den', 'bgImage']) if (style[k] !== undefined) s[k] = style[k]
+    // 从市场收藏的：同一张只存一份
+    const from = typeof mid === 'string' && ID_RE.test(mid) ? mid : ''
+    if (from) {
+      const old = load().items.find((x) => x.type === 'style' && x.mid === from)
+      if (old) return old
+    }
+    return add({ type: 'style', name: oneLine(name, 24) || '我的风格', style: s, ...(from ? { mid: from } : {}) })
+  }
+
+  /** 收藏市场上的一套：同一套只记一次 */
+  function addMarket({ mid, mtype, name }) {
+    const id = String(mid || '')
+    if (!ID_RE.test(id) || (mtype !== 'template' && mtype !== 'system')) throw new Error('不是市场上的设计')
+    const data = load()
+    const old = data.items.find((x) => x.type === 'market' && x.mid === id)
+    if (old) return old
+    return add({ type: 'market', mid: id, mtype, name: oneLine(name, 40) || id.split('__')[1] })
+  }
+
+  function remove(id) {
+    const data = load()
+    const i = data.items.findIndex((x) => x.id === id)
+    if (i < 0) return false
+    const [gone] = data.items.splice(i, 1)
+    if (gone.type === 'image' && gone.file) try { fs.rmSync(path.join(imgDir, path.basename(gone.file)), { force: true }) } catch { /* 算了 */ }
+    save(data)
+    return true
+  }
+
+  /** 图片文件的绝对路径（只认登记过的） */
+  function imageFile(id) {
+    const it = load().items.find((x) => x.id === id && x.type === 'image')
+    if (!it || !it.file || path.basename(it.file) !== it.file) return null
+    const p = path.join(imgDir, it.file)
+    return fs.existsSync(p) ? p : null
+  }
+
+  return { list: () => load().items, addImage, addUrl, addStyle, addMarket, remove, imageFile, file }
+}

package/lib/offline.js

@@ -0,0 +1,17 @@
+/**
+ * dsh-design-studio/offline：设计库不联网（默认关）。
+ * 打开后设计库的「市场」一个网址都不访问，只显示已经下载过的；「我的作品」「灵感」照常用。
+ * 默认关、反着来：老版本升级上来插件页里还没有这一行时，市场照常联网
+ */
+import { studio } from './index.js'
+
+export const name = 'dsh-design-studio-offline'
+
+export function apply(ctx) {
+  ctx.effect(() => {
+    studio.offline++
+    // 正在下载的目录 / 批次包马上掐掉（不等下完）
+    try { if (studio.market) studio.market.abort() } catch { /* 市场还没起来 */ }
+    return () => { studio.offline-- }
+  }, 'dsh-design-studio: gallery offline')
+}

package/lib/picker.js

@@ -36,6 +36,9 @@
     s.textContent = '*{scrollbar-width:none}*::-webkit-scrollbar{display:none}'
     ;(document.head || document.documentElement).appendChild(s)
   }
+  // 别人做的设计（设计库来的、没改过）：服务端在脚本标签上标了 data-strict（远程看时在 cfg 里）。
+  // 点站外链接不跳（页面本来就跑不了脚本、交不出表单，这里再挡住「点一下跳到别的网站」），告诉右侧栏拦下了
+  const STRICT = !!cfg.strict || !!(document.currentScript && document.currentScript.getAttribute('data-strict') === '1')
   const SEED_KEY = '__dsh_design_seed__'
   // 远程看（右侧栏把这一屏打包放进沙盒 iframe 的 srcdoc，location 是 about:srcdoc）：这一屏原本的地址由右侧栏给
   const HERE = cfg.remote && typeof cfg.href === 'string' ? cfg.href : ''
@@ -1262,6 +1265,36 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     post({ type: 'links', links })
   }
 
+  if (STRICT) {
+    const offsite = (raw) => {
+      const v = String(raw || '').trim()
+      if (!v || v.startsWith('#')) return ''
+      let u
+      try { u = new URL(v, here()) } catch { return v.slice(0, 200) }
+      return u.origin === hereUrl().origin ? '' : u.href.slice(0, 200)
+    }
+    addEventListener('click', (e) => {
+      const a = e.target && e.target.closest ? e.target.closest('a[href], area[href]') : null
+      if (!a) return
+      const dl = a.hasAttribute('download')
+      const out = offsite(a.getAttribute('href'))
+      // 下载、开新窗口沙盒本来就不让；站外的地址这里直接挡（带 download 的按「下载」报）
+      if (!out && !dl) return
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      post({ type: 'blocked', href: dl ? 'download' : out })
+    }, true)
+    if (window.navigation && typeof navigation.addEventListener === 'function') {
+      navigation.addEventListener('navigate', (e) => {
+        if (!e.cancelable || e.navigationType === 'traverse') return
+        const out = offsite(e.destination && e.destination.url)
+        if (!out && !e.downloadRequest) return
+        e.preventDefault()
+        post({ type: 'blocked', href: out || 'download' })
+      })
+    }
+  }
+
   // 演示：点了跳页的地方，不在 iframe 里直接跳，告诉右侧栏换一屏（带过场动画）
   // 远程看也是：沙盒里的页面跳不过去（地址指着电脑本机），由右侧栏打包那一页换上来
   let demo = false

package/lib/serve.js

@@ -12,11 +12,13 @@
  * 每个 HTML 页面都注入 /__dsh_design__/picker.js：负责点选 / 框选，用 postMessage 和右侧栏通信。
  */
 
+import crypto from 'node:crypto'
 import fs from 'node:fs'
 import http from 'node:http'
 import net from 'node:net'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { tokenize } from './gallery/html.js'
 
 export const INTERNAL = '/__dsh_design__/'
 const PICKER_FILE = path.join(path.dirname(fileURLToPath(import.meta.url)), 'picker.js')
@@ -71,7 +73,7 @@ export function hostOk(host, port) {
  * picker 在 </body> 前，等它装上，前面脚本的报错早过去了
  */
 export const ERR_CATCHER = '<script>(()=>{if(window.__dshErrs)return;const L=window.__dshErrs=[];const add=(x)=>{if(L.length<30)L.push(x)};' +
-  'addEventListener("error",(e)=>{const t=e.target;if(t&&t!==window&&t.tagName){add({res:1,tag:t.tagName.toLowerCase(),src:String(t.currentSrc||t.src||t.href||"").slice(0,300)})}' +
+  'addEventListener("error",(e)=>{const t=e.target;if(t&&t!==window&&t.tagName){const h=t.href;add({res:1,tag:t.tagName.toLowerCase(),src:String(t.currentSrc||t.src||(h&&typeof h.baseVal==="string"?h.baseVal:h)||"").slice(0,300)})}' +
   'else add({msg:String(e.message||"").slice(0,300),src:String(e.filename||"").slice(0,300),line:e.lineno||0})},true);' +
   'addEventListener("unhandledrejection",(e)=>{const r=e.reason;add({msg:String((r&&r.message)||r).slice(0,300),src:"",line:0})})})()</script>'
 
@@ -81,12 +83,71 @@ export function headInsert(html, tag) {
   return m ? html.slice(0, m.index + m[0].length) + tag + html.slice(m.index + m[0].length) : tag + html
 }
 
-/** 在 </body> 前（没有就在末尾）插入选取脚本，<head> 最前面放报错记录 */
-export function injectPicker(html) {
-  const tag = `<script src="${INTERNAL}picker.js"></script>`
+/**
+ * 在 </body> 前（没有就在末尾）插入选取脚本，<head> 最前面放报错记录。
+ * nonce：别人做的设计（设计库来的）加了「只准带这个记号的脚本跑」的规矩，我们自己的两段脚本带上它；data-strict 让 picker 拦外链
+ */
+export function injectPicker(html, { nonce = '' } = {}) {
+  const n = nonce ? ` nonce="${nonce}"` : ''
+  const tag = `<script src="${INTERNAL}picker.js"${n}${nonce ? ' data-strict="1"' : ''}></script>`
   const i = html.toLowerCase().lastIndexOf('</body>')
-  return headInsert(i >= 0 ? html.slice(0, i) + tag + html.slice(i) : html + tag, ERR_CATCHER)
+  return headInsert(i >= 0 ? html.slice(0, i) + tag + html.slice(i) : html + tag, nonce ? ERR_CATCHER.replace('<script>', `<script${n}>`) : ERR_CATCHER)
+}
+
+/**
+ * 别人做的设计（设计库市场来的、拖进来的 zip，且没被改过）预览时的硬规矩：
+ * 只有带 nonce 的脚本（我们注入的 picker）能跑；不联网（样式、图片、字体只能是自己这个预览地址或 data:）；
+ * 表单交不出去；不能嵌别的页面、不能改 <base>
+ */
+export function strictCsp(nonce) {
+  return [
+    "default-src 'none'",
+    `script-src 'nonce-${nonce}'`,
+    "style-src 'self' 'unsafe-inline'",
+    "img-src 'self' data: blob:",
+    "font-src 'self' data:",
+    "media-src 'self' data: blob:",
+    "connect-src 'self'",
+    "frame-src 'none'",
+    "child-src 'none'",
+    "worker-src 'none'",
+    "manifest-src 'none'",
+    "object-src 'none'",
+    "form-action 'none'",
+    "base-uri 'none'",
+  ].join('; ')
+}
+
+/** 硬规矩预览的其他响应头 */
+export const STRICT_HEADERS = {
+  'X-Content-Type-Options': 'nosniff',
+  'Referrer-Policy': 'no-referrer',
+  'X-DNS-Prefetch-Control': 'off',
+  'Permissions-Policy': 'camera=(), microphone=(), geolocation=(), clipboard-read=(), payment=(), usb=(), serial=(), hid=(), bluetooth=(), display-capture=()',
 }
+/**
+ * 硬规矩预览前再拆掉 CSP 管不到的几样：<meta http-equiv>（自动跳走）、<link rel="preconnect / dns-prefetch / prerender …">（偷偷连外网）、
+ * a[ping]。只改属性名（data-dsh-off-…），不改别的字。正常的设计库内容本来就没有这些（检查规则拒收），这里是兜底
+ */
+export function defang(html) {
+  const edits = []
+  for (const tk of tokenize(html)) {
+    if (tk.type !== 'tag') continue
+    const t = tk.tag
+    for (const a of t.attrs) {
+      const off = (t.name === 'meta' && a.name === 'http-equiv')
+        || (t.name === 'link' && a.name === 'rel' && !/^\s*(stylesheet|icon|shortcut icon|apple-touch-icon)\s*$/i.test(a.value))
+        || a.name === 'ping'
+      if (off) edits.push(a.start)
+    }
+  }
+  let out = html
+  for (const at of edits.sort((a, b) => b - a)) out = out.slice(0, at) + 'data-dsh-off-' + out.slice(at)
+  return out
+}
+
+// 别人做的 SVG 被当页面直接打开时：不准跑任何脚本
+const STRICT_SVG_CSP = "default-src 'none'; style-src 'unsafe-inline'; img-src data:"
 
 /** 真实路径在不在根目录（也取真实路径）里面 */
 function inRoot(root, real) {
@@ -161,8 +222,21 @@ export function trustedOrigins(hosts) {
  * @param opts.onChange (key, file, files) 目录里有文件改了（file 目标；files：这一批的相对路径）
  * @param opts.history  设计版本（lib/history.js）：/__dsh_design__/v/<版本>/<文件> 给出那一版的文件
  * @param opts.parents  () → 还有哪些 DSH 页面的源能嵌预览（DSH 网页端的地址）
+ * @param opts.strict   { html(buf) → 这份 HTML 是别人做的、没改过吗, root(dir) → 这个目录是别人做的设计吗 }：是就加硬规矩
  */
-export function createHub({ log = () => {}, onChange = () => {}, history = null, parents = () => [] } = {}) {
+export function createHub({ log = () => {}, onChange = () => {}, history = null, parents = () => [], strict = null } = {}) {
+  const strictHtml = (buf) => { try { return !!(strict && strict.html && strict.html(buf)) } catch (e) { log(e); return true } }
+  const strictRoot = (dir) => { try { return !!(strict && strict.root && strict.root(dir)) } catch (e) { log(e); return true } }
+  const strictVer = (dir) => { try { return !!(strict && strict.versions && strict.versions(dir)) } catch (e) { log(e); return true } }
+
+  /** 发一份 HTML：别人做的加硬规矩（CSP + nonce），我们的脚本照常注入 */
+  function sendHtml(res, req, buf, type, force = false) {
+    if (force || strictHtml(buf)) {
+      const nonce = crypto.randomBytes(16).toString('base64')
+      return send(res, 200, req.method === 'HEAD' ? '' : injectPicker(defang(buf.toString('utf8')), { nonce }), { 'Content-Type': type, 'Content-Security-Policy': strictCsp(nonce), ...STRICT_HEADERS })
+    }
+    send(res, 200, req.method === 'HEAD' ? '' : injectPicker(buf.toString('utf8')), { 'Content-Type': type })
+  }
   const servers = new Map() // key → entry
 
   function touch(entry) {
@@ -213,14 +287,15 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     const ext = path.extname(file).toLowerCase()
     const type = MIME[ext] || 'application/octet-stream'
     if (ext === '.html' || ext === '.htm') {
-      fs.readFile(file, 'utf8', (err, html) => {
+      fs.readFile(file, (err, buf) => {
         if (err) return send(res, 500, '读不了这个文件')
-        send(res, 200, req.method === 'HEAD' ? '' : injectPicker(html), { 'Content-Type': type })
+        sendHtml(res, req, buf, type)
       })
       return
     }
     // 别的源不能把这里的文件当子资源拿走
-    res.writeHead(200, { 'Content-Type': type, 'Cache-Control': 'no-store', 'Cross-Origin-Resource-Policy': 'same-origin' })
+    const extra = strictRoot(entry.root) ? { 'X-Content-Type-Options': 'nosniff', ...(ext === '.svg' ? { 'Content-Security-Policy': STRICT_SVG_CSP } : {}) } : {}
+    res.writeHead(200, { 'Content-Type': type, 'Cache-Control': 'no-store', 'Cross-Origin-Resource-Policy': 'same-origin', ...extra })
     if (req.method === 'HEAD') return res.end()
     const stream = fs.createReadStream(file)
     stream.on('error', () => res.destroy())
@@ -238,8 +313,10 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     const type = MIME[ext] || 'application/octet-stream'
     fs.readFile(file, (err, buf) => {
       if (err) return send(res, 404, 'no such version file')
-      if (ext === '.html' || ext === '.htm') return send(res, 200, req.method === 'HEAD' ? '' : injectPicker(buf.toString('utf8')), { 'Content-Type': type })
-      res.writeHead(200, { 'Content-Type': type, 'Cache-Control': 'no-store', 'Cross-Origin-Resource-Policy': 'same-origin' })
+      // 装好的别人的设计系统：旧版本里的页面一律加规矩
+      if (ext === '.html' || ext === '.htm') return sendHtml(res, req, buf, type, strictVer(entry.root))
+      const extra = strictRoot(entry.root) ? { 'X-Content-Type-Options': 'nosniff', ...(ext === '.svg' ? { 'Content-Security-Policy': STRICT_SVG_CSP } : {}) } : {}
+      res.writeHead(200, { 'Content-Type': type, 'Cache-Control': 'no-store', 'Cross-Origin-Resource-Policy': 'same-origin', ...extra })
       res.end(req.method === 'HEAD' ? undefined : buf)
     })
   }