{
  "$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/bases/editframe/components/bounding-box-selector/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { ReactNode, CSSProperties } from \"react\";\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  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst DefaultPlaceholder = () => (\n  <div\n    style={{\n      alignItems: \"center\",\n      background: \"white\",\n      borderRadius: 16,\n      boxShadow: \"0 12px 40px rgba(0,0,0,0.08)\",\n      color: \"#71717a\",\n      display: \"flex\",\n      fontFamily: FONT_FAMILY,\n      fontSize: 24,\n      fontWeight: 600,\n      height: 280,\n      justifyContent: \"center\",\n      letterSpacing: \"-0.02em\",\n      width: 480,\n    }}\n  >\n    Selected element\n  </div>\n);\n\nconst Handle = ({ color, style }: { color: string; style: CSSProperties }) => (\n  <div\n    style={{\n      background: \"white\",\n      border: `2px solid ${color}`,\n      borderRadius: 2,\n      height: 10,\n      position: \"absolute\",\n      width: 10,\n      ...style,\n    }}\n  />\n);\n\nexport const BoundingBoxSelector = ({\n  children,\n  borderColor = \"#0ea5e9\",\n  handleColor = \"#0ea5e9\",\n  borderWidth = 2,\n  appearAt = 15,\n  background = \"#fafafa\",\n  speed = 1,\n  className,\n  fps = 30,\n  durationInFrames = 90,\n  width = 1000,\n  height = 500,\n}: BoundingBoxSelectorProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const frameMs = 1000 / fps;\n  const appearDelayMs = (appearAt * frameMs) / safeSpeed;\n  const animationDurationMs = (durationMs - appearDelayMs) / safeSpeed;\n\n  const content = children ?? <DefaultPlaceholder />;\n\n  const containerStyle: CSSProperties = {\n    alignItems: \"center\",\n    background,\n    display: \"flex\",\n    height,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width,\n  };\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-bbox-appear {\n            from {\n              opacity: 0;\n              transform: scale(0.96);\n            }\n            to {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n        `}</style>\n        <div style={{ display: \"inline-block\", position: \"relative\" }}>\n          {content}\n          <div\n            style={{\n              animation: `framecn-bbox-appear ${animationDurationMs}ms cubic-bezier(0.16, 1, 0.3, 1) ${appearDelayMs}ms backwards`,\n              border: `${borderWidth}px solid ${borderColor}`,\n              borderRadius: 4,\n              inset: -8,\n              pointerEvents: \"none\",\n              position: \"absolute\",\n              transformOrigin: \"center center\",\n              willChange: \"transform, opacity\",\n            }}\n          >\n            <Handle color={handleColor} style={{ left: -6, top: -6 }} />\n            <Handle color={handleColor} style={{ right: -6, top: -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={{ left: \"50%\", marginLeft: -5, top: -6 }}\n            />\n            <Handle\n              color={handleColor}\n              style={{ bottom: -6, left: \"50%\", marginLeft: -5 }}\n            />\n            <Handle\n              color={handleColor}\n              style={{ left: -6, marginTop: -5, top: \"50%\" }}\n            />\n            <Handle\n              color={handleColor}\n              style={{ marginTop: -5, right: -6, top: \"50%\" }}\n            />\n          </div>\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/bounding-box-selector.tsx"
    }
  ],
  "type": "registry:component"
}