WORK-006
ID:WORK-006Status:pending

Build math Rune

Priority:mediumComplexity:unknown
claude/align-sidenav-styling-4MuxV View source

Relationships

Implements 1
Branches 3
claude/align-sidenav-styling-4MuxV current pending
claude/file-naming-convention-LJdwR pendingmain pendingchangeset-release/main pending
History 2
  1. ebe0c64
    Content editedby Claude
    Migrate plan files to {% ref %} xref syntax (WORK-021)
  2. d275b2a
    Created (pending)by Claude
    Add work items for 16 unbuilt runes from SPEC-008

Summary

Mathematical notation rendered from LaTeX/KaTeX syntax. Supports both inline and block (display) mode. Aliases: equation, formula. This is a core rune.

Attributes

NameTypeDefaultRequiredDescription
displayBooleantrueNoBlock display mode (centered, full-width) vs inline
labelString—NoEquation label for cross-referencing

Content Model

  • Text content inside the tag is treated as raw LaTeX/KaTeX source — not parsed as Markdown
  • Similar pattern to {% diagram %} treating content as Mermaid source

Transform Output

  • typeof: Math
  • Tag: <div> (display) or <span> (inline)
  • Properties: source (the raw LaTeX string), label

Implementation Tasks

  1. Create schema in packages/runes/src/tags/math.ts — raw source extraction pattern (like diagram)
  2. Add RuneConfig entry in packages/runes/src/config.ts
  3. Write CSS in packages/lumina/styles/runes/math.css
  4. Import CSS in packages/lumina/index.css
  5. Implement rendering: build-time KaTeX transform (preferred, like Shiki for code) or web component fallback
  6. Write tests in packages/runes/test/tags/math.test.ts
  7. Create inspector fixture
  8. Run CSS coverage tests

Implementation Notes

Rendering strategy mirrors the Diagram rune — either a build-time transform (like @refrakt-md/highlight does for code blocks) or a web component that initializes from the source attribute. Build-time is preferred for performance and SSR.