// Vault Showcase shell — chrome + stage + device frames. // Switches: screen (Home/Pricing/Security/App) · device (Desktop/Mobile) · theme (Light/Dark) // Reuses every screen + token already built. No new data. (function () { const { VAULT_DARK, VAULT_LIGHT, Icon, mono, sans } = window; const { Landing, Pricing, Security } = window; const { VaultPhone, WalletHome, SendConfirm, CardDetail, Receipt, TransactionDetail, KYCCapture, Onboarding } = window; const STUDIO = { dark: { bg: 'oklch(0.12 0.004 250)', grid: 'oklch(1 0 0 / 0.025)' }, light: { bg: 'oklch(0.92 0.004 80)', grid: 'oklch(0 0 0 / 0.03)' }, }; const SCREENS = [ { id: 'home', label: 'Home', path: '' }, { id: 'pricing', label: 'Pricing', path: '/pricing' }, { id: 'security', label: 'Security', path: '/security' }, { id: 'app', label: 'App', path: '/app' }, ]; const APP_SCREENS = [ { id: 'onboarding', label: 'Onboarding', comp: Onboarding }, { id: 'kyc', label: 'KYC capture', comp: KYCCapture }, { id: 'wallet', label: 'Wallet home', comp: WalletHome }, { id: 'send', label: 'Send · confirm', comp: SendConfirm }, { id: 'receipt', label: 'Receipt', comp: Receipt }, { id: 'transaction', label: 'Transaction', comp: TransactionDetail }, { id: 'card', label: 'Card detail', comp: CardDetail }, ]; // fit-to-stage scaler function useFit(w, h, deps, maxScale = 1) { const ref = React.useRef(null); const [scale, setScale] = React.useState(1); React.useEffect(() => { const el = ref.current; if (!el) return; const compute = () => { const pad = 48; const aw = el.clientWidth - pad, ah = el.clientHeight - pad; setScale(Math.min(aw / w, ah / h, maxScale)); }; compute(); const ro = new ResizeObserver(compute); ro.observe(el); return () => ro.disconnect(); }, deps); return [ref, scale]; } // ── themed browser frame ──────────────────────────────────── function BrowserFrame({ t, url, children }) { return (
{/* chrome bar */}
{['#ff5f57', '#febc2e', '#28c840'].map(c =>
)}
{Icon.lock(11)} vault.ng{url}
{Icon.plus(16)}
{/* viewport */}
{children}
); } // ── bare phone shell (for marketing-in-mobile, no iOS chrome) ─ function PhoneShell({ t, children }) { return (
{children}
); } // ── segmented control ─────────────────────────────────────── function Segment({ t, items, value, onChange, icons }) { return (
{items.map(it => { const active = value === it.id; return (
onChange(it.id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: icons ? '7px 11px' : '7px 15px', borderRadius: 8, fontSize: 13, fontWeight: 500, fontFamily: sans, color: active ? t.text1 : t.text3, background: active ? (t.name === 'dark' ? 'oklch(1 0 0 / 0.10)' : '#fff') : 'transparent', boxShadow: active ? '0 1px 3px oklch(0 0 0 / 0.10)' : 'none', }}>{it.icon}{it.label && {it.label}}
); })}
); } // ── app gallery (desktop rail) ────────────────────────────── function AppRail({ t }) { const S = 0.74; return (
The Vault app
Seven screens, one continuous flow
Scroll horizontally to walk the journey →
{APP_SCREENS.map((s, i) => { const C = s.comp; return (
{String(i + 1).padStart(2, '0')} · {s.label}
); })}
); } // ── app single (mobile) ───────────────────────────────────── function AppSingle({ t, appScreen, setAppScreen }) { const [ref, scale] = useFit(360, 760, [appScreen]); const C = (APP_SCREENS.find(s => s.id === appScreen) || APP_SCREENS[2]).comp; return (
{/* pill nav */}
{APP_SCREENS.map(s => { const active = s.id === appScreen; return (
setAppScreen(s.id)} style={{ whiteSpace: 'nowrap', padding: '8px 14px', borderRadius: 999, fontSize: 12.5, fontWeight: 500, color: active ? t.accentInk : t.text2, background: active ? t.accent : t.surface1, border: `1px solid ${active ? 'transparent' : t.hairline}`, }}>{s.label}
); })}
); } // ── marketing frame (scaled) ──────────────────────────────── function MarketingStage({ t, device, screen, onNav }) { const isDesk = device === 'desktop'; const [ref, scale] = useFit(isDesk ? 1280 : 380, isDesk ? 800 : 800, [device, screen]); const Comp = screen === 'pricing' ? Pricing : screen === 'security' ? Security : Landing; const url = (SCREENS.find(s => s.id === screen) || {}).path || ''; const content = ; return (
{isDesk ? {content} : {content}}
); } // ── shell ─────────────────────────────────────────────────── function Showcase() { const saved = (() => { try { return JSON.parse(localStorage.getItem('vault_showcase') || '{}'); } catch { return {}; } })(); const [screen, setScreen] = React.useState(saved.screen || 'home'); const [device, setDevice] = React.useState(saved.device || 'desktop'); const [theme, setTheme] = React.useState(saved.theme || 'dark'); const [appScreen, setAppScreen] = React.useState(saved.appScreen || 'wallet'); React.useEffect(() => { localStorage.setItem('vault_showcase', JSON.stringify({ screen, device, theme, appScreen })); }, [screen, device, theme, appScreen]); const t = theme === 'dark' ? VAULT_DARK : VAULT_LIGHT; const studio = STUDIO[theme]; const onNav = (id) => setScreen(id); const monitorIcon = ; const phoneIcon = ; const sunIcon = ; const moonIcon = ; return (
{/* CHROME */}
V
Vault Showcase
{/* screen switch */} ({ id: s.id, label: s.label }))} /> {/* device + theme */}
{/* STAGE */}
{screen === 'app' ? (device === 'desktop' ?
: ) : }
{/* corner caption */}
{screen.toUpperCase()} · {device.toUpperCase()} · {theme.toUpperCase()}
); } window.VaultShowcase = Showcase; })();