@number10/phaserjsx 0.1.0

package/dist/animation/animated-signal.d.ts

@@ -0,0 +1,35 @@
+import { Signal } from '@preact/signals-core';
+/**
+ * Animated signal that holds a numeric value
+ * Can be used in JSX props for direct updates without VDOM
+ */
+export interface AnimatedSignal extends Signal<number> {
+    /** Mark as animated signal for VDOM detection */
+    __isAnimated: true;
+}
+/**
+ * Creates an animated signal
+ * @param initialValue - Initial numeric value
+ * @returns Animated signal
+ */
+export declare function animatedSignal(initialValue: number): AnimatedSignal;
+/**
+ * Type guard to check if value is an animated signal
+ * @param value - Value to check
+ * @returns True if value is an animated signal
+ */
+export declare function isAnimatedSignal(value: unknown): value is AnimatedSignal;
+/**
+ * Unwraps signal value or returns raw value
+ * Type-safe overloads ensure correct return types
+ * @param value - Signal or raw value
+ * @returns Unwrapped value
+ */
+declare function unwrapSignal(value: AnimatedSignal): number;
+declare function unwrapSignal(value: number): number;
+declare function unwrapSignal(value: string): string;
+declare function unwrapSignal(value: number | AnimatedSignal): number;
+declare function unwrapSignal(value: string | AnimatedSignal): string | number;
+declare function unwrapSignal(value: number | string | AnimatedSignal): number | string;
+export { unwrapSignal };
+//# sourceMappingURL=animated-signal.d.ts.map

package/dist/animation/animated-signal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-signal.d.ts","sourceRoot":"","sources":["../../src/animation/animated-signal.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAE1D;;;GAGG;AACH,MAAM,WAAW,cAAe,SAAQ,MAAM,CAAC,MAAM,CAAC;IACpD,iDAAiD;IACjD,YAAY,EAAE,IAAI,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,cAAc,CAInE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAOxE;AAED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAAA;AACpD,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;AAC5C,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;AAC5C,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,MAAM,CAAA;AAC7D,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAAA;AACtE,iBAAS,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,CAAA;AAQ/E,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/animation/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Animation utilities export
+ */
+export * from './animated-signal';
+export * from './spring-physics';
+export * from './useSpring';
+//# sourceMappingURL=index.d.ts.map

package/dist/animation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA"}

