@elevasis/ui 1.0.0

package/dist/chunk-NE36BUGQ.js

@@ -0,0 +1,146 @@
+import { formatDuration } from './chunk-6BJOYF6E.js';
+import { Table, Text, Badge, Tooltip, Box, Center, Loader, Stack } from '@mantine/core';
+import { IconFileOff, IconCircle, IconAlertTriangle, IconCircleX, IconCircleCheck } from '@tabler/icons-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AreaChart } from '@mantine/charts';
+
+function formatStartTime(timestamp) {
+  return new Date(timestamp).toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function getStatusConfig(status) {
+  switch (status) {
+    case "running":
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircle, { size: 14, color: "var(--color-primary)" }),
+        label: "Running",
+        color: "blue"
+      };
+    case "completed":
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircleCheck, { size: 14, color: "var(--color-success)" }),
+        label: "Completed",
+        color: "green"
+      };
+    case "failed":
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircleX, { size: 14, color: "var(--color-error)" }),
+        label: "Failed",
+        color: "red"
+      };
+    case "warning":
+      return {
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 14, color: "var(--color-warning)" }),
+        label: "Warning",
+        color: "yellow"
+      };
+    case "pending":
+    default:
+      return {
+        icon: /* @__PURE__ */ jsx(IconCircle, { size: 14, color: "var(--mantine-color-gray-6)" }),
+        label: "Pending",
+        color: "gray"
+      };
+  }
+}
+function LoadingState() {
+  return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
+}
+function EmptyState() {
+  return /* @__PURE__ */ jsx(Center, { py: "xl", children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(IconFileOff, { size: 48, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, c: "dimmed", children: "No executions found" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Executions will appear here when workflows or agents are run" })
+  ] }) });
+}
+function ExecutionLogsTable({ executions, isLoading, onRowClick }) {
+  const handleRowClick = (execution) => {
+    onRowClick?.({
+      resourceType: execution.resourceType,
+      resourceId: execution.resourceId,
+      executionId: execution.id
+    });
+  };
+  return /* @__PURE__ */ jsxs(Table, { highlightOnHover: true, children: [
+    /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+      /* @__PURE__ */ jsx(Table.Th, { children: "Resource" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Status" }),
+      /* @__PURE__ */ jsx(Table.Th, { children: "Started" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "right", children: "Duration" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "center", children: "Env" }),
+      /* @__PURE__ */ jsx(Table.Th, { ta: "center", children: "Version" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Table.Tbody, { children: isLoading ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 6, children: /* @__PURE__ */ jsx(LoadingState, {}) }) }) : executions.length === 0 ? /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: 6, children: /* @__PURE__ */ jsx(EmptyState, {}) }) }) : executions.map((execution) => {
+      const statusConfig = getStatusConfig(execution.status);
+      return /* @__PURE__ */ jsxs(
+        Table.Tr,
+        {
+          style: { cursor: onRowClick ? "pointer" : void 0 },
+          onClick: () => handleRowClick(execution),
+          children: [
+            /* @__PURE__ */ jsx(Table.Td, { style: { maxWidth: 200 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", lineClamp: 1, title: execution.resourceName, children: execution.resourceName }) }),
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { color: statusConfig.color, variant: "light", size: "sm", leftSection: statusConfig.icon, children: statusConfig.label }) }),
+            /* @__PURE__ */ jsx(Table.Td, { style: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatStartTime(execution.startTime) }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "right", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: execution.status === "running" ? "dimmed" : void 0, children: formatDuration(execution.duration) }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "center", children: /* @__PURE__ */ jsx(Badge, { color: execution.resourceStatus === "prod" ? "green" : "gray", variant: "light", size: "sm", children: execution.resourceStatus.toUpperCase() }) }),
+            /* @__PURE__ */ jsx(Table.Td, { ta: "center", children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                label: `Resource: ${execution.resourceVersion ?? "-"}
+API: ${execution.apiVersion ?? "-"}
+SDK: ${execution.sdkVersion ?? "-"}`,
+                multiline: true,
+                position: "left",
+                children: /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "dimmed", style: { cursor: "help" }, children: execution.resourceVersion ?? "-" })
+              }
+            ) })
+          ]
+        },
+        execution.id
+      );
+    }) })
+  ] });
+}
+function getHealthColor(successRate, hasExecutions = true) {
+  if (!hasExecutions) return "var(--mantine-color-gray-6)";
+  if (successRate >= 95) return "var(--color-success)";
+  if (successRate >= 80) return "var(--color-warning)";
+  return "var(--color-error)";
+}
+function ResourceHealthChart({
+  healthData,
+  hasExecutions = true,
+  width = 300,
+  height = 60
+}) {
+  if (!healthData || healthData.trendData.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { w: width, h: height, style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "No activity" }) });
+  }
+  const chartData = healthData.trendData.map((d) => ({
+    time: d.time,
+    rate: d.rate
+  }));
+  const chartColor = getHealthColor(healthData.summary.successRate, hasExecutions);
+  return /* @__PURE__ */ jsx(Box, { w: width, h: height, children: /* @__PURE__ */ jsx(
+    AreaChart,
+    {
+      h: height,
+      data: chartData,
+      dataKey: "time",
+      series: [{ name: "rate", color: chartColor }],
+      curveType: "monotone",
+      withDots: false,
+      withTooltip: false,
+      withXAxis: false,
+      withYAxis: false,
+      fillOpacity: 0.2,
+      gridAxis: "none"
+    }
+  ) });
+}
+
+export { ExecutionLogsTable, ResourceHealthChart, getHealthColor };

