@wacry/codeks-bridge 0.0.0-stage → 0.0.3

package/ui/diff.js

@@ -0,0 +1,281 @@
+// Structural JSON diff: objects by key, arrays by LCS on exact item identity
+// (common prefix/suffix trimmed first), replaced runs paired by type/role.
+import { h, btn, copyText, fmtInt, oneLine, strBlock, put } from './dom.js';
+import { jsonTree, prim, preview } from './tree.js';
+
+const LCS_CELLS = 6e6;
+const PAGE = 300;
+
+const kindOf = (v) => (Array.isArray(v) ? 'arr' : v === null ? 'null' : typeof v === 'object' ? 'obj' : typeof v);
+const sig = (v) => (v && typeof v === 'object' && !Array.isArray(v) ? `o|${v.type ?? ''}|${v.role ?? ''}` : kindOf(v));
+
+/** Diff node: {t:'eq'|'add'|'del'|'mod'|'obj'|'arr', ...}; n = number of changes below. */
+export function diff(a, b) {
+  if (a === b) return { t: 'eq', v: a, n: 0 };
+  const ka = kindOf(a);
+  if (ka !== kindOf(b) || (ka !== 'obj' && ka !== 'arr')) return { t: 'mod', a, b, n: 1 };
+  return ka === 'obj' ? diffObj(a, b) : diffArr(a, b);
+}
+
+function same(a, b) {
+  if (a === b) return true;
+  if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+function diffObj(a, b) {
+  const entries = [];
+  let n = 0;
+  for (const k of Object.keys(a)) {
+    if (!Object.hasOwn(b, k)) { entries.push([k, { t: 'del', v: a[k], n: 1 }]); n++; continue; }
+    const d = same(a[k], b[k]) ? { t: 'eq', v: a[k], n: 0 } : diff(a[k], b[k]);
+    entries.push([k, d]);
+    n += d.n;
+  }
+  for (const k of Object.keys(b)) if (!Object.hasOwn(a, k)) { entries.push([k, { t: 'add', v: b[k], n: 1 }]); n++; }
+  return { t: 'obj', entries, n };
+}
+
+function diffArr(a, b) {
+  const ids = new Map();
+  const id = (v) => {
+    const s = typeof v === 'string' ? `s${v}` : JSON.stringify(v) ?? 'u';
+    let k = ids.get(s);
+    if (k === undefined) ids.set(s, (k = ids.size));
+    return k;
+  };
+  const A = a.map(id);
+  const B = b.map(id);
+  let pre = 0;
+  while (pre < A.length && pre < B.length && A[pre] === B[pre]) pre++;
+  let suf = 0;
+  while (suf < A.length - pre && suf < B.length - pre && A[A.length - 1 - suf] === B[B.length - 1 - suf]) suf++;
+  const ops = [];
+  for (let i = 0; i < pre; i++) ops.push({ t: 'eq', ai: i, bi: i, v: a[i] });
+  const raw = lcsOps(A.slice(pre, A.length - suf), B.slice(pre, B.length - suf), pre);
+  let n = 0;
+  // Pair replaced runs (del... add...) by type/role so changed items show nested diffs.
+  for (let k = 0; k < raw.length;) {
+    if (raw[k].t === 'eq') { ops.push({ ...raw[k], v: a[raw[k].ai] }); k++; continue; }
+    const dels = [];
+    const adds = [];
+    while (k < raw.length && raw[k].t !== 'eq') { (raw[k].t === 'del' ? dels : adds).push(raw[k]); k++; }
+    let i = 0;
+    let j = 0;
+    while (i < dels.length || j < adds.length) {
+      const da = dels[i];
+      const ab = adds[j];
+      if (da && ab && sig(a[da.ai]) === sig(b[ab.bi])) {
+        const d = diff(a[da.ai], b[ab.bi]);
+        ops.push({ t: 'chg', ai: da.ai, bi: ab.bi, d });
+        n += d.n;
+        i++; j++;
+      } else if (ab && (!da || adds.slice(j).some((x) => sig(b[x.bi]) === sig(a[da.ai])))) {
+        ops.push({ t: 'add', bi: ab.bi, v: b[ab.bi] }); n++; j++;
+      } else {
+        ops.push({ t: 'del', ai: da.ai, v: a[da.ai] }); n++; i++;
+      }
+    }
+  }
+  for (let i = 0; i < suf; i++) ops.push({ t: 'eq', ai: A.length - suf + i, bi: B.length - suf + i, v: a[A.length - suf + i] });
+  return { t: 'arr', ops, n, la: a.length, lb: b.length };
+}
+
+function lcsOps(A, B, off) {
+  const n = A.length;
+  const m = B.length;
+  const ops = [];
+  if (!n || !m || n * m > LCS_CELLS) {
+    // Too large for LCS: positional fallback keeps the view responsive.
+    for (let i = 0; i < n; i++) ops.push({ t: 'del', ai: off + i });
+    for (let j = 0; j < m; j++) ops.push({ t: 'add', bi: off + j });
+    return ops;
+  }
+  const w = m + 1;
+  const T = n * m < 4e6 && n < 65535 && m < 65535 ? new Uint16Array((n + 1) * w) : new Uint32Array((n + 1) * w);
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      T[i * w + j] = A[i] === B[j] ? T[(i + 1) * w + j + 1] + 1 : Math.max(T[(i + 1) * w + j], T[i * w + j + 1]);
+    }
+  }
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (A[i] === B[j]) { ops.push({ t: 'eq', ai: off + i, bi: off + j }); i++; j++; }
+    else if (T[(i + 1) * w + j] >= T[i * w + j + 1]) { ops.push({ t: 'del', ai: off + i }); i++; }
+    else { ops.push({ t: 'add', bi: off + j }); j++; }
+  }
+  for (; i < n; i++) ops.push({ t: 'del', ai: off + i });
+  for (; j < m; j++) ops.push({ t: 'add', bi: off + j });
+  return ops;
+}
+
+// ---------- rendering ----------
+
+export function diffView(a, b, opts = {}) {
+  const t0 = performance.now();
+  const d = diff(a, b);
+  const ms = performance.now() - t0;
+  const stats = { add: 0, del: 0, mod: 0 };
+  count(d, stats);
+  const root = h('div', { class: 'diff' },
+    h('div', { class: 'diff-stats' },
+      d.n ? [h('span', { class: 'chip ok' }, `+${fmtInt(stats.add)} 新增`), h('span', { class: 'chip bad' }, `−${fmtInt(stats.del)} 删除`), h('span', { class: 'chip warn' }, `~${fmtInt(stats.mod)} 修改`)] : h('span', { class: 'chip ok' }, '完全相同'),
+      h('span', { class: 'dim' }, `比较耗时 ${ms.toFixed(0)} ms`)),
+    h('div', { class: 'diff-tree' }, node(opts.label ?? null, d, 0)));
+  return root;
+}
+
+function count(d, s) {
+  if (d.t === 'add') s.add++;
+  else if (d.t === 'del') s.del++;
+  else if (d.t === 'mod') s.mod++;
+  else if (d.t === 'obj') for (const [, x] of d.entries) count(x, s);
+  else if (d.t === 'arr') for (const op of d.ops) { if (op.t === 'add') s.add++; else if (op.t === 'del') s.del++; else if (op.t === 'chg') count(op.d, s); }
+}
+
+const keyEl = (k) => (k == null ? null : h('span', { class: typeof k === 'number' || /^[ab]\[/.test(k) ? 'tn-idx' : 'tn-key' }, String(k)));
+const sepEl = (k) => (k == null ? null : h('span', { class: 'tn-sep' }, ': '));
+
+function valueEl(v) {
+  if (v && typeof v === 'object') {
+    return h('span', null, h('span', { class: 'tn-sum' }, Array.isArray(v) ? `[${v.length}]` : `{${Object.keys(v).length}}`), h('span', { class: 'tn-pv' }, preview(v)));
+  }
+  if (typeof v === 'string' && v.length > 200) return h('span', { class: 'str' }, JSON.stringify(oneLine(v, 200)).slice(0, -1) + '…"', h('span', { class: 'dim' }, ` (${fmtInt(v.length)} 字符)`));
+  return prim(v);
+}
+
+/** A row whose value can be expanded into a plain JSON tree. */
+function leafRow(cls, sign, k, v) {
+  const wrap = h('div', { class: `dn ${cls}` });
+  const tog = h('span', { class: 'tn-tog' }, v && typeof v === 'object' ? '▸' : '');
+  const row = h('div', { class: 'dn-row' }, h('span', { class: 'sign' }, sign), tog, keyEl(k), sepEl(k), valueEl(v));
+  put(wrap, row);
+  if ((v && typeof v === 'object') || (typeof v === 'string' && v.length > 200)) {
+    let body = null;
+    row.classList.add('tn-click');
+    row.addEventListener('click', (e) => {
+      if (e.target.closest('button')) return;
+      if (body) { body.remove(); body = null; tog.textContent = '▸'; return; }
+      body = h('div', { class: 'dn-body' }, typeof v === 'string' ? strBlock(v) : jsonTree(v, { auto: 1 }));
+      put(wrap, body);
+      tog.textContent = '▾';
+    });
+  }
+  return wrap;
+}
+
+function node(k, d, depth) {
+  if (d.t === 'eq') return leafRow('eq', ' ', k, d.v);
+  if (d.t === 'add') return leafRow('add', '+', k, d.v);
+  if (d.t === 'del') return leafRow('del', '−', k, d.v);
+  if (d.t === 'mod') return modRow(k, d.a, d.b);
+  const wrap = h('div', { class: 'dn ch' });
+  const tog = h('span', { class: 'tn-tog' }, '▾');
+  const label = d.t === 'arr' ? `[${d.la} → ${d.lb}]` : '{…}';
+  const row = h('div', { class: 'dn-row tn-click' }, h('span', { class: 'sign' }, '~'), tog, keyEl(k), sepEl(k),
+    h('span', { class: 'tn-sum' }, label), h('span', { class: 'chip warn' }, `${fmtInt(d.n)} 处变化`));
+  const kids = h('div', { class: 'tn-kids' });
+  put(wrap, row, kids);
+  const units = d.t === 'obj' ? d.entries.map(([key, x]) => ({ eq: x.t === 'eq', key, x })) : d.ops.map((op) => ({ eq: op.t === 'eq', op }));
+  fillUnits(kids, units, d.t, depth, 0);
+  row.addEventListener('click', () => {
+    const open = !kids.hidden;
+    kids.hidden = open;
+    tog.textContent = open ? '▸' : '▾';
+  });
+  return wrap;
+}
+
+function unitEl(u, kind, depth) {
+  if (kind === 'obj') return node(u.key, u.x, depth + 1);
+  const op = u.op;
+  if (op.t === 'eq') return leafRow('eq', ' ', op.ai === op.bi ? op.ai : `a[${op.ai}]→b[${op.bi}]`, op.v);
+  if (op.t === 'add') return leafRow('add', '+', `b[${op.bi}]`, op.v);
+  if (op.t === 'del') return leafRow('del', '−', `a[${op.ai}]`, op.v);
+  return node(op.ai === op.bi ? op.ai : `a[${op.ai}]→b[${op.bi}]`, op.d, depth + 1);
+}
+
+/** Renders units, collapsing unchanged runs into a single clickable row. */
+function fillUnits(box, units, kind, depth, start) {
+  let rendered = 0;
+  let k = start;
+  while (k < units.length) {
+    if (rendered >= PAGE) {
+      const rest = units.length - k;
+      const at = k;
+      const more = btn(`显示其余 ${fmtInt(rest)} 项`, () => { more.remove(); fillUnits(box, units, kind, depth, at); }, 'more');
+      put(box, more);
+      return;
+    }
+    if (units[k].eq) {
+      let e = k;
+      while (e < units.length && units[e].eq) e++;
+      const run = units.slice(k, e);
+      if (run.length <= 2) for (const u of run) put(box, unitEl(u, kind, depth));
+      else put(box, eqRun(run, kind, depth));
+      rendered++;
+      k = e;
+      continue;
+    }
+    put(box, unitEl(units[k], kind, depth));
+    rendered++;
+    k++;
+  }
+}
+
+function eqRun(run, kind, depth) {
+  const label = kind === 'obj'
+    ? `… ${run.length} 个键相同：${run.slice(0, 6).map((u) => u.key).join(', ')}${run.length > 6 ? ', …' : ''}`
+    : `… ${run.length} 项相同（a[${run[0].op.ai}–${run[run.length - 1].op.ai}]${run[0].op.ai !== run[0].op.bi ? ` = b[${run[0].op.bi}–${run[run.length - 1].op.bi}]` : ''}）`;
+  const box = h('div', { class: 'dn eqrun' });
+  const row = h('div', { class: 'dn-row tn-click', title: '点击展开相同部分' }, h('span', { class: 'sign' }, ' '), h('span', { class: 'tn-tog' }, '▸'), h('span', { class: 'dim' }, label));
+  put(box, row);
+  row.addEventListener('click', () => {
+    const kids = h('div', { class: 'tn-kids' });
+    fillUnits(kids, run.map((u) => ({ ...u, eq: false })), kind, depth, 0);
+    box.replaceWith(kids);
+  });
+  return box;
+}
+
+function modRow(k, a, b) {
+  const wrap = h('div', { class: 'dn mod' });
+  if (typeof a === 'string' && typeof b === 'string' && (a.length > 160 || b.length > 160 || a.includes('\n') || b.includes('\n'))) {
+    put(wrap, h('div', { class: 'dn-row' }, h('span', { class: 'sign' }, '~'), h('span', { class: 'tn-tog' }), keyEl(k), sepEl(k),
+      h('span', { class: 'dim' }, `字符串 ${fmtInt(a.length)} → ${fmtInt(b.length)} 字符`),
+      btn('复制 A', () => copyText(a)), btn('复制 B', () => copyText(b))), strDiff(a, b));
+    return wrap;
+  }
+  put(wrap, h('div', { class: 'dn-row' }, h('span', { class: 'sign' }, '~'), h('span', { class: 'tn-tog' }), keyEl(k), sepEl(k),
+    h('span', { class: 'old' }, valueEl(a)), h('span', { class: 'arrow' }, ' → '), h('span', { class: 'new' }, valueEl(b))));
+  return wrap;
+}
+
+/** Shows the changed window of two strings with shared prefix/suffix context. */
+function strDiff(a, b) {
+  const n = Math.min(a.length, b.length);
+  let p = 0;
+  while (p < n && a.charCodeAt(p) === b.charCodeAt(p)) p++;
+  let s = 0;
+  while (s < n - p && a.charCodeAt(a.length - 1 - s) === b.charCodeAt(b.length - 1 - s)) s++;
+  const C = 160;
+  const box = h('div', { class: 'sdiff' });
+  put(box, h('div', { class: 'dim' }, `共同前缀 ${fmtInt(p)} 字符 · 共同后缀 ${fmtInt(s)} 字符`));
+  const pre = h('pre', { class: 'sv-text' });
+  if (p > C) put(pre, h('span', { class: 'dim' }, `…[${fmtInt(p - C)} 字符相同]…`));
+  put(pre, h('span', { class: 'ctx' }, a.slice(Math.max(0, p - C), p)));
+  const mid = (t, cls) => {
+    const el = h('span', { class: cls });
+    el.textContent = t.length > 3000 ? `${t.slice(0, 1500)} … 省略 ${fmtInt(t.length - 3000)} 字符 … ${t.slice(-1500)}` : t;
+    return el;
+  };
+  const ma = a.slice(p, a.length - s);
+  const mb = b.slice(p, b.length - s);
+  if (ma) put(pre, mid(ma, 'old'));
+  if (mb) put(pre, mid(mb, 'new'));
+  put(pre, h('span', { class: 'ctx' }, a.slice(a.length - s, a.length - s + C)));
+  if (s > C) put(pre, h('span', { class: 'dim' }, `…[${fmtInt(s - C)} 字符相同]…`));
+  put(box, pre);
+  return box;
+}

package/ui/dom.js

@@ -0,0 +1,258 @@
+// Shared DOM, formatting and value-rendering helpers for the inspector UI.
+// All captured content is untrusted: build nodes with createElement/textContent only.
+
+export function h(tag, props, ...kids) {
+  const el = document.createElement(tag);
+  if (props) {
+    for (const [k, v] of Object.entries(props)) {
+      if (v == null || v === false) continue;
+      if (k === 'class') el.className = v;
+      else if (k === 'text') el.textContent = v;
+      else if (k.startsWith('on')) el.addEventListener(k.slice(2), v);
+      else if (k === 'style') Object.assign(el.style, v);
+      else if (k === 'dataset') Object.assign(el.dataset, v);
+      else if (typeof v !== 'string' && k in el) el[k] = v;
+      else el.setAttribute(k, v === true ? '' : String(v));
+    }
+  }
+  add(el, kids);
+  return el;
+}
+
+function add(el, kids) {
+  for (const k of kids) {
+    if (k == null || k === false) continue;
+    if (Array.isArray(k)) add(el, k);
+    else el.append(k instanceof Node ? k : String(k));
+  }
+}
+
+/** Appends kids to el, skipping null/false and flattening arrays like h(). */
+export function put(el, ...kids) { add(el, kids); return el; }
+
+/** Replaces the children of el, skipping null/false and flattening arrays like h(). */
+export function fill(el, ...kids) {
+  el.replaceChildren();
+  add(el, kids);
+  return el;
+}
+
+export const btn = (label, onclick, cls = '', title) =>
+  h('button', { type: 'button', class: `btn ${cls}`.trim(), title, onclick: (e) => { e.stopPropagation(); onclick(e); } }, label);
+
+// ---------- formatting ----------
+
+const pad = (n, w = 2) => String(n).padStart(w, '0');
+
+export function fmtTime(ms) {
+  if (ms == null) return '–';
+  const d = new Date(ms);
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+}
+
+export function fmtDateTime(ms) {
+  if (ms == null) return '–';
+  const d = new Date(ms);
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${fmtTime(ms)}`;
+}
+
+export function fmtDur(ms) {
+  if (ms == null) return '–';
+  if (ms < 1000) return `${Math.round(ms)} ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(ms < 10000 ? 2 : 1)} s`;
+  const m = Math.floor(ms / 60000);
+  return `${m}m${pad(Math.round((ms % 60000) / 1000))}s`;
+}
+
+export function fmtOffset(ms) {
+  if (ms == null) return '';
+  return ms < 1000 ? `+${Math.round(ms)}ms` : `+${(ms / 1000).toFixed(2)}s`;
+}
+
+export function fmtBytes(n) {
+  if (n == null) return '–';
+  if (n < 1024) return `${n} B`;
+  if (n < 1048576) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1073741824) return `${(n / 1048576).toFixed(n < 10485760 ? 2 : 1)} MB`;
+  return `${(n / 1073741824).toFixed(2)} GB`;
+}
+
+export const fmtInt = (n) => (n == null ? '–' : Number(n).toLocaleString('en-US'));
+
+export function fmtTok(n) {
+  if (n == null) return '–';
+  if (n >= 1e6) return `${(n / 1e6).toFixed(2)}M`;
+  if (n >= 1e4) return `${(n / 1e3).toFixed(1)}K`;
+  return String(n);
+}
+
+export function oneLine(s, max = 160) {
+  if (typeof s !== 'string') return '';
+  const t = s.slice(0, max * 3).replace(/\s+/g, ' ').trim();
+  return t.length > max ? `${t.slice(0, max)}…` : t;
+}
+
+export const shortId = (s, n = 8) => (typeof s === 'string' && s.length > n + 2 ? `${s.slice(0, n)}…` : s);
+
+export function hashHue(s) {
+  let x = 2166136261;
+  for (let i = 0; i < s.length; i++) x = Math.imul(x ^ s.charCodeAt(i), 16777619);
+  return (x >>> 0) % 360;
+}
+
+export function tryJson(text) {
+  if (typeof text !== 'string') return { ok: false };
+  try { return { ok: true, value: JSON.parse(text) }; } catch (e) { return { ok: false, error: String(e.message || e) }; }
+}
+
+// ---------- clipboard / download / toast ----------
+
+let toastTimer;
+export function toast(msg, isError = false) {
+  let el = document.getElementById('toast');
+  if (!el) { el = h('div', { id: 'toast' }); document.body.append(el); }
+  el.textContent = msg;
+  el.className = `toast show${isError ? ' err' : ''}`;
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { el.classList.remove('show'); }, isError ? 5000 : 1800);
+}
+
+export async function copyText(text) {
+  text = String(text);
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const ta = h('textarea', { style: { position: 'fixed', top: '0', left: '0', opacity: '0' } });
+    ta.value = text;
+    document.body.append(ta);
+    ta.select();
+    document.execCommand('copy');
+    ta.remove();
+  }
+  toast(`已复制 ${fmtInt(text.length)} 字符`);
+}
+
+export function download(name, data, type = 'application/json') {
+  const blob = data instanceof Blob ? data : new Blob([data], { type });
+  const url = URL.createObjectURL(blob);
+  const a = h('a', { href: url, download: name });
+  document.body.append(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 60000);
+}
+
+export const safeName = (s) => String(s).replace(/[^\w.-]+/g, '_').slice(0, 80);
+
+// ---------- bridge carriers and data URLs ----------
+
+function b64ToBytes(b64) {
+  const s = b64.replace(/-/g, '+').replace(/_/g, '/').replace(/\s+/g, '');
+  const bin = atob(s + '==='.slice((s.length + 3) % 4));
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
+}
+
+export const CARRIER_RE = /^(cxbr1|cxbc1):/;
+
+/** Decodes a bridge state envelope: prefix + base64url(JSON). */
+export function decodeCarrier(s) {
+  const m = CARRIER_RE.exec(s);
+  if (!m) return null;
+  try {
+    return { prefix: m[1], value: JSON.parse(new TextDecoder().decode(b64ToBytes(s.slice(m[0].length)))) };
+  } catch (e) {
+    return { prefix: m[1], error: String(e.message || e) };
+  }
+}
+
+const DATA_IMG_RE = /^data:(image\/[a-z0-9.+-]+);base64,/i;
+export const isDataImage = (s) => typeof s === 'string' && DATA_IMG_RE.test(s.slice(0, 64));
+
+export function dataUrlBlob(url) {
+  const m = /^data:([^;,]*)(;base64)?,/i.exec(url.slice(0, 200));
+  if (!m) return new Blob([url], { type: 'text/plain' });
+  const body = url.slice(m[0].length);
+  return new Blob([m[2] ? b64ToBytes(body) : decodeURIComponent(body)], { type: m[1] || 'application/octet-stream' });
+}
+
+/** Small image thumbnail; data: URLs only, remote URLs are shown as text. */
+export function thumb(url, size = 'sm') {
+  if (!isDataImage(url)) return h('span', { class: 'chip dim', title: url }, '远程图片');
+  const img = h('img', { class: `thumb ${size}`, src: url, alt: 'image', title: '点击放大' });
+  img.addEventListener('click', (e) => { e.stopPropagation(); img.classList.toggle('big'); });
+  return img;
+}
+
+// ---------- string rendering ----------
+
+const FOLD = 3000, HEAD = 1500, TAIL = 1500;
+
+/**
+ * A block view for a string: shows head + omitted marker + tail for long text,
+ * with buttons to expand, copy, download, decode carriers and parse JSON.
+ */
+export function strBlock(s, opts = {}) {
+  const name = opts.name || 'text';
+  const box = h('div', { class: 'sv' });
+  if (isDataImage(s)) {
+    const mime = DATA_IMG_RE.exec(s.slice(0, 64))[1];
+    put(box, h('div', { class: 'sv-tools' },
+      thumb(s, 'md'),
+      h('span', { class: 'dim' }, `${mime} · ${fmtBytes(s.length)}（data URL）`),
+      btn('复制', () => copyText(s)),
+      btn('下载图片', () => download(`${name}.${mime.split('/')[1].replace(/\W.*/, '')}`, dataUrlBlob(s)))));
+    return box;
+  }
+  const pre = h('pre', { class: 'sv-text' });
+  const extra = h('div', { class: 'sv-extra' });
+  let full = false;
+  let foldBtn = null;
+  const render = () => {
+    if (foldBtn) foldBtn.textContent = full ? '折叠' : '展开全部';
+    pre.replaceChildren();
+    if (full || s.length <= FOLD) put(pre, s);
+    else {
+      put(pre, s.slice(0, HEAD),
+        h('span', { class: 'sv-omit', title: '点击展开全部', onclick: (e) => { e.stopPropagation(); full = true; render(); } },
+          ` … 省略 ${fmtInt(s.length - HEAD - TAIL)} 字符 … `),
+        s.slice(-TAIL));
+    }
+  };
+  render();
+  const tools = h('div', { class: 'sv-tools' }, h('span', { class: 'dim' }, `${fmtInt(s.length)} 字符`));
+  if (s.length > FOLD) put(tools, foldBtn = btn('展开全部', () => { full = !full; render(); }));
+  put(tools, btn('复制', () => copyText(s)), btn('下载', () => download(`${name}.txt`, s, 'text/plain')));
+  if (CARRIER_RE.test(s) && opts.tree) {
+    put(tools, btn('解码载荷', () => toggleExtra(extra, () => {
+      const d = decodeCarrier(s);
+      return d.error ? h('div', { class: 'err' }, `解码失败：${d.error}`) : opts.tree(d.value, `${d.prefix} 解码`);
+    })));
+  } else if (opts.tree && /^\s*[[{]/.test(s.slice(0, 20))) {
+    put(tools, btn('按 JSON 解析', () => toggleExtra(extra, () => {
+      const r = tryJson(s);
+      return r.ok ? opts.tree(r.value, 'JSON') : h('div', { class: 'err' }, `不是合法 JSON：${r.error}`);
+    })));
+  }
+  put(box, tools, pre, extra);
+  return box;
+}
+
+function toggleExtra(extra, make) {
+  if (extra.firstChild) extra.replaceChildren();
+  else put(extra, make());
+}
+
+/** Inline string preview used in compact rows and tables. */
+export function strInline(s, max = 120) {
+  if (isDataImage(s)) return h('span', { class: 'str' }, thumb(s), ` data URL ${fmtBytes(s.length)}`);
+  if (s.length <= max && !s.includes('\n')) return h('span', { class: 'str' }, JSON.stringify(s));
+  return h('span', { class: 'str' }, JSON.stringify(oneLine(s, max)).slice(0, -1) + '…"', h('span', { class: 'dim' }, ` (${fmtInt(s.length)} 字符)`));
+}
+
+/** Simple key/value table; values may be nodes or strings. */
+export function kvTable(rows, cls = '') {
+  return h('table', { class: `kv ${cls}`.trim() },
+    h('tbody', null, rows.map(([k, v, title]) => h('tr', null, h('th', { title }, k), h('td', null, v)))));
+}