@linto-ai/transcript-ui-core 0.9.0

package/src/composables/useFollowPlayback.ts

@@ -0,0 +1,124 @@
+import { ref, watch, onMounted, onBeforeUnmount, type Ref } from "vue"
+import { useCore } from "../core"
+import { activeWordRange } from "../utils/wordRange"
+
+const SCROLL_KEYS = new Set([
+  "ArrowUp",
+  "ArrowDown",
+  "PageUp",
+  "PageDown",
+  "Home",
+  "End",
+  " ", // Space
+])
+
+export function useFollowPlayback(
+  scrollContainer: Readonly<Ref<HTMLElement | null | undefined>>,
+) {
+  const core = useCore()
+  const isFollowing = ref(true)
+  const prefersReducedMotion = window.matchMedia(
+    "(prefers-reduced-motion: reduce)",
+  ).matches
+
+  function scrollToActive() {
+    const container = scrollContainer.value
+    if (!container || !isFollowing.value) return
+
+    const behavior: ScrollBehavior = prefersReducedMotion ? "instant" : "smooth"
+
+    // Editor: the active word is located as a character Range (the plain-text
+    // doc has no per-word element) — center its rect in the container.
+    const wordId = core.audio?.activeWordId.value
+    if (wordId) {
+      const range = activeWordRange(container, core, wordId)
+      const rect = range?.getBoundingClientRect()
+      if (rect && (rect.height > 0 || rect.width > 0)) {
+        const containerRect = container.getBoundingClientRect()
+        const delta =
+          rect.top + rect.height / 2 - (containerRect.top + container.clientHeight / 2)
+        container.scrollBy({ top: delta, behavior })
+        return
+      }
+    }
+
+    const turnId = core.audio?.activeTurnId.value
+    const target =
+      // Non-editor list view still tags the active word this way.
+      container.querySelector<HTMLElement>("[data-word-active]") ??
+      (turnId
+        ? container.querySelector<HTMLElement>(`[data-turn-id="${turnId}"]`)
+        : null)
+    if (!target) return
+    target.scrollIntoView({ behavior, block: "center" })
+  }
+
+  // Follow the active word (works with the editor + word timestamps)
+  watch(
+    () => core.audio?.activeWordId.value,
+    (id) => {
+      if (id) scrollToActive()
+    },
+    { flush: "post" },
+  )
+
+  // Fallback: at least follow the turn (no editor or no word timestamps)
+  watch(
+    () => core.audio?.activeTurnId.value,
+    (id) => {
+      if (id) scrollToActive()
+    },
+    { flush: "post" },
+  )
+
+  // Re-enable follow when playback starts
+  watch(
+    () => core.audio?.isPlaying.value,
+    (playing) => {
+      if (playing) isFollowing.value = true
+    },
+  )
+
+  function onManualScroll() {
+    isFollowing.value = false
+  }
+
+  function checkKeyDownIsScroll(e: KeyboardEvent) {
+    if (SCROLL_KEYS.has(e.key)) {
+      onManualScroll()
+    }
+  }
+
+  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)
+  }
+
+  function downScrollListener(handler: (e: Event) => void) {
+    const el = scrollContainer.value
+    if (!el) return
+    el.removeEventListener("wheel", handler)
+    el.removeEventListener("touchstart", handler)
+    el.removeEventListener("pointerdown", handler)
+    el.removeEventListener("keydown", checkKeyDownIsScroll)
+  }
+
+  onMounted(() => {
+    setupScrollListener(onManualScroll)
+  })
+
+  onBeforeUnmount(() => {
+    downScrollListener(onManualScroll)
+  })
+
+  function resumeFollow() {
+    isFollowing.value = true
+    scrollToActive()
+  }
+
+  return { isFollowing, resumeFollow }
+}

package/src/composables/useIsMobile.ts

@@ -0,0 +1,24 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const MOBILE_BREAKPOINT = '(max-width: 767px)'
+
+export function useIsMobile() {
+  const isMobile = ref(false)
+  let mql: MediaQueryList | null = null
+
+  function onChange(e: MediaQueryListEvent) {
+    isMobile.value = e.matches
+  }
+
+  onMounted(() => {
+    mql = window.matchMedia(MOBILE_BREAKPOINT)
+    isMobile.value = mql.matches
+    mql.addEventListener('change', onChange)
+  })
+
+  onBeforeUnmount(() => {
+    mql?.removeEventListener('change', onChange)
+  })
+
+  return { isMobile }
+}

package/src/composables/useTurnSelection.ts

