Adom Hydrogen

@@ -73,6 +73,35 @@ several, each with its own id, name, mark, launch command and port, sharing the and page. adom/adom-vscode ships Claude usage and Codex usage that way; the curated list names each by repo plus id, so they are separate rows in the pulldown and open and close on their own. +## Who draws what: the widget's two canvases++A Hydrogen Widget has two canvases, and everything inside them is yours. Everything around them is+Hydrogen's.++![Who draws what: the slot canvas in the Title Bar and the card canvas in the hover card are drawn by the widget; the slot's edge, its height, the close button, and the card's frame, header, pin and Details are drawn by Hydrogen](widgets/who-draws-what.svg)++| Part | Who draws it | How you control it |+|---|---|---|+| **Slot canvas** (everything inside the slot) | your widget | your page at `launch.port`; draw anything |+| Slot width | your widget | `postMessage({hdWidget: {width}})` after each render, 48 to 320 px; the manifest's `width` / `width_tall` are only the first guess |+| Slot height | Hydrogen | 38 px in the full Title Bar, 20 px compact; pick your layout by height |+| Slot edge, close button | Hydrogen | |+| **Card canvas** (the live view in the hover card) | your widget | `postMessage({hdWidget: {expand: {width, height, path}}})`, 280 to 720 by 120 to 600 px; the card loads a second copy of your page, or the page at `path` on your own origin, and your page picks its big layout by height |+| Card body with no `expand` | Hydrogen | shows your `brief` as text |+| Card frame, header (name and icon), pin, Details | Hydrogen | filled from your `name`, `icon`, `about`, `refresh`, `docs`; Details adds the port, the log and the links |+| When the card shows | Hydrogen | 1.2 s of hover, click to pin, Escape or click outside to close; forward Escape from inside your page with `{hdWidget: {collapse: true}}` |+| Pulldown row | Hydrogen | your `name`, `icon`, `brief`, `docs` |+| Install, launch, health, restart | Hydrogen | your `install`, `launch` and `health` |++**The rule:** anything inside a canvas changes the moment you publish your package, with no Hydrogen+release. Anything outside one changes only with a Hydrogen release, which is why it is kept to+chrome that every widget shares.++Before Hydrogen 1.0.609 the card did not load its own copy: it moved the slot's frame into the card,+so the slot was left empty and Hydrogen drew a stand-in there ("Codex usage / Expanded below"),+clipped in a narrow slot. From 1.0.609 the slot always shows your page, and Hydrogen draws nothing+inside either canvas.+ ## Making your own  A Hydrogen Widget is a facet a wiki repo carries: a `hydrogen-widget.json` at its root, next to its dock

