{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "filmstrip-scrub",
  "type": "registry:component",
  "title": "Filmstrip scrub",
  "description": "A filmstrip scrubber with a preview area, a row of selectable frame buttons using aria-pressed, and a range slider to scrub through frames quickly.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/filmstrip-scrub.tsx",
      "type": "registry:ui",
      "target": "components/ui/filmstrip-scrub.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction FilmstripScrub({\n  frames = 12,\n  className,\n}: {\n  frames?: number\n  className?: string\n}) {\n  const [i, setI] = React.useState(3)\n  return (\n    <div data-slot=\"filmstrip-scrub\" data-tier=\"premium\" className={cn(\"space-y-3\", className)}>\n      <div className=\"aspect-[16/9] overflow-hidden rounded-xl border border-border bg-sunken\">\n        <div className=\"flex h-full items-center justify-center\">\n          <div className=\"text-center\">\n            <p className=\"font-mono text-xs text-fg-muted\">FRAME</p>\n            <p className=\"text-4xl font-medium tabular-nums text-fg\">{String(i + 1).padStart(2, \"0\")}</p>\n          </div>\n        </div>\n      </div>\n      <div\n        role=\"group\"\n        aria-label=\"Filmstrip\"\n        className=\"flex gap-1 overflow-x-auto pb-1\"\n      >\n        {Array.from({ length: frames }, (_, n) => (\n          <button\n            key={n}\n            type=\"button\"\n            aria-label={`Frame ${n + 1}`}\n            aria-pressed={n === i}\n            onClick={() => setI(n)}\n            className={cn(\n              \"h-14 w-20 shrink-0 rounded-md border outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n              n === i ? \"border-accent bg-accent/10\" : \"border-border bg-surface hover:border-fg-subtle\"\n            )}\n          />\n        ))}\n      </div>\n      <label className=\"block text-xs text-fg-muted\" htmlFor=\"scrub\">\n        Scrub\n      </label>\n      <input\n        id=\"scrub\"\n        type=\"range\"\n        min={0}\n        max={frames - 1}\n        value={i}\n        onChange={(e) => setI(Number(e.target.value))}\n        className=\"w-full accent-accent\"\n      />\n    </div>\n  )\n}\nexport { FilmstripScrub }\n"
    }
  ]
}