bok-reader 0.2.3 → 0.3.2

package/dist/components/BokReader/BokReader.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+interface BokReaderProps {
+    epubDataSource: File | ArrayBuffer | string | null;
+    onTitleChange?: (title: string) => void;
+    onLoadingChange?: (isLoading: boolean) => void;
+    onError?: (errorMsg: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    supportedFonts?: {
+        displayName: string;
+        name: string;
+    }[];
+    color?: string;
+}
+export declare const BokReader: React.FC<BokReaderProps>;
+export default BokReader;

package/dist/components/Book.d.ts

@@ -0,0 +1,20 @@
+import { default as React, Dispatch, SetStateAction } from 'react';
+export interface BookHandle {
+    goToPage: (page: number) => void;
+    findAndJumpToHref: (href: string) => void;
+}
+interface PageProps {
+    content: string;
+    title: string;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    fontSize: number;
+    fontFamily: string;
+    sidePadding: number;
+    showTutorial: boolean;
+    isOptionMenuVisible: boolean;
+    containerElementRef: React.RefObject<HTMLDivElement | null>;
+    onPageChange?: (page: number) => void;
+    onPageCountChange?: (count: number) => void;
+}
+declare const Book: React.ForwardRefExoticComponent<PageProps & React.RefAttributes<BookHandle>>;
+export default Book;

package/dist/components/InputScreen/InputScreen.d.ts

@@ -0,0 +1,5 @@
+interface InputScreenProps {
+    handleFileInput: (file: File) => void;
+}
+export default function InputScreen({ handleFileInput }: InputScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingScreen/LoadingScreen.d.ts

@@ -0,0 +1,6 @@
+type LoadingScreenProps = {
+    isLoading: boolean;
+    color: string | undefined;
+};
+export default function LoadingScreen({ isLoading, color, }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Navigation.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+interface NavigationProps {
+    changePage: (amount: number) => void;
+    toggleFullscreen: () => void;
+}
+declare const Navigation: FunctionComponent<NavigationProps>;
+export default Navigation;

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { TocItem } from '../../hooks/useEpub';
+interface NavigationMenuProps {
+    toc: TocItem[];
+    currentPage: number;
+    totalPages: number;
+    onClose: () => void;
+    onGoToPage: (page: number) => void;
+    onChapterClick: (href: string) => void;
+}
+declare const NavigationMenu: React.FC<NavigationMenuProps>;
+export default NavigationMenu;

package/dist/components/OptionsMenu/OptionsMenu.d.ts

@@ -0,0 +1,21 @@
+interface OptionsMenuProps {
+    onClose: () => void;
+    fontSize: number;
+    padding: number;
+    fontFamily: string;
+    colorScheme: string;
+    setFontSize: React.Dispatch<React.SetStateAction<number>>;
+    setPadding: React.Dispatch<React.SetStateAction<number>>;
+    setFontFamily: React.Dispatch<React.SetStateAction<string>>;
+    setColorScheme: React.Dispatch<React.SetStateAction<string>>;
+    supportedFonts: {
+        displayName: string;
+        name: string;
+    }[];
+    supportedColorschemes: {
+        displayName: string;
+        name: string;
+    }[];
+}
+declare function OptionsMenu({ onClose, fontSize, padding, fontFamily, colorScheme, setFontSize, setPadding, setColorScheme, setFontFamily, supportedFonts, supportedColorschemes }: OptionsMenuProps): import("react/jsx-runtime").JSX.Element;
+export default OptionsMenu;

package/dist/components/PageNumber.d.ts

@@ -0,0 +1,6 @@
+interface PageNumberProps {
+    pages: number;
+    currentPage: number;
+}
+export default function PageNumber({ currentPage, pages }: PageNumberProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PrevAndNextPage/PrevAndNextPage.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+interface PrevAndNextPageProps {
+    currentPage: number;
+    pageWidth: number;
+}
+declare const PrevAndNextPage: FunctionComponent<PrevAndNextPageProps>;
+export default PrevAndNextPage;

package/dist/components/TutorialOverlay/TutorialOverlay.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface TutorialOverlayProps {
+    color?: string;
+    onDismiss: () => void;
+}
+declare const TutorialOverlay: React.FC<TutorialOverlayProps>;
+export default TutorialOverlay;

package/dist/helpful_functions/calculatePageOfElement.d.ts

@@ -0,0 +1 @@
+export declare function calculatePageOfElement(element: HTMLElement): number;

package/dist/helpful_functions/toggleFullscreen.d.ts

@@ -0,0 +1 @@
+export default function toggleFullScreen(): void;

package/dist/hooks/useEpub.d.ts

@@ -0,0 +1,14 @@
+export type TocItem = {
+    label: string;
+    href: string;
+    subitems: TocItem[];
+};
+export default function useEpub(): {
+    title: string;
+    rawContent: string;
+    toc: TocItem[];
+    isLoading: boolean;
+    error: string | null;
+    loadEpub: (source: File | ArrayBuffer | string) => Promise<void>;
+    setIsLoading: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+};

package/dist/hooks/useNavigation.d.ts

@@ -0,0 +1,2 @@
+declare const useNavigation: (changePage: (n: number) => void, isOptionMenuVisible: boolean, containerElementRef: React.RefObject<HTMLDivElement | null>, showTutorial: boolean) => void;
+export default useNavigation;

package/dist/hooks/usePage.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function usePage(containerRef: RefObject<Element | null>): number[];

package/dist/hooks/usePercentageRead.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function usePercentageRead(bookRef: RefObject<HTMLDivElement | null>): [number, React.Dispatch<React.SetStateAction<number>>];

package/dist/hooks/usePersistentState.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from 'react';
+declare function usePersistentState<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>];
+export default usePersistentState;

package/dist/main.css

@@ -1 +1 @@
-._loading-screen_13vxc_1,._loading-screen-gon_13vxc_2{height:100%;width:100%;position:absolute;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:center;z-index:9999;will-change:opacity}._loading-screen_13vxc_1{opacity:1;transition:opacity .5s cubic-bezier(.65,0,.35,1);pointer-events:all}._loading-screen-gon_13vxc_2{opacity:0;transition:opacity .8s cubic-bezier(.65,0,.35,1);pointer-events:none}._spinner_13vxc_32{--loader-color: red;--loader-size: 80px;position:relative;width:var(--loader-size);height:var(--loader-size);display:flex;align-items:center;justify-content:center}._spinner_13vxc_32:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid transparent;border-top-color:var(--loader-color);border-right-color:var(--loader-color);border-bottom-color:transparent;box-shadow:0 0 10px #0000;animation:_spin-outer_13vxc_1 2s cubic-bezier(.77,0,.175,1) infinite}._spinner_13vxc_32:after{content:"";position:absolute;width:70%;height:70%;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--loader-color);border-left-color:var(--loader-color);box-shadow:0 0 5px #0000;animation:_spin-inner_13vxc_1 1.2s cubic-bezier(.55,.055,.675,.19) infinite}._core_13vxc_82{width:15%;height:15%;background-color:var(--loader-color);border-radius:50%;box-shadow:0 0 15px var(--loader-color);animation:_pulse_13vxc_1 1.5s ease-in-out infinite alternate}@keyframes _spin-outer_13vxc_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes _spin-inner_13vxc_1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-180deg) scale(.9)}to{transform:rotate(-360deg) scale(1)}}@keyframes _pulse_13vxc_1{0%{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}.options-menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0009;z-index:9999;opacity:1;container-type:size;container-name:options-overlay;transition:opacity .4s cubic-bezier(.32,.72,0,1),backdrop-filter .4s ease;overflow:hidden}.options-menu-overlay.fade-out{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.options-menu{position:absolute;bottom:20px;left:50%;width:calc(100% - 40px);max-width:400px;background:#1e1e1ef2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid rgba(255,255,255,.1);color:#fff;max-height:80%;overflow-y:auto;transform:translate(-50%) translateY(120%);transition:transform .5s cubic-bezier(.19,1,.22,1);box-shadow:0 10px 40px #00000080}.options-menu.visible{transform:translate(-50%) translateY(0)}.options-menu.slide-down{transform:translate(-50%) translateY(120%)}.options-menu h2{margin:0 0 24px;font-size:1.25rem;font-weight:600;text-align:center;color:#ffffffe6;letter-spacing:-.02em}.close-button{position:absolute;top:20px;right:20px;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:50%;font-size:16px;color:#fffc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-button:hover{background:#fff3;color:#fff;transform:rotate(90deg)}.options-buttons{display:flex;flex-direction:column;gap:16px}.font-family-buttons,.padding-buttons,.font-buttons{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:#0000004d;padding:8px 12px;border-radius:16px;gap:12px;border:1px solid rgba(255,255,255,.05)}.option-label{font-size:.9rem;color:#ffffffb3;font-weight:500;margin-right:auto;padding-left:4px}.options-buttons button:not(.close-button){height:36px;min-width:36px;padding:0 12px;font-size:16px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.05);border-radius:10px;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-weight:500}.options-buttons button:not(.close-button):hover{background-color:#fff3;transform:translateY(-1px)}.options-buttons button:not(.close-button):active{transform:translateY(1px)}.options-buttons>button:last-child{width:100%;margin-top:8px;background-color:#ffffff14;height:44px}.font-family-buttons select{height:36px;border-radius:10px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.05);color:#fff;padding:0 32px 0 12px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:.9rem;transition:background .2s;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 12px top 50%;background-size:10px auto}.font-family-buttons select:hover{background-color:#fff3}.option-value{font-variant-numeric:tabular-nums;font-weight:600;min-width:24px;text-align:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s;display:inline-block;color:#fff}.option-value.value-changed{transform:scale(1.3);color:#4facfe}.padding-buttons,.font-buttons{justify-content:space-between}.padding-buttons>div,.font-buttons>div{display:flex;align-items:center;gap:8px}.options-menu::-webkit-scrollbar{width:6px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:20px}@keyframes _fadeIn_1cqa3_1{0%{opacity:0}to{opacity:1}}@keyframes _pulse_1cqa3_1{0%{box-shadow:0 0 0 0 var(--accent-color)}70%{box-shadow:0 0 0 20px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes _float_1cqa3_1{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}@keyframes _bounce_1cqa3_169{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}}._overlay_1cqa3_53{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;background:radial-gradient(circle at center,#0006,#000000d9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;pointer-events:auto;opacity:1;transition:opacity .4s cubic-bezier(.25,.1,.25,1);animation:_fadeIn_1cqa3_1 .5s ease-out}._overlay_1cqa3_53._fadeOut_1cqa3_80{opacity:0;pointer-events:none}._interactionZone_1cqa3_86{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#fff;cursor:pointer}._centerZone_1cqa3_96{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:100px;pointer-events:none}._iconWrapper_1cqa3_107{width:64px;height:64px;border-radius:50%;background-color:#ffffff1a;border:1px solid var(--accent-color);display:flex;align-items:center;justify-content:center;margin-bottom:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:_pulse_1cqa3_1 2s infinite}._iconWrapper_1cqa3_107 svg{width:32px;height:32px;fill:var(--accent-color);filter:drop-shadow(0 0 5px var(--accent-color))}._label_1cqa3_131{font-family:Inter,system-ui,sans-serif;font-size:1.1rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:.9;text-align:center}._bottomIconGroup_1cqa3_143{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}._bottomIconWrapper_1cqa3_150{width:48px;height:48px;border-radius:50%;background-color:#ffffff1a;border:1px solid var(--accent-color);display:flex;align-items:center;justify-content:center;margin-bottom:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}._bottomIconWrapper_1cqa3_150 svg{width:24px;height:24px;fill:var(--accent-color)}._bounceArrow_1cqa3_169{margin-top:8px;animation:_bounce_1cqa3_169 2s infinite}._bounceArrow_1cqa3_169 svg{opacity:.8;fill:var(--accent-color)}._dismissButton_1cqa3_179{margin-top:20px;background:var(--accent-color);color:#000;font-weight:700;border:none;padding:12px 32px;border-radius:30px;font-size:1rem;cursor:pointer;pointer-events:auto;box-shadow:0 4px 20px #0000004d;transition:transform .2s,box-shadow .2s;animation:_float_1cqa3_1 3s ease-in-out infinite}._dismissButton_1cqa3_179:hover{transform:scale(1.05);box-shadow:0 6px 25px #00000080}._dismissButton_1cqa3_179:active{transform:scale(.95)}.bok-reader-container{--bg-color: black;--text-color: rgb(215, 215, 215);--page-num-text: rgba(255, 255, 255, .4);--page-num-bg: rgba(0, 0, 0, .3);--page-num-border: transparent;width:100%;height:100%;position:relative;overflow-y:hidden;overflow-x:hidden;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;text-align:justify;color-scheme:dark light;color:var(--text-color)!important;background-color:var(--bg-color);overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:size}.bok-reader-container.davinci{--bg-color: #dccba3;--text-color: #463425;--page-num-text: #2b1f15;--page-num-bg: rgba(70, 52, 37, .1);--page-num-border: rgba(70, 52, 37, .2)}.bok-reader-container::-webkit-scrollbar{display:none}.bok-reader-container .book-page{margin:0;font-family:var(--font-family);padding:var(--top-padding) var(--side-padding) var(--bottom-padding);height:100%;text-shadow:0 1px 2px var(--bg-color);font-size:var(--font-size);column-gap:calc(2 * var(--side-padding));-webkit-column-fill:auto;-webkit-column-gap:calc(2 * var(--side-padding));overflow-x:hidden;overscroll-behavior-x:none;overflow-y:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}.bok-reader-container .book-page::-webkit-scrollbar{display:none}.bok-reader-container .book-page>*{break-inside:avoid-column;page-break-inside:avoid;-webkit-column-break-inside:avoid}@container (aspect-ratio > 1/1){.bok-reader-container .book-page{column-count:2;-moz-column-count:2;-webkit-column-count:2;column-width:calc(50% - var(--side-padding));-webkit-column-width:calc(50% - var(--side-padding))}.bok-reader-container .book-page img,.bok-reader-container .book-page svg{max-width:calc(100% - 2 * var(--side-padding))!important;margin-bottom:10px}}@container (aspect-ratio <= 1/1){.bok-reader-container .book-page{column-count:1;-moz-column-count:1;-webkit-column-count:1;column-width:var(--computed-width, 100%);-webkit-column-width:var(--computed-width, 100%);width:100%;box-sizing:border-box}.bok-reader-container .book-page img,.bok-reader-container .book-page svg{max-width:calc(100% - 2 * var(--side-padding))!important;margin-bottom:10px}}.bok-reader-container .book-page img,.bok-reader-container .book-page svg{border-radius:10px;max-height:calc(100% - var(--top-padding) - var(--bottom-padding))!important;display:block;margin-left:auto;margin-right:auto;object-fit:contain;box-sizing:border-box;break-inside:avoid-column;page-break-inside:avoid;-webkit-column-break-inside:avoid}.bok-reader-container .book-page svg>image{width:100%;height:100%}.bok-reader-container .bok-chapter{margin-bottom:100%;break-inside:avoid-column;page-break-inside:avoid;-webkit-column-break-inside:avoid}.bok-reader-container parsererror{display:none}.bok-reader-container .page-number{position:absolute;bottom:20px;left:50%;transform:translate(-50%);font-size:12px;font-weight:500;letter-spacing:.5px;z-index:10;pointer-events:none;font-variant-numeric:tabular-nums;color:var(--page-num-text);background:var(--page-num-bg);border:1px solid var(--page-num-border);padding:4px 10px;border-radius:12px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.bok-reader-container .bottom-click-area{position:absolute;bottom:0;left:0;width:100%;height:15%;z-index:1000;background-color:transparent;cursor:pointer}
+._loading-screen_13vxc_1,._loading-screen-gon_13vxc_2{height:100%;width:100%;position:absolute;top:0;left:0;background-color:#000;display:flex;align-items:center;justify-content:center;z-index:9999;will-change:opacity}._loading-screen_13vxc_1{opacity:1;transition:opacity .5s cubic-bezier(.65,0,.35,1);pointer-events:all}._loading-screen-gon_13vxc_2{opacity:0;transition:opacity .8s cubic-bezier(.65,0,.35,1);pointer-events:none}._spinner_13vxc_32{--loader-color: red;--loader-size: 80px;position:relative;width:var(--loader-size);height:var(--loader-size);display:flex;align-items:center;justify-content:center}._spinner_13vxc_32:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid transparent;border-top-color:var(--loader-color);border-right-color:var(--loader-color);border-bottom-color:transparent;box-shadow:0 0 10px #0000;animation:_spin-outer_13vxc_1 2s cubic-bezier(.77,0,.175,1) infinite}._spinner_13vxc_32:after{content:"";position:absolute;width:70%;height:70%;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--loader-color);border-left-color:var(--loader-color);box-shadow:0 0 5px #0000;animation:_spin-inner_13vxc_1 1.2s cubic-bezier(.55,.055,.675,.19) infinite}._core_13vxc_82{width:15%;height:15%;background-color:var(--loader-color);border-radius:50%;box-shadow:0 0 15px var(--loader-color);animation:_pulse_13vxc_1 1.5s ease-in-out infinite alternate}@keyframes _spin-outer_13vxc_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes _spin-inner_13vxc_1{0%{transform:rotate(0) scale(1)}50%{transform:rotate(-180deg) scale(.9)}to{transform:rotate(-360deg) scale(1)}}@keyframes _pulse_13vxc_1{0%{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}.options-menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0009;z-index:9999;opacity:1;container-type:size;container-name:options-overlay;transition:opacity .4s cubic-bezier(.32,.72,0,1),backdrop-filter .4s ease;overflow:hidden}.options-menu-overlay.fade-out{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.options-menu{position:absolute;bottom:20px;left:50%;transform:translate(-50%) translateY(120%);width:calc(100% - 40px);max-width:400px;background:#1e1e1ef2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid rgba(255,255,255,.1);color:#fff;max-height:80%;overflow-y:auto;transition:transform .5s cubic-bezier(.19,1,.22,1);box-shadow:0 10px 40px #00000080}.options-menu.visible{transform:translate(-50%) translateY(0)}.options-menu.slide-down{transform:translate(-50%) translateY(120%)}@media (min-width: 768px){.options-menu{left:auto;right:20px;transform:translateY(120%)}.options-menu.visible{transform:translateY(0)}.options-menu.slide-down{transform:translateY(120%)}}.options-menu h2{margin:0 0 24px;font-size:1.25rem;font-weight:600;text-align:center;color:#ffffffe6;letter-spacing:-.02em}.close-button{position:absolute;top:20px;right:20px;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:50%;font-size:16px;color:#fffc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-button:hover{background:#fff3;color:#fff;transform:rotate(90deg)}.options-buttons{display:flex;flex-direction:column;gap:16px}.font-family-buttons,.padding-buttons,.font-buttons{display:flex;flex-direction:row;justify-content:space-between;align-items:center;background:#0000004d;padding:8px 12px;border-radius:16px;gap:12px;border:1px solid rgba(255,255,255,.05)}.option-label{font-size:.9rem;color:#ffffffb3;font-weight:500;margin-right:auto;padding-left:4px}.options-buttons button:not(.close-button){height:36px;min-width:36px;padding:0 12px;font-size:16px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.05);border-radius:10px;color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-weight:500}.options-buttons button:not(.close-button):hover{background-color:#fff3;transform:translateY(-1px)}.options-buttons button:not(.close-button):active{transform:translateY(1px)}.options-buttons>button:last-child{width:100%;margin-top:8px;background-color:#ffffff14;height:44px}.font-family-buttons select{height:36px;border-radius:10px;background-color:#ffffff1a;border:1px solid rgba(255,255,255,.05);color:#fff;padding:0 32px 0 12px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:.9rem;transition:background .2s;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 12px top 50%;background-size:10px auto}.font-family-buttons select:hover{background-color:#fff3}.option-value{font-variant-numeric:tabular-nums;font-weight:600;min-width:24px;text-align:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s;display:inline-block;color:#fff}.option-value.value-changed{transform:scale(1.3);color:#4facfe}.padding-buttons,.font-buttons{justify-content:space-between}.padding-buttons>div,.font-buttons>div{display:flex;align-items:center;gap:8px}.options-menu::-webkit-scrollbar{width:6px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:20px}._nav-menu-overlay_16ewi_1{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0009;z-index:9999;opacity:1;transition:opacity .4s cubic-bezier(.32,.72,0,1),backdrop-filter .4s ease}._nav-menu-overlay_16ewi_1._fade-out_16ewi_14{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}._nav-menu_16ewi_1{position:absolute;bottom:20px;left:50%;transform:translate(-50%) translateY(120%);width:calc(100% - 40px);max-width:500px;height:70vh;background:#1e1e1ef2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px #00000080;display:flex;flex-direction:column;overflow:hidden;transition:transform .5s cubic-bezier(.19,1,.22,1);color:#fff}._nav-menu_16ewi_1._visible_16ewi_44{transform:translate(-50%) translateY(0)}._nav-menu_16ewi_1._slide-down_16ewi_48{transform:translate(-50%) translateY(120%)}._nav-header_16ewi_53{padding:20px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;background:#0003}._nav-header_16ewi_53 h2{margin:0;font-size:1.1rem;font-weight:600}._close-btn_16ewi_68{background:none;border:none;color:#ffffffb3;font-size:1.5rem;cursor:pointer;line-height:1;padding:0}._close-btn_16ewi_68:hover{color:#fff}._toc-container_16ewi_80{flex:1;overflow-y:auto;padding:10px 0}._toc-list_16ewi_86{list-style:none;padding:0;margin:0}._toc-item_16ewi_92{padding:12px 24px;cursor:pointer;color:#fffc;border-bottom:1px solid rgba(255,255,255,.03);transition:background .2s;font-size:.95rem;display:flex;justify-content:space-between;align-items:baseline;gap:10px}._toc-item_16ewi_92:hover{background:#ffffff0d;color:#fff}._toc-page-num_16ewi_112{font-size:.8rem;color:#fff6;font-variant-numeric:tabular-nums;white-space:nowrap}._toc-sublist_16ewi_120{list-style:none;padding:0;background:#0000001a}._toc-sublist_16ewi_120 ._toc-item_16ewi_92{padding-left:40px;font-size:.9rem}._page-jumper_16ewi_131{padding:20px;background:#0000004d;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:20px}._jumper-controls_16ewi_140{display:flex;justify-content:center;align-items:center;gap:16px}._jumper-input_16ewi_148{background:#ffffff1a;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:8px;width:50px;text-align:center;font-weight:700;-moz-appearance:textfield}._jumper-input_16ewi_148::-webkit-outer-spin-button,._jumper-input_16ewi_148::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._jumper-slider_16ewi_166{width:100%;accent-color:#4facfe;height:4px;border-radius:2px;cursor:pointer}._total-pages_16ewi_174{color:#ffffff80;font-size:.9rem;font-variant-numeric:tabular-nums}._go-btn_16ewi_180{background:#fff;color:#000;border:none;padding:8px 24px;border-radius:8px;font-weight:600;cursor:pointer}._go-btn_16ewi_180:hover{background:#e0e0e0}._toc-container_16ewi_80::-webkit-scrollbar{width:6px}._toc-container_16ewi_80::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}@keyframes _fadeIn_18kzg_1{0%{opacity:0}to{opacity:1}}@keyframes _pulse_18kzg_1{0%{box-shadow:0 0 0 0 var(--accent-color)}70%{box-shadow:0 0 0 20px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes _float_18kzg_1{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}@keyframes _bounce_18kzg_173{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}}._overlay_18kzg_53{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2000;background:radial-gradient(circle at center,#0006,#000000d9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;pointer-events:auto;opacity:1;transition:opacity .4s cubic-bezier(.25,.1,.25,1);animation:_fadeIn_18kzg_1 .5s ease-out}._overlay_18kzg_53._fadeOut_18kzg_80{opacity:0;pointer-events:none}._interactionZone_18kzg_86{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#fff;cursor:pointer}._centerZone_18kzg_96{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:100px;pointer-events:none}._iconWrapper_18kzg_107{width:64px;height:64px;border-radius:50%;background-color:#ffffff1a;border:1px solid var(--accent-color);display:flex;align-items:center;justify-content:center;margin-bottom:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:_pulse_18kzg_1 2s infinite}._iconWrapper_18kzg_107 svg{width:32px;height:32px;fill:var(--accent-color);filter:drop-shadow(0 0 5px var(--accent-color))}._label_18kzg_131{font-family:Inter,system-ui,sans-serif;font-size:1.1rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;text-shadow:0 2px 10px rgba(0,0,0,.8);opacity:.9;text-align:center}._bottomIconGroup_18kzg_143{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}._bottomIconWrapper_18kzg_150{width:48px;height:48px;border-radius:50%;background-color:#ffffff1a;border:1px solid var(--accent-color);display:flex;align-items:center;justify-content:center;margin-bottom:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}._bottomIconWrapper_18kzg_150 svg{width:24px;height:24px;fill:var(--accent-color)}._bottomIconWrapper_18kzg_150 svg path{fill:var(--accent-color)}._bounceArrow_18kzg_173{margin-top:8px;animation:_bounce_18kzg_173 2s infinite}._bounceArrow_18kzg_173 svg{opacity:.8;fill:var(--accent-color)}._dismissButton_18kzg_183{margin-top:20px;background:var(--accent-color);color:#000;font-weight:700;border:none;padding:12px 32px;border-radius:30px;font-size:1rem;cursor:pointer;pointer-events:auto;box-shadow:0 4px 20px #0000004d;transition:transform .2s,box-shadow .2s;animation:_float_18kzg_1 3s ease-in-out infinite}._dismissButton_18kzg_183:hover{transform:scale(1.05);box-shadow:0 6px 25px #00000080}._dismissButton_18kzg_183:active{transform:scale(.95)}.bok-reader-container{--bg-color: black;--text-color: rgb(215, 215, 215);--page-num-text: rgba(255, 255, 255, .4);--page-num-bg: rgba(0, 0, 0, .3);--page-num-border: rgba(255, 255, 255, .2);width:100%;height:100%;position:relative;overflow-y:hidden;overflow-x:hidden;overscroll-behavior:none;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;text-align:justify;color-scheme:dark light;color:var(--text-color)!important;background-color:var(--bg-color);overflow:hidden;scrollbar-width:none;-ms-overflow-style:none;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:size}.bok-reader-container.davinci{--bg-color: #dccba3;--text-color: #463425;--page-num-text: #2b1f15;--page-num-bg: rgba(70, 52, 37, .1);--page-num-border: rgba(70, 52, 37, .2)}.bok-reader-container::-webkit-scrollbar{display:none}.bok-reader-container .book-page{margin:0;font-family:var(--font-family);padding:var(--top-padding) var(--side-padding) var(--bottom-padding);height:100%;text-shadow:0 1px 2px var(--bg-color);font-size:var(--font-size);column-gap:calc(2 * var(--side-padding));-webkit-column-fill:auto;-webkit-column-gap:calc(2 * var(--side-padding));overflow-x:hidden;overscroll-behavior:none;overflow-y:hidden;-webkit-overflow-scrolling:touch;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}.bok-reader-container .book-page::-webkit-scrollbar{display:none}.bok-reader-container .book-page>*{break-inside:avoid-column;page-break-inside:avoid;-webkit-column-break-inside:avoid}@container (aspect-ratio > 1/1){.bok-reader-container .book-page{column-count:2;-moz-column-count:2;-webkit-column-count:2;column-width:calc(50% - var(--side-padding));-webkit-column-width:calc(50% - var(--side-padding))}.bok-reader-container .book-page img,.bok-reader-container .book-page svg{max-width:calc(100% - 2 * var(--side-padding))!important;margin-bottom:10px}}@container (aspect-ratio <= 1/1){.bok-reader-container .book-page{column-count:1;-moz-column-count:1;-webkit-column-count:1;column-width:var(--computed-width, 100%);-webkit-column-width:var(--computed-width, 100%);width:100%;box-sizing:border-box}.bok-reader-container .book-page img,.bok-reader-container .book-page svg{max-width:calc(100% - 2 * var(--side-padding))!important;margin-bottom:10px}}.bok-reader-container .book-page img,.bok-reader-container .book-page svg{width:auto!important;height:auto!important;max-height:calc(100cqh - var(--top-padding) - var(--bottom-padding) - 20px)!important;display:block;margin:0 auto 10px;border-radius:10px;object-fit:contain;box-sizing:border-box;break-inside:avoid-column;page-break-inside:avoid;-webkit-column-break-inside:avoid}.bok-reader-container .book-page svg>image{width:100%;height:100%}.bok-reader-container .bok-chapter{margin-bottom:100%;break-inside:avoid-column;page-break-inside:avoid;-webkit-column-break-inside:avoid}.bok-reader-container .bok-chapter h1,.bok-reader-container .bok-chapter h2,.bok-reader-container .bok-chapter h3,.bok-reader-container .bok-chapter h4,.bok-reader-container .bok-chapter h5,.bok-reader-container .bok-chapter h6{margin-top:1.5em;margin-bottom:.8em;break-after:avoid-column;page-break-after:avoid;-webkit-column-break-after:avoid}.bok-reader-container .bok-chapter h1{font-size:2em;margin-top:2em}.bok-reader-container .bok-chapter h2{font-size:1.5em;margin-top:1.8em}.bok-reader-container .bok-chapter h3{font-size:1.3em;margin-top:1.6em}.bok-reader-container parsererror{display:none}.bok-reader-container .page-number{position:absolute;bottom:20px;left:50%;transform:translate(-50%);font-size:12px;font-weight:500;letter-spacing:.5px;z-index:10;pointer-events:none;font-variant-numeric:tabular-nums;color:var(--page-num-text);background:var(--page-num-bg);border:1px solid var(--page-num-border);padding:4px 10px;border-radius:12px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.bok-reader-container .bottom-interaction-layer{position:absolute;bottom:0;left:0;width:100%;height:15%;z-index:1000;display:flex}.bok-reader-container .trigger-zone{flex:1;height:100%;background-color:transparent;cursor:pointer}.bok-reader-container .settings-icon{position:absolute;bottom:20px;right:20px;font-size:14px;cursor:pointer;z-index:1001;opacity:.5;transition:opacity .2s ease;color:var(--page-num-text)}.bok-reader-container .settings-icon:hover{opacity:.8}

package/dist/main.d.ts

@@ -1 +1 @@
-export { BokReader } from '../src/components/BokReader/BokReader';
+export { BokReader } from './components/BokReader/BokReader';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bok-reader",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.3.2",
   "type": "module",
   "main": "dist/bok.umd.js",
   "module": "dist/bok.es.js",
@@ -17,7 +17,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "jszip": "^3.10.1"
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.555.0"
   },
   "peerDependencies": {
     "react": "19.2.0",