"use client"; import type { HTMLAttributes, ReactNode } from "react"; import { useId, useState } from "react"; export type ChangelogGroups = { added?: string[]; changed?: string[]; fixed?: string[]; }; export type ChangelogEntryCardProps = Omit, "title"> & { version?: string; /** ISO date, for example "2026-09-12". Formatted in UTC so server and client agree. */ date?: string; title?: ReactNode; summary?: ReactNode; groups?: ChangelogGroups; /** Number of changes shown before the list collapses. */ visibleCount?: number; expanded?: boolean; defaultExpanded?: boolean; onExpandedChange?: (expanded: boolean) => void; locale?: string; }; const groupMeta: { key: keyof ChangelogGroups; label: string; marker: string }[] = [ { key: "added", label: "Added", marker: "bg-[#1E7A4F] dark:bg-[#6CCB9C]" }, { key: "changed", label: "Changed", marker: "bg-[#1F4B8E] dark:bg-[#8DB2E6]" }, { key: "fixed", label: "Fixed", marker: "bg-[#B54708] dark:bg-[#F5B76A]" }, ]; const sampleGroups: ChangelogGroups = { added: [ "Lock-aware rollbacks undo only the statements that already ran.", "Planner support for partitioned tables with up to 4,096 partitions.", "Per-statement lock_timeout in halyard.toml.", ], changed: ["Plans for tables over 50 GB now finish in about a third of the time."], fixed: [ "Renaming a column referenced by a generated column no longer fails the plan.", "The diff view keeps comment threads attached after a force-push.", "CLI exits with code 2, not 1, when a plan has blocking warnings.", ], }; function formatDate(value: string, locale: string) { const parsed = new Date(value.length === 10 ? value + "T00:00:00Z" : value); if (Number.isNaN(parsed.getTime())) return value; return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" }).format(parsed); } export function ChangelogEntryCard({ version = "2.14.0", date = "2026-09-12", title = "Lock-aware rollbacks", summary = "Deploys that stall behind a long transaction now pause, report the blocking query, and roll back cleanly.", groups = sampleGroups, visibleCount = 4, expanded, defaultExpanded = false, onExpandedChange, locale = "en-US", className = "", ...props }: ChangelogEntryCardProps) { const listId = useId(); const [internalExpanded, setInternalExpanded] = useState(defaultExpanded); const isExpanded = expanded !== undefined ? expanded : internalExpanded; const total = groupMeta.reduce((count, group) => count + (groups[group.key]?.length ?? 0), 0); const collapsible = total > visibleCount; const shown: Array<(typeof groupMeta)[number] & { entries: string[] }> = []; let remaining = isExpanded || !collapsible ? Infinity : visibleCount; for (const group of groupMeta) { const entries = (groups[group.key] ?? []).slice(0, Math.max(0, remaining)); remaining -= entries.length; if (entries.length > 0) shown.push({ ...group, entries }); } function toggle() { const next = !isExpanded; if (expanded === undefined) setInternalExpanded(next); onExpandedChange?.(next); } return (

{"Version " + version} {formatDate(date, locale)}

{title}

{summary ?

{summary}

: null}

{shown.map((group) => (

{entry}

))}

{collapsible ? ( ) : null}

); }

{group.label}