@linto-ai/transcript-ui-core 0.9.0

package/src/components/TranslationSelector.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { FormInput } from "@linto-ai/transcript-ui-ui"
+import { computed } from "vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import { buildTranslationItems } from "../utils/intl"
+import type { TranslationInfo } from "../core/types"
+
+const props = defineProps<{
+  translations: TranslationInfo[]
+  selectedTranslationId: string
+}>()
+
+const emit = defineEmits<{
+  "update:selectedTranslationId": [id: string]
+}>()
+
+const { t, locale } = useI18n()
+
+const options = computed(() =>
+  buildTranslationItems(
+    props.translations,
+    locale.value,
+    t("sidebar.originalLanguage"),
+    t("language.wildcard"),
+    t("sidebar.bilingual"),
+  ),
+)
+
+const field = computed(() => ({ label: t("sidebar.translationSelectLabel") }))
+</script>
+
+<template>
+  <FormInput
+    select
+    :field="field"
+    :options="options"
+    :model-value="selectedTranslationId"
+    @update:model-value="emit('update:selectedTranslationId', $event)" />
+</template>

package/src/components/VerbatimPanel.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { DocumentArticle, type DownloadFormat, DownloadMenu } from "@linto-ai/transcript-ui-ui"
+import { computed } from "vue"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import { useCore } from "../core"
+import * as utils from "../utils"
+
+const core = useCore()
+const { locale } = useI18n()
+
+const formats: DownloadFormat[] = [
+  { format: "docx", labelKey: "format.docx" },
+  { format: "pdf", labelKey: "format.pdf" },
+  { format: "txt", labelKey: "format.txt" },
+  { format: "json", labelKey: "format.json" },
+  { format: "whisperx", labelKey: "format.whisperx" },
+]
+
+const turns = computed(
+  () => core.activeChannel.value?.activeTranslation.value.turns.value ?? [],
+)
+const speakers = core.speakers.all
+
+const title = computed(() => core.title.value)
+
+const displayNames = computed(
+  () => new Intl.DisplayNames([locale.value], { type: "language" }),
+)
+
+function speakerName(id: string | null): string {
+  if (id == null) return ""
+  return speakers.get(id)?.name ?? id
+}
+
+function languageName(code: string): string {
+  if (!code) return ""
+  return displayNames.value.of(code) ?? code
+}
+
+function turnText(turn: {
+  text: string | null
+  words: { text: string }[]
+}): string {
+  if (turn.text != null) return turn.text
+  return turn.words.map((w) => w.text).join(" ")
+}
+
+function onExport(format?: string): void {
+  if (!format) return
+  core.emit("verbatim:export", { format })
+}
+</script>
+
+<template>
+  <section class="verbatim-panel">
+    <DocumentArticle :formats="formats" @export="onExport">
+      <template #toolbar-right>
+        <DownloadMenu :formats="formats" @select="onExport" />
+      </template>
+
+      <article class="verbatim-panel__content">
+        <header class="verbatim-panel__header">
+          <h1 class="verbatim-panel__doc-title">{{ title }}</h1>
+        </header>
+
+        <ul class="verbatim-panel__turns">
+          <li v-for="turn in turns" :key="turn.id" class="verbatim-panel__turn">
+            <header class="verbatim-panel__turn-header">
+              <strong class="verbatim-panel__speaker-name">
+                {{ speakerName(turn.speakerId) }}
+              </strong>
+              <span v-if="turn.startTime != null" class="verbatim-panel__meta">
+                <span class="verbatim-panel__sep" aria-hidden="true">·</span>
+                <time>{{ utils.formatTime(turn.startTime) }}</time>
+              </span>
+              <span v-if="turn.language" class="verbatim-panel__meta">
+                <span class="verbatim-panel__sep" aria-hidden="true">·</span>
+                {{ languageName(turn.language) }}
+              </span>
+            </header>
+            <p class="verbatim-panel__text">{{ turnText(turn) }}</p>
+          </li>
+        </ul>
+      </article>
+    </DocumentArticle>
+  </section>
+</template>
+
+<style scoped>
+.verbatim-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.verbatim-panel__content {
+  padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.verbatim-panel__header {
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.verbatim-panel__doc-title {
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.verbatim-panel__turns {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.verbatim-panel__turn {
+  display: block;
+}
+
+.verbatim-panel__turn-header {
+  margin: 0 0 var(--spacing-xs);
+  font-size: var(--font-size-base);
+  line-height: 1.4;
+}
+
+.verbatim-panel__speaker-name {
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.verbatim-panel__meta {
+  color: var(--color-text-muted);
+  font-weight: 400;
+}
+
+.verbatim-panel__sep {
+  margin: 0 0.35em;
+}
+
+.verbatim-panel__text {
+  margin: 0;
+  font-size: var(--font-size-base);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+}
+
+@media (max-width: 767px) {
+  .verbatim-panel {
+    padding: var(--spacing-md);
+  }
+}
+</style>

package/src/components/molecules/MergeDialog.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { Button, FormInput } from "@linto-ai/transcript-ui-ui"
+import { ref, computed, watch, useTemplateRef } from "vue"
+import { useCore } from "../../core"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import { countTurnsForSpeaker, mergeSpeakers } from "../../core/helpers"
+
+const props = defineProps<{
+  open: boolean
+  fromSpeakerId: string | null
+}>()
+
+const emit = defineEmits<{
+  "update:open": [value: boolean]
+}>()
+
+const core = useCore()
+const { t } = useI18n()
+
+const dialogRef = useTemplateRef<HTMLDialogElement>("dialog")
+const targetId = ref<string>("")
+
+const fromSpeaker = computed(() =>
+  props.fromSpeakerId ? core.speakers.all.get(props.fromSpeakerId) : undefined,
+)
+
+const candidates = computed(() =>
+  Array.from(core.speakers.all.values()).filter(
+    (s) => s.id !== props.fromSpeakerId,
+  ),
+)
+
+const targetOptions = computed(() =>
+  candidates.value.map((c) => ({ value: c.id, label: c.name })),
+)
+
+const targetField = computed(() => ({
+  label: t("mergeDialog.targetLabel"),
+  required: true,
+}))
+
+const affectedCount = computed(() => {
+  if (!props.fromSpeakerId) return 0
+  return countTurnsForSpeaker(core, props.fromSpeakerId)
+})
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      targetId.value = candidates.value[0]?.id ?? ""
+      dialogRef.value?.showModal()
+    } else {
+      dialogRef.value?.close()
+    }
+  },
+)
+
+function onClose(): void {
+  emit("update:open", false)
+}
+
+function onConfirm(): void {
+  if (!props.fromSpeakerId || !targetId.value) return
+  // Through the plugin when present (server round-trip, applied at the
+  // broadcast); direct store helper otherwise (plugin-less embeds).
+  if (core.transcriptionEditor) {
+    core.transcriptionEditor.replaceSpeaker(props.fromSpeakerId, targetId.value)
+  } else {
+    mergeSpeakers(core, props.fromSpeakerId, targetId.value)
+  }
+  emit("update:open", false)
+}
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    class="merge-dialog"
+    @close="onClose"
+    @cancel.prevent="onClose">
+    <form v-if="fromSpeaker" class="merge-dialog-form" @submit.prevent="onConfirm">
+      <h2 class="merge-dialog-title">
+        {{ t('mergeDialog.title') }}
+      </h2>
+      <p class="merge-dialog-description">
+        <strong>{{ fromSpeaker.name }}</strong> · {{ affectedCount }}
+        {{ t('mergeDialog.turnsAffected') }}
+      </p>
+      <FormInput
+        select
+        :field="targetField"
+        :options="targetOptions"
+        v-model="targetId" />
+      <div class="merge-dialog-actions">
+        <Button variant="tertiary" type="button" @click="onClose">
+          {{ t('mergeDialog.cancel') }}
+        </Button>
+        <Button variant="primary" type="submit" :disabled="!targetId">
+          {{ t('mergeDialog.confirm') }}
+        </Button>
+      </div>
+    </form>
+  </dialog>
+
+</template>
+
+<style scoped>
+.merge-dialog {
+  margin: auto;
+  max-width: 420px;
+  width: 90vw;
+  padding: var(--spacing-lg);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  box-shadow: 0 16px 48px color-mix(in srgb, var(--color-text-primary) 20%, transparent);
+}
+
+.merge-dialog::backdrop {
+  /* No backdrop-filter: a full-viewport backdrop blur is a large WebRender
+     render target; the dim background alone is enough. */
+  background-color: color-mix(in srgb, var(--color-text-primary) 35%, transparent);
+}
+
+.merge-dialog-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.merge-dialog-title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+}
+
+.merge-dialog-description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.merge-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/components/molecules/MergeTurnsButton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Button } from "@linto-ai/transcript-ui-ui"
+import { computed } from "vue"
+import { useCore } from "../../core"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+
+// Always-visible merge control between two adjacent turns. A lock on either
+// side DISABLES it (the layout must not jump, and the lock badge tells why);
+// the server ack stays the authority on races.
+const props = defineProps<{
+  firstTurnId: string
+  secondTurnId: string
+}>()
+
+const core = useCore()
+const { t } = useI18n()
+
+const canShow = computed(
+  () =>
+    core.transcriptionEditor !== undefined &&
+    core.capabilities.value.text === "edit",
+)
+
+const isDisabled = computed(
+  () =>
+    !!core.transcriptionEditor?.getTurnLock(props.firstTurnId) ||
+    !!core.transcriptionEditor?.getTurnLock(props.secondTurnId),
+)
+
+function onMergeClick() {
+  core.transcriptionEditor!.mergeTurns(props.firstTurnId, props.secondTurnId)
+}
+</script>
+
+<template>
+  <div v-if="canShow" class="merge-turns">
+    <Button
+      size="sm"
+      variant="inverse"
+      icon="merge"
+      :disabled="isDisabled"
+      :aria-label="t('transcription.mergeTurns')"
+      @click.stop="onMergeClick" />
+  </div>
+</template>
+
+<style scoped>
+.merge-turns {
+  display: flex;
+  justify-content: center;
+}
+
+/* Compact: the control sits in the gap between turns without inflating it. */
+.merge-turns :deep(.editor-btn) {
+  --btn-height: 22px;
+}
+</style>

