@backbay/glia 0.2.0-alpha.1

package/dist/primitives/atoms/HUDProgressRing/HUDProgressRing.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { animateFloat, animateNumber, cn, prefersReducedMotion } from "../../../lib/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useId, useMemo, useState } from "react";
+export function HUDProgressRing({ value, displayValue, size = 120, strokeWidth = 8, theme = "rainbow", showValue = true, suffix = "%", animationDuration = 1500, disableAnimations = false, label, className, ...props }) {
+    const [animatedValue, setAnimatedValue] = useState(0);
+    const [animatedDisplayValue, setAnimatedDisplayValue] = useState(0);
+    const reducedMotion = prefersReducedMotion();
+    const shouldAnimate = !disableAnimations && !reducedMotion;
+    const gradientId = useId();
+    const clampedValue = useMemo(() => Math.max(0, Math.min(1, value)), [value]);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDasharray = circumference;
+    const strokeDashoffset = circumference - animatedValue * circumference;
+    const finalDisplayValue = displayValue ?? animatedValue * 100;
+    useEffect(() => {
+        const target = clampedValue;
+        if (shouldAnimate) {
+            animateFloat(animatedValue, target, animationDuration, setAnimatedValue);
+            animateNumber(Math.round(animatedDisplayValue), Math.round(displayValue ?? target * 100), animationDuration, setAnimatedDisplayValue);
+        }
+        else {
+            setAnimatedValue(target);
+            setAnimatedDisplayValue(displayValue ?? target * 100);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [clampedValue, displayValue, shouldAnimate, animationDuration]);
+    const getThemeColors = () => {
+        switch (theme) {
+            case "cyan":
+                return {
+                    stroke: "hsl(var(--cyan-neon))",
+                    glow: "var(--cyan-neon)",
+                    shadow: "shadow-neon-cyan",
+                };
+            case "magenta":
+                return {
+                    stroke: "hsl(var(--magenta-neon))",
+                    glow: "var(--magenta-neon)",
+                    shadow: "shadow-neon-magenta",
+                };
+            case "emerald":
+                return {
+                    stroke: "hsl(var(--emerald-neon))",
+                    glow: "var(--emerald-neon)",
+                    shadow: "shadow-neon-emerald",
+                };
+            case "rainbow":
+            default:
+                return {
+                    stroke: "url(#rainbow-gradient)",
+                    glow: "var(--cyan-neon)",
+                    shadow: "shadow-glow",
+                };
+        }
+    };
+    const themeColors = getThemeColors();
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-2", className), ...props, children: [_jsxs("div", { className: "relative", style: { width: size, height: size }, children: [_jsxs("svg", { width: size, height: size, className: cn("transform -rotate-90 transition-all duration-300", shouldAnimate && "animate-soft-glow", themeColors.shadow), role: "img", "aria-label": label
+                            ? `${label}: ${Math.round(finalDisplayValue)}${suffix}`
+                            : `${Math.round(finalDisplayValue)}${suffix}`, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `rainbow-gradient-${gradientId}`, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "hsl(var(--cyan-neon))" }), _jsx("stop", { offset: "50%", stopColor: "hsl(var(--magenta-neon))" }), _jsx("stop", { offset: "100%", stopColor: "hsl(var(--emerald-neon))" })] }), _jsxs("filter", { id: "glow", children: [_jsx("feGaussianBlur", { stdDeviation: "3", result: "coloredBlur" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "coloredBlur" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "hsl(var(--border))", strokeWidth: strokeWidth, className: "opacity-20" }), _jsx(motion.circle, { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: theme === "rainbow" ? `url(#rainbow-gradient-${gradientId})` : themeColors.stroke, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, filter: "url(#glow)", initial: shouldAnimate ? { strokeDashoffset: circumference } : {}, animate: { strokeDashoffset }, transition: {
+                                    duration: shouldAnimate ? animationDuration / 1000 : 0,
+                                    ease: "easeOut",
+                                } })] }), showValue && (_jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: _jsx(AnimatePresence, { mode: "wait", children: _jsxs(motion.span, { className: "text-2xl font-bold font-display tabular-nums", style: {
+                                    color: theme === "rainbow" ? "hsl(var(--cyan-neon))" : themeColors.stroke,
+                                }, initial: shouldAnimate ? { y: 10, opacity: 0 } : {}, animate: { y: 0, opacity: 1 }, exit: { y: -10, opacity: 0 }, transition: { duration: shouldAnimate ? 0.2 : 0 }, children: [Math.round(finalDisplayValue), suffix] }, Math.floor(finalDisplayValue)) }) }))] }), label && (_jsx(motion.span, { className: "text-sm text-muted-foreground font-medium", initial: shouldAnimate ? { opacity: 0, y: 5 } : {}, animate: { opacity: 1, y: 0 }, transition: {
+                    delay: shouldAnimate ? 0.3 : 0,
+                    duration: shouldAnimate ? 0.3 : 0,
+                }, "aria-hidden": true, children: label }))] }));
+}

