LayoutSize steps for fixed widths and Breakpoint caps for page maxWidth on Box, FlexBox, and Grid.
LayoutSize.Size1 … LayoutSize.Size9. Each maps to --size-layout-* in @prepared911/ui/styles.css.
Use on width, minWidth, height, and minHeight (and the same fields on Grid size after the Grid size props land). Do not use Breakpoint on those axes.
| Step | Enum | Token | px |
|---|---|---|---|
| 1 | LayoutSize.Size1 | --size-layout-1 | 128 |
| 2 | LayoutSize.Size2 | --size-layout-2 | 160 |
| 3 | LayoutSize.Size3 | --size-layout-3 | 200 |
| 4 | LayoutSize.Size4 | --size-layout-4 | 240 |
| 5 | LayoutSize.Size5 | --size-layout-5 | 320 |
| 6 | LayoutSize.Size6 | --size-layout-6 | 400 |
| 7 | LayoutSize.Size7 | --size-layout-7 | 480 |
| 8 | LayoutSize.Size8 | --size-layout-8 | 600 |
| 9 | LayoutSize.Size9 | --size-layout-9 | 640 |
--layout-content-max. For dialog-width caps near 512px, keep using InlineSize.DialogMd rather than a layout step.
Breakpoint members mirror keys in breakpoints.json. Use them on maxWidth and maxHeight only (page frames, content columns, scroll hosts).
| Enum | JSON key | px | Typical use |
|---|---|---|---|
Breakpoint.CenteredBlock | centered-block | 640 | Settings columns, compact centered blocks |
Breakpoint.Content | content | 800 | Primary content max width |
Breakpoint.ContentLg | content-lg | 960 | Wider content pages |
Breakpoint.Base … Breakpoint.TwoXl | base … 2xl | 1080–3440 | Desktop ladder (same px as container queries) |
@media and @container rules in product CSS via breakpoints.json. Do not reuse Breakpoint.Sm (1280px) when you mean an 800px content cap.
pnpm ui:migrate rewrites exact px/rem literals on Box and FlexBox to LayoutSize or Breakpoint where the map lists them. Unlisted literals stay blocked for manual review.