@eva/plugin-ui 2.1.0-beta.1 → 2.1.0-beta.11

package/dist/EVA.plugin.ui.js

@@ -8,17 +8,18 @@ globalThis.EVA = globalThis.EVA || {};
 globalThis.EVA.plugin = globalThis.EVA.plugin || {};
 var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
   'use strict';
-  exports.UIShapeType = void 0;
-  (function (UIShapeType) {
-    UIShapeType["RECT"] = "rect";
-    UIShapeType["CIRCLE"] = "circle";
-    UIShapeType["ELLIPSE"] = "ellipse";
-    UIShapeType["ROUNDED_RECT"] = "roundedRect";
-  })(exports.UIShapeType || (exports.UIShapeType = {}));
-  class UI extends eva_js.Component {
+  exports.ShapeType = void 0;
+  (function (ShapeType) {
+    ShapeType["RECT"] = "rect";
+    ShapeType["CIRCLE"] = "circle";
+    ShapeType["ELLIPSE"] = "ellipse";
+    ShapeType["ROUNDED_RECT"] = "roundedRect";
+  })(exports.ShapeType || (exports.ShapeType = {}));
+  const UIShapeType = exports.ShapeType;
+  class Shape extends eva_js.Component {
     constructor() {
       super(...arguments);
-      this.componentName = 'UI';
+      this.componentName = 'Shape';
       this.shapes = [];
     }
     static getInspectorMetadata() {
@@ -60,7 +61,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         isArray: false
       }];
       return {
-        name: UI.componentName,
+        name: Shape.componentName,
         type: 'object',
         isArray: false,
         isFolder: true,
@@ -185,22 +186,22 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       const x = style.x || 0;
       const y = style.y || 0;
       switch (type) {
-        case exports.UIShapeType.RECT:
-        case exports.UIShapeType.ROUNDED_RECT:
+        case exports.ShapeType.RECT:
+        case exports.ShapeType.ROUNDED_RECT:
           return {
             width: style.width,
             height: style.height,
             x,
             y
           };
-        case exports.UIShapeType.CIRCLE:
+        case exports.ShapeType.CIRCLE:
           return {
             width: style.radius * 2,
             height: style.radius * 2,
             x,
             y
           };
-        case exports.UIShapeType.ELLIPSE:
+        case exports.ShapeType.ELLIPSE:
           return {
             width: style.width,
             height: style.height,
@@ -233,37 +234,27 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       });
     }
     drawShape(graphics, type, style) {
+      var _a;
       if (style.alpha !== undefined) {
         graphics.alpha = style.alpha;
       }
-      if (style.stroke && style.lineWidth !== undefined) {
-        graphics.setStrokeStyle({
-          color: style.stroke,
-          width: style.lineWidth
-        });
-      } else if (style.stroke) {
-        graphics.setStrokeStyle({
-          color: style.stroke,
-          width: 1
-        });
-      }
       switch (type) {
-        case exports.UIShapeType.RECT:
+        case exports.ShapeType.RECT:
           this.drawRect(graphics, style);
           break;
-        case exports.UIShapeType.CIRCLE:
+        case exports.ShapeType.CIRCLE:
           this.drawCircle(graphics, style);
           break;
-        case exports.UIShapeType.ELLIPSE:
+        case exports.ShapeType.ELLIPSE:
           this.drawEllipse(graphics, style);
           break;
-        case exports.UIShapeType.ROUNDED_RECT:
+        case exports.ShapeType.ROUNDED_RECT:
           this.drawRoundedRect(graphics, style);
           break;
         default:
           console.warn(`Unknown shape type: ${type}`);
       }
-      if (style.fill) {
+      if (style.fill !== undefined) {
         if (typeof style.fill === 'string' && style.fill.includes('linear-gradient')) {
           const gradientInfo = this.parseLinearGradient(style.fill);
           if (gradientInfo) {
@@ -278,6 +269,12 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           graphics.fill(style.fill);
         }
       }
+      if (style.stroke !== undefined) {
+        graphics.stroke({
+          color: style.stroke,
+          width: (_a = style.lineWidth) !== null && _a !== void 0 ? _a : 1
+        });
+      }
     }
     drawRect(graphics, style) {
       const x = style.x || 0;
@@ -355,7 +352,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       this.redraw();
     }
   }
-  UI.componentName = 'UI';
+  Shape.componentName = 'Shape';
   function createCommonjsModule(fn) {
     var module = {
       exports: {}
@@ -5946,7 +5943,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     queueMicrotask(() => whenContainerReady(game, go, fn, attempts - 1));
   }
   function resolveViewRef(game, go, ref) {
-    var _a;
+    var _a, _b;
     if (!ref) return null;
     if ('entityName' in ref) {
       const child = findChildEntity$1(go, ref.entityName);
@@ -5958,14 +5955,17 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
               childContainer.parent.removeChild(childContainer);
             }
           } catch (_) {}
-          return childContainer;
+          return wrapBorrowedEntityView(childContainer, child.name);
         }
       }
       if (ref.fallback) return resolveViewRef(game, go, ref.fallback);
       return null;
     }
+    if ('shape' in ref) {
+      return (_a = drawInlineShape(ref.shape)) !== null && _a !== void 0 ? _a : ref.fallback ? resolveViewRef(game, go, ref.fallback) : null;
+    }
     if ('ui' in ref) {
-      return (_a = drawInlineShape(ref.ui)) !== null && _a !== void 0 ? _a : ref.fallback ? resolveViewRef(game, go, ref.fallback) : null;
+      return (_b = drawInlineShape(ref.ui)) !== null && _b !== void 0 ? _b : ref.fallback ? resolveViewRef(game, go, ref.fallback) : null;
     }
     if ('texture' in ref) {
       const tex = resolveTexture(game, ref.texture);
@@ -5990,8 +5990,51 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }
     return null;
   }
+  function normalizeProgressFillViewRef(ref, fillPaddings, fallbackSize) {
+    if (!ref) return ref;
+    const paddings = normalizePaddings(fillPaddings);
+    if (paddings.top === 0 && paddings.right === 0 && paddings.bottom === 0 && paddings.left === 0) {
+      return ref;
+    }
+    const fallback = ref.fallback ? normalizeProgressFillViewRef(ref.fallback, paddings, fallbackSize) : undefined;
+    if ('color' in ref) {
+      const width = shrinkSize(ref.width, paddings.left + paddings.right);
+      const height = shrinkSize(ref.height, paddings.top + paddings.bottom);
+      return _extends(_extends(_extends({}, ref), {
+        width,
+        height,
+        radius: shrinkRadius(ref.radius, width, height)
+      }), fallback ? {
+        fallback
+      } : {});
+    }
+    if ('shape' in ref) {
+      return _extends(_extends(_extends({}, ref), {
+        shape: shrinkInlineShape(ref.shape, paddings, fallbackSize)
+      }), fallback ? {
+        fallback
+      } : {});
+    }
+    if ('ui' in ref) {
+      return _extends(_extends(_extends({}, ref), {
+        ui: shrinkInlineShape(ref.ui, paddings, fallbackSize)
+      }), fallback ? {
+        fallback
+      } : {});
+    }
+    if (fallback) return _extends(_extends({}, ref), {
+      fallback
+    });
+    return ref;
+  }
+  function wrapBorrowedEntityView(childContainer, childName) {
+    const wrapper = new pixi_js.Container();
+    wrapper.label = childName ? `${childName}:view-ref` : 'plugin-ui-view-ref';
+    wrapper.addChild(childContainer);
+    return wrapper;
+  }
   function resolveTexture(game, key) {
-    var _a, _b;
+    var _a, _b, _c;
     const resourceModule = (_a = game === null || game === void 0 ? void 0 : game.resource) !== null && _a !== void 0 ? _a : null;
     if ((_b = resourceModule === null || resourceModule === void 0 ? void 0 : resourceModule.instances) === null || _b === void 0 ? void 0 : _b[key]) {
       const inst = resourceModule.instances[key];
@@ -5999,46 +6042,136 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       if ((inst === null || inst === void 0 ? void 0 : inst.image) instanceof pixi_js.Texture) return inst.image;
     }
     try {
-      return pixi_js.Texture.from(key);
+      return (_c = pixi_js.Texture.from(key)) !== null && _c !== void 0 ? _c : null;
     } catch (_) {
       return null;
     }
   }
   function drawInlineShape(shape) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     if (!shape || !shape.type) return null;
     const g = new pixi_js.Graphics();
     const {
       style
     } = shape;
