// kit.jsx — PocketPolyglot shared design kit // Theme tokens, waveform hero, play control, folk-accent, small primitives. // Exports to window. Theme-aware: every component takes (dark, t) where t = tweaks. // ── Theme ──────────────────────────────────────────────────────────────── // Accent presets (primary blue family + a carmine nod to the Baltic brief) const PP_ACCENTS = { nordic: { light: '#2C5E8C', dark: '#6EA8DA' }, steel: { light: '#3A6B7E', dark: '#74B6C6' }, ink: { light: '#26456A', dark: '#7FA8D6' }, carmine: { light: '#9E2B3A', dark: '#E0748A' }, }; function ppTheme(dark, t = {}) { const acc = PP_ACCENTS[t.accent || 'nordic'] || PP_ACCENTS.nordic; const primary = dark ? acc.dark : acc.light; if (dark) { return { dark: true, bg: '#0E1318', surface: '#171E27', surface2: '#1F2934', sunken: '#0A0E12', ink: '#EAF1F8', sub: 'rgba(234,241,248,0.60)', faint: 'rgba(234,241,248,0.34)', hair: 'rgba(255,255,255,0.09)', line: 'rgba(255,255,255,0.07)', primary, primarySoft: hexA(primary, 0.18), primaryFaint: hexA(primary, 0.10), onPrimary: '#0B1117', wavePlayed: primary, waveRest: 'rgba(234,241,248,0.20)', good: '#5DBE96', goodSoft: 'rgba(93,190,150,0.16)', shadow: '0 1px 2px rgba(0,0,0,0.5)', shadowCard: '0 2px 10px rgba(0,0,0,0.35)', }; } return { dark: false, bg: '#F4F2ED', surface: '#FFFFFF', surface2: '#FBFAF6', sunken: '#ECEAE3', ink: '#1A2733', sub: 'rgba(26,39,51,0.58)', faint: 'rgba(26,39,51,0.34)', hair: 'rgba(26,39,51,0.09)', line: 'rgba(26,39,51,0.07)', primary, primarySoft: hexA(primary, 0.10), primaryFaint: hexA(primary, 0.055), onPrimary: '#FFFFFF', wavePlayed: primary, waveRest: 'rgba(26,39,51,0.18)', good: '#2E7D5B', goodSoft: 'rgba(46,125,91,0.10)', shadow: '0 1px 2px rgba(26,39,51,0.06)', shadowCard: '0 6px 22px rgba(26,39,51,0.07)', }; } function hexA(hex, a) { const h = hex.replace('#', ''); const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16); return `rgba(${r},${g},${b},${a})`; } // Headline font from tweak function ppHeadFont(t = {}) { const f = t.headFont || 'spectral'; if (f === 'newsreader') return '"Newsreader", Georgia, serif'; if (f === 'sf') return '-apple-system, "SF Pro Display", system-ui, sans-serif'; return '"Spectral", Georgia, serif'; } const PP_UI = '-apple-system, "SF Pro Text", system-ui, sans-serif'; // ── Seeded speech-like waveform data ───────────────────────────────────── function ppSeed(str) { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; } function ppBars(seed, n) { let s = seed || 1; const rnd = () => { s = (Math.imul(s, 1103515245) + 12345) & 0x7fffffff; return s / 0x7fffffff; }; const out = []; // a couple of soft "syllable" envelopes so it reads like speech, not noise const peaks = 2 + Math.floor(rnd() * 3); const centers = Array.from({ length: peaks }, () => 0.1 + rnd() * 0.8); const wid = Array.from({ length: peaks }, () => 0.10 + rnd() * 0.16); for (let i = 0; i < n; i++) { const x = i / (n - 1); let env = 0; for (let p = 0; p < peaks; p++) { const d = (x - centers[p]) / wid[p]; env = Math.max(env, Math.exp(-d * d)); } const jitter = 0.45 + rnd() * 0.55; out.push(Math.max(0.08, env * jitter)); } return out; } // ── Waveform hero ──────────────────────────────────────────────────────── // style: 'bars' | 'line' | 'dots' function Waveform({ seed = 'x', played = 0, height = 60, count = 46, gap = 3, barW = 3, theme, playedColor, restColor, style = 'bars', radius = 3, }) { const T = theme; const pc = playedColor || (T ? T.wavePlayed : '#2C5E8C'); const rc = restColor || (T ? T.waveRest : 'rgba(0,0,0,0.18)'); const data = React.useMemo(() => ppBars(typeof seed === 'string' ? ppSeed(seed) : seed, count), [seed, count]); const playIdx = played * count; if (style === 'line') { const W = 300, H = height, mid = H / 2; const pts = data.map((v, i) => [ (i / (count - 1)) * W, v ]); const top = pts.map(([x, v]) => `${x.toFixed(1)},${(mid - v * mid * 0.92).toFixed(1)}`).join(' '); const bot = pts.slice().reverse().map(([x, v]) => `${x.toFixed(1)},${(mid + v * mid * 0.92).toFixed(1)}`).join(' '); const clipW = (played * W).toFixed(1); const gid = 'wl' + Math.abs(typeof seed === 'string' ? ppSeed(seed) : seed); return ( ); } return (
{data.map((v, i) => { const on = i < playIdx; const cur = Math.abs(i - playIdx) < 0.6; if (style === 'dots') { return
; } return (
); })}
); } // ── Circular voice animation (radial equalizer + pulse rings) ──────────── if (typeof document !== 'undefined' && !document.getElementById('pp-voice-kf')) { const s = document.createElement('style'); s.id = 'pp-voice-kf'; s.textContent = ` @keyframes ppVoiceBar { 0%,100% { transform: scaleY(0.32); } 50% { transform: scaleY(1); } } @keyframes ppVoiceRing { 0% { transform: scale(0.78); opacity: 0.45; } 100% { transform: scale(1.55); opacity: 0; } } /* tap/press feedback — iOS-style squish with springy release */ .pp-screen button { transition: transform .26s cubic-bezier(.34,1.56,.64,1), filter .22s ease, background .2s ease, border-color .2s ease; will-change: transform; } .pp-screen button:active:not(:disabled) { transform: scale(0.96); filter: brightness(0.93); transition: transform .06s ease-out, filter .06s ease-out; } .pp-screen button.pp-orb:active:not(:disabled) { transform: scale(0.86); filter: brightness(0.95); } .pp-screen button:disabled { transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { .pp-voice-bar, .pp-voice-ring { animation: none !important; } .pp-screen button { transition: none; } .pp-screen button:active:not(:disabled) { transform: none; filter: brightness(0.93); } }`; document.head.appendChild(s); } function VoiceOrb({ theme, size = 168, playing = true, onClick, bars = 40 }) { const T = theme; const core = size * 0.42; // central play button const ringMax = size; // pulse ring max box const barMax = size * 0.13; // tick length const radius = core / 2 + size * 0.06; const ticks = Array.from({ length: bars }); return (
{/* pulse rings */} {[0, 1, 2].map(i => (
))} {/* radial equalizer */} {ticks.map((_, i) => { const angle = (360 / bars) * i; const delay = (Math.sin(i * 1.7) * 0.5 + 0.5) * 0.9; return (
); })} {/* soft halo */}
{/* central play button */}
); } // ── Circular play control ──────────────────────────────────────────────── function PlayOrb({ theme, size = 76, playing = false, onClick, label, filled = true }) { const T = theme; const s = Math.round(size * 1.15); // audio is the hero — keep the play control generous return ( ); } // ── Mic record orb — the "audio out" control of the core loop ─────────── function MicOrb({ theme, size = 76, rec = false, onClick }) { const T = theme; const REC = '#C0485A'; return ( ); } // ── Small icon set (stroke) ────────────────────────────────────────────── function Icon({ name, size = 24, color = 'currentColor', sw = 1.7 }) { const p = { fill: 'none', stroke: color, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' }; const paths = { today: <>, listen: <>, progress: <>, mic: <>, close: , chevR: , chevD: , text: <>, check: , replay: <>, speaker: <>, ear: , settings: <>, lock: <>, unlock: <>, slow: <>, }; return {paths[name]}; } // ── Speech-speed chip — slow down only, never above 1× ────────────────── // Cycles 1× → 0.75× → 0.5× → 1×. Tints when slowed so the state is legible. function SpeedChip({ theme, value = 1, onChange, size = 'md' }) { const T = theme; const steps = [1, 0.75, 0.5]; const idx = steps.indexOf(value); const next = steps[(idx + 1) % steps.length]; const slowed = value < 1; const sm = size === 'sm'; return ( ); } // ── Lielvārde-style folk seam (subtle, optional) ───────────────────────── function FolkSeam({ color, w = 220, h = 14, opacity = 0.5 }) { // a quiet geometric Baltic band — diamonds + verticals, drawn as detail const unit = 16; const n = Math.ceil(w / unit); return ( {Array.from({ length: n }).map((_, i) => { const x = i * unit + unit / 2; return ( ); })} ); } // ── Quiet glass tab bar (Today / Listen / Progress) ────────────────────── function TabBar({ theme, active = 'today' }) { const T = theme; const tabs = [ { id: 'today', label: 'Today', icon: 'today' }, { id: 'listen', label: 'Listen', icon: 'listen' }, { id: 'progress', label: 'Progress', icon: 'progress' }, ]; return (
{tabs.map(tb => { const on = tb.id === active; return (
{tb.label}
); })}
); } // ── Screen scaffold: fills the 402×874 device content area ─────────────── function Screen({ theme, children, pad = 24, style = {} }) { const T = theme; return (
{children}
); } // Session top bar: close + progress dots (for immersive in-session screens) function SessionTop({ theme, step = 1, total = 12, onClose }) { const T = theme; return (
{step}/{total}
); } Object.assign(window, { PP_ACCENTS, ppTheme, hexA, ppHeadFont, PP_UI, ppSeed, ppBars, Waveform, VoiceOrb, PlayOrb, MicOrb, SpeedChip, Icon, FolkSeam, TabBar, Screen, SessionTop, });