WORK-041
ID:WORK-041Status:done

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.

Priority:mediumComplexity:simpleSource:SPEC-014
changeset-release/main View source

Criteria completion

No incremental history — criteria tracking started on Apr 19.

Relationships

Implements 1
Related 2
Branches 3
changeset-release/main current done
main doneclaude/file-naming-convention-LJdwR doneclaude/align-sidenav-styling-4MuxV done
History 5
  1. f2b3512
    Content editedby Claude
    Add {ID}-{slug}.md filename convention + migrate filenames subcommand
  2. 59ded4a
    Content editedby Claude
    Implement SPEC-037 plan package hardening: all 7 work items
  3. f262d7b
    Content editedby Claude
    Backfill source attributes on all 123 work items
  4. 4f81969
    Content editedby Claude
    Complete SPEC-014 work items (WORK-037 through WORK-041)
  5. f5b8bf8
    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)