@vectoriox/iox-ui 5.83.1 → 5.85.0

package/src/design-core/header-behaviour.ts

@@ -0,0 +1,76 @@
+/**
+ * How a site's header behaves as the page scrolls (premium components T2, M4). Two traits on the header's ROOT (the
+ * Navigation bar, generation-core `NavRole.Root`) — edited in its "Header" section, stamped by the composer from a
+ * `nav.*` pattern's `header` — and ONE answer every renderer applies: the attributes below, which the shared CSS
+ * (`iox-design.css`) and the header runtime (`HeaderRuntime`, main entry) read. A header with neither trait renders
+ * exactly as before (it scrolls away with the page, its divider line as its look draws it).
+ *
+ * Framework-free: the composer (generation-core) and both renderers read it.
+ */
+
+export enum HeaderBehaviour {
+    /** It scrolls away with the page (the default; what every header saved before M4 does). */
+    Scrolls = 'scrolls',
+    /** It stays at the top while the page scrolls under it. */
+    Stays = 'stays',
+    /** It steps aside while the page scrolls down and comes back the moment it scrolls up. */
+    Hides = 'hides',
+}
+
+/** What separates the header from the page once the page has moved under it (Emil 99: an edge, not a divider). */
+export enum HeaderEdge {
+    /** A soft fade of the header's own ground over the content under it. */
+    Fade = 'fade',
+    /** A hairline in the header's border colour. */
+    Line = 'line',
+    None = 'none',
+}
+
+/** The traits, stored in the root's props (no default: a plain Container saves neither). */
+export enum HeaderTrait {
+    Behaviour = 'headerBehaviour',
+    Edge = 'headerEdge',
+}
+
+export enum HeaderAttribute {
+    /** `stays` | `hides` on a header that stays at the top. Absent: it scrolls away. */
+    Behaviour = 'data-iox-header',
+    /** `fade` | `line` | `none`: the edge it shows once the page has scrolled. Absent: its look's own divider stays. */
+    Edge = 'data-iox-header-edge',
+    /** Written by the header runtime while a `hides` header has stepped aside. */
+    Hidden = 'data-iox-header-hidden',
+}
+
+/** What a composed header gets (the `nav.*` patterns' `header`, the palette's Navigation bar). */
+export const COMPOSED_HEADER: Readonly<{ behaviour: HeaderBehaviour; edge: HeaderEdge }> = {
+    behaviour: HeaderBehaviour.Hides,
+    edge: HeaderEdge.Fade,
+};
+
+const BEHAVIOURS = new Set<string>(Object.values(HeaderBehaviour));
+const EDGES = new Set<string>(Object.values(HeaderEdge));
+
+/** A stored behaviour, or Scrolls for anything else. */
+export function headerBehaviourOf(value: unknown): HeaderBehaviour {
+    return typeof value === 'string' && BEHAVIOURS.has(value) ? value as HeaderBehaviour : HeaderBehaviour.Scrolls;
+}
+
+/** A stored edge, or null (none chosen: the look's divider stays as it is). */
+export function headerEdgeOf(value: unknown): HeaderEdge | null {
+    return typeof value === 'string' && EDGES.has(value) ? value as HeaderEdge : null;
+}
+
+/** True when the header keeps its place at the top of the screen (it stays, or it hides and comes back). */
+export function headerStaysAtTop(behaviour: unknown): boolean {
+    return headerBehaviourOf(behaviour) !== HeaderBehaviour.Scrolls;
+}
+
+/** The attributes a header renders, from its two trait values — `{}` for a header that keeps today's behaviour. */
+export function headerAttributes(behaviour: unknown, edge: unknown): Record<string, string> {
+    const out: Record<string, string> = {};
+    const b = headerBehaviourOf(behaviour);
+    if (b !== HeaderBehaviour.Scrolls) out[HeaderAttribute.Behaviour] = b;
+    const e = headerEdgeOf(edge);
+    if (e) out[HeaderAttribute.Edge] = e;
+    return out;
+}

package/src/design-core/public-api.ts

@@ -13,6 +13,7 @@ export * from './design-token.model';
 export * from './css-names';
 export * from './token-css';
 export * from './theme-color';
+export * from './header-behaviour';
 export * from './flavor';
 export * from './element-styles';
 export * from './adopt';

package/src/design-core/theme-color.ts

