@elevasis/ui 2.67.0 → 2.69.0

package/dist/chunk-IRV6KJPV.js

@@ -0,0 +1,425 @@
+import { useAppearance } from './chunk-WXHAHKKI.js';
+import { useState, Component } from 'react';
+import { CopyButton, Tooltip } from '@mantine/core';
+import { IconCheck, IconCopy } from '@tabler/icons-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var tokens = {
+  cardBg: "rgba(16, 16, 20, 0.92)",
+  cardBorder: "rgba(255, 255, 255, 0.06)",
+  accentRed: "#ff5555",
+  accentRedDim: "rgba(255, 85, 85, 0.15)",
+  textPrimary: "#e8e8e8",
+  textSecondary: "rgba(255, 255, 255, 0.5)",
+  textTertiary: "rgba(255, 255, 255, 0.3)",
+  codeBg: "rgba(0, 0, 0, 0.35)",
+  codeBorder: "rgba(255, 255, 255, 0.05)",
+  fileHighlight: "#7dd3fc",
+  separator: "rgba(255, 255, 255, 0.06)",
+  mono: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace",
+  sans: "'Inter', -apple-system, system-ui, sans-serif"
+};
+function parseStackFrames(stack) {
+  return stack.split("\n").filter((line) => line.trim().startsWith("at ")).map((line) => {
+    const trimmed = line.trim();
+    const parenMatch = trimmed.match(/^at\s+(.+?)\s+\((.+)\)$/);
+    if (parenMatch) {
+      return { fn: parenMatch[1], file: parenMatch[2], raw: trimmed };
+    }
+    const simpleMatch = trimmed.match(/^at\s+(.+)$/);
+    if (simpleMatch) {
+      return { fn: "", file: simpleMatch[1], raw: trimmed };
+    }
+    return { fn: "", file: "", raw: trimmed };
+  });
+}
+var COMPONENT_NOISE = /* @__PURE__ */ new Set([
+  "div",
+  "main",
+  "span",
+  "section",
+  "Lazy",
+  "Suspense",
+  "SafeFragment",
+  "MatchImpl",
+  "MatchInnerImpl",
+  "OutletImpl",
+  "CatchBoundaryImpl",
+  "CatchBoundary",
+  "MatchesInner",
+  "Matches",
+  "SplitComponent"
+]);
+function isNoiseComponent(name) {
+  if (COMPONENT_NOISE.has(name)) return true;
+  if (name.startsWith("@mantine/") || name.startsWith("@tanstack/")) return true;
+  return false;
+}
+function parseComponentStack(stack) {
+  return stack.trim().split("\n").map((line) => line.trim()).filter((line) => line.startsWith("at ")).map((line) => {
+    const match = line.match(/^at\s+(\S+)/);
+    return match ? match[1] : line.replace(/^at\s+/, "");
+  }).filter((name) => !isNoiseComponent(name));
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontSize: 10,
+        fontFamily: tokens.sans,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: "0.08em",
+        color: tokens.textTertiary,
+        marginBottom: 6
+      },
+      children
+    }
+  );
+}
+function CodeBlock({ children, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        background: tokens.codeBg,
+        border: `1px solid ${tokens.codeBorder}`,
+        borderRadius: 6,
+        padding: "10px 14px",
+        fontFamily: tokens.mono,
+        fontSize: 12,
+        lineHeight: 1.6,
+        color: tokens.textPrimary,
+        overflowX: "auto",
+        ...style
+      },
+      children
+    }
+  );
+}
+function StackFrameRow({ frame }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "baseline" }, children: [
+    frame.fn && /* @__PURE__ */ jsx("span", { style: { color: tokens.textPrimary, flexShrink: 0 }, children: frame.fn }),
+    /* @__PURE__ */ jsx("span", { style: { color: tokens.fileHighlight, opacity: 0.7, fontSize: 11 }, children: frame.file })
+  ] });
+}
+function Separator() {
+  return /* @__PURE__ */ jsx("div", { style: { height: 1, background: tokens.separator, margin: "4px 0" } });
+}
+function ErrorReportCard({
+  errorName,
+  errorMessage,
+  errorStack,
+  componentStack,
+  eventId,
+  url,
+  timestamp,
+  reportText,
+  appVersion
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const frames = errorStack ? parseStackFrames(errorStack) : [];
+  const components = componentStack ? parseComponentStack(componentStack) : [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: tokens.cardBg,
+        border: `1px solid ${tokens.cardBorder}`,
+        borderTop: `3px solid ${tokens.accentRed}`,
+        borderRadius: 10,
+        maxWidth: 720,
+        width: "100%",
+        fontFamily: tokens.sans,
+        backdropFilter: "blur(20px)",
+        boxShadow: "0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 85, 85, 0.05)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: "20px 24px 0" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }, children: [
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  background: tokens.accentRedDim,
+                  color: tokens.accentRed,
+                  fontSize: 12,
+                  fontWeight: 600,
+                  fontFamily: tokens.mono,
+                  padding: "3px 10px",
+                  borderRadius: 4,
+                  letterSpacing: "0.02em"
+                },
+                children: errorName
+              }
+            ) }),
+            /* @__PURE__ */ jsx(CopyButton, { value: reportText, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy error report", position: "left", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: copy,
+                style: {
+                  background: copied ? "rgba(45, 212, 191, 0.15)" : "rgba(255, 255, 255, 0.06)",
+                  border: `1px solid ${copied ? "rgba(45, 212, 191, 0.3)" : "rgba(255, 255, 255, 0.08)"}`,
+                  borderRadius: 6,
+                  padding: "5px 12px",
+                  color: copied ? "#2dd4bf" : tokens.textSecondary,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  fontSize: 12,
+                  fontFamily: tokens.sans,
+                  transition: "all 0.15s ease"
+                },
+                children: [
+                  copied ? /* @__PURE__ */ jsx(IconCheck, { size: 13 }) : /* @__PURE__ */ jsx(IconCopy, { size: 13 }),
+                  copied ? "Copied" : "Copy"
+                ]
+              }
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: 16,
+                fontWeight: 500,
+                color: tokens.textPrimary,
+                lineHeight: 1.5,
+                marginBottom: 16
+              },
+              children: errorMessage
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: tokens.codeBg,
+                border: `1px solid ${tokens.codeBorder}`,
+                borderRadius: 6,
+                padding: "8px 12px",
+                fontFamily: tokens.mono,
+                fontSize: 12,
+                color: tokens.fileHighlight,
+                marginBottom: 16,
+                display: "flex",
+                alignItems: "center",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.textTertiary, fontSize: 10, flexShrink: 0 }, children: "URL" }),
+                /* @__PURE__ */ jsx("span", { style: { opacity: 0.8 }, children: url })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { padding: "0 24px" }, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded((v) => !v),
+            style: {
+              background: "none",
+              border: "none",
+              color: tokens.textTertiary,
+              fontSize: 11,
+              fontFamily: tokens.sans,
+              cursor: "pointer",
+              padding: "4px 0",
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              fontWeight: 600
+            },
+            children: [
+              expanded ? "- Hide" : "+ Show",
+              " details"
+            ]
+          }
+        ) }),
+        expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 24px 20px" }, children: [
+          frames.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: "Stack Trace" }),
+            /* @__PURE__ */ jsx(CodeBlock, { style: { maxHeight: 220, overflowY: "auto" }, children: frames.map((frame, i) => /* @__PURE__ */ jsx(StackFrameRow, { frame }, i)) })
+          ] }),
+          components.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsx(SectionLabel, { children: "Component Tree" }),
+            /* @__PURE__ */ jsx(CodeBlock, { style: { maxHeight: 120, overflowY: "auto" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "2px 0", alignItems: "center" }, children: components.map((name, i) => /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    color: i === 0 ? tokens.accentRed : tokens.textPrimary,
+                    fontWeight: i === 0 ? 600 : 400
+                  },
+                  children: name
+                }
+              ),
+              i < components.length - 1 && /* @__PURE__ */ jsx("span", { style: { color: tokens.textTertiary, margin: "0 6px", fontSize: 10 }, children: "\u203A" })
+            ] }, i)) }) })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "auto 1fr",
+                gap: "4px 16px",
+                fontSize: 11,
+                fontFamily: tokens.mono,
+                paddingTop: 12
+              },
+              children: [
+                appVersion && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.textTertiary }, children: "version" }),
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.textSecondary }, children: appVersion })
+                ] }),
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.textTertiary }, children: "timestamp" }),
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.textSecondary }, children: timestamp }),
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.textTertiary }, children: "viewport" }),
+                /* @__PURE__ */ jsxs("span", { style: { color: tokens.textSecondary }, children: [
+                  window.innerWidth,
+                  "x",
+                  window.innerHeight
+                ] }),
+                eventId && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.textTertiary }, children: "sentry" }),
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.textSecondary }, children: eventId })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              borderTop: `1px solid ${tokens.separator}`,
+              padding: "12px 24px",
+              display: "flex",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => window.location.reload(),
+                style: {
+                  background: "none",
+                  border: "none",
+                  color: tokens.textTertiary,
+                  fontSize: 12,
+                  fontFamily: tokens.sans,
+                  cursor: "pointer",
+                  padding: "2px 8px",
+                  textDecoration: "underline",
+                  textUnderlineOffset: 3
+                },
+                children: "Reload page"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function getErrorName(error) {
+  if (error instanceof Error) {
+    return error.constructor.name === "Error" ? "Error" : error.constructor.name;
+  }
+  return "Error";
+}
+function buildErrorReport(opts) {
+  const { error, componentStack, eventId } = opts;
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  const errorStack = error instanceof Error ? error.stack : void 0;
+  const url = opts.url ?? window.location.href;
+  const sections = [
+    `## Error Report`,
+    `**Timestamp:** ${(/* @__PURE__ */ new Date()).toISOString()}`,
+    `**URL:** ${url}`,
+    opts.appVersion && `**App Version:** ${opts.appVersion}`,
+    eventId && `**Sentry Event ID:** ${eventId}`,
+    `**User Agent:** ${navigator.userAgent}`,
+    `**Viewport:** ${window.innerWidth}x${window.innerHeight}`,
+    "",
+    `### Error`,
+    "```",
+    `${getErrorName(error)}: ${errorMessage}`,
+    "```",
+    "",
+    errorStack && `### Stack Trace`,
+    errorStack && "```",
+    errorStack,
+    errorStack && "```",
+    errorStack && "",
+    componentStack && `### Component Stack`,
+    componentStack && "```",
+    componentStack?.trim(),
+    componentStack && "```"
+  ];
+  return sections.filter(Boolean).join("\n");
+}
+function CrashErrorFallback({ error, componentStack, eventId, appVersion }) {
+  const { background } = useAppearance();
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  const errorStack = error instanceof Error ? error.stack : void 0;
+  const errorName = getErrorName(error);
+  const reportText = buildErrorReport({ error, componentStack, eventId, appVersion });
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        overflow: "auto",
+        background: "var(--color-background)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24
+      },
+      children: [
+        background,
+        /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1, width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+          ErrorReportCard,
+          {
+            errorName,
+            errorMessage,
+            errorStack,
+            componentStack,
+            eventId,
+            url: window.location.href,
+            timestamp,
+            reportText,
+            appVersion
+          }
+        ) })
+      ]
+    }
+  );
+}
+var AppErrorBoundary = class extends Component {
+  state = { error: null, componentStack: "" };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ componentStack: errorInfo.componentStack ?? "" });
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    if (this.state.error !== null) {
+      const props = { error: this.state.error, componentStack: this.state.componentStack };
+      return this.props.fallback ? this.props.fallback(props) : /* @__PURE__ */ jsx(CrashErrorFallback, { ...props, appVersion: this.props.appVersion });
+    }
+    return this.props.children;
+  }
+};
+
+export { AppErrorBoundary, CrashErrorFallback, ErrorReportCard, buildErrorReport };

