@vectoriox/iox-ui 5.77.0 → 5.78.0

package/harness-core/index.d.ts

@@ -155,6 +155,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "cinematic";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Your own photos only, large and uncropped; never stock.";
     readonly pages: readonly ["home", "work (collection)", "project (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -217,6 +218,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "cinematic";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Wide, bright room shots; details of materials.";
     readonly pages: readonly ["home", "projects (collection)", "project (detail)", "services", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "services", "about", "contact"];
@@ -280,6 +282,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Large project photos and drawings.";
     readonly pages: readonly ["home", "projects (collection)", "project (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -341,9 +344,10 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
     readonly motion: "standard";
     readonly moves: {
         readonly scroll: "smooth";
-        readonly animate: "lively";
+        readonly animate: "expressive";
         readonly between: "slide";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Case-study images of your own work.";
     readonly pages: readonly ["home", "work (collection)", "case study (detail)", "services", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "services", "about", "contact"];
@@ -398,6 +402,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Your pieces, photographed flat and true to colour.";
     readonly pages: readonly ["home", "works (collection)", "work (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "about", "contact"];
@@ -451,9 +456,10 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
     readonly motion: "calm";
     readonly moves: {
         readonly scroll: "normal";
-        readonly animate: "lively";
+        readonly animate: "expressive";
         readonly between: "slide";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Your pieces and hands at work; natural light.";
     readonly pages: readonly ["home", "pieces (collection)", "piece (detail)", "workshops", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -509,6 +515,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "cinematic";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Close-ups on a plain ground.";
     readonly pages: readonly ["home", "collection", "piece (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -565,6 +572,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "slide";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Healed work, clean photos.";
     readonly pages: readonly ["home", "work (collection)", "artists", "faq", "contact"];
     readonly needs: readonly ["collection", "faq", "contact"];
@@ -620,6 +628,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "standard";
     readonly imagery: "Rooms, textures, hands; no faces needed.";
     readonly pages: readonly ["home", "treatments (services)", "prices", "about", "contact"];
     readonly needs: readonly ["services", "prices", "about", "contact"];
@@ -685,6 +694,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "lively";
     readonly imagery: "Your own before-and-after photos.";
     readonly pages: readonly ["home", "services", "prices", "gallery", "contact"];
     readonly needs: readonly ["services", "prices", "gallery", "contact"];
@@ -744,6 +754,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "lively";
     readonly imagery: "The room, real classes, daylight.";
     readonly pages: readonly ["home", "classes", "schedule", "teachers", "prices", "contact"];
     readonly needs: readonly ["prices", "contact"];
@@ -804,6 +815,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "lively";
         readonly between: "slide";
     };
+    readonly ceiling: "lively";
     readonly imagery: "Real people training; movement.";
     readonly pages: readonly ["home", "classes", "prices", "coaches", "contact"];
     readonly needs: readonly ["prices", "contact"];
@@ -860,6 +872,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "none";
     };
+    readonly ceiling: "subtle";
     readonly imagery: "A calm room, daylight; your portrait.";
     readonly pages: readonly ["home", "how I work", "about", "faq", "contact"];
     readonly needs: readonly ["collection", "about", "faq", "contact"];
@@ -920,6 +933,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "subtle";
     readonly imagery: "Your team and rooms; no stock doctors.";
     readonly pages: readonly ["home", "treatments (services)", "team", "faq", "contact"];
     readonly needs: readonly ["services", "team", "faq", "contact"];
@@ -981,6 +995,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "subtle";
     readonly imagery: "Your clinic and team.";
     readonly pages: readonly ["home", "treatments", "team", "faq", "contact"];
     readonly needs: readonly ["services", "team", "faq", "contact"];
@@ -1040,6 +1055,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "standard";
     readonly imagery: "Real animals you treat (with permission).";
     readonly pages: readonly ["home", "services", "team", "faq", "contact"];
     readonly needs: readonly ["services", "team", "faq", "contact"];
@@ -1095,6 +1111,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Your own food and room photos.";
     readonly pages: readonly ["home", "menu", "about", "contact"];
     readonly needs: readonly ["menu", "about", "contact"];
@@ -1157,6 +1174,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "slide";
     };
+    readonly ceiling: "lively";
     readonly imagery: "Your bakes and drinks, close up.";
     readonly pages: readonly ["home", "menu", "about", "contact"];
     readonly needs: readonly ["menu", "about", "contact"];
@@ -1216,6 +1234,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "cinematic";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "The cellar, the bar, the bottle.";
     readonly pages: readonly ["home", "menu or wines", "our story", "visit", "contact"];
     readonly needs: readonly ["menu", "visit", "contact"];
@@ -1275,6 +1294,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "slide";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Product photos on plain grounds; real people wearing them.";
     readonly pages: readonly ["home", "collection", "product (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -1329,6 +1349,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "lively";
     readonly imagery: "Your own arrangements in daylight.";
     readonly pages: readonly ["home", "flowers (collection)", "weddings and events", "about", "contact"];
     readonly needs: readonly ["collection", "about", "contact"];
@@ -1384,6 +1405,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Pieces in real rooms and on plain grounds.";
     readonly pages: readonly ["home", "collection", "product (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -1439,6 +1461,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "fade";
     };
+    readonly ceiling: "standard";
     readonly imagery: "Your portrait; diagrams over stock.";
     readonly pages: readonly ["home", "services", "case studies", "about", "contact"];
     readonly needs: readonly ["services", "about", "contact"];
@@ -1496,6 +1519,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "standard";
     readonly imagery: "Your portrait, working with people.";
     readonly pages: readonly ["home", "how it works", "programmes", "about", "contact"];
     readonly needs: readonly ["collection", "about", "contact"];
@@ -1547,6 +1571,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "still";
         readonly between: "none";
     };
+    readonly ceiling: "subtle";
     readonly imagery: "Your team; your office.";
     readonly pages: readonly ["home", "practice areas (services)", "team", "about", "contact"];
     readonly needs: readonly ["services", "team", "about", "contact"];
@@ -1609,6 +1634,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "slide";
     };
+    readonly ceiling: "lively";
     readonly imagery: "Your own property photos; never stock.";
     readonly pages: readonly ["home", "properties (collection)", "property (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -1667,6 +1693,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "fade";
     };
+    readonly ceiling: "standard";
     readonly imagery: "Real people you help (with permission).";
     readonly pages: readonly ["home", "what we do", "stories", "get involved", "contact"];
     readonly needs: readonly ["contact"];
@@ -1718,6 +1745,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "standard";
         readonly between: "cinematic";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Real events at your venue.";
     readonly pages: readonly ["home", "spaces", "gallery", "faq", "contact"];
     readonly needs: readonly ["gallery", "faq", "contact"];
@@ -1776,6 +1804,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "subtle";
         readonly between: "cinematic";
     };
+    readonly ceiling: "expressive";
     readonly imagery: "Rooms, views, breakfast; your own photos.";
     readonly pages: readonly ["home", "rooms (collection)", "room (detail)", "about", "contact"];
     readonly needs: readonly ["collection", "detail", "about", "contact"];
@@ -1834,6 +1863,7 @@ declare const SPEC_BUSINESS_TYPES: readonly [{
         readonly animate: "lively";
         readonly between: "slide";
     };
+    readonly ceiling: "lively";
     readonly imagery: "Real classes (with permission).";
     readonly pages: readonly ["home", "classes", "prices", "about", "contact"];
     readonly needs: readonly ["prices", "about", "contact"];
@@ -2238,6 +2268,9 @@ interface BusinessType {
     readonly motion: MotionId;
     /** How its site usually scrolls, how animated it is and what plays between pages (rev 3.1). */
     readonly moves: Readonly<DesignMotion>;
+    /** SC6: the most How animated a GENERATED site of this type may start at (`motionFor`). A Scene needs Expressive,
+     *  so a type capped below it never gets one. Binds generated output only — the owner may choose any level. */
+    readonly ceiling: DesignMotion['animate'];
     readonly imagery: string;
     readonly pages: ReadonlyArray<string>;
     /** The needs its page set implies, in page order (derived from `pages` at contract build). */
@@ -2436,6 +2469,8 @@ interface MotionBasis {
     references: boolean;
     /** The owner asked for little movement: all three were capped. */
     littleMovement: boolean;
+    /** SC6: How animated was held at the type's ceiling (a law firm stays calm whatever the style or references). */
+    ceiling: boolean;
 }
 interface MotionStart extends DesignMotion {
     /** Why, in English — one line per step the start took. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.77.0",
+  "version": "5.78.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/design-core/flavor-spec.generated.ts

@@ -1533,6 +1533,36 @@ export const SPEC_AXES = {
           "duration": 600
         }
       }
+    },
+    "expressive": {
+      "label": "Expressive",
+      "he": "נועזת",
+      "hint": "Headings rise line by line and pictures open as they arrive; one section may hold the page and move as you scroll.",
+      "parts": {
+        "heroText": {
+          "type": "fadeIn",
+          "duration": 500
+        },
+        "heading": {
+          "type": "revealText",
+          "duration": 700
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 32,
+          "duration": 700,
+          "stagger": 110,
+          "cap": 8
+        },
+        "media": {
+          "type": "clipReveal",
+          "duration": 800
+        },
+        "rowMedia": {
+          "type": "clipReveal",
+          "duration": 800
+        }
+      }
     }
   },
   "animationFamilies": {
@@ -1937,7 +1967,7 @@ export const SPEC_STYLE_PRESETS = [
     "pillButtons": false,
     "moves": {
       "scroll": "smooth",
-      "animate": "lively",
+      "animate": "expressive",
       "between": "slide"
     },
     "modes": [
@@ -2034,7 +2064,7 @@ export const SPEC_STYLE_PRESETS = [
     "pillButtons": false,
     "moves": {
       "scroll": "normal",
-      "animate": "standard",
+      "animate": "expressive",
       "between": "fade"
     },
     "modes": [
@@ -2320,7 +2350,7 @@ export const SPEC_STYLE_PRESETS = [
     "pillButtons": false,
     "moves": {
       "scroll": "normal",
-      "animate": "lively",
+      "animate": "expressive",
       "between": "slide"
     },
     "modes": [
@@ -2385,7 +2415,7 @@ export const SPEC_STYLE_PRESETS = [
     "pillButtons": false,
     "moves": {
       "scroll": "normal",
-      "animate": "standard",
+      "animate": "expressive",
       "between": "slide"
     },
     "modes": [

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

@@ -12,7 +12,7 @@ import {
 import { EntranceMark, EntrancePart, planEntrances } from './entrances';
 import { NODE_BASELINES } from './node-baselines.generated';
 import {
-    BindScope, CardBindTarget, parsePatternPath, PatternDirective, PatternNode, PatternOpens, PatternPlaceholder, PatternRecipe, SitePattern, patternById,
+    BindScope, CardBindTarget, parsePatternPath, PatternDirective, PatternNode, PatternOpens, PatternPlaceholder, PatternRecipe, PatternTrack, SitePattern, patternById,
 } from './patterns';
 import { recipeListBinds } from './recipe-fields';
 import { assertStyleSlots, ComposeError, createSerializedNode, SerializedBinding, SerializedNode, setStyleProps, walkSerialized } from './serialized-node';
@@ -575,6 +575,8 @@ function composeNode(given: PatternNode, id: string, repeater: RepeaterScope | n
     // Props first: a Heading with no `es` wears its LEVEL's default style.
     const node = create(id, type, props, pn.es ?? null);
     if (pn.role) node.role = pn.role;
+    if (pn.tracks?.length) node.sceneTracks = pn.tracks.map(cloneTrack);
+    if (pn.phoneTracks?.length) node.scenePhoneTracks = pn.phoneTracks.map(cloneTrack);
     markEntrance(pn, id, repeater, ctx);
 
     // Words.
@@ -990,6 +992,13 @@ function wireOpeners(root: SerializedNode, openers: ReadonlyArray<string>): void
 }
 
 /** How a composed section moves in (M1-6b): the look's How animated (or the section's own) on the page's direction. */
+/** SC6: a track's own copy, so a composed page never shares an array with the contract. */
+const cloneTrack = (track: PatternTrack): Record<string, unknown> => ({
+    prop: track.prop,
+    keys: track.keys.map(([at, value]) => [at, value]),
+    ...(track.from ? { from: track.from } : {}),
+});
+
 interface SectionMotion {
     level: AnimateId | string | null;
     rtl: boolean;
@@ -1002,7 +1011,8 @@ function composePattern(pattern: SitePattern, id: string, ctx: Ctx, motion: Sect
     if (!node) throw new ComposeError(`${id}: a pattern's root cannot be optional or a link`);
     wireOpeners(node, own.openers ?? []);
     wireShownWhen(node, own.shownWhen ?? []);
-    if (motion && !pattern.global) stampEntrances(node, pattern.family, own.entrances ?? [], motion);
+    // A Scene moves by the scroll alone: the look's entrances would fade its pinned stage in on arrival (SC6).
+    if (motion && !pattern.global && !pattern.scene) stampEntrances(node, pattern.family, own.entrances ?? [], motion);
     node.label = pattern.label;
     return node;
 }

package/src/generation-core/patterns.ts

@@ -90,6 +90,19 @@ export interface PatternNode {
     readonly side?: `${EntranceSide}`;
     /** L0-3: a link to the page that shows this scope's item (the plan's template page of its type). */
     readonly detail?: `${BindScope.Item}` | `${BindScope.Next}`;
+    /** SC6: a Scene layer's scene-core tracks, written to the node's `sceneTracks` (and `scenePhoneTracks`). */
+    readonly tracks?: ReadonlyArray<PatternTrack>;
+    readonly phoneTracks?: ReadonlyArray<PatternTrack>;
+}
+
+/**
+ * SC6: one scene-core track as the contract writes it — `{ prop, keys: [[progress, value]], from? }`. Typed here, not
+ * imported: generation-core stamps it verbatim and scene-core reads (and normalizes) it where it plays.
+ */
+export interface PatternTrack {
+    readonly prop: string;
+    readonly keys: ReadonlyArray<readonly [number, number | string]>;
+    readonly from?: string;
 }
 
 
@@ -138,6 +151,9 @@ 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';
+    /** 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;
     readonly node: PatternNode;
 }
 
@@ -295,7 +311,12 @@ export function patternHasForm(pattern: SitePattern): boolean {
     return patternNodes(pattern).some(n => !!n.preset);
 }
 
-/** The library's 31 sections (contract `site.library`), each with whether it is composed. */
+/** SC6: the level a Scene needs — the site's How animated, never a section's own `enter` (a Scene takes no entrance). */
+export const SCENE_LEVEL = 'expressive';
+/** SC6: Scenes on the home page and at most this many other pages, one per page (`validateSitePlan`). */
+export const SCENE_OTHER_PAGES = 1;
+
+/** The library's sections (contract `site.library`), each with whether it is composed. */
 export const SITE_LIBRARY: ReadonlyArray<{ readonly id: string; readonly family: string; readonly composed: boolean }> = SPEC_SITE_LIBRARY;
 
 /** One pattern as the model reads it (L0-2): what it is for, what it may write and how long, and what it binds. */
@@ -316,11 +337,22 @@ export interface PatternManifestEntry {
     roles: string[];
     optionalParts: string[];
     form: boolean;
+    /** SC6: it holds the page as it scrolls — one per page, the home page and at most one other. */
+    scene?: boolean;
 }
 
-/** The composed library as the model reads it — every pattern, its budgets under `density` (M1-3's manifest). */
-export function patternManifest(density?: string | null): PatternManifestEntry[] {
-    return Object.entries(SITE_PATTERNS).map(([id, p]) => ({
+export interface PatternManifestOptions {
+    /** The site's How animated: below `SCENE_LEVEL` the Scenes are left out — a model cannot choose what it never sees. */
+    animate?: string | null;
+}
+
+/**
+ * The composed library as the model reads it — every pattern, its budgets under `density` (M1-3's manifest). Given the
+ * site's How animated (SC6), the Scenes are listed only at `SCENE_LEVEL`, marked `scene`; without it, all of them.
+ */
+export function patternManifest(density?: string | null, options: PatternManifestOptions = {}): PatternManifestEntry[] {
+    const scenes = !('animate' in options) || options.animate === SCENE_LEVEL;
+    return Object.entries(SITE_PATTERNS).filter(([, p]) => scenes || !p.scene).map(([id, p]) => ({
         id, family: p.family, label: p.label, intent: p.intent, ...(p.global ? { global: p.global } : {}),
         slots: Object.fromEntries(Object.keys(patternSlotBudgets(p)).map(slot => [slot, slotBudget(p, slot, density) as number])),
         links: patternLinkSlots(p),
@@ -328,6 +360,7 @@ export function patternManifest(density?: string | null): PatternManifestEntry[]
         roles: [...new Set(patternRoleNeeds(p).map(r => `${r.scope}.@${r.role}${r.optional ? OPTIONAL_MARK : ''}`))],
         optionalParts: patternOptionalParts(p),
         form: patternHasForm(p),
+        ...(p.scene ? { scene: true } : {}),
     }));
 }
 

package/src/generation-core/serialized-node.ts

@@ -34,6 +34,9 @@ export interface SerializedNode {
     itemKey?: string;
     /** A targeted state's driving node (CC2: an icon's `trigger-on` → its item). */
     stateTriggers?: Partial<Record<string, string>>;
+    /** SC6: a Scene layer's tracks (scene-core `SceneTrack`), and its phone's own. Additive. */
+    sceneTracks?: unknown[];
+    scenePhoneTracks?: unknown[];
     bindings: SerializedBinding[];
     interactions: unknown[];
     isGlobal?: boolean;

package/src/generation-core/showcase.ts

@@ -1,6 +1,6 @@
 import type { DesignChoices } from '@vectoriox/iox-ui/design-core';
 
-import { BindScope, patternNeedsBinding, PatternGlobalPosition, patternScopes, SITE_PATTERNS } from './patterns';
+import { BindScope, patternNeedsBinding, PatternGlobalPosition, patternScopes, SCENE_LEVEL, SITE_PATTERNS } from './patterns';
 import { GlobalSlot, PagePlan, PageSectionPlan, SiteBusiness, SiteLocale, SitePlan, SitePlanSourceKind, SITE_PLAN_VERSION } from './site-plan.model';
 import { STUDIO_TEMPLATE } from './templates';
 
@@ -39,7 +39,7 @@ export function showcasePages(): PagePlan[] {
     const byFamily = new Map<string, string[]>();
     const onItemPage: string[] = [];
     for (const [id, p] of Object.entries(SITE_PATTERNS)) {
-        if (p.global) continue;
+        if (p.global || p.scene) continue;
         if (readsRouteItem(id)) { onItemPage.push(id); continue; }
         byFamily.set(p.family, [...(byFamily.get(p.family) ?? []), id]);
     }
@@ -62,20 +62,31 @@ export function showcaseGlobals(): { headers: string[]; footers: string[] } {
     return { headers: of(PatternGlobalPosition.Before), footers: of(PatternGlobalPosition.After) };
 }
 
-/** The showcase as Site Plans — as many as it takes for every header and every footer to be composed once. */
+/** SC6: the Scene patterns — each shown alone on the home page of its own plan, as a site may hold one (validateScenes). */
+export function showcaseScenes(): string[] {
+    return Object.entries(SITE_PATTERNS).filter(([, p]) => p.scene && !p.global).map(([id]) => id);
+}
+
+/**
+ * The showcase as Site Plans — as many as it takes for every header and every footer to be composed once, then one per
+ * Scene pattern (SC6): its home page holds that Scene and nothing else, at How animated Expressive, the only level a
+ * Scene is composed at.
+ */
 export function showcasePlans(input: ShowcaseInput): SitePlan[] {
     const { headers, footers } = showcaseGlobals();
     const count = Math.max(headers.length, footers.length, 1);
     const pages = showcasePages();
-    return Array.from({ length: count }, (_, i): SitePlan => ({
+    const plan = (i: number, planPages: PagePlan[], design: DesignChoices): SitePlan => ({
         version: SITE_PLAN_VERSION,
         source: { kind: SitePlanSourceKind.Template, templateId: 'showcase', templateVersion: 1 },
         business: JSON.parse(JSON.stringify(input.business)),
         ...(input.locale ? { locale: input.locale } : {}),
-        design: JSON.parse(JSON.stringify(input.design)),
+        design: JSON.parse(JSON.stringify(design)),
         contentTypes: JSON.parse(JSON.stringify(STUDIO_TEMPLATE.contentTypes)),
         dataSources: JSON.parse(JSON.stringify(STUDIO_TEMPLATE.dataSources)),
-        pages: JSON.parse(JSON.stringify(pages)),
+        pages: JSON.parse(JSON.stringify(planPages)),
         globals: { [GlobalSlot.Header]: headers[i % headers.length], [GlobalSlot.Footer]: footers[i % footers.length] } as SitePlan['globals'],
-    }));
+    });
+    const scenes = showcaseScenes().map((id, i) => plan(i, [{ key: 'home', name: 'Home', route: '/', isHome: true, inNav: false, sections: [sectionFor(id)] }], { ...input.design, animate: SCENE_LEVEL }));
+    return [...Array.from({ length: count }, (_, i) => plan(i, pages, input.design)), ...scenes];
 }