live-preview-frame

Contract

Module path: /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() -> {};

Context keys consumed: palette, onePromise, customerParagraph, and (via MuntinContext.readRestaurantProfile()) the operator's name, cuisine, address, phone.

This widget is a viewer — it consumes context but never writes to it. Other widgets (palette-picker, voice-slider, persona-card-builder) are the producers.

Place it on a page

Drop a single section anywhere in a course-lesson page; the Workshop Kit engine loaded at the bottom of the page handles discovery and mount.

<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>

Optional data-preview-page: home (default), menu, about, contact. The non-home pages render a placeholder until the corresponding page template lands later in P6.

How it behaves

• On mount, reads MuntinContext and renders the iframe srcdoc once.
• Subscribes to window event mtn:context-change (fired by the Workshop Kit engine whenever any sibling widget commits a patch).
• Re-renders the iframe srcdoc on every change, debounced by the engine.
• Sandbox: sandbox="allow-same-origin". No script execution inside the preview; pure HTML+CSS document.
• Empty state: skeleton box for the name, a hint pointing at the lesson that captures the missing field.
• Accessibility: title="Live preview of your site so far", an aria-live="polite" caption announces what changed.