taleem-player 0.6.0-rc.1 → 0.7.0-rc

package/README.md

@@ -1,215 +1,263 @@
 
-# 📦 taleem-player
+# Taleem Player
 
-**taleem-player** is a **time-driven player** for **Taleem slides**.
 
-It plays slide decks rendered by `taleem-slides`, using **time** instead of index.
+<img src="https://raw.githubusercontent.com/bilza2023/taleem-player/main/docs/images/taleem.webp" alt="Taleem Player — JSON to Web Presentations" />
 
-It is designed for:
+**Taleem Player** is a JavaScript library that converts **JSON slide data** into **web-based presentations**.
 
-* narrated lessons
-* timed presentations
-* audio / video–synced slides
-* external playback control
-
-At its core, `taleem-player` does one thing:
-
-> **Given a player-ready deck and a time value, render the correct Taleem slide.**
-
-It does **not** author decks.
-It does **not** fix data.
-It does **not** manage time.
+It provides multiple **modes** to display the same JSON presentation in different ways on the web.
 
 ---
+###### Work in progress. Expect minor bugs, but no API breakages.
 
-## 🌐 Live Docs, Demo & Reference (START HERE)
+Demo and Documentation
 
-👉 **[https://bilza2023.github.io/taleem](https://bilza2023.github.io/taleem)**
+See Taleem Player in action:
 
-This website is the **official reference** for the Taleem system.
+👉 https://bilza2023.github.io/taleem/
 
-It shows:
+This live demo lets you explore:
 
-* all supported slide types
-* real visual behavior
-* actual rendered output
-* examples and demos
+Browser Mode — instant, index-based slide rendering
 
-If anything in this README feels unclear:
+Player Mode — time-driven, progressive presentations
 
-> **The website is the final authority.**
+Real Taleem slide JSON used in production
 
-The README explains *rules*.
-The website shows *results*.
+Shared CSS system powering all display modes
 
+No screenshots. No mock data.
+What you see is the real engine running in the browser.
 ---
 
-## Core idea
+## What it does
+
+* Takes **Taleem slide JSON**
+* Renders it as a **web presentation**
+* Supports **multiple display modes**
+* Ships **ready-to-use CSS**
+* Includes **utilities** for real-world usage
 
-Slides are not just ordered — they are placed on a **timeline**.
+---
 
-`taleem-player` treats a deck as time intervals:
+## Installation
 
-```text
-[start ─────────── end)
+```bash
+npm install taleem-player
 ```
 
-At any given moment:
+---
 
-* one slide may be active
-* or no slide (before or after the timeline)
+## Display Modes
 
-The player’s job is simple:
+### 1. Browser Mode
 
-> **time → slide → render**
+**Index-based slide viewer**.
 
----
+Use this when you want:
 
-## What this library does
+* manual navigation
+* previews
+* galleries
+* syllabus / editor views
 
-`taleem-player`:
+#### API
 
-* Accepts a **player-ready deck-v1**
-* Assumes **valid timing**
-* Owns a single DOM stage
-* Resolves which slide is active at a given time
-* Renders slides using **taleem-slides**
-* Exposes a **minimal API**
+```js
+import { createTaleemBrowser } from "taleem-player";
 
-Public API:
+const browser = createTaleemBrowser({
+  mount: "#app",
+  deck
+});
 
-```js
-player.renderAt(time)
-player.destroy()
+browser.render(0);      // render slide by index
+browser.getTotal();    // total number of slides
 ```
 
-Time always comes from **outside**.
+Characteristics:
+
+* slide index driven
+* no timing
+* deterministic rendering
+* same slide JSON as other modes
 
 ---
 
-## What this library intentionally does NOT do
+### 2. Player Mode
 
-`taleem-player` does **not**:
+**Time-based slide player**.
 
-* validate deck schemas
-* auto-generate timings
-* fix broken decks
-* define slide layouts
-* ship CSS
-* manage audio or narration
-* play / pause / autoplay
-* own clocks or intervals
+Use this when you want:
 
-If a deck is wrong, the player may break.
-This is intentional.
+* narrated lessons
+* video / audio sync
+* timed presentations
 
----
+#### API
+
+```js
+import { createTaleemPlayer } from "taleem-player";
+
+const player = createTaleemPlayer({
+  mount: "#app",
+  deckDemo and Documentation
+
+Live demo and documentation are available here:
+
+👉 https://bilza2023.github.io/taleem/
+
+The demo showcases:
 
-## Strict timing model (important)
+browser mode rendering
 
-> **NOTE: taleem-player assumes a *player-ready deck*.**
+player mode rendering
 
-Every slide **must** define:
+real Taleem slide JSON
 
-```json
-{
-  "start": number,
-  "end": number
-}
+shared CSS across modes
+});
+
+player.renderAt(12.5); // render slide at time (seconds)
+player.destroy();
 ```
 
-Rules:
+Characteristics:
+
+* time driven
+* external clock control
+* no play / pause logic
+* one active slide at a time
 
-* time unit is **seconds**
-* fractional seconds are allowed (e.g. `3.1`, `3.75`)
-* `end` must be greater than `start`
-* timings must be monotonic
-* no auto-injection
-* no browser forgiveness
+---
+## Browser Mode vs Player Mode
+
+Both modes render the same JSON presentation, but they serve very different purposes.
 
-Deck preparation happens **before** the player
-(e.g. via tooling like `assignMockTimings`).
+| Feature | Browser Mode | Player Mode |
+|-------|-------------|-------------|
+| Rendering model | Index-based | Time-based |
+| Navigation | Manual (by slide index) | Progressive (by time) |
+| Timing required | No | Yes (required) |
+| Rendering behavior | One slide at a time | Slides change over time |
+| Control source | Application-driven | External clock / media |
+| Best suited for | Previews, galleries, editors | Narration, video, audio sync |
 
 ---
 
-## Rendering model
+### Browser Mode
 
-`taleem-player` renders **Taleem slides**.
+Use Browser Mode when you want direct access to slides.
 
-Internally it:
+**Characteristics**
+- Index-based rendering  
+- No timing data required  
+- Deterministic output  
 
-1. Finds the active slide for the given time
-2. Computes minimal render state
-3. Uses `taleem-slides` to generate HTML
-4. Injects HTML into a single stage
+**Ideal for**
+- previews  
+- galleries  
+- editors  
+- syllabus pages  
 
-Rendering is **deterministic** and **stateless**.
+
+⚠️ Important:
+In Player Mode, the user must provide valid and ordered timings (start, end).
+The library does not auto-fix or guess timings.
 
 ---
 
-## Relationship to other Taleem libraries
+## Utilities
 
-`taleem-player` is part of a small, focused system.
+Taleem Player includes small helper utilities for preparing decks.
 
-### **taleem-core**
+### assignMockTimings
 
-Defines schemas and canonical (golden) decks.
+Convert a non-timed deck into a player-ready deck.
 
-### **taleem-slides**
+```js
+import { assignMockTimings } from "taleem-player";
 
