.
+function candidateFromKey(key) {
+ const p = String(key).split('-');
+ if (p[0] === 'uxmss' && p.length === 3) {
+ const ots = p[1], w = parseInt(p[2], 10);
+ if (!['TW', 'WC'].includes(ots) || ![16, 32, 64, 128, 256, 65536].includes(w)) return null;
+ return buildUxmss(ots, w);
+ }
+ if (p[0] === 'xmssmt' && p.length === 5) {
+ const ots = p[1], w = parseInt(p[2], 10);
+ const h = parseInt(p[3], 10), d = parseInt(p[4], 10);
+ if (!['TW', 'WC'].includes(ots) || ![16, 32, 64, 128, 256, 65536].includes(w)) return null;
+ if (!Number.isInteger(h) || h < 2 || h > 60 ||
+ !Number.isInteger(d) || d < 1 || h % d !== 0) return null;
+ return buildXmssMt(ots, h, d, w);
+ }
+ return null;
+}
+
+function writeHash() {
+ const parts = [];
+ const keys = state.candidates.slice(1).map(c => c.key).filter(Boolean);
+ if (keys.join(',') !== DEFAULT_CAND_KEYS.join(',')) parts.push('cand=' + keys.join(','));
+ if (HASH_X_KEYS.some(k => sweepState.X[k] !== SWEEP_DEFAULTS_X[k]))
+ parts.push('b=' + HASH_X_KEYS.map(k => sweepState.X[k]).join(','));
+ if (HASH_W_KEYS.some(k => sweepState.W[k] !== SWEEP_DEFAULTS_W[k]))
+ parts.push('w=' + HASH_W_KEYS.map(k => sweepState.W[k]).join(','));
+ if (sweepState.sort.col !== 'distance' || sweepState.sort.dir !== 'asc')
+ parts.push('sort=' + sweepState.sort.col + '.' + sweepState.sort.dir);
+ if (SIGNER_MODE !== 'cached') parts.push('m=' + SIGNER_MODE);
+ replaceHash(parts);
+}
+
+const scheduleHashWrite = hashWriter(writeHash);
+const requestSweepRender = oncePerFrame(renderSweepTable);
+
+function applyHash() {
+ const params = readHash();
+ if (params.b) {
+ const v = params.b.split(',').map(parseFloat);
+ if (v.length === 6 && v.every(isFinite)) {
+ sweepState.X.size = clamp(v[0], 0.10, 1.00);
+ sweepState.X.kg = clamp(v[1], 0.10, 1e15);
+ sweepState.X.sg = clamp(v[2], 0.10, 1e15);
+ sweepState.X.sv = clamp(v[3], 0.10, 1e15);
+ sweepState.X.cb = clamp(v[4], 0.10, 1e15);
+ sweepState.X.minQs = clamp(Math.round(v[5]), 0, 40);
+ }
+ }
+ if (params.w) {
+ const v = params.w.split(',').map(parseFloat);
+ if (v.length === 5 && v.every(isFinite))
+ HASH_W_KEYS.forEach((k, i) => sweepState.W[k] = clamp(v[i], 0.10, 10.00));
+ }
+ if (params.sort) {
+ const [col, dir] = params.sort.split('.');
+ if (SWEEP_COLS.some(c => c.field === col) && ['asc', 'desc'].includes(dir))
+ sweepState.sort = { col, dir };
+ }
+ if (params.m === 'cold') SIGNER_MODE = 'cold';
+ if (params.cand !== undefined) {
+ const seen = new Set();
+ const cands = [];
+ for (const key of params.cand.split(',').filter(Boolean)) {
+ if (seen.has(key)) continue;
+ seen.add(key);
+ const c = candidateFromKey(key);
+ if (c) cands.push(c);
+ }
+ state.candidates = [state.candidates[0], ...cands];
+ }
+}
+
+function exportSweepCSV() {
+ const std = state.candidates[0].metrics;
+ const header = ['scheme', 'label', 'max_sigs', 'size_B', 'keygen_C',
+ 'siggen_cached_C', 'siggen_cold_C', 'state_B',
+ 'sigver_C', 'sigver_worst_C', 'rho', 'rho_worst',
+ 'rho_vs_schnorr', 'rho_worst_vs_schnorr', 'schnorr_rho',
+ 'signer', 'distance'];
+ const lines = [header.join(',')];
+ for (const f of sweepState.lastSurvivors) {
+ const c = f.cached, m = c.metrics;
+ lines.push([c.scheme, '"' + c.label + '"',
+ m.qsLog2 !== null ? '2^' + m.qsLog2 : m.qsExact,
+ m.size, m.keygen, m.siggen, m.siggenCold, m.state !== undefined ? m.state : '',
+ m.sigver, m.sigverWorst,
+ (m.sigver / m.size).toFixed(6), (m.sigverWorst / m.size).toFixed(6),
+ (m.sigver / m.size / SCHNORR.cb64).toFixed(6),
+ (m.sigverWorst / m.size / SCHNORR.cb64).toFixed(6),
+ SCHNORR.cb64.toFixed(6),
+ SIGNER_MODE,
+ sweepDistance(m, std, sweepState.W).toFixed(6)].join(','));
+ }
+ downloadCSV('stateful_candidates', lines);
+}
+
+function setupAddForm() {
+ const showBtn = document.getElementById('show-add');
+ const form = document.getElementById('add-form');
+ const cancelBtn = document.getElementById('cancel-add');
+ const schemeSel = document.getElementById('f-scheme');
+ const errBox = document.getElementById('f-error');
+
+ showBtn.addEventListener('click', () => {
+ form.hidden = false;
+ showBtn.hidden = true;
+ errBox.hidden = true;
+ });
+ cancelBtn.addEventListener('click', () => {
+ form.hidden = true;
+ showBtn.hidden = false;
+ errBox.hidden = true;
+ });
+
+ function updateVisibility() {
+ const scheme = schemeSel.value;
+ form.querySelectorAll('[data-scheme]').forEach(el => {
+ el.style.display = (el.dataset.scheme === scheme) ? '' : 'none';
+ });
+ }
+ schemeSel.addEventListener('change', updateVisibility);
+ updateVisibility();
+
+ const hInput = document.getElementById('f-h');
+ const dSel = document.getElementById('f-d');
+ function refreshDOptions() {
+ const h = parseInt(hInput.value, 10);
+ const prev = parseInt(dSel.value, 10);
+ dSel.innerHTML = '';
+ if (!Number.isInteger(h) || h < 2) return;
+ const divisors = [];
+ for (let d = 1; d <= h; d++) if (h % d === 0) divisors.push(d);
+ for (const d of divisors) {
+ const opt = document.createElement('option');
+ opt.value = String(d);
+ opt.textContent = `${d} (h' = ${h / d})`;
+ dSel.appendChild(opt);
+ }
+ if (divisors.includes(prev)) dSel.value = String(prev);
+ else dSel.value = String(divisors[0] || 1);
+ }
+ hInput.addEventListener('input', refreshDOptions);
+ refreshDOptions();
+
+ form.addEventListener('submit', e => {
+ e.preventDefault();
+ errBox.hidden = true;
+ const scheme = schemeSel.value;
+ const ots = document.getElementById('f-ots').value;
+ const w = parseInt(document.getElementById('f-w').value, 10);
+
+ try {
+ let cand;
+ if (scheme === 'xmssmt') {
+ const h = parseInt(document.getElementById('f-h').value, 10);
+ const d = parseInt(document.getElementById('f-d').value, 10);
+ if (!Number.isInteger(h) || h < 2 || h > 60) throw new Error(`h must be an integer in [2, 60] (got ${h}).`);
+ if (!Number.isInteger(d) || d < 1) throw new Error(`d must be a positive integer (got ${d}).`);
+ if (h % d !== 0) throw new Error(`d (${d}) must divide h (${h}) evenly. Got h/d = ${(h/d).toFixed(3)}.`);
+ cand = buildXmssMt(ots, h, d, w);
+ } else {
+ cand = buildUxmss(ots, w);
+ if (cand.metrics.size <= 0) throw new Error(`UXMSS budget too tight for ${ots}/w=${w}: no signature fits under ${UXMSS_TARGET_SIZE} B.`);
+ }
+ state.candidates.push(cand);
+ render();
+ form.hidden = true;
+ showBtn.hidden = false;
+ } catch (err) {
+ errBox.textContent = err.message;
+ errBox.hidden = false;
+ }
+ });
+
+ document.getElementById('reset-defaults').addEventListener('click', () => {
+ state.candidates = defaultCandidates();
+ render();
+ });
+}
+
+// Called after every change of state.candidates.
+function render() {
+ renderComparison();
+ if (SWEEP_FACTORIES.length > 0) renderSweepTable();
+ else scheduleHashWrite();
+}
+
+function renderSchnorrNote() {
+ const s = SCHNORR;
+ const m = state.candidates[0].metrics;
+ const cb = m.sigver / m.size;
+ const src = s.live
+ ? `kappa.json${s.commit ? ` at secp256k1 ${s.commit}` : ''}${s.run ? `, ${s.run}` : ''}` +
+ `${s.machine ? `, ${s.machine}` : ''}${s.preliminary ? ', preliminary' : ''}`
+ : 'built-in value, the live kappa.json did not load';
+ document.getElementById('about-schnorr').innerHTML =
+ `The average ρ divided by the ρ of a BIP340 Schnorr verification, ${s.cb64.toFixed(2)} C/B ` +
+ `(${s.impl}, one 64-byte signature; ` +
+ `bip340-vs-sha256 , ${src}). ` +
+ `SLH-DSA-128s has ρ = ${fmtRho(cb)} C/B, ${fmtRatio(cb / s.cb64)} Schnorr.
`;
+}
+
+async function setup() {
+ const [siteData, schnorr] = await Promise.all([loadSiteData(), loadSchnorrRef()]);
+ SITE_DATA = siteData;
+ SCHNORR = schnorr;
+ if (SITE_DATA) selfCheckStateful(SITE_DATA);
+ state.candidates = defaultCandidates();
+ applyHash();
+ document.getElementById('signer-mode').value = SIGNER_MODE;
+ document.getElementById('signer-mode').addEventListener('change', e => {
+ SIGNER_MODE = e.target.value === 'cold' ? 'cold' : 'cached';
+ render();
+ });
+ setupAddForm();
+ render();
+ renderSchnorrNote();
+ buildSweepPool(); // needs the SLH-DSA-128s candidate
+ computeSweepXMax();
+ clampSweepXToMax();
+ renderSweepFilters();
+ renderSweepTable();
+
+ bindShareButton(writeHash);
+ document.getElementById('sweep-export').addEventListener('click', exportSweepCSV);
+}
+// The tests load this file under node, without a document.
+if (typeof document !== 'undefined') setup();
diff --git a/site/js/stateless.js b/site/js/stateless.js
new file mode 100644
index 0000000..ab55e2e
--- /dev/null
+++ b/site/js/stateless.js
@@ -0,0 +1,811 @@
+// The Parameter Explorer: filters the candidate pools of data.json by bounds
+// relative to SLH-DSA-128s, ranks what is left by distance, and compares a
+// candidate of your own.
+'use strict';
+
+// SLH-DSA-compatible Winternitz parameters: log2(w) divides 8, so message
+// digits stay byte-aligned.
+const ALLOWED_W = [2, 4, 16, 256];
+
+// Exploratory w; a checkbox adds them to the SPX pool.
+const OPTIONAL_W = [32, 64, 128];
+const UNIVERSE_W = [...ALLOWED_W, ...OPTIONAL_W];
+
+// Explorer rows use data.json's field names and carry ρ.
+function metrics(p) {
+ const m = slhMetrics(p);
+ return {
+ size: m.size, kg: m.kg, sg: m.sg, sv: m.sv, sv_worst: m.svWorst,
+ cb: m.sv / m.size, cb_worst: m.svWorst / m.size,
+ };
+}
+
+const STD_M = metrics(SLH);
+
+// The pool of a scheme, from data.json (export_site_data.sage).
+function poolFromData(data, scheme) {
+ const p = data.pools[scheme];
+ const idx = fieldIndex(p);
+ // A data.json made for another grid can hold other w.
+ const rows = p.rows.filter(r => UNIVERSE_W.includes(r[idx.w]));
+ if (rows.length !== p.rows.length) {
+ console.warn(`pool ${scheme}: dropped ${p.rows.length - rows.length} rows with ` +
+ `w outside {${UNIVERSE_W.join(', ')}} — regenerate data.json (stale grid).`);
+ }
+ return rows.map(r => {
+ const c = {
+ h: r[idx.h], d: r[idx.d], k: r[idx.k], a: r[idx.a], w: r[idx.w],
+ swn: r[idx.swn], mmax: r[idx.mmax],
+ size: r[idx.size], kg: r[idx.kg], sg: r[idx.sg],
+ sv: r[idx.sv], sv_worst: r[idx.sv_worst],
+ };
+ c.cb = c.sv / c.size;
+ c.cb_worst = c.sv_worst / c.size;
+ return c;
+ });
+}
+
+// Field of metric k: worst-case mode switches SigVer and ρ to their worst case.
+function mkey(k) {
+ return state.useWorst && (k === 'sv' || k === 'cb') ? k + '_worst' : k;
+}
+
+const FILTER_STEPS = [
+ { key: 'size', metric: 'size', label: 'Size' },
+ { key: 'kg', metric: 'kg', label: 'KeyGen' },
+ { key: 'sg', metric: 'sg', label: 'SigGen' },
+ { key: 'sv', metric: 'sv', label: 'SigVer' },
+ { key: 'cb', metric: 'cb', label: 'ρ' },
+];
+
+// Applies the bounds X in turn. Returns the count after each step, the
+// survivors, and the step that removed each candidate (null if none did).
+function runFilters(pool, X) {
+ const eliminatedAt = new Map();
+ pool.forEach(c => eliminatedAt.set(c, null));
+
+ const stepCounts = [{ name: 'Initial pool', count: pool.length }];
+ let cur = pool;
+ FILTER_STEPS.forEach((step, idx) => {
+ const mk = mkey(step.metric);
+ const stdVal = STD_M[mk];
+ const next = [];
+ for (const c of cur) {
+ if (c[mk] <= X[step.key] * stdVal) {
+ next.push(c);
+ } else {
+ if (eliminatedAt.get(c) === null) eliminatedAt.set(c, idx);
+ }
+ }
+ cur = next;
+ const worstTag = (mk !== step.metric) ? ', worst' : '';
+ stepCounts.push({
+ name: `${step.label}${worstTag} ≤ ${fmtX(X[step.key])}×`,
+ count: cur.length
+ });
+ });
+
+ return { stepCounts, survivors: cur, eliminatedAt };
+}
+
+// Ratios to SLH-DSA-128s, with the worst-case SigVer and ρ in worst-case mode.
+function ratiosOf(c) {
+ const r = {};
+ for (const k of DISTANCE_KEYS) r[k] = c[mkey(k)] / STD_M[mkey(k)];
+ return r;
+}
+
+function distanceOf(c, W) {
+ return weightedDistance(ratiosOf(c), state.lastRanges, W);
+}
+
+const DEFAULTS_X = { size: 1.00, kg: 1.00, sg: 1.00, sv: 1.00, cb: 1.00 };
+const DEFAULTS_W = { size: 1.0, kg: 1.0, sg: 1.0, sv: 1.0, cb: 1.0 };
+
+const state = {
+ initialPool: [],
+ siteData: null, // parsed data.json, null if it did not load
+ pools: {}, // scheme -> candidate pool
+ scheme: 'SPX',
+ useWorst: false, // bounds and ranking on worst-case SigVer and ρ
+ showOptW: false, // include OPTIONAL_W
+ xMax: { kg: 20, sg: 20, sv: 20, cb: 20 },
+ X: { ...DEFAULTS_X },
+ W: { ...DEFAULTS_W },
+ // results of the last update
+ lastEliminatedAt: null,
+ lastSurvivors: [],
+ lastWinner: null,
+ // scatter geometry, for hit-testing
+ scatterLayout: { pad: 12, w: 0, h: 0 },
+ // ratio ranges over the survivors, for the distance
+ lastRanges: Object.fromEntries(['size', 'kg', 'sg', 'sv', 'cb'].map(k => [k, { min: 0, max: 1 }])),
+};
+
+// Winternitz parameters in the pool: OPTIONAL_W exist in the SPX pool only.
+function activeWSet() {
+ const act = [...ALLOWED_W];
+ if (state.showOptW) act.push(...OPTIONAL_W);
+ return act.sort((a, b) => a - b);
+}
+
+function rebuildInitialPool() {
+ const act = activeWSet();
+ state.initialPool = (state.pools[state.scheme] || []).filter(c => act.includes(c.w));
+}
+
+// Bound slider caps: the largest ratio of each metric in any pool, average or
+// worst case, so every candidate stays reachable (KeyGen ratios of the d = 2
+// candidates reach tens of thousands).
+function computeXMax() {
+ const maxes = { kg: 0, sg: 0, sv: 0, cb: 0 };
+ for (const scheme of Object.keys(state.pools)) {
+ for (const c of state.pools[scheme]) {
+ if (c.kg / STD_M.kg > maxes.kg) maxes.kg = c.kg / STD_M.kg;
+ if (c.sg / STD_M.sg > maxes.sg) maxes.sg = c.sg / STD_M.sg;
+ maxes.sv = Math.max(maxes.sv, c.sv / STD_M.sv, c.sv_worst / STD_M.sv_worst);
+ maxes.cb = Math.max(maxes.cb, c.cb / STD_M.cb, c.cb_worst / STD_M.cb_worst);
+ }
+ }
+ state.xMax = { kg: niceCap(maxes.kg), sg: niceCap(maxes.sg),
+ sv: niceCap(maxes.sv), cb: niceCap(maxes.cb) };
+}
+
+function clampXToMax() {
+ for (const k of ['kg', 'sg', 'sv', 'cb']) {
+ if (state.X[k] > state.xMax[k]) state.X[k] = state.xMax[k];
+ }
+}
+
+// Tuples swept per w value: (h, d) pairs with d | h times the k and a ranges.
+function consideredPerW(g) {
+ let hd = 0;
+ for (let h = g.h[0]; h <= g.h[1]; h++)
+ for (let d = g.d[0]; d <= g.d[1]; d++) if (h % d === 0) hd++;
+ return hd * (g.k[1] - g.k[0] + 1) * (g.a[1] - g.a[0] + 1);
+}
+
+// Seeded random numbers, so the dots keep their places between visits.
+function mulberry32(seed) {
+ let s = seed | 0;
+ return () => {
+ s = (s + 0x6D2B79F5) | 0;
+ let t = s;
+ t = Math.imul(t ^ (t >>> 15), t | 1);
+ t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+ return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+ };
+}
+
+function renderControls() {
+ const filterDefs = [
+ { key: 'size', label: 'Size', min: 0.30, max: 1.00, step: 0.01, dp: 2 },
+ { key: 'kg', label: 'KeyGen', min: 0.10, max: state.xMax.kg, log: true },
+ { key: 'sg', label: 'SigGen', min: 0.10, max: state.xMax.sg, log: true },
+ { key: 'sv', label: 'SigVer', min: 0.10, max: state.xMax.sv, log: true },
+ { key: 'cb', label: 'ρ', min: 0.10, max: state.xMax.cb, log: true },
+ ];
+ document.getElementById('filter-controls').innerHTML = filterDefs.map(d => `
+
+
+ ${d.label}
+
+
+ `).join('');
+
+ const weightDefs = [
+ { key: 'size', label: 'Size', min: 0.10, max: 20.00, step: 0.10, dp: 1 },
+ { key: 'kg', label: 'KeyGen', min: 0.10, max: 20.00, step: 0.10, dp: 1 },
+ { key: 'sg', label: 'SigGen', min: 0.10, max: 20.00, step: 0.10, dp: 1 },
+ { key: 'sv', label: 'SigVer', min: 0.10, max: 20.00, step: 0.10, dp: 1 },
+ { key: 'cb', label: 'ρ', min: 0.10, max: 20.00, step: 0.10, dp: 1 },
+ ];
+ document.getElementById('weight-controls').innerHTML = weightDefs.map(d => `
+
+
+ ${d.label}
+
+
+ `).join('');
+
+ bindSliderPairs(document.getElementById('filter-controls'), state.X, requestUpdate);
+ bindSliderPairs(document.getElementById('weight-controls'), state.W, requestUpdate);
+}
+
+function renderFunnel(stepCounts) {
+ const max = stepCounts[0].count || 1;
+ const html = stepCounts.map((s, i) => {
+ const widthPct = (s.count / max) * 100;
+ const prev = i > 0 ? stepCounts[i - 1].count : null;
+ const eliminated = prev !== null && s.count === 0 ? 'eliminated' : '';
+ return `
+
+
${s.name}
+
+
${s.count.toLocaleString('en-US')}
+
+
+
+
+
+ `;
+ document.getElementById('scatter-legend').innerHTML = legendHTML;
+}
+
+// Colour of a ratio to SLH-DSA-128s; lower is better.
+function ratioTone(r) {
+ if (r <= 0.8) return 'good';
+ if (r <= 1.05) return 'warn';
+ return 'bad';
+}
+
+// Rows of the comparison tables: each metric next to its SLH-DSA-128s value.
+function comparisonRows(c) {
+ const schnorr = SCHNORR.cb64;
+ const rows = [
+ ['Size (B)', c.size, STD_M.size, fmtNum],
+ ['KeyGen (C)', c.kg, STD_M.kg, fmtNum],
+ ['SigGen (C)', c.sg, STD_M.sg, fmtNum],
+ ['SigVer (C)', c.sv, STD_M.sv, fmtNum],
+ ['SigVer, worst (C)', c.sv_worst, STD_M.sv_worst, fmtNum],
+ ['ρ (C/B)', c.cb, STD_M.cb, fmtRho],
+ ['ρ, worst (C/B)', c.cb_worst, STD_M.cb_worst, fmtRho],
+ ['ρ ÷ Schnorr', c.cb / schnorr, STD_M.cb / schnorr, fmtRatio],
+ ['ρ ÷ Schnorr, worst', c.cb_worst / schnorr, STD_M.cb_worst / schnorr, fmtRatio],
+ ];
+ return rows.map(([name, value, std, fmtValue]) => {
+ const r = value / std;
+ return `${name} ${fmtValue(value)} ${fmtValue(std)} ` +
+ `${fmtRatio(r)}
+ Metric ${column} SLH-DSA-128s Ratio ${comparisonRows(c)}
+
`;
+}
+
+function renderWinner(winner) {
+ const el = document.getElementById('winner');
+ if (!winner) {
+ el.innerHTML = 'No candidate is within all bounds. Relax one.
';
+ return;
+ }
+ const d = distanceOf(winner, state.W);
+ el.innerHTML = `
+
+
+
(${winner.h}, ${winner.d}, ${winner.k}, ${winner.a}, ${winner.w})
+
Distance ${d.toFixed(4)} · h′ = ${winner.h / winner.d}
+ ${winner.swn ? `
Swn = ${winner.swn}${winner.mmax ? ` · mmax = ${winner.mmax}` : ''}
` : ''}
+
+
${comparisonTable(winner, 'Winner')}
+
No candidate pool.
';
+ return;
+ }
+ const { stepCounts, survivors, eliminatedAt } = runFilters(state.initialPool, state.X);
+ renderFunnel(stepCounts);
+ state.lastRanges = ratioRanges(survivors.map(ratiosOf));
+ let winner = null;
+ if (survivors.length > 0) {
+ winner = survivors[0];
+ let bestD = distanceOf(winner, state.W);
+ for (let i = 1; i < survivors.length; i++) {
+ const d = distanceOf(survivors[i], state.W);
+ if (d < bestD) { bestD = d; winner = survivors[i]; }
+ }
+ }
+ state.lastEliminatedAt = eliminatedAt;
+ state.lastSurvivors = survivors;
+ state.lastWinner = winner;
+ renderScatter(eliminatedAt, survivors, winner);
+ renderWinner(winner);
+ scheduleHashWrite();
+}
+
+const requestUpdate = oncePerFrame(update);
+
+function findNearestCandidate(mx, my) {
+ const { pad, w, h } = state.scatterLayout;
+ let best = null, bestD = 12 * 12; // 12px hit radius (squared)
+ for (const c of state.initialPool) {
+ const x = pad + c._sx * w;
+ const y = pad + c._sy * h;
+ const dx = mx - x, dy = my - y;
+ const d2 = dx * dx + dy * dy;
+ if (d2 < bestD) { bestD = d2; best = c; }
+ }
+ return best;
+}
+
+function statusFor(c) {
+ if (c === state.lastWinner) return { cls: 'winner', text: '★ Best candidate' };
+ const elimStep = state.lastEliminatedAt ? state.lastEliminatedAt.get(c) : null;
+ if (elimStep === null || elimStep === undefined) {
+ return { cls: 'survivor', text: 'Within all bounds' };
+ }
+ return { cls: 'eliminated', text: `Outside the ${FILTER_STEPS[elimStep].label} bound` };
+}
+
+function renderTooltip(c, clientX, clientY) {
+ const tt = document.getElementById('tooltip');
+ if (!c) { tt.style.display = 'none'; document.getElementById('hover-ring').style.display = 'none'; return; }
+ const st = statusFor(c);
+ const isSurvivor = st.cls === 'survivor' || st.cls === 'winner';
+ const distHTML = isSurvivor
+ ? `Distance ${distanceOf(c, state.W).toFixed(4)}
`
+ : '';
+
+ tt.innerHTML = `
+(${c.h}, ${c.d}, ${c.k}, ${c.a}, ${c.w})${c.swn ? ` Swn =${c.swn}${c.mmax ? `, mmax=${c.mmax}` : ''} ` : ''}
+${st.text}
+
+ candidate SLH-DSA-128s ratio ${comparisonRows(c)}
+
+${distHTML}
+ `;
+ tt.style.display = 'block';
+
+ // Right of and below the cursor, flipped where that leaves the window.
+ const ttRect = tt.getBoundingClientRect();
+ const pad = 12;
+ let x = clientX + pad;
+ let y = clientY + pad;
+ if (x + ttRect.width > window.innerWidth - 8) x = clientX - ttRect.width - pad;
+ if (y + ttRect.height > window.innerHeight - 8) y = clientY - ttRect.height - pad;
+ tt.style.left = Math.max(8, x) + 'px';
+ tt.style.top = Math.max(8, y) + 'px';
+
+ const canvas = document.getElementById('scatter');
+ const rect = canvas.getBoundingClientRect();
+ const { pad: scPad, w, h } = state.scatterLayout;
+ const ring = document.getElementById('hover-ring');
+ ring.style.left = (rect.left + scPad + c._sx * w) - canvas.parentElement.getBoundingClientRect().left + 'px';
+ ring.style.top = (rect.top + scPad + c._sy * h) - canvas.parentElement.getBoundingClientRect().top + 'px';
+ ring.style.display = 'block';
+}
+
+function validateCustom(p) {
+ const errors = [];
+ const warnings = [];
+ const isPosInt = v => Number.isFinite(v) && v > 0 && Math.floor(v) === v;
+
+ if (!isPosInt(p.h)) errors.push('h must be a positive integer.');
+ if (!isPosInt(p.d)) errors.push('d must be a positive integer.');
+ if (!isPosInt(p.k)) errors.push('k must be a positive integer.');
+ if (!isPosInt(p.a)) errors.push('a must be a positive integer.');
+ if (!isPosInt(p.w) || p.w < 2) errors.push('w must be an integer ≥ 2.');
+
+ if (errors.length) return { valid: false, errors, warnings };
+
+ if (p.h % p.d !== 0) {
+ errors.push(`d must divide h (h/d = ${(p.h / p.d).toFixed(3)}).`);
+ }
+ if (!UNIVERSE_W.includes(p.w)) {
+ errors.push(`w must be one of ${UNIVERSE_W.join(', ')}.`);
+ } else if (OPTIONAL_W.includes(p.w)) {
+ warnings.push(`w = ${p.w} is exploratory: its digits do not fit whole bytes, as SLH-DSA requires.`);
+ }
+
+ if (errors.length) return { valid: false, errors, warnings };
+
+ const secBits = computeSecurityBits(Q_S_LOG2, p.h, p.k, p.a);
+ if (secBits < 128) {
+ warnings.push(`Below 128-bit security: ${secBits.toFixed(1)} bits at qs = 240 .`);
+ }
+
+ return { valid: true, errors: [], warnings, secBits };
+}
+
+function renderCustom() {
+ const p = {
+ h: parseInt(document.getElementById('cust-h').value, 10),
+ d: parseInt(document.getElementById('cust-d').value, 10),
+ k: parseInt(document.getElementById('cust-k').value, 10),
+ a: parseInt(document.getElementById('cust-a').value, 10),
+ w: parseInt(document.getElementById('cust-w').value, 10),
+ };
+
+ const v = validateCustom(p);
+ const statusEl = document.getElementById('custom-status');
+ const resultEl = document.getElementById('custom-result');
+ scheduleHashWrite();
+
+ if (!v.valid) {
+ statusEl.className = 'custom-status invalid';
+ statusEl.innerHTML = `Invalid. ${v.errors.map(e => `${e} `).join('')} `;
+ resultEl.innerHTML = '';
+ return;
+ }
+
+ const m = metrics(p);
+
+ // 2^(h/d) overflows a double for h' above about 1024, and the model stops
+ // being meaningful long before that.
+ if (!isFinite(m.kg) || !isFinite(m.sg)) {
+ statusEl.className = 'custom-status invalid';
+ statusEl.innerHTML = `Out of range. h′ = ${p.h / p.d} is too large for this model; ` +
+ `reduce h or increase d.`;
+ resultEl.innerHTML = '';
+ return;
+ }
+
+ if (v.warnings.length) {
+ statusEl.className = 'custom-status warn';
+ statusEl.innerHTML = `Valid, with notes: ${v.warnings.map(w => `${w} `).join('')} `;
+ } else {
+ statusEl.className = 'custom-status ok';
+ const sameAsStd = p.h === SLH.h && p.d === SLH.d && p.k === SLH.k && p.a === SLH.a && p.w === SLH.w;
+ statusEl.innerHTML = `Valid. ${sameAsStd ? ' This is SLH-DSA-128s.' : ''}`;
+ }
+
+ const hp = p.h / p.d;
+ const chains = wotsL(p.w, 'TW');
+ const secRaw = forsForgeryExponent(Q_S_LOG2, p.h, p.k, p.a);
+ const rawTxt = secRaw > 300 ? '> 300' : secRaw.toFixed(1);
+ const secLabel = secRaw >= 128
+ ? `128 bits ✓ ` +
+ `(${rawTxt} bits against FORS forgery, capped by the 2−128 preimage bound) `
+ : `${secRaw.toFixed(1)} bits `;
+
+ resultEl.innerHTML = `
+
+
+
(${p.h}, ${p.d}, ${p.k}, ${p.a}, ${p.w})
+
+
Layer height h′ = ${hp}
+
WOTS chains: ${chains}
+
Security at qs = 240 : ${secLabel}
+
+
+
${comparisonTable(m, 'Yours')}
+
${SCHEME_LABELS[s]} `).join('');
+ host.querySelectorAll('button').forEach(b =>
+ b.addEventListener('click', () => activateScheme(b.dataset.scheme)));
+}
+
+function schnorrNote() {
+ const s = SCHNORR;
+ const src = s.live
+ ? `kappa.json${s.commit ? ` at secp256k1 ${s.commit}` : ''}${s.run ? `, ${s.run}` : ''}` +
+ `${s.machine ? `, ${s.machine}` : ''}${s.preliminary ? ', preliminary' : ''}`
+ : 'built-in value, the live kappa.json did not load';
+ return `Schnorr reference: a BIP340 verification takes ${s.cb64.toFixed(2)} C/B ` +
+ `(${s.impl}, one 64-byte signature; ` +
+ `bip340-vs-sha256 , ${src}). ` +
+ `SLH-DSA-128s has ρ = ${fmtRho(STD_M.cb)} C/B, ${fmtRatio(STD_M.cb / s.cb64)} Schnorr ` +
+ `(${fmtRatio(STD_M.cb_worst / s.cb64)} worst).
`;
+}
+
+function renderInfoStrip() {
+ const d = state.siteData;
+ if (!d) {
+ document.getElementById('initial-info').textContent = 'No candidate pool: data.json did not load.';
+ document.getElementById('about-pool').innerHTML = schnorrNote();
+ return;
+ }
+ const pool = state.initialPool;
+ const act = activeWSet();
+ const wtxt = state.scheme === 'SPX'
+ ? `w = {${act.join(', ')}}`
+ : `(w, Swn ) ∈ {(16, 240), (256, 2040)}`;
+ const swept = state.scheme === 'SPX'
+ ? consideredPerW(d.meta.grid) * act.length
+ : d.pools[state.scheme].considered;
+ document.getElementById('initial-info').innerHTML =
+ `Scheme ${SCHEME_LABELS[state.scheme]} · ` +
+ `${swept.toLocaleString('en-US')} tuples swept · ` +
+ `${pool.length.toLocaleString('en-US')} pass the initial bounds`;
+ const source = `Pool: data.json, generated ${d.meta.generated} from commit ${d.meta.commit}. ` +
+ `Security from the FORS and PORS+FP subset-forgery analysis in ` +
+ `security.sage .
`;
+ document.getElementById('about-pool').innerHTML =
+ `Initial bounds: at least 128-bit security at qs = 240 , ` +
+ `size below ${fmtNum(STD_M.size)} B, ${wtxt}.
` + source + schnorrNote();
+}
+
+function activateScheme(scheme) {
+ if (!state.pools[scheme] || scheme === state.scheme) return;
+ state.scheme = scheme;
+ rebuildInitialPool();
+ renderSchemeButtons();
+ renderInfoStrip();
+ update();
+}
+
+const HASH_KEYS = ['size', 'kg', 'sg', 'sv', 'cb'];
+const CUSTOM_IDS = ['cust-h', 'cust-d', 'cust-k', 'cust-a', 'cust-w'];
+const CUSTOM_DEFAULTS = '63,7,14,12,16';
+
+function writeHash() {
+ const parts = [];
+ if (state.scheme !== 'SPX') parts.push('s=' + SCHEME_IDS[state.scheme]);
+ if (HASH_KEYS.some(k => state.X[k] !== DEFAULTS_X[k]))
+ parts.push('x=' + HASH_KEYS.map(k => state.X[k]).join(','));
+ if (HASH_KEYS.some(k => state.W[k] !== DEFAULTS_W[k]))
+ parts.push('w=' + HASH_KEYS.map(k => state.W[k]).join(','));
+ if (state.useWorst) parts.push('wc=1');
+ if (state.showOptW) parts.push('ow=1');
+ const cust = CUSTOM_IDS.map(id => document.getElementById(id).value).join(',');
+ if (cust !== CUSTOM_DEFAULTS) parts.push('c=' + cust);
+ replaceHash(parts);
+}
+
+const scheduleHashWrite = hashWriter(writeHash);
+
+function applyHash() {
+ const params = readHash();
+ const setVec = (str, store, isX) => {
+ const vals = (str || '').split(',').map(parseFloat);
+ if (vals.length !== 5 || !vals.every(isFinite)) return;
+ // Bounds accept the whole pool range here; clampXToMax lowers them to the
+ // slider caps next. Weights stay within 20.
+ HASH_KEYS.forEach((k, i) => {
+ store[k] = (k === 'size' && isX)
+ ? clamp(vals[i], 0.30, 1.00)
+ : clamp(vals[i], 0.10, isX ? 1e9 : 20.00);
+ });
+ };
+ if (params.s && SCHEME_FROM_ID[params.s] && state.pools[SCHEME_FROM_ID[params.s]]) {
+ state.scheme = SCHEME_FROM_ID[params.s];
+ }
+ if (params.x) setVec(params.x, state.X, true);
+ if (params.w) setVec(params.w, state.W, false);
+ if (params.wc === '1') state.useWorst = true;
+ if (params.ow === '1') state.showOptW = true;
+ if (params.c) {
+ const vals = params.c.split(',').map(v => parseInt(v, 10));
+ if (vals.length === 5 && vals.every(Number.isFinite)) {
+ if (!UNIVERSE_W.includes(vals[4])) vals[4] = 16;
+ CUSTOM_IDS.forEach((id, i) => document.getElementById(id).value = vals[i]);
+ }
+ }
+}
+
+function exportSurvivorsCSV() {
+ const header = ['scheme', 'h', 'd', 'k', 'a', 'w', 'swn', 'mmax', 'size_B',
+ 'keygen_C', 'siggen_C', 'sigver_C', 'sigver_worst_C',
+ 'rho', 'rho_worst', 'rho_vs_schnorr', 'rho_worst_vs_schnorr', 'schnorr_rho', 'distance'];
+ const lines = [header.join(',')];
+ for (const c of state.lastSurvivors) {
+ lines.push([state.scheme, c.h, c.d, c.k, c.a, c.w, c.swn || 0, c.mmax || 0,
+ c.size, c.kg, c.sg, c.sv, c.sv_worst,
+ c.cb.toFixed(6), c.cb_worst.toFixed(6),
+ (c.cb / SCHNORR.cb64).toFixed(6),
+ (c.cb_worst / SCHNORR.cb64).toFixed(6),
+ SCHNORR.cb64.toFixed(6),
+ distanceOf(c, state.W).toFixed(6)].join(','));
+ }
+ downloadCSV(`survivors_${SCHEME_IDS[state.scheme]}`, lines);
+}
+
+async function setup() {
+ const [data, schnorr] = await Promise.all([loadSiteData(), loadSchnorrRef()]);
+ state.siteData = data;
+ SCHNORR = schnorr;
+ if (data) {
+ data.meta.schemes.forEach((s, si) => {
+ const pool = poolFromData(data, s);
+ const rand = mulberry32(69421 + si); // stable layout per scheme
+ for (const c of pool) { c._sx = rand(); c._sy = rand(); }
+ state.pools[s] = pool;
+ });
+ selfCheckData(data, state.pools['SPX']);
+ }
+ computeXMax(); // slider caps from the loaded pools
+ applyHash(); // may switch scheme, X/W, worst mode, w extras, custom tuple
+ clampXToMax();
+ rebuildInitialPool();
+ renderControls();
+ document.getElementById('worst-toggle').checked = state.useWorst;
+ document.getElementById('optw-toggle').checked = state.showOptW;
+ document.querySelectorAll('[data-std]').forEach(el => { el.innerHTML = fmtNum(STD_M[el.dataset.std]); });
+ renderSchemeButtons();
+ renderInfoStrip();
+ update();
+ attachScatterHover();
+ attachCustomCandidate();
+
+ document.getElementById('worst-toggle').addEventListener('change', e => {
+ state.useWorst = e.target.checked;
+ update();
+ });
+ document.getElementById('optw-toggle').addEventListener('change', e => {
+ state.showOptW = e.target.checked;
+ rebuildInitialPool();
+ renderInfoStrip();
+ update();
+ });
+ document.getElementById('reset-btn').addEventListener('click', () => {
+ state.X = { ...DEFAULTS_X };
+ state.W = { ...DEFAULTS_W };
+ renderControls();
+ update();
+ });
+ bindShareButton(writeHash);
+ document.getElementById('export-btn').addEventListener('click', exportSurvivorsCSV);
+
+ // The canvas follows its width.
+ window.addEventListener('resize', () => {
+ if (state.lastEliminatedAt) {
+ renderScatter(state.lastEliminatedAt, state.lastSurvivors, state.lastWinner);
+ }
+ });
+}
+
+// The tests load this file under node, without a document.
+if (typeof document !== 'undefined') setup();
diff --git a/site/js/ui.js b/site/js/ui.js
index 1deb126..8d0c307 100644
--- a/site/js/ui.js
+++ b/site/js/ui.js
@@ -1,4 +1,5 @@
-// Number formats, popovers and the glossary.
+// Helpers shared by the three site pages: number formats, popovers, sliders,
+// the address bar, data.json and the glossary.
'use strict';
// Number formats
@@ -40,6 +41,7 @@ function infoButton(id, label) {
}
(function () {
+ if (typeof document === 'undefined') return; // under node, in the tests
if (!('popover' in HTMLElement.prototype)) return; // older browsers show the content inline
let opener = null;
document.addEventListener('click', e => {
@@ -70,9 +72,156 @@ function infoButton(id, label) {
addEventListener('scroll', placeOpen, true);
})();
+// Sliders
+
+function clamp(v, lo, hi) {
+ return Math.max(lo, Math.min(hi, v));
+}
+
+// A log-scale slider holds a track position 0..SLIDER_STEPS that maps
+// geometrically onto min..max.
+const SLIDER_STEPS = 1000;
+
+function posToX(pos, min, max) {
+ return min * Math.pow(max / min, pos / SLIDER_STEPS);
+}
+
+function xToPos(x, min, max) {
+ const t = Math.log(x / min) / Math.log(max / min);
+ return Math.round(SLIDER_STEPS * clamp(t, 0, 1));
+}
+
+// Short enough for the number inputs: two decimals below 100, integers below
+// a million, exponential above.
+function fmtX(v) {
+ if (v < 100) return v.toFixed(2);
+ if (v < 1e6) return String(Math.round(v));
+ return v.toExponential(1);
+}
+
+// Slider caps: the ratio rounded up to 1, 2 or 5 times a power of ten, at least 20.
+function niceCap(m) {
+ if (!isFinite(m) || m <= 20) return 20;
+ const e = Math.pow(10, Math.floor(Math.log10(m)));
+ for (const f of [1, 2, 5, 10]) if (f * e >= m) return f * e;
+ return 10 * e;
+}
+
+// Keeps store[key] in step with each range input in host and the number input
+// with the same data-key. A range with data-log is a log-scale slider over the
+// number input's min..max; a number input with data-dp shows that many decimals.
+function bindSliderPairs(host, store, onChange) {
+ for (const slider of host.querySelectorAll('input[type="range"][data-key]')) {
+ const key = slider.dataset.key;
+ const num = host.querySelector(`input[type="number"][data-key="${key}"]`);
+ const show = v => {
+ num.value = num.dataset.dp ? v.toFixed(parseInt(num.dataset.dp, 10)) : fmtX(v);
+ };
+ slider.addEventListener('input', () => {
+ const v = slider.dataset.log
+ ? posToX(parseFloat(slider.value), parseFloat(num.min), parseFloat(num.max))
+ : parseFloat(slider.value);
+ store[key] = v;
+ show(v);
+ onChange();
+ });
+ num.addEventListener('input', () => {
+ const v = parseFloat(num.value);
+ if (!isFinite(v)) return;
+ const min = parseFloat(num.min), max = parseFloat(num.max);
+ store[key] = clamp(v, min, max);
+ slider.value = slider.dataset.log ? xToPos(store[key], min, max) : store[key];
+ onChange();
+ });
+ num.addEventListener('blur', () => show(store[key]));
+ }
+}
+
+// A slider drag fires an input event per step: run fn at most once per frame.
+function oncePerFrame(fn) {
+ let queued = false;
+ return () => {
+ if (queued) return;
+ queued = true;
+ requestAnimationFrame(() => { queued = false; fn(); });
+ };
+}
+
+// Address bar
+
+// The #key=value&... parameters.
+function readHash() {
+ const params = {};
+ for (const part of location.hash.replace(/^#/, '').split('&')) {
+ const eq = part.indexOf('=');
+ if (eq > 0) params[part.slice(0, eq)] = decodeURIComponent(part.slice(eq + 1));
+ }
+ return params;
+}
+
+function replaceHash(parts) {
+ const url = parts.length ? '#' + parts.join('&') : location.pathname + location.search;
+ // Safari throws once a page exceeds its history-update quota.
+ try { history.replaceState(null, '', url); } catch (err) { /* keep the page working */ }
+}
+
+// Browsers rate-limit history.replaceState (Chromium drops calls beyond about
+// 200 per 10 s), so the address bar is written once, shortly after the last
+// change, rather than on every slider step.
+const HASH_WRITE_DELAY_MS = 250;
+
+function hashWriter(write) {
+ let timer = null;
+ return () => {
+ clearTimeout(timer);
+ timer = setTimeout(write, HASH_WRITE_DELAY_MS);
+ };
+}
+
+function bindShareButton(writeHash) {
+ document.getElementById('share-btn').addEventListener('click', async e => {
+ writeHash();
+ const btn = e.target;
+ try {
+ await navigator.clipboard.writeText(location.href);
+ btn.textContent = 'Link copied ✓';
+ setTimeout(() => { btn.textContent = 'Copy shareable link'; }, 1500);
+ } catch (err) {
+ prompt('Copy this link:', location.href);
+ }
+ });
+}
+
+// Data
+
+async function loadSiteData() {
+ try {
+ const resp = await fetch('data.json', { cache: 'no-cache' });
+ if (!resp.ok) throw new Error('HTTP ' + resp.status);
+ return await resp.json();
+ } catch (e) {
+ console.warn('data.json unavailable (' + e.message + ')');
+ return null;
+ }
+}
+
+// Column of each field in a data.json table.
+function fieldIndex(table) {
+ return Object.fromEntries(table.fields.map((f, i) => [f, i]));
+}
+
+function downloadCSV(name, lines) {
+ const blob = new Blob([lines.join('\n') + '\n'], { type: 'text/csv' });
+ const a = document.createElement('a');
+ a.href = URL.createObjectURL(blob);
+ a.download = `${name}_${new Date().toISOString().slice(0, 10)}.csv`;
+ a.click();
+ URL.revokeObjectURL(a.href);
+}
+
// Glossary
-document.body.insertAdjacentHTML('beforeend', `
+if (typeof document !== 'undefined') document.body.insertAdjacentHTML('beforeend', `
Glossary
diff --git a/site/stateful.html b/site/stateful.html
index 3acba48..a063dd8 100644
--- a/site/stateful.html
+++ b/site/stateful.html
@@ -6,301 +6,8 @@
SHRINCS Stateful Comparison
- Comparison
+ Comparison
Ratios under each value compare with SLH-DSA-128s.
Sizes follow the SHRINCS stateful layout: a one-byte indicator, a 16-byte randomizer and the leaf index,
@@ -427,993 +134,8 @@
All stateful candidates
-
-
+
+
diff --git a/site/stateless.html b/site/stateless.html
index 0d732ec..7c14fb7 100644
--- a/site/stateless.html
+++ b/site/stateless.html
@@ -8,572 +8,6 @@
Scheme PORS+FP : WOTS+C, and PORS+FP, a single tree with Octopus authentication.
-
Winternitz parameter i
@@ -610,7 +43,7 @@ Winternitz parameter
- include w = 32, 64, 128 (non-aligned)
+ include w = 32, 64, 128 (non-aligned)
Bounds
@@ -700,1360 +133,8 @@ Compare your own candidate
-
+
+
diff --git a/site/style.css b/site/style.css
index b34c2a4..02d433c 100644
--- a/site/style.css
+++ b/site/style.css
@@ -1,16 +1,61 @@
-/* Shared by the three site pages. Colours come from each page's :root. */
+/* Styles of the three site pages: shared rules first, then one section per page.
+ A rule that would also reach another page is scoped by its page's body class. */
+
+:root {
+ --bg: #f7f7f5;
+ --panel: #ffffff;
+ --border: #e5e5e0;
+ --text: #1a1a1a;
+ --text-soft: #6b6b6b;
+ --text-mute: #9a9a92;
+ --accent: #2563eb;
+ --accent-soft: #dbeafe;
+ --good: #16a34a;
+ --good-soft: #dcfce7;
+ --warn: #d97706;
+ --warn-soft: #fef3c7;
+ --bad: #dc2626;
+ --bad-soft: #fee2e2;
+ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+ margin: 0;
+ padding: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.5;
+}
+
+body { padding: 24px; }
+
+header, main { max-width: 1280px; margin: 0 auto; }
+header { margin-bottom: 20px; }
+
+h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
+
+.tagline { margin: 0; color: var(--text-soft); font-size: 14px; }
-/* Page header */
.crumbs { margin-bottom: 4px; font-size: 12px; color: var(--text-mute); }
-.crumbs a { color: var(--accent); text-decoration: none; }
-.crumbs a:hover { text-decoration: underline; }
+
+.crumbs a, .tagline a, .card-link a { color: var(--accent); text-decoration: none; }
+.crumbs a:hover, .tagline a:hover, .card-link a:hover { text-decoration: underline; }
+
.text-btn {
padding: 0; border: 0; background: none; font: inherit;
color: var(--accent); cursor: pointer;
}
.text-btn:hover { text-decoration: underline; }
-/* info button */
+/* Names whose case matters, inside uppercase headings */
+.keep-case { text-transform: none; }
+
+.nowrap { white-space: nowrap; }
+
+/* Info button */
.info {
display: inline-grid; place-items: center;
width: 15px; height: 15px; margin-left: 5px; padding: 0;
@@ -50,5 +95,599 @@
.pop dd { margin-bottom: 6px; }
}
-/* Names whose case matters */
-.keep-case { text-transform: none; }
+/* Panels and cards */
+.panel, .card {
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 16px;
+}
+.panel + .panel { margin-top: 16px; }
+.panel h2, .card h2 {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--text-soft);
+ font-weight: 600;
+}
+.panel h2 { margin: 0 0 8px; }
+.card h2 { margin: 0 0 2px; }
+.panel .section-title { margin-top: 20px; }
+.panel .hint { margin: -4px 0 12px; color: var(--text-mute); font-size: 12px; }
+
+/* Sliders, each with a number input */
+.control label, .h-control label {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ font-size: 13px;
+ font-family: var(--mono);
+ margin-bottom: 2px;
+}
+.control label .name, .h-control label .name { color: var(--text); }
+input[type="range"] { width: 100%; accent-color: var(--accent); }
+.val-input {
+ padding: 2px 6px;
+ border: 1px solid transparent;
+ border-radius: 3px;
+ background: transparent;
+ font-family: var(--mono);
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--accent);
+ text-align: right;
+ -moz-appearance: textfield;
+}
+.val-input:hover { border-color: var(--border); }
+.val-input:focus { outline: none; border-color: var(--accent); background: var(--accent-soft); }
+.val-input::-webkit-inner-spin-button,
+.val-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+
+
+/* Pinned parameters (index.html) */
+
+.page-index header, .page-index main { max-width: 820px; }
+.page-index header { margin-bottom: 16px; }
+.page-index h1 { font-size: 24px; }
+
+.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
+
+.card .tuple {
+ margin: 2px 0;
+ font-family: var(--mono);
+ font-size: 17px;
+ font-weight: 600;
+ color: var(--accent);
+}
+
+.card table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; }
+.card td { padding: 4px; border-top: 1px solid var(--border); }
+.card tr:first-child td { border-top: none; }
+.card td:first-child { color: var(--text-soft); }
+.card td:nth-child(2) { text-align: right; font-weight: 500; white-space: nowrap; }
+
+.h-control { margin: 0 0 10px; max-width: 420px; }
+.h-control .val-input { width: 56px; }
+
+.card-link {
+ margin-top: 12px;
+ padding-top: 10px;
+ border-top: 1px solid var(--border);
+ font-size: 13px;
+}
+
+
+/* Parameter Explorer (stateless.html) */
+
+.layout {
+ display: grid;
+ grid-template-columns: 320px 1fr;
+ gap: 16px;
+}
+
+.control { margin-bottom: 10px; }
+.control .val-input { width: 92px; }
+
+.reset-btn {
+ margin-top: 8px;
+ padding: 6px 12px;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ color: var(--text-soft);
+ width: 100%;
+}
+.reset-btn:hover { background: var(--accent-soft); color: var(--accent); }
+
+.seg {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+ margin-bottom: 8px;
+}
+.seg button {
+ flex: 1 1 auto;
+ padding: 5px 8px;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ font-family: var(--mono);
+ color: var(--text-soft);
+}
+.seg button:hover { border-color: var(--accent); color: var(--accent); }
+.seg button.active {
+ background: var(--accent);
+ border-color: var(--accent);
+ color: #fff;
+ font-weight: 600;
+}
+
+.mode-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ font-family: var(--mono);
+ color: var(--text-soft);
+ margin: 6px 0 2px;
+ cursor: pointer;
+ user-select: none;
+}
+.mode-toggle input { accent-color: var(--accent); margin: 0; }
+.mode-row { display: flex; align-items: center; }
+
+.funnel-row {
+ display: grid;
+ grid-template-columns: 200px 1fr 80px;
+ gap: 8px;
+ align-items: center;
+ margin-bottom: 4px;
+ font-size: 13px;
+ font-family: var(--mono);
+}
+.funnel-row .label { color: var(--text-soft); }
+.funnel-row .bar {
+ height: 18px;
+ background: var(--accent-soft);
+ border-radius: 3px;
+ transition: width 0.2s ease;
+}
+.funnel-row .count { text-align: right; color: var(--text); font-weight: 500; }
+.funnel-row.eliminated .bar { background: var(--bad-soft); opacity: 0.6; }
+
+.scatter-wrap { position: relative; }
+#scatter {
+ width: 100%;
+ height: auto;
+ display: block;
+ border-radius: 4px;
+ cursor: crosshair;
+}
+#hover-ring {
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ border: 2px solid #1a1a1a;
+ border-radius: 50%;
+ pointer-events: none;
+ transform: translate(-50%, -50%);
+ display: none;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
+}
+
+#tooltip {
+ position: fixed;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 10px 12px;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+ pointer-events: none;
+ font-size: 12px;
+ z-index: 100;
+ min-width: 280px;
+ max-width: 340px;
+ display: none;
+}
+#tooltip .tt-tuple {
+ font-family: var(--mono);
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--accent);
+ margin: 0 0 4px;
+}
+#tooltip .tt-swn { font-size: 11px; color: var(--text-soft); }
+#tooltip .tt-status {
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ margin-bottom: 8px;
+}
+#tooltip .tt-status.survivor { color: var(--good); }
+#tooltip .tt-status.eliminated { color: var(--bad); }
+#tooltip .tt-status.winner { color: var(--accent); }
+#tooltip table {
+ width: 100%;
+ border-collapse: collapse;
+ font-family: var(--mono);
+ font-size: 11px;
+}
+#tooltip td { padding: 2px 4px; }
+#tooltip td:first-child { color: var(--text-soft); }
+#tooltip td:nth-child(2),
+#tooltip td:nth-child(3) { text-align: right; }
+#tooltip td.ratio { text-align: right; font-weight: 600; }
+#tooltip td.ratio.good { color: var(--good); }
+#tooltip td.ratio.warn { color: var(--warn); }
+#tooltip td.ratio.bad { color: var(--bad); }
+#tooltip .tt-distance {
+ margin-top: 6px;
+ padding-top: 6px;
+ border-top: 1px solid var(--border);
+ color: var(--text-soft);
+ font-size: 11px;
+}
+#tooltip .tt-distance strong { color: var(--text); font-family: var(--mono); }
+
+.scatter-legend {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-top: 10px;
+ font-size: 11px;
+ color: var(--text-soft);
+}
+.scatter-legend .item { display: flex; align-items: center; gap: 4px; }
+.scatter-legend .swatch {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ display: inline-block;
+}
+
+.winner-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 16px;
+}
+.winner-tuple {
+ font-family: var(--mono);
+ font-size: 18px;
+ color: var(--accent);
+ font-weight: 600;
+ margin: 0 0 4px;
+}
+.winner-distance { color: var(--text-soft); font-size: 12px; margin: 0; }
+
+table.metrics {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 13px;
+ margin-top: 8px;
+}
+table.metrics th,
+table.metrics td {
+ padding: 6px 8px;
+ text-align: right;
+ border-bottom: 1px solid var(--border);
+ font-family: var(--mono);
+}
+table.metrics th:first-child,
+table.metrics td:first-child {
+ text-align: left;
+ color: var(--text-soft);
+}
+table.metrics th {
+ color: var(--text-soft);
+ font-weight: 500;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+/* Ratio to SLH-DSA-128s in the comparison tables */
+td.ratio { font-size: 12px; }
+td.ratio.good { color: var(--good); }
+td.ratio.warn { color: var(--warn); }
+td.ratio.bad { color: var(--bad); }
+
+.empty-state {
+ text-align: center;
+ color: var(--text-mute);
+ padding: 24px;
+ font-style: italic;
+}
+
+.custom-inputs {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ margin-bottom: 12px;
+}
+.custom-inputs .field { display: flex; flex-direction: column; gap: 4px; }
+.custom-inputs .field label { font-family: var(--mono); font-size: 11px; color: var(--text-soft); }
+.custom-inputs .field input,
+.custom-inputs .field select {
+ width: 72px;
+ padding: 6px 8px;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ font-family: var(--mono);
+ font-size: 14px;
+ text-align: right;
+ background: var(--panel);
+ color: var(--text);
+}
+.custom-inputs .field input:focus,
+.custom-inputs .field select:focus { outline: none; border-color: var(--accent); }
+
+.custom-status {
+ padding: 8px 12px;
+ border-radius: 4px;
+ margin-bottom: 12px;
+ font-size: 13px;
+}
+.custom-status.ok { background: var(--good-soft); color: var(--good); }
+.custom-status.warn { background: var(--warn-soft); color: var(--warn); }
+.custom-status.invalid { background: var(--bad-soft); color: var(--bad); }
+.custom-status ul { margin: 4px 0 0 18px; padding: 0; font-size: 12px; }
+
+.custom-notes { margin-top: 10px; font-size: 12px; color: var(--text-soft); }
+.custom-notes div { margin: 2px 0; }
+.custom-notes .sec-ok { color: var(--good); }
+.custom-notes .sec-low { color: var(--bad); }
+.custom-notes .sec-detail { color: var(--text-mute); font-size: 11px; }
+
+.info-strip {
+ background: var(--accent-soft);
+ color: var(--accent);
+ padding: 8px 12px;
+ border-radius: 4px;
+ font-size: 12px;
+ margin-bottom: 16px;
+}
+
+@media (max-width: 900px) {
+ .layout { grid-template-columns: 1fr; }
+ .winner-grid { grid-template-columns: 1fr; }
+}
+
+
+/* Stateful Comparison (stateful.html) */
+
+/* Comparison table */
+.compare-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
+table.compare {
+ border-collapse: collapse;
+ font-family: var(--mono);
+ font-size: 12px;
+ min-width: 100%;
+}
+table.compare th, table.compare td {
+ padding: 8px 10px;
+ border-bottom: 1px solid var(--border);
+ text-align: right;
+ white-space: nowrap;
+ vertical-align: top;
+}
+table.compare thead th {
+ white-space: normal;
+ vertical-align: bottom;
+ color: var(--text-soft);
+ font-weight: 600;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ background: var(--bg);
+ border-bottom: 2px solid var(--border);
+}
+/* First column: candidate name */
+table.compare th.cand-col, table.compare td.cand-col {
+ text-align: left;
+ position: sticky;
+ left: 0;
+ background: var(--panel);
+ z-index: 2;
+ border-right: 1px solid var(--border);
+ min-width: 180px;
+}
+table.compare thead th.cand-col { background: var(--bg); }
+/* A row with a note instead of a candidate */
+table.compare th.note, table.compare td.note {
+ text-align: center;
+ color: var(--text-mute);
+ font-style: italic;
+}
+table.compare th.note { padding: 24px; }
+.cand-title { font-size: 12px; font-weight: 600; display: block; color: var(--text); }
+/* Last column: actions */
+table.compare th.act-col, table.compare td.act-col {
+ text-align: center;
+ width: 40px;
+ min-width: 40px;
+}
+.row-remove {
+ background: transparent; border: none; color: var(--text-mute);
+ cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px;
+ border-radius: 3px;
+}
+.row-remove:hover { background: var(--bad-soft); color: var(--bad); }
+table.compare tr.baseline td { background: var(--accent-soft); }
+table.compare tr.baseline td.cand-col { background: var(--accent-soft); }
+table.compare tr:not(.baseline):hover td { background: var(--bg); }
+table.compare tr:not(.baseline):hover td.cand-col { background: var(--bg); }
+
+/* Ratio to SLH-DSA-128s, under each value */
+span.ratio { font-size: 10px; color: var(--text-mute); display: block; margin-top: 1px; }
+span.ratio.gain { color: var(--good); }
+span.ratio.regress { color: var(--bad); }
+
+/* Add candidate panel */
+.actions { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
+.btn {
+ padding: 6px 12px;
+ background: var(--accent);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 13px;
+ font-family: inherit;
+}
+.btn:hover { filter: brightness(1.05); }
+.btn.btn-ghost { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
+.btn.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }
+
+.add-form[hidden] { display: none; }
+.add-form {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+ gap: 12px;
+ align-items: end;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 14px;
+ margin-top: 10px;
+}
+.add-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); font-family: var(--mono); }
+.add-form select, .add-form input {
+ padding: 6px 8px;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ font-family: var(--mono);
+ font-size: 13px;
+ background: var(--panel);
+}
+.add-form select:focus, .add-form input:focus { outline: none; border-color: var(--accent); }
+.add-form .add-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
+.add-form .form-error {
+ grid-column: 1 / -1;
+ background: var(--bad-soft);
+ color: var(--bad);
+ padding: 6px 10px;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+/* Bounds and weights of the candidate list */
+.filter-section { margin-bottom: 10px; }
+.filter-section:last-of-type { margin-bottom: 12px; }
+.filter-section-label {
+ font-size: 10px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-soft);
+ margin-bottom: 6px;
+}
+.filter-section-hint {
+ text-transform: none;
+ letter-spacing: 0;
+ font-weight: 400;
+ color: var(--text-mute);
+ margin-left: 6px;
+ font-size: 11px;
+}
+details.filter-collapsible > summary {
+ cursor: pointer;
+ list-style: none;
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ padding: 2px 0;
+ user-select: none;
+ -webkit-user-select: none;
+}
+details.filter-collapsible > summary::-webkit-details-marker { display: none; }
+details.filter-collapsible > summary:hover { color: var(--accent); }
+details.filter-collapsible > summary .chev {
+ display: inline-block;
+ transition: transform 0.15s ease;
+ font-size: 9px;
+ color: var(--text-mute);
+}
+details.filter-collapsible[open] > summary .chev { transform: rotate(90deg); }
+details.filter-collapsible[open] > .filter-grid { margin-top: 4px; }
+.filter-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 12px;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 14px;
+ margin-bottom: 12px;
+}
+.filter-grid .ctrl { display: flex; flex-direction: column; gap: 4px; }
+.filter-grid .ctrl label {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ font-family: var(--mono);
+ font-size: 12px;
+}
+.filter-grid .ctrl label .name { color: var(--text-soft); }
+.filter-grid .val-input { width: 60px; padding: 1px 4px; font-size: 12px; }
+
+.sweep-info { color: var(--text-soft); font-size: 12px; margin-bottom: 10px; }
+.sweep-info strong { color: var(--text); }
+
+/* Sort headers of the candidate list */
+table.compare th.sortable {
+ cursor: pointer;
+ user-select: none;
+ -webkit-user-select: none;
+}
+table.compare th.sortable:hover { color: var(--accent); }
+table.compare th.sortable.active { color: var(--accent); }
+.sort-arrow {
+ display: inline-block;
+ margin-left: 4px;
+ font-size: 10px;
+ opacity: 0.7;
+}
+
+.row-add {
+ background: transparent;
+ border: 1px solid var(--border);
+ color: var(--text-soft);
+ cursor: pointer;
+ font-size: 13px;
+ line-height: 1;
+ padding: 2px 8px;
+ border-radius: 3px;
+}
+.row-add:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
+.row-add:disabled { opacity: 0.4; cursor: not-allowed; }
+.row-add:disabled:hover { background: transparent; color: var(--text-soft); border-color: var(--border); }
+
+.signer-mode {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ font-family: var(--mono);
+ color: var(--text-soft);
+}
+.signer-mode select {
+ padding: 5px 8px;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ font-family: var(--mono);
+ font-size: 12px;
+ background: var(--panel);
+}
+.signer-mode select:focus { outline: none; border-color: var(--accent); }
+
+@media (max-width: 600px) {
+ body.page-stateful { padding: 12px; }
+ .page-stateful h1 { font-size: 18px; }
+ .page-stateful .panel { padding: 12px; }
+ table.compare th, table.compare td { padding: 6px 8px; font-size: 11px; }
+}
diff --git a/tests/synth_generated.py b/tests/synth_generated.py
index 8466a90..1b10780 100644
--- a/tests/synth_generated.py
+++ b/tests/synth_generated.py
@@ -47,9 +47,8 @@ def security_from_page():
if not shutil.which('node'):
sys.exit('node is required (the security analysis runs from the page JS)')
html = open(os.path.join(ROOT, 'site', 'stateless.html'), encoding='utf-8').read()
- m = re.search(r"'use strict';(.*?)// ---------- State ----------", html, re.S)
- assert m, 'stateless.html extraction marker missing'
- js = m.group(1) + """
+ srcs = re.findall(r'', html)
+ js = '\n'.join(open(os.path.join(ROOT, 'site', s), encoding='utf-8').read() for s in srcs) + """
const out = { grid: {}, std: computeSecurityBits(64, 63, 14, 12) };
for (let h = %d; h <= %d; h++)
for (let k = %d; k <= %d; k++)
diff --git a/tests/test_regression.py b/tests/test_regression.py
index e605397..5fe4484 100644
--- a/tests/test_regression.py
+++ b/tests/test_regression.py
@@ -152,14 +152,11 @@ def test_csv_standard_row():
# 3. Site pages (node)
# ---------------------------------------------------------------------------
-def _extract_js(page, end_marker):
- html = open(os.path.join(ROOT, 'site', page)).read()
- m = re.search(r"'use strict';(.*?)" + re.escape(end_marker), html, re.S)
- assert m, f'extraction markers not found in {page} — update the test'
- js = m.group(1)
- if '', html)
+ return '\n'.join(open(os.path.join(ROOT, 'site', s), encoding='utf-8').read() for s in srcs)
def _run_node(js):
@@ -172,12 +169,12 @@ def _run_node(js):
return json.loads(p.stdout.strip().splitlines()[-1])
-def test_site_index():
- js = _extract_js('stateless.html', '// ---------- State ----------')
+def test_site_explorer():
+ js = _page_js('stateless.html')
tuples = [list(_tuple_of(k)) for k in FIX['stateless']]
js += f"""
const _tuples = {json.dumps(tuples)};
-const out = {{ pool: sweep().filter(passesInitial).length, metrics: {{}} }};
+const out = {{ metrics: {{}} }};
for (const t of _tuples) {{
const m = metrics({{h:t[0], d:t[1], k:t[2], a:t[3], w:t[4]}});
out.metrics[t.join(',')] = [m.size, m.kg, m.sg, m.sv, m.sv_worst];
@@ -187,7 +184,6 @@ def test_site_index():
out = _run_node(js)
if out is None:
return
- assert out['pool'] == FIX['site_pool_count'], out['pool']
for key, f in FIX['stateless'].items():
got = out['metrics'][key]
want = [f['size'], f['kg'], f['sg'], f['sv'], f['sv_worst']]
@@ -198,7 +194,7 @@ def test_site_security_small_trees():
"""The custom-candidate panel accepts any (h, k, a), so the forgery sum
must stay cheap when the hypertree has few leaves (lambda = q_s / 2^h
huge): h = 14 used to take about 11 s per evaluation and froze the page."""
- js = _extract_js('stateless.html', '// ---------- State ----------')
+ js = _page_js('stateless.html')
js += """
const t0 = Date.now();
const out = {
@@ -225,7 +221,7 @@ def test_site_security_small_trees():
def test_site_main():
"""index.html (SHRINCS main): pinned cards must match the reference model."""
- js = _extract_js('index.html', '// ---------- Render ----------')
+ js = _page_js('index.html')
js += """
const out = {};
out.pinned = (m => [m.size, m.kg, m.sg, m.sv, m.svWorst])(slhMetrics(PINNED));
@@ -283,7 +279,7 @@ def test_site_main():
def test_site_stateful():
- js = _extract_js('stateful.html', '// Shared slider/number-input renderer')
+ js = _page_js('stateful.html')
js += """
const out = { slh: null, uxmss: {}, xmssmt: {} };
const s = buildSLH().metrics;
@@ -474,8 +470,9 @@ def scan(name, js, base_line):
html = open(path, encoding='utf-8').read()
for m in re.finditer(r'', html, re.S):
scan(os.path.basename(path), m.group(1), html[:m.start(1)].count('\n') + 1)
- for path in sorted(glob.glob(os.path.join(ROOT, 'site', '*.js'))):
- scan(os.path.basename(path), open(path, encoding='utf-8').read(), 1)
+ for path in sorted(glob.glob(os.path.join(ROOT, 'site', '*.js')) +
+ glob.glob(os.path.join(ROOT, 'site', 'js', '*.js'))):
+ scan(os.path.relpath(path, os.path.join(ROOT, 'site')), open(path, encoding='utf-8').read(), 1)
assert not offenders, f'site-JS hazards: {offenders}'
@@ -568,7 +565,7 @@ def test_site_data_integration():
return
data_path = os.path.join(ROOT, 'site', 'data.json')
# stateless.html: poolFromData must reproduce the pool; STD_M must equal baseline
- js = _extract_js('stateless.html', '// ---------- State ----------')
+ js = _page_js('stateless.html')
js += f"""
const data = JSON.parse(require('fs').readFileSync({json.dumps(data_path)}, 'utf8'));
const pool = poolFromData(data, 'SPX');
@@ -594,7 +591,7 @@ def test_site_data_integration():
if out is not None:
assert out['ok'] and out['n'] == FIX['site_pool_count'], out
# stateful.html: the page's own self-check must pass on the shipped data
- js2 = _extract_js('stateful.html', '// Shared slider/number-input renderer')
+ js2 = _page_js('stateful.html')
js2 += f"""
SITE_DATA = JSON.parse(require('fs').readFileSync({json.dumps(data_path)}, 'utf8'));
const okCheck = selfCheckStateful(SITE_DATA);