granite-mem 0.1.8 → 0.1.9

package/dist/public/graph-engine.js

@@ -0,0 +1,102 @@
+"use strict";(()=>{(function(){const nt={};nt.detectCommunities=function(c,n){const R={};for(const a of c)R[a.slug]=[];for(const a of n)R[a.source].push(a.target),R[a.target].push(a.source);const t={};for(const a of c)t[a.slug]=a.community||a.slug;for(let a=0;a<20;a++){let A=0;const f=c.map(l=>l.slug).sort(()=>Math.random()-.5);for(const l of f){const x=R[l];if(!x.length)continue;const W={};for(const T of x)W[t[T]]=(W[t[T]]||0)+1;let P=t[l],z=-1;for(const[T,_]of Object.entries(W))(_>z||_===z&&T<P)&&(P=T,z=_);P!==t[l]&&(t[l]=P,A++)}if(A===0)break}const h=new Map,C=[],O={};for(const a of Object.keys(t)){const A=t[a];h.has(A)||(h.set(A,h.size),C.push(0));const f=h.get(A);O[a]=f,C[f]++}const U=[],M=h.size,g=137.508;for(let a=0;a<M;a++){const A=(a*g+24)%360,f=70+a*13%26,l=48+a*17%22;U.push(ft(A/360,f/100,l/100))}return{communityOf:O,sizes:C,K:M,palette:U}};function ft(k,c,n){let R,t,h;if(c===0)R=t=h=n;else{const C=(M,g,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<.16666666666666666?M+(g-M)*6*a:a<.5?g:a<.6666666666666666?M+(g-M)*(.6666666666666666-a)*6:M),O=n<.5?n*(1+c):n+c-n*c,U=2*n-O;R=C(U,O,k+1/3),t=C(U,O,k),h=C(U,O,k-1/3)}return[R,t,h]}function J(k,c,n,R){this.x=k,this.y=c,this.w=n,this.h=R,this.mass=0,this.cx=0,this.cy=0,this.node=null,this.children=null}J.prototype.insert=function(c){if(this.mass+=1,this.cx+=c.x,this.cy+=c.y,!this.children&&this.node===null){this.node=c;return}if(!(!this.children&&this.w<1)){if(!this.children){const n=this.w/2,R=this.h/2;this.children=[new J(this.x,this.y,n,R),new J(this.x+n,this.y,n,R),new J(this.x,this.y+R,n,R),new J(this.x+n,this.y+R,n,R)];const t=this.node;this.node=null,this._insertIntoChild(t)}this._insertIntoChild(c)}},J.prototype._insertIntoChild=function(k){const c=this.w/2,n=this.h/2,R=k.x<this.x+c?0:1,t=k.y<this.y+n?0:1;this.children[t*2+R].insert(k)},nt.createSimulation=function(c,n,R=2e3,t=1400,h={}){const{communityOf:C,sizes:O,K:U,palette:M}=nt.detectCommunities(c,n),g=c.length,a=new Float32Array(g),A=new Float32Array(g),f=new Float32Array(g),l=new Float32Array(g),x=new Int32Array(g),W=new Int32Array(g),P=new Float32Array(g),z=new Float32Array(g),T=new Array(g),_={};for(let o=0;o<g;o++)T[o]=c[o].slug,_[c[o].slug]=o,x[o]=C[c[o].slug]??0;const it=o=>{let d=0;for(let p=0;p<o.length;p++)d=d*31+o.charCodeAt(p)|0;return Math.abs(d)},G=new Int32Array(n.length),V=new Int32Array(n.length),tt=new Float32Array(n.length),Z=new Uint8Array(n.length);for(let o=0;o<n.length;o++)G[o]=_[n[o].source],V[o]=_[n[o].target],tt[o]=1,Z[o]=x[G[o]]===x[V[o]]?1:0,W[G[o]]++,W[V[o]]++;const rt=[];for(let o=0;o<U;o++){const d=o/U*Math.PI*2;rt.push({x:R/2+Math.cos(d)*R*.28,y:t/2+Math.sin(d)*t*.28*.85})}for(let o=0;o<g;o++){const d=rt[x[o]],p=it(T[o]),w=40+p%200,F=p%360*Math.PI/180,m=(o*2654435761>>>0)/4294967295-.5,X=(o*40503>>>0)/4294967295-.5;a[o]=d.x+Math.cos(F)*w+m*8,A[o]=d.y+Math.sin(F)*w+X*8,P[o]=2.5+Math.min(14,Math.sqrt(W[o])*2.2),z[o]=1}const r={n:g,x:a,y:A,vx:f,vy:l,community:x,degree:W,radius:P,alpha:z,slugOf:T,idxOf:_,links:n,linkA:G,linkB:V,linkW:tt,linkIntra:Z,W:R,H:t,palette:M,K:U,communityOf:C,repel:h.repel??120,linkStrength:h.linkStrength??.015,linkDistance:h.linkDistance??55,bridgeMult:1.6,centerK:.004,damping:.86,theta:.9,cooling:1,coolTarget:.35,coolRate:.012,hoverX:null,hoverY:null,hoverR:120,hoverStrength:0,pinnedIdx:-1,pinX:0,pinY:0,active:-1};let et=null;return r.step=function(d){r.cooling=Math.max(r.coolTarget,r.cooling-r.coolRate);const p=r.cooling;if(p===0&&r.pinnedIdx<0)return;let w=1/0,F=-1/0,m=1/0,X=-1/0;for(let e=0;e<g;e++)a[e]<w&&(w=a[e]),a[e]>F&&(F=a[e]),A[e]<m&&(m=A[e]),A[e]>X&&(X=A[e]);const q=50,Q=F-w+q*2,$=X-m+q*2,at=Math.max(Q,$,100);et=new J(w-q,m-q,at,at);for(let e=0;e<g;e++)et.insert({x:a[e],y:A[e],i:e});const D=r.theta,ct=r.repel;for(let e=0;e<g;e++){let i=0,v=0;const y=[et];for(;y.length;){const u=y.pop();if(!u||u.mass===0)continue;const Y=u.cx/u.mass,N=u.cy/u.mass,E=a[e]-Y,I=A[e]-N,H=E*E+I*I+.01;if(u.node){if(u.node.i===e)continue;const B=ct/H;i+=E*B,v+=I*B}else if(u.children)if(u.w/Math.sqrt(H)<D){const B=ct*u.mass/H;i+=E*B,v+=I*B}else for(const B of u.children)y.push(B)}f[e]+=i*p,l[e]+=v*p}const s=r.linkStrength,b=r.linkDistance;for(let e=0;e<G.length;e++){const i=G[e],v=V[e],y=a[v]-a[i],u=A[v]-A[i],Y=Math.sqrt(y*y+u*u)+.01,N=Z[e]?b:b*1.8,E=Z[e]?s:s*r.bridgeMult,I=(Y-N)*E*tt[e],H=y/Y*I,B=u/Y*I;f[i]+=H*p,l[i]+=B*p,f[v]-=H*p,l[v]-=B*p}const K=R/2,S=t/2,L=r.centerK*p;for(let e=0;e<g;e++)f[e]+=(K-a[e])*L,l[e]+=(S-A[e])*L;if(r.hoverX!==null&&r.hoverStrength>0){const e=r.hoverR,i=e*e;for(let v=0;v<g;v++){const y=a[v]-r.hoverX,u=A[v]-r.hoverY,Y=y*y+u*u;if(Y<i){const N=Math.sqrt(Y)+.1,E=1-N/e,I=r.hoverStrength*E*E;f[v]+=y/N*I,l[v]+=u/N*I}}}r.pinnedIdx>=0&&(a[r.pinnedIdx]=r.pinX,A[r.pinnedIdx]=r.pinY,f[r.pinnedIdx]=0,l[r.pinnedIdx]=0);const ot=r.damping;for(let e=0;e<g;e++){f[e]*=ot,l[e]*=ot;const i=f[e]*f[e]+l[e]*l[e];if(i>400){const v=20/Math.sqrt(i);f[e]*=v,l[e]*=v}a[e]+=f[e],A[e]+=l[e]}},r.setHover=function(o,d,p=600){r.hoverX=o,r.hoverY=d,r.hoverStrength=p},r.clearHover=function(){r.hoverX=null,r.hoverStrength=0},r.setActive=function(o){r.active=o?_[o]??-1:-1},r.prebake=function(d=180){const p=r.cooling;r.cooling=1;for(let w=0;w<d;w++)r.step(1/60);r.cooling=p},r.freeze=function(){r.cooling=0,r.coolTarget=0;for(let d=0;d<g;d++)f[d]=0,l[d]=0},r.nudge=function(d=.35){r.coolTarget=0,r.cooling=Math.min(1,r.cooling+d)},r.edgeAlpha=1,r.pickNode=function(o,d,p=0){let w=-1,F=1/0;for(let m=0;m<g;m++){const X=o-a[m],q=d-A[m],Q=X*X+q*q,$=P[m]+6+p;Q<$*$&&Q<F&&(w=m,F=Q)}return w},r},nt.createRenderer=function(c,n,R={}){const t=c.getContext("webgl",{antialias:!0,alpha:!0,premultipliedAlpha:!1});if(!t)throw new Error("WebGL not supported");const h={tx:0,ty:0,k:1};let C=window.devicePixelRatio||1;function O(){C=window.devicePixelRatio||1;const s=c.getBoundingClientRect();c.width=Math.floor(s.width*C),c.height=Math.floor(s.height*C),t.viewport(0,0,c.width,c.height)}O();const U=`
+      attribute vec2 aCorner;
+      attribute vec2 aPos;
+      attribute float aRadius;
+      attribute vec3 aColor;
+      attribute float aAlpha;
+      attribute float aState;   // 0=normal, 1=active, 2=hop1, 3=hop2, 4=dim
+      uniform vec2 uResolution;
+      uniform vec2 uTranslate;
+      uniform float uScale;
+      varying vec2 vCorner;
+      varying vec3 vColor;
+      varying float vAlpha;
+      varying float vState;
+      varying float vRadius;
+      void main() {
+        // Scale factor \u2014 active/hop1 get a halo extension
+        float extend = 6.0;
+        if (aState < 0.5) extend = 4.0;
+        else if (aState < 1.5) extend = 10.0;  // active
+        else if (aState < 2.5) extend = 7.0;   // hop1
+        float r = (aRadius + extend) * uScale;
+        vec2 world = aPos + uTranslate;
+        vec2 px = world * uScale;
+        vec2 corner = aCorner * r;
+        vec2 screen = px + corner;
+        vec2 clip = screen / uResolution * 2.0 - 1.0;
+        clip.y = -clip.y;
+        gl_Position = vec4(clip, 0.0, 1.0);
+        vCorner = aCorner;
+        vColor = aColor;
+        vAlpha = aAlpha;
+        vState = aState;
+        vRadius = aRadius * uScale;
+      }
+    `,M=`
+      precision mediump float;
+      varying vec2 vCorner;
+      varying vec3 vColor;
+      varying float vAlpha;
+      varying float vState;
+      varying float vRadius;
+      void main() {
+        float d = length(vCorner);              // 0..~1 at corner
+        // inner disk
+        float rNorm = 1.0;
+        // Use vRadius vs. the pixel position: we want the disk at d < (r / r_ext)
+        // Since we built the quad at (r+extend), the disk sits at d < r/(r+extend)
+        float extend = 4.0;
+        if (vState >= 0.5 && vState < 1.5) extend = 10.0;
+        else if (vState >= 1.5 && vState < 2.5) extend = 7.0;
+        float diskEdge = vRadius / (vRadius + extend);
+
+        // Disk
+        float disk = smoothstep(diskEdge + 0.02, diskEdge - 0.02, d);
+
+        // Highlight inside (top-left)
+        vec2 hl = vCorner - vec2(-0.28, -0.28);
+        float highlight = (1.0 - smoothstep(0.0, 0.55, length(hl))) * disk * 0.32;
+
+        // Outer glow \u2014 strong, so each node broadcasts its community hue.
+        float glow = (1.0 - smoothstep(diskEdge, 1.0, d)) * 0.95;
+
+        // Active pulse ring
+        float pulse = 0.0;
+        if (vState >= 0.5 && vState < 1.5) {
+          float ring = smoothstep(diskEdge + 0.03, diskEdge + 0.06, d) * (1.0 - smoothstep(diskEdge + 0.06, diskEdge + 0.12, d));
+          pulse = ring * 0.8;
+        }
+
+        vec3 base = vColor;
+        vec3 col = base * (disk * 1.0) + vec3(highlight) + base * glow * 0.5 + vec3(pulse);
+        float alpha = (disk + glow * 0.55 + pulse) * vAlpha;
+        if (alpha < 0.003) discard;
+        gl_FragColor = vec4(col, alpha);
+      }
+    `,g=`
+      attribute vec2 aPos;  // endpoint position (0 or 1 along the edge)
+      attribute vec2 aA;
+      attribute vec2 aB;
+      attribute vec3 aColor;
+      attribute float aAlpha;
+      uniform vec2 uResolution;
+      uniform vec2 uTranslate;
+      uniform float uScale;
+      varying vec3 vColor;
+      varying float vAlpha;
+      void main() {
+        vec2 world = mix(aA, aB, aPos.x) + uTranslate;
+        vec2 px = world * uScale;
+        vec2 clip = px / uResolution * 2.0 - 1.0;
+        clip.y = -clip.y;
+        gl_Position = vec4(clip, 0.0, 1.0);
+        vColor = aColor;
+        vAlpha = aAlpha;
+      }
+    `,a=`
+      precision mediump float;
+      varying vec3 vColor;
+      varying float vAlpha;
+      void main() { gl_FragColor = vec4(vColor, vAlpha); }
+    `;function A(s,b){const K=(L,ot)=>{const e=t.createShader(L);if(t.shaderSource(e,ot),t.compileShader(e),!t.getShaderParameter(e,t.COMPILE_STATUS))throw new Error(t.getShaderInfoLog(e));return e},S=t.createProgram();if(t.attachShader(S,K(t.VERTEX_SHADER,s)),t.attachShader(S,K(t.FRAGMENT_SHADER,b)),t.linkProgram(S),!t.getProgramParameter(S,t.LINK_STATUS))throw new Error(t.getProgramInfoLog(S));return S}const f=A(U,M),l=A(g,a),x=n.n,W=new Float32Array([-1,-1,1,-1,1,1,-1,-1,1,1,-1,1]),P=new Float32Array(x*6*2);for(let s=0;s<x;s++)for(let b=0;b<6;b++)P[(s*6+b)*2]=W[b*2],P[(s*6+b)*2+1]=W[b*2+1];const z=new Float32Array(x*6*2),T=new Float32Array(x*6),_=new Float32Array(x*6*3),it=new Float32Array(x*6),G=new Float32Array(x*6),V=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,V),t.bufferData(t.ARRAY_BUFFER,P,t.STATIC_DRAW);const tt=t.createBuffer(),Z=t.createBuffer(),rt=t.createBuffer(),r=t.createBuffer(),et=t.createBuffer(),o=n.links.length,d=new Float32Array(o*2*2);for(let s=0;s<o;s++)d[s*4+0]=0,d[s*4+1]=0,d[s*4+2]=1,d[s*4+3]=0;const p=new Float32Array(o*2*2),w=new Float32Array(o*2*2),F=new Float32Array(o*2*3),m=new Float32Array(o*2),X=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,X),t.bufferData(t.ARRAY_BUFFER,d,t.STATIC_DRAW);const q=t.createBuffer(),Q=t.createBuffer(),$=t.createBuffer(),at=t.createBuffer();function D(s,b,K,S){const L=t.getAttribLocation(s,b);L<0||(t.bindBuffer(t.ARRAY_BUFFER,K),t.enableVertexAttribArray(L),t.vertexAttribPointer(L,S,t.FLOAT,!1,0,0))}return t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),{view:h,setView(s){Object.assign(h,s)},resize:O,hops:{hop1:new Set,hop2:new Set},setHops(s){this.hops=s},hovered:-1,setHovered(s){this.hovered=s},draw(s=0){const b=c.width,K=c.height;t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT);const S=n.active,L=this.hops.hop1,ot=this.hops.hop2;for(let i=0;i<o;i++){const v=n.linkA[i],y=n.linkB[i],u=n.x[v],Y=n.y[v],N=n.x[y],E=n.y[y];p[i*4+0]=u,p[i*4+1]=Y,p[i*4+2]=u,p[i*4+3]=Y,w[i*4+0]=N,w[i*4+1]=E,w[i*4+2]=N,w[i*4+3]=E;const[I,H,B]=n.palette[n.community[v]],[j,ht,ut]=n.palette[n.community[y]];let st=n.linkIntra[i]?.38:.035;S>=0&&(v===S||y===S?st=.95:L.has(n.slugOf[v])&&L.has(n.slugOf[y])?st=.18:st=0);const lt=st*(n.edgeAlpha??1);m[i*2]=lt,m[i*2+1]=lt,F[i*6+0]=I,F[i*6+1]=H,F[i*6+2]=B,F[i*6+3]=j,F[i*6+4]=ht,F[i*6+5]=ut}t.useProgram(l),t.uniform2f(t.getUniformLocation(l,"uResolution"),b,K),t.uniform2f(t.getUniformLocation(l,"uTranslate"),h.tx,h.ty),t.uniform1f(t.getUniformLocation(l,"uScale"),h.k*C),D(l,"aPos",X,2),t.bindBuffer(t.ARRAY_BUFFER,q),t.bufferData(t.ARRAY_BUFFER,p,t.DYNAMIC_DRAW),D(l,"aA",q,2),t.bindBuffer(t.ARRAY_BUFFER,Q),t.bufferData(t.ARRAY_BUFFER,w,t.DYNAMIC_DRAW),D(l,"aB",Q,2),t.bindBuffer(t.ARRAY_BUFFER,$),t.bufferData(t.ARRAY_BUFFER,F,t.DYNAMIC_DRAW),D(l,"aColor",$,3),t.bindBuffer(t.ARRAY_BUFFER,at),t.bufferData(t.ARRAY_BUFFER,m,t.DYNAMIC_DRAW),D(l,"aAlpha",at,1),t.drawArrays(t.LINES,0,o*2);const e=.6+.4*Math.sin(s*3.4);for(let i=0;i<x;i++){const v=n.slugOf[i];let y=0,u=S<0?1:.25;i===S?(y=1,u=1):L.has(v)?(y=2,u=1):ot.has(v)?(y=3,u=.75):S>=0&&(y=4,u=.25),i===this.hovered&&(y=2,u=1);const[Y,N,E]=n.palette[n.community[i]],I=n.alpha[i],H=u*I;for(let B=0;B<6;B++){const j=i*6+B;z[j*2]=n.x[i],z[j*2+1]=n.y[i],T[j]=n.radius[i],_[j*3]=Y,_[j*3+1]=N,_[j*3+2]=E,it[j]=H,G[j]=y}}t.useProgram(f),t.uniform2f(t.getUniformLocation(f,"uResolution"),b,K),t.uniform2f(t.getUniformLocation(f,"uTranslate"),h.tx,h.ty),t.uniform1f(t.getUniformLocation(f,"uScale"),h.k*C),D(f,"aCorner",V,2),t.bindBuffer(t.ARRAY_BUFFER,tt),t.bufferData(t.ARRAY_BUFFER,z,t.DYNAMIC_DRAW),D(f,"aPos",tt,2),t.bindBuffer(t.ARRAY_BUFFER,Z),t.bufferData(t.ARRAY_BUFFER,T,t.DYNAMIC_DRAW),D(f,"aRadius",Z,1),t.bindBuffer(t.ARRAY_BUFFER,rt),t.bufferData(t.ARRAY_BUFFER,_,t.DYNAMIC_DRAW),D(f,"aColor",rt,3),t.bindBuffer(t.ARRAY_BUFFER,r),t.bufferData(t.ARRAY_BUFFER,it,t.DYNAMIC_DRAW),D(f,"aAlpha",r,1),t.bindBuffer(t.ARRAY_BUFFER,et),t.bufferData(t.ARRAY_BUFFER,G,t.DYNAMIC_DRAW),D(f,"aState",et,1),t.drawArrays(t.TRIANGLES,0,x*6)},screenToWorld(s,b){return{x:s/h.k-h.tx,y:b/h.k-h.ty}},worldToScreen(s,b){return{x:(s+h.tx)*h.k,y:(b+h.ty)*h.k}}}},window.GraphEngine=nt})();})();

package/dist/public/index.html

@@ -3,168 +3,146 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Granite</title>
+  <title>Granite — Constellation</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <!-- Preload the three weights that paint above-the-fold content so titles
+       don't flash from Georgia to Fraunces after boot. -->
+  <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2">
+  <link rel="preload" as="font" type="font/woff2" crossorigin
+        href="https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2">
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
 </head>
 <body>
-  <div id="app">
-    <!-- Command bar overlay -->
-    <div id="command-bar-overlay" class="overlay hidden" role="dialog" aria-label="Search" aria-modal="true">
-      <div id="command-bar">
-        <div class="command-input-wrap">
-          <svg class="command-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-            <circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/>
+  <div class="dirA" id="root">
+
+    <!-- Top bar -->
+    <header class="dirA-topbar">
+      <div class="dirA-brand" role="banner">
+        <div class="dirA-brand-mark" aria-hidden="true">
+          <svg width="22" height="22" viewBox="0 0 24 24">
+            <rect x="3" y="3"  width="8" height="8" rx="1.6" fill="currentColor"/>
+            <rect x="13" y="3" width="8" height="8" rx="1.6" fill="currentColor" opacity="0.55"/>
+            <rect x="3" y="13" width="8" height="8" rx="1.6" fill="currentColor" opacity="0.35"/>
+            <rect x="13" y="13" width="8" height="8" rx="1.6" fill="currentColor" opacity="0.8"/>
           </svg>
