Component Widgets

@@ -1,41 +1,58 @@ # Component Widgets -One home for the reusable widgets you can drop into any component or molecule **readme**. Each is a self-contained web component — no build, no dependencies — with a matching **iframe viewer** for embedding in wiki readmes.+One home for the reusable widgets you can drop into any component or molecule page. Each is a self-contained web component — no build, no dependencies. -**Shared contract:** feed each widget via `src="…json"`, an inline `<script type="application/json">`, or `el.data = {…}`. Shadow-DOM isolated, light + dark. They all speak the **adom-lbr cross-highlight bus** (`BroadcastChannel('lbr-hover')` + parent relay), so any widgets on a page light up together on hover — pinout, footprint, 3D, all keyed on pin number.+**How they work:** feed each widget via `src="…json"`, an inline `<script type="application/json">`, or `el.data = {…}`. Shadow-DOM isolated, light + dark. They all speak the **adom-lbr cross-highlight bus** (`BroadcastChannel('lbr-hover')`), so any widgets on a page light up together on hover — pinout, footprint, 3D, keyed on pin number. -## Embedding in a wiki readme+Each widget below shows a **rendered example** + the tag to instantiate it. The images are static; for the interactive version embed the matching `*-viewer.html` (e.g. `files/pinout-viewer.html?src=…`) where live embeds are supported, or drop the raw `<adom-*>` tag into any HTML page — the `*-widget.js` files are attached. -The readme sandbox embeds via **iframes** (the same pattern as the adom-lbr slots), not inline scripts. Each widget ships a `*-viewer.html` that takes `?src=` / `?part=` (or `postMessage`) and auto-grows the host via `readme-height`:+## Pinout — `<adom-pinout>`+Datasheet-style chip diagram: pins on the sides, colored by type, exposed pad centered. Cross-highlights with the table and every other widget.++![Pinout example](files/example-pinout.png)  ```html-<iframe src="files/pinout-viewer.html?src=pinout-stm32f103.json" style="width:100%;border:0"></iframe>-<iframe src="files/heatsink-viewer.html?part=MCP23017" style="width:100%;border:0"></iframe>+<adom-pinout src="stm32.json"></adom-pinout>+<!-- { mpn, package, pins:[{number,name,type?,xy?}] } · degrades rich xy → inferred quad/dual --> ``` -Outside the wiki (any HTML page) you can also use the raw tag: `<script src="files/pinout-widget.js">` then `<adom-pinout>`.+## Heat-sink via — `<adom-heatsink-via>` · new+The recommended thermal-via array under the exposed pad — **only renders when the part actually has an exposed pad**, otherwise an empty state.++![Heat-sink via example](files/example-heatsink.png) -## The widgets+```html+<adom-heatsink-via><script type="application/json">+{ "mpn":"MCP23017", "package":"QFN-28-1EP…EP4.25x4.25mm" }   <!-- EP from name / pads / explicit ep:{} -->+</script></adom-heatsink-via>+``` -| Widget | Tag | Viewer | |-|---|---|---|---|-| **Pinout** | `<adom-pinout>` | `pinout-viewer.html` | datasheet-style chip diagram, EP centered |-| **Heat-sink via** · new | `<adom-heatsink-via>` | `heatsink-viewer.html` | thermal-via array under the EP; **only when the part has one** |-| **Chip thumbnail** · new | `<adom-chip-thumbnail>` | `thumbnail-viewer.html` | rendered part image (glb2png) |-| **Ganged molecule** · new | `<adom-molecule>` | `molecule-viewer.html` | a molecule's part set + nets; hover a net → its parts |-| **Symbol · Footprint · 3D** | — | **adom-lbr** | its viewers own these (layer stackup, pin table, per-lead 3D). Embed, don't rebuild. |-| **Datasheet** | — | native viewer | push the PDF; renders inline with pop-out |+## Ganged molecule — `<adom-molecule>` · new+A molecule as its ganged part set + how they connect. Hover a net → its parts; hover a part → its nets. -Data shapes: pinout `{mpn,package,pins:[{number,name,type?,xy?}]}` · heat-sink `{mpn,package}` (EP from name) / `{pads:[{number,x_mm,y_mm}]}` / `{ep:{w_mm,h_mm}}` · molecule `{name,components:[{ref,mpn,value?,package?,type?}],nets:[{name,pins:[{ref,pin}]}]}` · thumbnail `{src,mpn,package}`.+![Molecule example](files/example-molecule.png) ----+```html+<adom-molecule><script type="application/json">+{ "name":"…", "components":[{ref,mpn,value?,package?,type?}], "nets":[{name,pins:[{ref,pin}]}] }+</script></adom-molecule>+```++## Chip thumbnail — `<adom-chip-thumbnail>` · new+A small rendered image of the actual part (glb2png / the chip-thumbnailer off its GLB).++![Chip thumbnail example](files/example-thumbnail.png) -## Live+```html+<adom-chip-thumbnail src="thumb.png" mpn="74HC00" package="SOIC-14"></adom-chip-thumbnail>+``` -<iframe src="files/pinout-viewer.html?src=pinout-stm32f103.json&theme=dark" style="width:100%;max-width:700px;border:0" height="470" scrolling="no"></iframe>+## Symbol · Footprint · 3D — **adom-lbr**+Provided by **adom-lbr**'s viewers (canonical adom-lbr JSON, footprint layer stackup KiCad + Altium, first-class pin table, per-lead 3D highlight). Embed the adom-lbr slot/viewer — don't reimplement. They already share the `lbr-hover` bus, so they cross-link with the widgets above. -<iframe src="files/heatsink-viewer.html?src=heatsink-mcp23017.json&theme=dark" style="width:100%;max-width:700px;border:0" height="300" scrolling="no"></iframe>+## Datasheet — native viewer+Push the part's PDF; the native datasheet viewer renders it inline with pop-out. No widget to build. -<iframe src="files/molecule-viewer.html?src=mol-stm32f103.json&theme=dark" style="width:100%;max-width:700px;border:0" height="300" scrolling="no"></iframe>+--- -<iframe src="files/thumbnail-viewer.html?src=thumb-74hc00.png&mpn=74HC00&package=SOIC-14&theme=dark" style="width:230px;border:0" height="250" scrolling="no"></iframe>+**Attached:** `pinout-widget.js` · `heatsink-via-widget.js` · `chip-thumbnail-widget.js` · `molecule-widget.js` — plus each widget's `*-viewer.html` (iframe-embeddable, `?src=`/`?part=`/postMessage, `readme-height` auto-grow) and the example JSON sources.