@wallarm-org/design-system 0.55.0 → 0.55.1

package/dist/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -1,32 +1,3 @@
-import type { CanvasHTMLAttributes, FC, Ref } from 'react';
-import type { Texture } from './types';
-export interface AnimatedBackgroundProps extends Omit<CanvasHTMLAttributes<HTMLCanvasElement>, 'children'> {
-    ref?: Ref<HTMLCanvasElement>;
-    /** Variant A (`clean`) vs Variant B (`halftone`). */
-    texture?: Texture;
-    /** Grid cell size in px. */
-    spacing?: number;
-    /** Seconds for one L->R sweep pass. */
-    sweepPeriod?: number;
-    /** How far from the scan line (px) dots react. */
-    bloomRadius?: number;
-    /** Minimum seconds between orange events. Higher = rarer. */
-    anomalyInterval?: number;
-    /** Global opacity/strength multiplier (0-1). */
-    intensity?: number;
-    /** Peak alpha of fully-bloomed (emphasized) dots, before intensity. */
-    bloomAlpha?: number;
-    /** Halftone only: cap on a bloomed pixel's full edge length (px). */
-    maxDotSize?: number;
-    /** Sweep-line tilt in degrees (0 = vertical; positive leans the top right). */
-    tilt?: number;
-    /** CSS custom-property name for the dot color. */
-    dotColorVar?: string;
-    /** CSS custom-property name for the "caught" accent. */
-    accentColorVar?: string;
-    /** CSS custom-property name for the base fill. */
-    baseColorVar?: string;
-    /** Force a single static frame (also auto-true under reduced motion). */
-    paused?: boolean;
-}
+import type { FC } from 'react';
+import type { AnimatedBackgroundProps } from './module';
 export declare const AnimatedBackground: FC<AnimatedBackgroundProps>;

package/dist/components/AnimatedBackground/AnimatedBackground.js

@@ -1,30 +1,50 @@
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/cn.js";
-import { animatedBackgroundVariants } from "./classes.js";
-import { createSweepEngine } from "./engine.js";
-import { resolveOptions } from "./lib.js";
+import { GameHud } from "./GameHud.js";
+import { createSweepEngine, resolveOptions, useGameKeyboard } from "./module/index.js";
+const GATE_TARGET = 5;
 const AnimatedBackground = (props)=>{
-    const { ref, texture, paused, className, ...rest } = props;
+    const { ref, texture, paused, game = false, excludeCardSize, className, ...rest } = props;
     const internalRef = useRef(null);
     const engineRef = useRef(null);
+    const reducedMotionRef = useRef(null);
     const options = resolveOptions(props);
     const optionsRef = useRef(options);
     const pausedRef = useRef(paused);
+    const gameRef = useRef(game);
     useEffect(()=>{
         optionsRef.current = options;
         pausedRef.current = paused;
+        gameRef.current = game;
+    }, []);
+    const [stats, setStats] = useState({
+        kills: 0,
+        stopped: 0,
+        escaped: 0,
+        spawned: 0,
+        done: false
     });
-    const signature = JSON.stringify({
-        ...options,
-        paused: !!paused
-    });
+    const [catchKey, setCatchKey] = useState(0);
+    const isHalftone = (texture ?? 'halftone') === 'halftone';
+    const gameActive = game && isHalftone;
+    const caught = stats.kills;
+    const armed = game && caught >= GATE_TARGET;
+    const roundOver = armed && stats.done;
+    const faced = stats.stopped + stats.escaped;
+    const accuracy = faced > 0 ? Math.round(stats.stopped / faced * 100) : 100;
+    const hasStartedRoundRef = useRef(false);
     useEffect(()=>{
         const canvas = internalRef.current;
         if (!canvas) return;
         const engine = createSweepEngine(canvas, optionsRef.current);
         engineRef.current = engine;
+        engine.onStats((s)=>{
+            setStats(s);
+            if (gameRef.current && !s.done) setCatchKey((prev)=>prev + 1);
+        });
         const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+        reducedMotionRef.current = reduced;
         const apply = ()=>{
             if (reduced.matches || pausedRef.current) {
                 engine.stop();
@@ -49,6 +69,7 @@ const AnimatedBackground = (props)=>{
         });
         return ()=>{
             reduced.removeEventListener('change', apply);
+            reducedMotionRef.current = null;
             ro.disconnect();
             themeObserver.disconnect();
             cancelAnimationFrame(frame);
@@ -56,30 +77,86 @@ const AnimatedBackground = (props)=>{
             engineRef.current = null;
         };
     }, []);
+    const syncKey = `${JSON.stringify(options)}|${paused}`;
     useEffect(()=>{
         const engine = engineRef.current;
         if (!engine) return;
         engine.setOptions(optionsRef.current);
-        const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
-        if (reduced.matches || pausedRef.current) {
+        const reduced = reducedMotionRef.current;
+        if (reduced?.matches || pausedRef.current) {
             engine.stop();
             engine.renderStatic();
         } else engine.start();
     }, [
-        signature
+        syncKey
+    ]);
+    useEffect(()=>{
+        engineRef.current?.setGameActive(game && isHalftone);
+    }, [
+        game,
+        isHalftone
+    ]);
+    const exW = excludeCardSize?.width;
+    const exH = excludeCardSize?.height;
+    useEffect(()=>{
+        engineRef.current?.setExclusion(null != exW && null != exH ? {
+            width: exW,
+            height: exH
+        } : null);
+    }, [
+        exW,
+        exH
     ]);
-    return /*#__PURE__*/ jsx("canvas", {
-        ...rest,
-        ref: (node)=>{
-            internalRef.current = node;
-            if ('function' == typeof ref) ref(node);
-            else if (ref) ref.current = node;
-        },
-        "data-slot": "login-background",
-        "aria-hidden": "true",
-        className: cn(animatedBackgroundVariants({
-            texture
-        }), className)
+    useEffect(()=>{
+        if (!game || !armed) return;
+        if (hasStartedRoundRef.current) return void engineRef.current?.setMode('armed');
+        hasStartedRoundRef.current = true;
+        engineRef.current?.startRound();
+    }, [
+        game,
+        armed
+    ]);
+    useGameKeyboard(engineRef, game, armed, roundOver, hasStartedRoundRef);
+    const onPointerDown = useCallback((e)=>{
+        if (!game) return;
+        const canvas = internalRef.current;
+        if (!canvas) return;
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        engineRef.current?.catchAt(x, y);
+    }, [
+        game
+    ]);
+    const handleTryAgain = useCallback(()=>{
+        engineRef.current?.startRound();
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("canvas", {
+                ...rest,
+                ref: (node)=>{
+                    internalRef.current = node;
+                    if ('function' == typeof ref) ref(node);
+                    else if (ref) ref.current = node;
+                },
+                "data-slot": "animated-background",
+                "aria-hidden": "true",
+                className: cn('h-full w-full pointer-events-none', gameActive && 'pointer-events-auto', className),
+                onPointerDown: gameActive ? onPointerDown : void 0
+            }),
+            gameActive && /*#__PURE__*/ jsx(GameHud, {
+                caught: caught,
+                armed: armed,
+                roundOver: roundOver,
+                stats: stats,
+                accuracy: accuracy,
+                faced: faced,
+                catchKey: catchKey,
+                gateTarget: GATE_TARGET,
+                onTryAgain: handleTryAgain
+            })
+        ]
     });
 };
 AnimatedBackground.displayName = 'AnimatedBackground';

package/dist/components/AnimatedBackground/GameHud.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import type { GameStats } from './module';
+interface GameHudProps {
+    caught: number;
+    armed: boolean;
+    roundOver: boolean;
+    stats: GameStats;
+    accuracy: number;
+    faced: number;
+    catchKey: number;
+    gateTarget: number;
+    onTryAgain: () => void;
+}
+export declare const GameHud: FC<GameHudProps>;
+export {};

package/dist/components/AnimatedBackground/GameHud.js

@@ -0,0 +1,141 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const dotColor = 'var(--animated-bg-dot)';
+const caughtColor = 'var(--animated-bg-caught-dot)';
+const labelStyle = {
+    fontFeatureSettings: '"liga" 0',
+    color: dotColor
+};
+const GameHud = ({ caught, armed, roundOver, stats, accuracy, faced, catchKey, gateTarget, onTryAgain })=>{
+    const showCounter = caught > 0;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showCounter && /*#__PURE__*/ jsxs("div", {
+                className: "fixed top-24 right-24 flex flex-col items-end gap-6 font-mono pointer-events-none",
+                style: {
+                    animation: 'hud-in 0.3s ease-out'
+                },
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: cn('flex flex-col items-center justify-center border', armed ? 'h-113 w-119' : 'h-52 w-119'),
+                        style: {
+                            borderColor: dotColor,
+                            backgroundColor: `color-mix(in srgb, ${dotColor} 8%, transparent)`
+                        },
+                        children: armed ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col items-center gap-4",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("span", {
+                                            className: "text-base leading-xl font-bold",
+                                            style: {
+                                                fontFeatureSettings: '"tnum"',
+                                                color: caughtColor
+                                            },
+                                            children: [
+                                                stats.stopped,
+                                                /*#__PURE__*/ jsxs("span", {
+                                                    className: "opacity-45",
+                                                    children: [
+                                                        " / ",
+                                                        faced
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-xs leading-xs uppercase",
+                                            style: labelStyle,
+                                            children: "HIT"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "h-px w-full my-8",
+                                    style: {
+                                        backgroundColor: dotColor
+                                    }
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col items-center gap-4",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("span", {
+                                            className: "text-base leading-xl font-bold",
+                                            style: {
+                                                fontFeatureSettings: '"tnum"',
+                                                color: caughtColor
+                                            },
+                                            children: [
+                                                accuracy,
+                                                "%"
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-xs leading-xs uppercase",
+                                            style: labelStyle,
+                                            children: "SCORE"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : /*#__PURE__*/ jsxs("div", {
+                            className: "flex flex-col items-center gap-4",
+                            children: [
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: "text-base leading-xl font-bold",
+                                    style: {
+                                        fontFeatureSettings: '"tnum"',
+                                        animation: 'catch-pop 0.25s ease-out',
+                                        color: caughtColor
+                                    },
+                                    children: [
+                                        caught,
+                                        /*#__PURE__*/ jsxs("span", {
+                                            className: "opacity-45",
+                                            children: [
+                                                " / ",
+                                                gateTarget
+                                            ]
+                                        })
+                                    ]
+                                }, catchKey),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "text-xs leading-xs uppercase",
+                                    style: labelStyle,
+                                    children: "INSERT COIN"
+                                })
+                            ]
+                        })
+                    }),
+                    roundOver && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "pointer-events-auto text-2xs leading-sm font-mono uppercase underline underline-offset-4 hover:text-[var(--animated-bg-accent-dot)]",
+                        style: {
+                            color: dotColor
+                        },
+                        onClick: onTryAgain,
+                        children: "Try again"
+                    }),
+                    armed && !roundOver && /*#__PURE__*/ jsx("span", {
+                        className: "text-2xs leading-sm",
+                        style: {
+                            color: dotColor
+                        },
+                        children: '← → move · space fire · esc to exit'
+                    })
+                ]
+            }),
+            caught > 0 && !armed && /*#__PURE__*/ jsx("div", {
+                className: "fixed bottom-24 left-1/2 -translate-x-1/2 text-xs pointer-events-none",
+                style: {
+                    animation: 'hud-in 0.3s ease-out',
+                    color: dotColor
+                },
+                children: 'Click the red anomalies \u2014 catch 5 to arm the cannon, then \u2190 \u2192 move \u00B7 space fire'
+            })
+        ]
+    });
+};
+GameHud.displayName = 'GameHud';
+export { GameHud };