@@ -3,6 +3,8 @@ import { DesignTokenLike } from './token-css';
 
 /** The token the browser's own chrome takes its colour from: the page's ground. */
 export const THEME_COLOR_TOKEN = 'bg';
+/** …or the header's ground, when a header stays at the top of the screen (premium components T2, M4). */
+export const HEADER_THEME_COLOR_TOKEN = 'nav-bg';
 
 const VAR_REF = /^var\(\s*--iox-([\w-]+)\s*(?:,\s*([^()]+))?\)$/;
 /** A colour the browser's chrome can wear: opaque hex, rgb() or hsl() — never a gradient, a mix or a translucent one. */
@@ -20,22 +22,36 @@ function resolveIn(map: ReadonlyMap<string, string>, value: string | undefined,
     return resolveIn(map, map.get(ref[1]) ?? ref[2]?.trim(), depth + 1);
 }
 
-function colourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean): string | undefined {
+function colourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean, token: string): string | undefined {
     const map = new Map(rows.map(r => [r.name, dark ? (r.values?.dark ?? r.value) : r.value] as [string, string]));
-    const colour = resolveIn(map, map.get(THEME_COLOR_TOKEN));
+    const colour = resolveIn(map, map.get(token));
     return colour && SOLID_COLOUR.test(colour) ? colour : undefined;
 }
 
+export interface ThemeColorOptions {
+    /** A header stays at the top of the screen (it stays, or hides and comes back): the browser's chrome meets the
+     *  HEADER, so it takes the header's ground when that is a solid colour (a translucent one falls back to the page's). */
+    header?: boolean;
+}
+
+function themeColourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean, options: ThemeColorOptions): string | undefined {
+    return (options.header ? colourFor(rows, dark, HEADER_THEME_COLOR_TOKEN) : undefined) ?? colourFor(rows, dark, THEME_COLOR_TOKEN);
+}
+
 /**
  * The `theme-color` the browser's chrome takes per colour scheme (premium components G15 — mobile-native M10): the
  * page's ground in each mode the site shows, resolved through the org's rows. A light or dark site answers its one
  * mode; `auto` answers both (the engine writes them with `media="(prefers-color-scheme: …)"`). A value that is not a
  * solid colour answers nothing — the browser keeps its own.
  */
-export function themeColors(rows: ReadonlyArray<DesignTokenLike> | null | undefined, mode: DesignMode | string | null | undefined = 'auto'): ThemeColors {
+export function themeColors(
+    rows: ReadonlyArray<DesignTokenLike> | null | undefined,
+    mode: DesignMode | string | null | undefined = 'auto',
+    options: ThemeColorOptions = {},
+): ThemeColors {
     const list = rows ?? [];
     const out: ThemeColors = {};
-    if (mode !== 'dark') { const light = colourFor(list, false); if (light) out.light = light; }
-    if (mode !== 'light') { const dark = colourFor(list, true); if (dark) out.dark = dark; }
+    if (mode !== 'dark') { const light = themeColourFor(list, false, options); if (light) out.light = light; }
+    if (mode !== 'light') { const dark = themeColourFor(list, true, options); if (dark) out.dark = dark; }
     return out;
 }

package/src/generation-core/ai-run.ts

@@ -27,6 +27,8 @@ export enum AiStep {
     PlanSite = 'plan',
     ChangePlan = 'planEdit',
     MakePictures = 'image',
+    /** M7: a small vision model looks at each made picture against its slot (one structured answer). */
+    CheckPictures = 'imageReview',
     NameStructures = 'scanNaming',
 }
 
@@ -38,6 +40,7 @@ export const AI_STEP_LABELS: Readonly<Record<AiStep, string>> = {
     [AiStep.PlanSite]: 'Plan the site',
     [AiStep.ChangePlan]: 'Change the plan',
     [AiStep.MakePictures]: 'Make pictures',
+    [AiStep.CheckPictures]: 'Check pictures',
     [AiStep.NameStructures]: 'Name repeated structures',
 };
 
@@ -53,6 +56,7 @@ export const AI_STEP_NEEDS: Readonly<Record<AiStep, ReadonlyArray<AiCapability>>
     [AiStep.PlanSite]: [AiCapability.StructuredOutput],
     [AiStep.ChangePlan]: [AiCapability.StructuredOutput],
     [AiStep.MakePictures]: [AiCapability.ImageOutput],
+    [AiStep.CheckPictures]: [AiCapability.StructuredOutput, AiCapability.ImageInput],
     [AiStep.NameStructures]: [AiCapability.StructuredOutput],
 };
 
