@number10/jsx-phaser 5.0.0

package/dist/components/primitives/sprite.js

@@ -0,0 +1,100 @@
+import { applyPhaserProps } from "../appliers/applyPhaser.js";
+import { applySpriteProps } from "../appliers/applySprite.js";
+import { applySpriteLayout } from "../appliers/applySpriteLayout.js";
+import { applyTransformProps } from "../appliers/applyTransform.js";
+import { createPhaser } from "../creators/createPhaser.js";
+import { createSpriteLayout } from "../creators/createSpriteLayout.js";
+import { resolveAnimatableNumber, createTransform } from "../creators/createTransform.js";
+const spriteCreator = (scene, props) => {
+  const sprite = scene.add.sprite(
+    resolveAnimatableNumber(props.x) ?? 0,
+    resolveAnimatableNumber(props.y) ?? 0,
+    props.texture,
+    props.frame
+  );
+  sprite.setOrigin(0.5, 0.5);
+  if (props.originX !== void 0 || props.originY !== void 0) {
+    sprite.setOrigin(props.originX ?? sprite.originX, props.originY ?? sprite.originY);
+  }
+  createTransform(sprite, props);
+  createPhaser(sprite, props);
+  if (props.tint !== void 0) {
+    sprite.setTint(props.tint);
+  }
+  if (props.displayWidth !== void 0 || props.displayHeight !== void 0) {
+    if (props.displayWidth !== void 0 && props.displayHeight !== void 0) {
+      const fit = props.fit ?? "fill";
+      const textureWidth = sprite.width;
+      const textureHeight = sprite.height;
+      if (textureWidth > 0 && textureHeight > 0) {
+        if (fit === "fill") {
+          sprite.setDisplaySize(props.displayWidth, props.displayHeight);
+        } else if (fit === "contain") {
+          const targetAspect = props.displayWidth / props.displayHeight;
+          const textureAspect = textureWidth / textureHeight;
+          const scale = targetAspect > textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
+          sprite.setScale(scale);
+        } else if (fit === "cover") {
+          const targetAspect = props.displayWidth / props.displayHeight;
+          const textureAspect = textureWidth / textureHeight;
+          const scale = targetAspect < textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
+          sprite.setScale(scale);
+        }
+      }
+    } else if (props.displayWidth !== void 0) {
+      const scale = props.displayWidth / sprite.width;
+      sprite.setScale(scale);
+    } else if (props.displayHeight !== void 0) {
+      const scale = props.displayHeight / sprite.height;
+      sprite.setScale(scale);
+    }
+  }
+  if (props.animationKey) {
+    if (sprite.scene && sprite.scene.anims.exists(props.animationKey)) {
+      sprite.anims.play({
+        key: props.animationKey,
+        repeat: props.loop ? -1 : 0,
+        repeatDelay: props.repeatDelay ?? 0
+      });
+    }
+  }
+  if (props.onAnimationStart) {
+    sprite.on("animationstart", (anim) => {
+      props.onAnimationStart?.(anim.key);
+    });
+  }
+  if (props.onAnimationComplete) {
+    sprite.on("animationcomplete", (anim) => {
+      props.onAnimationComplete?.(anim.key);
+    });
+  }
+  if (props.onAnimationRepeat) {
+    sprite.on("animationrepeat", (anim) => {
+      props.onAnimationRepeat?.(anim.key);
+    });
+  }
+  if (props.onAnimationUpdate) {
+    sprite.on(
+      "animationupdate",
+      (anim, frame) => {
+        props.onAnimationUpdate?.(anim.key, frame);
+      }
+    );
+  }
+  createSpriteLayout(sprite, props);
+  if (props.onReady) {
+    props.onReady(sprite);
+  }
+  return sprite;
+};
+const spritePatcher = (node, prev, next) => {
+  applyTransformProps(node, prev, next);
+  applyPhaserProps(node, prev, next);
+  applySpriteProps(node, prev, next);
+  applySpriteLayout(node, prev, next);
+};
+export {
+  spriteCreator,
+  spritePatcher
+};
+//# sourceMappingURL=sprite.js.map

