Component Widgets

@@ -1,69 +1,50 @@ # 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.+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/`. -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.+![Pinout widget: STM32F103C8T6 LQFP-48 pin diagram + synced type-colored table](assets/example-pinout.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.+![Molecule widget: STM32F103 minimum-support parts and nets, hover to gang](assets/example-molecule.png) -## 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>+```+adom-wiki pkg install adom/component-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.+## The widgets -```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>-```+| 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` | -## 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.+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. -```html-<adom-molecule><script type="application/json">-{ "name": "…", "components": [ {"ref":"…","mpn":"…","value":"…","package":"…","type":"…"} ],-  "nets": [ {"name":"…","pins":[ {"ref":"…","pin":"…"} ]} ] }-</script></adom-molecule>-```+## Use in a page -## Chip thumbnail — `<adom-chip-thumbnail>` · new-A small rendered image of the actual part (`glb2png` / the chip-thumbnailer off its GLB).+Copy a `widgets/*-widget.js` into your HTML and add the tag:  ```html-<adom-chip-thumbnail src="thumb.png" mpn="74HC00" package="SOIC-14"></adom-chip-thumbnail>+<script src="pinout-widget.js"></script>+<adom-pinout><script type="application/json">+{ "mpn": "STM32F103C8T6", "package": "LQFP-48", "pins": [ … ] }+</script></adom-pinout> ``` -## 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.+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. -## Datasheet — native viewer-Push the part's PDF; the native datasheet viewer renders it inline with pop-out. No widget to build.+## Not here: use adom-lbr ----+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. -**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.+See `SKILL.md` for the full data contracts and the bus protocol.