dsh-design-studio 0.5.0 → 0.6.0

package/lib/client.js

@@ -303,6 +303,49 @@ window.__ModuleLoader__.load({
       failed: '没放进去：{msg}',
       openFailed: '打不开：{msg}',
       headerTip: '设计工作台',
+      tweaks: '调节滑块',
+      twTip: '模型给这套设计做的几个维度：拖的时候所有屏一起变，还没写进文件。',
+      twEmpty: '这套设计还没有专属滑块。让模型挑几个最值得试的维度（留白、圆角、主色、排法……），做成滑块放在这里。',
+      twMake: '让模型做几个',
+      twFix: '让模型修好',
+      twMakeText: '〔调节滑块〕给这套设计做 3–5 个调节滑块：挑最值得试的维度（比如留白、圆角、主色、卡片排法），照 ui-design 技能「调节滑块」一节写进设计目录的 tweaks.json，把样式接上，做完用 check_design 查一遍。',
+      twFixText: '〔调节滑块〕tweaks.json 有问题：{errs}。照 ui-design 技能「调节滑块」一节改好。',
+      twAskHead: '〔调节〕我在右侧调节滑块里调成了下面这样，照这个改设计（改样式源文件，tweaks.json 里对应的 value 也改成新值）：',
+      twAskTip: '让模型照这几个值改设计（可以顺手调整相关的地方）',
+      twSaveTip: 'CSS 变量写进 tokens.css 的默认值，属性写到每屏的 <html> 上（改前改后各存一版）',
+      twNoWrite: '开发服务器的页面不能直接写回，交给模型改',
+      twMoved: '设计已经换了，没写回；再拖一次',
+      twSaved: '已写回 {n} 项',
+      twMissed: '{names} 在样式里没找到默认值，没写回：交给模型改',
+      systems: '品牌设计系统',
+      sysOpen: '品牌设计系统…',
+      sysEmptyLine: '有自己的品牌？',
+      sysTip: '从你的网站或项目里提取的颜色、字体、圆角和组件。设为默认后，做新设计都照它来。',
+      sysEmpty: '还没有。在下面填你的网站地址或项目文件夹，让模型提一套。',
+      sysDefault: '默认',
+      sysSet: '设为默认',
+      sysUnset: '不再默认',
+      sysApply: '套用到当前设计',
+      sysPh: '网站地址或项目文件夹',
+      sysExtract: '提取',
+      sysExtractText: '〔提取设计系统〕从 {src} 提取我的品牌设计系统（调 extract_design_system），设为默认，以后做新设计都照它来。提完对照截图核对一遍，再打开样张给我看。',
+      sysApplyText: '〔套用设计系统〕把右侧这套设计换成设计系统「{name}」（{dir}）：复制它的 tokens.css、components.css 进设计目录，每屏都 link 上，按钮、输入框、卡片换成里面的类，颜色、字体、圆角都照它；版式和内容不变。',
+      sysSetOk: '之后做新设计都照「{name}」',
+      sysUnsetOk: '已取消默认',
+      handoff: '转成代码',
+      hoTip: '把设计做成真项目的代码：先整理交接说明和截图，再一屏一屏写，每屏写完和设计稿逐像素比，对上了再做下一屏。',
+      hoFw: '用什么做',
+      hoSame: '跟现有项目一样（{label}）',
+      hoHtml: '纯 HTML / CSS',
+      hoDest: '代码放在',
+      hoScope: '范围',
+      hoAll: '全部 {n} 屏',
+      hoOne: '只转这一屏',
+      hoScopeOne: '只做 {name}',
+      hoGo: '开始转成代码',
+      hoProxy: '现在预览的是开发服务器上的页面，它已经是代码了。要转的是用本地 HTML 做的设计。',
+      hoLoading: '正在看会话目录…',
+      hoText: '〔转成代码〕把右侧的设计做成真项目的代码。\n- 用：{fw}\n- 放在：{dest}\n- 范围：{scope}\n先调 handoff_design（framework: {key}，dest: {dest}{only}）拿交接说明，照 HANDOFF.md 一屏一屏做；每屏做完把开发服务器跑起来，用 compare_design 和设计稿比，差异降到 3% 以下再做下一屏。设计目录里的文件别改。',
     }
     const EN = {
       title: 'Design Studio',
@@ -568,6 +611,49 @@ window.__ModuleLoader__.load({
       failed: 'Could not add it: {msg}',
       openFailed: 'Could not open: {msg}',
       headerTip: 'Design Studio',
+      tweaks: 'Tweaks',
+      twTip: 'Knobs the model made for this design. Every screen follows as you drag; nothing is written yet.',
+      twEmpty: 'This design has no tweaks yet. Ask the model to pick the dimensions most worth trying (spacing, radius, brand color, layout…) and put them here as knobs.',
+      twMake: 'Ask the model',
+      twFix: 'Ask the model to fix it',
+      twMakeText: '[Tweaks] Make 3–5 tweaks for this design: pick the dimensions most worth trying (spacing, radius, brand color, card layout…), write them to tweaks.json in the design folder as the ui-design skill describes under "Tweaks", wire up the styles, then run check_design.',
+      twFixText: '[Tweaks] tweaks.json has problems: {errs}. Fix it as the ui-design skill describes under "Tweaks".',
+      twAskHead: '[Tweaks] I set the tweaks in the sidebar to these values. Change the design to match (edit the style sources and update the matching values in tweaks.json):',
+      twAskTip: 'Let the model apply these values (and adjust related details)',
+      twSaveTip: 'CSS variables go into the defaults in tokens.css, attributes onto each screen\'s <html> (a version is kept before and after)',
+      twNoWrite: 'Dev-server pages cannot be written back. Ask the model instead',
+      twMoved: 'The design changed, so nothing was written. Try again',
+      twSaved: 'Wrote back {n}',
+      twMissed: 'No default found in the styles for {names}, not written. Ask the model instead',
+      systems: 'Brand design systems',
+      sysOpen: 'Brand design systems…',
+      sysEmptyLine: 'Have your own brand?',
+      sysTip: 'Colors, fonts, radii and components pulled from your site or project. The default one is used for every new design.',
+      sysEmpty: 'None yet. Enter your website or project folder below and let the model extract one.',
+      sysDefault: 'Default',
+      sysSet: 'Make default',
+      sysUnset: 'Stop using',
+      sysApply: 'Apply to this design',
+      sysPh: 'Website or project folder',
+      sysExtract: 'Extract',
+      sysExtractText: '[Design system] Extract my brand design system from {src} (call extract_design_system) and make it the default for new designs. Check it against the screenshots, then open the specimen for me.',
+      sysApplyText: '[Design system] Switch the design in the sidebar to the design system "{name}" ({dir}): copy its tokens.css and components.css into the design folder, link them on every screen, use its button, input and card classes, and follow its colors, fonts and radii. Keep the layout and content.',
+      sysSetOk: 'New designs will follow "{name}"',
+      sysUnsetOk: 'No default design system now',
+      handoff: 'Build as code',
+      hoTip: 'Turn the design into a real project: a handoff note and screenshots first, then one screen at a time, each pixel-compared with the design before moving on.',
+      hoFw: 'Build with',
+      hoSame: 'Same as the project ({label})',
+      hoHtml: 'Plain HTML / CSS',
+      hoDest: 'Put the code in',
+      hoScope: 'Scope',
+      hoAll: 'All {n} screens',
+      hoOne: 'This screen only',
+      hoScopeOne: 'only {name}',
+      hoGo: 'Start building',
+      hoProxy: 'This preview is a dev-server page, which is already code. Building works on designs made as local HTML.',
+      hoLoading: 'Looking at the session folder…',
+      hoText: '[Build as code] Build the design in the sidebar as a real project.\n- With: {fw}\n- In: {dest}\n- Scope: {scope}\nCall handoff_design (framework: {key}, dest: {dest}{only}) for the handoff note and follow HANDOFF.md one screen at a time. After each screen, run the dev server and call compare_design until the difference is under 3%, then move on. Do not edit the design folder.',
     }
 
     function makeT(ctx) {
@@ -883,6 +969,39 @@ window.__ModuleLoader__.load({
 .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}}
+.ddp-tw .row:first-child{border-top:0}
+.ddp-sys .bd{display:flex;flex-direction:column;gap:8px;padding:2px 10px 10px}
+.ddp-sysc{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.08))}
+.ddp-sysc.def{box-shadow:inset 0 0 0 1.5px ${ACCENT}}
+.ddp-sysc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;background:var(--dsw-alias-bg-layer-1)}
+.ddp-sysc .nm{display:flex;align-items:center;gap:6px;font-size:13px}
+.ddp-sysc .nm b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-sysc .nm span{flex:none;height:18px;padding:0 6px;border-radius:9px;background:${ACCENT};color:#fff;font-size:11px;line-height:18px}
+.ddp-sysc .sw{display:flex;align-items:center;gap:3px;min-width:0}
+.ddp-sysc .sw i{width:14px;height:14px;flex:none;border-radius:4px;box-shadow:inset 0 0 0 .5px rgba(127,127,127,.45)}
+.ddp-sysc .sw em{margin-left:4px;font-size:11px;font-style:normal;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-sysc small{font-size:11px;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-sysc .acts{display:flex;gap:4px}
+.ddp-sysc .acts button{flex:1;height:26px;padding:0 6px;border:0;border-radius:7px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:12px/26px inherit;cursor:pointer;white-space:nowrap}
+.ddp-sysc .acts button:hover{color:var(--dsw-alias-label-primary)}
+.ddp-sys form{display:flex;gap:6px}
+.ddp-sys form input,.ddp-ho input[type=text]{flex:1;min-width:0;height:28px;padding:0 9px;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.3));border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:12px inherit;outline:none}
+.ddp-sys form input:focus,.ddp-ho input[type=text]:focus{border-color:${ACCENT}}
+.ddp-tokens.ddp-sys footer form button{width:auto;height:28px;flex:none;justify-content:center;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);border-radius:999px;padding:0 12px}
+.ddp-tokens.ddp-sys footer form button:disabled{opacity:.45;cursor:default}
+.ddp-ho .bd{padding:0 14px 10px}
+.ddp-ho .row{padding:9px 0 10px;border-top:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
+.ddp-ho .row:first-child{border-top:0}
+.ddp-ho label{display:block;margin-bottom:7px;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.ddp-ho input[type=text]{width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
+.ddp-ho .opt{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:4px 8px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);font:12px/18px inherit;text-align:left;cursor:pointer}
+.ddp-ho .opt:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.ddp-ho .opt i{width:12px;height:12px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dsw-alias-label-tertiary)}
+.ddp-ho .opt.on{color:var(--dsw-alias-label-primary)}
+.ddp-ho .opt.on i{box-shadow:inset 0 0 0 4px ${ACCENT}}
+.ddp-ho footer .go{justify-content:center;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
+.ddp-ho footer .go:hover{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);opacity:.88}
+.ddp-ho footer .go:disabled{opacity:.45;cursor:default}
 .ddp-more{display:none}
 .ddp-menu .o1,.ddp-menu .o2{display:none}
 @container (max-width:700px){.ddp-bar>.o1{display:none}.ddp-bar>.ddp-more{display:block}.ddp-menu .o1{display:flex}}
@@ -940,6 +1059,9 @@ window.__ModuleLoader__.load({
       stetho: () => svg([h('path', { key: 1, d: 'M6 3.5H5a1 1 0 0 0-1 1V9a5 5 0 0 0 10 0V4.5a1 1 0 0 0-1-1h-1' }), h('path', { key: 2, d: 'M9 14v1.5a4.5 4.5 0 0 0 9 0V13' }), h('circle', { key: 3, cx: 18, cy: 11, r: 2 })]),
       pdf: () => svg([h('path', { key: 1, d: 'M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z' }), h('path', { key: 2, d: 'M14 3.5v5h5' }), h('path', { key: 3, d: 'M8.5 13h7M8.5 16.5h4.5' })]),
       deck: () => svg([h('rect', { key: 1, x: 3, y: 4, width: 18, height: 12.5, rx: 1.8 }), h('path', { key: 2, d: 'M12 16.5V20M8.5 20.5h7' }), h('path', { key: 3, d: 'M7 12.5l3-3 2.5 2 4-4' })]),
+      dial: () => svg([h('circle', { key: 1, cx: 12, cy: 13.5, r: 6.5 }), h('path', { key: 2, d: 'M12 13.5l3.2-3.2' }), h('path', { key: 3, d: 'M12 3.5v2M4.6 7.6l1.4 1.1M19.4 7.6L18 8.7' })]),
+      code: () => svg([h('path', { key: 1, d: 'M8.5 7.5L4 12l4.5 4.5M15.5 7.5L20 12l-4.5 4.5' }), h('path', { key: 2, d: 'M13.5 5l-3 14' })]),
+      library: () => svg([h('rect', { key: 1, x: 3.5, y: 4, width: 5, height: 16, rx: 1.2 }), h('rect', { key: 2, x: 10, y: 4, width: 5, height: 16, rx: 1.2 }), h('path', { key: 3, d: 'M16.6 5.4l3.7 13.9' })]),
       page: (p) => svg([h('rect', { key: 1, x: 3, y: 4, width: 18, height: 16, rx: 2.5 }), h('path', { key: 2, d: 'M3 9h18' }), h('rect', { key: 3, x: 7, y: 12.5, width: 5, height: 4, rx: 1, strokeDasharray: '2 1.6' })], p),
     }
     // 引导页上的大图标
@@ -2219,6 +2341,7 @@ window.__ModuleLoader__.load({
               L.readied.add(id)
               L.title = d.title || ''
               if (p.dark) postTo(id, { type: 'theme', dark: true })
+              if (p.tweak) postTo(id, { type: 'tweak', vars: p.tweak.vars, attrs: p.tweak.attrs })
               if (p.onMeta) p.onMeta(d.meta || '', d.title || '', Array.isArray(d.tokens) ? d.tokens : [], !!d.dark, Array.isArray(d.links) ? d.links : [])
               if (p.onHref && d.href) p.onHref(d.href)
               if (isCur) {
@@ -2296,6 +2419,9 @@ window.__ModuleLoader__.load({
       const cssSig = JSON.stringify(props.styleCss || {})
       useEffect(() => { if (cur && props.styleEdit) postTo(cur, { type: 'style', css: props.styleCss || {} }) }, [cssSig])
       useEffect(() => { if (cur) postTo(cur, { type: 'demo', on: !!props.demo }) }, [!!props.demo])
+      // 调节滑块：拖的时候改页面上的 CSS 变量 / <html> 属性（新载的一帧在 ready 时套上）
+      const twSig = JSON.stringify(props.tweak || null)
+      useEffect(() => { if (cur) postTo(cur, { type: 'tweak', vars: (props.tweak || {}).vars || {}, attrs: (props.tweak || {}).attrs || {} }) }, [twSig])
       useEffect(() => {
         // 刚退出改字（点按钮、Esc、模型开始干活）：页面会把正在改的那一处交上来，这一小会儿还收
         if (editWas.current && !props.textEdit) editOffAt.current = Date.now()
@@ -2396,7 +2522,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 设计规范面板：按组列出变量，点一个放进输入框 */
-    function TokensPanel({ t, tokens, onPick, onAsk, onRef, onStyles, onClose }) {
+    function TokensPanel({ t, tokens, onPick, onAsk, onRef, onStyles, onSystems, onClose }) {
       const groups = {}
       for (const tok of tokens) (groups[tokenKind(tok)] = groups[tokenKind(tok)] || []).push(tok)
       const px = (v) => Math.max(0, parseFloat(v) * (/rem|em$/.test(v) ? 16 : 1)) || 0
@@ -2424,6 +2550,7 @@ window.__ModuleLoader__.load({
             : h('div', { className: 'none' }, t('tokensEmpty'), h('div', null, h('button', { className: 'ddp-go', onClick: onAsk }, t('tokensAsk'))))),
         onRef || onStyles ? h('footer', null,
           onStyles ? h('button', { onClick: onStyles }, h(I.sparkle), h('span', null, t('stylesOpen'))) : null,
+          onSystems ? h('button', { onClick: onSystems }, h(I.library), h('span', null, t('sysOpen'))) : null,
           onRef ? h('button', { title: t('refPickTip'), onClick: onRef }, h(I.image), h('span', null, t('refPick'))) : null) : null)
     }
 
@@ -2530,6 +2657,160 @@ window.__ModuleLoader__.load({
         h('div', { className: 'bd' }, h(StyleCards, { t, onPick })))
     }
 
+    // ── 调节滑块、品牌设计系统、转成代码 ─────────────────────────────────────
+
+    /** 滑块的值 → 写到页面上的样子（和服务端 tweaks.js 的 cssValue 一样） */
+    const tweakCss = (k, v) => (k.kind === 'range' ? `${v}${k.unit || ''}` : String(v))
+    const tweakShown = (k, v) => (k.kind === 'choice' ? ((k.options || []).find((o) => o.value === String(v)) || { label: v }).label : tweakCss(k, v))
+    const hasOwn = (o, k) => Object.prototype.hasOwnProperty.call(o, k)
+
+    /** 拖过的滑块（id → 值）→ 发给页面的 { vars, attrs }；没拖过的不发（页面用文件里的） */
+    function tweakMsg(list, live) {
+      const vars = {}
+      const attrs = {}
+      for (const k of list) {
+        if (!hasOwn(live, k.id)) continue
+        if (k.var) vars[k.var] = tweakCss(k, live[k.id])
+        else if (k.attr) attrs[k.attr] = String(live[k.id])
+      }
+      return { vars, attrs }
+    }
+
+    /** 拖过的滑块 → 交给模型的一段字 */
+    function formatTweaks(t, list, live) {
+      const rows = list.filter((k) => hasOwn(live, k.id)).map((k) => `- ${k.label}：${tweakShown(k, k.value)} → ${tweakShown(k, live[k.id])}（${k.var || k.attr}）`)
+      return t('twAskHead') + '\n' + rows.join('\n') + '\n'
+    }
+
+    /** 调节滑块面板：模型给这套设计做的几个维度（tweaks.json），拖的时候所有屏一起变，定下来写回文件或交给模型 */
+    function TweaksPanel({ t, tw, live, write, onSet, onReset, onAsk, onSave, onMake, onClose }) {
+      const head = h('header', null, h(I.dial), h('b', null, t('tweaks')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close)))
+      const box = (...kids) => h('div', { className: 'ddp-tokens ddp-style ddp-tw', onPointerDown: (e) => e.stopPropagation() }, head, ...kids)
+      const list = (tw && tw.list) || []
+      const errs = (tw && tw.errors) || []
+      if (!list.length) {
+        return box(h('div', { className: 'bd' }, h('div', { className: 'none' },
+          errs.length ? errs.map((e, i) => h('div', { key: i }, e)) : t('twEmpty'),
+          h('div', null, h('button', { className: 'ddp-go', onClick: () => onMake(errs) }, t(errs.length ? 'twFix' : 'twMake'))))))
+      }
+      const cur = (k) => (hasOwn(live, k.id) ? live[k.id] : k.value)
+      const row = (k) => {
+        const v = cur(k)
+        const lab = h('label', null, h('span', { title: k.var || k.attr }, k.label), h('em', { className: hasOwn(live, k.id) ? 'v' : '' }, tweakShown(k, v)))
+        const note = k.note ? h('div', { className: 'note' }, k.note) : null
+        if (k.kind === 'range') {
+          return h('div', { className: 'row', key: k.id }, lab,
+            h('input', { type: 'range', min: k.min, max: k.max, step: k.step, value: v, 'aria-label': k.label, onChange: (e) => onSet(k, Number(e.target.value)) }), note)
+        }
+        if (k.kind === 'color') {
+          return h('div', { className: 'row', key: k.id }, lab,
+            h('div', { className: 'chips' }, h('input', { type: 'color', value: /^#[0-9a-f]{6}$/i.test(v) ? v : '#000000', 'aria-label': k.label, onChange: (e) => onSet(k, e.target.value) })), note)
+        }
+        return h('div', { className: 'row', key: k.id }, lab,
+          h('div', { className: 'seg' }, ...(k.options || []).map((o) => h('button', { key: o.value, className: String(v) === o.value ? 'on' : '', onClick: () => onSet(k, o.value) }, o.label))), note)
+      }
+      const n = list.filter((k) => hasOwn(live, k.id)).length
+      return box(
+        h('p', { className: 'tip' }, t('twTip')),
+        h('div', { className: 'bd' }, ...list.map(row), errs.length ? h('div', { className: 'note', key: 'err' }, errs.join('；')) : null),
+        h('footer', { className: 'row' },
+          h('button', { onClick: onReset, disabled: !n }, h('span', null, t('styleReset'))),
+          h('button', { onClick: onAsk, disabled: !n, title: t('twAskTip') }, h('span', null, t('styleAsk'))),
+          h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
+    }
+
+    async function getJson(path) {
+      const r = await fetch(API + path, { credentials: 'same-origin' })
+      const data = await r.json().catch(() => ({}))
+      if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`)
+      return data
+    }
+
+    /** 品牌设计系统库：从用户的网站 / 项目提取的几套，默认那套以后做新设计都照它来。rev 变了（模型干完一轮）重新列 */
+    function SystemsPanel({ t, rev, hasDesign, onExtract, onApply, onSay, onClose }) {
+      const [data, setData] = useState(null)
+      const [err, setErr] = useState('')
+      const [src, setSrc] = useState('')
+      useEffect(() => {
+        let alive = true
+        getJson('systems').then((d) => { if (alive) { setData(d); setErr('') } }, (e) => { if (alive) setErr(e.message) })
+        return () => { alive = false }
+      }, [rev])
+      const setDef = (x, on) => post('systems', { id: x.id, default: on }).then((d) => { setData(d); onSay(on ? t('sysSetOk', { name: x.name }) : t('sysUnsetOk')) }, (e) => setErr(e.message))
+      const list = (data && data.systems) || []
+      const go = (e) => {
+        e.preventDefault()
+        const v = src.trim()
+        if (!v) return
+        onExtract(v)
+        setSrc('')
+      }
+      return h('div', { className: 'ddp-tokens ddp-sys', onPointerDown: (e) => e.stopPropagation() },
+        h('header', null, h(I.library), h('b', null, t('systems')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+        h('p', { className: 'tip' }, t('sysTip')),
+        h('div', { className: 'bd' },
+          err ? h('div', { className: 'none' }, err) : null,
+          data && !list.length ? h('div', { className: 'none' }, t('sysEmpty')) : null,
+          ...list.map((x) => h('div', { key: x.id, className: 'ddp-sysc' + (x.default ? ' def' : '') },
+            x.preview ? h('img', { src: `${API}systhumb?id=${encodeURIComponent(x.id)}&v=${x.createdAt || 0}`, alt: '', loading: 'lazy' }) : null,
+            h('div', { className: 'nm' }, h('b', { title: x.dir }, x.name), x.default ? h('span', null, t('sysDefault')) : null),
+            h('div', { className: 'sw' }, ...Object.entries(x.colors || {}).slice(0, 7).map(([k, v]) => h('i', { key: k, title: `${k} ${v}`, style: { background: v } })), x.font ? h('em', null, x.font) : null),
+            x.sources && x.sources.length ? h('small', { title: x.sources.join('\n') }, x.sources[0]) : null,
+            h('div', { className: 'acts' },
+              h('button', { onClick: () => setDef(x, !x.default) }, x.default ? t('sysUnset') : t('sysSet')),
+              hasDesign ? h('button', { onClick: () => onApply(x) }, t('sysApply')) : null)))),
+        h('footer', null,
+          h('form', { onSubmit: go },
+            h('input', { value: src, placeholder: t('sysPh'), 'aria-label': t('sysPh'), onChange: (e) => setSrc(e.target.value) }),
+            h('button', { type: 'submit', disabled: !src.trim() }, t('sysExtract')))))
+    }
+
+    const FW_LIST = ['react', 'vue', 'next', 'html']
+    const FW_LABEL = { react: 'React + Vite', vue: 'Vue 3 + Vite', next: 'Next.js' }
+
+    /** 转成代码：用什么做、放哪、转几屏；点了把一段话放进输入框，模型调 handoff_design 照交接包做，每屏做完 compare_design */
+    function HandoffPanel({ t, sid, root, fileTarget, count, cur, onGo, onClose }) {
+      const [info, setInfo] = useState(null)
+      const [fw, setFw] = useState('')
+      const [dest, setDest] = useState('')
+      const [one, setOne] = useState(false)
+      // 换了会话或设计目录就重新问：先清掉旧的（别把上一套设计的目标发出去）
+      useEffect(() => {
+        let alive = true
+        setInfo(null)
+        setDest('')
+        if (!root) return () => { alive = false }
+        getJson(`project?session=${encodeURIComponent(sid)}`).then((d) => {
+          if (!alive) return
+          setInfo(d)
+          setFw(d.project && d.project.pkg && d.project.framework ? 'same' : 'react')
+          setDest(d.root === root ? d.dest || '' : '')
+        }, () => { if (alive) setInfo({}) })
+        return () => { alive = false }
+      }, [sid, root])
+      const head = h('header', null, h(I.code), h('b', null, t('handoff')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close)))
+      const box = (...kids) => h('div', { className: 'ddp-tokens ddp-style ddp-ho', onPointerDown: (e) => e.stopPropagation() }, head, ...kids)
+      if (!fileTarget) return box(h('div', { className: 'bd' }, h('div', { className: 'none' }, t('hoProxy'))))
+      if (!info) return box(h('p', { className: 'tip' }, t('hoLoading')))
+      const p = info.project || {}
+      const same = p.pkg && p.framework
+      const opts = [...(same ? [['same', t('hoSame', { label: p.label })]] : []), ...FW_LIST.map((k) => [k, k === 'html' ? t('hoHtml') : FW_LABEL[k]])]
+      const label = (opts.find(([k]) => k === fw) || ['', ''])[1]
+      return box(
+        h('p', { className: 'tip' }, t('hoTip')),
+        h('div', { className: 'bd' },
+          h('div', { className: 'row' }, h('label', null, t('hoFw')),
+            ...opts.map(([k, l]) => h('button', { key: k, className: 'opt' + (fw === k ? ' on' : ''), onClick: () => setFw(k) }, h('i'), h('span', null, l)))),
+          h('div', { className: 'row' }, h('label', null, t('hoDest')),
+            h('input', { type: 'text', value: dest, spellCheck: false, 'aria-label': t('hoDest'), onChange: (e) => setDest(e.target.value) })),
+          count > 1 && cur ? h('div', { className: 'row' }, h('label', null, t('hoScope')),
+            h('div', { className: 'seg' },
+              h('button', { className: one ? '' : 'on', onClick: () => setOne(false) }, t('hoAll', { n: count })),
+              h('button', { className: one ? 'on' : '', onClick: () => setOne(true) }, t('hoOne')))) : null),
+        h('footer', null,
+          h('button', { className: 'go', disabled: !fw || !dest.trim(), onClick: () => onGo({ fw, label, dest: dest.trim(), only: one && count > 1 ? cur : '' }) }, h(I.code), h('span', null, t('hoGo')))))
+    }
+
     /** 菜单开着时：点外面、按 Esc 关掉 */
     function useDismiss(open, setOpen, ref) {
       useEffect(() => {
@@ -2873,6 +3154,8 @@ window.__ModuleLoader__.load({
       const [ckCount, setCkCount] = useState(0) // 最近一次体检（模型干完活会悄悄查一次）有几个问题：面板关着时标在按钮上
       const [reveal, setReveal] = useState(null) // 画布上要露出来的那一屏 { key, n }（体检里点了一条）
       const [demo, setDemo] = useState(null) // 演示：{ stack: [屏…], layers: [{ id, key, dir, shown }] }
+      const [pane, setPane] = useState('') // 右边的面板：tweaks 调节滑块、systems 品牌设计系统、handoff 转成代码
+      const [tw, setTw] = useState({}) // 拖过的滑块：id → 值（还没写进文件）
       const apis = useRef(new Map()) // 屏 → 截图用的接口
       const cmpRef = useRef(null)
       const [box, setBox] = useState({ w: 0, h: 0 })
@@ -2935,6 +3218,20 @@ window.__ModuleLoader__.load({
       // 远程看（手机走外网等）：本地文件的预览由服务端打包传过来（见 Screen），目录里改了哪些文件也一起带过去
       const remote = fileTarget && sid ? { sid, at: st.changedAt || 0, files: st.changedFiles || [], changes: st.changes || [] } : null
 
+      // 调节滑块：tweaks.json 改了（写回了、模型改了）就把和文件一样的值放掉；换了设计全放掉
+      const tweaks = (fileTarget && st.tweaks) || null
+      const tlist = (tweaks && tweaks.list) || []
+      const tsig = JSON.stringify(tlist.map((k) => [k.id, k.value]))
+      useEffect(() => {
+        setTw((c) => {
+          const out = {}
+          for (const [id, v] of Object.entries(c)) { const k = tlist.find((x) => x.id === id); if (k && String(k.value) !== String(v)) out[id] = v }
+          return Object.keys(out).length === Object.keys(c).length ? c : out
+        })
+      }, [tsig])
+      useEffect(() => { setTw({}) }, [site])
+      const tweak = Object.keys(tw).length ? tweakMsg(tlist, tw) : null
+
       // 看旧版本：画布上换成那一版的几屏（按现在的顺序，那一版独有的接在后面）
       const vbase = ver ? `${origin}/__dsh_design__/v/${ver.n}/` : ''
       const shown = ver
@@ -3238,6 +3535,7 @@ window.__ModuleLoader__.load({
           styleEdit: styleEdit && !sc.v,
           styleSel: sty && sty.key === sc.key ? sty.selector : '',
           styleCss: sty && sty.key === sc.key ? sty.live : null,
+          tweak: sc.v ? null : tweak,
           onStylePick: (p) => onStylePick(sc, p),
           onStyleCancel: () => setStyleEdit(false),
           dark,
@@ -3503,6 +3801,39 @@ window.__ModuleLoader__.load({
 
       const toggleDemo = () => (demo ? setDemo(null) : startDemo())
       const toggleHist = () => { setHist(!hist); setPanel(false); setStyles(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+      // 右边同一时间只开一个面板：别的开了，这几个关掉；开这几个时别的关掉
+      const oldOpen = !!(panel || styles || hist || phone || ck || styleEdit)
+      useEffect(() => { if (oldOpen) setPane('') }, [oldOpen])
+      const openPane = (p) => {
+        const next = pane === p ? '' : p
+        if (next) { setPanel(false); setStyles(false); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+        setPane(next)
+      }
+      const setTweak = (k, v) => setTw((c) => {
+        if (String(k.value) === String(v)) { const out = { ...c }; delete out[k.id]; return out }
+        return { ...c, [k.id]: v }
+      })
+      const saveTweaks = async () => {
+        try {
+          // 带上拖的是哪套设计：请求路上会话换了设计，服务端就不写
+          const r = await post('tweak', { session: sid, root: st && st.target ? st.target.root : '', values: tw })
+          if (!r.ok) return say(r.reason === 'busy' ? t('styleBusyTip') : r.reason === 'moved' ? t('twMoved') : t('twNoWrite'))
+          if (r.missed && r.missed.length) say(t('twMissed', { names: r.missed.map((x) => x.label).join(t('sep')) }))
+          else showFlash(t('twSaved', { n: r.changed.length }))
+        } catch (e) {
+          say(t('failed', { msg: e.message }))
+        }
+      }
+      const doHandoff = ({ fw, label, dest, only }) => {
+        insert(t('hoText', {
+          fw: label,
+          key: fw,
+          dest,
+          scope: only ? t('hoScopeOne', { name: only }) : t('hoAll', { n: screens.length || 1 }),
+          only: only ? `，screens: ["${only}"]` : '',
+        }), 'insertedSend')
+        setPane('')
+      }
       const togglePhone = () => { setPhone(!phone); setPanel(false); setStyles(false); setHist(false); closeCheck(); setStyleEdit(false) }
       const reload = () => setReloadSeq((x) => x + 1)
 
@@ -3524,9 +3855,11 @@ window.__ModuleLoader__.load({
         h('button', { className: 'ddp-btn o2' + (demo ? ' sel' : ''), title: t('demo'), disabled: !url || !!ver, onClick: toggleDemo }, h(I.play)),
         h(KindMenu, { t, kind, open: menu, setOpen: setMenu, onPick: (k) => { setMenu(false); change({ kind: k }) } }),
         h('button', { className: 'ddp-btn' + (panel ? ' sel' : '') + (tokens.length && !panel ? ' has' : ''), title: t('tokens'), onClick: () => { setPanel(!panel); setStyles(false); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) } }, h(I.palette)),
+        h('button', { className: 'ddp-btn o2' + (pane === 'tweaks' ? ' sel' : '') + (tlist.length && pane !== 'tweaks' ? ' has' : ''), title: t('tweaks'), disabled: !fileTarget || !!ver, onClick: () => openPane('tweaks') }, h(I.dial)),
         h('button', { className: 'ddp-btn o2' + (ck ? ' sel' : ''), title: ckCount && !ck ? t('checkCount', { n: ckCount }) : t('checkTip'), disabled: checkOff, onClick: () => (ck ? closeCheck() : runCheck()) },
           h(I.stetho), ckCount && !ck && !checkOff ? h('span', { className: 'bdg' }, ckCount > 99 ? '99+' : String(ckCount)) : null),
         h('button', { className: 'ddp-btn o2' + (hist || ver ? ' sel' : ''), title: t('history'), disabled: !fileTarget, onClick: toggleHist }, h(I.history)),
+        h('button', { className: 'ddp-btn o2' + (pane === 'handoff' ? ' sel' : ''), title: t('handoff'), disabled: !url || !!ver, onClick: () => openPane('handoff') }, h(I.code)),
         h(ExportMenu, { t, kind, count: shown.length, open: exMenu, setOpen: setExMenu, onPick: (m) => doExport(m), disabled: !url }),
         anyDark || dark ? h('button', { className: 'ddp-btn o1' + (dark ? ' sel' : ''), title: t('dark'), onClick: () => setDark(!dark) }, h(I.moon)) : null,
         h('button', { className: 'ddp-btn o1' + (phone ? ' sel' : '') + (phoneOn && !phone ? ' has' : ''), title: t('phone'), disabled: !url, onClick: togglePhone }, h(I.scan)),
@@ -3536,6 +3869,9 @@ window.__ModuleLoader__.load({
           ['o2', I.play, t('demoShort'), !!demo, !url || !!ver, toggleDemo],
           ['o2', I.stetho, t('check'), !!ck, checkOff, () => (ck ? closeCheck() : runCheck())],
           ['o2', I.history, t('history'), hist || !!ver, !fileTarget, toggleHist],
+          ['o2', I.dial, t('tweaks'), pane === 'tweaks', !fileTarget || !!ver, () => openPane('tweaks')],
+          ['o2', I.code, t('handoff'), pane === 'handoff', !url || !!ver, () => openPane('handoff')],
+          ['', I.library, t('systems'), pane === 'systems', false, () => openPane('systems')],
           anyDark || dark ? ['o1', I.moon, t('dark'), dark, false, () => setDark(!dark)] : null,
           ['o1', I.scan, t('phone'), phone, !url, togglePhone],
           ['o1', I.refresh, t('refresh'), false, false, reload],
@@ -3595,6 +3931,39 @@ window.__ModuleLoader__.load({
       })
       const root = (...kids) => h('div', rootProps, ...kids, dropLayer, fileInput)
 
+      // 调节滑块 / 品牌设计系统 / 转成代码（右边的面板）
+      const sidePane = () => {
+        if (pane === 'tweaks') {
+          return h(TweaksPanel, {
+            t,
+            tw: tweaks,
+            live: tw,
+            write: busy ? { ok: false, tip: t('styleBusyTip') } : { ok: true, tip: t('twSaveTip') },
+            onSet: setTweak,
+            onReset: () => setTw({}),
+            onAsk: () => insert(formatTweaks(t, tlist, tw), 'insertedSend'),
+            onSave: saveTweaks,
+            onMake: (errs) => insert(errs && errs.length ? t('twFixText', { errs: errs.join('；') }) + '\n' : t('twMakeText') + '\n', 'insertedSend'),
+            onClose: () => setPane(''),
+          })
+        }
+        if (pane === 'systems') {
+          return h(SystemsPanel, {
+            t,
+            rev: (st && st.turns) || 0,
+            hasDesign: !!url,
+            onExtract: (src) => insert(t('sysExtractText', { src }) + '\n', 'insertedSend'),
+            onApply: (x) => insert(t('sysApplyText', { name: x.name, dir: x.dir }) + '\n', 'insertedSend'),
+            onSay: say,
+            onClose: () => setPane(''),
+          })
+        }
+        if (pane === 'handoff') {
+          return h(HandoffPanel, { t, sid, root: fileTarget ? st.target.root : '', fileTarget, count: screens.length, cur: (curScreen && curScreen.key) || focus, onGo: doHandoff, onClose: () => setPane('') })
+        }
+        return null
+      }
+
       if (!url) {
         if (st ? st.loading : !waited) return root(h('div', { className: 'ddp-stage', ref: stageRef }))
         if (busy) {
@@ -3618,7 +3987,9 @@ window.__ModuleLoader__.load({
             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: () => {} }),
-            h('p', { className: 'ddp-refline' }, t('refEmpty'), ' · ', h('button', { className: 'lk', onClick: pickRef }, t('refChoose')))),
+            h('p', { className: 'ddp-refline' }, t('refEmpty'), ' · ', h('button', { className: 'lk', onClick: pickRef }, t('refChoose'))),
+            h('p', { className: 'ddp-refline' }, t('sysEmptyLine'), ' · ', h('button', { className: 'lk', onClick: () => openPane('systems') }, t('sysOpen')))),
+          pane === 'systems' ? sidePane() : null,
           toast ? h('div', { className: 'ddp-toast' }, h('span', null, toast.text)) : null)
       }
 
@@ -3644,6 +4015,7 @@ window.__ModuleLoader__.load({
                     picking: false,
                     demo: isTop,
                     dark,
+                    tweak,
                     zoom: z,
                     reloadSeq,
                     onNav: isTop ? demoGo : undefined,
@@ -3678,6 +4050,7 @@ window.__ModuleLoader__.load({
               picking,
               textEdit,
               dark,
+              tweak,
               quietPick: true,
               zoom: z,
               reloadSeq,
@@ -3725,7 +4098,7 @@ window.__ModuleLoader__.load({
           sel: sel || focus,
           labelOf,
           reveal,
-          inset: ck || styleEdit || panel || styles ? 296 : 0, // 右边的面板 276 宽，离边 10
+          inset: ck || styleEdit || panel || styles || pane ? 296 : 0, // 右边的面板 276 宽，离边 10
           render: (sc, z) => renderScreen(sc, z, false),
           flows,
           onSelect: setSel,
@@ -3735,7 +4108,7 @@ window.__ModuleLoader__.load({
         const fill = kind === 'web'
         const [dw, dh] = deviceBox(kind, size)
         // 右边开着面板（体检、调样式、设计规范、换风格）：手机这类有外框的让到面板左边（侧栏够宽时），别被挡住
-        const aside = !fill && (ck || styleEdit || panel || styles) && box.w - 296 >= 240 ? 296 : 0
+        const aside = !fill && (ck || styleEdit || panel || styles || pane) && box.w - 296 >= 240 ? 296 : 0
         const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - aside - 32) / dw, (box.h - 32 - (ver || hintTop ? 46 : 0)) / dh))
         const one = ver ? shown.find((x) => x.key === focus) || shown[0] || { key: focus, url, label: st.label } : { key: focus, url, label: st.label }
         body = h('div', { className: 'ddp-single', style: aside ? { right: aside } : undefined },
@@ -3756,7 +4129,7 @@ window.__ModuleLoader__.load({
           busy ? h('div', { className: 'ddp-glow' }) : null,
           busy ? h('div', { className: 'ddp-ring' }) : null,
           // 右边开着面板时提示条居中在面板左边那块，别被面板盖住一半
-          hintText ? h('div', { className: 'ddp-hint' + ((ck || styleEdit || panel || styles) && box.w - 296 >= 240 ? ' side' : '') }, hintText) : null,
+          hintText ? h('div', { className: 'ddp-hint' + ((ck || styleEdit || panel || styles || pane) && box.w - 296 >= 240 ? ' side' : '') }, hintText) : null,
           ck ? h(CheckPanel, { t, ck, onFocus: focusIssue, onFix: fixIssues, onAgain: runCheck, onClose: closeCheck }) : null,
           styleEdit ? h(StylePanel, {
             t,
@@ -3770,7 +4143,8 @@ window.__ModuleLoader__.load({
             onClose: () => setStyleEdit(false),
           }) : null,
           panel ? h(TokensPanel, { t, tokens, onPick: (tok) => insert(formatToken(tok, stRef.current)), onAsk: () => insert(t('tokensAskText') + '\n', 'insertedSend'), onRef: pickRef,
-            onStyles: () => { setPanel(false); setStyles(true) }, onClose: () => setPanel(false) }) : null,
+            onStyles: () => { setPanel(false); setStyles(true) }, onSystems: () => openPane('systems'), onClose: () => setPanel(false) }) : null,
+          pane ? sidePane() : null,
           styles ? h(StylesPanel, { t, onPick: (x) => { setStyles(false); insert(formatStyle(t, x, true), 'insertedSend') }, onClose: () => setStyles(false) }) : null,
           phone ? h(PhonePanel, {
             t,

package/lib/core.js

@@ -519,7 +519,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
 
   function persist(id, st) {
     if (!store) return
-    if (st.target) saved[id] = { target: st.target, source: st.source, design: st.design, kind: st.kind, size: st.size, view: st.view, routes: st.routes, order: st.target.kind === 'file' ? st.screens : undefined, at: now() }
+    if (st.target) saved[id] = { target: st.target, source: st.source, design: st.design, kind: st.kind, size: st.size, view: st.view, routes: st.routes, order: st.target.kind === 'file' ? st.screens : undefined, cwd: cwds.get(id) || (saved[id] && saved[id].cwd) || undefined, at: now() }
     else delete saved[id]
     // 只留最近 200 个会话
     const ids = Object.keys(saved)
@@ -573,7 +573,8 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
   }
 
   function cwdOf(id) {
-    return cwds.get(id) || os.homedir()
+    // DSH 重启后还没跑过工具时内存里没有，用缓存里记的（右侧栏「转成代码」要靠它找项目）
+    return cwds.get(id) || (saved[id] && saved[id].cwd) || os.homedir()
   }
 
   /**
@@ -759,7 +760,10 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
         break
       }
       case 'tool/result': {
-        if (d.meta && typeof d.meta.cwd === 'string' && d.meta.cwd) cwds.set(sessionId, d.meta.cwd)
+        if (d.meta && typeof d.meta.cwd === 'string' && d.meta.cwd) {
+          cwds.set(sessionId, d.meta.cwd)
+          if (st.target && saved[sessionId] && saved[sessionId].cwd !== d.meta.cwd) persist(sessionId, st)
+        }
         st.writing = ''
         if (!live) break
         const pending = st.pendingHtml
@@ -838,10 +842,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     const st = states.get(id)
     const t = st && st.target
     if (!t || t.kind !== 'file') return { ok: false, reason: 'not-file' }
-    // 同一个目录别的会话的模型正在干活也不改（它可能正整份重写这个文件）；经软链接打开的同一个目录也算
-    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' }
+    if (busyRoot(t.root)) 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' }
@@ -857,6 +858,31 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     return { ok: true, file: name }
   }
 
+  /** 这个目录有没有会话的模型正在干活（它可能正整份重写文件，这时改了会被盖掉）；经软链接打开的同一个目录也算 */
+  function busyRoot(root) {
+    const realOf = (p) => { try { return fs.realpathSync(p) } catch { return p } }
+    const mine = realOf(root)
+    for (const o of states.values()) if (o.turn && o.target && o.target.kind === 'file' && (o.target.root === root || realOf(o.target.root) === mine)) return true
+    return false
+  }
+
+  /**
+   * 改设计目录里的几个文件（调节滑块写回：tokens.css、每屏 <html> 上的属性、tweaks.json）：fn(目录) → { ok, files, … }；
+   * 改前改后各存一版。开发服务器的页面、模型正在干活时不改；给了 expectRoot 而现在看的不是它也不改
+   */
+  function editDir(id, fn, label, expectRoot) {
+    const st = states.get(id)
+    const t = st && st.target
+    if (!t || t.kind !== 'file') return { ok: false, reason: 'not-file' }
+    // 右侧栏发请求时看的是哪套设计：这期间换了设计就别写，免得写进另一套
+    if (expectRoot !== undefined && t.root !== expectRoot) return { ok: false, reason: 'moved' }
+    if (busyRoot(t.root)) return { ok: false, reason: 'busy' }
+    keepVersion(st, '')
+    const r = fn(t.root)
+    if (r && r.ok && r.files && r.files.length) keepVersion(st, typeof label === 'function' ? label(r) : label)
+    return r
+  }
+
   /** 版本列表（新的在前）；开发服务器没有版本（项目自己有 git） */
   function versions(id) {
     const st = states.get(id)
@@ -881,7 +907,7 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     const { target, url, label, source, rev, openRev, turn, writing, changedAt, kind, size, view, origin } = st
     const file = target.kind === 'file'
     return {
-      target: file ? { kind: 'file', file: target.file } : { kind: 'proxy', port: target.port, path: target.path },
+      target: file ? { kind: 'file', file: target.file, root: target.root } : { kind: 'proxy', port: target.port, path: target.path },
       url,
       label,
       source,
@@ -908,5 +934,5 @@ export function createTracker({ open, skipPorts = () => new Set(), now = Date.no
     }
   }
 
-  return { observe, setTarget, setView, clear, changed, snapshot, cwdOf, stateOf, versions, restoreVersion, editText, editStyle, keepVersion: (id, label) => keepVersion(stateOf(id), label) }
+  return { observe, setTarget, setView, clear, changed, snapshot, cwdOf, stateOf, versions, restoreVersion, editText, editStyle, editDir, keepVersion: (id, label) => keepVersion(stateOf(id), label) }
 }