prototype-flex — the standardized flex row

SINGLE ROOT + REST SPREAD — the whole component is one div; the consumer's attributes spread first and the family's stamps land after (replace, never merge): data-jx-prototype-flex, data-density and the dark class. This is the stamp mechanism's family precondition, proven here first — a studio edit or a consumer testid lands on the same node the layout styles.

ZERO TRANSLATION — direction, wrap, align and justify ARE the CSS Box Alignment tokens, passed through verbatim (measured live in the rig below: every control's change lands in the container's computed style byte-identical). There is no "between" → "space-between" mapping layer to learn or fight; the one type coercion is gap number → px (a bare number is not a CSS length). INLINE STYLE ONLY — no Tailwind, no theme tokens, no css file: the alpha lane's reason to exist apart from utility-first Tier-1 is that it installs and renders in any host. The dispatch expectation that gap might ride the space tokens is deliberately FALSE here — the family law is zero tokens.

The eight axes are FORWARDERS, not opinions — the first-time contract declares all no-own, and the family paints nothing for them: the carriers join the consumer style attr (measured), density stamps its rung for descendants that read the kernel channels, theme rides the .dark bridge, and size echoes on the root so em-inheriting children reflow. One accessibility truth to hold: direction="row-reverse" and "column-reverse" flip the VISUAL order against the DOM order — screen readers follow the DOM, so reserve the reversed rungs for genuinely reversed contexts.

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

1 · SINGLE ROOT + REST SPREAD — one div, consumer attributes first, family stamps after; the studio's edits and the layout's stamps can never fight over separate nodes. 2 · ZERO TRANSLATION — the props are the CSS: no alias vocabulary, no mapping layer to drift; the property panel edits CSS truth. 3 · INLINE STYLE ONLY — no utility classes and no theme tokens, so the item renders identically in any host and the gap value you pass is the gap that renders (there are no space tokens to inherit or collide with).

Receipts: the rig's five controls each measured end-to-end (select/number change → computed flex-direction / flex-wrap / align-items / justify-content / gap update on the container, task 35); the density rung stamp (data-density=lg explicit, null ambient), the size echo (font-size 18px inline 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-flex/ (an inline-style-only family — no css file, no tokens). The query() seat below rides the md viewport key (48rem) through the gap number→px coercion.

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

<!-- below 48rem the base (13px root) applies; at 48rem+ the md case
     (18px) wins — the §11 stamp scales the root, children reflow -->
<PrototypeFlex size={query({ md: 18 }, 13)} gap={12}>…</PrototypeFlex>

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

<!-- below 48rem the base (13px root) applies; at 48rem+ the md case
     (18px) wins — the §11 stamp scales the root, children reflow -->
<PrototypeFlex size={query({ md: 18 }, 13)} gap={12}>…</PrototypeFlex>

<PrototypeFlex size={18} density="small">…</PrototypeFlex>