{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "live-code-compilation",
  "title": "Live Code Compilation",
  "description": "Split-screen where typed code on the left snaps a live UI preview on the right, HMR-style.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/live-code-compilation/index.tsx",
      "content": "\"use client\";\n\nimport { useCurrentFrame } from \"remotion\";\n\nexport interface LiveCodeCompilationProps {\n  accentColor?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO_FAMILY =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace\";\n\ninterface UIState {\n  background?: string;\n  color?: string;\n  padding?: string;\n  borderRadius?: string;\n  fontWeight?: number;\n  label?: string;\n}\n\ninterface CodeEvent {\n  code: string;\n  ui: UIState;\n}\n\nconst EVENTS: CodeEvent[] = [\n  {\n    code: \"export function Button() {\\n  return (\\n    <button\",\n    ui: {},\n  },\n  { code: \"\\n      style={{\", ui: {} },\n  {\n    code: '\\n        background: \"#3b82f6\",',\n    ui: { background: \"#3b82f6\" },\n  },\n  {\n    code: '\\n        color: \"white\",',\n    ui: { color: \"white\" },\n  },\n  {\n    code: '\\n        padding: \"12px 28px\",',\n    ui: { padding: \"12px 28px\" },\n  },\n  {\n    code: '\\n        borderRadius: \"999px\",',\n    ui: { borderRadius: \"999px\" },\n  },\n  {\n    code: \"\\n        fontWeight: 600,\",\n    ui: { fontWeight: 600 },\n  },\n  {\n    code: \"\\n      }}\\n    >\\n      Ship it\\n    </button>\\n  );\\n}\",\n    ui: { label: \"Ship it\" },\n  },\n];\n\nconst CHARS_PER_FRAME = 1.6;\nconst DWELL_FRAMES = 5;\nconst INITIAL_OFFSET = 8;\n\ninterface TimelineEntry extends CodeEvent {\n  start: number;\n  end: number;\n}\n\nconst TIMELINE: TimelineEntry[] = (() => {\n  let cursor = INITIAL_OFFSET;\n  return EVENTS.map((ev) => {\n    const start = cursor;\n    const end = start + Math.ceil(ev.code.length / CHARS_PER_FRAME);\n    cursor = end + DWELL_FRAMES;\n    return { ...ev, start, end };\n  });\n})();\nconst TIMELINE_END = TIMELINE[TIMELINE.length - 1].end;\n\nfunction highlightLine(line: string, accentColor: string) {\n  // very simple tokenizer: keywords, strings, props\n  const tokens: { text: string; color: string }[] = [];\n  const regex =\n    /(\\bexport\\b|\\bfunction\\b|\\breturn\\b)|(\"[^\"]*\")|(\\b[a-zA-Z_][a-zA-Z0-9_]*)(?=:)|(\\{|\\}|\\(|\\)|<|>|\\/)|([0-9]+)/g;\n  let lastIndex = 0;\n  let m: RegExpExecArray | null = regex.exec(line);\n  while (m !== null) {\n    if (m.index > lastIndex) {\n      tokens.push({\n        text: line.slice(lastIndex, m.index),\n        color: \"#e4e4e7\",\n      });\n    }\n    if (m[1]) tokens.push({ text: m[1], color: \"#c084fc\" });\n    else if (m[2]) tokens.push({ text: m[2], color: \"#86efac\" });\n    else if (m[3]) tokens.push({ text: m[3], color: accentColor });\n    else if (m[4]) tokens.push({ text: m[4], color: \"#71717a\" });\n    else if (m[5]) tokens.push({ text: m[5], color: \"#fbbf24\" });\n    lastIndex = regex.lastIndex;\n    m = regex.exec(line);\n  }\n  if (lastIndex < line.length) {\n    tokens.push({ text: line.slice(lastIndex), color: \"#e4e4e7\" });\n  }\n  return tokens;\n}\n\nexport function LiveCodeCompilation({\n  accentColor = \"#3b82f6\",\n  speed = 1,\n  className,\n}: LiveCodeCompilationProps) {\n  const frame = useCurrentFrame() * speed;\n\n  // Build the visible code character-by-character from the auto-staggered\n  // timeline. UI state only flips once a fragment is fully typed.\n  let visibleCode = \"\";\n  const ui: UIState = {};\n  for (const t of TIMELINE) {\n    if (frame < t.start) break;\n    const elapsed = frame - t.start;\n    const charsTyped = Math.min(\n      t.code.length,\n      Math.floor(elapsed * CHARS_PER_FRAME),\n    );\n    visibleCode += t.code.slice(0, charsTyped);\n    if (frame >= t.end) Object.assign(ui, t.ui);\n  }\n\n  const lines = visibleCode.split(\"\\n\");\n  const buttonLabel = ui.label ?? \"Button\";\n\n  // Blinking caret while typing is still in progress.\n  const cursorVisible =\n    frame < TIMELINE_END && Math.floor(frame / 12) % 2 === 0;\n  const lastLineIndex = lines.length - 1;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"#070708\",\n        overflow: \"hidden\",\n        fontFamily: FONT_FAMILY,\n        display: \"flex\",\n      }}\n    >\n      {/* subtle backdrop gradient */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background:\n            \"radial-gradient(ellipse at 20% 30%, rgba(59,130,246,0.08), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(168,85,247,0.06), transparent 60%)\",\n        }}\n      />\n\n      {/* LEFT: Glass code window */}\n      <div\n        style={{\n          flex: 1,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          padding: 48,\n          position: \"relative\",\n        }}\n      >\n        <div\n          style={{\n            width: \"100%\",\n            maxWidth: 560,\n            position: \"relative\",\n            borderRadius: 14,\n            padding: 1,\n            background:\n              \"linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%)\",\n            boxShadow: \"0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4)\",\n          }}\n        >\n          <div\n            style={{\n              borderRadius: 13,\n              background: \"rgba(12,12,14,0.85)\",\n              backdropFilter: \"blur(20px)\",\n              overflow: \"hidden\",\n            }}\n          >\n            {/* Title bar */}\n            <div\n              style={{\n                height: 38,\n                display: \"flex\",\n                alignItems: \"center\",\n                padding: \"0 16px\",\n                borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n                gap: 8,\n              }}\n            >\n              <div\n                style={{\n                  width: 11,\n                  height: 11,\n                  borderRadius: 6,\n                  background: \"#ff5f57\",\n                  opacity: 0.6,\n                }}\n              />\n              <div\n                style={{\n                  width: 11,\n                  height: 11,\n                  borderRadius: 6,\n                  background: \"#febc2e\",\n                  opacity: 0.6,\n                }}\n              />\n              <div\n                style={{\n                  width: 11,\n                  height: 11,\n                  borderRadius: 6,\n                  background: \"#28c840\",\n                  opacity: 0.6,\n                }}\n              />\n              <div\n                style={{\n                  marginLeft: 12,\n                  fontSize: 12,\n                  color: \"rgba(255,255,255,0.45)\",\n                  fontFamily: MONO_FAMILY,\n                }}\n              >\n                Button.tsx\n              </div>\n            </div>\n            {/* Code body */}\n            <div\n              style={{\n                padding: \"20px 22px\",\n                fontFamily: MONO_FAMILY,\n                fontSize: 14,\n                lineHeight: 1.65,\n                color: \"#e4e4e7\",\n                minHeight: 360,\n                boxShadow: \"inset 0 1px 0 rgba(255,255,255,0.04)\",\n              }}\n            >\n              {lines.map((line, i) => {\n                const tokens = highlightLine(line, accentColor);\n                const isLast = i === lastLineIndex;\n                return (\n                  <div key={i} style={{ display: \"flex\", whiteSpace: \"pre\" }}>\n                    <span\n                      style={{\n                        width: 28,\n                        color: \"rgba(255,255,255,0.2)\",\n                        userSelect: \"none\",\n                        flexShrink: 0,\n                      }}\n                    >\n                      {i + 1}\n                    </span>\n                    <span>\n                      {tokens.length === 0 ? (\n                        <span> </span>\n                      ) : (\n                        tokens.map((t, j) => (\n                          <span key={j} style={{ color: t.color }}>\n                            {t.text}\n                          </span>\n                        ))\n                      )}\n                      {isLast && cursorVisible && (\n                        <span\n                          style={{\n                            display: \"inline-block\",\n                            width: 8,\n                            height: 16,\n                            marginLeft: 1,\n                            verticalAlign: \"text-bottom\",\n                            background: accentColor,\n                          }}\n                        />\n                      )}\n                    </span>\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* RIGHT: Live preview */}\n      <div\n        style={{\n          flex: 1,\n          position: \"relative\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          borderLeft: \"1px solid rgba(255,255,255,0.05)\",\n          background:\n            \"repeating-conic-gradient(rgba(255,255,255,0.018) 0deg 90deg, transparent 90deg 180deg) 0 0 / 28px 28px\",\n        }}\n      >\n        {/* Preview label */}\n        <div\n          style={{\n            position: \"absolute\",\n            top: 24,\n            left: 24,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8,\n          }}\n        >\n          <div\n            style={{\n              width: 8,\n              height: 8,\n              borderRadius: 4,\n              background: \"#22c55e\",\n              boxShadow: \"0 0 8px #22c55e\",\n            }}\n          />\n          <div\n            style={{\n              fontSize: 11,\n              fontFamily: MONO_FAMILY,\n              color: \"rgba(255,255,255,0.5)\",\n              textTransform: \"uppercase\",\n              letterSpacing: \"0.08em\",\n            }}\n          >\n            Preview · HMR\n          </div>\n        </div>\n\n        {/* The button — all styles applied with no transition */}\n        <button\n          type=\"button\"\n          style={{\n            background: ui.background ?? \"rgba(255,255,255,0.06)\",\n            color: ui.color ?? \"rgba(255,255,255,0.4)\",\n            padding: ui.padding ?? \"10px 20px\",\n            borderRadius: ui.borderRadius ?? \"4px\",\n            fontWeight: ui.fontWeight ?? 400,\n            fontSize: 18,\n            fontFamily: FONT_FAMILY,\n            border: ui.background\n              ? \"none\"\n              : \"1px dashed rgba(255,255,255,0.15)\",\n            cursor: \"pointer\",\n            transition: \"none\",\n            boxShadow: ui.background\n              ? `0 10px 30px ${ui.background}55, 0 0 0 1px rgba(255,255,255,0.08)`\n              : \"none\",\n          }}\n        >\n          {buttonLabel}\n        </button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/live-code-compilation.tsx"
    }
  ],
  "type": "registry:component"
}