fix: lint

packages/core/src/cfi/CfiHandler.ts

@@ -1162,4 +1162,4 @@ export class CfiHandler {
     // @ts-ignore
     return this.resolveLast(doc, opts)
   }
-}
+}

packages/core/src/cfi/lookup/resolveCfi.ts

@@ -23,9 +23,7 @@ export const resolveCfi = ({
   const { cleanedCfi, offset } = extractProseMetadataFromCfi(cfi)
   const cfiHandler = new CfiHandler(cleanedCfi, {})
 
-  const doc =
-    spineItem.frame.element?.contentWindow
-      ?.document
+  const doc = spineItem.frame.element?.contentWindow?.document
 
   if (doc) {
     try {

packages/core/src/enhancers/events/events.ts

@@ -51,7 +51,7 @@ export const eventsEnhancer =
     const reader = next(options)
 
     reader.hookManager.register(`item.onLoad`, ({ destroy, frame, itemId }) => {
-      const item = reader.spineItemManager.get(itemId)
+      const item = reader.spineItemsManager.get(itemId)
 
       if (!item) return
 

packages/core/src/enhancers/events/normalizeEventForViewport.ts

@@ -1,14 +1,14 @@
 import { BehaviorSubject } from "rxjs"
 import { getOriginalFrameEventFromDocumentEvent } from "../../frames"
-import { createLocationResolver } from "../../spine/locationResolver"
 import { isMouseEvent, isPointerEvent, isTouchEvent } from "../../utils/dom"
+import { SpineLocator } from "../../spine/locator/SpineLocator"
 
 export const createNormalizeEventForViewport = ({
   iframeEventBridgeElement$,
   locator,
 }: {
   iframeEventBridgeElement$: BehaviorSubject<HTMLElement | undefined>
-  locator: ReturnType<typeof createLocationResolver>
+  locator: SpineLocator
 }) => {
   const normalizeEventForViewport = <
     E extends MouseEvent | TouchEvent | PointerEvent,

packages/core/src/enhancers/navigation/resolvers/getNavigationForLeftPage.ts

@@ -20,7 +20,7 @@ export const getNavigationForLeftPage = ({
   navigationResolver,
   spineItemsManager,
   spineLocator,
-  computedPageTurnDirection
+  computedPageTurnDirection,
 }: {
   position: ViewportPosition
   spineItem: SpineItem

packages/core/src/enhancers/navigation/types.ts

@@ -15,6 +15,6 @@ export type NavigationEnhancerOutput = {
     goToTopSpineItem: ManualNavigator["goToTopSpineItem"]
     goToBottomSpineItem: ManualNavigator["goToBottomSpineItem"]
     goToUrl: ManualNavigator["goToUrl"]
-    goToPageOfSpineItem: ManualNavigator['goToPageOfSpineItem']
+    goToPageOfSpineItem: ManualNavigator["goToPageOfSpineItem"]
   }
 }

packages/core/src/frames.ts

@@ -44,6 +44,7 @@ export const getAttributeValueFromString = (string: string, key: string) => {
 export const getOriginalFrameEventFromDocumentEvent = <E extends Event>(
   event: E,
 ): E | undefined => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   return event[__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY]
 }

packages/core/src/navigation/consolidation/withDirection.ts

@@ -106,7 +106,6 @@ export const getOrGuessDirection = ({
   }
 }
 
-
 export const withDirection =
   ({
     context,

packages/core/src/navigation/consolidation/withUrlInfo.ts

@@ -7,11 +7,7 @@ type Navigation = {
 }
 
 export const withUrlInfo =
-  ({
-    navigationResolver,
-  }: {
-    navigationResolver: NavigationResolver
-  }) =>
+  ({ navigationResolver }: { navigationResolver: NavigationResolver }) =>
   <N extends Navigation>(stream: Observable<N>): Observable<N> => {
     return stream.pipe(
       map((params) => {

packages/core/src/navigation/restoration/restorePosition.ts

@@ -26,7 +26,8 @@ const restoreNavigationForScrollingPageTurnMode = ({
 
   if (!foundSpineItem) return { x: 0, y: 0 }
 
-  const { height, top } = spineItemsManager.getAbsolutePositionOf(foundSpineItem)
+  const { height, top } =
+    spineItemsManager.getAbsolutePositionOf(foundSpineItem)
 
   const isPositionWithinSpineItem = spineLocator.isPositionWithinSpineItem(
     navigation.position,

packages/core/src/spine/locator/getVisibleSpineItemsFromPosition.ts

@@ -32,9 +32,8 @@ export const getVisibleSpineItemsFromPosition = ({
     getSpineItemFromPosition({ position, settings, spineItemsManager }) ||
     spineItemsManager.get(0)
 
-  const spineItemsVisible = spineItemsManager
-    .items
-    .reduce<SpineItem[]>((acc, spineItem) => {
+  const spineItemsVisible = spineItemsManager.items.reduce<SpineItem[]>(
+    (acc, spineItem) => {
       const itemPosition = spineItemsManager.getAbsolutePositionOf(spineItem)
 
       const { visible } = getItemVisibilityForPosition({
@@ -50,7 +49,9 @@ export const getVisibleSpineItemsFromPosition = ({
       }
 
       return acc
-    }, [])
+    },
+    [],
+  )
 
   const beginItem = spineItemsVisible[0] ?? fallbackSpineItem
   const endItem = spineItemsVisible[spineItemsVisible.length - 1] ?? beginItem

packages/core/src/spineItem/createSpineItem.ts

@@ -11,7 +11,7 @@ export const createSpineItem = ({
   containerElement,
   settings,
   hookManager,
-  index
+  index,
 }: {
   item: Manifest[`spineItems`][number]
   containerElement: HTMLElement
@@ -27,7 +27,7 @@ export const createSpineItem = ({
       containerElement,
       settings,
       hookManager,
-      index
+      index,
     })
   }
 
@@ -37,7 +37,7 @@ export const createSpineItem = ({
     containerElement,
     settings,
     hookManager,
-    index
+    index,
   })
 }
 

packages/core/src/spineItem/frame/loader/createFrameElement.ts

@@ -28,6 +28,6 @@ export const createFrameElement = Report.measurePerformance(
     opacity: 0;
   `
 
-  return frame
+    return frame
   },
 )

packages/core/src/utils/rxjs.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Observable, of, OperatorFunction } from "rxjs"
-import { first, map, switchMap, withLatestFrom } from "rxjs/operators"
+import { Observable, OperatorFunction } from "rxjs"
+import { first, map, switchMap } from "rxjs/operators"
 
 export const mapKeysTo = <R extends { [key: string]: any }, K extends keyof R>(
   keys: K[],

packages/demo/src/App.tsx

@@ -55,7 +55,7 @@ const Effects: FC<{ reader: ReaderInstance | undefined }> = ({ reader }) => {
   useEffect(() => {
     const zoomSub = reader?.zoom.$.isZooming$.subscribe(setIsZoomingState)
 
-    const paginationSub = reader?.pagination.paginationInfo$.subscribe(({ beginCfi = `` }) => {
+    const paginationSub = reader?.pagination.pagination$.subscribe(({ beginCfi = `` }) => {
       localStorage.setItem(`cfi`, beginCfi)
     })
 

packages/demo/src/classic/useGestureHandler.ts

@@ -60,10 +60,10 @@ export const useGestureHandler = (container: HTMLElement | undefined) => {
 
           // console.log('hammer.tap', x, width * pageTurnMargin)
           if (x < width * pageTurnMargin) {
-            reader.viewportNavigator.turnLeft()
+            reader.navigation.turnLeft()
             // console.log('hammer.tap.left')
           } else if (x > width * (1 - pageTurnMargin)) {
-            reader.viewportNavigator.turnRight()
+            reader.navigation.turnRight()
           } else {
             if (hasCurrentHighlight) {
               setMenuOpenState(false)
@@ -154,10 +154,10 @@ export const useGestureHandler = (container: HTMLElement | undefined) => {
         const velocity = computedPageTurnDirection === `horizontal` ? ev.velocityX : ev.velocityY
         // console.log(`hammer.onPanMove.velocity`, velocity)
         if (velocity < -0.5) {
-          reader?.viewportNavigator.turnRight()
+          reader?.navigation.turnRight()
         }
         if (velocity > 0.5) {
-          reader?.viewportNavigator.turnLeft()
+          reader?.navigation.turnLeft()
         }
       }
 

packages/demo/src/comics/useGestureHandler.ts

@@ -30,9 +30,9 @@ export const useGestureHandler = (container: HTMLElement | undefined, isUsingFre
         }
 
         if (x < width * pageTurnMargin) {
-          reader.viewportNavigator.turnLeft()
+          reader.navigation.turnLeft()
         } else if (x > width * (1 - pageTurnMargin)) {
-          reader.viewportNavigator.turnRight()
+          reader.navigation.turnRight()
         } else {
           setMenuOpenState((val) => !val)
         }
@@ -96,7 +96,7 @@ export const useGestureHandler = (container: HTMLElement | undefined, isUsingFre
         } else {
           if (normalizedEvent && `x` in normalizedEvent) {
             movingStartOffsets = { x: normalizedEvent.x, y: normalizedEvent.y }
-            reader?.viewportNavigator.moveTo({ x: 0, y: 0 }, { start: true })
+            reader?.navigation.moveTo({ x: 0, y: 0 }, { start: true })
           }
         }
       }
@@ -105,7 +105,7 @@ export const useGestureHandler = (container: HTMLElement | undefined, isUsingFre
         if (reader?.zoom.isZooming()) {
           reader.zoom.move({ x: ev.deltaX, y: ev.deltaY }, { isFirst: false, isLast: false })
         } else {
-          reader?.viewportNavigator.moveTo({ x: deltaX, y: deltaY })
+          reader?.navigation.moveTo({ x: deltaX, y: deltaY })
         }
       }
 
@@ -115,7 +115,7 @@ export const useGestureHandler = (container: HTMLElement | undefined, isUsingFre
           reader.zoom.move(undefined, { isFirst: false, isLast: true })
         } else {
           if (movingHasStarted.current) {
-            reader?.viewportNavigator.moveTo({ x: deltaX, y: deltaY }, { final: true })
+            reader?.navigation.moveTo({ x: deltaX, y: deltaY }, { final: true })
           }
         }
 

packages/demo/src/raw/createApp.ts

@@ -53,17 +53,17 @@ const createHammerInteraction = (container: HTMLElement, reader: Reader) => {
 
       if (normalizedEvent && `x` in normalizedEvent) {
         movingStartOffsets = { x: normalizedEvent.x, y: normalizedEvent.y }
-        reader?.viewportNavigator.moveTo({ x: 0, y: 0 }, { start: true })
+        reader?.navigation.moveTo({ x: 0, y: 0 }, { start: true })
       }
     }
 
     if (ev.type === `panmove` && movingHasStarted) {
-      reader?.viewportNavigator.moveTo({ x: deltaX, y: deltaY })
+      reader?.navigation.moveTo({ x: deltaX, y: deltaY })
     }
 
     if (ev.type === `panend`) {
       if (movingHasStarted) {
-        reader?.viewportNavigator.moveTo({ x: deltaX, y: deltaY }, { final: true })
+        reader?.navigation.moveTo({ x: deltaX, y: deltaY }, { final: true })
       }
 
       movingHasStarted = false

packages/demo/src/reader/Scrubber.tsx

@@ -35,9 +35,9 @@ export const Scrubber = () => {
         const pageIndex = isUsingSpread ? Math.floor(value) * 2 : Math.floor(value)
 
         if (isComic) {
-          reader?.viewportNavigator.goToSpineItem(pageIndex)
+          reader?.navigation.goToSpineItem(pageIndex)
         } else {
-          reader?.viewportNavigator.goToPageOfCurrentChapter(pageIndex)
+          reader?.navigation.goToPageOfSpineItem(pageIndex, pagination?.beginSpineItemIndex ?? 0)
         }
       }
     },

packages/demo/src/reader/SearchDialog.tsx

@@ -20,7 +20,7 @@ export const SearchDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: b
   const onClick = useCallback(
     (cfi: string) => {
       onExit()
-      reader?.viewportNavigator.goToCfi(cfi)
+      reader?.navigation.goToCfi(cfi)
     },
     [reader]
   )

packages/demo/src/reader/TocDialog.tsx

@@ -26,7 +26,7 @@ export const TocDialog = ({ onExit, isOpen }: { onExit: () => void; isOpen: bool
         }}
         onClick={() => {
           onExit()
-          reader?.viewportNavigator.goToUrl(tocItem.href)
+          reader?.navigation.goToUrl(tocItem.href)
         }}
       >
         {currentSubChapter?.path === tocItem.path && <ListIcon as={CheckCircleIcon} />}

packages/demo/src/reader/state.ts

@@ -4,6 +4,6 @@ import { Observable, switchMap } from "rxjs"
 
 export const [useReaderState] = bind((reader: Reader) => reader.$.state$)
 export const [usePagination] = bind(
-  (reader$: Observable<Reader>) => reader$.pipe(switchMap((reader) => reader.pagination.paginationInfo$)),
+  (reader$: Observable<Reader>) => reader$.pipe(switchMap((reader) => reader.pagination.pagination$)),
   undefined
 )

packages/demo/src/reader/useHighlights.ts

@@ -8,30 +8,30 @@ export const useHighlights = (reader: ReaderInstance | undefined) => {
   const setMenuOpenState = useSetRecoilState(isMenuOpenState)
   const setCurrentSelection = useSetRecoilState(currentHighlight)
 
-  useEffect(() => {
-    const readerSubscription = reader?.$.selection$
-      .pipe(
-        tap((data) => {
-          if (data?.toString() !== ``) {
-            const anchorCfi = data?.getAnchorCfi()
-            const focusCfi = data?.getFocusCfi()
+  // useEffect(() => {
+  //   const readerSubscription = reader?.$.selection$
+  //     .pipe(
+  //       tap((data) => {
+  //         if (data?.toString() !== ``) {
+  //           const anchorCfi = data?.getAnchorCfi()
+  //           const focusCfi = data?.getFocusCfi()
 
-            if (anchorCfi && focusCfi) {
-              const highlight = { anchorCfi, focusCfi, text: data?.toString(), id: new Date().getTime().toString() }
-              setCurrentSelection(highlight)
-              setMenuOpenState(false)
-            }
-          } else {
-            setCurrentSelection(undefined)
-          }
-        })
-      )
-      .subscribe()
+  //           if (anchorCfi && focusCfi) {
+  //             const highlight = { anchorCfi, focusCfi, text: data?.toString(), id: new Date().getTime().toString() }
+  //             setCurrentSelection(highlight)
+  //             setMenuOpenState(false)
+  //           }
+  //         } else {
+  //           setCurrentSelection(undefined)
+  //         }
+  //       })
+  //     )
+  //     .subscribe()
 
-    return () => {
-      readerSubscription?.unsubscribe()
-    }
-  }, [reader, setMenuOpenState])
+  //   return () => {
+  //     readerSubscription?.unsubscribe()
+  //   }
+  // }, [reader, setMenuOpenState])
 
   useEffect(() => {
     const subscription = reader?.highlights.$.pipe(

packages/demo/src/types.ts

@@ -2,24 +2,18 @@ import { bookmarksEnhancer } from "@prose-reader/enhancer-bookmarks"
 import { searchEnhancer } from "@prose-reader/enhancer-search"
 import { highlightsEnhancer } from "@prose-reader/enhancer-highlights"
 import { hammerGestureEnhancer } from "@prose-reader/enhancer-hammer-gesture"
-import { debugEnhancer } from "@prose-reader/enhancer-debug"
 import { createReader } from "@prose-reader/core"
 import { Props as GenericReactReaderProps } from "@prose-reader/react"
 
-export const createAppReader = debugEnhancer(
-  hammerGestureEnhancer(
-    highlightsEnhancer(
-      bookmarksEnhancer(
-        searchEnhancer(
-          // __
-          createReader
-        )
+export const createAppReader = hammerGestureEnhancer(
+  highlightsEnhancer(
+    bookmarksEnhancer(
+      searchEnhancer(
+        // __
+        createReader
       )
     )
-  ),
-  {
-    enable: import.meta.env.DEV
-  }
+  )
 )
 
 export type ReaderInstance = ReturnType<typeof createAppReader>

packages/enhancer-gesture/src/createTapHandler.ts

@@ -9,8 +9,8 @@ export type TapEvent =
   | { type: "doubleTap"; event: MouseEvent | TouchEvent | PointerEvent; x: number; y: number }
 
 export const mapMixedEventToPosition = (event: MouseEvent | TouchEvent) => ({
-  x: "changedTouches" in event ? event.changedTouches[0]?.pageX ?? 0 : event.x,
-  y: "changedTouches" in event ? event.changedTouches[0]?.pageY ?? 0 : event.y,
+  x: "changedTouches" in event ? (event.changedTouches[0]?.pageX ?? 0) : event.x,
+  y: "changedTouches" in event ? (event.changedTouches[0]?.pageY ?? 0) : event.y,
 })
 
 export const createTapHandler = (