package/dist/primitives/atoms/HUDProgressRing/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./HUDProgressRing";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/atoms/HUDProgressRing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/atoms/HUDProgressRing/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/primitives/atoms/HUDProgressRing/index.js

@@ -0,0 +1 @@
+export * from "./HUDProgressRing";

package/dist/primitives/atoms/IconPulse/IconPulse.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from "class-variance-authority";
+import React from "react";
+declare const iconPulseVariants: (props?: ({
+    variant?: "success" | "default" | "warning" | "muted" | "danger" | "accent" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    intensity?: "low" | "medium" | "high" | "none" | null | undefined;
+    interactive?: "none" | "button" | "hover" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IconPulseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration">, VariantProps<typeof iconPulseVariants> {
+    /** Icon element (usually from lucide-react) */
+    icon: React.ReactNode;
+    /** Pulse animation on hover/focus */
+    pulse?: boolean;
+    /** Continuous pulse animation */
+    continuousPulse?: boolean;
+    /** Disable all animations */
+    disableAnimations?: boolean;
+    /** Click handler (makes it interactive) */
+    onClick?: () => void;
+    /** ARIA label for accessibility */
+    "aria-label"?: string;
+}
+export declare function IconPulse({ className, variant, size, intensity, interactive, icon, pulse, continuousPulse, disableAnimations, onClick, "aria-label": ariaLabel, ...props }: IconPulseProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconPulse.d.ts.map

package/dist/primitives/atoms/IconPulse/IconPulse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPulse.d.ts","sourceRoot":"","sources":["../../../../src/primitives/atoms/IconPulse/IconPulse.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,iBAAiB;;;;;8EAqCtB,CAAC;AAEF,MAAM,WAAW,cACf,SACE,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GACV,QAAQ,GACR,WAAW,GACX,aAAa,GACb,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,CACzB,EACD,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,+CAA+C;IAC/C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,SAAS,EACT,WAAW,EACX,IAAI,EACJ,KAAa,EACb,eAAuB,EACvB,iBAAyB,EACzB,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,cAAc,2CAuIhB"}

package/dist/primitives/atoms/IconPulse/IconPulse.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn, prefersReducedMotion } from "../../../lib/utils";
+import { cva } from "class-variance-authority";
+import { motion } from "framer-motion";
+const iconPulseVariants = cva("inline-flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "text-foreground hover:text-cyan-neon",
+            muted: "text-muted-foreground hover:text-foreground",
+            accent: "text-cyan-neon hover:text-cyan-neon/80",
+            success: "text-emerald-neon hover:text-emerald-neon/80",
+            warning: "text-yellow-500 hover:text-yellow-400",
+            danger: "text-destructive hover:text-destructive/80",
+        },
+        size: {
+            sm: "h-4 w-4",
+            default: "h-5 w-5",
+            lg: "h-6 w-6",
+            xl: "h-8 w-8",
+        },
+        intensity: {
+            none: "",
+            low: "drop-shadow-[0_0_4px_currentColor]",
+            medium: "drop-shadow-[0_0_8px_currentColor]",
+            high: "drop-shadow-[0_0_16px_currentColor]",
+        },
+        interactive: {
+            none: "",
+            hover: "cursor-pointer hover:scale-110",
+            button: "cursor-pointer hover:scale-110 active:scale-95",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+        intensity: "none",
+        interactive: "none",
+    },
+});
+export function IconPulse({ className, variant, size, intensity, interactive, icon, pulse = false, continuousPulse = false, disableAnimations = false, onClick, "aria-label": ariaLabel, ...props }) {
+    const reducedMotion = prefersReducedMotion();
+    const shouldAnimate = !disableAnimations && !reducedMotion;
+    // Determine interactivity based on onClick or explicit interactive prop
+    const finalInteractive = onClick ? "button" : interactive;
+    const baseClassName = cn(iconPulseVariants({
+        variant,
+        size,
+        intensity: shouldAnimate ? intensity : "none",
+        interactive: shouldAnimate ? finalInteractive : "none",
+    }), continuousPulse && shouldAnimate && "animate-pulse", className);
+    if (onClick) {
+        return (_jsx(motion.button, { className: baseClassName, onClick: onClick, "aria-label": ariaLabel, type: "button", whileHover: shouldAnimate && pulse
+                ? {
+                    scale: 1.1,
+                    filter: "drop-shadow(0 0 12px currentColor)",
+                    transition: { duration: 0.2 },
+                }
+                : shouldAnimate && finalInteractive !== "none"
+                    ? {
+                        scale: 1.05,
+                        transition: { duration: 0.1 },
+                    }
+                    : {}, whileTap: shouldAnimate
+                ? {
+                    scale: 0.95,
+                    transition: { duration: 0.1 },
+                }
+                : {}, whileFocus: shouldAnimate && pulse
+                ? {
+                    scale: 1.05,
+                    filter: "drop-shadow(0 0 8px currentColor)",
+                    transition: { duration: 0.2 },
+                }
+                : {}, animate: shouldAnimate && continuousPulse
+                ? {
+                    scale: [1, 1.05, 1],
+                    opacity: [1, 0.8, 1],
+                }
+                : {}, transition: shouldAnimate && continuousPulse
+                ? {
+                    duration: 2,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                }
+                : {}, children: _jsx(motion.div, { className: "flex items-center justify-center", initial: shouldAnimate ? { opacity: 0, rotate: -10 } : {}, animate: { opacity: 1, rotate: 0 }, transition: { duration: 0.3 }, children: icon }) }));
+    }
+    return (_jsx(motion.div, { className: baseClassName, "aria-label": ariaLabel, whileHover: shouldAnimate && pulse
+            ? {
+                scale: 1.1,
+                filter: "drop-shadow(0 0 12px currentColor)",
+                transition: { duration: 0.2 },
+            }
+            : shouldAnimate && finalInteractive !== "none"
+                ? {
+                    scale: 1.05,
+                    transition: { duration: 0.1 },
+                }
+                : {}, animate: shouldAnimate && continuousPulse
+            ? {
+                scale: [1, 1.05, 1],
+                opacity: [1, 0.8, 1],
+            }
+            : {}, transition: shouldAnimate && continuousPulse
+            ? {
+                duration: 2,
+                repeat: Infinity,
+                ease: "easeInOut",
+            }
+            : {}, ...props, children: _jsx(motion.div, { className: "flex items-center justify-center", initial: shouldAnimate ? { opacity: 0, rotate: -10 } : {}, animate: { opacity: 1, rotate: 0 }, transition: { duration: 0.3 }, children: icon }) }));
+}

