cortico 0.1.0

package/src/web/client/features/appearance/index.ts

@@ -0,0 +1,333 @@
+/** 外观页读取 ThemeStudio 状态；调色草稿仅用于预览，卸载时撤销预览。 */
+
+import type { Disposable } from '../../../shared/client-panel.ts';
+import type { FeatureContext, FrameworkFeature } from '../feature.ts';
+import { pageIntro } from '../../ui/page.ts';
+import {
+  THEME_APPEARANCE_LABELS,
+  THEME_MODES,
+  THEME_MODE_LABELS,
+  groupedThemeTokens,
+  normalizeHex,
+  type ThemeMode,
+  type ThemePalette,
+} from '../../theme/registry.ts';
+import { getThemeStudio, type ThemeSnapshot } from '../../theme/studio.ts';
+import { S } from './strings.ts';
+
+/** "再点一次确认删除"的解除武装时限。 */
+const DELETE_ARM_MS = 4000;
+const DELETE_LABEL = S.deleteScheme;
+
+/** 一格颜色的三个节点。改值时按 token key 找回来。 */
+interface ColorRow {
+  row: HTMLElement;
+  picker: HTMLInputElement;
+  hex: HTMLInputElement;
+}
+
+function schemeIdAt(target: EventTarget | null, stop: HTMLElement): string | null {
+  let node = target as HTMLElement | null;
+  while (node && node !== stop) {
+    const id = node.dataset?.schemeId;
+    if (id) return id;
+    node = node.parentElement;
+  }
+  return null;
+}
+
+export function mountAppearance(ctx: FeatureContext, opts: { embedded?: boolean } = {}): void {
+  const { ui, root, signal } = ctx;
+  const doc = root.ownerDocument;
+  const studio = getThemeStudio({ doc });
+  const intro = pageIntro(ui, S.pageTitle);
+
+  // 最先登记 = 最后释放:等订阅摘掉之后再撤预览,免得回调打在一个正在拆的页面上。
+  ctx.lifecycle.add(() => studio.resetPreview());
+
+  /** 用户正在调、尚未保存的一份调色板。 */
+  let draft: ThemePalette = studio.snapshot().palette;
+  let deleteArmed = false;
+  let disarmTimer: Disposable | null = null;
+
+  // ── 方案卡 ─────────────────────────────────────────────────────────
+
+  const schemeSheet = ui.sheet({
+    title: S.schemeSheetTitle,
+    en: 'theme schema',
+    desc: S.schemeSheetDesc,
+  });
+  const currentEl = ui.h('div', 'theme-current', '—');
+  const modes = ui.segmented(
+    THEME_MODES.map((m) => ({ value: m, label: THEME_MODE_LABELS[m] })),
+    {
+      value: studio.mode,
+      size: 'sm',
+      onSelect: (value) => {
+        studio.setMode(value as ThemeMode);
+        setMsg(S.switchedMode(THEME_MODE_LABELS[value as ThemeMode]));
+      },
+    },
+  );
+  const modeBar = ui.rowbar();
+  modeBar.append(modes.el, ui.h('span', 'grow'), currentEl);
+  const schemesBox = ui.h('div', 'theme-schemes');
+  schemesBox.addEventListener(
+    'click',
+    (ev) => {
+      const id = schemeIdAt(ev.target, schemesBox);
+      if (!id || !studio.select(id)) return;
+      setMsg(S.switchedScheme(studio.snapshot().scheme.name));
+    },
+    { signal },
+  );
+  schemeSheet.body.append(modeBar, schemesBox);
+
+  // ── 调色盘 ─────────────────────────────────────────────────────────
+
+  const paletteSheet = ui.sheet({
+    title: S.paletteSheetTitle,
+    en: 'palette',
+    desc: S.paletteSheetDesc,
+  });
+  const nameInput = ui.input({ cls: 'mono', placeholder: S.schemeName });
+  nameInput.maxLength = 40;
+  const paletteBox = ui.h('div', 'theme-palette');
+  const colorRows = new Map<string, ColorRow>();
+
+  for (const bucket of groupedThemeTokens()) {
+    const section = ui.h('section', 'theme-color-group');
+    section.appendChild(ui.h('h4', null, bucket.group));
+    const grid = ui.h('div', 'theme-color-grid');
+    for (const token of bucket.tokens) {
+      const row = ui.h('label', 'theme-color');
+      const picker = ui.h('input');
+      picker.type = 'color';
+      picker.setAttribute('aria-label', S.colorAria(token.label));
+      const hex = ui.h('input');
+      hex.type = 'text';
+      hex.maxLength = 7;
+      hex.spellcheck = false;
+      hex.setAttribute('aria-label', S.hexAria(token.label));
+      const edit = (value: string, from: HTMLInputElement): void => {
+        const normalized = normalizeHex(value);
+        row.classList.toggle('invalid', normalized === null);
+        if (!normalized) return;
+        draft[token.key] = normalized;
+        // 只回填**另一个**控件:回填正在打字的那个会把光标弹到末尾。
+        if (from !== picker) picker.value = normalized;
+        if (from !== hex) hex.value = normalized.toUpperCase();
+        studio.preview(draft);
+        setMsg(S.previewing);
+      };
+      picker.addEventListener('input', () => edit(picker.value, picker), { signal });
+      picker.addEventListener('change', () => { hex.value = picker.value.toUpperCase(); }, { signal });
+      hex.addEventListener('input', () => edit(hex.value, hex), { signal });
+      row.append(picker, ui.h('span', 'theme-color-label', token.label), hex);
+      grid.appendChild(row);
+      colorRows.set(token.key, { row, picker, hex });
+    }
+    section.appendChild(grid);
+    paletteBox.appendChild(section);
+  }
+
+  const msg = ui.msgline('');
+  msg.className = 'msgline grow';
+  msg.setAttribute('aria-live', 'polite');
+
+  const resetBtn = ui.button(S.resetPreview, {
+    onClick: () => {
+      studio.resetPreview();
+      setMsg(S.previewReset);
+    },
+  });
+  const deleteBtn = ui.button(DELETE_LABEL, {
+    variant: 'danger',
+    onClick: () => {
+      const snap = studio.snapshot();
+      if (!snap.scheme.custom) return;
+      if (!deleteArmed) {
+        deleteArmed = true;
+        deleteBtn.textContent = S.confirmDelete;
+        setMsg(S.aboutToDelete(snap.scheme.name), true);
+        disarmTimer?.dispose();
+        // 计时器走 lifecycle:离开这一页时自动取消,不会在一个已卸载的页面上回调。
+        disarmTimer = ctx.lifecycle.timeout(() => {
+          disarmDelete();
+          setMsg(S.deleteCancelled);
+        }, DELETE_ARM_MS);
+        return;
+      }
+      disarmDelete();
+      studio.removeCurrent();
+      setMsg(S.deleted(studio.snapshot().scheme.name));
+    },
+  });
+  const copyBtn = ui.button(S.copyAsNew, {
+    onClick: () => {
+      const snap = studio.snapshot();
+      const base = nameInput.value.trim() || snap.scheme.name;
+      studio.saveAs(base + (snap.scheme.custom ? S.copySuffix : S.customSuffix), draft);
+      setMsg(S.copied);
+    },
+  });
+  const saveBtn = ui.button(S.saveScheme, {
+    variant: 'primary',
+    onClick: () => {
+      const snap = studio.snapshot();
+      const raw = nameInput.value.trim();
+      if (snap.scheme.custom) {
+        studio.saveCurrent(raw || snap.scheme.name, draft);
+        setMsg(S.savedVariant(THEME_APPEARANCE_LABELS[snap.appearance]));
+      } else {
+        studio.saveAs(raw === snap.scheme.name ? S.customName(raw) : raw, draft);
+        setMsg(S.savedAsCustom);
+      }
+    },
+  });
+
+  const actions = ui.actions();
+  actions.classList.add('theme-actions');
+  actions.append(msg, resetBtn, deleteBtn, copyBtn, saveBtn);
+  paletteSheet.body.append(ui.field(S.schemeName, nameInput), paletteBox, actions);
+
+  const workbench = ui.h('div', 'theme-workbench');
+  workbench.append(paletteSheet.el, specimen(ctx));
+  if (!opts.embedded) root.appendChild(intro);
+  root.append(schemeSheet.el, workbench);
+
+  // ── 刷新 ───────────────────────────────────────────────────────────
+
+  function setMsg(text: string, bad = false): void {
+    msg.textContent = text;
+    msg.className = `msgline grow${bad ? ' bad' : ''}`;
+  }
+
+  function disarmDelete(): void {
+    disarmTimer?.dispose();
+    disarmTimer = null;
+    if (!deleteArmed) return;
+    deleteArmed = false;
+    deleteBtn.textContent = DELETE_LABEL;
+  }
+
+  function renderSchemes(snap: ThemeSnapshot): void {
+    schemesBox.textContent = '';
+    for (const scheme of snap.schemes) {
+      const card = ui.h('button', `theme-scheme${scheme.id === snap.selectedId ? ' active' : ''}`);
+      card.type = 'button';
+      card.dataset.schemeId = scheme.id;
+      card.setAttribute('aria-pressed', scheme.id === snap.selectedId ? 'true' : 'false');
+      const head = ui.h('div', 'theme-scheme-head');
+      head.append(
+        ui.h('span', null, scheme.name),
+        ui.h('span', 'theme-scheme-kind', scheme.builtin ? S.builtin : S.custom),
+      );
+      const swatches = ui.h('div', 'theme-swatches');
+      for (const color of scheme.swatches) {
+        const sw = ui.h('span');
+        sw.style.background = color;
+        swatches.appendChild(sw);
+      }
+      card.append(head, ui.h('div', 'theme-scheme-note', scheme.note), swatches);
+      schemesBox.appendChild(card);
+    }
+  }
+
+  function syncPalette(palette: ThemePalette): void {
+    for (const [key, row] of colorRows) {
+      const value = palette[key] ?? '#000000';
+      row.picker.value = value;
+      row.hex.value = value.toUpperCase();
+      row.row.classList.remove('invalid');
+    }
+  }
+
+  function refresh(): void {
+    disarmDelete();
+    const snap = studio.snapshot();
+    draft = snap.palette;
+    currentEl.textContent = `${snap.scheme.name} · ${THEME_APPEARANCE_LABELS[snap.appearance]}`;
+    nameInput.value = snap.scheme.name;
+    modes.setValue(snap.mode);
+    deleteBtn.classList.toggle('hidden', !snap.scheme.custom);
+    saveBtn.textContent = snap.scheme.custom ? S.saveCurrent : S.saveAsCustom;
+    renderSchemes(snap);
+    syncPalette(snap.palette);
+    if (snap.saveError) setMsg(S.saveFailed(snap.saveError), true);
+    else setMsg(snap.scheme.builtin ? S.builtinHint : S.customHint);
+  }
+
+  // 预览那一串变化不重画自己:值就是这一页刚写进去的,回填只会打断正在打字的输入框。
+  ctx.lifecycle.own(studio.onChange((change) => {
+    if (!change.preview) refresh();
+  }));
+  refresh();
+}
+
+/** 无交互的主题预览示例。 */
+function specimen(ctx: FeatureContext): HTMLElement {
+  const { ui } = ctx;
+  const card = ui.sheet({
+    title: S.specimenTitle,
+    en: 'live specimen',
+
+  });
+  card.el.classList.add('theme-preview-sheet');
+
+  const box = ui.h('div', 'theme-specimen');
+
+  // USER 组:内容列在前、记号栏在后(镜像)
+  const world = ui.h('div', 'grp r usergrp');
+  const worldCol = ui.h('div', 'gcol r');
+  const worldHead = ui.h('div', 'ghead');
+  worldHead.append(ui.h('span', 'meta ordinal', '#1'), ui.h('span', 'badge', 'USER'));
+  const worldBubble = ui.h('div', 'world');
+  worldBubble.appendChild(ui.h('div', 'world-line', '[system] 2 new events arrived.'));
+  worldCol.append(worldHead, worldBubble);
+  const worldGutter = ui.h('div', 'gutter');
+  worldGutter.appendChild(ui.h('span', 'glyph', '>_'));
+  world.append(worldCol, worldGutter);
+
+  // ASSISTANT 组:头像栏 + 内容列
+  const turn = ui.h('div', 'tcard turn grp');
+  const avatar = ui.h('div', 'gutter avatar');
+  avatar.appendChild(ui.h('span', 'avatar-fallback', 'B'));
+  const turnCol = ui.h('div', 'gcol');
+  const turnHead = ui.h('div', 'ghead turnhead');
+  turnHead.append(ui.h('span', 'badge', 'ASSISTANT'), ui.h('span', 'meta ordinal', '#2'));
+  const think = ui.h('div', 'think');
+  think.append(
+    ui.h('div', 'think-label', S.thinkLabel),
+    ui.h('div', 'think-body', S.thinkBody),
+  );
+  const monolog = ui.h('div', 'monolog');
+  monolog.appendChild(ui.h('div', 'monolog-body', S.monologBody));
+  turnCol.append(turnHead, think, monolog);
+  turn.append(avatar, turnCol);
+
+  const chart = ui.h('div', 'theme-chart-preview');
+  chart.setAttribute('aria-label', S.chartAria);
+  const bars: Array<[string, string]> = [
+    ['42%', 'chart-hit'], ['66%', 'chart-miss'], ['86%', 'chart-output'],
+    ['58%', 'chart-2'], ['74%', 'chart-3'], ['50%', 'chart-4'],
+  ];
+  for (const [height, key] of bars) {
+    const bar = ui.h('span');
+    bar.style.height = height;
+    bar.style.background = `var(--${key})`;
+    chart.appendChild(bar);
+  }
+
+  box.append(world, turn, chart);
+  card.body.appendChild(box);
+  return card.el;
+}
+
+/** 外观设置保存在浏览器本地，不依赖服务端能力。 */
+export const appearanceFeature: FrameworkFeature = {
+  route: 'appearance',
+  label: S.navLabel,
+  navMode: 'hidden',
+  mount: mountAppearance,
+};

