{shadow && (

)}

); } // ───────────────────────────────────────────────────────────────────────── // Wordmark — custom SVG paths for "pote" (lowercase, thick, rounded) // Hand-built; no font dependency. // ───────────────────────────────────────────────────────────────────────── function PoteWordmark({ height = 64, color = '#050505', font = 'svg' }) { // Three render modes: // font='svg' — user-supplied vectorized wordmark (default, brand-accurate) // font='geo' — geometric hand-tuned fallback (no external dependency) // font='bricolage' — Bricolage Grotesque 900 (requires the GF import) if (font === 'bricolage') { return (

pote

); } if (font === 'svg') { // User-vectorized "pote" wordmark — viewBox 150 × 69.4 return ( ); } // 'geo' — geometric hand-tuned fallback (the prior SVG) // Each glyph drawn at its own (0,0) and placed with a known translate. // p (w 110) at x=0 → 0..110 // o (w 96) at x=114 → 114..210 // t (w 60) at x=216 → 216..276 // e (w 104) at x=270 → 270..374 (slight optical kerning into t) // viewBox 380 × 150. Counters via evenodd subpaths so it works on any bg. return ( ); } // ───────────────────────────────────────────────────────────────────────── // Buttons, chips, pills, highlight, bottom nav // ───────────────────────────────────────────────────────────────────────── function PrimaryButton({ children, full = true, onClick, style = {} }) { return ( ); } function SecondaryButton({ children, full = true, onClick, style = {} }) { return ( ); } function StepPill({ step = 1, total = 3, lang = 'es' }) { const sep = lang === 'es' ? 'de' : 'of'; return (

{step} {sep} {total}

); } // Highlight a word with lime block behind it (inline). Forces black text // so it stays readable when the surrounding text color is white/light. function Hl({ children }) { return ( {children} ); } // Chip — small black pill with white text, used for pote labels function NameChip({ children, dark = true, style = {} }) { return ( {children} ); } // Outside label "Cena · 85%" for small potes — paper card function ExternalLabel({ name, pct, style = {} }) { return ( {name} · {pct}% ); } // Bottom nav — 4 icons, active gets lime circle function BottomNav({ active = 'home', lang = 'es' }) { const labels = lang === 'es' ? { home: 'Inicio', potes: 'Potes', moves: 'Movs', me: 'Perfil' } : { home: 'Home', potes: 'Potes', moves: 'Activity', me: 'Me' }; const items = [ { id: 'home', label: labels.home, icon: }, { id: 'potes', label: labels.potes, icon: }, { id: 'moves', label: labels.moves, icon: }, { id: 'me', label: labels.me, icon: }, ]; return (

{items.map(it => { const isActive = active === it.id; return (

{it.icon}

{it.label}

); })}

); } function NavIcon({ name }) { const s = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (name === 'home') return ; if (name === 'potes') return ; if (name === 'moves') return ; if (name === 'me') return ; return null; } // Top-right bell + avatar cluster (home) with optional Live Activity pill function HomeTopBar({ name = 'Samu', lang = 'es', achievement = null }) { const isES = lang === 'es'; return (

{/* Profile with greeting (matches codebase ChromeHomeGreetingButton) */}

Hola, {name} 👋

{/* Live Activity pill — "Poti cuida X primero" */} {achievement ? (

{isES ? 'Estado de Poti' : 'Poti status'}

{isES ? 'Poti cuida Japón primero' : 'Poti tends Japón first'}

) : (

)} {/* Bell */}

); } // Floating + FAB function FAB() { return ( ); } // Soft section card (white-ish rounded card) function Card({ children, style = {} }) { return (

{children}

); } // ───────────────────────────────────────────────────────────────────────── // Screen frame — wrapper that draws an iPhone-style bezel without iOS chrome. // Pote owns its own look; we just provide rounded screen + status bar time + // home indicator, so it reads as a real phone. // ───────────────────────────────────────────────────────────────────────── function PhoneFrame({ children, bg = POTE_COLORS.paper, width = 402, height = 874, label }) { return (

{/* dynamic island */}

{/* status time */}

9:41

{/* status icons */}

{/* home indicator */}

{children}

); } // ───────────────────────────────────────────────────────────────────────── // WeekAccent — el ACENTO «toca esta semana». Un halo lima que abraza el orbe // ───────────────────────────────────────────────────────────────────────── // ClusterViewTabs — selector de VISTA del cluster, a escala de cabecera. // Reemplaza el viejo «Tus potes · N activos». El usuario elige activamente: // Prioridad (default) → todos los potes en su orden (1·2·3…). // Esta semana → solo los que tienen aporte; el resto, en calma. // Tabs de texto con subrayado tinta — no repite la pastilla de Día|Sem. // ───────────────────────────────────────────────────────────────────────── function ClusterViewTabs({ value = 'prioridad', onChange, options }) { const opts = options || [{ k: 'prioridad', t: 'Prioridad' }, { k: 'semana', t: 'Esta semana' }]; return (

{opts.map(o => { const a = value === o.k; return ( onChange && onChange(o.k)} style={{ position: 'relative', fontSize: 17, fontWeight: a ? 800 : 700, letterSpacing: '-0.5px', color: a ? POTE_COLORS.black : 'rgba(5,5,5,0.32)', cursor: 'pointer', paddingBottom: 6, lineHeight: '20px', fontFamily: 'inherit', userSelect: 'none', whiteSpace: 'nowrap', }}> {o.t} {a && } ); })}

); } // ───────────────────────────────────────────────────────────────────────── // Floating cluster — utility to lay out home potes with natural positions. // ORDEN = el del usuario (06c · Orden = grid): fijados primero, luego posición // 1·2·3… (el orden del array). El puesto 1 está SIEMPRE al frente. El acento // «toca esta semana» NO vive en el orbe: es la vista «Esta semana» del selector. // ───────────────────────────────────────────────────────────────────────── function PoteCluster({ items, animate = true, lang = 'es' }) { // each item: { name, goal, progress, color, x, y, size, label? } return (

{items.map((p, i) => ( ))}

); } function FloatingPote({ item, animate, index, lang }) { const { name, progress, color, x, y, size, mode = 'inside' } = item; // mode: 'inside' = % inside, name chip above; 'outside' = no text inside, paper label below const pct = Math.round(progress * 100); const id = `float-${index}`; const dx = (index % 2 === 0 ? 1 : -1) * 6; const dy = (index % 3 === 0 ? -1 : 1) * 8; const dur = 6.5 + (index * 0.7) % 3; const delay = (index * 0.6) % 4; return (

{mode === 'inside' && (

{name}

)} {mode === 'outside' && (

)}

); } // Register globals Object.assign(window, { POTE_COLORS, ORB_PALETTES, PoteOrb, PoteWordmark, PrimaryButton, SecondaryButton, StepPill, Hl, NameChip, ExternalLabel, BottomNav, HomeTopBar, FAB, Card, PhoneFrame, PoteCluster, FloatingPote, NavIcon, ClusterViewTabs, });