taleem-slides 1.0.0 → 1.0.2

package/README.md

@@ -1,28 +1,29 @@
-
 # 📦 taleem-slides
 
 > **Render slide JSON → HTML (nothing more, nothing less)**
 
-`taleem-slides` is a **small, focused rendering library**.
+`taleem-slides` is a **small, focused rendering library**.  
 It takes **validated slide JSON** and returns **HTML strings** using fixed, opinionated layouts.
 
-No player.
-No timing.
-No DOM.
+No player.  
+No timing.  
+No DOM.  
 Just HTML.
+
 > Assumes slide JSON is already validated by upstream tools.
+
 ---
 
 ## 🌐 Live Reference (Authoritative)
 
-👉 **[https://bilza2023.github.io/taleem](https://bilza2023.github.io/taleem)**
+👉 **https://bilza2023.github.io/taleem**
 
 This site is the **source of truth** for:
 
-* supported slide types
-* exact visual layouts
-* real rendered output
-* examples and behavior
+- supported slide types
+- exact visual layouts
+- real rendered output
+- examples and behavior
 
 If something here and the site disagree, **the site wins**.
 
@@ -30,10 +31,10 @@ If something here and the site disagree, **the site wins**.
 
 ## ✅ What taleem-slides DOES
 
-* Converts slide JSON into HTML
-* Implements fixed slide layouts
-* Applies minimal state-based CSS classes
-* Works in browser, player, SSR, or Node
+- Converts slide JSON into HTML
+- Implements fixed slide layouts
+- Applies minimal state-based CSS classes
+- Works in browser, player, SSR, or Node
 
 ---
 
@@ -41,12 +42,12 @@ If something here and the site disagree, **the site wins**.
 
 `taleem-slides` does **not**:
 
-* manage time or animations
-* navigate slides
-* validate decks or schemas
-* apply CSS
-* touch the DOM
-* control presentation flow
+- manage time or animations
+- navigate slides
+- validate decks or schemas
+- apply CSS
+- touch the DOM
+- control presentation flow
 
 Those responsibilities live **outside** this library.
 
@@ -55,21 +56,23 @@ Those responsibilities live **outside** this library.
 ## 🧠 Mental Model
 
 ```
+
 slide JSON
 ↓
 taleem-slides
 ↓
 HTML string
-```
+
+````
 
 That’s it.
 
 How the HTML is:
 
-* shown
-* styled
-* animated
-* timed
+- shown
+- styled
+- animated
+- timed
 
 …is **your responsibility**.
 
@@ -79,7 +82,7 @@ How the HTML is:
 
 ```bash
 npm install taleem-slides
-```
+````
 
 ---
 
@@ -146,7 +149,9 @@ Each slide reads only the fields it cares about.
 
 ## 🎨 CSS Contract (Very Small)
 
-Slides may emit these state classes only:
+Slides may emit **state classes and slide-specific structural classes** only.
+
+State classes:
 
 ```text
 .is-active
@@ -171,7 +176,31 @@ Categories include:
 * images and image+text layouts
 * tables and charts
 * quotes, stats, and numbers
-* equation slides
+* equation slides (**experimental**)
+
+---
+
+### ⚠️ Note on equation (`eq`) slides
+
+The `eq` slide type is **experimental**.
+
+In v1 it is intentionally limited to:
+
+* time-based line reveal
+* a single active (highlighted) line
+* optional side-panel annotations (`spItems`)
+* deterministic windowing (older lines drop off)
+
+It does **not** include:
+
+* math rendering (KaTeX / MathJax)
+* semantic math/text interpretation
+* scrolling or centering behavior
+
+The `eq` slide exists to validate the renderer contract,
+not as a finished math presentation system.
+
+---
 
 Layouts are **fixed by design**.
 New layouts = new slide templates.
@@ -208,4 +237,4 @@ It is intentionally small so it can sit **anywhere**.
 > **Render HTML only.
 > Never control presentation logic.**
 
----
+---

package/package.json

@@ -1,17 +1,12 @@
 {
   "name": "taleem-slides",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "Convert Taleem schema into HTML slides",
   "exports": {
-    ".": "./src/index.js",
-    "./styles/taleem.css": "./dist/taleem.css",
-    "./styles/themes/dark.css": "./dist/themes/dark.css",
-    "./styles/themes/light.css": "./dist/themes/light.css",
-    "./styles/themes/paper.css": "./dist/themes/paper.css"
+    ".": "./src/index.js"
   },
   "files": [
-    "dist",
     "src"
   ],
   "scripts": {
@@ -22,20 +17,19 @@
     "lint": "echo \"no lint yet\""
   },
   "dependencies": {
-    "taleem-core": "^1.5.0",
-    "zod": "^4.3.5"
+    "taleem-core": "^1.5.1"
   },
   "devDependencies": {
     "vite": "^5.0.0",
-    "vitest": "^1.5.0"
+    "vitest": "^1.5.0",
+    "zod": "^4.3.5"
   },
   "keywords": [
-  "slides",
-  "presentation",
-  "education",
-  "html",
-  "renderer",
-  "taleem"
-]
-
+    "slides",
+    "presentation",
+    "education",
+    "html",
+    "renderer",
+    "taleem"
+  ]
 }

package/src/slides/DonutChartSlide.js

@@ -1,3 +1,4 @@
+
 export const DonutChartSlide = {
   type: "donutChart",
 

package/src/slides/EqSlide.js

@@ -1,36 +1,68 @@
+const WINDOW_SIZE = 3;
 
 export const EqSlide = {
   type: "eq",
 
   fromJSON(raw) {
-    const lines = raw.data
-      ?.filter(d => d.name === "line")
-      .map(d => ({
-        type: d.type,
-        content: d.content
-      }));
-
-    if (!lines || lines.length === 0) {
-      throw new Error("eq: requires at least one line");
-    }
+    const lines = raw.data ?? [];
 
     return Object.freeze({
       type: "eq",
       lines,
 
-      render({ visibleCount = lines.length, activeIndex = null } = {}) {
+      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);
+
         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-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>
         `;
       }

package/dist/taleem.css

@@ -1,347 +0,0 @@
-
-/* =====================================================
-   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/themes/dark.css

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

package/dist/themes/light.css

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

package/dist/themes/paper.css

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