-          <input type="text" id="command-input" placeholder="Search notes..." autocomplete="off" spellcheck="false" aria-label="Search notes" role="combobox" aria-expanded="false" aria-controls="command-results" aria-autocomplete="list">
-          <kbd class="command-kbd">esc</kbd>
         </div>
-        <div id="command-results" role="listbox" aria-label="Search results" aria-live="polite"></div>
+        <div>
+          <div class="dirA-brand-name">Granite</div>
+          <div class="dirA-brand-sub">Constellation · live</div>
+        </div>
       </div>
+      <button class="dirA-search" id="search-trigger" type="button" aria-label="Open search (⌘K)">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/>
+        </svg>
+        <span class="dirA-search-text">Search the vault…</span>
+        <span class="kbd">⌘K</span>
+      </button>
+      <div class="dirA-filters" id="type-filters" role="tablist" aria-label="Filter by note type"></div>
+    </header>
+
+    <!-- Title + subtitle -->
+    <div class="dirA-title">
+      <div class="eyebrow">Knowledge constellation · live physics</div>
+      <h1>Your vault,<br><em>in motion.</em></h1>
+      <div class="sub" id="dirA-sub">Booting the physics engine…</div>
     </div>
 
-    <!-- Create note overlay -->
-    <div id="create-overlay" class="overlay hidden" role="dialog" aria-label="Create note" aria-modal="true">
-      <div id="create-dialog">
-        <div class="create-header">
-          <span>New note</span>
-          <button id="create-close" class="icon-btn" title="Close">
-            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>
-          </button>
-        </div>
-        <div class="create-fields">
-          <div class="field-row">
-            <label for="create-type">Type</label>
-            <select id="create-type"></select>
-          </div>
-          <div class="field-row">
-            <label for="create-title">Title</label>
-            <input type="text" id="create-title" placeholder="Note title" autocomplete="off" spellcheck="false" required maxlength="200">
-          </div>
-          <div class="field-row field-grow">
-            <label for="create-body">Content</label>
-            <textarea id="create-body" placeholder="Start writing..." spellcheck="false"></textarea>
-          </div>
-        </div>
-        <button id="create-submit">Create</button>
-      </div>
+    <!-- Pulse stats -->
+    <div class="dirA-pulse" id="dirA-pulse">
+      <div class="dirA-pulse-stat"><div class="label">Notes</div><div class="value" id="stat-notes">—</div></div>
+      <div class="dirA-pulse-stat"><div class="label">Edges</div><div class="value" id="stat-edges">—</div></div>
+      <div class="dirA-pulse-stat"><div class="label">Communities</div><div class="value" id="stat-communities">—</div></div>
+      <div class="dirA-pulse-stat"><div class="label">Density</div><div class="value" id="stat-density">—</div></div>
     </div>
 
