WORK-339
Setting up your dashboard 0 entities found · 8/31 branches scanned
ID:WORK-339Status:done

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
main View source

Criteria completion

Criteria completion: 7 of 7 (100%) checked; history from Jun 5 to Jun 60%25%50%75%100%Jun 5Jun 6

Relationships

Implements 1
Related 10
Branches 3
main current done
changeset-release/main readyclaude/v0.19-composability doneclaude/v0.19-milestone-planning ready
History 7
  1. 633f0a1
    • ☑ 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.
    by bjornolofandersson
  2. 6839d7f
    Created (ready)by bjornolofandersson
  3. 0d9157f
    Content editedby Claude
    plan: bento phone-mockup case study — uniform row tracks + height-bound
  4. c09cb5a
    Content editedby Claude
    plan: de-link mutual refs in composition items to keep the dep graph acy
  5. 0543147
    Content editedby Claude
    plan: media-zone composition model — generalize 339, add bento + docs it
  6. 33c6175
    Content editedby Claude
    plan: revise SPEC-084 to an open-world composability model
  7. 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

Resolution

Completed: 2026-06-05

Branch: claude/v0.19-composability

What was done

Generalized the media-zone styling in packages/lumina/styles/layouts/split.css from a name-enumerated allow-list (:has(> [data-rune="chart"]), code-group, snippet, sandbox, img — with a "add new rune-typed media here" comment) to one name-agnostic rule per SPEC-084:

  • The zone ([data-section="media"]) becomes a clipping, rounded container-query context (container-type: inline-size; overflow: hidden; border-radius).
  • Any direct guest (> *) fills the width and is capped on both axes (width: 100%; max-height: 100%); img/video get object-fit: cover + height: 100%. max-height: 100% is a no-op where the zone is auto-height (card/feature/hero) and bites where it's fixed (bento cells, WORK-345).
  • Guests that manage their own bleed/interactive chrome self-declare an opt-out (preview, juxtapose, an explicitly-bleeding showcase) → the zone keeps overflow: visible so their displacement isn't clipped. This replaces the old "enumerate the participants" model with "enumerate the few exceptions."

Notes

  • One rule now covers card / feature / hero / recipe media zones (all use [data-section="media"]).
  • map renders cleanly: the map carries its own height (--medium = 400px etc.), so it fills the slot width and the zone clips/rounds it.
  • The container-type context is what lets mockup auto-scale (its cqi rule) with no wrapper.
  • Visual demos of each guest (map/chart/gallery + the mockup/showcase patterns) are delivered by the compositions docs (WORK-346).