{"_id":"@amplify-code/book-reader","_rev":"3-20a049922776d2babc644730dbdc0be3","name":"@amplify-code/book-reader","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@amplify-code/book-reader","version":"1.0.0","keywords":["vue","vue3","ebook","reader","book","flipbook","page-turn","pan-zoom","component"],"author":{"name":"Colin Cameron","email":"colin@amplifycode.com"},"license":"MIT","_id":"@amplify-code/book-reader@1.0.0","maintainers":[{"name":"colincameron","email":"colin@amplifycode.com"}],"homepage":"https://github.com/amplify-code/book-reader#readme","bugs":{"url":"https://github.com/amplify-code/book-reader/issues"},"dist":{"shasum":"23f77fc1181dce3f8d06355ff7ed36f7162522a8","tarball":"https://registry.npmjs.org/@amplify-code/book-reader/-/book-reader-1.0.0.tgz","fileCount":5,"integrity":"sha512-PDMC9BkF4P9VzQYIHzitgseKxkWKxTaz1ESV4tnAc1bUWvHTNx3YZfsSojY13s3W2X+FhkOmDcLhC8nuepMRlQ==","signatures":[{"sig":"MEUCIQDgg6whaJ2fLCcGB2MMPb8jQfx4HjnoWT2pjNGgomYsggIgKKR+JR9GBReI5IeHM9WNIctDdZ9h+zV4Cl8OO3vFNB8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25297},"main":"src/index.js","type":"module","module":"src/index.js","exports":{".":"./src/index.js","./package.json":"./package.json","./EbookReader.vue":"./src/EbookReader.vue"},"gitHead":"3ac5aca14a6b722fdf9e58089341a060665fb8fe","_npmUser":{"name":"colincameron","email":"colin@amplifycode.com"},"repository":{"url":"git+https://github.com/amplify-code/book-reader.git","type":"git"},"_npmVersion":"10.9.2","description":"Headless Vue 3 ebook reading surface: page-turning spread, zoom, swipe and link hotspots, with all chrome left to the host.","directories":{},"sideEffects":["*.vue"],"_nodeVersion":"23.6.1","dependencies":{"@thesoulfresh/pan-z":"^1.2.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/book-reader_1.0.0_1789046602950_0.3714509755174835","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amplify-code/book-reader","version":"1.0.1","keywords":["vue","vue3","ebook","reader","book","flipbook","page-turn","pan-zoom","component"],"author":{"name":"Colin Cameron","email":"colin@amplifycode.com"},"license":"MIT","_id":"@amplify-code/book-reader@1.0.1","maintainers":[{"name":"colincameron","email":"colin@amplifycode.com"}],"homepage":"https://github.com/amplify-code/book-reader#readme","bugs":{"url":"https://github.com/amplify-code/book-reader/issues"},"dist":{"shasum":"a4e13acc9a9f0d4aa03d33476eb4990cf9b2f7d6","tarball":"https://registry.npmjs.org/@amplify-code/book-reader/-/book-reader-1.0.1.tgz","fileCount":5,"integrity":"sha512-IimA7u+EVvnQT7TxUgla0OSccsnxeTqAr+XwK+yv5ylWC04wuBtWOFZZt2lwrNmDVD988Iur/YEgKHhlODyPcg==","signatures":[{"sig":"MEQCIBphloZi6FcJ1jtSO/eLdBaGo1FnQjEDA3G8zsgHUFSIAiAtHWsr3p9tQ4gOCBQs1HyjFY/NtFNRKyOubUSUfIvUNg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIQDWEXZ3i3gIdD/l4sMaswyBTGs0HNDqzjsaQLO/rwiocQIgZDs+uvaz+KEzJf2B7TOy+YixzcUb4IprPZ7bklq/LdU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25282},"main":"src/index.js","type":"module","module":"src/index.js","exports":{".":"./src/index.js","./package.json":"./package.json","./BookReader.vue":"./src/BookReader.vue"},"gitHead":"c0f864a987c0ea2f4040a9b432ebfbb1e5836129","_npmUser":{"name":"colincameron","email":"colin@amplifycode.com"},"repository":{"url":"git+https://github.com/amplify-code/book-reader.git","type":"git"},"_npmVersion":"10.9.2","description":"Headless Vue 3 book reading surface: page-turning spread, zoom, swipe and link hotspots, with all chrome left to the host.","directories":{},"sideEffects":["*.vue"],"_nodeVersion":"23.6.1","dependencies":{"@thesoulfresh/pan-z":"^1.2.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/book-reader_1.0.1_1789046869662_0.7669912939349612","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"_id":"@amplify-code/book-reader@1.0.2","bugs":{"url":"https://github.com/amplify-code/book-reader/issues"},"dist":{"shasum":"8bfed8f28e6553a30f47f65e4339f42f1583adae","tarball":"https://registry.npmjs.org/@amplify-code/book-reader/-/book-reader-1.0.2.tgz","fileCount":5,"integrity":"sha512-lI3UJS5CZW+92FMFYMVgpLfsZJsTIDR12XQBJQbkLSkudMvyGS2ZYzMmP09gxumyN8C/G7L/oWlBSkqk1pEe9Q==","signatures":[{"sig":"MEUCIBLX8NMqphaZ3mNH+2TpU2ehZfpbonOIhy2y6houXs05AiEA2fgfLLXb1FN5ch05c/Mo67E9pH8RIa43Iygeg1bh1Jg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD8FJO/0qMe7sqQ8bZR9bpsmGTu1wNRyoOwd9LSaYK2dQIgNvARD858DzLc1QuPjc0n4EIttcE6zFAeS7dDhVX1c60="}],"unpackedSize":25742},"main":"src/index.js","name":"@amplify-code/book-reader","type":"module","author":{"name":"Colin Cameron","email":"colin@amplifycode.com"},"module":"src/index.js","exports":{".":"./src/index.js","./package.json":"./package.json","./BookReader.vue":"./src/BookReader.vue"},"gitHead":"b1f104c43892dc4d2fc76fece15cde33e93ad742","license":"MIT","version":"1.0.2","_npmUser":{"name":"colincameron","email":"colin@amplifycode.com"},"homepage":"https://github.com/amplify-code/book-reader#readme","keywords":["vue","vue3","ebook","reader","book","flipbook","page-turn","pan-zoom","component"],"repository":{"url":"git+https://github.com/amplify-code/book-reader.git","type":"git"},"_npmVersion":"10.9.2","description":"Headless Vue 3 book reading surface: page-turning spread, zoom, swipe and link hotspots, with all chrome left to the host.","directories":{},"maintainers":[{"name":"colincameron","email":"colin@amplifycode.com"}],"sideEffects":["*.vue"],"_nodeVersion":"23.6.1","dependencies":{"@thesoulfresh/pan-z":"^1.2.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.2.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/book-reader_1.0.2_1789049644397_0.5212940018092931"}}},"time":{"created":"2026-09-10T13:23:22.733Z","modified":"2026-09-10T14:14:04.710Z","1.0.0":"2026-09-10T13:23:23.083Z","1.0.1":"2026-09-10T13:27:49.759Z","1.0.2":"2026-09-10T14:14:04.500Z"},"bugs":{"url":"https://github.com/amplify-code/book-reader/issues"},"author":{"name":"Colin Cameron","email":"colin@amplifycode.com"},"license":"MIT","homepage":"https://github.com/amplify-code/book-reader#readme","keywords":["vue","vue3","ebook","reader","book","flipbook","page-turn","pan-zoom","component"],"repository":{"url":"git+https://github.com/amplify-code/book-reader.git","type":"git"},"description":"Headless Vue 3 book reading surface: page-turning spread, zoom, swipe and link hotspots, with all chrome left to the host.","maintainers":[{"name":"colincameron","email":"colin@amplifycode.com"}],"readme":"# @amplify-code/book-reader\n\nA headless Vue 3 **book reader**. It renders a book as a page-turning spread\nwith pinch/scroll zoom, swipe and clickable link hotspots, plus optional\ncolour-overlay and grayscale layers. All surrounding chrome is left to the\nhost application.\n\nThe reader fills its parent (100% width/height) and reflows to its own container\nvia a `ResizeObserver`, so the host controls all layout, padding and any\nfullscreen wrapper.\n\nThe only JS runtime dependency is\n[`@thesoulfresh/pan-z`](https://www.npmjs.com/package/@thesoulfresh/pan-z)\n(pan/zoom), plus Vue 3 as a peer.\n\n## Requirements\n\nStyled with **Tailwind CSS** utility classes, so the host project must run\nTailwind and be configured to see the component. Add the package to your\n`tailwind.config.js` `content` globs:\n\n```js\ncontent: [\n    // …your app globs…\n    './node_modules/@amplify-code/book-reader/src/**/*.vue',\n],\n```\n\n## Install\n\n```bash\nnpm install @amplify-code/book-reader @thesoulfresh/pan-z\n```\n\nOr copy the `src/` folder into your project.\n\n## Usage\n\nGive the reader a sized parent and build your own controls around it:\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { BookReader } from '@amplify-code/book-reader';\n\nconst reader = ref(null);\nconst page = ref(1);\nconst overlayColour = ref('#ffffff00');\nconst grayscale = ref(false);\n\nconst book = { /* see \"Book shape\" below */ };\nconst pageImageUrl = (p) => `/books/my-book/pages/${p}`;\n</script>\n\n<template>\n    <div class=\"reader-layout\">\n        <!-- Your toolbar -->\n        <header>\n            <button @click=\"reader.prev()\">‹ Prev</button>\n            <span>Page {{ page }} / {{ book.page_count }}</span>\n            <button @click=\"reader.next()\">Next ›</button>\n            <button @click=\"reader.toggleZoom()\">Zoom</button>\n        </header>\n\n        <!-- The reading surface (needs a sized container) -->\n        <main style=\"flex: 1; min-height: 0;\">\n            <BookReader\n                ref=\"reader\"\n                v-model:page=\"page\"\n                :book=\"book\"\n                :page-image-url=\"pageImageUrl\"\n                :overlay-colour=\"overlayColour\"\n                :grayscale=\"grayscale\"\n                @page-view=\"(p) => {/* analytics */}\"\n                @link-click=\"(link) => {/* … */}\"\n            />\n        </main>\n    </div>\n</template>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `book` | `Object` | — (required) | The book to display. See **Book shape**. |\n| `pageImageUrl` | `(page: number) => string` | — (required) | Resolver for a page's full-size image URL (1-indexed). |\n| `page` | `Number` | `1` | Current 1-indexed page. Use with `v-model:page`. |\n| `overlayColour` | `String` | `'#ffffff00'` | CSS colour drawn over the pages as a reading overlay. |\n| `grayscale` | `Boolean` | `false` | Render the pages in grayscale. |\n\nSetting `page` (via `v-model` or directly) animates to that page, so the host's\nown page input, contents list or search results just assign to it — or call\n`goToPage()`.\n\n## Events\n\n| Event | Payload | When |\n| --- | --- | --- |\n| `update:page` | `page: number` | The current page changed (drives `v-model:page`). |\n| `page-change` | `page: number` | A page turn finished. |\n| `page-view` | `page: number` | A page became visible. Fires once per visible page (twice for a spread). Use for analytics. |\n| `link-click` | `link` | A hotspot link was clicked (both `GoTo` and `URI` types). |\n| `zoom-change` | `zoomed: boolean` | The reader zoomed in or out. |\n| `spread-change` | `count: number` | The number of pages shown at once changed (1 or 2). |\n\n`spread-change` is handy for a host page-label like \"12 – 13\" that needs to know\nwhether one or two pages are visible.\n\n## Exposed methods (via template ref)\n\n| Method | Description |\n| --- | --- |\n| `goToPage(page)` | Turn to a 1-indexed page (animated). |\n| `next()` / `prev()` | Turn forward / back by one spread. |\n| `toggleZoom(scale = 1)` | Toggle zoom relative to the given base scale. |\n| `resetZoom()` | Return to fit-to-page. |\n\n## Book shape\n\n```js\n{\n    page_count: 24,\n    page_ratio: 0.7071,   // page width / height used for layout\n    pages: [\n        {\n            page_number: 1,\n            name: '1',    // label the host can show; the reader does not use it\n            links: [\n                // rect is [x1, y1, x2, y2] in a 2500px-tall coordinate space\n                { type: 'GoTo', destination: 4, rect: [100, 200, 300, 260] },\n                { type: 'URI', destination: 'https://example.com', rect: [/* … */] },\n            ],\n        },\n        // …\n    ],\n}\n```\n\nLink `rect` coordinates are interpreted against a 2500px-tall page; the reader\nscales them to the rendered page size. `GoTo.destination` is a 0-indexed page\nindex; `URI.destination` is a URL (a missing scheme is treated as `https://`).\n\nFields like `name`, `toc` and `thumbnail_directory` are the host's business —\nthe reader itself only needs `page_count`, `page_ratio` and `pages[].links`.\n","readmeFilename":"README.md"}