@number10/jsx-phaser 5.0.0

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

@@ -0,0 +1,157 @@
+import { LayoutProps, PhaserProps, TransformProps } from '../../core-props';
+import { HostCreator, HostPatcher } from '../../host';
+import { PropsDefaultExtension } from '../../types';
+/**
+ * TileSprite component - Phaser TileSprite GameObject (repeating texture pattern)
+ * Status: IMPLEMENTED ✅
+ *
+ * Design Decisions & Answers:
+ * ===========================
+ *
+ * 1. Headless Default: TRUE ✅
+ *    Rationale: TileSprites are typically backgrounds/patterns (decorative).
+ *    They fill available space and shouldn't affect parent dimensions.
+ *    Use Cases:
+ *    - ✅ Headless (default): Scrolling backgrounds, parallax layers, repeating patterns
+ *    - ❌ Layout-aware: Rare - textured progress bars, pattern-filled UI blocks
+ *
+ * 2. Layout Size Provider: SIMPLE DIMENSIONS ✅
+ *    Decision: Use width/height directly (not getBounds)
+ *    Reasoning:
+ *    - TileSprite requires explicit width/height (Phaser constructor param)
+ *    - Dimensions are always known and stable
+ *    - getBounds() adds unnecessary overhead
+ *    - Rotation affects visual but not logical dimensions (pattern stays in rect)
+ *    Implementation: __getLayoutSize = () => ({ width, height })
+ *
+ * 3. Tiling Props: DIRECT PHASER MAPPING ✅
+ *    Decision: Expose Phaser's tilePosition/tileScale props directly
+ *    Props:
+ *    - tilePositionX/Y: Offset for scrolling effect (default: 0)
+ *    - tileScaleX/Y: Tile size multiplier (default: 1)
+ *    Example:
+ *      <TileSprite
+ *        texture="clouds"
+ *        width={800} height={200}
+ *        tilePositionX={scrollOffset}
+ *        tileScaleX={2} // Tiles 2x larger
+ *      />
+ *    Note: tilePosition updates are cheap (WebGL texture wrapping, no redraw)
+ *
+ * 4. Sizing Strategy: HYBRID LAYOUT SUPPORT ✅
+ *    Decision: Support both explicit and layout-aware sizing
+ *    Behavior:
+ *    - Explicit pixels: width={800} height={200} → Fixed size
+ *    - Layout string: width="100%" height="50%" → Resolved from parent
+ *    - Layout fill: width={undefined} → Auto-fill parent (if parent sized)
+ *    Implementation:
+ *    - Resolve layout size in creator using existing size-resolver
+ *    - Create TileSprite with resolved pixel dimensions
+ *    - Update dimensions in patcher if layout props change
+ *    Phaser Limitation: TileSprite dimensions can't change after creation
+ *      → Workaround: Recreate TileSprite if dimensions change (expensive!)
+ *
+ * 5. Performance Characteristics: OPTIMAL FOR PATTERNS ✅
+ *    Advantages:
+ *    - WebGL texture wrapping (hardware-accelerated, no CPU cost)
+ *    - tilePosition updates are free (just shader uniform)
+ *    - Good for large repeating areas (better than multiple sprites)
+ *    - No geometry regeneration on scroll
+ *    Limitations:
+ *    - Texture must support wrapping (power-of-2 dimensions recommended)
+ *    - Rotation/scale affects entire area (not individual tiles)
+ *    - Can't change dimensions dynamically (requires recreation)
+ *
+ * 6. Animation Support: USER CODE ✅
+ *    Decision: No built-in animation helpers
+ *    Reasoning:
+ *    - Scrolling patterns vary widely (linear, sine wave, parallax)
+ *    - Simple to implement in user code:
+ *        const [scroll, setScroll] = useState(0)
+ *        useEffect(() => {
+ *          const timer = setInterval(() => setScroll(s => s + 1), 16)
+ *          return () => clearInterval(timer)
+ *        }, [])
+ *        <TileSprite tilePositionX={scroll} />
+ *    - No need for framework abstraction
+ *    Future: Consider useScrollingPattern hook if demand is high
+ *
+ * 7. Common Use Cases & Patterns: DOCUMENTED ✅
+ *    Best For:
+ *    - ✅ Scrolling backgrounds (clouds, stars, terrain)
+ *    - ✅ Infinite repeating patterns (tiles, grids)
+ *    - ✅ Parallax layers (different scroll speeds)
+ *    - ✅ Textured fills (progress bars, health bars)
+ *    Avoid For:
+ *    - ❌ Static backgrounds → Use Image (simpler)
+ *    - ❌ Complex patterns → Use Graphics or multiple Sprites
+ *    - ❌ Animated tiles → Use Sprite with animation
+ *
+ * 8. Origin Behavior: UI-FRIENDLY DEFAULT 🆕
+ *    Decision: Default origin (0, 0) like Image (differs from Sprite!)
+ *    Reasoning:
+ *    - TileSprites typically used as backgrounds/fills (top-left alignment)
+ *    - Matches Image component behavior (UI semantics)
+ *    - Easier layout calculations
+ *    - Allow override via originX/originY for special cases
+ *
+ * 9. Rotation & Tiling: DOCUMENTED BEHAVIOR 🆕
+ *    Behavior:
+ *    - Rotation rotates entire TileSprite area (not individual tiles)
+ *    - Tile pattern remains axis-aligned in texture space
+ *    - Useful for rotated pattern fills, but limited flexibility
+ *    - For rotated individual tiles, use multiple Sprite instances
+ *
+ * Implementation Checklist:
+ * ========================
+ * [✅] Create TileSprite with scene.add.tileSprite(x, y, width, height, texture, frame)
+ * [✅] Set origin to (0, 0) by default (UI-friendly)
+ * [✅] Apply transform props via applyTransformProps
+ * [✅] Setup tilePosition/tileScale props
+ * [✅] Setup layout size provider (width/height)
+ * [✅] Handle dimension changes via setSize
+ * [✅] Support tint, origin props
+ * [✅] Document power-of-2 texture recommendation
+ */
+import type * as Phaser from 'phaser';
+/**
+ * Base props for TileSprite component
+ */
+export interface TileSpriteBaseProps extends TransformProps, PhaserProps, LayoutProps {
+    /** Texture key (loaded via Phaser's texture manager) */
+    texture: string;
+    /** Optional frame from texture atlas */
+    frame?: string | number;
+    /** Width of the tile sprite area */
+    width: number;
+    /** Height of the tile sprite area */
+    height: number;
+    /** Horizontal tile position offset (for scrolling effect) */
+    tilePositionX?: number;
+    /** Vertical tile position offset (for scrolling effect) */
+    tilePositionY?: number;
+    /** Horizontal tile scale factor */
+    tileScaleX?: number;
+    /** Vertical tile scale factor */
+    tileScaleY?: number;
+    /** Tint color applied to tiles (0xRRGGBB) */
+    tint?: number;
+    /** Origin X (0-1, default 0) */
+    originX?: number;
+    /** Origin Y (0-1, default 0) */
+    originY?: number;
+}
+/**
+ * Props for TileSprite component
+ */
+export interface TileSpriteProps extends TileSpriteBaseProps, PropsDefaultExtension<Phaser.GameObjects.TileSprite> {
+}
+/**
+ * TileSprite creator - creates a Phaser TileSprite object.
+ */
+export declare const tileSpriteCreator: HostCreator<'TileSprite'>;
+/**
+ * TileSprite patcher - updates texture, size, tiling and shared display props.
+ */
+export declare const tileSpritePatcher: HostPatcher<'TileSprite'>;
+//# sourceMappingURL=tilesprite.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tilesprite.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/tilesprite.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GG;AACH,OAAO,KAAK,KAAK,MAAM,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAMxD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,WAAW,EAAE,WAAW;IACnF,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAA;IAEf,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;IAEb,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAA;IAEd,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,eACf,SAAQ,mBAAmB,EAAE,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC;CAAG;AAyEtF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,YAAY,CAoBvD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,YAAY,CASvD,CAAA"}

