Los widgets con los que se construye el Método Muntin.

Iframe aislado (sandbox) que renderiza una vista previa en miniatura del sitio del operador tal como está ahora mismo. La base del riel "Tu sitio hasta ahora".

Widget parametrizable para capturar texto — una línea o varias. El autor de la lección elige el campo de contexto vía data-context-key. Guarda automáticamente con debounce; estado anunciado vía live region.

Selector de 3 muestras con paletas de partida según la cocina y aviso de contraste WCAG en vivo. Escribe a palette[]; cada otro widget en la página se repinta.

Tres controles — formal↔casual, clásico↔moderno, conciso↔cálido — con frases de muestra pre-escritas en cada extremo para que el operador escuche cómo suena la posición. Escribe voice: {formality, era, warmth} al contexto.

Ordenador con teclado primero (botones arriba/abajo, no arrastrar HTML5) con puntuación de severidad opcional. Se usa en L2 para ordenar para qué es un sitio. Próximo: L6b fugas, L8 prioridad de platos, L11b arreglos de GBP.

Barrido de revelado con un solo mango sobre pares de imagen o DOM. Se usa para "cómo se ve lo bueno" junto a "cómo se ve lo malo". Eje horizontal o vertical, control total por teclado, role="slider" con narración por valuetext.

Patrón WAI-ARIA de pestañas (flechas, Home/End, modo de foco manual) para ejemplos retóricos en línea. Se usa en L3 para comparar tres estilos de promesa, L13 para comparar tres estilos de respuesta a una mala reseña.

Captura estructurada de persona — nombre + edad + rol + hasta 6 chips de detalle + párrafo narrativo — con una vista previa de "ficha del cliente" en vivo junto al formulario. Avatar de iniciales tintado por el acento de la paleta; doble escritura de customerCard estructurado Y customerParagraph en prosa para que las lecciones posteriores + el generador de la L14 sigan funcionando. Se usa en L4.

Cuadrícula 2D con punto arrastrable y controlable con teclado (flechas, Shift para saltos grandes, Home/End/PageUp/Down para los bordes). Ejes configurables vía data-*; lectura en vivo en lenguaje claro. Se usa en L6a para amplitud de cocina × nivel de precio.

Seis emparejamientos curados de tipografía título + cuerpo (editorial-modern, diner-classic, trattoria, taqueria, minimal-tasting, corner-store) renderizados con stacks de fuentes del sistema — sin fetch de fuente remota. Radio-group con navegación completa por flechas. Se usa en L7 junto a palette-picker + voice-slider.

Lista de platos arrastrable con edición de nombre y precio en línea. Tope de 3 a 12, reordenamiento con teclado primero (botones arriba/abajo), anuncios en región polite al añadir/eliminar/reordenar. Se usa en L8 para la lista corta del menú.

Grilla de referencia visual curada — 8 tomas universales para cualquier restaurante + 2 tomas específicas de la cocina cuando restaurantProfile.cuisine se detecta (cubre 12 cocinas). Cada tarjeta es un boceto SVG inline tintado con el acento del operador (sin fetch de fotos remotas). El orden de selección importa — las tres primeras se vuelven el set de la página de inicio. Se usa en L9a.

Grilla de 7 días (lun-dom) con <input type="time"> nativo + checkbox de cerrado por día. Atajos copiar-lunes-a-viernes y copiar-primer-día-abierto. Valida cierre > apertura. Se usa en L10 para capturar horarios estructurados para el generador.

Maqueta en vivo de una ficha de Google Business Profile que se construye desde el MuntinContext del operador — nombre, categoría, dirección, estado abierto/cerrado de hoy, conteo de fotos del shotList, descripción, color de acento de la paleta. Captura el único campo específico de GBP que no se recoge en otra lección (categoría principal, con 27 categorías de restaurante incluidas + "Otra"). La lista de revisión debajo marca los campos faltantes. Se usa en L11a + L11b.

Slider de radio alrededor de la dirección del operador, renderizado hoy como un placeholder de cuadrícula de calles SVG (sembrado desde el hash de la dirección para que la misma dirección muestre el mismo layout). Tiles de mapa estáticos reales (PNGs pre-horneados por metro en /brand/maps/) pueden intercambiarse sin cambiar el contrato del widget. Muestra equivalentes en minutos de auto + a pie. Se usa en L4 (quién está cerca para venir un día de semana) y L12 (qué radio estás tratando de rankear).

Siembra 8 slots de palabras clave de SEO local desde cocina + barrio (extraído de la dirección); el operador edita cada fila. Cuatro fórmulas (cocina+barrio / plato+barrio / ocasión+barrio / intención+cocina+barrio) × 2 slots cada una. Escribe localKeywords.

Rastreador de siete pasos para el flujo de deploy agnóstico al host (descomprimir → registro → subir → nombrar → URL en vivo → dominio personalizado → espera DNS). El operador elige Cloudflare Pages / Netlify / Vercel desde un dropdown; las descripciones de pasos interpolan el dominio del host + el slug del restaurante. Los botones de marcar-listo persisten; la sincronización entre dispositivos significa que "empecé el deploy en laptop, terminando en teléfono" funciona. Tarjeta de celebración en el paso 7. Se usa en L15.

Calendario de vista mensual con tareas recurrentes pinneadas para horarios / reseñas / regen / SEO — el operador elige una cadencia (apagado / semanal / quincenal / mensual / trimestral) por tarea y ve el mes actual auto-poblarse con pins en los días correctos. Exportación .ics real descarga un archivo VCALENDAR con eventos recurrentes RRULE, importable directamente a Google Calendar, Apple Calendar y Outlook. Se usa en L16 — el último widget del bootcamp.