package/dist/animation/spring-physics.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Spring physics engine for smooth, natural animations
+ * Based on spring-damper system with configurable tension, friction, and mass
+ */
+/**
+ * Configuration for spring physics behavior
+ */
+export interface SpringConfig {
+    /** Spring stiffness (higher = faster, snappier). Default: 170 */
+    tension?: number;
+    /** Damping force (higher = less oscillation). Default: 26 */
+    friction?: number;
+    /** Mass of the animated object (higher = slower). Default: 1 */
+    mass?: number;
+    /** Velocity threshold below which animation stops. Default: 0.01 */
+    restVelocity?: number;
+    /** Distance threshold below which animation stops. Default: 0.01 */
+    restDelta?: number;
+    /** Clamp values to prevent overshoot. Default: false */
+    clamp?: boolean;
+}
+/**
+ * Spring physics state
+ */
+export interface SpringState {
+    /** Current value */
+    value: number;
+    /** Current velocity */
+    velocity: number;
+}
+/**
+ * Default spring configuration (similar to react-spring)
+ */
+export declare const DEFAULT_SPRING_CONFIG: Required<SpringConfig>;
+/**
+ * Preset spring configurations for common use cases
+ * Note: clamp prevents overshoot but can make animations feel less natural
+ * For UI animations, consider enabling clamp to prevent visual artifacts
+ */
+export declare const SPRING_PRESETS: {
+    /** Gentle, slow animation */
+    readonly gentle: {
+        readonly tension: 120;
+        readonly friction: 14;
+    };
+    /** Moderate, balanced animation (default) */
+    readonly default: {
+        readonly tension: 170;
+        readonly friction: 26;
+    };
+    /** Fast, snappy animation */
+    readonly wobbly: {
+        readonly tension: 180;
+        readonly friction: 12;
+    };
+    /** Very fast, bouncy animation */
+    readonly stiff: {
+        readonly tension: 210;
+        readonly friction: 20;
+    };
+    /** Slow, smooth animation */
+    readonly slow: {
+        readonly tension: 280;
+        readonly friction: 60;
+    };
+    /** Instant, no animation */
+    readonly instant: {
+        readonly tension: 1000;
+        readonly friction: 100;
+    };
+};
+/**
+ * Type for animation preset keys
+ */
+export type AnimationPreset = keyof typeof SPRING_PRESETS;
+/**
+ * Type for animation configuration (preset name or custom config)
+ */
+export type AnimationConfig = AnimationPreset | SpringConfig;
+/**
+ * Spring physics engine
+ * Implements spring-damper physics for smooth, natural animations
+ */
+export declare class SpringPhysics {
+    private config;
+    /**
+     * Creates a new spring physics engine
+     * @param config - Spring configuration
+     */
+    constructor(config?: SpringConfig);
+    /**
+     * Updates spring configuration
+     * @param config - Partial config to merge with current
+     */
+    updateConfig(config: Partial<SpringConfig>): void;
+    /**
+     * Performs one physics step
+     * Uses semi-implicit Euler integration for stability
+     * @param state - Current spring state
+     * @param target - Target value
+     * @param deltaTime - Time delta in seconds
+     * @returns New spring state
+     */
+    step(state: SpringState, target: number, deltaTime: number): SpringState;
+    /**
+     * Checks if spring has reached rest state
+     * @param state - Current spring state
+     * @param target - Target value
+     * @returns True if spring is at rest
+     */
+    isAtRest(state: SpringState, target: number): boolean;
+    /**
+     * Snaps spring to target if at rest
+     * @param state - Current spring state
+     * @param target - Target value
+     * @returns Adjusted state (snapped if at rest)
+     */
+    snapIfAtRest(state: SpringState, target: number): SpringState;
+}
+//# sourceMappingURL=spring-physics.d.ts.map

package/dist/animation/spring-physics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring-physics.d.ts","sourceRoot":"","sources":["../../src/animation/spring-physics.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,YAAY,CAOxD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc;IACzB,6BAA6B;;;;;IAE7B,6CAA6C;;;;;IAE7C,6BAA6B;;;;;IAE7B,kCAAkC;;;;;IAElC,6BAA6B;;;;;IAE7B,4BAA4B;;;;;CAEpB,CAAA;AAEV;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,cAAc,CAAA;AACzD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG,YAAY,CAAA;AAE5D;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAwB;IAEtC;;;OAGG;gBACS,MAAM,GAAE,YAAiB;IAIrC;;;OAGG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,IAAI;IAIjD;;;;;;;OAOG;IACH,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,WAAW;IA+BxE;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO;IAOrD;;;;;OAKG;IACH,YAAY,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW;CAM9D"}

package/dist/animation/useSpring.d.ts

@@ -0,0 +1,54 @@
+import { computed } from '@preact/signals-core';
+import { AnimatedSignal } from './animated-signal';
+import { SPRING_PRESETS, SpringConfig } from './spring-physics';
+/**
+ * Spring animation hook
+ * Creates an animated signal that smoothly transitions to target values
+ *
+ * @param initialValue - Initial value
+ * @param config - Spring configuration or preset name
+ * @returns Tuple of [animated signal, setter function]
+ *
+ * @example
+ * ```tsx
+ * // ✓ SAFE - leaf node
+ * const [x, setX] = useSpring(0, 'wobbly')
+ * <View x={x} width={50} height={50} backgroundColor={0xff0000} />
+ *
+ * // ✓ SAFE - transform properties
+ * const [scale, setScale] = useSpring(1, 'default')
+ * <View scale={scale}><Text text="Hello" /></View>
+ *
+ * // ✗ UNSAFE - container with percentage children
+ * const [width, setWidth] = useSpring(200, 'wobbly')
+ * <View width={width}><NineSlice width="100%" /></View> // BREAKS!
+ * ```
+ */
+export declare function useSpring(initialValue: number, config?: SpringConfig | keyof typeof SPRING_PRESETS, onComplete?: () => void): [AnimatedSignal, (target: number | ((prev: number) => number)) => void];
+/**
+ * Multi-spring animation hook
+ * Creates multiple animated signals that share the same configuration
+ * @param initialValues - Object with initial values
+ * @param config - Spring configuration or preset name
+ * @returns Tuple of [animated signals object, setter function]
+ *
+ * @example
+ * ```tsx
+ * const [pos, setPos] = useSprings({ x: 0, y: 0 }, 'wobbly')
+ * <View x={pos.x} y={pos.y} />
+ * setPos({ x: 100, y: 200 })
+ * ```
+ */
+export declare function useSprings<T extends Record<string, number>>(initialValues: T, config?: SpringConfig | keyof typeof SPRING_PRESETS): [
+    {
+        [K in keyof T]: AnimatedSignal;
+    },
+    (values: Partial<{
+        [K in keyof T]: number | ((prev: number) => number);
+    }>) => void
+];
+/**
+ * Export presets for convenience
+ */
+export { computed, SPRING_PRESETS };
+//# sourceMappingURL=useSpring.d.ts.map

