prts-terrarchive 0.2.0

package/ui/rhine/readability.css

@@ -0,0 +1,46 @@
+/* Reading and shelf text have their own scale; the room keeps its camera framing. */
+.rhine-workbench .rhine-original-stage{
+  --reader-font:max(19px,calc(16px / var(--stage-scale,1)));
+  --reader-action-font:max(14px,calc(12px / var(--stage-scale,1)));
+  --reader-title-font:34px;
+}
+.rhine-workbench [data-layout=desktop] .rhine-reader{
+  left:56%;width:min(780px,calc(44% - var(--edge)));top:24%;bottom:128px;
+  max-height:calc(76% - 128px)!important;
+}
+.rhine-workbench .rhine-reader .rhine-reader-title{
+  font-size:var(--reader-title-font)!important;max-width:none;overflow-wrap:anywhere;
+}
+.rhine-workbench .rhine-reader :is(.rhine-line-text,.rhine-excerpt-text){
+  font-size:var(--reader-font);line-height:1.85;min-width:0;
+}
+.rhine-workbench .rhine-reader .rhine-line-text{flex:1}
+.rhine-workbench .rhine-reader :is(.rhine-reader-actions,.rhine-reader-more){font-size:var(--reader-action-font)}
+.rhine-workbench .rhine-reader .rhine-reader-actions{flex-wrap:wrap;gap:10px 18px}
+.rhine-workbench .rhine-reader :is(.rhine-reader-meta,.rhine-reader-back-report,.rhine-close-reader){font-size:13px}
+.rhine-workbench .rhine-reader :is(.rhine-reader-provenance,.rhine-line-number,.rhine-reader-footer){font-size:11px}
+.rhine-workbench .rhine-reader :is(.rhine-reader-ranges button,.rhine-excerpt-label){font-size:12px}
+.rhine-workbench .rhine-reader .rhine-speaker{font-size:15px}
+.rhine-workbench [data-layout=desktop] .rhine-desk-panel{width:min(440px,calc(37% - var(--edge)))}
+.rhine-workbench [data-layout=desktop] .rhine-shelf-title{font-size:25px;line-height:1.55}
+.rhine-workbench [data-layout=desktop] :is(.rhine-rack-intro,.rhine-shelf-excerpt){font-size:14px}
+.rhine-workbench [data-layout=desktop] :is(.rhine-shelf-meta,.rhine-shelf-number,.rhine-desk-item,.rhine-desk-pagination,.rhine-rack-legend){font-size:12px}
+.rhine-workbench [data-layout=desktop] :is(.rhine-shelf-open,.rhine-shelf-report){font-size:14px}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]){
+  --reader-font:16px;--reader-action-font:12px;--reader-title-font:24px;
+}
+.rhine-workbench [data-layout=portrait]{--reader-title-font:23px}
+.rhine-workbench [data-layout=portrait] .rhine-desk-panel{top:51%;bottom:205px;max-height:none;background:rgba(234,229,225,.95)}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-shelf-title{font-size:21px}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) :is(.rhine-rack-intro,.rhine-shelf-meta,.rhine-shelf-excerpt,.rhine-shelf-open){font-size:12px}
+@media(max-height:500px) and (orientation:landscape){
+  .rhine-workbench [data-layout=compact]{--reader-title-font:20px}
+  .rhine-workbench [data-layout=compact][data-mode=detail] .rhine-reader{top:76px;bottom:32px}
+  .rhine-workbench [data-layout=compact] .rhine-reader .detail-kicker{min-height:18px}
+  .rhine-workbench .rhine-reader .rhine-reader-title{margin-bottom:2px!important}
+  .rhine-workbench .rhine-reader .rhine-reader-meta{font-size:11px}
+  .rhine-workbench .rhine-reader .detail-rule{margin-top:4px}
+  .rhine-workbench .rhine-reader .rhine-reader-provenance{max-height:18px;margin-top:4px}
+  .rhine-workbench .rhine-reader .rhine-reader-actions{gap:5px 10px;padding:5px 0;margin-top:5px}
+  .rhine-workbench [data-layout=compact] .rhine-reader-body{padding:4px 0 6px}
+}

package/ui/rhine/reading-object.ts

