PanelSpec · Placement engine
Layout Resolve
Human appendix for meta.layoutResolve — the responsive placement engine.
Every Copy AI Prompt already embeds the full machine recipe in the JSON.
You still copy and paste the same way; this page is optional reading.
meta.layoutResolve recipe.
This doc does not replace the paste.
What this is
Instead of “if mobile then stack,” PanelSpec defines a resolution algorithm shared by designer preview and AI export — priority order, formulas, and schema.
That is a stronger claim than “responsive tips”: it is a placement engine for panel UIs (not a full browser layout/paint engine).
Resolution priority
layoutVariants.devices*
↓
layoutConstraints (+ css / @container)
↓
flow: wrap | stack | grid | areas | masonry
↓
layoutIntent fill-width
↓
layoutVariants.tablet | mobileLandscape | mobile | landscape
↓
@media stack/fill fallback (undeclared form controls)
Highest match wins. Do not invent alternate scaling.
Constraint cascade
base layoutConstraints
↓
matching mediaQueries[] (@media)
↓
containerQuery (@container size | style | scroll-state)
Prefer layoutConstraints.css when present.
Formulas
Exact strings ship in meta.layoutResolve.formulas. Highlights:
| Key | Role |
|---|---|
contentBox | Safe-area padding box |
fillWidth / percentWidth / fluidWidth | Width modes |
wrapFlow / stackFlow / gridFlow | Peer reflow |
gridAreas / masonryFlow | Named areas + masonry |
center | Horizontal center in content box |
styleQuery / scrollStateQuery | Host container overrides |
Feature surface (v15)
- Safe areas, pins, sticky, absolute placement
- Width/height: fixed, fill, percent, fluid (
clamp) - Aspect-ratio, object-fit, min/max size
- Flex wrap, stack, grid, areas, masonry, subgrid
- Container queries: size, style, scroll-state
- Object
mediaQueries[] - Overflow, scroll-snap, fluid type, chrome dock
Trust rules
- Design canvas:
object.bounds±1px - Other viewports: same priority as designer adapt preview
- Never multiply Y by width scale
conformance.complete= declared placement bar complete — not a browser engine
Related
- PanelSpec Runtime Contract — Part A rules
- Designer — edit and copy prompts
- Markdown mirror