@@ -91,8 +95,12 @@ export const AI_STEP_TYPICAL_TOKENS: Readonly<Record<AiStep, AiTokenCounts>> = {
     [AiStep.ReadMessage]: { input: 8_800, output: 1_500, cacheWrite: 0, cacheRead: 0 },
     [AiStep.PlanSite]: partsTotal(AiStep.PlanSite),
     [AiStep.ChangePlan]: partsTotal(AiStep.ChangePlan),
-    // a 1 K picture is 1,120 image tokens (Google's figure for Nano Banana 2) — I-D4
-    [AiStep.MakePictures]: { input: 0, output: 0, cacheWrite: 0, cacheRead: 0, imageOutput: 1_120 },
+    // a 1 K picture is 1,120 image tokens (Google's figure for Nano Banana 2) — I-D4; the prompt (the art direction's
+    // preamble, the slot's subject, its frame and empty area) about 400 more in (M7)
+    [AiStep.MakePictures]: { input: 400, output: 0, cacheWrite: 0, cacheRead: 0, imageOutput: 1_120 },
+    // M7: one picture downscaled to 512 px (≈ 350 image tokens for Claude, ≈ 260 for Gemini) + the slot's question,
+    // and a short structured answer
+    [AiStep.CheckPictures]: { input: 1_200, output: 150, cacheWrite: 0, cacheRead: 0 },
     [AiStep.NameStructures]: { input: 80_000, output: 10_000, cacheWrite: 0, cacheRead: 0 },
 };
 

package/src/generation-core/art-direction.ts

