<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Doctrine Map Explorer</title>
<link rel="stylesheet" href="/assets/style.css">
<link rel="stylesheet" href="/vendor/github-markdown.css">
<script src="/vendor/markdown-it.min.js"></script>
<script src="/vendor/purify.min.js"></script>
</head>
<body>
<div class="layout">
<aside class="sidebar">
<input type="text" class="search-input" placeholder="Search entities...">
<button class="refresh-btn">Refresh</button>
<div class="filter-area">
<div class="filter-header">
<span class="filter-label">Filter by kind</span>
<label class="filter-toggle-all"><input type="checkbox" class="toggle-all-cb" checked> all</label>
</div>
<div class="filter-grid">
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="PRD,SPEC"> <span class="kind-abbrev">PRD/SPEC</span> <span class="kind-desc">Products / Specs</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="ADR,POL"> <span class="kind-abbrev">ADR/POL</span> <span class="kind-desc">Decisions / Policies</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="STD"> <span class="kind-abbrev">STD</span> <span class="kind-desc">Standards</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="SL"> <span class="kind-abbrev">SL</span> <span class="kind-desc">Slices</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="ISS,IMP,CHR,RSK"> <span class="kind-abbrev">ISS/IMP/CHR/RSK</span> <span class="kind-desc">Issues / Risks / Chores</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="REV"> <span class="kind-abbrev">REV</span> <span class="kind-desc">Revisions</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="RV"> <span class="kind-abbrev">RV</span> <span class="kind-desc">Reviews</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="REQ"> <span class="kind-abbrev">REQ</span> <span class="kind-desc">Requirements</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="IDE"> <span class="kind-abbrev">IDE</span> <span class="kind-desc">Ideas</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="REC"> <span class="kind-abbrev">REC</span> <span class="kind-desc">Records</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="ASM,DEC"> <span class="kind-abbrev">ASM/DEC</span> <span class="kind-desc">Assumptions / Decisions</span></label>
<label class="kind-checkbox"><input type="checkbox" checked data-kinds="QUE,CON"> <span class="kind-abbrev">QUE/CON</span> <span class="kind-desc">Questions / Concerns</span></label>
</div>
</div>
<ul class="entity-list">
<li class="entity-item">
<span class="entity-title">Example Slice</span>
<span class="kind-pill" style="background: var(--kind-SL)">SL</span>
</li>
<li class="entity-item">
<span class="entity-title">Example ADR</span>
<span class="kind-pill" style="background: var(--kind-ADR)">ADR</span>
</li>
<li class="entity-item">
<span class="entity-title">Example Requirement</span>
<span class="kind-pill" style="background: var(--kind-REQ)">REQ</span>
</li>
</ul>
<div class="edge-legend">
<span class="legend-label">Edge types</span>
<div class="legend-items">
<div class="legend-item" data-labels="depends,requires"><span class="legend-swatch" style="background:#888"></span> depends / requires</div>
<div class="legend-item" data-labels="refines,details"><span class="legend-swatch" style="background:#4A90D9"></span> refines / details</div>
<div class="legend-item" data-labels="implements,satisfies"><span class="legend-swatch" style="background:#27AE60"></span> implements / satisfies</div>
<div class="legend-item" data-labels="blocks"><span class="legend-swatch" style="background:#C0392B"></span> blocks</div>
<div class="legend-item" data-labels="parent,child"><span class="legend-swatch" style="background:#7B4FBF"></span> parent / child</div>
<div class="legend-item" data-labels="related,see also"><span class="legend-swatch" style="background:#95A5A6"></span> related / see also</div>
<div class="legend-item" data-labels="resolves,addresses"><span class="legend-swatch" style="background:#E67E22"></span> resolves / addresses</div>
</div>
</div>
</aside>
<main class="main">
<div class="focus-header">
<span class="placeholder">Entity title — kind · status</span>
</div>
<div class="graph-area">
<span class="placeholder">[Graphviz SVG will render here]</span>
</div>
<div class="depth-selector">
<span class="depth-label">Depth</span>
<button class="depth-btn" data-depth="0">0</button>
<button class="depth-btn active" data-depth="1">1</button>
<button class="depth-btn" data-depth="2">2</button>
<button class="depth-btn" data-depth="3">3</button>
</div>
<div class="table-toggle">
<label><input type="checkbox" id="hide-relations"> Hide relations table</label>
</div>
<div class="hover-detail">
<span class="placeholder">Hover a node for details</span>
</div>
<table class="relationship-table">
<thead>
<tr>
<th>src_id</th>
<th>src_title</th>
<th>label</th>
<th>tgt_id</th>
<th>tgt_title</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5"><span class="placeholder">[Relationship table]</span></td>
</tr>
</tbody>
</table>
<div class="markdown-pane">
<span class="placeholder">[Markdown content]</span>
</div>
</main>
</div>
<script src="/assets/api.js"></script>
<script src="/assets/model.js"></script>
<script src="/assets/router.js"></script>
<script src="/assets/dot.js"></script>
<script src="/assets/app.js"></script>
</body>
</html>