flipbookengine 0.3.0 → 0.5.0

package/dist/flipbook-engine.react.js

@@ -1,43 +1,58 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as g, useRef as o, useImperativeHandle as b, useEffect as c } from "react";
-import { FlipbookEngine as x } from "./flipbook-engine.js";
-const v = g(({
-  className: f,
-  style: l,
-  pdfUrl: s,
-  pages: t,
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as P, useRef as g, useImperativeHandle as x, useEffect as c } from "react";
+import { F as d } from "./engine-BuVkDIh-.js";
+const v = P(({
+  className: a,
+  style: f,
+  pdfUrl: i,
+  pages: s,
   onPageChange: n,
   ...u
-}, p) => {
-  const i = o(null), e = o(null);
-  return b(p, () => ({
+}, l) => {
+  const o = g(null), r = g(null);
+  return x(l, () => ({
     get engine() {
-      return e.current;
+      return r.current;
+    },
+    nextPage: () => {
+      var e;
+      return (e = r.current) == null ? void 0 : e.nextPage();
+    },
+    prevPage: () => {
+      var e;
+      return (e = r.current) == null ? void 0 : e.prevPage();
+    },
+    goToPage: (e) => {
+      var t;
+      return (t = r.current) == null ? void 0 : t.goToPage(e);
     },
     flipNext: () => {
-      var r;
-      return (r = e.current) == null ? void 0 : r.nextPage();
+      var e;
+      return (e = r.current) == null ? void 0 : e.nextPage();
     },
     flipPrev: () => {
-      var r;
-      return (r = e.current) == null ? void 0 : r.prevPage();
+      var e;
+      return (e = r.current) == null ? void 0 : e.prevPage();
     },
-    turnToPage: (r) => {
-      e.current && e.current.goToPage(r);
+    turnToPage: (e) => {
+      var t;
+      return (t = r.current) == null ? void 0 : t.goToPage(e);
     }
-  })), c(() => {
-    if (!i.current) return;
-    const r = new x(i.current, u);
-    e.current = r;
-    const m = r.on("pageChange", (d) => n == null ? void 0 : n(d));
-    return r.init(s, t || []).catch(console.error), () => {
-      m(), r.destroy(), e.current = null;
+  }), []), c(() => {
+    if (!o.current) return;
+    const e = new d(o.current, u);
+    r.current = e;
+    const t = e.on("pageChange", (p) => n == null ? void 0 : n(p));
+    return () => {
+      t(), e.destroy(), r.current = null;
     };
   }, []), c(() => {
-    e.current && e.current.updateOptions(u);
-  }, [u]), c(() => {
-    e.current && e.current.setPages(t || []);
-  }, [t]), /* @__PURE__ */ a("div", { ref: i, className: f, style: { width: "100%", height: "100%", minHeight: "400px", ...l } });
+    const e = r.current;
+    e && e.setPages(s, i).catch(console.error);
+  }, [i, s]), c(() => {
+    var e;
+    (e = r.current) == null || e.updateOptions(u);
+  }, [u]), /* @__PURE__ */ m("div", { ref: o, className: a, style: { width: "100%", height: "100%", minHeight: "400px", ...f } });
 });
 v.displayName = "Flipbook";
 export {

package/dist/flipbook-engine.react.js.map

@@ -1 +1 @@
-{"version":3,"file":"flipbook-engine.react.js","sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * FlipbookEngine\n * Copyright (c) 2026 Murat Dogan\n * SPDX-License-Identifier: AGPL-3.0-or-later\n * https://flipbookengine.com\n */\n\n/** @jsxImportSource react */\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlipbookEngine, FlipbookEngineOptions, FlipbookPageAsset } from '../index';\n\nexport interface FlipbookProps extends Omit<FlipbookEngineOptions, 'theme'> {\n    className?: string;\n    style?: React.CSSProperties;\n    pdfUrl: string;\n    pages?: FlipbookPageAsset[];\n    theme?: 'auto' | 'light' | 'dark';\n    onPageChange?: (e: { currentPage: number; totalPages: number }) => void;\n}\n\nexport interface FlipbookRef {\n    engine: FlipbookEngine | null;\n    flipNext: () => void;\n    flipPrev: () => void;\n    turnToPage: (pageIndex: number) => void;\n}\n\nexport const Flipbook = forwardRef<FlipbookRef, FlipbookProps>(({\n    className,\n    style,\n    pdfUrl,\n    pages,\n    onPageChange,\n    ...options\n}, ref) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const engineRef = useRef<FlipbookEngine | null>(null);\n\n    useImperativeHandle(ref, () => ({\n        get engine() { return engineRef.current; },\n        flipNext: () => engineRef.current?.nextPage(),\n        flipPrev: () => engineRef.current?.prevPage(),\n        turnToPage: (idx: number) => {\n            if (engineRef.current) {\n                engineRef.current.goToPage(idx);\n            }\n        }\n    }));\n\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        const engine = new FlipbookEngine(containerRef.current, options);\n        engineRef.current = engine;\n\n        const unsubscribeChange = engine.on('pageChange', (e: any) => onPageChange?.(e));\n\n        engine.init(pdfUrl, pages || []).catch(console.error);\n\n        return () => {\n            unsubscribeChange();\n            engine.destroy();\n            engineRef.current = null;\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []); // Run once on mount\n\n    useEffect(() => {\n        if (engineRef.current) {\n            engineRef.current.updateOptions(options);\n        }\n    }, [options]);\n\n    useEffect(() => {\n        if (engineRef.current) {\n            engineRef.current.setPages(pages || []);\n        }\n    }, [pages]);\n\n    return <div ref={containerRef} className={className} style={{ width: '100%', height: '100%', minHeight: '400px', ...style }} />;\n});\n\nFlipbook.displayName = 'Flipbook';\n"],"names":["Flipbook","forwardRef","className","style","pdfUrl","pages","onPageChange","options","ref","containerRef","useRef","engineRef","useImperativeHandle","_a","idx","useEffect","engine","FlipbookEngine","unsubscribeChange","e","jsx"],"mappings":";;;AA2BO,MAAMA,IAAWC,EAAuC,CAAC;AAAA,EAC5D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACP,GAAGC,MAAQ;AACP,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAA8B,IAAI;AAEpD,SAAAE,EAAoBJ,GAAK,OAAO;AAAA,IAC5B,IAAI,SAAS;AAAE,aAAOG,EAAU;AAAA,IAAS;AAAA,IACzC,UAAU,MAAA;;AAAM,cAAAE,IAAAF,EAAU,YAAV,gBAAAE,EAAmB;AAAA;AAAA,IACnC,UAAU,MAAA;;AAAM,cAAAA,IAAAF,EAAU,YAAV,gBAAAE,EAAmB;AAAA;AAAA,IACnC,YAAY,CAACC,MAAgB;AACzB,MAAIH,EAAU,WACVA,EAAU,QAAQ,SAASG,CAAG;AAAA,IAEtC;AAAA,EAAA,EACF,GAEFC,EAAU,MAAM;AACZ,QAAI,CAACN,EAAa,QAAS;AAE3B,UAAMO,IAAS,IAAIC,EAAeR,EAAa,SAASF,CAAO;AAC/D,IAAAI,EAAU,UAAUK;AAEpB,UAAME,IAAoBF,EAAO,GAAG,cAAc,CAACG,MAAWb,KAAA,gBAAAA,EAAea,EAAE;AAE/E,WAAAH,EAAO,KAAKZ,GAAQC,KAAS,CAAA,CAAE,EAAE,MAAM,QAAQ,KAAK,GAE7C,MAAM;AACT,MAAAa,EAAA,GACAF,EAAO,QAAA,GACPL,EAAU,UAAU;AAAA,IACxB;AAAA,EAEJ,GAAG,CAAA,CAAE,GAELI,EAAU,MAAM;AACZ,IAAIJ,EAAU,WACVA,EAAU,QAAQ,cAAcJ,CAAO;AAAA,EAE/C,GAAG,CAACA,CAAO,CAAC,GAEZQ,EAAU,MAAM;AACZ,IAAIJ,EAAU,WACVA,EAAU,QAAQ,SAASN,KAAS,CAAA,CAAE;AAAA,EAE9C,GAAG,CAACA,CAAK,CAAC,GAEH,gBAAAe,EAAC,OAAA,EAAI,KAAKX,GAAc,WAAAP,GAAsB,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,GAAGC,KAAS;AACjI,CAAC;AAEDH,EAAS,cAAc;"}
+{"version":3,"file":"flipbook-engine.react.js","sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * FlipbookEngine\n * Copyright (c) 2026 Murat Dogan\n * SPDX-License-Identifier: AGPL-3.0-or-later\n * https://flipbookengine.com\n */\n\n/** @jsxImportSource react */\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlipbookEngine, FlipbookEngineOptions, FlipbookPageAsset } from '../index';\n\nexport interface FlipbookProps extends Omit<FlipbookEngineOptions, 'theme'> {\n    className?: string;\n    style?: React.CSSProperties;\n    pdfUrl?: string;\n    pages?: FlipbookPageAsset[];\n    theme?: 'auto' | 'light' | 'dark';\n    onPageChange?: (e: { currentPage: number; totalPages: number }) => void;\n}\n\nexport interface FlipbookRef {\n    engine: FlipbookEngine | null;\n    nextPage: () => void;\n    prevPage: () => void;\n    goToPage: (pageIndex: number) => void;\n    flipNext: () => void;\n    flipPrev: () => void;\n    turnToPage: (pageIndex: number) => void;\n}\n\nexport const Flipbook = forwardRef<FlipbookRef, FlipbookProps>(({\n    className,\n    style,\n    pdfUrl,\n    pages,\n    onPageChange,\n    ...options\n}, ref) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const engineRef = useRef<FlipbookEngine | null>(null);\n\n    useImperativeHandle(ref, () => ({\n        get engine() { return engineRef.current; },\n        nextPage: () => engineRef.current?.nextPage(),\n        prevPage: () => engineRef.current?.prevPage(),\n        goToPage: (index: number) => engineRef.current?.goToPage(index),\n        flipNext: () => engineRef.current?.nextPage(),\n        flipPrev: () => engineRef.current?.prevPage(),\n        turnToPage: (index: number) => engineRef.current?.goToPage(index)\n    }), []);\n\n    // Create one engine for the mounted component. Source data is managed by the\n    // separate effect below so PDF-only renders do not trigger a second empty init.\n    useEffect(() => {\n        if (!containerRef.current) return;\n\n        const engine = new FlipbookEngine(containerRef.current, options);\n        engineRef.current = engine;\n        const unsubscribeChange = engine.on('pageChange', (e: any) => onPageChange?.(e));\n\n        return () => {\n            unsubscribeChange();\n            engine.destroy();\n            engineRef.current = null;\n        };\n        // The engine is intentionally created once per mount, including Strict Mode remounts.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // A source update is the only place that initializes or reinitializes the engine.\n    useEffect(() => {\n        const engine = engineRef.current;\n        if (!engine) return;\n        engine.setPages(pages, pdfUrl).catch(console.error);\n    }, [pdfUrl, pages]);\n\n    useEffect(() => {\n        engineRef.current?.updateOptions(options);\n    }, [options]);\n\n    return <div ref={containerRef} className={className} style={{ width: '100%', height: '100%', minHeight: '400px', ...style }} />;\n});\n\nFlipbook.displayName = 'Flipbook';\r\n"],"names":["Flipbook","forwardRef","className","style","pdfUrl","pages","onPageChange","options","ref","containerRef","useRef","engineRef","useImperativeHandle","_a","index","useEffect","engine","FlipbookEngine","unsubscribeChange","e","jsx"],"mappings":";;;AA8BO,MAAMA,IAAWC,EAAuC,CAAC;AAAA,EAC5D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACP,GAAGC,MAAQ;AACP,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAA8B,IAAI;AAEpD,SAAAE,EAAoBJ,GAAK,OAAO;AAAA,IAC5B,IAAI,SAAS;AAAE,aAAOG,EAAU;AAAA,IAAS;AAAA,IACzC,UAAU,MAAA;;AAAM,cAAAE,IAAAF,EAAU,YAAV,gBAAAE,EAAmB;AAAA;AAAA,IACnC,UAAU,MAAA;;AAAM,cAAAA,IAAAF,EAAU,YAAV,gBAAAE,EAAmB;AAAA;AAAA,IACnC,UAAU,CAACC,MAAA;;AAAkB,cAAAD,IAAAF,EAAU,YAAV,gBAAAE,EAAmB,SAASC;AAAA;AAAA,IACzD,UAAU,MAAA;;AAAM,cAAAD,IAAAF,EAAU,YAAV,gBAAAE,EAAmB;AAAA;AAAA,IACnC,UAAU,MAAA;;AAAM,cAAAA,IAAAF,EAAU,YAAV,gBAAAE,EAAmB;AAAA;AAAA,IACnC,YAAY,CAACC,MAAA;;AAAkB,cAAAD,IAAAF,EAAU,YAAV,gBAAAE,EAAmB,SAASC;AAAA;AAAA,EAAK,IAChE,CAAA,CAAE,GAINC,EAAU,MAAM;AACZ,QAAI,CAACN,EAAa,QAAS;AAE3B,UAAMO,IAAS,IAAIC,EAAeR,EAAa,SAASF,CAAO;AAC/D,IAAAI,EAAU,UAAUK;AACpB,UAAME,IAAoBF,EAAO,GAAG,cAAc,CAACG,MAAWb,KAAA,gBAAAA,EAAea,EAAE;AAE/E,WAAO,MAAM;AACT,MAAAD,EAAA,GACAF,EAAO,QAAA,GACPL,EAAU,UAAU;AAAA,IACxB;AAAA,EAGJ,GAAG,CAAA,CAAE,GAGLI,EAAU,MAAM;AACZ,UAAMC,IAASL,EAAU;AACzB,IAAKK,KACLA,EAAO,SAASX,GAAOD,CAAM,EAAE,MAAM,QAAQ,KAAK;AAAA,EACtD,GAAG,CAACA,GAAQC,CAAK,CAAC,GAElBU,EAAU,MAAM;;AACZ,KAAAF,IAAAF,EAAU,YAAV,QAAAE,EAAmB,cAAcN;AAAA,EACrC,GAAG,CAACA,CAAO,CAAC,GAEL,gBAAAa,EAAC,OAAA,EAAI,KAAKX,GAAc,WAAAP,GAAsB,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,GAAGC,KAAS;AACjI,CAAC;AAEDH,EAAS,cAAc;"}

package/dist/flipbook-engine.vue.js

@@ -1,11 +1,12 @@
-import { defineComponent as l, ref as u, onMounted as f, onBeforeUnmount as g, watch as r, h as s } from "vue";
-import { FlipbookEngine as d } from "./flipbook-engine.js";
-const m = l({
+import { defineComponent as d, ref as s, onMounted as g, onBeforeUnmount as P, watch as l, h as c } from "vue";
+import { F as h } from "./engine-BuVkDIh-.js";
+const v = d({
   name: "Flipbook",
   props: {
     pdfUrl: {
       type: String,
-      required: !0
+      required: !1,
+      default: ""
     },
     pages: {
       type: Array,
@@ -18,31 +19,33 @@ const m = l({
     }
   },
   emits: ["pageChange"],
-  setup(n, { emit: a, expose: p }) {
-    const o = u(null);
-    let e = null, i;
-    return f(() => {
-      o.value && (e = new d(o.value, n.options), i = e.on("pageChange", (t) => a("pageChange", t)), e.init(n.pdfUrl, n.pages || []).catch(console.error));
-    }), g(() => {
-      i && i(), e && (e.destroy(), e = null);
-    }), r(() => n.options, (t) => {
-      e && e.updateOptions(t);
-    }, { deep: !0 }), r(() => n.pages, (t) => {
-      e && e.setPages(t || []);
-    }, { deep: !0 }), p({
+  setup(o, { emit: p, expose: f }) {
+    const r = s(null);
+    let e = null, a;
+    return g(() => {
+      r.value && (e = new h(r.value, o.options), a = e.on("pageChange", (t) => p("pageChange", t)), e.setPages(o.pages, o.pdfUrl).catch(console.error));
+    }), P(() => {
+      a == null || a(), e == null || e.destroy(), e = null;
+    }), l(() => o.options, (t) => {
+      e == null || e.updateOptions(t);
+    }, { deep: !0 }), l([() => o.pdfUrl, () => o.pages], ([t, u]) => {
+      e == null || e.setPages(u || [], t || "").catch(console.error);
+    }, { deep: !0 }), f({
       getEngine: () => e,
+      engine: () => e,
+      nextPage: () => e == null ? void 0 : e.nextPage(),
+      prevPage: () => e == null ? void 0 : e.prevPage(),
+      goToPage: (t) => e == null ? void 0 : e.goToPage(t),
       flipNext: () => e == null ? void 0 : e.nextPage(),
       flipPrev: () => e == null ? void 0 : e.prevPage(),
-      turnToPage: (t) => {
-        e && e.goToPage(t);
-      }
-    }), () => s("div", {
-      ref: o,
+      turnToPage: (t) => e == null ? void 0 : e.goToPage(t)
+    }), () => c("div", {
+      ref: r,
       style: { width: "100%", height: "100%", minHeight: "400px" }
     });
   }
 });
 export {
-  m as Flipbook
+  v as Flipbook
 };
 //# sourceMappingURL=flipbook-engine.vue.js.map

package/dist/flipbook-engine.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"flipbook-engine.vue.js","sources":["../src/vue/index.ts"],"sourcesContent":["/**\n * FlipbookEngine\n * Copyright (c) 2026 Murat Dogan\n * SPDX-License-Identifier: AGPL-3.0-or-later\n * https://flipbookengine.com\n */\n\nimport { defineComponent, h, ref, onMounted, onBeforeUnmount, watch, PropType } from 'vue';\nimport { FlipbookEngine, FlipbookEngineOptions, FlipbookPageAsset } from '../index';\n\nexport const Flipbook = defineComponent({\n    name: 'Flipbook',\n    props: {\n        pdfUrl: {\n            type: String,\n            required: true\n        },\n        pages: {\n            type: Array as PropType<FlipbookPageAsset[]>,\n            required: false,\n            default: () => []\n        },\n        options: {\n            type: Object as PropType<Omit<FlipbookEngineOptions, 'theme'> & { theme?: 'auto' | 'light' | 'dark' }>,\n            default: () => ({})\n        }\n    },\n    emits: ['pageChange'],\n    setup(props, { emit, expose }) {\n        const containerRef = ref<HTMLElement | null>(null);\n        let engine: FlipbookEngine | null = null;\n        let unsubscribeChange: () => void;\n \n        onMounted(() => {\n            if (!containerRef.value) return;\n \n            engine = new FlipbookEngine(containerRef.value, props.options as any);\n \n            unsubscribeChange = engine.on('pageChange', (e: any) => emit('pageChange', e));\n \n            engine.init(props.pdfUrl, props.pages || []).catch(console.error);\n        });\n \n        onBeforeUnmount(() => {\n            if (unsubscribeChange) unsubscribeChange();\n            if (engine) {\n                engine.destroy();\n                engine = null;\n            }\n        });\n \n        watch(() => props.options, (newOptions) => {\n            if (engine) {\n                engine.updateOptions(newOptions as any);\n            }\n        }, { deep: true });\n \n        watch(() => props.pages, (newPages) => {\n            if (engine) {\n                engine.setPages(newPages || []);\n            }\n        }, { deep: true });\n\n        expose({\n            getEngine: () => engine,\n            flipNext: () => engine?.nextPage(),\n            flipPrev: () => engine?.prevPage(),\n            turnToPage: (idx: number) => {\n                if (engine) {\n                    engine.goToPage(idx);\n                }\n            }\n        });\n\n        return () => h('div', {\n            ref: containerRef,\n            style: { width: '100%', height: '100%', minHeight: '400px' }\n        });\n    }\n});\n"],"names":["Flipbook","defineComponent","props","emit","expose","containerRef","ref","engine","unsubscribeChange","onMounted","FlipbookEngine","e","onBeforeUnmount","watch","newOptions","newPages","idx","h"],"mappings":";;AAUO,MAAMA,IAAWC,EAAgB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AAAA,IACH,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEd,OAAO;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,MAAM,CAAA;AAAA,IAAC;AAAA,IAEpB,SAAS;AAAA,MACL,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IAAC;AAAA,EACrB;AAAA,EAEJ,OAAO,CAAC,YAAY;AAAA,EACpB,MAAMC,GAAO,EAAE,MAAAC,GAAM,QAAAC,KAAU;AAC3B,UAAMC,IAAeC,EAAwB,IAAI;AACjD,QAAIC,IAAgC,MAChCC;AAEJ,WAAAC,EAAU,MAAM;AACZ,MAAKJ,EAAa,UAElBE,IAAS,IAAIG,EAAeL,EAAa,OAAOH,EAAM,OAAc,GAEpEM,IAAoBD,EAAO,GAAG,cAAc,CAACI,MAAWR,EAAK,cAAcQ,CAAC,CAAC,GAE7EJ,EAAO,KAAKL,EAAM,QAAQA,EAAM,SAAS,CAAA,CAAE,EAAE,MAAM,QAAQ,KAAK;AAAA,IACpE,CAAC,GAEDU,EAAgB,MAAM;AAClB,MAAIJ,KAAmBA,EAAA,GACnBD,MACAA,EAAO,QAAA,GACPA,IAAS;AAAA,IAEjB,CAAC,GAEDM,EAAM,MAAMX,EAAM,SAAS,CAACY,MAAe;AACvC,MAAIP,KACAA,EAAO,cAAcO,CAAiB;AAAA,IAE9C,GAAG,EAAE,MAAM,IAAM,GAEjBD,EAAM,MAAMX,EAAM,OAAO,CAACa,MAAa;AACnC,MAAIR,KACAA,EAAO,SAASQ,KAAY,EAAE;AAAA,IAEtC,GAAG,EAAE,MAAM,IAAM,GAEjBX,EAAO;AAAA,MACH,WAAW,MAAMG;AAAA,MACjB,UAAU,MAAMA,KAAA,gBAAAA,EAAQ;AAAA,MACxB,UAAU,MAAMA,KAAA,gBAAAA,EAAQ;AAAA,MACxB,YAAY,CAACS,MAAgB;AACzB,QAAIT,KACAA,EAAO,SAASS,CAAG;AAAA,MAE3B;AAAA,IAAA,CACH,GAEM,MAAMC,EAAE,OAAO;AAAA,MAClB,KAAKZ;AAAA,MACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAA;AAAA,IAAQ,CAC9D;AAAA,EACL;AACJ,CAAC;"}
+{"version":3,"file":"flipbook-engine.vue.js","sources":["../src/vue/index.ts"],"sourcesContent":["/**\n * FlipbookEngine\n * Copyright (c) 2026 Murat Dogan\n * SPDX-License-Identifier: AGPL-3.0-or-later\n * https://flipbookengine.com\n */\n\nimport { defineComponent, h, ref, onMounted, onBeforeUnmount, watch, PropType } from 'vue';\nimport { FlipbookEngine, FlipbookEngineOptions, FlipbookPageAsset } from '../index';\n\nexport const Flipbook = defineComponent({\n    name: 'Flipbook',\n    props: {\n        pdfUrl: {\n            type: String,\n            required: false,\n            default: ''\n        },\n        pages: {\n            type: Array as PropType<FlipbookPageAsset[]>,\n            required: false,\n            default: () => []\n        },\n        options: {\n            type: Object as PropType<Omit<FlipbookEngineOptions, 'theme'> & { theme?: 'auto' | 'light' | 'dark' }>,\n            default: () => ({})\n        }\n    },\n    emits: ['pageChange'],\n    setup(props, { emit, expose }) {\n        const containerRef = ref<HTMLElement | null>(null);\n        let engine: FlipbookEngine | null = null;\n        let unsubscribeChange: (() => void) | undefined;\n\n        onMounted(() => {\n            if (!containerRef.value) return;\n\n            engine = new FlipbookEngine(containerRef.value, props.options as any);\n            unsubscribeChange = engine.on('pageChange', (e: any) => emit('pageChange', e));\n            engine.setPages(props.pages, props.pdfUrl).catch(console.error);\n        });\n\n        onBeforeUnmount(() => {\n            unsubscribeChange?.();\n            engine?.destroy();\n            engine = null;\n        });\n\n        watch(() => props.options, (newOptions) => {\n            engine?.updateOptions(newOptions as any);\n        }, { deep: true });\n\n        // Source changes are handled together to guarantee one reinitialization per update.\n        watch([() => props.pdfUrl, () => props.pages], ([newPdfUrl, newPages]) => {\n            engine?.setPages(newPages || [], newPdfUrl || '').catch(console.error);\n        }, { deep: true });\n\n        expose({\n            getEngine: () => engine,\n            engine: () => engine,\n            nextPage: () => engine?.nextPage(),\n            prevPage: () => engine?.prevPage(),\n            goToPage: (index: number) => engine?.goToPage(index),\n            flipNext: () => engine?.nextPage(),\n            flipPrev: () => engine?.prevPage(),\n            turnToPage: (index: number) => engine?.goToPage(index)\n        });\n\n        return () => h('div', {\n            ref: containerRef,\n            style: { width: '100%', height: '100%', minHeight: '400px' }\n        });\n    }\n});\r\n"],"names":["Flipbook","defineComponent","props","emit","expose","containerRef","ref","engine","unsubscribeChange","onMounted","FlipbookEngine","e","onBeforeUnmount","watch","newOptions","newPdfUrl","newPages","index","h"],"mappings":";;AAUO,MAAMA,IAAWC,EAAgB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AAAA,IACH,QAAQ;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEb,OAAO;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS,MAAM,CAAA;AAAA,IAAC;AAAA,IAEpB,SAAS;AAAA,MACL,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IAAC;AAAA,EACrB;AAAA,EAEJ,OAAO,CAAC,YAAY;AAAA,EACpB,MAAMC,GAAO,EAAE,MAAAC,GAAM,QAAAC,KAAU;AAC3B,UAAMC,IAAeC,EAAwB,IAAI;AACjD,QAAIC,IAAgC,MAChCC;AAEJ,WAAAC,EAAU,MAAM;AACZ,MAAKJ,EAAa,UAElBE,IAAS,IAAIG,EAAeL,EAAa,OAAOH,EAAM,OAAc,GACpEM,IAAoBD,EAAO,GAAG,cAAc,CAACI,MAAWR,EAAK,cAAcQ,CAAC,CAAC,GAC7EJ,EAAO,SAASL,EAAM,OAAOA,EAAM,MAAM,EAAE,MAAM,QAAQ,KAAK;AAAA,IAClE,CAAC,GAEDU,EAAgB,MAAM;AAClB,MAAAJ,KAAA,QAAAA,KACAD,KAAA,QAAAA,EAAQ,WACRA,IAAS;AAAA,IACb,CAAC,GAEDM,EAAM,MAAMX,EAAM,SAAS,CAACY,MAAe;AACvC,MAAAP,KAAA,QAAAA,EAAQ,cAAcO;AAAA,IAC1B,GAAG,EAAE,MAAM,IAAM,GAGjBD,EAAM,CAAC,MAAMX,EAAM,QAAQ,MAAMA,EAAM,KAAK,GAAG,CAAC,CAACa,GAAWC,CAAQ,MAAM;AACtE,MAAAT,KAAA,QAAAA,EAAQ,SAASS,KAAY,IAAID,KAAa,IAAI,MAAM,QAAQ;AAAA,IACpE,GAAG,EAAE,MAAM,IAAM,GAEjBX,EAAO;AAAA,MACH,WAAW,MAAMG;AAAA,MACjB,QAAQ,MAAMA;AAAA,MACd,UAAU,MAAMA,KAAA,gBAAAA,EAAQ;AAAA,MACxB,UAAU,MAAMA,KAAA,gBAAAA,EAAQ;AAAA,MACxB,UAAU,CAACU,MAAkBV,KAAA,gBAAAA,EAAQ,SAASU;AAAA,MAC9C,UAAU,MAAMV,KAAA,gBAAAA,EAAQ;AAAA,MACxB,UAAU,MAAMA,KAAA,gBAAAA,EAAQ;AAAA,MACxB,YAAY,CAACU,MAAkBV,KAAA,gBAAAA,EAAQ,SAASU;AAAA,IAAK,CACxD,GAEM,MAAMC,EAAE,OAAO;AAAA,MAClB,KAAKb;AAAA,MACL,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAA;AAAA,IAAQ,CAC9D;AAAA,EACL;AACJ,CAAC;"}

package/dist/react/index.d.ts

@@ -4,7 +4,7 @@ import { FlipbookEngine, FlipbookEngineOptions, FlipbookPageAsset } from '../ind
 export interface FlipbookProps extends Omit<FlipbookEngineOptions, 'theme'> {
     className?: string;
     style?: React.CSSProperties;
-    pdfUrl: string;
+    pdfUrl?: string;
     pages?: FlipbookPageAsset[];
     theme?: 'auto' | 'light' | 'dark';
     onPageChange?: (e: {
@@ -14,6 +14,9 @@ export interface FlipbookProps extends Omit<FlipbookEngineOptions, 'theme'> {
 }
 export interface FlipbookRef {
     engine: FlipbookEngine | null;
+    nextPage: () => void;
+    prevPage: () => void;
+    goToPage: (pageIndex: number) => void;
     flipNext: () => void;
     flipPrev: () => void;
     turnToPage: (pageIndex: number) => void;

package/dist/state/store.d.ts

@@ -1,32 +1,51 @@
+import { Signal, ReadonlySignal } from '@preact/signals-core';
 import { FlipbookThemeMode } from '../theme/theme';
 import { NormalizedFlipbookPage } from '../model/pages';
 import { FlipbookEngineOptions } from '../engine';
+import { PartialFlipbookMessages } from '../i18n/service';
 
-export declare const currentPage: import('@preact/signals-core').Signal<number>;
-export declare const totalPages: import('@preact/signals-core').Signal<number>;
-export declare const isSingleMode: import('@preact/signals-core').Signal<boolean>;
-export declare const showThumbs: import('@preact/signals-core').Signal<boolean>;
-export declare const showArrows: import('@preact/signals-core').Signal<boolean>;
-export declare const orientation: import('@preact/signals-core').Signal<"landscape" | "portrait">;
-export declare const flipState: import('@preact/signals-core').Signal<"read" | "fold_corner" | "flipping">;
-export declare const themeMode: import('@preact/signals-core').Signal<FlipbookThemeMode>;
-export declare const allowDownload: import('@preact/signals-core').Signal<boolean>;
-export declare const hasDownloadUrl: import('@preact/signals-core').Signal<boolean>;
-export declare const primaryColor: import('@preact/signals-core').Signal<string>;
-export declare const whiteLabel: import('@preact/signals-core').Signal<boolean>;
-export declare const isZoomed: import('@preact/signals-core').Signal<boolean>;
-export declare const isAutoPlaying: import('@preact/signals-core').Signal<boolean>;
-export declare const autoPlayInterval: import('@preact/signals-core').Signal<number>;
-export declare const soundEnabled: import('@preact/signals-core').Signal<boolean>;
-export declare const zoomState: import('@preact/signals-core').Signal<{
+export type FlipState = 'read' | 'fold_corner' | 'flipping';
+export type Orientation = 'landscape' | 'portrait';
+export interface ZoomState {
     isActive: boolean;
     translateX: number;
     translateY: number;
     isDragging: boolean;
     scale: number;
-}>;
-export declare const pages: import('@preact/signals-core').Signal<NormalizedFlipbookPage[]>;
-export declare const isDoublePageLayout: import('@preact/signals-core').ReadonlySignal<boolean>;
-export declare const isFrontCover: import('@preact/signals-core').ReadonlySignal<boolean>;
-export declare const isBackCover: import('@preact/signals-core').ReadonlySignal<boolean>;
+}
+export interface FlipbookStore {
+    currentPage: Signal<number>;
+    totalPages: Signal<number>;
+    isSingleMode: Signal<boolean>;
+    showThumbs: Signal<boolean>;
+    showArrows: Signal<boolean>;
+    orientation: Signal<Orientation>;
+    flipState: Signal<FlipState>;
+    themeMode: Signal<FlipbookThemeMode>;
+    allowDownload: Signal<boolean>;
+    hasDownloadUrl: Signal<boolean>;
+    primaryColor: Signal<string>;
+    whiteLabel: Signal<boolean>;
+    isZoomed: Signal<boolean>;
+    isAutoPlaying: Signal<boolean>;
+    autoPlayInterval: Signal<number>;
+    soundEnabled: Signal<boolean>;
+    locale: Signal<string>;
+    messages: Signal<Partial<Record<string, PartialFlipbookMessages>>>;
+    zoomState: Signal<ZoomState>;
+    pages: Signal<NormalizedFlipbookPage[]>;
+    isDoublePageLayout: ReadonlySignal<boolean>;
+    isFrontCover: ReadonlySignal<boolean>;
+    isBackCover: ReadonlySignal<boolean>;
+    init(options: FlipbookEngineOptions, total: number, mappedPages: NormalizedFlipbookPage[], hasPdfUrl: boolean): void;
+}
+/** Creates an isolated reactive state container for one FlipbookEngine instance. */
+export declare function createFlipbookStore(): FlipbookStore;
+export declare const currentPage: Signal<number>, totalPages: Signal<number>, isSingleMode: Signal<boolean>;
+export declare const showThumbs: Signal<boolean>, showArrows: Signal<boolean>, orientation: Signal<Orientation>;
+export declare const flipState: Signal<FlipState>, themeMode: Signal<FlipbookThemeMode>, allowDownload: Signal<boolean>;
+export declare const hasDownloadUrl: Signal<boolean>, primaryColor: Signal<string>, whiteLabel: Signal<boolean>;
+export declare const isZoomed: Signal<boolean>, isAutoPlaying: Signal<boolean>, autoPlayInterval: Signal<number>;
+export declare const soundEnabled: Signal<boolean>, locale: Signal<string>, messages: Signal<Partial<Record<string, Partial<import('..').FlipbookMessages>>>>, zoomState: Signal<ZoomState>, pages: Signal<NormalizedFlipbookPage[]>;
+export declare const isDoublePageLayout: ReadonlySignal<boolean>, isFrontCover: ReadonlySignal<boolean>, isBackCover: ReadonlySignal<boolean>;
 export declare function initStore(options: FlipbookEngineOptions, total: number, mappedPages: NormalizedFlipbookPage[], hasPdfUrl: boolean): void;

package/dist/vue/index.d.ts

@@ -4,7 +4,8 @@ import { FlipbookEngineOptions, FlipbookPageAsset } from '../index';
 export declare const Flipbook: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     pdfUrl: {
         type: StringConstructor;
-        required: true;
+        required: false;
+        default: string;
     };
     pages: {
         type: PropType<FlipbookPageAsset[]>;
@@ -22,7 +23,8 @@ export declare const Flipbook: import('vue').DefineComponent<import('vue').Extra
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "pageChange"[], "pageChange", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     pdfUrl: {
         type: StringConstructor;
-        required: true;
+        required: false;
+        default: string;
     };
     pages: {
         type: PropType<FlipbookPageAsset[]>;
@@ -39,6 +41,7 @@ export declare const Flipbook: import('vue').DefineComponent<import('vue').Extra
     onPageChange?: ((...args: any[]) => any) | undefined;
 }>, {
     pages: FlipbookPageAsset[];
+    pdfUrl: string;
     options: Omit<FlipbookEngineOptions, "theme"> & {
         theme?: "auto" | "light" | "dark";
     };

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "flipbookengine",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "A modern, embeddable HTML flipbook engine for PDF-backed catalogs and digital publications.",
   "private": false,
   "scripts": {
     "dev": "vite",
     "build": "vite build && vite build --config vite.config.iife.js",
     "test": "tsx --loader ./tests/css-loader.js --test tests/*.test.ts",
+    "test:e2e": "playwright test",
     "typecheck": "tsc --noEmit",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "pack:check": "npm pack --dry-run",
+    "audit:deps": "npm audit --omit=dev --audit-level=high",
+    "release:verify": "npm run typecheck && npm test && npm run build && npm run audit:deps && npm run pack:check"
   },
   "keywords": [
     "flipbook",
@@ -84,12 +88,15 @@
     }
   },
   "devDependencies": {
+    "@playwright/test": "^1.63.0",
     "@types/jsdom": "^28.0.3",
     "@types/node": "^25.0.10",
     "@types/page-flip": "^2.0.4",
     "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "rimraf": "^6.0.0",
     "tsx": "^4.22.4",
     "typescript": "^5.0.0",