@number10/phaserjsx 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/{TransformOriginView-BYPbRH8N.cjs → TransformOriginView-BDM6GE2F.cjs} +618 -441
  2. package/dist/{TransformOriginView-BYPbRH8N.cjs.map → TransformOriginView-BDM6GE2F.cjs.map} +1 -1
  3. package/dist/{TransformOriginView-CO-tJCmV.js → TransformOriginView-CiFiQcku.js} +676 -499
  4. package/dist/{TransformOriginView-CO-tJCmV.js.map → TransformOriginView-CiFiQcku.js.map} +1 -1
  5. package/dist/colors/index.d.ts +1 -1
  6. package/dist/colors/index.d.ts.map +1 -1
  7. package/dist/colors/preset-manager.d.ts +11 -7
  8. package/dist/colors/preset-manager.d.ts.map +1 -1
  9. package/dist/components/custom/Sidebar.d.ts.map +1 -1
  10. package/dist/components/custom/index.cjs +29 -29
  11. package/dist/components/custom/index.js +1 -1
  12. package/dist/index.cjs +230 -226
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/index.js +81 -77
  15. package/dist/index.js.map +1 -1
  16. package/dist/theme-defaults.d.ts +7 -1
  17. package/dist/theme-defaults.d.ts.map +1 -1
  18. package/dist/theme.d.ts +6 -4
  19. package/dist/theme.d.ts.map +1 -1
  20. package/dist/vdom.d.ts +6 -0
  21. package/dist/vdom.d.ts.map +1 -1
  22. package/package.json +1 -1
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/fx/use-fx.ts","../src/fx/fx-creators/blur.ts","../src/fx/fx-creators/color-matrix.ts","../src/fx/fx-creators/glow.ts","../src/fx/fx-creators/pixelate.ts","../src/fx/fx-creators/shadow.ts","../src/fx/fx-creators/vignette.ts","../src/fx/fx-registry.ts","../src/fx/convenience-hooks/use-blur.ts","../src/fx/convenience-hooks/use-glow.ts","../src/fx/convenience-hooks/use-shadow.ts","../src/memo.ts","../src/colors/use-color-mode.ts","../src/colors/use-colors.ts","../src/colors/color-theme-helpers.ts","../src/colors/preset-manager.ts","../src/design-tokens/use-theme-tokens.ts","../src/index.ts"],"sourcesContent":["/**\n * Hook for applying Phaser PostFX/PreFX pipeline effects\n * Manages FX lifecycle with proper cleanup\n */\nimport { useEffect, useRef } from '../hooks'\n\n/**\n * Ref object type\n */\ntype RefObject<T> = { current: T | null }\n\n/**\n * FX configuration base type\n */\nexport interface FXConfig {\n intensity?: number\n quality?: number\n onComplete?: () => void\n}\n\n/**\n * FX type discriminator (postFX vs preFX)\n */\nexport type FXType = 'post' | 'pre'\n\n/**\n * GameObject with FX pipeline support\n */\nexport type FXCapableGameObject =\n | Phaser.GameObjects.Image\n | Phaser.GameObjects.Sprite\n | Phaser.GameObjects.Container\n | Phaser.GameObjects.Text\n | Phaser.GameObjects.TileSprite\n | Phaser.GameObjects.NineSlice\n | Phaser.GameObjects.RenderTexture\n | Phaser.GameObjects.Video\n\n/**\n * FX creator function signature\n * @param obj - GameObject with FX pipeline\n * @param config - Effect-specific configuration\n * @param type - 'post' or 'pre' FX pipeline\n * @returns Cleanup function or FX controller (or any Phaser.FX effect)\n */\nexport type FXCreatorFn<TConfig extends FXConfig = FXConfig> = (\n obj: FXCapableGameObject,\n config: TConfig,\n type?: FXType\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => (() => void) | Phaser.FX.Controller | any | null\n\n/**\n * Hook for applying FX to GameObject\n * @param ref - Ref to GameObject\n * @returns Object with applyFX and clearFX methods\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * const { applyFX, clearFX } = useFX(ref)\n *\n * const handleClick = () => {\n * applyFX(createShadowFX, { offsetX: 4, offsetY: 4, blur: 8 })\n * }\n *\n * return <View ref={ref} onClick={handleClick}>Click me</View>\n * ```\n */\nexport function useFX<T extends FXCapableGameObject>(ref: RefObject<T>) {\n const activeEffectsRef = useRef<Set<(() => void) | Phaser.FX.Controller>>(new Set())\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n activeEffectsRef.current.forEach((cleanup) => {\n if (typeof cleanup === 'function') {\n cleanup()\n } else if (cleanup?.destroy) {\n cleanup.destroy()\n }\n })\n activeEffectsRef.current.clear()\n }\n }, [])\n\n const applyFX = <TConfig extends FXConfig>(\n fxCreator: FXCreatorFn<TConfig>,\n config: TConfig,\n type: FXType = 'post'\n ) => {\n const obj = ref.current\n if (!obj) {\n console.warn('[useFX] No object found in ref')\n return\n }\n\n const cleanupOrController = fxCreator(obj, config, type)\n if (cleanupOrController) {\n activeEffectsRef.current.add(cleanupOrController)\n }\n }\n\n const clearFX = () => {\n activeEffectsRef.current.forEach((cleanup) => {\n if (typeof cleanup === 'function') {\n cleanup()\n } else if (cleanup?.destroy) {\n cleanup.destroy()\n }\n })\n activeEffectsRef.current.clear()\n\n // Clear FX pipeline\n const obj = ref.current\n if (obj && 'postFX' in obj && obj.postFX) {\n obj.postFX.clear()\n }\n if (obj && 'preFX' in obj && obj.preFX) {\n obj.preFX.clear()\n }\n }\n\n return { applyFX, clearFX }\n}\n","/**\n * Blur FX creator (Box & Gaussian Blur)\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Blur FX configuration\n */\nexport interface BlurFXConfig extends FXConfig {\n /** The quality of the blur effect. Can be either 0 for Low Quality, 1 for Medium Quality or 2 for High Quality */\n quality?: number\n /** The horizontal offset of the blur effect */\n x?: number\n /** The vertical offset of the blur effect */\n y?: number\n /** The strength of the blur effect */\n strength?: number\n /** The color of the blur, as a hex value */\n color?: number\n /** The number of steps to run the blur effect for. This value should always be an integer */\n steps?: number\n}\n\n/**\n * Create blur FX\n * @param obj - GameObject\n * @param config - Blur configuration\n * @param type - 'post' or 'pre' FX\n * @returns Blur controller\n *\n * @example\n * ```tsx\n * applyFX(createBlurFX, {\n * quality: 1,\n * x: 4,\n * y: 4,\n * strength: 2\n * })\n * ```\n */\nexport const createBlurFX: FXCreatorFn<BlurFXConfig> = (obj, config, type = 'post') => {\n const { quality = 0, x = 2, y = 2, strength = 1, color = 0xffffff, steps = 4 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createBlurFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addBlur(quality, x, y, strength, color, steps)\n const blur = pipeline.addBlur(quality, x, y, strength, color, steps)\n\n return blur\n}\n","/**\n * Color Matrix FX creator (Grayscale, Sepia, Negative, etc.)\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Color Matrix effect types\n */\nexport type ColorMatrixEffect =\n | 'grayscale'\n | 'sepia'\n | 'negative'\n | 'blackWhite'\n | 'brown'\n | 'kodachrome'\n | 'technicolor'\n | 'polaroid'\n\n/**\n * Color Matrix FX configuration\n */\nexport interface ColorMatrixFXConfig extends FXConfig {\n /** Effect type */\n effect?: ColorMatrixEffect\n /** Effect amount (0-1, for effects that support it like grayscale) */\n amount?: number\n}\n\n/**\n * Create color matrix FX\n * @param obj - GameObject\n * @param config - Color matrix configuration\n * @param type - 'post' or 'pre' FX\n * @returns Color matrix controller\n *\n * @example\n * ```tsx\n * applyFX(createColorMatrixFX, {\n * effect: 'grayscale',\n * amount: 1\n * })\n * ```\n */\nexport const createColorMatrixFX: FXCreatorFn<ColorMatrixFXConfig> = (\n obj,\n config,\n type = 'post'\n) => {\n const { effect = 'grayscale', amount = 1 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createColorMatrixFX] FX pipeline not available on this GameObject')\n return null\n }\n\n const colorMatrix = pipeline.addColorMatrix()\n\n // Apply the selected effect\n switch (effect) {\n case 'grayscale':\n colorMatrix.grayscale(amount)\n break\n case 'sepia':\n colorMatrix.sepia()\n break\n case 'negative':\n colorMatrix.negative()\n break\n case 'blackWhite':\n colorMatrix.blackWhite()\n break\n case 'brown':\n colorMatrix.brown()\n break\n case 'kodachrome':\n colorMatrix.kodachrome()\n break\n case 'technicolor':\n colorMatrix.technicolor()\n break\n case 'polaroid':\n colorMatrix.polaroid()\n break\n }\n\n return colorMatrix\n}\n","/**\n * Glow FX creator (Outer Glow)\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Glow FX configuration\n */\nexport interface GlowFXConfig extends FXConfig {\n /** Glow color (hex number) */\n color?: number\n /** The strength of the glow outward from the edge */\n outerStrength?: number\n /** The strength of the glow inward from the edge */\n innerStrength?: number\n /** If true, only the glow is drawn, not the texture itself */\n knockout?: boolean\n /** Sets the quality of this Glow effect (PostFX only, cannot be changed post-creation) */\n quality?: number\n /** Sets the distance of this Glow effect (PostFX only, cannot be changed post-creation) */\n distance?: number\n}\n\n/**\n * Create glow FX\n * @param obj - GameObject\n * @param config - Glow configuration\n * @param type - 'post' or 'pre' FX\n * @returns Glow controller\n *\n * @example\n * ```tsx\n * applyFX(createGlowFX, {\n * color: 0xff6600,\n * outerStrength: 6,\n * innerStrength: 2\n * })\n * ```\n */\nexport const createGlowFX: FXCreatorFn<GlowFXConfig> = (obj, config, type = 'post') => {\n const {\n color = 0xffffff,\n outerStrength = 4,\n innerStrength = 0,\n knockout = false,\n quality = 0.1,\n distance = 10,\n } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createGlowFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addGlow(color, outerStrength, innerStrength, knockout, quality, distance)\n const glow = pipeline.addGlow(color, outerStrength, innerStrength, knockout, quality, distance)\n\n return glow\n}\n","/**\n * Pixelate FX creator\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Pixelate FX configuration\n */\nexport interface PixelateFXConfig extends FXConfig {\n /** The amount of pixelation to apply */\n amount?: number\n}\n\n/**\n * Create pixelate FX\n * @param obj - GameObject\n * @param config - Pixelate configuration\n * @param type - 'post' or 'pre' FX\n * @returns Pixelate controller\n *\n * @example\n * ```tsx\n * applyFX(createPixelateFX, {\n * amount: 8\n * })\n * ```\n */\nexport const createPixelateFX: FXCreatorFn<PixelateFXConfig> = (obj, config, type = 'post') => {\n const { amount = 1 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createPixelateFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addPixelate(amount)\n const pixelate = pipeline.addPixelate(amount)\n\n return pixelate\n}\n","/**\n * Shadow FX creator\n *\n * The shadow effect creates the illusion of depth by adding darker, offset silhouettes\n * beneath game objects, enhancing visual appeal and immersion.\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Shadow FX configuration\n * Maps to Phaser's addShadow(x, y, decay, power, color, samples, intensity)\n */\nexport interface ShadowFXConfig extends FXConfig {\n /** Horizontal offset of the shadow effect (default: 0) */\n x?: number\n /** Vertical offset of the shadow effect (default: 0) */\n y?: number\n /** Amount of decay for shadow effect (default: 0.1) */\n decay?: number\n /** Power of the shadow effect (default: 1) */\n power?: number\n /** Color of the shadow (default: 0x000000) */\n color?: number\n /** Number of samples (1-12, higher = better quality, default: 6) */\n samples?: number\n /** Intensity of the shadow effect (default: 1) */\n intensity?: number\n}\n\n/**\n * Create shadow FX\n * @param obj - GameObject\n * @param config - Shadow configuration\n * @param type - 'post' or 'pre' FX\n * @returns Shadow controller\n *\n * @example\n * ```tsx\n * applyFX(createShadowFX, {\n * x: 0,\n * y: 0,\n * decay: 0.1,\n * power: 1,\n * color: 0x000000,\n * samples: 6,\n * intensity: 1\n * })\n * ```\n */\nexport const createShadowFX: FXCreatorFn<ShadowFXConfig> = (obj, config, type = 'post') => {\n const {\n x = 0,\n y = 1,\n decay = 0.05,\n power = 1,\n color = 0x000000,\n samples = 6,\n intensity = 1,\n } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createShadowFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addShadow(x, y, decay, power, color, samples, intensity)\n const shadow = pipeline.addShadow(x, y, decay, power, color, samples, intensity)\n\n return shadow\n}\n","/**\n * Vignette FX creator\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Vignette FX configuration\n */\nexport interface VignetteFXConfig extends FXConfig {\n /** The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1 */\n x?: number\n /** The vertical offset of the vignette effect. This value is normalized to the range 0 to 1 */\n y?: number\n /** The radius of the vignette effect. This value is normalized to the range 0 to 1 */\n radius?: number\n /** The strength of the vignette effect */\n strength?: number\n}\n\n/**\n * Create vignette FX\n * @param obj - GameObject\n * @param config - Vignette configuration\n * @param type - 'post' or 'pre' FX\n * @returns Vignette controller\n *\n * @example\n * ```tsx\n * applyFX(createVignetteFX, {\n * x: 0.5,\n * y: 0.5,\n * radius: 0.5,\n * strength: 0.7\n * })\n * ```\n */\nexport const createVignetteFX: FXCreatorFn<VignetteFXConfig> = (obj, config, type = 'post') => {\n const { strength = 0.5, radius = 0.5, x = 0.5, y = 0.5 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createVignetteFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser Vignette: addVignette(x, y, radius, strength)\n const vignette = pipeline.addVignette(x, y, radius, strength)\n\n return vignette\n}\n","/**\n * FX Registry - string-based FX lookup\n * Similar to effect-registry.ts for animation effects\n */\nimport {\n createBlurFX,\n createColorMatrixFX,\n createGlowFX,\n createPixelateFX,\n createShadowFX,\n createVignetteFX,\n type BlurFXConfig,\n type ColorMatrixFXConfig,\n type GlowFXConfig,\n type PixelateFXConfig,\n type ShadowFXConfig,\n type VignetteFXConfig,\n} from './fx-creators'\nimport type { FXConfig, FXCreatorFn } from './use-fx'\n\n/**\n * Built-in FX names\n */\nexport type BuiltInFXName =\n | 'shadow'\n | 'glow'\n | 'blur'\n | 'pixelate'\n | 'vignette'\n | 'grayscale'\n | 'sepia'\n | 'negative'\n | 'blackWhite'\n | 'brown'\n | 'kodachrome'\n | 'technicolor'\n | 'polaroid'\n\n/**\n * Extension point for custom FX (declaration merging)\n * @example\n * ```typescript\n * declare module '@number10/phaserjsx/fx' {\n * interface FXNameExtensions {\n * myCustomFX: 'myCustomFX'\n * }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface FXNameExtensions {}\n\n/**\n * All available FX names (built-in + extensions)\n */\nexport type FXName =\n | BuiltInFXName\n | (keyof FXNameExtensions extends never ? never : keyof FXNameExtensions)\n\n/**\n * FX definition with name and config\n */\nexport interface FXDefinition {\n name: FXName\n config?: FXConfig\n}\n\n/**\n * FX Registry mapping names to creator functions\n */\nexport const FX_REGISTRY: Record<BuiltInFXName, FXCreatorFn> = {\n shadow: createShadowFX,\n glow: createGlowFX,\n blur: createBlurFX,\n pixelate: createPixelateFX,\n vignette: createVignetteFX,\n grayscale: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'grayscale' }, type),\n sepia: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: 'sepia' }, type),\n negative: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'negative' }, type),\n blackWhite: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'blackWhite' }, type),\n brown: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: 'brown' }, type),\n kodachrome: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'kodachrome' }, type),\n technicolor: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'technicolor' }, type),\n polaroid: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'polaroid' }, type),\n}\n\n/**\n * Default FX (none)\n */\nexport const DEFAULT_FX: FXName = 'grayscale'\n\n/**\n * Resolve FX by name or function\n * @param fxOrName - FX name string or creator function\n * @returns FX creator function or null\n */\nexport function resolveFX(fxOrName: FXName | FXCreatorFn): FXCreatorFn | null {\n if (typeof fxOrName === 'function') {\n return fxOrName\n }\n return FX_REGISTRY[fxOrName as BuiltInFXName] ?? null\n}\n\n/**\n * Apply FX by name (helper function)\n * @param applyFXFn - applyFX function from useFX hook\n * @param fxName - FX name\n * @param config - FX config\n *\n * @example\n * ```tsx\n * const { applyFX } = useFX(ref)\n * applyFXByName(applyFX, 'shadow', { offsetX: 4, offsetY: 4, blur: 8 })\n * ```\n */\nexport function applyFXByName(\n applyFXFn: ReturnType<typeof import('./use-fx').useFX>['applyFX'],\n fxName: FXName,\n config: FXConfig = {}\n) {\n const creator = resolveFX(fxName)\n if (creator) {\n applyFXFn(creator, config)\n } else {\n console.warn(`[applyFXByName] FX \"${fxName}\" not found in registry`)\n }\n}\n\n// Re-export config types for convenience\nexport type {\n BlurFXConfig,\n ColorMatrixFXConfig,\n GlowFXConfig,\n PixelateFXConfig,\n ShadowFXConfig,\n VignetteFXConfig,\n}\n","/**\n * Convenience hook for automatic blur FX\n * Applies blur on mount and updates on config changes\n */\nimport { useEffect } from '../../hooks'\nimport { createBlurFX, type BlurFXConfig } from '../fx-creators/blur'\nimport { useFX } from '../use-fx'\n\n/**\n * Hook for automatic blur FX\n * @param ref - GameObject ref\n * @param config - Blur config (updates reactively)\n * @returns FX controls\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * useBlur(ref, { strength: 8, steps: 4 })\n *\n * return <View ref={ref}>Content</View>\n * ```\n */\nexport function useBlur(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: { current: any },\n config: BlurFXConfig = {}\n): { clearFX: () => void } {\n const { applyFX, clearFX } = useFX(ref)\n\n useEffect(() => {\n if (!ref.current) return\n\n // Clear previous FX\n clearFX()\n\n // Apply new blur\n applyFX(createBlurFX, config)\n\n return () => clearFX()\n }, [ref, config, applyFX, clearFX])\n\n return { clearFX }\n}\n","/**\n * Convenience hook for automatic glow FX\n * Applies glow on mount and updates on config changes\n */\nimport { useEffect } from '../../hooks'\nimport { createGlowFX, type GlowFXConfig } from '../fx-creators/glow'\nimport { useFX } from '../use-fx'\n\n/**\n * Hook for automatic glow FX\n * @param ref - GameObject ref\n * @param config - Glow config (updates reactively)\n * @returns FX controls\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * useGlow(ref, { color: 0xff6600, outerStrength: 6, innerStrength: 2 })\n *\n * return <View ref={ref}>Content</View>\n * ```\n */\nexport function useGlow(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: { current: any },\n config: GlowFXConfig = {}\n): { clearFX: () => void } {\n const { applyFX, clearFX } = useFX(ref)\n\n useEffect(() => {\n if (!ref.current) return\n\n // Clear previous FX\n clearFX()\n\n // Apply new glow\n applyFX(createGlowFX, config)\n\n return () => clearFX()\n }, [ref, config, applyFX, clearFX])\n\n return { clearFX }\n}\n","/**\n * Convenience hook for automatic shadow FX\n * Applies shadow on mount and updates on config changes\n */\nimport { useEffect } from '../../hooks'\nimport { createShadowFX, type ShadowFXConfig } from '../fx-creators/shadow'\nimport { useFX } from '../use-fx'\n\n/**\n * Hook for automatic shadow FX\n * @param ref - GameObject ref\n * @param config - Shadow config (updates reactively)\n * @returns FX controls\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * useShadow(ref, { x: 4, y: 4, decay: 0.1 })\n *\n * return <View ref={ref}>Content</View>\n * ```\n */\nexport function useShadow(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: { current: any },\n config: ShadowFXConfig = {}\n): { clearFX: () => void } {\n const { applyFX, clearFX } = useFX(ref)\n\n useEffect(() => {\n if (!ref.current) return\n\n // Clear previous FX\n clearFX()\n\n // Apply new shadow\n applyFX(createShadowFX, config)\n\n return () => clearFX()\n }, [ref, config, applyFX, clearFX])\n\n return { clearFX }\n}\n","/**\n * Component memoization utilities\n * Similar to React.memo() - prevents re-renders when props haven't changed\n */\nimport type { VNode } from './hooks'\n\n/**\n * Safely sets __memo on a VNode, handling frozen/sealed objects from bundlers\n * @param vnode - VNode to set __memo on\n * @param value - Memoization value\n * @returns Original VNode if extensible, or shallow copy with __memo\n */\nfunction setMemoSafe<T extends VNode>(vnode: T, value: boolean): T {\n if (Object.isExtensible(vnode)) {\n vnode.__memo = value\n return vnode\n }\n // VNode is frozen - create shallow copy\n return { ...vnode, __memo: value } as T\n}\n\n/**\n * Marks a component to skip memoization (always re-render on prop changes)\n * Use when component has side effects or needs to re-render every time\n *\n * @example\n * ```tsx\n * function AlwaysUpdate({ value }) {\n * console.log('Rendering with:', value)\n * return <Text text={value} />\n * }\n *\n * // Disable memoization\n * <AlwaysUpdate value={counter} __memo={false} />\n * ```\n *\n * @param vnode - VNode to mark\n * @returns Same VNode with memoization disabled (may be a copy if frozen)\n */\nexport function noMemo<T extends VNode>(vnode: T): T {\n return setMemoSafe(vnode, false)\n}\n\n/**\n * Explicitly enable memoization for a component (default behavior)\n * This is the default - you don't need to call this unless you want to be explicit\n *\n * @param vnode - VNode to mark\n * @returns Same VNode with memoization enabled (may be a copy if frozen)\n */\nexport function memo<T extends VNode>(vnode: T): T {\n return setMemoSafe(vnode, true)\n}\n","/**\n * Color mode management for dynamic theme switching\n */\nimport { useEffect, useState } from '../hooks'\nimport { themeRegistry } from '../theme'\n\n/**\n * Hook to manage color mode (light/dark) dynamically\n * @returns Object with current mode, toggle function, and setter\n * @example\n * ```typescript\n * function ThemeToggle() {\n * const { colorMode, toggleColorMode } = useColorMode()\n *\n * return (\n * <Button onClick={toggleColorMode}>\n * {colorMode === 'light' ? 'Dark' : 'Light'} Mode\n * </Button>\n * )\n * }\n * ```\n */\nexport function useColorMode(): {\n colorMode: 'light' | 'dark'\n setColorMode: (mode: 'light' | 'dark') => void\n toggleColorMode: () => void\n} {\n const [colorMode, setColorModeState] = useState<'light' | 'dark'>(themeRegistry.getColorMode())\n\n useEffect(() => {\n // Subscribe to theme registry changes\n const unsubscribe = themeRegistry.subscribe(() => {\n setColorModeState(themeRegistry.getColorMode())\n })\n\n return unsubscribe\n }, [])\n\n const setColorMode = (mode: 'light' | 'dark') => {\n themeRegistry.setColorMode(mode)\n }\n\n const toggleColorMode = () => {\n const newMode = colorMode === 'light' ? 'dark' : 'light'\n setColorMode(newMode)\n }\n\n return {\n colorMode,\n setColorMode,\n toggleColorMode,\n }\n}\n","/**\n * Color system hooks for component usage\n */\nimport { useEffect, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\nimport { getPresetWithMode } from './color-presets'\nimport type { ColorTokens } from './color-types'\n\n/**\n * Hook to access color tokens from theme context\n * Automatically updates when color mode or preset changes\n * @returns Current ColorTokens or undefined\n * @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more\n * @example\n * ```typescript\n * // Old way (deprecated):\n * const colors = useColors()\n *\n * // New way:\n * const tokens = useThemeTokens()\n * const colors = tokens?.colors\n *\n * // Access text styles, spacing, etc.:\n * <Text style={tokens.textStyles.DEFAULT} />\n * <View padding={tokens.spacing.lg} />\n * ```\n */\nexport function useColors(): ColorTokens | undefined {\n const localTheme = useTheme()\n\n // Initialize colors state\n const getInitialColors = (): ColorTokens | undefined => {\n // Check if local theme has color preset info\n if (localTheme?.__colorPreset) {\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n localTheme.__colorPreset.mode ?? 'light'\n )\n return preset.colors\n }\n\n // Fall back to global color tokens\n return themeRegistry.getColorTokens()\n }\n\n const [colors, setColors] = useState<ColorTokens | undefined>(getInitialColors())\n const [, forceUpdate] = useState(0)\n\n useEffect(() => {\n // Subscribe to theme changes (mode/preset switches)\n const unsubscribe = themeRegistry.subscribe(() => {\n // Check if local theme has preset\n if (localTheme?.__colorPreset) {\n const currentMode = themeRegistry.getColorMode()\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n currentMode\n )\n setColors(preset.colors)\n } else {\n // Use global tokens\n setColors(themeRegistry.getColorTokens())\n }\n // Force re-render when theme changes\n forceUpdate((n) => n + 1)\n })\n\n return unsubscribe\n }, [localTheme])\n\n return colors\n}\n\n/**\n * Hook to subscribe to theme changes without accessing colors\n * Use this in parent components that don't need colors themselves\n * but want to ensure children re-render when theme changes\n *\n * Note: Since useColors() now triggers re-renders automatically,\n * this hook is mainly useful if you don't need the colors themselves\n * but still want to react to theme changes.\n *\n * @example\n * ```typescript\n * function ParentComponent() {\n * useThemeSubscription() // Children will re-render on theme changes\n * return <ChildThatUsesColors />\n * }\n * ```\n */\nexport function useThemeSubscription(): void {\n const [, forceUpdate] = useState(0)\n\n useEffect(() => {\n const unsubscribe = themeRegistry.subscribe(() => {\n forceUpdate((n) => n + 1)\n })\n return unsubscribe\n }, [])\n}\n","/**\n * Helper functions for color system integration with theme\n */\nimport type { ColorTokens } from './color-types'\nimport { alpha } from './color-utils'\n\n/**\n * Convert ColorTokens to a theme-compatible object\n * Maps semantic color names to Phaser number format for View/Button components\n * @param colors - ColorTokens to convert\n * @returns Object with backgroundColor, borderColor, etc.\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const buttonTheme = {\n * ...colorsToTheme(colors, 'primary'),\n * padding: 8,\n * }\n * // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }\n * ```\n */\nexport function colorsToTheme(\n colors: ColorTokens,\n colorKey: keyof Pick<\n ColorTokens,\n 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\n >,\n options: {\n /** Which shade to use for background (default: 'DEFAULT') */\n backgroundShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n /** Which shade to use for border (default: 'dark') */\n borderShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n /** Include border color (default: true) */\n includeBorder?: boolean\n } = {}\n): {\n backgroundColor: number\n borderColor?: number\n} {\n const { backgroundShade = 'DEFAULT', borderShade = 'dark', includeBorder = true } = options\n\n const result: { backgroundColor: number; borderColor?: number } = {\n backgroundColor: colors[colorKey][backgroundShade].toNumber(),\n }\n\n if (includeBorder) {\n result.borderColor = colors[colorKey][borderShade].toNumber()\n }\n\n return result\n}\n\n/**\n * Get text color from ColorTokens as hex string for Phaser Text style\n * @param colors - ColorTokens to use\n * @param shade - Which text shade to use (default: 'DEFAULT')\n * @param alphaValue - Optional alpha value (0-1)\n * @returns Hex string or rgba string for Text style\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const textStyle = {\n * color: getTextColor(colors),\n * fontSize: '18px'\n * }\n * ```\n */\nexport function getTextColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT',\n alphaValue?: number\n): string {\n const color = colors.text[shade]\n return alphaValue !== undefined ? alpha(color.toNumber(), alphaValue) : color.toString()\n}\n\n/**\n * Get background color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBackgroundColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n return colors.background[shade].toNumber()\n}\n\n/**\n * Get surface color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getSurfaceColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n return colors.surface[shade].toNumber()\n}\n\n/**\n * Get border color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBorderColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n return colors.border[shade].toNumber()\n}\n","/**\n * Dynamic color preset management\n */\nimport { themeRegistry } from '../theme'\nimport type { PresetName } from './color-presets'\nimport { getPresetWithMode } from './color-presets'\n\n// Subscribe to mode changes to update color tokens\nthemeRegistry.subscribe(() => {\n updateColorTokensForMode()\n})\n\n/**\n * Set the active color preset globally\n * Applies the preset with the current color mode and updates all components\n * @param presetName - Name of the preset to apply\n * @example\n * ```typescript\n * // Switch to forest green theme\n * setColorPreset('forestGreen')\n *\n * // Current mode (light/dark) is preserved\n * ```\n */\nexport function setColorPreset(presetName: PresetName): void {\n const currentMode = themeRegistry.getColorMode()\n const preset = getPresetWithMode(presetName, currentMode)\n\n // Update color tokens\n themeRegistry.setColorTokens(preset.colors)\n themeRegistry.setCurrentPresetName(presetName)\n}\n\n/**\n * Update color tokens based on current preset and mode\n * Called internally when color mode changes\n * @internal\n */\nexport function updateColorTokensForMode(): void {\n const presetName = themeRegistry.getCurrentPresetName()\n if (presetName) {\n const currentMode = themeRegistry.getColorMode()\n const preset = getPresetWithMode(presetName as PresetName, currentMode)\n themeRegistry.setColorTokens(preset.colors)\n }\n}\n\n/**\n * Get the currently active preset name\n * @returns Current preset name or undefined\n */\nexport function getCurrentPreset(): string | undefined {\n return themeRegistry.getCurrentPresetName()\n}\n\n/**\n * Get all available preset names\n * @returns Array of preset names\n * @example\n * ```typescript\n * const presets = getAvailablePresets() // ['oceanBlue', 'forestGreen', 'midnight']\n * ```\n */\nexport function getAvailablePresets(): PresetName[] {\n return ['oceanBlue', 'forestGreen', 'midnight']\n}\n","/**\n * Hook to access complete design token system\n * Combines colors with text styles, spacing, sizes, and radius tokens\n */\nimport { getPresetWithMode } from '../colors/color-presets'\nimport { useEffect, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\nimport {\n createTextStyleTokens,\n defaultRadiusTokens,\n defaultSizeTokens,\n defaultSpacingTokens,\n} from './design-token-presets'\nimport type { DesignTokens } from './design-token-types'\n\n/**\n * Hook to access complete design token system from theme context\n * Provides colors, text styles, spacing, sizes, and radius tokens\n * Automatically updates when color mode or preset changes\n * @returns Current DesignTokens or undefined\n * @example\n * ```typescript\n * function MyComponent() {\n * const tokens = useThemeTokens()\n *\n * if (!tokens) return null\n *\n * return (\n * <View\n * backgroundColor={tokens.colors.surface.DEFAULT}\n * padding={tokens.spacing.lg}\n * cornerRadius={tokens.radius.md}\n * >\n * <Text text=\"Title\" style={tokens.textStyles.title} />\n * <Text text=\"Body text\" style={tokens.textStyles.DEFAULT} />\n * </View>\n * )\n * }\n * ```\n */\nexport function useThemeTokens(): DesignTokens | undefined {\n const localTheme = useTheme()\n\n // Initialize design tokens state\n const getInitialTokens = (): DesignTokens | undefined => {\n // Check if local theme has color preset info\n if (localTheme?.__colorPreset) {\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n localTheme.__colorPreset.mode ?? 'light'\n )\n return {\n colors: preset.colors,\n textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n }\n }\n\n // Fall back to global tokens\n const colors = themeRegistry.getColorTokens()\n if (!colors) return undefined\n\n return {\n colors,\n textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n }\n }\n\n const [tokens, setTokens] = useState<DesignTokens | undefined>(getInitialTokens())\n const [, forceUpdate] = useState(0)\n\n useEffect(() => {\n // Subscribe to theme changes (mode/preset switches)\n const unsubscribe = themeRegistry.subscribe(() => {\n // Check if local theme has preset\n if (localTheme?.__colorPreset) {\n const currentMode = themeRegistry.getColorMode()\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n currentMode\n )\n setTokens({\n colors: preset.colors,\n textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n })\n } else {\n // Use global tokens\n const colors = themeRegistry.getColorTokens()\n if (colors) {\n setTokens({\n colors,\n textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n })\n }\n }\n // Force re-render when theme changes\n forceUpdate((n) => n + 1)\n })\n\n return unsubscribe\n }, [localTheme])\n\n return tokens\n}\n","/**\n * PhaserJSX UI Library\n * Provides JSX + hooks + VDOM for Phaser 3 game development\n */\nimport { registerBuiltins } from './components'\nimport './jsx-types' // Import JSX type declarations\n\n// Register built-in components (View, Text) on module load\nregisterBuiltins()\n\nexport * from './core-types'\nexport * from './effects'\nexport * from './fx'\nexport * from './hooks'\nexport * from './hooks-svg'\nexport * from './host'\nexport * from './memo'\nexport * from './theme'\nexport * from './types'\nexport * from './vdom'\n\n// Export core prop utilities\nexport {\n normalizeCornerRadius,\n normalizeEdgeInsets,\n normalizeGap,\n type CornerRadiusInsets,\n type EdgeInsets,\n type GapInsets,\n} from './core-props'\n\n// Export gesture types explicitly for better IDE support\nexport type {\n Display,\n FlexBasisValue,\n FocusEventData,\n GestureEventData,\n GestureProps,\n InputEventData,\n KeyboardEventData,\n SizeValue,\n TouchMoveState,\n} from './core-props'\n\n// Export DOM input manager utility\nexport { DOMInputElement, type DOMInputConfig } from './utils/dom-input-manager'\nexport { KeyboardInputManager, type KeyboardInputManagerConfig } from './utils/KeyboardInputManager'\n\n// Explicit export for convenience functions\nexport { mountJSX as mountComponent, type MountComponentProps, type MountProps } from './vdom'\n\n// Re-export component creators/patchers for advanced usage\nexport * from './components'\n\n// Re-export custom components for convenience\nexport * from './components/custom'\n\n// Re-export portal system\nexport * from './portal'\n\n// Animation utilities for spring-based transitions\nexport * from './animation'\n\n// Explicitly export AnimationConfig for component themes\nexport type { AnimationConfig } from './animation/spring-physics'\n\n// Color system utilities and presets\nexport * from './colors'\n\n// Design token system - semantic tokens for colors, text styles, spacing, etc.\nexport * from './design-tokens'\n\n// Tooltip system - onTooltip property types\nexport type {\n TooltipCallback,\n TooltipConfig,\n TooltipNativeAnimation,\n TooltipPosition,\n} from './tooltip/tooltip-types'\n\n// Viewport context - provides screen dimensions for vw/vh units\nexport { viewportRegistry, type ViewportSize } from './viewport-context'\n\n// Render context - isolates global state per mount point (advanced usage)\nexport { getRenderContext, type RenderContext } from './render-context'\n\n/**\n * Consumers can import JSX runtime from here:\n * import { jsx, jsxs, Fragment } from \"@number10/phaserjsx/jsx-runtime\";\n */\nexport { Fragment, jsx, jsxs } from './jsx-runtime'\n\n// Development configuration and debugging utilities\nexport { DebugLogger, DevConfig, DevPresets } from './dev-config'\n\n// SVG to texture utilities\nexport type { SVGTextureConfig } from './hooks-svg'\nexport { svgToTexture } from './utils/svg-texture'\n"],"names":["useRef","useEffect","useState","themeRegistry","useTheme","getPresetWithMode","alpha","createTextStyleTokens","defaultSpacingTokens","defaultSizeTokens","defaultRadiusTokens","registerBuiltins"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/fx/use-fx.ts","../src/fx/fx-creators/blur.ts","../src/fx/fx-creators/color-matrix.ts","../src/fx/fx-creators/glow.ts","../src/fx/fx-creators/pixelate.ts","../src/fx/fx-creators/shadow.ts","../src/fx/fx-creators/vignette.ts","../src/fx/fx-registry.ts","../src/fx/convenience-hooks/use-blur.ts","../src/fx/convenience-hooks/use-glow.ts","../src/fx/convenience-hooks/use-shadow.ts","../src/memo.ts","../src/colors/use-color-mode.ts","../src/colors/use-colors.ts","../src/colors/color-theme-helpers.ts","../src/colors/preset-manager.ts","../src/design-tokens/use-theme-tokens.ts","../src/index.ts"],"sourcesContent":["/**\n * Hook for applying Phaser PostFX/PreFX pipeline effects\n * Manages FX lifecycle with proper cleanup\n */\nimport { useEffect, useRef } from '../hooks'\n\n/**\n * Ref object type\n */\ntype RefObject<T> = { current: T | null }\n\n/**\n * FX configuration base type\n */\nexport interface FXConfig {\n intensity?: number\n quality?: number\n onComplete?: () => void\n}\n\n/**\n * FX type discriminator (postFX vs preFX)\n */\nexport type FXType = 'post' | 'pre'\n\n/**\n * GameObject with FX pipeline support\n */\nexport type FXCapableGameObject =\n | Phaser.GameObjects.Image\n | Phaser.GameObjects.Sprite\n | Phaser.GameObjects.Container\n | Phaser.GameObjects.Text\n | Phaser.GameObjects.TileSprite\n | Phaser.GameObjects.NineSlice\n | Phaser.GameObjects.RenderTexture\n | Phaser.GameObjects.Video\n\n/**\n * FX creator function signature\n * @param obj - GameObject with FX pipeline\n * @param config - Effect-specific configuration\n * @param type - 'post' or 'pre' FX pipeline\n * @returns Cleanup function or FX controller (or any Phaser.FX effect)\n */\nexport type FXCreatorFn<TConfig extends FXConfig = FXConfig> = (\n obj: FXCapableGameObject,\n config: TConfig,\n type?: FXType\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => (() => void) | Phaser.FX.Controller | any | null\n\n/**\n * Hook for applying FX to GameObject\n * @param ref - Ref to GameObject\n * @returns Object with applyFX and clearFX methods\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * const { applyFX, clearFX } = useFX(ref)\n *\n * const handleClick = () => {\n * applyFX(createShadowFX, { offsetX: 4, offsetY: 4, blur: 8 })\n * }\n *\n * return <View ref={ref} onClick={handleClick}>Click me</View>\n * ```\n */\nexport function useFX<T extends FXCapableGameObject>(ref: RefObject<T>) {\n const activeEffectsRef = useRef<Set<(() => void) | Phaser.FX.Controller>>(new Set())\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n activeEffectsRef.current.forEach((cleanup) => {\n if (typeof cleanup === 'function') {\n cleanup()\n } else if (cleanup?.destroy) {\n cleanup.destroy()\n }\n })\n activeEffectsRef.current.clear()\n }\n }, [])\n\n const applyFX = <TConfig extends FXConfig>(\n fxCreator: FXCreatorFn<TConfig>,\n config: TConfig,\n type: FXType = 'post'\n ) => {\n const obj = ref.current\n if (!obj) {\n console.warn('[useFX] No object found in ref')\n return\n }\n\n const cleanupOrController = fxCreator(obj, config, type)\n if (cleanupOrController) {\n activeEffectsRef.current.add(cleanupOrController)\n }\n }\n\n const clearFX = () => {\n activeEffectsRef.current.forEach((cleanup) => {\n if (typeof cleanup === 'function') {\n cleanup()\n } else if (cleanup?.destroy) {\n cleanup.destroy()\n }\n })\n activeEffectsRef.current.clear()\n\n // Clear FX pipeline\n const obj = ref.current\n if (obj && 'postFX' in obj && obj.postFX) {\n obj.postFX.clear()\n }\n if (obj && 'preFX' in obj && obj.preFX) {\n obj.preFX.clear()\n }\n }\n\n return { applyFX, clearFX }\n}\n","/**\n * Blur FX creator (Box & Gaussian Blur)\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Blur FX configuration\n */\nexport interface BlurFXConfig extends FXConfig {\n /** The quality of the blur effect. Can be either 0 for Low Quality, 1 for Medium Quality or 2 for High Quality */\n quality?: number\n /** The horizontal offset of the blur effect */\n x?: number\n /** The vertical offset of the blur effect */\n y?: number\n /** The strength of the blur effect */\n strength?: number\n /** The color of the blur, as a hex value */\n color?: number\n /** The number of steps to run the blur effect for. This value should always be an integer */\n steps?: number\n}\n\n/**\n * Create blur FX\n * @param obj - GameObject\n * @param config - Blur configuration\n * @param type - 'post' or 'pre' FX\n * @returns Blur controller\n *\n * @example\n * ```tsx\n * applyFX(createBlurFX, {\n * quality: 1,\n * x: 4,\n * y: 4,\n * strength: 2\n * })\n * ```\n */\nexport const createBlurFX: FXCreatorFn<BlurFXConfig> = (obj, config, type = 'post') => {\n const { quality = 0, x = 2, y = 2, strength = 1, color = 0xffffff, steps = 4 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createBlurFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addBlur(quality, x, y, strength, color, steps)\n const blur = pipeline.addBlur(quality, x, y, strength, color, steps)\n\n return blur\n}\n","/**\n * Color Matrix FX creator (Grayscale, Sepia, Negative, etc.)\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Color Matrix effect types\n */\nexport type ColorMatrixEffect =\n | 'grayscale'\n | 'sepia'\n | 'negative'\n | 'blackWhite'\n | 'brown'\n | 'kodachrome'\n | 'technicolor'\n | 'polaroid'\n\n/**\n * Color Matrix FX configuration\n */\nexport interface ColorMatrixFXConfig extends FXConfig {\n /** Effect type */\n effect?: ColorMatrixEffect\n /** Effect amount (0-1, for effects that support it like grayscale) */\n amount?: number\n}\n\n/**\n * Create color matrix FX\n * @param obj - GameObject\n * @param config - Color matrix configuration\n * @param type - 'post' or 'pre' FX\n * @returns Color matrix controller\n *\n * @example\n * ```tsx\n * applyFX(createColorMatrixFX, {\n * effect: 'grayscale',\n * amount: 1\n * })\n * ```\n */\nexport const createColorMatrixFX: FXCreatorFn<ColorMatrixFXConfig> = (\n obj,\n config,\n type = 'post'\n) => {\n const { effect = 'grayscale', amount = 1 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createColorMatrixFX] FX pipeline not available on this GameObject')\n return null\n }\n\n const colorMatrix = pipeline.addColorMatrix()\n\n // Apply the selected effect\n switch (effect) {\n case 'grayscale':\n colorMatrix.grayscale(amount)\n break\n case 'sepia':\n colorMatrix.sepia()\n break\n case 'negative':\n colorMatrix.negative()\n break\n case 'blackWhite':\n colorMatrix.blackWhite()\n break\n case 'brown':\n colorMatrix.brown()\n break\n case 'kodachrome':\n colorMatrix.kodachrome()\n break\n case 'technicolor':\n colorMatrix.technicolor()\n break\n case 'polaroid':\n colorMatrix.polaroid()\n break\n }\n\n return colorMatrix\n}\n","/**\n * Glow FX creator (Outer Glow)\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Glow FX configuration\n */\nexport interface GlowFXConfig extends FXConfig {\n /** Glow color (hex number) */\n color?: number\n /** The strength of the glow outward from the edge */\n outerStrength?: number\n /** The strength of the glow inward from the edge */\n innerStrength?: number\n /** If true, only the glow is drawn, not the texture itself */\n knockout?: boolean\n /** Sets the quality of this Glow effect (PostFX only, cannot be changed post-creation) */\n quality?: number\n /** Sets the distance of this Glow effect (PostFX only, cannot be changed post-creation) */\n distance?: number\n}\n\n/**\n * Create glow FX\n * @param obj - GameObject\n * @param config - Glow configuration\n * @param type - 'post' or 'pre' FX\n * @returns Glow controller\n *\n * @example\n * ```tsx\n * applyFX(createGlowFX, {\n * color: 0xff6600,\n * outerStrength: 6,\n * innerStrength: 2\n * })\n * ```\n */\nexport const createGlowFX: FXCreatorFn<GlowFXConfig> = (obj, config, type = 'post') => {\n const {\n color = 0xffffff,\n outerStrength = 4,\n innerStrength = 0,\n knockout = false,\n quality = 0.1,\n distance = 10,\n } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createGlowFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addGlow(color, outerStrength, innerStrength, knockout, quality, distance)\n const glow = pipeline.addGlow(color, outerStrength, innerStrength, knockout, quality, distance)\n\n return glow\n}\n","/**\n * Pixelate FX creator\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Pixelate FX configuration\n */\nexport interface PixelateFXConfig extends FXConfig {\n /** The amount of pixelation to apply */\n amount?: number\n}\n\n/**\n * Create pixelate FX\n * @param obj - GameObject\n * @param config - Pixelate configuration\n * @param type - 'post' or 'pre' FX\n * @returns Pixelate controller\n *\n * @example\n * ```tsx\n * applyFX(createPixelateFX, {\n * amount: 8\n * })\n * ```\n */\nexport const createPixelateFX: FXCreatorFn<PixelateFXConfig> = (obj, config, type = 'post') => {\n const { amount = 1 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createPixelateFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addPixelate(amount)\n const pixelate = pipeline.addPixelate(amount)\n\n return pixelate\n}\n","/**\n * Shadow FX creator\n *\n * The shadow effect creates the illusion of depth by adding darker, offset silhouettes\n * beneath game objects, enhancing visual appeal and immersion.\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Shadow FX configuration\n * Maps to Phaser's addShadow(x, y, decay, power, color, samples, intensity)\n */\nexport interface ShadowFXConfig extends FXConfig {\n /** Horizontal offset of the shadow effect (default: 0) */\n x?: number\n /** Vertical offset of the shadow effect (default: 0) */\n y?: number\n /** Amount of decay for shadow effect (default: 0.1) */\n decay?: number\n /** Power of the shadow effect (default: 1) */\n power?: number\n /** Color of the shadow (default: 0x000000) */\n color?: number\n /** Number of samples (1-12, higher = better quality, default: 6) */\n samples?: number\n /** Intensity of the shadow effect (default: 1) */\n intensity?: number\n}\n\n/**\n * Create shadow FX\n * @param obj - GameObject\n * @param config - Shadow configuration\n * @param type - 'post' or 'pre' FX\n * @returns Shadow controller\n *\n * @example\n * ```tsx\n * applyFX(createShadowFX, {\n * x: 0,\n * y: 0,\n * decay: 0.1,\n * power: 1,\n * color: 0x000000,\n * samples: 6,\n * intensity: 1\n * })\n * ```\n */\nexport const createShadowFX: FXCreatorFn<ShadowFXConfig> = (obj, config, type = 'post') => {\n const {\n x = 0,\n y = 1,\n decay = 0.05,\n power = 1,\n color = 0x000000,\n samples = 6,\n intensity = 1,\n } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createShadowFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser API: addShadow(x, y, decay, power, color, samples, intensity)\n const shadow = pipeline.addShadow(x, y, decay, power, color, samples, intensity)\n\n return shadow\n}\n","/**\n * Vignette FX creator\n */\nimport type { FXConfig, FXCreatorFn } from '../use-fx'\n\n/**\n * Vignette FX configuration\n */\nexport interface VignetteFXConfig extends FXConfig {\n /** The horizontal offset of the vignette effect. This value is normalized to the range 0 to 1 */\n x?: number\n /** The vertical offset of the vignette effect. This value is normalized to the range 0 to 1 */\n y?: number\n /** The radius of the vignette effect. This value is normalized to the range 0 to 1 */\n radius?: number\n /** The strength of the vignette effect */\n strength?: number\n}\n\n/**\n * Create vignette FX\n * @param obj - GameObject\n * @param config - Vignette configuration\n * @param type - 'post' or 'pre' FX\n * @returns Vignette controller\n *\n * @example\n * ```tsx\n * applyFX(createVignetteFX, {\n * x: 0.5,\n * y: 0.5,\n * radius: 0.5,\n * strength: 0.7\n * })\n * ```\n */\nexport const createVignetteFX: FXCreatorFn<VignetteFXConfig> = (obj, config, type = 'post') => {\n const { strength = 0.5, radius = 0.5, x = 0.5, y = 0.5 } = config\n\n const pipeline = type === 'post' ? obj.postFX : obj.preFX\n if (!pipeline) {\n console.warn('[createVignetteFX] FX pipeline not available on this GameObject')\n return null\n }\n\n // Phaser Vignette: addVignette(x, y, radius, strength)\n const vignette = pipeline.addVignette(x, y, radius, strength)\n\n return vignette\n}\n","/**\n * FX Registry - string-based FX lookup\n * Similar to effect-registry.ts for animation effects\n */\nimport {\n createBlurFX,\n createColorMatrixFX,\n createGlowFX,\n createPixelateFX,\n createShadowFX,\n createVignetteFX,\n type BlurFXConfig,\n type ColorMatrixFXConfig,\n type GlowFXConfig,\n type PixelateFXConfig,\n type ShadowFXConfig,\n type VignetteFXConfig,\n} from './fx-creators'\nimport type { FXConfig, FXCreatorFn } from './use-fx'\n\n/**\n * Built-in FX names\n */\nexport type BuiltInFXName =\n | 'shadow'\n | 'glow'\n | 'blur'\n | 'pixelate'\n | 'vignette'\n | 'grayscale'\n | 'sepia'\n | 'negative'\n | 'blackWhite'\n | 'brown'\n | 'kodachrome'\n | 'technicolor'\n | 'polaroid'\n\n/**\n * Extension point for custom FX (declaration merging)\n * @example\n * ```typescript\n * declare module '@number10/phaserjsx/fx' {\n * interface FXNameExtensions {\n * myCustomFX: 'myCustomFX'\n * }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface FXNameExtensions {}\n\n/**\n * All available FX names (built-in + extensions)\n */\nexport type FXName =\n | BuiltInFXName\n | (keyof FXNameExtensions extends never ? never : keyof FXNameExtensions)\n\n/**\n * FX definition with name and config\n */\nexport interface FXDefinition {\n name: FXName\n config?: FXConfig\n}\n\n/**\n * FX Registry mapping names to creator functions\n */\nexport const FX_REGISTRY: Record<BuiltInFXName, FXCreatorFn> = {\n shadow: createShadowFX,\n glow: createGlowFX,\n blur: createBlurFX,\n pixelate: createPixelateFX,\n vignette: createVignetteFX,\n grayscale: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'grayscale' }, type),\n sepia: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: 'sepia' }, type),\n negative: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'negative' }, type),\n blackWhite: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'blackWhite' }, type),\n brown: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: 'brown' }, type),\n kodachrome: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'kodachrome' }, type),\n technicolor: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'technicolor' }, type),\n polaroid: (obj, config, type) =>\n createColorMatrixFX(obj, { ...config, effect: 'polaroid' }, type),\n}\n\n/**\n * Default FX (none)\n */\nexport const DEFAULT_FX: FXName = 'grayscale'\n\n/**\n * Resolve FX by name or function\n * @param fxOrName - FX name string or creator function\n * @returns FX creator function or null\n */\nexport function resolveFX(fxOrName: FXName | FXCreatorFn): FXCreatorFn | null {\n if (typeof fxOrName === 'function') {\n return fxOrName\n }\n return FX_REGISTRY[fxOrName as BuiltInFXName] ?? null\n}\n\n/**\n * Apply FX by name (helper function)\n * @param applyFXFn - applyFX function from useFX hook\n * @param fxName - FX name\n * @param config - FX config\n *\n * @example\n * ```tsx\n * const { applyFX } = useFX(ref)\n * applyFXByName(applyFX, 'shadow', { offsetX: 4, offsetY: 4, blur: 8 })\n * ```\n */\nexport function applyFXByName(\n applyFXFn: ReturnType<typeof import('./use-fx').useFX>['applyFX'],\n fxName: FXName,\n config: FXConfig = {}\n) {\n const creator = resolveFX(fxName)\n if (creator) {\n applyFXFn(creator, config)\n } else {\n console.warn(`[applyFXByName] FX \"${fxName}\" not found in registry`)\n }\n}\n\n// Re-export config types for convenience\nexport type {\n BlurFXConfig,\n ColorMatrixFXConfig,\n GlowFXConfig,\n PixelateFXConfig,\n ShadowFXConfig,\n VignetteFXConfig,\n}\n","/**\n * Convenience hook for automatic blur FX\n * Applies blur on mount and updates on config changes\n */\nimport { useEffect } from '../../hooks'\nimport { createBlurFX, type BlurFXConfig } from '../fx-creators/blur'\nimport { useFX } from '../use-fx'\n\n/**\n * Hook for automatic blur FX\n * @param ref - GameObject ref\n * @param config - Blur config (updates reactively)\n * @returns FX controls\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * useBlur(ref, { strength: 8, steps: 4 })\n *\n * return <View ref={ref}>Content</View>\n * ```\n */\nexport function useBlur(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: { current: any },\n config: BlurFXConfig = {}\n): { clearFX: () => void } {\n const { applyFX, clearFX } = useFX(ref)\n\n useEffect(() => {\n if (!ref.current) return\n\n // Clear previous FX\n clearFX()\n\n // Apply new blur\n applyFX(createBlurFX, config)\n\n return () => clearFX()\n }, [ref, config, applyFX, clearFX])\n\n return { clearFX }\n}\n","/**\n * Convenience hook for automatic glow FX\n * Applies glow on mount and updates on config changes\n */\nimport { useEffect } from '../../hooks'\nimport { createGlowFX, type GlowFXConfig } from '../fx-creators/glow'\nimport { useFX } from '../use-fx'\n\n/**\n * Hook for automatic glow FX\n * @param ref - GameObject ref\n * @param config - Glow config (updates reactively)\n * @returns FX controls\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * useGlow(ref, { color: 0xff6600, outerStrength: 6, innerStrength: 2 })\n *\n * return <View ref={ref}>Content</View>\n * ```\n */\nexport function useGlow(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: { current: any },\n config: GlowFXConfig = {}\n): { clearFX: () => void } {\n const { applyFX, clearFX } = useFX(ref)\n\n useEffect(() => {\n if (!ref.current) return\n\n // Clear previous FX\n clearFX()\n\n // Apply new glow\n applyFX(createGlowFX, config)\n\n return () => clearFX()\n }, [ref, config, applyFX, clearFX])\n\n return { clearFX }\n}\n","/**\n * Convenience hook for automatic shadow FX\n * Applies shadow on mount and updates on config changes\n */\nimport { useEffect } from '../../hooks'\nimport { createShadowFX, type ShadowFXConfig } from '../fx-creators/shadow'\nimport { useFX } from '../use-fx'\n\n/**\n * Hook for automatic shadow FX\n * @param ref - GameObject ref\n * @param config - Shadow config (updates reactively)\n * @returns FX controls\n *\n * @example\n * ```tsx\n * const ref = useRef(null)\n * useShadow(ref, { x: 4, y: 4, decay: 0.1 })\n *\n * return <View ref={ref}>Content</View>\n * ```\n */\nexport function useShadow(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref: { current: any },\n config: ShadowFXConfig = {}\n): { clearFX: () => void } {\n const { applyFX, clearFX } = useFX(ref)\n\n useEffect(() => {\n if (!ref.current) return\n\n // Clear previous FX\n clearFX()\n\n // Apply new shadow\n applyFX(createShadowFX, config)\n\n return () => clearFX()\n }, [ref, config, applyFX, clearFX])\n\n return { clearFX }\n}\n","/**\n * Component memoization utilities\n * Similar to React.memo() - prevents re-renders when props haven't changed\n */\nimport type { VNode } from './hooks'\n\n/**\n * Safely sets __memo on a VNode, handling frozen/sealed objects from bundlers\n * @param vnode - VNode to set __memo on\n * @param value - Memoization value\n * @returns Original VNode if extensible, or shallow copy with __memo\n */\nfunction setMemoSafe<T extends VNode>(vnode: T, value: boolean): T {\n if (Object.isExtensible(vnode)) {\n vnode.__memo = value\n return vnode\n }\n // VNode is frozen - create shallow copy\n return { ...vnode, __memo: value } as T\n}\n\n/**\n * Marks a component to skip memoization (always re-render on prop changes)\n * Use when component has side effects or needs to re-render every time\n *\n * @example\n * ```tsx\n * function AlwaysUpdate({ value }) {\n * console.log('Rendering with:', value)\n * return <Text text={value} />\n * }\n *\n * // Disable memoization\n * <AlwaysUpdate value={counter} __memo={false} />\n * ```\n *\n * @param vnode - VNode to mark\n * @returns Same VNode with memoization disabled (may be a copy if frozen)\n */\nexport function noMemo<T extends VNode>(vnode: T): T {\n return setMemoSafe(vnode, false)\n}\n\n/**\n * Explicitly enable memoization for a component (default behavior)\n * This is the default - you don't need to call this unless you want to be explicit\n *\n * @param vnode - VNode to mark\n * @returns Same VNode with memoization enabled (may be a copy if frozen)\n */\nexport function memo<T extends VNode>(vnode: T): T {\n return setMemoSafe(vnode, true)\n}\n","/**\n * Color mode management for dynamic theme switching\n */\nimport { useEffect, useState } from '../hooks'\nimport { themeRegistry } from '../theme'\n\n/**\n * Hook to manage color mode (light/dark) dynamically\n * @returns Object with current mode, toggle function, and setter\n * @example\n * ```typescript\n * function ThemeToggle() {\n * const { colorMode, toggleColorMode } = useColorMode()\n *\n * return (\n * <Button onClick={toggleColorMode}>\n * {colorMode === 'light' ? 'Dark' : 'Light'} Mode\n * </Button>\n * )\n * }\n * ```\n */\nexport function useColorMode(): {\n colorMode: 'light' | 'dark'\n setColorMode: (mode: 'light' | 'dark') => void\n toggleColorMode: () => void\n} {\n const [colorMode, setColorModeState] = useState<'light' | 'dark'>(themeRegistry.getColorMode())\n\n useEffect(() => {\n // Subscribe to theme registry changes\n const unsubscribe = themeRegistry.subscribe(() => {\n setColorModeState(themeRegistry.getColorMode())\n })\n\n return unsubscribe\n }, [])\n\n const setColorMode = (mode: 'light' | 'dark') => {\n themeRegistry.setColorMode(mode)\n }\n\n const toggleColorMode = () => {\n const newMode = colorMode === 'light' ? 'dark' : 'light'\n setColorMode(newMode)\n }\n\n return {\n colorMode,\n setColorMode,\n toggleColorMode,\n }\n}\n","/**\n * Color system hooks for component usage\n */\nimport { useEffect, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\nimport { getPresetWithMode } from './color-presets'\nimport type { ColorTokens } from './color-types'\n\n/**\n * Hook to access color tokens from theme context\n * Automatically updates when color mode or preset changes\n * @returns Current ColorTokens or undefined\n * @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more\n * @example\n * ```typescript\n * // Old way (deprecated):\n * const colors = useColors()\n *\n * // New way:\n * const tokens = useThemeTokens()\n * const colors = tokens?.colors\n *\n * // Access text styles, spacing, etc.:\n * <Text style={tokens.textStyles.DEFAULT} />\n * <View padding={tokens.spacing.lg} />\n * ```\n */\nexport function useColors(): ColorTokens | undefined {\n const localTheme = useTheme()\n\n // Initialize colors state\n const getInitialColors = (): ColorTokens | undefined => {\n // Check if local theme has color preset info\n if (localTheme?.__colorPreset) {\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n localTheme.__colorPreset.mode ?? 'light'\n )\n return preset.colors\n }\n\n // Fall back to global color tokens\n return themeRegistry.getColorTokens()\n }\n\n const [colors, setColors] = useState<ColorTokens | undefined>(getInitialColors())\n const [, forceUpdate] = useState(0)\n\n useEffect(() => {\n // Subscribe to theme changes (mode/preset switches)\n const unsubscribe = themeRegistry.subscribe(() => {\n // Check if local theme has preset\n if (localTheme?.__colorPreset) {\n const currentMode = themeRegistry.getColorMode()\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n currentMode\n )\n setColors(preset.colors)\n } else {\n // Use global tokens\n setColors(themeRegistry.getColorTokens())\n }\n // Force re-render when theme changes\n forceUpdate((n) => n + 1)\n })\n\n return unsubscribe\n }, [localTheme])\n\n return colors\n}\n\n/**\n * Hook to subscribe to theme changes without accessing colors\n * Use this in parent components that don't need colors themselves\n * but want to ensure children re-render when theme changes\n *\n * Note: Since useColors() now triggers re-renders automatically,\n * this hook is mainly useful if you don't need the colors themselves\n * but still want to react to theme changes.\n *\n * @example\n * ```typescript\n * function ParentComponent() {\n * useThemeSubscription() // Children will re-render on theme changes\n * return <ChildThatUsesColors />\n * }\n * ```\n */\nexport function useThemeSubscription(): void {\n const [, forceUpdate] = useState(0)\n\n useEffect(() => {\n const unsubscribe = themeRegistry.subscribe(() => {\n forceUpdate((n) => n + 1)\n })\n return unsubscribe\n }, [])\n}\n","/**\n * Helper functions for color system integration with theme\n */\nimport type { ColorTokens } from './color-types'\nimport { alpha } from './color-utils'\n\n/**\n * Convert ColorTokens to a theme-compatible object\n * Maps semantic color names to Phaser number format for View/Button components\n * @param colors - ColorTokens to convert\n * @returns Object with backgroundColor, borderColor, etc.\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const buttonTheme = {\n * ...colorsToTheme(colors, 'primary'),\n * padding: 8,\n * }\n * // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }\n * ```\n */\nexport function colorsToTheme(\n colors: ColorTokens,\n colorKey: keyof Pick<\n ColorTokens,\n 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\n >,\n options: {\n /** Which shade to use for background (default: 'DEFAULT') */\n backgroundShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n /** Which shade to use for border (default: 'dark') */\n borderShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n /** Include border color (default: true) */\n includeBorder?: boolean\n } = {}\n): {\n backgroundColor: number\n borderColor?: number\n} {\n const { backgroundShade = 'DEFAULT', borderShade = 'dark', includeBorder = true } = options\n\n const result: { backgroundColor: number; borderColor?: number } = {\n backgroundColor: colors[colorKey][backgroundShade].toNumber(),\n }\n\n if (includeBorder) {\n result.borderColor = colors[colorKey][borderShade].toNumber()\n }\n\n return result\n}\n\n/**\n * Get text color from ColorTokens as hex string for Phaser Text style\n * @param colors - ColorTokens to use\n * @param shade - Which text shade to use (default: 'DEFAULT')\n * @param alphaValue - Optional alpha value (0-1)\n * @returns Hex string or rgba string for Text style\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const textStyle = {\n * color: getTextColor(colors),\n * fontSize: '18px'\n * }\n * ```\n */\nexport function getTextColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT',\n alphaValue?: number\n): string {\n const color = colors.text[shade]\n return alphaValue !== undefined ? alpha(color.toNumber(), alphaValue) : color.toString()\n}\n\n/**\n * Get background color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBackgroundColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n return colors.background[shade].toNumber()\n}\n\n/**\n * Get surface color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getSurfaceColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n return colors.surface[shade].toNumber()\n}\n\n/**\n * Get border color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBorderColor(\n colors: ColorTokens,\n shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n return colors.border[shade].toNumber()\n}\n","/**\n * Dynamic color preset management\n */\nimport { themeRegistry } from '../theme'\nimport type { PresetName } from './color-presets'\nimport { getPresetWithMode } from './color-presets'\n\n/**\n * Set the active color preset globally\n * Applies the preset with the current color mode and updates all components\n * Triggers complete remount of all active mountJSX instances\n * @param presetName - Name of the preset to apply\n * @param colorMode - Optional color mode to apply together with the preset\n * @example\n * ```typescript\n * // Switch to forest green theme\n * setColorPreset('forestGreen')\n *\n * // Apply preset and force dark mode in one go\n * setColorPreset('midnight', 'dark')\n *\n * // Current mode (light/dark) is preserved\n * ```\n */\nexport function setColorPreset(presetName: PresetName, colorMode?: 'light' | 'dark'): void {\n const targetMode = colorMode ?? themeRegistry.getColorMode()\n const preset = getPresetWithMode(presetName, targetMode)\n\n // Update color tokens WITHOUT notifying listeners\n // We skip listener notifications to prevent unnecessary re-renders\n themeRegistry.setColorTokens(preset.colors)\n themeRegistry.setCurrentPresetName(presetName, true) // true = skip notify\n\n // If caller asked for a specific mode, update it here so we only remount once\n if (colorMode && themeRegistry.getColorMode() !== colorMode) {\n themeRegistry.setColorMode(colorMode)\n return\n }\n\n // Trigger complete remount of all VDOM trees to apply new preset\n // Using setTimeout(0) to ensure all synchronous state updates complete first\n setTimeout(() => {\n // Import remountAll lazily to avoid circular dependency\n import('../vdom').then(({ remountAll }) => {\n remountAll()\n })\n }, 0)\n}\n\n/**\n * Get the currently active preset name\n * @returns Current preset name or undefined\n */\nexport function getCurrentPreset(): string | undefined {\n return themeRegistry.getCurrentPresetName()\n}\n\n/**\n * Set the active color mode globally (without changing the preset)\n * @param mode - Color mode to apply\n */\nexport function setColorMode(mode: 'light' | 'dark'): void {\n themeRegistry.setColorMode(mode)\n}\n\n/**\n * Get all available preset names\n * @returns Array of preset names\n * @example\n * ```typescript\n * const presets = getAvailablePresets() // ['oceanBlue', 'forestGreen', 'midnight']\n * ```\n */\nexport function getAvailablePresets(): PresetName[] {\n return ['oceanBlue', 'forestGreen', 'midnight']\n}\n","/**\n * Hook to access complete design token system\n * Combines colors with text styles, spacing, sizes, and radius tokens\n */\nimport { getPresetWithMode } from '../colors/color-presets'\nimport { useEffect, useState, useTheme } from '../hooks'\nimport { themeRegistry } from '../theme'\nimport {\n createTextStyleTokens,\n defaultRadiusTokens,\n defaultSizeTokens,\n defaultSpacingTokens,\n} from './design-token-presets'\nimport type { DesignTokens } from './design-token-types'\n\n/**\n * Hook to access complete design token system from theme context\n * Provides colors, text styles, spacing, sizes, and radius tokens\n * Automatically updates when color mode or preset changes\n * @returns Current DesignTokens or undefined\n * @example\n * ```typescript\n * function MyComponent() {\n * const tokens = useThemeTokens()\n *\n * if (!tokens) return null\n *\n * return (\n * <View\n * backgroundColor={tokens.colors.surface.DEFAULT}\n * padding={tokens.spacing.lg}\n * cornerRadius={tokens.radius.md}\n * >\n * <Text text=\"Title\" style={tokens.textStyles.title} />\n * <Text text=\"Body text\" style={tokens.textStyles.DEFAULT} />\n * </View>\n * )\n * }\n * ```\n */\nexport function useThemeTokens(): DesignTokens | undefined {\n const localTheme = useTheme()\n\n // Initialize design tokens state\n const getInitialTokens = (): DesignTokens | undefined => {\n // Check if local theme has color preset info\n if (localTheme?.__colorPreset) {\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n localTheme.__colorPreset.mode ?? 'light'\n )\n return {\n colors: preset.colors,\n textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n }\n }\n\n // Fall back to global tokens\n const colors = themeRegistry.getColorTokens()\n if (!colors) return undefined\n\n return {\n colors,\n textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n }\n }\n\n const [tokens, setTokens] = useState<DesignTokens | undefined>(getInitialTokens())\n const [, forceUpdate] = useState(0)\n\n useEffect(() => {\n // Subscribe to theme changes (mode/preset switches)\n const unsubscribe = themeRegistry.subscribe(() => {\n // Check if local theme has preset\n if (localTheme?.__colorPreset) {\n const currentMode = themeRegistry.getColorMode()\n const preset = getPresetWithMode(\n localTheme.__colorPreset.name as Parameters<typeof getPresetWithMode>[0],\n currentMode\n )\n setTokens({\n colors: preset.colors,\n textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n })\n } else {\n // Use global tokens\n const colors = themeRegistry.getColorTokens()\n if (colors) {\n setTokens({\n colors,\n textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),\n spacing: defaultSpacingTokens,\n sizes: defaultSizeTokens,\n radius: defaultRadiusTokens,\n })\n }\n }\n // Force re-render when theme changes\n forceUpdate((n) => n + 1)\n })\n\n return unsubscribe\n }, [localTheme])\n\n return tokens\n}\n","/**\n * PhaserJSX UI Library\n * Provides JSX + hooks + VDOM for Phaser 3 game development\n */\nimport { registerBuiltins } from './components'\nimport './jsx-types' // Import JSX type declarations\n\n// Register built-in components (View, Text) on module load\nregisterBuiltins()\n\nexport * from './core-types'\nexport * from './effects'\nexport * from './fx'\nexport * from './hooks'\nexport * from './hooks-svg'\nexport * from './host'\nexport * from './memo'\nexport * from './theme'\nexport * from './types'\nexport * from './vdom'\n\n// Export core prop utilities\nexport {\n normalizeCornerRadius,\n normalizeEdgeInsets,\n normalizeGap,\n type CornerRadiusInsets,\n type EdgeInsets,\n type GapInsets,\n} from './core-props'\n\n// Export gesture types explicitly for better IDE support\nexport type {\n Display,\n FlexBasisValue,\n FocusEventData,\n GestureEventData,\n GestureProps,\n InputEventData,\n KeyboardEventData,\n SizeValue,\n TouchMoveState,\n} from './core-props'\n\n// Export DOM input manager utility\nexport { DOMInputElement, type DOMInputConfig } from './utils/dom-input-manager'\nexport { KeyboardInputManager, type KeyboardInputManagerConfig } from './utils/KeyboardInputManager'\n\n// Explicit export for convenience functions\nexport { mountJSX as mountComponent, type MountComponentProps, type MountProps } from './vdom'\n\n// Re-export component creators/patchers for advanced usage\nexport * from './components'\n\n// Re-export custom components for convenience\nexport * from './components/custom'\n\n// Re-export portal system\nexport * from './portal'\n\n// Animation utilities for spring-based transitions\nexport * from './animation'\n\n// Explicitly export AnimationConfig for component themes\nexport type { AnimationConfig } from './animation/spring-physics'\n\n// Color system utilities and presets\nexport * from './colors'\n\n// Design token system - semantic tokens for colors, text styles, spacing, etc.\nexport * from './design-tokens'\n\n// Tooltip system - onTooltip property types\nexport type {\n TooltipCallback,\n TooltipConfig,\n TooltipNativeAnimation,\n TooltipPosition,\n} from './tooltip/tooltip-types'\n\n// Viewport context - provides screen dimensions for vw/vh units\nexport { viewportRegistry, type ViewportSize } from './viewport-context'\n\n// Render context - isolates global state per mount point (advanced usage)\nexport { getRenderContext, type RenderContext } from './render-context'\n\n/**\n * Consumers can import JSX runtime from here:\n * import { jsx, jsxs, Fragment } from \"@number10/phaserjsx/jsx-runtime\";\n */\nexport { Fragment, jsx, jsxs } from './jsx-runtime'\n\n// Development configuration and debugging utilities\nexport { DebugLogger, DevConfig, DevPresets } from './dev-config'\n\n// SVG to texture utilities\nexport type { SVGTextureConfig } from './hooks-svg'\nexport { svgToTexture } from './utils/svg-texture'\n"],"names":["useRef","useEffect","useState","themeRegistry","setColorMode","useTheme","getPresetWithMode","alpha","createTextStyleTokens","defaultSpacingTokens","defaultSizeTokens","defaultRadiusTokens","registerBuiltins"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { p as useRef, q as useEffect, r as useState, t as themeRegistry, s as useTheme, v as getPresetWithMode, w as alpha, x as defaultRadiusTokens, y as defaultSizeTokens, z as defaultSpacingTokens, E as createTextStyleTokens, F as registerBuiltins } from "./TransformOriginView-CO-tJCmV.js";
2
- import { A, a, B, C, b, $, b9, K, V, X, Y, D, c, d, a0, aP, be, I, f, L, M, N, g, P, R, h, m, i, ba, S, k, l, n, bb, aO, aR, aQ, T, o, aS, W, b6, br, a1, bs, j, a3, a4, aK, a5, a6, a7, a8, a9, e, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, bo, aI, ak, al, am, an, bj, bk, bz, aG, ax, bp, bt, bu, bq, ao, bv, U, aJ, b1, b2, bl, bf, aF, a$, b0, b7, bm, bn, aH, bw, aL, O, O as O2, aX, aY, aD, G, H, J, bg, bh, bx, aN, b5, by, aE, aA, ay, az, a2, bi, au, av, aZ, a_, Z, aT, aU, b3, b4, aM, b8, as, aq, _, u, ar, aw, aB, aC, at, bc, bd, aV, aW, Q, ap } from "./TransformOriginView-CO-tJCmV.js";
1
+ import { p as useRef, q as useEffect, r as useState, t as themeRegistry, s as useTheme, v as getPresetWithMode, w as alpha, x as defaultRadiusTokens, y as defaultSizeTokens, z as defaultSpacingTokens, E as createTextStyleTokens, F as registerBuiltins } from "./TransformOriginView-CiFiQcku.js";
2
+ import { A, a, B, C, b, $, bb, K, V, X, Y, D, c, d, a0, aR, bg, I, f, L, M, N, g, P, R, h, m, i, bc, S, k, l, n, bd, aQ, aT, aS, T, o, aU, W, b8, bt, a1, bu, j, a3, a4, aG, aM, a5, a6, a7, a8, a9, e, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, bq, aJ, ak, al, am, an, bl, bm, bB, aH, ax, br, bv, bw, bs, ao, bx, U, aK, b3, b4, bn, bh, aF, b1, b2, b9, bo, bp, aI, by, aN, O, O as O2, aZ, a_, aD, G, H, J, bi, bj, bz, aP, b7, bA, aE, aA, ay, az, aL, a2, bk, au, av, a$, b0, Z, aV, aW, b5, b6, aO, ba, as, aq, _, u, ar, aw, aB, aC, at, be, bf, aX, aY, Q, ap } from "./TransformOriginView-CiFiQcku.js";
3
3
  import { Fragment, jsx, jsxs } from "./jsx-runtime.js";
4
4
  import { computed } from "@preact/signals-core";
5
5
  function useFX(ref) {
@@ -228,16 +228,16 @@ function useColorMode() {
228
228
  });
229
229
  return unsubscribe;
230
230
  }, []);
