@citeark/agent 0.3.20

package/ui/arkgraph/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@citeark/arkgraph-view",
+  "version": "0.3.20",
+  "private": true,
+  "type": "module",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "d3-force": "3.0.0",
+    "force-graph": "1.52.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "esbuild": "0.25.12"
+  },
+  "devDependencies": {
+    "typescript": "5.9.3"
+  }
+}

package/ui/arkgraph/reading-layout.mjs

@@ -0,0 +1,130 @@
+// Reading geometry uses design units throughout. It never reads the camera or viewport.
+const intersects=(a,b,pad=0)=>a.x<b.x+b.w+pad&&a.x+a.w+pad>b.x&&a.y<b.y+b.h+pad&&a.y+a.h+pad>b.y;
+const union=(a,b)=>({x:Math.min(a.x,b.x),y:Math.min(a.y,b.y),w:Math.max(a.x+a.w,b.x+b.w)-Math.min(a.x,b.x),h:Math.max(a.y+a.h,b.y+b.h)-Math.min(a.y,b.y)});
+const shifted=(b,x,y)=>({...b,x:b.x+x,y:b.y+y});
+const lineThroughBox=(end,box)=>{
+ let near=0,far=1;
+ for(const axis of ['x','y']){
+  const delta=end[axis],lo=box[axis],hi=lo+box[axis==='x'?'w':'h'];
+  if(Math.abs(delta)<1e-8){if(0<lo||0>hi)return false;continue;}
+  const a=lo/delta,b=hi/delta;near=Math.max(near,Math.min(a,b));far=Math.min(far,Math.max(a,b));if(near>far)return false;
+ }
+ return far>.02&&near<.98;
+};
+const opening=/[（《「『【(\[]$/u,closing=/^[，。！？；：、）》」』】,.!?;:)\]]/u;
+const segmenter=new Intl.Segmenter('zh',{granularity:'word'});
+
+// Balance complete words across lines, including Chinese words and model names.
+// A short last line or a leading closing mark is more expensive than a slightly wider title.
+export function wrapGraphLabel(text,measure,maxWidth){
+ const source=String(text??'');if(measure(source)<=maxWidth)return[source];
+ const tokens=[...segmenter.segment(source)].flatMap(({segment})=>measure(segment)>maxWidth?[...segment]:[segment]);
+ const widths=new Map(),line=(a,b)=>tokens.slice(a,b).join('').trim();
+ const width=(a,b)=>{const key=a+':'+b;if(!widths.has(key))widths.set(key,measure(line(a,b)));return widths.get(key);};
+ const minLines=Math.max(2,Math.ceil(measure(source)/maxWidth));
+ for(let count=minLines;count<=tokens.length;count++){
+  const ideal=measure(source)/count,memo=new Map();
+  const solve=(start,left)=>{
+   if(!left)return start===tokens.length?{cost:0,lines:[]}:null;
+   const key=start+':'+left;if(memo.has(key))return memo.get(key);
+   let best=null;
+   for(let end=start+1;end<=tokens.length-left+1;end++){
+    const value=line(start,end),w=width(start,end);if(w>maxWidth)break;if(!value)continue;
+    const rest=solve(end,left-1);if(!rest)continue;
+    const chars=[...value].length;
+    const cost=rest.cost+(w-ideal)**2+(chars<3?maxWidth**2:0)+(closing.test(value)||opening.test(value)?maxWidth**2*4:0);
+    if(!best||cost<best.cost)best={cost,lines:[value,...rest.lines]};
+   }
+   memo.set(key,best);return best;
+  };
+  const result=solve(0,count);if(result)return result.lines;
+ }
+ return[source];
+}
+
+function attachment(node,x,y,mainSide){
+ const {w,h,r}=node;
+ if(node.main)return {dx:-w/2,dy:mainSide==='above'?-r-h-13:r+13,side:mainSide};
+ // Keep labels beside their dots. The dot, label and small breathing margin move together.
+ if(Math.abs(x)>.58*Math.abs(y))return {dx:x<0?-r-9-w:r+9,dy:-h/2,side:x<0?'left':'right'};
+ return {dx:-w/2,dy:y<0?-r-9-h:r+9,side:y<0?'above':'below'};
+}
+function body(node,label,x=0,y=0){
+ return shifted(union({x:-node.r-4,y:-node.r-4,w:2*node.r+8,h:2*node.r+8},{x:label.dx-4,y:label.dy-4,w:node.w+8,h:node.h+8}),x,y);
+}
+
+// Pack organic neighborhoods first, then allocate horizontal capacity from actual
+// text area. D3 can interleave their empty corners using the labeled-object force.
+export function planReadingLayout(items,spine,parents){
+ const byId=new Map(items.map(n=>[n.id,n])),placements=new Map(),neighborhoods=[];
+ const rootOf=id=>{const seen=new Set();while(!spine.includes(id)&&parents.has(id)&&!seen.has(id)){seen.add(id);id=parents.get(id);}return spine.includes(id)?id:spine[0];};
+ for(const [index,id] of spine.entries()){
+  const root=byId.get(id);if(!root)continue;
+  const members=items.filter(n=>!n.main&&rootOf(n.id)===id);
+  const mainSide=index%2?'below':'above',label=attachment(root,0,0,mainSide);
+  const local=[{id,x:0,y:0,owner:id,label,body:body(root,label)}];
+  const targetWidth=Math.max(root.w+18,Math.sqrt(members.reduce((a,n)=>a+(n.w+28)*(n.h+28),0)*1.15));
+  for(const [order,n] of members.entries()){
+   let best=null;
+   for(let ring=0;ring<36||!best;ring++){
+    const radius=50+ring*13;
+    for(let j=0;j<32;j++)for(const mirror of [-1,1]){
+     const angle=-Math.PI/2+j*Math.PI/16+(order%2?.07:-.07),x=mirror*Math.cos(angle)*radius,y=Math.sin(angle)*radius;
+     const nextLabel=attachment(n,x,y),box=body(n,nextLabel,x,y);
+     if(local.some(p=>intersects(box,p.body,13)))continue;
+     const spread=Math.max(0,Math.abs(box.x+box.w/2)+box.w/2-targetWidth/2);
+     const balance=local.reduce((sum,p)=>sum+p.x,0)+x;
+     const rootText={x:label.dx-5,y:label.dy-5,w:root.w+10,h:root.h+10};
+     const crossings=Number(lineThroughBox({x,y},rootText))+local.slice(1).reduce((sum,p)=>sum+Number(lineThroughBox({x,y},p.body))+Number(lineThroughBox(p,box)),0);
+     const cost=radius+spread*1.6+crossings*240+Math.abs(balance)*.25+(Math.sign(y)===(order%2?1:-1)?0:8);
+     if(!best||cost<best.cost)best={id:n.id,x,y,owner:id,label:nextLabel,body:box,cost};
+    }
+    if(best&&radius>best.cost+20)break;
+   }
+   if(!best)throw Error('Unable to arrange reading neighborhood: '+n.id);
+   local.push(best);
+  }
+  const previous=neighborhoods.at(-1);
+  const x=previous?previous.x+Math.max((root.w+byId.get(previous.id).w)/2+24,(targetWidth+previous.capacity)*.42):0;
+  neighborhoods.push({id,x,capacity:targetWidth,members:local});
+ }
+ const center=(neighborhoods[0]?.x+neighborhoods.at(-1)?.x)/2||0;
+ for(const group of neighborhoods)for(const n of group.members)placements.set(n.id,{x:group.x-center+n.x,y:n.y,dx:n.x,dy:n.y,owner:n.owner,label:n.label});
+ return placements;
+}
+
+// D3 forces act on the whole labeled object. They are soft springs: dragging can
+// move an entire neighborhood or an individual member and retarget its resting place.
+export function readingNeighborhoodForce(unit=1){
+ let nodes=[],byId=new Map();
+ function force(alpha){
+  for(const n of nodes){
+   const parent=byId.get(n.layoutOwner),x=n.main?n.layoutX:(parent?.x??n.layoutX)+n.layoutDX*unit,y=n.main?n.layoutY:(parent?.y??n.layoutY)+n.layoutDY*unit;
+   if(n.fx==null)n.vx+=(x-n.x)*alpha*(n.main?.045:.04);
+   if(n.fy==null)n.vy+=(y-n.y)*alpha*(n.main?.14:.045);
+  }
+ }
+ force.initialize=values=>{nodes=values;byId=new Map(nodes.map(n=>[n.id,n]));};
+ force.retarget=n=>{const parent=byId.get(n.layoutOwner);if(n.main){n.layoutX=n.x;n.layoutY=n.y;}else if(parent){n.layoutDX=(n.x-parent.x)/unit;n.layoutDY=(n.y-parent.y)/unit;}};
+ return force;
+}
+
+export function labeledObjectCollision(unit=1){
+ let nodes=[];
+ function force(){
+  for(let i=0;i<nodes.length;i++)for(let j=i+1;j<nodes.length;j++){
+   const a=nodes[i],b=nodes[j];if(!a.layoutBody||!b.layoutBody)continue;
+   const box=n=>({x:n.x+n.vx+n.layoutBody.x*unit,y:n.y+n.vy+n.layoutBody.y*unit,w:n.layoutBody.w*unit,h:n.layoutBody.h*unit});
+   const aa=box(a),bb=box(b),pad=(a.layoutOwner===b.layoutOwner?8:20)*unit;
+   if(!intersects(aa,bb,pad))continue;
+   const dx=Math.min(aa.x+aa.w+pad-bb.x,bb.x+bb.w+pad-aa.x),dy=Math.min(aa.y+aa.h+pad-bb.y,bb.y+bb.h+pad-aa.y);
+   const axis=dx<dy?'x':'y',amount=Math.min((axis==='x'?dx:dy)*.48,14*unit),sign=aa[axis]+aa[axis==='x'?'w':'h']/2<bb[axis]+bb[axis==='x'?'w':'h']/2?-1:1;
+   const fixed=axis==='x'?'fx':'fy',velocity=axis==='x'?'vx':'vy';
+   const ma=a[fixed]!=null?0:a.main?.12:1,mb=b[fixed]!=null?0:b.main?.12:1,total=ma+mb;
+   if(total){a[velocity]+=sign*amount*ma/total;b[velocity]-=sign*amount*mb/total;}
+  }
+ }
+ force.initialize=values=>{nodes=values;};return force;
+}
+
+export const readingObjectBody=(item,label)=>body(item,label);

