<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codetree — file level</title>
<style>
/* The panels are BARS, not floating overlays. As overlays the header sat on top
of whatever was at world origin, which reads — correctly — as groups
overlapping. A grid row cannot cover the canvas. */
html, body { margin: 0; height: 100%; background: #131417; color: #c9d1d9; overflow: hidden;
font: 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body { display: grid; grid-template-rows: auto 1fr auto; }
svg { display: block; width: 100%; height: 100%; cursor: grab; min-height: 0; }
svg.dragging { cursor: grabbing; }
.hud { background: #1c1d21; border-bottom: 1px solid #2f3136; padding: 8px 14px;
line-height: 1.7; }
#head { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
#foot { border-bottom: none; border-top: 1px solid #2f3136; display: flex;
justify-content: space-between; align-items: center; gap: 16px; }
#head input { background: #131417; border: 1px solid #2f3136; color: #c9d1d9; font: inherit;
padding: 3px 6px; border-radius: 3px; width: 340px; }
#head b { color: #e8e8ea; }
#stats { color: #8b949e; }
#hint { color: #8b949e; font-size: 11px; }
#legend { font-size: 11px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px;
vertical-align: -1px; }
#banner { color: #f0883e; display: none; margin-left: 12px; }
.n-body { fill: #26272b; stroke: #17181a; }
.n-head { stroke: none; }
.n-title { fill: #e8e8ea; font-size: 11px; font-weight: 600; }
.n-sub { fill: #a0a0a8; font-size: 9px; }
.n-sig { fill: #8b949e; font-size: 9px; font-family: ui-monospace, 'SF Mono', monospace; }
.n-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 8.5px; fill: #9aa0a6;
white-space: pre; }
.code-dim { fill: #5b626b; }
.code-own { fill: #e8e8ea; font-weight: 600; }
.n-lineno { font-family: ui-monospace, monospace; font-size: 7px; fill: #484f58; }
.n-chev { fill: #8b949e; font-size: 10px; cursor: pointer; }
.n-hit { fill: transparent; cursor: pointer; }
/* Edges are dim until you point at a node: at real scale they are the noise,
not the signal. Hovering a card lights its own and fades the rest. */
.link { fill: none; stroke: #4d5866; stroke-width: 1.4; opacity: 0.16;
transition: opacity .12s ease, stroke .12s ease; }
.link.bundled { stroke: #58a6ff; opacity: 0.45; }
.link.hot { stroke: #ffa657; opacity: 0.95; }
.link.cold { opacity: 0.04; }
.junction { fill: #4d5866; stroke: none; }
.link { stroke-linejoin: round; stroke-linecap: round; }
/* A selected node's dependency closure: near edges hot, far ones cooling off,
so depth is readable without counting hops. */
.link.dep { opacity: 0.92; }
.n-body.selected { stroke: #ffa657; stroke-width: 2; }
.dep-badge { font-size: 8px; font-family: ui-monospace, monospace; fill: #c9d1d9; }
.link-count { font-size: 9px; fill: #8b949e; font-family: ui-monospace, monospace;
text-anchor: middle; pointer-events: none; }
.n-body, .n-head, .n-title { transition: opacity .12s ease; }
g.dim { opacity: 0.25; }
.zone { fill-opacity: 0.16; stroke-opacity: 0.5; stroke: #58a6ff; stroke-width: 1.2; }
/* A relation ring is a COLUMN of hop distance, not part of the structure, so it
reads as a dashed amber region rather than one more blue zone. */
.zone-ring { fill: #3a2a16; fill-opacity: 0.45; stroke: #ffa657; stroke-width: 1.4;
stroke-dasharray: 7 4; stroke-opacity: 0.85; }
.zone-label { font-size: 9px; fill: #8b949e; font-family: ui-monospace, monospace; }
.n-open { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
#crumb a { color: #8b949e; text-decoration: none; cursor: pointer; }
#crumb a.current { color: #ffa657; cursor: default; }
#crumb .sep { color: #4a4d55; }
.depth1 { fill: #2b2f3a } .depth2 { fill: #33405a } .depth3 { fill: #3b5378 } .depth4 { fill: #436796 }
</style>
</head>
<body>
<div class="hud" id="head">
<div>
<div id="levelname"><b>file level</b></div>
<div style="margin-top:4px">
<span id="crumb"></span>
<a id="other-surface" href="/" style="color:#58a6ff;margin-left:10px">open in the panel view ›</a>
</div>
</div>
<div style="flex:1">
<input id="path" spellcheck="false" placeholder="open a file by path">
<span id="stats"></span>
<span id="banner"></span>
</div>
</div>
<svg id="svg"><g id="world"></g></svg>
<div class="hud" id="foot">
<div id="legend">
<span class="sw" style="background:#b8642a"></span>function
<span class="sw" style="background:#6b4a86"></span>class
<span class="sw" style="background:#8a6a2a"></span>const
<span class="sw" style="background:#1f4a6b"></span>module body
<span class="sw" style="background:#33405a"></span>zone depth rail
</div>
<div id="hint">hover traces edges · click for dependency depth · <b>G</b> shows only what it connects to, <b>[ ]</b> how far · B bundles · R routing · title opens · Esc back</div>
</div>
<script type="module" src="/floor/level.js"></script>
</body>
</html>