@joydle/ui 0.1.0 → 0.1.2

package/dist/controls/ActionButton.d.ts

@@ -1,11 +1,20 @@
 import type { JSX } from 'preact';
 export type ActionButtonSize = 'small' | 'medium' | 'large';
+/** Icon prop — component ref for button icon. */
+export type ActionButtonIconProp = ((props: {
+    size?: number;
+    color?: string;
+    fill?: string;
+    strokeWidth?: number;
+}) => JSX.Element);
 export interface ActionButtonProps {
     position: 'bottom-left' | 'bottom-right' | 'fullscreen';
     label: string;
     action?: string;
     size?: ActionButtonSize;
     opacity?: number;
+    /** Optional icon to display inside the button. */
+    icon?: ActionButtonIconProp;
     /**
      * When rendered inside an ActionButtonGroup, positioning is managed by the
      * parent.  Setting `_managed` suppresses fixed positioning and the media
@@ -14,5 +23,5 @@ export interface ActionButtonProps {
      */
     _managed?: boolean;
 }
-export declare function ActionButton({ position, label, action, size, opacity, _managed, }: ActionButtonProps): JSX.Element;
+export declare function ActionButton({ position, label, action, size, opacity, icon, _managed, }: ActionButtonProps): JSX.Element;
 //# sourceMappingURL=ActionButton.d.ts.map

package/dist/controls/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/controls/ActionButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKlC,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,MAAiB,EACjB,IAAe,EACf,OAAa,EACb,QAAgB,GACjB,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA8GjC"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/controls/ActionButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKlC,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,iDAAiD;AACjD,MAAM,MAAM,oBAAoB,GAC5B,CAAC,CAAC,KAAK,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;AAErG,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,MAAiB,EACjB,IAAe,EACf,OAAa,EACb,IAAI,EACJ,QAAgB,GACjB,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAqHjC"}

package/dist/controls/ActionButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 // ---------------------------------------------------------------------------
 //  @joydle/ui — Single action button (touch)
 // ---------------------------------------------------------------------------
@@ -26,7 +26,7 @@ function injectStyle() {
     document.head.appendChild(el);
 }
 // ---- Component ------------------------------------------------------------
