Layout grid

Agents guess numbers. A guessed .padding(13) looks almost right and makes the whole app feel slightly off. This skill replaces guessing with one scale and three checks that fail when something is off.

The template has everything in place: Sources/<App>/UI/Grid.swift and tools/. For an app made before this skill, copy UI/Grid.swift, tools/grid-lint.sh, and tools/check-layout.swift from the new-mac-app skill's template, and the layout file line from its Snapshot.swift.

The rules

1. Every padding, spacing, and size comes from Space: xs 4, sm 8, md 12, lg 16, xl 20, xxl 24, section 32. Raw numbers are 0, 1, 2, or a multiple of 4.
2. Pages and windows have a 20 pt margin (Space.margin). Cards pad 16 (Space.lg). Related controls sit 8 apart, groups 20 to 24, sections 32.
3. Each column has one leading edge. Titles, text, cards, and buttons in a column start on the same x. Indent on purpose, by a step of the scale.
4. Let containers do the aligning:
   • Labels with controls: Form with .formStyle(.grouped), or .columns for the Mac layout of right-aligned labels.
   • Rows and columns of values: Grid and GridRow.
   • A label with a value: LabeledContent.
   • Text of different sizes in one row: HStack(alignment: .firstTextBaseline).
   • Numbers in a column: .monospacedDigit(), trailing aligned.
   • An icon with text: Label.
5. Sheets are 360, 480, or 640 wide. Controls take their height from .controlSize, never from a fixed height.
6. Nested corners are concentric: inner radius = outer radius - padding.
7. .offset and .position move a view after layout, so nothing lines up with it. Use them only for motion and drag previews, with // grid: ok <why> on the line.
8. Long text truncates with its full value in a tooltip. Nothing clips.

Check 1: lint the code

Run it after every build that touched views:

tools/grid-lint.sh
# Sources/Tasks/TaskRow.swift:14: off grid (10): .padding(.horizontal, 10)
# FAIL grid-lint: 1 lines off the grid

Fix each line with a Space token.

Check 2: probe the real layout

Mark what you lay out yourself: the page, its sections, cards, rows in a card, sheet content. System lists, forms, sidebars, and toolbars align themselves and need no probes. Your own rows beside them do.

A check only sees what has probes. A screen with two probes passes while everything else is off, so read the count in the PASS line.

VStack(alignment: .leading, spacing: Space.xxl) {
    Text("Today").gridProbe("title", area: "page")
    StatsRow().gridProbe("stats", area: "page")
    TaskCard()
        .gridArea("card", inset: Space.lg)
        .gridProbe("card", area: "page")
}
.padding(Space.margin)
.gridArea("page")

.gridArea marks a container and its inset. .gridProbe marks a view in it. Probes with the same edge (default "lead") must share one leading edge. Pass edge: nil for views that sit side by side.

Snapshot mode writes a <page>-<mode>-layout.json next to every PNG. Check them:

swift tools/check-layout.swift /tmp/<App>-shots/*-layout.json
# PASS today-light-layout.json: 12 probes in 2 areas
# FAIL inbox-light-layout.json
#   - edge page/lead has 2 leading edges: title 320, list 324

It checks that every probe:

1. Starts on a whole or half point, so its edges stay sharp.
2. Starts a multiple of 4 pt from its area's edge.
3. Stays inside its area's inset on both sides.
4. Shares one leading edge with the others on its edge.
5. Sits a multiple of 4 pt below the probe above it.
6. Never overlaps another probe in its area.

Line up across areas

Rules 2 to 6 stay inside one area. Views in different areas, like text in a scroll view and a chat box outside it, need an edge that starts with =:

TextColumn().gridProbe("column", area: "", edge: "=reading")
Composer().gridProbe("composer", area: "", edge: "=reading")

These probes skip rules 2 to 6, so a view off the 4 pt grid can still match a system edge. To check one view against two groups, add a second .gridProbe with a different name, because a probe with the same name replaces the first.

Run the snapshots once with scroll bars on, because a scroll bar that takes width moves centered content (mac-design, app-shell.md):

tools/snap.sh -AppleShowScrollBars Always

The probes keep one frame per name across all windows. When a second window shows the same views, its layout file mixes both windows, so check that window by its PNG.

Check 3: look at the grid

When a check fails and the cause is not clear, draw the grid over the window:

APP_GRID=1 APP_STORE=/tmp/<App>-test.store APP_SNAPSHOT=/tmp/<App>-grid \
  ~/Applications/<App>.app/Contents/MacOS/<App>

The PNGs show an 8 pt grid, each area in blue with its inset dashed, and each probe in pink with its name. Open them with the Read tool.

Fix a failure

Done when tools/grid-lint.sh passes, tools/check-layout.swift passes on the layout files of every page you touched, and every custom page and card has a .gridArea with probes on its main parts.