@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Pages/Overview/Sections/SummarySection.js

@@ -0,0 +1,127 @@
+import { jsx as r, jsxs as l, Fragment as g } from "react/jsx-runtime";
+import { ArrowTopRightOnSquareIcon as p } from "@heroicons/react/24/outline";
+import { H2 as x, H3 as o } from "../../../Components/Typography/Titles.js";
+import { TpdexBadge as N } from "../../../Elements/Tpdex/TpdexBadge.js";
+import { twMerge as d } from "tailwind-merge";
+import { Card as v } from "../../../Components/Cards/Card.js";
+import { SummaryPerformancesChart as y } from "../../../Components/Charts/SummaryPerformancesChart.js";
+import { SummaryRateChart as h } from "../../../Components/Charts/SummaryRateChart.js";
+const S = (e) => /* @__PURE__ */ r("a", { ...e }), m = (e, a) => a ? `${e} (${a})` : e;
+function f({ windowLabel: e, className: a }) {
+  return e ? /* @__PURE__ */ l("div", { className: a, children: [
+    e,
+    " average"
+  ] }) : null;
+}
+const n = Object.assign(
+  ({ className: e, children: a, ...i }) => /* @__PURE__ */ r(v, { className: d("overflow-hidden relative h-60", e), ...i, children: a }),
+  {
+    Title: ({ children: e }) => /* @__PURE__ */ r("div", { className: "flex items-start relative z-10", children: e }),
+    Link: ({ to: e, linkComponent: a, children: i }) => e === void 0 ? null : /* @__PURE__ */ l(
+      a,
+      {
+        href: e,
+        className: "leading-7 text-gray-400 mx-1 font-medium text-xs px-2 whitespace-nowrap z-10 flex items-center gap-1",
+        children: [
+          /* @__PURE__ */ r(p, { className: "h-3 w-3" }),
+          i
+        ]
+      }
+    ),
+    Badge: ({ children: e }) => /* @__PURE__ */ r("div", { className: "inline-flex flex-col self-center relative z-10 items-start", children: e }),
+    AbsoluteChart: ({ children: e }) => /* @__PURE__ */ r("div", { className: "absolute w-full h-full left-0 top-0", children: e })
+  }
+);
+function u({
+  rate: e,
+  period: a,
+  windowLabel: i,
+  className: t
+}) {
+  return /* @__PURE__ */ r(n.Badge, { children: /* @__PURE__ */ l("div", { className: d("bg-white ring-1 text-lg px-4 py-2 rounded", t), children: [
+    e,
+    " ",
+    /* @__PURE__ */ l("span", { className: "font-light", children: [
+      "/",
+      a
+    ] }),
+    /* @__PURE__ */ r(f, { windowLabel: i, className: "text-xs font-normal text-gray-500 text-right" })
+  ] }) });
+}
+function T({
+  data: e,
+  to: a,
+  linkComponent: i,
+  windowLabel: t
+}) {
+  return /* @__PURE__ */ l(n, { children: [
+    /* @__PURE__ */ l(n.Title, { children: [
+      /* @__PURE__ */ r(o, { children: m("Performances", t) }),
+      /* @__PURE__ */ r(n.Link, { to: a, linkComponent: i, children: "details" })
+    ] }),
+    /* @__PURE__ */ r(n.Badge, { children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ r(N, { score: e.mean, className: "ring-1 ring-white" }),
+      /* @__PURE__ */ r(f, { windowLabel: t, className: "text-xs font-normal text-right" })
+    ] }) }),
+    /* @__PURE__ */ r(n.AbsoluteChart, { children: /* @__PURE__ */ r(y, { data: e.data }) })
+  ] });
+}
+function P({
+  data: e,
+  to: a,
+  linkComponent: i,
+  windowLabel: t
+}) {
+  return /* @__PURE__ */ l(n, { children: [
+    /* @__PURE__ */ l(n.Title, { children: [
+      /* @__PURE__ */ r(o, { children: m("Transactions", t) }),
+      /* @__PURE__ */ r(n.Link, { to: a, linkComponent: i, children: "details" })
+    ] }),
+    /* @__PURE__ */ r(u, { className: "ring-blue-200", rate: e.rate, period: e.period, windowLabel: t }),
+    /* @__PURE__ */ r(n.AbsoluteChart, { children: /* @__PURE__ */ r(h, { data: e.data, color: "--color-chart-transactions" }) })
+  ] });
+}
+function A({ data: e, to: a, linkComponent: i, windowLabel: t }) {
+  return /* @__PURE__ */ l(n, { children: [
+    /* @__PURE__ */ l(n.Title, { children: [
+      /* @__PURE__ */ r(o, { children: m("Errors", t) }),
+      /* @__PURE__ */ r(n.Link, { to: a, linkComponent: i, children: "details" })
+    ] }),
+    /* @__PURE__ */ r(u, { className: "ring-danger-200", rate: e.rate, period: e.period, windowLabel: t }),
+    /* @__PURE__ */ r(n.AbsoluteChart, { children: /* @__PURE__ */ r(h, { data: e.data, color: "--color-danger-200" }) })
+  ] });
+}
+const H = ({
+  performance: e,
+  transactions: a,
+  errors: i,
+  links: t = {},
+  linkComponent: s = S,
+  windowLabel: c
+}) => /* @__PURE__ */ l(g, { children: [
+  /* @__PURE__ */ r("div", { className: "flex justify-end my-2", children: /* @__PURE__ */ r(x, { className: "grow", children: "Summary" }) }),
+  /* @__PURE__ */ l("div", { className: "grid grid-cols-3 gap-4 mb-8", children: [
+    /* @__PURE__ */ r(
+      T,
+      {
+        data: e,
+        to: t.performance,
+        linkComponent: s,
+        windowLabel: c
+      }
+    ),
+    /* @__PURE__ */ r(
+      P,
+      {
+        data: a,
+        to: t.transactions,
+        linkComponent: s,
+        windowLabel: c
+      }
+    ),
+    /* @__PURE__ */ r(A, { data: i, to: t.errors, linkComponent: s, windowLabel: c })
+  ] })
+] });
+export {
+  H as SummarySection
+};

