Component Widgets

@@ -1,58 +1,69 @@ # Component Widgets -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.+> **This page renders `readme.html`, not this file.** `readme.html` shadows `README.md`+> on the wiki page (the Overview tab serves the HTML in a sandboxed, script-running+> iframe), so the four widgets below are **live and interactive on the page**, not+> images. This README stays for the Files tab, `repo clone`, and git tooling. -**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.+One home for the reusable widgets you drop into any component or molecule page. Each is a+self-contained web component — no build, no dependencies. -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.+**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')`): the+pin-keyed widgets (pinout, footprint, 3D, heat-sink via) light up the same pin together on+hover.  ## 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)+Datasheet-style chip diagram: pins on the sides, colored by type, exposed pad centered. The+diagram and the table cross-highlight each other. Give it real pad `xy` and it lays out from+the true footprint; omit it and it infers a quad/dual package.  ```html-<adom-pinout src="stm32.json"></adom-pinout>-<!-- { mpn, package, pins:[{number,name,type?,xy?}] } · degrades rich xy → inferred quad/dual -->+<adom-pinout><script type="application/json">+{ "mpn": "…", "package": "…", "pins": [ { "number": 1, "name": "…", "type": "…", "xy": [x,y] } ] }+</script></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 recommended thermal-via array under the exposed pad (via count, drill, pitch). **Only+renders when the part actually has an exposed pad**, otherwise an empty state. Keyed on the+EP's pin number so it lights when you hover that pad in the pinout/footprint.  ```html <adom-heatsink-via><script type="application/json">-{ "mpn":"MCP23017", "package":"QFN-28-1EP…EP4.25x4.25mm" }   <!-- EP from name / pads / explicit ep:{} -->+{ "mpn": "MCP23017", "package": "QFN-28-1EP…EP4.25x4.25mm", "ep": { "w_mm": 4.25, "h_mm": 4.25, "number": 29 } } </script></adom-heatsink-via> ```  ## 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. -![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}]}] }+{ "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)+A small rendered image of the actual part (`glb2png` / the chip-thumbnailer off its GLB).  ```html <adom-chip-thumbnail src="thumb.png" mpn="74HC00" package="SOIC-14"></adom-chip-thumbnail> ```  ## 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.+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.  ## Datasheet — native viewer Push the part's PDF; the native datasheet viewer renders it inline with pop-out. No widget to build.  --- -**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.+**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. `readme.html` is the+built, self-contained page (widget JS + fonts + data all inlined) that the wiki renders.