@@ -0,0 +1,122 @@
+import { DesignChoices, parseHexColor, rgbToOklab } from '@vectoriox/iox-ui/design-core';
+
+import { SPEC_SITE_PICTURE_NEVER, SPEC_SITE_PICTURE_WORLDS } from './site-spec.generated';
+
+/**
+ * A site's ART DIRECTION (premium-components M7, premium sites PS4): what every picture made for the site shares, so its
+ * pictures read as one photographer's and never as a stock pool. A closed WORLD (the contract's `site.pictureWorlds`)
+ * gives the five parts — medium, light, grade, texture and a negative list — and ONE preamble built from them is carried
+ * VERBATIM at the head of every picture prompt of the site (`artDirectionPreamble`).
+ *
+ * Decided here, not by a model: the world is the business type's (harness-core `BusinessType.world`), a dark look moves it
+ * to the world's `dark`, and the brand's hue joins the grade. Zero tokens, the same site always gets the same direction,
+ * and the quality lever — each world's wording — is written once in the contract, as the proof sites' briefs were.
+ */
+
+export enum PictureWorld {
+    Documentary = 'documentary',
+    HighKey = 'high-key',
+    LowKey = 'low-key',
+    HardLight = 'hard-light',
+    Macro = 'macro',
+    Architectural = 'architectural',
+    Nocturne = 'nocturne',
+    Drawing = 'drawing',
+}
+
+export const PICTURE_WORLD_IDS: ReadonlyArray<PictureWorld> = Object.values(PictureWorld);
+
+/** One world as the contract writes it. */
+export interface PictureWorldSpec {
+    readonly label: string;
+    readonly medium: string;
+    readonly light: string;
+    readonly grade: string;
+    readonly texture: string;
+    readonly negative: ReadonlyArray<string>;
+    /** Where a dark look's pictures go. */
+    readonly dark: string;
+}
+
+export const PICTURE_WORLDS = SPEC_SITE_PICTURE_WORLDS as unknown as Readonly<Record<PictureWorld, PictureWorldSpec>>;
+
+/** What no picture of any site shows — every world adds its own after these. */
+export const PICTURE_NEVER: ReadonlyArray<string> = SPEC_SITE_PICTURE_NEVER;
+
+/** The art direction a plan carries (`plan.artDirection`): the world and its five parts as this site wears them. */
+export interface ArtDirection {
+    readonly world: `${PictureWorld}`;
+    readonly medium: string;
+    readonly light: string;
+    readonly grade: string;
+    readonly texture: string;
+    readonly negative: ReadonlyArray<string>;
+}
+
+/** The five parts every art direction must carry, in the order the preamble says them. */
+export const ART_DIRECTION_PARTS = ['medium', 'light', 'grade', 'texture', 'negative'] as const;
+
+export function isPictureWorld(value: unknown): value is PictureWorld {
+    return typeof value === 'string' && (PICTURE_WORLD_IDS as ReadonlyArray<string>).includes(value);
+}
+
+/** OKLCH hue bands (degrees, upper bound) → the word a grade says; below the chroma floor a brand is neutral. */
+const HUE_WORDS: ReadonlyArray<readonly [number, string]> = [
+    [12, 'rose'], [33, 'red'], [55, 'terracotta orange'], [80, 'warm amber'], [110, 'golden yellow'], [135, 'olive green'],
+    [170, 'green'], [215, 'teal'], [255, 'blue'], [285, 'deep blue'], [315, 'violet'], [345, 'plum'], [360, 'rose'],
+];
+const NEUTRAL_CHROMA = 0.04;
+const RADIANS_TO_DEGREES = 180 / Math.PI;
+const FULL_TURN = 360;
+
+/** The word for a brand colour's hue (`#9A4F2B` → "terracotta orange"), or null for a grey, a near-black or a bad value. */
+export function brandHueWord(seed: string | null | undefined): string | null {
+    const rgb = seed ? parseHexColor(seed) : null;
+    if (!rgb) return null;
+    const { a, b } = rgbToOklab(rgb);
+    if (Math.hypot(a, b) < NEUTRAL_CHROMA) return null;
+    const hue = (Math.atan2(b, a) * RADIANS_TO_DEGREES + FULL_TURN) % FULL_TURN;
+    return HUE_WORDS.find(([upTo]) => hue < upTo)?.[1] ?? null;
+}
+
+/**
+ * The site's art direction: the business type's world (moved to its `dark` world when the look is dark), its five parts,
+ * the brand's hue in the grade, PICTURE_NEVER before the world's own negatives. An unknown world is documentary.
+ */
+export function artDirectionFor(world: string | null | undefined, design: Pick<DesignChoices, 'mode' | 'seed'>): ArtDirection {
+    const start = isPictureWorld(world) ? world : PictureWorld.Documentary;
+    const moved = design.mode === 'dark' ? PICTURE_WORLDS[start].dark : start;
+    const id = isPictureWorld(moved) ? moved : start;
+    const spec = PICTURE_WORLDS[id];
+    const hue = brandHueWord(design.seed);
+    return {
+        world: id,
+        medium: spec.medium,
+        light: spec.light,
+        grade: hue ? `${spec.grade}, leaning toward ${hue} so the pictures sit with the brand` : spec.grade,
+        texture: spec.texture,
+        negative: [...PICTURE_NEVER, ...spec.negative],
+    };
+}
+
+/** The ONE preamble a site's every picture prompt opens with — the same words, in the same order, every time. */
+export function artDirectionPreamble(direction: ArtDirection): string {
+    const medium = direction.medium.charAt(0).toUpperCase() + direction.medium.slice(1);
+    return `${medium}. Light: ${direction.light}. Colour: ${direction.grade}. Texture: ${direction.texture}. Never: ${direction.negative.join('; ')}.`;
+}
+
+/** What is wrong with a value as an art direction — a path and a message each (`validateSitePlan` reports them). */
+export function artDirectionIssues(value: unknown): Array<{ path: string; message: string }> {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) return [{ path: '', message: 'must be an object' }];
+    const v = value as Record<string, unknown>;
+    const issues: Array<{ path: string; message: string }> = [];
+    if (!isPictureWorld(v['world'])) issues.push({ path: 'world', message: `must be one of ${PICTURE_WORLD_IDS.join(', ')}` });
+    for (const part of ART_DIRECTION_PARTS.filter(p => p !== 'negative')) {
+        if (typeof v[part] !== 'string' || !(v[part] as string).trim()) issues.push({ path: part, message: 'must be words' });
+    }
+    const negative = v['negative'];
+    if (!Array.isArray(negative) || !negative.length || negative.some(n => typeof n !== 'string' || !n.trim())) {
+        issues.push({ path: 'negative', message: 'must list what no picture may show' });
+    }
+    return issues;
+}

