{/* status bar */}

9:41

{/* dynamic island */}

{/* content */}

{children}

{/* home indicator */}

); } // ───────────────────────────────────────────────────────────── // Buttons // ───────────────────────────────────────────────────────────── function PrimaryButton({ children, onClick, disabled, accent = '#15803d', accentHover = '#166534', icon = 'arrowRight', full = true, style }) { const [h, setH] = React.useState(false); return ( ); } function GhostButton({ children, onClick, dark = false, style }) { const [h, setH] = React.useState(false); const base = dark ? 'rgba(255,255,255,0.0)' : 'transparent'; const hoverBg = dark ? 'rgba(255,255,255,0.06)' : '#f4f4ef'; const border = dark ? 'rgba(255,255,255,0.18)' : '#d1d1c8'; const col = dark ? 'rgba(255,255,255,0.82)' : '#3d3d38'; return ( ); } // ───────────────────────────────────────────────────────────── // Progress indicators // ───────────────────────────────────────────────────────────── function ProgressBar({ step, total, accent = '#15803d', track = '#e8e8e1' }) { return (

); } function StepDots({ step, total, accent = '#4ade80', track = 'rgba(255,255,255,0.18)' }) { return (

{Array.from({ length: total }).map((_, i) => { const active = i + 1 === step, done = i + 1 < step; return

; })}

); } // ───────────────────────────────────────────────────────────── // Typing simulation hook — tap to "type" a value // ───────────────────────────────────────────────────────────── function useTyper() { const [vals, setVals] = React.useState({}); const typing = React.useRef({}); const type = React.useCallback((key, full, speed = 38) => { if (typing.current[key]) return; typing.current[key] = true; let i = 0; const tick = () => { i++; setVals(v => ({ ...v, [key]: full.slice(0, i) })); if (i < full.length) setTimeout(tick, speed); else typing.current[key] = false; }; tick(); }, []); return [vals, type, setVals]; } // ───────────────────────────────────────────────────────────── // Shared step content (single source of truth across directions) // ───────────────────────────────────────────────────────────── const STEPS = [ { n: 1, key: 'bridge', title: 'Plug in the Print Bridge', short: 'Print Bridge', blurb: 'Sits between your POS and printer. The cashier sees nothing different.', icon: 'plug' }, { n: 2, key: 'wifi', title: 'Connect to store WiFi', short: 'Store WiFi', blurb: 'We detect the Bridge on your network and connect it. One time only.', icon: 'wifi' }, { n: 3, key: 'details', title: 'Enter merchant details', short: 'Merchant details', blurb: 'Store name, address and sector. Takes about 30 seconds.', icon: 'building' }, { n: 4, key: 'tile', title: 'Place the Raseed Tile', short: 'The Tile', blurb: 'Set it on the counter by the terminal and plug in power. It self-connects.', icon: 'receipt' }, { n: 5, key: 'test', title: 'Run a test receipt', short: 'Test receipt', blurb: 'Ring up one item, hit print, then tap the Tile with your phone.', icon: 'bolt' }, ]; Object.assign(window, { RaseedMark, Icon, ICON_PATHS, PhoneShell, PHONE_W, PHONE_H, PrimaryButton, GhostButton, ProgressBar, StepDots, useTyper, STEPS, fontDisplay, fontBody, });