@vectoriox/iox-ui 5.69.0 → 5.70.1

package/fesm2022/vectoriox-iox-ui-scene-core.mjs

@@ -0,0 +1,472 @@
+import { SceneRole, makeCompositePart, NO_ELEMENT_STYLE, writeLayerStyles, writeStyles } from '@vectoriox/iox-ui/composite-core';
+
+/**
+ * A Scene's data and maths (premium-sites plan §5b). A Scene is a recipe of ordinary nodes — a tall Section, a pinned
+ * stage inside it, ordinary nodes as layers — so every word stays real, bound and translatable, and all three render
+ * paths already draw it. What moves a layer is its OWN `sceneTracks`, never a list on the root naming layer ids: a clone
+ * copies them with the layer, a delete takes them with it, and there is no id to remap.
+ *
+ * The vocabulary is closed. Every property is one the compositor can run without layout (CLS stays 0): a saved value
+ * outside it is dropped when read, so a page document can never write CSS through a track.
+ */
+var SceneProp;
+(function (SceneProp) {
+    /** Along the inline axis, in % of the stage's width. Positive runs toward the inline END (mirrored in RTL). */
+    SceneProp["X"] = "x";
+    /** Down, in % of the stage's height. */
+    SceneProp["Y"] = "y";
+    SceneProp["Scale"] = "scale";
+    /** Degrees. */
+    SceneProp["Rotate"] = "rotate";
+    /** 0–1. */
+    SceneProp["Opacity"] = "opacity";
+    /** Inset from every side, in % of the layer (0 = whole, 50 = gone). */
+    SceneProp["Clip"] = "clip";
+    /** The layer's background colour. */
+    SceneProp["Ground"] = "ground";
+    /** The layer's text colour. */
+    SceneProp["Ink"] = "ink";
+})(SceneProp || (SceneProp = {}));
+var SceneAttribute;
+(function (SceneAttribute) {
+    SceneAttribute["Root"] = "data-iox-scene";
+    SceneAttribute["Tracks"] = "data-iox-tracks";
+    SceneAttribute["PhoneTracks"] = "data-iox-tracks-phone";
+})(SceneAttribute || (SceneAttribute = {}));
+/** At or under this stage width a layer plays its phone tracks. The `mobile` breakpoint's width. */
+const SCENE_PHONE_MAX_WIDTH = 767;
+const DECIMALS = 10000;
+const round = (v) => Math.round(v * DECIMALS) / DECIMALS;
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+const smoothstep = (t) => t * t * (3 - 2 * t);
+/** A colour a track may hold: a hex, an rgb()/hsl() literal, or a design token. Anything else could break out of the
+ *  inline style it lands in. */
+const COLOUR = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\([\d\s.,%/]+\)|var\(--iox-[\w-]+\))$/i;
+const COLOUR_PROPS = new Set([SceneProp.Ground, SceneProp.Ink]);
+const ALL_PROPS = new Set(Object.values(SceneProp));
+function validKey(key, colour) {
+    if (!Array.isArray(key) || key.length !== 2)
+        return false;
+    const [p, value] = key;
+    if (typeof p !== 'number' || !Number.isFinite(p) || p < 0 || p > 1)
+        return false;
+    return colour ? typeof value === 'string' && COLOUR.test(value) : typeof value === 'number' && Number.isFinite(value);
+}
+/**
+ * The tracks a saved value really holds: unknown properties, bad keys and colours that are not colours are dropped,
+ * keys sorted by progress, a track left with no key dropped. Never throws on what a page document holds.
+ */
+function normalizeTracks(tracks) {
+    if (!Array.isArray(tracks))
+        return [];
+    const out = [];
+    for (const track of tracks) {
+        const prop = track?.prop;
+        if (!prop || !ALL_PROPS.has(prop) || !Array.isArray(track.keys))
+            continue;
+        const keys = track.keys
+            .filter(key => validKey(key, COLOUR_PROPS.has(prop)))
+            .slice()
+            .sort((a, b) => a[0] - b[0]);
+        if (keys.length)
+            out.push({ prop, keys });
+    }
+    return out;
+}
+/** The two keys around `p` and how far between them it eases. */
+function span(keys, p) {
+    const at = clamp01(p);
+    if (at <= keys[0][0])
+        return { a: keys[0], b: keys[0], f: 0 };
+    for (let i = 1; i < keys.length; i++) {
+        if (at <= keys[i][0]) {
+            const a = keys[i - 1];
+            const b = keys[i];
+            const width = b[0] - a[0];
+            return { a, b, f: width > 0 ? smoothstep((at - a[0]) / width) : 1 };
+        }
+    }
+    const last = keys[keys.length - 1];
+    return { a: last, b: last, f: 0 };
+}
+/** A numeric track's value at progress `p`. */
+function valueAt(keys, p) {
+    if (!keys.length)
+        return 0;
+    const { a, b, f } = span(keys, p);
+    const from = Number(a[1]);
+    return round(from + (Number(b[1]) - from) * f);
+}
+/**
+ * A colour track's value at progress `p`. Mixed by the browser, never computed here, so a design token stays a live
+ * reference (a re-theme reaches a Scene, as it reaches every saved page) and the path is perceptual.
+ */
+function colourAt(keys, p) {
+    if (!keys.length)
+        return '';
+    const { a, b, f } = span(keys, p);
+    if (f <= 0 || a === b)
+        return String(a[1]);
+    if (f >= 1)
+        return String(b[1]);
+    return `color-mix(in oklab, ${a[1]} ${round((1 - f) * 100)}%, ${b[1]})`;
+}
+/** What the tracks' transform-family properties rest at when a layer has no track for one. */
+const TRANSFORM_REST = { [SceneProp.X]: 0, [SceneProp.Y]: 0, [SceneProp.Scale]: 1, [SceneProp.Rotate]: 0 };
+/**
+ * A layer's frame at progress `p`. Lengths are container-query units, so one frame is right at any width, under any
+ * canvas zoom, on the server and with no measuring: the stage is the size container (`iox-design.css`).
+ */
+function sceneFrame(tracks, p, options = {}) {
+    const frame = {};
+    const moves = {};
+    for (const { prop, keys } of tracks) {
+        if (prop in TRANSFORM_REST)
+            moves[prop] = valueAt(keys, p);
+        else if (prop === SceneProp.Opacity)
+            frame.opacity = String(clamp01(valueAt(keys, p)));
+        else if (prop === SceneProp.Clip)
+            frame.clipPath = `inset(${Math.min(50, Math.max(0, valueAt(keys, p)))}%)`;
+        else if (prop === SceneProp.Ground)
+            frame.backgroundColor = colourAt(keys, p);
+        else if (prop === SceneProp.Ink)
+            frame.color = colourAt(keys, p);
+    }
+    if (Object.keys(moves).length) {
+        const value = (prop) => moves[prop] ?? TRANSFORM_REST[prop];
+        const x = round(value(SceneProp.X) * (options.inlineSign ?? 1));
+        frame.transform = `translate3d(${x}cqw, ${value(SceneProp.Y)}cqh, 0) rotate(${value(SceneProp.Rotate)}deg) scale(${value(SceneProp.Scale)})`;
+    }
+    return frame;
+}
+const CSS_NAME = {
+    transform: 'transform',
+    opacity: 'opacity',
+    clipPath: 'clip-path',
+    backgroundColor: 'background-color',
+    color: 'color',
+};
+/** A frame as kebab-case style declarations, for a string renderer. */
+function sceneFrameDeclarations(frame) {
+    const out = {};
+    for (const [key, value] of Object.entries(frame))
+        if (value)
+            out[CSS_NAME[key]] = value;
+    return out;
+}
+/** The attributes a node's own element carries — the same decision in all three render paths. The runtime reads them,
+ *  so it needs no node tree and is the same on every path. Empty for any node that is no part of a Scene. */
+function sceneNodeAttributes(node) {
+    const attrs = {};
+    if (node?.role === SceneRole.Scene)
+        attrs[SceneAttribute.Root] = '';
+    const tracks = normalizeTracks(node?.sceneTracks);
+    const phone = normalizeTracks(node?.scenePhoneTracks);
+    if (tracks.length)
+        attrs[SceneAttribute.Tracks] = JSON.stringify(tracks);
+    if (phone.length)
+        attrs[SceneAttribute.PhoneTracks] = JSON.stringify(phone);
+    return attrs;
+}
+/** The frame a layer ships in from the server: where it stands before anyone has scrolled. Without it the page would
+ *  paint every layer at once, and then jump when the script arrives. */
+function sceneFirstFrame(node) {
+    return sceneFrame(normalizeTracks(node?.sceneTracks), 0);
+}
+/**
+ * Make an element carry its node's Scene attributes: the live sync on the canvas and the component path's stamp.
+ * Removes stale ones, touches nothing else.
+ */
+function syncSceneAttributes(el, node) {
+    if (!el?.setAttribute)
+        return;
+    const attrs = sceneNodeAttributes(node);
+    for (const name of Object.values(SceneAttribute)) {
+        if (name in attrs)
+            el.setAttribute(name, attrs[name]);
+        else
+            el.removeAttribute(name);
+    }
+}
+/** Stamp a layer's first frame on its element (the component path, on the server too). */
+function applySceneFirstFrame(el, node) {
+    if (!el?.style)
+        return;
+    for (const [name, value] of Object.entries(sceneFrameDeclarations(sceneFirstFrame(node))))
+        el.style.setProperty(name, value);
+}
+/**
+ * Where nothing will drive it (reduced motion, no script) a Scene is ordinary content: it flows, every layer in its
+ * place and in its own look, every word readable. `!important` because it must beat a node's compiled height and
+ * position, and the inline first frame. The engine wraps it in a reduced-motion query and in `<noscript>`.
+ */
+const SCENE_FLOW_RULES = `.iox-role-scene{height:auto!important}`
+    + `.iox-role-scene-stage{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;container-type:normal!important}`
+    + `[${SceneAttribute.Tracks}]{transform:none!important;opacity:1!important;clip-path:none!important}`;
+/** Under reduced motion the driver never starts, so the same rules hold for the whole visit. */
+const SCENE_REDUCED_MOTION_CSS = `@media (prefers-reduced-motion: reduce){${SCENE_FLOW_RULES}}`;
+
+/** Generic words a fresh Scene starts with: the author's to replace. */
+const SCENE_WORDS = {
+    title: 'One idea, held still',
+    line: 'The page keeps moving. This stays until you have read it.',
+};
+/** How long a fresh Scene plays: 4 viewports wide, 3 on a phone (a thumb travels less). */
+const SCENE_LENGTH = '400vh';
+const SCENE_PHONE_LENGTH = '300vh';
+/** Small viewport height: a phone's toolbar never pushes the stage's bottom out of sight. */
+const SCENE_STAGE_HEIGHT = '100svh';
+const PHONE_BREAKPOINT = 'mobile';
+const TITLE_LEVEL = 'h2';
+var Type;
+(function (Type) {
+    Type["Section"] = "Section";
+    Type["Container"] = "Container";
+    Type["Heading"] = "Heading";
+    Type["Text"] = "Text";
+})(Type || (Type = {}));
+const ROOT_LAYOUT = {
+    position: 'relative',
+    display: 'block',
+    width: '100%',
+    height: SCENE_LENGTH,
+};
+const STAGE_LAYOUT = {
+    position: 'sticky',
+    top: '0px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: SCENE_STAGE_HEIGHT,
+    overflow: 'hidden',
+};
+const TITLE_TRACKS = [
+    { prop: SceneProp.Opacity, keys: [[0, 0], [0.2, 1], [0.75, 1], [1, 0]] },
+    { prop: SceneProp.Y, keys: [[0, 8], [0.2, 0], [1, -6]] },
+    { prop: SceneProp.Scale, keys: [[0, 0.96], [0.6, 1], [1, 1.04]] },
+];
+const LINE_TRACKS = [
+    { prop: SceneProp.Opacity, keys: [[0.25, 0], [0.45, 1], [0.8, 1], [1, 0]] },
+    { prop: SceneProp.Y, keys: [[0.25, 6], [0.45, 0], [1, -4]] },
+];
+const STAGE_TRACKS = [
+    { prop: SceneProp.Ground, keys: [[0, 'var(--iox-surface-2)'], [0.6, 'var(--iox-page-bg)']] },
+];
+const copyTracks = (tracks) => tracks.map(t => ({ prop: t.prop, keys: t.keys.map(k => [k[0], k[1]]) }));
+/** A fresh Scene: it already moves, so the author sees what the thing is before touching it. */
+function buildSceneRecipe(create, words = {}) {
+    const text = { ...SCENE_WORDS, ...words };
+    const root = makeCompositePart(create, { key: 'root', type: Type.Section, elementStyle: NO_ELEMENT_STYLE }, SceneRole.Scene, 'Scene', ROOT_LAYOUT);
+    writeLayerStyles(root, PHONE_BREAKPOINT, { height: SCENE_PHONE_LENGTH });
+    const stage = makeCompositePart(create, { key: 'stage', type: Type.Container, elementStyle: NO_ELEMENT_STYLE }, SceneRole.Stage, 'Stage', STAGE_LAYOUT);
+    stage.sceneTracks = copyTracks(STAGE_TRACKS);
+    const title = makeCompositePart(create, { key: 'title', type: Type.Heading, props: { content: text.title, level: TITLE_LEVEL } }, null, 'Title');
+    title.sceneTracks = copyTracks(TITLE_TRACKS);
+    writeStyles(title, { textAlign: 'center' });
+    const line = makeCompositePart(create, { key: 'line', type: Type.Text, props: { content: text.line, tag: 'p' } }, null, 'Line');
+    line.sceneTracks = copyTracks(LINE_TRACKS);
+    writeStyles(line, { textAlign: 'center' });
+    stage.children = [title, line];
+    root.children = [stage];
+    return root;
+}
+
+/**
+ * The ONE scroll loop (premium-sites plan §5b, SC0). Every Scene on a page reads one progress value from it, on the
+ * canvas and on the live site alike. It reads where the root is and nothing else, so it has one code path: under the
+ * canvas's zoom the same rectangle divides by the same zoom, and the answer is the same at any scale.
+ *
+ * - The value is DAMPED: the scroll stops and the page settles a moment later. This is much of the prototype's weight,
+ *   and why this is not a CSS scroll timeline, which cannot do it.
+ * - The live site pins with `position: sticky`, on the compositor. The canvas cannot (its page never scrolls itself,
+ *   its Lenis scrolls a wrapper around a zoomed frame), so `pin` holds the stage there with `translate` instead.
+ *   `translate`, not `transform`: a Stage may carry tracks of its own.
+ * - It sleeps. No frame is asked for unless something moved, so a page holding a settled Scene costs nothing.
+ * - Reads come first in a frame and writes after, and a write only ever touches compositor properties.
+ */
+const SCENE_DAMPING = 9;
+const SETTLED = 0.0005;
+const MAX_FRAME_SECONDS = 0.1;
+/** The first frame after a sleep has no previous one to measure from: it counts as one frame, or a scroll would lose it. */
+const WAKING_FRAME_SECONDS = 1 / 60;
+const STAGE_SELECTOR = `.iox-role-${SceneRole.Stage.replace(/\./g, '-')}`;
+const TRANSFORM_WILL_CHANGE = 'transform, opacity';
+/** One frame of the damping: frame-rate independent, so 60 Hz and 120 Hz settle in the same time. */
+function dampToward(current, target, seconds, rate = SCENE_DAMPING) {
+    return current + (target - current) * (1 - Math.exp(-seconds * rate));
+}
+/** Where a root stands: scrolled `local` page px into its `travel`. `zoom` undoes the canvas's scale. */
+function sceneScrollState(rootTop, originTop, zoom, travel) {
+    if (travel <= 0)
+        return { local: 0, progress: 0 };
+    const local = Math.min(travel, Math.max(0, -(rootTop - originTop) / (zoom || 1)));
+    return { local, progress: local / travel };
+}
+function parseTracks(raw) {
+    if (!raw)
+        return [];
+    try {
+        return normalizeTracks(JSON.parse(raw));
+    }
+    catch {
+        return [];
+    }
+}
+class ScrollDriver {
+    constructor(options = {}) {
+        this.options = options;
+        this.scenes = new Map();
+        this.frame = 0;
+        this.lastTime = 0;
+        this.wakeUp = () => this.wake();
+        this.tick = (now) => {
+            this.frame = 0;
+            const seconds = this.lastTime ? Math.min(MAX_FRAME_SECONDS, (now - this.lastTime) / 1000) : WAKING_FRAME_SECONDS;
+            this.lastTime = now;
+            const reads = [...this.scenes.values()].map(scene => this.read(scene));
+            let moving = false;
+            for (const { scene, local, target } of reads) {
+                if (this.options.pin && scene.stage)
+                    scene.stage.style.setProperty('translate', `0 ${local}px`);
+                const next = scene.fresh ? target : dampToward(scene.progress, target, seconds, this.options.damping);
+                const settled = Math.abs(next - target) < SETTLED;
+                scene.progress = settled ? target : next;
+                scene.fresh = false;
+                this.write(scene);
+                moving = moving || !settled;
+            }
+            if (moving)
+                this.wake();
+            else
+                this.lastTime = 0;
+        };
+        this.host = options.host ?? window;
+        // In capture: a scroll does not bubble, and the canvas's Lenis scrolls an element, not the window.
+        this.host.addEventListener('scroll', this.wakeUp, { capture: true, passive: true });
+        this.host.addEventListener('resize', this.wakeUp, { passive: true });
+        const Observer = this.host.ResizeObserver;
+        this.resize = Observer ? new Observer(() => this.remeasureAll()) : null;
+    }
+    /** Drive a Scene's root. Idempotent: adding a root again re-reads it. */
+    add(root) {
+        this.remove(root);
+        const scene = { root, stage: null, layers: [], progress: 0, height: 0, travel: 0, phone: false, inlineSign: 1, fresh: true, mutations: null };
+        this.scenes.set(root, scene);
+        this.resize?.observe(root);
+        if (this.options.observe) {
+            const Observer = this.host.MutationObserver;
+            if (Observer) {
+                scene.mutations = new Observer(() => this.reread(scene));
+                scene.mutations.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: [SceneAttribute.Tracks, SceneAttribute.PhoneTracks] });
+            }
+        }
+        this.reread(scene);
+    }
+    remove(root) {
+        const scene = this.scenes.get(root);
+        if (!scene)
+            return;
+        scene.mutations?.disconnect();
+        this.resize?.unobserve(root);
+        if (scene.stage)
+            scene.stage.style.removeProperty('translate');
+        for (const layer of scene.layers)
+            layer.el.style.removeProperty('will-change');
+        this.scenes.delete(root);
+    }
+    /** The damped progress a root's layers stand at. */
+    progressOf(root) {
+        return this.scenes.get(root)?.progress ?? null;
+    }
+    /** Something moved that no scroll or resize announces (the canvas's zoom). */
+    wake() {
+        if (this.frame)
+            return;
+        this.frame = this.host.requestAnimationFrame(this.tick);
+    }
+    destroy() {
+        if (this.frame)
+            this.host.cancelAnimationFrame(this.frame);
+        this.frame = 0;
+        this.host.removeEventListener('scroll', this.wakeUp, { capture: true });
+        this.host.removeEventListener('resize', this.wakeUp);
+        for (const root of [...this.scenes.keys()])
+            this.remove(root);
+        this.resize?.disconnect();
+    }
+    /** Read a root's stage and layers from its DOM: its own Scene's only, never a nested one's. */
+    reread(scene) {
+        scene.stage = scene.root.querySelector(STAGE_SELECTOR);
+        scene.layers = Array.from(scene.root.querySelectorAll(`[${SceneAttribute.Tracks}], [${SceneAttribute.PhoneTracks}]`))
+            .filter(el => el === scene.root || el.parentElement?.closest(`[${SceneAttribute.Root}]`) === scene.root)
+            .map(el => this.readLayer(el, scene));
+        this.measure(scene);
+        scene.fresh = true;
+        this.wake();
+    }
+    readLayer(el, scene) {
+        const previous = scene.layers.find(layer => layer.el === el);
+        el.style.setProperty('will-change', TRANSFORM_WILL_CHANGE);
+        return { el, tracks: parseTracks(el.getAttribute(SceneAttribute.Tracks)), phoneTracks: parseTracks(el.getAttribute(SceneAttribute.PhoneTracks)), last: previous?.last ?? {} };
+    }
+    remeasureAll() {
+        for (const scene of this.scenes.values())
+            this.measure(scene);
+        this.wake();
+    }
+    measure(scene) {
+        scene.height = scene.root.offsetHeight;
+        scene.travel = Math.max(0, scene.height - (scene.stage?.offsetHeight ?? scene.height));
+        scene.phone = (scene.stage?.offsetWidth ?? Infinity) <= SCENE_PHONE_MAX_WIDTH;
+        scene.inlineSign = scene.stage && this.host.getComputedStyle(scene.stage).direction === 'rtl' ? -1 : 1;
+        for (const layer of scene.layers)
+            layer.last = {};
+    }
+    read(scene) {
+        const rect = scene.root.getBoundingClientRect();
+        const origin = this.options.originOf?.(scene.root)?.getBoundingClientRect().top ?? 0;
+        const zoom = scene.height ? rect.height / scene.height : 1;
+        const { local, progress } = sceneScrollState(rect.top, origin, zoom, scene.travel);
+        return { scene, local, target: progress };
+    }
+    write(scene) {
+        for (const layer of scene.layers) {
+            const tracks = scene.phone && layer.phoneTracks.length ? layer.phoneTracks : layer.tracks;
+            const frame = sceneFrame(tracks, scene.progress, { inlineSign: scene.inlineSign });
+            for (const key of Object.keys(frame)) {
+                if (frame[key] !== layer.last[key])
+                    layer.el.style[key] = frame[key];
+            }
+            layer.last = frame;
+        }
+    }
+}
+/** A page's Scenes, driven by one driver; null when it holds none, or when the visitor asked for less motion (the
+ *  page's own CSS then lets each Scene flow). The live site's door. */
+function attachScenes(container, options = {}) {
+    const roots = container.querySelectorAll(`[${SceneAttribute.Root}]`);
+    if (!roots.length)
+        return null;
+    const host = options.host ?? window;
+    if (host.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+        return null;
+    const driver = new ScrollDriver(options);
+    roots.forEach(root => driver.add(root));
+    return driver;
+}
+
+/**
+ * @vectoriox/iox-ui/scene-core — a Scene: a stage that holds still while the page scrolls past it, its layers moving on
+ * ONE progress value (premium-sites plan §5b). FRAMEWORK-FREE: the builder canvas, both engine paths and (from SC6) the
+ * composer read the same tracks, frames and recipe; the driver is DOM-only and is the ONE scroll loop.
+ * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SCENE_DAMPING, SCENE_FLOW_RULES, SCENE_LENGTH, SCENE_PHONE_LENGTH, SCENE_PHONE_MAX_WIDTH, SCENE_REDUCED_MOTION_CSS, SCENE_STAGE_HEIGHT, SCENE_WORDS, SceneAttribute, SceneProp, ScrollDriver, applySceneFirstFrame, attachScenes, buildSceneRecipe, colourAt, dampToward, normalizeTracks, sceneFirstFrame, sceneFrame, sceneFrameDeclarations, sceneNodeAttributes, sceneScrollState, syncSceneAttributes, valueAt };
+//# sourceMappingURL=vectoriox-iox-ui-scene-core.mjs.map

package/fesm2022/vectoriox-iox-ui-scene-core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vectoriox-iox-ui-scene-core.mjs","sources":["../../../projects/iox-ui/src/scene-core/scene.ts","../../../projects/iox-ui/src/scene-core/scene-recipe.ts","../../../projects/iox-ui/src/scene-core/scroll-driver.ts","../../../projects/iox-ui/src/scene-core/public-api.ts","../../../projects/iox-ui/src/scene-core/vectoriox-iox-ui-scene-core.ts"],"sourcesContent":["import { SceneRole } from '@vectoriox/iox-ui/composite-core';\n\n/**\n * A Scene's data and maths (premium-sites plan §5b). A Scene is a recipe of ordinary nodes — a tall Section, a pinned\n * stage inside it, ordinary nodes as layers — so every word stays real, bound and translatable, and all three render\n * paths already draw it. What moves a layer is its OWN `sceneTracks`, never a list on the root naming layer ids: a clone\n * copies them with the layer, a delete takes them with it, and there is no id to remap.\n *\n * The vocabulary is closed. Every property is one the compositor can run without layout (CLS stays 0): a saved value\n * outside it is dropped when read, so a page document can never write CSS through a track.\n */\n\nexport enum SceneProp {\n    /** Along the inline axis, in % of the stage's width. Positive runs toward the inline END (mirrored in RTL). */\n    X = 'x',\n    /** Down, in % of the stage's height. */\n    Y = 'y',\n    Scale = 'scale',\n    /** Degrees. */\n    Rotate = 'rotate',\n    /** 0–1. */\n    Opacity = 'opacity',\n    /** Inset from every side, in % of the layer (0 = whole, 50 = gone). */\n    Clip = 'clip',\n    /** The layer's background colour. */\n    Ground = 'ground',\n    /** The layer's text colour. */\n    Ink = 'ink',\n}\n\n/** One key: at progress `[0]` (0–1) the property holds `[1]`: a number, or a colour for Ground and Ink. */\nexport type SceneKey = readonly [number, number | string];\n\nexport interface SceneTrack {\n    prop: SceneProp;\n    /** Ascending by progress. Between two keys the value eases (smoothstep); outside them it holds the nearest. */\n    keys: ReadonlyArray<SceneKey>;\n}\n\n/** What a node carries (both a builder node and a saved one). */\nexport interface SceneNodeSource {\n    role?: string | null;\n    /** How this layer moves, from the wide layout down to the phone's. */\n    sceneTracks?: ReadonlyArray<SceneTrack> | null;\n    /** How it moves at phone width instead (`SCENE_PHONE_MAX_WIDTH`). Absent = the same tracks. */\n    scenePhoneTracks?: ReadonlyArray<SceneTrack> | null;\n}\n\n/** A frame as inline-style properties (camelCase, as `CSSStyleDeclaration` and `Object.assign` take them). */\nexport interface SceneFrame {\n    transform?: string;\n    opacity?: string;\n    clipPath?: string;\n    backgroundColor?: string;\n    color?: string;\n}\n\nexport enum SceneAttribute {\n    Root = 'data-iox-scene',\n    Tracks = 'data-iox-tracks',\n    PhoneTracks = 'data-iox-tracks-phone',\n}\n\n/** At or under this stage width a layer plays its phone tracks. The `mobile` breakpoint's width. */\nexport const SCENE_PHONE_MAX_WIDTH = 767;\n\nconst DECIMALS = 10000;\nconst round = (v: number): number => Math.round(v * DECIMALS) / DECIMALS;\nconst clamp01 = (v: number): number => Math.min(1, Math.max(0, v));\nconst smoothstep = (t: number): number => t * t * (3 - 2 * t);\n\n/** A colour a track may hold: a hex, an rgb()/hsl() literal, or a design token. Anything else could break out of the\n *  inline style it lands in. */\nconst COLOUR = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\\([\\d\\s.,%/]+\\)|var\\(--iox-[\\w-]+\\))$/i;\nconst COLOUR_PROPS: ReadonlySet<SceneProp> = new Set([SceneProp.Ground, SceneProp.Ink]);\nconst ALL_PROPS: ReadonlySet<string> = new Set(Object.values(SceneProp));\n\nfunction validKey(key: unknown, colour: boolean): key is SceneKey {\n    if (!Array.isArray(key) || key.length !== 2) return false;\n    const [p, value] = key;\n    if (typeof p !== 'number' || !Number.isFinite(p) || p < 0 || p > 1) return false;\n    return colour ? typeof value === 'string' && COLOUR.test(value) : typeof value === 'number' && Number.isFinite(value);\n}\n\n/**\n * The tracks a saved value really holds: unknown properties, bad keys and colours that are not colours are dropped,\n * keys sorted by progress, a track left with no key dropped. Never throws on what a page document holds.\n */\nexport function normalizeTracks(tracks: unknown): SceneTrack[] {\n    if (!Array.isArray(tracks)) return [];\n    const out: SceneTrack[] = [];\n    for (const track of tracks) {\n        const prop = (track as SceneTrack | null)?.prop;\n        if (!prop || !ALL_PROPS.has(prop) || !Array.isArray((track as SceneTrack).keys)) continue;\n        const keys = (track as SceneTrack).keys\n            .filter(key => validKey(key, COLOUR_PROPS.has(prop)))\n            .slice()\n            .sort((a, b) => a[0] - b[0]);\n        if (keys.length) out.push({ prop, keys });\n    }\n    return out;\n}\n\n/** The two keys around `p` and how far between them it eases. */\nfunction span(keys: ReadonlyArray<SceneKey>, p: number): { a: SceneKey; b: SceneKey; f: number } {\n    const at = clamp01(p);\n    if (at <= keys[0][0]) return { a: keys[0], b: keys[0], f: 0 };\n    for (let i = 1; i < keys.length; i++) {\n        if (at <= keys[i][0]) {\n            const a = keys[i - 1];\n            const b = keys[i];\n            const width = b[0] - a[0];\n            return { a, b, f: width > 0 ? smoothstep((at - a[0]) / width) : 1 };\n        }\n    }\n    const last = keys[keys.length - 1];\n    return { a: last, b: last, f: 0 };\n}\n\n/** A numeric track's value at progress `p`. */\nexport function valueAt(keys: ReadonlyArray<SceneKey>, p: number): number {\n    if (!keys.length) return 0;\n    const { a, b, f } = span(keys, p);\n    const from = Number(a[1]);\n    return round(from + (Number(b[1]) - from) * f);\n}\n\n/**\n * A colour track's value at progress `p`. Mixed by the browser, never computed here, so a design token stays a live\n * reference (a re-theme reaches a Scene, as it reaches every saved page) and the path is perceptual.\n */\nexport function colourAt(keys: ReadonlyArray<SceneKey>, p: number): string {\n    if (!keys.length) return '';\n    const { a, b, f } = span(keys, p);\n    if (f <= 0 || a === b) return String(a[1]);\n    if (f >= 1) return String(b[1]);\n    return `color-mix(in oklab, ${a[1]} ${round((1 - f) * 100)}%, ${b[1]})`;\n}\n\nexport interface SceneFrameOptions {\n    /** -1 when the stage reads right-to-left: the inline axis mirrors. */\n    inlineSign?: 1 | -1;\n}\n\n/** What the tracks' transform-family properties rest at when a layer has no track for one. */\nconst TRANSFORM_REST: Readonly<Partial<Record<SceneProp, number>>> = { [SceneProp.X]: 0, [SceneProp.Y]: 0, [SceneProp.Scale]: 1, [SceneProp.Rotate]: 0 };\n\n/**\n * A layer's frame at progress `p`. Lengths are container-query units, so one frame is right at any width, under any\n * canvas zoom, on the server and with no measuring: the stage is the size container (`iox-design.css`).\n */\nexport function sceneFrame(tracks: ReadonlyArray<SceneTrack>, p: number, options: SceneFrameOptions = {}): SceneFrame {\n    const frame: SceneFrame = {};\n    const moves: Partial<Record<SceneProp, number>> = {};\n    for (const { prop, keys } of tracks) {\n        if (prop in TRANSFORM_REST) moves[prop] = valueAt(keys, p);\n        else if (prop === SceneProp.Opacity) frame.opacity = String(clamp01(valueAt(keys, p)));\n        else if (prop === SceneProp.Clip) frame.clipPath = `inset(${Math.min(50, Math.max(0, valueAt(keys, p)))}%)`;\n        else if (prop === SceneProp.Ground) frame.backgroundColor = colourAt(keys, p);\n        else if (prop === SceneProp.Ink) frame.color = colourAt(keys, p);\n    }\n    if (Object.keys(moves).length) {\n        const value = (prop: SceneProp): number => moves[prop] ?? TRANSFORM_REST[prop]!;\n        const x = round(value(SceneProp.X) * (options.inlineSign ?? 1));\n        frame.transform = `translate3d(${x}cqw, ${value(SceneProp.Y)}cqh, 0) rotate(${value(SceneProp.Rotate)}deg) scale(${value(SceneProp.Scale)})`;\n    }\n    return frame;\n}\n\nconst CSS_NAME: Readonly<Record<keyof SceneFrame, string>> = {\n    transform: 'transform',\n    opacity: 'opacity',\n    clipPath: 'clip-path',\n    backgroundColor: 'background-color',\n    color: 'color',\n};\n\n/** A frame as kebab-case style declarations, for a string renderer. */\nexport function sceneFrameDeclarations(frame: SceneFrame): Record<string, string> {\n    const out: Record<string, string> = {};\n    for (const [key, value] of Object.entries(frame)) if (value) out[CSS_NAME[key as keyof SceneFrame]] = value;\n    return out;\n}\n\n/** The attributes a node's own element carries — the same decision in all three render paths. The runtime reads them,\n *  so it needs no node tree and is the same on every path. Empty for any node that is no part of a Scene. */\nexport function sceneNodeAttributes(node: SceneNodeSource | null | undefined): Record<string, string> {\n    const attrs: Record<string, string> = {};\n    if (node?.role === SceneRole.Scene) attrs[SceneAttribute.Root] = '';\n    const tracks = normalizeTracks(node?.sceneTracks);\n    const phone = normalizeTracks(node?.scenePhoneTracks);\n    if (tracks.length) attrs[SceneAttribute.Tracks] = JSON.stringify(tracks);\n    if (phone.length) attrs[SceneAttribute.PhoneTracks] = JSON.stringify(phone);\n    return attrs;\n}\n\n/** The frame a layer ships in from the server: where it stands before anyone has scrolled. Without it the page would\n *  paint every layer at once, and then jump when the script arrives. */\nexport function sceneFirstFrame(node: SceneNodeSource | null | undefined): SceneFrame {\n    return sceneFrame(normalizeTracks(node?.sceneTracks), 0);\n}\n\n/**\n * Make an element carry its node's Scene attributes: the live sync on the canvas and the component path's stamp.\n * Removes stale ones, touches nothing else.\n */\nexport function syncSceneAttributes(el: HTMLElement | null | undefined, node: SceneNodeSource | null | undefined): void {\n    if (!el?.setAttribute) return;\n    const attrs = sceneNodeAttributes(node);\n    for (const name of Object.values(SceneAttribute)) {\n        if (name in attrs) el.setAttribute(name, attrs[name]);\n        else el.removeAttribute(name);\n    }\n}\n\n/** Stamp a layer's first frame on its element (the component path, on the server too). */\nexport function applySceneFirstFrame(el: HTMLElement | null | undefined, node: SceneNodeSource | null | undefined): void {\n    if (!el?.style) return;\n    for (const [name, value] of Object.entries(sceneFrameDeclarations(sceneFirstFrame(node)))) el.style.setProperty(name, value);\n}\n\n/**\n * Where nothing will drive it (reduced motion, no script) a Scene is ordinary content: it flows, every layer in its\n * place and in its own look, every word readable. `!important` because it must beat a node's compiled height and\n * position, and the inline first frame. The engine wraps it in a reduced-motion query and in `<noscript>`.\n */\nexport const SCENE_FLOW_RULES = `.iox-role-scene{height:auto!important}`\n    + `.iox-role-scene-stage{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;container-type:normal!important}`\n    + `[${SceneAttribute.Tracks}]{transform:none!important;opacity:1!important;clip-path:none!important}`;\n\n/** Under reduced motion the driver never starts, so the same rules hold for the whole visit. */\nexport const SCENE_REDUCED_MOTION_CSS = `@media (prefers-reduced-motion: reduce){${SCENE_FLOW_RULES}}`;\n","import { CompositeNode, CompositeNodeFactory, makeCompositePart, NO_ELEMENT_STYLE, SceneRole, writeLayerStyles, writeStyles } from '@vectoriox/iox-ui/composite-core';\n\nimport { SceneNodeSource, SceneProp, SceneTrack } from './scene';\n\n/**\n * The SCENE recipe: ordinary nodes, no new type, so all three render paths and every panel already know it.\n *\n *   Section    role scene         height = how long it plays (× the viewport)\n *   └─ Container  role scene.stage   pinned, one viewport tall, clips its layers, the size container for their lengths\n *       ├─ Heading                   a layer with its own tracks\n *       └─ Text                      a layer with its own tracks\n *\n * How long it plays IS the root's height, so it follows the width system the way every other size does. The stage is a\n * track-carrying layer too: its Ground is the colour the whole Scene moves through.\n */\n\nexport type SceneLayerNode = CompositeNode & SceneNodeSource;\n\nexport interface SceneWords {\n    title: string;\n    line: string;\n}\n\n/** Generic words a fresh Scene starts with: the author's to replace. */\nexport const SCENE_WORDS: Readonly<SceneWords> = {\n    title: 'One idea, held still',\n    line: 'The page keeps moving. This stays until you have read it.',\n};\n\n/** How long a fresh Scene plays: 4 viewports wide, 3 on a phone (a thumb travels less). */\nexport const SCENE_LENGTH = '400vh';\nexport const SCENE_PHONE_LENGTH = '300vh';\n/** Small viewport height: a phone's toolbar never pushes the stage's bottom out of sight. */\nexport const SCENE_STAGE_HEIGHT = '100svh';\nconst PHONE_BREAKPOINT = 'mobile';\nconst TITLE_LEVEL = 'h2';\n\nenum Type {\n    Section = 'Section',\n    Container = 'Container',\n    Heading = 'Heading',\n    Text = 'Text',\n}\n\nconst ROOT_LAYOUT: Readonly<Record<string, string>> = {\n    position: 'relative',\n    display: 'block',\n    width: '100%',\n    height: SCENE_LENGTH,\n};\n\nconst STAGE_LAYOUT: Readonly<Record<string, string>> = {\n    position: 'sticky',\n    top: '0px',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '100%',\n    height: SCENE_STAGE_HEIGHT,\n    overflow: 'hidden',\n};\n\nconst TITLE_TRACKS: ReadonlyArray<SceneTrack> = [\n    { prop: SceneProp.Opacity, keys: [[0, 0], [0.2, 1], [0.75, 1], [1, 0]] },\n    { prop: SceneProp.Y, keys: [[0, 8], [0.2, 0], [1, -6]] },\n    { prop: SceneProp.Scale, keys: [[0, 0.96], [0.6, 1], [1, 1.04]] },\n];\n\nconst LINE_TRACKS: ReadonlyArray<SceneTrack> = [\n    { prop: SceneProp.Opacity, keys: [[0.25, 0], [0.45, 1], [0.8, 1], [1, 0]] },\n    { prop: SceneProp.Y, keys: [[0.25, 6], [0.45, 0], [1, -4]] },\n];\n\nconst STAGE_TRACKS: ReadonlyArray<SceneTrack> = [\n    { prop: SceneProp.Ground, keys: [[0, 'var(--iox-surface-2)'], [0.6, 'var(--iox-page-bg)']] },\n];\n\nconst copyTracks = (tracks: ReadonlyArray<SceneTrack>): SceneTrack[] => tracks.map(t => ({ prop: t.prop, keys: t.keys.map(k => [k[0], k[1]] as const) }));\n\n/** A fresh Scene: it already moves, so the author sees what the thing is before touching it. */\nexport function buildSceneRecipe(create: CompositeNodeFactory, words: Partial<SceneWords> = {}): SceneLayerNode {\n    const text = { ...SCENE_WORDS, ...words };\n    const root = makeCompositePart(create, { key: 'root', type: Type.Section, elementStyle: NO_ELEMENT_STYLE }, SceneRole.Scene, 'Scene', ROOT_LAYOUT) as SceneLayerNode;\n    writeLayerStyles(root, PHONE_BREAKPOINT, { height: SCENE_PHONE_LENGTH });\n\n    const stage = makeCompositePart(create, { key: 'stage', type: Type.Container, elementStyle: NO_ELEMENT_STYLE }, SceneRole.Stage, 'Stage', STAGE_LAYOUT) as SceneLayerNode;\n    stage.sceneTracks = copyTracks(STAGE_TRACKS);\n\n    const title = makeCompositePart(create, { key: 'title', type: Type.Heading, props: { content: text.title, level: TITLE_LEVEL } }, null, 'Title') as SceneLayerNode;\n    title.sceneTracks = copyTracks(TITLE_TRACKS);\n    writeStyles(title, { textAlign: 'center' });\n\n    const line = makeCompositePart(create, { key: 'line', type: Type.Text, props: { content: text.line, tag: 'p' } }, null, 'Line') as SceneLayerNode;\n    line.sceneTracks = copyTracks(LINE_TRACKS);\n    writeStyles(line, { textAlign: 'center' });\n\n    stage.children = [title, line];\n    root.children = [stage];\n    return root;\n}\n","import { SceneRole } from '@vectoriox/iox-ui/composite-core';\n\nimport { normalizeTracks, SCENE_PHONE_MAX_WIDTH, SceneAttribute, sceneFrame, SceneFrame, SceneTrack } from './scene';\n\n/**\n * The ONE scroll loop (premium-sites plan §5b, SC0). Every Scene on a page reads one progress value from it, on the\n * canvas and on the live site alike. It reads where the root is and nothing else, so it has one code path: under the\n * canvas's zoom the same rectangle divides by the same zoom, and the answer is the same at any scale.\n *\n * - The value is DAMPED: the scroll stops and the page settles a moment later. This is much of the prototype's weight,\n *   and why this is not a CSS scroll timeline, which cannot do it.\n * - The live site pins with `position: sticky`, on the compositor. The canvas cannot (its page never scrolls itself,\n *   its Lenis scrolls a wrapper around a zoomed frame), so `pin` holds the stage there with `translate` instead.\n *   `translate`, not `transform`: a Stage may carry tracks of its own.\n * - It sleeps. No frame is asked for unless something moved, so a page holding a settled Scene costs nothing.\n * - Reads come first in a frame and writes after, and a write only ever touches compositor properties.\n */\n\nexport const SCENE_DAMPING = 9;\nconst SETTLED = 0.0005;\nconst MAX_FRAME_SECONDS = 0.1;\n/** The first frame after a sleep has no previous one to measure from: it counts as one frame, or a scroll would lose it. */\nconst WAKING_FRAME_SECONDS = 1 / 60;\nconst STAGE_SELECTOR = `.iox-role-${SceneRole.Stage.replace(/\\./g, '-')}`;\nconst TRANSFORM_WILL_CHANGE = 'transform, opacity';\n\n/** One frame of the damping: frame-rate independent, so 60 Hz and 120 Hz settle in the same time. */\nexport function dampToward(current: number, target: number, seconds: number, rate: number = SCENE_DAMPING): number {\n    return current + (target - current) * (1 - Math.exp(-seconds * rate));\n}\n\n/** Where a root stands: scrolled `local` page px into its `travel`. `zoom` undoes the canvas's scale. */\nexport function sceneScrollState(rootTop: number, originTop: number, zoom: number, travel: number): { local: number; progress: number } {\n    if (travel <= 0) return { local: 0, progress: 0 };\n    const local = Math.min(travel, Math.max(0, -(rootTop - originTop) / (zoom || 1)));\n    return { local, progress: local / travel };\n}\n\nexport interface ScrollDriverOptions {\n    /** Hold the stage with `translate` (the canvas). The live site's stage is sticky and needs nothing. */\n    pin?: boolean;\n    /** The element a root scrolls under, when that is not the window (the canvas's frame, Preview's page). */\n    originOf?: (root: HTMLElement) => HTMLElement | null;\n    /** Follow what changes inside a root: tracks edited, layers added (the canvas). */\n    observe?: boolean;\n    damping?: number;\n    /** The window, for a test. */\n    host?: Window;\n}\n\ninterface Layer {\n    el: HTMLElement;\n    tracks: SceneTrack[];\n    phoneTracks: SceneTrack[];\n    last: SceneFrame;\n}\n\ninterface Scene {\n    root: HTMLElement;\n    stage: HTMLElement | null;\n    layers: Layer[];\n    progress: number;\n    /** Page px and the stage's own width, measured when something resizes and never per frame. */\n    height: number;\n    travel: number;\n    phone: boolean;\n    inlineSign: 1 | -1;\n    /** No frame written yet: the first one lands exactly where the scroll is, with no glide. */\n    fresh: boolean;\n    mutations: MutationObserver | null;\n}\n\nfunction parseTracks(raw: string | null): SceneTrack[] {\n    if (!raw) return [];\n    try { return normalizeTracks(JSON.parse(raw)); } catch { return []; }\n}\n\nexport class ScrollDriver {\n    private readonly scenes = new Map<HTMLElement, Scene>();\n    private readonly host: Window;\n    private readonly resize: ResizeObserver | null;\n    private frame = 0;\n    private lastTime = 0;\n    private readonly wakeUp = (): void => this.wake();\n\n    constructor(private readonly options: ScrollDriverOptions = {}) {\n        this.host = options.host ?? window;\n        // In capture: a scroll does not bubble, and the canvas's Lenis scrolls an element, not the window.\n        this.host.addEventListener('scroll', this.wakeUp, { capture: true, passive: true });\n        this.host.addEventListener('resize', this.wakeUp, { passive: true });\n        const Observer = (this.host as Window & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;\n        this.resize = Observer ? new Observer(() => this.remeasureAll()) : null;\n    }\n\n    /** Drive a Scene's root. Idempotent: adding a root again re-reads it. */\n    add(root: HTMLElement): void {\n        this.remove(root);\n        const scene: Scene = { root, stage: null, layers: [], progress: 0, height: 0, travel: 0, phone: false, inlineSign: 1, fresh: true, mutations: null };\n        this.scenes.set(root, scene);\n        this.resize?.observe(root);\n        if (this.options.observe) {\n            const Observer = (this.host as Window & { MutationObserver?: typeof MutationObserver }).MutationObserver;\n            if (Observer) {\n                scene.mutations = new Observer(() => this.reread(scene));\n                scene.mutations.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: [SceneAttribute.Tracks, SceneAttribute.PhoneTracks] });\n            }\n        }\n        this.reread(scene);\n    }\n\n    remove(root: HTMLElement): void {\n        const scene = this.scenes.get(root);\n        if (!scene) return;\n        scene.mutations?.disconnect();\n        this.resize?.unobserve(root);\n        if (scene.stage) scene.stage.style.removeProperty('translate');\n        for (const layer of scene.layers) layer.el.style.removeProperty('will-change');\n        this.scenes.delete(root);\n    }\n\n    /** The damped progress a root's layers stand at. */\n    progressOf(root: HTMLElement): number | null {\n        return this.scenes.get(root)?.progress ?? null;\n    }\n\n    /** Something moved that no scroll or resize announces (the canvas's zoom). */\n    wake(): void {\n        if (this.frame) return;\n        this.frame = this.host.requestAnimationFrame(this.tick);\n    }\n\n    destroy(): void {\n        if (this.frame) this.host.cancelAnimationFrame(this.frame);\n        this.frame = 0;\n        this.host.removeEventListener('scroll', this.wakeUp, { capture: true });\n        this.host.removeEventListener('resize', this.wakeUp);\n        for (const root of [...this.scenes.keys()]) this.remove(root);\n        this.resize?.disconnect();\n    }\n\n    /** Read a root's stage and layers from its DOM: its own Scene's only, never a nested one's. */\n    private reread(scene: Scene): void {\n        scene.stage = scene.root.querySelector<HTMLElement>(STAGE_SELECTOR);\n        scene.layers = Array.from(scene.root.querySelectorAll<HTMLElement>(`[${SceneAttribute.Tracks}], [${SceneAttribute.PhoneTracks}]`))\n            .filter(el => el === scene.root || el.parentElement?.closest(`[${SceneAttribute.Root}]`) === scene.root)\n            .map(el => this.readLayer(el, scene));\n        this.measure(scene);\n        scene.fresh = true;\n        this.wake();\n    }\n\n    private readLayer(el: HTMLElement, scene: Scene): Layer {\n        const previous = scene.layers.find(layer => layer.el === el);\n        el.style.setProperty('will-change', TRANSFORM_WILL_CHANGE);\n        return { el, tracks: parseTracks(el.getAttribute(SceneAttribute.Tracks)), phoneTracks: parseTracks(el.getAttribute(SceneAttribute.PhoneTracks)), last: previous?.last ?? {} };\n    }\n\n    private remeasureAll(): void {\n        for (const scene of this.scenes.values()) this.measure(scene);\n        this.wake();\n    }\n\n    private measure(scene: Scene): void {\n        scene.height = scene.root.offsetHeight;\n        scene.travel = Math.max(0, scene.height - (scene.stage?.offsetHeight ?? scene.height));\n        scene.phone = (scene.stage?.offsetWidth ?? Infinity) <= SCENE_PHONE_MAX_WIDTH;\n        scene.inlineSign = scene.stage && this.host.getComputedStyle(scene.stage).direction === 'rtl' ? -1 : 1;\n        for (const layer of scene.layers) layer.last = {};\n    }\n\n    private readonly tick = (now: number): void => {\n        this.frame = 0;\n        const seconds = this.lastTime ? Math.min(MAX_FRAME_SECONDS, (now - this.lastTime) / 1000) : WAKING_FRAME_SECONDS;\n        this.lastTime = now;\n        const reads = [...this.scenes.values()].map(scene => this.read(scene));\n        let moving = false;\n        for (const { scene, local, target } of reads) {\n            if (this.options.pin && scene.stage) scene.stage.style.setProperty('translate', `0 ${local}px`);\n            const next = scene.fresh ? target : dampToward(scene.progress, target, seconds, this.options.damping);\n            const settled = Math.abs(next - target) < SETTLED;\n            scene.progress = settled ? target : next;\n            scene.fresh = false;\n            this.write(scene);\n            moving = moving || !settled;\n        }\n        if (moving) this.wake();\n        else this.lastTime = 0;\n    };\n\n    private read(scene: Scene): { scene: Scene; local: number; target: number } {\n        const rect = scene.root.getBoundingClientRect();\n        const origin = this.options.originOf?.(scene.root)?.getBoundingClientRect().top ?? 0;\n        const zoom = scene.height ? rect.height / scene.height : 1;\n        const { local, progress } = sceneScrollState(rect.top, origin, zoom, scene.travel);\n        return { scene, local, target: progress };\n    }\n\n    private write(scene: Scene): void {\n        for (const layer of scene.layers) {\n            const tracks = scene.phone && layer.phoneTracks.length ? layer.phoneTracks : layer.tracks;\n            const frame = sceneFrame(tracks, scene.progress, { inlineSign: scene.inlineSign });\n            for (const key of Object.keys(frame) as (keyof SceneFrame)[]) {\n                if (frame[key] !== layer.last[key]) layer.el.style[key] = frame[key]!;\n            }\n            layer.last = frame;\n        }\n    }\n}\n\n/** A page's Scenes, driven by one driver; null when it holds none, or when the visitor asked for less motion (the\n *  page's own CSS then lets each Scene flow). The live site's door. */\nexport function attachScenes(container: HTMLElement, options: ScrollDriverOptions = {}): ScrollDriver | null {\n    const roots = container.querySelectorAll<HTMLElement>(`[${SceneAttribute.Root}]`);\n    if (!roots.length) return null;\n    const host = options.host ?? window;\n    if (host.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return null;\n    const driver = new ScrollDriver(options);\n    roots.forEach(root => driver.add(root));\n    return driver;\n}\n","/**\n * @vectoriox/iox-ui/scene-core — a Scene: a stage that holds still while the page scrolls past it, its layers moving on\n * ONE progress value (premium-sites plan §5b). FRAMEWORK-FREE: the builder canvas, both engine paths and (from SC6) the\n * composer read the same tracks, frames and recipe; the driver is DOM-only and is the ONE scroll loop.\n * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.\n */\nexport * from './scene';\nexport * from './scene-recipe';\nexport * from './scroll-driver';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/vectoriox-iox-ui.mjs

@@ -1828,8 +1828,8 @@ const CURRENT_LINK_TYPES = ['Link', 'LinkedContainer', 'ButtonBlock'];
  */
 function rewriteViewportUnits(value) {
     return value
-        .replace(/(-?\d*\.?\d+)vh/g, 'calc($1 * var(--preview-vh, 1vh))')
-        .replace(/(-?\d*\.?\d+)vw/g, 'calc($1 * var(--preview-vw, 1vw))');
+        .replace(/(-?\d*\.?\d+)([sdl]?)vh/g, 'calc($1 * var(--preview-vh, 1$2vh))')
+        .replace(/(-?\d*\.?\d+)([sdl]?)vw/g, 'calc($1 * var(--preview-vw, 1$2vw))');
 }
 /**
  * kebab CSS property → the value that equals its CSS initial AND has no UA-stylesheet override for