adom-wiki pkg install adom/component-widgets

::adom-table{src="/OWNER/SLUG/render/data.json" columns="repo,owner,policy" facet="owner"}

<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="/OWNER/COMPONENT/render/artwork/MPN-thumbs.json"}

# 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/`.

![Pinout widget: STM32F103C8T6 LQFP-48 pin diagram + synced type-colored table](assets/example-pinout.png)

![Molecule widget: STM32F103 minimum-support parts and nets, hover to gang](assets/example-molecule.png)

```
adom-wiki pkg install adom/component-widgets
```

## The widgets

| 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` |
| `<adom-moleculize>` | Board → workcell-molecule preview (reads a dropped `.kicad_pcb` client-side, no backend) + AI-thread generate | drop a `.kicad_pcb`, or `{ name, width_mm, height_mm }` |
| `<adom-verified>` | "Verified by" trust mark + verification log; amber when a verified file changes | `verification.json` (adom/verification@1), `tools/verify_log.py` |
| `<adom-models>` | Every 3D file on the page: STEP / GLB tabs, top + underside previews, what is unique, freshness | `models.json` (adom/models@1), `tools/models_json.py` |
| `<adom-states>` | A component's visible states (an LED off and lit): a toggle, a picture of each state, when it applies, its STEP and GLB | `states.json` (adom/component-states@1) |
| `<adom-3d>` | Any GLB in the canonical Adom 3D Viewer, click to load: a poster until the reader asks, then orbit, view cube and zoom; unloads offscreen and on Unload, releasing the WebGL context | a non-Draco `.glb` (`src`), optional `poster`, `heading`, `caption` |
| `<adom-footprint-variants>` | The footprint's variant family (heatsink vias, solder balls, rounded pads) | `variants.json`, `tools/make-variants.py` |

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.

## Also here: `<adom-table>`

`widgets/adom-table.js` is the generic one — any JSON array as a filterable, sortable,
facetable table, not component-specific and not on the hover bus. It ships with the
`adom-widget` runtime bundled in, because the wiki's widget frame loads exactly one script.

It is registered in [`adom/widgets`](/adom/widgets), so any page can write it as plain
markdown rather than hosting the script:

```markdown
::adom-table{src="/OWNER/SLUG/render/data.json" columns="repo,owner,policy" facet="owner"}
```

Allowlisted attributes: `src` `columns` `heading` `filter` `facet` `sort` `dim` `mark`
`colorby`. `mark="warn:col:re"` colours cells matching a pattern; `colorby="col:field"`
takes the colour from each row's own data (`#rgb` / `#rrggbb` only), so a page and any other
rendering of the same data — an `.svg` export, say — cannot drift into disagreeing.

On a **private** page the tag renders empty: its frame is an opaque origin, so the `src`
fetch carries no session and 404s. Host the widget in a section with inline JSON instead —
see adom/wiki#166, and [`adom/repo-ownership`](/adom/repo-ownership) for a working host.

## Use in a page

Copy a `widgets/*-widget.js` into your HTML and add the tag:

```html
<script src="pinout-widget.js"></script>
<adom-pinout><script type="application/json">
{ "mpn": "STM32F103C8T6", "package": "LQFP-48", "pins": [ … ] }
</script></adom-pinout>
```

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.

## 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.

See `SKILL.md` for the full data contracts and the bus protocol.

## Cached chip artwork (manifest mode)

The registered Markdown tag also accepts an `adom/chip-artwork-cache@1` JSON
manifest from the component repository:

```markdown
::adom-chip-thumbnail{src="/OWNER/COMPONENT/render/artwork/MPN-thumbs.json"}
```

Its cache mode focuses on vector chip outlines, editable source files, exact MPN
placement, canonical Z-up orientation, source hashes and review state. Legacy
PNG/image `src` usage still works. The element's `selfCheck()` returns status,
cache key, review state, selected asset and AI reuse hints.

Read the cache before generating anything. Reuse the reviewed pose and marking
placement. Detailed/optical tops may require the MPN on a clear side surface;
never silently re-etch the top. Cache keys cover geometry, rigid pose, mark
placement, projection and generator. Source/asset hash checks are explicitly
publication-time checks, not continuous verification. A fresh source comparison
is required before downstream reuse. Original manufacturer files and license
terms stay intact. A reviewed display does not qualify pin 1 or native seating.

The canonical widget source is `widgets/chip-thumbnail-widget.js`; keep the
bundled skill copy in sync. Use `adom/widgets` for the registry instructions; no
custom HTML README or per-component JavaScript fork is needed. Never broaden
page visibility to make a private manifest load. Test the actual widget frame
with the intended reader's permissions. Manifest asset URLs must remain in the
component's repository on the manifest origin.

The cache widget focuses on chip outlines and their reuse. Do not repeat shaded
chip renders here: the component page already has its full 3D viewer. Existing
shaded thumbnail files can stay cached for library/card consumers without being
displayed in this widget. Legacy image-only widget usage is unchanged.