package/dist/animation/useSpring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpring.d.ts","sourceRoot":"","sources":["../../src/animation/useSpring.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,QAAQ,EAAe,MAAM,sBAAsB,CAAA;AAI5D,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AACvE,OAAO,EACL,cAAc,EAEd,KAAK,YAAY,EAElB,MAAM,kBAAkB,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,SAAS,CACvB,YAAY,EAAE,MAAM,EACpB,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,OAAO,cAAc,EACnD,UAAU,CAAC,EAAE,MAAM,IAAI,GACtB,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,KAAK,IAAI,CAAC,CAiGzE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzD,aAAa,EAAE,CAAC,EAChB,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,OAAO,cAAc,GAClD;IACD;SAAG,CAAC,IAAI,MAAM,CAAC,GAAG,cAAc;KAAE;IAClC,CAAC,MAAM,EAAE,OAAO,CAAC;SAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;KAAE,CAAC,KAAK,IAAI;CACnF,CA4GA;AAED;;GAEG;AACH,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAA"}

package/dist/colors/color-presets.d.ts

@@ -0,0 +1,89 @@
+import { ColorShade, ColorTokens } from './color-types';
+/**
+ * Generate a complete color scale from a base color
+ * Creates shades from lightest to darkest with DEFAULT pointing to medium
+ * @param baseColor - The base color in hex format (e.g., '#2196f3')
+ * @returns Complete ColorShade with all semantic levels as HexColor objects
+ * @example
+ * ```typescript
+ * const primaryScale = generateColorScale('#2196f3')
+ * // Usage: colors.primary.medium.toNumber()
+ * // DEFAULT also works: colors.primary.DEFAULT.toNumber()
+ * ```
+ */
+export declare function generateColorScale(baseColor: string): ColorShade;
+/**
+ * Color preset configuration
+ * Defines a complete set of semantic colors for a theme
+ */
+export interface ColorPreset {
+    /** Preset name for identification */
+    name: string;
+    /** Complete color token set */
+    colors: ColorTokens;
+}
+/**
+ * Ocean Blue Preset
+ * Clean, professional blue-based palette
+ */
+export declare const oceanBluePreset: ColorPreset;
+/**
+ * Forest Green Preset
+ * Nature-inspired green-based palette
+ */
+export declare const forestGreenPreset: ColorPreset;
+/**
+ * Midnight Preset
+ * Dark, elegant purple-based palette
+ */
+export declare const midnightPreset: ColorPreset;
+/**
+ * Apply light mode overrides to a preset
+ * Adjusts neutral colors for optimal light mode appearance
+ * @param preset - Base preset to modify
+ * @returns New preset with light mode neutral colors
+ */
+export declare function applyLightMode(preset: ColorPreset): ColorPreset;
+/**
+ * Apply dark mode overrides to a preset
+ * Adjusts neutral colors for optimal dark mode appearance
+ * @param preset - Base preset to modify
+ * @returns New preset with dark mode neutral colors
+ */
+export declare function applyDarkMode(preset: ColorPreset): ColorPreset;
+/**
+ * All available presets
+ */
+export declare const presets: {
+    readonly oceanBlue: ColorPreset;
+    readonly forestGreen: ColorPreset;
+    readonly midnight: ColorPreset;
+};
+/**
+ * Preset names for type safety
+ */
+export type PresetName = keyof typeof presets;
+/**
+ * Get a preset by name
+ * @param name - Preset name
+ * @returns Color preset
+ * @example
+ * ```typescript
+ * const preset = getPreset('oceanBlue')
+ * const primaryColor = preset.colors.primary.DEFAULT
+ * ```
+ */
+export declare function getPreset(name: PresetName): ColorPreset;
+/**
+ * Get a preset with color mode applied
+ * @param name - Preset name
+ * @param mode - Color mode ('light' or 'dark')
+ * @returns Color preset with mode-specific neutral colors
+ * @example
+ * ```typescript
+ * const darkPreset = getPresetWithMode('oceanBlue', 'dark')
+ * const bgColor = darkPreset.colors.background.DEFAULT
+ * ```
+ */
+export declare function getPresetWithMode(name: PresetName, mode: 'light' | 'dark'): ColorPreset;
+//# sourceMappingURL=color-presets.d.ts.map