package/src/components/molecules/SpeakerPopover.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { PopoverList, SpeakerIndicator, Button, FormInput, type FormField } from "@linto-ai/transcript-ui-ui"
+import { ref, computed, nextTick, useTemplateRef, watch } from "vue"
+import { useCore } from "../../core"
+import { useI18n } from "@linto-ai/transcript-ui-i18n"
+import { switchTurnSpeaker, createSpeakerAndAssign } from "../../core/helpers"
+import type { Speaker } from "../../types/editor"
+
+const props = defineProps<{
+  turnId: string
+  currentSpeakerId: string | null
+  // When the popover is mounted lazily on click, open it immediately.
+  initialOpen?: boolean
+}>()
+
+const core = useCore()
+const { t } = useI18n()
+
+const isOpen = ref(props.initialOpen ?? false)
+const isCreatingNew = ref(false)
+const newName = ref("")
+const newInputRef = useTemplateRef<{ focus: () => void }>("newInput")
+
+const speakers = computed(() => Array.from(core.speakers.all.values()))
+
+const newSpeakerField = computed<FormField>(() => ({
+  placeholder: t("speakerPopover.newSpeakerPlaceholder"),
+  customParams: { "aria-label": t("speakerPopover.newSpeaker") },
+}))
+
+watch(isOpen, (open) => {
+  if (!open) {
+    isCreatingNew.value = false
+    newName.value = ""
+  }
+})
+
+async function startCreatingNew(): Promise<void> {
+  isCreatingNew.value = true
+  newName.value = ""
+  await nextTick()
+  newInputRef.value?.focus()
+}
+
+function onPickExisting(speaker: Speaker): void {
+  if (speaker.id !== props.currentSpeakerId) {
+    // Through the plugin when present (server round-trip, applied at the
+    // broadcast); direct store helper otherwise (plugin-less embeds).
+    if (core.transcriptionEditor) {
+      core.transcriptionEditor.updateTurnSpeaker(props.turnId, {
+        speakerId: speaker.id,
+      })
+    } else {
+      switchTurnSpeaker(core, props.turnId, speaker.id)
+    }
+  }
+  isOpen.value = false
+}
+
+function submitNew(): void {
+  const trimmed = newName.value.trim()
+  if (!trimmed) {
+    isCreatingNew.value = false
+    return
+  }
+  if (core.transcriptionEditor) {
+    core.transcriptionEditor.updateTurnSpeaker(props.turnId, {
+      speakerName: trimmed,
+    })
+  } else {
+    createSpeakerAndAssign(core, props.turnId, trimmed)
+  }
+  isOpen.value = false
+}
+
+function onNewKeydown(e: KeyboardEvent): void {
+  // Prevent DropdownMenu typeahead / keyboard nav from hijacking the input.
+  // Enter / Escape are handled by FormInput's withConfirmation.
+  e.stopPropagation()
+}
+
+function onCancelNew(): void {
+  isCreatingNew.value = false
+}
+</script>
+
+<template>
+  <PopoverList
+    v-model:open="isOpen"
+    :items="speakers"
+    :item-key="(s) => s.id"
+    :is-current="(s) => s.id === currentSpeakerId"
+    @select="onPickExisting">
+    <template #trigger>
+      <button type="button" class="speaker-popover-trigger">
+        <slot />
+      </button>
+    </template>
+    <template #item="{ item }">
+      <SpeakerIndicator :color="item.color" />
+      <span class="speaker-popover-name">{{ item.name }}</span>
+    </template>
+    <template #footer>
+      <Button
+        v-if="!isCreatingNew"
+        icon="user-plus"
+        variant="transparent"
+        block
+        @click="startCreatingNew">
+        {{ t('speakerPopover.newSpeaker') }}
+      </Button>
+      <FormInput
+        v-else
+        ref="newInput"
+        v-model="newName"
+        :field="newSpeakerField"
+        size="sm"
+        full-width
+        with-confirmation
+        @keydown="onNewKeydown"
+        @on-confirm="submitNew"
+        @on-cancel="onCancelNew" />
+    </template>
+  </PopoverList>
+</template>
+
+<style scoped>
+.speaker-popover-trigger {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-sm);
+}
+
+.speaker-popover-trigger:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.speaker-popover-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

