@prose-reader/enhancer-annotations 1.303.0 → 1.305.0

package/dist/index.js

@@ -1,550 +1,263 @@
-import { setStylePropertyIfChanged, setPropertyIfChanged, DestroyableClass, ReactiveEntity, isShallowEqual } from '@prose-reader/core';
-import { fromEvent, map, share, shareReplay, tap, merge, takeUntil, first, withLatestFrom, switchMap, distinctUntilChanged, of, forkJoin, defaultIfEmpty, BehaviorSubject, NEVER, debounceTime, combineLatest } from 'rxjs';
-
-const createElementForRange = (range, container, color) => {
-  const rects = Array.from(range.getClientRects());
-  const lineGroups = /* @__PURE__ */ new Map();
-  rects.forEach((rect) => {
-    const lineY = Math.round(rect.top);
-    if (!lineGroups.has(lineY)) {
-      lineGroups.set(lineY, []);
-    }
-    lineGroups.get(lineY)?.push(rect);
-  });
-  return Array.from(lineGroups.values()).map((lineRects) => {
-    const left = Math.min(...lineRects.map((r) => r.left));
-    const right = Math.max(...lineRects.map((r) => r.right));
-    const top = lineRects[0]?.top;
-    const height = lineRects[0]?.height;
-    const rectEltContainer = container.ownerDocument.createElement("div");
-    const rectElt = container.ownerDocument.createElement("div");
-    rectEltContainer.style.cssText = `
+import { DestroyableClass as e, ReactiveEntity as t, isShallowEqual as n, setPropertyIfChanged as r, setStylePropertyIfChanged as i } from "@prose-reader/core";
+import { BehaviorSubject as a, NEVER as o, combineLatest as s, debounceTime as c, defaultIfEmpty as l, distinctUntilChanged as u, first as d, forkJoin as f, fromEvent as p, map as m, merge as h, of as g, share as _, shareReplay as v, switchMap as y, takeUntil as b, tap as x, withLatestFrom as S } from "rxjs";
+//#region src/annotations/utils.ts
+var C = (e, t, n) => {
+	let r = Array.from(e.getClientRects()), i = /* @__PURE__ */ new Map();
+	return r.forEach((e) => {
+		let t = Math.round(e.top);
+		i.has(t) || i.set(t, []), i.get(t)?.push(e);
+	}), Array.from(i.values()).map((e) => {
+		let r = Math.min(...e.map((e) => e.left)), i = Math.max(...e.map((e) => e.right)), a = e[0]?.top, o = e[0]?.height, s = t.ownerDocument.createElement("div"), c = t.ownerDocument.createElement("div");
+		return s.style.cssText = `
         position: absolute;
-        width: ${right - left}px;
-        height: ${height}px;
-        top: ${top}px;
-        left: ${left}px;
+        width: ${i - r}px;
+        height: ${o}px;
+        top: ${a}px;
+        left: ${r}px;
         box-sizing: border-box;
         border: 3px dashed transparent;
-    `;
-    rectElt.style.cssText = `
+    `, c.style.cssText = `
         height: 100%;
         width: 100%;
         opacity: 40%;
-        background-color: ${color}
-    `;
-    rectEltContainer.appendChild(rectElt);
-    return rectEltContainer;
-  });
-};
-const copyPositionStyle = (source, target) => {
-  setPropertyIfChanged(target.style, `cssText`, source.style.cssText);
-};
-const createAnnotationLayer = (container, layer) => {
-  const annotationLayer = container.ownerDocument.createElement("div");
-  layoutAnnotationLayer(layer, annotationLayer);
-  container.appendChild(annotationLayer);
-  return annotationLayer;
+        background-color: ${n}
+    `, s.appendChild(c), s;
+	});
+}, w = (e, t) => {
+	r(t.style, "cssText", e.style.cssText);
+}, T = (e, t) => {
+	let n = e.ownerDocument.createElement("div");
+	return E(t, n), e.appendChild(n), n;
+}, E = (e, t) => {
+	w(e, t), e.style.position === "" && (i(t.style, "position", "absolute"), i(t.style, "top", "0")), i(t.style, "opacity", "1"), i(t.style, "pointer-events", "none");
+}, D = class extends e {
+	spineItem;
+	containerElement;
+	reader;
+	highlight;
+	isSelected;
+	container;
+	tap$;
+	resolvedCfi$;
+	constructor(e, t, n, r, i) {
+		super(), this.spineItem = e, this.containerElement = t, this.reader = n, this.highlight = r, this.isSelected = i, this.spineItem, this.reader, this.container = this.containerElement.ownerDocument.createElement("div"), this.container.dataset.highlightContainer = this.highlight.id, this.containerElement.appendChild(this.container), this.tap$ = p(this.container, "click").pipe(m((e) => ({
+			event: e,
+			highlight: this.highlight
+		})), _()), this.resolvedCfi$ = this.spineItem.watch("isLoaded").pipe(m(() => this.reader.cfi.resolveCfi({ cfi: this.highlight.cfi })), v({
+			refCount: !0,
+			bufferSize: 1
+		}));
+		let a = this.isSelected.pipe(x((e) => {
+			this.updateStateOnSelection(e);
+		}));
+		h(this.resolvedCfi$, a).pipe(b(this.destroy$)).subscribe();
+	}
+	updateStateOnSelection(e) {
+		Array.from(this.container.children).forEach((t) => {
+			t instanceof HTMLElement && i(t.style, "border", e ? "3px dashed red" : "3px dashed transparent");
+		});
+	}
+	render() {
+		return this.resolvedCfi$.pipe(d(), S(this.isSelected), m(([e, t]) => {
+			if (!e?.isCfiRange) return;
+			let n = e.range;
+			if (this.container.innerHTML = "", !n) return;
+			let r = C(n, this.container, this.highlight.highlightColor ?? "yellow");
+			r.forEach((e) => {
+				e.style.pointerEvents = "initial", e.style.cursor = "pointer", e.dataset.highlightRect = this.highlight.id, this.container.appendChild(e);
+			});
+			let i = r[0];
+			if (i && this.highlight.notes) {
+				let e = document.createElement("span");
+				e.textContent = "📝", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.transform = "translate(-0%, -80%)", e.style.fontSize = "18px", e.style.opacity = "50%", i.appendChild(e);
+			}
+			return this.updateStateOnSelection(t), null;
+		}));
+	}
+	isWithinTarget(e) {
+		return this.container.contains(e);
+	}
+	destroy() {
+		super.destroy(), this.container.remove();
+	}
+}, O = class extends e {
+	annotations$;
+	spineItem;
+	reader;
+	selectedHighlight;
+	layer;
+	highlights = [];
+	tap$;
+	constructor(e, t, n, r) {
+		super(), this.annotations$ = e, this.spineItem = t, this.reader = n, this.selectedHighlight = r;
+		let i = t.renderer.documentContainer ?? document.createElement("div");
+		this.layer = T(this.spineItem.containerElement, i);
+		let a = this.annotations$.pipe(y((e) => {
+			let t = e.filter((e) => !this.highlights.some((t) => t.highlight.id === e.id)), n = this.highlights.filter((e) => e.highlight.itemIndex !== this.spineItem.item.index);
+			return this.highlights.forEach((t, r) => {
+				let i = e.find((e) => e.id === t.highlight.id);
+				n.includes(t) && (t.destroy(), this.highlights = this.highlights.splice(r, 1)), i && (t.highlight = i);
+			}), t.forEach((e) => {
+				if (e.itemIndex !== this.spineItem.item.index) return;
+				let t = this.selectedHighlight.pipe(m((t) => t === e.id), u()), n = new D(this.spineItem, this.layer, this.reader, e, t);
+				this.highlights.push(n);
+			}), g(this.highlights);
+		}), v(1), b(this.destroy$));
+		this.tap$ = a.pipe(y((e) => h(...e.map((e) => e.tap$)))), e.subscribe();
+	}
+	layout() {
+		return E(this.spineItem.renderer.documentContainer ?? document.createElement("div"), this.layer), f(this.highlights.map((e) => e.render())).pipe(l(null));
+	}
+	getHighlightsForTarget(e) {
+		return this.highlights.filter((t) => e instanceof Node && t.isWithinTarget(e));
+	}
+	destroy() {
+		super.destroy(), this.layer.remove();
+	}
+}, k = class extends e {
+	reader;
+	highlights;
+	selectedHighlight;
+	spineItemHighlights = new a([]);
+	tap$;
+	constructor(e, t, n) {
+		super(), this.reader = e, this.highlights = t, this.selectedHighlight = n;
+		let r = /* @__PURE__ */ new Map();
+		this.reader.hookManager.register("item.onDocumentLoad", async ({ itemId: t }) => {
+			r.get(t)?.(), r.delete(t);
+			let n = e.spineItemsManager.get(t);
+			if (!n) return;
+			let i = new O(this.highlights.pipe(m((e) => e.filter((e) => e.itemIndex === n.item.index))), n, e, this.selectedHighlight);
+			this.spineItemHighlights.next([...this.spineItemHighlights.getValue(), i]), r.set(t, () => {
+				this.spineItemHighlights.next(this.spineItemHighlights.getValue().filter((e) => e !== i)), i.destroy();
+			});
+		}), this.reader.hookManager.register("item.onDocumentUnload", async ({ itemId: e }) => {
+			r.get(e)?.(), r.delete(e);
+		}), this.tap$ = this.spineItemHighlights.pipe(y((e) => h(...e.map((e) => e.tap$))));
+	}
+	getHighlightsForTarget = (e) => this.spineItemHighlights.getValue().flatMap((t) => t.getHighlightsForTarget(e)).map((e) => e.highlight);
+	isTargetWithinHighlight = (e) => !!this.getHighlightsForTarget(e).length;
+	layout() {
+		return f(this.spineItemHighlights.value.map((e) => e.layout())).pipe(l(null));
+	}
+}, A = () => {
+	if (!(typeof window > "u")) return window;
 };
