[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","689b8323a6248191b9b105907abe9958","versionInt","title","Wbr — Runnable Document (single File)","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n// ------------------------------------------------------------\n// WBR — Runnable Document (single file, no external libs)\n// - 8-week scoreboard with WoW deltas, sparklines, channel mix\n// - Inline editing, Present mode, copy Markdown/JSON, Test Gate\n// - Canonical hash + localStorage baseline/lastRun persistence\n// ------------------------------------------------------------\n\n// ---------- Types (JSDoc for clarity; plain JS runtime) ----------\n/**\n * @typedef {{ revenue:number, orders:number, active:number, cac:number }} Kpi\n * @typedef {{ paid:number, organic:number, email:number, referral:number }} Channels\n * @typedef {{ endISO:string, kpi:Kpi, channels:Channels }} Week\n */\n\n// ---------- Helpers ----------\nconst clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));\nconst fmtPct = (x) => `${(x * 100).toFixed(1)}%`;\nconst fmtNum = (x) => new Intl.NumberFormat(undefined, { maximumFractionDigits: 0 }).format(x);\nconst fmtMoney = (x) => new Intl.NumberFormat(undefined, { style: \"currency\", currency: \"USD\", maximumFractionDigits: 0 }).format(x);\nconst isFiniteNum = (v) => typeof v === \"number\" && Number.isFinite(v);\n\n// Deterministic key sort + number rounding to 1e-6, then stringify\nfunction canonicalize(obj) {\n function roundNums(v) {\n if (typeof v === \"number\") return Math.round(v * 1e6) / 1e6;\n if (Array.isArray(v)) return v.map(roundNums);\n if (v && typeof v === \"object\") {\n const out = {};\n Object.keys(v).sort().forEach((k) => {\n out[k] = roundNums(v[k]);\n });\n return out;\n }\n return v;\n }\n return JSON.stringify(roundNums(obj));\n}\n\n// Simple DJB2 hash (string -> unsigned 32-bit)\nfunction simpleHash(str) {\n let h = 5381;\n for (let i = 0; i < str.length; i++) h = ((h << 5) + h) ^ str.charCodeAt(i);\n return (h >>> 0).toString(16).padStart(8, \"0\");\n}\n\n// Delta rule: if last == 0 -> null; else (this-last)/last\nfunction deltaWoW(curr, prev) {\n if (!isFiniteNum(curr) || !isFiniteNum(prev)) return null; // guard; tests will catch non-finite\n if (prev === 0) return null;\n return (curr - prev) / prev;\n}\n\nfunction classForDelta({ d, invert=false, forAnomaly=false }) {\n if (d == null) return forAnomaly ? \"text-gray-400\" : \"text-gray-500\";\n const good = invert ? d < 0 : d > 0;\n if (forAnomaly) return Math.abs(d) >= 0 ? (good ? \"text-emerald-600\" : \"text-rose-600\") : \"text-gray-500\";\n return good ? \"text-emerald-700\" : \"text-rose-700\";\n}\n\nconst lastTwo = (weeks) => ({ thisW: weeks[weeks.length - 1], lastW: weeks[weeks.length - 2] });\n\n// Sparkline SVG: values -> scaled polyline across full width/height\nfunction Spark({ values, width=160, height=36, strokeWidth=2 }) {\n const min = Math.min(...values);\n const max = Math.max(...values);\n const rng = max - min || 1;\n const pts = values.map((v, i) => [\n (i / (values.length - 1)) * (width - 4) + 2,\n height - 2 - ((v - min) / rng) * (height - 4),\n ]);\n const d = `M ${pts.map((p) => p.join(\",\")).join(\" L \")}`;\n return (\n \n );\n}\n\n// ---------- Sample Data ----------\nconst todayISO = new Date().toISOString().slice(0, 10);\nfunction daysAgoISO(n) {\n const d = new Date();\n d.setDate(d.getDate() - n);\n return d.toISOString().slice(0, 10);\n}\n\n/** @type {Week[]} */\nconst SAMPLE_WEEKS = [0,1,2,3,4,5,6,7].map((i) => {\n const endISO = daysAgoISO((7 - i) * 7); // 7-day hops, 8 weeks\n // lightly trending series with noise\n const baseRev = 120000 + i * 7000 + (i % 2 ? 3500 : -1500);\n const orders = 1800 + i * 65 + (i % 3 === 0 ? 90 : -40);\n const active = 12000 + i * 380 + (i % 2 ? 220 : -160);\n const cac = 44 - i * 0.7 + (i % 2 ? 0.8 : -0.6);\n // channel metric values (aligned to revenue scale loosely)\n const paid = Math.max(0, baseRev * 0.41 + (i % 2 ? 3000 : -2500));\n const organic = Math.max(0, baseRev * 0.33 + (i % 3 ? 2000 : -1800));\n const email = Math.max(0, baseRev * 0.15 + (i % 2 ? -1000 : 1200));\n const referral = Math.max(0, baseRev * 0.11 + (i % 4 ? 500 : -800));\n return {\n endISO,\n kpi: { revenue: Math.round(baseRev), orders: Math.round(orders), active: Math.round(active), cac: Math.round(cac) },\n channels: { paid: Math.round(paid), organic: Math.round(organic), email: Math.round(email), referral: Math.round(referral) },\n };\n});\n\n// ---------- Main Component ----------\nexport default function WBRRunnableDocument() {\n const [weeks, setWeeks] = useState(SAMPLE_WEEKS);\n const [channelMetric, setChannelMetric] = useState(\"revenue\"); // label only; channel numbers are unitless\n const [alertThreshold, setAlertThreshold] = useState(0.1); // 0.05–0.30\n const [logicVersion, setLogicVersion] = useState(\"1.0.0\");\n const [present, setPresent] = useState(true);\n const docId = `wbr-runnable-v${logicVersion}`;\n\n // Baseline/lastRun persistence\n const [baseline, setBaseline] = useState(null); // { hash, inputs }\n const [lastRun, setLastRun] = useState(null); // ISO string\n\n useEffect(() => {\n try {\n const raw = localStorage.getItem(docId);\n if (raw) {\n const parsed = JSON.parse(raw);\n if (parsed && typeof parsed === \"object\") {\n setBaseline(parsed.baseline || null);\n setLastRun(parsed.lastRun || null);\n }\n } else {\n setBaseline(null);\n setLastRun(null);\n }\n } catch {}\n }, [docId]);\n\n // ---- Calculations ----\n const { thisW, lastW } = useMemo(() => lastTwo(weeks), [weeks]);\n\n const kpiDefs = [\n { key: \"revenue\", label: \"Revenue\", fmt: fmtMoney, invert: false },\n { key: \"orders\", label: \"Orders\", fmt: fmtNum, invert: false },\n { key: \"active\", label: \"Active\", fmt: fmtNum, invert: false },\n { key: \"cac\", label: \"CAC\", fmt: fmtMoney, invert: true },\n ];\n\n const kpiSeries = useMemo(() => {\n const out = { revenue: [], orders: [], active: [], cac: [] };\n weeks.forEach((w) => {\n out.revenue.push(w.kpi.revenue);\n out.orders.push(w.kpi.orders);\n out.active.push(w.kpi.active);\n out.cac.push(w.kpi.cac);\n });\n return out;\n }, [weeks]);\n\n const kpiSummary = useMemo(() => {\n return kpiDefs.map((d) => {\n const curr = thisW.kpi[d.key];\n const prev = lastW.kpi[d.key];\n const wow = deltaWoW(curr, prev);\n const anomaly = wow == null ? false : Math.abs(wow) >= alertThreshold;\n return { ...d, curr, prev, wow, anomaly };\n });\n }, [thisW, lastW, alertThreshold]);\n\n const channelRows = useMemo(() => {\n const keys = /** @type {(keyof Channels)[]} */ ([\"paid\", \"organic\", \"email\", \"referral\"]);\n const thisSum = keys.reduce((s, k) => s + (thisW.channels[k] || 0), 0);\n const lastSum = keys.reduce((s, k) => s + (lastW.channels[k] || 0), 0);\n return keys.map((k) => {\n const curr = thisW.channels[k];\n const prev = lastW.channels[k];\n const wow = deltaWoW(curr, prev);\n const share = thisSum > 0 ? curr / thisSum : 0;\n const anomaly = wow == null ? false : Math.abs(wow) >= alertThreshold;\n return { key: k, label: k[0].toUpperCase() + k.slice(1), curr, prev, wow, share, anomaly, thisSum, lastSum };\n });\n }, [thisW, lastW, alertThreshold]);\n\n // ---- Tests ----\n const tests = useMemo(() => {\n const failures = [];\n\n // 1) All week.kpi finite across 8 weeks\n weeks.forEach((w, i) => {\n [w.kpi.revenue, w.kpi.orders, w.kpi.active, w.kpi.cac].forEach((v, j) => {\n if (!isFiniteNum(v)) failures.push(`Week ${i + 1} KPI[${[\"revenue\",\"orders\",\"active\",\"cac\"][j]}] is not finite`);\n });\n });\n\n // 2) channelMetric provided; channel values finite; sum(channels) > 0\n if (!channelMetric || ![\"revenue\",\"orders\",\"sessions\"].includes(channelMetric)) {\n failures.push(\"channelMetric missing or invalid\");\n }\n weeks.forEach((w, i) => {\n const vals = Object.values(w.channels);\n if (!vals.every(isFiniteNum)) failures.push(`Week ${i + 1} has non-finite channel value`);\n const sum = vals.reduce((s, v) => s + v, 0);\n if (!(sum > 0)) failures.push(`Week ${i + 1} sum(channels) ≤ 0`);\n });\n\n // 3) WoW math finite where last>0; if last==0 → delta=null\n const wThis = weeks[weeks.length - 1];\n const wLast = weeks[weeks.length - 2];\n const pairs = [\n [wThis.kpi.revenue, wLast.kpi.revenue, \"KPI revenue\"],\n [wThis.kpi.orders, wLast.kpi.orders, \"KPI orders\"],\n [wThis.kpi.active, wLast.kpi.active, \"KPI active\"],\n [wThis.kpi.cac, wLast.kpi.cac, \"KPI cac\"],\n [wThis.channels.paid, wLast.channels.paid, \"Channel paid\"],\n [wThis.channels.organic, wLast.channels.organic, \"Channel organic\"],\n [wThis.channels.email, wLast.channels.email, \"Channel email\"],\n [wThis.channels.referral, wLast.channels.referral, \"Channel referral\"],\n ];\n pairs.forEach(([a, b, label]) => {\n const d = deltaWoW(a, b);\n if (b > 0 && !isFiniteNum(d)) failures.push(`${label} WoW not finite with last>0`);\n if (b === 0 && d !== null) failures.push(`${label} WoW should be null when last==0`);\n });\n\n // 4) alertThreshold bounds\n if (!(alertThreshold >= 0.05 && alertThreshold <= 0.3)) failures.push(\"alertThreshold out of [0.05,0.30]\");\n\n return { pass: failures.length === 0, failures };\n }, [weeks, channelMetric, alertThreshold]);\n\n // ---- Alerts ----\n const alerts = useMemo(() => {\n const out = [];\n kpiSummary.forEach((k) => {\n if (k.wow != null && Math.abs(k.wow) >= alertThreshold) {\n out.push({ type: \"kpi\", key: k.key, msg: `${k.label} WoW ${fmtPct(k.wow)} ≥ threshold ${fmtPct(alertThreshold)}` });\n }\n });\n channelRows.forEach((r) => {\n if (r.wow != null && Math.abs(r.wow) >= alertThreshold) {\n out.push({ type: \"channel\", key: r.key, msg: `${r.label} ${channelMetric} WoW ${fmtPct(r.wow)} ≥ threshold ${fmtPct(alertThreshold)}` });\n }\n });\n return out;\n }, [kpiSummary, channelRows, alertThreshold, channelMetric]);\n\n // ---- Canonical Hash ----\n const canonicalTarget = useMemo(() => ({\n weeks: weeks.map((w) => ({ kpi: w.kpi, channels: w.channels })),\n channelMetric,\n alertThreshold,\n logicVersion,\n }), [weeks, channelMetric, alertThreshold, logicVersion]);\n\n const canonStr = useMemo(() => canonicalize(canonicalTarget), [canonicalTarget]);\n const docHash = useMemo(() => simpleHash(canonStr), [canonStr]);\n\n // ---- Export (Markdown + JSON) ----\n const exportJSON = useMemo(() => {\n const meta = { doc: \"WBR — Runnable Document\", version: logicVersion, generatedAtISO: new Date().toISOString(), docId, hash: docHash };\n const inputs = { weeks, channelMetric, alertThreshold, logicVersion };\n\n const results = {\n kpis: kpiSummary.map(({ key, label, curr, prev, wow }) => ({ key, label, curr, prev, wow })),\n channels: channelRows.map(({ key, label, curr, prev, wow, share }) => ({ key, label, curr, prev, wow, share })),\n thisWeekEndISO: thisW.endISO,\n lastWeekEndISO: lastW.endISO,\n };\n\n const testsOut = tests;\n return { meta, inputs, results, tests: testsOut, alerts };\n }, [logicVersion, docId, docHash, weeks, channelMetric, alertThreshold, kpiSummary, channelRows, thisW, lastW, tests, alerts]);\n\n const mdSummary = useMemo(() => {\n const lines = [];\n lines.push(`# WBR — Scoreboard`);\n lines.push(\"\");\n lines.push(`**This Week (end ${thisW.endISO}) vs Last (${lastW.endISO})**`);\n lines.push(\"\");\n lines.push(`**KPIs**`);\n kpiSummary.forEach((k) => {\n const val = k.fmt(k.curr);\n const delta = k.wow == null ? \"—\" : `${k.wow > 0 ? \"+\" : \"\"}${fmtPct(k.wow)}`;\n lines.push(`- ${k.label}: ${val} (${delta} WoW)`);\n });\n lines.push(\"\");\n lines.push(`**Channels — ${channelMetric}**`);\n channelRows.forEach((r) => {\n const delta = r.wow == null ? \"—\" : `${r.wow > 0 ? \"+\" : \"\"}${fmtPct(r.wow)}`;\n const sharePct = fmtPct(r.share);\n lines.push(`- ${r.label}: this ${fmtNum(r.curr)} vs last ${fmtNum(r.prev)} (${delta}), share ${sharePct}`);\n });\n if (alerts.length) {\n lines.push(\"\");\n lines.push(\"**Alerts**\");\n alerts.forEach((a) => lines.push(`- ${a.msg}`));\n }\n return lines.join(\"\\n\");\n }, [thisW, lastW, kpiSummary, channelRows, channelMetric, alerts]);\n\n // ---- Actions ----\n const doCopy = async (text, label) => {\n try {\n await navigator.clipboard.writeText(text);\n alert(`${label} copied.`);\n } catch (e) {\n console.error(e);\n alert(`Failed to copy ${label}.`);\n }\n };\n\n const setBaselineNow = () => {\n const baselineObj = { hash: docHash, inputs: canonicalTarget };\n setBaseline(baselineObj);\n try {\n const raw = localStorage.getItem(docId);\n const existing = raw ? JSON.parse(raw) : {};\n localStorage.setItem(docId, JSON.stringify({ ...existing, baseline: baselineObj }));\n } catch {}\n };\n\n const onExport = async () => {\n if (!tests.pass) return;\n const jsonStr = JSON.stringify(exportJSON, null, 2);\n await doCopy(jsonStr, \"JSON\");\n const now = new Date().toISOString();\n setLastRun(now);\n try {\n const raw = localStorage.getItem(docId);\n const existing = raw ? JSON.parse(raw) : {};\n localStorage.setItem(docId, JSON.stringify({ ...existing, lastRun: now }));\n } catch {}\n };\n\n const copyMarkdown = async () => {\n if (!tests.pass) return;\n await doCopy(mdSummary, \"Markdown\");\n };\n\n // ---- UI ----\n return (\n

\n {/* Header / Controls */}\n

WBR — Runnable Document

8-week scoreboard · WoW deltas · sparklines · channel mix

\n Logic Version\n setLogicVersion(e.target.value)} className=\"px-2 py-1 rounded border border-slate-300 text-sm bg-white\" />\n Alert Threshold\n setAlertThreshold(Number(e.target.value))} className=\"w-40\" />\n

