<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="Nido Groundwork catalog explorer: public-safe capability metadata, release gates, and adoption status."
/>
<meta name="theme-color" content="#101417" />
<title>Nido Groundwork</title>
<link rel="manifest" href="./manifest.webmanifest" />
<link rel="icon" href="./icons/icon-192.png" />
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="app-shell">
<header class="topbar">
<a class="brand" href="#catalog" aria-label="Nido Groundwork">
<img class="brand-mark" src="./icons/icon-192.png" alt="" />
<span class="brand-copy">
<span class="brand-name">Nido</span>
<span class="brand-scope">Groundwork</span>
</span>
</a>
<div class="topbar-status" aria-label="Catalog summary">
<span><strong data-total-count>0</strong> capabilities</span>
<span><strong data-gated-count>0</strong> release-gated</span>
<span><strong data-layer-count>0</strong> layers</span>
</div>
</header>
<main class="workbench" id="catalog">
<aside class="control-pane" aria-label="Catalog controls">
<label class="search-box">
<span>Search</span>
<input
id="search"
type="search"
autocomplete="off"
placeholder="role, layer, summary"
/>
</label>
<section class="filter-group" aria-labelledby="layer-heading">
<h2 id="layer-heading">Layers</h2>
<div class="filter-grid" id="layerFilters"></div>
</section>
<section class="filter-group" aria-labelledby="policy-heading">
<h2 id="policy-heading">Policy</h2>
<div class="segmented" role="group" aria-label="Release gate">
<button type="button" data-gate="all" aria-pressed="true">All</button>
<button type="button" data-gate="standard">Standard</button>
<button type="button" data-gate="license-review">Review</button>
</div>
<div class="segmented" role="group" aria-label="Adoption status">
<button type="button" data-adoption="all" aria-pressed="true">Any</button>
<button type="button" data-adoption="catalog-only">Catalog</button>
<button type="button" data-adoption="bundled">Bundled</button>
</div>
</section>
<section class="compare-pane" aria-labelledby="compare-heading">
<h2 id="compare-heading">Compare</h2>
<div id="compareList" class="compare-list"></div>
</section>
</aside>
<section class="catalog-pane" aria-label="Capability catalog">
<div class="summary-grid" aria-label="Current result summary">
<article class="summary-tile">
<span class="summary-label">Visible</span>
<strong data-visible-count>0</strong>
</article>
<article class="summary-tile">
<span class="summary-label">Standard</span>
<strong data-standard-count>0</strong>
</article>
<article class="summary-tile warning">
<span class="summary-label">Review</span>
<strong data-review-count>0</strong>
</article>
</div>
<div class="catalog-toolbar">
<label>
<span>Sort</span>
<select id="sort">
<option value="role">Role</option>
<option value="layer">Layer</option>
<option value="gate">Release gate</option>
</select>
</label>
<button class="ghost-button" id="clearFilters" type="button">Reset</button>
</div>
<div id="catalogList" class="catalog-list" role="list"></div>
</section>
<aside class="detail-pane" id="details" aria-live="polite"></aside>
</main>
<section class="quality-strip" aria-label="Pages quality gates">
<article>
<strong>Public-safe</strong>
<span>No private hostnames, tokens, registry defaults, or workstation paths in the artifact.</span>
</article>
<article>
<strong>Offline-ready</strong>
<span>Service worker caches the shell and generated catalog data for repeat visits.</span>
</article>
<article>
<strong>E2E-covered</strong>
<span>Browser tests exercise search, filters, detail state, mobile layout, and asset loading.</span>
</article>
</section>
</div>
<script type="module" src="./app.js"></script>
</body>
</html>