{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scan-fix",
  "title": "Scan Fix",
  "description": "A scan band sweeps down a screen: below it the old build with red redlines, above it the fixed build with blue ones, and the version chip flips.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/audit-core"],
  "files": [
    {
      "path": "registry/remocn/scan-fix/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { AbsoluteFill } from \"remotion\";\nimport {\n  AUDIT_COLORS,\n  AuditClock,\n  DEMO,\n  DemoDashboard,\n  easeInOut,\n  FONT,\n  IssueMarks,\n  MeasureMarks,\n  ScanBand,\n  SplitAt,\n  useAuditFrame,\n  VersionChip,\n} from \"@/lib/remocn/audit-core\";\n\nexport type ScanFixProps = {\n  /** Frame before the fix, 1280x720. Defaults to the demo dashboard with red redlines. */\n  before?: ReactNode;\n  /** Frame after the fix, same size. Defaults to the fixed dashboard with blue redlines. */\n  after?: ReactNode;\n  /** Name next to the version chip. Empty hides the chip. */\n  brand?: string;\n  /** Version chip text before and after the band passes it. */\n  versions?: [string, string];\n  scanColor?: string;\n  beforeColor?: string;\n  afterColor?: string;\n  background?: string;\n  speed?: number;\n};\n\nexport const scanFixDefaults = {\n  brand: \"Synergy\",\n  versions: [\"v1.0\", \"v2.0\"] as [string, string],\n  scanColor: AUDIT_COLORS.scan,\n  beforeColor: AUDIT_COLORS.audit,\n  afterColor: AUDIT_COLORS.fix,\n  background: AUDIT_COLORS.stage,\n  speed: 1,\n};\n\nexport const scanFixLength = 100;\n\nconst SCAN_START = 18;\nconst SCAN_LENGTH = 80;\n\nexport function ScanFix(props: ScanFixProps) {\n  const { speed = 1 } = props;\n  return (\n    <AuditClock speed={speed}>\n      <Scene {...props} />\n    </AuditClock>\n  );\n}\n\nfunction DemoBefore({ color }: { color: string }) {\n  return (\n    <>\n      <DemoDashboard v={1} />\n      <MeasureMarks\n        measures={DEMO.before.measures}\n        radii={DEMO.before.radii}\n        color={color}\n        start={-200}\n      />\n      <IssueMarks issues={DEMO.before.issues} color={color} start={-200} />\n    </>\n  );\n}\n\nfunction DemoAfter({ color }: { color: string }) {\n  return (\n    <>\n      <DemoDashboard v={2} />\n      <MeasureMarks\n        measures={DEMO.after.measures}\n        radii={DEMO.after.radii}\n        color={color}\n        start={-200}\n      />\n    </>\n  );\n}\n\nfunction Scene({\n  before,\n  after,\n  brand = scanFixDefaults.brand,\n  versions = scanFixDefaults.versions,\n  scanColor = scanFixDefaults.scanColor,\n  beforeColor = scanFixDefaults.beforeColor,\n  afterColor = scanFixDefaults.afterColor,\n  background = scanFixDefaults.background,\n}: ScanFixProps) {\n  const frame = useAuditFrame();\n  const y = easeInOut(\n    frame,\n    [SCAN_START, SCAN_START + SCAN_LENGTH],\n    [-20, 760],\n  );\n  const band = easeInOut(\n    frame,\n    [\n      SCAN_START - 4,\n      SCAN_START + 2,\n      SCAN_START + SCAN_LENGTH - 6,\n      SCAN_START + SCAN_LENGTH + 2,\n    ],\n    [0, 1, 1, 0],\n  );\n  return (\n    <AbsoluteFill style={{ background, fontFamily: FONT }}>\n      <SplitAt\n        y={y}\n        bottom={before ?? <DemoBefore color={beforeColor} />}\n        top={after ?? <DemoAfter color={afterColor} />}\n      />\n      {brand && (\n        <VersionChip\n          brand={brand}\n          versions={versions}\n          fixed={y > 36}\n          colors={[beforeColor, afterColor]}\n        />\n      )}\n      <ScanBand y={y} color={scanColor} opacity={band} />\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/scan-fix.tsx"
    }
  ],
  "type": "registry:component"
}