Something went wrong. Try again.
A local-first event pipeline for independent agents, built on Jazz.
Something went wrong. Try again.
6.8 kB · 128 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129export const FONT_DEBUG_ASSET_PATH = "/assets/font-debug.js";
export const FONT_DEBUG_SCRIPT = `(() => { const storageKey = "stream-body-font-preview"; const defaultStack = "Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif"; const familyPattern = /^[A-Za-z0-9][A-Za-z0-9 -]{0,79}$/; let requestVersion = 0; let pendingLink = null;
const style = document.createElement("style"); style.textContent = ".font-debug-panel{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:10000;width:min(340px,calc(100vw - 32px));border:1px solid var(--border,var(--line,#444));border-radius:16px;background:var(--panel,var(--bg,#111));color:var(--text,#eee);box-shadow:0 18px 56px rgba(0,0,0,.28);padding:16px;font:14px/1.45 var(--font-body)}.font-debug-panel[hidden]{display:none}.font-debug-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.font-debug-head strong{font-size:14px}.font-debug-close{border:0;background:transparent;color:var(--muted,#888);padding:4px;cursor:pointer}.font-debug-panel label{display:grid;gap:6px;color:var(--muted,#888);font-size:12px}.font-debug-panel input{width:100%;min-height:40px;border:1px solid var(--border,var(--line,#444));border-radius:10px;background:var(--surface-control,var(--surface,#171717));color:var(--text,#eee);padding:8px 10px}.font-debug-actions{display:flex;gap:8px;margin-top:10px}.font-debug-actions button{min-height:36px;border:1px solid var(--border,var(--line,#444));border-radius:999px;background:transparent;color:var(--text,#eee);padding:7px 12px;cursor:pointer}.font-debug-actions button:first-child{border-color:var(--accent,#b497bf);background:var(--accent-soft,rgba(180,151,191,.11))}.font-debug-status{min-height:20px;margin:10px 0 0;color:var(--muted,#888);font-size:12px}"; document.head.append(style);
const panel = document.createElement("section"); panel.className = "font-debug-panel"; panel.hidden = true; panel.setAttribute("role", "dialog"); panel.setAttribute("aria-label", "Body font preview"); panel.innerHTML = '<div class="font-debug-head"><strong>Body font</strong><button class="font-debug-close" type="button" aria-label="Close font preview">Close</button></div><label for="font-debug-family">Google Fonts family<input id="font-debug-family" type="text" list="font-debug-suggestions" maxlength="80" autocomplete="off" placeholder="e.g. Instrument Sans"><datalist id="font-debug-suggestions"><option value="DM Sans"><option value="Figtree"><option value="IBM Plex Sans"><option value="Instrument Sans"><option value="Manrope"><option value="Noto Sans"><option value="Plus Jakarta Sans"><option value="Source Sans 3"><option value="Space Grotesk"><option value="Work Sans"></datalist></label><div class="font-debug-actions"><button data-font-apply type="button">Try font</button><button data-font-reset type="button">Reset</button></div><p class="font-debug-status" aria-live="polite">Around display type stays unchanged.</p>'; document.body.append(panel);
const input = panel.querySelector("#font-debug-family"); const status = panel.querySelector(".font-debug-status"); const closeButton = panel.querySelector(".font-debug-close"); const applyButton = panel.querySelector("[data-font-apply]"); const resetButton = panel.querySelector("[data-font-reset]");
function storedFamily() { try { return localStorage.getItem(storageKey) || ""; } catch { return ""; } }
function storeFamily(family) { try { if (family) localStorage.setItem(storageKey, family); else localStorage.removeItem(storageKey); } catch {} }
function setPanelOpen(open) { panel.hidden = !open; if (open) { input.value = storedFamily(); input.focus(); input.select(); } }
function resetFont() { requestVersion += 1; pendingLink = null; document.querySelectorAll("link[data-stream-font-debug]").forEach(link => link.remove()); document.documentElement.style.removeProperty("--font-body"); storeFamily(""); input.value = ""; status.textContent = "Using the default body font. Around display type stays unchanged."; }
function applyFont(rawFamily, persist = true) { const family = rawFamily.trim().replace(/\\s+/g, " "); if (!familyPattern.test(family)) { status.textContent = "Use the exact Google Fonts family name with letters, numbers, spaces, or hyphens."; return; } const version = ++requestVersion; pendingLink?.remove(); const previous = document.querySelector("#font-debug-google-font"); const link = document.createElement("link"); link.dataset.streamFontDebug = "true"; link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=" + encodeURIComponent(family).replace(/%20/g, "+") + "&display=swap"; link.addEventListener("load", () => { if (version !== requestVersion) { link.remove(); return; } pendingLink = null; previous?.remove(); link.id = "font-debug-google-font"; document.documentElement.style.setProperty("--font-body", '"' + family + '",' + defaultStack); if (persist) storeFamily(family); input.value = family; status.textContent = "Using " + family + " for body text. Around is unchanged."; }); link.addEventListener("error", () => { if (pendingLink === link) pendingLink = null; link.remove(); if (version !== requestVersion) return; status.textContent = "Google Fonts did not return that family."; }); pendingLink = link; document.head.append(link); status.textContent = "Loading " + family + "…"; }
applyButton.addEventListener("click", () => applyFont(input.value)); resetButton.addEventListener("click", resetFont); closeButton.addEventListener("click", () => setPanelOpen(false)); input.addEventListener("keydown", event => { if (event.key === "Enter") { event.preventDefault(); applyFont(input.value); } }); document.addEventListener("keydown", event => { if (event.key === "Escape" && !panel.hidden) setPanelOpen(false); if (event.altKey && event.shiftKey && event.key.toLowerCase() === "f") { event.preventDefault(); setPanelOpen(panel.hidden); } });
const trigger = document.querySelector("h1"); let clickCount = 0; let lastClickAt = 0; trigger?.addEventListener("click", () => { const now = Date.now(); clickCount = now - lastClickAt < 650 ? clickCount + 1 : 1; lastClickAt = now; if (clickCount === 3) { clickCount = 0; setPanelOpen(panel.hidden); } });
const saved = storedFamily(); if (saved && familyPattern.test(saved)) applyFont(saved, false);})();`;