@citeark/agent 0.3.20

package/ui/arkgraph/open-graph.jsx

@@ -0,0 +1,326 @@
+import {numberColor} from './reading-presentation.mjs';
+import React,{useEffect,useLayoutEffect,useRef,useState} from 'react';
+import ForceGraph from 'force-graph';
+import {createGraphGestures} from './graph-gestures.mjs';
+import {layoutLabels} from './label-layout.mjs';
+import {wrapGraphLabel,planReadingLayout,readingNeighborhoodForce,labeledObjectCollision,readingObjectBody} from './reading-layout.mjs';
+import {createCameraMotion} from './camera-motion.mjs';
+import {spineControls,paintSpine} from './soft-spine.mjs';
+import {ambientOffset,motionEnvelope,layoutPosition} from './ambient-motion.mjs';
+import {createContextIndex,contextRecords,placeContext} from './context-reveal.mjs';
+import {SelectionMark} from './selection-mark.jsx';
+import {experimentCurve,curvePoint} from './experiment-curves.mjs';
+import {MD,alpha,coreTypeOf,colorOf,shapeOf,semanticLabelOf} from './research-types.mjs';
+
+// One fixed design coordinate system for nodes, labels, edges and collision geometry.
+const DESIGN_SCALE=.25,UNIT=1/DESIGN_SCALE;
+const baseRadius=n=>(n.main?(n.type==='claim'?14:12):5)*UNIT;
+const radius=n=>baseRadius(n)+n.emphasis*1.5*UNIT;
+const idOf=value=>typeof value==='object'?value.id:value;
+const ease=value=>1-(1-value)**3;
+const distanceOpacity=distance=>[1,.62,.4,.26][Math.min(3,distance)];
+function distances(nodes,links,seeds){
+ const result=new Map(seeds.map(id=>[id,0])),adjacent=new Map(nodes.map(n=>[n.id,[]])),queue=[...seeds];
+ for(const link of links){const a=idOf(link.source),b=idOf(link.target);adjacent.get(a)?.push(b);adjacent.get(b)?.push(a);}
+ for(let i=0;i<queue.length;i++){const id=queue[i];for(const other of adjacent.get(id)||[])if(!result.has(other)){result.set(other,result.get(id)+1);queue.push(other);}}
+ return result;
+}
+
+export function createOpenGraph({D,byKey,spine,allPrimary,groups,shortLabels,recordLabel,predicateLabel,readingColorOf=colorOf}){
+ const contextIndex=createContextIndex(D,allPrimary.map(n=>n.key),spine);
+ const parents=new Map(groups.flatMap(group=>group.members.map(key=>[key,group.parent])));
+ function project(extras){
+  // A gentle horizontal reading direction; physics may displace every node.
+  const records=[...allPrimary];
+  extras.forEach(key=>{if(!records.some(n=>n.key===key))records.push(byKey.get(key));});
+  const nodes=records.map(record=>{
+   const mainIndex=spine.indexOf(record.key);
+   return {x:0,y:0,id:record.key,record,main:mainIndex>=0,step:mainIndex+1,phase:[...record.key].reduce((v,c)=>(v*31+c.charCodeAt(0))%997,0)/997*Math.PI*2,label:shortLabels[record.key]||recordLabel(record),type:coreTypeOf(record),shape:shapeOf(record),color:readingColorOf(record),opacity:1,entryAlpha:1,emphasis:0};
+  });
+  const links=spine.slice(1).map((key,index)=>({id:'reading-spine-'+index,source:spine[index],target:key,main:true,kind:'reading',step:index,curve:0,opacity:.48}));
+  for(const group of groups)for(const key of group.members)links.push({id:'branch:'+key,source:group.parent,target:key,kind:'reading',curve:.05,opacity:.6});
+  const keys=new Set(nodes.map(n=>n.id)),extraSet=new Set(extras);
+  for(const edge of D.edges)if((extraSet.has(edge.from)||extraSet.has(edge.to))&&keys.has(edge.from)&&keys.has(edge.to))links.push({id:edge.id,source:edge.from,target:edge.to,kind:'canonical',label:predicateLabel[edge.predicate]||edge.predicate,raw:edge,curve:.16,opacity:.6});
+  return {nodes,links};
+ }
+ return function OpenGraph(props){
+  const holder=useRef(null),api=useRef(null),hitEls=useRef(new Map()),experimentEls=useRef(new Map()),current=useRef(props),seenExtras=useRef(props.extras),seenSelection=useRef(props.selection?.id),seenReset=useRef(props.resetSignal),seenFit=useRef(props.fitSignal),seenFolded=useRef(props.folded),seenExperimentSelecting=useRef(props.experimentSelecting),[visible,setVisible]=useState([]),[error,setError]=useState('');
+  current.current=props;
+  useEffect(()=>{
+   const h=holder.current;let g,pan,camera,model={nodes:[],links:[]},resize,pauseTimer,entryFrame,appearanceFrame,ambientTimer,ambientAt=0,ambientTime=0,ambientFrames=0,pointerHeld=false,paused=false,busyUntil=0,hover=null,experimentHover=null,disposed=false,lastSize='',dragging=false,running=false,autoFit=false,ticks=0,savedCamera=null,overviewCamera=null,lastSelection=null;
+   let contextNodes=[],contextOffsets=new Map(),contextGeometry='',hoverOwner=null,contextTimer=null,contextFrame=0,contextKey='',settledOnce=false;
+   const clearHoverDelay=()=>{clearTimeout(contextTimer);contextTimer=null;};
+   const drawnNodes=()=>[...model.nodes,...contextNodes];
+   const contextLinks=()=>contextNodes.flatMap(n=>D.edges.filter(e=>(e.from===n.id&&e.to===n.owner)||(e.to===n.id&&e.from===n.owner)).map(e=>({id:e.id,source:drawnNodes().find(v=>v.id===e.from),target:drawnNodes().find(v=>v.id===e.to),raw:e,kind:'canonical'}))).filter(e=>e.source&&e.target);
+   const publishVisible=()=>{setVisible(drawnNodes());current.current.onVisibleCount?.(drawnNodes().length);h.dataset.contextNodes=contextNodes.map(n=>n.id).join(',');};
+   const preference=window.matchMedia('(prefers-reduced-motion: reduce)');
+   const view={width:0,height:0,top:100,bottom:70,left:20,right:20},cache=new Map();
+   const neighborhoodForce=readingNeighborhoodForce(UNIT);
+   const linkDistance=link=>link.restDistance??(link.kind==='canonical'?220:Math.hypot(link.source.layoutX-link.target.layoutX,link.source.layoutY-link.target.layoutY));
+   let labelOffsets=new Map(),repackLabels=false,lastLabelGeometry='',labelSolves=0,experimentGeometry='',experimentPaths=new Map();
+   const duration=ms=>preference.matches?0:ms;
+   const canDrift=()=>!disposed&&!document.hidden&&!preference.matches&&current.current.ambient!==false&&!current.current.motionBlocked&&!running&&!dragging&&!pointerHeld&&!pan?.active&&!camera?.active&&!hover&&!hoverOwner&&!contextNodes.length&&!experimentHover&&!current.current.selection&&!current.current.experimentSelecting&&performance.now()>=busyUntil;
+   const markMotion=()=>{h.dataset.motion=ambientTimer?'drifting':paused?'idle':running?'simulating':performance.now()<busyUntil?'moving':'active';h.dataset.physics=running?'running':'settled';};
+   const stopDrift=()=>{clearTimeout(ambientTimer);ambientTimer=null;ambientAt=0;};
+   // Bounded display motion around the freely settled layout. D3 stays stopped.
+   const driftFrame=()=>{
+    ambientTimer=null;if(!canDrift()){markMotion();return;}
+    const now=performance.now();ambientTime+=ambientAt?Math.min(100,now-ambientAt):50;ambientAt=now;
+    const t=ambientTime/1000;
+    for(const n of model.nodes){
+     const group=n.main?n.step:spine.indexOf(parents.get(n.id))+1,offset=ambientOffset(n,t,group);
+     if(n.restX==null){n.restX=n.x;n.restY=n.y;}
+     n.x=n.restX+offset.x*UNIT;n.y=n.restY+offset.y*UNIT;
+    }
+    paused=false;g.resumeAnimation();
+    // resumeAnimation draws once synchronously; cancel its next frame at rest.
+    if(canDrift()){g.pauseAnimation();paused=true;ambientFrames++;h.dataset.ambientFrames=String(ambientFrames);ambientTimer=setTimeout(driftFrame,50);}
+    markMotion();
+   };
+   const startDrift=()=>{if(canDrift()&&!ambientTimer){ambientAt=0;ambientTimer=setTimeout(driftFrame,50);}markMotion();};
+   const pause=()=>{if(disposed)return;const remaining=busyUntil-performance.now();if(running||dragging||remaining>0){pauseTimer=setTimeout(pause,Math.max(120,remaining+80));return;}paused=true;g?.pauseAnimation();startDrift();};
+   const wake=()=>{if(disposed||!g||document.hidden)return;stopDrift();if(paused){paused=false;g.resumeAnimation();}clearTimeout(pauseTimer);pauseTimer=setTimeout(pause,Math.max(220,busyUntil-performance.now()+80));markMotion();};
+   const hold=ms=>{busyUntil=Math.max(busyUntil,performance.now()+ms);wake();};
+   const bounds=()=>{
+    view.width=Math.max(1,h.clientWidth);view.height=Math.max(1,h.clientHeight);const origin=h.getBoundingClientRect();view.top=35;view.bottom=45;view.left=20;view.right=20;
+    for(const selector of ['.paper-card','.toolbar','.legend','.spine-nav','.projection-note','.experiment-dock']){
+     const el=h.closest('.reference-app').querySelector(selector);if(!el||!el.offsetHeight)continue;const b=el.getBoundingClientRect(),box={x:b.x-origin.x,y:b.y-origin.y,w:b.width,h:b.height};
+     if(selector==='.paper-card'||selector==='.toolbar')view.top=Math.max(view.top,box.y+box.h+20);
+     if(selector==='.legend'||selector==='.projection-note'||selector==='.experiment-dock')view.bottom=Math.max(view.bottom,view.height-box.y+18);
+    }
+    const app=h.closest('.reference-app'),panel=app.querySelector('.inspector');
+    if(panel){
+     // Final layout offsets ignore the panel's entrance transform. This is camera framing only.
+     if(view.width<=780)view.bottom=Math.max(view.bottom,view.height-panel.offsetTop+18);
+     else view.right=Math.max(view.right,view.width-panel.offsetLeft+24);
+    }
+
+   };
+   const metrics=(n,ctx)=>{
+    const keyClaim=n.main&&n.type==='claim',key=n.id;
+    if(cache.has(key))return cache.get(key);
+    const font=(keyClaim?'650 15px':n.main?'600 14px':'400 12px')+' -apple-system, "PingFang SC", sans-serif';ctx.font=font;
+    const lines=wrapGraphLabel(n.label,text=>ctx.measureText(text).width,n.main?165:148);
+    const titleWidth=Math.max(...lines.map(text=>ctx.measureText(text).width));const subtype=n.main?semanticLabelOf(n.record):null;ctx.font='400 11px -apple-system, "PingFang SC", sans-serif';
+    const value={lines,font,subtype,lineHeight:n.main?19:15,width:Math.max(titleWidth,subtype?ctx.measureText(subtype).width:0)+10,height:lines.length*(n.main?19:15)+4+(subtype?15:0)};cache.set(key,value);return value;
+   };
+   const positionContext=()=>{
+    const signature=lastLabelGeometry+'|'+contextNodes.map(n=>n.id+':'+n.owner).join(',');
+    if(contextGeometry===signature||!contextNodes.length)return;
+    const ctx=h.querySelector('canvas')?.getContext('2d');if(!ctx)return;
+    const obstacles=model.nodes.flatMap(n=>{const p=layoutPosition(n),o=labelOffsets.get(n.id),m=metrics(n,ctx),r=baseRadius(n)*DESIGN_SCALE+5;return[{x:p.x*DESIGN_SCALE-r,y:p.y*DESIGN_SCALE-r,w:2*r,h:2*r},...(o?[{x:p.x*DESIGN_SCALE+o.dx,y:p.y*DESIGN_SCALE+o.dy,w:m.width,h:m.height}]:[])];});
+    const placements=placeContext(contextNodes.map(n=>{const owner=layoutPosition(model.nodes.find(v=>v.id===n.owner)||model.nodes[0]),m=metrics(n,ctx);return{id:n.id,owner:{x:owner.x*DESIGN_SCALE,y:owner.y*DESIGN_SCALE},w:m.width,h:m.height};}),obstacles);
+    contextOffsets=new Map();for(const n of contextNodes){const p=placements.get(n.id);n.x=p.x*UNIT;n.y=p.y*UNIT;n.labelRect={x:p.label.x*UNIT,y:p.label.y*UNIT,w:p.label.w*UNIT,h:p.label.h*UNIT};contextOffsets.set(n.id,{dx:p.dx,dy:p.dy,side:p.side});}contextGeometry=signature;h.dataset.contextLayouts=String(Number(h.dataset.contextLayouts||0)+1);
+   };
+   const syncContext=()=>{
+    const selected=current.current.selection?.kind==='record'?current.current.selection.id:null,previousOwner=contextNodes.find(n=>n.id===selected)?.owner;
+    const wanted=contextRecords(contextIndex,{hoverOwner,selected,previousOwner});
+    const key=wanted.map(n=>n.id+':'+n.owner).join(',');if(contextKey===key)return;contextKey=key;
+    cancelAnimationFrame(contextFrame);const previous=new Map(contextNodes.map(n=>[n.id,n]));
+    const next=wanted.map(({id,owner})=>{const record=byKey.get(id);return Object.assign(previous.get(id)||{id,record,temporary:true,main:false,phase:0,label:recordLabel(record),type:coreTypeOf(record),shape:shapeOf(record),color:readingColorOf(record),opacity:1,entryAlpha:0,emphasis:0},{owner,leaving:false});});
+    const ids=new Set(next.map(n=>n.id));for(const n of contextNodes)if(!ids.has(n.id)){n.leaving=true;next.push(n);}contextNodes=next;contextGeometry='';positionContext();publishVisible();
+    const starts=new Map(contextNodes.map(n=>[n,n.entryAlpha])),start=performance.now(),time=duration(wanted.length?220:160);hold(time);
+    const tick=now=>{const t=time?Math.min(1,(now-start)/time):1;for(const n of contextNodes)n.entryAlpha=starts.get(n)+((n.leaving?0:1)-starts.get(n))*ease(t);wake();if(t<1)contextFrame=requestAnimationFrame(tick);else{contextFrame=0;contextNodes=contextNodes.filter(n=>!n.leaving);publishVisible();}};tick(start);
+   };
+   const setNodeHover=n=>{
+    const id=n?.id||null;if(hover===id&&(id!==null||!hoverOwner||contextTimer))return;hover=id;clearHoverDelay();
+    if(n?.temporary){hoverOwner=n.owner;syncContext();}
+    else if(n&&contextIndex.children.get(n.id)?.length){hoverOwner=n.id;syncContext();}
+    else contextTimer=setTimeout(()=>{contextTimer=null;hoverOwner=null;syncContext();appearance();},200);
+    appearance();h.style.cursor=n?'grab':'default';
+   };
+   const appearance=(ms=160)=>{
+    if(!g)return;cancelAnimationFrame(appearanceFrame);const chosen=hover||current.current.selection?.id,hidden=current.current.hidden;
+    const inspected=current.current.experiments?.find(e=>e.id===(experimentHover||current.current.selection?.id));
+    const choosing=current.current.experimentSelecting,selectedNodes=new Set(inspected?.contextNodeIds||current.current.experimentNodes||[]),hasExperimentSelection=!!inspected||(choosing&&selectedNodes.size>0);
+    const seeds=inspected?[inspected.source,inspected.target]:chosen?[chosen]:spine;
+    const depth=distances(drawnNodes(),[...model.links,...contextLinks()],seeds);
+    const starts=new Map(),targets=new Map(),emphasis=new Map();
+    for(const n of drawnNodes()){n.depth=depth.get(n.id)??3;starts.set(n,n.opacity);targets.set(n,hidden.has(n.type)?.08:hasExperimentSelection?(selectedNodes.has(n.id)?1:.22):distanceOpacity(n.depth));emphasis.set(n,{from:n.emphasis,to:n.id===chosen?1:0});}
+    for(const link of model.links){starts.set(link,link.opacity);const a=model.nodes.find(n=>n.id===idOf(link.source)),b=model.nodes.find(n=>n.id===idOf(link.target)),level=Math.max(a?.depth??3,b?.depth??3);targets.set(link,hidden.has(a?.type)||hidden.has(b?.type)?.06:hasExperimentSelection?(selectedNodes.has(a?.id)&&selectedNodes.has(b?.id)?.6:.1):distanceOpacity(level)*(link.main?.48:link.kind==='canonical'?.6:.55));}
+    const time=duration(ms),start=performance.now();hold(time);
+    const tick=now=>{const t=time?Math.min(1,(now-start)/time):1,k=ease(t);for(const [item,to] of targets)item.opacity=starts.get(item)+(to-starts.get(item))*k;for(const [n,value] of emphasis)n.emphasis=value.from+(value.to-value.from)*k;wake();if(t<1)appearanceFrame=requestAnimationFrame(tick);};tick(start);
+   };
+   const hoverExperiment=id=>{if(experimentHover===id)return;experimentHover=id;hover=null;hoverOwner=null;clearHoverDelay();syncContext();h.dataset.experimentHover=id||'';appearance();};
+   const linkColor=link=>{
+    const chosen=hover||current.current.selection?.id,active=chosen&&(idOf(link.source)===chosen||idOf(link.target)===chosen);
+    return alpha(active?(link.target.color||MD.grey700):link.kind==='canonical'?MD.grey700:link.main?MD.grey600:MD.grey400,(link.opacity??.6)*Math.min(link.source.entryAlpha??1,link.target.entryAlpha??1));
+   };
+   const softLink=(link,ctx)=>{
+    if(!link.main)return;
+    const points=spine.map(id=>model.nodes.find(n=>n.id===id)),controls=spineControls(points,link.step);
+    if(controls)paintSpine(ctx,controls,linkColor(link),UNIT);
+   };
+   const disc=(n,ctx,scale)=>{
+    ctx.save();ctx.globalAlpha=n.opacity*n.entryAlpha;const r=radius(n,scale);
+    const path=pad=>{const q=r+pad;ctx.beginPath();if(['method','plan','activity','observation'].includes(n.shape))ctx.roundRect(n.x-q,n.y-q,q*2,q*2,(n.shape==='observation'?2:5)*UNIT);else if(n.shape==='assessment'){ctx.moveTo(n.x,n.y-q);ctx.lineTo(n.x+q,n.y);ctx.lineTo(n.x,n.y+q);ctx.lineTo(n.x-q,n.y);ctx.closePath();}else ctx.arc(n.x,n.y,q,0,Math.PI*2);};
+    // Filled nodes have no decorative strokes; interaction adds only a soft fill.
+    if(n.emphasis>.02){path(4*UNIT);ctx.fillStyle=alpha(n.color,n.emphasis*.1);ctx.fill();}
+    const outline=!n.main&&['hypothesis','plan','observation'].includes(n.shape);path(0);ctx.fillStyle=outline?MD.white:n.color;ctx.fill();
+    if(outline){ctx.strokeStyle=n.color;ctx.lineWidth=1.4*UNIT;if(['hypothesis','plan'].includes(n.shape))ctx.setLineDash([3*UNIT,2*UNIT]);ctx.stroke();ctx.setLineDash([]);}
+    if(!n.main&&n.shape==='observation'){ctx.beginPath();ctx.moveTo(n.x-r*.45,n.y-r*.3);ctx.lineTo(n.x+r*.45,n.y-r*.3);ctx.moveTo(n.x-r*.45,n.y+r*.3);ctx.lineTo(n.x+r*.45,n.y+r*.3);ctx.strokeStyle=n.color;ctx.lineWidth=1.4*UNIT;ctx.stroke();}
+    if(n.main){ctx.font=`600 ${Math.min(12,Math.max(10,baseRadius(n)*DESIGN_SCALE*.8))*UNIT}px -apple-system, sans-serif`;ctx.textAlign='center';ctx.textBaseline='middle';ctx.fillStyle=numberColor(n.color);ctx.fillText(String(n.step),n.x,n.y+.3*UNIT);}
+    ctx.restore();
+   };
+   const visibleExperiments=()=>current.current.experiments?.filter(e=>current.current.experimentSelecting||current.current.experimentSelected?.includes(e.id)||current.current.selection?.id===e.id)||[];
+   const experimentPathsFor=()=>{
+    const relevant=visibleExperiments(),signature=lastLabelGeometry+'|'+relevant.map(e=>{const el=experimentEls.current.get(e.id);return e.id+':'+el?.offsetWidth+':'+el?.offsetHeight;}).join(',');
+    if(signature!==experimentGeometry){
+     const rectangles=model.nodes.flatMap(n=>{const p=layoutPosition(n),o=labelOffsets.get(n.id),m=cache.get(n.id),r=baseRadius(n);return[{x:p.x-r,y:p.y-r,w:r*2,h:r*2},...(o&&m?[{x:p.x+o.dx*UNIT,y:p.y+o.dy*UNIT,w:m.width*UNIT,h:m.height*UNIT}]:[])];});
+     experimentPaths=new Map();
+     for(const edge of relevant){const a=model.nodes.find(n=>n.id===edge.source),b=model.nodes.find(n=>n.id===edge.target);if(!a||!b)continue;const el=experimentEls.current.get(edge.id),size={w:(el?.offsetWidth||210)+14,h:(el?.offsetHeight||32)+12},pa=layoutPosition(a),pb=layoutPosition(b),curve=experimentCurve(pa,pb,rectangles,edge.index,UNIT,size);experimentPaths.set(edge.id,{curve,a,b,size});const m=curvePoint(curve,.5);rectangles.push({x:m.x-size.w*UNIT/2,y:m.y-size.h*UNIT/2,w:size.w*UNIT,h:size.h*UNIT});}
+     experimentGeometry=signature;
+    }
+    return relevant.map(e=>{const p=experimentPaths.get(e.id);if(!p)return null;const a=p.a,b=p.b,da={x:a.x-p.curve[0].x,y:a.y-p.curve[0].y},db={x:b.x-p.curve[2].x,y:b.y-p.curve[2].y};return{...e,labelSize:p.size,curve:[{x:a.x,y:a.y},{x:p.curve[1].x+(da.x+db.x)/2,y:p.curve[1].y+(da.y+db.y)/2},{x:b.x,y:b.y}]};}).filter(Boolean);
+   };
+   const paintExperiments=(ctx,scale)=>{
+    for(const edge of experimentPathsFor()){
+     const [a,c,b]=edge.curve,selected=current.current.experimentSelected?.includes(edge.id),active=current.current.selection?.id===edge.id||experimentHover===edge.id;
+     ctx.save();ctx.lineWidth=(selected||active?1.8:1.2)*UNIT;ctx.strokeStyle=alpha(MD.blue700,active?.9:experimentHover?.18:selected?.8:.44);ctx.setLineDash(selected?[]:[4*UNIT,3*UNIT]);ctx.lineCap='round';ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.quadraticCurveTo(c.x,c.y,b.x,b.y);ctx.stroke();ctx.restore();
+     const center=curvePoint(edge.curve,.5),point=g.graph2ScreenCoords(center.x,center.y),el=experimentEls.current.get(edge.id);
+     if(el){el.style.transform=`translate(${point.x}px,${point.y}px) translate(-50%,-50%) scale(${scale*UNIT})`;el.style.transformOrigin='center';el.dataset.hovered=String(experimentHover===edge.id);el.dataset.graphX=center.x;el.dataset.graphY=center.y;el.dataset.source=edge.source;el.dataset.target=edge.target;}
+    }
+   };
+   const pickExperiment=(x,y)=>{
+    let nearest=null,distance=10;
+    for(const edge of experimentPathsFor())for(let t=.06;t<.96;t+=.025){const p=curvePoint(edge.curve,t),q=g.graph2ScreenCoords(p.x,p.y),d=Math.hypot(q.x-x,q.y-y);if(d<distance){distance=d;nearest=edge;}}
+    return nearest;
+   };
+   const paintLabels=(ctx,scale)=>{
+    let nodes=model.nodes.filter(n=>Number.isFinite(n.x)&&Number.isFinite(n.y));
+    const coords=new Map(nodes.map(n=>[n.id,g.graph2ScreenCoords(n.x,n.y)]));
+    // Collision layout uses fixed design units, independent of BOTH zoom and pan.
+    const items=nodes.map(n=>{
+     const m=metrics(n,ctx),parent=model.nodes.find(p=>p.id===parents.get(n.id)),base=layoutPosition(n),parentBase=parent&&layoutPosition(parent);
+     const side=n.main?(n.step===1?'right':'left'):parentBase&&base.x<parentBase.x?'left':'right';
+     const length=parentBase?Math.hypot(base.x-parentBase.x,base.y-parentBase.y):0,outward=length?{x:(base.x-parentBase.x)/length,y:(base.y-parentBase.y)/length}:null;
+     return {id:n.id,outward,preferred:n.layoutLabel,motion:motionEnvelope(n),x:base.x*DESIGN_SCALE,y:base.y*DESIGN_SCALE,r:baseRadius(n)*DESIGN_SCALE+2,w:m.width,h:m.height,main:n.main,step:n.step,side};
+    });
+    const geometry=items.map(n=>[n.id,n.x,n.y,n.w,n.h].join(',')).join(';');
+    if(repackLabels||geometry!==lastLabelGeometry||labelOffsets.size!==items.length){labelOffsets=layoutLabels(items,repackLabels?new Map():labelOffsets);lastLabelGeometry=geometry;h.dataset.labelSolves=String(++labelSolves);}repackLabels=false;positionContext();nodes=[...nodes,...contextNodes];for(const n of contextNodes)coords.set(n.id,g.graph2ScreenCoords(n.x,n.y));const visualScale=scale*UNIT;
+    if(!current.current.selection)overviewCamera={...g.centerAt(),k:scale,width:g.width(),height:g.height()};
+    h.dataset.zoom=scale.toFixed(6);h.dataset.visualScale=visualScale.toFixed(6);h.dataset.mainLinkWidth=(1.45*visualScale).toFixed(3);
+    paintExperiments(ctx,scale);
+    for(const link of contextLinks()){const a=link.source,b=link.target,temp=a.temporary?a:b;ctx.save();ctx.globalAlpha=temp.entryAlpha*.4;ctx.strokeStyle=temp.color;ctx.lineWidth=.85*UNIT;ctx.setLineDash([3*UNIT,3*UNIT]);ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();ctx.restore();}
+    for(const n of [...nodes].sort((a,b)=>(b.depth??3)-(a.depth??3))){
+     const a=coords.get(n.id),m=metrics(n,ctx),offset=(n.temporary?contextOffsets:labelOffsets).get(n.id);
+     const x=a.x+offset.dx*visualScale,y=a.y+offset.dy*visualScale;n.labelSide=offset.side;n.labelRect=null;n.screenLabelRect=null;
+     if(!current.current.labels)continue;
+     const nearX=Math.max(x,Math.min(x+m.width*visualScale,a.x)),nearY=Math.max(y,Math.min(y+m.height*visualScale,a.y)),distance=Math.hypot(nearX-a.x,nearY-a.y),r=radius(n,scale)*scale;
+     n.labelGap=Math.max(0,distance-r)/visualScale;
+     if(distance-r>24*visualScale){
+      ctx.save();ctx.globalAlpha=n.opacity*n.entryAlpha*.48;ctx.strokeStyle=MD.grey500;ctx.lineWidth=.7*UNIT;
+      ctx.beginPath();ctx.moveTo(n.x+(nearX-a.x)*r/distance/scale,n.y+(nearY-a.y)*r/distance/scale);ctx.lineTo(n.x+(nearX-a.x)/scale,n.y+(nearY-a.y)/scale);ctx.stroke();ctx.restore();
+     }
+     if(n.temporary||n.depth===0)disc(n,ctx,scale);
+     ctx.save();ctx.translate(n.x+offset.dx*UNIT,n.y+offset.dy*UNIT);ctx.scale(UNIT,UNIT);ctx.globalAlpha=n.opacity*n.entryAlpha;
+     ctx.font=m.font;ctx.textBaseline='top';ctx.fillStyle=n.main?MD.grey900:MD.grey700;m.lines.forEach((text,index)=>ctx.fillText(text,5,2+index*m.lineHeight));
+     if(m.subtype){ctx.font='400 11px -apple-system, "PingFang SC", sans-serif';ctx.fillStyle=MD.grey700;ctx.fillText(m.subtype,5,4+m.lines.length*m.lineHeight);}ctx.restore();
+     n.labelRect={x:n.x+offset.dx*UNIT,y:n.y+offset.dy*UNIT,w:m.width*UNIT,h:m.height*UNIT};n.screenLabelRect={x,y,w:m.width*visualScale,h:m.height*visualScale};
+    }
+    for(const n of nodes){
+     const hit=hitEls.current.get(n.id),a=coords.get(n.id);if(!hit)continue;
+     const transform=`translate3d(${a.x-18}px,${a.y-18}px,0)`;if(hit.style.transform!==transform)hit.style.transform=transform;
+     hit.style.visibility=n.leaving||n.entryAlpha<.1?'hidden':'visible';hit.dataset.temporary=String(!!n.temporary);hit.dataset.owner=n.owner||'';hit.dataset.labelVisible=String(!!n.screenLabelRect);hit.dataset.labelSide=n.labelSide;hit.dataset.depth=String(n.depth);hit.dataset.opacity=n.opacity.toFixed(2);hit.dataset.positionPinned=String(n.fx!=null||n.fy!=null);hit.dataset.graphX=n.x.toFixed(3);hit.dataset.graphY=n.y.toFixed(3);hit.dataset.nodeRadius=(radius(n)*scale).toFixed(3);hit.dataset.labelFontSize=((n.main?(n.type==='claim'?15:14):12)*visualScale).toFixed(3);hit.tabIndex=current.current.hidden.has(n.type)?-1:0;
+     hit.dataset.nodeColor=n.color;hit.dataset.readingOwner=n.layoutOwner||n.owner||'';hit.dataset.labelGap=(n.labelGap||0).toFixed(2);hit.dataset.restX=layoutPosition(n).x.toFixed(3);hit.dataset.restY=layoutPosition(n).y.toFixed(3);
+     const label=hit.firstElementChild,p=n.screenLabelRect;if(label&&p){label.style.width=p.w+'px';label.style.height=p.h+'px';label.style.transform=`translate3d(${p.x-a.x+18}px,${p.y-a.y+18}px,0)`;}
+    }
+   };
+   const objectBounds=n=>{
+    const r=radius(n),label=n.labelRect;
+    return {x0:Math.min(n.x-r,label?.x??Infinity),y0:Math.min(n.y-r,label?.y??Infinity),x1:Math.max(n.x+r,label?label.x+label.w:-Infinity),y1:Math.max(n.y+r,label?label.y+label.h:-Infinity)};
+   };
+   const frameBounds=(box,k,ms)=>{
+    const screenY=(view.top+view.height-view.bottom)/2,screenX=(view.left+view.width-view.right)/2,time=duration(ms);hold(time);camera.move({k,x:(box.x0+box.x1)/2-(screenX-view.width/2)/k,y:(box.y0+box.y1)/2-(screenY-view.height/2)/k},time);
+   };
+   const fit=(ms=520)=>{
+    pan?.cancel();const nodes=drawnNodes().filter(n=>Number.isFinite(n.x)&&Number.isFinite(n.y));if(!nodes.length)return;bounds();
+    const boxes=nodes.map(objectBounds);
+    if(current.current.experimentSelecting)for(const e of experimentPathsFor()){for(let t=0;t<=1;t+=.05){const p=curvePoint(e.curve,t);boxes.push({x0:p.x-4*UNIT,y0:p.y-4*UNIT,x1:p.x+4*UNIT,y1:p.y+4*UNIT});}const m=curvePoint(e.curve,.5),w=e.labelSize.w*UNIT/2,h=e.labelSize.h*UNIT/2;boxes.push({x0:m.x-w,y0:m.y-h,x1:m.x+w,y1:m.y+h});}
+    const box={x0:Math.min(...boxes.map(b=>b.x0)),y0:Math.min(...boxes.map(b=>b.y0)),x1:Math.max(...boxes.map(b=>b.x1)),y1:Math.max(...boxes.map(b=>b.y1))};
+    const k=Math.max(.08,Math.min(1.15,(view.width-view.left-view.right)/Math.max(1,box.x1-box.x0),(view.height-view.top-view.bottom)/Math.max(1,box.y1-box.y0)));
+    frameBounds(box,k,ms);
+   };
+   const focus=(n,ms=320)=>{
+    pan?.cancel();if(current.current.detailExpanded||!Number.isFinite(n.x)||!Number.isFinite(n.y))return;bounds();const members=[n,...contextNodes.filter(v=>v.owner===(n.owner||n.id)&&!v.leaving)],boxes=members.map(objectBounds),box={x0:Math.min(...boxes.map(b=>b.x0)),y0:Math.min(...boxes.map(b=>b.y0)),x1:Math.max(...boxes.map(b=>b.x1)),y1:Math.max(...boxes.map(b=>b.y1))};
+    // Frame the chosen object and its label together; never move the label to fit a panel.
+    const k=Math.max(.08,Math.min(Math.max(g.zoom(),.4),.65,(view.width-view.left-view.right-20)/Math.max(1,box.x1-box.x0),(view.height-view.top-view.bottom)/Math.max(1,box.y1-box.y0)));
+    frameBounds(box,k,ms);
+   };
+   const restoreCamera=()=>{pan?.cancel();if(!savedCamera)return false;hold(duration(320));camera.move(savedCamera,duration(320));return true;};
+   const selectionChanged=()=>{
+    const id=current.current.selection?.id||null;hover=null;hoverOwner=null;clearHoverDelay();experimentHover=null;h.dataset.experimentHover='';syncContext();appearance();
+    if(id&&!lastSelection)savedCamera=overviewCamera||{...g.centerAt(),k:g.zoom(),width:g.width(),height:g.height()};
+    autoFit=false;lastSelection=id;if(current.current.detailExpanded)return;
+    const n=drawnNodes().find(n=>n.id===id),experiment=current.current.experiments?.find(e=>e.id===id);
+    if(experiment){const members=model.nodes.filter(n=>[experiment.source,experiment.target].includes(n.id));bounds();const boxes=members.map(objectBounds);if(boxes.length){const box={x0:Math.min(...boxes.map(b=>b.x0)),x1:Math.max(...boxes.map(b=>b.x1)),y0:Math.min(...boxes.map(b=>b.y0)),y1:Math.max(...boxes.map(b=>b.y1))},k=Math.max(.08,Math.min(.42,(view.width-view.left-view.right-20)/(box.x1-box.x0),(view.height-view.top-view.bottom-20)/(box.y1-box.y0)));frameBounds(box,k,320);}}
+    else if(n)focus(n);else if(id==='experiment-scope')fit();else if(!id&&!restoreCamera())fit();
+   };
+   const resetDrift=()=>{stopDrift();ambientTime=0;for(const n of model.nodes){delete n.restX;delete n.restY;}};
+   const reheat=()=>{resetDrift();running=true;ticks=0;g.cooldownTicks(preference.matches?0:240).d3ReheatSimulation();wake();};
+   const update=(extras,initial=false)=>{
+    pan?.cancel();resetDrift();labelOffsets.clear();cancelAnimationFrame(entryFrame);const next=project(extras),previous=new Map(model.nodes.map(n=>[n.id,n])),starts=new Map();
+    next.nodes=next.nodes.map(record=>{const node=previous.get(record.id)||record;delete node.fx;delete node.fy;node.entryAlpha=previous.has(node.id)?node.entryAlpha:0;starts.set(node,node.entryAlpha);return node;});
+    model=next;cache.clear();const ctx=h.querySelector('canvas').getContext('2d');
+    const items=model.nodes.map(n=>({id:n.id,main:n.main,r:baseRadius(n)*DESIGN_SCALE+2,w:metrics(n,ctx).width,h:metrics(n,ctx).height}));
+    const arrangement=planReadingLayout(items,spine,parents);
+    for(const [i,n] of model.nodes.entries()){
+     const p=arrangement.get(n.id);n.layoutOwner=p.owner;n.layoutX=p.x*UNIT;n.layoutY=p.y*UNIT;n.layoutDX=p.dx;n.layoutDY=p.dy;n.layoutLabel=p.label;n.layoutBody=readingObjectBody(items[i],p.label);
+     if(initial||!previous.has(n.id)){n.x=n.layoutX;n.y=n.layoutY;}
+    }
+    autoFit=true;running=true;ticks=0;g.warmupTicks(preference.matches?230:35).cooldownTicks(preference.matches?0:240).graphData(model);publishVisible();appearance(0);
+    const time=duration(initial?500:260),start=performance.now();hold(time);
+    const tick=now=>{const t=time?Math.min(1,(now-start)/time):1,k=ease(t);for(const n of model.nodes)n.entryAlpha=starts.get(n)+(1-starts.get(n))*k;wake();if(t<1)entryFrame=requestAnimationFrame(tick);};tick(start);
+   };
+   try{
+    // One scheduler owns redraws: the library must not skip our custom transitions.
+    bounds();g=new ForceGraph(h).width(view.width).height(view.height).backgroundColor('rgba(0,0,0,0)').cooldownTime(4500).d3AlphaMin(.002).d3AlphaDecay(.035).d3VelocityDecay(.3).enableNodeDrag(false).enablePanInteraction(false).nodeLabel('').autoPauseRedraw(false).minZoom(.08).maxZoom(3).nodeCanvasObject(disc)
+     .nodePointerAreaPaint((n,color,ctx,scale)=>{ctx.fillStyle=color;if(n.labelRect){const b=n.labelRect;ctx.fillRect(b.x,b.y,b.w,b.h);}ctx.beginPath();ctx.arc(n.x,n.y,radius(n,scale)+5/scale,0,Math.PI*2);ctx.fill();})
+     .linkColor(linkColor).linkWidth(link=>(link.main?1.45:link.kind==='canonical'?1.1:.75)*UNIT*g.zoom()).linkLineDash(link=>link.kind==='canonical'?[5*UNIT,3*UNIT]:null).linkCurvature(link=>link.curve)
+     .linkCanvasObjectMode(link=>link.main?'replace':'after').linkCanvasObject(softLink)
+     .linkDirectionalArrowLength(link=>link.kind==='canonical'?5*UNIT:0).linkDirectionalArrowRelPos(.8)
+     .onRenderFramePost(paintLabels).onZoom(wake).onNodeClick(n=>current.current.onPick(n.id)).onNodeHover(()=>{}).onBackgroundClick(()=>{setNodeHover(null);if(current.current.selection)current.current.onPick(null);}).onLinkClick(link=>{if(link.raw)current.current.onPickEdge(link.raw.id);})
+     .onEngineTick(()=>{stopDrift();running=true;ticks++;markMotion();if(autoFit&&!current.current.selection&&(ticks===1||ticks%24===0))fit(ticks===1?0:180);})
+     .onEngineStop(()=>{resetDrift();running=false;repackLabels=true;const frameInitialSelection=!settledOnce&&current.current.selection?.kind==='record';settledOnce=true;if(autoFit||frameInitialSelection){autoFit=false;requestAnimationFrame(()=>requestAnimationFrame(()=>{if(disposed)return;const chosen=drawnNodes().find(n=>n.id===current.current.selection?.id);if(chosen)focus(chosen);else fit(380);}));}wake();});
+    camera=createCameraMotion({graph:g,element:h,reduced:()=>preference.matches,onActivity:wake});
+    // Our reading anchors own world placement; a second centroid force would
+    // continually shove asymmetric neighborhoods away from their own parent.
+    g.d3Force('center',null);
+    g.d3Force('charge').strength(n=>n.main?-850:-320).distanceMax(1000);
+    g.d3Force('link').distance(linkDistance).strength(link=>link.kind==='canonical'?.025:link.main?.09:.06);
+    g.d3Force('reading-neighborhood',neighborhoodForce);
+    g.d3Force('collide',labeledObjectCollision(UNIT));
+    pan=createGraphGestures({element:h,graph:g,reduced:()=>preference.matches,
+     findNode:(x,y)=>{
+      const ordered=drawnNodes().filter(n=>!n.leaving).sort((a,b)=>(a.depth??3)-(b.depth??3));
+      return ordered.find(n=>{const a=g.graph2ScreenCoords(n.x,n.y);return Math.hypot(x-a.x,y-a.y)<radius(n,g.zoom())*g.zoom()+5;})||ordered.find(n=>{const p=n.screenLabelRect;return p&&x>=p.x&&x<=p.x+p.w&&y>=p.y&&y<=p.y+p.h;});
+     },
+     onStart:()=>{camera.cancel();autoFit=false;pointerHeld=true;hover=null;experimentHover=null;appearance();wake();},onActivity:wake,
+     onRelease:()=>{pointerHeld=false;wake();},onTap:(n,point)=>{if(n){current.current.onPick(n.id);return;}const rect=h.getBoundingClientRect(),edge=pickExperiment(point.x-rect.left,point.y-rect.top);if(edge){current.current.onInspectExperiment(edge.id);return;}if(current.current.selection)current.current.onPick(null);},
+     onNodeStart:n=>{if(n.temporary){dragging=true;return;}resetDrift();dragging=true;running=true;n.entryAlpha=1;h.dataset.draggedNode=n.id;h.style.cursor='grabbing';g.cooldownTime(Infinity).cooldownTicks(Infinity).d3AlphaMin(0).d3ReheatSimulation();wake();},
+     onNodeEnd:n=>{if(n.temporary){dragging=false;delete n.fx;delete n.fy;wake();return;}neighborhoodForce.retarget(n);for(const link of model.links)if(link.source===n||link.target===n)link.restDistance=Math.hypot(link.source.x-link.target.x,link.source.y-link.target.y);g.d3Force('link').distance(linkDistance);dragging=false;h.style.cursor='grab';g.cooldownTime(4500).d3AlphaMin(.002);reheat();}
+    });
+    api.current={update,fit:()=>{savedCamera=null;autoFit=false;fit();},reset:()=>{pan?.cancel();labelOffsets.clear();savedCamera=null;autoFit=true;for(const n of model.nodes){delete n.fx;delete n.fy;}reheat();fit();},focus:selectionChanged,frameDetail:()=>{if(current.current.selection?.kind?.startsWith('experiment')){if(!current.current.detailExpanded)selectionChanged();return;}const n=drawnNodes().find(n=>n.id===current.current.selection?.id);if(n){camera?.cancel();if(!current.current.detailExpanded)focus(n);}},sync:()=>{if(experimentHover&&!visibleExperiments().some(e=>e.id===experimentHover))hoverExperiment(null);bounds();cache.clear();appearance();},hoverExperiment,hover:id=>setNodeHover(drawnNodes().find(n=>n.id===id))};
+    update(current.current.extras,true);
+    resize=new ResizeObserver(()=>{const signature=h.clientWidth+':'+h.clientHeight;if(signature===lastSize)return;lastSize=signature;bounds();cache.clear();g.width(view.width).height(view.height);const selected=model.nodes.find(n=>n.id===current.current.selection?.id);if(selected)focus(selected);else if(!restoreCamera())fit();});resize.observe(h);h.dataset.layout='content-aware-force';h.dataset.labels='graph-collision';h.dataset.opacityMode='graph-distance';h.dataset.zoomMode='world-geometry';h.dataset.spineStyle='smooth-cubic';h.dataset.spineBaseOpacity='0.48';
+   }catch(e){setError('节点图未能打开：'+e.message);}
+   const region=h.parentElement;const userZoom=()=>{camera?.cancel();autoFit=false;};region.addEventListener('wheel',userZoom,{capture:true,passive:true});
+   const events=['pointermove','pointerdown','pointerleave','wheel','keydown'];events.forEach(event=>region.addEventListener(event,wake,{passive:true,capture:true}));
+   const down=()=>{pointerHeld=true;wake();},up=()=>{pointerHeld=false;wake();};region.addEventListener('pointerdown',down);window.addEventListener('pointerup',up);window.addEventListener('pointercancel',up);
+   const leave=()=>{setNodeHover(null);hoverExperiment(null);};region.addEventListener('pointerleave',leave);
+   const hoverLine=event=>{if(event.target.tagName!=='CANVAS'||pan?.active||camera?.active||running)return;const r=h.getBoundingClientRect(),x=event.clientX-r.left,y=event.clientY-r.top,n=drawnNodes().filter(n=>!n.leaving).find(n=>{const a=g.graph2ScreenCoords(n.x,n.y),p=n.screenLabelRect;return Math.hypot(x-a.x,y-a.y)<radius(n)*g.zoom()+5||(p&&x>=p.x&&x<=p.x+p.w&&y>=p.y&&y<=p.y+p.h);});if(n){hoverExperiment(null);setNodeHover(n);}else{const bridge=contextNodes.filter(n=>!n.leaving&&n.owner===hoverOwner).some(n=>{const owner=model.nodes.find(o=>o.id===n.owner);if(!owner)return false;const a=g.graph2ScreenCoords(owner.x,owner.y),b=g.graph2ScreenCoords(n.x,n.y),dx=b.x-a.x,dy=b.y-a.y,t=Math.max(0,Math.min(1,((x-a.x)*dx+(y-a.y)*dy)/(dx*dx+dy*dy||1)));return Math.hypot(x-a.x-t*dx,y-a.y-t*dy)<14;});if(bridge){clearHoverDelay();return;}const edge=pickExperiment(x,y);if(edge){setNodeHover(null);hoverExperiment(edge.id);h.style.cursor='pointer';}else{hoverExperiment(null);setNodeHover(null);}}};h.addEventListener('pointermove',hoverLine);
+   const visibility=()=>{if(document.hidden){camera?.cancel();pan?.cancel();stopDrift();cancelAnimationFrame(entryFrame);cancelAnimationFrame(appearanceFrame);for(const n of model.nodes)n.entryAlpha=1;busyUntil=0;clearTimeout(pauseTimer);paused=true;g?.pauseAnimation();markMotion();}else{appearance(0);wake();}};document.addEventListener('visibilitychange',visibility);
+   const changePreference=()=>{camera?.cancel();pan?.cancel();stopDrift();if(preference.matches){cancelAnimationFrame(entryFrame);cancelAnimationFrame(appearanceFrame);for(const n of model.nodes)n.entryAlpha=1;busyUntil=0;g?.cooldownTicks(0);appearance(0);}else{g?.cooldownTicks(240);wake();}};preference.addEventListener('change',changePreference);
+   return()=>{disposed=true;clearHoverDelay();cancelAnimationFrame(contextFrame);region.removeEventListener('wheel',userZoom,true);pan?.dispose();camera?.dispose();stopDrift();region.removeEventListener('pointerdown',down);window.removeEventListener('pointerup',up);window.removeEventListener('pointercancel',up);resize?.disconnect();cancelAnimationFrame(entryFrame);cancelAnimationFrame(appearanceFrame);clearTimeout(pauseTimer);events.forEach(event=>region.removeEventListener(event,wake,true));region.removeEventListener('pointerleave',leave);h.removeEventListener('pointermove',hoverLine);document.removeEventListener('visibilitychange',visibility);preference.removeEventListener('change',changePreference);g?._destructor();api.current=null;};
+  },[]);
+  useEffect(()=>{if(seenExtras.current!==props.extras){seenExtras.current=props.extras;api.current?.update(props.extras);}},[props.extras]);
+  useLayoutEffect(()=>{if(seenSelection.current!==props.selection?.id){seenSelection.current=props.selection?.id;api.current?.sync();api.current?.focus();}},[props.selection?.id]);
+  useLayoutEffect(()=>{api.current?.frameDetail();},[props.detailExpanded]);
+  useEffect(()=>{api.current?.sync();},[props.labels,props.hidden,props.ambient,props.motionBlocked,props.experimentSelecting,props.experimentSelected]);
+  useLayoutEffect(()=>{if(seenExperimentSelecting.current!==props.experimentSelecting){seenExperimentSelecting.current=props.experimentSelecting;if(props.experimentSelecting)api.current?.fit();}},[props.experimentSelecting]);
+  useEffect(()=>{if(seenFolded.current!==props.folded){seenFolded.current=props.folded;api.current?.sync();api.current?.fit();}},[props.folded]);
+  useEffect(()=>{if(seenFit.current!==props.fitSignal){seenFit.current=props.fitSignal;api.current?.fit();}},[props.fitSignal]);
+  useEffect(()=>{if(seenReset.current!==props.resetSignal){seenReset.current=props.resetSignal;api.current?.reset();}},[props.resetSignal]);
+  return <div className="graph-region"><div className="graph-canvas" ref={holder}/><div className="node-overlay" aria-label="论文节点图">{visible.map(n=><button key={n.id} data-id={n.id} ref={el=>{if(el)hitEls.current.set(n.id,el);else hitEls.current.delete(n.id);}} className="graph-hit" aria-label={recordLabel(n.record)} title={semanticLabelOf(n.record)+' · '+recordLabel(n.record)} onFocus={()=>api.current?.hover(n.id)} onBlur={()=>api.current?.hover(null)} onClick={()=>props.onPick(n.id)}><span className="graph-label-hit" aria-hidden="true"/></button>)}</div><div className="experiment-overlay" aria-label="图上实验关系">{props.experiments?.filter(e=>props.experimentSelecting||props.experimentSelected?.includes(e.id)||props.selection?.id===e.id).map(e=><div key={e.id} ref={el=>{if(el)experimentEls.current.set(e.id,el);else experimentEls.current.delete(e.id)}} className="experiment-edge-group" data-experiment={e.id} data-selected={props.experimentSelected?.includes(e.id)||false} onMouseEnter={()=>api.current?.hoverExperiment(e.id)} onMouseLeave={()=>api.current?.hoverExperiment(null)} onFocusCapture={()=>api.current?.hoverExperiment(e.id)} onBlurCapture={event=>{if(!event.currentTarget.contains(event.relatedTarget))api.current?.hoverExperiment(null)}}><button className="experiment-edge-label" aria-label={'查看实验：'+e.question} title={e.question} onClick={()=>props.onInspectExperiment(e.id)}><span>{e.title||e.question}</span></button><button className="experiment-edge-pick" aria-label={(props.experimentSelecting?(props.experimentSelected?.includes(e.id)?'取消选择':'选择'):'查看')+e.title} disabled={props.experimentSelecting&&(props.experimentLocked||(props.experimentSelectable&&!props.experimentSelectable.includes(e.id)))} aria-pressed={props.experimentSelected?.includes(e.id)||false} onClick={()=>props.onExperiment(e.id)}><SelectionMark selected={props.experimentSelected?.includes(e.id)||false}/></button></div>)}</div>{error&&<div className="graph-error" role="alert">{error}</div>}</div>;
+ };
+}

