taleem-slides 0.6.0 → 0.6.2-rc.1

package/dist/taleem.css

@@ -0,0 +1,289 @@
+/* =====================================================
+   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 .columns {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 64px;
+      max-width: 1200px;
+    }
+    
+    .slide.twoColumnText p {
+      font-size: 3rem;
+      text-align: left;
+    }
+    .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;
+}

package/dist/themes/dark.css

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

package/dist/themes/light.css

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

package/dist/themes/paper.css

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

package/package.json

@@ -1,23 +1,38 @@
 {
   "name": "taleem-slides",
-  "version": "0.6.0",
+  "version": "0.6.2-rc.1",
   "type": "module",
-  "description": "Convert json taleem schema into html for slides",
+  "description": "Convert Taleem schema into HTML slides",
+
   "exports": {
-    ".": "./src/index.js"
+    ".": "./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"
   },
+
+  "files": [
+    "dist",
+    "src"
+  ],
+
   "scripts": {
+    "build": "node scripts/build.js",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "lint": "echo \"no lint yet\""
   },
-  "devDependencies": {
-    "vite": "^5.0.0",
-    "vitest": "^1.5.0"
-  },
+
   "dependencies": {
     "taleem-core": "^1.3.2",
     "zod": "^4.3.5"
+  },
+
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "vitest": "^1.5.0"
   }
 }

package/tests/slide.title.test.js

@@ -1,15 +0,0 @@
-// tests/slides.titleSlide.test.js
-import { describe, test, expect } from "vitest";
-import { TitleSlide } from "../src/slides/TitleSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("TitleSlide", () => {
-  test("renders from golden deck", () => {
-    const raw = goldenDeckV1.deck.find(s => s.type === "titleSlide");
-    const slide = TitleSlide.fromJSON(raw);
-    const html = slide.render();
-
-    expect(html).toContain("titleSlide");
-    expect(html).toContain("Golden Deck");
-  });
-});

package/tests/slides.barChart.test.js

@@ -1,24 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { BarChartSlide } from "../src/slides/BarChartSlide.js";
-import { goldenDeckV1 } from "taleem-core"; // path may vary in monorepo
-
-describe("BarChartSlide", () => {
-  test("renders barChart slide from golden deck", () => {
-    // 1. Extract canonical barChart slide from golden deck
-    const barChartSlide = goldenDeckV1.deck.find(
-      slide => slide.type === "barChart"
-    );
-
-    // Safety check (optional but fine during refactor)
-    expect(barChartSlide).toBeTruthy();
-
-    // 2. Feed EXACT golden-deck data into renderer
-    const slide = BarChartSlide.fromJSON(barChartSlide);
-    const html = slide.render();
-
-    // 3. Assert rendered HTML (presentation only)
-    expect(html).toContain("bar");
-    expect(html).toContain("span");
-    expect(html).toContain("barChart");
-  });
-});

package/tests/slides.bigNumber.test.js

@@ -1,17 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { BigNumberSlide } from "../src/slides/BigNumberSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("BigNumberSlide", () => {
-  test("renders bigNumber from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "bigNumber"
-    );
-
-    const slide = BigNumberSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("bigNumber");
-    expect(html).toContain(slide.number);
-  });
-});

package/tests/slides.bulletList.test.js

@@ -1,17 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { BulletListSlide } from "../src/slides/BulletListSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("BulletListSlide", () => {
-  test("renders bulletList from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "bulletList"
-    );
-
-    const slide = BulletListSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("bulletList");
-    expect(html).toContain("<li");
-  });
-});

package/tests/slides.contactSlide.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { ContactSlide } from "../src/slides/ContactSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("ContactSlide", () => {
-  test("renders contactSlide from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "contactSlide"
-    );
-
-    const slide = ContactSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("contactSlide");
-    expect(html).toContain("<div>");
-  });
-});

package/tests/slides.cornerWordsSlide.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { CornerWordsSlide } from "../src/slides/CornerWordsSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("CornerWordsSlide", () => {
-  test("renders cornerWordsSlide from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "cornerWordsSlide"
-    );
-
-    const slide = CornerWordsSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("cornerWordsSlide");
-    expect(html).toContain("corner-card");
-  });
-});

package/tests/slides.donutChart.test.js

@@ -1,19 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { DonutChartSlide } from "../src/slides/DonutChartSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("DonutChartSlide", () => {
-  test("renders donutChart from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "donutChart"
-    );
-
-    const slide = DonutChartSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("donutChart");
-    expect(html).toContain("%");
-  });
-});
-

package/tests/slides.eq.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { EqSlide } from "../src/slides/EqSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("EqSlide", () => {
-  test("renders eq slide from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "eq"
-    );
-
-    const slide = EqSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("eq");
-    expect(html).toContain("eq-line");
-  });
-});

package/tests/slides.fillImage.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { FillImageSlide } from "../src/slides/FillImageSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("FillImageSlide", () => {
-  test("renders fillImage from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      slide => slide.type === "fillImage"
-    );
-
-    const slide = FillImageSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("fillImage");
-    expect(html).toContain("<img");
-  });
-});

package/tests/slides.imageLeftBulletsRight.test.js

@@ -1,19 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { ImageLeftBulletsRightSlide } from "../src/slides/ImageLeftBulletsRightSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("ImageLeftBulletsRightSlide", () => {
-  test("renders imageLeftBulletsRight from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "imageLeftBulletsRight"
-    );
-
-    const slide = ImageLeftBulletsRightSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("imageLeftBulletsRight");
-    expect(html).toContain("<img");
-    expect(html).toContain("<li>");
-  });
-});

package/tests/slides.imageRightBulletsLeft.test.js

@@ -1,18 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { ImageRightBulletsLeftSlide } from "../src/slides/ImageRightBulletsLeftSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("ImageRightBulletsLeftSlide", () => {
-  test("renders imageRightBulletsLeft from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "imageRightBulletsLeft"
-    );
-
-    const slide = ImageRightBulletsLeftSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("imageRightBulletsLeft");
-    expect(html).toContain("<img");
-    expect(html).toContain("<li>");
-  });
-});

package/tests/slides.imageSlide.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { ImageSlide } from "../src/slides/ImageSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("ImageSlide", () => {
-  test("renders imageSlide from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "imageSlide"
-    );
-
-    const slide = ImageSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("imageSlide");
-    expect(html).toContain("<img");
-  });
-});

package/tests/slides.imageWithCaption.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { ImageWithCaptionSlide } from "../src/slides/ImageWithCaptionSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("ImageWithCaptionSlide", () => {
-  test("renders imageWithCaption from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "imageWithCaption"
-    );
-
-    const slide = ImageWithCaptionSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("imageWithCaption");
-    expect(html).toContain("<figcaption>");
-  });
-});

package/tests/slides.imageWithTitle.test.js

@@ -1,18 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { ImageWithTitleSlide } from "../src/slides/ImageWithTitleSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("ImageWithTitleSlide", () => {
-  test("renders imageWithTitle from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "imageWithTitle"
-    );
-
-    const slide = ImageWithTitleSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("imageWithTitle");
-    expect(html).toContain("<h1>");
-  });
-});

package/tests/slides.quoteSlide.test.js

@@ -1,17 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { QuoteSlide } from "../src/slides/QuoteSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("QuoteSlide", () => {
-  test("renders quoteSlide from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "quoteSlide"
-    );
-
-    const slide = QuoteSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("quoteSlide");
-    expect(html).toContain("<blockquote");
-  });
-});

package/tests/slides.quoteWithImage.test.js

@@ -1,19 +0,0 @@
-
-import { describe, test, expect } from "vitest";
-import { QuoteWithImageSlide } from "../src/slides/QuoteWithImageSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("QuoteWithImageSlide", () => {
-  test("renders quoteWithImage from golden deck", () => {
-    const slideData = goldenDeckV1.deck.find(
-      s => s.type === "quoteWithImage"
-    );
-
-    const slide = QuoteWithImageSlide.fromJSON(slideData);
-    const html = slide.render();
-
-    expect(html).toContain("quoteWithImage");
-    expect(html).toContain("<img");
-    expect(html).toContain("<blockquote");
-  });
-});

package/tests/slides.statistic.test.js

@@ -1,18 +0,0 @@
-import { describe, test, expect } from "vitest";
-import { StatisticSlide } from "../src/slides/StatisticSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("StatisticSlide", () => {
-  test("renders statistic slide from golden deck", () => {
-    const raw = goldenDeckV1.deck.find(s => s.type === "statistic");
-
-    const slide = StatisticSlide.fromJSON(raw);
-    const html = slide.render();
-
-    expect(html).toContain("slide statistic");
-    expect(html).toContain("stat-value");
-    expect(html).toContain("stat-label");
-    expect(html).toContain("75%");
-    expect(html).toContain("Completion Rate");
-  });
-});

package/tests/slides.table.test.js

@@ -1,16 +0,0 @@
-// tests/slides.table.test.js
-import { describe, test, expect } from "vitest";
-import { TableSlide } from "../src/slides/TableSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("TableSlide", () => {
-  test("renders from golden deck", () => {
-    const raw = goldenDeckV1.deck.find(s => s.type === "table");
-    const slide = TableSlide.fromJSON(raw);
-    const html = slide.render();
-
-    expect(html).toContain("slide table");
-    expect(html).toContain("<th>A</th>");
-    expect(html).toContain("<td>1</td>");
-  });
-});

package/tests/slides.titleAndPara.test.js

@@ -1,17 +0,0 @@
-
-// tests/slides.titleAndPara.test.js
-import { describe, test, expect } from "vitest";
-import { TitleAndParaSlide } from "../src/slides/TitleAndParaSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("TitleAndParaSlide", () => {
-  test("renders from golden deck", () => {
-    const raw = goldenDeckV1.deck.find(s => s.type === "titleAndPara");
-    const slide = TitleAndParaSlide.fromJSON(raw);
-    const html = slide.render();
-
-    expect(html).toContain("titleAndPara");
-    expect(html).toContain("End");
-    expect(html).toContain("All 21 slide types validated.");
-  });
-});

package/tests/slides.titleAndSubtitle.test.js

@@ -1,17 +0,0 @@
-
-// tests/slides.titleAndSubtitle.test.js
-import { describe, test, expect } from "vitest";
-import { TitleAndSubtitleSlide } from "../src/slides/TitleAndSubtitleSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("TitleAndSubtitleSlide", () => {
-  test("renders from golden deck", () => {
-    const raw = goldenDeckV1.deck.find(s => s.type === "titleAndSubtitle");
-    const slide = TitleAndSubtitleSlide.fromJSON(raw);
-    const html = slide.render();
-
-    expect(html).toContain("titleAndSubtitle");
-    expect(html).toContain("Title & Subtitle");
-    expect(html).toContain("Schema language demo");
-  });
-});

package/tests/slides.twoColumnText.test.js

@@ -1,16 +0,0 @@
-// tests/slides.twoColumnText.test.js
-import { describe, test, expect } from "vitest";
-import { TwoColumnTextSlide } from "../src/slides/TwoColumnTextSlide.js";
-import { goldenDeckV1 } from "taleem-core";
-
-describe("TwoColumnTextSlide", () => {
-  test("renders from golden deck", () => {
-    const raw = goldenDeckV1.deck.find(s => s.type === "twoColumnText");
-    const slide = TwoColumnTextSlide.fromJSON(raw);
-    const html = slide.render();
-
-    expect(html).toContain("twoColumnText");
-    expect(html).toContain("Left column");
-    expect(html).toContain("Right column");
-  });
-});