@@ -0,0 +1,96 @@
+import * as THREE from 'three';
+import { ARCHIVE_LABEL_LAYER } from './original/label-renderer';
+export const READING_ENTER_MS = 420;
+export const READING_RETURN_MS = 360;
+// Linear x control points make this curve match smoothstep in the scene.
+export const READING_FADE_EASING = 'cubic-bezier(0.333333,0,0.666667,1)';
+export function readingFrameTime() { return Number(document.timeline.currentTime ?? performance.now()); }
+export interface ReadingObject { title: string; code: string; kind: 'report' | 'clue'; enterStartedAt?: number; returnStartedAt?: number }
+
+/** A report folio in the existing renderer, distinct from the source cassettes. */
+export function createReadingObject(printMaterial: (texture: THREE.Texture) => THREE.MeshBasicMaterial) {
+  const group = new THREE.Group(); group.name = 'Rhine_Research_Folio'; group.visible = false;
+  const folio = new THREE.Group(); group.add(folio); folio.rotation.set(.035, -.20, -.045);
+  const geometry = new THREE.BoxGeometry(1, 1, 1), face = new THREE.PlaneGeometry(3.45, 4.98);
+  const materials: THREE.Material[] = [];
+  const material = (color: string, roughness = .8, metalness = 0) => {
+    const value = new THREE.MeshStandardMaterial({color, roughness, metalness, fog: false}); materials.push(value); return value;
+  };
+  const ivory = material('#e8e1d4'), paper = material('#faf8ee'), spine = material('#9b9f89'), metal = material('#b8aa8d', .38, .65);
+  const box = (w: number, h: number, d: number, x: number, y: number, z: number, mat: THREE.Material) => {
+    const mesh = new THREE.Mesh(geometry, mat); mesh.scale.set(w, h, d); mesh.position.set(x, y, z); folio.add(mesh); return mesh;
+  };
+  box(3.95,5.55,.16,0,0,-.14,ivory);
+  for(let i=0;i<7;i++) box(3.72,5.25,.025,.035+i*.006,-.015+i*.008,-.045+i*.032,paper);
+  box(.22,5.52,.39,-1.84,0,.01,spine);
+  box(3.86,5.45,.06,.055,.035,.22,ivory);
+  box(.07,5.40,.022,-1.48,.035,.257,metal);
+  for(let i=0;i<3;i++) box(.20,.44,.065,2.01,1.65-i*.65,.11,i===0?spine:ivory);
+  box(1.00,.21,.12,.02,2.67,.30,metal);
+  box(.70,.055,.16,.02,2.80,.27,metal);
+  const canvas=document.createElement('canvas'); canvas.width=896; canvas.height=1296;
+  const context=canvas.getContext('2d')!;
+  const texture=new THREE.CanvasTexture(canvas);texture.colorSpace=THREE.SRGBColorSpace;
+  const ink=printMaterial(texture);materials.push(ink);
+  const cover=new THREE.Mesh(face,ink);cover.layers.set(ARCHIVE_LABEL_LAYER);cover.position.set(.11,.015,.259);folio.add(cover);
+  const materialState=materials.map(material=>({material,opacity:material.opacity,transparent:material.transparent,depthWrite:material.depthWrite}));
+  let signature='', enterStartedAt=0, returnStartedAt:number|undefined, closingFrom=1, appliedOpacity=-1, reduced=false;
+  const ease=(value:number)=>value*value*(3-2*value);
+  const enterProgress=(now=readingFrameTime())=>reduced?1:THREE.MathUtils.clamp((now-enterStartedAt)/READING_ENTER_MS,0,1);
+  const progress=(now=readingFrameTime())=>returnStartedAt===undefined?0:reduced?1:THREE.MathUtils.clamp((now-returnStartedAt)/READING_RETURN_MS,0,1);
+  const opacity=(now=readingFrameTime())=>returnStartedAt===undefined?ease(enterProgress(now)):closingFrom*(1-ease(progress(now)));
+  function applyOpacity(value:number){
+    if(value===appliedOpacity)return;appliedOpacity=value;
+    for(const state of materialState){
+      const {material}=state, fading=value<1;
+      material.opacity=state.opacity*value;material.depthWrite=fading?false:state.depthWrite;
+      const transparent=fading||state.transparent;
+      if(material.transparent!==transparent){material.transparent=transparent;material.needsUpdate=true;}
+    }
+  }
+  const boardReveal=()=>group.visible?1-opacity():1;
+  const local=new THREE.Vector3();
+  function screenBounds(camera?:THREE.PerspectiveCamera){
+    if(!camera)return undefined;
+    cover.updateWorldMatrix(true,false);
+    const corners=[[-1.725,-2.49],[1.725,-2.49],[1.725,2.49],[-1.725,2.49]].map(([x,y])=>new THREE.Vector3(x,y,0).applyMatrix4(cover.matrixWorld).project(camera));
+    return [Math.min(...corners.map(p=>p.x)),Math.min(...corners.map(p=>p.y)),Math.max(...corners.map(p=>p.x)),Math.max(...corners.map(p=>p.y))];
+  }
+  return {group,
+    set(value:ReadingObject|null,skipMotion=false){
+      reduced=skipMotion;
+      if(!value){group.visible=false;returnStartedAt=undefined;applyOpacity(1);return;}
+      if(!group.visible||value.enterStartedAt!==undefined&&value.enterStartedAt!==enterStartedAt){
+        enterStartedAt=value.enterStartedAt??readingFrameTime();returnStartedAt=undefined;
+      }
+      if(value.returnStartedAt!==undefined&&value.returnStartedAt!==returnStartedAt)closingFrom=opacity(value.returnStartedAt);
+      returnStartedAt=value.returnStartedAt;group.visible=true;applyOpacity(opacity());
+      const next=JSON.stringify([value.title,value.code,value.kind]);if(next===signature)return;signature=next;
+      context.fillStyle='#e8e1d4';context.fillRect(0,0,896,1296);
+      context.fillStyle='#343a30';context.font='600 52px MiSans, sans-serif';context.fillText('RHINE LAB',56,112);
+      context.fillStyle='#7f826e';context.font='20px MiSans, sans-serif';context.fillText('RESEARCH / INFORMATION ANALYSIS',59,154);
+      context.strokeStyle='#b2ad99';context.lineWidth=2;context.beginPath();context.moveTo(58,207);context.lineTo(826,207);context.stroke();
+      context.font='22px MiSans, sans-serif';context.fillText(value.kind==='report'?'INVESTIGATION REPORT':'EVIDENCE / RESEARCH NOTE',58,295);
+      context.fillStyle='#343a30';context.font='500 44px MiSans, sans-serif';
+      let line='',row=0;for(const char of value.title){if(context.measureText(line+char).width>732){context.fillText(line,58,386+row*70);line='';row++;if(row===4)break;}line+=char;}
+      if(row<4)context.fillText(line,58,386+row*70);
+      context.fillStyle='#8a8e79';context.fillRect(58,840,62,5);context.font='27px MiSans, sans-serif';context.fillText(value.kind==='report'?'调查报告':'线索记录',58,900);
+      context.font='18px MiSans, sans-serif';context.fillText('TERRARCHIVE / RESEARCH DIVISION',58,942);
+      context.strokeStyle='#b2ad99';context.beginPath();context.moveTo(58,1110);context.lineTo(826,1110);context.stroke();
+      context.fillStyle='#4f5943';context.font='32px MiSans, sans-serif';context.fillText(value.code,58,1180);
+      context.font='16px MiSans, sans-serif';context.fillText('ARCHIVE COPY',665,1180);texture.needsUpdate=true;
+    },
+    update(camera:THREE.PerspectiveCamera,width:number,height:number,skipMotion=false){
+      if(!group.visible)return;
+      reduced=skipMotion;applyOpacity(opacity());
+      const distance=14,span=2*Math.tan(THREE.MathUtils.degToRad(camera.fov/2))*distance,wide=span*camera.aspect;
+      const portrait=width/height<.82;
+      const scale=portrait?Math.min(span*.25/5.55,wide*.5/4.2):Math.min(span*.61/5.55,wide*.37/4.2);
+      local.set(portrait?0:-wide*.245,portrait?span*.245:-span*.03,-distance).applyMatrix4(camera.matrixWorld);
+      group.position.copy(local);group.quaternion.copy(camera.quaternion);group.scale.setScalar(scale);
+    },
+    boardReveal(skipMotion=false){reduced=skipMotion;return boardReveal();},
+    stats(camera?:THREE.PerspectiveCamera){return {screenBounds:screenBounds(camera),visible:group.visible,kind:'research-folio',meshes:folio.children.length,enterProgress:enterProgress(),returnProgress:progress(),opacity:group.visible?appliedOpacity:0,boardReveal:boardReveal(),scale:group.scale.x,position:group.position.toArray(),rotation:folio.rotation.toArray(),materialsRestored:materialState.every(s=>s.material.transparent===s.transparent&&s.material.depthWrite===s.depthWrite&&s.material.opacity===s.opacity)};},
+    dispose(){group.removeFromParent();geometry.dispose();face.dispose();texture.dispose();materials.forEach(m=>m.dispose());}
+  };
+}