-    const w = (_a = style.width) !== null && _a !== void 0 ? _a : 0;
-    const h = (_b = style.height) !== null && _b !== void 0 ? _b : 0;
-    const r = (_c = style.radius) !== null && _c !== void 0 ? _c : 0;
+    const x = (_a = style.x) !== null && _a !== void 0 ? _a : 0;
+    const y = (_b = style.y) !== null && _b !== void 0 ? _b : 0;
+    const w = (_c = style.width) !== null && _c !== void 0 ? _c : 0;
+    const h = (_d = style.height) !== null && _d !== void 0 ? _d : 0;
+    const r = (_e = style.radius) !== null && _e !== void 0 ? _e : 0;
     switch (shape.type) {
       case 'rect':
-        g.rect(0, 0, w, h);
+        drawRect(g, x, y, w, h);
         break;
       case 'roundedRect':
-        g.roundRect(0, 0, w, h, r);
+        drawRoundedRect(g, x, y, w, h, r);
         break;
       case 'circle':
-        g.circle(r, r, r);
+        drawCircle(g, x + r, y + r, r);
         break;
       case 'ellipse':
-        g.ellipse(w / 2, h / 2, w / 2, h / 2);
+        drawEllipse(g, x + w / 2, y + h / 2, w / 2, h / 2);
         break;
     }
     if (style.fill !== undefined) g.fill(style.fill);
     if (style.stroke !== undefined && style.lineWidth !== undefined) {
-      g.setStrokeStyle({
+      g.stroke({
         color: style.stroke,
         width: style.lineWidth
       });
-      g.stroke();
+    } else if (style.stroke !== undefined) {
+      g.stroke({
+        color: style.stroke,
+        width: 1
+      });
     }
     if (style.alpha !== undefined) g.alpha = style.alpha;
+    try {
+      Object.defineProperty(g, 'clone', {
+        value: () => {
+          var _a;
+          return (_a = drawInlineShape(shape)) !== null && _a !== void 0 ? _a : new pixi_js.Graphics();
+        },
+        configurable: true
+      });
+    } catch (_) {}
     return g;
   }
+  function drawRect(g, x, y, width, height) {
+    const anyGraphics = g;
+    if (typeof anyGraphics.rect === 'function') {
+      anyGraphics.rect(x, y, width, height);
+      return;
+    }
+    anyGraphics.drawRect(x, y, width, height);
+  }
+  function drawRoundedRect(g, x, y, width, height, radius) {
+    const anyGraphics = g;
+    if (typeof anyGraphics.roundRect === 'function') {
+      anyGraphics.roundRect(x, y, width, height, radius);
+      return;
+    }
+    anyGraphics.drawRoundedRect(x, y, width, height, radius);
+  }
+  function drawCircle(g, x, y, radius) {
+    const anyGraphics = g;
+    if (typeof anyGraphics.circle === 'function') {
+      anyGraphics.circle(x, y, radius);
+      return;
+    }
+    anyGraphics.drawCircle(x, y, radius);
+  }
+  function drawEllipse(g, x, y, halfWidth, halfHeight) {
+    const anyGraphics = g;
+    if (typeof anyGraphics.ellipse === 'function') {
+      anyGraphics.ellipse(x, y, halfWidth, halfHeight);
+      return;
+    }
+    anyGraphics.drawEllipse(x, y, halfWidth, halfHeight);
+  }
+  function normalizePaddings(fillPaddings) {
+    return {
+      top: readPadding(fillPaddings === null || fillPaddings === void 0 ? void 0 : fillPaddings.top),
+      right: readPadding(fillPaddings === null || fillPaddings === void 0 ? void 0 : fillPaddings.right),
+      bottom: readPadding(fillPaddings === null || fillPaddings === void 0 ? void 0 : fillPaddings.bottom),
+      left: readPadding(fillPaddings === null || fillPaddings === void 0 ? void 0 : fillPaddings.left)
+    };
+  }
+  function readPadding(value) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) return 0;
+    return Math.max(0, value);
+  }
+  function shrinkSize(value, inset) {
+    return Math.max(0, value - inset);
+  }
+  function shrinkOptionalSize(value, fallback, inset) {
+    if (typeof value === 'number') return shrinkSize(value, inset);
+    if (typeof fallback === 'number') return shrinkSize(fallback, inset);
+    return value;
+  }
+  function shrinkRadius(radius, width, height) {
+    if (typeof radius !== 'number' || !Number.isFinite(radius)) return radius;
+    const limits = [radius];
+    if (typeof width === 'number') limits.push(width / 2);
+    if (typeof height === 'number') limits.push(height / 2);
+    return Math.max(0, Math.min(...limits));
+  }
+  function shrinkInlineShape(shape, paddings, fallbackSize) {
+    var _a;
+    const style = (_a = shape.style) !== null && _a !== void 0 ? _a : {};
+    const width = shrinkOptionalSize(style.width, fallbackSize === null || fallbackSize === void 0 ? void 0 : fallbackSize.width, paddings.left + paddings.right);
+    const height = shrinkOptionalSize(style.height, fallbackSize === null || fallbackSize === void 0 ? void 0 : fallbackSize.height, paddings.top + paddings.bottom);
+    const radius = shrinkRadius(style.radius, width, height);
+    return _extends(_extends({}, shape), {
+      style: _extends(_extends(_extends(_extends({}, style), width !== undefined ? {
+        width
+      } : {}), height !== undefined ? {
+        height
+      } : {}), radius !== undefined ? {
+        radius
+      } : {})
+    });
+  }
   function findChildEntity$1(go, name) {
     var _a, _b, _c;
     if (typeof go.findChildByName === 'function') {
@@ -6058,11 +6191,18 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       super(...arguments);
       this.toggleCount = 0;
       this.pressCount = 0;
+      this.downCount = 0;
+      this.upCount = 0;
       this.hoverCount = 0;
+      this.outCount = 0;
+      this.upOutCount = 0;
       this.changeCount = 0;
       this.updateCount = 0;
       this.selectCount = 0;
+      this.lastSignal = 'idle';
+      this.visualState = 'default';
       this.focused = false;
+      this.__evaExplicitFields = new Set();
     }
     init(p) {
       if (p) this.applyParams(p);
@@ -6077,6 +6217,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         if (!(name in p)) continue;
         const v = p[name];
         if (v === undefined) continue;
+        this.__evaExplicitFields.add(name);
         switch (spec.kind) {
           case 'scalar':
             this[name] = v;
@@ -6194,6 +6335,99 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         }
     }
   }
+  function readTransformRenderSize(go, options = {}) {
+    var _a;
+    const size = (_a = go === null || go === void 0 ? void 0 : go.transform) === null || _a === void 0 ? void 0 : _a.size;
+    if (!size) return null;
+    const width = normalizeSizeValue(size.width, options.allowZero);
+    const height = normalizeSizeValue(size.height, options.allowZero);
+    if (width === undefined && height === undefined) return null;
+    return {
+      width,
+      height
+    };
+  }
+  function hasExplicitRenderSize(component) {
+    if (!component) return false;
+    const explicitFields = component.__evaExplicitFields;
+    if (explicitFields && typeof explicitFields.has === 'function') {
+      return explicitFields.has('width') || explicitFields.has('height');
+    }
+    return component.width !== undefined || component.height !== undefined;
+  }
+  function applyTransformSizeToInstance(def, instance, component, go, source) {
+    const size = readTransformRenderSize(go, {
+      allowZero: source === 'transform-change'
+    });
+    if (!size) return false;
+    const context = {
+      componentName: def.name,
+      component,
+      gameObject: go,
+      source
+    };
+    if (def.applySize) def.applySize(instance, size, component !== null && component !== void 0 ? component : {}, context);else applyRuntimeSize(instance, size);
+    return true;
+  }
+  function applyRuntimeSize(instance, size) {
+    if (!instance || !size) return;
+    const width = normalizeSizeValue(size.width, true);
+    const height = normalizeSizeValue(size.height, true);
+    if (width === undefined && height === undefined) return;
+    const nextWidth = width !== null && width !== void 0 ? width : getCurrentSize(instance, 'width');
+    const nextHeight = height !== null && height !== void 0 ? height : getCurrentSize(instance, 'height');
+    let applied = false;
+    if (typeof instance.setSize === 'function' && nextWidth !== undefined && nextHeight !== undefined) {
+      try {
+        instance.setSize(nextWidth, nextHeight);
+        applied = true;
+      } catch (_) {
+        applied = false;
+      }
+    }
+    if (!applied) {
+      if (width !== undefined) instance.width = width;
+      if (height !== undefined) instance.height = height;
+    }
+    relayoutRuntimeInstance(instance);
+  }
+  function applyListLayoutSize(instance, size) {
+    const width = normalizeSizeValue(size.width, true);
+    const height = normalizeSizeValue(size.height, true);
+    if (width !== undefined) {
+      try {
+        instance.maxWidth = width;
+      } catch (_) {}
+    }
+    if (height !== undefined) {
+      try {
+        instance.maxHeight = height;
+      } catch (_) {}
+    }
+    relayoutRuntimeInstance(instance);
+  }
+  function relayoutRuntimeInstance(instance) {
+    var _a, _b, _c, _d;
+    try {
+      (_b = (_a = instance === null || instance === void 0 ? void 0 : instance.list) === null || _a === void 0 ? void 0 : _a.arrangeChildren) === null || _b === void 0 ? void 0 : _b.call(_a);
+    } catch (_) {}
+    try {
+      (_c = instance === null || instance === void 0 ? void 0 : instance.arrangeChildren) === null || _c === void 0 ? void 0 : _c.call(instance);
+    } catch (_) {}
+    try {
+      (_d = instance === null || instance === void 0 ? void 0 : instance.resize) === null || _d === void 0 ? void 0 : _d.call(instance, true);
+    } catch (_) {}
+  }
+  function normalizeSizeValue(value, allowZero = false) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return undefined;
+    if (allowZero ? n < 0 : n <= 0) return undefined;
+    return n;
+  }
+  function getCurrentSize(instance, key) {
+    const n = Number(instance === null || instance === void 0 ? void 0 : instance[key]);
+    return Number.isFinite(n) && n >= 0 ? n : undefined;
+  }
   const ENABLED = {
     kind: 'scalar',
     default: true,
@@ -6247,11 +6481,64 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     signalMap: c => ({
       press: () => {
         c.pressCount += 1;
-        return {};
+        c.lastSignal = 'press';
+        c.visualState = 'default';
+        return {
+          pressCount: c.pressCount,
+          lastSignal: c.lastSignal,
+          visualState: c.visualState
+        };
       },
-      down: true,
-      up: true,
-      hover: true
+      down: () => {
+        c.downCount += 1;
+        c.lastSignal = 'down';
+        c.visualState = 'pressed';
+        return {
+          downCount: c.downCount,
+          lastSignal: c.lastSignal,
+          visualState: c.visualState
+        };
+      },
+      up: () => {
+        c.upCount += 1;
+        c.lastSignal = 'up';
+        c.visualState = 'default';
+        return {
+          upCount: c.upCount,
+          lastSignal: c.lastSignal,
+          visualState: c.visualState
+        };
+      },
+      hover: () => {
+        c.hoverCount += 1;
+        c.lastSignal = 'hover';
+        c.visualState = 'hover';
+        return {
+          hoverCount: c.hoverCount,
+          lastSignal: c.lastSignal,
+          visualState: c.visualState
+        };
+      },
+      out: () => {
+        c.outCount += 1;
+        c.lastSignal = 'out';
+        c.visualState = 'default';
+        return {
+          outCount: c.outCount,
+          lastSignal: c.lastSignal,
+          visualState: c.visualState
+        };
+      },
+      upOut: () => {
+        c.upOutCount += 1;
+        c.lastSignal = 'upOut';
+        c.visualState = 'default';
+        return {
+          upOutCount: c.upOutCount,
+          lastSignal: c.lastSignal,
+          visualState: c.visualState
+        };
+      }
     }),
     syncOnChange: (inst, c) => {
       inst.enabled = c.enabled;
@@ -6320,6 +6607,9 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           }, {
             name: 'disabled',
             type: 'object'
+          }, {
+            name: 'icon',
+            type: 'object'
           }]
         }
       },
@@ -6331,8 +6621,71 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         kind: 'shallowMerge',
         default: {}
       },
