@everscribe/components-element 0.1.0

package/dist/index.js

@@ -0,0 +1,2253 @@
+import { fetchTokenViaOpts, parseClaims, createEventsStore, createDistinctValuesStore, RELATIVE_TIME_TICK_MS, formatTimeCell, EmbedError, ALL_COLUMNS, generateNLPFilters, COLUMN_LABELS, exportEvents, hasParseableDiff, renderDiff } from '@everscribe/components-core';
+
+// src/AuditTrailElement.ts
+
+// src/dom.ts
+function h(tag, attrs, ...children) {
+  const el = document.createElement(tag);
+  if (attrs) {
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v == null || v === false) continue;
+      if (k === "class") el.className = String(v);
+      else if (k === "html") el.innerHTML = String(v);
+      else el.setAttribute(k, String(v));
+    }
+  }
+  for (const c of children.flat()) {
+    if (c == null || c === false) continue;
+    el.appendChild(typeof c === "object" ? c : document.createTextNode(String(c)));
+  }
+  return el;
+}
+var COPY_ICON_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+var CHECK_ICON_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+function openEventDetail(opts) {
+  const { event, theme, onClose } = opts;
+  let tab = "raw";
+  let copied = false;
+  const showDiff = hasParseableDiff(event.change);
+  const diff = showDiff ? renderDiff(event.change) : { lines: [] };
+  const rawJson = JSON.stringify(event, null, 2);
+  const highlightedJson = highlightJSON(rawJson);
+  const metadataRows = buildMetadataRows(event.metadata);
+  const showMetadata = metadataRows.length > 0;
+  const portal = h("div", { class: `audit-trail-portal audit-trail-theme-${theme}` });
+  const closeBtn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-inspect-close",
+      "aria-label": "Close"
+    },
+    "\xD7"
+  );
+  const panelContainer = h("div");
+  const renderPanel = () => {
+    panelContainer.replaceChildren(buildPanel());
+  };
+  const buildPanel = () => {
+    if (tab === "diff" && showDiff) {
+      return h(
+        "div",
+        { class: "audit-trail-inspect-panel" },
+        renderDiffTable(diff.lines)
+      );
+    }
+    if (tab === "metadata" && showMetadata) {
+      return h(
+        "div",
+        { class: "audit-trail-inspect-panel" },
+        renderMetadataTable(metadataRows)
+      );
+    }
+    const codeBlock = h(
+      "pre",
+      { class: "audit-trail-code-block" },
+      h("code", { html: highlightedJson })
+    );
+    const copyBtn = h(
+      "button",
+      {
+        type: "button",
+        class: "audit-trail-copy-button",
+        "aria-label": copied ? "Copied" : "Copy to clipboard",
+        title: copied ? "Copied" : "Copy to clipboard",
+        html: copied ? CHECK_ICON_SVG : COPY_ICON_SVG
+      }
+    );
+    copyBtn.addEventListener("click", () => {
+      void (async () => {
+        try {
+          await navigator.clipboard.writeText(rawJson);
+          copied = true;
+          renderPanel();
+          setTimeout(() => {
+            copied = false;
+            if (!disposed && tab === "raw") renderPanel();
+          }, 1500);
+        } catch {
+        }
+      })();
+    });
+    return h(
+      "div",
+      { class: "audit-trail-inspect-panel" },
+      h(
+        "div",
+        { class: "audit-trail-code-block-wrap" },
+        codeBlock,
+        copyBtn
+      )
+    );
+  };
+  const subtitle = h(
+    "p",
+    { class: "audit-trail-inspect-subtitle" },
+    h(
+      "span",
+      { class: "audit-trail-inspect-subtitle-line" },
+      h("code", null, event.action || "-")
+    ),
+    h(
+      "span",
+      { class: "audit-trail-inspect-subtitle-line" },
+      formatHeaderTimestamp(event.occurred_at)
+    ),
+    h(
+      "span",
+      { class: "audit-trail-inspect-subtitle-line" },
+      h("code", null, event.id)
+    )
+  );
+  const tabs = showDiff || showMetadata ? renderTabs(tab, showDiff, showMetadata, (next) => {
+    tab = next;
+    setSelectedTab(tabsEl, next);
+    renderPanel();
+  }) : null;
+  const tabsEl = tabs;
+  const modalChildren = [
+    closeBtn,
+    h(
+      "h2",
+      { id: "audit-trail-inspect-title", class: "audit-trail-inspect-title" },
+      "Inspect Event"
+    ),
+    subtitle
+  ];
+  if (tabs) modalChildren.push(tabs);
+  modalChildren.push(panelContainer);
+  const modal = h(
+    "div",
+    {
+      class: "audit-trail-inspect-modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "audit-trail-inspect-title"
+    },
+    ...modalChildren
+  );
+  modal.addEventListener("mousedown", (e) => e.stopPropagation());
+  const backdrop = h("div", { class: "audit-trail-inspect-backdrop" }, modal);
+  portal.appendChild(backdrop);
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    document.removeEventListener("keydown", onKey);
+    portal.remove();
+  };
+  const userClose = () => {
+    if (disposed) return;
+    dispose();
+    onClose();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") userClose();
+  };
+  closeBtn.addEventListener("click", userClose);
+  backdrop.addEventListener("mousedown", userClose);
+  document.addEventListener("keydown", onKey);
+  document.body.appendChild(portal);
+  renderPanel();
+  queueMicrotask(() => {
+    if (!disposed) closeBtn.focus();
+  });
+  return dispose;
+}
+function renderTabs(initial, showDiff, showMetadata, onSelect) {
+  const make = (key, label) => {
+    const btn = h(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        class: initial === key ? "audit-trail-inspect-tab audit-trail-inspect-tab-active" : "audit-trail-inspect-tab",
+        "aria-selected": initial === key ? "true" : "false",
+        "data-tab": key
+      },
+      label
+    );
+    btn.addEventListener("click", () => onSelect(key));
+    return btn;
+  };
+  const tabs = [make("raw", "Raw")];
+  if (showDiff) tabs.push(make("diff", "Diff"));
+  if (showMetadata) tabs.push(make("metadata", "Metadata"));
+  return h(
+    "div",
+    { class: "audit-trail-inspect-tabs", role: "tablist", "aria-label": "View" },
+    ...tabs
+  );
+}
+function setSelectedTab(tabsEl, tab) {
+  if (!tabsEl) return;
+  for (const child of Array.from(tabsEl.children)) {
+    if (!(child instanceof HTMLElement)) continue;
+    const isMatch = child.dataset.tab === tab;
+    child.className = isMatch ? "audit-trail-inspect-tab audit-trail-inspect-tab-active" : "audit-trail-inspect-tab";
+    child.setAttribute("aria-selected", isMatch ? "true" : "false");
+  }
+}
+function renderDiffTable(lines) {
+  const rows = lines.map(
+    (line) => h(
+      "tr",
+      null,
+      h(
+        "td",
+        {
+          class: `audit-trail-diff-cell audit-trail-diff-before-${line.beforeKind || "blank"}`
+        },
+        h("pre", null, line.before)
+      ),
+      h(
+        "td",
+        {
+          class: `audit-trail-diff-cell audit-trail-diff-after-${line.afterKind || "blank"}`
+        },
+        h("pre", null, line.after)
+      )
+    )
+  );
+  return h(
+    "div",
+    { class: "audit-trail-diff-wrap" },
+    h(
+      "table",
+      { class: "audit-trail-diff-table" },
+      h(
+        "thead",
+        null,
+        h("tr", null, h("th", null, "Before"), h("th", null, "After"))
+      ),
+      h("tbody", null, ...rows)
+    )
+  );
+}
+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 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 renderMetadataTable(rows) {
+  return h(
+    "table",
+    { class: "audit-trail-metadata-kv-table" },
+    h(
+      "thead",
+      null,
+      h(
+        "tr",
+        null,
+        h("th", { class: "audit-trail-md-col-key" }, "Key"),
+        h("th", { class: "audit-trail-md-col-type" }, "Type"),
+        h("th", { class: "audit-trail-md-col-value" }, "Value")
+      )
+    ),
+    h(
+      "tbody",
+      null,
+      ...rows.map(
+        (r) => h(
+          "tr",
+          null,
+          h("td", { class: "audit-trail-md-col-key" }, h("code", null, r.key)),
+          h(
+            "td",
+            { class: "audit-trail-md-col-type" },
+            h("span", { class: "audit-trail-muted" }, r.type)
+          ),
+          h("td", { class: "audit-trail-md-col-value" }, h("code", null, r.value))
+        )
+      )
+    )
+  );
+}
+
+// src/exportModal.ts
+function openExportModal(opts) {
+  const { theme, onDownload, onClose } = opts;
+  let format = null;
+  let status = "idle";
+  let errMsg = null;
+  const csvCard = renderFormatCard(
+    "csv",
+    "CSV",
+    "Spreadsheet-friendly. Common fields are columns; nested fields (origin, metadata, change) are JSON in single columns.",
+    () => selectFormat("csv")
+  );
+  const jsonCard = renderFormatCard(
+    "json",
+    "JSON",
+    "Full event objects preserving nested structure. Same shape the API returns.",
+    () => selectFormat("json")
+  );
+  const errorSlot = h("div", { class: "audit-trail-export-error-slot" });
+  const downloadBtn = h(
+    "button",
+    { type: "button", class: "audit-trail-button" },
+    "Download"
+  );
+  downloadBtn.disabled = true;
+  const cancelBtn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-button audit-trail-button-secondary"
+    },
+    "Cancel"
+  );
+  const modal = h(
+    "div",
+    {
+      class: "audit-trail-export-modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "audit-trail-export-title"
+    },
+    h(
+      "h2",
+      { id: "audit-trail-export-title", class: "audit-trail-export-title" },
+      "Export events"
+    ),
+    h(
+      "p",
+      { class: "audit-trail-export-blurb" },
+      "The current filters and time range are applied. Capped at 100,000 rows - narrow the filters or time window if you hit it."
+    ),
+    h("div", { class: "audit-trail-export-options" }, csvCard, jsonCard),
+    errorSlot,
+    h("div", { class: "audit-trail-export-actions" }, downloadBtn, cancelBtn)
+  );
+  const backdrop = h(
+    "div",
+    { class: "audit-trail-export-backdrop", role: "presentation" },
+    modal
+  );
+  const portal = h(
+    "div",
+    { class: `audit-trail-portal audit-trail-theme-${theme}` },
+    backdrop
+  );
+  const selectFormat = (fmt) => {
+    format = fmt;
+    setSelected(csvCard, fmt === "csv");
+    setSelected(jsonCard, fmt === "json");
+    refreshButtons();
+  };
+  const refreshButtons = () => {
+    downloadBtn.disabled = !format || status === "downloading";
+    downloadBtn.textContent = status === "downloading" ? "Downloading\u2026" : "Download";
+    cancelBtn.disabled = status === "downloading";
+    if (status === "error" && errMsg) {
+      errorSlot.replaceChildren(
+        h(
+          "div",
+          { class: "audit-trail-export-error", role: "alert" },
+          errMsg
+        )
+      );
+    } else {
+      errorSlot.replaceChildren();
+    }
+  };
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    document.removeEventListener("keydown", onKey);
+    portal.remove();
+  };
+  const userClose = () => {
+    if (disposed) return;
+    if (status === "downloading") return;
+    dispose();
+    onClose();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") userClose();
+  };
+  cancelBtn.addEventListener("click", userClose);
+  backdrop.addEventListener("click", (e) => {
+    if (e.target !== backdrop) return;
+    userClose();
+  });
+  document.addEventListener("keydown", onKey);
+  downloadBtn.addEventListener("click", () => {
+    if (!format || status === "downloading") return;
+    status = "downloading";
+    errMsg = null;
+    refreshButtons();
+    void (async () => {
+      try {
+        await onDownload(format);
+        if (disposed) return;
+        dispose();
+      } catch (err) {
+        if (disposed) return;
+        status = "error";
+        errMsg = err instanceof Error ? err.message : "Export failed.";
+        refreshButtons();
+      }
+    })();
+  });
+  document.body.appendChild(portal);
+  return dispose;
+}
+function renderFormatCard(format, title, body, onSelect) {
+  const btn = h(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": "false",
+      class: "audit-trail-export-card",
+      "data-format": format
+    },
+    h("span", { class: "audit-trail-export-card-title" }, title),
+    h("span", { class: "audit-trail-export-card-body" }, body)
+  );
+  btn.addEventListener("click", onSelect);
+  return btn;
+}
+function setSelected(card, selected) {
+  card.className = selected ? "audit-trail-export-card audit-trail-export-card-selected" : "audit-trail-export-card";
+  card.setAttribute("aria-checked", selected ? "true" : "false");
+}
+
+// src/filters.ts
+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 renderFiltersPanel(opts) {
+  const { claims, activeTab } = opts;
+  const allowNLP = !!claims?.allow_nlp;
+  const allowDSL = !!claims?.allow_dsl_input;
+  const tabBar = renderTabBar({ allowNLP, allowDSL, activeTab, onTabChange: opts.onTabChange });
+  let body;
+  if (activeTab === "ai" && allowNLP) {
+    body = renderAITabPanel(opts);
+  } else if (activeTab === "query" && allowDSL) {
+    body = renderQueryTabPanel(opts);
+  } else {
+    body = renderFiltersTabPanel(opts);
+  }
+  return h("div", { class: "audit-trail-filter-panel" }, tabBar, body);
+}
+function renderTabBar(opts) {
+  const tabs = [];
+  const make = (key, label) => {
+    const active = opts.activeTab === key;
+    const btn = h(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": active ? "true" : "false",
+        class: active ? "audit-trail-filter-mode audit-trail-filter-mode-selected" : "audit-trail-filter-mode"
+      },
+      label
+    );
+    btn.addEventListener("click", () => opts.onTabChange(key));
+    return btn;
+  };
+  if (opts.allowNLP) tabs.push(make("ai", "Prompt"));
+  tabs.push(make("filters", "Filters"));
+  if (opts.allowDSL) tabs.push(make("query", "Query"));
+  return h(
+    "div",
+    { class: "audit-trail-filter-modes", role: "tablist", "aria-label": "Filter mode" },
+    ...tabs
+  );
+}
+function renderAITabPanel(opts) {
+  const { value, nlpState, onNLPSubmit } = opts;
+  const input = h("input", {
+    type: "text",
+    id: "audit-trail-nlp-input",
+    class: "audit-trail-nlp-input",
+    placeholder: "e.g. failed logins last 24 hours",
+    maxlength: 500,
+    "aria-label": "Natural-language filter query",
+    value: value.nlpQ ?? ""
+  });
+  input.value = value.nlpQ ?? "";
+  if (nlpState.phase === "loading") input.disabled = true;
+  const submit = () => {
+    const q = input.value.trim();
+    if (!q) return;
+    onNLPSubmit(q);
+  };
+  const label = h(
+    "label",
+    { class: "audit-trail-nlp-label", for: "audit-trail-nlp-input" },
+    "Ask in plain English",
+    h(
+      "span",
+      {
+        class: "audit-trail-badge audit-trail-badge-info",
+        title: "Beta"
+      },
+      "Beta"
+    )
+  );
+  const children = [label, input];
+  if (value.q && value.nlpQ) {
+    children.push(
+      h(
+        "div",
+        { class: "audit-trail-nlp-banner" },
+        h(
+          "p",
+          null,
+          h("strong", null, "Translated to:"),
+          " ",
+          h("code", { class: "audit-trail-nlp-translated" }, value.q)
+        )
+      )
+    );
+  }
+  if (nlpState.phase === "error") {
+    children.push(
+      h("div", { class: "audit-trail-error" }, nlpErrorMessage(nlpState.reason))
+    );
+  }
+  if (value.nlpUnsupported && value.nlpUnsupported.length > 0) {
+    children.push(renderUnsupportedList(value.nlpUnsupported));
+  }
+  const btn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-button audit-trail-button-secondary"
+    }
+  );
+  if (nlpState.phase === "loading") {
+    btn.disabled = true;
+    btn.appendChild(h("span", { class: "audit-trail-button-spinner" }));
+    btn.appendChild(document.createTextNode(" Translating\u2026"));
+  } else {
+    btn.textContent = "Search";
+  }
+  const updateBtn = () => {
+    if (nlpState.phase === "loading") return;
+    btn.disabled = input.value.trim() === "";
+  };
+  input.addEventListener("input", updateBtn);
+  updateBtn();
+  btn.addEventListener("click", submit);
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+  });
+  children.push(h("div", { class: "audit-trail-filter-actions" }, btn));
+  return h("form", { class: "audit-trail-nlp-form" }, ...children);
+}
+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 renderUnsupportedList(items) {
+  const ul = h(
+    "ul",
+    null,
+    ...items.map((u) => h("li", null, `Couldn't apply: ${u}`))
+  );
+  return h(
+    "div",
+    { class: "audit-trail-error audit-trail-nlp-unsupported" },
+    ul
+  );
+}
+function renderFiltersTabPanel(opts) {
+  const { value, distinct, onChange, onApplied } = opts;
+  let actionSelect;
+  let actorTypeSelect;
+  let targetTypeSelect;
+  let tenantSelect = null;
+  let resultSelect = null;
+  let actorInput;
+  let targetIDInput;
+  let originIPInput;
+  let sinceInput = null;
+  let beforeInput = null;
+  const timePresets = h(
+    "div",
+    {
+      class: "audit-trail-filter-tabs",
+      role: "tablist",
+      "aria-label": "Time range"
+    },
+    ...TIME_PRESETS.map((p) => {
+      const selected = value.range === p.key;
+      const btn = h(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": selected ? "true" : "false",
+          class: selected ? "audit-trail-filter-tab audit-trail-filter-tab-selected" : "audit-trail-filter-tab"
+        },
+        p.label
+      );
+      btn.addEventListener("click", () => {
+        if (p.key === "custom") {
+          onChange({ ...value, range: p.key });
+        } else {
+          onChange({ ...value, range: p.key, since: void 0, before: void 0 });
+        }
+      });
+      return btn;
+    })
+  );
+  let customRow = null;
+  if (value.range === "custom") {
+    sinceInput = buildDateInput(value.since ?? "");
+    beforeInput = buildDateInput(value.before ?? "");
+    customRow = h(
+      "div",
+      { class: "audit-trail-filter-row" },
+      h(
+        "label",
+        { class: "audit-trail-filter-field" },
+        h("span", { class: "audit-trail-filter-field-label" }, "From"),
+        sinceInput
+      ),
+      h(
+        "label",
+        { class: "audit-trail-filter-field" },
+        h("span", { class: "audit-trail-filter-field-label" }, "To"),
+        beforeInput
+      )
+    );
+  }
+  actionSelect = buildSelect("Action", "All actions", value.action ?? "", distinct.actions);
+  actorTypeSelect = buildSelect(
+    "Actor type",
+    "All actor types",
+    value.actorType ?? "",
+    distinct.actorTypes
+  );
+  targetTypeSelect = buildSelect(
+    "Target type",
+    "All target types",
+    value.targetType ?? "",
+    distinct.targetTypes
+  );
+  const dropdownChildren = [actionSelect, actorTypeSelect, targetTypeSelect];
+  if (distinct.tenants.length > 0) {
+    tenantSelect = buildSelect(
+      "Tenant",
+      "All tenants",
+      value.tenantId ?? "",
+      distinct.tenants
+    );
+    dropdownChildren.push(tenantSelect);
+  }
+  if (distinct.resultStatuses.length > 0) {
+    resultSelect = buildSelect(
+      "Result",
+      "All results",
+      value.resultStatus ?? "",
+      distinct.resultStatuses
+    );
+    dropdownChildren.push(resultSelect);
+  }
+  const dropdownRow = h(
+    "div",
+    { class: "audit-trail-filter-row" },
+    ...dropdownChildren
+  );
+  actorInput = buildTextInput(
+    value.actor ?? "",
+    "Actor (id, name, email)",
+    "audit-trail-filter-input audit-trail-filter-actor-input"
+  );
+  targetIDInput = buildTextInput(
+    value.targetId ?? "",
+    "Target ID",
+    "audit-trail-filter-input audit-trail-filter-wide-input"
+  );
+  originIPInput = buildTextInput(
+    value.originIP ?? "",
+    "Origin IP",
+    "audit-trail-filter-input audit-trail-filter-wide-input"
+  );
+  const textRowActor = h("div", { class: "audit-trail-filter-row" }, actorInput);
+  const textRowTarget = h("div", { class: "audit-trail-filter-row" }, targetIDInput);
+  const textRowOrigin = h("div", { class: "audit-trail-filter-row" }, originIPInput);
+  const addBtn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-button audit-trail-button-secondary"
+    },
+    "Add filters"
+  );
+  const norm = (s) => s === "" ? void 0 : s;
+  const computeDirty = () => {
+    if (norm(actionSelect.value) !== value.action) return true;
+    if (norm(actorTypeSelect.value) !== value.actorType) return true;
+    if (norm(targetTypeSelect.value) !== value.targetType) return true;
+    if (tenantSelect && norm(tenantSelect.value) !== value.tenantId) return true;
+    if (resultSelect && norm(resultSelect.value) !== value.resultStatus) return true;
+    if (norm(actorInput.value) !== value.actor) return true;
+    if (norm(targetIDInput.value) !== value.targetId) return true;
+    if (norm(originIPInput.value) !== value.originIP) return true;
+    if (value.range === "custom") {
+      if (norm(sinceInput?.value ?? "") !== value.since) return true;
+      if (norm(beforeInput?.value ?? "") !== value.before) return true;
+    }
+    return false;
+  };
+  const refreshDirty = () => {
+    addBtn.disabled = !computeDirty();
+  };
+  refreshDirty();
+  for (const el of [
+    actionSelect,
+    actorTypeSelect,
+    targetTypeSelect,
+    tenantSelect,
+    resultSelect
+  ].filter(Boolean)) {
+    el.addEventListener("change", refreshDirty);
+  }
+  for (const el of [actorInput, targetIDInput, originIPInput].filter(
+    Boolean
+  )) {
+    el.addEventListener("input", refreshDirty);
+  }
+  if (sinceInput) sinceInput.addEventListener("input", refreshDirty);
+  if (beforeInput) beforeInput.addEventListener("input", refreshDirty);
+  addBtn.addEventListener("click", () => {
+    onChange({
+      ...value,
+      action: norm(actionSelect.value),
+      actorType: norm(actorTypeSelect.value),
+      targetType: norm(targetTypeSelect.value),
+      tenantId: tenantSelect ? norm(tenantSelect.value) : value.tenantId,
+      resultStatus: resultSelect ? norm(resultSelect.value) : value.resultStatus,
+      actor: norm(actorInput.value),
+      targetId: norm(targetIDInput.value),
+      originIP: norm(originIPInput.value),
+      since: value.range === "custom" ? norm(sinceInput?.value ?? "") : value.since,
+      before: value.range === "custom" ? norm(beforeInput?.value ?? "") : value.before,
+      q: void 0,
+      nlpQ: void 0,
+      nlpExplanation: void 0,
+      nlpUnsupported: void 0
+    });
+    onApplied?.();
+  });
+  const addBtnRow = h("div", { class: "audit-trail-filter-actions" }, addBtn);
+  const metaSection = renderMetadataFilterSection(value, distinct, onChange, onApplied);
+  const children = [timePresets];
+  if (customRow) children.push(customRow);
+  children.push(
+    dropdownRow,
+    textRowActor,
+    textRowTarget,
+    textRowOrigin,
+    addBtnRow,
+    metaSection
+  );
+  return h("div", { class: "audit-trail-filter-tab-panel" }, ...children);
+}
+function buildSelect(ariaLabel, emptyLabel, selected, options) {
+  const sel = h("select", {
+    class: "audit-trail-filter-select",
+    "aria-label": ariaLabel
+  });
+  const empty = h("option", { value: "" }, emptyLabel);
+  if (selected === "") empty.selected = true;
+  sel.appendChild(empty);
+  for (const opt of options) {
+    const o = h("option", { value: opt }, opt);
+    if (opt === selected) o.selected = true;
+    sel.appendChild(o);
+  }
+  return sel;
+}
+function buildTextInput(value, placeholder, className) {
+  const input = h("input", {
+    type: "text",
+    class: className,
+    placeholder,
+    value
+  });
+  input.value = value;
+  return input;
+}
+function buildDateInput(value) {
+  const input = h("input", {
+    type: "datetime-local",
+    class: "audit-trail-filter-input",
+    value
+  });
+  input.value = value;
+  return input;
+}
+function renderMetadataFilterSection(value, distinct, onChange, onApplied) {
+  let variant = "metadata";
+  const typeSelect = h("select", null);
+  for (const [val, label] of [
+    ["metadata", "Metadata key/value"],
+    ["change-field", "Change: a field changed"],
+    ["change-before", "Change: previous value (before)"],
+    ["change-after", "Change: new value (after)"]
+  ]) {
+    const o = h("option", { value: val }, label);
+    typeSelect.appendChild(o);
+  }
+  typeSelect.value = variant;
+  const mdKey = h("input", {
+    type: "text",
+    placeholder: "e.g. environment",
+    list: "audit-trail-mdk-key-list"
+  });
+  const mdKeyList = h("datalist", { id: "audit-trail-mdk-key-list" });
+  for (const k of distinct.metadataKeys) {
+    mdKeyList.appendChild(
+      h("option", { value: k.key }, `${k.observed_type} \xB7 ${k.event_count}`)
+    );
+  }
+  const mdOp = h("select", null);
+  for (const [val, label] of [
+    ["eq", "equals"],
+    ["neq", "not equal"],
+    ["contains", "contains"],
+    ["gt", "greater than"],
+    ["gte", "greater or equal"],
+    ["lt", "less than"],
+    ["lte", "less or equal"],
+    ["between", "between"]
+  ]) {
+    mdOp.appendChild(h("option", { value: val }, label));
+  }
+  const mdValue = h("input", {
+    type: "text",
+    placeholder: "e.g. prod"
+  });
+  const mdValue2 = h("input", {
+    type: "text",
+    placeholder: "e.g. 1000"
+  });
+  const cfField = h("input", {
+    type: "text",
+    placeholder: "e.g. email",
+    list: "audit-trail-cf-field-list"
+  });
+  const cfFieldList = h("datalist", { id: "audit-trail-cf-field-list" });
+  for (const c of distinct.changeFields) {
+    cfFieldList.appendChild(h("option", { value: c.field }, `${c.event_count} events`));
+  }
+  const cbField = h("input", {
+    type: "text",
+    placeholder: "e.g. role",
+    list: "audit-trail-cf-field-list"
+  });
+  const cbValue = h("input", {
+    type: "text",
+    placeholder: "e.g. user"
+  });
+  const caField = h("input", {
+    type: "text",
+    placeholder: "e.g. role",
+    list: "audit-trail-cf-field-list"
+  });
+  const caValue = h("input", {
+    type: "text",
+    placeholder: "e.g. admin"
+  });
+  const metadataVariant = h(
+    "div",
+    { "data-variant": "metadata" },
+    addFilterRow("Key", mdKey, mdKeyList),
+    addFilterRow("Operator", mdOp),
+    addFilterRow("Value", mdValue),
+    addFilterRow("Upper bound", mdValue2)
+  );
+  const changeFieldVariant = h(
+    "div",
+    { "data-variant": "change-field" },
+    addFilterRow("Field", cfField, cfFieldList)
+  );
+  const changeBeforeVariant = h(
+    "div",
+    { "data-variant": "change-before" },
+    addFilterRow("Field", cbField),
+    addFilterRow("Previous value", cbValue)
+  );
+  const changeAfterVariant = h(
+    "div",
+    { "data-variant": "change-after" },
+    addFilterRow("Field", caField),
+    addFilterRow("New value", caValue)
+  );
+  const variants = [
+    metadataVariant,
+    changeFieldVariant,
+    changeBeforeVariant,
+    changeAfterVariant
+  ];
+  const errorEl = h("p", { class: "audit-trail-add-filter-error" }, "");
+  errorEl.style.display = "none";
+  const addBtn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-button audit-trail-button-secondary"
+    },
+    "Add filter"
+  );
+  const mdValue2Row = metadataVariant.children[3];
+  mdValue2Row.style.display = "none";
+  const refresh = () => {
+    const compiled = compileMetaClause({
+      variant,
+      mdKey: mdKey.value,
+      mdOp: mdOp.value,
+      mdValue: mdValue.value,
+      mdValue2: mdValue2.value,
+      cfField: cfField.value,
+      cbField: cbField.value,
+      cbValue: cbValue.value,
+      caField: caField.value,
+      caValue: caValue.value
+    });
+    addBtn.disabled = compiled.dsl === null;
+    if (compiled.error && /Both bounds/.test(compiled.error)) {
+      errorEl.textContent = compiled.error;
+      errorEl.style.display = "";
+    } else {
+      errorEl.textContent = "";
+      errorEl.style.display = "none";
+    }
+  };
+  const showVariant = (v) => {
+    variant = v;
+    for (const el of variants) {
+      el.style.display = el.dataset.variant === v ? "" : "none";
+    }
+    refresh();
+  };
+  showVariant("metadata");
+  typeSelect.addEventListener("change", () => showVariant(typeSelect.value));
+  mdOp.addEventListener("change", () => {
+    mdValue2Row.style.display = mdOp.value === "between" ? "" : "none";
+    refresh();
+  });
+  for (const el of [
+    mdKey,
+    mdValue,
+    mdValue2,
+    cfField,
+    cbField,
+    cbValue,
+    caField,
+    caValue
+  ]) {
+    el.addEventListener("input", refresh);
+  }
+  addBtn.addEventListener("click", () => {
+    const compiled = compileMetaClause({
+      variant,
+      mdKey: mdKey.value,
+      mdOp: mdOp.value,
+      mdValue: mdValue.value,
+      mdValue2: mdValue2.value,
+      cfField: cfField.value,
+      cbField: cbField.value,
+      cbValue: cbValue.value,
+      caField: caField.value,
+      caValue: caValue.value
+    });
+    if (!compiled.dsl) return;
+    onChange({
+      ...value,
+      q: compiled.dsl,
+      nlpQ: void 0,
+      nlpExplanation: void 0,
+      nlpUnsupported: void 0
+    });
+    onApplied?.();
+  });
+  refresh();
+  return h(
+    "div",
+    { class: "audit-trail-add-filter-inline" },
+    h("h3", { class: "audit-trail-add-filter-heading" }, "Metadata and Changed Fields"),
+    addFilterRow("Filter type", typeSelect),
+    metadataVariant,
+    changeFieldVariant,
+    changeBeforeVariant,
+    changeAfterVariant,
+    errorEl,
+    h(
+      "div",
+      { class: "audit-trail-filter-actions audit-trail-add-filter-actions" },
+      addBtn
+    )
+  );
+}
+function addFilterRow(label, ...children) {
+  return h(
+    "label",
+    { class: "audit-trail-add-filter-row" },
+    h("span", { class: "audit-trail-add-filter-label" }, label),
+    ...children
+  );
+}
+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 renderQueryTabPanel(opts) {
+  const { value, onChange } = opts;
+  const input = h("input", {
+    type: "text",
+    id: "audit-trail-query-input",
+    class: "audit-trail-query-input",
+    placeholder: "e.g. action:user.login AND result.status:!ok",
+    "aria-label": "Advanced query (DSL)",
+    spellcheck: "false",
+    value: value.q ?? ""
+  });
+  input.value = value.q ?? "";
+  const label = h(
+    "label",
+    { class: "audit-trail-query-label", for: "audit-trail-query-input" },
+    "Query ",
+    h(
+      "a",
+      {
+        href: "https://everscribe.io/docs",
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      "(see docs)"
+    )
+  );
+  const btn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-button audit-trail-button-secondary"
+    },
+    "Search"
+  );
+  const refresh = () => {
+    btn.disabled = input.value.trim() === (value.q ?? "");
+  };
+  refresh();
+  input.addEventListener("input", refresh);
+  const submit = () => {
+    const next = input.value.trim() || void 0;
+    if (next === value.q) return;
+    onChange({
+      ...value,
+      q: next,
+      nlpQ: void 0,
+      nlpExplanation: void 0,
+      nlpUnsupported: void 0
+    });
+  };
+  btn.addEventListener("click", submit);
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+  });
+  return h(
+    "form",
+    { class: "audit-trail-query-form" },
+    label,
+    input,
+    h("div", { class: "audit-trail-filter-actions" }, btn)
+  );
+}
+function renderFilterChips(opts) {
+  const { value, onChange } = opts;
+  const chips = [];
+  const colChip = (field, label, raw) => {
+    if (!raw) return;
+    chips.push({
+      label: `${label}: ${raw}`,
+      remove: () => 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,
+        remove: () => {
+          const nextQ = removeClauseFromQ(value.q, clause.raw);
+          onChange({
+            ...value,
+            q: nextQ,
+            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 chipsRow = h(
+    "div",
+    { class: "audit-trail-filter-chips" },
+    ...chips.map((c) => {
+      const btn = h(
+        "button",
+        {
+          type: "button",
+          class: "audit-trail-filter-chip",
+          title: "Remove this filter",
+          "aria-label": `Remove filter: ${c.label}`
+        },
+        h("span", null, c.label),
+        h("span", { "aria-hidden": "true", class: "audit-trail-filter-chip-x" }, "\xD7")
+      );
+      btn.addEventListener("click", c.remove);
+      return btn;
+    })
+  );
+  const clearAllBtn = h(
+    "button",
+    {
+      type: "button",
+      class: "audit-trail-button audit-trail-button-text"
+    },
+    "Clear all"
+  );
+  clearAllBtn.addEventListener("click", () => {
+    onChange({
+      range: value.range,
+      since: value.since,
+      before: value.before
+    });
+  });
+  return h(
+    "div",
+    { class: "audit-trail-filter-chips-row" },
+    chipsRow,
+    clearAllBtn
+  );
+}
+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 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 renderTable(events, columns, onRowClick) {
+  const headerCells = columns.map(
+    (col) => h(
+      "th",
+      { scope: "col", class: `audit-trail-th audit-trail-th-${col}` },
+      COLUMN_LABELS[col] ?? col
+    )
+  );
+  const rows = events.map((event) => renderRow(event, columns, onRowClick));
+  return h(
+    "div",
+    { class: "audit-trail-table-wrap" },
+    h(
+      "table",
+      { class: "audit-trail-table" },
+      h("thead", null, h("tr", null, ...headerCells)),
+      h("tbody", null, ...rows)
+    )
+  );
+}
+function renderRow(event, columns, onClick) {
+  const interactive = Boolean(onClick);
+  const cells = columns.map(
+    (col) => h(
+      "td",
+      {
+        class: `audit-trail-cell audit-trail-cell-${col}`,
+        "data-label": COLUMN_LABELS[col] ?? col
+      },
+      renderCell(col, event)
+    )
+  );
+  const tr = h(
+    "tr",
+    {
+      class: "audit-trail-row",
+      tabindex: interactive ? "0" : void 0
+    },
+    ...cells
+  );
+  if (interactive && onClick) {
+    tr.addEventListener("click", () => onClick(event));
+    tr.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick(event);
+      }
+    });
+  }
+  return tr;
+}
+function renderCell(column, event) {
+  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 h(
+          "time",
+          {
+            datetime: value,
+            title: value,
+            // Marker for AuditTrailElement's 30s tick: each render uses
+            // Date.now(), and the timer queries by this attribute to
+            // refresh the relative half without rebuilding the table.
+            "data-occurred-at": value
+          },
+          formatTimeCell(value, Date.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 h(
+    "span",
+    { class: `audit-trail-status audit-trail-status-${cssToken(status)}` },
+    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 h("span", { class: "audit-trail-cell-presence" }, "View");
+  }
+  if (typeof value === "string" && value.length > 0) {
+    return h("span", { class: "audit-trail-cell-presence" }, "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, "-");
+}
+
+// src/AuditTrailElement.ts
+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"
+];
+var OBSERVED = [
+  "token",
+  "token-endpoint",
+  "api-base",
+  "page-size",
+  "poll-interval",
+  "theme",
+  "default-time-range"
+];
+var AuditTrailElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.bootstrap = { phase: "idle" };
+    this.bootstrapAbort = null;
+    this.eventsStore = null;
+    this.distinctStore = null;
+    this.eventsUnsub = null;
+    this.distinctUnsub = null;
+    // Latest snapshots cached so render() doesn't have to peek into stores.
+    this.eventsState = null;
+    this.distinctValues = {
+      actions: [],
+      actorTypes: [],
+      targetTypes: [],
+      tenants: [],
+      resultStatuses: [],
+      metadataKeys: [],
+      changeFields: []
+    };
+    // UI state.
+    this.filters = { range: "all" };
+    this.filtersOpen = false;
+    this.activeTab = "filters";
+    this.nlpState = { phase: "idle" };
+    this.nlpAbort = null;
+    this.visibleSet = new Set(DEFAULT_VISIBLE_COLUMNS);
+    // Slot tracking for partial re-renders. bodySlot wraps the table /
+    // state messages so events-store subscriptions can update only the
+    // table region without touching the toolbar (which would clobber
+    // open <details> picker state) or filter inputs (focus + drafts).
+    this.bodySlot = null;
+    // Modal cleanup hooks. Set when a modal is open; null otherwise.
+    this.detailDispose = null;
+    this.exportDispose = null;
+    // 30s timer that refreshes the relative half of each row's
+    // "absolute (N ago)" timestamp without rebuilding the table.
+    this.relativeTimeTimer = null;
+  }
+  static get observedAttributes() {
+    return OBSERVED;
+  }
+  connectedCallback() {
+    this.classList.add("audit-trail-root");
+    this.classList.add(`audit-trail-theme-${this.themeAttr()}`);
+    this.filters = { range: this.defaultTimeRangeAttr() };
+    this.start();
+    this.startRelativeTimeTimer();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+    this.stopRelativeTimeTimer();
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) return;
+    if (!this.isConnected) return;
+    if (name === "theme") {
+      const oldClass = `audit-trail-theme-${oldVal === "dark" ? "dark" : "light"}`;
+      const newClass = `audit-trail-theme-${newVal === "dark" ? "dark" : "light"}`;
+      this.classList.remove(oldClass);
+      this.classList.add(newClass);
+      return;
+    }
+    if (name === "token" || name === "token-endpoint") {
+      this.start();
+      return;
+    }
+    if (name === "default-time-range") {
+      return;
+    }
+    if (this.bootstrap.phase === "ready") this.restartEventsStore();
+  }
+  // Public method, mirrors the React component's refresh hatch. Triggers
+  // a full re-bootstrap (fresh token fetch + fresh stores).
+  refresh() {
+    this.start();
+  }
+  // ---- attributes ----
+  themeAttr() {
+    return this.getAttribute("theme") === "dark" ? "dark" : "light";
+  }
+  apiBaseAttr() {
+    return this.getAttribute("api-base") || DEFAULT_API_BASE;
+  }
+  pageSizeAttr() {
+    const n = Number.parseInt(this.getAttribute("page-size") ?? "", 10);
+    return Number.isFinite(n) && n > 0 ? n : DEFAULT_PAGE_SIZE;
+  }
+  pollIntervalAttr() {
+    const v = this.getAttribute("poll-interval");
+    if (v === null) return DEFAULT_POLL_INTERVAL_MS;
+    const n = Number.parseInt(v, 10);
+    return Number.isFinite(n) ? n : DEFAULT_POLL_INTERVAL_MS;
+  }
+  defaultTimeRangeAttr() {
+    const v = this.getAttribute("default-time-range");
+    if (v === "24h" || v === "7d" || v === "30d" || v === "all") return v;
+    return "all";
+  }
+  // storageKey returns a localStorage key namespaced by the current
+  // token's project (sub) and tenant. Returns null when the element
+  // isn't ready or the token has no usable sub - callers treat null
+  // as "skip persistence."
+  storageKey(suffix) {
+    if (this.bootstrap.phase !== "ready") return null;
+    const sub = this.bootstrap.claims?.sub;
+    if (!sub) return null;
+    const tenant = this.bootstrap.claims?.tenant_id || "_";
+    return `audit-trail:${suffix}:${sub}:${tenant}`;
+  }
+  // ---- bootstrap ----
+  start() {
+    this.disposeModals();
+    this.cleanupStores();
+    this.bootstrapAbort?.abort();
+    this.bootstrapAbort = null;
+    const token = this.getAttribute("token");
+    if (token) {
+      this.setReady(token);
+      return;
+    }
+    if (!this.getAttribute("token-endpoint") && !this.onTokenExpired) {
+      this.bootstrap = { phase: "error", reason: "config" };
+      this.render();
+      return;
+    }
+    this.bootstrap = { phase: "loading" };
+    this.render();
+    const ctrl = new AbortController();
+    this.bootstrapAbort = ctrl;
+    void (async () => {
+      const t = await fetchTokenViaOpts({
+        tokenEndpoint: this.getAttribute("token-endpoint") ?? void 0,
+        onTokenExpired: this.onTokenExpired
+      });
+      if (ctrl.signal.aborted) return;
+      if (!t) {
+        this.bootstrap = { phase: "error", reason: "fetch" };
+        this.render();
+        return;
+      }
+      this.setReady(t);
+    })();
+  }
+  setReady(token) {
+    const claims = parseClaims(token);
+    this.bootstrap = { phase: "ready", token, claims };
+    if (claims?.columns && claims.columns.length > 0) {
+      this.visibleSet = new Set(claims.columns);
+    } else {
+      this.visibleSet = new Set(DEFAULT_VISIBLE_COLUMNS);
+    }
+    this.restoreHiddenColumns();
+    this.restoreFilters();
+    this.activeTab = pickInitialTab(this.filters, claims);
+    this.startEventsStore(token);
+    this.startDistinctStore(token);
+    this.render();
+  }
+  startEventsStore(token) {
+    this.eventsUnsub?.();
+    this.eventsStore?.dispose();
+    const { since, before } = resolveTimeBounds(this.filters);
+    const apiBase = this.apiBaseAttr();
+    const tokenEndpoint = this.getAttribute("token-endpoint") ?? void 0;
+    const events = createEventsStore({
+      apiBase,
+      token,
+      pageSize: this.pageSizeAttr(),
+      pollInterval: this.pollIntervalAttr(),
+      tokenEndpoint,
+      onTokenExpired: this.onTokenExpired,
+      onError: (err) => this.dispatchError(err),
+      since,
+      before,
+      action: this.filters.action,
+      actor: this.filters.actor,
+      actorType: this.filters.actorType,
+      tenantId: this.filters.tenantId,
+      targetType: this.filters.targetType,
+      targetId: this.filters.targetId,
+      resultStatus: this.filters.resultStatus,
+      originIP: this.filters.originIP,
+      q: this.filters.q
+    });
+    this.eventsStore = events;
+    this.eventsState = events.getSnapshot();
+    this.eventsUnsub = events.subscribe(() => {
+      this.eventsState = events.getSnapshot();
+      this.renderBody();
+    });
+  }
+  startDistinctStore(token) {
+    this.distinctUnsub?.();
+    this.distinctStore?.dispose();
+    const apiBase = this.apiBaseAttr();
+    const tokenEndpoint = this.getAttribute("token-endpoint") ?? void 0;
+    const distinct = createDistinctValuesStore({
+      apiBase,
+      token,
+      tokenEndpoint,
+      onTokenExpired: this.onTokenExpired
+    });
+    this.distinctStore = distinct;
+    this.distinctValues = distinct.getSnapshot();
+    this.distinctUnsub = distinct.subscribe(() => {
+      this.distinctValues = distinct.getSnapshot();
+      this.render();
+    });
+  }
+  restartEventsStore() {
+    if (this.bootstrap.phase !== "ready") return;
+    this.startEventsStore(this.bootstrap.token);
+  }
+  cleanupStores() {
+    this.eventsUnsub?.();
+    this.distinctUnsub?.();
+    this.eventsStore?.dispose();
+    this.distinctStore?.dispose();
+    this.eventsUnsub = null;
+    this.distinctUnsub = null;
+    this.eventsStore = null;
+    this.distinctStore = null;
+    this.eventsState = null;
+    this.distinctValues = {
+      actions: [],
+      actorTypes: [],
+      targetTypes: [],
+      tenants: [],
+      resultStatuses: [],
+      metadataKeys: [],
+      changeFields: []
+    };
+  }
+  cleanup() {
+    this.bootstrapAbort?.abort();
+    this.bootstrapAbort = null;
+    this.nlpAbort?.abort();
+    this.nlpAbort = null;
+    this.disposeModals();
+    this.cleanupStores();
+  }
+  startRelativeTimeTimer() {
+    if (this.relativeTimeTimer !== null) return;
+    this.relativeTimeTimer = setInterval(
+      () => this.tickRelativeTimes(),
+      RELATIVE_TIME_TICK_MS
+    );
+  }
+  stopRelativeTimeTimer() {
+    if (this.relativeTimeTimer === null) return;
+    clearInterval(this.relativeTimeTimer);
+    this.relativeTimeTimer = null;
+  }
+  tickRelativeTimes() {
+    const cells = this.querySelectorAll("time[data-occurred-at]");
+    if (cells.length === 0) return;
+    const now = Date.now();
+    cells.forEach((c) => {
+      const iso = c.getAttribute("data-occurred-at");
+      if (!iso) return;
+      c.textContent = formatTimeCell(iso, now);
+    });
+  }
+  disposeModals() {
+    this.detailDispose?.();
+    this.detailDispose = null;
+    this.exportDispose?.();
+    this.exportDispose = null;
+  }
+  openDetail(event) {
+    this.detailDispose?.();
+    this.detailDispose = openEventDetail({
+      event,
+      theme: this.themeAttr(),
+      onClose: () => {
+        this.detailDispose = null;
+      }
+    });
+  }
+  openExport() {
+    this.exportDispose?.();
+    this.exportDispose = openExportModal({
+      theme: this.themeAttr(),
+      onDownload: (format) => this.runExport(format),
+      onClose: () => {
+        this.exportDispose = null;
+      }
+    });
+  }
+  async runExport(format) {
+    if (this.bootstrap.phase !== "ready") throw new Error("Not authenticated.");
+    const apiBase = this.apiBaseAttr();
+    const tokenEndpoint = this.getAttribute("token-endpoint") ?? void 0;
+    const { since, before } = resolveTimeBounds(this.filters);
+    const params = {
+      format,
+      since,
+      before,
+      action: this.filters.action,
+      actor: this.filters.actor,
+      actorType: this.filters.actorType,
+      tenantId: this.filters.tenantId,
+      targetType: this.filters.targetType,
+      targetId: this.filters.targetId,
+      resultStatus: this.filters.resultStatus,
+      originIP: this.filters.originIP,
+      q: this.filters.q
+    };
+    const run = (token) => exportEvents({ apiBase, token, params });
+    let result;
+    try {
+      result = await run(this.bootstrap.token);
+    } catch (err) {
+      if (err instanceof EmbedError && err.kind === "unauthorized") {
+        const refreshed = await fetchTokenViaOpts({
+          tokenEndpoint,
+          onTokenExpired: this.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);
+  }
+  dispatchError(err) {
+    this.dispatchEvent(
+      new CustomEvent("audit-trail-error", {
+        detail: { error: err },
+        bubbles: true
+      })
+    );
+  }
+  // ---- columns ----
+  get availableColumns() {
+    if (this.bootstrap.phase !== "ready") return ALL_COLUMNS;
+    const cols = this.bootstrap.claims?.columns;
+    if (cols && cols.length > 0) return cols;
+    return ALL_COLUMNS;
+  }
+  get visibleColumns() {
+    return this.availableColumns.filter((c) => this.visibleSet.has(c));
+  }
+  toggleColumn(col) {
+    if (this.visibleSet.has(col)) this.visibleSet.delete(col);
+    else this.visibleSet.add(col);
+    this.persistHiddenColumns();
+    this.render();
+  }
+  restoreHiddenColumns() {
+    const key = this.storageKey("cols");
+    if (!key) return;
+    try {
+      const raw = globalThis.localStorage?.getItem(key);
+      if (!raw) return;
+      const hidden = JSON.parse(raw);
+      if (!Array.isArray(hidden)) return;
+      for (const c of hidden) {
+        if (typeof c === "string") this.visibleSet.delete(c);
+      }
+    } catch {
+    }
+  }
+  persistHiddenColumns() {
+    const key = this.storageKey("cols");
+    if (!key) return;
+    try {
+      const hidden = this.availableColumns.filter((c) => !this.visibleSet.has(c));
+      globalThis.localStorage?.setItem(key, JSON.stringify(hidden));
+    } catch {
+    }
+  }
+  restoreFilters() {
+    const key = this.storageKey("filters");
+    if (!key) return;
+    try {
+      const raw = globalThis.localStorage?.getItem(key);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") return;
+      const range = parsed.range;
+      if (range !== "24h" && range !== "7d" && range !== "30d" && range !== "custom" && range !== "all") return;
+      this.filters = parsed;
+    } catch {
+    }
+  }
+  persistFilters() {
+    const key = this.storageKey("filters");
+    if (!key) return;
+    try {
+      globalThis.localStorage?.setItem(key, JSON.stringify(this.filters));
+    } catch {
+    }
+  }
+  // ---- filters ----
+  setFilters(next) {
+    this.filters = next;
+    this.persistFilters();
+    this.render();
+    this.restartEventsStore();
+  }
+  setActiveTab(next) {
+    if (this.activeTab === next) return;
+    this.activeTab = next;
+    this.render();
+  }
+  // submitNLP fires the LLM round-trip via the embed NLP endpoint.
+  // Updates nlpState immediately for the spinner, then folds the
+  // result into filters on success or surfaces an error on failure.
+  submitNLP(query) {
+    if (this.bootstrap.phase !== "ready") return;
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    const apiBase = this.apiBaseAttr();
+    const token = this.bootstrap.token;
+    this.nlpAbort?.abort();
+    const ctrl = new AbortController();
+    this.nlpAbort = ctrl;
+    this.nlpState = { phase: "loading" };
+    this.render();
+    void (async () => {
+      try {
+        const result = await generateNLPFilters({
+          apiBase,
+          token,
+          query: trimmed,
+          signal: ctrl.signal
+        });
+        if (ctrl.signal.aborted) return;
+        this.nlpState = { phase: "idle" };
+        this.filters = {
+          ...this.filters,
+          q: result.dsl || void 0,
+          nlpQ: trimmed,
+          nlpExplanation: result.explanation,
+          nlpUnsupported: result.unsupported
+        };
+        this.persistFilters();
+        this.render();
+        this.restartEventsStore();
+      } catch (err) {
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        if (err instanceof EmbedError && err.kind === "unauthorized") {
+          const refreshed = await fetchTokenViaOpts({
+            tokenEndpoint: this.getAttribute("token-endpoint") ?? void 0,
+            onTokenExpired: this.onTokenExpired
+          });
+          if (refreshed && !ctrl.signal.aborted) {
+            try {
+              const retry = await generateNLPFilters({
+                apiBase,
+                token: refreshed,
+                query: trimmed,
+                signal: ctrl.signal
+              });
+              this.nlpState = { phase: "idle" };
+              this.filters = {
+                ...this.filters,
+                q: retry.dsl || void 0,
+                nlpQ: trimmed,
+                nlpExplanation: retry.explanation,
+                nlpUnsupported: retry.unsupported
+              };
+              this.persistFilters();
+              this.render();
+              this.restartEventsStore();
+              return;
+            } catch (retryErr) {
+              this.nlpState = {
+                phase: "error",
+                reason: classifyNLPError(retryErr)
+              };
+              this.render();
+              return;
+            }
+          }
+        }
+        this.nlpState = { phase: "error", reason: classifyNLPError(err) };
+        this.render();
+      }
+    })();
+  }
+  // ---- rendering ----
+  render() {
+    this.bodySlot = null;
+    this.replaceChildren(...this.renderChildren());
+  }
+  renderBody() {
+    if (!this.bodySlot) return;
+    this.bodySlot.replaceChildren(...this.renderBodyChildren());
+  }
+  renderChildren() {
+    if (this.bootstrap.phase === "error" && this.bootstrap.reason === "config") {
+      return [
+        this.stateElement(
+          "error",
+          h(
+            "span",
+            null,
+            "Configure ",
+            h("code", null, "token"),
+            ", ",
+            h("code", null, "token-endpoint"),
+            ", or set the ",
+            h("code", null, "onTokenExpired"),
+            " property."
+          )
+        )
+      ];
+    }
+    if (this.bootstrap.phase === "error" && this.bootstrap.reason === "fetch") {
+      const retry = h("button", { type: "button", class: "audit-trail-button" }, "Retry");
+      retry.addEventListener("click", () => this.start());
+      return [this.stateElement("error", h("span", null, "Couldn\u2019t fetch token."), retry)];
+    }
+    if (this.bootstrap.phase !== "ready") {
+      return [this.stateElement("loading", "Loading\u2026")];
+    }
+    if (this.bootstrap.claims === null) {
+      return [this.stateElement("error", "Invalid token.")];
+    }
+    const out = [this.renderToolbar()];
+    const chips = renderFilterChips({
+      value: this.filters,
+      onChange: (next) => this.setFilters(next)
+    });
+    if (chips) out.push(chips);
+    if (this.filtersOpen) {
+      out.push(
+        renderFiltersPanel({
+          value: this.filters,
+          distinct: this.distinctValues,
+          claims: this.bootstrap.claims,
+          activeTab: this.activeTab,
+          nlpState: this.nlpState,
+          onTabChange: (next) => this.setActiveTab(next),
+          onChange: (next) => this.setFilters(next),
+          onNLPSubmit: (q) => this.submitNLP(q),
+          onApplied: () => {
+            this.filtersOpen = false;
+            this.render();
+          }
+        })
+      );
+    }
+    const body = h("div", { class: "audit-trail-body" });
+    body.replaceChildren(...this.renderBodyChildren());
+    this.bodySlot = body;
+    out.push(body);
+    return out;
+  }
+  renderToolbar() {
+    const livePollActive = this.pollIntervalAttr() > 0 && !resolveTimeBounds(this.filters).before;
+    const live = livePollActive ? this.renderLiveIndicator() : null;
+    const spacer = h("span", { class: "audit-trail-toolbar-spacer" });
+    const filtersToggle = this.renderFiltersToggle();
+    const exportBtn = h(
+      "button",
+      { type: "button", class: "audit-trail-button" },
+      "Export"
+    );
+    exportBtn.addEventListener("click", () => this.openExport());
+    const picker = this.renderColumnPicker();
+    const children = [];
+    if (live) children.push(live);
+    children.push(spacer, filtersToggle, exportBtn, picker);
+    return h("div", { class: "audit-trail-toolbar" }, ...children);
+  }
+  renderLiveIndicator() {
+    return h(
+      "span",
+      {
+        class: "audit-trail-live",
+        "aria-label": "Live updates",
+        title: "Live updates"
+      },
+      h("span", { class: "audit-trail-live-dot", "aria-hidden": "true" }),
+      h("span", null, "Live")
+    );
+  }
+  renderFiltersToggle() {
+    const activeCount = countActiveColumnFilters(this.filters) + (this.filters.q ? parseQClauses(this.filters.q).length : 0);
+    const children = [document.createTextNode("Search")];
+    if (activeCount > 0) {
+      children.push(
+        h("span", { class: "audit-trail-filter-toggle-badge" }, String(activeCount))
+      );
+    }
+    children.push(
+      h(
+        "span",
+        { class: "audit-trail-filter-toggle-caret", "aria-hidden": "true" },
+        this.filtersOpen ? "\u25B4" : "\u25BE"
+      )
+    );
+    const btn = h(
+      "button",
+      {
+        type: "button",
+        class: "audit-trail-filter-toggle",
+        "aria-expanded": this.filtersOpen ? "true" : "false"
+      },
+      ...children
+    );
+    btn.addEventListener("click", () => {
+      this.filtersOpen = !this.filtersOpen;
+      this.render();
+    });
+    return btn;
+  }
+  renderColumnPicker() {
+    const available = this.availableColumns;
+    const visibleCount = available.reduce(
+      (n, c) => this.visibleSet.has(c) ? n + 1 : n,
+      0
+    );
+    const items = available.map((col) => {
+      const checkbox = h("input", { type: "checkbox" });
+      checkbox.checked = this.visibleSet.has(col);
+      checkbox.addEventListener("change", () => this.toggleColumn(col));
+      return h(
+        "label",
+        { class: "audit-trail-picker-item" },
+        checkbox,
+        h("span", null, COLUMN_LABELS[col] ?? col)
+      );
+    });
+    return h(
+      "details",
+      { class: "audit-trail-picker" },
+      h(
+        "summary",
+        { class: "audit-trail-picker-summary" },
+        `Columns (${visibleCount}/${available.length})`
+      ),
+      h("div", { class: "audit-trail-picker-content" }, ...items)
+    );
+  }
+  renderBodyChildren() {
+    const events = this.eventsState?.events ?? [];
+    const status = this.eventsState?.status ?? "loading";
+    const hasMore = (this.eventsState?.nextCursor ?? null) !== null;
+    const cols = this.visibleColumns;
+    if (status === "loading" && events.length === 0) {
+      return [this.stateElement("loading", "Loading\u2026")];
+    }
+    if (status === "expired") {
+      return [this.stateElement("error", "Session expired.")];
+    }
+    if (status === "error") {
+      const retry = h("button", { type: "button", class: "audit-trail-button" }, "Retry");
+      retry.addEventListener("click", () => this.eventsStore?.refresh());
+      return [this.stateElement("error", "Could not load events.", retry)];
+    }
+    if (events.length === 0) {
+      return [this.stateElement("empty", "No events match.")];
+    }
+    if (cols.length === 0) {
+      return [this.stateElement("empty", "No columns selected.")];
+    }
+    const out = [renderTable(events, cols, (event) => this.openDetail(event))];
+    if (hasMore) {
+      const more = h(
+        "button",
+        { type: "button", class: "audit-trail-button audit-trail-load-more" },
+        "Load more"
+      );
+      more.addEventListener("click", () => this.eventsStore?.loadMore());
+      out.push(more);
+    }
+    return out;
+  }
+  stateElement(kind, ...children) {
+    return h("div", { class: `audit-trail-state audit-trail-state-${kind}` }, ...children);
+  }
+};
+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 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";
+}
+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.";
+  }
+}
+
+// src/index.ts
+if (typeof customElements !== "undefined" && !customElements.get("audit-trail")) {
+  customElements.define("audit-trail", AuditTrailElement);
+}
+
+export { AuditTrailElement };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map