dev-guru 0.1.0__py3-none-any.whl

dev_guru/reports/assets/explorer.css

@@ -0,0 +1,218 @@
+/* Dev Guru explorer — "Lantern" theme. Inlined into a single offline file: system fonts only, no URLs. */
+:root, [data-theme="night"] {
+  --bg: #0b0c18; --bg-2: #10122a; --panel: rgba(22, 24, 48, .86); --panel-solid: #15172f; --raise: #1d2042;
+  --ink: #eceaf8; --muted: #9b9dc4; --faint: #63668e; --line: rgba(160, 165, 255, .12); --line-2: rgba(160, 165, 255, .22);
+  --saffron: #ffb347; --ember: #ff6b3d; --teal: #3dd6c6; --violet: #9b87ff; --rose: #ff6f91; --lime: #b7ef6a;
+  --glow: 0 0 0 1px rgba(255, 179, 71, .35), 0 0 22px rgba(255, 140, 50, .25);
+  --shadow: 0 18px 50px rgba(0, 0, 0, .45); --code: #0e1024; --sel: rgba(255, 179, 71, .18);
+  color-scheme: dark;
+}
+[data-theme="day"] {
+  --bg: #fbf6ec; --bg-2: #f4ecdc; --panel: rgba(255, 255, 255, .9); --panel-solid: #ffffff; --raise: #fff7ea;
+  --ink: #1e1c33; --muted: #5e5a7a; --faint: #a19cb8; --line: rgba(40, 30, 90, .1); --line-2: rgba(40, 30, 90, .2);
+  --saffron: #d97a00; --ember: #d9481c; --teal: #0e9b8d; --violet: #6a52e0; --rose: #d43d68; --lime: #4f8f0b;
+  --glow: 0 0 0 1px rgba(217, 122, 0, .4), 0 0 18px rgba(217, 122, 0, .18);
+  --shadow: 0 14px 40px rgba(60, 40, 10, .14); --code: #fff8ec; --sel: rgba(217, 122, 0, .14);
+  color-scheme: light;
+}
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { margin: 0; height: 100%; }
+body {
+  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  color: var(--ink); background:
+    radial-gradient(1200px 700px at 78% -10%, rgba(255, 140, 50, .10), transparent 60%),
+    radial-gradient(900px 600px at -10% 110%, rgba(61, 214, 198, .08), transparent 60%), var(--bg);
+  overflow: hidden;
+}
+code, pre, kbd, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
+button { font: inherit; color: inherit; }
+.skip { position: absolute; left: -999px; top: 0; }
+.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--panel-solid); padding: 8px 12px; border-radius: 10px; }
+:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
+.muted { color: var(--muted); }
+.app { display: grid; grid-template-rows: auto auto 1fr auto; height: 100vh; }
+
+/* top bar */
+.top { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 179, 71, .05), transparent); }
+.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.mark { width: 30px; height: 30px; color: var(--muted); filter: drop-shadow(0 0 8px rgba(255, 150, 60, .55)); animation: flicker 4s ease-in-out infinite; }
+@keyframes flicker { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.04) rotate(-1deg); } 60% { transform: scale(.98) rotate(1deg); } }
+.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
+.brand-text strong { letter-spacing: .02em; }
+.brand-text span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
+.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin: 0 auto; overflow-x: auto; max-width: 100%; }
+.tab { border: 0; background: transparent; padding: 7px 12px; border-radius: 10px; cursor: pointer; color: var(--muted); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
+.tab:hover { color: var(--ink); background: var(--raise); }
+.tab[aria-selected="true"] { color: var(--ink); background: var(--raise); box-shadow: var(--glow); }
+.tab .ic { color: var(--saffron); }
+.top-actions { display: flex; gap: 6px; }
+.btn { border: 1px solid var(--line-2); background: var(--panel-solid); padding: 6px 11px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
+.btn:hover { border-color: var(--saffron); }
+.btn.ghost { background: transparent; }
+.btn.icon { width: 32px; height: 32px; justify-content: center; padding: 0; }
+.btn.primary { background: linear-gradient(135deg, var(--saffron), var(--ember)); color: #1b1206; border: 0; font-weight: 650; }
+kbd { font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
+
+/* stats ribbon */
+.stats { display: flex; gap: 10px; padding: 8px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
+.stat { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
+.stat b { font-size: 15px; font-variant-numeric: tabular-nums; }
+.stat span { color: var(--muted); font-size: 12px; }
+.stat.warn b { color: var(--rose); }
+
+/* three columns */
+.workspace { display: grid; grid-template-columns: 290px 1fr 360px; min-height: 0; }
+.sidebar, .inspector { min-height: 0; overflow: auto; padding: 14px; background: var(--panel); backdrop-filter: blur(8px); }
+.sidebar { border-right: 1px solid var(--line); }
+.inspector { border-left: 1px solid var(--line); }
+.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin: 16px 0 8px; font-weight: 600; }
+.search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
+.search input { flex: 1; border: 0; background: transparent; color: var(--ink); outline: none; font: inherit; min-width: 0; }
+.results { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
+.result, .tree-item, .pl-item { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--ink); }
+.result:hover, .tree-item:hover, .pl-item:hover, .result[aria-selected="true"], .pl-item[aria-selected="true"] { background: var(--sel); }
+.tree-item[aria-current="true"] { background: var(--sel); box-shadow: inset 2px 0 0 var(--saffron); }
+.tree-item .count, .result .where { margin-left: auto; color: var(--faint); font-size: 12px; }
+.tree-pkg { font-weight: 600; color: var(--muted); }
+.tree-children { margin-left: 12px; border-left: 1px dashed var(--line-2); padding-left: 6px; }
+.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; background: currentColor; }
+.kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); flex: none; }
+.kind.class { color: var(--violet); } .kind.function { color: var(--teal); } .kind.method { color: var(--saffron); } .kind.file { color: var(--ink); }
+.insight { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: linear-gradient(135deg, var(--bg-2), transparent); padding: 9px 11px; border-radius: 12px; margin-bottom: 6px; cursor: pointer; }
+.insight:hover { border-color: var(--saffron); }
+.insight b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
+.insight span { font-size: 13px; }
+
+/* stage */
+.stage-wrap { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0; }
+.stage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 12px 16px 8px; }
+.stage-head h1 { margin: 0; font-size: 18px; letter-spacing: .01em; }
+.stage-head p { margin: 2px 0 0; font-size: 13px; }
+.stage-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
+.chip { border: 1px solid var(--line-2); background: transparent; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
+.chip[aria-pressed="true"] { color: var(--ink); background: var(--sel); border-color: var(--saffron); }
+.stage { position: relative; margin: 0 12px 12px; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; min-height: 0;
+  background: radial-gradient(circle at 50% 50%, rgba(155, 135, 255, .07), transparent 70%), var(--bg-2); }
+.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
+  background-image: radial-gradient(1px 1px at 20% 30%, var(--faint), transparent), radial-gradient(1px 1px at 70% 80%, var(--faint), transparent),
+    radial-gradient(1px 1px at 40% 70%, var(--faint), transparent), radial-gradient(1px 1px at 85% 25%, var(--faint), transparent),
+    radial-gradient(1.5px 1.5px at 55% 15%, var(--muted), transparent); background-size: 260px 260px; }
+.canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
+.canvas.dragging { cursor: grabbing; }
+.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
+.legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); background: var(--panel); padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); max-width: 70%; }
+.legend i { display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 2px; }
+.hint:empty { display: none; }
+.hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 12px; color: var(--muted); background: var(--panel); padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); pointer-events: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
+
+/* svg graph */
+.edge { fill: none; stroke: var(--line-2); stroke-width: 1.2; transition: opacity .25s, stroke .25s; }
+.edge.imports { stroke: rgba(155, 135, 255, .35); }
+.edge.calls { stroke: rgba(61, 214, 198, .5); }
+.edge.inherits { stroke: rgba(255, 111, 145, .6); stroke-dasharray: 5 4; }
+.edge.cycle { stroke: var(--rose); stroke-width: 2; }
+.edge.hot { stroke: var(--saffron); stroke-width: 2.2; stroke-dasharray: 7 6; animation: flow 1.1s linear infinite; opacity: 1 !important; }
+.edge.hot.calls { stroke: var(--teal); }
+@keyframes flow { to { stroke-dashoffset: -26; } }
+.node { cursor: pointer; transition: opacity .25s; }
+.node circle.core { stroke: rgba(255, 255, 255, .55); stroke-width: 1; transition: r .25s; }
+.node .halo { opacity: 0; transition: opacity .25s; }
+.node:hover .halo, .node.hot .halo, .node.selected .halo { opacity: .9; }
+.node.selected circle.core { stroke: var(--saffron); stroke-width: 3; }
+.node text { fill: var(--ink); font-size: 11px; paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; pointer-events: none; }
+.node text.sub { fill: var(--muted); font-size: 9.5px; }
+.dim .node:not(.hot):not(.selected) { opacity: .16; }
+.dim .edge:not(.hot) { opacity: .06; }
+.pkg-halo { fill: var(--line); stroke: var(--line-2); stroke-dasharray: 2 6; }
+.pkg-label { fill: var(--faint); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.ring { fill: none; stroke: var(--line-2); stroke-dasharray: 3 7; }
+.ring-label { fill: var(--faint); font-size: 11px; }
+.ripple { fill: none; stroke: var(--saffron); stroke-width: 2; opacity: 0; }
+.ripple.go { animation: ripple 1.6s ease-out forwards; }
+@keyframes ripple { 0% { opacity: .9; r: 10; } 100% { opacity: 0; r: 420; } }
+.pulse { fill: var(--saffron); filter: drop-shadow(0 0 6px var(--saffron)); }
+.lane-label { fill: var(--faint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
+.box rect { stroke: var(--line-2); rx: 10; }
+.box text { fill: var(--ink); font-size: 11px; pointer-events: none; }
+
+/* treemap */
+.treemap { position: absolute; inset: 0; }
+.tm-cell { position: absolute; border: 1px solid var(--bg-2); border-radius: 6px; overflow: hidden; padding: 4px 6px; cursor: pointer; font-size: 11px; color: #160f05; transition: transform .2s, filter .2s; }
+.tm-cell:hover, .tm-cell.selected { filter: brightness(1.15); z-index: 2; outline: 2px solid var(--ink); }
+.tm-cell b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tm-cell small { opacity: .75; }
+
+/* inspector */
+.ins-head { display: flex; gap: 10px; align-items: flex-start; }
+.ins-head h2 { margin: 0; font-size: 16px; word-break: break-word; }
+.ins-path { color: var(--muted); font-size: 12px; word-break: break-all; margin-top: 2px; }
+.ins-doc { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border-left: 3px solid var(--saffron); color: var(--ink); }
+.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
+.fact { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; }
+.fact b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
+.fact span { font-size: 11px; color: var(--muted); }
+.sig { font-size: 12px; padding: 8px 10px; background: var(--code); border-radius: 10px; border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; color: var(--teal); }
+pre.src { margin: 0; font-size: 12px; line-height: 1.55; background: var(--code); border: 1px solid var(--line); border-radius: 12px; padding: 10px 0; overflow: auto; max-height: 340px; counter-reset: ln; }
+pre.src span { display: block; padding: 0 12px 0 0; white-space: pre; }
+pre.src span::before { counter-increment: ln; content: attr(data-ln); display: inline-block; width: 3.6em; padding-right: .9em; text-align: right; color: var(--faint); user-select: none; }
+.links { display: flex; flex-direction: column; gap: 2px; }
+.link { display: flex; gap: 8px; align-items: center; border: 0; background: transparent; padding: 5px 6px; border-radius: 8px; text-align: left; cursor: pointer; color: var(--ink); }
+.link:hover { background: var(--sel); }
+.link .where { margin-left: auto; color: var(--faint); font-size: 11px; }
+.actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
+.tagline { display: flex; gap: 6px; flex-wrap: wrap; }
+.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
+.empty { color: var(--muted); padding: 20px 6px; text-align: center; }
+.empty .big { font-size: 34px; display: block; margin-bottom: 6px; filter: drop-shadow(0 0 10px rgba(255, 150, 60, .5)); }
+
+/* narration (tour) */
+.narration { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; margin: 0 12px 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(135deg, rgba(255, 179, 71, .12), rgba(155, 135, 255, .08)); box-shadow: var(--shadow); }
+.narration-text p { margin: 2px 0 0; font-size: 15px; }
+.step { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--saffron); font-weight: 700; }
+.narration-ctl { display: flex; gap: 6px; }
+.dots { grid-column: 1 / -1; display: flex; gap: 5px; }
+.dots i { height: 3px; flex: 1; border-radius: 3px; background: var(--line-2); }
+.dots i.on { background: linear-gradient(90deg, var(--saffron), var(--ember)); }
+
+/* footer, palette, modal, toast */
+.foot { display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--faint); }
+.foot b { color: var(--muted); font-weight: 600; }
+.palette, .modal { position: fixed; inset: 0; background: rgba(5, 5, 15, .55); backdrop-filter: blur(3px); display: grid; place-items: start center; padding-top: 12vh; z-index: 40; }
+.palette[hidden], .modal[hidden] { display: none; }
+.palette-box, .modal-box { width: min(640px, 92vw); background: var(--panel-solid); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
+.palette-box input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 14px 16px; font-size: 15px; outline: none; }
+.palette-list { max-height: 50vh; overflow: auto; padding: 6px; }
+.modal-box { padding: 18px 20px; max-height: 76vh; overflow: auto; }
+.modal-box h2 { margin-top: 0; }
+.modal-box li { margin: 4px 0; }
+.manifest { font-size: 12px; background: var(--code); border-radius: 10px; padding: 10px; overflow: auto; border: 1px solid var(--line); }
+.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(30px); background: var(--panel-solid); border: 1px solid var(--saffron); padding: 8px 16px; border-radius: 999px; opacity: 0; transition: .25s; z-index: 60; pointer-events: none; }
+.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* responsive */
+.hide-sm { }
+@media (max-width: 1180px) { .workspace { grid-template-columns: 250px 1fr; } .inspector { position: fixed; right: 0; top: 0; bottom: 0; width: min(380px, 92vw); z-index: 30; transform: translateX(100%); transition: transform .25s; box-shadow: var(--shadow); } .inspector.open { transform: none; } }
+@media (max-width: 760px) {
+  body { overflow: auto; }
+  .app { height: auto; min-height: 100vh; }
+  .top { flex-wrap: wrap; } .tabs { order: 3; width: 100%; margin: 0; } .hide-sm { display: none; }
+  .workspace { grid-template-columns: 1fr; }
+  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; min-width: 0; }
+  .stage-wrap { min-width: 0; }
+  .stage { height: 62vh; } .stage-head { flex-direction: column; align-items: flex-start; }
+}
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+
+/* embed mode (#embed=1): a report framed inside another page shows only the tabs and the stage */
+.embed .sidebar, .embed .inspector, .embed .stats, .embed .foot, .embed .top-actions, .embed .stage-head p, .embed .legend, .embed .brand-text { display: none !important; }
+html.embed, .embed body { height: 100%; overflow: hidden; }
+.embed .app { height: 100vh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
+.embed .workspace { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr); min-height: 0; }
+.embed .stage-wrap { min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
+.embed .top { flex-wrap: nowrap; padding: 6px 10px; gap: 8px; }
+.embed .tabs { order: 0; flex: 1; min-width: 0; width: auto; margin: 0; }
+.embed .tab { padding: 5px 8px; font-size: 12px; }
+.embed .stage-head { padding: 6px 10px 4px; flex-direction: row; align-items: center; }
+.embed .stage-head h1 { font-size: 14px; }
+.embed .stage { margin: 0 8px 8px; height: auto !important; min-height: 0; }

dev_guru/reports/assets/explorer.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en" data-theme="night">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="generator" content="Dev Guru explorer">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob:; connect-src 'none'; form-action 'none'; base-uri 'none'">
+<title>{{TITLE}}</title>
+<style>{{CSS}}</style>
+</head>
+<body>
+<a class="skip" href="#inspector">Skip to inspector</a>
+<div class="app" id="app">
+  <header class="top">
+    <div class="brand">
+      <svg class="mark" viewBox="0 0 32 32" aria-hidden="true"><defs><radialGradient id="flame" cx="50%" cy="60%" r="60%"><stop offset="0" stop-color="#fff3c4"/><stop offset=".45" stop-color="#ffb347"/><stop offset="1" stop-color="#ff6b3d"/></radialGradient></defs><path d="M16 3c3 5 8 8 8 15a8 8 0 0 1-16 0c0-4 2-6 3-8 1 3 2 4 4 4-1-4 0-8 1-11z" fill="url(#flame)"/><path d="M6 25h20l-2 4H8z" fill="currentColor" opacity=".7"/></svg>
+      <div class="brand-text"><strong>Dev Guru</strong><span id="projectName">explorer</span></div>
+    </div>
+    <nav class="tabs" role="tablist" aria-label="Views" id="tabs"></nav>
+    <div class="top-actions">
+      <button class="btn ghost" id="searchBtn" title="Search (/)"><span aria-hidden="true">⌕</span><span class="hide-sm"> Search</span><kbd class="hide-sm">/</kbd></button>
+      <button class="btn ghost" id="paletteBtn" title="Command palette (Ctrl/⌘ K)"><span aria-hidden="true">⌘</span><span class="hide-sm"> Commands</span></button>
+      <button class="btn ghost icon" id="themeBtn" aria-label="Toggle light and dark theme" title="Theme">◐</button>
+      <button class="btn ghost icon" id="infoBtn" aria-label="About this report and its limitations" title="About">ⓘ</button>
+    </div>
+  </header>
+  <div class="stats" id="stats" aria-label="Project summary"></div>
+  <div class="workspace">
+    <aside class="sidebar" id="sidebar" aria-label="Repository">
+      <label class="search"><span aria-hidden="true">⌕</span><input id="search" type="search" placeholder="Find files, classes, functions…" autocomplete="off" aria-label="Find files and symbols"></label>
+      <div id="results" class="results" role="listbox" aria-label="Search results" hidden></div>
+      <section class="insights" id="insights" aria-label="Insights"></section>
+      <h2 class="eyebrow">Packages</h2>
+      <div id="tree" class="tree" role="tree" aria-label="Packages and files"></div>
+    </aside>
+    <main class="stage-wrap" id="main">
+      <div class="stage-head">
+        <div><h1 id="viewTitle">Constellation</h1><p id="viewDesc" class="muted"></p></div>
+        <div class="stage-tools" id="stageTools"></div>
+      </div>
+      <div class="stage" id="stage" tabindex="0" aria-label="Interactive graph. Use the sidebar for keyboard navigation.">
+        <svg id="svg" class="canvas" role="img" aria-labelledby="viewTitle"></svg>
+        <div id="treemap" class="treemap" hidden></div>
+        <div class="zoom" id="zoomTools">
+          <button class="btn icon" id="zoomIn" aria-label="Zoom in">+</button>
+          <button class="btn icon" id="zoomOut" aria-label="Zoom out">−</button>
+          <button class="btn icon" id="fitBtn" aria-label="Fit to screen">⤢</button>
+        </div>
+        <div class="legend" id="legend" aria-hidden="true"></div>
+        <div class="hint" id="hint"></div>
+      </div>
+      <div class="narration" id="narration" aria-live="polite" hidden>
+        <div class="narration-text"><span class="step" id="tourStep"></span><p id="tourText"></p></div>
+        <div class="narration-ctl">
+          <button class="btn icon" id="tourPrev" aria-label="Previous step">‹</button>
+          <button class="btn" id="tourPlay">❚❚ Pause</button>
+          <button class="btn icon" id="tourNext" aria-label="Next step">›</button>
+        </div>
+        <div class="dots" id="tourDots" aria-hidden="true"></div>
+      </div>
+    </main>
+    <aside class="inspector" id="inspector" aria-label="Inspector" tabindex="-1"><div id="inspectBody"></div></aside>
+  </div>
+  <footer class="foot" id="foot"></footer>
+</div>
+<div class="palette" id="palette" role="dialog" aria-modal="true" aria-label="Command palette" hidden>
+  <div class="palette-box"><input id="paletteInput" placeholder="Jump to a file or symbol, or type a command…" aria-label="Command"><div id="paletteList" class="palette-list" role="listbox"></div></div>
+</div>
+<div class="modal" id="about" role="dialog" aria-modal="true" aria-labelledby="aboutTitle" hidden><div class="modal-box" id="aboutBody"></div></div>
+<div class="toast" id="toast" role="status" aria-live="polite"></div>
+<script type="application/json" id="dg-data">{{DATA}}</script>
+<script type="application/json" id="dg-manifest">{{MANIFEST}}</script>
+<script>{{JS}}</script>
+</body>
+</html>