+      iconOffset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
       nineSliceSprite: {
         kind: 'opaque'
+      },
+      textStyle: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      textClass: {
+        kind: 'scalar',
+        default: 'text'
+      },
+      bitmapFontName: {
+        kind: 'scalar',
+        default: 'TitleFont'
+      },
+      defaultTextScale: {
+        kind: 'opaque'
+      },
+      defaultIconScale: {
+        kind: 'opaque'
+      },
+      defaultTextAnchor: {
+        kind: 'opaque'
+      },
+      defaultIconAnchor: {
+        kind: 'opaque'
+      },
+      anchor: {
+        kind: 'scalar'
+      },
+      anchorX: {
+        kind: 'scalar'
+      },
+      anchorY: {
+        kind: 'scalar'
+      },
+      scale: {
+        kind: 'scalar'
+      },
+      animations: {
+        kind: 'opaque'
+      },
+      contentFittingMode: {
+        kind: 'scalar'
+      },
+      ignoreRefitting: {
+        kind: 'scalar'
+      },
+      width: {
+        kind: 'scalar',
+        inspector: {
+          name: 'width',
+          type: 'number'
+        }
+      },
+      height: {
+        kind: 'scalar',
+        inspector: {
+          name: 'height',
+          type: 'number'
+        }
       }
     },
     views: {
@@ -6350,25 +6703,44 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       }, {
         name: 'disabled',
         required: false
+      }, {
+        name: 'icon',
+        required: false
       }]
     },
     optionsBuilder: (c, v) => {
-      var _a, _b, _d, _e;
+      var _a, _b, _d, _e, _f;
       const opts = {
-        text: c.text,
+        text: makeFancyButtonText(c),
         padding: c.padding,
         offset: c.offset,
         textOffset: c.textOffset,
-        nineSliceSprite: c.nineSliceSprite
+        iconOffset: c.iconOffset,
+        nineSliceSprite: c.nineSliceSprite,
+        defaultTextScale: c.defaultTextScale,
+        defaultIconScale: c.defaultIconScale,
+        defaultTextAnchor: c.defaultTextAnchor,
+        defaultIconAnchor: c.defaultIconAnchor,
+        anchor: c.anchor,
+        anchorX: c.anchorX,
+        anchorY: c.anchorY,
+        scale: c.scale,
+        animations: c.animations,
+        contentFittingMode: c.contentFittingMode,
+        ignoreRefitting: c.ignoreRefitting
       };
-      if ((_a = v.object) === null || _a === void 0 ? void 0 : _a.default) opts.defaultView = v.object.default;
-      if ((_b = v.object) === null || _b === void 0 ? void 0 : _b.hover) opts.hoverView = v.object.hover;
-      if ((_d = v.object) === null || _d === void 0 ? void 0 : _d.pressed) opts.pressedView = v.object.pressed;
-      if ((_e = v.object) === null || _e === void 0 ? void 0 : _e.disabled) opts.disabledView = v.object.disabled;
+      if ((_a = v.object) === null || _a === void 0 ? void 0 : _a.default) opts.defaultView = getFancyButtonView(c, 'default', v.object.default);
+      if ((_b = v.object) === null || _b === void 0 ? void 0 : _b.hover) opts.hoverView = getFancyButtonView(c, 'hover', v.object.hover);
+      if ((_d = v.object) === null || _d === void 0 ? void 0 : _d.pressed) opts.pressedView = getFancyButtonView(c, 'pressed', v.object.pressed);
+      if ((_e = v.object) === null || _e === void 0 ? void 0 : _e.disabled) opts.disabledView = getFancyButtonView(c, 'disabled', v.object.disabled);
+      if ((_f = v.object) === null || _f === void 0 ? void 0 : _f.icon) opts.icon = v.object.icon;
       return opts;
     },
     postCreate: (inst, c) => {
       inst.enabled = c.enabled;
+      if (c.state && typeof inst.setState === 'function') inst.setState(c.state, true);
+      applyFancyButtonAnchor(inst, c);
+      applyOptionalSize(inst, c);
       if (c.selected) applySelectedTint(inst, c);
     },
     signalMap: c => ({
@@ -6387,15 +6759,96 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       inst.enabled = c.enabled;
       if (c.text !== undefined && inst.text !== c.text) inst.text = c.text;
       if (c.padding !== undefined && inst.padding !== c.padding) inst.padding = c.padding;
+      if (c.textOffset !== undefined) inst.textOffset = c.textOffset;
+      if (c.iconOffset !== undefined) inst.iconOffset = c.iconOffset;
+      if (c.defaultTextScale !== undefined) inst.defaultTextScale = c.defaultTextScale;
+      if (c.defaultIconScale !== undefined) inst.defaultIconScale = c.defaultIconScale;
+      if (c.defaultTextAnchor !== undefined) inst.defaultTextAnchor = c.defaultTextAnchor;
+      if (c.defaultIconAnchor !== undefined) inst.defaultIconAnchor = c.defaultIconAnchor;
+      if (c.contentFittingMode !== undefined) inst.contentFittingMode = c.contentFittingMode;
+      if (c.ignoreRefitting !== undefined && inst.options) inst.options.ignoreRefitting = c.ignoreRefitting;
+      if (c.state && typeof inst.setState === 'function') inst.setState(c.state, true);
+      applyFancyButtonAnchor(inst, c);
+      applyOptionalSize(inst, c);
       applySelectedTint(inst, c);
     }
   };
+  function applyFancyButtonAnchor(inst, c) {
+    var _a, _b, _d, _e, _f, _g, _h;
+    const hasAnchor = c.anchor !== undefined || c.anchorX !== undefined || c.anchorY !== undefined;
+    if (!hasAnchor || !((_a = inst === null || inst === void 0 ? void 0 : inst.anchor) === null || _a === void 0 ? void 0 : _a.set)) return;
+    const x = (_e = (_d = (_b = c.anchorX) !== null && _b !== void 0 ? _b : c.anchor) !== null && _d !== void 0 ? _d : inst.anchor.x) !== null && _e !== void 0 ? _e : 0;
+    const y = (_h = (_g = (_f = c.anchorY) !== null && _f !== void 0 ? _f : c.anchor) !== null && _g !== void 0 ? _g : inst.anchor.y) !== null && _h !== void 0 ? _h : 0;
+    try {
+      inst.anchor.set(x, y);
+    } catch (_) {}
+  }
+  function makeFancyButtonText(c) {
+    var _a, _b, _d;
+    if (c.text === undefined) return undefined;
+    const text = String(c.text);
+    if (c.textClass === 'html') {
+      return new pixi_js.HTMLText({
+        text,
+        style: c.textStyle
+      });
+    }
+    if (c.textClass === 'bitmap') {
+      const fontFamily = (_a = c.bitmapFontName) !== null && _a !== void 0 ? _a : 'TitleFont';
+      ensureBitmapFont(fontFamily, c.textStyle);
+      return new pixi_js.BitmapText({
+        text,
+        style: {
+          fontFamily,
+          fontSize: (_d = (_b = c.textStyle) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _d !== void 0 ? _d : 40
+        }
+      });
+    }
+    if (c.textStyle && Object.keys(c.textStyle).length > 0) {
+      return new pixi_js.Text({
+        text,
+        style: c.textStyle
+      });
+    }
+    return c.text;
+  }
+  const installedBitmapFonts = new Set();
+  function ensureBitmapFont(name, style) {
+    if (installedBitmapFonts.has(name)) return;
+    try {
+      pixi_js.BitmapFontManager.install({
+        name,
+        style: style !== null && style !== void 0 ? style : {}
+      });
+    } catch (_) {}
+    installedBitmapFonts.add(name);
+  }
+  function getFancyButtonView(c, key, resolved) {
+    var _a;
+    const ref = (_a = c.views) === null || _a === void 0 ? void 0 : _a[key];
+    if (c.nineSliceSprite && ref && 'texture' in ref) return getTextureView(ref.texture);
+    return resolved;
+  }
   function applySelectedTint(inst, c) {
     try {
       const dv = inst.defaultView;
       if (dv && 'tint' in dv) dv.tint = c.selected ? c.selectedTint : 0xFFFFFF;
     } catch (_) {}
   }
+  function syncCheckBoxTextStyle(inst, c) {
+    var _a, _b, _d;
+    const style = inst.style;
+    if (!style || !c.textStyle && !c.textOffset) return;
+    const nextStyle = _extends(_extends({}, style), {
+      text: (_a = c.textStyle) !== null && _a !== void 0 ? _a : style.text,
+      textOffset: (_b = c.textOffset) !== null && _b !== void 0 ? _b : style.textOffset
+    });
+    inst._style = nextStyle;
+    if (inst.labelText && c.textStyle) inst.labelText.style = c.textStyle;
+    try {
+      (_d = inst.alignText) === null || _d === void 0 ? void 0 : _d.call(inst);
+    } catch (_) {}
+  }
   const CHECKBOX_DEF = {
     name: 'CheckBox',
     signalPrefix: 'checkbox',
@@ -6434,6 +6887,16 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           }]
         }
       },
+      textStyle: {
+        kind: 'shallowMerge',
+        default: {
+          fill: 0xffffff
+        }
+      },
+      textOffset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
       disabledStyle: {
         kind: 'shallowMerge',
         default: {
@@ -6456,7 +6919,9 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     optionsBuilder: (c, v) => ({
       style: {
         checked: v.object.checked,
-        unchecked: v.object.unchecked
+        unchecked: v.object.unchecked,
+        text: c.textStyle,
+        textOffset: c.textOffset
       },
       text: c.text,
       checked: c.checked
@@ -6472,6 +6937,8 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }),
     syncOnChange: (inst, c) => {
       if (inst.checked !== c.checked) inst.checked = c.checked;
+      if (c.text !== undefined && inst.text !== c.text) inst.text = c.text;
+      syncCheckBoxTextStyle(inst, c);
     }
   };
   const SWITCHER_DEF = {
@@ -6519,6 +6986,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }),
     syncOnChange: (inst, c) => {
       if (inst.active !== c.active) inst.active = c.active;
+      if (c.triggerEvent !== undefined) inst.triggerEvents = c.triggerEvent;
     }
   };
   const SLIDER_DEF = {
@@ -6579,6 +7047,37 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         kind: 'shallowMerge',
         default: {}
       },