-    <!-- Mobile header -->
-    <header id="mobile-header">
-      <button id="mobile-menu" class="icon-btn" aria-label="Open navigation">
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 5h12M3 9h12M3 13h12"/></svg>
-      </button>
-      <span class="mobile-brand">Granite</span>
-      <button id="mobile-search" class="icon-btn" aria-label="Search">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/></svg>
-      </button>
-    </header>
+    <!-- Graph stage — WebGL canvas + label overlay -->
+    <div class="dirA-stage webgl" id="stage">
+      <canvas id="graph-canvas" class="dirA-canvas"></canvas>
+      <div id="graph-labels" class="dirA-labels"></div>
+    </div>
 
-    <!-- Nav backdrop (mobile) -->
-    <div id="nav-backdrop" class="hidden"></div>
+    <!-- Zoom control -->
+    <div class="dirA-zoom" id="zoom-control">
+      <button id="zoom-out" title="Zoom out" type="button">−</button>
+      <span class="zoom-val" id="zoom-val">100%</span>
+      <button id="zoom-in" title="Zoom in" type="button">+</button>
+      <button id="zoom-reset" title="Reset view" type="button" style="font-size:0.64rem">⟲</button>
+    </div>
 
-    <!-- Navigation -->
-    <nav id="nav">
-      <div class="nav-brand">
-        <svg width="16" height="16" viewBox="0 0 18 18" fill="none">
-          <rect x="1" y="1" width="6" height="6" rx="1.5" fill="currentColor" opacity="0.9"/>
-          <rect x="11" y="1" width="6" height="6" rx="1.5" fill="currentColor" opacity="0.45"/>
-          <rect x="1" y="11" width="6" height="6" rx="1.5" fill="currentColor" opacity="0.45"/>
-          <rect x="11" y="11" width="6" height="6" rx="1.5" fill="currentColor" opacity="0.2"/>
-        </svg>
-        <span>Granite</span>
-      </div>
-      <div class="nav-actions">
-        <button id="nav-search" class="nav-btn" title="Search (⌘K)">
-          <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-            <circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/>
-          </svg>
-          <span>Search</span>
-          <kbd>⌘K</kbd>
-        </button>
-        <button id="nav-new" class="nav-btn" title="New note (⌘N)">
-          <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-            <path d="M8 3v10M3 8h10"/>
-          </svg>
-          <span>New</span>
-        </button>
-        <button id="nav-graph" class="nav-btn" title="Graph (⌘G)">
-          <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-            <circle cx="4" cy="4" r="2"/><circle cx="12" cy="4" r="2"/><circle cx="8" cy="13" r="2"/>
-            <path d="M5.5 5.5L7 11M10.5 5.5L9 11M6 4h4"/>
+    <!-- Empty-state hint (shown when no reader open) -->
+    <div class="dirA-empty-hint" id="empty-hint">
+      <h3>Select a star</h3>
+      <p>Click any node to open. Drag to pull it around, scroll to zoom, use arrow keys to step through neighbours.</p>
+    </div>
+
+    <!-- Reader — hidden until a note is active -->
+    <aside class="dirA-reader" id="reader" hidden>
+      <div class="dirA-reader-progress" id="reader-progress"></div>
+      <div class="dirA-reader-resizer" id="reader-resizer"></div>
+      <div class="dirA-reader-chrome">
+        <nav class="dirA-reader-breadcrumb" id="reader-breadcrumb">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/>
           </svg>
