@msqd/lydia 0.0.0-stage → 0.6.1

package/dist/Components/Facets/Variants/nestedValues.js

@@ -0,0 +1,87 @@
+const u = (e) => (e.under?.length ?? 0) > 0, o = { kind: "none" }, d = { kind: "whole" }, a = (e) => `-${e}`, i = (e) => e.under.map((c) => c.name), f = (e, c) => e.slice(c.length).replace(/\d/g, "0").replace(/[a-z]/gi, "a");
+function h(e, c) {
+  const t = c.filter(u).filter((s) => e.length > s.name.length && e.startsWith(s.name)).reduce(
+    (s, n) => s && s.name.length >= n.name.length ? s : n,
+    void 0
+  ), l = t && f(e, t.name);
+  return t && i(t).some((s) => f(s, t.name) === l) ? t : void 0;
+}
+function g(e, c, t) {
+  const l = i(c);
+  return e.filter((s) => s.startsWith("-")).map((s) => s.slice(1)).filter((s, n, r) => h(s, t) === c && !l.includes(s) && r.indexOf(s) === n);
+}
+function w(e, c, t) {
+  if (!u(c)) return e.includes(c.name) ? d : o;
+  const l = i(c);
+  if (e.includes(c.name)) {
+    const n = [
+      ...l.filter((r) => e.includes(a(r))),
+      ...g(e, c, t)
+    ];
+    return n.length > 0 ? { kind: "minus", excluded: n } : d;
+  }
+  const s = l.filter((n) => e.includes(n));
+  return s.length === l.length ? d : s.length > 0 ? { kind: "some", codes: s } : o;
+}
+function k(e, c) {
+  const t = (s) => u(c) ? i(c).filter((n) => s.includes(n)) : [], l = (s) => u(c) ? s.filter((n) => !i(c).includes(n)) : [];
+  switch (e.kind) {
+    case "none":
+      return [];
+    case "whole":
+      return [c.name];
+    case "some":
+      return t(e.codes);
+    case "minus":
+      return [c.name, ...[...t(e.excluded), ...l(e.excluded)].map(a)];
+  }
+}
+const O = (e, c) => c.map((t) => w(e, t, c));
+function C(e, c, t) {
+  const l = new Set(
+    c.flatMap((n) => [
+      n.name,
+      ...u(n) ? i(n).flatMap((r) => [r, a(r)]) : []
+    ])
+  ), s = (n) => l.has(n) || n.startsWith("-") && h(n.slice(1), c) !== void 0;
+  return [
+    ...c.flatMap((n, r) => k(e[r], n)),
+    ...t.filter((n) => !s(n))
+  ];
+}
+const N = (e) => e.kind === "whole" ? o : d;
+function W(e, c, t) {
+  const l = c.under.length, s = (n) => n.includes(t) ? n.filter((r) => r !== t) : [...n, t];
+  switch (e.kind) {
+    case "none":
+    case "some": {
+      const n = s(e.kind === "some" ? e.codes : []);
+      return n.length === l ? d : n.length > 0 ? { kind: "some", codes: n } : o;
+    }
+    case "whole":
+    case "minus": {
+      const n = e.kind === "minus" ? e.excluded : [], r = s(n);
+      return r.length > n.length && r.filter((m) => i(c).includes(m)).length === l ? o : r.length > 0 ? { kind: "minus", excluded: r } : d;
+    }
+  }
+}
+function E(e, c) {
+  switch (e.kind) {
+    case "none":
+      return !1;
+    case "whole":
+      return !0;
+    case "some":
+      return e.codes.includes(c);
+    case "minus":
+      return !e.excluded.includes(c);
+  }
+}
+export {
+  E as isCodeTicked,
+  u as isNested,
+  O as readSelection,
+  W as toggleCode,
+  N as toggleOption,
+  C as writeSelection
+};

package/dist/Components/Facets/index.d.ts

