@pipelex/mthds-form 0.29.0 → 0.31.0

package/dist/layout-design.mthds

@@ -29,6 +29,14 @@ main_pipe   = "design_layout"
 # - `emit_page` builds exactly that page: it is handed the plan, the catalog
 #   with every props signature, and the brief, and emits the JSONL patches.
 #
+# A second entry, `repair_layout`, takes a page the host's own checks refused
+# - the JSONL as emitted and the problems in words - lays the brief out the same
+# way and has `emit_repair` emit the whole page again with those problems
+# fixed. The checks are the package's TypeScript (`validateAgainstCatalog`
+# and `layoutProblems`), so the loop is the caller's: run `design_layout`,
+# check, and on a refusal run `repair_layout` with what the checks said, a
+# bounded number of times.
+#
 # The split is the point. A single completion asked for a whole page decides
 # the page and writes every patch in the same breath, and nothing in between
 # can be read; the plan can. The seed reaches the planner only, because the
@@ -75,7 +83,9 @@ main_pipe   = "design_layout"
 # text, and fails loudly on any issue, so a repair is a change HERE, never to
 # the fixture.
 #
-# Both model stages pin the same model. The specs pass takes MODEL=<id> to
+# Every model stage pins the same model: gpt-6.1-sol since the designer-reach
+# spike, where a blind critic scored it level with claude-5.5-opus at about a
+# third of the cost per page, with every layout valid. The specs pass takes MODEL=<id> to
 # override every pin at once for a comparative run (and TEMPERATURE=<n> for a
 # model that fixes its own), and records which model produced each fixture.
 #
