/*!
* Statum - client-side state library (core module).
*
* An HTMX-inspired state layer. The library manages signed "snapshots" of
* application state (one per slot type), keeps them fresh via the server's
* `transmit_after` / `invalid_after` timestamps, and ships them to the server
* with every request through the X-Statum-Slot machinery. See model.md for
* the full specification.
*
* CORE IS HEADLESS: it owns the slot protocol (state store, persistence, the
* request/directive machinery, the realtime channel) and the UI handler
* overrides, and NEVER touches the DOM. It therefore works alone — point
* `statum.config` at your endpoints and init() fetches the entrypoint and
* applies directives to state — which makes core a usable state layer for
* non-document templating frameworks.
*
* Everything DOM-related lives in statum-document.js, which installs four
* hooks through the module bridge:
*
* bridge.setBootState(ready) - stm-preloader / stm-content visibility
* bridge.renderDriver(scope) - the render walk (the whole DOM scan)
* bridge.afterRenderCycle() - stm-guard link evaluation (guards)
* bridge.applyErrorClasses(el,on) - stm-on-error / stm-on-success classes
*
* All four default to no-ops, so headless pages lose nothing by running core
* alone. Endpoint overrides also arrive from document (it reads the
* `stm-entrypoint` / `stm-slots` / `stm-channel` / `stm-worker` body
* attributes into `statum.config`); init() uses config as given and never
* reads the DOM itself.
*
* The client ships as modules, each a plain IIFE with no dependencies and no
* build step, loaded in this order:
*
* 1. statum-core.js - this file: creates `window.statum`.
* 2. statum-document.js - the render walk, the DOM bindings, the attribute
* registry (`statum.registerAttribute`) and the
* form bindings (`stm-prefill`,
* `stm-clear-on-success`, `stm-clear-on-error`,
* `statum.document`).
* 3. statum-markdown.js - the CommonMark engine and `stm-markdown`.
*
* Targets modern evergreen browsers (uses fetch, BroadcastChannel,
* queueMicrotask, URLSearchParams, FormData).
*/
(function () {
'use strict';
/** Content-Type used by every Statum directive response. */
var STATUM_CONTENT_TYPE = 'application/vnd.statum+json';
/** Request/response header carrying one slot's reference (or base64 frame). */
var SLOT_HEADER = 'X-Statum-Slot';
/** Request header carrying an action's opaque `private` blob. */
var PRIVATE_HEADER = 'X-Statum-Private';
/** Session-cookie marker used to detect a fresh browser session. */
var SESSION_COOKIE = '_statum_sdc';
/** BroadcastChannel name used to sync session/device state across tabs. */
var CHANNEL_NAME = 'statum';
/** localStorage / sessionStorage key prefix for persisted frames. */
var STORAGE_PREFIX = 'statum:';
// ---------------------------------------------------------------------------
// Configuration
// ---------------------------------------------------------------------------
/**
* Endpoint URLs. Defaults; pages override them either by writing
* `statum.config` (headless pages do this before init runs) or with the
* `stm-entrypoint` / `stm-slots` / `stm-channel` / `stm-worker` attributes
* on the `
` element, which statum-document.js reads into this object
* during its own (synchronous) load. Core itself never reads the DOM.
*
* @type {{entrypointUrl: string, slotsUrl: string}}
*/
var config = {
entrypointUrl: '/_statum/entrypoint',
slotsUrl: '/_statum/slots',
channelUrl: '/_statum/channel',
// The realtime worker is embedded in the library as a default resource
// (served at /_statum/resource/statum-worker.js); override with stm-worker.
workerUrl: '/_statum/resource/statum-worker.js'
};
// ---------------------------------------------------------------------------
// State store
// ---------------------------------------------------------------------------
/**
* In-memory store, keyed by slot type. Each value is `{frame, snapshot}`
* where `snapshot` is the parsed `frame.content`. This map is the single
* source of truth for rendering; persistent backends merely hydrate it.
*
* @type {Map}
*/
var store = new Map();
/** Listeners, keyed by type name. @type {Map>} */
var listeners = new Map();
/**
* Idempotency tracking: slot key -> last-applied frame `signature`. Held in
* memory only (per tab), so a frame already persisted by another tab still
* re-draws a tab whose tracking lags. Entries are dropped on clear so a
* replayed frame re-applies.
* @type {Map}
*/
var signatures = new Map();
/** Optional UI handlers (set via `statum.on*Handler`). */
var handlers = { onConfirm: null, onNotify: null, onError: null };
/** @type {BroadcastChannel|null} */
var channel = null;
/** Whether {@link init} has already run. */
var initialized = false;
/**
* Whether the entrypoint has been fetched. Post-entrypoint guard
* evaluation (statum-document.js) is gated on it through the bridge.
*/
var entrypointLoaded = false;
// ---------------------------------------------------------------------------
// Small utilities
// ---------------------------------------------------------------------------
/**
* Parse an ISO 8601 timestamp to epoch millis, or `undefined`.
* @param {string|undefined} s
* @returns {number|undefined}
*/
function parseTime(s) {
if (!s) return undefined;
var t = new Date(s).getTime();
return isNaN(t) ? undefined : t;
}
/**
* Base64-encode a UTF-8 string (safe for frames containing non-Latin1 data).
* @param {string} str
* @returns {string}
*/
function b64encode(str) {
var bytes = new TextEncoder().encode(str);
var bin = '';
var chunk = 0x8000;
for (var i = 0; i < bytes.length; i += chunk) {
bin += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));
}
return btoa(bin);
}
/** Read a cookie value, or `null` if absent. @param {string} name */
function getCookie(name) {
var escaped = name.replace(/([.$?*|{}()[\]\/+^])/g, '\\$1');
var match = document.cookie.match(new RegExp('(?:^|; )' + escaped + '=([^;]*)'));
return match ? decodeURIComponent(match[1]) : null;
}
/** Set a session cookie (no expiry => cleared when the browser closes). */
function setCookie(name, value) {
document.cookie = name + '=' + encodeURIComponent(value) + '; path=/; SameSite=Lax';
}
// ---------------------------------------------------------------------------
// Expression evaluation
// ---------------------------------------------------------------------------
/**
* Compiled-expression cache. Expressions are evaluated as JavaScript against
* a scope object (the page's HTML is trusted, per the model).
* @type {Map}
*/
var exprCache = new Map();
/**
* Wrap a scope for expression evaluation so bare identifiers resolve in a
* controlled order: names on the scope (slot types, loop variables,
* `stm-def-*` locals) win; names missing from the scope but present on
* `globalThis` (`Math`, `parseInt`, `String`, …) forward to that global;
* anything else resolves to `undefined` instead of throwing a
* `ReferenceError` or leaking an unintended global. The `has` trap claims
* every name so `with` never falls through around the proxy, and the inner
* try/catch of the compiled expression still turns property access on a
* resolved `undefined`/`null` into `undefined` for that expression alone.
* @param {object} scope
* @returns {
{
get: function(string, *): *,
set: function(string, *): boolean,
has: function(string): boolean
}
}
*/
function evalScope(scope) {
return new Proxy(scope, {
get: function (target, name) {
if (name === Symbol.unscopables) return undefined;
if (name in target) return target[name];
if (name in globalThis) return globalThis[name];
return undefined;
},
set: function (target, name, value) {
target[name] = value;
return true;
},
has: function () { return true; }
});
}
/**
* Compile an expression once. The compiled form evaluates the expression
* source inside a `with` over an {@link evalScope} proxy, with an inner
* try/catch so a property access on an unset slot's `undefined` public data
* degrades to `undefined` for that expression instead of throwing.
* @param {string} expr
* @returns {function(object): *}
*/
function compileExpr(expr) {
var cached = exprCache.get(expr);
if (cached) return cached;
var fn = new Function('scopeProxy', 'with (scopeProxy) { try { return (' +
expr + '); } catch (e) { return undefined; } }');
exprCache.set(expr, fn);
return fn;
}
/**
* Evaluate an expression against a scope. An unset/empty expression and any
* parse error resolve to `undefined` (the "leave original DOM content"
* policy; no warning — an author may legitimately bind an expression that
* references a slot the page does not hold yet).
* @param {string} expr
* @param {object} [scope]
* @returns {*}
*/
function evalExpr(expr, scope) {
if (expr == null || expr === '') return undefined;
try {
return compileExpr(expr)(evalScope(scope || {}));
} catch (e) {
return undefined;
}
}
/**
* Build a child scope that inherits the parent (so type bindings remain
* visible) and adds one own loop variable.
* @param {object} parent
* @param {string} name
* @param {*} value
* @returns {object}
*/
function childScope(parent, name, value) {
var scope = Object.create(parent || null);
scope[name] = value;
return scope;
}
// ---------------------------------------------------------------------------
// StatumError
// ---------------------------------------------------------------------------
/**
* Error type thrown for HTTP failures and `error` directives.
* @param {string} [message]
* @param {string} [code]
* @param {object} [data]
*/
function StatumError(message, code, data) {
this.name = 'StatumError';
this.message = message || '';
this.code = code || undefined;
this.data = data || undefined;
}
StatumError.prototype = Object.create(Error.prototype);
// ---------------------------------------------------------------------------
// UI handlers (confirm / notify / error)
// ---------------------------------------------------------------------------
/**
* Run the `notify` directive's default behaviour or the custom
* `statum.onNotifyHandler`. The default surfaces the message via `alert()`.
* @param {string} [kind] Application-defined category (freeform).
* @param {string} [message]
*/
function triggerNotify(kind, message) {
var fn = handlers.onNotify;
try {
if (fn) fn(kind, message);
else if (message != null) window.alert(message);
} catch (e) { console.error('[statum] notify handler error', e); }
}
/**
* Run the `stm-confirm` gate: the custom `statum.onConfirmHandler` if set,
* otherwise `window.confirm`. Supports async handlers (custom modals).
* @param {string} message
* @param {HTMLElement} element
* @returns {Promise} truthy if the action should proceed.
*/
async function triggerConfirm(message, element) {
var fn = handlers.onConfirm;
try {
if (fn) return !!(await fn(message, element));
return !!window.confirm(message);
} catch (e) {
console.error('[statum] confirm handler error', e);
return false;
}
}
/**
* Run the custom `statum.onErrorHandler`, if set. Returns whether the default
* behaviour (promise rejection + `stm-on-error` classes) should proceed: the
* handler suppresses the default by returning (or resolving) `false`.
* @param {StatumError} error
* @param {HTMLElement|null} element
* @returns {Promise}
*/
async function triggerError(error, element) {
var fn = handlers.onError;
if (!fn) return true;
try {
var suppress = await fn(error, element);
return suppress !== false;
} catch (e) {
console.error('[statum] error handler error', e);
return true;
}
}
/**
* Surface a failure: run `triggerError`, and if the default is not
* suppressed, apply the error-state classes (when an origin element exists;
* through the document-installed hook) and re-throw so the originating
* promise rejects.
* @param {StatumError} error
* @param {HTMLElement|null} element
*/
async function reportFailure(error, element) {
if (await triggerError(error, element)) {
if (element) applyErrorClasses(element, true);
throw error;
}
}
// ---------------------------------------------------------------------------
// Persistence
// ---------------------------------------------------------------------------
/**
* Pick the storage backend for a scope.
* @param {string} scope
* @returns {Storage|null} `null` for in-memory scopes.
*/
function storageFor(scope) {
if (scope === 'device' || scope === 'session') return localStorage;
if (scope === 'flow') return sessionStorage;
return null; // page / transient
}
/**
* Persist a slot's frame to the backend matching its scope, removing any
* stale copy from the other backend first (in case the scope changed).
* @param {string} type
* @param {{frame: object, snapshot: object}} entry
*/
function persistEntry(type, entry) {
var scope = entry.snapshot.slot && entry.snapshot.slot.scope;
removePersisted(type);
var storage = storageFor(scope);
if (!storage) return;
try {
storage.setItem(STORAGE_PREFIX + type, JSON.stringify(entry.frame));
} catch (e) {
/* storage full or unavailable; remain in-memory only */
}
}
/** Remove a persisted frame from both backends. @param {string} type */
function removePersisted(type) {
try { localStorage.removeItem(STORAGE_PREFIX + type); } catch (e) {}
try { sessionStorage.removeItem(STORAGE_PREFIX + type); } catch (e) {}
}
/** Load every persisted frame from a backend into the in-memory store. */
function loadFrom(storage) {
for (var i = 0; i < storage.length; i++) {
var key = storage.key(i);
if (!key || key.indexOf(STORAGE_PREFIX) !== 0) continue;
try {
var frame = JSON.parse(storage.getItem(key));
var snapshot = JSON.parse(frame.content);
var type = snapshot.slot && snapshot.slot.type;
if (type && !store.has(type)) store.set(type, { frame: frame, snapshot: snapshot });
} catch (e) {
/* corrupt entry: ignore */
}
}
}
/** Hydrate the store from localStorage and sessionStorage. */
function hydrate() {
try { loadFrom(localStorage); } catch (e) {}
try { loadFrom(sessionStorage); } catch (e) {}
}
// ---------------------------------------------------------------------------
// Session-cookie initialization
// ---------------------------------------------------------------------------
/**
* Detect a fresh browser session using the `_statum_sdc` session cookie.
* On a fresh session, clear all `session`-scoped persisted frames, then set
* the marker. Session cookies are shared across tabs, so a tab opened
* mid-session sees the marker and leaves session data intact.
*/
function initSession() {
if (getCookie(SESSION_COOKIE) !== null) return;
clearSessionSlotsFromStorage();
setCookie(SESSION_COOKIE, '1');
}
/** Remove all `session`-scoped frames from localStorage. */
function clearSessionSlotsFromStorage() {
var toRemove = [];
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
if (!key || key.indexOf(STORAGE_PREFIX) !== 0) continue;
try {
var frame = JSON.parse(localStorage.getItem(key));
var snapshot = JSON.parse(frame.content);
if (snapshot.slot && snapshot.slot.scope === 'session') toRemove.push(key);
} catch (e) {}
}
for (var j = 0; j < toRemove.length; j++) localStorage.removeItem(toRemove[j]);
}
// ---------------------------------------------------------------------------
// Listeners & cross-tab broadcast
// ---------------------------------------------------------------------------
/**
* Fire all listeners for a type. (Renamed from `notify` to avoid confusion
* with the `notify` directive.)
* @param {string} type
* @param {object|null} frame
* @param {object|null} snapshot
*/
function fireListeners(type, frame, snapshot) {
var set = listeners.get(type);
if (!set) return;
var event = { type: type, frame: frame, snapshot: snapshot };
set.forEach(function (cb) {
try { cb(event); } catch (e) { console.error('[statum] listener error', e); }
});
}
/**
* Broadcast a state change to other tabs. Only `session`/`device` scopes are
* shared (flow/page/transient are per-tab).
* @param {object} message
* @param {string} [scope]
*/
function broadcast(message, scope) {
if (!channel) return;
if (scope !== 'session' && scope !== 'device') return;
try { channel.postMessage(message); } catch (e) {}
}
/**
* Broadcast a message to other tabs regardless of slot scope. Used to relay
* realtime (live) events so they reach every tab, not just session/device
* ones.
*/
function broadcastAlways(message) {
if (!channel) return;
try { channel.postMessage(message); } catch (e) {}
}
/** Open the BroadcastChannel and wire inbound messages. */
function setupChannel() {
if (typeof BroadcastChannel === 'undefined') return;
try {
channel = new BroadcastChannel(CHANNEL_NAME);
} catch (e) {
channel = null;
return;
}
channel.onmessage = function (ev) {
var msg = ev.data;
if (!msg) return;
if (msg.kind === 'set' && msg.frame) {
try {
var snapshot = JSON.parse(msg.frame.content);
var type = snapshot.slot && snapshot.slot.type;
if (type && commitSet(msg.frame, snapshot, type, false)) renderAll();
} catch (e) { /* ignore malformed */ }
} else if (msg.kind === 'clear') {
var t = msg.type;
if (!t && msg.key != null) {
store.forEach(function (entry, type) {
if (entry.snapshot.slot && entry.snapshot.slot.key === msg.key) t = type;
});
}
if (t) clearType(t, { broadcast: false });
else if (msg.key != null) signatures.delete(msg.key);
renderAll();
}
};
}
// ---------------------------------------------------------------------------
// State mutation
// ---------------------------------------------------------------------------
/**
* Remove a type from the store, un-persist it, drop its idempotency entry,
* fire listeners, and (optionally) broadcast the clear to other tabs.
* @param {string} type
* @param {{broadcast?: boolean}} [opts]
*/
function clearType(type, opts) {
var entry = store.get(type);
if (!entry) return;
var scope = entry.snapshot.slot && entry.snapshot.slot.scope;
var key = entry.snapshot.slot && entry.snapshot.slot.key;
store.delete(type);
removePersisted(type);
if (key) signatures.delete(key);
fireListeners(type, null, null);
if (opts && opts.broadcast) broadcast({ kind: 'clear', key: key, type: type }, scope);
}
/**
* Resolve a slot key to its type and clear it. Used by the `clear` directive
* (keyed) and by live `clear` events.
* @param {string} key
* @param {boolean} [broadcast]
*/
function clearByKey(key, broadcast) {
var typeToRemove = null;
store.forEach(function (entry, type) {
if (entry.snapshot.slot && entry.snapshot.slot.key === key) typeToRemove = type;
});
if (typeToRemove) clearType(typeToRemove, { broadcast: !!broadcast });
else if (key) signatures.delete(key);
}
/**
* Resolve a frame signature to its slot type and clear it. Used by the
* `invalidate` directive, which references a signature (not a key) because the
* server reports a bad signature without trusting the frame's content.
* @param {string} signature
* @param {boolean} [broadcast]
*/
function clearBySignature(signature, broadcast) {
var typeToRemove = null;
store.forEach(function (entry, type) {
if (entry.frame && entry.frame.signature === signature) typeToRemove = type;
});
if (typeToRemove) clearType(typeToRemove, { broadcast: !!broadcast });
else if (signature) signatures.delete(signature);
}
/**
* Commit a `set` to the in-memory store, persist it, and fire listeners.
* Idempotent: if the frame's `signature` matches the last-applied signature
* for this slot (tracked in {@link signatures}), nothing happens and `false`
* is returned. When `doBroadcast` is true the set is forwarded to other tabs
* via the scope-gated broadcast (session/device only).
* @param {object} frame
* @param {object} snapshot
* @param {string} type
* @param {boolean} doBroadcast
* @returns {boolean} `true` if state changed.
*/
function commitSet(frame, snapshot, type, doBroadcast) {
var key = snapshot.slot && snapshot.slot.key;
var sig = frame.signature;
if (key && sig !== undefined && signatures.get(key) === sig) return false;
var entry = { frame: frame, snapshot: snapshot };
store.set(type, entry);
persistEntry(type, entry);
fireListeners(type, frame, snapshot);
if (key && sig !== undefined) signatures.set(key, sig);
if (doBroadcast) {
var scope = snapshot.slot && snapshot.slot.scope;
broadcast({ kind: 'set', frame: frame }, scope);
}
return true;
}
/**
* Apply a `set` directive: store/refresh a slot's snapshot (idempotently),
* broadcasting to other tabs.
* @param {object} directive `{ snapshot_frame }`
*/
function applySet(directive) {
var frame = directive.snapshot_frame;
if (!frame || !frame.content) return;
var snapshot;
try { snapshot = JSON.parse(frame.content); } catch (e) { return; }
var type = snapshot.slot && snapshot.slot.type;
if (!type) return;
commitSet(frame, snapshot, type, true);
}
/**
* Apply a `clear` directive. The directive carries a slot key, so the type
* holding that key is resolved and removed.
* @param {object} directive `{ key }`
*/
function applyClear(directive) {
if (directive.key == null) return;
clearByKey(directive.key, true);
}
/**
* Apply a live `set` event received over the realtime channel. The frame is
* committed (idempotently) and, when new, broadcast to sibling tabs via the
* scope-agnostic {@link broadcastAlways} so every tab sees it regardless of
* which (or how many) tabs hold a subscription.
* @param {object} frame
*/
function applyRemoteSet(frame) {
try {
var snapshot = JSON.parse(frame.content);
var type = snapshot.slot && snapshot.slot.type;
if (!type) return;
if (commitSet(frame, snapshot, type, false)) {
broadcastAlways({ kind: 'set', frame: frame });
renderAll();
}
} catch (e) { /* malformed frame */ }
}
/** Apply a live `clear` event received over the realtime channel. */
function applyRemoteClear(key) {
if (key == null) return;
signatures.delete(key);
clearByKey(key, false);
broadcastAlways({ kind: 'clear', key: key });
renderAll();
}
// ---------------------------------------------------------------------------
// Snapshot freshness & request headers
// ---------------------------------------------------------------------------
/**
* Categorize a held snapshot relative to the current time.
* @returns {'silent'|'always'|'invalid'|'stale'|'fresh'}
* - `silent`: unidirectional (`transmit_after` undefined) - never sent.
* - `always`: `transmit_after === as_at` - send the base64 frame each time.
* - `invalid`: past `invalid_after` - drop and refetch.
* - `stale`: past `transmit_after` but not yet invalid - pre-flight first.
* - `fresh`: still cached server-side - send the `as_at` reference.
*/
function entryCategory(entry) {
var snap = entry.snapshot;
var transmit = snap.transmit_after;
if (transmit === undefined || transmit === null) return 'silent';
if (transmit === snap.as_at) return 'always';
var now = Date.now();
var invalidAt = parseTime(snap.invalid_after);
var transmitAt = parseTime(transmit);
if (invalidAt !== undefined && now >= invalidAt) return 'invalid';
if (transmitAt !== undefined && now >= transmitAt) return 'stale';
return 'fresh';
}
/**
* Drop locally-invalid snapshots and pre-flight any stale ones. Pre-flighting
* posts the stale frames to the slot endpoint and applies the returned `set`
* directives, refreshing their `as_at` values before the real request runs.
*
* Single-flight: concurrent callers share one in-flight preparation.
* @returns {Promise}
*/
var preparePromise = null;
function prepareSlots() {
if (preparePromise) return preparePromise;
preparePromise = doPrepareSlots().then(function () {
preparePromise = null;
}, function () {
preparePromise = null;
});
return preparePromise;
}
async function doPrepareSlots() {
var stale = [];
store.forEach(function (entry, type) {
var cat = entryCategory(entry);
if (cat === 'invalid') {
clearType(type, { broadcast: false });
} else if (cat === 'stale') {
stale.push(entry.frame);
}
});
if (stale.length) {
var directives = await postSlots(stale);
var pfResult = applyDirectives(directives, { originElement: null });
executeTerminal(pfResult);
}
}
/**
* Build the `X-Statum-Slot` header values for every held slot, using the
* freshness rules. Assumes {@link prepareSlots} has just run.
* @returns {string[]}
*/
function buildSlotHeaders() {
var headers = [];
store.forEach(function (entry) {
var snap = entry.snapshot;
var cat = entryCategory(entry);
if (cat === 'silent' || cat === 'invalid') return;
if (cat === 'always') {
headers.push(b64encode(JSON.stringify(entry.frame)));
} else {
headers.push('key=' + snap.slot.key + '; as_at=' + snap.as_at);
}
});
return headers;
}
/**
* Collect the current frames held for the given slot keys, in the order the
* keys are first supplied. Used by the `transmit` directive (which forces a
* slot's frame to be posted as if its `transmit_after` had elapsed). Keys the
* client does not currently hold are skipped.
* @param {string[]} keys
* @returns {object[]}
*/
function collectFramesForKeys(keys) {
var keySet = Object.create(null);
for (var i = 0; i < keys.length; i++) keySet[keys[i]] = true;
var frames = [];
store.forEach(function (entry) {
var key = entry.snapshot.slot && entry.snapshot.slot.key;
if (key && keySet[key]) {
frames.push(entry.frame);
delete keySet[key];
}
});
return frames;
}
// ---------------------------------------------------------------------------
// HTTP helpers
// ---------------------------------------------------------------------------
/** True if a response is a Statum directive response. */
function isStatum(res) {
return (res.headers.get('Content-Type') || '').indexOf(STATUM_CONTENT_TYPE) !== -1;
}
/**
* POST an array of frames to the slot endpoint (the pre-flight target) and
* return its directive array. This request intentionally carries no slot
* headers (it is itself the refresh).
* @param {object[]} frames
* @returns {Promise