prts-terrarchive 0.2.0

package/ui/rhine/investigation-layout.ts

@@ -0,0 +1,29 @@
+type Clue = { id: string; kind: string };
+// A report-sized clearing, three side sheets per side, and smaller upper/lower groups.
+// Slots are allocated in immutable clue-ID order, including withdrawn clues, so new arrivals do not reshuffle a board.
+export const INVESTIGATION_SLOTS = [
+  [-5.65, 2.35], [-5.65, .10], [-5.55, -2.20],
+  [5.55, 2.30], [5.65, .05], [5.60, -2.20],
+  [-2.78, 2.65], [0, 2.65], [2.78, 2.65],
+  [-2.78, -2.65], [0, -2.65], [2.78, -2.65],
+] as const;
+const preferences: Record<string, number[]> = {
+  excerpt: [0,1,2,6,9,7,10,8,11,3,4,5],
+  finding: [3,4,5,8,11,7,10,6,9,0,1,2],
+  relation: [7,10,6,8,9,11,4,1,3,0,5,2],
+  time: [10,9,11,2,5,1,4,6,8,0,3,7],
+  question: [9,11,10,2,5,6,8,1,4,0,3,7],
+  contrast: [4,8,11,3,5,6,9,7,10,1,0,2],
+};
+export const investigationClueIndex = (clue: Clue) => Math.max(0, Number(clue.id.replace(/^C/, '')) - 1 || 0);
+export function investigationPositions(clues: readonly Clue[]) {
+  const occupied = new Map<number, Set<number>>(), result = new Map<string, {x:number;y:number}>();
+  for (const clue of [...clues].sort((a,b) => investigationClueIndex(a) - investigationClueIndex(b))) {
+    const page = Math.floor(investigationClueIndex(clue) / 12), used = occupied.get(page) || new Set<number>();
+    const slot = (preferences[clue.kind] || preferences.finding).find(value => !used.has(value));
+    if (slot === undefined) continue;
+    used.add(slot); occupied.set(page,used);
+    const [x,y] = INVESTIGATION_SLOTS[slot]; result.set(clue.id,{x,y});
+  }
+  return result;
+}

package/ui/rhine/label-prefetch.ts

@@ -0,0 +1,34 @@
+export type LabelCandidate<T> = { item: T; lane: number; row: number; axis: 'row' | 'lane' | 'pointer' | 'activity'; offset: number };
+
+/** Shared by prediction and selection, including unbounded loop cells. */
+export function archivePointerTarget(counts: readonly number[], rows: readonly number[], slots: readonly number[],
+  current: number, selected: { lane: number; row: number }, index: number, cell?: { lane: number; row: number }) {
+  if (cell && cell.row === selected.row && cell.lane === selected.lane) return null;
+  const lane = Math.floor(index / 8), count = counts[lane] || 0;
+  const delta = cell && lane === current ? cell.row - selected.row : index % 8 - slots[lane];
+  const row = count ? ((rows[lane] + delta) % count + count) % count : 0;
+  return { lane, row, delta };
+}
+
+/** Explicit intent shares the same bounded working set with ordinary neighbours. */
+export function archiveLabelCandidates<T>(lanes: readonly (readonly T[])[], rows: readonly number[], current: number, limit = 6,
+  preferred: readonly LabelCandidate<T>[] = []) {
+  const wrap = (n: number, count: number) => (n % count + count) % count;
+  const result: LabelCandidate<T>[] = [];
+  if (!lanes.length) return result;
+  const seen = new Set<T>();
+  for (const candidate of preferred) {
+    if (seen.has(candidate.item) || result.length >= limit) continue;
+    seen.add(candidate.item); result.push(candidate);
+  }
+  const add = (lane: number, offset: number, axis: 'row' | 'lane') => {
+    lane = wrap(lane, lanes.length); const items = lanes[lane]; if (!items.length) return;
+    const row = wrap((rows[lane] || 0) + (axis === 'row' ? offset : 0), items.length), item = items[row];
+    if (lane === current && row === wrap(rows[current] || 0, items.length) || seen.has(item) || result.length >= limit) return;
+    seen.add(item); result.push({ item, lane, row, axis, offset });
+  };
+  add(current, -1, 'row'); add(current, 1, 'row');
+  add(current - 1, -1, 'lane'); add(current + 1, 1, 'lane');
+  add(current, -2, 'row'); add(current, 2, 'row');
+  return result;
+}

