pixifact 0.1.5 → 0.2.1

package/README.md

@@ -1,44 +1,44 @@
 # Pixifact
 
-Pixifact is a Bun-first framework for AI-editable 2D game UI, HUDs, menus, and lightweight scenes on top of PixiJS v8.
+Pixifact 是基于 PixiJS v8 的 Scene / UI / 轻场景语义层，面向 AI 可直接编辑的 `.scene` 工作流。
 
-Use `pixifact` for project config helpers, the `Group` runtime node, compiler APIs, and generated Scene runtime support.
+`pixifact` 包提供项目配置解析、runtime 节点、compiler API 和生成 Scene 的运行时支持。CLI 和项目脚手架分别由 `pixifact-cli`、`create-pixifact` 提供。
 
-## Install
+## 安装
 
 ```bash
 bun add pixifact pixi.js
 ```
 
-## Usage
+## 使用
 
 ```ts
 import { parseSceneTemplate } from 'pixifact/compiler';
 import { Group } from 'pixifact/runtime';
 ```
 
-Compiler Scene projects usually also install the CLI:
+Compiler Scene 项目通常还会安装 CLI：
 
 ```bash
 bun add -d pixifact-cli
 ```
 
-Then validate and compile `.scene` files:
+然后校验和编译 `.scene` 文件：
 
 ```bash
-pixifact scene validate --project-root . --all
-pixifact compile-scenes --project-root .
+pixifact scene validate --all
+pixifact compile-scenes
 ```
 
-## Scene Workflow
+## Scene 工作流
 
-Pixifact treats project-relative `.scene` files as the source of truth. External agents edit `.scene` source directly, then run validation and compilation.
+Pixifact 把项目相对 `.scene` 文件作为 source of truth。外部 Agent 直接编辑 `.scene` 源文件，然后运行校验和编译。
 
-Generated files such as `.pixifact/generated/**` are build artifacts and should not be edited by hand.
+`.pixifact/generated/**` 等生成文件是构建产物，不要手写修改。
 
-## Requirements
+## 环境要求
 
 - Bun
 - PixiJS v8
 
-The desktop editor is distributed separately from the npm runtime package.
+桌面编辑器不包含在 npm runtime 包中。

package/dist/compiler/builtinScenes.d.ts

@@ -1,12 +1,12 @@
 import type { SceneTemplateInterface } from './spec.js';
 export declare const builtinScenePrefix = "pixifact:";
-export declare const builtinSceneNames: readonly ["CenterContainer", "Control", "FlexItem", "FlexLayout", "HBoxContainer", "MarginContainer", "VBoxContainer"];
+export declare const builtinSceneNames: readonly [];
 export type BuiltinSceneName = typeof builtinSceneNames[number];
 export type BuiltinSceneScriptSources = Record<BuiltinSceneName, string>;
 export declare function isBuiltinSceneName(value: string): value is BuiltinSceneName;
 export declare function builtinSceneAssetId(name: string): string;
 export declare function isBuiltinSceneAssetId(value: string): boolean;