package/ui/arkgraph/reading-presentation.mjs

@@ -0,0 +1,73 @@
+import {MD,coreTypeOf,colorOf} from './research-types.mjs';
+
+// These five reader-facing groups preserve all twelve source categories.
+export const contentGroups=Object.freeze([
+ {id:'context',label:'问题与概念',types:['question','concept'],color:MD.blue700},
+ {id:'argument',label:'观点与解释',types:['claim','hypothesis','argument'],color:MD.indigo500},
+ {id:'process',label:'方法与过程',types:['method','plan','activity'],color:MD.deepOrange700},
+ {id:'evidence',label:'结果与评价',types:['result','assessment'],color:MD.teal600},
+ {id:'resource',label:'材料与来源',types:['resource','agent'],color:MD.grey600}
+]);
+export const contentGroupOf=n=>contentGroups.find(g=>g.types.includes(coreTypeOf(n)));
+
+const spectrum=[MD.red700,MD.deepOrange700,MD.amber700,MD.lightGreen700,MD.green600,MD.teal600,MD.blue700,MD.indigo500,MD.purple500];
+export function mainlineColor(index,total){
+ const position=total<=1?0:Math.max(0,Math.min(total-1,index))/(total-1)*(spectrum.length-1);
+ const a=spectrum[Math.floor(position)],b=spectrum[Math.ceil(position)],t=position%1;
+ return '#'+[1,3,5].map(i=>Math.round(parseInt(a.slice(i,i+2),16)*(1-t)+parseInt(b.slice(i,i+2),16)*t).toString(16).padStart(2,'0')).join('').toUpperCase();
+}
+export function numberColor(background){
+ const channels=[1,3,5].map(i=>parseInt(background.slice(i,i+2),16)/255).map(v=>v<=.04045?v/12.92:((v+.055)/1.055)**2.4);
+ const light=channels[0]*.2126+channels[1]*.7152+channels[2]*.0722;
+ return light>.179?MD.black:MD.white;
+}
+export function createReadingColors(spine){
+ const colors=new Map(spine.map((id,index)=>[id,mainlineColor(index,spine.length)]));
+ return n=>colors.get(n.key)||colorOf(n);
+}
+
+const compare=new Intl.Collator('zh-CN',{numeric:true}).compare;
+const sorted=nodes=>[...nodes].sort((a,b)=>compare(a.label,b.label)||compare(a.key,b.key));
+export function buildOutlineReading(D){
+ const byKey=new Map(D.nodes.map(n=>[n.key,n])),spine=D.presentation.spine,children=new Map();
+ for(const group of D.presentation.groups){
+  if(!children.has(group.parent))children.set(group.parent,[]);
+  children.get(group.parent).push(...group.members);
+ }
+ const placed=new Set(spine);
+ const branch=id=>(children.get(id)||[]).flatMap(key=>{
+  if(placed.has(key)||!byKey.has(key))return [];
+  placed.add(key);return [{id:key,children:branch(key)}];
+ });
+ const sections=spine.map((id,index)=>({id,index,children:branch(id)}));
+ const buckets=new Map();
+ for(const n of D.nodes){
+  if(placed.has(n.key))continue;
+  const type=coreTypeOf(n);
+  const id=n.prospective||type==='plan'?'plans':n.role==='source-work'||type==='agent'?'sources':type==='resource'?'materials':['result','assessment'].includes(type)?'evidence':['method','activity'].includes(type)?'methods':'ideas';
+  if(!buckets.has(id))buckets.set(id,[]);buckets.get(id).push(n);
+ }
+ const definitions=[
+  ['evidence','原文图表与评述','论文报告的图表、观测和补充评价'],
+  ['ideas','补充概念与解释','主线以外的概念、前提、观点和解释'],
+  ['methods','方法与活动细节','论文使用的方法及报告的研究活动'],
+  ['materials','模型、数据与材料','研究使用的模型、数据、提示、材料和工具'],
+  ['plans','后续研究与实验计划','后续研究意向、待执行方案及预期材料与产出'],
+  ['sources','论文来源与参与者','来源论文以及内容提供者、作者或整理者']
+ ];
+ const subgroup=(nodes,definitions)=>definitions.map(([id,label,accept])=>({id,label,nodes:sorted(nodes.filter(accept))})).filter(g=>g.nodes.length);
+ const appendices=definitions.flatMap(([id,label,note])=>{
+  const nodes=sorted(buckets.get(id)||[]);if(!nodes.length)return [];
+  const parts=id==='materials'?subgroup(nodes,[
+   ['models','模型与检查点',n=>['model','checkpoint'].includes(n.role)],
+   ['data','数据与提示',n=>['dataset','sample'].includes(n.role)],
+   ['tools','材料与工具',n=>!['model','checkpoint','dataset','sample'].includes(n.role)]
+  ]):id==='plans'?subgroup(nodes,[
+   ['plans','研究方案',n=>coreTypeOf(n)==='plan'&&n.role!=='procedure-step'],
+   ['steps','计划步骤',n=>n.role==='procedure-step'],
+   ['outputs','预期材料与产出',n=>coreTypeOf(n)!=='plan'&&n.role!=='procedure-step']
+  ]):[];
+  return [{id,label,note,nodes,parts}];
+ });
+ return {sections,appendices};
+}

