Preview edge cases

Preview a section's structural edge cases.

Goal

Preview a section’s structural edge cases.

Prerequisites

A section whose fixtures.ts already has a base — Pick a fixture scenario builds it.
An authored slot whose value the states vary — the summary slot in AI writes slot content is the one below.
A declared display variant, for the state that selects its other case — Add a variant declares it under display:.
The preview server, to review each state beside base — Preview sections with dev.

Steps

Add entries under states in fixtures.ts — one FixtureSpec per state, built the same way base is. A states entry is for a DESIGNED case, not raw coverage: nullability and empty-slot coverage (every slot rendered empty) is derived automatically from the section’s schema, so a fixture state is for a case the section renders differently — a content-length branch, a variant branch, an override, or several combined.

// fixtures.ts — a content-length case and a variant-branch case
export const fixtures = defineFixtures(
  schema,
  (scenario) => ({
    base: scenario("luxuryMultiUnit", {
      summary: "A 12-unit mansard Victorian moments from the Emerald Necklace.",
    }),
    states: {
      // Content-length branch: exercises a long value's wrap/expand behavior.
      "long-summary": scenario("luxuryMultiUnit", {
        summary:
          "A 12-unit mansard Victorian moments from the Emerald Necklace, with a " +
          "terrazzo lobby, an on-site gym, quartz kitchens throughout, and a " +
          "top-floor penthouse with a private rooftop terrace and skyline views.",
      }),
      // Variant branch: exercises the layout under the display variant's other
      // case. `.at()` takes a bare case string, checked at resolve time against
      // the cases `display:` declares — see The schema system § Display.
      compact: scenario("luxuryMultiUnit", {
        summary: "A 12-unit mansard Victorian moments from the Emerald Necklace.",
      }).at("multi"),
    },
  }),
);

Each state is complete, not a diff against base. A state resolves independently from its own scenario(...) call: every fact-bound and compute()-bound slot resolves fresh against that state’s scenario, and every authored slot you don’t repeat resolves to nothing rather than quietly falling back to base’s value. Repeat an authored slot in every state that needs it — "long-summary" above restates summary because nothing else would supply it. Each state is a selectable fixture in the dev preview, so every one you add is there to render and review alongside base.

Swap the whole scenario

A state can also be designed to look different against a sparser property — fewer units, no logo, no video — rather than a content-length or variant branch. Source that kind of state from a different scenario, not from hand-picked overrides — just name a different ScenarioKey in the state’s own scenario() call:

// fixtures.ts — a `sparse` state sourced from a different scenario
export const fixtures = defineFixtures(
  schema,
  (scenario) => ({
    base: scenario("luxuryMultiUnit", {
      summary: "A 12-unit mansard Victorian moments from the Emerald Necklace.",
    }),
    states: {
      sparse: scenario("sparseSingleFamily", {
        summary:
          "A classic center-hall colonial with an updated kitchen and original " +
          "hardwood floors throughout.",
      }),
    },
  }),
);

Every fact-bound and compute()-bound slot in sparse resolves against sparseSingleFamily’s own facts — there is no way for luxuryMultiUnit’s values to leak through, even for a slot the state doesn’t mention. Fill the authored slots you do need to state the same way you filled base — by the slot’s fill-spec source, never with a placeholder. See the fill-by-source rule and Pick a scenario for the picker and helper cheat-sheet.

Complete diff

The states entries under Steps — nothing else moves. Renderer.tsx is untouched, and section.ts moves only in Add a variant — the guide that declares the display variant whose cases .at() selects from.

Verify

Verify with the author loop.

Rules that can fire

fixtures-invalid — a states entry is malformed, and the message names the path inside the module it failed at.
section-unrenderable — the scenario a state names cannot supply a fact one of the section’s slots needs, so fixtures.ts throws while it loads.