@vectoriox/iox-ui 5.42.0 → 5.44.0

package/src/design-core/design-apply.ts

@@ -1,13 +1,14 @@
 import { deriveBrandTokens } from './brand';
-import { SPEC_LEGACY_ALIASES } from './flavor-spec.generated';
+import { FLAVOR_SPEC_VERSION, SPEC_LEGACY_ALIASES } from './flavor-spec.generated';
 import { SWISS_FLAVOR } from './flavor';
 import { buildFlavorTokens, legacyFlavorTokens } from './flavor-tokens';
 import {
-    FlavorRevertPlan, FlavorSeedOptions, FlavorSeedPlan, planFlavorRevert, planFlavorSeed, SeedBaseline, SeedExpectation, untouchedSeedRow,
+    FlavorRevertPlan, FlavorRevertSnapshot, FlavorSeedOptions, FlavorSeedPlan, flavorSeedWrites, planFlavorRevert, planFlavorSeed, SeedBaseline,
+    SeedExpectation, untouchedSeedRow,
 } from './flavor-seed';
 import { DesignChoices, DesignTokenRow, flavorSourceStamp, StoredDesignTokenRow } from './design-token.model';
 import { fontFamilyKey, FontFamilyToken, fontRoleReferences, parseFontFamilies } from './fonts';
