contrib-graphs 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1124 @@
+'use client';
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_data = require("./data-w1Mb5e5D.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/core.tsx
+/**
+* useLayoutEffect en el navegador (mide antes de pintar) y useEffect en el
+* servidor, donde los efectos no corren y React avisaría por cada componente.
+*/
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+/** `:focus-visible` no existe en navegadores viejos (Safari < 15.4) ni en algunos entornos de test. */
+function isFocusVisible(el) {
+	try {
+		return el.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+const indexOf = (target) => {
+	const el = target?.closest?.("[data-cg-i]");
+	return el ? Number(el.getAttribute("data-cg-i")) : null;
+};
+/**
+* Hover + navegación con teclado usando delegación de eventos: las celdas solo
+* llevan `data-cg-i`, así que no se crean cientos de handlers. Flechas izquierda/derecha
+* avanzan `stepX` elementos y arriba/abajo `stepY`.
+*/
+function useGraphInteraction(opts) {
+	const { rootRef, count, stepX, stepY, onActivate } = opts;
+	const [state, setState] = (0, react.useState)(null);
+	const [pos, setPos] = (0, react.useState)(null);
+	const index = state && state.index < count ? state.index : null;
+	useIsomorphicLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const el = index == null ? null : root.querySelector(`[data-cg-i="${index}"]`);
+		root.querySelectorAll("[data-active]").forEach((n) => n !== el && n.removeAttribute("data-active"));
+		el?.setAttribute("data-active", "");
+	});
+	useIsomorphicLayoutEffect(() => {
+		const root = rootRef.current;
+		const el = index == null || !root ? null : root.querySelector(`[data-cg-i="${index}"]`);
+		if (!root || !el) {
+			setPos(null);
+			return;
+		}
+		const r = root.getBoundingClientRect();
+		const e = el.getBoundingClientRect();
+		setPos({
+			x: e.left + e.width / 2 - r.left,
+			y: e.top - r.top
+		});
+	}, [
+		rootRef,
+		index,
+		count
+	]);
+	const onKeyDown = (0, react.useCallback)((e) => {
+		const cur = index ?? count - 1;
+		let next = null;
+		switch (e.key) {
+			case "ArrowRight":
+				next = cur + stepX;
+				break;
+			case "ArrowLeft":
+				next = cur - stepX;
+				break;
+			case "ArrowDown":
+				next = stepY ? cur + stepY : null;
+				break;
+			case "ArrowUp":
+				next = stepY ? cur - stepY : null;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = count - 1;
+				break;
+			case "Escape":
+				setState(null);
+				return;
+			case "Enter":
+			case " ":
+				if (index != null) {
+					e.preventDefault();
+					onActivate?.(index);
+				}
+				return;
+			default: return;
+		}
+		if (next == null || count === 0) return;
+		e.preventDefault();
+		setState({
+			index: Math.max(0, Math.min(count - 1, next)),
+			via: "keyboard"
+		});
+	}, [
+		index,
+		count,
+		stepX,
+		stepY,
+		onActivate
+	]);
+	return {
+		rootRef,
+		active: index,
+		via: state?.via ?? null,
+		pos,
+		handlers: {
+			tabIndex: 0,
+			onKeyDown,
+			onPointerOver: (e) => {
+				const i = indexOf(e.target);
+				if (i != null && i !== index) setState({
+					index: i,
+					via: "pointer"
+				});
+			},
+			onPointerLeave: () => setState((s) => s?.via === "pointer" ? null : s),
+			onClick: (e) => {
+				const i = indexOf(e.target);
+				if (i != null) onActivate?.(i);
+			},
+			onFocus: (e) => {
+				if (e.target === e.currentTarget && isFocusVisible(e.currentTarget)) setState((s) => s ?? {
+					index: count - 1,
+					via: "keyboard"
+				});
+			},
+			onBlur: () => setState((s) => s?.via === "keyboard" ? null : s)
+		}
+	};
+}
+/** Reduce las semanas visibles al ancho del contenedor (en vez de hacer scroll). */
+function useFitWeeks(ref, requested, pitch, reserved, enabled) {
+	const [fit, setFit] = (0, react.useState)(requested);
+	useIsomorphicLayoutEffect(() => {
+		const el = ref.current;
+		if (!enabled || !el || typeof ResizeObserver === "undefined") {
+			setFit(requested);
+			return;
+		}
+		const update = () => {
+			const w = el.clientWidth;
+			if (w > 0) setFit(Math.max(4, Math.min(requested, Math.floor((w - reserved) / pitch))));
+		};
+		update();
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		ref,
+		requested,
+		pitch,
+		reserved,
+		enabled
+	]);
+	return enabled ? fit : requested;
+}
+/** Monta calendario + interacción. Es la base de todas las variantes por día. */
+function useCalendarGraph(props, opts = {}) {
+	const rootRef = (0, react.useRef)(null);
+	const requested = props.weeks ?? 53;
+	const weeks = useFitWeeks(rootRef, requested, opts.fit?.pitch ?? 1, opts.fit?.reserved ?? 0, opts.fit?.enabled ?? false);
+	const endKey = props.endDate instanceof Date ? props.endDate.getTime() : props.endDate;
+	const scaleKey = typeof props.scale === "string" ? props.scale : props.scale?.join(",");
+	const full = (0, react.useMemo)(() => require_data.buildCalendar(props.data, {
+		weeks: requested,
+		endDate: props.endDate,
+		weekStart: props.weekStart,
+		scale: props.scale,
+		locale: props.locale
+	}), [
+		props.data,
+		requested,
+		endKey,
+		props.weekStart,
+		scaleKey,
+		props.locale
+	]);
+	const calendar = (0, react.useMemo)(() => require_data.cropCalendar(full, weeks, props.locale), [
+		full,
+		weeks,
+		props.locale
+	]);
+	const { onDayClick } = props;
+	const onActivate = (0, react.useCallback)((i) => onDayClick?.(calendar.days[i]), [onDayClick, calendar]);
+	const interaction = useGraphInteraction({
+		rootRef,
+		count: calendar.days.length,
+		stepX: opts.stepX ?? 7,
+		stepY: opts.stepY ?? 1,
+		onActivate
+	});
+	/** `periodTotal` es el total del periodo pedido aunque se muestren menos semanas. */
+	return {
+		calendar,
+		periodTotal: full.total,
+		interaction,
+		theme: require_data.resolveTheme(props.theme)
+	};
+}
+function describeDay(day, props) {
+	const n = day.count;
+	return {
+		title: `${require_data.formatNumber(n, props.locale)} ${require_data.pluralize(n, props.unit)}`,
+		subtitle: require_data.formatDate(day.date, props.locale)
+	};
+}
+/** Texto del periodo según las semanas pedidas (no las recortadas por ancho). */
+function periodText(props) {
+	const weeks = props.weeks ?? 53;
+	const p = props.periodLabel;
+	if (typeof p === "function") return p(weeks);
+	if (typeof p === "string") return p;
+	return weeks >= 52 ? "in the last year" : `in the last ${weeks} weeks`;
+}
+function defaultTitle(total, props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: require_data.formatNumber(total, props.locale) }),
+		" ",
+		require_data.pluralize(total, props.unit),
+		" ",
+		periodText(props)
+	] });
+}
+const cellDelay = (w) => ({ "--cg-w": w });
+/** Id estable y válido para usar en `url(#...)` dentro de SVG. */
+function useSvgId(prefix) {
+	return `${prefix}-${(0, react.useId)().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+function Legend({ labels = ["Less", "More"], swatch }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "cg-legend",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels[0] }),
+			[
+				0,
+				1,
+				2,
+				3,
+				4
+			].map((l) => swatch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: swatch(l) }, l) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cg-swatch",
+				style: { background: `var(--cg-l${l})` }
+			}, l)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: labels[1] })
+		]
+	});
+}
+/**
+* Contenedor común: tema, modo claro/oscuro, encabezado, leyenda, tooltip
+* y región aria-live para anunciar el día activo al navegar con teclado.
+*/
+function GraphShell({ props, interaction, variant, describe, summary, title, headerEnd, footerStart, legendSwatch, glow, surface, children }) {
+	const theme = require_data.resolveTheme(props.theme);
+	const { active, pos, via } = interaction;
+	const desc = active != null ? describe(active) : null;
+	const tipRef = (0, react.useRef)(null);
+	const [shift, setShift] = (0, react.useState)(0);
+	useIsomorphicLayoutEffect(() => {
+		const tip = tipRef.current;
+		const root = interaction.rootRef.current;
+		if (!tip || !root || !pos) return;
+		const half = tip.offsetWidth / 2;
+		const w = root.clientWidth;
+		setShift(pos.x - half < 0 ? half - pos.x : pos.x + half > w ? w - half - pos.x : 0);
+	}, [
+		pos,
+		desc?.title,
+		desc?.subtitle,
+		interaction.rootRef
+	]);
+	const showHeader = props.showTotal !== false || headerEnd;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: interaction.rootRef,
+		className: [
+			"cg-root",
+			`cg-${variant}`,
+			props.className
+		].filter(Boolean).join(" "),
+		style: {
+			...require_data.themeVars(theme),
+			...props.style
+		},
+		"data-mode": props.colorMode ?? "auto",
+		"data-animate": props.animate ? "" : void 0,
+		"data-glow": glow ? "" : void 0,
+		"data-surface": surface ? "" : void 0,
+		"data-has-active": active != null ? "" : void 0,
+		role: "group",
+		"aria-label": props["aria-label"] ?? `${summary}. Use arrow keys to explore.`,
+		...interaction.handlers,
+		children: [
+			showHeader && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cg-header",
+				children: [props.showTotal !== false ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "cg-title",
+					children: props.title ?? title
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), headerEnd]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "cg-body",
+				children
+			}),
+			(props.showLegend !== false || footerStart) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "cg-footer",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: footerStart }), props.showLegend !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Legend, {
+					labels: props.legendLabels,
+					swatch: legendSwatch
+				})]
+			}),
+			desc && pos && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: tipRef,
+				className: "cg-tooltip",
+				style: {
+					left: pos.x + shift,
+					top: pos.y,
+					"--cg-arrow": `${-shift}px`
+				},
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: desc.title }), desc.subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [" · ", desc.subtitle] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "cg-sr-only",
+				"aria-live": "polite",
+				children: via === "keyboard" && desc ? `${desc.title}, ${desc.subtitle ?? ""}` : ""
+			})
+		]
+	});
+}
+function summaryOf(calendar, props) {
+	return `${require_data.formatNumber(calendar.total, props.locale)} ${require_data.pluralize(calendar.total, props.unit)} from ${require_data.formatDate(calendar.start, props.locale)} to ${require_data.formatDate(calendar.end, props.locale)}`;
+}
+// src/variants/GridGraph.tsx
+function useGrid(props, shape) {
+	const { cellSize = 11, gap = 3, radius = 2, showWeekdays = true, showMonths = true, fit = "crop" } = props;
+	const pitch = cellSize + gap;
+	const left = showWeekdays ? 30 : 0;
+	const top = showMonths ? 15 : 0;
+	const { calendar, periodTotal, interaction } = useCalendarGraph(props, { fit: {
+		pitch,
+		reserved: left - gap,
+		enabled: fit === "crop"
+	} });
+	const glow = props.glow ?? false;
+	const filterId = useSvgId("cg-glow");
+	const weekdays = (0, react.useMemo)(() => require_data.weekdayLabels(props.locale, props.weekStart ?? 0), [props.locale, props.weekStart]);
+	const width = left + calendar.weeks.length * pitch - gap;
+	const height = top + 7 * pitch - gap;
+	const svg = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: fit === "scale" ? "100%" : width,
+		height: fit === "scale" ? void 0 : height,
+		viewBox: `0 0 ${width} ${height}`,
+		"aria-hidden": "true",
+		children: [
+			glow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
+				id: filterId,
+				x: "-50%",
+				y: "-50%",
+				width: "200%",
+				height: "200%",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
+					stdDeviation: cellSize / 4,
+					result: "b"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("feMerge", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: "b" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("feMergeNode", { in: "SourceGraphic" })] })]
+			}) }),
+			showMonths && calendar.months.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				className: "cg-label",
+				x: left + m.weekIndex * pitch,
+				y: 9,
+				children: m.label
+			}, `${m.year}-${m.month}`)),
+			showWeekdays && [
+				1,
+				3,
+				5
+			].map((r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				className: "cg-label",
+				x: 0,
+				y: top + r * pitch + cellSize - 2,
+				children: weekdays[r]
+			}, r)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { children: calendar.days.map((d) => {
+				const { kind, attrs } = shape.cell({
+					x: left + d.weekIndex * pitch,
+					y: top + d.dayIndex * pitch,
+					size: cellSize,
+					level: d.level,
+					radius
+				});
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(kind, {
+					...attrs,
+					className: `cg-cell${glow && d.level >= 3 ? " cg-glow" : ""}`,
+					"data-cg-i": d.index,
+					"data-level": d.level,
+					fill: `var(--cg-l${d.level})`,
+					style: cellDelay(d.weekIndex)
+				}, d.date);
+			}) })
+		]
+	}), [
+		calendar,
+		width,
+		height,
+		fit,
+		glow,
+		filterId,
+		cellSize,
+		showMonths,
+		showWeekdays,
+		left,
+		top,
+		pitch,
+		radius,
+		weekdays,
+		shape
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphShell, {
+		props,
+		interaction,
+		variant: shape.variant,
+		describe: (i) => describeDay(calendar.days[i], props),
+		summary: summaryOf(calendar, props),
+		title: defaultTitle(periodTotal, props),
+		glow,
+		legendSwatch: shape.variant === "dots" ? (l) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "cg-swatch",
+			style: {
+				background: `var(--cg-l${l})`,
+				borderRadius: "50%",
+				transform: `scale(${.55 + l * .11})`
+			}
+		}) : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: glow ? { "--cg-glow-filter": `url(#${filterId})` } : void 0,
+			children: svg
+		})
+	});
+}
+const classicShape = {
+	variant: "classic",
+	cell: ({ x, y, size, radius }) => ({
+		kind: "rect",
+		attrs: {
+			x,
+			y,
+			width: size,
+			height: size,
+			rx: radius,
+			ry: radius
+		}
+	})
+};
+const dotsShape = {
+	variant: "dots",
+	cell: ({ x, y, size, level }) => ({
+		kind: "circle",
+		attrs: {
+			cx: x + size / 2,
+			cy: y + size / 2,
+			r: size / 2 * (level === 0 ? .42 : .55 + level * .115)
+		}
+	})
+};
+/** The classic weeks × days grid. */
+function ClassicGraph(props) {
+	return useGrid(props, classicShape);
+}
+/** Circles whose size also encodes intensity, so it still reads in monochrome. */
+function DotsGraph(props) {
+	return useGrid(props, dotsShape);
+}
+// src/isometric.ts
+const r = (v) => Math.round(v * 100) / 100;
+/**
+* Geometría de la vista isométrica, compartida por `IsometricGraph` y por
+* `renderIsometricSvg`: así el componente y el SVG estático se ven igual.
+* Las baldosas vienen ordenadas de atrás hacia adelante (orden de pintado).
+*/
+function isometricLayout(calendar, { tileSize = 12, maxHeight = 48, heightBy = "count" } = {}) {
+	const tw = tileSize;
+	const th = tileSize / 2;
+	const W = calendar.weeks.length;
+	const width = (W + 7) * (tw / 2);
+	const height = (W + 7) * (th / 2) + maxHeight + 2;
+	const ox = 7 * (tw / 2);
+	const max = Math.max(1, calendar.max);
+	return {
+		width,
+		height,
+		tiles: [...calendar.days].sort((a, b) => a.weekIndex + a.dayIndex - (b.weekIndex + b.dayIndex) || a.weekIndex - b.weekIndex).map((day) => {
+			const X = ox + (day.weekIndex - day.dayIndex) * (tw / 2);
+			const Y = maxHeight + (day.weekIndex + day.dayIndex) * (th / 2);
+			const h = day.count === 0 ? 0 : heightBy === "level" ? day.level / 4 * maxHeight : Math.max(3, day.count / max * maxHeight);
+			const p = (x, y) => `${r(x)},${r(y)}`;
+			return {
+				day,
+				height: h,
+				top: [
+					p(X, Y - h),
+					p(X + tw / 2, Y + th / 2 - h),
+					p(X, Y + th - h),
+					p(X - tw / 2, Y + th / 2 - h)
+				].join(" "),
+				left: [
+					p(X - tw / 2, Y + th / 2 - h),
+					p(X, Y + th - h),
+					p(X, Y + th),
+					p(X - tw / 2, Y + th / 2)
+				].join(" "),
+				right: [
+					p(X, Y + th - h),
+					p(X + tw / 2, Y + th / 2 - h),
+					p(X + tw / 2, Y + th / 2),
+					p(X, Y + th)
+				].join(" ")
+			};
+		})
+	};
+}
+/** Porcentaje de color de la cara izquierda y derecha (el resto se mezcla con negro). */
+const ISO_SHADES = {
+	left: 78,
+	right: 60
+};
+// src/variants/IsometricGraph.tsx
+const shade = (level, pct) => `color-mix(in oklab, var(--cg-l${level}) ${pct}%, var(--cg-mix))`;
+/** Isometric columns whose height shows each day's activity. */
+function IsometricGraph(props) {
+	const { tileSize = 12, maxHeight = 48, heightBy = "count", showStats = true, statLabels = [
+		"longest streak",
+		"current streak",
+		"best day"
+	] } = props;
+	const { calendar, periodTotal, interaction } = useCalendarGraph(props);
+	const stats = (0, react.useMemo)(() => require_data.computeStats(calendar.days), [calendar]);
+	const svg = (0, react.useMemo)(() => {
+		const { width, height, tiles } = isometricLayout(calendar, {
+			tileSize,
+			maxHeight,
+			heightBy
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width,
+			height,
+			viewBox: `0 0 ${width} ${height}`,
+			"aria-hidden": "true",
+			children: tiles.map(({ day: d, height: h, top, left, right }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+				className: "cg-cell cg-rise",
+				"data-cg-i": d.index,
+				style: cellDelay(d.weekIndex),
+				children: [
+					h > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+						points: left,
+						style: { fill: shade(d.level, ISO_SHADES.left) }
+					}),
+					h > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+						points: right,
+						style: { fill: shade(d.level, ISO_SHADES.right) }
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+						points: top,
+						style: { fill: `var(--cg-l${d.level})` }
+					})
+				]
+			}, d.date))
+		});
+	}, [
+		calendar,
+		tileSize,
+		maxHeight,
+		heightBy
+	]);
+	const n = (v) => require_data.formatNumber(v, props.locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphShell, {
+		props,
+		interaction,
+		variant: "isometric",
+		describe: (i) => describeDay(calendar.days[i], props),
+		summary: summaryOf(calendar, props),
+		title: defaultTitle(periodTotal, props),
+		headerEnd: showStats && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "cg-stats",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: n(stats.longestStreak) }), statLabels[0]] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: n(stats.currentStreak) }), statLabels[1]] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: n(stats.best?.count ?? 0) }),
+					statLabels[2],
+					stats.best && ` · ${require_data.formatDate(stats.best.date, props.locale, {
+						month: "short",
+						day: "numeric"
+					})}`
+				] })
+			]
+		}),
+		children: svg
+	});
+}
+// src/variants/RadialGraph.tsx
+function sector(cx, cy, r0, r1, a0, a1) {
+	const p = (r, a) => `${(cx + r * Math.cos(a)).toFixed(2)} ${(cy + r * Math.sin(a)).toFixed(2)}`;
+	return `M${p(r1, a0)}A${r1} ${r1} 0 0 1 ${p(r1, a1)}L${p(r0, a1)}A${r0} ${r0} 0 0 0 ${p(r0, a0)}Z`;
+}
+/** The year as a ring: each week is a slice and each weekday a band. */
+function RadialGraph(props) {
+	const { size = 320, innerRadius = .38, showMonths = true } = props;
+	const { calendar, interaction } = useCalendarGraph(props);
+	const pad = showMonths ? 22 : 4;
+	const R = size / 2;
+	const outer = R - pad;
+	const inner = outer * innerRadius;
+	const ring = (outer - inner) / 7;
+	const W = calendar.weeks.length;
+	const slice = Math.PI * 2 / W;
+	const start = -Math.PI / 2;
+	const gapA = Math.min(.012, slice * .12);
+	const svg = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-hidden": "true",
+		children: [
+			calendar.days.map((d) => {
+				const a0 = start + d.weekIndex * slice + gapA;
+				const a1 = start + (d.weekIndex + 1) * slice - gapA;
+				const r0 = inner + d.dayIndex * ring + .6;
+				const r1 = inner + (d.dayIndex + 1) * ring - .6;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: sector(R, R, r0, r1, a0, a1),
+					className: "cg-cell",
+					"data-cg-i": d.index,
+					fill: `var(--cg-l${d.level})`,
+					style: cellDelay(d.weekIndex)
+				}, d.date);
+			}),
+			showMonths && calendar.months.map((m) => {
+				const a = start + (m.weekIndex + .5) * slice;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+					className: "cg-label",
+					x: R + (outer + 11) * Math.cos(a),
+					y: R + (outer + 11) * Math.sin(a),
+					textAnchor: "middle",
+					dominantBaseline: "middle",
+					children: m.label
+				}, `${m.year}-${m.month}`);
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: R,
+				y: R - 4,
+				textAnchor: "middle",
+				style: {
+					fill: "var(--cg-text)",
+					fontSize: size / 11,
+					fontWeight: 650
+				},
+				children: require_data.formatNumber(calendar.total, props.locale)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: R,
+				y: R + size / 18,
+				textAnchor: "middle",
+				className: "cg-label",
+				style: { fontSize: 11 },
+				children: require_data.pluralize(calendar.total, props.unit)
+			})
+		]
+	}), [
+		calendar,
+		size,
+		R,
+		inner,
+		ring,
+		outer,
+		slice,
+		start,
+		gapA,
+		showMonths,
+		props.locale,
+		props.unit
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphShell, {
+		props: {
+			...props,
+			showTotal: props.showTotal ?? false
+		},
+		interaction,
+		variant: "radial",
+		describe: (i) => describeDay(calendar.days[i], props),
+		summary: summaryOf(calendar, props),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			children: svg
+		})
+	});
+}
+// src/variants/SkylineGraph.tsx
+/** One building per week: your year as a city skyline. */
+function SkylineGraph(props) {
+	const { height = 110, barWidth = 9, gap = 3, windows = true, fit = "crop" } = props;
+	const pitch = barWidth + gap;
+	const rootRef = (0, react.useRef)(null);
+	const weeksN = useFitWeeks(rootRef, props.weeks ?? 53, pitch, -gap, fit === "crop");
+	const endKey = props.endDate instanceof Date ? props.endDate.getTime() : props.endDate;
+	const requested = props.weeks ?? 53;
+	const full = (0, react.useMemo)(() => require_data.buildCalendar(props.data, {
+		weeks: requested,
+		endDate: props.endDate,
+		weekStart: props.weekStart,
+		locale: props.locale
+	}), [
+		props.data,
+		requested,
+		endKey,
+		props.weekStart,
+		props.locale
+	]);
+	const calendar = (0, react.useMemo)(() => require_data.cropCalendar(full, weeksN, props.locale), [
+		full,
+		weeksN,
+		props.locale
+	]);
+	const allWeeks = (0, react.useMemo)(() => {
+		const raw = full.weeks.map((w, index) => {
+			const days = w.filter((d) => d !== null);
+			return {
+				index,
+				days,
+				total: days.reduce((s, d) => s + d.count, 0),
+				activeDays: days.filter((d) => d.count > 0).length,
+				level: 0
+			};
+		});
+		const levelOf = require_data.makeLevelFn(raw.map((w) => w.total), props.scale);
+		raw.forEach((w) => w.level = levelOf(w.total));
+		return raw;
+	}, [full, typeof props.scale === "string" ? props.scale : props.scale?.join(",")]);
+	const maxWeek = Math.max(1, ...allWeeks.map((w) => w.total));
+	const weeks = (0, react.useMemo)(() => allWeeks.slice(allWeeks.length - calendar.weeks.length).map((w, index) => ({
+		...w,
+		index,
+		days: calendar.weeks[index].filter((d) => d !== null)
+	})), [allWeeks, calendar]);
+	const { onWeekClick } = props;
+	const onActivate = (0, react.useCallback)((i) => onWeekClick?.(weeks[i]), [onWeekClick, weeks]);
+	const interaction = useGraphInteraction({
+		rootRef,
+		count: weeks.length,
+		stepX: 1,
+		stepY: 0,
+		onActivate
+	});
+	const labelH = 14;
+	const minH = windows ? 30 : 3;
+	const width = weeks.length * pitch - gap;
+	const svgH = height + labelH;
+	const svg = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: fit === "scale" ? "100%" : width,
+		height: fit === "scale" ? void 0 : svgH,
+		viewBox: `0 0 ${width} ${svgH}`,
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+				x1: 0,
+				x2: width,
+				y1: height + .5,
+				y2: height + .5,
+				stroke: "var(--cg-border)"
+			}),
+			weeks.map((w) => {
+				const h = w.total === 0 ? minH * .8 : minH + w.total / maxWeek * (height - minH);
+				const x = w.index * pitch;
+				const y = height - h;
+				const ww = Math.max(2, barWidth - 4);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					className: "cg-cell cg-rise",
+					"data-cg-i": w.index,
+					style: cellDelay(w.index),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x,
+						y,
+						width: barWidth,
+						height: h,
+						rx: 1.5,
+						fill: `var(--cg-l${w.level})`
+					}), windows && w.days.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+						x: x + (barWidth - ww) / 2,
+						y: y + 3 + d.dayIndex * 3.6,
+						width: ww,
+						height: 2.2,
+						rx: .5,
+						fill: d.count > 0 ? "#fff6c8" : "currentColor",
+						opacity: d.count > 0 ? .92 : .12,
+						style: { color: "var(--cg-mix)" }
+					}, d.date))]
+				}, w.index);
+			}),
+			calendar.months.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				className: "cg-label",
+				x: m.weekIndex * pitch,
+				y: svgH - 2,
+				children: m.label
+			}, `${m.year}-${m.month}`))
+		]
+	}), [
+		weeks,
+		calendar.months,
+		width,
+		svgH,
+		height,
+		pitch,
+		barWidth,
+		maxWeek,
+		minH,
+		windows,
+		fit
+	]);
+	const describe = (i) => {
+		const w = weeks[i];
+		return {
+			title: `${require_data.formatNumber(w.total, props.locale)} ${require_data.pluralize(w.total, props.unit)}`,
+			subtitle: w.days[0] ? `${require_data.formatDate(w.days[0].date, props.locale, {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			})} · ${w.activeDays}/7` : void 0
+		};
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphShell, {
+		props,
+		interaction,
+		variant: "skyline",
+		describe,
+		summary: summaryOf(calendar, props),
+		title: defaultTitle(full.total, props),
+		children: svg
+	});
+}
+// src/variants/TerminalGraph.tsx
+const terminalCharsets = {
+	blocks: [
+		"··",
+		"░░",
+		"▒▒",
+		"▓▓",
+		"██"
+	],
+	squares: [
+		"□ ",
+		"▪ ",
+		"■ ",
+		"■ ",
+		"■ "
+	],
+	ascii: [
+		". ",
+		": ",
+		"+ ",
+		"# ",
+		"@ "
+	],
+	dots: [
+		"· ",
+		"• ",
+		"• ",
+		"● ",
+		"● "
+	]
+};
+const CHAR_W = 7.22;
+const MIN_FONT = 6;
+/** Real monospace text, for portfolios with a terminal look. */
+function TerminalGraph(props) {
+	const { charset = "blocks", command = "git log --since='1 year ago' | heatmap", prompt = "~ $", colored = true, fit = "crop" } = props;
+	const chars = terminalCharsets[charset];
+	const { calendar, periodTotal, interaction } = useCalendarGraph(props, { fit: (() => {
+		const k = fit === "scale" ? MIN_FONT / 12 : 1;
+		return {
+			pitch: CHAR_W * 2 * k,
+			reserved: CHAR_W * 5 * k + 34,
+			enabled: true
+		};
+	})() });
+	const weekdays = (0, react.useMemo)(() => require_data.weekdayLabels(props.locale, props.weekStart ?? 0), [props.locale, props.weekStart]);
+	const [fontSize, setFontSize] = (0, react.useState)(12);
+	const { rootRef } = interaction;
+	const cols = 5 + calendar.weeks.length * 2;
+	useIsomorphicLayoutEffect(() => {
+		const el = rootRef.current;
+		if (fit !== "scale" || !el || typeof ResizeObserver === "undefined") {
+			setFontSize(12);
+			return;
+		}
+		const update = () => {
+			const avail = el.clientWidth - 34;
+			if (avail > 0) setFontSize(Math.max(MIN_FONT, Math.min(12, avail / cols * (12 / CHAR_W))));
+		};
+		update();
+		const ro = new ResizeObserver(update);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [
+		fit,
+		cols,
+		rootRef
+	]);
+	const color = (l) => colored ? `var(--cg-l${l === 0 ? 2 : l})` : "var(--cg-text)";
+	const op = (l) => l === 0 ? .35 : colored ? 1 : .4 + l * .15;
+	const body = (0, react.useMemo)(() => {
+		const cols = calendar.weeks.length * 2;
+		const header = Array.from({ length: cols }, () => " ");
+		for (const m of calendar.months) {
+			const lbl = m.label.replace(".", "").slice(0, 3);
+			for (let i = 0; i < lbl.length && m.weekIndex * 2 + i < cols; i++) header[m.weekIndex * 2 + i] = lbl[i];
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			"     ",
+			header.join(""),
+			"\n",
+			Array.from({ length: 7 }, (_, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+				(r % 2 === 1 ? weekdays[r].replace(".", "").slice(0, 3) : "").padEnd(5),
+				calendar.weeks.map((w, wi) => {
+					const d = w[r];
+					if (!d) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: "  " }, wi);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cg-cell",
+						"data-cg-i": d.index,
+						style: {
+							...cellDelay(wi),
+							color: color(d.level),
+							opacity: op(d.level)
+						},
+						children: chars[d.level]
+					}, d.date);
+				}),
+				"\n"
+			] }, r))
+		] });
+	}, [
+		calendar,
+		weekdays,
+		chars,
+		colored
+	]);
+	const [less, more] = props.legendLabels ?? ["less", "more"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphShell, {
+		props: {
+			...props,
+			showTotal: false,
+			showLegend: false
+		},
+		interaction,
+		variant: "terminal",
+		surface: true,
+		describe: (i) => describeDay(calendar.days[i], props),
+		summary: summaryOf(calendar, props),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("pre", {
+			className: "cg-term",
+			style: fontSize !== 12 ? { fontSize } : void 0,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "cg-prompt cg-wrap",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: prompt }),
+						" ",
+						command
+					]
+				}),
+				"\n\n",
+				body,
+				"\n",
+				(props.showTotal !== false || props.showLegend !== false) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "cg-foot",
+					children: [props.showTotal !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "cg-prompt",
+						children: props.title ?? `${require_data.formatNumber(periodTotal, props.locale)} ${require_data.pluralize(periodTotal, props.unit)} ${periodText(props)}`
+					}), props.showLegend !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						less,
+						" ",
+						[
+							0,
+							1,
+							2,
+							3,
+							4
+						].map((l) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								color: color(l),
+								opacity: op(l)
+							},
+							children: chars[l]
+						}, l)),
+						more
+					] })]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "cg-prompt",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: prompt }),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "cg-caret" })
+					]
+				})
+			]
+		})
+	});
+}
+// src/variants/CompactGraph.tsx
+/** A single row with the last N days, for headers, cards and footers. */
+function CompactGraph(props) {
+	const { days: n = 30, cellSize = 10, gap = 3, radius = 2, showStreak = true } = props;
+	const rootRef = (0, react.useRef)(null);
+	const endKey = props.endDate instanceof Date ? props.endDate.getTime() : props.endDate;
+	const scaleKey = typeof props.scale === "string" ? props.scale : props.scale?.join(",");
+	const days = (0, react.useMemo)(() => {
+		const slice = require_data.buildCalendar(props.data, {
+			weeks: Math.ceil(n / 7) + 1,
+			endDate: props.endDate
+		}).days.slice(-n);
+		const levelOf = require_data.makeLevelFn(slice.map((d) => d.count), props.scale);
+		return slice.map((d, i) => ({
+			...d,
+			index: i,
+			weekIndex: i,
+			level: levelOf(d.count)
+		}));
+	}, [
+		props.data,
+		n,
+		endKey,
+		scaleKey
+	]);
+	const stats = (0, react.useMemo)(() => require_data.computeStats(days), [days]);
+	const { onDayClick } = props;
+	const onActivate = (0, react.useCallback)((i) => onDayClick?.(days[i]), [onDayClick, days]);
+	const interaction = useGraphInteraction({
+		rootRef,
+		count: days.length,
+		stepX: 1,
+		stepY: 0,
+		onActivate
+	});
+	const pitch = cellSize + gap;
+	const width = days.length * pitch - gap;
+	const svg = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width,
+		height: cellSize,
+		viewBox: `0 0 ${width} ${cellSize}`,
+		"aria-hidden": "true",
+		children: days.map((d) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			className: "cg-cell",
+			"data-cg-i": d.index,
+			x: d.index * pitch,
+			y: 0,
+			width: cellSize,
+			height: cellSize,
+			rx: radius,
+			fill: `var(--cg-l${d.level})`,
+			style: cellDelay(d.index / 3)
+		}, d.date))
+	}), [
+		days,
+		width,
+		cellSize,
+		pitch,
+		radius
+	]);
+	const streak = props.streakLabel ?? ((s) => `${s} day streak`);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphShell, {
+		props: {
+			...props,
+			showLegend: props.showLegend ?? false
+		},
+		interaction,
+		variant: "compact",
+		describe: (i) => describeDay(days[i], props),
+		summary: `${stats.total} ${require_data.pluralize(stats.total, props.unit)} in the last ${n} days`,
+		title: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: require_data.formatNumber(stats.total, props.locale) }),
+			" ",
+			require_data.pluralize(stats.total, props.unit),
+			" ",
+			(props.rangeLabel ?? ((d) => `in the last ${d} days`))(n)
+		] }),
+		headerEnd: showStreak && stats.currentStreak > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: { color: "var(--cg-muted)" },
+			children: streak(stats.currentStreak)
+		}),
+		children: svg
+	});
+}
+exports.ClassicGraph = ClassicGraph;
+exports.CompactGraph = CompactGraph;
+exports.DotsGraph = DotsGraph;
+exports.GITHUB_CONTRIBUTIONS_QUERY = require_data.GITHUB_CONTRIBUTIONS_QUERY;
+exports.IsometricGraph = IsometricGraph;
+exports.RadialGraph = RadialGraph;
+exports.SkylineGraph = SkylineGraph;
+exports.TerminalGraph = TerminalGraph;
+exports.buildCalendar = require_data.buildCalendar;
+exports.computeStats = require_data.computeStats;
+exports.cropCalendar = require_data.cropCalendar;
+exports.fetchGitHubContributions = require_data.fetchGitHubContributions;
+exports.fetchGitLabContributions = require_data.fetchGitLabContributions;
+exports.formatDate = require_data.formatDate;
+exports.fromDates = require_data.fromDates;
+exports.fromGitHub = require_data.fromGitHub;
+exports.fromGitLab = require_data.fromGitLab;
+exports.generateSampleData = require_data.generateSampleData;
+exports.makeLevelFn = require_data.makeLevelFn;
+exports.mergeSources = require_data.mergeSources;
+exports.resolveTheme = require_data.resolveTheme;
+exports.sampleProfiles = require_data.sampleProfiles;
+exports.terminalCharsets = terminalCharsets;
+exports.themeNames = require_data.themeNames;
+exports.themeVars = require_data.themeVars;
+exports.themes = require_data.themes;