package/src/composables/useEditorReady.ts

@@ -0,0 +1,62 @@
+import { ref, onScopeDispose, type Ref } from "vue"
+import type { Core } from "../core/types"
+
+// Clear the overlay after this long even if no document ever arrives, so a
+// failed load can't leave the editor masked forever.
+const READY_TIMEOUT_MS = 20000
+
+export interface EditorReady {
+  /** True while the editor is loading its first (or a freshly reloaded) document. */
+  isLoading: Ref<boolean>
+  /** Non-null when the editor failed to load. */
+  error: Ref<string | null>
+}
+
+/**
+ * Owns the editor's loading state so embedders don't have to track it.
+ *
+ * The overlay shows until a document is loaded (channels populated). Loading a
+ * new document (`document:change`) resolves it immediately — setDocument is
+ * synchronous — so the reset only matters for the initial mount, where the
+ * host may set the document long after the component tree is up. A timeout
+ * guarantees the overlay is eventually cleared.
+ */
+export function useEditorReady(core: Core): EditorReady {
+  const isLoading = ref(true)
+  const error = ref<string | null>(null)
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  function clearTimer(): void {
+    if (timer !== undefined) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+  }
+
+  function settle(): void {
+    isLoading.value = false
+    clearTimer()
+  }
+
+  function reset(): void {
+    error.value = null
+    if (core.channels.size > 0) {
+      settle()
+      return
+    }
+    isLoading.value = true
+    clearTimer()
+    timer = setTimeout(settle, READY_TIMEOUT_MS)
+  }
+
+  const offDocChange = core.on("document:change", reset)
+
+  reset()
+
+  onScopeDispose(() => {
+    offDocChange()
+    clearTimer()
+  })
+
+  return { isLoading, error }
+}