package/dist/components/primitives/tilesprite.js

@@ -0,0 +1,77 @@
+import { applyPhaserProps } from "../appliers/applyPhaser.js";
+import { applyTransformProps } from "../appliers/applyTransform.js";
+import { createPhaser } from "../creators/createPhaser.js";
+import { resolveAnimatableNumber, createTransform } from "../creators/createTransform.js";
+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(
+    resolveAnimatableNumber(props.x) ?? 0,
+    resolveAnimatableNumber(props.y) ?? 0,
+    props.width,
+    props.height,
+    props.texture,
+    props.frame
+  );
+  tileSprite.setOrigin(props.originX ?? 0, props.originY ?? 0);
+  createTransform(tileSprite, props);
+  createPhaser(tileSprite, props);
+  applyTileSpriteProps(tileSprite, {}, props);
+  createTileSpriteLayout(tileSprite, props);
+  props.onReady?.(tileSprite);
+  return tileSprite;
+};
+const tileSpritePatcher = (node, prev, next) => {
+  applyTransformProps(node, prev, next);
+  applyPhaserProps(node, prev, next);
+  applyTileSpriteProps(node, prev, next);
+  const tileSprite = node;
+  if (tileSprite.__layoutProps) {
+    tileSprite.__layoutProps = next;
+  }
+};
+export {
+  tileSpriteCreator,
+  tileSpritePatcher
+};
+//# sourceMappingURL=tilesprite.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tilesprite.js","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":[],"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,IAC3B,wBAAwB,MAAM,CAAC,KAAK;AAAA,IACpC,wBAAwB,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;AAE3D,kBAAgB,YAAY,KAAK;AACjC,eAAa,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;AAChF,sBAAoB,MAAM,MAAM,IAAI;AACpC,mBAAiB,MAAM,MAAM,IAAI;AACjC,uBAAqB,MAAM,MAAM,IAAI;AAErC,QAAM,aAAa;AACnB,MAAI,WAAW,eAAe;AAC5B,eAAW,gBAAgB;AAAA,EAC7B;AACF;"}