-          <span>Graph</span>
-        </button>
-      </div>
-      <div id="nav-note-list">
-        <div id="type-filters">
-          <button class="type-pill active" data-type="">All</button>
+        </nav>
+        <div class="dirA-reader-nav">
+          <button class="dirA-nav-btn" id="reader-prev" type="button" title="Previous neighbour (←)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
+          </button>
+          <button class="dirA-nav-btn" id="reader-next" type="button" title="Next neighbour (→)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
+          </button>
+          <button class="dirA-nav-btn close" id="reader-close" type="button" title="Close (Esc)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 6-12 12"/><path d="m6 6 12 12"/></svg>
+          </button>
         </div>
-        <div id="note-list" role="list" aria-label="Notes"></div>
       </div>
-    </nav>
 
-    <!-- Main content -->
-    <main id="main">
-      <!-- Note view -->
-      <div id="note-view">
-        <div id="note-scroll">
-          <article id="note-article">
-            <div id="note-type-line"></div>
-            <h1 id="note-title"></h1>
-            <div id="note-meta">
-              <span id="note-date"></span>
-              <div id="note-tags"></div>
-            </div>
-            <div id="note-body"></div>
-            <section id="backlinks">
-              <div class="backlinks-label">
-                <span id="backlinks-count">0</span> references
-              </div>
-              <div id="backlinks-list"></div>
-            </section>
-          </article>
-        </div>
+      <div class="dirA-reader-body" id="reader-body">
+        <div class="dirA-reader-kicker" id="reader-kicker"></div>
+        <h1 class="dirA-reader-title" id="reader-title"></h1>
+        <p class="dirA-reader-deck" id="reader-deck"></p>
+        <div class="dirA-reader-metaline" id="reader-metaline"></div>
+        <div class="dirA-reader-article" id="reader-article"></div>
+        <div class="dirA-links-grid" id="reader-links"></div>
       </div>
