@amiable-dev/docusaurus-plugin-stentorosaur 0.20.0 → 0.21.1

package/lib/theme/SystemCardGroup/styles.module.css

@@ -0,0 +1,180 @@
+/**
+ * ADR-004: SystemCardGroup Styles
+ *
+ * Container for grouping multiple SystemCards.
+ */
+
+/* Group container */
+.systemCardGroup {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Group header */
+.groupHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--ifm-color-emphasis-100);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.collapsed .groupHeader {
+  border-bottom: none;
+}
+
+/* Toggle button */
+.toggleButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--ifm-color-emphasis-200);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.toggleButton:hover {
+  background: var(--ifm-color-emphasis-300);
+}
+
+.toggleButton:focus-visible {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 2px;
+}
+
+.expandIcon {
+  font-size: 0.625rem;
+  color: var(--ifm-color-content-secondary);
+  transition: transform 0.2s ease;
+  transform: rotate(-90deg);
+}
+
+.expandIconOpen {
+  transform: rotate(0deg);
+}
+
+/* Group info */
+.groupInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+}
+
+.groupTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ifm-color-content);
+}
+
+.groupMeta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--ifm-color-content-secondary);
+}
+
+.serviceCount {
+  color: var(--ifm-color-content-secondary);
+}
+
+.statusDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--status-operational, #22c55e);
+}
+
+.groupStatusDegraded .statusDot {
+  background: var(--status-degraded, #eab308);
+}
+
+.groupStatusDown .statusDot {
+  background: var(--status-outage, #ef4444);
+}
+
+.groupStatusMaintenance .statusDot {
+  background: var(--status-maintenance, #3b82f6);
+}
+
+.statusLabel {
+  font-weight: 500;
+}
+
+/* Status colors for labels */
+.groupStatusUp .statusLabel {
+  color: var(--status-operational, #22c55e);
+}
+
+.groupStatusDegraded .statusLabel {
+  color: var(--status-degraded, #eab308);
+}
+
+.groupStatusDown .statusLabel {
+  color: var(--status-outage, #ef4444);
+}
+
+.groupStatusMaintenance .statusLabel {
+  color: var(--status-maintenance, #3b82f6);
+}
+
+/* Group content */
+.groupContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
+}
+
+.contentHidden {
+  max-height: 0;
+  opacity: 0;
+  padding: 0 1rem;
+  overflow: hidden;
+}
+
+/* Dark mode */
+[data-theme='dark'] .groupHeader {
+  background: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .toggleButton {
+  background: var(--ifm-color-emphasis-300);
+}
+
+[data-theme='dark'] .toggleButton:hover {
+  background: var(--ifm-color-emphasis-400);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .expandIcon,
+  .groupContent {
+    transition: none;
+  }
+
+  .contentHidden {
+    display: none;
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 600px) {
+  .groupHeader {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .groupContent {
+    padding: 0.75rem;
+  }
+}

package/lib/theme/UptimeBar/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: UptimeBar Component
+ *
+ * 90-day horizontal uptime bar visualization.
+ * Displays daily uptime status as colored cells.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+import React from 'react';
+import { type DayStatus } from '../../context/StatusDataProvider';
+/**
+ * Custom thresholds for status determination
+ */
+export interface UptimeThresholds {
+    /** Uptime >= this is operational (default: 99) */
+    operational: number;
+    /** Uptime >= this is degraded, < is outage (default: 95) */
+    degraded: number;
+}
+/**
+ * Props for UptimeBar component
+ */
+export interface UptimeBarProps {
+    /** Service name for data lookup (uses context) */
+    serviceName: string;
+    /** Override data for testing/Storybook */
+    data?: DayStatus[];
+    /** Number of days to display (default: 90) */
+    days?: number;
+    /** Height of the bar in pixels (default: 34) */
+    height?: number;
+    /** Gap between bars in pixels (default: 2) */
+    gap?: number;
+    /** Show uptime percentage text (default: true) */
+    showPercentage?: boolean;
+    /** Show date labels (default: true) */
+    showDateLabels?: boolean;
+    /** Customizable thresholds */
+    thresholds?: UptimeThresholds;
+    /** Loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: Error | null;
+    /** Retry callback */
+    onRetry?: () => void;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Interaction callbacks */
+    onDayClick?: (date: string, status: DayStatus) => void;
+    onDayHover?: (date: string, status: DayStatus | null) => void;
+    /** Optional additional className */
+    className?: string;
+}
+/**
+ * UptimeBar Component
+ *
+ * Displays a horizontal bar of daily uptime status cells.
+ * Each cell represents one day, colored by uptime percentage.
+ */
+export declare function UptimeBar({ serviceName, data: providedData, days, height, gap, showPercentage, showDateLabels, thresholds, loading, error, onRetry, ariaLabel, onDayClick, onDayHover, className, }: UptimeBarProps): React.ReactElement;
+export default UptimeBar;
+export type { DayStatus };
+//# sourceMappingURL=index.d.ts.map

package/lib/theme/UptimeBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/UptimeBar/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;GAOG;AAEH,OAAO,KAAqE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGjF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,IAAI,EAAE,YAAY,EAClB,IAAS,EACT,MAAW,EACX,GAAO,EACP,cAAqB,EACrB,cAAqB,EACrB,UAA+B,EAC/B,OAAe,EACf,KAAK,EACL,OAAO,EACP,SAAS,EACT,UAAU,EACV,UAAU,EACV,SAAS,GACV,EAAE,cAAc,GAAG,KAAK,CAAC,YAAY,CA8LrC;AAGD,eAAe,SAAS,CAAC;AAGzB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/lib/theme/UptimeBar/index.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UptimeBar = UptimeBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Copyright (c) Your Organization
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ADR-004: UptimeBar Component
+ *
+ * 90-day horizontal uptime bar visualization.
+ * Displays daily uptime status as colored cells.
+ *
+ * @see docs/adrs/ADR-004-simplified-status-card-ux.md
+ */
+const react_1 = require("react");
+const StatusDataProvider_1 = require("../../context/StatusDataProvider");
+const styles_module_css_1 = __importDefault(require("./styles.module.css"));
+/**
+ * Default thresholds per ADR-004
+ */
+const DEFAULT_THRESHOLDS = {
+    operational: 99,
+    degraded: 95,
+};
+/**
+ * Get status class based on uptime and thresholds
+ */
+function getStatusClass(uptimePercent, thresholds, originalStatus) {
+    // If original status is no-data, keep it
+    if (originalStatus === 'no-data') {
+        return styles_module_css_1.default.statusNoData;
+    }
+    // Apply threshold-based status
+    if (uptimePercent >= thresholds.operational) {
+        return styles_module_css_1.default.statusOperational;
+    }
+    if (uptimePercent >= thresholds.degraded) {
+        return styles_module_css_1.default.statusDegraded;
+    }
+    return styles_module_css_1.default.statusOutage;
+}
+/**
+ * Calculate average uptime percentage
+ */
+function calculateAverageUptime(days) {
+    if (days.length === 0)
+        return 0;
+    const sum = days.reduce((acc, day) => acc + day.uptimePercent, 0);
+    return sum / days.length;
+}
+/**
+ * Generate summary for screen readers
+ */
+function generateAriaLabel(serviceName, days, averageUptime) {
+    const operationalDays = days.filter((d) => d.status === 'operational').length;
+    const degradedDays = days.filter((d) => d.status === 'degraded').length;
+    const outageDays = days.filter((d) => d.status === 'outage').length;
+    let summary = `${days.length}-day uptime for ${serviceName}: ${averageUptime.toFixed(1)}%.`;
+    if (operationalDays > 0) {
+        summary += ` ${operationalDays} days operational.`;
+    }
+    if (degradedDays > 0) {
+        summary += ` ${degradedDays} days degraded.`;
+    }
+    if (outageDays > 0) {
+        summary += ` ${outageDays} days with outage.`;
+    }
+    return summary;
+}
+/**
+ * UptimeBar Component
+ *
+ * Displays a horizontal bar of daily uptime status cells.
+ * Each cell represents one day, colored by uptime percentage.
+ */
+function UptimeBar({ serviceName, data: providedData, days = 90, height = 34, gap = 2, showPercentage = true, showDateLabels = true, thresholds = DEFAULT_THRESHOLDS, loading = false, error, onRetry, ariaLabel, onDayClick, onDayHover, className, }) {
+    // Get data from context or use provided data
+    const { getMerged90Days } = (0, StatusDataProvider_1.useStatusData)();
+    // Roving tabindex state - track which day has focus
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(0);
+    const dayCellRefs = (0, react_1.useRef)([]);
+    const dayData = (0, react_1.useMemo)(() => {
+        if (providedData) {
+            return providedData.slice(0, days);
+        }
+        return getMerged90Days(serviceName).slice(0, days);
+    }, [providedData, serviceName, days, getMerged90Days]);
+    // Calculate average uptime
+    const averageUptime = (0, react_1.useMemo)(() => calculateAverageUptime(dayData), [dayData]);
+    // Generate aria label
+    const computedAriaLabel = (0, react_1.useMemo)(() => {
+        if (ariaLabel)
+            return ariaLabel;
+        return generateAriaLabel(serviceName, dayData, averageUptime);
+    }, [ariaLabel, serviceName, dayData, averageUptime]);
+    // Event handlers
+    const handleDayClick = (0, react_1.useCallback)((day, index) => {
+        setFocusedIndex(index);
+        if (onDayClick) {
+            onDayClick(day.date, day);
+        }
+    }, [onDayClick]);
+    // Roving tabindex keyboard navigation
+    const handleBarKeyDown = (0, react_1.useCallback)((event) => {
+        const displayDays = [...dayData].reverse();
+        const maxIndex = displayDays.length - 1;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                setFocusedIndex((prev) => {
+                    const newIndex = Math.min(prev + 1, maxIndex);
+                    dayCellRefs.current[newIndex]?.focus();
+                    return newIndex;
+                });
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                setFocusedIndex((prev) => {
+                    const newIndex = Math.max(prev - 1, 0);
+                    dayCellRefs.current[newIndex]?.focus();
+                    return newIndex;
+                });
+                break;
+            case 'Home':
+                event.preventDefault();
+                setFocusedIndex(0);
+                dayCellRefs.current[0]?.focus();
+                break;
+            case 'End':
+                event.preventDefault();
+                setFocusedIndex(maxIndex);
+                dayCellRefs.current[maxIndex]?.focus();
+                break;
+        }
+    }, [dayData]);
+    const handleDayKeyDown = (0, react_1.useCallback)((event, day, index) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (onDayClick) {
+                onDayClick(day.date, day);
+            }
+        }
+    }, [onDayClick]);
+    const handleDayHover = (0, react_1.useCallback)((day) => {
+        if (onDayHover && day) {
+            onDayHover(day.date, day);
+        }
+        else if (onDayHover && !day) {
+            // Pass the last hovered date (or empty string) with null
+            onDayHover('', null);
+        }
+    }, [onDayHover]);
+    // Loading state
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${styles_module_css_1.default.loading} ${className || ''}`, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.skeleton, style: { height: `${height}px` } }) }));
+    }
+    // Error state
+    if (error) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${styles_module_css_1.default.error} ${className || ''}`, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.errorMessage, children: "Failed to load uptime data" }), onRetry && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: styles_module_css_1.default.retryButton, onClick: onRetry, "aria-label": "Retry loading uptime data", children: "Retry" }))] }));
+    }
+    // Empty state
+    if (dayData.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${styles_module_css_1.default.empty} ${className || ''}`, role: "img", "aria-label": `No uptime data available for ${serviceName}`, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.emptyMessage, children: "No data available" }) }));
+    }
+    // Reverse for display (oldest first, newest last)
+    const displayDays = [...dayData].reverse();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${styles_module_css_1.default.uptimeBarContainer} ${className || ''}`, children: [showPercentage && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.uptimePercentage, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.percentageValue, children: [averageUptime.toFixed(2), "%"] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.percentageLabel, children: "uptime" })] })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_css_1.default.uptimeBar, role: "group", "aria-label": computedAriaLabel, style: { height: `${height}px`, gap: `${gap}px` }, onKeyDown: handleBarKeyDown, children: displayDays.map((day, index) => ((0, jsx_runtime_1.jsx)("button", { ref: (el) => { dayCellRefs.current[index] = el; }, type: "button", className: `${styles_module_css_1.default.dayCell} ${getStatusClass(day.uptimePercent, thresholds, day.status)}`, tabIndex: index === focusedIndex ? 0 : -1, "aria-label": `${day.date}: ${day.uptimePercent.toFixed(1)}% uptime, ${day.incidents} incidents`, onClick: () => handleDayClick(day, index), onKeyDown: (e) => handleDayKeyDown(e, day, index), onMouseEnter: () => handleDayHover(day), onMouseLeave: () => handleDayHover(null), onFocus: () => setFocusedIndex(index) }, day.date))) }), showDateLabels && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_css_1.default.dateLabels, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_css_1.default.dateLabelStart, children: [days, " days ago"] }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_css_1.default.dateLabelEnd, children: "Today" })] }))] }));
+}
+// Default export for easier imports
+exports.default = UptimeBar;