package/dist/components/primitives/sprite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sprite.js","sources":["../../../src/components/primitives/sprite.ts"],"sourcesContent":["/**\n * Sprite component - Phaser Sprite GameObject (animated texture)\n * Status: IMPLEMENTED ✅\n *\n * Design Overview:\n * ================\n *\n * 1. Component Role: ANIMATED GAME OBJECTS\n *    Purpose: Display animated sprites in game scenes (characters, effects, particles)\n *    Phaser Type: Phaser.GameObjects.Sprite (animation-capable texture rendering)\n *    Characteristics:\n *    - Always headless (does not affect parent layout)\n *    - Supports Phaser Animation system\n *    - Free positioning with rotation/scale\n *\n * 2. Headless Behavior: MANDATORY ✅\n *    Decision: Sprites are ALWAYS headless (not configurable)\n *    Reasoning:\n *    - Sprites are game objects, not UI elements\n *    - Should NOT affect parent layout dimensions\n *    - Free positioning with full transform support (rotation, scale)\n *    Layout Impact: Returns minimal size (0.01x0.01) - participates in alignment only\n *    Use Cases:\n *    - ✅ Game characters, particles, effects, free-floating objects\n *    - ✅ Animated decorations, background elements\n *    - ❌ NOT for layout-based UIs (use Image component instead)\n *\n * 3. Layout Size Provider: MINIMAL SIZE ✅\n *    Implementation: Always returns { width: 0.01, height: 0.01 }\n *    Reasoning:\n *    - Sprites don't affect layout spacing\n *    - Minimal size allows alignment but no spacing impact\n *    - Simpler than getBounds() with same result\n *\n * 4. Animation System: PHASER ANIMATIONS ✅\n *    Features:\n *    - animationKey: Play pre-registered animation\n *    - loop: Repeat animation indefinitely\n *    - repeatDelay: Delay between animation repeats (ms)\n *    Callbacks:\n *    - onAnimationStart: Triggered when animation begins\n *    - onAnimationComplete: Triggered when animation ends\n *    - onAnimationRepeat: Triggered on each repeat\n *    - onAnimationUpdate: Triggered on each frame update\n *    Note: Animations must be pre-registered in Phaser AnimationManager\n *\n * 5. Texture & Sizing: LIKE IMAGE ✅\n *    Props:\n *    - texture: Texture key (required)\n *    - frame: Frame from atlas/spritesheet\n *    - tint: Color tint (0xRRGGBB)\n *    - displayWidth/displayHeight: Scale sprite to fit\n *    - fit: 'fill' | 'contain' | 'cover' (aspect ratio handling)\n *    Error Handling: Missing texture → Phaser default (white square)\n *\n * 6. Origin Behavior: CENTERED (0.5, 0.5) ✅\n *    Decision: Default origin (0.5, 0.5) - centered\n *    Reasoning:\n *    - Phaser sprite default\n *    - Natural for rotation/scale pivot\n *    - Game object semantics\n *    Override: Use originX/originY props for custom origin\n *\n * 7. Performance: SPRITE BATCHING ✅\n *    Strategy:\n *    - Leverages Phaser's sprite batching (WebGL)\n *    - Props that preserve batching: tint, alpha, scale, position\n *    - Props that break batching: custom shaders, blend modes (use sparingly)\n *    - Texture atlases strongly recommended for multiple sprites\n *\n * 8. Common Patterns:\n *    Character:\n *      <Sprite texture=\"player\" animationKey=\"walk\" loop={true} />\n *    Particle Effect:\n *      <Sprite texture=\"explosion\" animationKey=\"explode\" onAnimationComplete={destroy} />\n *    Scaled Sprite:\n *      <Sprite texture=\"coin\" displayWidth={32} displayHeight={32} fit=\"contain\" />\n *\n * Implementation Status:\n * ======================\n * [✅] Phaser Sprite creation with texture/frame support\n * [✅] Transform props (position, rotation, scale, alpha)\n * [✅] Layout system integration (always headless)\n * [✅] Origin handling (0.5, 0.5 default)\n * [✅] Display size with fit modes (contain/cover/fill)\n * [✅] Tint support\n * [✅] Animation system (play, loop, callbacks)\n * [✅] Texture and frame patching\n */\nimport type * as Phaser from 'phaser'\nimport type { LayoutProps, PhaserProps, TransformProps } from '../../core-props'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { PropsDefaultExtension } from '../../types'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applySpriteProps } from '../appliers/applySprite'\nimport { applySpriteLayout } from '../appliers/applySpriteLayout'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createSpriteLayout } from '../creators/createSpriteLayout'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\n/**\n * Base props for Sprite component\n */\nexport interface SpriteBaseProps extends TransformProps, PhaserProps, LayoutProps {\n  /** Texture key (loaded via Phaser's texture manager) */\n  texture: string\n\n  /** Optional frame from texture atlas or spritesheet */\n  frame?: string | number\n\n  /** Tint color applied to sprite (0xRRGGBB) */\n  tint?: number\n\n  /** Display width (scales sprite to fit) */\n  displayWidth?: number\n\n  /** Display height (scales sprite to fit) */\n  displayHeight?: number\n\n  /**\n   * How sprite should fit within bounds (if displayWidth/displayHeight set)\n   * - 'fill': Stretch to fill (default, may distort aspect ratio)\n   * - 'contain': Scale to fit within bounds, preserve aspect ratio\n   * - 'cover': Scale to cover bounds, preserve aspect ratio (may crop)\n   */\n  fit?: 'fill' | 'contain' | 'cover'\n\n  /** Animation key to play (pre-registered in Phaser AnimationManager) */\n  animationKey?: string\n\n  /** Loop animation (default: false) */\n  loop?: boolean\n\n  /** Delay between animation repeats in ms (default: 0) */\n  repeatDelay?: number\n\n  /** Callback when animation starts */\n  onAnimationStart?: (key: string) => void\n\n  /** Callback when animation completes */\n  onAnimationComplete?: (key: string) => void\n\n  /** Callback when animation repeats */\n  onAnimationRepeat?: (key: string) => void\n\n  /** Callback on each animation frame update */\n  onAnimationUpdate?: (key: string, frame: Phaser.Animations.AnimationFrame) => void\n\n  /** Origin X (0-1, default 0.5) */\n  originX?: number\n\n  /** Origin Y (0-1, default 0.5) */\n  originY?: number\n}\n\n/**\n * Props for Sprite component\n */\nexport interface SpriteProps\n  extends SpriteBaseProps, PropsDefaultExtension<Phaser.GameObjects.Sprite> {}\n\n/**\n * Sprite creator - creates a Phaser Sprite object with animations\n */\nexport const spriteCreator: HostCreator<'Sprite'> = (scene, props) => {\n  const sprite = scene.add.sprite(\n    resolveAnimatableNumber(props.x) ?? 0,\n    resolveAnimatableNumber(props.y) ?? 0,\n    props.texture,\n    props.frame\n  )\n\n  // Set origin - always centered (0.5, 0.5) for sprites\n  sprite.setOrigin(0.5, 0.5)\n\n  // Apply custom origin if specified\n  if (props.originX !== undefined || props.originY !== undefined) {\n    sprite.setOrigin(props.originX ?? sprite.originX, props.originY ?? sprite.originY)\n  }\n\n  // Apply transform props (scale, rotation)\n  createTransform(sprite, props)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  createPhaser(sprite, props)\n\n  // Apply sprite-specific props (tint, displaySize, fit)\n  if (props.tint !== undefined) {\n    sprite.setTint(props.tint)\n  }\n\n  // Apply displayWidth/displayHeight if specified\n  if (props.displayWidth !== undefined || props.displayHeight !== undefined) {\n    if (props.displayWidth !== undefined && props.displayHeight !== undefined) {\n      // Both specified - use fit mode\n      const fit = props.fit ?? 'fill'\n      const textureWidth = sprite.width\n      const textureHeight = sprite.height\n\n      if (textureWidth > 0 && textureHeight > 0) {\n        if (fit === 'fill') {\n          sprite.setDisplaySize(props.displayWidth, props.displayHeight)\n        } else if (fit === 'contain') {\n          const targetAspect = props.displayWidth / props.displayHeight\n          const textureAspect = textureWidth / textureHeight\n          const scale =\n            targetAspect > textureAspect\n              ? props.displayHeight / textureHeight\n              : props.displayWidth / textureWidth\n          sprite.setScale(scale)\n        } else if (fit === 'cover') {\n          const targetAspect = props.displayWidth / props.displayHeight\n          const textureAspect = textureWidth / textureHeight\n          const scale =\n            targetAspect < textureAspect\n              ? props.displayHeight / textureHeight\n              : props.displayWidth / textureWidth\n          sprite.setScale(scale)\n        }\n      }\n    } else if (props.displayWidth !== undefined) {\n      const scale = props.displayWidth / sprite.width\n      sprite.setScale(scale)\n    } else if (props.displayHeight !== undefined) {\n      const scale = props.displayHeight / sprite.height\n      sprite.setScale(scale)\n    }\n  }\n\n  // Setup animation system\n  // Only play if the animation is already registered in the AnimationManager.\n  // Calling `sprite.anims.play` with a missing key causes Phaser to log\n  // \"Missing animation: <key>\". Many examples register animations in a\n  // separate effect that may run after the Sprite is created, so avoid\n  // attempting to play until the animation actually exists.\n  if (props.animationKey) {\n    if (sprite.scene && sprite.scene.anims.exists(props.animationKey)) {\n      sprite.anims.play({\n        key: props.animationKey,\n        repeat: props.loop ? -1 : 0,\n        repeatDelay: props.repeatDelay ?? 0,\n      })\n    }\n  }\n\n  // Setup animation callbacks\n  if (props.onAnimationStart) {\n    sprite.on('animationstart', (anim: Phaser.Animations.Animation) => {\n      props.onAnimationStart?.(anim.key)\n    })\n  }\n\n  if (props.onAnimationComplete) {\n    sprite.on('animationcomplete', (anim: Phaser.Animations.Animation) => {\n      props.onAnimationComplete?.(anim.key)\n    })\n  }\n\n  if (props.onAnimationRepeat) {\n    sprite.on('animationrepeat', (anim: Phaser.Animations.Animation) => {\n      props.onAnimationRepeat?.(anim.key)\n    })\n  }\n\n  if (props.onAnimationUpdate) {\n    sprite.on(\n      'animationupdate',\n      (anim: Phaser.Animations.Animation, frame: Phaser.Animations.AnimationFrame) => {\n        props.onAnimationUpdate?.(anim.key, frame)\n      }\n    )\n  }\n\n  // Setup layout system (props and size provider)\n  createSpriteLayout(sprite, props)\n\n  // Call onReady callback if provided\n  if (props.onReady) {\n    props.onReady(sprite)\n  }\n\n  return sprite\n}\n\n/**\n * Sprite patcher - updates Sprite properties\n */\nexport const spritePatcher: HostPatcher<'Sprite'> = (node, prev, next) => {\n  // Apply transform props (position, rotation, scale)\n  applyTransformProps(node, prev, next)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  applyPhaserProps(node, prev, next)\n\n  // Apply sprite-specific props (texture, frame, tint, displaySize, fit, animations)\n  applySpriteProps(node, prev, next)\n\n  // Apply layout props and update size provider if needed\n  applySpriteLayout(node, prev, next)\n}\n"],"names":[],"mappings":";;;;;;;AAqKO,MAAM,gBAAuC,CAAC,OAAO,UAAU;AACpE,QAAM,SAAS,MAAM,IAAI;AAAA,IACvB,wBAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,wBAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAIR,SAAO,UAAU,KAAK,GAAG;AAGzB,MAAI,MAAM,YAAY,UAAa,MAAM,YAAY,QAAW;AAC9D,WAAO,UAAU,MAAM,WAAW,OAAO,SAAS,MAAM,WAAW,OAAO,OAAO;AAAA,EACnF;AAGA,kBAAgB,QAAQ,KAAK;AAG7B,eAAa,QAAQ,KAAK;AAG1B,MAAI,MAAM,SAAS,QAAW;AAC5B,WAAO,QAAQ,MAAM,IAAI;AAAA,EAC3B;AAGA,MAAI,MAAM,iBAAiB,UAAa,MAAM,kBAAkB,QAAW;AACzE,QAAI,MAAM,iBAAiB,UAAa,MAAM,kBAAkB,QAAW;AAEzE,YAAM,MAAM,MAAM,OAAO;AACzB,YAAM,eAAe,OAAO;AAC5B,YAAM,gBAAgB,OAAO;AAE7B,UAAI,eAAe,KAAK,gBAAgB,GAAG;AACzC,YAAI,QAAQ,QAAQ;AAClB,iBAAO,eAAe,MAAM,cAAc,MAAM,aAAa;AAAA,QAC/D,WAAW,QAAQ,WAAW;AAC5B,gBAAM,eAAe,MAAM,eAAe,MAAM;AAChD,gBAAM,gBAAgB,eAAe;AACrC,gBAAM,QACJ,eAAe,gBACX,MAAM,gBAAgB,gBACtB,MAAM,eAAe;AAC3B,iBAAO,SAAS,KAAK;AAAA,QACvB,WAAW,QAAQ,SAAS;AAC1B,gBAAM,eAAe,MAAM,eAAe,MAAM;AAChD,gBAAM,gBAAgB,eAAe;AACrC,gBAAM,QACJ,eAAe,gBACX,MAAM,gBAAgB,gBACtB,MAAM,eAAe;AAC3B,iBAAO,SAAS,KAAK;AAAA,QACvB;AAAA,MACF;AAAA,IACF,WAAW,MAAM,iBAAiB,QAAW;AAC3C,YAAM,QAAQ,MAAM,eAAe,OAAO;AAC1C,aAAO,SAAS,KAAK;AAAA,IACvB,WAAW,MAAM,kBAAkB,QAAW;AAC5C,YAAM,QAAQ,MAAM,gBAAgB,OAAO;AAC3C,aAAO,SAAS,KAAK;AAAA,IACvB;AAAA,EACF;AAQA,MAAI,MAAM,cAAc;AACtB,QAAI,OAAO,SAAS,OAAO,MAAM,MAAM,OAAO,MAAM,YAAY,GAAG;AACjE,aAAO,MAAM,KAAK;AAAA,QAChB,KAAK,MAAM;AAAA,QACX,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC1B,aAAa,MAAM,eAAe;AAAA,MAAA,CACnC;AAAA,IACH;AAAA,EACF;AAGA,MAAI,MAAM,kBAAkB;AAC1B,WAAO,GAAG,kBAAkB,CAAC,SAAsC;AACjE,YAAM,mBAAmB,KAAK,GAAG;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,MAAI,MAAM,qBAAqB;AAC7B,WAAO,GAAG,qBAAqB,CAAC,SAAsC;AACpE,YAAM,sBAAsB,KAAK,GAAG;AAAA,IACtC,CAAC;AAAA,EACH;AAEA,MAAI,MAAM,mBAAmB;AAC3B,WAAO,GAAG,mBAAmB,CAAC,SAAsC;AAClE,YAAM,oBAAoB,KAAK,GAAG;AAAA,IACpC,CAAC;AAAA,EACH;AAEA,MAAI,MAAM,mBAAmB;AAC3B,WAAO;AAAA,MACL;AAAA,MACA,CAAC,MAAmC,UAA4C;AAC9E,cAAM,oBAAoB,KAAK,KAAK,KAAK;AAAA,MAC3C;AAAA,IAAA;AAAA,EAEJ;AAGA,qBAAmB,QAAQ,KAAK;AAGhC,MAAI,MAAM,SAAS;AACjB,UAAM,QAAQ,MAAM;AAAA,EACtB;AAEA,SAAO;AACT;AAKO,MAAM,gBAAuC,CAAC,MAAM,MAAM,SAAS;AAExE,sBAAoB,MAAM,MAAM,IAAI;AAGpC,mBAAiB,MAAM,MAAM,IAAI;AAGjC,mBAAiB,MAAM,MAAM,IAAI;AAGjC,oBAAkB,MAAM,MAAM,IAAI;AACpC;"}

package/dist/components/primitives/text.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const applyPhaser = require("../appliers/applyPhaser.cjs");
+const applyText = require("../appliers/applyText.cjs");
+const applyTextLayout = require("../appliers/applyTextLayout.cjs");
+const applyTransform = require("../appliers/applyTransform.cjs");
+const createPhaser = require("../creators/createPhaser.cjs");
+const createTextLayout = require("../creators/createTextLayout.cjs");
+const createTransform = require("../creators/createTransform.cjs");
+const textCreator = (scene, props) => {
+  const text = scene.add.text(
+    createTransform.resolveAnimatableNumber(props.x) ?? 0,
+    createTransform.resolveAnimatableNumber(props.y) ?? 0,
+    props.text ?? "",
+    props.style
+  );
+  if (props.headless) {
+    text.setOrigin(0.5, 0.5);
+  } else {
+    text.setOrigin(0, 0);
+  }
+  const normalizedProps = { ...props };
+  if (props.headless) {
+    delete normalizedProps.padding;
+    delete normalizedProps.margin;
+    delete normalizedProps.gap;
+  } else {
+    if (normalizedProps.rotation !== void 0) {
+      delete normalizedProps.rotation;
+    }
+  }
+  createTransform.createTransform(text, normalizedProps);
+  createPhaser.createPhaser(text, normalizedProps);
+  applyText.applyTextProps(text, {}, normalizedProps);
+  createTextLayout.createTextLayout(text, normalizedProps);
+  return text;
+};
+const textPatcher = (node, prev, next) => {
+  if (prev.headless !== next.headless) {
+    if (next.headless) {
+      node.setOrigin(0.5, 0.5);
+    } else {
+      node.setOrigin(0, 0);
+    }
+  }
+  const normalizedPrev = { ...prev };
+  const normalizedNext = { ...next };
+  if (next.headless) {
+    delete normalizedNext.padding;
+    delete normalizedNext.margin;
+    delete normalizedNext.gap;
+  } else {
+    if (normalizedNext.rotation !== void 0) {
+      delete normalizedNext.rotation;
+    }
+  }
+  if (prev.headless) {
+    delete normalizedPrev.padding;
+    delete normalizedPrev.margin;
+    delete normalizedPrev.gap;
+  } else {
+    if (normalizedPrev.rotation !== void 0) {
+      delete normalizedPrev.rotation;
+    }
+  }
+  applyTransform.applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaser.applyPhaserProps(node, normalizedPrev, normalizedNext);
+  applyText.applyTextProps(node, normalizedPrev, normalizedNext);
+  applyTextLayout.applyTextLayout(node, normalizedPrev, normalizedNext);
+};
+exports.textCreator = textCreator;
+exports.textPatcher = textPatcher;
+//# sourceMappingURL=text.cjs.map

package/dist/components/primitives/text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.cjs","sources":["../../../src/components/primitives/text.ts"],"sourcesContent":["/**\n * Text component - Phaser Text GameObject for rendering text\n * Status: IMPLEMENTED ✅\n *\n * Design Overview:\n * ================\n *\n * 1. Component Role: TEXT RENDERING\n *    Purpose: Display styled text in UI layouts\n *    Phaser Type: Phaser.GameObjects.Text (bitmap-based text rendering)\n *    Characteristics:\n *    - Layout-aware by default (participates in parent layout)\n *    - Auto-sizing based on text content + font metrics\n *    - Supports Phaser text styling (color, font, alignment, etc.)\n *\n * 2. Headless Default: FALSE ✅\n *    Decision: Text participates in layout by default\n *    Reasoning:\n *    - Text is a UI element (labels, paragraphs, buttons)\n *    - Should affect parent container dimensions\n *    - Similar to HTML text nodes\n *    Use Cases:\n *    - ✅ Layout-aware (default): Labels, buttons, paragraphs, UI text\n *    - ❌ Headless (optional): Floating damage numbers, debug text, tooltips\n *    Usage:\n *      <Text text=\"Label\" />                    // Layout-aware\n *      <Text text=\"+100\" headless={true} />    // Floating (no layout impact)\n *\n * 3. Layout Size Provider: UN-ROTATED DIMENSIONS ✅\n *    Implementation: Uses text.width and text.height (un-rotated)\n *    Behavior:\n *    - Returns un-rotated text dimensions\n *    - Rotation is IGNORED for layout-aware text (headless=false)\n *    - Rotation only works with headless=true (no layout impact)\n *    Reasoning:\n *    - Flow layout is incompatible with rotation (causes positioning issues)\n *    - Rotated text would overlap siblings in flow layout\n *    - getBounds() position compensation is complex and error-prone\n *    Example:\n *      <Text text=\"Hello\" />                        // ✅ Layout size: 100x20\n *      <Text text=\"World\" rotation={Math.PI/4} />   // ⚠️ Rotation IGNORED, size: 100x20\n *      <Text text=\"World\" rotation={Math.PI/4} headless={true} /> // ✅ Rotated, no layout\n *    Recommendation: Use rotation only with headless=true or absolute positioning\n *\n * 4. Text Content & Styling:\n *    Props:\n *    - text: string (required, the text to display)\n *    - style: Phaser.Types.GameObjects.Text.TextStyle (font, color, etc.)\n *    - fontStyle, align, maxWidth: Convenience props (legacy)\n *    Styling Priority:\n *    1. Inline style prop (highest)\n *    2. Individual props (fontStyle, align)\n *    3. Theme defaults (lowest)\n *    Example:\n *      <Text\n *        text=\"Hello\"\n *        style={{ fontSize: '24px', color: '#ffffff', fontFamily: 'Arial' }}\n *      />\n *\n * 5. Margin Support:\n *    Feature: Text supports margin prop (unique among primitives)\n *    Reasoning:\n *    - Text often needs spacing from siblings (inline elements)\n *    - Margin affects layout calculations (added to text dimensions)\n *    - Similar to CSS inline element margin\n *    Usage:\n *      <Text text=\"Label\" margin={{ left: 10, right: 10 }} />\n *      <Text text=\"Spaced\" margin={8} />  // All sides\n *\n * 6. Layout Behavior:\n *    Sizing:\n *    - Auto-size: Text dimensions = rendered text bounds (default)\n *    - No explicit width/height props (text size determined by content)\n *    - maxWidth prop wraps text (Phaser feature)\n *    Positioning:\n *    - Positioned by parent layout engine (flexbox-style)\n *    - x/y props override layout position (absolute positioning)\n *\n * 7. Origin Behavior:\n *    Current: Phaser default origin (0, 0) - top-left\n *    Reasoning:\n *    - Text aligns naturally with layout flow\n *    - Top-left origin simplifies position calculations\n *    - Consistent with HTML text rendering\n *    Note: Origin affects rotation pivot (if rotation applied)\n *\n * 8. Common Patterns:\n *    Label:\n *      <View direction=\"row\" gap={10}>\n *        <Text text=\"Name:\" />\n *        <Text text={userName} />\n *      </View>\n *    Styled Text:\n *      <Text\n *        text=\"Title\"\n *        style={{ fontSize: '32px', fontWeight: 'bold', color: '#ff0000' }}\n *      />\n *    Wrapped Text:\n *      <Text text={longParagraph} maxWidth={300} />\n *    Floating Damage:\n *      <Text text=\"-50 HP\" headless={true} alpha={0.8} />\n *\n * 9. Performance Considerations:\n *    - Text rendering is relatively expensive (canvas-based)\n *    - Frequent text changes trigger re-render\n *    - Long text with maxWidth: word-wrap calculation cost\n *    - Consider BitmapText for better performance (future component)\n *    - Text batching: Multiple Text objects don't batch (separate draw calls)\n *\n * 10. Known Limitations:\n *     - Rotation only supported with headless=true (ignored for layout-aware text)\n *       → Flow layout is incompatible with rotation\n *     - No rich text support (HTML tags, colors within text)\n *     - Limited text effects (no shadows, outlines in base component)\n *     - WordWrap with maxWidth: Can't specify ellipsis truncation\n *     - Changing text frequently: Performance impact\n *\n * Implementation Status:\n * ======================\n * [✅] Phaser Text creation with style support\n * [✅] Transform props (position, scale, alpha)\n * [✅] Layout system integration (__layoutProps, __getLayoutSize)\n * [✅] Margin support (unique feature)\n * [✅] Text content and style patching\n * [✅] Theme system integration\n * [⚠️] Rotation - Only with headless=true (ignored for layout-aware text)\n * [❌] Rich text support - Future feature\n * [❌] Text effects (shadow, outline) - Future feature\n */\nimport type * as Phaser from 'phaser'\nimport type {\n  EdgeInsets,\n  LayoutProps,\n  PhaserProps,\n  TextSpecificProps,\n  TransformProps,\n} from '../../core-props'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { PropsDefaultExtension } from '../../types'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTextProps } from '../appliers/applyText'\nimport { applyTextLayout } from '../appliers/applyTextLayout'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTextLayout } from '../creators/createTextLayout'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\n/**\n * Base props for Text - composing shared prop groups\n * Includes optional margin for layout engine use\n */\nexport interface TextBaseProps\n  extends TransformProps, PhaserProps, Pick<LayoutProps, 'headless'>, TextSpecificProps {\n  margin?: EdgeInsets\n  // Legacy: support Phaser's style object directly\n  style?: Phaser.Types.GameObjects.Text.TextStyle | undefined\n}\n\n/**\n * Props for Text component - extends base props with JSX-specific props\n */\nexport interface TextProps extends TextBaseProps, PropsDefaultExtension<Phaser.GameObjects.Text> {}\n\n/**\n * Text creator - creates a Phaser Text object\n */\nexport const textCreator: HostCreator<'Text'> = (scene, props) => {\n  const text = scene.add.text(\n    resolveAnimatableNumber(props.x) ?? 0,\n    resolveAnimatableNumber(props.y) ?? 0,\n    props.text ?? '',\n    props.style\n  )\n\n  // Set origin based on headless flag\n  // Headless: (0.5, 0.5) - centered, works naturally with rotation/scale\n  // Layout-aware: (0, 0) - top-left, aligns with layout flow\n  if (props.headless) {\n    text.setOrigin(0.5, 0.5)\n  } else {\n    text.setOrigin(0, 0)\n  }\n\n  // Normalize props for headless objects\n  // Headless objects are positioned as points - no spacing or rotation constraints\n  const normalizedProps = { ...props } as Record<string, unknown>\n  if (props.headless) {\n    // Remove spacing props (headless = positioned as point)\n    delete normalizedProps.padding\n    delete normalizedProps.margin\n    delete normalizedProps.gap\n  } else {\n    // Remove rotation (only supported with headless=true)\n    if (normalizedProps.rotation !== undefined) {\n      delete normalizedProps.rotation\n    }\n  }\n\n  // Apply transform props (scale, rotation if headless)\n  createTransform(text, normalizedProps)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  createPhaser(text, normalizedProps)\n\n  // Re-apply text props after alpha so Phaser text background follows the same visual alpha.\n  applyTextProps(text, {}, normalizedProps)\n\n  // Setup layout system (props and size provider)\n  createTextLayout(text, normalizedProps)\n\n  return text\n}\n\n/**\n * Text patcher - updates Text properties\n */\nexport const textPatcher: HostPatcher<'Text'> = (node, prev, next) => {\n  // Update origin if headless flag changed\n  if (prev.headless !== next.headless) {\n    if (next.headless) {\n      node.setOrigin(0.5, 0.5) // Headless: centered\n    } else {\n      node.setOrigin(0, 0) // Layout-aware: top-left\n    }\n  }\n\n  // Normalize props for headless objects\n  const normalizedPrev = { ...prev } as Record<string, unknown>\n  const normalizedNext = { ...next } as Record<string, unknown>\n\n  if (next.headless) {\n    // Remove spacing props (headless = positioned as point)\n    delete normalizedNext.padding\n    delete normalizedNext.margin\n    delete normalizedNext.gap\n  } else {\n    // Remove rotation (only supported with headless=true)\n    if (normalizedNext.rotation !== undefined) {\n      delete normalizedNext.rotation\n    }\n  }\n\n  if (prev.headless) {\n    delete normalizedPrev.padding\n    delete normalizedPrev.margin\n    delete normalizedPrev.gap\n  } else {\n    if (normalizedPrev.rotation !== undefined) {\n      delete normalizedPrev.rotation\n    }\n  }\n\n  // Apply transform props (position, rotation only if headless, scale)\n  applyTransformProps(node, normalizedPrev, normalizedNext)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  applyPhaserProps(node, normalizedPrev, normalizedNext)\n\n  // Apply text-specific props (text content, color, font, etc.)\n  applyTextProps(node, normalizedPrev, normalizedNext)\n\n  // Apply layout props and update size provider if needed\n  applyTextLayout(node, normalizedPrev, normalizedNext)\n}\n"],"names":["resolveAnimatableNumber","createTransform","createPhaser","applyTextProps","createTextLayout","applyTransformProps","applyPhaserProps","applyTextLayout"],"mappings":";;;;;;;;;AAsKO,MAAM,cAAmC,CAAC,OAAO,UAAU;AAChE,QAAM,OAAO,MAAM,IAAI;AAAA,IACrBA,wCAAwB,MAAM,CAAC,KAAK;AAAA,IACpCA,wCAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,MAAM,QAAQ;AAAA,IACd,MAAM;AAAA,EAAA;AAMR,MAAI,MAAM,UAAU;AAClB,SAAK,UAAU,KAAK,GAAG;AAAA,EACzB,OAAO;AACL,SAAK,UAAU,GAAG,CAAC;AAAA,EACrB;AAIA,QAAM,kBAAkB,EAAE,GAAG,MAAA;AAC7B,MAAI,MAAM,UAAU;AAElB,WAAO,gBAAgB;AACvB,WAAO,gBAAgB;AACvB,WAAO,gBAAgB;AAAA,EACzB,OAAO;AAEL,QAAI,gBAAgB,aAAa,QAAW;AAC1C,aAAO,gBAAgB;AAAA,IACzB;AAAA,EACF;AAGAC,kBAAAA,gBAAgB,MAAM,eAAe;AAGrCC,eAAAA,aAAa,MAAM,eAAe;AAGlCC,2BAAe,MAAM,CAAA,GAAI,eAAe;AAGxCC,mBAAAA,iBAAiB,MAAM,eAAe;AAEtC,SAAO;AACT;AAKO,MAAM,cAAmC,CAAC,MAAM,MAAM,SAAS;AAEpE,MAAI,KAAK,aAAa,KAAK,UAAU;AACnC,QAAI,KAAK,UAAU;AACjB,WAAK,UAAU,KAAK,GAAG;AAAA,IACzB,OAAO;AACL,WAAK,UAAU,GAAG,CAAC;AAAA,IACrB;AAAA,EACF;AAGA,QAAM,iBAAiB,EAAE,GAAG,KAAA;AAC5B,QAAM,iBAAiB,EAAE,GAAG,KAAA;AAE5B,MAAI,KAAK,UAAU;AAEjB,WAAO,eAAe;AACtB,WAAO,eAAe;AACtB,WAAO,eAAe;AAAA,EACxB,OAAO;AAEL,QAAI,eAAe,aAAa,QAAW;AACzC,aAAO,eAAe;AAAA,IACxB;AAAA,EACF;AAEA,MAAI,KAAK,UAAU;AACjB,WAAO,eAAe;AACtB,WAAO,eAAe;AACtB,WAAO,eAAe;AAAA,EACxB,OAAO;AACL,QAAI,eAAe,aAAa,QAAW;AACzC,aAAO,eAAe;AAAA,IACxB;AAAA,EACF;AAGAC,qCAAoB,MAAM,gBAAgB,cAAc;AAGxDC,+BAAiB,MAAM,gBAAgB,cAAc;AAGrDH,2BAAe,MAAM,gBAAgB,cAAc;AAGnDI,kCAAgB,MAAM,gBAAgB,cAAc;AACtD;;;"}

package/dist/components/primitives/text.d.ts

@@ -0,0 +1,155 @@
+import { EdgeInsets, LayoutProps, PhaserProps, TextSpecificProps, TransformProps } from '../../core-props';
+import { HostCreator, HostPatcher } from '../../host';
+import { PropsDefaultExtension } from '../../types';
+/**
+ * Text component - Phaser Text GameObject for rendering text
+ * Status: IMPLEMENTED ✅
+ *
+ * Design Overview:
+ * ================
+ *
+ * 1. Component Role: TEXT RENDERING
+ *    Purpose: Display styled text in UI layouts
+ *    Phaser Type: Phaser.GameObjects.Text (bitmap-based text rendering)
+ *    Characteristics:
+ *    - Layout-aware by default (participates in parent layout)
+ *    - Auto-sizing based on text content + font metrics
+ *    - Supports Phaser text styling (color, font, alignment, etc.)
+ *
+ * 2. Headless Default: FALSE ✅
+ *    Decision: Text participates in layout by default
+ *    Reasoning:
+ *    - Text is a UI element (labels, paragraphs, buttons)
+ *    - Should affect parent container dimensions
+ *    - Similar to HTML text nodes
+ *    Use Cases:
+ *    - ✅ Layout-aware (default): Labels, buttons, paragraphs, UI text
+ *    - ❌ Headless (optional): Floating damage numbers, debug text, tooltips
+ *    Usage:
+ *      <Text text="Label" />                    // Layout-aware
+ *      <Text text="+100" headless={true} />    // Floating (no layout impact)
+ *
+ * 3. Layout Size Provider: UN-ROTATED DIMENSIONS ✅
+ *    Implementation: Uses text.width and text.height (un-rotated)
+ *    Behavior:
+ *    - Returns un-rotated text dimensions
+ *    - Rotation is IGNORED for layout-aware text (headless=false)
+ *    - Rotation only works with headless=true (no layout impact)
+ *    Reasoning:
+ *    - Flow layout is incompatible with rotation (causes positioning issues)
+ *    - Rotated text would overlap siblings in flow layout
+ *    - getBounds() position compensation is complex and error-prone
+ *    Example:
+ *      <Text text="Hello" />                        // ✅ Layout size: 100x20
+ *      <Text text="World" rotation={Math.PI/4} />   // ⚠️ Rotation IGNORED, size: 100x20
+ *      <Text text="World" rotation={Math.PI/4} headless={true} /> // ✅ Rotated, no layout
+ *    Recommendation: Use rotation only with headless=true or absolute positioning
+ *
+ * 4. Text Content & Styling:
+ *    Props:
+ *    - text: string (required, the text to display)
+ *    - style: Phaser.Types.GameObjects.Text.TextStyle (font, color, etc.)
+ *    - fontStyle, align, maxWidth: Convenience props (legacy)
+ *    Styling Priority:
+ *    1. Inline style prop (highest)
+ *    2. Individual props (fontStyle, align)
+ *    3. Theme defaults (lowest)
+ *    Example:
+ *      <Text
+ *        text="Hello"
+ *        style={{ fontSize: '24px', color: '#ffffff', fontFamily: 'Arial' }}
+ *      />
+ *
+ * 5. Margin Support:
+ *    Feature: Text supports margin prop (unique among primitives)
+ *    Reasoning:
+ *    - Text often needs spacing from siblings (inline elements)
+ *    - Margin affects layout calculations (added to text dimensions)
+ *    - Similar to CSS inline element margin
+ *    Usage:
+ *      <Text text="Label" margin={{ left: 10, right: 10 }} />
+ *      <Text text="Spaced" margin={8} />  // All sides
+ *
+ * 6. Layout Behavior:
+ *    Sizing:
+ *    - Auto-size: Text dimensions = rendered text bounds (default)
+ *    - No explicit width/height props (text size determined by content)
+ *    - maxWidth prop wraps text (Phaser feature)
+ *    Positioning:
+ *    - Positioned by parent layout engine (flexbox-style)
+ *    - x/y props override layout position (absolute positioning)
+ *
+ * 7. Origin Behavior:
+ *    Current: Phaser default origin (0, 0) - top-left
+ *    Reasoning:
+ *    - Text aligns naturally with layout flow
+ *    - Top-left origin simplifies position calculations
+ *    - Consistent with HTML text rendering
+ *    Note: Origin affects rotation pivot (if rotation applied)
+ *
+ * 8. Common Patterns:
+ *    Label:
+ *      <View direction="row" gap={10}>
+ *        <Text text="Name:" />
+ *        <Text text={userName} />
+ *      </View>
+ *    Styled Text:
+ *      <Text
+ *        text="Title"
+ *        style={{ fontSize: '32px', fontWeight: 'bold', color: '#ff0000' }}
+ *      />
+ *    Wrapped Text:
+ *      <Text text={longParagraph} maxWidth={300} />
+ *    Floating Damage:
+ *      <Text text="-50 HP" headless={true} alpha={0.8} />
+ *
+ * 9. Performance Considerations:
+ *    - Text rendering is relatively expensive (canvas-based)
+ *    - Frequent text changes trigger re-render
+ *    - Long text with maxWidth: word-wrap calculation cost
+ *    - Consider BitmapText for better performance (future component)
+ *    - Text batching: Multiple Text objects don't batch (separate draw calls)
+ *
+ * 10. Known Limitations:
+ *     - Rotation only supported with headless=true (ignored for layout-aware text)
+ *       → Flow layout is incompatible with rotation
+ *     - No rich text support (HTML tags, colors within text)
+ *     - Limited text effects (no shadows, outlines in base component)
+ *     - WordWrap with maxWidth: Can't specify ellipsis truncation
+ *     - Changing text frequently: Performance impact
+ *
+ * Implementation Status:
+ * ======================
+ * [✅] Phaser Text creation with style support
+ * [✅] Transform props (position, scale, alpha)
+ * [✅] Layout system integration (__layoutProps, __getLayoutSize)
+ * [✅] Margin support (unique feature)
+ * [✅] Text content and style patching
+ * [✅] Theme system integration
+ * [⚠️] Rotation - Only with headless=true (ignored for layout-aware text)
+ * [❌] Rich text support - Future feature
+ * [❌] Text effects (shadow, outline) - Future feature
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Base props for Text - composing shared prop groups
+ * Includes optional margin for layout engine use
+ */
+export interface TextBaseProps extends TransformProps, PhaserProps, Pick<LayoutProps, 'headless'>, TextSpecificProps {
+    margin?: EdgeInsets;
+    style?: Phaser.Types.GameObjects.Text.TextStyle | undefined;
+}
+/**
+ * Props for Text component - extends base props with JSX-specific props
+ */
+export interface TextProps extends TextBaseProps, PropsDefaultExtension<Phaser.GameObjects.Text> {
+}
+/**
+ * Text creator - creates a Phaser Text object
+ */
+export declare const textCreator: HostCreator<'Text'>;
+/**
+ * Text patcher - updates Text properties
+ */
+export declare const textPatcher: HostPatcher<'Text'>;
+//# sourceMappingURL=text.d.ts.map

package/dist/components/primitives/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgIG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,cAAc,EACf,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AASxD;;;GAGG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,iBAAiB;IACrF,MAAM,CAAC,EAAE,UAAU,CAAA;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;CAC5D;AAED;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa,EAAE,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;CAAG;AAEnG;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CA6C3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CA+C3C,CAAA"}

package/dist/components/primitives/text.js

@@ -0,0 +1,73 @@
+import { applyPhaserProps } from "../appliers/applyPhaser.js";
+import { applyTextProps } from "../appliers/applyText.js";
+import { applyTextLayout } from "../appliers/applyTextLayout.js";
+import { applyTransformProps } from "../appliers/applyTransform.js";
+import { createPhaser } from "../creators/createPhaser.js";
+import { createTextLayout } from "../creators/createTextLayout.js";
+import { resolveAnimatableNumber, createTransform } from "../creators/createTransform.js";
+const textCreator = (scene, props) => {
+  const text = scene.add.text(
+    resolveAnimatableNumber(props.x) ?? 0,
+    resolveAnimatableNumber(props.y) ?? 0,
+    props.text ?? "",
+    props.style
+  );
+  if (props.headless) {
+    text.setOrigin(0.5, 0.5);
+  } else {
+    text.setOrigin(0, 0);
+  }
+  const normalizedProps = { ...props };
+  if (props.headless) {
+    delete normalizedProps.padding;
+    delete normalizedProps.margin;
+    delete normalizedProps.gap;
+  } else {
+    if (normalizedProps.rotation !== void 0) {
+      delete normalizedProps.rotation;
+    }
+  }
+  createTransform(text, normalizedProps);
+  createPhaser(text, normalizedProps);
+  applyTextProps(text, {}, normalizedProps);
+  createTextLayout(text, normalizedProps);
+  return text;
+};
+const textPatcher = (node, prev, next) => {
+  if (prev.headless !== next.headless) {
+    if (next.headless) {
+      node.setOrigin(0.5, 0.5);
+    } else {
+      node.setOrigin(0, 0);
+    }
+  }
+  const normalizedPrev = { ...prev };
+  const normalizedNext = { ...next };
+  if (next.headless) {
+    delete normalizedNext.padding;
+    delete normalizedNext.margin;
+    delete normalizedNext.gap;
+  } else {
+    if (normalizedNext.rotation !== void 0) {
+      delete normalizedNext.rotation;
+    }
+  }
+  if (prev.headless) {
+    delete normalizedPrev.padding;
+    delete normalizedPrev.margin;
+    delete normalizedPrev.gap;
+  } else {
+    if (normalizedPrev.rotation !== void 0) {
+      delete normalizedPrev.rotation;
+    }
+  }
+  applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaserProps(node, normalizedPrev, normalizedNext);
+  applyTextProps(node, normalizedPrev, normalizedNext);
+  applyTextLayout(node, normalizedPrev, normalizedNext);
+};
+export {
+  textCreator,
+  textPatcher
+};
+//# sourceMappingURL=text.js.map

package/dist/components/primitives/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../../src/components/primitives/text.ts"],"sourcesContent":["/**\n * Text component - Phaser Text GameObject for rendering text\n * Status: IMPLEMENTED ✅\n *\n * Design Overview:\n * ================\n *\n * 1. Component Role: TEXT RENDERING\n *    Purpose: Display styled text in UI layouts\n *    Phaser Type: Phaser.GameObjects.Text (bitmap-based text rendering)\n *    Characteristics:\n *    - Layout-aware by default (participates in parent layout)\n *    - Auto-sizing based on text content + font metrics\n *    - Supports Phaser text styling (color, font, alignment, etc.)\n *\n * 2. Headless Default: FALSE ✅\n *    Decision: Text participates in layout by default\n *    Reasoning:\n *    - Text is a UI element (labels, paragraphs, buttons)\n *    - Should affect parent container dimensions\n *    - Similar to HTML text nodes\n *    Use Cases:\n *    - ✅ Layout-aware (default): Labels, buttons, paragraphs, UI text\n *    - ❌ Headless (optional): Floating damage numbers, debug text, tooltips\n *    Usage:\n *      <Text text=\"Label\" />                    // Layout-aware\n *      <Text text=\"+100\" headless={true} />    // Floating (no layout impact)\n *\n * 3. Layout Size Provider: UN-ROTATED DIMENSIONS ✅\n *    Implementation: Uses text.width and text.height (un-rotated)\n *    Behavior:\n *    - Returns un-rotated text dimensions\n *    - Rotation is IGNORED for layout-aware text (headless=false)\n *    - Rotation only works with headless=true (no layout impact)\n *    Reasoning:\n *    - Flow layout is incompatible with rotation (causes positioning issues)\n *    - Rotated text would overlap siblings in flow layout\n *    - getBounds() position compensation is complex and error-prone\n *    Example:\n *      <Text text=\"Hello\" />                        // ✅ Layout size: 100x20\n *      <Text text=\"World\" rotation={Math.PI/4} />   // ⚠️ Rotation IGNORED, size: 100x20\n *      <Text text=\"World\" rotation={Math.PI/4} headless={true} /> // ✅ Rotated, no layout\n *    Recommendation: Use rotation only with headless=true or absolute positioning\n *\n * 4. Text Content & Styling:\n *    Props:\n *    - text: string (required, the text to display)\n *    - style: Phaser.Types.GameObjects.Text.TextStyle (font, color, etc.)\n *    - fontStyle, align, maxWidth: Convenience props (legacy)\n *    Styling Priority:\n *    1. Inline style prop (highest)\n *    2. Individual props (fontStyle, align)\n *    3. Theme defaults (lowest)\n *    Example:\n *      <Text\n *        text=\"Hello\"\n *        style={{ fontSize: '24px', color: '#ffffff', fontFamily: 'Arial' }}\n *      />\n *\n * 5. Margin Support:\n *    Feature: Text supports margin prop (unique among primitives)\n *    Reasoning:\n *    - Text often needs spacing from siblings (inline elements)\n *    - Margin affects layout calculations (added to text dimensions)\n *    - Similar to CSS inline element margin\n *    Usage:\n *      <Text text=\"Label\" margin={{ left: 10, right: 10 }} />\n *      <Text text=\"Spaced\" margin={8} />  // All sides\n *\n * 6. Layout Behavior:\n *    Sizing:\n *    - Auto-size: Text dimensions = rendered text bounds (default)\n *    - No explicit width/height props (text size determined by content)\n *    - maxWidth prop wraps text (Phaser feature)\n *    Positioning:\n *    - Positioned by parent layout engine (flexbox-style)\n *    - x/y props override layout position (absolute positioning)\n *\n * 7. Origin Behavior:\n *    Current: Phaser default origin (0, 0) - top-left\n *    Reasoning:\n *    - Text aligns naturally with layout flow\n *    - Top-left origin simplifies position calculations\n *    - Consistent with HTML text rendering\n *    Note: Origin affects rotation pivot (if rotation applied)\n *\n * 8. Common Patterns:\n *    Label:\n *      <View direction=\"row\" gap={10}>\n *        <Text text=\"Name:\" />\n *        <Text text={userName} />\n *      </View>\n *    Styled Text:\n *      <Text\n *        text=\"Title\"\n *        style={{ fontSize: '32px', fontWeight: 'bold', color: '#ff0000' }}\n *      />\n *    Wrapped Text:\n *      <Text text={longParagraph} maxWidth={300} />\n *    Floating Damage:\n *      <Text text=\"-50 HP\" headless={true} alpha={0.8} />\n *\n * 9. Performance Considerations:\n *    - Text rendering is relatively expensive (canvas-based)\n *    - Frequent text changes trigger re-render\n *    - Long text with maxWidth: word-wrap calculation cost\n *    - Consider BitmapText for better performance (future component)\n *    - Text batching: Multiple Text objects don't batch (separate draw calls)\n *\n * 10. Known Limitations:\n *     - Rotation only supported with headless=true (ignored for layout-aware text)\n *       → Flow layout is incompatible with rotation\n *     - No rich text support (HTML tags, colors within text)\n *     - Limited text effects (no shadows, outlines in base component)\n *     - WordWrap with maxWidth: Can't specify ellipsis truncation\n *     - Changing text frequently: Performance impact\n *\n * Implementation Status:\n * ======================\n * [✅] Phaser Text creation with style support\n * [✅] Transform props (position, scale, alpha)\n * [✅] Layout system integration (__layoutProps, __getLayoutSize)\n * [✅] Margin support (unique feature)\n * [✅] Text content and style patching\n * [✅] Theme system integration\n * [⚠️] Rotation - Only with headless=true (ignored for layout-aware text)\n * [❌] Rich text support - Future feature\n * [❌] Text effects (shadow, outline) - Future feature\n */\nimport type * as Phaser from 'phaser'\nimport type {\n  EdgeInsets,\n  LayoutProps,\n  PhaserProps,\n  TextSpecificProps,\n  TransformProps,\n} from '../../core-props'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { PropsDefaultExtension } from '../../types'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTextProps } from '../appliers/applyText'\nimport { applyTextLayout } from '../appliers/applyTextLayout'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTextLayout } from '../creators/createTextLayout'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\n/**\n * Base props for Text - composing shared prop groups\n * Includes optional margin for layout engine use\n */\nexport interface TextBaseProps\n  extends TransformProps, PhaserProps, Pick<LayoutProps, 'headless'>, TextSpecificProps {\n  margin?: EdgeInsets\n  // Legacy: support Phaser's style object directly\n  style?: Phaser.Types.GameObjects.Text.TextStyle | undefined\n}\n\n/**\n * Props for Text component - extends base props with JSX-specific props\n */\nexport interface TextProps extends TextBaseProps, PropsDefaultExtension<Phaser.GameObjects.Text> {}\n\n/**\n * Text creator - creates a Phaser Text object\n */\nexport const textCreator: HostCreator<'Text'> = (scene, props) => {\n  const text = scene.add.text(\n    resolveAnimatableNumber(props.x) ?? 0,\n    resolveAnimatableNumber(props.y) ?? 0,\n    props.text ?? '',\n    props.style\n  )\n\n  // Set origin based on headless flag\n  // Headless: (0.5, 0.5) - centered, works naturally with rotation/scale\n  // Layout-aware: (0, 0) - top-left, aligns with layout flow\n  if (props.headless) {\n    text.setOrigin(0.5, 0.5)\n  } else {\n    text.setOrigin(0, 0)\n  }\n\n  // Normalize props for headless objects\n  // Headless objects are positioned as points - no spacing or rotation constraints\n  const normalizedProps = { ...props } as Record<string, unknown>\n  if (props.headless) {\n    // Remove spacing props (headless = positioned as point)\n    delete normalizedProps.padding\n    delete normalizedProps.margin\n    delete normalizedProps.gap\n  } else {\n    // Remove rotation (only supported with headless=true)\n    if (normalizedProps.rotation !== undefined) {\n      delete normalizedProps.rotation\n    }\n  }\n\n  // Apply transform props (scale, rotation if headless)\n  createTransform(text, normalizedProps)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  createPhaser(text, normalizedProps)\n\n  // Re-apply text props after alpha so Phaser text background follows the same visual alpha.\n  applyTextProps(text, {}, normalizedProps)\n\n  // Setup layout system (props and size provider)\n  createTextLayout(text, normalizedProps)\n\n  return text\n}\n\n/**\n * Text patcher - updates Text properties\n */\nexport const textPatcher: HostPatcher<'Text'> = (node, prev, next) => {\n  // Update origin if headless flag changed\n  if (prev.headless !== next.headless) {\n    if (next.headless) {\n      node.setOrigin(0.5, 0.5) // Headless: centered\n    } else {\n      node.setOrigin(0, 0) // Layout-aware: top-left\n    }\n  }\n\n  // Normalize props for headless objects\n  const normalizedPrev = { ...prev } as Record<string, unknown>\n  const normalizedNext = { ...next } as Record<string, unknown>\n\n  if (next.headless) {\n    // Remove spacing props (headless = positioned as point)\n    delete normalizedNext.padding\n    delete normalizedNext.margin\n    delete normalizedNext.gap\n  } else {\n    // Remove rotation (only supported with headless=true)\n    if (normalizedNext.rotation !== undefined) {\n      delete normalizedNext.rotation\n    }\n  }\n\n  if (prev.headless) {\n    delete normalizedPrev.padding\n    delete normalizedPrev.margin\n    delete normalizedPrev.gap\n  } else {\n    if (normalizedPrev.rotation !== undefined) {\n      delete normalizedPrev.rotation\n    }\n  }\n\n  // Apply transform props (position, rotation only if headless, scale)\n  applyTransformProps(node, normalizedPrev, normalizedNext)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  applyPhaserProps(node, normalizedPrev, normalizedNext)\n\n  // Apply text-specific props (text content, color, font, etc.)\n  applyTextProps(node, normalizedPrev, normalizedNext)\n\n  // Apply layout props and update size provider if needed\n  applyTextLayout(node, normalizedPrev, normalizedNext)\n}\n"],"names":[],"mappings":";;;;;;;AAsKO,MAAM,cAAmC,CAAC,OAAO,UAAU;AAChE,QAAM,OAAO,MAAM,IAAI;AAAA,IACrB,wBAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,wBAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,MAAM,QAAQ;AAAA,IACd,MAAM;AAAA,EAAA;AAMR,MAAI,MAAM,UAAU;AAClB,SAAK,UAAU,KAAK,GAAG;AAAA,EACzB,OAAO;AACL,SAAK,UAAU,GAAG,CAAC;AAAA,EACrB;AAIA,QAAM,kBAAkB,EAAE,GAAG,MAAA;AAC7B,MAAI,MAAM,UAAU;AAElB,WAAO,gBAAgB;AACvB,WAAO,gBAAgB;AACvB,WAAO,gBAAgB;AAAA,EACzB,OAAO;AAEL,QAAI,gBAAgB,aAAa,QAAW;AAC1C,aAAO,gBAAgB;AAAA,IACzB;AAAA,EACF;AAGA,kBAAgB,MAAM,eAAe;AAGrC,eAAa,MAAM,eAAe;AAGlC,iBAAe,MAAM,CAAA,GAAI,eAAe;AAGxC,mBAAiB,MAAM,eAAe;AAEtC,SAAO;AACT;AAKO,MAAM,cAAmC,CAAC,MAAM,MAAM,SAAS;AAEpE,MAAI,KAAK,aAAa,KAAK,UAAU;AACnC,QAAI,KAAK,UAAU;AACjB,WAAK,UAAU,KAAK,GAAG;AAAA,IACzB,OAAO;AACL,WAAK,UAAU,GAAG,CAAC;AAAA,IACrB;AAAA,EACF;AAGA,QAAM,iBAAiB,EAAE,GAAG,KAAA;AAC5B,QAAM,iBAAiB,EAAE,GAAG,KAAA;AAE5B,MAAI,KAAK,UAAU;AAEjB,WAAO,eAAe;AACtB,WAAO,eAAe;AACtB,WAAO,eAAe;AAAA,EACxB,OAAO;AAEL,QAAI,eAAe,aAAa,QAAW;AACzC,aAAO,eAAe;AAAA,IACxB;AAAA,EACF;AAEA,MAAI,KAAK,UAAU;AACjB,WAAO,eAAe;AACtB,WAAO,eAAe;AACtB,WAAO,eAAe;AAAA,EACxB,OAAO;AACL,QAAI,eAAe,aAAa,QAAW;AACzC,aAAO,eAAe;AAAA,IACxB;AAAA,EACF;AAGA,sBAAoB,MAAM,gBAAgB,cAAc;AAGxD,mBAAiB,MAAM,gBAAgB,cAAc;AAGrD,iBAAe,MAAM,gBAAgB,cAAc;AAGnD,kBAAgB,MAAM,gBAAgB,cAAc;AACtD;"}

package/dist/components/primitives/tilesprite.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const applyPhaser = require("../appliers/applyPhaser.cjs");
+const applyTransform = require("../appliers/applyTransform.cjs");
+const createPhaser = require("../creators/createPhaser.cjs");
+const createTransform = require("../creators/createTransform.cjs");
+function createTileSpriteLayout(tileSprite, props) {
+  tileSprite.__layoutProps = props;
+  tileSprite.__getLayoutSize = () => {
+    if (tileSprite.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: tileSprite.width,
+      height: tileSprite.height
+    };
+  };
+}
+function applyTileSpriteProps(tileSprite, prev, next) {
+  if ((prev.texture !== next.texture || prev.frame !== next.frame) && next.texture) {
+    tileSprite.setTexture(next.texture, next.frame);
+  }
+  if ((prev.width !== next.width || prev.height !== next.height) && typeof next.width === "number" && typeof next.height === "number") {
+    tileSprite.setSize(next.width, next.height);
+  }
+  if (prev.tilePositionX !== next.tilePositionX && typeof next.tilePositionX === "number") {
+    tileSprite.tilePositionX = next.tilePositionX;
+  }
+  if (prev.tilePositionY !== next.tilePositionY && typeof next.tilePositionY === "number") {
+    tileSprite.tilePositionY = next.tilePositionY;
+  }
+  if (prev.tileScaleX !== next.tileScaleX && typeof next.tileScaleX === "number") {
+    tileSprite.tileScaleX = next.tileScaleX;
+  }
+  if (prev.tileScaleY !== next.tileScaleY && typeof next.tileScaleY === "number") {
+    tileSprite.tileScaleY = next.tileScaleY;
+  }
+  if (prev.tint !== next.tint) {
+    if (typeof next.tint === "number") {
+      tileSprite.setTint(next.tint);
+    } else {
+      tileSprite.clearTint();
+    }
+  }
+  if (prev.originX !== next.originX || prev.originY !== next.originY) {
+    tileSprite.setOrigin(next.originX ?? tileSprite.originX, next.originY ?? tileSprite.originY);
+  }
+}
+const tileSpriteCreator = (scene, props) => {
+  const tileSprite = scene.add.tileSprite(
+    createTransform.resolveAnimatableNumber(props.x) ?? 0,
+    createTransform.resolveAnimatableNumber(props.y) ?? 0,
+    props.width,
+    props.height,
+    props.texture,
+    props.frame
+  );
+  tileSprite.setOrigin(props.originX ?? 0, props.originY ?? 0);
+  createTransform.createTransform(tileSprite, props);
+  createPhaser.createPhaser(tileSprite, props);
+  applyTileSpriteProps(tileSprite, {}, props);
+  createTileSpriteLayout(tileSprite, props);
+  props.onReady?.(tileSprite);
+  return tileSprite;
+};
+const tileSpritePatcher = (node, prev, next) => {
+  applyTransform.applyTransformProps(node, prev, next);
+  applyPhaser.applyPhaserProps(node, prev, next);
+  applyTileSpriteProps(node, prev, next);
+  const tileSprite = node;
+  if (tileSprite.__layoutProps) {
+    tileSprite.__layoutProps = next;
+  }
+};
+exports.tileSpriteCreator = tileSpriteCreator;
+exports.tileSpritePatcher = tileSpritePatcher;
+//# sourceMappingURL=tilesprite.cjs.map

package/dist/components/primitives/tilesprite.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tilesprite.cjs","sources":["../../../src/components/primitives/tilesprite.ts"],"sourcesContent":["/**\n * TileSprite component - Phaser TileSprite GameObject (repeating texture pattern)\n * Status: IMPLEMENTED ✅\n *\n * Design Decisions & Answers:\n * ===========================\n *\n * 1. Headless Default: TRUE ✅\n *    Rationale: TileSprites are typically backgrounds/patterns (decorative).\n *    They fill available space and shouldn't affect parent dimensions.\n *    Use Cases:\n *    - ✅ Headless (default): Scrolling backgrounds, parallax layers, repeating patterns\n *    - ❌ Layout-aware: Rare - textured progress bars, pattern-filled UI blocks\n *\n * 2. Layout Size Provider: SIMPLE DIMENSIONS ✅\n *    Decision: Use width/height directly (not getBounds)\n *    Reasoning:\n *    - TileSprite requires explicit width/height (Phaser constructor param)\n *    - Dimensions are always known and stable\n *    - getBounds() adds unnecessary overhead\n *    - Rotation affects visual but not logical dimensions (pattern stays in rect)\n *    Implementation: __getLayoutSize = () => ({ width, height })\n *\n * 3. Tiling Props: DIRECT PHASER MAPPING ✅\n *    Decision: Expose Phaser's tilePosition/tileScale props directly\n *    Props:\n *    - tilePositionX/Y: Offset for scrolling effect (default: 0)\n *    - tileScaleX/Y: Tile size multiplier (default: 1)\n *    Example:\n *      <TileSprite\n *        texture=\"clouds\"\n *        width={800} height={200}\n *        tilePositionX={scrollOffset}\n *        tileScaleX={2} // Tiles 2x larger\n *      />\n *    Note: tilePosition updates are cheap (WebGL texture wrapping, no redraw)\n *\n * 4. Sizing Strategy: HYBRID LAYOUT SUPPORT ✅\n *    Decision: Support both explicit and layout-aware sizing\n *    Behavior:\n *    - Explicit pixels: width={800} height={200} → Fixed size\n *    - Layout string: width=\"100%\" height=\"50%\" → Resolved from parent\n *    - Layout fill: width={undefined} → Auto-fill parent (if parent sized)\n *    Implementation:\n *    - Resolve layout size in creator using existing size-resolver\n *    - Create TileSprite with resolved pixel dimensions\n *    - Update dimensions in patcher if layout props change\n *    Phaser Limitation: TileSprite dimensions can't change after creation\n *      → Workaround: Recreate TileSprite if dimensions change (expensive!)\n *\n * 5. Performance Characteristics: OPTIMAL FOR PATTERNS ✅\n *    Advantages:\n *    - WebGL texture wrapping (hardware-accelerated, no CPU cost)\n *    - tilePosition updates are free (just shader uniform)\n *    - Good for large repeating areas (better than multiple sprites)\n *    - No geometry regeneration on scroll\n *    Limitations:\n *    - Texture must support wrapping (power-of-2 dimensions recommended)\n *    - Rotation/scale affects entire area (not individual tiles)\n *    - Can't change dimensions dynamically (requires recreation)\n *\n * 6. Animation Support: USER CODE ✅\n *    Decision: No built-in animation helpers\n *    Reasoning:\n *    - Scrolling patterns vary widely (linear, sine wave, parallax)\n *    - Simple to implement in user code:\n *        const [scroll, setScroll] = useState(0)\n *        useEffect(() => {\n *          const timer = setInterval(() => setScroll(s => s + 1), 16)\n *          return () => clearInterval(timer)\n *        }, [])\n *        <TileSprite tilePositionX={scroll} />\n *    - No need for framework abstraction\n *    Future: Consider useScrollingPattern hook if demand is high\n *\n * 7. Common Use Cases & Patterns: DOCUMENTED ✅\n *    Best For:\n *    - ✅ Scrolling backgrounds (clouds, stars, terrain)\n *    - ✅ Infinite repeating patterns (tiles, grids)\n *    - ✅ Parallax layers (different scroll speeds)\n *    - ✅ Textured fills (progress bars, health bars)\n *    Avoid For:\n *    - ❌ Static backgrounds → Use Image (simpler)\n *    - ❌ Complex patterns → Use Graphics or multiple Sprites\n *    - ❌ Animated tiles → Use Sprite with animation\n *\n * 8. Origin Behavior: UI-FRIENDLY DEFAULT 🆕\n *    Decision: Default origin (0, 0) like Image (differs from Sprite!)\n *    Reasoning:\n *    - TileSprites typically used as backgrounds/fills (top-left alignment)\n *    - Matches Image component behavior (UI semantics)\n *    - Easier layout calculations\n *    - Allow override via originX/originY for special cases\n *\n * 9. Rotation & Tiling: DOCUMENTED BEHAVIOR 🆕\n *    Behavior:\n *    - Rotation rotates entire TileSprite area (not individual tiles)\n *    - Tile pattern remains axis-aligned in texture space\n *    - Useful for rotated pattern fills, but limited flexibility\n *    - For rotated individual tiles, use multiple Sprite instances\n *\n * Implementation Checklist:\n * ========================\n * [✅] Create TileSprite with scene.add.tileSprite(x, y, width, height, texture, frame)\n * [✅] Set origin to (0, 0) by default (UI-friendly)\n * [✅] Apply transform props via applyTransformProps\n * [✅] Setup tilePosition/tileScale props\n * [✅] Setup layout size provider (width/height)\n * [✅] Handle dimension changes via setSize\n * [✅] Support tint, origin props\n * [✅] Document power-of-2 texture recommendation\n */\nimport type * as Phaser from 'phaser'\nimport type { LayoutProps, PhaserProps, TransformProps } from '../../core-props'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { LayoutSize } from '../../layout'\nimport type { PropsDefaultExtension } from '../../types'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\n/**\n * Base props for TileSprite component\n */\nexport interface TileSpriteBaseProps extends TransformProps, PhaserProps, LayoutProps {\n  /** Texture key (loaded via Phaser's texture manager) */\n  texture: string\n\n  /** Optional frame from texture atlas */\n  frame?: string | number\n\n  /** Width of the tile sprite area */\n  width: number\n\n  /** Height of the tile sprite area */\n  height: number\n\n  /** Horizontal tile position offset (for scrolling effect) */\n  tilePositionX?: number\n\n  /** Vertical tile position offset (for scrolling effect) */\n  tilePositionY?: number\n\n  /** Horizontal tile scale factor */\n  tileScaleX?: number\n\n  /** Vertical tile scale factor */\n  tileScaleY?: number\n\n  /** Tint color applied to tiles (0xRRGGBB) */\n  tint?: number\n\n  /** Origin X (0-1, default 0) */\n  originX?: number\n\n  /** Origin Y (0-1, default 0) */\n  originY?: number\n}\n\n/**\n * Props for TileSprite component\n */\nexport interface TileSpriteProps\n  extends TileSpriteBaseProps, PropsDefaultExtension<Phaser.GameObjects.TileSprite> {}\n\ntype TileSpriteNode = Phaser.GameObjects.TileSprite & {\n  __layoutProps?: TileSpriteBaseProps\n  __getLayoutSize?: () => LayoutSize\n}\n\n/**\n * Creates layout infrastructure for TileSprite.\n */\nfunction createTileSpriteLayout(\n  tileSprite: TileSpriteNode,\n  props: Partial<TileSpriteBaseProps>\n): void {\n  tileSprite.__layoutProps = props as TileSpriteBaseProps\n  tileSprite.__getLayoutSize = () => {\n    if (tileSprite.__layoutProps?.headless) {\n      return { width: 0.01, height: 0.01 }\n    }\n\n    return {\n      width: tileSprite.width,\n      height: tileSprite.height,\n    }\n  }\n}\n\nfunction applyTileSpriteProps(\n  tileSprite: Phaser.GameObjects.TileSprite,\n  prev: Partial<TileSpriteBaseProps>,\n  next: Partial<TileSpriteBaseProps>\n): void {\n  if ((prev.texture !== next.texture || prev.frame !== next.frame) && next.texture) {\n    tileSprite.setTexture(next.texture, next.frame)\n  }\n\n  if (\n    (prev.width !== next.width || prev.height !== next.height) &&\n    typeof next.width === 'number' &&\n    typeof next.height === 'number'\n  ) {\n    tileSprite.setSize(next.width, next.height)\n  }\n\n  if (prev.tilePositionX !== next.tilePositionX && typeof next.tilePositionX === 'number') {\n    tileSprite.tilePositionX = next.tilePositionX\n  }\n\n  if (prev.tilePositionY !== next.tilePositionY && typeof next.tilePositionY === 'number') {\n    tileSprite.tilePositionY = next.tilePositionY\n  }\n\n  if (prev.tileScaleX !== next.tileScaleX && typeof next.tileScaleX === 'number') {\n    tileSprite.tileScaleX = next.tileScaleX\n  }\n\n  if (prev.tileScaleY !== next.tileScaleY && typeof next.tileScaleY === 'number') {\n    tileSprite.tileScaleY = next.tileScaleY\n  }\n\n  if (prev.tint !== next.tint) {\n    if (typeof next.tint === 'number') {\n      tileSprite.setTint(next.tint)\n    } else {\n      tileSprite.clearTint()\n    }\n  }\n\n  if (prev.originX !== next.originX || prev.originY !== next.originY) {\n    tileSprite.setOrigin(next.originX ?? tileSprite.originX, next.originY ?? tileSprite.originY)\n  }\n}\n\n/**\n * TileSprite creator - creates a Phaser TileSprite object.\n */\nexport const tileSpriteCreator: HostCreator<'TileSprite'> = (scene, props) => {\n  const tileSprite = scene.add.tileSprite(\n    resolveAnimatableNumber(props.x) ?? 0,\n    resolveAnimatableNumber(props.y) ?? 0,\n    props.width,\n    props.height,\n    props.texture,\n    props.frame\n  )\n\n  tileSprite.setOrigin(props.originX ?? 0, props.originY ?? 0)\n\n  createTransform(tileSprite, props)\n  createPhaser(tileSprite, props)\n  applyTileSpriteProps(tileSprite, {}, props)\n  createTileSpriteLayout(tileSprite as TileSpriteNode, props)\n\n  props.onReady?.(tileSprite)\n\n  return tileSprite\n}\n\n/**\n * TileSprite patcher - updates texture, size, tiling and shared display props.\n */\nexport const tileSpritePatcher: HostPatcher<'TileSprite'> = (node, prev, next) => {\n  applyTransformProps(node, prev, next)\n  applyPhaserProps(node, prev, next)\n  applyTileSpriteProps(node, prev, next)\n\n  const tileSprite = node as TileSpriteNode\n  if (tileSprite.__layoutProps) {\n    tileSprite.__layoutProps = next as TileSpriteBaseProps\n  }\n}\n"],"names":["resolveAnimatableNumber","createTransform","createPhaser","applyTransformProps","applyPhaserProps"],"mappings":";;;;;;AA8KA,SAAS,uBACP,YACA,OACM;AACN,aAAW,gBAAgB;AAC3B,aAAW,kBAAkB,MAAM;AACjC,QAAI,WAAW,eAAe,UAAU;AACtC,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AAEA,WAAO;AAAA,MACL,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,IAAA;AAAA,EAEvB;AACF;AAEA,SAAS,qBACP,YACA,MACA,MACM;AACN,OAAK,KAAK,YAAY,KAAK,WAAW,KAAK,UAAU,KAAK,UAAU,KAAK,SAAS;AAChF,eAAW,WAAW,KAAK,SAAS,KAAK,KAAK;AAAA,EAChD;AAEA,OACG,KAAK,UAAU,KAAK,SAAS,KAAK,WAAW,KAAK,WACnD,OAAO,KAAK,UAAU,YACtB,OAAO,KAAK,WAAW,UACvB;AACA,eAAW,QAAQ,KAAK,OAAO,KAAK,MAAM;AAAA,EAC5C;AAEA,MAAI,KAAK,kBAAkB,KAAK,iBAAiB,OAAO,KAAK,kBAAkB,UAAU;AACvF,eAAW,gBAAgB,KAAK;AAAA,EAClC;AAEA,MAAI,KAAK,kBAAkB,KAAK,iBAAiB,OAAO,KAAK,kBAAkB,UAAU;AACvF,eAAW,gBAAgB,KAAK;AAAA,EAClC;AAEA,MAAI,KAAK,eAAe,KAAK,cAAc,OAAO,KAAK,eAAe,UAAU;AAC9E,eAAW,aAAa,KAAK;AAAA,EAC/B;AAEA,MAAI,KAAK,eAAe,KAAK,cAAc,OAAO,KAAK,eAAe,UAAU;AAC9E,eAAW,aAAa,KAAK;AAAA,EAC/B;AAEA,MAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,QAAI,OAAO,KAAK,SAAS,UAAU;AACjC,iBAAW,QAAQ,KAAK,IAAI;AAAA,IAC9B,OAAO;AACL,iBAAW,UAAA;AAAA,IACb;AAAA,EACF;AAEA,MAAI,KAAK,YAAY,KAAK,WAAW,KAAK,YAAY,KAAK,SAAS;AAClE,eAAW,UAAU,KAAK,WAAW,WAAW,SAAS,KAAK,WAAW,WAAW,OAAO;AAAA,EAC7F;AACF;AAKO,MAAM,oBAA+C,CAAC,OAAO,UAAU;AAC5E,QAAM,aAAa,MAAM,IAAI;AAAA,IAC3BA,wCAAwB,MAAM,CAAC,KAAK;AAAA,IACpCA,wCAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAGR,aAAW,UAAU,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC;AAE3DC,kBAAAA,gBAAgB,YAAY,KAAK;AACjCC,eAAAA,aAAa,YAAY,KAAK;AAC9B,uBAAqB,YAAY,CAAA,GAAI,KAAK;AAC1C,yBAAuB,YAA8B,KAAK;AAE1D,QAAM,UAAU,UAAU;AAE1B,SAAO;AACT;AAKO,MAAM,oBAA+C,CAAC,MAAM,MAAM,SAAS;AAChFC,qCAAoB,MAAM,MAAM,IAAI;AACpCC,+BAAiB,MAAM,MAAM,IAAI;AACjC,uBAAqB,MAAM,MAAM,IAAI;AAErC,QAAM,aAAa;AACnB,MAAI,WAAW,eAAe;AAC5B,eAAW,gBAAgB;AAAA,EAC7B;AACF;;;"}