package/ui/arkgraph/record-detail.css

@@ -0,0 +1,51 @@
+/* Content navigation is a text row, never a browser-styled button shell. */
+.reference-app .inspector .detail-row{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 0;color:#616161;transition:color 150ms ease}
+.reference-app .inspector .detail-row b{color:#424242;font-weight:500}
+.reference-app .inspector .detail-row small{color:#757575}
+.reference-app .inspector .detail-row>span:last-child:not(:first-child){color:#9E9E9E;transition:color 150ms ease,transform 180ms ease}
+.reference-app .inspector .detail-row:hover b,.reference-app .inspector .detail-row:hover>span:last-child:not(:first-child){color:#1976D2}
+.reference-app .inspector .detail-row:hover>span:last-child:not(:first-child){transform:translate(2px,-2px)}
+.reference-app .inspector .detail-row+.detail-row{border-top:1px solid #F5F5F5}
+.reference-app .inspector .figure-button{display:block;appearance:none;-webkit-appearance:none;width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:zoom-in}
+.reference-app .inspector .figure-button img{border:0;border-radius:0}
+.reference-app .inspector .figure-button:hover{border:0;background:transparent;box-shadow:none}
+.reference-app .inspector .figure-button:focus-visible{outline:2px solid #1976D2;outline-offset:4px}
+.reference-app .inspector figure{margin:18px 0 24px}
+.reference-app .inspector figcaption{color:#757575;margin-top:10px}
+.reference-app .inspector .related-method{margin:0 0 24px}
+.reference-app .inspector .related-method .detail-row{padding:2px 0 12px}
+.reference-app .inspector .related-method figure{margin:0}
+.reference-app .inspector .secondary,.reference-app .inspector .text-button{appearance:none;-webkit-appearance:none;border:0;box-shadow:none;background:transparent;color:#1976D2;border-radius:0;padding:6px 0;width:auto;text-align:left}
+.reference-app .inspector .secondary:hover,.reference-app .inspector .text-button:hover{background:transparent;color:#1565C0}
+@media(prefers-reduced-motion:reduce){.reference-app .inspector .detail-row,.reference-app .inspector .detail-row>span:last-child{transition:none}}
+
+/* A single reading hierarchy: summary, visual evidence, qualifications, related objects. */
+.record-content{display:flex;flex-direction:column;gap:26px}
+.record-intro h2{margin-bottom:10px!important;font-size:21px!important;line-height:1.5!important;letter-spacing:-.3px}
+.record-intro .lead{margin:0 0 12px!important;color:#616161;font-size:13px;line-height:1.85}
+.record-source{display:inline-flex;align-items:center;gap:8px;color:#9E9E9E;font-size:10px;line-height:1.6}
+.record-source:hover{color:#1976D2}
+.record-content .record-section,.record-content .record-own-figure,.record-content .record-measurements{margin:0}
+.record-content h3{margin:0 0 12px;color:#616161;font-size:11px;font-weight:550}
+.record-content h3 small{color:#9E9E9E}
+.record-content .record-own-figure figure{margin:0!important}
+.record-content .figure-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
+.record-content .figure-tabs button{appearance:none;border:0;background:transparent;color:#9E9E9E;font-size:11px;padding:5px 9px;border-radius:6px;transition:background 150ms,color 150ms}
+.record-content .figure-tabs button[aria-selected=true]{background:#F5F5F5;color:#424242}
+.record-content .figure-view figure{margin:0!important}
+.record-content .figure-details-link{display:flex;gap:8px;align-items:center;margin-top:12px;padding:0;border:0;background:none;color:#1976D2;font-size:10px}
+.record-content .record-link{padding:10px 0!important;line-height:1.55}
+.record-content .record-link small{font-size:10px;color:#9E9E9E;margin:3px 0 0}
+.record-content .record-limits p{font-size:12px;color:#757575;line-height:1.85;margin:0 0 8px}
+.record-content .record-limits p:last-child{margin:0}
+.record-content .record-measurements section{margin:0}
+.record-content .record-measurements td{font-size:11px;padding:10px 7px;color:#757575}
+.record-content .record-measurements th{font-size:10px;color:#9E9E9E}
+.record-content .record-measurements td b{color:#424242;font-weight:550}
+.record-content details{margin:0;padding:0;border:0}
+.record-content summary{font-size:11px;color:#757575;padding:5px 0}
+.record-content .record-relations{border-top:1px solid #EEEEEE;padding-top:12px}
+.record-content .record-conditions dl{margin:12px 0 0;font-size:11px;line-height:1.7}
+.record-content .record-conditions dl>div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:7px 0}
+.record-content .record-conditions dt{color:#9E9E9E}.record-content .record-conditions dd{margin:0;color:#616161;overflow-wrap:anywhere}
+@media(prefers-reduced-motion:reduce){.record-content .figure-tabs button{transition:none}}

package/ui/arkgraph/record-details.jsx

@@ -0,0 +1,29 @@
+import React,{useState} from 'react';
+
+export function createRecordDetails({canPreview=n=>!!n.image,incident,byKey,isResult,isMethodIllustration,recordLabel,typeLabel,sourceLink,FigureCard,Measurements,Disclosure,predicateLabel}){
+ function FigureCollection({items,title,openRecord}){
+  const [active,setActive]=useState(items[0]?.key),n=items.find(n=>n.key===active)||items[0];
+  if(!n)return null;
+  return <section className="record-section figure-collection"><h3>{title}<small>{items.length}</small></h3>{items.length>1&&<div className="figure-tabs" role="tablist" aria-label={title}>{items.map(o=><button role="tab" aria-selected={o.key===n.key} key={o.key} onClick={()=>setActive(o.key)}>{(o.imageCaption||o.label).split(' · ')[0]}</button>)}</div>}<div className="figure-view" role="tabpanel" aria-label={recordLabel(n)}><FigureCard n={n}/><button className="figure-details-link" onClick={()=>openRecord(n.key)}>查看{(n.imageCaption||n.label).split(' · ')[0]}详情 <span aria-hidden="true">↗</span></button></div></section>;
+ }
+ const format=v=>typeof v==='object'?JSON.stringify(v):String(v);
+ return function RecordDetails({n,openRecord,openEdge}){
+  const links=incident.get(n.key)||[],related=[...new Set(links.map(e=>e.from===n.key?e.to:e.from))].map(k=>byKey.get(k)).filter(Boolean);
+  const evidence=related.filter(o=>isResult(o)&&!o.prospective),methods=related.filter(o=>isMethodIllustration(o)&&o.role!=='observation');
+  const diagrams=related.filter(o=>isMethodIllustration(o)&&o.role==='observation');
+  const routes=[...new Set(links.filter(e=>e.predicate==='plannedFor').map(e=>e.from===n.key?e.to:e.from))].map(k=>byKey.get(k)).filter(Boolean);
+  const rows=items=>items.map(o=><button className="detail-row record-link" key={o.key} onClick={()=>openRecord(o.key)}><span><b>{recordLabel(o)}</b><small>{typeLabel(o)}</small></span><span aria-hidden="true">↗</span></button>);
+  return <div className="record-content"><header className="record-intro"><h2>{recordLabel(n)}</h2>{n.brief&&<p className="lead">{n.brief}</p>}{n.source&&<a className="record-source" href={sourceLink(n)} target="_blank" rel="noopener">{n.source} <span aria-hidden="true">↗</span></a>}</header>
+   {canPreview(n)&&<section className="record-own-figure"><FigureCard n={n}/></section>}
+   {!!n.measurements?.length&&<div className="record-measurements"><Measurements key={n.key} items={n.measurements}/></div>}
+   {diagrams.length>0&&<FigureCollection key={n.key+':methods'} items={diagrams} title="方法图示" openRecord={openRecord}/>}
+   {evidence.some(o=>canPreview(o))&&<FigureCollection key={n.key+':evidence'} items={evidence.filter(o=>canPreview(o))} title="原文图表" openRecord={openRecord}/>}
+   {evidence.some(o=>!canPreview(o))&&<section className="record-section"><h3>相关证据</h3>{rows(evidence.filter(o=>!canPreview(o)))}</section>}
+   {n.conditions&&Object.keys(n.conditions).length>0&&<section className="record-section record-conditions"><Disclosure title="适用条件与方法">{()=> <dl>{Object.entries(n.conditions).map(([key,value])=><div key={key}><dt>{key}</dt><dd>{format(value)}</dd></div>)}</dl>}</Disclosure></section>}
+   {n.limitations?.length>0&&<section className="record-section record-limits"><h3>范围与限制</h3>{n.limitations.map((l,i)=><p key={i}>{l}</p>)}</section>}
+   {methods.length>0&&<section className="record-section"><h3>相关方法 <small>{methods.length}</small></h3>{rows(methods)}</section>}
+   {routes.length>0&&<section className="record-section"><h3>关联实验计划</h3>{rows(routes)}</section>}
+   <div className="record-relations"><Disclosure title={'全部关联 · '+links.length}>{()=>links.map(e=><button className="detail-row relation-row" key={e.id} onClick={()=>openEdge(e.id)}><span><small>{e.from===n.key?'→':'←'} {predicateLabel[e.predicate]||e.predicate}</small>{recordLabel(byKey.get(e.from===n.key?e.to:e.from))}</span></button>)}</Disclosure></div>
+  </div>;
+ };
+}

package/ui/arkgraph/research-types.mjs

@@ -0,0 +1,31 @@
+import sourceTypes from './locales/source-types.json' with {type:'json'};
+import {MD,alpha} from './material-colors.mjs';
+export {MD,alpha};
+
+// Reading semantics are a separate projection, never a rewrite of source records.
+export const researchTypes=Object.freeze({
+ question:{label:'研究问题',short:'问题',family:'context',hint:'研究试图回答的问题或目标'},
+ concept:{label:'概念与定义',short:'概念',family:'context',hint:'概念、定义、理论框架，以及变量和指标的定义'},
+ hypothesis:{label:'假说与前提',short:'假说',family:'argument',hint:'待检验假说与条件前提；通过子类型区分'},
+ claim:{label:'主张',short:'主张',family:'argument',hint:'作者提出的发现、解释、定理或结论'},
+ method:{label:'方法',short:'方法',family:'process',hint:'可复用的操作方法、算法、分析或测量方法'},
+ plan:{label:'研究方案',short:'方案',family:'process',hint:'具体研究的安排或尚未执行的后续研究意向'},
+ activity:{label:'研究活动',short:'活动',family:'process',hint:'实际发生的采集、实验、训练、访谈或分析'},
+ result:{label:'观测与结果',short:'结果',family:'evidence',hint:'实际获得或计算得到的数据、图像及分析结果'},
+ argument:{label:'论证与证明',short:'论证',family:'argument',hint:'连接依据与主张的推导、证明或解释性论证'},
+ assessment:{label:'评估',short:'评估',family:'evidence',hint:'有归属与依据的验证、评价或局限性分析'},
+ resource:{label:'对象与资源',short:'资源',family:'resource',hint:'研究对象、材料、数据集、模型、仪器、代码和来源文献'},
+ agent:{label:'责任主体',short:'主体',family:'resource',hint:'提出、执行、提供或评估研究内容的人、组织或软件代理'}
+});
+const familyColors=Object.freeze({context:MD.blue700,argument:MD.indigo500,process:MD.deepOrange700,evidence:MD.teal600,resource:MD.grey600});
+
+export const coreLabels=Object.fromEntries(Object.entries(researchTypes).map(([key,value])=>[key,value.label]));
+export const coreHints=Object.fromEntries(Object.entries(researchTypes).map(([key,value])=>[key,value.hint]));
+export const typeColors=Object.fromEntries(Object.entries(researchTypes).map(([key,value])=>[key,familyColors[value.family]]));
+export const classificationOf=n=>({category:n?.category||'resource',subtype:n?.subtype&&n.subtype!==sourceTypes[n.category]?n.subtype:researchTypes[n?.category||'resource'].label,reason:'',contextualRoles:[]});
+export const coreTypeOf=n=>classificationOf(n).category;
+export const semanticLabelOf=n=>classificationOf(n).subtype;
+export const descriptionOf=n=>classificationOf(n).reason;
+export const colorOf=n=>typeColors[coreTypeOf(n)];
+export const shapeOf=n=>({hypothesis:'hypothesis',method:'method',plan:'plan',activity:'activity',result:'observation',assessment:'assessment'})[coreTypeOf(n)]||'circle';
+export const shortTypeLabel=type=>researchTypes[type].short;

package/ui/arkgraph/selection-mark.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+// Keep both strokes mounted: CSS interpolates their geometry in either direction.
+export function SelectionMark({selected=false}){
+ return <svg className="selection-mark" data-selected={selected} viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path className="selection-mark-short" d="M5 12 L19 12"/><path className="selection-mark-long" d="M12 19 L12 5"/></svg>;
+}

package/ui/arkgraph/soft-spine.mjs

@@ -0,0 +1,26 @@
+// Shared tangents make consecutive links flow through freely moving nodes.
+// Control handles are bounded so uneven spacing cannot create large loops.
+export function spineControls(points,index){
+ const a=points[index],b=points[index+1];
+ if(!a||!b||![a.x,a.y,b.x,b.y].every(Number.isFinite))return null;
+ const before=points[index-1]||a,after=points[index+2]||b;
+ const length=Math.hypot(b.x-a.x,b.y-a.y);
+ const handle=(from,to)=>{
+  const x=to.x-from.x,y=to.y-from.y,d=Math.hypot(x,y),scale=d?Math.min(.18,length*.28/d):0;
+  return {x:x*scale,y:y*scale};
+ };
+ const u=handle(before,b),v=handle(a,after);
+ return [a,{x:a.x+u.x,y:a.y+u.y},{x:b.x-v.x,y:b.y-v.y},b];
+}
+
+export function paintSpine(ctx,[a,c,d,b],color,unit){
+ ctx.save();ctx.strokeStyle=color;ctx.lineWidth=1.45*unit;ctx.lineCap='round';ctx.lineJoin='round';ctx.setLineDash([]);
+ ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.bezierCurveTo(c.x,c.y,d.x,d.y,b.x,b.y);ctx.stroke();
+ // A small open arrow follows the same curve, rather than its straight chord.
+ const t=.72,s=1-t,x=s*s*s*a.x+3*s*s*t*c.x+3*s*t*t*d.x+t*t*t*b.x,y=s*s*s*a.y+3*s*s*t*c.y+3*s*t*t*d.y+t*t*t*b.y;
+ const dx=3*s*s*(c.x-a.x)+6*s*t*(d.x-c.x)+3*t*t*(b.x-d.x),dy=3*s*s*(c.y-a.y)+6*s*t*(d.y-c.y)+3*t*t*(b.y-d.y),angle=Math.atan2(dy,dx);
+ if(Math.hypot(dx,dy)>8*unit){
+  ctx.translate(x,y);ctx.rotate(angle);ctx.lineWidth=1.1*unit;ctx.beginPath();ctx.moveTo(-3.2*unit,-1.9*unit);ctx.lineTo(0,0);ctx.lineTo(-3.2*unit,1.9*unit);ctx.stroke();
+ }
+ ctx.restore();
+}

package/ui/arkgraph/steering-style.css

@@ -0,0 +1,187 @@
+.legend { left:14px; max-width:min(540px, calc(100% - 28px)); column-gap:0; }
+.legend button { font-size:11px; padding:5px 6px; }
+.legend small { color:#616161; font-size:11px; }
+.reference-app .legend-title { font-size:11px; margin:0 4px; }
+.classification-note { color:#616161; font-size:11px; line-height:1.8; margin:0 0 16px; }
+.classification-note span { display:block; color:#424242; font-weight:500; margin-bottom:3px; }
+.category-description { margin:0; color:#616161; font-size:11px; line-height:1.7; }
+.archive { gap:14px; flex-wrap:wrap; }
+@media (max-width:780px) {
+ .projection-note { bottom:105px; }
+}
+@media (min-width:781px) { .projection-note { bottom:100px; } }
+.reference-app .projection-note { bottom:66px; }
+.reference-app .paper-card, .reference-app .paper-card.folded { display:block; top:76px; left:12px; width:340px; max-width:calc(100% - 24px); padding:12px 16px 10px; }
+.reference-app .paper-card .toolbar { position:static; inset:auto; width:100%; max-width:none; margin:10px 0 0; padding:8px 0 0; border-top:1px solid #EEEEEE; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none; gap:3px; }
+.reference-app .paper-card .toolbar button { min-height:30px; padding:5px 8px; }
+.reference-app .paper-card .toolbar .catalog-button { margin-left:auto; }
+.reference-app .paper-card .toolbar .toolbar-divider { display:none; }
+.reference-app .legend-group-mark { display:grid; place-items:center; flex:none; }
+.reference-app .paper-card-title>div { min-width:0; }
+.reference-app .paper-card h1 { font-size:14px; line-height:1.6; }
+.reference-app .graph-region { background-image:radial-gradient(#E0E0E066 .7px,transparent .7px); background-size:24px 24px; }
+.reference-app .paper-card, .reference-app .toolbar, .reference-app .legend { border:0; backdrop-filter:none; background:#FFFFFF; box-shadow:0 2px 12px #21212106; }
+.reference-app .paper-card { border-radius:16px; }
+.reference-app .inspector, .reference-app .catalog { border:0; box-shadow:0 8px 28px #2121210C; }
+.reference-app .settings-popover { border:0; box-shadow:0 8px 24px #21212112; }
+.reference-app .source-chip { border:0; }
+.reference-app .header-start { border:0; background:#F5F5F5; }
+.reference-app .spine-nav { border:0; box-shadow:0 2px 12px #21212106; }
+.reference-app .graph-hit, .reference-app .graph-label-hit { pointer-events:none; }
+.reference-app .graph-canvas canvas { cursor:grab; }
+.reference-app .graph-canvas canvas.grabbable { cursor:grabbing; }
+.inspector, .catalog { animation:graph-panel-in 260ms cubic-bezier(.2,.8,.2,1); }
+@keyframes graph-panel-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
+@media (prefers-reduced-motion:reduce) { .inspector, .catalog { animation:none; } }
+
+/* Keep the graph and its evidence visible together in narrow windows. */
+.type-mark { display:block; flex:none; }
+.reference-app .legend { align-items:center; gap:1px; }
+.reference-app .legend button { min-height:30px; gap:6px; padding:5px 7px; }
+.drawer-actions { display:flex; align-items:center; gap:6px; }
+.drawer-actions .detail-resize { display:none; }
+.settings-note { margin:5px 8px 4px; font-size:11px; line-height:1.7; color:#757575; }
+.reference-app .settings-popover { width:228px; }
+.reference-app .spine-nav { bottom:102px; }
+@media (max-width:780px) {
+ .reference-app.detail-open .scene { display:flex; flex-direction:column; }
+ .reference-app.detail-open .scene-main { flex:0 0 44%; min-height:0; }
+ .reference-app.detail-open .inspector { position:relative; inset:auto; width:calc(100% - 16px); height:auto; flex:1; min-height:0; margin:0 8px 8px; border-radius:18px; }
+ .reference-app.detail-open .spine-nav { left:auto; right:12px; top:20px; bottom:auto; transform:none; gap:4px; }
+ .reference-app.detail-open .spine-nav span { min-width:46px; }
+ .reference-app.detail-open .paper-card { display:block; width:250px; padding:6px 10px; }
+ .reference-app.detail-open .paper-card .paper-summary { display:none; }
+ .reference-app.detail-open .paper-card .toolbar { border:0; margin:0; padding:0; }
+ .reference-app.detail-open .drawer-actions .detail-resize { display:grid; }
+ .reference-app.detail-expanded .scene-main { flex-basis:64px; }
+ .reference-app.detail-expanded .graph-region { visibility:hidden; }
+ .reference-app.detail-open .drawer-top { height:46px; flex-shrink:0; padding:10px 18px; }
+ .reference-app.detail-open .drawer-body { padding:16px 20px 30px; }
+ .reference-app .legend { padding:5px; }
+ .reference-app .projection-note { bottom:61px; }
+}
+@media (max-width:420px) {
+ .reference-app .paper-card, .reference-app .paper-card.folded { width:calc(100% - 24px); max-width:none; }
+ .reference-app.detail-open .spine-nav { right:10px; }
+ .reference-app .legend { max-width:calc(100% - 24px); }
+ .reference-app .legend button { font-size:10px; padding:4px 6px; }
+}
+
+@media (max-width:420px) { .reference-app .projection-note { bottom:88px; } }
+
+/* Details overlay a stable canvas; opening them never resizes the graph. */
+.reference-app .scene-main { position:absolute; inset:0; }
+.reference-app .inspector, .reference-app .catalog { position:absolute; top:12px; right:12px; bottom:12px; height:auto; margin:0; }
+.drawer-top .detail-eyebrow { margin:0; letter-spacing:0; font-size:11px; flex:1; min-width:0; flex-wrap:wrap; }
+.drawer-top .drawer-actions { flex:none; margin-left:10px; }
+@media (max-width:780px) {
+ .reference-app.detail-open .scene { display:block; }
+ .reference-app.detail-open .scene-main { position:absolute; inset:0; }
+ .reference-app.detail-open .inspector { position:absolute; top:44%; right:8px; bottom:8px; left:8px; width:auto; height:auto; margin:0; animation:detail-rise 300ms cubic-bezier(.2,.8,.2,1); transition:top 300ms cubic-bezier(.2,.8,.2,1); }
+ .reference-app.detail-expanded .inspector { top:64px; }
+ .reference-app.detail-open .graph-region { visibility:visible; transition:opacity 200ms ease; }
+ .reference-app.detail-expanded .graph-region { visibility:visible; opacity:0; pointer-events:none; }
+ .reference-app .catalog { top:72px; width:min(384px,calc(100% - 24px)); }
+ @keyframes detail-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
+}
+@media (prefers-reduced-motion:reduce) { .reference-app .inspector, .reference-app .graph-region { animation:none; transition:none; } }
+
+/* Record navigation is an inline control group, not another floating card. */
+.reference-app .drawer-top .spine-nav {
+ position:static; inset:auto; transform:none; padding:0 6px 0 0; margin-right:2px;
+ background:transparent; border:0; border-radius:0; box-shadow:none; gap:2px; flex:none;
+}
+.reference-app .drawer-top .spine-nav span { min-width:34px; font-size:11px; color:#757575; }
+.reference-app .drawer-top .spine-nav button { width:26px; height:28px; color:#616161; }
+.reference-app .drawer-top .spine-nav button:disabled { opacity:.25; }
+.reference-app .drawer-top .drawer-actions { gap:3px; margin-left:8px; }
+.reference-app .drawer-top { height:auto; min-height:48px; gap:4px; padding:10px 14px; }
+.reference-app .drawer-top .detail-eyebrow { font-size:10px; line-height:1.65; gap:4px; }
+.reference-app .drawer-top button { transition:background 140ms ease,color 140ms ease; }
+.reference-app .drawer-top button:hover:not(:disabled) { color:#424242; background:#F5F5F5; }
+.reference-app .toolbar.settings-open { z-index:20; }
+.reference-app .settings-popover {
+ position:fixed; right:auto; bottom:auto; overflow-y:auto; overscroll-behavior:contain;
+ border-radius:14px; padding:10px; background:#FFFFFF; box-shadow:0 8px 28px #2121211A;
+}
+.reference-app .settings-heading { color:#616161; font-size:11px; padding-bottom:6px; }
+@media (max-width:420px) {
+ .reference-app .drawer-top { padding:9px 10px; }
+ .reference-app .drawer-top .spine-nav { padding-right:2px; margin-right:0; }
+ .reference-app .drawer-top .spine-nav span { min-width:30px; }
+ .reference-app .drawer-top .drawer-actions { margin-left:4px; gap:1px; }
+}
+
+/* The outline is a reading navigator with one clear hierarchy. */
+.reference-app .catalog.outline-panel { width:400px; border-radius:20px; }
+.outline-header { display:flex; align-items:center; justify-content:space-between; padding:22px 22px 14px; flex:none; }
+.outline-header h2 { margin:0; color:#212121; font-size:20px; font-weight:650; line-height:1.4; }
+.outline-header p { margin:5px 0 0; color:#9E9E9E; font-size:11px; }
+.outline-header p span { margin:0 5px; }
+.outline-close, .outline-search button { display:grid; place-items:center; flex:none; border:0; padding:0; width:30px; height:30px; background:transparent; color:#757575; border-radius:8px; }
+.outline-close:hover, .outline-search button:hover { background:#F5F5F5; }
+.outline-search { display:flex; align-items:center; gap:9px; margin:0 20px 16px; padding:0 11px; min-height:40px; border-radius:10px; background:#F5F5F5; color:#9E9E9E; flex:none; }
+.outline-search:focus-within { box-shadow:0 0 0 2px #E8EAF6; }
+.outline-search input { border:0; background:transparent; color:#424242; font:inherit; font-size:12px; width:100%; min-width:0; padding:10px 0; outline:none; }
+.outline-search input::-webkit-search-cancel-button { display:none; }
+.outline-search input::placeholder { color:#9E9E9E; }
+.outline-tabs { display:flex; flex:none; gap:24px; padding:0 22px; box-shadow:0 1px 0 #EEEEEE; }
+.outline-tabs button { position:relative; border:0; padding:0 0 12px; background:transparent; color:#9E9E9E; font-size:12px; }
+.outline-tabs button[aria-pressed=true] { color:#424242; font-weight:600; }
+.outline-tabs button[aria-pressed=true]:after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:#616161; border-radius:2px; }
+.outline-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px 12px 20px; scrollbar-width:thin; scrollbar-color:#E0E0E0 transparent; }
+.outline-section-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:16px 10px 9px; color:#757575; font-size:10px; font-weight:500; }
+.outline-section-label>span { color:#9E9E9E; font-weight:400; font-variant-numeric:tabular-nums; }
+.outline-section { margin:0 0 10px; }
+.outline-row { display:flex; align-items:center; gap:9px; width:100%; border:0; background:transparent; text-align:left; border-radius:9px; padding:9px 10px; line-height:1.55; color:#616161; }
+.outline-row:hover { background:#FAFAFA; }
+.outline-mark { display:grid; place-items:center; width:18px; flex:none; }
+.outline-mark.numbered { width:28px; height:28px; border-radius:9px; background:#F5F5F5; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
+.outline-row-copy { flex:1; min-width:0; }
+.outline-row-copy b { display:block; color:#616161; font-size:12px; font-weight:450; overflow-wrap:anywhere; }
+.outline-row-copy small { display:block; color:#9E9E9E; font-size:10px; margin-top:2px; }
+.outline-main { gap:10px; padding-top:11px; padding-bottom:11px; }
+.outline-main .outline-row-copy b { color:#424242; font-size:13px; font-weight:600; }
+.outline-kind { font-size:9px; color:#9E9E9E; flex:none; max-width:84px; text-align:right; }
+.outline-row>.ui-icon { color:#9E9E9E; opacity:0; transition:opacity 120ms ease; }
+.outline-row:hover>.ui-icon, .outline-row:focus-visible>.ui-icon { opacity:1; }
+.outline-children { margin:0 0 0 24px; padding-left:12px; border-left:1px solid #EEEEEE; }
+.outline-children .outline-row { padding:7px 8px; gap:7px; }
+.outline-children .outline-row-copy b { font-size:11px; }
+.outline-children .outline-kind { max-width:68px; font-size:9px; }
+.outline-filters { display:flex; flex:none; flex-wrap:wrap; align-items:center; gap:6px; padding:14px 20px 6px; scrollbar-width:thin; }
+.outline-filters button { display:flex; align-items:center; gap:5px; flex:none; padding:5px 9px; border:0; border-radius:7px; background:transparent; font-size:10px; color:#757575; }
+.outline-filters button[aria-pressed=true] { background:#F5F5F5; color:#424242; }
+.outline-filters small { color:#9E9E9E; font-size:9px; }
+.outline-result-count, .outline-type-note, .outline-empty { padding:8px 10px; color:#9E9E9E; font-size:11px; line-height:1.8; }
+.outline-type-note { margin:0 0 8px; }
+.outline-empty button { border:0; background:none; color:#3F51B5; }
+.outline-relation { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:12px; margin:2px 0 8px; border:0; border-radius:10px; background:#FAFAFA; text-align:left; font-size:12px; line-height:1.6; }
+.outline-relation:hover { background:#F5F5F5; }
+.outline-relation-from { color:#616161; }
+.outline-predicate { display:flex; align-items:center; gap:7px; color:#9E9E9E; font-size:10px; }
+.outline-relation-to { color:#424242; padding-left:20px; }
+.outline-more { display:flex; justify-content:center; gap:12px; margin:14px auto 0; border:0; background:#F5F5F5; border-radius:9px; padding:10px 18px; font-size:11px; color:#616161; }
+.outline-more span { color:#9E9E9E; }
+.outline-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; padding:15px 22px; box-shadow:0 -1px 0 #EEEEEE; }
+.outline-footer a { display:flex; align-items:center; gap:6px; font-size:10px; color:#9E9E9E; }
+.outline-footer a:hover { color:#616161; }
+.reference-app .toolbar .catalog-button { display:flex; font-size:11px; width:auto; gap:6px; }
+.reference-app .projection-note:empty { display:none; }
+@media (max-width:780px) { .reference-app .catalog.outline-panel { top:72px; width:min(400px,calc(100% - 24px)); } }
+@media (prefers-reduced-motion:reduce) { .outline-row>.ui-icon { transition:none; } }
+
+/* Supplementary reading is grouped by purpose and expanded only when needed. */
+.outline-supplement { padding:0; margin:0; border:0; }
+.outline-supplement>summary { display:flex; align-items:center; gap:9px; padding:13px 10px; list-style:none; border-radius:9px; color:#424242; font-size:12px; }
+.outline-supplement>summary::-webkit-details-marker { display:none; }
+.outline-supplement>summary:hover { background:#FAFAFA; }
+.outline-supplement>summary>span { flex:1; }
+.outline-supplement>summary>small { color:#757575; font-size:10px; }
+.outline-supplement>summary>.ui-icon { color:#9E9E9E; transition:transform 160ms ease; }
+.outline-supplement[open]>summary>.ui-icon { transform:rotate(180deg); }
+.outline-supplement>.outline-type-note { padding-top:0; margin:0 0 4px; font-size:10px; }
+.outline-subgroups { padding:0 0 8px 12px; border-left:1px solid #EEEEEE; margin-left:10px; }
+.outline-subgroups>.outline-supplement>summary { padding:9px 10px; font-size:11px; }
+.outline-children .outline-children { margin-left:12px; padding-left:7px; }
+@media (prefers-reduced-motion:reduce) { .outline-supplement>summary>.ui-icon { transition:none; } }