WORK-339
ID:WORK-339Status:ready

Media-zone guest adaptation (any visual rune sits cleanly in a media zone)

Per SPEC-084's open-world styling rule, a container adapts its slot, not the specific guest. Containers that already expose a media zone (card, feature, hero, recipe) should size/clip any visual rune dropped into that zone — map today, chart/gallery/diagram/embed/sandbox next — via one name-agnostic selector, rather than per-pair styling. map-in-card is the proof case.

Priority:mediumComplexity:moderateMilestone:v0.19.0Source:SPEC-084
changeset-release/main View source

Criteria completion

Criteria completion: 0 of 7 (0%) checked; tracking started on Jun 5, no incremental history yet0%25%50%75%100%Jun 5Jun 15

Tracking started Jun 5 — check back for trends.

Relationships

Implements 1
Related 10
Branches 3
changeset-release/main current ready
claude/v0.19-composability donemain doneclaude/v0.19-milestone-planning ready
History 6
  1. e1084e4
    Created (ready)by github-actions[bot]
  2. 0d9157f
    Content editedby Claude
    plan: bento phone-mockup case study — uniform row tracks + height-bound
  3. c09cb5a
    Content editedby Claude
    plan: de-link mutual refs in composition items to keep the dep graph acy
  4. 0543147
    Content editedby Claude
    plan: media-zone composition model — generalize 339, add bento + docs it
  5. 33c6175
    Content editedby Claude
    plan: revise SPEC-084 to an open-world composability model
  6. 33e11b7
    Content editedby Claude
    plan: shape v0.19.0 around polish, composability & rollups

Acceptance Criteria

  • A name-agnostic media-zone selector (e.g. [data-section="media"] > .rf-*) constrains any direct visual child to the zone: fills width, respects the container's radius/overflow, sensible max-height.
  • The guest is constrained on both axes — max-height: 100% + the zone clips — so a tall guest (e.g. a phone mockup) scales/clips to fit the cell rather than ballooning its height/row.
  • The media zone establishes a container-query context (container-type: inline-size) so intrinsically responsive guests resolve their own scaling — e.g. mockup's cqi-based auto-downscale + margin-inline: auto centering works inside a cell with no wrapper.
  • Proven across card, feature, and hero media zones with at least three guests verified: map, chart, gallery.
  • map specifically renders cleanly in a card media slot — <rf-map> initializes, leaflet honours the zone's dimensions, no-JS pin-list fallback still renders.
  • No guest-specific --in-card modifier is introduced for the baseline; a guest only opts into its own contextModifiers if it needs more than the generic fit.
  • CSS coverage passes; site examples (or the new compositions docs) demonstrate each verified guest.

Approach

Add the baseline adaptation in the section-dimension / container CSS so any direct child of a media zone is constrained. Verify the web-component guests (map, sandbox) honour the zone box. Bento needs a media zone introduced first — that is its own item (WORK-345) — so this item targets the containers that already have one.

References

  • packages/lumina/styles/dimensions/sections.css ([data-section="media"]), card.css, feature/hero media
  • plugins/places/src/config.ts, packages/lumina/styles/runes/map.css
  • Open-world styling rule: SPEC-084; catalogued in WORK-346