@linloir/limr 0.1.0 → 1.0.0

package/dist/{chunk-65V5OZ4G.js → chunk-3ILUZKDB.js}

@@ -1,4 +1,5 @@
 import {
+  annotationReferenceRange,
   createDocument,
   defaultHighlight,
   intersects,
@@ -10,7 +11,7 @@ import {
   selectionFromRange,
   textContent,
   walk
-} from "./chunk-7JF5HHVF.js";
+} from "./chunk-TTISGBST.js";
 import {
   ResourceCache
 } from "./chunk-6N6TFHEN.js";
@@ -56,6 +57,8 @@ function scrollWithMotion(root, top) {
 
 // src/react/runtime.ts
 var english = {
+  language: "en",
+  citation: "Citation",
   contents: "Contents",
   annotations: "Annotations",
   expand: "Expand",
@@ -95,6 +98,8 @@ var english = {
   deleteAnnotationsHint: "Deletes {count} annotations on this text and any highlight."
 };
 var chinese = {
+  language: "zh-CN",
+  citation: "\u5F15\u7528",
   contents: "\u76EE\u5F55",
   annotations: "\u6CE8\u91CA",
   expand: "\u5C55\u5F00",
@@ -158,7 +163,7 @@ var ReaderRuntime = class {
   layout = new Store(0);
   viewport = new Store(0);
   documentOffset = new Store(0);
-  decorations = new Store({ annotations: /* @__PURE__ */ new Map(), highlights: /* @__PURE__ */ new Map(), occurrences: [], byBlock: /* @__PURE__ */ new Map() });
+  decorations = new Store({ annotations: /* @__PURE__ */ new Map(), highlights: /* @__PURE__ */ new Map(), occurrences: [], referenceRanges: /* @__PURE__ */ new Map(), byBlock: /* @__PURE__ */ new Map() });
   configuration;
   resources = new ResourceCache(128);
   resourceVersions = new Store(/* @__PURE__ */ new Map());
@@ -171,6 +176,7 @@ var ReaderRuntime = class {
   textBinders = /* @__PURE__ */ new WeakMap();
   components = {};
   annotationTypes = /* @__PURE__ */ new Map();
+  resolvedTypes = /* @__PURE__ */ new WeakMap();
   locale = english;
   content = null;
   selectionRange = null;
@@ -190,7 +196,7 @@ var ReaderRuntime = class {
     addAnnotation: (annotation, options = {}) => {
       this.changeAnnotations((items) => {
         const next = [...items.filter((item) => item.id !== annotation.id), annotation];
-        if (annotation.type !== "highlight" && options.highlight !== false) {
+        if (annotation.type !== "highlight" && options.highlight !== false && (options.highlight !== void 0 || this.annotationTypes.get(annotation.type)?.highlight !== "hover")) {
           const doc = this.document.getSnapshot();
           for (const anchor of resolveAnnotationAnchors(annotation, doc)) {
             if (anchor.range.start === anchor.range.end || next.some((item) => item.type === "highlight" && resolveAnnotationAnchors(item, doc).some((other) => sameRange(other.range, anchor.range)))) continue;
@@ -270,10 +276,17 @@ var ReaderRuntime = class {
     });
   }
   installConfiguration(config) {
+    this.locale = { ...english, ...config.locale };
     this.components = Object.assign({}, ...(config.extensions ?? []).map((ext) => ext.components), config.components);
     const annotationTypes = [...(config.extensions ?? []).flatMap((ext) => [...ext.annotationTypes ?? []]), ...config.annotationTypes ?? []];
-    this.annotationTypes = new Map(annotationTypes.map((type) => [type.type, type]));
-    this.locale = { ...english, ...config.locale };
+    this.annotationTypes = new Map(annotationTypes.map((type) => {
+      if (typeof type.label === "string") return [type.type, type];
+      const label = type.label(this.locale);
+      const previous = this.resolvedTypes.get(type);
+      const resolved = previous?.label === label ? previous : { ...type, label };
+      this.resolvedTypes.set(type, resolved);
+      return [type.type, resolved];
+    }));
   }
   configure(config) {
     const old = this.configuration.get();
@@ -281,7 +294,7 @@ var ReaderRuntime = class {
     this.installConfiguration(config);
     this.configuration.set(config);
     if (old.extensions !== config.extensions) this.document.setExtensions(config.extensions ?? []);
-    if (old.annotations !== config.annotations) this.rebuildDecorations();
+    else if (old.annotations !== config.annotations || old.annotationTypes !== config.annotationTypes) this.rebuildDecorations();
     if (old.annotationTypes !== config.annotationTypes || old.extensions !== config.extensions) this.resources.invalidate();
   }
   updateInteraction(patch) {
@@ -345,11 +358,23 @@ var ReaderRuntime = class {
           const id = index ? `${annotation.id}:${index}` : annotation.id;
           const value = { ...annotation.data, id, annotationId: annotation.id, range: anchor.range };
           const old = previous.highlights.get(id);
-          allHighlights.push(old && sameRange(old.range, value.range) && old.color === value.color && old.style === value.style && old.hidden === value.hidden ? old : value);
+          allHighlights.push(old && !old.occurrenceId && sameRange(old.range, value.range) && old.color === value.color && old.style === value.style && old.hidden === value.hidden ? old : value);
         } else occurrences.push({ ...anchor, id: anchor.id ?? `${doc.id}-${annotation.id}-${index}`, annotationIds: [annotation.id] });
       });
     }
     occurrences.sort((a, b) => a.range.end - b.range.end || a.id.localeCompare(b.id));
+    const referenceRanges = new Map(occurrences.map((occurrence) => [occurrence.id, annotationReferenceRange(doc, occurrence)]));
+    for (const occurrence of occurrences) {
+      const annotation = annotations.get(occurrence.annotationIds[0]);
+      const definition2 = annotation && this.annotationTypes.get(annotation.type);
+      if (!annotation || definition2?.highlight !== "hover") continue;
+      const range = referenceRanges.get(occurrence.id);
+      if (range.start === range.end) continue;
+      const id = `reference-${occurrence.id}`;
+      const value = { id, annotationId: annotation.id, occurrenceId: occurrence.id, range, color: definition2.color ?? defaultHighlight.color, style: "background" };
+      const old = previous.highlights.get(id);
+      allHighlights.push(old && old.occurrenceId === value.occurrenceId && old.annotationId === value.annotationId && sameRange(old.range, range) && old.color === value.color ? old : value);
+    }
     const byBlock = /* @__PURE__ */ new Map();
     for (const block of occurrences.length || allHighlights.length ? doc.blocks : []) {
       const marks = occurrences.filter((item) => !item.embedded && item.range.end > block.range.start && item.range.end <= block.range.end);
@@ -363,7 +388,7 @@ var ReaderRuntime = class {
     }
     const sameBlocks = byBlock.size === previous.byBlock.size && [...byBlock].every(([id, value]) => previous.byBlock.get(id) === value);
     const highlights = new Map(allHighlights.map((item) => [item.id, item]));
-    this.decorations.set({ annotations, highlights, occurrences, byBlock: sameBlocks ? previous.byBlock : byBlock });
+    this.decorations.set({ annotations, highlights, occurrences, referenceRanges, byBlock: sameBlocks ? previous.byBlock : byBlock });
     const state = this.interaction.get();
     if (state.editing && !annotations.has(state.editing) && this.pendingOpen !== state.editing) this.updateInteraction({ editing: null });
     if (state.activeHighlight && !highlights.has(state.activeHighlight)) this.activateHighlight(null);
@@ -1112,7 +1137,8 @@ function renderNode(node, context, index = 0, trailing) {
 var BlockView = memo(function BlockView2({ block, runtime, components, extensions, decorations, footnoteId }) {
   const element = useRef2(null);
   const clearBindings = useRef2(void 0);
-  const { occurrences, highlights } = decorations;
+  const { occurrences } = decorations;
+  const highlights = useMemo(() => decorations.highlights.filter((highlight) => !highlight.occurrenceId), [decorations.highlights]);
   const root = useMemo(() => footnoteId ? { ...block.node, type: "listItem" } : block.node, [block, footnoteId]);
   const texts = useMemo(() => compactTextNodes(root, runtime.components), [root, runtime, components, extensions]);
   const compact = !!texts && !occurrences.length && !highlights.length;
@@ -1586,7 +1612,7 @@ function SelectionPaint({ runtime, interactive = true }) {
   useEffect3(() => {
     const container = runtime.content, paint = layer.current;
     if (!container || !paint) return;
-    let frame = 0;
+    let frame = 0, translating = false;
     let leavesCache = /* @__PURE__ */ new WeakMap();
     let metrics = /* @__PURE__ */ new WeakMap();
     const fontMetrics = /* @__PURE__ */ new Map();
@@ -1603,7 +1629,14 @@ function SelectionPaint({ runtime, interactive = true }) {
     const highlightRects = (id) => [...highlightLayers.values()].flatMap((layer2) => Array.from(layer2.children).filter((item) => item.dataset.paint === id).map((item) => item.getBoundingClientRect()));
     const focusedRange = () => {
       const state = runtime.interaction.get(), decorations = runtime.decorations.get();
-      return decorations.occurrences.find((item) => item.id === state.hovered)?.range ?? (state.activeHighlight ? decorations.highlights.get(state.activeHighlight)?.range : void 0) ?? decorations.occurrences.find((item) => item.id === state.active)?.range;
+      return decorations.referenceRanges.get(state.hovered ?? "") ?? (state.activeHighlight ? decorations.highlights.get(state.activeHighlight)?.range : void 0) ?? decorations.referenceRanges.get(state.active ?? "");
+    };
+    const referenceActive = (occurrenceId) => {
+      const state = runtime.interaction.get(), decorations = runtime.decorations.get();
+      if (occurrenceId === state.hovered) return true;
+      if (occurrenceId !== state.active) return false;
+      const hovered = decorations.highlights.get(`reference-${state.hovered}`);
+      return !hovered?.occurrenceId || !sameRange(hovered.range, decorations.referenceRanges.get(occurrenceId));
     };
     const feedback = () => {
       const state = runtime.interaction.get();
@@ -1612,6 +1645,12 @@ function SelectionPaint({ runtime, interactive = true }) {
       for (const layer2 of highlightLayers.values()) for (const item of layer2.children) {
         item.toggleAttribute("data-hovered", item.dataset.paint === state.hoveredHighlight);
         const highlight = decorations.highlights.get(item.dataset.paint ?? "");
+        if (highlight?.occurrenceId) {
+          const active = referenceActive(highlight.occurrenceId);
+          item.toggleAttribute("data-active", active);
+          item.toggleAttribute("data-muted", !active);
+          continue;
+        }
         item.toggleAttribute("data-active", item.dataset.paint === state.activeHighlight || !!focused && !!highlight && sameRange(focused, highlight.range));
         item.toggleAttribute("data-muted", !!highlight?.hidden || !!focused && !!highlight && !sameRange(focused, highlight.range));
       }
@@ -1769,6 +1808,7 @@ function SelectionPaint({ runtime, interactive = true }) {
         const className = `limr-paint-rect limr-paint-${task.selection ? "selection" : task.style ?? "background"}`;
         if (item.className !== className) item.className = className;
         item.dataset.paint = task.id;
+        item.toggleAttribute("data-reference", !!task.occurrenceId);
         if (rect.marker) item.dataset.marker = rect.marker;
         else delete item.dataset.marker;
         if (rect.atomic) item.dataset.atomic = "true";
@@ -1781,6 +1821,11 @@ function SelectionPaint({ runtime, interactive = true }) {
           item.dataset.geometry = css;
         }
         if (!task.selection) item.style.setProperty("--limr-highlight", task.color ?? "#F2C744");
+        if (task.occurrenceId) {
+          const active2 = referenceActive(task.occurrenceId);
+          item.toggleAttribute("data-active", active2);
+          item.toggleAttribute("data-muted", !active2);
+        }
         if (!item.parentNode) target.append(item);
       });
       for (const layer2 of [paint, ...highlightLayers.values()]) while (layer2.children.length > (counts.get(layer2) ?? 0)) layer2.lastChild.remove();
@@ -1789,10 +1834,22 @@ function SelectionPaint({ runtime, interactive = true }) {
       const active = runtime.interaction.get().activeHighlight;
       if (active && !hits.some((hit) => hit.id === active)) runtime.clearSelection();
       feedback();
+      if (translating) {
+        translating = container.getAnimations().some((animation) => animation instanceof CSSTransition && animation.transitionProperty === "translate" && animation.playState === "running");
+        if (translating) schedule();
+      }
     };
     const schedule = () => {
       if (!frame) frame = requestAnimationFrame(render);
     };
+    const translate = (event) => {
+      if (event.target !== container || event.propertyName !== "translate") return;
+      translating = true;
+      schedule();
+    };
+    container.addEventListener("transitionrun", translate);
+    container.addEventListener("transitionend", translate);
+    container.addEventListener("transitioncancel", translate);
     const invalidate = () => {
       blocks = void 0;
       metrics = /* @__PURE__ */ new WeakMap();
@@ -1820,7 +1877,7 @@ function SelectionPaint({ runtime, interactive = true }) {
       lastDecorations = decorations;
       leavesCache = /* @__PURE__ */ new WeakMap();
       schedule();
-    }), runtime.layout.subscribe(invalidate), runtime.configuration.subscribe(invalidate)];
+    }), runtime.layout.subscribe(invalidate), runtime.documentOffset.subscribe(schedule), runtime.configuration.subscribe(invalidate)];
     const observer = new MutationObserver((records) => {
       let changed = false;
       for (const record of records) {
@@ -1853,7 +1910,7 @@ function SelectionPaint({ runtime, interactive = true }) {
       for (let index = hits.length - 1; index >= 0; index--) {
         const { rect, id } = hits[index];
         const highlight = decorations.highlights.get(id);
-        if (highlight?.hidden || focused && highlight && !sameRange(focused, highlight.range)) continue;
+        if (highlight?.occurrenceId || highlight?.hidden || focused && highlight && !sameRange(focused, highlight.range)) continue;
         if (event.clientX >= rect.left && event.clientX <= rect.left + rect.width && event.clientY >= rect.top && event.clientY <= rect.top + rect.height) return id;
       }
       return null;
@@ -1918,6 +1975,9 @@ function SelectionPaint({ runtime, interactive = true }) {
       window.visualViewport?.removeEventListener("resize", schedule);
       window.visualViewport?.removeEventListener("scroll", schedule);
       document.fonts?.removeEventListener("loadingdone", fontsChanged);
+      container.removeEventListener("transitionrun", translate);
+      container.removeEventListener("transitionend", translate);
+      container.removeEventListener("transitioncancel", translate);
       container.removeEventListener("pointermove", move);
       container.removeEventListener("pointerleave", leave);
       container.removeEventListener("pointerdown", pointerDown);
@@ -2101,7 +2161,7 @@ function citation(options = {}) {
   }
   function Card(props) {
     const locale = useLocale();
-    return /* @__PURE__ */ jsx7(AnnotationCard, { ...props, title: locale.annotations });
+    return /* @__PURE__ */ jsx7(AnnotationCard, { ...props, title: locale.citation ?? locale.annotations });
   }
   function Content({ data }) {
     const runtime = useRuntime();
@@ -2120,7 +2180,7 @@ function citation(options = {}) {
     name: "citation",
     tags: ["citation", "ref"],
     scope: "local",
-    annotationTypes: [{ type: "citation", label: "Citation", icon: CitationIcon, color: "#6366f1", Content, ...options, sidebar: { Preview, collapseOnContentClick: false, ...options.sidebar }, overlay: { Card, expand: false, ...options.overlay } }],
+    annotationTypes: [{ type: "citation", label: (locale) => locale.citation ?? "Citation", icon: CitationIcon, color: "#6366f1", highlight: "hover", Content, ...options, sidebar: { Preview, collapseOnContentClick: false, ...options.sidebar }, overlay: { Card, expand: false, ...options.overlay } }],
     transform(root) {
       walk(root, (node) => {
         if (node.type !== "component") return;
@@ -2968,7 +3028,7 @@ function HighlightSettings({ context, options }) {
       /* @__PURE__ */ jsx20("legend", { children: locale.highlightStyle }),
       /* @__PURE__ */ jsx20("div", { className: "limr-highlight-styles", children: styles.map(([value, label]) => /* @__PURE__ */ jsxs16("button", { type: "button", "aria-pressed": style === value, onClick: () => change(color, value), children: [
         /* @__PURE__ */ jsx20(ToolIcon, { name: value }),
-        /* @__PURE__ */ jsx20("span", { className: "limr-underline", children: label })
+        /* @__PURE__ */ jsx20("span", { className: "limr-highlight-style-label", children: /* @__PURE__ */ jsx20("span", { className: "limr-underline", children: label }) })
       ] }, value)) })
     ] }),
     /* @__PURE__ */ jsxs16("fieldset", { disabled: context.busy, children: [
@@ -3067,4 +3127,4 @@ export {
   highlightSelection,
   deleteAnnotations
 };
-//# sourceMappingURL=chunk-65V5OZ4G.js.map
+//# sourceMappingURL=chunk-3ILUZKDB.js.map