diff --git a/navigator-html-injectables/src/comms/keys.ts b/navigator-html-injectables/src/comms/keys.ts
index 18b907ba..73ac3cbe 100644
--- a/navigator-html-injectables/src/comms/keys.ts
+++ b/navigator-html-injectables/src/comms/keys.ts
@@ -50,7 +50,8 @@ export type CommsCommandKey =
     "peripherals_protection" |
     "keyboard_peripherals" |
     "scroll_protection" |
-    "print_protection";
+    "print_protection" |
+    "timeline_entries";
 ;
 
 export type SuspiciousActivityType = 
diff --git a/navigator-html-injectables/src/modules/snapper/CJKVerticalSnapper.ts b/navigator-html-injectables/src/modules/snapper/CJKVerticalSnapper.ts
index e4c8c532..4f5ec1b2 100644
--- a/navigator-html-injectables/src/modules/snapper/CJKVerticalSnapper.ts
+++ b/navigator-html-injectables/src/modules/snapper/CJKVerticalSnapper.ts
@@ -68,6 +68,13 @@ export class CJKVerticalSnapper extends Snapper {
         return Math.max(0, this.doc().scrollWidth - this.wnd.innerWidth);
     }
 
+    protected hasScrolledPast(el: Element): boolean {
+        const rect = el.getBoundingClientRect();
+        // vertical-rl: content flows right→left; leading edge is right, scrolled past when off-screen right.
+        // vertical-lr: content flows left→right; leading edge is left, scrolled past when off-screen left.
+        return this.verticalLR ? rect.right <= 0 : rect.left >= this.wnd.innerWidth;
+    }
+
     private reportProgress() {
         if (!this.comms.ready) return;
         const scrollWidth = this.doc().scrollWidth;
@@ -82,7 +89,8 @@ export class CJKVerticalSnapper extends Snapper {
 
         this.comms.send("progress", {
             start: progress,
-            end: viewportEnd
+            end: viewportEnd,
+            fragmentId: this.currentTimelineFragment()
         });
     }
 
@@ -150,6 +158,7 @@ export class CJKVerticalSnapper extends Snapper {
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
+        this.setupTimelineObserver();
 
         this.initialScrollHandled = false;
         this.lastScrollLeft = 0;
@@ -311,6 +320,12 @@ export class CJKVerticalSnapper extends Snapper {
             ack(true);
         });
 
+        comms.register("timeline_entries", CJKVerticalSnapper.moduleName, (data, ack) => {
+            this.cachedFragmentIds = Array.isArray(data) ? data as string[] : [];
+            this.observeTimelineElements(wnd);
+            ack(true);
+        });
+
         comms.log("CJKVerticalSnapper Mounted");
         return true;
     }
@@ -327,6 +342,11 @@ export class CJKVerticalSnapper extends Snapper {
             this.isScrollProtectionEnabled = false;
         }
 
+        this.timelineObserver?.disconnect();
+        this.timelineObserver = null;
+        this.visibleFragmentIds.clear();
+        this.timelineEntries.clear();
+
         comms.log("CJKVerticalSnapper Unmounted");
         return true;
     }
diff --git a/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts b/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts
index 78adc946..99c52807 100644
--- a/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts
+++ b/navigator-html-injectables/src/modules/snapper/ColumnSnapper.ts
@@ -72,6 +72,43 @@ export class ColumnSnapper extends Snapper {
         return this.rtl ? Math.abs(raw) : Math.max(0, this.wnd.scrollX > 0 ? this.wnd.scrollX : raw);
     }
 
+    protected hasScrolledPast(el: Element): boolean {
+        const rect = el.getBoundingClientRect();
+        return this.rtl ? rect.left >= this.wnd.innerWidth : rect.right <= 0;
+    }
+
+    /**
+     * IntersectionObserver is unreliable in CSS multi-column layout (underspecified
+     * in the spec, inconsistently implemented). Use rect-based detection instead:
+     * walk elements in DOM order and return the last one whose leading edge has
+     * entered or passed the viewport — that is the current section.
+     */
+    protected currentTimelineFragment(): string | undefined {
+        if (this.timelineEntries.size === 0) return undefined;
+
+        const inDomOrder = (a: string, b: string): number => {
+            const ea = this.timelineEntries.get(a);
+            const eb = this.timelineEntries.get(b);
+            if (!ea || !eb) return 0;
+            const cmp = ea.compareDocumentPosition(eb);
+            return cmp & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        };
+
+        const sorted = Array.from(this.timelineEntries.keys()).sort(inDomOrder);
+        const vw = this.wnd.innerWidth;
+        let result: string | undefined;
+        for (const id of sorted) {
+            const el = this.timelineEntries.get(id)!;
+            const rect = el.getBoundingClientRect();
+            // LTR: element has started when its left edge is before the viewport's right.
+            // RTL: element has started when its right edge is past the viewport's left.
+            const started = this.rtl ? rect.right > 0 : rect.left < vw;
+            if (started) result = id;
+            else break;
+        }
+        return result;
+    }
+
     reportProgress() {
         const scrollWidth = this.cachedScrollWidth;
         const viewportWidth = this.wnd.innerWidth;
@@ -83,7 +120,8 @@ export class ColumnSnapper extends Snapper {
         const viewportEnd = Math.max(0, Math.min(1, (norm + viewportWidth) / scrollWidth));
         this.comms.send("progress", {
             start: progress,
-            end: viewportEnd
+            end: viewportEnd,
+            fragmentId: this.currentTimelineFragment()
         });
     }
 
@@ -608,6 +646,17 @@ export class ColumnSnapper extends Snapper {
             ack(true);
         });
 
+        comms.register("timeline_entries", ColumnSnapper.moduleName, (data, ack) => {
+            this.cachedFragmentIds = Array.isArray(data) ? data as string[] : [];
+            this.timelineEntries.clear();
+            for (const id of this.cachedFragmentIds) {
+                const el = wnd.document.getElementById(id);
+                if (el) this.timelineEntries.set(id, el);
+            }
+            wnd.requestAnimationFrame(() => this.reportProgress());
+            ack(true);
+        });
+
         // Add interaction listeners
         wnd.addEventListener("touchstart", this.onTouchStarter, { passive: true });
         wnd.addEventListener("touchend", this.onTouchEnder, { passive: true });
@@ -641,6 +690,8 @@ export class ColumnSnapper extends Snapper {
 
         wnd.document.getElementById(COLUMN_SNAPPER_STYLE_ID)?.remove();
 
+        this.timelineEntries.clear();
+
         comms.log("ColumnSnapper Unmounted");
         return super.unmount(wnd, comms);
     }
diff --git a/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts b/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts
index c0724c5b..2bf82de2 100644
--- a/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts
+++ b/navigator-html-injectables/src/modules/snapper/ScrollSnapper.ts
@@ -37,6 +37,10 @@ export class ScrollSnapper extends Snapper {
         return this.wnd.document.scrollingElement as HTMLElement;
     }
 
+    protected hasScrolledPast(el: Element): boolean {
+        return el.getBoundingClientRect().bottom <= 0;
+    }
+
     private reportProgress() {
         if (!this.comms.ready) return;
         // We have to round up the scroll position because
@@ -50,7 +54,8 @@ export class ScrollSnapper extends Snapper {
 
         this.comms.send("progress", {
             start: progress,
-            end: viewportEnd
+            end: viewportEnd,
+            fragmentId: this.currentTimelineFragment()
         });
     }
 
@@ -124,6 +129,7 @@ export class ScrollSnapper extends Snapper {
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
+        this.setupTimelineObserver();
 
         this.initialScrollHandled = false;
         this.lastScrollTop = 0;
@@ -289,6 +295,12 @@ export class ScrollSnapper extends Snapper {
             ack(true);
         });
 
+        comms.register("timeline_entries", ScrollSnapper.moduleName, (data, ack) => {
+            this.cachedFragmentIds = Array.isArray(data) ? data as string[] : [];
+            this.observeTimelineElements(wnd);
+            ack(true);
+        });
+
         comms.log("ScrollSnapper Mounted");
         return true;
     }
