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 only sends credentials: 'include' — 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", {
                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. Sent with credentials: 'include'.
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