WORK-348
Setting up your dashboard 0 entities found · 7/34 branches scanned
ID:WORK-348Status:done

Bento sizing model, size-derived media placement, and link tiles

Land SPEC-085's sizing model and the placement/link affordances. One grid, one vocabulary: a 6-column default, proportional size presets, and precise cols/rows.

Priority:mediumComplexity:moderateMilestone:v0.19.0Source:SPEC-085

Criteria completion

Criteria completion: 11 of 11 (100%) 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.

Acceptance Criteria

  • columns defaults to 6 for both authoring modes (author-overridable); the mode-dependent tiered=4 / span=6 split and the sizing="span" parent mode are removed.
  • size presets resolve as proportions of the column count (small ⅓, medium ½, large ⅔ × 2 rows, full = all → 2/3/4/6 @ 6 cols), so they hold their ratio at any columns.
  • cols / rows map to grid-column: span / grid-row: span and override size per-axis when present.
  • Uniform row tracks. The grid sets grid-auto-rows: var(--rf-bento-row-height) (a fixed, themeable height — not tied to column width, which would explode vertically on collapse). Row spans (rows / large) are therefore meaningful, and a tall guest is bounded by the track (it scales/clips via WORK-339) rather than ballooning the whole row. Row height may vary per breakpoint but is never coupled to the column width.
  • Author-controlled collapse mirroring split: {% bento collapse="sm|md|lg|never" %} sets the breakpoint at which the grid drops to a single stacked column (with a sensible default), replacing the hard-coded !important final collapse.
  • Automatic progressive reduction. Between full grid and stacked, the column count steps down responsively and every span auto-caps via min(span, current-columns) — no per-size !important overrides — so wide cells degrade gracefully at each step. (Per-cell responsive spans are deferred — WORK-354.)
  • Tiered sugar maps auto-detected relative heading depth → size preset: base → large (4×2), base+1 → medium (3×1), base+2+ → small (2×1). Deep headings do not get distinct row spans.
  • media-position is author-controllable per cell (top | bottom | start | end) with a size-derived default (small → media top/stacked; large/full → prominent / beside).
  • An optional href makes a whole cell a link (mirrors card), with correct focus/hover affordances and accessible markup.
  • CSS keys placement off data-media-position + the resolved spans, reusing the shared split.css / card media rules where possible.
  • Tests / examples cover: the 6-col default, each size preset proportion, cols/rows overrides, the tiered depth→size mapping, each media-position value, and a link tile. Existing heading-sugar bentos keep their proportions (verify).

Approach

Resolve size/cols/rows to grid spans in the cell transform/CSS (custom properties keyed off the cell size/span data). Lean on split.css / card media rules for placement so bento and card share behavior. Verify the canonical bento.md and any other usages still read well at the new 6-col default.

References

  • plugins/marketing/src/tags/bento.ts, plugins/marketing/src/config.ts, packages/lumina/styles/runes/bento.css
  • card href + data-media-position; split.css
  • Substrate SPEC-085; cell zones WORK-345

Resolution

Completed: 2026-06-06

Branch: claude/v0.19-bento

What was done

  • 6-col default for both modes (columns ?? 6); the old mode-dependent split + sizing="span" are gone (removed in WORK-345).
  • Proportional presetspresetSpans(size, columns) resolves a preset to (cols, rows) as a fraction of the column count (small ⅓, medium ½, large ⅔×2, full = all → 2/3/4/6 @ 6 cols), so a preset holds its ratio at any columns. convertHeadings computes them per cell.
  • cols / rows are first-class cell attrs → --cell-cols / --cell-rowsgrid-column/row: span; they override the preset per axis.
  • Uniform fixed row tracksgrid-auto-rows: var(--rf-bento-row-height, 12rem), never column-tied, so spans are meaningful and tall guests are bounded (WORK-339) instead of ballooning.
  • Author collapse{% bento collapse="sm|md|lg|never" %}data-collapse; CSS drops the grid to one column at that breakpoint (replacing the !important final collapse), with automatic progressive reduction in between (--bento-cols-effective steps 6→4→3→2→1; every span auto-caps via min(--cell-cols, --bento-cols-effective)).
  • Media placementdata-media-position (top|bottom|start|end) via a flex layout, with a size-derived default (large/full → start/beside, smaller → top).
  • href link tiles (stretched overlay) carried from WORK-345; CSS styles the link + nested-link z-index.
  • Rewrote bento.css accordingly; 10 bento tests; regenerated both contracts; size made noBemClass (spans come from cols/rows, not a size class).

Notes

  • The cols/rows-override and href-link-tile tests require explicit {% bento-cell %} authoring, which lands in WORK-347 — the transform mechanism (attrs → spans → grid, href) is in place and exercised by the sugar path's computed spans.
  • Full suite green (3066); css-coverage + contracts pass.