package/src/web/client/features/appearance/strings.ts

@@ -0,0 +1,87 @@
+import { pick } from '../../core/language.ts';
+
+const zh = {
+  pageTitle: '外观',
+  deleteScheme: '删除方案',
+  schemeSheetTitle: '颜色方案',
+  schemeSheetDesc: "选择立即应用并保存在当前浏览器。",
+  switchedMode: (label: string) => `已切换到「${label}」`,
+  switchedScheme: (name: string) => `✓ 已切换到「${name}」`,
+  paletteSheetTitle: '调色盘',
+  paletteSheetDesc: "预览仅修改当前浅色或深色配色；保存后保留。",
+  schemeName: '方案名',
+  colorAria: (label: string) => `${label}颜色`,
+  hexAria: (label: string) => `${label}十六进制颜色`,
+  previewing: '● 正在预览，尚未保存',
+  resetPreview: '撤销预览',
+  previewReset: '已撤销未保存的调色预览',
+  confirmDelete: '再次点击确认删除',
+  aboutToDelete: (name: string) => `即将删除「${name}」；再次点击确认。`,
+  deleteCancelled: '已取消删除',
+  deleted: (name: string) => `已删除自定义方案，并切回「${name}」`,
+  copyAsNew: '复制为新方案',
+  copySuffix: ' 副本',
+  customSuffix: ' 自定义',
+  copied: '✓ 已复制为新的自定义方案',
+  saveScheme: '保存方案',
+  savedVariant: (appearance: string) => `✓ 当前${appearance}变体已保存`,
+  customName: (name: string) => `${name} 自定义`,
+  savedAsCustom: '✓ 内置方案已另存为自定义',
+  builtin: '内置',
+  custom: '自定义',
+  saveCurrent: '保存当前方案',
+  saveAsCustom: '另存为自定义',
+  builtinHint: '内置方案不可覆盖；调色后可另存为自定义。',
+  saveFailed: (reason: string) => `配色没能存进部署：${reason}`,
+  customHint: '自定义方案可直接保存；浅色与黑夜变体互相独立。',
+  specimenTitle: '组件试色',
+  thinkLabel: '思考',
+  thinkBody: "思考文本预览",
+  monologBody: "正文预览",
+  chartAria: '图表系列色预览',
+  navLabel: '外观',
+};
+
+const en: typeof zh = {
+  pageTitle: 'Appearance',
+  deleteScheme: 'Delete scheme',
+  schemeSheetTitle: 'Color scheme',
+  schemeSheetDesc: "Selection applies immediately and is saved in this browser.",
+  switchedMode: (label: string) => `Switched to "${label}"`,
+  switchedScheme: (name: string) => `✓ Switched to "${name}"`,
+  paletteSheetTitle: 'Palette',
+  paletteSheetDesc: "Preview edits only the current light or dark palette. Save to keep the changes.",
+  schemeName: 'Scheme name',
+  colorAria: (label: string) => `${label} color`,
+  hexAria: (label: string) => `${label} hex color`,
+  previewing: '● Previewing, not saved yet',
+  resetPreview: 'Discard preview',
+  previewReset: 'Unsaved palette preview discarded',
+  confirmDelete: 'Click again to confirm deletion',
+  aboutToDelete: (name: string) => `About to delete "${name}"; click again to confirm.`,
+  deleteCancelled: 'Deletion cancelled',
+  deleted: (name: string) => `Custom scheme deleted, switched back to "${name}"`,
+  copyAsNew: 'Copy as new scheme',
+  copySuffix: ' copy',
+  customSuffix: ' custom',
+  copied: '✓ Copied as a new custom scheme',
+  saveScheme: 'Save scheme',
+  savedVariant: (appearance: string) => `✓ Current ${appearance} variant saved`,
+  customName: (name: string) => `${name} custom`,
+  savedAsCustom: '✓ Built-in scheme saved as a custom scheme',
+  builtin: 'Built-in',
+  custom: 'Custom',
+  saveCurrent: 'Save current scheme',
+  saveAsCustom: 'Save as custom',
+  builtinHint: 'Built-in schemes cannot be overwritten; edit the palette and save as custom.',
+  saveFailed: (reason: string) => `The palette was not saved to the deployment: ${reason}`,
+  customHint: 'Custom schemes save directly; the light and dark variants are independent.',
+  specimenTitle: 'Component specimen',
+  thinkLabel: 'Reasoning',
+  thinkBody: "Reasoning text preview",
+  monologBody: "Message text preview",
+  chartAria: 'Chart series color preview',
+  navLabel: 'Appearance',
+};
+
+export const S = pick({ zh, en });

