okf 1.10.0 → 1.11.0

data/lib/okf/render/graph/template.html.erb

@@ -120,6 +120,15 @@
   font:inherit;font-size:13px;padding:0 10px;outline:none;transition:border-color .15s,box-shadow .15s}
  .field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .field::placeholder{color:var(--muted)}
+ /* iOS Safari zooms the page whenever a focused control is under 16px, and it
+    never zooms back out — so every `/` left the reader pinching. 16px is the
+    whole fix; `maximum-scale=1` would also stop it and is the wrong trade, since
+    it takes pinch-zoom away from everyone to spare one gesture.
+    Both conditions, because neither covers the other: a phone is narrow, and a
+    tablet in landscape is not — but it still zooms. Desktop keeps 13px. */
+ @media (max-width:768px),(pointer:coarse){
+  .field{font-size:16px}
+ }
  .search{position:relative;display:flex;align-items:center;flex:1 1 320px;min-width:130px;max-width:520px}
  .search svg{position:absolute;left:11px;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;pointer-events:none}
  .search input{width:100%;padding-left:33px;padding-right:52px}
@@ -154,6 +163,12 @@
  .sb-act kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--faint);
   border:1px solid var(--line);border-radius:4px;padding:1px 4px;background:var(--panel);line-height:1.3}
  .selwrap{position:relative;display:inline-flex;flex:none}
+ /* `display:inline-flex` above outranks the [hidden] attribute's own
+    display:none, so the depth select would sit in the bar unclustered. */
+ .selwrap[hidden]{display:none}
+ /* the depth control is a single digit — sized to its content, not to the
+    layout select beside it */
+ #cluster-depth{padding-right:26px;min-width:0}
  .selwrap::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
  select.field{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer}
  select.field:disabled{opacity:.45;cursor:not-allowed}
@@ -285,6 +300,7 @@
  .ws-pill.def{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent}
  .ws-meta{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted);margin-top:3px;flex-wrap:wrap}
  .ws-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint)}
+ .ws-where{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint)}
  .ws-health.ok{color:var(--ok)} .ws-health.warn{color:var(--warn)}
  .ws-health.error,.ws-health.missing{color:var(--accent-ink)}
  .ws-slug-edit{height:24px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;padding:0 7px;width:150px;border-radius:6px}
@@ -405,7 +421,7 @@
  #sw-input{width:100%;box-sizing:border-box}
  #sw-list{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow:auto}
  #sw-list a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