-import { flavorPackById, isRetiredFlavorId, packDesignChoices, StoredDesign } from './design-settings';
+import { DesignConfigEntry, DesignConfigKey, designConfigEntries, flavorPackById, isRetiredFlavorId, packDesignChoices, StoredDesign } from './design-settings';
 
 /**
  * Applying a look (design-system DS4): the COMPLETE `buildFlavorTokens` set for the chosen
@@ -125,6 +126,58 @@ export function planDesignRevert(current: ReadonlyArray<StoredDesignTokenRow>, d
     return planFlavorRevert(current, snapshot.tokens, snapshot.wrote ?? designTokenRows(design.choices));
 }
 
+/** The revert snapshot an Apply stores in `settings.design` (board F7): design-core's snapshot plus the design
+ *  row's previous config VERBATIM, so a revert restores every choice (pair, axes, mode, fonts), not only the
+ *  flavor id and seed. */
+export interface DesignRevertSnapshot extends FlavorRevertSnapshot {
+    fromConfig?: DesignConfigEntry[];
+}
+
+/**
+ * What an Apply of `plan` stores as its revert snapshot — the ONE rule the builder's Apply and the
+ * server-side site build (W2) share: the whole pre-apply token set, what the apply writes into each row,
+ * and where a revert goes back to — never a null flavor (a studio with no design row wore its design's
+ * defaults, so that is what it returns to). An apply that writes nothing keeps the previous snapshot:
+ * clobbering a useful one with "nothing changed" would be a lie.
+ */
+export function designApplySnapshot(
+    previous: StoredDesign,
+    previousConfig: ReadonlyArray<DesignConfigEntry> | null | undefined,
+    existing: ReadonlyArray<StoredDesignTokenRow>,
+    plan: FlavorSeedPlan,
+    appliedAt: number,
+): DesignRevertSnapshot | null {
+    if (!plan.create.length && !plan.update.length) return previous.revert;
+    const origin: Pick<DesignRevertSnapshot, 'from' | 'fromConfig'> = previous.storedFlavorId
+        ? {
+            from: { flavorId: previous.storedFlavorId, flavorVersion: previous.flavorVersion, brandSeed: previous.storedSeed },
+            fromConfig: (previousConfig ?? []).filter(kv => kv?.key !== DesignConfigKey.Revert),
+        }
+        : {
+            from: { flavorId: previous.choices.flavorId, flavorVersion: String(FLAVOR_SPEC_VERSION), brandSeed: previous.choices.seed },
+            fromConfig: designConfigEntries(previous.choices, FLAVOR_SPEC_VERSION, null),
+        };
+    return {
+        appliedAt,
+        ...origin,
+        tokens: (existing ?? []).map(r => ({ name: r.name, type: r.type, value: r.value, values: r.values, source: r.source, group: r.group, tier: r.tier })),
+        wrote: flavorSeedWrites(plan, existing),
+    };
+}
+
+/** The config a revert puts back: the snapshot's verbatim config, else (a snapshot older than `fromConfig`)
+ *  the identity it recorded. */
+export function designRevertConfig(snapshot: DesignRevertSnapshot): DesignConfigEntry[] {
+    if (snapshot.fromConfig) return snapshot.fromConfig;
+    return [
+        ...(snapshot.from.flavorId ? [
+            { key: DesignConfigKey.FlavorId, value: snapshot.from.flavorId },
+            { key: DesignConfigKey.FlavorVersion, value: snapshot.from.flavorVersion ?? '' },
+        ] : []),
+        ...(snapshot.from.brandSeed ? [{ key: DesignConfigKey.BrandSeed, value: snapshot.from.brandSeed }] : []),
+    ];
+}
+
 /** The rows a design is missing by name — the builder-load top-up (never touches an existing row). */
 export function missingDesignRows(existing: ReadonlyArray<{ name: string }>, choices: DesignChoices): DesignTokenRow[] {
     const have = new Set((existing ?? []).map(r => r.name));

package/src/design-core/design-settings.ts

@@ -1,6 +1,9 @@
 import { SPEC_AXES, SPEC_FONT_ROLES } from './flavor-spec.generated';
 import { parseHexColor } from './brand';
-import { DesignChoices, DesignMode, FlavorPackV2, FontRoleToken, PRE_TINT_DEFAULT, SPEC_FLAVORS, TintId } from './design-token.model';
+import {
+    AnimateId, BetweenId, DesignChoices, DesignMode, DesignMotion, FlavorPackV2, FontRoleToken, PRE_MOTION, PRE_TINT_DEFAULT, ScrollId,
+    SPEC_FLAVORS, TintId,
+} from './design-token.model';
 import type { FlavorRevertSnapshot } from './flavor-seed';
 
 /**
@@ -32,6 +35,9 @@ export enum DesignConfigKey {
     Mode = 'mode',
     Tint = 'tint',
     Fonts = 'fonts',
+    Scroll = 'scroll',
+    Animate = 'animate',
+    Between = 'between',
     Revert = 'revert',
 }
 
@@ -124,6 +130,16 @@ export function resolveDesignChoices(partial: Partial<DesignChoices> | null | un
         mode: (MODES.includes(asString(partial?.mode) ?? '') ? asString(partial?.mode) : pack.defaults.mode) as DesignMode,
         tint: keyOf(SPEC_AXES.tints, asString(partial?.tint)) ?? pack.defaults.tint,
         ...(fonts ? { fonts } : {}),
+        ...resolveDesignMotion(partial),
+    };
+}
+
+/** The look's motion, completed: an absent or unknown choice reads `PRE_MOTION` — what the site already does. */
+export function resolveDesignMotion(partial: Readonly<Partial<Record<keyof DesignMotion, unknown>>> | null | undefined): DesignMotion {
+    return {
+        scroll: keyOf<ScrollId>(SPEC_AXES.scrolls, asString(partial?.scroll)) ?? PRE_MOTION.scroll,
+        animate: keyOf<AnimateId>(SPEC_AXES.animations, asString(partial?.animate)) ?? PRE_MOTION.animate,
+        between: keyOf<BetweenId>(SPEC_AXES.betweens, asString(partial?.between)) ?? PRE_MOTION.between,
     };
 }
 
@@ -135,12 +151,13 @@ export function packDesignChoices(flavorId: string): DesignChoices {
 /**
  * What picking a pack card means, given the design the studio wears: the applied pack → the applied
  * choices; another pack → that pack's defaults, CARRYING the author's chosen fonts (§5b — a font the
- * author chose survives a pack switch unless the author changes it). Both picker homes call this.
+ * author chose survives a pack switch unless the author changes it) and the site's motion (rev 3.1 MO-D3 —
+ * how it scrolls and changes page is not a pack's, so a Look pick never resets it). Both picker homes call this.
  */
 export function choicesForPack(flavorId: string, applied: DesignChoices | null | undefined): DesignChoices {
     const pack = flavorPackById(flavorId) ?? defaultPack();
     if (applied && resolveDesignChoices(applied).flavorId === pack.id) return resolveDesignChoices(applied);
-    return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts });
+    return resolveDesignChoices({ flavorId: pack.id, fonts: applied?.fonts, ...resolveDesignMotion(applied) });
 }
 
 /**
@@ -164,6 +181,9 @@ export function readDesignConfig(config: ReadonlyArray<DesignConfigEntry> | null
         mode: map.get(DesignConfigKey.Mode) as DesignMode,
         tint: (storedTint ?? undefined) as TintId | undefined,
         fonts: map.get(DesignConfigKey.Fonts) as DesignChoices['fonts'],
+        scroll: map.get(DesignConfigKey.Scroll) as ScrollId,
+        animate: map.get(DesignConfigKey.Animate) as AnimateId,
+        between: map.get(DesignConfigKey.Between) as BetweenId,
     });
     return {
         choices,
@@ -180,6 +200,11 @@ export function designModeOf(config: ReadonlyArray<DesignConfigEntry> | null | u
     return readDesignConfig(config).choices.mode;
 }
 
+/** The look's motion of a stored config — what the public page read hands the engine (`designMotion`). */
+export function designMotionOf(config: ReadonlyArray<DesignConfigEntry> | null | undefined): DesignMotion {
+    return resolveDesignMotion(readDesignConfig(config).choices);
+}
+
 /** Resolved choices (+ the revert snapshot) → the config array a settings row stores. */
 export function designConfigEntries(
     choices: DesignChoices,
@@ -198,6 +223,9 @@ export function designConfigEntries(
         { key: DesignConfigKey.PillButtons, value: String(c.pillButtons) },
         { key: DesignConfigKey.Mode, value: c.mode },
         { key: DesignConfigKey.Tint, value: c.tint },
+        { key: DesignConfigKey.Scroll, value: c.scroll },
+        { key: DesignConfigKey.Animate, value: c.animate },
+        { key: DesignConfigKey.Between, value: c.between },
         ...(c.fonts ? [{ key: DesignConfigKey.Fonts, value: JSON.stringify(c.fonts) }] : []),
         ...(revert ? [{ key: DesignConfigKey.Revert, value: JSON.stringify(revert) }] : []),
     ];
@@ -210,5 +238,6 @@ export function sameDesignChoices(a: DesignChoices, b: DesignChoices): boolean {
     return x.flavorId === y.flavorId && x.seed.toLowerCase() === y.seed.toLowerCase() && x.pairId === y.pairId
         && x.shape === y.shape && x.density === y.density && x.motion === y.motion
         && x.pillButtons === y.pillButtons && x.mode === y.mode && x.tint === y.tint
+        && x.scroll === y.scroll && x.animate === y.animate && x.between === y.between
         && JSON.stringify(x.fonts ?? {}) === JSON.stringify(y.fonts ?? {});
 }

package/src/design-core/design-token.model.ts

@@ -46,6 +46,25 @@ export type TintId = keyof typeof SPEC_AXES.tints;
 export const TINT_IDS = Object.keys(SPEC_AXES.tints) as ReadonlyArray<TintId>;
 /** What a studio that stored its look BEFORE the tint existed wears: exactly the look's own palette. */
 export const PRE_TINT_DEFAULT: TintId = 'neutral';
+/** How the site scrolls (AI plan rev 3.1 §3p): Normal (the browser's own) · Smooth · Extra smooth. */
+export type ScrollId = keyof typeof SPEC_AXES.scrolls;
+/** How much the sections move in as they scroll into view: Still · Subtle · Standard · Lively. */
+export type AnimateId = keyof typeof SPEC_AXES.animations;
+/** What plays between pages: None · Fade · Slide · Cinematic. */
+export type BetweenId = keyof typeof SPEC_AXES.betweens;
+export const SCROLL_IDS = Object.keys(SPEC_AXES.scrolls) as ReadonlyArray<ScrollId>;
+export const ANIMATE_IDS = Object.keys(SPEC_AXES.animations) as ReadonlyArray<AnimateId>;
+export const BETWEEN_IDS = Object.keys(SPEC_AXES.betweens) as ReadonlyArray<BetweenId>;
+/** The look's motion — the three choices the runtime and the composer read from `settings.design`. */
+export interface DesignMotion {
+    scroll: ScrollId;
+    animate: AnimateId;
+    between: BetweenId;
+}
+/** What a look stored BEFORE rev 3.1 wears: exactly what every live site did (Smooth · Still · Cinematic). */
+export const PRE_MOTION: Readonly<DesignMotion> = SPEC_AXES.motionChoices.pre;
+/** What a visitor who asks for reduced motion always gets, whatever the look chose. */
+export const REDUCED_DESIGN_MOTION: Readonly<DesignMotion> = SPEC_AXES.motionChoices.reduced;
 export type SchemeId = keyof typeof SPEC_SCHEMES;
 export type FontRoleToken = (typeof SPEC_FONT_ROLES)[number]['token'];
 
@@ -63,6 +82,10 @@ export interface DesignChoices {
      *  `neutral` — the palette it was applied with. */
     tint?: TintId;
     fonts?: Partial<Record<FontRoleToken, string>>;
+    /** Absent = `PRE_MOTION` (a row stored before rev 3.1 reads what its site already did). */
+    scroll?: ScrollId;
+    animate?: AnimateId;
+    between?: BetweenId;
 }
 
 export interface FlavorSpecToken {

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

@@ -1429,6 +1429,208 @@ export const SPEC_AXES = {
         "inverse-line": 0.03
       }
     }
+  },
+  "scrolls": {
+    "normal": {
+      "label": "Normal",
+      "he": "רגילה",
+      "hint": "The browser's own scrolling.",
+      "lenis": null
+    },
+    "smooth": {
+      "label": "Smooth",
+      "he": "חלקה",
+      "hint": "A short glide after each wheel turn — what every IOX site does today.",
+      "lenis": {
+        "duration": 1.2,
+        "easing": "expo-out",
+        "wheelMultiplier": 1,
+        "syncTouch": false
+      }
+    },
+    "extra": {
+      "label": "Extra smooth",
+      "he": "חלקה מאוד",
+      "hint": "A longer, softer glide; each wheel turn moves a little less.",
+      "lenis": {
+        "duration": 1.8,
+        "easing": "expo-out",
+        "wheelMultiplier": 0.9,
+        "syncTouch": false
+      }
+    }
+  },
+  "animations": {
+    "still": {
+      "label": "Still",
+      "he": "ללא",
+      "hint": "Nothing moves in as you scroll. Buttons and cards still respond to the pointer (Speed).",
+      "parts": {}
+    },
+    "subtle": {
+      "label": "Subtle",
+      "he": "עדינה",
+      "hint": "Each section's content fades in once, together.",
+      "parts": {
+        "content": {
+          "type": "fadeIn",
+          "duration": 500
+        }
+      }
+    },
+    "standard": {
+      "label": "Standard",
+      "he": "רגילה",
+      "hint": "Headings rise in; cards, prices and steps follow one after another.",
+      "parts": {
+        "heading": {
+          "type": "moveUp",
+          "distance": 16,
+          "duration": 500
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 16,
+          "duration": 450,
+          "stagger": 80,
+          "cap": 6
+        },
+        "media": {
+          "type": "fadeIn",
+          "duration": 600
+        }
+      }
+    },
+    "lively": {
+      "label": "Lively",
+      "he": "תוססת",
+      "hint": "Bigger, longer entrances; side-by-side rows slide in from their side; the hero's words fade in.",
+      "parts": {
+        "heroText": {
+          "type": "fadeIn",
+          "duration": 400
+        },
+        "heading": {
+          "type": "moveUp",
+          "distance": 24,
+          "duration": 600
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 24,
+          "duration": 600,
+          "stagger": 100,
+          "cap": 8
+        },
+        "media": {
+          "type": "fadeIn",
+          "duration": 700
+        },
+        "rowMedia": {
+          "type": "moveLeft",
+          "mirror": "moveRight",
+          "distance": 24,
+          "duration": 600
+        }
+      }
+    }
+  },
+  "animationFamilies": {
+    "nav": [],
+    "footer": [],
+    "hero": [
+      "heroText"
+    ],
+    "header": [
+      "heading"
+    ],
+    "detail": [
+      "heading",
+      "media"
+    ],
+    "proof": [
+      "content",
+      "heading",
+      "items"
+    ],
+    "feature": [
+      "content",
+      "heading",
+      "items",
+      "media",
+      "rowMedia"
+    ],
+    "collection": [
+      "content",
+      "heading",
+      "items"
+    ],
+    "story": [
+      "content",
+      "heading",
+      "media"
+    ],
+    "cta": [
+      "content",
+      "heading"
+    ],
+    "contact": [
+      "content",
+      "heading"
+    ],
+    "faq": [
+      "content",
+      "heading"
+    ],
+    "pricing": [
+      "content",
+      "heading",
+      "items"
+    ]
+  },
+  "betweens": {
+    "none": {
+      "label": "None",
+      "he": "ללא",
+      "hint": "The next page simply appears.",
+      "transition": "none"
+    },
+    "fade": {
+      "label": "Fade",
+      "he": "דהייה",
+      "hint": "The page fades into the next.",
+      "transition": "fade",
+      "feel": "snappy"
+    },
+    "slide": {
+      "label": "Slide",
+      "he": "החלקה",
+      "hint": "The next page pushes this one aside (from the left on a Hebrew site). On phones: Fade.",
+      "transition": "move-left",
+      "rtl": "move-right",
+      "feel": "smooth",
+      "phone": "fade"
+    },
+    "cinematic": {
+      "label": "Cinematic",
+      "he": "קולנועית",
+      "hint": "This page sinks back while the next rises over it. On phones: Fade.",
+      "transition": "parallax-up",
+      "feel": "cinematic",
+      "phone": "fade"
+    }
+  },
+  "motionChoices": {
+    "pre": {
+      "scroll": "smooth",
+      "animate": "still",
+      "between": "cinematic"
+    },
+    "reduced": {
+      "scroll": "normal",
+      "animate": "still",
+      "between": "none"
+    }
   }
 } as const;
 