+    </aside>
 
-      <!-- Graph view -->
-      <div id="graph-view" class="hidden">
-        <canvas id="graph-canvas" aria-label="Knowledge graph visualization"></canvas>
-        <div id="graph-tooltip"></div>
-      </div>
+    <!-- Footer hints -->
+    <footer class="dirA-footer">
+      <span><span class="kbd">⌘K</span>search</span>
+      <span class="sep"></span>
+      <span><span class="kbd">←</span><span class="kbd">→</span>traverse</span>
+      <span class="sep"></span>
+      <span><span class="kbd">Esc</span>close</span>
+      <span class="sep"></span>
+      <span>drag node · hover parts crowd · scroll zoom</span>
+    </footer>
+
+    <!-- Wikilink hover preview -->
+    <div class="wl-preview" id="wikilink-preview" hidden aria-hidden="true"></div>
 
-      <!-- Empty state -->
-      <div id="empty-state">
-        <div class="empty-glyph">
-          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-            <circle cx="14" cy="14" r="3" stroke="currentColor" stroke-width="1" opacity="0.2"/>
-            <circle cx="34" cy="14" r="3" stroke="currentColor" stroke-width="1" opacity="0.2"/>
-            <circle cx="24" cy="36" r="3" stroke="currentColor" stroke-width="1" opacity="0.2"/>
-            <path d="M16.5 16.5L22 32M31.5 16.5L26 32M18 14h12" stroke="currentColor" stroke-width="0.75" opacity="0.12" stroke-dasharray="3 4"/>
+    <!-- ⌘K command palette overlay -->
+    <div id="command-bar-overlay" class="overlay hidden" role="dialog" aria-label="Search" aria-modal="true">
+      <div id="command-bar">
+        <div class="command-input-wrap">
+          <svg class="command-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/>
           </svg>
