@readium/navigator 2.1.1 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",

package/src/css/Properties.ts

@@ -0,0 +1,47 @@
+export type BodyHyphens = "auto" | "none";
+export type BoxSizing = "content-box" | "border-box";
+export type FontOpticalSizing = "auto" | "none";
+export type FontWidth = "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | number;
+export type Ligatures = "common-ligatures" | "none";
+export type TypeScale = 1 | 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618;
+export type View = "paged" | "scroll";
+
+export abstract class Properties {
+  constructor() {}
+
+  protected toFlag(name: string) {
+    return `readium-${ name }-on`;
+  }
+
+  protected toUnitless(value: number) {
+    return value.toString();
+  }
+
+  protected toPercentage(value: number, ratio: boolean = false) {
+    if (ratio || value > 0 && value <= 1) {
+      return `${ Math.round(value * 100) }%`;
+    } else {
+      return `${ value }%`;
+    }
+  }
+
+  protected toVw(value: number) {
+    const percentage = Math.round(value * 100);
+    return `${ Math.min(percentage, 100) }vw`;
+  }
+
+  protected toVh(value: number) {
+    const percentage = Math.round(value * 100);
+    return `${ Math.min(percentage, 100) }vh`;
+  }
+
+  protected toPx(value: number) {
+    return `${ value }px`;
+  }
+
+  protected toRem(value: number) {
+    return `${ value }rem`;
+  }
+
+  abstract toCSSProperties(): { [key: string]: string };
+}

package/src/css/index.ts

@@ -0,0 +1 @@
+export * from "./Properties";

package/src/epub/css/Properties.ts

@@ -1,52 +1,14 @@
 import { TextAlignment } from "../../preferences/Types";
-
-export type BodyHyphens = "auto" | "none";
-export type BoxSizing = "content-box" | "border-box";
-export type FontOpticalSizing = "auto" | "none";
-export type FontWidth = "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | number;
-export type Ligatures = "common-ligatures" | "none";
-export type TypeScale = 1 | 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618;
-export type View = "paged" | "scroll";
-
-abstract class Properties {
-  constructor() {}
-
-  protected toFlag(name: string) {
-    return `readium-${ name }-on`;
-  }
-
-  protected toUnitless(value: number) {
-    return value.toString();
-  }
-
-  protected toPercentage(value: number, ratio: boolean = false) {
-    if (ratio || value > 0 && value <= 1) {
-      return `${ Math.round(value * 100) }%`;
-    } else {
-      return `${ value }%`;
-    }
-  }
-
-  protected toVw(value: number) {
-    const percentage = Math.round(value * 100);
-    return `${ Math.min(percentage, 100) }vw`;
-  }
-
-  protected toVh(value: number) {
-    const percentage = Math.round(value * 100);
-    return `${ Math.min(percentage, 100) }vh`;
-  }
-
-  protected toPx(value: number) {
-    return `${ value }px`;
-  }
-
-  protected toRem(value: number) {
-    return `${ value }rem`;
-  }
-
-  abstract toCSSProperties(): { [key: string]: string };
-}
+import { 
+  BodyHyphens, 
+  BoxSizing, 
+  FontOpticalSizing, 
+  FontWidth, 
+  Ligatures, 
+  Properties, 
+  TypeScale, 
+  View 
+} from "../../css/Properties";
 
 export interface IUserProperties {
   advancedSettings?: boolean | null;

package/src/epub/preferences/EpubDefaults.ts

@@ -15,7 +15,7 @@ import {
   ensureString, 
   ensureValueInRange, 
   withFallback
-} from "./guards";
+} from "../../preferences/guards";
 
 import { sMLWithRequest } from "../../helpers";
 

package/src/epub/preferences/EpubPreferences.ts

