{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "loader-1-retro",
  "title": "Loader 1Retro",
  "files": [
    {
      "path": "src/registry/loaders/retro/Loader1Retro.jsx",
      "content": "\"use client\";\n\nimport React, { useRef, useEffect, useState } from \"react\";\n\nconst LoaderRetro = () => {\n  const containerRef = useRef(null);\n  const textRef = useRef(null);\n  const [loadingPercentage, setLoadingPercentage] = useState(0);\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n  const [textDimensions, setTextDimensions] = useState({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (containerRef.current) {\n        setDimensions({\n          width: containerRef.current.offsetWidth,\n          height: containerRef.current.offsetHeight,\n        });\n      }\n      if (textRef.current) {\n        setTextDimensions({\n          width: textRef.current.offsetWidth,\n          height: textRef.current.offsetHeight,\n        });\n      }\n    };\n\n    handleResize();\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  useEffect(() => {\n    let interval = setInterval(() => {\n      setLoadingPercentage((prev) => {\n        if (prev >= 100) {\n          clearInterval(interval);\n          return 100;\n        }\n        return prev + 1;\n      });\n    }, 50);\n    return () => clearInterval(interval);\n  }, []);\n\n  // Simplified logic for demo purposes - assume Left-to-Right swipe\n  const travelWidth = Math.max(0, dimensions.width - textDimensions.width);\n  const currentX = (travelWidth * loadingPercentage) / 100;\n\n  const barStyle = {\n      height: \"100%\",\n      width: `${loadingPercentage}%`,\n      left: 0,\n      top: 0, \n  };\n  \n  const textStyle = {\n      left: `${currentX}px`,\n      bottom: 0, // Align closer to bottom like original if needed\n      top: \"auto\"\n  };\n\n  return (\n      <div className=\"w-full h-screen p-4 flex flex-col font-mono text-black bg-white\">\n        <div className=\"w-full border-2 border-black flex justify-between px-2 py-1 bg-white mb-2 shadow-[4px_4px_0px_0px_#000000]\">\n             <span className=\"font-bold uppercase text-sm\">SYSTEM_LOADER.exe</span>\n             <span className=\"font-bold uppercase text-sm\">{loadingPercentage}%</span>\n        </div>\n        \n        <div\n            ref={containerRef}\n            className=\"w-full h-full overflow-hidden relative border-2 border-black shadow-[4px_4px_0px_0px_#000000] bg-white\"\n        >\n            <div className=\"bg-white h-full w-full absolute top-0 left-0 z-[10]\"></div>\n\n            <div\n                ref={textRef}\n                style={textStyle}\n                className=\"text-black z-[20] absolute text-[100px] font-black leading-none transition-all ease-linear select-none\"\n            >\n                {loadingPercentage}\n            </div>\n\n            <div\n                style={barStyle}\n                className=\"bg-black absolute z-[30] overflow-hidden transition-all ease-linear\"\n            >\n                <div\n                    style={{\n                        width: dimensions.width ? `${dimensions.width}px` : \"100vw\",\n                        height: dimensions.height ? `${dimensions.height}px` : \"100vh\",\n                        position: \"absolute\",\n                        top: 0,\n                        left: 0,\n                    }}\n                >\n                    <div\n                        style={textStyle}\n                        className=\"text-white z-[40] absolute text-[100px] font-black leading-none transition-all ease-linear select-none\"\n                    >\n                        {loadingPercentage}\n                    </div>\n                </div>\n            </div>\n             <div className=\"absolute inset-0 pointer-events-none z-[50] bg-[linear-gradient(rgba(18,16,16,0)_50%,rgba(0,0,0,0.1)_50%),linear-gradient(90deg,rgba(255,0,0,0.06),rgba(0,255,0,0.02),rgba(0,0,255,0.06))] bg-[size:100%_2px,3px_100%]\"></div>\n        </div>\n      </div>\n  );\n};\n\nexport default LoaderRetro;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}