Publish a Hardware Component to the Adom Wiki

<meta charset="utf-8">
<title>Feeder Reader — wiki page preview (readme-frame mirror)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  Mirrors how wiki.adom.inc actually hosts a README:
    · the page body is ONE iframe (#readme-frame)
    · sandboxed "allow-scripts allow-downloads" — NO allow-same-origin, so the document
      inside is an opaque origin: relative URLs 404, storage throws, nested src= iframes
      are blocked (publish skill §8k)
    · the host listens for postMessage({type:"readme-height"}) and grows the frame,
      which is what makes the page one seamless scroll (§8k-0b)
  If it looks right here, it will look right on the wiki.
-->
<style>
  :root{ --bg:#0f141a; --ink:#e8eef5; --dim:#8fa2b6; --line:rgba(255,255,255,.10); }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif}
  header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;
    padding:9px 18px;background:rgba(15,20,26,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);font-size:12.5px}
  header b{font-weight:650}
  header .path{color:var(--dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
  header .spacer{margin-left:auto}
  header .badge{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.3);
    color:#8fe6b0;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600}
  header .warn{background:rgba(245,165,36,.13);border:1px solid rgba(245,165,36,.32);
    color:#f0cf9a;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600}
  #hero{display:block;width:100%;height:auto}
  #readme-frame{display:block;width:100%;border:0;min-height:600px;background:#151b23}
  #hud{position:fixed;right:14px;bottom:14px;z-index:11;background:rgba(10,15,22,.9);
    border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:11px;color:var(--dim);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  #hud b{color:#dce6f2}
</style>

<header>
  <b>Adom Wiki</b>
  <span class="path">aravk / feeder-reader</span>
  <span class="badge">readme-frame mirror</span>
  <span class="spacer"></span>
  <span class="warn">LOCAL MOCK — not published</span>
</header>

<!-- the page hero: rendered in Hero Component Studio, composited in Hero Studio.
     On the wiki this is set with `adom-wiki page hero` and drawn by the page chrome,
     not by README.html — so it lives here in the mirror, above the frame. -->
<img id="hero" src="screenshots/hero.png" alt="Feeder Reader hero">

<iframe id="readme-frame" src="README.html"
        sandbox="allow-scripts allow-downloads"
        title="Feeder Reader page"></iframe>

<div id="hud">frame height: <b id="h">—</b> · resize msgs: <b id="n">0</b></div>

<script>
  // This is the wiki's app.js behaviour, reproduced: grow the frame to the height the
  // README reports, clamped 120–16000px.
  var frame = document.getElementById('readme-frame'), n = 0;
  addEventListener('message', function (ev) {
    var d = ev.data;
    if (!d || (d.type !== 'readme-height' && d.type !== 'resize')) return;
    var h = Math.max(120, Math.min(16000, +d.height || 0));
    frame.style.minHeight = '0';
    frame.style.height = h + 'px';
    document.getElementById('h').textContent = h + 'px';
    document.getElementById('n').textContent = ++n;
  });
</script>