package/dist/primitives/atoms/IconPulse/index.d.ts

@@ -0,0 +1,2 @@
+export { IconPulse, type IconPulseProps } from "./IconPulse";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/atoms/IconPulse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/atoms/IconPulse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/primitives/atoms/IconPulse/index.js

@@ -0,0 +1 @@
+export { IconPulse } from "./IconPulse";

package/dist/primitives/atoms/PixelCanvas/PixelCanvas.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface PixelCanvasProps extends React.HTMLAttributes<HTMLDivElement> {
+    gap?: number;
+    speed?: number;
+    colors?: string[];
+    variant?: "default" | "icon";
+    noFocus?: boolean;
+    /** Manual activation control (bypasses hover) */
+    active?: boolean;
+    /** Status-driven presets for colors and speed */
+    status?: 'selected' | 'active' | 'warning' | 'error';
+    /** Theme color (used when status='selected') */
+    themeColor?: string;
+}
+declare const PixelCanvas: React.ForwardRefExoticComponent<PixelCanvasProps & React.RefAttributes<HTMLDivElement>>;
+export { PixelCanvas };
+//# sourceMappingURL=PixelCanvas.d.ts.map

package/dist/primitives/atoms/PixelCanvas/PixelCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelCanvas.d.ts","sourceRoot":"","sources":["../../../../src/primitives/atoms/PixelCanvas/PixelCanvas.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsJ/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACrD,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,yFAiRhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/atoms/PixelCanvas/PixelCanvas.js

