{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"status-page","type":"registry:block","title":"Status Page","description":"Service status block with an overall banner derived from today's worst status, per-service 90-day uptime bars that grow in on view and reveal a date, status and incident tooltip on hover or arrow-key focus, computed uptime percentages, and an incident timeline whose entries expand into their update history, all formatted in UTC from deterministic data.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/status-page.tsx","type":"registry:component","target":"@components/motion/status-page.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/status-page\n\nimport { AlertTriangle, CheckCircle2, ChevronDown, Wrench, XCircle } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { type KeyboardEvent, type ReactNode, useId, useMemo, useRef, useState } from \"react\";\nimport { Badge, type BadgeVariant } from \"@/components/motion/badge\";\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/motion/collapsible\";\nimport { EASE_OUT, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ServiceDayStatus =\n | \"operational\"\n | \"degraded\"\n | \"partial\"\n | \"major\"\n | \"maintenance\"\n | \"nodata\";\n\nexport interface ServiceDay {\n /** Calendar day, `YYYY-MM-DD` (read as UTC so server and client agree). */\n date: string;\n status: ServiceDayStatus;\n /** Incident titles that touched this day; shown in the bar tooltip. */\n incidents?: string[];\n}\n\nexport interface StatusService {\n id: string;\n name: string;\n description?: string;\n /** Oldest first; typically 90 entries. The last day is \"today\". */\n days: ServiceDay[];\n /** Override the computed uptime percentage. */\n uptime?: number;\n}\n\nexport type IncidentStatus = \"investigating\" | \"identified\" | \"monitoring\" | \"resolved\";\nexport type IncidentImpact = \"minor\" | \"major\" | \"critical\" | \"maintenance\";\n\nexport interface IncidentUpdate {\n id: string;\n status: IncidentStatus;\n message: string;\n /** ISO timestamp. */\n at: string;\n}\n\nexport interface StatusIncident {\n id: string;\n title: string;\n impact: IncidentImpact;\n status: IncidentStatus;\n /** Newest first. */\n updates: IncidentUpdate[];\n /** Affected service names. */\n services?: string[];\n}\n\nexport interface StatusPageProps {\n services: StatusService[];\n incidents?: StatusIncident[];\n title?: ReactNode;\n /** Pre-formatted \"last updated\" text (never computed, so markup stays deterministic). */\n lastUpdated?: ReactNode;\n /** Ids of incidents expanded on mount. Default: unresolved ones. */\n defaultExpandedIncidents?: string[];\n locale?: string;\n /** IANA time zone for incident timestamps. Default \"UTC\" so SSR matches. */\n timeZone?: string;\n className?: string;\n}\n\nconst DAY_TONE: Record = {\n operational: \"bg-success\",\n degraded: \"bg-warning/70\",\n partial: \"bg-warning\",\n major: \"bg-destructive\",\n maintenance: \"bg-chart-2\",\n nodata: \"bg-foreground/10\",\n};\n\nconst DAY_LABEL: Record = {\n operational: \"No downtime\",\n degraded: \"Degraded performance\",\n partial: \"Partial outage\",\n major: \"Major outage\",\n maintenance: \"Scheduled maintenance\",\n nodata: \"No data\",\n};\n\n// Share of the day counted as up, for the computed uptime figure.\nconst DAY_UPTIME: Record = {\n operational: 1,\n degraded: 0.998,\n partial: 0.99,\n major: 0.95,\n maintenance: 1,\n nodata: null,\n};\n\nconst SEVERITY: ServiceDayStatus[] = [\"operational\", \"maintenance\", \"degraded\", \"partial\", \"major\"];\n\nconst IMPACT_BADGE: Record = {\n minor: \"warning\",\n major: \"destructive\",\n critical: \"destructive\",\n maintenance: \"secondary\",\n};\n\nconst STATUS_TEXT: Record = {\n investigating: \"Investigating\",\n identified: \"Identified\",\n monitoring: \"Monitoring\",\n resolved: \"Resolved\",\n};\n\nexport function computeUptime(days: ServiceDay[]) {\n const counted = days\n .map((d) => DAY_UPTIME[d.status])\n .filter((v): v is number => v != null);\n if (counted.length === 0) return 100;\n return (counted.reduce((a, b) => a + b, 0) / counted.length) * 100;\n}\n\nfunction overallOf(services: StatusService[]) {\n let worst: ServiceDayStatus = \"operational\";\n for (const s of services) {\n const today = s.days[s.days.length - 1]?.status ?? \"operational\";\n if (SEVERITY.indexOf(today) > SEVERITY.indexOf(worst)) worst = today;\n }\n return worst;\n}\n\nconst BANNER: Record<\n ServiceDayStatus,\n { text: string; icon: ReactNode; className: string }\n> = {\n operational: {\n text: \"All systems operational\",\n icon: ,\n className: \"border-success/30 bg-success/10 text-[color-mix(in_oklab,var(--success)_70%,var(--foreground))]\",\n },\n nodata: {\n text: \"All systems operational\",\n icon: ,\n className: \"border-success/30 bg-success/10 text-[color-mix(in_oklab,var(--success)_70%,var(--foreground))]\",\n },\n maintenance: {\n text: \"Scheduled maintenance in progress\",\n icon: ,\n className: \"border-chart-2/30 bg-chart-2/10 text-foreground\",\n },\n degraded: {\n text: \"Degraded performance\",\n icon: ,\n className: \"border-warning/40 bg-warning/10 text-[color-mix(in_oklab,var(--warning)_60%,var(--foreground))]\",\n },\n partial: {\n text: \"Partial system outage\",\n icon: ,\n className: \"border-warning/40 bg-warning/15 text-[color-mix(in_oklab,var(--warning)_60%,var(--foreground))]\",\n },\n major: {\n text: \"Major system outage\",\n icon: ,\n className: \"border-destructive/40 bg-destructive/10 text-[color-mix(in_oklab,var(--destructive)_70%,var(--foreground))]\",\n },\n};\n\nexport function StatusPage({\n services,\n incidents = [],\n title = \"System status\",\n lastUpdated,\n defaultExpandedIncidents,\n locale = \"en-US\",\n timeZone = \"UTC\",\n className,\n}: StatusPageProps) {\n const reduce = useReducedMotion() ?? false;\n const overall = overallOf(services);\n const banner = BANNER[overall];\n const dayFormat = useMemo(\n () => new Intl.DateTimeFormat(locale, { month: \"short\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" }),\n [locale],\n );\n const stampFormat = useMemo(\n () =>\n new Intl.DateTimeFormat(locale, {\n month: \"short\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n timeZone,\n timeZoneName: \"short\",\n }),\n [locale, timeZone],\n );\n\n return (\n
\n
\n

{title}

\n {lastUpdated &&

{lastUpdated}

}\n
\n\n \n \n \n {banner.icon}\n {banner.text}\n \n \n
\n\n
\n {services.map((service, i) => (\n \n ))}\n
\n {services[0]?.days.length ?? 90} days ago\n \n {([\"operational\", \"degraded\", \"major\"] as const).map((s) => (\n \n \n {s === \"operational\" ? \"Up\" : s === \"degraded\" ? \"Degraded\" : \"Outage\"}\n \n ))}\n \n Today\n
\n
\n\n {incidents.length > 0 && (\n
\n

\n Recent incidents\n

\n
    \n {incidents.map((incident) => (\n \n ))}\n
\n
\n )}\n \n );\n}\n\nfunction ServiceRow({\n service,\n dayFormat,\n reduce,\n index,\n}: {\n service: StatusService;\n dayFormat: Intl.DateTimeFormat;\n reduce: boolean;\n index: number;\n}) {\n const id = useId();\n const [hover, setHover] = useState(null);\n const [focusIndex, setFocusIndex] = useState(service.days.length - 1);\n const barsRef = useRef(null);\n const uptime = service.uptime ?? computeUptime(service.days);\n const today = service.days[service.days.length - 1]?.status ?? \"operational\";\n const count = service.days.length;\n const active = hover != null ? service.days[hover] : undefined;\n\n const formatDay = (date: string) => dayFormat.format(new Date(`${date}T00:00:00Z`));\n\n // One tab stop per row; arrows walk the days.\n const onKeyDown = (event: KeyboardEvent) => {\n const step: Record = { ArrowRight: 1, ArrowLeft: -1, Home: -count, End: count };\n const delta = step[event.key];\n if (delta == null) return;\n event.preventDefault();\n const next = Math.max(0, Math.min(count - 1, focusIndex + delta));\n setFocusIndex(next);\n setHover(next);\n barsRef.current?.querySelectorAll(\"button\")[next]?.focus();\n };\n\n return (\n
\n
\n {service.name}\n {service.description && (\n {service.description}\n )}\n \n {uptime.toFixed(2)}% uptime\n \n \n
\n
\n setHover(null)}\n className=\"m-0 flex h-8 min-w-0 items-end gap-px border-0 p-0\"\n >\n {service.days.map((day, i) => (\n setHover(i)}\n onFocus={() => {\n setHover(i);\n setFocusIndex(i);\n }}\n onBlur={() => setHover(null)}\n initial={reduce ? { opacity: 0 } : { opacity: 0, scaleY: 0.2 }}\n whileInView={{ opacity: 1, scaleY: 1 }}\n viewport={{ once: true }}\n transition={{ duration: 0.35, ease: EASE_OUT, delay: index * 0.06 + i * 0.004 }}\n className={cn(\n \"h-full min-w-0 flex-1 origin-bottom rounded-xs outline-none transition-opacity\",\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-card\",\n DAY_TONE[day.status],\n hover != null && hover !== i && \"opacity-60\",\n )}\n />\n ))}\n \n \n {active && hover != null && (\n count * 0.8 ? \"-translate-x-[90%]\" : \"-translate-x-1/2\",\n )}\n >\n

{formatDay(active.date)}

\n

\n \n {DAY_LABEL[active.status]}\n

\n {active.incidents?.length ? (\n
    \n {active.incidents.map((t) => (\n
  • \n {t}\n
    • \n ))}\n
\n ) : null}\n \n )}\n \n
\n
\n );\n}\n\nfunction IncidentItem({\n incident,\n stampFormat,\n defaultOpen,\n reduce,\n}: {\n incident: StatusIncident;\n stampFormat: Intl.DateTimeFormat;\n defaultOpen: boolean;\n reduce: boolean;\n}) {\n const [open, setOpen] = useState(defaultOpen);\n const latest = incident.updates[0];\n const resolved = incident.status === \"resolved\";\n\n return (\n
  • \n \n \n \n \n {incident.title}\n \n \n {STATUS_TEXT[incident.status]}\n \n \n {incident.impact === \"maintenance\" ? \"Maintenance\" : `${incident.impact[0]?.toUpperCase()}${incident.impact.slice(1)} impact`}\n \n {latest && (\n \n )}\n \n \n \n \n \n \n \n
      \n {incident.updates.map((update, i) => (\n
    1. \n \n

      \n {STATUS_TEXT[update.status]}\n · \n \n

      \n

      {update.message}

      \n
      2. \n ))}\n
    \n {incident.services?.length ? (\n

    \n Affected: {incident.services.join(\", \")}\n

    \n ) : null}\n     \n     \n
    • \n );\n}\n"},{"path":"components/motion/badge.tsx","type":"registry:component","target":"@components/motion/badge.tsx","content":"\"use client\";\n\nimport { X } from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n PresenceContext,\n useAnimate,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type BadgeVariant =\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"destructive\"\n | \"success\"\n | \"warning\";\n\nexport type BadgeSize = \"sm\" | \"md\" | \"lg\";\n\n/** Soft tinted surface or a filled one. Only the status variants differ. */\nexport type BadgeTone = \"soft\" | \"solid\";\n\nconst BASE: Record<\"default\" | \"secondary\" | \"outline\", string> = {\n default: \"border-transparent bg-primary text-primary-foreground\",\n secondary: \"border-transparent bg-foreground/[0.07] text-foreground\",\n outline: \"border-border-strong bg-transparent text-foreground\",\n};\n\n// Status tints mix the token toward --foreground/--background (as `alert`\n// does), so the text keeps its contrast in both themes and every design style.\nconst SOFT: Record<\"destructive\" | \"success\" | \"warning\", string> = {\n destructive:\n \"border-[color-mix(in_oklab,var(--destructive)_30%,transparent)] bg-[color-mix(in_oklab,var(--destructive)_10%,var(--background))] text-[color-mix(in_oklab,var(--destructive)_78%,var(--foreground))]\",\n success:\n \"border-[color-mix(in_oklab,var(--success)_32%,transparent)] bg-[color-mix(in_oklab,var(--success)_11%,var(--background))] text-[color-mix(in_oklab,var(--success)_60%,var(--foreground))]\",\n warning:\n \"border-[color-mix(in_oklab,var(--warning)_40%,transparent)] bg-[color-mix(in_oklab,var(--warning)_13%,var(--background))] text-[color-mix(in_oklab,var(--warning)_52%,var(--foreground))]\",\n};\n\n// Filled status badges. Red reads best with light text in both themes;\n// green and amber are light hues, so they always get dark text.\nconst SOLID: Record<\"destructive\" | \"success\" | \"warning\", string> = {\n destructive:\n \"border-transparent bg-destructive text-background dark:text-foreground\",\n success:\n \"border-transparent bg-success text-[color-mix(in_oklab,var(--success)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--success)_22%,var(--background))]\",\n warning:\n \"border-transparent bg-warning text-[color-mix(in_oklab,var(--warning)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--warning)_22%,var(--background))]\",\n};\n\nconst SIZE: Record = {\n sm: \"h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3\",\n md: \"h-6 gap-1.5 px-2 text-xs [&_svg]:size-3.5\",\n lg: \"h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5\",\n};\n\n// Count badges are circles at one digit and pills beyond.\nconst COUNT_SIZE: Record = {\n sm: \"h-4 min-w-4 px-1 text-[10px]\",\n md: \"h-5 min-w-5 px-1.5 text-[11px]\",\n lg: \"h-6 min-w-6 px-1.5 text-xs\",\n};\n\nfunction variantClass(variant: BadgeVariant, tone: BadgeTone) {\n if (variant === \"default\" || variant === \"secondary\" || variant === \"outline\") {\n return BASE[variant];\n }\n return tone === \"solid\" ? SOLID[variant] : SOFT[variant];\n}\n\nexport interface BadgeProps {\n children?: ReactNode;\n variant?: BadgeVariant;\n /** Status variants only (destructive/success/warning). Default \"soft\". */\n tone?: BadgeTone;\n size?: BadgeSize;\n /** Leading status dot in the text color; `\"pulse\"` adds a radiating ring. */\n dot?: boolean | \"pulse\";\n /** Leading icon (sized to the badge). Ignored when `dot` is set. */\n icon?: ReactNode;\n /**\n * Makes the badge removable: an × button plays the exit, then calls this.\n * Focus moves to the neighbouring chip's × when the removal came from it.\n */\n onRemove?: () => void;\n /** Accessible name of the × button. Default `Remove `. */\n removeLabel?: string;\n /**\n * Count mode: renders a compact number that rolls up or down as it changes\n * and bumps when it rises. Hidden at 0 unless `showZero`.\n */\n count?: number;\n /** Counts above this read \"max+\". Default 99. */\n max?: number;\n showZero?: boolean;\n /** Spoken label for count mode, e.g. `(n) => \\`${n} unread\\``. */\n countLabel?: (count: number) => string;\n className?: string;\n}\n\n/**\n * General-purpose badge: six variants, three sizes, an optional (pulsing) dot\n * or icon, removable chips with an exit animation, and a count mode with\n * rolling digits capped at \"99+\". For animated status transitions\n * (loading → success) use `AnimatedBadge` instead.\n */\nexport function Badge(props: BadgeProps) {\n if (props.count !== undefined) return ;\n return ;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Label badge */\n/* -------------------------------------------------------------------------- */\n\nfunction LabelBadge({\n children,\n variant = \"default\",\n tone = \"soft\",\n size = \"md\",\n dot = false,\n icon,\n onRemove,\n removeLabel,\n className,\n}: BadgeProps) {\n const reduce = useReducedMotion() ?? false;\n // Inside an AnimatePresence the badge pops in when added; anywhere else it\n // renders as-is so server HTML is visible before hydration.\n const inPresence = useContext(PresenceContext) !== null;\n const rootRef = useRef(null);\n const [leaving, setLeaving] = useState(false);\n const refocus = useRef(null);\n const removable = Boolean(onRemove);\n\n const hidden = reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 };\n\n const startRemove = (fromKeyboardFocus: boolean) => {\n if (leaving) return;\n if (fromKeyboardFocus) refocus.current = neighbourRemoveButton(rootRef.current);\n setLeaving(true);\n };\n\n const finishRemove = () => {\n if (!leaving) return;\n const target = refocus.current;\n refocus.current = null;\n onRemove?.();\n if (target) requestAnimationFrame(() => target.focus({ preventScroll: true }));\n };\n\n const text = typeof children === \"string\" ? children : undefined;\n\n return (\n