{orbs.map((o, i) => (

))}

); } // ───────────────────────────────────────────────────────────── // Glass card // ───────────────────────────────────────────────────────────── function Glass({ raised = false, style = {}, onClick, children, className = "", glassOpacity = 1, }) { const base = raised ? 0.7 : 0.5; const bg = `rgba(255,255,255,${Math.max(0.25, Math.min(0.92, base * glassOpacity))})`; const blur = raised ? 28 : 20; return (

{children}

); } // ───────────────────────────────────────────────────────────── // Icons — outline, 1.5 stroke, 24×24 // ───────────────────────────────────────────────────────────── const Icon = ({ name, size = 22, color, strokeWidth = 1.5, style = {}, ariaLabel, }) => { const c = color || RZ.fg1; const label = ariaLabel || name; const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: c, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", style, role: "img", "aria-label": label, focusable: "false", }; const paths = { book: ( <> ), mic: ( <> ), waves: ( <> ), back: , close: ( <> ), plus: ( <> ), settings: ( <> ), run: ( <> ), bike: ( <> ), swim: ( <> ), trail: ( <> ), strength: ( <> ), strava: ( ), sun: ( <> ), chat: , check: , chev: , share: ( <> ), sparkle: ( <> ), play: , pause: ( <> ), search: ( <> ), filter: , bell: ( <> ), lock: ( <> ), trash: ( <> ), calendar: ( <> ), clock: ( <> ), heart: ( ), location: ( <> ), volume: ( <> ), arrowRight: ( <> ), arrowLeft: ( <> ), question: ( <> ), wifi: ( <> ), }; return ; }; // ───────────────────────────────────────────────────────────── // Tab bar // ───────────────────────────────────────────────────────────── function TabBar({ active = "journal", onChange }) { const tabs = [ { id: "journal", label: "Journal", icon: "book" }, { id: "nuance", label: "Nuance", icon: "mic" }, { id: "echo", label: "ÉCHO", icon: "waves" }, ]; return (

{tabs.map((t) => { const on = active === t.id; const color = on ? RZ.fg1 : RZ.fg3; return (

onChange && onChange(t.id)} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 3, padding: "4px 14px", cursor: "pointer", minWidth: 64, }} >

{t.label}

); })}

); } // ───────────────────────────────────────────────────────────── // iOS status bar (light) // ───────────────────────────────────────────────────────────── function StatusBar() { return (

9:41

); } // ───────────────────────────────────────────────────────────── // Top bar — back + title + trailing // ───────────────────────────────────────────────────────────── function TopBar({ onBack, title, trailing, subtitle }) { return (

{onBack ? (

) : (

)}

{title && (

{title}

)} {subtitle && (

{subtitle}

)}

{trailing ||

}

); } // ───────────────────────────────────────────────────────────── // Buttons // ───────────────────────────────────────────────────────────── function PrimaryBtn({ children, onClick, style = {}, disabled }) { return ( ); } function SecondaryBtn({ children, onClick, style = {} }) { return ( ); } function GhostBtn({ children, onClick, style = {} }) { return ( ); } function Chip({ children, on, onClick, icon, style = {} }) { return ( ); } // ───────────────────────────────────────────────────────────── // State badge // ───────────────────────────────────────────────────────────── const STATE_META = { resonance: { label: "Harmonie", color: RZ.mauve, bg: "rgba(138,91,149,0.14)", text: "#6A3F75", tag: "result-resonance", }, equilibre: { label: "Équilibre fragile", color: "#4F8BCF", bg: "rgba(23,114,254,0.14)", text: "#0F4FB8", tag: "result-equilibre", }, tension: { label: "Tension", color: "#C66A3A", bg: "rgba(252,68,44,0.12)", text: "#A83E1E", tag: "result-tension", }, dissonance: { label: "Dissonance", color: RZ.orange, bg: "rgba(252,68,44,0.16)", text: "#A82E1A", tag: "result-dissonance", }, alerte: { label: "Alerte récupération", color: RZ.orange, bg: "rgba(252,68,44,0.22)", text: "#8A1E0A", tag: "result-alerte", }, }; function StateBadge({ state, size = "sm" }) { const m = STATE_META[state]; if (!m) return null; const pad = size === "lg" ? "6px 14px" : "3px 9px"; const fs = size === "lg" ? 12 : 10; return ( {m.label} ); } // ───────────────────────────────────────────────────────────── // Nuance visualisation — two orbs in a configuration // ───────────────────────────────────────────────────────────── function NuanceViz({ state = "resonance", size = 240, animated = true }) { // configurations: left orange, right blue, with offsets per state const cfg = { resonance: { ox: 0.5, oy: 0.5, bx: 0.5, by: 0.5, orbS: 0.42, blur: 0.18, mauve: 0.55, }, equilibre: { ox: 0.38, oy: 0.48, bx: 0.56, by: 0.52, orbS: 0.38, blur: 0.12, mauve: 0.22, }, tension: { ox: 0.28, oy: 0.44, bx: 0.68, by: 0.56, orbS: 0.34, blur: 0.1, mauve: 0.0, }, dissonance: { ox: 0.14, oy: 0.4, bx: 0.84, by: 0.62, orbS: 0.32, blur: 0.08, mauve: 0.0, }, alerte: { ox: 0.5, oy: 0.5, bx: -0.5, by: 0.5, orbS: 0.56, blur: 0.22, mauve: 0.0, }, }[state] || {}; const s = size; const blur = s * cfg.blur; const orbS = s * cfg.orbS; return (

{state !== "alerte" && (

)} {cfg.mauve > 0 && (

)}

); } // ───────────────────────────────────────────────────────────── // Notification toast (iOS style) // ───────────────────────────────────────────────────────────── function Toast({ children, icon = "sparkle", onDismiss }) { return (

{children}

{onDismiss && (

)}

); } Object.assign(window, { RZ, OrbBackground, Glass, Icon, TabBar, StatusBar, TopBar, PrimaryBtn, SecondaryBtn, GhostBtn, Chip, StateBadge, NuanceViz, Toast, STATE_META, });