package/dist/components/AnimatedBackground/index.d.ts

@@ -1,3 +1,2 @@
-export { AnimatedBackground, type AnimatedBackgroundProps } from './AnimatedBackground';
-export { animatedBackgroundVariants } from './classes';
-export type { EngineOptions, Texture } from './types';
+export { AnimatedBackground } from './AnimatedBackground';
+export type { AnimatedBackgroundProps } from './module';

package/dist/components/AnimatedBackground/index.js

@@ -1,3 +1,2 @@
 import { AnimatedBackground } from "./AnimatedBackground.js";
-import { animatedBackgroundVariants } from "./classes.js";
-export { AnimatedBackground, animatedBackgroundVariants };
+export { AnimatedBackground };

package/dist/components/AnimatedBackground/module/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const NOISE_FREQ_X = 0.045;
+export declare const NOISE_FREQ_Y = 0.032;
+export declare const NOISE_FREQ_T = 0.9;
+export declare const AMB_SCALE = 0.11;
+export declare const HALFTONE_BLOOM_PEAK = 0.62;
+export declare const HALFTONE_BASE_ALPHA = 0.12;
+export declare const ANOMALY_ALPHA_BASE = 0.45;
+export declare const ANOMALY_VIS_THRESHOLD = 0.06;
+export declare const MIN_DOT_VALUE = 0.05;
+export declare const DOT_STEP_SCALE = 1.05;
+export declare const DOT_STEP_BASE = 0.5;
+export declare const CLEAN_BASE_ALPHA = 0.13;
+export declare const CLEAN_DOT_HALF_BLOOM = 1.5;
+export declare const CLEAN_DOT_HALF_BASE = 1;
+export declare const GLOW_LIFETIME = 3.2;
+export declare const GLOW_OUTER_ALPHA = 0.35;
+export declare const GLOW_OUTER_HALF = 5;
+export declare const GLOW_INNER_ALPHA = 0.95;
+export declare const GLOW_INNER_HALF = 2.4;
+export declare const SPAWN_PROBABILITY = 0.05;
+export declare const SWEEP_OFFSET_GUARD = 8;
+export declare const IDLE_MARGIN_X = 30;
+export declare const IDLE_MARGIN_Y = 16;
+export declare const LABEL_MIN_Y = 15;
+export declare const LABEL_OFFSET_Y = 26;
+export declare const LABEL_DRIFT = 8;
+export declare const LABEL_SHADOW_ALPHA = 0.3;
+export declare const LABEL_ALPHA_BOOST = 1.15;

