50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2eed,"use client"; // karaui.kamisama-v0.my.id/components/motion/chart import { motion, useInView, useReducedMotion } from "motion/react"; import { type KeyboardEvent, type PointerEvent, useEffect, useRef, useState, } from "react"; import { ChartTable, ChartTooltip, formatFull, GROW, seriesColor, useChartWidth, } from "@/components/motion/chart/shared"; import { cn } from "@/lib/utils"; export type HeatmapDatum = { /** Calendar day, `YYYY-MM-DD` (read as UTC). */ date: string; value: number; }; export interface HeatmapChartProps { /** One entry per day; missing days count as zero, repeated days are summed. */ data: HeatmapDatum[]; /** Columns to show, ending on the latest date in `data`. Default 53 (a year). */ weeks?: number; /** Intensity steps including the empty step. Default 5. */ levels?: number; /** Any CSS color for the strongest step. Default `--chart-1`. */ color?: string; /** Tooltip value text. Default "N contributions". */ formatValue?: (value: number) => string; /** Tooltip date text from a `YYYY-MM-DD` string. Default "Oct 3". */ formatDate?: (date: string) => string; /** Names the chart for assistive tech and the table view. */ title: string; className?: string; } const DAY_MS = 86_400_000; const LEFT = 30; // weekday labels const TOP = 20; // month labels // Cell pitch bounds: below MIN the grid scrolls; above MAX it stops growing. const MIN_PITCH = 8; const MAX_PITCH = 18; const WEEKDAYS = [ [1, "Mon"], [3, "Wed"], [5, "Fri"], ] as const; // Fixed locale + UTC keep server and client output identical for hydration. const MONTH = new Intl.DateTimeFormat("en-US", { month: "short", timeZone: "UTC" }); const SHORT = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC", }); const LONG = new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC", }); /** Days since the epoch, from `YYYY-MM-DD`, in UTC. */ function toDay(iso: string) { const [y, m, d] = iso.split("-").map(Number); return Math.floor(Date.UTC(y, (m || 1) - 1, d || 1) / DAY_MS); } const toIso = (day: number) => new Date(day * DAY_MS).toISOString().slice(0, 10); /** 0 = Sunday. 1970-01-01 was a Thursday. */ const weekday = (day: number) => (((day + 4) % 7) + 7) % 7; const defaultFormatValue = (v: number) => `${formatFull(v)} ${v === 1 ? "contribution" : "contributions"}`; const defaultFormatDate = (iso: string) => SHORT.format(new Date(`${iso}T00:00:00Z`)); /** * Contribution calendar: one rounded cell per day, a column per week, shaded * in `levels` steps of one color. Cells fade and scale in column by column when * scrolled into view; hovering or arrowing (up/down by day, left/right by * week) reads a day. Sizes itself to the available width and scrolls * horizontally, newest week in view, when it can't fit. */ export function HeatmapChart({ data, weeks = 53, levels = 5, color = seriesColor({}, 0), formatValue = defaultFormatValue, formatDate = defaultFormatDate, title, className, }: HeatmapChartProps) { const reduce = useReducedMotion(); const [measureRef, width] = useChartWidth(); const viewRef = useRef(null); const scrollRef = useRef(null); const inView = useInView(viewRef, { once: true, amount: 0.3 }); const [active, setActive] = useState(null); const [scrollLeft, setScrollLeft] = useState(0); const shown = reduce || inView; const steps = Math.max(2, Math.round(levels)); const cols = Math.max(1, Math.round(weeks)); const values = new Map(); let end = Number.NEGATIVE_INFINITY; for (const d of data) { const day = toDay(d.date); if (Number.isNaN(day)) continue; values.set(day, (values.get(day) ?? 0) + (Number(d.value) || 0)); end = Math.max(end, day); } const hasData = Number.isFinite(end); const first = hasData ? end - weekday(end) - (cols - 1) * 7 : 0; const count = hasData ? end - first + 1 : 0; const cells = Array.from({ length: count }, (_, i) => { const day = first + i; return { day, iso: toIso(day), value: values.get(day) ?? 0 }; }); const max = Math.max(0, ...cells.map((c) => c.value)); const level = (v: number) => v <= 0 || max <= 0 ? 0 : Math.min(steps - 1, Math.max(1, Math.ceil((v / max) * (steps - 1)))); const fill = (l: number) => { if (l === 0) return "var(--border-strong)"; const pct = steps === 2 ? 100 : Math.round(30 + (70 * (l - 1)) / (steps - 2)); return `color-mix(in oklab, ${color} ${pct}%, transparent)`; }; const pitch = Math.min(MAX_PITCH, Math.max(MIN_PITCH, (width - LEFT) / cols)); const gap = Math.max(2, pitch * 0.18); const cell = pitch - gap; const svgW = LEFT + cols * pitch - gap; const svgH = TOP + 7 * pitch - gap; const cellX = (i: number) => LEFT + Math.floor(i / 7) * pitch; const cellY = (i: number) => TOP + (i % 7) * pitch; // Month label over the first column of each month; a first label crowded by // the next one is dropped. const months: { col: number; text: string }[] = []; for (let c = 0; c < cols; c++) { const m = new Date((first + c * 7) * DAY_MS).getUTCMonth(); const prev = c === 0 ? -1 : new Date((first + (c - 1) * 7) * DAY_MS).getUTCMonth(); if (m !== prev) months.push({ col: c, text: MONTH.format(new Date((first + c * 7) * DAY_MS)) }); } if (months.length > 1 && months[1].col - months[0].col < 3) months.shift(); // Narrow screens: start on the newest weeks, the end people read first. const overflows = svgW > width; useEffect(() => { const el = scrollRef.current; if (!el || !overflows) return; el.scrollLeft = el.scrollWidth; setScrollLeft(el.scrollLeft); }, [overflows]); const onPointerMove = (e: PointerEvent) => { const box = e.currentTarget.getBoundingClientRect(); const col = Math.floor((e.clientX - box.left - LEFT) / pitch); const row = Math.floor((e.clientY - box.top - TOP) / pitch); const i = col * 7 + row; if (col < 0 || row < 0 || row > 6 || i >= count) setActive(null); else setActive(i); }; const onKeyDown = (e: KeyboardEvent) => { const deltas: Record = { ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7, }; let next: number; if (e.key === "Home") next = 0; else if (e.key === "End") next = count - 1; else if (e.key in deltas) { if (active === null) next = count - 1; else { const moved = active + deltas[e.key]; next = moved < 0 || moved >= count ? active : moved; } } else return; e.preventDefault(); setActive(next); // Keep the read cell inside the scroll window. const el = scrollRef.current; if (el && overflows) { const x = cellX(next); if (x < el.scrollLeft + LEFT) el.scrollLeft = x - LEFT; else if (x + pitch > el.scrollLeft + el.clientWidth) { el.scrollLeft = x + pitch - el.clientWidth; } } }; const activeCell = active === null ? null : cells[active]; return (

