@linto-ai/transcript-ui-core 0.9.18 → 0.9.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linto-ai/transcript-ui-core",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "description": "State layer and UI shell for @linto-ai/transcript-ui — core, stores, format adapters, and the TranscriptUI component",
   "keywords": [
     "vue",
@@ -39,8 +39,8 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@linto-ai/transcript-ui-i18n": "0.9.18",
-    "@linto-ai/transcript-ui-ui": "0.9.18",
+    "@linto-ai/transcript-ui-i18n": "0.9.20",
+    "@linto-ai/transcript-ui-ui": "0.9.20",
     "vue-stick-to-bottom": "^1.0.0"
   }
 }

package/src/components/TranscriptionPanel.vue

@@ -176,15 +176,16 @@ onBeforeUnmount(() => {
       </div>
 
       <Transition name="fade-slide">
-        <Button
-          v-if="showResumeButton"
-          size="sm"
-          icon="arrow-down"
-          class="resume-scroll-btn"
-          :aria-label="t('transcription.resumeScroll')"
-          @click="onResumeClick">
-          {{ t("transcription.resumeScroll") }}
-        </Button>
+        <div v-if="showResumeButton" class="resume-scroll-anchor">
+          <Button
+            size="sm"
+            icon="arrow-down"
+            class="resume-scroll-btn"
+            :aria-label="t('transcription.resumeScroll')"
+            @click="onResumeClick">
+            {{ t("transcription.resumeScroll") }}
+          </Button>
+        </div>
       </Transition>
     </div>
   </article>
@@ -231,13 +232,22 @@ onBeforeUnmount(() => {
   font-size: var(--font-size-sm);
 }
 
-/* Resume scroll button */
-.resume-scroll-btn {
+/* Resume scroll button — placement lives on this wrapper, never on the
+   button itself: Button.vue's `.editor-btn` base rule resets `position` via
+   `all: unset` (and, in the webcomponent build, gets re-injected a second
+   time after everything else to reach teleported popovers/dialogs — see
+   packages/webcomponent/src/index.ts), so any positioning put directly on
+   the button is one rebuild away from being silently overridden again. */
+.resume-scroll-anchor {
   position: sticky;
   bottom: var(--spacing-lg);
-  left: 50%;
-  translate: -50% 0;
   z-index: var(--z-sticky);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.resume-scroll-btn {
   /* No backdrop-filter: this button is sticky inside the tall scroll
      container, where a backdrop-filter makes WebRender allocate a render
      target spanning the whole scroll height — multi-GB on a long transcript. */
@@ -257,7 +267,7 @@ onBeforeUnmount(() => {
 .fade-slide-enter-from,
 .fade-slide-leave-to {
   opacity: 0;
-  translate: -50% 8px;
+  translate: 0 8px;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/composables/useFollowPlayback.ts

@@ -79,6 +79,13 @@ export function useFollowPlayback(
     },
   )
 
+  // Re-enable follow on any seek (widget scrub or click-to-read): the user
+  // just told the player where to be, which is exactly what follow means to
+  // track — symmetric with the isPlaying re-enable above.
+  const stopSeekListener = core.on("audio:seek", () => {
+    isFollowing.value = true
+  })
+
   function onManualScroll() {
     isFollowing.value = false
   }
@@ -89,12 +96,14 @@ export function useFollowPlayback(
     }
   }
 
+  // wheel/touchstart/keydown are real scroll gestures — a bare pointerdown
+  // isn't (clicking a word, a button, anything in the panel triggers it
+  // without ever moving the scroll position), so it's deliberately excluded.
   function setupScrollListener(handler: (e: Event) => void) {
     const el = scrollContainer.value
     if (!el) return
     el.addEventListener("wheel", handler, { passive: true })
     el.addEventListener("touchstart", handler, { passive: true })
-    el.addEventListener("pointerdown", handler, { passive: true })
     el.addEventListener("keydown", checkKeyDownIsScroll)
   }
 
@@ -103,7 +112,6 @@ export function useFollowPlayback(
     if (!el) return
     el.removeEventListener("wheel", handler)
     el.removeEventListener("touchstart", handler)
-    el.removeEventListener("pointerdown", handler)
     el.removeEventListener("keydown", checkKeyDownIsScroll)
   }
 
@@ -113,6 +121,7 @@ export function useFollowPlayback(
 
   onBeforeUnmount(() => {
     downScrollListener(onManualScroll)
+    stopSeekListener()
   })
 
   function resumeFollow() {

package/src/core/types.ts

@@ -30,6 +30,10 @@ export interface CoreEventMap {
   "speaker:add": { speaker: Speaker }
   "speaker:remove": { speakerId: string }
   "scroll:top": { translationId: string }
+  /** A seek was requested through core.audio.seekTo (widget scrub or
+   *  click-to-read) — the explicit "take me to this instant" gesture that
+   *  should resume follow-playback scrolling. */
+  "audio:seek": { time: number }
   "translation:sync": { translationId: string }
   "channel:sync": { channelId: string }
   "channel:reset": { channelId: string }