231
- const setColorMode = (mode) => {
231
+ const setColorMode2 = (mode) => {
232
232
  themeRegistry.setColorMode(mode);
233
233
  };
234
234
  const toggleColorMode = () => {
235
235
  const newMode = colorMode === "light" ? "dark" : "light";
236
- setColorMode(newMode);
236
+ setColorMode2(newMode);
237
237
  };
238
238
  return {
239
239
  colorMode,
240
- setColorMode,
240
+ setColorMode: setColorMode2,
241
241
  toggleColorMode
242
242
  };
243
243
  }
@@ -305,26 +305,27 @@ function getSurfaceColor(colors, shade = "DEFAULT") {
305
305
  function getBorderColor(colors, shade = "DEFAULT") {
306
306
  return colors.border[shade].toNumber();
307
307
  }
308
- themeRegistry.subscribe(() => {
309
- updateColorTokensForMode();
310
- });
311
- function setColorPreset(presetName) {
312
- const currentMode = themeRegistry.getColorMode();
313
- const preset = getPresetWithMode(presetName, currentMode);
308
+ function setColorPreset(presetName, colorMode) {
309
+ const targetMode = colorMode ?? themeRegistry.getColorMode();
310
+ const preset = getPresetWithMode(presetName, targetMode);
314
311
  themeRegistry.setColorTokens(preset.colors);
315
- themeRegistry.setCurrentPresetName(presetName);
316
- }
317
- function updateColorTokensForMode() {
318
- const presetName = themeRegistry.getCurrentPresetName();
319
- if (presetName) {
320
- const currentMode = themeRegistry.getColorMode();
321
- const preset = getPresetWithMode(presetName, currentMode);
322
- themeRegistry.setColorTokens(preset.colors);
312
+ themeRegistry.setCurrentPresetName(presetName, true);
313
+ if (colorMode && themeRegistry.getColorMode() !== colorMode) {
314
+ themeRegistry.setColorMode(colorMode);
315
+ return;
323
316
  }
317
+ setTimeout(() => {
318
+ import("./TransformOriginView-CiFiQcku.js").then((n2) => n2.bC).then(({ remountAll }) => {
319
+ remountAll();
320
+ });
321
+ }, 0);
324
322
  }
325
323
  function getCurrentPreset() {
326
324
  return themeRegistry.getCurrentPresetName();
327
325
  }
326
+ function setColorMode(mode) {
327
+ themeRegistry.setColorMode(mode);
328
+ }
328
329
  function getAvailablePresets() {
329
330
  return ["oceanBlue", "forestGreen", "midnight"];
330
331
  }
@@ -398,7 +399,7 @@ export {
398
399
  b as CharTextInput,
399
400
  $ as DEFAULT_EFFECT,
400
401
  DEFAULT_FX,
401
- b9 as DEFAULT_SPRING_CONFIG,
402
+ bb as DEFAULT_SPRING_CONFIG,
402
403
  K as DOMInputElement,
403
404
  V as DebugLogger,
404
405
  X as DevConfig,
@@ -409,8 +410,8 @@ export {
409
410
  a0 as EFFECT_REGISTRY,
410
411
  FX_REGISTRY,
411
412
  Fragment,
412
- aP as Graphics,
413
- be as HexColor,
413
+ aR as Graphics,
414
+ bg as HexColor,
414
415
  I as Icon,
415
416
  f as Image,
416
417
  L as KeyboardInputManager,
@@ -422,25 +423,25 @@ export {
422
423
  h as RadioGroup,
423
424
  m as RangeSlider,
424
425
  i as RefOriginView,
425
- ba as SPRING_PRESETS,
426
+ bc as SPRING_PRESETS,
426
427
  S as ScrollSlider,
427
428
  k as ScrollView,
428
429
  l as Sidebar,
429
430
  n as Slider,
430
- bb as SpringPhysics,
431
- aO as Sprite,
432
- aR as Text,
433
- aQ as TileSprite,
431
+ bd as SpringPhysics,
432
+ aQ as Sprite,
433
+ aT as Text,
434
+ aS as TileSprite,
434
435
  T as Toggle,
435
436
  o as TransformOriginView,
436
- aS as View,
437
+ aU as View,
437
438
  W as WrapText,
438
439
  alpha,
439
- b6 as animatedSignal,
440
- br as applyDarkMode,
440
+ b8 as animatedSignal,
441
+ bt as applyDarkMode,
441
442
  a1 as applyEffectByName,
442
443
  applyFXByName,
443
- bs as applyLightMode,
444
+ bu as applyLightMode,
444
445
  j as calculateSliderSize,
445
446
  colorsToTheme,
446
447
  computed,
@@ -448,7 +449,8 @@ export {
448
449
  a3 as createBounceEffect,
449
450
  a4 as createBreatheEffect,
450
451
  createColorMatrixFX,
451
- aK as createElement,
452
+ aG as createDefaultTheme,
453
+ aM as createElement,
452
454
  a5 as createFadeEffect,
453
455
  a6 as createFlashEffect,
454
456
  a7 as createFlipInEffect,
@@ -468,89 +470,91 @@ export {
468
470
  ah as createSpinEffect,
469
471
  ai as createSwingEffect,
470
472
  aj as createTadaEffect,
471
- bo as createTextStyle,
473
+ bq as createTextStyle,
472
474
  createTextStyleTokens,
473
- aI as createTheme,
475
+ aJ as createTheme,
474
476
  createVignetteFX,
475
477
  ak as createWiggleEffect,
476
478
  al as createWobbleEffect,
477
479
  am as createZoomInEffect,
478
480
  an as createZoomOutEffect,
479
- bj as darken,
480
- bk as darkenHex,
481
+ bl as darken,
482
+ bm as darkenHex,
481
483
  defaultRadiusTokens,
482
484
  defaultSizeTokens,
483
485
  defaultSpacingTokens,
484
- bz as defaultTextStyleTokens,
485
- aG as defaultTheme,
486
+ bB as defaultTextStyleTokens,
487
+ aH as defaultTheme,
486
488
  ax as disposeCtx,
487
- bp as ensureContrast,
488
- bt as forestGreenPreset,
489
- bu as generateColorScale,
489
+ br as ensureContrast,
490
+ bv as forestGreenPreset,
491
+ bw as generateColorScale,
490
492
  getAvailablePresets,
491
493
  getBackgroundColor,
492
494
  getBorderColor,
493
- bq as getContrastRatio,
495
+ bs as getContrastRatio,
494
496
  ao as getCurrent,
495
497
  getCurrentPreset,
496
- bv as getPreset,
498
+ bx as getPreset,
497
499
  getPresetWithMode,
498
500
  U as getRenderContext,
499
501
  getSurfaceColor,
500
502
  getTextColor,
501
- aJ as getThemedProps,
502
- b1 as graphicsCreator,
503
- b2 as graphicsPatcher,
504
- bl as hex,
505
- bf as hexToNumber,
503
+ aK as getThemedProps,
504
+ b3 as graphicsCreator,
505
+ b4 as graphicsPatcher,
506
+ bn as hex,
507
+ bh as hexToNumber,
506
508
  aF as host,
507
- a$ as imageCreator,
508
- b0 as imagePatcher,
509
- b7 as isAnimatedSignal,
509
+ b1 as imageCreator,
510
+ b2 as imagePatcher,
511
+ b9 as isAnimatedSignal,
510
512
  jsx,
511
513
  jsxs,
512
- bm as lighten,
513
- bn as lightenHex,
514
+ bo as lighten,
515
+ bp as lightenHex,
514
516
  memo,
515
- aH as mergeThemes,
516
- bw as midnightPreset,
517
- aL as mount,
517
+ aI as mergeThemes,
518
+ by as midnightPreset,
519
+ aN as mount,
518
520
  O as mountComponent,
519
521
  O2 as mountJSX,
520
- aX as nineSliceCreator,
521
- aY as nineSlicePatcher,
522
+ aZ as nineSliceCreator,
523
+ a_ as nineSlicePatcher,
522
524
  noMemo,
523
525
  aD as nodeRegistry,
524
526
  G as normalizeCornerRadius,
525
527
  H as normalizeEdgeInsets,
526
528
  J as normalizeGap,
527
- bg as numberToHex,
528
- bh as numberToRgb,
529
- bx as oceanBluePreset,
530
- aN as patchVNode,
531
- b5 as portalRegistry,
532
- by as presets,
529
+ bi as numberToHex,
530
+ bj as numberToRgb,
531
+ bz as oceanBluePreset,
532
+ aP as patchVNode,
533
+ b7 as portalRegistry,
534
+ bA as presets,
533
535
  aE as register,
534
536
  registerBuiltins,
535
537
  aA as releaseAllSVGTextures,
536
538
  ay as releaseSVGTexture,
537
539
  az as releaseSVGTextures,
540
+ aL as remountAll,
538
541
  a2 as resolveEffect,
539
542
  resolveFX,
540
- bi as rgbToNumber,
543
+ bk as rgbToNumber,
544
+ setColorMode,
541
545
  setColorPreset,
542
546
  au as shallowEqual,
543
547
  av as shouldComponentUpdate,
544
- aZ as spriteCreator,
545
- a_ as spritePatcher,
548
+ a$ as spriteCreator,
549
+ b0 as spritePatcher,
546
550
  Z as svgToTexture,
547
- aT as textCreator,
548
- aU as textPatcher,
551
+ aV as textCreator,
552
+ aW as textPatcher,
549
553
  themeRegistry,
550
- b3 as tileSpriteCreator,
551
- b4 as tileSpritePatcher,
552
- aM as unmount,
553
- b8 as unwrapSignal,
554
+ b5 as tileSpriteCreator,
555
+ b6 as tileSpritePatcher,
556
+ aO as unmount,
557
+ ba as unwrapSignal,
554
558
  useBlur,
555
559
  as as useCallback,
556
560
  useColorMode,
@@ -568,14 +572,14 @@ export {
568
572
  aC as useSVGTextures,
569
573
  at as useScene,
570
574
  useShadow,
571
- bc as useSpring,
572
- bd as useSprings,
575
+ be as useSpring,
576
+ bf as useSprings,
573
577
  useState,
574
578
  useTheme,
575
579
  useThemeSubscription,
576
580
  useThemeTokens,
577
- aV as viewCreator,
578
- aW as viewPatcher,
581
+ aX as viewCreator,
582
+ aY as viewPatcher,
579
583
  Q as viewportRegistry,
580
584
  ap as withHooks
581
585
  };