Component Widgets

@@ -0,0 +1,101 @@+---+name: component-widgets+description: >-+  Reusable, dependency-free web-component widgets to drop into any component or+  molecule page: <adom-pinout> (datasheet-style pin diagram + table),+  <adom-heatsink-via> (exposed-pad thermal via array), <adom-molecule> (ganged+  part set + nets), <adom-chip-thumbnail> (rendered part image). Self-contained+  (Shadow DOM, no deps, light + dark), fed by inline JSON or el.data, and all on+  one lbr-hover cross-highlight bus. Use when building a wiki component page's+  readme.html, or any HTML page, that needs a live pinout, a thermal-via pattern,+  a molecule/sub-circuit view, or a part thumbnail. Symbol/footprint/3D are NOT+  here (use adom-lbr). Trigger words: pinout widget, adom-pinout, pin diagram,+  heat-sink via, thermal via array, exposed pad vias, molecule widget, ganged+  components, chip thumbnail, component page widgets, readme-drop-in widget.+user-invocable: true+---++# Component Widgets++Four reusable web components for component/molecule pages. Each is one custom+element, self-contained (Shadow DOM, no dependencies), theme-aware (light + dark,+or pin `theme="dark"|"light"`), and fed three ways:++- inline: `<adom-x><script type="application/json">{ ... }</script></adom-x>`+- property: `document.querySelector('adom-x').data = { ... }`+- fetch: `<adom-x src="data.json"></adom-x>` (only where network is allowed)++Installed to `~/.claude/skills/component-widgets/widgets/`. Copy a `*-widget.js`+into your page and add the tag. Live reference page: `adom/component-widgets`.++## In a wiki readme.html, inline JSON only (no fetch)++A wiki `readme.html` renders in a sandboxed, opaque-origin iframe with **no+network** (`connect-src 'none'`). So feed widgets **inline JSON**, never `src=`.+Inline the `*-widget.js` verbatim in a `<script>` block, base64 any images, add+the `readme-height` reporter, and shim `localStorage`/`BroadcastChannel` (they can+throw in the sandbox). See the `wiki-readme-html` skill; the reference page's own+`readme.html` is a worked example.++## The widgets++### `<adom-pinout>`: pin diagram + table+Datasheet-style chip: pins on the sides colored by type, exposed pad centered, with+a synced pin table. Diagram and table cross-highlight each other.+```+{ "mpn": "STM32F103C8T6", "package": "LQFP-48",+  "pins": [ { "number": 1, "name": "VBAT", "type": "power", "xy": [-2.75, 4.25] } ] }+```+`type` is `power|io|clock|ctrl|other` (auto-inferred from `name` if omitted). `xy`+is the mm pad center (footprint frame, +y up); with real `xy` it lays out from the+true footprint, otherwise it infers a quad/dual package from `package`. Attributes:+`layout="auto|quad|dual"`, `heading`. Public method `highlight(n)`; emits `pinhover`.++### `<adom-heatsink-via>`: exposed-pad thermal vias · new+The recommended thermal-via array under the exposed pad (count, drill, pitch).+**Only renders when the part has an exposed pad**, otherwise an empty state.+```+{ "mpn": "MCP23017", "package": "QFN-28-1EP_6x6mm_P0.65mm_EP4.25x4.25mm",+  "ep": { "w_mm": 4.25, "h_mm": 4.25, "number": 29 } }+```+Or give it `pads: [{number,x_mm,y_mm}]` and it detects the EP geometrically. Keyed on+the EP pin number, so it lights when that pad is hovered in the pinout or footprint.++### `<adom-molecule>`: ganged parts + nets · new+A molecule (reusable sub-circuit) as its part set plus how they connect. Hover a net+to light its parts; hover a part to light its nets.+```+{ "name": "STM32F103 support",+  "components": [ { "ref": "U1", "mpn": "STM32F103C8T6", "package": "LQFP-48", "type": "mcu" } ],+  "nets": [ { "name": "VDD", "pins": [ { "ref": "U1", "pin": "VDD_1" }, { "ref": "C1", "pin": "1" } ] } ] }+```+`type` is `mcu|ic|cap|res|xtal|diode|conn|other` (inferred from the refdes if omitted).++### `<adom-chip-thumbnail>`: rendered part image · new+```+<adom-chip-thumbnail src="thumb.png" mpn="74HC00" package="SOIC-14"></adom-chip-thumbnail>+```+`src` is a rendered PNG (in production: `adom-glb2png` / the chip-thumbnailer off the+part's GLB). Falls back to a clean placeholder when there is no render.++## The cross-highlight bus++Every widget speaks one channel: `BroadcastChannel('lbr-hover')` (with a+`parent.postMessage` relay for cross-iframe). The pin-keyed widgets (pinout,+heat-sink via, and adom-lbr's footprint + 3D) post and receive+`{ type:'lbr-hover', pin:<number> }`, so hovering a pin in one lights the same pin+everywhere. The molecule posts `{ ...ref }` (its own ganged relationship) rather+than a pin. Any widgets sharing a document (or relayed across iframes) gang up+automatically; no wiring needed.++## What is NOT here: use adom-lbr++Schematic **symbol**, **footprint** (layer stackup), and **3D** already exist as+adom-lbr's viewers, on the same `lbr-hover` bus. Embed those; do not reimplement+them. The **datasheet** renders via the wiki's native PDF viewer (just push the PDF).++## Viewers++Each widget has an iframe-embeddable `*-viewer.html` in `widgets/` (`?src=`/`?part=`/+postMessage, `?theme=`, `readme-height` auto-grow) for embedding where live iframes+are supported.