package/dist/colors/color-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-presets.d.ts","sourceRoot":"","sources":["../../src/colors/color-presets.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAA;AAyB3E;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,UAAU,CAQhE;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,MAAM,EAAE,WAAW,CAAA;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,WA4C7B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,WA4C/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,WA4C5B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,CAmC/D;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW,CAmC9D;AAED;;GAEG;AACH,eAAO,MAAM,OAAO;;;;CAIV,CAAA;AAEV;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAA;AAE7C;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW,CAEvD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,WAAW,CAGvF"}

package/dist/colors/color-theme-helpers.d.ts

@@ -0,0 +1,65 @@
+import { ColorTokens } from './color-types';
+/**
+ * Convert ColorTokens to a theme-compatible object
+ * Maps semantic color names to Phaser number format for View/Button components
+ * @param colors - ColorTokens to convert
+ * @returns Object with backgroundColor, borderColor, etc.
+ * @example
+ * ```typescript
+ * const colors = getPreset('oceanBlue').colors
+ * const buttonTheme = {
+ *   ...colorsToTheme(colors, 'primary'),
+ *   padding: 8,
+ * }
+ * // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }
+ * ```
+ */
+export declare function colorsToTheme(colors: ColorTokens, colorKey: keyof Pick<ColorTokens, 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'>, options?: {
+    /** Which shade to use for background (default: 'DEFAULT') */
+    backgroundShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT';
+    /** Which shade to use for border (default: 'dark') */
+    borderShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT';
+    /** Include border color (default: true) */
+    includeBorder?: boolean;
+}): {
+    backgroundColor: number;
+    borderColor?: number;
+};
+/**
+ * Get text color from ColorTokens as hex string for Phaser Text style
+ * @param colors - ColorTokens to use
+ * @param shade - Which text shade to use (default: 'DEFAULT')
+ * @param alphaValue - Optional alpha value (0-1)
+ * @returns Hex string or rgba string for Text style
+ * @example
+ * ```typescript
+ * const colors = getPreset('oceanBlue').colors
+ * const textStyle = {
+ *   color: getTextColor(colors),
+ *   fontSize: '18px'
+ * }
+ * ```
+ */
+export declare function getTextColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT', alphaValue?: number): string;
+/**
+ * Get background color from ColorTokens
+ * @param colors - ColorTokens to use
+ * @param shade - Which shade to use (default: 'DEFAULT')
+ * @returns Phaser color number
+ */
+export declare function getBackgroundColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'): number;
+/**
+ * Get surface color from ColorTokens
+ * @param colors - ColorTokens to use
+ * @param shade - Which shade to use (default: 'DEFAULT')
+ * @returns Phaser color number
+ */
+export declare function getSurfaceColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'): number;
+/**
+ * Get border color from ColorTokens
+ * @param colors - ColorTokens to use
+ * @param shade - Which shade to use (default: 'DEFAULT')
+ * @returns Phaser color number
+ */
+export declare function getBorderColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'): number;
+//# sourceMappingURL=color-theme-helpers.d.ts.map

