@number10/jsx-phaser 5.0.0

package/dist/components/creators/createGestures.js

@@ -0,0 +1,34 @@
+import * as Phaser from "phaser";
+import { getGestureManager } from "../../gestures/gesture-manager.js";
+function createGestures(scene, container, props) {
+  const hasAnyGesture = !!(props.onTouch || props.onTouchOutside || props.onTouchMove || props.onDoubleTap || props.onLongPress || props.onHoverStart || props.onHoverEnd || props.onWheel);
+  const shouldEnable = hasAnyGesture && props.enableGestures !== false;
+  if (!shouldEnable) {
+    return;
+  }
+  const manager = getGestureManager(scene);
+  const containerWithLayout = container;
+  const { width, height } = containerWithLayout.__getLayoutSize ? containerWithLayout.__getLayoutSize() : (() => {
+    const bounds = container.getBounds();
+    return { width: bounds.width || 100, height: bounds.height || 100 };
+  })();
+  const hitArea = new Phaser.Geom.Rectangle(0, 0, width, height);
+  const callbacks = {};
+  if (props.onTouch) callbacks.onTouch = props.onTouch;
+  if (props.onTouchOutside) callbacks.onTouchOutside = props.onTouchOutside;
+  if (props.onTouchMove) callbacks.onTouchMove = props.onTouchMove;
+  if (props.onDoubleTap) callbacks.onDoubleTap = props.onDoubleTap;
+  if (props.onLongPress) callbacks.onLongPress = props.onLongPress;
+  if (props.onHoverStart) callbacks.onHoverStart = props.onHoverStart;
+  if (props.onHoverEnd) callbacks.onHoverEnd = props.onHoverEnd;
+  if (props.onWheel) callbacks.onWheel = props.onWheel;
+  const config = {};
+  if (props.longPressDuration !== void 0) config.longPressDuration = props.longPressDuration;
+  if (props.doubleTapDelay !== void 0) config.doubleTapDelay = props.doubleTapDelay;
+  if (props.maxTouchDuration !== void 0) config.maxTouchDuration = props.maxTouchDuration;
+  manager.registerContainer(container, callbacks, hitArea, config);
+}
+export {
+  createGestures
+};
+//# sourceMappingURL=createGestures.js.map

package/dist/components/creators/createGestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGestures.js","sources":["../../../src/components/creators/createGestures.ts"],"sourcesContent":["/**\n * Gesture setup for component initialization\n * Registers containers with the GestureManager for high-level gesture detection\n */\nimport type { LayoutSize } from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\nimport type { GestureProps, LayoutProps } from '../../core-props'\nimport { getGestureManager } from '../../gestures/gesture-manager'\nimport type { GestureCallbacks } from '../../gestures/gesture-types'\n\n/**\n * Setup gesture tracking for container-based components\n * Only registers if enableGestures is true and at least one gesture callback exists\n * @param scene - Scene containing the gesture manager\n * @param container - Container to make gesture-aware\n * @param props - Props with gesture settings\n */\nexport function createGestures(\n  scene: Phaser.Scene,\n  container: Phaser.GameObjects.Container,\n  props: Partial<GestureProps & LayoutProps>\n): void {\n  // Check if any gesture callback is defined\n  const hasAnyGesture = !!(\n    props.onTouch ||\n    props.onTouchOutside ||\n    props.onTouchMove ||\n    props.onDoubleTap ||\n    props.onLongPress ||\n    props.onHoverStart ||\n    props.onHoverEnd ||\n    props.onWheel\n  )\n\n  // Auto-enable gestures if callbacks are provided, unless explicitly disabled\n  const shouldEnable = hasAnyGesture && props.enableGestures !== false\n\n  if (!shouldEnable) {\n    return\n  }\n\n  // Get scene's gesture manager\n  const manager = getGestureManager(scene)\n\n  // Get actual calculated container size from layout system\n  // Use __getLayoutSize if available (set by createLayout), otherwise fallback to getBounds\n  const containerWithLayout = container as typeof container & {\n    __getLayoutSize?: () => LayoutSize\n  }\n\n  const { width, height } = containerWithLayout.__getLayoutSize\n    ? containerWithLayout.__getLayoutSize()\n    : (() => {\n        // Fallback to getBounds if __getLayoutSize not available yet\n        const bounds = container.getBounds()\n        return { width: bounds.width || 100, height: bounds.height || 100 }\n      })()\n\n  // Create hit area with origin at (0,0) - matches our component system\n  const hitArea = new Phaser.Geom.Rectangle(0, 0, width, height)\n\n  // Build callbacks object\n  const callbacks: GestureCallbacks = {}\n  if (props.onTouch) callbacks.onTouch = props.onTouch\n  if (props.onTouchOutside) callbacks.onTouchOutside = props.onTouchOutside\n  if (props.onTouchMove) callbacks.onTouchMove = props.onTouchMove\n  if (props.onDoubleTap) callbacks.onDoubleTap = props.onDoubleTap\n  if (props.onLongPress) callbacks.onLongPress = props.onLongPress\n  if (props.onHoverStart) callbacks.onHoverStart = props.onHoverStart\n  if (props.onHoverEnd) callbacks.onHoverEnd = props.onHoverEnd\n  if (props.onWheel) callbacks.onWheel = props.onWheel\n\n  // Build config (only include defined values)\n  const config: { longPressDuration?: number; doubleTapDelay?: number; maxTouchDuration?: number } =\n    {}\n  if (props.longPressDuration !== undefined) config.longPressDuration = props.longPressDuration\n  if (props.doubleTapDelay !== undefined) config.doubleTapDelay = props.doubleTapDelay\n  if (props.maxTouchDuration !== undefined) config.maxTouchDuration = props.maxTouchDuration\n\n  // Register with manager\n  manager.registerContainer(container, callbacks, hitArea, config)\n}\n"],"names":[],"mappings":";;AAiBO,SAAS,eACd,OACA,WACA,OACM;AAEN,QAAM,gBAAgB,CAAC,EACrB,MAAM,WACN,MAAM,kBACN,MAAM,eACN,MAAM,eACN,MAAM,eACN,MAAM,gBACN,MAAM,cACN,MAAM;AAIR,QAAM,eAAe,iBAAiB,MAAM,mBAAmB;AAE/D,MAAI,CAAC,cAAc;AACjB;AAAA,EACF;AAGA,QAAM,UAAU,kBAAkB,KAAK;AAIvC,QAAM,sBAAsB;AAI5B,QAAM,EAAE,OAAO,WAAW,oBAAoB,kBAC1C,oBAAoB,gBAAA,KACnB,MAAM;AAEL,UAAM,SAAS,UAAU,UAAA;AACzB,WAAO,EAAE,OAAO,OAAO,SAAS,KAAK,QAAQ,OAAO,UAAU,IAAA;AAAA,EAChE,GAAA;AAGJ,QAAM,UAAU,IAAI,OAAO,KAAK,UAAU,GAAG,GAAG,OAAO,MAAM;AAG7D,QAAM,YAA8B,CAAA;AACpC,MAAI,MAAM,QAAS,WAAU,UAAU,MAAM;AAC7C,MAAI,MAAM,eAAgB,WAAU,iBAAiB,MAAM;AAC3D,MAAI,MAAM,YAAa,WAAU,cAAc,MAAM;AACrD,MAAI,MAAM,YAAa,WAAU,cAAc,MAAM;AACrD,MAAI,MAAM,YAAa,WAAU,cAAc,MAAM;AACrD,MAAI,MAAM,aAAc,WAAU,eAAe,MAAM;AACvD,MAAI,MAAM,WAAY,WAAU,aAAa,MAAM;AACnD,MAAI,MAAM,QAAS,WAAU,UAAU,MAAM;AAG7C,QAAM,SACJ,CAAA;AACF,MAAI,MAAM,sBAAsB,OAAW,QAAO,oBAAoB,MAAM;AAC5E,MAAI,MAAM,mBAAmB,OAAW,QAAO,iBAAiB,MAAM;AACtE,MAAI,MAAM,qBAAqB,OAAW,QAAO,mBAAmB,MAAM;AAG1E,UAAQ,kBAAkB,WAAW,WAAW,SAAS,MAAM;AACjE;"}

package/dist/components/creators/createGraphicsLayout.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createGraphicsLayout(graphics, props) {
+  if (props.headless === false) {
+    if (typeof props.width !== "number" || typeof props.height !== "number") {
+      throw new Error(
+        "Graphics component requires explicit width and height props when headless=false"
+      );
+    }
+  }
+  graphics.__layoutProps = props;
+  graphics.__getLayoutSize = () => {
+    if (graphics.__layoutProps?.headless ?? true) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: props.width ?? 0,
+      height: props.height ?? 0
+    };
+  };
+  graphics.__drawDependencies = props.dependencies;
+}
+exports.createGraphicsLayout = createGraphicsLayout;
+//# sourceMappingURL=createGraphicsLayout.cjs.map