+          <input type="text" id="command-input" placeholder="Search notes…" autocomplete="off" spellcheck="false" aria-label="Search notes" role="combobox" aria-expanded="false" aria-controls="command-results" aria-autocomplete="list">
+          <kbd class="command-kbd">esc</kbd>
         </div>
-        <p class="empty-title">Select a note to begin</p>
-        <p class="empty-shortcuts"><kbd>⌘K</kbd> search <span class="dot"></span> <kbd>⌘N</kbd> new <span class="dot"></span> <kbd>⌘G</kbd> graph</p>
+        <div id="command-results" role="listbox" aria-label="Search results" aria-live="polite"></div>
       </div>
-    </main>
-  </div>
-
-  <!-- Wikilink preview popup -->
-  <div id="wikilink-preview">
-    <div class="preview-type"></div>
-    <div class="preview-title"></div>
-    <div class="preview-snippet"></div>
-    <div class="preview-tags"></div>
+    </div>
   </div>
 
-  <!-- Grain overlay -->
-  <canvas id="grain" aria-hidden="true"></canvas>
-
+  <script src="/graph-engine.js"></script>
   <script src="/markdown-renderer.js"></script>
-  <script src="/graph.js"></script>
   <script src="/app.js"></script>
 </body>
 </html>

package/dist/public/markdown-renderer.js