package/ui/rhine/looping-title.ts

@@ -0,0 +1,40 @@
+/** A continuous title loop with one accessible label and two visual copies. */
+export function createLoopingTitle(element: HTMLElement, initialText: string) {
+  let currentText: string | undefined;
+  let currentScrolling = true;
+  let track: HTMLSpanElement;
+  const measure = new ResizeObserver(entries => {
+    const width = entries[0]?.borderBoxSize[0]?.inlineSize;
+    if (width) track.style.setProperty('--rhine-title-duration', `${Math.max(10, width / 16)}s`);
+  });
+
+  function update(text: string, scrolling = true) {
+    // Status snapshots can repeat while an answer streams; keep the loop moving.
+    if (text === currentText && scrolling === currentScrolling) return;
+    currentText = text;
+    currentScrolling = scrolling;
+    measure.disconnect();
+    element.classList.add('rhine-loop-title');
+    element.classList.toggle('is-scrolling', scrolling);
+    element.title = text;
+
+    // This label sizes the viewport and is the only text read by assistive tech.
+    const label = document.createElement('span');
+    label.className = 'rhine-loop-title-label';
+    label.textContent = text;
+    track = document.createElement('span');
+    track.className = 'rhine-loop-title-track';
+    track.setAttribute('aria-hidden', 'true');
+    for (let index = 0; index < 2; index++) {
+      const copy = document.createElement('span');
+      copy.className = 'rhine-loop-title-copy';
+      copy.textContent = text;
+      track.append(copy);
+    }
+    element.replaceChildren(label, track);
+    if (scrolling) measure.observe(track.firstElementChild!, { box: 'border-box' });
+  }
+
+  update(initialText);
+  return { update, destroy: () => measure.disconnect() };
+}

package/ui/rhine/manual-search.css

