{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "audit-boxes",
  "title": "Audit Boxes",
  "description": "Off-spec elements of a UI get traced with red boxes, each with the fix it needs, while an issue counter ticks up.",
  "dependencies": ["remotion"],
  "registryDependencies": ["@remocn/audit-core"],
  "files": [
    {
      "path": "registry/remocn/audit-boxes/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { AbsoluteFill } from \"remotion\";\nimport {\n  AUDIT_COLORS,\n  AuditClock,\n  DEMO,\n  DEMO_WINDOW,\n  DemoDashboard,\n  FONT,\n  type Issue,\n  IssueMarks,\n  MONO,\n  progress,\n  useAuditFrame,\n} from \"@/lib/remocn/audit-core\";\n\nexport type AuditBoxesProps = {\n  /** UI to audit, laid out in a 1280x720 frame. Defaults to a demo calendar dashboard. */\n  children?: ReactNode;\n  /** Off-spec elements, in frame pixels, with the fix each one needs. */\n  issues?: Issue[];\n  color?: string;\n  background?: string;\n  /** Word after the running count. Empty hides the counter. */\n  counterLabel?: string;\n  /** Frames between one box and the next. */\n  stagger?: number;\n  speed?: number;\n};\n\nexport const auditBoxesDefaults = {\n  color: AUDIT_COLORS.audit,\n  background: AUDIT_COLORS.stage,\n  counterLabel: \"issues\",\n  stagger: 4,\n  speed: 1,\n};\n\nexport const auditBoxesLength = 56;\n\nconst START = 10;\n\nexport function AuditBoxes(props: AuditBoxesProps) {\n  const { speed = 1 } = props;\n  return (\n    <AuditClock speed={speed}>\n      <Scene {...props} />\n    </AuditClock>\n  );\n}\n\nfunction Scene({\n  children,\n  issues = children ? [] : DEMO.before.issues,\n  color = auditBoxesDefaults.color,\n  background = auditBoxesDefaults.background,\n  counterLabel = auditBoxesDefaults.counterLabel,\n  stagger = auditBoxesDefaults.stagger,\n}: AuditBoxesProps) {\n  return (\n    <AbsoluteFill style={{ background, fontFamily: FONT }}>\n      {children ?? <DemoDashboard v={1} />}\n      <IssueMarks\n        issues={issues}\n        color={color}\n        start={START}\n        stagger={stagger}\n      />\n      {counterLabel && (\n        <Counter\n          total={issues.length}\n          stagger={stagger}\n          color={color}\n          label={counterLabel}\n        />\n      )}\n    </AbsoluteFill>\n  );\n}\n\n/** Count chip above the frame's top right that ticks up with every box. */\nfunction Counter({\n  total,\n  stagger,\n  color,\n  label,\n}: {\n  total: number;\n  stagger: number;\n  color: string;\n  label: string;\n}) {\n  const frame = useAuditFrame();\n  const count = Math.min(\n    total,\n    Math.max(0, Math.floor((frame - START) / stagger) + 1),\n  );\n  const show = progress(frame, START - 6, 10);\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        right: 1280 - DEMO_WINDOW.x - DEMO_WINDOW.w,\n        top: 24,\n        opacity: show,\n        transform: `translateY(${(1 - show) * -6}px)`,\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 8,\n        fontFamily: MONO,\n        fontSize: 12,\n        color: AUDIT_COLORS.ink,\n      }}\n    >\n      <span\n        style={{\n          background: color,\n          color: \"#fff\",\n          borderRadius: 4,\n          padding: \"2px 7px\",\n          fontWeight: 600,\n          fontVariantNumeric: \"tabular-nums\",\n        }}\n      >\n        {count}\n      </span>\n      {label}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/audit-boxes.tsx"
    }
  ],
  "type": "registry:component"
}