package/dist/chunk-IT7GTJCB.js

@@ -0,0 +1,10 @@
+import { useAppearance } from './chunk-WXHAHKKI.js';
+import { Center } from '@mantine/core';
+import { jsx } from 'react/jsx-runtime';
+
+function SubshellLoader() {
+  const { loader } = useAppearance();
+  return /* @__PURE__ */ jsx(Center, { mih: "calc(100vh - 70px)", children: loader });
+}
+
+export { SubshellLoader };

package/dist/chunk-LGKLC5MG.js

@@ -0,0 +1,44 @@
+import { Box, Text } from '@mantine/core';
+import { AreaChart } from '@mantine/charts';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/monitoring/ResourceHealthChart.tsx
+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 { ResourceHealthChart, getHealthColor };

package/dist/chunk-MFLM7BVC.js

@@ -0,0 +1,85 @@
+import { useOptionalElevasisSystems } from './chunk-WXHAHKKI.js';
+import { useRouterContext } from './chunk-Q7DJKLEN.js';
+import { useMemo } from 'react';
+
+var useBreadcrumbs = (options = {}) => {
+  const { currentPath } = useRouterContext();
+  const systemContext = useOptionalElevasisSystems();
+  const { labelsByPath = {} } = options;
+  return useMemo(() => {
+    const shellModel = systemContext?.shellModel;
+    const overriddenLabel = labelsByPath[currentPath];
+    if (overriddenLabel) {
+      return [{ label: overriddenLabel, isActive: true }];
+    }
+    if (shellModel) {
+      const matchedNode = shellModel.findByPath(currentPath);
+      if (matchedNode) {
+        return shellModel.ancestorsOf(matchedNode.id).map((node, index, items) => ({
+          label: labelsByPath[node.path ?? ""] ?? node.label,
+          path: index === items.length - 1 ? void 0 : node.path,
+          isActive: index === items.length - 1
+        }));
+      }
+    }
+    const segments = currentPath.split("/").filter(Boolean);
+    if (segments.length === 0) {
+      return [{ label: "Dashboard", isActive: true }];
+    }
+    const breadcrumbs = [{ label: "Dashboard", path: "/" }];
+    let currentSegmentPath = "";
+    for (let i = 0; i < segments.length; i++) {
+      currentSegmentPath += `/${segments[i]}`;
+      const isLast = i === segments.length - 1;
+      const label = labelsByPath[currentSegmentPath] ?? formatSegmentLabel(segments[i]);
+      breadcrumbs.push({
+        label,
+        path: isLast ? void 0 : currentSegmentPath,
+        isActive: isLast
+      });
+    }
+    return breadcrumbs;
+  }, [currentPath, systemContext, labelsByPath]);
+};
+function formatSegmentLabel(segment) {
+  const decodedSegment = safeDecodeURIComponent(segment);
+  const routeLabel = formatRouteIdLabel(decodedSegment);
+  if (routeLabel) return routeLabel;
+  return titleCaseSegment(decodedSegment);
+}
+function safeDecodeURIComponent(value) {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+}
+function formatRouteIdLabel(segment) {
+  if (segment.startsWith("group:")) {
+    const groupKey = segment.slice("group:".length);
+    return groupKey === "graph" ? "Ontology" : titleCaseSegment(groupKey);
+  }
+  if (segment.startsWith("domain:")) {
+    return titleCaseSegment(segment.slice("domain:".length));
+  }
+  if (segment.startsWith("item:")) {
+    const rest = segment.slice("item:".length);
+    const separatorIndex = rest.indexOf(":");
+    const itemId = separatorIndex === -1 ? rest : rest.slice(separatorIndex + 1);
+    return formatOntologyOrIdLabel(itemId);
+  }
+  if (segment.startsWith("ontology:")) {
+    return formatOntologyOrIdLabel(segment);
+  }
+  return void 0;
+}
+function formatOntologyOrIdLabel(value) {
+  const localId = value.includes("/") ? value.slice(value.lastIndexOf("/") + 1) : value;
+  const suffix = localId.includes(":") ? localId.slice(localId.lastIndexOf(":") + 1) : localId;
+  return titleCaseSegment(suffix);
+}
+function titleCaseSegment(segment) {
+  return segment.split("-").flatMap((part) => part.split("_")).flatMap((part) => part.split(".")).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+
+export { useBreadcrumbs };