package/ui/rhine/reading-origin.ts

@@ -0,0 +1,28 @@
+import type { RhineLocation } from './types';
+
+export type ReadingOriginKind = 'search' | 'rack' | 'report' | 'basket' | 'log' | 'investigation' | 'archive' | 'desk' | 'board';
+export interface ReadingOrigin {
+  kind: ReadingOriginKind;
+  location: RhineLocation;
+  sessionId: string;
+  sourceId: string;
+  focus: HTMLElement | null;
+  scroll: { element: HTMLElement; top: number; left: number }[];
+  arrayExpanded: boolean;
+}
+export const readingOriginLabel = (kind: ReadingOriginKind, boardKind?: 'report' | 'clue' | 'inbox') =>
+  kind === 'investigation' ? boardKind === 'inbox' ? '返回证据盒' : boardKind === 'clue' ? '返回线索' : '返回报告'
+    : ({ search: '返回搜索结果', rack: '返回档案目录', report: '返回报告', basket: '返回摘录', log: '返回调查记录', archive: '返回检索阵列', desk: '返回档案架', board: '返回调查板' } as const)[kind];
+
+export function captureReadingOrigin(root: HTMLElement, value: Omit<ReadingOrigin, 'focus' | 'scroll'>): ReadingOrigin {
+  return { ...value, focus: document.activeElement instanceof HTMLElement ? document.activeElement : null,
+    scroll: [...root.querySelectorAll<HTMLElement>('*')].filter(element => element.scrollTop || element.scrollLeft)
+      .map(element => ({ element, top: element.scrollTop, left: element.scrollLeft })) };
+}
+export function restoreReadingOrigin(root: HTMLElement, origin: ReadingOrigin) {
+  const target = origin.focus?.isConnected && origin.focus.getClientRects().length && !origin.focus.closest('[hidden],[inert]')
+    ? origin.focus : [...root.querySelectorAll<HTMLElement>('[data-source-id]')].find(element =>
+      element.dataset.sourceId === origin.sourceId && element.getClientRects().length && !element.closest('[hidden],[inert]'));
+  target?.focus({ preventScroll: true });
+  for (const { element, top, left } of origin.scroll) if (element.isConnected) { element.scrollTop = top; element.scrollLeft = left; }
+}

