# PanelSpec Layout Resolve — Placement Engine

> Human appendix for the responsive **placement engine**.  
> Every **Copy AI Prompt** already embeds the full machine recipe in `meta.layoutResolve`.  
> This page is optional reading — you do not need to paste it for generation to work.

**Live:** [layout-resolve.html](https://www.ismartbase.com/layout-resolve.html) · **Designer:** [designer/](https://www.ismartbase.com/designer/)

## What this is

PanelSpec does not hand AI a vague list of “responsive tips.”  
It exports a **deterministic layout resolution algorithm** — the same one the designer preview uses.

Claim: **responsive placement engine for panel UIs** (not a full browser layout/paint engine).

## How Copy / Paste works

1. In the designer, click **Copy AI Prompt** (unchanged).
2. Paste into ChatGPT, Cursor, Claude, etc.
3. The paste includes:
   - Short English instructions (priority cascade pointer)
   - Full project JSON
   - **`meta.layoutResolve`** — complete recipe (priority, formulas, schema, conformance)

The AI must follow `meta.layoutResolve`. This markdown doc is a human-readable mirror.

## Resolution priority (highest first)

```
layoutVariants.devices*
        ↓
layoutConstraints (+ css / @container) against safe-area or host content box
        ↓
flow: wrap | stack | grid | areas | masonry (peer reflow)
        ↓
layoutIntent fill-width → width:100%
        ↓
layoutVariants.tablet | mobileLandscape | mobile | landscape
        ↓
@media (max-width: breakpoint) stack/fill fallback for undeclared form controls
```

Without this order, every model invents different geometry. With it, ambiguity is resolved.

## Constraint cascade

```
base layoutConstraints
        ↓
matching mediaQueries[]  (@media width / orientation)
        ↓
containerQuery           (@container size | style | scroll-state)
```

Prefer `layoutConstraints.css` when present.

## Core formulas (see JSON for full set)

| Key | Meaning |
|-----|---------|
| `contentBox` | Safe-area padding box |
| `fillWidth` / `fillHeight` | Stretch to content edges + pad |
| `percentWidth` / `percentHeight` | `%` of content box, clamped |
| `fluidWidth` | `clamp(min, preferred×scale, max)` |
| `aspectRatio` | Lock height from width |
| `wrapFlow` | Flex-wrap peer band |
| `stackFlow` | Column stack + gap |
| `gridFlow` / `gridAreas` / `masonryFlow` | CSS Grid family |
| `center` | Horizontal center in content box |
| `styleQuery` / `scrollStateQuery` | Host `@container` overrides |

Exact strings live in `meta.layoutResolve.formulas`.

## Feature surface (v15 placement bar)

- Safe areas (`env(safe-area-inset-*)`)
- Pins / sticky / absolute placement
- Width/height: fixed, fill, percent, fluid (`clamp`)
- Min/max size, aspect-ratio, object-fit
- Flex wrap, stack, grid, areas, masonry
- Subgrid track inheritance
- Container queries: size, style(`--prop`), scroll-state
- Object `mediaQueries[]`
- Overflow + scroll-snap (+ nowrap scrollport rows)
- Fluid typography
- Edge chrome full-bleed dock
- Touch-target guidance for compact form controls (AI/export recipe)

## Trust model

- Design canvas: `object.bounds` ±1px
- Other viewports: apply priority above — identical to designer adapt preview
- Never multiply Y by width scale
- `conformance.complete: true` means the **declared placement bar** is complete — not that PanelSpec is a browser

## Related

- [PanelSpec Runtime Contract](https://www.ismartbase.com/panelspec-contract.html) — Part A implementation rules  
- [Designer](https://www.ismartbase.com/designer/) — edit layouts and copy prompts