@@ -0,0 +1,77 @@+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 640" width="960" height="640" font-family="system-ui, -apple-system, Segoe UI, sans-serif">+  <defs>+    <pattern id="mine" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">+      <rect width="8" height="8" fill="#0c2a2b"/>+      <line x1="0" y1="0" x2="0" y2="8" stroke="#0f3b3c" stroke-width="4"/>+    </pattern>+    <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">+      <path d="M0,0 L10,5 L0,10 z" fill="#8b98a8"/>+    </marker>+  </defs>+  <rect width="960" height="640" fill="#0d1117"/>++  <!-- legend -->+  <rect x="32" y="24" width="18" height="18" rx="3" fill="url(#mine)" stroke="#00b8b1" stroke-width="2" stroke-dasharray="4 3"/>+  <text x="58" y="38" fill="#e6edf3" font-size="14" font-weight="600">Your widget draws it</text>+  <text x="236" y="38" fill="#8b98a8" font-size="13">(your page; changes when you publish your package)</text>+  <rect x="32" y="52" width="18" height="18" rx="3" fill="#1b2230" stroke="#a78bfa" stroke-width="2"/>+  <text x="58" y="66" fill="#e6edf3" font-size="14" font-weight="600">Hydrogen draws it</text>+  <text x="222" y="66" fill="#8b98a8" font-size="13">(filled from your hydrogen-widget.json; changes only with a Hydrogen release)</text>++  <!-- title bar -->+  <text x="32" y="110" fill="#8b98a8" font-size="12" letter-spacing="1">TITLE BAR</text>+  <rect x="32" y="118" width="896" height="56" rx="6" fill="#161b22" stroke="#30363d"/>+  <circle cx="62" cy="146" r="11" fill="#00b8b1"/>+  <text x="84" y="151" fill="#8b98a8" font-size="12">Adom menu</text>+  <!-- other widget -->+  <rect x="300" y="127" width="92" height="38" rx="6" fill="#1b2230" stroke="#a78bfa" stroke-width="2"/>+  <rect x="304" y="131" width="84" height="30" rx="3" fill="url(#mine)" stroke="#00b8b1" stroke-width="1.5" stroke-dasharray="4 3"/>+  <text x="346" y="151" fill="#cfe9e8" font-size="11" text-anchor="middle">Clock</text>+  <!-- the slot -->+  <rect x="404" y="127" width="190" height="38" rx="6" fill="#1b2230" stroke="#a78bfa" stroke-width="2"/>+  <rect x="408" y="131" width="182" height="30" rx="3" fill="url(#mine)" stroke="#00b8b1" stroke-width="1.5" stroke-dasharray="4 3"/>+  <text x="499" y="145" fill="#e6edf3" font-size="12" font-weight="600" text-anchor="middle">SLOT CANVAS</text>+  <text x="499" y="158" fill="#9fd8d5" font-size="10.5" text-anchor="middle">your page, always here</text>+  <circle cx="586" cy="131" r="7" fill="#1b2230" stroke="#a78bfa" stroke-width="1.5"/>+  <text x="586" y="135" fill="#e6edf3" font-size="10" text-anchor="middle">×</text>+  <!-- right side -->+  <rect x="612" y="136" width="20" height="20" rx="4" fill="none" stroke="#8b98a8"/>+  <text x="640" y="151" fill="#8b98a8" font-size="12">Widgets pulldown</text>+  <text x="760" y="151" fill="#8b98a8" font-size="12">CPU · RAM · bell · you</text>++  <!-- slot callouts -->+  <line x1="499" y1="178" x2="499" y2="210" stroke="#8b98a8" marker-end="url(#arr)"/>+  <text x="32" y="232" fill="#e6edf3" font-size="13" font-weight="600">Slot</text>+  <text x="32" y="252" fill="#9fd8d5" font-size="12.5">Widget: everything inside, and the width (postMessage {hdWidget:{width}}, 48 to 320 px).</text>+  <text x="32" y="271" fill="#c4b5fd" font-size="12.5">Hydrogen: the edge, the height (38 px full bar, 20 px compact: choose your layout by height),</text>+  <text x="32" y="290" fill="#c4b5fd" font-size="12.5">the close × on hover, and when a card opens (hover 1.2 s, click to pin, Escape to close).</text>++  <!-- the card -->+  <text x="404" y="330" fill="#8b98a8" font-size="12" letter-spacing="1">HOVER CARD</text>+  <line x1="499" y1="300" x2="499" y2="336" stroke="#8b98a8" stroke-dasharray="3 3"/>+  <rect x="404" y="338" width="400" height="282" rx="8" fill="#1b2230" stroke="#a78bfa" stroke-width="2"/>+  <circle cx="428" cy="363" r="9" fill="#0d1117" stroke="#8b98a8"/>+  <text x="446" y="368" fill="#e6edf3" font-size="14" font-weight="600">Codex usage</text>+  <text x="780" y="368" fill="#8b98a8" font-size="13" text-anchor="end">pin</text>+  <rect x="418" y="384" width="372" height="170" rx="5" fill="url(#mine)" stroke="#00b8b1" stroke-width="1.5" stroke-dasharray="4 3"/>+  <text x="604" y="456" fill="#e6edf3" font-size="13" font-weight="600" text-anchor="middle">CARD CANVAS</text>+  <text x="604" y="476" fill="#9fd8d5" font-size="11.5" text-anchor="middle">a second copy of your page (or expand.path),</text>+  <text x="604" y="492" fill="#9fd8d5" font-size="11.5" text-anchor="middle">sized by your expand request</text>+  <line x1="418" y1="566" x2="790" y2="566" stroke="#30363d"/>+  <text x="420" y="590" fill="#e6edf3" font-size="13">› Details</text>+  <text x="420" y="608" fill="#8b98a8" font-size="11">about, refresh, port, log, repo, docs, SDK</text>++  <!-- card callouts -->+  <text x="32" y="372" fill="#e6edf3" font-size="13" font-weight="600">Card</text>+  <text x="32" y="394" fill="#9fd8d5" font-size="12.5">Widget: the live view</text>+  <text x="32" y="412" fill="#9fd8d5" font-size="12.5">{hdWidget:{expand:{width,height,path}}}</text>+  <text x="32" y="430" fill="#9fd8d5" font-size="12.5">280 to 720 × 120 to 600 px.</text>+  <text x="32" y="452" fill="#9fd8d5" font-size="12.5">No expand: your brief, as text.</text>+  <text x="32" y="482" fill="#c4b5fd" font-size="12.5">Hydrogen: the frame, header</text>+  <text x="32" y="500" fill="#c4b5fd" font-size="12.5">(name, icon from your manifest),</text>+  <text x="32" y="518" fill="#c4b5fd" font-size="12.5">pin, and Details (your about,</text>+  <text x="32" y="536" fill="#c4b5fd" font-size="12.5">refresh, docs; its port and log).</text>+  <line x1="322" y1="438" x2="414" y2="458" stroke="#00b8b1" marker-end="url(#arr)"/>+  <line x1="300" y1="500" x2="400" y2="586" stroke="#a78bfa" marker-end="url(#arr)"/>+  <line x1="300" y1="490" x2="414" y2="368" stroke="#a78bfa" marker-end="url(#arr)"/>+</svg>