@framv/slides 0.1.0

package/dist/cdn.d.ts

@@ -0,0 +1,5 @@
+import "./slide.js";
+import "./element.js";
+export { FramvSlideElement } from "./slide.js";
+export { FramvSlidesElement } from "./element.js";
+//# sourceMappingURL=cdn.d.ts.map

package/dist/cdn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/cdn.js

@@ -0,0 +1,5 @@
+import "./slide.js";
+import "./element.js";
+export { FramvSlideElement } from "./slide.js";
+export { FramvSlidesElement } from "./element.js";
+//# sourceMappingURL=cdn.js.map

package/dist/cdn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.js","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/element.d.ts

@@ -0,0 +1,53 @@
+/**
+ * `<framv-slides>` — a slideshow presentation container.
+ *
+ * Attributes:
+ *   transition — global transition: fade, slide, slide-up, zoom (default: slide)
+ *   autoplay   — advance slides automatically
+ *   interval   — autoplay interval in ms (default: 5000)
+ *   controls   — always show controls
+ *   loop       — loop back to first slide
+ *   width      — presentation width (default: 1920)
+ *   height     — presentation height (default: 1080)
+ *
+ * @example
+ * ```html
+ * <framv-slides controls width="1920" height="1080">
+ *   <framv-slide background="#1a1a2e">
+ *     <h1 style="color:white;font-size:64px">Title</h1>
+ *   </framv-slide>
+ *   <framv-slide background="#16213e">
+ *     <h2 style="color:white;font-size:48px">Slide 2</h2>
+ *   </framv-slide>
+ * </framv-slides>
+ * ```
+ */
+export declare class FramvSlidesElement extends HTMLElement {
+    static observedAttributes: string[];
+    private _currentIndex;
+    private _slides;
+    private _stage;
+    private _controls;
+    private _counter;
+    private _progress;
+    private _prevBtn;
+    private _nextBtn;
+    private _fullscreenBtn;
+    private _exportBtn;
+    private _autoplayTimer;
+    private _exporting;
+    get currentIndex(): number;
+    get slideCount(): number;
+    get transition(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    private _showSlide;
+    private _updateCounter;
+    private _toggleFullscreen;
+    private _export;
+}
+//# sourceMappingURL=element.d.ts.map

package/dist/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AA0DA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,kBAAmB,SAAQ,WAAW;IACjD,MAAM,CAAC,kBAAkB,WAAkB;IAE3C,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,OAAO,CAAgD;IAC/D,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,QAAQ,CAAmB;IACnC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,UAAU,CAAqB;IACvC,OAAO,CAAC,cAAc,CAA+C;IACrE,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,iBAAiB,IAAI,IAAI;IA8EzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAQ5C,IAAI,IAAI,IAAI;IAQZ,IAAI,IAAI,IAAI;IAQZ,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMzB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,iBAAiB;YAQX,OAAO;CA8BtB"}

package/dist/element.js

@@ -0,0 +1,265 @@
+const STYLES = `
+  :host {
+    display: block;
+    position: relative;
+    background: #000;
+    overflow: hidden;
+    font-family: system-ui, sans-serif;
+  }
+  .framv-slides-stage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .framv-slides-controls {
+    position: absolute; bottom: 0; left: 0; right: 0;
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 20px;
+    background: linear-gradient(transparent, rgba(0,0,0,0.6));
+    color: #fff; font: 13px system-ui;
+    opacity: 0; transition: opacity 0.3s;
+    z-index: 20;
+  }
+  :host(:hover) .framv-slides-controls,
+  :host([controls]) .framv-slides-controls { opacity: 1; }
+  .framv-slides-controls button {
+    background: rgba(255,255,255,0.15); border: none;
+    color: #fff; cursor: pointer;
+    padding: 8px 14px; font: inherit; border-radius: 6px;
+    transition: background 0.2s;
+  }
+  .framv-slides-controls button:hover { background: rgba(255,255,255,0.3); }
+  .framv-slides-controls button:disabled { opacity: 0.3; cursor: default; }
+  .framv-counter {
+    margin: 0 auto; opacity: 0.7; font-variant-numeric: tabular-nums;
+  }
+  .framv-progress {
+    position: absolute; bottom: 0; left: 0;
+    height: 3px; background: #ff79c6;
+    transition: width 0.3s ease;
+    z-index: 21;
+  }
+  .framv-fullscreen-badge {
+    position: absolute; top: 12px; right: 12px;
+    background: rgba(0,0,0,0.5); color: #fff;
+    padding: 4px 12px; border-radius: 4px;
+    font: 11px system-ui; opacity: 0; transition: opacity 0.3s;
+    z-index: 15;
+  }
+  :host(:hover) .framv-fullscreen-badge { opacity: 1; }
+  .framv-exporting-overlay {
+    position: absolute; inset: 0;
+    background: rgba(0,0,0,0.8); display: flex;
+    align-items: center; justify-content: center;
+    color: #fff; font: 14px system-ui; z-index: 30;
+    gap: 8px;
+  }
+`;
+/**
+ * `<framv-slides>` — a slideshow presentation container.
+ *
+ * Attributes:
+ *   transition — global transition: fade, slide, slide-up, zoom (default: slide)
+ *   autoplay   — advance slides automatically
+ *   interval   — autoplay interval in ms (default: 5000)
+ *   controls   — always show controls
+ *   loop       — loop back to first slide
+ *   width      — presentation width (default: 1920)
+ *   height     — presentation height (default: 1080)
+ *
+ * @example
+ * ```html
+ * <framv-slides controls width="1920" height="1080">
+ *   <framv-slide background="#1a1a2e">
+ *     <h1 style="color:white;font-size:64px">Title</h1>
+ *   </framv-slide>
+ *   <framv-slide background="#16213e">
+ *     <h2 style="color:white;font-size:48px">Slide 2</h2>
+ *   </framv-slide>
+ * </framv-slides>
+ * ```
+ */
+export class FramvSlidesElement extends HTMLElement {
+    static observedAttributes = ["transition"];
+    _currentIndex = 0;
+    _slides = [];
+    _stage;
+    _controls;
+    _counter;
+    _progress;
+    _prevBtn;
+    _nextBtn;
+    _fullscreenBtn;
+    _exportBtn;
+    _autoplayTimer = null;
+    _exporting = false;
+    get currentIndex() {
+        return this._currentIndex;
+    }
+    get slideCount() {
+        return this._slides.length;
+    }
+    get transition() {
+        return this.getAttribute("transition") ?? "slide";
+    }
+    connectedCallback() {
+        const w = this.getAttribute("width") ?? "1920";
+        const h = this.getAttribute("height") ?? "1080";
+        this.style.aspectRatio = `${w} / ${h}`;
+        this.style.maxWidth = "100%";
+        this.innerHTML = `
+      <style>${STYLES}</style>
+      <div class="framv-fullscreen-badge">framv slides · ${w}x${h}</div>
+      <div class="framv-slides-stage"></div>
+      <div class="framv-progress"></div>
+      <div class="framv-slides-controls">
+        <button class="btn-prev">◀ Prev</button>
+        <button class="btn-next">Next ▶</button>
+        <span class="framv-counter">1 / 1</span>
+        <button class="btn-fullscreen">⛶ Fullscreen</button>
+        <button class="btn-export" style="border:1px solid #ff79c6;color:#ff79c6">⬇ Export PDF</button>
+      </div>
+    `;
+        this._stage = this.querySelector(".framv-slides-stage");
+        this._controls = this.querySelector(".framv-slides-controls");
+        this._counter = this.querySelector(".framv-counter");
+        this._progress = this.querySelector(".framv-progress");
+        this._prevBtn = this.querySelector(".btn-prev");
+        this._nextBtn = this.querySelector(".btn-next");
+        this._fullscreenBtn = this.querySelector(".btn-fullscreen");
+        this._exportBtn = this.querySelector(".btn-export");
+        // Move slide children into stage
+        this._slides = Array.from(this.querySelectorAll("framv-slide"));
+        this._slides.forEach((slide, i) => {
+            slide.setAttribute("transition", slide.getAttribute("transition") ?? this.transition);
+            this._stage.appendChild(slide);
+        });
+        // Show first slide
+        this._showSlide(0);
+        // Button events
+        this._prevBtn.addEventListener("click", () => this.prev());
+        this._nextBtn.addEventListener("click", () => this.next());
+        this._fullscreenBtn.addEventListener("click", () => this._toggleFullscreen());
+        this._exportBtn.addEventListener("click", () => this._export());
+        // Keyboard
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "ArrowRight" || e.key === " ") {
+                e.preventDefault();
+                this.next();
+            }
+            if (e.key === "ArrowLeft") {
+                e.preventDefault();
+                this.prev();
+            }
+            if (e.key === "f" || e.key === "F") {
+                e.preventDefault();
+                this._toggleFullscreen();
+            }
+        });
+        // Click to advance (unless clicking a button)
+        this.addEventListener("click", (e) => {
+            const target = e.target;
+            if (target.closest("button, .framv-slides-controls"))
+                return;
+            this.next();
+        });
+        // Autoplay
+        if (this.hasAttribute("autoplay")) {
+            const interval = parseInt(this.getAttribute("interval") ?? "5000");
+            this._autoplayTimer = setInterval(() => this.next(), interval);
+        }
+        this._updateCounter();
+    }
+    disconnectedCallback() {
+        if (this._autoplayTimer)
+            clearInterval(this._autoplayTimer);
+    }
+    attributeChangedCallback(name) {
+        if (name === "transition" && this._slides.length > 0) {
+            this._slides.forEach((s) => {
+                if (!s.hasAttribute("transition"))
+                    s.setAttribute("transition", this.transition);
+            });
+        }
+    }
+    next() {
+        if (this._currentIndex < this._slides.length - 1) {
+            this._showSlide(this._currentIndex + 1);
+        }
+        else if (this.hasAttribute("loop")) {
+            this._showSlide(0);
+        }
+    }
+    prev() {
+        if (this._currentIndex > 0) {
+            this._showSlide(this._currentIndex - 1);
+        }
+        else if (this.hasAttribute("loop")) {
+            this._showSlide(this._slides.length - 1);
+        }
+    }
+    goTo(index) {
+        if (index >= 0 && index < this._slides.length) {
+            this._showSlide(index);
+        }
+    }
+    _showSlide(index) {
+        if (this._slides.length === 0)
+            return;
+        this._slides.forEach((s) => (s.active = false));
+        this._currentIndex = index;
+        this._slides[index].active = true;
+        this._updateCounter();
+    }
+    _updateCounter() {
+        if (this._counter)
+            this._counter.textContent = `${this._currentIndex + 1} / ${this._slides.length}`;
+        if (this._progress)
+            this._progress.style.width = `${((this._currentIndex + 1) / this._slides.length) * 100}%`;
+        if (this._prevBtn)
+            this._prevBtn.disabled = this._currentIndex === 0 && !this.hasAttribute("loop");
+        if (this._nextBtn)
+            this._nextBtn.disabled = this._currentIndex === this._slides.length - 1 && !this.hasAttribute("loop");
+    }
+    _toggleFullscreen() {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            this.requestFullscreen();
+        }
+    }
+    async _export() {
+        if (this._exporting)
+            return;
+        this._exporting = true;
+        const w = parseInt(this.getAttribute("width") ?? "1920");
+        const h = parseInt(this.getAttribute("height") ?? "1080");
+        const overlay = document.createElement("div");
+        overlay.className = "framv-exporting-overlay";
+        this.appendChild(overlay);
+        try {
+            const { jsPDF } = await import("jspdf");
+            const pdf = new jsPDF({ orientation: "l", unit: "px", format: [w, h] });
+            for (let i = 0; i < this._slides.length; i++) {
+                if (i > 0)
+                    pdf.addPage();
+                const slide = this._slides[i];
+                overlay.textContent = `Exporting slide ${i + 1}/${this._slides.length}...`;
+                await pdf.html(slide, { x: 0, y: 0, width: w, windowWidth: w });
+            }
+            pdf.save("framv-presentation.pdf");
+        }
+        catch (err) {
+            console.error("Export failed:", err);
+        }
+        finally {
+            overlay.remove();
+            this._exporting = false;
+        }
+    }
+}
+if (!customElements.get("framv-slides")) {
+    customElements.define("framv-slides", FramvSlidesElement);
+}
+//# sourceMappingURL=element.js.map