@@ -0,0 +1,169 @@
+import {
+  shallowReactive,
+  computed,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  provide,
+  inject,
+  type Ref,
+  type ComputedRef,
+  type InjectionKey,
+} from "vue"
+import type { Turn, Speaker } from "../types/editor"
+import type { Core } from "../core/types"
+import { formatTime } from "../utils/time"
+
+export interface TurnSelection {
+  readonly count: ComputedRef<number>
+  readonly hasSelection: ComputedRef<boolean>
+  isSelected(turnId: string): boolean
+  toggle(turnId: string): void
+  selectRange(turnId: string): void
+  clear(): void
+  copyText(): Promise<void>
+  copyWithMetadata(): Promise<void>
+}
+
+const turnSelectionKey: InjectionKey<TurnSelection> = Symbol("turnSelection")
+
+function getTurnText(turn: Turn): string {
+  if (turn.words.length > 0) {
+    return turn.words.map((w) => w.text).join(" ")
+  }
+  return turn.text ?? ""
+}
+
+export function provideTurnSelection(
+  turns: Ref<Turn[]> | ComputedRef<Turn[]>,
+  speakers: Map<string, Speaker>,
+  core: Core,
+): TurnSelection {
+  const selectedIds = shallowReactive(new Map<string, true>())
+  let lastToggledId: string | null = null
+
+  const count = computed(() => selectedIds.size)
+  const hasSelection = computed(() => selectedIds.size > 0)
+
+  function isSelected(turnId: string): boolean {
+    return selectedIds.has(turnId)
+  }
+
+  // Selection mode (multi-turn copy) and the editor don't coexist: with the
+  // transcriptionEditor plugin loaded, clicks belong to editing (text) and
+  // speaker assignment (header) — selection never starts.
+  function isSelectionDisabled(): boolean {
+    return core.transcriptionEditor !== undefined
+  }
+
+  function toggle(turnId: string) {
+    if (isSelectionDisabled()) return
+    if (selectedIds.has(turnId)) {
+      selectedIds.delete(turnId)
+    } else {
+      selectedIds.set(turnId, true)
+    }
+    lastToggledId = turnId
+  }
+
+  function selectRange(turnId: string) {
+    if (isSelectionDisabled()) return
+    if (lastToggledId === null) {
+      toggle(turnId)
+      return
+    }
+    const ids = turns.value.map((t) => t.id)
+    const fromIndex = ids.indexOf(lastToggledId)
+    const toIndex = ids.indexOf(turnId)
+    if (fromIndex === -1 || toIndex === -1) {
+      toggle(turnId)
+      return
+    }
+    const start = Math.min(fromIndex, toIndex)
+    const end = Math.max(fromIndex, toIndex)
+    for (let i = start; i <= end; i++) {
+      const id = ids[i]
+      if (id != null) selectedIds.set(id, true)
+    }
+  }
+
+  function clear() {
+    selectedIds.clear()
+    lastToggledId = null
+  }
+
+  async function copyText(): Promise<void> {
+    const selected = turns.value.filter((t) => selectedIds.has(t.id))
+    const text = selected.map(getTurnText).join("\n\n")
+    await navigator.clipboard.writeText(text)
+  }
+
+  async function copyWithMetadata(): Promise<void> {
+    const selected = turns.value.filter((t) => selectedIds.has(t.id))
+    const blocks = selected.map((turn) => {
+      const speaker = turn.speakerId
+        ? speakers.get(turn.speakerId)
+        : undefined
+      const name = speaker?.name ?? ""
+      const time = turn.startTime != null ? formatTime(turn.startTime) : ""
+      const header = [name, time].filter(Boolean).join(" (") + (time ? ")" : "")
+      const text = getTurnText(turn)
+      return header ? `${header}\n${text}` : text
+    })
+    await navigator.clipboard.writeText(blocks.join("\n\n"))
+  }
+
+  // Prune stale IDs when turns change
+  watch(
+    () => turns.value,
+    (currentTurns) => {
+      if (selectedIds.size === 0) return
+      const currentIds = new Set(currentTurns.map((t) => t.id))
+      for (const id of [...selectedIds.keys()]) {
+        if (!currentIds.has(id)) selectedIds.delete(id)
+      }
+    },
+  )
+
+  // Clear selection on channel/translation change
+  const unsubChannel = core.on("channel:change", clear)
+  const unsubTranslation = core.on("translation:change", clear)
+
+  // Escape to clear
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape" && selectedIds.size > 0) {
+      clear()
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener("keydown", onKeydown)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener("keydown", onKeydown)
+    unsubChannel()
+    unsubTranslation()
+  })
+
+  const selection: TurnSelection = {
+    count,
+    hasSelection,
+    isSelected,
+    toggle,
+    selectRange,
+    clear,
+    copyText,
+    copyWithMetadata,
+  }
+
+  provide(turnSelectionKey, selection)
+  return selection
+}
+
+export function useTurnSelection(): TurnSelection {
+  const sel = inject(turnSelectionKey)
+  if (!sel)
+    throw new Error("useTurnSelection() requires provideTurnSelection()")
+  return sel
+}