@@ -0,0 +1,340 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+// Status-driven color presets
+const STATUS_COLORS = {
+    active: ['#00ff88', '#00cc6a', '#00994d'],
+    warning: ['#f2c96b', '#e5b84d', '#d4a42e'],
+    error: ['#dc143c', '#b01030', '#8a0c26'],
+};
+// Status-driven speed presets
+const STATUS_SPEEDS = {
+    selected: 35,
+    active: 50,
+    warning: 25,
+    error: 60,
+};
+/**
+ * Derive color tints from a hex color.
+ * Returns array of 3 colors: [base, darker, darkest]
+ */
+function deriveColorTints(hex) {
+    // Remove # if present
+    const cleanHex = hex.replace(/^#/, '');
+    // Parse hex to RGB
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    // Create base + 2 darker variants (80% and 60% brightness)
+    const toHex = (val) => Math.round(val).toString(16).padStart(2, '0');
+    const base = `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+    const darker = `#${toHex(r * 0.8)}${toHex(g * 0.8)}${toHex(b * 0.8)}`;
+    const darkest = `#${toHex(r * 0.6)}${toHex(g * 0.6)}${toHex(b * 0.6)}`;
+    return [base, darker, darkest];
+}
+// Pixel class for the canvas animation
+class Pixel {
+    width;
+    height;
+    ctx;
+    x;
+    y;
+    color;
+    speed;
+    size;
+    sizeStep;
+    minSize;
+    maxSizeInteger;
+    maxSize;
+    delay;
+    counter;
+    counterStep;
+    isIdle;
+    isReverse;
+    isShimmer;
+    constructor(canvas, context, x, y, color, speed, delay) {
+        this.width = canvas.width;
+        this.height = canvas.height;
+        this.ctx = context;
+        this.x = x;
+        this.y = y;
+        this.color = color;
+        this.speed = this.getRandomValue(0.1, 0.9) * speed;
+        this.size = 0;
+        this.sizeStep = Math.random() * 0.4;
+        this.minSize = 0.5;
+        this.maxSizeInteger = 2;
+        this.maxSize = this.getRandomValue(this.minSize, this.maxSizeInteger);
+        this.delay = delay;
+        this.counter = 0;
+        this.counterStep = Math.random() * 4 + (this.width + this.height) * 0.01;
+        this.isIdle = false;
+        this.isReverse = false;
+        this.isShimmer = false;
+    }
+    getRandomValue(min, max) {
+        return Math.random() * (max - min) + min;
+    }
+    draw() {
+        const centerOffset = this.maxSizeInteger * 0.5 - this.size * 0.5;
+        this.ctx.fillStyle = this.color;
+        this.ctx.fillRect(this.x + centerOffset, this.y + centerOffset, this.size, this.size);
+    }
+    appear() {
+        this.isIdle = false;
+        if (this.counter <= this.delay) {
+            this.counter += this.counterStep;
+            return;
+        }
+        if (this.size >= this.maxSize) {
+            this.isShimmer = true;
+        }
+        if (this.isShimmer) {
+            this.shimmer();
+        }
+        else {
+            this.size += this.sizeStep;
+        }
+        this.draw();
+    }
+    disappear() {
+        this.isShimmer = false;
+        this.counter = 0;
+        if (this.size <= 0) {
+            this.isIdle = true;
+            return;
+        }
+        else {
+            this.size -= 0.1;
+        }
+        this.draw();
+    }
+    shimmer() {
+        if (this.size >= this.maxSize) {
+            this.isReverse = true;
+        }
+        else if (this.size <= this.minSize) {
+            this.isReverse = false;
+        }
+        if (this.isReverse) {
+            this.size -= this.speed;
+        }
+        else {
+            this.size += this.speed;
+        }
+    }
+}
+const PixelCanvas = React.forwardRef(({ gap = 5, speed = 35, colors = ["#f8fafc", "#f1f5f9", "#cbd5e1"], variant = "default", noFocus = false, active, status, themeColor, className, ...props }, ref) => {
+    const containerRef = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    const pixelsRef = React.useRef([]);
+    const animationRef = React.useRef(null);
+    const timePreviousRef = React.useRef(performance.now());
+    const timeInterval = 1000 / 60;
+    const reducedMotion = typeof window !== "undefined"
+        ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        : false;
+    // Resolve colors based on status
+    const resolvedColors = React.useMemo(() => {
+        if (status === 'selected' && themeColor) {
+            return deriveColorTints(themeColor);
+        }
+        if (status && STATUS_COLORS[status]) {
+            return STATUS_COLORS[status];
+        }
+        return colors;
+    }, [status, themeColor, colors]);
+    // Resolve speed based on status
+    const resolvedSpeed = React.useMemo(() => {
+        if (status && STATUS_SPEEDS[status] !== undefined) {
+            return STATUS_SPEEDS[status];
+        }
+        return speed;
+    }, [status, speed]);
+    const actualSpeed = reducedMotion ? 0 : Math.max(0, Math.min(100, resolvedSpeed)) * 0.001;
+    const actualGap = Math.max(4, Math.min(50, gap));
+    const getDistanceToCenter = React.useCallback((x, y, width, height) => {
+        const dx = x - width / 2;
+        const dy = y - height / 2;
+        return Math.sqrt(dx * dx + dy * dy);
+    }, []);
+    const getDistanceToBottomLeft = React.useCallback((x, y, height) => {
+        const dx = x;
+        const dy = height - y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }, []);
+    const createPixels = React.useCallback(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (!canvas || !ctx)
+            return;
+        pixelsRef.current = [];
+        for (let x = 0; x < canvas.width; x += actualGap) {
+            for (let y = 0; y < canvas.height; y += actualGap) {
+                const color = resolvedColors[Math.floor(Math.random() * resolvedColors.length)];
+                let delay = 0;
+                if (variant === "icon") {
+                    delay = reducedMotion ? 0 : getDistanceToCenter(x, y, canvas.width, canvas.height);
+                }
+                else {
+                    delay = reducedMotion ? 0 : getDistanceToBottomLeft(x, y, canvas.height);
+                }
+                pixelsRef.current.push(new Pixel(canvas, ctx, x, y, color, actualSpeed, delay));
+            }
+        }
+    }, [
+        actualGap,
+        actualSpeed,
+        resolvedColors,
+        variant,
+        reducedMotion,
+        getDistanceToCenter,
+        getDistanceToBottomLeft,
+    ]);
+    const drawStatic = React.useCallback(() => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (!canvas || !ctx)
+            return;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (const pixel of pixelsRef.current) {
+            pixel.isIdle = true;
+            pixel.isReverse = false;
+            pixel.isShimmer = false;
+            pixel.size = pixel.maxSize;
+            pixel.draw();
+        }
+    }, []);
+    const handleResize = React.useCallback(() => {
+        const container = containerRef.current;
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (!container || !canvas || !ctx)
+            return;
+        const rect = container.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        const width = Math.floor(rect.width);
+        const height = Math.floor(rect.height);
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.scale(dpr, dpr);
+        createPixels();
+        if (reducedMotion) {
+            drawStatic();
+        }
+    }, [createPixels, reducedMotion, drawStatic]);
+    const handleAnimation = React.useCallback((name) => {
+        if (reducedMotion) {
+            return;
+        }
+        if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+        }
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext("2d");
+        if (!canvas || !ctx)
+            return;
+        const animate = () => {
+            animationRef.current = requestAnimationFrame(animate);
+            const timeNow = performance.now();
+            const timePassed = timeNow - timePreviousRef.current;
+            if (timePassed < timeInterval)
+                return;
+            timePreviousRef.current = timeNow - (timePassed % timeInterval);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            let allIdle = true;
+            for (const pixel of pixelsRef.current) {
+                pixel[name]();
+                if (!pixel.isIdle)
+                    allIdle = false;
+            }
+            if (allIdle) {
+                if (animationRef.current) {
+                    cancelAnimationFrame(animationRef.current);
+                    animationRef.current = null;
+                }
+            }
+        };
+        animate();
+    }, [reducedMotion, timeInterval]);
+    React.useEffect(() => {
+        handleResize();
+        const ro = new ResizeObserver(() => {
+            requestAnimationFrame(handleResize);
+        });
+        if (containerRef.current) {
+            ro.observe(containerRef.current);
+        }
+        return () => {
+            ro.disconnect();
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, [handleResize]);
+    // Handle hover/focus listeners (skip if active prop is provided)
+    React.useEffect(() => {
+        // If active prop is provided, skip hover control
+        if (active !== undefined)
+            return;
+        const parent = containerRef.current?.parentElement;
+        if (!parent)
+            return;
+        if (reducedMotion)
+            return;
+        const handleEnter = () => handleAnimation("appear");
+        const handleLeave = () => handleAnimation("disappear");
+        parent.addEventListener("mouseenter", handleEnter);
+        parent.addEventListener("mouseleave", handleLeave);
+        if (!noFocus) {
+            parent.addEventListener("focus", handleEnter, { capture: true });
+            parent.addEventListener("blur", handleLeave, { capture: true });
+        }
+        return () => {
+            parent.removeEventListener("mouseenter", handleEnter);
+            parent.removeEventListener("mouseleave", handleLeave);
+            if (!noFocus) {
+                parent.removeEventListener("focus", handleEnter, { capture: true });
+                parent.removeEventListener("blur", handleLeave, { capture: true });
+            }
+        };
+    }, [active, handleAnimation, noFocus, reducedMotion]);
+    // Handle active prop changes for manual activation
+    React.useEffect(() => {
+        if (active === undefined)
+            return; // Let hover control it
+        if (active) {
+            handleAnimation("appear");
+        }
+        else {
+            handleAnimation("disappear");
+        }
+    }, [active, handleAnimation]);
+    return (_jsx("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, className: className, style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+        }, ...props, children: _jsx("canvas", { ref: canvasRef, style: {
+                display: "block",
+                width: "100%",
+                height: "100%",
+            } }) }));
+});
+PixelCanvas.displayName = "PixelCanvas";
+export { PixelCanvas };

