@foxycape/core 1.1.6 → 1.1.7

package/dist/mediaTypes/html/renderer/navigator/HtmlPagingNavigator.mjs

@@ -1,20 +1,25 @@
 import { EventNames as e } from "../../../../kernal/EventNames.mjs";
 import { FileLocation as t } from "../../../../kernal/progress/Progress.mjs";
-import { PageChangeOptions as n } from "../../../../kernal/navigator/IPagingNavigator.mjs";
+import { applyPagingLocationFrom as n } from "../../../../kernal/progress/userChangedProgress.mjs";
+import { PageChangeOptions as r } from "../../../../kernal/navigator/IPagingNavigator.mjs";
+import { getLayoutGeometry as i } from "../layout/resolveLayoutRoute.mjs";
 //#region mediaTypes/html/renderer/navigator/HtmlPagingNavigator.ts
-var r = class {
-	constructor(t, r, i) {
-		this.documentsProvider = t, this.htmlCoreNavigator = r, this.options = i, this.notify = async (t, r, i) => {
-			let a = new n();
-			if (a.doc = t, a.pageNumber = r, a.extra = i, this.state) {
-				let n = this.documentsProvider.getDocuments(), i = n.indexOf(this.state.doc), o = n.indexOf(t);
-				a.direction = i == o ? r > this.state.pageNumber ? "next" : "previous" : o > i ? "next" : "previous", this.owner.events.emit(e.PageChange, a), this.state = {
+var a = class {
+	constructor(t, n, i) {
+		this.documentsProvider = t, this.htmlCoreNavigator = n, this.options = i, this.resolveCurrentDocument = (e) => {
+			let t = this.owner.context.currentLocation?.url, n = t ? this.documentsProvider.getDocument(t) : null;
+			return n?.getLoadStatus() === "success" ? n : e === "next" ? this.documentsProvider.getFirstVisibleDocument() : this.documentsProvider.getLastVisibleDocument();
+		}, this.notify = async (t, n, i) => {
+			let a = new r();
+			if (a.doc = t, a.pageNumber = n, a.extra = i, this.state) {
+				let r = this.documentsProvider.getDocuments(), i = r.indexOf(this.state.doc), o = r.indexOf(t);
+				a.direction = i == o ? n > this.state.pageNumber ? "next" : "previous" : o > i ? "next" : "previous", this.owner.events.emit(e.PageChange, a), this.state = {
 					doc: t,
-					pageNumber: r
+					pageNumber: n
 				};
 			} else this.state = {
 				doc: t,
-				pageNumber: r
+				pageNumber: n
 			}, a.direction = "next", this.owner.events.emit(e.PageChange, a);
 		}, this.owner = t.owner, this.locale = this.owner.locale, this.logger = this.owner.loggerFactory.getLogger(this.constructor.name);
 	}
@@ -24,56 +29,52 @@ var r = class {
 	async gotoPage(e, t, n) {
 		return await this.internalGotoPage(e, t, null, n);
 	}
-	async internalGotoPage(e, n, r, i) {
-		if (this.options.flipMode == "scroll") return this.logger.warn(this.locale?.getText("unsupportTurnPageWhenScrolling", "Page turning is not supported in scroll mode")), !1;
+	async internalGotoPage(e, r, a, o) {
+		if (i(this.options).flipMode == "scroll") return this.logger.warn(this.locale?.getText("unsupportTurnPageWhenScrolling", "Page turning is not supported in scroll mode")), !1;
 		await e.load();
-		let a = await e.getNumberOfPages(), o = new t(e.url, a, "page");
-		if (o.current = n, o.direction = r, n <= 0) {
-			let n = this.documentsProvider.getDocuments(), r = n.indexOf(e);
-			if (r == 0) return this.owner.notifier.info(this.locale.getText("navigotor_alreadyisfirstpage", "Already at the first page")), !1;
-			let a = n[r - 1];
+		let s = await e.getNumberOfPages(), c = new t(e.url, s, "page");
+		if (c.current = r, c.direction = a, n(c, o), r <= 0) {
+			let r = this.documentsProvider.getDocuments(), i = r.indexOf(e);
+			if (i == 0) return this.owner.notifier.info(this.locale.getText("navigotor_alreadyisfirstpage", "Already at the first page")), !1;
+			let a = r[i - 1];
 			await a.load();
 			let s = await a.getNumberOfPages();
-			return o = new t(a.url, s, "page"), o.current = s, o.direction = "previous", await this.htmlCoreNavigator.goto(o), await this.notify(a, s, i), !0;
+			return c = new t(a.url, s, "page"), c.current = s, c.direction = "previous", n(c, o), await this.htmlCoreNavigator.goto(c), await this.notify(a, s, o), !0;
 		}
-		if (n > a) {
-			let n = this.documentsProvider.getDocuments(), r = n.indexOf(e);
-			if (r == n.length - 1) return this.owner.notifier.info(this.locale.getText("navigotor_alreadyislastpage", "Already at the last page")), !1;
-			let a = n[r + 1];
+		if (r > s) {
+			let r = this.documentsProvider.getDocuments(), i = r.indexOf(e);
+			if (i == r.length - 1) return this.owner.notifier.info(this.locale.getText("navigotor_alreadyislastpage", "You have reached the end of the book.")), !1;
+			let a = r[i + 1];
 			await a.load();
 			let s = await a.getNumberOfPages();
-			return o = new t(a.url, s, "page"), o.current = 1, o.direction = "next", await this.htmlCoreNavigator.goto(o), await this.notify(a, 1, i), !0;
+			return c = new t(a.url, s, "page"), c.current = 1, c.direction = "next", n(c, o), await this.htmlCoreNavigator.goto(c), await this.notify(a, 1, o), !0;
 		}
-		return await this.htmlCoreNavigator.goto(o), await this.notify(e, n, i), !0;
+		return await this.htmlCoreNavigator.goto(c), await this.notify(e, r, o), !0;
 	}
 	async gotoNextPage(e) {
-		if (this.options.flipMode == "scroll") return !1;
-		let t = this.documentsProvider.getFirstVisibleDocument();
+		if (i(this.options).flipMode == "scroll") return !1;
+		let t = this.resolveCurrentDocument("next");
 		if (!t) {
 			let e = this.documentsProvider.getDocuments();
 			t = e[e.length - 1];
 		}
 		await t.load();
-		let n = this.documentsProvider.getCurrentPageNumber(t);
-		this.state = {
+		let { current: n } = await this.documentsProvider.syncPageState(t);
+		return this.state = {
 			doc: t,
 			pageNumber: n
-		};
-		let r = n + 1;
-		return await this.internalGotoPage(t, r, "next", e);
+		}, await this.internalGotoPage(t, n + 1, "next", e);
 	}
 	async gotoPreviousPage(e) {
-		if (this.options.flipMode == "scroll") return !1;
-		let t = this.documentsProvider.getLastVisibleDocument();
+		if (i(this.options).flipMode == "scroll") return !1;
+		let t = this.resolveCurrentDocument("previous");
 		t ||= this.documentsProvider.getDocuments()[0], await t.load();
-		let n = this.documentsProvider.getCurrentPageNumber(t);
-		this.state = {
+		let { current: n } = await this.documentsProvider.syncPageState(t);
+		return this.state = {
 			doc: t,
 			pageNumber: n
-		};
-		let r = n - 1;
-		return await this.internalGotoPage(t, r, "previous", e);
+		}, await this.internalGotoPage(t, n - 1, "previous", e);
 	}
 };
 //#endregion
-export { r as HtmlPagingNavigator };
+export { a as HtmlPagingNavigator };

package/dist/mediaTypes/html/renderer/progress/HtmlProgressTracker.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/EventNames.cjs"),t=require("../../../../kernal/common/text.cjs"),n=require("../../../../kernal/common/url.cjs"),r=require("../../../../kernal/progress/Progress.cjs"),i=require("../../../../kernal/Constants.cjs"),a=require("../../../../kernal/html/finder.cjs"),o=require("../../../../kernal/Debounce.cjs"),s=require("../document/HtmlSymbolCalclator.cjs"),c=require("./adjacent.cjs");var l=class{constructor(t,n,r){this.owner=t,this.documentsProvider=n,this.options=r,this.updateProgress=async()=>{if(!this.owner.context.userChangedProgress)return;let t=await this.getProgress(!0);t&&(this.owner.context.progress=t,this.owner.context.currentLocation=t.location,!(this.owner.onProgressChangeGuard&&!this.owner.onProgressChangeGuard(t.current))&&this.owner.events.emit(e.EventNames.ProgressChange,t))},this.delayUpdateProgress=o.throttle(this.updateProgress,300,!0),this.logger=t.loggerFactory.getLogger(this.constructor.name)}notifyProgressChange(){this.delayUpdateProgress()}async calcProgress(e){try{let t=await this.getTotalPercentage(e);if(t>=0){let n=new r.Progress(1,t);return n.location=e,n}return null}catch(e){return this.logger.error(e),null}}async getTotalPercentage(e){try{if(!e?.url)return null;let r,i=n.getUrlFragment(e.url),o=i.urlWithoutAnchor,s=i.anchor;if(e.tagName)r=await this.getPassedPercentage(o,{tagName:e.tagName,tagIndex:e.tagIndex},!0);else if(e.current>=0){let t=e.current;r=await this.getPassedPercentage(o,t,!0)}else{let e=this.documentsProvider.getDocument(o).getContentContainer().ownerDocument,n=a.getDocumentBody(e);if(!t.isNullOrWhiteSpace(s)){let t=e.getElementById(s);t!=null&&(n=t)}r=await this.getPassedPercentage(o,n,!0)}return r}catch(e){return this.logger.error(e),null}}async getProgress(e){if(!e&&this.owner.context.progress)return this.owner.context.progress;let t=this.documentsProvider.getFirstVisibleDocument(!0);if(!t)return null;let n=t.getVisibleElements(!0);if(n.length===0)return null;let i=n[0],a=i.getBoundingClientRect();if(a.width===0&&a.height===0)return null;let o=t.getContentContainer()?.ownerDocument?.fullscreenElement;o&&(i=o);let s=this.createElementLocation(t,i);if(s.offsetTop=this.calcVisibleElementOffsetTop(i,t,!!o),s.precise=!0,s.ignoreOverlayHeader=!0,s.scrollBehavior=`smooth`,s.text=c.getAdjacentText(this.documentsProvider,this.options.htmlBlockTags,t.extension,i),this.options.flipMode===`page`){let e=this.documentsProvider.getCurrentPageNumber(t),n=await t.getNumberOfPages();s.unit=`page`,s.current=e,s.total=n}let l,u=this.documentsProvider.getLastVisibleDocument(!0),d=u?.getVisibleElements()??[],f=d[d.length-1];l=u&&f?await this.getPassedPercentage(u.url,f,!0):await this.getTotalPercentage(s);let p=new r.Progress(1,l);return p.location=s,p}createElementLocation(e,t){let n=new r.FileLocation(e.url,1,`ratio`);return n.tagName=t.tagName,n.tagIndex=a.getElementIndex(t.ownerDocument,t),n}calcVisibleElementOffsetTop(e,t,n){if(n)return 50;let r=e.getBoundingClientRect(),i=(t.getContentContainer()?.ownerDocument?.defaultView?.frameElement)?.getBoundingClientRect().top??0,a=this.options.flipMode===`scroll`?r.top+i:r.top,o=this.documentsProvider.getScrollElement();return o&&(a-=o.getBoundingClientRect().top),a||void 0}async getPassedPercentage(e,n,r){let o=await this.documentsProvider.fileParser.getSpineFiles(),s=!t.isNullOrWhiteSpace(e)&&!isNaN(e)?parseInt(e):o.findIndex(t=>t.url==e),c=o[s],l=this.documentsProvider.getDocument(e),u=s==o.length-1,d=await this.getDocumentPercentage(l,n);if(u&&typeof n!=`number`&&r){let e=l.getContentContainer();e||=a.getDocumentBody((await l.getVirtualContentContainer())?.ownerDocument);let t=e?.querySelector(`[`+i.LastElementAttributeName+`='true']`),n=l.getVisibleElements(!0);if(t&&n.includes(t)||d>=1)return 1}let f=d*c.ratio;return u&&d>=1?1:c.startProgress+f}async getDocumentPercentage(e,t){if(typeof t==`number`){if(t<1)return t;if(this.options.flipMode===`scroll`)return t<=1?t:0;await e.load();let n=await e.getNumberOfPages();return n<=0?0:Math.min(Math.max(t,0),n)/n}let n=new s.HtmlSymbolCalclator(e,this.options);try{return await n.getProgressByElement(t,this.options.symbolType)}finally{await n.dispose()}}async getPercentage(e,n){if(t.isNullOrWhiteSpace(e))throw Error(this.owner.locale?.getText(`missingLocationUrl`,`missing location url`));return await this.getPassedPercentage(e,n)}async dispose(){}};exports.HtmlProgressTracker=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/EventNames.cjs"),t=require("../../../../kernal/common/text.cjs"),n=require("../../../../kernal/common/url.cjs"),r=require("../../../../kernal/progress/Progress.cjs"),i=require("../../../../kernal/Constants.cjs"),a=require("../../../../kernal/html/finder.cjs"),o=require("../../../../kernal/web/debounce.cjs"),s=require("../../../../kernal/html/geometry.cjs"),c=require("../layout/resolveLayoutRoute.cjs"),l=require("../../fileParser/IHtmlFileParser.cjs"),u=require("./adjacent.cjs");var d=class{constructor(t,n,r){this.owner=t,this.documentsProvider=n,this.options=r,this.updateProgress=async()=>{if(!this.owner.context.userChangedProgress)return;let t=await this.getProgress(!0);t&&(this.owner.context.progress=t,this.owner.context.currentLocation=t.location,!(this.owner.onProgressChangeGuard&&!this.owner.onProgressChangeGuard(t.current))&&this.owner.events.emit(e.EventNames.ProgressChange,t))},this.delayUpdateProgress=o.debounce(this.updateProgress,300),this.logger=t.loggerFactory.getLogger(this.constructor.name)}notifyProgressChange(){this.delayUpdateProgress()}async calcProgress(e){try{let t=await this.getTotalPercentage(e);if(t>=0){let n=new r.Progress(1,t);return n.location=e,n}return null}catch(e){return this.logger.error(e),null}}async getTotalPercentage(e){try{if(!e?.url)return null;let r,i=n.getUrlFragment(e.url),o=i.urlWithoutAnchor,s=i.anchor;if(e.tagName)r=await this.getPassedPercentage(o,{tagName:e.tagName,tagIndex:e.tagIndex},!0);else if(e.current>=0){let t=e.current;r=await this.getPassedPercentage(o,t,!0)}else{let e=this.documentsProvider.getDocument(o).getContentContainer().ownerDocument,n=a.getDocumentBody(e);if(!t.isNullOrWhiteSpace(s)){let t=e.getElementById(s);t!=null&&(n=t)}r=await this.getPassedPercentage(o,n,!0)}return r}catch(e){return this.logger.error(e),null}}async getProgress(e){if(!e&&this.owner.context.progress)return this.owner.context.progress;let t=this.documentsProvider.getFirstVisibleDocument(!0);if(!t)return null;let n=t.getVisibleElements();if(n.length===0)return null;let i=n[0],a=i.getBoundingClientRect();if(a.width===0&&a.height===0)return null;let o=t.getContentContainer()?.ownerDocument?.fullscreenElement;o&&(i=o);let s=this.createElementLocation(t,i),l=c.getLayoutGeometry(this.options),d=!!o,f=d?void 0:this.findVisibleTextAnchor(i,t,l.writingMode);f&&(s.textOffset=f.textOffset);let p=f?.rect??a;if(l.blockAxis==`x`?s.offsetLeft=this.calcVisibleRectOffset(p,t,d,`x`):s.offsetTop=this.calcVisibleRectOffset(p,t,d,`y`),s.precise=!0,s.ignoreOverlayHeader=!0,s.scrollBehavior=`smooth`,s.text=u.getAdjacentText(this.documentsProvider,this.options.htmlBlockTags,t.extension,i),l.flipMode===`page`&&s.textOffset==null){let e=this.documentsProvider.getCurrentPageNumber(t),n=await t.getNumberOfPages();s.unit=`page`,s.current=e,s.total=n}let m,h=this.documentsProvider.getLastVisibleDocument(!0),g=h?.getVisibleElements()??[],_=g[g.length-1];m=h&&_?await this.getPassedPercentage(h.url,_,!0):await this.getTotalPercentage(s);let v=new r.Progress(1,m);return v.location=s,v}createElementLocation(e,t){let n=new r.FileLocation(e.url,1,`ratio`);return n.tagName=t.tagName,n.tagIndex=a.getElementIndex(t.ownerDocument,t),n}findVisibleTextAnchor(e,t,n){let r=e.ownerDocument?.defaultView??t.getContentContainer()?.ownerDocument?.defaultView;if(!r)return;let i=this.documentsProvider.getRendererContainer()?.getBoundingClientRect().top??0,a=s.resolveVisibleViewportInContentWindow(r,{topInset:i});if(a)return s.findFirstVisibleTextOffset(e,a,n)}calcVisibleRectOffset(e,t,n,r){if(n)return 50;let i=(t.getContentContainer()?.ownerDocument?.defaultView?.frameElement)?.getBoundingClientRect(),a=c.getLayoutGeometry(this.options).flipMode===`scroll`,o=r==`x`?a?e.left+(i?.left??0):e.left:a?e.top+(i?.top??0):e.top,s=this.documentsProvider.getScrollElement();if(s){let e=s.getBoundingClientRect();o-=r==`x`?e.left:e.top}return o||void 0}async getPassedPercentage(e,n,r){let o=await this.documentsProvider.fileParser.getSpineFiles(),s=!t.isNullOrWhiteSpace(e)&&!isNaN(e)?parseInt(e):o.findIndex(t=>t.url==e),c=o[s],l=this.documentsProvider.getDocument(e),u=s==o.length-1,d=await this.getDocumentPercentage(l,n);if(u&&typeof n!=`number`&&r){let e=l.getContentContainer();e||=a.getDocumentBody((await l.getVirtualContentContainer())?.ownerDocument);let t=e?.querySelector(`[`+i.LastElementAttributeName+`='true']`),n=l.getVisibleElements(!0);if(t&&n.includes(t)||d>=1)return 1}let f=d*c.ratio;return u&&d>=1?1:c.startProgress+f}async getDocumentPercentage(e,t){if(typeof t==`number`){if(t<1)return t;if(c.getLayoutGeometry(this.options).flipMode===`scroll`)return t<=1?t:0;await e.load();let n=await e.getNumberOfPages();return n<=0?0:Math.min(Math.max(t,0),n)/n}let n=l.asHtmlFileParser(this.documentsProvider.fileParser).symbolMeasure.defaultSymbolType;return await e.symbolCalclator.getProgressByElement(t,n)}async getPercentage(e,n){if(t.isNullOrWhiteSpace(e))throw Error(this.owner.locale?.getText(`missingLocationUrl`,`missing location url`));return await this.getPassedPercentage(e,n)}async dispose(){await this.updateProgress()}};exports.HtmlProgressTracker=d;

package/dist/mediaTypes/html/renderer/progress/HtmlProgressTracker.d.ts

@@ -14,7 +14,8 @@ export declare class HtmlProgressTracker implements IHtmlProgressTracker {
     private getTotalPercentage;
     getProgress(precise?: boolean): Promise<Progress>;
     private createElementLocation;
-    private calcVisibleElementOffsetTop;
+    private findVisibleTextAnchor;
+    private calcVisibleRectOffset;
     private getPassedPercentage;
     private getDocumentPercentage;
     getPercentage(url: string, target: Element | number | {

package/dist/mediaTypes/html/renderer/progress/HtmlProgressTracker.mjs

@@ -4,17 +4,19 @@ import { getUrlFragment as n } from "../../../../kernal/common/url.mjs";
 import { FileLocation as r, Progress as i } from "../../../../kernal/progress/Progress.mjs";
 import { LastElementAttributeName as a } from "../../../../kernal/Constants.mjs";
 import { getDocumentBody as o, getElementIndex as s } from "../../../../kernal/html/finder.mjs";
-import { throttle as c } from "../../../../kernal/Debounce.mjs";
-import { HtmlSymbolCalclator as l } from "../document/HtmlSymbolCalclator.mjs";
-import { getAdjacentText as u } from "./adjacent.mjs";
+import { debounce as c } from "../../../../kernal/web/debounce.mjs";
+import { findFirstVisibleTextOffset as l, resolveVisibleViewportInContentWindow as u } from "../../../../kernal/html/geometry.mjs";
+import { getLayoutGeometry as d } from "../layout/resolveLayoutRoute.mjs";
+import { asHtmlFileParser as f } from "../../fileParser/IHtmlFileParser.mjs";
+import { getAdjacentText as p } from "./adjacent.mjs";
 //#region mediaTypes/html/renderer/progress/HtmlProgressTracker.ts
-var d = class {
+var m = class {
 	constructor(t, n, r) {
 		this.owner = t, this.documentsProvider = n, this.options = r, this.updateProgress = async () => {
 			if (!this.owner.context.userChangedProgress) return;
 			let t = await this.getProgress(!0);
 			t && (this.owner.context.progress = t, this.owner.context.currentLocation = t.location, !(this.owner.onProgressChangeGuard && !this.owner.onProgressChangeGuard(t.current)) && this.owner.events.emit(e.ProgressChange, t));
-		}, this.delayUpdateProgress = c(this.updateProgress, 300, !0), this.logger = t.loggerFactory.getLogger(this.constructor.name);
+		}, this.delayUpdateProgress = c(this.updateProgress, 300), this.logger = t.loggerFactory.getLogger(this.constructor.name);
 	}
 	notifyProgressChange() {
 		this.delayUpdateProgress();
@@ -59,30 +61,42 @@ var d = class {
 		if (!e && this.owner.context.progress) return this.owner.context.progress;
 		let t = this.documentsProvider.getFirstVisibleDocument(!0);
 		if (!t) return null;
-		let n = t.getVisibleElements(!0);
+		let n = t.getVisibleElements();
 		if (n.length === 0) return null;
 		let r = n[0], a = r.getBoundingClientRect();
 		if (a.width === 0 && a.height === 0) return null;
 		let o = t.getContentContainer()?.ownerDocument?.fullscreenElement;
 		o && (r = o);
-		let s = this.createElementLocation(t, r);
-		if (s.offsetTop = this.calcVisibleElementOffsetTop(r, t, !!o), s.precise = !0, s.ignoreOverlayHeader = !0, s.scrollBehavior = "smooth", s.text = u(this.documentsProvider, this.options.htmlBlockTags, t.extension, r), this.options.flipMode === "page") {
+		let s = this.createElementLocation(t, r), c = d(this.options), l = !!o, u = l ? void 0 : this.findVisibleTextAnchor(r, t, c.writingMode);
+		u && (s.textOffset = u.textOffset);
+		let f = u?.rect ?? a;
+		if (c.blockAxis == "x" ? s.offsetLeft = this.calcVisibleRectOffset(f, t, l, "x") : s.offsetTop = this.calcVisibleRectOffset(f, t, l, "y"), s.precise = !0, s.ignoreOverlayHeader = !0, s.scrollBehavior = "smooth", s.text = p(this.documentsProvider, this.options.htmlBlockTags, t.extension, r), c.flipMode === "page" && s.textOffset == null) {
 			let e = this.documentsProvider.getCurrentPageNumber(t), n = await t.getNumberOfPages();
 			s.unit = "page", s.current = e, s.total = n;
 		}
-		let c, l = this.documentsProvider.getLastVisibleDocument(!0), d = l?.getVisibleElements() ?? [], f = d[d.length - 1];
-		c = l && f ? await this.getPassedPercentage(l.url, f, !0) : await this.getTotalPercentage(s);
-		let p = new i(1, c);
-		return p.location = s, p;
+		let m, h = this.documentsProvider.getLastVisibleDocument(!0), g = h?.getVisibleElements() ?? [], _ = g[g.length - 1];
+		m = h && _ ? await this.getPassedPercentage(h.url, _, !0) : await this.getTotalPercentage(s);
+		let v = new i(1, m);
+		return v.location = s, v;
 	}
 	createElementLocation(e, t) {
 		let n = new r(e.url, 1, "ratio");
 		return n.tagName = t.tagName, n.tagIndex = s(t.ownerDocument, t), n;
 	}
-	calcVisibleElementOffsetTop(e, t, n) {
+	findVisibleTextAnchor(e, t, n) {
+		let r = e.ownerDocument?.defaultView ?? t.getContentContainer()?.ownerDocument?.defaultView;
+		if (!r) return;
+		let i = this.documentsProvider.getRendererContainer()?.getBoundingClientRect().top ?? 0, a = u(r, { topInset: i });
+		if (a) return l(e, a, n);
+	}
+	calcVisibleRectOffset(e, t, n, r) {
 		if (n) return 50;
-		let r = e.getBoundingClientRect(), i = (t.getContentContainer()?.ownerDocument?.defaultView?.frameElement)?.getBoundingClientRect().top ?? 0, a = this.options.flipMode === "scroll" ? r.top + i : r.top, o = this.documentsProvider.getScrollElement();
-		return o && (a -= o.getBoundingClientRect().top), a || void 0;
+		let i = (t.getContentContainer()?.ownerDocument?.defaultView?.frameElement)?.getBoundingClientRect(), a = d(this.options).flipMode === "scroll", o = r == "x" ? a ? e.left + (i?.left ?? 0) : e.left : a ? e.top + (i?.top ?? 0) : e.top, s = this.documentsProvider.getScrollElement();
+		if (s) {
+			let e = s.getBoundingClientRect();
+			o -= r == "x" ? e.left : e.top;
+		}
+		return o || void 0;
 	}
 	async getPassedPercentage(e, n, r) {
 		let i = await this.documentsProvider.fileParser.getSpineFiles(), s = !t(e) && !isNaN(e) ? parseInt(e) : i.findIndex((t) => t.url == e), c = i[s], l = this.documentsProvider.getDocument(e), u = s == i.length - 1, d = await this.getDocumentPercentage(l, n);
@@ -98,23 +112,21 @@ var d = class {
 	async getDocumentPercentage(e, t) {
 		if (typeof t == "number") {
 			if (t < 1) return t;
-			if (this.options.flipMode === "scroll") return t <= 1 ? t : 0;
+			if (d(this.options).flipMode === "scroll") return t <= 1 ? t : 0;
 			await e.load();
 			let n = await e.getNumberOfPages();
 			return n <= 0 ? 0 : Math.min(Math.max(t, 0), n) / n;
 		}
-		let n = new l(e, this.options);
-		try {
-			return await n.getProgressByElement(t, this.options.symbolType);
-		} finally {
-			await n.dispose();
-		}
+		let n = f(this.documentsProvider.fileParser).symbolMeasure.defaultSymbolType;
+		return await e.symbolCalclator.getProgressByElement(t, n);
 	}
 	async getPercentage(e, n) {
 		if (t(e)) throw Error(this.owner.locale?.getText("missingLocationUrl", "missing location url"));
 		return await this.getPassedPercentage(e, n);
 	}
-	async dispose() {}
+	async dispose() {
+		await this.updateProgress();
+	}
 };
 //#endregion
-export { d as HtmlProgressTracker };
+export { m as HtmlProgressTracker };

package/dist/mediaTypes/html/renderer/style/ContentCssVariables.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class e{static{this.FontSize=`--font-size`}static{this.FontFamily=`--font-family`}static{this.FontWeight=`--font-weight`}static{this.TextLineHeight=`--text-line-height`}static{this.ParagraphMarginTop=`--paragraph-margin-top`}static{this.ParagraphMarginBottom=`--paragraph-margin-bottom`}static{this.HeadMarginTop=`--head-margin-top`}static{this.HeadMarginBottom=`--head-margin-bottom`}static{this.HeadLineHeight=`--head-line-height`}static{this.TextIndent=`--text-indent`}static{this.TextAlign=`--text-align`}static getDefaultVariables(){return this.defaultValues||(this.defaultValues=new Map,this.defaultValues.set(e.FontSize,`18px`),this.defaultValues.set(e.FontFamily,`inherit`),this.defaultValues.set(e.FontWeight,`normal`),this.defaultValues.set(e.ParagraphMarginTop,`0.5em`),this.defaultValues.set(e.ParagraphMarginBottom,`0.5em`),this.defaultValues.set(e.TextLineHeight,`1.65em`),this.defaultValues.set(e.HeadMarginTop,`0.5em`),this.defaultValues.set(e.HeadMarginBottom,`0.5em`),this.defaultValues.set(e.HeadLineHeight,`1.5em`),this.defaultValues.set(e.TextIndent,`2em`),this.defaultValues.set(e.TextAlign,`start`)),this.defaultValues}};exports.ContentCssVariables=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class e{static{this.FontSize=`--font-size`}static{this.FontFamily=`--font-family`}static{this.FallbackFontFamily=`-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"`}static{this.FontWeight=`--font-weight`}static{this.TextLineHeight=`--text-line-height`}static{this.ParagraphMarginTop=`--paragraph-margin-top`}static{this.ParagraphMarginBottom=`--paragraph-margin-bottom`}static{this.HeadMarginTop=`--head-margin-top`}static{this.HeadMarginBottom=`--head-margin-bottom`}static{this.HeadLineHeight=`--head-line-height`}static{this.TextIndent=`--text-indent`}static{this.TextAlign=`--text-align`}static isUserSpecifiedFontFamily(t){let n=t.trim();return!n||n===`inherit`||n==="default"?!1:n!==e.FallbackFontFamily}static initializeDefaultVariables(e){let t=this.ensureBuiltinDefaults();if(e){let n=e instanceof Map?e.entries():Object.entries(e);for(let[e,r]of n)t.set(e,r)}return t}static getDefaultVariables(){return this.initializeDefaultVariables()}static ensureBuiltinDefaults(){return this.defaultValues||(this.defaultValues=new Map,this.defaultValues.set(e.FontSize,`20px`),this.defaultValues.set(e.FontFamily,e.FallbackFontFamily),this.defaultValues.set(e.FontWeight,`normal`),this.defaultValues.set(e.ParagraphMarginTop,`0.5em`),this.defaultValues.set(e.ParagraphMarginBottom,`0.5em`),this.defaultValues.set(e.TextLineHeight,`1.65em`),this.defaultValues.set(e.HeadMarginTop,`0.5em`),this.defaultValues.set(e.HeadMarginBottom,`0.5em`),this.defaultValues.set(e.HeadLineHeight,`1.5em`),this.defaultValues.set(e.TextIndent,`2em`),this.defaultValues.set(e.TextAlign,`start`)),this.defaultValues}};exports.ContentCssVariables=e;

package/dist/mediaTypes/html/renderer/style/ContentCssVariables.d.ts

@@ -1,6 +1,7 @@
 export declare class ContentCssVariables {
     static readonly FontSize = "--font-size";
     static readonly FontFamily = "--font-family";
+    static readonly FallbackFontFamily = "-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",\"Noto Sans\",\"Liberation Sans\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"";
     static readonly FontWeight = "--font-weight";
     static readonly TextLineHeight = "--text-line-height";
     static readonly ParagraphMarginTop = "--paragraph-margin-top";
@@ -11,5 +12,8 @@ export declare class ContentCssVariables {
     static readonly TextIndent = "--text-indent";
     static readonly TextAlign = "--text-align";
     private static defaultValues;
+    static isUserSpecifiedFontFamily(value: string): boolean;
+    static initializeDefaultVariables(overrides?: Map<string, string> | Record<string, string>): Map<string, string>;
     static getDefaultVariables(): Map<string, string>;
+    private static ensureBuiltinDefaults;
 }

package/dist/mediaTypes/html/renderer/style/ContentCssVariables.mjs

@@ -6,6 +6,9 @@ var e = class e {
 	static {
 		this.FontFamily = "--font-family";
 	}
+	static {
+		this.FallbackFontFamily = "-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",\"Noto Sans\",\"Liberation Sans\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"";
+	}
 	static {
 		this.FontWeight = "--font-weight";
 	}
@@ -33,8 +36,23 @@ var e = class e {
 	static {
 		this.TextAlign = "--text-align";
 	}
+	static isUserSpecifiedFontFamily(t) {
+		let n = t.trim();
+		return !n || n === "inherit" || n === "default" ? !1 : n !== e.FallbackFontFamily;
+	}
+	static initializeDefaultVariables(e) {
+		let t = this.ensureBuiltinDefaults();
+		if (e) {
+			let n = e instanceof Map ? e.entries() : Object.entries(e);
+			for (let [e, r] of n) t.set(e, r);
+		}
+		return t;
+	}
 	static getDefaultVariables() {
-		return this.defaultValues || (this.defaultValues = /* @__PURE__ */ new Map(), this.defaultValues.set(e.FontSize, "18px"), this.defaultValues.set(e.FontFamily, "inherit"), this.defaultValues.set(e.FontWeight, "normal"), this.defaultValues.set(e.ParagraphMarginTop, "0.5em"), this.defaultValues.set(e.ParagraphMarginBottom, "0.5em"), this.defaultValues.set(e.TextLineHeight, "1.65em"), this.defaultValues.set(e.HeadMarginTop, "0.5em"), this.defaultValues.set(e.HeadMarginBottom, "0.5em"), this.defaultValues.set(e.HeadLineHeight, "1.5em"), this.defaultValues.set(e.TextIndent, "2em"), this.defaultValues.set(e.TextAlign, "start")), this.defaultValues;
+		return this.initializeDefaultVariables();
+	}
+	static ensureBuiltinDefaults() {
+		return this.defaultValues || (this.defaultValues = /* @__PURE__ */ new Map(), this.defaultValues.set(e.FontSize, "20px"), this.defaultValues.set(e.FontFamily, e.FallbackFontFamily), this.defaultValues.set(e.FontWeight, "normal"), this.defaultValues.set(e.ParagraphMarginTop, "0.5em"), this.defaultValues.set(e.ParagraphMarginBottom, "0.5em"), this.defaultValues.set(e.TextLineHeight, "1.65em"), this.defaultValues.set(e.HeadMarginTop, "0.5em"), this.defaultValues.set(e.HeadMarginBottom, "0.5em"), this.defaultValues.set(e.HeadLineHeight, "1.5em"), this.defaultValues.set(e.TextIndent, "2em"), this.defaultValues.set(e.TextAlign, "start")), this.defaultValues;
 	}
 };
 //#endregion

package/dist/mediaTypes/html/renderer/style/ContentLayoutCssVariableNames.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{static{this.ColumnWidth=`--column-width`}static{this.ColumnHeight=`--column-height`}static{this.ColumnMaxHeight=`--column-max-height`}static{this.ColumnGap=`--column-gap`}static{this.ContentShadowWidth=`--content-shadow-width`}static{this.ColumnWidthNumber=`--column-width-number`}static{this.ColumnHeightNumber=`--column-height-number`}static{this.PageWidth=`--page-width`}static{this.PageHeight=`--page-height`}static{this.PageMoveLength=`--page-move-length`}static{this.MaxImageHeightRatio=`--max-image-height-ratio`}static{this.MaxImageWidthRatio=`--max-image-width-ratio`}};exports.ContentLayoutCssVariableNames=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{static{this.ColumnWidth=`--column-width`}static{this.ColumnHeight=`--column-height`}static{this.ColumnMaxHeight=`--column-max-height`}static{this.ColumnGap=`--column-gap`}static{this.ContentShadowWidth=`--content-shadow-width`}static{this.ColumnWidthNumber=`--column-width-number`}static{this.ColumnHeightNumber=`--column-height-number`}static{this.ColumnBoxWidth=`--column-box-width`}static{this.ColumnBoxHeight=`--column-box-height`}static{this.PageWidth=`--page-width`}static{this.PageHeight=`--page-height`}static{this.PageMoveLength=`--page-move-length`}static{this.MaxImageHeightRatio=`--max-image-height-ratio`}static{this.MaxImageWidthRatio=`--max-image-width-ratio`}static{this.ImagePlaceholderColor=`--image-placeholder-color`}};exports.ContentLayoutCssVariableNames=e;

package/dist/mediaTypes/html/renderer/style/ContentLayoutCssVariableNames.d.ts

@@ -6,9 +6,12 @@ export declare class ContentLayoutCssVariableNames {
     static readonly ContentShadowWidth = "--content-shadow-width";
     static readonly ColumnWidthNumber = "--column-width-number";
     static readonly ColumnHeightNumber = "--column-height-number";
+    static readonly ColumnBoxWidth = "--column-box-width";
+    static readonly ColumnBoxHeight = "--column-box-height";
     static readonly PageWidth = "--page-width";
     static readonly PageHeight = "--page-height";
     static readonly PageMoveLength = "--page-move-length";
     static readonly MaxImageHeightRatio = "--max-image-height-ratio";
     static readonly MaxImageWidthRatio = "--max-image-width-ratio";
+    static readonly ImagePlaceholderColor = "--image-placeholder-color";
 }

package/dist/mediaTypes/html/renderer/style/ContentLayoutCssVariableNames.mjs

@@ -21,6 +21,12 @@ var e = class {
 	static {
 		this.ColumnHeightNumber = "--column-height-number";
 	}
+	static {
+		this.ColumnBoxWidth = "--column-box-width";
+	}
+	static {
+		this.ColumnBoxHeight = "--column-box-height";
+	}
 	static {
 		this.PageWidth = "--page-width";
 	}
@@ -36,6 +42,9 @@ var e = class {
 	static {
 		this.MaxImageWidthRatio = "--max-image-width-ratio";
 	}
+	static {
+		this.ImagePlaceholderColor = "--image-placeholder-color";
+	}
 };
 //#endregion
 export { e as ContentLayoutCssVariableNames };

package/dist/mediaTypes/html/renderer/style/HtmlStyleProvider.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/html/injector.cjs"),t=require("./ContentCssVariables.cjs");var n=class{constructor(e){this.documentsProvider=e,this.defaultVariables=new Map,this.currentVariables=new Map,this.contentStyleId=`html-content-css-variables-style`,this.defaultVariables.clear();for(let[e,n]of t.ContentCssVariables.getDefaultVariables())this.defaultVariables.set(e,n)}initialize(e){if(this.currentVariables.clear(),e)for(let[t,n]of e)this.currentVariables.set(t,n)}async getCss(){let{default:e}=await Promise.resolve().then(()=>require("./html-content.cjs"));return e.toString()}getDefaultVariables(){return this.defaultVariables}getCurrentVariables(){return this.currentVariables}getDefaultVariableValue(e){return this.defaultVariables.get(e)??``}getVariableValue(e){return this.currentVariables.get(e)??this.defaultVariables.get(e)??``}async injectStyles(t){let n=t.getContentContainer();if(n||=await t.getVirtualContentContainer(),!n?.ownerDocument)return;let r=n.ownerDocument,i=r.documentElement;for(let[e,t]of this.defaultVariables)this.currentVariables.has(e)||i.style.setProperty(e,t);for(let[e,t]of this.currentVariables)i.style.setProperty(e,t);let a=await this.getCss();e.injectCssContent(r,a,!0,this.contentStyleId)}async changeStyles(e){for(let[t,n]of e)this.currentVariables.set(t,n);let t=this.documentsProvider.getLoadedDocuments();for(let n of t){let t=n.getContentContainer()?.ownerDocument?.documentElement;if(t)for(let[n,r]of e)t.style.setProperty(n,r)}}async changeStyle(e,t){this.currentVariables.set(e,t);let n=this.documentsProvider.getLoadedDocuments();for(let r of n){let n=r.getContentContainer()?.ownerDocument?.documentElement;n&&n.style.setProperty(e,t)}}async resetStyles(){this.currentVariables.clear();let e=this.documentsProvider.getLoadedDocuments();for(let t of e)await this.injectStyles(t)}async dispose(){this.defaultVariables.clear(),this.currentVariables.clear()}};exports.HtmlStyleProvider=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/html/injector.cjs"),t=require("../../HtmlSettings.cjs"),n=require("./ContentCssVariables.cjs");var r=class{constructor(e){this.documentsProvider=e,this.defaultVariables=new Map,this.currentVariables=new Map,this.contentStyleId=`html-content-css-variables-style`,this.defaultVariables.clear();for(let[e,t]of n.ContentCssVariables.getDefaultVariables())this.defaultVariables.set(e,t)}initialize(e){if(this.currentVariables.clear(),e)for(let[t,n]of e)this.currentVariables.set(t,n)}async getCss(){let{default:e}=await Promise.resolve().then(()=>require("./html-content.cjs"));return e.toString()}getDefaultVariables(){return this.defaultVariables}getCurrentVariables(){return this.currentVariables}getDefaultVariableValue(e){return this.defaultVariables.get(e)??``}getVariableValue(e){return this.currentVariables.get(e)??this.defaultVariables.get(e)??``}async injectStyles(t){let n=t.getContentContainer();if(n||=await t.getVirtualContentContainer(),!n?.ownerDocument)return;let r=n.ownerDocument,i=r.documentElement;for(let[e,t]of this.defaultVariables)this.currentVariables.has(e)||i.style.setProperty(e,t);for(let[e,t]of this.currentVariables)i.style.setProperty(e,this.normalizeVariableValue(e,t));this.syncUserSpecifiedFontClass(i);let a=await this.getCss();e.injectCssContent(r,a,!0,this.contentStyleId)}syncUserSpecifiedFontClass(e){let r=this.normalizeVariableValue(n.ContentCssVariables.FontFamily,this.getVariableValue(n.ContentCssVariables.FontFamily));e.classList.toggle(t.HtmlSettings.UserSpecifiedFontClassName,n.ContentCssVariables.isUserSpecifiedFontFamily(r))}normalizeVariableValue(e,t){return e===n.ContentCssVariables.FontFamily&&t.trim()===`inherit`?n.ContentCssVariables.FallbackFontFamily:t}async changeStyles(e){for(let[t,n]of e)this.currentVariables.set(t,this.normalizeVariableValue(t,n));let t=this.documentsProvider.getLoadedDocuments(),n=t.filter(e=>e.getWrapperContainer()?.isVisible),r=t.filter(e=>!e.getWrapperContainer()?.isVisible);for(let t of n)this.applyVariablesToDocument(t,e);for(let t of r)this.applyVariablesToDocument(t,e);for(let e of t)e.resetLayoutSizes();let i=this.documentsProvider.restoreReadingPosition;i&&await i()}async changeStyle(e,t){await this.changeStyles(new Map([[e,t]]))}applyVariablesToDocument(e,t){let n=e.getContentContainer()?.ownerDocument?.documentElement;if(n){for(let[e,r]of t)n.style.setProperty(e,this.normalizeVariableValue(e,r));this.syncUserSpecifiedFontClass(n)}}async resetStyles(){this.currentVariables.clear();let e=this.documentsProvider.getLoadedDocuments();for(let t of e)await this.injectStyles(t)}async dispose(){this.defaultVariables.clear(),this.currentVariables.clear()}};exports.HtmlStyleProvider=r;

package/dist/mediaTypes/html/renderer/style/HtmlStyleProvider.d.ts

@@ -14,8 +14,11 @@ export declare class HtmlStyleProvider implements IStyleProvider {
     getDefaultVariableValue(variableName: string): string;
     getVariableValue(variableName: string): string;
     injectStyles(doc: IDocument): Promise<void>;
+    private syncUserSpecifiedFontClass;
+    private normalizeVariableValue;
     changeStyles(variableNameValues: Map<string, string>): Promise<void>;
     changeStyle(variableName: string, variableValue: string): Promise<void>;
+    private applyVariablesToDocument;
     resetStyles(): Promise<void>;
     dispose(): Promise<void>;
 }

package/dist/mediaTypes/html/renderer/style/HtmlStyleProvider.mjs

@@ -1,10 +1,11 @@
 import { injectCssContent as e } from "../../../../kernal/html/injector.mjs";
-import { ContentCssVariables as t } from "./ContentCssVariables.mjs";
+import { HtmlSettings as t } from "../../HtmlSettings.mjs";
+import { ContentCssVariables as n } from "./ContentCssVariables.mjs";
 //#region mediaTypes/html/renderer/style/HtmlStyleProvider.ts
-var n = class {
+var r = class {
 	constructor(e) {
 		this.documentsProvider = e, this.defaultVariables = /* @__PURE__ */ new Map(), this.currentVariables = /* @__PURE__ */ new Map(), this.contentStyleId = "html-content-css-variables-style", this.defaultVariables.clear();
-		for (let [e, n] of t.getDefaultVariables()) this.defaultVariables.set(e, n);
+		for (let [e, t] of n.getDefaultVariables()) this.defaultVariables.set(e, t);
 	}
 	initialize(e) {
 		if (this.currentVariables.clear(), e) for (let [t, n] of e) this.currentVariables.set(t, n);
@@ -30,24 +31,35 @@ var n = class {
 		if (n ||= await t.getVirtualContentContainer(), !n?.ownerDocument) return;
 		let r = n.ownerDocument, i = r.documentElement;
 		for (let [e, t] of this.defaultVariables) this.currentVariables.has(e) || i.style.setProperty(e, t);
-		for (let [e, t] of this.currentVariables) i.style.setProperty(e, t);
+		for (let [e, t] of this.currentVariables) i.style.setProperty(e, this.normalizeVariableValue(e, t));
+		this.syncUserSpecifiedFontClass(i);
 		let a = await this.getCss();
 		e(r, a, !0, this.contentStyleId);
 	}
+	syncUserSpecifiedFontClass(e) {
+		let r = this.normalizeVariableValue(n.FontFamily, this.getVariableValue(n.FontFamily));
+		e.classList.toggle(t.UserSpecifiedFontClassName, n.isUserSpecifiedFontFamily(r));
+	}
+	normalizeVariableValue(e, t) {
+		return e === n.FontFamily && t.trim() === "inherit" ? n.FallbackFontFamily : t;
+	}
 	async changeStyles(e) {
-		for (let [t, n] of e) this.currentVariables.set(t, n);
-		let t = this.documentsProvider.getLoadedDocuments();
-		for (let n of t) {
-			let t = n.getContentContainer()?.ownerDocument?.documentElement;
-			if (t) for (let [n, r] of e) t.style.setProperty(n, r);
-		}
+		for (let [t, n] of e) this.currentVariables.set(t, this.normalizeVariableValue(t, n));
+		let t = this.documentsProvider.getLoadedDocuments(), n = t.filter((e) => e.getWrapperContainer()?.isVisible), r = t.filter((e) => !e.getWrapperContainer()?.isVisible);
+		for (let t of n) this.applyVariablesToDocument(t, e);
+		for (let t of r) this.applyVariablesToDocument(t, e);
+		for (let e of t) e.resetLayoutSizes();
+		let i = this.documentsProvider.restoreReadingPosition;
+		i && await i();
 	}
 	async changeStyle(e, t) {
-		this.currentVariables.set(e, t);
-		let n = this.documentsProvider.getLoadedDocuments();
-		for (let r of n) {
-			let n = r.getContentContainer()?.ownerDocument?.documentElement;
-			n && n.style.setProperty(e, t);
+		await this.changeStyles(/* @__PURE__ */ new Map([[e, t]]));
+	}
+	applyVariablesToDocument(e, t) {
+		let n = e.getContentContainer()?.ownerDocument?.documentElement;
+		if (n) {
+			for (let [e, r] of t) n.style.setProperty(e, this.normalizeVariableValue(e, r));
+			this.syncUserSpecifiedFontClass(n);
 		}
 	}
 	async resetStyles() {
@@ -60,4 +72,4 @@ var n = class {
 	}
 };
 //#endregion
-export { n as HtmlStyleProvider };
+export { r as HtmlStyleProvider };

package/dist/mediaTypes/html/renderer/style/HtmlThemeApplier.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/web/BrowserCapabilities.cjs"),t=require("../../../../kernal/Theme.cjs"),n=require("../../../../kernal/Constants.cjs"),r=require("../../../../kernal/html/finder.cjs"),i=require("../../../../kernal/html/injector.cjs"),a=require("../../HtmlSettings.cjs");var o=class{constructor(e){this.documentsProvider=e,this.holderClassName=n.readerPrefixName+`t`,this.holderSelector=`.${this.holderClassName}.${this.holderClassName}.${this.holderClassName}`,this.animationHolderSelector=`.${this.holderClassName}.${this.holderClassName}.${this.holderClassName}.${this.holderClassName}`,this.allElementSelectorPrefix=`html body *${this.holderSelector}`,this.documentElementSelectorPrefix=`html,body${this.holderSelector}`,this.preElementSelectorPrefix=`html body pre${this.holderSelector}`,this.preAllElementSelectorPrefix=`html body pre *${this.holderSelector}`,this.animationElementSelectorPrefix=`html body *${this.animationHolderSelector}`,this.specialColorCssName=n.readerPrefixName+`reader-special-color`,this.specialBackgroundCssName=n.readerPrefixName+`reader-special-background`,this.specialColorCssId=n.readerPrefixName+`reader-special-variables-color-css`,this.specialBackgroundCssId=n.readerPrefixName+`reader-special-variables-background-css`,this.preBackgroundCssId=n.readerPrefixName+`reader-pre-variables-background-css`,this.themeDynamicCssId=n.readerPrefixName+`html-theme-dynamic-css`,this.holdersMarkedAttr=n.readerPrefixName+`theme-holders`}async applyTheme(e){let t=this.documentsProvider.getLoadedDocuments();for(let n of t)await this.applyToDocument(n,e)}async applyToDocument(e,t){let n=e.getContentContainer();if(n||=await e.getVirtualContentContainer(),!n?.ownerDocument?.documentElement)return;let r=n.ownerDocument.documentElement;this.applyCssVariables(r,t),await this.ensureHolderClasses(n),this.injectThemeStyles(r,t)}applyCssVariables(e,n){if(e.style.setProperty(t.Theme.GotoTargetAnimationColor,n.gotoTargetAnimationColor),e.style.setProperty(t.Theme.ContentBackground,n.contentBackground),e.style.setProperty(t.Theme.ContentTextColor,n.contentTextColor),e.style.setProperty(t.Theme.CodeblockBackgroundColor,n.codeblockBackgroundColor),e.style.setProperty(t.Theme.SelectionBackground,n.selectionBackground),e.style.setProperty(t.Theme.SelectionColor,n.selectionColor),e.style.setProperty(t.Theme.ColumnRuleColor,n.columnRuleColor),n.vars)for(let[t,r]of Object.entries(n.vars))t&&e.style.setProperty(t,r)}async ensureHolderClasses(t){let n=t.ownerDocument.documentElement;if(n.getAttribute(this.holdersMarkedAttr)===`1`)return;let i=e.BrowserCapabilities.supportScheduler(),a=t.getElementsByTagName(`*`),o=[];for(let e=0;e<a.length;e++){let t=a[e];if(!o.includes(t)&&!r.compareTagName(t.tagName,`MT`)){if(r.compareTagName(t.tagName,`PRE`)){t.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),t.firstElementChild&&r.compareTagName(t.firstElementChild.tagName,`CODE`)&&t.firstElementChild.classList.add(this.holderClassName,this.specialBackgroundCssName),o.push(...Array.from(t.getElementsByTagName(`*`)));continue}t.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),e%100==0&&i&&await scheduler.yield()}}t.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),n.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),n.setAttribute(this.holdersMarkedAttr,`1`)}injectThemeStyles(e,n){if(n.colorMode===`dark`&&n.contentTextColor!==`inherit`){let n=`${this.documentElementSelectorPrefix}.${this.specialColorCssName},${this.allElementSelectorPrefix}.${this.specialColorCssName}{color:var(${t.Theme.ContentTextColor}) !important;}`;i.injectCssContent(e,n,!0,this.specialColorCssId)}else i.removeElement(e,this.specialColorCssId);let r=n.colorMode===`light`?``:`!important`;if(n.colorMode===`light`)i.removeElement(e,this.specialBackgroundCssId);else{let n=`${this.documentElementSelectorPrefix}.${this.specialBackgroundCssName},${this.allElementSelectorPrefix}.${this.specialBackgroundCssName}{background-color:var(${t.Theme.ContentBackground}) ${r};}`;i.injectCssContent(e,n,!0,this.specialBackgroundCssId)}let o=`${this.preElementSelectorPrefix}.${this.specialBackgroundCssName},${this.preAllElementSelectorPrefix}.${this.specialBackgroundCssName}{background-color:var(${t.Theme.CodeblockBackgroundColor}) ${r};}`;i.injectCssContent(e,o,!0,this.preBackgroundCssId);let s=``;s+=`::selection{background:var(${t.Theme.SelectionBackground});color:var(${t.Theme.SelectionColor});}`,s+=`@keyframes bg {`,s+=`0% {background: transparent;}`,s+=`50% {background: var(${t.Theme.GotoTargetAnimationColor});}`,s+=`100% {background: transparent;}`,s+=`}`,s+=`${this.animationElementSelectorPrefix}.${a.HtmlSettings.HtmlDocumentGotoAnimationCssName}{`,s+=`animation:bg 2s !important;`,s+=`}`,s+=`.${a.HtmlSettings.HtmlDocumentGotoAnimationCssName}{`,s+=`animation:bg 2s !important;`,s+=`}`,i.injectCssContent(e,s,!0,this.themeDynamicCssId)}};exports.HtmlThemeApplier=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../kernal/Options.cjs"),t=require("../../../../kernal/Constants.cjs"),n=require("../../../../kernal/html/finder.cjs"),r=require("../../../../kernal/html/injector.cjs"),i=require("../../../../kernal/Theme.cjs"),a=require("../../../../kernal/web/scheduler.cjs"),o=require("../../HtmlSettings.cjs");var s=class{constructor(e){this.documentsProvider=e,this.holderClassName=t.readerPrefixName+`t`,this.holderSelector=`.${this.holderClassName}.${this.holderClassName}.${this.holderClassName}`,this.animationHolderSelector=`.${this.holderClassName}.${this.holderClassName}.${this.holderClassName}.${this.holderClassName}`,this.allElementSelectorPrefix=`html body *${this.holderSelector}`,this.documentElementSelectorPrefix=`html,body${this.holderSelector}`,this.preElementSelectorPrefix=`html body pre${this.holderSelector}`,this.preAllElementSelectorPrefix=`html body pre *${this.holderSelector}`,this.animationElementSelectorPrefix=`html body *${this.animationHolderSelector}`,this.specialColorCssName=t.readerPrefixName+`reader-special-color`,this.specialBackgroundCssName=t.readerPrefixName+`reader-special-background`,this.specialColorCssId=t.readerPrefixName+`reader-special-variables-color-css`,this.specialBackgroundCssId=t.readerPrefixName+`reader-special-variables-background-css`,this.preBackgroundCssId=t.readerPrefixName+`reader-pre-variables-background-css`,this.themeDynamicCssId=t.readerPrefixName+`html-theme-dynamic-css`,this.scrollbarCssId=t.readerPrefixName+`reader-scrollbar-css`,this.holdersMarkedAttr=t.readerPrefixName+`theme-holders`,this.iframeScrollbarSelectors=[`pre`,`code`]}async applyTheme(e){let t=this.documentsProvider.getLoadedDocuments();for(let n of t)await this.applyToDocument(n,e)}async applyToDocument(e,t){let n=e.getContentContainer();if(n||=await e.getVirtualContentContainer(),!n?.ownerDocument?.documentElement)return;let r=n.ownerDocument.documentElement;this.applyCssVariables(r,t),await this.ensureHolderClasses(n),this.injectThemeStyles(r,t)}applyCssVariables(t,n){t.style.setProperty(i.Theme.GotoTargetAnimationColor,n.gotoTargetAnimationColor),t.style.setProperty(i.Theme.ContentBackground,n.contentBackground),t.style.setProperty(i.Theme.ContentTextColor,n.contentTextColor),t.style.setProperty(i.Theme.CodeblockBackgroundColor,n.codeblockBackgroundColor),t.style.setProperty(i.Theme.SelectionBackground,n.selectionBackground),t.style.setProperty(i.Theme.SelectionColor,n.selectionColor),t.style.setProperty(i.Theme.ColumnRuleColor,n.columnRuleColor),t.style.setProperty(i.Theme.ScrollbarThumbColor,n.scrollbarThumbColor),t.style.setProperty(i.Theme.ScrollbarThumbHoverColor,n.scrollbarThumbHoverColor),t.style.setProperty(i.Theme.ScrollbarTrackColor,n.scrollbarTrackColor);let r=this.documentsProvider.owner.options;if(t.style.setProperty(e.Options.ScrollbarSize,r.scrollbarSize),t.style.setProperty(e.Options.ScrollbarRadius,r.scrollbarRadius),t.style.setProperty(e.Options.ScrollbarBorder,r.scrollbarBorder),n.vars)for(let[e,r]of Object.entries(n.vars))e&&t.style.setProperty(e,r)}async ensureHolderClasses(e){let t=e.ownerDocument.documentElement;if(t.getAttribute(this.holdersMarkedAttr)===`1`)return;let r=a.supportScheduler(),i=e.getElementsByTagName(`*`),o=[];for(let e=0;e<i.length;e++){let t=i[e];if(!o.includes(t)&&!n.compareTagName(t.tagName,`MT`)){if(n.compareTagName(t.tagName,`PRE`)){t.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),t.firstElementChild&&n.compareTagName(t.firstElementChild.tagName,`CODE`)&&t.firstElementChild.classList.add(this.holderClassName,this.specialBackgroundCssName),o.push(...Array.from(t.getElementsByTagName(`*`)));continue}t.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),e%100==0&&r&&await scheduler.yield()}}e.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),t.classList.add(this.holderClassName,this.specialColorCssName,this.specialBackgroundCssName),t.setAttribute(this.holdersMarkedAttr,`1`)}injectThemeStyles(e,t){if(t.colorMode===`dark`&&t.contentTextColor!==`inherit`){let t=`${this.documentElementSelectorPrefix}.${this.specialColorCssName},${this.allElementSelectorPrefix}.${this.specialColorCssName}{color:var(${i.Theme.ContentTextColor}) !important;}`;r.injectCssContent(e,t,!0,this.specialColorCssId)}else r.removeElement(e,this.specialColorCssId);let n=t.colorMode===`light`?``:`!important`;if(t.colorMode===`light`)r.removeElement(e,this.specialBackgroundCssId);else{let t=`${this.documentElementSelectorPrefix}.${this.specialBackgroundCssName},${this.allElementSelectorPrefix}.${this.specialBackgroundCssName}{background-color:var(${i.Theme.ContentBackground}) ${n};}`;r.injectCssContent(e,t,!0,this.specialBackgroundCssId)}let a=`${this.preElementSelectorPrefix}.${this.specialBackgroundCssName},${this.preAllElementSelectorPrefix}.${this.specialBackgroundCssName}{background-color:var(${i.Theme.CodeblockBackgroundColor}) ${n};}`;r.injectCssContent(e,a,!0,this.preBackgroundCssId);let s=``;s+=`::selection{background:var(${i.Theme.SelectionBackground});color:var(${i.Theme.SelectionColor});}`,s+=`@keyframes bg {`,s+=`0% {background: transparent;}`,s+=`50% {background: var(${i.Theme.GotoTargetAnimationColor});}`,s+=`100% {background: transparent;}`,s+=`}`,s+=`${this.animationElementSelectorPrefix}.${o.HtmlSettings.HtmlDocumentGotoAnimationCssName}{`,s+=`animation:bg 2s !important;`,s+=`}`,s+=`.${o.HtmlSettings.HtmlDocumentGotoAnimationCssName}{`,s+=`animation:bg 2s !important;`,s+=`}`,r.injectCssContent(e,s,!0,this.themeDynamicCssId);let c=i.Theme.getScrollStyles(this.iframeScrollbarSelectors);r.injectCssContent(e,c,!0,this.scrollbarCssId)}};exports.HtmlThemeApplier=s;

package/dist/mediaTypes/html/renderer/style/HtmlThemeApplier.d.ts

@@ -18,7 +18,9 @@ export declare class HtmlThemeApplier implements IHtmlThemeApplier {
     private readonly specialBackgroundCssId;
     private readonly preBackgroundCssId;
     private readonly themeDynamicCssId;
+    private readonly scrollbarCssId;
     private readonly holdersMarkedAttr;
+    private readonly iframeScrollbarSelectors;
     constructor(documentsProvider: IDocumentsProvider<IHtmlDocument>);
     applyTheme(theme: Theme): Promise<void>;
     applyToDocument(doc: IHtmlDocument, theme: Theme): Promise<void>;