package/src/generation-core/audit-site.ts

@@ -51,6 +51,10 @@ export enum SiteFindingCode {
     CopyPlaceholder = 'copy-placeholder',
     SampleItems = 'sample-items',
     StockPhoto = 'stock-photo',
+    /** M7: a picture made with AI for the site still stands where one of the studio's own could. */
+    MadePicture = 'made-picture',
+    /** M7: a picture the build could not make (its review said no twice) and nothing stood in for: an empty box. */
+    PictureMissing = 'picture-missing',
     NoPrivacyPage = 'no-privacy-page',
     PrivacyPagePlaceholder = 'privacy-page-placeholder',
     LowContrast = 'low-contrast',
@@ -76,6 +80,8 @@ export const FINDING_SEVERITY: Readonly<Record<SiteFindingCode, CheckSeverity>>
     [SiteFindingCode.CopyPlaceholder]: CheckSeverity.Ask,
     [SiteFindingCode.SampleItems]: CheckSeverity.Ask,
     [SiteFindingCode.StockPhoto]: CheckSeverity.Ask,
+    [SiteFindingCode.MadePicture]: CheckSeverity.Ask,
+    [SiteFindingCode.PictureMissing]: CheckSeverity.Warn,
     [SiteFindingCode.NoPrivacyPage]: CheckSeverity.Ask,
     [SiteFindingCode.PrivacyPagePlaceholder]: CheckSeverity.Block,
     [SiteFindingCode.LowContrast]: CheckSeverity.Warn,
@@ -100,6 +106,8 @@ const CHECK_OF: Readonly<Record<SiteFindingCode, SiteCheckId>> = {
     [SiteFindingCode.CopyPlaceholder]: SiteCheckId.Facts,
     [SiteFindingCode.SampleItems]: SiteCheckId.Facts,
     [SiteFindingCode.StockPhoto]: SiteCheckId.Facts,
+    [SiteFindingCode.MadePicture]: SiteCheckId.Facts,
+    [SiteFindingCode.PictureMissing]: SiteCheckId.Facts,
     [SiteFindingCode.NoPrivacyPage]: SiteCheckId.Facts,
     [SiteFindingCode.PrivacyPagePlaceholder]: SiteCheckId.Facts,
     [SiteFindingCode.LowContrast]: SiteCheckId.Accessibility,
@@ -164,6 +172,10 @@ export interface SiteAuditSnapshot {
     samples?: ReadonlyArray<{ contentType: string; id: string; label?: string }>;
     /** Stock photos a build placed that are still on the page. */
     stock?: ReadonlyArray<{ nodeId: string; pageId?: string; owner?: string }>;
+    /** M7: pictures made with AI that are still on the page. */
+    made?: ReadonlyArray<{ nodeId: string; pageId?: string; owner?: string }>;
+    /** M7: picture slots the build could not make a picture for, still empty. */
+    missing?: ReadonlyArray<{ nodeId: string; pageId?: string; owner?: string }>;
 }
 
 export interface SiteAuditOptions {
@@ -280,6 +292,8 @@ function checkFacts(ctx: Ctx, snapshot: SiteAuditSnapshot, pages: ReadonlyArray<
     }
     for (const s of snapshot.samples ?? []) add(ctx, SiteFindingCode.SampleItems, `"${s.label ?? s.id}" is a sample — replace or remove it.`, { nodeId: s.id });
     for (const s of (snapshot.stock ?? []).filter(inScope)) add(ctx, SiteFindingCode.StockPhoto, 'A stock photo stands in for one of yours.', { pageId: s.pageId, nodeId: s.nodeId, owner: s.owner });
+    for (const s of (snapshot.made ?? []).filter(inScope)) add(ctx, SiteFindingCode.MadePicture, 'A picture made with AI stands in for one of yours.', { pageId: s.pageId, nodeId: s.nodeId, owner: s.owner });
+    for (const s of (snapshot.missing ?? []).filter(inScope)) add(ctx, SiteFindingCode.PictureMissing, 'A picture could not be made for this spot — add one of yours.', { pageId: s.pageId, nodeId: s.nodeId, owner: s.owner });
     if (!personal) return;
     const privacy = snapshot.pages.find(p => PRIVACY_PAGE.test(p.route) || PRIVACY_PAGE.test(p.name));
     if (!privacy) return add(ctx, SiteFindingCode.NoPrivacyPage, 'A form asks for personal details, and the site has no privacy page saying what you do with them.');

package/src/generation-core/compose-site.ts

@@ -7,6 +7,7 @@ import {
     AccordionAutoBinds, CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, SLIDE_TO_ROW, SLIDE_TYPE, buildTabsRecipe, tabLabelNodeOf,
     tabPanelImageOf, tabPanelTextOf, tabsListOf, tabsPanels, tabsPanelsOf, tabsTriggers, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP,
     TABS_TEXT_BIND_PROP, TABS_WORDS, TabsAutoBinds, BadgeTone, BADGE_TONES, buildSegmentedRecipe, CardWords, ITEM_OPEN_STATE, segmentedOptions,
+    setHeaderBehaviour,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { EntranceMark, EntrancePart, planEntrances } from './entrances';
@@ -1210,6 +1211,12 @@ export function composeSite(plan: SitePlan, context: ComposeContext): ComposedSi
         const shape = patternById(plan.globals[slot])?.phoneMenu;
         if (shape) globals = planNavShape(globals, shape as NavShape, {}, slot).globals;
     }
+    // Premium M4 (T2): a header pattern's behaviour as the page scrolls — the same edit the Header section makes.
+    for (const slot of Object.values(GlobalSlot)) {
+        const header = patternById(plan.globals[slot])?.header;
+        const root = header ? globals.find(g => g.id === slot) : null;
+        if (header && root) setHeaderBehaviour(root as unknown as CompositeNode, header.behaviour, header.edge ?? null);
+    }
 
     return {
         source: clone(plan.source),
@@ -1302,6 +1309,7 @@ export function composeNavHeader(input: NavHeaderInput, options: NavHeaderOption
     root.globalPosition = pattern.global;
     const shape = pattern.phoneMenu as NavShape | undefined;
     const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    if (pattern.header) setHeaderBehaviour(header as unknown as CompositeNode, pattern.header.behaviour, pattern.header.edge ?? null);
     return { header, issues };
 }
 

package/src/generation-core/node-baselines.generated.ts

@@ -691,7 +691,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "defaultOn",
       "activateOn",
       "orientation",
-      "ariaLabel"
+      "ariaLabel",
+      "headerBehaviour",
+      "headerEdge"
     ],
     "styleTraits": [
       "position",
@@ -3114,6 +3116,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "slideToClickedSlide": false,
       "effect": "slide",
       "speed": 300,
+      "scrollPlays": false,
+      "controlsPlacement": "under",
+      "enableCaption": false,
+      "enableCount": false,
       "enableNavigation": false,
       "navigationColor": "#ffffff",
       "navigationSize": 44,
@@ -3221,7 +3227,11 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "__effectsLabel",
       "effect",
       "speed",
+      "scrollPlays",
       "__navLabel",
+      "controlsPlacement",
+      "enableCaption",
+      "enableCount",
       "enableNavigation",
       "navigationColor",
       "navigationSize",
@@ -3326,7 +3336,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     "container": true
   },
   "SliderSlide": {
-    "props": {},
+    "props": {
+      "caption": ""
+    },
     "styleProps": {
       "position": "static",
       "top": "auto",
@@ -3405,7 +3417,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "transitionDelay": "0ms",
       "transitionTimingFunction": "ease"
     },
-    "traits": [],
+    "traits": [
+      "caption"
+    ],
     "styleTraits": [
       "position",
       "top",

package/src/generation-core/patterns.ts

@@ -153,6 +153,8 @@ export interface SitePattern {
     readonly global?: `${PatternGlobalPosition}`;
     /** A navigation pattern's phone shape (CC1): `planNavShape` adds it after the pattern is stamped. */
     readonly phoneMenu?: 'drawer' | 'bar' | 'both';
+    /** A navigation pattern's behaviour as the page scrolls (premium M4, T2): design-core HeaderBehaviour / HeaderEdge. */
+    readonly header?: { readonly behaviour: 'scrolls' | 'stays' | 'hides'; readonly edge?: 'fade' | 'line' | 'none' };
     /** SC6: a Scene section — held while the page scrolls, moved by the scroll. Only at How animated Expressive, at
      *  most one per page and on at most two pages (`validateSitePlan`); it never takes the look's entrances. */
     readonly scene?: boolean;