@elevasis/ui 2.66.0 → 2.68.0

package/dist/chunk-2MTP3H3A.js

@@ -0,0 +1,425 @@
+import { useAppearance } from './chunk-ZGCWTWBD.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-3KMDHCAR.js

@@ -0,0 +1,52 @@
+import { Text, Box, Code, Title } from '@mantine/core';
+import Markdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/display/StyledMarkdown.tsx
+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 }) });
+}
+
+export { StyledMarkdown };