backpack-viewer 0.2.11 → 0.2.13

package/README.md

@@ -1,12 +1,12 @@
 # Backpack Viewer
 
-**See your knowledge graph.** A web-based visualizer for [Backpack](https://www.npmjs.com/package/backpack-ontology) ontologies with force-directed layout, interactive navigation, and live reload.
+**See your learning graph.** A web-based visualizer for [Backpack](https://www.npmjs.com/package/backpack-ontology) learning graphs with force-directed layout, interactive navigation, and live reload.
 
 ## Quick start
 
 Tell Claude:
 
-> "Show me my knowledge graph"
+> "Show me my learning graph"
 
 Or run it directly:
 
@@ -14,19 +14,19 @@ Or run it directly:
 npx backpack-viewer
 ```
 
-Opens http://localhost:5173. Click any ontology in the sidebar to visualize it.
+Opens http://localhost:5173. Click any learning graph in the sidebar to visualize it.
 
 ## Features
 
 - **Live reload**: add knowledge via Claude and watch it appear in real time
 - **Pan and zoom**: click-drag to pan, scroll to zoom
 - **Inspect**: click any item to see its properties, connections, and metadata
-- **Edit**: rename ontologies, edit node types and properties, add or remove items inline
-- **Search**: filter ontologies by name in the sidebar
+- **Edit**: rename graphs, edit node types and properties, add or remove items inline
+- **Search**: filter by name in the sidebar, filter by type with chips
 
 ## How it works
 
-The viewer reads ontology data from the same local files that the MCP server writes to. Changes appear automatically, no refresh needed.
+The viewer reads learning graph data from the same local files that the MCP server writes to. Changes appear automatically, no refresh needed.
 
 ```
 backpack-ontology (MCP) ──writes──> ~/.local/share/backpack/ontologies/

package/dist/api.d.ts

@@ -1,5 +1,5 @@
-import type { OntologyData, OntologySummary } from "backpack-ontology";
-export declare function listOntologies(): Promise<OntologySummary[]>;
-export declare function loadOntology(name: string): Promise<OntologyData>;
-export declare function saveOntology(name: string, data: OntologyData): Promise<void>;
+import type { LearningGraphData, LearningGraphSummary } from "backpack-ontology";
+export declare function listOntologies(): Promise<LearningGraphSummary[]>;
+export declare function loadOntology(name: string): Promise<LearningGraphData>;
+export declare function saveOntology(name: string, data: LearningGraphData): Promise<void>;
 export declare function renameOntology(oldName: string, newName: string): Promise<void>;

package/dist/app/assets/index-C1crWHUS.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #141414;--bg-surface: #1a1a1a;--bg-hover: #222222;--bg-active: #2a2a2a;--bg-elevated: #1e1e1e;--bg-inset: #111111;--border: #2a2a2a;--text: #d4d4d4;--text-strong: #e5e5e5;--text-muted: #737373;--text-dim: #525252;--accent: #d4a27f;--accent-hover: #e8b898;--badge-text: #141414;--glass-bg: rgba(20, 20, 20, .85);--glass-border: rgba(255, 255, 255, .08);--chip-bg: rgba(42, 42, 42, .7);--chip-bg-active: rgba(42, 42, 42, .9);--chip-bg-hover: rgba(50, 50, 50, .9);--chip-border-active: rgba(255, 255, 255, .06);--shadow: rgba(0, 0, 0, .6);--shadow-strong: rgba(0, 0, 0, .5);--canvas-edge: rgba(255, 255, 255, .08);--canvas-edge-highlight: rgba(212, 162, 127, .5);--canvas-edge-dim: rgba(255, 255, 255, .03);--canvas-edge-label: rgba(255, 255, 255, .2);--canvas-edge-label-highlight: rgba(212, 162, 127, .7);--canvas-edge-label-dim: rgba(255, 255, 255, .05);--canvas-arrow: rgba(255, 255, 255, .12);--canvas-arrow-highlight: rgba(212, 162, 127, .5);--canvas-node-label: #a3a3a3;--canvas-node-label-dim: rgba(212, 212, 212, .2);--canvas-type-badge: rgba(115, 115, 115, .5);--canvas-type-badge-dim: rgba(115, 115, 115, .15);--canvas-selection-border: #d4d4d4;--canvas-node-border: rgba(255, 255, 255, .15)}[data-theme=light]{--bg: #f5f5f4;--bg-surface: #fafaf9;--bg-hover: #f0efee;--bg-active: #e7e5e4;--bg-elevated: #f0efee;--bg-inset: #e7e5e4;--border: #d6d3d1;--text: #292524;--text-strong: #1c1917;--text-muted: #78716c;--text-dim: #a8a29e;--accent: #c17856;--accent-hover: #b07a5e;--badge-text: #fafaf9;--glass-bg: rgba(250, 250, 249, .85);--glass-border: rgba(0, 0, 0, .08);--chip-bg: rgba(214, 211, 209, .5);--chip-bg-active: rgba(214, 211, 209, .8);--chip-bg-hover: rgba(200, 197, 195, .8);--chip-border-active: rgba(0, 0, 0, .08);--shadow: rgba(0, 0, 0, .1);--shadow-strong: rgba(0, 0, 0, .15);--canvas-edge: rgba(0, 0, 0, .1);--canvas-edge-highlight: rgba(193, 120, 86, .6);--canvas-edge-dim: rgba(0, 0, 0, .03);--canvas-edge-label: rgba(0, 0, 0, .25);--canvas-edge-label-highlight: rgba(193, 120, 86, .8);--canvas-edge-label-dim: rgba(0, 0, 0, .06);--canvas-arrow: rgba(0, 0, 0, .15);--canvas-arrow-highlight: rgba(193, 120, 86, .6);--canvas-node-label: #57534e;--canvas-node-label-dim: rgba(87, 83, 78, .2);--canvas-type-badge: rgba(87, 83, 78, .5);--canvas-type-badge-dim: rgba(87, 83, 78, .15);--canvas-selection-border: #292524;--canvas-node-border: rgba(0, 0, 0, .1)}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;height:100vh;width:100vw}#sidebar{width:280px;min-width:280px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px;overflow-y:auto}#sidebar h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:14px}#sidebar input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px;outline:none;margin-bottom:12px}#sidebar input:focus{border-color:var(--accent)}#sidebar input::placeholder{color:var(--text-dim)}#ontology-list{list-style:none;display:flex;flex-direction:column;gap:2px}.ontology-item{padding:10px 12px;border-radius:6px;cursor:pointer;transition:background .15s}.ontology-item:hover{background:var(--bg-hover)}.ontology-item.active{background:var(--bg-active)}.ontology-item .name{display:block;font-size:13px;font-weight:500;color:var(--text)}.ontology-item .stats{display:block;font-size:11px;color:var(--text-dim);margin-top:2px}.sidebar-edit-btn{position:absolute;right:8px;top:10px;background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;opacity:0;transition:opacity .1s}.ontology-item{position:relative}.ontology-item:hover .sidebar-edit-btn{opacity:.7}.sidebar-edit-btn:hover{opacity:1!important;color:var(--text)}.sidebar-rename-input{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--text);font:inherit;font-size:13px;font-weight:500;outline:none;width:100%;padding:0}.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);text-align:center}.sidebar-footer a{display:block;font-size:12px;font-weight:500;color:var(--accent);text-decoration:none;margin-bottom:4px}.sidebar-footer a:hover{color:var(--accent-hover)}.sidebar-footer span{display:block;font-size:10px;color:var(--text-dim)}.theme-toggle{position:absolute;top:16px;right:16px;z-index:30;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;transition:color .15s,border-color .15s,background .15s;box-shadow:0 2px 8px var(--shadow)}.theme-toggle:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}.zoom-controls{position:absolute;top:16px;right:16px;z-index:30;display:flex;gap:4px;transition:right .2s ease}.theme-toggle~.zoom-controls{right:58px}.zoom-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;transition:color .15s,border-color .15s,background .15s;box-shadow:0 2px 8px var(--shadow)}.zoom-btn:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}#canvas-container{flex:1;position:relative;overflow:hidden;touch-action:none}#graph-canvas{position:absolute;top:0;left:0;touch-action:none;width:100%;height:100%;cursor:grab}#graph-canvas:active{cursor:grabbing}.search-overlay{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;max-height:calc(100vh - 48px);pointer-events:none}.search-overlay>*{pointer-events:auto}.search-overlay.hidden{display:none}.search-input-wrap{position:relative;display:flex;align-items:center;gap:6px;width:380px;max-width:calc(100vw - 340px)}.search-input{flex:1;min-width:0;padding:10px 36px 10px 16px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#d4a27f66;box-shadow:0 0 0 3px #d4a27f1a}.search-input::placeholder{color:var(--text-dim)}.search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:2px 7px;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface);color:var(--text-dim);font-size:11px;font-family:monospace;pointer-events:none}.search-kbd.hidden{display:none}.search-results{list-style:none;width:380px;max-width:calc(100vw - 340px);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 8px 32px var(--shadow-strong)}.search-results.hidden{display:none}.search-result-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .1s}.search-result-item:hover{background:var(--bg-hover)}.search-result-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.search-result-label{font-size:13px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-type{font-size:11px;color:var(--text-dim);flex-shrink:0}.chip-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-dim);cursor:pointer;transition:border-color .15s,color .15s;pointer-events:auto}.chip-toggle:hover{border-color:#d4a27f4d;color:var(--text)}.chip-toggle.active{border-color:#d4a27f66;color:var(--accent)}.type-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:500px;max-height:200px;overflow-y:auto;padding:4px;border-radius:10px}.type-chips.hidden{display:none}.type-chip{display:flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid transparent;border-radius:12px;background:var(--chip-bg);color:var(--text-dim);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}.type-chip.active{background:var(--chip-bg-active);color:var(--text-muted);border-color:var(--chip-border-active)}.type-chip:hover{background:var(--chip-bg-hover)}.type-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.type-chip:not(.active) .type-chip-dot{opacity:.3}.info-panel{position:absolute;top:56px;right:16px;width:360px;max-height:calc(100vh - 72px);background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow-y:auto;padding:20px;z-index:10;box-shadow:0 8px 32px var(--shadow);transition:top .25s ease,right .25s ease,bottom .25s ease,left .25s ease,width .25s ease,max-height .25s ease,border-radius .25s ease}.info-panel.hidden{display:none}.info-panel.info-panel-maximized{top:0;right:0;bottom:0;left:0;width:auto;max-height:none;border-radius:0;z-index:40}.info-panel-toolbar{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:2px;z-index:1}.info-toolbar-btn{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 6px;line-height:1;border-radius:4px;transition:color .15s,background .15s}.info-toolbar-btn:hover:not(:disabled){color:var(--text);background:var(--bg-hover)}.info-toolbar-btn:disabled{color:var(--text-dim);cursor:default;opacity:.3}.info-close-btn{font-size:20px}.info-connection-link{cursor:pointer;transition:background .15s}.info-connection-link:hover{background:var(--bg-active)}.info-connection-link .info-target{color:var(--accent);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}.info-connection-link:hover .info-target{text-decoration-color:var(--accent)}.info-header{margin-bottom:16px}.info-type-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;color:var(--badge-text);margin-bottom:8px}.info-label{font-size:18px;font-weight:600;color:var(--text-strong);margin-bottom:4px;word-break:break-word}.info-id{display:block;font-size:11px;color:var(--text-dim);font-family:monospace}.info-section{margin-bottom:16px}.info-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}.info-props{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.info-props dt{font-size:12px;color:var(--text-muted);padding-top:2px}.info-props dd{font-size:12px;color:var(--text);word-break:break-word;display:flex;align-items:center;gap:4px}.info-value{white-space:pre-wrap}.info-array{display:flex;flex-wrap:wrap;gap:4px}.info-tag{display:inline-block;padding:2px 8px;background:var(--bg-hover);border-radius:4px;font-size:11px;color:var(--text-muted)}.info-json{font-size:11px;font-family:monospace;color:var(--text-muted);background:var(--bg-inset);padding:6px 8px;border-radius:4px;overflow-x:auto;white-space:pre}.info-connections{list-style:none;display:flex;flex-direction:column;gap:6px}.info-connection{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-elevated);border-radius:6px;font-size:12px;flex-wrap:wrap}.info-target-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.info-arrow{color:var(--text-dim);font-size:14px;flex-shrink:0}.info-edge-type{color:var(--text-muted);font-size:11px;font-weight:500}.info-target{color:var(--text);font-weight:500}.info-edge-props{width:100%;padding-top:4px;padding-left:20px}.info-edge-prop{display:block;font-size:11px;color:var(--text-dim)}.info-editable{cursor:default;position:relative}.info-inline-edit{background:none;border:none;color:var(--badge-text);opacity:0;font-size:10px;cursor:pointer;margin-left:4px;transition:opacity .15s}.info-editable:hover .info-inline-edit{opacity:.8}.info-inline-edit:hover{opacity:1!important}.info-edit-inline-input{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--badge-text);font:inherit;font-size:inherit;outline:none;width:100%;padding:0}.info-edit-input{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:12px;color:var(--text);flex:1;min-width:0}.info-edit-input:focus{outline:none;border-color:var(--accent)}.info-delete-prop{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;padding:0 2px;flex-shrink:0;opacity:0;transition:opacity .1s,color .1s}.info-props dd:hover .info-delete-prop{opacity:1}.info-delete-prop:hover{color:#ef4444}.info-add-btn{background:none;border:1px dashed var(--border);border-radius:4px;padding:6px 10px;font-size:12px;color:var(--text-dim);cursor:pointer;width:100%;margin-top:8px;transition:border-color .15s,color .15s}.info-add-btn:hover{border-color:var(--accent);color:var(--text)}.info-add-row{display:flex;gap:4px;margin-top:6px}.info-add-save{background:var(--accent);border:none;border-radius:4px;padding:3px 10px;font-size:12px;color:var(--badge-text);cursor:pointer;flex-shrink:0}.info-add-save:hover{background:var(--accent-hover)}.info-delete-edge{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;margin-left:auto;padding:0 2px;opacity:0;transition:opacity .1s,color .1s}.info-connection:hover .info-delete-edge{opacity:1}.info-delete-edge:hover{color:#ef4444}.info-danger{margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}.info-delete-node{background:none;border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:6px 12px;font-size:12px;color:#ef4444;cursor:pointer;width:100%;transition:background .15s}.info-delete-node:hover{background:#ef44441a}@media(max-width:768px){.info-panel{top:auto;bottom:72px;right:8px;left:8px;width:auto;max-height:calc(100% - 200px);overflow-y:auto}.info-panel.info-panel-maximized{bottom:0;left:0;right:0}}

package/dist/app/assets/index-DI_1rZKx.js

@@ -0,0 +1 @@
+(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))t(r);new MutationObserver(r=>{for(const e of r)if(e.type==="childList")for(const l of e.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&t(l)}).observe(document,{childList:!0,subtree:!0});function o(r){const e={};return r.integrity&&(e.integrity=r.integrity),r.referrerPolicy&&(e.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?e.credentials="include":r.crossOrigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function t(r){if(r.ep)return;r.ep=!0;const e=o(r);fetch(r.href,e)}})();async function de(){const c=await fetch("/api/ontologies");return c.ok?c.json():[]}async function re(c){const n=await fetch(`/api/ontologies/${encodeURIComponent(c)}`);if(!n.ok)throw new Error(`Failed to load ontology: ${c}`);return n.json()}async function Te(c,n){if(!(await fetch(`/api/ontologies/${encodeURIComponent(c)}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)})).ok)throw new Error(`Failed to save ontology: ${c}`)}async function Ae(c,n){if(!(await fetch(`/api/ontologies/${encodeURIComponent(c)}/rename`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n})})).ok)throw new Error(`Failed to rename ontology: ${c}`)}function ke(c,n){const o=typeof n=="function"?{onSelect:n}:n,t=document.createElement("h2");t.textContent="Backpack Viewer";const r=document.createElement("input");r.type="text",r.placeholder="Filter...",r.id="filter";const e=document.createElement("ul");e.id="ontology-list";const l=document.createElement("div");l.className="sidebar-footer",l.innerHTML='<a href="mailto:support@backpackontology.com">support@backpackontology.com</a><span>Feedback & support</span>',c.appendChild(t),c.appendChild(r),c.appendChild(e),c.appendChild(l);let x=[],f="";return r.addEventListener("input",()=>{const u=r.value.toLowerCase();for(const h of x){const i=h.dataset.name??"";h.style.display=i.includes(u)?"":"none"}}),{setSummaries(u){e.innerHTML="",x=u.map(h=>{const i=document.createElement("li");i.className="ontology-item",i.dataset.name=h.name;const p=document.createElement("span");p.className="name",p.textContent=h.name;const L=document.createElement("span");if(L.className="stats",L.textContent=`${h.nodeCount} nodes, ${h.edgeCount} edges`,i.appendChild(p),i.appendChild(L),o.onRename){const A=document.createElement("button");A.className="sidebar-edit-btn",A.textContent="✎",A.title="Rename";const Q=o.onRename;A.addEventListener("click",C=>{C.stopPropagation();const w=document.createElement("input");w.type="text",w.className="sidebar-rename-input",w.value=h.name,p.textContent="",p.appendChild(w),A.style.display="none",w.focus(),w.select();const d=()=>{const M=w.value.trim();M&&M!==h.name?Q(h.name,M):(p.textContent=h.name,A.style.display="")};w.addEventListener("blur",d),w.addEventListener("keydown",M=>{M.key==="Enter"&&w.blur(),M.key==="Escape"&&(w.value=h.name,w.blur())})}),i.appendChild(A)}return i.addEventListener("click",()=>o.onSelect(h.name)),e.appendChild(i),i}),f&&this.setActive(f)},setActive(u){f=u;for(const h of x)h.classList.toggle("active",h.dataset.name===u)}}}const De=5e3,Pe=.005,be=150,he=.9,ge=.01,ye=30,pe=50;function Oe(c,n){for(const o of Object.values(c))if(typeof o=="string")return o;return n}function Be(c){const n=Math.sqrt(c.nodes.length)*be*.5,o=new Map,t=c.nodes.map((e,l)=>{const x=2*Math.PI*l/c.nodes.length,f={id:e.id,x:Math.cos(x)*n,y:Math.sin(x)*n,vx:0,vy:0,label:Oe(e.properties,e.id),type:e.type};return o.set(e.id,f),f}),r=c.edges.map(e=>({sourceId:e.sourceId,targetId:e.targetId,type:e.type}));return{nodes:t,edges:r,nodeMap:o}}function Re(c,n){const{nodes:o,edges:t,nodeMap:r}=c;for(let e=0;e<o.length;e++)for(let l=e+1;l<o.length;l++){const x=o[e],f=o[l];let u=f.x-x.x,h=f.y-x.y,i=Math.sqrt(u*u+h*h);i<ye&&(i=ye);const p=De*n/(i*i),L=u/i*p,A=h/i*p;x.vx-=L,x.vy-=A,f.vx+=L,f.vy+=A}for(const e of t){const l=r.get(e.sourceId),x=r.get(e.targetId);if(!l||!x)continue;const f=x.x-l.x,u=x.y-l.y,h=Math.sqrt(f*f+u*u);if(h===0)continue;const i=Pe*(h-be)*n,p=f/h*i,L=u/h*i;l.vx+=p,l.vy+=L,x.vx-=p,x.vy-=L}for(const e of o)e.vx-=e.x*ge*n,e.vy-=e.y*ge*n;for(const e of o){e.vx*=he,e.vy*=he;const l=Math.sqrt(e.vx*e.vx+e.vy*e.vy);l>pe&&(e.vx=e.vx/l*pe,e.vy=e.vy/l*pe),e.x+=e.vx,e.y+=e.vy}return n*.995}const xe=["#d4a27f","#c17856","#b07a5e","#d4956b","#a67c5a","#cc9e7c","#c4866a","#cb8e6c","#b8956e","#a88a70","#d9b08c","#c4a882","#e8b898","#b5927a","#a8886e","#d1a990"],ve=new Map;function ne(c){const n=ve.get(c);if(n)return n;let o=0;for(let r=0;r<c.length;r++)o=(o<<5)-o+c.charCodeAt(r)|0;const t=xe[Math.abs(o)%xe.length];return ve.set(c,t),t}function K(c){return getComputedStyle(document.documentElement).getPropertyValue(c).trim()}const ee=20,ze=.001;function Ye(c,n){const o=c.querySelector("canvas"),t=o.getContext("2d"),r=window.devicePixelRatio||1;let e={x:0,y:0,scale:1},l=null,x=1,f=0,u=new Set,h=null,i=null,p=null;const L=300;function A(){o.width=o.clientWidth*r,o.height=o.clientHeight*r,d()}const Q=new ResizeObserver(A);Q.observe(c),A();function C(a,s){return[a/e.scale+e.x,s/e.scale+e.y]}function w(a,s){if(!l)return null;const[g,m]=C(a,s);for(let I=l.nodes.length-1;I>=0;I--){const P=l.nodes[I],v=g-P.x,$=m-P.y;if(v*v+$*$<=ee*ee)return P}return null}function d(){if(!l){t.clearRect(0,0,o.width,o.height);return}const a=K("--canvas-edge"),s=K("--canvas-edge-highlight"),g=K("--canvas-edge-dim"),m=K("--canvas-edge-label"),I=K("--canvas-edge-label-highlight"),P=K("--canvas-edge-label-dim"),v=K("--canvas-arrow"),$=K("--canvas-arrow-highlight"),U=K("--canvas-node-label"),V=K("--canvas-node-label-dim"),oe=K("--canvas-type-badge"),we=K("--canvas-type-badge-dim"),Ne=K("--canvas-selection-border"),Se=K("--canvas-node-border");t.save(),t.setTransform(r,0,0,r,0,0),t.clearRect(0,0,o.clientWidth,o.clientHeight),t.save(),t.translate(-e.x*e.scale,-e.y*e.scale),t.scale(e.scale,e.scale);for(const O of l.edges){const _=l.nodeMap.get(O.sourceId),J=l.nodeMap.get(O.targetId);if(!_||!J)continue;const le=h===null||h.has(O.sourceId),ae=h===null||h.has(O.targetId),se=le&&ae;if(h!==null&&!le&&!ae)continue;const Z=u.size>0&&(u.has(O.sourceId)||u.has(O.targetId))||h!==null&&se,fe=h!==null&&!se;if(O.sourceId===O.targetId){N(_,O.type,Z,a,s,m,I);continue}t.beginPath(),t.moveTo(_.x,_.y),t.lineTo(J.x,J.y),t.strokeStyle=Z?s:fe?g:a,t.lineWidth=Z?2.5:1.5,t.stroke(),M(_.x,_.y,J.x,J.y,Z,v,$);const Me=(_.x+J.x)/2,Ie=(_.y+J.y)/2;t.fillStyle=Z?I:fe?P:m,t.font="9px system-ui, sans-serif",t.textAlign="center",t.textBaseline="bottom",t.fillText(O.type,Me,Ie-4)}for(const O of l.nodes){const _=ne(O.type),J=u.has(O.id),le=u.size>0&&l.edges.some(Z=>u.has(Z.sourceId)&&Z.targetId===O.id||u.has(Z.targetId)&&Z.sourceId===O.id),ae=h!==null&&!h.has(O.id),se=ae||u.size>0&&!J&&!le;J&&(t.save(),t.shadowColor=_,t.shadowBlur=20,t.beginPath(),t.arc(O.x,O.y,ee+3,0,Math.PI*2),t.fillStyle=_,t.globalAlpha=.3,t.fill(),t.restore()),t.beginPath(),t.arc(O.x,O.y,ee,0,Math.PI*2),t.fillStyle=_,t.globalAlpha=ae?.1:se?.3:1,t.fill(),t.strokeStyle=J?Ne:Se,t.lineWidth=J?3:1.5,t.stroke();const me=O.label.length>24?O.label.slice(0,22)+"...":O.label;t.fillStyle=se?V:U,t.font="11px system-ui, sans-serif",t.textAlign="center",t.textBaseline="top",t.fillText(me,O.x,O.y+ee+4),t.fillStyle=se?we:oe,t.font="9px system-ui, sans-serif",t.textBaseline="bottom",t.fillText(O.type,O.x,O.y-ee-3),t.globalAlpha=1}t.restore(),t.restore()}function M(a,s,g,m,I,P,v){const $=Math.atan2(m-s,g-a),U=g-Math.cos($)*ee,V=m-Math.sin($)*ee,oe=8;t.beginPath(),t.moveTo(U,V),t.lineTo(U-oe*Math.cos($-.4),V-oe*Math.sin($-.4)),t.lineTo(U-oe*Math.cos($+.4),V-oe*Math.sin($+.4)),t.closePath(),t.fillStyle=I?v:P,t.fill()}function N(a,s,g,m,I,P,v){const $=a.x+ee+15,U=a.y-ee-15;t.beginPath(),t.arc($,U,15,0,Math.PI*2),t.strokeStyle=g?I:m,t.lineWidth=g?2.5:1.5,t.stroke(),t.fillStyle=g?v:P,t.font="9px system-ui, sans-serif",t.textAlign="center",t.fillText(s,$,U-18)}function E(){if(!i||!p)return;const a=performance.now()-p.time,s=Math.min(a/L,1),g=1-Math.pow(1-s,3);e.x=p.x+(i.x-p.x)*g,e.y=p.y+(i.y-p.y)*g,d(),s<1?requestAnimationFrame(E):(i=null,p=null)}function B(){!l||x<ze||(x=Re(l,x),d(),f=requestAnimationFrame(B))}let X=!1,q=!1,j=0,W=0;o.addEventListener("mousedown",a=>{X=!0,q=!1,j=a.clientX,W=a.clientY}),o.addEventListener("mousemove",a=>{if(!X)return;const s=a.clientX-j,g=a.clientY-W;(Math.abs(s)>2||Math.abs(g)>2)&&(q=!0),e.x-=s/e.scale,e.y-=g/e.scale,j=a.clientX,W=a.clientY,d()}),o.addEventListener("mouseup",a=>{if(X=!1,q)return;const s=o.getBoundingClientRect(),g=a.clientX-s.left,m=a.clientY-s.top,I=w(g,m),P=a.ctrlKey||a.metaKey;if(I){P?u.has(I.id)?u.delete(I.id):u.add(I.id):u.size===1&&u.has(I.id)?u.clear():(u.clear(),u.add(I.id));const v=[...u];n==null||n(v.length>0?v:null)}else u.clear(),n==null||n(null);d()}),o.addEventListener("mouseleave",()=>{X=!1}),o.addEventListener("wheel",a=>{a.preventDefault();const s=o.getBoundingClientRect(),g=a.clientX-s.left,m=a.clientY-s.top,[I,P]=C(g,m),v=a.ctrlKey?1-a.deltaY*.01:a.deltaY>0?.9:1.1;e.scale=Math.max(.05,Math.min(10,e.scale*v)),e.x=I-g/e.scale,e.y=P-m/e.scale,d()},{passive:!1});let H=[],T=0,z=1,F=0,G=0,S=!1;o.addEventListener("touchstart",a=>{a.preventDefault(),H=Array.from(a.touches),H.length===2?(T=k(H[0],H[1]),z=e.scale):H.length===1&&(j=H[0].clientX,W=H[0].clientY,F=H[0].clientX,G=H[0].clientY,S=!1)},{passive:!1}),o.addEventListener("touchmove",a=>{a.preventDefault();const s=Array.from(a.touches);if(s.length===2&&H.length===2){const m=k(s[0],s[1])/T;e.scale=Math.max(.05,Math.min(10,z*m)),d()}else if(s.length===1){const g=s[0].clientX-j,m=s[0].clientY-W;(Math.abs(s[0].clientX-F)>10||Math.abs(s[0].clientY-G)>10)&&(S=!0),e.x-=g/e.scale,e.y-=m/e.scale,j=s[0].clientX,W=s[0].clientY,d()}H=s},{passive:!1}),o.addEventListener("touchend",a=>{if(a.preventDefault(),S||a.changedTouches.length!==1)return;const s=a.changedTouches[0],g=o.getBoundingClientRect(),m=s.clientX-g.left,I=s.clientY-g.top,P=w(m,I);if(P){u.size===1&&u.has(P.id)?u.clear():(u.clear(),u.add(P.id));const v=[...u];n==null||n(v.length>0?v:null)}else u.clear(),n==null||n(null);d()},{passive:!1}),o.addEventListener("gesturestart",a=>a.preventDefault()),o.addEventListener("gesturechange",a=>a.preventDefault());function k(a,s){const g=a.clientX-s.clientX,m=a.clientY-s.clientY;return Math.sqrt(g*g+m*m)}const y=document.createElement("div");y.className="zoom-controls";const R=document.createElement("button");R.className="zoom-btn",R.textContent="+",R.title="Zoom in",R.addEventListener("click",()=>{const a=o.clientWidth/2,s=o.clientHeight/2,[g,m]=C(a,s);e.scale=Math.min(10,e.scale*1.3),e.x=g-a/e.scale,e.y=m-s/e.scale,d()});const D=document.createElement("button");D.className="zoom-btn",D.textContent="−",D.title="Zoom out",D.addEventListener("click",()=>{const a=o.clientWidth/2,s=o.clientHeight/2,[g,m]=C(a,s);e.scale=Math.max(.05,e.scale/1.3),e.x=g-a/e.scale,e.y=m-s/e.scale,d()});const Y=document.createElement("button");return Y.className="zoom-btn",Y.textContent="○",Y.title="Reset zoom",Y.addEventListener("click",()=>{if(l){if(e={x:0,y:0,scale:1},l.nodes.length>0){let a=1/0,s=1/0,g=-1/0,m=-1/0;for(const v of l.nodes)v.x<a&&(a=v.x),v.y<s&&(s=v.y),v.x>g&&(g=v.x),v.y>m&&(m=v.y);const I=(a+g)/2,P=(s+m)/2;e.x=I-o.clientWidth/2,e.y=P-o.clientHeight/2}d()}}),y.appendChild(R),y.appendChild(Y),y.appendChild(D),c.appendChild(y),{loadGraph(a){if(cancelAnimationFrame(f),l=Be(a),x=1,u=new Set,h=null,e={x:0,y:0,scale:1},l.nodes.length>0){let s=1/0,g=1/0,m=-1/0,I=-1/0;for(const V of l.nodes)V.x<s&&(s=V.x),V.y<g&&(g=V.y),V.x>m&&(m=V.x),V.y>I&&(I=V.y);const P=(s+m)/2,v=(g+I)/2,$=o.clientWidth,U=o.clientHeight;e.x=P-$/2,e.y=v-U/2}B()},setFilteredNodeIds(a){h=a,d()},panToNode(a){if(!l)return;const s=l.nodeMap.get(a);if(!s)return;u=new Set([a]),n==null||n([a]);const g=o.clientWidth,m=o.clientHeight;p={x:e.x,y:e.y,time:performance.now()},i={x:s.x-g/(2*e.scale),y:s.y-m/(2*e.scale)},E()},destroy(){cancelAnimationFrame(f),Q.disconnect()}}}function ce(c){for(const n of Object.values(c.properties))if(typeof n=="string")return n;return c.id}const He="✎";function $e(c,n,o){const t=document.createElement("div");t.id="info-panel",t.className="info-panel hidden",c.appendChild(t);let r=!1,e=[],l=-1,x=!1,f=null;function u(){t.classList.add("hidden"),t.classList.remove("info-panel-maximized"),t.innerHTML="",r=!1,e=[],l=-1}function h(C){!f||!o||(l<e.length-1&&(e=e.slice(0,l+1)),e.push(C),l=e.length-1,x=!0,o(C),x=!1)}function i(){l<=0||!f||!o||(l--,x=!0,o(e[l]),x=!1)}function p(){l>=e.length-1||!f||!o||(l++,x=!0,o(e[l]),x=!1)}function L(){const C=document.createElement("div");C.className="info-panel-toolbar";const w=document.createElement("button");w.className="info-toolbar-btn",w.textContent="←",w.title="Back",w.disabled=l<=0,w.addEventListener("click",i),C.appendChild(w);const d=document.createElement("button");d.className="info-toolbar-btn",d.textContent="→",d.title="Forward",d.disabled=l>=e.length-1,d.addEventListener("click",p),C.appendChild(d);const M=document.createElement("button");M.className="info-toolbar-btn",M.textContent=r?"⎘":"⛶",M.title=r?"Restore":"Maximize",M.addEventListener("click",()=>{r=!r,t.classList.toggle("info-panel-maximized",r),M.textContent=r?"⎘":"⛶",M.title=r?"Restore":"Maximize"}),C.appendChild(M);const N=document.createElement("button");return N.className="info-toolbar-btn info-close-btn",N.textContent="×",N.title="Close",N.addEventListener("click",u),C.appendChild(N),C}function A(C,w){const d=w.nodes.find(S=>S.id===C);if(!d)return;const M=w.edges.filter(S=>S.sourceId===C||S.targetId===C);t.innerHTML="",t.classList.remove("hidden"),r&&t.classList.add("info-panel-maximized"),t.appendChild(L());const N=document.createElement("div");N.className="info-header";const E=document.createElement("span");if(E.className="info-type-badge",E.textContent=d.type,E.style.backgroundColor=ne(d.type),n){E.classList.add("info-editable");const S=document.createElement("button");S.className="info-inline-edit",S.textContent=He,S.addEventListener("click",k=>{k.stopPropagation();const y=document.createElement("input");y.type="text",y.className="info-edit-inline-input",y.value=d.type,E.textContent="",E.appendChild(y),y.focus(),y.select();const R=()=>{const D=y.value.trim();D&&D!==d.type?n.onChangeNodeType(C,D):(E.textContent=d.type,E.appendChild(S))};y.addEventListener("blur",R),y.addEventListener("keydown",D=>{D.key==="Enter"&&y.blur(),D.key==="Escape"&&(y.value=d.type,y.blur())})}),E.appendChild(S)}const B=document.createElement("h3");B.className="info-label",B.textContent=ce(d);const X=document.createElement("span");X.className="info-id",X.textContent=d.id,N.appendChild(E),N.appendChild(B),N.appendChild(X),t.appendChild(N);const q=Object.keys(d.properties),j=ie("Properties");if(q.length>0){const S=document.createElement("dl");S.className="info-props";for(const k of q){const y=document.createElement("dt");y.textContent=k;const R=document.createElement("dd");if(n){const D=ue(d.properties[k]),Y=document.createElement("input");Y.type="text",Y.className="info-edit-input",Y.value=D,Y.addEventListener("keydown",s=>{s.key==="Enter"&&Y.blur()}),Y.addEventListener("blur",()=>{const s=Y.value;s!==D&&n.onUpdateNode(C,{[k]:Fe(s)})}),R.appendChild(Y);const a=document.createElement("button");a.className="info-delete-prop",a.textContent="×",a.title=`Remove ${k}`,a.addEventListener("click",()=>{const s={...d.properties};delete s[k],n.onUpdateNode(C,s)}),R.appendChild(a)}else R.appendChild(Xe(d.properties[k]));S.appendChild(y),S.appendChild(R)}j.appendChild(S)}if(n){const S=document.createElement("button");S.className="info-add-btn",S.textContent="+ Add property",S.addEventListener("click",()=>{const k=document.createElement("div");k.className="info-add-row";const y=document.createElement("input");y.type="text",y.className="info-edit-input",y.placeholder="key";const R=document.createElement("input");R.type="text",R.className="info-edit-input",R.placeholder="value";const D=document.createElement("button");D.className="info-add-save",D.textContent="Add",D.addEventListener("click",()=>{y.value&&n.onAddProperty(C,y.value,R.value)}),k.appendChild(y),k.appendChild(R),k.appendChild(D),j.appendChild(k),y.focus()}),j.appendChild(S)}if(t.appendChild(j),M.length>0){const S=ie(`Connections (${M.length})`),k=document.createElement("ul");k.className="info-connections";for(const y of M){const R=y.sourceId===C,D=R?y.targetId:y.sourceId,Y=w.nodes.find(v=>v.id===D),a=Y?ce(Y):D,s=document.createElement("li");if(s.className="info-connection",o&&Y&&(s.classList.add("info-connection-link"),s.addEventListener("click",v=>{v.target.closest(".info-delete-edge")||h(D)})),Y){const v=document.createElement("span");v.className="info-target-dot",v.style.backgroundColor=ne(Y.type),s.appendChild(v)}const g=document.createElement("span");g.className="info-arrow",g.textContent=R?"→":"←";const m=document.createElement("span");m.className="info-edge-type",m.textContent=y.type;const I=document.createElement("span");I.className="info-target",I.textContent=a,s.appendChild(g),s.appendChild(m),s.appendChild(I);const P=Object.keys(y.properties);if(P.length>0){const v=document.createElement("div");v.className="info-edge-props";for(const $ of P){const U=document.createElement("span");U.className="info-edge-prop",U.textContent=`${$}: ${ue(y.properties[$])}`,v.appendChild(U)}s.appendChild(v)}if(n){const v=document.createElement("button");v.className="info-delete-edge",v.textContent="×",v.title="Remove connection",v.addEventListener("click",$=>{$.stopPropagation(),n.onDeleteEdge(y.id)}),s.appendChild(v)}k.appendChild(s)}S.appendChild(k),t.appendChild(S)}const W=ie("Timestamps"),H=document.createElement("dl");H.className="info-props";const T=document.createElement("dt");T.textContent="created";const z=document.createElement("dd");z.textContent=Ce(d.createdAt);const F=document.createElement("dt");F.textContent="updated";const G=document.createElement("dd");if(G.textContent=Ce(d.updatedAt),H.appendChild(T),H.appendChild(z),H.appendChild(F),H.appendChild(G),W.appendChild(H),t.appendChild(W),n){const S=document.createElement("div");S.className="info-section info-danger";const k=document.createElement("button");k.className="info-delete-node",k.textContent="Delete node",k.addEventListener("click",()=>{n.onDeleteNode(C),u()}),S.appendChild(k),t.appendChild(S)}}function Q(C,w){const d=new Set(C),M=w.nodes.filter(T=>d.has(T.id));if(M.length===0)return;const N=w.edges.filter(T=>d.has(T.sourceId)&&d.has(T.targetId));t.innerHTML="",t.classList.remove("hidden"),r&&t.classList.add("info-panel-maximized"),t.appendChild(L());const E=document.createElement("div");E.className="info-header";const B=document.createElement("h3");B.className="info-label",B.textContent=`${M.length} nodes selected`,E.appendChild(B);const X=document.createElement("div");X.style.cssText="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px";const q=new Map;for(const T of M)q.set(T.type,(q.get(T.type)??0)+1);for(const[T,z]of q){const F=document.createElement("span");F.className="info-type-badge",F.style.backgroundColor=ne(T),F.textContent=z>1?`${T} (${z})`:T,X.appendChild(F)}E.appendChild(X),t.appendChild(E);const j=ie("Selected Nodes"),W=document.createElement("ul");W.className="info-connections";for(const T of M){const z=document.createElement("li");z.className="info-connection",o&&(z.classList.add("info-connection-link"),z.addEventListener("click",()=>{h(T.id)}));const F=document.createElement("span");F.className="info-target-dot",F.style.backgroundColor=ne(T.type);const G=document.createElement("span");G.className="info-target",G.textContent=ce(T);const S=document.createElement("span");S.className="info-edge-type",S.textContent=T.type,z.appendChild(F),z.appendChild(G),z.appendChild(S),W.appendChild(z)}j.appendChild(W),t.appendChild(j);const H=ie(N.length>0?`Connections Between Selected (${N.length})`:"Connections Between Selected");if(N.length===0){const T=document.createElement("p");T.style.cssText="font-size:12px;color:var(--text-dim)",T.textContent="No direct connections between selected nodes",H.appendChild(T)}else{const T=document.createElement("ul");T.className="info-connections";for(const z of N){const F=w.nodes.find(m=>m.id===z.sourceId),G=w.nodes.find(m=>m.id===z.targetId),S=F?ce(F):z.sourceId,k=G?ce(G):z.targetId,y=document.createElement("li");if(y.className="info-connection",F){const m=document.createElement("span");m.className="info-target-dot",m.style.backgroundColor=ne(F.type),y.appendChild(m)}const R=document.createElement("span");R.className="info-target",R.textContent=S;const D=document.createElement("span");D.className="info-arrow",D.textContent="→";const Y=document.createElement("span");Y.className="info-edge-type",Y.textContent=z.type;const a=document.createElement("span");if(a.className="info-arrow",a.textContent="→",y.appendChild(R),y.appendChild(D),y.appendChild(Y),y.appendChild(a),G){const m=document.createElement("span");m.className="info-target-dot",m.style.backgroundColor=ne(G.type),y.appendChild(m)}const s=document.createElement("span");s.className="info-target",s.textContent=k,y.appendChild(s);const g=Object.keys(z.properties);if(g.length>0){const m=document.createElement("div");m.className="info-edge-props";for(const I of g){const P=document.createElement("span");P.className="info-edge-prop",P.textContent=`${I}: ${ue(z.properties[I])}`,m.appendChild(P)}y.appendChild(m)}T.appendChild(y)}H.appendChild(T)}t.appendChild(H)}return{show(C,w){if(f=w,C.length===1&&!x){const d=C[0];e[l]!==d&&(l<e.length-1&&(e=e.slice(0,l+1)),e.push(d),l=e.length-1)}C.length===1?A(C[0],w):C.length>1&&Q(C,w)},hide:u,get visible(){return!t.classList.contains("hidden")}}}function ie(c){const n=document.createElement("div");n.className="info-section";const o=document.createElement("h4");return o.className="info-section-title",o.textContent=c,n.appendChild(o),n}function Xe(c){if(Array.isArray(c)){const o=document.createElement("div");o.className="info-array";for(const t of c){const r=document.createElement("span");r.className="info-tag",r.textContent=String(t),o.appendChild(r)}return o}if(c!==null&&typeof c=="object"){const o=document.createElement("pre");return o.className="info-json",o.textContent=JSON.stringify(c,null,2),o}const n=document.createElement("span");return n.className="info-value",n.textContent=String(c??""),n}function ue(c){return Array.isArray(c)?c.map(String).join(", "):c!==null&&typeof c=="object"?JSON.stringify(c):String(c??"")}function Fe(c){const n=c.trim();if(n==="true")return!0;if(n==="false")return!1;if(n!==""&&!isNaN(Number(n)))return Number(n);if(n.startsWith("[")&&n.endsWith("]")||n.startsWith("{")&&n.endsWith("}"))try{return JSON.parse(n)}catch{return c}return c}function Ce(c){try{return new Date(c).toLocaleString()}catch{return c}}function Le(c){for(const n of Object.values(c.properties))if(typeof n=="string")return n;return c.id}function Ee(c,n){const o=n.toLowerCase();if(Le(c).toLowerCase().includes(o)||c.type.toLowerCase().includes(o))return!0;for(const t of Object.values(c.properties))if(typeof t=="string"&&t.toLowerCase().includes(o))return!0;return!1}function je(c){let n=null,o=null,t=null,r=new Set,e=null;const l=document.createElement("div");l.className="search-overlay hidden";const x=document.createElement("div");x.className="search-input-wrap";const f=document.createElement("input");f.className="search-input",f.type="text",f.placeholder="Search nodes...",f.setAttribute("autocomplete","off"),f.setAttribute("spellcheck","false");const u=document.createElement("kbd");u.className="search-kbd",u.textContent="/";const h=document.createElement("button");h.className="chip-toggle",h.setAttribute("aria-label","Toggle filter chips"),h.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>';let i=!1;h.addEventListener("click",()=>{i=!i,L.classList.toggle("hidden",!i),h.classList.toggle("active",i)}),x.appendChild(f),x.appendChild(u),x.appendChild(h);const p=document.createElement("ul");p.className="search-results hidden";const L=document.createElement("div");L.className="type-chips hidden",l.appendChild(x),l.appendChild(p),l.appendChild(L),c.appendChild(l);function A(){if(L.innerHTML="",!n)return;const d=new Map;for(const N of n.nodes)d.set(N.type,(d.get(N.type)??0)+1);const M=[...d.keys()].sort();r=new Set;for(const N of M){const E=document.createElement("button");E.className="type-chip",E.dataset.type=N;const B=document.createElement("span");B.className="type-chip-dot",B.style.backgroundColor=ne(N);const X=document.createElement("span");X.textContent=`${N} (${d.get(N)})`,E.appendChild(B),E.appendChild(X),E.addEventListener("click",()=>{r.has(N)?(r.delete(N),E.classList.remove("active")):(r.add(N),E.classList.add("active")),C()}),L.appendChild(E)}}function Q(){if(!n)return null;const d=f.value.trim(),M=r.size===0,N=d.length===0;if(N&&M)return null;const E=new Set;for(const B of n.nodes)!M&&!r.has(B.type)||(N||Ee(B,d))&&E.add(B.id);return E}function C(){const d=Q();o==null||o(d),w()}function w(){p.innerHTML="";const d=f.value.trim();if(!n||d.length===0){p.classList.add("hidden");return}const M=r.size===0,N=[];for(const E of n.nodes)if(!(!M&&!r.has(E.type))&&Ee(E,d)&&(N.push(E),N.length>=8))break;if(N.length===0){p.classList.add("hidden");return}for(const E of N){const B=document.createElement("li");B.className="search-result-item";const X=document.createElement("span");X.className="search-result-dot",X.style.backgroundColor=ne(E.type);const q=document.createElement("span");q.className="search-result-label";const j=Le(E);q.textContent=j.length>36?j.slice(0,34)+"...":j;const W=document.createElement("span");W.className="search-result-type",W.textContent=E.type,B.appendChild(X),B.appendChild(q),B.appendChild(W),B.addEventListener("click",()=>{t==null||t(E.id),f.value="",p.classList.add("hidden"),C()}),p.appendChild(B)}p.classList.remove("hidden")}return f.addEventListener("input",()=>{e&&clearTimeout(e),e=setTimeout(C,150)}),f.addEventListener("keydown",d=>{if(d.key==="Escape")f.value="",f.blur(),p.classList.add("hidden"),C();else if(d.key==="Enter"){const M=p.querySelector(".search-result-item");M==null||M.click()}}),document.addEventListener("click",d=>{l.contains(d.target)||p.classList.add("hidden")}),f.addEventListener("focus",()=>u.classList.add("hidden")),f.addEventListener("blur",()=>{f.value.length===0&&u.classList.remove("hidden")}),{setLearningGraphData(d){n=d,f.value="",p.classList.add("hidden"),n&&n.nodes.length>0?(l.classList.remove("hidden"),A()):l.classList.add("hidden")},onFilterChange(d){o=d},onNodeSelect(d){t=d},clear(){f.value="",p.classList.add("hidden"),r.clear(),i=!1,L.classList.add("hidden"),h.classList.remove("active"),o==null||o(null)},focus(){f.focus()}}}let te="",b=null;async function We(){const c=document.getElementById("canvas-container"),n=window.matchMedia("(prefers-color-scheme: dark)"),t=localStorage.getItem("backpack-theme")??(n.matches?"dark":"light");document.documentElement.setAttribute("data-theme",t);const r=document.createElement("button");r.className="theme-toggle",r.textContent=t==="light"?"☾":"☼",r.title="Toggle light/dark mode",r.addEventListener("click",()=>{const p=document.documentElement.getAttribute("data-theme")==="light"?"dark":"light";document.documentElement.setAttribute("data-theme",p),localStorage.setItem("backpack-theme",p),r.textContent=p==="light"?"☾":"☼"}),c.appendChild(r);async function e(){if(!te||!b)return;b.metadata.updatedAt=new Date().toISOString(),await Te(te,b),l.loadGraph(b),f.setLearningGraphData(b);const i=await de();u.setSummaries(i)}let l;const x=$e(c,{onUpdateNode(i,p){if(!b)return;const L=b.nodes.find(A=>A.id===i);L&&(L.properties={...L.properties,...p},L.updatedAt=new Date().toISOString(),e().then(()=>x.show([i],b)))},onChangeNodeType(i,p){if(!b)return;const L=b.nodes.find(A=>A.id===i);L&&(L.type=p,L.updatedAt=new Date().toISOString(),e().then(()=>x.show([i],b)))},onDeleteNode(i){b&&(b.nodes=b.nodes.filter(p=>p.id!==i),b.edges=b.edges.filter(p=>p.sourceId!==i&&p.targetId!==i),e())},onDeleteEdge(i){var L;if(!b)return;const p=(L=b.edges.find(A=>A.id===i))==null?void 0:L.sourceId;b.edges=b.edges.filter(A=>A.id!==i),e().then(()=>{p&&b&&x.show([p],b)})},onAddProperty(i,p,L){if(!b)return;const A=b.nodes.find(Q=>Q.id===i);A&&(A.properties[p]=L,A.updatedAt=new Date().toISOString(),e().then(()=>x.show([i],b)))}},i=>{l.panToNode(i)});l=Ye(c,i=>{i&&i.length>0&&b?x.show(i,b):x.hide()});const f=je(c);f.onFilterChange(i=>{l.setFilteredNodeIds(i)}),f.onNodeSelect(i=>{l.panToNode(i),b&&x.show([i],b)});const u=ke(document.getElementById("sidebar"),{onSelect:async i=>{te=i,u.setActive(i),x.hide(),f.clear(),b=await re(i),l.loadGraph(b),f.setLearningGraphData(b)},onRename:async(i,p)=>{await Ae(i,p),te===i&&(te=p);const L=await de();u.setSummaries(L),u.setActive(te),te===p&&(b=await re(p),l.loadGraph(b),f.setLearningGraphData(b))}}),h=await de();u.setSummaries(h),h.length>0&&(te=h[0].name,u.setActive(te),b=await re(te),l.loadGraph(b),f.setLearningGraphData(b)),document.addEventListener("keydown",i=>{i.target instanceof HTMLInputElement||i.target instanceof HTMLTextAreaElement||(i.key==="/"||i.key==="k"&&(i.metaKey||i.ctrlKey))&&(i.preventDefault(),f.focus())})}We();

package/dist/app/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Backpack Viewer</title>
-    <script type="module" crossorigin src="/assets/index-BgwF999-.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Cdb7srBF.css">
+    <script type="module" crossorigin src="/assets/index-DI_1rZKx.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C1crWHUS.css">
   </head>
   <body>
     <div id="app">

package/dist/canvas.d.ts

@@ -1,6 +1,6 @@
-import type { OntologyData } from "backpack-ontology";
+import type { LearningGraphData } from "backpack-ontology";
 export declare function initCanvas(container: HTMLElement, onNodeClick?: (nodeIds: string[] | null) => void): {
-    loadGraph(data: OntologyData): void;
+    loadGraph(data: LearningGraphData): void;
     setFilteredNodeIds(ids: Set<string> | null): void;
     panToNode(nodeId: string): void;
     destroy(): void;

package/dist/canvas.js

@@ -313,6 +313,9 @@ export function initCanvas(container, onNodeClick) {
     let touches = [];
     let initialPinchDist = 0;
     let initialPinchScale = 1;
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchDidMove = false;
     canvas.addEventListener("touchstart", (e) => {
         e.preventDefault();
         touches = Array.from(e.touches);
@@ -323,6 +326,9 @@ export function initCanvas(container, onNodeClick) {
         else if (touches.length === 1) {
             lastX = touches[0].clientX;
             lastY = touches[0].clientY;
+            touchStartX = touches[0].clientX;
+            touchStartY = touches[0].clientY;
+            touchDidMove = false;
         }
     }, { passive: false });
     canvas.addEventListener("touchmove", (e) => {
@@ -337,6 +343,10 @@ export function initCanvas(container, onNodeClick) {
         else if (current.length === 1) {
             const dx = current[0].clientX - lastX;
             const dy = current[0].clientY - lastY;
+            if (Math.abs(current[0].clientX - touchStartX) > 10 ||
+                Math.abs(current[0].clientY - touchStartY) > 10) {
+                touchDidMove = true;
+            }
             camera.x -= dx / camera.scale;
             camera.y -= dy / camera.scale;
             lastX = current[0].clientX;
@@ -345,6 +355,35 @@ export function initCanvas(container, onNodeClick) {
         }
         touches = current;
     }, { passive: false });
+    canvas.addEventListener("touchend", (e) => {
+        e.preventDefault();
+        if (touchDidMove || e.changedTouches.length !== 1)
+            return;
+        const t = e.changedTouches[0];
+        const rect = canvas.getBoundingClientRect();
+        const mx = t.clientX - rect.left;
+        const my = t.clientY - rect.top;
+        const hit = nodeAtScreen(mx, my);
+        if (hit) {
+            if (selectedNodeIds.size === 1 && selectedNodeIds.has(hit.id)) {
+                selectedNodeIds.clear();
+            }
+            else {
+                selectedNodeIds.clear();
+                selectedNodeIds.add(hit.id);
+            }
+            const ids = [...selectedNodeIds];
+            onNodeClick?.(ids.length > 0 ? ids : null);
+        }
+        else {
+            selectedNodeIds.clear();
+            onNodeClick?.(null);
+        }
+        render();
+    }, { passive: false });
+    // Prevent Safari page-level pinch zoom on the canvas
+    canvas.addEventListener("gesturestart", (e) => e.preventDefault());
+    canvas.addEventListener("gesturechange", (e) => e.preventDefault());
     function touchDistance(a, b) {
         const dx = a.clientX - b.clientX;
         const dy = a.clientY - b.clientY;

package/dist/info-panel.d.ts

@@ -1,4 +1,4 @@
-import type { OntologyData } from "backpack-ontology";
+import type { LearningGraphData } from "backpack-ontology";
 export interface EditCallbacks {
     onUpdateNode(nodeId: string, properties: Record<string, unknown>): void;
     onChangeNodeType(nodeId: string, newType: string): void;
@@ -7,7 +7,7 @@ export interface EditCallbacks {
     onAddProperty(nodeId: string, key: string, value: string): void;
 }
 export declare function initInfoPanel(container: HTMLElement, callbacks?: EditCallbacks, onNavigateToNode?: (nodeId: string) => void): {
-    show(nodeIds: string[], data: OntologyData): void;
+    show(nodeIds: string[], data: LearningGraphData): void;
     hide: () => void;
     readonly visible: boolean;
 };

package/dist/layout.d.ts

@@ -1,4 +1,4 @@
-import type { OntologyData } from "backpack-ontology";
+import type { LearningGraphData } from "backpack-ontology";
 export interface LayoutNode {
     id: string;
     x: number;
@@ -19,6 +19,6 @@ export interface LayoutState {
     nodeMap: Map<string, LayoutNode>;
 }
 /** Create a layout state from ontology data. Nodes start in a circle. */
-export declare function createLayout(data: OntologyData): LayoutState;
+export declare function createLayout(data: LearningGraphData): LayoutState;
 /** Run one tick of the force simulation. Returns new alpha. */
 export declare function tick(state: LayoutState, alpha: number): number;

package/dist/main.js

@@ -32,7 +32,7 @@ async function main() {
         currentData.metadata.updatedAt = new Date().toISOString();
         await saveOntology(activeOntology, currentData);
         canvas.loadGraph(currentData);
-        search.setOntologyData(currentData);
+        search.setLearningGraphData(currentData);
         // Refresh sidebar counts
         const updated = await listOntologies();
         sidebar.setSummaries(updated);
@@ -119,7 +119,7 @@ async function main() {
             search.clear();
             currentData = await loadOntology(name);
             canvas.loadGraph(currentData);
-            search.setOntologyData(currentData);
+            search.setLearningGraphData(currentData);
         },
         onRename: async (oldName, newName) => {
             await renameOntology(oldName, newName);
@@ -132,7 +132,7 @@ async function main() {
             if (activeOntology === newName) {
                 currentData = await loadOntology(newName);
                 canvas.loadGraph(currentData);
-                search.setOntologyData(currentData);
+                search.setLearningGraphData(currentData);
             }
         },
     });
@@ -145,7 +145,7 @@ async function main() {
         sidebar.setActive(activeOntology);
         currentData = await loadOntology(activeOntology);
         canvas.loadGraph(currentData);
-        search.setOntologyData(currentData);
+        search.setLearningGraphData(currentData);
     }
     // Keyboard shortcut: / or Ctrl+K to focus search
     document.addEventListener("keydown", (e) => {
@@ -165,7 +165,7 @@ async function main() {
                 try {
                     currentData = await loadOntology(activeOntology);
                     canvas.loadGraph(currentData);
-                    search.setOntologyData(currentData);
+                    search.setLearningGraphData(currentData);
                 }
                 catch {
                     // Ontology may have been deleted

package/dist/search.d.ts

@@ -1,6 +1,6 @@
-import type { OntologyData } from "backpack-ontology";
+import type { LearningGraphData } from "backpack-ontology";
 export declare function initSearch(container: HTMLElement): {
-    setOntologyData(newData: OntologyData | null): void;
+    setLearningGraphData(newData: LearningGraphData | null): void;
     onFilterChange(cb: (ids: Set<string> | null) => void): void;
     onNodeSelect(cb: (nodeId: string) => void): void;
     clear(): void;

package/dist/search.js

@@ -209,7 +209,7 @@ export function initSearch(container) {
     });
     // --- Public API ---
     return {
-        setOntologyData(newData) {
+        setLearningGraphData(newData) {
             data = newData;
             input.value = "";
             results.classList.add("hidden");

package/dist/sidebar.d.ts

@@ -1,9 +1,9 @@
-import type { OntologySummary } from "backpack-ontology";
+import type { LearningGraphSummary } from "backpack-ontology";
 export interface SidebarCallbacks {
     onSelect: (name: string) => void;
     onRename?: (oldName: string, newName: string) => void;
 }
 export declare function initSidebar(container: HTMLElement, onSelectOrCallbacks: ((name: string) => void) | SidebarCallbacks): {
-    setSummaries(summaries: OntologySummary[]): void;
+    setSummaries(summaries: LearningGraphSummary[]): void;
     setActive(name: string): void;
 };

package/dist/style.css

@@ -313,12 +313,14 @@ body {
   flex: 1;
   position: relative;
   overflow: hidden;
+  touch-action: none;
 }
 
 #graph-canvas {
   position: absolute;
   top: 0;
   left: 0;
+  touch-action: none;
   width: 100%;
   height: 100%;
   cursor: grab;
@@ -950,3 +952,23 @@ body {
 .info-delete-node:hover {
   background: rgba(239, 68, 68, 0.1);
 }
+
+/* --- Mobile --- */
+
+@media (max-width: 768px) {
+  .info-panel {
+    top: auto;
+    bottom: 72px;
+    right: 8px;
+    left: 8px;
+    width: auto;
+    max-height: calc(100% - 200px);
+    overflow-y: auto;
+  }
+
+  .info-panel.info-panel-maximized {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "backpack-viewer",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Web-based graph visualizer for backpack-ontology — Canvas 2D, force-directed layout, live reload",
   "license": "Apache-2.0",
   "author": "Noah Irzinger",
@@ -23,7 +23,7 @@
     "release:major": "npm version major && git push && git push --tags"
   },
   "dependencies": {
-    "backpack-ontology": "^0.2.8"
+    "backpack-ontology": "^0.2.13"
   },
   "devDependencies": {
     "@types/node": "^25.5.0",

package/dist/app/assets/index-BgwF999-.js

@@ -1 +0,0 @@
-(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const d of document.querySelectorAll('link[rel="modulepreload"]'))t(d);new MutationObserver(d=>{for(const e of d)if(e.type==="childList")for(const i of e.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&t(i)}).observe(document,{childList:!0,subtree:!0});function o(d){const e={};return d.integrity&&(e.integrity=d.integrity),d.referrerPolicy&&(e.referrerPolicy=d.referrerPolicy),d.crossOrigin==="use-credentials"?e.credentials="include":d.crossOrigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function t(d){if(d.ep)return;d.ep=!0;const e=o(d);fetch(d.href,e)}})();async function ie(){const a=await fetch("/api/ontologies");return a.ok?a.json():[]}async function le(a){const n=await fetch(`/api/ontologies/${encodeURIComponent(a)}`);if(!n.ok)throw new Error(`Failed to load ontology: ${a}`);return n.json()}async function Se(a,n){if(!(await fetch(`/api/ontologies/${encodeURIComponent(a)}`,{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)})).ok)throw new Error(`Failed to save ontology: ${a}`)}async function Me(a,n){if(!(await fetch(`/api/ontologies/${encodeURIComponent(a)}/rename`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n})})).ok)throw new Error(`Failed to rename ontology: ${a}`)}function ke(a,n){const o=typeof n=="function"?{onSelect:n}:n,t=document.createElement("h2");t.textContent="Backpack Viewer";const d=document.createElement("input");d.type="text",d.placeholder="Filter...",d.id="filter";const e=document.createElement("ul");e.id="ontology-list";const i=document.createElement("div");i.className="sidebar-footer",i.innerHTML='<a href="mailto:support@backpackontology.com">support@backpackontology.com</a><span>Feedback & support</span>',a.appendChild(t),a.appendChild(d),a.appendChild(e),a.appendChild(i);let x=[],m="";return d.addEventListener("input",()=>{const f=d.value.toLowerCase();for(const h of x){const c=h.dataset.name??"";h.style.display=c.includes(f)?"":"none"}}),{setSummaries(f){e.innerHTML="",x=f.map(h=>{const c=document.createElement("li");c.className="ontology-item",c.dataset.name=h.name;const p=document.createElement("span");p.className="name",p.textContent=h.name;const N=document.createElement("span");if(N.className="stats",N.textContent=`${h.nodeCount} nodes, ${h.edgeCount} edges`,c.appendChild(p),c.appendChild(N),o.onRename){const O=document.createElement("button");O.className="sidebar-edit-btn",O.textContent="✎",O.title="Rename";const _=o.onRename;O.addEventListener("click",E=>{E.stopPropagation();const M=document.createElement("input");M.type="text",M.className="sidebar-rename-input",M.value=h.name,p.textContent="",p.appendChild(M),O.style.display="none",M.focus(),M.select();const r=()=>{const k=M.value.trim();k&&k!==h.name?_(h.name,k):(p.textContent=h.name,O.style.display="")};M.addEventListener("blur",r),M.addEventListener("keydown",k=>{k.key==="Enter"&&M.blur(),k.key==="Escape"&&(M.value=h.name,M.blur())})}),c.appendChild(O)}return c.addEventListener("click",()=>o.onSelect(h.name)),e.appendChild(c),c}),m&&this.setActive(m)},setActive(f){m=f;for(const h of x)h.classList.toggle("active",h.dataset.name===f)}}}const Ie=5e3,Ae=.005,ve=150,me=.9,fe=.01,he=30,de=50;function Te(a,n){for(const o of Object.values(a))if(typeof o=="string")return o;return n}function Oe(a){const n=Math.sqrt(a.nodes.length)*ve*.5,o=new Map,t=a.nodes.map((e,i)=>{const x=2*Math.PI*i/a.nodes.length,m={id:e.id,x:Math.cos(x)*n,y:Math.sin(x)*n,vx:0,vy:0,label:Te(e.properties,e.id),type:e.type};return o.set(e.id,m),m}),d=a.edges.map(e=>({sourceId:e.sourceId,targetId:e.targetId,type:e.type}));return{nodes:t,edges:d,nodeMap:o}}function De(a,n){const{nodes:o,edges:t,nodeMap:d}=a;for(let e=0;e<o.length;e++)for(let i=e+1;i<o.length;i++){const x=o[e],m=o[i];let f=m.x-x.x,h=m.y-x.y,c=Math.sqrt(f*f+h*h);c<he&&(c=he);const p=Ie*n/(c*c),N=f/c*p,O=h/c*p;x.vx-=N,x.vy-=O,m.vx+=N,m.vy+=O}for(const e of t){const i=d.get(e.sourceId),x=d.get(e.targetId);if(!i||!x)continue;const m=x.x-i.x,f=x.y-i.y,h=Math.sqrt(m*m+f*f);if(h===0)continue;const c=Ae*(h-ve)*n,p=m/h*c,N=f/h*c;i.vx+=p,i.vy+=N,x.vx-=p,x.vy-=N}for(const e of o)e.vx-=e.x*fe*n,e.vy-=e.y*fe*n;for(const e of o){e.vx*=me,e.vy*=me;const i=Math.sqrt(e.vx*e.vx+e.vy*e.vy);i>de&&(e.vx=e.vx/i*de,e.vy=e.vy/i*de),e.x+=e.vx,e.y+=e.vy}return n*.995}const ge=["#d4a27f","#c17856","#b07a5e","#d4956b","#a67c5a","#cc9e7c","#c4866a","#cb8e6c","#b8956e","#a88a70","#d9b08c","#c4a882","#e8b898","#b5927a","#a8886e","#d1a990"],ye=new Map;function ee(a){const n=ye.get(a);if(n)return n;let o=0;for(let d=0;d<a.length;d++)o=(o<<5)-o+a.charCodeAt(d)|0;const t=ge[Math.abs(o)%ge.length];return ye.set(a,t),t}function U(a){return getComputedStyle(document.documentElement).getPropertyValue(a).trim()}const Q=20,Pe=.001;function Be(a,n){const o=a.querySelector("canvas"),t=o.getContext("2d"),d=window.devicePixelRatio||1;let e={x:0,y:0,scale:1},i=null,x=1,m=0,f=new Set,h=null,c=null,p=null;const N=300;function O(){o.width=o.clientWidth*d,o.height=o.clientHeight*d,r()}const _=new ResizeObserver(O);_.observe(a),O();function E(s,l){return[s/e.scale+e.x,l/e.scale+e.y]}function M(s,l){if(!i)return null;const[u,C]=E(s,l);for(let y=i.nodes.length-1;y>=0;y--){const R=i.nodes[y],v=u-R.x,z=C-R.y;if(v*v+z*z<=Q*Q)return R}return null}function r(){if(!i){t.clearRect(0,0,o.width,o.height);return}const s=U("--canvas-edge"),l=U("--canvas-edge-highlight"),u=U("--canvas-edge-dim"),C=U("--canvas-edge-label"),y=U("--canvas-edge-label-highlight"),R=U("--canvas-edge-label-dim"),v=U("--canvas-arrow"),z=U("--canvas-arrow-highlight"),W=U("--canvas-node-label"),I=U("--canvas-node-label-dim"),G=U("--canvas-type-badge"),ne=U("--canvas-type-badge-dim"),be=U("--canvas-selection-border"),Le=U("--canvas-node-border");t.save(),t.setTransform(d,0,0,d,0,0),t.clearRect(0,0,o.clientWidth,o.clientHeight),t.save(),t.translate(-e.x*e.scale,-e.y*e.scale),t.scale(e.scale,e.scale);for(const D of i.edges){const V=i.nodeMap.get(D.sourceId),K=i.nodeMap.get(D.targetId);if(!V||!K)continue;const ce=h===null||h.has(D.sourceId),oe=h===null||h.has(D.targetId),te=ce&&oe;if(h!==null&&!ce&&!oe)continue;const J=f.size>0&&(f.has(D.sourceId)||f.has(D.targetId))||h!==null&&te,ue=h!==null&&!te;if(D.sourceId===D.targetId){S(V,D.type,J,s,l,C,y);continue}t.beginPath(),t.moveTo(V.x,V.y),t.lineTo(K.x,K.y),t.strokeStyle=J?l:ue?u:s,t.lineWidth=J?2.5:1.5,t.stroke(),k(V.x,V.y,K.x,K.y,J,v,z);const we=(V.x+K.x)/2,Ne=(V.y+K.y)/2;t.fillStyle=J?y:ue?R:C,t.font="9px system-ui, sans-serif",t.textAlign="center",t.textBaseline="bottom",t.fillText(D.type,we,Ne-4)}for(const D of i.nodes){const V=ee(D.type),K=f.has(D.id),ce=f.size>0&&i.edges.some(J=>f.has(J.sourceId)&&J.targetId===D.id||f.has(J.targetId)&&J.sourceId===D.id),oe=h!==null&&!h.has(D.id),te=oe||f.size>0&&!K&&!ce;K&&(t.save(),t.shadowColor=V,t.shadowBlur=20,t.beginPath(),t.arc(D.x,D.y,Q+3,0,Math.PI*2),t.fillStyle=V,t.globalAlpha=.3,t.fill(),t.restore()),t.beginPath(),t.arc(D.x,D.y,Q,0,Math.PI*2),t.fillStyle=V,t.globalAlpha=oe?.1:te?.3:1,t.fill(),t.strokeStyle=K?be:Le,t.lineWidth=K?3:1.5,t.stroke();const pe=D.label.length>24?D.label.slice(0,22)+"...":D.label;t.fillStyle=te?I:W,t.font="11px system-ui, sans-serif",t.textAlign="center",t.textBaseline="top",t.fillText(pe,D.x,D.y+Q+4),t.fillStyle=te?ne:G,t.font="9px system-ui, sans-serif",t.textBaseline="bottom",t.fillText(D.type,D.x,D.y-Q-3),t.globalAlpha=1}t.restore(),t.restore()}function k(s,l,u,C,y,R,v){const z=Math.atan2(C-l,u-s),W=u-Math.cos(z)*Q,I=C-Math.sin(z)*Q,G=8;t.beginPath(),t.moveTo(W,I),t.lineTo(W-G*Math.cos(z-.4),I-G*Math.sin(z-.4)),t.lineTo(W-G*Math.cos(z+.4),I-G*Math.sin(z+.4)),t.closePath(),t.fillStyle=y?v:R,t.fill()}function S(s,l,u,C,y,R,v){const z=s.x+Q+15,W=s.y-Q-15;t.beginPath(),t.arc(z,W,15,0,Math.PI*2),t.strokeStyle=u?y:C,t.lineWidth=u?2.5:1.5,t.stroke(),t.fillStyle=u?v:R,t.font="9px system-ui, sans-serif",t.textAlign="center",t.fillText(l,z,W-18)}function b(){if(!c||!p)return;const s=performance.now()-p.time,l=Math.min(s/N,1),u=1-Math.pow(1-l,3);e.x=p.x+(c.x-p.x)*u,e.y=p.y+(c.y-p.y)*u,r(),l<1?requestAnimationFrame(b):(c=null,p=null)}function P(){!i||x<Pe||(x=De(i,x),r(),m=requestAnimationFrame(P))}let $=!1,q=!1,F=0,j=0;o.addEventListener("mousedown",s=>{$=!0,q=!1,F=s.clientX,j=s.clientY}),o.addEventListener("mousemove",s=>{if(!$)return;const l=s.clientX-F,u=s.clientY-j;(Math.abs(l)>2||Math.abs(u)>2)&&(q=!0),e.x-=l/e.scale,e.y-=u/e.scale,F=s.clientX,j=s.clientY,r()}),o.addEventListener("mouseup",s=>{if($=!1,q)return;const l=o.getBoundingClientRect(),u=s.clientX-l.left,C=s.clientY-l.top,y=M(u,C),R=s.ctrlKey||s.metaKey;if(y){R?f.has(y.id)?f.delete(y.id):f.add(y.id):f.size===1&&f.has(y.id)?f.clear():(f.clear(),f.add(y.id));const v=[...f];n==null||n(v.length>0?v:null)}else f.clear(),n==null||n(null);r()}),o.addEventListener("mouseleave",()=>{$=!1}),o.addEventListener("wheel",s=>{s.preventDefault();const l=o.getBoundingClientRect(),u=s.clientX-l.left,C=s.clientY-l.top,[y,R]=E(u,C),v=s.ctrlKey?1-s.deltaY*.01:s.deltaY>0?.9:1.1;e.scale=Math.max(.05,Math.min(10,e.scale*v)),e.x=y-u/e.scale,e.y=R-C/e.scale,r()},{passive:!1});let H=[],T=0,B=1;o.addEventListener("touchstart",s=>{s.preventDefault(),H=Array.from(s.touches),H.length===2?(T=Y(H[0],H[1]),B=e.scale):H.length===1&&(F=H[0].clientX,j=H[0].clientY)},{passive:!1}),o.addEventListener("touchmove",s=>{s.preventDefault();const l=Array.from(s.touches);if(l.length===2&&H.length===2){const C=Y(l[0],l[1])/T;e.scale=Math.max(.05,Math.min(10,B*C)),r()}else if(l.length===1){const u=l[0].clientX-F,C=l[0].clientY-j;e.x-=u/e.scale,e.y-=C/e.scale,F=l[0].clientX,j=l[0].clientY,r()}H=l},{passive:!1});function Y(s,l){const u=s.clientX-l.clientX,C=s.clientY-l.clientY;return Math.sqrt(u*u+C*C)}const X=document.createElement("div");X.className="zoom-controls";const L=document.createElement("button");L.className="zoom-btn",L.textContent="+",L.title="Zoom in",L.addEventListener("click",()=>{const s=o.clientWidth/2,l=o.clientHeight/2,[u,C]=E(s,l);e.scale=Math.min(10,e.scale*1.3),e.x=u-s/e.scale,e.y=C-l/e.scale,r()});const A=document.createElement("button");A.className="zoom-btn",A.textContent="−",A.title="Zoom out",A.addEventListener("click",()=>{const s=o.clientWidth/2,l=o.clientHeight/2,[u,C]=E(s,l);e.scale=Math.max(.05,e.scale/1.3),e.x=u-s/e.scale,e.y=C-l/e.scale,r()});const g=document.createElement("button");return g.className="zoom-btn",g.textContent="○",g.title="Reset zoom",g.addEventListener("click",()=>{if(i){if(e={x:0,y:0,scale:1},i.nodes.length>0){let s=1/0,l=1/0,u=-1/0,C=-1/0;for(const v of i.nodes)v.x<s&&(s=v.x),v.y<l&&(l=v.y),v.x>u&&(u=v.x),v.y>C&&(C=v.y);const y=(s+u)/2,R=(l+C)/2;e.x=y-o.clientWidth/2,e.y=R-o.clientHeight/2}r()}}),X.appendChild(L),X.appendChild(g),X.appendChild(A),a.appendChild(X),{loadGraph(s){if(cancelAnimationFrame(m),i=Oe(s),x=1,f=new Set,h=null,e={x:0,y:0,scale:1},i.nodes.length>0){let l=1/0,u=1/0,C=-1/0,y=-1/0;for(const I of i.nodes)I.x<l&&(l=I.x),I.y<u&&(u=I.y),I.x>C&&(C=I.x),I.y>y&&(y=I.y);const R=(l+C)/2,v=(u+y)/2,z=o.clientWidth,W=o.clientHeight;e.x=R-z/2,e.y=v-W/2}P()},setFilteredNodeIds(s){h=s,r()},panToNode(s){if(!i)return;const l=i.nodeMap.get(s);if(!l)return;f=new Set([s]),n==null||n([s]);const u=o.clientWidth,C=o.clientHeight;p={x:e.x,y:e.y,time:performance.now()},c={x:l.x-u/(2*e.scale),y:l.y-C/(2*e.scale)},b()},destroy(){cancelAnimationFrame(m),_.disconnect()}}}function se(a){for(const n of Object.values(a.properties))if(typeof n=="string")return n;return a.id}const Re="✎";function ze(a,n,o){const t=document.createElement("div");t.id="info-panel",t.className="info-panel hidden",a.appendChild(t);let d=!1,e=[],i=-1,x=!1,m=null;function f(){t.classList.add("hidden"),t.classList.remove("info-panel-maximized"),t.innerHTML="",d=!1,e=[],i=-1}function h(E){!m||!o||(i<e.length-1&&(e=e.slice(0,i+1)),e.push(E),i=e.length-1,x=!0,o(E),x=!1)}function c(){i<=0||!m||!o||(i--,x=!0,o(e[i]),x=!1)}function p(){i>=e.length-1||!m||!o||(i++,x=!0,o(e[i]),x=!1)}function N(){const E=document.createElement("div");E.className="info-panel-toolbar";const M=document.createElement("button");M.className="info-toolbar-btn",M.textContent="←",M.title="Back",M.disabled=i<=0,M.addEventListener("click",c),E.appendChild(M);const r=document.createElement("button");r.className="info-toolbar-btn",r.textContent="→",r.title="Forward",r.disabled=i>=e.length-1,r.addEventListener("click",p),E.appendChild(r);const k=document.createElement("button");k.className="info-toolbar-btn",k.textContent=d?"⎘":"⛶",k.title=d?"Restore":"Maximize",k.addEventListener("click",()=>{d=!d,t.classList.toggle("info-panel-maximized",d),k.textContent=d?"⎘":"⛶",k.title=d?"Restore":"Maximize"}),E.appendChild(k);const S=document.createElement("button");return S.className="info-toolbar-btn info-close-btn",S.textContent="×",S.title="Close",S.addEventListener("click",f),E.appendChild(S),E}function O(E,M){const r=M.nodes.find(L=>L.id===E);if(!r)return;const k=M.edges.filter(L=>L.sourceId===E||L.targetId===E);t.innerHTML="",t.classList.remove("hidden"),d&&t.classList.add("info-panel-maximized"),t.appendChild(N());const S=document.createElement("div");S.className="info-header";const b=document.createElement("span");if(b.className="info-type-badge",b.textContent=r.type,b.style.backgroundColor=ee(r.type),n){b.classList.add("info-editable");const L=document.createElement("button");L.className="info-inline-edit",L.textContent=Re,L.addEventListener("click",A=>{A.stopPropagation();const g=document.createElement("input");g.type="text",g.className="info-edit-inline-input",g.value=r.type,b.textContent="",b.appendChild(g),g.focus(),g.select();const s=()=>{const l=g.value.trim();l&&l!==r.type?n.onChangeNodeType(E,l):(b.textContent=r.type,b.appendChild(L))};g.addEventListener("blur",s),g.addEventListener("keydown",l=>{l.key==="Enter"&&g.blur(),l.key==="Escape"&&(g.value=r.type,g.blur())})}),b.appendChild(L)}const P=document.createElement("h3");P.className="info-label",P.textContent=se(r);const $=document.createElement("span");$.className="info-id",$.textContent=r.id,S.appendChild(b),S.appendChild(P),S.appendChild($),t.appendChild(S);const q=Object.keys(r.properties),F=ae("Properties");if(q.length>0){const L=document.createElement("dl");L.className="info-props";for(const A of q){const g=document.createElement("dt");g.textContent=A;const s=document.createElement("dd");if(n){const l=re(r.properties[A]),u=document.createElement("input");u.type="text",u.className="info-edit-input",u.value=l,u.addEventListener("keydown",y=>{y.key==="Enter"&&u.blur()}),u.addEventListener("blur",()=>{const y=u.value;y!==l&&n.onUpdateNode(E,{[A]:$e(y)})}),s.appendChild(u);const C=document.createElement("button");C.className="info-delete-prop",C.textContent="×",C.title=`Remove ${A}`,C.addEventListener("click",()=>{const y={...r.properties};delete y[A],n.onUpdateNode(E,y)}),s.appendChild(C)}else s.appendChild(He(r.properties[A]));L.appendChild(g),L.appendChild(s)}F.appendChild(L)}if(n){const L=document.createElement("button");L.className="info-add-btn",L.textContent="+ Add property",L.addEventListener("click",()=>{const A=document.createElement("div");A.className="info-add-row";const g=document.createElement("input");g.type="text",g.className="info-edit-input",g.placeholder="key";const s=document.createElement("input");s.type="text",s.className="info-edit-input",s.placeholder="value";const l=document.createElement("button");l.className="info-add-save",l.textContent="Add",l.addEventListener("click",()=>{g.value&&n.onAddProperty(E,g.value,s.value)}),A.appendChild(g),A.appendChild(s),A.appendChild(l),F.appendChild(A),g.focus()}),F.appendChild(L)}if(t.appendChild(F),k.length>0){const L=ae(`Connections (${k.length})`),A=document.createElement("ul");A.className="info-connections";for(const g of k){const s=g.sourceId===E,l=s?g.targetId:g.sourceId,u=M.nodes.find(I=>I.id===l),C=u?se(u):l,y=document.createElement("li");if(y.className="info-connection",o&&u&&(y.classList.add("info-connection-link"),y.addEventListener("click",I=>{I.target.closest(".info-delete-edge")||h(l)})),u){const I=document.createElement("span");I.className="info-target-dot",I.style.backgroundColor=ee(u.type),y.appendChild(I)}const R=document.createElement("span");R.className="info-arrow",R.textContent=s?"→":"←";const v=document.createElement("span");v.className="info-edge-type",v.textContent=g.type;const z=document.createElement("span");z.className="info-target",z.textContent=C,y.appendChild(R),y.appendChild(v),y.appendChild(z);const W=Object.keys(g.properties);if(W.length>0){const I=document.createElement("div");I.className="info-edge-props";for(const G of W){const ne=document.createElement("span");ne.className="info-edge-prop",ne.textContent=`${G}: ${re(g.properties[G])}`,I.appendChild(ne)}y.appendChild(I)}if(n){const I=document.createElement("button");I.className="info-delete-edge",I.textContent="×",I.title="Remove connection",I.addEventListener("click",G=>{G.stopPropagation(),n.onDeleteEdge(g.id)}),y.appendChild(I)}A.appendChild(y)}L.appendChild(A),t.appendChild(L)}const j=ae("Timestamps"),H=document.createElement("dl");H.className="info-props";const T=document.createElement("dt");T.textContent="created";const B=document.createElement("dd");B.textContent=Ce(r.createdAt);const Y=document.createElement("dt");Y.textContent="updated";const X=document.createElement("dd");if(X.textContent=Ce(r.updatedAt),H.appendChild(T),H.appendChild(B),H.appendChild(Y),H.appendChild(X),j.appendChild(H),t.appendChild(j),n){const L=document.createElement("div");L.className="info-section info-danger";const A=document.createElement("button");A.className="info-delete-node",A.textContent="Delete node",A.addEventListener("click",()=>{n.onDeleteNode(E),f()}),L.appendChild(A),t.appendChild(L)}}function _(E,M){const r=new Set(E),k=M.nodes.filter(T=>r.has(T.id));if(k.length===0)return;const S=M.edges.filter(T=>r.has(T.sourceId)&&r.has(T.targetId));t.innerHTML="",t.classList.remove("hidden"),d&&t.classList.add("info-panel-maximized"),t.appendChild(N());const b=document.createElement("div");b.className="info-header";const P=document.createElement("h3");P.className="info-label",P.textContent=`${k.length} nodes selected`,b.appendChild(P);const $=document.createElement("div");$.style.cssText="display:flex;flex-wrap:wrap;gap:4px;margin-top:6px";const q=new Map;for(const T of k)q.set(T.type,(q.get(T.type)??0)+1);for(const[T,B]of q){const Y=document.createElement("span");Y.className="info-type-badge",Y.style.backgroundColor=ee(T),Y.textContent=B>1?`${T} (${B})`:T,$.appendChild(Y)}b.appendChild($),t.appendChild(b);const F=ae("Selected Nodes"),j=document.createElement("ul");j.className="info-connections";for(const T of k){const B=document.createElement("li");B.className="info-connection",o&&(B.classList.add("info-connection-link"),B.addEventListener("click",()=>{h(T.id)}));const Y=document.createElement("span");Y.className="info-target-dot",Y.style.backgroundColor=ee(T.type);const X=document.createElement("span");X.className="info-target",X.textContent=se(T);const L=document.createElement("span");L.className="info-edge-type",L.textContent=T.type,B.appendChild(Y),B.appendChild(X),B.appendChild(L),j.appendChild(B)}F.appendChild(j),t.appendChild(F);const H=ae(S.length>0?`Connections Between Selected (${S.length})`:"Connections Between Selected");if(S.length===0){const T=document.createElement("p");T.style.cssText="font-size:12px;color:var(--text-dim)",T.textContent="No direct connections between selected nodes",H.appendChild(T)}else{const T=document.createElement("ul");T.className="info-connections";for(const B of S){const Y=M.nodes.find(v=>v.id===B.sourceId),X=M.nodes.find(v=>v.id===B.targetId),L=Y?se(Y):B.sourceId,A=X?se(X):B.targetId,g=document.createElement("li");if(g.className="info-connection",Y){const v=document.createElement("span");v.className="info-target-dot",v.style.backgroundColor=ee(Y.type),g.appendChild(v)}const s=document.createElement("span");s.className="info-target",s.textContent=L;const l=document.createElement("span");l.className="info-arrow",l.textContent="→";const u=document.createElement("span");u.className="info-edge-type",u.textContent=B.type;const C=document.createElement("span");if(C.className="info-arrow",C.textContent="→",g.appendChild(s),g.appendChild(l),g.appendChild(u),g.appendChild(C),X){const v=document.createElement("span");v.className="info-target-dot",v.style.backgroundColor=ee(X.type),g.appendChild(v)}const y=document.createElement("span");y.className="info-target",y.textContent=A,g.appendChild(y);const R=Object.keys(B.properties);if(R.length>0){const v=document.createElement("div");v.className="info-edge-props";for(const z of R){const W=document.createElement("span");W.className="info-edge-prop",W.textContent=`${z}: ${re(B.properties[z])}`,v.appendChild(W)}g.appendChild(v)}T.appendChild(g)}H.appendChild(T)}t.appendChild(H)}return{show(E,M){if(m=M,E.length===1&&!x){const r=E[0];e[i]!==r&&(i<e.length-1&&(e=e.slice(0,i+1)),e.push(r),i=e.length-1)}E.length===1?O(E[0],M):E.length>1&&_(E,M)},hide:f,get visible(){return!t.classList.contains("hidden")}}}function ae(a){const n=document.createElement("div");n.className="info-section";const o=document.createElement("h4");return o.className="info-section-title",o.textContent=a,n.appendChild(o),n}function He(a){if(Array.isArray(a)){const o=document.createElement("div");o.className="info-array";for(const t of a){const d=document.createElement("span");d.className="info-tag",d.textContent=String(t),o.appendChild(d)}return o}if(a!==null&&typeof a=="object"){const o=document.createElement("pre");return o.className="info-json",o.textContent=JSON.stringify(a,null,2),o}const n=document.createElement("span");return n.className="info-value",n.textContent=String(a??""),n}function re(a){return Array.isArray(a)?a.map(String).join(", "):a!==null&&typeof a=="object"?JSON.stringify(a):String(a??"")}function $e(a){const n=a.trim();if(n==="true")return!0;if(n==="false")return!1;if(n!==""&&!isNaN(Number(n)))return Number(n);if(n.startsWith("[")&&n.endsWith("]")||n.startsWith("{")&&n.endsWith("}"))try{return JSON.parse(n)}catch{return a}return a}function Ce(a){try{return new Date(a).toLocaleString()}catch{return a}}function Ee(a){for(const n of Object.values(a.properties))if(typeof n=="string")return n;return a.id}function xe(a,n){const o=n.toLowerCase();if(Ee(a).toLowerCase().includes(o)||a.type.toLowerCase().includes(o))return!0;for(const t of Object.values(a.properties))if(typeof t=="string"&&t.toLowerCase().includes(o))return!0;return!1}function Ye(a){let n=null,o=null,t=null,d=new Set,e=null;const i=document.createElement("div");i.className="search-overlay hidden";const x=document.createElement("div");x.className="search-input-wrap";const m=document.createElement("input");m.className="search-input",m.type="text",m.placeholder="Search nodes...",m.setAttribute("autocomplete","off"),m.setAttribute("spellcheck","false");const f=document.createElement("kbd");f.className="search-kbd",f.textContent="/";const h=document.createElement("button");h.className="chip-toggle",h.setAttribute("aria-label","Toggle filter chips"),h.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>';let c=!1;h.addEventListener("click",()=>{c=!c,N.classList.toggle("hidden",!c),h.classList.toggle("active",c)}),x.appendChild(m),x.appendChild(f),x.appendChild(h);const p=document.createElement("ul");p.className="search-results hidden";const N=document.createElement("div");N.className="type-chips hidden",i.appendChild(x),i.appendChild(p),i.appendChild(N),a.appendChild(i);function O(){if(N.innerHTML="",!n)return;const r=new Map;for(const S of n.nodes)r.set(S.type,(r.get(S.type)??0)+1);const k=[...r.keys()].sort();d=new Set;for(const S of k){const b=document.createElement("button");b.className="type-chip",b.dataset.type=S;const P=document.createElement("span");P.className="type-chip-dot",P.style.backgroundColor=ee(S);const $=document.createElement("span");$.textContent=`${S} (${r.get(S)})`,b.appendChild(P),b.appendChild($),b.addEventListener("click",()=>{d.has(S)?(d.delete(S),b.classList.remove("active")):(d.add(S),b.classList.add("active")),E()}),N.appendChild(b)}}function _(){if(!n)return null;const r=m.value.trim(),k=d.size===0,S=r.length===0;if(S&&k)return null;const b=new Set;for(const P of n.nodes)!k&&!d.has(P.type)||(S||xe(P,r))&&b.add(P.id);return b}function E(){const r=_();o==null||o(r),M()}function M(){p.innerHTML="";const r=m.value.trim();if(!n||r.length===0){p.classList.add("hidden");return}const k=d.size===0,S=[];for(const b of n.nodes)if(!(!k&&!d.has(b.type))&&xe(b,r)&&(S.push(b),S.length>=8))break;if(S.length===0){p.classList.add("hidden");return}for(const b of S){const P=document.createElement("li");P.className="search-result-item";const $=document.createElement("span");$.className="search-result-dot",$.style.backgroundColor=ee(b.type);const q=document.createElement("span");q.className="search-result-label";const F=Ee(b);q.textContent=F.length>36?F.slice(0,34)+"...":F;const j=document.createElement("span");j.className="search-result-type",j.textContent=b.type,P.appendChild($),P.appendChild(q),P.appendChild(j),P.addEventListener("click",()=>{t==null||t(b.id),m.value="",p.classList.add("hidden"),E()}),p.appendChild(P)}p.classList.remove("hidden")}return m.addEventListener("input",()=>{e&&clearTimeout(e),e=setTimeout(E,150)}),m.addEventListener("keydown",r=>{if(r.key==="Escape")m.value="",m.blur(),p.classList.add("hidden"),E();else if(r.key==="Enter"){const k=p.querySelector(".search-result-item");k==null||k.click()}}),document.addEventListener("click",r=>{i.contains(r.target)||p.classList.add("hidden")}),m.addEventListener("focus",()=>f.classList.add("hidden")),m.addEventListener("blur",()=>{m.value.length===0&&f.classList.remove("hidden")}),{setOntologyData(r){n=r,m.value="",p.classList.add("hidden"),n&&n.nodes.length>0?(i.classList.remove("hidden"),O()):i.classList.add("hidden")},onFilterChange(r){o=r},onNodeSelect(r){t=r},clear(){m.value="",p.classList.add("hidden"),d.clear(),c=!1,N.classList.add("hidden"),h.classList.remove("active"),o==null||o(null)},focus(){m.focus()}}}let Z="",w=null;async function Fe(){const a=document.getElementById("canvas-container"),n=window.matchMedia("(prefers-color-scheme: dark)"),t=localStorage.getItem("backpack-theme")??(n.matches?"dark":"light");document.documentElement.setAttribute("data-theme",t);const d=document.createElement("button");d.className="theme-toggle",d.textContent=t==="light"?"☾":"☼",d.title="Toggle light/dark mode",d.addEventListener("click",()=>{const p=document.documentElement.getAttribute("data-theme")==="light"?"dark":"light";document.documentElement.setAttribute("data-theme",p),localStorage.setItem("backpack-theme",p),d.textContent=p==="light"?"☾":"☼"}),a.appendChild(d);async function e(){if(!Z||!w)return;w.metadata.updatedAt=new Date().toISOString(),await Se(Z,w),i.loadGraph(w),m.setOntologyData(w);const c=await ie();f.setSummaries(c)}let i;const x=ze(a,{onUpdateNode(c,p){if(!w)return;const N=w.nodes.find(O=>O.id===c);N&&(N.properties={...N.properties,...p},N.updatedAt=new Date().toISOString(),e().then(()=>x.show([c],w)))},onChangeNodeType(c,p){if(!w)return;const N=w.nodes.find(O=>O.id===c);N&&(N.type=p,N.updatedAt=new Date().toISOString(),e().then(()=>x.show([c],w)))},onDeleteNode(c){w&&(w.nodes=w.nodes.filter(p=>p.id!==c),w.edges=w.edges.filter(p=>p.sourceId!==c&&p.targetId!==c),e())},onDeleteEdge(c){var N;if(!w)return;const p=(N=w.edges.find(O=>O.id===c))==null?void 0:N.sourceId;w.edges=w.edges.filter(O=>O.id!==c),e().then(()=>{p&&w&&x.show([p],w)})},onAddProperty(c,p,N){if(!w)return;const O=w.nodes.find(_=>_.id===c);O&&(O.properties[p]=N,O.updatedAt=new Date().toISOString(),e().then(()=>x.show([c],w)))}},c=>{i.panToNode(c)});i=Be(a,c=>{c&&c.length>0&&w?x.show(c,w):x.hide()});const m=Ye(a);m.onFilterChange(c=>{i.setFilteredNodeIds(c)}),m.onNodeSelect(c=>{i.panToNode(c),w&&x.show([c],w)});const f=ke(document.getElementById("sidebar"),{onSelect:async c=>{Z=c,f.setActive(c),x.hide(),m.clear(),w=await le(c),i.loadGraph(w),m.setOntologyData(w)},onRename:async(c,p)=>{await Me(c,p),Z===c&&(Z=p);const N=await ie();f.setSummaries(N),f.setActive(Z),Z===p&&(w=await le(p),i.loadGraph(w),m.setOntologyData(w))}}),h=await ie();f.setSummaries(h),h.length>0&&(Z=h[0].name,f.setActive(Z),w=await le(Z),i.loadGraph(w),m.setOntologyData(w)),document.addEventListener("keydown",c=>{c.target instanceof HTMLInputElement||c.target instanceof HTMLTextAreaElement||(c.key==="/"||c.key==="k"&&(c.metaKey||c.ctrlKey))&&(c.preventDefault(),m.focus())})}Fe();

package/dist/app/assets/index-Cdb7srBF.css

@@ -1 +0,0 @@
-*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #141414;--bg-surface: #1a1a1a;--bg-hover: #222222;--bg-active: #2a2a2a;--bg-elevated: #1e1e1e;--bg-inset: #111111;--border: #2a2a2a;--text: #d4d4d4;--text-strong: #e5e5e5;--text-muted: #737373;--text-dim: #525252;--accent: #d4a27f;--accent-hover: #e8b898;--badge-text: #141414;--glass-bg: rgba(20, 20, 20, .85);--glass-border: rgba(255, 255, 255, .08);--chip-bg: rgba(42, 42, 42, .7);--chip-bg-active: rgba(42, 42, 42, .9);--chip-bg-hover: rgba(50, 50, 50, .9);--chip-border-active: rgba(255, 255, 255, .06);--shadow: rgba(0, 0, 0, .6);--shadow-strong: rgba(0, 0, 0, .5);--canvas-edge: rgba(255, 255, 255, .08);--canvas-edge-highlight: rgba(212, 162, 127, .5);--canvas-edge-dim: rgba(255, 255, 255, .03);--canvas-edge-label: rgba(255, 255, 255, .2);--canvas-edge-label-highlight: rgba(212, 162, 127, .7);--canvas-edge-label-dim: rgba(255, 255, 255, .05);--canvas-arrow: rgba(255, 255, 255, .12);--canvas-arrow-highlight: rgba(212, 162, 127, .5);--canvas-node-label: #a3a3a3;--canvas-node-label-dim: rgba(212, 212, 212, .2);--canvas-type-badge: rgba(115, 115, 115, .5);--canvas-type-badge-dim: rgba(115, 115, 115, .15);--canvas-selection-border: #d4d4d4;--canvas-node-border: rgba(255, 255, 255, .15)}[data-theme=light]{--bg: #f5f5f4;--bg-surface: #fafaf9;--bg-hover: #f0efee;--bg-active: #e7e5e4;--bg-elevated: #f0efee;--bg-inset: #e7e5e4;--border: #d6d3d1;--text: #292524;--text-strong: #1c1917;--text-muted: #78716c;--text-dim: #a8a29e;--accent: #c17856;--accent-hover: #b07a5e;--badge-text: #fafaf9;--glass-bg: rgba(250, 250, 249, .85);--glass-border: rgba(0, 0, 0, .08);--chip-bg: rgba(214, 211, 209, .5);--chip-bg-active: rgba(214, 211, 209, .8);--chip-bg-hover: rgba(200, 197, 195, .8);--chip-border-active: rgba(0, 0, 0, .08);--shadow: rgba(0, 0, 0, .1);--shadow-strong: rgba(0, 0, 0, .15);--canvas-edge: rgba(0, 0, 0, .1);--canvas-edge-highlight: rgba(193, 120, 86, .6);--canvas-edge-dim: rgba(0, 0, 0, .03);--canvas-edge-label: rgba(0, 0, 0, .25);--canvas-edge-label-highlight: rgba(193, 120, 86, .8);--canvas-edge-label-dim: rgba(0, 0, 0, .06);--canvas-arrow: rgba(0, 0, 0, .15);--canvas-arrow-highlight: rgba(193, 120, 86, .6);--canvas-node-label: #57534e;--canvas-node-label-dim: rgba(87, 83, 78, .2);--canvas-type-badge: rgba(87, 83, 78, .5);--canvas-type-badge-dim: rgba(87, 83, 78, .15);--canvas-selection-border: #292524;--canvas-node-border: rgba(0, 0, 0, .1)}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;height:100vh;width:100vw}#sidebar{width:280px;min-width:280px;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px;overflow-y:auto}#sidebar h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:14px}#sidebar input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:13px;outline:none;margin-bottom:12px}#sidebar input:focus{border-color:var(--accent)}#sidebar input::placeholder{color:var(--text-dim)}#ontology-list{list-style:none;display:flex;flex-direction:column;gap:2px}.ontology-item{padding:10px 12px;border-radius:6px;cursor:pointer;transition:background .15s}.ontology-item:hover{background:var(--bg-hover)}.ontology-item.active{background:var(--bg-active)}.ontology-item .name{display:block;font-size:13px;font-weight:500;color:var(--text)}.ontology-item .stats{display:block;font-size:11px;color:var(--text-dim);margin-top:2px}.sidebar-edit-btn{position:absolute;right:8px;top:10px;background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;opacity:0;transition:opacity .1s}.ontology-item{position:relative}.ontology-item:hover .sidebar-edit-btn{opacity:.7}.sidebar-edit-btn:hover{opacity:1!important;color:var(--text)}.sidebar-rename-input{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--text);font:inherit;font-size:13px;font-weight:500;outline:none;width:100%;padding:0}.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);text-align:center}.sidebar-footer a{display:block;font-size:12px;font-weight:500;color:var(--accent);text-decoration:none;margin-bottom:4px}.sidebar-footer a:hover{color:var(--accent-hover)}.sidebar-footer span{display:block;font-size:10px;color:var(--text-dim)}.theme-toggle{position:absolute;top:16px;right:16px;z-index:30;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;transition:color .15s,border-color .15s,background .15s;box-shadow:0 2px 8px var(--shadow)}.theme-toggle:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}.zoom-controls{position:absolute;top:16px;right:16px;z-index:30;display:flex;gap:4px;transition:right .2s ease}.theme-toggle~.zoom-controls{right:58px}.zoom-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:18px;cursor:pointer;padding:6px 10px;line-height:1;transition:color .15s,border-color .15s,background .15s;box-shadow:0 2px 8px var(--shadow)}.zoom-btn:hover{color:var(--text);border-color:var(--text-muted);background:var(--bg-hover)}#canvas-container{flex:1;position:relative;overflow:hidden}#graph-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:grab}#graph-canvas:active{cursor:grabbing}.search-overlay{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;max-height:calc(100vh - 48px);pointer-events:none}.search-overlay>*{pointer-events:auto}.search-overlay.hidden{display:none}.search-input-wrap{position:relative;display:flex;align-items:center;gap:6px;width:380px;max-width:calc(100vw - 340px)}.search-input{flex:1;min-width:0;padding:10px 36px 10px 16px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:#d4a27f66;box-shadow:0 0 0 3px #d4a27f1a}.search-input::placeholder{color:var(--text-dim)}.search-kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);padding:2px 7px;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface);color:var(--text-dim);font-size:11px;font-family:monospace;pointer-events:none}.search-kbd.hidden{display:none}.search-results{list-style:none;width:380px;max-width:calc(100vw - 340px);background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 8px 32px var(--shadow-strong)}.search-results.hidden{display:none}.search-result-item{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;transition:background .1s}.search-result-item:hover{background:var(--bg-hover)}.search-result-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.search-result-label{font-size:13px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-type{font-size:11px;color:var(--text-dim);flex-shrink:0}.chip-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-dim);cursor:pointer;transition:border-color .15s,color .15s;pointer-events:auto}.chip-toggle:hover{border-color:#d4a27f4d;color:var(--text)}.chip-toggle.active{border-color:#d4a27f66;color:var(--accent)}.type-chips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:500px;max-height:200px;overflow-y:auto;padding:4px;border-radius:10px}.type-chips.hidden{display:none}.type-chip{display:flex;align-items:center;gap:4px;padding:3px 10px;border:1px solid transparent;border-radius:12px;background:var(--chip-bg);color:var(--text-dim);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}.type-chip.active{background:var(--chip-bg-active);color:var(--text-muted);border-color:var(--chip-border-active)}.type-chip:hover{background:var(--chip-bg-hover)}.type-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.type-chip:not(.active) .type-chip-dot{opacity:.3}.info-panel{position:absolute;top:56px;right:16px;width:360px;max-height:calc(100vh - 72px);background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;overflow-y:auto;padding:20px;z-index:10;box-shadow:0 8px 32px var(--shadow);transition:top .25s ease,right .25s ease,bottom .25s ease,left .25s ease,width .25s ease,max-height .25s ease,border-radius .25s ease}.info-panel.hidden{display:none}.info-panel.info-panel-maximized{top:0;right:0;bottom:0;left:0;width:auto;max-height:none;border-radius:0;z-index:40}.info-panel-toolbar{position:absolute;top:12px;right:14px;display:flex;align-items:center;gap:2px;z-index:1}.info-toolbar-btn{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 6px;line-height:1;border-radius:4px;transition:color .15s,background .15s}.info-toolbar-btn:hover:not(:disabled){color:var(--text);background:var(--bg-hover)}.info-toolbar-btn:disabled{color:var(--text-dim);cursor:default;opacity:.3}.info-close-btn{font-size:20px}.info-connection-link{cursor:pointer;transition:background .15s}.info-connection-link:hover{background:var(--bg-active)}.info-connection-link .info-target{color:var(--accent);text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s}.info-connection-link:hover .info-target{text-decoration-color:var(--accent)}.info-header{margin-bottom:16px}.info-type-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;color:var(--badge-text);margin-bottom:8px}.info-label{font-size:18px;font-weight:600;color:var(--text-strong);margin-bottom:4px;word-break:break-word}.info-id{display:block;font-size:11px;color:var(--text-dim);font-family:monospace}.info-section{margin-bottom:16px}.info-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border)}.info-props{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.info-props dt{font-size:12px;color:var(--text-muted);padding-top:2px}.info-props dd{font-size:12px;color:var(--text);word-break:break-word;display:flex;align-items:center;gap:4px}.info-value{white-space:pre-wrap}.info-array{display:flex;flex-wrap:wrap;gap:4px}.info-tag{display:inline-block;padding:2px 8px;background:var(--bg-hover);border-radius:4px;font-size:11px;color:var(--text-muted)}.info-json{font-size:11px;font-family:monospace;color:var(--text-muted);background:var(--bg-inset);padding:6px 8px;border-radius:4px;overflow-x:auto;white-space:pre}.info-connections{list-style:none;display:flex;flex-direction:column;gap:6px}.info-connection{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-elevated);border-radius:6px;font-size:12px;flex-wrap:wrap}.info-target-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.info-arrow{color:var(--text-dim);font-size:14px;flex-shrink:0}.info-edge-type{color:var(--text-muted);font-size:11px;font-weight:500}.info-target{color:var(--text);font-weight:500}.info-edge-props{width:100%;padding-top:4px;padding-left:20px}.info-edge-prop{display:block;font-size:11px;color:var(--text-dim)}.info-editable{cursor:default;position:relative}.info-inline-edit{background:none;border:none;color:var(--badge-text);opacity:0;font-size:10px;cursor:pointer;margin-left:4px;transition:opacity .15s}.info-editable:hover .info-inline-edit{opacity:.8}.info-inline-edit:hover{opacity:1!important}.info-edit-inline-input{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--badge-text);font:inherit;font-size:inherit;outline:none;width:100%;padding:0}.info-edit-input{background:var(--bg-inset);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:12px;color:var(--text);flex:1;min-width:0}.info-edit-input:focus{outline:none;border-color:var(--accent)}.info-delete-prop{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;padding:0 2px;flex-shrink:0;opacity:0;transition:opacity .1s,color .1s}.info-props dd:hover .info-delete-prop{opacity:1}.info-delete-prop:hover{color:#ef4444}.info-add-btn{background:none;border:1px dashed var(--border);border-radius:4px;padding:6px 10px;font-size:12px;color:var(--text-dim);cursor:pointer;width:100%;margin-top:8px;transition:border-color .15s,color .15s}.info-add-btn:hover{border-color:var(--accent);color:var(--text)}.info-add-row{display:flex;gap:4px;margin-top:6px}.info-add-save{background:var(--accent);border:none;border-radius:4px;padding:3px 10px;font-size:12px;color:var(--badge-text);cursor:pointer;flex-shrink:0}.info-add-save:hover{background:var(--accent-hover)}.info-delete-edge{background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;margin-left:auto;padding:0 2px;opacity:0;transition:opacity .1s,color .1s}.info-connection:hover .info-delete-edge{opacity:1}.info-delete-edge:hover{color:#ef4444}.info-danger{margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}.info-delete-node{background:none;border:1px solid rgba(239,68,68,.3);border-radius:6px;padding:6px 12px;font-size:12px;color:#ef4444;cursor:pointer;width:100%;transition:background .15s}.info-delete-node:hover{background:#ef44441a}