+      nineSliceSprite: {
+        kind: 'opaque'
+      },
+      fillPaddings: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      valueTextStyle: {
+        kind: 'shallowMerge',
+        default: {
+          fill: 0xffffff
+        }
+      },
+      valueTextOffset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      width: {
+        kind: 'scalar',
+        inspector: {
+          name: 'width',
+          type: 'number'
+        }
+      },
+      height: {
+        kind: 'scalar',
+        inspector: {
+          name: 'height',
+          type: 'number'
+        }
+      },
       bindToStore: BIND_STORE
     },
     views: {
@@ -6596,18 +7095,26 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       }]
     },
     optionsBuilder: (c, v) => {
-      centerThumbPivot(v.object.thumb);
+      var _a, _b, _d;
+      const bg = getSliderView((_a = c.views) === null || _a === void 0 ? void 0 : _a.bg, v.object.bg);
+      const fill = getSliderView((_b = c.views) === null || _b === void 0 ? void 0 : _b.fill, v.object.fill);
+      const thumb = getSliderView((_d = c.views) === null || _d === void 0 ? void 0 : _d.thumb, v.object.thumb);
       return {
-        bg: v.object.bg,
-        fill: v.object.fill,
-        slider: v.object.thumb,
+        bg,
+        fill,
+        slider: thumb,
         min: c.min,
         max: c.max,
         step: c.step,
         value: c.value,
-        showValue: c.showValue
+        showValue: c.showValue,
+        fillPaddings: c.fillPaddings,
+        nineSliceSprite: c.nineSliceSprite,
+        valueTextStyle: c.valueTextStyle,
+        valueTextOffset: c.valueTextOffset
       };
     },
+    postCreate: (inst, c) => applyOptionalSize(inst, c),
     signalMap: c => ({
       update: vv => {
         c.value = vv;
@@ -6626,23 +7133,9 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }),
     syncOnChange: (inst, c) => {
       if (inst.value !== c.value) inst.value = c.value;
+      applyOptionalSize(inst, c);
     }
   };
-  function centerThumbPivot(thumb) {
-    var _a, _b, _d, _e;
-    if (!thumb) return;
-    if (thumb.anchor) return;
-    let h = 0;
-    try {
-      const b = (_a = thumb.getBounds) === null || _a === void 0 ? void 0 : _a.call(thumb);
-      h = (_d = (_b = b === null || b === void 0 ? void 0 : b.height) !== null && _b !== void 0 ? _b : thumb.height) !== null && _d !== void 0 ? _d : 0;
-    } catch (_) {
-      h = (_e = thumb.height) !== null && _e !== void 0 ? _e : 0;
-    }
-    if (h > 0 && thumb.pivot) {
-      thumb.pivot.set(0, h / 2);
-    }
-  }
   const DOUBLE_SLIDER_DEF = {
     name: 'DoubleSlider',
     signalPrefix: 'doubleslider',
@@ -6697,6 +7190,37 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         kind: 'shallowMerge',
         default: {}
       },
+      nineSliceSprite: {
+        kind: 'opaque'
+      },
+      fillPaddings: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      valueTextStyle: {
+        kind: 'shallowMerge',
+        default: {
+          fill: 0xffffff
+        }
+      },
+      valueTextOffset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      width: {
+        kind: 'scalar',
+        inspector: {
+          name: 'width',
+          type: 'number'
+        }
+      },
+      height: {
+        kind: 'scalar',
+        inspector: {
+          name: 'height',
+          type: 'number'
+        }
+      },
       bindToStore1: {
         kind: 'scalar'
       },
@@ -6722,20 +7246,29 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       }]
     },
     optionsBuilder: (c, v) => {
-      centerThumbPivot(v.object.slider1);
-      centerThumbPivot(v.object.slider2);
+      var _a, _b, _d, _e;
+      const bg = getSliderView((_a = c.views) === null || _a === void 0 ? void 0 : _a.bg, v.object.bg);
+      const fill = getSliderView((_b = c.views) === null || _b === void 0 ? void 0 : _b.fill, v.object.fill);
+      const slider1 = getSliderView((_d = c.views) === null || _d === void 0 ? void 0 : _d.slider1, v.object.slider1);
+      const slider2 = getSliderView((_e = c.views) === null || _e === void 0 ? void 0 : _e.slider2, v.object.slider2);
       return {
-        bg: v.object.bg,
-        fill: v.object.fill,
-        slider1: v.object.slider1,
-        slider2: v.object.slider2,
+        bg,
+        fill,
+        slider1,
+        slider2,
         min: c.min,
         max: c.max,
+        step: c.step,
         value1: c.value1,
         value2: c.value2,
-        showValue: c.showValue
+        showValue: c.showValue,
+        fillPaddings: c.fillPaddings,
+        nineSliceSprite: c.nineSliceSprite,
+        valueTextStyle: c.valueTextStyle,
+        valueTextOffset: c.valueTextOffset
       };
     },
+    postCreate: (inst, c) => applyOptionalSize(inst, c),
     signalMap: c => ({
       update: (v1, v2) => {
         c.value1 = v1;
@@ -6759,6 +7292,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     syncOnChange: (inst, c) => {
       if (inst.value1 !== c.value1) inst.value1 = c.value1;
       if (inst.value2 !== c.value2) inst.value2 = c.value2;
+      applyOptionalSize(inst, c);
     }
   };
   const PROGRESS_BAR_DEF = {
@@ -6797,6 +7331,20 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         kind: 'shallowMerge',
         default: {}
       },
+      width: {
+        kind: 'scalar',
+        inspector: {
+          name: 'width',
+          type: 'number'
+        }
+      },
+      height: {
+        kind: 'scalar',
+        inspector: {
+          name: 'height',
+          type: 'number'
+        }
+      },
       bindToStore: BIND_STORE
     },
     views: {
@@ -6805,19 +7353,52 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       keys: []
     },
     optionsBuilder: (c, _v) => ({
-      bg: c.__resolved_bg,
-      fill: c.__resolved_fill,
+      bg: c.__resolved_bg_view,
+      fill: c.__resolved_fill_view,
       fillPaddings: c.fillPaddings,
+      nineSliceSprite: c.nineSliceSprite,
       progress: computeProgressPct(c)
     }),
+    postCreate: (inst, c) => applyOptionalSize(inst, c),
     syncOnChange: (inst, c) => {
       const pct = computeProgressPct(c);
       if (inst.progress !== pct) inst.progress = pct;
+      applyOptionalSize(inst, c);
     },
     mixin: {
       getProgressPct: getProgressPctMixin
     }
   };
+  function getSliderView(ref, resolved) {
+    if (ref && 'texture' in ref) {
+      return getTextureView(ref.texture);
+    }
+    return resolved;
+  }
+  function getProgressView(ref, resolved, nineSliceSprite) {
+    if (nineSliceSprite && ref && 'texture' in ref) {
+      return getTextureView(ref.texture);
+    }
+    return resolved;
+  }
+  function getTextureView(textureKey) {
+    var _a;
+    return (_a = resolveTexture(undefined, textureKey)) !== null && _a !== void 0 ? _a : textureKey;
+  }
+  function applyOptionalSize(inst, c) {
+    var _a, _b;
+    if (c.width === undefined && c.height === undefined) return;
+    const width = (_a = c.width) !== null && _a !== void 0 ? _a : inst.width;
+    const height = (_b = c.height) !== null && _b !== void 0 ? _b : inst.height;
+    if (typeof inst.setSize === 'function') {
+      try {
+        inst.setSize(width, height);
+        return;
+      } catch (_) {}
+    }
+    if (c.width !== undefined) inst.width = c.width;
+    if (c.height !== undefined) inst.height = c.height;
+  }
   function computeProgressPct(c) {
     const [min, max] = c.valueRange;
     if (max <= min) return 0;
@@ -6906,6 +7487,21 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           step: 0.05
         }
       },
+      cap: {
+        kind: 'scalar',
+        inspector: {
+          name: 'cap',
+          type: 'string'
+        }
+      },
+      rotation: {
+        kind: 'scalar',
+        default: 0
+      },
+      offset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
       bindToStore: BIND_STORE
     },
     optionsBuilder: c => ({
@@ -6915,16 +7511,27 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       fillColor: c.fillColor,
       backgroundAlpha: c.backgroundAlpha,
       fillAlpha: c.fillAlpha,
+      cap: c.cap,
       value: computeProgressPct(c)
     }),
+    postCreate: (inst, c) => applyCircularProgressTransform(inst, c),
     syncOnChange: (inst, c) => {
       const pct = computeProgressPct(c);
       if (inst.progress !== pct) inst.progress = pct;
+      applyCircularProgressTransform(inst, c);
     },
     mixin: {
       getProgressPct: getProgressPctMixin
     }
   };
+  function applyCircularProgressTransform(inst, c) {
+    var _a, _b;
+    if (c.rotation !== undefined) inst.rotation = c.rotation;
+    if (c.offset) {
+      inst.x = (_a = c.offset.x) !== null && _a !== void 0 ? _a : 0;
+      inst.y = (_b = c.offset.y) !== null && _b !== void 0 ? _b : 0;
+    }
+  }
   const INPUT_DEF = {
     name: 'Input',
     signalPrefix: 'input',
@@ -7006,6 +7613,20 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           type: 'boolean'
         }
       },
+      width: {
+        kind: 'scalar',
+        inspector: {
+          name: 'width',
+          type: 'number'
+        }
+      },
+      height: {
+        kind: 'scalar',
+        inspector: {
+          name: 'height',
+          type: 'number'
+        }
+      },
       bindToStore: BIND_STORE
     },
     views: {
@@ -7014,7 +7635,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       required: true
     },
     optionsBuilder: (c, v) => ({
-      bg: v.single,
+      bg: getProgressView(c.bgView, v.single, c.nineSliceSprite),
       textStyle: c.textStyle,
       placeholder: c.placeholder,
       value: c.value,
@@ -7026,6 +7647,10 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       nineSliceSprite: c.nineSliceSprite,
       addMask: c.addMask
     }),
+    postCreate: (inst, c) => {
+      inst.enabled = c.enabled;
+      applyOptionalSize(inst, c);
+    },
     signalMap: c => ({
       change: text => {
         c.value = text;
@@ -7040,6 +7665,8 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }),
     syncOnChange: (inst, c) => {
       if (inst.value !== c.value) inst.value = c.value;
+      if (inst.enabled !== c.enabled) inst.enabled = c.enabled;
+      applyOptionalSize(inst, c);
     }
   };
   const LIST_DEF = {
@@ -7095,28 +7722,34 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         default: 'items'
       }
     },