package/dist/colors/color-theme-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-theme-helpers.d.ts","sourceRoot":"","sources":["../../src/colors/color-theme-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAGhD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,MAAM,IAAI,CAClB,WAAW,EACX,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAC9E,EACD,OAAO,GAAE;IACP,6DAA6D;IAC7D,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IAClF,sDAAsD;IACtD,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9E,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;CACnB,GACL;IACD,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAYA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,EACnF,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CAGR;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,GAClF,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,GAClF,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,GAClF,MAAM,CAER"}

package/dist/colors/color-types.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Color system types for PhaserJSX UI
+ * Provides semantic color tokens with named shade levels
+ */
+/**
+ * Named shade levels for color scales
+ * Uses semantic names instead of numeric values
+ */
+export type ShadeLevel = 'lightest' | 'light' | 'medium' | 'dark' | 'darkest';
+/**
+ * Hex color string with conversion method
+ * Extends string but adds toNumber() for Phaser compatibility
+ */
+export declare class HexColor extends String {
+    /**
+     * Convert to Phaser number format
+     * @returns Color as number (0xffffff)
+     */
+    toNumber(): number;
+    /**
+     * Create a HexColor from a hex string
+     * @param hex - Hex color string
+     */
+    static from(hex: string): HexColor;
+}
+/**
+ * Color shade scale with semantic naming
+ * Each color token has multiple shades for different use cases
+ * Uses HexColor type for VS Code color picker support and .toNumber() method
+ * DEFAULT is computed property pointing to medium (not in interface)
+ * @example
+ * ```typescript
+ * const primaryShade: ColorShade = {
+ *   lightest: HexColor.from('#e3f2fd'),
+ *   light: HexColor.from('#90caf9'),
+ *   medium: HexColor.from('#42a5f5'),
+ *   dark: HexColor.from('#1976d2'),
+ *   darkest: HexColor.from('#0d47a1'),
+ * }
+ * // DEFAULT is available via getter:
+ * backgroundColor: colors.primary.DEFAULT.toNumber() // returns medium
+ * // Direct usage:
+ * backgroundColor: colors.primary.medium.toNumber()
+ * ```
+ */
+export interface ColorShade {
+    /** Lightest shade - backgrounds, hover states */
+    lightest: HexColor;
+    /** Light shade - secondary elements */
+    light: HexColor;
+    /** Medium shade - interactive elements (also available as DEFAULT) */
+    medium: HexColor;
+    /** Dark shade - borders, dividers */
+    dark: HexColor;
+    /** Darkest shade - text, emphasis */
+    darkest: HexColor;
+    /** DEFAULT shade - computed property that points to medium */
+    readonly DEFAULT: HexColor;
+}
+/**
+ * Complete color token system with semantic color categories
+ * Designed for global theme usage with nested theme support
+ */
+export interface ColorTokens {
+    /** Primary brand color - main actions and emphasis */
+    primary: ColorShade;
+    /** Secondary brand color - supporting actions */
+    secondary: ColorShade;
+    /** Accent color - highlights and special elements */
+    accent: ColorShade;
+    /** Success state color - confirmations, positive feedback */
+    success: ColorShade;
+    /** Warning state color - cautions, alerts */
+    warning: ColorShade;
+    /** Error state color - errors, destructive actions */
+    error: ColorShade;
+    /** Info state color - informational messages */
+    info: ColorShade;
+    /** Background colors - main app backgrounds */
+    background: ColorShade;
+    /** Surface colors - cards, panels, elevated elements */
+    surface: ColorShade;
+    /** Text colors - typography hierarchy */
+    text: ColorShade;
+    /** Border colors - dividers, outlines */
+    border: ColorShade;
+}
+/**
+ * Color mode enum for light/dark theme switching
+ */
+export type ColorMode = 'light' | 'dark';
+/**
+ * RGB color representation
+ */
+export interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+}
+//# sourceMappingURL=color-types.d.ts.map