package/dist/components/primitives/vectorDraw.cjs

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PhaserVectorDrawContext = require("../../vector/PhaserVectorDrawContext.cjs");
+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 shallowEqual(a, b) {
+  if (!a || !b) return a === b;
+  if (a.length !== b.length) return false;
+  return a.every((val, i) => val === b[i]);
+}
+function getVectorDrawContext(node) {
+  if (!node.__vectorDrawContext) {
+    node.__vectorDrawContext = new PhaserVectorDrawContext.PhaserVectorDrawContext(node);
+  }
+  return node.__vectorDrawContext;
+}
+function applyVectorDrawLayout(node, props) {
+  node.__layoutProps = props;
+  node.__getLayoutSize = () => {
+    if (props.headless ?? true) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: typeof props.width === "number" ? props.width : 0,
+      height: typeof props.height === "number" ? props.height : 0
+    };
+  };
+}
+function validateVectorDrawLayout(props) {
+  if (props.headless === false && (typeof props.width !== "number" || typeof props.height !== "number")) {
+    throw new Error(
+      "VectorDrawContent requires explicit width and height props when headless=false"
+    );
+  }
+}
+function drawVectorContent(node, props) {
+  if (!props.onDraw) return;
+  if (props.autoClear !== false) {
+    node.clear();
+  }
+  props.onDraw(getVectorDrawContext(node), props);
+  node.__drawDependencies = props.dependencies;
+}
+const vectorDrawCreator = (scene, props) => {
+  validateVectorDrawLayout(props);
+  const graphics = scene.add.graphics();
+  graphics.setPosition(createTransform.resolveAnimatableNumber(props.x) ?? 0, createTransform.resolveAnimatableNumber(props.y) ?? 0);
+  createTransform.createTransform(graphics, props);
+  createPhaser.createPhaser(graphics, props);
+  applyVectorDrawLayout(graphics, props);
+  graphics.__drawDependencies = props.dependencies;
+  graphics.__vectorDrawContext = new PhaserVectorDrawContext.PhaserVectorDrawContext(graphics);
+  if (props.onDraw) {
+    props.onDraw(graphics.__vectorDrawContext, props);
+  }
+  return graphics;
+};
+const vectorDrawPatcher = (node, prev, next) => {
+  const vectorNode = node;
+  validateVectorDrawLayout(next);
+  applyTransform.applyTransformProps(vectorNode, prev, next);
+  applyPhaser.applyPhaserProps(vectorNode, prev, next);
+  applyVectorDrawLayout(vectorNode, next);
+  const depsChanged = !shallowEqual(vectorNode.__drawDependencies, next.dependencies);
+  if (depsChanged) {
+    drawVectorContent(vectorNode, next);
+  }
+};
+exports.vectorDrawCreator = vectorDrawCreator;
+exports.vectorDrawPatcher = vectorDrawPatcher;
+//# sourceMappingURL=vectorDraw.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vectorDraw.cjs","sources":["../../../src/components/primitives/vectorDraw.ts"],"sourcesContent":["import type { VectorDrawContentPrimitiveProps } from '@number10/jsx-core'\nimport type * as Phaser from 'phaser'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { GameObjectWithLayout } from '../../layout/types'\nimport { PhaserVectorDrawContext } from '../../vector'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\ntype VectorDrawNode = Phaser.GameObjects.Graphics &\n  GameObjectWithLayout & {\n    __drawDependencies?: unknown[] | undefined\n    __vectorDrawContext?: PhaserVectorDrawContext | undefined\n  }\n\nfunction shallowEqual(a?: unknown[], b?: unknown[]): boolean {\n  if (!a || !b) return a === b\n  if (a.length !== b.length) return false\n  return a.every((val, i) => val === b[i])\n}\n\nfunction getVectorDrawContext(node: VectorDrawNode): PhaserVectorDrawContext {\n  if (!node.__vectorDrawContext) {\n    node.__vectorDrawContext = new PhaserVectorDrawContext(node)\n  }\n  return node.__vectorDrawContext\n}\n\nfunction applyVectorDrawLayout(\n  node: VectorDrawNode,\n  props: Partial<VectorDrawContentPrimitiveProps>\n): void {\n  node.__layoutProps = props as VectorDrawContentPrimitiveProps\n  node.__getLayoutSize = () => {\n    if (props.headless ?? true) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: typeof props.width === 'number' ? props.width : 0,\n      height: typeof props.height === 'number' ? props.height : 0,\n    }\n  }\n}\n\nfunction validateVectorDrawLayout(props: Partial<VectorDrawContentPrimitiveProps>): void {\n  if (\n    props.headless === false &&\n    (typeof props.width !== 'number' || typeof props.height !== 'number')\n  ) {\n    throw new Error(\n      'VectorDrawContent requires explicit width and height props when headless=false'\n    )\n  }\n}\n\nfunction drawVectorContent(\n  node: VectorDrawNode,\n  props: Partial<VectorDrawContentPrimitiveProps>\n): void {\n  if (!props.onDraw) return\n\n  if (props.autoClear !== false) {\n    node.clear()\n  }\n\n  props.onDraw(getVectorDrawContext(node), props as VectorDrawContentPrimitiveProps)\n  node.__drawDependencies = props.dependencies\n}\n\nexport const vectorDrawCreator: HostCreator<'vectorDraw'> = (scene, props) => {\n  validateVectorDrawLayout(props)\n\n  const graphics = scene.add.graphics() as VectorDrawNode\n  graphics.setPosition(resolveAnimatableNumber(props.x) ?? 0, resolveAnimatableNumber(props.y) ?? 0)\n\n  createTransform(graphics, props)\n  createPhaser(graphics, props)\n  applyVectorDrawLayout(graphics, props)\n  graphics.__drawDependencies = props.dependencies\n  graphics.__vectorDrawContext = new PhaserVectorDrawContext(graphics)\n\n  if (props.onDraw) {\n    props.onDraw(graphics.__vectorDrawContext, props)\n  }\n\n  return graphics\n}\n\nexport const vectorDrawPatcher: HostPatcher<'vectorDraw'> = (node, prev, next) => {\n  const vectorNode = node as VectorDrawNode\n\n  validateVectorDrawLayout(next)\n  applyTransformProps(vectorNode, prev, next)\n  applyPhaserProps(vectorNode, prev, next)\n  applyVectorDrawLayout(vectorNode, next)\n\n  const depsChanged = !shallowEqual(vectorNode.__drawDependencies, next.dependencies)\n  if (depsChanged) {\n    drawVectorContent(vectorNode, next)\n  }\n}\n"],"names":["PhaserVectorDrawContext","resolveAnimatableNumber","createTransform","createPhaser","applyTransformProps","applyPhaserProps"],"mappings":";;;;;;;AAgBA,SAAS,aAAa,GAAe,GAAwB;AAC3D,MAAI,CAAC,KAAK,CAAC,UAAU,MAAM;AAC3B,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,SAAO,EAAE,MAAM,CAAC,KAAK,MAAM,QAAQ,EAAE,CAAC,CAAC;AACzC;AAEA,SAAS,qBAAqB,MAA+C;AAC3E,MAAI,CAAC,KAAK,qBAAqB;AAC7B,SAAK,sBAAsB,IAAIA,wBAAAA,wBAAwB,IAAI;AAAA,EAC7D;AACA,SAAO,KAAK;AACd;AAEA,SAAS,sBACP,MACA,OACM;AACN,OAAK,gBAAgB;AACrB,OAAK,kBAAkB,MAAM;AAC3B,QAAI,MAAM,YAAY,MAAM;AAC1B,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ;AAAA,MACvD,QAAQ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS;AAAA,IAAA;AAAA,EAE9D;AACF;AAEA,SAAS,yBAAyB,OAAuD;AACvF,MACE,MAAM,aAAa,UAClB,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACF;AAEA,SAAS,kBACP,MACA,OACM;AACN,MAAI,CAAC,MAAM,OAAQ;AAEnB,MAAI,MAAM,cAAc,OAAO;AAC7B,SAAK,MAAA;AAAA,EACP;AAEA,QAAM,OAAO,qBAAqB,IAAI,GAAG,KAAwC;AACjF,OAAK,qBAAqB,MAAM;AAClC;AAEO,MAAM,oBAA+C,CAAC,OAAO,UAAU;AAC5E,2BAAyB,KAAK;AAE9B,QAAM,WAAW,MAAM,IAAI,SAAA;AAC3B,WAAS,YAAYC,wCAAwB,MAAM,CAAC,KAAK,GAAGA,wCAAwB,MAAM,CAAC,KAAK,CAAC;AAEjGC,kBAAAA,gBAAgB,UAAU,KAAK;AAC/BC,eAAAA,aAAa,UAAU,KAAK;AAC5B,wBAAsB,UAAU,KAAK;AACrC,WAAS,qBAAqB,MAAM;AACpC,WAAS,sBAAsB,IAAIH,wBAAAA,wBAAwB,QAAQ;AAEnE,MAAI,MAAM,QAAQ;AAChB,UAAM,OAAO,SAAS,qBAAqB,KAAK;AAAA,EAClD;AAEA,SAAO;AACT;AAEO,MAAM,oBAA+C,CAAC,MAAM,MAAM,SAAS;AAChF,QAAM,aAAa;AAEnB,2BAAyB,IAAI;AAC7BI,qCAAoB,YAAY,MAAM,IAAI;AAC1CC,+BAAiB,YAAY,MAAM,IAAI;AACvC,wBAAsB,YAAY,IAAI;AAEtC,QAAM,cAAc,CAAC,aAAa,WAAW,oBAAoB,KAAK,YAAY;AAClF,MAAI,aAAa;AACf,sBAAkB,YAAY,IAAI;AAAA,EACpC;AACF;;;"}

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

