Upload 5 files

assets/components.js

@@ -0,0 +1,244 @@
+/*
+  components.js — Class-based UI builders that construct the exact HTML
+  markup used by index.html and styled by deck.css + Tailwind.
+
+  These utilities do not auto-mount or alter the DOM. Use them to create
+  or adopt the same UI pieces programmatically when needed.
+*/
+(function () {
+  const setAttrs = (el, attrs) => {
+    for (const [k, v] of Object.entries(attrs || {})) {
+      if (v === undefined || v === null) continue;
+      el.setAttribute(k, String(v));
+    }
+    return el;
+  };
+
+  // Sidebar Toggle
+  class SidebarToggleUI {
+    constructor({ id = 'sidebarToggle', el } = {}) {
+      this.el = el || document.getElementById(id) || setAttrs(document.createElement('button'), {
+        id,
+        'aria-label': 'Toggle sections sidebar',
+        'aria-expanded': 'false',
+        class: 'sidebar-toggle',
+      });
+      if (!this.el.querySelector('#sidebarToggleIcon')) {
+        this.el.innerHTML = `
+          <svg id="sidebarToggleIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" aria-hidden="true">
+            <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
+            <rect x="11" y="10" width="2" height="7" rx="1" fill="currentColor"></rect>
+            <rect x="11" y="6" width="2" height="2" rx="1" fill="currentColor"></rect>
+          </svg>`;
+      }
+    }
+    mount(where) { (where || document.body).appendChild(this.el); return this; }
+  }
+
+  // Sidebar
+  class SidebarUI {
+    constructor({ id = 'sidebar', title = 'Sections', el } = {}) {
+      this.el = el || document.getElementById(id) || setAttrs(document.createElement('aside'), { id, class: 'sidebar', 'aria-hidden': 'true' });
+      if (!this.el.querySelector('.sidebar__inner')) {
+        this.el.innerHTML = `
+          <div class="sidebar__inner">
+            <header class="sidebar__header"><span class="sidebar__title">${title}</span></header>
+            <nav id="sidebarList" class="sidebar__list" aria-label="Slide sections"></nav>
+          </div>`;
+      }
+      this.list = this.el.querySelector('#sidebarList');
+    }
+    setSections(sections) {
+      const s = Array.isArray(sections) ? sections : [];
+      this.list.innerHTML = s.map((sec) => {
+        const sub = (sec.slides && sec.slides.length)
+          ? `<div class="sidebar__sublist">${sec.slides.map(sl => `
+              <div class="sidebar__subitem" data-slide-index="${sl.index}">
+                <button type="button" class="sidebar__sublink">${sl.title}</button>
+              </div>`).join('')}
+            </div>`
+          : '';
+        return `<div class="sidebar__item" data-section-index="${sec.index}">
+          <button class="sidebar__button" type="button">
+            <span class="sidebar__bullet" aria-hidden="true"></span>
+            <span class="sidebar__label">${sec.title}</span>
+            <svg class="sidebar__chev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M7 6l6 4-6 4V6z"/></svg>
+          </button>
+          ${sub}
+        </div>`;
+      }).join('');
+      return this;
+    }
+    open() { this.el.classList.add('open'); this.el.setAttribute('aria-hidden', 'false'); return this; }
+    close() { this.el.classList.remove('open'); this.el.setAttribute('aria-hidden', 'true'); return this; }
+    toggle() { return this.el.classList.contains('open') ? this.close() : this.open(); }
+    mount(where) { (where || document.body).appendChild(this.el); return this; }
+  }
+
+  // Progress
+  class ProgressUI {
+    constructor({ id = 'progressBar', el } = {}) {
+      this.el = el || document.getElementById(id) || setAttrs(document.createElement('div'), { id, class: 'h-1 w-44 bg-neutral-200 rounded-full overflow-hidden' });
+      let inner = this.el.querySelector('#progressInner');
+      if (!inner) {
+        inner = setAttrs(document.createElement('div'), { id: 'progressInner', class: 'h-full w-0 bg-neutral-800 transition-all' });
+        this.el.appendChild(inner);
+      }
+      this.inner = inner;
+    }
+    set(position, total) {
+      const denom = Math.max(1, Number(total) || 1);
+      const pos = Math.max(0, Math.min(denom, Number(position) || 0));
+      this.inner.style.width = `${(pos / denom) * 100}%`;
+      return this;
+    }
+    mount(where) { (where || document.body).appendChild(this.el); return this; }
+  }
+
+  // Counter
+  class CounterUI {
+    constructor({ id = 'counter', el } = {}) {
+      this.el = el || document.getElementById(id) || setAttrs(document.createElement('div'), { id, class: 'text-sm font-medium text-neutral-600' });
+    }
+    set(position, total) {
+      const denom = Math.max(0, Number(total) || 0);
+      const pos = Math.max(0, Math.min(denom, Number(position) || 0));
+      this.el.textContent = `${pos} / ${denom}`;
+      return this;
+    }
+    mount(where) { (where || document.body).appendChild(this.el); return this; }
+  }
+
+  // Navigation button
+  class NavButtonUI {
+    constructor({ id, rel = 'next', hidden = false, el } = {}) {
+      this.el = el || document.getElementById(id) || setAttrs(document.createElement('button'), {
+        id,
+        'aria-label': rel === 'prev' ? 'Previous slide' : 'Next slide',
+        class: 'group p-2 rounded-full bg-white/80 hover:bg-white shadow border border-neutral-200 backdrop-blur pointer-events-auto' + (hidden ? ' hidden' : ''),
+      });
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('viewBox', '0 0 24 24');
+      svg.setAttribute('fill', 'currentColor');
+      svg.setAttribute('class', 'w-4 h-4 text-neutral-700 ' + (rel === 'prev' ? 'group-hover:-translate-x-0.5' : 'group-hover:translate-x-0.5') + ' transition-transform');
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('fill-rule', 'evenodd');
+      const d = rel === 'prev'
+        ? 'M15.53 4.47a.75.75 0 0 1 0 1.06L9.06 12l6.47 6.47a.75.75 0 1 1-1.06 1.06l-7-7a.75.75 0 0 1 0-1.06l7-7a.75.75 0 0 1 1.06 0Z'
+        : 'M8.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06L14.94 12 8.47 5.53a.75.75 0 0 1 0-1.06Z';
+      path.setAttribute('d', d);
+      path.setAttribute('clip-rule', 'evenodd');
+      svg.appendChild(path);
+      if (!this.el.querySelector('svg')) this.el.appendChild(svg);
+    }
+    setHidden(hidden) { this.el.classList.toggle('hidden', !!hidden); return this; }
+    mount(where) { (where || document.body).appendChild(this.el); return this; }
+  }
+
+  window.UI = {
+    SidebarToggleUI,
+    SidebarUI,
+    ProgressUI,
+    CounterUI,
+    NavButtonUI,
+    DeckUI: class DeckUI {
+      constructor({ deckEl, sidebarEl, toggleEl, prevEl, nextEl, progressEl, counterEl } = {}) {
+        this.el = deckEl || document.getElementById('deck') || document.body;
+        this.toggle = new SidebarToggleUI({ el: toggleEl || document.getElementById('sidebarToggle') });
+        this.sidebar = new SidebarUI({ el: sidebarEl || document.getElementById('sidebar') });
+        this.progress = new ProgressUI({ el: progressEl || document.getElementById('progressBar') });
+        this.counter = new CounterUI({ el: counterEl || document.getElementById('counter') });
+        this.prev = new NavButtonUI({ id: 'prevBtn', rel: 'prev', el: prevEl || document.getElementById('prevBtn') });
+        this.next = new NavButtonUI({ id: 'nextBtn', rel: 'next', el: nextEl || document.getElementById('nextBtn') });
+        this._sections = [];
+        this._openSections = new Set();
+        // Wire basic events
+        if (this.toggle.el) this.toggle.el.addEventListener('click', () => this._emit('toggle-sidebar'));
+        if (this.prev.el) this.prev.el.addEventListener('click', (e) => { e.stopPropagation(); this._emit('prev'); });
+        if (this.next.el) this.next.el.addEventListener('click', (e) => { e.stopPropagation(); this._emit('next'); });
+      }
+      _emit(type, detail) { this.el.dispatchEvent(new CustomEvent(type, { bubbles: true, detail })); }
+      isSidebarOpen() { return this.sidebar && this.sidebar.el && this.sidebar.el.classList.contains('open'); }
+      openSidebar() { if (this.sidebar) this.sidebar.open(); if (this.toggle && this.toggle.el) this.toggle.el.setAttribute('aria-expanded', 'true'); return this; }
+      closeSidebar() { if (this.sidebar) this.sidebar.close(); if (this.toggle && this.toggle.el) this.toggle.el.setAttribute('aria-expanded', 'false'); return this; }
+      toggleSidebar() { return this.isSidebarOpen() ? this.closeSidebar() : this.openSidebar(); }
+      setSections(sections) {
+        this._sections = Array.isArray(sections) ? sections : [];
+        if (!this.sidebar) return this;
+        this.sidebar.setSections(this._sections);
+        // Apply open state from our set
+        const items = this.sidebar.list ? Array.from(this.sidebar.list.children) : [];
+        items.forEach((node) => {
+          const si = Number(node.getAttribute('data-section-index'));
+          node.classList.toggle('sidebar__item--open', this._openSections.has(si));
+        });
+        // Delegate sidebar interactions once
+        if (this.sidebar.list && !this._delegated) {
+          this._delegated = true;
+          this.sidebar.list.addEventListener('click', (e) => {
+            const sectionBtn = e.target.closest('.sidebar__item > .sidebar__button');
+            if (sectionBtn) {
+              e.stopPropagation();
+              const parent = sectionBtn.parentElement;
+              const si = Number(parent.getAttribute('data-section-index'));
+              const isOpen = this._openSections.has(si);
+              const items = Array.from(this.sidebar.list.children);
+              if (isOpen) {
+                // Close current section
+                this._openSections.delete(si);
+                parent.classList.remove('sidebar__item--open');
+              } else {
+                // Accordion: close others, open only this one
+                this._openSections.clear();
+                this._openSections.add(si);
+                items.forEach((node) => {
+                  const idx = Number(node.getAttribute('data-section-index'));
+                  node.classList.toggle('sidebar__item--open', idx === si);
+                });
+              }
+              // Do not navigate on section header clicks; only toggle tree
+              return;
+            }
+            const subBtn = e.target.closest('.sidebar__subitem .sidebar__sublink');
+            if (subBtn) {
+              e.stopPropagation();
+              const parent = subBtn.parentElement;
+              const si = Number(parent.getAttribute('data-slide-index'));
+              if (!Number.isNaN(si)) this._emit('select', { index: si, source: 'slide' });
+            }
+          });
+        }
+        return this;
+      }
+      setActive(currentIndex) {
+        if (!this.sidebar || !this.sidebar.list || !this._sections.length) return this;
+        // Determine current section: last section header index <= currentIndex
+        let currentSection = 0;
+        for (let i = 0; i < this._sections.length; i++) {
+          if (this._sections[i].index <= currentIndex) currentSection = i; else break;
+        }
+        const items = Array.from(this.sidebar.list.children);
+        items.forEach((node, i) => node.classList.toggle('sidebar__item--active', i === currentSection));
+        // Highlight current slide inside the active section
+        const activeItem = items[currentSection];
+        if (activeItem) {
+          activeItem.querySelectorAll('.sidebar__subitem').forEach((n) => {
+            const si = Number(n.getAttribute('data-slide-index'));
+            n.classList.toggle('sidebar__subitem--active', si === currentIndex);
+          });
+        }
+        return this;
+      }
+      setPosition(position, total) {
+        if (this.progress && typeof this.progress.set === 'function') this.progress.set(position, total);
+        if (this.counter && typeof this.counter.set === 'function') this.counter.set(position, total);
+        return this;
+      }
+      setNavVisibility(prevHidden, nextHidden) {
+        if (this.prev) this.prev.setHidden(!!prevHidden);
+        if (this.next) this.next.setHidden(!!nextHidden);
+        return this;
+      }
+    },
+  };
+})();