-export declare function builtinSceneNameFromAssetId(assetId: string): "CenterContainer" | "Control" | "FlexItem" | "FlexLayout" | "HBoxContainer" | "MarginContainer" | "VBoxContainer";
+export declare function builtinSceneNameFromAssetId(assetId: string): never;
 export declare function builtinSceneAssetIds(): string[];
 export declare function builtinSceneInterface(assetId: string, scriptSources: BuiltinSceneScriptSources): SceneTemplateInterface;
 export declare function builtinSceneInterfaces(scriptSources: BuiltinSceneScriptSources): {

package/dist/compiler/builtinScenes.js

@@ -1,14 +1,6 @@
 import { extractSceneScriptInterfaces } from './scriptInterfaceExtractor.js';
 export const builtinScenePrefix = 'pixifact:';
-export const builtinSceneNames = [
-    'CenterContainer',
-    'Control',
-    'FlexItem',
-    'FlexLayout',
-    'HBoxContainer',
-    'MarginContainer',
-    'VBoxContainer',
-];
+export const builtinSceneNames = [];
 const builtinSceneNameSet = new Set(builtinSceneNames);
 export function isBuiltinSceneName(value) {
     return builtinSceneNameSet.has(value);

package/dist/compiler/compileScenes.js

@@ -8,6 +8,7 @@ import { extractSceneScriptInterfaces } from './scriptInterfaceExtractor.js';
 import { findMissingScenePartReferences } from './scenePartValidation.js';
 import { parseSceneTemplate } from './templateParser.js';
 import { compileSceneTemplateToTs } from './typescriptCompiler.js';
+import { parsePixifactProjectConfig, pixifactProjectConfigFileName, } from '../project/index.js';
 export class CompileSceneError extends Error {
     scene;
     source;
@@ -23,6 +24,7 @@ export async function compileScenes(options) {
         ? options.projectRoot
         : fileURLToPath(options.projectRoot);
     const generatedDir = path.resolve(projectRoot, options.generatedDir ?? '.pixifact/generated');
+    const projectConfig = await readProjectConfig(projectRoot);
     const projectScenePaths = await collectSceneAssetIds(projectRoot, options.sourceRoots);
     const sceneRecords = [
         ...projectScenePaths.map((scenePath) => ({ scenePath, kind: 'project' })),
@@ -74,6 +76,7 @@ export async function compileScenes(options) {
         const generatedFileDir = path.dirname(generatedFile);
         const code = compileSceneTemplateToTs(template, {
             registrationPath: scenePath,
+            defaultRootSize: rootDefaultSizeForScene(projectConfig, scenePath),
             scriptImport: {
                 exportName: template.name,
                 localName: sceneClassAlias(scenePath),
@@ -98,6 +101,19 @@ export async function compileScenes(options) {
         ...projectRegistryImports,
     ].join('\n')}\n`);
 }
+async function readProjectConfig(projectRoot) {
+    const configPath = path.join(projectRoot, pixifactProjectConfigFileName);
+    if (!await exists(configPath)) {
+        return undefined;
+    }
+    return parsePixifactProjectConfig(JSON.parse(await readFile(configPath, 'utf8')));
+}
+function rootDefaultSizeForScene(config, scenePath) {
+    if (!config || !Object.values(config.scenes).includes(scenePath)) {
+        return undefined;
+    }
+    return config.resolution;
+}
 function sceneIsReferencedByProjectScenes(scenePath, projectScenePaths, templates) {
     if (!isBuiltinSceneAssetId(scenePath)) {
         return false;

package/dist/compiler/pixiNodeSchema.d.ts

@@ -1,7 +1,7 @@
 import type { SceneTemplatePrimitiveType, SceneTemplateValue } from './spec.js';
-export type PixiSceneNodeType = Extract<SceneTemplatePrimitiveType, 'Container' | 'Sprite' | 'NineSliceSprite' | 'TilingSprite' | 'Text' | 'BitmapText' | 'HTMLText' | 'Graphics'>;
+export type PixiSceneNodeType = Extract<SceneTemplatePrimitiveType, 'Container' | 'Sprite' | 'NineSliceSprite' | 'TilingSprite' | 'Text' | 'BitmapText' | 'HTMLText' | 'Graphics' | 'Rect' | 'Image' | 'NineImage' | 'TileImage' | 'GridContainer' | 'HBoxContainer' | 'ScrollContainer' | 'VBoxContainer'>;
 export type PixiSceneFieldType = 'string' | 'number' | 'boolean' | 'color' | 'enum';
-export type PixiScenePropGroup = 'transform' | 'display' | 'sprite' | 'nineSlice' | 'tiling' | 'text' | 'graphics';
+export type PixiScenePropGroup = 'transform' | 'display' | 'sprite' | 'nineSlice' | 'tiling' | 'text' | 'graphics' | 'stack' | 'props';
 export interface PixiSceneFieldSchema {
     key: string;
     type: PixiSceneFieldType;
@@ -14,17 +14,27 @@ export interface PixiSceneNodeSchema {
     groups: Partial<Record<PixiScenePropGroup, readonly string[]>>;
 }
 export declare const pixiSceneTransformProps: readonly ["x", "y", "width", "height", "scaleX", "scaleY", "rotation", "pivotX", "pivotY", "skewX", "skewY"];
+export declare const pixiSceneLayoutProps: readonly ["left", "right", "top", "bottom", "horizontal", "vertical"];
 export declare const pixiSceneDisplayProps: readonly ["alpha", "visible", "zIndex", "eventMode", "cursor", "label"];
 export declare const pixiSceneSpriteProps: readonly ["texture", "anchorX", "anchorY", "tint"];
+export declare const pixiSceneImageProps: readonly ["texture", "fit", "anchorX", "anchorY", "tint"];
+export declare const pixiSceneNineImageProps: readonly ["texture", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "anchorX", "anchorY", "tint"];
+export declare const pixiSceneTileImageProps: readonly ["texture", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation", "anchorX", "anchorY", "tint"];
 export declare const pixiSceneNineSliceProps: readonly ["leftWidth", "rightWidth", "topHeight", "bottomHeight"];
 export declare const pixiSceneTilingProps: readonly ["tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation"];
 export declare const pixiSceneTextProps: readonly ["text", "fontSize", "fontFamily", "fontWeight", "fill"];
 export declare const pixiSceneGraphicsProps: readonly ["shape", "radius", "fill", "fillAlpha", "strokeColor", "strokeWidth", "strokeAlpha"];
+export declare const pixiSceneRectProps: readonly ["fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth", "radius"];
+export declare const pixiSceneStackHBoxProps: readonly ["gap", "alignY", "justify"];
+export declare const pixiSceneGridProps: readonly ["columns", "gapX", "gapY", "alignX", "alignY"];
+export declare const pixiSceneStackVBoxProps: readonly ["gap", "alignX", "justify"];
+export declare const pixiSceneStackProps: readonly ["columns", "gap", "gapX", "gapY", "alignX", "alignY", "justify"];
+export declare const pixiSceneScrollProps: readonly ["direction", "scrollX", "scrollY"];
 export declare const pixiSceneTextStyleProps: readonly ["fontSize", "fontFamily", "fontWeight", "fill"];
-export declare const pixiSceneSpriteLikeProps: readonly ["texture", "anchorX", "anchorY", "tint", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation"];
-export declare const pixiSceneKnownProps: readonly ["x", "y", "width", "height", "scaleX", "scaleY", "rotation", "pivotX", "pivotY", "skewX", "skewY", "alpha", "visible", "zIndex", "eventMode", "cursor", "label", "texture", "anchorX", "anchorY", "tint", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation", "text", "fontSize", "fontFamily", "fontWeight", "fill", "shape", "radius", "fill", "fillAlpha", "strokeColor", "strokeWidth", "strokeAlpha"];
-export declare const pixiSceneAddableNodeTypes: readonly ["Container", "Sprite", "NineSliceSprite", "TilingSprite", "Text", "BitmapText", "HTMLText", "Graphics"];
-export declare const pixiSceneNodePropGroupOrder: readonly ["sprite", "nineSlice", "tiling", "text", "graphics"];
+export declare const pixiSceneSpriteLikeProps: readonly ["texture", "anchorX", "anchorY", "tint", "texture", "fit", "anchorX", "anchorY", "tint", "texture", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "anchorX", "anchorY", "tint", "texture", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation", "anchorX", "anchorY", "tint", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation"];
+export declare const pixiSceneKnownProps: readonly ["x", "y", "width", "height", "scaleX", "scaleY", "rotation", "pivotX", "pivotY", "skewX", "skewY", "left", "right", "top", "bottom", "horizontal", "vertical", "alpha", "visible", "zIndex", "eventMode", "cursor", "label", "texture", "anchorX", "anchorY", "tint", "texture", "fit", "anchorX", "anchorY", "tint", "texture", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "anchorX", "anchorY", "tint", "texture", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation", "anchorX", "anchorY", "tint", "leftWidth", "rightWidth", "topHeight", "bottomHeight", "tilePositionX", "tilePositionY", "tileScaleX", "tileScaleY", "tileRotation", "text", "fontSize", "fontFamily", "fontWeight", "fill", "shape", "radius", "fill", "fillAlpha", "strokeColor", "strokeWidth", "strokeAlpha", "fillColor", "fillAlpha", "strokeColor", "strokeAlpha", "strokeWidth", "radius", "columns", "gap", "gapX", "gapY", "alignX", "alignY", "justify", "direction", "scrollX", "scrollY"];
+export declare const pixiSceneAddableNodeTypes: readonly ["GridContainer", "HBoxContainer", "ScrollContainer", "VBoxContainer", "Container", "Sprite", "NineSliceSprite", "TilingSprite", "Text", "BitmapText", "HTMLText", "Graphics", "Rect", "Image", "NineImage", "TileImage"];
+export declare const pixiSceneNodePropGroupOrder: readonly ["stack", "sprite", "nineSlice", "tiling", "text", "graphics", "props"];
 export declare function pixiSceneNodeSchema(type: PixiSceneNodeType): PixiSceneNodeSchema;
 export declare function isPixiSceneNodeType(type: SceneTemplatePrimitiveType): type is PixiSceneNodeType;
 export declare function pixiSceneNodeDefaults(type: PixiSceneNodeType): {
@@ -33,7 +43,7 @@ export declare function pixiSceneNodeDefaults(type: PixiSceneNodeType): {
 export declare function pixiSceneNodeAcceptsChildren(type: SceneTemplatePrimitiveType): boolean;
 export declare function pixiSceneNodePropKeys(type: PixiSceneNodeType): string[];
 export declare function pixiSceneNodePropGroups(type: PixiSceneNodeType): {
-    group: "text" | "sprite" | "nineSlice" | "tiling" | "graphics";
+    group: "text" | "sprite" | "nineSlice" | "tiling" | "graphics" | "stack" | "props";
     fields: readonly string[];
 }[];
 export declare function pixiSceneFieldSchema(key: string): PixiSceneFieldSchema | undefined;

package/dist/compiler/pixiNodeSchema.js

@@ -11,6 +11,14 @@ export const pixiSceneTransformProps = [
     'skewX',
     'skewY',
 ];
+export const pixiSceneLayoutProps = [
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'horizontal',
+    'vertical',
+];
 export const pixiSceneDisplayProps = [
     'alpha',
     'visible',
@@ -25,6 +33,34 @@ export const pixiSceneSpriteProps = [
     'anchorY',
     'tint',
 ];
+export const pixiSceneImageProps = [
+    'texture',
+    'fit',
+    'anchorX',
+    'anchorY',
+    'tint',
+];
+export const pixiSceneNineImageProps = [
+    'texture',
+    'leftWidth',
+    'rightWidth',
+    'topHeight',
+    'bottomHeight',
+    'anchorX',
+    'anchorY',
+    'tint',
+];
+export const pixiSceneTileImageProps = [
+    'texture',
+    'tilePositionX',
+    'tilePositionY',
+    'tileScaleX',
+    'tileScaleY',
+    'tileRotation',
+    'anchorX',
+    'anchorY',
+    'tint',
+];
 export const pixiSceneNineSliceProps = [
     'leftWidth',
     'rightWidth',
@@ -54,6 +90,45 @@ export const pixiSceneGraphicsProps = [
     'strokeWidth',
     'strokeAlpha',
 ];
+export const pixiSceneRectProps = [
+    'fillColor',
+    'fillAlpha',
+    'strokeColor',
+    'strokeAlpha',
+    'strokeWidth',
+    'radius',
+];
+export const pixiSceneStackHBoxProps = [
+    'gap',
+    'alignY',
+    'justify',
+];
+export const pixiSceneGridProps = [
+    'columns',
+    'gapX',
+    'gapY',
+    'alignX',
+    'alignY',
+];
+export const pixiSceneStackVBoxProps = [
+    'gap',
+    'alignX',
+    'justify',
+];
+export const pixiSceneStackProps = [
+    'columns',
+    'gap',
+    'gapX',
+    'gapY',
+    'alignX',
+    'alignY',
+    'justify',
+];
+export const pixiSceneScrollProps = [
+    'direction',
+    'scrollX',
+    'scrollY',
+];
 export const pixiSceneTextStyleProps = [
     'fontSize',
     'fontFamily',
@@ -62,17 +137,28 @@ export const pixiSceneTextStyleProps = [
 ];
 export const pixiSceneSpriteLikeProps = [
     ...pixiSceneSpriteProps,
+    ...pixiSceneImageProps,
+    ...pixiSceneNineImageProps,
+    ...pixiSceneTileImageProps,
     ...pixiSceneNineSliceProps,
     ...pixiSceneTilingProps,
 ];
 export const pixiSceneKnownProps = [
     ...pixiSceneTransformProps,
+    ...pixiSceneLayoutProps,
     ...pixiSceneDisplayProps,
     ...pixiSceneSpriteLikeProps,
     ...pixiSceneTextProps,
     ...pixiSceneGraphicsProps,
+    ...pixiSceneRectProps,
+    ...pixiSceneStackProps,
+    ...pixiSceneScrollProps,
 ];
 export const pixiSceneAddableNodeTypes = [
+    'GridContainer',
+    'HBoxContainer',
+    'ScrollContainer',
+    'VBoxContainer',
     'Container',
     'Sprite',
     'NineSliceSprite',
@@ -81,13 +167,19 @@ export const pixiSceneAddableNodeTypes = [
     'BitmapText',
     'HTMLText',
     'Graphics',
+    'Rect',
+    'Image',
+    'NineImage',
+    'TileImage',
 ];
 export const pixiSceneNodePropGroupOrder = [
+    'stack',
     'sprite',
     'nineSlice',
     'tiling',
     'text',
     'graphics',
+    'props',
 ];
 const pixiSceneFieldSchemas = {
     x: { key: 'x', type: 'number' },
@@ -101,6 +193,12 @@ const pixiSceneFieldSchemas = {
     pivotY: { key: 'pivotY', type: 'number' },
     skewX: { key: 'skewX', type: 'number' },
     skewY: { key: 'skewY', type: 'number' },
+    left: { key: 'left', type: 'number' },
+    right: { key: 'right', type: 'number' },
+    top: { key: 'top', type: 'number' },
+    bottom: { key: 'bottom', type: 'number' },
+    horizontal: { key: 'horizontal', type: 'number' },
+    vertical: { key: 'vertical', type: 'number' },
     alpha: { key: 'alpha', type: 'number' },
     visible: { key: 'visible', type: 'boolean' },
     zIndex: { key: 'zIndex', type: 'number' },
@@ -108,6 +206,7 @@ const pixiSceneFieldSchemas = {
     cursor: { key: 'cursor', type: 'enum', options: ['default', 'pointer', 'text', 'grab', 'grabbing'] },
     label: { key: 'label', type: 'string' },
     texture: { key: 'texture', type: 'string' },
+    fit: { key: 'fit', type: 'enum', options: ['stretch', 'contain', 'cover', 'none'] },
     anchorX: { key: 'anchorX', type: 'number' },
     anchorY: { key: 'anchorY', type: 'number' },
     tint: { key: 'tint', type: 'color' },
@@ -125,12 +224,23 @@ const pixiSceneFieldSchemas = {
     fontFamily: { key: 'fontFamily', type: 'string' },
     fontWeight: { key: 'fontWeight', type: 'enum', options: [400, 500, 600, 700, '400', '500', '600', '700', 'bold'] },
     fill: { key: 'fill', type: 'color' },
+    fillColor: { key: 'fillColor', type: 'color' },
     shape: { key: 'shape', type: 'enum', options: ['roundRect', 'rect'] },
     radius: { key: 'radius', type: 'number' },
     fillAlpha: { key: 'fillAlpha', type: 'number' },
     strokeColor: { key: 'strokeColor', type: 'color' },
     strokeWidth: { key: 'strokeWidth', type: 'number' },
     strokeAlpha: { key: 'strokeAlpha', type: 'number' },
+    columns: { key: 'columns', type: 'number' },
+    gap: { key: 'gap', type: 'number' },
+    gapX: { key: 'gapX', type: 'number' },
+    gapY: { key: 'gapY', type: 'number' },
+    alignX: { key: 'alignX', type: 'enum', options: ['start', 'center', 'end'] },
+    alignY: { key: 'alignY', type: 'enum', options: ['start', 'center', 'end'] },
+    justify: { key: 'justify', type: 'enum', options: ['start', 'center', 'end', 'space-between'] },
+    direction: { key: 'direction', type: 'enum', options: ['vertical', 'horizontal', 'both'] },
+    scrollX: { key: 'scrollX', type: 'number' },
+    scrollY: { key: 'scrollY', type: 'number' },
 };
 const pixiSceneNodeSchemas = {
     Container: {
@@ -239,6 +349,115 @@ const pixiSceneNodeSchemas = {
             graphics: pixiSceneGraphicsProps,
         },
     },
+    Rect: {
+        type: 'Rect',
+        acceptsChildren: false,
+        defaults: {
+            width: 100,
+            height: 60,
+            fillColor: 0xffffff,
+            fillAlpha: 1,
+            strokeColor: 0x000000,
+            strokeAlpha: 1,
+            strokeWidth: 0,
+            radius: 0,
+        },
+        groups: {
+            props: pixiSceneRectProps,
+        },
+    },
+    Image: {
+        type: 'Image',
+        acceptsChildren: false,
+        defaults: {
+            width: 96,
+            height: 96,
+            fit: 'stretch',
+        },
+        groups: {
+            props: pixiSceneImageProps,
+        },
+    },
+    NineImage: {
+        type: 'NineImage',
+        acceptsChildren: false,
+        defaults: {
+            width: 160,
+            height: 80,
+            leftWidth: 10,
+            rightWidth: 10,
+            topHeight: 10,
+            bottomHeight: 10,
+        },
+        groups: {
+            props: pixiSceneNineImageProps,
+        },
+    },
+    TileImage: {
+        type: 'TileImage',
+        acceptsChildren: false,
+        defaults: {
+            width: 160,
+            height: 96,
+            tileScaleX: 1,
+            tileScaleY: 1,
+        },
+        groups: {
+            props: pixiSceneTileImageProps,
+        },
+    },
+    GridContainer: {
+        type: 'GridContainer',
+        acceptsChildren: true,
+        defaults: {
+            width: 240,
+            height: 160,
+            columns: 2,
+            gapX: 8,
+            gapY: 8,
+        },
+        groups: {
+            stack: pixiSceneGridProps,
+        },
+    },
+    HBoxContainer: {
+        type: 'HBoxContainer',
+        acceptsChildren: true,
+        defaults: {
+            width: 240,
+            height: 64,
+            gap: 8,
+        },
+        groups: {
+            stack: pixiSceneStackHBoxProps,
+        },
+    },
+    ScrollContainer: {
+        type: 'ScrollContainer',
+        acceptsChildren: true,
+        defaults: {
+            width: 240,
+            height: 160,
+            direction: 'vertical',
+            scrollX: 0,
+            scrollY: 0,
+        },
+        groups: {
+            props: pixiSceneScrollProps,
+        },
+    },
+    VBoxContainer: {
+        type: 'VBoxContainer',
+        acceptsChildren: true,
+        defaults: {
+            width: 160,
+            height: 240,
+            gap: 8,
+        },
+        groups: {
+            stack: pixiSceneStackVBoxProps,
+        },
+    },
 };
 export function pixiSceneNodeSchema(type) {
     return pixiSceneNodeSchemas[type];

package/dist/compiler/sceneValidation.js

@@ -1,4 +1,4 @@
-import { isPixiSceneNodeType, pixiSceneFieldSchema, pixiSceneNodePropKeys, pixiSceneTransformProps, pixiSceneDisplayProps, } from './pixiNodeSchema.js';
+import { isPixiSceneNodeType, pixiSceneFieldSchema, pixiSceneLayoutProps, pixiSceneNodeAcceptsChildren, pixiSceneNodePropKeys, pixiSceneTransformProps, pixiSceneDisplayProps, } from './pixiNodeSchema.js';
 import { parseSceneTemplate } from './templateParser.js';
 import { serializeSceneTemplate } from './templateSerializer.js';
 export function createSceneRevision(source) {
@@ -139,12 +139,22 @@ function validatePixiNode(node, path, existingAssets) {
                 prop: 'type',
                 expected: 'supported compiler Pixi node type',
                 actual: node.type,
-                hint: 'Use Container, Sprite, NineSliceSprite, TilingSprite, Text, BitmapText, HTMLText, or Graphics.',
+                hint: 'Use GridContainer, HBoxContainer, ScrollContainer, VBoxContainer, Container, Sprite, NineSliceSprite, TilingSprite, Text, BitmapText, HTMLText, Graphics, Rect, Image, NineImage, or TileImage.',
             }];
     }
     const diagnostics = [];
+    if (!pixiSceneNodeAcceptsChildren(node.type) && node.children.length > 0) {
+        diagnostics.push({
+            path,
+            prop: 'children',
+            expected: 'no child nodes',
+            actual: `${node.children.length} ${node.children.length === 1 ? 'child node' : 'child nodes'}`,
+            hint: `${node.type} is a leaf drawing node. Wrap it and sibling content in a Container or Group Scene.`,
+        });
+    }
     const knownProps = new Set([
         ...pixiSceneTransformProps,
+        ...pixiSceneLayoutProps,
         ...pixiSceneDisplayProps,
         ...pixiSceneNodePropKeys(node.type),
     ]);
@@ -209,6 +219,7 @@ function validateSceneInstanceNode(node, path, context) {
     const diagnostics = [];
     const allowedProps = new Set([
         ...pixiSceneTransformProps,
+        ...pixiSceneLayoutProps,
         ...pixiSceneDisplayProps,
         ...Object.keys(sceneInterface.props),
     ]);

package/dist/compiler/spec.d.ts

@@ -1,4 +1,4 @@
-export type SceneTemplatePrimitiveType = 'Container' | 'Sprite' | 'Text' | 'Graphics' | 'BitmapText' | 'HTMLText' | 'Mesh' | 'NineSliceSprite' | 'TilingSprite' | 'DOMContainer';
+export type SceneTemplatePrimitiveType = 'Container' | 'Sprite' | 'Text' | 'Graphics' | 'Rect' | 'Image' | 'NineImage' | 'TileImage' | 'BitmapText' | 'HTMLText' | 'Mesh' | 'NineSliceSprite' | 'TilingSprite' | 'DOMContainer' | 'GridContainer' | 'HBoxContainer' | 'ScrollContainer' | 'VBoxContainer';
 export type SceneTemplateScalarValue = string | number | boolean;
 export type SceneTemplateStructValue = Record<string, SceneTemplateScalarValue>;
 export type SceneTemplateValue = SceneTemplateScalarValue | SceneTemplateStructValue;
@@ -66,6 +66,10 @@ export interface CompileSceneTemplateOptions {
     functionName?: string;
     actionsParameter?: string;
     registrationPath?: string;
+    defaultRootSize?: {
+        width: number;
+        height: number;
+    };
     scriptImport?: SceneTemplateScriptImport;
     sceneImports?: SceneTemplateScriptImport[];
     sceneClassAliases?: Record<string, string>;

package/dist/compiler/templateParser.js

@@ -5,12 +5,20 @@ const pixiTypes = new Set([
     'Sprite',
     'Text',
     'Graphics',
+    'Rect',
+    'Image',
+    'NineImage',
+    'TileImage',
     'BitmapText',
     'HTMLText',
     'Mesh',
     'NineSliceSprite',
     'TilingSprite',
     'DOMContainer',
+    'GridContainer',
+    'HBoxContainer',
+    'ScrollContainer',
+    'VBoxContainer',
 ]);
 export function parseSceneTemplate(source) {
     const root = new TemplateXmlParser(source).parse();
@@ -52,16 +60,6 @@ function parseTemplateNode(element) {
         };
         return node;
     }
-    if (pixiTypes.has(element.name)) {
-        const node = {
-            kind: 'pixi',
-            type: element.name,
-            props: parseProps(element, ['id', 'slot']),
-            children: element.children.map(parseTemplateNode),
-            ...(element.attributes.id ? { id: element.attributes.id } : {}),
-        };
-        return node;
-    }
     if (element.attributes.scene !== undefined || isBuiltinSceneName(element.name)) {
         const slots = {};
         for (const child of element.children) {
@@ -80,6 +78,16 @@ function parseTemplateNode(element) {
         };
         return node;
     }
+    if (pixiTypes.has(element.name)) {
+        const node = {
+            kind: 'pixi',
+            type: element.name,
+            props: parseProps(element, ['id', 'slot']),
+            children: element.children.map(parseTemplateNode),
+            ...(element.attributes.id ? { id: element.attributes.id } : {}),
+        };
+        return node;
+    }
     throw new Error(`Unsupported template tag <${element.name}>. Add scene="..." or use a built-in Scene name.`);
 }
 function parseProps(element, omitted, shouldOmit = () => false) {

package/dist/compiler/templateSerializer.js

@@ -4,6 +4,7 @@ const colorPropNames = new Set([
     'borderColor',
     'disabledColor',
     'fill',
+    'fillColor',
     'highlightedColor',
     'normalColor',
     'pressedColor',