package/dist/components/creators/createGraphicsLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphicsLayout.cjs","sources":["../../../src/components/creators/createGraphicsLayout.ts"],"sourcesContent":["/**\n * Layout system initialization for Graphics component\n */\nimport type * as Phaser from 'phaser'\nimport type { GraphicsBaseProps } from '../primitives/graphics'\n\n/**\n * Setup layout system for Graphics component\n * @param graphics - Phaser Graphics instance\n * @param props - Initial props\n */\nexport function createGraphicsLayout(\n  graphics: Phaser.GameObjects.Graphics,\n  props: Partial<GraphicsBaseProps>\n): void {\n  // Validation: headless=false requires explicit width/height\n  if (props.headless === false) {\n    if (typeof props.width !== 'number' || typeof props.height !== 'number') {\n      throw new Error(\n        'Graphics component requires explicit width and height props when headless=false'\n      )\n    }\n  }\n\n  // Setup layout props (for layout system) - store ALL props like Text does\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(graphics as any).__layoutProps = props as GraphicsBaseProps\n\n  // Setup layout size provider (returns explicit dimensions)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(graphics as any).__getLayoutSize = () => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if ((graphics as any).__layoutProps?.headless ?? true) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: props.width ?? 0,\n      height: props.height ?? 0,\n    }\n  }\n\n  // Store dependencies for comparison in patcher\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(graphics as any).__drawDependencies = props.dependencies\n}\n"],"names":[],"mappings":";;AAWO,SAAS,qBACd,UACA,OACM;AAEN,MAAI,MAAM,aAAa,OAAO;AAC5B,QAAI,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,UAAU;AACvE,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAIE,WAAiB,gBAAgB;AAIjC,WAAiB,kBAAkB,MAAM;AAEzC,QAAK,SAAiB,eAAe,YAAY,MAAM;AACrD,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,MAAM,SAAS;AAAA,MACtB,QAAQ,MAAM,UAAU;AAAA,IAAA;AAAA,EAE5B;AAIE,WAAiB,qBAAqB,MAAM;AAChD;;"}

package/dist/components/creators/createGraphicsLayout.d.ts

@@ -0,0 +1,12 @@
+import { GraphicsBaseProps } from '../primitives/graphics';
+/**
+ * Layout system initialization for Graphics component
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Setup layout system for Graphics component
+ * @param graphics - Phaser Graphics instance
+ * @param props - Initial props
+ */
+export declare function createGraphicsLayout(graphics: Phaser.GameObjects.Graphics, props: Partial<GraphicsBaseProps>): void;
+//# sourceMappingURL=createGraphicsLayout.d.ts.map

package/dist/components/creators/createGraphicsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphicsLayout.d.ts","sourceRoot":"","sources":["../../../src/components/creators/createGraphicsLayout.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,EACrC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAChC,IAAI,CA8BN"}

package/dist/components/creators/createGraphicsLayout.js

@@ -0,0 +1,24 @@
+function createGraphicsLayout(graphics, props) {
+  if (props.headless === false) {
+    if (typeof props.width !== "number" || typeof props.height !== "number") {
+      throw new Error(
+        "Graphics component requires explicit width and height props when headless=false"
+      );
+    }
+  }
+  graphics.__layoutProps = props;
+  graphics.__getLayoutSize = () => {
+    if (graphics.__layoutProps?.headless ?? true) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: props.width ?? 0,
+      height: props.height ?? 0
+    };
+  };
+  graphics.__drawDependencies = props.dependencies;
+}
+export {
+  createGraphicsLayout
+};
+//# sourceMappingURL=createGraphicsLayout.js.map

