@everscribe/components-react 0.1.0

package/dist/index.js

@@ -0,0 +1,1933 @@
+import { useState, useEffect, useRef, useMemo, useCallback, useSyncExternalStore } from 'react';
+import { fetchTokenViaOpts, ALL_COLUMNS, EmbedError, exportEvents, parseClaims, createDistinctValuesStore, EMPTY_DISTINCT_VALUES, createEventsStore, COLUMN_LABELS, RELATIVE_TIME_TICK_MS, hasParseableDiff, renderDiff, generateNLPFilters, formatTimeCell } from '@everscribe/components-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/AuditTrail.tsx
+function useNLP(opts) {
+  const [state, setState] = useState({ phase: "idle" });
+  const ctrlRef = useRef(null);
+  const submit = useCallback(
+    async (query) => {
+      const trimmed = query.trim();
+      if (!trimmed) return;
+      if (!opts.token) {
+        setState({ phase: "error", query: trimmed, error: "not_configured" });
+        return;
+      }
+      ctrlRef.current?.abort();
+      const ctrl = new AbortController();
+      ctrlRef.current = ctrl;
+      setState({ phase: "loading" });
+      try {
+        const result = await generateNLPFilters({
+          apiBase: opts.apiBase,
+          token: opts.token,
+          query: trimmed,
+          signal: ctrl.signal
+        });
+        if (ctrl.signal.aborted) return;
+        setState({ phase: "ready", query: trimmed, result });
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        if (err instanceof EmbedError && err.kind === "unauthorized") {
+          const refreshed = await fetchTokenViaOpts({
+            tokenEndpoint: opts.tokenEndpoint,
+            onTokenExpired: opts.onTokenExpired
+          });
+          if (refreshed && !ctrl.signal.aborted) {
+            try {
+              const retry = await generateNLPFilters({
+                apiBase: opts.apiBase,
+                token: refreshed,
+                query: trimmed,
+                signal: ctrl.signal
+              });
+              setState({ phase: "ready", query: trimmed, result: retry });
+              return;
+            } catch (retryErr) {
+              setState({
+                phase: "error",
+                query: trimmed,
+                error: classifyNLPError(retryErr)
+              });
+              return;
+            }
+          }
+        }
+        setState({ phase: "error", query: trimmed, error: classifyNLPError(err) });
+      }
+    },
+    [opts.apiBase, opts.token, opts.tokenEndpoint, opts.onTokenExpired]
+  );
+  const reset = useCallback(() => {
+    ctrlRef.current?.abort();
+    setState({ phase: "idle" });
+  }, []);
+  return { state, submit, reset };
+}
+function classifyNLPError(err) {
+  if (!(err instanceof EmbedError)) return "unknown";
+  if (err.status === 503) {
+    if (err.message?.includes("busy")) return "provider_busy";
+    return "not_configured";
+  }
+  if (err.status === 429) return "rate_limited";
+  if (err.status === 403) return "not_allowed";
+  if (err.kind === "bad_request") return "bad_request";
+  return "unknown";
+}
+var TIME_PRESETS = [
+  { key: "24h", label: "24h" },
+  { key: "7d", label: "7d" },
+  { key: "30d", label: "30d" },
+  { key: "custom", label: "Custom" },
+  { key: "all", label: "All" }
+];
+function pickInitialTab(v, claims) {
+  if (v.nlpQ && claims?.allow_nlp) return "ai";
+  if (v.q && claims?.allow_dsl_input) return "query";
+  if (hasAnyColumnFilter(v)) return "filters";
+  if (claims?.allow_nlp) return "ai";
+  return "filters";
+}
+function FiltersPanel({
+  value,
+  onChange,
+  distinct,
+  claims,
+  apiBase,
+  token,
+  tokenEndpoint,
+  onTokenExpired,
+  onApplied
+}) {
+  const allowNLP = !!claims?.allow_nlp;
+  const allowDSL = !!claims?.allow_dsl_input;
+  const [activeTab, setActiveTab] = useState(
+    () => pickInitialTab(value, claims)
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "audit-trail-filter-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "audit-trail-filter-modes", role: "tablist", "aria-label": "Filter mode", children: [
+      allowNLP && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": activeTab === "ai",
+          className: tabClass(activeTab === "ai"),
+          onClick: () => setActiveTab("ai"),
+          children: "Prompt"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": activeTab === "filters",
+          className: tabClass(activeTab === "filters"),
+          onClick: () => setActiveTab("filters"),
+          children: "Filters"
+        }
+      ),
+      allowDSL && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": activeTab === "query",
+          className: tabClass(activeTab === "query"),
+          onClick: () => setActiveTab("query"),
+          children: "Query"
+        }
+      )
+    ] }),
+    activeTab === "ai" && allowNLP && /* @__PURE__ */ jsx(
+      AITabPanel,
+      {
+        value,
+        onChange,
+        apiBase,
+        token,
+        tokenEndpoint,
+        onTokenExpired
+      }
+    ),
+    activeTab === "filters" && /* @__PURE__ */ jsx(
+      FiltersTabPanel,
+      {
+        value,
+        onChange,
+        distinct,
+        onApplied
+      }
+    ),
+    activeTab === "query" && allowDSL && /* @__PURE__ */ jsx(QueryTabPanel, { value, onChange })
+  ] });
+}
+function tabClass(active) {
+  return active ? "audit-trail-filter-mode audit-trail-filter-mode-selected" : "audit-trail-filter-mode";
+}
+function AITabPanel({
+  value,
+  onChange,
+  apiBase,
+  token,
+  tokenEndpoint,
+  onTokenExpired
+}) {
+  const [draft, setDraft] = useState(value.nlpQ ?? "");
+  const nlp = useNLP({ apiBase, token, tokenEndpoint, onTokenExpired });
+  const lastAppliedRef = useRef(null);
+  useEffect(() => {
+    if (nlp.state.phase !== "ready") return;
+    const sig = nlp.state.query + "|" + (nlp.state.result.dsl ?? "");
+    if (lastAppliedRef.current === sig) return;
+    lastAppliedRef.current = sig;
+    onChange({
+      ...value,
+      q: nlp.state.result.dsl || void 0,
+      nlpQ: nlp.state.query,
+      nlpExplanation: nlp.state.result.explanation,
+      nlpUnsupported: nlp.state.result.unsupported
+    });
+  }, [nlp.state, onChange, value]);
+  const isBusy = nlp.state.phase === "loading";
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      void nlp.submit(draft);
+    },
+    [draft, nlp]
+  );
+  return /* @__PURE__ */ jsxs("form", { className: "audit-trail-nlp-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("label", { className: "audit-trail-nlp-label", htmlFor: "audit-trail-nlp-input", children: [
+      "Ask in plain English",
+      /* @__PURE__ */ jsx("span", { className: "audit-trail-badge audit-trail-badge-info", title: "Beta", children: "Beta" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: "audit-trail-nlp-input",
+        type: "text",
+        className: "audit-trail-nlp-input",
+        placeholder: "e.g. failed logins last 24 hours",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        maxLength: 500,
+        "aria-label": "Natural-language filter query",
+        disabled: isBusy
+      }
+    ),
+    value.q && value.nlpQ && /* @__PURE__ */ jsx("div", { className: "audit-trail-nlp-banner", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Translated to:" }),
+      " ",
+      /* @__PURE__ */ jsx("code", { className: "audit-trail-nlp-translated", children: value.q })
+    ] }) }),
+    nlp.state.phase === "error" && /* @__PURE__ */ jsx("div", { className: "audit-trail-error", children: nlpErrorMessage(nlp.state.error) }),
+    value.nlpUnsupported && value.nlpUnsupported.length > 0 && /* @__PURE__ */ jsx("div", { className: "audit-trail-error audit-trail-nlp-unsupported", children: /* @__PURE__ */ jsx("ul", { children: value.nlpUnsupported.map((u, i) => /* @__PURE__ */ jsxs("li", { children: [
+      "Couldn't apply: ",
+      u
+    ] }, i)) }) }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-actions", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        className: "audit-trail-button audit-trail-button-secondary",
+        disabled: !draft.trim() || isBusy,
+        children: isBusy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "audit-trail-button-spinner" }),
+          " Translating\u2026"
+        ] }) : "Search"
+      }
+    ) })
+  ] });
+}
+function nlpErrorMessage(reason) {
+  switch (reason) {
+    case "not_configured":
+      return "Natural-language filtering isn't configured on this server.";
+    case "not_allowed":
+      return "This embed token does not permit natural-language queries.";
+    case "rate_limited":
+      return "You've hit the per-hour limit. Try again in a few minutes.";
+    case "provider_busy":
+      return "The natural-language service is busy right now. Try again in a moment.";
+    case "bad_request":
+      return "That query couldn't be processed. Try rephrasing.";
+    default:
+      return "Couldn't process that query. Try simpler terms.";
+  }
+}
+function FiltersTabPanel({ value, onChange, distinct, onApplied }) {
+  const [draftSince, setDraftSince] = useState(value.since ?? "");
+  const [draftBefore, setDraftBefore] = useState(value.before ?? "");
+  const [draftAction, setDraftAction] = useState(value.action ?? "");
+  const [draftActorType, setDraftActorType] = useState(value.actorType ?? "");
+  const [draftTenantID, setDraftTenantID] = useState(value.tenantId ?? "");
+  const [draftTargetType, setDraftTargetType] = useState(value.targetType ?? "");
+  const [draftResultStatus, setDraftResultStatus] = useState(value.resultStatus ?? "");
+  const [draftActor, setDraftActor] = useState(value.actor ?? "");
+  const [draftTargetID, setDraftTargetID] = useState(value.targetId ?? "");
+  const [draftOriginIP, setDraftOriginIP] = useState(value.originIP ?? "");
+  useEffect(() => {
+    setDraftSince(value.since ?? "");
+    setDraftBefore(value.before ?? "");
+    setDraftAction(value.action ?? "");
+    setDraftActorType(value.actorType ?? "");
+    setDraftTenantID(value.tenantId ?? "");
+    setDraftTargetType(value.targetType ?? "");
+    setDraftResultStatus(value.resultStatus ?? "");
+    setDraftActor(value.actor ?? "");
+    setDraftTargetID(value.targetId ?? "");
+    setDraftOriginIP(value.originIP ?? "");
+  }, [
+    value.since,
+    value.before,
+    value.action,
+    value.actorType,
+    value.tenantId,
+    value.targetType,
+    value.resultStatus,
+    value.actor,
+    value.targetId,
+    value.originIP
+  ]);
+  const norm = (s) => s === "" ? void 0 : s;
+  const dirty = norm(draftAction) !== value.action || norm(draftActorType) !== value.actorType || norm(draftTenantID) !== value.tenantId || norm(draftTargetType) !== value.targetType || norm(draftResultStatus) !== value.resultStatus || norm(draftActor) !== value.actor || norm(draftTargetID) !== value.targetId || norm(draftOriginIP) !== value.originIP || value.range === "custom" && (norm(draftSince) !== value.since || norm(draftBefore) !== value.before);
+  const handleApply = () => {
+    onChange({
+      ...value,
+      action: norm(draftAction),
+      actorType: norm(draftActorType),
+      tenantId: norm(draftTenantID),
+      targetType: norm(draftTargetType),
+      resultStatus: norm(draftResultStatus),
+      actor: norm(draftActor),
+      targetId: norm(draftTargetID),
+      originIP: norm(draftOriginIP),
+      since: value.range === "custom" ? norm(draftSince) : value.since,
+      before: value.range === "custom" ? norm(draftBefore) : value.before,
+      q: void 0,
+      nlpQ: void 0,
+      nlpExplanation: void 0,
+      nlpUnsupported: void 0
+    });
+    onApplied?.();
+  };
+  const handlePresetClick = (range) => {
+    if (range === "custom") {
+      onChange({ ...value, range });
+      return;
+    }
+    onChange({ ...value, range, since: void 0, before: void 0 });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "audit-trail-filter-tab-panel", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "audit-trail-filter-tabs",
+        role: "tablist",
+        "aria-label": "Time range",
+        children: TIME_PRESETS.map((p) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": value.range === p.key,
+            className: value.range === p.key ? "audit-trail-filter-tab audit-trail-filter-tab-selected" : "audit-trail-filter-tab",
+            onClick: () => handlePresetClick(p.key),
+            children: p.label
+          },
+          p.key
+        ))
+      }
+    ),
+    value.range === "custom" && /* @__PURE__ */ jsxs("div", { className: "audit-trail-filter-row", children: [
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-filter-field", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-filter-field-label", children: "From" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "datetime-local",
+            className: "audit-trail-filter-input",
+            value: draftSince,
+            onChange: (e) => setDraftSince(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-filter-field", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-filter-field-label", children: "To" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "datetime-local",
+            className: "audit-trail-filter-input",
+            value: draftBefore,
+            onChange: (e) => setDraftBefore(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "audit-trail-filter-row", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "audit-trail-filter-select",
+          "aria-label": "Action",
+          value: draftAction,
+          onChange: (e) => setDraftAction(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All actions" }),
+            distinct.actions.map((a) => /* @__PURE__ */ jsx("option", { value: a, children: a }, a))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "audit-trail-filter-select",
+          "aria-label": "Actor type",
+          value: draftActorType,
+          onChange: (e) => setDraftActorType(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All actor types" }),
+            distinct.actorTypes.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "audit-trail-filter-select",
+          "aria-label": "Target type",
+          value: draftTargetType,
+          onChange: (e) => setDraftTargetType(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All target types" }),
+            distinct.targetTypes.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+          ]
+        }
+      ),
+      distinct.tenants.length > 0 && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "audit-trail-filter-select",
+          "aria-label": "Tenant",
+          value: draftTenantID,
+          onChange: (e) => setDraftTenantID(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All tenants" }),
+            distinct.tenants.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+          ]
+        }
+      ),
+      distinct.resultStatuses.length > 0 && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "audit-trail-filter-select",
+          "aria-label": "Result",
+          value: draftResultStatus,
+          onChange: (e) => setDraftResultStatus(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All results" }),
+            distinct.resultStatuses.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s }, s))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-row", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "audit-trail-filter-input audit-trail-filter-actor-input",
+        placeholder: "Actor (id, name, email)",
+        value: draftActor,
+        onChange: (e) => setDraftActor(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-row", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "audit-trail-filter-input audit-trail-filter-wide-input",
+        placeholder: "Target ID",
+        value: draftTargetID,
+        onChange: (e) => setDraftTargetID(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-row", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "audit-trail-filter-input audit-trail-filter-wide-input",
+        placeholder: "Origin IP",
+        value: draftOriginIP,
+        onChange: (e) => setDraftOriginIP(e.target.value)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-actions", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "audit-trail-button audit-trail-button-secondary",
+        disabled: !dirty,
+        onClick: handleApply,
+        children: "Add filters"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      MetadataFilterSection,
+      {
+        value,
+        onChange,
+        distinct,
+        onApplied
+      }
+    )
+  ] });
+}
+function MetadataFilterSection({
+  value,
+  onChange,
+  distinct,
+  onApplied
+}) {
+  const [variant, setVariant] = useState("metadata");
+  const [mdKey, setMdKey] = useState("");
+  const [mdOp, setMdOp] = useState("eq");
+  const [mdValue, setMdValue] = useState("");
+  const [mdValue2, setMdValue2] = useState("");
+  const [cfField, setCfField] = useState("");
+  const [cbField, setCbField] = useState("");
+  const [cbValue, setCbValue] = useState("");
+  const [caField, setCaField] = useState("");
+  const [caValue, setCaValue] = useState("");
+  const compiled = compileMetaClause({
+    variant,
+    mdKey,
+    mdOp,
+    mdValue,
+    mdValue2,
+    cfField,
+    cbField,
+    cbValue,
+    caField,
+    caValue
+  });
+  const submittable = compiled.dsl !== null;
+  const showError = !submittable && compiled.error && /Both bounds/.test(compiled.error);
+  const handleAdd = () => {
+    if (!compiled.dsl) return;
+    onChange({
+      ...value,
+      q: compiled.dsl,
+      nlpQ: void 0,
+      nlpExplanation: void 0,
+      nlpUnsupported: void 0
+    });
+    onApplied?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "audit-trail-add-filter-inline", children: [
+    /* @__PURE__ */ jsx("h3", { className: "audit-trail-add-filter-heading", children: "Metadata and Changed Fields" }),
+    /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Filter type" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: variant,
+          onChange: (e) => setVariant(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "metadata", children: "Metadata key/value" }),
+            /* @__PURE__ */ jsx("option", { value: "change-field", children: "Change: a field changed" }),
+            /* @__PURE__ */ jsx("option", { value: "change-before", children: "Change: previous value (before)" }),
+            /* @__PURE__ */ jsx("option", { value: "change-after", children: "Change: new value (after)" })
+          ]
+        }
+      )
+    ] }),
+    variant === "metadata" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Key" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            list: "audit-trail-mdk-key-list",
+            placeholder: "e.g. environment",
+            value: mdKey,
+            onChange: (e) => setMdKey(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("datalist", { id: "audit-trail-mdk-key-list", children: distinct.metadataKeys.map((k) => /* @__PURE__ */ jsxs("option", { value: k.key, children: [
+          k.observed_type,
+          " \xB7 ",
+          k.event_count
+        ] }, k.key)) })
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Operator" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            value: mdOp,
+            onChange: (e) => setMdOp(e.target.value),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "eq", children: "equals" }),
+              /* @__PURE__ */ jsx("option", { value: "neq", children: "not equal" }),
+              /* @__PURE__ */ jsx("option", { value: "contains", children: "contains" }),
+              /* @__PURE__ */ jsx("option", { value: "gt", children: "greater than" }),
+              /* @__PURE__ */ jsx("option", { value: "gte", children: "greater or equal" }),
+              /* @__PURE__ */ jsx("option", { value: "lt", children: "less than" }),
+              /* @__PURE__ */ jsx("option", { value: "lte", children: "less or equal" }),
+              /* @__PURE__ */ jsx("option", { value: "between", children: "between" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Value" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "e.g. prod",
+            value: mdValue,
+            onChange: (e) => setMdValue(e.target.value)
+          }
+        )
+      ] }),
+      mdOp === "between" && /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Upper bound" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "e.g. 1000",
+            value: mdValue2,
+            onChange: (e) => setMdValue2(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    variant === "change-field" && /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Field" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          list: "audit-trail-cf-field-list",
+          placeholder: "e.g. email",
+          value: cfField,
+          onChange: (e) => setCfField(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("datalist", { id: "audit-trail-cf-field-list", children: distinct.changeFields.map((c) => /* @__PURE__ */ jsxs("option", { value: c.field, children: [
+        c.event_count,
+        " events"
+      ] }, c.field)) })
+    ] }),
+    variant === "change-before" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Field" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            list: "audit-trail-cf-field-list",
+            placeholder: "e.g. role",
+            value: cbField,
+            onChange: (e) => setCbField(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Previous value" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "e.g. user",
+            value: cbValue,
+            onChange: (e) => setCbValue(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    variant === "change-after" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "Field" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            list: "audit-trail-cf-field-list",
+            placeholder: "e.g. role",
+            value: caField,
+            onChange: (e) => setCaField(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "audit-trail-add-filter-row", children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-add-filter-label", children: "New value" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "e.g. admin",
+            value: caValue,
+            onChange: (e) => setCaValue(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    showError && /* @__PURE__ */ jsx("p", { className: "audit-trail-add-filter-error", children: compiled.error }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-actions audit-trail-add-filter-actions", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "audit-trail-button audit-trail-button-secondary",
+        disabled: !submittable,
+        onClick: handleAdd,
+        children: "Add filter"
+      }
+    ) })
+  ] });
+}
+function compileMetaClause(i) {
+  switch (i.variant) {
+    case "metadata": {
+      const key = i.mdKey.trim();
+      if (!key) return { dsl: null, error: "Key is required" };
+      const path = "metadata." + quoteKeyIfNeeded(key);
+      const v1 = i.mdValue;
+      const v2 = i.mdValue2;
+      switch (i.mdOp) {
+        case "eq":
+          return { dsl: `${path}:${quoteIfNeeded(v1)}` };
+        case "neq":
+          return { dsl: `${path}:!${quoteIfNeeded(v1)}` };
+        case "contains":
+          return { dsl: `${path}:~${quoteIfNeeded(v1)}` };
+        case "gt":
+          return { dsl: `${path}:>${quoteIfNeeded(v1)}` };
+        case "gte":
+          return { dsl: `${path}:>=${quoteIfNeeded(v1)}` };
+        case "lt":
+          return { dsl: `${path}:<${quoteIfNeeded(v1)}` };
+        case "lte":
+          return { dsl: `${path}:<=${quoteIfNeeded(v1)}` };
+        case "between":
+          if (v1 === "" || v2 === "") {
+            return { dsl: null, error: "Both bounds required for between" };
+          }
+          return {
+            dsl: `${path}:[${quoteIfNeeded(v1)} TO ${quoteIfNeeded(v2)}]`
+          };
+      }
+      return { dsl: null, error: "Unknown operator" };
+    }
+    case "change-field": {
+      const f = i.cfField.trim();
+      if (!f) return { dsl: null, error: "Field is required" };
+      return { dsl: `change.field:${quoteIfNeeded(f)}` };
+    }
+    case "change-before": {
+      const f = i.cbField.trim();
+      if (!f) return { dsl: null, error: "Field is required" };
+      return {
+        dsl: `change.${quoteKeyIfNeeded(f)}.before:${quoteIfNeeded(i.cbValue)}`
+      };
+    }
+    case "change-after": {
+      const f = i.caField.trim();
+      if (!f) return { dsl: null, error: "Field is required" };
+      return {
+        dsl: `change.${quoteKeyIfNeeded(f)}.after:${quoteIfNeeded(i.caValue)}`
+      };
+    }
+  }
+}
+function quoteIfNeeded(raw) {
+  if (raw === "") return '""';
+  if (/[\s"\(\)\[\]]/.test(raw)) {
+    return '"' + raw.replace(/\\/g, "\\\\").replace(/"/g, '\\"') + '"';
+  }
+  return raw;
+}
+function quoteKeyIfNeeded(raw) {
+  if (/^[A-Za-z_][A-Za-z0-9_-]*$/.test(raw)) return raw;
+  return '"' + raw + '"';
+}
+function QueryTabPanel({ value, onChange }) {
+  const [draft, setDraft] = useState(value.q ?? "");
+  useEffect(() => {
+    setDraft(value.q ?? "");
+  }, [value.q]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const next = draft.trim() || void 0;
+    if (next === value.q) return;
+    onChange({
+      ...value,
+      q: next,
+      nlpQ: void 0,
+      nlpExplanation: void 0,
+      nlpUnsupported: void 0
+    });
+  };
+  return /* @__PURE__ */ jsxs("form", { className: "audit-trail-query-form", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("label", { className: "audit-trail-query-label", htmlFor: "audit-trail-query-input", children: [
+      "Query",
+      " ",
+      /* @__PURE__ */ jsx("a", { href: "https://everscribe.io/docs", target: "_blank", rel: "noopener noreferrer", children: "(see docs)" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: "audit-trail-query-input",
+        type: "text",
+        className: "audit-trail-query-input",
+        placeholder: "e.g. action:user.login AND result.status:!ok",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        "aria-label": "Advanced query (DSL)",
+        spellCheck: false
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-actions", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        className: "audit-trail-button audit-trail-button-secondary",
+        disabled: (draft.trim() || "") === (value.q ?? ""),
+        children: "Search"
+      }
+    ) })
+  ] });
+}
+function hasAnyColumnFilter(v) {
+  return !!(v.action || v.actor || v.actorType || v.tenantId || v.targetType || v.targetId || v.resultStatus || v.originIP);
+}
+function countActiveColumnFilters(v) {
+  let n = 0;
+  if (v.action) n++;
+  if (v.actor) n++;
+  if (v.actorType) n++;
+  if (v.tenantId) n++;
+  if (v.targetType) n++;
+  if (v.targetId) n++;
+  if (v.resultStatus) n++;
+  if (v.originIP) n++;
+  return n;
+}
+function parseQClauses(q) {
+  const trimmed = q.trim();
+  if (!trimmed) return [];
+  if (/[()]/.test(trimmed)) return [{ label: trimmed, raw: trimmed }];
+  return trimmed.split(/\s+AND\s+/i).map((s) => s.trim()).filter((s) => s.length > 0).map((s) => ({ label: s, raw: s }));
+}
+function removeClauseFromQ(q, raw) {
+  const remaining = parseQClauses(q).filter((c) => c.raw !== raw);
+  if (remaining.length === 0) return void 0;
+  return remaining.map((c) => c.raw).join(" AND ");
+}
+function ActiveFilterChips({ value, onChange }) {
+  const chips = [];
+  const colChip = (field, label, raw) => {
+    if (!raw) return;
+    chips.push({
+      label: `${label}: ${raw}`,
+      onRemove: () => onChange({ ...value, [field]: void 0 })
+    });
+  };
+  colChip("action", "Action", value.action);
+  colChip("actor", "Actor", value.actor);
+  colChip("actorType", "Actor type", value.actorType);
+  colChip("tenantId", "Tenant", value.tenantId);
+  colChip("targetType", "Target type", value.targetType);
+  colChip("targetId", "Target ID", value.targetId);
+  colChip("resultStatus", "Result", value.resultStatus);
+  colChip("originIP", "Origin IP", value.originIP);
+  if (value.q) {
+    for (const clause of parseQClauses(value.q)) {
+      chips.push({
+        label: clause.label,
+        onRemove: () => {
+          const nextQ = removeClauseFromQ(value.q, clause.raw);
+          onChange({
+            ...value,
+            q: nextQ,
+            // If this was the last DSL clause and the q came from an
+            // NLP translation, clear the echo fields too - there's
+            // nothing left to attribute to "you asked".
+            nlpQ: nextQ ? value.nlpQ : void 0,
+            nlpExplanation: nextQ ? value.nlpExplanation : void 0,
+            nlpUnsupported: nextQ ? value.nlpUnsupported : void 0
+          });
+        }
+      });
+    }
+  }
+  if (chips.length === 0) return null;
+  const clearAll = () => onChange({
+    range: value.range,
+    since: value.since,
+    before: value.before
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "audit-trail-filter-chips-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-filter-chips", children: chips.map((c, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "audit-trail-filter-chip",
+        onClick: c.onRemove,
+        title: "Remove this filter",
+        "aria-label": `Remove filter: ${c.label}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: c.label }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "audit-trail-filter-chip-x", children: "\xD7" })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "audit-trail-button audit-trail-button-text",
+        onClick: clearAll,
+        children: "Clear all"
+      }
+    )
+  ] });
+}
+function ColumnPicker({ available, visible, onToggle }) {
+  const visibleCount = available.reduce((n, c) => visible.has(c) ? n + 1 : n, 0);
+  return /* @__PURE__ */ jsxs("details", { className: "audit-trail-picker", children: [
+    /* @__PURE__ */ jsxs("summary", { className: "audit-trail-picker-summary", children: [
+      "Columns (",
+      visibleCount,
+      "/",
+      available.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "audit-trail-picker-content", children: available.map((col) => /* @__PURE__ */ jsxs("label", { className: "audit-trail-picker-item", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: visible.has(col),
+          onChange: () => onToggle(col)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: COLUMN_LABELS[col] ?? col })
+    ] }, col)) })
+  ] });
+}
+function EventDetail({ event, onClose, theme = "light" }) {
+  const [mounted, setMounted] = useState(false);
+  const [tab, setTab] = useState("raw");
+  const [copied, setCopied] = useState(false);
+  const closeBtnRef = useRef(null);
+  const showDiff = hasParseableDiff(event.change);
+  const diff = useMemo(
+    () => showDiff ? renderDiff(event.change) : { lines: [] },
+    [event.change, showDiff]
+  );
+  const rawJson = useMemo(() => JSON.stringify(event, null, 2), [event]);
+  const highlightedJson = useMemo(() => highlightJSON(rawJson), [rawJson]);
+  const metadataRows = useMemo(() => buildMetadataRows(event.metadata), [event.metadata]);
+  const showMetadata = metadataRows.length > 0;
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (!mounted) return;
+    closeBtnRef.current?.focus();
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [mounted, onClose]);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(rawJson);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+    }
+  };
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: `audit-trail-portal audit-trail-theme-${theme}`, children: /* @__PURE__ */ jsx("div", { className: "audit-trail-inspect-backdrop", onMouseDown: onClose, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "audit-trail-inspect-modal",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "audit-trail-inspect-title",
+        onMouseDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref: closeBtnRef,
+              className: "audit-trail-inspect-close",
+              "aria-label": "Close",
+              onClick: onClose,
+              children: "\xD7"
+            }
+          ),
+          /* @__PURE__ */ jsx("h2", { id: "audit-trail-inspect-title", className: "audit-trail-inspect-title", children: "Inspect Event" }),
+          /* @__PURE__ */ jsxs("p", { className: "audit-trail-inspect-subtitle", children: [
+            /* @__PURE__ */ jsx("span", { className: "audit-trail-inspect-subtitle-line", children: /* @__PURE__ */ jsx("code", { children: event.action || "-" }) }),
+            /* @__PURE__ */ jsx("span", { className: "audit-trail-inspect-subtitle-line", children: formatHeaderTimestamp(event.occurred_at) }),
+            /* @__PURE__ */ jsx("span", { className: "audit-trail-inspect-subtitle-line", children: /* @__PURE__ */ jsx("code", { children: event.id }) })
+          ] }),
+          (showDiff || showMetadata) && /* @__PURE__ */ jsxs("div", { className: "audit-trail-inspect-tabs", role: "tablist", "aria-label": "View", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": tab === "raw",
+                className: inspectTabClass(tab === "raw"),
+                onClick: () => setTab("raw"),
+                children: "Raw"
+              }
+            ),
+            showDiff && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": tab === "diff",
+                className: inspectTabClass(tab === "diff"),
+                onClick: () => setTab("diff"),
+                children: "Diff"
+              }
+            ),
+            showMetadata && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": tab === "metadata",
+                className: inspectTabClass(tab === "metadata"),
+                onClick: () => setTab("metadata"),
+                children: "Metadata"
+              }
+            )
+          ] }),
+          tab === "raw" && /* @__PURE__ */ jsx("div", { className: "audit-trail-inspect-panel", children: /* @__PURE__ */ jsxs("div", { className: "audit-trail-code-block-wrap", children: [
+            /* @__PURE__ */ jsx("pre", { className: "audit-trail-code-block", children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: highlightedJson } }) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "audit-trail-copy-button",
+                onClick: handleCopy,
+                "aria-label": copied ? "Copied" : "Copy to clipboard",
+                title: copied ? "Copied" : "Copy to clipboard",
+                children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+              }
+            )
+          ] }) }),
+          tab === "diff" && showDiff && /* @__PURE__ */ jsx("div", { className: "audit-trail-inspect-panel", children: /* @__PURE__ */ jsx(DiffTable, { lines: diff.lines }) }),
+          tab === "metadata" && showMetadata && /* @__PURE__ */ jsx("div", { className: "audit-trail-inspect-panel", children: /* @__PURE__ */ jsx(MetadataTable, { rows: metadataRows }) })
+        ]
+      }
+    ) }) }),
+    document.body
+  );
+}
+function DiffTable({ lines }) {
+  return /* @__PURE__ */ jsx("div", { className: "audit-trail-diff-wrap", children: /* @__PURE__ */ jsxs("table", { className: "audit-trail-diff-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "Before" }),
+      /* @__PURE__ */ jsx("th", { children: "After" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: lines.map((line, idx) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: `audit-trail-diff-cell audit-trail-diff-before-${line.beforeKind || "blank"}`,
+          children: /* @__PURE__ */ jsx("pre", { children: line.before })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: `audit-trail-diff-cell audit-trail-diff-after-${line.afterKind || "blank"}`,
+          children: /* @__PURE__ */ jsx("pre", { children: line.after })
+        }
+      )
+    ] }, idx)) })
+  ] }) });
+}
+function CopyIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+}
+function formatHeaderTimestamp(rfc3339) {
+  if (!rfc3339) return "-";
+  const d = new Date(rfc3339);
+  if (Number.isNaN(d.getTime())) return rfc3339;
+  const month = MONTHS[d.getUTCMonth()] ?? "";
+  const day = d.getUTCDate();
+  const year = d.getUTCFullYear();
+  const hh = String(d.getUTCHours()).padStart(2, "0");
+  const mm = String(d.getUTCMinutes()).padStart(2, "0");
+  const ss = String(d.getUTCSeconds()).padStart(2, "0");
+  const ms = String(d.getUTCMilliseconds()).padStart(3, "0");
+  return `${month} ${day}, ${year} ${hh}:${mm}:${ss}.${ms} UTC`;
+}
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function inspectTabClass(active) {
+  return active ? "audit-trail-inspect-tab audit-trail-inspect-tab-active" : "audit-trail-inspect-tab";
+}
+function highlightJSON(json) {
+  const safe = escapeHTML(json);
+  return safe.replace(
+    /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(?:\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+    (match) => {
+      let cls = "audit-trail-json-num";
+      if (match.startsWith('"')) {
+        cls = /:$/.test(match) ? "audit-trail-json-key" : "audit-trail-json-str";
+      } else if (/true|false/.test(match)) {
+        cls = "audit-trail-json-bool";
+      } else if (/null/.test(match)) {
+        cls = "audit-trail-json-null";
+      }
+      return `<span class="${cls}">${match}</span>`;
+    }
+  );
+}
+function escapeHTML(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function buildMetadataRows(metadata) {
+  if (!metadata) return [];
+  const keys = Object.keys(metadata);
+  if (keys.length === 0) return [];
+  keys.sort();
+  return keys.map((k) => {
+    const raw = metadata[k];
+    return { key: k, value: renderMetadataValue(raw), type: classifyValue(raw) };
+  });
+}
+function renderMetadataValue(v) {
+  if (v === null || v === void 0) return "";
+  if (typeof v === "string") return v;
+  if (typeof v === "number" || typeof v === "boolean") return String(v);
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+function classifyValue(v) {
+  if (v === null) return "null";
+  if (Array.isArray(v)) return "array";
+  if (typeof v === "object") return "object";
+  return typeof v;
+}
+function MetadataTable({ rows }) {
+  return /* @__PURE__ */ jsxs("table", { className: "audit-trail-metadata-kv-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "audit-trail-md-col-key", children: "Key" }),
+      /* @__PURE__ */ jsx("th", { className: "audit-trail-md-col-type", children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: "audit-trail-md-col-value", children: "Value" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { className: "audit-trail-md-col-key", children: /* @__PURE__ */ jsx("code", { children: r.key }) }),
+      /* @__PURE__ */ jsx("td", { className: "audit-trail-md-col-type", children: /* @__PURE__ */ jsx("span", { className: "audit-trail-muted", children: r.type }) }),
+      /* @__PURE__ */ jsx("td", { className: "audit-trail-md-col-value", children: /* @__PURE__ */ jsx("code", { children: r.value }) })
+    ] }, r.key)) })
+  ] });
+}
+function useRelativeTimeTick(intervalMs = RELATIVE_TIME_TICK_MS) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+  return now;
+}
+function EventRow({ event, columns, now, onClick }) {
+  const interactive = Boolean(onClick);
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: "audit-trail-row",
+      onClick: interactive ? () => onClick(event) : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick(event);
+        }
+      } : void 0,
+      children: columns.map((col) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: `audit-trail-cell audit-trail-cell-${col}`,
+          "data-label": COLUMN_LABELS[col] ?? col,
+          children: renderCell(col, event, now)
+        },
+        col
+      ))
+    }
+  );
+}
+function renderCell(column, event, now) {
+  switch (column) {
+    case "result":
+      return renderResult(event.result);
+    case "origin":
+      return renderOrigin(event.origin);
+    case "change":
+    case "metadata":
+      return renderPresence(getField(event, column));
+    default: {
+      const value = getField(event, column);
+      if (value == null) return null;
+      if (column === "occurred_at" && typeof value === "string") {
+        return /* @__PURE__ */ jsx("time", { dateTime: value, title: value, children: formatTimeCell(value, now) });
+      }
+      if (typeof value === "string") return value;
+      if (typeof value === "object") return summarizeObject(value);
+      return String(value);
+    }
+  }
+}
+function getField(event, key) {
+  return event[key];
+}
+function renderResult(value) {
+  if (value == null || typeof value !== "object") return "-";
+  const obj = value;
+  const status = typeof obj.status === "string" ? obj.status : "";
+  if (!status) return "-";
+  return /* @__PURE__ */ jsx("span", { className: `audit-trail-status audit-trail-status-${cssToken(status)}`, children: status });
+}
+function renderOrigin(value) {
+  if (value == null || typeof value !== "object") return "-";
+  const obj = value;
+  for (const key of ["ip", "hostname", "host"]) {
+    const v = obj[key];
+    if (typeof v === "string" && v.length > 0) return v;
+  }
+  return summarizeObject(obj);
+}
+function renderPresence(value) {
+  if (value == null) return "-";
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+    if (keys.length === 0) return "-";
+    return /* @__PURE__ */ jsx("span", { className: "audit-trail-cell-presence", children: "View" });
+  }
+  if (typeof value === "string" && value.length > 0) {
+    return /* @__PURE__ */ jsx("span", { className: "audit-trail-cell-presence", children: "View" });
+  }
+  return "-";
+}
+function summarizeObject(value) {
+  const obj = value;
+  for (const key of ["name", "email", "id", "type"]) {
+    const v = obj[key];
+    if (typeof v === "string" && v.length > 0) return v;
+  }
+  const keys = Object.keys(obj);
+  if (keys.length === 0) return "-";
+  return `{${keys.length} ${keys.length === 1 ? "field" : "fields"}}`;
+}
+function cssToken(s) {
+  return s.toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+}
+function EventTable({ events, visibleColumns, onRowClick }) {
+  const now = useRelativeTimeTick();
+  return /* @__PURE__ */ jsx("div", { className: "audit-trail-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "audit-trail-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: visibleColumns.map((col) => /* @__PURE__ */ jsx("th", { scope: "col", className: `audit-trail-th audit-trail-th-${col}`, children: COLUMN_LABELS[col] ?? col }, col)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: events.map((event) => /* @__PURE__ */ jsx(
+      EventRow,
+      {
+        event,
+        columns: visibleColumns,
+        now,
+        onClick: onRowClick
+      },
+      event.id
+    )) })
+  ] }) });
+}
+function ExportModal({ open, onClose, onDownload }) {
+  const [format, setFormat] = useState(null);
+  const [status, setStatus] = useState("idle");
+  const [errMsg, setErrMsg] = useState(null);
+  useEffect(() => {
+    if (!open) {
+      setFormat(null);
+      setStatus("idle");
+      setErrMsg(null);
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape" && status !== "downloading") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, status, onClose]);
+  if (!open) return null;
+  const handleDownload = async () => {
+    if (!format) return;
+    setStatus("downloading");
+    setErrMsg(null);
+    try {
+      await onDownload(format);
+      onClose();
+    } catch (err) {
+      setStatus("error");
+      setErrMsg(err instanceof Error ? err.message : "Export failed.");
+    }
+  };
+  const onBackdropClick = (e) => {
+    if (e.target !== e.currentTarget) return;
+    if (status === "downloading") return;
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "audit-trail-export-backdrop",
+      role: "presentation",
+      onClick: onBackdropClick,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "audit-trail-export-modal",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "audit-trail-export-title",
+          children: [
+            /* @__PURE__ */ jsx("h2", { id: "audit-trail-export-title", className: "audit-trail-export-title", children: "Export events" }),
+            /* @__PURE__ */ jsx("p", { className: "audit-trail-export-blurb", children: "The current filters and time range are applied. Capped at 100,000 rows - narrow the filters or time window if you hit it." }),
+            /* @__PURE__ */ jsxs("div", { className: "audit-trail-export-options", children: [
+              /* @__PURE__ */ jsx(
+                FormatCard,
+                {
+                  format: "csv",
+                  selected: format === "csv",
+                  onSelect: () => setFormat("csv"),
+                  title: "CSV",
+                  body: "Spreadsheet-friendly. Common fields are columns; nested fields (origin, metadata, change) are JSON in single columns."
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FormatCard,
+                {
+                  format: "json",
+                  selected: format === "json",
+                  onSelect: () => setFormat("json"),
+                  title: "JSON",
+                  body: "Full event objects preserving nested structure. Same shape the API returns."
+                }
+              )
+            ] }),
+            status === "error" && errMsg && /* @__PURE__ */ jsx("div", { className: "audit-trail-export-error", role: "alert", children: errMsg }),
+            /* @__PURE__ */ jsxs("div", { className: "audit-trail-export-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "audit-trail-button",
+                  onClick: handleDownload,
+                  disabled: !format || status === "downloading",
+                  children: status === "downloading" ? "Downloading\u2026" : "Download"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "audit-trail-button audit-trail-button-secondary",
+                  onClick: onClose,
+                  disabled: status === "downloading",
+                  children: "Cancel"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function FormatCard({ format, selected, onSelect, title, body }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      className: selected ? "audit-trail-export-card audit-trail-export-card-selected" : "audit-trail-export-card",
+      onClick: onSelect,
+      "data-format": format,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-export-card-title", children: title }),
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-export-card-body", children: body })
+      ]
+    }
+  );
+}
+function FiltersToggle({ open, onOpenChange, activeCount }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "audit-trail-filter-toggle",
+      "aria-expanded": open,
+      onClick: () => onOpenChange(!open),
+      children: [
+        "Search",
+        activeCount > 0 && /* @__PURE__ */ jsx("span", { className: "audit-trail-filter-toggle-badge", children: activeCount }),
+        /* @__PURE__ */ jsx("span", { className: "audit-trail-filter-toggle-caret", "aria-hidden": "true", children: open ? "\u25B4" : "\u25BE" })
+      ]
+    }
+  );
+}
+function LiveIndicator({ active }) {
+  if (!active) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "audit-trail-live", "aria-label": "Live updates", title: "Live updates", children: [
+    /* @__PURE__ */ jsx("span", { className: "audit-trail-live-dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: "Live" })
+  ] });
+}
+function useClaims(token) {
+  return useMemo(() => parseClaims(token), [token]);
+}
+var NOOP_UNSUB = () => {
+};
+function useDistinctValues(opts) {
+  const [store, setStore] = useState(null);
+  useEffect(() => {
+    if (!opts.token) {
+      setStore(null);
+      return;
+    }
+    const s = createDistinctValuesStore({
+      apiBase: opts.apiBase,
+      token: opts.token,
+      tokenEndpoint: opts.tokenEndpoint,
+      onTokenExpired: opts.onTokenExpired
+    });
+    setStore(s);
+    return () => {
+      s.dispose();
+    };
+  }, [opts.token, opts.apiBase]);
+  const subscribe = useMemo(
+    () => (listener) => store?.subscribe(listener) ?? NOOP_UNSUB,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_DISTINCT_VALUES;
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+var EMPTY_STATE = {
+  events: [],
+  nextCursor: null,
+  status: "loading",
+  error: null
+};
+var NOOP_UNSUB2 = () => {
+};
+function useEvents(opts) {
+  const [store, setStore] = useState(null);
+  useEffect(() => {
+    if (!opts.token) {
+      setStore(null);
+      return;
+    }
+    const s = createEventsStore({
+      apiBase: opts.apiBase,
+      token: opts.token,
+      pageSize: opts.pageSize,
+      pollInterval: opts.pollInterval,
+      tokenEndpoint: opts.tokenEndpoint,
+      onTokenExpired: opts.onTokenExpired,
+      onError: opts.onError,
+      since: opts.since,
+      before: opts.before,
+      action: opts.action,
+      actor: opts.actor,
+      actorType: opts.actorType,
+      tenantId: opts.tenantId,
+      targetType: opts.targetType,
+      targetId: opts.targetId,
+      resultStatus: opts.resultStatus,
+      originIP: opts.originIP,
+      q: opts.q
+    });
+    setStore(s);
+    return () => {
+      s.dispose();
+    };
+  }, [
+    opts.token,
+    opts.apiBase,
+    opts.pageSize,
+    opts.pollInterval,
+    opts.since,
+    opts.before,
+    opts.action,
+    opts.actor,
+    opts.actorType,
+    opts.tenantId,
+    opts.targetType,
+    opts.targetId,
+    opts.resultStatus,
+    opts.originIP,
+    opts.q
+  ]);
+  const subscribe = useMemo(
+    () => (listener) => store?.subscribe(listener) ?? NOOP_UNSUB2,
+    [store]
+  );
+  const getSnapshot = () => store?.getSnapshot() ?? EMPTY_STATE;
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return {
+    events: state.events,
+    hasMore: state.nextCursor !== null,
+    status: state.status,
+    error: state.error,
+    loadMore: () => store?.loadMore(),
+    refresh: () => store?.refresh()
+  };
+}
+var DEFAULT_API_BASE = "https://api.everscribe.io/v1/embed";
+var DEFAULT_PAGE_SIZE = 25;
+var DEFAULT_POLL_INTERVAL_MS = 5e3;
+var DEFAULT_VISIBLE_COLUMNS = [
+  "occurred_at",
+  "action",
+  "actor",
+  "target",
+  "tenant_id",
+  "result"
+];
+function AuditTrail(props) {
+  const [bootstrap, setBootstrap] = useState(
+    () => props.token ? { phase: "ready", token: props.token } : { phase: "idle" }
+  );
+  const [retryCount, setRetryCount] = useState(0);
+  useEffect(() => {
+    if (props.token) setBootstrap({ phase: "ready", token: props.token });
+  }, [props.token]);
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  useEffect(() => {
+    if (propsRef.current.token) return;
+    if (!propsRef.current.tokenEndpoint && !propsRef.current.onTokenExpired) {
+      setBootstrap({ phase: "error", reason: "config" });
+      return;
+    }
+    setBootstrap({ phase: "loading" });
+    let cancelled = false;
+    void (async () => {
+      const t = await fetchTokenViaOpts({
+        tokenEndpoint: propsRef.current.tokenEndpoint,
+        onTokenExpired: propsRef.current.onTokenExpired
+      });
+      if (cancelled) return;
+      if (!t) {
+        setBootstrap({ phase: "error", reason: "fetch" });
+        return;
+      }
+      setBootstrap({ phase: "ready", token: t });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [props.token, retryCount]);
+  const activeToken = bootstrap.phase === "ready" ? bootstrap.token : null;
+  const claims = useClaims(activeToken);
+  const [selected, setSelected] = useState(null);
+  const [filters, setFilters] = useState(() => ({
+    range: props.defaultTimeRange ?? "all"
+  }));
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [exportOpen, setExportOpen] = useState(false);
+  const pollIntervalMs = props.pollInterval ?? DEFAULT_POLL_INTERVAL_MS;
+  const availableColumns = useMemo(() => {
+    if (claims?.columns && claims.columns.length > 0) return claims.columns;
+    return ALL_COLUMNS;
+  }, [claims]);
+  const [visibleSet, setVisibleSet] = useState(() => {
+    if (claims?.columns && claims.columns.length > 0) return new Set(claims.columns);
+    return new Set(DEFAULT_VISIBLE_COLUMNS);
+  });
+  const restoredKeyRef = useRef(null);
+  const claimsKey = claims?.sub ? `${claims.sub}:${claims.tenant_id || "_"}` : null;
+  useEffect(() => {
+    if (!claimsKey) return;
+    if (restoredKeyRef.current === claimsKey) return;
+    restoredKeyRef.current = claimsKey;
+    try {
+      const raw = globalThis.localStorage?.getItem(`audit-trail:cols:${claimsKey}`);
+      if (raw) {
+        const hidden = JSON.parse(raw);
+        if (Array.isArray(hidden)) {
+          setVisibleSet((prev) => {
+            const next = new Set(prev);
+            for (const c of hidden) {
+              if (typeof c === "string") next.delete(c);
+            }
+            return next;
+          });
+        }
+      }
+    } catch {
+    }
+    try {
+      const raw = globalThis.localStorage?.getItem(`audit-trail:filters:${claimsKey}`);
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (parsed && typeof parsed === "object") {
+          const range = parsed.range;
+          if (range === "24h" || range === "7d" || range === "30d" || range === "custom" || range === "all") {
+            setFilters(parsed);
+          }
+        }
+      }
+    } catch {
+    }
+  }, [claimsKey]);
+  useEffect(() => {
+    if (!claimsKey || restoredKeyRef.current !== claimsKey) return;
+    try {
+      const hidden = availableColumns.filter((c) => !visibleSet.has(c));
+      globalThis.localStorage?.setItem(`audit-trail:cols:${claimsKey}`, JSON.stringify(hidden));
+    } catch {
+    }
+  }, [visibleSet, claimsKey, availableColumns]);
+  useEffect(() => {
+    if (!claimsKey || restoredKeyRef.current !== claimsKey) return;
+    try {
+      globalThis.localStorage?.setItem(`audit-trail:filters:${claimsKey}`, JSON.stringify(filters));
+    } catch {
+    }
+  }, [filters, claimsKey]);
+  const visibleColumns = useMemo(
+    () => availableColumns.filter((c) => visibleSet.has(c)),
+    [availableColumns, visibleSet]
+  );
+  const toggleColumn = (col) => {
+    setVisibleSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(col)) next.delete(col);
+      else next.add(col);
+      return next;
+    });
+  };
+  const { since: filterSince, before: filterBefore } = useMemo(
+    () => resolveTimeBounds(filters),
+    [filters]
+  );
+  const livePollActive = pollIntervalMs > 0 && !filterBefore;
+  const distinct = useDistinctValues({
+    apiBase: props.apiBase ?? DEFAULT_API_BASE,
+    token: activeToken,
+    tokenEndpoint: props.tokenEndpoint,
+    onTokenExpired: props.onTokenExpired
+  });
+  const { events, hasMore, status, error, loadMore, refresh } = useEvents({
+    apiBase: props.apiBase ?? DEFAULT_API_BASE,
+    token: activeToken,
+    pageSize: props.pageSize ?? DEFAULT_PAGE_SIZE,
+    pollInterval: pollIntervalMs,
+    tokenEndpoint: props.tokenEndpoint,
+    onTokenExpired: props.onTokenExpired,
+    onError: props.onError,
+    since: filterSince,
+    before: filterBefore,
+    action: filters.action,
+    actor: filters.actor,
+    actorType: filters.actorType,
+    tenantId: filters.tenantId,
+    targetType: filters.targetType,
+    targetId: filters.targetId,
+    resultStatus: filters.resultStatus,
+    originIP: filters.originIP,
+    q: filters.q
+  });
+  const handleExportDownload = useCallback(
+    async (format) => {
+      if (!activeToken) throw new Error("Not authenticated.");
+      const apiBase = props.apiBase ?? DEFAULT_API_BASE;
+      const params = {
+        format,
+        since: filterSince,
+        before: filterBefore,
+        action: filters.action,
+        actor: filters.actor,
+        actorType: filters.actorType,
+        tenantId: filters.tenantId,
+        targetType: filters.targetType,
+        targetId: filters.targetId,
+        resultStatus: filters.resultStatus,
+        originIP: filters.originIP,
+        q: filters.q
+      };
+      const run = (token) => exportEvents({ apiBase, token, params });
+      let result;
+      try {
+        result = await run(activeToken);
+      } catch (err) {
+        if (err instanceof EmbedError && err.kind === "unauthorized") {
+          const refreshed = await fetchTokenViaOpts({
+            tokenEndpoint: props.tokenEndpoint,
+            onTokenExpired: props.onTokenExpired
+          });
+          if (!refreshed) throw new Error("Authentication failed.");
+          result = await run(refreshed);
+        } else if (err instanceof EmbedError) {
+          throw new Error(exportErrorMessage(err));
+        } else {
+          throw err;
+        }
+      }
+      triggerBrowserDownload(result.blob, result.filename);
+    },
+    [
+      activeToken,
+      props.apiBase,
+      props.tokenEndpoint,
+      props.onTokenExpired,
+      filterSince,
+      filterBefore,
+      filters.action,
+      filters.actor,
+      filters.actorType,
+      filters.tenantId,
+      filters.targetType,
+      filters.targetId,
+      filters.resultStatus,
+      filters.originIP,
+      filters.q
+    ]
+  );
+  const rootClassName = [
+    "audit-trail-root",
+    `audit-trail-theme-${props.theme ?? "light"}`,
+    props.className
+  ].filter(Boolean).join(" ");
+  if (bootstrap.phase === "error" && bootstrap.reason === "config") {
+    return /* @__PURE__ */ jsx("div", { className: rootClassName, style: props.style, children: /* @__PURE__ */ jsxs("div", { className: "audit-trail-state audit-trail-state-error", children: [
+      "Configure ",
+      /* @__PURE__ */ jsx("code", { children: "token" }),
+      ", ",
+      /* @__PURE__ */ jsx("code", { children: "tokenEndpoint" }),
+      ", or",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "onTokenExpired" }),
+      "."
+    ] }) });
+  }
+  if (bootstrap.phase === "error" && bootstrap.reason === "fetch") {
+    return /* @__PURE__ */ jsx("div", { className: rootClassName, style: props.style, children: /* @__PURE__ */ jsxs("div", { className: "audit-trail-state audit-trail-state-error", children: [
+      /* @__PURE__ */ jsx("span", { children: "Couldn\u2019t fetch token." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "audit-trail-button",
+          onClick: () => setRetryCount((c) => c + 1),
+          children: "Retry"
+        }
+      )
+    ] }) });
+  }
+  if (bootstrap.phase !== "ready") {
+    return /* @__PURE__ */ jsx("div", { className: rootClassName, style: props.style, children: /* @__PURE__ */ jsx("div", { className: "audit-trail-state audit-trail-state-loading", children: "Loading\u2026" }) });
+  }
+  if (claims === null) {
+    return /* @__PURE__ */ jsx("div", { className: rootClassName, style: props.style, children: /* @__PURE__ */ jsx("div", { className: "audit-trail-state audit-trail-state-error", children: "Invalid token." }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: props.style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "audit-trail-toolbar", children: [
+      /* @__PURE__ */ jsx(LiveIndicator, { active: livePollActive }),
+      /* @__PURE__ */ jsx("span", { className: "audit-trail-toolbar-spacer" }),
+      /* @__PURE__ */ jsx(
+        FiltersToggle,
+        {
+          open: filtersOpen,
+          onOpenChange: setFiltersOpen,
+          activeCount: countActiveColumnFilters(filters) + (filters.q ? parseQClauses(filters.q).length : 0)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "audit-trail-button",
+          onClick: () => setExportOpen(true),
+          children: "Export"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColumnPicker,
+        {
+          available: availableColumns,
+          visible: visibleSet,
+          onToggle: toggleColumn
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ActiveFilterChips, { value: filters, onChange: setFilters }),
+    filtersOpen && /* @__PURE__ */ jsx(
+      FiltersPanel,
+      {
+        value: filters,
+        onChange: setFilters,
+        distinct,
+        claims,
+        apiBase: props.apiBase ?? DEFAULT_API_BASE,
+        token: activeToken,
+        tokenEndpoint: props.tokenEndpoint,
+        onTokenExpired: props.onTokenExpired,
+        onApplied: () => setFiltersOpen(false)
+      }
+    ),
+    status === "loading" && events.length === 0 && /* @__PURE__ */ jsx("div", { className: "audit-trail-state audit-trail-state-loading", children: "Loading\u2026" }),
+    status === "expired" && /* @__PURE__ */ jsx("div", { className: "audit-trail-state audit-trail-state-error", children: "Session expired." }),
+    status === "error" && error && /* @__PURE__ */ jsxs("div", { className: "audit-trail-state audit-trail-state-error", children: [
+      /* @__PURE__ */ jsx("span", { children: errorMessage(error) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "audit-trail-button", onClick: refresh, children: "Retry" })
+    ] }),
+    status === "ok" && events.length === 0 && /* @__PURE__ */ jsx("div", { className: "audit-trail-state audit-trail-state-empty", children: "No events match." }),
+    events.length > 0 && visibleColumns.length === 0 && /* @__PURE__ */ jsx("div", { className: "audit-trail-state audit-trail-state-empty", children: "No columns selected." }),
+    events.length > 0 && visibleColumns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        EventTable,
+        {
+          events,
+          visibleColumns,
+          onRowClick: setSelected
+        }
+      ),
+      hasMore && /* @__PURE__ */ jsx("button", { type: "button", className: "audit-trail-button audit-trail-load-more", onClick: loadMore, children: "Load more" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ExportModal,
+      {
+        open: exportOpen,
+        onClose: () => setExportOpen(false),
+        onDownload: handleExportDownload
+      }
+    ),
+    selected && /* @__PURE__ */ jsx(
+      EventDetail,
+      {
+        event: selected,
+        onClose: () => setSelected(null),
+        theme: props.theme ?? "light"
+      },
+      selected.id
+    )
+  ] });
+}
+function resolveTimeBounds(filters) {
+  switch (filters.range) {
+    case "24h":
+      return { since: relativeIso(24 * 60 * 60 * 1e3) };
+    case "7d":
+      return { since: relativeIso(7 * 24 * 60 * 60 * 1e3) };
+    case "30d":
+      return { since: relativeIso(30 * 24 * 60 * 60 * 1e3) };
+    case "custom":
+      return {
+        since: localToIso(filters.since),
+        before: localToIso(filters.before)
+      };
+    case "all":
+    default:
+      return {};
+  }
+}
+function relativeIso(ms) {
+  return new Date(Date.now() - ms).toISOString();
+}
+function localToIso(value) {
+  if (!value) return void 0;
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return void 0;
+  return d.toISOString();
+}
+function triggerBrowserDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function exportErrorMessage(err) {
+  switch (err.kind) {
+    case "rate_limited":
+      return "Too many requests. Try again in a moment.";
+    case "bad_request":
+      return err.message || "Bad request.";
+    case "server":
+      return "Server error. Please try again.";
+    case "network":
+      return "Network error. Check your connection.";
+    case "not_found":
+      return "Not found.";
+    case "unauthorized":
+      return "Authentication failed.";
+  }
+}
+function errorMessage(err) {
+  switch (err.kind) {
+    case "unauthorized":
+      return "Authentication failed.";
+    case "not_found":
+      return "Not found.";
+    case "rate_limited":
+      return "Too many requests. Please slow down.";
+    case "bad_request":
+      return err.message || "Bad request.";
+    case "server":
+      return "Server error. Please try again.";
+    case "network":
+      return "Network error. Check your connection.";
+  }
+}
+
+export { AuditTrail };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map