Author bespoke HTML on the fly (freeform mode) + self-contained validator

[vibhusharma101]

Why

Every explainer was capped by the same 12-block template and 4 preset skins, so different inputs produced the same page in new colors. This PR makes the AI author a complete, unique interactive HTML per subject — its own layout, visual system, and an interactive model of the subject's real mechanic.

What changed

Freeform is now the default generation mode

• core/instructions/FREEFORM.md — the rubric. Core mandate: "What's the one dynamic that, if the reader could play with it, they'd finally get it?" → build a working model of it using the source's real logic (real constants/thresholds/states). Plus a hard variety rule (different palette/layout/motif every time) and the self-contained safety constraints.
• core/build/check-html.mjs — zero-dep safety gate: rejects any external resource load (external <script>/<link>/<img>, @import, remote url()), requires the CSP <meta> + doctype, allows <a href> hyperlinks. Replaces schema validation for freeform.
• .claude/commands/think-in-html.md + CLAUDE.md updated: default = freeform; --blocks = legacy templated engine.

Two worked references at the quality bar

• examples/novus-pricing-desk.freeform.html — AI price-clamp shown on a live number line (ask the AI, toggle "rogue," watch the clamp reel it into the safe band).
• examples/novus-rate-limit.freeform.html — fixed-window limiter as an ops dashboard (ring gauge to 30, 200→429, counter resets each window, "infra down" fails open).

These look and behave nothing alike — proof the variety mandate works.

Legacy blocks mode kept (--blocks), now upgraded with an AI-authored design theme (palette/fonts/mascot/freeform CSS) applied safely via runtime sanitizers + textContent, plus per-block className hooks. Defense-in-depth: CSP + sanitizers + textContent + build-time escaping.

Tests

npm test — 18 passing:

• both freeform examples validate as self-contained;
• the validator rejects external scripts/stylesheets/url() and allows hyperlinks;
• design shape validation + the bespoke-theme build path are covered;
• all prior block/validator guards still pass.

Verification done

• Adversarial sanitizer checks (breakout, external fetch, script injection, attribute breakout) all neutralized.
• Both reference HTMLs opened in a browser and driven end-to-end.
• Full suite green.

[vibhusharma101]

Addendum: reviewed this PR ahead of the public launch and found the CLI itself was out of sync with its own headline feature — npx think-in-html init / instructions still only produced the legacy blocks-only flow, silently skipping freeform generation entirely. Pushed a fix:

• bin/cli.mjs — instructions now defaults to FREEFORM.md + mode guidance (--blocks opts into the legacy flow); added a check <file> command wrapping the self-contained validator; updated the Claude Code/Cursor/Codex adapter templates written by init to match.
• package.json — ships examples/ in the npm tarball (FREEFORM.md references a .freeform.html as a study example, which wasn't shipping before); PUBLISHING.md updated to match.
• examples/index.html — added gallery cards for both freeform examples (they were generated but never linked from the gallery).
• README.md — leads with freeform/bespoke generation, documents check, links both freeform examples, adds a placeholder for the upcoming landing page.

Verified: npm test (18/18), npm pack --dry-run includes examples/, think-in-html check passes a good file and rejects one with an external <script src>. CI green on Node 18/20/22.