package/src/constants/speakers.ts

@@ -0,0 +1,14 @@
+/** Tableau 10 palette for speakers — single source of truth.
+ *  10 hues ordered for max contrast between consecutive speakers. */
+export const SPEAKER_COLORS = [
+  "#4E79A7", // bleu
+  "#F28E2B", // orange
+  "#59A14F", // vert
+  "#E15759", // rouge
+  "#B07AA1", // violet
+  "#76B7B2", // turquoise
+  "#FF9DA7", // rose
+  "#9C755F", // brun
+  "#BAB0AC", // gris chaud
+  "#4E4CD2", // indigo
+] as const

package/src/core/createCore.ts

@@ -0,0 +1,162 @@
+import { ref, computed, shallowReactive, type Component } from "vue"
+import type { Channel, EditorDocument } from "../types/editor"
+import type {
+  Core,
+  CoreOptions,
+  CoreEventMap,
+  CoreCapabilities,
+  CorePlugin,
+  TurnEventKey,
+  UISlot,
+} from "./types"
+import { createEventBus } from "./modules/eventBus"
+import { createSpeakersStore } from "./stores/speakersStore"
+import { createChannelStore } from "./stores/channelStore"
+import type { ChannelStore } from "./types"
+import { ensureDocumentSpeakers } from "./helpers/ensureDocumentSpeakers"
+import { ensureSpeakersFromTurns } from "./helpers/ensureSpeakersFromTurns"
+import * as utils from "../utils"
+
+export function createCore(options: CoreOptions = {}): Core {
+  // ── State ──────────────────────────────────────────────────────────
+
+  const title = ref("")
+  const date = ref<string | number | null>(null)
+  const activeChannelId = ref(options.activeChannelId ?? "")
+  const capabilities = ref<CoreCapabilities>(
+    options.capabilities ?? { text: "edit", speakers: "edit" },
+  )
+
+  // ── Event bus ──────────────────────────────────────────────────────
+
+  const { on, off, emit, clear: clearEvents } = createEventBus<CoreEventMap>()
+
+  // ── Speakers ───────────────────────────────────────────────────────
+
+  const speakersInternal = createSpeakersStore(emit)
+  const speakers = speakersInternal
+
+  // ── Channels ───────────────────────────────────────────────────────
+
+  const channels = shallowReactive(new Map<string, ChannelStore>())
+
+  // ── Plugin UI ──────────────────────────────────────────────────────
+
+  const components = shallowReactive<Partial<Record<UISlot, Component>>>({})
+
+  const activeChannel = computed<ChannelStore | undefined>(() =>
+    channels.get(activeChannelId.value) ?? [...channels.values()][0],
+  )
+
+  // ── Scoped events ─────────────────────────────────────────────────
+
+  function onActiveTranslation<K extends TurnEventKey>(
+    event: K,
+    handler: (payload: CoreEventMap[K]) => void,
+  ): () => void {
+    return on(event, (payload) => {
+      const channel = activeChannel.value
+      if (channel && payload.translationId === channel.activeTranslation.value.id) {
+        handler(payload)
+      }
+    })
+  }
+
+  // ── Build from document ────────────────────────────────────────────
+
+  function buildFromDocument(doc: EditorDocument): void {
+    title.value = doc.title
+    date.value = doc.date ?? null
+    speakersInternal.clear()
+    for (const channel of channels.values()) channel.dispose()
+    channels.clear()
+
+    for (const spkRef of ensureDocumentSpeakers(doc)) {
+      speakers.ensure(spkRef.id, spkRef.name)
+    }
+
+    for (const ch of doc.channels) {
+      channels.set(ch.id, createChannelStore(ch, emit, on, speakers.ensure))
+    }
+
+    if (channels.size > 0 && !channels.has(activeChannelId.value)) {
+      activeChannelId.value = channels.keys().next().value!
+    }
+  }
+
+  // ── Document ───────────────────────────────────────────────────────
+
+  function setDocument(doc: EditorDocument): void {
+    utils.validateEditorDocument(doc)
+    buildFromDocument(doc)
+    emit("document:change", undefined as never)
+  }
+
+  // ── Channel ────────────────────────────────────────────────────────
+
+  function setActiveChannel(channelId: string): void {
+    if (channelId === activeChannelId.value) return
+    activeChannelId.value = channelId
+    emit("channel:change", { channelId })
+  }
+
+  function setChannel(channelId: string, channel: Channel): void {
+    if (!channels.has(channelId)) return
+
+    for (const translation of channel.translations) {
+      ensureSpeakersFromTurns(translation.turns, speakers.ensure)
+    }
+
+    channels.get(channelId)?.dispose()
+    channels.set(channelId, createChannelStore(channel, emit, on, speakers.ensure))
+    emit("channel:sync", { channelId })
+  }
+
+  // ── Plugins ────────────────────────────────────────────────────────
+
+  const cleanups: Array<() => void> = []
+
+  function use(plugin: CorePlugin): void {
+    if (plugin.components) Object.assign(components, plugin.components)
+    const cleanup = plugin.install(core)
+    if (cleanup) cleanups.push(cleanup)
+  }
+
+  function destroy(): void {
+    emit("destroy", undefined as never)
+    cleanups.forEach((fn) => fn())
+    cleanups.length = 0
+    for (const channel of channels.values()) channel.dispose()
+    clearEvents()
+  }
+
+  // ── Initial document ──────────────────────────────────────────────
+
+  if (options.document) {
+    buildFromDocument(options.document)
+  }
+
+  // ── Assemble ──────────────────────────────────────────────────────
+
+  const core: Core = {
+    title,
+    date,
+    activeChannelId,
+    capabilities,
+    speakers,
+    channels,
+    activeChannel,
+    components,
+    onActiveTranslation,
+    setDocument,
+    setActiveChannel,
+    setChannel,
+    on,
+    off,
+    emit,
+    use,
+    destroy,
+  }
+
+  return core
+}

