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:T55d6,"use client"; import { StatusBarCard } from "@/components/blocks/status-bar"; import { useStatusBlocksLabels } from "@/components/blocks/status-i18n"; import type { StatusBarData, StatusEventType, StatusType, } from "@/components/blocks/status.types"; import { Button } from "@/components/ui/button"; import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card"; import { Separator } from "@/components/ui/separator"; import { Skeleton } from "@/components/ui/skeleton"; import { useMediaQuery } from "@/hooks/use-media-query"; import { cn } from "@/lib/utils"; import { type Locale, addMonths, format, isSameDay, startOfDay, startOfMonth, subMonths, } from "date-fns"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { type FocusEvent, type ReactNode, type RefObject, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { DayPicker, type DayProps } from "react-day-picker"; type BarEvent = StatusBarData["events"][number]; export interface StatusCalendarMarker { id: string | number; /** Day this marker belongs to, in the viewer's local timezone. */ date: Date; /** Drives the day cell's tinted-fill color (worst-severity wins per day). */ status: Exclude; /** Event shape mirrors StatusBarEvent so the popover can render the same row. */ type: StatusEventType; name: string; /** Full event range (use the event's true start/end, not the per-day instance). */ from?: Date | null; to?: Date | null; isAggregated?: boolean; href?: string; } export interface StatusCalendarProps { markers: StatusCalendarMarker[]; /** Controlled month. Defaults to the first of the current month. */ month?: Date; defaultMonth?: Date; onMonthChange?: (month: Date) => void; /** 0 = Sunday, 1 = Monday. Mockup shows Monday. */ weekStartsOn?: 0 | 1; /** * Treat the calendar as status history: render days after the latest event * (or today, whichever is later) as disabled. Days up to and including that * boundary — including scheduled future events — stay interactive. Forward * navigation is still capped at the latest event's month. Defaults to false. */ disableFuture?: boolean; className?: string; /** Calendar header label on the left side of the chrome. */ title?: ReactNode; /** * date-fns Locale used by DayPicker for weekday/month names. Callers should * pass the locale resolved from their i18n layer; defaults to en-US. */ locale?: Locale; /** Override how a single marker row renders inside the hover card. */ renderMarkerRow?: (marker: StatusCalendarMarker) => ReactNode; /** * Restrict which event types drive the calendar (day fills, hover cards, and * the forward-navigation cap). Markers of any other type are ignored. When * omitted, all event types are shown. */ eventTypes?: StatusEventType[]; } const SEVERITY_RANK: Record = { error: 3, degraded: 2, info: 1, success: 0, }; // Hover deepens the same tint rather than swapping to the neutral accent, so // the severity signal survives the hover state. const SEVERITY_FILL: Record = { error: "bg-destructive/10 hover:bg-destructive/20 text-destructive", degraded: "bg-warning/10 hover:bg-warning/20 text-warning", info: "bg-info/10 hover:bg-info/20 text-info", success: "bg-success/10 hover:bg-success/20 text-success", }; function dayKey(date: Date): string { return format(date, "yyyy-MM-dd"); } function worstSeverity( markers: StatusCalendarMarker[], ): StatusCalendarMarker["status"] { return markers.reduce((worst, m) => { return SEVERITY_RANK[m.status] > SEVERITY_RANK[worst] ? m.status : worst; }, "success"); } export function StatusCalendar({ markers, month, defaultMonth, onMonthChange, weekStartsOn = 1, disableFuture = false, className, title, locale, renderMarkerRow, eventTypes, }: StatusCalendarProps) { const labels = useStatusBlocksLabels(); const resolvedTitle = title ?? labels.calendarTitle; const formatMonthYear = useCallback( (d: Date) => { // date-fns format reads its global locale (set by DateFnsProvider via // setDefaultOptions), so this picks up the active language without us // having to pass it explicitly here. return format(d, "MMM yyyy", locale ? { locale } : undefined); }, [locale], ); const [internalMonth, setInternalMonth] = useState(() => startOfMonth(month ?? defaultMonth ?? new Date()), ); const currentMonth = month ? startOfMonth(month) : internalMonth; const setMonth = (next: Date) => { const normalized = startOfMonth(next); if (month === undefined) setInternalMonth(normalized); onMonthChange?.(normalized); }; // Drop markers whose type the caller opted out of before anything else reads // them, so excluded types affect neither the fills, the cards, nor nav. const visibleMarkers = useMemo(() => { if (!eventTypes) return markers; const allowed = new Set(eventTypes); return markers.filter((m) => allowed.has(m.type)); }, [markers, eventTypes]); const markersByDay = useMemo(() => { const map = new Map(); for (const marker of visibleMarkers) { const key = dayKey(marker.date); const bucket = map.get(key); if (bucket) bucket.push(marker); else map.set(key, [marker]); } return map; }, [visibleMarkers]); // Cap forward navigation at the latest month that has a marker (or the // current month, whichever is later). Prevents browsing into empty future // months when no maintenance/event is scheduled. const maxMonth = useMemo(() => { const today = startOfMonth(new Date()); return visibleMarkers.reduce((acc, m) => { const mm = startOfMonth(m.date); return mm.getTime() > acc.getTime() ? mm : acc; }, today); }, [visibleMarkers]); const canGoNext = currentMonth.getTime() < maxMonth.getTime(); // Status-history cutoff: disable days strictly after the latest event (or // today, whichever is later) so the empty trailing future is blocked while // scheduled future events stay reachable. Null = no blocking. const maxDay = useMemo(() => { if (!disableFuture) return null; const today = startOfDay(new Date()); return visibleMarkers.reduce((acc, m) => { const d = startOfDay(m.date); return d.getTime() > acc.getTime() ? d : acc; }, today); }, [visibleMarkers, disableFuture]); // Open state lives at the parent so the popover survives DayPicker remounts. // Interaction model mirrors `status-bar.tsx` (hover on non-touch, tap pins). const isTouch = useMediaQuery("(hover: none)"); const containerRef = useRef(null); const [activeDayKey, setActiveDayKey] = useState(null); // Via ref, not a `Day` dep: keeps `Day` identity stable so cells don't remount // every hover. CalendarDay re-renders top-down on setActiveDayKey regardless. const activeDayKeyRef = useRef(activeDayKey); useEffect(() => { activeDayKeyRef.current = activeDayKey; }, [activeDayKey]); const [interaction, setInteraction] = useState< "hover" | "pin" | "focus" | null >(null); const interactionRef = useRef(interaction); useEffect(() => { interactionRef.current = interaction; }, [interaction]); const closeTimerRef = useRef(null); const cancelClose = useCallback(() => { if (closeTimerRef.current !== null) { window.clearTimeout(closeTimerRef.current); closeTimerRef.current = null; } }, []); const close = useCallback(() => { cancelClose(); setActiveDayKey(null); setInteraction(null); }, [cancelClose]); // Tap/click pins the card; tapping the pinned day again closes it. This is // the only open path on touch — Radix HoverCard ignores touch pointers. The // `interactionRef` lags a tap's focus event, so a focus-then-click on the // same day still reads "pin" and toggles closed. const handleClick = useCallback( (key: string) => { cancelClose(); setActiveDayKey((prev) => { if (prev === key && interactionRef.current === "pin") { setInteraction(null); return null; } setInteraction("pin"); return key; }); }, [cancelClose], ); const handleHoverStart = useCallback( (key: string) => { if (isTouch) return; cancelClose(); setActiveDayKey(key); setInteraction("hover"); }, [isTouch, cancelClose], ); const handleHoverEnd = useCallback(() => { if (interactionRef.current !== "hover") return; closeTimerRef.current = window.setTimeout(() => { setActiveDayKey(null); setInteraction(null); }, 100); }, []); const handleFocus = useCallback((key: string) => { setActiveDayKey(key); setInteraction("focus"); }, []); const handleBlur = useCallback( (e: FocusEvent) => { const next = e.relatedTarget as Element | null; // Focus moving into the card (e.g. an event link) shouldn't close it. if (next?.closest('[data-slot="status-bar-card"]')) return; close(); }, [close], ); // Outside pointerdown closes the pinned card. Radix's own dismiss is // suppressed on touch (see HoverCardContent) and the card is portaled out of // `containerRef`, so we also keep clicks that land inside the card itself. useEffect(() => { if (activeDayKey === null) return; const onDown = (e: MouseEvent) => { const target = e.target as Element | null; if (containerRef.current?.contains(target)) return; if (target?.closest('[data-slot="status-bar-card"]')) return; close(); }; document.addEventListener("mousedown", onDown); return () => document.removeEventListener("mousedown", onDown); }, [activeDayKey, close]); const renderMarkerRowRef = useRef(renderMarkerRow); useEffect(() => { renderMarkerRowRef.current = renderMarkerRow; }, [renderMarkerRow]); const Day = useCallback( (dayProps: DayProps) => ( ), [ markersByDay, isTouch, handleClick, handleHoverStart, handleHoverEnd, cancelClose, close, handleFocus, handleBlur, maxDay, ], ); const dayPickerComponents = useMemo(() => ({ Day }), [Day]); return (