-    optionsBuilder: (c, _v) => {
+    optionsBuilder: (c, _v) => ({
+      type: c.type,
+      elementsMargin: c.elementsMargin,
+      padding: c.padding,
+      vertPadding: c.vertPadding,
+      horPadding: c.horPadding,
+      topPadding: c.topPadding,
+      bottomPadding: c.bottomPadding,
+      leftPadding: c.leftPadding,
+      rightPadding: c.rightPadding,
+      maxWidth: c.maxWidth,
+      maxHeight: c.maxHeight
+    }),
+    postCreate: (inst, c) => {
       var _a;
-      return {
-        type: c.type,
-        elementsMargin: c.elementsMargin,
-        padding: c.padding,
-        vertPadding: c.vertPadding,
-        horPadding: c.horPadding,
-        topPadding: c.topPadding,
-        bottomPadding: c.bottomPadding,
-        leftPadding: c.leftPadding,
-        rightPadding: c.rightPadding,
-        maxWidth: c.maxWidth,
-        maxHeight: c.maxHeight,
-        children: (_a = c.__resolved_items) !== null && _a !== void 0 ? _a : []
-      };
+      for (const item of (_a = c.__resolved_items) !== null && _a !== void 0 ? _a : []) {
+        try {
+          inst.addChild(item);
+        } catch (_) {}
+      }
+      if (typeof inst.arrangeChildren === 'function') inst.arrangeChildren();
     },
     syncOnChange: (inst, c) => {
       if (inst.type !== c.type) inst.type = c.type;
       if (inst.elementsMargin !== c.elementsMargin) inst.elementsMargin = c.elementsMargin;
       if (typeof inst.arrangeChildren === 'function') inst.arrangeChildren();
-    }
+    },
+    applySize: applyListLayoutSize
   };
   const SCROLL_BOX_DEF = {
     name: 'ScrollBox',
@@ -7153,7 +7786,6 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       },
       background: {
         kind: 'scalar',
-        default: 0x111111,
         inspector: {
           name: 'background',
           type: 'color'
@@ -7187,6 +7819,38 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         kind: 'scalar',
         default: 0
       },
+      vertPadding: {
+        kind: 'scalar'
+      },
+      horPadding: {
+        kind: 'scalar'
+      },
+      topPadding: {
+        kind: 'scalar'
+      },
+      bottomPadding: {
+        kind: 'scalar'
+      },
+      leftPadding: {
+        kind: 'scalar'
+      },
+      rightPadding: {
+        kind: 'scalar'
+      },
+      globalScroll: {
+        kind: 'scalar',
+        default: true
+      },
+      shiftScroll: {
+        kind: 'scalar',
+        default: false
+      },
+      proximityRange: {
+        kind: 'scalar'
+      },
+      proximityDebounce: {
+        kind: 'scalar'
+      },
       inertia: {
         kind: 'scalar',
         default: true
@@ -7212,7 +7876,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       }
     },
     optionsBuilder: (c, _v) => {
-      var _a, _b;
+      var _a;
       const typeMap = {
         horizontal: 'horizontal',
         vertical: 'vertical',
@@ -7226,9 +7890,18 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         radius: c.radius,
         elementsMargin: c.elementsMargin,
         padding: c.padding,
+        vertPadding: c.vertPadding,
+        horPadding: c.horPadding,
+        topPadding: c.topPadding,
+        bottomPadding: c.bottomPadding,
+        leftPadding: c.leftPadding,
+        rightPadding: c.rightPadding,
         disableEasing: c.disableEasing,
         disableDynamicRendering: c.disableDynamicRendering,
-        items: (_b = c.__resolved_items) !== null && _b !== void 0 ? _b : []
+        globalScroll: c.globalScroll,
+        shiftScroll: c.shiftScroll,
+        proximityRange: c.proximityRange,
+        proximityDebounce: c.proximityDebounce
       };
     },
     signalMap: () => ({
@@ -7236,12 +7909,22 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         value: v
       })
     }),
-    syncOnChange: (inst, c) => {
+    postCreate: (inst, c) => {
+      var _a, _b;
+      if (typeof inst.addItems === 'function') {
+        try {
+          inst.addItems((_a = c.__resolved_items) !== null && _a !== void 0 ? _a : []);
+        } catch (_) {}
+      }
+      if (typeof ((_b = inst.list) === null || _b === void 0 ? void 0 : _b.arrangeChildren) === 'function') inst.list.arrangeChildren();
       if (typeof inst.resize === 'function') {
         try {
-          inst.resize(c.width, c.height);
+          inst.resize();
         } catch (_) {}
       }
+    },
+    syncOnChange: (inst, c) => {
+      applyOptionalSize(inst, c);
     }
   };
   const SELECT_DEF = {
@@ -7286,6 +7969,57 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       nineSliceSprite: {
         kind: 'opaque'
       },
+      width: {
+        kind: 'scalar',
+        inspector: {
+          name: 'width',
+          type: 'number'
+        }
+      },
+      height: {
+        kind: 'scalar',
+        inspector: {
+          name: 'height',
+          type: 'number'
+        }
+      },
+      radius: {
+        kind: 'scalar',
+        default: 4
+      },
+      visibleItems: {
+        kind: 'scalar'
+      },
+      itemWidth: {
+        kind: 'scalar'
+      },
+      itemHeight: {
+        kind: 'scalar'
+      },
+      itemBackgroundColor: {
+        kind: 'scalar',
+        default: 0x000000
+      },
+      itemHoverColor: {
+        kind: 'scalar',
+        default: 0x666666
+      },
+      selectedTextOffset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      scrollBox: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      textClass: {
+        kind: 'scalar',
+        default: 'text'
+      },
+      open: {
+        kind: 'scalar',
+        default: false
+      },
       bindToStore: BIND_STORE
     },
     views: {
@@ -7294,24 +8028,36 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       keys: []
     },
     optionsBuilder: c => {
-      var _a;
+      var _a, _b, _d, _e, _f;
       return {
         closedBG: c.__resolved_closedView,
         openBG: c.__resolved_openView,
         textStyle: c.textStyle,
+        TextClass: c.textClass === 'html' ? pixi_js.HTMLText : undefined,
+        selectedTextOffset: c.selectedTextOffset,
         items: {
           items: ((_a = c.items) !== null && _a !== void 0 ? _a : []).map(it => it.text),
-          backgroundColor: 0x000000,
-          hoverColor: 0x666666,
-          width: 200,
-          height: 30,
+          backgroundColor: c.itemBackgroundColor,
+          hoverColor: c.itemHoverColor,
+          width: (_d = (_b = c.itemWidth) !== null && _b !== void 0 ? _b : c.width) !== null && _d !== void 0 ? _d : 200,
+          height: (_f = (_e = c.itemHeight) !== null && _e !== void 0 ? _e : c.height) !== null && _f !== void 0 ? _f : 30,
           textStyle: c.textStyle,
-          radius: 4
+          TextClass: c.textClass === 'html' ? pixi_js.HTMLText : undefined,
+          radius: c.radius
         },
         selected: c.selectedIndex >= 0 ? c.selectedIndex : undefined,
+        visibleItems: c.visibleItems,
+        scrollBox: _extends({
+          width: c.width,
+          height: c.height && c.visibleItems ? c.height * c.visibleItems : undefined,
+          radius: c.radius
+        }, c.scrollBox),
         nineSliceSprite: c.nineSliceSprite
       };
     },
+    postCreate: (inst, c) => {
+      if (c.open && typeof inst.open === 'function') inst.open();
+    },
     signalMap: c => ({
       select: (value, text) => {
         c.selectedIndex = value;
@@ -7321,7 +8067,11 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           text
         };
       }
-    })
+    }),
+    syncOnChange: (inst, c) => {
+      if (c.open && typeof inst.open === 'function') inst.open();
+      if (!c.open && typeof inst.close === 'function') inst.close();
+    }
   };
   const DIALOG_DEF = {
     name: 'Dialog',
@@ -7406,26 +8156,75 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       nineSliceSprite: {
         kind: 'opaque'
       },
+      titleStyle: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      content: {
+        kind: 'scalar'
+      },
+      contentStyle: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      contentButtons: {
+        kind: 'arrayCopy',
+        default: []
+      },
+      contentCheckBoxes: {
+        kind: 'arrayCopy',
+        default: []
+      },
+      buttons: {
+        kind: 'arrayCopy',
+        default: []
+      },
+      buttonList: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      buttonListOffset: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      scrollBox: {
+        kind: 'shallowMerge',
+        default: {}
+      },
+      animations: {
+        kind: 'opaque'
+      },
       bindToStore: BIND_STORE
     },
     optionsBuilder: c => {
       var _a;
+      const background = c.nineSliceSprite && c.backgroundView && 'texture' in c.backgroundView ? c.backgroundView.texture : (_a = c.__resolved_background_view) !== null && _a !== void 0 ? _a : new pixi_js.Container();
       return {
         backdrop: c.__resolved_backdropView,
         backdropColor: backdropColorToNumber(c.backdropColor),
         backdropAlpha: c.backdropAlpha,
-        background: (_a = c.__resolved_backgroundView) !== null && _a !== void 0 ? _a : new pixi_js.Container(),
-        title: c.title,
+        background,
+        title: makeDialogText(c.title, c.titleStyle),
+        content: makeDialogContent(c),
+        buttons: makeDialogButtons(c.buttons),
+        buttonList: c.buttonList,
+        scrollBox: c.scrollBox,
         width: c.width,
         height: c.height,
         padding: c.padding,
         closeOnBackdropClick: c.closeOnBackdropClick,
-        nineSliceSprite: c.nineSliceSprite
+        nineSliceSprite: c.nineSliceSprite,
+        animations: c.animations
       };
     },
     postCreate: (inst, c) => {
+      alignDialogAnchoredContent(inst, c);
       if (c.open && typeof inst.open === 'function') inst.open();
     },
+    applySize: applyDialogSize,
+    onAttachedExtra: (inst, c, go) => {
+      wireDialogContentButtonPresses(inst, c, go);
+    },
     signalMap: c => ({
       close: () => {
         c.open = false;
@@ -7437,9 +8236,282 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       })
     }),
     syncOnChange: (inst, c) => {
+      alignDialogAnchoredContent(inst, c);
       if (c.open && !inst.isOpen && typeof inst.open === 'function') inst.open();else if (!c.open && inst.isOpen && typeof inst.close === 'function') inst.close();
     }
   };
