@zixcel/dom-renderer 0.10.4 → 0.10.5

package/src/spatial-patterns.mjs

@@ -1,43 +1,65 @@
-import {layoutWorld} from './world-model.mjs'
-
+import { layoutWorld } from './world-model.mjs';
 // View-local partitions, never entities, inferred meanings, relationships or commands.
-export const spatialPatterns=Object.freeze([['garden','Garden'],['ground','Ground · people and places'],['constellation','Constellation · information']])
-export const spatialGroupings=Object.freeze([['declared','Declared structure'],['meaning','Meaning reference'],['source','Source owner']])
-const pageSize=24
-export function spatialPattern(objects,relations=[],options={}){
- layoutWorld(objects,relations) // Validate even when a collapsed view would hide bad input.
- const pattern=options.pattern??'ground',groupBy=options.groupBy??'declared'
- if(!spatialPatterns.some(([id])=>id===pattern))throw Error('SpatialPatternInvalid')
- if(!spatialGroupings.some(([id])=>id===groupBy))throw Error('SpatialGroupingInvalid')
- const state={pattern,groupBy,group:null,page:0}
- if(pattern==='ground')return {objects,relations,groups:[],state,total:objects.length,pages:1,label:'All objects'}
- const actors=objects.filter(i=>i.kind==='character'),records=objects.filter(i=>i.kind!=='character'),partitions=new Map(),ids=new Set(objects.map(i=>i.id))
- for(const item of records){
-  let key=null,title='Unclassified'
-  if(groupBy==='declared'&&item.group?.kind&&item.group?.ref){key=[item.group.kind,item.group.ref];title=item.groupLabel??item.group.ref}
-  if(groupBy==='meaning'&&typeof item.semanticRef==='string'){key=item.semanticRef;title='Meaning · '+key}
-  if(groupBy==='source'){
-   const owners=[...new Set((item.sourceRefs??[]).map(s=>s.owner).filter(v=>typeof v==='string'))].sort()
-   if(owners.length){key=owners;title=owners.join(' + ')}
-  }
-  const identity=JSON.stringify([groupBy,key]);let group=partitions.get(identity)
-  if(!group){let id='view:group:'+identity;while(ids.has(id))id='view:'+id;ids.add(id);group={id,kind:'group',title,memberIds:[],members:[]};partitions.set(identity,group)}
-  group.memberIds.push(item.id);group.members.push(item)
- }
- const groups=[...partitions.values()],selected=groups.find(g=>g.id===options.group)
- state.group=selected?.id??null
- if(pattern==='garden'){
-  if(actors.length>32)throw Error('WorldCapacityExceeded')
-  // Records remain in the exact focused projection. A shelf is a local index
-  // for that person's information, not an entity standing beside the person.
-  state.group=null;state.page=0
-  const actorIds=new Set(actors.map(i=>i.id))
-  return {objects:actors,relations:relations.filter(r=>actorIds.has(r.from)&&actorIds.has(r.to)),groups:groups.map(({members,...g})=>g),state,total:actors.length,pages:1,label:'People'}
- }
- const candidates=selected?selected.members:groups.map(({members,...g})=>({...g,summary:g.memberIds.length+' records · Browse shelf'}))
- // Actors share the same paging budget; no silent truncation or unbounded group expansion.
- const all=[...actors,...candidates],pages=Math.max(1,Math.ceil(all.length/pageSize))
- state.page=state.group!==options.group&&options.group?0:Math.min(pages-1,Math.max(0,Number.isSafeInteger(options.page)?options.page:0))
- const visible=all.slice(state.page*pageSize,(state.page+1)*pageSize),visibleIds=new Set(visible.filter(i=>i.kind!=='group').map(i=>i.id))
- return {objects:visible,relations:relations.filter(r=>visibleIds.has(r.from)&&visibleIds.has(r.to)),groups:groups.map(({members,...g})=>g),state,total:all.length,pages,label:selected?.title??'All groups'}
+export const spatialPatterns = Object.freeze([['garden', 'Garden'], ['ground', 'Ground · people and places'], ['constellation', 'Constellation · information']]);
+export const spatialGroupings = Object.freeze([['declared', 'Declared structure'], ['meaning', 'Meaning reference'], ['source', 'Source owner']]);
+const pageSize = 24;
+export function spatialPattern(objects, relations = [], options = {}) {
+    layoutWorld(objects, relations); // Validate even when a collapsed view would hide bad input.
+    const pattern = options.pattern ?? 'ground', groupBy = options.groupBy ?? 'declared';
+    if (!spatialPatterns.some(([id]) => id === pattern))
+        throw Error('SpatialPatternInvalid');
+    if (!spatialGroupings.some(([id]) => id === groupBy))
+        throw Error('SpatialGroupingInvalid');
+    const state = { pattern, groupBy, group: null, page: 0 };
+    if (pattern === 'ground')
+        return { objects, relations, groups: [], state, total: objects.length, pages: 1, label: 'All objects' };
+    const actors = objects.filter(i => i.kind === 'character'), records = objects.filter(i => i.kind !== 'character'), partitions = new Map(), ids = new Set(objects.map(i => i.id));
+    for (const item of records) {
+        let key = null, title = 'Unclassified';
+        if (groupBy === 'declared' && item.group?.kind && item.group?.ref) {
+            key = [item.group.kind, item.group.ref];
+            title = item.groupLabel ?? item.group.ref;
+        }
+        if (groupBy === 'meaning' && typeof item.semanticRef === 'string') {
+            key = item.semanticRef;
+            title = 'Meaning · ' + key;
+        }
+        if (groupBy === 'source') {
+            const owners = [...new Set((item.sourceRefs ?? []).map(s => s.owner).filter(v => typeof v === 'string'))].sort();
+            if (owners.length) {
+                key = owners;
+                title = owners.join(' + ');
+            }
+        }
+        const identity = JSON.stringify([groupBy, key]);
+        let group = partitions.get(identity);
+        if (!group) {
+            let id = 'view:group:' + identity;
+            while (ids.has(id))
+                id = 'view:' + id;
+            ids.add(id);
+            group = { id, kind: 'group', title, memberIds: [], members: [] };
+            partitions.set(identity, group);
+        }
+        group.memberIds.push(item.id);
+        group.members.push(item);
+    }
+    const groups = [...partitions.values()], selected = groups.find(g => g.id === options.group);
+    state.group = selected?.id ?? null;
+    if (pattern === 'garden') {
+        if (actors.length > 32)
+            throw Error('WorldCapacityExceeded');
+        // Records remain in the exact focused projection. A shelf is a local index
+        // for that person's information, not an entity standing beside the person.
+        state.group = null;
+        state.page = 0;
+        const actorIds = new Set(actors.map(i => i.id));
+        return { objects: actors, relations: relations.filter(r => actorIds.has(r.from) && actorIds.has(r.to)), groups: groups.map(({ members, ...g }) => g), state, total: actors.length, pages: 1, label: 'People' };
+    }
+    const candidates = selected ? selected.members : groups.map(({ members, ...g }) => ({ ...g, summary: g.memberIds.length + ' records · Browse shelf' }));
+    // Actors share the same paging budget; no silent truncation or unbounded group expansion.
+    const all = [...actors, ...candidates], pages = Math.max(1, Math.ceil(all.length / pageSize));
+    state.page = state.group !== options.group && options.group ? 0 : Math.min(pages - 1, Math.max(0, typeof options.page === 'number' && Number.isSafeInteger(options.page) ? options.page : 0));
+    const visible = all.slice(state.page * pageSize, (state.page + 1) * pageSize), visibleIds = new Set(visible.filter(i => i.kind !== 'group').map(i => i.id));
+    return { objects: visible, relations: relations.filter(r => visibleIds.has(r.from) && visibleIds.has(r.to)), groups: groups.map(({ members, ...g }) => g), state, total: all.length, pages, label: selected?.title ?? 'All groups' };
 }

package/src/spatial.d.mts

@@ -1,8 +1,19 @@
-export function spatialView(viewport: any, board: any, camera: any, relations: any, signal: any, pose: any, conversation?: any, presentation?: {}): {
-    change: any;
-    apply: any;
-    snapshot: any;
-    pause: any;
-    activity: any;
+import type { Camera } from '@zixcel/projection-client';
+import type { WorldObject, WorldRelation } from './world-types.mjs';
+import type { WorldSnapshot, WorldSurface, WorldOptions } from './world-api.mjs';
+export interface SpatialPresentation {
+    items?: Map<string, Partial<WorldObject>>;
+    surface?: WorldSurface;
+    activity?: unknown;
+    target?: string | null;
+    pattern?: string;
+    context?: string | null;
+}
+export declare function spatialView(viewport: HTMLElement, board: HTMLElement, camera: Camera, relations: readonly WorldRelation[], signal: AbortSignal, pose: WorldSnapshot | null, conversation?: WorldOptions['conversation'], presentation?: SpatialPresentation): {
+    change: (action: string) => void;
+    apply: (value: Camera) => void;
+    snapshot: () => WorldSnapshot;
+    pause: (value: boolean) => void;
+    activity: (value: unknown) => void;
     close: () => void;
 };

package/src/spatial.mjs

@@ -1,27 +1,41 @@
-import {createWorld} from './world-runtime.mjs'
+import { createWorld } from './world-runtime.mjs';
 // Installed RenderPlan/role controls remain the only operation authority.
-export function spatialView(viewport,board,camera,relations,signal,pose,conversation=null,presentation={}){
- const nodes=()=>[...board.querySelectorAll('[data-item-id],[data-world-object]')]
- const declarations=()=>nodes().filter(node=>!node.hidden).map(node=>({
-  id:node.dataset.itemId??node.dataset.worldObject,
-  ...presentation.items?.get(node.dataset.itemId),
-  kind:node.hasAttribute('data-world-object')?'character':'record',
-  title:node.querySelector('strong,[data-kind=select]')?.textContent??'Information',
-  summary:node.querySelector('[data-item-summary]')?.textContent?.slice(0,80)??'',
-  observationLabel:node.dataset.observationLabel??'',
-  disabled:node.disabled===true,selected:node.dataset.selected==='true'
- }))
- const options={objects:declarations(),relations,pose,conversation,activity:presentation.activity,target:presentation.target,pattern:presentation.pattern,context:presentation.context,onActivate:id=>{
-  const node=nodes().find(node=>(node.dataset.itemId??node.dataset.worldObject)===id)
-  if(!node||node.hidden||node.disabled)return
-  ;(node.hasAttribute('data-world-object')?node:node.querySelector('[data-kind=inspect]'))?.click()
- }}
- const lease=presentation.surface?.attach(viewport,options),world=lease?.world??createWorld(viewport,options)
- board.hidden=true;world.apply(camera)
- const observer=new viewport.ownerDocument.defaultView.MutationObserver(()=>world.update(declarations(),relations))
- observer.observe(board,{subtree:true,childList:true,characterData:true,attributes:true,attributeFilter:['hidden','data-selected','disabled']})
- let closed=false
- const close=()=>{if(closed)return;closed=true;observer.disconnect();if(lease)lease.release();else world.close();board.hidden=false}
- signal.addEventListener('abort',close,{once:true})
- return {change:world.change,apply:world.apply,snapshot:world.snapshot,pause:world.pause,activity:world.activity,close}
+export function spatialView(viewport, board, camera, relations, signal, pose, conversation = null, presentation = {}) {
+    if (signal.aborted)
+        throw Error('WorldViewCancelled');
+    const declaredRelations = [...relations];
+    const nodes = () => [...board.querySelectorAll('[data-item-id],[data-world-object]')];
+    const declarations = () => nodes().filter(node => !node.hidden).map(node => ({
+        id: node.dataset.itemId ?? node.dataset.worldObject ?? '',
+        ...presentation.items?.get(node.dataset.itemId ?? ''),
+        kind: node.hasAttribute('data-world-object') ? 'character' : 'record',
+        title: node.querySelector('strong,[data-kind=select]')?.textContent ?? 'Information',
+        summary: node.querySelector('[data-item-summary]')?.textContent?.slice(0, 80) ?? '',
+        observationLabel: node.dataset.observationLabel ?? '',
+        disabled: node instanceof viewport.ownerDocument.defaultView.HTMLButtonElement && node.disabled === true, selected: node.dataset.selected === 'true'
+    }));
+    const options = { objects: declarations(), relations: declaredRelations, pose, conversation, activity: presentation.activity, target: presentation.target, pattern: presentation.pattern, context: presentation.context, onActivate: (id) => {
+            const node = nodes().find(node => (node.dataset.itemId ?? node.dataset.worldObject) === id);
+            if (!node || node.hidden || node instanceof viewport.ownerDocument.defaultView.HTMLButtonElement && node.disabled)
+                return;
+            (node.hasAttribute('data-world-object') ? node : node.querySelector('[data-kind=inspect]'))?.click();
+        } };
+    const lease = presentation.surface?.attach(viewport, options), world = lease?.world ?? createWorld(viewport, options);
+    board.hidden = true;
+    world.apply(camera);
+    const observer = new viewport.ownerDocument.defaultView.MutationObserver(() => world.update(declarations(), declaredRelations));
+    observer.observe(board, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ['hidden', 'data-selected', 'disabled'] });
+    let closed = false;
+    const close = () => { if (closed)
+        return; closed = true; observer.disconnect(); try {
+        if (lease)
+            lease.release();
+        else
+            world.close();
+    }
+    finally {
+        board.hidden = false;
+    } };
+    signal.addEventListener('abort', close, { once: true });
+    return { change: world.change, apply: world.apply, snapshot: world.snapshot, pause: world.pause, activity: world.activity, close };
 }

package/src/structure-graph.d.mts

@@ -1,16 +1,8 @@
-export function graphDocuments(documents: any, { component, query, depth, maximum }?: {
-    component?: string;
-    query?: string;
-    depth?: number;
-    maximum?: number;
+import type { GraphView } from './graph-documents.mjs';
+export { graphDocuments } from './graph-documents.mjs';
+export declare function structureGraph(document: Document, host: HTMLElement, view: GraphView, onRole: (id: string) => void, onRefresh: () => unknown, { embedded }?: {
+    embedded?: boolean | undefined;
 }): {
-    nodes: any[];
-    edges: any[];
-    truncated: boolean;
-};
-export function structureGraph(document: any, host: any, view: any, onRole: any, onRefresh: any, { embedded }?: {
-    embedded?: boolean;
-}): {
-    update(next: any): void;
+    update(next: GraphView): void;
     close(): void;
 };

package/src/structure-graph.mjs

@@ -1,97 +1,168 @@
-// Hatter 2026: bounded document-containment graph. No meaning inference or writes.
-import {element} from './index.mjs'
-import {inspectionOverview} from './inspection-overview.mjs'
-export function graphDocuments(documents,{component='',query='',depth=3,maximum=256}={}){
- if(!Array.isArray(documents)||documents.length>32||!Number.isInteger(depth)||depth<1||depth>6)throw Error('GraphInputInvalid')
- const nodes=[],edges=[];let truncated=false
- const add=(value,label,path,level,parent,document)=>{
-  if(nodes.length>=maximum){truncated=true;return}
-  const id=document.id+':'+path,node={id,label,path,level,value,document}
-  nodes.push(node);if(parent)edges.push({from:parent,to:id,label})
-  if(value&&typeof value==='object'){
-   const entries=Object.entries(value)
-   if(level>=depth){if(entries.length)truncated=true;return}
-   for(const [key,child]of entries){if(nodes.length>=maximum){truncated=true;break}add(child,key,path+'/'+key.replaceAll('~','~0').replaceAll('/','~1'),level+1,id,document)}
-  }
- }
- for(const doc of documents)if(!component||doc.id===component)add(doc.value,doc.label,'',0,null,doc)
- if(query){const matches=new Set(nodes.filter(n=>(n.label+' '+n.path+' '+(n.value===null||typeof n.value!=='object'?String(n.value):'')).toLowerCase().includes(query.toLowerCase())).map(n=>n.id));return {nodes:nodes.filter(n=>matches.has(n.id)),edges:edges.filter(e=>matches.has(e.from)&&matches.has(e.to)),truncated}}
- return {nodes,edges,truncated}
-}
-export function structureGraph(document,host,view,onRole,onRefresh,{embedded=false}={}){
- const controller=new AbortController(),signal=controller.signal
- let drawing=new AbortController()
- let component='',query='',depth=1,zoom=1,pan={x:0,y:0},drag=null,selected=null,mode='overview'
- const wrap=element(document,'section',null,{'aria-label':'Semantic structure graph'})
- Object.assign(wrap.style,{position:'absolute',inset:'110px 12px 12px 110px',display:'grid',gridTemplateRows:'auto minmax(0,1fr) auto',background:'Canvas',border:'1px solid GrayText',borderRadius:'12px',overflow:'hidden'})
- const media=document.defaultView.matchMedia('(max-width:600px)'),resize=()=>{wrap.style.inset=embedded?'auto':media.matches?'105px 8px 84px':'110px 12px 12px 110px'};resize();media.addEventListener('change',resize,{signal})
- if(embedded)Object.assign(wrap.style,{position:'relative',height:'65dvh',minHeight:'300px',width:'100%'})
- const toolbar=element(document,'div'),footer=element(document,'div'),detail=element(document,'details'),summary=element(document,'summary','Select a node for exact source details'),body=element(document,'dl')
- Object.assign(toolbar.style,{display:'flex',gap:'6px',padding:'8px',flexWrap:'wrap'});Object.assign(footer.style,{padding:'8px',maxHeight:'35vh',overflow:'auto'})
- const control=(label,values,current,change)=>{const select=element(document,'select',null,{'aria-label':label});for(const [value,text]of values)select.append(element(document,'option',text,{value}));select.value=current;select.addEventListener('change',()=>change(select.value),{signal});toolbar.append(select);return select}
- const roleSelect=control('Role',view.roles.map(r=>[r.id,r.id]),view.selected??'',onRole)
- const tabs=element(document,'div',null,{role:'tablist','aria-label':'Inspection view'}),tabButtons=[]
- toolbar.append(tabs)
- const graphControls=element(document,'div',null,{class:'inspection-graph-controls'})
- Object.assign(graphControls.style,{display:'flex',gap:'6px',flexWrap:'wrap'})
- Object.assign(tabs.style,{display:'flex',gap:'6px'})
- const componentSelect=control('Component',[['','All components'],...view.documents.map(d=>[d.id,d.label])],'',value=>{component=value;selected=null;draw()})
- control('Structure depth',[1,2,3,4,5,6].map(n=>[String(n),'Depth '+n]),'1',value=>{depth=Number(value);draw()})
- const search=element(document,'input',null,{type:'search','aria-label':'Filter graph',placeholder:'Filter nodes'});search.style.width='140px';search.addEventListener('input',()=>{query=search.value;draw()},{signal});toolbar.append(search)
- const svg=document.createElementNS('http://www.w3.org/2000/svg','svg'),group=document.createElementNS(svg.namespaceURI,'g')
- svg.setAttribute('aria-label','Document containment graph');svg.setAttribute('role','group');Object.assign(svg.style,{width:'100%',height:'100%',minHeight:'0',touchAction:'none',background:'color-mix(in srgb,Canvas 96%,#5368df)'})
- svg.append(group);const status=element(document,'p',null,{role:'status'});status.style.margin='0'
- const button=(label,action)=>{const b=element(document,'button',label,{type:'button'});b.addEventListener('click',action,{signal});toolbar.append(b);return b}
- const apply=()=>group.setAttribute('transform',`translate(${pan.x} ${pan.y}) scale(${zoom})`)
- button('−',()=>{zoom=Math.max(.5,zoom/1.2);apply()});button('+',()=>{zoom=Math.min(8,zoom*1.2);apply()});button('Fit',()=>{zoom=1;pan={x:0,y:0};apply()})
- const refresh=button('Refresh',()=>void onRefresh())
- svg.addEventListener('wheel',e=>{if(e.ctrlKey||e.metaKey)return;e.preventDefault();zoom=Math.max(.5,Math.min(8,zoom*(e.deltaY<0?1.1:1/1.1)));apply()},{signal,passive:false})
- svg.addEventListener('pointerdown',e=>{if(e.button||e.target.closest('[data-graph-node]'))return;drag={id:e.pointerId,x:e.clientX,y:e.clientY,pan:{...pan}};svg.setPointerCapture(e.pointerId)},{signal})
- svg.addEventListener('pointermove',e=>{if(drag?.id!==e.pointerId)return;const matrix=svg.getScreenCTM();if(matrix){pan={x:Math.max(-5000,Math.min(5000,drag.pan.x+(e.clientX-drag.x)/matrix.a)),y:Math.max(-5000,Math.min(5000,drag.pan.y+(e.clientY-drag.y)/matrix.d))};apply()}},{signal})
- for(const type of ['pointerup','pointercancel','lostpointercapture'])svg.addEventListener(type,()=>drag=null,{signal})
- function inspect(node){selected=node.id;summary.textContent=node.document.label+' · '+(node.path||'/');detail.open=true;body.replaceChildren()
-  const source=node.document.source??{},fields=[['path',node.path||'/'],['source',source.method??node.document.id],['semantic revision',source.semanticRevision??''],['role',source.roleRef?.id??''],['role revision',source.roleRef?.revision??''],['role digest',source.roleRef?.digest_sha256??''],['memory revision',source.memoryRevision??''],...Object.entries((node.value&&typeof node.value==='object')?node.value:{value:node.value}).slice(0,64).map(([k,v])=>['field: '+k,v])]
-  for(const [key,value]of fields)body.append(element(document,'dt',key),element(document,'dd',value!==null&&typeof value==='object'?(Array.isArray(value)?'Array':'Object')+' ('+Object.keys(value).length+')':String(value)))
-  highlight()
- }
- function highlight(){for(const n of group.querySelectorAll('[data-graph-node]'))n.querySelector('rect').setAttribute('stroke',n.dataset.graphNode===selected?'#d97706':'#5368df');for(const line of group.querySelectorAll('line'))line.setAttribute('stroke',line.dataset.from===selected||line.dataset.to===selected?'#d97706':'#a5adc6')}
- function draw(){
-  drawing.abort();drawing=new AbortController()
-  selected=null;detail.open=false;body.replaceChildren();summary.textContent='Select a node for exact source details'
-  const graph=graphDocuments(view.documents,{component,query,depth}),levels=new Map(),positions=new Map()
-  for(const node of graph.nodes){const list=levels.get(node.level)??[];list.push(node);levels.set(node.level,list)}
-  const height=Math.max(240,...[...levels.values()].map(ns=>ns.length*64+30)),width=(Math.max(0,...levels.keys())+1)*220+20
-  svg.setAttribute('viewBox',`0 0 ${width} ${height}`);group.replaceChildren()
-  const make=(tag,attrs)=>{const n=document.createElementNS(svg.namespaceURI,tag);for(const [k,v]of Object.entries(attrs))n.setAttribute(k,String(v));return n}
-  for(const [level,nodes]of levels)nodes.forEach((n,i)=>positions.set(n.id,{x:level*220+10,y:(i+.5)*height/nodes.length}))
-  for(const edge of graph.edges){const a=positions.get(edge.from),b=positions.get(edge.to);group.append(make('line',{x1:a.x+170,y1:a.y,x2:b.x,y2:b.y,'data-from':edge.from,'data-to':edge.to,stroke:'#a5adc6','stroke-width':2}))}
-  for(const node of graph.nodes){const p=positions.get(node.id),g=make('g',{transform:`translate(${p.x} ${p.y-20})`,'data-graph-node':node.id,role:'button',tabindex:0,'aria-label':node.document.label+' '+(node.path||'/')})
-   g.append(make('rect',{width:170,height:40,rx:8,fill:'Canvas',stroke:'#5368df','stroke-width':2}));const title=make('title',{});title.textContent=node.document.label+' '+(node.path||'/');const text=make('text',{x:8,y:25,fill:'CanvasText','font-size':13});text.textContent=node.label.length>21?node.label.slice(0,20)+'…':node.label;g.append(title,text);g.addEventListener('click',()=>inspect(node),{signal:drawing.signal});g.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();inspect(node)}},{signal:drawing.signal});group.append(g)
-  }
-  status.textContent=graph.nodes.length+' nodes · '+graph.edges.length+' containment links'+(graph.truncated?' · Depth or node limit: increase depth or select a component.':'')+(view.documents.some(d=>d.source?.truncated)?' · Source incomplete.':'')
-  if(!view.documents.length)status.textContent='No adopted semantic structure available. Inspect owner readiness in Notifications.'
-  apply();highlight()
- }
- // One inspector, two views. Switching changes presentation only, not reads,
- // selected role, semantic state or the world/camera behind the inspector.
- for(const child of [...toolbar.children])if(child!==roleSelect&&child!==tabs&&child!==refresh)graphControls.append(child)
- toolbar.append(graphControls)
- const stage=element(document,'div',null,{class:'inspection-stage'}),overview=element(document,'div',null,{class:'inspection-overview',role:'tabpanel','aria-label':'Responsibility overview'}),graphPanel=element(document,'div',null,{class:'inspection-graph-panel',role:'tabpanel','aria-label':'Structure view'})
- Object.assign(stage.style,{minHeight:'0',overflow:'hidden'});Object.assign(overview.style,{height:'100%',overflow:'auto',padding:'1rem',overflowWrap:'anywhere'});graphPanel.style.height='100%'
- graphPanel.append(svg);stage.append(overview,graphPanel)
- function display(){
-  overview.hidden=mode!=='overview';graphPanel.hidden=mode!=='structure';graphControls.hidden=mode!=='structure';footer.hidden=mode!=='structure'
-  for(const b of tabButtons){const active=b.dataset.view===mode;b.setAttribute('aria-selected',String(active));b.tabIndex=active?0:-1;b.style.borderColor=active?'Highlight':'GrayText';b.style.fontWeight=active?'bold':'normal'}
- }
- for(const [value,label]of [['overview','Overview'],['structure','Structure']]){
-  const tab=element(document,'button',label,{type:'button',role:'tab','data-view':value})
-  tab.style.minHeight='44px'
-  tab.addEventListener('click',()=>{mode=value;display()},{signal})
-  tab.addEventListener('keydown',event=>{if(['ArrowLeft','ArrowRight','Home','End'].includes(event.key)){event.preventDefault();mode=event.key==='Home'?'overview':event.key==='End'?'structure':mode==='overview'?'structure':'overview';display();tabButtons.find(b=>b.dataset.view===mode).focus()}},{signal})
-  tabs.append(tab);tabButtons.push(tab)
- }
- let overviewEvents=new AbortController()
- function summaryView(){overviewEvents.abort();overviewEvents=new AbortController();inspectionOverview(document,overview,view.overview,id=>{component=id;componentSelect.value=id;mode='structure';draw();display()},overviewEvents.signal)}
- detail.append(summary,body);footer.append(status,detail);wrap.append(toolbar,stage,footer);host.replaceChildren(wrap);draw();summaryView();display()
- return {update(next){view=next;roleSelect.replaceChildren(...view.roles.map(r=>element(document,'option',r.id,{value:r.id})));roleSelect.value=view.selected??'';componentSelect.replaceChildren(element(document,'option','All components',{value:''}),...view.documents.map(d=>element(document,'option',d.label,{value:d.id})));if(!view.documents.some(d=>d.id===component))component='';componentSelect.value=component;draw();summaryView();display()},close(){overviewEvents.abort();drawing.abort();controller.abort();wrap.remove()}}
+import { element } from './dom-elements.mjs';
+import { inspectionOverview } from './inspection-overview.mjs';
+import { graphDocuments } from './graph-documents.mjs';
+export { graphDocuments } from './graph-documents.mjs';
+export function structureGraph(document, host, view, onRole, onRefresh, { embedded = false } = {}) {
+    const window = document.defaultView;
+    if (!window)
+        throw Error('GraphDocumentUnavailable');
+    const controller = new AbortController(), signal = controller.signal;
+    let drawing = new AbortController();
+    let component = '', query = '', depth = 1, zoom = 1, pan = { x: 0, y: 0 }, mode = 'overview';
+    let drag = null, selected = null;
+    const wrap = element(document, 'section', null, { 'aria-label': 'Semantic structure graph' });
+    Object.assign(wrap.style, { position: 'absolute', inset: '110px 12px 12px 110px', display: 'grid', gridTemplateRows: 'auto minmax(0,1fr) auto', background: 'Canvas', border: '1px solid GrayText', borderRadius: '12px', overflow: 'hidden' });
+    const media = window.matchMedia('(max-width:600px)'), resize = () => { wrap.style.inset = embedded ? 'auto' : media.matches ? '105px 8px 84px' : '110px 12px 12px 110px'; };
+    resize();
+    media.addEventListener('change', resize, { signal });
+    if (embedded)
+        Object.assign(wrap.style, { position: 'relative', height: '65dvh', minHeight: '300px', width: '100%' });
+    const toolbar = element(document, 'div'), footer = element(document, 'div'), detail = element(document, 'details'), summary = element(document, 'summary', 'Select a node for exact source details'), body = element(document, 'dl');
+    Object.assign(toolbar.style, { display: 'flex', gap: '6px', padding: '8px', flexWrap: 'wrap' });
+    Object.assign(footer.style, { padding: '8px', maxHeight: '35vh', overflow: 'auto' });
+    const control = (label, values, current, change) => { const select = element(document, 'select', null, { 'aria-label': label }); for (const [value, text] of values)
+        select.append(element(document, 'option', text, { value })); select.value = current; select.addEventListener('change', () => change(select.value), { signal }); toolbar.append(select); return select; };
+    const roleSelect = control('Role', view.roles.map(r => [r.id, r.id]), view.selected ?? '', onRole);
+    const tabs = element(document, 'div', null, { role: 'tablist', 'aria-label': 'Inspection view' }), tabButtons = [];
+    toolbar.append(tabs);
+    const graphControls = element(document, 'div', null, { class: 'inspection-graph-controls' });
+    Object.assign(graphControls.style, { display: 'flex', gap: '6px', flexWrap: 'wrap' });
+    Object.assign(tabs.style, { display: 'flex', gap: '6px' });
+    const componentSelect = control('Component', [['', 'All components'], ...view.documents.map(d => [d.id, d.label])], '', value => { component = value; selected = null; draw(); });
+    control('Structure depth', [1, 2, 3, 4, 5, 6].map(n => [String(n), 'Depth ' + n]), '1', value => { depth = Number(value); draw(); });
+    const search = element(document, 'input', null, { type: 'search', 'aria-label': 'Filter graph', placeholder: 'Filter nodes' });
+    search.style.width = '140px';
+    search.addEventListener('input', () => { query = search.value; draw(); }, { signal });
+    toolbar.append(search);
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    svg.setAttribute('aria-label', 'Document containment graph');
+    svg.setAttribute('role', 'group');
+    Object.assign(svg.style, { width: '100%', height: '100%', minHeight: '0', touchAction: 'none', background: 'color-mix(in srgb,Canvas 96%,#5368df)' });
+    svg.append(group);
+    const status = element(document, 'p', null, { role: 'status' });
+    status.style.margin = '0';
+    const button = (label, action) => { const b = element(document, 'button', label, { type: 'button' }); b.addEventListener('click', action, { signal }); toolbar.append(b); return b; };
+    const apply = () => group.setAttribute('transform', `translate(${pan.x} ${pan.y}) scale(${zoom})`);
+    button('−', () => { zoom = Math.max(.5, zoom / 1.2); apply(); });
+    button('+', () => { zoom = Math.min(8, zoom * 1.2); apply(); });
+    button('Fit', () => { zoom = 1; pan = { x: 0, y: 0 }; apply(); });
+    const refresh = button('Refresh', () => void onRefresh());
+    svg.addEventListener('wheel', e => { if (e.ctrlKey || e.metaKey)
+        return; e.preventDefault(); zoom = Math.max(.5, Math.min(8, zoom * (e.deltaY < 0 ? 1.1 : 1 / 1.1))); apply(); }, { signal, passive: false });
+    svg.addEventListener('pointerdown', e => { if (e.button || (e.target instanceof window.Element && e.target.closest('[data-graph-node]')))
+        return; drag = { id: e.pointerId, x: e.clientX, y: e.clientY, pan: { ...pan } }; svg.setPointerCapture(e.pointerId); }, { signal });
+    svg.addEventListener('pointermove', e => { if (!drag || drag.id !== e.pointerId)
+        return; const matrix = svg.getScreenCTM(); if (matrix) {
+        pan = { x: Math.max(-5000, Math.min(5000, drag.pan.x + (e.clientX - drag.x) / matrix.a)), y: Math.max(-5000, Math.min(5000, drag.pan.y + (e.clientY - drag.y) / matrix.d)) };
+        apply();
+    } }, { signal });
+    for (const type of ['pointerup', 'pointercancel', 'lostpointercapture'])
+        svg.addEventListener(type, () => drag = null, { signal });
+    function inspect(node) {
+        selected = node.id;
+        summary.textContent = node.document.label + ' · ' + (node.path || '/');
+        detail.open = true;
+        body.replaceChildren();
+        const source = node.document.source ?? {}, fields = [['path', node.path || '/'], ['source', source.method ?? node.document.id], ['semantic revision', source.semanticRevision ?? ''], ['role', source.roleRef?.id ?? ''], ['role revision', source.roleRef?.revision ?? ''], ['role digest', source.roleRef?.digest_sha256 ?? ''], ['memory revision', source.memoryRevision ?? ''], ...Object.entries((node.value && typeof node.value === 'object') ? node.value : { value: node.value }).slice(0, 64).map(([k, v]) => ['field: ' + k, v])];
+        for (const [key, value] of fields)
+            body.append(element(document, 'dt', key), element(document, 'dd', value !== null && typeof value === 'object' ? (Array.isArray(value) ? 'Array' : 'Object') + ' (' + Object.keys(value).length + ')' : String(value)));
+        highlight();
+    }
+    function highlight() { for (const n of group.querySelectorAll('[data-graph-node]'))
+        n.querySelector('rect')?.setAttribute('stroke', n.dataset.graphNode === selected ? '#d97706' : '#5368df'); for (const line of group.querySelectorAll('line'))
+        line.setAttribute('stroke', line.dataset.from === selected || line.dataset.to === selected ? '#d97706' : '#a5adc6'); }
+    function draw() {
+        drawing.abort();
+        drawing = new AbortController();
+        selected = null;
+        detail.open = false;
+        body.replaceChildren();
+        summary.textContent = 'Select a node for exact source details';
+        const graph = graphDocuments(view.documents, { component, query, depth }), levels = new Map(), positions = new Map();
+        for (const node of graph.nodes) {
+            const list = levels.get(node.level) ?? [];
+            list.push(node);
+            levels.set(node.level, list);
+        }
+        const height = Math.max(240, ...[...levels.values()].map(ns => ns.length * 64 + 30)), width = (Math.max(0, ...levels.keys()) + 1) * 220 + 20;
+        svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        group.replaceChildren();
+        const make = (tag, attrs) => { const n = document.createElementNS('http://www.w3.org/2000/svg', tag); for (const [k, v] of Object.entries(attrs))
+            n.setAttribute(k, String(v)); return n; };
+        for (const [level, nodes] of levels)
+            nodes.forEach((n, i) => positions.set(n.id, { x: level * 220 + 10, y: (i + .5) * height / nodes.length }));
+        for (const edge of graph.edges) {
+            const a = positions.get(edge.from), b = positions.get(edge.to);
+            group.append(make('line', { x1: a.x + 170, y1: a.y, x2: b.x, y2: b.y, 'data-from': edge.from, 'data-to': edge.to, stroke: '#a5adc6', 'stroke-width': 2 }));
+        }
+        for (const node of graph.nodes) {
+            const p = positions.get(node.id), g = make('g', { transform: `translate(${p.x} ${p.y - 20})`, 'data-graph-node': node.id, role: 'button', tabindex: 0, 'aria-label': node.document.label + ' ' + (node.path || '/') });
+            g.append(make('rect', { width: 170, height: 40, rx: 8, fill: 'Canvas', stroke: '#5368df', 'stroke-width': 2 }));
+            const title = make('title', {});
+            title.textContent = node.document.label + ' ' + (node.path || '/');
+            const text = make('text', { x: 8, y: 25, fill: 'CanvasText', 'font-size': 13 });
+            text.textContent = node.label.length > 21 ? node.label.slice(0, 20) + '…' : node.label;
+            g.append(title, text);
+            g.addEventListener('click', () => inspect(node), { signal: drawing.signal });
+            g.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                inspect(node);
+            } }, { signal: drawing.signal });
+            group.append(g);
+        }
+        status.textContent = graph.nodes.length + ' nodes · ' + graph.edges.length + ' containment links' + (graph.truncated ? ' · Depth or node limit: increase depth or select a component.' : '') + (view.documents.some(d => d.source?.truncated) ? ' · Source incomplete.' : '');
+        if (!view.documents.length)
+            status.textContent = 'No adopted semantic structure available. Inspect owner readiness in Notifications.';
+        apply();
+        highlight();
+    }
+    // One inspector, two views. Switching changes presentation only, not reads,
+    // selected role, semantic state or the world/camera behind the inspector.
+    for (const child of [...toolbar.children])
+        if (child !== roleSelect && child !== tabs && child !== refresh)
+            graphControls.append(child);
+    toolbar.append(graphControls);
+    const stage = element(document, 'div', null, { class: 'inspection-stage' }), overview = element(document, 'div', null, { class: 'inspection-overview', role: 'tabpanel', 'aria-label': 'Responsibility overview' }), graphPanel = element(document, 'div', null, { class: 'inspection-graph-panel', role: 'tabpanel', 'aria-label': 'Structure view' });
+    Object.assign(stage.style, { minHeight: '0', overflow: 'hidden' });
+    Object.assign(overview.style, { height: '100%', overflow: 'auto', padding: '1rem', overflowWrap: 'anywhere' });
+    graphPanel.style.height = '100%';
+    graphPanel.append(svg);
+    stage.append(overview, graphPanel);
+    function display() {
+        overview.hidden = mode !== 'overview';
+        graphPanel.hidden = mode !== 'structure';
+        graphControls.hidden = mode !== 'structure';
+        footer.hidden = mode !== 'structure';
+        for (const b of tabButtons) {
+            const active = b.dataset.view === mode;
+            b.setAttribute('aria-selected', String(active));
+            b.tabIndex = active ? 0 : -1;
+            b.style.borderColor = active ? 'Highlight' : 'GrayText';
+            b.style.fontWeight = active ? 'bold' : 'normal';
+        }
+    }
+    for (const [value, label] of [['overview', 'Overview'], ['structure', 'Structure']]) {
+        const tab = element(document, 'button', label, { type: 'button', role: 'tab', 'data-view': value });
+        tab.style.minHeight = '44px';
+        tab.addEventListener('click', () => { mode = value; display(); }, { signal });
+        tab.addEventListener('keydown', event => { if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+            event.preventDefault();
+            mode = event.key === 'Home' ? 'overview' : event.key === 'End' ? 'structure' : mode === 'overview' ? 'structure' : 'overview';
+            display();
+            tabButtons.find(b => b.dataset.view === mode)?.focus();
+        } }, { signal });
+        tabs.append(tab);
+        tabButtons.push(tab);
+    }
+    let overviewEvents = new AbortController();
+    function summaryView() { overviewEvents.abort(); overviewEvents = new AbortController(); inspectionOverview(document, overview, view.overview, id => { component = id; componentSelect.value = id; mode = 'structure'; draw(); display(); }, overviewEvents.signal); }
+    detail.append(summary, body);
+    footer.append(status, detail);
+    wrap.append(toolbar, stage, footer);
+    host.replaceChildren(wrap);
+    draw();
+    summaryView();
+    display();
+    return { update(next) { view = next; roleSelect.replaceChildren(...view.roles.map(r => element(document, 'option', r.id, { value: r.id }))); roleSelect.value = view.selected ?? ''; componentSelect.replaceChildren(element(document, 'option', 'All components', { value: '' }), ...view.documents.map(d => element(document, 'option', d.label, { value: d.id }))); if (!view.documents.some(d => d.id === component))
+            component = ''; componentSelect.value = component; draw(); summaryView(); display(); }, close() { overviewEvents.abort(); drawing.abort(); controller.abort(); wrap.remove(); } };
 }