package/dist/Pages/Overview/index.d.ts

@@ -0,0 +1,4 @@
+export { OverviewPage } from "./OverviewPage.js";
+export type { OverviewPageProps, SummarySectionProps, ChartDataPoint, PerformanceData, RateData, } from "./OverviewPage.js";
+export { SummarySection } from "./Sections/SummarySection.js";
+export { HistorySection, type HistorySectionProps } from "./Sections/HistorySection.js";

package/dist/Pages/Overview/index.js

@@ -0,0 +1,8 @@
+import { OverviewPage as e } from "./OverviewPage.js";
+import { SummarySection as m } from "./Sections/SummarySection.js";
+import { HistorySection as f } from "./Sections/HistorySection.js";
+export {
+  f as HistorySection,
+  e as OverviewPage,
+  m as SummarySection
+};

package/dist/Pages/SystemPage/SystemPage.d.ts

@@ -0,0 +1,8 @@
+import { type NetworkTopology } from "../../Elements/System/index.js";
+import type { ComponentProps } from "react";
+export interface SystemPageProps extends ComponentProps<"div"> {
+    /** Network topology to render in the architecture map. */
+    topology: NetworkTopology;
+    className?: string;
+}
+export declare function SystemPage({ topology, className, ...props }: SystemPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/SystemPage/SystemPage.js

@@ -0,0 +1,16 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Section as m } from "../../Components/Typography/Section.js";
+import { H2 as s } from "../../Components/Typography/Titles.js";
+import { P as n } from "../../Components/Typography/Paragraphs.js";
+import { HeadingLevel as c } from "../../Components/Typography/HeadingLevel.js";
+import { NetworkMap as l } from "../../Elements/System/NetworkMap.js";
+function x({ topology: e, className: o = "", ...t }) {
+  return /* @__PURE__ */ r("div", { className: `space-y-6 ${o}`, ...t, children: /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ r(s, { children: "System Architecture" }),
+    /* @__PURE__ */ r(n, { className: "text-gray-600 mb-6", children: "Network topology showing traffic flow from ingresses through proxies to endpoints." }),
+    /* @__PURE__ */ r(c, { level: 2, children: /* @__PURE__ */ r(l, { topology: e }) })
+  ] }) });
+}
+export {
+  x as SystemPage
+};