@@ -0,0 +1,4 @@
+import { HostCreator, HostPatcher } from '../../host';
+export declare const vectorDrawCreator: HostCreator<'vectorDraw'>;
+export declare const vectorDrawPatcher: HostPatcher<'vectorDraw'>;
+//# sourceMappingURL=vectorDraw.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vectorDraw.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/vectorDraw.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAoE1D,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,YAAY,CAiBvD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,YAAY,CAYvD,CAAA"}

package/dist/components/primitives/vectorDraw.js

@@ -0,0 +1,73 @@
+import { PhaserVectorDrawContext } from "../../vector/PhaserVectorDrawContext.js";
+import { applyPhaserProps } from "../appliers/applyPhaser.js";
+import { applyTransformProps } from "../appliers/applyTransform.js";
+import { createPhaser } from "../creators/createPhaser.js";
+import { resolveAnimatableNumber, createTransform } from "../creators/createTransform.js";
+function shallowEqual(a, b) {
+  if (!a || !b) return a === b;
+  if (a.length !== b.length) return false;
+  return a.every((val, i) => val === b[i]);
+}
+function getVectorDrawContext(node) {
+  if (!node.__vectorDrawContext) {
+    node.__vectorDrawContext = new PhaserVectorDrawContext(node);
+  }
+  return node.__vectorDrawContext;
+}
+function applyVectorDrawLayout(node, props) {
+  node.__layoutProps = props;
+  node.__getLayoutSize = () => {
+    if (props.headless ?? true) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: typeof props.width === "number" ? props.width : 0,
+      height: typeof props.height === "number" ? props.height : 0
+    };
+  };
+}
+function validateVectorDrawLayout(props) {
+  if (props.headless === false && (typeof props.width !== "number" || typeof props.height !== "number")) {
+    throw new Error(
+      "VectorDrawContent requires explicit width and height props when headless=false"
+    );
+  }
+}
+function drawVectorContent(node, props) {
+  if (!props.onDraw) return;
+  if (props.autoClear !== false) {
+    node.clear();
+  }
+  props.onDraw(getVectorDrawContext(node), props);
+  node.__drawDependencies = props.dependencies;
+}
+const vectorDrawCreator = (scene, props) => {
+  validateVectorDrawLayout(props);
+  const graphics = scene.add.graphics();
+  graphics.setPosition(resolveAnimatableNumber(props.x) ?? 0, resolveAnimatableNumber(props.y) ?? 0);
+  createTransform(graphics, props);
+  createPhaser(graphics, props);
+  applyVectorDrawLayout(graphics, props);
+  graphics.__drawDependencies = props.dependencies;
+  graphics.__vectorDrawContext = new PhaserVectorDrawContext(graphics);
+  if (props.onDraw) {
+    props.onDraw(graphics.__vectorDrawContext, props);
+  }
+  return graphics;
+};
+const vectorDrawPatcher = (node, prev, next) => {
+  const vectorNode = node;
+  validateVectorDrawLayout(next);
+  applyTransformProps(vectorNode, prev, next);
+  applyPhaserProps(vectorNode, prev, next);
+  applyVectorDrawLayout(vectorNode, next);
+  const depsChanged = !shallowEqual(vectorNode.__drawDependencies, next.dependencies);
+  if (depsChanged) {
+    drawVectorContent(vectorNode, next);
+  }
+};
+export {
+  vectorDrawCreator,
+  vectorDrawPatcher
+};
+//# sourceMappingURL=vectorDraw.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vectorDraw.js","sources":["../../../src/components/primitives/vectorDraw.ts"],"sourcesContent":["import type { VectorDrawContentPrimitiveProps } from '@number10/jsx-core'\nimport type * as Phaser from 'phaser'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { GameObjectWithLayout } from '../../layout/types'\nimport { PhaserVectorDrawContext } from '../../vector'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\ntype VectorDrawNode = Phaser.GameObjects.Graphics &\n  GameObjectWithLayout & {\n    __drawDependencies?: unknown[] | undefined\n    __vectorDrawContext?: PhaserVectorDrawContext | undefined\n  }\n\nfunction shallowEqual(a?: unknown[], b?: unknown[]): boolean {\n  if (!a || !b) return a === b\n  if (a.length !== b.length) return false\n  return a.every((val, i) => val === b[i])\n}\n\nfunction getVectorDrawContext(node: VectorDrawNode): PhaserVectorDrawContext {\n  if (!node.__vectorDrawContext) {\n    node.__vectorDrawContext = new PhaserVectorDrawContext(node)\n  }\n  return node.__vectorDrawContext\n}\n\nfunction applyVectorDrawLayout(\n  node: VectorDrawNode,\n  props: Partial<VectorDrawContentPrimitiveProps>\n): void {\n  node.__layoutProps = props as VectorDrawContentPrimitiveProps\n  node.__getLayoutSize = () => {\n    if (props.headless ?? true) {\n      return { width: 0.01, height: 0.01 }\n    }\n    return {\n      width: typeof props.width === 'number' ? props.width : 0,\n      height: typeof props.height === 'number' ? props.height : 0,\n    }\n  }\n}\n\nfunction validateVectorDrawLayout(props: Partial<VectorDrawContentPrimitiveProps>): void {\n  if (\n    props.headless === false &&\n    (typeof props.width !== 'number' || typeof props.height !== 'number')\n  ) {\n    throw new Error(\n      'VectorDrawContent requires explicit width and height props when headless=false'\n    )\n  }\n}\n\nfunction drawVectorContent(\n  node: VectorDrawNode,\n  props: Partial<VectorDrawContentPrimitiveProps>\n): void {\n  if (!props.onDraw) return\n\n  if (props.autoClear !== false) {\n    node.clear()\n  }\n\n  props.onDraw(getVectorDrawContext(node), props as VectorDrawContentPrimitiveProps)\n  node.__drawDependencies = props.dependencies\n}\n\nexport const vectorDrawCreator: HostCreator<'vectorDraw'> = (scene, props) => {\n  validateVectorDrawLayout(props)\n\n  const graphics = scene.add.graphics() as VectorDrawNode\n  graphics.setPosition(resolveAnimatableNumber(props.x) ?? 0, resolveAnimatableNumber(props.y) ?? 0)\n\n  createTransform(graphics, props)\n  createPhaser(graphics, props)\n  applyVectorDrawLayout(graphics, props)\n  graphics.__drawDependencies = props.dependencies\n  graphics.__vectorDrawContext = new PhaserVectorDrawContext(graphics)\n\n  if (props.onDraw) {\n    props.onDraw(graphics.__vectorDrawContext, props)\n  }\n\n  return graphics\n}\n\nexport const vectorDrawPatcher: HostPatcher<'vectorDraw'> = (node, prev, next) => {\n  const vectorNode = node as VectorDrawNode\n\n  validateVectorDrawLayout(next)\n  applyTransformProps(vectorNode, prev, next)\n  applyPhaserProps(vectorNode, prev, next)\n  applyVectorDrawLayout(vectorNode, next)\n\n  const depsChanged = !shallowEqual(vectorNode.__drawDependencies, next.dependencies)\n  if (depsChanged) {\n    drawVectorContent(vectorNode, next)\n  }\n}\n"],"names":[],"mappings":";;;;;AAgBA,SAAS,aAAa,GAAe,GAAwB;AAC3D,MAAI,CAAC,KAAK,CAAC,UAAU,MAAM;AAC3B,MAAI,EAAE,WAAW,EAAE,OAAQ,QAAO;AAClC,SAAO,EAAE,MAAM,CAAC,KAAK,MAAM,QAAQ,EAAE,CAAC,CAAC;AACzC;AAEA,SAAS,qBAAqB,MAA+C;AAC3E,MAAI,CAAC,KAAK,qBAAqB;AAC7B,SAAK,sBAAsB,IAAI,wBAAwB,IAAI;AAAA,EAC7D;AACA,SAAO,KAAK;AACd;AAEA,SAAS,sBACP,MACA,OACM;AACN,OAAK,gBAAgB;AACrB,OAAK,kBAAkB,MAAM;AAC3B,QAAI,MAAM,YAAY,MAAM;AAC1B,aAAO,EAAE,OAAO,MAAM,QAAQ,KAAA;AAAA,IAChC;AACA,WAAO;AAAA,MACL,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ;AAAA,MACvD,QAAQ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS;AAAA,IAAA;AAAA,EAE9D;AACF;AAEA,SAAS,yBAAyB,OAAuD;AACvF,MACE,MAAM,aAAa,UAClB,OAAO,MAAM,UAAU,YAAY,OAAO,MAAM,WAAW,WAC5D;AACA,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACF;AAEA,SAAS,kBACP,MACA,OACM;AACN,MAAI,CAAC,MAAM,OAAQ;AAEnB,MAAI,MAAM,cAAc,OAAO;AAC7B,SAAK,MAAA;AAAA,EACP;AAEA,QAAM,OAAO,qBAAqB,IAAI,GAAG,KAAwC;AACjF,OAAK,qBAAqB,MAAM;AAClC;AAEO,MAAM,oBAA+C,CAAC,OAAO,UAAU;AAC5E,2BAAyB,KAAK;AAE9B,QAAM,WAAW,MAAM,IAAI,SAAA;AAC3B,WAAS,YAAY,wBAAwB,MAAM,CAAC,KAAK,GAAG,wBAAwB,MAAM,CAAC,KAAK,CAAC;AAEjG,kBAAgB,UAAU,KAAK;AAC/B,eAAa,UAAU,KAAK;AAC5B,wBAAsB,UAAU,KAAK;AACrC,WAAS,qBAAqB,MAAM;AACpC,WAAS,sBAAsB,IAAI,wBAAwB,QAAQ;AAEnE,MAAI,MAAM,QAAQ;AAChB,UAAM,OAAO,SAAS,qBAAqB,KAAK;AAAA,EAClD;AAEA,SAAO;AACT;AAEO,MAAM,oBAA+C,CAAC,MAAM,MAAM,SAAS;AAChF,QAAM,aAAa;AAEnB,2BAAyB,IAAI;AAC7B,sBAAoB,YAAY,MAAM,IAAI;AAC1C,mBAAiB,YAAY,MAAM,IAAI;AACvC,wBAAsB,YAAY,IAAI;AAEtC,QAAM,cAAc,CAAC,aAAa,WAAW,oBAAoB,KAAK,YAAY;AAClF,MAAI,aAAa;AACf,sBAAkB,YAAY,IAAI;AAAA,EACpC;AACF;"}