@@ -0,0 +1,15 @@
+export { FacetList, useFacetState } from "./FacetList.js";
+export { FacetListCard } from "./FacetListCard.js";
+export { FacetLabel } from "./FacetLabel.js";
+export { FacetInnerLightButton } from "./FacetInnerLightButton.js";
+export { FacetResetLink } from "./FacetResetLink.js";
+export { FacetCount } from "./FacetCount.js";
+export { DEFAULT_COUNTS_CAPTION, FacetCountsCaption, countsCaptionOf, type FacetCountsCaptionProps, } from "./FacetCountsCaption.js";
+export type { FacetListProps } from "./FacetList.js";
+export type { FacetListCardProps } from "./FacetListCard.js";
+export type { FacetLabelProps } from "./FacetLabel.js";
+export type { FacetInnerLightButtonProps } from "./FacetInnerLightButton.js";
+export type { FacetResetLinkProps } from "./FacetResetLink.js";
+export type { FacetCountProps } from "./FacetCount.js";
+export { DateRangeFacet, MultipleChoiceFacet, PerformanceFacet, SingleChoiceFacet, } from "./Variants/index.js";
+export type { DateRangeFacetProps, MultipleChoiceFacetProps, FacetOption, PerformanceFacetProps, SingleChoiceFacetProps, } from "./Variants/index.js";

package/dist/Components/Facets/index.js

@@ -0,0 +1,27 @@
+import { FacetList as o, useFacetState as r } from "./FacetList.js";
+import { FacetListCard as c } from "./FacetListCard.js";
+import { FacetLabel as f } from "./FacetLabel.js";
+import { FacetInnerLightButton as m } from "./FacetInnerLightButton.js";
+import { FacetResetLink as x } from "./FacetResetLink.js";
+import { FacetCount as C } from "./FacetCount.js";
+import { DEFAULT_COUNTS_CAPTION as u, FacetCountsCaption as L, countsCaptionOf as l } from "./FacetCountsCaption.js";
+import { DateRangeFacet as h } from "./Variants/DateRangeFacet.js";
+import { MultipleChoiceFacet as S } from "./Variants/MultipleChoiceFacet.js";
+import { PerformanceFacet as A } from "./Variants/PerformanceFacet.js";
+import { SingleChoiceFacet as I } from "./Variants/SingleChoiceFacet.js";
+export {
+  u as DEFAULT_COUNTS_CAPTION,
+  h as DateRangeFacet,
+  C as FacetCount,
+  L as FacetCountsCaption,
+  m as FacetInnerLightButton,
+  f as FacetLabel,
+  o as FacetList,
+  c as FacetListCard,
+  x as FacetResetLink,
+  S as MultipleChoiceFacet,
+  A as PerformanceFacet,
+  I as SingleChoiceFacet,
+  l as countsCaptionOf,
+  r as useFacetState
+};

package/dist/Components/Formatter/BodyNotice.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface BodyNoticeProps extends Omit<ComponentProps<"div">, "children"> {
+    /** What the view did to the body. */
+    children: ReactNode;
+    /** Controls acting on that, such as buttons. */
+    actions?: ReactNode;
+}
+/** A bar above a body telling the reader it is not shown as captured. */
+export declare function BodyNotice({ children, actions, className, ...props }: BodyNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Formatter/BodyNotice.js

@@ -0,0 +1,21 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { twMerge as i } from "tailwind-merge";
+function p({ children: t, actions: e, className: s, ...m }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(
+        "flex flex-wrap items-center justify-between gap-2 border-b border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900",
+        s
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ r("p", { role: "status", children: t }),
+        e && /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: e })
+      ]
+    }
+  );
+}
+export {
+  p as BodyNotice
+};

package/dist/Components/Formatter/CodeFormatter.d.ts