package/src/core/helpers/addSpeaker.ts

@@ -0,0 +1,11 @@
+import type { Speaker } from "../../types/editor"
+import { SPEAKER_COLORS } from "../../constants/speakers"
+
+export function addSpeaker(
+  speakers: Map<string, Speaker>,
+  id: string,
+  name: string,
+): Speaker {
+  const color = SPEAKER_COLORS[speakers.size % SPEAKER_COLORS.length]!
+  return { id, name, color }
+}

package/src/core/helpers/countTurnsForSpeaker.ts

@@ -0,0 +1,9 @@
+import type { Core } from "../types"
+
+/** Number of turns assigned to a speaker in the active translation — what the
+ *  user currently sees (merge dialog, speaker menus). */
+export function countTurnsForSpeaker(core: Core, speakerId: string): number {
+  const translation = core.activeChannel.value?.activeTranslation.value
+  if (!translation) return 0
+  return translation.turns.value.filter((t) => t.speakerId === speakerId).length
+}

package/src/core/helpers/createSpeakerAndAssign.ts

@@ -0,0 +1,16 @@
+import type { Core } from "../types"
+import { addSpeaker } from "./addSpeaker"
+import { switchTurnSpeaker } from "./switchTurnSpeaker"
+
+export function createSpeakerAndAssign(
+  core: Core,
+  turnId: string,
+  name: string,
+): string | null {
+  const trimmed = name.trim()
+  if (!trimmed) return null
+  const speaker = addSpeaker(core.speakers.all, crypto.randomUUID(), trimmed)
+  core.speakers.updateOrCreate(speaker)
+  switchTurnSpeaker(core, turnId, speaker.id)
+  return speaker.id
+}

package/src/core/helpers/ensureDocumentSpeakers.ts

@@ -0,0 +1,26 @@
+import type { EditorDocument } from "../../types/editor"
+
+export function ensureDocumentSpeakers(
+  doc: EditorDocument,
+): { id: string; name: string }[] {
+  const seen = new Set<string>()
+  const refs: { id: string; name: string }[] = []
+
+  for (const [id, speaker] of doc.speakers) {
+    seen.add(id)
+    refs.push({ id, name: speaker.name })
+  }
+
+  for (const channel of doc.channels) {
+    for (const translation of channel.translations) {
+      for (const turn of translation.turns) {
+        if (turn.speakerId && !seen.has(turn.speakerId)) {
+          seen.add(turn.speakerId)
+          refs.push({ id: turn.speakerId, name: turn.speakerId })
+        }
+      }
+    }
+  }
+
+  return refs
+}

package/src/core/helpers/ensureSpeaker.ts

@@ -0,0 +1,12 @@
+import type { Speaker } from "../../types/editor"
+import { addSpeaker } from "./addSpeaker"
+
+export function ensureSpeaker(
+  speakers: Map<string, Speaker>,
+  speakerId: string | null,
+  name?: string,
+): Speaker | null {
+  if (!speakerId) return null
+  if (speakers.has(speakerId)) return null
+  return addSpeaker(speakers, speakerId, name ?? speakerId)
+}