assets/deck.css

@@ -0,0 +1,238 @@
+/* Deck CSS — complements Tailwind utilities with stable class hooks */
+
+:root {
+  --deck-bg-from: #fafafa;
+  --deck-bg-to: #f5f5f5;
+  --deck-text: #0a0a0a;
+  --deck-muted: #525252;
+  --deck-border: #e5e5e5;
+}
+
+/* Stage: enforce 16:9 area that scales to viewport */
+#slides {
+  width: min(100vw, calc(177.78vh)); /* 16:9 => width = 16/9 * height = 1.7778 * h */
+  height: min(100vh, calc(56.25vw)); /* height = 9/16 * width = 0.5625 * w */
+  position: relative;
+}
+
+/* Slide base (fill stage) */
+.slide {
+  min-height: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-left: clamp(1rem, 3vw, 5rem);
+  padding-right: clamp(1rem, 3vw, 5rem);
+  /* Prevent text caret from appearing on click */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  caret-color: transparent;
+}
+
+/* Also apply caret/selection rules to slide content */
+.slide * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  caret-color: transparent;
+}
+
+.slide__inner {
+  max-width: 72rem; /* ~1152px */
+  width: 100%;
+}
+
+.slide__header { margin-bottom: clamp(1rem, 3vw, 2rem); }
+.slide__title {
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.slide__subtitle {
+  margin-top: 0.5rem;
+  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
+  color: var(--deck-muted);
+}
+
+.slide__bullets {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: clamp(0.6rem, 1.6vw, 1.1rem);
+  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
+  line-height: 1.6;
+}
+.slide__bullet { position: relative; padding-left: 1.25rem; }
+.slide__dot {
+  position: absolute; left: 0; top: 0.2rem; color: #a3a3a3; /* neutral-400 */
+}
+
+.slide__rich { margin-top: 1.5rem; }
+
+.slide__figure { margin-top: 1.25rem; }
+.slide__image {
+  width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+  background: #fff;
+  border: 1px solid var(--deck-border);
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+.slide__image--cover {
+  max-height: none;
+  height: 70vh;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+.slide__caption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--deck-muted); }
+.slide__footnote { margin-top: 2rem; font-size: 0.875rem; color: #d4d4d4; }
+
+/* Section slide */
+.slide-section {
+  background: linear-gradient(to bottom, var(--deck-bg-from), var(--deck-bg-to));
+  text-align: center;
+}
+.slide-section__inner { max-width: 72rem; width: 100%; }
+.slide-section__title {
+  font-size: clamp(2.25rem, 7vw, 4.5rem);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.slide-section__subtitle {
+  margin-top: 0.75rem;
+  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
+  color: var(--deck-muted);
+}
+
+/* Title slide */
+.slide-title {
+  background: linear-gradient(to bottom right, #1a202c, #2d3748); /* Dark gradient */
+  color: #ffffff; /* White text */
+  text-align: center;
+}
+.slide-title .slide__title {
+  font-size: clamp(3rem, 8vw, 6rem); /* Even larger title */
+  font-weight: 800; /* Extra bold */
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+}
+.slide-title .slide__subtitle {
+  color: #cbd5e0; /* Lighter grey for subtitle */
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  margin-top: 1rem;
+}
+
+/* Footer controls (progress + small arrows) */
+#progressBar { height: 0.25rem; border-radius: 9999px; background: #e5e5e5; overflow: hidden; }
+#progressInner { height: 100%; background: #171717; transition: width 200ms ease; }
+#counter { font-size: 0.875rem; color: #525252; }
+
+#prevBtn, #nextBtn {
+  padding: 0.5rem;
+  border-radius: 9999px;
+  background: rgba(255,255,255,0.8);
+  border: 1px solid var(--deck-border);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+  backdrop-filter: blur(2px);
+}
+#prevBtn svg, #nextBtn svg { width: 1rem; height: 1rem; color: #404040; }
+
+
+/* Fixed footer bar for nav + progress */
+.deck-footer {
+  position: fixed;
+  left: 0; right: 0; bottom: 1rem;
+  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
+  z-index: 35;
+  pointer-events: none; /* allow clicks to pass unless on children */
+}
+.deck-footer > * { pointer-events: auto; }
+
+/* Hide progress + counter on section slides to reduce clutter */
+#deck.is-section #progressBar,
+#deck.is-section #counter {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+/* Sidebar */
+.sidebar {
+  position: fixed;
+  inset: 0 auto 0 0; /* left side */
+  height: 100vh;
+  width: clamp(220px, 22vw, 320px);
+  background: rgba(255,255,255,0.85);
+  backdrop-filter: blur(6px);
+  border-right: 1px solid var(--deck-border);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+  transform: translateX(-100%);
+  transition: transform 200ms ease;
+  z-index: 30;
+  pointer-events: auto;
+}
+.sidebar.open { transform: translateX(0); }
+.sidebar__inner { height: 100%; display: flex; flex-direction: column; }
+.sidebar__header { padding: 1rem 1rem 0.5rem 1rem; }
+.sidebar__title { font-weight: 600; letter-spacing: -0.01em; }
+.sidebar__list { padding: 0.25rem 0.5rem 1rem 0.5rem; overflow-y: auto; height: 100%; }
+.sidebar__item { display: block; }
+.sidebar__button {
+  width: 100%; text-align: left; display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid transparent;
+  color: var(--deck-text);
+}
+.sidebar__button:hover { background: #f5f5f5; border-color: var(--deck-border); }
+.sidebar__bullet { width: 6px; height: 6px; border-radius: 9999px; background: #d4d4d4; }
+.sidebar__label { font-size: 0.95rem; }
+.sidebar__item--active .sidebar__button { background: #111827; color: white; border-color: #111827; }
+.sidebar__item--active .sidebar__bullet { background: white; }
+
+/* Section arrow and sublist */
+.sidebar__chev {
+  margin-left: auto;
+  width: 0.875rem; height: 0.875rem; color: #6b7280; /* neutral-500 */
+  transition: transform 150ms ease;
+}
+.sidebar__item--open .sidebar__chev { transform: rotate(90deg); }
+
+.sidebar__sublist { display: none; padding: 0.25rem 0.25rem 0.25rem 1.5rem; }
+.sidebar__item--open .sidebar__sublist { display: block; }
+.sidebar__subitem { margin: 0; }
+.sidebar__sublink {
+  width: 100%; text-align: left; display: block;
+  padding: 0.4rem 0.6rem; border-radius: 0.375rem; font-size: 0.9rem;
+  color: #374151; /* neutral-700 */
+}
+.sidebar__sublink:hover { background: #f3f4f6; }
+.sidebar__subitem--active .sidebar__sublink {
+  background: #e5e7eb; color: #111827; font-weight: 600;
+}
+
+/* Sidebar Toggle */
+.sidebar-toggle {
+  position: fixed; bottom: 1rem; left: 1rem; z-index: 40;
+  padding: 0.5rem; border-radius: 0.5rem;
+  background: rgba(156,163,175,0.5); /* neutral-400 @ 50% */
+  border: 1px solid rgba(156,163,175,0.6);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+  backdrop-filter: blur(6px);
+}
+.sidebar-toggle:hover { background: rgba(156,163,175,0.72); border-color: rgba(156,163,175,0.8); }
+.sidebar-toggle svg { color: #ffffff; }
+
+/* Disable deck click-to-advance when sidebar open */
+#deck.has-sidebar-open { cursor: default; }
+
+/* Shift stage when sidebar open so content isn't covered */
+#deck.has-sidebar-open #slides {
+  transform: translateX(clamp(220px, 22vw, 320px));
+  transition: transform 200ms ease;
+}

assets/deck.js

@@ -0,0 +1,215 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const slidesRoot = document.getElementById('slides');
+  const deck = document.getElementById('deck');
+  const sidebar = document.getElementById('sidebar');
+
+  let slides = [];
+  let index = 0;
+  let sections = [];
+  let sidebarOpen = false;
+  let contentIndices = [];
+  let cumulativePositions = [];
+
+  const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+
+  // Adopt class-based UI facade (required)
+  const ui = new UI.DeckUI({ deckEl: deck });
+  deck.addEventListener('toggle-sidebar', (e) => { e.stopPropagation(); toggleSidebar(); });
+  deck.addEventListener('prev', (e) => { e.stopPropagation(); prev(); });
+  deck.addEventListener('next', (e) => { e.stopPropagation(); next(); });
+  deck.addEventListener('select', (e) => {
+    const si = Number(e.detail && e.detail.index);
+    if (!Number.isNaN(si)) { index = si; closeSidebar(); updateView(); }
+  });
+
+  const slideTemplate = (slide) => {
+    const hasSubtitle = slide.subtitle && slide.subtitle.length > 0;
+    const hasBullets = Array.isArray(slide.bullets) && slide.bullets.length > 0;
+    const hasFootnote = slide.footnote && slide.footnote.length > 0;
+    const hasImage = !!slide.image;
+    if (slide.type === 'section') {
+      return `
+        <section class="slide slide-section">
+          <div class="slide-section__inner">
+            <h2 class="slide-section__title">${slide.title || ''}</h2>
+            ${hasSubtitle ? `<p class="slide-section__subtitle">${slide.subtitle}</p>` : ''}
+          </div>
+        </section>
+      `;
+    }
+    if (slide.type === 'title') {
+      return `
+        <section class="slide slide-title">
+          <div class="slide__inner">
+            <header class="slide__header">
+              <h1 class="slide__title">${slide.title || ''}</h1>
+              ${hasSubtitle ? `<p class="slide__subtitle">${slide.subtitle}</p>` : ''}
+            </header>
+          </div>
+        </section>
+      `;
+    }
+    return `
+      <section class="slide">
+        <div class="slide__inner">
+          <header class="slide__header">
+            <h1 class="slide__title">${slide.title || ''}</h1>
+            ${hasSubtitle ? `<p class="slide__subtitle">${slide.subtitle}</p>` : ''}
+          </header>
+          ${hasBullets ? `
+            <ul class="slide__bullets">
+              ${slide.bullets.map(b => `<li class="slide__bullet"><span class="slide__dot">•</span><span>${b}</span></li>`).join('')}
+            </ul>
+          ` : ''}
+          ${slide.html ? `<div class="slide__rich">${slide.html}</div>` : ''}
+          ${hasImage ? (() => {
+            const cover = typeof slide.imageCropPercent === 'number';
+            const posY = cover ? Math.max(0, Math.min(100, slide.imageCropPercent)) : 50;
+            const cls = `slide__image${cover ? ' slide__image--cover' : ''}`;
+            const style = cover ? `style=\"object-position: 50% ${posY}%\"` : '';
+            return `
+              <figure class=\"slide__figure\">
+                <img src=\"${slide.image}\" alt=\"${slide.imageAlt || 'Slide image'}\" class=\"${cls}\" ${style} />
+                ${slide.caption ? `<figcaption class=\"slide__caption\">${slide.caption}</figcaption>` : ''}
+              </figure>
+            `;
+          })() : ''}
+          ${hasFootnote ? `<p class="slide__footnote">${slide.footnote}</p>` : ''}
+        </div>
+      </section>
+    `;
+  };
+
+  function renderSlides() {
+    slidesRoot.innerHTML = slides.map(slideTemplate).join('');
+    // Build sections for sidebar
+    // Build sections with nested slide lists
+    sections = [];
+    let current = null;
+    for (let i = 0; i < slides.length; i++) {
+      const s = slides[i];
+      if (s && s.type === 'section') {
+        // Start new section
+        current = { title: s.title || `Section ${sections.length + 1}`, index: i, slides: [] };
+        sections.push(current);
+      } else {
+        if (!current) {
+          // Create an implicit intro section for slides before the first section
+          current = { title: 'Intro', index: 0, slides: [] };
+          sections.push(current);
+        }
+        const label = s && s.title ? s.title : `Slide ${i + 1}`;
+        current.slides.push({ title: label, index: i });
+      }
+    }
+    renderSidebar();
+    // Compute content (non-section) slide indices for progress/counter
+    contentIndices = slides.map((s, i) => (s && s.type === 'section') ? null : i).filter((x) => x !== null);
+    // Precompute cumulative positions for O(1) lookups per slide index
+    cumulativePositions = new Array(slides.length);
+    let count = 0;
+    for (let i = 0; i < slides.length; i++) {
+      if (slides[i] && slides[i].type !== 'section') count++;
+      cumulativePositions[i] = count;
+    }
+    updateView();
+  }
+
+  function renderSidebar() {
+    ui.setSections(sections);
+    updateSidebarActive();
+  }
+
+  function updateView() {
+    const all = Array.from(slidesRoot.children);
+    all.forEach((el, i) => {
+      el.style.display = (i === index) ? 'flex' : 'none';
+    });
+    // Toggle section mode for CSS (hide progress on section slides)
+    const isSection = (slides[index] && slides[index].type === 'section');
+    deck.classList.toggle('is-section', !!isSection);
+    updateSidebarActive();
+    // Progress and counter excluding section slides
+    const totalContent = contentIndices.length || 1;
+    const position = cumulativePositions[index] || 0;
+    ui.setPosition(position, totalContent);
+    ui.setNavVisibility(index === 0, index === slides.length - 1);
+  }
+
+  function updateSidebarActive() {
+    ui.setActive(index);
+  }
+
+  function openSidebar() {
+    if (sidebarOpen) return;
+    sidebarOpen = true;
+    ui.openSidebar();
+    deck.classList.add('has-sidebar-open');
+  }
+  function closeSidebar() {
+    if (!sidebarOpen) return;
+    sidebarOpen = false;
+    ui.closeSidebar();
+    deck.classList.remove('has-sidebar-open');
+  }
+  function toggleSidebar() { (sidebarOpen ? closeSidebar() : openSidebar()); }
+
+  function next() { index = clamp(index + 1, 0, slides.length - 1); updateView(); }
+  function prev() { index = clamp(index - 1, 0, slides.length - 1); updateView(); }
+
+  // Click anywhere on deck to advance (but not when clicking buttons)
+  deck.addEventListener('click', (e) => {
+    const isButton = e.target.closest('button');
+    if (isButton) return;
+    if (sidebarOpen) return; // don't advance when sidebar is open
+    next();
+  });
+  
+
+  // Keyboard navigation
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') next();
+    if (e.key === 'ArrowLeft' || e.key === 'PageUp') prev();
+    if (e.key.toLowerCase() === 'h') prev();
+    if (e.key.toLowerCase() === 'l') next();
+    if (e.key.toLowerCase() === 's') toggleSidebar();
+    if (e.key === 'Escape') closeSidebar();
+  });
+
+  // Sidebar toggle handled via UI (DeckUI) events
+
+  // Prevent clicks inside sidebar from bubbling to deck
+  if (sidebar) {
+    sidebar.addEventListener('click', (e) => e.stopPropagation());
+  }
+
+  // Basic touch swipe navigation
+  let touchStartX = null;
+  deck.addEventListener('touchstart', (e) => {
+    touchStartX = e.changedTouches[0].screenX;
+  }, { passive: true });
+  deck.addEventListener('touchend', (e) => {
+    if (touchStartX == null) return;
+    const dx = e.changedTouches[0].screenX - touchStartX;
+    if (dx > 40) prev();
+    if (dx < -40) next();
+    touchStartX = null;
+  }, { passive: true });
+
+  // Load slides: always fetch from assets/slides.json
+  fetch('assets/slides.json')
+    .then((r) => r.json())
+    .then((data) => { slides = data; renderSlides(); })
+    .catch((err) => {
+      console.error('Failed to load slides.json', err);
+      slidesRoot.innerHTML = `
+        <section class="w-full min-h-screen flex items-center justify-center px-8">
+          <div class="max-w-xl text-center">
+            <h1 class="text-2xl font-semibold mb-3">Unable to load slides</h1>
+            <p class="text-neutral-600">Ensure this app is served over HTTP(S) and assets/slides.json is reachable.</p>
+            <p class="mt-2 text-neutral-600">Serve this folder with any static server, e.g.:</p>
+            <pre class="mt-2 text-left bg-neutral-100 p-3 rounded border border-neutral-200 text-sm">python3 -m http.server 8000</pre>
+          </div>
+        </section>`;
+    });
+});

assets/slides.json

@@ -0,0 +1,241 @@
+[
+  {
+    "type": "title",
+    "title": "Behavioral Political Economy Lab",
+    "subtitle": "RA Orientation & Assignments"
+  },
+  {
+    "title": "Welcome & Overview",
+    "subtitle": "RA Assignments — Second Half of Semester",
+    "bullets": [
+      "The BPE Lab conducts <strong>incentivized, non-deceptive experiments</strong> with real payoffs.",
+      "Our research provides <strong>clean causal inference and direct measurement</strong>, often compared to game theory.",
+      "This orientation outlines <strong>RA tasks, standards, and deliverables</strong>, covering lab sessions, data work, testing, and reporting.",
+      "<strong>RA roles span research (reviews, coding), operations (session prep, monitoring), and support (recruitment, testing)</strong>."
+    ],
+    "footnote": "From: BPE-Lab-Research-Themes-Digest.md; deck-outline.md"
+  },
+  {
+    "type": "section",
+    "title": "Orientation & Context",
+    "subtitle": "What we do and how you plug in"
+  },
+  {
+    "title": "Orientation and Purpose",
+    "subtitle": "Meeting goals and expectations",
+    "bullets": [
+      "<strong>Clarify the operational expectations</strong> for the rest of the semester.",
+      "Define <strong>measurable deliverables</strong> and the weekly reporting structure.",
+      "Locate RA work within the lab’s research pipeline and session schedule.",
+      "Reporting: RAs primarily check in with the <strong>Lab Manager (Ignacio Urbina)</strong>."
+    ]
+  },
+  {
+    "title": "Admin Calendar (Fall)",
+    "subtitle": "Key semester dates — plan submissions accordingly",
+    "bullets": [
+      "<strong>Semester start: Mon, Aug 25; Last day of classes: Mon, Dec 8</strong>.",
+      "<strong>Finals: Dec 10–12 (Week I) and Dec 15–18 (Week II)</strong>.",
+      "<strong>Official end of term: Thu, Dec 18</strong> (Registrar calendar)."
+    ],
+    "footnote": "From: Administrative Details.docx"
+  },
+  {
+    "title": "PI Differences & Core Expectation",
+    "bullets": [
+      "Different Principal Investigators (PIs) may request different workflows; it helps to <strong>clarify early and follow the requested approach</strong>.",
+      "Most valuable help: be an <strong>extra team member on the lab floor during sessions</strong>.",
+      "Default: <strong>check with the PI before answering any study-specific question</strong>."
+    ],
+    "footnote": "From: CBPE RA Training (SP 2024).md (Slide 7)"
+  },
+  {
+    "type": "section",
+    "title": "Expectations & Operational Details",
+    "subtitle": "Reporting, workload, workflow, and Q&A"
+  },
+  {
+    "title": "Expectations and Operational Details",
+    "bullets": [
+      "Key tasks: literature reviews, manual coding, lab monitoring, experiment/platform testing, recruitment outreach.",
+      "Expect <strong>~5 hrs/week for reviews (~15 hrs total)</strong>; hand coding and reviews are paced to term end, lab tasks are on-demand.",
+      "<strong>Mid-term check-in (Nov 19) and weekly status summaries</strong> are required; Ignacio Urbina is primary contact.",
+      "All deliverables must be stored in <strong>shared Drive with naming conventions</strong> and follow codebooks/protocols."
+    ]
+  },
+  {
+    "title": "Check-ins & Deadlines",
+    "bullets": [
+      "<strong>Midpoint check-in: brief Slack DM to Ignacio by Nov 19</strong> (progress, blockers, next steps).",
+      "<strong>Final submission: Dec 12</strong> (spreadsheet + PDF archive in shared Drive).",
+      "Lab monitoring/pilots are in-person and on-demand; <strong>reviews and hand coding are paced with end-of-semester completion</strong>."
+    ],
+    "footnote": "From: Lit Review instruction docs; Administrative Details.docx"
+  },
+  {
+    "type": "section",
+    "title": "Lab Procedures",
+    "subtitle": "Capacity, check-in, rules, payments"
+  },
+  {
+    "title": "Arrival & Setup — Before Session",
+    "bullets": [
+      "<strong>Arrive 20 mins before session start</strong>; ensure readiness before participants arrive 15 mins early.",
+      "<strong>Turn on desktops and launch study software</strong> (zTree/oTree/Qualtrics) per PI instructions.",
+      "Sessions are <strong>45-60 mins, capped at 25 participants</strong>; roster defines headcount.",
+      "Participants sign up in advance; we <strong>over-recruit slightly to offset no-shows</strong>."
+    ],
+    "footnote": "From: CBPE RA Training (SP 2024).md (Slide 9)"
+  },
+  {
+    "title": "Wayfinding & Check-In — On Arrival",
+    "bullets": [
+      "<strong>Assist participants with wayfinding; verify ID and roster with PI</strong>; admit only registered invitees.",
+      "<strong>Hand out seat tag, receipt form, and pen</strong>; guide participants to their seats.",
+      "Ensure participants complete <strong>name, signature, address, and SBU ID on the receipt form (required for payment)</strong>.",
+      "<strong>Verify all receipt fields are complete</strong> during check-in; store securely and alphabetize post-session."
+    ],
+    "footnote": "From: CBPE RA Training (SP 2024).md (Slide 10)"
+  },
+  {
+    "title": "Extra Participants, Late Policy, No-Shows",
+    "bullets": [
+      "<strong>Manage extra participants (show-up fee/reschedule)</strong>; late arrivals cannot participate and are unpaid.",
+      "<strong>Two no-shows result in removal from the pool</strong>; PI may grant a 2–5 min grace period.",
+      "<strong>Close lab doors before experiments; politely but firmly deny entry to late subjects</strong>.",
+      "Maintain a <strong>quiet, orderly, and focused environment</strong>; defer to PI for difficult situations."
+    ],
+    "footnote": "From: CBPE RA Training (SP 2024).md (Slides 13–14)"
+  },
+  {
+    "title": "During Session — Your Role",
+    "bullets": [
+      "<strong>Answer procedural questions only</strong>; monitor participants at assigned computers.",
+      "<strong>Collect receipts and pens early</strong> to streamline payments.",
+      "<strong>Enforce house rules: no talking, eating, or devices</strong> during the study.",
+      "Assist participants who raise hands; <strong>PI introduces you as Lab Assistant</strong>."
+    ],
+    "footnote": "From: CBPE RA Training (SP 2024).md (Slides 15–16); RA Training.md"
+  },
+  {
+    "title": "End of Experiment — Line & Roles",
+    "bullets": [
+      "<strong>Payments begin post-experiment/survey</strong>; participants line up by computer number with seat tag.",
+      "<strong>PI handles payments in control room; RA maintains lab order and calls numbers, ensuring anonymity</strong>.",
+      "<strong>Verify receipt completeness; do not admit others to control room until called</strong>.",
+      "<strong>Post-session: alphabetize receipts, reset lab (desktops/software), and secure lost items</strong>."
+    ],
+    "footnote": "From: CBPE RA Training (SP 2024).md (Slide 17)"
+  },
+  {
+    "type": "section",
+    "title": "Assignments — Testing & Recruitment",
+    "subtitle": "Outreach, pilots, and platform checks"
+  },
+  {
+    "title": "Experiment & Platform Testing",
+    "bullets": [
+      "<strong>Pilot and verify experiment builds</strong> (zTree, oTree, Qualtrics) for flows, timers, and payoffs.",
+      "<strong>Log reproducible bugs</strong>, noting risk and cause; propose fixes or alternatives.",
+      "<strong>Conduct physical/digital recruitment outreach</strong> as instructed by supervisor/PI.",
+      "<strong>Document outreach locations, counts, dates</strong>, and update tracking sheets promptly."
+    ]
+  },
+  {
+    "type": "section",
+    "title": "Assignments — Literature Reviews",
+    "subtitle": "Topics, scope, workflow, and pairing"
+  },
+  {
+    "title": "Lit Review — Prep & Workload",
+    "bullets": [
+      "<strong>Review topic intros; study spreadsheet structure; follow instructions step-by-step</strong>.",
+      "<strong>Weekly workload per RA: ~5 hours; total ≈15 hours (~3 weeks)</strong>.",
+      "<strong>Store all outputs in shared Drive; use naming conventions</strong> and complete metadata fields."
+    ],
+    "footnote": "From: Lit Review instruction docs"
+  },
+  {
+    "title": "Literature Review — Scope & Standards",
+    "bullets": [
+      "<strong>Identify at least 20 unique peer-reviewed papers</strong> per assigned topic.",
+      "<strong>Deliver a PDF archive and a structured spreadsheet</strong> (authors, year, journal, design, measures, key results).",
+      "<strong>Use inclusion/exclusion criteria; avoid duplicates; record search strings and databases</strong>.",
+      "When possible, reviews are assigned in pairs; please <strong>split work evenly (≈10 entries each)</strong>."
+    ]
+  },
+  {
+    "title": "Lit Review — Workflow & Deliverables",
+    "bullets": [
+      "<strong>Source identification → screening → metadata entry → weekly verification</strong>.",
+      "<strong>Use version control; adopt strict file naming conventions</strong> for PDFs and data.",
+      "<strong>Cite with DOIs/URLs; ensure complete bibliographic fields</strong> and stable links."
+    ]
+  },
+  {
+    "type": "section",
+    "title": "Assignments — Manual Coding",
+    "subtitle": "Climate tweet stance task and quality"
+  },
+  {
+    "title": "Manual Climate Tweet Stance Coding",
+    "bullets": [
+      "<strong>Classify climate change stance</strong> (supportive, skeptical, neutral, other) using specified platforms (Google Form, Qualtrics, spreadsheet).",
+      "<strong>Follow codebook definitions</strong>, handling sarcasm and marking off-topic/ambiguous content.",
+      "<strong>Output .xlsx with tweet ID/text, coder ID, stance label, notes, and timestamp</strong>.",
+      "<strong>Complete practice rounds for training; double-code a subset to compute and resolve agreement</strong>."
+    ]
+  },
+  {
+    "title": "Hand Coding — Quality & Compliance",
+    "bullets": [
+      "<strong>Follow the codebook precisely; raise ambiguities before proceeding</strong>.",
+      "<strong>Maintain an error log with corrections and rationale</strong>; date all changes.",
+      "<strong>Schedule periodic reliability audits; target high inter-coder agreement</strong>."
+    ]
+  },
+  {
+    "type": "section",
+    "title": "Standards & Conduct",
+    "subtitle": "Performance, ethics, and growth"
+  },
+  {
+    "title": "Performance Standards",
+    "bullets": [
+      "<strong>Precision and consistency in handling data and receipts</strong>; no shortcuts.",
+      "<strong>Reliability and punctuality for sessions</strong>; arrive earlier than participants.",
+      "<strong>Adhere to instructions; when unsure, pause and ask the PI/supervisor</strong>."
+    ]
+  },
+  {
+    "title": "Compliance & Conduct",
+    "bullets": [
+      "<strong>Maintain confidentiality</strong>; do not share participant or study info without authorization.",
+      "<strong>Human subjects ethics: uphold non-deceptive protocols and consent procedures</strong>.",
+      "<strong>Report incidents immediately</strong>; document actions taken to remediate."
+    ],
+    "footnote": "From: BPE-Lab-Research-Themes-Digest.md; lab policies"
+  },
+  {
+    "type": "section",
+    "title": "Timeline & Q&A",
+    "subtitle": "Sequencing, questions, and next steps"
+  },
+  {
+    "title": "Timeline & Task Sequencing",
+    "bullets": [
+      "<strong>Continuous work: coding, literature reviews, documentation, data housekeeping</strong>.",
+      "<strong>Event-driven: session monitoring, pilots, platform tests, recruitment pushes</strong>.",
+      "<strong>Mid-point and final checkpoints: verify deliverables and adjust allocations</strong>."
+    ]
+  },
+  {
+    "title": "Questions & Confirmation",
+    "bullets": [
+      "<strong>Confirm understanding of all policies</strong> (late, no-show, anonymity, receipts, device rules).",
+      "<strong>Review assigned topics/tasks and target dates</strong>; request clarifications as needed.",
+      "<strong>Commit to a weekly reporting time/channel; begin assigned tasks immediately</strong>.",
+      "<strong>Follow protocols, keep supervisors informed, escalate blockers, and meet milestones</strong>."
+    ]
+  }
+]

index.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>BPE Lab — RA Assignments (Slide Deck)</title>
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Deck styles -->
+    <link rel="stylesheet" href="assets/deck.css" />
+    <meta name="description" content="Behavioral Political Economy Lab — RA Assignments Slide Deck" />
+  </head>
+  <body class="bg-neutral-50 text-neutral-900 selection:bg-black selection:text-white">
+    <!-- Deck Container -->
+    <div id="deck" class="min-h-screen w-full flex items-center justify-center relative overflow-hidden cursor-pointer">
+      <!-- Slides Root -->
+      <div id="slides" class="w-full h-full"></div>
+
+      <!-- Sidebar Toggle -->
+      <button id="sidebarToggle" aria-label="Toggle sections sidebar" aria-expanded="false" class="sidebar-toggle">
+        <svg id="sidebarToggleIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" aria-hidden="true">
+          <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" />
+          <rect x="11" y="10" width="2" height="7" rx="1" fill="currentColor" />
+          <rect x="11" y="6" width="2" height="2" rx="1" fill="currentColor" />
+        </svg>
+      </button>
+
+      <!-- Sidebar: Sections Navigation -->
+      <aside id="sidebar" class="sidebar" aria-hidden="true">
+        <div class="sidebar__inner">
+          <header class="sidebar__header">
+            <span class="sidebar__title">Sections</span>
+          </header>
+          <nav id="sidebarList" class="sidebar__list" aria-label="Slide sections"></nav>
+        </div>
+      </aside>
+
+      <!-- Footer: Navigation + Progress -->
+      <div class="deck-footer">
+        <!-- Prev button (small) -->
+        <button id="prevBtn" aria-label="Previous slide" class="group p-2 rounded-full bg-white/80 hover:bg-white shadow border border-neutral-200 backdrop-blur pointer-events-auto hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-700 group-hover:-translate-x-0.5 transition-transform">
+            <path fill-rule="evenodd" d="M15.53 4.47a.75.75 0 0 1 0 1.06L9.06 12l6.47 6.47a.75.75 0 1 1-1.06 1.06l-7-7a.75.75 0 0 1 0-1.06l7-7a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
+          </svg>
+        </button>
+
+        <!-- Progress -->
+        <div id="progressBar" class="h-1 w-44 bg-neutral-200 rounded-full overflow-hidden">
+          <div id="progressInner" class="h-full w-0 bg-neutral-800 transition-all"></div>
+        </div>
+        <div id="counter" class="text-sm font-medium text-neutral-600"></div>
+
+        <!-- Next button (small) -->
+        <button id="nextBtn" aria-label="Next slide" class="group p-2 rounded-full bg-white/80 hover:bg-white shadow border border-neutral-200 backdrop-blur pointer-events-auto hidden">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-neutral-700 group-hover:translate-x-0.5 transition-transform">
+            <path fill-rule="evenodd" d="M8.47 4.47a.75.75 0 0 1 1.06 0l7 7a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 1 1-1.06-1.06L14.94 12 8.47 5.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- UI helpers (class-based) -->
+    <script defer src="assets/components.js"></script>
+    <!-- App JS -->
+    <script defer src="assets/deck.js"></script>
+  </body>
+  </html>