setScrollLeft(e.currentTarget.scrollLeft)} className={cn("w-full", overflows && "overflow-x-auto pb-1 [scrollbar-color:var(--border-strong)_transparent] [scrollbar-width:thin]")} > {width > 0 && count > 0 && ( // biome-ignore lint/a11y/useSemanticElements: a chart is not a form; group labels the plot )}

Less {Array.from({ length: steps }, (_, l) => ( ))} More

[ LONG.format(new Date(c.day * DAY_MS)), formatValue(c.value), ])} />

); } 53:T2bfe,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ReactNode, useEffect, useState } from "react"; import { EASE_OUT } from "@/lib/ease"; import { cn } from "@/lib/utils"; export type ChartSeries = { /** Key of the value in each datum. */ key: string; label: string; /** Any CSS color. Default: the next `--chart-N` slot, in fixed order. */ color?: string; }; export type ChartDatum = Record; /** "natural" is a monotone curve: smooth, but never overshoots a data point. */ export type ChartCurve = "natural" | "linear" | "step"; export type TooltipIndicator = "dot" | "line" | "dashed"; // Fixed categorical order, validated for colorblind and normal-vision // separation (light and dark steps live in the theme's --chart-* tokens). // Fallbacks are the light steps, for projects without the theme layer. const SLOT_FALLBACKS = ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4"]; /** Color for slot `index`; color follows the series, never its rank. */ export function seriesColor(series: { color?: string }, index: number) { if (series.color) return series.color; const slot = index % SLOT_FALLBACKS.length; return `var(--chart-${slot + 1}, ${SLOT_FALLBACKS[slot]})`; } /** * Layout width of the element given the returned ref. ResizeObserver reports * the untransformed box, unlike getBoundingClientRect (react-use-measure), so a * chart inside a scaled container (thumbnails, zoomed stages) still fills it. */ export function useChartWidth() { const [el, setEl] = useState(null); const [width, setWidth] = useState(0); useEffect(() => { if (!el) return; const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width), ); observer.observe(el); return () => observer.disconnect(); }, [el]); return [setEl, width] as const; } // A fixed locale keeps server and client output identical for hydration. const FULL = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }); const COMPACT = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1, }); export const formatFull = (n: number) => FULL.format(n); export const formatCompact = (n: number) => COMPACT.format(n); /** Round tick values covering [min, max], about `count` of them. */ export function niceTicks(min: number, max: number, count = 4) { if (min === max) max = min + 1; const raw = (max - min) / count; const mag = 10 ** Math.floor(Math.log10(raw)); const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? 10 * mag; const start = Math.floor(min / step) * step; const end = Math.ceil(max / step) * step; const ticks: number[] = []; for (let v = start; v <= end + step / 2; v += step) { ticks.push(Number(v.toFixed(10))); } return ticks; } /** Keep every k-th label so neighbours stay at least `minGap` px apart. */ export function labelStride(count: number, width: number, minGap = 56) { return Math.max(1, Math.ceil(count / Math.max(1, Math.floor(width / minGap)))); } /** Approximate gutter for axis labels at 12px. */ export function gutterFor(labels: string[]) { return Math.max(...labels.map((l) => l.length), 1) * 7 + 12; } type Point = [number, number]; /** SVG path through `points` (sorted by x) with the given curve. */ export function curvePath(points: Point[], curve: ChartCurve) { if (points.length === 0) return ""; const [x0, y0] = points[0]; if (points.length === 1) return `M${x0},${y0}`; if (curve === "step") { // Changes value halfway between points, like a stepped series. let d = `M${x0},${y0}`; for (let i = 1; i < points.length; i++) { const [px] = points[i - 1]; const [x, y] = points[i]; const mid = (px + x) / 2; d += `H${mid}V${y}H${x}`; } return d; } if (curve === "linear" || points.length < 3) { return points.map(([x, y], i) => `${i ? "L" : "M"}${x},${y}`).join(""); } // Monotone cubic (Fritsch–Carlson): tangents are clamped so the curve stays // between its neighbours and never invents a peak the data doesn't have. const n = points.length; const slopes: number[] = []; for (let i = 0; i < n - 1; i++) { const dx = points[i + 1][0] - points[i][0]; slopes.push(dx ? (points[i + 1][1] - points[i][1]) / dx : 0); } const tangents = points.map((_, i) => { if (i === 0) return slopes[0]; if (i === n - 1) return slopes[n - 2]; const a = slopes[i - 1]; const b = slopes[i]; return a * b <= 0 ? 0 : (a + b) / 2; }); for (let i = 0; i < n - 1; i++) { const m = slopes[i]; if (m === 0) { tangents[i] = 0; tangents[i + 1] = 0; continue; } const a = tangents[i] / m; const b = tangents[i + 1] / m; const s = a * a + b * b; if (s > 9) { const t = 3 / Math.sqrt(s); tangents[i] = t * a * m; tangents[i + 1] = t * b * m; } } let d = `M${x0},${y0}`; for (let i = 0; i < n - 1; i++) { const [xa, ya] = points[i]; const [xb, yb] = points[i + 1]; const h = (xb - xa) / 3; d += `C${xa + h},${ya + tangents[i] * h} ${xb - h},${yb - tangents[i + 1] * h} ${xb},${yb}`; } return d; } // ── tooltip ──────────────────────────────────────────────────────────────── export type TooltipRow = { label: string; value: string; color: string }; function Indicator({ kind, color }: { kind: TooltipIndicator; color: string }) { return ( ); } /** * Compact readout that springs between data positions: an optional label, * then one row per series with a colored indicator, the name and the value. */ export function ChartTooltip({ open, x, y, width, label, rows, indicator = "dot", }: { open: boolean; /** Anchor in px, relative to the chart's positioned wrapper. */ x: number; y: number; /** Wrapper width, to flip the tooltip before it overflows the edge. */ width: number; label?: string; rows: TooltipRow[]; indicator?: TooltipIndicator; }) { const reduce = useReducedMotion(); const flip = x > width / 2; return ( {open && (

