Screen card

<mnw-screen-card
  heading="Notes"
  description="The home screen: every note, with a Pinned filter."
  tag="Notes"
  href="../../demos/marketing-hub/screen.html?id=notes"
  style="--mnw-card-preview-height: 620px"
><div class="card-screen" data-screen="notes"></div></mnw-screen-card>
<mnw-screen-card
  heading="Focus timer"
  description="Framed: the screen inside the Pixel 9 Pro XL."
  tag="Focus"
  href="../../demos/marketing-hub/screen.html?id=focus&amp;frame=device"
  framed
><div class="card-screen" data-screen="focus"></div></mnw-screen-card>
<p class="demo-log" aria-live="polite">Toggle a card's theme or navigation.</p>

import {ScreenHost, createScreenRegistry} from 'material-next-web-components/marketing.js';
import type {MaterialNextScreenCard} from 'material-next-web-components/marketing.js';
import {SCREENS} from '../sample-app/screens.js';

const registry = createScreenRegistry(SCREENS);

export default (root: HTMLElement) => {
  const log = root.querySelector('.demo-log')!;
  const hosts: ScreenHost[] = [];
  for (const card of root.querySelectorAll<MaterialNextScreenCard>(
    'mnw-screen-card'
  )) {
    const el = card.querySelector<HTMLElement>('.card-screen')!;
    // The card is only the frame around the preview: the app's screen renders
    // into the slotted element, here through a ScreenHost.
    const host = new ScreenHost(el, {
      registry,
      id: el.dataset.screen!,
      frame: card.framed,
      fill: !card.framed,
    });
    hosts.push(host);
    card.addEventListener('card-theme-toggle', (event) => {
      card.dark = event.detail.selected;
      host.setOptions({theme: card.dark ? 'dark' : 'light'});
      log.textContent = `card-theme-toggle: ${card.heading} dark = ${card.dark}`;
    });
    card.addEventListener('card-nav-toggle', (event) => {
      card.threeButton = event.detail.selected;
      host.setOptions({navType: card.threeButton ? 'buttons' : 'gesture'});
      log.textContent = `card-nav-toggle: ${card.heading} 3-button = ${card.threeButton}`;
    });
  }
  return () => hosts.forEach((host) => host.destroy());
};