+  function applyDialogSize(inst, size, c) {
+    var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _w, _x, _y;
+    const width = readPositiveSize((_b = (_a = size.width) !== null && _a !== void 0 ? _a : c.width) !== null && _b !== void 0 ? _b : (_d = inst === null || inst === void 0 ? void 0 : inst.options) === null || _d === void 0 ? void 0 : _d.width);
+    const height = readPositiveSize((_f = (_e = size.height) !== null && _e !== void 0 ? _e : c.height) !== null && _f !== void 0 ? _f : (_g = inst === null || inst === void 0 ? void 0 : inst.options) === null || _g === void 0 ? void 0 : _g.height);
+    if (width === undefined && height === undefined) return;
+    inst.options = (_h = inst.options) !== null && _h !== void 0 ? _h : {};
+    if (width !== undefined) inst.options.width = width;
+    if (height !== undefined) inst.options.height = height;
+    const dialogWidth = width !== null && width !== void 0 ? width : Number(inst.options.width) || Number((_j = inst.innerView) === null || _j === void 0 ? void 0 : _j.width) || 0;
+    const dialogHeight = height !== null && height !== void 0 ? height : Number(inst.options.height) || Number((_k = inst.innerView) === null || _k === void 0 ? void 0 : _k.height) || 0;
+    const padding = Number((_m = (_l = c.padding) !== null && _l !== void 0 ? _l : inst.options.padding) !== null && _m !== void 0 ? _m : 20) || 20;
+    if (inst.innerView) {
+      if (width !== undefined) inst.innerView.width = width;
+      if (height !== undefined) inst.innerView.height = height;
+      if ('anchor' in inst.innerView && ((_o = inst.innerView.anchor) === null || _o === void 0 ? void 0 : _o.set)) {
+        inst.innerView.anchor.set(0.5, 0.5);
+      } else {
+        try {
+          (_q = (_p = inst.innerView.pivot) === null || _p === void 0 ? void 0 : _p.set) === null || _q === void 0 ? void 0 : _q.call(_p, dialogWidth / 2, dialogHeight / 2);
+        } catch (_) {}
+      }
+    }
+    if (inst.titleText) {
+      inst.titleText.x = dialogWidth / 2;
+      inst.titleText.y = padding;
+    }
+    const titleHeight = Number((_r = inst.titleText) === null || _r === void 0 ? void 0 : _r.height) || 0;
+    const buttonHeight = Number((_s = inst.buttonContainer) === null || _s === void 0 ? void 0 : _s.height) || 0;
+    if (inst.buttonContainer) {
+      inst.buttonContainer.x = dialogWidth / 2 - (Number(inst.buttonContainer.width) || 0) / 2;
+      inst.buttonContainer.y = dialogHeight - padding - buttonHeight;
+    }
+    if (inst.scrollBox) {
+      inst.scrollBox.x = padding;
+      inst.scrollBox.y = padding + titleHeight;
+      const overrideSize = (_t = c.scrollBox) === null || _t === void 0 ? void 0 : _t.size;
+      const scrollWidth = (_u = readPositiveSize(overrideSize === null || overrideSize === void 0 ? void 0 : overrideSize.width)) !== null && _u !== void 0 ? _u : Math.max(0, dialogWidth - padding * 2);
+      const scrollHeight = (_w = readPositiveSize(overrideSize === null || overrideSize === void 0 ? void 0 : overrideSize.height)) !== null && _w !== void 0 ? _w : Math.max(0, dialogHeight - padding * 2 - titleHeight - buttonHeight);
+      if (typeof inst.scrollBox.setSize === 'function') inst.scrollBox.setSize(scrollWidth, scrollHeight);else {
+        inst.scrollBox.width = scrollWidth;
+        inst.scrollBox.height = scrollHeight;
+      }
+      try {
+        (_y = (_x = inst.scrollBox).resize) === null || _y === void 0 ? void 0 : _y.call(_x, true);
+      } catch (_) {}
+    }
+    alignDialogAnchoredContent(inst, _extends(_extends({}, c), {
+      width: dialogWidth,
+      height: dialogHeight
+    }));
+  }
+  function readPositiveSize(value) {
+    const n = Number(value);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+  }
+  function alignDialogAnchoredContent(inst, c) {
+    var _a, _b;
+    const innerView = inst === null || inst === void 0 ? void 0 : inst.innerView;
+    const contentView = inst === null || inst === void 0 ? void 0 : inst.contentView;
+    if ((innerView === null || innerView === void 0 ? void 0 : innerView.anchor) && contentView && c.width && c.height) {
+      contentView.x = -c.width / 2;
+      contentView.y = -c.height / 2;
+    }
+    applyDialogOffset(inst, 'buttonListOffset', inst.buttonContainer, c.buttonListOffset);
+    applyDialogOffset(inst, 'scrollBoxOffset', inst.scrollBox, (_a = c.scrollBox) === null || _a === void 0 ? void 0 : _a.offset);
+    applyDialogScrollBoxSize(inst, (_b = c.scrollBox) === null || _b === void 0 ? void 0 : _b.size);
+  }
+  function applyDialogOffset(inst, key, target, nextOffset) {
+    var _a, _b, _d, _e;
+    if (!target) return;
+    const applied = (_a = inst.__evaDialogAppliedOffsets) !== null && _a !== void 0 ? _a : {};
+    const prev = (_b = applied[key]) !== null && _b !== void 0 ? _b : {
+      x: 0,
+      y: 0
+    };
+    const next = {
+      x: (_d = nextOffset === null || nextOffset === void 0 ? void 0 : nextOffset.x) !== null && _d !== void 0 ? _d : 0,
+      y: (_e = nextOffset === null || nextOffset === void 0 ? void 0 : nextOffset.y) !== null && _e !== void 0 ? _e : 0
+    };
+    target.x += next.x - prev.x;
+    target.y += next.y - prev.y;
+    inst.__evaDialogAppliedOffsets = _extends(_extends({}, applied), {
+      [key]: next
+    });
+  }
+  function applyDialogScrollBoxSize(inst, nextSize) {
+    var _a, _b, _d;
+    const scrollBox = inst === null || inst === void 0 ? void 0 : inst.scrollBox;
+    if (!scrollBox) return;
+    const base = (_a = inst.__evaDialogBaseScrollBoxSize) !== null && _a !== void 0 ? _a : {
+      width: scrollBox.width,
+      height: scrollBox.height
+    };
+    inst.__evaDialogBaseScrollBoxSize = base;
+    const wasApplied = inst.__evaDialogAppliedScrollBoxSize;
+    if (!nextSize && !wasApplied) return;
+    const width = (_b = nextSize === null || nextSize === void 0 ? void 0 : nextSize.width) !== null && _b !== void 0 ? _b : base.width;
+    const height = (_d = nextSize === null || nextSize === void 0 ? void 0 : nextSize.height) !== null && _d !== void 0 ? _d : base.height;
+    if (typeof scrollBox.setSize === 'function') scrollBox.setSize(width, height);else {
+      scrollBox.width = width;
+      scrollBox.height = height;
+    }
+    if (typeof scrollBox.resize === 'function') scrollBox.resize(true);
+    inst.__evaDialogAppliedScrollBoxSize = !!nextSize;
+  }
+  function makeDialogText(text, style) {
+    if (text === undefined) return undefined;
+    if (style && Object.keys(style).length > 0) {
+      return new pixi_js.Text({
+        text,
+        style: style
+      });
+    }
+    return text;
+  }
+  function makeDialogContent(c) {
+    var _a, _b;
+    if ((_a = c.contentButtons) === null || _a === void 0 ? void 0 : _a.length) {
+      const records = [];
+      const buttons = c.contentButtons.map((button, index) => {
+        const pixiButton = new FancyButton$1(makeDialogButtonOptions(button));
+        applyOptionalSize(pixiButton, button);
+        if (button.disabled !== undefined) pixiButton.enabled = !button.disabled;
+        records.push({
+          button: pixiButton,
+          params: button,
+          index
+        });
+        return pixiButton;
+      });
+      c.__dialogContentButtons = records;
+      return buttons;
+    }
+    if ((_b = c.contentCheckBoxes) === null || _b === void 0 ? void 0 : _b.length) {
+      return c.contentCheckBoxes.map(checkBox => new CheckBox$1(makeDialogCheckBoxOptions(checkBox)));
+    }
+    return makeDialogText(c.content, c.contentStyle);
+  }
+  function wireDialogContentButtonPresses(inst, c, go) {
+    const records = c.__dialogContentButtons;
+    if (!Array.isArray(records) || records.length === 0 || inst.__evaDialogContentButtonPressesWired) return;
+    inst.__evaDialogContentButtonPressesWired = true;
+    inst.__evaDialogContentButtonPressCleanups = records.map(record => {
+      var _a;
+      const signal = (_a = record.button) === null || _a === void 0 ? void 0 : _a.onPress;
+      if (!signal || typeof signal.connect !== 'function') return undefined;
+      const conn = signal.connect(() => {
+        var _a, _b, _d, _e;
+        const value = (_b = (_a = record.params.value) !== null && _a !== void 0 ? _a : record.params.text) !== null && _b !== void 0 ? _b : record.index;
+        c.selectedContentIndex = record.index;
+        c.selectedContentValue = value;
+        c.selectCount = ((_d = c.selectCount) !== null && _d !== void 0 ? _d : 0) + 1;
+        c.lastSignal = 'select';
+        emitDialogSelection(go, {
+          index: record.index,
+          text: String((_e = record.params.text) !== null && _e !== void 0 ? _e : ''),
+          value
+        });
+        if (record.params.closeOnPress && typeof inst.close === 'function') inst.close();
+        const reopenDelay = Number(record.params.reopenDelay);
+        if (Number.isFinite(reopenDelay) && reopenDelay >= 0 && typeof inst.open === 'function') {
+          setTimeout(() => {
+            try {
+              inst.open();
+            } catch (_) {}
+          }, reopenDelay);
+        }
+      });
+      return () => {
+        try {
+          conn.disconnect();
+        } catch (_) {}
+      };
+    }).filter(Boolean);
+  }
+  function emitDialogSelection(go, payload) {
+    var _a, _b, _d;
+    const eventPayload = _extends({
+      entityName: go === null || go === void 0 ? void 0 : go.name
+    }, payload);
+    try {
+      (_a = go === null || go === void 0 ? void 0 : go.emit) === null || _a === void 0 ? void 0 : _a.call(go, 'select', eventPayload);
+    } catch (_) {}
+    try {
+      (_b = go === null || go === void 0 ? void 0 : go.emit) === null || _b === void 0 ? void 0 : _b.call(go, 'dialog:select', eventPayload);
+    } catch (_) {}
+    const mx = typeof globalThis !== 'undefined' ? globalThis.mx : undefined;
+    if ((_d = mx === null || mx === void 0 ? void 0 : mx.event) === null || _d === void 0 ? void 0 : _d.emit) {
+      try {
+        mx.event.emit('dialog:select', eventPayload);
+      } catch (_) {}
+    }
+  }
+  function makeDialogButtons(buttons) {
+    if (!(buttons === null || buttons === void 0 ? void 0 : buttons.length)) return undefined;
+    return buttons.map(button => {
+      const options = makeDialogButtonOptions(button);
+      const shouldMaterialize = button.disabled !== undefined || !!(button.nineSliceSprite && (button.width !== undefined || button.height !== undefined));
+      if (button.kind === 'button' || !shouldMaterialize) return options;
+      const pixiButton = new FancyButton$1(options);
+      applyOptionalSize(pixiButton, button);
+      pixiButton.enabled = !button.disabled;
+      return pixiButton;
+    });
+  }
+  function makeDialogButtonOptions(button) {
+    var _a, _b, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (button.kind === 'button') return makeDialogBareButton(button);
+    const width = (_a = button.width) !== null && _a !== void 0 ? _a : 110;
+    const height = (_b = button.height) !== null && _b !== void 0 ? _b : 48;
+    const radius = (_d = button.radius) !== null && _d !== void 0 ? _d : 12;
+    const color = (_e = button.color) !== null && _e !== void 0 ? _e : pixiStoryDefaultButtonColor;
+    return {
+      text: makeDialogText(button.text, button.textStyle),
+      defaultView: (_f = resolveDialogButtonView(button.defaultView)) !== null && _f !== void 0 ? _f : makeDialogButtonView(width, height, radius, color),
+      hoverView: (_g = resolveDialogButtonView(button.hoverView)) !== null && _g !== void 0 ? _g : makeDialogButtonView(width, height, radius, (_h = button.hoverColor) !== null && _h !== void 0 ? _h : color),
+      pressedView: (_j = resolveDialogButtonView(button.pressedView)) !== null && _j !== void 0 ? _j : makeDialogButtonView(width, height, radius, (_k = button.pressedColor) !== null && _k !== void 0 ? _k : color),
+      disabledView: (_l = resolveDialogButtonView(button.disabledView)) !== null && _l !== void 0 ? _l : button.disabledColor ? makeDialogButtonView(width, height, radius, button.disabledColor) : undefined,
+      nineSliceSprite: button.nineSliceSprite,
+      enabled: button.disabled === undefined ? undefined : !button.disabled,
+      animations: button.animations
+    };
+  }
+  function resolveDialogButtonView(view) {
+    return view ? getTextureView(view) : undefined;
+  }
+  const pixiStoryDefaultButtonColor = '#e91e63';
+  const pixiStoryDefaultTextColor = '#ffffff';
+  function makeDialogButtonView(width, height, radius, color) {
+    return new pixi_js.Graphics().roundRect(0, 0, width, height, radius).fill(color);
+  }
+  function makeDialogBareButton(button) {
+    var _a, _b, _d, _e, _f, _g;
+    const width = (_a = button.width) !== null && _a !== void 0 ? _a : 110;
+    const height = (_b = button.height) !== null && _b !== void 0 ? _b : 48;
+    const radius = (_d = button.radius) !== null && _d !== void 0 ? _d : 12;
+    const view = makeDialogButtonView(width, height, radius, (_e = button.color) !== null && _e !== void 0 ? _e : pixiStoryDefaultButtonColor);
+    const label = makeDialogText(button.text, button.textStyle);
+    if (label) {
+      label.x = width / 2;
+      label.y = height / 2;
+      try {
+        (_g = (_f = label.anchor) === null || _f === void 0 ? void 0 : _f.set) === null || _g === void 0 ? void 0 : _g.call(_f, 0.5);
+      } catch (_) {}
+      view.addChild(label);
+    }
+    const pixiButton = new Button$1(view);
+    if (button.disabled !== undefined) pixiButton.enabled = !button.disabled;
+    return pixiButton;
+  }
+  function makeDialogCheckBoxOptions(checkBox) {
+    var _a, _b, _d, _e, _f, _g;
+    const size = (_a = checkBox.size) !== null && _a !== void 0 ? _a : 30;
+    const radius = (_b = checkBox.radius) !== null && _b !== void 0 ? _b : 5;
+    const strokeColor = (_d = checkBox.strokeColor) !== null && _d !== void 0 ? _d : pixiStoryDefaultTextColor;
+    const strokeWidth = (_e = checkBox.strokeWidth) !== null && _e !== void 0 ? _e : 2;
+    return {
+      style: {
+        unchecked: new pixi_js.Graphics().roundRect(0, 0, size, size, radius).fill((_f = checkBox.uncheckedColor) !== null && _f !== void 0 ? _f : '#3e3f40').stroke({
+          color: strokeColor,
+          width: strokeWidth
+        }),
+        checked: new pixi_js.Graphics().roundRect(0, 0, size, size, radius).fill((_g = checkBox.checkedColor) !== null && _g !== void 0 ? _g : pixiStoryDefaultButtonColor).stroke({
+          color: strokeColor,
+          width: strokeWidth
+        }),
+        text: checkBox.textStyle
+      },
+      text: checkBox.text,
+      checked: checkBox.checked
+    };
+  }
   const MASKED_FRAME_DEF = {
     name: 'MaskedFrame',
     signalPrefix: 'maskedframe',
@@ -7453,13 +8525,29 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       },
       borderView: {
         kind: 'opaque'
+      },
+      borderWidth: {
+        kind: 'scalar',
+        default: 0,
+        inspector: {
+          name: 'borderWidth',
+          type: 'number'
+        }
+      },
+      borderColor: {
+        kind: 'scalar',
+        default: 0x000000,
+        inspector: {
+          name: 'borderColor',
+          type: 'color'
+        }
       }
     },
     optionsBuilder: c => ({
-      target: c.__resolved_targetView,
-      mask: c.__resolved_maskView,
-      borderWidth: 0,
-      borderColor: 0
+      target: c.__resolved_target_view,
+      mask: c.__resolved_mask_view,
+      borderWidth: c.borderWidth,
+      borderColor: c.borderColor
     })
   };
   const Button = defineUiComponent(BUTTON_DEF);