@@ -0,0 +1,47 @@
+import { type ComponentProps } from "react";
+import { type CodeLanguage } from "./useCodeHighlighting.js";
+export interface CodeFormatterProps extends Omit<ComponentProps<"div">, "onChange"> {
+    /**
+     * The code to format and display
+     */
+    code: string;
+    /**
+     * The programming language for syntax highlighting
+     */
+    language?: CodeLanguage;
+    /**
+     * Whether to show line numbers
+     */
+    showLineNumbers?: boolean;
+    /**
+     * Whether to enable virtualization for large files
+     */
+    virtualized?: boolean;
+    /**
+     * Height of the code container (required for virtualization)
+     */
+    height?: number;
+    /**
+     * Performance metrics detail level.
+     */
+    performance?: "none" | "summary" | "detailed";
+    /**
+     * Maximum height before scrolling is enabled
+     */
+    maxHeight?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    className?: string;
+}
+/**
+ * Enhanced code formatter component with syntax highlighting and virtualization
+ *
+ * Features:
+ * - Syntax highlighting for multiple languages
+ * - Virtualization for large files (>50 lines)
+ * - Performance metrics display
+ * - Line numbers support
+ * - Responsive design
+ */
+export declare function CodeFormatter({ code, language, showLineNumbers, virtualized, height, performance, maxHeight, className, ...props }: CodeFormatterProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Formatter/CodeFormatter.js

@@ -0,0 +1,47 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useMemo as C } from "react";
+import { twMerge as H } from "tailwind-merge";
+import { BodyNotice as I } from "./BodyNotice.js";
+import { PerformanceMetrics as x } from "./PerformanceMetrics.js";
+import { LINE_HEIGHT as a, VIRTUALIZATION_THRESHOLD as D, VirtualizedCodeView as M } from "./VirtualizedCodeView.js";
+import { useCodeHighlighting as T } from "./useCodeHighlighting.js";
+const y = 24;
+function G({
+  code: s,
+  language: m = "text",
+  showLineNumbers: l = !1,
+  virtualized: o = !0,
+  height: r = 400,
+  performance: n = "none",
+  maxHeight: h = 600,
+  className: d,
+  ...c
+}) {
+  const g = n !== "none", f = n === "detailed", { formattedContent: i, lines: e, highlightLine: p, tooLargeToHighlight: b } = T(s, m), w = C(
+    () => ({
+      lineCount: e.length,
+      characterCount: i.length,
+      isVirtualized: o && e.length > D,
+      visibleItemCount: o ? Math.min(Math.floor(r / a), e.length) : void 0
+    }),
+    [i, e, o, r]
+  ), N = o ? r : Math.min(e.length * a + y, h);
+  return /* @__PURE__ */ u("div", { className: H("border border-gray-200 rounded-md overflow-hidden bg-white", d), ...c, children: [
+    g && /* @__PURE__ */ t("div", { className: "px-3 py-2 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ t(x, { data: w, showDetails: f }) }),
+    b && /* @__PURE__ */ t(I, { children: "Too large to highlight: shown as plain text." }),
+    /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ t(
+      M,
+      {
+        lines: e,
+        highlightLine: p,
+        containerHeight: N,
+        showLineNumbers: l,
+        virtualized: o,
+        className: "p-3"
+      }
+    ) })
+  ] });
+}
+export {
+  G as CodeFormatter
+};

package/dist/Components/Formatter/HeadersDisplay.d.ts