-const layoutAnnotationLayer = (layer, annotationLayer) => {
-  copyPositionStyle(layer, annotationLayer);
-  if (layer.style.position === "") {
-    setStylePropertyIfChanged(annotationLayer.style, `position`, `absolute`);
-    setStylePropertyIfChanged(annotationLayer.style, `top`, `0`);
-  }
-  setStylePropertyIfChanged(annotationLayer.style, `opacity`, `1`);
-  setStylePropertyIfChanged(annotationLayer.style, `pointer-events`, `none`);
-};
-
-class SpineItemHighlight extends DestroyableClass {
-  constructor(spineItem, containerElement, reader, highlight, isSelected) {
-    super();
-    this.spineItem = spineItem;
-    this.containerElement = containerElement;
-    this.reader = reader;
-    this.highlight = highlight;
-    this.isSelected = isSelected;
-    void this.spineItem;
-    void this.reader;
-    this.container = this.containerElement.ownerDocument.createElement("div");
-    this.container.dataset.highlightContainer = this.highlight.id;
-    this.containerElement.appendChild(this.container);
-    this.tap$ = fromEvent(this.container, "click").pipe(
-      map((event) => ({ event, highlight: this.highlight })),
-      share()
-    );
-    this.resolvedCfi$ = this.spineItem.watch("isLoaded").pipe(
-      map(() => this.reader.cfi.resolveCfi({ cfi: this.highlight.cfi })),
-      shareReplay({ refCount: true, bufferSize: 1 })
-    );
-    const updateStateOnSelection$ = this.isSelected.pipe(
-      tap((isSelected2) => {
-        this.updateStateOnSelection(isSelected2);
-      })
-    );
-    merge(this.resolvedCfi$, updateStateOnSelection$).pipe(takeUntil(this.destroy$)).subscribe();
-  }
-  spineItem;
-  containerElement;
-  reader;
-  highlight;
-  isSelected;
-  container;
-  tap$;
-  resolvedCfi$;
-  updateStateOnSelection(isSelected) {
-    Array.from(this.container.children).forEach((child) => {
-      if (child instanceof HTMLElement) {
-        setStylePropertyIfChanged(
-          child.style,
-          `border`,
-          isSelected ? "3px dashed red" : "3px dashed transparent"
-        );
-      }
-    });
-  }
-  render() {
-    return this.resolvedCfi$.pipe(
-      first(),
-      withLatestFrom(this.isSelected),
-      map(([resolvedCfi, isSelected]) => {
-        if (!resolvedCfi?.isCfiRange) return void 0;
-        const range = resolvedCfi.range;
-        this.container.innerHTML = "";
-        if (!range) {
-          return;
-        }
-        const rectElements = createElementForRange(
-          range,
-          this.container,
-          this.highlight.highlightColor ?? "yellow"
-        );
-        rectElements.forEach((elt) => {
-          elt.style.pointerEvents = "initial";
-          elt.style.cursor = "pointer";
-          elt.dataset.highlightRect = this.highlight.id;
-          this.container.appendChild(elt);
-        });
-        const firstElement = rectElements[0];
-        if (firstElement && this.highlight.notes) {
-          const noteIcon = document.createElement("span");
-          noteIcon.textContent = "📝";
-          noteIcon.style.position = "absolute";
-          noteIcon.style.top = "0";
-          noteIcon.style.left = "0";
-          noteIcon.style.transform = "translate(-0%, -80%)";
-          noteIcon.style.fontSize = "18px";
-          noteIcon.style.opacity = "50%";
-          firstElement.appendChild(noteIcon);
-        }
-        this.updateStateOnSelection(isSelected);
-        return null;
-      })
-    );
-  }
-  isWithinTarget(target) {
-    return this.container.contains(target);
-  }
-  destroy() {
-    super.destroy();
-    this.container.remove();
-  }
-}
-
-class SpineItemHighlights extends DestroyableClass {
-  constructor(annotations$, spineItem, reader, selectedHighlight) {
-    super();
-    this.annotations$ = annotations$;
-    this.spineItem = spineItem;
-    this.reader = reader;
-    this.selectedHighlight = selectedHighlight;
-    const firstLayerElement = spineItem.renderer.documentContainer ?? document.createElement("div");
-    this.layer = createAnnotationLayer(
-      this.spineItem.containerElement,
-      firstLayerElement
-    );
-    const itemHighlights$ = this.annotations$.pipe(
-      switchMap((annotations) => {
-        const newAnnotations = annotations.filter(
-          (annotation) => !this.highlights.some(
-            (highlight) => highlight.highlight.id === annotation.id
-          )
-        );
-        const oldAnnotations = this.highlights.filter(
-          (highlight) => highlight.highlight.itemIndex !== this.spineItem.item.index
-        );
-        this.highlights.forEach((highlight, index) => {
-          const existingAnnotation = annotations.find(
-            (annotation) => annotation.id === highlight.highlight.id
-          );
-          if (oldAnnotations.includes(highlight)) {
-            highlight.destroy();
-            this.highlights = this.highlights.splice(index, 1);
-          }
-          if (existingAnnotation) {
-            highlight.highlight = existingAnnotation;
-          }
-        });
-        newAnnotations.forEach((annotation) => {
-          if (annotation.itemIndex !== this.spineItem.item.index) return;
-          const isSelected$ = this.selectedHighlight.pipe(
-            map((id) => id === annotation.id),
-            distinctUntilChanged()
-          );
-          const spineItemHighlight = new SpineItemHighlight(
-            this.spineItem,
-            this.layer,
-            this.reader,
-            annotation,
-            isSelected$
-          );
-          this.highlights.push(spineItemHighlight);
-        });
-        return of(this.highlights);
-      }),
-      shareReplay(1),
-      takeUntil(this.destroy$)
-    );
-    this.tap$ = itemHighlights$.pipe(
-      switchMap(
-        (highlights) => merge(...highlights.map((highlight) => highlight.tap$))
-      )
-    );
-    annotations$.subscribe();
-  }
-  annotations$;
-  spineItem;
-  reader;
-  selectedHighlight;
-  layer;
-  highlights = [];
-  tap$;
-  layout() {
-    const firstLayerElement = this.spineItem.renderer.documentContainer ?? document.createElement("div");
-    layoutAnnotationLayer(firstLayerElement, this.layer);
-    return forkJoin(
-      this.highlights.map((highlight) => highlight.render())
-    ).pipe(defaultIfEmpty(null));
-  }
-  getHighlightsForTarget(target) {
-    return this.highlights.filter(
-      (highlight) => target instanceof Node && highlight.isWithinTarget(target)
-    );
-  }
-  destroy() {
-    super.destroy();
-    this.layer.remove();
-  }
-}
-
-class ReaderHighlights extends DestroyableClass {
-  constructor(reader, highlights, selectedHighlight) {
-    super();
-    this.reader = reader;
-    this.highlights = highlights;
-    this.selectedHighlight = selectedHighlight;
-    const cleanupByItemId = /* @__PURE__ */ new Map();
-    this.reader.hookManager.register(
-      "item.onDocumentLoad",
-      async ({ itemId }) => {
-        cleanupByItemId.get(itemId)?.();
-        cleanupByItemId.delete(itemId);
-        const spineItem = reader.spineItemsManager.get(itemId);
-        if (!spineItem) return;
-        const spineItemHighlights$ = this.highlights.pipe(
-          map(
-            (highlights2) => highlights2.filter(
-              (highlight) => highlight.itemIndex === spineItem.item.index
-            )
-          )
-        );
-        const spineItemHighlights = new SpineItemHighlights(
-          spineItemHighlights$,
-          spineItem,
-          reader,
-          this.selectedHighlight
-        );
-        this.spineItemHighlights.next([
-          ...this.spineItemHighlights.getValue(),
-          spineItemHighlights
-        ]);
-        const cleanup = () => {
-          this.spineItemHighlights.next(
-            this.spineItemHighlights.getValue().filter((layer) => layer !== spineItemHighlights)
-          );
-          spineItemHighlights.destroy();
-        };
-        cleanupByItemId.set(itemId, cleanup);
-      }
-    );
-    this.reader.hookManager.register(
-      "item.onDocumentUnload",
-      async ({ itemId }) => {
-        cleanupByItemId.get(itemId)?.();
-        cleanupByItemId.delete(itemId);
-      }
-    );
-    this.tap$ = this.spineItemHighlights.pipe(
-      switchMap((layers) => merge(...layers.map((layer) => layer.tap$)))
-    );
-  }
-  reader;
-  highlights;
-  selectedHighlight;
-  spineItemHighlights = new BehaviorSubject([]);
-  tap$;
-  getHighlightsForTarget = (target) => {
-    return this.spineItemHighlights.getValue().flatMap((layer) => layer.getHighlightsForTarget(target)).map((annotation) => annotation.highlight);
-  };
-  isTargetWithinHighlight = (target) => {
-    return !!this.getHighlightsForTarget(target).length;
-  };
-  layout() {
-    return forkJoin(
-      this.spineItemHighlights.value.map((item) => item.layout())
-    ).pipe(defaultIfEmpty(null));
-  }
+function j() {
+	let e = A()?.__PROSE_READER_DEBUG;
+	return e === !0 || e === "true";
 }
-
-const m = () => {
-  if (!(typeof window > "u"))
-    return window;
-};
-function b() {
-  const e = m()?.__PROSE_READER_DEBUG;
-  return e === true || e === "true";
-}
-const E = (e, t) => typeof e == "boolean" ? {
-  enabled: e,
-  options: t
+var M = (e, t) => typeof e == "boolean" ? {
+	enabled: e,
+	options: t
 } : {
-  enabled: e?.enabled,
-  options: e ?? t
-}, w = (e) => e.at(-1)?.color, u = (e) => {
-  if (!e.length)
-    return;
-  if (!e.some((o) => o.color))
-    return [e.map((o) => o.label).join(" ")];
-  let t = "";
-  const n = [];
-  for (const o of e)
-    t += `%c${t ? ` ${o.label}` : o.label}`, n.push(
-      o.color ? `color: ${o.color}` : ""
-    );
-  return [t, ...n];
-}, p = (e = [], t = b()) => {
-  let n = t;
-  const o = {
-    enable: (c) => {
-      l(c);
-    },
-    namespace: (c, s, a) => {
-      const i = E(
-        s,
-        a
-      ), g = i.options?.color ?? w(e);
-      return p(
-        [
-          ...e,
-          {
-            label: `[${c}]`,
-            color: g
-          }
-        ],
-        i.enabled ?? n
-      );
-    },
-    isEnabled: () => n,
-    debug: () => {
-    },
-    info: () => {
-    },
-    log: () => {
-    },
-    groupCollapsed: () => {
-    },
-    groupEnd: () => {
-    },
-    getGroupArgs: (c) => {
-      const s = u(e);
-      if (!s)
-        return [c];
-      const [a, ...i] = s;
-      return [`${a} ${c}`, ...i];
-    },
-    warn: () => {
-    },
-    error: () => {
-    }
-  }, r = (c) => {
-    if (!c) {
-      o.debug = () => {
-      }, o.info = () => {
-      }, o.log = () => {
-      }, o.groupCollapsed = () => {
-      }, o.groupEnd = () => {
-      }, o.warn = () => {
-      }, o.error = () => {
-      };
-      return;
-    }
-    const s = u(e) ?? [];
-    o.debug = Function.prototype.bind.call(
-      console.debug,
-      console,
-      ...s
-    ), o.info = Function.prototype.bind.call(
-      console.info,
-      console,
-      ...s
-    ), o.log = Function.prototype.bind.call(
-      console.log,
-      console,
-      ...s
-    ), o.groupCollapsed = Function.prototype.bind.call(
-      console.groupCollapsed,
-      console
-    ), o.groupEnd = Function.prototype.bind.call(console.groupEnd, console), o.warn = Function.prototype.bind.call(
-      console.warn,
-      console,
-      ...s
-    ), o.error = Function.prototype.bind.call(
-      console.error,
-      console,
-      ...s
-    );
-  }, l = (c) => {
-    n !== c && (n = c, r(n));
-  };
-  return r(n), o;
-}, O = p();
-
-const name = "@prose-reader/enhancer-annotations";
-
-const IS_DEBUG_ENABLED = true;
-const report = O.namespace(name, IS_DEBUG_ENABLED);
-
-class Settings extends ReactiveEntity {
-  update(settings) {
-    super.mergeCompare(settings);
-  }
-}
-
-const annotationsEnhancer = (next) => (options) => {
-  const { annotations: annotationsOptions, ...rest } = options;
-  const settings = new Settings({
-    annotations$: annotationsOptions?.annotations$
-  });
-  const reader = next(rest);
-  const annotations$ = settings.watch("annotations$").pipe(switchMap((annotations) => annotations ?? NEVER));
-  const runtimeAnnotations$ = annotations$.pipe(
-    distinctUntilChanged(isShallowEqual),
-    map((annotations) => {
-      const runtimeAnnotations = annotations.map(
-        (annotation) => {
-          const { itemIndex = 0 } = reader.cfi.parseCfi(annotation.cfi ?? "");
-          const highlight = {
-            ...annotation,
-            itemIndex
-          };
-          return highlight;
-        }
-      );
-      return runtimeAnnotations;
-    }),
-    tap((annotations) => {
-      report.debug("annotations", annotations);
-    }),
-    shareReplay({
-      refCount: true,
-      bufferSize: 1
-    })
-  );
-  const selectedHighlight$ = runtimeAnnotations$.pipe(
-    map(
-      (annotations) => annotations.find((annotation) => annotation.selected)?.id
-    ),
-    distinctUntilChanged(),
-    shareReplay({ refCount: true, bufferSize: 1 })
-  );
-  const readerHighlights = new ReaderHighlights(
-    reader,
-    runtimeAnnotations$,
-    selectedHighlight$
-  );
-  const resolveItemInformation = (params) => {
-    if (params.itemIndex !== void 0)
-      return { itemIndex: params.itemIndex, pageIndex: void 0 };
-    if (params.absolutePageIndex !== void 0) {
-      return reader.spine.pages.fromAbsolutePageIndex(
-        params.absolutePageIndex
-      );
-    }
-    return void 0;
-  };
-  const createAnnotation = ({
-    selection,
-    ...rest2
-  }) => {
-    const { itemIndex, pageIndex = 0 } = resolveItemInformation(rest2) ?? {};
-    const spineItem = reader.spineItemsManager.get(itemIndex);
-    const id = window.crypto.randomUUID();
-    if (!spineItem) return void 0;
-    const range = selection ? reader.selection.createOrderedRangeFromSelection({
-      selection,
-      spineItem
-    }) : void 0;
-    const pageEntry = reader.spine.pages.fromSpineItemPageIndex(
-      spineItem,
-      pageIndex
-    );
-    const cfiWithRangeOrFirstNodeOrRoot = range ? reader.cfi.generateCfiFromRange(range, spineItem.item) : pageEntry?.firstVisibleNode ? reader.cfi.generateCfiForSpineItemPage({
-      spineItem: spineItem.item,
-      pageNode: pageEntry.firstVisibleNode
-    }) : reader.cfi.generateRootCfi(spineItem.item);
-    const highlight = {
-      cfi: cfiWithRangeOrFirstNodeOrRoot,
-      itemIndex: spineItem.index,
-      id,
-      ...rest2
-    };
-    return highlight;
-  };
-  const renderAnnotations$ = merge(runtimeAnnotations$, reader.layout$).pipe(
-    debounceTime(50),
-    switchMap(() => readerHighlights.layout())
-  );
-  const candidates$ = reader.layoutInfo$.pipe(
-    switchMap(
-      ({ pages }) => combineLatest(
-        pages.map((page) => {
-          const item = reader.spineItemsManager.get(page.itemIndex);
-          if (!item) return of(false);
-          if (item.renditionLayout === "pre-paginated") return of(true);
-          if (page.firstVisibleNode) return of(true);
-          return of(false);
-        })
-      )
-    )
-  );
-  merge(renderAnnotations$, annotations$).pipe(takeUntil(reader.$.destroy$)).subscribe();
-  return {
-    ...reader,
-    __PROSE_READER_ENHANCER_ANNOTATIONS: true,
-    destroy: () => {
-      readerHighlights.destroy();
-      reader.destroy();
-    },
-    annotations: {
-      annotations$: runtimeAnnotations$,
-      highlightTap$: readerHighlights.tap$,
-      candidates$,
-      isTargetWithinHighlight: readerHighlights.isTargetWithinHighlight,
-      createAnnotation,
-      update: settings.update.bind(settings)
-    }
-  };
+	enabled: e?.enabled,
+	options: e ?? t
+}, N = (e) => e.at(-1)?.color, P = (e) => {
+	if (!e.length) return;
+	if (!e.some((e) => e.color)) return [e.map((e) => e.label).join(" ")];
+	let t = "", n = [];
+	for (let r of e) t += `%c${t ? ` ${r.label}` : r.label}`, n.push(r.color ? `color: ${r.color}` : "");
+	return [t, ...n];
+}, F = (e = [], t = j()) => {
+	let n = t, r = {
+		enable: (e) => {
+			a(e);
+		},
+		namespace: (t, r, i) => {
+			let a = M(r, i), o = a.options?.color ?? N(e);
+			return F([...e, {
+				label: `[${t}]`,
+				color: o
+			}], a.enabled ?? n);
+		},
+		isEnabled: () => n,
+		debug: () => {},
+		info: () => {},
+		log: () => {},
+		groupCollapsed: () => {},
+		groupEnd: () => {},
+		getGroupArgs: (t) => {
+			let n = P(e);
+			if (!n) return [t];
+			let [r, ...i] = n;
+			return [`${r} ${t}`, ...i];
+		},
+		warn: () => {},
+		error: () => {}
+	}, i = (t) => {
+		if (!t) {
+			r.debug = () => {}, r.info = () => {}, r.log = () => {}, r.groupCollapsed = () => {}, r.groupEnd = () => {}, r.warn = () => {}, r.error = () => {};
+			return;
+		}
+		let n = P(e) ?? [];
+		r.debug = Function.prototype.bind.call(console.debug, console, ...n), r.info = Function.prototype.bind.call(console.info, console, ...n), r.log = Function.prototype.bind.call(console.log, console, ...n), r.groupCollapsed = Function.prototype.bind.call(console.groupCollapsed, console), r.groupEnd = Function.prototype.bind.call(console.groupEnd, console), r.warn = Function.prototype.bind.call(console.warn, console, ...n), r.error = Function.prototype.bind.call(console.error, console, ...n);
+	}, a = (e) => {
+		n !== e && (n = e, i(n));
+	};
+	return i(n), r;
+}, I = F().namespace("@prose-reader/enhancer-annotations", !0), L = class extends t {
+	update(e) {
+		super.mergeCompare(e);
+	}
+}, R = (e) => (t) => {
+	let { annotations: r, ...i } = t, a = new L({ annotations$: r?.annotations$ }), l = e(i), d = a.watch("annotations$").pipe(y((e) => e ?? o)), f = d.pipe(u(n), m((e) => e.map((e) => {
+		let { itemIndex: t = 0 } = l.cfi.parseCfi(e.cfi ?? "");
+		return {
+			...e,
+			itemIndex: t
+		};
+	})), x((e) => {
+		I.debug("annotations", e);
+	}), v({
+		refCount: !0,
+		bufferSize: 1
+	})), p = new k(l, f, f.pipe(m((e) => e.find((e) => e.selected)?.id), u(), v({
+		refCount: !0,
+		bufferSize: 1
+	}))), _ = (e) => {
+		if (e.itemIndex !== void 0) return {
+			itemIndex: e.itemIndex,
+			pageIndex: void 0
+		};
+		if (e.absolutePageIndex !== void 0) return l.spine.pages.fromAbsolutePageIndex(e.absolutePageIndex);
+	}, S = ({ selection: e, ...t }) => {
+		let { itemIndex: n, pageIndex: r = 0 } = _(t) ?? {}, i = l.spineItemsManager.get(n), a = window.crypto.randomUUID();
+		if (!i) return;
+		let o = e ? l.selection.createOrderedRangeFromSelection({
+			selection: e,
+			spineItem: i
+		}) : void 0, s = l.spine.pages.fromSpineItemPageIndex(i, r);
+		return {
+			cfi: o ? l.cfi.generateCfiFromRange(o, i.item) : s?.firstVisibleNode ? l.cfi.generateCfiForSpineItemPage({
+				spineItem: i.item,
+				pageNode: s.firstVisibleNode
+			}) : l.cfi.generateRootCfi(i.item),
+			itemIndex: i.index,
+			id: a,
+			...t
+		};
+	}, C = h(f, l.layout$).pipe(c(50), y(() => p.layout())), w = l.layoutInfo$.pipe(y(({ pages: e }) => s(e.map((e) => {
+		let t = l.spineItemsManager.get(e.itemIndex);
+		return t && (t.renditionLayout === "pre-paginated" || e.firstVisibleNode) ? g(!0) : g(!1);
+	}))));
+	return h(C, d).pipe(b(l.$.destroy$)).subscribe(), {
+		...l,
+		__PROSE_READER_ENHANCER_ANNOTATIONS: !0,
+		destroy: () => {
+			p.destroy(), l.destroy();
+		},
+		annotations: {
+			annotations$: f,
+			highlightTap$: p.tap$,
+			candidates$: w,
+			isTargetWithinHighlight: p.isTargetWithinHighlight,
+			createAnnotation: S,
+			update: a.update.bind(a)
+		}
+	};
 };
+//#endregion
+export { R as annotationsEnhancer };
 
-export { annotationsEnhancer };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map