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

package/dist/plugin-ui.esm.js

@@ -1,28 +1,30 @@
 import { Component, System, OBSERVER_TYPE, decorators } from '@eva/eva.js';
 import { Graphics } from '@eva/plugin-renderer-graphics';
-import { FillGradient, Sprite, Graphics as Graphics$1, Texture, Container } from 'pixi.js';
-import { ButtonContainer, FancyButton as FancyButton$1, CheckBox as CheckBox$1, Switcher as Switcher$1, Slider as Slider$1, DoubleSlider as DoubleSlider$1, ProgressBar as ProgressBar$1, CircularProgressBar as CircularProgressBar$1, Input as Input$1, List as List$1, ScrollBox as ScrollBox$1, Select as Select$1, Dialog as Dialog$1, MaskedFrame as MaskedFrame$1, RadioGroup as RadioGroup$1 } from '@pixi/ui';
+import { FillGradient, Sprite, Graphics as Graphics$1, Container, Texture, HTMLText, BitmapText, Text, BitmapFontManager } from 'pixi.js';
+import { ButtonContainer, FancyButton as FancyButton$1, CheckBox as CheckBox$1, Switcher as Switcher$1, Slider as Slider$1, DoubleSlider as DoubleSlider$1, ProgressBar as ProgressBar$1, CircularProgressBar as CircularProgressBar$1, Input as Input$1, List as List$1, ScrollBox as ScrollBox$1, Select as Select$1, Dialog as Dialog$1, Button as Button$1, MaskedFrame as MaskedFrame$1, RadioGroup as RadioGroup$1 } from '@pixi/ui';
 
-/** UI 形状类型枚举 */
-var UIShapeType;
-(function (UIShapeType) {
-    UIShapeType["RECT"] = "rect";
-    UIShapeType["CIRCLE"] = "circle";
-    UIShapeType["ELLIPSE"] = "ellipse";
-    UIShapeType["ROUNDED_RECT"] = "roundedRect";
-})(UIShapeType || (UIShapeType = {}));
+/** Shape primitive type enum */
+var ShapeType;
+(function (ShapeType) {
+    ShapeType["RECT"] = "rect";
+    ShapeType["CIRCLE"] = "circle";
+    ShapeType["ELLIPSE"] = "ellipse";
+    ShapeType["ROUNDED_RECT"] = "roundedRect";
+})(ShapeType || (ShapeType = {}));
+/** Backward-compatible enum value alias for existing TypeScript consumers. */
+const UIShapeType = ShapeType;
 /**
- * UI 组件
+ * Shape 组件
  *
  * 基于 `@eva/plugin-renderer-graphics` 实现 rect/circle/ellipse/roundedRect 的
  * 矢量绘制,支持纯色 / linear-gradient 填充与描边。`shapes` 数组允许在同一个
  * GameObject 上层叠多个形状。
  */
-class UI extends Component {
+class Shape extends Component {
     constructor() {
         super(...arguments);
         /** 实例侧 componentName,DSL 序列化时使用 */
-        this.componentName = 'UI';
+        this.componentName = 'Shape';
         this.shapes = [];
     }
     /** 编辑器 Inspector 元数据,主仓 ComponentInspector 通过静态方法读取 */
@@ -39,7 +41,7 @@ class UI extends Component {
             { name: 'radius', type: 'number', isArray: false },
         ];
         return {
-            name: UI.componentName,
+            name: Shape.componentName,
             type: 'object',
             isArray: false,
             isFolder: true,
@@ -172,12 +174,12 @@ class UI extends Component {
         const x = style.x || 0;
         const y = style.y || 0;
         switch (type) {
-            case UIShapeType.RECT:
-            case UIShapeType.ROUNDED_RECT:
+            case ShapeType.RECT:
+            case ShapeType.ROUNDED_RECT:
                 return { width: style.width, height: style.height, x, y };
-            case UIShapeType.CIRCLE:
+            case ShapeType.CIRCLE:
                 return { width: style.radius * 2, height: style.radius * 2, x, y };
-            case UIShapeType.ELLIPSE:
+            case ShapeType.ELLIPSE:
                 return { width: style.width, height: style.height, x, y };
             default:
                 return { width: 100, height: 100, x, y };
@@ -203,32 +205,27 @@ class UI extends Component {
     }
     /** 绘制单个形状 */
     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 UIShapeType.RECT:
+            case ShapeType.RECT:
                 this.drawRect(graphics, style);
                 break;
-            case UIShapeType.CIRCLE:
+            case ShapeType.CIRCLE:
                 this.drawCircle(graphics, style);
                 break;
-            case UIShapeType.ELLIPSE:
+            case ShapeType.ELLIPSE:
                 this.drawEllipse(graphics, style);
                 break;
-            case UIShapeType.ROUNDED_RECT:
+            case 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) {
@@ -245,6 +242,12 @@ class UI extends Component {
                 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;
@@ -326,7 +329,7 @@ class UI extends Component {
     }
 }
 /** 组件名称 */
-UI.componentName = 'UI';
+Shape.componentName = 'Shape';
 
 /**
  * Eva GameObject -> PIXI.Container resolver.
@@ -450,7 +453,7 @@ function whenContainerReady(game, go, fn, attempts = 4) {
  * @returns     PIXI 显示对象,失败返回 null
  */
 function resolveViewRef(game, go, ref) {
-    var _a;
+    var _a, _b;
     if (!ref)
         return null;
     if ('entityName' in ref) {
@@ -465,15 +468,18 @@ function resolveViewRef(game, go, ref) {
                     }
                 }
                 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);
@@ -502,9 +508,46 @@ function resolveViewRef(game, go, ref) {
     }
     return null;
 }
+/**
+ * @pixi/ui ProgressBar 的非 nine-slice fillPaddings 只移动 fill.x/y,
+ * 不会自动把 fill view 缩成内层尺寸。DSL 常用的 inline color/shape
+ * 需要先扣除 padding,否则 fill 会向下或向右溢出,造成上下层偏差。
+ */
+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 Object.assign(Object.assign(Object.assign({}, ref), { width,
+            height, radius: shrinkRadius(ref.radius, width, height) }), (fallback ? { fallback } : {}));
+    }
+    if ('shape' in ref) {
+        return Object.assign(Object.assign(Object.assign({}, ref), { shape: shrinkInlineShape(ref.shape, paddings, fallbackSize) }), (fallback ? { fallback } : {}));
+    }
+    if ('ui' in ref) {
+        return Object.assign(Object.assign(Object.assign({}, ref), { ui: shrinkInlineShape(ref.ui, paddings, fallbackSize) }), (fallback ? { fallback } : {}));
+    }
+    if (fallback)
+        return Object.assign(Object.assign({}, ref), { fallback });
+    return ref;
+}
+function wrapBorrowedEntityView(childContainer, childName) {
+    const wrapper = new Container();
+    wrapper.label = childName ? `${childName}:view-ref` : 'plugin-ui-view-ref';
+    wrapper.addChild(childContainer);
+    return wrapper;
+}
 /** 把 ViewRef 解析为已存在的 Texture(用于 ProgressBar/Slider/Input 的 nineSlice 路径) */
 function resolveTexture(game, key) {
-    var _a, _b;
+    var _a, _b, _c;
     // 1) Eva resource pool
     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]) {
@@ -516,45 +559,129 @@ function resolveTexture(game, key) {
     }
     // 2) global asset cache (Texture.from)
     try {
-        return Texture.from(key);
+        return (_c = 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 Graphics$1();
     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({ color: style.stroke, width: style.lineWidth });
-        g.stroke();
+        g.stroke({ color: style.stroke, width: style.lineWidth });
+    }
+    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 Graphics$1(); },
+            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 Object.assign(Object.assign({}, shape), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (radius !== undefined ? { radius } : {})) });
+}
 /**
  * 在 GameObject 的 transform.children 中查找指定名字的子 entity。
  * 不递归 — plugin-ui 的视觉子项语义只允许直接子节点。
@@ -605,12 +732,20 @@ class PixiUiComponent extends Component {
         /** runtime 计数,供 spec / debug 验证(toggleCount / pressCount / hoverCount / ...)*/
         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';
         /** Input 私有 focused */
         this.focused = false;