@@ -0,0 +1,9 @@
+import type { HttpHeader } from "../../Models/Http/headers.js";
+import { type ComponentProps } from "react";
+export type { HttpHeader };
+export interface HeadersDisplayProps extends ComponentProps<"div"> {
+    /** Rendered in the order given, one row per occurrence. Never sorted, grouped or deduplicated. */
+    headers: HttpHeader[];
+    className?: string;
+}
+export declare function HeadersDisplay({ headers, className, ...props }: HeadersDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Formatter/HeadersDisplay.js

@@ -0,0 +1,18 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import "react";
+import { twMerge as l } from "tailwind-merge";
+function d({ headers: r, className: t, ...a }) {
+  return r.length === 0 ? /* @__PURE__ */ e("div", { className: l("text-gray-500 text-xs italic", t), ...a, children: "No headers" }) : /* @__PURE__ */ e("div", { className: l("font-mono text-xs", t), ...a, children: r.map(({ name: i, value: n }, c) => (
+    // Position is the only stable identity: the same name may legitimately appear many times.
+    /* @__PURE__ */ s("div", { className: "flex", children: [
+      /* @__PURE__ */ s("span", { className: "text-gray-600 mr-2", children: [
+        i,
+        ":"
+      ] }),
+      /* @__PURE__ */ e("span", { className: "text-gray-900 break-all", children: n })
+    ] }, `${c}-${i}`)
+  )) });
+}
+export {
+  d as HeadersDisplay
+};

package/dist/Components/Formatter/JsonTreeView.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps } from "react";
+export interface JsonTreeViewProps extends Omit<ComponentProps<"div">, "onChange"> {
+    /**
+     * The JSON data to display
+     */
+    data: unknown;
+    /**
+     * Whether nodes should be initially expanded
+     */
+    initiallyExpanded?: boolean;
+    /**
+     * Maximum nesting depth to show expanded (after this depth, nodes will be collapsed)
+     */
+    expandedDepth?: number;
+    /**
+     * Callback when a value is clicked
+     */
+    onValueClick?: (path: string, value: unknown) => void;
+    /**
+     * CSS class for the container
+     */
+    className?: string;
+}
+/**
+ * Tree View component for JSON data
+ */
+export declare function JsonTreeView({ data, initiallyExpanded, expandedDepth, onValueClick, className, ...props }: JsonTreeViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Formatter/JsonTreeView.js

@@ -0,0 +1,149 @@
+import { jsx as t, jsxs as s, Fragment as O } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { twMerge as j } from "tailwind-merge";
+const N = 64;
+function I({
+  data: r,
+  initiallyExpanded: u = !1,
+  expandedDepth: o = 1,
+  onValueClick: l,
+  className: i,
+  ...a
+}) {
+  let n;
+  try {
+    n = typeof r == "string" ? JSON.parse(r) : r;
+  } catch (d) {
+    console.error("Failed to parse JSON string:", d), n = { error: "Invalid JSON data" };
+  }
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: j("font-mono text-sm text-gray-800 p-4 bg-white rounded-md border border-gray-200", i),
+      ...a,
+      children: /* @__PURE__ */ t(
+        f,
+        {
+          data: n,
+          name: "root",
+          path: "$",
+          initiallyExpanded: u,
+          expandedDepth: o,
+          depth: 0,
+          onValueClick: l
+        }
+      )
+    }
+  );
+}
+function f({ data: r, name: u, path: o, initiallyExpanded: l, expandedDepth: i, depth: a, onValueClick: n }) {
+  const d = l || a < i, [m, x] = S(d), e = A(r), h = e === "object" ? Object.keys(r).length : e === "array" ? r.length : null, b = a >= N && !!h, w = () => {
+    x(!m);
+  }, $ = () => {
+    e !== "object" && e !== "array" && n && n(o, r);
+  }, v = () => {
+    switch (e) {
+      case "string":
+        return "text-green-700";
+      case "number":
+        return "text-blue-600";
+      case "boolean":
+        return "text-purple-600";
+      case "null":
+        return "text-gray-500 italic";
+      default:
+        return "";
+    }
+  }, T = () => {
+    switch (e) {
+      case "string":
+        return `"${r}"`;
+      case "null":
+        return "null";
+      default:
+        return String(r);
+    }
+  }, J = () => {
+    if (e === "object") {
+      const p = r;
+      return Object.keys(p).map((c) => /* @__PURE__ */ t("div", { className: "ml-4 my-1", children: /* @__PURE__ */ t(
+        f,
+        {
+          data: p[c],
+          name: c,
+          path: `${o}.${c}`,
+          initiallyExpanded: l,
+          expandedDepth: i,
+          depth: a + 1,
+          onValueClick: n
+        }
+      ) }, c));
+    } else if (e === "array")
+      return r.map((c, g) => /* @__PURE__ */ t("div", { className: "ml-4 my-1", children: /* @__PURE__ */ t(
+        f,
+        {
+          data: c,
+          name: `${g}`,
+          path: `${o}[${g}]`,
+          initiallyExpanded: l,
+          expandedDepth: i,
+          depth: a + 1,
+          onValueClick: n
+        }
+      ) }, g));
+    return null;
+  }, y = o === "$" ? "" : u;
+  return /* @__PURE__ */ s("div", { className: "node", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-start", children: [
+      b ? /* @__PURE__ */ t("span", { className: "mr-1 inline-block w-4" }) : e === "object" || e === "array" ? /* @__PURE__ */ t("button", { type: "button", onClick: w, className: "mr-1 inline-block w-4 text-gray-500 focus:outline-none", children: m ? "▼" : "►" }) : /* @__PURE__ */ t("span", { className: "mr-1 inline-block w-4" }),
+      y && /* @__PURE__ */ s("span", { className: "mr-1 font-semibold", children: [
+        y,
+        ":"
+      ] }),
+      e === "object" || e === "array" ? /* @__PURE__ */ s("span", { children: [
+        e === "object" ? "{" : "[",
+        b ? /* @__PURE__ */ s("span", { className: "text-gray-500", title: `Maximum depth of ${N} levels reached`, children: [
+          " ",
+          "…"
+        ] }) : !m && /* @__PURE__ */ s("span", { className: "text-gray-500", children: [
+          " ",
+          h,
+          " ",
+          e === "object" ? "properties" : "items",
+          " ",
+          "}"
+        ] })
+      ] }) : /* @__PURE__ */ t(
+        "span",
+        {
+          className: j(v(), n && "cursor-pointer hover:underline"),
+          onClick: $,
+          children: T()
+        }
+      )
+    ] }),
+    m && !b && (e === "object" || e === "array") && /* @__PURE__ */ s(O, { children: [
+      /* @__PURE__ */ t("div", { children: J() }),
+      /* @__PURE__ */ t("div", { className: "ml-4", children: e === "object" ? "}" : "]" })
+    ] })
+  ] });
+}
+function A(r) {
+  if (r === null) return "null";
+  if (Array.isArray(r)) return "array";
+  switch (typeof r) {
+    case "string":
+      return "string";
+    case "number":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "object":
+      return "object";
+    default:
+      return "null";
+  }
+}
+export {
+  I as JsonTreeView
+};