package/src/symbol.d.mts

@@ -1,2 +1,2 @@
 /** @param {Document} document @param {string} [name] */
-export function symbol(document: Document, name?: string): SVGSVGElement;
+export declare function symbol(document: Document, name?: string): SVGSVGElement;

package/src/symbol.mjs

@@ -1,19 +1,24 @@
 // Installed vector primitives; labels/routes come from the site, never SVG/HTML input.
 /** @param {Document} document @param {string} [name] */
-export function symbol(document,name='layers'){
- const paths={home:['m3 11 9-8 9 8','M5 9v12h14V9','M9 21v-8h6v8'],plus:['M12 4v16M4 12h16'],settings:['M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z','M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10 2 2M5 19l2-2M17 7l2-2'],clock:['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z','M12 6v6l4 2'],layers:['M12 3 2 8l10 5 10-5-10-5Z','m2 12 10 5 10-5','m2 17 10 5 10-5'],
-  menu:['M4 6h16M4 12h16M4 18h16'],
-  person:['M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z','M4 22v-3a8 8 0 0 1 16 0v3'],
-  nodes:['M9 5H5v4h4V5Z','M19 15h-4v4h4v-4Z','M9 15H5v4h4v-4Z','M7 9v6m2-8h8v8M9 17h6'],
-  package:['m3 7 9-5 9 5v10l-9 5-9-5V7Z','m3 7 9 5 9-5M12 12v10M7 4l10 6'],
-  book:['M4 3h14a2 2 0 0 1 2 2v15H6a2 2 0 0 1-2-2V3Z','M4 18a2 2 0 0 1 2-2h14','M8 7h8m-8 4h6'],
-  chip:['M6 6h12v12H6V6Z','M9 9h6v6H9V9Z','M9 2v4m6-4v4M9 18v4m6-4v4M2 9h4m-4 6h4m12-6h4m-4 6h4'],
-  info:['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z','M12 11v6m0-10v1'],
-  search:['M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z','m15 15 6 6'],
-  play:['m8 4 12 8-12 8V4Z'],
-  activity:['M2 12h4l3-8 6 16 3-8h4'],check:['m5 12 4 4L19 6'],warning:['m12 3 10 18H2L12 3Z','M12 9v5m0 3v1']}
- const svg=document.createElementNS('http://www.w3.org/2000/svg','svg')
- for(const [key,value]of Object.entries({viewBox:'0 0 24 24',fill:'none',stroke:'currentColor','stroke-width':'1.6','stroke-linecap':'round','stroke-linejoin':'round','aria-hidden':'true',focusable:'false',class:'ui-symbol'}))svg.setAttribute(key,value)
- for(const d of paths[name]??paths.layers){const p=document.createElementNS(svg.namespaceURI,'path');p.setAttribute('d',d);svg.append(p)}
- return svg
+export function symbol(document, name = 'layers') {
+    const paths = { home: ['m3 11 9-8 9 8', 'M5 9v12h14V9', 'M9 21v-8h6v8'], plus: ['M12 4v16M4 12h16'], settings: ['M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z', 'M12 2v3m0 14v3M2 12h3m14 0h3M5 5l2 2m10 10 2 2M5 19l2-2M17 7l2-2'], clock: ['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z', 'M12 6v6l4 2'], layers: ['M12 3 2 8l10 5 10-5-10-5Z', 'm2 12 10 5 10-5', 'm2 17 10 5 10-5'],
+        menu: ['M4 6h16M4 12h16M4 18h16'],
+        person: ['M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z', 'M4 22v-3a8 8 0 0 1 16 0v3'],
+        nodes: ['M9 5H5v4h4V5Z', 'M19 15h-4v4h4v-4Z', 'M9 15H5v4h4v-4Z', 'M7 9v6m2-8h8v8M9 17h6'],
+        package: ['m3 7 9-5 9 5v10l-9 5-9-5V7Z', 'm3 7 9 5 9-5M12 12v10M7 4l10 6'],
+        book: ['M4 3h14a2 2 0 0 1 2 2v15H6a2 2 0 0 1-2-2V3Z', 'M4 18a2 2 0 0 1 2-2h14', 'M8 7h8m-8 4h6'],
+        chip: ['M6 6h12v12H6V6Z', 'M9 9h6v6H9V9Z', 'M9 2v4m6-4v4M9 18v4m6-4v4M2 9h4m-4 6h4m12-6h4m-4 6h4'],
+        info: ['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0Z', 'M12 11v6m0-10v1'],
+        search: ['M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z', 'm15 15 6 6'],
+        play: ['m8 4 12 8-12 8V4Z'],
+        activity: ['M2 12h4l3-8 6 16 3-8h4'], check: ['m5 12 4 4L19 6'], warning: ['m12 3 10 18H2L12 3Z', 'M12 9v5m0 3v1'] };
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    for (const [key, value] of Object.entries({ viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.6', 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'aria-hidden': 'true', focusable: 'false', class: 'ui-symbol' }))
+        svg.setAttribute(key, value);
+    for (const d of paths[name] ?? paths.layers) {
+        const p = document.createElementNS(svg.namespaceURI, 'path');
+        p.setAttribute('d', d);
+        svg.append(p);
+    }
+    return svg;
 }