cortico 0.1.0

package/src/web/client/ui/fields.ts

@@ -0,0 +1,191 @@
+/** 表单控件与标签；事件监听绑定 UI 实例的 signal。 */
+
+import type {
+  ConsoleCheckbox,
+  ConsoleCheckboxOptions,
+  ConsoleFieldOptions,
+  ConsoleInputOptions,
+  ConsoleSegmented,
+  ConsoleSegmentedOptions,
+  ConsoleSelectOptions,
+  ConsoleTextareaOptions,
+} from '../../shared/client-panel.ts';
+import { h } from './dom.ts';
+
+/** `field` + 调用方追加的 class（如 `mono` / `grow`） */
+function fieldClass(extra?: string): string {
+  return extra ? 'field ' + extra : 'field';
+}
+
+/** 初始化值、禁用状态与回调。onInput 监听输入（select 使用 change），onChange 监听 change，onCommit 监听提交键。 */
+function wire(
+  el: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+  signal: AbortSignal,
+  opts: ConsoleFieldOptions,
+  event: 'input' | 'change',
+): void {
+  if (opts.value != null) el.value = opts.value;
+  if (opts.disabled) el.disabled = true;
+  const onInput = opts.onInput;
+  if (onInput) el.addEventListener(event, () => onInput(el.value), { signal });
+  const onChange = opts.onChange;
+  if (onChange) el.addEventListener('change', () => onChange(el.value), { signal });
+  const onCommit = opts.onCommit;
+  if (onCommit) {
+    // 形参写成 `Event` 再收窄:`el` 是三种控件的联合类型,它的 `addEventListener`
+    // 只剩下不带事件名类型推导的那条通用重载(TS 对联合方法取的是签名的交集),
+    // 直接写 `(ev: KeyboardEvent)` 会被判成不兼容。
+    el.addEventListener(
+      'keydown',
+      (ev: Event) => {
+        if (isCommitKey(el, ev as KeyboardEvent)) onCommit(el.value);
+      },
+      { signal },
+    );
+  }
+}
+
+/**
+ * 判断 Enter 是否提交：IME composition 期间只选词；textarea 裸 Enter 换行，Ctrl/⌘+Enter 提交。
+ */
+function isCommitKey(el: { tagName: string }, ev: KeyboardEvent): boolean {
+  if (ev.key !== 'Enter' || ev.isComposing) return false;
+  if (el.tagName.toLowerCase() !== 'textarea') return true;
+  return ev.ctrlKey || ev.metaKey;
+}
+
+/** 单行输入。缺省 `type=text`。 */
+export function input(
+  doc: Document,
+  signal: AbortSignal,
+  opts?: ConsoleInputOptions,
+): HTMLInputElement {
+  const o = opts ?? {};
+  const el = h(doc, 'input', fieldClass(o.cls));
+  el.type = o.type ?? 'text';
+  if (o.placeholder != null) el.placeholder = o.placeholder;
+  wire(el, signal, o, 'input');
+  return el;
+}
+
+/** 下拉选项先创建，再设置选中值；字符串选项同时作为 value 与 label。 */
+export function select(
+  doc: Document,
+  signal: AbortSignal,
+  opts?: ConsoleSelectOptions,
+): HTMLSelectElement {
+  const o = opts ?? {};
+  const el = h(doc, 'select', fieldClass(o.cls));
+  for (const raw of o.options ?? []) {
+    const item = typeof raw === 'string' ? { value: raw, label: raw } : raw;
+    const opt = h(doc, 'option', null, item.label ?? item.value);
+    opt.value = item.value;
+    el.appendChild(opt);
+  }
+  wire(el, signal, o, 'change');
+  return el;
+}
+
+/** 多行输入。`rows` 缺省交给 CSS 的 `min-height`。 */
+export function textarea(
+  doc: Document,
+  signal: AbortSignal,
+  opts?: ConsoleTextareaOptions,
+): HTMLTextAreaElement {
+  const o = opts ?? {};
+  const el = h(doc, 'textarea', fieldClass(o.cls));
+  if (o.rows != null) el.rows = o.rows;
+  if (o.placeholder != null) el.placeholder = o.placeholder;
+  wire(el, signal, o, 'input');
+  return el;
+}
+
+/**
+ * 勾选框采用 label.check > input[type=checkbox] + span。文本单独放入 span，使 inline-flex 的 gap 在控件与整段文本之间一致生效。
+ */
+export function checkbox(
+  doc: Document,
+  signal: AbortSignal,
+  label: string,
+  opts?: ConsoleCheckboxOptions,
+): ConsoleCheckbox {
+  const o = opts ?? {};
+  const el = h(doc, 'label', 'check');
+  const box = h(doc, 'input');
+  box.type = 'checkbox';
+  if (o.checked) box.checked = true;
+  if (o.disabled) box.disabled = true;
+  if (o.title) el.title = o.title;
+  el.append(box, h(doc, 'span', null, label));
+  const cb = o.onChange;
+  if (cb) box.addEventListener('change', () => cb(box.checked), { signal });
+  return {
+    el,
+    input: box,
+    get checked(): boolean {
+      return box.checked;
+    },
+    // 程序设置值不触发用户 change 回调。
+    setChecked(v: boolean): void {
+      box.checked = v;
+    },
+  };
+}
+
+/**
+ * 字段标签 + 控件。控件嵌在 `<label>` 里，点标签即聚焦控件（不必配 `for`/`id`，
+ * 扩展也就不必发明一套全局唯一的 id）。
+ */
+export function field(doc: Document, label: string, control: HTMLElement): HTMLLabelElement {
+  const el = h(doc, 'label', 'fieldrow');
+  el.append(h(doc, 'span', 'fieldlabel', label), control);
+  return el;
+}
+
+/** 分段选择器保留全部重复 value 选项，并统一更新它们的选中态。 */
+export function segmented(
+  doc: Document,
+  signal: AbortSignal,
+  items: readonly (string | { value: string; label?: string })[],
+  opts?: ConsoleSegmentedOptions,
+): ConsoleSegmented {
+  const o = opts ?? {};
+  const el = h(doc, 'div', o.size === 'sm' ? 'segwrap sm' : 'segwrap');
+  const keys: { value: string; btn: HTMLButtonElement }[] = [];
+  let current = o.value ?? '';
+  const paint = (): void => {
+    for (const k of keys) k.btn.className = k.value === current ? 'seg active' : 'seg';
+  };
+
+  for (const raw of items) {
+    const item = typeof raw === 'string' ? { value: raw, label: raw } : raw;
+    const btn = h(doc, 'button', 'seg', item.label ?? item.value);
+    btn.type = 'button';
+    keys.push({ value: item.value, btn });
+    btn.addEventListener(
+      'click',
+      () => {
+        // 点已经选中的那颗:不回调。onSelect 后面挂的常是一次重新取数,
+        // 白刷一遍不只是浪费,还会把用户刚滚到的位置弹回去。
+        if (current === item.value) return;
+        current = item.value;
+        paint();
+        o.onSelect?.(item.value);
+      },
+      { signal },
+    );
+    el.appendChild(btn);
+  }
+  paint();
+
+  return {
+    el,
+    get value(): string {
+      return current;
+    },
+    setValue(v: string): void {
+      current = v;
+      paint();
+    },
+  };
+}