+        /** DSL/constructor 中显式传入过的字段,用于区分 metadata default 与用户配置。 */
+        this.__evaExplicitFields = new Set();
     }
     init(p) {
         if (p)
@@ -630,6 +765,7 @@ class PixiUiComponent extends Component {
             const v = p[name];
             if (v === undefined)
                 continue;
+            this.__evaExplicitFields.add(name);
             switch (spec.kind) {
                 case 'scalar':
                     this[name] = v;
@@ -750,6 +886,114 @@ function resolveViewsBySchema(game, go, component, schema) {
     }
 }
 
+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;
+}
+
 /**
  * @pixi/ui v2.x 包装层 — 14 个 ECS Component 由 metadata 驱动生成。
  *
@@ -797,8 +1041,42 @@ const BUTTON_DEF = {
     optionsBuilder: (_c, v) => [v.single],
     postCreate: (inst, c) => { inst.enabled = c.enabled; },
     signalMap: (c) => ({
-        press: () => { c.pressCount += 1; return {}; },
-        down: true, up: true, hover: true,
+        press: () => {
+            c.pressCount += 1;
+            c.lastSignal = 'press';
+            c.visualState = 'default';
+            return { pressCount: c.pressCount, lastSignal: c.lastSignal, visualState: c.visualState };
+        },
+        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; },
 };
@@ -816,10 +1094,28 @@ const FANCY_BUTTON_DEF = {
         views: { kind: 'shallowMerge', default: {}, inspector: { name: 'views', type: 'object', isFolder: true, children: [
                     { name: 'default', type: 'object' }, { name: 'hover', type: 'object' },
                     { name: 'pressed', type: 'object' }, { name: 'disabled', type: 'object' },
+                    { name: 'icon', type: 'object' },
                 ] } },
         offset: { kind: 'shallowMerge', default: {} },
         textOffset: { 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: {
         kind: 'object', folder: 'views',
@@ -828,28 +1124,43 @@ const FANCY_BUTTON_DEF = {
             { name: 'hover', required: false },
             { name: 'pressed', required: false },
             { name: 'disabled', required: false },
+            { name: 'icon', required: false },
         ],
     },
     optionsBuilder: (c, v) => {
-        var _a, _b, _d, _e;
+        var _a, _b, _d, _e, _f;
         // FancyButton 内部 updateView 不接受 null;只把已 resolve 的 view 字段传过去
         const opts = {
-            text: c.text, padding: c.padding,
-            offset: c.offset, textOffset: c.textOffset,
+            text: makeFancyButtonText(c), padding: c.padding,
+            offset: c.offset, textOffset: c.textOffset, 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;
+            opts.defaultView = getFancyButtonView(c, 'default', v.object.default);
         if ((_b = v.object) === null || _b === void 0 ? void 0 : _b.hover)
-            opts.hoverView = v.object.hover;
+            opts.hoverView = getFancyButtonView(c, 'hover', v.object.hover);
         if ((_d = v.object) === null || _d === void 0 ? void 0 : _d.pressed)
-            opts.pressedView = v.object.pressed;
+            opts.pressedView = getFancyButtonView(c, 'pressed', v.object.pressed);
         if ((_e = v.object) === null || _e === void 0 ? void 0 : _e.disabled)
-            opts.disabledView = v.object.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);
     },
@@ -864,9 +1175,84 @@ const FANCY_BUTTON_DEF = {
             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 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 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 Text({ text, style: c.textStyle });
+    }
+    return c.text;
+}
+const installedBitmapFonts = new Set();
+function ensureBitmapFont(name, style) {
+    if (installedBitmapFonts.has(name))
+        return;
+    try {
+        BitmapFontManager.install({ name, style: (style !== null && style !== void 0 ? style : {}) });
+    }
+    catch (_) {
+        // Reinstalling an existing font can throw in Pixi; rendering can still use the current font.
+    }
+    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;
@@ -875,6 +1261,22 @@ function applySelectedTint(inst, c) {
     }
     catch (_) { }
 }
+function syncCheckBoxTextStyle(inst, c) {
+    var _a, _b, _d;
+    const style = inst.style;
+    if (!style || (!c.textStyle && !c.textOffset))
+        return;
+    const nextStyle = Object.assign(Object.assign({}, style), { text: (_a = c.textStyle) !== null && _a !== void 0 ? _a : style.text, textOffset: (_b = c.textOffset) !== null && _b !== void 0 ? _b : style.textOffset });
+    // @pixi/ui CheckBox.style rebuilds checked/unchecked views. If RadioGroup is
+    // listening, that rebuild can emit onChange while only one view exists.
+    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',
@@ -887,6 +1289,8 @@ const CHECKBOX_DEF = {
         views: { kind: 'shallowMerge', default: {}, inspector: { name: 'views', type: 'object', isFolder: true, children: [
                     { name: 'checked', type: 'object' }, { name: 'unchecked', type: 'object' },
                 ] } },
+        textStyle: { kind: 'shallowMerge', default: { fill: 0xffffff } },
+        textOffset: { kind: 'shallowMerge', default: {} },
         disabledStyle: { kind: 'shallowMerge', default: { alpha: 0.4, scale: 1 } },
     },
     views: {
@@ -897,7 +1301,7 @@ const CHECKBOX_DEF = {
         ],
     },
     optionsBuilder: (c, v) => ({
-        style: { checked: v.object.checked, unchecked: v.object.unchecked },
+        style: { checked: v.object.checked, unchecked: v.object.unchecked, text: c.textStyle, textOffset: c.textOffset },
         text: c.text, checked: c.checked,
     }),
     signalMap: (c) => ({
@@ -906,6 +1310,9 @@ const CHECKBOX_DEF = {
     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 = {
@@ -932,6 +1339,8 @@ const SWITCHER_DEF = {
     syncOnChange: (inst, c) => {
         if (inst.active !== c.active)
             inst.active = c.active;
+        if (c.triggerEvent !== undefined)
+            inst.triggerEvents = c.triggerEvent;
     },
 };
 const SLIDER_DEF = {
@@ -947,6 +1356,12 @@ const SLIDER_DEF = {
         orientation: { kind: 'scalar', default: 'horizontal', inspector: { name: 'orientation', type: 'string' } },
         showValue: { kind: 'scalar', default: false, inspector: { name: 'showValue', type: 'boolean' } },
         views: { 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: {
@@ -958,12 +1373,20 @@ const SLIDER_DEF = {
         ],
     },
     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,
+            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; c.updateCount += 1; return { value: vv }; },
         change: (vv) => { c.value = vv; c.changeCount += 1; return { value: vv }; },
@@ -971,37 +1394,9 @@ const SLIDER_DEF = {
     syncOnChange: (inst, c) => {
         if (inst.value !== c.value)
             inst.value = c.value;
+        applyOptionalSize(inst, c);
     },
 };
-/**
- * @pixi/ui Slider 的 update 逻辑:
- *   slider.x = (bg.width/100 * progress) - (slider.width / 2)   // x 已居中
- *   slider.y = bg.height / 2                                    // y 未居中(bug)
- *
- * 因 y 维度 @pixi/ui 假设 thumb anchor / pivot 在中心(对 Sprite 自动 anchor.set(0.5),
- * 但 Graphics 没 anchor),Graphics 渲染时左上角对齐 bg 中线,thumb 中心落到中线下方。
- *
- * 修法:只设 pivot.y = h/2 让 thumb 沿 y 居中。pivot.x 保持 0(x 在 update
- * 里已用 -width/2 居中过,再设 pivot.x 会双倍偏移)。
- */
-function centerThumbPivot(thumb) {
-    var _a, _b, _d, _e;
-    if (!thumb)
-        return;
-    if (thumb.anchor)
-        return; // Sprite — @pixi/ui 自己 anchor.set(0.5)
-    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',
@@ -1015,6 +1410,12 @@ const DOUBLE_SLIDER_DEF = {
         step: { kind: 'scalar', default: 1 },
         showValue: { kind: 'scalar', default: false, inspector: { name: 'showValue', type: 'boolean' } },
         views: { 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' },
         bindToStore2: { kind: 'scalar' },
     },
@@ -1026,14 +1427,22 @@ const DOUBLE_SLIDER_DEF = {
         ],
     },
     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,
-            min: c.min, max: c.max, value1: c.value1, value2: c.value2, showValue: c.showValue,
+            bg, fill,
+            slider1, slider2,
+            min: c.min, max: c.max, step: c.step, value1: c.value1, value2: c.value2, 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; c.value2 = v2; c.updateCount += 1; return { value1: v1, value2: v2 }; },
         change: (v1, v2) => { c.value1 = v1; c.value2 = v2; c.changeCount += 1; return { value1: v1, value2: v2 }; },
@@ -1043,6 +1452,7 @@ const DOUBLE_SLIDER_DEF = {
             inst.value1 = c.value1;
         if (inst.value2 !== c.value2)
             inst.value2 = c.value2;
+        applyOptionalSize(inst, c);
     },
 };
 const PROGRESS_BAR_DEF = {
@@ -1056,6 +1466,8 @@ const PROGRESS_BAR_DEF = {
         fillView: { kind: 'opaque' },
         nineSliceSprite: { kind: 'opaque' },
         fillPaddings: { kind: 'shallowMerge', default: {} },
+        width: { kind: 'scalar', inspector: { name: 'width', type: 'number' } },
+        height: { kind: 'scalar', inspector: { name: 'height', type: 'number' } },
         bindToStore: BIND_STORE,
     },
     views: {
@@ -1066,17 +1478,54 @@ const PROGRESS_BAR_DEF = {
     // 这里用 inline resolution(在 system.ts handleGeneric 里有 fast path 处理 views=undefined 的情形,
     // optionsBuilder 接受 raw component 自己 resolve)
     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)
@@ -1098,21 +1547,36 @@ const CIRCULAR_PROGRESS_BAR_DEF = {
         fillColor: { kind: 'scalar', default: '#22c55e', inspector: { name: 'fillColor', type: 'color' } },
         backgroundAlpha: { kind: 'scalar', default: 1, inspector: { name: 'backgroundAlpha', type: 'number', step: 0.05 } },
         fillAlpha: { kind: 'scalar', default: 1, inspector: { name: 'fillAlpha', type: 'number', 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) => ({
         radius: c.radius, lineWidth: c.lineWidth,
         backgroundColor: c.backgroundColor, 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',
@@ -1130,15 +1594,18 @@ const INPUT_DEF = {
         nineSliceSprite: { kind: 'opaque' },
         cleanOnFocus: { kind: 'scalar', default: false, inspector: { name: 'cleanOnFocus', type: 'boolean' } },
         addMask: { kind: 'scalar', default: false, inspector: { name: 'addMask', type: 'boolean' } },
+        width: { kind: 'scalar', inspector: { name: 'width', type: 'number' } },
+        height: { kind: 'scalar', inspector: { name: 'height', type: 'number' } },
         bindToStore: BIND_STORE,
     },
     views: { kind: 'single', key: 'bgView', required: true },
     optionsBuilder: (c, v) => ({
-        bg: v.single, textStyle: c.textStyle,
+        bg: getProgressView(c.bgView, v.single, c.nineSliceSprite), textStyle: c.textStyle,
         placeholder: c.placeholder, value: c.value, maxLength: c.maxLength, secure: c.secure,
         align: c.align, padding: c.padding,
         cleanOnFocus: c.cleanOnFocus, nineSliceSprite: c.nineSliceSprite, addMask: c.addMask,
     }),
+    postCreate: (inst, c) => { inst.enabled = c.enabled; applyOptionalSize(inst, c); },
     signalMap: (c) => ({
         change: (text) => { c.value = text; c.changeCount += 1; return { value: text }; },
         enter: (text) => ({ value: text }),
@@ -1146,6 +1613,9 @@ const INPUT_DEF = {
     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 = {
@@ -1167,18 +1637,25 @@ const LIST_DEF = {
         itemsChildName: { kind: 'scalar', default: 'items' },
     },
     // List 不走 ViewSchema,view 是 collectChildContainers 副作用,system.ts 处理
-    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)
@@ -1188,6 +1665,7 @@ const LIST_DEF = {
         if (typeof inst.arrangeChildren === 'function')
             inst.arrangeChildren();
     },
+    applySize: applyListLayoutSize,
 };
 const SCROLL_BOX_DEF = {
     name: 'ScrollBox',
@@ -1198,12 +1676,22 @@ const SCROLL_BOX_DEF = {
         height: { kind: 'scalar', default: 240, inspector: { name: 'height', type: 'number' } },
         direction: { kind: 'scalar', default: 'vertical', inspector: { name: 'direction', type: 'string' } },
         contentChildName: { kind: 'scalar', default: 'content' },
-        background: { kind: 'scalar', default: 0x111111, inspector: { name: 'background', type: 'color' } },
+        background: { kind: 'scalar', inspector: { name: 'background', type: 'color' } },
         radius: { kind: 'scalar', default: 0, inspector: { name: 'radius', type: 'number' } },
         elementsMargin: { kind: 'scalar', default: 0 },
         disableDynamicRendering: { kind: 'scalar', default: false },
         disableEasing: { kind: 'scalar', default: false, inspector: { name: 'disableEasing', type: 'boolean' } },
         padding: { 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' },
         // legacy fields(spec 兼容)
         inertia: { kind: 'scalar', default: true },
         inertiaDecay: { kind: 'scalar', default: 0.92 },
@@ -1215,7 +1703,7 @@ const SCROLL_BOX_DEF = {
         getBounds() { return { minX: 0, maxX: 0, minY: 0, maxY: 0 }; },
     },
     optionsBuilder: (c, _v) => {
-        var _a, _b;
+        var _a;
         const typeMap = {
             horizontal: 'horizontal', vertical: 'vertical', both: 'bidirectional',
         };
@@ -1224,21 +1712,37 @@ const SCROLL_BOX_DEF = {
             type: (_a = typeMap[c.direction]) !== null && _a !== void 0 ? _a : 'vertical',
             background: c.background, 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: () => ({
         scroll: (v) => ({ 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 = {
     name: 'Select',
@@ -1252,26 +1756,51 @@ const SELECT_DEF = {
         openView: { kind: 'opaque' },
         textStyle: { kind: 'shallowMerge', default: { fontFamily: 'Arial', fontSize: 14, fill: '#222' } },
         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: {
         kind: 'object', folder: '__select_views__', 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' ? 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, textStyle: c.textStyle, radius: 4,
+                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,
+                TextClass: c.textClass === 'html' ? HTMLText : undefined,
+                radius: c.radius,
             },
             selected: c.selectedIndex >= 0 ? c.selectedIndex : undefined,
+            visibleItems: c.visibleItems,
+            scrollBox: Object.assign({ 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;
@@ -1279,6 +1808,12 @@ const SELECT_DEF = {
             return { index: value, 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',
@@ -1297,36 +1832,340 @@ const DIALOG_DEF = {
         closeOnBackdropClick: { kind: 'scalar', default: true, inspector: { name: 'closeOnBackdropClick', type: 'boolean' } },
         contentChildName: { kind: 'scalar', default: 'content', inspector: { name: 'contentChildName', type: 'string' } },
         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;
-        return ({
+        const background = c.nineSliceSprite && c.backgroundView && 'texture' in c.backgroundView
+            ? c.backgroundView.texture
+            : ((_a = c.__resolved_background_view) !== null && _a !== void 0 ? _a : new Container());
+        return {
             backdrop: c.__resolved_backdropView,
             backdropColor: backdropColorToNumber(c.backdropColor),
             backdropAlpha: c.backdropAlpha,
-            background: (_a = c.__resolved_backgroundView) !== null && _a !== void 0 ? _a : new 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,
-        });
+            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; return {}; },
         select: (idx, text) => ({ index: idx, text }),
     }),
     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, Object.assign(Object.assign({}, 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 = Object.assign(Object.assign({}, 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 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 = Object.assign({ 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 Graphics$1()
+        .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 Graphics$1()
+                .roundRect(0, 0, size, size, radius)
+                .fill(((_f = checkBox.uncheckedColor) !== null && _f !== void 0 ? _f : '#3e3f40'))
+                .stroke({ color: strokeColor, width: strokeWidth }),
+            checked: new Graphics$1()
+                .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',
@@ -1335,12 +2174,14 @@ const MASKED_FRAME_DEF = {
         targetView: { kind: 'opaque' },
         maskView: { kind: 'opaque' },
         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,
     }),
 };
 // ============================================================
@@ -1390,6 +2231,12 @@ class RadioGroup extends Component {
     constructor() {
         super(...arguments);
         this.componentName = 'RadioGroup';
+        // 显式 `= undefined`:被 UISystem 的 `@componentObserver({ RadioGroup: ['selectedId', ...] })`
+        // 观察;applyParams 里 `if (typeof p.selectedId === 'string')` 是条件赋值,
+        // 默认 RadioGroup 无选中时 own property 不存在,observer.ts:236 会打
+        // "prop selectedId not in component: RadioGroup, Can not observer" 并跳过
+        // 响应式挂载,后续 `radioGroup.selectedId = 'xxx'` 也不会经 UISystem 同步子 CheckBox。
+        this.selectedId = undefined;
         this.direction = 'vertical';
         this.elementsMargin = 4;
         /** runtime: 已绑定的子 CheckBox(System 填充) */
@@ -1537,13 +2384,16 @@ function safeProject(projector, args) {
 /**
  * UISystem - generic handler driven by COMPONENT_DEFINITIONS metadata.
  *
- * 16 个 ECS 组件(UI 自渲染 + 14 个 @pixi/ui factory wrapper + RadioGroup 独立)由本 system 统一驱动。
+ * 16 个 ECS 组件(Shape 自渲染 + 14 个 @pixi/ui factory wrapper + RadioGroup 独立)由本 system 统一驱动。
  * 不再为每个组件写独立 handler 方法 - 14 个 @pixi/ui 组件走 handleGeneric,RadioGroup 单独处理。
  */
 // observer schema:把 COMPONENT_DEFINITIONS.fields 转成 componentObserver decorator 参数
 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 },
             { prop: ['direction'], deep: false },
@@ -1560,6 +2410,9 @@ function buildObserverSchema() {
     }
     return out;
 }
+function isShapeComponentName(name) {
+    return name === 'Shape' || name === 'UI' || name === 'UIComponent';
+}
 let UISystem = class UISystem extends System {
     constructor() {
         super(...arguments);
@@ -1567,6 +2420,7 @@ let UISystem = class UISystem extends System {
         /** componentName -> instance map(generic 共享一份) */
         this.instances = new Map();
         this.signalCleanups = new Map();
+        this.transformSizeAuthorities = new Set();
         this.radioGroupInstances = new Map();
     }
     /** 给 RadioGroup 反查 PixiCheckBox 实例用 */
@@ -1590,8 +2444,10 @@ let UISystem = class UISystem extends System {
     }
     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];
@@ -1599,13 +2455,13 @@ let UISystem = class UISystem extends System {
             return this.handleGeneric(def, changed);
     }
     // ============================================================
-    // UI(自渲染,无 @pixi/ui 实例)
+    // Shape(自渲染,无 @pixi/ui 实例)
     // ============================================================
-    handleUI(changed) {
+    handleShape(changed) {
         if (changed.type === OBSERVER_TYPE.ADD || changed.type === 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();
         }
     }
     // ============================================================
@@ -1629,13 +2485,16 @@ let UISystem = class UISystem extends System {
                 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 === 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);
@@ -1652,25 +2511,39 @@ let UISystem = class UISystem extends System {
         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;
+            }
         }
         // 4) 构造 PIXI 实例
+        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);
         // 5) postCreate(enabled / selected tint 等)
-        (_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);
+        // 5.5) 新 DSL 以 Transform.size 作为 plugin-ui 渲染尺寸来源。
+        // 历史 DSL 若显式写了组件 width/height,初次 attach 保持旧行为;之后 Transform.size change 会接管。
+        if (this.transformSizeAuthorities.has(go.id) || !hasExplicitRenderSize(c)) {
+            const applied = applyTransformSizeToInstance(def, inst, c, go, 'initial-transform');
+            if (applied)
+                this.transformSizeAuthorities.add(go.id);
+        }
         // 6) 注册 + attach
         instMap.set(go.id, inst);
         attachToGameObject(game, go, inst);
         // 7) onAttachedExtra(Dialog 挂 contentChild)
         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 (_) { }
                 }
@@ -1681,7 +2554,7 @@ let UISystem = class UISystem extends System {
             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 (_) { }
             }
@@ -1691,7 +2564,8 @@ let UISystem = class UISystem extends System {
             const offs = bridgeSignals(inst, { go, prefix: def.signalPrefix }, 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);
@@ -1768,6 +2642,11 @@ let UISystem = class UISystem extends System {
             items, type: (_f = typeMap[c.direction]) !== null && _f !== void 0 ? _f : 'vertical',
             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, { go, prefix: 'radiogroup' }, {
@@ -1803,6 +2682,74 @@ let UISystem = class UISystem extends System {
         }
         return null;
     }
+    // ============================================================
+    // Transform.size -> plugin-ui runtime size
+    // ============================================================
+    handleTransformSizeChanged(changed) {
+        var _a, _b;
+        if (changed.type !== 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([
@@ -1823,10 +2770,16 @@ var UISystem$1 = UISystem;
  */
 function inlineResolveSpecialViews(name, c, game, go) {
     switch (name) {
-        case 'ProgressBar':
+        case 'ProgressBar': {
+            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, c.fillView);
+            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);
@@ -1834,10 +2787,15 @@ function inlineResolveSpecialViews(name, c, game, go) {
         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;
     }
 }
@@ -1845,14 +2803,14 @@ function inlineResolveSpecialViews(name, c, game, go) {
 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':
             // backgroundView 可 fallback PixiContainer,backdropView 也可 null
             return true;
         case 'MaskedFrame':
-            return !!(c.__resolved_targetView && c.__resolved_maskView);
+            return !!(c.__resolved_target_view && c.__resolved_mask_view);
         default:
             return true;
     }
@@ -1870,15 +2828,47 @@ function collectChildContainers(game, go, childName) {
             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 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)
@@ -1897,6 +2887,15 @@ function findChildEntity(go, name) {
             return tf.gameObject;
     }
     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;
+    }
 }
 
-export { Button, COMPONENT_DEFINITIONS, CheckBox, CircularProgressBar, Dialog, DoubleSlider, FancyButton, Input, List, MaskedFrame, PixiUiComponent, UISystem$1 as PluginUiSystem, ProgressBar, RadioGroup, ScrollBox, Select, Slider, Switcher, UI, UIShapeType, UISystem$1 as UISystem, defineUiComponent };
+export { Button, COMPONENT_DEFINITIONS, CheckBox, CircularProgressBar, Dialog, DoubleSlider, FancyButton, Input, List, MaskedFrame, PixiUiComponent, UISystem$1 as PluginUiSystem, ProgressBar, RadioGroup, ScrollBox, Select, Shape, ShapeType, Slider, Switcher, Shape as UI, UIShapeType, UISystem$1 as UISystem, defineUiComponent };