@vectoriox/iox-ui 5.76.1 → 5.78.0

package/src/generation-core/site-spec.generated.ts

@@ -417,6 +417,568 @@ export const SPEC_SITE_ARCHETYPES = {
 } as const;
 
 export const SPEC_SITE_PATTERNS = {
+  "hero.scene-depth": {
+    "family": "hero",
+    "scene": true,
+    "label": "Hero — a picture that opens as you scroll",
+    "intent": "One strong picture of the work that opens and settles while the page holds still — a first screen that moves, for a studio with a picture worth it.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "300vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "block",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "0px"
+          },
+          "c": [
+            {
+              "t": "Image",
+              "es": "media",
+              "ph": "image",
+              "lay": {
+                "position": "absolute",
+                "top": "0px",
+                "left": "0px",
+                "width": "100%",
+                "height": "100%",
+                "aspectRatio": "auto",
+                "borderRadius": "0px",
+                "objectFit": "cover"
+              },
+              "tracks": [
+                {
+                  "prop": "scale",
+                  "keys": [
+                    [
+                      0,
+                      1.3
+                    ],
+                    [
+                      1,
+                      1
+                    ]
+                  ]
+                },
+                {
+                  "prop": "clip",
+                  "from": "bottom",
+                  "keys": [
+                    [
+                      0,
+                      38
+                    ],
+                    [
+                      0.42,
+                      100
+                    ]
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "media-scrim",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "14px",
+                "position": "absolute",
+                "left": "0px",
+                "bottom": "0px",
+                "width": "100%",
+                "padding": "48px 32px 56px 32px"
+              },
+              "c": [
+                {
+                  "t": "Heading",
+                  "es": "display",
+                  "level": "h1",
+                  "slot": "headline",
+                  "max": 56,
+                  "fromBusiness": "name",
+                  "tracks": [
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0,
+                          0
+                        ],
+                        [
+                          1,
+                          -6
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Text",
+                  "es": "lead",
+                  "slot": "lead",
+                  "max": 180,
+                  "fromBusiness": "tagline",
+                  "ph": "copy",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.45,
+                          0
+                        ],
+                        [
+                          0.6,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "ButtonBlock",
+                  "es": "button-primary",
+                  "href": "/contact",
+                  "slot": "cta",
+                  "max": 24,
+                  "text": "Get in touch",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.5,
+                          0
+                        ],
+                        [
+                          0.65,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "story.scene-chapters": {
+    "family": "story",
+    "scene": true,
+    "label": "Story — three chapters on one held stage",
+    "intent": "How you work in three short chapters that take turns over one picture while the page holds still — a process worth slowing down for.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "scheme": "inverse",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "400vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "block",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "0px"
+          },
+          "c": [
+            {
+              "t": "Image",
+              "es": "media",
+              "ph": "image",
+              "lay": {
+                "position": "absolute",
+                "top": "0px",
+                "left": "0px",
+                "width": "100%",
+                "height": "100%",
+                "aspectRatio": "auto",
+                "borderRadius": "0px",
+                "objectFit": "cover"
+              },
+              "tracks": [
+                {
+                  "prop": "scale",
+                  "keys": [
+                    [
+                      0,
+                      1.12
+                    ],
+                    [
+                      1,
+                      1
+                    ]
+                  ]
+                }
+              ]
+            },
+            {
+              "t": "Container",
+              "es": "media-scrim",
+              "lay": {
+                "position": "absolute",
+                "left": "0px",
+                "bottom": "0px",
+                "width": "100%",
+                "height": "62%",
+                "padding": "0px"
+              },
+              "c": [
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "12px",
+                    "position": "absolute",
+                    "left": "32px",
+                    "right": "32px",
+                    "bottom": "56px",
+                    "maxWidth": "640px"
+                  },
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0,
+                          1
+                        ],
+                        [
+                          0.26,
+                          1
+                        ],
+                        [
+                          0.33,
+                          0
+                        ]
+                      ]
+                    },
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0.26,
+                          0
+                        ],
+                        [
+                          0.33,
+                          -6
+                        ]
+                      ]
+                    }
+                  ],
+                  "c": [
+                    {
+                      "t": "Text",
+                      "es": "eyebrow",
+                      "slot": "eyebrow",
+                      "max": 32,
+                      "ph": "copy",
+                      "text": "How we work"
+                    },
+                    {
+                      "t": "Heading",
+                      "es": "h2",
+                      "level": "h2",
+                      "slot": "title",
+                      "max": 52,
+                      "ph": "copy",
+                      "text": "It starts with a conversation"
+                    },
+                    {
+                      "t": "Text",
+                      "es": "lead",
+                      "slot": "text",
+                      "max": 180,
+                      "ph": "copy",
+                      "text": "What the first step is, in a sentence or two."
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "12px",
+                    "position": "absolute",
+                    "left": "32px",
+                    "right": "32px",
+                    "bottom": "56px",
+                    "maxWidth": "640px"
+                  },
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.33,
+                          0
+                        ],
+                        [
+                          0.4,
+                          1
+                        ],
+                        [
+                          0.6,
+                          1
+                        ],
+                        [
+                          0.67,
+                          0
+                        ]
+                      ]
+                    },
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0.33,
+                          6
+                        ],
+                        [
+                          0.4,
+                          0
+                        ],
+                        [
+                          0.6,
+                          0
+                        ],
+                        [
+                          0.67,
+                          -6
+                        ]
+                      ]
+                    }
+                  ],
+                  "c": [
+                    {
+                      "t": "Heading",
+                      "es": "h2",
+                      "level": "h2",
+                      "slot": "title2",
+                      "max": 52,
+                      "ph": "copy",
+                      "text": "Then we make it"
+                    },
+                    {
+                      "t": "Text",
+                      "es": "lead",
+                      "slot": "text2",
+                      "max": 180,
+                      "ph": "copy",
+                      "text": "What the middle of the work is, in a sentence or two."
+                    }
+                  ]
+                },
+                {
+                  "t": "Container",
+                  "es": "box",
+                  "lay": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "12px",
+                    "position": "absolute",
+                    "left": "32px",
+                    "right": "32px",
+                    "bottom": "56px",
+                    "maxWidth": "640px"
+                  },
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.67,
+                          0
+                        ],
+                        [
+                          0.74,
+                          1
+                        ],
+                        [
+                          1,
+                          1
+                        ]
+                      ]
+                    },
+                    {
+                      "prop": "y",
+                      "keys": [
+                        [
+                          0.67,
+                          6
+                        ],
+                        [
+                          0.74,
+                          0
+                        ]
+                      ]
+                    }
+                  ],
+                  "c": [
+                    {
+                      "t": "Heading",
+                      "es": "h2",
+                      "level": "h2",
+                      "slot": "title3",
+                      "max": 52,
+                      "ph": "copy",
+                      "text": "And it is yours"
+                    },
+                    {
+                      "t": "Text",
+                      "es": "lead",
+                      "slot": "text3",
+                      "max": 180,
+                      "ph": "copy",
+                      "text": "What the client leaves with, in a sentence or two."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "proof.scene-words": {
+    "family": "proof",
+    "scene": true,
+    "label": "A testimonial that lights word by word",
+    "intent": "One client's words, lit one word at a time while the page holds still — only once the studio has a real quote worth slowing down for.",
+    "node": {
+      "t": "Section",
+      "es": "section",
+      "role": "scene",
+      "lay": {
+        "position": "relative",
+        "display": "block",
+        "width": "100%",
+        "height": "250vh",
+        "padding": "0px"
+      },
+      "c": [
+        {
+          "t": "Container",
+          "role": "scene.stage",
+          "lay": {
+            "position": "sticky",
+            "top": "0px",
+            "display": "flex",
+            "width": "100%",
+            "height": "100svh",
+            "overflow": "hidden",
+            "padding": "32px 32px 32px 32px",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "c": [
+            {
+              "t": "Container",
+              "es": "box",
+              "lay": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "20px",
+                "maxWidth": "900px",
+                "width": "100%",
+                "margin": "0px auto 0px auto"
+              },
+              "c": [
+                {
+                  "t": "Text",
+                  "es": "eyebrow",
+                  "slot": "eyebrow",
+                  "max": 32,
+                  "ph": "copy",
+                  "text": "What clients say"
+                },
+                {
+                  "t": "Heading",
+                  "es": "h2",
+                  "level": "h2",
+                  "ph": "copy",
+                  "text": "A sentence a client actually said, in their own words.",
+                  "tracks": [
+                    {
+                      "prop": "words",
+                      "keys": [
+                        [
+                          0.08,
+                          0
+                        ],
+                        [
+                          0.7,
+                          100
+                        ]
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "t": "Text",
+                  "es": "small",
+                  "ph": "copy",
+                  "text": "[Client name] · [Project, city]",
+                  "tracks": [
+                    {
+                      "prop": "opacity",
+                      "keys": [
+                        [
+                          0.7,
+                          0
+                        ],
+                        [
+                          0.82,
+                          1
+                        ]
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
   "nav.inline-cta": {
     "family": "nav",
     "label": "Navigation bar",
@@ -4924,6 +5486,11 @@ export const SPEC_SITE_LIBRARY = [
     "family": "hero",
     "composed": true
   },
+  {
+    "id": "hero.scene-depth",
+    "family": "hero",
+    "composed": true
+  },
   {
     "id": "proof.logo-strip",
     "family": "proof",
@@ -4944,6 +5511,11 @@ export const SPEC_SITE_LIBRARY = [
     "family": "proof",
     "composed": true
   },
+  {
+    "id": "proof.scene-words",
+    "family": "proof",
+    "composed": true
+  },
   {
     "id": "feature.triad",
     "family": "feature",
@@ -4999,6 +5571,11 @@ export const SPEC_SITE_LIBRARY = [
     "family": "story",
     "composed": true
   },
+  {
+    "id": "story.scene-chapters",
+    "family": "story",
+    "composed": true
+  },
   {
     "id": "cta.banner",
     "family": "cta",

package/src/generation-core/validate-site-plan.ts

@@ -4,8 +4,7 @@ import { SEO_DESCRIPTION_MAX, SEO_TITLE_MAX } from '@vectoriox/iox-ui/seo-core';
 
 import {
     BindScope, patternById, patternHasForm, patternLinkSlots, patternNeedsBinding, patternOptionalParts, patternRoleNeeds, patternTakesBinding, patternScopes,
-    patternSlots, PatternGlobalPosition, slotBudget,
-} from './patterns';
+    patternSlots, PatternGlobalPosition, slotBudget, SCENE_LEVEL, SCENE_OTHER_PAGES } from './patterns';
 import { ContentFieldControl, FIELD_TYPE_OF_CONTROL,
     FACT_KEYS, GlobalSlot, PAGE_ARCHETYPES, SITE_NEED_IDS, PlanDataSourceMode, PlanDataSourceType, RelativeOp, REQUIRED_CONTENT_ROLES, SitePlan, SitePlanSourceKind,
     SITE_LOCALES, SITE_PLAN_VERSION,
@@ -70,6 +69,9 @@ export enum SitePlanIssueCode {
     UnknownNeed = 'unknown-need',
     /** A page key that is a global slot's name (`header`, `footer`): its sections' ids would be the global's. */
     ReservedPageKey = 'reserved-page-key',
+    /** SC6: a Scene below How animated Expressive, a second Scene on a page, or Scenes on more than the home page and
+     *  one other — the pages answer by choosing another pattern. */
+    SceneBudget = 'scene-budget',
 }
 
 export type SitePlanIssue = PathIssue<SitePlanIssueCode>;
@@ -455,6 +457,25 @@ function validatePages(c: Collector, list: unknown[], types: Map<string, Content
 }
 
 
+/** SC6 (premium-sites plan, APPROVED 2026-11-05): who may hold the page — Scenes only at Expressive, one per page, on the
+ *  home page and at most one other. A Scene past that is an issue at its pattern, so the pages choose another. */
+function validateScenes(c: Collector, pages: unknown[], animate: string | null): void {
+    let otherPages = 0;
+    pages.forEach((raw, i) => {
+        if (!isObject(raw) || !Array.isArray(raw['sections'])) return;
+        let onPage = 0;
+        const counted = raw['isHome'] === true;
+        raw['sections'].forEach((s, j) => {
+            const pattern = isObject(s) && typeof s['pattern'] === 'string' ? patternById(s['pattern']) : null;
+            if (!pattern?.scene) return;
+            const at = `pages[${i}].sections[${j}].pattern`;
+            if (animate !== SCENE_LEVEL) return c.add(SitePlanIssueCode.SceneBudget, at, `"${s['pattern']}" holds the page as it scrolls — only on a site whose How animated is Expressive (this one is ${animate ?? 'unset'})`);
+            if (++onPage > 1) return c.add(SitePlanIssueCode.SceneBudget, at, 'one Scene per page — choose a section that does not hold the page');
+            if (!counted && onPage === 1 && ++otherPages > SCENE_OTHER_PAGES) c.add(SitePlanIssueCode.SceneBudget, at, `Scenes on the home page and at most ${SCENE_OTHER_PAGES} other page — choose a section that does not hold the page`);
+        });
+    });
+}
+
 function validatePageSeo(c: Collector, seo: unknown, path: string): void {
     if (seo === undefined) return;
     if (!isObject(seo)) return c.add(SitePlanIssueCode.Shape, path, 'must be an object');
@@ -501,6 +522,7 @@ export function validateSitePlan(plan: unknown): SitePlanValidation {
     const design = isObject(plan['design']) ? plan['design'] : {};
     validatePages(c, c.array(plan, 'pages', ''), types, sources, typeof design['density'] === 'string' ? design['density'] : null);
     validateGlobals(c, plan['globals']);
+    validateScenes(c, c.array(plan, 'pages', ''), typeof design['animate'] === 'string' ? design['animate'] : null);
     return { valid: c.issues.length === 0, issues: c.issues };
 }
 

package/src/harness-core/business-types.ts

@@ -111,6 +111,9 @@ export 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). */