{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "resizable-split-panel",
  "type": "registry:ui",
  "title": "Draggable Split Viewport Pane",
  "description": "Interactive two-column split panel with draggable separator handle, percentage readout, and clamped boundary limits.",
  "category": "layout",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/layout/resizable-split-panel/resizable-split-panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/resizable-split-panel.tsx",
      "content": "import React, { useState, useRef } from 'react';\nimport { DotsThreeVertical } from '@phosphor-icons/react';\n\nexport const ResizableSplitPanel: React.FC = () => {\n  const [splitPos, setSplitPos] = useState(50);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const isDragging = useRef(false);\n\n  const handleMouseDown = () => {\n    isDragging.current = true;\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!isDragging.current || !containerRef.current) return;\n      const rect = containerRef.current.getBoundingClientRect();\n      const pct = ((e.clientX - rect.left) / rect.width) * 100;\n      setSplitPos(Math.min(80, Math.max(20, pct)));\n    };\n    const handleMouseUp = () => {\n      isDragging.current = false;\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n    };\n    window.addEventListener('mousemove', handleMouseMove);\n    window.addEventListener('mouseup', handleMouseUp);\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"relative w-full max-w-lg h-48 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-950 overflow-hidden flex select-none font-mono text-xs\"\n    >\n      {/* Left Code View */}\n      <div\n        style={{ width: `${splitPos}%` }}\n        className=\"h-full bg-zinc-900/60 p-4 flex flex-col justify-between overflow-hidden\"\n      >\n        <span className=\"text-[10px] text-indigo-400 font-bold uppercase\">Code View ({Math.round(splitPos)}%)</span>\n        <div className=\"text-[11px] text-zinc-300 font-mono\">\n          const status = \"verified\";\n          <br />\n          render(&lt;Dock /&gt;);\n        </div>\n        <span className=\"text-[9px] text-zinc-600\">TypeScript 5.9</span>\n      </div>\n\n      {/* Drag Divider */}\n      <div\n        onMouseDown={handleMouseDown}\n        className=\"w-2.5 h-full bg-zinc-800 hover:bg-indigo-500 cursor-col-resize flex items-center justify-center transition-colors z-10 shrink-0\"\n      >\n        <DotsThreeVertical size={12} className=\"text-zinc-500\" />\n      </div>\n\n      {/* Right Canvas Preview */}\n      <div\n        style={{ width: `${100 - splitPos}%` }}\n        className=\"h-full bg-zinc-950 p-4 flex flex-col justify-between items-center text-center overflow-hidden\"\n      >\n        <span className=\"text-[10px] text-cyan-400 font-bold uppercase\">Live Canvas</span>\n        <div className=\"w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-500 to-cyan-400 shadow-lg\" />\n        <span className=\"text-[9px] text-zinc-600\">Interactive</span>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}