@wallarm-org/design-system 0.55.0 → 0.55.1

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

@@ -0,0 +1,77 @@
+import type { CanvasHTMLAttributes, Ref } from 'react';
+export type Texture = 'clean' | 'halftone';
+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;
+    /** CSS custom-property name for the "neutralised" (caught) color. */
+    caughtColorVar?: string;
+    /** Force a single static frame (also auto-true under reduced motion). */
+    paused?: boolean;
+    /** Enable the interactive shooter easter egg (halftone only). Default: false. */
+    game?: boolean;
+    /** Card dimensions for spawn-exclusion when game is enabled. */
+    excludeCardSize?: {
+        width: number;
+        height: number;
+    };
+}
+export interface EngineOptions {
+    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 accent events. */
+    anomalyInterval: number;
+    /** Global opacity multiplier (0–1). */
+    intensity: number;
+    /** Peak alpha of bloomed dots before `intensity`. */
+    bloomAlpha: number;
+    /** Halftone only: cap on a bloomed pixel's edge length (px). */
+    maxDotSize: number;
+    /** Sweep-line tilt in degrees (0 = vertical). */
+    tilt: number;
+    /** CSS custom-property names resolved at runtime. */
+    dotColorVar: string;
+    accentColorVar: string;
+    baseColorVar: string;
+    /** CSS custom-property name for the "caught" (neutralised) color. */
+    caughtColorVar: string;
+}
+export interface GameStats {
+    /** Lifetime catches — drives the arming gate (≥ 5); reset only by exitGame. */
+    kills: number;
+    /** Threats stopped THIS round (HIT numerator). */
+    stopped: number;
+    /** Threats that timed out unshot THIS round. */
+    escaped: number;
+    /** Attacks spawned this round (caps at ROUND_ATTACKS). */
+    spawned: number;
+    /** Round complete — full wave spawned AND field cleared. */
+    done: boolean;
+}

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

@@ -0,0 +1,3 @@
+import type { MutableRefObject, RefObject } from 'react';
+import type { SweepEngine } from './index';
+export declare const useGameKeyboard: (engineRef: RefObject<SweepEngine | null>, game: boolean, armed: boolean, roundOver: boolean, hasStartedRoundRef: MutableRefObject<boolean>) => void;

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