package/dist/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { FramvSlideElement } from "./slide.js";
+export { FramvSlidesElement } from "./element.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { FramvSlideElement } from "./slide.js";
+export { FramvSlidesElement } from "./element.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/slide.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<framv-slide>` — a single slide inside `<framv-slides>`.
+ *
+ * Attributes:
+ *   background — CSS background value for the slide
+ *   transition — fade, slide-up, zoom, or slide (default: slide)
+ *
+ * @example
+ * ```html
+ * <framv-slide background="linear-gradient(135deg, #667eea, #764ba2)">
+ *   <h1>My Title</h1>
+ *   <p>Slide content</p>
+ * </framv-slide>
+ * ```
+ */
+export declare class FramvSlideElement extends HTMLElement {
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    set active(val: boolean);
+    get active(): boolean;
+    private _applyBackground;
+}
+//# sourceMappingURL=slide.d.ts.map

package/dist/slide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.d.ts","sourceRoot":"","sources":["../src/slide.ts"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;;;GAcG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,MAAM,CAAC,kBAAkB,WAA0C;IAEnE,iBAAiB,IAAI,IAAI;IAOzB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI5C,IAAI,MAAM,CAAC,GAAG,EAAE,OAAO,EAGtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,OAAO,CAAC,gBAAgB;CAIzB"}

