Widget del Workshop Kit

Entregado

live-preview-frame

Un iframe sandboxed que renderiza una vista previa en miniatura del sitio del operador tal como está ahora mismo. La base del riel de obra persistente del Método Muntin — cada lección del bootcamp aloja uno.

Pruébalo

Escribe abajo — la vista previa de la derecha se reconstruye en tiempo real. Los valores se guardan en el contexto local de tu navegador (el mismo bus que lee cada herramienta de Muntin), así que al abrir esta página después recordará lo que pusiste.

Nombre del restaurante Cocina Dirección Tu única promesa Paleta

Tus datos se quedan en este navegador.

Contrato

Ruta del módulo: /tools/_shared/workshop/live-preview-frame.js.

Exports:

export const tag         = 'live-preview-frame';
export const contextKeys = ['palette', 'onePromise', 'customerParagraph'];

export function mount(rootEl, state, deps) -> { unmount(), refresh(state) };
export function serialize() -> {};

Claves de contexto consumidas: palette, onePromise, customerParagraph, y (vía MuntinContext.readRestaurantProfile()) el name, cuisine, address, phone del operador.

Este widget es un visor — consume contexto pero nunca le escribe. Otros widgets (palette-picker, voice-slider, persona-card-builder) son los productores.

Colocarlo en una página

Agrega una sola sección en cualquier parte de una página de lección; el motor del Workshop Kit cargado al pie de la página maneja descubrimiento y montaje.

<section class="course-widget"
         data-widget="live-preview-frame"
         data-preview-page="home">
</section>
<script src="/tools/_shared/context-bus.js" defer></script>
<script src="/assets/js/workshop-widget.js" defer></script>

Opcional data-preview-page: home (predeterminado), menu, about, contact. Las páginas no-home renderizan un placeholder hasta que la plantilla de página correspondiente llegue en P6.

Cómo se comporta

Al montarse, lee MuntinContext y renderiza el srcdoc del iframe una vez.
Se suscribe al evento mtn:context-change de window (que dispara el motor del Workshop Kit cada vez que cualquier widget hermano commitea un patch).
Re-renderiza el srcdoc del iframe en cada cambio, con debounce por el motor.
Sandbox: sandbox="allow-same-origin". No se ejecuta script dentro de la vista previa; documento HTML+CSS puro.
Estado vacío: caja skeleton para el nombre, una pista apuntando a la lección que captura el campo faltante.
Accesibilidad: title="Vista previa en vivo de tu sitio hasta ahora", un caption con aria-live="polite" anuncia qué cambió.