taleem-player 1.0.1 → 1.0.3

package/README.md

@@ -1,4 +1,3 @@
-
 # Taleem Player
 
 <img src="./docs/images/taleem.webp"
@@ -7,7 +6,7 @@
 
 **Taleem Player** converts **Taleem JSON slide data** into **web-based presentations**.
 
-It renders the *same taleem JSON* in multiple ways using different display modes.
+It renders the _same taleem JSON_ in multiple ways using different display modes.
 
 > **Stable 1.0 — API frozen.**  
 > Internal improvements may continue without breaking public contracts.
@@ -19,6 +18,7 @@ It renders the *same taleem JSON* in multiple ways using different display modes
 👉 https://bilza2023.github.io/taleem/
 
 The live demo shows:
+
 - Browser Mode (index-based rendering)
 - Player Mode (time-based rendering)
 - Real production Taleem JSON
@@ -33,7 +33,7 @@ What you see is the real engine running in the browser.**
 
 ```bash
 npm install taleem-player
-````
+```
 
 ---
 
@@ -48,7 +48,7 @@ import { createTaleemBrowser } from "taleem-player";
 
 const browser = createTaleemBrowser({
   mount: "#app",
-  deck
+  deck,
 });
 
 browser.render(0);
@@ -57,10 +57,10 @@ browser.getTotal();
 
 **Ideal for**
 
-* previews
-* galleries
-* editors
-* syllabus pages
+- previews
+- galleries
+- editors
+- syllabus pages
 
 ---
 
@@ -77,9 +77,9 @@ player.renderAt(12.5);
 
 **Ideal for**
 
-* narrated lessons
-* video / audio sync
-* recorded presentations
+- narrated lessons
+- video / audio sync
+- recorded presentations
 
 ---
 
@@ -100,7 +100,6 @@ player.renderAt(12.5);
 
 ## Utilities (Runtime-safe)
 
-
 These **Utilities (Runtime-safe)** are exported :
 
 ```js
@@ -108,14 +107,14 @@ import {
   assignMockTimings,
   resolveAssetPaths,
   resolveBackground,
-  getDeckEndTime
+  getDeckEndTime,
 } from "taleem-player";
 ```
 
-* `assignMockTimings(deck, seconds)`
-* `resolveAssetPaths(deck, basePath)`
-* `resolveBackground(deck, basePath)`
-* `getDeckEndTime(deck)`
+- `assignMockTimings(deck, seconds)`
+- `resolveAssetPaths(deck, basePath)`
+- `resolveBackground(deck, basePath)`
+- `getDeckEndTime(deck)`
 
 These helpers prepare decks for real usage and runtime playback.
 
@@ -137,11 +136,11 @@ All modes share the same styling system.
 
 ## What Taleem Player does NOT do
 
-* create slides
-* edit JSON
-* manage clocks or media playback
-* handle audio or narration
-* auto-validate or repair data
+- create slides
+- edit JSON
+- manage clocks or media playback
+- handle audio or narration
+- auto-validate or repair data
 
 Those responsibilities belong to the **application layer**.
 
@@ -151,9 +150,13 @@ Those responsibilities belong to the **application layer**.
 
 **Stable — Version 1.0**
 
+The `eq` slide type is **experimental**:
+- it is implemented but intentionally limited
+- it should not be relied on for production math rendering
+- its behavior may evolve without breaking the core player API
+
 ---
 
 ## License
 
 MIT
-

package/dist/css/taleem.css

@@ -344,4 +344,67 @@
 .slide.table thead tr:has(th:empty) {
   display: none;
 }
+  
+
+/* -------------------------------
+   Corner Words Slide (4 Quadrants)
+   ------------------------------- */
+
+   .slide.cornerWordsSlide {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    padding: 0;
+  }
+  
+  /* base card */
+  .cornerWordsSlide .corner-card {
+    position: absolute;
+    width: 45%;
+    height: 45%;
+  
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  
+    font-size: 4.2rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-align: center;
+  }
+  
+  /* emoji / icon */
+  .cornerWordsSlide .corner-card .icon {
+    font-size: 5.2rem;
+    line-height: 1;
+  }
+  
+  /* label text */
+  .cornerWordsSlide .corner-card .label {
+    font-size: 3.6rem;
+    font-weight: 600;
+  }
+  
+  /* quadrants */
+  .cornerWordsSlide .corner-1 {
+    top: 0;
+    left: 0;
+  }
+  
+  .cornerWordsSlide .corner-2 {
+    top: 0;
+    right: 0;
+  }
+  
+  .cornerWordsSlide .corner-3 {
+    bottom: 0;
+    left: 0;
+  }
+  
+  .cornerWordsSlide .corner-4 {
+    bottom: 0;
+    right: 0;
+  }
   

package/dist/taleem-player.esm.js

