taleem-player 0.4.1 → 0.5.0

package/dist/taleem-player.esm.js

@@ -14228,6 +14228,625 @@ var goldenDeckV1 = {
 };
 zodDeckV1.parse(goldenDeckV1);
 
+// node_modules/taleem-slides/src/slides/TitleSlide.js
+var TitleSlide = {
+  type: "titleSlide",
+  fromJSON(raw) {
+    const title = raw.data?.find((d) => d.name === "title")?.content;
+    if (!title) throw new Error("titleSlide: title required");
+    return Object.freeze({
+      type: "titleSlide",
+      title,
+      render() {
+        return `
+          <section class="slide titleSlide">
+            <h1>${title}</h1>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/TitleAndSubtitleSlide.js
+var TitleAndSubtitleSlide = {
+  type: "titleAndSubtitle",
+  fromJSON(raw) {
+    const title = raw.data?.find((d) => d.name === "title")?.content;
+    const subtitle = raw.data?.find((d) => d.name === "subtitle")?.content;
+    if (!title || !subtitle) {
+      throw new Error("titleAndSubtitle: requires title and subtitle");
+    }
+    return Object.freeze({
+      type: "titleAndSubtitle",
+      title,
+      subtitle,
+      render() {
+        return `
+          <section class="slide titleAndSubtitle">
+            <h1>${title}</h1>
+            <h2>${subtitle}</h2>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/TitleAndParaSlide.js
+var TitleAndParaSlide = {
+  type: "titleAndPara",
+  fromJSON(raw) {
+    const title = raw.data?.find((d) => d.name === "title")?.content;
+    const para = raw.data?.find((d) => d.name === "para")?.content;
+    if (!title || !para) {
+      throw new Error("titleAndPara: requires title and para");
+    }
+    return Object.freeze({
+      type: "titleAndPara",
+      title,
+      para,
+      render() {
+        return `
+          <section class="slide titleAndPara">
+            <h1>${title}</h1>
+            <p>${para}</p>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/BulletListSlide.js
+var BulletListSlide = {
+  type: "bulletList",
+  fromJSON(raw) {
+    const bullets = raw.data?.filter((d) => d.name === "bullet").map((d) => ({ content: d.content }));
+    if (!bullets?.length) {
+      throw new Error("bulletList: requires at least one bullet");
+    }
+    return Object.freeze({
+      type: "bulletList",
+      bullets,
+      render({ visibleCount = bullets.length, activeIndex = null } = {}) {
+        return `
+          <section class="slide bulletList">
+            <ul>
+              ${bullets.map((b, i) => {
+          if (i >= visibleCount) return "";
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `<li class="${cls}">${b.content}</li>`;
+        }).join("")}
+            </ul>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/TwoColumnTextSlide.js
+var TwoColumnTextSlide = {
+  type: "twoColumnText",
+  fromJSON(raw) {
+    const left = raw.data?.filter((d) => d.name === "left").map((d) => ({ content: d.content }));
+    const right = raw.data?.filter((d) => d.name === "right").map((d) => ({ content: d.content }));
+    if (!left?.length || !right?.length) {
+      throw new Error("twoColumnText: requires left and right columns");
+    }
+    return Object.freeze({
+      type: "twoColumnText",
+      left,
+      right,
+      render({
+        leftVisibleCount = left.length,
+        rightVisibleCount = right.length,
+        leftActiveIndex = null,
+        rightActiveIndex = null
+      } = {}) {
+        return `
+          <section class="slide twoColumnText">
+            <div class="col left">
+              ${left.map((l, i) => {
+          if (i >= leftVisibleCount) return "";
+          const cls = i === leftActiveIndex ? "is-active" : i < leftActiveIndex ? "is-dim" : "";
+          return `<div class="${cls}">${l.content}</div>`;
+        }).join("")}
+            </div>
+            <div class="col right">
+              ${right.map((r, i) => {
+          if (i >= rightVisibleCount) return "";
+          const cls = i === rightActiveIndex ? "is-active" : i < rightActiveIndex ? "is-dim" : "";
+          return `<div class="${cls}">${r.content}</div>`;
+        }).join("")}
+            </div>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/ImageSlide.js
+var ImageSlide = {
+  type: "imageSlide",
+  fromJSON(raw) {
+    const src = raw.data?.find((d) => d.name === "image")?.content;
+    if (!src) throw new Error("imageSlide: image required");
+    return Object.freeze({
+      type: "imageSlide",
+      src,
+      render() {
+        return `
+          <section class="slide imageSlide">
+            <img src="${src}" alt="" />
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/FillImageSlide.js
+var FillImageSlide = {
+  type: "fillImage",
+  fromJSON(raw) {
+    const image = raw.data?.find((d) => d.name === "image")?.content;
+    if (!image) throw new Error("fillImage: image required");
+    return Object.freeze({
+      type: "fillImage",
+      image,
+      render() {
+        return `
+          <section class="slide fillImage">
+            <img src="${image}" alt="" />
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/ImageWithTitleSlide.js
+var ImageWithTitleSlide = {
+  type: "imageWithTitle",
+  fromJSON(raw) {
+    const src = raw.data?.find((d) => d.name === "image")?.content;
+    const title = raw.data?.find((d) => d.name === "title")?.content;
+    if (!src || !title) {
+      throw new Error("imageWithTitle: image and title required");
+    }
+    return Object.freeze({
+      type: "imageWithTitle",
+      src,
+      title,
+      render() {
+        return `
+          <section class="slide imageWithTitle">
+            <img src="${src}" alt="" />
+            <h1>${title}</h1>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/ImageWithCaptionSlide.js
+var ImageWithCaptionSlide = {
+  type: "imageWithCaption",
+  fromJSON(raw) {
+    const src = raw.data?.find((d) => d.name === "image")?.content;
+    const caption = raw.data?.find((d) => d.name === "caption")?.content;
+    if (!src || !caption) {
+      throw new Error("imageWithCaption: image and caption required");
+    }
+    return Object.freeze({
+      type: "imageWithCaption",
+      src,
+      caption,
+      render() {
+        return `
+          <figure class="slide imageWithCaption">
+            <img src="${src}" alt="" />
+            <figcaption>${caption}</figcaption>
+          </figure>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/ImageLeftBulletsRightSlide.js
+var ImageLeftBulletsRightSlide = {
+  type: "imageLeftBulletsRight",
+  fromJSON(raw) {
+    const image = raw.data?.find((d) => d.name === "image")?.content;
+    const bullets = raw.data?.filter((d) => d.name === "bullet").map((d) => ({ content: d.content }));
+    if (!image || !bullets?.length) {
+      throw new Error("imageLeftBulletsRight: image and bullets required");
+    }
+    return Object.freeze({
+      type: "imageLeftBulletsRight",
+      image,
+      bullets,
+      render({ visibleCount = bullets.length, activeIndex = null } = {}) {
+        return `
+          <section class="slide imageLeftBulletsRight">
+            <img src="${image}" alt="" />
+            <ul>
+              ${bullets.map((b, i) => {
+          if (i >= visibleCount) return "";
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `<li class="${cls}">${b.content}</li>`;
+        }).join("")}
+            </ul>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/ImageRightBulletsLeftSlide.js
+var ImageRightBulletsLeftSlide = {
+  type: "imageRightBulletsLeft",
+  fromJSON(raw) {
+    const image = raw.data?.find((d) => d.name === "image")?.content;
+    const bullets = raw.data?.filter((d) => d.name === "bullet").map((d) => ({ content: d.content }));
+    if (!image || !bullets?.length) {
+      throw new Error("imageRightBulletsLeft: image and bullets required");
+    }
+    return Object.freeze({
+      type: "imageRightBulletsLeft",
+      image,
+      bullets,
+      render({ visibleCount = bullets.length, activeIndex = null } = {}) {
+        return `
+          <section class="slide imageRightBulletsLeft">
+            <ul>
+              ${bullets.map((b, i) => {
+          if (i >= visibleCount) return "";
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `<li class="${cls}">${b.content}</li>`;
+        }).join("")}
+            </ul>
+            <img src="${image}" alt="" />
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/TableSlide.js
+var TableSlide = {
+  type: "table",
+  fromJSON(raw) {
+    const rows = raw.data?.filter((d) => d.name === "row").map((d) => ({ cells: d.content }));
+    if (!rows?.length) {
+      throw new Error("table: requires at least one row");
+    }
+    return Object.freeze({
+      type: "table",
+      rows,
+      render({ visibleCount = rows.length, activeIndex = null } = {}) {
+        return `
+          <table class="slide table">
+            ${rows.map((row, i) => {
+          if (i >= visibleCount) return "";
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `
+                <tr class="${cls}">
+                  ${row.cells.map((c) => `<td>${c}</td>`).join("")}
+                </tr>
+              `;
+        }).join("")}
+          </table>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/StatisticSlide.js
+var StatisticSlide = {
+  type: "statistic",
+  fromJSON(raw) {
+    const label = raw.data?.find((d) => d.name === "label")?.content;
+    const value = raw.data?.find((d) => d.name === "value")?.content;
+    if (!label || value === void 0) {
+      throw new Error("statistic: requires label and value");
+    }
+    return Object.freeze({
+      type: "statistic",
+      label,
+      value,
+      render() {
+        return `
+          <section class="slide statistic">
+            <div class="stat-value">${value}</div>
+            <div class="stat-label">${label}</div>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/BigNumberSlide.js
+var BigNumberSlide = {
+  type: "bigNumber",
+  fromJSON(raw) {
+    const value = raw.data?.find((d) => d.name === "number")?.content;
+    const label = raw.data?.find((d) => d.name === "label")?.content;
+    if (!value) throw new Error("bigNumber: number required");
+    return Object.freeze({
+      type: "bigNumber",
+      value,
+      label,
+      render() {
+        return `
+          <section class="slide bigNumber">
+            <div class="number">${value}</div>
+            ${label ? `<div class="label">${label}</div>` : ""}
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/BarChartSlide.js
+var BarChartSlide = {
+  type: "barChart",
+  fromJSON(raw) {
+    const bars = raw.data?.filter((d) => d.name === "bar").map((d) => ({
+      label: d.content.label,
+      value: d.content.value
+    }));
+    if (!bars?.length) {
+      throw new Error("barChart: requires at least one bar");
+    }
+    return Object.freeze({
+      type: "barChart",
+      bars,
+      render({ visibleCount = bars.length, activeIndex = null } = {}) {
+        return `
+          <section class="slide barChart">
+            <ul class="bars">
+              ${bars.map((b, i) => {
+          if (i >= visibleCount) return "";
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `
+                  <li class="bar ${cls}">
+                    <span class="bar-label">${b.label}</span>
+                    <span class="bar-value">${b.value}</span>
+                  </li>
+                `;
+        }).join("")}
+            </ul>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/DonutChartSlide.js
+var DonutChartSlide = {
+  type: "donutChart",
+  fromJSON(raw) {
+    const segments = raw.data?.filter((d) => d.name === "segment").map((d) => ({
+      label: d.content.label,
+      value: d.content.value
+    }));
+    if (!segments?.length) {
+      throw new Error("donutChart: requires at least one segment");
+    }
+    return Object.freeze({
+      type: "donutChart",
+      segments,
+      render({ visibleCount = segments.length, activeIndex = null } = {}) {
+        return `
+          <section class="slide donutChart">
+            <ul>
+              ${segments.map((s, i) => {
+          if (i >= visibleCount) return "";
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `<li class="${cls}">${s.label}: ${s.value}</li>`;
+        }).join("")}
+            </ul>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/QuoteSlide.js
+var QuoteSlide = {
+  type: "quoteSlide",
+  fromJSON(raw) {
+    const text = raw.data?.find((d) => d.name === "quote")?.content;
+    const author = raw.data?.find((d) => d.name === "author")?.content;
+    if (!text) throw new Error("quoteSlide: quote required");
+    return Object.freeze({
+      type: "quoteSlide",
+      text,
+      author,
+      render() {
+        return `
+          <blockquote class="slide quoteSlide">
+            <p>${text}</p>
+            ${author ? `<footer>${author}</footer>` : ""}
+          </blockquote>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/QuoteWithImageSlide.js
+var QuoteWithImageSlide = {
+  type: "quoteWithImage",
+  fromJSON(raw) {
+    const quote = raw.data?.find((d) => d.name === "quote")?.content;
+    const image = raw.data?.find((d) => d.name === "image")?.content;
+    const author = raw.data?.find((d) => d.name === "author")?.content;
+    if (!quote || !image) {
+      throw new Error("quoteWithImage: quote and image required");
+    }
+    return Object.freeze({
+      type: "quoteWithImage",
+      quote,
+      image,
+      author,
+      render() {
+        return `
+          <section class="slide quoteWithImage">
+            <img src="${image}" alt="" />
+            <blockquote>
+              <p>${quote}</p>
+              ${author ? `<footer>${author}</footer>` : ""}
+            </blockquote>
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/CornerWordsSlide.js
+var CornerWordsSlide = {
+  type: "cornerWordsSlide",
+  fromJSON(raw) {
+    const words = raw.data?.filter((d) => d.name === "word").map((d) => ({ content: d.content }));
+    if (!words?.length) {
+      throw new Error("cornerWordsSlide: requires at least one word");
+    }
+    return Object.freeze({
+      type: "cornerWordsSlide",
+      words,
+      render({ visibleCount = words.length } = {}) {
+        return `
+          <section class="slide cornerWordsSlide">
+            ${words.map((w, i) => {
+          if (i >= visibleCount) return "";
+          return `<span class="corner-word corner-${i + 1}">${w.content}</span>`;
+        }).join("")}
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/ContactSlide.js
+var ContactSlide = {
+  type: "contactSlide",
+  fromJSON(raw) {
+    const items = raw.data?.map((d) => ({ content: d.content }));
+    if (!items?.length) {
+      throw new Error("contactSlide: content required");
+    }
+    return Object.freeze({
+      type: "contactSlide",
+      items,
+      render() {
+        return `
+          <section class="slide contactSlide">
+            ${items.map((i) => `<div>${i.content}</div>`).join("")}
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/EqSlide.js
+var EqSlide = {
+  type: "eq",
+  fromJSON(raw) {
+    if (!Array.isArray(raw.data)) {
+      throw new Error("eq: data must be array");
+    }
+    const lines = raw.data.map((d) => ({
+      content: d.content
+    }));
+    return Object.freeze({
+      type: "eq",
+      lines,
+      render({ activeIndex = null } = {}) {
+        return `
+          <section class="slide eq">
+            ${lines.map((l, i) => {
+          const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+          return `<div class="eq-line ${cls}">${l.content}</div>`;
+        }).join("")}
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/slides/SvgPointerSlide.js
+var SvgPointerSlide = {
+  type: "svgPointer",
+  fromJSON(raw) {
+    const svg = raw.data?.find((d) => d.name === "svg")?.content;
+    if (!svg) throw new Error("svgPointer: svg required");
+    return Object.freeze({
+      type: "svgPointer",
+      svg,
+      render() {
+        return `
+          <section class="slide svgPointer">
+            ${svg}
+          </section>
+        `;
+      }
+    });
+  }
+};
+
+// node_modules/taleem-slides/src/SlideTemplates.js
+var SlideTemplates = {
+  titleSlide: TitleSlide,
+  titleAndSubtitle: TitleAndSubtitleSlide,
+  titleAndPara: TitleAndParaSlide,
+  bulletList: BulletListSlide,
+  twoColumnText: TwoColumnTextSlide,
+  imageSlide: ImageSlide,
+  fillImage: FillImageSlide,
+  imageWithTitle: ImageWithTitleSlide,
+  imageWithCaption: ImageWithCaptionSlide,
+  imageLeftBulletsRight: ImageLeftBulletsRightSlide,
+  imageRightBulletsLeft: ImageRightBulletsLeftSlide,
+  table: TableSlide,
+  statistic: StatisticSlide,
+  bigNumber: BigNumberSlide,
+  barChart: BarChartSlide,
+  donutChart: DonutChartSlide,
+  quoteSlide: QuoteSlide,
+  quoteWithImage: QuoteWithImageSlide,
+  cornerWordsSlide: CornerWordsSlide,
+  contactSlide: ContactSlide,
+  eq: EqSlide,
+  svgPointer: SvgPointerSlide
+};
+
+// node_modules/taleem-slides/src/getSlideTemplate.js
+function getSlideTemplate(type) {
+  const template = SlideTemplates[type];
+  if (!template) {
+    throw new Error(`Unknown slide template type "${type}"`);
+  }
+  return template;
+}
+
 // src/core/stage.js
 function createStage(mount) {
   if (!mount) throw new Error("taleem-player: mount is required");
@@ -14254,10 +14873,7 @@ function createStage(mount) {
 }
 
 // src/core/player.js
-function createTaleemPlayer({ mount, deck, renderer }) {
-  if (!renderer || typeof renderer.render !== "function") {
-    throw new Error("taleem-player: renderer with render() required");
-  }
+function createTaleemPlayer({ mount, deck }) {
   const result = validateDeckV1(deck);
   if (!result.ok) {
     throw new Error(
@@ -14266,6 +14882,7 @@ function createTaleemPlayer({ mount, deck, renderer }) {
   }
   const stage = createStage(mount);
   let lastSlide = null;
+  let lastRenderedKey = null;
   function getSlideAtTime(deck2, time3) {
     const slides = deck2.deck;
     for (let i = slides.length - 1; i >= 0; i--) {
@@ -14274,22 +14891,46 @@ function createTaleemPlayer({ mount, deck, renderer }) {
     }
     return null;
   }
+  function computeRenderState(slide, time3) {
+    if (!Array.isArray(slide.data)) {
+      return {};
+    }
+    let visibleCount = 0;
+    let activeIndex = -1;
+    slide.data.forEach((item, index) => {
+      if (typeof item.showAt === "number" && time3 >= item.showAt) {
+        visibleCount++;
+        activeIndex = index;
+      }
+    });
+    return {
+      visibleCount,
+      activeIndex
+    };
+  }
   function renderAt(time3) {
     const slide = getSlideAtTime(deck, time3);
     if (!slide) {
       stage.clear();
       lastSlide = null;
+      lastRenderedKey = null;
       return;
     }
+    const renderState = computeRenderState(slide, time3);
+    const renderKey = `${slide.start}-${renderState.visibleCount}-${renderState.activeIndex}`;
     if (slide !== lastSlide) {
       stage.clear();
       lastSlide = slide;
+      lastRenderedKey = null;
     }
-    renderer.render({
-      mount: stage.el,
-      slide,
-      time: time3
-    });
+    if (renderKey === lastRenderedKey) {
+      return;
+    }
+    const Template = getSlideTemplate(slide.type);
+    const slideInstance = Template.fromJSON(slide);
+    const html = slideInstance.render(renderState);
+    stage.el.innerHTML = html;
+    lastRenderedKey = renderKey;
   }
   function destroy() {
     stage.destroy();

package/dist/taleem-player.umd.js

@@ -14247,6 +14247,625 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   };
   zodDeckV1.parse(goldenDeckV1);
 
+  // node_modules/taleem-slides/src/slides/TitleSlide.js
+  var TitleSlide = {
+    type: "titleSlide",
+    fromJSON(raw) {
+      const title = raw.data?.find((d) => d.name === "title")?.content;
+      if (!title) throw new Error("titleSlide: title required");
+      return Object.freeze({
+        type: "titleSlide",
+        title,
+        render() {
+          return `
+          <section class="slide titleSlide">
+            <h1>${title}</h1>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/TitleAndSubtitleSlide.js
+  var TitleAndSubtitleSlide = {
+    type: "titleAndSubtitle",
+    fromJSON(raw) {
+      const title = raw.data?.find((d) => d.name === "title")?.content;
+      const subtitle = raw.data?.find((d) => d.name === "subtitle")?.content;
+      if (!title || !subtitle) {
+        throw new Error("titleAndSubtitle: requires title and subtitle");
+      }
+      return Object.freeze({
+        type: "titleAndSubtitle",
+        title,
+        subtitle,
+        render() {
+          return `
+          <section class="slide titleAndSubtitle">
+            <h1>${title}</h1>
+            <h2>${subtitle}</h2>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/TitleAndParaSlide.js
+  var TitleAndParaSlide = {
+    type: "titleAndPara",
+    fromJSON(raw) {
+      const title = raw.data?.find((d) => d.name === "title")?.content;
+      const para = raw.data?.find((d) => d.name === "para")?.content;
+      if (!title || !para) {
+        throw new Error("titleAndPara: requires title and para");
+      }
+      return Object.freeze({
+        type: "titleAndPara",
+        title,
+        para,
+        render() {
+          return `
+          <section class="slide titleAndPara">
+            <h1>${title}</h1>
+            <p>${para}</p>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/BulletListSlide.js
+  var BulletListSlide = {
+    type: "bulletList",
+    fromJSON(raw) {
+      const bullets = raw.data?.filter((d) => d.name === "bullet").map((d) => ({ content: d.content }));
+      if (!bullets?.length) {
+        throw new Error("bulletList: requires at least one bullet");
+      }
+      return Object.freeze({
+        type: "bulletList",
+        bullets,
+        render({ visibleCount = bullets.length, activeIndex = null } = {}) {
+          return `
+          <section class="slide bulletList">
+            <ul>
+              ${bullets.map((b, i) => {
+            if (i >= visibleCount) return "";
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `<li class="${cls}">${b.content}</li>`;
+          }).join("")}
+            </ul>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/TwoColumnTextSlide.js
+  var TwoColumnTextSlide = {
+    type: "twoColumnText",
+    fromJSON(raw) {
+      const left = raw.data?.filter((d) => d.name === "left").map((d) => ({ content: d.content }));
+      const right = raw.data?.filter((d) => d.name === "right").map((d) => ({ content: d.content }));
+      if (!left?.length || !right?.length) {
+        throw new Error("twoColumnText: requires left and right columns");
+      }
+      return Object.freeze({
+        type: "twoColumnText",
+        left,
+        right,
+        render({
+          leftVisibleCount = left.length,
+          rightVisibleCount = right.length,
+          leftActiveIndex = null,
+          rightActiveIndex = null
+        } = {}) {
+          return `
+          <section class="slide twoColumnText">
+            <div class="col left">
+              ${left.map((l, i) => {
+            if (i >= leftVisibleCount) return "";
+            const cls = i === leftActiveIndex ? "is-active" : i < leftActiveIndex ? "is-dim" : "";
+            return `<div class="${cls}">${l.content}</div>`;
+          }).join("")}
+            </div>
+            <div class="col right">
+              ${right.map((r, i) => {
+            if (i >= rightVisibleCount) return "";
+            const cls = i === rightActiveIndex ? "is-active" : i < rightActiveIndex ? "is-dim" : "";
+            return `<div class="${cls}">${r.content}</div>`;
+          }).join("")}
+            </div>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/ImageSlide.js
+  var ImageSlide = {
+    type: "imageSlide",
+    fromJSON(raw) {
+      const src = raw.data?.find((d) => d.name === "image")?.content;
+      if (!src) throw new Error("imageSlide: image required");
+      return Object.freeze({
+        type: "imageSlide",
+        src,
+        render() {
+          return `
+          <section class="slide imageSlide">
+            <img src="${src}" alt="" />
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/FillImageSlide.js
+  var FillImageSlide = {
+    type: "fillImage",
+    fromJSON(raw) {
+      const image = raw.data?.find((d) => d.name === "image")?.content;
+      if (!image) throw new Error("fillImage: image required");
+      return Object.freeze({
+        type: "fillImage",
+        image,
+        render() {
+          return `
+          <section class="slide fillImage">
+            <img src="${image}" alt="" />
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/ImageWithTitleSlide.js
+  var ImageWithTitleSlide = {
+    type: "imageWithTitle",
+    fromJSON(raw) {
+      const src = raw.data?.find((d) => d.name === "image")?.content;
+      const title = raw.data?.find((d) => d.name === "title")?.content;
+      if (!src || !title) {
+        throw new Error("imageWithTitle: image and title required");
+      }
+      return Object.freeze({
+        type: "imageWithTitle",
+        src,
+        title,
+        render() {
+          return `
+          <section class="slide imageWithTitle">
+            <img src="${src}" alt="" />
+            <h1>${title}</h1>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/ImageWithCaptionSlide.js
+  var ImageWithCaptionSlide = {
+    type: "imageWithCaption",
+    fromJSON(raw) {
+      const src = raw.data?.find((d) => d.name === "image")?.content;
+      const caption = raw.data?.find((d) => d.name === "caption")?.content;
+      if (!src || !caption) {
+        throw new Error("imageWithCaption: image and caption required");
+      }
+      return Object.freeze({
+        type: "imageWithCaption",
+        src,
+        caption,
+        render() {
+          return `
+          <figure class="slide imageWithCaption">
+            <img src="${src}" alt="" />
+            <figcaption>${caption}</figcaption>
+          </figure>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/ImageLeftBulletsRightSlide.js
+  var ImageLeftBulletsRightSlide = {
+    type: "imageLeftBulletsRight",
+    fromJSON(raw) {
+      const image = raw.data?.find((d) => d.name === "image")?.content;
+      const bullets = raw.data?.filter((d) => d.name === "bullet").map((d) => ({ content: d.content }));
+      if (!image || !bullets?.length) {
+        throw new Error("imageLeftBulletsRight: image and bullets required");
+      }
+      return Object.freeze({
+        type: "imageLeftBulletsRight",
+        image,
+        bullets,
+        render({ visibleCount = bullets.length, activeIndex = null } = {}) {
+          return `
+          <section class="slide imageLeftBulletsRight">
+            <img src="${image}" alt="" />
+            <ul>
+              ${bullets.map((b, i) => {
+            if (i >= visibleCount) return "";
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `<li class="${cls}">${b.content}</li>`;
+          }).join("")}
+            </ul>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/ImageRightBulletsLeftSlide.js
+  var ImageRightBulletsLeftSlide = {
+    type: "imageRightBulletsLeft",
+    fromJSON(raw) {
+      const image = raw.data?.find((d) => d.name === "image")?.content;
+      const bullets = raw.data?.filter((d) => d.name === "bullet").map((d) => ({ content: d.content }));
+      if (!image || !bullets?.length) {
+        throw new Error("imageRightBulletsLeft: image and bullets required");
+      }
+      return Object.freeze({
+        type: "imageRightBulletsLeft",
+        image,
+        bullets,
+        render({ visibleCount = bullets.length, activeIndex = null } = {}) {
+          return `
+          <section class="slide imageRightBulletsLeft">
+            <ul>
+              ${bullets.map((b, i) => {
+            if (i >= visibleCount) return "";
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `<li class="${cls}">${b.content}</li>`;
+          }).join("")}
+            </ul>
+            <img src="${image}" alt="" />
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/TableSlide.js
+  var TableSlide = {
+    type: "table",
+    fromJSON(raw) {
+      const rows = raw.data?.filter((d) => d.name === "row").map((d) => ({ cells: d.content }));
+      if (!rows?.length) {
+        throw new Error("table: requires at least one row");
+      }
+      return Object.freeze({
+        type: "table",
+        rows,
+        render({ visibleCount = rows.length, activeIndex = null } = {}) {
+          return `
+          <table class="slide table">
+            ${rows.map((row, i) => {
+            if (i >= visibleCount) return "";
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `
+                <tr class="${cls}">
+                  ${row.cells.map((c) => `<td>${c}</td>`).join("")}
+                </tr>
+              `;
+          }).join("")}
+          </table>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/StatisticSlide.js
+  var StatisticSlide = {
+    type: "statistic",
+    fromJSON(raw) {
+      const label = raw.data?.find((d) => d.name === "label")?.content;
+      const value = raw.data?.find((d) => d.name === "value")?.content;
+      if (!label || value === void 0) {
+        throw new Error("statistic: requires label and value");
+      }
+      return Object.freeze({
+        type: "statistic",
+        label,
+        value,
+        render() {
+          return `
+          <section class="slide statistic">
+            <div class="stat-value">${value}</div>
+            <div class="stat-label">${label}</div>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/BigNumberSlide.js
+  var BigNumberSlide = {
+    type: "bigNumber",
+    fromJSON(raw) {
+      const value = raw.data?.find((d) => d.name === "number")?.content;
+      const label = raw.data?.find((d) => d.name === "label")?.content;
+      if (!value) throw new Error("bigNumber: number required");
+      return Object.freeze({
+        type: "bigNumber",
+        value,
+        label,
+        render() {
+          return `
+          <section class="slide bigNumber">
+            <div class="number">${value}</div>
+            ${label ? `<div class="label">${label}</div>` : ""}
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/BarChartSlide.js
+  var BarChartSlide = {
+    type: "barChart",
+    fromJSON(raw) {
+      const bars = raw.data?.filter((d) => d.name === "bar").map((d) => ({
+        label: d.content.label,
+        value: d.content.value
+      }));
+      if (!bars?.length) {
+        throw new Error("barChart: requires at least one bar");
+      }
+      return Object.freeze({
+        type: "barChart",
+        bars,
+        render({ visibleCount = bars.length, activeIndex = null } = {}) {
+          return `
+          <section class="slide barChart">
+            <ul class="bars">
+              ${bars.map((b, i) => {
+            if (i >= visibleCount) return "";
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `
+                  <li class="bar ${cls}">
+                    <span class="bar-label">${b.label}</span>
+                    <span class="bar-value">${b.value}</span>
+                  </li>
+                `;
+          }).join("")}
+            </ul>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/DonutChartSlide.js
+  var DonutChartSlide = {
+    type: "donutChart",
+    fromJSON(raw) {
+      const segments = raw.data?.filter((d) => d.name === "segment").map((d) => ({
+        label: d.content.label,
+        value: d.content.value
+      }));
+      if (!segments?.length) {
+        throw new Error("donutChart: requires at least one segment");
+      }
+      return Object.freeze({
+        type: "donutChart",
+        segments,
+        render({ visibleCount = segments.length, activeIndex = null } = {}) {
+          return `
+          <section class="slide donutChart">
+            <ul>
+              ${segments.map((s, i) => {
+            if (i >= visibleCount) return "";
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `<li class="${cls}">${s.label}: ${s.value}</li>`;
+          }).join("")}
+            </ul>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/QuoteSlide.js
+  var QuoteSlide = {
+    type: "quoteSlide",
+    fromJSON(raw) {
+      const text = raw.data?.find((d) => d.name === "quote")?.content;
+      const author = raw.data?.find((d) => d.name === "author")?.content;
+      if (!text) throw new Error("quoteSlide: quote required");
+      return Object.freeze({
+        type: "quoteSlide",
+        text,
+        author,
+        render() {
+          return `
+          <blockquote class="slide quoteSlide">
+            <p>${text}</p>
+            ${author ? `<footer>${author}</footer>` : ""}
+          </blockquote>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/QuoteWithImageSlide.js
+  var QuoteWithImageSlide = {
+    type: "quoteWithImage",
+    fromJSON(raw) {
+      const quote = raw.data?.find((d) => d.name === "quote")?.content;
+      const image = raw.data?.find((d) => d.name === "image")?.content;
+      const author = raw.data?.find((d) => d.name === "author")?.content;
+      if (!quote || !image) {
+        throw new Error("quoteWithImage: quote and image required");
+      }
+      return Object.freeze({
+        type: "quoteWithImage",
+        quote,
+        image,
+        author,
+        render() {
+          return `
+          <section class="slide quoteWithImage">
+            <img src="${image}" alt="" />
+            <blockquote>
+              <p>${quote}</p>
+              ${author ? `<footer>${author}</footer>` : ""}
+            </blockquote>
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/CornerWordsSlide.js
+  var CornerWordsSlide = {
+    type: "cornerWordsSlide",
+    fromJSON(raw) {
+      const words = raw.data?.filter((d) => d.name === "word").map((d) => ({ content: d.content }));
+      if (!words?.length) {
+        throw new Error("cornerWordsSlide: requires at least one word");
+      }
+      return Object.freeze({
+        type: "cornerWordsSlide",
+        words,
+        render({ visibleCount = words.length } = {}) {
+          return `
+          <section class="slide cornerWordsSlide">
+            ${words.map((w, i) => {
+            if (i >= visibleCount) return "";
+            return `<span class="corner-word corner-${i + 1}">${w.content}</span>`;
+          }).join("")}
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/ContactSlide.js
+  var ContactSlide = {
+    type: "contactSlide",
+    fromJSON(raw) {
+      const items = raw.data?.map((d) => ({ content: d.content }));
+      if (!items?.length) {
+        throw new Error("contactSlide: content required");
+      }
+      return Object.freeze({
+        type: "contactSlide",
+        items,
+        render() {
+          return `
+          <section class="slide contactSlide">
+            ${items.map((i) => `<div>${i.content}</div>`).join("")}
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/EqSlide.js
+  var EqSlide = {
+    type: "eq",
+    fromJSON(raw) {
+      if (!Array.isArray(raw.data)) {
+        throw new Error("eq: data must be array");
+      }
+      const lines = raw.data.map((d) => ({
+        content: d.content
+      }));
+      return Object.freeze({
+        type: "eq",
+        lines,
+        render({ activeIndex = null } = {}) {
+          return `
+          <section class="slide eq">
+            ${lines.map((l, i) => {
+            const cls = i === activeIndex ? "is-active" : i < activeIndex ? "is-dim" : "";
+            return `<div class="eq-line ${cls}">${l.content}</div>`;
+          }).join("")}
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/slides/SvgPointerSlide.js
+  var SvgPointerSlide = {
+    type: "svgPointer",
+    fromJSON(raw) {
+      const svg = raw.data?.find((d) => d.name === "svg")?.content;
+      if (!svg) throw new Error("svgPointer: svg required");
+      return Object.freeze({
+        type: "svgPointer",
+        svg,
+        render() {
+          return `
+          <section class="slide svgPointer">
+            ${svg}
+          </section>
+        `;
+        }
+      });
+    }
+  };
+
+  // node_modules/taleem-slides/src/SlideTemplates.js
+  var SlideTemplates = {
+    titleSlide: TitleSlide,
+    titleAndSubtitle: TitleAndSubtitleSlide,
+    titleAndPara: TitleAndParaSlide,
+    bulletList: BulletListSlide,
+    twoColumnText: TwoColumnTextSlide,
+    imageSlide: ImageSlide,
+    fillImage: FillImageSlide,
+    imageWithTitle: ImageWithTitleSlide,
+    imageWithCaption: ImageWithCaptionSlide,
+    imageLeftBulletsRight: ImageLeftBulletsRightSlide,
+    imageRightBulletsLeft: ImageRightBulletsLeftSlide,
+    table: TableSlide,
+    statistic: StatisticSlide,
+    bigNumber: BigNumberSlide,
+    barChart: BarChartSlide,
+    donutChart: DonutChartSlide,
+    quoteSlide: QuoteSlide,
+    quoteWithImage: QuoteWithImageSlide,
+    cornerWordsSlide: CornerWordsSlide,
+    contactSlide: ContactSlide,
+    eq: EqSlide,
+    svgPointer: SvgPointerSlide
+  };
+
+  // node_modules/taleem-slides/src/getSlideTemplate.js
+  function getSlideTemplate(type) {
+    const template = SlideTemplates[type];
+    if (!template) {
+      throw new Error(`Unknown slide template type "${type}"`);
+    }
+    return template;
+  }
+
   // src/core/stage.js
   function createStage(mount) {
     if (!mount) throw new Error("taleem-player: mount is required");
@@ -14273,10 +14892,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
   }
 
   // src/core/player.js
-  function createTaleemPlayer({ mount, deck, renderer }) {
-    if (!renderer || typeof renderer.render !== "function") {
-      throw new Error("taleem-player: renderer with render() required");
-    }
+  function createTaleemPlayer({ mount, deck }) {
     const result = validateDeckV1(deck);
     if (!result.ok) {
       throw new Error(
@@ -14285,6 +14901,7 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
     }
     const stage = createStage(mount);
     let lastSlide = null;
+    let lastRenderedKey = null;
     function getSlideAtTime(deck2, time3) {
       const slides = deck2.deck;
       for (let i = slides.length - 1; i >= 0; i--) {
@@ -14293,22 +14910,46 @@ Set the \`cycles\` parameter to \`"ref"\` to resolve cyclical schemas with defs.
       }
       return null;
     }
+    function computeRenderState(slide, time3) {
+      if (!Array.isArray(slide.data)) {
+        return {};
+      }
+      let visibleCount = 0;
+      let activeIndex = -1;
+      slide.data.forEach((item, index) => {
+        if (typeof item.showAt === "number" && time3 >= item.showAt) {
+          visibleCount++;
+          activeIndex = index;
+        }
+      });
+      return {
+        visibleCount,
+        activeIndex
+      };
+    }
     function renderAt(time3) {
       const slide = getSlideAtTime(deck, time3);
       if (!slide) {
         stage.clear();
         lastSlide = null;
+        lastRenderedKey = null;
         return;
       }
+      const renderState = computeRenderState(slide, time3);
+      const renderKey = `${slide.start}-${renderState.visibleCount}-${renderState.activeIndex}`;
       if (slide !== lastSlide) {
         stage.clear();
         lastSlide = slide;
+        lastRenderedKey = null;
       }
-      renderer.render({
-        mount: stage.el,
-        slide,
-        time: time3
-      });
+      if (renderKey === lastRenderedKey) {
+        return;
+      }
+      const Template = getSlideTemplate(slide.type);
+      const slideInstance = Template.fromJSON(slide);
+      const html = slideInstance.render(renderState);
+      stage.el.innerHTML = html;
+      lastRenderedKey = renderKey;
     }
     function destroy() {
       stage.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taleem-player",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/taleem-player.umd.js",
   "module": "./dist/taleem-player.esm.js",
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "taleem-core": "^1.2.0",
+    "taleem-slides": "^0.5.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {