Component Widgets

@@ -1,50 +1,69 @@ # Component Widgets -Reusable, dependency-free web-component widgets for component and molecule pages.-Install drops the widget JS, embeddable viewers, example data, and an AI skill into-`~/.claude/skills/component-widgets/`.+> **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. -![Pinout widget: STM32F103C8T6 LQFP-48 pin diagram + synced type-colored table](assets/example-pinout.png)+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. -![Molecule widget: STM32F103 minimum-support parts and nets, hover to gang](assets/example-molecule.png)+**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. -```-adom-wiki pkg install adom/component-widgets+## Pinout — `<adom-pinout>`+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><script type="application/json">+{ "mpn": "…", "package": "…", "pins": [ { "number": 1, "name": "…", "type": "…", "xy": [x,y] } ] }+</script></adom-pinout> ``` -## The widgets+## Heat-sink via — `<adom-heatsink-via>` · new+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. -| Tag | What it renders | Data |-|---|---|---|-| `<adom-pinout>` | Datasheet-style pin diagram + synced pin table (cross-highlight) | `{ mpn, package, pins:[{number,name,type?,xy?}] }` |-| `<adom-heatsink-via>` | Exposed-pad thermal via array (only when the part has an EP) | `{ mpn, package, ep:{w_mm,h_mm,number} }` or `{ pads:[…] }` |-| `<adom-molecule>` | Ganged part set + nets (hover a net → its parts) | `{ name, components:[…], nets:[…] }` |-| `<adom-chip-thumbnail>` | Rendered part image with caption | `src` / `mpn` / `package` |+```html+<adom-heatsink-via><script type="application/json">+{ "mpn": "MCP23017", "package": "QFN-28-1EP…EP4.25x4.25mm", "ep": { "w_mm": 4.25, "h_mm": 4.25, "number": 29 } }+</script></adom-heatsink-via>+``` -Each is one custom element: Shadow DOM, no dependencies, light + dark (or-`theme="dark|light"`), fed by inline `<script type="application/json">`, `el.data`,-or `src=`. All speak one `BroadcastChannel('lbr-hover')` bus, so pin-keyed widgets-(pinout, heat-sink via, and adom-lbr's footprint + 3D) light the same pin together.+## 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. -## Use in a page+```html+<adom-molecule><script type="application/json">+{ "name": "…", "components": [ {"ref":"…","mpn":"…","value":"…","package":"…","type":"…"} ],+  "nets": [ {"name":"…","pins":[ {"ref":"…","pin":"…"} ]} ] }+</script></adom-molecule>+``` -Copy a `widgets/*-widget.js` into your HTML and add the tag:+## Chip thumbnail — `<adom-chip-thumbnail>` · new+A small rendered image of the actual part (`glb2png` / the chip-thumbnailer off its GLB).  ```html-<script src="pinout-widget.js"></script>-<adom-pinout><script type="application/json">-{ "mpn": "STM32F103C8T6", "package": "LQFP-48", "pins": [ … ] }-</script></adom-pinout>+<adom-chip-thumbnail src="thumb.png" mpn="74HC00" package="SOIC-14"></adom-chip-thumbnail> ``` -In a wiki `readme.html` the sandbox has no network, so feed **inline JSON** (never-`src=`) and inline the widget JS. See the `wiki-readme-html` skill and the live-reference page `adom/component-widgets`, whose own `readme.html` runs all four.+## 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. -## Not here: use adom-lbr+## Datasheet — native viewer+Push the part's PDF; the native datasheet viewer renders it inline with pop-out. No widget to build. -Schematic **symbol**, **footprint** (layer stackup), and **3D** are adom-lbr's-viewers, already on the same hover bus. The **datasheet** renders via the native-PDF viewer. Don't reimplement those.+--- -See `SKILL.md` for the full data contracts and the bus protocol.+**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.