package/lib/theme/UptimeBar/styles.module.css

@@ -0,0 +1,217 @@
+/**
+ * ADR-004: UptimeBar Styles
+ *
+ * 90-day horizontal uptime bar visualization.
+ * Uses CSS variables for theming and flexbox for layout.
+ */
+
+/* CSS Variables for status colors */
+:root {
+  --status-operational: #22c55e;
+  --status-degraded: #eab308;
+  --status-outage: #ef4444;
+  --status-maintenance: #3b82f6;
+  --status-no-data: #9ca3af;
+}
+
+/* Container */
+.uptimeBarContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Uptime percentage display */
+.uptimePercentage {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.percentageValue {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ifm-color-content);
+}
+
+.percentageLabel {
+  font-size: 0.875rem;
+  color: var(--ifm-color-content-secondary, #666);
+}
+
+/* Main bar container */
+.uptimeBar {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* Individual day cell */
+.dayCell {
+  flex: 1;
+  min-width: 2px;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.dayCell:hover {
+  transform: scaleY(1.1);
+  z-index: 1;
+}
+
+.dayCell:focus {
+  outline: 2px solid var(--ifm-color-primary);
+  outline-offset: 1px;
+}
+
+.dayCell:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Status colors */
+.statusOperational {
+  background-color: var(--status-operational);
+}
+
+.statusDegraded {
+  background-color: var(--status-degraded);
+}
+
+.statusOutage {
+  background-color: var(--status-outage);
+}
+
+.statusNoData {
+  background-color: var(--status-no-data);
+}
+
+/* Date labels */
+.dateLabels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--ifm-color-content-secondary, #666);
+}
+
+.dateLabelStart,
+.dateLabelEnd {
+  white-space: nowrap;
+}
+
+/* Loading state */
+.loading .skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--ifm-color-emphasis-200) 25%,
+    var(--ifm-color-emphasis-300) 50%,
+    var(--ifm-color-emphasis-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+  width: 100%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Error state */
+.error {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background-color: rgba(239, 68, 68, 0.1);
+  border-radius: 4px;
+}
+
+.errorMessage {
+  color: var(--status-outage);
+  font-size: 0.875rem;
+}
+
+.retryButton {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  background-color: var(--ifm-color-primary);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.retryButton:hover {
+  background-color: var(--ifm-color-primary-dark);
+}
+
+/* Empty state */
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: 4px;
+}
+
+.emptyMessage {
+  color: var(--ifm-color-content-secondary);
+  font-size: 0.875rem;
+}
+
+/* Dark mode adjustments */
+[data-theme='dark'] .statusOperational {
+  background-color: #16a34a;
+}
+
+[data-theme='dark'] .statusDegraded {
+  background-color: #ca8a04;
+}
+
+[data-theme='dark'] .statusOutage {
+  background-color: #dc2626;
+}
+
+[data-theme='dark'] .error {
+  background-color: rgba(239, 68, 68, 0.2);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .dayCell {
+    transition: none;
+  }
+
+  .loading .skeleton {
+    animation: none;
+    background: var(--ifm-color-emphasis-200);
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: 600px) {
+  .uptimePercentage {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .percentageValue {
+    font-size: 1.125rem;
+  }
+
+  .dateLabels {
+    font-size: 0.625rem;
+  }
+}

package/lib/types.d.ts

@@ -401,6 +401,15 @@ export interface PluginOptions {
      * - 'upptime': Upptime-style structured view with configurable sections
      */
     statusView?: 'default' | 'upptime';
+    /**
+     * Status card layout style for individual system cards (ADR-004)
+     * - 'minimal': New simplified cards with 90-day uptime bars (default)
+     * - 'detailed': Original detailed status cards with more information
+     *
+     * @default 'minimal'
+     * @since 0.21.0
+     */
+    statusCardLayout?: 'minimal' | 'detailed';
     /**
      * Configuration for Upptime-style status page (only used when statusView is 'upptime')
      */
@@ -472,6 +481,12 @@ export interface StatusData {
      * Theme components use this to determine how to fetch live data
      */
     dataSource?: DataSource;
+    /**
+     * Status card layout style (ADR-004)
+     * - 'minimal': Simplified cards with 90-day uptime bars (default)
+     * - 'detailed': Original detailed cards with more information
+     */
+    statusCardLayout?: 'minimal' | 'detailed';
 }
 export interface UptimeStatusSection {
     id: 'active-incidents' | 'live-status' | 'charts' | 'scheduled-maintenance' | 'past-maintenance' | 'past-incidents';