@@ -532,23 +532,47 @@ var EqSlide = {
   type: "eq",
   fromJSON(raw) {
     const lines = raw.data?.filter((d) => d.name === "line").map((d) => ({
-      type: d.type,
-      content: d.content
+      content: d.content,
+      spItems: Array.isArray(d.spItems) ? d.spItems : []
     }));
     if (!lines || lines.length === 0) {
       throw new Error("eq: requires at least one line");
     }
+    const WINDOW_SIZE = 4;
     return Object.freeze({
       type: "eq",
       lines,
-      render({ visibleCount = lines.length, activeIndex = null } = {}) {
+      render({ visibleCount = lines.length, activeIndex = -1 } = {}) {
+        const end = Math.min(visibleCount, lines.length);
+        const start = Math.max(0, end - WINDOW_SIZE);
+        const windowed = lines.slice(start, end);
+        const localActive = activeIndex >= start && activeIndex < end ? activeIndex - start : -1;
+        const activeSpItems = activeIndex >= 0 && activeIndex < lines.length ? lines[activeIndex].spItems : [];
         return `
           <section class="slide eq">
-            ${lines.map((l, i) => {
-          if (i >= visibleCount) return "";
-          const cls = i === activeIndex ? "is-active" : activeIndex !== null && i < activeIndex ? "is-dim" : "";
-          return `<div class="eq-line ${cls}">${l.content}</div>`;
-        }).join("")}
+            <div class="eq-layout">
+
+              <div class="eq-left">
+                ${windowed.map(
+          (l, i) => `
+                      <div class="eq-line ${i === localActive ? "is-active" : ""}">
+                        ${l.content}
+                      </div>
+                    `
+        ).join("")}
+              </div>
+
+              <div class="eq-right">
+                ${activeSpItems.map(
+          (sp) => `
+                      <div class="eq-sp-item eq-${sp.type || "item"}">
+                        ${sp.content}
+                      </div>
+                    `
+        ).join("")}
+              </div>
+
+            </div>
           </section>
         `;
       }
@@ -591,7 +615,7 @@ function getSlideTemplate(type) {
 }
 
 // src/engines/player/stage.js
-function createStage(mount) {
+function createStage(mount, background = {}) {
   if (!mount) throw new Error("taleem-player: mount is required");
   const root = typeof mount === "string" ? document.querySelector(mount) : mount;
   if (!root) throw new Error("taleem-player: mount element not found");
@@ -601,15 +625,41 @@ function createStage(mount) {
   stage.style.position = "relative";
   stage.style.width = "100%";
   stage.style.height = "100%";
+  stage.style.overflow = "hidden";
+  const bgLayer = document.createElement("div");
+  bgLayer.className = "taleem-player-bg";
+  bgLayer.style.position = "absolute";
+  bgLayer.style.inset = "0";
+  bgLayer.style.zIndex = "0";
+  bgLayer.style.backgroundRepeat = "no-repeat";
+  bgLayer.style.backgroundSize = "cover";
+  bgLayer.style.backgroundPosition = "center";
+  if (background.backgroundColor) {
+    bgLayer.style.backgroundColor = background.backgroundColor;
+  }
+  if (background.backgroundImage) {
+    bgLayer.style.backgroundImage = `url("${background.backgroundImage}")`;
+  }
+  if (typeof background.backgroundImageOpacity === "number" && background.backgroundImageOpacity < 1) {
+    bgLayer.style.opacity = String(background.backgroundImageOpacity);
+  }
+  const slideLayer = document.createElement("div");
+  slideLayer.className = "taleem-player-slides";
+  slideLayer.style.position = "relative";
+  slideLayer.style.zIndex = "1";
+  slideLayer.style.width = "100%";
+  slideLayer.style.height = "100%";
+  stage.appendChild(bgLayer);
+  stage.appendChild(slideLayer);
   root.appendChild(stage);
   function clear() {
-    stage.innerHTML = "";
+    slideLayer.innerHTML = "";
   }
   function destroy() {
     root.innerHTML = "";
   }
   return {
-    el: stage,
+    el: slideLayer,
     clear,
     destroy
   };
@@ -617,7 +667,7 @@ function createStage(mount) {
 
 // src/engines/player/player.js
 function createTaleemPlayer({ mount, deck }) {
-  const stage = createStage(mount);
+  const stage = createStage(mount, deck.background);
   let lastSlide = null;
   let lastRenderedKey = null;
   function getSlideAtTime(deck2, time) {

package/dist/taleem-player.umd.js

@@ -562,23 +562,47 @@ var TaleemPlayer = (() => {
     type: "eq",
     fromJSON(raw) {
       const lines = raw.data?.filter((d) => d.name === "line").map((d) => ({
-        type: d.type,
-        content: d.content
+        content: d.content,
+        spItems: Array.isArray(d.spItems) ? d.spItems : []
       }));
       if (!lines || lines.length === 0) {
         throw new Error("eq: requires at least one line");
       }
+      const WINDOW_SIZE = 4;
       return Object.freeze({
         type: "eq",
         lines,
-        render({ visibleCount = lines.length, activeIndex = null } = {}) {
+        render({ visibleCount = lines.length, activeIndex = -1 } = {}) {
+          const end = Math.min(visibleCount, lines.length);
+          const start = Math.max(0, end - WINDOW_SIZE);
+          const windowed = lines.slice(start, end);
+          const localActive = activeIndex >= start && activeIndex < end ? activeIndex - start : -1;
+          const activeSpItems = activeIndex >= 0 && activeIndex < lines.length ? lines[activeIndex].spItems : [];
           return `
           <section class="slide eq">
-            ${lines.map((l, i) => {
-            if (i >= visibleCount) return "";
-            const cls = i === activeIndex ? "is-active" : activeIndex !== null && i < activeIndex ? "is-dim" : "";
-            return `<div class="eq-line ${cls}">${l.content}</div>`;
-          }).join("")}
+            <div class="eq-layout">
+
+              <div class="eq-left">
+                ${windowed.map(
+            (l, i) => `
+                      <div class="eq-line ${i === localActive ? "is-active" : ""}">
+                        ${l.content}
+                      </div>
+                    `
+          ).join("")}
+              </div>
+
+              <div class="eq-right">
+                ${activeSpItems.map(
+            (sp) => `
+                      <div class="eq-sp-item eq-${sp.type || "item"}">
+                        ${sp.content}
+                      </div>
+                    `
+          ).join("")}
+              </div>
+
+            </div>
           </section>
         `;
         }
@@ -621,7 +645,7 @@ var TaleemPlayer = (() => {
   }
 
   // src/engines/player/stage.js
-  function createStage(mount) {
+  function createStage(mount, background = {}) {
     if (!mount) throw new Error("taleem-player: mount is required");
     const root = typeof mount === "string" ? document.querySelector(mount) : mount;
     if (!root) throw new Error("taleem-player: mount element not found");
@@ -631,15 +655,41 @@ var TaleemPlayer = (() => {
     stage.style.position = "relative";
     stage.style.width = "100%";
     stage.style.height = "100%";
+    stage.style.overflow = "hidden";
+    const bgLayer = document.createElement("div");
+    bgLayer.className = "taleem-player-bg";
+    bgLayer.style.position = "absolute";
+    bgLayer.style.inset = "0";
+    bgLayer.style.zIndex = "0";
+    bgLayer.style.backgroundRepeat = "no-repeat";
+    bgLayer.style.backgroundSize = "cover";
+    bgLayer.style.backgroundPosition = "center";
+    if (background.backgroundColor) {
+      bgLayer.style.backgroundColor = background.backgroundColor;
+    }
+    if (background.backgroundImage) {
+      bgLayer.style.backgroundImage = `url("${background.backgroundImage}")`;
+    }
+    if (typeof background.backgroundImageOpacity === "number" && background.backgroundImageOpacity < 1) {
+      bgLayer.style.opacity = String(background.backgroundImageOpacity);
+    }
+    const slideLayer = document.createElement("div");
+    slideLayer.className = "taleem-player-slides";
+    slideLayer.style.position = "relative";
+    slideLayer.style.zIndex = "1";
+    slideLayer.style.width = "100%";
+    slideLayer.style.height = "100%";
+    stage.appendChild(bgLayer);
+    stage.appendChild(slideLayer);
     root.appendChild(stage);
     function clear() {
-      stage.innerHTML = "";
+      slideLayer.innerHTML = "";
     }
     function destroy() {
       root.innerHTML = "";
     }
     return {
-      el: stage,
+      el: slideLayer,
       clear,
       destroy
     };
@@ -647,7 +697,7 @@ var TaleemPlayer = (() => {
 
   // src/engines/player/player.js
   function createTaleemPlayer({ mount, deck }) {
-    const stage = createStage(mount);
+    const stage = createStage(mount, deck.background);
     let lastSlide = null;
     let lastRenderedKey = null;
     function getSlideAtTime(deck2, time) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taleem-player",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "main": "./dist/taleem-player.umd.js",
   "module": "./dist/taleem-player.esm.js",
@@ -28,12 +28,13 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "taleem-core": "^1.4.3",
-    "taleem-slides": "^0.6.2-rc.6"
+    "taleem-slides": "^1.0.1"
   },
   "devDependencies": {
     "esbuild": "^0.27.2",
     "jsdom": "^22.1.0",
-    "vitest": "^3.2.4"
+    "taleem-core": "^1.5.1",
+    "vitest": "^3.2.4",
+    "zod": "^4.3.6"
   }
 }