{fmtPct(alertThreshold)}

\n Present\n setPresent(e.target.checked)} />\n

\n\n {/* Test Gate */}\n

{tests.pass ? \"All tests passed\" : \"Tests failing\"}

\n {!tests.pass &&

Fix issues below to enable Export/Copy

}\n

\n \n \n

\n {!tests.pass && (\n

\n )}\n

\n\n {/* Audit */}\n

Doc ID

{docId}

Canonical Hash

{docHash}

\n \n

Baseline / Last Run

{baseline ? baseline.hash : \"—\"} / {lastRun || \"—\"}

\n \n

\n\n {/* KPI Cards */}\n

\n {kpiSummary.map((k) => {\n const wowTxt = k.wow == null ? \"—\" : `${k.wow > 0 ? \"+\" : \"\"}${fmtPct(k.wow)}`;\n const tone = classForDelta({ d: k.wow, invert: k.invert });\n const ring = k.anomaly ? \"ring-2 ring-rose-300\" : \"ring-0\";\n return (\n

{k.label}

\n {k.anomaly &&

Anomaly

}\n

{k.fmt(k.curr)}

{wowTxt} WoW

\n );\n })}\n

\n\n {/* Channels Table */}\n

Channels — {channelMetric}

\n Metric\n \n

\n \n \n \n \n \n \n \n \n \n \n \n {channelRows.map((r) => (\n \n \n \n \n \n \n \n ))}\n \n

Channel	This	Last	WoW	Share
{r.label}	{fmtNum(r.curr)}	{fmtNum(r.prev)}	{r.wow == null ? \"—\" : `${r.wow > 0 ? \"+\" : \"\"}${fmtPct(r.wow)}`}	{fmtPct(r.share)}

\n\n {/* Alerts */}\n {alerts.length > 0 && (\n

Alerts

{a.msg}

\n )}\n\n {/* History Editor */}\n {!present && (\n

History Editor (8 weeks)

\n \n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {weeks.map((w, i) => (\n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n

#	End (ISO)	Revenue	Orders	Active	CAC	Paid	Organic	Email	Referral
{i + 1}	updateWeek(i, { endISO: e.target.value })} className=\"px-1.5 py-1 rounded border w-36\" />	updateWeek(i, { kpi: { ...w.kpi, revenue: v } })} />	updateWeek(i, { kpi: { ...w.kpi, orders: v } })} />	updateWeek(i, { kpi: { ...w.kpi, active: v } })} />	updateWeek(i, { kpi: { ...w.kpi, cac: v } })} />	updateWeek(i, { channels: { ...w.channels, paid: v } })} />	updateWeek(i, { channels: { ...w.channels, organic: v } })} />	updateWeek(i, { channels: { ...w.channels, email: v } })} />	updateWeek(i, { channels: { ...w.channels, referral: v } })} />

\n )}\n\n

\n );\n\n // ---- Local helpers bound to state ----\n function updateWeek(i, patch) {\n setWeeks((prev) => prev.map((w, idx) => (idx === i ? deepMerge(w, patch) : w)));\n }\n}\n\nfunction deepMerge(a, b) {\n if (Array.isArray(a) || Array.isArray(b)) return b;\n if (a && typeof a === \"object\" && b && typeof b === \"object\") {\n const out = { ...a };\n for (const k of Object.keys(b)) out[k] = deepMerge(a[k], b[k]);\n return out;\n }\n return b;\n}\n\nfunction NumInput({ value, onChange }) {\n const [s, setS] = useState(String(value));\n useEffect(() => setS(String(value)), [value]);\n return (\n setS(e.target.value)}\n onBlur={() => {\n const v = Number(s);\n onChange(Number.isFinite(v) ? v : 0);\n }}\n className=\"px-1.5 py-1 rounded border w-28\"\n inputMode=\"decimal\"\n />\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","11091001273422374555","traceTime",1776402861490]