Svelte

Use the <audit-trail> custom element from @everscribe/components-element to embed the audit-trail UI in a Svelte app. The element registers itself as <audit-trail> on import. Drop the tag into a .svelte component and you're done.

Source: packages/element

Install

npm install @everscribe/components-element @everscribe/components-styles

The element registers itself globally on import (idempotent. Safe to import in multiple modules). The styles package ships the default CSS theme. Install it alongside.

Quickstart

<script>
    import "@everscribe/components-element";
    import "@everscribe/components-styles/default.css";
</script>

<audit-trail token-endpoint="/api/embed-token"
             on:audit-trail-error={(e) => console.error(e.detail.error)} />

token-endpoint is a route on your server (not Everscribe's) that returns { token }. The element fetches it on mount, holds it in memory, and re-fetches on 401. Your project API key never touches the browser. See Overview → Minting tokens for the backend side.

If you have a token already, pass it directly:

<audit-trail token={token} token-endpoint="/api/embed-token" />

Pass token-endpoint alongside token so refresh on 401 still works.

Custom auth header on the token fetch

The built-in tokenEndpoint fetcher POSTs with credentials: 'include' and no body. No custom headers. If your token endpoint needs an extra header (a CSRF token, a tenant identifier, an OAuth bearer), use the JS-only onTokenExpired property via bind:this:

<script>
    import "@everscribe/components-element";
    import { onMount } from "svelte";

    export let currentUser;
    let el;

    onMount(() => {
        el.onTokenExpired = async () => {
            const res = await fetch("/api/embed-token", {
                method: "POST",
                credentials: "include",
                headers: { "X-Tenant": currentUser.tenantId },
            });
            const { token } = await res.json();
            return token;
        };
    });
</script>

<audit-trail bind:this={el} />

onTokenExpired is invoked both for the initial token fetch (when token attribute is unset) and on every 401 refresh.

Attributes

At least one of token, token-endpoint, or the JS-only onTokenExpired property is required.

Attribute	Type	Default	Notes
token	string	—	Embed JWT. If omitted, the element fetches one via token-endpoint/onTokenExpired on mount.
token-endpoint	string	—	URL on your backend returning { token }. Used for the initial fetch and for refresh on 401. POSTed with credentials: 'include' and no body, so register the route for POST.
api-base	string	https://api.everscribe.io/v1/embed	Base URL for read endpoints. Override for local dev or self-hosted.
page-size	number	25	Events per page.
poll-interval	number	5000	Poll cadence in ms. <= 0 disables polling. Below 1000 is clamped with a console.warn.
theme	light | dark	light	Switches the CSS-variable theme.
default-time-range	24h | 7d | 30d | all	all	Initial time-range preset (read at mount only).

Style and class come from the standard class and style attributes. The element renders into its own light DOM, so the CSS from @everscribe/components-styles/default.css applies the same way it does for the React component.

Properties and methods (JS only)

These can't be expressed as attributes; set them on the element directly via JS.

Property	Type	Notes
onTokenExpired	() => Promise<string>	Custom token-fetch callback. Takes precedence over token-endpoint.
refresh()	() => void	Public method. Triggers a full re-bootstrap (fresh token fetch + fresh stores).

Events

Event	detail	Notes
audit-trail-error	{ error: Error }	Bubbles. Fired on fetch errors that surface from the events store (network, server, expired token after the refresh chain is exhausted).

<audit-trail on:audit-trail-error={(e) => track("audit_error", e.detail.error)} />

Persistence

Column visibility and filter state persist to localStorage automatically and restore on reload. Same keys and behavior as the React adapter. They're shared between adapters, so customers using both under the same origin share state cleanly.

Vue, Solid, Angular

The same @everscribe/components-element package works in Vue, Solid, and Angular without changes. See Vanilla JS for the framework-free reference; the only thing that changes between frameworks is event-listener syntax.

What next

• Overview. Token model, refresh chain, claim-driven UI, rate limits
• Styles. Theming via CSS variables
• Vanilla JS. The same custom element, plain HTML