onPick(v.id)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onPick(v.id); } }}
onMouseEnter={e => { Object.assign(e.currentTarget.style, { transform: "translateY(-3px)", boxShadow: `0 12px 32px color-mix(in oklch,${v.color} 22%,transparent)` }); }}
onMouseLeave={e => { Object.assign(e.currentTarget.style, { transform: "none", boxShadow: prominent ? `0 1px 0 color-mix(in oklch,${v.color} 12%,transparent)` : "none" }); }}
>
{/* accent stripe */}
{/* PRESET pill */}
preset
{I(v.icon, { size: 22 })}
{v.examples}
{v.chars.map((c) => (
{I("Check", { size: 11 })}
{c}
))}
{/* BOM tag previews — mono 11px chips */}
{(v.bomTagPreviews || v.bomExtra.slice(0, 3)).map(tag => {
const _bomTagChipStyle = {
padding: "2px 7px", borderRadius: 3,
border: `1px solid color-mix(in oklch,${v.color} 35%,var(--line))`,
background: `color-mix(in oklch,${v.color} 6%,transparent)`,
color: v.color, fontFamily: "var(--font-mono)",
fontSize: 12, lineHeight: 1.4,
};
return {tag};
})}
{v.defaultModules.length} modules pre-selected
{(() => {
const _presetCtaStyle = { width: "100%", padding: "9px 0", borderRadius: 6, cursor: "pointer",
border: `1px solid ${v.color}`, background: v.color,
color: v.color.includes("250") ? "oklch(0.98 0.01 250)" : "oklch(0.14 0.02 55)",
fontFamily: "var(--font-ui)", fontSize: 12, fontWeight: 600 };
return (
);
})()}
{ Object.assign(e.currentTarget.style, { transform: "translateY(-3px)", boxShadow: `0 12px 32px color-mix(in oklch,${v.color} 18%,transparent)` }); }}
onMouseLeave={e => { Object.assign(e.currentTarget.style, { transform: "none", boxShadow: "none" }); }}>
{I(v.icon, { size: 22 })}
{v.examples}
{v.chars.map((c) => (
{I("Check", { size: 11 })}
{c}
))}
{v.defaultModules.length} modules pre-selected
{v.bomExtra.slice(0, 3).map(col => (
{col}
))}
{(() => {
const _wizardCtaStyle = { width: "100%", padding: "9px 0", borderRadius: 6, cursor: "pointer",
border: `1px solid ${v.color}`, background: v.color,
color: v.id === "space" ? "oklch(0.16 0.01 250)" : "oklch(0.14 0.02 55)",
fontFamily: "var(--font-ui)", fontSize: 12, fontWeight: 600 };
return (
);
})()}
{/* ── Return to Dashboard escape hatch (Wave 8J) ── */}
Pick a preset, or configure a new vertical
Presets load a fully-wired tenant in one click: parts, BOMs, work orders, ledger, and dashboards. Net-new verticals run through the setup wizard.
{/* ── Three OEM preset cards (single row, all top-tier) ── */}
OEM presets · ready to demo
{/* ── Divider + wizard toggle ── */}
{(() => {
const _wizardToggleStyle = { padding: "8px 18px", borderRadius: 6, cursor: "pointer",
border: "1px solid var(--line)", background: "var(--bg-2)",
color: "var(--ink-2)", fontFamily: "var(--font-ui)", fontSize: 12, fontWeight: 500 };
return (
);
})()}
{/* ── Wizard verticals (revealed on toggle) ── */}
{showWizard && (
Net-new vertical · 5-step wizard
{wizardVerts.map(v => )}
)}
You can switch verticals or re-run setup any time from Settings
{I(cfg.icon, { size: 16 })}
{cfg.steps.map((s, i) => {
const done = i < step, cur = i === step;
const _stepRowStyle = { display: "grid", gridTemplateColumns: "26px 1fr", gap: 8, padding: "8px 6px",
cursor: "pointer", borderRadius: 5,
background: cur ? "var(--bg-2)" : "transparent" };
const _stepBadgeStyle = { width: 20, height: 20, borderRadius: 5, display: "grid", placeItems: "center",
background: done ? cfg.color : cur ? "var(--bg-3)" : "var(--bg-2)",
color: done ? "oklch(0.14 0.02 55)" : "var(--ink-3)",
border: `1px solid ${done || cur ? cfg.color : "var(--line)"}`,
fontFamily: "var(--font-mono)", fontSize: 12 };
return (
setStep(i)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setStep(i); } }}
style={_stepRowStyle}>
{done ? "✓" : s.id}
{i < cfg.steps.length - 1 && (
)}
Step {s.id} · {s.label}
{s.title}
{s.sub}
);
})}
{(() => {
const _resetBtnStyle = { width: "100%", padding: "6px 0", border: "1px solid var(--line)", borderRadius: 5,
background: "transparent", color: "var(--ink-3)", fontFamily: "var(--font-mono)",
fontSize: 12, cursor: "pointer" };
return (
);
})()}
);
}
// ─── Module grid ──────────────────────────────────────────────────────────
function ModuleGrid({ cfg, mods, setMods }) {
const groups = [...new Set(MODULE_CATALOG.map(m => m.group))];
return (
{groups.map(grp => (
{grp}
{MODULE_CATALOG.reduce((acc, m) => { if (m.group === grp) acc.push(m); return acc; }, []).map(mod => {
const on = !!mods[mod.id];
const recommended = cfg.defaultModules.includes(mod.id);
const _modCardStyle = { padding: "12px 12px", border: `1px solid ${on ? cfg.color : "var(--line-soft)"}`,
borderRadius: 7, cursor: "pointer", background: on ? `color-mix(in oklch,${cfg.color} 7%,var(--bg-1))` : "var(--bg-1)",
position: "relative", transition: "border-color .15s, background .15s" };
return (
setMods(m => ({ ...m, [mod.id]: !m[mod.id] }))}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setMods(m => ({ ...m, [mod.id]: !m[mod.id] })); } }}
style={_modCardStyle}>
{recommended && (() => {
const _modRecBadgeStyle = { position: "absolute", top: 6, right: 8, fontSize: 12,
fontFamily: "var(--font-mono)", color: cfg.color,
textTransform: "uppercase", letterSpacing: ".06em" };
return
recommended
;
})()}
{I(mod.icon, { size: 15 })}
{mod.name}
{mod.desc}
{(() => {
const _modToggleHandleStyle = { position: "absolute", top: 2, left: on ? 14 : 2, width: 12, height: 12,
borderRadius: 6, background: "var(--bg-inset)", transition: "left .2s" };
return
;
})()}
);
})}
))}
);
}
// ─── Form panel ───────────────────────────────────────────────────────────
function FormArea({ cfg, step, setStep, form, setForm, mods, setMods, setToast, onFinish }) {
const stepCfg = cfg.steps[step];
const fields = STEP_FIELDS[cfg.id]?.[step] || [];
const isLast = step === cfg.steps.length - 1;
const setF = (k, v) => setForm(f => ({ ...f, [k]: v }));
return (
setStep(Math.max(0, step - 1))} title="Back">Back
{
if (isLast) { if (onFinish) onFinish(); else if (setToast) setToast("✓ Forge configured — welcome aboard"); }
else setStep(prev => prev + 1);
}}>
{isLast ? "Go Live →" : "Continue →"}
}>
{stepCfg.title}
{stepCfg.sub}
{isLast ? (
) : (
<>
{/* STEP 0 — sub-vertical chooser, regulation multi-select, ERP flavor */}
{step === 0 && (
Sub-vertical · pick the one closest to you
{(cfg.subVerticals || []).map(sv => {
const on = form.subVertId === sv.id;
const _subVertCardStyle = { padding: "10px 12px", border: `1px solid ${on ? cfg.color : "var(--line-soft)"}`,
borderRadius: 6, cursor: "pointer",
background: on ? `color-mix(in oklch,${cfg.color} 8%,var(--bg-1))` : "var(--bg-1)",
transition: "border-color .15s, background .15s" };
return (
setF("subVertId", sv.id)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setF("subVertId", sv.id); } }}
style={_subVertCardStyle}>
{sv.label}
{sv.desc}
);
})}
Regulations / standards in scope · multi-select
{(cfg.regulations || []).map(r => {
const sel = (form.regs || []).includes(r);
const _regChipStyle = { padding: "4px 10px", borderRadius: 999, cursor: "pointer",
border: `1px solid ${sel ? cfg.color : "var(--line)"}`,
color: sel ? cfg.color : "var(--ink-3)",
background: sel ? `color-mix(in oklch,${cfg.color} 12%,transparent)` : "var(--bg-2)",
fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".04em", textTransform: "uppercase" };
return (
{
const cur = form.regs || [];
setF("regs", sel ? cur.filter(x => x !== r) : [...cur, r]);
}}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); const cur = form.regs || []; setF("regs", sel ? cur.filter(x => x !== r) : [...cur, r]); } }}
style={_regChipStyle}>
{r}
);
})}
Existing ERP / system of record
{(cfg.erpFlavors || []).map(ef => {
const sel = form.erpFlavor === ef;
const _erpChipStyle = { padding: "4px 10px", borderRadius: 4, cursor: "pointer",
border: `1px solid ${sel ? cfg.color : "var(--line)"}`,
color: sel ? "var(--ink)" : "var(--ink-3)",
background: sel ? `color-mix(in oklch,${cfg.color} 14%,transparent)` : "var(--bg-2)",
fontFamily: "var(--font-mono)", fontSize: 12 };
return (
setF("erpFlavor", ef)}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setF("erpFlavor", ef); } }}
style={_erpChipStyle}>
{ef}
);
})}
)}
{fields.map(([label, key]) => {
const _formInputStyle = { background: "var(--bg-2)", border: "1px solid var(--line)", borderRadius: 5,
padding: "7px 10px", color: "var(--ink)", fontFamily: "var(--font-mono)",
fontSize: 12, outline: "0 solid transparent" };
return (
);
})}
{/* STEP 1 — persona multi-pick (who's actually on this team) */}
{step === 1 && cfg.personaPresets && (
Active personas · who'll use Forge in your org
{cfg.personaPresets.map(p => {
const sel = (form.personas || []).includes(p);
return (
{
const cur = form.personas || [];
setF("personas", sel ? cur.filter(x => x !== p) : [...cur, p]);
}}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); const cur = form.personas || []; setF("personas", sel ? cur.filter(x => x !== p) : [...cur, p]); } }}
style={{ padding: "4px 10px", borderRadius: 999, cursor: "pointer",
border: `1px solid ${sel ? cfg.color : "var(--line)"}`,
color: sel ? cfg.color : "var(--ink-3)",
background: sel ? `color-mix(in oklch,${cfg.color} 12%,transparent)` : "var(--bg-2)",
fontSize: 12 }}>
{sel ? "✓ " : ""}{p}
);
})}
Each persona shapes the rail order, default workshop prompts, and inspector tabs.
)}
{/* Vertical-specific extra content per step */}
{cfg.id === "space" && step === 2 && (
BOM Column Preview
{["Part","Name","Qty","Rev",...cfg.bomExtra].map(col => (
{col}
))}
)}
{cfg.id === "space" && step === 3 && (
Qualification Gate Sequence
{cfg.lifecycleStages.map((s, i) => (
{s}
{i < cfg.lifecycleStages.length - 1 && (
)}
))}
)}
{cfg.id === "mittelstand" && step === 4 && (
Quality Gate Sequence
{["Design Review","Prototype Approval","Validation Test","FAI","Production Release"].map(g => (
{g}
))}
)}
{cfg.id === "pump" && step === 2 && (
Installed-base record fields
{["Customer","Site","Serial No.","Model","Fluid","Depth (m)","Install Date","Last Service"].map(f => (
{f}
))}
)}
{cfg.id === "pump" && step === 3 && (
Aftermarket lifecycle stages
{["Commission","First Service","Mid-Life Overhaul","End-of-Life Repl."].map((s, i, arr) => (
{s}
{i < arr.length - 1 && }
))}
)}
)}
);
}
// ─── Preview / context panel ──────────────────────────────────────────────
function PreviewCol({ cfg, step, form, mods }) {
const activeCount = Object.values(mods).filter(Boolean).length;
const isLastStep = step === cfg.steps.length - 1;
return (
{/* Identity card */}
{I(cfg.icon, { size: 20 })}
{form.missionName || form.company || form.families?.split(",")[0] || cfg.label}
{cfg.label}
{cfg.id === "space" && (
<>
{[["Orbit", form.orbit || "—"], ["Mass", form.mass ? form.mass + " kg" : "—"],
["Customer", form.customer || "—"], ["Launch", form.launchDate || "—"]].map(([k, v]) => (
{k}
{v}
))}
)}
{cfg.id === "mittelstand" && (
<>
{[["Company", form.company || "—"], ["Employees", form.employees || "—"],
["Segment", form.segment || "—"], ["ERP", form.erp || "—"]].map(([k, v]) => (
{k}
{v}
))}
)}
{cfg.id === "pump" && (
<>
{[["Company", form.company || "—"], ["Markets", form.markets || "—"],
["Installed Base", form.installedBase || "—"], ["OEM / AM", `${form.oemPct || "—"}% / ${form.amPct || "—"}%`]].map(([k, v]) => (
{k}
{v}
))}
)}
{cfg.id === "pyrolysis" && (
<>
{[["Customer", form.customer || "—"], ["Capacity", form.capacity ? form.capacity + " t/yr" : "—"],
["Feedstock", form.feedstock || "—"], ["Char Grade", form.charGrade || "—"]].map(([k, v]) => (
{k}
{v}
))}
)}
{/* BOM columns preview */}
{["Part", "Name", "Qty", "Rev", ...cfg.bomExtra].map((c, i) => (
= 4 ? `color-mix(in oklch,${cfg.color} 40%,var(--line))` : "var(--line)",
color: i >= 4 ? cfg.color : "var(--ink-3)" }}>{c}
))}
{cfg.bomExtra.length} vertical-specific columns added
{/* Lifecycle stages */}
{cfg.lifecycleStages.map((s, i) => {
const _lifecycleIconStyle = { width: 18, height: 18, borderRadius: 4, display: "grid", placeItems: "center",
background: i < 2 ? cfg.color : "var(--bg-2)",
border: `1px solid ${i < 2 ? cfg.color : "var(--line)"}`,
fontFamily: "var(--font-mono)", fontSize: 12,
color: i < 2 ? "oklch(0.14 0.02 55)" : "var(--ink-3)" };
return (
{i < 2 ? "✓" : i + 1}
{s}
{i === 2 &&
CURRENT}
);
})}
{/* Module summary */}
{isLastStep && (
{activeCount}
modules enabled
{MODULE_CATALOG.reduce((acc, m) => { if (mods[m.id]) acc.push(m); return acc; }, []).map(m => (
{I(m.icon, { size: 10 })}
{m.name}
))}
)}
);
}
// ─── Loading overlay shown during preset → dashboard transition (Wave 8I) ─
// Renders for ~1s after a "Load X demo →" click. Two jobs:
// 1. Tell the user *something* is happening (one-click flows feel broken
// without feedback when the route swap is fast).
// 2. Give the tenant-change event a beat to propagate (300-500ms) so
// listeners in app-shell, api.js, useTenantState, etc. settle BEFORE
// the dashboard mounts and starts fetching with the new tenant id.
function PresetLoadingOverlay({ label, color }) {
const _overlayStyle = {
position: "fixed", inset: 0, zIndex: 9999,
display: "grid", placeItems: "center",
background: "color-mix(in oklch, var(--bg-0, oklch(0.99 0.003 85)) 92%, transparent)",
backdropFilter: "blur(4px)",
WebkitBackdropFilter: "blur(4px)",
};
const _cardStyle = {
display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
padding: "26px 38px", borderRadius: 12,
border: `1px solid color-mix(in oklch,${color} 35%,var(--line))`,
background: "var(--bg-1)",
boxShadow: `0 18px 48px color-mix(in oklch,${color} 18%,transparent)`,
};
const _spinnerStyle = {
width: 28, height: 28, borderRadius: "50%",
border: `2px solid color-mix(in oklch,${color} 18%,transparent)`,
borderTopColor: color,
animation: "forge-preset-spin .8s linear infinite",
};
return (
);
}
// ─── Main ScreenOnboarding ────────────────────────────────────────────────
function ScreenOnboarding({ setToast, onComplete }) {
const [vertId, setVertId] = uSOB(null);
const [step, setStep] = uSOB(0);
const [form, setForm] = uSOB({});
const [mods, setMods] = uSOB({});
// { tenantId, label, color } while a preset is mid-transition, else null.
const [loading, setLoading] = uSOB(null);
// go(tenant, path) — Wave 8I bypass helper.
// Sequence: set tenant → wait ~350ms so the tenant-change event reaches
// listeners (app-shell tenant switcher, api.js cache reset, useTenantState
// bumps) → navigate. The visible overlay covers the gap so the user never
// sees a flash of the old tenant's content on /forge/dashboard.
const go = (tenant, path) => {
if (typeof setActiveTenant === "function") setActiveTenant(tenant);
setTimeout(() => {
if (typeof window !== "undefined" && typeof window.navigate === "function") {
window.navigate(path);
} else if (typeof window !== "undefined") {
window.location.hash = path;
}
// Hold the overlay ~650ms past navigation so the dashboard's first
// paint happens behind it; total visible time ≈ 1.0s.
setTimeout(() => setLoading(null), 650);
}, 350);
};
const pickVert = (id) => {
// Demo bypass map: card id → { tenantId, label, color } for overlay.
const bypassMap = {
"tritan-pump": { tenantId: "tritan", label: "Tritan", color: TRITAN_DEMO_VERT.color },
"aetherion-space": { tenantId: "aetherion", label: "Aetherion", color: AETHERION_DEMO_VERT.color },
"mittelstand-machine": { tenantId: "mittelstand", label: "Mittelstand", color: MITTELSTAND_DEMO_VERT.color },
};
const bypass = bypassMap[id];
if (bypass) {
// Guard against double-clicks while the overlay is up.
if (loading) return;
setLoading(bypass);
go(bypass.tenantId, "/forge/dashboard");
return;
}
setVertId(id);
setStep(0);
setForm({});
const cfg = VERTICALS[id];
setMods(Object.fromEntries(MODULE_CATALOG.map(m => [m.id, cfg.defaultModules.includes(m.id)])));
};
if (!vertId) return (
<>
{loading && }
);
const cfg = VERTICALS[vertId];
const finish = () => {
const payload = {
vertId,
vertLabel: cfg.label,
mods: Object.entries(mods).reduce((acc, [k, v]) => { if (v) acc.push(k); return acc; }, []),
form,
ts: new Date().toISOString(),
};
if (onComplete) onComplete(payload);
else if (setToast) setToast("✓ Forge configured — welcome aboard");
};
return (
{ setVertId(null); setStep(0); }}/>
);
}
Object.assign(window, { ScreenOnboarding });