[jung-thomas]

Summary

Final two demo breakages (verified via live DEV devtools + a local Hugo 0.147 render harness — the method that actually catches these, unlike HTML grep):

1. "Tested with" panel never populated

testedWith (and requires) were parsed → composed → accepted by renderHugoFrontmatter (render-frontmatter.ts:114/120/274-275), but writeHugoPage() in fetch-tutorials.ts never forwarded them from the composed result. So .Params.testedWith was always empty and my layout {{ with .Params.testedWith }} block rendered nothing. Added both to the writeHugoPage signature, the renderHugoFrontmatter call, and the fetch call site. +4 regression tests asserting the rendered frontmatter carries them (the only prior testedWith test covered freshness-checking, not generation — why the drop was invisible).

2. Image hotspots didn't attach

The prior PR's images.ts transform moves a standalone image's trailing {hotspots=…} to a block-attribute line. But that only reaches the image render hook's .Attributes when the image is not wrapped in a <p>. Verified with a local Hugo harness: default (wrapStandAloneImageWithinParagraph=true) → attr never attaches; false → render-image.html emits .tut-hotspot-wrap + data-hotspots + 3 .tut-hotspot anchors. Set the flag in hugo.toml. No CSS depends on p>img (checked); render hooks already emit their own wrappers.

Verification

• Tested-with: 4/4 new render-frontmatter tests pass
• Hotspots: end-to-end local Hugo render emits the full overlay markup
• Joule fix from fix(directive-demos): prereq card CSS, tested-with panel, hotspots, Joule footer #3093 confirmed live on DEV (footer now position:static, input docked in the 420px panel)

Next

Merge → DEV rebuild of the demo slugs → final browser pass on tested-with panel + hotspot dots, then DEV→main→PROD.