-export function ActionButton({ position, label, action = 'action', size = 'medium', opacity = 0.6, _managed = false, }) {
+export function ActionButton({ position, label, action = 'action', size = 'medium', opacity = 0.6, icon, _managed = false, }) {
     const ctx = useContext(GameContext);
     const inputManager = ctx?.inputManager ?? null;
     const pressedRef = useRef(false);
@@ -103,6 +103,6 @@ export function ActionButton({ position, label, action = 'action', size = 'mediu
     else {
         baseStyle.opacity = opacity;
     }
-    return (_jsx("div", { class: _managed ? undefined : 'joydle-action-btn', style: baseStyle, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, children: label }));
+    return (_jsx("div", { class: _managed ? undefined : 'joydle-action-btn', style: baseStyle, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, children: icon ? (_jsxs("span", { style: { lineHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }, children: [icon({ size: Math.round(px * 0.4), color: 'white', strokeWidth: 2 }), label && _jsx("span", { style: { fontSize: Math.round(px * 0.18), lineHeight: 1 }, children: label })] })) : (label) }));
 }
 //# sourceMappingURL=ActionButton.js.map

package/dist/controls/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/controls/ActionButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/controls/ActionButton.tsx"],"names":[],"mappings":"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"}

package/dist/controls/index.d.ts

@@ -1,6 +1,6 @@
 export { TouchDPad, type TouchDPadProps } from './TouchDPad.js';
 export { Joystick, type JoystickProps } from './Joystick.js';
-export { ActionButton, type ActionButtonProps, type ActionButtonSize, } from './ActionButton.js';
+export { ActionButton, type ActionButtonProps, type ActionButtonSize, type ActionButtonIconProp, } from './ActionButton.js';
 export { ActionButtonGroup, type ActionButtonGroupProps, type ActionButtonConfig, } from './ActionButtonGroup.js';
 export { SwipeZone, type SwipeZoneProps, type SwipeDirection, } from './SwipeZone.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,GACxB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,cAAc,GACpB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,GACxB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,cAAc,GACpB,MAAM,gBAAgB,CAAC"}

package/dist/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,uCAAuC;AACvC,8EAA8E;AAE9E,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC;AAC7D,OAAO,EACL,YAAY,GAGb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,iBAAiB,GAGlB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,uCAAuC;AACvC,8EAA8E;AAE9E,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC;AAC7D,OAAO,EACL,YAAY,GAIb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,iBAAiB,GAGlB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,SAAS,GAGV,MAAM,gBAAgB,CAAC"}

package/dist/deps.d.ts

@@ -0,0 +1,11 @@
+type GsapCore = typeof import('gsap').default;
+/**
+ * Provide peer dependencies for @joydle/ui.
+ * Call once at app startup before rendering any UI components.
+ */
+export declare function configure(deps: {
+    gsap?: GsapCore;
+}): void;
+export declare function getGsap(): GsapCore;
+export {};
+//# sourceMappingURL=deps.d.ts.map

package/dist/deps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deps.d.ts","sourceRoot":"","sources":["../src/deps.ts"],"names":[],"mappings":"AAIA,KAAK,QAAQ,GAAG,cAAc,MAAM,EAAE,OAAO,CAAC;AAI9C;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CAEzD;AAED,wBAAgB,OAAO,IAAI,QAAQ,CAOlC"}

package/dist/deps.js

@@ -0,0 +1,19 @@
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Centralized dependency injection
+// ---------------------------------------------------------------------------
+let _gsap = null;
+/**
+ * Provide peer dependencies for @joydle/ui.
+ * Call once at app startup before rendering any UI components.
+ */
+export function configure(deps) {
+    if (deps.gsap)
+        _gsap = deps.gsap;
+}
+export function getGsap() {
+    if (!_gsap) {
+        throw new Error('[@joydle/ui] gsap not configured. Call configure({ gsap }) first.');
+    }
+    return _gsap;
+}
+//# sourceMappingURL=deps.js.map

package/dist/deps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deps.js","sourceRoot":"","sources":["../src/deps.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,iDAAiD;AACjD,8EAA8E;AAI9E,IAAI,KAAK,GAAoB,IAAI,CAAC;AAElC;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,IAAyB;IACjD,IAAI,IAAI,CAAC,IAAI;QAAE,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;AACnC,CAAC;AAED,MAAM,UAAU,OAAO;IACrB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CACb,mEAAmE,CACpE,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/fx/effects.d.ts

@@ -0,0 +1,163 @@
+import type { JSX } from 'preact';
+import type { AlertState, BannerState, KillState, BeamState } from './hooks.js';
+export interface DamageFlashProps {
+    /** Trigger a flash on every truthy change. */
+    active: boolean;
+    /** Flash color. Default: `var(--joydle-danger, #ff0033)`. */
+    color?: string;
+    /** Flash duration in ms. Default: 250. */
+    duration?: number;
+    /** Peak opacity (0–1). Default: 0.7. */
+    intensity?: number;
+}
+/**
+ * Full-screen color flash — ideal for taking damage, screen hit, health critical.
+ *
+ * ```tsx
+ * <DamageFlash active={playerHit} color="#ff0033" duration={250} />
+ * ```
+ */
+export declare function DamageFlash({ active, color, duration, intensity, }: DamageFlashProps): JSX.Element;
+export interface VignetteProps {
+    /** Current health value (0–maxHp). */
+    hp: number;
+    /** Maximum health value. Default: 100. */
+    maxHp?: number;
+    /** HP threshold below which vignette appears (0–1 fraction). Default: 0.3. */
+    threshold?: number;
+    /** Vignette color. Default: `var(--joydle-danger, #ff0033)`. */
+    color?: string;
+    /** Pulse the vignette opacity when active. Default: true. */
+    pulse?: boolean;
+}
+/**
+ * Health-state edge vignette — darkens/tints screen edges as HP drops.
+ *
+ * ```tsx
+ * <Vignette hp={hp} maxHp={100} threshold={0.3} color="#ff0000" />
+ * ```
+ */
+export declare function Vignette({ hp, maxHp, threshold, color, pulse, }: VignetteProps): JSX.Element;
+export interface CRTOverlayProps {
+    /** Scanline opacity multiplier. Default: 0.06. */
+    opacity?: number;
+    /** Vignette strength (0–1). Default: 0.35. */
+    vignetteStrength?: number;
+}
+/**
+ * CRT monitor effect — scanlines + edge vignette.
+ * Place above the canvas layer for an authentic retro look.
+ *
+ * ```tsx
+ * <CRTOverlay opacity={0.06} vignetteStrength={0.35} />
+ * ```
+ */
+export declare function CRTOverlay({ opacity, vignetteStrength, }: CRTOverlayProps): JSX.Element;
+export interface AlertBannerProps {
+    /** Alert state from useAlerts(). */
+    alert: AlertState | null;
+    /** Vertical position (CSS value). Default: `'32%'`. */
+    position?: string;
+    /** Main text font size in px. Default: 42. */
+    fontSize?: number;
+    /** Main text color. Default: `var(--joydle-danger, #ff0033)`. */
+    color?: string;
+}
+/**
+ * Cinematic alert banner — large text reveal with auto-dismiss.
+ *
+ * ```tsx
+ * const { alert, showAlert } = useAlerts();
+ * <AlertBanner alert={alert} color="#ff0033" />
+ * ```
+ */
+export declare function AlertBanner({ alert, position, fontSize, color, }: AlertBannerProps): JSX.Element;
+export interface WaveBannerProps {
+    /** Banner state from useWaveBanner(). */
+    banner: BannerState | null;
+    /** Title color. Default: `var(--joydle-danger, #ff0033)`. */
+    color?: string;
+    /** Sub-label text after count. Default: `'ENEMIES INCOMING'`. */
+    countLabel?: string;
+}
+/**
+ * Full-screen wave announcement overlay.
+ *
+ * ```tsx
+ * const { banner, showWave } = useWaveBanner();
+ * showWave(3, 8);
+ * <WaveBanner banner={banner} />
+ * ```
+ */
+export declare function WaveBanner({ banner, color, countLabel, }: WaveBannerProps): JSX.Element;
+export interface MuzzleFlashProps {
+    /** Trigger a flash on every truthy change. */
+    active: boolean;
+    /** Flash color. Default: `var(--joydle-accent, #ff6a00)`. */
+    color?: string;
+    /** Bottom offset (CSS value). Default: `'18%'`. */
+    position?: string;
+    /** Size in px. Default: 80. */
+    size?: number;
+}
+/**
+ * Muzzle / weapon flash overlay at screen bottom-center.
+ *
+ * ```tsx
+ * <MuzzleFlash active={firing} color="#ff6a00" />
+ * ```
+ */
+export declare function MuzzleFlash({ active, color, position, size, }: MuzzleFlashProps): JSX.Element;
+export interface KillConfirmProps {
+    /** Kill states from useKillConfirm(). */
+    kills: KillState[];
+    /** Icon/symbol to display. Default: `'×'`. */
+    icon?: string;
+    /** Marker color. Default: `var(--joydle-accent, #ff6a00)`. */
+    color?: string;
+}
+/**
+ * Animated kill confirmation markers that appear at random screen positions.
+ *
+ * ```tsx
+ * const { kills, addKill } = useKillConfirm();
+ * <KillConfirm kills={kills} icon="×" />
+ * ```
+ */
+export declare function KillConfirm({ kills, icon, color, }: KillConfirmProps): JSX.Element;
+export interface WarningStripesProps {
+    /** Show the stripes. */
+    active: boolean;
+    /** Stripe color. Default: `var(--joydle-gold, #ffd600)`. */
+    color?: string;
+    /** Stripe height in px. Default: 3. */
+    height?: number;
+}
+/**
+ * Animated hazard-stripe bars at screen top and bottom.
+ * Great for wave start, danger zones, time pressure.
+ *
+ * ```tsx
+ * <WarningStripes active={wavePending} color="#ffd600" />
+ * ```
+ */
+export declare function WarningStripes({ active, color, height, }: WarningStripesProps): JSX.Element;
+export interface ScreenBeamProps {
+    /** Beam states from useBeamEffect(). */
+    beams: BeamState[];
+    /** Beam color. Default: `var(--joydle-danger, #ff0033)`. */
+    color?: string;
+    /** Beam height in px. Default: 4. */
+    height?: number;
+}
+/**
+ * Horizontal beam / energy ray flashes across the screen.
+ * Use for enemy attacks, explosions, special effects.
+ *
+ * ```tsx
+ * const { beams, addBeam } = useBeamEffect();
+ * <ScreenBeam beams={beams} color="#ff0033" />
+ * ```
+ */
+export declare function ScreenBeam({ beams, color, height, }: ScreenBeamProps): JSX.Element;
+//# sourceMappingURL=effects.d.ts.map

package/dist/fx/effects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.d.ts","sourceRoot":"","sources":["../../src/fx/effects.tsx"],"names":[],"mappings":"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"}

package/dist/fx/effects.js

@@ -0,0 +1,337 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui/fx — Composable screen effects
+//  All effects default to theme CSS vars but accept overrides for full variety.
+// ---------------------------------------------------------------------------
+import { useState, useEffect } from 'preact/hooks';
+// ---- CSS injection (shared keyframes) -------------------------------------
+const FX_CSS = `
+@keyframes joydle-damage-flash {
+  0% { opacity: var(--joydle-fx-intensity, 0.7); }
+  100% { opacity: 0; }
+}
+@keyframes joydle-vignette-pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 0.3; }
+}
+@keyframes joydle-muzzle-flash {
+  0% { opacity: 1; transform: translateX(-50%) scale(0.5); }
+  100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
+}
+@keyframes joydle-alert-reveal {
+  0% { opacity: 0; letter-spacing: 30px; }
+  15% { opacity: 1; letter-spacing: 12px; }
+  75% { opacity: 1; }
+  100% { opacity: 0; transform: translateX(-50%) translateY(-15px); }
+}
+@keyframes joydle-wave-banner {
+  0% { opacity: 0; }
+  8% { opacity: 1; }
+  65% { opacity: 1; }
+  100% { opacity: 0; }
+}
+@keyframes joydle-kill-cross {
+  0% { transform: scale(0.2); opacity: 1; }
+  30% { transform: scale(1.6); opacity: 0.8; }
+  100% { transform: scale(3); opacity: 0; }
+}
+@keyframes joydle-warning-scroll {
+  from { background-position: 0; }
+  to { background-position: 16px; }
+}
+@keyframes joydle-beam-flash {
+  0% { opacity: 0; transform: scaleX(0); }
+  10% { opacity: 1; transform: scaleX(1); }
+  70% { opacity: 1; }
+  100% { opacity: 0; }
+}
+`;
+let fxStyleInjected = false;
+function injectFxStyle() {
+    if (fxStyleInjected)
+        return;
+    fxStyleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = FX_CSS;
+    document.head.appendChild(el);
+}
+/**
+ * Full-screen color flash — ideal for taking damage, screen hit, health critical.
+ *
+ * ```tsx
+ * <DamageFlash active={playerHit} color="#ff0033" duration={250} />
+ * ```
+ */
+export function DamageFlash({ active, color = 'var(--joydle-danger, #ff0033)', duration = 250, intensity = 0.7, }) {
+    injectFxStyle();
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        if (!active)
+            return;
+        setShow(true);
+        const t = setTimeout(() => setShow(false), duration);
+        return () => clearTimeout(t);
+    }, [active, duration]);
+    if (!show)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 45,
+            pointerEvents: 'none',
+            background: `radial-gradient(ellipse, transparent 20%, ${color} 100%)`,
+            opacity: intensity,
+            animation: `joydle-damage-flash ${duration / 1000}s ease-out forwards`,
+        } }));
+}
+/**
+ * Health-state edge vignette — darkens/tints screen edges as HP drops.
+ *
+ * ```tsx
+ * <Vignette hp={hp} maxHp={100} threshold={0.3} color="#ff0000" />
+ * ```
+ */
+export function Vignette({ hp, maxHp = 100, threshold = 0.3, color = 'var(--joydle-danger, #ff0033)', pulse = true, }) {
+    injectFxStyle();
+    const pct = hp / maxHp;
+    if (pct >= threshold)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 44,
+            pointerEvents: 'none',
+            background: `radial-gradient(ellipse, transparent 40%, ${color}40 100%)`,
+            animation: pulse ? 'joydle-vignette-pulse 1.5s infinite' : 'none',
+            transition: 'opacity 0.5s',
+        } }));
+}
+/**
+ * CRT monitor effect — scanlines + edge vignette.
+ * Place above the canvas layer for an authentic retro look.
+ *
+ * ```tsx
+ * <CRTOverlay opacity={0.06} vignetteStrength={0.35} />
+ * ```
+ */
+export function CRTOverlay({ opacity = 0.06, vignetteStrength = 0.35, }) {
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            zIndex: 100,
+            pointerEvents: 'none',
+            background: `repeating-linear-gradient(0deg, rgba(0,0,0,${opacity}) 0px, rgba(0,0,0,${opacity}) 1px, transparent 1px, transparent 3px)`,
+            mixBlendMode: 'multiply',
+        }, children: _jsx("div", { style: {
+                position: 'absolute',
+                inset: 0,
+                background: `radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,${vignetteStrength}) 100%)`,
+            } }) }));
+}
+/**
+ * Cinematic alert banner — large text reveal with auto-dismiss.
+ *
+ * ```tsx
+ * const { alert, showAlert } = useAlerts();
+ * <AlertBanner alert={alert} color="#ff0033" />
+ * ```
+ */
+export function AlertBanner({ alert, position = '32%', fontSize = 42, color = 'var(--joydle-danger, #ff0033)', }) {
+    injectFxStyle();
+    if (!alert)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { style: {
+            position: 'fixed',
+            top: position,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 55,
+            textAlign: 'center',
+            pointerEvents: 'none',
+            animation: 'joydle-alert-reveal 1.8s ease-out forwards',
+        }, children: [_jsx("div", { style: {
+                    fontFamily: 'var(--joydle-font, sans-serif)',
+                    fontSize,
+                    fontWeight: 900,
+                    color,
+                    letterSpacing: 12,
+                    textShadow: `0 0 35px ${color}`,
+                }, children: alert.main }), alert.sub && (_jsx("div", { style: {
+                    fontFamily: 'var(--joydle-font, sans-serif)',
+                    fontSize: fontSize * 0.3,
+                    color: 'var(--joydle-accent, #ff6a00)',
+                    letterSpacing: 8,
+                    marginTop: 6,
+                    opacity: 0.7,
+                }, children: alert.sub })), alert.jp && (_jsx("div", { style: {
+                    fontSize: fontSize * 0.38,
+                    color: 'rgba(255,255,255,0.18)',
+                    marginTop: 10,
+                    letterSpacing: 6,
+                }, children: alert.jp }))] }, alert.id));
+}
+/**
+ * Full-screen wave announcement overlay.
+ *
+ * ```tsx
+ * const { banner, showWave } = useWaveBanner();
+ * showWave(3, 8);
+ * <WaveBanner banner={banner} />
+ * ```
+ */
+export function WaveBanner({ banner, color = 'var(--joydle-danger, #ff0033)', countLabel = 'ENEMIES INCOMING', }) {
+    injectFxStyle();
+    if (!banner)
+        return _jsx(_Fragment, {});
+    return (_jsxs("div", { style: {
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%,-50%)',
+            zIndex: 70,
+            textAlign: 'center',
+            pointerEvents: 'none',
+            animation: 'joydle-wave-banner 2.8s ease-out forwards',
+        }, children: [_jsxs("div", { style: {
+                    fontFamily: 'var(--joydle-font, sans-serif)',
+                    fontSize: 64,
+                    fontWeight: 900,
+                    color,
+                    textShadow: `0 0 50px ${color}`,
+                    letterSpacing: 14,
+                }, children: ["WAVE ", banner.wave] }), banner.count != null && (_jsxs("div", { style: {
+                    fontSize: 13,
+                    color: 'var(--joydle-accent, #ff6a00)',
+                    letterSpacing: 8,
+                }, children: [banner.count, " ", countLabel] }))] }, banner.id));
+}
+/**
+ * Muzzle / weapon flash overlay at screen bottom-center.
+ *
+ * ```tsx
+ * <MuzzleFlash active={firing} color="#ff6a00" />
+ * ```
+ */
+export function MuzzleFlash({ active, color = 'var(--joydle-accent, #ff6a00)', position = '18%', size = 80, }) {
+    injectFxStyle();
+    const [show, setShow] = useState(false);
+    useEffect(() => {
+        if (!active)
+            return;
+        setShow(true);
+        const t = setTimeout(() => setShow(false), 70);
+        return () => clearTimeout(t);
+    }, [active]);
+    if (!show)
+        return _jsx(_Fragment, {});
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            bottom: position,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: size,
+            height: size,
+            zIndex: 42,
+            pointerEvents: 'none',
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${color}e5, ${color}4d, transparent)`,
+            animation: `joydle-muzzle-flash 0.07s ease-out`,
+        } }));
+}
+/**
+ * Animated kill confirmation markers that appear at random screen positions.
+ *
+ * ```tsx
+ * const { kills, addKill } = useKillConfirm();
+ * <KillConfirm kills={kills} icon="×" />
+ * ```
+ */
+export function KillConfirm({ kills, icon = '×', color = 'var(--joydle-accent, #ff6a00)', }) {
+    injectFxStyle();
+    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 55, pointerEvents: 'none' }, children: kills.map(k => (_jsxs("div", { style: {
+                position: 'fixed',
+                left: `${k.x}%`,
+                top: `${k.y}%`,
+                animation: 'joydle-kill-cross 1.2s ease-out forwards',
+            }, children: [_jsx("div", { style: {
+                        position: 'absolute',
+                        width: 5,
+                        height: 100,
+                        left: '50%',
+                        top: -50,
+                        transform: 'translateX(-50%)',
+                        background: `linear-gradient(to bottom, ${color}, transparent)`,
+                        opacity: 0.85,
+                    } }), _jsx("div", { style: {
+                        position: 'absolute',
+                        width: 70,
+                        height: 3,
+                        top: 0,
+                        left: -35,
+                        background: color,
+                        opacity: 0.85,
+                    } }), _jsx("div", { style: {
+                        position: 'absolute',
+                        left: '50%',
+                        top: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        fontSize: 20,
+                        fontWeight: 900,
+                        color,
+                        fontFamily: 'var(--joydle-font, sans-serif)',
+                    }, children: icon })] }, k.id))) }));
+}
+/**
+ * Animated hazard-stripe bars at screen top and bottom.
+ * Great for wave start, danger zones, time pressure.
+ *
+ * ```tsx
+ * <WarningStripes active={wavePending} color="#ffd600" />
+ * ```
+ */
+export function WarningStripes({ active, color = 'var(--joydle-gold, #ffd600)', height = 3, }) {
+    injectFxStyle();
+    const stripeStyle = {
+        left: 0,
+        right: 0,
+        height,
+        opacity: active ? 0.7 : 0,
+        transition: 'opacity 0.2s',
+        zIndex: 45,
+        pointerEvents: 'none',
+        background: `repeating-linear-gradient(90deg, ${color} 0px, ${color} 8px, transparent 8px, transparent 16px)`,
+        animation: active ? 'joydle-warning-scroll 0.4s linear infinite' : 'none',
+        position: 'fixed',
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { ...stripeStyle, top: 48 } }), _jsx("div", { style: { ...stripeStyle, bottom: 160 } })] }));
+}
+/**
+ * Horizontal beam / energy ray flashes across the screen.
+ * Use for enemy attacks, explosions, special effects.
+ *
+ * ```tsx
+ * const { beams, addBeam } = useBeamEffect();
+ * <ScreenBeam beams={beams} color="#ff0033" />
+ * ```
+ */
+export function ScreenBeam({ beams, color = 'var(--joydle-danger, #ff0033)', height = 4, }) {
+    injectFxStyle();
+    return (_jsx("div", { style: { position: 'fixed', inset: 0, zIndex: 43, pointerEvents: 'none' }, children: beams.map(b => (_jsx("div", { style: {
+                position: 'absolute',
+                top: `${b.top}%`,
+                left: 0,
+                right: 0,
+                animation: 'joydle-beam-flash 0.6s ease-out forwards',
+            }, children: _jsx("div", { style: {
+                    height,
+                    width: b.width,
+                    margin: '0 auto',
+                    background: `linear-gradient(90deg, transparent, ${color}, rgba(255,0,51,0.8), ${color}, transparent)`,
+                    boxShadow: `0 0 15px ${color}, 0 0 30px ${color}4d`,
+                    borderRadius: 2,
+                } }) }, b.id))) }));
+}
+//# sourceMappingURL=effects.js.map

package/dist/fx/effects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.js","sourceRoot":"","sources":["../../src/fx/effects.tsx"],"names":[],"mappings":"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"}