<bmx-presentation-editor>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block-end: 0.75rem">
  <button type="button" id="ex-pe-sample">Load the sample deck</button>
  <button type="button" id="ex-pe-new">New presentation</button>
  <button type="button" id="ex-pe-show">Present</button>
  <button type="button" id="ex-pe-presenter">Presenter view</button>
  <label><input type="checkbox" id="ex-pe-read" /> Read only</label>
</div>

<bmx-presentation-editor id="ex-pe" locale="en-GB" label="Sample presentation" style="--bmx-presentation-editor-height: 46rem"></bmx-presentation-editor>
<p class="note" id="ex-pe-out" role="status">A fictional studio's design review, made from an outline in the editor's own theme: a title slide, lists at several levels, a process drawn with shapes, a table, a chart drawn from its data and a picture, with speaker notes, transitions and a build. Edit anything (double-click the chart to change its numbers), try the Design and Animate tabs, present it, then Save .pptx and open it in PowerPoint - or open a .pptx of your own.</p>

<script type="module">
  await customElements.whenDefined('bmx-presentation-editor');
  const el = document.getElementById('ex-pe');
  const out = document.getElementById('ex-pe-out');

  // A mood-board picture, drawn here so the sample needs no files.
  const picture = () =>
    new Promise(resolve => {
      const c = document.createElement('canvas');
      c.width = 960;
      c.height = 600;
      const g = c.getContext('2d');
      g.fillStyle = '#f5efe6';
      g.fillRect(0, 0, 960, 600);
      g.fillStyle = '#c2410c';
      g.fillRect(90, 230, 380, 270);
      g.fillStyle = '#334155';
      g.fillRect(540, 150, 230, 350);
      g.fillStyle = '#0f766e';
      g.beginPath();
      g.arc(300, 160, 82, 0, Math.PI * 2);
      g.fill();
      g.fillStyle = '#d6b88f';
      g.fillRect(0, 520, 960, 80);
      c.toBlob(resolve, 'image/png');
    });

  const loadSample = async () => {
    await el.newPresentation();
    const step = (shape, text, x) => ({ shape, text, x, y: 220, w: 190, h: 90 });
    await el.fromOutline([
      { title: 'Harbour Street café', subtitle: 'Design review · Lumen & Loom · October 2026', notes: 'Welcome everyone. Twenty minutes, then questions.' },
      { title: 'Agenda', bullets: ['Where we are', 'How we work', 'Budget so far', 'Mood board', 'Next steps'] },
      {
        title: 'Where we are',
        bullets: ['Concepts signed off', { text: 'Warm timber, terracotta and a sea green', level: 1 }, { text: 'Pendants lowered over the counter', level: 1 }, 'Boards for the client on Monday', { text: 'Printed and as a PDF', level: 1 }],
        notes: 'Mention the client asked for the boards a week early.',
      },
      { title: 'How we work', shapes: [step('homePlate', 'Brief', 70), step('chevron', 'Concepts', 280), step('chevron', 'Boards', 490), step('chevron', 'Build', 700)] },
      {
        title: 'Budget so far',
        table: [
          ['Item', 'Finish', 'Supplier', 'Cost'],
          ['Counter top', 'Oiled oak', 'Northwood', '1,240'],
          ['Wall tiles', 'Terracotta', 'Clay & Co', '860'],
          ['Pendants', 'Brushed brass', 'Lumen Works', '420'],
        ],
      },
      {
        title: 'Hours by stage',
        chart: {
          type: 'column',
          grouping: 'stacked',
          categories: ['Brief', 'Concepts', 'Boards', 'Build'],
          series: [
            { name: 'Design', values: [6, 28, 18, 10] },
            { name: 'Site', values: [2, 4, 6, 26] },
          ],
          legend: 'b',
          labels: false,
        },
        notes: 'Build is mostly site time, as planned.',
      },
      { title: 'Mood board' },
      { title: 'Next steps', bullets: ['Boards to the client: Monday', 'Lighting quote confirmed: Wednesday', 'Site visit: Friday'], notes: 'Ask who can come to the site visit.' },
    ]);
    // A fade between slides, and the process steps coming in one after another.
    const deck = await el.getDeck();
    await el.setDeck({
      ...deck,
      slides: deck.slides.map((s, i) => ({
        ...s,
        transition: { type: i === 0 ? 'fade' : 'push', dir: 'l', duration: 600 },
        ...(i === 3 ? { builds: s.shapes.slice(1).map((sh, k) => ({ id: sh.id, effect: 'fly', dir: 'l', trigger: k === 0 ? 'click' : 'after', duration: 400, delay: 0 })) } : {}),
      })),
    });
    await el.goTo(6);
    await el.insertPicture(await picture(), 'Terracotta, slate and sea green swatches on a sand background');
    await el.select([]);
    await el.goTo(0);
    el.fileName = 'Harbour Street review.pptx';
  };

  document.getElementById('ex-pe-sample').addEventListener('click', loadSample);
  document.getElementById('ex-pe-new').addEventListener('click', () => el.newPresentation());
  document.getElementById('ex-pe-show').addEventListener('click', () => el.present(0));
  document.getElementById('ex-pe-presenter').addEventListener('click', () => el.present(0, true));
  document.getElementById('ex-pe-read').addEventListener('change', e => (el.readOnly = e.target.checked));
  el.addEventListener('bmxOpen', e => (out.textContent = `Opened ${e.detail.name}: ${e.detail.slides} slide${e.detail.slides === 1 ? '' : 's'}.`));
  el.addEventListener('bmxSlideChange', e => (out.textContent = `Slide ${e.detail.index + 1}${e.detail.title ? `: ${e.detail.title}` : ''}.`));
  el.addEventListener('bmxShow', e => (out.textContent = e.detail.ended ? `Slide show ended on slide ${e.detail.index + 1}.` : `Slide show from slide ${e.detail.index + 1}${e.detail.presenter ? ', presenter view' : ''}.`));
  el.addEventListener('bmxViewChange', e => (out.textContent = `${{ normal: 'Normal', sorter: 'Slide sorter', master: 'Master' }[e.detail.view]} view.`));
  el.addEventListener('bmxExport', e => (out.textContent = `Exported ${e.detail.name} (${Math.round(e.detail.data.length / 1024)} KB).`));
  el.addEventListener('bmxSave', e => (out.textContent = `Saved ${e.detail.name} (${Math.round(e.detail.data.length / 1024)} KB).`));
  await loadSample();
</script>