package/dist/colors/color-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-types.d.ts","sourceRoot":"","sources":["../../src/colors/color-types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7E;;;GAGG;AACH,qBAAa,QAAS,SAAQ,MAAM;IAClC;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAKlB;;;OAGG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ;CAGnC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,UAAU;IACzB,iDAAiD;IACjD,QAAQ,EAAE,QAAQ,CAAA;IAClB,uCAAuC;IACvC,KAAK,EAAE,QAAQ,CAAA;IACf,sEAAsE;IACtE,MAAM,EAAE,QAAQ,CAAA;IAChB,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAA;IACd,qCAAqC;IACrC,OAAO,EAAE,QAAQ,CAAA;IACjB,8DAA8D;IAC9D,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAA;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,OAAO,EAAE,UAAU,CAAA;IACnB,iDAAiD;IACjD,SAAS,EAAE,UAAU,CAAA;IACrB,qDAAqD;IACrD,MAAM,EAAE,UAAU,CAAA;IAElB,6DAA6D;IAC7D,OAAO,EAAE,UAAU,CAAA;IACnB,6CAA6C;IAC7C,OAAO,EAAE,UAAU,CAAA;IACnB,sDAAsD;IACtD,KAAK,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,IAAI,EAAE,UAAU,CAAA;IAEhB,+CAA+C;IAC/C,UAAU,EAAE,UAAU,CAAA;IACtB,wDAAwD;IACxD,OAAO,EAAE,UAAU,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,UAAU,CAAA;IAChB,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV"}

package/dist/colors/color-utils.d.ts

