@elevasis/ui 1.7.4 → 1.7.6

package/dist/charts/index.js

@@ -1,384 +1,15 @@
-import { useMemo, useState, useEffect } from 'react';
-import { useComputedColorScheme, Group, Text, Box } from '@mantine/core';
-import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Area } from 'recharts';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/components/charts/CyberAreaChart.tsx
-var THEME_DERIVED = {
-  grid: "var(--color-border)",
-  gridLine: "var(--color-border)",
-  tickText: "var(--mantine-color-dimmed)",
-  tooltipBg: "var(--glass-background)",
-  tooltipBorder: "var(--color-border)",
-  tooltipText: "var(--mantine-color-dimmed)",
-  dotStroke: "var(--mantine-color-body)"
-};
-var DARK = {
-  cyan: "#00e5ff",
-  cyanDim: "#00b8d4",
-  blue: "#448aff",
-  green: "#00ff88",
-  greenDim: "#00c853",
-  red: "#ff1744",
-  redDim: "#d50000",
-  yellow: "#ffab00",
-  magenta: "#ff4081",
-  ...THEME_DERIVED,
-  cardGlow: "0 0 30px rgba(0, 229, 255, 0.06)"
-};
-var LIGHT = {
-  cyan: "#0091ea",
-  cyanDim: "#0277bd",
-  blue: "#4d8af0",
-  green: "#00a854",
-  greenDim: "#00873e",
-  red: "#d32f2f",
-  redDim: "#b71c1c",
-  yellow: "#f9a825",
-  magenta: "#c51162",
-  ...THEME_DERIVED,
-  cardGlow: "0 0 20px rgba(0, 145, 234, 0.06)"
-};
-function useCyberColors() {
-  const scheme = useComputedColorScheme("dark");
-  return useMemo(() => scheme === "dark" ? DARK : LIGHT, [scheme]);
-}
-function getSeriesColor(key, colors) {
-  switch (key) {
-    case "Success Rate":
-      return colors.cyan;
-    case "Executions":
-      return colors.blue;
-    case "Success Count":
-      return colors.green;
-    case "Error Count":
-      return colors.red;
-    default:
-      return colors.cyan;
-  }
-}
-function CyberDefs({ colors }) {
-  const gradients = [
-    { id: "gradCyan", color: colors.cyan, opacity: 0.35 },
-    { id: "gradBlue", color: colors.blue, opacity: 0.3 },
-    { id: "gradGreen", color: colors.green, opacity: 0.3 },
-    { id: "gradRed", color: colors.red, opacity: 0.3 },
-    { id: "gradYellow", color: colors.yellow, opacity: 0.3 }
-  ];
-  const filters = [
-    { id: "glowCyan", std: 3 },
-    { id: "glowBlue", std: 3 },
-    { id: "glowGreen", std: 2.5 },
-    { id: "glowRed", std: 2.5 },
-    { id: "glowYellow", std: 2.5 }
-  ];
-  return /* @__PURE__ */ jsxs("defs", { children: [
-    gradients.map((g) => /* @__PURE__ */ jsxs("linearGradient", { id: g.id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: g.color, stopOpacity: g.opacity }),
-      /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: g.color, stopOpacity: g.opacity * 0.2 }),
-      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: g.color, stopOpacity: 0 })
-    ] }, g.id)),
-    filters.map((f) => /* @__PURE__ */ jsxs("filter", { id: f.id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
-      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: f.std, result: "blur" }),
-      /* @__PURE__ */ jsxs("feMerge", { children: [
-        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-      ] })
-    ] }, f.id)),
-    /* @__PURE__ */ jsxs("filter", { id: "dotGlow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
-      /* @__PURE__ */ jsxs("feMerge", { children: [
-        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("filter", { id: "pulseGlow", x: "-30%", y: "-30%", width: "160%", height: "160%", children: [
-      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "5", result: "blur" }),
-      /* @__PURE__ */ jsxs("feMerge", { children: [
-        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-      ] })
-    ] })
-  ] });
-}
-function PulseDefs({ series, colors, isLight }) {
-  return /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => {
-    const color = colors[s.color ?? "cyan"];
-    const dur = "6s";
-    const delay = "0s";
-    const keyTimes = "0;0.3;1";
-    const keySplines = "0.33 0 0.67 1;0 0 1 1";
-    const animateProps = {
-      dur,
-      keyTimes,
-      keySplines,
-      repeatCount: "indefinite",
-      calcMode: "spline",
-      begin: delay
-    };
-    return /* @__PURE__ */ jsxs("linearGradient", { id: `pulse-${i}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: color, stopOpacity: 0, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "-0.15;1.0;1.0", ...animateProps }) }),
-      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: isLight ? "white" : color, stopOpacity: isLight ? 0.6 : 0.9, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "-0.075;1.075;1.075", ...animateProps }) }),
-      /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: color, stopOpacity: 0, children: /* @__PURE__ */ jsx("animate", { attributeName: "offset", values: "0;1.15;1.15", ...animateProps }) })
-    ] }, i);
-  }) });
-}
-function CyberActiveDot({
-  cx,
-  cy,
-  color,
-  dotStroke
-}) {
-  if (cx == null || cy == null) return null;
-  return /* @__PURE__ */ jsxs("g", { filter: "url(#dotGlow)", children: [
-    /* @__PURE__ */ jsxs("circle", { cx, cy, r: 6, fill: "none", stroke: color, strokeWidth: 2, opacity: 0.5, children: [
-      /* @__PURE__ */ jsx("animate", { attributeName: "r", from: "4", to: "10", dur: "1.2s", repeatCount: "indefinite" }),
-      /* @__PURE__ */ jsx("animate", { attributeName: "opacity", from: "0.6", to: "0", dur: "1.2s", repeatCount: "indefinite" })
-    ] }),
-    /* @__PURE__ */ jsx("circle", { cx, cy, r: 4, fill: color, stroke: dotStroke, strokeWidth: 2 })
-  ] });
-}
-function CyberTooltipContent({
-  active,
-  payload,
-  label,
-  colors,
-  labelFormatter,
-  valueFormatter
-}) {
-  if (!active || !payload?.length) return null;
-  const filtered = payload.filter((entry) => !entry.name?.startsWith("_pulse_"));
-  if (!filtered.length) return null;
-  const displayLabel = label && labelFormatter ? labelFormatter(label) : label;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        background: colors.tooltipBg,
-        border: `1px solid ${colors.tooltipBorder}`,
-        borderRadius: 8,
-        padding: "10px 14px",
-        backdropFilter: "var(--glass-blur)",
-        WebkitBackdropFilter: "var(--glass-blur)",
-        boxShadow: "var(--standard-box-shadow)",
-        fontFamily: "var(--mantine-font-family-monospace, monospace)",
-        minWidth: 160
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: 11,
-              color: colors.tickText,
-              marginBottom: 8,
-              letterSpacing: "0.05em",
-              textTransform: "uppercase",
-              borderBottom: `1px solid ${colors.tooltipBorder}`,
-              paddingBottom: 6
-            },
-            children: displayLabel
-          }
-        ),
-        filtered.map((entry) => {
-          const color = entry.color || getSeriesColor(entry.dataKey, colors);
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                gap: 16,
-                padding: "3px 0",
-                fontSize: 12
-              },
-              children: [
-                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        width: 8,
-                        height: 8,
-                        borderRadius: "50%",
-                        backgroundColor: color,
-                        boxShadow: `0 0 6px ${color}`
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { style: { color: colors.tooltipText }, children: entry.name ?? entry.dataKey })
-                ] }),
-                /* @__PURE__ */ jsx("span", { style: { color, fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: entry.value != null && valueFormatter ? valueFormatter(entry.value) : String(entry.value) })
-              ]
-            },
-            entry.dataKey
-          );
-        })
-      ]
-    }
-  );
-}
-function CyberLegendItem({ color, label }) {
-  return /* @__PURE__ */ jsxs(Group, { gap: 8, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          width: 10,
-          height: 10,
-          borderRadius: "50%",
-          backgroundColor: color,
-          boxShadow: `0 0 8px ${color}, 0 0 16px ${color}40`
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { letterSpacing: "0.03em" }, children: label })
-  ] });
-}
-var COLOR_MAP = {
-  cyan: { gradient: "url(#gradCyan)", filter: "url(#glowCyan)", key: "cyan" },
-  blue: { gradient: "url(#gradBlue)", filter: "url(#glowBlue)", key: "blue" },
-  green: { gradient: "url(#gradGreen)", filter: "url(#glowGreen)", key: "green" },
-  red: { gradient: "url(#gradRed)", filter: "url(#glowRed)", key: "red" },
-  yellow: { gradient: "url(#gradYellow)", filter: "url(#glowYellow)", key: "yellow" }
-};
-function CyberAreaChart({
-  data,
-  series,
-  xDataKey = "time",
-  height = 300,
-  yAxisLabel,
-  yDomain,
-  yTickFormatter,
-  showGrid = true,
-  showZeroBaseline = true,
-  baselineColor,
-  lineOnly = false,
-  margin = { top: 8, right: 20, left: 0, bottom: 0 },
-  xTickFormatter,
-  tooltipFormatter
-}) {
-  const isLight = useComputedColorScheme("dark") === "light";
-  const colors = useCyberColors();
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => setReady(true));
-    return () => cancelAnimationFrame(frame);
-  }, []);
-  const allZero = useMemo(() => {
-    if (!showZeroBaseline || !data.length) return false;
-    return data.every((row) => series.every((s) => row[s.dataKey] === 0));
-  }, [data, series, showZeroBaseline]);
-  if (!ready || !data.length) return /* @__PURE__ */ jsx(Box, { style: { height } });
-  const gridProps = {
-    stroke: colors.gridLine,
-    strokeDasharray: "3 6",
-    strokeOpacity: 1
-  };
-  const xAxisConfig = {
-    stroke: "none",
-    tick: {
-      fill: colors.tickText,
-      fontSize: 11,
-      fontFamily: "var(--mantine-font-family-monospace, monospace)"
-    },
-    tickLine: false,
-    axisLine: { stroke: colors.grid, strokeWidth: 1 }
-  };
-  const yTickStyle = {
-    fill: colors.tickText,
-    fontSize: 11,
-    fontFamily: "var(--mantine-font-family-monospace, monospace)"
-  };
-  return /* @__PURE__ */ jsx(Box, { style: { width: "100%", height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(AreaChart, { data, margin, children: [
-    /* @__PURE__ */ jsx(CyberDefs, { colors }),
-    /* @__PURE__ */ jsx(PulseDefs, { series, colors, isLight }),
-    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...gridProps }),
-    /* @__PURE__ */ jsx(XAxis, { dataKey: xDataKey, ...xAxisConfig, tickFormatter: xTickFormatter }),
-    /* @__PURE__ */ jsx(
-      YAxis,
-      {
-        domain: yDomain ?? [0, (max) => Math.max(max, 1)],
-        allowDecimals: false,
-        stroke: "none",
-        tick: yTickStyle,
-        tickFormatter: yTickFormatter,
-        tickLine: false,
-        axisLine: { stroke: colors.grid, strokeWidth: 1 },
-        label: yAxisLabel ? {
-          value: yAxisLabel,
-          angle: -90,
-          position: "insideLeft",
-          offset: 0,
-          style: { fill: colors.tickText, fontSize: 11 }
-        } : void 0
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        content: /* @__PURE__ */ jsx(CyberTooltipContent, { colors, labelFormatter: xTickFormatter, valueFormatter: tooltipFormatter }),
-        cursor: { stroke: colors.cyan, strokeOpacity: 0.2 }
-      }
-    ),
-    allZero && (() => {
-      const bColor = colors[baselineColor ?? series[0]?.color ?? "cyan"];
-      return /* @__PURE__ */ jsx(
-        ReferenceLine,
-        {
-          y: 0,
-          stroke: bColor,
-          strokeWidth: 2,
-          style: {
-            filter: `drop-shadow(0 0 4px ${bColor}) drop-shadow(0 0 8px ${bColor})`
-          }
-        }
-      );
-    })(),
-    series.map((s) => {
-      const cm = COLOR_MAP[s.color ?? "cyan"];
-      const strokeColor = colors[cm.key];
-      return /* @__PURE__ */ jsx(
-        Area,
-        {
-          type: "monotone",
-          dataKey: s.dataKey,
-          name: s.name ?? s.dataKey,
-          stroke: strokeColor,
-          strokeWidth: lineOnly ? 3 : 2,
-          fill: lineOnly ? "transparent" : cm.gradient,
-          filter: cm.filter,
-          dot: false,
-          activeDot: /* @__PURE__ */ jsx(CyberActiveDot, { color: strokeColor, dotStroke: colors.dotStroke }),
-          animationBegin: 100,
-          animationDuration: s.animationDuration ?? 1200,
-          animationEasing: "ease-out"
-        },
-        s.dataKey
-      );
-    }),
-    series.map((s, i) => /* @__PURE__ */ jsx(
-      Area,
-      {
-        type: "monotone",
-        dataKey: s.dataKey,
-        name: `_pulse_${s.dataKey}`,
-        stroke: `url(#pulse-${i})`,
-        strokeWidth: 3,
-        fill: "none",
-        filter: "url(#pulseGlow)",
-        dot: false,
-        activeDot: false,
-        tooltipType: "none",
-        isAnimationActive: false,
-        style: { pointerEvents: "none" }
-      },
-      `pulse-${s.dataKey}`
-    ))
-  ] }) }) });
-}
-
-export { CyberAreaChart, CyberLegendItem, getSeriesColor, useCyberColors };
+export { ActivityTrendChart, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-4KPI7YCY.js';
+import '../chunk-YGYF6G7W.js';
+import '../chunk-6HZAMY6T.js';
+import '../chunk-LHQTTUL2.js';
+import '../chunk-YZ6GTZXL.js';
+import '../chunk-LFYO3MDC.js';
+import '../chunk-4VGWQ5AN.js';
+import '../chunk-2JBWPFHF.js';
+import '../chunk-FWZJH3TL.js';
+import '../chunk-NEK6JKPW.js';
+import '../chunk-L2CM2CUA.js';
+import '../chunk-KA7LO7U5.js';
+import '../chunk-DD3CCMCZ.js';
+import '../chunk-7PLEQFHO.js';
+import '../chunk-Q7DJKLEN.js';

package/dist/{chunk-YJFTZUJJ.js → chunk-3Q5V2T6L.js}

@@ -1,9 +1,9 @@
+import { isStepStartedContext, isConditionalRouteContext, isStepCompletedContext, isStepFailedContext, isLifecycleEvent, isIterationEvent, isToolCallEvent, toWorkflowLogMessage } from './chunk-YZ6GTZXL.js';
 import { useMemo } from 'react';
 import dagre from '@dagrejs/dagre';
 import { IconCircleDot, IconLoader, IconAlertTriangle, IconX, IconCheck } from '@tabler/icons-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/execution/hooks/useMergedExecution.ts
 function useMergedExecution(fetchedExecution, streamingLogs) {
   return useMemo(() => {
     if (!fetchedExecution) return void 0;
@@ -17,55 +17,6 @@ function useMergedExecution(fetchedExecution, streamingLogs) {
     };
   }, [fetchedExecution, streamingLogs]);
 }
-
-// ../core/src/execution/engine/workflow/logging.ts
-function isStepStartedContext(ctx) {
-  return ctx.contextType === "step-started" || "stepStatus" in ctx && ctx.stepStatus === "started";
-}
-function isStepCompletedContext(ctx) {
-  return ctx.contextType === "step-completed" || "stepStatus" in ctx && ctx.stepStatus === "completed";
-}
-function isStepFailedContext(ctx) {
-  return ctx.contextType === "step-failed" || "stepStatus" in ctx && ctx.stepStatus === "failed";
-}
-function isConditionalRouteContext(ctx) {
-  return ctx.contextType === "conditional-route" || "target" in ctx && "stepId" in ctx && !("stepStatus" in ctx);
-}
-function toWorkflowLogMessage(log) {
-  if (log.context?.type === "workflow") {
-    return {
-      level: log.level,
-      message: log.message,
-      timestamp: log.timestamp,
-      context: log.context
-    };
-  }
-  return {
-    level: log.level,
-    message: log.message,
-    timestamp: log.timestamp,
-    context: log.context
-  };
-}
-
-// ../core/src/execution/engine/agent/observability/logging.ts
-function isLifecycleEvent(ctx) {
-  return "stage" in ctx && ctx.stage !== void 0;
-}
-function isIterationEvent(ctx) {
-  return "eventType" in ctx && ctx.eventType !== void 0;
-}
-function isToolCallEvent(ctx) {
-  return "eventType" in ctx && ctx.eventType === "tool-call";
-}
-
-// ../core/src/execution/engine/base/types.ts
-var ResourceStatusColors = {
-  dev: "var(--color-primary)",
-  prod: "var(--color-success)"
-};
-
-// src/execution/hooks/useExecutionPath.ts
 function useExecutionPath(executionLogs, workflowDefinition) {
   return useMemo(() => {
     if (!executionLogs || executionLogs.length === 0) {
@@ -867,4 +818,4 @@ function calculateBarPosition(startTime, endTime, executionStart, executionEnd)
   };
 }
 
-export { AGENT_CONSTANTS, CONTAINER_CONSTANTS, ResourceStatusColors, SHARED_VIZ_CONSTANTS, STATUS_COLORS, TIMELINE_CONSTANTS, WORKFLOW_CONSTANTS, calculateBarPosition, formatDuration, getEdgeColor, getEdgeOpacity, getResourceStatusColor, getStatusColors, getStatusIcon, shouldAnimateEdge, useAgentIterationData, useExecutionPath, useMergedExecution, useReactFlowAgent, useTimelineData, useUnifiedWorkflowLayout, useWorkflowStepsLayout };
+export { AGENT_CONSTANTS, CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS, STATUS_COLORS, TIMELINE_CONSTANTS, WORKFLOW_CONSTANTS, calculateBarPosition, formatDuration, getEdgeColor, getEdgeOpacity, getResourceStatusColor, getStatusColors, getStatusIcon, shouldAnimateEdge, useAgentIterationData, useExecutionPath, useMergedExecution, useReactFlowAgent, useTimelineData, useUnifiedWorkflowLayout, useWorkflowStepsLayout };