@@ -14,7 +14,7 @@ import {
   ensureNonNegative, 
   ensureString, 
   ensureValueInRange 
-} from "./guards";
+} from "../../preferences/guards";
 
 export interface IEpubPreferences {
   backgroundColor?: string | null,

package/src/epub/preferences/EpubPreferencesEditor.ts

@@ -5,9 +5,16 @@ import { EpubSettings } from "./EpubSettings";
 import { BooleanPreference, EnumPreference, Preference, RangePreference } from "../../preferences/Preference";
 import { 
   TextAlignment, 
+  filterRangeConfig, 
   fontSizeRangeConfig, 
   fontWeightRangeConfig, 
-  fontWidthRangeConfig 
+  fontWidthRangeConfig, 
+  letterSpacingRangeConfig,
+  lineHeightRangeConfig,
+  lineLengthRangeConfig,
+  paragraphIndentRangeConfig,
+  paragraphSpacingRangeConfig,
+  wordSpacingRangeConfig
 } from "../../preferences/Types";
 
 import defaultColors from "@readium/css/css/vars/colors.json";
@@ -85,8 +92,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | boolean | null | undefined) => {
         this.updatePreference("darkenFilter", newValue || null);
       },
-      supportedRange: [0, 100],
-      step: 1
+      supportedRange: filterRangeConfig.range,
+      step: filterRangeConfig.step
     });
   }
 
@@ -192,8 +199,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | boolean | null | undefined) => {
         this.updatePreference("invertFilter", newValue || null);
       },
-      supportedRange: [0, 100],
-      step: 1
+      supportedRange: filterRangeConfig.range,
+      step: filterRangeConfig.step
     });
   }
 
@@ -205,8 +212,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | boolean | null | undefined) => {
         this.updatePreference("invertGaijiFilter", newValue || null);
       },
-      supportedRange: [0, 100],
-      step: 1
+      supportedRange: filterRangeConfig.range,
+      step: filterRangeConfig.step
     });
   }
 
@@ -240,8 +247,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("letterSpacing", newValue || null);
       },
-      supportedRange: [0, 1],
-      step: .125
+      supportedRange: letterSpacingRangeConfig.range,
+      step: letterSpacingRangeConfig.step
     });
   }
 
@@ -266,8 +273,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("lineHeight", newValue || null);
       },
-      supportedRange: [1, 2],
-      step: .1
+      supportedRange: lineHeightRangeConfig.range,
+      step: lineHeightRangeConfig.step
     });
   }
 
@@ -290,8 +297,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("maximalLineLength", newValue);
       },
-      supportedRange: [20, 100],
-      step: 1
+      supportedRange: lineLengthRangeConfig.range,
+      step: lineLengthRangeConfig.step
     });
   }
 
@@ -303,8 +310,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("minimalLineLength", newValue);
       },
-      supportedRange: [20, 100],
-      step: 1
+      supportedRange: lineLengthRangeConfig.range,
+      step: lineLengthRangeConfig.step
     });
   }
 
@@ -327,8 +334,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("optimalLineLength", newValue as number);
       },
-      supportedRange: [20, 100],
-      step: 1
+      supportedRange: lineLengthRangeConfig.range,
+      step: lineLengthRangeConfig.step
     });
   }
 
@@ -351,8 +358,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("paragraphIndent", newValue || null);
       },
-      supportedRange: [0, 3],
-      step: .25
+      supportedRange: paragraphIndentRangeConfig.range,
+      step: paragraphIndentRangeConfig.step
     });
   }
 
@@ -364,8 +371,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("paragraphSpacing", newValue || null);
       },
-      supportedRange: [0, 3],
-      step: .25
+      supportedRange: paragraphSpacingRangeConfig.range,
+      step: paragraphSpacingRangeConfig.step
     });
   }
 
@@ -501,8 +508,8 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
       onChange: (newValue: number | null | undefined) => {
         this.updatePreference("wordSpacing", newValue || null);
       },
-      supportedRange: [0, 2],
-      step: 0.125
+      supportedRange: wordSpacingRangeConfig.range,
+      step: wordSpacingRangeConfig.step
     });
   }
 }

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from './Navigator';
+export * from './webpub';
 export * from './epub';
 export * from './audio';
 export * from './helpers';
-export * from './preferences';
+export * from './preferences';
+export * from './css';

package/src/preferences/Types.ts

@@ -10,6 +10,11 @@ export type RangeConfig = {
   step: number
 }
 