-Renders slide JSON into HTML + CSS.
+const timedDeck = assignMockTimings(deck, 5);
+```
 
-### **taleem-browser**
+---
 
-Index-based slide viewer (no time).
+### resolveAssetPaths
 
-### **Apps / demos**
+Resolve image paths for deployment.
 
-Own time, UI, controls, audio, narration.
+```js
+import { resolveAssetPaths } from "taleem-player";
 
-Each library does **one job**.
-They are composed, not mixed.
+resolveAssetPaths(deck, "/images/");
+```
 
 ---
 
-## Typical usage
+### resolveBackground
+
+Normalize and resolve background configuration.
 
 ```js
-import { createTaleemPlayer } from "taleem-player";
+import { resolveBackground } from "taleem-player";
 
-const player = createTaleemPlayer({
-  mount: "#app",
-  deck // must be player-ready
-});
+resolveBackground(deck, "/images/");
+```
 
-// external clock
-player.renderAt(12.5);
+---
+
+## CSS
+
+Taleem Player ships with built-in styles.
+
+### Base styles
+
+```js
+import "taleem-player/css";
+```
+
+### Themes
+
+```js
+import "taleem-player/css/dark";
+import "taleem-player/css/light";
+import "taleem-player/css/paper";
 ```
 
-`taleem-player` never controls time.
-Time always belongs to the app.
+CSS controls layout, visibility, and visual behavior.
+Modes share the same CSS.
 
 ---
 
-## Design philosophy (locked)
+## Input format
 
-* Time is external
-* Slides are deterministic
-* Seconds are enough
-* Libraries stay small
-* Control lives at the top
+Taleem Player does **not** define slide structure.
 
-> **The player decides *what* to show.**
-> **The app decides *when* and *why*.**
+It renders JSON produced for **taleem-slides**.
+
+* Player Mode requires slides with `start` / `end`
+* Browser Mode only needs ordered slides
 
 ---
 
-## Project status
+## What Taleem Player does NOT do
+
+* create slides
+* edit JSON
+* validate schemas
+* manage time or playback
+* handle audio or narration
+* provide UI controls
+
+Those belong to the **application**, not the library.
+
+---
 
-**Release Candidate (API locked).**
+## Status
 
-Only bug fixes should follow.
-No new concepts belong here.
+**Release Candidate (API stable)**
 
 ---
 

package/dist/css/taleem.css

@@ -0,0 +1,347 @@
+
+/* =====================================================
+   TALEEM — Single Public Stylesheet
+
+  /* -------------------------------
+     Global Page Reset
+     ------------------------------- */
+  
+     html,body {
+      height: 100%;
+       overflow: hidden;
+      margin: 0;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      background: var(--backgroundColor, #0b1220);
+      color: var(--primaryColor, #e6e9ff);
+    }
+    
+    #app {
+      position: relative;
+      width: 100vw;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+    
+    /* -------------------------------
+       Browser / Player Layers
+       ------------------------------- */
+    .taleem-browser-bg {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      background-size: cover;
+      background-position: center;
+    }
+    
+    .taleem-browser-slide {
+      position: relative;
+      z-index: 1;
+    }
+    
+    /* -------------------------------
+       Base Slide Grammar
+       ------------------------------- */
+    .slide {
+      height: 100vh;
+      box-sizing: border-box;
+    
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    
+      padding: 64px 80px;
+      gap: 32px;
+    
+      overflow: hidden;
+      background: transparent;
+      color: var(--primaryColor, #e6e9ff);
+    
+      font-size: 2.4rem;
+      line-height: 1.6;
+      letter-spacing: 0.01em;
+      text-align: center;
+    }
+    
+    /* -------------------------------
+       Global Image Safety
+       ------------------------------- */
+    .slide img {
+      max-width: 100%;
+      max-height: 100%;
+      height: auto;
+      width: auto;
+      display: block;
+    }
+    
+    /* -------------------------------
+       Headings
+       ------------------------------- */
+    .slide h1 {
+      margin: 0;
+      letter-spacing: -0.015em;
+    }
+    
+    /* -------------------------------
+       Slide Types
+       ------------------------------- */
+    .slide.titleSlide h1 {
+      font-size: 5.6rem;
+      font-weight: 700;
+      line-height: 1.2;
+    }
+    
+    .slide.titleAndSubtitle h1 {
+      font-size: 5.8rem;
+      font-weight: 700;
+    }
+    
+    .slide.titleAndSubtitle h2 {
+      font-size: 3.8rem;
+      font-weight: 400;
+      opacity: 0.8;
+      margin: 0;
+    }
+    
+    .slide.titleAndPara h1 {
+      font-size: 4.8rem;
+      font-weight: 600;
+    }
+    
+    .slide.titleAndPara p {
+      font-size: 3rem;
+      max-width: 70ch;
+      opacity: 0.9;
+      margin: 0;
+    }
+    
+    /* -------------------------------
+       Bullet List
+       ------------------------------- */
+    .slide.bulletList ul {
+      list-style: disc;
+      padding-left: 2rem;
+      margin: 0;
+    }
+    
+    .slide.bulletList li {
+      font-size: 3.6rem;
+      margin-bottom: 1rem;
+      text-align: left;
+      font-weight: 500;
+    }
+    
+    /* -------------------------------
+       Image Variants
+       ------------------------------- */
+    .slide.imageSlide {
+      padding: 0;
+    }
+    
+    .slide.imageSlide img {
+      object-fit: contain;
+    }
+    
+    .slide.imageWithTitle {
+      position: relative;
+      padding: 48px;
+    }
+    
+    .slide.imageWithTitle img {
+      height: calc(100vh - 96px);
+      border-radius: 12px;
+    }
+    
+    .slide.imageWithTitle h1 {
+      position: absolute;
+      bottom: 64px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 4.6rem;
+      background: rgba(0, 0, 0, 0.45);
+      padding: 0.4em 0.8em;
+      border-radius: 6px;
+    }
+    
+    .slide.imageWithCaption {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 32px;
+      height: 100vh;
+      overflow: hidden;
+    }
+    
+    .slide.imageWithCaption img {
+      max-height: 55vh;        /* reduce slightly */
+      object-fit: contain;
+      flex-shrink: 0;
+    }
+    
+    .slide.imageWithCaption p {
+      max-height: 20vh;        /* hard cap text */
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    /* -------------------------------
+   Two Column Text
+   ------------------------------- */
+
+
+   .slide.twoColumnText {
+    flex-direction: row;
+    justify-content: center;   /* center the columns block */
+    align-items: center;
+    gap: 64px;
+  }
+  
+  .slide.twoColumnText > div {
+    flex: 1;
+    max-width: 520px;          /* keeps columns visually centered */
+  }
+  
+
+    /* QUOTE SLIDE */
+    .slide.quoteSlide {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 32px;
+      height: 100vh;
+      overflow: hidden;
+    }
+    
+    .slide.quoteSlide blockquote {
+      max-height: 60vh;
+      overflow: hidden;
+    }
+    
+    .slide.quoteSlide cite {
+      flex-shrink: 0;
+    }
+    
+    /* -------------------------------
+       Quote Slide
+       ------------------------------- */
+    .slide.quoteSlide blockquote {
+      font-size: 3.8rem;
+      font-style: italic;
+      max-width: 60ch;
+    }
+    
+    .slide.quoteSlide cite {
+      font-size: 2.4rem;
+      opacity: 0.75;
+    }
+    
+    /* -------------------------------
+       Big Number
+       ------------------------------- */
+    .slide.bigNumber .number {
+      font-size: 9rem;
+      font-weight: 700;
+    }
+    
+    /* -------------------------------
+       Fill Image (Full Bleed)
+       ------------------------------- */
+    .slide.fillImage {
+      padding: 0;
+      height: 100vh;
+      display: block;
+    }
+    
+    .slide.fillImage img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    /* -------------------------------
+       Demo / Player UI (Optional)
+       ------------------------------- */
+    #timebar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 32px;
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(6px);
+      z-index: 10;
+    }
+    
+
+
+    /* ///////fixes  */
+
+    /* -------------------------------
+   Image + Bullets (Side by Side)
+   ------------------------------- */
+
+.slide.imageRightBulletsLeft,
+.slide.imageLeftBulletsRight {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 64px;
+  text-align: left;
+}
+
+/* image on right */
+.slide.imageRightBulletsLeft img {
+  order: 2;
+}
+/* -------------------------------
+   Table Slide
+   ------------------------------- */
+
+   .slide.table {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  
+    width: 100%;
+    height: 100vh;
+  
+    padding: 64px 80px;
+    box-sizing: border-box;
+  }
+  
+  /* actual table */
+  .slide.table table {
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 1200px;
+  
+    font-size: 2.8rem;
+    line-height: 1.4;
+    text-align: center;
+  
+    color: var(--primaryColor, #e6e9ff);
+  }
+  
+  /* header cells (title row) */
+  .slide.table thead th {
+    font-weight: 700; /* title row bold */
+    padding: 20px 24px;
+  
+    border: 2px solid rgba(255, 255, 255, 0.35);
+  }
+  
+  /* body cells */
+  .slide.table tbody td {
+    padding: 20px 24px;
+  
+    border: 2px solid rgba(255, 255, 255, 0.25);
+  }
+/* hide empty table header row */
+.slide.table thead th:empty {
+  display: none;
+}
+
+.slide.table thead tr:has(th:empty) {
+  display: none;
+}
+  

package/dist/css/themes/dark.css

@@ -0,0 +1,6 @@
+
+:root {
+    --backgroundColor: #081b7a;
+    --primaryColor: #ccd0e4;
+  }
+  

package/dist/css/themes/light.css

@@ -0,0 +1,6 @@
+
+:root {
+    --backgroundColor: #15df1b;
+    --primaryColor: #cbd44b;
+  }
+  

package/dist/css/themes/paper.css

@@ -0,0 +1,6 @@
+
+:root {
+    --backgroundColor: #f8f9fb;
+    --primaryColor: #1a1f36;
+  }
+  

package/dist/taleem-player.esm.js

@@ -274,22 +274,19 @@ var ImageRightBulletsLeftSlide = {
 var TableSlide = {
   type: "table",
   fromJSON(raw) {
-    const headers = raw.data?.find((d) => d.name === "header")?.content;
-    const rows = raw.data?.find((d) => d.name === "row")?.content;
-    if (!headers || !rows?.length) {
-      throw new Error("table: requires headers and at least one row");
+    const rows = raw.data;
+    if (!Array.isArray(rows) || rows.length === 0) {
+      console.warn("Empty table skipped", raw);
+      return null;
     }
     return Object.freeze({
       type: "table",
       render() {
         return `
           <table class="slide table">
