{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "backdrop",
  "title": "Backdrop",
  "description": "Layout wrapper providing a background fill with optional padding, radius, and shadow.",
  "dependencies": [
    "@editframe/react"
  ],
  "files": [
    {
      "path": "registry/bases/editframe/components/backdrop/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nexport type BackdropFill =\n  | { type: \"color\"; value: string }\n  | { type: \"gradient\"; value: string }\n  | { type: \"image\"; src: string; fit?: \"cover\" | \"contain\" };\n\nconst getFillStyle = (fill: BackdropFill): CSSProperties => {\n  if (fill.type === \"color\") {\n    return { background: fill.value };\n  }\n  if (fill.type === \"gradient\") {\n    return { background: fill.value };\n  }\n  return {\n    backgroundImage: `url(${fill.src})`,\n    backgroundPosition: \"center\",\n    backgroundSize: fill.fit ?? \"cover\",\n  };\n};\n\nconst DefaultContent = () => (\n  <span\n    style={{\n      color: \"white\",\n      fontFamily: FONT_FAMILY,\n      fontSize: 72,\n      fontWeight: 700,\n      letterSpacing: \"-0.03em\",\n    }}\n  >\n    Backdrop\n  </span>\n);\n\nexport interface BackdropProps {\n  fill?: BackdropFill;\n  padding?: number;\n  radius?: number;\n  shadow?: string;\n  background?: string;\n  width?: number;\n  height?: number;\n  children?: ReactNode;\n  className?: string;\n  fps?: number;\n  durationInFrames?: number;\n  speed?: number;\n}\n\nexport const Backdrop = ({\n  fill,\n  padding = 10,\n  radius = 4,\n  shadow,\n  background = \"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\",\n  children,\n  className,\n  fps = 30,\n  durationInFrames = 90,\n}: BackdropProps) => {\n  const durationMs = (durationInFrames / fps) * 1000;\n\n  const fillStyle = fill ? getFillStyle(fill) : { background };\n  const backdropStyle = {\n    ...fillStyle,\n    ...(shadow ? { boxShadow: shadow } : {}),\n    alignItems: \"center\",\n    borderRadius: radius ? `${radius}%` : 0,\n    display: \"flex\",\n    inset: padding ? `${padding}%` : 0,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"absolute\",\n  } as CSSProperties;\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={\n        {\n          background: \"#f5f5f5\",\n          inset: 0,\n          position: \"absolute\",\n        } as CSSProperties\n      }\n    >\n      <div style={backdropStyle}>{children ?? <DefaultContent />}</div>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/backdrop.tsx"
    }
  ],
  "type": "registry:component"
}