package/dist/components/AnimatedBackground/module/constants.js

@@ -0,0 +1,29 @@
+const NOISE_FREQ_X = 0.045;
+const NOISE_FREQ_Y = 0.032;
+const NOISE_FREQ_T = 0.9;
+const AMB_SCALE = 0.11;
+const HALFTONE_BLOOM_PEAK = 0.62;
+const HALFTONE_BASE_ALPHA = 0.12;
+const ANOMALY_ALPHA_BASE = 0.45;
+const ANOMALY_VIS_THRESHOLD = 0.06;
+const MIN_DOT_VALUE = 0.05;
+const DOT_STEP_SCALE = 1.05;
+const DOT_STEP_BASE = 0.5;
+const CLEAN_BASE_ALPHA = 0.13;
+const CLEAN_DOT_HALF_BLOOM = 1.5;
+const CLEAN_DOT_HALF_BASE = 1;
+const GLOW_LIFETIME = 3.2;
+const GLOW_OUTER_ALPHA = 0.35;
+const GLOW_OUTER_HALF = 5;
+const GLOW_INNER_ALPHA = 0.95;
+const GLOW_INNER_HALF = 2.4;
+const SPAWN_PROBABILITY = 0.05;
+const SWEEP_OFFSET_GUARD = 8;
+const IDLE_MARGIN_X = 30;
+const IDLE_MARGIN_Y = 16;
+const LABEL_MIN_Y = 15;
+const LABEL_OFFSET_Y = 26;
+const LABEL_DRIFT = 8;
+const LABEL_SHADOW_ALPHA = 0.3;
+const LABEL_ALPHA_BOOST = 1.15;
+export { AMB_SCALE, ANOMALY_ALPHA_BASE, ANOMALY_VIS_THRESHOLD, CLEAN_BASE_ALPHA, CLEAN_DOT_HALF_BASE, CLEAN_DOT_HALF_BLOOM, DOT_STEP_BASE, DOT_STEP_SCALE, GLOW_INNER_ALPHA, GLOW_INNER_HALF, GLOW_LIFETIME, GLOW_OUTER_ALPHA, GLOW_OUTER_HALF, HALFTONE_BASE_ALPHA, HALFTONE_BLOOM_PEAK, IDLE_MARGIN_X, IDLE_MARGIN_Y, LABEL_ALPHA_BOOST, LABEL_DRIFT, LABEL_MIN_Y, LABEL_OFFSET_Y, LABEL_SHADOW_ALPHA, MIN_DOT_VALUE, NOISE_FREQ_T, NOISE_FREQ_X, NOISE_FREQ_Y, SPAWN_PROBABILITY, SWEEP_OFFSET_GUARD };

package/dist/components/AnimatedBackground/module/engine-colors.d.ts

@@ -0,0 +1,16 @@
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export declare const FALLBACK_DOT: RGB;
+export declare const FALLBACK_ACCENT: RGB;
+export declare const FALLBACK_CAUGHT: RGB;
+export declare const FALLBACK_BASE = "#f8fafc";
+/** Number of discrete alpha levels in pre-computed palettes. */
+export declare const ALPHA_STEPS = 16;
+/** Pre-compute RGBA strings for 0-ALPHA_STEPS so the hot loop never allocates. */
+export declare function buildPalette(rgb: RGB): string[];
+/** Map a 0-1 alpha to the nearest palette index. */
+export declare function alphaIdx(a: number): number;
+export declare function parseColor(value: string): RGB | null;