package/src/core/helpers/ensureSpeakersFromTurns.ts

@@ -0,0 +1,14 @@
+import type { Turn } from "../../types/editor"
+
+export function ensureSpeakersFromTurns(
+  turns: Turn[],
+  ensure: (speakerId: string | null, name?: string) => void,
+): void {
+  const seen = new Set<string>()
+  for (const turn of turns) {
+    if (turn.speakerId && !seen.has(turn.speakerId)) {
+      seen.add(turn.speakerId)
+      ensure(turn.speakerId)
+    }
+  }
+}

package/src/core/helpers/findTurnIndex.ts

@@ -0,0 +1,5 @@
+import type { Turn } from "../../types/editor"
+
+export function findTurnIndex(turns: Turn[], turnId: string): number {
+  return turns.findIndex((t) => t.id === turnId)
+}

package/src/core/helpers/index.ts

@@ -0,0 +1,15 @@
+export { addSpeaker } from "./addSpeaker"
+export { ensureSpeaker } from "./ensureSpeaker"
+export { speakerEquals } from "./speakerEquals"
+export { findTurnIndex } from "./findTurnIndex"
+export { insertTurn } from "./insertTurn"
+export { patchTurn } from "./patchTurn"
+export { removeTurn } from "./removeTurn"
+export { updateTurnWords } from "./updateTurnWords"
+export { ensureDocumentSpeakers } from "./ensureDocumentSpeakers"
+export { ensureSpeakersFromTurns } from "./ensureSpeakersFromTurns"
+export { renameSpeaker } from "./renameSpeaker"
+export { switchTurnSpeaker } from "./switchTurnSpeaker"
+export { createSpeakerAndAssign } from "./createSpeakerAndAssign"
+export { mergeSpeakers } from "./mergeSpeakers"
+export { countTurnsForSpeaker } from "./countTurnsForSpeaker"

package/src/core/helpers/insertTurn.ts

@@ -0,0 +1,5 @@
+import type { Turn } from "../../types/editor"
+
+export function insertTurn(turns: Turn[], turn: Turn): Turn[] {
+  return [...turns, turn]
+}

package/src/core/helpers/mergeSpeakers.ts

@@ -0,0 +1,29 @@
+import type { Core } from "../types"
+
+/** Reassign every turn of the merged-away speaker to the surviving one, then
+ *  drop the merged-away speaker — in that order, so no turn ever references a
+ *  removed speaker. */
+export function mergeSpeakers(
+  core: Core,
+  fromSpeakerId: string,
+  toSpeakerId: string,
+): void {
+  if (fromSpeakerId === toSpeakerId) return
+  if (
+    !core.speakers.all.has(fromSpeakerId) ||
+    !core.speakers.all.has(toSpeakerId)
+  ) {
+    return
+  }
+
+  for (const channel of core.channels.values()) {
+    for (const translation of channel.translations.values()) {
+      for (const turn of translation.turns.value) {
+        if (turn.speakerId === fromSpeakerId) {
+          translation.updateTurn(turn.id, { speakerId: toSpeakerId })
+        }
+      }
+    }
+  }
+  core.speakers.delete(fromSpeakerId)
+}

package/src/core/helpers/patchTurn.ts

@@ -0,0 +1,15 @@
+import type { Turn } from "../../types/editor"
+import { findTurnIndex } from "./findTurnIndex"
+
+export function patchTurn(
+  turns: Turn[],
+  turnId: string,
+  patch: Partial<Turn>,
+): { turns: Turn[]; updated: Turn } | null {
+  const idx = findTurnIndex(turns, turnId)
+  if (idx === -1) return null
+  const updated = { ...turns[idx]!, ...patch, id: turnId }
+  const next = turns.slice()
+  next[idx] = updated
+  return { turns: next, updated }
+}

package/src/core/helpers/prependTurns.ts

@@ -0,0 +1,5 @@
+import type { Turn } from "../../types/editor"
+
+export function prependTurns(existing: Turn[], newTurns: Turn[]): Turn[] {
+  return [...newTurns, ...existing]
+}

package/src/core/helpers/removeTurn.ts

@@ -0,0 +1,8 @@
+import type { Turn } from "../../types/editor"
+import { findTurnIndex } from "./findTurnIndex"
+
+export function removeTurn(turns: Turn[], turnId: string): Turn[] | null {
+  const idx = findTurnIndex(turns, turnId)
+  if (idx === -1) return null
+  return turns.filter((_, i) => i !== idx)
+}