Web UI

Requirement A workspace MUST install the pinned baseline from litespec.manifest.json once, into its shared UI package, using the uiBaseline or uiBaselineSvelte entry.

Rationale The committed files are the CLI's configuration, the registry source, the token stylesheet, and the source lock beside them. Installing per application made a fourth copy. Drift in that copy was invisible. An additional registry is permitted under an exception recorded against this provision. The React baseline is the manifest uiBaseline entry and the Svelte baseline is the uiBaselineSvelte entry. This realizes litespec/frontend/ui#pin-the-baseline-in-the-shared-package.

Requirement The shared package MUST publish a registry whose build exits zero and which lists one item per floorplan the design contract declares.

Rationale Without an installable page, an author invents one from primitives. One item per floorplan gives every page type a reference the author installs before writing. The registry build runs shadcn build on React and shadcn-svelte build on Svelte.

Requirement A route MUST render exactly one floorplan from the declared set, unless it is a recorded freestyle route.

Rationale The floorplan fixes the layout, the heading position, and the slots. A reviewer reads which floorplan a route composes. The slots take domain values: the business record state, the use cases that state permits, and the refusal results of the called use case. This realizes litespec/frontend/ui#compose-each-route-from-one-floorplan.

Example An order route composes the entity floorplan and fills each slot from the order.

React:

<EntityPage
  title={order.number}
  status={<OrderStatus state={order.state} />}
  actions={<OrderActions permitted={order.permittedActions} />}
  facts={<OrderFacts order={order} />}
  related={<OrderPayments orderId={order.id} />}
/>

Svelte:

<EntityPage title={order.number}>
  {#snippet status()}
    <OrderStatus state={order.state} />
  {/snippet}
  {#snippet actions()}
    <OrderActions permitted={order.permittedActions} />
  {/snippet}
  {#snippet facts()}
    <OrderFacts {order} />
  {/snippet}
  {#snippet related()}
    <OrderPayments orderId={order.id} />
  {/snippet}
</EntityPage>

Requirement Route code MUST NOT carry a layout utility such as grid, flex, gap-*, space-*, or col-span-*.

Rationale A layout utility in a route file is a second layout beside the floorplan. The next route copies it. Floorplan and display composites own layout. One change reaches every route composing them. This realizes litespec/frontend/ui#keep-layout-inside-floorplans.

Requirement Every route MUST carry a data-registry-item attribute naming its page type's registry item, with a freestyle route carrying no attribute and naming its decision record.

Rationale An author with no named reference invents a page from primitives, and the next author invents another. An attribute that resolves keeps every page of one type on one reference. This realizes litespec/frontend/ui#derive-each-page-type-from-a-named-reference.

Requirement A state indicator MUST take one tone from the closed set, each application declaring its state-to-tone mapping once as an exhaustive table of language terms.

Rationale A page that picks a color picks a meaning nobody agreed to. One mapping means the same state reads the same way on every screen. A new state then fails to compile until its tone and its word exist. The table lives in src/app/states.tsx on React and src/lib/app/states.ts on Svelte. This realizes litespec/frontend/ui#select-a-tone-from-the-closed-set.

Requirement An application stylesheet MUST import the shared package's token stylesheet and declare no rule, with no literal color in any stylesheet the shared package ships.

Rationale One token sheet makes two applications look like one product. An application stylesheet imports it and declares no rule. A second sheet never introduces a value the first has no opinion about. A stylesheet the shared package ships beside the token sheet declares no literal color. This realizes litespec/frontend/ui#keep-tokens-in-one-definition.

Requirement A token stylesheet MUST carry the values the manifest baseline baseColor ramp publishes, and no value outside them except under a recorded exception.

Rationale A token value outside the published ramp is a second palette beside the declared one, and the next author copies it. A recorded exception keeps the deliberate departure visible in the design contract. The React baseline is the manifest uiBaseline entry and the Svelte baseline is the uiBaselineSvelte entry. This realizes litespec/frontend/ui#hold-the-declared-base-color.

Requirement Every route MUST pass each route suite check in a browser.

Rationale The Concepts section names the checks. They cover the floorplan, the registry reference, axe WCAG 2.2 AA, the heading, the landmark, reflow, text spacing, keyboard use, target size, and status announcements. One suite visits every route, so a new route is checked without a specification written for it. This realizes litespec/frontend/ui#check-every-route.

Requirement Every result a called use case returns MUST be proved by a passing test or a known-gap record with owner and end date.

Rationale A refusal a reader can reach and no test provokes is a refusal nobody has seen render. The calls come from the route code, so the obligation follows the code rather than a declaration. This realizes litespec/frontend/ui#prove-every-result-a-route-calls.

Example A browser test calls the use case and asserts one refusal result.

test('shows the changed total before payment', async ({ page }) => {
  // Steps call place-order and assert the expected-total-mismatch refusal.
});

Requirement A Tailwind class MUST use a semantic token rather than an arbitrary value, a raw palette value, or an important modifier.

Rationale The approved CSS surface is the shared package's stylesheet, holding the Tailwind import, the tokens, the fonts, and the documented resets. The source scan skips build output and reports authored feature CSS. This realizes litespec/frontend/ui#restrict-styling-to-semantic-tokens.

Requirement The shared package's source lock MUST record the pinned CLI, the registry address, the paths, the normalized digest, and the dependencies for each primitive.

Rationale The lock normalizes source before hashing, so two workspaces compute the same digest for identical source. One lock beside one copy is what makes a changed primitive report a fork rather than pass unreported.

Requirement A primitive, composite, token, source, floorplan, or route change MUST name the evidence in the matrix in this section.

Rationale The matrix maps each change class to the narrowest evidence that represents its risk. This realizes litespec/frontend/ui#prove-ui-behavior-and-appearance.