package/dist/components/creators/createGraphicsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createGraphicsLayout.js","sources":["../../../src/components/creators/createGraphicsLayout.ts"],"sourcesContent":["/**\n * Layout system initialization for Graphics component\n */\nimport type * as Phaser from 'phaser'\nimport type { GraphicsBaseProps } from '../primitives/graphics'\n\n/**\n * Setup layout system for Graphics component\n * @param graphics - Phaser Graphics instance\n * @param props - Initial props\n */\nexport function createGraphicsLayout(\n  graphics: Phaser.GameObjects.Graphics,\n  props: Partial<GraphicsBaseProps>\n): void {\n  // Validation: headless=false requires explicit width/height\n  if (props.headless === false) {\n    if (typeof props.width !== 'number' || typeof props.height !== 'number') {\n      throw new Error(\n        'Graphics component requires explicit width and height props when headless=false'\n      )\n    }\n  }\n\n  // Setup layout props (for layout system) - store ALL props like Text does\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(graphics as any).__layoutProps = props as GraphicsBaseProps\n\n  // Setup layout size provider (returns explicit dimensions)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(graphics as any).__getLayoutSize = () => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if ((graphics as any).__layoutProps?.headless ?? true) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: props.width ?? 0,\n      height: props.height ?? 0,\n    }\n  }\n\n  // Store dependencies for comparison in patcher\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ;(graphics as any).__drawDependencies = props.dependencies\n}\n"],"names":[],"mappings":"AAWO,SAAS,qBACd,UACA,OACM;AAEN,MAAI,MAAM,aAAa,OAAO;AAC5B,QAAI,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,UAAU;AACvE,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAIE,WAAiB,gBAAgB;AAIjC,WAAiB,kBAAkB,MAAM;AAEzC,QAAK,SAAiB,eAAe,YAAY,MAAM;AACrD,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,MAAM,SAAS;AAAA,MACtB,QAAQ,MAAM,UAAU;AAAA,IAAA;AAAA,EAE5B;AAIE,WAAiB,qBAAqB,MAAM;AAChD;"}

package/dist/components/creators/createImageLayout.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createImageLayout(image, props) {
+  image.__layoutProps = props;
+  image.__getLayoutSize = () => {
+    if (image.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: image.displayWidth,
+      height: image.displayHeight
+    };
+  };
+}
+exports.createImageLayout = createImageLayout;
+//# sourceMappingURL=createImageLayout.cjs.map

package/dist/components/creators/createImageLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageLayout.cjs","sources":["../../../src/components/creators/createImageLayout.ts"],"sourcesContent":["/**\n * Layout creator for Image components\n */\nimport type * as Phaser from 'phaser'\nimport type { LayoutSize } from '../../layout/index'\nimport type { ImageBaseProps } from '../primitives/image'\n\n/**\n * Creates layout infrastructure for an Image component\n * Attaches layout props and dynamic size provider\n * @param image - Phaser Image object\n * @param props - Image props including layout\n */\nexport function createImageLayout(\n  image: Phaser.GameObjects.Image & {\n    __layoutProps?: ImageBaseProps\n    __getLayoutSize?: () => LayoutSize\n  },\n  props: Partial<ImageBaseProps>\n): void {\n  // Attach layout props for layout calculations\n  image.__layoutProps = props as ImageBaseProps\n\n  // Attach dynamic size provider\n  // Headless images return minimal size 0.01x0.01 (participates in alignment, not spacing)\n  // Layout-aware images return actual display dimensions\n  image.__getLayoutSize = () => {\n    if (image.__layoutProps?.headless) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: image.displayWidth,\n      height: image.displayHeight,\n    }\n  }\n}\n"],"names":[],"mappings":";;AAaO,SAAS,kBACd,OAIA,OACM;AAEN,QAAM,gBAAgB;AAKtB,QAAM,kBAAkB,MAAM;AAC5B,QAAI,MAAM,eAAe,UAAU;AACjC,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,IAAA;AAAA,EAElB;AACF;;"}

package/dist/components/creators/createImageLayout.d.ts

@@ -0,0 +1,17 @@
+import { LayoutSize } from '../../layout/index';
+import { ImageBaseProps } from '../primitives/image';
+/**
+ * Layout creator for Image components
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Creates layout infrastructure for an Image component
+ * Attaches layout props and dynamic size provider
+ * @param image - Phaser Image object
+ * @param props - Image props including layout
+ */
+export declare function createImageLayout(image: Phaser.GameObjects.Image & {
+    __layoutProps?: ImageBaseProps;
+    __getLayoutSize?: () => LayoutSize;
+}, props: Partial<ImageBaseProps>): void;
+//# sourceMappingURL=createImageLayout.d.ts.map

package/dist/components/creators/createImageLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageLayout.d.ts","sourceRoot":"","sources":["../../../src/components/creators/createImageLayout.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEzD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,KAAK,GAAG;IAChC,aAAa,CAAC,EAAE,cAAc,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,UAAU,CAAA;CACnC,EACD,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAC7B,IAAI,CAgBN"}

package/dist/components/creators/createImageLayout.js

@@ -0,0 +1,16 @@
+function createImageLayout(image, props) {
+  image.__layoutProps = props;
+  image.__getLayoutSize = () => {
+    if (image.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: image.displayWidth,
+      height: image.displayHeight
+    };
+  };
+}
+export {
+  createImageLayout
+};
+//# sourceMappingURL=createImageLayout.js.map

package/dist/components/creators/createImageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageLayout.js","sources":["../../../src/components/creators/createImageLayout.ts"],"sourcesContent":["/**\n * Layout creator for Image components\n */\nimport type * as Phaser from 'phaser'\nimport type { LayoutSize } from '../../layout/index'\nimport type { ImageBaseProps } from '../primitives/image'\n\n/**\n * Creates layout infrastructure for an Image component\n * Attaches layout props and dynamic size provider\n * @param image - Phaser Image object\n * @param props - Image props including layout\n */\nexport function createImageLayout(\n  image: Phaser.GameObjects.Image & {\n    __layoutProps?: ImageBaseProps\n    __getLayoutSize?: () => LayoutSize\n  },\n  props: Partial<ImageBaseProps>\n): void {\n  // Attach layout props for layout calculations\n  image.__layoutProps = props as ImageBaseProps\n\n  // Attach dynamic size provider\n  // Headless images return minimal size 0.01x0.01 (participates in alignment, not spacing)\n  // Layout-aware images return actual display dimensions\n  image.__getLayoutSize = () => {\n    if (image.__layoutProps?.headless) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: image.displayWidth,\n      height: image.displayHeight,\n    }\n  }\n}\n"],"names":[],"mappings":"AAaO,SAAS,kBACd,OAIA,OACM;AAEN,QAAM,gBAAgB;AAKtB,QAAM,kBAAkB,MAAM;AAC5B,QAAI,MAAM,eAAe,UAAU;AACjC,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,IAAA;AAAA,EAElB;AACF;"}

package/dist/components/creators/createLayout.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+require("../../layout/phaser-layout-bridge.cjs");
+function createLayout(container, props) {
+  container.__layoutProps = props;
+  container.__getLayoutSize = () => {
+    const currentProps = container.__layoutProps ?? props;
+    const children = container.list;
+    const direction = currentProps.direction ?? "column";
+    const paddingRaw = currentProps.padding ?? {};
+    const padding = typeof paddingRaw === "number" ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw } : paddingRaw;
+    const paddingLeft = padding.left ?? 0;
+    const paddingTop = padding.top ?? 0;
+    const paddingRight = padding.right ?? 0;
+    const paddingBottom = padding.bottom ?? 0;
+    const gapNormalized = jsxCore.normalizeGap(currentProps.gap);
+    let maxWidth = 0;
+    let maxHeight = 0;
+    let totalMainSize = 0;
+    let childCount = 0;
+    for (const child of children) {
+      if (child.__isBackground) {
+        continue;
+      }
+      childCount++;
+      const marginRaw = child.__layoutProps?.margin ?? {};
+      const margin = typeof marginRaw === "number" ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw } : marginRaw;
+      const marginTop = margin.top ?? 0;
+      const marginBottom = margin.bottom ?? 0;
+      const marginLeft = margin.left ?? 0;
+      const marginRight = margin.right ?? 0;
+      const childSize = jsxCore.getChildSize(child);
+      if (direction === "row") {
+        totalMainSize += marginLeft + childSize.width + marginRight;
+        const childTotalHeight = marginTop + childSize.height + marginBottom;
+        maxHeight = Math.max(maxHeight, childTotalHeight);
+      } else {
+        const childTotalWidth = marginLeft + childSize.width + marginRight;
+        maxWidth = Math.max(maxWidth, childTotalWidth);
+        totalMainSize += marginTop + childSize.height + marginBottom;
+      }
+    }
+    if (childCount > 1) {
+      const gapValue = direction === "row" ? gapNormalized.horizontal : gapNormalized.vertical;
+      totalMainSize += gapValue * (childCount - 1);
+    }
+    const defaultWidth = direction === "row" ? totalMainSize + paddingLeft + paddingRight : maxWidth + paddingLeft + paddingRight;
+    const defaultHeight = direction === "row" ? maxHeight + paddingTop + paddingBottom : totalMainSize + paddingTop + paddingBottom;
+    const parsedWidth = jsxCore.parseSize(currentProps.width);
+    const finalWidth = jsxCore.resolveSize(parsedWidth, void 0, defaultWidth);
+    const parsedHeight = jsxCore.parseSize(currentProps.height);
+    const finalHeight = jsxCore.resolveSize(parsedHeight, void 0, defaultHeight);
+    return {
+      width: finalWidth,
+      height: finalHeight
+    };
+  };
+}
+exports.createLayout = createLayout;
+//# sourceMappingURL=createLayout.cjs.map

package/dist/components/creators/createLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLayout.cjs","sources":["../../../src/components/creators/createLayout.ts"],"sourcesContent":["/**\n * Layout creator for initializing container layout system\n */\nimport type { BackgroundProps, LayoutProps, TransformProps } from '../../core-props'\nimport { normalizeGap } from '../../core-props'\nimport {\n  getChildSize,\n  parseSize,\n  resolveSize,\n  type GameObjectWithLayout,\n  type LayoutSize,\n} from '../../layout/index'\n\n/**\n * Creates layout infrastructure for a container\n * Attaches layout props and dynamic size provider\n * @param container - Phaser container\n * @param props - Layout props\n */\nexport function createLayout(\n  container: Phaser.GameObjects.Container & {\n    __layoutProps?: LayoutProps & BackgroundProps & TransformProps\n    __getLayoutSize?: () => LayoutSize\n    width?: number | string\n    height?: number | string\n  },\n  props: Partial<LayoutProps & BackgroundProps & TransformProps>\n): void {\n  // Attach layout props for layout calculations (includes visible for display control)\n  container.__layoutProps = props as LayoutProps & BackgroundProps & TransformProps\n\n  // Attach dynamic size provider\n  // This returns the calculated dimensions after layout\n  container.__getLayoutSize = () => {\n    const currentProps =\n      container.__layoutProps ?? (props as LayoutProps & BackgroundProps & TransformProps)\n    const children = container.list as GameObjectWithLayout[]\n\n    const direction = currentProps.direction ?? 'column'\n    const paddingRaw = currentProps.padding ?? {}\n    const padding =\n      typeof paddingRaw === 'number'\n        ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw }\n        : paddingRaw\n    const paddingLeft = padding.left ?? 0\n    const paddingTop = padding.top ?? 0\n    const paddingRight = padding.right ?? 0\n    const paddingBottom = padding.bottom ?? 0\n    const gapNormalized = normalizeGap(currentProps.gap)\n\n    let maxWidth = 0\n    let maxHeight = 0\n    let totalMainSize = 0\n\n    // Count non-background children\n    let childCount = 0\n\n    for (const child of children) {\n      if (child.__isBackground) {\n        continue\n      }\n\n      childCount++\n\n      const marginRaw = child.__layoutProps?.margin ?? {}\n      const margin =\n        typeof marginRaw === 'number'\n          ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw }\n          : marginRaw\n      const marginTop = margin.top ?? 0\n      const marginBottom = margin.bottom ?? 0\n      const marginLeft = margin.left ?? 0\n      const marginRight = margin.right ?? 0\n\n      const childSize = getChildSize(child)\n\n      if (direction === 'row') {\n        // Horizontal layout\n        totalMainSize += marginLeft + childSize.width + marginRight\n        const childTotalHeight = marginTop + childSize.height + marginBottom\n        maxHeight = Math.max(maxHeight, childTotalHeight)\n      } else {\n        // Vertical layout (column)\n        const childTotalWidth = marginLeft + childSize.width + marginRight\n        maxWidth = Math.max(maxWidth, childTotalWidth)\n        totalMainSize += marginTop + childSize.height + marginBottom\n      }\n    }\n\n    // Add gaps to total main size\n    if (childCount > 1) {\n      const gapValue = direction === 'row' ? gapNormalized.horizontal : gapNormalized.vertical\n      totalMainSize += gapValue * (childCount - 1)\n    }\n\n    const defaultWidth =\n      direction === 'row'\n        ? totalMainSize + paddingLeft + paddingRight\n        : maxWidth + paddingLeft + paddingRight\n    const defaultHeight =\n      direction === 'row'\n        ? maxHeight + paddingTop + paddingBottom\n        : totalMainSize + paddingTop + paddingBottom\n\n    // Resolve width (handle percentage and auto)\n    const parsedWidth = parseSize(currentProps.width)\n    const finalWidth = resolveSize(parsedWidth, undefined, defaultWidth)\n\n    // Resolve height (handle percentage and auto)\n    const parsedHeight = parseSize(currentProps.height)\n    const finalHeight = resolveSize(parsedHeight, undefined, defaultHeight)\n\n    return {\n      width: finalWidth,\n      height: finalHeight,\n    }\n  }\n}\n"],"names":["normalizeGap","getChildSize","parseSize","resolveSize"],"mappings":";;;;AAmBO,SAAS,aACd,WAMA,OACM;AAEN,YAAU,gBAAgB;AAI1B,YAAU,kBAAkB,MAAM;AAChC,UAAM,eACJ,UAAU,iBAAkB;AAC9B,UAAM,WAAW,UAAU;AAE3B,UAAM,YAAY,aAAa,aAAa;AAC5C,UAAM,aAAa,aAAa,WAAW,CAAA;AAC3C,UAAM,UACJ,OAAO,eAAe,WAClB,EAAE,MAAM,YAAY,KAAK,YAAY,OAAO,YAAY,QAAQ,eAChE;AACN,UAAM,cAAc,QAAQ,QAAQ;AACpC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,eAAe,QAAQ,SAAS;AACtC,UAAM,gBAAgB,QAAQ,UAAU;AACxC,UAAM,gBAAgBA,QAAAA,aAAa,aAAa,GAAG;AAEnD,QAAI,WAAW;AACf,QAAI,YAAY;AAChB,QAAI,gBAAgB;AAGpB,QAAI,aAAa;AAEjB,eAAW,SAAS,UAAU;AAC5B,UAAI,MAAM,gBAAgB;AACxB;AAAA,MACF;AAEA;AAEA,YAAM,YAAY,MAAM,eAAe,UAAU,CAAA;AACjD,YAAM,SACJ,OAAO,cAAc,WACjB,EAAE,KAAK,WAAW,OAAO,WAAW,QAAQ,WAAW,MAAM,cAC7D;AACN,YAAM,YAAY,OAAO,OAAO;AAChC,YAAM,eAAe,OAAO,UAAU;AACtC,YAAM,aAAa,OAAO,QAAQ;AAClC,YAAM,cAAc,OAAO,SAAS;AAEpC,YAAM,YAAYC,QAAAA,aAAa,KAAK;AAEpC,UAAI,cAAc,OAAO;AAEvB,yBAAiB,aAAa,UAAU,QAAQ;AAChD,cAAM,mBAAmB,YAAY,UAAU,SAAS;AACxD,oBAAY,KAAK,IAAI,WAAW,gBAAgB;AAAA,MAClD,OAAO;AAEL,cAAM,kBAAkB,aAAa,UAAU,QAAQ;AACvD,mBAAW,KAAK,IAAI,UAAU,eAAe;AAC7C,yBAAiB,YAAY,UAAU,SAAS;AAAA,MAClD;AAAA,IACF;AAGA,QAAI,aAAa,GAAG;AAClB,YAAM,WAAW,cAAc,QAAQ,cAAc,aAAa,cAAc;AAChF,uBAAiB,YAAY,aAAa;AAAA,IAC5C;AAEA,UAAM,eACJ,cAAc,QACV,gBAAgB,cAAc,eAC9B,WAAW,cAAc;AAC/B,UAAM,gBACJ,cAAc,QACV,YAAY,aAAa,gBACzB,gBAAgB,aAAa;AAGnC,UAAM,cAAcC,QAAAA,UAAU,aAAa,KAAK;AAChD,UAAM,aAAaC,QAAAA,YAAY,aAAa,QAAW,YAAY;AAGnE,UAAM,eAAeD,QAAAA,UAAU,aAAa,MAAM;AAClD,UAAM,cAAcC,QAAAA,YAAY,cAAc,QAAW,aAAa;AAEtE,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AACF;;"}

package/dist/components/creators/createLayout.d.ts

@@ -0,0 +1,15 @@
+import { BackgroundProps, LayoutProps, TransformProps } from '../../core-props';
+import { LayoutSize } from '../../layout/index';
+/**
+ * Creates layout infrastructure for a container
+ * Attaches layout props and dynamic size provider
+ * @param container - Phaser container
+ * @param props - Layout props
+ */
+export declare function createLayout(container: Phaser.GameObjects.Container & {
+    __layoutProps?: LayoutProps & BackgroundProps & TransformProps;
+    __getLayoutSize?: () => LayoutSize;
+    width?: number | string;
+    height?: number | string;
+}, props: Partial<LayoutProps & BackgroundProps & TransformProps>): void;
+//# sourceMappingURL=createLayout.d.ts.map

package/dist/components/creators/createLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLayout.d.ts","sourceRoot":"","sources":["../../../src/components/creators/createLayout.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEpF,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAE3B;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG;IACxC,aAAa,CAAC,EAAE,WAAW,GAAG,eAAe,GAAG,cAAc,CAAA;IAC9D,eAAe,CAAC,EAAE,MAAM,UAAU,CAAA;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACzB,EACD,KAAK,EAAE,OAAO,CAAC,WAAW,GAAG,eAAe,GAAG,cAAc,CAAC,GAC7D,IAAI,CA0FN"}

package/dist/components/creators/createLayout.js

@@ -0,0 +1,61 @@
+import { normalizeGap, getChildSize, parseSize, resolveSize } from "@number10/jsx-core";
+import "../../layout/phaser-layout-bridge.js";
+function createLayout(container, props) {
+  container.__layoutProps = props;
+  container.__getLayoutSize = () => {
+    const currentProps = container.__layoutProps ?? props;
+    const children = container.list;
+    const direction = currentProps.direction ?? "column";
+    const paddingRaw = currentProps.padding ?? {};
+    const padding = typeof paddingRaw === "number" ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw } : paddingRaw;
+    const paddingLeft = padding.left ?? 0;
+    const paddingTop = padding.top ?? 0;
+    const paddingRight = padding.right ?? 0;
+    const paddingBottom = padding.bottom ?? 0;
+    const gapNormalized = normalizeGap(currentProps.gap);
+    let maxWidth = 0;
+    let maxHeight = 0;
+    let totalMainSize = 0;
+    let childCount = 0;
+    for (const child of children) {
+      if (child.__isBackground) {
+        continue;
+      }
+      childCount++;
+      const marginRaw = child.__layoutProps?.margin ?? {};
+      const margin = typeof marginRaw === "number" ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw } : marginRaw;
+      const marginTop = margin.top ?? 0;
+      const marginBottom = margin.bottom ?? 0;
+      const marginLeft = margin.left ?? 0;
+      const marginRight = margin.right ?? 0;
+      const childSize = getChildSize(child);
+      if (direction === "row") {
+        totalMainSize += marginLeft + childSize.width + marginRight;
+        const childTotalHeight = marginTop + childSize.height + marginBottom;
+        maxHeight = Math.max(maxHeight, childTotalHeight);
+      } else {
+        const childTotalWidth = marginLeft + childSize.width + marginRight;
+        maxWidth = Math.max(maxWidth, childTotalWidth);
+        totalMainSize += marginTop + childSize.height + marginBottom;
+      }
+    }
+    if (childCount > 1) {
+      const gapValue = direction === "row" ? gapNormalized.horizontal : gapNormalized.vertical;
+      totalMainSize += gapValue * (childCount - 1);
+    }
+    const defaultWidth = direction === "row" ? totalMainSize + paddingLeft + paddingRight : maxWidth + paddingLeft + paddingRight;
+    const defaultHeight = direction === "row" ? maxHeight + paddingTop + paddingBottom : totalMainSize + paddingTop + paddingBottom;
+    const parsedWidth = parseSize(currentProps.width);
+    const finalWidth = resolveSize(parsedWidth, void 0, defaultWidth);
+    const parsedHeight = parseSize(currentProps.height);
+    const finalHeight = resolveSize(parsedHeight, void 0, defaultHeight);
+    return {
+      width: finalWidth,
+      height: finalHeight
+    };
+  };
+}
+export {
+  createLayout
+};
+//# sourceMappingURL=createLayout.js.map