package/dist/slide.js

@@ -0,0 +1,81 @@
+const STYLES = `
+  :host {
+    display: flex;
+    position: absolute;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    opacity: 0;
+    transition: opacity 0.4s ease, transform 0.4s ease;
+    transform: translateX(30px);
+    pointer-events: none;
+  }
+  :host([active]) {
+    opacity: 1;
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+  :host([transition="fade"]) {
+    transition: opacity 0.5s ease;
+    transform: none;
+  }
+  :host([transition="slide-up"]) {
+    transform: translateY(40px);
+  }
+  :host([transition="slide-up"][active]) {
+    transform: translateY(0);
+  }
+  :host([transition="zoom"]) {
+    transform: scale(0.9);
+  }
+  :host([transition="zoom"][active]) {
+    transform: scale(1);
+  }
+`;
+/**
+ * `<framv-slide>` — a single slide inside `<framv-slides>`.
+ *
+ * Attributes:
+ *   background — CSS background value for the slide
+ *   transition — fade, slide-up, zoom, or slide (default: slide)
+ *
+ * @example
+ * ```html
+ * <framv-slide background="linear-gradient(135deg, #667eea, #764ba2)">
+ *   <h1>My Title</h1>
+ *   <p>Slide content</p>
+ * </framv-slide>
+ * ```
+ */
+export class FramvSlideElement extends HTMLElement {
+    static observedAttributes = ["background", "active", "transition"];
+    connectedCallback() {
+        if (!this.shadowRoot) {
+            this.attachShadow({ mode: "open" }).innerHTML = `<style>${STYLES}</style><slot></slot>`;
+        }
+        this._applyBackground();
+    }
+    attributeChangedCallback(name) {
+        if (name === "background")
+            this._applyBackground();
+    }
+    set active(val) {
+        if (val)
+            this.setAttribute("active", "");
+        else
+            this.removeAttribute("active");
+    }
+    get active() {
+        return this.hasAttribute("active");
+    }
+    _applyBackground() {
+        const bg = this.getAttribute("background");
+        if (bg)
+            this.style.background = bg;
+    }
+}
+if (!customElements.get("framv-slide")) {
+    customElements.define("framv-slide", FramvSlideElement);
+}
+//# sourceMappingURL=slide.js.map