package/dist/components/primitives/view.cjs

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+require("phaser");
+const applyBackground = require("../appliers/applyBackground.cjs");
+const applyGestures = require("../appliers/applyGestures.cjs");
+const applyLayout = require("../appliers/applyLayout.cjs");
+const applyPhaser = require("../appliers/applyPhaser.cjs");
+const applyTooltip = require("../appliers/applyTooltip.cjs");
+const applyTransform = require("../appliers/applyTransform.cjs");
+const createBackground = require("../creators/createBackground.cjs");
+const createGestures = require("../creators/createGestures.cjs");
+const createLayout = require("../creators/createLayout.cjs");
+const createPhaser = require("../creators/createPhaser.cjs");
+const createTransform = require("../creators/createTransform.cjs");
+function normalizeBackgroundProps(props) {
+  const bgProps = props;
+  const hasBackground = bgProps.backgroundColor !== void 0;
+  const hasBorder = bgProps.borderColor !== void 0;
+  if (!hasBackground && !hasBorder) {
+    return props;
+  }
+  const normalized = { ...props };
+  if (hasBackground && bgProps.backgroundAlpha === void 0) {
+    normalized.backgroundAlpha = 1;
+  }
+  if (hasBorder) {
+    if (bgProps.borderWidth === void 0 || bgProps.borderWidth === 0) {
+      normalized.borderWidth = 1;
+    }
+    if (bgProps.borderAlpha === void 0 || bgProps.borderAlpha === 0) {
+      normalized.borderAlpha = 1;
+    }
+  }
+  return normalized;
+}
+const viewCreator = (scene, props) => {
+  if (props.backgroundColor !== void 0 || props.cornerRadius !== void 0) {
+    jsxCore.DebugLogger.log("theme", "View Creator - Props received:", {
+      backgroundColor: props.backgroundColor,
+      cornerRadius: props.cornerRadius,
+      width: props.width,
+      height: props.height
+    });
+  }
+  const normalizedProps = normalizeBackgroundProps(props);
+  const container = scene.add.container(
+    createTransform.resolveAnimatableNumber(normalizedProps.x) ?? 0,
+    createTransform.resolveAnimatableNumber(normalizedProps.y) ?? 0
+  );
+  createTransform.createTransform(container, normalizedProps);
+  createPhaser.createPhaser(container, normalizedProps);
+  createBackground.createBackground(
+    scene,
+    container,
+    normalizedProps
+  );
+  createLayout.createLayout(container, normalizedProps);
+  if (normalizedProps.onTooltip) {
+    const handlers = applyTooltip.applyTooltip(
+      scene,
+      container,
+      normalizedProps.onTooltip,
+      normalizedProps.onHoverStart,
+      normalizedProps.onHoverEnd
+    );
+    normalizedProps.onHoverStart = handlers.onHoverStart;
+    normalizedProps.onHoverEnd = handlers.onHoverEnd;
+  }
+  createGestures.createGestures(scene, container, normalizedProps);
+  jsxCore.DebugLogger.log(
+    "layout",
+    "View creator storing __layoutProps with padding:",
+    normalizedProps.padding
+  );
+  return container;
+};
+const viewPatcher = (node, prev, next) => {
+  const normalizedPrev = normalizeBackgroundProps(prev);
+  const normalizedNext = normalizeBackgroundProps(next);
+  applyTransform.applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaser.applyPhaserProps(node, normalizedPrev, normalizedNext);
+  const container = node;
+  applyBackground.applyBackgroundProps(container, normalizedPrev, normalizedNext);
+  if (container.scene && container.scene.data) {
+    if (normalizedNext.onTooltip) {
+      const handlers = applyTooltip.applyTooltip(
+        container.scene,
+        container,
+        normalizedNext.onTooltip,
+        normalizedNext.onHoverStart,
+        normalizedNext.onHoverEnd
+      );
+      normalizedNext.onHoverStart = handlers.onHoverStart;
+      normalizedNext.onHoverEnd = handlers.onHoverEnd;
+    }
+  }
+  if (container.scene && container.scene.data) {
+    applyGestures.applyGesturesProps(container.scene, container, normalizedPrev, normalizedNext);
+  }
+  applyLayout.applyLayoutProps(container, normalizedPrev, normalizedNext);
+};
+exports.viewCreator = viewCreator;
+exports.viewPatcher = viewPatcher;
+//# sourceMappingURL=view.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.cjs","sources":["../../../src/components/primitives/view.ts"],"sourcesContent":["/**\n * View component - Phaser Container with background Graphics and layout system\n * Status: IMPLEMENTED ✅\n *\n * Design Overview:\n * ================\n *\n * 1. Component Role: LAYOUT CONTAINER\n *    Purpose: Primary layout primitive for UI composition\n *    Composition: Phaser.Container + Background Graphics (optional)\n *    Responsibilities:\n *    - Layout orchestration (flexbox-style positioning of children)\n *    - Visual styling (background color, borders, corner radius)\n *    - Gesture handling (touch/mouse interaction)\n *    - Dimension management (defines its own size + provides context for children)\n *\n * 2. Headless Behavior: NEVER HEADLESS ⚠️\n *    Decision: View cannot be headless (always participates in layout)\n *    Reasoning:\n *    - View IS the layout system - it defines layout context for children\n *    - Background Graphics has special role (__isBackground flag)\n *    - Graphics is internal to View, excluded from child layout calculations\n *    - If you need non-layout container, use raw Phaser.Container directly\n *\n * 3. Layout System Architecture:\n *    Two-part system:\n *    A) Background Graphics (special role):\n *       - Defines View dimensions (not a layout child!)\n *       - Marked with __isBackground = true\n *       - Filtered out in layout calculations (see isLayoutChild helper)\n *       - Automatically resized to match container dimensions\n *    B) Layout Engine:\n *       - Processes children (Views, Text, Images, etc.)\n *       - Applies flexbox-style layout (row/column/stack)\n *       - Respects headless flag on children\n *       - Updates child positions/sizes based on layout props\n *\n * 4. Background Graphics vs. Graphics Component:\n *    Distinction:\n *    - View Background: Internal, auto-managed, defines dimensions, __isBackground=true\n *    - Graphics Component: User-facing, custom shapes, typically headless=true\n *    - Both use Phaser.Graphics but completely different purposes\n *\n * 5. Layout Size Provider:\n *    Implementation: __getLayoutSize returns explicit or calculated dimensions\n *    Behavior:\n *    - Explicit width/height: Use those values\n *    - Auto-size (undefined): Calculate from children + padding\n *    - Percentage/fill: Resolve from parent context\n *    - Critical: Background Graphics updates to match final size\n *\n * 6. Gesture System Integration:\n *    Features:\n *    - enableGestures: true enables touch/mouse interaction\n *    - Hit area automatically sized to container dimensions\n *    - Updated after layout recalculation (deferred queue)\n *    - Supports: onTouch, onTouchMove, onDoubleTap, onLongPress\n *    - Cross-platform (transparent mouse/touch support)\n *\n * 7. Styling Props:\n *    Background:\n *    - backgroundColor/backgroundAlpha: Fill color\n *    - cornerRadius: Rounded corners (number or per-corner object)\n *    - borderColor/borderWidth/borderAlpha: Stroke\n *    Auto-defaults:\n *    - backgroundAlpha defaults to 1 if backgroundColor set\n *    - borderWidth defaults to 1 if borderColor set\n *\n * 8. Common Patterns:\n *    Layout Container:\n *      <View direction=\"row\" gap={10} padding={20}>\n *        <View flex={1}>Left</View>\n *        <View flex={2}>Right</View>\n *      </View>\n *    Styled Box:\n *      <View backgroundColor={0x3498db} cornerRadius={8} padding={16}>\n *        <Text text=\"Card Content\" />\n *      </View>\n *    Interactive Area:\n *      <View enableGestures={true} onTouch={() => console.log('clicked')}>\n *        <Text text=\"Button\" />\n *      </View>\n *\n * 9. Performance Considerations:\n *    - Background Graphics redrawn only when visual props change\n *    - Layout calculations batched (LayoutBatchQueue)\n *    - Gesture hit areas updated in deferred queue (post-layout)\n *    - Overflow masking (overflow=\"hidden\") adds Phaser mask overhead\n *\n * 10. Known Limitations:\n *     - Background Graphics cannot be independently positioned/rotated\n *     - Nested View layout recalculations can be expensive (use sparingly)\n *     - Gesture system requires scene pointer plugin (auto-enabled)\n *\n * Implementation Status:\n * ======================\n * [✅] Phaser Container creation\n * [✅] Background Graphics with styling (color, border, radius)\n * [✅] Layout system integration (__layoutProps, __getLayoutSize)\n * [✅] Transform props (position, rotation, scale, alpha)\n * [✅] Gesture system (enableGestures, interaction callbacks)\n * [✅] Auto-defaults for background/border alpha\n * [✅] Overflow masking support\n * [✅] Theme system integration\n * [✅] Deferred layout queue for gesture updates\n */\nimport { DebugLogger } from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\nimport type {\n  BackgroundProps,\n  GestureProps,\n  LayoutProps,\n  PhaserProps,\n  TransformProps,\n} from '../../core-props'\nimport type { HostCreator, HostPatcher } from '../../host'\nimport type { PropsContainerExtension, PropsDefaultExtension } from '../../types'\nimport { applyBackgroundProps } from '../appliers/applyBackground'\nimport { applyGesturesProps } from '../appliers/applyGestures'\nimport { applyLayoutProps } from '../appliers/applyLayout'\nimport { applyPhaserProps } from '../appliers/applyPhaser'\nimport { applyTooltip } from '../appliers/applyTooltip'\nimport { applyTransformProps } from '../appliers/applyTransform'\nimport type { BackgroundImage } from '../backgroundImage'\nimport { createBackground } from '../creators/createBackground'\nimport { createGestures } from '../creators/createGestures'\nimport { createLayout } from '../creators/createLayout'\nimport { createPhaser } from '../creators/createPhaser'\nimport { createTransform, resolveAnimatableNumber } from '../creators/createTransform'\n\n/**\n * Normalize background props - apply auto-defaults for alpha and border width\n * @param props - Original props\n * @returns Normalized props with auto-defaults applied\n */\nfunction normalizeBackgroundProps<T>(props: T): T {\n  // Only process if props contain background/border properties\n  const bgProps = props as unknown as Partial<BackgroundProps>\n  const hasBackground = bgProps.backgroundColor !== undefined\n  const hasBorder = bgProps.borderColor !== undefined\n\n  // If no background/border props, return as-is\n  if (!hasBackground && !hasBorder) {\n    return props\n  }\n\n  // Only apply defaults if the prop is explicitly undefined or 0 (theme default)\n  // This allows users to override with explicit values\n  const normalized = { ...props } as T & Partial<BackgroundProps>\n\n  if (hasBackground && bgProps.backgroundAlpha === undefined) {\n    normalized.backgroundAlpha = 1\n  }\n\n  if (hasBorder) {\n    if (bgProps.borderWidth === undefined || bgProps.borderWidth === 0) {\n      normalized.borderWidth = 1\n    }\n    if (bgProps.borderAlpha === undefined || bgProps.borderAlpha === 0) {\n      normalized.borderAlpha = 1\n    }\n  }\n\n  return normalized as T\n}\n\n/**\n * Base props for View - composing shared prop groups\n */\nexport interface ViewBaseProps\n  extends TransformProps, PhaserProps, LayoutProps, BackgroundProps, GestureProps {}\n\n/**\n * Props for View (Container) component - extends base props with JSX-specific props\n */\nexport interface ViewProps\n  extends\n    ViewBaseProps,\n    PropsDefaultExtension<Phaser.GameObjects.Container>,\n    PropsContainerExtension {}\n\n/**\n * View creator - creates a Phaser Container with optional background and interaction\n */\nexport const viewCreator: HostCreator<'View'> = (scene, props) => {\n  // Debug: Log props to verify theme values\n  if (props.backgroundColor !== undefined || props.cornerRadius !== undefined) {\n    DebugLogger.log('theme', 'View Creator - Props received:', {\n      backgroundColor: props.backgroundColor,\n      cornerRadius: props.cornerRadius,\n      width: props.width,\n      height: props.height,\n    })\n  }\n\n  // Normalize props early - apply auto-defaults for background/border\n  const normalizedProps = normalizeBackgroundProps(props)\n\n  const container = scene.add.container(\n    resolveAnimatableNumber(normalizedProps.x) ?? 0,\n    resolveAnimatableNumber(normalizedProps.y) ?? 0\n  )\n\n  // Apply transform props (scale, rotation)\n  createTransform(container, normalizedProps)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  createPhaser(container, normalizedProps)\n\n  // Add background if backgroundColor is provided\n  createBackground(\n    scene,\n    container as typeof container & { __background?: BackgroundImage },\n    normalizedProps\n  )\n\n  // Setup layout system (props and size provider)\n  // Must be before createGestures so __getLayoutSize is available\n  createLayout(container, normalizedProps)\n\n  // Tooltip support - inject hover handlers if onTooltip is present\n  if (normalizedProps.onTooltip) {\n    const handlers = applyTooltip(\n      scene,\n      container,\n      normalizedProps.onTooltip,\n      normalizedProps.onHoverStart,\n      normalizedProps.onHoverEnd\n    )\n    normalizedProps.onHoverStart = handlers.onHoverStart\n    normalizedProps.onHoverEnd = handlers.onHoverEnd\n  }\n\n  // Setup gesture system (high-level touch/mouse gestures)\n  createGestures(scene, container, normalizedProps)\n\n  // Debug: Log layout props storage\n  DebugLogger.log(\n    'layout',\n    'View creator storing __layoutProps with padding:',\n    normalizedProps.padding\n  )\n\n  return container\n}\n\n/**\n * View patcher - updates View properties\n */\nexport const viewPatcher: HostPatcher<'View'> = (node, prev, next) => {\n  // Normalize props early - apply auto-defaults for background/border\n  const normalizedPrev = normalizeBackgroundProps(prev)\n  const normalizedNext = normalizeBackgroundProps(next)\n\n  // Apply transform props (position, rotation, scale)\n  applyTransformProps(node, normalizedPrev, normalizedNext)\n\n  // Apply Phaser display props (alpha, depth, visible)\n  applyPhaserProps(node, normalizedPrev, normalizedNext)\n\n  // Background updates\n  const container = node as Phaser.GameObjects.Container & {\n    __background?: BackgroundImage\n  }\n\n  applyBackgroundProps(container, normalizedPrev, normalizedNext)\n\n  // Tooltip support (integrates with gesture system)\n  // Apply before gestures so hover handlers can be injected\n  if (container.scene && container.scene.data) {\n    if (normalizedNext.onTooltip) {\n      const handlers = applyTooltip(\n        container.scene,\n        container,\n        normalizedNext.onTooltip,\n        normalizedNext.onHoverStart,\n        normalizedNext.onHoverEnd\n      )\n      // Inject hover handlers for tooltip\n      normalizedNext.onHoverStart = handlers.onHoverStart\n      normalizedNext.onHoverEnd = handlers.onHoverEnd\n    }\n  }\n\n  // Gesture event handlers (high-level touch/mouse gestures)\n  // Safety check: ensure container has valid scene before applying gestures\n  if (container.scene && container.scene.data) {\n    applyGesturesProps(container.scene, container, normalizedPrev, normalizedNext)\n  }\n\n  // Apply layout props and recalculate if needed\n  applyLayoutProps(container, normalizedPrev, normalizedNext)\n}\n"],"names":["DebugLogger","resolveAnimatableNumber","createTransform","createPhaser","createBackground","createLayout","applyTooltip","createGestures","applyTransformProps","applyPhaserProps","applyBackgroundProps","applyGesturesProps","applyLayoutProps"],"mappings":";;;;;;;;;;;;;;;AAuIA,SAAS,yBAA4B,OAAa;AAEhD,QAAM,UAAU;AAChB,QAAM,gBAAgB,QAAQ,oBAAoB;AAClD,QAAM,YAAY,QAAQ,gBAAgB;AAG1C,MAAI,CAAC,iBAAiB,CAAC,WAAW;AAChC,WAAO;AAAA,EACT;AAIA,QAAM,aAAa,EAAE,GAAG,MAAA;AAExB,MAAI,iBAAiB,QAAQ,oBAAoB,QAAW;AAC1D,eAAW,kBAAkB;AAAA,EAC/B;AAEA,MAAI,WAAW;AACb,QAAI,QAAQ,gBAAgB,UAAa,QAAQ,gBAAgB,GAAG;AAClE,iBAAW,cAAc;AAAA,IAC3B;AACA,QAAI,QAAQ,gBAAgB,UAAa,QAAQ,gBAAgB,GAAG;AAClE,iBAAW,cAAc;AAAA,IAC3B;AAAA,EACF;AAEA,SAAO;AACT;AAoBO,MAAM,cAAmC,CAAC,OAAO,UAAU;AAEhE,MAAI,MAAM,oBAAoB,UAAa,MAAM,iBAAiB,QAAW;AAC3EA,wBAAY,IAAI,SAAS,kCAAkC;AAAA,MACzD,iBAAiB,MAAM;AAAA,MACvB,cAAc,MAAM;AAAA,MACpB,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM;AAAA,IAAA,CACf;AAAA,EACH;AAGA,QAAM,kBAAkB,yBAAyB,KAAK;AAEtD,QAAM,YAAY,MAAM,IAAI;AAAA,IAC1BC,wCAAwB,gBAAgB,CAAC,KAAK;AAAA,IAC9CA,wCAAwB,gBAAgB,CAAC,KAAK;AAAA,EAAA;AAIhDC,kBAAAA,gBAAgB,WAAW,eAAe;AAG1CC,eAAAA,aAAa,WAAW,eAAe;AAGvCC,mBAAAA;AAAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAKFC,eAAAA,aAAa,WAAW,eAAe;AAGvC,MAAI,gBAAgB,WAAW;AAC7B,UAAM,WAAWC,aAAAA;AAAAA,MACf;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAAA;AAElB,oBAAgB,eAAe,SAAS;AACxC,oBAAgB,aAAa,SAAS;AAAA,EACxC;AAGAC,gCAAe,OAAO,WAAW,eAAe;AAGhDP,UAAAA,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAAA;AAGlB,SAAO;AACT;AAKO,MAAM,cAAmC,CAAC,MAAM,MAAM,SAAS;AAEpE,QAAM,iBAAiB,yBAAyB,IAAI;AACpD,QAAM,iBAAiB,yBAAyB,IAAI;AAGpDQ,qCAAoB,MAAM,gBAAgB,cAAc;AAGxDC,+BAAiB,MAAM,gBAAgB,cAAc;AAGrD,QAAM,YAAY;AAIlBC,uCAAqB,WAAW,gBAAgB,cAAc;AAI9D,MAAI,UAAU,SAAS,UAAU,MAAM,MAAM;AAC3C,QAAI,eAAe,WAAW;AAC5B,YAAM,WAAWJ,aAAAA;AAAAA,QACf,UAAU;AAAA,QACV;AAAA,QACA,eAAe;AAAA,QACf,eAAe;AAAA,QACf,eAAe;AAAA,MAAA;AAGjB,qBAAe,eAAe,SAAS;AACvC,qBAAe,aAAa,SAAS;AAAA,IACvC;AAAA,EACF;AAIA,MAAI,UAAU,SAAS,UAAU,MAAM,MAAM;AAC3CK,kBAAAA,mBAAmB,UAAU,OAAO,WAAW,gBAAgB,cAAc;AAAA,EAC/E;AAGAC,+BAAiB,WAAW,gBAAgB,cAAc;AAC5D;;;"}

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