-            <thead>
-              <tr>${headers.map((h) => `<th>${h}</th>`).join("")}</tr>
-            </thead>
             <tbody>
               ${rows.map(
-          (r) => `<tr>${r.map((c) => `<td>${c}</td>`).join("")}</tr>`
+          (row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`
         ).join("")}
             </tbody>
           </table>
@@ -593,7 +590,7 @@ function getSlideTemplate(type) {
   return template;
 }
 
-// src/core/stage.js
+// src/engines/player/stage.js
 function createStage(mount) {
   if (!mount) throw new Error("taleem-player: mount is required");
   const root = typeof mount === "string" ? document.querySelector(mount) : mount;
@@ -618,7 +615,7 @@ function createStage(mount) {
   };
 }
 
-// src/core/player.js
+// src/engines/player/player.js
 function createTaleemPlayer({ mount, deck }) {
   const stage = createStage(mount);
   let lastSlide = null;
@@ -680,6 +677,118 @@ function createTaleemPlayer({ mount, deck }) {
     destroy
   };
 }
+
+// src/engines/browser/browser.js
+function createTaleemBrowser({ mount, deck }) {
+  if (!mount) {
+    throw new Error("taleem-browser: mount is required");
+  }
+  if (!deck || !Array.isArray(deck.deck)) {
+    throw new Error("taleem-browser: valid deck-v1 required");
+  }
+  const root = typeof mount === "string" ? document.querySelector(mount) : mount;
+  if (!root) {
+    throw new Error("taleem-browser: mount not found");
+  }
+  root.innerHTML = `
+    <div class="taleem-browser-bg"></div>
+    <div class="taleem-browser-slide"></div>
+  `;
+  const bgEl = root.querySelector(".taleem-browser-bg");
+  const slideEl = root.querySelector(".taleem-browser-slide");
+  applyBackground(bgEl, deck.background);
+  const slides = deck.deck.map((slideJSON, i) => {
+    if (!slideJSON.type) {
+      throw new Error(`taleem-browser: slide ${i} missing type`);
+    }
+    const Template = getSlideTemplate(slideJSON.type);
+    if (!Template) {
+      throw new Error(`taleem-browser: unknown slide type "${slideJSON.type}"`);
+    }
+    return Template.fromJSON(slideJSON);
+  });
+  const total = slides.length;
+  function render(index, renderState = {}) {
+    if (index < 0 || index >= total) return;
+    const slide = slides[index];
+    slideEl.innerHTML = slide.render(renderState);
+  }
+  return {
+    render,
+    getTotal() {
+      return total;
+    }
+  };
+}
+function applyBackground(el, bg = {}) {
+  el.style.position = "absolute";
+  el.style.inset = "0";
+  el.style.zIndex = "0";
+  el.style.backgroundColor = bg.backgroundColor || "#000";
+  el.style.backgroundImage = bg.backgroundImage ? `url(${bg.backgroundImage})` : "none";
+  el.style.backgroundSize = "cover";
+  el.style.backgroundPosition = "center";
+  el.style.opacity = bg.backgroundImageOpacity !== void 0 ? bg.backgroundImageOpacity : 1;
+}
+
+// src/utils/assignMockTimings.js
+function assignMockTimings(goldenDeck, slideDuration = 5) {
+  if (!goldenDeck || !Array.isArray(goldenDeck.deck) || typeof slideDuration !== "number") {
+    throw new Error("assignMockTimings: invalid deck or slideDuration");
+  }
+  let currentTime = 0;
+  const deckWithTimings = {
+    ...goldenDeck,
+    deck: goldenDeck.deck.map((slide) => {
+      const start = currentTime;
+      const end = start + slideDuration;
+      currentTime = end;
+      const data = Array.isArray(slide.data) ? slide.data.map((item) => ({
+        ...item,
+        showAt: start + (typeof item.showAt === "number" ? item.showAt : 0)
+      })) : slide.data;
+      return {
+        ...slide,
+        start,
+        end,
+        data
+      };
+    })
+  };
+  return deckWithTimings;
+}
+
+// src/utils/resolveAssetPaths.js
+function resolveAssetPaths(deck, IMG_BASE) {
+  if (deck.background?.backgroundImage && typeof deck.background.backgroundImage === "string") {
+    deck.background.backgroundImage = IMG_BASE + deck.background.backgroundImage.split("/").pop();
+  }
+  deck.deck.forEach((slide) => {
+    slide.data?.forEach((item) => {
+      if (item.name === "image" && typeof item.content === "string") {
+        item.content = IMG_BASE + item.content.split("/").pop();
+      }
+    });
+  });
+  return deck;
+}
+
+// src/utils/resolveBackground.js
+function resolveBackground2(deck, ASSET_BASE) {
+  if (!deck || !deck.background) return deck;
+  const bg = deck.background;
+  if (typeof bg.backgroundImage === "string" && bg.backgroundImage.length > 0) {
+    bg.backgroundImage = ASSET_BASE + bg.backgroundImage.split("/").pop();
+  }
+  if (bg.backgroundImageOpacity === void 0) {
+    bg.backgroundImageOpacity = 1;
+  }
+  return deck;
+}
 export {
-  createTaleemPlayer
+  assignMockTimings,
+  createTaleemBrowser,
+  createTaleemPlayer,
+  resolveAssetPaths,
+  resolveBackground2 as resolveBackground
 };

package/dist/taleem-player.umd.js

@@ -20,7 +20,11 @@ var TaleemPlayer = (() => {
   // src/index.js
   var index_exports = {};
   __export(index_exports, {
-    createTaleemPlayer: () => createTaleemPlayer
+    assignMockTimings: () => assignMockTimings,
+    createTaleemBrowser: () => createTaleemBrowser,
+    createTaleemPlayer: () => createTaleemPlayer,
+    resolveAssetPaths: () => resolveAssetPaths,
+    resolveBackground: () => resolveBackground2
   });
 
   // node_modules/taleem-slides/src/slides/TitleSlide.js
@@ -299,22 +303,19 @@ var TaleemPlayer = (() => {
   var TableSlide = {
     type: "table",
     fromJSON(raw) {
-      const headers = raw.data?.find((d) => d.name === "header")?.content;
-      const rows = raw.data?.find((d) => d.name === "row")?.content;
-      if (!headers || !rows?.length) {
-        throw new Error("table: requires headers and at least one row");
+      const rows = raw.data;
+      if (!Array.isArray(rows) || rows.length === 0) {
+        console.warn("Empty table skipped", raw);
+        return null;
       }
       return Object.freeze({
         type: "table",
         render() {
           return `
           <table class="slide table">
-            <thead>
-              <tr>${headers.map((h) => `<th>${h}</th>`).join("")}</tr>
-            </thead>
             <tbody>
               ${rows.map(
-            (r) => `<tr>${r.map((c) => `<td>${c}</td>`).join("")}</tr>`
+            (row) => `<tr>${row.map((cell) => `<td>${cell}</td>`).join("")}</tr>`
           ).join("")}
             </tbody>
           </table>
@@ -618,7 +619,7 @@ var TaleemPlayer = (() => {
     return template;
   }
 
-  // src/core/stage.js
+  // src/engines/player/stage.js
   function createStage(mount) {
     if (!mount) throw new Error("taleem-player: mount is required");
     const root = typeof mount === "string" ? document.querySelector(mount) : mount;
@@ -643,7 +644,7 @@ var TaleemPlayer = (() => {
     };
   }
 
-  // src/core/player.js
+  // src/engines/player/player.js
   function createTaleemPlayer({ mount, deck }) {
     const stage = createStage(mount);
     let lastSlide = null;
@@ -705,5 +706,113 @@ var TaleemPlayer = (() => {
       destroy
     };
   }
+
+  // src/engines/browser/browser.js
+  function createTaleemBrowser({ mount, deck }) {
+    if (!mount) {
+      throw new Error("taleem-browser: mount is required");
+    }
+    if (!deck || !Array.isArray(deck.deck)) {
+      throw new Error("taleem-browser: valid deck-v1 required");
+    }
+    const root = typeof mount === "string" ? document.querySelector(mount) : mount;
+    if (!root) {
+      throw new Error("taleem-browser: mount not found");
+    }
+    root.innerHTML = `
+    <div class="taleem-browser-bg"></div>
+    <div class="taleem-browser-slide"></div>
+  `;
+    const bgEl = root.querySelector(".taleem-browser-bg");
+    const slideEl = root.querySelector(".taleem-browser-slide");
+    applyBackground(bgEl, deck.background);
+    const slides = deck.deck.map((slideJSON, i) => {
+      if (!slideJSON.type) {
+        throw new Error(`taleem-browser: slide ${i} missing type`);
+      }
+      const Template = getSlideTemplate(slideJSON.type);
+      if (!Template) {
+        throw new Error(`taleem-browser: unknown slide type "${slideJSON.type}"`);
+      }
+      return Template.fromJSON(slideJSON);
+    });
+    const total = slides.length;
+    function render(index, renderState = {}) {
+      if (index < 0 || index >= total) return;
+      const slide = slides[index];
+      slideEl.innerHTML = slide.render(renderState);
+    }
+    return {
+      render,
+      getTotal() {
+        return total;
+      }
+    };
+  }
+  function applyBackground(el, bg = {}) {
+    el.style.position = "absolute";
+    el.style.inset = "0";
+    el.style.zIndex = "0";
+    el.style.backgroundColor = bg.backgroundColor || "#000";
+    el.style.backgroundImage = bg.backgroundImage ? `url(${bg.backgroundImage})` : "none";
+    el.style.backgroundSize = "cover";
+    el.style.backgroundPosition = "center";
+    el.style.opacity = bg.backgroundImageOpacity !== void 0 ? bg.backgroundImageOpacity : 1;
+  }
+
+  // src/utils/assignMockTimings.js
+  function assignMockTimings(goldenDeck, slideDuration = 5) {
+    if (!goldenDeck || !Array.isArray(goldenDeck.deck) || typeof slideDuration !== "number") {
+      throw new Error("assignMockTimings: invalid deck or slideDuration");
+    }
+    let currentTime = 0;
+    const deckWithTimings = {
+      ...goldenDeck,
+      deck: goldenDeck.deck.map((slide) => {
+        const start = currentTime;
+        const end = start + slideDuration;
+        currentTime = end;
+        const data = Array.isArray(slide.data) ? slide.data.map((item) => ({
+          ...item,
+          showAt: start + (typeof item.showAt === "number" ? item.showAt : 0)
+        })) : slide.data;
+        return {
+          ...slide,
+          start,
+          end,
+          data
+        };
+      })
+    };
+    return deckWithTimings;
+  }
+
+  // src/utils/resolveAssetPaths.js
+  function resolveAssetPaths(deck, IMG_BASE) {
+    if (deck.background?.backgroundImage && typeof deck.background.backgroundImage === "string") {
+      deck.background.backgroundImage = IMG_BASE + deck.background.backgroundImage.split("/").pop();
+    }
+    deck.deck.forEach((slide) => {
+      slide.data?.forEach((item) => {
+        if (item.name === "image" && typeof item.content === "string") {
+          item.content = IMG_BASE + item.content.split("/").pop();
+        }
+      });
+    });
+    return deck;
+  }
+
+  // src/utils/resolveBackground.js
+  function resolveBackground2(deck, ASSET_BASE) {
+    if (!deck || !deck.background) return deck;
+    const bg = deck.background;
+    if (typeof bg.backgroundImage === "string" && bg.backgroundImage.length > 0) {
+      bg.backgroundImage = ASSET_BASE + bg.backgroundImage.split("/").pop();
+    }
+    if (bg.backgroundImageOpacity === void 0) {
+      bg.backgroundImageOpacity = 1;
+    }
+    return deck;
+  }
   return __toCommonJS(index_exports);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taleem-player",
-  "version": "0.6.0-rc.1",
+  "version": "0.7.0-rc",
   "type": "module",
   "main": "./dist/taleem-player.umd.js",
   "module": "./dist/taleem-player.esm.js",
@@ -8,22 +8,26 @@
     ".": {
       "import": "./dist/taleem-player.esm.js",
       "require": "./dist/taleem-player.umd.js"
-    }
+    },
+    "./css": "./dist/css/taleem.css",
+    "./css/dark": "./dist/css/themes/dark.css",
+    "./css/light": "./dist/css/themes/light.css",
+    "./css/paper": "./dist/css/themes/paper.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "node ./scripts/build.js",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
+    "test": "vitest run"
   },
   "dependencies": {
-    "taleem-core": "^1.3.2",
-    "taleem-slides": "^0.6.0"
+    "taleem-core": "^1.4.3",
+    "taleem-slides": "^0.6.2-rc.6"
   },
   "devDependencies": {
     "esbuild": "^0.27.2",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0"
+    "jsdom": "^22.1.0",
+    "vitest": "^3.2.4"
   }
 }