taleem-player 1.0.4 → 1.0.6

package/dist/css/taleem.css

@@ -407,4 +407,82 @@
     bottom: 0;
     right: 0;
   }
-  
+
+  
+
+  /* =====================================================
+   EQ — TWO COLUMN (FIXED EXPLANATION PANEL)
+   ===================================================== */
+
+.slide.eq.eq-two-column {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  gap: 64px;
+  text-align: left;
+}
+
+/* LEFT PANEL — explanation (replaces image area) */
+.eq-explain-panel {
+  flex: 1;
+  max-width: 520px;
+
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 14px;
+
+  padding: 28px 32px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+}
+
+/* explanation item */
+.eq-explain-item {
+  font-size: 2.4rem;
+  line-height: 1.45;
+  opacity: 0.95;
+}
+
+/* placeholder when nothing active */
+.eq-explain-placeholder {
+  opacity: 0.5;
+  font-style: italic;
+}
+
+/* RIGHT PANEL — equation lines */
+.eq-lines-panel {
+  flex: 1;
+  max-width: 520px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* equation line */
+.eq-line {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 10px;
+
+  padding: 14px 18px;
+
+  font-size: 2.6rem;
+  line-height: 1.5;
+
+  transition:
+    background 0.25s ease,
+    border-color 0.25s ease;
+}
+
+/* active line */
+.eq-line.active {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(120, 160, 255, 0.65);
+}

package/dist/spec/index.js

@@ -0,0 +1,291 @@
+// src/spec/goldenDeckV1.js
+var goldenDeckV1 = {
+  version: "deck-v1",
+  name: "Golden Deck V1 \u2013 Full Schema Coverage",
+  background: {
+    backgroundColor: "#111111",
+    backgroundImage: null,
+    backgroundImageOpacity: 0.3
+  },
+  deck: [
+    // 1 titleSlide
+    {
+      type: "titleSlide",
+      start: 0,
+      end: 5,
+      data: [
+        { name: "title", content: "Taleem Project - Golden Deck", showAt: 0 }
+      ]
+    },
+    // 2 titleAndSubtitle
+    {
+      type: "titleAndSubtitle",
+      start: 5,
+      end: 10,
+      data: [
+        { name: "title", content: "How Taleem Slides Work", showAt: 5 },
+        { name: "subtitle", content: "A simple, calm way to present ideas", showAt: 6 }
+      ]
+    },
+    // 3 bulletList
+    {
+      type: "bulletList",
+      start: 10,
+      end: 15,
+      data: [
+        { name: "bullet", content: "Each slide is carefully prepared information", showAt: 10 },
+        { name: "bullet", content: "The system only shows what is written", showAt: 11 },
+        { name: "bullet", content: "Nothing changes behind the scenes", showAt: 12 },
+        { name: "bullet", content: "The author controls when ideas appear", showAt: 13 },
+        { name: "bullet", content: "The same lesson looks the same everywhere", showAt: 14 }
+      ]
+    },
+    {
+      type: "twoColumnText",
+      start: 15,
+      end: 20,
+      data: [
+        {
+          name: "left",
+          content: `
+          taleem-browser shows one complete slide at a time. Each slide appears fully, clear, and ready to read.
+          `,
+          showAt: 15
+        },
+        {
+          name: "right",
+          content: `
+          taleem-player shows content gradually, like a video. Ideas appear step by step as the lesson moves forward.
+          `,
+          showAt: 17
+        }
+      ]
+    },
+    // 5 imageSlide
+    {
+      type: "imageSlide",
+      start: 20,
+      end: 25,
+      data: [
+        { name: "image", content: "image.png", showAt: 20 }
+      ]
+    },
+    // 6 imageWithTitle
+    {
+      type: "imageWithTitle",
+      start: 25,
+      end: 30,
+      data: [
+        { name: "title", content: "Learning with Visual Support", showAt: 25 },
+        { name: "image", content: "image.png", showAt: 26 }
+      ]
+    },
+    // 7 imageWithCaption
+    {
+      type: "imageWithCaption",
+      start: 30,
+      end: 35,
+      data: [
+        { name: "image", content: "image.png", showAt: 30 },
+        { name: "caption", content: "Caption as data", showAt: 31 }
+      ]
+    },
+    // 8 imageLeftBulletsRight
+    {
+      type: "imageLeftBulletsRight",
+      start: 35,
+      end: 40,
+      data: [
+        { name: "image", content: "image.png", showAt: 35 },
+        { name: "bullet", content: "Each slide has a clear visual focus", showAt: 36 },
+        { name: "bullet", content: "Points are shown in a planned order", showAt: 37 },
+        { name: "bullet", content: "Nothing appears randomly", showAt: 38 },
+        { name: "bullet", content: "This helps students follow step by step", showAt: 39 }
+      ]
+    },
+    // 9 imageRightBulletsLeft
+    {
+      type: "imageRightBulletsLeft",
+      start: 40,
+      end: 45,
+      data: [
+        { name: "image", content: "image.png", showAt: 40 },
+        { name: "bullet", content: "Slides do not change on their own", showAt: 41 },
+        { name: "bullet", content: "The teacher decides when to move forward", showAt: 42 },
+        { name: "bullet", content: "Students are never rushed", showAt: 43 },
+        { name: "bullet", content: "This keeps learning calm and focused", showAt: 44 }
+      ]
+    },
+    // 10 table
+    {
+      type: "table",
+      start: 45,
+      end: 50,
+      data: [
+        ["Layer", "Role"],
+        ["taleem-core", "Schema for JSON"],
+        ["taleem-slides", "Render \u2013 JSON to HTML"],
+        ["taleem-browser", "Index-based presentations"],
+        ["taleem-player", "Time-based presentations"]
+      ]
+    },
+    // 11 statistic
+    {
+      type: "statistic",
+      start: 50,
+      end: 55,
+      data: [
+        { name: "number", content: "21", showAt: 50 },
+        { name: "label", content: "Slide Types", showAt: 51 }
+      ]
+    },
+    // 12 donutChart
+    {
+      type: "donutChart",
+      start: 55,
+      end: 60,
+      data: [
+        { name: "percent", content: "60", showAt: 55 },
+        { name: "label", content: "Lesson Covered", showAt: 56 },
+        { name: "color", content: "#ff9900", showAt: 57 }
+      ]
+    },
+    // 13 bigNumber
+    {
+      type: "bigNumber",
+      start: 60,
+      end: 65,
+      data: [
+        { name: "number", content: "100%", showAt: 60 },
+        { name: "label", content: "Always the Same Output", showAt: 61 }
+      ]
+    },
+    // 14 barChart
+    {
+      type: "barChart",
+      start: 65,
+      end: 70,
+      data: [
+        { name: "bar", label: "Excellent", value: 4, showAt: 65 },
+        { name: "bar", label: "Good", value: 6, showAt: 66 },
+        { name: "bar", label: "Average", value: 5, showAt: 67 },
+        { name: "bar", label: "Needs improvement", value: 2, showAt: 68 }
+      ]
+    },
+    // 15 quoteSlide
+    {
+      type: "quoteSlide",
+      start: 70,
+      end: 75,
+      data: [
+        { name: "quote", content: "Clarity makes learning easier for everyone.", showAt: 70 },
+        { name: "author", content: "\u2014 Taleem", showAt: 72 }
+      ]
+    },
+    // 16 quoteWithImage
+    {
+      type: "quoteWithImage",
+      start: 75,
+      end: 80,
+      data: [
+        { name: "quote", content: "Understanding ideas matters more than using complex tools.", showAt: 75 },
+        { name: "author", content: "\u2014 Taleem", showAt: 77 },
+        { name: "image", content: "image.png", showAt: 78 }
+      ]
+    },
+    // 17 cornerWordsSlide
+    {
+      type: "cornerWordsSlide",
+      start: 80,
+      end: 85,
+      data: [
+        { name: "card", icon: "\u{1F9E0}", label: "Focus", showAt: 80 },
+        { name: "card", icon: "\u{1F4D8}", label: "Clarity", showAt: 81 },
+        { name: "card", icon: "\u23F1\uFE0F", label: "Pace", showAt: 82 },
+        { name: "card", icon: "\u{1F3AF}", label: "Understanding", showAt: 83 }
+      ]
+    },
+    // 18 contactSlide
+    {
+      type: "contactSlide",
+      start: 85,
+      end: 90,
+      data: [
+        { name: "headline", content: "Taleem Project", showAt: 85 },
+        { name: "email", content: "github.com/taleem", showAt: 86 },
+        { name: "phone", content: "Open-source educational tools", showAt: 87 }
+      ]
+    },
+    // 19 eq
+    {
+      type: "eq",
+      start: 90,
+      end: 95,
+      data: [
+        {
+          name: "line",
+          type: "heading",
+          content: "Eq Slide - under contruction",
+          showAt: 90
+        },
+        {
+          name: "line",
+          type: "math",
+          content: "render(data) \u21D2 same output",
+          showAt: 91,
+          spItems: [
+            { type: "spText", content: "No hidden state" }
+          ]
+        }
+      ]
+    },
+    // 20 fillImage
+    {
+      type: "fillImage",
+      start: 95,
+      end: 100,
+      data: [
+        { name: "image", content: "image.png", showAt: 95 }
+      ]
+    },
+    // 21 titleAndPara
+    {
+      type: "titleAndPara",
+      start: 100,
+      end: 105,
+      data: [
+        { name: "title", content: "End", showAt: 100 },
+        { name: "para", content: "All slide types rendered.", showAt: 101 }
+      ]
+    }
+  ]
+};
+
+// src/spec/slideTypesV1.js
+var SLIDE_TYPES_V1 = [
+  "titleSlide",
+  "titleAndSubtitle",
+  "titleAndPara",
+  "bulletList",
+  "twoColumnText",
+  "imageSlide",
+  "imageWithTitle",
+  "imageWithCaption",
+  "imageLeftBulletsRight",
+  "imageRightBulletsLeft",
+  "table",
+  "statistic",
+  "donutChart",
+  "bigNumber",
+  "barChart",
+  "quoteSlide",
+  "quoteWithImage",
+  "cornerWordsSlide",
+  "contactSlide",
+  "fillImage",
+  "eq"
+];
+export {
+  SLIDE_TYPES_V1,
+  goldenDeckV1
+};

package/dist/taleem-player.esm.js

@@ -1,4 +1,4 @@
-// node_modules/taleem-slides/src/slides/TitleSlide.js
+// src/slides/templates/TitleSlide.js
 var TitleSlide = {
   type: "titleSlide",
   fromJSON(raw) {
@@ -19,7 +19,7 @@ var TitleSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/TitleAndSubtitleSlide.js
+// src/slides/templates/TitleAndSubtitleSlide.js
 var TitleAndSubtitleSlide = {
   type: "titleAndSubtitle",
   fromJSON(raw) {
@@ -42,7 +42,7 @@ var TitleAndSubtitleSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/TitleAndParaSlide.js
+// src/slides/templates/TitleAndParaSlide.js
 var TitleAndParaSlide = {
   type: "titleAndPara",
   fromJSON(raw) {
@@ -65,7 +65,7 @@ var TitleAndParaSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/BulletListSlide.js
+// src/slides/templates/BulletListSlide.js
 var BulletListSlide = {
   type: "bulletList",
   fromJSON(raw) {
@@ -93,7 +93,7 @@ var BulletListSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/TwoColumnTextSlide.js
+// src/slides/templates/TwoColumnTextSlide.js
 var TwoColumnTextSlide = {
   type: "twoColumnText",
   fromJSON(raw) {
@@ -120,7 +120,7 @@ var TwoColumnTextSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/ImageSlide.js
+// src/slides/templates/ImageSlide.js
 var ImageSlide = {
   type: "imageSlide",
   fromJSON(raw) {
@@ -140,7 +140,7 @@ var ImageSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/FillImageSlide.js
+// src/slides/templates/FillImageSlide.js
 var FillImageSlide = {
   type: "fillImage",
   fromJSON(raw) {
@@ -162,7 +162,7 @@ var FillImageSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/ImageWithTitleSlide.js
+// src/slides/templates/ImageWithTitleSlide.js
 var ImageWithTitleSlide = {
   type: "imageWithTitle",
   fromJSON(raw) {
@@ -187,7 +187,7 @@ var ImageWithTitleSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/ImageWithCaptionSlide.js
+// src/slides/templates/ImageWithCaptionSlide.js
 var ImageWithCaptionSlide = {
   type: "imageWithCaption",
   fromJSON(raw) {
@@ -212,7 +212,7 @@ var ImageWithCaptionSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/ImageLeftBulletsRightSlide.js
+// src/slides/templates/ImageLeftBulletsRightSlide.js
 var ImageLeftBulletsRightSlide = {
   type: "imageLeftBulletsRight",
   fromJSON(raw) {
@@ -241,7 +241,7 @@ var ImageLeftBulletsRightSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/ImageRightBulletsLeftSlide.js
+// src/slides/templates/ImageRightBulletsLeftSlide.js
 var ImageRightBulletsLeftSlide = {
   type: "imageRightBulletsLeft",
   fromJSON(raw) {
@@ -270,7 +270,7 @@ var ImageRightBulletsLeftSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/TableSlide.js
+// src/slides/templates/TableSlide.js
 var TableSlide = {
   type: "table",
   fromJSON(raw) {
@@ -296,7 +296,7 @@ var TableSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/StatisticSlide.js
+// src/slides/templates/StatisticSlide.js
 var StatisticSlide = {
   type: "statistic",
   fromJSON(raw) {
@@ -321,7 +321,7 @@ var StatisticSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/BigNumberSlide.js
+// src/slides/templates/BigNumberSlide.js
 var BigNumberSlide = {
   type: "bigNumber",
   fromJSON(raw) {
@@ -346,7 +346,7 @@ var BigNumberSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/BarChartSlide.js
+// src/slides/templates/BarChartSlide.js
 var BarChartSlide = {
   type: "barChart",
   fromJSON(raw) {
@@ -382,7 +382,7 @@ var BarChartSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/DonutChartSlide.js
+// src/slides/templates/DonutChartSlide.js
 var DonutChartSlide = {
   type: "donutChart",
   fromJSON(raw) {
@@ -420,7 +420,7 @@ var DonutChartSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/QuoteSlide.js
+// src/slides/templates/QuoteSlide.js
 var QuoteSlide = {
   type: "quoteSlide",
   fromJSON(raw) {
@@ -445,7 +445,7 @@ var QuoteSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/QuoteWithImageSlide.js
+// src/slides/templates/QuoteWithImageSlide.js
 var QuoteWithImageSlide = {
   type: "quoteWithImage",
   fromJSON(raw) {
@@ -475,7 +475,7 @@ var QuoteWithImageSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/CornerWordsSlide.js
+// src/slides/templates/CornerWordsSlide.js
 var CornerWordsSlide = {
   type: "cornerWordsSlide",
   fromJSON(raw) {
@@ -505,7 +505,7 @@ var CornerWordsSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/ContactSlide.js
+// src/slides/templates/ContactSlide.js
 var ContactSlide = {
   type: "contactSlide",
   fromJSON(raw) {
@@ -527,8 +527,7 @@ var ContactSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/slides/EqSlide.js
-var WINDOW_SIZE = 3;
+// src/slides/templates/EqSlide.js
 var EqSlide = {
   type: "eq",
   fromJSON(raw) {
@@ -536,42 +535,20 @@ var EqSlide = {
     return Object.freeze({
       type: "eq",
       lines,
-      render(time = null) {
-        let activeIndex = -1;
-        if (typeof time === "number") {
-          for (let i = 0; i < lines.length; i++) {
-            if (lines[i].showAt <= time) {
-              activeIndex = i;
-            }
-          }
-        }
-        const isTimed = activeIndex !== -1;
-        let start = 0;
-        let end = lines.length;
-        if (isTimed && activeIndex >= WINDOW_SIZE) {
-          start = activeIndex - (WINDOW_SIZE - 1);
-          end = activeIndex + 1;
-        }
-        const visible = lines.slice(start, end);
+      render({ visibleCount = lines.length } = {}) {
         return `
-          <section class="slide eq">
-            <div class="eq-slide">
-              ${visible.map((line, localIndex) => {
-          const index = start + localIndex;
-          const isActive = isTimed && index === activeIndex;
-          const hasSp = Array.isArray(line.spItems) && line.spItems.length > 0;
-          return `
-                    <div class="eq-line ${isActive ? "active" : ""}">
-                      <div class="eq-line-content">${line.content}</div>
-                      ${hasSp && (!isTimed || isActive) ? `<div class="eq-sp-items">
-                              ${line.spItems.map(
-            (sp) => `<div class="eq-sp-item">${sp.content}</div>`
-          ).join("")}
-                            </div>` : ""}
-                    </div>
-                  `;
-        }).join("")}
-            </div>
+          <section class="slide eq imageRightBulletsLeft">
+            
+            <!-- LEFT: lines (bullet behavior) -->
+            <ul class="eq-lines">
+              ${lines.map(
+          (line, i) => i < visibleCount ? `<li class="eq-line">${line.content}</li>` : ""
+        ).join("")}
+            </ul>
+
+            <!-- RIGHT: placeholder (image slot replacement) -->
+            <div class="eq-side-panel"></div>
+
           </section>
         `;
       }
@@ -579,8 +556,8 @@ var EqSlide = {
   }
 };
 
-// node_modules/taleem-slides/src/SlideTemplates.js
-var SlideTemplates = {
+// src/slides/registry.js
+var SlideRegistry = {
   titleSlide: TitleSlide,
   titleAndSubtitle: TitleAndSubtitleSlide,
   titleAndPara: TitleAndParaSlide,
@@ -604,15 +581,23 @@ var SlideTemplates = {
   eq: EqSlide
 };
 
-// node_modules/taleem-slides/src/getSlideTemplate.js
+// src/slides/getSlideTemplate.js
 function getSlideTemplate(type) {
-  const template = SlideTemplates[type];
+  const template = SlideRegistry[type];
   if (!template) {
     throw new Error(`Unknown slide template type "${type}"`);
   }
   return template;
 }
 
+// src/slides/registerSlide.js
+function registerSlide(type, renderer) {
+  if (SlideRegistry[type]) {
+    throw new Error(`Slide type "${type}" is already registered`);
+  }
+  SlideRegistry[type] = renderer;
+}
+
 // src/engines/player/stage.js
 function createStage(mount, background = {}) {
   if (!mount) throw new Error("taleem-player: mount is required");
@@ -823,7 +808,7 @@ function resolveAssetPaths(deck, IMG_BASE) {
 }
 
 // src/utils/resolveBackground.js
-function resolveBackground2(deck, ASSET_BASE) {
+function resolveBackground(deck, ASSET_BASE) {
   if (!deck || !deck.background) return deck;
   const bg = deck.background;
   if (typeof bg.backgroundImage === "string" && bg.backgroundImage.length > 0) {
@@ -847,6 +832,7 @@ export {
   createTaleemBrowser,
   createTaleemPlayer,
   getDeckEndTime,
+  registerSlide,
   resolveAssetPaths,
-  resolveBackground2 as resolveBackground
+  resolveBackground
 };