{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-accordion",
  "title": "Code Accordion",
  "description": "A code window that springs a range of lines closed and replaces them with a \"N lines collapsed\" placeholder.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/code-accordion/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface CodeAccordionProps {\n  lines?: string[];\n  collapseRange?: [number, number];\n  collapseAt?: number;\n  title?: string;\n  fontSize?: number;\n  width?: number;\n  background?: string;\n  cardColor?: string;\n  textColor?: string;\n  mutedColor?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_MONO =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace\";\n\nconst DEFAULT_LINES = [\n  \"export function processOrders(orders) {\",\n  \"  const valid = [];\",\n  \"  for (const order of orders) {\",\n  \"    if (!order.id) continue;\",\n  \"    if (!order.customer) continue;\",\n  \"    if (!order.items?.length) continue;\",\n  \"    if (order.total <= 0) continue;\",\n  \"    if (order.status === 'cancelled') continue;\",\n  \"    if (order.status === 'refunded') continue;\",\n  \"    const enriched = enrich(order);\",\n  \"    const validated = validate(enriched);\",\n  \"    if (!validated.ok) continue;\",\n  \"    const priced = price(validated.value);\",\n  \"    const taxed = applyTax(priced);\",\n  \"    const shipped = applyShipping(taxed);\",\n  \"    valid.push(shipped);\",\n  \"  }\",\n  \"  return valid;\",\n  \"}\",\n];\n\nexport function CodeAccordion({\n  lines = DEFAULT_LINES,\n  collapseRange = [3, 14],\n  collapseAt = 30,\n  title = \"process-orders.ts\",\n  fontSize = 16,\n  width = 720,\n  background = \"#050505\",\n  cardColor = \"#0a0a0a\",\n  textColor = \"#e4e4e7\",\n  mutedColor = \"#52525b\",\n  speed = 1,\n  className,\n}: CodeAccordionProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const lineHeight = Math.round(fontSize * 1.55);\n  const [start, end] = collapseRange;\n  const collapsedCount = Math.max(0, end - start + 1);\n\n  // Spring drives BOTH the inner collapse height AND a tiny y-bounce on the\n  // window so the accordion feels like it has weight.\n  const collapseProgress = spring({\n    frame: frame - collapseAt,\n    fps,\n    config: { damping: 10, stiffness: 110, mass: 1 },\n  });\n\n  const collapsedHeight = interpolate(\n    collapseProgress,\n    [0, 1],\n    [collapsedCount * lineHeight, lineHeight], // collapses down to the placeholder bar's height\n  );\n\n  const collapsedOpacity = interpolate(collapseProgress, [0, 0.6], [1, 0], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const placeholderOpacity = interpolate(collapseProgress, [0.4, 1], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const before = lines.slice(0, start);\n  const collapsed = lines.slice(start, end + 1);\n  const after = lines.slice(end + 1);\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontFamily: FONT_MONO,\n      }}\n    >\n      <div\n        style={{\n          width,\n          background: cardColor,\n          borderRadius: 14,\n          overflow: \"hidden\",\n          boxShadow:\n            \"0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05)\",\n          border: \"1px solid rgba(255,255,255,0.06)\",\n        }}\n      >\n        {/* Chrome */}\n        <div\n          style={{\n            height: 38,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8,\n            padding: \"0 14px\",\n            borderBottom: \"1px solid rgba(255,255,255,0.05)\",\n          }}\n        >\n          <Light color=\"#ff5f57\" />\n          <Light color=\"#febc2e\" />\n          <Light color=\"#28c840\" />\n          <div\n            style={{\n              flex: 1,\n              textAlign: \"center\",\n              color: mutedColor,\n              fontSize: 12,\n            }}\n          >\n            {title}\n          </div>\n        </div>\n\n        {/* Code body */}\n        <div style={{ padding: \"16px 0\", fontSize, lineHeight: 1.55 }}>\n          {before.map((line, i) => (\n            <Line\n              key={`b-${i}`}\n              line={line}\n              index={i}\n              lineHeight={lineHeight}\n              textColor={textColor}\n              mutedColor={mutedColor}\n            />\n          ))}\n\n          {/* Collapsing region */}\n          <div\n            style={{\n              position: \"relative\",\n              height: collapsedHeight,\n              overflow: \"hidden\",\n              transition: \"none\",\n            }}\n          >\n            <div style={{ opacity: collapsedOpacity }}>\n              {collapsed.map((line, i) => (\n                <Line\n                  key={`c-${i}`}\n                  line={line}\n                  index={start + i}\n                  lineHeight={lineHeight}\n                  textColor={textColor}\n                  mutedColor={mutedColor}\n                />\n              ))}\n            </div>\n\n            {/* Placeholder bar — sits at the bottom so it sits on the same\n                baseline as the collapsed-into row. */}\n            <div\n              style={{\n                position: \"absolute\",\n                left: 0,\n                right: 0,\n                bottom: 0,\n                height: lineHeight,\n                display: \"flex\",\n                alignItems: \"center\",\n                paddingLeft: 56,\n                color: mutedColor,\n                fontStyle: \"italic\",\n                opacity: placeholderOpacity,\n              }}\n            >\n              ⋯ {collapsedCount} lines collapsed\n            </div>\n          </div>\n\n          {after.map((line, i) => (\n            <Line\n              key={`a-${i}`}\n              line={line}\n              index={end + 1 + i}\n              lineHeight={lineHeight}\n              textColor={textColor}\n              mutedColor={mutedColor}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction Light({ color }: { color: string }) {\n  return (\n    <div\n      style={{\n        width: 11,\n        height: 11,\n        borderRadius: \"50%\",\n        background: color,\n        opacity: 0.6,\n      }}\n    />\n  );\n}\n\nfunction Line({\n  line,\n  index,\n  lineHeight,\n  textColor,\n  mutedColor,\n}: {\n  line: string;\n  index: number;\n  lineHeight: number;\n  textColor: string;\n  mutedColor: string;\n}) {\n  return (\n    <div\n      style={{\n        height: lineHeight,\n        display: \"flex\",\n        alignItems: \"center\",\n        whiteSpace: \"pre\",\n        color: textColor,\n      }}\n    >\n      <span\n        style={{\n          width: 56,\n          textAlign: \"right\",\n          paddingRight: 16,\n          color: mutedColor,\n          userSelect: \"none\",\n        }}\n      >\n        {index + 1}\n      </span>\n      <span>{line}</span>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/code-accordion.tsx"
    }
  ],
  "type": "registry:component"
}