@@ -7496,6 +8584,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     constructor() {
       super(...arguments);
       this.componentName = 'RadioGroup';
+      this.selectedId = undefined;
       this.direction = 'vertical';
       this.elementsMargin = 4;
       this.boundCheckBoxes = [];
@@ -7615,10 +8704,22 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
   }
   function buildObserverSchema() {
     const out = {
+      Transform: [{
+        prop: ['size'],
+        deep: true
+      }],
+      Shape: [{
+        prop: ['shapes'],
+        deep: true
+      }],
       UI: [{
         prop: ['shapes'],
         deep: true
       }],
+      UIComponent: [{
+        prop: ['shapes'],
+        deep: true
+      }],
       RadioGroup: [{
         prop: ['selectedId'],
         deep: false
@@ -7643,12 +8744,16 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }
     return out;
   }
+  function isShapeComponentName(name) {
+    return name === 'Shape' || name === 'UI' || name === 'UIComponent';
+  }
   let UISystem = class UISystem extends eva_js.System {
     constructor() {
       super(...arguments);
       this.name = 'UISystem';
       this.instances = new Map();
       this.signalCleanups = new Map();
+      this.transformSizeAuthorities = new Set();
       this.radioGroupInstances = new Map();
     }
     get checkBoxInstances() {
@@ -7668,15 +8773,16 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }
     componentChanged(changed) {
       const name = changed.componentName;
-      if (name === 'UI') return this.handleUI(changed);
+      if (name === 'Transform') return this.handleTransformSizeChanged(changed);
+      if (isShapeComponentName(name)) return this.handleShape(changed);
       if (name === 'RadioGroup') return this.handleRadioGroup(changed);
       const def = COMPONENT_DEFINITIONS[name];
       if (def) return this.handleGeneric(def, changed);
     }
-    handleUI(changed) {
+    handleShape(changed) {
       if (changed.type === eva_js.OBSERVER_TYPE.ADD || changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
-        const ui = changed.component;
-        if (typeof ui.redraw === 'function') ui.redraw();
+        const shape = changed.component;
+        if (typeof shape.redraw === 'function') shape.redraw();
       }
     }
     handleGeneric(def, changed) {
@@ -7694,12 +8800,15 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
           return;
         }
         (_a = def.syncOnChange) === null || _a === void 0 ? void 0 : _a.call(def, inst, c);
+        if (this.transformSizeAuthorities.has(go.id)) {
+          applyTransformSizeToInstance(def, inst, c, go, 'component-change');
+        }
       } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
         this.detachGeneric(go.id, instMap, go);
       }
     }
     attachGeneric(def, c, go, instMap) {
-      var _a, _b, _c, _d, _f, _g, _h;
+      var _a, _b, _c, _d, _f, _g, _h, _j, _k;
       if (instMap.has(go.id)) return;
       const game = this.gameRef(go);
       const views = resolveViewsBySchema(game, go, c, def.views);
@@ -7709,19 +8818,30 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       if (def.name === 'List' || def.name === 'ScrollBox') {
         const childName = def.name === 'List' ? c.itemsChildName : c.contentChildName;
         c.__resolved_items = collectChildContainers(game, go, childName);
+        const expectedCount = getCollectedChildCount(go, childName);
+        if (expectedCount > 0 && c.__resolved_items.length < expectedCount && ((_a = c.__collect_retry) !== null && _a !== void 0 ? _a : 0) < 10) {
+          c.__collect_retry = ((_b = c.__collect_retry) !== null && _b !== void 0 ? _b : 0) + 1;
+          requestAnimationFrame(() => this.attachGeneric(def, c, go, instMap));
+          return;
+        }
       }
+      const restoreTransientSize = this.applyTransientTransformSize(c, go);
       const built = def.optionsBuilder(c, views !== null && views !== void 0 ? views : {});
       const inst = def.positional ? new def.pixiClass(...built) : new def.pixiClass(built);
-      (_a = def.postCreate) === null || _a === void 0 ? void 0 : _a.call(def, inst, c);
+      (_c = def.postCreate) === null || _c === void 0 ? void 0 : _c.call(def, inst, c);
+      if (this.transformSizeAuthorities.has(go.id) || !hasExplicitRenderSize(c)) {
+        const applied = applyTransformSizeToInstance(def, inst, c, go, 'initial-transform');
+        if (applied) this.transformSizeAuthorities.add(go.id);
+      }
       instMap.set(go.id, inst);
       attachToGameObject(game, go, inst);
       if (def.name === 'Dialog') {
-        const contentChild = findChildEntity(go, (_b = c.contentChildName) !== null && _b !== void 0 ? _b : 'content');
+        const contentChild = findChildEntity(go, (_d = c.contentChildName) !== null && _d !== void 0 ? _d : 'content');
         if (contentChild) {
           const cc = getEvaContainer(game, contentChild);
           if (cc) {
             try {
-              (_d = (_c = inst).addChild) === null || _d === void 0 ? void 0 : _d.call(_c, cc);
+              (_g = (_f = inst).addChild) === null || _g === void 0 ? void 0 : _g.call(_f, cc);
             } catch (_) {}
           }
         }
@@ -7730,7 +8850,7 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         const border = resolveViewRef(game, go, c.borderView);
         if (border) {
           try {
-            (_g = (_f = inst).addChild) === null || _g === void 0 ? void 0 : _g.call(_f, border);
+            (_j = (_h = inst).addChild) === null || _j === void 0 ? void 0 : _j.call(_h, border);
           } catch (_) {}
         }
       }
@@ -7741,7 +8861,8 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         }, def.signalMap(c));
         this.signalCleanups.set(go.id, offs);
       }