@@ -120,8 +130,18 @@ description  = { type = "text", description = "One sentence on what the page is
 name         = { type = "text", description = "On an input page, the method's name as the host lists it - the one product name the page may carry. Absent when the host lists none." }
 paths        = { type = "list", item_type = "concept", item_concept_ref = "PathEntry", description = "Every path in the state the page binds or reads, in reading order and flattened: a structure's members follow it one level deeper, and a list's item members follow the list, spelled relative to one item.", required = true }
 run_control  = { type = "text", description = "On an input page, the catalog component that runs the method, by name; the page has exactly one of it." }
+returns      = { type = "list", item_type = "text", description = "On a composer, what one run gives back, one line per member of the result, read from the result's own titles and descriptions. Absent elsewhere." }
+frame        = { choices = ["page", "composer", "result"], description = "Where the page sits: `page`, a whole product page of its own; `composer`, the inputs of a host's compose-then-result app, before a run; `result`, the result page of that app, after one. Absent reads as `page`." }
+style        = { type = "concept", concept_ref = "Style", description = "The app style the team chose, which the page will wear: its name and its direction. Absent when the team chose none." }
 sample_state = { type = "text", description = "On a result page, the state of one real run as the host loads it, as JSON - what `/result` held after one actual run, so magnitudes and lengths can be judged. Never copied into a page." }
 
+[concept.Style]
+description = "An app style: a named look the components draw - faces, weights, radii, panels and rhythm - and the one sentence that says what it is, which the composition follows."
+
+[concept.Style.structure]
+name      = { type = "text", description = "The style's name, as a team picks it: `Quiet`, `Soft`, `Editorial`, `Bold`.", required = true }
+direction = { type = "text", description = "The style's direction in one sentence, as a designer reads it.", required = true }
+
 [concept.PathEntry]
 description = "One path of the state, as the brief describes it: where it is, what it holds, what it is called, what constrains it, and whether the page lays it out or hands it back to the kernel's own control."
 
@@ -202,6 +222,42 @@ The result of a method, described below.
 
 The method is called «{{ brief.name }}», as the host lists it. That is the app's name wherever the layout asks for one; invent no other. Links, if the layout carries any, name this page's own sections. The page states nothing the method does not: no promise about storage, privacy, speed, or what happens after the run.
 
+{% endif %}
+{% if brief.frame == "composer" %}
+## Frame
+
+This page is the composer of an app that is composed, then shows its result. The host draws what surrounds it: a band across the top with the team's logo and the app's name, which is not a heading, and below the page nothing. There is no side panel, no app bar, no footer and no summary of the inputs to build: the page is one centred column.
+
+The column opens on a headline that says what the person gets from the app, in their words (the page's h1), and one line under it. Then the inputs, in one raised panel whose foot is the host's action row: how long a run takes, which the host knows, and the one control that runs the method, worded with the job. Inside the panel, group the inputs the way a person thinks about the request, under a few short titles, and set them in two columns when there are enough to fill two. Nothing restates an input, and nothing is said twice.
+
+The action row stays on screen, so the first screen holds the headline and the first rows of the panel: put first the inputs a person decides first, and any the headline promises. Every word the page writes is fixed when the page is written, while the inputs change as a person fills them: never write a line about the state of an input or of the run, such as "Waiting on the topic" or "Add a document to start" - the controls show their own state.
+{% if brief.returns %}
+
+What one run gives back, read from the result's own description:
+{% for line in brief.returns %}
+- {{ line }}
+{% endfor %}
+
+A person runs a tool more readily when they know what comes back: the page may say it once, in their words, as the Composer's notes - a few short lines, never the list above copied out.
+{% endif %}
+
+{% elif brief.frame == "result" %}
+## Frame
+
+This page is the result page of an app that is composed, then shows its result: what the person sees after one run. The host draws what surrounds it: the band with the team's logo and the app's name, then a bar restating the request with a way back to edit it and to run again. The host also owns the actions on the result, such as downloading or sharing it, and places them where the page's header puts them. There is no side panel, no app bar and no footer to build, and nothing restates the request.
+
+The page is the result across the full width. It opens on its header, which names the result in a person's words, read from the result itself where it can be (the page's h1). Then the figure or the fact a person looks for first, then the body of the result in the shape it naturally has: a plan day by day, options side by side to compare, a record's details. Lay out what a person reads; leave out what only a machine would.
+
+Show each value once: a figure a component already states, such as the total inside a ProportionBar, is not repeated beside it. When the result carries the request back - the same facts the person entered, such as the topic or the tone they chose - leave that part out: the host's bar already restates the request. Write a value as a person reads it: a date in words, an amount beside its currency when the result has one.
+
+{% endif %}
+{% if brief.style %}
+## Style
+
+The team's apps wear the {{ brief.style.name }} style: {{ brief.style.direction }}
+
+The components already draw its faces, weights, radii and panels, so the page sets none of them. What the page decides is its composition, and the composition should read as this style too: how much air there is between the groups, how large and how long the headline is, how many groups the inputs fall into and whether they are titled, how much the page says around them. A calm style asks for few groups and generous air, a literary one for a headline that reads like a title and a measured rhythm, a graphic one for a dense, firm page with short labels.
+
 {% endif %}
 ## State
 
@@ -252,7 +308,11 @@ None. Emit no `/state` patches.
 ## Run
 
 {% if gating %}
+{% if brief.frame == "composer" %}
+The run waits for `{{ gating | map(attribute="name") | join("`, `") }}`. The host's action row says so by itself, so the page writes nothing about it.
+{% else %}
 The run waits for `{{ gating | map(attribute="name") | join("`, `") }}`; say so near the {{ brief.run_control }}, briefly.
+{% endif %}
 {% else %}
 Nothing gates the run.
 {% endif %}
@@ -274,7 +334,7 @@ type = "PipeLLM"
 description = "Read the brief and plan the page: what it is for, how it is composed, what each region holds and with which components, what runs the method, and what is delegated."
 inputs = { catalog = "Catalog", brief_text = "Text", seed = "Text?" }
 output = "PagePlan"
-model = { model = "claude-5-sonnet", temperature = 0.5, max_tokens = 8192 }
+model = { model = "gpt-6.1-sol", temperature = 0.5, max_tokens = 8192 }
 system_prompt = """
 You are a product designer with taste. You plan ONE page for a method - its inputs, or its result - to be built from a fixed catalog of components and bound to state the host provides. The page must read as a small, purpose-built web app, never as a form. Its shape is yours to decide: nothing here prescribes one. You write the plan and a second designer builds the page from it, so every decision you leave open is one they will make without you.
 """
@@ -293,6 +353,8 @@ DESIGN DIRECTION:
 - Restraint reads premium. No label that restates the obvious, no card inside a card, no paragraph that explains the form, no more than two levels of heading. Every element must earn its place; when in doubt, remove it.
 - Write copy a person would say: short labels, one helper sentence where a label is not enough and none where it is. The control that runs names the job ("Plan my trip"), never "Submit".
 - Every value binds to a path the brief lists, and the page reads clearly in both a light and a dark theme.
+- When the brief has a Frame section, the host has already drawn the rest of the screen: plan only the page that section describes, inside that frame - never a side panel, never a bar or a footer the host draws, never a second place the method is run from or a second copy of the request.
+- When the brief has a Style section, the team's apps wear that style, and the composition follows its direction: how much air the page takes, how large the headline reads, how dense the inputs sit and how they are grouped are yours to set in its spirit. The look itself - faces, radii, panels, colour - is the components', never the page's.
 
 AVAILABLE COMPONENTS ({{ catalog.components | length }}):
 
@@ -337,12 +399,13 @@ type        = "PipeLLM"
 description = "Build the page the plan describes: emit the JSONL patches of a spec over the catalog, bound to the host's state at the paths the brief lists."
 inputs      = { plan = "PagePlan", catalog = "Catalog", brief_text = "Text" }
 output      = "Text"
-# The object form, because the default output cap (4096 tokens on this model)
-# is not enough for a page over a deeply nested result: the Company hero's
-# first run spent exactly 4096 tokens and came back empty. The object form
+# The object form, because the default output cap (4096 tokens on
+# claude-5-sonnet, where this was learned) is not enough for a page over a
+# deeply nested result: the Company hero's first run spent exactly 4096
+# tokens and came back empty. The object form
 # requires a temperature; this is the runtime's own default, so the setting
 # the earlier captures ran under is unchanged.
-model = { model = "claude-5-sonnet", temperature = 0.5, max_tokens = 16384 }
+model = { model = "gpt-6.1-sol", temperature = 0.5, max_tokens = 16384 }
 system_prompt = """
 You are a product designer with taste, building ONE page for a method - its inputs, or its result - as a JSON spec over a fixed catalog of components, bound to state the host provides. A designer has planned the page; you build exactly that page, and it must read as a small, purpose-built web app, never as a form.
 """
@@ -402,6 +465,7 @@ EXECUTION:
 - Restraint reads premium. No label that restates the obvious, no card inside a card, no paragraph that explains the form, no more than two levels of heading. Every element must earn its place; when in doubt, remove it.
 - Write copy a person would say: short labels, one helper sentence where a label is not enough and none where it is. The control that runs names the job ("Plan my trip"), never "Submit".
 - Every value binds to a path the brief lists, and the page reads clearly in both a light and a dark theme.
+- When the brief has a Style section, build the plan's composition in its spirit: where the plan is silent - a gap, a column count, whether a group is titled - decide as that style would.
 
 AVAILABLE COMPONENTS ({{ catalog.components | length }}):
 
@@ -450,3 +514,66 @@ Below is the brief for the page you are building. It is the ONLY source of paths
 
 Build this page as the plan describes. Bind every value; inline nothing the state carries. Output only the JSONL patch lines - no prose before or after, no code fence.
 """
+
+[pipe.repair_layout]
+type = "PipeSequence"
+description = "Repair a page the host's checks refused: lay the brief out, then emit the whole page again with every problem the checks named fixed."
+inputs = { catalog = "Catalog", brief = "Brief", page = "Text", problems = "Text" }
+output = "Text"
+steps = [
+  { pipe = "render_brief", result = "brief_text" },
+  { pipe = "emit_repair", result = "repaired" },
+]
+
+[pipe.emit_repair]
+type        = "PipeLLM"
+description = "Emit a refused page again, whole, as JSONL patches over the catalog, with every problem the host's checks named fixed and nothing else changed."
+inputs      = { page = "Text", problems = "Text", catalog = "Catalog", brief_text = "Text" }
+output      = "Text"
+model = { model = "gpt-6.1-sol", temperature = 0.5, max_tokens = 16384 }
+system_prompt = """
+You are a product designer with taste, repairing ONE page that was built as a JSON spec over a fixed catalog of components, bound to state the host provides. The host checked the page before rendering it and refused it; you fix what it refused and keep everything else exactly as it was designed.
+"""
+prompt = """
+OUTPUT FORMAT (JSONL, RFC 6902 JSON Patch):
+Output ONLY JSONL: one JSON object per line, no prose, no markdown, no code fences. Emit the WHOLE page again, every line of it, as the page below is written: first /root, then each element under /elements/<key>, parents before children, then the /state patches it had, if any.
+
+WHAT THE HOST'S CHECKS FOUND:
+Each line names an element by its key and the rule it breaks.
+
+@problems
+
+THE PAGE AS IT WAS EMITTED:
+
+@page
+
+HOW TO REPAIR IT:
+1. Fix every problem listed, at the element it names, in the smallest way that satisfies the rule: a prop the component does not declare is removed or replaced by one it declares; a missing required prop is added; a second h1 becomes the next level down; a heading that skips a level takes the level it should have; a Tabs or Steps with one panel becomes that panel alone; a path the brief does not list is replaced by the one the brief lists for that value, or the element is removed.
+2. Change nothing the problems do not name: every other element keeps its key, its type, its props, its copy and its place in the tree, and the page keeps its composition.
+3. A fix must not break another rule: one h1, heading levels that increase by one, only the components and props below, every child emitted as its own element, every path one the brief lists, one control that runs the method on an input page.
+
+AVAILABLE COMPONENTS ({{ catalog.components | length }}):
+
+{% for component in catalog.components -%}
+- {{ component.name }}: {{ component.props }}
+  {%- if component.description %} - {{ component.description }}{% endif %}
+  {%- if component.accepts_children and component.slots %} [accepts children; slots: {{ component.slots | join(", ") }}]
+  {%- elif component.accepts_children %} [accepts children]
+  {%- elif component.slots %} [slots: {{ component.slots | join(", ") }}]{% endif %}
+  {%- if component.events %} [events: {{ component.events | join(", ") }}]{% endif %}
+{% endfor %}
+AVAILABLE ACTIONS:
+
+{% for action in catalog.actions -%}
+- {{ action.name }}: {{ action.description }}{% if action.built_in %} [built-in]{% endif %}
+{% endfor %}
+---
+
+Below is the brief the page was built for. It is the ONLY source of paths: every value the page shows or binds must be at a path the brief lists, spelled exactly as written.
+
+@brief_text
+
+---
+
+Emit the repaired page, whole. Output only the JSONL patch lines - no prose before or after, no code fence.
+"""

package/dist/react/index.d.ts

@@ -124,9 +124,13 @@ interface ObjectFieldProps {
     env?: FieldEnv;
 }
 /**
- * A structured concept: its sub-fields rendered inside one hairline-grouped
- * card so nesting stays legible. Empty optional sub-fields collapse behind a
- * "+ N optional" toggle - required and already-filled fields always show.
+ * A structured concept: its sub-fields under its name, grouped by where the
+ * structure stands (`StructureGrouping`): a card for a form's own structure,
+ * or a section when the host has framed the form in its own panel, a rule
+ * for one inside another, and nothing for a list's row, so nesting
+ * stays legible without boxing a field into a sliver of a phone. Empty
+ * optional sub-fields collapse behind a "+ N optional" toggle - required and
+ * already-filled fields always show.
  *
  * A CLOSED optional sub-structure (absent value) folds behind that toggle and
  * is counted like any empty optional field. The toggle also opens and closes
@@ -859,6 +863,18 @@ interface MethodFormProps {
     strings?: Partial<FieldStrings>;
     /** Mounts `FieldPresentationProvider`; absent, the nearest one applies. */
     presentation?: FieldPresentation;
+    /**
+     * The host draws the form inside a panel of its own, so the form draws no
+     * card inside it: a structure among the inputs is a section, its name a
+     * heading over its fields, set off from the inputs beside it by a hairline
+     * rather than boxed. A section the run gate refuses draws a red bar down
+     * its side, 4 pixels off the form, and sets its message beside its
+     * heading, where a card would turn its outline red, so the panel leaves
+     * the form 7 pixels of unclipped room at its start edge. Absent, a
+     * structure that is an input draws its own card, which is what says where
+     * it ends on a bare page.
+     */
+    framed?: boolean;
     /** Classes for the stack the fields sit in. */
     className?: string;
 }
@@ -872,7 +888,7 @@ interface MethodFormProps {
  * disclosure folds and opens exactly as the one inside a structure does,
  * optional structures included.
  */
-declare function MethodForm({ locale, strings, presentation, ...props }: MethodFormProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function MethodForm({ locale, strings, presentation, framed, ...props }: MethodFormProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 interface ResultFieldProps {
     field: RunField;
@@ -1344,7 +1360,9 @@ interface StuffViewerProps {
      * second heading under its own.
      *
      * It also supplies `downloadBaseName`'s default, so the file a reader saves
-     * is named after the thing they were reading rather than `output.json`.
+     * is named after the thing they were reading rather than `output.json`. It
+     * replaces a `title` the root carries as well: that names the output slot,
+     * not the stuff.
      */
     name?: string;
     /**
@@ -1372,7 +1390,7 @@ interface StuffViewerProps {
     downloadBaseName?: string;
     /**
      * Which download controls this panel draws, laid key by key over what
-     * `ResultEnvProvider` says: `{ result: false }` drops the header's Download
+     * `ResultEnvProvider` says: `{ result: false }` drops the panel's Download
      * and keeps each file's own button, `{ files: false }` the reverse. For a
      * surface where saving makes no sense (a preview inside an editor, say), set
      * both to `false`.

package/dist/react/index.js

@@ -1,20 +1,20 @@
 "use client";
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, SUPPORTED_LOCALES, StuffViewer, TextField, UnknownField, fieldControlClass, fieldStringsFor, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl } from '../chunk-RHX7LQRL.js';
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, SUPPORTED_LOCALES, StuffViewer, TextField, UnknownField, fieldControlClass, fieldStringsFor, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveRendition, useResolveShareUrl, useResolveUrl, useResolvedUrl } from '../chunk-ENK5QTUK.js';
+import '../chunk-2UCH4AAO.js';
 import '../chunk-4VAO6BDE.js';
 import '../chunk-VH5CDQDR.js';
 import '../chunk-L23R3JNQ.js';
 import '../chunk-56WECFBD.js';
-import '../chunk-ZX52CQJ4.js';
-export { humanizeFieldName } from '../chunk-GHVVULHY.js';
-import '../chunk-QQK6Y55E.js';
-import '../chunk-ZB4RYUKV.js';
-import '../chunk-FABY3DEY.js';
-import '../chunk-XCO6GTEC.js';
 import '../chunk-E6BIXJ6C.js';
 import '../chunk-XO5OENNF.js';
+export { humanizeFieldName } from '../chunk-GHVVULHY.js';
+import '../chunk-QQK6Y55E.js';
+import '../chunk-HVWE3TTC.js';
 import '../chunk-OD3VYXUY.js';
 import '../chunk-WYH56SOZ.js';
 import '../chunk-V3OV2XQT.js';
+import '../chunk-FABY3DEY.js';
+import '../chunk-XCO6GTEC.js';
 import '../chunk-GKV77RAS.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/styles-BoXPBjF4.d.ts

@@ -0,0 +1,258 @@
+import { z } from 'zod';
+
+/**
+ * The brand contract, as data: which token of a brand's `tokens.json` sets
+ * which custom property, and what that property paints.
+ *
+ * It is the theme contract seen from the other side. `src/styles/theme.css`
+ * states it as a working default and `docs/theming.md` in prose; this is the
+ * same list as a table a build can read, and a brand is exactly these tokens
+ * and no others - the validator refuses a file that adds one, because a token
+ * nothing consumes is a value with no way to be looked at.
+ *
+ * The colour and radius rows are not a second list kept beside `theme.css`:
+ * they are held to it, by `__tests__/contract.test.ts` over the source and by
+ * `scripts/assert-bundle.mjs` over the build. The two typography rows are the
+ * exception, and on purpose. `--font-sans` and `--font-mono` are the names of
+ * Tailwind's own theme variables, which the prebuilt sheet already declares,
+ * so `theme.css` does not define them: it is unlayered, and a value there
+ * would override the typeface of every host that loads it. The stock
+ * typeface is therefore the host's own, and only a brand's scope sets these
+ * two. See docs/brand.md.
+ */
+type ContractTokenType = 'color' | 'dimension' | 'fontFamily';
+interface ContractToken {
+    /** The DTCG token id, `color.background`. */
+    id: string;
+    /** The custom property it sets, `--background`. */
+    variable: string;
+    type: ContractTokenType;
+    /** What the property paints, in the words a producer is told. */
+    paints: string;
+}
+/** The colour tokens, in the order `theme.css` states them. */
+declare const COLOR_TOKEN_NAMES: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring"];
+type ColorTokenName = (typeof COLOR_TOKEN_NAMES)[number];
+declare function isColorTokenName(name: string): name is ColorTokenName;
+declare const BRAND_CONTRACT: readonly ContractToken[];
+/** The minimum contrast ratio text must reach: WCAG 2 AA for normal text. */
+declare const MIN_CONTRAST = 4.5;
+/**
+ * The contrast a control's outline or mark needs against what surrounds it:
+ * WCAG 2's level for a user interface component (1.4.11). A button colour
+ * below it against the page is a button whose shape is hard to see.
+ */
+declare const MIN_CONTROL_CONTRAST = 3;
+/**
+ * Two colours the contract holds to a contrast ratio in both modes, as they
+ * render: the canvas opaque, a translucent surface laid over it, and the ink
+ * blended over whatever is beneath it by its alpha.
+ */
+interface ContrastPair {
+    foreground: ColorTokenName;
+    background: ColorTokenName;
+    /**
+     * The canvas beneath the pair's surface. When it is set, `background` names
+     * a surface the contract lets be translucent, and that surface is laid over
+     * this canvas before anything is measured on it. Absent, `background` is
+     * the canvas itself and must be opaque, since what shows through a
+     * translucent canvas is whatever the host paints beneath it.
+     */
+    over?: ColorTokenName;
+    /** The ratio the pair must reach: `MIN_CONTRAST` for text, `MIN_CONTROL_CONTRAST` for a mark. */
+    minimum: number;
+}
+/**
+ * The pairs a brand must hold in both modes. The ink and the secondary text
+ * on the canvas are text, at WCAG AA.
+ *
+ * The secondary text on the field fill is held to a control's 3:1. The kernel
+ * draws marks in that colour on the fill, an off switch's track and a number
+ * field's stepper icons, and those need 3:1 to be seen. It also sets text in
+ * that colour on the fill, a boolean row's description, an unselected pill's
+ * label and a placeholder, which AA would hold to 4.5:1, but the stock
+ * palette's light mode measures 4.39:1 on its own field fill, the same grey
+ * it measures on `--muted`, so the text bar there waits on the stock palette
+ * reaching it. The field fill may be translucent, as a style's often is, so
+ * it is laid over the canvas first.
+ *
+ * The error colour is held to the same 3:1, as a solid colour, on the canvas
+ * and on a card laid over it, which is what a host's panel usually is,
+ * because a framed section's error bar is drawn in that colour, solid, on
+ * either. The outlines of a card and of a field in error are drawn at half
+ * and seven tenths of it, so they read fainter than this pair measures, and
+ * the pair does not hold them. The error captions are text, which AA would
+ * hold to 4.5:1, but the stock palette's red measures 3.76:1 on white, so
+ * that bar waits on the stock palette too.
+ */
+declare const CONTRAST_PAIRS: readonly ContrastPair[];
+/** The custom property a token sets, or a loud failure for a token the contract does not name. */
+declare function contractVariable(id: string): string;
+
+declare const brandManifestSchema: z.ZodObject<{
+    name: z.ZodString;
+    website: z.ZodURL;
+    logo: z.ZodObject<{
+        onLight: z.ZodUnion<readonly [z.ZodURL, z.ZodString]>;
+        onDark: z.ZodUnion<readonly [z.ZodURL, z.ZodString]>;
+    }, z.core.$strict>;
+    webfont: z.ZodNullable<z.ZodObject<{
+        provider: z.ZodLiteral<"google-fonts">;
+        family: z.ZodString;
+    }, z.core.$strict>>;
+}, z.core.$strict>;
+type BrandManifest = z.infer<typeof brandManifestSchema>;
+
+/**
+ * The app styles and the typefaces, as data, and the roles a team's choice of
+ * the two sets.
+ *
+ * A style is a small set of design values a team picks from a closed list, on
+ * top of its own colours and logo: how its headings, its panels, its corners,
+ * its call to action and its rhythm look. A typeface is picked from a short
+ * list beside it, and replaces the style's body face, and its heading face
+ * wherever the style's headings follow the body. Neither adds a colour: every
+ * fill, edge and ink a style uses is a role the theme contract already has,
+ * named here by that role (`RoleColor`), or a shadow.
+ *
+ * `deriveStyleRoles` returns roles, never custom property names, the way
+ * `deriveBrandRoles` does for the seed colours: each host maps them onto its
+ * own tokens, and the kernel's controls and the generative layer read the few
+ * optional tokens docs/theming.md lists, each with today's look as its
+ * fallback. A role a choice does not set is not a key, so a host keeps its own
+ * value there; `quiet` with no typeface sets nothing at all, which is what
+ * makes "no style" and "the default style" one state.
+ *
+ * See docs/brand.md § "App styles and typefaces".
+ */
+/** The faces of the closed list, all on Google Fonts under the SIL Open Font License. */
+type TypefaceId = 'inter' | 'dm-sans' | 'plus-jakarta-sans' | 'manrope' | 'ibm-plex-sans' | 'source-sans-3' | 'work-sans' | 'space-grotesk' | 'newsreader';
+/** The faces a team may pick as its typeface: every face but a style's own heading face. */
+type BodyTypefaceId = Exclude<TypefaceId, 'newsreader'>;
+interface Typeface {
+    id: TypefaceId;
+    /** The family name, as a stylesheet and a font service name it. */
+    family: string;
+    category: 'sans-serif' | 'serif';
+    /** The weights a host loads it in: from the host's own light titles (300) to the boldest a style sets (700). */
+    weights: readonly number[];
+    /** The generic stack that renders while the face loads, or when it never does. */
+    fallback: string;
+    /** The face first, then its fallback: a whole `font-family` value. */
+    stack: string;
+    /** Whether a team may pick it (`body`), or a style uses it for its headings only (`heading`). */
+    use: 'body' | 'heading';
+}
+/**
+ * Every face a style or a team can set. The body faces are the list a team
+ * picks from; Newsreader is the `editorial` style's heading face, listed so a
+ * host loads it, and is not a team's choice. Frozen, like `APP_STYLES`: a
+ * process serves many teams, so the catalogue one of them reads cannot be
+ * one another has edited.
+ */
+declare const TYPEFACES: readonly Typeface[];
+/** Whether `value` names a face a team may pick: a body face of `TYPEFACES`. */
+declare function isTypeface(value: unknown): value is BodyTypefaceId;
+/**
+ * A colour a style paints with, named by the role of the theme contract it
+ * is: never a colour of its own, so a team's palette and the host's theme
+ * stay the only sources of colour, and their readability guarantees hold.
+ */
+interface RoleColor {
+    role: ColorTokenName;
+    /** Mixed toward another role, in Oklab, by `share` (0 to 1): the card a little toward the foreground. */
+    toward?: {
+        role: ColorTokenName;
+        share: number;
+    };
+    /** Its opacity over what lies behind it, 0 to 1; absent, opaque. */
+    alpha?: number;
+}
+/** How a style draws a panel - a host's composer, a designed page's rail or card - in one theme. */
+interface PanelRoles {
+    fill: RoleColor;
+    /** The edge's colour, or `null` for no visible edge (the width is kept, so a panel's box does not move). */
+    edge: RoleColor | null;
+    /** The edge's width, in CSS pixels. */
+    edgeWidth: number;
+    /** A CSS `box-shadow` in a neutral ink, or `null` for none. */
+    shadow: string | null;
+    /**
+     * The fill of the fields set into the panel, where the host's field fill
+     * would sink into it; absent, the host's own.
+     */
+    field?: RoleColor;
+}
+/** The call to action's shadow: a CSS shadow's geometry, in pixels, tinted with a role. */
+interface ActionShadow {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: RoleColor;
+}
+/**
+ * The roles a style and a typeface set. An absent role is not a key: a host
+ * keeps its own value there.
+ */
+interface StyleRoles {
+    /** The face of everything on the page. */
+    bodyFace?: Typeface;
+    /** The face of the page's titles and its sections' and panels' headings. */
+    headingFace?: Typeface;
+    headingWeight?: number;
+    /** The headings' letter spacing, in `em`. */
+    headingTracking?: string;
+    /** A control's corner radius, in CSS pixels; a panel takes one and a half of it. */
+    radius?: number;
+    /** The panel treatment in each theme: a shadow that reads on a light page is lost on a dark one. */
+    panel?: {
+        light: PanelRoles;
+        dark: PanelRoles;
+    };
+    /**
+     * The call to action's shadow in each theme, or `none` for a plain fill: a
+     * shadow in the button colour that lifts a button on a light page smears
+     * under it on a dark one.
+     */
+    actionShadow?: {
+        light: ActionShadow | 'none';
+        dark: ActionShadow | 'none';
+    };
+    /** The rhythm: a multiple of the host's own margins, paddings and gaps around the form. Never a control's size. */
+    density?: number;
+}
+type AppStyleId = 'quiet' | 'soft' | 'editorial' | 'bold';
+interface AppStyle {
+    id: AppStyleId;
+    name: string;
+    /** The direction, in one sentence, as a designer reads it. */
+    direction: string;
+    /** The roles the style sets when the team picks no typeface. */
+    roles: StyleRoles;
+}
+declare const APP_STYLE_IDS: readonly AppStyleId[];
+/** Whether `value` names one of the app styles. */
+declare function isAppStyle(value: unknown): value is AppStyleId;
+/**
+ * The roles a team's choice sets: its style and its typeface, each a stored
+ * id or nothing. An unknown or absent style is `quiet`, which sets nothing;
+ * an unknown typeface, or one a team may not pick, is no typeface, so the
+ * style's own face (or the host's) stays. The team's typeface replaces the
+ * style's body face, and its heading face wherever the style's headings
+ * follow the body.
+ */
+declare function deriveStyleRoles(style: string | null | undefined, typeface?: string | null): StyleRoles;
+/** The styles, each with its own roles: what it sets for a team that picked no typeface. */
+declare const APP_STYLES: Readonly<Record<AppStyleId, AppStyle>>;
+/**
+ * A role colour as a `#rrggbb` hex over the palette it names, to measure a
+ * surface a style draws: the ink a team's accent needs on a style's panel
+ * (`deriveBrandRoles`' `surfaces`). The mix is Oklab's, as CSS `color-mix()`
+ * computes it. A translucent colour is laid over `behind`; without it, it
+ * throws, since a translucent colour has no one value. Throws, too, for a
+ * role the palette does not hold or a palette colour that is not a hex.
+ */
+declare function resolveRoleColor(color: RoleColor, palette: Partial<Record<ColorTokenName, string>>, behind?: string): string;
+
+export { APP_STYLES as A, type BrandManifest as B, type ColorTokenName as C, MIN_CONTRAST as M, type PanelRoles as P, type RoleColor as R, type StyleRoles as S, TYPEFACES as T, APP_STYLE_IDS as a, type ActionShadow as b, type AppStyle as c, type AppStyleId as d, BRAND_CONTRACT as e, type BodyTypefaceId as f, COLOR_TOKEN_NAMES as g, CONTRAST_PAIRS as h, type ContractToken as i, type ContractTokenType as j, type ContrastPair as k, MIN_CONTROL_CONTRAST as l, type Typeface as m, type TypefaceId as n, brandManifestSchema as o, contractVariable as p, deriveStyleRoles as q, isAppStyle as r, isColorTokenName as s, isTypeface as t, resolveRoleColor as u };