package/src/web/client/ui/format.ts

@@ -0,0 +1,75 @@
+/**
+ * ConsoleFormat 提供不依赖 DOM 的纯格式化函数，供各控制台面板使用统一显示口径。
+ */
+
+import type { ConsoleFormat } from '../../shared/client-panel.ts';
+
+/** 补零到两位。`4` → `04` */
+function pad2(n: number): string {
+  return n < 10 ? '0' + n : String(n);
+}
+
+export const consoleFormat: ConsoleFormat = {
+  /** **满 10000 才转 k**（9999 仍是 9999，不是 10.0k） */
+  count(n) {
+    return n == null ? '—' : n >= 10000 ? (n / 1000).toFixed(1) + 'k' : String(n);
+  },
+
+  /** null 给空串（不是 `—`），单位是 1024 进制的 `B/K/M` */
+  bytes(n) {
+    return n == null
+      ? ''
+      : n < 1024
+        ? n + 'B'
+        : n < 1048576
+          ? (n / 1024).toFixed(1) + 'K'
+          : (n / 1048576).toFixed(1) + 'M';
+  },
+
+  /** `0.42` → `42%`，四舍五入到整数 */
+  percent(r) {
+    return r == null ? '—' : Math.round(r * 100) + '%';
+  },
+
+  /**
+   * ISO 串直接切 `11..19` 位拿 `HH:MM:SS`。
+   * 不 `new Date()` 是有意的——服务端给的就是本地时间串，转一道反而会带上时区偏移。
+   * 非字符串或长度不足 19 → 空串。
+   */
+  clock(ts) {
+    return typeof ts === 'string' && ts.length >= 19 ? ts.slice(11, 19) : '';
+  },
+
+  /**
+   * `<1` 保 4 位小数（单次调用成本常在 0.0x），`>=1` 保 2 位。
+   * 币种是 ISO 代码：`USD`（缺省）渲染成 `$`，其余代码原样前置并空一格（`EUR 1.00`）。
+   */
+  money(n, currency) {
+    const code = currency || 'USD';
+    const prefix = code === 'USD' ? '$' : code + ' ';
+    return prefix + (n == null ? '0' : n < 1 ? n.toFixed(4) : n.toFixed(2));
+  },
+
+  /**
+   * 毫秒时长，口径在这里定死：
+   *
+   * - `null` / 非有限数 → `—`（与 `count` / `percent` 一致，空值都是破折号）
+   * - 负数按 0 处理
+   * - `< 1s`：整毫秒，`999` → `999ms`
+   * - `< 1min`：一位小数，`1200` → `1.2s`
+   * - `< 1h`：`3m 04s`（秒补零，好竖排对齐）
+   * - 更长：`1h 00m`
+   *
+   * 先把 1s 以上的值**量化到 0.1s** 再分档，免得 `59999` 落进秒档印出 `60.0s`
+   * 这种自相矛盾的读数（量化后它是 `1m 00s`）。
+   */
+  duration(ms) {
+    if (ms == null || !Number.isFinite(ms)) return '—';
+    const raw = ms < 0 ? 0 : ms;
+    const t = raw < 1000 ? Math.round(raw) : Math.round(raw / 100) * 100;
+    if (t < 1000) return t + 'ms';
+    if (t < 60_000) return (t / 1000).toFixed(1) + 's';
+    if (t < 3_600_000) return Math.floor(t / 60_000) + 'm ' + pad2(Math.floor((t % 60_000) / 1000)) + 's';
+    return Math.floor(t / 3_600_000) + 'h ' + pad2(Math.floor((t % 3_600_000) / 60_000)) + 'm';
+  },
+};

