@energy8platform/game-engine 0.24.0 → 0.26.0

package/dist/reel-panel-client.d.ts

@@ -0,0 +1,5 @@
+import { HarnessPanelMount } from '@energy8platform/harness/panel';
+
+declare const mount: HarnessPanelMount;
+
+export { mount as default };

package/dist/reel-panel-client.esm.js

@@ -0,0 +1,620 @@
+// packages/game-engine/src/slot/devtools/fieldSchema.ts
+//
+// Declarative description of the reel-config control panel. Each control binds to a
+// dot-path in the ReelSystemConfig. Pure data — no pixi, no DOM — so it bundles into
+// the self-contained panel client served by the harness.
+//
+// NOTE: board shape (grid.cols / grid.rows / rowsPerReel) is intentionally OMITTED.
+// The board shape is math-tied (paylines / ways / book geometry) and must not be
+// tuned live from the harness. Everything else — cosmetic geometry, motion,
+// anticipation, cascade, win presentation and features — is tunable.
+/** All section keys, in panel order. */
+const EASINGS = [
+    'linear',
+    'easeOutQuad',
+    'easeOutCubic',
+    'easeOutBack',
+    'easeOutBounce',
+    'easeInBack',
+    'easeOutElastic',
+    'easeInOutSine',
+    'easeInOutQuad',
+];
+/** The editable reel-config fields, grouped into collapsible sections. */
+const REEL_FIELD_SCHEMA = [
+    {
+        key: 'geometry',
+        title: 'Cell geometry',
+        controls: [
+            { kind: 'range', path: 'grid.cellSize', label: 'Cell size', min: 40, max: 120, step: 1 },
+            { kind: 'range', path: 'grid.gap', label: 'Gap', min: 0, max: 16, step: 1 },
+            {
+                kind: 'select',
+                path: 'grid.evaluation',
+                label: 'Evaluation',
+                options: ['lines', 'ways', 'anywhere', 'cluster', 'megaways', 'infinity'],
+            },
+            { kind: 'toggle', path: 'grid.mask', label: 'Mask reels' },
+            {
+                kind: 'range',
+                path: 'grid.cellWidth',
+                label: 'Cell width',
+                min: 40,
+                max: 160,
+                step: 1,
+                fallback: 'grid.cellSize',
+            },
+            {
+                kind: 'range',
+                path: 'grid.cellHeight',
+                label: 'Cell height',
+                min: 40,
+                max: 160,
+                step: 1,
+                fallback: 'grid.cellSize',
+            },
+            {
+                kind: 'range',
+                path: 'grid.colGap',
+                label: 'Column gap',
+                min: 0,
+                max: 40,
+                step: 1,
+                fallback: 'grid.gap',
+            },
+            {
+                kind: 'range',
+                path: 'grid.rowGap',
+                label: 'Row gap',
+                min: 0,
+                max: 40,
+                step: 1,
+                fallback: 'grid.gap',
+            },
+        ],
+    },
+    {
+        key: 'motion',
+        title: 'Motion',
+        controls: [
+            { kind: 'select', path: 'motion.style', label: 'Style', options: ['swap', 'strip', 'cascade-drop'] },
+            { kind: 'range', path: 'motion.spinUp', label: 'Spin-up (ms)', min: 100, max: 2500, step: 10 },
+            { kind: 'range', path: 'motion.hold', label: 'Hold (ms)', min: 0, max: 800, step: 10 },
+            { kind: 'range', path: 'motion.stopStagger', label: 'Stop stagger (ms)', min: 0, max: 400, step: 5 },
+            { kind: 'select', path: 'motion.stopMode', label: 'Stop mode', options: ['sequential', 'sync', 'random'] },
+            { kind: 'select', path: 'motion.stopOrder', label: 'Stop order', options: ['ltr', 'rtl'] },
+            { kind: 'range', path: 'motion.settle.amp', label: 'Settle amp (px)', min: 0, max: 24, step: 1 },
+            { kind: 'range', path: 'motion.settle.ms', label: 'Settle (ms)', min: 60, max: 500, step: 10 },
+            { kind: 'select', path: 'motion.settle.easing', label: 'Settle easing', options: EASINGS },
+            { kind: 'toggle', path: 'motion.squash.enabled', label: 'Squash on land' },
+            { kind: 'range', path: 'motion.squash.scaleX', label: 'Squash X', min: 1, max: 1.5, step: 0.01 },
+            { kind: 'range', path: 'motion.squash.scaleY', label: 'Squash Y', min: 0.5, max: 1, step: 0.01 },
+            { kind: 'toggle', path: 'motion.blur.enabled', label: 'Motion blur' },
+            { kind: 'range', path: 'motion.blur.alpha', label: 'Blur alpha', min: 0.3, max: 1, step: 0.01 },
+            { kind: 'range', path: 'motion.blur.strength', label: 'Blur strength', min: 0, max: 16, step: 1 },
+            { kind: 'toggle', path: 'motion.blur.streaks', label: 'Blur streaks' },
+            { kind: 'range', path: 'motion.turboFactor', label: 'Turbo factor', min: 0.2, max: 1, step: 0.05 },
+            { kind: 'select', path: 'motion.intensity', label: 'Intensity', options: ['full', 'reduced', 'minimal'] },
+            { kind: 'toggle', path: 'motion.slamStop', label: 'Slam stop' },
+            { kind: 'range', path: 'motion.symbolsPerReel', label: 'Tape length', min: 3, max: 24, step: 1 },
+        ],
+    },
+    {
+        key: 'anticipation',
+        title: 'Anticipation',
+        controls: [
+            { kind: 'toggle', path: 'anticipation.enabled', label: 'Enabled' },
+            { kind: 'range', path: 'anticipation.threshold', label: 'Threshold (N−1)', min: 1, max: 6, step: 1 },
+            { kind: 'range', path: 'anticipation.slowdownFactor', label: 'Slowdown', min: 0.1, max: 1, step: 0.05 },
+            { kind: 'range', path: 'anticipation.holdMs', label: 'Hold (ms)', min: 0, max: 1200, step: 50 },
+            { kind: 'toggle', path: 'anticipation.zoom.enabled', label: 'Reel zoom' },
+            { kind: 'range', path: 'anticipation.zoom.scale', label: 'Zoom scale', min: 1, max: 1.6, step: 0.05 },
+            { kind: 'range', path: 'anticipation.zoom.ms', label: 'Zoom (ms)', min: 200, max: 1200, step: 50 },
+        ],
+    },
+    {
+        key: 'cascade',
+        title: 'Cascade / Tumble',
+        controls: [
+            { kind: 'toggle', path: 'cascade.enabled', label: 'Enabled' },
+            { kind: 'toggle', path: 'cascade.gravity', label: 'Gravity (survivors slide)' },
+            { kind: 'toggle', path: 'cascade.dimNonWinners', label: 'Dim non-winners' },
+            { kind: 'range', path: 'cascade.dimAlpha', label: 'Dim alpha', min: 0.1, max: 1, step: 0.05 },
+            { kind: 'range', path: 'cascade.perStepDecel', label: 'Per-step decel', min: 0, max: 0.4, step: 0.01 },
+            { kind: 'range', path: 'cascade.perStepDecelCap', label: 'Decel cap', min: 1, max: 3, step: 0.1 },
+            { kind: 'range', path: 'cascade.timings.remove', label: 'Remove (ms)', min: 80, max: 600, step: 10 },
+            { kind: 'range', path: 'cascade.timings.drop', label: 'Drop (ms)', min: 80, max: 600, step: 10 },
+            { kind: 'select', path: 'cascade.easings.drop', label: 'Drop easing', options: EASINGS },
+            { kind: 'toggle', path: 'cascade.multiplier.enabled', label: 'Win multiplier' },
+            { kind: 'select', path: 'cascade.multiplier.mode', label: 'Multiplier mode', options: ['add', 'mul'] },
+            { kind: 'range', path: 'cascade.multiplier.step', label: 'Multiplier step', min: 1, max: 5, step: 1 },
+        ],
+    },
+    {
+        key: 'win',
+        title: 'Win presentation',
+        controls: [
+            { kind: 'range', path: 'win.highlightScale', label: 'Highlight scale', min: 1, max: 1.4, step: 0.01 },
+            { kind: 'toggle', path: 'win.glow', label: 'Glow' },
+            { kind: 'toggle', path: 'win.frameShake.enabled', label: 'Frame shake' },
+            { kind: 'range', path: 'win.frameShake.amp', label: 'Shake amp', min: 0, max: 10, step: 0.5 },
+        ],
+    },
+    {
+        key: 'features',
+        title: 'Features',
+        controls: [
+            { kind: 'toggle', path: 'features.expandingWild.enabled', label: 'Expanding wild' },
+            { kind: 'toggle', path: 'features.expandingWild.toFullReel', label: '· to full reel' },
+            { kind: 'toggle', path: 'features.sticky.enabled', label: 'Sticky symbols' },
+            { kind: 'range', path: 'features.sticky.durationSpins', label: '· duration spins', min: 0, max: 6, step: 1 },
+            { kind: 'toggle', path: 'features.walkingWild.enabled', label: 'Walking wild' },
+            { kind: 'select', path: 'features.walkingWild.direction', label: '· direction', options: ['left', 'right'] },
+            { kind: 'toggle', path: 'features.randomWild.enabled', label: 'Random wild inject' },
+            { kind: 'toggle', path: 'features.randomWild.sticky', label: '· sticky' },
+            { kind: 'toggle', path: 'features.mystery.enabled', label: 'Mystery symbols' },
+            { kind: 'toggle', path: 'features.transform.enabled', label: 'Transform / upgrade' },
+            { kind: 'toggle', path: 'features.transform.upgradeOnly', label: '· upgrade only' },
+            { kind: 'toggle', path: 'features.giant.enabled', label: 'Giant symbol' },
+            { kind: 'range', path: 'features.giant.width', label: '· width', min: 1, max: 5, step: 1 },
+            { kind: 'range', path: 'features.giant.height', label: '· height', min: 1, max: 5, step: 1 },
+            { kind: 'toggle', path: 'features.split.enabled', label: 'Split (xSplit)' },
+            { kind: 'range', path: 'features.split.factor', label: '· factor', min: 2, max: 4, step: 1 },
+            { kind: 'toggle', path: 'features.stacked.enabled', label: 'Stacked symbols' },
+            { kind: 'range', path: 'features.stacked.height', label: '· stack height', min: 2, max: 7, step: 1 },
+            { kind: 'toggle', path: 'features.nudge.enabled', label: 'Nudge / xNudge' },
+            { kind: 'toggle', path: 'features.nudge.toFullReel', label: '· xNudge fill' },
+            { kind: 'toggle', path: 'features.multiplier.enabled', label: 'Multiplier symbols' },
+            { kind: 'select', path: 'features.multiplier.combine', label: '· combine', options: ['additive', 'multiplicative'] },
+            { kind: 'toggle', path: 'features.holdAndSpin.enabled', label: 'Hold & Spin' },
+            { kind: 'range', path: 'features.holdAndSpin.respinsAwarded', label: '· respins', min: 1, max: 5, step: 1 },
+            { kind: 'toggle', path: 'features.reelModifier.enabled', label: 'Reel modifier' },
+        ],
+    },
+];
+
+// packages/game-engine/src/slot/devtools/controlPanel.ts
+//
+// Renders the reel-config field schema into a DOM panel and binds each control to a
+// live config object. Pure DOM — no pixi. Shared by the harness reel sidebar and the
+// reel-lab playground.
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function getPath(obj, path) {
+    return path.split('.').reduce((o, k) => (o == null ? o : o[k]), obj);
+}
+function setPath(obj, path, value) {
+    const keys = path.split('.');
+    const last = keys.pop();
+    const target = keys.reduce((o, k) => (o[k] ??= {}), obj);
+    target[last] = value;
+}
+/** Build the control panel into `root`. Returns a `refresh()` that re-syncs inputs from config. */
+function buildControlPanel(root, opts) {
+    const schema = opts.schema ?? REEL_FIELD_SCHEMA;
+    const updaters = [];
+    root.innerHTML = '';
+    for (const section of schema)
+        root.appendChild(renderSection(section, opts, updaters));
+    return { refresh: () => updaters.forEach((u) => u()) };
+}
+function renderSection(section, opts, updaters) {
+    const wrap = document.createElement('section');
+    wrap.className = 'panel-section';
+    const head = document.createElement('button');
+    head.className = 'section-head';
+    head.textContent = section.title;
+    const body = document.createElement('div');
+    body.className = 'section-body';
+    if (section.collapsed)
+        body.style.display = 'none';
+    head.addEventListener('click', () => {
+        body.style.display = body.style.display === 'none' ? '' : 'none';
+    });
+    wrap.appendChild(head);
+    wrap.appendChild(body);
+    for (const c of section.controls)
+        body.appendChild(renderControl(c, opts, updaters));
+    return wrap;
+}
+function renderControl(c, opts, updaters) {
+    const row = document.createElement('label');
+    row.className = 'control';
+    const name = document.createElement('span');
+    name.className = 'control-label';
+    name.textContent = c.label;
+    row.appendChild(name);
+    const emit = () => opts.onChange(c.path);
+    if (c.kind === 'toggle') {
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        const sync = () => {
+            input.checked = !!getPath(opts.config, c.path);
+        };
+        sync();
+        input.addEventListener('change', () => {
+            setPath(opts.config, c.path, input.checked);
+            emit();
+        });
+        row.classList.add('control-toggle');
+        row.appendChild(input);
+        updaters.push(sync);
+    }
+    else if (c.kind === 'select') {
+        const sel = document.createElement('select');
+        for (const o of c.options) {
+            const opt = document.createElement('option');
+            opt.value = o;
+            opt.textContent = o;
+            sel.appendChild(opt);
+        }
+        const sync = () => {
+            sel.value = String(getPath(opts.config, c.path));
+        };
+        sync();
+        sel.addEventListener('change', () => {
+            setPath(opts.config, c.path, sel.value);
+            emit();
+        });
+        row.appendChild(sel);
+        updaters.push(sync);
+    }
+    else if (c.kind === 'range') {
+        const input = document.createElement('input');
+        input.type = 'range';
+        input.min = String(c.min);
+        input.max = String(c.max);
+        input.step = String(c.step);
+        const val = document.createElement('output');
+        val.className = 'control-value';
+        const sync = () => {
+            let raw = getPath(opts.config, c.path);
+            if ((raw == null || typeof raw !== 'number') && c.fallback != null)
+                raw = getPath(opts.config, c.fallback);
+            const v = Number(raw);
+            input.value = String(v);
+            val.textContent = String(v);
+        };
+        sync();
+        input.addEventListener('input', () => {
+            const v = Number(input.value);
+            setPath(opts.config, c.path, v);
+            val.textContent = String(v);
+            emit();
+        });
+        row.appendChild(input);
+        row.appendChild(val);
+        updaters.push(sync);
+    }
+    else {
+        const input = document.createElement('input');
+        input.type = 'color';
+        const sync = () => {
+            input.value =
+                '#' +
+                    Number(getPath(opts.config, c.path) ?? 0)
+                        .toString(16)
+                        .padStart(6, '0');
+        };
+        sync();
+        input.addEventListener('input', () => {
+            setPath(opts.config, c.path, parseInt(input.value.slice(1), 16));
+            emit();
+        });
+        row.appendChild(input);
+        updaters.push(sync);
+    }
+    return row;
+}
+
+// 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.
+// ─────────────────────────────────────────────────────────────────────────────
+// 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,
+        },
+    },
+};
+/** Deep-merge `partial` onto `base` (arrays replace, objects merge). Returns a new object. */
+function mergeReelConfig(base, partial) {
+    return structuredCloneSafe(base);
+}
+/** Resolve a partial config to a fully-populated `ReelSystemConfig`. */
+function resolveReelConfig(partial) {
+    return mergeReelConfig(DEFAULT_REEL_CONFIG);
+}
+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));
+}
+
+// packages/game-engine/src/slot/devtools/configDiff.ts
+//
+// Compute the minimal override diff of a reel config against the defaults, and emit a
+// paste-ready `resolveReelConfig({...})` TypeScript snippet. Pure — no pixi, no DOM.
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/** Deep diff `obj` against `base`: arrays compared whole, objects recursed, scalars by !==. */
+function configDiff(base, obj) {
+    const out = {};
+    for (const k of Object.keys(obj ?? {})) {
+        const a = base?.[k];
+        const b = obj[k];
+        if (Array.isArray(b)) {
+            if (JSON.stringify(a) !== JSON.stringify(b))
+                out[k] = b;
+        }
+        else if (b && typeof b === 'object') {
+            const d = configDiff(a ?? {}, b);
+            if (Object.keys(d).length)
+                out[k] = d;
+        }
+        else if (a !== b) {
+            out[k] = b;
+        }
+    }
+    return out;
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */
+/** Diff a working config against DEFAULT_REEL_CONFIG (via resolveReelConfig()). */
+function diffFromDefaults(config) {
+    return configDiff(resolveReelConfig(), config);
+}
+/** Emit a paste-ready TS module exporting the reel config as overrides-only. */
+function emitReelConfigTs(config) {
+    const diff = diffFromDefaults(config);
+    return (`import { resolveReelConfig } from '@energy8platform/game-engine/slot';\n\n` +
+        `// Only the overrides vs DEFAULT_REEL_CONFIG.\n` +
+        `export const reelConfig = resolveReelConfig(${JSON.stringify(diff, null, 2)} as const);\n`);
+}
+
+// packages/game-engine/src/slot/devtools/protocol.ts
+//
+// The postMessage protocol between the harness reel panel (parent window) and the
+// reel dev bridge (game iframe). Pure constants + message types — no deps.
+const REEL_READY = 'e8:reel:ready';
+const REEL_APPLY = 'e8:reel:apply';
+const REEL_REQUEST = 'e8:reel:request';
+
+// packages/game-engine/src/slot/devtools/panelClient.ts
+//
+// The harness "Reels" sidebar panel client. Built as a SELF-CONTAINED browser ESM
+// (dist/reel-panel-client.js) and served by the harness at /__harness/panel/reels.js.
+// Default-exports the HarnessPanelMount the core client calls.
+//
+// It seeds its controls from the running game's config (received over the bus), applies
+// every edit LIVE (posts a patch → the game's reel bridge calls system.update), and
+// offers a "Copy config" button that emits the paste-ready overrides snippet.
+const CSS = `
+.e8rp-wait { color: #6b7480; font-size: 12px; line-height: 1.6; padding: 8px 2px; }
+.e8rp-bar { display: flex; gap: 8px; margin-bottom: 12px; }
+.e8rp-bar button {
+  flex: 1 1 0; background: #1c2128; color: #cfd5dd; border: 1px solid #3a414c; border-radius: 8px;
+  padding: 8px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
+}
+.e8rp-bar button:hover { border-color: #4b5563; color: #fff; }
+.e8rp-status { font-size: 11px; color: #6b7480; min-height: 14px; margin-bottom: 8px; }
+.e8rp-controls .panel-section { border-top: 1px solid #1d222a; }
+.e8rp-controls .section-head {
+  width: 100%; text-align: left; background: transparent; border: 0; color: #aab2bd;
+  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
+  padding: 10px 2px 6px; cursor: pointer;
+}
+.e8rp-controls .section-body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
+.e8rp-controls .control {
+  display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12px; color: #d3d8df;
+}
+.e8rp-controls .control-label { flex: 1 1 auto; }
+.e8rp-controls .control-value { width: 34px; text-align: right; color: #828b98; font-variant-numeric: tabular-nums; }
+.e8rp-controls input[type=range] { flex: 0 0 120px; }
+.e8rp-controls select { background: #1c2128; color: #e9ecf1; border: 1px solid #3a414c; border-radius: 6px; padding: 3px 6px; font: inherit; font-size: 12px; }
+.e8rp-controls .control-toggle { justify-content: space-between; }
+`;
+function injectCss() {
+    if (document.getElementById('e8-reel-panel-css'))
+        return;
+    const style = document.createElement('style');
+    style.id = 'e8-reel-panel-css';
+    style.textContent = CSS;
+    document.head.appendChild(style);
+}
+const mount = (ctx) => {
+    injectCss();
+    const root = ctx.root;
+    // Section visibility from the plugin (reelDevtoolsPlugin({ sections: { geometry: false } })).
+    const panelCfg = (ctx.config ?? {});
+    const sectionOn = panelCfg.sections ?? {};
+    const schema = REEL_FIELD_SCHEMA.filter((s) => s.key == null || sectionOn[s.key] !== false);
+    root.innerHTML = '<p class="e8rp-wait">Waiting for the game’s reel bridge…<br/>(the game must call <code>mountReelDevBridge</code>.)</p>';
+    let working = null;
+    let built = false;
+    const status = (msg) => {
+        const el = root.querySelector('.e8rp-status');
+        if (el)
+            el.textContent = msg;
+    };
+    const copy = (text, label) => {
+        navigator.clipboard
+            ?.writeText(text)
+            .then(() => status(`${label} copied`))
+            .catch(() => status('Copy failed'));
+    };
+    const buildUi = (config) => {
+        working = structuredClone(config);
+        root.innerHTML = '';
+        const bar = document.createElement('div');
+        bar.className = 'e8rp-bar';
+        const copyTs = document.createElement('button');
+        copyTs.textContent = 'Copy config';
+        copyTs.addEventListener('click', () => working && copy(emitReelConfigTs(working), 'TS config'));
+        const copyJson = document.createElement('button');
+        copyJson.textContent = 'Copy JSON';
+        copyJson.addEventListener('click', () => working && copy(JSON.stringify(working, null, 2), 'JSON'));
+        bar.append(copyTs, copyJson);
+        const statusEl = document.createElement('div');
+        statusEl.className = 'e8rp-status';
+        const controls = document.createElement('div');
+        controls.className = 'e8rp-controls';
+        root.append(bar, statusEl, controls);
+        buildControlPanel(controls, {
+            config: working,
+            schema,
+            onChange: () => {
+                ctx.post({ type: REEL_APPLY, patch: working });
+            },
+        });
+        built = true;
+    };
+    ctx.on((raw) => {
+        const msg = raw;
+        if (msg && typeof msg === 'object' && msg.type === REEL_READY)
+            buildUi(msg.config);
+    });
+    // Ask the game for its config (covers the game-loaded-first case); retry a couple times.
+    const request = () => ctx.post({ type: REEL_REQUEST });
+    request();
+    window.setTimeout(() => !built && request(), 400);
+    window.setTimeout(() => !built && request(), 1200);
+};
+
+export { mount as default };
+//# sourceMappingURL=reel-panel-client.esm.js.map