@@ -0,0 +1,23 @@
+import { BackgroundProps, GestureProps, LayoutProps, PhaserProps, TransformProps } from '../../core-props';
+import { HostCreator, HostPatcher } from '../../host';
+import { PropsContainerExtension, PropsDefaultExtension } from '../../types';
+import * as Phaser from 'phaser';
+/**
+ * Base props for View - composing shared prop groups
+ */
+export interface ViewBaseProps extends TransformProps, PhaserProps, LayoutProps, BackgroundProps, GestureProps {
+}
+/**
+ * Props for View (Container) component - extends base props with JSX-specific props
+ */
+export interface ViewProps extends ViewBaseProps, PropsDefaultExtension<Phaser.GameObjects.Container>, PropsContainerExtension {
+}
+/**
+ * View creator - creates a Phaser Container with optional background and interaction
+ */
+export declare const viewCreator: HostCreator<'View'>;
+/**
+ * View patcher - updates View properties
+ */
+export declare const viewPatcher: HostPatcher<'View'>;
+//# sourceMappingURL=view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/view.ts"],"names":[],"mappings":"AA2GA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAChC,OAAO,KAAK,EACV,eAAe,EACf,YAAY,EACZ,WAAW,EACX,WAAW,EACX,cAAc,EACf,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAkDjF;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY;CAAG;AAEpF;;GAEG;AACH,MAAM,WAAW,SACf,SACE,aAAa,EACb,qBAAqB,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,EACnD,uBAAuB;CAAG;AAE9B;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CA4D3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,MAAM,CA2C3C,CAAA"}