4leggedITTemplate

    Standards

    Placeholder markers pattern

    Two markers that keep unconfirmed copy honest: one for wording drafted on the owner's behalf, one for sections only the owner can supply. Both stay visible in production until someone confirms and removes them.

    Drafted wording (`Placeholder`)

    Wraps a sentence drafted so the page has something to hold. The dashed outline and badge show it has not been confirmed; hover the badge for the note.

    The lending library is open on Saturday mornings. Borrowers may keep an item for two weeks, and renew it once if nobody is waiting.draft

    Localized badge (`label`)

    Pass `label` in the site's language. A Spanish-first site uses `borrador` instead of the English default `draft`.

    Volunteers meet at the north gate before each shift.borrador

    Content only the owner can supply (`PlaceholderSection`)

    Renders the section anyway: a visitor-safe “coming soon” line, then the request addressed to the owner. Used for a story, a team, credentials — things that cannot be drafted.

    How the workshop runs

    Workshop details are coming soon.

    We need your part

    Only you can fill this in: how long does a session run, how many people fit, and what should someone bring? A voice note is fine — we will write it up.

    The section stays on the page so the gap is visible until it is filled.

    When to use which

    - `Placeholder`: a statement about how the business or organization operates that we wrote and the owner has not confirmed.

    - `PlaceholderSection`: content only the owner can provide — their story, team, credentials, day-to-day details. Never invent it; mark the gap instead.

    - Neither: a fact that is simply missing (use “details coming soon” text), interface labels, button text, error-page copy, or anything taken from the owner's own flyers, messages or social posts — that material is already theirs.

    - Build the section anyway. An omitted section is invisible, and invisible gaps become permanent.

    Standard

    - Import both from `@/components/patterns/` — never hand-roll a lookalike marker on a site.

    - `Placeholder` renders inline (a `span`). Put it inside a paragraph or heading; never wrap block elements in it.

    - Use `note` to say exactly what is unconfirmed, so a reviewer can confirm quickly.

    - Pass `label` in the site's language (e.g. `borrador`, `Nos falta tu parte`).

    - Markers are never hidden in production — no build flag, no CSS, no “strip” helper. Shipping the wording unmarked means deleting the wrapper.

    - Both use shared theme tokens only (`muted`, `muted-foreground`, `background`, `accent`, `accent-foreground`, `foreground`). A theme's `accent-foreground` must be readable on `accent`.

    - Wire `npm run drafts` (`tools/list-drafts.mjs`) on any site that uses the markers; it lists every outstanding one, and is how you check nothing is left after removing a wrapper. Remove imports left unused. A documentation page that renders markers on purpose opts out with a `drafts:ignore-file` comment.

    - Components: `template/src/components/patterns/Placeholder.tsx`, `template/src/components/patterns/PlaceholderSection.tsx`