@msqd/lydia 0.0.0-stage → 0.6.0

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

@@ -0,0 +1,115 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { DocumentIcon as x, PhotoIcon as h } from "@heroicons/react/24/outline";
+import { FORMAT_CAP as N } from "../../../../Components/Formatter/bodyLimits.js";
+import { stringifyBody as v } from "../../../../Models/Http/body.js";
+import { contentDispositionFilename as b } from "../../../../Models/Http/contentDisposition.js";
+import { findHeader as l } from "../../../../Models/Http/headers.js";
+import { useMemo as y } from "react";
+import { DownloadButton as c } from "../Components/DownloadButton.js";
+import { BodyPreview as w } from "./BodyPreview.js";
+import { CodeFormatter as P } from "../../../../Components/Formatter/CodeFormatter.js";
+const D = /^data:application\/pdf(;[^,]*)?,/i, j = (e) => e?.split(";")[0]?.trim().toLowerCase() === "application/pdf";
+function C(e, i) {
+  return typeof e == "string" && i !== "image" && i !== "binary" && e.length > N;
+}
+function F(e, i) {
+  switch (e) {
+    case "json":
+      return "json";
+    case "xml":
+    case "html":
+      return "html";
+    // HTML is the closest to XML
+    case "text":
+      return "text";
+    default:
+      return typeof i == "string" ? "text" : "json";
+  }
+}
+function S({ content: e, contentType: i, headers: m, maxHeight: p = 384 }) {
+  const d = l(m, "Content-Disposition"), f = y(
+    () => d === void 0 ? void 0 : b(d),
+    [d]
+  ), o = f ?? "file.bin", a = y(() => {
+    if (e === void 0) return "";
+    try {
+      return v(e);
+    } catch {
+      return;
+    }
+  }, [e]);
+  if (e === void 0 || e === "")
+    return /* @__PURE__ */ t("p", { className: "text-sm text-gray-500", children: "Empty body" });
+  if (a === void 0)
+    return /* @__PURE__ */ t("p", { role: "alert", className: "text-sm text-red-600", children: "This body cannot be displayed: it is nested too deeply." });
+  const s = l(m, "Content-Type"), n = l(m, "Content-Length");
+  switch (i) {
+    case "image": {
+      const g = typeof e == "string" && e.startsWith("data:image"), u = typeof e == "string" && e.includes("[Binary");
+      return g ? /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ t("div", { className: "bg-gray-50 rounded-md p-4", children: /* @__PURE__ */ t(
+          "img",
+          {
+            src: e,
+            alt: "Response image",
+            className: "max-w-full h-auto mx-auto",
+            style: { maxHeight: "400px" }
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "flex justify-center", children: /* @__PURE__ */ t(c, { data: e, filename: "image.png", mimeType: s || "image/png" }) })
+      ] }) : u ? /* @__PURE__ */ r("div", { className: "text-center p-8 bg-gray-50 rounded-md space-y-4", children: [
+        /* @__PURE__ */ t(h, { className: "h-12 w-12 text-gray-400 mx-auto" }),
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ t("p", { className: "text-sm text-gray-900 font-medium", children: a }),
+          n && /* @__PURE__ */ r("p", { className: "text-xs text-gray-500 mt-1", children: [
+            "Size: ",
+            n,
+            " bytes"
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ t("div", { className: "text-center p-4 bg-gray-50 rounded-md", children: /* @__PURE__ */ t("span", { className: "text-sm text-gray-500", children: "Image content" }) });
+    }
+    case "binary":
+      return j(s) && typeof e == "string" && D.test(e) ? /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ t("div", { className: "bg-gray-50 rounded-md p-4", children: /* @__PURE__ */ t(
+          "iframe",
+          {
+            src: e,
+            title: "PDF Preview",
+            referrerPolicy: "no-referrer",
+            className: "w-full h-96 border border-gray-300 rounded"
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "flex justify-center", children: /* @__PURE__ */ t(c, { data: e, filename: o, mimeType: "application/pdf" }) })
+      ] }) : /* @__PURE__ */ r("div", { className: "text-center p-8 bg-gray-50 rounded-md space-y-4", children: [
+        /* @__PURE__ */ t(x, { className: "h-12 w-12 text-gray-400 mx-auto" }),
+        /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ t("p", { className: "text-sm text-gray-900 font-medium", children: a }),
+          n && /* @__PURE__ */ r("p", { className: "text-xs text-gray-500 mt-1", children: [
+            "Size: ",
+            n,
+            " bytes"
+          ] }),
+          /* @__PURE__ */ r("p", { className: "text-xs text-gray-500", children: [
+            "Filename: ",
+            o
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex justify-center", children: /* @__PURE__ */ t(c, { data: e, filename: o, mimeType: s }) })
+      ] });
+    default:
+      return C(a, i) ? /* @__PURE__ */ t(
+        w,
+        {
+          body: a,
+          filename: f ?? "body.txt",
+          mimeType: s,
+          maxHeight: p
+        }
+      ) : /* @__PURE__ */ t(P, { language: F(i, e), code: a, maxHeight: p });
+  }
+}
+export {
+  S as ContentRenderer,
+  C as isPreviewedBody
+};

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

@@ -0,0 +1,4 @@
+export { ContentRenderer } from "./ContentRenderer.js";
+export { calculateTpdexScore, getTpdexRating, calculateAggregateTpdexScore, tpdexScale, } from "../../../../Models/Tpdex.js";
+export type { ContentRendererProps } from "./ContentRenderer.js";
+export type { TpdexRating } from "../../../../Models/Tpdex.js";

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

@@ -0,0 +1,9 @@
+import { ContentRenderer as r } from "./ContentRenderer.js";
+import { calculateAggregateTpdexScore as c, calculateTpdexScore as o, getTpdexRating as p, tpdexScale as x } from "../../../../Models/Tpdex.js";
+export {
+  r as ContentRenderer,
+  c as calculateAggregateTpdexScore,
+  o as calculateTpdexScore,
+  p as getTpdexRating,
+  x as tpdexScale
+};

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

@@ -0,0 +1,4 @@
+export { TransactionsDetailPage } from "./TransactionsDetailPage.js";
+export type { TransactionsDetailPageProps } from "./TransactionsDetailPage.js";
+export { ContentRenderer, type ContentRendererProps } from "./Utils/ContentRenderer.js";
+export { BodyPreview, type BodyPreviewProps } from "./Utils/BodyPreview.js";

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

@@ -0,0 +1,8 @@
+import { TransactionsDetailPage as o } from "./TransactionsDetailPage.js";
+import { ContentRenderer as n } from "./Utils/ContentRenderer.js";
+import { BodyPreview as f } from "./Utils/BodyPreview.js";
+export {
+  f as BodyPreview,
+  n as ContentRenderer,
+  o as TransactionsDetailPage
+};

package/dist/Pages/Transactions/List/TransactionsListPage.d.ts

@@ -0,0 +1,80 @@
+import { type ComponentProps } from "react";
+import { type FilterChangeHandler, type Filters } from "../../../Models/Filters/index.js";
+import type { TransactionFacets } from "../../../Models/Transactions/facets.js";
+import type { Transaction } from "../../../Models/Transactions/types.js";
+interface TransactionsListPageBaseProps extends ComponentProps<"div"> {
+    className?: string;
+    onRowClick?: (id: string) => void;
+    /** Called when the user chooses a row. */
+    onTransactionSelect?: (transaction: Transaction) => void;
+    /**
+     * Id of the highlighted row, `null` for none. The page then holds no selection of its own and
+     * never clears one: whoever shows the selected transaction (a drawer, say) clears it when it
+     * closes. Leave it out and the page keeps its own, which nothing but another row click changes.
+     */
+    selectedId?: string | null;
+    isDrawerOpen?: boolean;
+    /**
+     * The transactions to render, exactly as given. This page does not filter, search or paginate
+     * them: the consumer does, wherever the whole dataset lives.
+     */
+    transactions: Transaction[];
+    /**
+     * Layout variant. "embedded" hides the title, the search and the filters (for use inside
+     * another component).
+     */
+    variant?: "page" | "embedded";
+    /** Current facet selections. Displayed and reported, never applied here. */
+    filters?: Filters;
+    /** Called when a facet changes. The filters sidebar renders only when this is provided. */
+    onFiltersChange?: FilterChangeHandler;
+    /**
+     * Values each facet can offer, with their counts. Only the consumer knows what exists in the
+     * whole result set, so a facet with no entry offers nothing rather than something invented.
+     */
+    facets?: TransactionFacets;
+    /**
+     * Called when the user asks to start over. Expected to clear the facets **and** the search
+     * term, since the control that triggers it is labelled as resetting everything.
+     */
+    onResetFilters?: () => void;
+    /** Current search term. */
+    search?: string;
+    /** Called when the search term changes. The search field renders only when this is provided. */
+    onSearchChange?: (search: string) => void;
+    /** Current page, 1-based. */
+    page?: number;
+    /** Total matching transactions. Only the consumer knows this; a page of results cannot infer it. */
+    total?: number;
+    /** Number of pages. Derived from `total` and `itemsPerPage` when omitted. */
+    pageCount?: number;
+    /** Page size, used for the pagination summary. This page never slices the list itself. */
+    itemsPerPage?: number;
+    /** Called when the user asks for another page. */
+    onPageChange?: (page: number) => void;
+    /**
+     * Ids of the favourite transactions. Favourites are per-user state only the consumer holds; the
+     * page shows them and never keeps any.
+     */
+    favorites?: ReadonlySet<string>;
+    /** Called when the user toggles a star. The star column renders only when this is provided. */
+    onFavoriteChange?: (id: string, favorite: boolean) => void;
+    /** True while the consumer is fetching, so an empty list reads as "not yet" rather than "none". */
+    isLoading?: boolean;
+}
+/**
+ * Sidebar state. `filtersOpen` and `onFiltersOpenChange` go together to control the sidebar, and
+ * you persist it yourself if you want it remembered: `filtersOpen` alone would leave the toggle
+ * dead, so it does not compile. Leave `filtersOpen` out and the page keeps its own state, closed at
+ * first, forgotten on unmount; `onFiltersOpenChange` alone then just reports the changes.
+ */
+type FiltersOpenProps = {
+    filtersOpen: boolean;
+    onFiltersOpenChange: (open: boolean) => void;
+} | {
+    filtersOpen?: undefined;
+    onFiltersOpenChange?: (open: boolean) => void;
+};
+export type TransactionsListPageProps = TransactionsListPageBaseProps & FiltersOpenProps;
+export declare function TransactionsListPage({ className, onRowClick, onTransactionSelect, selectedId, isDrawerOpen, filtersOpen: filtersOpenProp, onFiltersOpenChange, itemsPerPage, transactions, variant, filters, onFiltersChange, onResetFilters, facets, search, onSearchChange, page, total, pageCount, onPageChange, isLoading, favorites, onFavoriteChange, ...props }: TransactionsListPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pages/Transactions/List/TransactionsListPage.js

@@ -0,0 +1,220 @@
+import { jsxs as s, jsx as t, Fragment as Y } from "react/jsx-runtime";
+import { ChevronDoubleLeftIcon as _, ChevronDoubleRightIcon as G } from "@heroicons/react/16/solid";
+import { StarIcon as J } from "@heroicons/react/24/outline";
+import { P as Q } from "../../../Components/Typography/Paragraphs.js";
+import { Section as W } from "../../../Components/Typography/Section.js";
+import { H2 as X } from "../../../Components/Typography/Titles.js";
+import { TpdexBadge as Z } from "../../../Elements/Tpdex/TpdexBadge.js";
+import { formatDistanceToNow as ee } from "date-fns";
+import { useState as w } from "react";
+import { twMerge as te } from "tailwind-merge";
+import { splitRequestTarget as re } from "../../../Models/Http/requestTarget.js";
+import { hasActiveFilters as ae } from "../../../Models/Filters/active.js";
+import { SearchInput as se } from "../../../Components/Inputs/SearchInput/SearchInput.js";
+import { TransactionsFiltersSidebar as oe } from "../../../Elements/Transactions/TransactionsFiltersSidebar.js";
+import { Paginator as ie } from "../../../Components/DataTable/Paginator.js";
+import { DataTable as le } from "../../../Components/DataTable/DataTable.js";
+import { ResponseStatusBadge as ne } from "../../../Elements/Http/ResponseStatusBadge.js";
+import { CacheIndicator as ce } from "../../../Elements/Http/CacheIndicator.js";
+import { RequestMethodBadge as me } from "../../../Elements/Http/RequestMethodBadge.js";
+const de = (e) => {
+  const r = new Date(e);
+  return Math.abs((/* @__PURE__ */ new Date()).getTime() - r.getTime()) / (1e3 * 60 * 60) < 1 ? ee(r, { addSuffix: !0 }) : r.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}, ue = (e) => e < 1e3 ? `${e}ms` : `${(e / 1e3).toFixed(1)}s`, fe = ({
+  transaction: e,
+  isFavorite: r,
+  onChange: a
+}) => /* @__PURE__ */ t(
+  "button",
+  {
+    type: "button",
+    "aria-pressed": r,
+    "aria-label": `Favourite ${e.method} ${e.url}`,
+    onClick: (i) => {
+      i.preventDefault(), i.stopPropagation(), a(e.id, !r);
+    },
+    onKeyDown: (i) => i.stopPropagation(),
+    className: "rounded cursor-pointer focus-visible:outline-2 focus-visible:outline-primary-600",
+    children: /* @__PURE__ */ t(
+      J,
+      {
+        className: r ? "h-5 w-5 fill-current text-yellow-500" : "h-5 w-5 text-gray-500 hover:text-yellow-500",
+        "aria-hidden": "true"
+      }
+    )
+  }
+), pe = ({ transaction: e }) => {
+  const { path: r, query: a } = re(e.url);
+  return /* @__PURE__ */ s("span", { className: "font-normal", children: [
+    /* @__PURE__ */ t(me, { method: e.method }),
+    e.apiName && /* @__PURE__ */ t("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: e.apiName }),
+    /* @__PURE__ */ t("span", { className: "text-gray-500 font-mono text-xs ml-1", title: e.url, children: r }),
+    a && /* @__PURE__ */ t("span", { className: "text-gray-500 font-mono text-xs", title: e.url, children: a })
+  ] });
+}, he = ({ transaction: e }) => /* @__PURE__ */ s("div", { className: "flex gap-x-1 items-center font-normal", children: [
+  /* @__PURE__ */ t(Z, { score: e.tpdex, responseTime: e.responseTime }),
+  /* @__PURE__ */ t("span", { className: "text-sm", children: ue(e.responseTime) }),
+  /* @__PURE__ */ t(ce, { cacheStatus: e.cacheStatus, cached: e.cached, size: "sm" })
+] }), v = ["request", "response", "duration", "date"], xe = (e, r) => ({
+  label: "Favourite",
+  labelHidden: !0,
+  get: (a) => a,
+  format: (a) => /* @__PURE__ */ t(fe, { transaction: a, isFavorite: e.has(a.id), onChange: r }),
+  headerClassName: "w-1",
+  className: "w-8"
+}), S = {
+  request: {
+    label: "Request",
+    get: (e) => e,
+    format: (e) => /* @__PURE__ */ t(pe, { transaction: e }),
+    className: "truncate max-w-0 w-full"
+  },
+  response: {
+    label: "Response",
+    get: (e) => e,
+    format: (e) => /* @__PURE__ */ t("span", { className: "font-normal", children: /* @__PURE__ */ t(ne, { statusCode: e.statusCode }) })
+  },
+  duration: {
+    label: "Duration",
+    get: (e) => e,
+    format: (e) => /* @__PURE__ */ t(he, { transaction: e })
+  },
+  date: {
+    label: "Date",
+    get: (e) => e,
+    format: (e) => /* @__PURE__ */ t("div", { title: new Date(e.timestamp).toLocaleString(), children: de(e.timestamp) })
+  }
+}, ge = (e, r, a) => r ? `${r}, pagination ${e} the list` : a ? `pagination ${e} the list` : `Pagination, ${e} the list`, be = /* @__PURE__ */ new Set();
+function Ae({
+  className: e,
+  onRowClick: r,
+  onTransactionSelect: a,
+  selectedId: i,
+  isDrawerOpen: D = !1,
+  filtersOpen: p,
+  onFiltersOpenChange: T,
+  itemsPerPage: h = 20,
+  transactions: n,
+  variant: I = "page",
+  filters: x,
+  onFiltersChange: c,
+  onResetFilters: m,
+  facets: R,
+  search: g = "",
+  onSearchChange: d,
+  page: k = 1,
+  total: q,
+  pageCount: $,
+  onPageChange: O,
+  isLoading: P = !1,
+  favorites: B = be,
+  onFavoriteChange: u,
+  ...l
+}) {
+  const f = I === "embedded", C = !f && !!d, F = !f && !D && !!c, [H, M] = w(null), A = i === void 0 ? H : i, L = n.find((o) => o.id === A), [j, E] = w(!1), K = p ?? j, b = (o) => {
+    p === void 0 && E(o), T?.(o);
+  }, y = q ?? n.length, V = $ ?? Math.max(1, Math.ceil(y / h)), z = ae(x, g), U = () => P ? /* @__PURE__ */ t("p", { className: "px-4 py-12 text-center text-sm text-gray-500", role: "status", children: "Loading transactions…" }) : n.length === 0 ? z ? /* @__PURE__ */ s("div", { className: "px-4 py-12 text-center", children: [
+    /* @__PURE__ */ t("p", { className: "text-sm text-gray-500", children: "No transactions match these filters." }),
+    m && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: m,
+        className: "mt-2 text-sm text-primary-600 hover:text-primary-500 cursor-pointer",
+        children: "Reset filters"
+      }
+    )
+  ] }) : /* @__PURE__ */ t("p", { className: "px-4 py-12 text-center text-sm text-gray-500", children: "No transactions yet." }) : /* @__PURE__ */ t(
+    le,
+    {
+      types: u ? { flags: xe(B, u), ...S } : S,
+      columns: u ? ["flags", ...v] : v,
+      rows: n,
+      onRowClick: (o) => {
+        M(o.id), a?.(o), r?.(o.id);
+      },
+      selected: L,
+      rowKey: "id"
+    }
+  ), N = (o) => /* @__PURE__ */ t(
+    ie,
+    {
+      current: k,
+      pages: V,
+      perPage: h,
+      total: y,
+      setPage: O,
+      label: ge(o, l["aria-label"], l["aria-labelledby"]),
+      labelledBy: l["aria-label"] ? void 0 : l["aria-labelledby"]
+    }
+  );
+  return /* @__PURE__ */ s("div", { className: te("space-y-6", e), ...l, children: [
+    !f && /* @__PURE__ */ t(W, { children: /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-6", children: [
+      /* @__PURE__ */ s("div", { className: "flex-1", children: [
+        /* @__PURE__ */ t(X, { children: "Transactions" }),
+        /* @__PURE__ */ t(Q, { className: "text-gray-500 mt-1", children: "View and manage transaction history across all API endpoints." })
+      ] }),
+      C && d && /* @__PURE__ */ t("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ t(
+        se,
+        {
+          label: "",
+          placeHolder: "Search by endpoint, method, status...",
+          setSearch: d,
+          search: g
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ s("div", { className: "flex gap-6", children: [
+      F && c && /* @__PURE__ */ t(Y, { children: K ? /* @__PURE__ */ s("div", { className: "w-64 flex-shrink-0", children: [
+        /* @__PURE__ */ t("div", { className: "text-right mb-4", children: /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: () => b(!1),
+            className: "text-gray-500 mx-1 font-normal text-xs hover:text-gray-600 transition-colors cursor-pointer",
+            "aria-label": "Hide filters sidebar",
+            type: "button",
+            children: [
+              /* @__PURE__ */ t(_, { className: "h-3 w-3 inline-block mr-1" }),
+              "hide"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          oe,
+          {
+            filters: x ?? {},
+            onFiltersChange: c,
+            onResetFilters: m ?? (() => {
+            }),
+            facets: R
+          }
+        )
+      ] }) : /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: /* @__PURE__ */ s(
+        "button",
+        {
+          onClick: () => b(!0),
+          className: "text-gray-500 mx-1 font-normal text-xs hover:text-gray-600 transition-colors flex flex-col items-center cursor-pointer",
+          "aria-label": "Show filters sidebar",
+          type: "button",
+          children: [
+            /* @__PURE__ */ t(G, { className: "h-3 w-3" }),
+            /* @__PURE__ */ t("div", { className: "w-4", children: /* @__PURE__ */ t("div", { className: "rotate-90 whitespace-nowrap", children: "filters" }) })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ s("div", { className: "rounded-none border-0 overflow-hidden bg-white", children: [
+        /* @__PURE__ */ t("div", { className: "border-b border-gray-200", children: N("above") }),
+        /* @__PURE__ */ t("div", { className: "overflow-x-auto", children: U() }),
+        /* @__PURE__ */ t("div", { className: "border-t border-gray-200", children: N("below") })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  Ae as TransactionsListPage
+};

package/dist/Pages/Transactions/List/index.d.ts

@@ -0,0 +1,4 @@
+export { TransactionsListPage } from "./TransactionsListPage.js";
+export type { TransactionsListPageProps } from "./TransactionsListPage.js";
+export { useClientSideTransactions } from "./useClientSideTransactions.js";
+export type { ClientSideTransactions, ClientSideTransactionsOptions } from "./useClientSideTransactions.js";

package/dist/Pages/Transactions/List/index.js

@@ -0,0 +1,6 @@
+import { TransactionsListPage as r } from "./TransactionsListPage.js";
+import { useClientSideTransactions as t } from "./useClientSideTransactions.js";
+export {
+  r as TransactionsListPage,
+  t as useClientSideTransactions
+};

package/dist/Pages/Transactions/List/useClientSideTransactions.d.ts

@@ -0,0 +1,38 @@
+import type { FilterChangeHandler, Filters } from "../../../Models/Filters/index.js";
+import { type TransactionFacets } from "../../../Models/Transactions/facets.js";
+import type { Transaction } from "../../../Models/Transactions/types.js";
+export interface ClientSideTransactionsOptions {
+    itemsPerPage?: number;
+    initialFilters?: Filters;
+    initialSearch?: string;
+}
+export interface ClientSideTransactions {
+    transactions: Transaction[];
+    facets: TransactionFacets;
+    filters: Filters;
+    onFiltersChange: FilterChangeHandler;
+    onResetFilters: () => void;
+    search: string;
+    onSearchChange: (search: string) => void;
+    page: number;
+    pageCount: number;
+    total: number;
+    itemsPerPage: number;
+    onPageChange: (page: number) => void;
+}
+/**
+ * Filters, searches and paginates a list of transactions in memory, and returns the whole prop
+ * bundle `TransactionsListPage` expects.
+ *
+ * **This is the fallback, not the recommended path.** A consumer that fetches transactions from a
+ * server filters, searches and paginates there, where the whole dataset is; doing it here narrows
+ * only the page already fetched, and the totals are the totals of that page. Reach for this when
+ * the whole list is already in memory and small: stories, demos, a fixed list in a drawer.
+ *
+ * Pass a stable `transactions` array. A fresh literal on every render defeats the memo and costs a
+ * full filter pass each time; hoist an empty default to a module-level constant.
+ *
+ * The requested page is clamped for display but remembered, so a list whose data shrinks and grows
+ * back underneath returns the reader to where they were.
+ */
+export declare function useClientSideTransactions(transactions: Transaction[], { itemsPerPage, initialFilters, initialSearch }?: ClientSideTransactionsOptions): ClientSideTransactions;

package/dist/Pages/Transactions/List/useClientSideTransactions.js

@@ -0,0 +1,32 @@
+import { deriveTransactionFacets as k } from "../../../Models/Transactions/facets.js";
+import { filterTransactions as q } from "../../../Models/Transactions/filtering.js";
+import { useState as i, useMemo as f, useCallback as h } from "react";
+function j(t, { itemsPerPage: e = 20, initialFilters: p = {}, initialSearch: C = "" } = {}) {
+  const [o, l] = i(p), [s, g] = i(C), [u, n] = i(1), a = f(
+    () => q(t, { filters: o, search: s }),
+    [t, o, s]
+  ), F = f(() => k(t), [t]), m = Math.max(1, Math.ceil(a.length / e)), M = Number.isFinite(u) ? u : 1, c = Math.max(1, Math.min(M, m)), S = h((r, T) => {
+    l((b) => ({ ...b, [r]: T })), n(1);
+  }, []), d = h(() => {
+    l({}), g(""), n(1);
+  }, []), x = h((r) => {
+    g(r), n(1);
+  }, []);
+  return {
+    transactions: a.slice((c - 1) * e, c * e),
+    facets: F,
+    filters: o,
+    onFiltersChange: S,
+    onResetFilters: d,
+    search: s,
+    onSearchChange: x,
+    page: c,
+    pageCount: m,
+    total: a.length,
+    itemsPerPage: e,
+    onPageChange: n
+  };
+}
+export {
+  j as useClientSideTransactions
+};

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

@@ -0,0 +1,4 @@
+export { TransactionsListPage } from "./List/index.js";
+export type { TransactionsListPageProps } from "./List/index.js";
+export { TransactionsDetailPage } from "./Detail/index.js";
+export type { TransactionsDetailPageProps } from "./Detail/index.js";

package/dist/Pages/Transactions/index.js

@@ -0,0 +1,6 @@
+import { TransactionsDetailPage as r } from "./Detail/TransactionsDetailPage.js";
+import { TransactionsListPage as e } from "./List/TransactionsListPage.js";
+export {
+  r as TransactionsDetailPage,
+  e as TransactionsListPage
+};

package/dist/Pages/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Overview/index.js";
+export * from "./Transactions/index.js";
+export * from "./Explorer/index.js";
+export * from "./Alerts/index.js";
+export * from "./SystemPage/index.js";

package/dist/Pages/index.js

@@ -0,0 +1,18 @@
+import { AlertsPage as o } from "./Alerts/AlertsPage.js";
+import { ExplorerPage as a } from "./Explorer/ExplorerPage.js";
+import { HistorySection as p } from "./Overview/Sections/HistorySection.js";
+import { OverviewPage as f } from "./Overview/OverviewPage.js";
+import { SummarySection as s } from "./Overview/Sections/SummarySection.js";
+import { SystemPage as n } from "./SystemPage/SystemPage.js";
+import { TransactionsDetailPage as c } from "./Transactions/Detail/TransactionsDetailPage.js";
+import { TransactionsListPage as l } from "./Transactions/List/TransactionsListPage.js";
+export {
+  o as AlertsPage,
+  a as ExplorerPage,
+  p as HistorySection,
+  f as OverviewPage,
+  s as SummarySection,
+  n as SystemPage,
+  c as TransactionsDetailPage,
+  l as TransactionsListPage
+};

package/dist/Settings.d.ts

@@ -0,0 +1,13 @@
+export declare const defaultEchartOptions: {
+    renderer: string;
+    tooltip: {
+        trigger: string;
+    };
+    animation: boolean;
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+};

package/dist/Settings.js

@@ -0,0 +1,16 @@
+const t = {
+  renderer: "svg",
+  tooltip: {
+    trigger: "axis"
+  },
+  animation: !1,
+  grid: {
+    left: 80,
+    right: 0,
+    top: 10,
+    bottom: 20
+  }
+};
+export {
+  t as defaultEchartOptions
+};