package/dist/primitives/atoms/PixelCanvas/index.d.ts

@@ -0,0 +1,2 @@
+export { PixelCanvas, type PixelCanvasProps } from "./PixelCanvas";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/atoms/PixelCanvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/atoms/PixelCanvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/primitives/atoms/PixelCanvas/index.js

@@ -0,0 +1 @@
+export { PixelCanvas } from "./PixelCanvas";

package/dist/primitives/atoms/StatBadge/StatBadge.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from "class-variance-authority";
+import React from "react";
+declare const statBadgeVariants: (props?: ({
+    variant?: "time" | "nodes" | "streak" | "achievement" | "xp" | "difficulty" | "score" | "jobs" | "receipts" | "trust" | "disputes" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    glow?: "none" | "subtle" | "intense" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StatBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onDrag" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDragStart" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration">, VariantProps<typeof statBadgeVariants> {
+    /** Stat value (number will be formatted) */
+    value: number | string;
+    /** Optional suffix (XP, days, %, etc.) */
+    suffix?: string;
+    /** Optional prefix */
+    prefix?: string;
+    /** Custom icon (overrides variant default) */
+    icon?: React.ReactNode;
+    /** Show icon */
+    showIcon?: boolean;
+    /** Animate value changes */
+    animateValue?: boolean;
+    /** Disable glow animations */
+    disableAnimations?: boolean;
+}
+export declare function StatBadge({ className, variant, size, glow, value, suffix, prefix, icon, showIcon, animateValue, disableAnimations, ...props }: StatBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StatBadge.d.ts.map

package/dist/primitives/atoms/StatBadge/StatBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatBadge.d.ts","sourceRoot":"","sources":["../../../../src/primitives/atoms/StatBadge/StatBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,iBAAiB;;;;8EAqCtB,CAAC;AAgBF,MAAM,WAAW,cACf,SACE,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GACV,QAAQ,GACR,WAAW,GACX,aAAa,GACb,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,aAAa,GACb,QAAQ,GACR,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,CACzB,EACD,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,OAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,IAAI,EACJ,QAAe,EACf,YAAoB,EACpB,iBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,cAAc,2CA0DhB"}