Add client behaviors to plan site

Wire @refrakt-md/behaviors into the plan site via initPage() from @refrakt-md/html/client. This enables copy-to-clipboard buttons on code blocks and provides the foundation for future interactive behaviors.

claude/align-sidenav-styling-4MuxV View source

Criteria completion

No incremental history — criteria tracking started on Apr 17.

Relationships

ID:SPEC-014Status:accepted

Plan Site via HTML Adapter

ID:WORK-039Status:done

Refactor plan render pipeline to use @refrakt-md/html

Priority:highComplexity:complex

ID:WORK-040Status:done

Add syntax highlighting to plan site

Priority:mediumComplexity:moderate

claude/align-sidenav-styling-4MuxV current done

main done claude/file-naming-convention-LJdwR done changeset-release/main done

Mar 23, 12:57 PM4f81969
Content editedby Claude
Complete SPEC-014 work items (WORK-037 through WORK-041)
Mar 23, 12:51 PMf5b8bf8
Created (done)by Claude
Add work items WORK-037 through WORK-049 for plan site specs

Acceptance Criteria

Behaviors JS bundle is served at /__plan-behaviors.js (serve) or written to behaviors.js (build)
initPage() is called on page load via a <script> tag
Copy-to-clipboard button appears on all <pre> code blocks
Plan theme CSS includes .rf-code-wrapper, .rf-copy-button, .rf-copy-button--copied selectors
Behaviors work in both serve and build modes

Approach

The behaviors bundle is loaded client-side — @refrakt-md/behaviors is a runtime dependency, not a build-time package dependency. The script tag is injected via the scripts option on renderFullPage(). Add the copy button CSS selectors to the plan theme stylesheets.

References

SPEC-014 (Plan Site via HTML Adapter)
WORK-039 (the refactored pipeline)
WORK-040 (syntax highlighting — copy buttons are most useful on highlighted code)