@energy8platform/game-engine 0.11.0 → 0.12.0

package/dist/react.esm.js

@@ -21,6 +21,8 @@ function extend(components) {
 }
 
 const RESERVED = new Set(['children', 'key', 'ref']);
+/** Props handled by the reconciler as flex item config, not forwarded to components */
+const FLEX_ITEM_PROPS$1 = new Set(['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude']);
 // ─── UI Component helpers ────────────────────────────────
 /**
  * Extract a config object from React props.
@@ -30,7 +32,7 @@ const RESERVED = new Set(['children', 'key', 'ref']);
 function extractConfig(props) {
     const config = {};
     for (const key in props) {
-        if (RESERVED.has(key) || isEventProp(key))
+        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || isEventProp(key))
             continue;
         if (key.includes('-')) {
             const parts = key.split('-');
@@ -55,7 +57,7 @@ function diffConfig(newProps, oldProps) {
     const changed = {};
     // New or changed props
     for (const key in newProps) {
-        if (RESERVED.has(key) || isEventProp(key))
+        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || isEventProp(key))
             continue;
         if (newProps[key] !== oldProps[key]) {
             if (key.includes('-')) {
@@ -154,7 +156,7 @@ function setNestedValue(target, path, value) {
 function applyProps(instance, newProps, oldProps = {}) {
     // Remove old props not in newProps
     for (const key in oldProps) {
-        if (RESERVED.has(key) || key in newProps)
+        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || key in newProps)
             continue;
         const pixiEvent = REACT_TO_PIXI_EVENTS[key];
         if (pixiEvent) {
@@ -173,7 +175,7 @@ function applyProps(instance, newProps, oldProps = {}) {
     }
     // Apply new props
     for (const key in newProps) {
-        if (RESERVED.has(key))
+        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key))
             continue;
         const value = newProps[key];
         const pixiEvent = REACT_TO_PIXI_EVENTS[key];
@@ -199,182 +201,6 @@ function applyProps(instance, newProps, oldProps = {}) {
     }
 }
 
-function toPascalCase(str) {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-const hostConfig = {
-    isPrimaryRenderer: false,
-    supportsMutation: true,
-    supportsPersistence: false,
-    supportsHydration: false,
-    createInstance(type, props) {
-        const name = toPascalCase(type);
-        const Ctor = catalogue[name];
-        if (!Ctor) {
-            throw new Error(`[PixiReconciler] Unknown element "<${type}>". ` +
-                `Call extend({ ${name} }) before rendering.`);
-        }
-        let instance;
-        if (Ctor.prototype.__uiComponent) {
-            // Config-based UI component: pass props as constructor config
-            const config = extractConfig(props);
-            instance = new Ctor(config);
-            applyEventProps(instance, props);
-        }
-        else {
-            // Standard PixiJS element
-            instance = new Ctor();
-            applyProps(instance, props);
-        }
-        if (hasEventProps(props) && instance.eventMode === 'auto') {
-            instance.eventMode = 'static';
-        }
-        return instance;
-    },
-    createTextInstance() {
-        throw new Error('[PixiReconciler] Text strings are not supported. Use a <text> element.');
-    },
-    appendInitialChild(parent, child) {
-        if (child instanceof Container)
-            parent.addChild(child);
-    },
-    appendChild(parent, child) {
-        if (child instanceof Container)
-            parent.addChild(child);
-    },
-    appendChildToContainer(container, child) {
-        if (child instanceof Container)
-            container.addChild(child);
-    },
-    removeChild(parent, child) {
-        if (child instanceof Container) {
-            parent.removeChild(child);
-            child.destroy({ children: true });
-        }
-    },
-    removeChildFromContainer(container, child) {
-        if (child instanceof Container) {
-            container.removeChild(child);
-            child.destroy({ children: true });
-        }
-    },
-    insertBefore(parent, child, beforeChild) {
-        if (child instanceof Container && beforeChild instanceof Container) {
-            if (child.parent)
-                child.parent.removeChild(child);
-            const index = parent.getChildIndex(beforeChild);
-            parent.addChildAt(child, index);
-        }
-    },
-    insertInContainerBefore(container, child, beforeChild) {
-        if (child instanceof Container && beforeChild instanceof Container) {
-            if (child.parent)
-                child.parent.removeChild(child);
-            const index = container.getChildIndex(beforeChild);
-            container.addChildAt(child, index);
-        }
-    },
-    commitUpdate(instance, _updatePayload, _type, oldProps, newProps) {
-        if (instance.__uiComponent && typeof instance.updateConfig === 'function') {
-            const changed = diffConfig(newProps, oldProps);
-            if (Object.keys(changed).length > 0) {
-                instance.updateConfig(changed);
-            }
-            applyEventProps(instance, newProps, oldProps);
-        }
-        else {
-            applyProps(instance, newProps, oldProps);
-        }
-        if (hasEventProps(newProps) && instance.eventMode === 'auto') {
-            instance.eventMode = 'static';
-        }
-    },
-    finalizeInitialChildren() {
-        return false;
-    },
-    prepareUpdate() {
-        return true;
-    },
-    shouldSetTextContent() {
-        return false;
-    },
-    getRootHostContext() {
-        return null;
-    },
-    getChildHostContext(parentHostContext) {
-        return parentHostContext;
-    },
-    getPublicInstance(instance) {
-        return instance;
-    },
-    prepareForCommit() {
-        return null;
-    },
-    resetAfterCommit() { },
-    preparePortalMount() { },
-    scheduleTimeout: setTimeout,
-    cancelTimeout: clearTimeout,
-    noTimeout: -1,
-    getCurrentEventPriority() {
-        return DefaultEventPriority;
-    },
-    hideInstance(instance) {
-        instance.visible = false;
-    },
-    unhideInstance(instance) {
-        instance.visible = true;
-    },
-    hideTextInstance() { },
-    unhideTextInstance() { },
-    clearContainer() { },
-    detachDeletedInstance() { },
-    prepareScopeUpdate() { },
-    getInstanceFromNode() { return null; },
-    getInstanceFromScope() { return null; },
-    beforeActiveInstanceBlur() { },
-    afterActiveInstanceBlur() { },
-};
-const reconciler = Reconciler(hostConfig);
-
-function createPixiRoot(container) {
-    const fiberRoot = reconciler.createContainer(container, // containerInfo
-    ConcurrentRoot, // tag
-    null, // hydrationCallbacks
-    false, // isStrictMode
-    null, // concurrentUpdatesByDefaultOverride
-    '', // identifierPrefix
-    (err) => console.error('[PixiRoot]', err), null);
-    return {
-        render(element) {
-            reconciler.updateContainer(element, fiberRoot, null, () => { });
-        },
-        unmount() {
-            reconciler.updateContainer(null, fiberRoot, null, () => { });
-        },
-    };
-}
-
-/**
- * Resolve a ViewInput to a Container instance.
- *
- * @example
- * ```ts
- * resolveView('btn-idle')          // → Sprite.from('btn-idle')
- * resolveView(someTexture)         // → new Sprite(someTexture)
- * resolveView(myCustomContainer)   // → myCustomContainer (as-is)
- * resolveView(undefined)           // → null
- * ```
- */
-function resolveView(input) {
-    if (input == null)
-        return null;
-    if (typeof input === 'string')
-        return Sprite.from(input);
-    if (input instanceof Texture)
-        return new Sprite(input);
-    return input;
-}
-
 // ─── Helpers ─────────────────────────────────────────────
 function normalizePadding(p) {
     return typeof p === 'number' ? [p, p, p, p] : p;
@@ -433,6 +259,37 @@ function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, cr
             }
         }
     }
