import { useMemo, useState, type CSSProperties } from "react"; import { Bike, Check, CircleCheck, CircleDashed, Clock3, Home, Plus, Search, Sparkles, UserRoundPlus, UtensilsCrossed } from "lucide-react"; import HexLattice, { type HexNode } from "./HexLattice"; type CartCategoryKey = "food" | "activities" | "habitat"; type OnboardingStep = 1 | 2 | 3 | 4 | 5 | 6 | 7; type CurrentWarmth = "hot" | "warm" | "cool"; type ClaimStatus = "dim" | "pending"; type ClaimSlot = { id: string; name: string; role: string; signal: "hearts" | "stars" | "moons"; status: ClaimStatus; }; type SeedItem = { id: string; category: CartCategoryKey; name: string; }; type CurrentPreviewPerson = { name: string; warmth: CurrentWarmth; signal: "hearts" | "stars" | "moons" | "hourglasses" | "balloons"; }; export interface CascadeOnboardingStoryboardProps { title?: string; subtitle?: string; initialName?: string; onComplete?: () => void; } const STEP_META: Record = { 1: { title: "Name + Claim Your Hex", action: "Enter your name to anchor the center.", icon: Sparkles }, 2: { title: "Plant Your Inner Circle", action: "Claim or skip your first 6 anchors.", icon: UserRoundPlus }, 3: { title: "First Cart — Food", action: "Add at least one food signal.", icon: UtensilsCrossed }, 4: { title: "First Cart — Activities", action: "Add at least one activity signal.", icon: Bike }, 5: { title: "First Cart — Habitat", action: "Add at least one habitat signal.", icon: Home }, 6: { title: "Your Constellation Begins", action: "You need 9 planted seeds before the cascade begins.", icon: Clock3 }, 7: { title: "First Return — The Current", action: "Your atmosphere is live.", icon: Sparkles }, }; const INNER_CIRCLE: ClaimSlot[] = [ { id: "north", name: "Ari", role: "Anchor", signal: "hearts", status: "dim" }, { id: "northeast", name: "Sam", role: "Anchor", signal: "stars", status: "dim" }, { id: "southeast", name: "Jo", role: "Anchor", signal: "moons", status: "dim" }, { id: "south", name: "Mina", role: "Anchor", signal: "hearts", status: "dim" }, { id: "southwest", name: "Rae", role: "Anchor", signal: "stars", status: "dim" }, { id: "northwest", name: "Tae", role: "Anchor", signal: "moons", status: "dim" }, ]; const CATEGORY_META: Record< CartCategoryKey, { label: string; icon: string; accent: string; prompt: string; examples: string[]; signal: "hearts" | "stars" | "moons" } > = { food: { label: "Food", icon: "🍜", accent: "#d4a574", prompt: "Tell us how you eat.", examples: ["Ramen Bar X", "Farmers market on Saturdays", "My own cooking"], signal: "hearts", }, activities: { label: "Activities", icon: "⛰️", accent: "#8ab6d6", prompt: "Tell us how you spend your time.", examples: ["Rock climbing on weekends", "Jazz vinyl listening", "Language learning apps"], signal: "stars", }, habitat: { label: "Habitat", icon: "🪴", accent: "#9ac18a", prompt: "Tell us about your space.", examples: ["My plants (14 and counting)", "Minimalist kitchen", "Bookshelf I actually use"], signal: "moons", }, }; const CURRENT_PREVIEW: CurrentPreviewPerson[] = [ { name: "Mira", warmth: "hot", signal: "hearts" }, { name: "Sol", warmth: "warm", signal: "stars" }, { name: "Nadia", warmth: "cool", signal: "moons" }, { name: "Iris", warmth: "warm", signal: "hourglasses" }, { name: "Jun", warmth: "hot", signal: "balloons" }, { name: "Luca", warmth: "warm", signal: "stars" }, ]; function makeId(prefix: string) { return `${prefix}-${Math.random().toString(36).slice(2, 8)}-${Date.now().toString(36)}`; } function initials(name: string) { return name .split(/\s+/) .filter(Boolean) .map((part) => part[0]?.toUpperCase()) .slice(0, 2) .join(""); } function shortLabel(value: string, limit = 12) { const trimmed = value.trim().replace(/\s+/g, " "); return trimmed.length <= limit ? trimmed : `${trimmed.slice(0, limit - 1)}…`; } function statusLabel(status: ClaimStatus) { if (status === "pending") return "PENDING"; return "DIM"; } function categorySignal(category: CartCategoryKey) { return CATEGORY_META[category].signal; } function warmthChip(warmth: CurrentWarmth) { if (warmth === "hot") return { label: "Hot", icon: "🔥", color: "#fb7185" }; if (warmth === "warm") return { label: "Warm", icon: "🌡️", color: "#f59e0b" }; return { label: "Cool", icon: "🌿", color: "#94a3b8" }; } function buildNodes(step: OnboardingStep, name: string, claims: ClaimSlot[], seeds: SeedItem[]): HexNode[] { const nodes: HexNode[] = [ { id: "center", ring: 0, position: 0, type: "you", label: name.trim() || "YOU", }, ]; claims.forEach((slot, index) => { nodes.push({ id: slot.id, ring: 1, position: index, type: slot.status === "pending" ? "person" : "dim", label: slot.name, resonanceSignal: slot.signal, }); }); if (step >= 3) { const positions: Record = { food: [0, 3, 6], activities: [1, 7, 13], habitat: [2, 8, 14], }; (Object.keys(positions) as CartCategoryKey[]).forEach((category) => { seeds .filter((item) => item.category === category) .slice(0, 3) .forEach((item, index) => { nodes.push({ id: item.id, ring: 2, position: positions[category][index], type: "person", label: shortLabel(item.name, 12), resonanceSignal: categorySignal(category), }); }); }); } if (step >= 6) { CURRENT_PREVIEW.forEach((person, index) => { nodes.push({ id: `current-${index}`, ring: 6, position: index * 6, type: step === 6 ? "dim" : person.warmth === "hot" ? "resonance-hot" : person.warmth === "warm" ? "resonance-warm" : "resonance-cool", label: step === 6 ? "" : initials(person.name), resonanceSignal: step === 6 ? undefined : person.signal, }); }); } return nodes; } function StepCard({ active, done, icon: Icon, title, label, onClick, }: { active: boolean; done: boolean; icon: typeof Sparkles; title: string; label: string; onClick: () => void; }) { return ( ); } function StatBox({ label, value, detail }: { label: string; value: string; detail: string }) { return (
{label}
{value}
{detail}
); } export default function CascadeOnboardingStoryboard({ title = "Cascade Onboarding", subtitle = "Onboarding is not a tutorial. It is the first act of the game.", initialName = "", onComplete, }: CascadeOnboardingStoryboardProps) { const [step, setStep] = useState(1); const [name, setName] = useState(initialName); const [claimed, setClaimed] = useState([]); const [selectedCategory, setSelectedCategory] = useState("food"); const [drafts, setDrafts] = useState>({ food: "", activities: "", habitat: "" }); const [seeds, setSeeds] = useState([]); const categoryCounts = { food: seeds.filter((item) => item.category === "food").length, activities: seeds.filter((item) => item.category === "activities").length, habitat: seeds.filter((item) => item.category === "habitat").length, }; const plantedCount = 1 + claimed.length + seeds.length; const canContinue = (step === 1 && name.trim().length > 0) || step === 2 || (step === 3 && categoryCounts.food > 0) || (step === 4 && categoryCounts.activities > 0) || (step === 5 && categoryCounts.habitat > 0) || (step === 6 && plantedCount >= 9) || step === 7; const activeMeta = STEP_META[step]; const activeCategory = step === 3 ? "food" : step === 4 ? "activities" : step === 5 ? "habitat" : selectedCategory; const latticeNodes = useMemo( () => buildNodes(step, name, INNER_CIRCLE.map((slot) => ({ ...slot, status: claimed.includes(slot.id) ? "pending" : "dim" })), seeds), [claimed, name, seeds, step], ); const theme = { bg: "#09090d", panel: "rgba(18, 20, 28, 0.86)", card: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.10)", fg: "#f5eadc", muted: "rgba(245,234,220,0.68)", accent: "#d4a574", }; const next = () => { if (!canContinue) return; if (step === 7) { onComplete?.(); return; } setStep((current) => Math.min(7, (current + 1) as OnboardingStep)); }; const back = () => setStep((current) => Math.max(1, (current - 1) as OnboardingStep)); const toggleClaim = (id: string) => { setClaimed((current) => (current.includes(id) ? current.filter((value) => value !== id) : [...current, id])); }; const addSeed = (category: CartCategoryKey, value: string) => { const trimmed = value.trim(); if (!trimmed) return; setSeeds((current) => { const duplicate = current.some((item) => item.category === category && item.name.toLowerCase() === trimmed.toLowerCase()); if (duplicate) return current; return [...current, { id: makeId(category), category, name: trimmed }]; }); setDrafts((current) => ({ ...current, [category]: "" })); }; const removeSeed = (id: string) => setSeeds((current) => current.filter((item) => item.id !== id)); const currentWarmth = warmthChip(step >= 7 ? "hot" : step >= 6 ? "warm" : "cool"); return (
Cascade · Onboarding

{title}

{subtitle}

Current
{step >= 7 ? "Live" : step >= 6 ? "Forming" : "Dormant"}
{currentWarmth.icon} {currentWarmth.label}
{Object.entries(STEP_META).map(([key, meta]) => { const number = Number(key) as OnboardingStep; const done = number < step || (number === 1 && name.trim().length > 0) || (number === 2 && claimed.length > 0) || (number === 3 && categoryCounts.food > 0) || (number === 4 && categoryCounts.activities > 0) || (number === 5 && categoryCounts.habitat > 0); return ( setStep(number)} /> ); })}
{activeMeta.title}

{activeMeta.action}

{step === 1 ? : step === 2 ? : step >= 3 && step <= 5 ? : step === 6 ? : } {step === 1 ? "Center hex" : step === 2 ? "Bidirectional claim" : step >= 3 && step <= 5 ? "First cart items" : step === 6 ? "Consolidating" : "Hourly atmosphere"}
= 3 ? 2 : 0} />
Center
{name.trim() || "Your name goes here"}
The center hex is fixed. It cannot be moved or taken.
Ring 1
{claimed.length}/6 claimed
Claiming is bidirectional. Pending until mutual.
Ring 6
{step >= 7 ? "Atmosphere live" : step >= 6 ? "Forming" : "Dormant"}
People enter The Current at the hourly tempo.
); }