@itsmrtr/bunkoshelf 1.6.0 → 1.7.1

package/dist/.next/static/chunks/turbopack-15symwk990fzy.js

@@ -0,0 +1 @@
+(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,{otherChunks:["static/chunks/0~s79jl452jzo.js","static/chunks/10sgtjqpv_y13.js","static/chunks/07jb-isz8w1ka.js","static/chunks/0m58q2exkjk_h.js","static/chunks/17lvd-1dh8nb8.js"],runtimeModuleIds:[7634]}]),(()=>{let e;if(!Array.isArray(globalThis.TURBOPACK))return;let t="/_next/",r=function(){if(null!=self.TURBOPACK_ASSET_SUFFIX)return self.TURBOPACK_ASSET_SUFFIX;let e=document?.currentScript?.getAttribute?.("src")??"",t=e.indexOf("?");return t>=0?e.slice(t):""}(),n=["NEXT_DEPLOYMENT_ID","NEXT_CLIENT_ASSET_SUFFIX"];var o,i=((o=i||{})[o.Runtime=0]="Runtime",o[o.Parent=1]="Parent",o[o.Update=2]="Update",o);let l=new WeakMap;function s(e,t){this.m=e,this.e=t}let u=s.prototype,a=Object.prototype.hasOwnProperty,c="u">typeof Symbol&&Symbol.toStringTag;function f(e,t,r){a.call(e,t)||Object.defineProperty(e,t,r)}function p(e,t){let r=e[t];return r||(r=h(t),e[t]=r),r}function h(e){return{exports:{},error:void 0,id:e,namespaceObject:void 0}}function d(e,t){f(e,"__esModule",{value:!0}),c&&f(e,c,{value:"Module"});let r=0;for(;r<t.length;){let n=t[r++],o=t[r++];if("number"==typeof o)if(0===o)f(e,n,{value:t[r++],enumerable:!0,writable:!1});else throw Error(`unexpected tag: ${o}`);else"function"==typeof t[r]?f(e,n,{get:o,set:t[r++],enumerable:!0}):f(e,n,{get:o,enumerable:!0})}Object.seal(e)}function m(e,t){(null!=t?p(this.c,t):this.m).exports=e}u.s=function(e,t){let r,n;null!=t?n=(r=p(this.c,t)).exports:(r=this.m,n=this.e),r.namespaceObject=n,d(n,e)},u.j=function(e,t){var r,n;let o,i,s;null!=t?i=(o=p(this.c,t)).exports:(o=this.m,i=this.e);let u=(r=o,n=i,(s=l.get(r))||(l.set(r,s=[]),r.exports=r.namespaceObject=new Proxy(n,{get(e,t){if(a.call(e,t)||"default"===t||"__esModule"===t)return Reflect.get(e,t);for(let e of s){let r=Reflect.get(e,t);if(void 0!==r)return r}},ownKeys(e){let t=Reflect.ownKeys(e);for(let e of s)for(let r of Reflect.ownKeys(e))"default"===r||t.includes(r)||t.push(r);return t}})),s);"object"==typeof e&&null!==e&&u.push(e)},u.v=m,u.n=function(e,t){let r;(r=null!=t?p(this.c,t):this.m).exports=r.namespaceObject=e};let b=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,y=[null,b({}),b([]),b(b)];function g(e,t,r){let n=[],o=-1;for(let t=e;("object"==typeof t||"function"==typeof t)&&!y.includes(t);t=b(t))for(let r of Object.getOwnPropertyNames(t))n.push(r,function(e,t){return()=>e[t]}(e,r)),-1===o&&"default"===r&&(o=n.length-1);return r&&o>=0||(o>=0?n.splice(o,1,0,e):n.push("default",0,e)),d(t,n),t}function O(e){let t=B(e,this.m);if(t.namespaceObject)return t.namespaceObject;let r=t.exports;return t.namespaceObject=g(r,"function"==typeof r?function(...e){return r.apply(this,e)}:Object.create(null),r&&r.__esModule)}function w(e){let t=e.indexOf("#");-1!==t&&(e=e.substring(0,t));let r=e.indexOf("?");return -1!==r&&(e=e.substring(0,r)),e}function j(){let e,t;return{promise:new Promise((r,n)=>{t=n,e=r}),resolve:e,reject:t}}u.i=O,u.A=function(e){return this.r(e)(O.bind(this))},u.t="function"==typeof require?require:function(){throw Error("Unexpected use of runtime require")},u.r=function(e){return B(e,this.m).exports},u.f=function(e){function t(t){if(t=w(t),a.call(e,t))return e[t].module();let r=Error(`Cannot find module '${t}'`);throw r.code="MODULE_NOT_FOUND",r}return t.keys=()=>Object.keys(e),t.resolve=t=>{if(t=w(t),a.call(e,t))return e[t].id();let r=Error(`Cannot find module '${t}'`);throw r.code="MODULE_NOT_FOUND",r},t.import=async e=>await t(e),t};let k=Symbol("turbopack queues"),v=Symbol("turbopack exports"),U=Symbol("turbopack error");function C(e){e&&1!==e.status&&(e.status=1,e.forEach(e=>e.queueCount--),e.forEach(e=>e.queueCount--?e.queueCount++:e()))}u.a=function(e,t){let r=this.m,n=t?Object.assign([],{status:-1}):void 0,o=new Set,{resolve:i,reject:l,promise:s}=j(),u=Object.assign(s,{[v]:r.exports,[k]:e=>{n&&e(n),o.forEach(e),u.catch(()=>{})}}),a={get:()=>u,set(e){e!==u&&(u[v]=e)}};Object.defineProperty(r,"exports",a),Object.defineProperty(r,"namespaceObject",a),e(function(e){let t=e.map(e=>{if(null!==e&&"object"==typeof e){if(k in e)return e;if(null!=e&&"object"==typeof e&&"then"in e&&"function"==typeof e.then){let t=Object.assign([],{status:0}),r={[v]:{},[k]:e=>e(t)};return e.then(e=>{r[v]=e,C(t)},e=>{r[U]=e,C(t)}),r}}return{[v]:e,[k]:()=>{}}}),r=()=>t.map(e=>{if(e[U])throw e[U];return e[v]}),{promise:i,resolve:l}=j(),s=Object.assign(()=>l(r),{queueCount:0});function u(e){e!==n&&!o.has(e)&&(o.add(e),e&&0===e.status&&(s.queueCount++,e.push(s)))}return t.map(e=>e[k](u)),s.queueCount?i:r()},function(e){e?l(u[U]=e):i(u[v]),C(n)}),n&&-1===n.status&&(n.status=0)};let P=function(e){let t=new URL(e,"x:/"),r={};for(let e in t)r[e]=t[e];for(let t in r.href=e,r.pathname=e.replace(/[?#].*/,""),r.origin=r.protocol="",r.toString=r.toJSON=(...t)=>e,r)Object.defineProperty(this,t,{enumerable:!0,configurable:!0,value:r[t]})};function R(e,t){throw Error(`Invariant: ${t(e)}`)}P.prototype=URL.prototype,u.U=P,u.z=function(e){throw Error("dynamic usage of require is not supported")},u.g=globalThis;let S=s.prototype,$=new Map;u.M=$;let _=new Map,E=new Map;async function T(e,t,r){let n;if("string"==typeof r)return M(e,t,q(r));let o=r.included||[],i=o.map(e=>!!$.has(e)||_.get(e));if(i.length>0&&i.every(e=>e))return void await Promise.all(i);let l=r.moduleChunks||[],s=l.map(e=>E.get(e)).filter(e=>e);if(s.length>0){if(s.length===l.length)return void await Promise.all(s);let r=new Set;for(let e of l)E.has(e)||r.add(e);for(let n of r){let r=M(e,t,q(n));E.set(n,r),s.push(r)}n=Promise.all(s)}else{for(let o of(n=M(e,t,q(r.path)),l))E.has(o)||E.set(o,n)}for(let e of o)_.has(e)||_.set(e,n);await n}S.l=function(e){return T(i.Parent,this.m.id,e)};let A=Promise.resolve(void 0),x=new WeakMap;function M(t,r,n){let o=e.loadChunkCached(t,n),l=x.get(o);if(void 0===l){let e=x.set.bind(x,o,A);l=o.then(e).catch(e=>{let o;switch(t){case i.Runtime:o=`as a runtime dependency of chunk ${r}`;break;case i.Parent:o=`from module ${r}`;break;case i.Update:o="from an HMR update";break;default:R(t,e=>`Unknown source type: ${e}`)}let l=Error(`Failed to load chunk ${n} ${o}${e?`: ${e}`:""}`,e?{cause:e}:void 0);throw l.name="ChunkLoadError",l}),x.set(o,l)}return l}function q(e){return`${t}${e.split("/").map(e=>encodeURIComponent(e)).join("/")}${r}`}S.L=function(e){return M(i.Parent,this.m.id,e)},S.R=function(e){let t=this.r(e);return t?.default??t},S.P=function(e){return`/ROOT/${e??""}`},S.q=function(e,t){m.call(this,`${e}${r}`,t)},S.b=function(e,t,o,i){let l="SharedWorker"===e.name,s=[o.map(e=>q(e)).reverse(),r];for(let e of n)s.push(globalThis[e]);let u=new URL(q(t),location.origin),a=JSON.stringify(s);return l?u.searchParams.set("params",a):u.hash="#params="+encodeURIComponent(a),new e(u,i?{...i,type:void 0}:void 0)};let N=/\.js(?:\?[^#]*)?(?:#.*)?$/,K=/\.css(?:\?[^#]*)?(?:#.*)?$/;function L(e){return K.test(e)}u.w=function(t,r,n){return e.loadWebAssembly(i.Parent,this.m.id,t,r,n)},u.u=function(t,r){return e.loadWebAssemblyModule(i.Parent,this.m.id,t,r)};let I={};u.c=I;let B=(e,t)=>{let r=I[e];if(r){if(r.error)throw r.error;return r}return W(e,i.Parent,t.id)};function W(e,t,r){let n=$.get(e);if("function"!=typeof n)throw Error(function(e,t,r){let n;switch(t){case 0:n=`as a runtime entry of chunk ${r}`;break;case 1:n=`because it was required from module ${r}`;break;case 2:n="because of an HMR update";break;default:R(t,e=>`Unknown source type: ${e}`)}return`Module ${e} was instantiated ${n}, but the module factory is not available.`}(e,t,r));let o=h(e),i=o.exports;I[e]=o;let l=new s(o,i);try{n(l,o,i)}catch(e){throw o.error=e,e}return o.namespaceObject&&o.exports!==o.namespaceObject&&g(o.exports,o.namespaceObject),o}function F(t){let r,n=function(e){if("string"==typeof e)return e;if(e)return{src:e.getAttribute("src")};if("u">typeof TURBOPACK_NEXT_CHUNK_URLS)return{src:TURBOPACK_NEXT_CHUNK_URLS.pop()};throw Error("chunk path empty but not in a worker")}(t[0]);return 2===t.length?r=t[1]:(r=void 0,!function(e,t){let r=1;for(;r<e.length;){let n,o=r+1;for(;o<e.length&&"function"!=typeof e[o];)o++;if(o===e.length)throw Error("malformed chunk format, expected a factory function");let i=e[o];for(let i=r;i<o;i++){let r=e[i],o=t.get(r);if(o){n=o;break}}let l=n??i,s=!1;for(let n=r;n<o;n++){let r=e[n];t.has(r)||(s||(l===i&&Object.defineProperty(i,"name",{value:"module evaluation"}),s=!0),t.set(r,l))}r=o+1}}(t,$)),e.registerChunk(n,r)}let X=new Map;function D(e){let t=X.get(e);if(!t){let r,n;t={resolved:!1,loadingStarted:!1,promise:new Promise((e,t)=>{r=e,n=t}),resolve:()=>{t.resolved=!0,r()},reject:n},X.set(e,t)}return t}e={async registerChunk(e,r){let n=function(e){if("string"==typeof e)return e;let r=decodeURIComponent(e.src.replace(/[?#].*$/,""));return r.startsWith(t)?r.slice(t.length):r}(e);if(D("string"==typeof e?q(e):e.src).resolve(),null!=r){for(let e of r.otherChunks)D(q("string"==typeof e?e:e.path));if(await Promise.all(r.otherChunks.map(e=>T(i.Runtime,n,e))),r.runtimeModuleIds.length>0)for(let e of r.runtimeModuleIds)!function(e,t){let r=I[t];if(r){if(r.error)throw r.error;return}W(t,i.Runtime,e)}(n,e)}},loadChunkCached:(e,t)=>(function(e,t){let r=D(t);if(r.loadingStarted)return r.promise;if(e===i.Runtime)return r.loadingStarted=!0,L(t)&&r.resolve(),r.promise;if("function"==typeof importScripts)if(L(t));else if(N.test(t))self.TURBOPACK_NEXT_CHUNK_URLS.push(t),importScripts(t);else throw Error(`can't infer type of chunk from URL ${t} in worker`);else{let e=decodeURI(t);if(L(t))if(document.querySelectorAll(`link[rel=stylesheet][href="${t}"],link[rel=stylesheet][href^="${t}?"],link[rel=stylesheet][href="${e}"],link[rel=stylesheet][href^="${e}?"]`).length>0)r.resolve();else{let e=document.createElement("link");e.rel="stylesheet",e.href=t,e.onerror=()=>{r.reject()},e.onload=()=>{r.resolve()},document.head.appendChild(e)}else if(N.test(t)){let n=document.querySelectorAll(`script[src="${t}"],script[src^="${t}?"],script[src="${e}"],script[src^="${e}?"]`);if(n.length>0)for(let e of Array.from(n))e.addEventListener("error",()=>{r.reject()});else{let e=document.createElement("script");e.src=t,e.onerror=()=>{r.reject()},document.head.appendChild(e)}}else throw Error(`can't infer type of chunk from URL ${t}`)}return r.loadingStarted=!0,r.promise})(e,t),async loadWebAssembly(e,t,r,n,o){let i=fetch(q(r)),{instance:l}=await WebAssembly.instantiateStreaming(i,o);return l.exports},async loadWebAssemblyModule(e,t,r,n){let o=fetch(q(r));return await WebAssembly.compileStreaming(o)}};let H=globalThis.TURBOPACK;globalThis.TURBOPACK={push:F},H.forEach(F)})();

package/dist/migrations/004_offline_sync_operations.sql

@@ -0,0 +1,10 @@
+CREATE TABLE IF NOT EXISTS offline_sync_operations (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  client_operation_id TEXT NOT NULL,
+  created_at TIMESTAMP NOT NULL DEFAULT NOW(),
+  UNIQUE (user_id, client_operation_id)
+);
+
+CREATE INDEX IF NOT EXISTS offline_sync_operations_user_id_idx
+  ON offline_sync_operations (user_id);

package/dist/next.config.ts

@@ -15,6 +15,18 @@ const nextConfig: NextConfig = {
       bodySizeLimit: "5gb",
     },
   },
+  async headers() {
+    return [
+      {
+        source: "/sw.js",
+        headers: [
+          { key: "Cache-Control", value: "no-cache, no-store, must-revalidate" },
+          { key: "Pragma", value: "no-cache" },
+          { key: "Expires", value: "0" },
+        ],
+      },
+    ];
+  },
   async redirects() {
     return [
       {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsmrtr/bunkoshelf",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Self-hosted personal manga library.",
   "keywords": [
     "bunko",

package/dist/public/sw.js

@@ -1,9 +1,87 @@
-self.addEventListener("install", () => {
+const VERSION = "v4";
+const ASSET_CACHE = `bunko-assets-${VERSION}`;
+const PAGE_CACHE = `bunko-pages-${VERSION}`;
+const CRITICAL_ASSETS = [
+  "/manifest.webmanifest",
+  "/favicon.png",
+  "/icons/bunkoshelf-icon-any.png",
+  "/icons/bunkoshelf-icon-maskable.png",
+  "/logos/BunkoShelfPearl.svg",
+];
+
+function request(req) {
+  return new Promise((resolve, reject) => {
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+function openDb() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open("bunko-pwa", 1);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+async function offlinePage(url) {
+  const match = url.pathname.match(/^\/offline\/volumes\/([^/]+)\/([^/]+)\/pages\/(-?\d+)$/);
+  if (!match) return new Response("Invalid offline page", { status: 400 });
+  const userId = decodeURIComponent(match[1]);
+  const volumeId = decodeURIComponent(match[2]);
+  const index = Number(match[3]);
+  const db = await openDb();
+  const tx = db.transaction("pages", "readonly");
+  const page = await request(tx.objectStore("pages").get(`${userId}:${volumeId}:${index}`));
+  db.close();
+  if (!page?.blob) return new Response("Offline page unavailable", { status: 404 });
+  return new Response(page.blob, { headers: { "Content-Type": page.blob.type || "application/octet-stream" } });
+}
+
+async function cacheFirst(request) {
+  const cache = await caches.open(ASSET_CACHE);
+  const cached = await cache.match(request);
+  if (cached) return cached;
+  const response = await fetch(request);
+  if (response.ok) cache.put(request, response.clone());
+  return response;
+}
+
+async function navigation(request) {
+  const cache = await caches.open(PAGE_CACHE);
+  try {
+    const response = await fetch(request);
+    if (response.ok) cache.put(request, response.clone());
+    return response;
+  } catch {
+    return (await cache.match(request)) || (await cache.match("/es")) || new Response("<!doctype html><title>Sin conexión</title><main>Sin conexión</main>", { headers: { "Content-Type": "text/html; charset=utf-8" } });
+  }
+}
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(caches.open(ASSET_CACHE).then((cache) => cache.addAll(CRITICAL_ASSETS)).catch(() => {}));
   self.skipWaiting();
 });
 
 self.addEventListener("activate", (event) => {
-  event.waitUntil(self.clients.claim());
+  event.waitUntil(Promise.all([
+    self.clients.claim(),
+    caches.keys().then((keys) => Promise.all(keys.filter((key) => ![ASSET_CACHE, PAGE_CACHE].includes(key)).map((key) => caches.delete(key)))),
+  ]));
+});
+
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+  if (url.origin !== self.location.origin || event.request.method !== "GET") return;
+  if (url.pathname.startsWith("/offline/volumes/")) {
+    event.respondWith(offlinePage(url));
+    return;
+  }
+  if (event.request.destination === "font" || CRITICAL_ASSETS.includes(url.pathname)) {
+    event.respondWith(cacheFirst(event.request));
+    return;
+  }
+  if (event.request.mode === "navigate") event.respondWith(navigation(event.request));
 });
 
 self.addEventListener("push", (event) => {

package/dist/src/app/[lang]/layout.tsx

@@ -5,6 +5,8 @@ import "../globals.css";
 import Sidebar from "@/components/sidebar/sidebar";
 import MobNav from "@/components/mobNav/MobNav";
 import { ToastProvider } from "@/components/ToastProvider";
+import PwaProvider from "@/components/pwa/PwaProvider";
+import OfflineGate from "@/components/pwa/OfflineGate";
 import { verifySession } from "@/lib/auth/verifySession";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import { getChallengeData } from "@/lib/utils";
@@ -20,9 +22,9 @@ export const metadata: Metadata = {
   description: "Self-hosted server for managing-reading manga & ebooks.",
   icons: {
     icon: "/favicon.png",
-    apple: "/pwa/bunkoshelf-icon-192.png",
+    apple: "/icons/bunkoshelf-icon-any.png",
   },
-  manifest: "/manifest.json",
+  manifest: "/manifest.webmanifest",
 };
 
 export async function generateStaticParams() {
@@ -34,7 +36,13 @@ interface RootLayoutProps {
   params: Promise<{ lang: string }>;
 }
 
-async function AppChrome({ lang }: { lang: Locale }) {
+async function AppShell({
+  children,
+  lang,
+}: {
+  children: ReactNode;
+  lang: Locale;
+}) {
   const [intl, user, versionData] = await Promise.all([
     getDictionary(lang),
     verifySession(),
@@ -58,6 +66,15 @@ async function AppChrome({ lang }: { lang: Locale }) {
         challengeData={challengeData}
         versionData={versionData}
       />
+      <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto">
+        <PwaProvider userId={user?.id}>
+          <ToastProvider>
+            <OfflineGate lang={lang} intl={intl} user={user}>
+              {children}
+            </OfflineGate>
+          </ToastProvider>
+        </PwaProvider>
+      </main>
     </>
   );
 }
@@ -82,13 +99,16 @@ export default async function RootLayout({ children, params }: RootLayoutProps)
       <body className="flex h-screen overflow-hidden text-lg relative">
         <div className="fixed inset-0 -z-10 pointer-events-none bg-seigaiha-pattern-k opacity-50" />
 
-        <Suspense fallback={<aside className="hidden md:flex md:w-[35%] lg:w-[25%] xl:w-[21%] 2xl:w-[17%] bg-blackamber flex-col" />}>
-          <AppChrome lang={lang} />
+        <Suspense
+          fallback={(
+            <>
+              <aside className="hidden md:flex md:w-[35%] lg:w-[25%] xl:w-[21%] 2xl:w-[17%] bg-blackamber flex-col" />
+              <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto" />
+            </>
+          )}
+        >
+          <AppShell lang={lang}>{children}</AppShell>
         </Suspense>
-
-        <main className="w-full md:w-[65%] lg:w-[75%] xl:w-[79%] 2xl:w-[83%] flex flex-col overflow-y-auto">
-          <ToastProvider>{children}</ToastProvider>
-        </main>
       </body>
     </html>
   );

package/dist/src/app/api/offline/library/[section]/series/[slug]/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import { verifySession } from "@/lib/auth/verifySession";
+import { listVolumeProgressByIds } from "@/lib/db/library";
+import { listVolumes, findSeriesBySlugBasic } from "@/lib/db/library";
+import { getLibrarySection, getLibraryScope, type LibrarySection } from "@/lib/librarySection";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ section: string; slug: string }> },
+) {
+  const { section, slug } = await params;
+  if (section !== "manga" && section !== "others") {
+    return NextResponse.json({ error: "Invalid section" }, { status: 400 });
+  }
+  const user = await verifySession();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const series = await findSeriesBySlugBasic(slug);
+  if (!series) return NextResponse.json({ error: "Series not found" }, { status: 404 });
+
+  const volumes = await listVolumes({ seriesIds: [series.id], includeGenres: true, includeTags: true, scope: getLibraryScope(section as LibrarySection) });
+  if (!volumes.length || getLibrarySection(volumes[0].metadataObj?.mangaStyle) !== section) {
+    return NextResponse.json({ error: "Series not found" }, { status: 404 });
+  }
+  const progressById = await listVolumeProgressByIds(user.id, volumes.map((volume) => volume.id));
+
+  return NextResponse.json({
+    volumes: volumes.map((volume) => {
+      const source = volume.metadataObj;
+      const { id: _id, filePath: _filePath, createdAt: _createdAt, updatedAt: _updatedAt, ...metadata } = source ?? {};
+      const progress = progressById[volume.id];
+      return {
+        id: volume.id,
+        slug: volume.slug,
+        section,
+        title: source?.title || volume.title,
+        series: { id: series.id, slug: series.slug, title: series.title, isOneshot: series.isOneshot, status: series.status },
+        mangaStyle: source?.mangaStyle ?? null,
+        metadata: { ...metadata, genres: volume.genres.map((genre) => genre.name), tags: volume.tags.map((tag) => tag.name) },
+        coverUrl: getMangaCoverUrl(volume),
+        isRead: progress?.isRead ?? false,
+        isFavorite: progress?.isFavorite ?? false,
+        lastPage: progress?.lastPage ?? 0,
+        totalPages: progress?.totalPages ?? source?.pageCount ?? 0,
+      };
+    }),
+  });
+}

package/dist/src/app/api/offline/library/[section]/volume/[slug]/route.ts

@@ -0,0 +1,59 @@
+import { NextResponse } from "next/server";
+import { verifySession } from "@/lib/auth/verifySession";
+import { findVolumeProgress } from "@/lib/db/reading";
+import { findVolumeBySlug } from "@/lib/db/library";
+import { getLibrarySection, type LibrarySection } from "@/lib/librarySection";
+import { getMangaCoverUrl } from "@/lib/mangaCover";
+
+function metadata(value: Awaited<ReturnType<typeof findVolumeBySlug>>) {
+  const source = value?.metadataObj;
+  if (!source) return {};
+  const { id: _id, filePath: _filePath, createdAt: _createdAt, updatedAt: _updatedAt, ...safe } = source;
+  return safe;
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ section: string; slug: string }> },
+) {
+  const { section, slug } = await params;
+  if (section !== "manga" && section !== "others") {
+    return NextResponse.json({ error: "Invalid section" }, { status: 400 });
+  }
+  const user = await verifySession();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const volume = await findVolumeBySlug({ slug, includeGenres: true, includeTags: true });
+  if (!volume || getLibrarySection(volume.metadataObj?.mangaStyle) !== section) {
+    return NextResponse.json({ error: "Volume not found" }, { status: 404 });
+  }
+  const progress = await findVolumeProgress(user.id, volume.id);
+  const resolvedSection = section as LibrarySection;
+
+  return NextResponse.json({
+    volume: {
+      id: volume.id,
+      slug: volume.slug,
+      section: resolvedSection,
+      title: volume.metadataObj?.title || volume.title,
+      series: {
+        id: volume.series.id,
+        slug: volume.series.slug,
+        title: volume.series.title,
+        isOneshot: volume.series.isOneshot,
+        status: volume.series.status,
+      },
+      mangaStyle: volume.metadataObj?.mangaStyle ?? null,
+      metadata: {
+        ...metadata(volume),
+        genres: volume.genres.map((genre) => genre.name),
+        tags: volume.tags.map((tag) => tag.name),
+      },
+      coverUrl: getMangaCoverUrl(volume),
+      isRead: progress?.is_read ?? false,
+      isFavorite: progress?.is_favorite ?? false,
+      lastPage: progress?.last_page ?? 0,
+      totalPages: progress?.total_pages ?? volume.metadataObj?.pageCount ?? 0,
+    },
+  });
+}

package/dist/src/app/api/offline/sync/route.ts

@@ -0,0 +1,66 @@
+import { NextResponse } from "next/server";
+import { createId } from "@paralleldrive/cuid2";
+import { verifySession } from "@/lib/auth/verifySession";
+import { toggleSeriesFavorite, toggleVolumeFavorite } from "@/actions/favorites";
+import { updateReadState } from "@/actions/read";
+import { syncReadingProgress } from "@/actions/progress";
+import { queryOne, execute } from "@/lib/db/query";
+
+interface Operation {
+  id: string;
+  kind: "favorite" | "read" | "progress" | "series-favorite";
+  payload: Record<string, unknown>;
+}
+
+async function apply(operation: Operation) {
+  if (operation.kind === "favorite") {
+    return toggleVolumeFavorite({ volumeId: String(operation.payload.volumeId || ""), favorite: Boolean(operation.payload.favorite) });
+  }
+  if (operation.kind === "series-favorite") {
+    return toggleSeriesFavorite({ seriesId: String(operation.payload.seriesId || ""), favorite: Boolean(operation.payload.favorite) });
+  }
+  if (operation.kind === "read") {
+    return updateReadState({
+      volumeId: String(operation.payload.volumeId || ""),
+      read: Boolean(operation.payload.read),
+      totalPages: Number(operation.payload.totalPages || 0),
+      lastReadAt: typeof operation.payload.lastReadAt === "string" ? operation.payload.lastReadAt : undefined,
+      firstRead: typeof operation.payload.firstRead === "string" ? operation.payload.firstRead : undefined,
+    });
+  }
+  return syncReadingProgress({
+    volumeSlug: String(operation.payload.volumeSlug || ""),
+    lastPage: Number(operation.payload.lastPage || 0),
+    totalPages: Number(operation.payload.totalPages || 0),
+    lastReadAt: String(operation.payload.lastReadAt || ""),
+    date: String(operation.payload.date || ""),
+  });
+}
+
+export async function POST(request: Request) {
+  const user = await verifySession();
+  if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  const body = await request.json() as { operations?: Operation[] };
+  const completed: string[] = [];
+
+  for (const operation of body.operations ?? []) {
+    if (!operation?.id || !operation.kind) continue;
+    const existing = await queryOne<{ id: string }>(
+      "SELECT id FROM offline_sync_operations WHERE user_id = $1 AND client_operation_id = $2",
+      [user.id, operation.id],
+    );
+    if (existing) {
+      completed.push(operation.id);
+      continue;
+    }
+    const result = await apply(operation);
+    if (!result || "error" in result) continue;
+    await execute(
+      "INSERT INTO offline_sync_operations (id, user_id, client_operation_id) VALUES ($1, $2, $3) ON CONFLICT (user_id, client_operation_id) DO NOTHING",
+      [createId(), user.id, operation.id],
+    );
+    completed.push(operation.id);
+  }
+
+  return NextResponse.json({ completed });
+}

package/dist/src/app/manifest.ts

@@ -0,0 +1,26 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Bunko Shelf",
+    short_name: "Bunko Shelf",
+    start_url: "/es",
+    display: "standalone",
+    background_color: "#151515",
+    theme_color: "#151515",
+    icons: [
+      {
+        src: "/icons/bunkoshelf-icon-any.png",
+        sizes: "1024x1024",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/icons/bunkoshelf-icon-maskable.png",
+        sizes: "1024x1024",
+        type: "image/png",
+        purpose: "maskable",
+      },
+    ],
+  };
+}

package/dist/src/components/home/manga/HeroKeepRead.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
 import { LibraryBigIcon, ChevronRightIcon } from "lucide-react";
@@ -11,6 +13,7 @@ import {
 import type { DictionarySection, Locale } from "@/lib/types";
 
 export interface HomeKeepReadingEntry {
+  id?: string;
   title: string;
   slug: string;
   isOneshot: boolean;
@@ -68,6 +71,7 @@ export default function HeroKeepRead({
             progressRatio={
               entry.totalPages > 0 ? (entry.lastPage + 1) / entry.totalPages : 0
             }
+            offlineVolumeId={entry.id}
             intl={intl}
             isDragging={false}
             className="font-roboto font-bold leading-5 2xl:leading-6 text-xl 2xl:text-2xl"

package/dist/src/components/library/manga/FiltersDrawer.tsx

@@ -6,6 +6,8 @@ import { ChevronRightIcon } from "lucide-react";
 import Accordion from "@/components/ui/Accordion";
 import clsx from "clsx";
 import { getLibraryFilters } from "@/actions/library";
+import { usePwa } from "@/components/pwa/PwaProvider";
+import type { OfflineVolume } from "@/lib/client/offlineLibrary";
 import type { LibraryScope } from "@/lib/librarySection";
 import type { DictionarySection } from "@/lib/types";
 
@@ -28,11 +30,13 @@ function splitFilterParam(value: string | null) {
 interface FiltersDrawerProps {
   intl: DictionarySection;
   scope?: LibraryScope;
+  offlineVolumes?: OfflineVolume[];
 }
 
 export default function FiltersDrawer({
   intl,
   scope = "all",
+  offlineVolumes,
 }: FiltersDrawerProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -44,6 +48,7 @@ export default function FiltersDrawer({
   const [selectedAuthors, setSelectedAuthors] = useState<string[]>([]);
   const [selectedGenres, setSelectedGenres] = useState<string[]>([]);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const { online } = usePwa();
 
   const filters = intl.filters as DictionarySection;
   const catalog = intl.catalog as DictionarySection | undefined;
@@ -62,6 +67,28 @@ export default function FiltersDrawer({
 
   useEffect(() => {
     async function fetchFilters() {
+      if (!online && offlineVolumes) {
+        const authors = new Set<string>();
+        const genres = new Set<string>();
+        const tags = new Set<string>();
+
+        offlineVolumes.forEach((volume) => {
+          const writer = volume.metadata.writer;
+          if (typeof writer === "string") {
+            writer.split(",").map((item) => item.trim()).filter(Boolean).forEach((item) => authors.add(item));
+          }
+          const volumeGenres = volume.metadata.genres;
+          if (Array.isArray(volumeGenres)) volumeGenres.forEach((item) => genres.add(String(item)));
+          const volumeTags = volume.metadata.tags;
+          if (Array.isArray(volumeTags)) volumeTags.forEach((item) => tags.add(String(item)));
+        });
+
+        setAuthors(Array.from(authors).sort().map((name) => ({ id: name, name })));
+        setGenres(Array.from(genres).sort().map((name) => ({ id: name, name })));
+        setTags(Array.from(tags).sort().map((name) => ({ id: name, name })));
+        return;
+      }
+
       try {
         const data = await getLibraryFilters({ scope });
         if (!data || "error" in data) throw new Error("Error fetching filters");
@@ -73,7 +100,17 @@ export default function FiltersDrawer({
       }
     }
     fetchFilters();
-  }, [scope]);
+  }, [offlineVolumes, online, scope]);
+
+  function navigate(params: URLSearchParams) {
+    const href = `?${params.toString()}`;
+    if (!online) {
+      window.history.pushState({}, "", href);
+      window.dispatchEvent(new Event("bunko:offline-navigate"));
+      return;
+    }
+    router.push(href);
+  }
 
   function toggleGenre(genreName: string) {
     setSelectedGenres((prev) =>
@@ -107,7 +144,7 @@ export default function FiltersDrawer({
     if (selectedTags.length) params.set("tag", selectedTags.join(","));
     params.set("page", "1");
 
-    router.push(`?${params.toString()}`);
+    navigate(params);
     setIsOpen(false);
   }
 
@@ -115,7 +152,7 @@ export default function FiltersDrawer({
     setSelectedAuthors([]);
     setSelectedGenres([]);
     setSelectedTags([]);
-    router.push(`?page=1`);
+    navigate(new URLSearchParams({ page: "1" }));
     setIsOpen(false);
   }
 

package/dist/src/components/library/manga/MangaNav.tsx

@@ -6,6 +6,8 @@ import clsx from "clsx";
 import { useEffect, useState } from "react";
 import MobileSecondaryNav from "@/components/ui/MobileSecondaryNav";
 import { getReaderStats } from "@/actions/stats";
+import { getReadyVolumes } from "@/lib/client/offlineLibrary";
+import { usePwa } from "@/components/pwa/PwaProvider";
 import {
   type LibraryScope,
   type LibrarySection,
@@ -18,6 +20,7 @@ interface MangaNavProps {
   intl: Dictionary;
   section?: LibrarySection;
   scope?: LibraryScope;
+  offlineUserId?: string;
 }
 
 interface Stats {
@@ -31,6 +34,7 @@ export default function MangaNav({
   intl,
   section = "manga",
   scope = "all",
+  offlineUserId,
 }: MangaNavProps) {
   const pathname = usePathname();
   const [stats, setStats] = useState<Stats>({
@@ -38,10 +42,22 @@ export default function MangaNav({
     totalSeries: null,
     totalUnread: null,
   });
+  const { online } = usePwa();
 
   useEffect(() => {
     async function fetchStats() {
       try {
+        if (!online && offlineUserId) {
+          const volumes = await getReadyVolumes(offlineUserId, section);
+          const series = new Set(volumes.filter((volume) => !volume.isOneshot).map((volume) => volume.seriesId));
+          setStats({
+            totalVolumes: volumes.length,
+            totalSeries: series.size,
+            totalUnread: volumes.filter((volume) => !volume.isRead).length,
+          });
+          return;
+        }
+
         const data = await getReaderStats({
           scope,
         });
@@ -56,7 +72,7 @@ export default function MangaNav({
     }
 
     fetchStats();
-  }, []);
+  }, [offlineUserId, online, scope, section]);
   const links = getMangaNavLinks({ lang, intl, section, pathname, stats });
 
   return (

package/dist/src/components/library/manga/MetadataPanel.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import type { LibrarySection } from "@/lib/librarySection";
-import { normalizeCommaSeparatedText } from "@/lib/utils";
+import { normalizeCommaSeparatedText } from "@/lib/mangaMetadata";
 import type { Locale, Dictionary } from "@/lib/types";
 
 function normalize(field: unknown): string | null {

package/dist/src/components/library/manga/ReadButtonsSeries.tsx

@@ -5,6 +5,9 @@ import { HeartIcon, HeartOffIcon } from "lucide-react";
 import clsx from "clsx";
 import StatusSelect from "./StatusSelect";
 import { toggleSeriesFavorite } from "@/actions/favorites";
+import OfflineDownloadButton from "@/components/pwa/OfflineDownloadButton";
+import { enqueueOfflineOperation } from "@/lib/client/offlineLibrary";
+import type { LibrarySection } from "@/lib/librarySection";
 import type { Locale, Dictionary } from "@/lib/types";
 
 interface ReadButtonsSeriesProps {
@@ -12,6 +15,9 @@ interface ReadButtonsSeriesProps {
   intl: Dictionary;
   seriesId: string;
   initFavorite: boolean;
+  seriesSlug: string;
+  section?: LibrarySection;
+  userId?: string;
 }
 
 export default function ReadButtonsSeries({
@@ -19,6 +25,9 @@ export default function ReadButtonsSeries({
   intl,
   seriesId,
   initFavorite,
+  seriesSlug,
+  section = "manga",
+  userId,
 }: ReadButtonsSeriesProps) {
   const [isFavorite, setIsFavorite] = useState(initFavorite);
   const [isLoading, setIsLoading] = useState(false);
@@ -27,6 +36,12 @@ export default function ReadButtonsSeries({
     setIsLoading(true);
 
     try {
+      if (!navigator.onLine && userId) {
+        const favorite = !isFavorite;
+        await enqueueOfflineOperation(userId, "series-favorite", { seriesId, favorite });
+        setIsFavorite(favorite);
+        return;
+      }
       const result = await toggleSeriesFavorite({
         seriesId,
         favorite: !isFavorite,
@@ -62,6 +77,7 @@ export default function ReadButtonsSeries({
       >
         {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
       </button>
+      <OfflineDownloadButton userId={userId} section={section} slug={seriesSlug} seriesId={seriesId} intl={intl} />
     </div>
   );
 }