@@ -0,0 +1,171 @@
+import { TextStyleToken } from '../design-tokens';
+import { HexColor, RGBColor } from './color-types';
+/**
+ * Convert hex string to Phaser number format
+ * @param hex - Hex color string (e.g., '#ffffff' or 'ffffff')
+ * @returns Phaser color number (e.g., 0xffffff)
+ * @example
+ * ```typescript
+ * hexToNumber('#ff0000') // returns 0xff0000
+ * hexToNumber('00ff00')  // returns 0x00ff00
+ * ```
+ */
+export declare function hexToNumber(hex: string): number;
+/**
+ * Convert Phaser number format to hex string
+ * @param num - Phaser color number (e.g., 0xffffff)
+ * @param withHash - Include '#' prefix (default: true)
+ * @returns Hex color string (e.g., '#ffffff')
+ * @example
+ * ```typescript
+ * numberToHex(0xff0000)        // returns '#ff0000'
+ * numberToHex(0x00ff00, false) // returns '00ff00'
+ * ```
+ */
+export declare function numberToHex(num: number, withHash?: boolean): string;
+/**
+ * Convert RGB values to Phaser number format
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Phaser color number
+ * @example
+ * ```typescript
+ * rgbToNumber(255, 0, 0)     // returns 0xff0000 (red)
+ * rgbToNumber(0, 255, 0)     // returns 0x00ff00 (green)
+ * rgbToNumber(255, 255, 255) // returns 0xffffff (white)
+ * ```
+ */
+export declare function rgbToNumber(r: number, g: number, b: number): number;
+/**
+ * Convert Phaser number to RGB components
+ * @param num - Phaser color number
+ * @returns RGB color object
+ * @example
+ * ```typescript
+ * numberToRgb(0xff0000) // returns { r: 255, g: 0, b: 0 }
+ * numberToRgb(0x00ff00) // returns { r: 0, g: 255, b: 0 }
+ * ```
+ */
+export declare function numberToRgb(num: number): RGBColor;
+/**
+ * Lighten a color by a given amount
+ * @param color - Phaser color number
+ * @param amount - Amount to lighten (0.0 to 1.0, where 1.0 is white)
+ * @returns Lightened color number
+ * @example
+ * ```typescript
+ * lighten(0x0000ff, 0.3) // returns lighter blue
+ * lighten(0xff0000, 0.5) // returns light red/pink
+ * ```
+ */
+export declare function lighten(color: number, amount: number): number;
+/**
+ * Darken a color by a given amount
+ * @param color - Phaser color number
+ * @param amount - Amount to darken (0.0 to 1.0, where 1.0 is black)
+ * @returns Darkened color number
+ * @example
+ * ```typescript
+ * darken(0x0000ff, 0.3) // returns darker blue
+ * darken(0xff0000, 0.5) // returns dark red
+ * ```
+ */
+export declare function darken(color: number, amount: number): number;
+/**
+ * Lighten a hex color by a given amount
+ * @param hex - Hex color (e.g., '#ffffff' or 'ffffff')
+ * @param amount - Amount to lighten (0.0 to 1.0, where 1.0 is white)
+ * @returns Lightened hex color string with '#' prefix
+ * @example
+ * ```typescript
+ * lightenHex('#0000ff', 0.3) // returns lighter blue
+ * lightenHex('#ff0000', 0.5) // returns light red/pink
+ * ```
+ */
+export declare function lightenHex(hex: string, amount: number): HexColor;
+/**
+ * Darken a hex color by a given amount
+ * @param hex - Hex color (e.g., '#ffffff' or 'ffffff')
+ * @param amount - Amount to darken (0.0 to 1.0, where 1.0 is black)
+ * @returns Darkened hex color string with '#' prefix
+ * @example
+ * ```typescript
+ * darkenHex('#0000ff', 0.3) // returns darker blue
+ * darkenHex('#ff0000', 0.5) // returns dark red
+ * ```
+ */
+export declare function darkenHex(hex: string, amount: number): HexColor;
+/**
+ * Hex color wrapper with chainable conversion methods
+ * Provides fluent API for color conversions
+ */
+export interface HexColorWrapper {
+    /** Original hex string value */
+    value: string;
+    /** Convert to Phaser number format */
+    toNumber: () => number;
+    /** Convert to string (returns hex) */
+    toString: () => string;
+}
+/**
+ * Create a hex color wrapper with chainable methods
+ * @param hex - Hex color string
+ * @returns Wrapper object with conversion methods
+ * @example
+ * ```typescript
+ * const color = hex('#ff0000')
+ * color.toNumber()  // 0xff0000
+ * color.toString()  // '#ff0000'
+ *
+ * // Direct usage:
+ * backgroundColor: hex(colors.primary.DEFAULT).toNumber()
+ * ```
+ */
+export declare function hex(hexColor: string): HexColorWrapper;
+/**
+ * Convert color to rgba string for Phaser Text style
+ * @param color - Phaser color number
+ * @param alphaValue - Alpha value (0.0 to 1.0, default: 1.0)
+ * @returns RGBA string usable in Text style (e.g., 'rgba(255, 0, 0, 0.5)')
+ * @example
+ * ```typescript
+ * alpha(0xff0000, 1.0)   // returns 'rgba(255, 0, 0, 1)'
+ * alpha(0x00ff00, 0.5)   // returns 'rgba(0, 255, 0, 0.5)'
+ * alpha(0x0000ff)        // returns 'rgba(0, 0, 255, 1)'
+ * ```
+ */
+export declare function alpha(color: number, alphaValue?: number): string;
+/**
+ * Calculate contrast ratio between two colors (WCAG 2.0)
+ * @param foreground - Foreground color (e.g., text)
+ * @param background - Background color
+ * @returns Contrast ratio (1 to 21)
+ * @example
+ * ```typescript
+ * getContrastRatio(0x000000, 0xffffff) // returns 21 (black on white)
+ * getContrastRatio(0xffffff, 0xffffff) // returns 1 (white on white)
+ * ```
+ */
+export declare function getContrastRatio(foreground: number, background: number): number;
+/**
+ * Ensure minimum contrast ratio by adjusting foreground color
+ * @param foreground - Foreground color to adjust
+ * @param background - Background color (fixed)
+ * @param minRatio - Minimum contrast ratio (default: 4.5 for WCAG AA)
+ * @returns Adjusted foreground color meeting contrast requirements
+ * @example
+ * ```typescript
+ * // Ensure text is readable on background
+ * const textColor = ensureContrast(0x888888, 0xffffff, 4.5)
+ * ```
+ */
+export declare function ensureContrast(foreground: number, background: number, minRatio?: number): number;
+/**
+ * Create a TextStyleToken by merging base style with overrides to ensure required properties are set
+ * @param baseStyle
+ * @param overrides
+ * @returns
+ */
+export declare function createTextStyle(baseStyle: Partial<TextStyleToken> | undefined, overrides: Partial<TextStyleToken>): TextStyleToken;
+//# sourceMappingURL=color-utils.d.ts.map