package/dist/components/AnimatedBackground/module/engine-colors.js

@@ -0,0 +1,49 @@
+const FALLBACK_DOT = {
+    r: 69,
+    g: 85,
+    b: 108
+};
+const FALLBACK_ACCENT = {
+    r: 251,
+    g: 44,
+    b: 54
+};
+const FALLBACK_CAUGHT = {
+    r: 0,
+    g: 201,
+    b: 80
+};
+const FALLBACK_BASE = '#f8fafc';
+const ALPHA_STEPS = 16;
+function buildPalette(rgb) {
+    const p = new Array(ALPHA_STEPS + 1);
+    for(let i = 0; i <= ALPHA_STEPS; i++)p[i] = `rgba(${rgb.r},${rgb.g},${rgb.b},${(i / ALPHA_STEPS).toFixed(3)})`;
+    return p;
+}
+function alphaIdx(a) {
+    return Math.min(ALPHA_STEPS, a * ALPHA_STEPS + 0.5 | 0);
+}
+function parseColor(value) {
+    const v = value.trim();
+    if (!v) return null;
+    if ('#' === v[0]) {
+        let hex = v.slice(1);
+        if (3 === hex.length) hex = hex.split('').map((c)=>c + c).join('');
+        if (6 !== hex.length) return null;
+        const n = parseInt(hex, 16);
+        if (Number.isNaN(n)) return null;
+        return {
+            r: n >> 16 & 255,
+            g: n >> 8 & 255,
+            b: 255 & n
+        };
+    }
+    const m = v.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (m?.[1] && m[2] && m[3]) return {
+        r: +m[1],
+        g: +m[2],
+        b: +m[3]
+    };
+    return null;
+}
+export { ALPHA_STEPS, FALLBACK_ACCENT, FALLBACK_BASE, FALLBACK_CAUGHT, FALLBACK_DOT, alphaIdx, buildPalette, parseColor };

package/dist/components/AnimatedBackground/module/engine-grid.d.ts

@@ -0,0 +1,6 @@
+export interface Dot {
+    x: number;
+    y: number;
+}
+export declare function buildGrid(w: number, h: number, sp: number): Dot[];
+export declare function sweepX(t: number, w: number, period: number): number;

package/dist/components/AnimatedBackground/module/engine-grid.js

@@ -0,0 +1,14 @@
+function buildGrid(w, h, sp) {
+    const cap = 20000;
+    const safeSp = Math.max(sp, Math.sqrt(w * h / cap));
+    const a = [];
+    for(let y = safeSp / 2; y < h; y += safeSp)for(let x = safeSp / 2; x < w; x += safeSp)a.push({
+        x,
+        y
+    });
+    return a;
+}
+function sweepX(t, w, period) {
+    return t % period / period * (w + 140) - 70;
+}
+export { buildGrid, sweepX };

package/dist/components/AnimatedBackground/module/engine.d.ts

@@ -0,0 +1,33 @@
+import type { EngineOptions, GameStats } from './types';
+/**
+ * Framework-agnostic "detection sweep" canvas engine.
+ * A scan line crosses a dot grid; dots react as it passes; rare accent events
+ * appear behind the sweep. Two textures share this engine, selected via `texture`.
+ *
+ * Performance notes:
+ * - All dots use `fillRect` (no `arc`/`beginPath` overhead).
+ * - Color strings are pre-computed in palettes — zero allocation in the hot loop.
+ * - No `shadowBlur` — glow is faked with layered rects.
+ * - Game sim folds into the existing frame() behind mode guards.
+ * - Bounded pools (MAX_TARGETS, MAX_BULLETS). No per-frame allocation.
+ */
+export interface SweepEngine {
+    start(): void;
+    stop(): void;
+    setOptions(next: Partial<EngineOptions>): void;
+    renderStatic(t?: number): void;
+    resize(): void;
+    setGameActive(active: boolean): void;
+    catchAt(x: number, y: number): boolean;
+    setMode(mode: 'idle' | 'armed'): void;
+    startRound(): void;
+    exitGame(): void;
+    setCannonDir(dir: number): void;
+    setFiring(on: boolean): void;
+    onStats(cb: (s: GameStats) => void): void;
+    setExclusion(box: {
+        width: number;
+        height: number;
+    } | null): void;
+}
+export declare function createSweepEngine(canvas: HTMLCanvasElement, options: EngineOptions): SweepEngine;