@energy8platform/game-engine 0.33.2 → 0.33.4

package/dist/scene.cjs.js

@@ -0,0 +1,3626 @@
+'use strict';
+
+var pixi_js = require('pixi.js');
+
+// Pure layout core for scene-IR.
+//
+// `resolveLayoutRule` turns one LayoutRule into a Placement given a context of already
+// laid-out rects. It is renderer-free and side-effect-free so every positioning idiom the
+// games hand-rolled (viewport fractions, frame-hollow binding, cell badges, pins) is unit
+// tested without Pixi. The interpreter (engine.ts) owns pass ordering; this module owns math.
+function orientationOf(width, height, portraitFactor = 1) {
+    return width < height * portraitFactor ? 'portrait' : 'landscape';
+}
+/** Base node + orientation override + active state override (state wins), for one frame. */
+function effectiveNode(node, orientation, state) {
+    const layers = [
+        node.responsive?.[orientation],
+        state ? node.states?.[state] : undefined,
+    ];
+    let layout = node.layout;
+    let props = { ...(node.props ?? {}) };
+    let visible = true;
+    for (const layer of layers) {
+        if (!layer)
+            continue;
+        if (layer.layout)
+            layout = layer.layout;
+        if (layer.props)
+            props = { ...props, ...layer.props };
+        if (layer.visible !== undefined)
+            visible = layer.visible;
+    }
+    return { layout, props, visible };
+}
+/** Which node id (if any) must be laid out before this rule can resolve. */
+function dependencyOf(rule) {
+    if (!rule)
+        return undefined;
+    switch (rule.mode) {
+        case 'frame-fraction':
+            return rule.frame;
+        case 'pin':
+            return rule.to;
+        case 'grid-cell':
+            return rule.grid; // undefined = sole grid; the engine resolves that alias itself
+        default:
+            return undefined;
+    }
+}
+function edgePoint(rect, edge) {
+    const xs = { left: rect.x, center: rect.x + rect.width / 2, right: rect.x + rect.width };
+    const ys = { top: rect.y, center: rect.y + rect.height / 2, bottom: rect.y + rect.height };
+    const [v, h] = edge === 'center' ? ['center', 'center'] : edge.split('-');
+    return { x: xs[h], y: ys[v] };
+}
+/** AABB of a placement over a natural content size (rotation ignored — pin targets should not rotate). */
+function placementBounds(p, natural) {
+    const width = natural.width * p.scaleX;
+    const height = natural.height * p.scaleY;
+    return { x: p.x - p.anchor[0] * width, y: p.y - p.anchor[1] * height, width, height };
+}
+function viewportRatio(ctx, mode) {
+    const rw = ctx.viewport.width / ctx.design.width;
+    const rh = ctx.viewport.height / ctx.design.height;
+    switch (mode) {
+        case 'width':
+            return rw;
+        case 'height':
+            return rh;
+        case 'min':
+            return Math.min(rw, rh);
+        case 'max':
+            return Math.max(rw, rh);
+    }
+}
+function withNudge(p, rule) {
+    const nx = rule.pxNudge?.x ?? 0;
+    const ny = rule.pxNudge?.y ?? 0;
+    const rotation = rule.rotation ?? p.rotation;
+    return { ...p, x: p.x + nx, y: p.y + ny, rotation };
+}
+const CENTER = [0.5, 0.5];
+const TOP_LEFT = [0, 0];
+/**
+ * Resolve one rule. Returns `waitingFor` when a referenced node has no bounds yet — the
+ * engine re-queues the node for the next pass (bounded; see engine).
+ */
+function resolveLayoutRule(rule, natural, ctx) {
+    switch (rule.mode) {
+        case 'absolute': {
+            const s = rule.scale ?? 1;
+            return {
+                placement: withNudge({
+                    x: rule.x,
+                    y: rule.y,
+                    scaleX: s,
+                    scaleY: s,
+                    rotation: rule.rotation ?? 0,
+                    anchor: rule.anchor ?? TOP_LEFT,
+                }, rule),
+            };
+        }
+        case 'viewport-fraction': {
+            let scaleX = (rule.scale ?? 1) * (rule.scaleWith ? viewportRatio(ctx, rule.scaleWith) : 1);
+            let scaleY = scaleX;
+            if ((rule.widthFrac !== undefined || rule.heightFrac !== undefined) && natural.width > 0 && natural.height > 0) {
+                const byWidth = rule.widthFrac !== undefined ? (ctx.viewport.width * rule.widthFrac) / natural.width : Infinity;
+                const byHeight = rule.heightFrac !== undefined ? (ctx.viewport.height * rule.heightFrac) / natural.height : Infinity;
+                if (rule.fit === 'stretch' && rule.widthFrac !== undefined && rule.heightFrac !== undefined) {
+                    scaleX = byWidth * (rule.scale ?? 1);
+                    scaleY = byHeight * (rule.scale ?? 1);
+                }
+                else {
+                    scaleX = scaleY = Math.min(byWidth, byHeight) * (rule.scale ?? 1);
+                }
+            }
+            return {
+                placement: withNudge({
+                    x: ctx.viewport.width * rule.xFrac,
+                    y: ctx.viewport.height * rule.yFrac,
+                    scaleX,
+                    scaleY,
+                    rotation: 0,
+                    anchor: rule.anchor ?? TOP_LEFT,
+                }, rule),
+            };
+        }
+        case 'cover': {
+            const s = (natural.width > 0 && natural.height > 0
+                ? Math.max(ctx.viewport.width / natural.width, ctx.viewport.height / natural.height)
+                : 1) * (rule.scale ?? 1);
+            return {
+                placement: withNudge({
+                    x: ctx.viewport.width / 2,
+                    y: ctx.viewport.height / 2,
+                    scaleX: s,
+                    scaleY: s,
+                    rotation: 0,
+                    anchor: CENTER,
+                }, rule),
+            };
+        }
+        case 'frame-fraction': {
+            const base = rule.use === 'inner' ? ctx.innerRect(rule.frame) : ctx.bounds(rule.frame);
+            if (!base)
+                return { waitingFor: rule.frame };
+            const x0 = base.x + (rule.xFrac ?? 0) * base.width;
+            const y0 = base.y + (rule.yFrac ?? 0) * base.height;
+            // A box is targeted when explicit wFrac/hFrac are given, or `use:'inner'` without
+            // explicit fractions (the whole hollow is the box — the reel-grid binding).
+            const boxW = rule.wFrac !== undefined ? base.width * rule.wFrac : rule.use === 'inner' ? base.width : undefined;
+            const boxH = rule.hFrac !== undefined ? base.height * rule.hFrac : rule.use === 'inner' ? base.height : undefined;
+            if (boxW === undefined && boxH === undefined) {
+                return {
+                    placement: withNudge({ x: x0, y: y0, scaleX: 1, scaleY: 1, rotation: 0, anchor: rule.anchor ?? CENTER }, rule),
+                };
+            }
+            if (boxW === undefined || boxH === undefined) {
+                // One-dimension box: uniform scale from that dimension, anchor-point placement
+                // (the "meter bar is 32% of the frame's width" idiom).
+                const s = boxW !== undefined
+                    ? natural.width > 0
+                        ? boxW / natural.width
+                        : 1
+                    : natural.height > 0
+                        ? boxH / natural.height
+                        : 1;
+                return {
+                    placement: withNudge({ x: x0, y: y0, scaleX: s, scaleY: s, rotation: 0, anchor: rule.anchor ?? CENTER }, rule),
+                };
+            }
+            let scaleX = 1;
+            let scaleY = 1;
+            if (natural.width > 0 && natural.height > 0) {
+                if (rule.fit === 'stretch') {
+                    scaleX = boxW / natural.width;
+                    scaleY = boxH / natural.height;
+                }
+                else {
+                    scaleX = scaleY = Math.min(boxW / natural.width, boxH / natural.height);
+                }
+            }
+            return {
+                placement: withNudge({
+                    x: x0 + boxW / 2,
+                    y: y0 + boxH / 2,
+                    scaleX,
+                    scaleY,
+                    rotation: 0,
+                    anchor: rule.anchor ?? CENTER,
+                    box: { width: boxW, height: boxH },
+                }, rule),
+            };
+        }
+        case 'grid-cell': {
+            const point = ctx.gridCell(rule.grid, rule.col, rule.row);
+            if (!point)
+                return { waitingFor: rule.grid ?? '@grid' };
+            const gridScale = rule.scaleWithGrid === false ? undefined : ctx.gridScale(rule.grid);
+            const s = rule.scale ?? 1;
+            return {
+                placement: withNudge({
+                    x: point.x,
+                    y: point.y,
+                    scaleX: s * (gridScale?.x ?? 1),
+                    scaleY: s * (gridScale?.y ?? 1),
+                    rotation: 0,
+                    anchor: rule.anchor ?? CENTER,
+                }, rule),
+            };
+        }
+        case 'pin': {
+            const rect = ctx.bounds(rule.to);
+            if (!rect)
+                return { waitingFor: rule.to };
+            const point = edgePoint(rect, rule.edge);
+            const s = rule.scale ?? 1;
+            return {
+                placement: withNudge({
+                    x: point.x + (rule.offset?.[0] ?? 0),
+                    y: point.y + (rule.offset?.[1] ?? 0),
+                    scaleX: s,
+                    scaleY: s,
+                    rotation: 0,
+                    anchor: rule.anchor ?? CENTER,
+                }, rule),
+            };
+        }
+    }
+}
+/**
+ * Evaluate a `visibleWhen` micro-expression: `<var> <op> <literal>` with
+ * `=== !== >= <= > <`. Unknown shapes evaluate to visible (with the engine warning once) —
+ * richer conditions belong in flow or code, not in the scene doc.
+ */
+function evalVisibleWhen(expr, vars) {
+    const m = /^\s*([A-Za-z_$][\w$]*)\s*(===|!==|>=|<=|>|<)\s*(.+?)\s*$/.exec(expr);
+    if (!m)
+        return undefined;
+    const [, name, op, rawLit] = m;
+    let lit;
+    try {
+        lit = JSON.parse(rawLit.replace(/^'(.*)'$/s, '"$1"'));
+    }
+    catch {
+        return undefined;
+    }
+    const value = vars[name];
+    switch (op) {
+        case '===':
+            return value === lit;
+        case '!==':
+            return value !== lit;
+        case '>=':
+            return Number(value) >= Number(lit);
+        case '<=':
+            return Number(value) <= Number(lit);
+        case '>':
+            return Number(value) > Number(lit);
+        case '<':
+            return Number(value) < Number(lit);
+    }
+    return undefined;
+}
+
+// Scene contribution registry — the plugin seam of scene-IR.
+//
+// Every node `type` in a scene doc resolves through this registry: built-ins, official
+// plugins and game-local plugins register through the same `ScenePlugin` shape, so the
+// escape hatch and the plugin system are one mechanism (docs/slot-ide.md §6.2). A
+// contribution carries its runtime factory plus the metadata the tooling needs: a props
+// schema (validation + inspector autogen) and an `agentDoc` (the plugin's documentation
+// and the agent's prompt are the same text).
+/** Merge built-ins with plugin contributions; later plugins may override earlier kinds. */
+function createSceneRegistry(plugins = [], builtins = []) {
+    const nodeTypes = new Map();
+    const prefabs = new Map();
+    for (const contribution of builtins)
+        nodeTypes.set(contribution.kind, contribution);
+    for (const plugin of plugins) {
+        for (const contribution of plugin.nodeTypes ?? [])
+            nodeTypes.set(contribution.kind, contribution);
+        for (const prefab of plugin.prefabs ?? [])
+            prefabs.set(prefab.name, prefab);
+    }
+    return {
+        nodeType: (kind) => nodeTypes.get(kind),
+        prefab: (name) => prefabs.get(name),
+        kinds: () => [...nodeTypes.keys()],
+        prefabNames: () => [...prefabs.keys()],
+    };
+}
+
+/**
+ * Collection of easing functions for use with Tween and Timeline.
+ *
+ * All functions take a progress value t (0..1) and return the eased value.
+ */
+const Easing = {
+    linear: (t) => t,
+    easeInQuad: (t) => t * t,
+    easeOutQuad: (t) => t * (2 - t),
+    easeInOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    easeInCubic: (t) => t * t * t,
+    easeOutCubic: (t) => --t * t * t + 1,
+    easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+    easeInQuart: (t) => t * t * t * t,
+    easeOutQuart: (t) => 1 - --t * t * t * t,
+    easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+    easeInSine: (t) => 1 - Math.cos((t * Math.PI) / 2),
+    easeOutSine: (t) => Math.sin((t * Math.PI) / 2),
+    easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+    easeInExpo: (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10)),
+    easeOutExpo: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
+    easeInOutExpo: (t) => t === 0
+        ? 0
+        : t === 1
+            ? 1
+            : t < 0.5
+                ? Math.pow(2, 20 * t - 10) / 2
+                : (2 - Math.pow(2, -20 * t + 10)) / 2,
+    easeInBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return c3 * t * t * t - c1 * t * t;
+    },
+    easeOutBack: (t) => {
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    },
+    easeInOutBack: (t) => {
+        const c1 = 1.70158;
+        const c2 = c1 * 1.525;
+        return t < 0.5
+            ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
+            : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+    },
+    easeOutBounce: (t) => {
+        const n1 = 7.5625;
+        const d1 = 2.75;
+        if (t < 1 / d1)
+            return n1 * t * t;
+        if (t < 2 / d1)
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        if (t < 2.5 / d1)
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    },
+    easeInBounce: (t) => 1 - Easing.easeOutBounce(1 - t),
+    easeInOutBounce: (t) => t < 0.5
+        ? (1 - Easing.easeOutBounce(1 - 2 * t)) / 2
+        : (1 + Easing.easeOutBounce(2 * t - 1)) / 2,
+    easeOutElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    },
+    easeInElastic: (t) => {
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+            ? 0
+            : t === 1
+                ? 1
+                : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+    },
+};
+
+/**
+ * Lightweight tween system integrated with PixiJS Ticker.
+ * Zero external dependencies — no GSAP required.
+ *
+ * All tweens return a Promise that resolves on completion.
+ *
+ * @example
+ * ```ts
+ * // Fade in a sprite
+ * await Tween.to(sprite, { alpha: 1, y: 100 }, 500, Easing.easeOutBack);
+ *
+ * // Move and wait
+ * await Tween.to(sprite, { x: 500 }, 300);
+ *
+ * // From a starting value
+ * await Tween.from(sprite, { scale: 0, alpha: 0 }, 400);
+ * ```
+ */
+class Tween {
+    static _tweens = [];
+    static _tickerAdded = false;
+    /**
+     * Animate properties from current values to target values.
+     *
+     * @param target - Object to animate (Sprite, Container, etc.)
+     * @param props - Target property values
+     * @param duration - Duration in milliseconds
+     * @param easing - Easing function (default: easeOutQuad)
+     * @param onUpdate - Progress callback (0..1)
+     */
+    static to(target, props, duration, easing, onUpdate) {
+        // A destroyed (Pixi) target has null transform fields — skip rather than throw. This guards
+        // animations whose target is torn down mid-flight (e.g. a reel grid rebuilt during a spin).
+        if (target == null || target.destroyed)
+            return Promise.resolve();
+        return new Promise((resolve) => {
+            // Capture starting values
+            const from = {};
+            for (const key of Object.keys(props)) {
+                from[key] = Tween.getProperty(target, key);
+            }
+            const tween = {
+                target,
+                from,
+                to: { ...props },
+                duration: Math.max(1, duration),
+                easing: easing ?? Easing.easeOutQuad,
+                elapsed: 0,
+                delay: 0,
+                resolve,
+                onUpdate,
+            };
+            Tween._tweens.push(tween);
+            Tween.ensureTicker();
+        });
+    }
+    /**
+     * Animate properties from given values to current values.
+     */
+    static from(target, props, duration, easing, onUpdate) {
+        if (target == null || target.destroyed)
+            return Promise.resolve();
+        // Capture current values as "to"
+        const to = {};
+        for (const key of Object.keys(props)) {
+            to[key] = Tween.getProperty(target, key);
+            Tween.setProperty(target, key, props[key]);
+        }
+        return Tween.to(target, to, duration, easing, onUpdate);
+    }
+    /**
+     * Animate from one set of values to another.
+     */
+    static fromTo(target, fromProps, toProps, duration, easing, onUpdate) {
+        if (target == null || target.destroyed)
+            return Promise.resolve();
+        // Set starting values
+        for (const key of Object.keys(fromProps)) {
+            Tween.setProperty(target, key, fromProps[key]);
+        }
+        return Tween.to(target, toProps, duration, easing, onUpdate);
+    }
+    /**
+     * Wait for a given duration (useful in timelines).
+     * Uses PixiJS Ticker for consistent timing with other tweens.
+     */
+    static delay(ms) {
+        return new Promise((resolve) => {
+            let elapsed = 0;
+            const onTick = (ticker) => {
+                elapsed += ticker.deltaMS;
+                if (elapsed >= ms) {
+                    pixi_js.Ticker.shared.remove(onTick);
+                    resolve();
+                }
+            };
+            pixi_js.Ticker.shared.add(onTick);
+        });
+    }
+    /**
+     * Kill all tweens on a target.
+     */
+    static killTweensOf(target) {
+        Tween._tweens = Tween._tweens.filter((tw) => {
+            if (tw.target === target) {
+                tw.resolve();
+                return false;
+            }
+            return true;
+        });
+    }
+    /**
+     * Kill all active tweens.
+     */
+    static killAll() {
+        for (const tw of Tween._tweens) {
+            tw.resolve();
+        }
+        Tween._tweens.length = 0;
+    }
+    /** Number of active tweens */
+    static get activeTweens() {
+        return Tween._tweens.length;
+    }
+    /**
+     * Reset the tween system — kill all tweens and remove the ticker.
+     * Useful for cleanup between game instances, tests, or hot-reload.
+     */
+    static reset() {
+        for (const tw of Tween._tweens) {
+            tw.resolve();
+        }
+        Tween._tweens.length = 0;
+        if (Tween._tickerAdded) {
+            pixi_js.Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    }
+    // ─── Internal ──────────────────────────────────────────
+    static ensureTicker() {
+        if (Tween._tickerAdded)
+            return;
+        Tween._tickerAdded = true;
+        pixi_js.Ticker.shared.add(Tween.tick);
+    }
+    static tick = (ticker) => {
+        const dt = ticker.deltaMS;
+        const completed = [];
+        for (const tw of Tween._tweens) {
+            // target torn down mid-tween → finish it quietly
+            if (tw.target?.destroyed) {
+                completed.push(tw);
+                continue;
+            }
+            tw.elapsed += dt;
+            if (tw.elapsed < tw.delay)
+                continue;
+            const raw = Math.min((tw.elapsed - tw.delay) / tw.duration, 1);
+            const t = tw.easing(raw);
+            // Interpolate each property
+            for (const key of Object.keys(tw.to)) {
+                const start = tw.from[key];
+                const end = tw.to[key];
+                const value = start + (end - start) * t;
+                Tween.setProperty(tw.target, key, value);
+            }
+            tw.onUpdate?.(raw);
+            if (raw >= 1) {
+                completed.push(tw);
+            }
+        }
+        // Remove completed tweens
+        for (const tw of completed) {
+            const idx = Tween._tweens.indexOf(tw);
+            if (idx !== -1)
+                Tween._tweens.splice(idx, 1);
+            tw.resolve();
+        }
+        // Remove ticker when no active tweens
+        if (Tween._tweens.length === 0 && Tween._tickerAdded) {
+            pixi_js.Ticker.shared.remove(Tween.tick);
+            Tween._tickerAdded = false;
+        }
+    };
+    /**
+     * Get a potentially nested property (supports 'scale.x', 'position.y', etc.)
+     */
+    static getProperty(target, key) {
+        const parts = key.split('.');
+        let obj = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj?.[parts[i]];
+        }
+        return obj?.[parts[parts.length - 1]] ?? 0;
+    }
+    /**
+     * Set a potentially nested property.
+     */
+    static setProperty(target, key, value) {
+        const parts = key.split('.');
+        let obj = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            obj = obj?.[parts[i]];
+        }
+        if (obj == null)
+            return;
+        obj[parts[parts.length - 1]] = value;
+    }
+}
+
+const DEFAULT_STYLE = {
+    radius: 8,
+    idle: { color: 0x223047, alpha: 0.34 },
+    winning: { color: 0x00d4ff, alpha: 0.95 },
+    removed: { color: 0x223047, alpha: 0.12 },
+    fresh: { color: 0xffffff, alpha: 0.6 },
+};
+const cellDims = (size) => typeof size === 'number' ? { width: size, height: size } : size;
+class SymbolCell extends pixi_js.Container {
+    __uiComponent = true;
+    _w;
+    _h;
+    _resolve;
+    _style;
+    _frame;
+    _view = null;
+    _data = { symbol: null };
+    _badges = new pixi_js.Container();
+    _multBadge = null;
+    _bonusBadge = null;
+    /** Last applied state key — exposed for tests/inspection. */
+    frameStyleKey = 'idle';
+    constructor(config) {
+        super();
+        const { width, height } = cellDims(config.size);
+        this._w = width;
+        this._h = height;
+        this._resolve = config.resolve;
+        this._style = { ...DEFAULT_STYLE, ...(config.frameStyle ?? {}) };
+        this._frame = new pixi_js.Graphics();
+        this.addChild(this._frame);
+        this.addChild(this._badges);
+        this._drawFrame('idle');
+    }
+    get view() {
+        return this._view;
+    }
+    /** The last applied cell data (symbol + badges). Read by motion controllers that rebuild tapes. */
+    get data() {
+        return this._data;
+    }
+    setData(data) {
+        if (this.destroyed)
+            return; // a killed-tween chain may resume after the cell is gone
+        this._data = data;
+        // symbol view
+        if (data.symbol == null) {
+            if (this._view) {
+                this._view.destroy();
+                this._view = null;
+            }
+        }
+        else {
+            if (this._view) {
+                this._view.destroy();
+                this._view = null;
+            }
+            const v = this._resolve(data.symbol);
+            if (v) {
+                v.resize?.({ width: this._w, height: this._h });
+                this.addChildAt(v, 1); // above frame, below badges
+                this._view = v;
+            }
+        }
+        // badges
+        this._setMultiplier(data.multiplier);
+        this._setBonus(data.bonus);
+    }
+    setState(state) {
+        if (this.destroyed)
+            return;
+        const key = state.winning
+            ? 'winning'
+            : state.removed
+                ? 'removed'
+                : state.fresh
+                    ? 'fresh'
+                    : 'idle';
+        this.frameStyleKey = key;
+        this._drawFrame(key);
+    }
+    playWin() {
+        if (this._view?.playWin)
+            return this._view.playWin();
+        // default: scale pop
+        const target = this._view ?? this;
+        return Tween.to(target, { 'scale.x': 1.15, 'scale.y': 1.15 }, 160, Easing.easeOutBack).then(() => Tween.to(target, { 'scale.x': 1, 'scale.y': 1 }, 140, Easing.easeOutQuad));
+    }
+    playIdle() {
+        this._view?.playIdle?.();
+    }
+    hasBadge(kind) {
+        return kind === 'multiplier' ? this._multBadge != null : this._bonusBadge != null;
+    }
+    _drawFrame(key) {
+        if (this.destroyed || this._frame.destroyed)
+            return;
+        const s = this._style[key];
+        this._frame.clear();
+        this._frame
+            .roundRect(-this._w / 2, -this._h / 2, this._w, this._h, this._style.radius)
+            .fill({ color: s.color, alpha: s.alpha });
+        // store the colour as tint for cheap inspection/testing
+        this._frame.tint = s.color;
+    }
+    _setMultiplier(value) {
+        if (this._multBadge) {
+            this._multBadge.destroy();
+            this._multBadge = null;
+        }
+        if (!value || value <= 1)
+            return;
+        this._multBadge = this._badge(`×${value}`, 0xffd24a);
+        this._multBadge.position.set(this._w / 2 - 12, -this._h / 2 + 12);
+        this._badges.addChild(this._multBadge);
+    }
+    _setBonus(value) {
+        if (this._bonusBadge) {
+            this._bonusBadge.destroy();
+            this._bonusBadge = null;
+        }
+        if (!value || value <= 0)
+            return;
+        this._bonusBadge = this._badge(`+${value}`, 0x7ad7ff);
+        this._bonusBadge.position.set(-this._w / 2 + 12, -this._h / 2 + 12);
+        this._badges.addChild(this._bonusBadge);
+    }
+    _badge(label, color) {
+        const c = new pixi_js.Container();
+        const t = new pixi_js.Text({ text: label, style: { fontSize: 18, fill: color, fontWeight: '700' } });
+        t.anchor.set(0.5);
+        c.addChild(t);
+        return c;
+    }
+}
+
+// packages/game-engine/src/slot/grid/geometry.ts
+//
+// Pure geometry resolver for the reel grid. Turns the (backward-compatible) grid config
+// — a square `cellSize` + single `gap`, optionally overridden by rectangular / per-strip
+// dimensions and per-strip gaps — into a fully-resolved, per-reel layout.
+//
+// Coordinate convention (unchanged from the original square grid):
+//   - `cellPosition` returns CELL-CENTRE coordinates.
+//   - Cell (0,0)'s centre sits at local x = 0. Reels extend to the right.
+//   - Variable-height reels are vertically CENTRED about a shared centre line, so the
+//     tallest reel's row 0 sits at y = 0 (matching the old Megaways behaviour).
+//
+// See docs/reels-analysis-and-design.md §6.
+const perReelSize = (spec, w, h) => {
+    if (typeof spec === 'number')
+        return [spec, spec];
+    if (spec && typeof spec === 'object')
+        return [spec.width, spec.height];
+    return [w, h];
+};
+const gapAt = (g, i, base) => Array.isArray(g) ? (g[i] ?? base) : (g ?? base);
+/** Resolve a grid config into a fully-populated per-reel geometry. */
+function resolveGeometry(g) {
+    const cols = Math.max(0, g.cols);
+    const rowsPerReel = g.rowsPerReel && g.rowsPerReel.length === cols
+        ? g.rowsPerReel.slice()
+        : Array.from({ length: cols }, () => g.rows);
+    const maxRows = cols ? Math.max(1, ...rowsPerReel) : 0;
+    const baseW = g.cellWidth ?? g.cellSize;
+    const baseH = g.cellHeight ?? g.cellSize;
+    const baseGap = g.gap ?? 0;
+    const cellW = [];
+    const cellH = [];
+    const rowGap = [];
+    for (let c = 0; c < cols; c++) {
+        const [w, h] = perReelSize(g.cellSizePerReel?.[c], baseW, baseH);
+        cellW[c] = w;
+        cellH[c] = h;
+        rowGap[c] = gapAt(g.rowGap, c, baseGap);
+    }
+    const colGap = [];
+    for (let i = 0; i < Math.max(0, cols - 1); i++)
+        colGap[i] = gapAt(g.colGap, i, baseGap);
+    // Horizontal: reel 0 centre at x = 0, then accumulate half-widths + between-reel gaps.
+    const colX = [];
+    if (cols)
+        colX[0] = 0;
+    for (let c = 1; c < cols; c++)
+        colX[c] = colX[c - 1] + cellW[c - 1] / 2 + colGap[c - 1] + cellW[c] / 2;
+    // Vertical: each reel's rows span (rows-1)*step; centre every reel about a shared line so
+    // the tallest reel's row 0 stays at y = 0 (parity with the old uniform Megaways layout).
+    const span = rowsPerReel.map((rr, c) => Math.max(0, rr - 1) * (cellH[c] + rowGap[c]));
+    const halfMaxSpan = cols ? Math.max(...span) / 2 : 0;
+    const yOff = span.map((s) => halfMaxSpan - s / 2);
+    // Bounding box.
+    let leftX = 0;
+    let rightX = 0;
+    let topY = 0;
+    let bottomY = 0;
+    for (let c = 0; c < cols; c++) {
+        leftX = Math.min(leftX, colX[c] - cellW[c] / 2);
+        rightX = Math.max(rightX, colX[c] + cellW[c] / 2);
+        const reelTop = yOff[c] - cellH[c] / 2;
+        topY = Math.min(topY, reelTop);
+        bottomY = Math.max(bottomY, reelTop + rowsPerReel[c] * cellH[c] + Math.max(0, rowsPerReel[c] - 1) * rowGap[c]);
+    }
+    const gridW = rightX - leftX;
+    const gridH = bottomY - topY;
+    return {
+        cols,
+        rowsPerReel,
+        maxRows,
+        cellW,
+        cellH,
+        rowGap,
+        colGap,
+        colX,
+        yOff,
+        gridW,
+        gridH,
+        centerX: (leftX + rightX) / 2,
+        centerY: (topY + bottomY) / 2,
+        leftX,
+        topY,
+    };
+}
+/** Cell-centre position from a resolved geometry. */
+function cellPositionOf(geom, col, row) {
+    return {
+        x: geom.colX[col] ?? 0,
+        y: (geom.yOff[col] ?? 0) + row * ((geom.cellH[col] ?? 0) + (geom.rowGap[col] ?? 0)),
+    };
+}
+
+/**
+ * A grid of `SymbolCell`s. Supports uniform grids, variable-height reels (Megaways), and
+ * rectangular / per-strip cell sizes with per-strip gaps. All layout flows through a single
+ * resolved geometry (see grid/geometry.ts); every consumer reads positions via `cellPosition`
+ * and dimensions via `cellSize(col)` rather than assuming a square cell.
+ */
+class ReelGrid extends pixi_js.Container {
+    __uiComponent = true;
+    _cfg;
+    _geom;
+    _cells = [];
+    _cellLayer = new pixi_js.Container();
+    _resolve;
+    _frameStyle;
+    _mask = null;
+    constructor(config) {
+        super();
+        this._cfg = { ...config };
+        this._resolve = config.resolve;
+        this._frameStyle = config.frameStyle;
+        this._geom = resolveGeometry(config);
+        if (config.decoration?.texture) {
+            const pad = config.decoration.padding ?? 0;
+            const deco = new pixi_js.Sprite(config.decoration.texture);
+            deco.width = this._geom.gridW + pad * 2;
+            deco.height = this._geom.gridH + pad * 2;
+            deco.position.set(this._geom.leftX - pad, this._geom.topY - pad);
+            this.addChild(deco);
+        }
+        this.addChild(this._cellLayer);
+        this._buildCells();
+        if (config.mask)
+            this._applyMask();
+    }
+    get _cols() {
+        return this._geom.cols;
+    }
+    get _rowsPerReel() {
+        return this._geom.rowsPerReel;
+    }
+    _buildCells() {
+        for (let c = 0; c < this._cols; c++) {
+            this._cells[c] = [];
+            for (let r = 0; r < this._rowsPerReel[c]; r++) {
+                const cell = new SymbolCell({
+                    size: this.cellSize(c),
+                    resolve: this._resolve,
+                    frameStyle: this._frameStyle,
+                });
+                const { x, y } = this.cellPosition(c, r);
+                cell.position.set(x, y);
+                this._cellLayer.addChild(cell);
+                this._cells[c][r] = cell;
+            }
+        }
+    }
+    /** Per-strip mask: one window per reel sized to that reel's own cell width × column height. */
+    _applyMask() {
+        const g = this._geom;
+        const m = new pixi_js.Graphics();
+        for (let c = 0; c < this._cols; c++) {
+            const rows = this._rowsPerReel[c];
+            const w = g.cellW[c];
+            const h = rows * g.cellH[c] + Math.max(0, rows - 1) * g.rowGap[c];
+            const x = g.colX[c] - w / 2;
+            const y = g.yOff[c] - g.cellH[c] / 2;
+            m.rect(x, y, w, h);
+        }
+        m.fill(0xffffff);
+        this._cellLayer.mask = m;
+        this.addChild(m);
+        this._mask = m;
+    }
+    get cols() {
+        return this._cols;
+    }
+    /** Tallest reel's row count (the grid's visual height in rows). */
+    get rows() {
+        return this._geom.maxRows;
+    }
+    /** Cell dimensions (px) for a reel. Rectangular / per-strip aware. */
+    cellSize(col) {
+        return { width: this._geom.cellW[col] ?? 0, height: this._geom.cellH[col] ?? 0 };
+    }
+    /** The fully-resolved grid geometry (read-only view). */
+    get geometry() {
+        return this._geom;
+    }
+    rowsOf(col) {
+        return this._rowsPerReel[col] ?? 0;
+    }
+    get rowsPerReel() {
+        return this._rowsPerReel.slice();
+    }
+    /** Cell centre position. Variable-height reels are centred about a shared centre line. */
+    cellPosition(col, row) {
+        return cellPositionOf(this._geom, col, row);
+    }
+    /** Grid bounding-box centre in local coords. */
+    center() {
+        return { x: this._geom.centerX, y: this._geom.centerY };
+    }
+    getCell(col, row) {
+        return this._cells[col][row];
+    }
+    setGrid(cells) {
+        for (let c = 0; c < this._cols; c++) {
+            for (let r = 0; r < this._rowsPerReel[c]; r++) {
+                this._cells[c]?.[r]?.setData(cells[c]?.[r] ?? { symbol: null });
+            }
+        }
+    }
+    /** Rebuild the grid with new per-reel row counts (Megaways re-roll / dynamic rows). */
+    reshape(rowsPerReel) {
+        if (rowsPerReel.length !== this._cols)
+            return;
+        this._cellLayer.removeChildren().forEach((c) => c.destroy());
+        this._cells = [];
+        this._cfg = { ...this._cfg, rowsPerReel: rowsPerReel.slice() };
+        this._geom = resolveGeometry(this._cfg);
+        this._buildCells();
+        if (this._mask) {
+            this._mask.destroy();
+            this.removeChild(this._mask);
+            this._mask = null;
+            this._applyMask();
+        }
+    }
+    /**
+     * Re-resolve geometry after a base cell-size change and reposition cells. Accepts a square
+     * scalar (updates `cellSize`) or explicit `{width,height}`. Per-strip overrides still apply.
+     * (Cell frames are not re-drawn here — a geometry change routes through a full rebuild upstream.)
+     */
+    resize(size) {
+        if (typeof size === 'number') {
+            this._cfg = { ...this._cfg, cellSize: size, cellWidth: undefined, cellHeight: undefined };
+        }
+        else {
+            this._cfg = { ...this._cfg, cellWidth: size.width, cellHeight: size.height };
+        }
+        this._geom = resolveGeometry(this._cfg);
+        for (let c = 0; c < this._cols; c++) {
+            for (let r = 0; r < this._rowsPerReel[c]; r++) {
+                const { x, y } = this.cellPosition(c, r);
+                this._cells[c][r].position.set(x, y);
+            }
+        }
+    }
+}
+
+// packages/game-engine/src/slot/anim/easing-map.ts
+/** Resolve a descriptor's string easing name to the engine's easing function. */
+const EASING_BY_NAME = {
+    linear: Easing.linear,
+    easeInQuad: Easing.easeInQuad,
+    easeOutQuad: Easing.easeOutQuad,
+    easeInOutQuad: Easing.easeInOutQuad,
+    easeInCubic: Easing.easeInCubic,
+    easeOutCubic: Easing.easeOutCubic,
+    easeInOutCubic: Easing.easeInOutCubic,
+    easeInBack: Easing.easeInBack,
+    easeOutBack: Easing.easeOutBack,
+    easeInOutBack: Easing.easeInOutBack,
+    easeOutBounce: Easing.easeOutBounce,
+    easeInBounce: Easing.easeInBounce,
+    easeOutElastic: Easing.easeOutElastic,
+    easeInSine: Easing.easeInSine,
+    easeOutSine: Easing.easeOutSine,
+    easeInOutSine: Easing.easeInOutSine,
+};
+/** Resolve an easing name to a function, falling back to easeOutQuad. */
+function easingByName(name) {
+    return (name && EASING_BY_NAME[name]) || Easing.easeOutQuad;
+}
+
+// packages/game-engine/src/slot/config/ReelSystemConfig.ts
+//
+// The single, fully-typed configuration object for the configurable reel system.
+// Everything is optional with sensible defaults — `resolveReelConfig(partial)` deep-merges
+// a partial config onto DEFAULT_REEL_CONFIG so games (and the reel-lab playground) can
+// override only what they need.
+//
+// Design notes are in docs/reels-analysis-and-design.md.
+const FEATURE_KEYS = [
+    'reelModifier', // pre-spin
+    'giant',
+    'stacked',
+    'mystery', // post-spin reveal
+    'expandingWild',
+    'walkingWild',
+    'randomWild',
+    'transform',
+    'split',
+    'nudge',
+    'multiplier',
+    'sticky',
+    'holdAndSpin',
+];
+// ─────────────────────────────────────────────────────────────────────────────
+// Defaults
+// ─────────────────────────────────────────────────────────────────────────────
+const DEFAULT_REEL_CONFIG = {
+    grid: {
+        cols: 5,
+        rows: 3,
+        cellSize: 96,
+        gap: 6,
+        evaluation: 'lines',
+        minRows: 2,
+        maxRows: 7,
+        topReel: null,
+        mask: true,
+        decoration: { padding: 0 },
+    },
+    motion: {
+        style: 'swap',
+        spinUp: 500,
+        hold: 200,
+        stopStagger: 120,
+        stopMode: 'sequential',
+        stopOrder: 'ltr',
+        settle: { amp: 7, ms: 240, easing: 'easeOutBack' },
+        squash: { enabled: false, scaleX: 1.18, scaleY: 0.82, ms: 90 },
+        blur: { enabled: false, alpha: 0.85, strength: 8, streaks: false },
+        turboFactor: 0.5,
+        intensity: 'full',
+        slamStop: true,
+        symbolsPerReel: 6,
+    },
+    anticipation: {
+        enabled: false,
+        triggerSymbols: ['scatter'],
+        threshold: 2,
+        reels: 'trailing',
+        slowdownFactor: 0.3,
+        holdMs: 400,
+        zoom: { enabled: false, scale: 1.15, ms: 600 },
+    },
+    cascade: {
+        enabled: false,
+        gravity: true,
+        timings: { reveal: 300, highlight: 400, remove: 250, drop: 220, refill: 220, wait: 150 },
+        easings: { highlight: 'easeOutQuad', remove: 'easeInBack', drop: 'easeOutBounce' },
+        perStepDecel: 0.08,
+        perStepDecelCap: 1.5,
+        dimNonWinners: false,
+        dimAlpha: 0.35,
+        multiplier: {
+            enabled: false,
+            start: 1,
+            mode: 'add',
+            step: 1,
+            cap: null,
+            persistInFreeSpins: false,
+        },
+    },
+    win: {
+        highlightScale: 1.12,
+        glow: true,
+        frameShake: { enabled: false, amp: 3, ms: 180, onlyOnSymbols: null },
+    },
+    features: {
+        expandingWild: {
+            enabled: false,
+            symbol: 'wild',
+            reels: [],
+            toFullReel: true,
+            ms: 420,
+            easing: 'easeOutBack',
+            onlyInFreeSpins: false,
+        },
+        sticky: { enabled: false, symbols: ['wild'], durationSpins: 3, ringColor: 0xec4899 },
+        walkingWild: {
+            enabled: false,
+            symbol: 'wild',
+            direction: 'left',
+            stepPerSpin: 1,
+            awardsRespin: true,
+            asStacked: false,
+        },
+        multiplier: {
+            enabled: false,
+            symbol: null,
+            scope: 'perSymbol',
+            combine: 'additive',
+            attachedToWild: false,
+            max: 128,
+            accumulateAcrossFreeSpins: false,
+        },
+        mystery: { enabled: false, symbol: 'mystery', revealPool: [], canRevealWild: false, ms: 300 },
+        transform: {
+            enabled: false,
+            trigger: null,
+            source: 'randomLow',
+            target: 'wild',
+            allInstances: true,
+            upgradeOnly: false,
+            ms: 320,
+        },
+        giant: {
+            enabled: false,
+            width: 2,
+            height: 2,
+            symbols: [],
+            chosenPerSpin: false,
+            onlyInFreeSpins: false,
+        },
+        split: { enabled: false, symbol: 'split', factor: 2, reels: [], deferUntilRespinsEnd: true },
+        stacked: { enabled: false, symbols: [], height: 3 },
+        nudge: {
+            enabled: false,
+            reels: [],
+            step: 1,
+            toFullReel: false,
+            multiplierStart: 1,
+            multiplierPerNudge: 1,
+        },
+        reelModifier: { enabled: false, pool: [], appliesIn: 'both' },
+        holdAndSpin: {
+            enabled: false,
+            lockSymbols: ['coin'],
+            triggerThreshold: 6,
+            respinsAwarded: 3,
+            resetOnNewSymbol: true,
+            jackpotTiers: ['Mini', 'Minor', 'Major', 'Grand'],
+            fullGridAwardsGrand: true,
+        },
+        randomWild: {
+            enabled: false,
+            count: [1, 3],
+            sticky: false,
+            multiplier: 1,
+            trigger: 'onFreeSpins',
+            chance: 0.2,
+        },
+    },
+};
+/** Intensity → duration scale (accessibility). */
+const INTENSITY_SCALE = { full: 1, reduced: 0.7, minimal: 0.4 };
+function isPlainObject(v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+/** Deep-merge `partial` onto `base` (arrays replace, objects merge). Returns a new object. */
+function mergeReelConfig(base, partial) {
+    if (partial == null)
+        return structuredCloneSafe(base);
+    const out = structuredCloneSafe(base);
+    for (const [k, v] of Object.entries(partial)) {
+        if (v === undefined)
+            continue;
+        const cur = out[k];
+        if (isPlainObject(v) && isPlainObject(cur))
+            out[k] = mergeReelConfig(cur, v);
+        else
+            out[k] = v;
+    }
+    return out;
+}
+/** Resolve a partial config to a fully-populated `ReelSystemConfig`. */
+function resolveReelConfig(partial) {
+    return mergeReelConfig(DEFAULT_REEL_CONFIG, partial);
+}
+function structuredCloneSafe(v) {
+    // structuredClone is available in modern browsers + Node 17+; fall back to JSON for safety.
+    if (typeof structuredClone === 'function')
+        return structuredClone(v);
+    return JSON.parse(JSON.stringify(v));
+}
+/** Effective per-reel row counts (resolves Megaways `rowsPerReel`, else uniform `rows`). */
+function effectiveRowsPerReel(grid) {
+    if (grid.rowsPerReel && grid.rowsPerReel.length === grid.cols)
+        return grid.rowsPerReel.slice();
+    return Array.from({ length: grid.cols }, () => grid.rows);
+}
+/** Total ways-to-win for a ways/megaways grid (product of per-reel heights). */
+function waysCount(grid) {
+    return effectiveRowsPerReel(grid).reduce((a, b) => a * b, 1);
+}
+
+// packages/game-engine/src/slot/config/presets.ts
+//
+// Reel presets distilled from our shipped games (see docs/reels-analysis-and-design.md §2).
+// Each is a DeepPartial override on DEFAULT_REEL_CONFIG.
+const PRESETS = {
+    classic: {
+        id: 'classic',
+        name: 'Classic 5×3 lines',
+        note: 'Plain spinning reels, sequential stops, settle bounce.',
+        config: {
+            grid: { cols: 5, rows: 3, evaluation: 'lines', cellSize: 96, gap: 6 },
+            motion: {
+                style: 'strip',
+                spinUp: 600,
+                stopStagger: 140,
+                blur: { enabled: true, alpha: 0.85, strength: 6, streaks: false },
+            },
+        },
+    },
+    'kitsune-wrath': {
+        id: 'kitsune-wrath',
+        name: 'Kitsune Wrath 7×7 cluster',
+        note: 'Tumble grid, sticky wilds, position multipliers, scatter anticipation.',
+        config: {
+            grid: { cols: 7, rows: 7, evaluation: 'cluster', cellSize: 66, gap: 0 },
+            motion: {
+                style: 'cascade-drop',
+                spinUp: 400,
+                squash: { enabled: true, scaleX: 1.12, scaleY: 0.88, ms: 90 },
+            },
+            cascade: {
+                enabled: true,
+                gravity: true,
+                dimNonWinners: true,
+                multiplier: {
+                    enabled: true,
+                    start: 1,
+                    mode: 'mul',
+                    step: 2,
+                    cap: 128,
+                    persistInFreeSpins: false,
+                },
+            },
+            anticipation: { enabled: true, triggerSymbols: ['scatter'], threshold: 4 },
+            features: {
+                sticky: { enabled: true, durationSpins: 3 },
+                multiplier: { enabled: true, scope: 'perSymbol', combine: 'multiplicative', max: 128 },
+            },
+        },
+    },
+    'moon-spice': {
+        id: 'moon-spice',
+        name: 'Moon Spice 5×4 ways',
+        note: 'Spin + cascade refill, frame shake on wild/scatter, 1024 ways.',
+        config: {
+            grid: { cols: 5, rows: 4, evaluation: 'ways', cellSize: 90, gap: 4 },
+            motion: {
+                style: 'strip',
+                spinUp: 1200,
+                stopStagger: 120,
+                settle: { amp: 6, ms: 220, easing: 'easeOutQuad' },
+            },
+            cascade: {
+                enabled: true,
+                gravity: true,
+                easings: { highlight: 'easeOutQuad', remove: 'easeInBack', drop: 'easeOutBounce' },
+            },
+            win: { frameShake: { enabled: true, amp: 2.2, ms: 180, onlyOnSymbols: ['wild', 'scatter'] } },
+            features: { multiplier: { enabled: true, scope: 'perSymbol', combine: 'additive' } },
+        },
+    },
+    'stone-rush': {
+        id: 'stone-rush',
+        name: 'Stone Rush 7×7 tumble',
+        note: 'Weighty gravity with squash/stretch, per-step deceleration, multiplier orbs.',
+        config: {
+            grid: { cols: 7, rows: 7, evaluation: 'cluster', cellSize: 66, gap: 8 },
+            motion: {
+                style: 'cascade-drop',
+                spinUp: 320,
+                squash: { enabled: true, scaleX: 1.3, scaleY: 0.7, ms: 110 },
+            },
+            cascade: {
+                enabled: true,
+                gravity: true,
+                perStepDecel: 0.08,
+                perStepDecelCap: 1.5,
+                multiplier: {
+                    enabled: true,
+                    start: 1,
+                    mode: 'add',
+                    step: 1,
+                    cap: 100,
+                    persistInFreeSpins: true,
+                },
+            },
+            features: {
+                multiplier: { enabled: true, scope: 'global', combine: 'additive', max: 100 },
+                expandingWild: { enabled: true, symbol: 'wild', toFullReel: false },
+            },
+        },
+    },
+    'hot-ross': {
+        id: 'hot-ross',
+        name: 'Hot Ross 5×5 lines',
+        note: 'Classic strip spin with motion blur, scatter tease, expanding wilds, sticky reels.',
+        config: {
+            grid: { cols: 5, rows: 5, evaluation: 'lines', cellSize: 88, gap: 4 },
+            motion: {
+                style: 'strip',
+                spinUp: 1650,
+                stopStagger: 210,
+                blur: { enabled: true, alpha: 0.82, strength: 8, streaks: true },
+                settle: { amp: 7, ms: 240, easing: 'easeOutBack' },
+            },
+            anticipation: {
+                enabled: true,
+                triggerSymbols: ['scatter'],
+                threshold: 2,
+                slowdownFactor: 0.28,
+                holdMs: 450,
+            },
+            features: {
+                expandingWild: { enabled: true, symbol: 'wild', reels: [1, 2, 3], toFullReel: true },
+                sticky: { enabled: true, durationSpins: 0 },
+            },
+        },
+    },
+    magnus: {
+        id: 'magnus',
+        name: 'Magnus 6×6 transmute',
+        note: 'Cascade with idle-breathing symbols, scatter anticipation + reel zoom, transform.',
+        config: {
+            grid: { cols: 6, rows: 6, evaluation: 'cluster', cellSize: 74, gap: 2 },
+            motion: {
+                style: 'cascade-drop',
+                spinUp: 400,
+                squash: { enabled: true, scaleX: 1.14, scaleY: 0.86, ms: 110 },
+            },
+            cascade: {
+                enabled: true,
+                gravity: true,
+                multiplier: {
+                    enabled: true,
+                    start: 1,
+                    mode: 'add',
+                    step: 1,
+                    cap: null,
+                    persistInFreeSpins: true,
+                },
+            },
+            anticipation: {
+                enabled: true,
+                triggerSymbols: ['scatter'],
+                threshold: 2,
+                holdMs: 280,
+                zoom: { enabled: true, scale: 1.3, ms: 600 },
+            },
+            features: {
+                transform: {
+                    enabled: true,
+                    source: 'randomLow',
+                    target: 'h1',
+                    allInstances: true,
+                    upgradeOnly: true,
+                },
+            },
+        },
+    },
+    megaways: {
+        id: 'megaways',
+        name: 'Megaways 6× (2–7)',
+        note: 'Variable per-reel heights, tumble + climbing multiplier, anticipation.',
+        config: {
+            grid: {
+                cols: 6,
+                rows: 4,
+                rowsPerReel: [4, 6, 3, 7, 5, 2],
+                evaluation: 'megaways',
+                cellSize: 74,
+                gap: 4,
+                minRows: 2,
+                maxRows: 7,
+            },
+            motion: { style: 'strip', spinUp: 900, stopStagger: 130 },
+            cascade: {
+                enabled: true,
+                gravity: true,
+                multiplier: {
+                    enabled: true,
+                    start: 1,
+                    mode: 'add',
+                    step: 1,
+                    cap: null,
+                    persistInFreeSpins: true,
+                },
+            },
+            anticipation: { enabled: true, triggerSymbols: ['scatter'], threshold: 3 },
+        },
+    },
+};
+
+// packages/game-engine/src/slot/motion/SpinEngine.ts
+//
+// Configurable spin motion. Supports three styles — 'swap' (texture-swap ring),
+// 'strip' (a tape of symbols slides past a masked window) and 'cascade-drop'
+// (symbols drop in from above) — plus stop modes, turbo/intensity scaling, motion
+// blur, settle-bounce, squash-on-impact and slam (quick) stop.
+//
+// Presentation only: the landing grid is the already-resolved outcome. The engine
+// never re-rolls a result.
+class SpinEngine {
+    _grid;
+    _resolve;
+    _cfg;
+    _win = DEFAULT_REEL_CONFIG.win;
+    _killed = false;
+    _shaking = false;
+    _temp = [];
+    constructor(grid, resolve, cfg, win) {
+        this._grid = grid;
+        this._resolve = resolve;
+        this._cfg = cfg;
+        if (win)
+            this._win = win;
+    }
+    setConfig(cfg) {
+        this._cfg = cfg;
+    }
+    setWin(win) {
+        this._win = win;
+    }
+    /** Quick decaying frame shake when a landed reel carries a configured trigger symbol. */
+    async _frameShake(landing) {
+        const fs = this._win.frameShake;
+        if (!fs.enabled || this._shaking || this._killed)
+            return;
+        const triggers = fs.onlyOnSymbols;
+        if (triggers && !landing.some((c) => c.symbol && triggers.includes(c.symbol)))
+            return;
+        this._shaking = true;
+        const baseX = this._grid.x;
+        const amp = fs.amp * INTENSITY_SCALE[this._cfg.intensity];
+        const steps = 4;
+        for (let i = 0; i < steps && !this._killed; i++) {
+            const a = amp * (1 - i / steps) * (i % 2 ? -1 : 1);
+            await Tween.to(this._grid, { x: baseX + a }, fs.ms / (steps + 1), EASING_BY_NAME['easeOutQuad']);
+        }
+        if (!this._killed && !this._grid.destroyed)
+            this._grid.x = baseX;
+        this._shaking = false;
+    }
+    scale(opts) {
+        const turbo = opts?.turbo ? this._cfg.turboFactor : 1;
+        return turbo * INTENSITY_SCALE[this._cfg.intensity];
+    }
+    /** PURE: per-reel stop schedule. No Pixi mutation. */
+    plan(data, opts) {
+        const f = this.scale(opts);
+        const cols = this._grid.cols;
+        const order = (reel) => (this._cfg.stopOrder === 'rtl' ? cols - 1 - reel : reel);
+        const anticipate = new Set(opts?.anticipateReels ?? []);
+        const out = [];
+        for (let reel = 0; reel < cols; reel++) {
+            const idx = order(reel);
+            let stopTime;
+            if (this._cfg.stopMode === 'sync')
+                stopTime = (this._cfg.spinUp + this._cfg.hold) * f;
+            else if (this._cfg.stopMode === 'random')
+                stopTime =
+                    (this._cfg.spinUp +
+                        this._cfg.hold +
+                        idx * this._cfg.stopStagger * (0.4 + (reel % 3) * 0.3)) *
+                        f;
+            else
+                stopTime = (this._cfg.spinUp + this._cfg.hold + idx * this._cfg.stopStagger) * f;
+            const isAnticipated = anticipate.has(reel);
+            if (isAnticipated)
+                stopTime += (opts?.anticipateHoldMs ?? 0) * f;
+            out.push({
+                reel,
+                stopTime,
+                landing: data.targetGrid[reel] ?? [],
+                settle: { amp: this._cfg.settle.amp, ms: this._cfg.settle.ms * f },
+                anticipated: isAnticipated,
+            });
+        }
+        return out;
+    }
+    /** Execute the spin for every reel concurrently. */
+    async run(data, opts) {
+        this._killed = false;
+        this._temp = [];
+        const plan = this.plan(data, opts);
+        const f = this.scale(opts);
+        await Promise.all(plan.map((p) => this._runReel(p, data, opts, f)));
+        this._cleanupTemp();
+    }
+    async _runReel(p, data, opts, f) {
+        if (this._killed)
+            return;
+        switch (this._cfg.style) {
+            case 'strip':
+                return this._runStrip(p, data, opts, f);
+            case 'cascade-drop':
+                return this._runDrop(p, opts, f);
+            case 'swap':
+            default:
+                return this._runSwap(p, data, opts, f);
+        }
+    }
+    /** Anticipation time-stretch factor for a reel (>=1, longer = slower). */
+    slowOf(p, opts) {
+        return p.anticipated ? Math.max(1, 1 / (opts?.anticipateSlowdown ?? 1)) : 1;
+    }
+    // ── swap: cycle symbols quickly in the real cells, then land ──────────────
+    async _runSwap(p, data, opts, f) {
+        const rows = this._grid.rowsOf(p.reel);
+        const cells = Array.from({ length: rows }, (_, r) => this._grid.getCell(p.reel, r));
+        const strip = data.strip?.(p.reel) ?? p.landing.map((c) => c.symbol ?? '').filter(Boolean);
+        const tape = strip.length ? strip : ['?'];
+        const blur = this._applyBlur(cells, true);
+        const tickMs = 1000 / 30;
+        // anticipation makes the reel spin longer before it lands
+        const ticks = Math.max(6, Math.floor((p.stopTime * this.slowOf(p, opts)) / tickMs));
+        for (let i = 0; i < ticks; i++) {
+            if (this._killed)
+                break;
+            for (let r = 0; r < cells.length; r++)
+                cells[r].setData({ symbol: tape[(i + r) % tape.length] || null });
+            await Tween.delay(tickMs);
+        }
+        blur?.();
+        for (let r = 0; r < cells.length; r++)
+            cells[r].setData(p.landing[r] ?? { symbol: null });
+        await this._settle(p.reel, p.settle, f);
+        await this._frameShake(p.landing);
+    }
+    // ── strip: a tape Container slides down past the window, then lands ────────
+    async _runStrip(p, data, opts, f) {
+        const rows = this._grid.rowsOf(p.reel);
+        const realCells = Array.from({ length: rows }, (_, r) => this._grid.getCell(p.reel, r));
+        const base = this._grid.cellPosition(p.reel, 0);
+        const step = this._grid.cellPosition(p.reel, 1).y - base.y;
+        const tapeLen = Math.max(this._cfg.symbolsPerReel, rows + 4);
+        const strip = data.strip?.(p.reel) ?? p.landing.map((c) => c.symbol ?? '').filter(Boolean);
+        const pool = strip.length ? strip : ['?'];
+        // Tape cells laid out top→bottom at local y = i*step. The bottom `rows` cells carry the
+        // landing symbols; everything above is filler.
+        const tape = new pixi_js.Container();
+        tape.x = base.x;
+        const landingStart = tapeLen - rows;
+        for (let i = 0; i < tapeLen; i++) {
+            const cell = new SymbolCell({ size: this._grid.cellSize(p.reel), resolve: this._resolve });
+            const sym = i >= landingStart
+                ? (p.landing[i - landingStart]?.symbol ?? null)
+                : (pool[i % pool.length] ?? null);
+            cell.setData({ symbol: sym });
+            cell.position.set(0, i * step);
+            tape.addChild(cell);
+        }
+        // At rest the bottom block aligns with the window; start shifted up by the whole tape.
+        const restY = base.y - landingStart * step;
+        const startY = restY - tapeLen * step;
+        tape.y = startY;
+        realCells.forEach((c) => (c.visible = false));
+        this._grid.addChild(tape);
+        this._temp.push(tape);
+        const clearBlur = this._applyBlur([tape], true);
+        const slow = this.slowOf(p, opts);
+        // overshoot/settle honour the configured settle (amp in px, easing)
+        const overshoot = p.settle.amp || step * 0.18;
+        await Tween.to(tape, { y: restY + overshoot }, p.stopTime * slow, easingByName('easeInOutQuad'));
+        if (this._killed) {
+            clearBlur?.();
+            return;
+        }
+        clearBlur?.();
+        await Tween.to(tape, { y: restY }, Math.max(120, p.settle.ms), easingByName(this._cfg.settle.easing));
+        // hand the result back to the real cells
+        for (let r = 0; r < rows; r++)
+            realCells[r].setData(p.landing[r] ?? { symbol: null });
+        realCells.forEach((c) => (c.visible = true));
+        tape.destroy();
+        this._temp = this._temp.filter((t) => t !== tape);
+        // squash the real cells on impact when enabled
+        if (this._cfg.squash.enabled)
+            await Promise.all(realCells.map((c) => this._squashCell(c, f)));
+        await this._frameShake(p.landing);
+    }
+    // ── cascade-drop: symbols drop in from above with stagger + bounce + squash ─
+    async _runDrop(p, opts, f) {
+        const rows = this._grid.rowsOf(p.reel);
+        const step = this._grid.cellPosition(p.reel, 1).y - this._grid.cellPosition(p.reel, 0).y;
+        const slow = this.slowOf(p, opts); // anticipation drops the reel in more slowly
+        await Promise.all(Array.from({ length: rows }, (_, r) => r).map(async (r) => {
+            if (this._killed)
+                return;
+            const cell = this._grid.getCell(p.reel, r);
+            const to = this._grid.cellPosition(p.reel, r);
+            cell.setData(p.landing[r] ?? { symbol: null });
+            cell.position.set(to.x, to.y - step * (rows + 1));
+            cell.alpha = 1;
+            const delay = (p.reel * this._cfg.stopStagger * 0.4 + r * 24) * f * slow;
+            if (delay)
+                await Tween.delay(delay);
+            await Tween.to(cell, { 'position.y': to.y }, this._cfg.spinUp * 0.6 * f * slow, easingByName(this._cfg.settle.easing));
+            await this._squashCell(cell, f);
+        }));
+        await this._frameShake(p.landing);
+    }
+    // ── shared helpers ────────────────────────────────────────────────────────
+    async _settle(reel, settle, f) {
+        if (this._killed || settle.amp <= 0)
+            return;
+        const cells = Array.from({ length: this._grid.rowsOf(reel) }, (_, r) => this._grid.getCell(reel, r));
+        const parent = cells[0]?.parent;
+        if (!parent)
+            return;
+        // bounce the whole reel column by moving each cell, then squash the impact
+        await Promise.all(cells.map((c) => {
+            const y = c.y;
+            return Tween.fromTo(c, { y: y - settle.amp }, { y }, settle.ms, EASING_BY_NAME[this._cfg.settle.easing] ?? EASING_BY_NAME['easeOutBack']);
+        }));
+        if (this._cfg.squash.enabled)
+            await Promise.all(cells.map((c) => this._squashCell(c, f)));
+    }
+    async _squashCell(cell, f) {
+        if (!this._cfg.squash.enabled || this._killed)
+            return;
+        const { scaleX, scaleY, ms } = this._cfg.squash;
+        await Tween.to(cell, { 'scale.x': scaleX, 'scale.y': scaleY }, ms * 0.5 * f, EASING_BY_NAME['easeOutQuad']);
+        await Tween.to(cell, { 'scale.x': 1, 'scale.y': 1 }, ms * 0.5 * f, EASING_BY_NAME['easeOutBack']);
+    }
+    /** Apply motion blur (alpha + optional BlurFilter) to targets; returns a disposer that clears it. */
+    _applyBlur(targets, _motion) {
+        if (!this._cfg.blur.enabled)
+            return null;
+        const filter = this._cfg.blur.strength > 0
+            ? new pixi_js.BlurFilter({ strength: this._cfg.blur.strength, quality: 2 })
+            : null;
+        for (const t of targets) {
+            t.alpha = this._cfg.blur.alpha;
+            if (filter)
+                t.filters = [filter];
+        }
+        return () => {
+            for (const t of targets) {
+                t.alpha = 1;
+                t.filters = [];
+            }
+            filter?.destroy();
+        };
+    }
+    _cleanupTemp() {
+        for (const t of this._temp) {
+            if (!t.destroyed)
+                t.destroy();
+        }
+        this._temp = [];
+    }
+    /** Slam / quick stop: snap everything to the target and stop animating. */
+    skip() {
+        if (!this._cfg.slamStop && !this._killed) ;
+        this._killed = true;
+        this._shaking = false;
+        this._cleanupTemp();
+        if (this._grid.destroyed)
+            return;
+        Tween.killTweensOf(this._grid);
+        this._grid.x = 0; // undo any in-flight frame shake
+        for (let c = 0; c < this._grid.cols; c++) {
+            for (let r = 0; r < this._grid.rowsOf(c); r++) {
+                const cell = this._grid.getCell(c, r);
+                if (cell.destroyed)
+                    continue;
+                Tween.killTweensOf(cell);
+                cell.visible = true;
+                cell.alpha = 1;
+                cell.filters = [];
+                cell.scale.set(1);
+            }
+        }
+        this._cleanupTemp();
+    }
+}
+
+// packages/game-engine/src/slot/motion/AnticipationController.ts
+//
+// Decides which trailing reels get the "anticipation" slow-down treatment, based purely on
+// the already-resolved landing grid (presentation only — never a secondary outcome decision).
+class AnticipationController {
+    _cfg;
+    constructor(cfg) {
+        this._cfg = cfg;
+    }
+    setConfig(cfg) {
+        this._cfg = cfg;
+    }
+    /** Count how many trigger symbols land on a given reel. */
+    countOnReel(reel) {
+        let n = 0;
+        for (const c of reel)
+            if (c?.symbol && this._cfg.triggerSymbols.includes(c.symbol))
+                n++;
+        return n;
+    }
+    /**
+     * Decide anticipation from the landing grid. Trigger symbols are counted left→right;
+     * once the running total reaches `threshold`, every still-spinning reel after that point
+     * is flagged for the slow treatment (this mirrors "searching for the last scatter").
+     */
+    decide(targetGrid) {
+        if (!this._cfg.enabled)
+            return { active: false, reels: [], slowdown: 1, holdMs: 0 };
+        if (Array.isArray(this._cfg.reels)) {
+            // explicit reel list — arm only if the threshold is met somewhere on the board
+            const total = targetGrid.reduce((sum, reel) => sum + this.countOnReel(reel), 0);
+            const active = total >= this._cfg.threshold;
+            return active
+                ? {
+                    active,
+                    reels: this._cfg.reels.slice(),
+                    slowdown: this._cfg.slowdownFactor,
+                    holdMs: this._cfg.holdMs,
+                }
+                : { active: false, reels: [], slowdown: 1, holdMs: 0 };
+        }
+        // 'trailing': find the reel where the cumulative count hits the threshold
+        let running = 0;
+        let armReel = -1;
+        for (let c = 0; c < targetGrid.length; c++) {
+            running += this.countOnReel(targetGrid[c] ?? []);
+            if (running >= this._cfg.threshold) {
+                armReel = c;
+                break;
+            }
+        }
+        if (armReel < 0)
+            return { active: false, reels: [], slowdown: 1, holdMs: 0 };
+        const reels = [];
+        for (let c = armReel + 1; c < targetGrid.length; c++)
+            reels.push(c);
+        if (reels.length === 0)
+            return { active: false, reels: [], slowdown: 1, holdMs: 0 };
+        return { active: true, reels, slowdown: this._cfg.slowdownFactor, holdMs: this._cfg.holdMs };
+    }
+    /** Optionally zoom the grid in while anticipating, then settle back. Returns a reset fn. */
+    async zoomIn(grid) {
+        if (!this._cfg.zoom.enabled)
+            return async () => { };
+        const sx = grid.scale.x;
+        const sy = grid.scale.y;
+        await Tween.to(grid, { 'scale.x': sx * this._cfg.zoom.scale, 'scale.y': sy * this._cfg.zoom.scale }, this._cfg.zoom.ms, easingByName('easeOutCubic'));
+        return async () => {
+            await Tween.to(grid, { 'scale.x': sx, 'scale.y': sy }, this._cfg.zoom.ms, easingByName('easeOutCubic'));
+        };
+    }
+}
+
+// packages/game-engine/src/slot/cascade/TumbleController.ts
+//
+// Richer cascade/tumble than the back-compat CascadeController: animates surviving symbols
+// sliding into the gaps (gravity), supports per-step deceleration (tension build), dimming of
+// non-winning symbols, and a running win multiplier (Pragmatic Tumble / NetEnt Avalanche style).
+//
+// Presentation only — the settled board is provided by the caller.
+class TumbleController {
+    _grid;
+    _cfg;
+    _win = DEFAULT_REEL_CONFIG.win;
+    _killed = false;
+    _mult;
+    constructor(grid, cfg, win) {
+        this._grid = grid;
+        this._cfg = cfg;
+        this._mult = cfg.multiplier.start;
+        if (win)
+            this._win = win;
+    }
+    setConfig(cfg) {
+        this._cfg = cfg;
+    }
+    setWin(win) {
+        this._win = win;
+    }
+    /** Killed, or the grid was torn down underneath us (rebuild during a cascade). */
+    get _dead() {
+        return this._killed || this._grid.destroyed;
+    }
+    get multiplier() {
+        return this._mult;
+    }
+    resetMultiplier() {
+        this._mult = this._cfg.multiplier.start;
+    }
+    advanceMultiplier() {
+        const m = this._cfg.multiplier;
+        if (!m.enabled)
+            return;
+        const next = m.mode === 'mul' ? this._mult * m.step : this._mult + m.step;
+        this._mult = m.cap != null ? Math.min(next, m.cap) : next;
+    }
+    /** Derive survivor slides for one column when explicit drops aren't supplied. */
+    deriveDrops(step) {
+        const removedByCol = new Map();
+        for (const r of step.removedCells) {
+            if (!removedByCol.has(r.col))
+                removedByCol.set(r.col, new Set());
+            removedByCol.get(r.col).add(r.row);
+        }
+        const out = [];
+        for (const [col, removed] of removedByCol) {
+            const rows = this._grid.rowsOf(col);
+            // survivors keep order and fall to the bottom; count holes below each survivor
+            const survivors = [];
+            for (let r = 0; r < rows; r++)
+                if (!removed.has(r))
+                    survivors.push(r);
+            const newCount = rows - survivors.length;
+            survivors.forEach((fromRow, i) => {
+                const toRow = newCount + i;
+                if (toRow !== fromRow)
+                    out.push({ col, fromRow, toRow });
+            });
+        }
+        return out;
+    }
+    /** Run a single cascade step. `stepIndex` drives per-step deceleration. */
+    async step(step, stepIndex = 0, opts) {
+        if (this._grid.destroyed)
+            return;
+        if (!this._cfg.enabled) {
+            this._grid.setGrid(step.settledGrid);
+            return;
+        }
+        this._killed = false;
+        const turbo = opts?.turbo ? 0.5 : 1;
+        const decel = Math.min(this._cfg.perStepDecelCap, 1 + stepIndex * this._cfg.perStepDecel);
+        const f = turbo * decel;
+        const t = this._cfg.timings;
+        // 1. highlight winners (+ dim others). win.highlightScale / win.glow drive the pop.
+        const winSet = new Set(step.winningCells.map((w) => `${w.col}:${w.row}`));
+        const dimmed = this._cfg.dimNonWinners && step.winningCells.length > 0;
+        if (dimmed)
+            this._dim(winSet);
+        const hs = this._win.highlightScale;
+        await Promise.all(step.winningCells.map((w) => {
+            const cell = this._grid.getCell(w.col, w.row);
+            if (this._win.glow)
+                cell.setState({ winning: true });
+            return Tween.to(cell, { 'scale.x': hs, 'scale.y': hs }, t.highlight * f, easingByName(this._cfg.easings.highlight));
+        }));
+        if (this._dead) {
+            if (dimmed)
+                this._undim();
+            return;
+        }
+        await Tween.delay(t.wait * f);
+        // 2. remove the cleared cells (removedCells, falling back to winningCells)
+        const cleared = step.removedCells.length ? step.removedCells : step.winningCells;
+        await Promise.all(cleared.map((w) => {
+            const cell = this._grid.getCell(w.col, w.row);
+            return Tween.to(cell, { 'scale.x': 0, 'scale.y': 0, alpha: 0 }, t.remove * f, easingByName(this._cfg.easings.remove));
+        }));
+        if (this._dead) {
+            if (dimmed)
+                this._undim();
+            return;
+        }
+        for (const w of cleared) {
+            const cell = this._grid.getCell(w.col, w.row);
+            cell.setData({ symbol: null });
+            cell.setState({});
+            cell.scale.set(1);
+            cell.alpha = 1;
+        }
+        this._undim();
+        // 3. gravity: survivors slide down, new cells drop from above (per-reel row step)
+        const rowStepOf = (col) => this._grid.rowsOf(col) > 1
+            ? this._grid.cellPosition(col, 1).y - this._grid.cellPosition(col, 0).y
+            : this._grid.cellSize(col).height;
+        const slides = this._cfg.gravity ? (step.drops ?? this.deriveDrops(step)) : [];
+        const anims = [];
+        for (const d of slides) {
+            const cell = this._grid.getCell(d.col, d.toRow);
+            const home = this._grid.cellPosition(d.col, d.toRow);
+            cell.setData(step.settledGrid[d.col]?.[d.toRow] ?? { symbol: null });
+            cell.alpha = 1;
+            cell.scale.set(1);
+            cell.position.set(home.x, this._grid.cellPosition(d.col, d.fromRow).y);
+            anims.push(Tween.to(cell, { 'position.y': home.y }, t.drop * f, easingByName(this._cfg.easings.drop)));
+        }
+        const perCol = {};
+        for (const n of step.newCells) {
+            const cell = this._grid.getCell(n.col, n.row);
+            const home = this._grid.cellPosition(n.col, n.row);
+            cell.setData({ symbol: n.symbol });
+            cell.setState({ fresh: true });
+            cell.alpha = 1;
+            cell.scale.set(1);
+            cell.position.set(home.x, home.y - rowStepOf(n.col) * (this._grid.rowsOf(n.col) + 1));
+            const idx = (perCol[n.col] = (perCol[n.col] ?? 0) + 1);
+            anims.push((async () => {
+                await Tween.delay(idx * 28 * f);
+                if (this._dead)
+                    return;
+                await Tween.to(cell, { 'position.y': home.y }, t.refill * f, easingByName(this._cfg.easings.drop));
+                cell.setState({});
+            })());
+        }
+        await Promise.all(anims);
+        if (this._dead)
+            return;
+        // 4. normalise + advance multiplier
+        this._grid.setGrid(step.settledGrid);
+        this._resetPositions();
+        if (step.winningCells.length)
+            this.advanceMultiplier();
+    }
+    _dim(winSet) {
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++)
+                if (!winSet.has(`${c}:${r}`))
+                    this._grid.getCell(c, r).alpha = this._cfg.dimAlpha;
+    }
+    _undim() {
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++) {
+                const cell = this._grid.getCell(c, r);
+                if (cell.alpha !== 0)
+                    cell.alpha = 1;
+            }
+    }
+    _resetPositions() {
+        if (this._grid.destroyed)
+            return;
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++) {
+                const cell = this._grid.getCell(c, r);
+                const { x, y } = this._grid.cellPosition(c, r);
+                cell.position.set(x, y);
+                cell.scale.set(1);
+                cell.alpha = 1;
+            }
+    }
+    skip() {
+        this._killed = true;
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++)
+                Tween.killTweensOf(this._grid.getCell(c, r));
+        this._resetPositions();
+    }
+}
+
+// packages/game-engine/src/slot/cascade/ReelStepController.ts
+//
+// ReelStep™ mechanic. Flow: reels stop → winning lines are paid → each reel scrolls DOWN by N
+// positions (N = winning symbols that played on that reel) → the board is re-evaluated → repeat,
+// until no wins remain. Unlike a cascade/tumble, nothing is removed: the existing symbols ride
+// down and N fresh symbols enter from the top. Reels with N=0 stay put; each reel moves
+// independently by its own N.
+//
+// Presentation only — the caller supplies each step's per-reel shift vector and the post-shift
+// board. Fits classic fixed-line grids (5×3, 5×4, 5×5, …), not ways/cluster.
+/**
+ * PURE: lay out one reel's scroll tape (top→bottom). The `shift` fresh symbols (the top of the
+ * settled reel) stack above the reel's current symbols; the tape starts `shift` cells high so the
+ * current symbols fill the window, then slides down by `shift` to reveal the fresh ones. `shift` is
+ * clamped to the visible window height. Returns the stacked cells and the start offset (in cells,
+ * relative to row 0) the tape animates from.
+ */
+function buildReelStepTape(before, settledCol, shift) {
+    const rows = before.length;
+    const s = Math.max(0, Math.min(shift, rows));
+    const incoming = Array.from({ length: s }, (_, i) => settledCol[i] ?? { symbol: null });
+    return { stack: [...incoming, ...before], shift: s, startOffsetCells: 0 - s };
+}
+class ReelStepController {
+    _grid;
+    _resolve;
+    _cfg;
+    _win = DEFAULT_REEL_CONFIG.win;
+    _killed = false;
+    _mult;
+    _temp = [];
+    /** Board the in-flight step settles to — used to snap on skip(). */
+    _pending = null;
+    constructor(grid, resolve, cfg, win) {
+        this._grid = grid;
+        this._resolve = resolve;
+        this._cfg = cfg;
+        this._mult = cfg.multiplier.start;
+        if (win)
+            this._win = win;
+    }
+    setConfig(cfg) {
+        this._cfg = cfg;
+    }
+    setWin(win) {
+        this._win = win;
+    }
+    /** Killed, or the grid was torn down underneath us (rebuild mid-chain). */
+    get _dead() {
+        return this._killed || this._grid.destroyed;
+    }
+    get multiplier() {
+        return this._mult;
+    }
+    resetMultiplier() {
+        this._mult = this._cfg.multiplier.start;
+    }
+    advanceMultiplier() {
+        const m = this._cfg.multiplier;
+        if (!m.enabled)
+            return;
+        const next = m.mode === 'mul' ? this._mult * m.step : this._mult + m.step;
+        this._mult = m.cap != null ? Math.min(next, m.cap) : next;
+    }
+    /** Run one ReelStep: pay the winning cells, then scroll each reel down by shifts[col]. */
+    async step(step, stepIndex = 0, opts) {
+        if (this._grid.destroyed)
+            return;
+        this._killed = false;
+        this._pending = step.settledGrid;
+        // 1. celebrate/pay the winning cells.
+        await this._payWins(step, opts);
+        if (this._dead)
+            return;
+        // No shift → just settle the board (defensive; a real ReelStep always shifts something).
+        const hasShift = step.shifts.some((n) => n > 0);
+        if (!this._cfg.enabled || !hasShift) {
+            this._grid.setGrid(step.settledGrid);
+            if (step.winningCells.length)
+                this.advanceMultiplier();
+            this._pending = null;
+            return;
+        }
+        // 2. scroll every reel down by its own N (0 = untouched), all reels concurrently.
+        const turbo = opts?.turbo ? 0.5 : 1;
+        const decel = Math.min(this._cfg.perStepDecelCap, 1 + stepIndex * this._cfg.perStepDecel);
+        const f = turbo * decel;
+        await Promise.all(step.shifts.map((n, col) => n > 0 ? this._scrollReel(col, n, step.settledGrid, f) : Promise.resolve()));
+        if (this._dead) {
+            this._cleanupTemp();
+            return;
+        }
+        // 3. normalise + advance multiplier.
+        this._grid.setGrid(step.settledGrid);
+        this._resetPositions();
+        this._cleanupTemp();
+        this._pending = null;
+        if (step.winningCells.length)
+            this.advanceMultiplier();
+    }
+    /** Highlight + hold the winning cells, then release them back to rest before the shift. */
+    async _payWins(step, opts) {
+        if (!step.winningCells.length)
+            return;
+        const turbo = opts?.turbo ? 0.5 : 1;
+        const t = this._cfg.timings;
+        const hs = this._win.highlightScale;
+        const winSet = new Set(step.winningCells.map((w) => `${w.col}:${w.row}`));
+        if (this._cfg.dimNonWinners)
+            this._dim(winSet);
+        await Promise.all(step.winningCells.map((w) => {
+            const cell = this._grid.getCell(w.col, w.row);
+            if (this._win.glow)
+                cell.setState({ winning: true });
+            return Tween.to(cell, { 'scale.x': hs, 'scale.y': hs }, t.highlight * turbo, easingByName(this._cfg.easings.highlight));
+        }));
+        if (this._dead) {
+            this._undim();
+            return;
+        }
+        await Tween.delay(t.wait * turbo);
+        for (const w of step.winningCells) {
+            const cell = this._grid.getCell(w.col, w.row);
+            cell.setState({});
+            cell.scale.set(1);
+        }
+        this._undim();
+    }
+    /**
+     * Scroll one reel down by `n` positions. A tape carrying the reel's current symbols with `n`
+     * fresh symbols stacked on top slides down by `n` cells: the fresh symbols enter from the top,
+     * the existing ones ride down, and the bottom `n` ride off below the window. Ends on
+     * settledGrid[col]. The tape shares the cells' parent (so the reel mask, if any, clips it).
+     */
+    async _scrollReel(col, n, settledGrid, f) {
+        const rows = this._grid.rowsOf(col);
+        if (rows === 0 || this._dead)
+            return;
+        const realCells = Array.from({ length: rows }, (_, r) => this._grid.getCell(col, r));
+        const layer = realCells[0].parent ?? this._grid;
+        const base = this._grid.cellPosition(col, 0);
+        const step = rows > 1 ? this._grid.cellPosition(col, 1).y - base.y : this._grid.cellSize(col).height;
+        // current visible symbols (top→bottom), captured before we hide them
+        const before = realCells.map((c) => ({ ...c.data }));
+        const { stack, startOffsetCells } = buildReelStepTape(before, settledGrid[col] ?? [], n);
+        // Tape laid out top→bottom at local y = i*step: [incoming(shift)] above [before(rows)].
+        const tape = new pixi_js.Container();
+        tape.x = base.x;
+        for (let i = 0; i < stack.length; i++) {
+            const cell = new SymbolCell({ size: this._grid.cellSize(col), resolve: this._resolve });
+            cell.setData(stack[i]);
+            cell.position.set(0, i * step);
+            tape.addChild(cell);
+        }
+        // Start: the `before` block fills the window; the incoming block sits above it (masked off).
+        tape.y = base.y + startOffsetCells * step;
+        realCells.forEach((c) => (c.visible = false));
+        layer.addChild(tape);
+        this._temp.push(tape);
+        // Slide down by `shift` positions, with a small overshoot then settle-back.
+        const overshoot = step * 0.12;
+        await Tween.to(tape, { y: base.y + overshoot }, this._cfg.timings.drop * f, easingByName(this._cfg.easings.drop));
+        if (this._dead)
+            return;
+        await Tween.to(tape, { y: base.y }, Math.max(90, this._cfg.timings.refill * f), easingByName('easeOutQuad'));
+        if (this._dead)
+            return;
+        // Hand the settled symbols back to the real cells.
+        for (let r = 0; r < rows; r++)
+            realCells[r].setData(settledGrid[col]?.[r] ?? { symbol: null });
+        realCells.forEach((c) => (c.visible = true));
+        tape.destroy();
+        this._temp = this._temp.filter((tp) => tp !== tape);
+    }
+    _dim(winSet) {
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++)
+                if (!winSet.has(`${c}:${r}`))
+                    this._grid.getCell(c, r).alpha = this._cfg.dimAlpha;
+    }
+    _undim() {
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++) {
+                const cell = this._grid.getCell(c, r);
+                if (cell.alpha !== 0)
+                    cell.alpha = 1;
+            }
+    }
+    _resetPositions() {
+        if (this._grid.destroyed)
+            return;
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++) {
+                const cell = this._grid.getCell(c, r);
+                const { x, y } = this._grid.cellPosition(c, r);
+                cell.position.set(x, y);
+                cell.scale.set(1);
+                cell.alpha = 1;
+                cell.visible = true;
+            }
+    }
+    _cleanupTemp() {
+        for (const t of this._temp)
+            if (!t.destroyed)
+                t.destroy();
+        this._temp = [];
+    }
+    /** Hard-cancel: kill tweens, drop tapes, snap to the in-flight step's settled board. */
+    skip() {
+        this._killed = true;
+        for (let c = 0; c < this._grid.cols; c++)
+            for (let r = 0; r < this._grid.rowsOf(c); r++)
+                Tween.killTweensOf(this._grid.getCell(c, r));
+        this._cleanupTemp();
+        if (this._pending && !this._grid.destroyed)
+            this._grid.setGrid(this._pending);
+        this._pending = null;
+        this._resetPositions();
+    }
+}
+
+// packages/game-engine/src/slot/features/types.ts
+//
+// Uniform interface for special reel feature mechanics. Each feature is a presentation module:
+// given the current board + its config (and optional per-spin data), it plays an animation that
+// visualises the mechanic. `demo()` is the self-contained showcase the reel-lab playground triggers.
+// ── shared animation helpers ────────────────────────────────────────────────
+/** Center position of a cell, in fx-layer coordinates (fx shares the grid's transform). */
+function cellCenter(grid, col, row) {
+    return grid.cellPosition(col, row);
+}
+/** Vertical row-to-row step for a reel (falls back to the reel's cell height for 1-row reels). */
+function rowStepOf(grid, col = 0) {
+    if (grid.rowsOf(col) > 1)
+        return grid.cellPosition(col, 1).y - grid.cellPosition(col, 0).y;
+    return grid.cellSize(col).height;
+}
+/** Horizontal reel-to-reel step at a boundary (falls back to the reel's cell width for 1-col grids). */
+function colStepOf(grid, col = 0) {
+    if (col + 1 < grid.cols)
+        return grid.cellPosition(col + 1, 0).x - grid.cellPosition(col, 0).x;
+    return grid.cellSize(col).width;
+}
+/** A glowing ring drawn around a cell. Returns a disposer. */
+function glowRing(fx, grid, col, row, color) {
+    if (fx.destroyed)
+        return () => { };
+    const { x, y } = cellCenter(grid, col, row);
+    const { width, height } = grid.cellSize(col);
+    const g = new pixi_js.Graphics()
+        .roundRect(x - width / 2, y - height / 2, width, height, 10)
+        .stroke({ color, width: 3, alpha: 0.9 });
+    fx.addChild(g);
+    return () => g.destroy();
+}
+/** Pulse a cell up and back. */
+async function pulseCell(cell, scale = 1.15, ms = 220) {
+    if (cell.destroyed)
+        return;
+    await Tween.to(cell, { 'scale.x': scale, 'scale.y': scale }, ms * 0.5, easingByName('easeOutBack'));
+    if (cell.destroyed)
+        return;
+    await Tween.to(cell, { 'scale.x': 1, 'scale.y': 1 }, ms * 0.5, easingByName('easeOutQuad'));
+}
+/** Floating label that rises and fades. */
+async function floatLabel(fx, x, y, text, color = 0xffd24a, ms = 700) {
+    if (fx.destroyed)
+        return;
+    const t = new pixi_js.Text({ text, style: { fontSize: 26, fill: color, fontWeight: '800' } });
+    t.anchor.set(0.5);
+    t.position.set(x, y);
+    t.scale.set(0.5);
+    fx.addChild(t);
+    await Tween.to(t, { 'scale.x': 1, 'scale.y': 1 }, ms * 0.25, easingByName('easeOutBack'));
+    await Tween.to(t, { y: y - 50, alpha: 0 }, ms * 0.75, easingByName('easeOutQuad'));
+    t.destroy();
+}
+/** Replace a cell's symbol with a quick morph (shrink → swap → pop). */
+async function morphSymbol(cell, data, ms = 280) {
+    if (cell.destroyed)
+        return;
+    await Tween.to(cell, { 'scale.x': 0.1, 'scale.y': 0.1 }, ms * 0.4, easingByName('easeInBack'));
+    if (cell.destroyed)
+        return;
+    cell.setData(data);
+    cell.scale.set(0.1);
+    await Tween.to(cell, { 'scale.x': 1, 'scale.y': 1 }, ms * 0.6, easingByName('easeOutBack'));
+}
+/** Drop a cell in from above its home position. */
+async function dropCell(grid, cell, col, row, ms = 280) {
+    if (cell.destroyed)
+        return;
+    const home = grid.cellPosition(col, row);
+    cell.position.set(home.x, home.y - rowStepOf(grid, col) * (row + 2));
+    cell.alpha = 1;
+    cell.scale.set(1);
+    await Tween.to(cell, { 'position.y': home.y }, ms, easingByName('easeOutBounce'));
+}
+function pickFromBoard(board, predicate) {
+    const out = [];
+    for (let c = 0; c < board.length; c++)
+        for (let r = 0; r < (board[c]?.length ?? 0); r++)
+            if (board[c][r] && predicate(board[c][r], c, r))
+                out.push({ col: c, row: r });
+    return out;
+}
+
+// packages/game-engine/src/slot/features/wilds.ts
+function reelsOf(cfg, cols) {
+    return cfg.length
+        ? cfg.filter((r) => r >= 0 && r < cols)
+        : Array.from({ length: cols }, (_, i) => i);
+}
+const randInt = (a, b, seed) => Math.min(b, a + Math.floor(((Math.sin(seed * 99.13) + 1) / 2) * (b - a + 1)));
+/** Expanding wild: a landed wild grows to fill its whole reel. */
+const ExpandingWild = {
+    key: 'expandingWild',
+    label: 'Expanding wild',
+    enabled: (c) => c.features.expandingWild.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.expandingWild;
+        if (f.onlyInFreeSpins && !ctx.freeSpins) {
+            ctx.log?.('Expanding wild: free-spins only');
+            return;
+        }
+        const cols = ctx.grid.cols;
+        const eligible = reelsOf(f.reels, cols);
+        const reel = eligible[randInt(0, eligible.length - 1, cols)];
+        const rows = ctx.grid.rowsOf(reel);
+        ctx.log?.(`Expanding wild on reel ${reel}`);
+        const disposers = [];
+        for (let r = 0; r < (f.toFullReel ? rows : Math.min(2, rows)); r++) {
+            const cell = ctx.grid.getCell(reel, r);
+            await morphSymbol(cell, { symbol: f.symbol }, f.ms / Math.max(1, rows));
+            disposers.push(glowRing(ctx.fx, ctx.grid, reel, r, 0xffd700));
+            if (ctx.board[reel])
+                ctx.board[reel][r] = { symbol: f.symbol };
+        }
+        await Tween.delay(500);
+        disposers.forEach((d) => d());
+    },
+};
+/** Sticky symbols: chosen symbols lock in place for N spins. */
+const StickySymbols = {
+    key: 'sticky',
+    label: 'Sticky symbols',
+    enabled: (c) => c.features.sticky.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.sticky;
+        const targets = pickFromBoard(ctx.board, (c) => !!c.symbol).slice(0, 3);
+        const picks = targets.filter((_, i) => i % 2 === 0);
+        ctx.log?.(`Sticky: locking ${picks.length} cell(s) for ${f.durationSpins || 'feature'} spins`);
+        await Promise.all(picks.map(async (p, i) => {
+            const cell = ctx.grid.getCell(p.col, p.row);
+            cell.setData({ symbol: f.symbols[0] ?? 'wild', sticky: { remaining: f.durationSpins } });
+            glowRing(ctx.fx, ctx.grid, p.col, p.row, f.ringColor);
+            await pulseCell(cell, 1.2, 260);
+            const { x, y } = cellCenter(ctx.grid, p.col, p.row);
+            await floatLabel(ctx.fx, x, y - ctx.grid.cellSize(p.col).height / 2, f.durationSpins ? `STICKY ${f.durationSpins}` : 'STICKY', f.ringColor, 600 + i * 50);
+        }));
+    },
+};
+/** Walking wild: a wild shifts one reel each spin until it leaves the grid. */
+const WalkingWild = {
+    key: 'walkingWild',
+    label: 'Walking wild',
+    enabled: (c) => c.features.walkingWild.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.walkingWild;
+        const cols = ctx.grid.cols;
+        const dir = f.direction === 'left' ? -1 : 1;
+        let col = dir === 1 ? 0 : cols - 1;
+        // clamp the row into each reel's own height (Megaways reels differ in length)
+        const rowIn = (c) => Math.min(Math.floor(ctx.grid.rowsOf(col) / 2), ctx.grid.rowsOf(c) - 1);
+        let row = rowIn(col);
+        await morphSymbol(ctx.grid.getCell(col, row), { symbol: f.symbol }, 240);
+        ctx.log?.(`Walking wild marching ${f.direction}`);
+        // walk across the grid
+        for (let step = 0; step < cols; step++) {
+            const next = col + dir * f.stepPerSpin;
+            if (next < 0 || next >= cols)
+                break;
+            const nextRow = rowIn(next);
+            const from = cellCenter(ctx.grid, col, row);
+            const to = cellCenter(ctx.grid, next, nextRow);
+            ctx.grid.getCell(col, row).setData({ symbol: null });
+            const ghost = ctx.grid.getCell(next, nextRow);
+            ghost.setData({ symbol: f.symbol });
+            ghost.position.set(from.x, from.y);
+            const ring = glowRing(ctx.fx, ctx.grid, next, nextRow, 0xff66cc);
+            await Tween.to(ghost, { 'position.x': to.x, 'position.y': to.y }, 260, easingByName('easeInOutQuad'));
+            ring();
+            col = next;
+            row = nextRow;
+        }
+    },
+};
+/** Random wild injection: a few wilds drop onto random positions. */
+const RandomWild = {
+    key: 'randomWild',
+    label: 'Random wild injection',
+    enabled: (c) => c.features.randomWild.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.randomWild;
+        const n = Array.isArray(f.count) ? randInt(f.count[0], f.count[1], ctx.grid.cols + 7) : f.count;
+        const spots = pickFromBoard(ctx.board, () => true);
+        const chosen = [];
+        for (let i = 0; i < n && spots.length; i++)
+            chosen.push(spots.splice(randInt(0, spots.length - 1, i + 3), 1)[0]);
+        ctx.log?.(`Injecting ${chosen.length} wild(s)${f.sticky ? ' (sticky)' : ''}${f.multiplier > 1 ? ` ×${f.multiplier}` : ''}`);
+        await Promise.all(chosen.map(async (p) => {
+            const cell = ctx.grid.getCell(p.col, p.row);
+            cell.setData({
+                symbol: 'wild',
+                multiplier: f.multiplier > 1 ? f.multiplier : undefined,
+                sticky: f.sticky ? { remaining: 0 } : undefined,
+            });
+            await dropCell(ctx.grid, cell, p.col, p.row, 300);
+            if (f.sticky)
+                glowRing(ctx.fx, ctx.grid, p.col, p.row, 0xec4899);
+        }));
+    },
+};
+
+// packages/game-engine/src/slot/features/symbols.ts
+const pick = (arr, seed) => arr[Math.floor(((Math.sin(seed * 12.9898) + 1) / 2) * arr.length) % arr.length];
+/** Mystery symbols: all mystery tiles reveal the SAME single random symbol per spin. */
+const MysterySymbols = {
+    key: 'mystery',
+    label: 'Mystery symbols',
+    enabled: (c) => c.features.mystery.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.mystery;
+        const spots = pickFromBoard(ctx.board, () => true)
+            .filter((_, i) => i % 3 === 0)
+            .slice(0, 5);
+        spots.forEach((p) => ctx.grid.getCell(p.col, p.row).setData({ symbol: f.symbol }));
+        await Promise.all(spots.map((p) => pulseCell(ctx.grid.getCell(p.col, p.row), 1.1, 200)));
+        const pool = f.revealPool.length ? f.revealPool : ['h1', 'h2', 'h3'];
+        const reveal = pick(pool, ctx.grid.cols + spots.length);
+        ctx.log?.(`Mystery: ${spots.length} tiles reveal "${reveal}"`);
+        await Promise.all(spots.map((p) => morphSymbol(ctx.grid.getCell(p.col, p.row), { symbol: reveal }, f.ms)));
+        spots.forEach((p) => {
+            if (ctx.board[p.col])
+                ctx.board[p.col][p.row] = { symbol: reveal };
+        });
+    },
+};
+/** Symbol transform / upgrade: every instance of one symbol type becomes another. */
+const SymbolTransform = {
+    key: 'transform',
+    label: 'Symbol transform / upgrade',
+    enabled: (c) => c.features.transform.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.transform;
+        const present = Array.from(new Set(pickFromBoard(ctx.board, (c) => !!c.symbol).map((p) => ctx.board[p.col][p.row].symbol)));
+        const lows = present.filter((s) => /^(l|o|a|k|q|j|t|10)/i.test(s));
+        const source = f.source === 'randomLow'
+            ? (pick(lows.length ? lows : present, ctx.grid.cols) ?? present[0])
+            : f.source;
+        if (!source) {
+            ctx.log?.('Transform: nothing to convert');
+            return;
+        }
+        const matches = pickFromBoard(ctx.board, (c) => c.symbol === source);
+        const targets = f.allInstances ? matches : matches.slice(0, 1);
+        ctx.log?.(`Transform: ${targets.length}× "${source}" → "${f.target}"`);
+        await Promise.all(targets.map(async (p, i) => {
+            await Tween.delay(i * 40);
+            await morphSymbol(ctx.grid.getCell(p.col, p.row), { symbol: f.target }, f.ms);
+            if (ctx.board[p.col])
+                ctx.board[p.col][p.row] = { symbol: f.target };
+        }));
+    },
+};
+/** Giant / colossal symbol spanning width×height cells. */
+const GiantSymbol = {
+    key: 'giant',
+    label: 'Giant / colossal symbol',
+    enabled: (c) => c.features.giant.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.giant;
+        if (f.onlyInFreeSpins && !ctx.freeSpins) {
+            ctx.log?.('Giant: free-spins only');
+            return;
+        }
+        const cols = ctx.grid.cols;
+        const w = Math.min(f.width, cols);
+        const anchorCol = Math.max(0, Math.floor((cols - w) / 2));
+        // span only as tall as the SHORTEST covered reel so every covered cell exists (Megaways-safe)
+        let minRows = ctx.grid.rowsOf(anchorCol);
+        for (let c = anchorCol; c < anchorCol + w; c++)
+            minRows = Math.min(minRows, ctx.grid.rowsOf(c));
+        const h = Math.min(f.height, minRows);
+        const sym = f.symbols.length ? pick(f.symbols, cols) : 'h1';
+        ctx.log?.(`Giant ${w}×${h} "${sym}"`);
+        const view = ctx.resolve(sym);
+        if (!view)
+            return;
+        const cs = ctx.grid.cellSize(anchorCol);
+        const stepX = colStepOf(ctx.grid, anchorCol);
+        const step = rowStepOf(ctx.grid, anchorCol);
+        const tl = cellCenter(ctx.grid, anchorCol, 0);
+        const giant = new pixi_js.Container();
+        giant.addChild(view);
+        // span w×h cells (footprint ignores gaps, matching the previous single-cell unit)
+        view.resize?.({ width: cs.width * w, height: cs.height * h });
+        giant.position.set(tl.x + ((w - 1) * stepX) / 2, tl.y + ((h - 1) * step) / 2);
+        // hide covered cells
+        for (let c = anchorCol; c < anchorCol + w; c++)
+            for (let r = 0; r < h; r++)
+                ctx.grid.getCell(c, r).visible = false;
+        giant.scale.set(0.2);
+        giant.alpha = 0;
+        ctx.fx.addChild(giant);
+        await Tween.to(giant, { 'scale.x': 1, 'scale.y': 1, alpha: 1 }, 420, easingByName('easeOutBack'));
+        await Tween.delay(600);
+        giant.destroy();
+        for (let c = anchorCol; c < anchorCol + w; c++)
+            for (let r = 0; r < h; r++)
+                ctx.grid.getCell(c, r).visible = true;
+    },
+};
+/** Split symbol (xSplit): doubles every symbol to its left. */
+const SplitSymbol = {
+    key: 'split',
+    label: 'Split symbol (xSplit)',
+    enabled: (c) => c.features.split.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.split;
+        const cols = ctx.grid.cols;
+        const splitReel = f.reels.length ? f.reels[0] : cols - 1;
+        const row = Math.floor(ctx.grid.rowsOf(splitReel) / 2);
+        await morphSymbol(ctx.grid.getCell(splitReel, row), { symbol: f.symbol }, 240);
+        ctx.log?.(`Split ×${f.factor}: doubling symbols left of reel ${splitReel}`);
+        const left = pickFromBoard(ctx.board, (_c, col) => col < splitReel);
+        await Promise.all(left.map(async (p, i) => {
+            await Tween.delay((i % 6) * 30);
+            const { x, y } = cellCenter(ctx.grid, p.col, p.row);
+            const cs = ctx.grid.cellSize(p.col);
+            await pulseCell(ctx.grid.getCell(p.col, p.row), 1.12, 200);
+            await floatLabel(ctx.fx, x + cs.width / 3, y - cs.height / 3, `×${f.factor}`, 0x9b5cff, 600);
+        }));
+    },
+};
+/** Stacked symbols: a reel shows a full stack of one symbol. */
+const StackedSymbols = {
+    key: 'stacked',
+    label: 'Stacked symbols',
+    enabled: (c) => c.features.stacked.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.stacked;
+        const cols = ctx.grid.cols;
+        const reel = Math.floor(cols / 2);
+        const rows = ctx.grid.rowsOf(reel);
+        const sym = f.symbols.length ? pick(f.symbols, reel) : 'h1';
+        const height = Math.min(f.height, rows);
+        ctx.log?.(`Stacked "${sym}" ×${height} on reel ${reel}`);
+        const start = Math.floor((rows - height) / 2);
+        await Promise.all(Array.from({ length: height }, (_, i) => start + i).map(async (r, i) => {
+            await Tween.delay(i * 50);
+            const cell = ctx.grid.getCell(reel, r);
+            await morphSymbol(cell, { symbol: sym }, 220);
+            if (ctx.board[reel])
+                ctx.board[reel][r] = { symbol: sym };
+        }));
+    },
+};
+
+// packages/game-engine/src/slot/features/extra.ts
+const seeded = (a, b, seed) => Math.min(b, a + Math.floor(((Math.sin(seed * 53.17) + 1) / 2) * (b - a + 1)));
+/** Multiplier symbols: marked cells carry values that combine into the win. */
+const MultiplierSymbols = {
+    key: 'multiplier',
+    label: 'Multiplier symbols',
+    enabled: (c) => c.features.multiplier.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.multiplier;
+        const spots = pickFromBoard(ctx.board, () => true)
+            .filter((_, i) => i % 4 === 0)
+            .slice(0, 3);
+        const values = [2, 3, 5].slice(0, spots.length);
+        spots.forEach((p, i) => ctx.grid.getCell(p.col, p.row).setData({ symbol: f.symbol ?? 'wild', multiplier: values[i] }));
+        await Promise.all(spots.map((p) => pulseCell(ctx.grid.getCell(p.col, p.row), 1.2, 240)));
+        const total = f.combine === 'additive'
+            ? values.reduce((a, b) => a + b, 0)
+            : values.reduce((a, b) => a * b, 1);
+        const capped = Math.min(total, f.max);
+        ctx.log?.(`Multiplier (${f.combine}, ${f.scope}): ${values.join(f.combine === 'additive' ? ' + ' : ' × ')} = ×${capped}`);
+        // fly each value toward the centre, then show the combined total
+        await Promise.all(spots.map(async (p) => {
+            const { x, y } = cellCenter(ctx.grid, p.col, p.row);
+            await floatLabel(ctx.fx, x, y, `×${values[spots.indexOf(p)]}`, 0xffd24a, 500);
+        }));
+        const { x: cx, y: cy } = ctx.grid.center();
+        await floatLabel(ctx.fx, cx, cy, `×${capped}`, 0xffe24a, 900);
+    },
+};
+/** Nudge / xNudge: a reel nudges one position (xNudge fills a stacked wild, +1 mult per nudge). */
+const NudgeReels = {
+    key: 'nudge',
+    label: 'Nudge / xNudge',
+    enabled: (c) => c.features.nudge.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.nudge;
+        const cols = ctx.grid.cols;
+        const reel = f.reels.length ? f.reels[0] : Math.floor(cols / 2);
+        const rows = ctx.grid.rowsOf(reel);
+        ctx.log?.(f.toFullReel ? `xNudge: filling reel ${reel} with wild` : `Nudge reel ${reel} by ${f.step}`);
+        if (f.toFullReel) {
+            let mult = f.multiplierStart;
+            for (let r = 0; r < rows; r++) {
+                const cell = ctx.grid.getCell(reel, r);
+                await morphSymbol(cell, { symbol: 'wild', multiplier: mult > 1 ? mult : undefined }, 160);
+                mult += f.multiplierPerNudge;
+            }
+            const { x, y } = cellCenter(ctx.grid, reel, Math.floor(rows / 2));
+            await floatLabel(ctx.fx, x, y, `×${mult - f.multiplierPerNudge}`, 0xff7a3c, 800);
+        }
+        else {
+            // shift the whole column down by `step` cells, then settle
+            const step = ctx.grid.cellPosition(reel, 1).y - ctx.grid.cellPosition(reel, 0).y;
+            const cells = Array.from({ length: rows }, (_, r) => ctx.grid.getCell(reel, r));
+            await Promise.all(cells.map((c) => Tween.to(c, { 'position.y': c.y + step * f.step }, 240, easingByName('easeOutBack'))));
+            cells.forEach((c, r) => c.position.set(ctx.grid.cellPosition(reel, r).x, ctx.grid.cellPosition(reel, r).y));
+        }
+    },
+};
+/** Hold-and-spin / Hold & Win: special symbols lock and respins reset on each new lock. */
+const HoldAndSpin = {
+    key: 'holdAndSpin',
+    label: 'Hold & Spin (respin)',
+    enabled: (c) => c.features.holdAndSpin.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.holdAndSpin;
+        const all = pickFromBoard(ctx.board, () => true);
+        const sym = f.lockSymbols[0] ?? 'coin';
+        const locked = new Set();
+        const lock = async (p, value) => {
+            const cell = ctx.grid.getCell(p.col, p.row);
+            cell.setData({ symbol: sym });
+            await dropCell(ctx.grid, cell, p.col, p.row, 240);
+            glowRing(ctx.fx, ctx.grid, p.col, p.row, 0xffcf5c);
+            const { x, y } = cellCenter(ctx.grid, p.col, p.row);
+            await floatLabel(ctx.fx, x, y, value, 0xffe24a, 500);
+            locked.add(`${p.col}:${p.row}`);
+        };
+        // trigger
+        const trigger = all.slice(0, f.triggerThreshold);
+        ctx.log?.(`Hold & Spin triggered with ${trigger.length} ${sym}`);
+        await Promise.all(trigger.map((p, i) => lock(p, `${(i + 1) * 5}`)));
+        let respins = f.respinsAwarded;
+        let round = 0;
+        while (respins > 0) {
+            round++;
+            const free = all.filter((p) => !locked.has(`${p.col}:${p.row}`));
+            const landed = free.filter((_, i) => seeded(0, 3, i + round * 3) === 0).slice(0, 2);
+            ctx.log?.(`Respin ${round}: ${respins} left` + (landed.length ? ` — ${landed.length} new lock` : ''));
+            if (landed.length && f.resetOnNewSymbol) {
+                respins = f.respinsAwarded;
+                await Promise.all(landed.map((p) => lock(p, 'JP')));
+            }
+            else
+                respins--;
+            if (locked.size >= all.length) {
+                ctx.log?.(f.fullGridAwardsGrand ? 'Full grid — GRAND!' : 'Full grid');
+                break;
+            }
+            await Tween.delay(120);
+        }
+        ctx.log?.(`Hold & Spin: ${locked.size} locked`);
+    },
+};
+/** Random pre-spin reel modifiers (add rows, inject wilds, set giant, guaranteed wilds). */
+const ReelModifier = {
+    key: 'reelModifier',
+    label: 'Random reel modifier',
+    enabled: (c) => c.features.reelModifier.enabled,
+    async demo(ctx) {
+        const f = ctx.cfg.features.reelModifier;
+        const pool = f.pool.length
+            ? f.pool
+            : [{ effect: 'addWilds', magnitude: 3, weight: 1 }];
+        const totalW = pool.reduce((a, m) => a + m.weight, 0);
+        let roll = ((Math.sin(ctx.grid.cols * 7.7) + 1) / 2) * totalW;
+        let mod = pool[0];
+        for (const m of pool) {
+            roll -= m.weight;
+            if (roll <= 0) {
+                mod = m;
+                break;
+            }
+        }
+        ctx.log?.(`Reel modifier: ${mod.effect} (+${mod.magnitude})`);
+        if (mod.effect === 'addRows') {
+            const next = ctx.grid.rowsPerReel.map((r) => r + mod.magnitude);
+            // grow the board (new cells on top) and keep the system config in sync so the new rows
+            // aren't blank and a later spin/rebuild doesn't revert the shape
+            for (let c = 0; c < ctx.board.length; c++) {
+                const col = ctx.board[c] ?? (ctx.board[c] = []);
+                const fill = col[0]?.symbol ?? 'h1';
+                for (let i = 0; i < mod.magnitude; i++)
+                    col.unshift({ symbol: fill });
+            }
+            ctx.cfg.grid.rowsPerReel = next;
+            ctx.grid.reshape(next);
+            ctx.grid.setGrid(ctx.board);
+        }
+        else if (mod.effect === 'addWilds' || mod.effect === 'guaranteedWilds') {
+            const spots = pickFromBoard(ctx.board, () => true);
+            const chosen = [];
+            for (let i = 0; i < mod.magnitude && spots.length; i++)
+                chosen.push(spots.splice(seeded(0, spots.length - 1, i), 1)[0]);
+            await Promise.all(chosen.map(async (p) => {
+                const cell = ctx.grid.getCell(p.col, p.row);
+                cell.setData({ symbol: 'wild' });
+                await dropCell(ctx.grid, cell, p.col, p.row, 280);
+            }));
+        }
+        else if (mod.effect === 'setGiant') {
+            const cell = ctx.grid.getCell(0, 0);
+            await pulseCell(cell, 1.3, 300);
+        }
+    },
+};
+
+/** All feature modules keyed by their FeatureKey. */
+const FEATURES = {
+    expandingWild: ExpandingWild,
+    sticky: StickySymbols,
+    walkingWild: WalkingWild,
+    randomWild: RandomWild,
+    mystery: MysterySymbols,
+    transform: SymbolTransform,
+    giant: GiantSymbol,
+    split: SplitSymbol,
+    stacked: StackedSymbols,
+    multiplier: MultiplierSymbols,
+    nudge: NudgeReels,
+    holdAndSpin: HoldAndSpin,
+    reelModifier: ReelModifier,
+};
+/** Features in canonical resolve order (see docs §3.4). */
+const FEATURE_LIST = FEATURE_KEYS.map((k) => FEATURES[k]);
+
+// packages/game-engine/src/slot/system/ReelSystem.ts
+//
+// The configurable reel system facade. `createReelSystem({ resolve, config })` builds a grid and
+// wires the spin engine, anticipation controller, tumble/cascade controller and the special-feature
+// registry — all driven by one `ReelSystemConfig`. Presentation only: it draws boards you feed it.
+/** Drop a `rowsPerReel` whose length no longer matches `cols` so geometry/ways stay consistent. */
+function normalizeGrid(cfg) {
+    if (cfg.grid.rowsPerReel && cfg.grid.rowsPerReel.length !== cfg.grid.cols) {
+        const next = { ...cfg, grid: { ...cfg.grid } };
+        delete next.grid.rowsPerReel;
+        return next;
+    }
+    return cfg;
+}
+function createReelSystem(opts) {
+    let config = normalizeGrid(resolveReelConfig(opts.config));
+    const resolve = opts.resolve;
+    const log = opts.log;
+    const view = new pixi_js.Container();
+    let grid;
+    let fx;
+    let spin;
+    let anticipation;
+    let tumble;
+    let reelStepCtl;
+    let board = opts.board ?? emptyBoard(config);
+    // custom features keyed by id; built-ins live in FEATURES/FEATURE_LIST
+    const custom = new Map();
+    for (const f of opts.features ?? [])
+        custom.set(f.key, f);
+    const allFeatures = () => {
+        const seen = new Set();
+        const out = [];
+        for (const f of [...FEATURE_LIST, ...custom.values()]) {
+            const eff = custom.get(f.key) ?? f; // a custom feature overrides a built-in with the same key
+            if (seen.has(eff.key))
+                continue;
+            seen.add(eff.key);
+            out.push(eff);
+        }
+        return out;
+    };
+    const findFeature = (key) => custom.get(key) ?? FEATURES[key];
+    function buildGrid() {
+        if (grid) {
+            spin?.skip();
+            tumble?.skip();
+            reelStepCtl?.skip();
+            for (const child of fx?.children.slice() ?? [])
+                Tween.killTweensOf(child);
+            grid.destroy({ children: true });
+        }
+        grid = new ReelGrid({
+            cols: config.grid.cols,
+            rows: config.grid.rows,
+            rowsPerReel: config.grid.rowsPerReel ?? effectiveRowsPerReel(config.grid),
+            cellSize: config.grid.cellSize,
+            cellWidth: config.grid.cellWidth,
+            cellHeight: config.grid.cellHeight,
+            cellSizePerReel: config.grid.cellSizePerReel,
+            gap: config.grid.gap,
+            colGap: config.grid.colGap,
+            rowGap: config.grid.rowGap,
+            resolve,
+            frameStyle: config.grid.frameStyle,
+            mask: config.grid.mask,
+            decoration: config.grid.decoration?.padding
+                ? { padding: config.grid.decoration.padding }
+                : undefined,
+        });
+        fx = new pixi_js.Container();
+        grid.addChild(fx);
+        view.addChild(grid);
+        spin = new SpinEngine(grid, resolve, config.motion, config.win);
+        anticipation = new AnticipationController(config.anticipation);
+        tumble = new TumbleController(grid, config.cascade, config.win);
+        reelStepCtl = new ReelStepController(grid, resolve, config.cascade, config.win);
+        grid.setGrid(board);
+    }
+    function geometryChanged(next) {
+        const a = config.grid, b = next.grid;
+        return (a.cols !== b.cols ||
+            a.rows !== b.rows ||
+            a.cellSize !== b.cellSize ||
+            a.cellWidth !== b.cellWidth ||
+            a.cellHeight !== b.cellHeight ||
+            a.gap !== b.gap ||
+            a.mask !== b.mask ||
+            JSON.stringify(a.cellSizePerReel) !== JSON.stringify(b.cellSizePerReel) ||
+            JSON.stringify(a.colGap) !== JSON.stringify(b.colGap) ||
+            JSON.stringify(a.rowGap) !== JSON.stringify(b.rowGap) ||
+            JSON.stringify(a.rowsPerReel) !== JSON.stringify(b.rowsPerReel) ||
+            (a.decoration?.padding ?? 0) !== (b.decoration?.padding ?? 0));
+    }
+    function ctx(freeSpins) {
+        return { grid, resolve, cfg: config, fx, board, freeSpins, log };
+    }
+    buildGrid();
+    const api = {
+        view,
+        get grid() {
+            return grid;
+        },
+        get fx() {
+            return fx;
+        },
+        get config() {
+            return config;
+        },
+        get board() {
+            return board;
+        },
+        get ways() {
+            return waysCount(config.grid);
+        },
+        setBoard(next) {
+            board = next;
+            // grow the board to the grid shape so feature code can index safely
+            grid.setGrid(next);
+        },
+        setConfig(next) {
+            const norm = normalizeGrid(next);
+            const rebuild = geometryChanged(norm);
+            config = norm;
+            if (rebuild)
+                buildGrid();
+            else {
+                spin.setConfig(config.motion);
+                spin.setWin(config.win);
+                anticipation.setConfig(config.anticipation);
+                tumble.setConfig(config.cascade);
+                tumble.setWin(config.win);
+                reelStepCtl.setConfig(config.cascade);
+                reelStepCtl.setWin(config.win);
+            }
+        },
+        update(partial) {
+            api.setConfig(mergeReelConfig(config, partial));
+        },
+        async spin(target, runOpts) {
+            const data = { targetGrid: target };
+            const decision = anticipation.decide(target);
+            let resetZoom = null;
+            if (decision.active) {
+                log?.(`Anticipation on reels [${decision.reels.join(', ')}]`);
+                resetZoom = await anticipation.zoomIn(grid);
+            }
+            await spin.run(data, {
+                ...runOpts,
+                anticipateReels: decision.active ? decision.reels : undefined,
+                anticipateSlowdown: decision.slowdown,
+                anticipateHoldMs: decision.holdMs,
+            });
+            if (resetZoom)
+                await resetZoom();
+            board = target;
+        },
+        get multiplier() {
+            // cascade and reelStep share the same config start; only the active mechanic climbs.
+            return Math.max(tumble.multiplier, reelStepCtl.multiplier);
+        },
+        async cascade(steps, cOpts) {
+            // keep the multiplier climbing across free-spins when configured; otherwise reset per spin
+            const persist = config.cascade.multiplier.persistInFreeSpins && !!cOpts?.freeSpins;
+            if (!persist)
+                tumble.resetMultiplier();
+            for (let i = 0; i < steps.length; i++) {
+                await tumble.step(steps[i], i, cOpts);
+                board = steps[i].settledGrid;
+            }
+            if (config.cascade.multiplier.enabled)
+                log?.(`Cascade multiplier ×${tumble.multiplier}`);
+        },
+        async reelStep(steps, rOpts) {
+            const persist = config.cascade.multiplier.persistInFreeSpins && !!rOpts?.freeSpins;
+            if (!persist)
+                reelStepCtl.resetMultiplier();
+            for (let i = 0; i < steps.length; i++) {
+                await reelStepCtl.step(steps[i], i, rOpts);
+                board = steps[i].settledGrid;
+            }
+            if (config.cascade.multiplier.enabled)
+                log?.(`ReelStep multiplier ×${reelStepCtl.multiplier}`);
+        },
+        registerFeature(feature) {
+            custom.set(feature.key, feature);
+        },
+        features() {
+            return allFeatures();
+        },
+        enabledFeatures() {
+            return allFeatures().filter((f) => f.enabled(config));
+        },
+        featureContext(fOpts) {
+            return ctx(fOpts?.freeSpins);
+        },
+        async runFeature(key, fOpts) {
+            const feature = findFeature(key);
+            if (!feature) {
+                log?.(`Unknown feature "${key}"`);
+                return;
+            }
+            if (!feature.enabled(config)) {
+                log?.(`${feature.label} is disabled`);
+                return;
+            }
+            await feature.demo(ctx(fOpts?.freeSpins));
+        },
+        resize(cellSize) {
+            config = mergeReelConfig(config, { grid: { cellSize } });
+            grid.resize(cellSize);
+        },
+        skip() {
+            spin.skip();
+            tumble.skip();
+            reelStepCtl.skip();
+            // kill in-flight overlay tweens (labels/rings) so a rebuild never animates destroyed nodes
+            for (const child of fx.children.slice())
+                Tween.killTweensOf(child);
+            fx.removeChildren().forEach((c) => c.destroy());
+        },
+        destroy() {
+            api.skip();
+            grid.destroy({ children: true });
+            view.destroy({ children: true });
+        },
+    };
+    return api;
+}
+function emptyBoard(cfg) {
+    const rows = effectiveRowsPerReel(cfg.grid);
+    return Array.from({ length: cfg.grid.cols }, (_, c) => Array.from({ length: rows[c] }, () => ({ symbol: null })));
+}
+
+// Built-in node contributions: the core vocabulary every scene doc can rely on.
+// Everything else (ropes, meters, particles, game HUDs) arrives as a ScenePlugin through
+// the same contribution shape — built-ins get no special powers.
+const num = (v, fallback) => (typeof v === 'number' && Number.isFinite(v) ? v : fallback);
+const str = (v, fallback) => (typeof v === 'string' ? v : fallback);
+// ── container / layer ───────────────────────────────────────────────────────────────
+function containerContribution(kind) {
+    return {
+        kind,
+        agentDoc: 'Grouping node; order of children = z-order. Keep it un-laid-out (identity) unless you move a whole group. With props.space {width,height} it becomes a nested coordinate space: descendants lay out inside that fixed design space and its own rule places the space (cover → the diorama idiom). Natural size = space size, else 0×0.',
+        create(node) {
+            const view = new pixi_js.Container();
+            return {
+                view,
+                measure() {
+                    const space = node.props?.space;
+                    return space && typeof space.width === 'number' && typeof space.height === 'number'
+                        ? { width: space.width, height: space.height }
+                        : { width: 0, height: 0 };
+                },
+                applyProps(props) {
+                    view.alpha = num(props.alpha, 1);
+                },
+            };
+        },
+    };
+}
+// ── rect (plates, masks, dimmers) ───────────────────────────────────────────────────
+const rectContribution = {
+    kind: 'rect',
+    agentDoc: 'Solid rounded rectangle: plates behind text, dimmers, and mask targets (reference its id from another node\'s `mask`). Props: width, height, fill, alpha, radius, stroke {color,width}.',
+    create(node) {
+        const g = new pixi_js.Graphics();
+        let size = { width: 0, height: 0 };
+        const draw = (props) => {
+            const width = num(props.width, 100);
+            const height = num(props.height, 100);
+            const radius = num(props.radius, 0);
+            size = { width, height };
+            g.clear();
+            g.roundRect(0, 0, width, height, radius).fill({
+                color: str(props.fill, '#ffffff'),
+                alpha: num(props.alpha, 1),
+            });
+            const stroke = props.stroke;
+            if (stroke) {
+                g.roundRect(0, 0, width, height, radius).stroke({
+                    color: stroke.color ?? '#ffffff',
+                    width: stroke.width ?? 2,
+                });
+            }
+        };
+        draw(node.props ?? {});
+        return { view: g, measure: () => size, applyProps: draw };
+    },
+};
+function spriteInstance(node, ctx) {
+    // The sprite lives inside a wrapper so content-level transforms (flipX) survive the
+    // engine overwriting the node view's scale every layout.
+    const wrapper = new pixi_js.Container();
+    const sprite = new pixi_js.Sprite(pixi_js.Texture.EMPTY);
+    wrapper.addChild(sprite);
+    const resolveTexture = (p) => {
+        const alias = str(p.src, '');
+        const full = alias ? ctx.texture(alias) : pixi_js.Texture.EMPTY;
+        const region = p.region;
+        if (!region || full === pixi_js.Texture.EMPTY)
+            return full;
+        // Sub-rect of the texture, in fractions (half-cut castles/veils, atlas crops).
+        const frame = full.frame;
+        return new pixi_js.Texture({
+            source: full.source,
+            frame: new pixi_js.Rectangle(frame.x + (region.left ?? 0) * frame.width, frame.y + (region.top ?? 0) * frame.height, (region.width ?? 1) * frame.width, (region.height ?? 1) * frame.height),
+        });
+    };
+    // applyProps receives the FULL effective props each time (base + orientation + state),
+    // so absent keys must reset to defaults — otherwise leaving a state leaks its look.
+    const apply = (p) => {
+        sprite.texture = resolveTexture(p);
+        // Visual props go on the wrapper (the node's view) so tint/alpha are observable and
+        // patchable on the node itself; the inner sprite only carries texture + flip.
+        wrapper.tint = p.tint ?? 0xffffff;
+        wrapper.alpha = num(p.alpha, 1);
+        const flip = p.flipX === true;
+        sprite.scale.x = flip ? -1 : 1;
+        sprite.position.x = flip ? sprite.texture.width : 0;
+    };
+    apply(node.props ?? {});
+    return {
+        view: wrapper,
+        measure: () => ({ width: sprite.texture.width, height: sprite.texture.height }),
+        applyProps: apply,
+    };
+}
+const spriteContribution = {
+    kind: 'sprite',
+    agentDoc: 'Static art. Props: src (texture alias), tint, alpha. Natural size = texture size; use layout to place/scale.',
+    create: spriteInstance,
+};
+const reelFrameContribution = {
+    kind: 'reelFrame',
+    agentDoc: 'The reel frame art. Declare where its hollow is once in props.inner {left,top,width,height} (fractions of the texture); the grid then binds with layout {mode:"frame-fraction", frame:<this id>, use:"inner"} — never restate the numbers.',
+    create: spriteInstance,
+};
+// ── text ────────────────────────────────────────────────────────────────────────────
+const textContribution = {
+    kind: 'text',
+    agentDoc: 'Vector text (labels, logos-as-type). Props: text, fontSize, fill, fontFamily, fontWeight, align, letterSpacing. For rolling win numbers prefer a bitmapNumber/prefab, not text.',
+    create(node) {
+        const props = node.props ?? {};
+        const view = new pixi_js.Text({
+            text: str(props.text, ''),
+            style: {
+                fontFamily: str(props.fontFamily, 'Arial, sans-serif'),
+                fontSize: num(props.fontSize, 32),
+                fill: props.fill ?? '#ffffff',
+                fontWeight: props.fontWeight ?? 'normal',
+                align: props.align ?? 'left',
+                letterSpacing: num(props.letterSpacing, 0),
+            },
+        });
+        return {
+            view,
+            measure: () => ({ width: view.width / view.scale.x, height: view.height / view.scale.y }),
+            applyProps(p) {
+                if (p.text !== undefined)
+                    view.text = str(p.text, '');
+                view.style.fill = p.fill ?? '#ffffff';
+                view.style.fontSize = num(p.fontSize, 32);
+                view.style.letterSpacing = num(p.letterSpacing, 0);
+                view.alpha = num(p.alpha, 1);
+            },
+        };
+    },
+};
+// ── animatedSprite ──────────────────────────────────────────────────────────────────
+const animatedSpriteContribution = {
+    kind: 'animatedSprite',
+    agentDoc: 'Frame animation from a grid spritesheet. Props: sheet {alias, cols, rows}, frame (static frame index, default 0), fps + playing:true for an ambient loop. Choreographed playback belongs to flow/animation clips, not here.',
+    create(node, ctx) {
+        const view = new pixi_js.Container();
+        let animated = null;
+        let size = { width: 0, height: 0 };
+        const apply = (p) => {
+            const sheet = p.sheet;
+            const alias = str(sheet?.alias, '');
+            const cols = num(sheet?.cols, 1);
+            const rows = num(sheet?.rows, 1);
+            const full = alias ? ctx.texture(alias) : pixi_js.Texture.EMPTY;
+            const frames = [];
+            if (full !== pixi_js.Texture.EMPTY && cols > 0 && rows > 0) {
+                const fw = full.frame.width / cols;
+                const fh = full.frame.height / rows;
+                for (let r = 0; r < rows; r++) {
+                    for (let c = 0; c < cols; c++) {
+                        frames.push(new pixi_js.Texture({ source: full.source, frame: new pixi_js.Rectangle(full.frame.x + c * fw, full.frame.y + r * fh, fw, fh) }));
+                    }
+                }
+            }
+            animated?.destroy();
+            animated = new pixi_js.AnimatedSprite(frames.length ? frames : [pixi_js.Texture.EMPTY]);
+            animated.animationSpeed = num(p.fps, 12) / 60;
+            animated.loop = true;
+            const frame = Math.min(num(p.frame, 0), animated.totalFrames - 1);
+            if (p.playing === true)
+                animated.gotoAndPlay(Math.max(0, frame));
+            else
+                animated.gotoAndStop(Math.max(0, frame));
+            animated.alpha = num(p.alpha, 1);
+            view.removeChildren();
+            view.addChild(animated);
+            size = { width: animated.textures.length ? animated.textures[0].width : 0, height: animated.textures.length ? animated.textures[0].height : 0 };
+        };
+        apply(node.props ?? {});
+        return {
+            view,
+            measure: () => size,
+            applyProps: apply,
+            destroy: () => animated?.destroy(),
+        };
+    },
+};
+// ── reelGrid ────────────────────────────────────────────────────────────────────────
+const reelGridContribution = {
+    kind: 'reelGrid',
+    agentDoc: 'The reel window, delegating to createReelSystem. Props: preset (named ReelSystemConfig preset), config (DeepPartial override), board (string[][] of symbol ids, column-major). Bind into the frame hollow with {mode:"frame-fraction", frame:"<frameId>", use:"inner"}. Needs `resolveSymbol` passed to createSceneFromDoc.',
+    create(node, ctx) {
+        if (!ctx.resolveSymbol) {
+            throw new Error(`scene node "${node.id}": reelGrid requires opts.resolveSymbol in createSceneFromDoc`);
+        }
+        const props = node.props ?? {};
+        const presetId = props.preset;
+        const base = presetId ? PRESETS[presetId]?.config : undefined;
+        if (presetId && !base)
+            throw new Error(`scene node "${node.id}": unknown reel preset "${String(presetId)}"`);
+        const override = (props.config ?? {});
+        const system = createReelSystem({
+            resolve: ctx.resolveSymbol,
+            config: resolveReelConfig({ ...(base ?? {}), ...override }),
+            log: ctx.log,
+        });
+        // Doc boards are plain symbol-id grids; lift them to CellData (string entries allowed
+        // per column so scene.json stays hand-writable).
+        const setBoard = (board) => {
+            if (!Array.isArray(board))
+                return;
+            system.setBoard(board.map((column) => column.map((cell) => (typeof cell === 'string' ? { symbol: cell } : cell))));
+        };
+        setBoard(props.board);
+        // The reel system's local content does not start at (0,0) (cells/decoration extend
+        // around the geometry origin), so align it inside a wrapper: measure() re-reads the
+        // real local bounds each layout and keeps the wrapper's (0,0) = content top-left.
+        const wrapper = new pixi_js.Container();
+        wrapper.addChild(system.view);
+        let contentOrigin = { x: 0, y: 0 };
+        const syncContent = () => {
+            const lb = system.view.getLocalBounds();
+            contentOrigin = { x: lb.x, y: lb.y };
+            system.view.position.set(-lb.x, -lb.y);
+            return { width: lb.width, height: lb.height };
+        };
+        const instance = {
+            view: wrapper,
+            system,
+            measure: syncContent,
+            gridCell(col, row) {
+                const p = system.grid.cellPosition(col, row);
+                return { x: p.x - contentOrigin.x, y: p.y - contentOrigin.y };
+            },
+            applyProps(p) {
+                if (p.board !== undefined)
+                    setBoard(p.board);
+            },
+            destroy: () => system.destroy(),
+        };
+        return instance;
+    },
+};
+// ── prefab dispatch ─────────────────────────────────────────────────────────────────
+const prefabContribution = {
+    kind: 'prefab',
+    agentDoc: 'Instantiates a game-registered prefab (meters, HUDs). Props: prefab (registered name) + the prefab\'s own props. Register prefabs via a ScenePlugin.',
+    create(node, ctx) {
+        const name = str(node.props?.prefab, '');
+        const prefab = ctx.registry.prefab(name);
+        if (!prefab)
+            throw new Error(`scene node "${node.id}": unknown prefab "${name}"`);
+        return prefab.create(node.props ?? {}, ctx);
+    },
+};
+const BUILTIN_NODE_TYPES = [
+    containerContribution('container'),
+    containerContribution('layer'),
+    rectContribution,
+    spriteContribution,
+    reelFrameContribution,
+    textContribution,
+    animatedSpriteContribution,
+    reelGridContribution,
+    prefabContribution,
+];
+
+// Structural validation of a scene doc against a registry.
+//
+// Errors are written for the round-trip loop: an agent (or a human) gets told *which*
+// node is wrong and — for unknown kinds — that a plugin is missing, by name, instead of
+// a generic parse failure.
+function validateSceneDoc(doc, registry) {
+    const errors = [];
+    if (doc.version !== 1)
+        errors.push({ message: `unsupported scene doc version ${String(doc.version)} (expected 1)` });
+    if (!doc.id)
+        errors.push({ message: 'doc.id is required' });
+    if (!doc.design || doc.design.width <= 0 || doc.design.height <= 0) {
+        errors.push({ message: 'doc.design must declare a positive width/height' });
+    }
+    if (!doc.root) {
+        errors.push({ message: 'doc.root is required' });
+        return errors;
+    }
+    const ids = new Set();
+    const anchors = new Set();
+    const maskRefs = [];
+    const visit = (node) => {
+        if (!node.id) {
+            errors.push({ message: `node of type "${node.type}" has no id` });
+        }
+        else if (ids.has(node.id)) {
+            errors.push({ nodeId: node.id, message: `duplicate node id "${node.id}"` });
+        }
+        else {
+            ids.add(node.id);
+        }
+        if (node.anchorName) {
+            if (anchors.has(node.anchorName)) {
+                errors.push({ nodeId: node.id, message: `duplicate anchorName "${node.anchorName}"` });
+            }
+            anchors.add(node.anchorName);
+        }
+        const contribution = registry.nodeType(node.type);
+        if (!contribution) {
+            errors.push({
+                nodeId: node.id,
+                message: `unknown node type "${node.type}" — no plugin contributes it. ` +
+                    `Registered kinds: ${registry.kinds().join(', ')}`,
+            });
+        }
+        if (node.type === 'prefab') {
+            const name = node.props?.prefab;
+            if (typeof name !== 'string' || !name) {
+                errors.push({ nodeId: node.id, message: `prefab node needs props.prefab (a registered prefab name)` });
+            }
+            else if (!registry.prefab(name)) {
+                errors.push({
+                    nodeId: node.id,
+                    message: `unknown prefab "${name}". Registered prefabs: ${registry.prefabNames().join(', ') || '(none)'}`,
+                });
+            }
+        }
+        if (node.mask)
+            maskRefs.push({ nodeId: node.id, mask: node.mask });
+        node.children?.forEach(visit);
+    };
+    visit(doc.root);
+    for (const ref of maskRefs) {
+        if (!ids.has(ref.mask)) {
+            errors.push({ nodeId: ref.nodeId, message: `mask references unknown node "${ref.mask}"` });
+        }
+    }
+    return errors;
+}
+
+// Scene-IR interpreter: `createSceneFromDoc` executes a SceneDoc directly (no codegen).
+//
+// One instance owns the display tree, runs the layout passes, applies orientation/state
+// overrides and serves the observability surface (tree/select/patch) that the editor GUI
+// and the agent share. The doc object is the single source of truth: patches mutate it,
+// `handle.doc()` is what gets persisted.
+const MAX_LAYOUT_PASSES = 5;
+function createSceneFromDoc(doc, opts = {}) {
+    const log = opts.log ?? ((msg) => console.warn(`[scene] ${msg}`));
+    const registry = createSceneRegistry(opts.plugins ?? [], BUILTIN_NODE_TYPES);
+    const errors = validateSceneDoc(doc, registry);
+    if (errors.length > 0) {
+        const detail = errors.map((e) => (e.nodeId ? `[${e.nodeId}] ${e.message}` : e.message)).join('\n  ');
+        throw new Error(`scene doc "${doc.id}" is invalid:\n  ${detail}`);
+    }
+    const createCtx = {
+        registry,
+        texture: opts.texture ?? ((alias) => pixi_js.Texture.from(alias)),
+        resolveSymbol: opts.resolveSymbol,
+        log,
+    };
+    const vars = { ...(opts.vars ?? {}) };
+    const runtimes = new Map();
+    const warned = new Set();
+    const warnOnce = (key, msg) => {
+        if (warned.has(key))
+            return;
+        warned.add(key);
+        log(msg);
+    };
+    let lastWidth = doc.design.width;
+    let lastHeight = doc.design.height;
+    const build = (node, parent, parentView) => {
+        const contribution = registry.nodeType(node.type);
+        if (!contribution)
+            throw new Error(`scene node "${node.id}": unknown type "${node.type}"`); // validated; defensive
+        let instance;
+        try {
+            instance = contribution.create(node, createCtx);
+        }
+        catch (err) {
+            throw new Error(`scene node "${node.id}" (${node.type}) failed to create: ${err.message}`);
+        }
+        parentView.addChild(instance.view);
+        const runtime = {
+            node,
+            instance,
+            parent,
+            state: null,
+            // create() already applied the base props — seed the cache so the first layout
+            // does not spuriously rebuild nodes that have no applyProps.
+            appliedProps: JSON.stringify(node.props ?? {}),
+            visibleBase: true,
+            worldScaleX: 1,
+            worldScaleY: 1,
+        };
+        runtimes.set(node.id, runtime);
+        for (const child of node.children ?? [])
+            build(child, runtime, instance.view);
+        return runtime;
+    };
+    const rootView = new pixi_js.Container();
+    build(doc.root, null, rootView);
+    const wireMasks = () => {
+        for (const runtime of runtimes.values()) {
+            if (!runtime.node.mask)
+                continue;
+            const maskRuntime = runtimes.get(runtime.node.mask);
+            runtime.instance.view.mask = maskRuntime ? maskRuntime.instance.view : null;
+        }
+    };
+    wireMasks();
+    // The doc's sole reelGrid is the implicit target of `grid-cell` rules without a `grid` ref.
+    const defaultGridId = () => {
+        const grids = [...runtimes.values()].filter((r) => r.instance.gridCell);
+        if (grids.length > 1)
+            warnOnce('multi-grid', `doc has ${grids.length} grid nodes — grid-cell rules should name one`);
+        return grids[0]?.node.id;
+    };
+    const rebuildNode = (runtime) => {
+        const parentView = runtime.parent ? runtime.parent.instance.view : rootView;
+        const index = parentView.getChildIndex(runtime.instance.view);
+        parentView.removeChild(runtime.instance.view);
+        runtime.instance.destroy?.();
+        const contribution = registry.nodeType(runtime.node.type);
+        runtime.instance = contribution.create(runtime.node, createCtx);
+        parentView.addChildAt(runtime.instance.view, index);
+        // Children live inside the instance view — rebuild the whole subtree beneath it.
+        for (const child of runtime.node.children ?? []) {
+            const childRuntime = runtimes.get(child.id);
+            if (childRuntime) {
+                runtimes.delete(child.id);
+                childRuntime.instance.destroy?.();
+            }
+            build(child, runtime, runtime.instance.view);
+        }
+        wireMasks();
+    };
+    const relayout = () => layout(lastWidth, lastHeight);
+    const layout = (width, height) => {
+        lastWidth = width;
+        lastHeight = height;
+        const orientation = orientationOf(width, height, opts.portraitFactor ?? 1);
+        // Phase 1 — effective props (base + orientation + state), applied before measuring.
+        for (const runtime of [...runtimes.values()]) {
+            const eff = effectiveNode(runtime.node, orientation, runtime.state);
+            runtime.visibleBase = eff.visible;
+            const space = eff.props.space;
+            runtime.spaceSize =
+                space && typeof space.width === 'number' && space.width > 0 && typeof space.height === 'number' && space.height > 0
+                    ? { width: space.width, height: space.height }
+                    : undefined;
+            const propsJson = JSON.stringify(eff.props ?? {});
+            if (propsJson !== runtime.appliedProps) {
+                runtime.appliedProps = propsJson;
+                if (runtime.instance.applyProps)
+                    runtime.instance.applyProps(eff.props);
+                else
+                    rebuildNode(runtime);
+            }
+        }
+        // Phase 2 — resolve layout rules in passes (deps: parent first, then referenced nodes).
+        for (const runtime of runtimes.values())
+            runtime.bounds = undefined;
+        // Frame = nearest ancestor with a declared space; null = the live viewport.
+        const frameCache = new Map();
+        const frameOf = (runtime) => {
+            if (frameCache.has(runtime))
+                return frameCache.get(runtime);
+            let cursor = runtime.parent;
+            while (cursor && !cursor.spaceSize)
+                cursor = cursor.parent;
+            frameCache.set(runtime, cursor);
+            return cursor;
+        };
+        // Rules may only reference nodes in the SAME frame — a cross-space rect is meaningless.
+        const boundsInFrame = (id, frame) => {
+            const target = runtimes.get(id);
+            if (!target)
+                return undefined;
+            if (frameOf(target) !== frame) {
+                warnOnce(`xspace:${id}`, `layout references "${id}" across coordinate spaces — unsupported`);
+                return undefined;
+            }
+            return target.bounds;
+        };
+        const ctxFor = (frame) => ({
+            viewport: frame ? frame.spaceSize : { width, height },
+            design: doc.design,
+            bounds: (id) => boundsInFrame(id, frame),
+            innerRect: (id) => {
+                const target = runtimes.get(id);
+                if (!target?.bounds || boundsInFrame(id, frame) === undefined)
+                    return undefined;
+                const inner = target.node.props?.inner;
+                if (!inner) {
+                    warnOnce(`inner:${id}`, `frame-fraction use:'inner' targets "${id}" which declares no props.inner`);
+                    return target.bounds;
+                }
+                return {
+                    x: target.bounds.x + inner.left * target.bounds.width,
+                    y: target.bounds.y + inner.top * target.bounds.height,
+                    width: inner.width * target.bounds.width,
+                    height: inner.height * target.bounds.height,
+                };
+            },
+            gridCell: (id, col, row) => {
+                const gridId = id ?? defaultGridId();
+                const grid = gridId ? runtimes.get(gridId) : undefined;
+                if (!grid || !grid.instance.gridCell || !boundsInFrame(grid.node.id, frame))
+                    return undefined;
+                const local = grid.instance.gridCell(col, row);
+                return {
+                    x: grid.bounds.x + local.x * grid.worldScaleX,
+                    y: grid.bounds.y + local.y * grid.worldScaleY,
+                };
+            },
+            gridScale: (id) => {
+                const gridId = id ?? defaultGridId();
+                const grid = gridId ? runtimes.get(gridId) : undefined;
+                return grid && boundsInFrame(grid.node.id, frame) ? { x: grid.worldScaleX, y: grid.worldScaleY } : undefined;
+            },
+        });
+        const ctxByFrame = new Map();
+        const layoutCtx = (frame) => {
+            let cached = ctxByFrame.get(frame);
+            if (!cached) {
+                cached = ctxFor(frame);
+                ctxByFrame.set(frame, cached);
+            }
+            return cached;
+        };
+        let pending = [...runtimes.values()];
+        for (let pass = 0; pass < MAX_LAYOUT_PASSES && pending.length > 0; pass++) {
+            const next = [];
+            let progressed = false;
+            for (const runtime of pending) {
+                const frame = frameOf(runtime);
+                // The parent's rect anchors this node — unless the parent IS the node's space root
+                // (space content is authored in the space's own fixed coordinates).
+                const parentIsFrame = runtime.parent === frame;
+                if (runtime.parent && !parentIsFrame && !runtime.parent.bounds) {
+                    next.push(runtime);
+                    continue;
+                }
+                const parentOriginX = parentIsFrame ? 0 : (runtime.parent?.bounds?.x ?? 0);
+                const parentOriginY = parentIsFrame ? 0 : (runtime.parent?.bounds?.y ?? 0);
+                const parentScaleX = parentIsFrame ? 1 : (runtime.parent?.worldScaleX ?? 1);
+                const parentScaleY = parentIsFrame ? 1 : (runtime.parent?.worldScaleY ?? 1);
+                const eff = effectiveNode(runtime.node, orientation, runtime.state);
+                const natural = runtime.instance.measure();
+                const rule = eff.layout;
+                const resolution = rule
+                    ? resolveLayoutRule(rule, natural, layoutCtx(frame))
+                    : {
+                        placement: {
+                            x: parentOriginX,
+                            y: parentOriginY,
+                            scaleX: parentScaleX,
+                            scaleY: parentScaleY,
+                            rotation: 0,
+                            anchor: [0, 0],
+                        },
+                    };
+                if ('waitingFor' in resolution) {
+                    next.push(runtime);
+                    continue;
+                }
+                const p = resolution.placement;
+                const view = runtime.instance.view;
+                view.position.set((p.x - parentOriginX) / parentScaleX, (p.y - parentOriginY) / parentScaleY);
+                view.scale.set(p.scaleX / parentScaleX, p.scaleY / parentScaleY);
+                view.rotation = p.rotation;
+                view.pivot.set(p.anchor[0] * natural.width, p.anchor[1] * natural.height);
+                runtime.bounds = placementBounds(p, natural);
+                runtime.worldScaleX = p.scaleX;
+                runtime.worldScaleY = p.scaleY;
+                if (p.rotation !== 0 && (runtime.node.children?.length ?? 0) > 0) {
+                    warnOnce(`rot:${runtime.node.id}`, `node "${runtime.node.id}" rotates with laid-out children — child rules ignore parent rotation`);
+                }
+                progressed = true;
+            }
+            pending = next;
+            if (!progressed)
+                break;
+        }
+        for (const runtime of pending) {
+            warnOnce(`unresolved:${runtime.node.id}`, `layout of "${runtime.node.id}" never resolved (circular or missing reference) — left at identity`);
+            runtime.bounds = { x: 0, y: 0, width: 0, height: 0 };
+        }
+        // Phase 3 — visibility (base/state visible flag + visibleWhen condition).
+        for (const runtime of runtimes.values()) {
+            let visible = runtime.visibleBase;
+            const expr = runtime.node.visibleWhen;
+            if (visible && expr) {
+                const result = evalVisibleWhen(expr, vars);
+                if (result === undefined)
+                    warnOnce(`when:${runtime.node.id}`, `unsupported visibleWhen "${expr}" on "${runtime.node.id}" — treated as visible`);
+                else
+                    visible = result;
+            }
+            runtime.instance.view.visible = visible;
+        }
+    };
+    const toOutline = (node) => {
+        const runtime = runtimes.get(node.id);
+        return {
+            id: node.id,
+            type: node.type,
+            name: node.name,
+            anchorName: node.anchorName,
+            visible: runtime?.instance.view.visible ?? true,
+            state: runtime?.state ?? null,
+            children: (node.children ?? []).map(toOutline),
+        };
+    };
+    const findNode = (root, id) => {
+        if (root.id === id)
+            return root;
+        for (const child of root.children ?? []) {
+            const hit = findNode(child, id);
+            if (hit)
+                return hit;
+        }
+        return undefined;
+    };
+    const setVar = (name, value) => {
+        vars[name] = value;
+        relayout();
+    };
+    const setState = (id, state) => {
+        const runtime = runtimes.get(id);
+        if (!runtime)
+            return warnOnce(`state:${id}`, `setState: unknown node "${id}"`);
+        if (state && !runtime.node.states?.[state]) {
+            return warnOnce(`state:${id}:${state}`, `setState: node "${id}" has no state "${state}"`);
+        }
+        runtime.state = state;
+        relayout();
+    };
+    const applyPatch = (patch) => {
+        switch (patch.op) {
+            case 'set-props': {
+                const node = findNode(doc.root, patch.id);
+                if (!node)
+                    return warnOnce(`patch:${patch.id}`, `patch: unknown node "${patch.id}"`);
+                node.props = { ...(node.props ?? {}), ...patch.props };
+                break;
+            }
+            case 'set-layout': {
+                const node = findNode(doc.root, patch.id);
+                if (!node)
+                    return warnOnce(`patch:${patch.id}`, `patch: unknown node "${patch.id}"`);
+                if (patch.orientation) {
+                    node.responsive = { ...(node.responsive ?? {}) };
+                    node.responsive[patch.orientation] = {
+                        ...(node.responsive[patch.orientation] ?? {}),
+                        layout: patch.layout,
+                    };
+                }
+                else {
+                    node.layout = patch.layout;
+                }
+                break;
+            }
+            case 'set-state':
+                return setState(patch.id, patch.state);
+            case 'set-var':
+                return setVar(patch.name, patch.value);
+        }
+        relayout();
+    };
+    return {
+        view: rootView,
+        node: (id) => runtimes.get(id)?.instance.view,
+        instance: (id) => runtimes.get(id)?.instance,
+        anchor(name) {
+            for (const runtime of runtimes.values()) {
+                if (runtime.node.anchorName === name)
+                    return runtime.instance.view;
+            }
+            return undefined;
+        },
+        tree: () => toOutline(doc.root),
+        layout,
+        setVar,
+        setState,
+        patch: applyPatch,
+        doc: () => doc,
+        destroy() {
+            for (const runtime of runtimes.values())
+                runtime.instance.destroy?.();
+            runtimes.clear();
+            rootView.destroy({ children: true });
+        },
+    };
+}
+
+exports.BUILTIN_NODE_TYPES = BUILTIN_NODE_TYPES;
+exports.createSceneFromDoc = createSceneFromDoc;
+exports.createSceneRegistry = createSceneRegistry;
+exports.dependencyOf = dependencyOf;
+exports.edgePoint = edgePoint;
+exports.effectiveNode = effectiveNode;
+exports.evalVisibleWhen = evalVisibleWhen;
+exports.orientationOf = orientationOf;
+exports.placementBounds = placementBounds;
+exports.resolveLayoutRule = resolveLayoutRule;
+exports.validateSceneDoc = validateSceneDoc;
+//# sourceMappingURL=scene.cjs.js.map