pixifact 0.4.0 → 0.5.0

package/dist/compiler/templateSerializer.js

@@ -79,18 +79,24 @@ function serializeAttributes(attributes) {
 }
 function flattenAttributes(attributes) {
     return attributes.flatMap(([name, value]) => {
-        if (!value || typeof value !== 'object') {
+        if (!value || typeof value !== 'object' || isBindingValue(value)) {
             return [[name, value]];
         }
         return Object.entries(value).map(([field, fieldValue]) => [`${name}.${field}`, fieldValue]);
     });
 }
 function formatAttributeValue(name, value) {
+    if (isBindingValue(value)) {
+        return `{${value.path.join('.')}}`;
+    }
     if (typeof value === 'number' && colorPropNames.has(name)) {
         return `#${value.toString(16).padStart(6, '0').slice(-6)}`;
     }
     return String(value);
 }
+function isBindingValue(value) {
+    return typeof value === 'object' && value.kind === 'binding';
+}
 function escapeAttribute(value) {
     return value
         .replaceAll('&', '&')

package/dist/compiler/typescriptCompiler.js

@@ -1,14 +1,18 @@
-import { pixiSceneDisplayProps, pixiSceneGraphicsProps, pixiSceneLayoutProps, pixiSceneRectProps, pixiSceneSpriteLikeProps, pixiSceneTextStyleProps, pixiSceneTransformProps, } from './pixiNodeSchema.js';
+import { pixiSceneDisplayProps, pixiSceneGraphicsProps, pixiSceneLabelProps, pixiSceneLayoutProps, pixiSceneRectProps, pixiSceneSpriteLikeProps, pixiSceneTextStyleProps, pixiSceneTransformProps, } from './pixiNodeSchema.js';
 import { compilerSceneNodeLocator } from './commands/index.js';
 const transformProps = new Set(pixiSceneTransformProps);
 const layoutProps = new Set(pixiSceneLayoutProps);
 const pixiProps = new Set(pixiSceneDisplayProps);
 const spriteProps = new Set(pixiSceneSpriteLikeProps);
 const graphicsProps = new Set(pixiSceneGraphicsProps);
+const labelProps = new Set(pixiSceneLabelProps);
 const rectProps = new Set(pixiSceneRectProps);
 const textStyleProps = new Set(pixiSceneTextStyleProps);
-const runtimeNodeTypes = new Set(['Group', 'GridContainer', 'HBoxContainer', 'ScrollContainer', 'VBoxContainer', 'Rect', 'Image', 'NineImage', 'TileImage']);
+const runtimeNodeTypes = new Set(['Group', 'GridContainer', 'HBoxContainer', 'ScrollContainer', 'VBoxContainer', 'Label', 'BitmapLabel', 'Rect', 'Image', 'NineImage', 'TileImage']);
 const runtimeNodeProps = new Set(['columns', 'gap', 'gapX', 'gapY', 'alignX', 'alignY', 'justify', 'direction', 'scrollX', 'scrollY']);
+function isSceneBindingValue(value) {
+    return !!value && typeof value === 'object' && value.kind === 'binding';
+}
 export function compileSceneTemplateToTs(template, options = {}) {
     const context = new CompileContext(template, options);
     return context.compile();
@@ -228,7 +232,8 @@ class CompileContext {
         const variable = node.id || this.#anonymousName(node.type);
         const locator = compilerSceneNodeLocator(node, path);
         const constructorName = this.#sceneConstructorName(node);
-        this.#lines.push(`  const ${variable} = new ${constructorName}();`);
+        const constructorArgs = this.#sceneInstanceConstructorArgs(variable, node);
+        this.#lines.push(`  const ${variable} = new ${constructorName}(${constructorArgs});`);
         this.#applyPixiProps(variable, node.props, true, node);
         for (const [name, action] of Object.entries(node.events)) {
             this.#runtimeImports.add('connectSceneEvent');
@@ -253,7 +258,8 @@ class CompileContext {
             const variable = node.id || this.#anonymousName(node.type);
             const locator = compilerSceneNodeLocator(node, path);
             const constructorName = this.#sceneConstructorName(node);
-            this.#lines.push(`  const ${variable} = new ${constructorName}();`);
+            const constructorArgs = this.#sceneInstanceConstructorArgs(variable, node);
+            this.#lines.push(`  const ${variable} = new ${constructorName}(${constructorArgs});`);
             this.#applyPixiProps(variable, node.props, true, node);
             for (const [name, action] of Object.entries(node.events)) {
                 this.#runtimeImports.add('connectSceneEvent');
@@ -282,7 +288,7 @@ class CompileContext {
     }
     #constructPixiNode(node) {
         if (node.type === 'Text' || node.type === 'BitmapText' || node.type === 'HTMLText') {
-            const text = this.#stringValue(node.props.text ?? '');
+            const text = this.#stringValue(isSceneBindingValue(node.props.text) ? '' : node.props.text ?? '');
             const style = this.#styleObject(node.props);
             return `new ${node.type}({ text: ${text}${style ? `, style: ${style}` : ''} })`;
         }
@@ -308,6 +314,31 @@ class CompileContext {
     #sceneConstructorName(node) {
         return this.options.sceneClassAliases?.[node.scene] ?? node.type;
     }
+    #sceneInstanceConstructorArgs(variable, node) {
+        const sceneInterface = this.options.sceneInterfaces?.[node.scene];
+        if (!sceneInterface) {
+            return '';
+        }
+        const entries = [];
+        for (const [key, value] of Object.entries(node.props)) {
+            const contract = sceneInterface.props[key];
+            if (!contract) {
+                continue;
+            }
+            if (isSceneBindingValue(value)) {
+                this.#runtimeImports.add('readSceneBindingValue');
+                entries.push(`${key}: readSceneBindingValue(root, ${JSON.stringify(value)})`);
+                continue;
+            }
+            if (contract.type === 'struct' && value && typeof value === 'object') {
+                const structVariable = this.#createStructValue(variable, key, value, contract);
+                entries.push(`${key}: ${structVariable}`);
+                continue;
+            }
+            entries.push(`${key}: ${this.#value(value)}`);
+        }
+        return entries.length > 0 ? `{ ${entries.join(', ')} }` : '';
+    }
     #sceneStructImports(sceneImport) {
         const scene = this.#sceneImportScene(sceneImport);
         if (!scene) {
@@ -378,6 +409,18 @@ class CompileContext {
         return contract.sourceScene ?? instanceScene;
     }
     #applyPixiProps(variable, props, instance = false, sceneInstance, pixiType) {
+        const publicProps = new Set(Object.keys(sceneInstance ? this.options.sceneInterfaces?.[sceneInstance.scene]?.props ?? {} : {}));
+        const bindingEntries = Object.entries(props).filter((entry) => (isSceneBindingValue(entry[1]) && !publicProps.has(entry[0])));
+        props = Object.fromEntries(Object.entries(props).filter(([, value]) => !isSceneBindingValue(value)));
+        if (sceneInstance) {
+            props = Object.fromEntries(Object.entries(props).filter(([key]) => !publicProps.has(key)));
+            for (const [key, value] of Object.entries(sceneInstance.props)) {
+                if (publicProps.has(key) && isSceneBindingValue(value)) {
+                    this.#runtimeImports.add('bindSceneNodeProp');
+                    this.#lines.push(`  bindSceneNodeProp(root, ${JSON.stringify(value)}, ${variable}, ${JSON.stringify(key)});`);
+                }
+            }
+        }
         const x = props.x;
         const y = props.y;
         if (x !== undefined || y !== undefined) {
@@ -413,6 +456,10 @@ class CompileContext {
             this.#drawGraphics(variable, props);
         }
         for (const [key, value] of Object.entries(props)) {
+            if (!instance && (pixiType === 'Label' || pixiType === 'BitmapLabel') && labelProps.has(key)) {
+                this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
+                continue;
+            }
             if (!instance && runtimeNodeProps.has(key)) {
                 this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
                 continue;
@@ -436,7 +483,7 @@ class CompileContext {
             if (instance && layoutProps.has(key)) {
                 continue;
             }
-            if (instance && value && typeof value === 'object') {
+            if (instance && value && typeof value === 'object' && !isSceneBindingValue(value)) {
                 this.#applyStructProp(variable, key, value, sceneInstance);
                 continue;
             }
@@ -444,6 +491,10 @@ class CompileContext {
                 this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
             }
         }
+        for (const [key, binding] of bindingEntries) {
+            this.#runtimeImports.add('bindSceneNodeProp');
+            this.#lines.push(`  bindSceneNodeProp(root, ${JSON.stringify(binding)}, ${variable}, ${JSON.stringify(key)});`);
+        }
     }
     #applyRootProps() {
         const props = { ...this.template.props };
@@ -474,12 +525,16 @@ class CompileContext {
             this.#lines.push(`  ${variable}.${key} = ${this.#value(value)};`);
             return;
         }
+        const structVariable = this.#createStructValue(variable, key, value, contract);
+        this.#lines.push(`  ${variable}.${key} = ${structVariable};`);
+    }
+    #createStructValue(variable, key, value, contract) {
         const structVariable = `${variable}${key.charAt(0).toUpperCase()}${key.slice(1)}`;
         this.#lines.push(`  const ${structVariable} = new ${contract.struct}();`);
         for (const [field, fieldValue] of Object.entries(value)) {
             this.#lines.push(`  ${structVariable}.${field} = ${this.#value(fieldValue)};`);
         }
-        this.#lines.push(`  ${variable}.${key} = ${structVariable};`);
+        return structVariable;
     }
     #sceneInstanceStructContract(sceneInstance, key) {
         const contract = sceneInstance ? this.options.sceneInterfaces?.[sceneInstance.scene]?.props[key] : undefined;
@@ -550,7 +605,7 @@ class CompileContext {
         const entries = [];
         for (const key of pixiSceneTextStyleProps) {
             const value = props[key];
-            if (value !== undefined) {
+            if (value !== undefined && !isSceneBindingValue(value)) {
                 entries.push(`${key}: ${key === 'fontWeight' ? JSON.stringify(String(value)) : this.#value(value)}`);
             }
         }
@@ -608,6 +663,9 @@ class CompileContext {
         if (typeof value === 'string') {
             return JSON.stringify(value);
         }
+        if (isSceneBindingValue(value)) {
+            throw new Error(`Scene binding ${value.path.join('.')} must be compiled as a binding target.`);
+        }
         if (value && typeof value === 'object') {
             return `{ ${Object.entries(value).map(([key, fieldValue]) => `${key}: ${this.#scalarValue(fieldValue)}`).join(', ')} }`;
         }

package/dist/compiler-node/builtinSceneInterfaces.d.ts

@@ -0,0 +1,6 @@
+import type { SceneTemplateInterface } from '../compiler/spec.js';
+import { type BuiltinSceneScriptSources } from '../compiler/builtinScenes.js';
+export declare function builtinSceneInterface(assetId: string, scriptSources: BuiltinSceneScriptSources): SceneTemplateInterface;
+export declare function builtinSceneInterfaces(scriptSources: BuiltinSceneScriptSources): {
+    [k: string]: SceneTemplateInterface;
+};

package/dist/compiler-node/builtinSceneInterfaces.js

@@ -0,0 +1,27 @@
+import { builtinSceneAssetId, builtinSceneAssetIds, builtinSceneNameFromAssetId, builtinSceneNames, } from '../compiler/builtinScenes.js';
+import { extractSceneScriptInterfaces } from './scriptInterfaceExtractor.js';
+export function builtinSceneInterface(assetId, scriptSources) {
+    return builtinSceneInterfaceDescriptors(scriptSources)[assetId].interface;
+}
+export function builtinSceneInterfaces(scriptSources) {
+    const descriptors = builtinSceneInterfaceDescriptors(scriptSources);
+    return Object.fromEntries(builtinSceneAssetIds().map((assetId) => [assetId, descriptors[assetId].interface]));
+}
+function builtinSceneInterfaceDescriptors(scriptSources) {
+    const descriptors = extractSceneScriptInterfaces(builtinSceneNames.map((name) => ({
+        scene: builtinSceneAssetId(name),
+        fileName: `${name}.ts`,
+        source: scriptSources[name],
+    })));
+    for (const assetId of builtinSceneAssetIds()) {
+        const name = builtinSceneNameFromAssetId(assetId);
+        const descriptor = descriptors[assetId];
+        if (!descriptor) {
+            throw new Error(`Built-in Scene "${assetId}" is missing a @scene script.`);
+        }
+        if (descriptor.className !== name) {
+            throw new Error(`Built-in Scene "${assetId}" name must match @scene class "${descriptor.className}".`);
+        }
+    }
+    return descriptors;
+}

package/dist/compiler-node/index.d.ts

@@ -1,3 +1,5 @@
 export * from '../compiler/compileScenes.js';
 export * from './builtinSceneAssets.js';
+export * from './builtinSceneInterfaces.js';
+export * from './scriptInterfaceExtractor.js';
 export * from './vite.js';

package/dist/compiler-node/index.js

@@ -1,3 +1,5 @@
 export * from '../compiler/compileScenes.js';
 export * from './builtinSceneAssets.js';
+export * from './builtinSceneInterfaces.js';
+export * from './scriptInterfaceExtractor.js';
 export * from './vite.js';

package/dist/{compiler → compiler-node}/scriptInterfaceExtractor.d.ts

@@ -1,4 +1,4 @@
-import type { SceneScriptInterface } from './spec.js';
+import type { SceneScriptInterface } from '../compiler/spec.js';
 export interface ExtractSceneScriptInterfaceOptions {
     scene: string;
 }

package/dist/{compiler → compiler-node}/scriptInterfaceExtractor.js

@@ -15,6 +15,7 @@ function extractSceneScriptClasses(source, fileName, options) {
     const sourceId = normalizeScriptSourceId(fileName);
     const imports = collectNamedImports(sourceFile, sourceId);
     const structClasses = collectStructClasses(sourceFile);
+    const variantDeclarations = collectVariantDeclarations(sourceFile);
     const classes = [];
     for (const statement of sourceFile.statements) {
         if (!ts.isClassDeclaration(statement)) {
@@ -42,7 +43,8 @@ function extractSceneScriptClasses(source, fileName, options) {
             }
             const prop = memberDecoratorOptions(member, 'prop');
             if (prop) {
-                props[name] = propContract(prop, structClasses);
+                assertStaticPropMember(member, name);
+                props[name] = propContract(prop, member, structClasses, variantDeclarations);
             }
             const event = memberDecoratorOptions(member, 'event');
             if (event) {
@@ -318,6 +320,88 @@ function memberName(name) {
     }
     return undefined;
 }
+function collectVariantDeclarations(sourceFile) {
+    const variants = new Map();
+    for (const statement of sourceFile.statements) {
+        if (!ts.isVariableStatement(statement)) {
+            continue;
+        }
+        for (const declaration of statement.declarationList.declarations) {
+            if (!ts.isIdentifier(declaration.name) || !declaration.initializer) {
+                continue;
+            }
+            const initializer = unwrapExpression(declaration.initializer);
+            if (!ts.isCallExpression(initializer)
+                || !ts.isIdentifier(initializer.expression)
+                || initializer.expression.text !== 'defineVariants') {
+                continue;
+            }
+            if (initializer.arguments.length !== 1) {
+                throw new Error('defineVariants accepts exactly one argument.');
+            }
+            variants.set(declaration.name.text, variantObjectValue(initializer.arguments[0], 'defineVariants argument'));
+        }
+    }
+    return variants;
+}
+function variantObjectValue(expression, label) {
+    const object = unwrapExpression(expression);
+    if (!ts.isObjectLiteralExpression(object)) {
+        throw new Error(`${label} must be an object literal.`);
+    }
+    const variants = {};
+    let expectedFields;
+    for (const property of object.properties) {
+        if (!ts.isPropertyAssignment(property)) {
+            throw new Error(`${label} only supports property assignments.`);
+        }
+        const name = memberName(property.name);
+        if (!name) {
+            throw new Error(`${label} only supports literal case names.`);
+        }
+        const caseExpression = unwrapExpression(property.initializer);
+        if (!ts.isObjectLiteralExpression(caseExpression)) {
+            throw new Error(`${label}.${name} must be an object literal.`);
+        }
+        const fields = {};
+        for (const field of caseExpression.properties) {
+            if (!ts.isPropertyAssignment(field)) {
+                throw new Error(`${label}.${name} only supports property assignments.`);
+            }
+            const fieldName = memberName(field.name);
+            if (!fieldName) {
+                throw new Error(`${label}.${name} only supports literal field names.`);
+            }
+            fields[fieldName] = literalValue(field.initializer, `${label}.${name}.${fieldName}`);
+        }
+        const fieldTypes = Object.fromEntries(Object.entries(fields).map(([field, value]) => [field, typeof value]));
+        if (!expectedFields) {
+            expectedFields = fieldTypes;
+        }
+        else if (!sameFieldTypes(expectedFields, fieldTypes)) {
+            throw new Error(`defineVariants case "${name}" must contain the same fields and field types as the first case.`);
+        }
+        variants[name] = fields;
+    }
+    if (Object.keys(variants).length === 0) {
+        throw new Error('defineVariants requires at least one case.');
+    }
+    return variants;
+}
+function sameFieldTypes(left, right) {
+    const leftEntries = Object.entries(left);
+    return leftEntries.length === Object.keys(right).length
+        && leftEntries.every(([name, type]) => right[name] === type);
+}
+function unwrapExpression(expression) {
+    if (ts.isAsExpression(expression)
+        || ts.isTypeAssertionExpression(expression)
+        || ts.isSatisfiesExpression(expression)
+        || ts.isParenthesizedExpression(expression)) {
+        return unwrapExpression(expression.expression);
+    }
+    return expression;
+}
 function collectStructClasses(sourceFile) {
     const classes = new Map();
     for (const statement of sourceFile.statements) {
@@ -355,65 +439,113 @@ function structFields(node) {
     }
     return fields;
 }
-function propContract(prop, structClasses) {
-    const type = prop.type;
-    const defaultValue = prop.default;
-    if (type === 'string' || type === 'number' || type === 'boolean') {
-        throw new Error('@prop type must be String, Number, Boolean, or a struct class.');
+function assertStaticPropMember(member, name) {
+    const isDeclareProperty = ts.isPropertyDeclaration(member)
+        && member.modifiers?.some((modifier) => modifier.kind === ts.SyntaxKind.DeclareKeyword)
+        && !member.modifiers.some((modifier) => modifier.kind === ts.SyntaxKind.AccessorKeyword)
+        && !member.initializer;
+    if (!isDeclareProperty) {
+        throw new Error(`@prop "${name}" must decorate a declare property without an initializer.`);
+    }
+    if (!member.type) {
+        throw new Error(`@prop "${name}" requires an explicit TypeScript property type.`);
+    }
+}
+function propContract(prop, member, structClasses, variantDeclarations) {
+    if (!ts.isPropertyDeclaration(member) || !member.type) {
+        throw new Error('@prop requires a typed declare property.');
     }
-    if (!isIdentifierValue(type)) {
-        throw new Error('@prop type must be String, Number, Boolean, or a struct class.');
+    if (prop.type !== undefined) {
+        throw new Error('@prop type is inferred from the TypeScript property declaration; remove the type option.');
+    }
+    const defaultValue = prop.default;
+    const variantsReference = prop.variants;
+    if (variantsReference !== undefined) {
+        if (!isIdentifierValue(variantsReference)) {
+            throw new Error('@prop variants must reference a local defineVariants declaration.');
+        }
+        const variants = variantDeclarations.get(variantsReference.text);
+        if (!variants) {
+            throw new Error(`@prop variants "${variantsReference.text}" must reference a local defineVariants declaration.`);
+        }
+        if (typeof defaultValue !== 'string' || !variants[defaultValue]) {
+            throw new Error('@prop Variant default must name an existing defineVariants case.');
+        }
+        assertVariantPropertyType(member.type, variantsReference.text);
+        return {
+            type: 'variant',
+            default: defaultValue,
+            variants,
+        };
     }
-    const primitiveType = primitiveConstructorType(type.text);
+    const primitiveType = primitivePropertyType(member.type);
     if (primitiveType) {
         if (defaultValue !== undefined && (!isSceneTemplateScalarValue(defaultValue) || sceneTemplateScalarType(defaultValue) !== primitiveType)) {
-            throw new Error(`@prop default for ${type.text} must be a ${primitiveType} literal.`);
+            throw new Error(`@prop default must be a ${primitiveType} literal.`);
         }
         return {
             type: primitiveType,
             ...(defaultValue !== undefined ? { default: defaultValue } : {}),
         };
     }
-    const structClass = structClasses.get(type.text);
+    const structName = typeReferenceName(member.type);
+    if (!structName) {
+        throw new Error('@prop type must be string, number, boolean, a local struct class, or keyof a local defineVariants declaration.');
+    }
+    const structClass = structClasses.get(structName);
     if (!structClass) {
-        throw new Error(`Struct prop type ${type.text} was not found.`);
+        throw new Error(`Struct prop type ${structName} was not found.`);
     }
     if (!structClass.exported) {
-        throw new Error(`Struct prop type ${type.text} must be exported.`);
+        throw new Error(`Struct prop type ${structName} must be exported.`);
     }
     if (defaultValue !== undefined) {
         throw new Error('@prop default is only supported for primitive props.');
     }
     const struct = structContractInfo(structClass.node);
     if (struct.hasRequiredConstructorParameters) {
-        throw new Error(`Struct prop type ${type.text} must be constructable with no required parameters.`);
+        throw new Error(`Struct prop type ${structName} must be constructable with no required parameters.`);
     }
     return {
         type: 'struct',
-        struct: type.text,
+        struct: structName,
         fields: struct.fields,
     };
 }
-function structContractInfo(node) {
-    return {
-        fields: structFields(node),
-        hasRequiredConstructorParameters: node.members.some((member) => ts.isConstructorDeclaration(member) && member.parameters.some((parameter) => !parameter.questionToken && !parameter.initializer)),
-    };
+function assertVariantPropertyType(type, variantsName) {
+    if (!ts.isTypeOperatorNode(type)
+        || type.operator !== ts.SyntaxKind.KeyOfKeyword
+        || !ts.isTypeQueryNode(type.type)
+        || !ts.isIdentifier(type.type.exprName)
+        || type.type.exprName.text !== variantsName) {
+        throw new Error(`@prop Variant type must be "keyof typeof ${variantsName}".`);
+    }
 }
-function primitiveConstructorType(name) {
-    if (name === 'String') {
+function primitivePropertyType(type) {
+    if (type.kind === ts.SyntaxKind.StringKeyword) {
         return 'string';
     }
-    if (name === 'Number') {
+    if (type.kind === ts.SyntaxKind.NumberKeyword) {
         return 'number';
     }
-    if (name === 'Boolean') {
+    if (type.kind === ts.SyntaxKind.BooleanKeyword) {
         return 'boolean';
     }
     return undefined;
 }
+function typeReferenceName(type) {
+    return ts.isTypeReferenceNode(type) && ts.isIdentifier(type.typeName)
+        ? type.typeName.text
+        : undefined;
+}
+function structContractInfo(node) {
+    return {
+        fields: structFields(node),
+        hasRequiredConstructorParameters: node.members.some((member) => ts.isConstructorDeclaration(member) && member.parameters.some((parameter) => !parameter.questionToken && !parameter.initializer)),
+    };
+}
 function isIdentifierValue(value) {
-    return ts.isIdentifier(value);
+    return typeof value === 'object' && ts.isIdentifier(value);
 }
 function isSceneTemplateScalarValue(value) {
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';

package/dist/runtime/BitmapLabel.d.ts

@@ -0,0 +1,9 @@
+import { BitmapText } from 'pixi.js';
+import { TextBoxControl, type TextBoxAlign, type TextBoxFontWeight, type TextBoxOptions, type TextBoxOverflow } from './TextBoxControl.js';
+export type BitmapLabelAlign = TextBoxAlign;
+export type BitmapLabelOverflow = TextBoxOverflow;
+export type BitmapLabelFontWeight = TextBoxFontWeight;
+export type BitmapLabelOptions = TextBoxOptions;
+export declare class BitmapLabel extends TextBoxControl<BitmapText> {
+    constructor(options?: BitmapLabelOptions);
+}

package/dist/runtime/BitmapLabel.js

@@ -0,0 +1,7 @@
+import { BitmapText } from 'pixi.js';
+import { TextBoxControl, } from './TextBoxControl.js';
+export class BitmapLabel extends TextBoxControl {
+    constructor(options = {}) {
+        super(options, (textOptions) => new BitmapText(textOptions));
+    }
+}

package/dist/runtime/Label.d.ts

@@ -0,0 +1,9 @@
+import { Text } from 'pixi.js';
+import { TextBoxControl, type TextBoxAlign, type TextBoxFontWeight, type TextBoxOptions, type TextBoxOverflow } from './TextBoxControl.js';
+export type LabelAlign = TextBoxAlign;
+export type LabelOverflow = TextBoxOverflow;
+export type LabelFontWeight = TextBoxFontWeight;
+export type LabelOptions = TextBoxOptions;
+export declare class Label extends TextBoxControl<Text> {
+    constructor(options?: LabelOptions);
+}

package/dist/runtime/Label.js

@@ -0,0 +1,7 @@
+import { Text } from 'pixi.js';
+import { TextBoxControl, } from './TextBoxControl.js';
+export class Label extends TextBoxControl {
+    constructor(options = {}) {
+        super(options, (textOptions) => new Text(textOptions));
+    }
+}

package/dist/runtime/ScrollContainer.d.ts

@@ -1,6 +1,7 @@
 import { Container, type ContainerChild, type DestroyOptions } from 'pixi.js';
 import { Control } from './Control.js';
 import type { GroupOptions } from './Group.js';
+import { runtimeBehavior } from './runtimeBehavior.js';
 export type ScrollDirection = 'vertical' | 'horizontal' | 'both';
 export type ScrollContainerOptions = GroupOptions & {
     direction?: ScrollDirection;
@@ -11,6 +12,7 @@ export declare class ScrollContainer extends Control {
     #private;
     readonly contentLayer: Container<ContainerChild>;
     constructor(options?: ScrollContainerOptions);
+    [runtimeBehavior](): void;
     get direction(): ScrollDirection;
     set direction(value: ScrollDirection);
     get scrollX(): number;

package/dist/runtime/ScrollContainer.js

@@ -1,5 +1,6 @@
 import { Container, Graphics, Ticker, } from 'pixi.js';
 import { Control } from './Control.js';
+import { runtimeBehavior } from './runtimeBehavior.js';
 const elasticResistance = 0.5;
 const inertiaFriction = 0.92;
 const springStrength = 0.18;
@@ -26,19 +27,21 @@ export class ScrollContainer extends Control {
         this.#direction = direction ?? this.#direction;
         this.#targetScrollX = scrollX ?? this.#targetScrollX;
         this.#targetScrollY = scrollY ?? this.#targetScrollY;
-        this.eventMode = 'static';
         this.contentLayer.mask = this.#mask;
         this.contentLayer.on('childAdded', this.#handleContentChildAdded, this);
         this.contentLayer.on('childRemoved', this.#handleContentChildRemoved, this);
         super.addChild(this.contentLayer);
         super.addChild(this.#mask);
+        this.layout();
+    }
+    [runtimeBehavior]() {
+        this.eventMode = 'static';
         this.on('wheel', this.#handleWheel, this);
         this.on('pointerdown', this.#handlePointerDown, this);
         this.on('globalpointermove', this.#handleGlobalPointerMove, this);
         this.on('pointerup', this.#handlePointerUp, this);
         this.on('pointerupoutside', this.#handlePointerUp, this);
         this.on('pointercancel', this.#handlePointerUp, this);
-        this.layout();
     }
     get direction() {
         return this.#direction;
@@ -116,6 +119,13 @@ export class ScrollContainer extends Control {
     destroy(options) {
         this.#destroying = true;
         this.#stopMomentum();
+        this.#drag = undefined;
+        this.off('wheel', this.#handleWheel, this);
+        this.off('pointerdown', this.#handlePointerDown, this);
+        this.off('globalpointermove', this.#handleGlobalPointerMove, this);
+        this.off('pointerup', this.#handlePointerUp, this);
+        this.off('pointerupoutside', this.#handlePointerUp, this);
+        this.off('pointercancel', this.#handlePointerUp, this);
         this.contentLayer.off('childAdded', this.#handleContentChildAdded, this);
         this.contentLayer.off('childRemoved', this.#handleContentChildRemoved, this);
         for (const child of this.#watchedContent) {

package/dist/runtime/TextBoxControl.d.ts

@@ -0,0 +1,48 @@
+import { BitmapText, Text, type TextOptions } from 'pixi.js';
+import { Control } from './Control.js';
+import type { GroupOptions } from './Group.js';
+export type TextBoxAlign = 'start' | 'center' | 'end';
+export type TextBoxOverflow = 'visible' | 'clip';
+export type TextBoxFontWeight = 400 | 500 | 600 | 700 | '400' | '500' | '600' | '700' | 'bold';
+export type TextBoxOptions = GroupOptions & {
+    text?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: TextBoxFontWeight;
+    fill?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    wordWrap?: boolean;
+    alignX?: TextBoxAlign;
+    alignY?: TextBoxAlign;
+    overflow?: TextBoxOverflow;
+};
+type TextBoxRenderer = Text | BitmapText;
+export declare class TextBoxControl<T extends TextBoxRenderer> extends Control {
+    #private;
+    constructor(options: TextBoxOptions, createTextNode: (options: TextOptions) => T);
+    get text(): string;
+    set text(value: string);
+    get fontFamily(): string;
+    set fontFamily(value: string);
+    get fontSize(): number;
+    set fontSize(value: number);
+    get fontWeight(): TextBoxFontWeight;
+    set fontWeight(value: TextBoxFontWeight);
+    get fill(): number;
+    set fill(value: number);
+    get lineHeight(): number;
+    set lineHeight(value: number);
+    get letterSpacing(): number;
+    set letterSpacing(value: number);
+    get wordWrap(): boolean;
+    set wordWrap(value: boolean);
+    get alignX(): TextBoxAlign;
+    set alignX(value: TextBoxAlign);
+    get alignY(): TextBoxAlign;
+    set alignY(value: TextBoxAlign);
+    get overflow(): TextBoxOverflow;
+    set overflow(value: TextBoxOverflow);
+    layout(): void;
+}
+export {};