paginar 0.3.5 → 0.3.6

package/dist/index.es.js

@@ -9957,9 +9957,9 @@ const state$6 = reactive({
 	fontSize: 16,
 	columns: 'double',
 	mode: 'light',
-	blocked: false,
-	readingProgressAvailable: false,
-	readingProgressEnabled: false,
+	blocked: false,
+	readingProgressAvailable: false,
+	readingProgressEnabled: false,
 
 	bookTitle: null,
 	chapterTitle: null,
@@ -9972,25 +9972,25 @@ const fontSize = computed(() => state$6.fontSize);
 const fontsOptions = computed(() => state$6.fontsOptions);
 const columns = computed(() => state$6.columns);
 const mode = computed(() => state$6.mode);
-const blocked = computed(() => state$6.blocked);
-const readingProgressAvailable = computed(() => state$6.readingProgressAvailable);
-const readingProgressEnabled = computed(() => state$6.readingProgressEnabled);
+const blocked = computed(() => state$6.blocked);
+const readingProgressAvailable = computed(() => state$6.readingProgressAvailable);
+const readingProgressEnabled = computed(() => state$6.readingProgressEnabled);
 
 const bookTitle = computed(() => state$6.bookTitle);
 const chapterTitle = computed(() => state$6.chapterTitle);
 const homeUrl = computed(() => state$6.homeUrl);
 
 watch(
-	[baseFont, textFont, fontSize, columns, mode, readingProgressEnabled],
+	[baseFont, textFont, fontSize, columns, mode, readingProgressEnabled],
 	() => saveSettings()
 );
 
-async function initSettings(settingsString) {
-	const settings = settingsString
-		? JSON.parse(settingsString)
-		: null;
-	state$6.readingProgressAvailable = false;
-	state$6.readingProgressEnabled = false;
+async function initSettings(settingsString) {
+	const settings = settingsString
+		? JSON.parse(settingsString)
+		: null;
+	state$6.readingProgressAvailable = false;
+	state$6.readingProgressEnabled = false;
 
 	if (settings?.baseFont)
 		state$6.baseFont = settings.baseFont;
@@ -10026,51 +10026,51 @@ async function initSettings(settingsString) {
 	if (settings?.chapterTitle)
 		state$6.chapterTitle = settings.chapterTitle;
 
-	if (settings?.homeUrl)
-		state$6.homeUrl = settings.homeUrl;
-
-	if (settings?.readingProgress &&
-		typeof settings.readingProgress === 'object' &&
-		!Array.isArray(settings.readingProgress)
-	) {
-		state$6.readingProgressAvailable = true;
-		state$6.readingProgressEnabled = settings.readingProgress.enabled !== false;
-	}
+	if (settings?.homeUrl)
+		state$6.homeUrl = settings.homeUrl;
+
+	if (settings?.readingProgress &&
+		typeof settings.readingProgress === 'object' &&
+		!Array.isArray(settings.readingProgress)
+	) {
+		state$6.readingProgressAvailable = true;
+		state$6.readingProgressEnabled = settings.readingProgress.enabled !== false;
+	}
 
 	loadSavedSettings(settings);
 }
 
-function loadSavedSettings(settings) {
-	let hasSettings = null;
-	try {
-		hasSettings = localStorage.getItem('readerSettings');
-	} catch (error) {
-		return
-	}
-
-	if (hasSettings) {
-		let savedSettings = null;
-		try {
-			savedSettings = JSON.parse(hasSettings);
-		} catch (error) {
-			return
-		}
+function loadSavedSettings(settings) {
+	let hasSettings = null;
+	try {
+		hasSettings = localStorage.getItem('readerSettings');
+	} catch (error) {
+		return
+	}
+
+	if (hasSettings) {
+		let savedSettings = null;
+		try {
+			savedSettings = JSON.parse(hasSettings);
+		} catch (error) {
+			return
+		}
 
 		state$6.fontSize = savedSettings.fontSize;
 		state$6.columns = savedSettings.columns;
 		state$6.mode = savedSettings.mode;
 
-		if (settings?.fontsOptions &&
+		if (settings?.fontsOptions &&
 			settings?.fontsOptions?.find(item => item.name === savedSettings.textFont)
 		) {
 			state$6.textFont = savedSettings.textFont;
-		}
-
-		if (state$6.readingProgressAvailable &&
-			typeof savedSettings.readingProgressEnabled === 'boolean'
-		) {
-			state$6.readingProgressEnabled = savedSettings.readingProgressEnabled;
-		}
+		}
+
+		if (state$6.readingProgressAvailable &&
+			typeof savedSettings.readingProgressEnabled === 'boolean'
+		) {
+			state$6.readingProgressEnabled = savedSettings.readingProgressEnabled;
+		}
 
 		if (savedSettings.mode === 'dark') {
 			const htmlRoot = document.querySelector('html');
@@ -10094,14 +10094,14 @@ function setFontSize(value) {
 	state$6.fontSize = value;
 }
 
-function setBlocked(value) {
-	state$6.blocked = value;
-}
-
-function setReadingProgressEnabled(value) {
-	if (state$6.readingProgressAvailable)
-		state$6.readingProgressEnabled = Boolean(value);
-}
+function setBlocked(value) {
+	state$6.blocked = value;
+}
+
+function setReadingProgressEnabled(value) {
+	if (state$6.readingProgressAvailable)
+		state$6.readingProgressEnabled = Boolean(value);
+}
 
 function setMode(value) {
 	state$6.mode = value;
@@ -10119,24 +10119,24 @@ function setMode(value) {
 	}
 }
 
-function saveSettings() {
-	try {
-		localStorage.setItem(
-			'readerSettings',
-			JSON.stringify({
-			textFont: textFont.value,
-			fontSize: fontSize.value,
-			columns: columns.value,
-			mode: mode.value,
-			...(readingProgressAvailable.value
-				? { readingProgressEnabled: readingProgressEnabled.value }
-				: {})
-			})
-		);
-	} catch (error) {
-		// Settings remain available for the current session.
-	}
-}
+function saveSettings() {
+	try {
+		localStorage.setItem(
+			'readerSettings',
+			JSON.stringify({
+			textFont: textFont.value,
+			fontSize: fontSize.value,
+			columns: columns.value,
+			mode: mode.value,
+			...(readingProgressAvailable.value
+				? { readingProgressEnabled: readingProgressEnabled.value }
+				: {})
+			})
+		);
+	} catch (error) {
+		// Settings remain available for the current session.
+	}
+}
 
 const useReaderSettings = {
 	baseFont,
@@ -10150,11 +10150,11 @@ const useReaderSettings = {
 	setFontSize,
 	setBlocked,
 	mode,
-	blocked,
-	readingProgressAvailable,
-	readingProgressEnabled,
-	setMode,
-	setReadingProgressEnabled,
+	blocked,
+	readingProgressAvailable,
+	readingProgressEnabled,
+	setMode,
+	setReadingProgressEnabled,
 	saveSettings,
 
 	bookTitle,
@@ -10351,36 +10351,36 @@ const useFootnotes = {
 	showFootnotes
 };
 
-const state$3 = reactive({
-	summary: null,
-	content: null,
-	activeChapter: 0
+const state$3 = reactive({
+	summary: null,
+	content: null,
+	activeChapter: 0
 });
 
 const content = computed(() => state$3.content);
 const summary = computed(() => state$3.summary);
-const context = computed(() => {
-	const chapters = state$3.summary || [];
-	const linkedChapter = chapters.findIndex(
-		chapter => window.location.href.includes(chapter.link)
-	);
-	const current = linkedChapter >= 0 ? linkedChapter : state$3.activeChapter;
-	return {
-		chapter: chapters[current],
-		surround: {
-			before: current - 1 >= 0
-				? chapters[current - 1]
-				: null,
-			after: current + 1 < chapters.length
-				? chapters[current + 1]
-				: null,
-		}
-	}
-});
-const contextId = computed(() => {
-	const chapter = context.value.chapter;
-	return chapter?.file || chapter?.link || chapter?.title || window.location.pathname
-});
+const context = computed(() => {
+	const chapters = state$3.summary || [];
+	const linkedChapter = chapters.findIndex(
+		chapter => window.location.href.includes(chapter.link)
+	);
+	const current = linkedChapter >= 0 ? linkedChapter : state$3.activeChapter;
+	return {
+		chapter: chapters[current],
+		surround: {
+			before: current - 1 >= 0
+				? chapters[current - 1]
+				: null,
+			after: current + 1 < chapters.length
+				? chapters[current + 1]
+				: null,
+		}
+	}
+});
+const contextId = computed(() => {
+	const chapter = context.value.chapter;
+	return chapter?.file || chapter?.link || chapter?.title || window.location.pathname
+});
 
 async function initContent(contentString, contentWrapper) {
 	const { setReferences, applyReferences } = useReferences;
@@ -10434,12 +10434,12 @@ async function getContent(location) {
 	}
 }
 
-function applyContent(text, chapter = null) {
-	const { applyReferences } = useReferences;
-	const newContent = applyReferences(text);
-	if (chapter)
-		state$3.activeChapter = state$3.summary.findIndex(item => item === chapter);
-	state$3.content = newContent;
+function applyContent(text, chapter = null) {
+	const { applyReferences } = useReferences;
+	const newContent = applyReferences(text);
+	if (chapter)
+		state$3.activeChapter = state$3.summary.findIndex(item => item === chapter);
+	state$3.content = newContent;
 }
 
 function listenToClicks(contentWrapper) {
@@ -10464,9 +10464,9 @@ const useTextContent = {
 	initContent,
 	getContent,
 	applyContent,
-	listenToClicks,
-	context,
-	contextId
+	listenToClicks,
+	context,
+	contextId
 };
 
 const state$2 = reactive({
@@ -10516,214 +10516,216 @@ const useBrowser = {
 	isApple
 };
 
-const STORAGE_KEY = 'paginar:reading-progress:v1';
-
-const state$1 = reactive({
-	bookId: null,
-	contextKey: null,
-	restored: false,
-	suspended: false,
-	currentPage: 1,
-	totalPages: 1
-});
-
-const available = computed(() => useReaderSettings.readingProgressAvailable.value);
-const enabled = computed(() => useReaderSettings.readingProgressEnabled.value);
-
-function init$1(settingsString, fallbackTitle) {
-	let settings = null;
-	state$1.bookId = null;
-	state$1.contextKey = null;
-	state$1.restored = false;
-
-	try {
-		settings = settingsString ? JSON.parse(settingsString) : null;
-	} catch (error) {
-		return
-	}
-
-	if (!settings?.readingProgress ||
-		typeof settings.readingProgress !== 'object' ||
-		Array.isArray(settings.readingProgress)
-	)
-		return
-
-	const configuredId = settings.readingProgress.id;
-	state$1.bookId = typeof configuredId === 'string' && configuredId.trim()
-		? configuredId.trim()
-		: fallbackTitle || window.location.pathname;
-}
-
-function getContextKey() {
-	if (!state$1.bookId)
-		return null
-
-	const chapter = useTextContent.contextId.value || window.location.pathname;
-	return `${state$1.bookId}::${chapter}`
-}
-
-function readStore() {
-	try {
-		const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
-		return saved?.version === 1 && saved.entries && typeof saved.entries === 'object'
-			? saved
-			: { version: 1, entries: {} }
-	} catch (error) {
-		return { version: 1, entries: {} }
-	}
-}
-
-function writeStore(store) {
-	try {
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
-	} catch (error) {
-		// Reading continues normally when storage is unavailable.
-	}
-}
-
-function percentageFor(page, total) {
-	if (total <= 1)
-		return 0
-
-	return Math.min(1, Math.max(0, (page - 1) / (total - 1)))
-}
-
-function pageFor(percentage, total) {
-	return Math.min(total, Math.max(1, Math.round(percentage * (total - 1)) + 1))
-}
-
-function repaginate(page, previousTotal, nextTotal) {
-	const key = getContextKey();
-	if (!available.value || !enabled.value || !state$1.restored ||
-		!key || key !== state$1.contextKey || previousTotal < 1 || nextTotal < 1
-	)
-		return null
-
-	const percentage = percentageFor(page, previousTotal);
-	return pageFor(percentage, nextTotal)
-}
-
-function save(page, total) {
-	const key = getContextKey();
-	if (!available.value || !enabled.value || !state$1.restored || state$1.suspended ||
-		!key || key !== state$1.contextKey || total < 1
-	)
-		return
-
-	const store = readStore();
-	store.entries[key] = percentageFor(page, total);
-	writeStore(store);
-}
-
-function suspend() {
-	state$1.suspended = true;
-}
-
-function resume() {
-	state$1.suspended = false;
-}
-
-function remove() {
-	const key = getContextKey();
-	if (!key)
-		return
-
-	const store = readStore();
-	delete store.entries[key];
-	writeStore(store);
-}
-
-function sync(page, total, allowRestore = false) {
-	state$1.currentPage = page;
-	state$1.totalPages = total;
-	const key = getContextKey();
-	if (!available.value || !enabled.value || !key)
-		return
-
-	if (state$1.contextKey !== key) {
-		state$1.contextKey = key;
-		state$1.restored = false;
-	}
-
-	if (!state$1.restored) {
-		if (!allowRestore)
-			return
-
-		const percentage = readStore().entries[key];
-		if (Number.isFinite(percentage) && percentage >= 0 && percentage <= 1) {
-			if (total <= 1 && percentage > 0)
-				return
-
-			state$1.restored = true;
-			const targetPage = pageFor(percentage, total);
-			if (targetPage !== page)
-				return targetPage
-			return
-		}
-
-		state$1.restored = true;
-	}
-
-	save(page, total);
-}
-
-function setEnabled(value) {
-	useReaderSettings.setReadingProgressEnabled(value);
-	state$1.restored = true;
-
-	if (value)
-		save(state$1.currentPage, state$1.totalPages);
-	else
-		remove();
-}
-
-const useReadingProgress = {
-	available,
-	enabled,
-	init: init$1,
-	remove,
-	repaginate,
-	resume,
-	save,
-	setEnabled,
-	suspend,
-	sync
+const STORAGE_KEY = 'paginar:reading-progress:v1';
+
+const state$1 = reactive({
+	bookId: null,
+	contextKey: null,
+	restored: false,
+	suspended: false,
+	currentPage: 1,
+	totalPages: 1
+});
+
+const available = computed(() => useReaderSettings.readingProgressAvailable.value);
+const enabled = computed(() => useReaderSettings.readingProgressEnabled.value);
+
+function init$1(settingsString, fallbackTitle) {
+	let settings = null;
+	state$1.bookId = null;
+	state$1.contextKey = null;
+	state$1.restored = false;
+
+	try {
+		settings = settingsString ? JSON.parse(settingsString) : null;
+	} catch (error) {
+		return
+	}
+
+	if (!settings?.readingProgress ||
+		typeof settings.readingProgress !== 'object' ||
+		Array.isArray(settings.readingProgress)
+	)
+		return
+
+	const configuredId = settings.readingProgress.id;
+	state$1.bookId = typeof configuredId === 'string' && configuredId.trim()
+		? configuredId.trim()
+		: fallbackTitle || window.location.pathname;
+}
+
+function getContextKey() {
+	if (!state$1.bookId)
+		return null
+
+	const chapter = useTextContent.contextId.value || window.location.pathname;
+	return `${state$1.bookId}::${chapter}`
+}
+
+function readStore() {
+	try {
+		const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
+		return saved?.version === 1 && saved.entries && typeof saved.entries === 'object'
+			? saved
+			: { version: 1, entries: {} }
+	} catch (error) {
+		return { version: 1, entries: {} }
+	}
+}
+
+function writeStore(store) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
+	} catch (error) {
+		// Reading continues normally when storage is unavailable.
+	}
+}
+
+function percentageFor(page, total) {
+	if (total <= 1)
+		return 0
+
+	return Math.min(1, Math.max(0, (page - 1) / (total - 1)))
+}
+
+function pageFor(percentage, total) {
+	return Math.min(total, Math.max(1, Math.round(percentage * (total - 1)) + 1))
+}
+
+function repaginate(page, previousTotal, nextTotal) {
+	const key = getContextKey();
+	if (!available.value || !enabled.value || !state$1.restored ||
+		!key || key !== state$1.contextKey || previousTotal < 1 || nextTotal < 1
+	)
+		return null
+
+	const percentage = percentageFor(page, previousTotal);
+	return pageFor(percentage, nextTotal)
+}
+
+function save(page, total) {
+	const key = getContextKey();
+	if (!available.value || !enabled.value || !state$1.restored || state$1.suspended ||
+		!key || key !== state$1.contextKey || total < 1
+	)
+		return
+
+	const store = readStore();
+	store.entries[key] = percentageFor(page, total);
+	writeStore(store);
+}
+
+function suspend() {
+	state$1.suspended = true;
+}
+
+function resume() {
+	state$1.suspended = false;
+}
+
+function remove() {
+	const key = getContextKey();
+	if (!key)
+		return
+
+	const store = readStore();
+	delete store.entries[key];
+	writeStore(store);
+}
+
+function sync(page, total, allowRestore = false) {
+	state$1.currentPage = page;
+	state$1.totalPages = total;
+	const key = getContextKey();
+	if (!available.value || !enabled.value || !key)
+		return
+
+	if (state$1.contextKey !== key) {
+		state$1.contextKey = key;
+		state$1.restored = false;
+	}
+
+	if (!state$1.restored) {
+		if (!allowRestore)
+			return
+
+		const percentage = readStore().entries[key];
+		if (Number.isFinite(percentage) && percentage >= 0 && percentage <= 1) {
+			if (total <= 1 && percentage > 0)
+				return
+
+			state$1.restored = true;
+			const targetPage = pageFor(percentage, total);
+			if (targetPage !== page)
+				return targetPage
+			return
+		}
+
+		state$1.restored = true;
+	}
+
+	save(page, total);
+}
+
+function setEnabled(value) {
+	useReaderSettings.setReadingProgressEnabled(value);
+	state$1.restored = true;
+
+	if (value)
+		save(state$1.currentPage, state$1.totalPages);
+	else
+		remove();
+}
+
+const useReadingProgress = {
+	available,
+	enabled,
+	init: init$1,
+	remove,
+	repaginate,
+	resume,
+	save,
+	setEnabled,
+	suspend,
+	sync
 };
 
-const state = reactive({
-	currentPage: 1,
+const state = reactive({
+	currentPage: 1,
+	changeSource: 'initial',
 	nextTry: 0,
 	prevTry: 0,
 	willRedirect: false
 });
 
-const currentPage = computed(() => state.currentPage);
+const currentPage = computed(() => state.currentPage);
+const changeSource = computed(() => state.changeSource);
 const totalPages = computed(() => useEstimatePages.totalPages.value);
 
-function init(viewport, content, estimate = null) {
-	const updatePages = estimate || (() => useEstimatePages.estimate(viewport, content));
-	// Measure immediately, but let the parent restore progress only after child
-	// controls (notably the page slider) have finished their mount cycle.
-	useEstimatePages.estimate(viewport, content);
+function init(viewport, content, estimate = null) {
+	const updatePages = estimate || (() => useEstimatePages.estimate(viewport, content));
+	// Measure immediately, but let the parent restore progress only after child
+	// controls (notably the page slider) have finished their mount cycle.
+	useEstimatePages.estimate(viewport, content);
 
 	// check if there is a query string for oring, and
 	// if previews chapter was the next one. If so,
 	// start from the end, as we are coming backwards
 	const urlParams = new URLSearchParams(window.location.search);
 	const origin = urlParams.get('origin');
-	if (origin && origin === 'next') {
-		setTimeout(() => {
-			set(totalPages.value);
-		}, 200);
+	if (origin && origin === 'next') {
+		setTimeout(() => {
+			set(totalPages.value);
+		}, 200);
 	}
 
 	if (!useBrowser.isApple && !useBrowser.isSafari) {
 		addEventListener('wheel', onWheel);
 	}
 
-	setInterval(() => {
-		updatePages();
-	}, 5000);
+	setInterval(() => {
+		updatePages();
+	}, 5000);
 }
 
 // when resizing the viewport, totalPages change
@@ -10735,10 +10737,10 @@ watch(totalPages, () => {
 });
 
 // navigate by increase/decrease value
-function next(usingScroll = false) {
+function next(usingScroll = false, source = 'next') {
 	if (!useReaderSettings.blocked.value) {
-		if ((state.currentPage + 1) <= totalPages.value) {
-			set(state.currentPage + 1);
+		if ((state.currentPage + 1) <= totalPages.value) {
+			set(state.currentPage + 1, source);
 		} else {
 			// prevent going too fast to next chapter on
 			// stronger scroll
@@ -10757,22 +10759,22 @@ function next(usingScroll = false) {
 		}
 	}
 }
-onKeyStroke('ArrowRight', (e) => {
-	e.preventDefault();
-	next();
+onKeyStroke('ArrowRight', (e) => {
+	e.preventDefault();
+	next(false, 'keyboard');
 });
 
 function onWheel(event) {
 	if (event.wheelDelta < 0) {
-		next(true);
-	} else {
-		prev(true);
+		next(true, 'wheel');
+	} else {
+		prev(true, 'wheel');
 	}
 }
-function prev(usingScroll = false) {
+function prev(usingScroll = false, source = 'previous') {
 	if (!useReaderSettings.blocked.value) {
-		if ((state.currentPage - 1) > 0) {
-			set(state.currentPage - 1);
+		if ((state.currentPage - 1) > 0) {
+			set(state.currentPage - 1, source);
 		} else {
 			// prevent going too fast to prev chapter on
 			// stronger scroll
@@ -10793,25 +10795,29 @@ function prev(usingScroll = false) {
 }
 onKeyStroke('ArrowLeft', (e) => {
 	e.preventDefault();
-	prev();
+	prev(false, 'keyboard');
 });
 
 // navigate to specific page
-function set(val) {
+function set(val, source = 'go-to-page') {
 	const page = Math.min(totalPages.value, Math.max(1, Number(val) || 1));
+	state.changeSource = source;
 	state.currentPage = page;
-	useReadingProgress.save(page, totalPages.value);
-}
+	useReadingProgress.save(page, totalPages.value);
+}
 
 const usePagination = {
 	currentPage,
-	totalPages,
+	totalPages,
+	changeSource,
 	next,
 	prev,
 	init,
 	set
 };
 
+const publicEventKey = Symbol('paginarPublicEvent');
+
 const _hoisted_1$o = ["role"];
 const _hoisted_2$c = { class: "summary-menu-dropdown-item-title" };
 const _hoisted_3$4 = {
@@ -10822,14 +10828,16 @@ const _hoisted_3$4 = {
 const _sfc_main$q = {
   __name: 'SummaryDropdown',
   setup(__props) {
-
+
 const { summary } = useTextContent;
-
-async function getChapter(item) {
-	const text = await useTextContent.getContent(item.file);
-	useTextContent.applyContent(text, item);
-	usePagination.set(1);
-}
+const publicEvent = inject(publicEventKey, () => {});
+
+async function getChapter(item) {
+	const text = await useTextContent.getContent(item.file);
+	useTextContent.applyContent(text, item);
+	usePagination.set(1, 'summary');
+	publicEvent('chapter-change', { chapter: { ...item } });
+}
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", {
@@ -10880,15 +10888,18 @@ const show = ref(false);
 const button = ref(null);
 
 const { homeUrl } = useReaderSettings;
+const publicEvent = inject(publicEventKey, () => {});
 
 const toggleSummary = () => {
 	show.value = !show.value;
 	useReaderSettings.setBlocked(show.value);
+	publicEvent('summary-toggle', { open: show.value });
 };
 const hide = () => {
-	if (!useReaderSettings.blocked.value) {
+	if (show.value && !useReaderSettings.blocked.value) {
 		show.value = false;
 		useReaderSettings.setBlocked(false);
+		publicEvent('summary-toggle', { open: false });
 	}
 };
 
@@ -11271,13 +11282,13 @@ return (_ctx, _cache) => {
 
 const _hoisted_1$c = { class: "w-full border-t border-areia mt-5 pt-5" };
 const _hoisted_2$8 = ["aria-checked"];
-
+
 
 const _sfc_main$c = {
   __name: 'OptionsReadingProgress',
   setup(__props) {
-
-const { enabled, setEnabled } = useReadingProgress;
+
+const { enabled, setEnabled } = useReadingProgress;
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", _hoisted_1$c, [
@@ -11374,10 +11385,15 @@ const _sfc_main$a = {
 const show = ref(false);
 const button = ref(null);
 
-const toggleSummary = () => show.value = !show.value;
+const publicEvent = inject(publicEventKey, () => {});
+const toggleSummary = () => {
+	show.value = !show.value;
+	publicEvent('options-toggle', { open: show.value });
+};
 const hide = () => {
-	if (!useReaderSettings.blocked.value) {
-		show.value = false;
+	if (show.value && !useReaderSettings.blocked.value) {
+		show.value = false;
+		publicEvent('options-toggle', { open: false });
 	}
 };
 
@@ -11596,12 +11612,12 @@ return (_ctx, _cache) => {
     createBaseVNode("div", _hoisted_2$3, [
       createVNode(NavigationButton, {
         target: "prev",
-        onClicked: _cache[0] || (_cache[0] = $event => (unref(prev)()))
+        onClicked: _cache[0] || (_cache[0] = $event => (unref(prev)(false, 'previous-button')))
       }),
       renderSlot(_ctx.$slots, "default"),
       createVNode(NavigationButton, {
         target: "next",
-        onClicked: _cache[1] || (_cache[1] = $event => (unref(next)()))
+        onClicked: _cache[1] || (_cache[1] = $event => (unref(next)(false, 'next-button')))
       })
     ])
   ]))
@@ -11625,10 +11641,10 @@ const { distanceX } = usePointerSwipe(el, {
 	onSwipeEnd() {
 		if (width.value < 600) {
 			if (distanceX.value > 100) {
-				usePagination.next();
+				usePagination.next(false, 'swipe');
 			}
 			if (distanceX.value < -100) {
-				usePagination.prev();
+				usePagination.prev(false, 'swipe');
 			}
 		}
 	}
@@ -11731,7 +11747,7 @@ return (_ctx, _cache) => {
     ]),
     createVNode(unref(m), {
       modelValue: unref(currentPage),
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (unref(set)(Math.round($event)))),
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (unref(set)(Math.round($event), 'slider'))),
       min: 1,
       max: unref(totalPages),
       step: -1,
@@ -11889,144 +11905,222 @@ const _style_1 = "/* In your Vue component's <style> section */\n:host {\n  -web
 
 const _hoisted_1 = { class: "text-white text-center text-sm" };
 const _hoisted_2 = { class: "text-white text-center text-xs" };
-
+
 
 const _sfc_main = {
   __name: 'App.ce',
-  props: {
-	bookTitle: String,
-	bookContent: String,
-	readerSettings: String,
-	readerBlocked: Boolean,
-	rootClass: {
-		type: String,
-		default: ''
-	},
-	cssFile: String,
-	cssString: String
+  props: {
+	bookTitle: String,
+	bookContent: String,
+	readerSettings: String,
+	readerBlocked: Boolean,
+	rootClass: {
+		type: String,
+		default: ''
+	},
+	cssFile: String,
+	cssString: String
 },
   setup(__props) {
-
-const props = __props;
-
-const { baseFont, bookTitle, chapterTitle, textFont, fontSize, columns, setColumns, mode } = useReaderSettings;
-const { currentPage, totalPages } = usePagination;
-const { content, listenToClicks } = useTextContent;
-const { width, height } = useWindowSize();
-
-const readerComponent = ref(null);
-const contentArea = ref(null);
-const rootComponent = ref(null);
+
+const props = __props;
+
+const { baseFont, bookTitle, chapterTitle, textFont, fontSize, columns, setColumns, mode } = useReaderSettings;
+const { currentPage, totalPages, changeSource } = usePagination;
+const { content, listenToClicks } = useTextContent;
+const { width, height } = useWindowSize();
+
+const readerComponent = ref(null);
+const contentArea = ref(null);
+const rootComponent = ref(null);
 let paginationRevision = 0;
+let hostElement = null;
 
-function syncReadingProgress(allowRestore = false) {
-	const targetPage = useReadingProgress.sync(
-		currentPage.value,
-		totalPages.value,
-		allowRestore
-	);
-	if (targetPage)
-		usePagination.set(targetPage);
-}
-
-function estimatePagesAndSyncProgress() {
-	const revision = ++paginationRevision;
-	const previousPage = currentPage.value;
-	const previousTotal = totalPages.value;
-	useReadingProgress.suspend();
-	const nextTotal = useEstimatePages.estimate(readerComponent, contentArea);
-
-	nextTick(() => requestAnimationFrame(() => {
-		if (revision !== paginationRevision)
-			return
-
-		const targetPage = useReadingProgress.repaginate(
-			previousPage,
-			previousTotal,
-			nextTotal
-		);
-
-		if (targetPage)
-			usePagination.set(targetPage);
-		else
-			syncReadingProgress(true);
-
-		useReadingProgress.resume();
-		useReadingProgress.save(currentPage.value, nextTotal);
-	}));
+function getState() {
+	const currentChapter = useTextContent.context.value.chapter;
+	return {
+		pagination: {
+			currentPage: currentPage.value,
+			totalPages: totalPages.value,
+			progress: totalPages.value > 1
+				? (currentPage.value - 1) / (totalPages.value - 1)
+				: 0
+		},
+		settings: {
+			baseFont: baseFont.value,
+			textFont: textFont.value,
+			fontSize: fontSize.value,
+			columns: columns.value,
+			mode: mode.value,
+			blocked: useReaderSettings.blocked.value,
+			readingProgressEnabled: useReaderSettings.readingProgressEnabled.value
+		},
+		content: {
+			bookTitle: props.bookTitle || bookTitle.value,
+			chapterTitle: chapterTitle.value,
+			chapter: currentChapter ? { ...currentChapter } : null
+		}
+	}
 }
 
-function saveCurrentReadingProgress() {
-	useReadingProgress.save(currentPage.value, totalPages.value);
-}
+function dispatchPublicEvent(name, detail = {}) {
+	if (!hostElement)
+		return
 
-function saveReadingProgressWhenHidden() {
-	if (document.visibilityState === 'hidden')
-		saveCurrentReadingProgress();
+	hostElement.dispatchEvent(new CustomEvent(`paginar:${name}`, {
+		bubbles: true,
+		composed: true,
+		detail: { ...detail, state: getState() }
+	}));
 }
 
+provide(publicEventKey, dispatchPublicEvent);
+
+function syncReadingProgress(allowRestore = false) {
+	const targetPage = useReadingProgress.sync(
+		currentPage.value,
+		totalPages.value,
+		allowRestore
+	);
+	if (targetPage)
+		usePagination.set(targetPage, 'reading-progress');
+}
+
+function estimatePagesAndSyncProgress() {
+	const revision = ++paginationRevision;
+	const previousPage = currentPage.value;
+	const previousTotal = totalPages.value;
+	useReadingProgress.suspend();
+	const nextTotal = useEstimatePages.estimate(readerComponent, contentArea);
+
+	nextTick(() => requestAnimationFrame(() => {
+		if (revision !== paginationRevision)
+			return
+
+		const targetPage = useReadingProgress.repaginate(
+			previousPage,
+			previousTotal,
+			nextTotal
+		);
+
+		if (targetPage)
+			usePagination.set(targetPage, 'repagination');
+		else
+			syncReadingProgress(true);
+
+		useReadingProgress.resume();
+		useReadingProgress.save(currentPage.value, nextTotal);
+	}));
+}
+
+function saveCurrentReadingProgress() {
+	useReadingProgress.save(currentPage.value, totalPages.value);
+}
+
+function saveReadingProgressWhenHidden() {
+	if (document.visibilityState === 'hidden')
+		saveCurrentReadingProgress();
+}
+
 onMounted(async () => {
-	useReaderSettings.initSettings(props.readerSettings);
-	useReadingProgress.init(
-		props.readerSettings,
-		props.bookTitle || bookTitle.value
-	);
-	usePagination.init(readerComponent, contentArea, estimatePagesAndSyncProgress);
-	requestAnimationFrame(() => {
-		estimatePagesAndSyncProgress();
-	});
-	useStyles.initStyles(props, rootComponent);
-	window.addEventListener('pagehide', saveCurrentReadingProgress);
-	document.addEventListener('visibilitychange', saveReadingProgressWhenHidden);
-
+	hostElement = rootComponent.value?.getRootNode()?.host || null;
+	if (hostElement) {
+		hostElement.getState = getState;
+		hostElement.goToPage = page => usePagination.set(page, 'api');
+		hostElement.nextPage = () => usePagination.next(false, 'api');
+		hostElement.previousPage = () => usePagination.prev(false, 'api');
+	}
+	useReaderSettings.initSettings(props.readerSettings);
+	useReadingProgress.init(
+		props.readerSettings,
+		props.bookTitle || bookTitle.value
+	);
+	usePagination.init(readerComponent, contentArea, estimatePagesAndSyncProgress);
+	requestAnimationFrame(() => {
+		estimatePagesAndSyncProgress();
+	});
+	useStyles.initStyles(props, rootComponent);
+	window.addEventListener('pagehide', saveCurrentReadingProgress);
+	document.addEventListener('visibilitychange', saveReadingProgressWhenHidden);
+
 	if (['string', 'boolean'].includes(typeof props.readerBlocked)) {
-		useReaderSettings.setBlocked(props.readerBlocked);
+		useReaderSettings.setBlocked(props.readerBlocked);
 	}
-
-});
-
+	nextTick(() => requestAnimationFrame(() => dispatchPublicEvent('ready')));
+
+});
+
 onBeforeUnmount(() => {
-	window.removeEventListener('pagehide', saveCurrentReadingProgress);
+	window.removeEventListener('pagehide', saveCurrentReadingProgress);
 	document.removeEventListener('visibilitychange', saveReadingProgressWhenHidden);
-});
-
-watch(
-	props,
-	() => {
-		if (props.hasOwnProperty('readerBlocked')) {
-			const readerBlocked = typeof props.readerBlocked === 'boolean'
-				? props.readerBlocked
-				: props.readerBlocked === 'true';
-			useReaderSettings.setBlocked(readerBlocked);
-		}
+	if (hostElement) {
+		delete hostElement.getState;
+		delete hostElement.goToPage;
+		delete hostElement.nextPage;
+		delete hostElement.previousPage;
 	}
-);
-
-watchDebounced(
-	[width, height, content, columns, fontSize, textFont],
-	() => {
-		if (width.value < 1024 && columns.value === 'double')
-			setColumns('single');
-		else {
-			requestAnimationFrame(() => {
-				estimatePagesAndSyncProgress();
-			});
-		}
-	},
-	{ debounce: 125, maxWait: 250 }
-);
-
+	hostElement = null;
+});
+
+watch(
+	props,
+	() => {
+		if (props.hasOwnProperty('readerBlocked')) {
+			const readerBlocked = typeof props.readerBlocked === 'boolean'
+				? props.readerBlocked
+				: props.readerBlocked === 'true';
+			useReaderSettings.setBlocked(readerBlocked);
+		}
+	}
+);
+
+watchDebounced(
+	[width, height, content, columns, fontSize, textFont],
+	() => {
+		if (width.value < 1024 && columns.value === 'double')
+			setColumns('single');
+		else {
+			requestAnimationFrame(() => {
+				estimatePagesAndSyncProgress();
+			});
+		}
+	},
+	{ debounce: 125, maxWait: 250 }
+);
+
 watch(
 	currentPage,
-	() => syncReadingProgress(),
+	(value, previousValue) => {
+		syncReadingProgress();
+		dispatchPublicEvent('page-change', {
+			page: value,
+			previousPage: previousValue,
+			source: changeSource.value
+		});
+	},
 	{ flush: 'sync' }
 );
 
-watchDebounced(content,
-	() => listenToClicks(contentArea),
-	{ debounce: 125, maxWait: 250 }
+watch(
+	[baseFont, textFont, fontSize, columns, mode, useReaderSettings.readingProgressEnabled],
+	(values, previousValues) => {
+		const names = ['baseFont', 'textFont', 'fontSize', 'columns', 'mode', 'readingProgressEnabled'];
+		const changes = names.reduce((result, name, index) => {
+			if (values[index] !== previousValues[index])
+				result[name] = { previous: previousValues[index], value: values[index] };
+			return result
+		}, {});
+		if (Object.keys(changes).length)
+			dispatchPublicEvent('settings-change', { changes });
+	},
+	{ flush: 'post' }
 );
-
+
+watchDebounced(content,
+	() => listenToClicks(contentArea),
+	{ debounce: 125, maxWait: 250 }
+);
+
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", {
@@ -12036,11 +12130,11 @@ return (_ctx, _cache) => {
       id: "rootComponent",
       ref_key: "rootComponent",
       ref: rootComponent,
-      class: normalizeClass(unref(mode)
-				.concat(` ${props.rootClass}`)
-				.concat(` currentPage-${unref(currentPage)}`)
-				.concat(` totalPages-${unref(totalPages)}`)
-				.concat(` columns-${unref(columns)}`)
+      class: normalizeClass(unref(mode)
+				.concat(` ${props.rootClass}`)
+				.concat(` currentPage-${unref(currentPage)}`)
+				.concat(` totalPages-${unref(totalPages)}`)
+				.concat(` columns-${unref(columns)}`)
 			),
       style: normalizeStyle(`font-family: ${unref(baseFont)}`)
     }, [