@elevasis/ui 1.18.0 → 1.20.0

package/dist/chunk-AWMZCYKH.js

@@ -0,0 +1,639 @@
+import { ResourceStatusColors } from './chunk-ELJIFLCB.js';
+import { getErrorInfo, getErrorTitle, getResourceIcon } from './chunk-IOKL7BKE.js';
+import { useAuthContext } from './chunk-BRJ3QZ4E.js';
+import { useRouterContext } from './chunk-Q7DJKLEN.js';
+import { Center, Stack, Title, Text, Button, Box, Loader, Badge, Group, Collapse, ScrollArea, Card, Skeleton, Select, Alert, Code, ThemeIcon, Paper, Space } from '@mantine/core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { IconMinus, IconTrendingUp, IconTrendingDown, IconChevronUp, IconChevronDown, IconAlertCircle, IconClock, IconInfoCircle, IconChevronRight } from '@tabler/icons-react';
+import { useState } from 'react';
+import Markdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+function EmptyState({ icon: Icon, title, description, action, py = "xl" }) {
+  return /* @__PURE__ */ jsx(Center, { py, children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsx(Icon, { size: 48, style: { opacity: 0.5 } }),
+    /* @__PURE__ */ jsx(Title, { order: 4, children: title }),
+    description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ta: "center", children: description }),
+    action && /* @__PURE__ */ jsx(Button, { variant: "light", onClick: action.onClick, leftSection: action.icon, mt: "sm", children: action.label })
+  ] }) });
+}
+function TabCountBadge({ count, isLoading }) {
+  return /* @__PURE__ */ jsx(Box, { miw: 20, h: 20, style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: isLoading ? /* @__PURE__ */ jsx(Loader, { size: 12 }) : /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", circle: count < 10, children: count }) });
+}
+function TrendIndicator({ current, previous, inverse }) {
+  const change = previous === 0 ? 0 : (current - previous) / previous * 100;
+  const isPositive = inverse ? change < 0 : change > 0;
+  const isFlat = Math.abs(change) < 0.1;
+  const color = isFlat ? "gray" : isPositive ? "green" : "red";
+  const Icon = isFlat ? IconMinus : change > 0 ? IconTrendingUp : IconTrendingDown;
+  return /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+    /* @__PURE__ */ jsx(Icon, { size: 12 }),
+    /* @__PURE__ */ jsx(Badge, { size: "sm", color, variant: "light", children: isFlat ? "No change" : `${isPositive ? "+" : ""}${Math.abs(change).toFixed(1)}%` })
+  ] });
+}
+function CollapsibleSection({
+  title,
+  count,
+  countLabel,
+  children,
+  emptyMessage,
+  defaultExpanded = true,
+  maxHeight = 300
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isEmpty = count === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "8px",
+        padding: "8px",
+        border: "1px solid var(--color-border)",
+        boxShadow: "var(--standard-box-shadow)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Group,
+          {
+            gap: "xs",
+            mb: expanded ? "xs" : 0,
+            justify: "space-between",
+            align: "center",
+            style: { cursor: "pointer" },
+            onClick: () => setExpanded(!expanded),
+            children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", style: { flex: 1 }, children: [
+                typeof title === "string" ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    fw: 600,
+                    size: "sm",
+                    c: "var(--color-text)",
+                    style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+                    children: title
+                  }
+                ) : title,
+                count !== void 0 && countLabel && /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", color: "gray", children: [
+                  count,
+                  " ",
+                  count === 1 ? countLabel.replace(/s$/, "") : countLabel
+                ] })
+              ] }),
+              expanded ? /* @__PURE__ */ jsx(IconChevronUp, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronDown, { size: 16 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: expanded, children: isEmpty && emptyMessage ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: emptyMessage }) : /* @__PURE__ */ jsx(ScrollArea, { h: maxHeight, type: "scroll", offsetScrollbars: true, children }) })
+      ]
+    }
+  );
+}
+var PageTitleCaption = ({ title, caption, rightSection }) => {
+  const renderCaption = () => {
+    if (!caption) return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { c: "dimmed", style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: caption }) });
+  };
+  const titleContent = /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx(Title, { order: 1, children: title }),
+    /* @__PURE__ */ jsx(Space, { h: "4" }),
+    renderCaption()
+  ] });
+  if (!rightSection) {
+    return titleContent;
+  }
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "end", children: [
+    titleContent,
+    rightSection
+  ] });
+};
+function StatsCardSkeleton({ chartHeight = 120, withChart = true, statCount = 3 }) {
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { height: 24, width: 150, mb: "md" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "xl", children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 100 }),
+      statCount >= 2 && /* @__PURE__ */ jsx(Skeleton, { height: 60, width: 100 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 40, circle: true })
+    ] }),
+    withChart && /* @__PURE__ */ jsx(Skeleton, { height: chartHeight })
+  ] });
+}
+function ListSkeleton({ rows = 3, rowHeight = 50 }) {
+  return /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: rowHeight }, i)) });
+}
+function DetailCardSkeleton({ rows = 3 }) {
+  return /* @__PURE__ */ jsxs(Card, { withBorder: true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { height: 24, width: 150, mb: "md" }),
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "lg", children: [
+      /* @__PURE__ */ jsx(Skeleton, { height: 80, width: 100 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 80, width: 100 }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 40, circle: true })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { gap: "xs", children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 60 }, i)) })
+  ] });
+}
+function CustomSelector({
+  value,
+  onChange,
+  data,
+  leftSection,
+  placeholder,
+  w,
+  withCheckIcon = false,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      value,
+      onChange,
+      data,
+      leftSection,
+      placeholder,
+      w,
+      size: "xs",
+      variant: "unstyled",
+      withCheckIcon,
+      disabled,
+      styles: {
+        wrapper: {
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--mantine-radius-default)",
+          backgroundColor: "var(--color-surface)",
+          transition: "border-color 150ms ease, background-color 150ms ease",
+          "&:hover": {
+            borderColor: "var(--color-border-hover, var(--mantine-color-dark-3))"
+          }
+        },
+        input: {
+          fontSize: "var(--mantine-font-size-xs)",
+          fontWeight: 500,
+          height: "30px",
+          minHeight: "30px",
+          paddingLeft: leftSection ? "30px" : void 0,
+          borderRadius: "var(--mantine-radius-default)",
+          cursor: "pointer"
+        },
+        section: {
+          color: "var(--color-text-subtle)"
+        },
+        dropdown: {
+          border: "1px solid var(--color-border)",
+          backgroundColor: "var(--color-surface)",
+          boxShadow: "var(--card-shadow)"
+        },
+        option: {
+          fontSize: "var(--mantine-font-size-xs)"
+        }
+      }
+    }
+  );
+}
+function APIErrorAlert({
+  error,
+  title,
+  showRequestId = true,
+  icon = /* @__PURE__ */ jsx(IconAlertCircle, {}),
+  color = "red"
+}) {
+  const { message, code, requestId, retryAfter } = getErrorInfo(error);
+  const alertTitle = title || getErrorTitle(code);
+  return /* @__PURE__ */ jsxs(Alert, { icon, title: alertTitle, color, variant: "light", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: message }),
+    retryAfter && /* @__PURE__ */ jsxs(Text, { size: "sm", mt: "xs", children: [
+      "Please wait ",
+      retryAfter,
+      " seconds before retrying."
+    ] }),
+    showRequestId && requestId && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", mt: "xs", children: [
+      "Request ID: ",
+      /* @__PURE__ */ jsx(Code, { children: requestId })
+    ] })
+  ] });
+}
+
+// src/components/display/StatCard.module.css.js
+var StatCard_module_css_default = { "heroCard": "heroCard", "iconRing": "iconRing", "iconRingSm": "iconRingSm", "heroValue": "heroValue", "heroValueSm": "heroValueSm", "heroLabel": "heroLabel", "heroLabelSm": "heroLabelSm" };
+function StatCard(props) {
+  if (props.variant === "hero") {
+    return /* @__PURE__ */ jsx(HeroStatCard, { ...props });
+  }
+  const { label, value, icon: IconComponent, color } = props;
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(ThemeIcon, { size: "lg", variant: "light", color, children: /* @__PURE__ */ jsx(IconComponent, { size: 18 }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: label }),
+      /* @__PURE__ */ jsx(Text, { size: "lg", fw: 600, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: value })
+    ] })
+  ] }) });
+}
+function HeroStatCard({
+  icon: IconComponent,
+  value,
+  label,
+  valueColor,
+  isLoading,
+  size = "sm",
+  children
+}) {
+  const sm = size === "sm";
+  const iconSize = sm ? 36 : 46;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Paper, { p: sm ? "md" : "lg", className: StatCard_module_css_default.heroCard, children: /* @__PURE__ */ jsxs(Group, { gap: sm ? "sm" : "md", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(Skeleton, { circle: true, height: iconSize }),
+      /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsx(Skeleton, { height: sm ? 24 : 32, width: 60 }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 12, width: 80 })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Paper, { p: sm ? "md" : "lg", className: StatCard_module_css_default.heroCard, children: /* @__PURE__ */ jsxs(Group, { gap: sm ? "sm" : "md", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx("div", { className: sm ? StatCard_module_css_default.iconRingSm : StatCard_module_css_default.iconRing, children: /* @__PURE__ */ jsx(IconComponent, { size: sm ? 18 : 22 }) }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 2, style: { flex: children ? 1 : void 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: sm ? StatCard_module_css_default.heroValueSm : StatCard_module_css_default.heroValue,
+          style: valueColor ? { color: valueColor } : void 0,
+          children: value
+        }
+      ),
+      children ? /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx("span", { className: sm ? StatCard_module_css_default.heroLabelSm : StatCard_module_css_default.heroLabel, children: label }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children })
+      ] }) : /* @__PURE__ */ jsx("span", { className: sm ? StatCard_module_css_default.heroLabelSm : StatCard_module_css_default.heroLabel, children: label })
+    ] })
+  ] }) });
+}
+function StatCardSkeleton() {
+  return /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsx(Skeleton, { height: 60 }) });
+}
+var customCodeTheme = Object.fromEntries(
+  Object.entries(oneDark).map(([key, value]) => [
+    key,
+    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
+  ])
+);
+var defaultComponents = {
+  h1: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 3, c: "var(--color-primary)", mb: "xs", mt: "md", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx(Title, { order: 4, c: "var(--color-primary)", mb: "xs", mt: "sm", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { style: { margin: "0.5rem 0", paddingLeft: "1.5rem" }, children }),
+  li: ({ children }) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.25rem", fontSize: "var(--mantine-font-size-sm)" }, children }),
+  code: ({ className, children, ...props }) => {
+    const match = /language-(\w+)/.exec(className || "");
+    const codeString = String(children).replace(/\n$/, "");
+    if (match) {
+      return /* @__PURE__ */ jsx(
+        Prism,
+        {
+          style: customCodeTheme,
+          language: match[1],
+          PreTag: "div",
+          customStyle: {
+            margin: "0.5rem 0",
+            borderRadius: "var(--mantine-radius-default)",
+            fontSize: "0.8rem"
+          },
+          children: codeString
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Code, { ...props, children });
+  },
+  pre: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx(Box, { pl: "sm", my: "xs", style: { borderLeft: "2px solid var(--color-border)" }, children }),
+  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children }),
+  strong: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fw: 700, children }),
+  em: ({ children }) => /* @__PURE__ */ jsx(Text, { component: "span", fs: "italic", children })
+};
+function StyledMarkdown({ children, components, className, style }) {
+  const mergedComponents = components ? { ...defaultComponents, ...components } : defaultComponents;
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx(Markdown, { components: mergedComponents, children }) });
+}
+var jsonTheme = Object.fromEntries(
+  Object.entries(oneDark).map(([key, value]) => [
+    key,
+    typeof value === "object" && value !== null ? { ...value, background: "none", backgroundColor: "none" } : value
+  ])
+);
+function JsonViewer({ data, maxHeight, fontSize = "0.8rem" }) {
+  const jsonString = typeof data === "string" ? data : JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ jsx(
+    Prism,
+    {
+      language: "json",
+      style: jsonTheme,
+      customStyle: {
+        margin: 0,
+        fontSize,
+        maxHeight,
+        overflow: maxHeight ? "auto" : void 0,
+        overflowX: "auto"
+      },
+      children: jsonString
+    }
+  );
+}
+var subtleMarkdownComponents = {
+  p: ({ children }) => /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, c: "var(--color-text-subtle)", style: { whiteSpace: "pre-wrap" }, children })
+};
+var subtleMarkdownWrapperStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+function ContextViewer({ data }) {
+  return /* @__PURE__ */ jsx(ContextNode, { data, depth: 0 });
+}
+function ContextNode({ data, depth }) {
+  if (data === null || data === void 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No context provided" });
+  }
+  if (typeof data === "string") {
+    return /* @__PURE__ */ jsx(StyledMarkdown, { components: subtleMarkdownComponents, style: subtleMarkdownWrapperStyle, children: data });
+  }
+  if (typeof data === "number" || typeof data === "boolean") {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", children: String(data) });
+  }
+  if (Array.isArray(data)) {
+    return /* @__PURE__ */ jsx(ArrayView, { items: data, depth });
+  }
+  if (typeof data === "object") {
+    return /* @__PURE__ */ jsx(ObjectView, { data, depth });
+  }
+  return /* @__PURE__ */ jsx(Text, { size: "sm", children: String(data) });
+}
+function formatLabel(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function hasMarkdown(value) {
+  return /(\*\*.+\*\*|^#{1,6}\s|^\s*[-*]\s|\[.+\]\(.+\)|^\|.+\|$|^>\s|```)/.test(value);
+}
+function NestedSection({ title, children }) {
+  const [expanded, setExpanded] = useState(true);
+  return /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+    /* @__PURE__ */ jsxs(Group, { gap: 4, style: { cursor: "pointer", userSelect: "none" }, onClick: () => setExpanded((v) => !v), children: [
+      /* @__PURE__ */ jsx(
+        IconChevronRight,
+        {
+          size: 14,
+          color: "var(--color-primary)",
+          style: {
+            transition: "transform 150ms ease",
+            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+            flexShrink: 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: title })
+    ] }),
+    expanded && /* @__PURE__ */ jsx(Box, { pl: "sm", style: { borderLeft: "2px solid var(--color-border)" }, children })
+  ] });
+}
+function PrimitiveValue({ value }) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "\u2014" });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children: value ? "Yes" : "No" });
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, children: value.toLocaleString() });
+  }
+  const str = String(value);
+  if (hasMarkdown(str)) {
+    return /* @__PURE__ */ jsx(StyledMarkdown, { components: subtleMarkdownComponents, children: str });
+  }
+  return /* @__PURE__ */ jsx(Text, { size: "sm", m: 0, c: "var(--color-text-subtle)", style: { whiteSpace: "pre-wrap" }, children: str });
+}
+function ArrayView({ items, depth }) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Empty list" });
+  }
+  const allPrimitive = items.every((item) => typeof item !== "object" || item === null);
+  if (allPrimitive) {
+    return /* @__PURE__ */ jsx(Stack, { gap: 2, children: items.map((item, i) => /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-start", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { userSelect: "none" }, children: "\u2022" }),
+      /* @__PURE__ */ jsx(PrimitiveValue, { value: item })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: items.map((item, i) => /* @__PURE__ */ jsx(Paper, { p: "sm", style: { border: "1px solid var(--color-border)" }, children: /* @__PURE__ */ jsx(ContextNode, { data: item, depth: depth + 1 }) }, i)) });
+}
+function ObjectView({ data, depth }) {
+  const entries = Object.entries(data);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Empty" });
+  }
+  const simpleEntries = [];
+  const complexEntries = [];
+  for (const [key, value] of entries) {
+    if (value === null || value === void 0 || typeof value === "boolean" || typeof value === "number") {
+      simpleEntries.push([key, value]);
+    } else if (typeof value === "string") {
+      if (hasMarkdown(value) || value.length > 120) {
+        complexEntries.push([key, value]);
+      } else {
+        simpleEntries.push([key, value]);
+      }
+    } else {
+      complexEntries.push([key, value]);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: 10, children: [
+    simpleEntries.length > 0 && /* @__PURE__ */ jsx(Stack, { gap: 6, children: simpleEntries.map(([key, value]) => /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "sm",
+          style: { minWidth: 140, flexShrink: 0, fontFamily: "var(--mantine-font-family-headings)" },
+          children: formatLabel(key)
+        }
+      ),
+      /* @__PURE__ */ jsx(PrimitiveValue, { value })
+    ] }, key)) }),
+    complexEntries.map(([key, value]) => /* @__PURE__ */ jsx(NestedSection, { title: formatLabel(key), children: /* @__PURE__ */ jsx(ContextNode, { data: value, depth: depth + 1 }) }, key))
+  ] });
+}
+var TIME_RANGE_OPTIONS = [
+  { value: "1h", label: "Last 1 hour" },
+  { value: "24h", label: "Last 24 hours" },
+  { value: "7d", label: "Last 7 days" },
+  { value: "30d", label: "Last 30 days" }
+];
+function TimeRangeSelector({ value, onChange, width = 180 }) {
+  return /* @__PURE__ */ jsx(
+    CustomSelector,
+    {
+      value,
+      onChange: (newValue) => newValue && onChange(newValue),
+      data: TIME_RANGE_OPTIONS,
+      leftSection: /* @__PURE__ */ jsx(IconClock, { size: 16, color: "var(--color-text-subtle)" }),
+      w: width,
+      withCheckIcon: true
+    }
+  );
+}
+function PageNotFound() {
+  const { currentPath, navigate } = useRouterContext();
+  const { user, isLoading } = useAuthContext();
+  const isAuthPage = currentPath === "/login" || currentPath === "/auth-redirect";
+  const shouldShowSidebar = user && !isLoading && !isAuthPage;
+  const height = shouldShowSidebar ? "100%" : "100vh";
+  return /* @__PURE__ */ jsx(Center, { h: height, bg: "var(--color-background)", children: /* @__PURE__ */ jsxs(Stack, { align: "center", justify: "center", children: [
+    /* @__PURE__ */ jsx(IconInfoCircle, { size: 60, color: "var(--color-text-subtle)" }),
+    /* @__PURE__ */ jsx(Title, { order: 1, children: "Page Not Found" }),
+    /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "lg", children: "The page you are looking for does not exist." }),
+    /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(Button, { size: "md", onClick: () => navigate("/"), children: "Go Home" }) })
+  ] }) });
+}
+function ResourceCard({
+  resource,
+  onClick,
+  layout = "stack",
+  rightSection,
+  lastRunLabel,
+  style,
+  ...rest
+}) {
+  const Icon = getResourceIcon(resource.type);
+  if (!Icon) {
+    return /* @__PURE__ */ jsx(Paper, { shadow: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+      "Invalid resource type: ",
+      resource.type
+    ] }) });
+  }
+  const cardStyle = {
+    cursor: "pointer",
+    ...layout === "grid" || layout === "card" ? { transition: "box-shadow var(--duration-fast) var(--easing)" } : {},
+    ...style
+  };
+  const iconSize = layout === "grid" ? 28 : 20;
+  const details = /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(Icon, { size: iconSize, color: "var(--color-primary)" }),
+    /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            fw: 600,
+            size: "sm",
+            style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+            ...layout === "stack" ? { lineClamp: 1 } : { truncate: true },
+            children: resource.name
+          }
+        ),
+        /* @__PURE__ */ jsx(Badge, { variant: "light", size: layout === "grid" ? "xs" : "sm", children: resource.type })
+      ] }),
+      resource.description && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", ...layout === "stack" ? { lineClamp: 1 } : { truncate: true }, children: resource.description }),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "outline", size: "xs", children: [
+          "v",
+          resource.version
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "outline", size: layout === "grid" ? "xs" : "sm", children: resource.status.toUpperCase() })
+      ] }),
+      lastRunLabel && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: lastRunLabel }),
+      /* @__PURE__ */ jsx(Text, { size: layout === "grid" ? "sm" : "xs", c: "dimmed", ff: "monospace", children: resource.resourceId })
+    ] })
+  ] });
+  if (layout === "row") {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        withBorder: true,
+        style: { cursor: "pointer", ...style },
+        onClick: () => onClick(resource),
+        "data-resource-id": rest["data-resource-id"],
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "18px 200px 120px 1fr 180px 140px 14px",
+              alignItems: "center",
+              gap: "var(--mantine-spacing-sm)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 18, color: "var(--color-primary)" }),
+              /* @__PURE__ */ jsx(Text, { fw: 600, size: "md", truncate: true, style: { fontFamily: "var(--elevasis-font-family-subtitle)" }, children: resource.name }),
+              /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+                resource.version && /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "sm", children: [
+                  "v",
+                  resource.version
+                ] }),
+                /* @__PURE__ */ jsx(Badge, { color: ResourceStatusColors[resource.status], variant: "light", size: "sm", children: resource.status.toUpperCase() })
+              ] }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", truncate: true, style: { minWidth: 0 }, children: resource.description || "" }),
+              /* @__PURE__ */ jsx("div", { style: { whiteSpace: "nowrap" }, children: rightSection }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { whiteSpace: "nowrap", textAlign: "right" }, children: lastRunLabel || "" }),
+              /* @__PURE__ */ jsx(IconChevronRight, { size: 14, style: { opacity: 0.3 } })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      shadow: "sm",
+      withBorder: true,
+      style: cardStyle,
+      onClick: () => onClick(resource),
+      "data-resource-id": rest["data-resource-id"],
+      children: /* @__PURE__ */ jsx(Stack, { children: details })
+    }
+  );
+}
+
+// src/components/display/ResourceCardAdapters.ts
+function catalogItemToResourceDefinition(item) {
+  return {
+    resourceId: item.resourceId,
+    name: item.resourceName,
+    description: item.description || "",
+    version: item.version,
+    type: item.resourceType,
+    status: item.status
+  };
+}
+function CardHeader({ icon, title, subtitle, rightSection }) {
+  const wrappedIcon = icon ? /* @__PURE__ */ jsx(ThemeIcon, { size: "md", variant: "light", children: icon }) : null;
+  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "md", children: [
+    subtitle ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        wrappedIcon,
+        /* @__PURE__ */ jsx(Title, { order: 3, children: title })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", mt: 2, children: subtitle })
+    ] }) : /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+      wrappedIcon,
+      /* @__PURE__ */ jsx(Title, { order: 3, children: title })
+    ] }),
+    rightSection
+  ] });
+}
+var SIZE_MAP = {
+  sm: { dot: 7, inner: 6, outer: 12 },
+  md: { dot: 10, inner: 8, outer: 16 },
+  lg: { dot: 12, inner: 10, outer: 20 }
+};
+function GlowDot({ color, size = "md" }) {
+  const { dot, inner, outer } = SIZE_MAP[size];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: dot,
+        height: dot,
+        borderRadius: "50%",
+        backgroundColor: color,
+        boxShadow: `0 0 ${inner}px ${color}, 0 0 ${outer}px ${color}40`,
+        flexShrink: 0
+      }
+    }
+  );
+}
+
+export { APIErrorAlert, CardHeader, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StyledMarkdown, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition };