{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "backdrop",
  "title": "Backdrop",
  "description": "A dither texture behind a section or fixed behind the whole viewport, without affecting layout.",
  "dependencies": [],
  "registryDependencies": [
    "https://dotgrain.space/r/engine.json"
  ],
  "files": [
    {
      "path": "registry/ui/backdrop.tsx",
      "content": "\"use client\";\n\nimport type { CSSProperties, ReactNode, Ref } from \"react\";\nimport { Quantize } from \"@/lib/dotgrain/quantize\";\nimport type { DitherTokens, FieldName } from \"@/lib/dotgrain/types\";\n\nexport type BackdropProps = Partial<Omit<DitherTokens, \"mode\" | \"glyphs\">> & {\n  field?: Exclude<FieldName, \"progress\" | \"frame\">;\n  /** Field parameters, e.g. `{ scale: 3 }` for noise. */\n  params?: Record<string, number>;\n  /** Cover the viewport behind everything instead of this element's box. */\n  fixed?: boolean;\n  /** Announces the texture as one image; omit when decorative. */\n  label?: string;\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n};\n\nexport function Backdrop({ field = \"noise\", params, fixed, label, children, className, style, ref, ...tokens }: BackdropProps) {\n  return (\n    <div ref={ref} className={className} style={{ position: \"relative\", ...style }}>\n      {/* Absolute or fixed, so the texture never takes part in layout. */}\n      <Quantize\n        source={{ kind: \"field\", field, params }}\n        label={label}\n        {...tokens}\n        mode=\"dither\"\n        style={fixed ? { position: \"fixed\", inset: 0, zIndex: -1, pointerEvents: \"none\" } : { position: \"absolute\", inset: 0 }}\n      />\n      {children !== undefined && <div style={{ position: \"relative\" }}>{children}</div>}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "modes": [
      "dither"
    ]
  },
  "categories": [
    "surface"
  ],
  "type": "registry:ui"
}