package/dist/chunk-NGXCFBCS.js

@@ -0,0 +1,398 @@
+import { getPreset, generateShades, createCssVariablesResolver } from './chunk-MAAS6CGR.js';
+import { ApiClientProvider, createUseApiClient } from './chunk-GDV44UWF.js';
+import { ElevasisServiceProvider } from './chunk-KA7LO7U5.js';
+import { WorkOSAuthBridge, OAuthProvider, OAuthAuthBridge } from './chunk-OEYU5O27.js';
+import { useAuthContext } from './chunk-7PLEQFHO.js';
+import { useMemo, useEffect, useRef } from 'react';
+import { Tooltip, Text, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Code, Divider, Card, Button, Accordion, createTheme, mergeThemeOverrides, MantineProvider } from '@mantine/core';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { AuthKitProvider } from '@workos-inc/authkit-react';
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+import { jsx } from 'react/jsx-runtime';
+
+var DEFAULT_SIZE = "sm";
+var glassBase = {
+  backdropFilter: "var(--glass-blur)",
+  WebkitBackdropFilter: "var(--glass-blur)",
+  border: "1px solid var(--color-border)"
+};
+var componentThemes = {
+  Accordion: Accordion.extend({
+    styles: {
+      item: {
+        borderColor: "var(--color-border)"
+      },
+      content: {
+        backgroundColor: "var(--color-surface)"
+      }
+    }
+  }),
+  Button: Button.extend({
+    styles: {
+      root: {
+        transition: `all var(--duration-fast) var(--easing)`
+      }
+    }
+  }),
+  Card: Card.extend({
+    defaultProps: {
+      p: DEFAULT_SIZE
+    },
+    styles: {
+      root: {
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
+        boxShadow: "var(--card-shadow)"
+      }
+    }
+  }),
+  // Checkbox styles are in custom.css to support :checked pseudo-selector
+  Divider: Divider.extend({
+    styles: {
+      root: {
+        borderColor: "var(--color-border)"
+      }
+    }
+  }),
+  Code: Code.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Flex: Flex.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  Grid: Grid.extend({
+    defaultProps: {
+      gutter: DEFAULT_SIZE
+    }
+  }),
+  Group: Group.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  HoverCard: HoverCard.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Input: Input.extend({
+    styles: {
+      input: {
+        backgroundColor: "var(--color-surface)",
+        border: "none",
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "0"
+      }
+    }
+  }),
+  Menu: Menu.extend({
+    styles: {
+      dropdown: {
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Modal: Modal.extend({
+    styles: {
+      content: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Notification: Notification.extend({
+    styles: {
+      root: {
+        backgroundColor: "color-mix(in srgb, var(--color-surface) 90%, transparent)",
+        ...glassBase
+      }
+    }
+  }),
+  Popover: Popover.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)",
+        ...glassBase,
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Paper: Paper.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
+        boxShadow: "var(--card-shadow)",
+        padding: `var(--mantine-spacing-${DEFAULT_SIZE})`
+      }
+    }
+  }),
+  ScrollArea: ScrollArea.extend({
+    defaultProps: {
+      scrollbarSize: 8
+    },
+    styles: {
+      scrollbar: {
+        background: "transparent",
+        '&[data-orientation="vertical"]': {
+          width: "8px"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "8px"
+        }
+      },
+      thumb: {
+        borderRadius: "var(--mantine-radius-default)",
+        background: "color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border))",
+        "&:hover": {
+          background: "var(--color-text-subtle)"
+        }
+      }
+    }
+  }),
+  SegmentedControl: SegmentedControl.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)"
+      },
+      indicator: {
+        backgroundColor: "var(--color-surface-hover)",
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Combobox: Combobox.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "red"
+      }
+    }
+  }),
+  Select: Select.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)"
+      }
+    }
+  }),
+  // Switch styles are in custom.css to support [data-checked] attribute selector
+  SimpleGrid: SimpleGrid.extend({
+    defaultProps: {
+      spacing: DEFAULT_SIZE,
+      verticalSpacing: DEFAULT_SIZE
+    }
+  }),
+  Stack: Stack.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  Table: Table.extend({
+    defaultProps: {
+      highlightOnHover: true
+    },
+    styles: {
+      table: {
+        "--table-border-color": "var(--color-border)",
+        "--table-highlight-on-hover-color": "var(--color-surface-hover)"
+      }
+    }
+  }),
+  Tabs: Tabs.extend({}),
+  Text: Text.extend({
+    styles: {
+      root: {
+        fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+      }
+    }
+  }),
+  // Timeline styles are in custom.css to override color-scheme-specific selectors
+  Tooltip: Tooltip.extend({
+    styles: {
+      tooltip: {
+        backgroundColor: "var(--color-surface)",
+        color: "var(--color-text)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  })
+  // Pagination styles are in custom.css to support :not([data-active]) selector
+};
+
+// src/theme/MantineThemeOverride.ts
+var mantineThemeOverride = createTheme({
+  defaultRadius: "xs",
+  fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  cursorType: "pointer",
+  spacing: {
+    xs: "0.5rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  radius: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem"
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem"
+  },
+  components: componentThemes
+});
+var defaultQueryClient = null;
+function getDefaultQueryClient() {
+  if (!defaultQueryClient) {
+    defaultQueryClient = new QueryClient({
+      defaultOptions: { queries: { retry: 1 } }
+    });
+  }
+  return defaultQueryClient;
+}
+var defaultUseOrganizations = () => ({ isInitializing: false, isOrgRefreshing: false });
+function ElevasisUIProvider({
+  auth,
+  theme,
+  organizationId = null,
+  queryClient,
+  apiUrl,
+  onError,
+  isOrganizationReady,
+  children
+}) {
+  if (auth.mode === "apiKey") {
+    throw new Error(
+      `ElevasisUIProvider: auth mode 'apiKey' is not yet implemented. Only 'authkit' and 'oauth' modes are supported.`
+    );
+  }
+  const resolvedQueryClient = queryClient ?? getDefaultQueryClient();
+  const resolvedColorScheme = theme?.colorScheme ?? "dark";
+  const preset = useMemo(() => getPreset(theme?.preset ?? "default"), [theme?.preset]);
+  useEffect(() => {
+    if (!preset.fontImports?.length) return;
+    const links = [];
+    for (const href of preset.fontImports) {
+      if (document.querySelector(`link[href="${href}"]`)) continue;
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      document.head.appendChild(link);
+      links.push(link);
+    }
+    const subtitleFont = preset.subtitleFontFamily ?? preset.mantine?.headings?.fontFamily ?? preset.mantine?.fontFamily ?? "";
+    document.documentElement.style.setProperty("--elevasis-font-family-subtitle", subtitleFont);
+    return () => {
+      links.forEach((l) => l.remove());
+      document.documentElement.style.removeProperty("--elevasis-font-family-subtitle");
+    };
+  }, [preset.fontImports, preset.subtitleFontFamily, preset.mantine?.headings?.fontFamily, preset.mantine?.fontFamily]);
+  const resolvedTheme = useMemo(() => {
+    const primaryHex = theme?.tokens?.primary ?? preset.dark.primary;
+    const primaryOverride = {
+      primaryColor: "primary",
+      colors: { primary: generateShades(primaryHex) }
+    };
+    let base = mergeThemeOverrides(mantineThemeOverride, primaryOverride);
+    if (preset.mantine) base = mergeThemeOverrides(base, preset.mantine);
+    return theme?.mantine ? mergeThemeOverrides(base, theme.mantine) : base;
+  }, [theme?.mantine, preset, theme?.tokens?.primary]);
+  const cssVariablesResolver = useMemo(
+    () => createCssVariablesResolver(theme?.tokens, theme?.preset),
+    [theme?.tokens, theme?.preset]
+  );
+  const content = apiUrl ? /* @__PURE__ */ jsx(
+    ServiceBridge,
+    {
+      apiUrl,
+      organizationId,
+      isOrganizationReady,
+      onError,
+      children
+    }
+  ) : children;
+  const AuthInner = auth.mode === "authkit" ? /* @__PURE__ */ jsx(AuthKitInner, { auth, children: content }) : /* @__PURE__ */ jsx(OAuthInner, { auth, children: content });
+  return /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme: resolvedTheme,
+      defaultColorScheme: resolvedColorScheme,
+      cssVariablesResolver,
+      children: /* @__PURE__ */ jsx(QueryClientProvider, { client: resolvedQueryClient, children: AuthInner })
+    }
+  );
+}
+function AuthKitInner({ auth, children }) {
+  return /* @__PURE__ */ jsx(
+    AuthKitProvider,
+    {
+      clientId: auth.clientId,
+      apiHostname: auth.apiHostname ?? "api.workos.com",
+      redirectUri: auth.redirectUri,
+      devMode: auth.devMode ?? false,
+      children: /* @__PURE__ */ jsx(WorkOSAuthBridge, { children })
+    }
+  );
+}
+function OAuthInner({ auth, children }) {
+  return /* @__PURE__ */ jsx(OAuthProvider, { config: auth, children: /* @__PURE__ */ jsx(OAuthAuthBridge, { children }) });
+}
+function ServiceBridge({
+  apiUrl,
+  organizationId,
+  isOrganizationReady,
+  onError,
+  children
+}) {
+  const { getAccessToken } = useAuthContext();
+  return /* @__PURE__ */ jsx(
+    ApiClientProvider,
+    {
+      getAccessToken,
+      organizationId,
+      isOrganizationReady: isOrganizationReady ?? !!organizationId,
+      onError,
+      children: /* @__PURE__ */ jsx(ServiceBridgeInner, { apiUrl, organizationId, isOrganizationReady, children })
+    }
+  );
+}
+function ServiceBridgeInner({
+  apiUrl,
+  organizationId,
+  isOrganizationReady,
+  children
+}) {
+  const useApiClient = useRef(createUseApiClient(defaultUseOrganizations, apiUrl)).current;
+  const { apiRequest } = useApiClient();
+  return /* @__PURE__ */ jsx(
+    ElevasisServiceProvider,
+    {
+      apiRequest,
+      organizationId,
+      isReady: isOrganizationReady ?? !!organizationId,
+      children
+    }
+  );
+}
+var ElevasisProvider = ElevasisUIProvider;
+
+export { ElevasisProvider, ElevasisUIProvider, mantineThemeOverride };