@@ -0,0 +1,73 @@
+import { useEffect } from "react";
+const useGameKeyboard = (engineRef, game, armed, roundOver, hasStartedRoundRef)=>{
+    useEffect(()=>{
+        if (!game || !armed || roundOver) return;
+        const held = {
+            left: false,
+            right: false
+        };
+        function updateDir() {
+            const dir = (held.right ? 1 : 0) - (held.left ? 1 : 0);
+            engineRef.current?.setCannonDir(dir);
+        }
+        function onKeyDown(e) {
+            if ('ArrowLeft' === e.key) {
+                e.preventDefault();
+                held.left = true;
+                updateDir();
+            } else if ('ArrowRight' === e.key) {
+                e.preventDefault();
+                held.right = true;
+                updateDir();
+            } else if (' ' === e.key || 'Spacebar' === e.key) {
+                e.preventDefault();
+                if (!e.repeat) engineRef.current?.setFiring(true);
+            } else if ('Escape' === e.key) {
+                e.preventDefault();
+                engineRef.current?.exitGame();
+                hasStartedRoundRef.current = false;
+            }
+        }
+        function onKeyUp(e) {
+            if ('ArrowLeft' === e.key) {
+                held.left = false;
+                updateDir();
+            } else if ('ArrowRight' === e.key) {
+                held.right = false;
+                updateDir();
+            } else if (' ' === e.key || 'Spacebar' === e.key) engineRef.current?.setFiring(false);
+        }
+        window.addEventListener('keydown', onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
+        return ()=>{
+            window.removeEventListener('keydown', onKeyDown);
+            window.removeEventListener('keyup', onKeyUp);
+            engineRef.current?.setFiring(false);
+            engineRef.current?.setCannonDir(0);
+        };
+    }, [
+        game,
+        armed,
+        roundOver,
+        engineRef,
+        hasStartedRoundRef
+    ]);
+    useEffect(()=>{
+        if (!game || !roundOver) return;
+        function onKeyDown(e) {
+            if ('Escape' === e.key) {
+                e.preventDefault();
+                engineRef.current?.exitGame();
+                hasStartedRoundRef.current = false;
+            }
+        }
+        window.addEventListener('keydown', onKeyDown);
+        return ()=>window.removeEventListener('keydown', onKeyDown);
+    }, [
+        game,
+        roundOver,
+        engineRef,
+        hasStartedRoundRef
+    ]);
+};
+export { useGameKeyboard };

package/dist/components/Flex/Flex.d.ts

@@ -7,7 +7,7 @@ declare const flexVariants: (props?: ({
     align?: "center" | "end" | "baseline" | "start" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "reverse" | "nowrap" | "wrap" | null | undefined;
-    gap?: 1 | 2 | 4 | 6 | 8 | 44 | 16 | 32 | 20 | 80 | 12 | 24 | 28 | 36 | 40 | 48 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts

@@ -2,7 +2,7 @@ import type { ComponentRef, FC, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator, type SeparatorProps } from '../Separator';
 declare const segmentedControlSeparatorVariants: (props?: ({
-    mx?: 1 | 2 | 4 | 6 | 8 | 44 | 16 | 32 | 20 | 80 | 12 | 24 | 28 | 36 | 40 | 48 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    mx?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
 /**

package/dist/components/Separator/Separator.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
-    spacing?: 1 | 2 | 4 | 6 | 8 | 44 | 16 | 32 | 20 | 80 | 12 | 24 | 28 | 36 | 40 | 48 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    spacing?: 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SeparatorProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof separatorVariants> & TestableProps & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const skeletonVariants: (props?: ({
     transparent?: boolean | null | undefined;
-    rounded?: 2 | 4 | 6 | "none" | 8 | 16 | 32 | "full" | 12 | 24 | null | undefined;
+    rounded?: 2 | 4 | 6 | "none" | 8 | 16 | 24 | 12 | "full" | 32 | null | undefined;
     withDimensions?: boolean | null | undefined;
     withChildren?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ declare const stackVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
     flexGrow?: boolean | null | undefined;
     flexShrink?: boolean | null | undefined;
-    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 44 | 16 | 32 | 20 | 80 | 12 | 24 | 28 | 36 | 40 | 48 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 16 | 44 | 80 | 24 | 40 | 48 | 12 | 20 | 32 | 28 | 36 | 56 | 64 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StackNativeProps = HTMLAttributes<HTMLDivElement>;
 type StackVariantProps = VariantProps<typeof stackVariants>;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.54.0",
-  "generatedAt": "2026-06-04T22:49:52.517Z",
+  "version": "0.55.0",
+  "generatedAt": "2026-06-08T15:41:56.689Z",
   "components": [
     {
       "name": "Accordion",
@@ -3406,12 +3406,31 @@
           "required": false,
           "description": "CSS custom-property name for the base fill."
         },
+        {
+          "name": "caughtColorVar",
+          "type": "string | undefined",
+          "required": false,
+          "description": "CSS custom-property name for the \"neutralised\" (caught) color."
+        },
         {
           "name": "paused",
           "type": "boolean | undefined",
           "required": false,
           "description": "Force a single static frame (also auto-true under reduced motion)."
         },
+        {
+          "name": "game",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Enable the interactive shooter easter egg (halftone only). Default: false.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "excludeCardSize",
+          "type": "{ width: number; height: number; } | undefined",
+          "required": false,
+          "description": "Card dimensions for spawn-exclusion when game is enabled."
+        },
         {
           "name": "height",
           "type": "string | number | undefined",
@@ -3693,16 +3712,7 @@
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         }
       ],
-      "variants": [
-        {
-          "name": "texture",
-          "options": [
-            "clean",
-            "halftone"
-          ],
-          "defaultValue": "halftone"
-        }
-      ],
+      "variants": [],
       "subComponents": [],
       "examples": [
         {
@@ -3711,7 +3721,7 @@
         },
         {
           "name": "WithCard",
-          "code": "() => (\n  <div className='relative h-screen w-screen'>\n    <AnimatedBackground />\n\n    <Card className='absolute top-1/2 left-1/2 -translate-1/2 w-[300px] h-max'>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className='text-sm text-text-secondary'>\n          Decorative background renders behind interactive content.\n        </p>\n      </CardContent>\n    </Card>\n  </div>\n)"
+          "code": "() => (\n  <div className='relative h-screen w-screen'>\n    <AnimatedBackground game />\n\n    <Card className='absolute top-1/2 left-1/2 -translate-1/2 w-[300px] h-max'>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className='text-sm text-text-secondary'>\n          Decorative background renders behind interactive content.\n        </p>\n      </CardContent>\n    </Card>\n  </div>\n)"
         }
       ]
     },

package/dist/theme/components/login-background.css

@@ -1,9 +1,45 @@
+@font-face {
+    font-family: 'Press Start 2P';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+        U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 :root {
     --animated-bg-dot: var(--color-slate-500);
     --animated-bg-accent-dot: var(--color-red-400);
+    --animated-bg-caught-dot: var(--color-green-500);
 }
 
 [data-theme="dark"] {
     --animated-bg-dot: var(--color-slate-500);
     --animated-bg-accent-dot: var(--color-red-400);
+    --animated-bg-caught-dot: var(--color-green-300);
+}
+
+@keyframes hud-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes catch-pop {
+    0% {
+        transform: scale(1);
+    }
+    40% {
+        transform: scale(1.25);
+    }
+    100% {
+        transform: scale(1);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.55.0",
+  "version": "0.55.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

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

@@ -1,3 +0,0 @@
-export declare const animatedBackgroundVariants: (props?: ({
-    texture?: "clean" | "halftone" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/AnimatedBackground/classes.js

@@ -1,13 +0,0 @@
-import { cva } from "class-variance-authority";
-const animatedBackgroundVariants = cva('h-full w-full pointer-events-none', {
-    variants: {
-        texture: {
-            clean: '',
-            halftone: ''
-        }
-    },
-    defaultVariants: {
-        texture: 'halftone'
-    }
-});
-export { animatedBackgroundVariants };

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

@@ -1,9 +0,0 @@
-import type { EngineOptions } from './types';
-export interface SweepEngine {
-    start(): void;
-    stop(): void;
-    setOptions(next: Partial<EngineOptions>): void;
-    renderStatic(t?: number): void;
-    resize(): void;
-}
-export declare function createSweepEngine(canvas: HTMLCanvasElement, options: EngineOptions): SweepEngine;

package/dist/components/AnimatedBackground/engine.js

@@ -1,217 +0,0 @@
-const FALLBACK_DOT = {
-    r: 69,
-    g: 85,
-    b: 108
-};
-const FALLBACK_ACCENT = {
-    r: 251,
-    g: 44,
-    b: 54
-};
-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;
-}
-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;
-}
-function createSweepEngine(canvas, options) {
-    const maybeCtx = canvas.getContext('2d');
-    if (!maybeCtx) throw new Error('2D canvas context unavailable');
-    const ctx = maybeCtx;
-    let opts = {
-        ...options
-    };
-    let w = 0;
-    let h = 0;
-    let dots = [];
-    let baseColor = FALLBACK_BASE;
-    let dotPalette = buildPalette(FALLBACK_DOT);
-    let accentPalette = buildPalette(FALLBACK_ACCENT);
-    let anomalyTime = -1 / 0;
-    let anomalyX = 0;
-    let anomalyY = 0;
-    const latched = [];
-    let lastLatch = -1 / 0;
-    let rafId = null;
-    let running = false;
-    function resolveColors() {
-        const cs = getComputedStyle(canvas);
-        const dot = parseColor(cs.getPropertyValue(opts.dotColorVar)) ?? FALLBACK_DOT;
-        const accent = parseColor(cs.getPropertyValue(opts.accentColorVar)) ?? FALLBACK_ACCENT;
-        baseColor = cs.getPropertyValue(opts.baseColorVar).trim() || FALLBACK_BASE;
-        dotPalette = buildPalette(dot);
-        accentPalette = buildPalette(accent);
-    }
-    function resize() {
-        const rect = canvas.getBoundingClientRect();
-        w = Math.max(1, Math.round(rect.width));
-        h = Math.max(1, Math.round(rect.height));
-        const dpr = Math.min(window.devicePixelRatio || 1, 2);
-        canvas.width = Math.round(w * dpr);
-        canvas.height = Math.round(h * dpr);
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        dots = buildGrid(w, h, opts.spacing);
-        resolveColors();
-        if (!running) renderStatic();
-    }
-    function drawClean(t) {
-        const sx = sweepX(t, w, opts.sweepPeriod);
-        const tanT = Math.tan(opts.tilt * Math.PI / 180);
-        const k = opts.intensity;
-        for (const d of dots){
-            const dist = Math.abs(d.x - (sx + (h / 2 - d.y) * tanT));
-            const inBloom = dist < opts.bloomRadius;
-            const a = inBloom ? (0.13 + (opts.bloomAlpha - 0.13) * (1 - dist / opts.bloomRadius)) * k : 0.13 * k;
-            const idx = alphaIdx(a);
-            if (0 === idx) continue;
-            ctx.fillStyle = dotPalette[idx];
-            const half = inBloom ? 1.5 : 1;
-            ctx.fillRect(d.x - half, d.y - half, 2 * half, 2 * half);
-        }
-        const sweepAt = (y)=>sx + (h / 2 - y) * tanT;
-        if (t - lastLatch > opts.anomalyInterval && Math.random() < 0.05 && dots.length) {
-            const cand = dots[Math.random() * dots.length | 0];
-            if (cand.x < sweepAt(cand.y) - 8) {
-                lastLatch = t;
-                latched.push({
-                    x: cand.x,
-                    y: cand.y,
-                    t0: t
-                });
-            }
-        }
-        let kept = 0;
-        for (const l of latched){
-            const age = t - l.t0;
-            if (age >= 3.2) continue;
-            latched[kept++] = l;
-            const fade = 1 - age / 3.2;
-            const glowIdx = alphaIdx(0.35 * fade);
-            if (glowIdx > 0) {
-                ctx.fillStyle = accentPalette[glowIdx];
-                ctx.fillRect(l.x - 5, l.y - 5, 10, 10);
-            }
-            ctx.fillStyle = accentPalette[alphaIdx(0.95 * fade)];
-            ctx.fillRect(l.x - 2.4, l.y - 2.4, 4.8, 4.8);
-        }
-        latched.length = kept;
-    }
-    function drawHalftone(t) {
-        const sx = sweepX(t, w, opts.sweepPeriod);
-        const tanT = Math.tan(opts.tilt * Math.PI / 180);
-        const k = opts.intensity;
-        const halfCap = opts.maxDotSize / 2;
-        if (t - anomalyTime > opts.anomalyInterval) {
-            anomalyTime = t;
-            anomalyX = 30 + Math.random() * Math.max(1, w - 60);
-            anomalyY = 16 + Math.random() * Math.max(1, h - 32);
-        }
-        const aEnv = Math.max(0, Math.sin((t - anomalyTime) / 2.4 * Math.PI));
-        for (const p of dots){
-            const sxAt = sx + (h / 2 - p.y) * tanT;
-            const amb = 0.11 * (0.5 + 0.5 * Math.sin(0.045 * p.x + 0.032 * p.y + 0.9 * t));
-            const d = Math.abs(p.x - sxAt);
-            const bloom = d < opts.bloomRadius ? 0.62 * (1 - d / opts.bloomRadius) : 0;
-            const ad = Math.hypot(p.x - anomalyX, p.y - anomalyY);
-            const ao = ad < 42 && p.x < sxAt ? aEnv * (1 - ad / 42) : 0;
-            const val = Math.min(1, Math.max(amb + bloom, ao));
-            if (val < 0.05) continue;
-            const step = Math.round(5 * val);
-            const half = Math.min(1.05 * step + 0.5, halfCap);
-            if (ao > 0.06) ctx.fillStyle = accentPalette[alphaIdx(Math.min(1, 0.45 + ao))];
-            else ctx.fillStyle = dotPalette[alphaIdx((0.12 + val * (opts.bloomAlpha - 0.12)) * k)];
-            ctx.fillRect(p.x - half, p.y - half, 2 * half, 2 * half);
-        }
-    }
-    function frame(t) {
-        ctx.fillStyle = baseColor;
-        ctx.fillRect(0, 0, w, h);
-        if ('halftone' === opts.texture) drawHalftone(t);
-        else drawClean(t);
-    }
-    function tick(ts) {
-        if (!running) return;
-        frame(ts / 1000);
-        rafId = requestAnimationFrame(tick);
-    }
-    function onVisibility() {
-        if (document.hidden) {
-            if (null !== rafId) cancelAnimationFrame(rafId);
-            rafId = null;
-        } else if (running && null === rafId) rafId = requestAnimationFrame(tick);
-    }
-    function start() {
-        if (running) return;
-        running = true;
-        document.addEventListener('visibilitychange', onVisibility);
-        if (!document.hidden) rafId = requestAnimationFrame(tick);
-    }
-    function stop() {
-        running = false;
-        if (null !== rafId) cancelAnimationFrame(rafId);
-        rafId = null;
-        document.removeEventListener('visibilitychange', onVisibility);
-    }
-    function renderStatic(t = 1.4) {
-        frame(t);
-    }
-    function setOptions(next) {
-        const spacingChanged = void 0 !== next.spacing && next.spacing !== opts.spacing;
-        opts = {
-            ...opts,
-            ...next
-        };
-        if (spacingChanged) dots = buildGrid(w, h, opts.spacing);
-        resolveColors();
-        if (!running) renderStatic();
-    }
-    resize();
-    return {
-        start,
-        stop,
-        setOptions,
-        renderStatic,
-        resize
-    };
-}
-export { createSweepEngine };

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

@@ -1,3 +0,0 @@
-import type { AnimatedBackgroundProps } from './AnimatedBackground';
-import type { EngineOptions } from './types';
-export declare const resolveOptions: (props: AnimatedBackgroundProps) => EngineOptions;

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

@@ -1,24 +0,0 @@
-export type Texture = 'clean' | 'halftone';
-export interface EngineOptions {
-    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 accent events. */
-    anomalyInterval: number;
-    /** Global opacity multiplier (0–1). */
-    intensity: number;
-    /** Peak alpha of bloomed dots before `intensity`. */
-    bloomAlpha: number;
-    /** Halftone only: cap on a bloomed pixel's edge length (px). */
-    maxDotSize: number;
-    /** Sweep-line tilt in degrees (0 = vertical). */
-    tilt: number;
-    /** CSS custom-property names resolved at runtime. */
-    dotColorVar: string;
-    accentColorVar: string;
-    baseColorVar: string;
-}