prototype-waterfall — the standardized masonry

The three alpha laws carry over unchanged: SINGLE ROOT + REST SPREAD (one div; consumer attributes first, family stamps after), ZERO TRANSLATION (the columns shorthand IS the CSS — a number is the count form, a length string ('14rem') is the auto-width FLOOR where the count follows the viewport; one property covers both shapes with no branching), and INLINE STYLE ONLY (no utilities, no theme tokens, no css file). There is NO JavaScript in the family — no resize observation, no absolute positioning, no layout-settling timer: the browser's column balancer is the engine, so reflow on any control change is immediate and native (measured in the task-37 probe: each rig change settles by the first animation frame — the same-task read is stale at Svelte's flush boundary).

The declared tradeoffs (honest, not hidden): children flow in COLUMN order — down column one, then column two, newspaper order, not shortest-column-first masonry — and break-inside stays the consumer's call (the component never overrides it; pass style="break-inside: avoid" on cards you refuse to split). The strategy prop ships with a single member — 'balanced' → column-fill: balance, the browser equalizing column heights — as the seam for a future 'ordered' (JS-measured shortest-column placement) to join the union non-breakingly.

The eight axes are forwarders as on the trio's first two members: all no-own, carriers in the consumer style attr, density stamping its rung for descendants, theme riding the .dark bridge. A waterfall-specific nuance measured below: BOTH column forms are §11-stamp-scale-blind — the rem floor reads the DOCUMENT root, not the element stamp (stamp 18px → the 224px floor unchanged; document root 16→20px → 280px; two-direction probe). Reading order is coherent — the browser fills column one first, so announced order matches the visual column sequence — but content is segmented: a card straddling a column break is split unless you forbid it.

1 · SINGLE ROOT + REST SPREAD — one div, consumer attributes first, family stamps after. 2 · ZERO TRANSLATION — columns is the CSS columns shorthand (count form and auto-width form in one property, no branching); gap is column-gap; strategy is column-fill. 3 · INLINE STYLE ONLY — zero tokens, any host. The declared tradeoffs: children flow in column order (newspaper order — announced order matches the visual column sequence), and break-inside is never overridden by the component. The 'ordered' strategy (JS-measured shortest-column placement) is the recorded future seam — the prop ships now so the union can grow without breaking v0 consumers.

The layout trio, cross-referenced: prototype-flex — the row prototype-grid — the tracks prototype-waterfall — the columns — one contract, three engines.

Receipts: the rig's two controls measured end-to-end (columns 3 → 4 → the "14rem" floor; gap 24 → 24px column-gap) against the container's resolved geometry — computed column-count/column-width AND the laid-out count from where the cards land (distinct offsetLeft columns): the count form held 3 columns at every width; the "14rem" floor form laid 3 columns at 1400px and 2 at 760px as the viewport narrowed past the floors; the reflow settled by the first animation frame (the same-task read is stale at Svelte's flush boundary; no JS reflow to wait for) — task 37; the density rung stamp (data-density=lg explicit, null ambient), the size carrier (font-size: var(--jx-size-effective, 1rem), computed 18px at size={18}) and the dark class bridge were measured on this page's served DOM; the zero-reader rows carry grep receipts over ui/prototype-waterfall/ (an inline-style-only family — no css file, no tokens). The query() seat below rides the md viewport key (48rem) on the size LANE — the lanes-vs-passthroughs boundary applies: columns/gap/strategy reject query().

<script lang="ts">
  import PrototypeWaterfall from '@ui/prototype-waterfall.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (13px root) applies; at 48rem+ the md case
     (18px) wins — element-level: the rem floor does NOT follow the stamp -->
<PrototypeWaterfall columns="14rem" size={query({ md: 18 }, 13)}>…</PrototypeWaterfall>

<script lang="ts">
  import PrototypeWaterfall from '@ui/prototype-waterfall.svelte';
  import { query } from '@lib/universal-props-query.svelte';
</script>

<!-- below 48rem the base (13px root) applies; at 48rem+ the md case
     (18px) wins — element-level: the rem floor does NOT follow the stamp -->
<PrototypeWaterfall columns="14rem" size={query({ md: 18 }, 13)}>…</PrototypeWaterfall>

<PrototypeWaterfall columns={3} size={18} density="small">…</PrototypeWaterfall>