design-playbook 0.21.0 → 0.21.1

package/README.md

@@ -101,6 +101,17 @@ pi install npm:pi-mcp-adapter
 
 `<pkg>` is the installed package root — `~/.pi/agent/npm/node_modules/design-playbook` for a user install, `.pi/npm/node_modules/design-playbook` for a project install. Evidence also needs `pip install playwright && playwright install chromium`.
 
+## Install on other agents
+
+Generate adapter files for Cursor, Gemini CLI, OpenCode, Windsurf, GitHub Copilot, or any of 22 Tier-3 agents:
+
+```bash
+npx design-playbook init <agent>   # e.g. cursor, gemini-cli, windsurf
+npx design-playbook --list         # all 29 agents, shows which have renderers
+```
+
+See the root [README](../../README.md#install-on-other-agents) for the tier table and capability notes.
+
 ## Stack with other skills
 
 | Package | Use for |

package/codex/AGENTS.md

@@ -1,3 +1,4 @@
+<!-- generated-by design-playbook v0.21.1 -->
 # design-playbook for Codex
 
 ## Install (path of record)

package/commands/run-review.md

@@ -20,7 +20,7 @@ Scan user-side `.scratch/<run>/` (not monorepo `dogfood/*` globs). **Include** o
 Ledger row shape: **ui-evaluator** step 2 (do not restate).
 
 ```
-禁止:
+Prohibited:
 - no new run ledger
 - no prose lessons / narrative "learning"
 - no auto-writeback to baseline

package/lib/cli.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+'use strict'
+/**
+ * design-playbook CLI shim (ADR-0042).
+ *
+ * Locates python3/python and delegates to
+ * packages/design-playbook/scripts/generate_adapter.py with passthrough args.
+ *
+ *   npx design-playbook --list
+ *   npx design-playbook init <agent>
+ *   npx design-playbook <agent> --dry-run
+ */
+const { execFileSync } = require('node:child_process')
+const path = require('node:path')
+
+const SCRIPT = path.join(__dirname, '..', 'scripts', 'generate_adapter.py')
+
+function findPython() {
+  for (const bin of ['python3', 'python']) {
+    try {
+      const out = execFileSync(bin, ['--version'], { encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'] })
+      if (/python\s+3\./i.test(out)) return bin
+    } catch {}
+  }
+  return null
+}
+
+const python = findPython()
+if (!python) {
+  process.stderr.write(
+    'error: design-playbook requires Python 3 (python3 or python).\n' +
+    'Install Python 3 from https://python.org and re-run.\n'
+  )
+  process.exit(1)
+}
+
+// Strip leading "init" if invoked as `design-playbook init <agent>` so both
+// forms are equivalent:  `design-playbook init codex` == `design-playbook codex`
+const rawArgs = process.argv.slice(2)
+const args = rawArgs[0] === 'init' ? rawArgs.slice(1) : rawArgs
+
+try {
+  execFileSync(python, [SCRIPT, ...args], { stdio: 'inherit' })
+} catch (err) {
+  process.exit(err.status ?? 1)
+}

package/mcp/evidence/README.md

@@ -8,7 +8,7 @@ Runtime for the optional **observe\*** step. Writes capture artifacts only — *
 | --- | --- |
 | Unset | Artifact paths resolve under the **MCP process cwd** |
 | `"."` (default in package `.mcp.json`) | Same — relative to process cwd, **not** the chat workspace root |
-| Absolute path | Preferred for cross-repo dogfood: set to the run root (e.g. `D:/…/nmg_bup_h5/.scratch/playbook-smoke/<run>`) so `evidence/L6.*.png` lands next to `manifest.jsonl` |
+| Absolute path | Preferred for cross-repo dogfood: set to the run root (e.g. `/path/to/host-app/.scratch/playbook-smoke/<run>`) so `evidence/L6.*.png` lands next to `manifest.jsonl` |
 
 Relative values are resolved with `Path(value).resolve()` at process start semantics (cwd-relative). If captures appear under the plugin monorepo instead of the host run, check cwd and this env — the tool also returns **`written_path`** (absolute) so mis-roots are obvious without a filesystem search.
 
@@ -16,7 +16,7 @@ Example (host run):
 
 ```json
 "env": {
-  "DESIGN_PLAYBOOK_RUN_ROOT": "D:/code_space/app/.scratch/my-run"
+  "DESIGN_PLAYBOOK_RUN_ROOT": "/path/to/app/.scratch/my-run"
 }
 ```
 

package/mcp/evidence/static_handoff_page.html

@@ -12,7 +12,7 @@
   *{box-sizing:border-box}
   body{margin:0;background:var(--bg);color:var(--ink);
     font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
-    "Hiragino Sans GB","Microsoft YaHei",sans-serif;}
+    "Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;}
   .wrap{max-width:960px;margin:0 auto;padding:32px 20px 64px;}
   header{border-bottom:2px solid var(--primary);padding-bottom:16px;margin-bottom:24px;}
   h1{margin:0;font-size:22px;letter-spacing:-.01em;}

package/mcp/preview/control.css

@@ -40,9 +40,14 @@
   --dpb-shadow-pin: 0 3px 8px rgba(37,99,235,.35), 0 1px 2px rgba(0,0,0,.1);
   --dpb-ring-accent: rgba(37,99,235,.25);
   --dpb-ring-danger: rgba(225,29,72,.25);
+  --dpb-ease-spring: cubic-bezier(.16,1,.3,1);
+  --dpb-ease-pulse: cubic-bezier(0,0,.2,1);
+  --dpb-duration-spring: 200ms;
+  --dpb-duration-quick: 120ms;
   --dpb-radius: 8px;
   --dpb-topbar-h: 48px;
   --dpb-rail-w: 352px;
+  --dpb-spec-rail-w: 320px;
 }
 #dpb-root[data-theme="dark"],
 #dpb-float-root[data-theme="dark"],
@@ -109,7 +114,7 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
   background: var(--dpb-surface); color: var(--dpb-soft);
   border: 1px solid var(--dpb-line-strong); border-bottom-width: 2px;
 }
-.i18n { transition: opacity .15s ease; }
+.i18n { transition: opacity var(--dpb-duration-spring) var(--dpb-ease-spring); }
 
 /* ---- header ---- */
 .dpb-header {
@@ -138,8 +143,7 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
   background: var(--dpb-surface); border: 1px solid var(--dpb-line); white-space: nowrap;
 }
 .dpb-header-center {
-  position: absolute; left: 50%; transform: translateX(-50%);
-  display: flex; align-items: center; gap: 12px;
+  display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0;
 }
 .dpb-header-div { width: 1px; height: 16px; background: var(--dpb-line); flex: 0 0 auto; }
 .dpb-seg {
@@ -150,7 +154,7 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
   appearance: none; cursor: pointer; border: 0; background: transparent;
   display: inline-flex; align-items: center; gap: 6px;
   height: 26px; padding: 0 9px; border-radius: 6px;
-  color: var(--dpb-soft); font: 500 12px/1 inherit; transition: all .15s ease;
+  color: var(--dpb-soft); font: 500 12px/1 inherit; transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-seg button:hover { color: var(--dpb-ink); }
 .dpb-seg button[aria-pressed="true"] {
@@ -158,13 +162,13 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
   font-weight: 600; box-shadow: var(--dpb-shadow-tool);
 }
 .dpb-seg button:focus-visible { outline: 2px solid var(--dpb-accent); outline-offset: 1px; }
-.dpb-header-right { display: flex; align-items: center; gap: 4px; }
+.dpb-header-right { display: flex; align-items: center; gap: 4px; position: relative; z-index: 2; }
 .dpb-header-right > button {
   appearance: none; cursor: pointer; border: 0;
   display: inline-flex; align-items: center; gap: 6px;
   height: 32px; padding: 0 10px; border-radius: 8px;
   background: transparent; color: var(--dpb-soft); font: 500 12px/1 inherit;
-  transition: all .15s ease;
+  transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-header-right > button:hover { background: var(--dpb-surface); color: var(--dpb-ink); }
 .dpb-header-right > button:focus-visible { outline: 2px solid var(--dpb-accent); outline-offset: 1px; }
@@ -174,14 +178,31 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
   background: var(--dpb-accent); color: var(--dpb-accent-ink);
   font-weight: 600; padding: 0 14px;
 }
-.dpb-approve-btn:hover { background: var(--dpb-accent-deep); box-shadow: var(--dpb-shadow-glow); color: var(--dpb-accent-ink); }
-.dpb-approve-btn:active { transform: scale(.96); }
+.dpb-approve-btn:hover { background: var(--dpb-accent-deep); box-shadow: var(--dpb-shadow-glow); color: var(--dpb-accent-ink); transform: translateY(-1px); }
+.dpb-approve-btn:active { transform: translateY(.5px) scale(.97); }
+.dpb-header-right > button:active,
+.dpb-header-right .dpb-btn-secondary:active,
+.dpb-seg button:active,
+.dpb-toolbar button:active,
+.dpb-filter-tabs button:active,
+.dpb-anchor:active,
+.dpb-anchor-rm:active,
+.dpb-anchor-resolve:active,
+.dpb-spec-check-row:active,
+.dpb-status-approve:active,
+.dpb-btn:active,
+.dpb-tag:active,
+.dpb-comment-box button:active,
+.dpb-modal-head button:active,
+.dpb-reopen-tab:active {
+  transform: translateY(.5px) scale(.97);
+}
 .dpb-approve-btn kbd { background: var(--dpb-highlight); color: var(--dpb-accent-ink); border-color: transparent; border-bottom-width: 1px; }
 .dpb-header-right .dpb-btn-secondary {
   appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
   height: 32px; padding: 0 10px; border-radius: 8px;
   background: transparent; border: 1px solid var(--dpb-line-strong); color: var(--dpb-soft);
-  font: 500 12px/1 inherit; transition: all .15s ease;
+  font: 500 12px/1 inherit; transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-header-right .dpb-btn-secondary:hover { background: var(--dpb-surface); color: var(--dpb-ink); }
 
@@ -199,6 +220,74 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
 
 /* ---- workspace ---- */
 .dpb-workspace { flex: 1 1 auto; display: flex; min-width: 0; position: relative; overflow: hidden; }
+.dpb-spec-panel {
+  width: var(--dpb-spec-rail-w); flex: 0 0 auto; min-width: 0;
+  display: flex; flex-direction: column; overflow: hidden;
+  background: color-mix(in srgb, var(--dpb-elev) 96%, transparent);
+  border-right: 1px solid var(--dpb-line); z-index: 35;
+  box-shadow: 6px 0 28px -8px rgba(15,23,42,.08);
+  transition: margin-left .3s var(--dpb-ease-spring), opacity var(--dpb-duration-spring) var(--dpb-ease-spring);
+}
+#dpb-root[data-theme="dark"] .dpb-spec-panel { box-shadow: 6px 0 28px rgba(0,0,0,.28); }
+.dpb-spec-panel.dpb-collapsed { margin-left: calc(-1 * var(--dpb-spec-rail-w)); opacity: 0; pointer-events: none; }
+.dpb-spec-head {
+  height: 48px; flex: 0 0 auto; padding: 0 14px;
+  display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid var(--dpb-line);
+}
+.dpb-spec-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.dpb-spec-title-row svg { color: var(--dpb-accent); flex: 0 0 auto; }
+.dpb-spec-title-row h2 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
+.dpb-spec-list {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 10px; padding: 12px;
+}
+.dpb-spec-card {
+  padding: 12px; border-radius: 10px;
+  background: var(--dpb-bg); border: 1px solid var(--dpb-line);
+  transition: border-color var(--dpb-duration-spring) var(--dpb-ease-spring), background var(--dpb-duration-spring) var(--dpb-ease-spring), box-shadow var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-spring) var(--dpb-ease-spring);
+}
+.dpb-spec-card:hover { border-color: var(--dpb-line-strong); background: var(--dpb-surface); transform: translateY(-1px); }
+.dpb-spec-card.dpb-checked {
+  border-color: var(--dpb-accent-chip-border);
+  background: color-mix(in srgb, var(--dpb-accent-wash) 72%, var(--dpb-bg));
+}
+.dpb-spec-check-row {
+  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;
+  color: var(--dpb-ink); font: 650 12px/1.45 inherit; cursor: pointer;
+  transition: transform var(--dpb-duration-quick) var(--dpb-ease-spring);
+}
+.dpb-spec-check-row input {
+  appearance: none; width: 14px; height: 14px; margin: 2px 0 0;
+  border-radius: 4px; border: 1px solid var(--dpb-line-strong);
+  background: var(--dpb-elev); display: grid; place-items: center;
+}
+.dpb-spec-check-row input::after {
+  content: ""; width: 7px; height: 4px; border-left: 2px solid var(--dpb-accent-ink);
+  border-bottom: 2px solid var(--dpb-accent-ink); transform: rotate(-45deg) scale(0);
+  transition: transform var(--dpb-duration-quick) var(--dpb-ease-spring);
+}
+.dpb-spec-check-row input:checked { background: var(--dpb-accent); border-color: var(--dpb-accent); }
+.dpb-spec-check-row input:checked::after { transform: rotate(-45deg) scale(1); }
+.dpb-spec-check-row input:focus-visible { outline: 2px solid var(--dpb-accent); outline-offset: 2px; }
+.dpb-spec-card p { margin: 6px 0 0 22px; color: var(--dpb-soft); font-size: 11.5px; line-height: 1.5; }
+.dpb-spec-empty {
+  margin: 0; padding: 14px; border-radius: 10px;
+  background: var(--dpb-bg); border: 1px dashed var(--dpb-line-strong);
+  color: var(--dpb-soft); font-size: 12px; text-align: center;
+}
+#dpb-criteria-toggle[hidden] { display: none !important; }
+#dpb-criteria-toggle[aria-expanded="true"] {
+  background: var(--dpb-accent-wash);
+  color: var(--dpb-accent);
+  box-shadow: var(--dpb-shadow-tool);
+}
+#dpb-criteria-count { font: 600 11px/1 ui-monospace, Consolas, monospace; }
+#dpb-theme-icon {
+  width: 16px; height: 16px;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+#dpb-theme-icon svg { width: 16px; height: 16px; display: block; }
 .dpb-canvas {
   flex: 1 1 auto; position: relative; overflow: auto;
   display: flex; align-items: center; justify-content: center; padding: 48px;
@@ -206,7 +295,7 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
   background-image: radial-gradient(var(--dpb-line-strong) 1.2px, transparent 1.2px);
   background-size: 24px 24px;
 }
-.dpb-artboard-wrap { position: relative; flex: 0 0 auto; transition: transform .25s cubic-bezier(.16,1,.3,1); }
+.dpb-artboard-wrap { position: relative; flex: 0 0 auto; transition: transform var(--dpb-duration-spring) var(--dpb-ease-spring); }
 .dpb-artboard-wrap.dpb-no-anim { transition: none; }
 .dpb-artboard {
   position: relative; width: 1024px; height: 720px;
@@ -221,7 +310,9 @@ body.dpb-shell { overflow: hidden; height: 100vh; }
 .dpb-draw-layer {
   position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: visible;
 }
-body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
+body.dpb-tool-draw .dpb-draw-layer,
+body.dpb-tool-box .dpb-draw-layer,
+body.dpb-tool-ruler .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 .dpb-draw-layer .dpb-draw-path {
   fill: none; stroke: var(--dpb-draw-stroke); stroke-width: 2.4;
   stroke-dasharray: 8 4; stroke-linecap: round; stroke-linejoin: round; opacity: .92;
@@ -231,34 +322,63 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 .dpb-draw-layer .dpb-draw-badge text {
   fill: var(--dpb-draw-ink); font: 700 11px/1 system-ui, sans-serif;
 }
+.dpb-draw-layer .dpb-box-rect {
+  fill: var(--dpb-accent-wash); stroke: var(--dpb-accent); stroke-width: 2;
+  stroke-dasharray: 6 4; opacity: .9;
+}
+.dpb-draw-layer .dpb-box-live { opacity: .65; }
+.dpb-draw-layer .dpb-box-badge rect,
+.dpb-draw-layer .dpb-ruler-badge rect {
+  fill: var(--dpb-accent); stroke: var(--dpb-highlight); stroke-width: 1;
+}
+.dpb-draw-layer .dpb-box-badge text,
+.dpb-draw-layer .dpb-ruler-badge text {
+  fill: var(--dpb-accent-ink); font: 700 11px/1 ui-monospace, Consolas, monospace;
+}
+.dpb-draw-layer .dpb-ruler-hover {
+  fill: var(--dpb-accent-wash); stroke: var(--dpb-accent); stroke-width: 1.5;
+  stroke-dasharray: 4 3; pointer-events: none;
+}
+.dpb-draw-layer .dpb-ruler-line {
+  stroke: var(--dpb-accent); stroke-width: 2; stroke-linecap: round; pointer-events: none;
+}
+.dpb-draw-layer .dpb-ruler-point { fill: var(--dpb-accent); stroke: var(--dpb-elev); stroke-width: 2; pointer-events: none; }
 .dpb-pins-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
 .dpb-free-pin {
   position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
   border-radius: 999px; background: var(--dpb-accent); color: var(--dpb-accent-ink);
   display: flex; align-items: center; justify-content: center;
   font: 700 12px/1 system-ui, sans-serif; box-shadow: var(--dpb-shadow-pin);
-  pointer-events: auto; cursor: pointer; transition: transform .15s ease;
-  animation: dpb-toast-in .25s cubic-bezier(.16,1,.3,1);
+  pointer-events: auto; cursor: pointer;
+  transition: transform var(--dpb-duration-spring) var(--dpb-ease-spring), box-shadow var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
-.dpb-free-pin:hover { transform: scale(1.12); }
+.dpb-free-pin:hover { transform: translateY(-1px) scale(1.08); }
+.dpb-free-pin:active { transform: translateY(.5px) scale(.97); }
 .dpb-free-pin.dpb-resolved { background: var(--dpb-success); opacity: .65; }
+.dpb-free-pin.dpb-pin-drop { animation: dpb-pin-drop 380ms var(--dpb-ease-spring) both; }
+.dpb-free-pin.dpb-active::after {
+  content: ""; position: absolute; inset: -4px; border-radius: inherit;
+  border: 2px solid var(--dpb-ring-accent); animation: dpb-pulse-ring 1.8s var(--dpb-ease-pulse) infinite;
+}
 
 /* ---- left toolbar ---- */
 .dpb-toolbar {
-  position: fixed; left: 16px; top: 64px; z-index: 40;
+  position: fixed; left: calc(var(--dpb-spec-rail-w) + 16px); top: 64px; z-index: 40;
   width: 48px; padding: 10px 0; border-radius: 12px;
   display: flex; flex-direction: column; align-items: center; gap: 6px;
   background: color-mix(in srgb, var(--dpb-elev) 95%, transparent);
   backdrop-filter: blur(8px);
   border: 1px solid var(--dpb-line); box-shadow: var(--dpb-shadow-tool);
+  transition: left .3s var(--dpb-ease-spring);
 }
+#dpb-root.dpb-spec-collapsed .dpb-toolbar { left: 16px; }
 .dpb-toolbar button {
   appearance: none; cursor: pointer; border: 0; background: transparent;
   width: 32px; height: 32px; border-radius: 8px;
   display: flex; align-items: center; justify-content: center;
-  color: var(--dpb-soft); transition: all .15s ease;
+  color: var(--dpb-soft); transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
-.dpb-toolbar button:hover { background: var(--dpb-surface); color: var(--dpb-ink); }
+.dpb-toolbar button:hover { background: var(--dpb-surface); color: var(--dpb-ink); transform: translateY(-1px); }
 .dpb-toolbar button[aria-pressed="true"] { background: var(--dpb-accent-wash); color: var(--dpb-accent); }
 .dpb-toolbar button:focus-visible { outline: 2px solid var(--dpb-accent); outline-offset: 1px; }
 .dpb-toolbar-div { width: 20px; height: 1px; background: var(--dpb-line); margin: 2px 0; }
@@ -275,8 +395,9 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   background: color-mix(in srgb, var(--dpb-ink) 92%, transparent);
   color: var(--dpb-elev); backdrop-filter: blur(8px);
   border: 1px solid var(--dpb-highlight); box-shadow: var(--dpb-shadow-pill);
-  transition: opacity .2s ease;
+  transition: opacity var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-spring) var(--dpb-ease-spring), box-shadow var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
+.dpb-status-pill:hover { transform: translate(-50%, -1px); box-shadow: var(--dpb-shadow-pop); }
 .dpb-status-dot {
   position: relative; width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
   background: var(--dpb-muted);
@@ -284,7 +405,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 .dpb-status-pill.dpb-is-ready .dpb-status-dot { background: var(--dpb-success); }
 .dpb-status-dot::after {
   content: ""; position: absolute; inset: 0; border-radius: 999px;
-  background: inherit; animation: dpb-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
+  background: inherit; animation: dpb-ping 1.8s var(--dpb-ease-pulse) infinite;
 }
 .dpb-status-pill:not(.dpb-is-ready) .dpb-status-dot::after { animation: none; }
 .dpb-status-text { font-size: 12px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
@@ -293,6 +414,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   appearance: none; cursor: pointer; border: 0; background: transparent;
   display: inline-flex; align-items: center; gap: 5px;
   color: var(--dpb-accent-soft); font: 600 12px/1 inherit;
+  transition: color var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-quick) var(--dpb-ease-spring);
 }
 .dpb-status-approve:hover { color: var(--dpb-elev); }
 .dpb-status-approve kbd { background: var(--dpb-highlight); color: var(--dpb-elev); border-color: transparent; border-bottom-width: 1px; }
@@ -304,7 +426,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   width: var(--dpb-rail-w); flex: 0 0 auto; display: flex; flex-direction: column;
   background: var(--dpb-elev); border-left: 1px solid var(--dpb-line);
   box-shadow: var(--dpb-shadow-drawer); z-index: 40;
-  transition: margin-right .3s cubic-bezier(.16,1,.3,1), opacity .2s ease;
+  transition: margin-right .3s var(--dpb-ease-spring), opacity var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-inspector.dpb-collapsed { margin-right: calc(-1 * var(--dpb-rail-w)); opacity: 0; pointer-events: none; }
 .dpb-inspector-head {
@@ -326,7 +448,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   appearance: none; cursor: pointer; border: 0; background: transparent;
   width: 26px; height: 26px; border-radius: 6px;
   display: flex; align-items: center; justify-content: center;
-  color: var(--dpb-soft); transition: all .15s ease;
+  color: var(--dpb-soft); transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-inspector-nav button:hover { background: var(--dpb-surface); color: var(--dpb-ink); }
 .dpb-inspector-nav .dpb-header-div { height: 14px; }
@@ -340,7 +462,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   display: inline-flex; align-items: center; gap: 5px;
   height: 24px; padding: 0 10px; border-radius: 6px;
   background: transparent; color: var(--dpb-soft); font: 500 11.5px/1 inherit;
-  transition: all .15s ease;
+  transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-filter-tabs button:hover { color: var(--dpb-ink); }
 .dpb-filter-tabs button[aria-pressed="true"] {
@@ -351,12 +473,21 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 
 .dpb-anchor-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
 .dpb-anchor-list:not(.has-items) + .dpb-comment-form { border-top: 1px solid var(--dpb-line); }
+.dpb-anchor-empty {
+  margin: auto 0; padding: 22px 18px; border-radius: 14px;
+  border: 1px dashed var(--dpb-line-strong); background: var(--dpb-bg);
+  display: grid; justify-items: center; gap: 7px; text-align: center;
+}
+.dpb-anchor-empty svg { color: var(--dpb-accent); opacity: .88; }
+.dpb-anchor-empty-title { font: 700 13px/1.3 inherit; color: var(--dpb-ink); }
+.dpb-anchor-empty-desc { margin: 0; max-width: 260px; color: var(--dpb-soft); font-size: 11.5px; line-height: 1.45; }
 .dpb-anchor {
   position: relative; padding: 12px; border-radius: 10px; cursor: pointer;
   background: var(--dpb-bg); border: 1px solid transparent;
-  transition: all .18s ease;
+  transition: background var(--dpb-duration-spring) var(--dpb-ease-spring), border-color var(--dpb-duration-spring) var(--dpb-ease-spring), box-shadow var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-anchor:hover { background: var(--dpb-surface); border-color: var(--dpb-line); }
+.dpb-anchor.dpb-anchor-enter { animation: dpb-anchor-enter var(--dpb-duration-spring) var(--dpb-ease-spring) both; }
 .dpb-anchor.dpb-active { background: var(--dpb-accent-wash); border-color: var(--dpb-accent-chip-border); box-shadow: var(--dpb-shadow-tool); }
 .dpb-anchor.dpb-active::before {
   content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
@@ -387,7 +518,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   flex: 1 1 auto; min-width: 0; height: 28px; padding: 4px 8px;
   border: 1px solid transparent; border-radius: 6px; background: transparent;
   color: var(--dpb-ink); font: 400 12px/1.4 inherit; outline: none;
-  transition: border-color .15s ease, background .15s ease;
+  transition: border-color var(--dpb-duration-spring) var(--dpb-ease-spring), background var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-anchor-row input:focus { border-color: var(--dpb-accent); background: var(--dpb-elev); }
 .dpb-anchor-row input::placeholder { color: var(--dpb-muted); }
@@ -395,6 +526,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   appearance: none; cursor: pointer; border: 0; background: transparent;
   color: var(--dpb-muted); font: 500 10px/1 inherit; padding: 4px 6px; border-radius: 6px;
   flex: 0 0 auto;
+  transition: color var(--dpb-duration-spring) var(--dpb-ease-spring), background var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-quick) var(--dpb-ease-spring);
 }
 .dpb-anchor-rm:hover { color: var(--dpb-danger); background: var(--dpb-danger-wash); }
 .dpb-anchor-foot { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 0 28px; }
@@ -402,6 +534,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   appearance: none; cursor: pointer; border: 0; background: transparent;
   display: inline-flex; align-items: center; gap: 4px;
   color: var(--dpb-soft); font: 500 10.5px/1 inherit; padding: 3px 6px; border-radius: 6px;
+  transition: color var(--dpb-duration-spring) var(--dpb-ease-spring), background var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-quick) var(--dpb-ease-spring);
 }
 .dpb-anchor-resolve:hover { color: var(--dpb-success); background: var(--dpb-success-wash); }
 .dpb-anchor-id { font: 500 9px/1 ui-monospace, Consolas, monospace; color: var(--dpb-muted); }
@@ -416,7 +549,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 .dpb-tag {
   appearance: none; cursor: pointer; height: 22px; padding: 0 9px; border-radius: 6px;
   border: 1px solid var(--dpb-line); background: var(--dpb-bg); color: var(--dpb-soft);
-  font: 500 10.5px/1 inherit; transition: all .15s ease;
+  font: 500 10.5px/1 inherit; transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-tag:hover { color: var(--dpb-ink); border-color: var(--dpb-line-strong); }
 .dpb-tag.is-on { background: var(--dpb-accent-wash); color: var(--dpb-accent); border-color: var(--dpb-accent-chip-border); }
@@ -426,7 +559,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   width: 100%; display: block; resize: none; padding: 8px 34px 8px 10px;
   background: var(--dpb-bg); border: 1px solid var(--dpb-line); border-radius: 8px;
   color: var(--dpb-ink); font: 400 12px/1.5 inherit; outline: none;
-  transition: border-color .15s ease, box-shadow .15s ease;
+  transition: border-color var(--dpb-duration-spring) var(--dpb-ease-spring), box-shadow var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-comment-box textarea:focus { border-color: var(--dpb-accent); box-shadow: 0 0 0 2px var(--dpb-ring-accent); }
 .dpb-comment-box textarea::placeholder { color: var(--dpb-muted); }
@@ -434,7 +567,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px;
   appearance: none; cursor: pointer; border: 0; border-radius: 6px;
   background: transparent; color: var(--dpb-muted);
-  display: flex; align-items: center; justify-content: center; transition: all .15s ease;
+  display: flex; align-items: center; justify-content: center; transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-comment-box button:hover { color: var(--dpb-accent); background: var(--dpb-surface); }
 .dpb-field { display: flex; flex-direction: column; gap: 4px; }
@@ -446,7 +579,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   width: 100%; display: block; resize: vertical; min-height: 64px; max-height: 140px;
   padding: 8px 10px; background: var(--dpb-bg); border: 1px solid var(--dpb-line);
   border-radius: 8px; color: var(--dpb-ink); font: 400 12px/1.5 inherit; outline: none;
-  transition: border-color .15s ease, box-shadow .15s ease;
+  transition: border-color var(--dpb-duration-spring) var(--dpb-ease-spring), box-shadow var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-field textarea[name="feedback"]:focus { border-color: var(--dpb-accent); box-shadow: 0 0 0 2px var(--dpb-ring-accent); }
 .dpb-field textarea[name="feedback"]::placeholder { color: var(--dpb-muted); }
@@ -460,7 +593,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   appearance: none; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 8px;
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
   border: 1px solid var(--dpb-line-strong); background: transparent; color: var(--dpb-soft);
-  font: 600 12px/1 inherit; transition: all .15s ease;
+  font: 600 12px/1 inherit; transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-btn:hover { background: var(--dpb-surface); color: var(--dpb-ink); }
 .dpb-btn-quiet { border-color: transparent; }
@@ -477,7 +610,7 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   background: color-mix(in srgb, var(--dpb-elev) 95%, transparent);
   box-shadow: var(--dpb-shadow-tool);
   display: flex; flex-direction: column; align-items: center; gap: 8px;
-  color: var(--dpb-soft); cursor: pointer; transition: all .2s ease;
+  color: var(--dpb-soft); cursor: pointer; transition: all var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-reopen-tab:hover { color: var(--dpb-accent); }
 .dpb-reopen-tab[hidden] { display: none !important; }
@@ -546,7 +679,8 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 .dpb-toasts {
   position: fixed; top: 60px; right: 24px; z-index: 2147483200;
   display: flex; flex-direction: column; gap: 8px; pointer-events: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 }
 .dpb-toast {
   display: flex; align-items: center; gap: 8px; max-width: 320px;
@@ -555,8 +689,8 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   color: var(--dpb-elev); border: 1px solid var(--dpb-highlight);
   box-shadow: var(--dpb-shadow-pill); backdrop-filter: blur(8px);
   font-size: 12px; font-weight: 500;
-  animation: dpb-toast-in .25s cubic-bezier(.16,1,.3,1);
-  transition: opacity .2s ease, transform .2s ease;
+  animation: dpb-toast-in var(--dpb-duration-spring) var(--dpb-ease-spring);
+  transition: opacity var(--dpb-duration-spring) var(--dpb-ease-spring), transform var(--dpb-duration-spring) var(--dpb-ease-spring);
 }
 .dpb-toast.dpb-out { opacity: 0; transform: translateY(-10px); }
 
@@ -573,6 +707,11 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   display: flex; align-items: center; justify-content: center;
   background: var(--dpb-accent); color: var(--dpb-accent-ink);
   font: 700 10px/1 system-ui, sans-serif;
+  position: relative;
+}
+.dpb-float.dpb-active .dpb-float-n::after {
+  content: ""; position: absolute; inset: -4px; border-radius: inherit;
+  border: 2px solid var(--dpb-ring-accent); animation: dpb-pulse-ring 1.8s var(--dpb-ease-pulse) infinite;
 }
 .dpb-float-note {
   font-size: 11px; line-height: 1.4; color: var(--dpb-ink);
@@ -589,6 +728,20 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
 .dpb-pin-hover { outline: 1px dashed var(--dpb-ring-accent) !important; outline-offset: 1px !important; }
 .dpb-pin-flash { animation: dpb-flash 900ms ease-out 1; }
 
+@keyframes dpb-pin-drop {
+  0% { transform: translateY(-16px) scale(1.3); opacity: 0; }
+  60% { transform: translateY(2px) scale(.95); opacity: 1; }
+  80% { transform: translateY(-1px) scale(1.02); }
+  100% { transform: translateY(0) scale(1); opacity: 1; }
+}
+@keyframes dpb-anchor-enter {
+  from { transform: translateY(6px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@keyframes dpb-pulse-ring {
+  0% { transform: scale(.9); opacity: .72; }
+  100% { transform: scale(1.9); opacity: 0; }
+}
 @keyframes dpb-flash {
   0% { box-shadow: 0 0 0 0 var(--dpb-ring-accent); outline-color: var(--dpb-accent) !important; }
   50% { box-shadow: 0 0 0 6px var(--dpb-ring-accent); }
@@ -607,7 +760,23 @@ body.dpb-tool-draw .dpb-draw-layer { pointer-events: auto; cursor: crosshair; }
   75%, 100% { transform: scale(2.2); opacity: 0; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .dpb-free-pin, .dpb-toast { animation: none; }
-  .dpb-status-dot::after { animation: none; }
+  #dpb-root *, #dpb-root *::before, #dpb-root *::after,
+  #dpb-float-root *, #dpb-float-root *::before, #dpb-float-root *::after,
+  .dpb-toasts *, .dpb-toasts *::before, .dpb-toasts *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+    transition-delay: 0ms !important;
+  }
+  .dpb-free-pin,
+  .dpb-free-pin.dpb-pin-drop,
+  .dpb-free-pin.dpb-active::after,
+  .dpb-float.dpb-active .dpb-float-n::after,
+  .dpb-anchor.dpb-anchor-enter,
+  .dpb-toast,
+  .dpb-status-dot::after,
+  .dpb-pin-flash,
+  .dpb-field textarea[name="feedback"].is-shaking {
+    animation: none !important;
+  }
   .dpb-artboard-wrap { transition: none; }
 }