63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 65:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 67: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 68:T4457,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, } from "react"; // --------------------------------------------------------------------------- // CreepSpan — an SLO error-budget meter drawn as a taut wire spanning the // card, which sags by irreversible creep. One governing scalar per day, the // burn multiple `b`, drives everything: each day's PLASTIC strain increments // by max(0, b-1) * k and never decreases (a `Math.max` accumulator, not a // spring) — that is the permanent record of budget already spent, and it is // the only thing that ever moves the wire's baseline down. A small ELASTIC // offset rides on top of just the most recent point (today's live reading), // easing toward its target on an overdamped (no-overshoot) CSS transition — // the sole animated part, and explicitly cosmetic: it never feeds the // strain array, so it can visually wobble without the budget math lying. // // The wire itself is a sequence of per-day straight segments (SVG lines), // solid across logged history and dashed across the forward extrapolation // at the current burn rate. A segment thickens (stroke-width, never color) // on any day that burned above 1x — so a spike from three weeks ago stays a // visibly heavier, permanently sagged kink, not a color that faded back. // The dashed extrapolation's intersection with the floor rail (budget = 0) // IS the projected exhaustion date, read straight off the same geometry. // // Accessibility: the SVG is decorative (aria-hidden). The one real control // is a role="slider" date scrubber overlaid on the chart — arrow keys step // one day, Home/End jump to the window's rails (earliest logged day / // projected exhaustion day, or today if nothing is projected), and pointer // hover/drag over the chart does the same by position. Its aria-valuetext // and the visible mono readout line below the chart are both built by one // function reading the same `full.strain` / `full.burn` array that drew the // wire, so the number and the picture cannot disagree. A separate sr-only // aria-live=polite region announces only actual threshold crossings (burn // crossing 1x, budget reaching 0) — never on every scrub tick, since AT // already gets per-tick reads through the slider's own value text. // --------------------------------------------------------------------------- export interface DailyBurn { /** ISO date, yyyy-mm-dd. */ date: string; /** Burn multiple for that day. 1 = exactly on budget, 2 = twice the sustainable rate. */ burn: number; } export interface CreepSpanProps { /** What's being metered, e.g. "checkout-api 30d error budget". */ label?: string; /** Oldest -> most recent (today). At least 2 entries. */ history: DailyBurn[]; /** Live instantaneous burn, overriding history's last logged value. Defaults to it. */ currentBurn?: number; /** Budget window described in the caption. Default 30. */ windowDays?: number; /** Plastic strain scale per (burn-1)*day. Default 0.05. */ k?: number; /** Cap on the forward dashed extrapolation, in days. Default 90. */ maxProjectionDays?: number; className?: string; } const THIN = 1.5; const THICK = 3.25; const ELASTIC_SCALE = 6; // px of cosmetic sag per unit of burn above 1x const ELASTIC_CAP = 11; const SETTLE_MS = 1100; const SETTLE_EASE = "cubic-bezier(0.16, 1, 0.3, 1)"; // ease-out-expo: overdamped, never overshoots const WIDTH = 760; const VIEW_H = 176; const TOP_Y = 26; const FLOOR_Y = 150; const PAD_X = 18; function clamp(v: number, lo: number, hi: number): number { return Math.min(hi, Math.max(lo, v)); } function addDays(iso: string, n: number): Date { const d = new Date(`${iso}T00:00:00`); d.setDate(d.getDate() + n); return d; } function fmtDate(d: Date): string { return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }).format(d); } function useReducedMotion(): boolean { const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } export function CreepSpan({ label = "SLO error budget", history, currentBurn, windowDays = 30, k = 0.05, maxProjectionDays = 90, className = "", }: CreepSpanProps) { const uid = useId().replace(/:/g, ""); const reducedMotion = useReducedMotion(); const historyCount = history.length; const lastIdx = historyCount - 1; const liveBurn = currentBurn ?? history[lastIdx]?.burn ?? 1; // The one place strain is computed. Monotonic accumulator — a running // Math.max-style sum, never a decrement — so "spent" can only grow. const { strain, burns, dates } = useMemo(() => { const strainArr: number[] = []; const burnArr: number[] = []; const dateArr: Date[] = []; let acc = 0; for (let i = 0; i < historyCount; i++) { const b = i === lastIdx ? liveBurn : history[i].burn; acc += Math.max(0, b - 1) * k; strainArr.push(acc); burnArr.push(b); dateArr.push(new Date(`${history[i].date}T00:00:00`)); } return { strain: strainArr, burns: burnArr, dates: dateArr }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [history, historyCount, lastIdx, liveBurn, k]); const lastStrain = strain[lastIdx] ?? 0; const remainingFrac = clamp(1 - lastStrain, 0, 1); const excessPerDay = Math.max(0, liveBurn - 1) * k; const projection = useMemo(() => { if (excessPerDay <= 0 || remainingFrac <= 0 || historyCount === 0) return null; const rawDays = remainingFrac / excessPerDay; if (rawDays > maxProjectionDays) return null; const days = Math.max(1, Math.ceil(rawDays)); return { days, exhaustDate: addDays(history[lastIdx].date, days) }; }, [excessPerDay, remainingFrac, maxProjectionDays, history, lastIdx, historyCount]); // Full domain = logged history + (if projected) the dashed extrapolation, // one shared array set. Everything the wire draws and everything the // scrubber reads comes out of this same object — that's the falsifiable // guarantee: the number and the picture cannot disagree. const full = useMemo(() => { const fStrain = [...strain]; const fBurn = [...burns]; const fDates = [...dates]; if (projection) { for (let j = 1; j <= projection.days; j++) { fStrain.push(clamp(lastStrain + excessPerDay * j, 0, 1)); fBurn.push(liveBurn); fDates.push(addDays(history[lastIdx].date, j)); } } return { strain: fStrain, burn: fBurn, dates: fDates }; }, [strain, burns, dates, projection, lastStrain, excessPerDay, liveBurn, history, lastIdx]); const totalCount = full.strain.length; const xFor = useCallback( (i: number) => PAD_X + (i / Math.max(1, totalCount - 1)) * (WIDTH - PAD_X * 2), [totalCount] ); const yForStrain = useCallback((s: number) => TOP_Y + (FLOOR_Y - TOP_Y) * clamp(s, 0, 1), []); // Cosmetic elastic sag on today's point only. Eases toward its target on // an overdamped CSS transition; skipped entirely under reduced motion, per // the reduced-motion contract: the wire renders at its true position with // no settle. const elasticTarget = clamp(Math.max(0, liveBurn - 1) * ELASTIC_SCALE, 0, ELASTIC_CAP); const [elasticPx, setElasticPx] = useState(reducedMotion ? elasticTarget : 0); useEffect(() => { if (reducedMotion) { setElasticPx(elasticTarget); return; } const id = requestAnimationFrame(() => setElasticPx(elasticTarget)); return () => cancelAnimationFrame(id); }, [elasticTarget, reducedMotion]); // Threshold-crossing announcements only — never a per-tick live region. const [announcement, setAnnouncement] = useState(""); const burnAboveOneRef = useRef(liveBurn > 1); const exhaustedRef = useRef(remainingFrac <= 0); useEffect(() => { const nowAbove = liveBurn > 1; if (nowAbove !== burnAboveOneRef.current) { burnAboveOneRef.current = nowAbove; setAnnouncement( nowAbove ? `Burning above budget, ${liveBurn.toFixed(1)}x` : `Burn back at or under budget, ${liveBurn.toFixed(1)}x` ); } }, [liveBurn]); useEffect(() => { const nowExhausted = remainingFrac <= 0; if (nowExhausted !== exhaustedRef.current) { exhaustedRef.current = nowExhausted; if (nowExhausted) setAnnouncement("Error budget exhausted"); } }, [remainingFrac]); // Date scrubber — the one accessible control. const [selIndex, setSelIndex] = useState(lastIdx); useEffect(() => { setSelIndex((i) => clamp(i, 0, totalCount - 1)); }, [totalCount]); const overlayRef = useRef(null); const composeReadout = useCallback( (i: number) => { const idx = clamp(i, 0, totalCount - 1); const d = full.dates[idx]; const remaining = Math.round(clamp(1 - full.strain[idx], 0, 1) * 100); const b = full.burn[idx]; const projectedTag = idx > lastIdx ? " (projected)" : ""; const exhaustText = projection ? `exhaustion projected ${fmtDate(projection.exhaustDate)}` : "no exhaustion projected at current burn"; return `${fmtDate(d)}${projectedTag} — ${remaining}% budget remaining, burning at ${b.toFixed(1)}x, ${exhaustText}`; }, [full, totalCount, lastIdx, projection] ); const indexFromClientX = useCallback( (clientX: number) => { const rect = overlayRef.current?.getBoundingClientRect(); if (!rect || rect.width === 0) return selIndex; const frac = clamp((clientX - rect.left) / rect.width, 0, 1); return Math.round(frac * (totalCount - 1)); }, [selIndex, totalCount] ); const onPointerMove = (e: ReactPointerEvent) => { setSelIndex(indexFromClientX(e.clientX)); }; const onPointerDown = (e: ReactPointerEvent) => { setSelIndex(indexFromClientX(e.clientX)); }; const onKeyDown = (e: ReactKeyboardEvent) => { let next = selIndex; switch (e.key) { case "ArrowLeft": case "ArrowDown": next = selIndex - 1; break; case "ArrowRight": case "ArrowUp": next = selIndex + 1; break; case "PageDown": next = selIndex - 7; break; case "PageUp": next = selIndex + 7; break; case "Home": next = 0; break; case "End": next = totalCount - 1; break; default: return; } e.preventDefault(); setSelIndex(clamp(next, 0, totalCount - 1)); }; // ---- geometry: solid historical segments, one per day ----------------- const historyY = dates.map((_, i) => yForStrain(strain[i])); const renderY = (i: number) => (i === lastIdx ? historyY[i] + elasticPx : historyY[i]); const segments: { x1: number; y1: number; x2: number; y2: number; thick: boolean; animate: boolean }[] = []; for (let i = 1; i < historyCount; i++) { const isLast = i === lastIdx; segments.push({ x1: xFor(i - 1), y1: historyY[i - 1], x2: xFor(i), y2: renderY(i), thick: burns[i] > 1, animate: isLast, }); } const dashSegments: { x1: number; y1: number; x2: number; y2: number }[] = []; for (let i = historyCount; i < totalCount; i++) { const prevY = i === historyCount ? historyY[lastIdx] + elasticPx : yForStrain(full.strain[i - 1]); dashSegments.push({ x1: xFor(i - 1), y1: prevY, x2: xFor(i), y2: yForStrain(full.strain[i]), }); } const exhaustX = projection ? xFor(totalCount - 1) : null; const remainingPct = Math.round(remainingFrac * 100); const headerExhaust = projection ? fmtDate(projection.exhaustDate) : "not projected"; const readout = composeReadout(selIndex); const gradId = `ns-creep-thumb-${uid}`; return (

{label}

REMAINING {remainingPct}% BURN {liveBurn.toFixed(1)}x EXHAUST {headerExhaust}

100% 0% {/* scrubber thumb — position only, never accent-colored: accent is reserved for the focus ring below. */} ); } 62:["$","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":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L65",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/creep-span/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/creep-span.tsx"}],"className":"h-[70svh] min-h-80"}]]}]