{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tldr-section",
  "type": "registry:component",
  "title": "TLDR Section",
  "description": "Summary section for quick content overview.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/tldr-section/tldr-section.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\ntype TLDRSectionProps = {\n  children: React.ReactNode;\n  label: string;\n};\n\nexport function TLDRSection({ children, label }: TLDRSectionProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasBeenOpened, setHasBeenOpened] = useState(false);\n  const timerReference = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (isExpanded && !hasBeenOpened) {\n      // Clear any existing timer\n      if (timerReference.current) {\n        clearTimeout(timerReference.current);\n      }\n\n      const rafId = requestAnimationFrame(() => {\n        setIsLoading(true);\n        setHasBeenOpened(true);\n      });\n\n      // Simulate loading with skeleton\n      timerReference.current = setTimeout(() => {\n        setIsLoading(false);\n        timerReference.current = null;\n      }, 800);\n\n      return () => {\n        cancelAnimationFrame(rafId);\n        if (timerReference.current) {\n          clearTimeout(timerReference.current);\n          timerReference.current = null;\n        }\n      };\n    }\n\n    return () => {\n      if (timerReference.current) {\n        clearTimeout(timerReference.current);\n        timerReference.current = null;\n      }\n    };\n  }, [isExpanded]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div className=\"my-8 rounded-lg border border-border bg-muted/30 overflow-hidden\">\n      <button\n        className=\"flex items-center justify-between w-full px-4 py-3 hover:bg-muted/50 transition-colors\"\n        onClick={() => {\n          setIsExpanded(!isExpanded);\n        }}\n        type=\"button\"\n      >\n        <div className=\"flex items-center gap-3\">\n          <svg\n            className=\"size-5 text-muted-foreground\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            viewBox=\"0 0 24 24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4 6h16M4 12h16M4 18h16\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n          <span className=\"text-sm font-medium text-foreground\">{label}</span>\n        </div>\n        <svg\n          className={`size-4 text-muted-foreground transition-transform ${isExpanded ? \"rotate-180\" : \"\"}`}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M19 9l-7 7-7-7\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n      {isExpanded ? (\n        <div className=\"px-4 pb-4 pt-2 border-t border-border\">\n          {isLoading ? (\n            <div className=\"space-y-3\">\n              <div className=\"relative h-4 bg-muted/50 rounded overflow-hidden\">\n                <div className=\"absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer\" />\n              </div>\n              <div className=\"relative h-4 bg-muted/50 rounded overflow-hidden w-5/6\">\n                <div className=\"absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer\" />\n              </div>\n              <div className=\"relative h-4 bg-muted/50 rounded overflow-hidden w-4/5\">\n                <div className=\"absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer\" />\n              </div>\n              <div className=\"relative h-4 bg-muted/50 rounded overflow-hidden w-3/4\">\n                <div className=\"absolute inset-0 bg-gradient-to-r from-transparent via-amber-400/40 to-transparent animate-shimmer\" />\n              </div>\n            </div>\n          ) : (\n            <div className=\"text-sm text-muted-foreground leading-relaxed\">\n              {children}\n            </div>\n          )}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}