{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bounding-box-selector",
  "title": "Bounding Box Selector",
  "description": "Figma-style selection rectangle appears around any element.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/bounding-box-selector/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface BoundingBoxSelectorProps {\n  children?: ReactNode;\n  borderColor?: string;\n  handleColor?: string;\n  borderWidth?: number;\n  appearAt?: number;\n  background?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nfunction DefaultPlaceholder() {\n  return (\n    <div\n      style={{\n        width: 480,\n        height: 280,\n        background: \"white\",\n        borderRadius: 16,\n        boxShadow: \"0 12px 40px rgba(0,0,0,0.08)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        color: \"#71717a\",\n        fontFamily: FONT_FAMILY,\n        fontSize: 24,\n        fontWeight: 600,\n        letterSpacing: \"-0.02em\",\n      }}\n    >\n      Selected element\n    </div>\n  );\n}\n\nfunction Handle({\n  color,\n  style,\n}: {\n  color: string;\n  style: React.CSSProperties;\n}) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        width: 10,\n        height: 10,\n        background: \"white\",\n        border: `2px solid ${color}`,\n        borderRadius: 2,\n        ...style,\n      }}\n    />\n  );\n}\n\nexport function BoundingBoxSelector({\n  children,\n  borderColor = \"#0ea5e9\",\n  handleColor = \"#0ea5e9\",\n  borderWidth = 2,\n  appearAt = 15,\n  background = \"#fafafa\",\n  speed = 1,\n  className,\n}: BoundingBoxSelectorProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const progress = spring({\n    frame: frame - appearAt,\n    fps,\n    config: { damping: 16, stiffness: 140, mass: 0.7 },\n  });\n\n  const opacity = progress;\n  const scale = 0.96 + progress * 0.04;\n\n  const content = children ?? <DefaultPlaceholder />;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <div style={{ position: \"relative\", display: \"inline-block\" }}>\n        {content}\n        <div\n          style={{\n            position: \"absolute\",\n            inset: -8,\n            border: `${borderWidth}px solid ${borderColor}`,\n            borderRadius: 4,\n            opacity,\n            transform: `scale(${scale})`,\n            transformOrigin: \"center center\",\n            pointerEvents: \"none\",\n            willChange: \"transform, opacity\",\n          }}\n        >\n          <Handle color={handleColor} style={{ top: -6, left: -6 }} />\n          <Handle color={handleColor} style={{ top: -6, right: -6 }} />\n          <Handle color={handleColor} style={{ bottom: -6, left: -6 }} />\n          <Handle color={handleColor} style={{ bottom: -6, right: -6 }} />\n          <Handle\n            color={handleColor}\n            style={{ top: -6, left: \"50%\", marginLeft: -5 }}\n          />\n          <Handle\n            color={handleColor}\n            style={{ bottom: -6, left: \"50%\", marginLeft: -5 }}\n          />\n          <Handle\n            color={handleColor}\n            style={{ left: -6, top: \"50%\", marginTop: -5 }}\n          />\n          <Handle\n            color={handleColor}\n            style={{ right: -6, top: \"50%\", marginTop: -5 }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/bounding-box-selector.tsx"
    }
  ],
  "type": "registry:component"
}