{resolvedTitle}

{formatMonthYear(currentMonth)}

); } interface CalendarDayProps extends DayProps { markersByDay: Map; activeDayKeyRef: RefObject; isTouch: boolean; onClickDay: (key: string) => void; onHoverStart: (key: string) => void; onHoverEnd: () => void; onHoverCardEnter: () => void; onHoverCardLeave: () => void; onFocusDay: (key: string) => void; onBlurDay: (e: FocusEvent) => void; onClose: () => void; renderMarkerRowRef: RefObject< ((marker: StatusCalendarMarker) => ReactNode) | undefined >; /** Days strictly after this are disabled; null disables blocking entirely. */ maxDay: Date | null; } const CalendarDay = forwardRef( function CalendarDay( { date, displayMonth, markersByDay, activeDayKeyRef, isTouch, onClickDay, onHoverStart, onHoverEnd, onHoverCardEnter, onHoverCardLeave, onFocusDay, onBlurDay, onClose, renderMarkerRowRef, maxDay, }, forwardedRef, ) { // With `mode="default"`, useDayRender returns `isButton: false` for every // day — DayPicker only generates click handlers under a selection mode. // We don't need DayPicker's interactivity (we drive our own hover popover), // so we skip useDayRender entirely and render our own trigger. const thisDayKey = dayKey(startOfDay(date)); const isOutside = startOfMonth(date).getTime() !== startOfMonth(displayMonth).getTime(); // Overriding `components.Day` bypasses DayPicker's own hide-outside-days // logic — we have to drop these cells ourselves so the grid only shows the // current month. if (isOutside) { return (

); } // Past the status-history cutoff: render a dimmed, non-interactive cell. const isBlocked = maxDay !== null && startOfDay(date).getTime() > maxDay.getTime(); if (isBlocked) { return (

} data-day={thisDayKey} data-day-state="disabled" aria-disabled tabIndex={-1} className="text-muted-foreground/40 inline-flex h-12 w-full items-center justify-center font-mono text-sm" > {format(date, "d")}

); } const isToday = isSameDay(date, new Date()); const dayMarkers = markersByDay.get(thisDayKey) ?? []; const severity = dayMarkers.length > 0 ? worstSeverity(dayMarkers) : undefined; const open = activeDayKeyRef.current === thisDayKey; const hasMarkers = dayMarkers.length > 0; // Tinted-field: severity days get a soft fill that owns the hover state, // empty days fall back to the neutral accent hover. const dayClass = cn( "text-foreground/80 inline-flex h-12 w-full items-center justify-center font-mono text-sm font-normal transition-colors", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset", isToday && "text-foreground font-semibold", severity ? SEVERITY_FILL[severity] : "hover:bg-accent hover:text-accent-foreground", hasMarkers && "cursor-pointer", ); // Days without events render a plain trigger — no HoverCard, no popover. if (!hasMarkers) { return (

} data-day={thisDayKey} data-day-state="empty" tabIndex={-1} className={dayClass} > {format(date, "d")}

); } const barItem: StatusBarData = { day: format(date, "yyyy-MM-dd"), bar: [], card: [], events: dayMarkers.map(markerToBarEvent), }; const indexByEventId = new Map( barItem.events.map((e, i) => [e.id, i]), ); return ( // No `onOpenChange`: open state is fully controlled by our handlers (see // parent), matching `status-bar.tsx`. Radix's hover/dismiss listeners fire // into a no-op, so they can't fight the pin/toggle model. { if (isTouch) e.preventDefault(); }} > { const fn = renderMarkerRowRef.current; if (!fn) return undefined; const idx = indexByEventId.get(event.id) ?? 0; return (

{eventIndex > 0 && ( )} {fn(dayMarkers[idx])}

); }} /> ); }, ); function markerToBarEvent(m: StatusCalendarMarker): BarEvent { return { id: m.id, name: m.name, type: m.type, from: m.from ?? null, to: m.to ?? null, isAggregated: m.isAggregated, }; } export interface StatusCalendarSkeletonProps { /** Title shown in the header chrome; falls back to "Calendar" if omitted. */ title?: ReactNode; className?: string; } /** Loading placeholder mirroring ``'s chrome (header + 6×7 grid). */ export function StatusCalendarSkeleton({ title, className, }: StatusCalendarSkeletonProps) { const labels = useStatusBlocksLabels(); return (

{title ?? labels.calendarTitle}

{Array.from({ length: 7 }).map((_, i) => (

))}

{Array.from({ length: 6 }).map((_, row) => (

{Array.from({ length: 7 }).map((_, col) => (

))}

); } 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","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","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":"date-fns"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","react-day-picker@8",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker@8"}]]}]}]]}],["$","$L50",null,{"namespace":"@openstatus","registryDependencies":["https://openstatus.dev/r/status-types.json","https://openstatus.dev/r/status-i18n.json","https://openstatus.dev/r/status-bar.json","button","hover-card","separator","skeleton","https://openstatus.dev/r/use-media-query.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/blocks/status-calendar.tsx","content":"$52","type":"registry:ui","target":"components/blocks/status-calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]