+    // Shrink: if content overflows and mainSize is finite, shrink eligible items
+    if (totalGrow === 0 && mainSize > 0) {
+        const overflow = totalFixed + totalGap - mainSize;
+        if (overflow > 0) {
+            let totalShrinkable = 0;
+            for (const item of items) {
+                const shrink = item.child._flexConfig?.flexShrink ?? 1;
+                if (shrink > 0) {
+                    totalShrinkable += isRow ? item.w : item.h;
+                }
+            }
+            if (totalShrinkable > 0) {
+                for (const item of items) {
+                    const shrink = item.child._flexConfig?.flexShrink ?? 1;
+                    if (shrink > 0) {
+                        const itemMain = isRow ? item.w : item.h;
+                        const reduction = overflow * (itemMain / totalShrinkable);
+                        const newSize = Math.max(0, itemMain - reduction);
+                        if (isRow) {
+                            item.w = newSize;
+                            item.child.width = newSize;
+                        }
+                        else {
+                            item.h = newSize;
+                            item.child.height = newSize;
+                        }
+                    }
+                }
+            }
+        }
+    }
     // Calculate total main size after flex
     let totalMain = totalGap;
     for (const item of items) {
@@ -469,9 +326,12 @@ function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, cr
     for (const item of items) {
         const mainDim = isRow ? item.w : item.h;
         const crossDim = isRow ? item.h : item.w;
-        // Cross-axis alignment
+        // Cross-axis alignment (alignSelf overrides align)
+        const effectiveAlign = (item.child._flexConfig?.alignSelf && item.child._flexConfig.alignSelf !== 'auto')
+            ? item.child._flexConfig.alignSelf
+            : align;
         let crossPos = crossOffset;
-        switch (align) {
+        switch (effectiveAlign) {
             case 'start':
                 break;
             case 'center':
@@ -655,11 +515,14 @@ class FlexContainer extends Container {
         const contentH = this._explicitHeight > 0 ? this._explicitHeight - pt - pb : Infinity;
         const mainLimit = isRow ? contentW : contentH;
         const crossLimit = isRow ? contentH : contentW;
-        // Measure children
-        const measured = this._layoutChildren.map((child) => {
+        // Measure children (skip flexExclude — they position themselves)
+        const measured = [];
+        for (const child of this._layoutChildren) {
+            if (child._flexConfig?.flexExclude)
+                continue;
             const { w, h, ox, oy } = measureChild(child);
-            return { child, w, h, ox, oy };
-        });
+            measured.push({ child, w, h, ox, oy });
+        }
         // Split into lines (if wrapping)
         const lines = [];
         if (flexWrap && mainLimit < Infinity) {
@@ -702,7 +565,12 @@ class FlexContainer extends Container {
             const mainStart = isRow ? pl : pt;
             // Offset items by padding
             const tempItems = line.map((item) => ({ ...item }));
-            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            // For single-line layouts, use the full available cross space for alignment;
+            // for multi-line (wrapping), each line gets its own measured cross size.
+            const effectiveCross = lines.length === 1 && crossLimit < Infinity
+                ? crossLimit
+                : (crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, effectiveCross);
             // Apply main-axis padding offset
             for (const item of tempItems) {
                 const origChild = line.find((l) => l.child === item.child);
@@ -723,36 +591,263 @@ class FlexContainer extends Container {
             maxX = Math.max(maxX, child.x + w);
             maxY = Math.max(maxY, child.y + h);
         }
-        const [, pr, pb] = this._padding;
-        return { width: maxX + pr, height: maxY + pb };
-    }
-    /** React reconciler update hook — applies changed config props */
-    updateConfig(changed) {
-        if ('direction' in changed)
-            this.setDirection(changed.direction);
-        if ('justifyContent' in changed)
-            this.setJustifyContent(changed.justifyContent);
-        if ('alignItems' in changed)
-            this.setAlignItems(changed.alignItems);
-        if ('gap' in changed)
-            this.setGap(changed.gap);
-        if ('padding' in changed)
-            this.setPadding(changed.padding);
-        if ('flexWrap' in changed) {
-            this._config.flexWrap = changed.flexWrap;
-            this._layoutDirty = true;
+        const [, pr, pb] = this._padding;
+        return { width: maxX + pr, height: maxY + pb };
+    }
+    /** React reconciler update hook — applies changed config props */
+    updateConfig(changed) {
+        if ('direction' in changed)
+            this.setDirection(changed.direction);
+        if ('justifyContent' in changed)
+            this.setJustifyContent(changed.justifyContent);
+        if ('alignItems' in changed)
+            this.setAlignItems(changed.alignItems);
+        if ('gap' in changed)
+            this.setGap(changed.gap);
+        if ('padding' in changed)
+            this.setPadding(changed.padding);
+        if ('flexWrap' in changed) {
+            this._config.flexWrap = changed.flexWrap;
+            this._layoutDirty = true;
+        }
+        if ('width' in changed || 'height' in changed) {
+            this.resize(changed.width ?? this._explicitWidth, changed.height ?? this._explicitHeight);
+            return; // resize calls updateLayout
+        }
+        if (this._layoutDirty)
+            this.updateLayout();
+    }
+    destroy(options) {
+        this._layoutChildren.length = 0;
+        super.destroy(options);
+    }
+}
+
+/** Flex item prop names that should be forwarded to _flexConfig on the child */
+const FLEX_ITEM_PROPS = ['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude'];
+/** Extract FlexItemConfig from props if any flex item props are present */
+function extractFlexItemConfig(props) {
+    let config;
+    for (const key of FLEX_ITEM_PROPS) {
+        if (key in props) {
+            if (!config)
+                config = {};
+            config[key] = props[key];
+        }
+    }
+    return config;
+}
+/** Apply flex item config to a child being added to a FlexContainer */
+function addChildToFlex(parent, child) {
+    const flexConfig = child._flexConfig;
+    if (flexConfig && Object.keys(flexConfig).length > 0) {
+        parent.addFlexChild(child, flexConfig);
+    }
+    else {
+        parent.addChild(child);
+    }
+}
+function toPascalCase(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const hostConfig = {
+    isPrimaryRenderer: false,
+    supportsMutation: true,
+    supportsPersistence: false,
+    supportsHydration: false,
+    createInstance(type, props) {
+        const name = toPascalCase(type);
+        const Ctor = catalogue[name];
+        if (!Ctor) {
+            throw new Error(`[PixiReconciler] Unknown element "<${type}>". ` +
+                `Call extend({ ${name} }) before rendering.`);
+        }
+        let instance;
+        if (Ctor.prototype.__uiComponent) {
+            // Config-based UI component: pass props as constructor config
+            const config = extractConfig(props);
+            instance = new Ctor(config);
+            applyEventProps(instance, props);
+        }
+        else {
+            // Standard PixiJS element
+            instance = new Ctor();
+            applyProps(instance, props);
+        }
+        if (hasEventProps(props) && instance.eventMode === 'auto') {
+            instance.eventMode = 'static';
+        }
+        // Store flex item config for when this child is added to a FlexContainer parent
+        const flexItemConfig = extractFlexItemConfig(props);
+        if (flexItemConfig) {
+            instance._flexConfig = { ...instance._flexConfig, ...flexItemConfig };
+        }
+        return instance;
+    },
+    createTextInstance() {
+        throw new Error('[PixiReconciler] Text strings are not supported. Use a <text> element.');
+    },
+    appendInitialChild(parent, child) {
+        if (child instanceof Container) {
+            if (parent instanceof FlexContainer) {
+                addChildToFlex(parent, child);
+            }
+            else {
+                parent.addChild(child);
+            }
+        }
+    },
+    appendChild(parent, child) {
+        if (child instanceof Container) {
+            if (parent instanceof FlexContainer) {
+                addChildToFlex(parent, child);
+            }
+            else {
+                parent.addChild(child);
+            }
+        }
+    },
+    appendChildToContainer(container, child) {
+        if (child instanceof Container)
+            container.addChild(child);
+    },
+    removeChild(parent, child) {
+        if (child instanceof Container) {
+            parent.removeChild(child);
+            child.destroy({ children: true });
+        }
+    },
+    removeChildFromContainer(container, child) {
+        if (child instanceof Container) {
+            container.removeChild(child);
+            child.destroy({ children: true });
+        }
+    },
+    insertBefore(parent, child, beforeChild) {
+        if (child instanceof Container && beforeChild instanceof Container) {
+            if (child.parent)
+                child.parent.removeChild(child);
+            const index = parent.getChildIndex(beforeChild);
+            parent.addChildAt(child, index);
+        }
+    },
+    insertInContainerBefore(container, child, beforeChild) {
+        if (child instanceof Container && beforeChild instanceof Container) {
+            if (child.parent)
+                child.parent.removeChild(child);
+            const index = container.getChildIndex(beforeChild);
+            container.addChildAt(child, index);
+        }
+    },
+    commitUpdate(instance, _updatePayload, _type, oldProps, newProps) {
+        if (instance.__uiComponent && typeof instance.updateConfig === 'function') {
+            const changed = diffConfig(newProps, oldProps);
+            if (Object.keys(changed).length > 0) {
+                instance.updateConfig(changed);
+            }
+            applyEventProps(instance, newProps, oldProps);
+        }
+        else {
+            applyProps(instance, newProps, oldProps);
+        }
+        // Update flex item config if parent is FlexContainer
+        const newFlexConfig = extractFlexItemConfig(newProps);
+        const oldFlexConfig = extractFlexItemConfig(oldProps);
+        if (newFlexConfig || oldFlexConfig) {
+            instance._flexConfig = { ...instance._flexConfig, ...newFlexConfig };
+            // Trigger parent relayout
+            if (instance.parent instanceof FlexContainer) {
+                instance.parent.updateLayout();
+            }
         }
-        if ('width' in changed || 'height' in changed) {
-            this.resize(changed.width ?? this._explicitWidth, changed.height ?? this._explicitHeight);
-            return; // resize calls updateLayout
+        if (hasEventProps(newProps) && instance.eventMode === 'auto') {
+            instance.eventMode = 'static';
         }
-        if (this._layoutDirty)
-            this.updateLayout();
-    }
-    destroy(options) {
-        this._layoutChildren.length = 0;
-        super.destroy(options);
-    }
+    },
+    finalizeInitialChildren() {
+        return false;
+    },
+    prepareUpdate() {
+        return true;
+    },
+    shouldSetTextContent() {
+        return false;
+    },
+    getRootHostContext() {
+        return null;
+    },
+    getChildHostContext(parentHostContext) {
+        return parentHostContext;
+    },
+    getPublicInstance(instance) {
+        return instance;
+    },
+    prepareForCommit() {
+        return null;
+    },
+    resetAfterCommit() { },
+    preparePortalMount() { },
+    scheduleTimeout: setTimeout,
+    cancelTimeout: clearTimeout,
+    noTimeout: -1,
+    getCurrentEventPriority() {
+        return DefaultEventPriority;
+    },
+    hideInstance(instance) {
+        instance.visible = false;
+    },
+    unhideInstance(instance) {
+        instance.visible = true;
+    },
+    hideTextInstance() { },
+    unhideTextInstance() { },
+    clearContainer() { },
+    detachDeletedInstance() { },
+    prepareScopeUpdate() { },
+    getInstanceFromNode() { return null; },
+    getInstanceFromScope() { return null; },
+    beforeActiveInstanceBlur() { },
+    afterActiveInstanceBlur() { },
+};
+const reconciler = Reconciler(hostConfig);
+
+function createPixiRoot(container) {
+    const fiberRoot = reconciler.createContainer(container, // containerInfo
+    ConcurrentRoot, // tag
+    null, // hydrationCallbacks
+    false, // isStrictMode
+    null, // concurrentUpdatesByDefaultOverride
+    '', // identifierPrefix
+    (err) => console.error('[PixiRoot]', err), null);
+    return {
+        render(element) {
+            reconciler.updateContainer(element, fiberRoot, null, () => { });
+        },
+        unmount() {
+            reconciler.updateContainer(null, fiberRoot, null, () => { });
+        },
+    };
+}
+
+/**
+ * Resolve a ViewInput to a Container instance.
+ *
+ * @example
+ * ```ts
+ * resolveView('btn-idle')          // → Sprite.from('btn-idle')
+ * resolveView(someTexture)         // → new Sprite(someTexture)
+ * resolveView(myCustomContainer)   // → myCustomContainer (as-is)
+ * resolveView(undefined)           // → null
+ * ```
+ */
+function resolveView(input) {
+    if (input == null)
+        return null;
+    if (typeof input === 'string')
+        return Sprite.from(input);
+    if (input instanceof Texture)
+        return new Sprite(input);
+    return input;
 }
 
 /**
@@ -2604,6 +2699,362 @@ class ScrollContainer extends Container {
     }
 }
 
+/**
+ * Draggable slider with customizable track, fill, and handle views.
+ *
+ * @example
+ * ```ts
+ * const volume = new Slider({
+ *   min: 0, max: 1, value: 0.5,
+ *   width: 200, height: 8,
+ *   fillColor: 0xffd700,
+ *   onUpdate: (v) => console.log('Volume:', v),
+ * });
+ * ```
+ */
+class Slider extends Container {
+    __uiComponent = true;
+    _track;
+    _fill;
+    _fillMask;
+    _handle;
+    _config;
+    _value;
+    _dragging = false;
+    onUpdate = null;
+    onChange = null;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            min: config.min ?? 0,
+            max: config.max ?? 1,
+            step: config.step ?? 0,
+            width: config.width ?? 200,
+            height: config.height ?? 8,
+            borderRadius: config.borderRadius ?? 4,
+            trackColor: config.trackColor ?? 0x333333,
+            fillColor: config.fillColor ?? 0xffd700,
+            handleRadius: config.handleRadius ?? 12,
+            handleColor: config.handleColor ?? 0xffffff,
+        };
+        this._value = config.value ?? this._config.min;
+        this.onUpdate = config.onUpdate ?? null;
+        this.onChange = config.onChange ?? null;
+        const { width, height, borderRadius, trackColor, fillColor, handleRadius, handleColor } = this._config;
+        // Track
+        const customTrack = resolveView(config.trackView);
+        if (customTrack) {
+            customTrack.width = width;
+            customTrack.height = height;
+            this._track = customTrack;
+        }
+        else {
+            const g = new Graphics();
+            g.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
+            this._track = g;
+        }
+        this.addChild(this._track);
+        // Fill
+        const customFill = resolveView(config.fillView);
+        if (customFill) {
+            customFill.width = width;
+            customFill.height = height;
+            this._fill = customFill;
+        }
+        else {
+            const g = new Graphics();
+            g.roundRect(0, 0, width, height, borderRadius).fill(fillColor);
+            this._fill = g;
+        }
+        this.addChild(this._fill);
+        // Fill mask
+        this._fillMask = new Graphics();
+        this.addChild(this._fillMask);
+        this._fill.mask = this._fillMask;
+        // Handle
+        const customHandle = resolveView(config.handleView);
+        if (customHandle) {
+            this._handle = customHandle;
+        }
+        else {
+            const g = new Graphics();
+            g.circle(0, 0, handleRadius).fill(handleColor);
+            this._handle = g;
+        }
+        this._handle.y = height / 2;
+        this.addChild(this._handle);
+        // Interaction
+        this.eventMode = 'static';
+        this.cursor = 'pointer';
+        // Hit area covers track + handle overflow
+        const hitPad = Math.max(handleRadius - height / 2, 0);
+        this.hitArea = { contains: (x, y) => x >= -hitPad && x <= width + hitPad && y >= -hitPad && y <= height + hitPad };
+        this.on('pointerdown', this._onPointerDown, this);
+        this.on('globalpointermove', this._onPointerMove, this);
+        this.on('pointerup', this._onPointerUp, this);
+        this.on('pointerupoutside', this._onPointerUp, this);
+        this._updateVisuals();
+    }
+    /** Current value */
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        const clamped = this._applyStep(Math.max(this._config.min, Math.min(this._config.max, v)));
+        if (clamped === this._value)
+            return;
+        this._value = clamped;
+        this._updateVisuals();
+    }
+    get min() { return this._config.min; }
+    get max() { return this._config.max; }
+    /** React reconciler update hook */
+    updateConfig(changed) {
+        if ('value' in changed)
+            this.value = changed.value;
+        if ('min' in changed) {
+            this._config.min = changed.min;
+            this._updateVisuals();
+        }
+        if ('max' in changed) {
+            this._config.max = changed.max;
+            this._updateVisuals();
+        }
+        if ('step' in changed)
+            this._config.step = changed.step;
+        if ('onUpdate' in changed)
+            this.onUpdate = changed.onUpdate;
+        if ('onChange' in changed)
+            this.onChange = changed.onChange;
+    }
+    _fraction() {
+        const { min, max } = this._config;
+        return max === min ? 0 : (this._value - min) / (max - min);
+    }
+    _applyStep(v) {
+        const { step, min } = this._config;
+        if (step <= 0)
+            return v;
+        return min + Math.round((v - min) / step) * step;
+    }
+    _updateVisuals() {
+        const frac = this._fraction();
+        const w = this._config.width;
+        const h = this._config.height;
+        // Update fill mask
+        this._fillMask.clear();
+        this._fillMask.rect(0, 0, w * frac, h).fill(0xffffff);
+        // Update handle position
+        this._handle.x = w * frac;
+    }
+    _valueFromPointer(e) {
+        const local = this.toLocal(e.global);
+        const frac = Math.max(0, Math.min(1, local.x / this._config.width));
+        const { min, max } = this._config;
+        return this._applyStep(min + frac * (max - min));
+    }
+    _onPointerDown(e) {
+        this._dragging = true;
+        const newValue = this._valueFromPointer(e);
+        if (newValue !== this._value) {
+            this._value = newValue;
+            this._updateVisuals();
+            this.onUpdate?.(this._value);
+        }
+    }
+    _onPointerMove(e) {
+        if (!this._dragging)
+            return;
+        const newValue = this._valueFromPointer(e);
+        if (newValue !== this._value) {
+            this._value = newValue;
+            this._updateVisuals();
+            this.onUpdate?.(this._value);
+        }
+    }
+    _onPointerUp(_e) {
+        if (!this._dragging)
+            return;
+        this._dragging = false;
+        this.onChange?.(this._value);
+    }
+    destroy(options) {
+        this.off('pointerdown', this._onPointerDown, this);
+        this.off('globalpointermove', this._onPointerMove, this);
+        this.off('pointerup', this._onPointerUp, this);
+        this.off('pointerupoutside', this._onPointerUp, this);
+        this.onUpdate = null;
+        this.onChange = null;
+        super.destroy(options);
+    }
+}
+
+/**
+ * Toggle switch with two states.
+ *
+ * Supports custom ON/OFF views or auto-generated Graphics-based toggle.
+ * Click to toggle, or use `forceSwitch(value)` programmatically.
+ *
+ * @example
+ * ```ts
+ * const mute = new Toggle({
+ *   value: false,
+ *   onColor: 0x22cc22,
+ *   onChange: (on) => audioManager.mute(!on),
+ * });
+ * ```
+ */
+class Toggle extends Container {
+    __uiComponent = true;
+    _value;
+    _onView = null;
+    _offView = null;
+    _handle = null;
+    _trackGfx = null;
+    _config;
+    _useCustomViews;
+    onChange = null;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            width: config.width ?? 52,
+            height: config.height ?? 28,
+            onColor: config.onColor ?? 0x22cc22,
+            offColor: config.offColor ?? 0x666666,
+            handleColor: config.handleColor ?? 0xffffff,
+            handleRadius: config.handleRadius ?? 0, // 0 = auto
+            animationDuration: config.animationDuration ?? 200,
+        };
+        this._value = config.value ?? false;
+        this.onChange = config.onChange ?? null;
+        const customOn = resolveView(config.onView);
+        const customOff = resolveView(config.offView);
+        this._useCustomViews = !!(customOn || customOff);
+        if (this._useCustomViews) {
+            // Custom view mode: show/hide ON and OFF views
+            if (customOn) {
+                this._onView = customOn;
+                this._onView.visible = this._value;
+                this.addChild(this._onView);
+            }
+            if (customOff) {
+                this._offView = customOff;
+                this._offView.visible = !this._value;
+                this.addChild(this._offView);
+            }
+        }
+        else {
+            // Graphics mode: track + sliding handle
+            const { width, height, handleColor } = this._config;
+            const handleRadius = this._config.handleRadius || (height / 2 - 3);
+            this._config.handleRadius = handleRadius;
+            this._trackGfx = new Graphics();
+            this.addChild(this._trackGfx);
+            this._drawTrack();
+            const handle = new Graphics();
+            handle.circle(0, 0, handleRadius).fill(handleColor);
+            handle.y = height / 2;
+            handle.x = this._value ? width - handleRadius - 3 : handleRadius + 3;
+            this._handle = handle;
+            this.addChild(handle);
+        }
+        // Interaction
+        this.eventMode = 'static';
+        this.cursor = 'pointer';
+        this.on('pointertap', this._onTap, this);
+    }
+    /** Current toggle state */
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        if (v === this._value)
+            return;
+        this.forceSwitch(v);
+    }
+    /** Programmatically switch to a specific state with animation */
+    forceSwitch(value) {
+        this._value = value;
+        this._animateToState();
+    }
+    /** React reconciler update hook */
+    updateConfig(changed) {
+        if ('value' in changed)
+            this.value = changed.value;
+        if ('onChange' in changed)
+            this.onChange = changed.onChange;
+        if ('animationDuration' in changed)
+            this._config.animationDuration = changed.animationDuration;
+    }
+    _onTap() {
+        this._value = !this._value;
+        this._animateToState();
+        this.onChange?.(this._value);
+    }
+    _animateToState() {
+        const duration = this._config.animationDuration;
+        if (this._useCustomViews) {
+            // Custom views: crossfade
+            if (this._onView) {
+                Tween.killTweensOf(this._onView);
+                if (this._value) {
+                    this._onView.visible = true;
+                    Tween.to(this._onView, { alpha: 1 }, duration);
+                }
+                else {
+                    Tween.to(this._onView, { alpha: 0 }, duration).then(() => {
+                        if (this._onView)
+                            this._onView.visible = false;
+                    });
+                }
+            }
+            if (this._offView) {
+                Tween.killTweensOf(this._offView);
+                if (!this._value) {
+                    this._offView.visible = true;
+                    Tween.to(this._offView, { alpha: 1 }, duration);
+                }
+                else {
+                    Tween.to(this._offView, { alpha: 0 }, duration).then(() => {
+                        if (this._offView)
+                            this._offView.visible = false;
+                    });
+                }
+            }
+        }
+        else {
+            // Graphics mode: slide handle + recolor track
+            this._drawTrack();
+            if (this._handle) {
+                const { width } = this._config;
+                const handleRadius = this._config.handleRadius;
+                const targetX = this._value ? width - handleRadius - 3 : handleRadius + 3;
+                Tween.killTweensOf(this._handle);
+                Tween.to(this._handle, { x: targetX }, duration);
+            }
+        }
+    }
+    _drawTrack() {
+        if (!this._trackGfx)
+            return;
+        const { width, height, onColor, offColor } = this._config;
+        const radius = height / 2;
+        this._trackGfx.clear();
+        this._trackGfx.roundRect(0, 0, width, height, radius).fill(this._value ? onColor : offColor);
+    }
+    destroy(options) {
+        this.off('pointertap', this._onTap, this);
+        if (this._handle)
+            Tween.killTweensOf(this._handle);
+        if (this._onView)
+            Tween.killTweensOf(this._onView);
+        if (this._offView)
+            Tween.killTweensOf(this._offView);
+        this.onChange = null;
+        super.destroy(options);
+    }
+}
+
 /**
  * Register all standard PixiJS display objects for JSX use.
  * Call once at app startup before rendering any React scenes.
@@ -2644,6 +3095,7 @@ function extendUIElements() {
     extend({
         Button, Label, Panel, FlexContainer, ProgressBar,
         ScrollContainer, Modal, Toast, BalanceDisplay, WinDisplay, Layout,
+        Slider, Toggle,
     });
 }
 /**