51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T3377,"use client"; import { cn } from "@/lib/utils"; import { motion, useReducedMotion } from "motion/react"; import { useEffect, useMemo, useState } from "react"; // Grid matrix type: 3x3 array of 0s and 1s export type GridMatrix = [ [0 | 1, 0 | 1, 0 | 1], [0 | 1, 0 | 1, 0 | 1], [0 | 1, 0 | 1, 0 | 1], ]; // All preset pattern names export type PresetPattern = // Solo (single cell) | "solo-center" | "solo-tl" | "solo-tr" | "solo-bl" | "solo-br" // Horizontal lines | "line-h-top" | "line-h-mid" | "line-h-bot" // Vertical lines | "line-v-left" | "line-v-mid" | "line-v-right" // Diagonals | "line-diag-1" | "line-diag-2" // Corners | "corners-only" | "corners-sync" | "corners" // Plus | "plus-hollow" | "plus-full" // L-shapes | "L-tl" | "L-tr" | "L-bl" | "L-br" // T-shapes | "T-top" | "T-bot" | "T-left" | "T-right" // Duo | "duo-h" | "duo-v" | "duo-diag" // Frame | "frame" | "frame-sync" // Sparse | "sparse-1" | "sparse-2" | "sparse-3" // Waves | "wave-lr" | "wave-rl" | "wave-tb" | "wave-bt" // Diagonal quadrants | "diagonal-tl" | "diagonal-tr" | "diagonal-bl" | "diagonal-br" // Ripple | "ripple-out" | "ripple-in" // Shapes | "cross" | "x-shape" | "diamond" // Stripes | "stripes-h" | "stripes-v" // Patterns | "checkerboard" | "rows-alt" // Spirals | "spiral-cw" | "spiral-ccw" // Snake | "snake" | "snake-rev" // Rain | "rain" | "rain-rev" // Effects | "waterfall" | "breathing" | "heartbeat" | "twinkle" | "sparkle" | "chaos" // Edge | "edge-cw" | "border"; export interface GridLoaderProps { /** Blur amount in pixels — creates a soft glow effect */ blur?: number; /** Additional CSS classes */ className?: string; /** Color preset or custom CSS color */ color?: "white" | "red" | "blue" | "green" | "amber" | string; /** Gap between cells in pixels */ gap?: number; /** Animation mode */ mode?: "pulse" | "sequence" | "stagger"; /** Pattern to display - preset name or custom 3x3 matrix */ pattern?: PresetPattern | GridMatrix; /** Use rounded (circular) cells instead of square */ rounded?: boolean; /** Array of patterns for sequence mode */ sequence?: Array; /** Size preset or pixel value */ size?: "sm" | "md" | "lg" | "xl" | number; /** Animation speed */ speed?: "slow" | "normal" | "fast"; /** Disable animation and show static pattern */ static?: boolean; } // Preset patterns as 3x3 matrices const PATTERNS: Record = { border: [ [1, 1, 1], [1, 0, 1], [1, 1, 1], ], breathing: [ [0, 0, 0], [0, 1, 0], [0, 0, 0], ], chaos: [ [1, 0, 1], [0, 1, 0], [1, 0, 0], ], // Patterns checkerboard: [ [1, 0, 1], [0, 1, 0], [1, 0, 1], ], corners: [ [1, 0, 1], [0, 0, 0], [1, 0, 1], ], // Corners "corners-only": [ [1, 0, 1], [0, 0, 0], [1, 0, 1], ], "corners-sync": [ [1, 0, 1], [0, 0, 0], [1, 0, 1], ], // Shapes cross: [ [0, 1, 0], [1, 1, 1], [0, 1, 0], ], "diagonal-bl": [ [0, 0, 0], [1, 1, 0], [1, 1, 0], ], "diagonal-br": [ [0, 0, 0], [0, 1, 1], [0, 1, 1], ], // Diagonal quadrants "diagonal-tl": [ [1, 1, 0], [1, 1, 0], [0, 0, 0], ], "diagonal-tr": [ [0, 1, 1], [0, 1, 1], [0, 0, 0], ], diamond: [ [0, 1, 0], [1, 0, 1], [0, 1, 0], ], "duo-diag": [ [1, 0, 0], [0, 1, 0], [0, 0, 0], ], // Duo (two cells) "duo-h": [ [0, 0, 0], [1, 1, 0], [0, 0, 0], ], "duo-v": [ [0, 1, 0], [0, 1, 0], [0, 0, 0], ], // Edge "edge-cw": [ [1, 1, 1], [0, 0, 0], [0, 0, 0], ], // Frame frame: [ [1, 1, 1], [1, 0, 1], [1, 1, 1], ], "frame-sync": [ [1, 1, 1], [1, 0, 1], [1, 1, 1], ], heartbeat: [ [0, 1, 0], [1, 1, 1], [0, 1, 0], ], "L-bl": [ [0, 0, 0], [1, 0, 0], [1, 1, 0], ], "L-br": [ [0, 0, 0], [0, 0, 1], [0, 1, 1], ], // L-shapes "L-tl": [ [1, 1, 0], [1, 0, 0], [0, 0, 0], ], "L-tr": [ [0, 1, 1], [0, 0, 1], [0, 0, 0], ], // Diagonals "line-diag-1": [ [1, 0, 0], [0, 1, 0], [0, 0, 1], ], "line-diag-2": [ [0, 0, 1], [0, 1, 0], [1, 0, 0], ], "line-h-bot": [ [0, 0, 0], [0, 0, 0], [1, 1, 1], ], "line-h-mid": [ [0, 0, 0], [1, 1, 1], [0, 0, 0], ], // Horizontal lines "line-h-top": [ [1, 1, 1], [0, 0, 0], [0, 0, 0], ], // Vertical lines "line-v-left": [ [1, 0, 0], [1, 0, 0], [1, 0, 0], ], "line-v-mid": [ [0, 1, 0], [0, 1, 0], [0, 1, 0], ], "line-v-right": [ [0, 0, 1], [0, 0, 1], [0, 0, 1], ], "plus-full": [ [0, 1, 0], [1, 1, 1], [0, 1, 0], ], // Plus "plus-hollow": [ [0, 1, 0], [1, 0, 1], [0, 1, 0], ], // Rain rain: [ [0, 1, 0], [0, 1, 0], [0, 0, 0], ], "rain-rev": [ [0, 0, 0], [0, 1, 0], [0, 1, 0], ], "ripple-in": [ [0, 0, 0], [0, 1, 0], [0, 0, 0], ], // Ripple "ripple-out": [ [1, 1, 1], [1, 0, 1], [1, 1, 1], ], "rows-alt": [ [1, 1, 1], [0, 0, 0], [1, 1, 1], ], // Snake snake: [ [1, 1, 0], [0, 1, 0], [0, 0, 0], ], "snake-rev": [ [0, 0, 0], [0, 1, 0], [0, 1, 1], ], "solo-bl": [ [0, 0, 0], [0, 0, 0], [1, 0, 0], ], "solo-br": [ [0, 0, 0], [0, 0, 0], [0, 0, 1], ], // Solo (single cell) "solo-center": [ [0, 0, 0], [0, 1, 0], [0, 0, 0], ], "solo-tl": [ [1, 0, 0], [0, 0, 0], [0, 0, 0], ], "solo-tr": [ [0, 0, 1], [0, 0, 0], [0, 0, 0], ], sparkle: [ [1, 0, 1], [0, 1, 0], [1, 0, 1], ], // Sparse "sparse-1": [ [1, 0, 0], [0, 0, 1], [0, 1, 0], ], "sparse-2": [ [0, 1, 0], [1, 0, 0], [0, 0, 1], ], "sparse-3": [ [0, 0, 1], [0, 1, 0], [1, 0, 0], ], "spiral-ccw": [ [1, 1, 1], [1, 0, 0], [1, 0, 0], ], // Spirals "spiral-cw": [ [1, 1, 1], [0, 0, 1], [0, 0, 1], ], // Stripes "stripes-h": [ [1, 1, 1], [0, 0, 0], [1, 1, 1], ], "stripes-v": [ [1, 0, 1], [1, 0, 1], [1, 0, 1], ], "T-bot": [ [0, 0, 0], [0, 1, 0], [1, 1, 1], ], "T-left": [ [1, 0, 0], [1, 1, 0], [1, 0, 0], ], "T-right": [ [0, 0, 1], [0, 1, 1], [0, 0, 1], ], // T-shapes "T-top": [ [1, 1, 1], [0, 1, 0], [0, 0, 0], ], twinkle: [ [1, 0, 0], [0, 0, 1], [0, 1, 0], ], // Effects waterfall: [ [1, 1, 0], [0, 0, 0], [0, 0, 0], ], "wave-bt": [ [0, 0, 0], [1, 1, 1], [1, 1, 1], ], // Waves "wave-lr": [ [1, 1, 0], [1, 1, 0], [1, 1, 0], ], "wave-rl": [ [0, 1, 1], [0, 1, 1], [0, 1, 1], ], "wave-tb": [ [1, 1, 1], [1, 1, 1], [0, 0, 0], ], "x-shape": [ [1, 0, 1], [0, 1, 0], [1, 0, 1], ], }; // Color presets const COLORS: Record = { amber: "#fbbf24", blue: "#38bdf8", green: "#4ade80", red: "#f87171", white: "#f5f5f4", }; // Size presets in pixels const SIZES: Record = { lg: 48, md: 32, sm: 24, xl: 64, }; // Speed presets in milliseconds const SPEEDS: Record = { fast: 400, normal: 800, slow: 1500, }; // Helper to resolve pattern to GridMatrix const resolvePattern = ( pattern: PresetPattern | GridMatrix | undefined ): GridMatrix => { if (!pattern) { return PATTERNS["plus-hollow"]; } if (typeof pattern === "string") { return PATTERNS[pattern] ?? PATTERNS["plus-hollow"]; } return pattern; }; // Helper to resolve color const resolveColor = (color: string | undefined): string => { if (!color) { return COLORS.white; } return COLORS[color] ?? color; }; // Helper to resolve size const resolveSize = ( size: "sm" | "md" | "lg" | "xl" | number | undefined ): number => { if (size === undefined) { return SIZES.md; } if (typeof size === "number") { return size; } return SIZES[size] ?? SIZES.md; }; // Cell component for individual grid cells const GridCell = ({ active, color, cellSize, animationDelay, mode, cycleDuration, shouldReduceMotion, rounded, }: { active: boolean; color: string; cellSize: number; animationDelay: number; mode: "pulse" | "sequence" | "stagger"; cycleDuration: number; shouldReduceMotion: boolean | null; rounded?: boolean; }) => { const glowSize = cellSize * 0.8; const borderRadius = rounded ? "50%" : undefined; if (!active) { return (

); } // For reduced motion, show static cells if (shouldReduceMotion) { return (

); } const pulseAnimation = { opacity: [0.4, 1, 0.4], scale: [0.95, 1, 0.95], }; const staggerAnimation = { opacity: [0, 1, 1, 0], scale: [0.8, 1, 1, 0.8], }; return ( ); }; const GridLoader = ({ pattern, mode = "pulse", sequence, speed = "normal", color, size, blur, gap: gapProp, rounded, static: isStatic, className, }: GridLoaderProps) => { const shouldReduceMotion = useReducedMotion(); const [sequenceIndex, setSequenceIndex] = useState(0); const sizeInPx = resolveSize(size); const gapSize = gapProp ?? 0; const cellSize = (sizeInPx - gapSize * 2) / 3; const resolvedColor = resolveColor(color); const cycleDuration = SPEEDS[speed] ?? SPEEDS.normal; const disableAnimation = isStatic || shouldReduceMotion; // Handle sequence mode useEffect(() => { if (mode !== "sequence" || !sequence || sequence.length === 0) { return; } if (disableAnimation) { return; } const interval = setInterval(() => { setSequenceIndex((prev) => (prev + 1) % sequence.length); }, cycleDuration); return () => clearInterval(interval); }, [mode, sequence, cycleDuration, disableAnimation]); // Determine current grid to display const currentGrid = useMemo(() => { if (mode === "sequence" && sequence && sequence.length > 0) { return resolvePattern(sequence[sequenceIndex]); } return resolvePattern(pattern); }, [mode, sequence, sequenceIndex, pattern]); // Flatten grid for rendering const cells = currentGrid.flat(); // Calculate stagger delays based on active cells const staggerDelays = useMemo(() => { if (mode !== "stagger") { return cells.map(() => 0); } const activeCells = cells.reduce((acc, cell, idx) => { if (cell === 1) { acc.push(idx); } return acc; }, []); const delayPerCell = cycleDuration / 1000 / (activeCells.length + 2); return cells.map((cell, idx) => { if (cell === 0) { return 0; } const activeIndex = activeCells.indexOf(idx); return activeIndex * delayPerCell; }); }, [cells, mode, cycleDuration]); // Generate stable keys for grid positions (0-8 in a 3x3 grid) const cellKeys = ["tl", "tm", "tr", "ml", "mm", "mr", "bl", "bm", "br"]; return ( {cells.map((active, idx) => ( ))} ); }; export default GridLoader; // Export patterns for advanced usage export { COLORS, PATTERNS, SIZES }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@smoothui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"index.tsx","content":"$53","type":"registry:ui","target":"components/smoothui/grid-loader/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]