@@ -0,0 +1,41 @@
+/* Manual retrieval shares the transparent archive HUD. */
+.rhine-workbench .rhine-query-form{display:flex;flex-direction:column}
+.rhine-workbench .rhine-search-controls{order:0;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 12px}
+.rhine-workbench .rhine-query-form>.search-field{order:1}
+.rhine-workbench .rhine-query-actions{order:2}
+.rhine-workbench .rhine-search-modes{display:flex;gap:25px;align-items:center}
+.rhine-workbench .rhine-search-modes button{font-size:14px;padding:8px 0;color:#888773;border-bottom:1px solid transparent}
+.rhine-workbench .rhine-search-modes button[aria-pressed=true]{color:#3d4833;border-bottom-color:#8c9273}
+.rhine-workbench .rhine-search-game{display:flex;align-items:center;gap:12px;font-size:11px;color:#858570}
+.rhine-workbench .rhine-search-controls select,.rhine-workbench .rhine-search-fields :is(input,select){background:transparent;color:#414b36;border:0;border-bottom:1px solid #aca995;border-radius:0;font:inherit;min-width:0;max-width:100%;padding:7px 3px;outline-offset:3px}
+.rhine-workbench .rhine-search-controls option,.rhine-workbench .rhine-search-fields option{background:#eeece2;color:#414b36}
+.rhine-workbench .rhine-search-advanced{order:3;margin-top:13px;border-block:1px solid #b5b09b70;font-size:11px;color:#858570}
+.rhine-workbench .rhine-search-advanced summary{cursor:pointer;list-style:disclosure-closed;padding:9px 0;width:fit-content;color:#576049}
+.rhine-workbench .rhine-search-advanced[open] summary{list-style:disclosure-open}
+.rhine-workbench .rhine-search-advanced summary span{margin-left:14px;font-size:10px;color:#96917c}
+.rhine-workbench .rhine-search-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 22px;padding:7px 0 13px;max-height:140px;overflow:auto;scrollbar-width:thin}
+.rhine-workbench .rhine-search-fields label{display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.6}
+.rhine-workbench .rhine-search-fields :is(input,select){font-size:12px;width:100%;box-sizing:border-box}
+.rhine-workbench .rhine-search-wide{grid-column:span 2}
+.rhine-workbench .rhine-search-settings-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 10px;font-size:10px}
+.rhine-workbench .rhine-search-settings-footer button{font-size:11px;white-space:nowrap;color:#616c4f}
+.rhine-workbench .rhine-search-cancel{font-size:11px;color:#9c785f;margin-right:15px}
+.rhine-workbench .rhine-index-modal .rhine-result-summary{line-height:1.7;max-height:60px;overflow:auto;scrollbar-width:thin}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-search-fields{grid-template-columns:repeat(2,minmax(0,1fr));max-height:125px;gap:10px 14px}
+.rhine-workbench [data-layout=portrait] .rhine-search-controls{gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:7px}
+.rhine-workbench [data-layout=portrait] .rhine-search-modes{gap:22px}
+.rhine-workbench [data-layout=portrait] .rhine-search-game{gap:7px;font-size:10px}
+.rhine-workbench [data-layout=portrait] .rhine-search-advanced{margin-top:9px}
+.rhine-workbench [data-layout=portrait] .rhine-search-settings-footer{align-items:flex-start;gap:12px;font-size:9px;line-height:1.6}
+
+.rhine-workbench [data-layout] .rhine-index-modal .rhine-query-actions{margin-top:0;padding-top:8px}
+.rhine-workbench [data-layout] .rhine-index-modal .modal-top{min-height:32px;padding-bottom:6px}
+.rhine-workbench [data-layout] .rhine-index-modal h2{margin:16px 0 12px}
+.rhine-workbench [data-layout] .rhine-index-modal .category-filters{padding:8px 0 6px}
+.rhine-workbench [data-layout] .rhine-index-modal .modal-bottom{margin-top:8px;padding-top:8px}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-index-modal h2{font-size:24px;margin:10px 0}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-index-modal .rhine-query-actions{font-size:10px;line-height:1.6}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-index-modal .result-header{padding:6px 0}
+.rhine-workbench [data-layout=portrait] .rhine-search-advanced summary span{display:none}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-index-modal{height:calc(100% - 24px);padding:10px 18px}
+.rhine-workbench [data-layout=compact] .rhine-search-fields{grid-template-columns:repeat(4,minmax(0,1fr))}

package/ui/rhine/manual-search.ts

@@ -0,0 +1,89 @@
+import type { RhineOptions } from './types';
+
+export const manualSearchControls = `
+<div class="rhine-search-controls">
+  <div class="rhine-search-modes" role="group" aria-label="检索来源"><button type="button" data-search-mode="local" aria-pressed="true">本地检索</button><button type="button" data-search-mode="cloud" aria-pressed="false">云端检索</button></div>
+  <label class="rhine-search-game">资料范围 <select name="games" aria-label="检索游戏范围"><option value="">已启用的资料库</option><option value="arknights">明日方舟</option><option value="endfield">终末地</option></select></label>
+</div>
+<details class="rhine-search-advanced"><summary>高级设置 <span>按需限定检索范围</span></summary>
+  <div class="rhine-search-fields">
+    <label data-search-for="local">资料类型<select name="resource_types"><option value="">全部类型</option><option value="original_story">剧情原文</option><option value="character_bundle">角色档案与模组</option><option value="reviewed_wiki">审校 Wiki</option><option value="entity_profile">实体资料</option><option value="timeline">时间线</option></select></label>
+    <label data-search-for="local">匹配方式<select name="match_mode"><option value="literal">原文关键词</option><option value="regex">正则表达式（线性子集）</option></select></label>
+    <label data-search-for="cloud" hidden>检索深度<select name="depth"><option value="">服务默认</option><option value="fast">快速</option><option value="standard">标准</option><option value="deep">深入</option></select></label>
+    <label data-search-for="cloud" hidden>来源范围<select name="evidence_policy"><option value="">服务默认</option><option value="mixed">综合资料</option><option value="original_only">仅原文</option></select></label>
+    <label data-search-for="cloud" hidden>检索方式<select name="search_intent"><option value="">自动判断</option><option value="quote_search">台词与引文</option><option value="scene_search">事件与场景</option><option value="single_sentence_search">模糊寻找一句原文</option></select></label>
+    <label data-search-for="cloud" hidden>候选审核<select name="validation"><option value="">服务默认</option><option value="none">跳过审核</option><option value="record_only">记录审核结果</option><option value="llm">启用模型审核</option></select></label>
+    <label>人物／实体<input name="entity_names" placeholder="如：塔露拉、科西切" maxlength="2000"/></label>
+    <label>说话人<input name="speakers" placeholder="填写原文说话人名称" maxlength="2000"/></label>
+    <label>活动／篇章<input name="activities" placeholder="如：怒号光明" maxlength="2000"/></label>
+    <label data-search-for="cloud" hidden>最多返回来源<input name="final_limit" type="number" min="1" max="100" step="1" placeholder="服务默认（可设 1–100）"/></label>
+    <label data-search-for="cloud" hidden class="rhine-search-wide">补充检索词<input name="query_variants" placeholder="等义表述，用分号分隔；最多 8 项" maxlength="4000"/></label>
+  </div><div class="rhine-search-settings-footer"><span>多项用逗号分隔；留空沿用默认。设置只用于本次手动检索。</span><button type="button" class="rhine-search-reset">恢复默认</button></div>
+</details>`;
+
+export function mountManualSearch(form: HTMLFormElement, api: RhineOptions['api'], changed: () => void) {
+  let mode: 'local' | 'cloud' = 'local', enabled: boolean | undefined;
+  let controller: AbortController | undefined;
+  const field = (name: string) => form.elements.namedItem(name) as HTMLInputElement | HTMLSelectElement;
+  const value = (name: string) => field(name).value.trim();
+  const list = (name: string) => [...new Set(value(name).split(/[,，、;；\n]+/u).map(v => v.trim()).filter(Boolean))];
+  const render = () => {
+    form.querySelectorAll<HTMLButtonElement>('[data-search-mode]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.searchMode === mode)));
+    form.querySelectorAll<HTMLElement>('[data-search-for]').forEach(element => element.hidden = element.dataset.searchFor !== mode);
+    const input = form.querySelector<HTMLInputElement>('#rhine-query')!;
+    input.maxLength = mode === 'cloud' ? 20000 : 512;
+    input.placeholder = mode === 'cloud' ? '描述你想寻找的资料、事件，或一句记不清的原文' : '搜索人物、剧情、机构或一句原文';
+    form.querySelector('.rhine-query-hint')!.textContent = mode === 'local' ? '检索已安装的本地资料；留空可浏览目录。'
+      : enabled === false ? '云端服务尚未启用，请在 PRTS 资料设置中开启。' : '向云端检索资料；返回后可阅读原文、收入档案架或证据盒。';
+  };
+  form.querySelectorAll<HTMLButtonElement>('[data-search-mode]').forEach(button => button.addEventListener('click', () => {
+    const next = button.dataset.searchMode as typeof mode;
+    if (next === mode) return;
+    mode = next; render(); changed();
+  }));
+  form.querySelector('.rhine-search-reset')!.addEventListener('click', () => {
+    form.querySelectorAll<HTMLInputElement | HTMLSelectElement>('.rhine-search-fields input,.rhine-search-fields select').forEach(element => element.value = element.name === 'match_mode' ? 'literal' : '');
+    field('games').value = ''; render();
+  });
+  render();
+  return {
+    get mode() { return mode; },
+    resetMode() { mode = 'local'; render(); },
+    async refresh() {
+      controller?.abort(); const current = new AbortController(); controller = current;
+      try {
+        const response = await api('archive.options', {}, current.signal);
+        if (current.signal.aborted || response?.error || response?.ok === false) return;
+        const data = response?.games ? response : response?.data;
+        if (!data?.games) return;
+        enabled = data.cloud_enabled;
+        for (const option of (field('games') as HTMLSelectElement).options) option.disabled = !!option.value && !data.games.includes(option.value);
+        if (value('games') && !data.games.includes(value('games'))) field('games').value = '';
+        render();
+      } catch { /* Search itself supplies actionable errors; an options refresh is optional. */ }
+    },
+    request(query: string): Record<string, unknown> {
+      const request: Record<string, unknown> = { query };
+      if (value('games')) request.games = [value('games')];
+      if (mode === 'local') {
+        if (value('resource_types')) request.resource_types = [value('resource_types')];
+        request.match_mode = value('match_mode');
+        for (const [input, key] of [['entity_names','entity_names'],['speakers','speakers'],['activities','activity_names']]) if (list(input).length) request[key] = list(input);
+      } else {
+        if (!query) throw new Error('请先输入想查找的问题或资料。');
+        if (enabled === false) throw new Error('云端检索尚未启用，请在 PRTS 资料设置中开启。');
+        for (const key of ['depth','evidence_policy']) if (value(key)) request[key] = value(key);
+        const options: Record<string, unknown> = {}, filters: Record<string, unknown> = {};
+        for (const key of ['search_intent','validation']) if (value(key)) options[key] = value(key);
+        for (const key of ['entity_names','speakers','activities']) if (list(key).length) filters[key] = list(key);
+        if (Object.keys(filters).length) options.filters = filters;
+        if (value('final_limit')) options.limits = { final_limit: Number(value('final_limit')) };
+        const variants = value('query_variants').split(/[;；\n]+/u).map(v => v.trim()).filter(Boolean);
+        if (variants.length) options.query_variants = [...new Set(variants)];
+        if (Object.keys(options).length) request.options = options;
+      }
+      return request;
+    },
+    dispose() { controller?.abort(); },
+  };
+}

package/ui/rhine/original/appearance.ts

@@ -0,0 +1,180 @@
+import * as THREE from "three";
+import { glassRevealGLSL, frostedTransmissionGLSL, FROSTED_ROUGHNESS } from "./glass-reveal.ts";
+import { internalOpticsFragment } from "./internal-optics.ts";
+
+type Surface = THREE.MeshPhysicalMaterial;
+type Palette = { high: Surface; low?: Surface };
+
+// The array and selected file share geometry. Morph their surface properties
+// on one mesh so transparent shells never overlap during a quality change.
+export class CardAppearance {
+  private palettes = new Map<string, Palette>();
+
+  register(name: string, high: Surface, low?: Surface) {
+    this.palettes.set(name, { high, low });
+  }
+
+  prepare(group: THREE.Group) {
+    for (const child of group.children) {
+      const mesh = child as THREE.Mesh;
+      const name = mesh.userData.surface as string;
+      const palette = this.palettes.get(name);
+      if (!palette) continue;
+      // Shelf borders use the array palette at both appearance endpoints.
+      const mat = (mesh.userData.useArrayMaterial && palette.low ? palette.low : palette.high).clone();
+      const amount = { value: 0 };
+      const clarity = { value: 0 };
+      mesh.material = mat;
+      if (mat.userData.opticalOrder)
+        mesh.renderOrder = mat.userData.opticalOrder;
+      mesh.userData.appearance = amount;
+      mesh.userData.glassClarity = clarity;
+      mat.onBeforeCompile = (shader) => {
+        if (mat.userData.opticalOrder)
+          shader.fragmentShader = internalOpticsFragment(shader.fragmentShader);
+        shader.uniforms.archiveQuality = amount;
+        shader.uniforms.archiveClarity = clarity;
+        shader.fragmentShader =
+          "uniform float archiveQuality;\nuniform float archiveClarity;\n" +
+          shader.fragmentShader;
+        if (name === "Frosted_Polymer") {
+          shader.vertexShader =
+            "varying float vArchiveHeight;\nvarying vec2 vArchiveProjectedAxis;\n" + shader.vertexShader;
+          shader.vertexShader = shader.vertexShader.replace(
+            "#include <begin_vertex>",
+            "#include <begin_vertex>\nvArchiveHeight = position.y / 3.7;",
+          );
+          shader.fragmentShader =
+            "varying float vArchiveHeight;\nvarying vec2 vArchiveProjectedAxis;\n" +
+            glassRevealGLSL +
+            shader.fragmentShader;
+          shader.vertexShader = shader.vertexShader.replace(
+            "#include <project_vertex>",
+            "#include <project_vertex>\nvArchiveProjectedAxis = 1.85 * vec2(projectionMatrix[0][0] * modelViewMatrix[1][0], projectionMatrix[1][1] * modelViewMatrix[1][1]) / max(0.0001, abs(mvPosition.z));",
+          );
+          shader.fragmentShader = shader.fragmentShader.replace(
+            "#include <transmission_pars_fragment>",
+            frostedTransmissionGLSL + "\n" + THREE.ShaderChunk.transmission_pars_fragment.replace(
+              "float lod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );",
+              "float lod = archiveTransmissionLod(roughness, ior, transmissionSamplerSize);",
+            ),
+          );
+          shader.fragmentShader = shader.fragmentShader.replace(
+            "#include <color_fragment>",
+            "#include <color_fragment>\ndiffuseColor.rgb *= mix(mix(vec3(0.40, 0.30, 0.20), vec3(1.0, 0.98, 0.94), smoothstep(0.1, 1.0, vArchiveHeight)), vec3(1.0), archiveQuality);",
+          );
+          shader.fragmentShader = shader.fragmentShader.replace(
+            "#include <roughnessmap_fragment>",
+            `#include <roughnessmap_fragment>\nroughnessFactor = mix(mix(0.28, ${FROSTED_ROUGHNESS}, archiveQuality), 0.025, glassRevealAtHeight(archiveClarity, vArchiveHeight));`,
+          );
+        } else if (!palette.low) {
+          // Stable screen-space coverage adds internal geometry without an
+          // abrupt visibility toggle or a second transparent body.
+          shader.fragmentShader = shader.fragmentShader.replace(
+            "#include <color_fragment>",
+            "#include <color_fragment>\nfloat coverage = fract(52.9829189 * fract(dot(gl_FragCoord.xy, vec2(0.06711056, 0.00583715))));\nif (archiveQuality <= coverage) discard;",
+          );
+        }
+      };
+      mat.customProgramCacheKey = () =>
+        `archive-surface-clarity-${name}-${Boolean(palette.low)}`;
+    }
+  }
+
+  setClarity(group: THREE.Group, value: number) {
+    const clarity = THREE.MathUtils.clamp(value, 0, 1);
+    // Traversal still works after the viewer reparents meshes into part groups.
+    group.traverse((child) => {
+      if (!(child instanceof THREE.Mesh) || !child.userData.glassClarity)
+        return;
+      child.userData.glassClarity.value = clarity;
+      if (child.userData.surface !== "Frosted_Polymer") return;
+      const mat = child.material as Surface;
+      const palette = this.palettes.get("Frosted_Polymer")!;
+      const quality = child.userData.appearance.value as number;
+      const baseline = (
+        key: "thickness" | "transmission" | "attenuationDistance",
+      ) =>
+        THREE.MathUtils.lerp(
+          palette.low?.[key] ?? palette.high[key],
+          palette.high[key],
+          quality,
+        );
+      mat.thickness = THREE.MathUtils.lerp(
+        baseline("thickness"),
+        0.018,
+        clarity,
+      );
+      mat.transmission = THREE.MathUtils.lerp(
+        baseline("transmission"),
+        0.985,
+        clarity,
+      );
+      mat.attenuationDistance = THREE.MathUtils.lerp(
+        baseline("attenuationDistance"),
+        8,
+        clarity,
+      );
+    });
+  }
+
+  apply(group: THREE.Group, value: number) {
+    for (const child of group.children) {
+      const mesh = child as THREE.Mesh;
+      if (mesh.userData.sharedShelfProxy) continue;
+      const palette = this.palettes.get(mesh.userData.surface);
+      if (!palette) {
+        // The printed canvas belongs to this file, including returning copies.
+        (mesh.material as THREE.MeshBasicMaterial).opacity = value;
+        continue;
+      }
+      mesh.userData.appearance.value = value;
+      const low = palette.low;
+      const high = mesh.userData.useArrayMaterial && low ? low : palette.high;
+      if (!low) continue;
+      const mat = mesh.material as Surface;
+      mat.color.copy(low.color).lerp(high.color, value);
+      if (
+        mat.attenuationColor &&
+        low.attenuationColor &&
+        high.attenuationColor
+      ) {
+        mat.attenuationColor
+          .copy(low.attenuationColor)
+          .lerp(high.attenuationColor, value);
+        mat.attenuationDistance =
+          Number.isFinite(low.attenuationDistance) &&
+          Number.isFinite(high.attenuationDistance)
+            ? THREE.MathUtils.lerp(
+                low.attenuationDistance,
+                high.attenuationDistance,
+                value,
+              )
+            : high.attenuationDistance;
+      }
+      for (const key of [
+        "roughness",
+        "metalness",
+        "transmission",
+        "thickness",
+        "clearcoat",
+        "clearcoatRoughness",
+      ] as const) {
+        mat[key] = THREE.MathUtils.lerp(low[key] ?? 0, high[key] ?? 0, value);
+      }
+      // Keep the same transmission shader/pass throughout the transition.
+      if (high.transmission > 0)
+        mat.transmission = Math.max(0.000001, mat.transmission);
+    }
+  }
+
+  dispose(group: THREE.Group) {
+    for (const child of group.children) {
+      const mesh = child as THREE.Mesh;
+      if (mesh.userData.sharedShelfProxy) continue;
+      const mat = mesh.material as THREE.MeshBasicMaterial;
+      if (!mesh.userData.surface && !mat.map?.userData.sharedArchiveLabel) mat.map?.dispose();
+      mat.dispose();
+    }
+  }
+}

package/ui/rhine/original/archive-label.ts

@@ -0,0 +1,84 @@
+import type * as THREE from 'three';
+
+export interface ArchiveLabel {
+  code: string;
+  title?: string;
+  sourceId?: string;
+}
+
+export const ARCHIVE_LABEL_NAME = 'Rhine_Archive_Label';
+export const ARCHIVE_LABEL_WIDTH = 1536;
+export const ARCHIVE_LABEL_HEIGHT = 714;
+export const ARCHIVE_LABEL_SIZE = { width: 0.99, height: 0.46 };
+const FONT = 'MiSans, "PingFang SC", "Microsoft YaHei", sans-serif';
+
+export function archiveLabelKey(label: ArchiveLabel) {
+  return JSON.stringify([label.code, label.title || '', label.sourceId || '']);
+}
+
+/** Match the authored cover plate in every view; only the cassette itself moves. */
+export function positionArchiveLabel(label: THREE.Object3D) {
+  label.rotation.set(0, 0, 0);
+  label.position.set(-1.36, 3.04, 0.255);
+}
+
+/** The array exposes one strip of the plate. Keep text there at a fixed size. */
+export function archiveTitleLine(title: string, measure: (text: string) => number, width: number): string {
+  const chars = Array.from(title.replace(/\s+/gu, ' ').trim());
+  const bounded = chars.slice(0, 1024).join('');
+  if (chars.length <= 1024 && measure(bounded) <= width) return bounded;
+  if (measure('…') > width) return '';
+  let low = 0, high = Math.min(chars.length, 1024);
+  while (low < high) {
+    const mid = Math.ceil((low + high) / 2);
+    if (measure(chars.slice(0, mid).join('') + '…') <= width) low = mid;
+    else high = mid - 1;
+  }
+  return chars.slice(0, low).join('').trimEnd() + '…';
+}
+
+/** Repaint only when content changes; no HTML, glyph meshes or per-frame uploads. */
+export function paintArchiveLabel(canvas: HTMLCanvasElement, mark: CanvasImageSource, label: ArchiveLabel) {
+  const c = canvas.getContext('2d')!;
+  c.setTransform(1, 0, 0, 1, 0, 0);
+  c.clearRect(0, 0, canvas.width, canvas.height);
+  c.setTransform(canvas.width / 1536, 0, 0, canvas.height / 714, 0, 0);
+  c.fillStyle = '#eeeae2';
+  c.fillRect(0, 0, 1536, 714);
+  c.fillStyle = '#9b9b8c';
+  c.fillRect(62, 36, 1412, 4);
+  const title = label.title?.trim() || (label.code === 'READING' ? '正在读取资料' : '莱茵生命 · 资料档案');
+  const separator = title.indexOf(' / ');
+  const name = separator > 0 ? title.slice(0, separator) : title;
+  const type = separator > 0 ? title.slice(separator + 3).replace(/\s+/gu, ' ').trim() : '';
+  c.font = `400 112px ${FONT}`;
+  const slashWidth = c.measureText('/').width, gap = 40, width = 1384, x = 76, baseline = 216;
+  c.font = `600 144px ${FONT}`;
+  c.fillStyle = '#353931';
+  const nameWidth = width - c.measureText(type).width - slashWidth - gap * 2;
+  if (type && nameWidth >= c.measureText('…').width) {
+    // Retain the document type even when a long entity name needs shortening.
+    const line = archiveTitleLine(name, value => c.measureText(value).width, nameWidth);
+    c.fillText(line, x, baseline);
+    const slashX = x + c.measureText(line).width + gap;
+    c.font = `400 112px ${FONT}`;
+    c.fillStyle = '#8a8c7e';
+    c.fillText('/', slashX, baseline);
+    c.font = `600 144px ${FONT}`;
+    c.fillStyle = '#353931';
+    c.fillText(type, slashX + slashWidth + gap, baseline);
+  } else {
+    c.fillText(archiveTitleLine(title, value => c.measureText(value).width, width), x, baseline);
+  }
+  c.fillStyle = '#b7b5a8';
+  c.fillRect(76, 404, 1384, 3);
+  c.fillStyle = '#353931';
+  c.font = `400 64px ${FONT}`;
+  c.fillText(label.code, 76, 617);
+  c.font = `400 51px ${FONT}`;
+  c.fillText('RHINE LAB, LLC.', 414, 574);
+  c.fillStyle = '#727568';
+  c.font = `34px ${FONT}`;
+  c.fillText('INTERNAL DATABASE / INFO', 414, 638);
+  c.drawImage(mark, 1320, 570, 140, 65);
+}

package/ui/rhine/original/archive-lighting.ts

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
+
+export type LightingLook = "baseline" | "refined";
+
+// The archive and its independent viewer use the same studio illumination.
+// Each renderer needs its own PMREM render target / WebGL texture.
+export function createArchiveLighting(
+  renderer: THREE.WebGLRenderer,
+  scene: THREE.Scene,
+  look: LightingLook = "baseline",
+) {
+  const refined = look === "refined";
+  renderer.toneMappingExposure = refined ? 1.0 : 1.05;
+  const pmrem = new THREE.PMREMGenerator(renderer);
+  const room = new RoomEnvironment();
+  scene.environment = pmrem.fromScene(room, 0.04).texture;
+  room.dispose();
+  pmrem.dispose();
+  scene.environmentIntensity = refined ? 0.52 : 0.48;
+  scene.add(
+    new THREE.HemisphereLight(
+      "#fffaf5",
+      refined ? "#b49b80" : "#b4a18c",
+      refined ? 0.5 : 0.65,
+    ),
+  );
+  const key = new THREE.DirectionalLight(
+    refined ? "#fff4e5" : "#fff7ed",
+    refined ? 1.7 : 1.4,
+  );
+  key.position.set(
+    ...((refined ? [-8, 14, 4] : [-6, 14, -5]) as [number, number, number]),
+  );
+  const fill = new THREE.DirectionalLight("#ffffff", refined ? 0.3 : 0.6);
+  fill.position.set(7, 8, -10);
+  scene.add(key, fill);
+  return key;
+}

package/ui/rhine/original/archive-loop.ts

@@ -0,0 +1,82 @@
+import { archiveColumns, columnFiles, fileLocation } from "./data.ts";
+
+export type ArchiveCell = { lane: number; row: number };
+export type ArchiveNavigation =
+  { axis: "row" | "lane"; direction: number } | { cell: ArchiveCell };
+
+export const LOOP_COLUMNS = 9;
+export const LOOP_ROWS = 32;
+export const COLUMN_SPACING = 5.2;
+export const ROW_SPACING = 0.62;
+const POOL_LANES = [0, 1, 2, 3, 4, -2, -1, 5, 6];
+
+export function wrap(value: number, count: number) {
+  return ((value % count) + count) % count;
+}
+
+// Choose an occurrence of an item in an unbounded sequence. Directional moves
+// use adjacent cells instead, so the last-to-first transition never reverses.
+export function nearestOccurrence(
+  value: number,
+  center: number,
+  period: number,
+) {
+  return value + Math.floor((center - value + period / 2) / period) * period;
+}
+
+export function fileAtCell({ lane, row }: ArchiveCell) {
+  const files = columnFiles(wrap(lane, archiveColumns.length));
+  return files[wrap(row - 12, files.length)];
+}
+
+export function selectionCell(
+  index: number,
+  current: ArchiveCell,
+  navigation?: ArchiveNavigation,
+): ArchiveCell {
+  if (navigation && "cell" in navigation) return { ...navigation.cell };
+  const next = fileLocation(index);
+  const row = nearestOccurrence(
+    next.row,
+    current.row,
+    columnFiles(next.lane).length,
+  );
+  if (navigation?.axis === "row") {
+    return { lane: current.lane, row: current.row + navigation.direction };
+  }
+  return {
+    lane:
+      navigation?.axis === "lane"
+        ? current.lane + navigation.direction
+        : nearestOccurrence(next.lane, current.lane, archiveColumns.length),
+    row,
+  };
+}
+
+// Preserve the reference animation's original first 160 instances. The four
+// extra columns form a hidden margin on either side during interactive use.
+export function poolCell(index: number): ArchiveCell {
+  return {
+    lane: POOL_LANES[Math.floor(index / LOOP_ROWS)],
+    row: index % LOOP_ROWS,
+  };
+}
+
+export function visibleCell(index: number, center: ArchiveCell): ArchiveCell {
+  return {
+    lane: nearestOccurrence(
+      POOL_LANES[Math.floor(index / LOOP_ROWS)],
+      center.lane,
+      LOOP_COLUMNS,
+    ),
+    row: nearestOccurrence(index % LOOP_ROWS, center.row, LOOP_ROWS),
+  };
+}
+
+export function cellKey(cell: ArchiveCell) {
+  return `${cell.lane}:${cell.row}`;
+}
+
+export function sameCell(a: ArchiveCell, b: ArchiveCell) {
+  return a.lane === b.lane && a.row === b.row;
+}