- #sw-list a .slug{margin-left:auto;color:var(--faint);font-size:12px}
+ #sw-list a .slug,#sw-list a .sw-where{margin-left:auto;color:var(--faint);font-size:12px}
  #sw-list .sw-grp{margin:9px 0 3px;padding:0 10px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
  #sw-list .sw-grp:first-child{margin-top:0}
  /* Under a hub a view is the sideline, so it sits at the muted weight until the
@@ -891,8 +907,9 @@
     </select></span>
     <button class="btn" id="btn-fit" type="button" aria-label="Fit graph to screen" title="Fit graph to screen">
      <svg viewBox="0 0 24 24"><path d="M3 9V6a2 2 0 0 1 2-2h3M21 9V6a2 2 0 0 0-2-2h-3M3 15v3a2 2 0 0 0 2 2h3M21 15v3a2 2 0 0 0-2 2h-3"/><rect x="9.5" y="9.5" width="5" height="5" rx="1"/></svg></button>
-    <button class="btn" id="btn-cluster" type="button" aria-label="Cluster by area" aria-pressed="false" title="Cluster nodes by area">
+    <button class="btn" id="btn-cluster" type="button" aria-label="Cluster by directory" aria-pressed="false" title="Cluster by directory — each cluster is a directory of concepts">
      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="4" opacity=".45"/><circle cx="9" cy="9" r="1.9" fill="currentColor" stroke="none"/><circle cx="15" cy="10" r="1.9" fill="currentColor" stroke="none"/><circle cx="11" cy="15" r="1.9" fill="currentColor" stroke="none"/></svg></button>
+    <span class="selwrap" id="cluster-depth-wrap" hidden><select id="cluster-depth" class="field" aria-label="Cluster depth" title="How many directory levels to nest"></select></span>
     <button class="btn" id="btn-tree" type="button" aria-label="File tree" aria-pressed="false" title="File tree: folders and files, parent-to-child edges only">
      <svg viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="5" rx="1.2"/><rect x="3" y="16" width="6" height="5" rx="1.2"/><rect x="15" y="16" width="6" height="5" rx="1.2"/><path d="M12 8v4M12 12H6v4M12 12h6v4"/></svg></button>
     <button class="btn" id="btn-ix" type="button" aria-label="Show indexes" aria-pressed="false" title="Draw the index.md map layer alongside the concepts">
@@ -916,9 +933,9 @@
         <button class="btn" id="filters-close" type="button" aria-label="Close filters" style="width:28px;height:28px"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
        <div class="fbody">
         <label class="search" style="max-width:none;margin-bottom:12px"><svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
-         <input id="filter-search" class="field" placeholder="find a type, area, tag…" autocomplete="off" aria-label="Find a filter"></label>
+         <input id="filter-search" class="field" placeholder="find a type, dir, tag…" autocomplete="off" aria-label="Find a filter"></label>
         <div class="fgroup"><h4>Types</h4><div class="fchips" id="ftypes"></div></div>
-        <div class="fgroup"><h4>Areas</h4><div class="fchips" id="fareas"></div></div>
+        <div class="fgroup"><h4>Dirs</h4><div class="fchips" id="fdirs"></div></div>
         <div class="fgroup"><h4>Tags</h4><div class="fchips" id="ftags"></div></div>
        </div>
       </aside>
@@ -965,7 +982,7 @@
       <label class="search" style="max-width:none;margin-bottom:12px"><svg viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        <input id="cat-filter-search" class="field" placeholder="find a type, area, tag…" autocomplete="off"></label>
       <div class="fgroup"><h4>Types</h4><div class="fchips" id="cat-ftypes"></div></div>
-      <div class="fgroup"><h4>Areas</h4><div class="fchips" id="cat-fareas"></div></div>
+      <div class="fgroup"><h4>Dirs</h4><div class="fchips" id="cat-fdirs"></div></div>
       <div class="fgroup"><h4>Tags</h4><div class="fchips" id="cat-ftags"></div></div>
      </div>
     </aside>
@@ -1008,7 +1025,7 @@
       <button class="btn" id="tag-filters-close" type="button" aria-label="Close filters" style="width:28px;height:28px"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
      <div class="fbody">
       <div class="fgroup"><h4>Types</h4><div class="fchips" id="tag-ftypes"></div></div>
-      <div class="fgroup"><h4>Areas</h4><div class="fchips" id="tag-fareas"></div></div>
+      <div class="fgroup"><h4>Dirs</h4><div class="fchips" id="tag-fdirs"></div></div>
      </div>
     </aside>
    </section>
@@ -1020,7 +1037,7 @@
      <div class="stat-grid" id="stat-grid"></div>
      <div class="two">
       <div><div class="shead"><h2>By type</h2></div><div class="bars" id="bars-type"></div></div>
-      <div><div class="shead"><h2>By area</h2></div><div class="bars" id="bars-area"></div></div>
+      <div><div class="shead"><h2>By dir</h2></div><div class="bars" id="bars-dir"></div></div>
      </div>
     </div>
    </section>
@@ -1098,7 +1115,7 @@
      Mermaid (lazy)                fullscreen diagram viewer
      inspector                     drag-resize splitters
      graph filters                 layout
-     cluster by area               file-tree mode
+     cluster by directory          file-tree mode
      the authored layer            fit to screen
      view switching                full-text search
      catalog                       files
@@ -1115,7 +1132,7 @@
    1. `applyGraphFilter()` is the shared sink. The search box, the three chip
       groups in the slide-over, the inspector's focus chips and cluster mode
       all funnel into it, and it reads `q.graph`, `activeTypes`, `activeTags`,
-      `activeAreas` and `ftMatch()` together. Touching any one caller can
+      `activeDirs` and `ftMatch()` together. Touching any one caller can
       change what the other four produce.
    2. `setView()` reaches into nearly every section — it toggles the tool
       groups, seeds a view on first entry via `inited`, and has to
@@ -1125,7 +1142,8 @@
       filled by one section and read by three or four. A stale one is
       invisible until an unrelated view renders wrong.
 
-   The mode flags (`clustered`, `treeMode`, `ixNodes`, `ixOnly`, `view`) are
+   The mode flags (`clustered` + `clusterDepth`, `treeMode`, `ixNodes`,
+   `ixOnly`, `view`) are
    read across boundaries too: each rebuilds the graph's elements and must
    undo itself exactly, or its nodes leak into the plain view.
 
@@ -1187,7 +1205,28 @@ const esc=s=>(s==null?'':String(s)).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt
 const cvar=n=>getComputedStyle(root).getPropertyValue(n).trim();
 const isDark=()=>root.getAttribute('data-theme')==='dark';
 const reduce=()=>matchMedia('(prefers-reduced-motion:reduce)').matches;
-const areaOf=id=>id.includes('/')?id.split('/')[0]:'(root)';
+/* A concept's directory — the whole path, "." at the root — mirroring the
+   `dir` every catalog row carries. This used to be `areaOf`, the *first path
+   segment* only: a word the OKF spec never uses, and a projection that made
+   nested clustering impossible because everything below level one was already
+   thrown away before the boxes were drawn. */
+const dirOf=id=>{const i=id.lastIndexOf('/');return i<0?'.':id.slice(0,i);};
+const dirDepth=d=>d==='.'?0:d.split('/').length;
+const dirTrunc=(d,n)=>d==='.'?'.':d.split('/').slice(0,n).join('/');
+const dirParent=d=>{const i=d.lastIndexOf('/');return i<0?null:d.slice(0,i);};
+/* The one rule `okf --dir` uses, verbatim: a directory names itself and
+   everything beneath it. "." needs no special case — nothing starts with "./",
+   so the root selects only what lives directly in it. */
+const underDir=(d,path)=>d===path||d.indexOf(path+'/')===0;
+/* `.` is the data; `(root)` is what a human reads. A box caption is the last
+   segment — a full path on every nested box would bury the picture in text. */
+const dirLabel=d=>d==='.'?'(root)':d.split('/').pop()+'/';
+/* Where a bundle lives, for the rows that name it — and only where that says
+   something its slug does not. The slug is the name (`@okf-gem`, /b/okf-gem/);
+   the folder is a fact about it, so a row shows the fact beside the name and
+   drops it when the two read alike. Server-side twin: Bundle::Folder.label,
+   which is what `title` already arrived as. */
+const bundleWhere=b=>b.title===b.slug?'':(b.title||'');
 
 /* ── Cytoscape ── */
 function styleSheet(){const ink=cvar('--ink'),halo=cvar('--canvas'),edge=cvar('--edge');
@@ -1474,7 +1513,9 @@ function select(id){const ele=cy.getElementById(id);if(!ele.length)return;const
 cy.on('tap','node',e=>{const t=e.target;
  if(t.hasClass('dir')){showDir(t.id().slice(DIR.length)||'.');return focusNode(t,true);}
  if(t.hasClass('ix')){showDir(t.data('dir')||'.');return focusNode(t,true);}
- if(t.isParent()){const a=t.id().indexOf('area::')===0?t.id().slice(6):null;return showDir(a&&a!=='(root)'?a:'.');}
+ /* A box's id carries the directory verbatim — "." included — so the tap needs
+    no unmangling of a display label back into a path. */
+ if(t.isParent()){const id=t.id();return showDir(id.indexOf('box::')===0?id.slice(5):'.');}
  select(t.id());});
 /* Clear the focus: drop the dim/highlight and let the hash forget the node, so a
    reload does not reselect it. Tapping empty canvas does this — but a dense graph
@@ -1486,57 +1527,81 @@ cy.on('tap',e=>{if(e.target===cy)deselect();});
 /* Three groups, one grammar: empty means everything, a click narrows, a second
    click puts it back. Types used to be the odd one out — a `hiddenTypes` set
    where every type showed until you clicked one *away* — so the same chip
-   component meant "include" under Areas and Tags and "exclude" two rows above,
+   component meant "include" under Dirs and Tags and "exclude" two rows above,
    and meant "include" again on the catalog's own type chips one view over. That
    is a rule a reader has to learn per panel instead of once. Within a group
    selections union (Service *or* Charter); across groups they intersect. */
-const activeTypes=new Set(), activeTags=new Set(), activeAreas=new Set();
+const activeTypes=new Set(), activeTags=new Set(), activeDirs=new Set();
 const searchInput=document.getElementById('search');
 const q={graph:'',catalog:'',files:'',tags:''};
 function applyGraphFilter(){const s=q.graph.toLowerCase();const ids=ftMatch(q.graph);
  cy.nodes().forEach(n=>{if(n.isParent()||n.hasClass('dir')||n.hasClass('ix'))return;const id=n.data('id');const t=typeOf[id]||'Untyped';const nt=tagsOf[id]||[];
   const hay=(n.data('title')+' '+t+' '+nt.join(' ')+' '+(descOf[id]||'')).toLowerCase();
   const txt=ids?ids.has(id):(!s||hay.includes(s));
-  const m=txt&&(activeTypes.size===0||activeTypes.has(t))&&(activeTags.size===0||nt.some(x=>activeTags.has(x)))&&(activeAreas.size===0||activeAreas.has(areaOf(id)));
+  const m=txt&&(activeTypes.size===0||activeTypes.has(t))&&(activeTags.size===0||nt.some(x=>activeTags.has(x)))&&(activeDirs.size===0||[...activeDirs].some(d=>underDir(dirOf(id),d)));
   n.style('display',m?'element':'none');});
- /* Cluster mode draws an area box around each group's concepts. When a filter
-    hides every concept in a group, hide the now-empty box too (and bring it back
+ /* Cluster mode draws a box around each directory's concepts. When a filter
+    hides every concept in one, hide the now-empty box too (and bring it back
     when one survives) — the same rule fitBox already uses to leave stale boxes
-    out of the fit, now applied to what is drawn. */
- cy.nodes(':parent').forEach(p=>p.style('display',p.children().some(c=>c.style('display')!=='none')?'element':'none'));
+    out of the fit, now applied to what is drawn.
+    Leaf descendants, not children: a box nests other boxes now, and an
+    intermediate directory holding nothing directly has no children but its
+    sub-boxes — `children()` read it as empty and took the whole branch beneath
+    it off the canvas. One pass still does it, because the predicate is what
+    knows about depth, not the loop. */
+ cy.nodes(':parent').forEach(p=>p.style('display',p.descendants().some(c=>!c.isParent()&&c.style('display')!=='none')?'element':'none'));
+ /* A loosened filter brings back nodes the layout never placed — they return at
+    whatever coordinates the pre-cluster force layout left them at, dragging
+    their box across the canvas. Re-tile when that happens. Narrowing never
+    re-runs: the visible set only shrinks, and every survivor is already laid. */
+ if(clustered&&clusterLaid&&cy.nodes(':visible').some(n=>!n.isParent()&&!clusterLaid.has(n.id())))clusterLayout();
  ixVisibility();
  relaxZoom();
  bridgeSync();}
-function fbadge(){const c=activeTypes.size+activeTags.size+activeAreas.size;const b=document.getElementById('btn-filters');
+function fbadge(){const c=activeTypes.size+activeTags.size+activeDirs.size;const b=document.getElementById('btn-filters');
  b.classList.toggle('on-filter',c>0);b.querySelector('.fbadge').textContent=c;ctlBadge();syncFacets();}
 /* mirror the active view's tool state onto the ⚙ toggle — when the sheet is
    folded away on mobile, an active filter must still call out from the bar */
 function ctlBadge(){const b=document.getElementById('btn-controls');if(!b)return;
  let c=0;
- if(view==='graph')c=activeTypes.size+activeTags.size+activeAreas.size;
+ if(view==='graph')c=activeTypes.size+activeTags.size+activeDirs.size;
  else if(view==='files'){try{c=(fileTypeCombo.get()?1:0)+(fileTagCombo.get()?1:0);}catch(err){}}
  b.classList.toggle('on-filter',c>0);b.querySelector('.fbadge').textContent=c;}
-const ftypes=document.getElementById('ftypes'), ftags=document.getElementById('ftags'), fareas=document.getElementById('fareas');
-const graphAreas=[...new Set(NODES.map(n=>areaOf(n.id)))].sort();
-const areaCount={};NODES.forEach(n=>{const a=areaOf(n.id);areaCount[a]=(areaCount[a]||0)+1;});
+const ftypes=document.getElementById('ftypes'), ftags=document.getElementById('ftags'), fdirs=document.getElementById('fdirs');
+/* Every directory a concept lives in, plus each of their ancestors — so a chip
+   exists for an intermediate directory that holds nothing itself but whose
+   subtree does. The root is listed only when concepts actually sit there. */
+const graphDirs=(()=>{const s=new Set();
+ NODES.forEach(n=>{let d=dirOf(n.id);if(d==='.'){s.add('.');return;}while(d){s.add(d);d=dirParent(d);}});
+ return [...s].sort((a,b)=>a==='.'?-1:b==='.'?1:(a<b?-1:a>b?1:0));})();
+/* Counted by the same prefix rule the chip filters with, so the number on a
+   chip is exactly how many concepts clicking it leaves — the root's count is
+   its own, since "." is a prefix of nothing. */
+const dirCount={};graphDirs.forEach(d=>{dirCount[d]=NODES.filter(n=>underDir(dirOf(n.id),d)).length;});
 const tagsByCount=Object.entries(TAGS).sort((a,b)=>b[1].length-a[1].length).map(e=>e[0]);
 const dotFor=t=>`<span class="dot" style="background:${color[t]}"></span>`;
 const toggleSet=(s,v)=>{s.has(v)?s.delete(v):s.add(v);};
 /* One renderer for every filter chip group (graph, catalog and tags views):
    paints the items with their current state class and wires the toggle. */
+/* `label` is separate from `v` for one reason: the root directory's value is
+   "." and its label "(root)", and a chip that filtered on what it displayed
+   would be filtering on a spelling the data never uses. */
 function chipRow(el,items,attr,isOn,onToggle){
- el.innerHTML=items.map(o=>`<span class="chip${isOn(o.v)?' on':''}" ${attr}="${esc(o.v)}">${o.dot||''}${esc(o.v)} <span class="c">${o.n}</span></span>`).join('');
+ el.innerHTML=items.map(o=>`<span class="chip${isOn(o.v)?' on':''}" ${attr}="${esc(o.v)}">${o.dot||''}${esc(o.label==null?o.v:o.label)} <span class="c">${o.n}</span></span>`).join('');
  el.querySelectorAll('.chip').forEach(ch=>ch.onclick=()=>onToggle(ch.getAttribute(attr)));}
 const typeItems=list=>list.map(t=>({v:t,n:(TYPES[t]||[]).length,dot:dotFor(t)}));
-const areaItems=list=>list.map(a=>({v:a,n:areaCount[a]}));
+const dirItems=list=>list.map(d=>({v:d,label:d==='.'?'(root)':d,n:dirCount[d]}));
 const tagItems=list=>list.map(t=>({v:t,n:(TAGS[t]||[]).length}));
 /* The find box narrows the chips themselves; while it is empty, tags cap at the
    top 40 so a busy bundle doesn't flood the panel — searching reaches ALL tags. */
 const fsearch=document.getElementById('filter-search');
+/* The finder matches what the reader sees, so typing "root" reaches the chip
+   labelled (root) even though its value is ".". */
+const dirMatch=qq=>d=>!qq||(d==='.'?'(root)':d).toLowerCase().includes(qq);
 function syncFilterChips(){const qq=fsearch.value.trim().toLowerCase();const match=v=>!qq||v.toLowerCase().includes(qq);
  const after=()=>{syncFilterChips();applyGraphFilter();fbadge();};
  chipRow(ftypes,typeItems(types.filter(match)),'data-t',t=>activeTypes.has(t),t=>{toggleSet(activeTypes,t);after();});
- chipRow(fareas,areaItems(graphAreas.filter(match)),'data-area',a=>activeAreas.has(a),a=>{toggleSet(activeAreas,a);after();});
+ chipRow(fdirs,dirItems(graphDirs.filter(dirMatch(qq))),'data-dir',d=>activeDirs.has(d),d=>{toggleSet(activeDirs,d);after();});
  chipRow(ftags,tagItems(qq?tagsByCount.filter(match):tagsByCount.slice(0,40)),'data-tag',t=>activeTags.has(t),t=>{toggleSet(activeTags,t);after();});}
 fsearch.oninput=syncFilterChips;
 syncFilterChips();
@@ -1544,9 +1609,9 @@ syncFilterChips();
 // so the container has resized), reusing the working fitGraph implementation.
 function fitVisible(){requestAnimationFrame(()=>requestAnimationFrame(fitGraph));}
 function focusGraphType(t){setView('graph');clearSets();activeTypes.add(t);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
-function focusGraphArea(a){setView('graph');clearSets();activeAreas.add(a);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
+function focusGraphDir(d){setView('graph');clearSets();activeDirs.add(d);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
 function focusGraphTag(t){setView('graph');clearSets();activeTags.add(t);syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
-const clearSets=()=>{activeTypes.clear();activeTags.clear();activeAreas.clear();};
+const clearSets=()=>{activeTypes.clear();activeTags.clear();activeDirs.clear();};
 function clearGraphFilter(){clearSets();syncFilterChips();applyGraphFilter();fbadge();fitVisible();}
 /* Is the graph focused on exactly this facet and nothing else? Only then is a
    second click on the chip an undo — with any other filter in play, clearing
@@ -1557,8 +1622,8 @@ function clearGraphFilter(){clearSets();syncFilterChips();applyGraphFilter();fba
    on t" was `every other type hidden`, which a one-type bundle satisfies with
    nothing hidden at all — so an unfiltered graph read as focused, lit the chip,
    and spent the first click clearing nothing. */
-function typeFocused(t){return !activeTags.size&&!activeAreas.size&&activeTypes.size===1&&activeTypes.has(t);}
-function tagFocused(t){return !activeTypes.size&&!activeAreas.size&&activeTags.size===1&&activeTags.has(t);}
+function typeFocused(t){return !activeTags.size&&!activeDirs.size&&activeTypes.size===1&&activeTypes.has(t);}
+function tagFocused(t){return !activeTypes.size&&!activeDirs.size&&activeTags.size===1&&activeTags.has(t);}
 /* The chips are filter indicators, so they repaint wherever the badge does —
    that way a filter cleared from the slide-over un-lights the chip too. */
 function syncFacets(){
@@ -1590,7 +1655,18 @@ async function ensureLayout(name){const ext=LAYOUT_EXT[name];if(!ext||loadedExt[
    keeps a real gap between boxes in cose; avoidOverlap + spacingFactor do the
    same for the geometric layouts. Extras are ignored by layouts that don't know
    them. */
-function layoutOpts(name){const base={animate:true,padding:40,nodeOverlap:24,avoidOverlap:true,spacingFactor:1.2,nodeDimensionsIncludeLabels:true};
+/* Past this many concepts a layout transition stops being orientation and starts
+   being the reason the tab is unresponsive. Measured in nodes rather than edges
+   because it is the node re-render that costs. */
+const ANIMATE_MAX=250;
+/* `'end'`, never `true`. The force layouts read `animate:true` as "render every
+   tick of the simulation" — that is the visible bounce, and it is hundreds of
+   full re-renders for one settle. `'end'` runs the same simulation headless and
+   moves the nodes once, into the same final positions. Above ANIMATE_MAX even
+   that one transition is dropped: at that size the move itself is the jank, and
+   a graph that appears laid out beats a graph that arrives slowly. */
+function animateMode(){return cy.nodes().filter(n=>!n.isParent()).length>ANIMATE_MAX?false:'end';}
+function layoutOpts(name){const base={animate:animateMode(),padding:40,nodeOverlap:24,avoidOverlap:true,spacingFactor:1.2,nodeDimensionsIncludeLabels:true};
  if(name==='fcose')return{...base,name:'fcose',quality:'default',nodeRepulsion:6500,idealEdgeLength:160,nodeSeparation:100,packComponents:true};
  if(name==='dagre')return{...base,name:'dagre',rankDir:'TB',nodeSep:26,rankSep:55,edgeSep:12};
  if(name==='cola')return{...base,name:'cola',maxSimulationTime:2500,edgeLength:160,nodeSpacing:8};
@@ -1600,8 +1676,72 @@ async function runLayout(name){if(await ensureLayout(name))cy.layout(layoutOpts(
 layoutSel.onchange=e=>{if(clustered)return;runLayout(e.target.value);};
 layoutSel.value='<%= @layout %>';
 
-/* ── cluster by area (compound parent nodes) ── */
-let clustered=false;const btnCluster=document.getElementById('btn-cluster');
+/* ── cluster by directory (nested compound parent nodes) ── */
+/* A cluster is a directory of concepts, and the boxes nest as the directories
+   do. `clusterDepth` is how many levels down that nesting goes: at 1 the view
+   is exactly the flat one this mode always drew (one box per first segment),
+   at the bundle's maximum every concept sits in a box for its own directory.
+   Both are mode state — turning clustering off has to undo them together, or
+   the boxes leak into the plain graph. */
+let clustered=false,clusterDepth=1;const btnCluster=document.getElementById('btn-cluster');
+/* Which leaves the last cluster layout actually placed. The layout runs over the
+   visible subset (see clusterLayout), so this is what tells a *loosened* filter
+   apart from a tightened one: a node that comes back but is not in here has
+   never been tiled. null while unclustered. */
+let clusterLaid=null;
+const depthSel=document.getElementById('cluster-depth'),depthWrap=document.getElementById('cluster-depth-wrap');
+const BOX='box::';
+/* `dir::` is taken — file-tree mode's folder nodes wear it — so the boxes get a
+   prefix of their own rather than a shade of meaning on a shared one. */
+const maxDirDepth=Math.max(1,...NODES.map(n=>dirDepth(dirOf(n.id))));
+depthSel.innerHTML=Array.from({length:maxDirDepth},(_,i)=>`<option value="${i+1}">${i+1}</option>`).join('');
+depthSel.value=String(clusterDepth);
+/* Every box a depth calls for: each concept's directory truncated to N, plus
+   every ancestor of that — so an intermediate directory holding no concepts
+   directly still gets a box for its sub-boxes to sit in. The root box is added
+   only when concepts live at the root, and never nests another one: it holds
+   direct-root concepts and nothing else, which is what it always did.
+   Shallowest first, because cy.add() reads the array in order and a compound
+   child cannot name a parent that has not been added yet. */
+function boxesAt(depth){const set=new Set();
+ NODES.forEach(n=>{const d=dirOf(n.id);if(d==='.'){set.add('.');return;}
+  let t=dirTrunc(d,depth);while(t){set.add(t);t=dirParent(t);}});
+ return [...set].sort((a,b)=>dirDepth(a)-dirDepth(b)||(a<b?-1:a>b?1:0));}
+/* `grabbable:false, pannable:true` is what keeps a box scenery rather than a
+   handle — the pair, not either alone: ungrabbable stops the box moving, but the
+   node still swallows the drag, and it is `pannable` that hands the gesture to
+   the canvas the way empty background does. A cluster's
+   empty interior is the largest drag target on the canvas, so while it grabbed
+   the compound node, dragging to look around dragged the *directory* — and the
+   bigger the cluster, the less of the view was pannable. Leaves stay grabbable:
+   moving a concept is a real gesture, moving its folder is not. */
+function addBoxes(){
+ cy.add(boxesAt(clusterDepth).map(d=>{const data={id:BOX+d,label:dirLabel(d)};
+  const p=d==='.'?null:dirParent(d);if(p)data.parent=BOX+p;
+  return {group:'nodes',data:data,grabbable:false,pannable:true};}));
+ setBoxHandles();
+ cy.batch(()=>NODES.forEach(n=>{const e=cy.getElementById(n.id);
+  if(e.length)e.move({parent:BOX+dirTrunc(dirOf(n.id),clusterDepth)});}));}
+/* Alt hands a box back its handle. The two gestures are split by frequency, not
+   by preference: looking around is constant and stays unmodified, tidying a box
+   is occasional and takes the modifier. Alt rather than Ctrl because on macOS
+   Ctrl+mousedown is the system secondary click, and a modifier that opens a
+   context menu instead of dragging is not a modifier.
+
+   `blur` is not defensive clutter — a keyup that lands on another window never
+   reaches us, so without it the boxes would still be handles when the reader
+   comes back and every drag would move the wrong thing. */
+let altHeld=false;
+function setBoxHandles(){cy.nodes(':parent').forEach(n=>{
+ if(altHeld){n.grabify();n.unpanify();}else{n.ungrabify();n.panify();}});}
+addEventListener('keydown',e=>{if(e.key==='Alt'&&!altHeld){altHeld=true;setBoxHandles();}});
+addEventListener('keyup',e=>{if(e.key==='Alt'&&altHeld){altHeld=false;setBoxHandles();}});
+addEventListener('blur',()=>{if(altHeld){altHeld=false;setBoxHandles();}});
+/* Unparent first, then take the boxes out as one collection — removing a nested
+   parent while its children still point at it is how a teardown leaves orphans. */
+function removeBoxes(){cy.batch(()=>{
+ NODES.forEach(n=>{const e=cy.getElementById(n.id);if(e.length&&e.isChild())e.move({parent:null});});
+ cy.nodes().filter(n=>n.id().indexOf(BOX)===0).remove();});}
 /* cose treats compounds as an afterthought — nodes with no links drift to
    opposite corners of a huge half-empty box, and the boxes themselves sprawl —
    so grouped views needed hand-tidying every time. fcose is the engine built
@@ -1610,27 +1750,48 @@ let clustered=false;const btnCluster=document.getElementById('btn-cluster');
    captions from overlapping. Clustering therefore always uses it, with cose
    kept only for when the CDN is unreachable (a saved render opened offline
    still groups, just less prettily). */
+/* Laid out over the *visible* elements only. Not a nicety: fcose measures every
+   node it is handed, and a nested compound graph whose nodes went `display:none`
+   mid-run threw on a label it could no longer measure — reachable by typing a
+   term that matches nothing while the tiling animation is still going. Handing
+   it the visible subset also happens to be the right answer, since a hidden
+   concept has no business influencing where the visible ones land. Nothing
+   visible means nothing to lay out. */
 function clusterLayout(){ensureLayout('fcose').then(ok=>{if(!clustered)return;
- cy.layout(ok?{name:'fcose',quality:'proof',animate:true,padding:40,nodeRepulsion:6500,idealEdgeLength:90,
+ const eles=cy.elements(':visible');
+ /* Recorded before the early return, not after: "nothing was visible" and
+    "nothing has been laid out" are the same fact, and the empty set is what
+    makes clearing that filter re-tile everything rather than nothing. */
+ clusterLaid=new Set(eles.nodes().filter(n=>!n.isParent()).map(n=>n.id()));
+ if(!eles.nodes().nonempty())return;
+ cy.layout(ok?{name:'fcose',eles:eles,quality:'proof',animate:animateMode(),padding:40,nodeRepulsion:6500,idealEdgeLength:90,
    nodeSeparation:100,nestingFactor:.1,gravityCompound:1.5,tile:true,tilingPaddingVertical:14,
    tilingPaddingHorizontal:14,packComponents:true,nodeDimensionsIncludeLabels:true}
-  :{name:'cose',animate:true,padding:40,nodeRepulsion:8000,idealEdgeLength:70,nodeOverlap:24,nestingFactor:1.2,gravity:.7}).run();});}
+  :{name:'cose',eles:eles,animate:animateMode(),padding:40,nodeRepulsion:8000,idealEdgeLength:70,nodeOverlap:24,nestingFactor:1.2,gravity:.7}).run();});}
 function setClustered(on){if(on===clustered)return;if(on&&treeMode)setTree(false);
  clustered=on;btnCluster.setAttribute('aria-pressed',String(on));layoutSel.disabled=on;
- if(on){const as=[...new Set(NODES.map(n=>areaOf(n.id)))];
-  cy.add(as.map(a=>({group:'nodes',data:{id:'area::'+a,label:a}})));
-  cy.batch(()=>NODES.forEach(n=>{const e=cy.getElementById(n.id);if(e.length)e.move({parent:'area::'+areaOf(n.id)});}));
-  /* A box is made for every area; if a search or filter was already narrowing
-     the graph, the areas it emptied would cluster as phantom boxes. Re-apply the
-     filter now — before the layout tiles them — so empty areas never get drawn.
-     (Filtering while already clustered runs applyGraphFilter on its own.) */
+ /* A flat bundle has one level and therefore no choice to offer — the control
+    stays away rather than presenting a select with a single option. */
+ depthWrap.hidden=!(on&&maxDirDepth>1);
+ clusterLaid=null;
+ if(on){
+  addBoxes();
+  /* A box is made for every directory; if a search or filter was already
+     narrowing the graph, the ones it emptied would cluster as phantom boxes.
+     Re-apply the filter now — before the layout tiles them — so empty boxes
+     never get drawn. (Filtering while already clustered runs applyGraphFilter
+     on its own.) */
   applyGraphFilter();
   clusterLayout();
  }else{
-  cy.batch(()=>NODES.forEach(n=>{const e=cy.getElementById(n.id);if(e.length&&e.isChild())e.move({parent:null});}));
-  cy.nodes().filter(n=>n.id().indexOf('area::')===0).remove();
+  removeBoxes();
   runLayout(layoutSel.value);}}
 btnCluster.onclick=()=>setClustered(!clustered);
+/* Changing depth rebuilds rather than re-parents: the box *set* changes with it
+   (depth 2 adds boxes depth 1 never had), so tearing down and building again is
+   both simpler and the only version with one code path to get right. */
+depthSel.onchange=()=>{clusterDepth=+depthSel.value;if(!clustered)return;
+ removeBoxes();addBoxes();applyGraphFilter();clusterLayout();};
 
 /* ── file-tree mode: folders become nodes and the only edges are folder→child,
    so the picture is the acyclic files-and-folders tree, not the link graph. ── */
@@ -1731,10 +1892,12 @@ function openMapInGraph(dir){setView('graph');showDir(dir);
    visible leaves plus the area boxes drawn around them. A compound parent is
    26px of padding wider than its children on every side and carries its label
    above that, so fitting to the children alone crops the boxes and their names
-   off the edges. A parent whose children are all filtered out is left out too —
-   it collapses to a stale box that would inflate the fit. */
+   off the edges. A parent with no visible *leaf* descendant is left out too — it
+   collapses to a stale box that would inflate the fit, and leaves are the test
+   because a box nests other boxes now. */
 function fitBox(){const vis=cy.nodes(':visible');
- const eles=vis.filter(n=>!n.isParent()).union(vis.filter(n=>n.isParent()&&n.children(':visible').nonempty()));
+ const eles=vis.filter(n=>!n.isParent())
+  .union(vis.filter(n=>n.isParent()&&n.descendants().some(c=>!c.isParent()&&c.style('display')!=='none')));
  const use=eles.length?eles:cy.nodes();
  return use.length?use.boundingBox():null;}
 
@@ -1788,17 +1951,19 @@ function setView(v){if(v===view)return;view=v;document.getElementById('app').set
  /* the count and the dead-end offer belong to the view's own query, so they
     re-decide on every switch — including into a view that has no box at all */
  bridgeSync();}
-/* The Files view answers to two rail items: Files when the Files tab is up,
-   Index when the Indexes tab is — the Index rail item is a shortcut into it. */
-/* Which rail item the page is standing on. It was a question of view *and*
-   tab, back when "index" was a rail item with no #view-index behind it. The
-   tab is gone and so is the pretence: a rail item is a view. */
-function activeRail(){return view;}
+/* Which rail item the page is standing on — the view, except where two rail
+   items share one. Index is a shortcut into Files that opens the root map, so
+   while that map is what is open the reader is standing on Index and the rail
+   has to say so; anything else in Files, a *nested* index.md included, is
+   Files. Returning `view` flat lit Files on the one screen the reader reached by
+   asking for Index, which reads as the click having gone somewhere else. */
+const ROOT_INDEX='index.md';
+function activeRail(){return view==='files'&&fileSel===ROOT_INDEX?'index':view;}
 /* And everything that has to *go* somewhere clicks the rail item rather than
-   calling setView: Index and Files are one view differing by tab, so setView
-   alone lands on whichever tab was last open — and for "index" it lands on a
-   view that does not exist. The rail button already gets this right; this is
-   how the keyboard and the palette borrow it instead of drifting from it. */
+   calling setView: "index" is not a view, so setView alone lands on one that
+   does not exist, and even for Files it would arrive without opening the map
+   that makes it Index. The rail button already gets this right; this is how the
+   keyboard and the palette borrow it instead of drifting from it. */
 function goRail(v){const b=document.querySelector('.rail-item[data-view="'+v+'"]');if(b)b.click();}
 function railActive(){const v=activeRail();
  document.querySelectorAll('.rail-item').forEach(b=>b.classList.toggle('active',b.dataset.view===v));}
@@ -1873,38 +2038,38 @@ let CATALOG=null;
    otherwise) and fills descOf on the way, so even the pre-index substring
    fallback can match a graph node by its leaf description. */
 function getCatalog(){return CATALOG||(CATALOG=(EMBED?Promise.resolve(EMBED.catalog):fetch(CATALOG_ENDPOINT).then(r=>r.json()).then(d=>d.concepts)).then(list=>{list.forEach(c=>{descOf[c.id]=c.description||'';});return list;}));}
-const catActiveTypes=new Set(), catActiveAreas=new Set(), catActiveTags=new Set();
+const catActiveTypes=new Set(), catActiveDirs=new Set(), catActiveTags=new Set();
 const catByCount=types.slice().sort((a,b)=>(TYPES[b]||[]).length-(TYPES[a]||[]).length);
 const catChip=t=>`<span class="chip" data-t="${esc(t)}"><span class="dot" style="background:${color[t]}"></span>${esc(t)} <span class="c">${(TYPES[t]||[]).length}</span></span>`;
 function syncCatChips(){document.querySelectorAll('#cat-types .chip').forEach(c=>c.classList.toggle('on',catActiveTypes.has(c.getAttribute('data-t'))));
- const n=catActiveTypes.size+catActiveAreas.size+catActiveTags.size;
+ const n=catActiveTypes.size+catActiveDirs.size+catActiveTags.size;
  const b=document.getElementById('cat-filters-btn');b.classList.toggle('on-filter',n>0);b.querySelector('.fbadge').textContent=n;}
 function catToggle(t){toggleSet(catActiveTypes,t);renderCatFilters();renderCatalog();}
 function wireCatChips(el){el.querySelectorAll('.chip').forEach(ch=>ch.onclick=()=>catToggle(ch.getAttribute('data-t')));}
-/* The slide-over mirrors the graph filters — Types, Areas, Tags — with one find
+/* The slide-over mirrors the graph filters — Types, Dirs, Tags — with one find
    box narrowing the chips of all three groups (tags cap at 40 until searched). */
 function renderCatFilters(){const qq=(document.getElementById('cat-filter-search').value||'').trim().toLowerCase();
  const match=v=>!qq||v.toLowerCase().includes(qq);
  const after=()=>{renderCatFilters();renderCatalog();};
  chipRow(document.getElementById('cat-ftypes'),typeItems(catByCount.filter(match)),'data-t',t=>catActiveTypes.has(t),t=>{toggleSet(catActiveTypes,t);after();});
- chipRow(document.getElementById('cat-fareas'),areaItems(graphAreas.filter(match)),'data-area',a=>catActiveAreas.has(a),a=>{toggleSet(catActiveAreas,a);after();});
+ chipRow(document.getElementById('cat-fdirs'),dirItems(graphDirs.filter(dirMatch(qq))),'data-dir',d=>catActiveDirs.has(d),d=>{toggleSet(catActiveDirs,d);after();});
  chipRow(document.getElementById('cat-ftags'),tagItems(qq?tagsByCount.filter(match):tagsByCount.slice(0,40)),'data-tag',t=>catActiveTags.has(t),t=>{toggleSet(catActiveTags,t);after();});
  syncCatChips();}
 function initCatalog(){inited.catalog=true;
  // Only the five most common types get inline chips; everything else — types,
- // areas, tags — lives in the searchable slide-over, so a bundle with many
+ // dirs, tags — lives in the searchable slide-over, so a bundle with many
  // values doesn't flood the header.
  const quick=document.getElementById('cat-types');quick.innerHTML=catByCount.slice(0,5).map(catChip).join('');wireCatChips(quick);
  renderCatFilters();
  const cf=document.getElementById('cat-filters');
  document.getElementById('cat-filters-btn').onclick=()=>cf.classList.toggle('open');
  document.getElementById('cat-filters-close').onclick=()=>cf.classList.remove('open');
- document.getElementById('cat-filters-reset').onclick=()=>{catActiveTypes.clear();catActiveAreas.clear();catActiveTags.clear();renderCatFilters();renderCatalog();};
+ document.getElementById('cat-filters-reset').onclick=()=>{catActiveTypes.clear();catActiveDirs.clear();catActiveTags.clear();renderCatFilters();renderCatalog();};
  document.getElementById('cat-filter-search').oninput=renderCatFilters;
  getCatalog().then(renderCatalog);}
 function renderCatalog(){if(!CATALOG)return;getCatalog().then(list=>{const s=(q.catalog||'').toLowerCase();const ids=ftMatch(q.catalog);
  const rows=list.filter(c=>{if(catActiveTypes.size&&!catActiveTypes.has(c.type))return false;
-  if(catActiveAreas.size&&!catActiveAreas.has(areaOf(c.id)))return false;
+  if(catActiveDirs.size&&![...catActiveDirs].some(d=>underDir(dirOf(c.id),d)))return false;
   if(catActiveTags.size&&!c.tags.some(t=>catActiveTags.has(t)))return false;
   if(ids)return ids.has(c.id);
   if(s){const hay=(c.title+' '+c.description+' '+c.type+' '+c.tags.join(' ')+' '+c.id).toLowerCase();if(!hay.includes(s))return false;}return true;});
@@ -2106,6 +2271,7 @@ function openFile(id,list){fileSel=id;
  if(ixOnly)setIxOnly(false);
  const c=(list||[]).find(x=>x.id===id)||byId[id]||{};
  document.querySelectorAll('.file').forEach(b=>b.classList.toggle('sel',b.dataset.id===id));
+ railActive(); /* the rail reads the open file to tell Index from Files */
  const ty=c.type||typeOf[id]||'Untyped';const cc=color[ty]||'#64748b';
  document.getElementById('fp-head').hidden=false;
  document.getElementById('fp-type').innerHTML=`<span class="dot" style="background:${cc}"></span>${esc(ty)}`;
@@ -2118,6 +2284,7 @@ function openFile(id,list){fileSel=id;
    log fetched fresh on every click so a just-appended entry shows. */
 function openReserved(kind,path){fileSel=path;
  document.querySelectorAll('.file').forEach(b=>b.classList.toggle('sel',b.dataset.path===path));
+ railActive(); /* the rail reads the open file to tell Index from Files */
  document.getElementById('fp-head').hidden=false;
  document.getElementById('fp-title').textContent=path;
  const d=dirOfPath(path);
@@ -2139,21 +2306,21 @@ function openReserved(kind,path){fileSel=path;
   LOGS=null;getLogs().then(logs=>{const l=logs.find(x=>x.path===path);done((l&&l.content)||'');});}}
 
 /* ── tags ── */
-const tagSel=new Set(), tagTypes=new Set(), tagAreas=new Set();
-/* Does this concept survive the tags view's type/area filters? Tags are counted
+const tagSel=new Set(), tagTypes=new Set(), tagDirs=new Set();
+/* Does this concept survive the tags view's type/dir filters? Tags are counted
    and listed over the surviving concepts only; a tag left with none disappears. */
-function tagMatch(id){return (tagTypes.size===0||tagTypes.has(typeOf[id]||'Untyped'))&&(tagAreas.size===0||tagAreas.has(areaOf(id)));}
+function tagMatch(id){return (tagTypes.size===0||tagTypes.has(typeOf[id]||'Untyped'))&&(tagDirs.size===0||[...tagDirs].some(d=>underDir(dirOf(id),d)));}
 function renderTagChips(){
  const after=()=>{renderTagChips();renderCloud();};
  chipRow(document.getElementById('tag-ftypes'),typeItems(types),'data-t',t=>tagTypes.has(t),t=>{toggleSet(tagTypes,t);after();});
- chipRow(document.getElementById('tag-fareas'),areaItems(graphAreas),'data-area',a=>tagAreas.has(a),a=>{toggleSet(tagAreas,a);after();});
- const n=tagTypes.size+tagAreas.size;const b=document.getElementById('tag-filters-btn');
+ chipRow(document.getElementById('tag-fdirs'),dirItems(graphDirs),'data-dir',d=>tagDirs.has(d),d=>{toggleSet(tagDirs,d);after();});
+ const n=tagTypes.size+tagDirs.size;const b=document.getElementById('tag-filters-btn');
  b.classList.toggle('on-filter',n>0);b.querySelector('.fbadge').textContent=n;}
 function initTags(){inited.tags=true;
  const tf=document.getElementById('tag-filters');
  document.getElementById('tag-filters-btn').onclick=()=>tf.classList.toggle('open');
  document.getElementById('tag-filters-close').onclick=()=>tf.classList.remove('open');
- document.getElementById('tag-filters-reset').onclick=()=>{tagTypes.clear();tagAreas.clear();renderTagChips();renderCloud();};
+ document.getElementById('tag-filters-reset').onclick=()=>{tagTypes.clear();tagDirs.clear();renderTagChips();renderCloud();};
  renderTagChips();renderCloud();}
 function renderCloud(){const s=(q.tags||'').toLowerCase();
  // Uniform chip size, ordered by frequency (descending); the background tint scales
@@ -2183,19 +2350,23 @@ function countUp(el,to){if(reduce()||to<=8){el.textContent=to;return;}let start=
  function step(ts){if(!start)start=ts;const p=Math.min(1,(ts-start)/650);el.textContent=Math.round(to*(1-Math.pow(1-p,3)));if(p<1)requestAnimationFrame(step);}
  requestAnimationFrame(step);}
 function initStats(){inited.stats=true;
- const areas=new Set(NODES.map(n=>areaOf(n.id)));
- const stats=[['Concepts',NODES.length],['Areas',areas.size],['Concept types',types.length],['Cross-links',EDGES.length],['Distinct tags',Object.keys(TAGS).length]];
+ const dirs=new Set(NODES.map(n=>dirOf(n.id)));
+ const stats=[['Concepts',NODES.length],['Dirs',dirs.size],['Concept types',types.length],['Cross-links',EDGES.length],['Distinct tags',Object.keys(TAGS).length]];
  const g=document.getElementById('stat-grid');
  g.innerHTML=stats.map(s=>`<div class="stat"><div class="n" data-to="${s[1]}">0</div><div class="l">${s[0]}</div></div>`).join('');
  g.querySelectorAll('.n').forEach(el=>countUp(el,+el.dataset.to));
  const byType=Object.entries(TYPES).map(([t,ids])=>[t,ids.length]).sort((a,b)=>b[1]-a[1]);
- const areaCnt={};NODES.forEach(n=>{const a=areaOf(n.id);areaCnt[a]=(areaCnt[a]||0)+1;});
- const byArea=Object.entries(areaCnt).sort((a,b)=>b[1]-a[1]);
- renderBars('bars-type',byType,t=>color[t],'type');renderBars('bars-area',byArea,()=>cvar('--accent'),'area');}
+ /* Direct counts, keyed by the whole path — the same cut `okf stats --json`
+    emits as `by_dir`, so the panel and the CLI answer alike. The bar's value is
+    the directory; only its label is softened to (root). */
+ const dirCnt={};NODES.forEach(n=>{const d=dirOf(n.id);dirCnt[d]=(dirCnt[d]||0)+1;});
+ const byDir=Object.entries(dirCnt).sort((a,b)=>b[1]-a[1]);
+ renderBars('bars-type',byType,t=>color[t],'type');renderBars('bars-dir',byDir,()=>cvar('--accent'),'dir');}
 function renderBars(id,rows,colFn,kind){const max=Math.max(1,...rows.map(r=>r[1]));const box=document.getElementById(id);
+ const label=l=>kind==='dir'&&l==='.'?'(root)':l;
  box.innerHTML=rows.map(([l,v])=>
-  `<div class="bar clickable" data-val="${esc(l)}" role="button" tabindex="0" title="Show ${esc(l)} in the graph"><span class="bl">${esc(l)}</span><div class="bt"><div class="bf" style="background:${colFn(l)};transform:scaleX(${reduce()?1:0})" data-w="${v/max}"></div></div><span class="bv">${v}</span></div>`).join('');
- box.querySelectorAll('.bar').forEach(b=>{const go=()=>{const val=b.dataset.val;kind==='type'?focusGraphType(val):focusGraphArea(val);};
+  `<div class="bar clickable" data-val="${esc(l)}" role="button" tabindex="0" title="Show ${esc(label(l))} in the graph"><span class="bl">${esc(label(l))}</span><div class="bt"><div class="bf" style="background:${colFn(l)};transform:scaleX(${reduce()?1:0})" data-w="${v/max}"></div></div><span class="bv">${v}</span></div>`).join('');
+ box.querySelectorAll('.bar').forEach(b=>{const go=()=>{const val=b.dataset.val;kind==='type'?focusGraphType(val):focusGraphDir(val);};
   b.onclick=go;b.onkeydown=e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();go();}};});
  requestAnimationFrame(()=>box.querySelectorAll('.bf').forEach(f=>f.style.transform=`scaleX(${f.dataset.w})`));}
 
@@ -2287,10 +2458,15 @@ var openPalette=null;
     and layout a bundle switch preserves are exactly what a node has to override.
     A hit in *this* bundle is not a navigation at all; go() selects it in place
     and this href only exists for ⌘-click, where a second tab is the point. */
- const hitHref=c=>(c.slug===SELF_SLUG?'':'../'+encodeURIComponent(c.slug)+'/')+'?select='+encodeURIComponent(c.id);
+ /* Three cases, not two. A hub row names another bundle and is addressed
+    relative to its mount; a hub row for *this* bundle stays put; and a
+    standalone row carries no slug at all, because one bundle has none to carry.
+    Folding that third case into the first built '../undefined/' — a 404 on
+    every result the palette returned. */
+ const hitHref=c=>(c.slug==null||c.slug===SELF_SLUG?'':'../'+encodeURIComponent(c.slug)+'/')+'?select='+encodeURIComponent(c.id);
  const hitHtml=c=>`<span class="hit-top"><span class="hit-t">${hilite(c.title||c.id,hitTerms)}</span>`+
   (c.type?`<span class="hit-type">${esc(c.type)}</span>`:'')+
-  `<span class="slug">${esc(c.slug)}</span></span>`+
+  (c.slug==null?'':`<span class="slug">${esc(c.slug)}</span>`)+`</span>`+
   (c.snippet?`<span class="hit-s">${hilite(c.snippet,hitTerms)}</span>`:'');
  /* Bundles lead, and on an empty box they are the only thing here: switching
     bundles is what the palette is for, and six views above them would push the
@@ -2312,11 +2488,17 @@ var openPalette=null;
   let h='';
   if(showB){
    if(heads)h+=grp('Bundles');
-   if(!q)h+=`<a class="cur" aria-disabled="true"><span>${esc(IDENT)}</span><span class="slug">current</span></a>`;
+   /* The you-are-here row wears the same name as the rows under it — `@slug`
+      where there is one to wear. A standalone page has none, and falls back to
+      the header's own wording rather than inventing a ref that addresses
+      nothing. */
+   if(!q)h+=`<a class="cur" aria-disabled="true"><span>${SELF_SLUG?'@'+esc(SELF_SLUG):esc(IDENT)}</span><span class="sw-where">current</span></a>`;
    if(!SIBLINGS.length)h+='<a class="none"><span>only this bundle is registered — okf registry set &lt;dir&gt; adds more</span></a>';
-   else h+=bs.map((b,i)=>opt(i,{
-    attrs:`href="${esc(target(b.path))}" data-path="${esc(b.path)}"`,
-    html:`<span>${esc(b.title)}${b.default?'<span class="sw-def">default</span>':''}</span><span class="slug">${esc(b.slug)}</span>`})).join('');
+   else h+=bs.map((b,i)=>{const where=bundleWhere(b);
+    return opt(i,{
+     attrs:`href="${esc(target(b.path))}" data-path="${esc(b.path)}"`,
+     html:`<span>@${esc(b.slug)}${b.default?'<span class="sw-def">default</span>':''}</span>`+
+      (where?`<span class="sw-where">${esc(where)}</span>`:'')});}).join('');
   }
   if(vs.length){
    if(heads)h+=grp('Views');
@@ -2329,7 +2511,7 @@ var openPalette=null;
    if(heads)h+=grp('Concepts');
    h+=cs.map((c,i)=>opt(bs.length+vs.length+i,{
     cls:' sw-hit',
-    attrs:`href="${esc(hitHref(c))}" data-hit="${esc(c.id)}" data-slug="${esc(c.slug)}"`,
+    attrs:`href="${esc(hitHref(c))}" data-hit="${esc(c.id)}" data-slug="${esc(c.slug==null?'':c.slug)}"`,
     html:hitHtml(c)})).join('');
    /* The cap is reported, never silent: a palette that shows 50 of 214 and says
       nothing has told the reader the answer is complete. */
@@ -2363,10 +2545,15 @@ var openPalette=null;
   const id=a.dataset.hit;
   /* A concept in this bundle is already loaded — selecting it in place keeps the
      camera, the filters and the layout the reader built. Only a hit in another
-     bundle is worth a page load. */
+     bundle is worth a page load.
+     Empty slug means a standalone server: one bundle, so every hit is this one.
+     It reads as '' rather than SELF_SLUG's null because the row simply has no
+     slug key, and comparing the two directly sent every standalone hit down the
+     page-load branch — the whole index reloaded to reach a node already on
+     screen. */
   if(id!==undefined){const t=a.getAttribute('href');
    if(newTab){window.open(t,'_blank');close();return;}
-   if(a.dataset.slug===SELF_SLUG){close();goToGraph(id);return;}
+   if(a.dataset.slug===''||a.dataset.slug===SELF_SLUG){close();goToGraph(id);return;}
    location.href=t;return;}
   const p=a.dataset.path;if(!p)return;const t=target(p);
   if(newTab){window.open(t,'_blank');close();}else{location.href=t;}}
@@ -2412,9 +2599,13 @@ var openPalette=null;
     is switching bundles. Standalone has neither, so there the view is the job.
     The ⇄ button keeps the bundle wording in every mode: it draws a swap, and a
     control whose tooltip disagrees with its icon teaches the wrong thing. */
- const label=FINDS?'Search all bundles':HUB?'Switch bundle':'Jump to a view';
+ /* FINDS no longer implies HUB: a standalone server answers /search over the one
+    bundle it was given, so the copy has to name what is actually on offer rather
+    than assume a set is behind it. Four states, because both bits are real. */
+ const label=FINDS?(HUB?'Search all bundles':'Search concepts'):HUB?'Switch bundle':'Jump to a view';
  const btnLabel=HUB?'Switch bundle':label;
- input.placeholder=FINDS?'search concepts, switch bundle, or a view…':HUB?'switch bundle, or type a view…':'jump to a view…';
+ input.placeholder=FINDS?(HUB?'search concepts, switch bundle, or a view…':'search concepts, or a view…')
+  :HUB?'switch bundle, or type a view…':'jump to a view…';
  input.setAttribute('aria-label',label);
  ov.setAttribute('aria-label',FINDS?label:HUB?'Switch bundle':'Command palette');
  document.getElementById('sw-hint').textContent='↑↓ move · ⏎ open · '+(HUB?(isMac?'⌘⏎':'Ctrl-⏎')+' new tab · ':'')+'Esc close';
@@ -2625,12 +2816,17 @@ function bridgeReport(v,shown,total){if(bridge)bridge.report(v,shown,total);}
   /* A row the hub could not load links nowhere, because there is nowhere to
      link — but it is still a row: "where did my bundle go?" is the question it
      exists to answer. */
+  /* Named by slug, for the reason the palette rows are: the slug is what
+     addresses this bundle, the folder is where it happens to sit. Unlike the
+     hub's own /b/ page this row carries no full path, so the folder stays — as
+     the fact under the name, and only where it is not the name repeated. */
   const title=b.mount!==null
-   ?'<a class="ws-title" href="../'+encodeURIComponent(b.mount)+'/">'+esc(b.title)+'</a>'
-   :'<span class="ws-title off">'+esc(b.title)+'</span>';
+   ?'<a class="ws-title" href="../'+encodeURIComponent(b.mount)+'/">@'+esc(b.slug)+'</a>'
+   :'<span class="ws-title off">@'+esc(b.slug)+'</span>';
+  const where=bundleWhere(b);
   const count=b.count===null?'':'<span>'+b.count+' concept'+(b.count===1?'':'s')+'</span>';
   const body='<div class="ws-row-main"><div class="ws-t">'+title+pills+'</div>'+
-   '<div class="ws-meta"><span class="ws-slug">@'+esc(b.slug)+'</span>'+count+
+   '<div class="ws-meta">'+(where?'<span class="ws-where">'+esc(where)+'</span>':'')+count+
    '<span class="ws-health '+esc(b.health)+'">'+esc(b.word)+'</span></div>'+
    (editing===b.slug?edit(b):'')+(confirming===b.slug?confirm(b):'')+'</div>';
   return '<div class="ws-row" data-slug="'+esc(b.slug)+'">'+body+(manageable()?menuBtn(b):'')+'</div>';}
@@ -3004,10 +3200,11 @@ const KEYS=[
  [ '/', 'search the current view (where it has one)' ],
  [ '\\', 'show or hide the inspector — graph' ],
  [ '0', 'fit the graph to the screen — graph' ],
- [ 'f', 'fullscreen' ],
  [ /Mac|iP/.test(navigator.platform||'')?'⌘K':'Ctrl-K',
-   SEARCH_ENDPOINT!==null?'search every bundle, switch bundle, or jump to a view':
-   HUB_PATH!==null?'switch bundle, or jump to a view':'jump to a view' ],
+   SEARCH_ENDPOINT!==null?(HUB_PATH!==null?'search every bundle, switch bundle, or jump to a view'
+     :'search this bundle, or jump to a view')
+   :HUB_PATH!==null?'switch bundle, or jump to a view':'jump to a view' ],
+ [ '⌥ drag', 'move a cluster box — a plain drag pans the canvas' ],
  [ '?', 'this list' ],
  [ 'Esc', 'close what is open, or clear the graph selection' ]
 ];
@@ -3034,7 +3231,7 @@ addEventListener('keydown',e=>{if(!dgv.hidden){if(e.key==='Escape')closeDiagram(
  else if(e.key==='\\'&&view==='graph'){setSide(gbody.getAttribute('data-side')==='hidden'?'default':'hidden');}
  else if(e.key==='0'&&view==='graph'){fitGraph();}
  else if(e.key==='Escape'&&view==='graph'){deselect();}
- else if(e.key==='f'){btnFull.click();}});
+});
 
 /* ── deep links ── */
 const Q=new URLSearchParams(location.search),QL=Q.get('layout'),QS=Q.get('select');