package/ui/rhine/reading-room.css

@@ -0,0 +1,55 @@
+/* A physical document at left, a quiet transparent reading surface at right. */
+.rhine-workbench{--reading-ink:#30362b;--reading-muted:#7d806e;--reading-rule:#aca78f88}
+.rhine-workbench :is(.rhine-investigation-report,.rhine-investigation-drawer){position:absolute;inset:0;z-index:45;width:auto;max-width:none;padding:0;border:0;box-shadow:none;backdrop-filter:none;overflow:hidden;color:var(--reading-ink);background:linear-gradient(90deg,transparent 38%,#ebe8e04d 50%,#ebe8e0e0 72%,#ebe8e0eb 100%)}
+.rhine-workbench .rhine-investigation-report>header,.rhine-workbench .rhine-investigation-drawer-top{position:absolute;left:56%;right:5%;top:22%;height:36px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0;border:0;font-size:11px;letter-spacing:.06em;color:var(--reading-muted)}
+.rhine-workbench .rhine-investigation-report>header{flex-wrap:wrap;height:auto;min-height:36px}
+.rhine-workbench .rhine-investigation-report>header select{max-width:42%;min-width:0;letter-spacing:0}
+.rhine-workbench .rhine-investigation-report>header button,.rhine-workbench .rhine-investigation-drawer-top button{margin-left:auto;white-space:nowrap;color:var(--reading-ink);font-size:12px;min-height:32px}
+.rhine-workbench .rhine-investigation-report-scroll,.rhine-workbench .rhine-investigation-drawer-body{position:absolute;left:56%;right:5%;top:29%;bottom:12%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9a9b8170 transparent;padding:0 12px 20px 0;outline-offset:-2px}
+.rhine-workbench .rhine-investigation-report-intro>h2,.rhine-workbench .rhine-investigation-drawer-body>h2{font-size:30px;line-height:1.5;font-weight:550;margin:0 0 15px;text-wrap:pretty}
+.rhine-workbench .rhine-investigation-report-notice{font-size:11px;line-height:1.8;color:var(--reading-muted);margin:0 0 24px;padding:0 0 20px;border-bottom:1px solid var(--reading-rule)}
+.rhine-workbench .rhine-investigation-report .rhine-report-body{max-width:none;width:auto;height:auto;overflow:visible;padding:0;font-size:17px;line-height:1.95}
+.rhine-workbench .rhine-investigation-clue-text{font-size:17px;line-height:1.95;white-space:normal}
+.rhine-workbench .rhine-investigation-drawer-body>h3{font-size:12px;letter-spacing:.08em;border-top:1px solid var(--reading-rule);padding-top:18px;margin-top:30px}
+.rhine-workbench .rhine-investigation-report .rhine-report-body>:not(.rhine-report-table){max-width:none}
+.rhine-workbench .rhine-investigation-provenance{padding-bottom:20px;border-bottom:1px solid var(--reading-rule);color:var(--reading-muted)}
+.rhine-workbench .rhine-report.modal-backdrop{background:transparent;backdrop-filter:none}
+.rhine-workbench .rhine-report-modal{position:absolute;left:56%;right:5%;top:22%;bottom:12%;width:auto;height:auto;max-height:none;padding:0;background:linear-gradient(90deg,#ebe8e0b3,#ebe8e0eb);box-shadow:none;border:0}
+.rhine-workbench .rhine-report-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding-top:16px}
+.rhine-workbench .rhine-report-outline{max-height:68px;overflow:auto;border:0}
+.rhine-workbench .rhine-report-toc{display:flex;gap:16px;flex-wrap:wrap}
+.rhine-workbench .rhine-report-references{max-height:100px;overflow:auto;border-top:1px solid var(--reading-rule);padding-top:8px}
+.rhine-workbench .rhine-report-modal .rhine-report-body{max-width:none;font-size:17px}
+.rhine-workbench .rhine-markdown{white-space:normal;min-width:0;overflow-wrap:anywhere}
+.rhine-workbench .rhine-line-text.rhine-markdown{font-size:var(--reader-font);line-height:1.85}
+.rhine-workbench .rhine-line-text.rhine-markdown>:last-child{margin-bottom:0}
+.rhine-workbench .rhine-line-text.rhine-markdown :is(h1,h2,h3,h4,h5,h6){font-size:1.12em;margin-top:.7em}
+.rhine-workbench .rhine-line-text.rhine-markdown :is(ul,ol){margin-top:0}
+.rhine-workbench .rhine-line-number{width:38px;font-variant-numeric:tabular-nums;line-height:1.8;padding-top:4px}
+.rhine-workbench .rhine-reader-body{scrollbar-color:#9a9b8170 transparent}
+.rhine-workbench .rhine-reader-body::-webkit-scrollbar,.rhine-workbench .rhine-investigation-report-scroll::-webkit-scrollbar{width:4px;height:4px}
+.rhine-workbench .rhine-reader-body::-webkit-scrollbar-thumb,.rhine-workbench .rhine-investigation-report-scroll::-webkit-scrollbar-thumb{background:#9a9b8170}
+.rhine-workbench .rhine-reader-body::-webkit-scrollbar-button,.rhine-workbench .rhine-investigation-report-scroll::-webkit-scrollbar-button{display:none}
+.rhine-workbench .rhine-speaker+.rhine-markdown{display:inline}
+.rhine-workbench .rhine-markdown .rhine-report-table{max-width:100%;overflow:auto;scrollbar-width:thin}
+.rhine-workbench .has-reading-object .rhine-zone-nav{pointer-events:none}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-investigation-report>header,.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-investigation-drawer-top{top:17%;left:52%;right:4%;font-size:9px}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-investigation-report-scroll,.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-investigation-drawer-body{left:52%;right:4%;top:27%;bottom:9%}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-investigation-report-intro>h2,.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) .rhine-investigation-drawer-body>h2{font-size:23px}
+.rhine-workbench :is([data-layout=compact],[data-layout=portrait]) :is(.rhine-investigation-clue-text,.rhine-investigation-report .rhine-report-body){font-size:15px}
+.rhine-workbench [data-layout=portrait] :is(.rhine-investigation-report,.rhine-investigation-drawer){background:linear-gradient(180deg,transparent 20%,#ebe8e0e8 42%,#ebe8e0f0)}
+.rhine-workbench [data-layout=portrait] .rhine-investigation-report>header,.rhine-workbench [data-layout=portrait] .rhine-investigation-drawer-top{left:6%;right:6%;top:40%}
+.rhine-workbench [data-layout=portrait] :is(.rhine-investigation-report-scroll,.rhine-investigation-drawer-body){left:6%;right:6%;top:48%;bottom:6%}
+.rhine-workbench [data-layout=portrait] .rhine-report-modal{left:6%;right:6%;top:40%;bottom:6%;width:auto;height:auto;padding:0}
+.rhine-workbench :is(.rhine-investigation-report,.rhine-investigation-drawer)[hidden]{display:none}
+/* The controller drives both surfaces; disable the older CSS slide-in. */
+.rhine-workbench :is(.rhine-investigation-report,.rhine-investigation-drawer){animation:none}
+
+/* Board controls stay in place behind the reading mode, then return unchanged. */
+.rhine-workbench.has-reading-object :is(.rhine-investigation-hud,.rhine-board-toolbar,.rhine-board-chalk-hit,.rhine-evidence-panel,.rhine-zone-nav,.rhine-scene-edges,.rhine-board-tool-status){visibility:hidden;pointer-events:none}
+.rhine-workbench .rhine-investigation-report .rhine-report-body{box-sizing:border-box;margin:0;justify-self:stretch}
+.rhine-workbench .rhine-investigation-report .rhine-report-body>:not(.rhine-report-table){margin-left:0;margin-right:0;max-width:none}
+
+/* Keep the fading layer as the pointer shield until the fade completes. */
+.rhine-workbench :is(.rhine-investigation-report,.rhine-investigation-drawer)[data-transition=closing]{animation:none;pointer-events:auto}
+.rhine-workbench :is(.rhine-investigation-report,.rhine-investigation-drawer)[data-transition=closing]>*{pointer-events:none}

package/ui/rhine/report-markdown.ts

@@ -0,0 +1,98 @@
+import MarkdownIt from 'markdown-it';
+
+// Reports are model text, never executable HTML. Keep rendering local, including
+// images: a streamed answer must not trigger arbitrary background requests.
+const markdown = new MarkdownIt({ html: false, linkify: false, typographer: false });
+markdown.renderer.rules.image = (tokens, index) => `<span class="rhine-report-image-caption">${markdown.utils.escapeHtml(tokens[index].content || '图片')}</span>`;
+
+export interface ReportHeading { id: string; label: string; level: number }
+
+export function renderReportMarkdown(target: HTMLElement, text: string,
+  measure: <T>(kind: string, work: () => T) => T = (_kind, work) => work()): ReportHeading[] {
+  const { fragment, headings } = measure('report-markdown', () => {
+  const template = document.createElement('template');
+  template.innerHTML = markdown.render(text);
+  const fragment = template.content;
+  const headings = [...fragment.querySelectorAll<HTMLElement>('h1,h2,h3,h4,h5,h6')].map((heading, index) => {
+    heading.id = `rhine-report-section-${index + 1}`;
+    heading.tabIndex = -1;
+    return { id: heading.id, label: heading.textContent || `章节 ${index + 1}`, level: Number(heading.tagName.slice(1)) };
+  });
+  for (const link of fragment.querySelectorAll<HTMLAnchorElement>('a')) {
+    const href = link.getAttribute('href') || '';
+    if (href.startsWith('#')) continue;
+    try {
+      const url = new URL(href);
+      if (!['https:', 'http:', 'mailto:'].includes(url.protocol)) { link.removeAttribute('href'); continue; }
+      link.target = '_blank'; link.rel = 'noopener noreferrer';
+    } catch { link.removeAttribute('href'); }
+  }
+  for (const table of fragment.querySelectorAll('table')) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'rhine-report-table';
+    wrapper.tabIndex = 0;
+    wrapper.setAttribute('role', 'region');
+    wrapper.setAttribute('aria-label', '报告表格，可横向滚动');
+    table.replaceWith(wrapper); wrapper.append(table);
+  }
+    return { fragment, headings };
+  });
+  measure('report-body-patch', () => {
+  // Leave completed paragraphs in place while the final paragraph streams.
+  // This preserves selection, focus and the reader's position in earlier text.
+  const next = [...fragment.childNodes];
+  next.forEach((node, index) => {
+    const previous = target.childNodes[index];
+    if (!previous) target.append(node);
+    else if (!previous.isEqualNode(node)) target.replaceChild(node, previous);
+  });
+  while (target.childNodes.length > next.length) target.lastChild!.remove();
+  });
+  return headings;
+}
+
+export interface SourceMarkdownLine { line_number: number; text: string; speaker_raw?: string }
+
+/** Block rendering retains source ranges, including lists/tables spanning returned lines. */
+export function renderSourceMarkdown(lines: readonly SourceMarkdownLine[]): HTMLElement[] {
+  const rows:HTMLElement[]=[];
+  const add=(start:number,end:number,text:string,speaker?:string)=>{
+    const row=document.createElement('div');row.className='rhine-reader-line';
+    row.dataset.line=String(start);row.dataset.lineEnd=String(end);row.id=`rhine-line-${start}`;
+    const number=document.createElement('span');number.className='rhine-line-number';
+    number.textContent=start===end?String(start).padStart(3,'0'):`${start}–${end}`;
+    number.title=start===end?`原文第 ${start} 行`:`原文第 ${start}–${end} 行`;
+    const body=document.createElement('div');body.className='rhine-line-text rhine-markdown';
+    // Local lines may carry both speaker_raw and the same serialized prefix.
+    // Strip only an exact leading identity followed by a colon; speech stays intact.
+    const identity=speaker?.trim();
+    if(identity){const escaped=identity.replace(/[.*+?^${}()|[\]\\]/gu,'\\$&');text=text.replace(new RegExp(`^\\s*${escaped}\\s*[：:]\\s*`,'u'),'');}
+    renderReportMarkdown(body,text);
+    // Speaker identities remain literal, even if they contain Markdown punctuation.
+    if(speaker){const label=document.createElement('span');label.className='rhine-speaker';label.textContent=`${speaker}　`;body.prepend(label);}
+    row.append(number,body);rows.push(row);
+  };
+  let offset=0;
+  while(offset<lines.length){
+    if(lines[offset].speaker_raw){const line=lines[offset++];add(line.line_number,line.line_number,line.text,line.speaker_raw);continue;}
+    let end=offset+1;while(end<lines.length&&!lines[end].speaker_raw&&lines[end].line_number===lines[end-1].line_number+1)end++;
+    const chunk=lines.slice(offset,end), virtual:string[]=[],owners:number[]=[];
+    for(let i=0;i<chunk.length;i++)for(const part of chunk[i].text.split(/\r?\n/)){virtual.push(part);owners.push(i);}
+    const tokens=markdown.parse(virtual.join('\n'),{});
+    for(let i=0;i<tokens.length;){
+      const token=tokens[i];let j=i+1;
+      if(token.nesting===1){let nesting=1;while(j<tokens.length&&nesting){nesting+=tokens[j].nesting;j++;}}
+      if(token.map){
+        const a=token.map[0];let b=token.map[1];
+        while(b>a+1&&!virtual[b-1].trim())b--;
+        const first=owners[a],last=owners[Math.max(a,b-1)];
+        if(token.type==='paragraph_open'&&first!==last){
+          for(let n=first;n<=last;n++)add(chunk[n].line_number,chunk[n].line_number,chunk[n].text);
+        }else add(chunk[first].line_number,chunk[last].line_number,virtual.slice(a,b).join('\n'));
+      }
+      i=j;
+    }
+    offset=end;
+  }
+  return rows;
+}

package/ui/rhine/scene-edge-navigation.ts

@@ -0,0 +1,84 @@
+import type { RhineLocation } from './types';
+
+const STOPS: { id: RhineLocation; label: string }[] = [
+  { id: 'archive', label: '检索阵列' }, { id: 'board', label: '证据板' }, { id: 'desk', label: '档案收录架' },
+];
+type Options = {
+  location: () => RhineLocation;
+  available: () => boolean;
+  navigate: (location: RhineLocation) => void;
+  returnFocus: () => void;
+};
+
+/** Screen-edge buttons share the scene's existing navigation and never consume canvas drags. */
+export function mountSceneEdgeNavigation(host: HTMLElement, options: Options) {
+  const events = new AbortController(), signal = events.signal;
+  const nav = document.createElement('nav');
+  nav.className = 'rhine-scene-edges'; nav.setAttribute('aria-label', '相邻场景'); nav.hidden = true;
+  let disposed = false;
+  let press: { button: HTMLButtonElement; pointer: number; origin: RhineLocation; target: RhineLocation;
+    x: number; y: number; moved: boolean; released: boolean } | null = null;
+  const reset = () => { press = null; };
+  const controls = ([-1, 1] as const).map(direction => {
+    const button = document.createElement('button'); button.type = 'button';
+    button.className = `rhine-scene-edge is-${direction < 0 ? 'left' : 'right'}`;
+    button.dataset.direction = direction < 0 ? 'left' : 'right';
+    button.innerHTML = `<span class="rhine-scene-edge-marker" aria-hidden="true"></span>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="${direction < 0 ? 'M15 5l-7 7 7 7' : 'M9 5l7 7-7 7'}"/></svg>
+      <span class="rhine-scene-edge-label" aria-hidden="true"></span>`;
+    button.addEventListener('pointerdown', event => {
+      if (!event.isPrimary || event.button !== 0 || !options.available()) return;
+      const target = destination(direction); if (!target) return;
+      press = { button, pointer: event.pointerId, origin: options.location(), target: target.id,
+        x: event.clientX, y: event.clientY, moved: false, released: false };
+    }, { signal });
+    button.addEventListener('click', event => {
+      const gesture = press; reset();
+      if (disposed || !options.available() || event.detail > 1) return;
+      const target = destination(direction); if (!target) return;
+      // Keyboard and assistive activation have detail 0. Pointer clicks must
+      // begin here and stay a click, even if dragged out and back into the strip.
+      if (event.detail !== 0 && (!gesture || gesture.button !== button || !gesture.released || gesture.moved
+        || gesture.origin !== options.location() || gesture.target !== target.id)) return;
+      const focused = document.activeElement === button;
+      options.navigate(target.id); sync();
+      if (focused && button.hidden) options.returnFocus();
+    }, { signal });
+    button.addEventListener('keydown', event => {
+      if (event.repeat && (event.key === 'Enter' || event.key === ' ')) event.preventDefault();
+    }, { signal });
+    nav.append(button);
+    return { button, direction };
+  });
+  host.append(nav);
+  function destination(direction: number) { return STOPS[STOPS.findIndex(stop => stop.id === options.location()) + direction]; }
+  function sync() {
+    if (disposed) return;
+    nav.hidden = !options.available();
+    if (nav.hidden) reset();
+    for (const { button, direction } of controls) {
+      const target = destination(direction); button.hidden = !target;
+      if (!target) { delete button.dataset.target; continue; }
+      button.dataset.target = target.id;
+      button.setAttribute('aria-label', `前往${target.label}`);
+      button.querySelector('.rhine-scene-edge-label')!.textContent = target.label;
+      button.querySelector('.rhine-scene-edge-marker')!.textContent = String(STOPS.indexOf(target) + 1).padStart(2, '0');
+    }
+  }
+  // Observe the full gesture without capturing it away from native buttons or
+  // the canvas. A canceled pointer can never arm a later synthetic mouse click.
+  window.addEventListener('pointerdown', reset, { capture: true, signal });
+  window.addEventListener('pointermove', event => {
+    if (press?.pointer === event.pointerId && Math.hypot(event.clientX - press.x, event.clientY - press.y) >= 6) press.moved = true;
+  }, { capture: true, signal });
+  window.addEventListener('pointerup', event => {
+    if (press?.pointer !== event.pointerId) return;
+    press.released = true;
+    const bounds = press.button.getBoundingClientRect();
+    if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) press.moved = true;
+  }, { capture: true, signal });
+  window.addEventListener('pointercancel', reset, { signal });
+  window.addEventListener('blur', reset, { signal });
+  sync();
+  return { sync, dispose() { disposed = true; reset(); events.abort(); nav.remove(); } };
+}