package/dist/slide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.js","sourceRoot":"","sources":["../src/slide.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCd,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAChD,MAAM,CAAC,kBAAkB,GAAG,CAAC,YAAY,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEnE,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,GAAG,UAAU,MAAM,uBAAuB,CAAC;QAC1F,CAAC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,wBAAwB,CAAC,IAAY;QACnC,IAAI,IAAI,KAAK,YAAY;YAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACrD,CAAC;IAED,IAAI,MAAM,CAAC,GAAY;QACrB,IAAI,GAAG;YAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;;YACpC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAEO,gBAAgB;QACtB,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAC3C,IAAI,EAAE;YAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;IACrC,CAAC;;AAGH,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;AAC1D,CAAC"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@framv/slides",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b && npm run bundle",
+    "prepublishOnly": "npm run build",
+    "bundle": "esbuild src/index.ts --bundle --format=esm --external:@framv/core --external:jspdf --outfile=dist/bundle.esm.js && esbuild src/cdn.ts --bundle --format=iife --global-name=FramvSlides --outfile=dist/bundle.iife.js"
+  },
+  "dependencies": {
+    "@framv/core": "*",
+    "jspdf": "^4.2.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.27.2",
+    "serve": "^14.2.5",
+    "typescript": "^5.9.3"
+  },
+  "author": "Mens Reversa",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mensreversa/framv.git",
+    "directory": "packages/slides"
+  },
+  "bugs": {
+    "url": "https://github.com/mensreversa/framv/issues"
+  }
+}