package/dist/Pages/SystemPage/index.d.ts

@@ -0,0 +1 @@
+export { SystemPage, type SystemPageProps } from "./SystemPage.js";

package/dist/Pages/SystemPage/index.js

@@ -0,0 +1,4 @@
+import { SystemPage as o } from "./SystemPage.js";
+export {
+  o as SystemPage
+};

package/dist/Pages/Transactions/Detail/Components/DownloadButton.d.ts

@@ -0,0 +1,33 @@
+import { Button } from "../../../../Components/Buttons/index.js";
+import { type HttpBody } from "../../../../Models/Http/body.js";
+import { type ComponentProps } from "react";
+export interface DownloadButtonProps extends Omit<ComponentProps<typeof Button>, "onClick"> {
+    /**
+     * Data to be downloaded. A `data:` URL is decoded to its bytes, any other string is saved as text and
+     * parsed documents as JSON.
+     */
+    data: HttpBody;
+    /**
+     * Filename for the download
+     */
+    filename: string;
+    /**
+     * MIME type for the download. Defaults to the data URL's own type, else `text/plain` for text and
+     * `application/json` for parsed documents.
+     */
+    mimeType?: string;
+    /**
+     * Whether to show the download icon
+     */
+    showIcon?: boolean;
+    /**
+     * Custom onClick handler (in addition to download)
+     */
+    onDownload?: () => void;
+}
+/**
+ * Button component that handles file downloads
+ * Supports text, parsed documents and `data:` URLs, base64 or percent-encoded.
+ * A failure is shown as text under the button.
+ */
+export declare function DownloadButton({ data, filename, mimeType, showIcon, onDownload, children, variant, size, className, ...props }: DownloadButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Transactions/Detail/Components/DownloadButton.js

@@ -0,0 +1,62 @@
+import { jsxs as d, jsx as m } from "react/jsx-runtime";
+import { ArrowDownTrayIcon as x } from "@heroicons/react/24/outline";
+import { stringifyBody as y } from "../../../../Models/Http/body.js";
+import { decodeDataUrl as B } from "../../../../Models/Http/dataUrl.js";
+import { useState as D } from "react";
+import { twMerge as g } from "tailwind-merge";
+import { Button as E } from "../../../../Components/Buttons/Button.js";
+const j = 1e3;
+function L(e, t) {
+  if (typeof e != "string")
+    return new Blob([y(e)], { type: t ?? "application/json" });
+  if (/^data:/i.test(e)) {
+    const r = B(e);
+    return new Blob([r.bytes], { type: t ?? r.mimeType ?? "text/plain" });
+  }
+  return new Blob([e], { type: t ?? "text/plain" });
+}
+function M({
+  data: e,
+  filename: t,
+  mimeType: r,
+  showIcon: n = !0,
+  onDownload: p,
+  children: f = "Download",
+  variant: u = "primary",
+  size: w = "sm",
+  className: b,
+  ...h
+}) {
+  const [l, i] = D();
+  return /* @__PURE__ */ d("div", { className: "inline-flex flex-col items-center gap-1", children: [
+    /* @__PURE__ */ d(
+      E,
+      {
+        variant: u,
+        size: w,
+        onClick: () => {
+          let c;
+          try {
+            c = L(e, r);
+          } catch (s) {
+            i(s instanceof Error ? s.message : "The download failed");
+            return;
+          }
+          i(void 0);
+          const a = URL.createObjectURL(c), o = document.createElement("a");
+          o.href = a, o.download = t, document.body.appendChild(o), o.click(), document.body.removeChild(o), setTimeout(() => URL.revokeObjectURL(a), j), p?.();
+        },
+        className: g(n && "flex items-center gap-2", b),
+        ...h,
+        children: [
+          n && /* @__PURE__ */ m(x, { className: "h-4 w-4", "aria-hidden": "true" }),
+          f
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ m("p", { role: "alert", className: "text-xs text-red-600", children: l })
+  ] });
+}
+export {
+  M as DownloadButton
+};

package/dist/Pages/Transactions/Detail/Components/TransactionMessage.d.ts

@@ -0,0 +1,16 @@
+import type { HttpMessage } from "../../../../Models/Transactions/types.js";
+import { type ComponentProps } from "react";
+export interface TransactionMessageProps extends ComponentProps<"div"> {
+    /** Section title, e.g. "Request" or "Response". */
+    title: string;
+    /** The HTTP message (headers + body) to display. */
+    message: HttpMessage;
+    /** Default open state for the foldable. */
+    defaultOpen?: boolean;
+    /** Maximum height for content display. */
+    maxContentHeight?: number;
+}
+/**
+ * Displays one HTTP message (request or response) — its headers and body — in a foldable section.
+ */
+export declare function TransactionMessage({ title, message, defaultOpen, maxContentHeight, className, ...props }: TransactionMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Transactions/Detail/Components/TransactionMessage.js

@@ -0,0 +1,44 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { Subheading as i } from "../../../../Components/Typography/HeadingLevel.js";
+import { Foldable as m } from "../../../../Components/Utilities/Foldable.js";
+import "react";
+import { twMerge as l } from "tailwind-merge";
+import { ContentRenderer as s, isPreviewedBody as h } from "../Utils/ContentRenderer.js";
+import { HeadersDisplay as p } from "../../../../Components/Formatter/HeadersDisplay.js";
+import { contentPaddingClassName as y } from "../../../../Components/Cards/Card.js";
+function j({
+  title: d,
+  message: e,
+  defaultOpen: n = !0,
+  maxContentHeight: o = 384,
+  className: a,
+  ...c
+}) {
+  return /* @__PURE__ */ t("div", { className: l(y, a), ...c, children: /* @__PURE__ */ t(m, { title: d, defaultOpen: n && !h(e.body, e.contentType), children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ t(i, { className: "text-sm font-medium text-gray-900 mb-2", children: "Headers" }),
+      /* @__PURE__ */ t("div", { className: "max-h-64 overflow-auto", children: /* @__PURE__ */ t(p, { headers: e.headers }) })
+    ] }),
+    e.body && /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ t(i, { className: "text-sm font-medium text-gray-900", children: "Body" }),
+        e.size && /* @__PURE__ */ r("span", { className: "text-xs text-gray-500", children: [
+          e.size,
+          " bytes"
+        ] })
+      ] }),
+      /* @__PURE__ */ t(
+        s,
+        {
+          content: e.body,
+          contentType: e.contentType,
+          headers: e.headers,
+          maxHeight: o
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  j as TransactionMessage
+};

package/dist/Pages/Transactions/Detail/Components/TransactionMetadata.d.ts

@@ -0,0 +1,21 @@
+import type { DetailedTransaction } from "../../../../Models/Transactions/types.js";
+import { type ComponentProps } from "react";
+export interface TransactionMetadataProps extends ComponentProps<"div"> {
+    /**
+     * Transaction data
+     */
+    transaction: DetailedTransaction;
+    /**
+     * Tags to display
+     */
+    tags?: Record<string, string>;
+    /**
+     * Default open state for the foldable
+     */
+    defaultOpen?: boolean;
+}
+/**
+ * Component that displays transaction metadata in a foldable section
+ * Includes URL, status, timing, client info, and tags
+ */
+export declare function TransactionMetadata({ transaction, tags, defaultOpen, className, ...props }: TransactionMetadataProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Transactions/Detail/Components/TransactionMetadata.js

@@ -0,0 +1,127 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { ClipboardDocumentIcon as N, ArrowRightIcon as v } from "@heroicons/react/24/outline";
+import { Foldable as y } from "../../../../Components/Utilities/Foldable.js";
+import { TpdexBadge as a } from "../../../../Elements/Tpdex/TpdexBadge.js";
+import { splitRequestTarget as C } from "../../../../Models/Http/requestTarget.js";
+import "react";
+import { twMerge as T } from "tailwind-merge";
+import { useSuccessToast as S } from "../../../../Components/Toast/ToastContext.js";
+import { RequestMethodBadge as l } from "../../../../Elements/Http/RequestMethodBadge.js";
+import { Button as b } from "../../../../Components/Buttons/Button.js";
+import { ResponseStatusBadge as c } from "../../../../Elements/Http/ResponseStatusBadge.js";
+import { CacheBadge as w } from "../../../../Elements/Http/CacheBadge.js";
+import { Badge as A } from "../../../../Components/Badges/Badge.js";
+import { contentPaddingClassName as R } from "../../../../Components/Cards/Card.js";
+import { CacheIndicator as D } from "../../../../Elements/Http/CacheIndicator.js";
+function H({
+  transaction: t,
+  tags: d = {},
+  defaultOpen: o = !1,
+  className: n,
+  ...h
+}) {
+  const i = S(), x = new Date(t.timestamp).toLocaleString(), p = async (r, m) => {
+    try {
+      await navigator.clipboard.writeText(r), i("Copied", `${m} copied to clipboard`);
+    } catch {
+      i("Copy", m);
+    }
+  }, g = () => {
+    const { path: r, query: m } = C(t.url);
+    return /* @__PURE__ */ s("span", { className: "font-normal", children: [
+      /* @__PURE__ */ e(l, { method: t.method }),
+      t.apiName && /* @__PURE__ */ e("span", { className: "inline-flex items-center bg-gray-50 px-1 ml-2 py-0.5 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-600/20", children: t.apiName }),
+      /* @__PURE__ */ e("span", { className: "text-gray-500 font-mono text-xs ml-1", title: t.url, children: r }),
+      m && /* @__PURE__ */ e("span", { className: "text-gray-500 font-mono text-xs", title: t.url, children: m })
+    ] });
+  }, u = () => /* @__PURE__ */ e("span", { className: "font-normal", children: /* @__PURE__ */ e(c, { statusCode: t.statusCode }) }), f = () => /* @__PURE__ */ s("div", { className: "flex gap-x-1 items-center font-normal", children: [
+    /* @__PURE__ */ e(a, { score: t.tpdex, responseTime: t.responseTime }),
+    /* @__PURE__ */ s("span", { className: "text-sm", children: [
+      t.responseTime,
+      "ms"
+    ] }),
+    /* @__PURE__ */ e(D, { cacheStatus: t.cacheStatus, cached: t.cached, size: "sm" })
+  ] });
+  return /* @__PURE__ */ e("div", { className: T(R, n), ...h, children: /* @__PURE__ */ e(
+    y,
+    {
+      title: /* @__PURE__ */ s("div", { className: "flex gap-x-1 items-center", children: [
+        /* @__PURE__ */ e(g, {}),
+        /* @__PURE__ */ e(v, { className: "h-4 w-4 text-gray-400 mx-1" }),
+        /* @__PURE__ */ e(u, {}),
+        /* @__PURE__ */ e("div", { className: "flex-1" }),
+        /* @__PURE__ */ e(f, {})
+      ] }),
+      defaultOpen: o,
+      children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center justify-between p-4 bg-gray-50 rounded-md", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ e(l, { method: t.method }),
+            /* @__PURE__ */ e("span", { className: "font-mono text-sm text-gray-900 break-all", children: t.url })
+          ] }),
+          /* @__PURE__ */ s(
+            b,
+            {
+              variant: "secondary",
+              size: "sm",
+              onClick: () => p(`${t.method} ${t.url}`, "Transaction URL"),
+              className: "flex items-center space-x-1 flex-shrink-0",
+              children: [
+                /* @__PURE__ */ e(N, { className: "h-4 w-4" }),
+                /* @__PURE__ */ e("span", { children: "Copy" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "Status" }),
+            /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(c, { statusCode: t.statusCode }) })
+          ] }),
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "Duration" }),
+            /* @__PURE__ */ s("div", { className: "mt-1 text-sm text-gray-900", children: [
+              t.responseTime,
+              "ms"
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "TPDEX" }),
+            /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(a, { score: t.tpdex, responseTime: t.responseTime, showScore: !0 }) })
+          ] }),
+          (t.cacheStatus || t.cached) && /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "Cache Status" }),
+            /* @__PURE__ */ e("div", { className: "mt-1", children: /* @__PURE__ */ e(w, { cacheStatus: t.cacheStatus, cached: t.cached }) })
+          ] }),
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "Client" }),
+            /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-gray-900", children: t.client })
+          ] }),
+          /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "Created" }),
+            /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-gray-900", children: x })
+          ] }),
+          t.userAgent && /* @__PURE__ */ s("div", { children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "User Agent" }),
+            /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-gray-900 font-mono truncate", title: t.userAgent, children: t.userAgent })
+          ] })
+        ] }),
+        t.remoteAddress && /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500", children: "Remote Address" }),
+          /* @__PURE__ */ e("div", { className: "mt-1 text-sm text-gray-900 font-mono", children: t.remoteAddress })
+        ] }),
+        Object.keys(d).length > 0 && /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-500 mb-2", children: "Tags" }),
+          /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: Object.entries(d).map(([r, m]) => /* @__PURE__ */ s(A, { color: "blue", children: [
+            r,
+            "=",
+            m
+          ] }, r)) })
+        ] })
+      ] })
+    }
+  ) });
+}
+export {
+  H as TransactionMetadata
+};