package/ui/arkgraph/outline.jsx

@@ -0,0 +1,49 @@
+import React,{useState,useMemo,useDeferredValue,useEffect} from 'react';
+import {contentGroups,buildOutlineReading} from './reading-presentation.mjs';
+
+export function createOutline({D,byKey,spine,groups,recordLabel,typeLabel,coreLabels,coreHints,coreTypeOf,colorOf,Icon,TypeMark,useCompleteData,cachedSearch,predicateLabel}){
+ const {sections,appendices}=buildOutlineReading(D);
+ const categories=contentGroups.map(g=>({...g,count:D.nodes.filter(n=>g.types.includes(coreTypeOf(n))).length})).filter(g=>g.count);
+ return function Outline({onClose,openRecord,openEdge}){
+  const [dataUrl,setDataUrl]=useState('');
+  useEffect(()=>{const url=URL.createObjectURL(new Blob([JSON.stringify(D,null,2)],{type:'application/json'}));setDataUrl(url);return()=>URL.revokeObjectURL(url)},[]);
+  const [tab,setTab]=useState('reading'),[query,setQuery]=useState(''),[type,setType]=useState(''),[limit,setLimit]=useState(30);
+  const q=useDeferredValue(query).trim().toLowerCase(),{value:complete,error,retry}=useCompleteData(!!q);
+  const source=complete||D;
+  const activeGroup=contentGroups.find(g=>g.id===type);
+  const nodes=useMemo(()=>source.nodes.filter(n=>(!activeGroup||activeGroup.types.includes(coreTypeOf(n)))&&(!q||cachedSearch(n).includes(q))),[source,activeGroup,q]);
+  const edges=useMemo(()=>source.edges.filter(e=>!q||[cachedSearch(e),recordLabel(byKey.get(e.from)),recordLabel(byKey.get(e.to)),predicateLabel[e.predicate]].join(' ').toLowerCase().includes(q)),[source,q]);
+  const row=(n,main=false,index=0)=><button key={n.key} className={'outline-row '+(main?'outline-main':'')} data-record={n.key} onClick={()=>openRecord(n.key)}>
+   <span className={'outline-mark '+(main?'numbered':'')} style={{color:colorOf(n)}}>{main?String(index+1).padStart(2,'0'):<TypeMark type={coreTypeOf(n)}/>}</span>
+   <span className="outline-row-copy"><b>{recordLabel(n)}</b>{main&&<small>{typeLabel(n)}</small>}</span>
+   {!main&&<small className="outline-kind">{typeLabel(n)}</small>}<Icon name="arrow-right" size={13}/>
+  </button>;
+  const branches=items=>items.length?<div className="outline-children">{items.map(item=><div key={item.id}>{row(byKey.get(item.id))}{branches(item.children)}</div>)}</div>:null;
+  const fold=(id,label,nodes,children,note)=> <details key={id} className="outline-supplement"><summary><span>{label}</span><small>{nodes.length} 项</small><Icon name="chevron-down" size={14}/></summary>{note&&<p className="outline-type-note">{note}</p>}{children||nodes.map(n=>row(n))}</details>;
+  return <aside className="catalog outline-panel" aria-label="论文大纲">
+   <div className="outline-header"><div><h2>大纲</h2><p>{D.nodes.length} 个对象 <span>·</span> {D.edges.length} 条关系</p></div><button className="outline-close" aria-label="关闭大纲" onClick={onClose}><Icon name="close" size={18}/></button></div>
+   <div className="outline-search"><Icon name="search" size={16}/><input type="search" value={query} onChange={e=>{setQuery(e.target.value);setLimit(30)}} placeholder="搜索内容、数值或来源" aria-label="搜索大纲"/>{query&&<button aria-label="清空搜索" onClick={()=>setQuery('')}><Icon name="close" size={14}/></button>}</div>
+   <nav className="outline-tabs" aria-label="大纲视图">{[['reading','阅读脉络'],['objects','对象分类'],['relations','关系']].map(([id,label])=><button key={id} aria-pressed={tab===id} onClick={()=>{setTab(id);setType('');setLimit(30)}}>{label}</button>)}</nav>
+   {tab==='objects'&&<div className="outline-filters" aria-label="对象类型筛选"><button aria-pressed={!type} onClick={()=>setType('')}>全部 <small>{D.nodes.length}</small></button>{categories.map(group=><button key={group.id} aria-pressed={type===group.id} title={group.types.map(id=>coreHints[id]).join('；')} onClick={()=>setType(group.id)}>{group.label}<small>{group.count}</small></button>)}</div>}
+   <div className="outline-scroll" key={tab}>
+    {q&&<div className="outline-result-count" role="status">{tab==='relations'?edges.length:nodes.length} 项匹配{!complete&&!error?' · 正在检索完整记录…':''}</div>}
+    {error&&<p role="alert" className="outline-empty">{error} <button onClick={retry}>重试</button></p>}
+    {tab==='reading'&&!q?<>
+     <div className="outline-section-label">研究脉络 <span>{spine.length} 个主节点</span></div>
+     <div className="outline-sections">{sections.map(s=><section key={s.id} className="outline-section">{row(byKey.get(s.id),true,s.index)}{branches(s.children)}</section>)}</div>
+     {!!appendices.length&&<><div className="outline-section-label">按需查阅 <span>{appendices.reduce((total,g)=>total+g.nodes.length,0)} 个补充对象</span></div><div className="outline-appendices">{appendices.map(group=>fold(group.id,group.label,group.nodes,group.parts.length?<div className="outline-subgroups">{group.parts.map(part=>fold(part.id,part.label,part.nodes))}</div>:null,group.note))}</div></>}
+    </>:tab==='relations'?<>
+     {!q&&<div className="outline-section-label">对象之间的关联 <span>{edges.length} 条</span></div>}
+     {edges.slice(0,limit).map(e=><button key={e.id} className="outline-relation" data-relation={e.id} onClick={()=>openEdge(e.id)}><span className="outline-relation-from">{recordLabel(byKey.get(e.from))}</span><span className="outline-predicate"><Icon name="arrow-right" size={13}/>{predicateLabel[e.predicate]||e.predicate}</span><span className="outline-relation-to">{recordLabel(byKey.get(e.to))}</span></button>)}
+     {edges.length>limit&&<button className="outline-more" onClick={()=>setLimit(n=>n+30)}>再显示 {Math.min(30,edges.length-limit)} 条 <span>{limit} / {edges.length}</span></button>}
+     {!edges.length&&<p className="outline-empty">没有匹配的关系</p>}
+    </>:<>
+     {!q&&<div className="outline-section-label">{activeGroup?activeGroup.label:'全部研究对象'} <span>{nodes.length} 项</span></div>}
+     {activeGroup&&<p className="outline-type-note">{activeGroup.types.map(id=>coreLabels[id]).join(' · ')}</p>}{nodes.map(n=>row(n))}
+     {!nodes.length&&<p className="outline-empty">{q?'没有匹配内容，试试其他关键词。':'本篇尚未建立此类独立对象。'}</p>}
+    </>}
+   </div>
+   <footer className="outline-footer">{D.sourceDocument&&<a href={D.sourceDocument} target="_blank" rel="noopener"><Icon name="document" size={14}/>原文</a>}<a href={dataUrl} download="arkgraph.json">全部数据 ↓</a></footer>
+  </aside>;
+ };
+}