); } return (

{items}

); } // ── Concentric ring — "ringing" indicator ──────────────────────────────────── function RingingRing({ size = 24, color = '#F04E23' }) { return ( ); } // ── Stamp — letterpress-style accent box ───────────────────────────────────── function Stamp({ children, color = '#F04E23', style = {} }) { return ( {children} ); } // ── Hairline label row — "FIELD · value" key-value, used a lot ─────────────── function FieldRow({ label, children, align = 'space-between' }) { return (

{label} {children}

); } // ── Tape strip — used as data ribbons / call timeline ──────────────────────── function TapeStrip({ ticks = 40, color = VC_TOKENS.ink, height = 28, label }) { return (

{label && {label}}

{Array.from({length: ticks}).map((_,i) => (

))}

); } // ── Card surface — universal panel ─────────────────────────────────────────── function Surface({ children, padding = 24, bg = VC_TOKENS.paper, bordered = true, style = {} }) { return (

{children}

); } // ── Section header ─────────────────────────────────────────────────────────── function SectionHead({ eyebrow, title, action }) { return (

{eyebrow && {eyebrow}}

{title}

{action}

); } // ── Avatar — typographic, no images ────────────────────────────────────────── function Avatar({ name, size = 36, bg = VC_TOKENS.ink, fg = VC_TOKENS.paper }) { const initials = (name || '?').split(' ').slice(0,2).map(w => w[0]).join('').toUpperCase(); return ( {initials} ); } // ── Big number metric ──────────────────────────────────────────────────────── function Metric({ value, unit, label }) { return (

{value} {unit && {unit}}

{label}

); } // ── Phone glyph (thin line-art only — no emoji, no glowing icons) ──────────── function PhoneGlyph({ size = 14, color = 'currentColor', strokeWidth = 1.5 }) { return ( ); } function ArrowGlyph({ size = 14, dir = 'right', color = 'currentColor' }) { const rot = { right: 0, left: 180, up: -90, down: 90 }[dir] || 0; return ( ); } // ── Striped placeholder for imagery (we don't have any) ────────────────────── function StripedPlaceholder({ width = '100%', height = 200, label, color = VC_TOKENS.ink, bg = VC_TOKENS.paper2 }) { const stripe = `repeating-linear-gradient(135deg, ${bg} 0 12px, ${VC_TOKENS.paper3} 12px 13px)`; return (

{label}

); } // Expose to other Babel scripts // ── AppHeader ────────────────────────────────────────────────────────────── // Unified top nav for in-app screens. Use across Dashboard, OutboundCall, // CallDetail, ContactsMemory, Reminders, AuditLog, Pricing. // `current` highlights the active route key. `dark` flips palette for dark // canvases (Reminders). const APP_NAV = [ { l: 'Home', k: 'home' }, { l: 'Calls', k: 'outbound-call' }, { l: 'Reminders', k: 'reminders' }, { l: 'Memory', k: 'contacts-memory' }, { l: 'Audit', k: 'audit' }, ]; const APP_SUBNAV = [ { l: 'Pricing', k: 'pricing' }, { l: 'Landing', k: 'marketing-hero' }, ]; function AppHeader({ onNavigate, current, crumbs = [], dark = false, status }) { const fg = dark ? VC_TOKENS.paper : VC_TOKENS.ink; const fgMute = dark ? '#807a72' : VC_TOKENS.ink3; const bg = dark ? VC_TOKENS.ink : VC_TOKENS.paper; const lineCol = dark ? '#2a2724' : VC_TOKENS.line; const lineSoft = dark ? '#2a2724' : VC_TOKENS.lineSoft; // Hide the inline nav and collapse it under a hamburger on phone-sized // viewports. Using matchMedia keeps the header self-contained — no need to // thread vw through every screen. const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' && window.matchMedia('(max-width: 720px)').matches ); const [open, setOpen] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia('(max-width: 720px)'); const update = () => setIsMobile(mq.matches); if (mq.addEventListener) mq.addEventListener('change', update); else mq.addListener(update); return () => { if (mq.removeEventListener) mq.removeEventListener('change', update); else mq.removeListener(update); }; }, []); React.useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]); const go = (k) => { setOpen(false); onNavigate && onNavigate(k); }; return (

go('home')} style={{ cursor:'pointer' }}> {!isMobile && ( <> {crumbs.length > 0 && ( <>

{crumbs.map((c, i) => { const last = i === crumbs.length - 1; const item = typeof c === 'string' ? { label: c } : c; return ( item.k && go(item.k)} style={{ cursor: item.k ? 'pointer' : 'default' }} > {item.label} {!last && /} ); })}

)} )}

{!isMobile && ( <>

{APP_SUBNAV.map(it => ( go(it.k)} style={{ cursor:'pointer' }}> {it.l.toUpperCase()} ))}

{status && ( {status} )} +1 (415) 555‑0188 )} {isMobile && ( )}

{isMobile && open && ( )}

); } // Expose to other Babel scripts Object.assign(window, { VC_TOKENS, VLogo, VWordmark, Mono, Tag, Waveform, RingingRing, Stamp, FieldRow, TapeStrip, Surface, SectionHead, Avatar, Metric, PhoneGlyph, ArrowGlyph, StripedPlaceholder, AppHeader, });