package/dist/Pages/Transactions/Detail/Components/index.d.ts

@@ -0,0 +1,6 @@
+export { DownloadButton } from "./DownloadButton.js";
+export { TransactionMetadata } from "./TransactionMetadata.js";
+export { TransactionMessage } from "./TransactionMessage.js";
+export type { DownloadButtonProps } from "./DownloadButton.js";
+export type { TransactionMetadataProps } from "./TransactionMetadata.js";
+export type { TransactionMessageProps } from "./TransactionMessage.js";

package/dist/Pages/Transactions/Detail/Components/index.js

@@ -0,0 +1,8 @@
+import { DownloadButton as t } from "./DownloadButton.js";
+import { TransactionMetadata as e } from "./TransactionMetadata.js";
+import { TransactionMessage as s } from "./TransactionMessage.js";
+export {
+  t as DownloadButton,
+  s as TransactionMessage,
+  e as TransactionMetadata
+};

package/dist/Pages/Transactions/Detail/TransactionsDetailPage.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import type { DetailedTransaction } from "../../../Models/Transactions/types.js";
+export interface TransactionsDetailPageProps extends ComponentProps<"div"> {
+    className?: string;
+    /** The detailed transaction to display. */
+    transaction: DetailedTransaction;
+}
+export declare function TransactionsDetailPage({ className, transaction, ...props }: TransactionsDetailPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Transactions/Detail/TransactionsDetailPage.js

@@ -0,0 +1,15 @@
+import { jsxs as l, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { twMerge as d } from "tailwind-merge";
+import { TransactionMetadata as n } from "./Components/TransactionMetadata.js";
+import { TransactionMessage as t } from "./Components/TransactionMessage.js";
+function g({ className: r, transaction: s, ...a }) {
+  const i = /* @__PURE__ */ l(o, { children: [
+    /* @__PURE__ */ e(n, { transaction: s, tags: s.tags, defaultOpen: !1 }),
+    /* @__PURE__ */ e(t, { title: "Request", message: s.request, defaultOpen: !0 }),
+    /* @__PURE__ */ e(t, { title: "Response", message: s.response, defaultOpen: !0 })
+  ] });
+  return /* @__PURE__ */ e("div", { className: d("h-full", r), ...a, children: /* @__PURE__ */ e("div", { className: "h-full divide-y divide-gray-100 overflow-hidden", children: i }) });
+}
+export {
+  g as TransactionsDetailPage
+};

package/dist/Pages/Transactions/Detail/Utils/BodyPreview.d.ts

@@ -0,0 +1,15 @@
+export interface BodyPreviewProps {
+    /** The whole body, too large to be formatted. */
+    body: string;
+    /** Name the whole body is saved under. */
+    filename: string;
+    /** MIME type the whole body is saved as. */
+    mimeType?: string;
+    /** Maximum height of the body in pixels. */
+    maxHeight?: number;
+}
+/**
+ * Shows the start of a body too large to format, with the choice of the whole body as plain text
+ * or as a download. Only the preview is drawn until the reader asks for more.
+ */
+export declare function BodyPreview({ body, filename, mimeType, maxHeight }: BodyPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Transactions/Detail/Utils/BodyPreview.js

@@ -0,0 +1,30 @@
+import { jsxs as a, jsx as o, Fragment as p } from "react/jsx-runtime";
+import { BodyNotice as f } from "../../../../Components/Formatter/BodyNotice.js";
+import { formatFileSize as i } from "../../../../Components/Formatter/PerformanceMetrics.js";
+import { PREVIEW_SIZE as d } from "../../../../Components/Formatter/bodyLimits.js";
+import { useState as h } from "react";
+import { DownloadButton as w } from "../Components/DownloadButton.js";
+import { CodeFormatter as x } from "../../../../Components/Formatter/CodeFormatter.js";
+import { Button as u } from "../../../../Components/Buttons/Button.js";
+function I({ body: e, filename: l, mimeType: s, maxHeight: t = 384 }) {
+  const [m, c] = h(), r = m === e, n = i(e.length);
+  return /* @__PURE__ */ a("div", { className: "overflow-hidden rounded-md border border-gray-200 bg-white", children: [
+    /* @__PURE__ */ o(f, { actions: /* @__PURE__ */ a(p, { children: [
+      /* @__PURE__ */ o(u, { variant: "secondary", size: "sm", onClick: () => c(r ? void 0 : e), children: r ? "Show preview only" : "Show all" }),
+      /* @__PURE__ */ o(w, { data: e, filename: l, mimeType: s, variant: "secondary" })
+    ] }), children: r ? `Showing all ${n} as plain text, not reformatted.` : `Showing the first ${i(d)} of ${n}.` }),
+    r ? /* @__PURE__ */ o(x, { language: "text", code: e, maxHeight: t, className: "rounded-none border-0" }) : /* @__PURE__ */ o(
+      "pre",
+      {
+        tabIndex: 0,
+        "aria-label": "Body preview",
+        className: "overflow-auto whitespace-pre-wrap break-all p-3 font-mono text-xs leading-5",
+        style: { maxHeight: t },
+        children: e.slice(0, d)
+      }
+    )
+  ] });
+}
+export {
+  I as BodyPreview
+};

package/dist/Pages/Transactions/Detail/Utils/ContentRenderer.d.ts

@@ -0,0 +1,28 @@
+import { type HttpBody } from "../../../../Models/Http/body.js";
+import { type HttpHeader } from "../../../../Models/Http/headers.js";
+import type { ContentType } from "../../../../Models/Transactions/types.js";
+export interface ContentRendererProps {
+    /**
+     * Content to render
+     */
+    content: HttpBody | undefined;
+    /**
+     * Content type
+     */
+    contentType?: ContentType;
+    /**
+     * Headers associated with the content, looked up by name rather than displayed.
+     */
+    headers?: HttpHeader[];
+    /**
+     * Maximum height for code formatter
+     */
+    maxHeight?: number;
+}
+/** Whether the body is code too large to format, which is shown as a preview. */
+export declare function isPreviewedBody(content: HttpBody | undefined, contentType: ContentType | undefined): boolean;
+/**
+ * Utility component that renders different content types appropriately
+ * Supports JSON, XML, HTML, text, images, and binary content
+ */
+export declare function ContentRenderer({ content, contentType, headers, maxHeight }: ContentRendererProps): import("react/jsx-runtime").JSX.Element;