package/src/web/client/ui/icons.ts

@@ -0,0 +1,183 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+export type ConsoleIconName =
+  | 'terminal'
+  | 'activity'
+  | 'chart'
+  | 'boxes'
+  | 'bot'
+  | 'settings'
+  | 'play'
+  | 'pause'
+  | 'power'
+  | 'image'
+  | 'folder-open'
+  | 'download'
+  | 'cpu'
+  | 'text'
+  | 'eye'
+  | 'eye-off'
+  | 'refresh';
+
+type Shape = readonly [tag: 'path' | 'circle' | 'rect' | 'line', attrs: Readonly<Record<string, string>>];
+
+const SHAPES: Readonly<Record<ConsoleIconName, readonly Shape[]>> = {
+  terminal: [
+    ['path', { d: 'm4 17 6-6-6-6' }],
+    ['path', { d: 'M12 19h8' }],
+  ],
+  activity: [
+    ['path', { d: 'M3 12h4l2-7 4 14 2-7h6' }],
+  ],
+  chart: [
+    ['path', { d: 'M4 19V9' }],
+    ['path', { d: 'M10 19V5' }],
+    ['path', { d: 'M16 19v-7' }],
+    ['path', { d: 'M22 19H2' }],
+  ],
+  boxes: [
+    ['path', { d: 'm12 2 7 4-7 4-7-4 7-4Z' }],
+    ['path', { d: 'm5 10 7 4 7-4' }],
+    ['path', { d: 'm5 14 7 4 7-4' }],
+  ],
+  bot: [
+    ['rect', { x: '5', y: '7', width: '14', height: '12', rx: '3' }],
+    ['path', { d: 'M12 3v4' }],
+    ['circle', { cx: '9', cy: '13', r: '1' }],
+    ['circle', { cx: '15', cy: '13', r: '1' }],
+  ],
+  settings: [
+    ['circle', { cx: '12', cy: '12', r: '3' }],
+    ['path', { d: 'M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21h-4v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3v-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.5V3h4v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.5 1h.1v4h-.1a1.7 1.7 0 0 0-1.5 1Z' }],
+  ],
+  play: [['path', { d: 'm8 5 11 7-11 7V5Z' }]],
+  power: [
+    ['path', { d: 'M12 3v8' }],
+    ['path', { d: 'M17.7 6.3a8 8 0 1 1-11.4 0' }],
+  ],
+  pause: [
+    ['rect', { x: '7', y: '5', width: '3', height: '14', rx: '1' }],
+    ['rect', { x: '14', y: '5', width: '3', height: '14', rx: '1' }],
+  ],
+  image: [
+    ['rect', { x: '3', y: '4', width: '18', height: '16', rx: '3' }],
+    ['circle', { cx: '9', cy: '10', r: '2' }],
+    ['path', { d: 'm21 15-4-4L5 20' }],
+  ],
+  'folder-open': [
+    ['path', { d: 'M3 6h6l2 2h10' }],
+    ['path', { d: 'M3 6v13h15l3-8H6l-3 8' }],
+  ],
+  download: [
+    ['path', { d: 'M12 3v12' }],
+    ['path', { d: 'm7 10 5 5 5-5' }],
+    ['path', { d: 'M5 21h14' }],
+  ],
+  cpu: [
+    ['rect', { x: '5', y: '5', width: '14', height: '14', rx: '2' }],
+    ['rect', { x: '9', y: '9', width: '6', height: '6', rx: '1' }],
+    ['path', { d: 'M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3' }],
+  ],
+  text: [
+    ['path', { d: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' }],
+    ['path', { d: 'M14 2v4a2 2 0 0 0 2 2h4' }],
+    ['path', { d: 'M10 9H8M16 13H8M16 17H8' }],
+  ],
+  eye: [
+    ['path', { d: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z' }],
+    ['circle', { cx: '12', cy: '12', r: '3' }],
+  ],
+  'eye-off': [
+    ['path', { d: 'M3 3l18 18' }],
+    ['path', { d: 'M10.6 5.2A10.9 10.9 0 0 1 12 5c6.5 0 10 7 10 7a17.3 17.3 0 0 1-3.2 4' }],
+    ['path', { d: 'M6.6 6.6C3.8 8.5 2 12 2 12s3.5 7 10 7c1.6 0 3-.4 4.3-1' }],
+    ['path', { d: 'M9.9 9.9a3 3 0 0 0 4.2 4.2' }],
+  ],
+  refresh: [
+    ['path', { d: 'M21 12a9 9 0 1 1-2.6-6.4' }],
+    ['path', { d: 'M21 3v6h-6' }],
+  ],
+};
+
+/**
+ * Cortico 字标。笔画与 README 横幅(assets/cortico-banner.svg)是同一份。
+ * 横幅上那四个圈(两只眼睛与两个字母 o)是品牌绿,这里改成跟当前主题的强调色走,
+ * 其余笔画取 currentColor。颜色写在样式表里:presentation 属性吃不下 var()。
+ */
+const WORDMARK_MARK: readonly Shape[] = [
+  ['path', { d: 'M182 63.66A84 84 0 1 0 182 192.34', 'stroke-width': '30' }],
+  ['circle', { cx: '113', cy: '117', r: '16', 'stroke-width': '11', class: 'accent' }],
+  ['circle', { cx: '163', cy: '117', r: '16', 'stroke-width': '11', class: 'accent' }],
+];
+
+const WORDMARK_TEXT: readonly Shape[] = [
+  ['path', { d: 'M230.97 93.03A24 24 0 1 0 230.97 126.97' }],
+  ['circle', { cx: '286', cy: '110', r: '24', class: 'accent' }],
+  ['path', { d: 'M341 86V134' }],
+  ['path', { d: 'M341 112A24 24 0 0 1 365 88' }],
+  ['path', { d: 'M412 70V134' }],
+  ['path', { d: 'M396 78H428' }],
+  ['path', { d: 'M459 86V134' }],
+  ['path', { d: 'M530.97 93.03A24 24 0 1 0 530.97 126.97' }],
+  ['circle', { cx: '586', cy: '110', r: '24', class: 'accent' }],
+];
+
+function shapesInto(doc: Document, parent: SVGElement, shapes: readonly Shape[]): void {
+  for (const [tag, attrs] of shapes) {
+    const child = doc.createElementNS(SVG_NS, tag);
+    for (const [key, value] of Object.entries(attrs)) child.setAttribute(key, value);
+    parent.appendChild(child);
+  }
+}
+
+export function wordmark(doc: Document, cls = 'wordmark'): SVGSVGElement {
+  const svg = doc.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '28 32 594 156');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add(cls);
+  // 字母前那个符号自带一套尺度,照横幅原样缩放,不重算坐标。
+  const mark = doc.createElementNS(SVG_NS, 'g');
+  mark.setAttribute('transform', 'translate(10 14) scale(.75)');
+  shapesInto(doc, mark, WORDMARK_MARK);
+  const text = doc.createElementNS(SVG_NS, 'g');
+  text.setAttribute('stroke-width', '16');
+  shapesInto(doc, text, WORDMARK_TEXT);
+  const dot = doc.createElementNS(SVG_NS, 'circle');
+  for (const [key, value] of Object.entries({ cx: '459', cy: '58', r: '9', fill: 'currentColor', stroke: 'none' })) {
+    dot.setAttribute(key, value);
+  }
+  svg.appendChild(mark);
+  svg.appendChild(text);
+  svg.appendChild(dot);
+  return svg;
+}
+
+/** 字标前那个符号单独用。视框按它自己的坐标取，描边算在内。 */
+export function brandMark(doc: Document, cls = 'brandmark'): SVGSVGElement {
+  const svg = doc.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '29 29 198 198');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('class', cls);
+  shapesInto(doc, svg, WORDMARK_MARK);
+  return svg;
+}
+
+export function icon(doc: Document, name: ConsoleIconName, cls = 'icon'): SVGSVGElement {
+  const svg = doc.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '1.8');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('class', cls);
+  shapesInto(doc, svg, SHAPES[name]);
+  return svg;
+}

package/src/web/client/ui/images.ts

@@ -0,0 +1,91 @@
+/** 归一化输入图片：只缩不放，合规原文件保持原字节。缩放后超限时改用 JPEG，仍超限或解码失败则拒收。 */
+
+import type { ConsoleImageAttachment, ConsolePromptImagesOptions } from '../../shared/client-panel.ts';
+import { S } from './strings.ts';
+
+export const IMAGE_MIMES: readonly string[] = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
+
+export const IMAGE_DEFAULTS: Required<ConsolePromptImagesOptions> = {
+  max: 8,
+  maxEdge: 2048,
+  maxBytes: 6 * 1024 * 1024,
+};
+
+export function isImageFile(file: { type: string }): boolean {
+  return IMAGE_MIMES.includes(file.type);
+}
+
+/** 只缩不放:长边不超过 `maxEdge` 的原样返回;缩放保持比例,四舍五入且不小于 1。 */
+export function fitWithin(width: number, height: number, maxEdge: number): { width: number; height: number } {
+  const edge = Math.max(width, height);
+  if (!(edge > maxEdge) || maxEdge <= 0) return { width, height };
+  const scale = maxEdge / edge;
+  return {
+    width: Math.max(1, Math.round(width * scale)),
+    height: Math.max(1, Math.round(height * scale)),
+  };
+}
+
+function toBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error ?? new Error(S.imageReadFailed));
+    reader.onload = () => {
+      const url = String(reader.result ?? '');
+      resolve(url.slice(url.indexOf(',') + 1));
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+
+function encode(bitmap: ImageBitmap, width: number, height: number, mime: string, quality?: number): Promise<Blob> {
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error(S.canvasUnsupported);
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error(S.imageEncodeFailed))), mime, quality);
+  });
+}
+
+/**
+ * 归一化一张图。拒收(不是图片、解码失败、缩到上限后仍超字节上限)以异常表达,
+ * 消息可直接给用户看。
+ */
+export async function normalizeImage(
+  file: File,
+  opts: ConsolePromptImagesOptions = {},
+): Promise<ConsoleImageAttachment> {
+  const { maxEdge, maxBytes } = { ...IMAGE_DEFAULTS, ...opts };
+  if (!isImageFile(file)) throw new Error(S.notImage(file.name || S.fileFallback));
+  let bitmap: ImageBitmap;
+  try {
+    bitmap = await createImageBitmap(file);
+  } catch {
+    throw new Error(S.undecodable(file.name || S.imageFallback));
+  }
+  try {
+    const name = file.name || 'image';
+    const fitted = fitWithin(bitmap.width, bitmap.height, maxEdge);
+    const untouched = fitted.width === bitmap.width && fitted.height === bitmap.height && file.size <= maxBytes;
+    if (untouched) {
+      return { name, mime: file.type, base64: await toBase64(file), bytes: file.size, width: bitmap.width, height: bitmap.height };
+    }
+    // 缩放后先试原格式(GIF 没有 canvas 编码器,退 PNG);超字节上限再退 JPEG。
+    const preferred = file.type === 'image/gif' ? 'image/png' : file.type;
+    let blob = await encode(bitmap, fitted.width, fitted.height, preferred);
+    let mime = preferred;
+    if (blob.size > maxBytes && preferred !== 'image/jpeg') {
+      blob = await encode(bitmap, fitted.width, fitted.height, 'image/jpeg', 0.85);
+      mime = 'image/jpeg';
+    }
+    if (blob.size > maxBytes) {
+      throw new Error(S.stillTooLarge(name, Math.round(maxBytes / 1024 / 1024)));
+    }
+    return { name, mime, base64: await toBase64(blob), bytes: blob.size, width: fitted.width, height: fitted.height };
+  } finally {
+    bitmap.close();
+  }
+}

