// === primitives-extra.jsx === // Primitives propias de la presentación definitiva ("Un día entero. Una plataforma."). // Se cargan después de primitives.jsx. Sin hooks con destructuring para no // redeclarar consts globales de otros scripts babel. // ===================================================================== // TimeBadge — hilo conductor del día. Píldora oscura arriba-izquierda // con la hora en mono + etiqueta del bloque. Entra con easeOutBack. // ===================================================================== function TimeBadge({ t, hora, label, start=0.2 }){ const p = clamp((t-start)/0.5, 0, 1); const e = Easing.easeOutBack(p); return (
{hora}
{label}
); } // ===================================================================== // KeyCap — tecla física (F2, F6…) que aparece y "se pulsa" en pressT. // ===================================================================== function KeyCap({ t, label, start=0, pressT=null, size=54 }){ const p = clamp((t-start)/0.4, 0, 1); const e = Easing.easeOutBack(p); const pressing = pressT !== null && t >= pressT && t < pressT + 0.35; return ( {label} ); } // ===================================================================== // TerminalChrome — chrome estilo terminal macOS/Linux (del deck dev). // ===================================================================== function TerminalChrome({ title='bash — molino@dinaup', style }){ return (
{title}
); } // ===================================================================== // HttpResponseBubble — respuesta HTTP con status coloreado (del deck dev). // ===================================================================== function HttpResponseBubble({ status=200, time='80ms', body, t, start=0, style }){ const p = clamp((t-start)/0.5, 0, 1); const e = Easing.easeOutBack(p); const color = status < 300 ? '#10B981' : status < 500 ? '#F59E0B' : '#EF4444'; const bg = status < 300 ? 'rgba(16,185,129,0.10)' : status < 500 ? 'rgba(245,158,11,0.10)' : 'rgba(239,68,68,0.10)'; return (
{status} {status===200?'OK':status===201?'Created':'Response'} · {time}
{body &&
{body}
}
); } // ===================================================================== // ToolBadge — chip de herramienta externa (n8n, Zapier, tu app…). // ===================================================================== function ToolBadge({ name, color='#0085FF', t, start=0, dark=false }){ const p = clamp((t-start)/0.4, 0, 1); const e = Easing.easeOutBack(p); return (
{name.charAt(0).toUpperCase()}
{name}
); } // ===================================================================== // PhoneFrame — marco de móvil sencillo para demos de fichaje/QR. // ===================================================================== function PhoneFrame({ w=120, h=220, children, style }){ return (
{children}
); } // ===================================================================== // FingerTap — pulsación táctil: círculo que aparece y expande en (x,y) // en cada instante de taps[]. Para demos TPV (dedo, no cursor). // ===================================================================== function FingerTap({ t, taps=[] }){ const active = taps.find(tp => t >= tp.t && t < tp.t + 0.5); if (!active) return null; const p = clamp((t - active.t)/0.5, 0, 1); return (
); } // ===================================================================== // cursorPathAt — interpola frames [{t,x,y,arc?}] → {x,y} en el tiempo t. // (extraído del patrón de pymes/slide-06 para reutilizar en tarjetas voladoras) // ===================================================================== function cursorPathAt(frames, t){ if (t <= frames[0].t) return { x:frames[0].x, y:frames[0].y }; for (let i=0;i=frames[i].t && t<=frames[i+1].t){ const p = (t-frames[i].t)/(frames[i+1].t-frames[i].t); const e = Easing.easeInOutCubic(p); let x = lerp(frames[i].x, frames[i+1].x, e); let y = lerp(frames[i].y, frames[i+1].y, e); if (frames[i].arc) y -= Math.sin(p*Math.PI)*frames[i].arc; return {x,y}; } } const last = frames[frames.length-1]; return {x:last.x, y:last.y}; } // ===================================================================== // DemoHeader — cabecera estándar de los slides demo: eyebrow + h2. // ===================================================================== function DemoHeader({ t, eyebrow, title, color='var(--dn-primary)' }){ const p = clamp(t/0.5, 0, 1); return (
{eyebrow}

{title}

); } Object.assign(window, { TimeBadge, KeyCap, TerminalChrome, HttpResponseBubble, ToolBadge, PhoneFrame, FingerTap, cursorPathAt, DemoHeader });