+export const filterRangeConfig: RangeConfig = {
+  range: [0, 100],
+  step: 1
+}
+
 export const fontSizeRangeConfig: RangeConfig = {
   range: [0.7, 4],
   step: 0.05
@@ -23,4 +28,39 @@ export const fontWeightRangeConfig: RangeConfig = {
 export const fontWidthRangeConfig: RangeConfig = {
   range: [50, 250],
   step: 10
+}
+
+export const letterSpacingRangeConfig: RangeConfig = {
+  range: [0, 1],
+  step: .125
+}
+
+export const lineHeightRangeConfig: RangeConfig = {
+  range: [1, 2],
+  step: .1
+}
+
+export const lineLengthRangeConfig: RangeConfig = {
+  range: [20, 100],
+  step: 1
+}
+
+export const paragraphIndentRangeConfig: RangeConfig = {
+  range: [0, 3],
+  step: .25
+}
+
+export const paragraphSpacingRangeConfig: RangeConfig = {
+  range: [0, 3],
+  step: .25
+}
+
+export const wordSpacingRangeConfig: RangeConfig = {
+  range: [0, 2],
+  step: .125
+}
+
+export const zoomRangeConfig: RangeConfig = {
+  range: [0.7, 4],
+  step: 0.05
 }

package/src/{epub/preferences → preferences}/guards.ts

@@ -29,14 +29,13 @@ export function ensureString(value: string | null | undefined): string | null |
 }
 
 export function ensureBoolean(value: boolean | null | undefined): boolean | null | undefined {
-  return typeof value === "boolean" 
-    ? value 
-    : value === undefined || value === null 
-      ? value 
+  return typeof value === "boolean"
+    ? value
+    : value === undefined || value === null
+      ? value
       : undefined;
 }
 
-
 export function ensureEnumValue<T extends string>(value: T | null | undefined, enumType: Record<T, string>): T | null | undefined {
   if (value === undefined) {
     return undefined;
@@ -83,4 +82,4 @@ export function ensureValueInRange(value: number | null | undefined, range: [num
 
 export function withFallback<T>(value: T | null | undefined, defaultValue: T | null): T | null {
   return value === undefined ? defaultValue : value;
-}
+}

package/src/preferences/index.ts

@@ -1,4 +1,5 @@
 export * from "./Configurable";
 export * from "./Preference";
 export * from "./PreferencesEditor";
-export * from "./Types";
+export * from "./Types";
+export * from "./guards";

package/src/webpub/WebPubBlobBuilder.ts

@@ -0,0 +1,167 @@
+import { Link, Publication } from "@readium/shared";
+import { webPubStylesheet } from "./css/WebPubStylesheet";
+
+// Utilities (matching FrameBlobBuilder pattern)
+const blobify = (source: string, type: string) => URL.createObjectURL(new Blob([source], { type }));
+const stripJS = (source: string) => source.replace(/\/\/.*/g, "").replace(/\/\*[\s\S]*?\*\//g, "").replace(/\n/g, "").replace(/\s+/g, " ");
+const scriptify = (doc: Document, source: string) => {
+    const s = doc.createElement("script");
+    s.dataset.readium = "true";
+    s.src = source.startsWith("blob:") ? source : blobify(source, "text/javascript");
+    return s;
+}
+const styleify = (doc: Document, source: string) => {
+    const s = doc.createElement("style");
+    s.dataset.readium = "true";
+    s.textContent = source;
+    return s;
+}
+
+type CacheFunction = () => string;
+const resourceBlobCache = new Map<string, string>();
+const cached = (key: string, cacher: CacheFunction) => {
+    if (resourceBlobCache.has(key)) return resourceBlobCache.get(key)!;
+    const value = cacher();
+    resourceBlobCache.set(key, value);
+    return value;
+};
+
+const cssSelectorGenerator = (doc: Document) => scriptify(doc, cached("css-selector-generator", () => blobify(
+    "!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define([],e):\"object\"==typeof exports?exports._readium_cssSelectorGenerator=e():t._readium_cssSelectorGenerator=e()}(self,(()=>(()=>{\"use strict\";var t,e,n={d:(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(t,\"__esModule\",{value:!0})}},o={};function r(t){return t&&t instanceof Element}function i(t=\"unknown problem\",...e){console.warn(`CssSelectorGenerator: ${t}`,...e)}n.r(o),n.d(o,{default:()=>z,getCssSelector:()=>U}),function(t){t.NONE=\"none\",t.DESCENDANT=\"descendant\",t.CHILD=\"child\"}(t||(t={})),function(t){t.id=\"id\",t.class=\"class\",t.tag=\"tag\",t.attribute=\"attribute\",t.nthchild=\"nthchild\",t.nthoftype=\"nthoftype\"}(e||(e={}));const c={selectors:[e.id,e.class,e.tag,e.attribute],includeTag:!1,whitelist:[],blacklist:[],combineWithinSelector:!0,combineBetweenSelectors:!0,root:null,maxCombinations:Number.POSITIVE_INFINITY,maxCandidates:Number.POSITIVE_INFINITY};function u(t){return t instanceof RegExp}function s(t){return[\"string\",\"function\"].includes(typeof t)||u(t)}function l(t){return Array.isArray(t)?t.filter(s):[]}function a(t){const e=[Node.DOCUMENT_NODE,Node.DOCUMENT_FRAGMENT_NODE,Node.ELEMENT_NODE];return function(t){return t instanceof Node}(t)&&e.includes(t.nodeType)}function f(t,e){if(a(t))return t.contains(e)||i(\"element root mismatch\",\"Provided root does not contain the element. This will most likely result in producing a fallback selector using element\'s real root node. If you plan to use the selector using provided root (e.g. `root.querySelector`), it will nto work as intended.\"),t;const n=e.getRootNode({composed:!1});return a(n)?(n!==document&&i(\"shadow root inferred\",\"You did not provide a root and the element is a child of Shadow DOM. This will produce a selector using ShadowRoot as a root. If you plan to use the selector using document as a root (e.g. `document.querySelector`), it will not work as intended.\"),n):e.ownerDocument.querySelector(\":root\")}function d(t){return\"number\"==typeof t?t:Number.POSITIVE_INFINITY}function m(t=[]){const[e=[],...n]=t;return 0===n.length?e:n.reduce(((t,e)=>t.filter((t=>e.includes(t)))),e)}function p(t){return[].concat(...t)}function h(t){const e=t.map((t=>{if(u(t))return e=>t.test(e);if(\"function\"==typeof t)return e=>{const n=t(e);return\"boolean\"!=typeof n?(i(\"pattern matcher function invalid\",\"Provided pattern matching function does not return boolean. It\'s result will be ignored.\",t),!1):n};if(\"string\"==typeof t){const e=new RegExp(\"^\"+t.replace(\/[|\\\\{}()[\\]^$+?.]\/g,\"\\\\$&\").replace(\/\\*\/g,\".+\")+\"$\");return t=>e.test(t)}return i(\"pattern matcher invalid\",\"Pattern matching only accepts strings, regular expressions and\/or functions. This item is invalid and will be ignored.\",t),()=>!1}));return t=>e.some((e=>e(t)))}function g(t,e,n){const o=Array.from(f(n,t[0]).querySelectorAll(e));return o.length===t.length&&t.every((t=>o.includes(t)))}function y(t,e){e=null!=e?e:function(t){return t.ownerDocument.querySelector(\":root\")}(t);const n=[];let o=t;for(;r(o)&&o!==e;)n.push(o),o=o.parentElement;return n}function b(t,e){return m(t.map((t=>y(t,e))))}const N={[t.NONE]:{type:t.NONE,value:\"\"},[t.DESCENDANT]:{type:t.DESCENDANT,value:\" > \"},[t.CHILD]:{type:t.CHILD,value:\" \"}},S=new RegExp([\"^$\",\"\\\\s\"].join(\"|\")),E=new RegExp([\"^$\"].join(\"|\")),w=[e.nthoftype,e.tag,e.id,e.class,e.attribute,e.nthchild],v=h([\"class\",\"id\",\"ng-*\"]);function C({nodeName:t}){return`[${t}]`}function O({nodeName:t,nodeValue:e}){return`[${t}=\'${L(e)}\']`}function T(t){const e=Array.from(t.attributes).filter((e=>function({nodeName:t},e){const n=e.tagName.toLowerCase();return!([\"input\",\"option\"].includes(n)&&\"value\"===t||v(t))}(e,t)));return[...e.map(C),...e.map(O)]}function I(t){return(t.getAttribute(\"class\")||\"\").trim().split(\/\\s+\/).filter((t=>!E.test(t))).map((t=>`.${L(t)}`))}function x(t){const e=t.getAttribute(\"id\")||\"\",n=`#${L(e)}`,o=t.getRootNode({composed:!1});return!S.test(e)&&g([t],n,o)?[n]:[]}function j(t){const e=t.parentNode;if(e){const n=Array.from(e.childNodes).filter(r).indexOf(t);if(n>-1)return[`:nth-child(${n+1})`]}return[]}function A(t){return[L(t.tagName.toLowerCase())]}function D(t){const e=[...new Set(p(t.map(A)))];return 0===e.length||e.length>1?[]:[e[0]]}function $(t){const e=D([t])[0],n=t.parentElement;if(n){const o=Array.from(n.children).filter((t=>t.tagName.toLowerCase()===e)),r=o.indexOf(t);if(r>-1)return[`${e}:nth-of-type(${r+1})`]}return[]}function R(t=[],{maxResults:e=Number.POSITIVE_INFINITY}={}){const n=[];let o=0,r=k(1);for(;r.length<=t.length&&o<e;)o+=1,n.push(r.map((e=>t[e]))),r=P(r,t.length-1);return n}function P(t=[],e=0){const n=t.length;if(0===n)return[];const o=[...t];o[n-1]+=1;for(let t=n-1;t>=0;t--)if(o[t]>e){if(0===t)return k(n+1);o[t-1]++,o[t]=o[t-1]+1}return o[n-1]>e?k(n+1):o}function k(t=1){return Array.from(Array(t).keys())}const _=\":\".charCodeAt(0).toString(16).toUpperCase(),M=\/[ !\"#$%&\'()\\[\\]{|}<>*+,.\/;=?@^`~\\\\]\/;function L(t=\"\"){var e,n;return null!==(n=null===(e=null===CSS||void 0===CSS?void 0:CSS.escape)||void 0===e?void 0:e.call(CSS,t))&&void 0!==n?n:function(t=\"\"){return t.split(\"\").map((t=>\":\"===t?`\\\\${_} `:M.test(t)?`\\\\${t}`:escape(t).replace(\/%\/g,\"\\\\\"))).join(\"\")}(t)}const q={tag:D,id:function(t){return 0===t.length||t.length>1?[]:x(t[0])},class:function(t){return m(t.map(I))},attribute:function(t){return m(t.map(T))},nthchild:function(t){return m(t.map(j))},nthoftype:function(t){return m(t.map($))}},F={tag:A,id:x,class:I,attribute:T,nthchild:j,nthoftype:$};function V(t){return t.includes(e.tag)||t.includes(e.nthoftype)?[...t]:[...t,e.tag]}function Y(t={}){const n=[...w];return t[e.tag]&&t[e.nthoftype]&&n.splice(n.indexOf(e.tag),1),n.map((e=>{return(o=t)[n=e]?o[n].join(\"\"):\"\";var n,o})).join(\"\")}function B(t,e,n=\"\",o){const r=function(t,e){return\"\"===e?t:function(t,e){return[...t.map((t=>e+\" \"+t)),...t.map((t=>e+\" > \"+t))]}(t,e)}(function(t,e,n){const o=function(t,e){const{blacklist:n,whitelist:o,combineWithinSelector:r,maxCombinations:i}=e,c=h(n),u=h(o);return function(t){const{selectors:e,includeTag:n}=t,o=[].concat(e);return n&&!o.includes(\"tag\")&&o.push(\"tag\"),o}(e).reduce(((e,n)=>{const o=function(t,e){var n;return(null!==(n=q[e])&&void 0!==n?n:()=>[])(t)}(t,n),s=function(t=[],e,n){return t.filter((t=>n(t)||!e(t)))}(o,c,u),l=function(t=[],e){return t.sort(((t,n)=>{const o=e(t),r=e(n);return o&&!r?-1:!o&&r?1:0}))}(s,u);return e[n]=r?R(l,{maxResults:i}):l.map((t=>[t])),e}),{})}(t,n),r=function(t,e){return function(t){const{selectors:e,combineBetweenSelectors:n,includeTag:o,maxCandidates:r}=t,i=n?R(e,{maxResults:r}):e.map((t=>[t]));return o?i.map(V):i}(e).map((e=>function(t,e){const n={};return t.forEach((t=>{const o=e[t];o.length>0&&(n[t]=o)})),function(t={}){let e=[];return Object.entries(t).forEach((([t,n])=>{e=n.flatMap((n=>0===e.length?[{[t]:n}]:e.map((e=>Object.assign(Object.assign({},e),{[t]:n})))))})),e}(n).map(Y)}(e,t))).filter((t=>t.length>0))}(o,n),i=p(r);return[...new Set(i)]}(t,o.root,o),n);for(const e of r)if(g(t,e,o.root))return e;return null}function G(t){return{value:t,include:!1}}function W({selectors:t,operator:n}){let o=[...w];t[e.tag]&&t[e.nthoftype]&&(o=o.filter((t=>t!==e.tag)));let r=\"\";return o.forEach((e=>{(t[e]||[]).forEach((({value:t,include:e})=>{e&&(r+=t)}))})),n.value+r}function H(n){return[\":root\",...y(n).reverse().map((n=>{const o=function(e,n,o=t.NONE){const r={};return n.forEach((t=>{Reflect.set(r,t,function(t,e){return F[e](t)}(e,t).map(G))})),{element:e,operator:N[o],selectors:r}}(n,[e.nthchild],t.DESCENDANT);return o.selectors.nthchild.forEach((t=>{t.include=!0})),o})).map(W)].join(\"\")}function U(t,n={}){const o=function(t){const e=(Array.isArray(t)?t:[t]).filter(r);return[...new Set(e)]}(t),i=function(t,n={}){const o=Object.assign(Object.assign({},c),n);return{selectors:(r=o.selectors,Array.isArray(r)?r.filter((t=>{return n=e,o=t,Object.values(n).includes(o);var n,o})):[]),whitelist:l(o.whitelist),blacklist:l(o.blacklist),root:f(o.root,t),combineWithinSelector:!!o.combineWithinSelector,combineBetweenSelectors:!!o.combineBetweenSelectors,includeTag:!!o.includeTag,maxCombinations:d(o.maxCombinations),maxCandidates:d(o.maxCandidates)};var r}(o[0],n);let u=\"\",s=i.root;function a(){return function(t,e,n=\"\",o){if(0===t.length)return null;const r=[t.length>1?t:[],...b(t,e).map((t=>[t]))];for(const t of r){const e=B(t,0,n,o);if(e)return{foundElements:t,selector:e}}return null}(o,s,u,i)}let m=a();for(;m;){const{foundElements:t,selector:e}=m;if(g(o,e,i.root))return e;s=t[0],u=e,m=a()}return o.length>1?o.map((t=>U(t,i))).join(\", \"):function(t){return t.map(H).join(\", \")}(o)}const z=U;return o})()));",
+    "text/javascript"
+)));
+
+const readiumPropertiesScript = `
+window._readium_blockedEvents = [];
+window._readium_blockEvents = false; // WebPub doesn't need event blocking
+window._readium_eventBlocker = null;
+`;
+
+const rBefore = (doc: Document) => scriptify(doc, cached("webpub-js-before", () => blobify(stripJS(readiumPropertiesScript), "text/javascript")));
+const rAfter = (doc: Document) => scriptify(doc, cached("webpub-js-after", () => blobify(stripJS(`
+if(window.onload) window.onload = new Proxy(window.onload, {
+    apply: function(target, receiver, args) {
+        if(!window._readium_blockEvents) {
+            Reflect.apply(target, receiver, args);
+            return;
+        }
+        _readium_blockedEvents.push([0, target, receiver, args]);
+    }
+});`), "text/javascript")));
+
+export class WebPubBlobBuilder {
+    private readonly item: Link;
+    private readonly burl: string;
+    private readonly pub: Publication;
+    private readonly cssProperties?: { [key: string]: string };
+
+    constructor(pub: Publication, baseURL: string, item: Link, cssProperties?: { [key: string]: string }) {
+        this.pub = pub;
+        this.item = item;
+        this.burl = item.toURL(baseURL) || "";
+        this.cssProperties = cssProperties;
+    }
+
+    public async build(): Promise<string> {
+        if (!this.item.mediaType.isHTML) {
+            throw new Error(`Unsupported media type for WebPub: ${this.item.mediaType.string}`);
+        }
+
+        return await this.buildHtmlFrame();
+    }
+
+    private async buildHtmlFrame(): Promise<string> {
+        // Load the HTML resource
+        const txt = await this.pub.get(this.item).readAsString();
+        if(!txt) throw new Error(`Failed reading item ${this.item.href}`);
+        const doc = new DOMParser().parseFromString(
+            txt,
+            this.item.mediaType.string as DOMParserSupportedType
+        );
+        const perror = doc.querySelector("parsererror");
+        if(perror) {
+            const details = perror.querySelector("div");
+            throw new Error(`Failed parsing item ${this.item.href}: ${details?.textContent || perror.textContent}`);
+        }
+        return this.finalizeDOM(doc, this.burl, this.item.mediaType, txt, this.cssProperties);
+    }
+
+    private hasExecutable(doc: Document): boolean {
+        return (
+            !!doc.querySelector("script") ||
+            !!doc.querySelector("body[onload]:not(body[onload=''])")
+        );
+    }
+
+    private setProperties(cssProperties: { [key: string]: string }, doc: Document) {
+        for (const key in cssProperties) {
+            const value = cssProperties[key];
+            if (value) doc.documentElement.style.setProperty(key, value);
+        }
+    }
+
+    private finalizeDOM(doc: Document, base: string | undefined, mediaType: any, txt?: string, cssProperties?: { [key: string]: string }): string {
+        if(!doc) return "";
+
+        // Add WebPubCSS stylesheet at end of head (like EPUB ReadiumCSS-after)
+        const webPubStyle = styleify(doc, webPubStylesheet);
+        doc.head.appendChild(webPubStyle);
+        if (cssProperties) {
+            this.setProperties(cssProperties, doc);
+        }
+
+        doc.body.querySelectorAll("img").forEach((img) => {
+            img.setAttribute("fetchpriority", "high");
+        });
+
+        if(base !== undefined) {
+            const b = doc.createElement("base");
+            b.href = base;
+            b.dataset.readium = "true";
+            doc.head.firstChild!.before(b);
+        }
+
+        const hasExecutable = this.hasExecutable(doc);
+        if(hasExecutable) doc.head.firstChild!.before(rBefore(doc));
+        doc.head.firstChild!.before(cssSelectorGenerator(doc));
+        if(hasExecutable) doc.head.appendChild(rAfter(doc));
+
+        // Serialize properly based on content type
+        let serializedContent: string;
+
+        if (mediaType.string === "application/xhtml+xml") {
+            // XHTML: Use XMLSerializer for proper XML formatting
+            serializedContent = new XMLSerializer().serializeToString(doc);
+        } else {
+            // HTML: Use custom HTML serialization to preserve HTML formatting
+            serializedContent = this.serializeAsHTML(doc, txt || "");
+        }
+
+        // Make blob from doc
+        return URL.createObjectURL(
+            new Blob([serializedContent], {
+              type: mediaType.isHTML
+                ? mediaType.string
+                : "application/xhtml+xml",
+            })
+        );
+    }
+
+    private serializeAsHTML(doc: Document, txt: string): string {
+        // For HTML content, try to preserve the original HTML structure
+        // while injecting our scripts
+
+        // Extract the original DOCTYPE if present
+        const doctypeMatch = txt.match(/<!DOCTYPE[^>]*>/i);
+        const doctype = doctypeMatch ? doctypeMatch[0] + "\n" : "";
+
+        // Get the HTML element and serialize it as HTML
+        const htmlElement = doc.documentElement;
+        let htmlContent = htmlElement.outerHTML;
+
+        // Try to preserve the original HTML structure
+        // This is a best-effort approach since there's no perfect HTML serializer
+
+        return doctype + htmlContent;
+    }
+}