package/src/web/client/ui/index.ts

@@ -0,0 +1,89 @@
+/** 每次面板挂载创建 ConsoleUi，绑定 memo 命名空间、signal 与浮层宿主。 */
+
+import type { ConsoleMemo, ConsoleUi, Disposable } from '../../shared/client-panel.ts';
+import { esc, h } from './dom.ts';
+import { consoleFormat } from './format.ts';
+import { kv, progress, statgrid, stat, table } from './data.ts';
+import { checkbox, field, input, segmented, select, textarea } from './fields.ts';
+import { copyButton, disable } from './actions.ts';
+import { log } from './log.ts';
+import { promptInput } from './prompt-input.tsx';
+import {
+  actions,
+  button,
+  chip,
+  foldSheet,
+  msgline,
+  pill,
+  placeholder,
+  rowbar,
+  section,
+  sheet,
+} from './sheet.ts';
+import type { Overlay, OverlayEnv } from './overlay.ts';
+import { busy, confirm, drawer, noopDisposable, toast } from './overlay.ts';
+
+export interface ConsoleUiDeps {
+  /** 面板局部持久化。`foldSheet` 的展开状态存这儿。 */
+  memo: ConsoleMemo;
+  /**
+   * toast / confirm / drawer 的挂载点。host 传 `document.body` 或一个专用容器。
+   * **不能是面板的 `root`**——那个在 unmount 时会被清空。
+   */
+  overlayHost: HTMLElement;
+  /** 面板的 ctx.signal，用于取消弹窗与释放资源。 */
+  signal: AbortSignal;
+  /** 缺省为 overlayHost.ownerDocument。 */
+  doc?: Document;
+}
+
+export function createConsoleUi(deps: ConsoleUiDeps): ConsoleUi {
+  const doc = deps.doc ?? deps.overlayHost.ownerDocument;
+  const signal = deps.signal;
+  const env: OverlayEnv = { doc, host: deps.overlayHost, signal };
+  // 同一实例只留一条 toast:后来的顶掉前面的,免得叠成一摞
+  let liveToast: Overlay | null = null;
+  // 抽出来是因为 copyButton 也要弹 toast,而"只留一条"这条规矩记在上面那个闭包里
+  const showToast = (text: string, tone?: 'ok' | 'bad'): Disposable => {
+    liveToast = toast(env, text, tone, liveToast);
+    // abort 之后 toast 不显示,但仍要给回一个句柄:调用方 `.dispose()` 不该炸
+    return liveToast ?? noopDisposable;
+  };
+
+  return {
+    h: (tag, cls, text) => h(doc, tag, cls, text),
+    esc,
+    sheet: (opts) => sheet(doc, opts),
+    foldSheet: (id, opts) => foldSheet(doc, deps.memo, signal, id, opts),
+    rowbar: () => rowbar(doc),
+    section: (title, description) => section(doc, title, description),
+    actions: () => actions(doc),
+    button: (label, opts) => button(doc, signal, label, opts),
+    copyButton: (text, opts) => copyButton(env, showToast, text, opts),
+    pill: (text, tone) => pill(doc, text, tone),
+    chip: (text, tone) => chip(doc, text, tone),
+    msgline: (text, bad) => msgline(doc, text, bad),
+    placeholder: (text) => placeholder(doc, text),
+    input: (opts) => input(doc, signal, opts),
+    select: (opts) => select(doc, signal, opts),
+    textarea: (opts) => textarea(doc, signal, opts),
+    promptInput: (opts) => promptInput(doc, signal, opts),
+    checkbox: (label, opts) => checkbox(doc, signal, label, opts),
+    field: (label, control) => field(doc, label, control),
+    segmented: (items, opts) => segmented(doc, signal, items, opts),
+    table: (opts) => table(doc, opts),
+    kv: (rows) => kv(doc, rows),
+    log: (opts) => log(doc, signal, opts),
+    stat: (item) => stat(doc, item),
+    statgrid: (items) => statgrid(doc, items),
+    progress: (opts) => progress(doc, opts),
+    toast: showToast,
+    confirm: (opts) => confirm(env, opts),
+    drawer: (title, body) => drawer(env, title, body),
+    busy: (title, text) => busy(env, title, text),
+    disable: (...els) => disable(els),
+    fmt: consoleFormat,
+  };
+}
+
+export { LOG_STICK_PX, shouldStick } from './log.ts';