Register adom-amfm-explorer - Widget Registry

Overview Files Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity

Register adom-amfm-explorer #6

Closed opened by noah 2026-10-20

Registers adom-amfm-explorer (frontend, inline): <adom-amfm-explorer> from adom/amfm-receiver-molecule explorer/amfm-explorer-widget.js, attrs band, mode, block, view (where it opens). It is the AM/FM receiver molecule's interactive circuit explorer, for that board page's README:

the RF block diagram; click a block for its schematic (drawn from tools/design.py, every wire checked against the netlist), what each part does, where to probe it, and what the first board did
the signal at every stage as a spectrum, and from the limiter on as a waveform over time, with a step player
the math for each block, the STM32 controls and a station tuner

What the script touches. Everything renders in the element's own open shadow root; the modules run inside one closure, so it defines no globals except the custom element. No fetch or network (the design data is in the script), no eval. Document listeners: one click (closes its own net menu when you click outside it, via composedPath) and keydown Escape. It never reads or writes the page URL. localStorage: amfm-explorer-tab and amfm-explorer-dom (which tab and which chart view), every access in try/catch. It sets adomDrive (ready, state, set) for window.__adomInlineWidgets.

Brand. Adom guide (adom/brand, confirmed): dark only, the wiki's own tokens, Familjen Grotesk / Satoshi / JetBrains Mono from the page's @font-face (font-src 'self'), teal for FM and the primary accent, purple for AM, blue light for the shared IF, frosted tooltips, monochrome SVG icons, no em or en dashes.

Tested in a harness with the wiki's style.css, fonts and CSP (as a meta tag) at 1440, 1024 and 390 px: no console errors, no CSP violations, the page's own styles untouched, no leaked globals; 14 interaction checks pass (block click, waveform view, step player, Waveform/Spectrum switch, part and waveform hover, net menu open and close from outside the widget, stage cards, AM band, tuner input, math panel, adomDrive). The script is 466 kB and loads only when the widget nears the viewport, through the registry's loader.

🤖 Generated with Claude Code

Diff Skip to comments (2)

--- a/widgets.json+++ b/widgets.json@@ -1,192 +1,207 @@⋯ 187 unchanged lines ⋯    "autoplay"   ],   "height": "auto"+ },+ {+  "name": "adom-amfm-explorer",+  "mode": "frontend",+  "script": "https://wiki.adom.inc/adom/amfm-receiver-molecule/render/explorer/amfm-explorer-widget.js",+  "element": "adom-amfm-explorer",+  "render": "inline",+  "attrs": [+   "band",+   "mode",+   "block",+   "view"+  ],+  "height": "auto"  } ]+--- a/README.md+++ b/README.md@@ -1,63 +1,65 @@⋯ 60 unchanged lines ⋯ | `::adom-models{src="..."}` | every 3D file on a component page as a card: thumbnail, STEP or GLB, etched or unmarked and where the part number sits, what makes it different from its siblings, what it was derived from, a download, and whether the page still serves the file that was described (checked against the file listing, nothing downloaded); previous versions fold away; takes the page's `models.json` (adom/models@1) — loads from adom/component-widgets | | `::adom-video{video="..."}` | a YouTube-style video player: every YouTube shortcut (Space/K, J/L, arrows, 0 to 9, `,` `.` frame step at the video's real frame rate with a frame-number overlay, `<` `>` speed 0.25x to 4x, hold the mouse on the video for 2x, C captions, + / - size, O / W caption opacity, Ctrl+arrows chapters, F, I, M, Shift+N/P, media keys, ?), Clean frame (H: hides the title, controls and captions for a screenshot; the mouse does not bring them back), Copy / Save this frame as a full-resolution PNG, a Share button (copies a link to the page that opens on this video, optionally at the current time: `#video=<file-name>&t=90`, plus the file's own link), a 24px timeline grab zone with drag-to-scrub and a hover frame preview, chapters as bar segments, captions, speed and loop; `title` `poster` `chapters` (JSON `[{"t":12,"title":"..."}]` or WebVTT) `captions` (.vtt or .srt) `start` (`90` or `1m30s`) `loop` `muted` `autoplay`; F opens the player full-window in a new tab (widget frames cannot go fullscreen); a narrated video gets captions and chapters free: gang-takes (adom/adom-video-post) writes the `.vtt` from the adom-tts narration text, the `.chapters.json` from its segment labels, and the embed line; on a private page pass `src=` a manifest with them inlined; a private page's VIDEO plays only where the browser sends third-party cookies until adom/wiki#228 (signed media URLs) ships, elsewhere the widget offers Play it in a new tab; loads from this page | | `::adom-3d{src="..."}` | any GLB in the canonical Adom 3D Viewer, click to load (nothing loads until the reader asks; it unloads offscreen and releases the WebGL context); `poster` `heading` `caption`; publish the GLB without Draco, the frame cannot reach the decoder CDN; loads from adom/component-widgets |+| `::adom-amfm-explorer{band="fm"}` | the AM/FM receiver molecule's circuit explorer: RF block diagram, netlist-checked schematics, the spectrum and (from the limiter on) the waveform at every stage, the math and the first board's findings; `band` (fm, am), `mode` (design, board), `block` (a block id), `view` (diagram, stages) set where it opens; loads from adom/amfm-receiver-molecule |+

Comments

Colby Knox · 5h ago

Closing this one. The explorer looks great, but it isn't a registry widget.

The registry in adom/widgets is for generic widgets: one script that many pages reuse with their own data through attributes or a src file (a pinout, a table, a video player). The AM/FM explorer is built for one board, with that board's design data inside the script, so the only page that can use it is the AM/FM receiver page. One project's interactive tool belongs on that project's page as custom HTML, not in the shared registry. Every registry entry is a tag reserved for the whole wiki and a script the wiki serves to every page.

The same code works on your page without a registry entry. Two ways:

Keep README.md and add the explorer as its own section (recommended here). Put an HTML file in the page repo, for example explorer/index.html, with the explorer's JS inlined in a <script> tag. Then declare it in page.json:
```
"section_sources": { "explorer": "explorer/index.html" },
"sections": ["hero", "viewers", "readme", "explorer", "deps", "breadcrumbs", "info"]
```
It renders as its own "Explorer" block in the main column, in a sandboxed frame, loaded when the reader clicks. Inline the script: the wiki serves a .js file from /render/ as a download, so <script src> will not run.
Make the whole page body custom HTML with a readme.html (it replaces README.md on the page).

The sandbox rules (opaque origin, no cookies, readme-height to size the frame) are in the wiki-readme-html skill in adom/adom-wiki-skillpack. I'm updating that skill and the registry README so this distinction is spelled out.

Colby Knox · 5h ago

Correction to my note above: skip the separate section. Turn the explorer into the page's readme.html, so it is the page itself.

Put readme.html at the root of adom/amfm-receiver-molecule, with the explorer's JS and CSS inlined in it. The wiki serves a .js file from /render/ as a download, so <script src> will not run.
Fold the README.md content you want readers to see into the HTML, around the explorer. Once readme.html exists it replaces README.md on the page (keep README.md in the repo for the Files tab and clones).
Post readme-height to the parent so the frame fits its content.

The wiki-readme-html skill in adom/adom-wiki-skillpack has the sandbox rules and a verify loop.