{label ? (

{label}

) : null} {rows.map((row) => (

{row.label} {row.value}

))}

)} ); } // ── legend & table ───────────────────────────────────────────────────────── export function ChartLegend({ items, className, }: { items: { label: string; color: string }[]; className?: string; }) { return (

{item.label}

); } /** The table view: every value reachable without hovering or seeing color. */ export function ChartTable({ caption, head, rows, }: { caption: string; head: string[]; rows: ReactNode[][]; }) { // The wrapper is what hides it: a escapes a visually hidden // table's clip and would otherwise paint over the chart. return (

{head.map((h) => ( ))} {rows.map((row, r) => ( // biome-ignore lint/suspicious/noArrayIndexKey: rows mirror data order and never reorder. {row.map((cell, c) => c === 0 ? ( // biome-ignore lint/suspicious/noArrayIndexKey: fixed column order. ) : ( // biome-ignore lint/suspicious/noArrayIndexKey: fixed column order. ), )} ))}

{caption}
{h}
{cell}	{cell}

); } /** Shared entrance timing: marks grow once the chart scrolls into view. */ export const GROW = { duration: 0.7, ease: EASE_OUT } as const; /** Arrow-key stepping shared by every chart that reads positions. */ export function stepIndex( key: string, current: number | null, count: number, wrap = false, ) { const forward = key === "ArrowRight" || key === "ArrowDown"; const back = key === "ArrowLeft" || key === "ArrowUp"; if (!forward && !back) return undefined; if (current === null) return forward ? 0 : count - 1; const next = current + (forward ? 1 : -1); if (wrap) return (next + count) % count; return Math.min(count - 1, Math.max(0, next)); } 54:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/motion/chart/heatmap-chart.tsx","content":"$52","type":"registry:component","target":"@components/motion/chart/heatmap-chart.tsx"},{"path":"components/motion/chart/shared.tsx","content":"$53","type":"registry:component","target":"@components/motion/chart/shared.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"lib/ease.ts","content":"$54","type":"registry:lib","target":"@lib/ease.ts"}],"className":"h-[70svh] min-h-80"}]]}]