package/src/design-core/flavor-tokens.ts

@@ -3,7 +3,7 @@ import { flavorColours, FlavorColours, preTintAccentGrounds } from './brand-neut
 import { fontStackWithout, formatFontFamily } from './fonts';
 import { SPEC_AXES } from './flavor-spec.generated';
 import {
-    DesignChoices, DesignTokenRow, FlavorPackV2, FlavorSpecToken, flavorSourceStamp, USER_TOKEN_SOURCE,
+    DesignChoices, DesignTokenRow, FlavorPackV2, FlavorSpecToken, flavorSourceStamp, PRE_MOTION, USER_TOKEN_SOURCE,
 } from './design-token.model';
 
 /**
@@ -37,6 +37,7 @@ export function defaultDesignChoices(pack: FlavorPackV2): DesignChoices {
         seed: pack.seed,
         pairId: pack.pairs[0]?.id ?? '',
         ...pack.defaults,
+        ...PRE_MOTION,
     };
 }
 

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

@@ -37,7 +37,10 @@ export const SPEC_SITE_PLAN_SHAPE = {
     "pillButtons": "boolean",
     "mode": "'light' | 'dark' | 'auto'",
     "tint?": "string — axes.tints (DS9 neutral tint)",
-    "fonts?": "object — uploaded font families per role (DS5)"
+    "fonts?": "object — uploaded font families per role (DS5)",
+    "scroll?": "string — axes.scrolls: how the site scrolls (rev 3.1; absent = axes.motionChoices.pre)",
+    "animate?": "string — axes.animations: how much the sections move in as they scroll into view",
+    "between?": "string — axes.betweens: what plays between pages"
   },
   "contentType": {
     "name": "string — unique",

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

@@ -200,6 +200,9 @@ function validateDesign(c: Collector, design: unknown): void {
     axis('density', SPEC_AXES.densities);
     axis('motion', SPEC_AXES.motions);
     axis('tint', SPEC_AXES.tints);
+    axis('scroll', SPEC_AXES.scrolls);
+    axis('animate', SPEC_AXES.animations);
+    axis('between', SPEC_AXES.betweens);
     if (design['mode'] !== undefined && !(SPEC_AXES.modes as ReadonlyArray<unknown>).includes(design['mode'])) bad('mode', `must be one of ${SPEC_AXES.modes.join(', ')}`);
     if (design['pillButtons'] !== undefined && typeof design['pillButtons'] !== 'boolean') bad('pillButtons', 'must be a boolean');
     if (design['fonts'] !== undefined && !isObject(design['fonts'])) bad('fonts', 'must be an object');