@elevasis/ui 1.7.3 → 1.7.5

package/dist/{CoreAuthKitInner-Y6LQYIPX.js → CoreAuthKitInner-3J4RVQO6.js}

@@ -1,5 +1,4 @@
 import { AuthProvider } from './chunk-7PLEQFHO.js';
-import './chunk-MLKGABMK.js';
 import { AuthKitProvider, useAuth } from '@workos-inc/authkit-react';
 import { useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/api/index.js

@@ -3,4 +3,3 @@ export { ApiClientProvider, useApiClient, useApiClientContext } from '../chunk-L
 import '../chunk-LFYO3MDC.js';
 import '../chunk-4VGWQ5AN.js';
 import '../chunk-DD3CCMCZ.js';
-import '../chunk-MLKGABMK.js';

package/dist/auth/context.js

@@ -1,2 +1 @@
 export { AuthProvider, useAuthContext } from '../chunk-7PLEQFHO.js';
-import '../chunk-MLKGABMK.js';

package/dist/auth/index.js

@@ -5,4 +5,3 @@ import '../chunk-L2CM2CUA.js';
 import '../chunk-KA7LO7U5.js';
 import '../chunk-DD3CCMCZ.js';
 export { AuthProvider, useAuthContext } from '../chunk-7PLEQFHO.js';
-import '../chunk-MLKGABMK.js';

package/dist/charts/index.css

@@ -0,0 +1,112 @@
+/* src/components/display/StatCard.module.css */
+.heroCard {
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
+}
+.iconRing {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  color: var(--color-primary);
+  flex-shrink: 0;
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+.iconRingSm {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  color: var(--color-primary);
+  flex-shrink: 0;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+.heroValue {
+  font-family: var(--elevasis-font-family-subtitle);
+  font-size: 1.85rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+[data-mantine-color-scheme=dark] .heroValue {
+  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+.heroValueSm {
+  font-family: var(--elevasis-font-family-subtitle);
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.heroLabel {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-text-dimmed);
+}
+.heroLabelSm {
+  font-size: 0.62rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-text-dimmed);
+}
+
+/* src/components/display/ElevasisLoader.module.css */
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  overflow: visible;
+}
+.loader {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+.chevron {
+  stroke: var(--loader-color);
+  stroke-width: 2;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  fill: none;
+  opacity: 0.15;
+  animation: chevronPulse 2s ease-in-out infinite;
+  filter: drop-shadow(0 0 1.5px var(--loader-color));
+}
+.c1 {
+  animation-delay: 0s;
+}
+.c2 {
+  animation-delay: 0.2s;
+}
+.c3 {
+  animation-delay: 0.4s;
+}
+@keyframes chevronPulse {
+  0%, 100% {
+    opacity: 0.12;
+    filter: drop-shadow(0 0 1px var(--loader-color));
+  }
+  40%, 60% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px var(--loader-color));
+  }
+}

package/dist/charts/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 /**
  * CyberAreaChart — Reusable area chart with cyber/high-tech aesthetic.
@@ -92,5 +93,219 @@ declare function useCyberColors(): CyberColors;
 /** Map a series dataKey to its color from the palette. */
 declare function getSeriesColor(key: string, colors: CyberColors): string;
 
-export { CyberAreaChart, CyberLegendItem, getSeriesColor, useCyberColors };
-export type { CyberAreaChartProps, CyberColors, CyberSeries };
+interface CyberDonutSegment {
+    name: string;
+    value: number;
+    color: string;
+}
+interface CyberDonutProps {
+    /** Title shown above the ring. Omit to suppress. */
+    title?: string;
+    /** Segment data. Component handles empty-state detection internally. */
+    segments: CyberDonutSegment[];
+    /** Center value displayed in the donut hole. */
+    centerValue: string | number;
+    /** Sub-label below the center value. */
+    centerLabel: string;
+    /** Color override for the center value text. Defaults to var(--mantine-color-text). */
+    centerValueColor?: string;
+    /** SVG filter ID namespace. REQUIRED when multiple donuts coexist on the same page. */
+    glowId: string;
+    /** Cyber color palette. Obtain via useCyberColors(). */
+    colors: CyberColors;
+    /** Donut size in px. Defaults to 120. */
+    size?: number;
+    /** Inner radius of the ring. Defaults to 36. */
+    innerRadius?: number;
+    /** Outer radius of the ring. Defaults to 52. */
+    outerRadius?: number;
+    /** When true, shows '-' for center value and legend counts. */
+    isLoading?: boolean;
+    /** Whether to show the legend below the donut. Defaults to true. */
+    showLegend?: boolean;
+}
+declare function CyberDonutTooltip({ active, payload, colors }: {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        value?: number;
+        payload?: {
+            color?: string;
+        };
+    }>;
+    colors: CyberColors;
+}): react_jsx_runtime.JSX.Element | null;
+declare function CyberDonut({ title, segments, centerValue, centerLabel, centerValueColor, glowId, colors, size, innerRadius, outerRadius, isLoading, showLegend }: CyberDonutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Time range selector for dashboard metrics
+ */
+type TimeRange = '1h' | '24h' | '7d' | '30d';
+/**
+ * Execution health metrics response
+ * Success rate, P95 duration, execution counts, and trend data
+ * trendData includes executionCount for throughput visualization (eliminates separate API call)
+ */
+interface ExecutionHealthMetrics {
+    successRate: number;
+    p95Duration: number;
+    totalExecutions: number;
+    trendData: Array<{
+        time: string;
+        rate: number;
+        successCount: number;
+        errorCount: number;
+        warningCount: number;
+        executionCount: number;
+    }>;
+    statusCounts: {
+        success: number;
+        failed: number;
+        pending: number;
+        warning: number;
+    };
+    peakPeriod: string;
+    granularity: 'hour' | 'day';
+}
+/**
+ * Error analysis metrics response
+ * Error categories and top failing resources
+ */
+interface ErrorAnalysisMetrics {
+    totalErrors: number;
+    errorsByCategory: Array<{
+        category: string;
+        count: number;
+        percentage: number;
+    }>;
+    topFailingResources: Array<{
+        resourceId: string;
+        name: string;
+        errorCount: number;
+        failureRate: number;
+    }>;
+}
+/**
+ * Business impact metrics response
+ * ROI, labor savings, and cost analysis
+ */
+interface BusinessImpactMetrics {
+    totalSavingsUsd: number;
+    totalCostUsd: number;
+    netSavingsUsd: number;
+    roi: number;
+}
+/**
+ * Cost breakdown metrics response
+ * Per-resource cost analysis
+ */
+interface CostBreakdownMetrics {
+    resources: Array<{
+        resourceId: string;
+        totalCostUsd: number;
+        executionCount: number;
+        avgCostUsd: number;
+    }>;
+}
+/**
+ * Dashboard metrics response
+ * Aggregates core observability metrics in a single response
+ * Note: Throughput data is now included in executionHealth.trendData.executionCount
+ */
+interface DashboardMetrics {
+    executionHealth: ExecutionHealthMetrics;
+    costBreakdown: CostBreakdownMetrics;
+    businessImpact: BusinessImpactMetrics;
+    /** ISO timestamp of the currently active deployment, or null if none */
+    activeDeploymentDate: string | null;
+    /** Deployment version of the active deployment, or null if none */
+    activeDeploymentVersion: string | null;
+}
+/**
+ * Cost trend data point for time-series charts
+ * Represents a single time bucket (hour or day)
+ */
+interface CostTrendDataPoint {
+    time: string;
+    totalCostUsd: number;
+    executionCount: number;
+    avgCostPerExecution: number;
+}
+/**
+ * Cost trends response (time-series data)
+ */
+interface CostTrendsResponse {
+    trendData: CostTrendDataPoint[];
+    granularity: 'hour' | 'day';
+    totalCostUsd: number;
+    totalExecutions: number;
+}
+/**
+ * Cost summary response with MTD and projections
+ */
+interface CostSummaryResponse {
+    current: {
+        totalCostUsd: number;
+        executionCount: number;
+    };
+    previous: {
+        totalCostUsd: number;
+        executionCount: number;
+    };
+    mtd: {
+        totalCostUsd: number;
+        daysElapsed: number;
+    };
+    projection: {
+        monthlyCostUsd: number;
+        confidence: 'low' | 'medium' | 'high';
+    };
+    trend: {
+        changePercent: number;
+        direction: 'up' | 'down' | 'flat';
+    };
+}
+
+interface ActivityTrendChartProps {
+    timestamps: Date[];
+    total: number;
+    isLoading: boolean;
+    timeRange: TimeRange;
+}
+declare function ActivityTrendChart({ timestamps, total, isLoading, timeRange }: ActivityTrendChartProps): react_jsx_runtime.JSX.Element;
+
+interface CostTrendChartProps {
+    data?: CostTrendsResponse;
+    summaryData?: CostSummaryResponse;
+    isLoading: boolean;
+    error?: Error | null;
+}
+declare function CostTrendChart({ data, summaryData, isLoading, error }: CostTrendChartProps): react_jsx_runtime.JSX.Element;
+
+interface HeroStatsRowProps {
+    resourcesData?: {
+        workflows: unknown[];
+        agents: unknown[];
+        total: number;
+    };
+    resourcesLoading: boolean;
+    dashboardData?: DashboardMetrics;
+    dashboardLoading: boolean;
+    unresolvedErrorCount: number | null;
+    errorsLoading: boolean;
+}
+declare function HeroStatsRow({ resourcesData, resourcesLoading, dashboardData, dashboardLoading, unresolvedErrorCount, errorsLoading }: HeroStatsRowProps): react_jsx_runtime.JSX.Element;
+
+interface CombinedTrendChartProps {
+    healthData?: ExecutionHealthMetrics;
+    errorData?: ErrorAnalysisMetrics;
+    isLoading: boolean;
+    error?: Error | null;
+    timeRange: TimeRange;
+    /** Optional navigation action rendered in the header (e.g., a Link button). */
+    navigationAction?: ReactNode;
+}
+declare function CombinedTrendChart({ healthData, errorData: _errorData, isLoading, error, timeRange, navigationAction }: CombinedTrendChartProps): react_jsx_runtime.JSX.Element;
+
+export { ActivityTrendChart, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors };
+export type { ActivityTrendChartProps, CombinedTrendChartProps, CostTrendChartProps, CyberAreaChartProps, CyberColors, CyberDonutProps, CyberDonutSegment, CyberSeries, HeroStatsRowProps };