{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "core-sum",
  "title": "Core Sum",
  "description": "A monospace figure sums up to 2,097,152 beside a divider and a small caption.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "files": [
    {
      "path": "registry/remocn/core-sum/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont as loadSaira } from \"@remotion/google-fonts/Saira\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  AbsoluteFill,\n  continueRender,\n  delayRender,\n  Easing,\n  interpolate,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nconst saira = loadSaira(\"normal\", {\n  weights: [\"400\", \"500\"],\n  subsets: [\"latin\"],\n});\n\nexport interface CoreSumProps {\n  value?: number;\n  parts?: number;\n  prefix?: string;\n  suffix?: string;\n  label?: string;\n  partLabel?: string;\n  accent?: string;\n  background?: string;\n  speed?: number;\n  theme?: \"dark\" | \"light\";\n}\n\nconst THEMES = {\n  dark: {\n    bg: \"#000000\",\n    ink: \"#F2F4EE\",\n    small: \"#9A9D94\",\n    rule: \"rgba(255,255,255,0.18)\",\n    accent: \"#76B900\",\n  },\n  light: {\n    bg: \"#FFFFFF\",\n    ink: \"#0B0D08\",\n    small: \"#5E6158\",\n    rule: \"rgba(0,0,0,0.18)\",\n    accent: \"#4C7A00\",\n  },\n} as const;\n\nconst FONT_PX = 200;\nconst TRACK = -0.02;\n\nconst COUNT_LEN = 36;\nconst STAGGER = 2;\nconst FIRST_MERGE = 48;\nconst MERGE_GAP = 16;\nconst MERGE_LEN = 15;\n\nconst EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);\nconst EASE_IO = Easing.bezier(0.65, 0, 0.35, 1);\nconst EASE_MERGE = Easing.bezier(0.6, 0, 0.25, 1);\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\nconst WEIGHTS = [\n  0.142, 0.118, 0.131, 0.109, 0.127, 0.121, 0.138, 0.114, 0.126, 0.133, 0.112,\n  0.129, 0.117, 0.136, 0.11, 0.124,\n];\n\nfunction format(v: number) {\n  const r = Math.round(Math.abs(v));\n  return `${v < 0 ? \"−\" : \"\"}${String(r).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}`;\n}\n\nfunction pad(n: number) {\n  return String(n).padStart(2, \"0\");\n}\n\ninterface Metrics {\n  digit: number;\n  chars: Record<string, number>;\n  cap: number;\n  base: number;\n}\n\nfunction measure(extra: string): Metrics {\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) throw new Error(\"core-sum: no 2d context\");\n  ctx.font = `500 ${FONT_PX}px \"${saira.fontFamily}\"`;\n  ctx.fontKerning = \"none\";\n  const digit = ctx.measureText(\"0\").width / FONT_PX;\n  const chars: Record<string, number> = {};\n  for (const ch of Array.from(`,.−${extra}`)) {\n    chars[ch] = ctx.measureText(ch).width / FONT_PX;\n  }\n  const m = ctx.measureText(\"0123456789\");\n  const asc = m.fontBoundingBoxAscent / FONT_PX;\n  const desc = m.fontBoundingBoxDescent / FONT_PX;\n  return {\n    digit,\n    chars,\n    cap: m.actualBoundingBoxAscent / FONT_PX,\n    base: (1 - (asc + desc)) / 2 + asc,\n  };\n}\n\nfunction useMetrics(extra: string) {\n  const [metrics, setMetrics] = useState<Metrics | null>(null);\n  const [handle] = useState(() => delayRender(\"core-sum: measuring\"));\n  const released = useRef(false);\n  useEffect(() => {\n    let live = true;\n    Promise.all([\n      saira.waitUntilDone(),\n      document.fonts.load(`500 100px \"${saira.fontFamily}\"`),\n      document.fonts.load(`400 100px \"${saira.fontFamily}\"`),\n    ])\n      .catch(() => undefined)\n      .then(() => {\n        if (!live) return;\n        setMetrics(measure(extra));\n        if (!released.current) {\n          released.current = true;\n          continueRender(handle);\n        }\n      });\n    return () => {\n      live = false;\n    };\n  }, [extra, handle]);\n  return metrics;\n}\n\nfunction widthOf(m: Metrics, s: string) {\n  const chars = Array.from(s);\n  let w = 0;\n  for (const ch of chars) {\n    w += ch >= \"0\" && ch <= \"9\" ? m.digit : (m.chars[ch] ?? m.digit * 0.6);\n  }\n  return w + TRACK * Math.max(0, chars.length - 1);\n}\n\nexport function CoreSum({\n  value = 2097152,\n  parts = 8,\n  prefix = \"\",\n  suffix = \"\",\n  label = \"frames per night, every core busy\",\n  partLabel = \"core\",\n  accent,\n  background,\n  speed = 1,\n  theme = \"dark\",\n}: CoreSumProps) {\n  const t = useCurrentFrame() * speed;\n  const { width: W, height: H } = useVideoConfig();\n  const c = THEMES[theme];\n  const bg = background ?? c.bg;\n  const hue = accent ?? c.accent;\n\n  const count = useMemo(() => {\n    const p = Math.round(Math.log2(Math.max(2, parts)));\n    return 2 ** Math.max(1, Math.min(4, p));\n  }, [parts]);\n  const levels = Math.round(Math.log2(count));\n\n  const leaves = useMemo(() => {\n    const w = WEIGHTS.slice(0, count);\n    const sum = w.reduce((a, b) => a + b, 0);\n    const round = Math.abs(value) >= 1000 ? 1000 : 1;\n    const out = w.map((x) => Math.round((value * x) / sum / round) * round);\n    out[0] += value - out.reduce((a, b) => a + b, 0);\n    return out;\n  }, [count, value]);\n\n  const m = useMetrics(`${prefix}${suffix}`);\n\n  if (!m) {\n    return <div style={{ position: \"absolute\", inset: 0, background: bg }} />;\n  }\n\n  const str = (v: number) => `${prefix}${format(v)}${suffix}`;\n  const portrait = W < H;\n  const margin = Math.round(Math.min(W, H) * 0.075);\n  const top = portrait ? H * 0.2 : margin;\n  const regionH = portrait ? H * 0.6 : H - margin * 2;\n  const colX = margin + W * (portrait ? 0.3 : 0.27);\n  const valX = colX + Math.min(W, H) * 0.04;\n  const valW = W - margin - valX;\n\n  const sums: number[][] = [leaves];\n  for (let l = 1; l <= levels; l++) {\n    const prev = sums[l - 1];\n    const next: number[] = [];\n    for (let i = 0; i < prev.length; i += 2) next.push(prev[i] + prev[i + 1]);\n    sums.push(next);\n  }\n\n  const sizeAt = (l: number) => {\n    const n = count / 2 ** l;\n    const pitch = regionH / n;\n    const widest = Math.max(...sums[l].map((v) => widthOf(m, str(v))));\n    return Math.min(\n      pitch * (l === levels ? 0.5 : 0.52),\n      (valW * 0.96) / widest,\n      l === levels ? H * 0.34 : H * 0.2,\n    );\n  };\n  const rowY = (l: number, i: number) => {\n    const pitch = regionH / (count / 2 ** l);\n    return top + (i + 0.5) * pitch;\n  };\n\n  const mergeAt = (l: number) => FIRST_MERGE + (l - 1) * MERGE_GAP;\n  const mergeP = (l: number) =>\n    interpolate(t, [mergeAt(l), mergeAt(l) + MERGE_LEN], [0, 1], {\n      ...CLAMP,\n      easing: EASE_MERGE,\n    });\n  let level = 0;\n  for (let l = 1; l <= levels; l++) if (t >= mergeAt(l)) level = l;\n  const lActive = Math.max(1, level === 0 ? 1 : level);\n  const p = level === 0 ? 0 : mergeP(lActive);\n\n  const fillP = interpolate(\n    t,\n    [mergeAt(levels) + 4, mergeAt(levels) + MERGE_LEN + 10],\n    [0, 1],\n    { ...CLAMP, easing: EASE_IO },\n  );\n\n  const glyphs = (\n    s: string,\n    x: number,\n    cy: number,\n    F: number,\n    key: string,\n    style: React.CSSProperties,\n  ) => (\n    <div\n      key={key}\n      style={{\n        position: \"absolute\",\n        left: x,\n        top: cy - m.base * F + (m.cap * F) / 2,\n        height: F,\n        fontFamily: saira.fontFamily,\n        fontWeight: 500,\n        fontSize: F,\n        lineHeight: `${F}px`,\n        letterSpacing: `${TRACK}em`,\n        fontFeatureSettings: '\"tnum\" 1, \"lnum\" 1',\n        fontKerning: \"none\",\n        whiteSpace: \"pre\",\n        ...style,\n      }}\n    >\n      {s}\n    </div>\n  );\n\n  const rowLabel = (l: number, i: number) => {\n    if (l === levels) return label;\n    const span = 2 ** l;\n    const a = i * span + 1;\n    const b = (i + 1) * span;\n    return span === 1\n      ? `${partLabel} ${pad(a)}`\n      : `${partLabel}s ${pad(a)}–${pad(b)}`;\n  };\n  const labelSizeAt = (l: number) =>\n    l === levels\n      ? Math.max(16, Math.min(H * 0.04, W * 0.036))\n      : Math.max(15, Math.min(sizeAt(l) * 0.46, H * 0.032));\n\n  const nodes: React.ReactNode[] = [];\n  const labels: React.ReactNode[] = [];\n\n  const pushLabel = (l: number, i: number, opacity: number, key: string) => {\n    if (opacity <= 0.001) return;\n    const F = sizeAt(l);\n    const size = labelSizeAt(l);\n    const capTop = rowY(l, i) - (m.cap * F) / 2;\n    labels.push(\n      <div\n        key={key}\n        style={{\n          position: \"absolute\",\n          left: margin,\n          top: capTop - size * 0.28,\n          width: colX - margin - Math.min(W, H) * 0.03,\n          fontFamily: saira.fontFamily,\n          fontWeight: 400,\n          fontSize: size,\n          lineHeight: `${size * 1.25}px`,\n          color: l === levels ? c.ink : c.small,\n          opacity,\n          textWrap: \"balance\",\n        }}\n      >\n        {rowLabel(l, i)}\n      </div>,\n    );\n  };\n\n  if (level === 0) {\n    const F = sizeAt(0);\n    leaves.forEach((v, i) => {\n      const start = i * STAGGER;\n      const cp = interpolate(t, [start, start + COUNT_LEN], [0, 1], {\n        ...CLAMP,\n        easing: EASE_OUT,\n      });\n      const rise = interpolate(t, [start, start + 14], [0, 1], {\n        ...CLAMP,\n        easing: EASE_OUT,\n      });\n      const y = rowY(0, i);\n      const capH = m.cap * F;\n      nodes.push(\n        <div\n          key={`l0-${i}`}\n          style={{\n            position: \"absolute\",\n            left: 0,\n            top: y - capH / 2 - F * 0.1,\n            width: W,\n            height: capH + F * 0.22,\n            overflow: \"hidden\",\n          }}\n        >\n          {glyphs(\n            str(v * cp),\n            valX,\n            capH / 2 + F * 0.1 + (1 - rise) * (capH + F * 0.3),\n            F,\n            \"g\",\n            { color: c.small },\n          )}\n        </div>,\n      );\n      pushLabel(0, i, rise, `lb0-${i}`);\n    });\n  } else {\n    const l = lActive;\n    const F0 = sizeAt(l - 1);\n    const F1 = sizeAt(l);\n    const F = F0 + (F1 - F0) * p;\n    const isFinal = l === levels;\n    const k = Math.min(1, (l - 1 + p) / Math.max(1, levels - 1));\n    const color = `color-mix(in oklab, ${c.ink} ${(k * 100).toFixed(1)}%, ${c.small})`;\n    sums[l].forEach((_, i) => {\n      const va = sums[l - 1][2 * i];\n      const vb = sums[l - 1][2 * i + 1];\n      const ay = rowY(l - 1, 2 * i) + (rowY(l, i) - rowY(l - 1, 2 * i)) * p;\n      const byStart = rowY(l - 1, 2 * i + 1);\n      const by = byStart + (ay - byStart) * p;\n      const capH = m.cap * F;\n      const edge = ay + capH / 2 + F * 0.32;\n      if (p < 1) {\n        nodes.push(\n          <div\n            key={`b${l}-${i}`}\n            style={{\n              position: \"absolute\",\n              overflow: \"hidden\",\n              left: 0,\n              top: edge,\n              width: W,\n              height: Math.max(0, H - edge),\n              opacity: interpolate(p, [0.3, 0.6], [1, 0], CLAMP),\n            }}\n          >\n            {glyphs(str(vb), valX, by - edge, F, \"g\", { color })}\n          </div>,\n        );\n      }\n      const sa = str(va + vb * p);\n      if (isFinal) {\n        nodes.push(\n          glyphs(sa, valX, ay, F, `a${l}-${i}`, {\n            color: `color-mix(in oklab, ${hue} ${(fillP * 100).toFixed(1)}%, ${c.ink})`,\n          }),\n        );\n      } else {\n        nodes.push(glyphs(sa, valX, ay, F, `a${l}-${i}`, { color }));\n      }\n      pushLabel(\n        l - 1,\n        2 * i,\n        interpolate(p, [0, 0.4], [1, 0], CLAMP),\n        `lo${l}-${2 * i}`,\n      );\n      pushLabel(\n        l - 1,\n        2 * i + 1,\n        interpolate(p, [0, 0.4], [1, 0], CLAMP),\n        `lo${l}-${2 * i + 1}`,\n      );\n      pushLabel(\n        l,\n        i,\n        interpolate(p, [0.55, 1], [0, 1], { ...CLAMP, easing: EASE_OUT }),\n        `ln${l}-${i}`,\n      );\n    });\n  }\n\n  const shownLevel = level;\n  const rows = count / 2 ** shownLevel;\n  const pitch = regionH / rows;\n  const rules: React.ReactNode[] = [];\n  const drawIn = interpolate(t, [0, 20], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  for (let j = 0; j <= rows; j++) {\n    rules.push(\n      <line\n        key={`r${shownLevel}-${j}`}\n        x1={margin}\n        x2={margin + (W - margin * 2) * drawIn}\n        y1={top + j * pitch}\n        y2={top + j * pitch}\n        stroke={c.rule}\n        strokeWidth={1}\n      />,\n    );\n  }\n  if (level > 0 && p < 1) {\n    const prevPitch = pitch / 2;\n    for (let j = 1; j < rows * 2; j += 2) {\n      rules.push(\n        <line\n          key={`ro${level}-${j}`}\n          x1={margin}\n          x2={W - margin}\n          y1={top + j * prevPitch}\n          y2={top + j * prevPitch}\n          stroke={c.rule}\n          strokeWidth={1}\n          opacity={interpolate(p, [0, 0.6], [1, 0], CLAMP)}\n        />,\n      );\n    }\n  }\n\n  return (\n    <AbsoluteFill style={{ background: bg, overflow: \"hidden\" }}>\n      <svg\n        width={W}\n        height={H}\n        style={{ position: \"absolute\", inset: 0 }}\n        aria-hidden\n      >\n        {rules}\n        <line\n          x1={colX}\n          x2={colX}\n          y1={top}\n          y2={top + regionH * drawIn}\n          stroke={c.rule}\n          strokeWidth={1}\n        />\n      </svg>\n      {labels}\n      {nodes}\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/core-sum.tsx"
    }
  ],
  "type": "registry:component"
}