rendered-class-conflict

Venue: check — A section must not be composed by both a website template and a rendered-class one.

Rule

A section must not be composed by both a website template and a rendered-class template (output: "image" or output: "document"). Every template in the workspace is read, so the conflict is reported whichever one you happen to be checking — and reported once, naming the templates on each side.

Reason

A section’s kind is derived, never declared: what composes it is what makes it a website section or a frame section. The two share every primitive — <Section>, the slot components, computes, fixtures, themes — but they do not share a layout regime, and that is the whole difference.

A website section adapts to a window it can never know — an arbitrary, scrollable browser — and flows to whatever height its content needs. A frame section reads a window that is exactly its format’s bleed box, and must fit it: fixed geometry, no scroll, fit judged against the trim and bleed guides. A section composed by both is being asked to satisfy two disjoint design targets at once, and the rendered-class disciplines make the split real rather than stylistic: a transition is ordinary website authoring and refused outright in a rendered class, and an island that is legal in both paints a state nobody will ever click in one of them.

The failure is quiet, which is why it is graded. Nothing throws. The section simply renders at one arbitrary size in the artifact it was not written for, and the defect looks like a styling mistake rather than a category error.

Fix

Split it into one section per kind. They are separate sections in separate folders, and they may still share everything that is not layout — components, hand-written CSS, computes, even fixtures — so the split costs far less than it looks like it should.

Before

// templates/listing-card/template.ts — an image template reaching for the
// website template's hero section.
const sections = composeSections({
  hero: { schema: heroSchema, instanceId: "hero", section: "spw-essential/hero" },
});

spw-essential/hero is written against the website ladder, so the card renders it at whatever width the frame happens to be.

After

import { composeSections } from "@homepages/template-kit";

export const sections = composeSections({
  hero: { schema: heroSchema, instanceId: "hero-1" },
});

A frame section of its own, in this template’s sections/ folder — the schema composed here is the card’s, not the website’s. It may share the website hero’s components and hand-CSS; what it must not share is the layout.

See also

• template.ts — output, the format set, and how a composition names a section.
• The CSS pipeline — the two responsive mechanisms and where each one resolves.