@@ -298,6 +310,10 @@ export class ScrollSnapper extends Snapper {
         this.resizeObserver.disconnect();
         if (this.handleScroll) wnd.removeEventListener("scroll", this.handleScroll);
         wnd.document.getElementById(SCROLL_SNAPPER_STYLE_ID)?.remove();
+        this.timelineObserver?.disconnect();
+        this.timelineObserver = null;
+        this.visibleFragmentIds.clear();
+        this.timelineEntries.clear();
 
         if (this.patternAnalyzer) {
             this.patternAnalyzer.clear();
diff --git a/navigator-html-injectables/src/modules/snapper/Snapper.ts b/navigator-html-injectables/src/modules/snapper/Snapper.ts
index dd9fa0d4..e7124362 100644
--- a/navigator-html-injectables/src/modules/snapper/Snapper.ts
+++ b/navigator-html-injectables/src/modules/snapper/Snapper.ts
@@ -10,6 +10,80 @@ export abstract class Snapper extends Module {
 
     private protected = false;
 
+    // Timeline fragment tracking
+    protected timelineObserver: IntersectionObserver | null = null;
+    protected timelineEntries: Map<string, Element> = new Map();
+    protected visibleFragmentIds: Set<string> = new Set();
+    protected cachedFragmentIds: string[] = [];
+
+    protected setupTimelineObserver(): void {
+        if (this.timelineObserver) this.timelineObserver.disconnect();
+        this.timelineObserver = new IntersectionObserver(
+            (entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting)
+                        this.visibleFragmentIds.add((entry.target as HTMLElement).id);
+                    else
+                        this.visibleFragmentIds.delete((entry.target as HTMLElement).id);
+                }
+            },
+            { threshold: [0.01] }
+        );
+    }
+
+    protected observeTimelineElements(wnd: ReadiumWindow): void {
+        if (!this.timelineObserver) return;
+        this.timelineObserver.disconnect();
+        this.visibleFragmentIds.clear();
+        this.timelineEntries.clear();
+        for (const id of this.cachedFragmentIds) {
+            const el = wnd.document.getElementById(id);
+            if (el) {
+                this.timelineEntries.set(id, el);
+                this.timelineObserver.observe(el);
+            }
+        }
+    }
+
+    /**
+     * Returns the ID of the currently active timeline fragment:
+     * 1. Primary — IntersectionObserver: returns the first visible element in DOM (reading) order.
+     *    This is direction-agnostic; works for LTR, RTL, and vertical writing modes.
+     * 2. Fallback — rect scan: used when IntersectionObserver hasn't fired yet (e.g. programmatic
+     *    navigation). Iterates elements in DOM order, returns the last one whose leading edge has
+     *    already been scrolled past. Subclasses implement `hasScrolledPast` for their layout.
+     */
+    protected currentTimelineFragment(): string | undefined {
+        const inDomOrder = (a: string, b: string): number => {
+            const ea = this.timelineEntries.get(a);
+            const eb = this.timelineEntries.get(b);
+            if (!ea || !eb) return 0;
+            const cmp = ea.compareDocumentPosition(eb);
+            return cmp & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+        };
+
+        if (this.visibleFragmentIds.size > 0) {
+            return Array.from(this.visibleFragmentIds).sort(inDomOrder)[0];
+        }
+
+        // Fallback: last element in DOM order whose leading edge has been scrolled past
+        const sorted = Array.from(this.timelineEntries.keys()).sort(inDomOrder);
+        let nearestId: string | undefined;
+        for (const id of sorted) {
+            const el = this.timelineEntries.get(id)!;
+            if (this.hasScrolledPast(el)) nearestId = id;
+            else break;
+        }
+        return nearestId;
+    }
+
+    /**
+     * Returns true if the element's leading edge (in reading direction) has been scrolled past
+     * — i.e. the element is before the current viewport position.
+     * Subclasses implement this for their specific scroll axis and reading direction.
+     */
+    protected abstract hasScrolledPast(el: Element): boolean;
+
     buildStyles() {
         return `
         html, body {
diff --git a/navigator-html-injectables/src/modules/snapper/WebPubSnapper.ts b/navigator-html-injectables/src/modules/snapper/WebPubSnapper.ts
index 7ad427a9..54b9cc8a 100644
--- a/navigator-html-injectables/src/modules/snapper/WebPubSnapper.ts
+++ b/navigator-html-injectables/src/modules/snapper/WebPubSnapper.ts
@@ -31,6 +31,10 @@ export class WebPubSnapper extends Snapper {
         return this.wnd.document.scrollingElement as HTMLElement;
     }
 
+    protected hasScrolledPast(el: Element): boolean {
+        return el.getBoundingClientRect().bottom <= 0;
+    }
+
     private reportProgress() {
         if (!this.comms.ready) return;
 
@@ -42,7 +46,8 @@ export class WebPubSnapper extends Snapper {
 
         this.comms.send("progress", {
             start: progress,
-            end: viewportEnd
+            end: viewportEnd,
+            fragmentId: this.currentTimelineFragment()
         });
     }
 
@@ -115,6 +120,7 @@ export class WebPubSnapper extends Snapper {
     mount(wnd: ReadiumWindow, comms: Comms): boolean {
         this.wnd = wnd;
         this.comms = comms;
+        this.setupTimelineObserver();
 
         this.initialScrollHandled = false;
         this.lastScrollTop = 0;
@@ -259,6 +265,12 @@ export class WebPubSnapper extends Snapper {
             ack(true);
         });
 
+        comms.register("timeline_entries", WebPubSnapper.moduleName, (data, ack) => {
+            this.cachedFragmentIds = Array.isArray(data) ? data as string[] : [];
+            this.observeTimelineElements(wnd);
+            ack(true);
+        });
+
         comms.log("WebPubSnapper Mounted");
         return true;
     }
@@ -274,6 +286,11 @@ export class WebPubSnapper extends Snapper {
             this.isScrollProtectionEnabled = false;
         }
 
+        this.timelineObserver?.disconnect();
+        this.timelineObserver = null;
+        this.visibleFragmentIds.clear();
+        this.timelineEntries.clear();
+
         comms.log("WebPubSnapper Unmounted");
         return true;
     }
diff --git a/navigator/docs/Timeline.md b/navigator/docs/Timeline.md
new file mode 100644
index 00000000..09e60f60
--- /dev/null
+++ b/navigator/docs/Timeline.md
@@ -0,0 +1,419 @@
+# Timeline
+
+> **This API is in active development and will evolve.** Behaviour, method signatures, and the shape of `TimelineItem` are subject to change without notice until this notice is removed.
+
+A `Timeline` gives reading applications a unified, format-agnostic view of a publication's structure. It answers questions like "What chapter am I in right now?", "Where does the next chapter begin?", and "Which section does this search result belong to?" — consistently across EPUBs, audiobooks, PDFs, and web publications.
+
+## Concepts
+
+### TimelineItem
+
+A `TimelineItem` represents one structural entry in the publication:
+
+```ts
+interface TimelineItem {
+  title: string;         // Display title of this entry
+  references: string[];  // Hrefs with optional fragments that identify where this entry starts
+  role?: string[];       // Structural roles, e.g. ["chapter"], ["part"]
+  position?: string;     // Display-ready position label: page number or formatted timestamp
+  scroll?: number;       // Scroll progression (0–1) for entries that start mid-resource
+  children?: TimelineItem[];
+}
+```
+
+`references` holds one or more hrefs identifying where this entry starts in the reading order. Examples:
+- Audio: `["track1.mp3#t=1620"]` (NPT time fragment)
+- EPUB: `["chapter3.html#section-2"]` (HTML id fragment)
+- PDF: `["#page=42"]` (page fragment)
+
+### Timeline
+
+`Timeline` is the container built once from a publication's reading order and table of contents. It is a lazy singleton on `Publication`: the first access builds it and the result is cached.
+
+### How it is built
+
+**The reading order is the source of truth.** Every item in the reading order becomes exactly one top-level `TimelineItem`. The TOC is consulted only to enrich those items — never to introduce new top-level entries.
+
+**Title resolution** (per reading order item, first match wins):
+1. The reading order item's own `title`.
+2. A TOC entry whose href points to the start of that resource (bare href, or `#t=0` for audio).
+3. If exactly one fragment-based TOC entry references this resource, its title.
+4. A positional placeholder (`Resource N`) when no title can be reliably derived.
+
+**Children:** all TOC entries that reference a reading order resource become flat children of the corresponding timeline item, in TOC declaration order. No parent-child relationships within the TOC are reconstructed — that inference requires role context and is planned for a future iteration.
+
+TOC entries that do not match any reading order item are ignored entirely.
+
+### Depth
+
+The `depth` option controls how many levels deep into the TOC hierarchy the timeline looks, for both title resolution and child collection. Level 1 means only top-level TOC entries; level 2 adds their children; and so on. `undefined` means no limit.
+
+Depth can be set at build time (via `Timeline.build`) or adjusted at runtime via the `depth` setter. Setting it at runtime trims the cached tree without rebuilding from scratch. Setting the same value again is a no-op.
+
+## Access
+
+```ts
+publication.timeline  // lazy, cached on first access
+navigator.timeline    // delegates to publication.timeline (may also augment with additional data)
+```
+
+Prefer `navigator.timeline` when a navigator is available: the EPUB navigator augments the timeline with additional data e.g. positions list, populating `TimelineItem.position` (page number) and `TimelineItem.scroll` (scroll progression within a resource). The audio navigator augments with formatted timestamps.
+
+```ts
+publication.timeline.depth = 2;   // limit visible tree depth at runtime
+```
+
+## Observing changes
+
+Both `EpubNavigatorListeners` and `AudioNavigatorListeners` expose a `timelineItemChanged` callback. It fires whenever the active `TimelineItem` changes — not on every position tick, only when the item actually changes. It receives `undefined` when no item is active.
+
+```ts
+// EPUB
+const listeners: EpubNavigatorListeners = {
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    chapterTitle.textContent = item?.title ?? '';
+  },
+  // …
+};
+
+// Audio
+const listeners: AudioNavigatorListeners = {
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    chapterTitle.textContent = item?.title ?? '';
+  },
+  // …
+};
+```
+
+Use this to keep chapter titles, breadcrumbs, or previous/next navigation in sync without polling. See `positionChanged` if you need every position tick.
+
+## Methods
+
+### `locate(locator)`
+
+Returns the most specific `TimelineItem` covering the given locator's position.
+
+- **Audio:** matches on the `#t=` NPT time fragment, returning the entry whose start time is ≤ the current time and closest to it.
+- **EPUB (paginated):** matches on the HTML id fragment if present, then falls back to the best scroll progression match.
+- **Fallback:** bare href match, returning the top-level item for the resource.
+
+```ts
+const item = navigator.timeline.locate(navigator.currentLocator);
+console.log(item?.title);
+```
+
+### `adjacentTo(item)`
+
+Returns `{ previous, next }` relative to the given item in the flattened timeline. Both values are `undefined` at the boundaries.
+
+```ts
+const { previous, next } = navigator.timeline.adjacentTo(currentItem);
+prevButton.disabled = !previous;
+nextButton.disabled = !next;
+prevLabel.textContent = previous?.title ?? '';
+nextLabel.textContent = next?.title ?? '';
+```
+
+### `segmentsForHref(href)`
+
+Returns the timeline segments within a reading order resource: the item's children if it has any, otherwise the item itself. Use this to render a labelled progress bar.
+
+```ts
+const segments = navigator.timeline.segmentsForHref(locator.href);
+renderProgressBar(segments);
+```
+
+### `itemAtProgression(href, progression)`
+
+Returns the item that best corresponds to a progression value (0–1) within a resource. The resolution strategy is derived automatically from the publication's profile and manifest:
+
+- **Audiobook:** the track's `duration` from the manifest is used to convert the progression to an absolute time, matched against NPT fragments.
+- **EPUB:** uses `TimelineItem.scroll` values if present, otherwise divides children evenly by index.
+
+Use this for hover inference on a progress bar.
+
+```ts
+progressBar.addEventListener('mousemove', (e) => {
+  const fraction = e.offsetX / progressBar.clientWidth;
+  const hovered = navigator.timeline.itemAtProgression(currentLocator.href, fraction);
+  tooltip.textContent = hovered?.title ?? '';
+});
+```
+
+### `ancestors(item)`
+
+Returns the ordered ancestor path from root to the immediate parent of `item`. Empty array if the item is top-level.
+
+```ts
+const path = navigator.timeline.ancestors(currentItem);
+breadcrumb.textContent = [...path, currentItem].map(a => a.title).join(' › ');
+```
+
+### `linkFor(item)`
+
+Returns the source `Link` from the publication manifest that this item was built from. Useful when you need to navigate to the item's starting position.
+
+```ts
+const link = navigator.timeline.linkFor(item);
+if (link) {
+  const locator = publication.locatorFromLink(link);
+  navigator.go(locator);
+}
+```
+
+## Use Cases
+
+### Running header (current chapter title)
+
+Keep a header in sync with reading position using `timelineItemChanged`:
+
+```ts
+const listeners = {
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    document.getElementById('chapter-header').textContent = item?.title ?? '';
+  },
+};
+```
+
+### Previous / Next chapter navigation
+
+```ts
+let currentItem: TimelineItem | undefined;
+
+const listeners = {
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    currentItem = item;
+    if (!item) return;
+
+    const { previous, next } = navigator.timeline.adjacentTo(item);
+    prevChapterButton.disabled = !previous;
+    nextChapterButton.disabled = !next;
+    prevChapterLabel.textContent = previous?.title ?? '';
+    nextChapterLabel.textContent = next?.title ?? '';
+  },
+};
+
+prevChapterButton.addEventListener('click', () => {
+  if (!currentItem) return;
+  const { previous } = navigator.timeline.adjacentTo(currentItem);
+  if (!previous) return;
+  const link = navigator.timeline.linkFor(previous);
+  if (link) navigator.go(publication.locatorFromLink(link));
+});
+```
+
+### Progress bar with chapter segments
+
+Render chapter boundaries as tick marks on a progress bar, and show which chapter the user would land in when they hover:
+
+```ts
+function renderProgressBar(locator: Locator, duration: number) {
+  const segments = navigator.timeline.segmentsForHref(locator.href);
+  const container = document.getElementById('progress-bar');
+
+  // Render chapter ticks
+  container.innerHTML = '';
+  segments.forEach((segment, i) => {
+    const tick = document.createElement('div');
+    tick.className = 'chapter-tick';
+
+    if (duration > 0) {
+      // Audio: use start time
+      const link = navigator.timeline.linkFor(segment);
+      const time = parseTimeFromHref(link?.href ?? '');
+      tick.style.left = `${(time / duration) * 100}%`;
+    } else {
+      // EPUB: evenly spaced (or use segment.scroll if available)
+      tick.style.left = `${(i / segments.length) * 100}%`;
+    }
+
+    container.appendChild(tick);
+  });
+}
+
+// Hover tooltip
+progressBar.addEventListener('mousemove', (e) => {
+  const fraction = e.offsetX / progressBar.clientWidth;
+  const hovered = navigator.timeline.itemAtProgression(
+    currentLocator.href,
+    fraction,
+    audioDuration,
+  );
+  tooltip.textContent = hovered?.title ?? '';
+  tooltip.style.left = `${e.offsetX}px`;
+});
+```
+
+### Breadcrumb
+
+Show the full structural path to the current item:
+
+```ts
+const listeners = {
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    if (!item) {
+      breadcrumb.textContent = '';
+      return;
+    }
+    const path = navigator.timeline.ancestors(item);
+    breadcrumb.textContent = [...path, item].map(a => a.title).join(' › ');
+  },
+};
+```
+
+### Grouping search results by chapter
+
+```ts
+function groupResultsByChapter(locators: Locator[]): Map<string, Locator[]> {
+  const groups = new Map<string, Locator[]>();
+
+  for (const locator of locators) {
+    const item = navigator.timeline.locate(locator);
+    const key = item?.title ?? 'Unknown';
+    const existing = groups.get(key) ?? [];
+    existing.push(locator);
+    groups.set(key, existing);
+  }
+
+  return groups;
+}
+```
+
+### Contextualizing bookmarks and highlights
+
+Attach chapter context when saving annotations:
+
+```ts
+function saveHighlight(locator: Locator, text: string) {
+  const item = navigator.timeline.locate(locator);
+  const chapterTitle = item?.title;
+  const chapterPosition = item?.position;
+
+  db.saveHighlight({ locator, text, chapterTitle, chapterPosition });
+}
+```
+
+## Complete Example — EPUB Chapter Navigation UI
+
+```ts
+import { EpubNavigator, EpubNavigatorListeners, Locator, TimelineItem } from "@readium/navigator";
+
+let currentItem: TimelineItem | undefined;
+
+const listeners: EpubNavigatorListeners = {
+  positionChanged(locator: Locator): void {
+    const progression = locator.locations.progression ?? 0;
+    (document.getElementById('progress') as HTMLInputElement).value = String(progression);
+  },
+
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    currentItem = item;
+
+    // Running header
+    document.getElementById('chapter-title')!.textContent = item?.title ?? '';
+
+    if (!item) return;
+
+    // Previous / Next labels
+    const { previous, next } = navigator.timeline.adjacentTo(item);
+    (document.getElementById('prev-chapter') as HTMLButtonElement).disabled = !previous;
+    (document.getElementById('next-chapter') as HTMLButtonElement).disabled = !next;
+    document.getElementById('prev-label')!.textContent = previous?.title ?? '';
+    document.getElementById('next-label')!.textContent = next?.title ?? '';
+
+    // Breadcrumb
+    const path = navigator.timeline.ancestors(item);
+    document.getElementById('breadcrumb')!.textContent =
+      [...path, item].map(a => a.title).join(' › ');
+  },
+
+  // …other required listeners
+};
+
+const navigator = new EpubNavigator(container, publication, listeners, positions);
+
+// Chapter navigation
+document.getElementById('prev-chapter')!.addEventListener('click', () => {
+  if (!currentItem) return;
+  const { previous } = navigator.timeline.adjacentTo(currentItem);
+  if (!previous) return;
+  const link = navigator.timeline.linkFor(previous);
+  if (link) navigator.go(publication.locatorFromLink(link));
+});
+
+document.getElementById('next-chapter')!.addEventListener('click', () => {
+  if (!currentItem) return;
+  const { next } = navigator.timeline.adjacentTo(currentItem);
+  if (!next) return;
+  const link = navigator.timeline.linkFor(next);
+  if (link) navigator.go(publication.locatorFromLink(link));
+});
+```
+
+## Complete Example — Audio Chapter Segments
+
+```ts
+import { AudioNavigator, AudioNavigatorListeners, Locator, TimelineItem } from "@readium/navigator";
+
+let audioDuration = 0;
+let currentLocator: Locator | undefined;
+
+const listeners: AudioNavigatorListeners = {
+  metadataLoaded(metadata): void {
+    audioDuration = metadata.duration;
+    if (currentLocator) renderSegments(currentLocator.href);
+  },
+
+  positionChanged(locator: Locator): void {
+    currentLocator = locator;
+    const progression = locator.locations.progression ?? 0;
+    (document.getElementById('progress') as HTMLInputElement).value = String(progression);
+  },
+
+  timelineItemChanged(item: TimelineItem | undefined): void {
+    document.getElementById('chapter-title')!.textContent = item?.title ?? '';
+
+    if (!item) return;
+    const { previous, next } = navigator.timeline.adjacentTo(item);
+    document.getElementById('prev-label')!.textContent = previous?.title ?? '';
+    document.getElementById('next-label')!.textContent = next?.title ?? '';
+  },
+
+  // …other required listeners
+};
+
+const navigator = new AudioNavigator(publication, listeners);
+
+function renderSegments(href: string) {
+  const segments = navigator.timeline.segmentsForHref(href);
+  const bar = document.getElementById('chapter-ticks')!;
+  bar.innerHTML = '';
+
+  segments.forEach(segment => {
+    const tick = document.createElement('div');
+    tick.className = 'tick';
+    const link = navigator.timeline.linkFor(segment);
+    if (link) {
+      const t = parseNptFromHref(link.href);
+      if (t !== undefined && audioDuration > 0) {
+        tick.style.left = `${(t / audioDuration) * 100}%`;
+        tick.title = segment.title;
+        bar.appendChild(tick);
+      }
+    }
+  });
+}
+
+// Hover tooltip
+document.getElementById('progress')!.addEventListener('mousemove', (e) => {
+  if (!currentLocator) return;
+  const el = e.currentTarget as HTMLInputElement;
+  const fraction = e.offsetX / el.clientWidth;
+  const hovered = navigator.timeline.itemAtProgression(
+    currentLocator.href,
+    fraction,
+    audioDuration,
+  );
+  document.getElementById('hover-tooltip')!.textContent = hovered?.title ?? '';
+});
+```
diff --git a/navigator/src/Navigator.ts b/navigator/src/Navigator.ts
index 250a8b85..f99b2916 100644
--- a/navigator/src/Navigator.ts
+++ b/navigator/src/Navigator.ts
@@ -1,4 +1,4 @@
-import { Link, Locator, Publication, ReadingProgression } from "@readium/shared";
+import { Link, Locator, Publication, ReadingProgression, Timeline } from "@readium/shared";
 import { 
     ContentProtectionConfig, 
     PrintProtectionConfig, 
@@ -24,6 +24,7 @@ export type IKeyboardPeripheralsConfig = Array<Omit<KeyboardPeripheral, 'type'>
 export interface ProgressionRange {
     start: number;
     end: number;
+    fragmentId?: string;  // DOM element ID of the currently active timeline anchor
 }
 
 export interface VisualNavigatorViewport {
@@ -42,6 +43,8 @@ export abstract class Navigator {
     abstract get publication(): Publication; // Publication rendered by this navigator.
     abstract get currentLocator(): Locator; // Current position (detailed) in the publication. Can be used to save a bookmark to the current position.
 
+    abstract get timeline(): Timeline;
+
     /**
      * Moves to the position in the publication corresponding to the given {Locator}.
      */
diff --git a/navigator/src/epub/EpubNavigator.ts b/navigator/src/epub/EpubNavigator.ts
index 3ed2cf3a..e74e1e7f 100644
--- a/navigator/src/epub/EpubNavigator.ts
+++ b/navigator/src/epub/EpubNavigator.ts
@@ -1,4 +1,4 @@
-import { Layout, Link, Locator, LocatorText, Profile, Publication, ReadingProgression } from "@readium/shared";
+import { Layout, Link, Locator, LocatorText, Profile, Publication, ReadingProgression, Timeline, TimelineItem } from "@readium/shared";
 import { Configurable, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../index.ts";
 import { FramePoolManager } from "./frame/FramePoolManager.ts";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager.ts";
@@ -36,6 +36,7 @@ export interface EpubNavigatorConfiguration {
 export interface EpubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
     positionChanged: (locator: Locator) => void;
+    timelineItemChanged: (item: TimelineItem | undefined) => void;
     tap: (e: FrameClickEvent) => boolean; // Return true to prevent handling here
     click: (e: FrameClickEvent) => boolean;  // Return true to prevent handling here
     zoom: (scale: number) => void;
@@ -53,6 +54,7 @@ export interface EpubNavigatorListeners {
 const defaultListeners = (listeners: EpubNavigatorListeners): EpubNavigatorListeners => ({
     frameLoaded: listeners.frameLoaded || (() => {}),
     positionChanged: listeners.positionChanged || (() => {}),
+    timelineItemChanged: listeners.timelineItemChanged || (() => {}),
     tap: listeners.tap || (() => false),
     click: listeners.click || (() => false),
     zoom: listeners.zoom || (() => {}),
@@ -73,6 +75,8 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     private framePool!: FramePoolManager | FXLFramePoolManager;
     private positions!: Locator[];
     private currentLocation!: Locator;
+    private _currentTimelineItem: TimelineItem | undefined;
+    private _timelineAugmented = false;
     private lastLocationInView: Locator | undefined;
     private currentProgression: ReadingProgression;
     private _layout: Layout;
@@ -270,7 +274,11 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 cssProperties,
                 this._injector,
                 this._contentProtection,
-                this._keyboardPeripherals
+                this._keyboardPeripherals,
+                (href) => this.pub.timeline.segmentsForHref(href)
+                    .flatMap(item => item.references)
+                    .map(ref => { const h = ref.indexOf('#'); return h >= 0 ? ref.slice(h + 1) : ''; })
+                    .filter(Boolean)
             );
         }
 
@@ -436,6 +444,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             case "_pong":
                 this.listeners.frameLoaded(this._cframes[0]!.iframe.contentWindow!);
                 this.listeners.positionChanged(this.currentLocation);
+                this._notifyTimelineChange(this.currentLocation);
                 if (sourceFrame) {
                     const frames = this._cframes.filter(f => !!f) as (FrameManager | FXLFrameManager)[];
                     const i = frames.indexOf(sourceFrame);
@@ -456,6 +465,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                     text: loc?.text
                 });
                 this.listeners.positionChanged(this.currentLocation);
+                this._notifyTimelineChange(this.currentLocation);
                 break;
             case "text_selected": {
                 const selection = data as BasicTextSelection;
@@ -829,6 +839,7 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
             // positionChanged via _pong; on back-then-forward to an
             // already-loaded frame no _pong fires, so dispatch explicitly here.
             this.listeners.positionChanged(this.currentLocation);
+            this._notifyTimelineChange(this.currentLocation);
             return true;
         }
 
@@ -931,6 +942,10 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         this.lastLocationInView = nearestPositions.last;
         this.updateViewport(progression);
         this.listeners.positionChanged(this.currentLocation);
+        const locatorForTimeline = progression.fragmentId
+            ? this.currentLocation.copyWithLocations({ fragments: [`#${progression.fragmentId}`] })
+            : this.currentLocation;
+        this._notifyTimelineChange(locatorForTimeline);
         await this.framePool.update(this.pub, this.currentLocation, this.determineModules());
     }
 
@@ -1033,6 +1048,33 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
         return this.pub;
     }
 
+    get timeline(): Timeline {
+        const t = this.pub.timeline;
+        if (!this._timelineAugmented && this.positions?.length) {
+            const positions = this.positions;
+            t.augment((_item, link) => {
+                const hashIndex = link.href.indexOf('#');
+                const bare = hashIndex >= 0 ? link.href.slice(0, hashIndex) : link.href;
+                const fragment = hashIndex >= 0 ? link.href.slice(hashIndex + 1) : undefined;
+                const entries = positions.filter(p => p.href === bare);
+                if (!entries.length) return {};
+                const atFragment = fragment
+                    ? entries.find(p => p.locations.fragments[0] === fragment)
+                    : undefined;
+                const candidate = atFragment ?? entries.reduce((min, p) =>
+                    (p.locations.position ?? Infinity) < (min.locations.position ?? Infinity) ? p : min
+                );
+                return {
+                    position: candidate.locations.position !== undefined
+                        ? String(candidate.locations.position) : undefined,
+                    scroll: atFragment?.locations.progression,
+                };
+            });
+            this._timelineAugmented = true;
+        }
+        return t;
+    }
+
     private async loadLocator(locator: Locator, cb: (ok: boolean) => void) {
         let done = false;
         let cssSelector = (typeof locator.locations.getCssSelector === "function") && locator.locations.getCssSelector();
@@ -1113,4 +1155,12 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
     public goLink(link: Link, animated: boolean, cb: (ok: boolean) => void): void {
         return this.go(link.locator, animated, cb);
     }
+
+    private _notifyTimelineChange(locator: Locator): void {
+        const item = this.timeline.locate(locator);
+        if (item !== this._currentTimelineItem) {
+            this._currentTimelineItem = item;
+            this.listeners.timelineItemChanged(item);
+        }
+    }
 }
diff --git a/navigator/src/epub/frame/FrameManager.ts b/navigator/src/epub/frame/FrameManager.ts
index 507f98be..7581fb2f 100644
--- a/navigator/src/epub/frame/FrameManager.ts
+++ b/navigator/src/epub/frame/FrameManager.ts
@@ -21,7 +21,8 @@ export class FrameManager {
     constructor(
         source: string,
         contentProtectionConfig: IContentProtectionConfig = {},
-        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = [],
+        private readonly timelineFragmentIds: string[] = []
     ) {
         this.frame = document.createElement("iframe");
         this.frame.sandbox.value = "allow-same-origin allow-scripts";
@@ -141,6 +142,10 @@ export class FrameManager {
                     // Apply content protection synchronously
                     this.applyContentProtection();
 
+                    // Send timeline fragment IDs so the snapper can set up observers
+                    if (this.timelineFragmentIds.length > 0)
+                        this.comms?.send("timeline_entries", this.timelineFragmentIds);
+
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
                         this.frame.style.removeProperty("aria-hidden");
diff --git a/navigator/src/epub/frame/FramePoolManager.ts b/navigator/src/epub/frame/FramePoolManager.ts
index 0363641b..ce54d56d 100644
--- a/navigator/src/epub/frame/FramePoolManager.ts
+++ b/navigator/src/epub/frame/FramePoolManager.ts
@@ -21,6 +21,7 @@ export class FramePoolManager {
     private readonly injector: Injector | null = null;
     private readonly contentProtectionConfig: IContentProtectionConfig;
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
+    private readonly getFragmentIds: (href: string) => string[];
 
     constructor(
         container: HTMLElement,
@@ -28,7 +29,8 @@ export class FramePoolManager {
         cssProperties?: { [key: string]: string },
         injector?: Injector | null,
         contentProtectionConfig?: IContentProtectionConfig,
-        keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig
+        keyboardPeripheralsConfig?: IKeyboardPeripheralsConfig,
+        getFragmentIds?: (href: string) => string[]
     ) {
         this.container = container;
         this.positions = positions;
@@ -36,6 +38,7 @@ export class FramePoolManager {
         this.injector = injector ?? null;
         this.contentProtectionConfig = contentProtectionConfig || {};
         this.keyboardPeripheralsConfig = keyboardPeripheralsConfig || [];
+        this.getFragmentIds = getFragmentIds ?? (() => []);
     }
 
     async destroy() {
@@ -171,7 +174,7 @@ export class FramePoolManager {
                 }
 
                 // Create <iframe>
-                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
+                const fm = new FrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig, this.getFragmentIds(href));
                 if(href !== newHref) await fm.hide(); // Avoid unecessary hide
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);
diff --git a/navigator/src/webpub/WebPubFrameManager.ts b/navigator/src/webpub/WebPubFrameManager.ts
index 4a36e1d4..5146bb7b 100644
--- a/navigator/src/webpub/WebPubFrameManager.ts
+++ b/navigator/src/webpub/WebPubFrameManager.ts
@@ -20,7 +20,8 @@ export class WebPubFrameManager {
     constructor(
         source: string,
         contentProtectionConfig: IContentProtectionConfig = {},
-        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = [],
+        private readonly timelineFragmentIds: string[] = []
     ) {
         this.frame = document.createElement("iframe");
         this.frame.classList.add("readium-navigator-iframe");
@@ -138,6 +139,11 @@ export class WebPubFrameManager {
                 this.comms?.send("focus", undefined, () => {
                     // Apply content protection synchronously
                     this.applyContentProtection();
+
+                    // Send timeline fragment IDs so the snapper can set up observers
+                    if (this.timelineFragmentIds.length > 0)
+                        this.comms?.send("timeline_entries", this.timelineFragmentIds);
+
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
                         this.frame.style.removeProperty("aria-hidden");
diff --git a/navigator/src/webpub/WebPubFramePoolManager.ts b/navigator/src/webpub/WebPubFramePoolManager.ts
index 6ec27965..c8da0a0c 100644
--- a/navigator/src/webpub/WebPubFramePoolManager.ts
+++ b/navigator/src/webpub/WebPubFramePoolManager.ts
@@ -17,19 +17,22 @@ export class WebPubFramePoolManager {
     private readonly injector?: Injector | null = null;
     private readonly contentProtectionConfig: IContentProtectionConfig;
     private readonly keyboardPeripheralsConfig: IKeyboardPeripheralsConfig;
+    private readonly getFragmentIds: (href: string) => string[];
 
     constructor(
         container: HTMLElement,
         cssProperties?: { [key: string]: string },
         injector?: Injector | null,
         contentProtectionConfig: IContentProtectionConfig = {},
-        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = []
+        keyboardPeripheralsConfig: IKeyboardPeripheralsConfig = [],
+        getFragmentIds?: (href: string) => string[]
     ) {
         this.container = container;
         this.currentCssProperties = cssProperties;
         this.injector = injector;
         this.contentProtectionConfig = contentProtectionConfig;
         this.keyboardPeripheralsConfig = [...keyboardPeripheralsConfig];
+        this.getFragmentIds = getFragmentIds ?? (() => []);
     }
 
     async destroy() {
@@ -154,7 +157,7 @@ export class WebPubFramePoolManager {
                     this.blobs.set(href, blobURL);
                 }
 
-                const fm = new WebPubFrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig);
+                const fm = new WebPubFrameManager(this.blobs.get(href)!, this.contentProtectionConfig, this.keyboardPeripheralsConfig, this.getFragmentIds(href));
                 if(href !== newHref) await fm.hide();
                 this.container.appendChild(fm.iframe);
                 await fm.load(modules);
diff --git a/navigator/src/webpub/WebPubNavigator.ts b/navigator/src/webpub/WebPubNavigator.ts
index 6710aa89..3bb8aec9 100644
--- a/navigator/src/webpub/WebPubNavigator.ts
+++ b/navigator/src/webpub/WebPubNavigator.ts
@@ -1,4 +1,4 @@
-import { Feature, Link, Locator, LocatorText, Publication, ReadingProgression, LocatorLocations } from "@readium/shared";
+import { Feature, Link, Locator, LocatorText, Publication, ReadingProgression, LocatorLocations, Timeline, TimelineItem } from "@readium/shared";
 import { VisualNavigator, VisualNavigatorViewport, ProgressionRange, KeyboardPeripheralEventData } from "../Navigator.ts";
 import { Configurable } from "../preferences/Configurable.ts";
 import { WebPubFramePoolManager } from "./WebPubFramePoolManager.ts";
@@ -33,6 +33,7 @@ export interface WebPubNavigatorConfiguration {
 export interface WebPubNavigatorListeners {
     frameLoaded: (wnd: Window) => void;
     positionChanged: (locator: Locator) => void;
+    timelineItemChanged: (item: TimelineItem | undefined) => void;
     tap: (e: FrameClickEvent) => boolean;
     click: (e: FrameClickEvent) => boolean;
     zoom: (scale: number) => void;
@@ -48,6 +49,7 @@ export interface WebPubNavigatorListeners {
 const defaultListeners = (listeners: WebPubNavigatorListeners): WebPubNavigatorListeners => ({
     frameLoaded: listeners.frameLoaded || (() => {}),
     positionChanged: listeners.positionChanged || (() => {}),
+    timelineItemChanged: listeners.timelineItemChanged || (() => {}),
     tap: listeners.tap || (() => false),
     click: listeners.click || (() => false),
     zoom: listeners.zoom || (() => {}),
@@ -67,6 +69,7 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
     private framePool!: WebPubFramePoolManager;
     private currentIndex: number = 0;
     private currentLocation: Locator;
+    private _currentTimelineItem: TimelineItem | undefined;
 
     private _preferences: WebPubPreferences;
     private _defaults: WebPubDefaults;
@@ -184,7 +187,11 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
             cssProperties,
             this._injector,
             this._contentProtection,
-            this._keyboardPeripherals
+            this._keyboardPeripherals,
+            (href) => this.pub.timeline.segmentsForHref(href)
+                .flatMap(item => item.references)
+                .map(ref => { const h = ref.indexOf('#'); return h >= 0 ? ref.slice(h + 1) : ''; })
+                .filter(Boolean)
         );
 
         await this.apply();
@@ -264,6 +271,7 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
             case "_pong":
                 this.listeners.frameLoaded(this.framePool.currentFrames[0]!.iframe.contentWindow!);
                 this.listeners.positionChanged(this.currentLocation);
+                this._notifyTimelineChange(this.currentLocation);
                 this._reapplyDecorationsToCurrentFrame();
                 break;
             case "first_visible_locator":
@@ -277,6 +285,7 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
                     text: loc?.text
                 });
                 this.listeners.positionChanged(this.currentLocation);
+                this._notifyTimelineChange(this.currentLocation);
                 break;
             case "text_selected": {
                 const selection = data as BasicTextSelection;
@@ -604,6 +613,10 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
 
         this.updateViewport(progression);
         this.listeners.positionChanged(this.currentLocation);
+        const locatorForTimeline = progression.fragmentId
+            ? this.currentLocation.copyWithLocations({ fragments: [`#${progression.fragmentId}`] })
+            : this.currentLocation;
+        this._notifyTimelineChange(locatorForTimeline);
         await this.framePool.update(this.pub, this.currentLocation, this.determineModules());
     }
 
@@ -663,6 +676,10 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
         return this.pub;
     }
 
+    get timeline(): Timeline {
+        return this.pub.timeline;
+    }
+
     private async loadLocator(locator: Locator, cb: (ok: boolean) => void) {
         let done = false;
         let cssSelector = (typeof locator.locations.getCssSelector === "function") && locator.locations.getCssSelector();
@@ -778,6 +795,14 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
             })
         });
     }
+
+    private _notifyTimelineChange(locator: Locator): void {
+        const item = this.timeline.locate(locator);
+        if (item !== this._currentTimelineItem) {
+            this._currentTimelineItem = item;
+            this.listeners.timelineItemChanged(item);
+        }
+    }
 }
 
 export const ExperimentalWebPubNavigator = WebPubNavigator;
diff --git a/shared/src/publication/Link.ts b/shared/src/publication/Link.ts
index ec312750..0f52c20d 100644
--- a/shared/src/publication/Link.ts
+++ b/shared/src/publication/Link.ts
@@ -11,7 +11,7 @@ import {
   positiveNumberfromJSON,
   setToArray,
 } from '../util/JSONParse.ts';
-import { LocatorLocations, Locator } from './Locator.ts';
+import { Locator } from './Locator.ts';
 
 /**
  * Link Object for the Readium Web Publication Manifest.
@@ -197,14 +197,10 @@ export class Link {
    * Creates a [Locator] from a reading order [Link].
    */
   public get locator(): Locator {
-    let parts = this.href.split('#');
     return new Locator({
-      href: parts.length > 0 && parts[0] !== undefined ? parts[0] : this.href,
+      href: this.href,
       type: this.type ?? '',
       title: this.title,
-      locations: new LocatorLocations({
-        fragments: parts.length > 1 && parts[1] !== undefined ? [parts[1]] : [],
-      }),
     });
   }
 }
diff --git a/shared/src/publication/Locator.ts b/shared/src/publication/Locator.ts
index dc04bdec..46595737 100644
--- a/shared/src/publication/Locator.ts
+++ b/shared/src/publication/Locator.ts
@@ -176,12 +176,22 @@ export class Locator {
     locations?: LocatorLocations;
     text?: LocatorText;
   }) {
-    this.href = values.href;
+    const hashIndex = values.href.indexOf("#");
+    const hrefFragment = hashIndex >= 0 ? values.href.slice(hashIndex + 1) : undefined;
+    this.href = hashIndex >= 0 ? values.href.slice(0, hashIndex) : values.href;
     this.type = values.type;
     this.title = values.title;
+    // If locations.fragments is already set, it takes precedence over any fragment in the href.
+    // We don't merge both because explicit fragments are considered authoritative.
+    const existingFragments = values.locations?.fragments;
+    const needsFragment = hrefFragment && (!existingFragments || existingFragments.length === 0);
     this.locations = values.locations
-      ? values.locations
-      : new LocatorLocations({});
+      ? needsFragment
+        ? new LocatorLocations({ ...values.locations, fragments: [hrefFragment!] })
+        : values.locations
+      : hrefFragment
+        ? new LocatorLocations({ fragments: [hrefFragment] })
+        : new LocatorLocations({});
     this.text = values.text;
   }
 
diff --git a/shared/src/publication/Manifest.ts b/shared/src/publication/Manifest.ts
index 9a4cd051..36d0bc54 100644
--- a/shared/src/publication/Manifest.ts
+++ b/shared/src/publication/Manifest.ts
@@ -145,21 +145,19 @@ export class Manifest {
    * Returns null if the resource is not found in this manifest.
    */
   public locatorFromLink(link: Link): Locator | undefined {
-    const components = link.href.split("#");
-    const href = components.length == 2 ? components[0] : link.href;
-    const resourceLink = this.linkWithHref(href);
+    const bare = link.href.split("#")[0];
+    const resourceLink = this.linkWithHref(bare);
     if(!resourceLink) return undefined;
     const type = resourceLink.type;
     if(!type) return undefined;
-    const fragment = components.length == 2 ? components[1] : undefined;
+    const hasFragment = link.href.includes("#");
 
     return new Locator({
-      href,
+      href: link.href,
       type,
       title: resourceLink.title ?? link.title,
       locations: new LocatorLocations({
-        fragments: fragment ? [fragment] : undefined,
-        progression: fragment ? undefined : 0.0,
+        progression: hasFragment ? undefined : 0.0,
       })
     });
   }
diff --git a/shared/src/publication/Publication.ts b/shared/src/publication/Publication.ts
index 54bddb5e..d33423da 100644
--- a/shared/src/publication/Publication.ts
+++ b/shared/src/publication/Publication.ts
@@ -13,6 +13,7 @@ import { Resource } from '../fetcher/Resource.ts';
 import { GuidedNavigationDocument } from "./GuidedNavigation.ts";
 import { MediaType, URITemplate } from "../util/index.ts";
 import { Timeline } from './services/timeline/Timeline.ts';
+import { buildTimeline } from './services/timeline/index.ts';
 
 /** Shared model for a Readium Publication. */
 export class Publication {
@@ -51,7 +52,7 @@ export class Publication {
    * The result is cached after the first call.
    */
   public get timeline(): Timeline {
-    if (!this._timeline) this._timeline = Timeline.build(this);
+    if (!this._timeline) this._timeline = buildTimeline(this);
     return this._timeline;
   }
 
diff --git a/shared/src/publication/services/timeline/Timeline.ts b/shared/src/publication/services/timeline/Timeline.ts
index 67a1bee1..73d5f66e 100644
--- a/shared/src/publication/services/timeline/Timeline.ts
+++ b/shared/src/publication/services/timeline/Timeline.ts
@@ -1,11 +1,13 @@
 import { Link, Links } from "../../Link.ts";
 import { Locator } from "../../Locator.ts";
-import { TimelineItem } from "./TimelineItem.ts";
+import { Profile } from "../../Profiles.ts";
 import { isNptStartOfResource, parseNptTime } from "../../../util/npt.ts";
+import { TimelineItem } from "./TimelineItem.ts";
 
-interface PublicationLike {
+export interface PublicationLike {
     toc?: Links;
     readingOrder: Links;
+    metadata?: { conformsTo?: Profile[] };
 }
 
 /**
@@ -28,21 +30,27 @@ interface PublicationLike {
 export class Timeline {
     private readonly _allItems: TimelineItem[];
     private readonly linkMap: Map<TimelineItem, Link>;
+    private readonly _conformsTo: readonly Profile[];
     private _depth: number | undefined;
     private _items: TimelineItem[] | undefined;
     private _flat: TimelineItem[] | undefined;
     /** Populated when depth is set; maps cloned items from trimToDepth back to their Links. */
     private _trimmedLinkMap: Map<TimelineItem, Link> = new Map();
 
-    constructor(items: TimelineItem[], linkMap: Map<TimelineItem, Link>) {
+    constructor(items: TimelineItem[], linkMap: Map<TimelineItem, Link>, conformsTo: readonly Profile[] = []) {
         this._allItems = items;
         this.linkMap = linkMap;
+        this._conformsTo = conformsTo;
     }
 
-    static build(publication: PublicationLike, options: { depth?: number } = {}): Timeline {
+    static build(
+        publication: PublicationLike,
+        options: { depth?: number } = {},
+    ): Timeline {
         const tocLinks = publication.toc?.items ?? [];
         const roLinks = publication.readingOrder.items;
         const { depth } = options;
+        const conformsTo = publication.metadata?.conformsTo ?? [];
         const linkMap = new Map<TimelineItem, Link>();
         const items: TimelineItem[] = [];
 
@@ -67,7 +75,25 @@ export class Timeline {
             items.push(item);
         }
 
-        return new Timeline(items, linkMap);
+        return new Timeline(items, linkMap, conformsTo);
+    }
+
+    /**
+     * Augments all items in the timeline by applying the mapper's returned patch.
+     * The mapper receives the item and its original manifest Link, and returns
+     * a partial TimelineItem — any fields it sets will be applied (skipping
+     * fields already set).  Use this to populate `position`, `scroll`, `role`,
+     * or any future TimelineItem fields from format-specific data.
+     */
+    augment(mapper: (item: TimelineItem, link: Link) => Partial<TimelineItem>): void {
+        for (const item of this.flatAll) {
+            const link = this.linkFor(item);
+            if (!link) continue;
+            const patch = mapper(item, link);
+            if (patch.position !== undefined) item.position ??= patch.position;
+            if (patch.scroll   !== undefined) item.scroll   ??= patch.scroll;
+            if (patch.role     !== undefined) item.role     ??= patch.role;
+        }
     }
 
     /**
@@ -100,27 +126,52 @@ export class Timeline {
     }
 
     locate(locator: Locator): TimelineItem | undefined {
-        const href = locator.href.split("#")[0];
-        const time = locator.locations?.time();
-
-        let match: TimelineItem | undefined;
+        const href = locator.href;
+        const time = locator.locations.time();
+        const htmlId = locator.locations.htmlId();
+        const progression = locator.locations.progression;
 
+        // Audio: best-match on t= start time.
         if (time !== undefined) {
             let bestTime = -Infinity;
+            let match: TimelineItem | undefined;
             for (const item of this.flat) {
+                if (!this.itemMatchesHref(item, href)) continue;
                 const t = this.itemStartTime(item, href);
                 if (t !== undefined && t <= time && t > bestTime) {
                     bestTime = t;
                     match = item;
                 }
             }
+            if (match) return match;
         }
 
-        if (!match) {
-            match = this.flat.find(item => this.bareHrefFromItem(item) === href);
+        // EPUB: match on HTML ID fragment.
+        if (htmlId) {
+            const match = this.flat.find(item => {
+                if (!this.itemMatchesHref(item, href)) return false;
+                return item.references.some(ref => ref.split("#")[1] === htmlId);
+            });
+            if (match) return match;
         }
 
-        return match;
+        // EPUB: best-match on scroll progression.
+        if (progression !== undefined) {
+            let bestScroll = -Infinity;
+            let match: TimelineItem | undefined;
+            for (const item of this.flat) {
+                if (!this.itemMatchesHref(item, href)) continue;
+                const s = this.itemScrollPosition(item);
+                if (s !== undefined && s <= progression && s > bestScroll) {
+                    bestScroll = s;
+                    match = item;
+                }
+            }
+            if (match) return match;
+        }
+
+        // Fallback: bare href match.
+        return this.flat.find(item => this.itemMatchesHref(item, href));
     }
 
     adjacentTo(item: TimelineItem): { previous: TimelineItem | undefined; next: TimelineItem | undefined } {
@@ -133,17 +184,20 @@ export class Timeline {
 
     segmentsForHref(href: string): TimelineItem[] {
         const bare = href.split("#")[0];
-        const item = this.items.find(i => this.bareHrefFromItem(i) === bare);
+        const item = this.items.find(i => this.itemMatchesHref(i, bare));
         if (!item) return [];
         return item.children?.length ? item.children : [item];
     }
 
-    itemAtProgression(href: string, progression: number, duration?: number): TimelineItem | undefined {
+    itemAtProgression(href: string, progression: number): TimelineItem | undefined {
         const bare = href.split("#")[0];
-        const item = this.items.find(i => this.bareHrefFromItem(i) === bare);
+        const item = this.items.find(i => this.itemMatchesHref(i, bare));
         if (!item) return undefined;
         if (!item.children?.length) return item;
 
+        const duration = this._conformsTo.includes(Profile.AUDIOBOOK)
+            ? this.linkFor(item)?.duration
+            : undefined;
         if (duration !== undefined) {
             const time = progression * duration;
             let match: TimelineItem = item;
@@ -158,6 +212,19 @@ export class Timeline {
             return match;
         }
 
+        if (item.children.some(c => c.scroll !== undefined)) {
+            let match: TimelineItem = item;
+            let bestScroll = -Infinity;
+            for (const child of item.children) {
+                const s = this.itemScrollPosition(child);
+                if (s !== undefined && s <= progression && s > bestScroll) {
+                    bestScroll = s;
+                    match = child;
+                }
+            }
+            return match;
+        }
+
         const index = Math.min(Math.floor(progression * item.children.length), item.children.length - 1);
         return item.children[index];
     }
@@ -175,6 +242,11 @@ export class Timeline {
         return this._flat;
     }
 
+    /** All items flattened from _allItems, depth-independent — used by augment(). */
+    private get flatAll(): TimelineItem[] {
+        return this.flattenItems(this._allItems);
+    }
+
     // -------------------------------------------------------------------------
     // TOC title resolution
     // -------------------------------------------------------------------------
@@ -215,8 +287,17 @@ export class Timeline {
         const result: TimelineItem[] = [];
 
         for (const link of tocLinks) {
-            if (Timeline.bareHref(link.href) === bare && link.title && !Timeline.isStartOfResource(link.href)) {
-                const child: TimelineItem = { title: link.title, references: [link.href] };
+            const linkBare = Timeline.bareHref(link.href);
+            // Fragment-only hrefs (e.g. "#t=60" in single-track audio) have no bare href,
+            // so they are associated with the current resource.
+            const matchesBare = linkBare === bare || linkBare === '';
+            if (matchesBare && link.title && !Timeline.isStartOfResource(link.href)) {
+                // Prepend the resource href when the link uses a fragment-only reference.
+                const ref = linkBare === '' ? bare + link.href : link.href;
+                const child: TimelineItem = {
+                    title: link.title,
+                    references: [ref],
+                };
                 linkMap.set(child, link);
                 result.push(child);
             }
@@ -250,7 +331,8 @@ export class Timeline {
         const fragments: Link[] = [];
 
         for (const link of tocLinks) {
-            if (Timeline.bareHref(link.href) === bare && link.title) {
+            const linkBare = Timeline.bareHref(link.href);
+            if ((linkBare === bare || linkBare === '') && link.title) {
                 if (Timeline.isStartOfResource(link.href)) {
                     atStart.push(link);
                 } else {
@@ -319,7 +401,8 @@ export class Timeline {
             const hashIndex = ref.indexOf("#");
             const refHref = hashIndex >= 0 ? ref.slice(0, hashIndex) : ref;
             const refFragment = hashIndex >= 0 ? ref.slice(hashIndex + 1) : undefined;
-            const effectiveHref = refHref || this.bareHrefFromItem(item);
+            // Fragment-only reference (e.g. "#t=60") has no resource of its own — use the queried href.
+            const effectiveHref = refHref || href;
             if (effectiveHref !== href) continue;
             if (!refFragment) return undefined;
             const match = refFragment.match(/(?:^|&)t=([^&]+)/);
@@ -328,17 +411,22 @@ export class Timeline {
         return undefined;
     }
 
-    private bareHrefFromItem(item: TimelineItem): string {
-        return (item.references[0] ?? "").split("#")[0];
+    private itemMatchesHref(item: TimelineItem, href: string): boolean {
+        return item.references.some(ref => {
+            const bare = ref.split("#")[0];
+            // Fragment-only reference (single-track audio) matches the current resource.
+            return bare === href || bare === '';
+        });
     }
 
     private timeFromItem(item: TimelineItem): number | undefined {
-        const ref = item.references[0];
-        if (!ref) return undefined;
-        const fragment = ref.split("#")[1];
-        if (!fragment) return undefined;
-        const match = fragment.match(/(?:^|&)t=([^&]+)/);
-        return match ? parseNptTime(match[1]) : undefined;
+        for (const ref of item.references) {
+            const fragment = ref.split("#")[1];
+            if (!fragment) continue;
+            const match = fragment.match(/(?:^|&)t=([^&]+)/);
+            if (match) return parseNptTime(match[1]);
+        }
+        return undefined;
     }
 
     private ancestorPath(items: TimelineItem[], target: TimelineItem): TimelineItem[] | null {
@@ -352,6 +440,10 @@ export class Timeline {
         return null;
     }
 
+    private itemScrollPosition(item: TimelineItem): number | undefined {
+        return item.scroll;
+    }
+
     private static bareHref(href: string): string {
         return href.split("#")[0];
     }
diff --git a/shared/src/publication/services/timeline/TimelineItem.ts b/shared/src/publication/services/timeline/TimelineItem.ts
index a7d385fa..e1c2eb76 100644
--- a/shared/src/publication/services/timeline/TimelineItem.ts
+++ b/shared/src/publication/services/timeline/TimelineItem.ts
@@ -15,8 +15,8 @@ export interface TimelineItem {
     references: string[];
     /** Structural roles of this entry, e.g. ["chapter"], ["part"]. */
     role?: string[];
-    /** Position number in the reading order context. */
-    position?: number;
+    /** Display-ready position label: formatted start time for audio (e.g. "27:27"), page number for EPUB (e.g. "42"). */
+    position?: string;
     /** Scroll progression within the resource (0 to 1), for entries that start mid-way in a resource. */
     scroll?: number;
     /** Nested entries. */
diff --git a/shared/src/publication/services/timeline/audio.ts b/shared/src/publication/services/timeline/audio.ts
new file mode 100644
index 00000000..e7961f01
--- /dev/null
+++ b/shared/src/publication/services/timeline/audio.ts
@@ -0,0 +1,33 @@
+import { formatNptTime, parseNptTime } from "../../../util/npt.ts";
+import { Timeline, PublicationLike } from "./Timeline.ts";
+
+export function buildAudioTimeline(pub: PublicationLike, opts?: { depth?: number }): Timeline {
+    const t = Timeline.build(pub, opts);
+    const ro = pub.readingOrder.items;
+    const canLabel = ro.length <= 1 || ro.every(l => l.duration !== undefined);
+    if (!canLabel) return t;
+
+    let offset = 0;
+    const offsets = new Map(ro.map(l => {
+        const o = offset;
+        offset += l.duration ?? 0;
+        return [l.href, o];
+    }));
+
+    t.augment((_item, link) => {
+        const href = link.href;
+        const hashIndex = href.indexOf('#');
+        const bare = hashIndex >= 0 ? href.slice(0, hashIndex) : href;
+        const fragment = hashIndex >= 0 ? href.slice(hashIndex + 1) : undefined;
+        const trackOffset = offsets.get(bare) ?? 0;
+        const tMatch = fragment?.match(/(?:^|&)t=([^&]+)/);
+        const seconds = tMatch ? parseNptTime(tMatch[1]) : undefined;
+        return {
+            position: seconds !== undefined
+                ? formatNptTime(trackOffset + seconds)
+                : formatNptTime(trackOffset),
+        };
+    });
+
+    return t;
+}
diff --git a/shared/src/publication/services/timeline/html.ts b/shared/src/publication/services/timeline/html.ts
new file mode 100644
index 00000000..a168f26f
--- /dev/null
+++ b/shared/src/publication/services/timeline/html.ts
@@ -0,0 +1,5 @@
+import { Timeline, PublicationLike } from "./Timeline.ts";
+
+export function buildHtmlTimeline(pub: PublicationLike, opts?: { depth?: number }): Timeline {
+    return Timeline.build(pub, opts);
+}
diff --git a/shared/src/publication/services/timeline/index.ts b/shared/src/publication/services/timeline/index.ts
index a9aeca90..b5a4ac35 100644
--- a/shared/src/publication/services/timeline/index.ts
+++ b/shared/src/publication/services/timeline/index.ts
@@ -1,2 +1,14 @@
+import { Profile } from "../../Profiles.ts";
+import { PublicationLike, Timeline } from "./Timeline.ts";
+import { buildAudioTimeline } from "./audio.ts";
+import { buildHtmlTimeline } from "./html.ts";
+
 export * from './Timeline.ts';
 export * from './TimelineItem.ts';
+export { buildHtmlTimeline } from './html.ts';
+export { buildAudioTimeline } from './audio.ts';
+
+export function buildTimeline(pub: PublicationLike, options?: { depth?: number }): Timeline {
+    const isAudio = pub.metadata?.conformsTo?.includes(Profile.AUDIOBOOK) ?? false;
+    return isAudio ? buildAudioTimeline(pub, options) : buildHtmlTimeline(pub, options);
+}
diff --git a/shared/src/util/npt.ts b/shared/src/util/npt.ts
index a842099c..2213a5d3 100644
--- a/shared/src/util/npt.ts
+++ b/shared/src/util/npt.ts
@@ -49,3 +49,22 @@ export function isNptStartOfResource(raw: string): boolean {
     const t = parseNptTime(raw);
     return t !== undefined && t === 0;
 }
+
+/**
+ * Formats a duration in seconds as a human-readable string suitable for
+ * display in a Table of Contents or progress indicator.
+ *
+ * Outputs "H:MM:SS" when hours > 0, otherwise "M:SS".
+ * Minutes and seconds are always zero-padded to two digits.
+ *
+ * Examples: 0 → "0:00", 90 → "1:30", 3661 → "1:01:01"
+ */
+export function formatNptTime(seconds: number): string {
+    const totalSeconds = Math.floor(seconds);
+    const h = Math.floor(totalSeconds / 3600);
+    const m = Math.floor((totalSeconds % 3600) / 60);
+    const s = totalSeconds % 60;
+    const mm = String(m).padStart(2, "0");
+    const ss = String(s).padStart(2, "0");
+    return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
+}
diff --git a/shared/test/Locator.test.ts b/shared/test/Locator.test.ts
index 34926d24..94be3868 100644
--- a/shared/test/Locator.test.ts
+++ b/shared/test/Locator.test.ts
@@ -42,6 +42,41 @@ describe('Locator Tests', () => {
     expect(Locator.deserialize({ invalid: 'object' })).toBeUndefined();
   });
 
+  it('normalize href fragment into locations.fragments on construction', () => {
+    const locator = new Locator({ href: 'chapter.html#section-2', type: 'text/html' });
+    expect(locator.href).toEqual('chapter.html');
+    expect(locator.locations.fragments).toEqual(['section-2']);
+    expect(locator.locations.htmlId()).toEqual('section-2');
+  });
+
+  it('normalize audio t= fragment into locations on construction', () => {
+    const locator = new Locator({ href: 'audio.mp3#t=27:27', type: 'audio/mpeg' });
+    expect(locator.href).toEqual('audio.mp3');
+    expect(locator.locations.fragments).toEqual(['t=27:27']);
+    expect(locator.locations.time()).toEqual(27 * 60 + 27);
+  });
+
+  it('explicit locations.fragments win over href fragment on construction', () => {
+    const locator = new Locator({
+      href: 'chapter.html#from-href',
+      type: 'text/html',
+      locations: new LocatorLocations({ fragments: ['from-locations'] }),
+    });
+    expect(locator.href).toEqual('chapter.html');
+    expect(locator.locations.fragments).toEqual(['from-locations']);
+  });
+
+  it('construction with no fragment leaves locations intact', () => {
+    const locator = new Locator({
+      href: 'chapter.html',
+      type: 'text/html',
+      locations: new LocatorLocations({ progression: 0.5 }),
+    });
+    expect(locator.href).toEqual('chapter.html');
+    expect(locator.locations.fragments).toEqual([]);
+    expect(locator.locations.progression).toEqual(0.5);
+  });
+
   it('create {Locator} from minimal {Link}', () => {
     expect(new Link({ href: 'http://locator' }).locator).toEqual(
       new Locator({ href: 'http://locator', type: '' })
diff --git a/shared/test/Timeline.test.ts b/shared/test/Timeline.test.ts
index f8215288..c03bdc1e 100644
--- a/shared/test/Timeline.test.ts
+++ b/shared/test/Timeline.test.ts
@@ -1,4 +1,5 @@
-import { Link, Links, Timeline, TimelineItem } from '../src';
+import { Link, Links, Locator, LocatorLocations, Profile, Timeline, TimelineItem } from '../src';
+import { buildTimeline } from '../src/publication/services/timeline/index.ts';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -498,3 +499,176 @@ describe('Timeline – depth', () => {
     ]);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Group 7 – Single-track audio: fragment-only TOC links (#t=N)
+// ---------------------------------------------------------------------------
+
+describe('Timeline – single-track audio (fragment-only references)', () => {
+  it('7.1 fragment-only TOC children are collected and stored with the resource href prepended', () => {
+    const t = build(
+      ro({ href: 'audio.mp3', title: 'Audiobook' }),
+      toc(
+        { href: '#t=60',   title: 'Part 1' },
+        { href: '#t=1800', title: 'Part 2' },
+      ),
+    );
+    expect(clean(t.items)).toEqual([
+      {
+        title: 'Audiobook',
+        references: ['audio.mp3'],
+        children: [
+          { title: 'Part 1', references: ['audio.mp3#t=60'] },
+          { title: 'Part 2', references: ['audio.mp3#t=1800'] },
+        ],
+      },
+    ]);
+  });
+
+  it('7.2 #t=0 fragment-only TOC link is treated as start-of-resource', () => {
+    const t = build(
+      ro({ href: 'audio.mp3' }),
+      toc(
+        { href: '#t=0',  title: 'Audiobook Title' },
+        { href: '#t=60', title: 'Part 1' },
+      ),
+    );
+    expect(clean(t.items)[0]).toMatchObject({ title: 'Audiobook Title' });
+    expect((clean(t.items)[0] as any).children).toEqual([
+      { title: 'Part 1', references: ['audio.mp3#t=60'] },
+    ]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Group 8 – locate()
+// ---------------------------------------------------------------------------
+
+function locator(href: string, locations?: ConstructorParameters<typeof LocatorLocations>[0]): Locator {
+  return new Locator({ href, type: '', locations: locations ? new LocatorLocations(locations) : undefined });
+}
+
+describe('Timeline – locate()', () => {
+  // ── EPUB ──────────────────────────────────────────────────────────────────
+
+  it('8.1 EPUB: matches on HTML ID fragment', () => {
+    const t = build(
+      ro({ href: 'chapter1.html', title: 'Chapter 1' }),
+      toc(
+        { href: 'chapter1.html#intro',   title: 'Intro' },
+        { href: 'chapter1.html#section', title: 'Section' },
+      ),
+    );
+    const item = t.locate(locator('chapter1.html', { fragments: ['section'] }));
+    expect(item?.title).toBe('Section');
+  });
+
+  it('8.2 EPUB: href with fragment is normalized and matched', () => {
+    const t = build(
+      ro({ href: 'chapter1.html', title: 'Chapter 1' }),
+      toc({ href: 'chapter1.html#intro', title: 'Intro' }),
+    );
+    // Fragment in href should be normalized into locations by the Locator constructor.
+    const item = t.locate(locator('chapter1.html#intro'));
+    expect(item?.title).toBe('Intro');
+  });
+
+  it('8.3 EPUB: falls back to bare href when no fragment matches', () => {
+    const t = build(
+      ro({ href: 'chapter1.html', title: 'Chapter 1' }),
+    );
+    const item = t.locate(locator('chapter1.html'));
+    expect(item?.title).toBe('Chapter 1');
+  });
+
+  it('8.4 EPUB: returns undefined for unknown href', () => {
+    const t = build(ro({ href: 'chapter1.html', title: 'Chapter 1' }));
+    expect(t.locate(locator('unknown.html'))).toBeUndefined();
+  });
+
+  it('8.5 EPUB: matches on scroll progression', () => {
+    const positionsList = [
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ fragments: ['intro'],   progression: 0.0, position: 1 }) }),
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ fragments: ['section'], progression: 0.5, position: 5 }) }),
+    ];
+    const t = buildTimeline({
+      readingOrder: ro({ href: 'chapter1.html', title: 'Chapter 1' }),
+      toc: toc(
+        { href: 'chapter1.html#intro',   title: 'Intro' },
+        { href: 'chapter1.html#section', title: 'Section' },
+      ),
+      metadata: { conformsTo: [Profile.EPUB] },
+    });
+    t.augment((item, link) => {
+      const hashIndex = link.href.indexOf('#');
+      const bare = hashIndex >= 0 ? link.href.slice(0, hashIndex) : link.href;
+      const fragment = hashIndex >= 0 ? link.href.slice(hashIndex + 1) : undefined;
+      const entries = positionsList.filter(p => p.href === bare);
+      if (!entries.length) return {};
+      const atFragment = fragment
+        ? entries.find(p => p.locations.fragments[0] === fragment)
+        : undefined;
+      return { scroll: atFragment?.locations.progression };
+    });
+    const item = t.locate(locator('chapter1.html', { progression: 0.6 }));
+    expect(item?.title).toBe('Section');
+  });
+
+  // ── Audio multi-track ─────────────────────────────────────────────────────
+
+  it('8.6 audio multi-track: best-match on t= start time', () => {
+    const t = build(
+      ro({ href: 'track1.mp3', title: 'Track 1' }),
+      toc(
+        { href: 'track1.mp3#t=0',   title: 'Intro' },
+        { href: 'track1.mp3#t=60',  title: 'Part 1' },
+        { href: 'track1.mp3#t=120', title: 'Part 2' },
+      ),
+    );
+    const item = t.locate(locator('track1.mp3', { fragments: ['t=90'] }));
+    expect(item?.title).toBe('Part 1');
+  });
+
+  it('8.7 audio multi-track: does not match items from a different track', () => {
+    const t = build(
+      ro({ href: 'track1.mp3', title: 'Track 1' }, { href: 'track2.mp3', title: 'Track 2' }),
+      toc(
+        { href: 'track1.mp3#t=60', title: 'Part 1' },
+        { href: 'track2.mp3#t=60', title: 'Part 2' },
+      ),
+    );
+    const item = t.locate(locator('track2.mp3', { fragments: ['t=90'] }));
+    expect(item?.title).toBe('Part 2');
+  });
+
+  // ── Audio single-track ────────────────────────────────────────────────────
+
+  it('8.8 audio single-track: best-match on t= start time with fragment-only references in TOC', () => {
+    const t = build(
+      ro({ href: 'audio.mp3', title: 'Audiobook' }),
+      toc(
+        { href: '#t=0',   title: 'Intro' },
+        { href: '#t=60',  title: 'Part 1' },
+        { href: '#t=120', title: 'Part 2' },
+      ),
+    );
+    const item = t.locate(locator('audio.mp3', { fragments: ['t=90'] }));
+    expect(item?.title).toBe('Part 1');
+  });
+
+  // ── Multi-reference items ─────────────────────────────────────────────────
+
+  it('8.9 multi-reference: item is matched via its second reference', () => {
+    const t = Timeline.build({ readingOrder: ro({ href: 'track1.mp3', title: 'Track 1' }, { href: 'track2.mp3', title: 'Track 2' }) });
+    // Manually inject an item with two references (external consumer use case).
+    const multiItem: TimelineItem = {
+      title: 'Spanning Part',
+      references: ['track1.mp3#t=3600', 'track2.mp3#t=0'],
+    };
+    const customTimeline = new Timeline(
+      [multiItem],
+      new Map([[multiItem, new Link({ href: 'track1.mp3' })]]),
+    );
+    expect(customTimeline.locate(locator('track2.mp3', { fragments: ['t=30'] }))?.title).toBe('Spanning Part');
+  });
+});
diff --git a/shared/test/TimelineItem.test.ts b/shared/test/TimelineItem.test.ts
new file mode 100644
index 00000000..909cfac9
--- /dev/null
+++ b/shared/test/TimelineItem.test.ts
@@ -0,0 +1,192 @@
+import { Link, Links, Locator, LocatorLocations, Profile } from '../src';
+import { buildTimeline } from '../src/publication/services/timeline/index.ts';
+
+function ro(href: string, title?: string): Links {
+  return new Links([new Link({ href, title })]);
+}
+
+function buildLink(href: string, title?: string, children?: Link[]): Link {
+  return new Link({
+    href,
+    title,
+    children: children ? new Links(children) : undefined,
+  });
+}
+
+function buildHtml(
+  roHref: string,
+  roTitle: string,
+  tocLinks: Link[],
+  positionsList: Locator[],
+) {
+  const t = buildTimeline({
+    readingOrder: ro(roHref, roTitle),
+    toc: new Links(tocLinks),
+    metadata: { conformsTo: [Profile.EPUB] },
+  });
+  t.augment((item, link) => {
+    const hashIndex = link.href.indexOf('#');
+    const bare = hashIndex >= 0 ? link.href.slice(0, hashIndex) : link.href;
+    const fragment = hashIndex >= 0 ? link.href.slice(hashIndex + 1) : undefined;
+    const entries = positionsList.filter(p => p.href === bare);
+    if (!entries.length) return {};
+    const atFragment = fragment
+      ? entries.find(p => p.locations.fragments[0] === fragment)
+      : undefined;
+    const candidate = atFragment ?? entries.reduce((min, p) =>
+      (p.locations.position ?? Infinity) < (min.locations.position ?? Infinity) ? p : min
+    );
+    return {
+      position: candidate.locations.position !== undefined
+        ? String(candidate.locations.position) : undefined,
+      scroll: atFragment?.locations.progression,
+    };
+  });
+  return t;
+}
+
+// ---------------------------------------------------------------------------
+// position label
+// ---------------------------------------------------------------------------
+
+describe('TimelineItem – position label', () => {
+  it('reading order item gets lowest page number when multiple positions exist for the resource', () => {
+    const positions = [
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ position: 6, progression: 0.2 }) }),
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ position: 5, progression: 0.1 }) }),
+    ];
+    const t = buildHtml('chapter1.html', 'Chapter 1', [], positions);
+    expect(t.items[0].position).toBe('5');
+  });
+
+  it('reading order item has no position label when positions list is absent', () => {
+    const t = buildTimeline({
+      readingOrder: ro('chapter1.html', 'Chapter 1'),
+      metadata: { conformsTo: [Profile.EPUB] },
+    });
+    expect(t.items[0].position).toBeUndefined();
+  });
+
+  it('audio single-track: parent starts at 0:00, children get publication-relative time labels', () => {
+    const t = buildTimeline({
+      readingOrder: new Links([new Link({ href: 'track.mp3', title: 'Track', duration: 7200 })]),
+      toc: new Links([
+        buildLink('track.mp3#t=1647', 'Part 1'),
+        buildLink('track.mp3#t=3600', 'Part 2'),
+      ]),
+      metadata: { conformsTo: [Profile.AUDIOBOOK] },
+    });
+    expect(t.items[0].position).toBe('0:00');
+    expect(t.items[0].children?.[0].position).toBe('27:27');
+    expect(t.items[0].children?.[1].position).toBe('1:00:00');
+  });
+
+  it('audio multi-track: any missing duration suppresses all time labels', () => {
+    const t = buildTimeline({
+      readingOrder: new Links([
+        new Link({ href: 'track1.mp3', title: 'Track 1' }), // no duration
+        new Link({ href: 'track2.mp3', title: 'Track 2', duration: 1800 }),
+      ]),
+      toc: new Links([
+        buildLink('track1.mp3#t=60',  'Section A'),
+        buildLink('track2.mp3#t=120', 'Section B'),
+      ]),
+      metadata: { conformsTo: [Profile.AUDIOBOOK] },
+    });
+    expect(t.items[0].children?.[0].position).toBeUndefined();
+    expect(t.items[1].position).toBeUndefined();
+    expect(t.items[1].children?.[0].position).toBeUndefined();
+  });
+
+  it('audio multi-track: parent and children get publication-relative time labels', () => {
+    const t = buildTimeline({
+      readingOrder: new Links([
+        new Link({ href: 'track1.mp3', title: 'Track 1', duration: 3600 }),
+        new Link({ href: 'track2.mp3', title: 'Track 2', duration: 1800 }),
+      ]),
+      toc: new Links([
+        buildLink('track1.mp3#t=600', 'Section A'),
+        buildLink('track2.mp3#t=120', 'Section B'),
+      ]),
+      metadata: { conformsTo: [Profile.AUDIOBOOK] },
+    });
+    expect(t.items[0].position).toBe('0:00');
+    // Section A: 0 + 600 = 600s = "10:00"
+    expect(t.items[0].children?.[0].position).toBe('10:00');
+    // Track 2 starts at offset 3600s = "1:00:00"
+    expect(t.items[1].position).toBe('1:00:00');
+    // Section B: 3600 + 120 = 3720s = "1:02:00"
+    expect(t.items[1].children?.[0].position).toBe('1:02:00');
+  });
+
+  it('EPUB: parent and children both get page numbers from positions list', () => {
+    const positions = [
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ position: 5, progression: 0.0 }) }),
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ fragments: ['section'], position: 12, progression: 0.5 }) }),
+    ];
+    const t = buildHtml(
+      'chapter1.html', 'Chapter 1',
+      [buildLink('chapter1.html#section', 'Section')],
+      positions,
+    );
+    expect(t.items[0].position).toBe('5');
+    expect(t.items[0].children?.[0].position).toBe('12');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// scroll
+// ---------------------------------------------------------------------------
+
+describe('TimelineItem – scroll', () => {
+  it('TOC child gets scroll progression from matching position', () => {
+    const positions = [
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ fragments: ['intro'],   progression: 0.0, position: 1 }) }),
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ fragments: ['section'], progression: 0.5, position: 5 }) }),
+    ];
+    const t = buildHtml(
+      'chapter1.html', 'Chapter 1',
+      [
+        buildLink('chapter1.html#intro',   'Intro'),
+        buildLink('chapter1.html#section', 'Section'),
+      ],
+      positions,
+    );
+    expect(t.items[0].children?.[0].scroll).toBe(0.0);
+    expect(t.items[0].children?.[1].scroll).toBe(0.5);
+  });
+
+  it('TOC child has no scroll when positions list is absent', () => {
+    const t = buildHtml(
+      'chapter1.html', 'Chapter 1',
+      [buildLink('chapter1.html#section', 'Section')],
+      [],
+    );
+    expect(t.items[0].children?.[0].scroll).toBeUndefined();
+  });
+
+  it('TOC child has no scroll when no position matches its fragment', () => {
+    const positions = [
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ fragments: ['other'], progression: 0.3, position: 3 }) }),
+    ];
+    const t = buildHtml(
+      'chapter1.html', 'Chapter 1',
+      [buildLink('chapter1.html#section', 'Section')],
+      positions,
+    );
+    expect(t.items[0].children?.[0].scroll).toBeUndefined();
+  });
+
+  it('bare-href TOC entries have no scroll (they are start-of-resource)', () => {
+    const positions = [
+      new Locator({ href: 'chapter1.html', type: '', locations: new LocatorLocations({ progression: 0.0, position: 1 }) }),
+    ];
+    const t = buildHtml(
+      'chapter1.html', 'Chapter 1',
+      [buildLink('chapter1.html', 'Chapter 1')],
+      positions,
+    );
+    // Bare-href TOC entries are excluded from children entirely.
+    expect(t.items[0].children).toBeUndefined();
+  });
+});