package/dist/Components/Formatter/PerformanceMetrics.d.ts

@@ -0,0 +1,27 @@
+export interface PerformanceMetricsData {
+    /** Number of lines in the content */
+    lineCount: number;
+    /** Total character count */
+    characterCount: number;
+    /** Whether virtualization is active */
+    isVirtualized: boolean;
+    /** Number of visible items when virtualized */
+    visibleItemCount?: number;
+}
+export interface PerformanceMetricsProps {
+    /** Performance data to display */
+    data: PerformanceMetricsData;
+    /** Whether to show detailed metrics */
+    showDetails?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Formats file size in human-readable format
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * Component for displaying code formatting performance metrics
+ * Useful for debugging and monitoring large file performance
+ */
+export declare const PerformanceMetrics: import("react").NamedExoticComponent<PerformanceMetricsProps>;

package/dist/Components/Formatter/PerformanceMetrics.js

@@ -0,0 +1,29 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { memo as m } from "react";
+function d(e) {
+  if (e === 0) return "0 B";
+  const t = 1024, a = ["B", "KB", "MB"], i = Math.floor(Math.log(e) / Math.log(t));
+  return `${parseFloat((e / Math.pow(t, i)).toFixed(1))} ${a[i]}`;
+}
+const f = m(({ data: e, showDetails: t = !1, className: a = "" }) => {
+  const { lineCount: i, characterCount: o, isVirtualized: s, visibleItemCount: l } = e, c = d(o);
+  return /* @__PURE__ */ r("div", { className: `text-xs text-gray-500 ${a}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex gap-4 items-center", children: [
+      /* @__PURE__ */ r("span", { children: [
+        i,
+        " lines"
+      ] }),
+      /* @__PURE__ */ n("span", { children: c }),
+      s && /* @__PURE__ */ r("span", { className: "text-blue-600", children: [
+        "Virtualized ",
+        l && `(${l} visible)`
+      ] })
+    ] }),
+    t && /* @__PURE__ */ n("div", { className: "mt-1 flex gap-4 text-gray-400", children: s && /* @__PURE__ */ n("span", { children: "Virtual rendering enabled" }) })
+  ] });
+});
+f.displayName = "PerformanceMetrics";
+export {
+  f as PerformanceMetrics,
+  d as formatFileSize
+};

package/dist/Components/Formatter/SyntaxHighlighter.d.ts

@@ -0,0 +1,11 @@
+import type { refractor } from "refractor/core";
+/** The syntax tree refractor produces (a hast `Root`). */
+export type SyntaxTree = ReturnType<typeof refractor.highlight>;
+export interface SyntaxHighlighterProps {
+    /** The syntax tree to render */
+    ast: SyntaxTree;
+}
+/**
+ * Renders a syntax tree as inline tokens, to be placed inside a code line.
+ */
+export declare function SyntaxHighlighter({ ast }: SyntaxHighlighterProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Formatter/SyntaxHighlighter.js

@@ -0,0 +1,16 @@
+import { jsx as n, Fragment as m } from "react/jsx-runtime";
+function a(r, t) {
+  if (r.type === "text")
+    return r.value;
+  if (r.type === "element") {
+    const { properties: e, children: i } = r, s = Array.isArray(e.className) ? e.className.join(" ") : String(e.className ?? "");
+    return /* @__PURE__ */ n("span", { className: s, children: i.map((l, c) => a(l, `${t}-${c}`)) }, t);
+  }
+  return null;
+}
+function p({ ast: r }) {
+  return /* @__PURE__ */ n(m, { children: r.children.map((t, e) => a(t, `root-${e}`)) });
+}
+export {
+  p as SyntaxHighlighter
+};

package/dist/Components/Formatter/VirtualizedCodeView.d.ts

@@ -0,0 +1,24 @@
+import { type SyntaxTree } from "./SyntaxHighlighter.js";
+/** Above this many lines the view only draws the lines in view. */
+export declare const VIRTUALIZATION_THRESHOLD = 50;
+/** Height of a code line in pixels (`text-xs` with `leading-5`). */
+export declare const LINE_HEIGHT = 20;
+export interface VirtualizedCodeViewProps {
+    /** The formatted content, one entry per line */
+    lines: string[];
+    /** Highlights one line; lines are drawn as plain text without it */
+    highlightLine?: (line: string) => SyntaxTree | null;
+    /** Height of the container in pixels */
+    containerHeight: number;
+    /** Whether to show line numbers */
+    showLineNumbers?: boolean;
+    /** Whether to draw only the lines in view above `VIRTUALIZATION_THRESHOLD` lines */
+    virtualized?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Renders code line by line, highlighting and drawing only the lines in view
+ * when there are many. Short bodies are drawn whole through the same path.
+ */
+export declare const VirtualizedCodeView: import("react").NamedExoticComponent<VirtualizedCodeViewProps>;

package/dist/Components/Formatter/VirtualizedCodeView.js

@@ -0,0 +1,47 @@
+import { jsxs as V, jsx as e } from "react/jsx-runtime";
+import { memo as y, useMemo as p } from "react";
+import { SyntaxHighlighter as T } from "./SyntaxHighlighter.js";
+import { useVirtualization as S } from "./useVirtualization.js";
+const z = 50, I = 20, H = y(
+  ({ lines: t, highlightLine: r, containerHeight: o, showLineNumbers: s = !1, virtualized: a = !0, className: h = "" }) => {
+    const u = p(
+      () => ({
+        itemHeight: I,
+        containerHeight: o,
+        overscan: 10,
+        virtualizationThreshold: a ? z : Number.POSITIVE_INFINITY
+      }),
+      [o, a]
+    ), { isVirtualized: l, startIndex: i, endIndex: n, totalHeight: x, offsetY: f, onScroll: v } = S(
+      t.length,
+      u
+    ), g = p(
+      () => t.slice(i, n + 1).map((d, N) => {
+        const m = i + N, c = r?.(d);
+        return /* @__PURE__ */ V("div", { className: "font-mono text-xs leading-5 whitespace-pre", style: { height: I }, children: [
+          s && /* @__PURE__ */ e("span", { className: "text-gray-500 select-none mr-3", children: String(m + 1).padStart(4, " ") }),
+          c ? /* @__PURE__ */ e(T, { ast: c }) : d
+        ] }, m);
+      }),
+      [t, i, n, r, s]
+    );
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: `overflow-auto ${h}`,
+        style: { height: o },
+        onScroll: v,
+        tabIndex: 0,
+        role: "group",
+        "aria-label": "Code",
+        children: /* @__PURE__ */ e("div", { style: l ? { height: x, position: "relative" } : void 0, children: /* @__PURE__ */ e("div", { style: l ? { transform: `translateY(${f}px)` } : void 0, children: g }) })
+      }
+    );
+  }
+);
+H.displayName = "VirtualizedCodeView";
+export {
+  I as LINE_HEIGHT,
+  z as VIRTUALIZATION_THRESHOLD,
+  H as VirtualizedCodeView
+};

package/dist/Components/Formatter/bodyLimits.d.ts

@@ -0,0 +1,6 @@
+/** Above this many characters a body is shown as plain text: highlighting one long line blocks the main thread. */
+export declare const HIGHLIGHT_CAP: number;
+/** Above this many characters a body is not reformatted, and a message view shows a preview instead. */
+export declare const FORMAT_CAP: number;
+/** Number of characters a preview shows. */
+export declare const PREVIEW_SIZE: number;

package/dist/Components/Formatter/bodyLimits.js

@@ -0,0 +1,6 @@
+const o = 102400, t = 2097152, I = 65536;
+export {
+  t as FORMAT_CAP,
+  o as HIGHLIGHT_CAP,
+  I as PREVIEW_SIZE
+};

package/dist/Components/Formatter/index.d.ts

@@ -0,0 +1,8 @@
+export { CodeFormatter, type CodeFormatterProps } from "./CodeFormatter.js";
+export { JsonTreeView, type JsonTreeViewProps } from "./JsonTreeView.js";
+export { HeadersDisplay, type HeadersDisplayProps } from "./HeadersDisplay.js";
+export type { CodeLanguage } from "./useCodeHighlighting.js";
+export { SyntaxHighlighter, type SyntaxHighlighterProps } from "./SyntaxHighlighter.js";
+export { VirtualizedCodeView, type VirtualizedCodeViewProps } from "./VirtualizedCodeView.js";
+export { BodyNotice, type BodyNoticeProps } from "./BodyNotice.js";
+export { PerformanceMetrics, type PerformanceMetricsProps } from "./PerformanceMetrics.js";