package/src/web/client/features/config/index.ts

@@ -0,0 +1,11 @@
+export {
+  configField,
+  createConfigView,
+  type ConfigField,
+  type ConfigGroup,
+  type ConfigGroupEntry,
+  type ConfigProperty,
+  type ConfigValue,
+  type ConfigView,
+  type ConfigViewDeps,
+} from './view.ts';

package/src/web/client/features/config/strings.ts

@@ -0,0 +1,41 @@
+import { pick } from '../../core/language.ts';
+
+const zh = {
+  loading: '加载中…',
+  optionCurrent: '(当前)',
+  ownerPersona: 'Persona',
+  chooseFile: '选择文件',
+  chooseDirectory: '选择目录',
+  recommendedDir: (dir: string) => `推荐目录：${dir}`,
+  download: '下载',
+  on: '开启',
+  leaveBlank: '留空',
+  saving: '保存中…',
+  saveFailed: (err: string) => '失败: ' + err,
+  emptyDefault: "此页没有配置项。",
+  noSchema: "未提供配置项。",
+  restartWorld: '重启 World 生效',
+  restartProcess: '重启生效',
+  loadFailed: (err: string) => '配置项加载失败: ' + err,
+};
+
+const en: typeof zh = {
+  loading: 'Loading…',
+  optionCurrent: '(current)',
+  ownerPersona: 'Persona',
+  chooseFile: 'Choose file',
+  chooseDirectory: 'Choose directory',
+  recommendedDir: (dir: string) => `Recommended directory: ${dir}`,
+  download: 'Download',
+  on: 'On',
+  leaveBlank: 'Leave blank',
+  saving: 'Saving…',
+  saveFailed: (err: string) => 'Failed: ' + err,
+  emptyDefault: "No configuration fields on this page.",
+  noSchema: "No configuration fields provided.",
+  restartWorld: 'takes effect after World restart',
+  restartProcess: 'takes effect after restart',
+  loadFailed: (err: string) => 'Failed to load config: ' + err,
+};
+
+export const S = pick({ zh, en });