@@ -1,187 +1 @@
-/**
- * Granite — HTML Markdown Renderer
- *
- * Converts markdown + wikilinks to semantic HTML.
- * Supports: headings, lists, blockquotes, code, tables, inline formatting, wikilinks.
- */
-const MarkdownRenderer = (() => {
-
-  function parseInline(text, outgoingLinks) {
-    const re = /(\[\[([^\]]+)\]\])|(`([^`]+)`)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(\[([^\]]+)\]\(([^)]+)\))/g;
-    let result = '';
-    let lastIndex = 0;
-    let match;
-
-    while ((match = re.exec(text)) !== null) {
-      if (match.index > lastIndex) result += escapeHtml(text.slice(lastIndex, match.index));
-
-      if (match[1]) {
-        const inner = match[2];
-        const parts = inner.split('|');
-        const target = parts[0].trim();
-        const display = parts.length > 1 ? parts[1].trim() : target;
-        const linkInfo = outgoingLinks?.find(l => l.target === target);
-        const resolved = linkInfo?.resolved ?? false;
-        const slug = linkInfo?.resolved_slug || null;
-        if (resolved && slug) {
-          result += `<a class="wikilink" data-slug="${escapeAttr(slug)}" href="#" role="link">${escapeHtml(display)}</a>`;
-        } else {
-          result += `<span class="wikilink-broken">${escapeHtml(display)}</span>`;
-        }
-      } else if (match[3]) {
-        result += `<code class="inline-code">${escapeHtml(match[4])}</code>`;
-      } else if (match[5]) {
-        result += `<strong>${escapeHtml(match[6])}</strong>`;
-      } else if (match[7]) {
-        result += `<em>${escapeHtml(match[8])}</em>`;
-      } else if (match[9]) {
-        result += `<a class="external-link" href="${escapeAttr(match[11])}" target="_blank" rel="noopener">${escapeHtml(match[10])}</a>`;
-      }
-      lastIndex = match.index + match[0].length;
-    }
-    if (lastIndex < text.length) result += escapeHtml(text.slice(lastIndex));
-    return result;
-  }
-
-  function render(body, outgoingLinks) {
-    const lines = body.split('\n');
-    const blocks = [];
-    let inCodeBlock = false;
-    let codeBuffer = [];
-    let codeLang = '';
-    let inList = false;
-    let listType = null;
-    let listItems = [];
-
-    function flushList() {
-      if (listItems.length > 0) {
-        const tag = listType === 'ol' ? 'ol' : 'ul';
-        blocks.push(`<${tag} class="md-list">${listItems.join('')}</${tag}>`);
-        listItems = [];
-        inList = false;
-        listType = null;
-      }
-    }
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-
-      // Code block
-      if (line.startsWith('```')) {
-        if (inCodeBlock) {
-          const langLabel = codeLang ? `<span class="code-lang">${escapeHtml(codeLang)}</span>` : '';
-          blocks.push(`<div class="code-block">${langLabel}<pre><code>${escapeHtml(codeBuffer.join('\n'))}</code></pre></div>`);
-          codeBuffer = [];
-          inCodeBlock = false;
-        } else {
-          flushList();
-          inCodeBlock = true;
-          codeLang = line.slice(3).trim();
-        }
-        continue;
-      }
-      if (inCodeBlock) { codeBuffer.push(line); continue; }
-
-      // Blank line
-      if (line.trim() === '') { flushList(); continue; }
-
-      // Table detection: line starts with |
-      if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
-        flushList();
-        const tableLines = [];
-        let j = i;
-        while (j < lines.length && lines[j].trim().startsWith('|') && lines[j].trim().endsWith('|')) {
-          tableLines.push(lines[j]);
-          j++;
-        }
-        if (tableLines.length >= 2) {
-          blocks.push(renderTable(tableLines, outgoingLinks));
-          i = j - 1;
-          continue;
-        }
-      }
-
-      // Headings
-      const hMatch = line.match(/^(#{1,3})\s+(.+)/);
-      if (hMatch) {
-        flushList();
-        const level = hMatch[1].length;
-        blocks.push(`<h${level} class="md-h${level}">${parseInline(hMatch[2], outgoingLinks)}</h${level}>`);
-        continue;
-      }
-
-      // HR
-      if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
-        flushList();
-        blocks.push('<hr class="md-hr">');
-        continue;
-      }
-
-      // Blockquote
-      if (line.startsWith('>')) {
-        flushList();
-        const text = line.replace(/^>\s?/, '');
-        blocks.push(`<blockquote class="md-blockquote">${parseInline(text, outgoingLinks)}</blockquote>`);
-        continue;
-      }
-
-      // Unordered list
-      const bulletMatch = line.match(/^(\s*)[*\-+]\s+(.+)/);
-      if (bulletMatch) {
-        if (listType !== 'ul') flushList();
-        inList = true;
-        listType = 'ul';
-        listItems.push(`<li>${parseInline(bulletMatch[2], outgoingLinks)}</li>`);
-        continue;
-      }
-
-      // Ordered list
-      const numMatch = line.match(/^(\s*)\d+\.\s+(.+)/);
-      if (numMatch) {
-        if (listType !== 'ol') flushList();
-        inList = true;
-        listType = 'ol';
-        listItems.push(`<li>${parseInline(numMatch[2], outgoingLinks)}</li>`);
-        continue;
-      }
-
-      // Paragraph
-      flushList();
-      blocks.push(`<p class="md-body">${parseInline(line, outgoingLinks)}</p>`);
-    }
-
-    flushList();
-    if (inCodeBlock && codeBuffer.length > 0) {
-      blocks.push(`<div class="code-block"><pre><code>${escapeHtml(codeBuffer.join('\n'))}</code></pre></div>`);
-    }
-    return blocks.join('\n');
-  }
-
-  function renderTable(tableLines, outgoingLinks) {
-    const parseRow = (line) => line.trim().replace(/^\||\|$/g, '').split('|').map(cell => cell.trim());
-    const headers = parseRow(tableLines[0]);
-    // Skip separator row (index 1)
-    const rows = tableLines.slice(2).map(parseRow);
-
-    let html = '<div class="md-table-wrap"><table class="md-table"><thead><tr>';
-    for (const h of headers) html += `<th>${parseInline(h, outgoingLinks)}</th>`;
-    html += '</tr></thead><tbody>';
-    for (const row of rows) {
-      html += '<tr>';
-      for (const cell of row) html += `<td>${parseInline(cell, outgoingLinks)}</td>`;
-      html += '</tr>';
-    }
-    html += '</tbody></table></div>';
-    return html;
-  }
-
-  function escapeHtml(str) {
-    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-  }
-
-  function escapeAttr(str) {
-    return str.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-  }
-
-  return { render, parseInline, escapeHtml };
-})();
+"use strict";(()=>{})();