-      (_h = def.onAttachedExtra) === null || _h === void 0 ? void 0 : _h.call(def, inst, c, go, game);
+      (_k = def.onAttachedExtra) === null || _k === void 0 ? void 0 : _k.call(def, inst, c, go, game);
+      restoreTransientSize();
     }
     detachGeneric(id, instMap, go) {
       const inst = instMap.get(id);
@@ -7812,6 +8933,12 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
         elementsMargin: c.elementsMargin,
         selectedItem: initialIndex
       });
+      if (this.transformSizeAuthorities.has(go.id)) {
+        const size = readTransformRenderSize(go, {
+          allowZero: true
+        });
+        if (size) applyRuntimeSize(inst, size);
+      }
       this.radioGroupInstances.set(go.id, inst);
       attachToGameObject(game, go, inst);
       const offs = bridgeSignals(inst, {
@@ -7847,6 +8974,58 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       }
       return null;
     }
+    handleTransformSizeChanged(changed) {
+      var _a, _b;
+      if (changed.type !== eva_js.OBSERVER_TYPE.CHANGE) return;
+      const transform = changed.component;
+      const go = (_a = changed.gameObject) !== null && _a !== void 0 ? _a : transform === null || transform === void 0 ? void 0 : transform.gameObject;
+      if (!go) return;
+      let applied = false;
+      for (const [componentName, def] of Object.entries(COMPONENT_DEFINITIONS)) {
+        const inst = (_b = this.instances.get(componentName)) === null || _b === void 0 ? void 0 : _b.get(go.id);
+        if (!inst) continue;
+        const component = getComponentSafe(go, componentName);
+        if (applyTransformSizeToInstance(def, inst, component, go, 'transform-change')) {
+          applied = true;
+        }
+      }
+      const radioGroup = this.radioGroupInstances.get(go.id);
+      if (radioGroup) {
+        const size = readTransformRenderSize(go, {
+          allowZero: true
+        });
+        if (size) {
+          applyRuntimeSize(radioGroup, size);
+          applied = true;
+        }
+      }
+      if (applied) this.transformSizeAuthorities.add(go.id);
+      this.relayoutLayoutInstances();
+    }
+    relayoutLayoutInstances() {
+      for (const name of ['List', 'ScrollBox']) {
+        const instMap = this.instances.get(name);
+        if (!instMap) continue;
+        for (const inst of instMap.values()) {
+          relayoutRuntimeInstance(inst);
+        }
+      }
+    }
+    applyTransientTransformSize(c, go) {
+      if (hasExplicitRenderSize(c)) return () => {};
+      const size = readTransformRenderSize(go);
+      if (!size) return () => {};
+      const hadWidth = Object.prototype.hasOwnProperty.call(c, 'width');
+      const hadHeight = Object.prototype.hasOwnProperty.call(c, 'height');
+      const prevWidth = c.width;
+      const prevHeight = c.height;
+      if (size.width !== undefined) c.width = size.width;
+      if (size.height !== undefined) c.height = size.height;
+      return () => {
+        if (hadWidth) c.width = prevWidth;else delete c.width;
+        if (hadHeight) c.height = prevHeight;else delete c.height;
+      };
+    }
   };
   UISystem.systemName = 'UISystem';
   UISystem = __decorate([eva_js.decorators.componentObserver(buildObserverSchema())], UISystem);
@@ -7854,9 +9033,17 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
   function inlineResolveSpecialViews(name, c, game, go) {
     switch (name) {
       case 'ProgressBar':
-        c.__resolved_bg = resolveViewRef(game, go, c.bgView);
-        c.__resolved_fill = resolveViewRef(game, go, c.fillView);
-        break;
+        {
+          const fillView = c.nineSliceSprite ? c.fillView : normalizeProgressFillViewRef(c.fillView, c.fillPaddings, {
+            width: c.width,
+            height: c.height
+          });
+          c.__resolved_bg = resolveViewRef(game, go, c.bgView);
+          c.__resolved_fill = resolveViewRef(game, go, fillView);
+          c.__resolved_bg_view = c.nineSliceSprite && c.bgView && 'texture' in c.bgView ? c.bgView.texture : c.__resolved_bg;
+          c.__resolved_fill_view = c.nineSliceSprite && c.fillView && 'texture' in c.fillView ? c.fillView.texture : c.__resolved_fill;
+          break;
+        }
       case 'Select':
         c.__resolved_closedView = resolveViewRef(game, go, c.closedView);
         c.__resolved_openView = resolveViewRef(game, go, c.openView);
@@ -7864,23 +9051,26 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       case 'Dialog':
         c.__resolved_backdropView = resolveViewRef(game, go, c.backdropView);
         c.__resolved_backgroundView = resolveViewRef(game, go, c.backgroundView);
+        c.__resolved_background_view = c.nineSliceSprite && c.backgroundView && 'texture' in c.backgroundView ? c.backgroundView.texture : c.__resolved_backgroundView;
         break;
       case 'MaskedFrame':
         c.__resolved_targetView = resolveViewRef(game, go, c.targetView);
         c.__resolved_maskView = resolveViewRef(game, go, c.maskView);
+        c.__resolved_target_view = c.targetView && 'texture' in c.targetView ? c.targetView.texture : c.__resolved_targetView;
+        c.__resolved_mask_view = c.maskView && 'texture' in c.maskView ? c.maskView.texture : c.__resolved_maskView;
         break;
     }
   }
   function validateInlineResolved(name, c) {
     switch (name) {
       case 'ProgressBar':
-        return !!(c.__resolved_bg && c.__resolved_fill);
+        return !!(c.__resolved_bg_view && c.__resolved_fill_view);
       case 'Select':
         return !!(c.__resolved_closedView && c.__resolved_openView);
       case 'Dialog':
         return true;
       case 'MaskedFrame':
-        return !!(c.__resolved_targetView && c.__resolved_maskView);
+        return !!(c.__resolved_target_view && c.__resolved_mask_view);
       default:
         return true;
     }
@@ -7896,14 +9086,44 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
       if (!child) continue;
       const childContainer = getEvaContainer(game, child);
       if (childContainer) {
+        if (childContainer.width <= 0 || childContainer.height <= 0) continue;
         try {
           (_c = (_b = childContainer.parent) === null || _b === void 0 ? void 0 : _b.removeChild) === null || _c === void 0 ? void 0 : _c.call(_b, childContainer);
         } catch (_) {}
-        result.push(childContainer);
+        result.push(wrapLayoutItem(childContainer, child));
       }
     }
     return result;
   }
+  function wrapLayoutItem(childContainer, child) {
+    const wrapper = new pixi_js.Container();
+    const childName = child === null || child === void 0 ? void 0 : child.name;
+    wrapper.label = childName ? `${childName}:layout-item` : 'plugin-ui-layout-item';
+    wrapper.addChild(childContainer);
+    Object.defineProperty(wrapper, 'width', {
+      get: () => resolveLayoutItemSize(child, childContainer, 'width'),
+      set: () => {},
+      configurable: true
+    });
+    Object.defineProperty(wrapper, 'height', {
+      get: () => resolveLayoutItemSize(child, childContainer, 'height'),
+      set: () => {},
+      configurable: true
+    });
+    return wrapper;
+  }
+  function resolveLayoutItemSize(child, childContainer, key) {
+    var _a, _b;
+    const transformSize = Number((_b = (_a = child === null || child === void 0 ? void 0 : child.transform) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b[key]);
+    if (Number.isFinite(transformSize) && transformSize > 0) return transformSize;
+    const containerSize = Number(childContainer === null || childContainer === void 0 ? void 0 : childContainer[key]);
+    return Number.isFinite(containerSize) ? containerSize : 0;
+  }
+  function getCollectedChildCount(go, childName) {
+    var _a, _b, _c;
+    const contentChild = findChildEntity(go, childName);
+    return (_c = (_b = (_a = contentChild === null || contentChild === void 0 ? void 0 : contentChild.transform) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+  }
   function findChildEntity(go, name) {
     var _a, _b;
     if (!go) return null;
@@ -7919,6 +9139,14 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
     }
     return null;
   }
+  function getComponentSafe(go, componentName) {
+    var _a;
+    try {
+      return (_a = go === null || go === void 0 ? void 0 : go.getComponent) === null || _a === void 0 ? void 0 : _a.call(go, componentName);
+    } catch (_) {
+      return undefined;
+    }
+  }
   exports.Button = Button;
   exports.COMPONENT_DEFINITIONS = COMPONENT_DEFINITIONS;
   exports.CheckBox = CheckBox;
@@ -7935,9 +9163,11 @@ var _EVA_IIFE_ui = function (exports, eva_js, pluginRendererGraphics, pixi_js) {
   exports.RadioGroup = RadioGroup;
   exports.ScrollBox = ScrollBox;
   exports.Select = Select;
+  exports.Shape = Shape;
   exports.Slider = Slider;
   exports.Switcher = Switcher;
-  exports.UI = UI;
+  exports.UI = Shape;
+  exports.UIShapeType = UIShapeType;
   exports.UISystem = UISystem$1;
   exports.defineUiComponent = defineUiComponent;
   Object.defineProperty(exports, '__esModule', {