taleem-player 1.0.2 → 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/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>
         `;
       }

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>
         `;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taleem-player",
-  "version": "1.0.2",
+  "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": "file:../taleem-slides"
+    "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"
   }
 }