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/file-naming-convention-LJdwR View source

Criteria completion

No incremental history — criteria tracking started on Apr 21.

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/file-naming-convention-LJdwR current done

main done changeset-release/main done claude/align-sidenav-styling-4MuxV done

Apr 21, 01:29 PMbbbb94c
Created (done)by bjornolofandersson
Apr 21, 01:17 PMf2b3512
Content editedby Claude
Add {ID}-{slug}.md filename convention + migrate filenames subcommand

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)