50: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"] 51:T2888,import { useId, type ComponentProps, type CSSProperties, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type ChangeType = "new" | "improved" | "fixed"; export type ChangelogChange = { type: ChangeType; text: string }; export type TimelineRelease = { version: string; /** Display date, e.g. "6 Oct 2026". */ date: string; /** Machine-readable date for the element, e.g. "2026-10-06". */ dateTime: string; title: string; summary: string; changes: ChangelogChange[]; /** Optional screenshot-like visual shown under the changes. */ visual?: ReactNode; }; export type ChangelogTimelineProps = { eyebrow?: string; title?: string; description?: string; releases?: TimelineRelease[]; /** Fill of the "New" tag. Text on it is white, so keep it saturated or dark. Default Devsloka blue. */ accent?: string; /** Fill of the "Improved" tag. Text on it is near-black, so keep it light. Default pale blue tint. */ highlight?: string; } & ComponentProps<"section">; const TYPE_LABEL: Record = { new: "New", improved: "Improved", fixed: "Fixed", }; const TAG_CLASS: Record = { new: "bg-[var(--block-accent)] text-white", improved: "bg-[var(--block-highlight)] text-[#0A0A0A]", fixed: "bg-foreground text-background", }; /** A small UI fragment: a snapshot diff, baseline against the new capture. */ function SnapshotDiff() { return (

Button / Primary / Disabled 0.42% changed

{(["Baseline", "Current"] as const).map((side) => (

{side}

Save changes {side === "Current" && ( )}

))}

Padding 16px → 20px, from token space.5 Grouped under Button · 14 stories

); } function Screenshot() { return (

Fig. 1 — The drift report sits beside your team’s existing dashboards.

An analytics dashboard with charts open on a laptop screen — Fig. 1 — The drift report sits beside your team’s existing dashboards.

); } const DEFAULT_RELEASES: TimelineRelease[] = [ { version: "5.0.0", date: "6 Oct 2026", dateTime: "2026-10-06", title: "Baselines now live in your repository", summary: "Plumbline 5 stores approved snapshots as small files under .plumbline/, so every branch carries its own visual baseline and a revert restores the screenshots along with the code.", changes: [ { type: "new", text: "Baselines are committed as lossless WebP, about 40 KB per snapshot." }, { type: "new", text: "plumbline review opens the review queue locally on port 4410." }, { type: "improved", text: "Capture on a 400-story library dropped from 6m 12s to 2m 41s." }, { type: "fixed", text: "Snapshots taken at 125% zoom no longer report a 1px shift on every edge." }, ], }, { version: "4.12.0", date: "29 Sep 2026", dateTime: "2026-09-29", title: "Review diffs by component, not by page", summary: "When a shared button changes, you used to approve it on every page it appeared on. The review queue now groups snapshots by component, so one decision covers all of its stories.", changes: [ { type: "new", text: "Component grouping in the review queue, with a count of affected stories." }, { type: "new", text: "plumbline approve --since main approves only what changed on your branch." }, { type: "improved", text: "The diff overlay renders 3x faster on 4K snapshots (median 410 ms to 130 ms)." }, { type: "fixed", text: "Webfont 404s on Linux runners no longer fall back silently to a system font." }, ], visual: , }, { version: "4.11.2", date: "16 Sep 2026", dateTime: "2026-09-16", title: "Fewer flaky text diffs", summary: "A patch release for teams who saw diffs on small text that nobody could see with their eyes.", changes: [ { type: "fixed", text: "Subpixel antialiasing is ignored on text set below 12px." }, { type: "fixed", text: "Approving a snapshot on a closed pull request no longer reopens its check." }, { type: "improved", text: "A missing baseline branch is now named in the error, not just “not found”." }, ], }, { version: "4.11.0", date: "2 Sep 2026", dateTime: "2026-09-02", title: "Token drift reports", summary: "Plumbline now reads your design tokens and flags hard-coded values that are almost, but not quite, a token. Most teams find a dozen in the first run.", changes: [ { type: "new", text: "Drift report flags colours within ΔE 2 of a token and spacing within 2px." }, { type: "new", text: "A weekly digest per team, sent Monday at 09:00 in the team's time zone." }, { type: "improved", text: "Uploads resume after a dropped connection instead of restarting the run." }, ], visual: , }, ]; export function ChangelogTimeline({ eyebrow = "Changelog", title = "What changed in Plumbline", description = "Every release of the visual testing tool, newest first. Patch notes are written by the engineer who shipped the change.", releases = DEFAULT_RELEASES, accent = "#0A6EFF", highlight = "#E8F0FF", className, style, ...props }: ChangelogTimelineProps) { const headingId = useId(); return (

{eyebrow}

{title}

{description}

{release.date}
v{release.version}

{/* The hairline that runs between releases, with a square node per release. */}
{release.title}

{release.summary}
- {TYPE_LABEL[change.type]} {change.text}
{release.visual &&
{release.visual}
}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"src/registry/blocks/changelog/changelog-timeline.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]

{release.title}