WORK-066
ID:WORK-066Status:done

Media Slots Dimension

Priority:mediumComplexity:simpleMilestone:v0.9.0Source:SPEC-025

Summary

Add a media slots mapping to rune configs and the identity transform. Runes declare mediaSlots that map image ref names to media treatment types (portrait, cover, thumbnail, hero, icon). The transform emits data-media on image elements, enabling themes to style all media uniformly — circular portraits, full-width covers, small thumbnails — with ~5 CSS rules.

Acceptance Criteria

  • RuneConfig in packages/transform/src/types.ts gains mediaSlots?: Record<string, 'portrait' | 'cover' | 'thumbnail' | 'hero' | 'icon'>
  • Identity transform emits data-media on image/media elements whose ref maps to a media slot
  • Rune configs annotated per SPEC-025 Table 2: Character portrait → portrait, Recipe image → cover, Track artwork → thumbnail, Hero media → hero, etc.
  • refrakt inspect output shows data-media attributes on media elements
  • Unit tests verify media attribute emission

Approach

  1. Add mediaSlots to RuneConfig interface
  2. In the engine, when processing a structure entry or content element whose ref matches a key in mediaSlots, emit data-media with the mapped slot type
  3. Annotate rune configs per SPEC-025 Table 2

References

History

  1. 59ded4a
    Content edited
  2. f262d7b
    source+SPEC-025
  3. 9ab3ef2
    statusreadydone
    • ☑ `RuneConfig` in `packages/transform/src/types.ts` gains `mediaSlots?: Record<string, 'portrait' | 'cover' | 'thumbnail' | 'hero' | 'icon'>`
    • ☑ Identity transform emits `data-media` on image/media elements whose ref maps to a media slot
    • ☑ Rune configs annotated per SPEC-025 Table 2: Character portrait → portrait, Recipe image → cover, Track artwork → thumbnail, Hero media → hero, etc.
    • +2 more criteria
  4. a129a9e
    milestone+v0.9.0
  5. a333007
    Created (ready, medium, simple, transform, themes, dimensions)