package/dist/components/creators/createLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLayout.js","sources":["../../../src/components/creators/createLayout.ts"],"sourcesContent":["/**\n * Layout creator for initializing container layout system\n */\nimport type { BackgroundProps, LayoutProps, TransformProps } from '../../core-props'\nimport { normalizeGap } from '../../core-props'\nimport {\n  getChildSize,\n  parseSize,\n  resolveSize,\n  type GameObjectWithLayout,\n  type LayoutSize,\n} from '../../layout/index'\n\n/**\n * Creates layout infrastructure for a container\n * Attaches layout props and dynamic size provider\n * @param container - Phaser container\n * @param props - Layout props\n */\nexport function createLayout(\n  container: Phaser.GameObjects.Container & {\n    __layoutProps?: LayoutProps & BackgroundProps & TransformProps\n    __getLayoutSize?: () => LayoutSize\n    width?: number | string\n    height?: number | string\n  },\n  props: Partial<LayoutProps & BackgroundProps & TransformProps>\n): void {\n  // Attach layout props for layout calculations (includes visible for display control)\n  container.__layoutProps = props as LayoutProps & BackgroundProps & TransformProps\n\n  // Attach dynamic size provider\n  // This returns the calculated dimensions after layout\n  container.__getLayoutSize = () => {\n    const currentProps =\n      container.__layoutProps ?? (props as LayoutProps & BackgroundProps & TransformProps)\n    const children = container.list as GameObjectWithLayout[]\n\n    const direction = currentProps.direction ?? 'column'\n    const paddingRaw = currentProps.padding ?? {}\n    const padding =\n      typeof paddingRaw === 'number'\n        ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw }\n        : paddingRaw\n    const paddingLeft = padding.left ?? 0\n    const paddingTop = padding.top ?? 0\n    const paddingRight = padding.right ?? 0\n    const paddingBottom = padding.bottom ?? 0\n    const gapNormalized = normalizeGap(currentProps.gap)\n\n    let maxWidth = 0\n    let maxHeight = 0\n    let totalMainSize = 0\n\n    // Count non-background children\n    let childCount = 0\n\n    for (const child of children) {\n      if (child.__isBackground) {\n        continue\n      }\n\n      childCount++\n\n      const marginRaw = child.__layoutProps?.margin ?? {}\n      const margin =\n        typeof marginRaw === 'number'\n          ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw }\n          : marginRaw\n      const marginTop = margin.top ?? 0\n      const marginBottom = margin.bottom ?? 0\n      const marginLeft = margin.left ?? 0\n      const marginRight = margin.right ?? 0\n\n      const childSize = getChildSize(child)\n\n      if (direction === 'row') {\n        // Horizontal layout\n        totalMainSize += marginLeft + childSize.width + marginRight\n        const childTotalHeight = marginTop + childSize.height + marginBottom\n        maxHeight = Math.max(maxHeight, childTotalHeight)\n      } else {\n        // Vertical layout (column)\n        const childTotalWidth = marginLeft + childSize.width + marginRight\n        maxWidth = Math.max(maxWidth, childTotalWidth)\n        totalMainSize += marginTop + childSize.height + marginBottom\n      }\n    }\n\n    // Add gaps to total main size\n    if (childCount > 1) {\n      const gapValue = direction === 'row' ? gapNormalized.horizontal : gapNormalized.vertical\n      totalMainSize += gapValue * (childCount - 1)\n    }\n\n    const defaultWidth =\n      direction === 'row'\n        ? totalMainSize + paddingLeft + paddingRight\n        : maxWidth + paddingLeft + paddingRight\n    const defaultHeight =\n      direction === 'row'\n        ? maxHeight + paddingTop + paddingBottom\n        : totalMainSize + paddingTop + paddingBottom\n\n    // Resolve width (handle percentage and auto)\n    const parsedWidth = parseSize(currentProps.width)\n    const finalWidth = resolveSize(parsedWidth, undefined, defaultWidth)\n\n    // Resolve height (handle percentage and auto)\n    const parsedHeight = parseSize(currentProps.height)\n    const finalHeight = resolveSize(parsedHeight, undefined, defaultHeight)\n\n    return {\n      width: finalWidth,\n      height: finalHeight,\n    }\n  }\n}\n"],"names":[],"mappings":";;AAmBO,SAAS,aACd,WAMA,OACM;AAEN,YAAU,gBAAgB;AAI1B,YAAU,kBAAkB,MAAM;AAChC,UAAM,eACJ,UAAU,iBAAkB;AAC9B,UAAM,WAAW,UAAU;AAE3B,UAAM,YAAY,aAAa,aAAa;AAC5C,UAAM,aAAa,aAAa,WAAW,CAAA;AAC3C,UAAM,UACJ,OAAO,eAAe,WAClB,EAAE,MAAM,YAAY,KAAK,YAAY,OAAO,YAAY,QAAQ,eAChE;AACN,UAAM,cAAc,QAAQ,QAAQ;AACpC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,eAAe,QAAQ,SAAS;AACtC,UAAM,gBAAgB,QAAQ,UAAU;AACxC,UAAM,gBAAgB,aAAa,aAAa,GAAG;AAEnD,QAAI,WAAW;AACf,QAAI,YAAY;AAChB,QAAI,gBAAgB;AAGpB,QAAI,aAAa;AAEjB,eAAW,SAAS,UAAU;AAC5B,UAAI,MAAM,gBAAgB;AACxB;AAAA,MACF;AAEA;AAEA,YAAM,YAAY,MAAM,eAAe,UAAU,CAAA;AACjD,YAAM,SACJ,OAAO,cAAc,WACjB,EAAE,KAAK,WAAW,OAAO,WAAW,QAAQ,WAAW,MAAM,cAC7D;AACN,YAAM,YAAY,OAAO,OAAO;AAChC,YAAM,eAAe,OAAO,UAAU;AACtC,YAAM,aAAa,OAAO,QAAQ;AAClC,YAAM,cAAc,OAAO,SAAS;AAEpC,YAAM,YAAY,aAAa,KAAK;AAEpC,UAAI,cAAc,OAAO;AAEvB,yBAAiB,aAAa,UAAU,QAAQ;AAChD,cAAM,mBAAmB,YAAY,UAAU,SAAS;AACxD,oBAAY,KAAK,IAAI,WAAW,gBAAgB;AAAA,MAClD,OAAO;AAEL,cAAM,kBAAkB,aAAa,UAAU,QAAQ;AACvD,mBAAW,KAAK,IAAI,UAAU,eAAe;AAC7C,yBAAiB,YAAY,UAAU,SAAS;AAAA,MAClD;AAAA,IACF;AAGA,QAAI,aAAa,GAAG;AAClB,YAAM,WAAW,cAAc,QAAQ,cAAc,aAAa,cAAc;AAChF,uBAAiB,YAAY,aAAa;AAAA,IAC5C;AAEA,UAAM,eACJ,cAAc,QACV,gBAAgB,cAAc,eAC9B,WAAW,cAAc;AAC/B,UAAM,gBACJ,cAAc,QACV,YAAY,aAAa,gBACzB,gBAAgB,aAAa;AAGnC,UAAM,cAAc,UAAU,aAAa,KAAK;AAChD,UAAM,aAAa,YAAY,aAAa,QAAW,YAAY;AAGnE,UAAM,eAAe,UAAU,aAAa,MAAM;AAClD,UAAM,cAAc,YAAY,cAAc,QAAW,aAAa;AAEtE,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EAEZ;AACF;"}

package/dist/components/creators/createNineSliceLayout.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createNineSliceLayout(nineSlice, props) {
+  nineSlice.__layoutProps = props;
+  nineSlice.__getLayoutSize = () => {
+    if (nineSlice.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: nineSlice.width,
+      height: nineSlice.height
+    };
+  };
+}
+exports.createNineSliceLayout = createNineSliceLayout;
+//# sourceMappingURL=createNineSliceLayout.cjs.map

package/dist/components/creators/createNineSliceLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNineSliceLayout.cjs","sources":["../../../src/components/creators/createNineSliceLayout.ts"],"sourcesContent":["/**\n * Layout creator for NineSlice components\n */\nimport type * as Phaser from 'phaser'\nimport type { LayoutSize } from '../../layout/index'\nimport type { NineSliceBaseProps } from '../primitives/nineslice'\n\n/**\n * Creates layout infrastructure for a NineSlice component\n * Attaches layout props and dynamic size provider\n * @param nineSlice - Phaser NineSlice object\n * @param props - NineSlice props including layout\n */\nexport function createNineSliceLayout(\n  nineSlice: Phaser.GameObjects.NineSlice & {\n    __layoutProps?: NineSliceBaseProps\n    __getLayoutSize?: () => LayoutSize\n  },\n  props: Partial<NineSliceBaseProps>\n): void {\n  // Attach layout props for layout calculations\n  nineSlice.__layoutProps = props as NineSliceBaseProps\n\n  // Attach dynamic size provider using NineSlice dimensions.\n  // headless=true → report minimal size (same contract as headless Image),\n  // so the node renders but does not inflate parent layout metrics.\n  nineSlice.__getLayoutSize = () => {\n    if (nineSlice.__layoutProps?.headless) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: nineSlice.width,\n      height: nineSlice.height,\n    }\n  }\n}\n"],"names":[],"mappings":";;AAaO,SAAS,sBACd,WAIA,OACM;AAEN,YAAU,gBAAgB;AAK1B,YAAU,kBAAkB,MAAM;AAChC,QAAI,UAAU,eAAe,UAAU;AACrC,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,UAAU;AAAA,MACjB,QAAQ,UAAU;AAAA,IAAA;AAAA,EAEtB;AACF;;"}

package/dist/components/creators/createNineSliceLayout.d.ts

@@ -0,0 +1,17 @@
+import { LayoutSize } from '../../layout/index';
+import { NineSliceBaseProps } from '../primitives/nineslice';
+/**
+ * Layout creator for NineSlice components
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Creates layout infrastructure for a NineSlice component
+ * Attaches layout props and dynamic size provider
+ * @param nineSlice - Phaser NineSlice object
+ * @param props - NineSlice props including layout
+ */
+export declare function createNineSliceLayout(nineSlice: Phaser.GameObjects.NineSlice & {
+    __layoutProps?: NineSliceBaseProps;
+    __getLayoutSize?: () => LayoutSize;
+}, props: Partial<NineSliceBaseProps>): void;
+//# sourceMappingURL=createNineSliceLayout.d.ts.map

package/dist/components/creators/createNineSliceLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNineSliceLayout.d.ts","sourceRoot":"","sources":["../../../src/components/creators/createNineSliceLayout.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAEjE;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG;IACxC,aAAa,CAAC,EAAE,kBAAkB,CAAA;IAClC,eAAe,CAAC,EAAE,MAAM,UAAU,CAAA;CACnC,EACD,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC,GACjC,IAAI,CAgBN"}

package/dist/components/creators/createNineSliceLayout.js

@@ -0,0 +1,16 @@
+function createNineSliceLayout(nineSlice, props) {
+  nineSlice.__layoutProps = props;
+  nineSlice.__getLayoutSize = () => {
+    if (nineSlice.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: nineSlice.width,
+      height: nineSlice.height
+    };
+  };
+}
+export {
+  createNineSliceLayout
+};
+//# sourceMappingURL=createNineSliceLayout.js.map

package/dist/components/creators/createNineSliceLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createNineSliceLayout.js","sources":["../../../src/components/creators/createNineSliceLayout.ts"],"sourcesContent":["/**\n * Layout creator for NineSlice components\n */\nimport type * as Phaser from 'phaser'\nimport type { LayoutSize } from '../../layout/index'\nimport type { NineSliceBaseProps } from '../primitives/nineslice'\n\n/**\n * Creates layout infrastructure for a NineSlice component\n * Attaches layout props and dynamic size provider\n * @param nineSlice - Phaser NineSlice object\n * @param props - NineSlice props including layout\n */\nexport function createNineSliceLayout(\n  nineSlice: Phaser.GameObjects.NineSlice & {\n    __layoutProps?: NineSliceBaseProps\n    __getLayoutSize?: () => LayoutSize\n  },\n  props: Partial<NineSliceBaseProps>\n): void {\n  // Attach layout props for layout calculations\n  nineSlice.__layoutProps = props as NineSliceBaseProps\n\n  // Attach dynamic size provider using NineSlice dimensions.\n  // headless=true → report minimal size (same contract as headless Image),\n  // so the node renders but does not inflate parent layout metrics.\n  nineSlice.__getLayoutSize = () => {\n    if (nineSlice.__layoutProps?.headless) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: nineSlice.width,\n      height: nineSlice.height,\n    }\n  }\n}\n"],"names":[],"mappings":"AAaO,SAAS,sBACd,WAIA,OACM;AAEN,YAAU,gBAAgB;AAK1B,YAAU,kBAAkB,MAAM;AAChC,QAAI,UAAU,eAAe,UAAU;AACrC,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,UAAU;AAAA,MACjB,QAAQ,UAAU;AAAA,IAAA;AAAA,EAEtB;AACF;"}

package/dist/components/creators/createParticlesLayout.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createParticlesLayout(particles, props) {
+  particles.__layoutProps = props;
+  particles.__getLayoutSize = () => ({ width: 0.01, height: 0.01 });
+}
+exports.createParticlesLayout = createParticlesLayout;
+//# sourceMappingURL=createParticlesLayout.cjs.map

package/dist/components/creators/createParticlesLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createParticlesLayout.cjs","sources":["../../../src/components/creators/createParticlesLayout.ts"],"sourcesContent":["/**\n * Layout creator for Particles components\n */\nimport type { LayoutSize } from '../../layout/index'\nimport type { ParticlesHandle } from '../../particles/particle-types'\nimport type { ParticlesBaseProps } from '../primitives/particles'\n\n/**\n * Creates layout infrastructure for a Particles component\n * Particles are always headless (minimal size)\n * @param particles - Phaser ParticleEmitterManager\n * @param props - Particle props\n */\nexport function createParticlesLayout(\n  particles: ParticlesHandle & {\n    __layoutProps?: ParticlesBaseProps\n    __getLayoutSize?: () => LayoutSize\n  },\n  props: Partial<ParticlesBaseProps>\n): void {\n  particles.__layoutProps = props as ParticlesBaseProps\n  particles.__getLayoutSize = () => ({ width: 0.01, height: 0.01 })\n}\n"],"names":[],"mappings":";;AAaO,SAAS,sBACd,WAIA,OACM;AACN,YAAU,gBAAgB;AAC1B,YAAU,kBAAkB,OAAO,EAAE,OAAO,MAAM,QAAQ;AAC5D;;"}

package/dist/components/creators/createParticlesLayout.d.ts

@@ -0,0 +1,14 @@
+import { LayoutSize } from '../../layout/index';
+import { ParticlesHandle } from '../../particles/particle-types';
+import { ParticlesBaseProps } from '../primitives/particles';
+/**
+ * Creates layout infrastructure for a Particles component
+ * Particles are always headless (minimal size)
+ * @param particles - Phaser ParticleEmitterManager
+ * @param props - Particle props
+ */
+export declare function createParticlesLayout(particles: ParticlesHandle & {
+    __layoutProps?: ParticlesBaseProps;
+    __getLayoutSize?: () => LayoutSize;
+}, props: Partial<ParticlesBaseProps>): void;
+//# sourceMappingURL=createParticlesLayout.d.ts.map

package/dist/components/creators/createParticlesLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createParticlesLayout.d.ts","sourceRoot":"","sources":["../../../src/components/creators/createParticlesLayout.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AACrE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAEjE;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,eAAe,GAAG;IAC3B,aAAa,CAAC,EAAE,kBAAkB,CAAA;IAClC,eAAe,CAAC,EAAE,MAAM,UAAU,CAAA;CACnC,EACD,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC,GACjC,IAAI,CAGN"}

package/dist/components/creators/createParticlesLayout.js

@@ -0,0 +1,8 @@
+function createParticlesLayout(particles, props) {
+  particles.__layoutProps = props;
+  particles.__getLayoutSize = () => ({ width: 0.01, height: 0.01 });
+}
+export {
+  createParticlesLayout
+};
+//# sourceMappingURL=createParticlesLayout.js.map

package/dist/components/creators/createParticlesLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createParticlesLayout.js","sources":["../../../src/components/creators/createParticlesLayout.ts"],"sourcesContent":["/**\n * Layout creator for Particles components\n */\nimport type { LayoutSize } from '../../layout/index'\nimport type { ParticlesHandle } from '../../particles/particle-types'\nimport type { ParticlesBaseProps } from '../primitives/particles'\n\n/**\n * Creates layout infrastructure for a Particles component\n * Particles are always headless (minimal size)\n * @param particles - Phaser ParticleEmitterManager\n * @param props - Particle props\n */\nexport function createParticlesLayout(\n  particles: ParticlesHandle & {\n    __layoutProps?: ParticlesBaseProps\n    __getLayoutSize?: () => LayoutSize\n  },\n  props: Partial<ParticlesBaseProps>\n): void {\n  particles.__layoutProps = props as ParticlesBaseProps\n  particles.__getLayoutSize = () => ({ width: 0.01, height: 0.01 })\n}\n"],"names":[],"mappings":"AAaO,SAAS,sBACd,WAIA,OACM;AACN,YAAU,gBAAgB;AAC1B,YAAU,kBAAkB,OAAO,EAAE,OAAO,MAAM,QAAQ;AAC5D;"}

package/dist/components/creators/createPhaser.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+const signalsCore = require("@preact/signals-core");
+function normalizeVisible(visible) {
+  if (visible === void 0) return true;
+  if (typeof visible === "boolean") return visible;
+  if (visible === "visible") return true;
+  if (visible === "invisible" || visible === "none") return false;
+  return true;
+}
+function createPhaser(node, props) {
+  if (props.visible !== void 0) {
+    node.visible = normalizeVisible(props.visible);
+  }
+  if (props.depth !== void 0) {
+    node.setDepth(props.depth);
+  }
+  if (props.alpha !== void 0) {
+    const alpha = props.alpha;
+    if (jsxCore.isAnimatedSignal(alpha)) {
+      node.setAlpha(alpha.value);
+      const cleanup = signalsCore.effect(() => {
+        node.setAlpha(alpha.value);
+      });
+      if (!node.__signalEffects) {
+        node.__signalEffects = /* @__PURE__ */ new Map();
+      }
+      node.__signalEffects.set("alpha", cleanup);
+    } else {
+      node.setAlpha(alpha);
+    }
+  }
+}
+exports.createPhaser = createPhaser;
+//# sourceMappingURL=createPhaser.cjs.map

package/dist/components/creators/createPhaser.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPhaser.cjs","sources":["../../../src/components/creators/createPhaser.ts"],"sourcesContent":["/**\n * Creator for Phaser GameObject display properties\n *\n * Supports AnimatedSignal values — subscribes to signal changes on creation,\n * same as the patcher does via applyPhaserProps.\n */\nimport { isAnimatedSignal } from '@number10/jsx-core'\nimport { effect } from '@preact/signals-core'\nimport type { Display, PhaserProps, TransformProps } from '../../core-props'\n\ntype PhaserDisplayProps = Partial<TransformProps & PhaserProps & { visible?: boolean | Display }>\n\ninterface SignalEffectNode {\n  __signalEffects?: Map<string, () => void>\n}\n\nfunction normalizeVisible(visible: boolean | Display | undefined): boolean {\n  if (visible === undefined) return true\n  if (typeof visible === 'boolean') return visible\n  if (visible === 'visible') return true\n  if (visible === 'invisible' || visible === 'none') return false\n  return true\n}\n\nexport function createPhaser<\n  T extends {\n    visible: boolean\n    setDepth: (depth: number) => void\n    setAlpha: (alpha: number) => void\n  } & SignalEffectNode,\n>(node: T, props: PhaserDisplayProps): void {\n  // Visibility - supports boolean and Display type (from LayoutProps)\n  if (props.visible !== undefined) {\n    node.visible = normalizeVisible(props.visible)\n  }\n  if (props.depth !== undefined) {\n    node.setDepth(props.depth)\n  }\n  if (props.alpha !== undefined) {\n    const alpha = props.alpha\n    if (isAnimatedSignal(alpha)) {\n      node.setAlpha(alpha.value)\n      const cleanup = effect(() => {\n        node.setAlpha(alpha.value)\n      })\n      if (!node.__signalEffects) {\n        node.__signalEffects = new Map()\n      }\n      node.__signalEffects.set('alpha', cleanup)\n    } else {\n      node.setAlpha(alpha as number)\n    }\n  }\n}\n"],"names":["isAnimatedSignal","effect"],"mappings":";;;;AAgBA,SAAS,iBAAiB,SAAiD;AACzE,MAAI,YAAY,OAAW,QAAO;AAClC,MAAI,OAAO,YAAY,UAAW,QAAO;AACzC,MAAI,YAAY,UAAW,QAAO;AAClC,MAAI,YAAY,eAAe,YAAY,OAAQ,QAAO;AAC1D,SAAO;AACT;AAEO,SAAS,aAMd,MAAS,OAAiC;AAE1C,MAAI,MAAM,YAAY,QAAW;AAC/B,SAAK,UAAU,iBAAiB,MAAM,OAAO;AAAA,EAC/C;AACA,MAAI,MAAM,UAAU,QAAW;AAC7B,SAAK,SAAS,MAAM,KAAK;AAAA,EAC3B;AACA,MAAI,MAAM,UAAU,QAAW;AAC7B,UAAM,QAAQ,MAAM;AACpB,QAAIA,QAAAA,iBAAiB,KAAK,GAAG;AAC3B,WAAK,SAAS,MAAM,KAAK;AACzB,YAAM,UAAUC,YAAAA,OAAO,MAAM;AAC3B,aAAK,SAAS,MAAM,KAAK;AAAA,MAC3B,CAAC;AACD,UAAI,CAAC,KAAK,iBAAiB;AACzB,aAAK,sCAAsB,IAAA;AAAA,MAC7B;AACA,WAAK,gBAAgB,IAAI,SAAS,OAAO;AAAA,IAC3C,OAAO;AACL,WAAK,SAAS,KAAe;AAAA,IAC/B;AAAA,EACF;AACF;;"}

package/dist/components/creators/createPhaser.d.ts

@@ -0,0 +1,14 @@
+import { Display, PhaserProps, TransformProps } from '../../core-props';
+type PhaserDisplayProps = Partial<TransformProps & PhaserProps & {
+    visible?: boolean | Display;
+}>;
+interface SignalEffectNode {
+    __signalEffects?: Map<string, () => void>;
+}
+export declare function createPhaser<T extends {
+    visible: boolean;
+    setDepth: (depth: number) => void;
+    setAlpha: (alpha: number) => void;
+} & SignalEffectNode>(node: T, props: PhaserDisplayProps): void;
+export {};
+//# sourceMappingURL=createPhaser.d.ts.map

package/dist/components/creators/createPhaser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPhaser.d.ts","sourceRoot":"","sources":["../../../src/components/creators/createPhaser.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAE5E,KAAK,kBAAkB,GAAG,OAAO,CAAC,cAAc,GAAG,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAAE,CAAC,CAAA;AAEjG,UAAU,gBAAgB;IACxB,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAA;CAC1C;AAUD,wBAAgB,YAAY,CAC1B,CAAC,SAAS;IACR,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,GAAG,gBAAgB,EACpB,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAuB1C"}

package/dist/components/creators/createPhaser.js

@@ -0,0 +1,36 @@
+import { isAnimatedSignal } from "@number10/jsx-core";
+import { effect } from "@preact/signals-core";
+function normalizeVisible(visible) {
+  if (visible === void 0) return true;
+  if (typeof visible === "boolean") return visible;
+  if (visible === "visible") return true;
+  if (visible === "invisible" || visible === "none") return false;
+  return true;
+}
+function createPhaser(node, props) {
+  if (props.visible !== void 0) {
+    node.visible = normalizeVisible(props.visible);
+  }
+  if (props.depth !== void 0) {
+    node.setDepth(props.depth);
+  }
+  if (props.alpha !== void 0) {
+    const alpha = props.alpha;
+    if (isAnimatedSignal(alpha)) {
+      node.setAlpha(alpha.value);
+      const cleanup = effect(() => {
+        node.setAlpha(alpha.value);
+      });
+      if (!node.__signalEffects) {
+        node.__signalEffects = /* @__PURE__ */ new Map();
+      }
+      node.__signalEffects.set("alpha", cleanup);
+    } else {
+      node.setAlpha(alpha);
+    }
+  }
+}
+export {
+  createPhaser
+};
+//# sourceMappingURL=createPhaser.js.map

package/dist/components/creators/createPhaser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPhaser.js","sources":["../../../src/components/creators/createPhaser.ts"],"sourcesContent":["/**\n * Creator for Phaser GameObject display properties\n *\n * Supports AnimatedSignal values — subscribes to signal changes on creation,\n * same as the patcher does via applyPhaserProps.\n */\nimport { isAnimatedSignal } from '@number10/jsx-core'\nimport { effect } from '@preact/signals-core'\nimport type { Display, PhaserProps, TransformProps } from '../../core-props'\n\ntype PhaserDisplayProps = Partial<TransformProps & PhaserProps & { visible?: boolean | Display }>\n\ninterface SignalEffectNode {\n  __signalEffects?: Map<string, () => void>\n}\n\nfunction normalizeVisible(visible: boolean | Display | undefined): boolean {\n  if (visible === undefined) return true\n  if (typeof visible === 'boolean') return visible\n  if (visible === 'visible') return true\n  if (visible === 'invisible' || visible === 'none') return false\n  return true\n}\n\nexport function createPhaser<\n  T extends {\n    visible: boolean\n    setDepth: (depth: number) => void\n    setAlpha: (alpha: number) => void\n  } & SignalEffectNode,\n>(node: T, props: PhaserDisplayProps): void {\n  // Visibility - supports boolean and Display type (from LayoutProps)\n  if (props.visible !== undefined) {\n    node.visible = normalizeVisible(props.visible)\n  }\n  if (props.depth !== undefined) {\n    node.setDepth(props.depth)\n  }\n  if (props.alpha !== undefined) {\n    const alpha = props.alpha\n    if (isAnimatedSignal(alpha)) {\n      node.setAlpha(alpha.value)\n      const cleanup = effect(() => {\n        node.setAlpha(alpha.value)\n      })\n      if (!node.__signalEffects) {\n        node.__signalEffects = new Map()\n      }\n      node.__signalEffects.set('alpha', cleanup)\n    } else {\n      node.setAlpha(alpha as number)\n    }\n  }\n}\n"],"names":[],"mappings":";;AAgBA,SAAS,iBAAiB,SAAiD;AACzE,MAAI,YAAY,OAAW,QAAO;AAClC,MAAI,OAAO,YAAY,UAAW,QAAO;AACzC,MAAI,YAAY,UAAW,QAAO;AAClC,MAAI,YAAY,eAAe,YAAY,OAAQ,QAAO;AAC1D,SAAO;AACT;AAEO,SAAS,aAMd,MAAS,OAAiC;AAE1C,MAAI,MAAM,YAAY,QAAW;AAC/B,SAAK,UAAU,iBAAiB,MAAM,OAAO;AAAA,EAC/C;AACA,MAAI,MAAM,UAAU,QAAW;AAC7B,SAAK,SAAS,MAAM,KAAK;AAAA,EAC3B;AACA,MAAI,MAAM,UAAU,QAAW;AAC7B,UAAM,QAAQ,MAAM;AACpB,QAAI,iBAAiB,KAAK,GAAG;AAC3B,WAAK,SAAS,MAAM,KAAK;AACzB,YAAM,UAAU,OAAO,MAAM;AAC3B,aAAK,SAAS,MAAM,KAAK;AAAA,MAC3B,CAAC;AACD,UAAI,CAAC,KAAK,iBAAiB;AACzB,aAAK,sCAAsB,IAAA;AAAA,MAC7B;AACA,WAAK,gBAAgB,IAAI,SAAS,OAAO;AAAA,IAC3C,OAAO;AACL,WAAK,SAAS,KAAe;AAAA,IAC/B;AAAA,EACF;AACF;"}

package/dist/components/creators/createSpriteLayout.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createSpriteLayout(sprite, props) {
+  sprite.__layoutProps = props;
+  sprite.__getLayoutSize = () => {
+    return { width: 0.01, height: 0.01 };
+  };
+}
+exports.createSpriteLayout = createSpriteLayout;
+//# sourceMappingURL=createSpriteLayout.cjs.map