@linto-ai/transcript-ui-core 0.9.23 → 0.9.24-unstable.202610151359

package/README.md

@@ -22,6 +22,38 @@ import { TranscriptUI, mapApiDocument } from "@linto-ai/transcript-ui-core"
 
 If you don't want `TranscriptUI`'s default screen, `createCore`/`provideCore` and `Layout` are the two pieces it uses internally — use them directly to build your own.
 
+## Driving the layout from the host
+
+Rendering your own header (`<TranscriptUI no-header>`) removes the button that
+opens the sidebar on phones — the sidebar's only entry point at that width.
+Two things on `core` let your own header take that job over:
+
+- `core.isMobile` — readonly ref, true at the width where the layout swaps its
+  permanent sidebar for a drawer. Read it instead of repeating the media query,
+  so your button shows up exactly when the drawer exists.
+- `core.setSidebarOpen(open)` / `core.sidebarOpen` — open or close that drawer.
+
+Opening is **refused** above the breakpoint, silently and without an event:
+only the mobile, single-panel layout mounts a drawer, and an "open" stored
+while none exists would spring it on the user at the next resize. Closing
+always applies.
+
+Two events keep a host in sync without watching a Vue ref — which matters when
+the host isn't a Vue 3 app (a Vue 2 app, or plain JS around the web component,
+can read `core.isMobile.value` but can't subscribe to it):
+
+```js
+core.on("viewport:change", ({ isMobile }) => {
+  sidebarButton.hidden = !isMobile
+})
+
+// Your button is not the only thing that moves the drawer — its own close
+// button, a channel change and leaving phone width also shut it.
+core.on("sidebar:open", ({ open }) => {
+  sidebarButton.setAttribute("aria-expanded", String(open))
+})
+```
+
 ## Turning a transcript into something this package understands
 
 - `mapApiDocument` — for a transcript from the LinTO Studio API.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linto-ai/transcript-ui-core",
-  "version": "0.9.23",
+  "version": "0.9.24-unstable.202610151359",
   "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.23",
-    "@linto-ai/transcript-ui-ui": "0.9.23",
+    "@linto-ai/transcript-ui-i18n": "0.9.24-unstable.202610151359",
+    "@linto-ai/transcript-ui-ui": "0.9.24-unstable.202610151359",
     "lucide-vue-next": "^0.564.0",
     "reka-ui": "^2.8.0",
     "vue-stick-to-bottom": "^1.0.0"

package/src/components/Header.vue

@@ -46,49 +46,54 @@ const metaParts = computed(() =>
 
 <template>
   <header class="editor-header">
-    <div class="header-main">
-      <h1 class="document-title">{{ formattedTitle }}</h1>
-      <div v-if="metaParts.length" class="document-meta">
-        <span
-          v-for="(part, i) in metaParts"
-          :key="i"
-          class="document-meta__part">
-          {{ part }}
-        </span>
+    <!-- Host-provided controls, e.g. a button reopening the app's menu.
+         Outside the padded content: they reach the header's edges. -->
+    <slot name="start" />
+    <div class="header-content">
+      <div class="header-main">
+        <h1 class="document-title">{{ formattedTitle }}</h1>
+        <div v-if="metaParts.length" class="document-meta">
+          <span
+            v-for="(part, i) in metaParts"
+            :key="i"
+            class="document-meta__part">
+            {{ part }}
+          </span>
+        </div>
       </div>
-    </div>
-    <div class="header-right">
-      <Button
-        v-if="isMobile"
-        variant="transparent"
-        :aria-label="t('header.openSidebar')"
-        @click="$emit('toggleSidebar')">
-        <template #icon><EditorIcon name="users" :size="16" /></template>
-      </Button>
-      <template v-if="props.canUndo || props.canRedo">
+      <div class="header-right">
         <Button
-          variant="secondary"
-          :aria-label="t('header.undo')"
-          :disabled="!props.canUndo"
-          @click="$emit('undo')">
-          <template #icon><EditorIcon name="undo" :size="16" /></template>
+          v-if="isMobile"
+          variant="transparent"
+          :aria-label="t('header.openSidebar')"
+          @click="$emit('toggleSidebar')">
+          <template #icon><EditorIcon name="users" :size="16" /></template>
         </Button>
+        <template v-if="props.canUndo || props.canRedo">
+          <Button
+            variant="secondary"
+            :aria-label="t('header.undo')"
+            :disabled="!props.canUndo"
+            @click="$emit('undo')">
+            <template #icon><EditorIcon name="undo" :size="16" /></template>
+          </Button>
+          <Button
+            variant="secondary"
+            :aria-label="t('header.redo')"
+            :disabled="!props.canRedo"
+            @click="$emit('redo')">
+            <template #icon><EditorIcon name="redo" :size="16" /></template>
+          </Button>
+        </template>
         <Button
-          variant="secondary"
-          :aria-label="t('header.redo')"
-          :disabled="!props.canRedo"
-          @click="$emit('redo')">
-          <template #icon><EditorIcon name="redo" :size="16" /></template>
+          variant="primary"
+          :aria-label="t('header.ask')"
+          :disabled="!props.canAsk"
+          @click="$emit('openChat')">
+          <template #icon><EditorIcon name="sparkles" :size="16" /></template>
+          <span v-if="!isMobile">{{ t("header.ask") }}</span>
         </Button>
-      </template>
-      <Button
-        variant="primary"
-        :aria-label="t('header.ask')"
-        :disabled="!props.canAsk"
-        @click="$emit('openChat')">
-        <template #icon><EditorIcon name="sparkles" :size="16" /></template>
-        <span v-if="!isMobile">{{ t("header.ask") }}</span>
-      </Button>
+      </div>
     </div>
   </header>
 </template>
@@ -96,16 +101,22 @@ const metaParts = computed(() =>
 <style scoped>
 .editor-header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  padding: var(--spacing-sm) var(--spacing-lg);
   min-height: var(--header-height);
   border-bottom: 1px solid var(--color-border);
   background-color: var(--color-surface);
   flex-shrink: 0;
 }
 
+.header-content {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-lg);
+}
+
 .header-main {
   display: flex;
   flex-direction: column;
@@ -150,7 +161,7 @@ const metaParts = computed(() =>
 }
 
 @media (max-width: 767px) {
-  .editor-header {
+  .header-content {
     padding: var(--spacing-xs) var(--spacing-md);
   }
 

package/src/components/Layout.vue

@@ -12,22 +12,23 @@ import TranslationSelector from "./TranslationSelector.vue"
 import SelectionActionBar from "./SelectionActionBar.vue"
 import { useIsMobile } from "../composables/useIsMobile"
 import { provideTurnSelection } from "../composables/useTurnSelection"
-import { useCore, type LLMService } from "../core"
+import { useCore, computeCanChat, type LLMService } from "../core"
 
 const props = withDefaults(
   defineProps<{
     showHeader?: boolean
     showVerbatim?: boolean
+    showThemeToggle?: boolean
   }>(),
   {
     showHeader: true,
     showVerbatim: true,
+    showThemeToggle: true,
   },
 )
 
 const core = useCore()
 const { isMobile } = useIsMobile()
-const isSidebarOpen = ref(false)
 
 const shownPanels = ref<string[]>([TRANSCRIPTION_TAB])
 // The ?? never actually triggers — every shownPanels mutation keeps at least one entry — it's just satisfying noUncheckedIndexedAccess.
@@ -87,6 +88,17 @@ const speakerList = computed(() => Array.from(speakers.values()))
 
 const showTranscription = computed(() => activeTab.value === TRANSCRIPTION_TAB)
 
+// Installing the chat plugin offers the chat; the capability says whether
+// this reader may use it. core.chat is a plain field, invisible to Vue: the
+// drawer the plugin registers in the reactive core.components is what makes
+// a late install (the host checks first that its backend offers the chat)
+// show up. core.chat is still read, by the template: it is unset again when
+// the plugin is released, while its component stays registered.
+const chatOffered = computed(
+  () =>
+    !!core.components.chatDrawer && computeCanChat(core.capabilities.value),
+)
+
 // remove split when shrinking in mobile view
 watch(isMobile, (mobile) => {
   if (mobile && isSplit.value) isSplit.value = false
@@ -138,7 +150,7 @@ watch(
       core.audio.currentTime.value = 0
       core.audio.isPlaying.value = false
     }
-    isSidebarOpen.value = false
+    core.setSidebarOpen(false)
   },
 )
 
@@ -164,13 +176,15 @@ function onTranslationChange(translationId: string) {
       :duration="core.activeChannel.value?.duration ?? 0"
       :speaker-count="speakers.size"
       :is-mobile="isMobile"
-      :can-ask="!!core.chat"
+      :can-ask="chatOffered && !!core.chat"
       :can-undo="core.transcriptionEditor?.canUndo.value ?? false"
       :can-redo="core.transcriptionEditor?.canRedo.value ?? false"
-      @toggle-sidebar="isSidebarOpen = !isSidebarOpen"
+      @toggle-sidebar="core.setSidebarOpen(!core.sidebarOpen.value)"
       @open-chat="core.chat?.setDrawerOpen(true)"
       @undo="core.transcriptionEditor?.undo()"
-      @redo="core.transcriptionEditor?.redo()" />
+      @redo="core.transcriptionEditor?.redo()">
+      <template #start><slot name="header-start" /></template>
+    </Header>
     <TabBar
       :model-value="activeTab"
       :show-verbatim="props.showVerbatim"
@@ -203,12 +217,14 @@ function onTranslationChange(translationId: string) {
         :translations="translations"
         :selected-translation-id="activeTranslationId"
         :show-speakers="showTranscription"
+        :show-theme-toggle="props.showThemeToggle"
         @update:selected-channel-id="onChannelChange"
         @update:selected-translation-id="onTranslationChange" />
 
       <SidebarDrawer
         v-if="isMobile && panels.length === 1"
-        v-model:open="isSidebarOpen">
+        :open="core.sidebarOpen.value"
+        @update:open="core.setSidebarOpen($event)">
         <SpeakerSidebar
           :speakers="speakerList"
           :channels="channels"
@@ -216,6 +232,7 @@ function onTranslationChange(translationId: string) {
           :translations="translations"
           :selected-translation-id="activeTranslationId"
           :show-speakers="showTranscription"
+        :show-theme-toggle="props.showThemeToggle"
           @update:selected-channel-id="onChannelChange"
           @update:selected-translation-id="onTranslationChange" />
       </SidebarDrawer>
@@ -235,7 +252,9 @@ function onTranslationChange(translationId: string) {
     <component
       :is="core.components.subtitleFullscreen"
       v-if="core.subtitle?.isFullscreen.value" />
-    <component :is="core.components.chatDrawer" v-if="core.chat" />
+    <component
+      :is="core.components.chatDrawer"
+      v-if="chatOffered && !!core.chat" />
     <div
       v-if="isMobile && (channels.length > 1 || translations.length > 1)"
       class="mobile-selectors">

package/src/components/MicrophoneIllustration.vue

@@ -5,24 +5,24 @@
     xmlns="http://www.w3.org/2000/svg">
     <polygon
       points="331.5,533.5 331.5,520.5 702.5,428.5 705.5,443.5"
-      fill="#3f3d56"
+      fill="currentColor"
       transform="matrix(1.8176168,0,0,1.8176168,-452.14416,-495.30213)" />
     <polygon
       points="564.5,469.5 555.5,452.5 544.5,455.5 542.5,472.5"
-      fill="#3f3d56"
+      fill="currentColor"
       transform="matrix(1.8176168,0,0,1.8176168,-452.14416,-495.30213)" />
     <path
       d="m 317.61655,19.99224 c 0,0 79.97514,-5.452851 101.78654,56.34612 21.81141,61.79897 72.70468,172.67359 92.69846,189.03214 19.99379,16.35855 41.80519,59.98136 38.16995,74.52229"
-      stroke="#3f3d56"
+      stroke="currentColor"
       stroke-miterlimit="10"
       stroke-width="9.08808" />
     <path
       d="m 329.43106,19.083431 c 0,8.532657 -9.0733,15.449743 -23.62902,15.449743 -14.55571,0 -21.8114,-6.917086 -21.8114,-15.449743 0,-8.532657 7.25569,-15.4497427 21.8114,-15.4497427 14.55572,0 23.62902,6.9170857 23.62902,15.4497427 z"
       fill="currentColor"
-      style="fill: #999999" />
+      style="fill: currentColor; opacity: 0.6" />
     <polygon
       points="691.5,439.5 364.5,521.5 377.5,602.5 666.5,602.5"
-      fill="#3f3d56"
+      fill="currentColor"
       transform="matrix(1.8176168,0,0,1.8176168,-456.32371,-492.51252)" />
   </svg>
 </template>

package/src/components/SpeakerLabel.vue

@@ -5,15 +5,22 @@ import { useI18n } from "@linto-ai/transcript-ui-i18n"
 import * as utils from "../utils"
 import type { Speaker } from "../types/editor"
 
-const props = defineProps<{
-  speaker?: Speaker
-  startTime?: number
-  startDate?: number
-  language: string
-  /** The label is wrapped in a clickable trigger (speaker assignment):
-   *  show the hover affordance on the name. */
-  interactive?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    speaker?: Speaker
+    startTime?: number
+    startDate?: number
+    language: string
+    /** The label is wrapped in a clickable trigger (speaker assignment):
+     *  show the hover affordance on the name, and the placeholder that
+     *  invites the click when nobody is assigned yet. */
+    interactive?: boolean
+    /** False on a translation track, where every turn is in the same language
+     *  and the selector already names it. */
+    showLanguage?: boolean
+  }>(),
+  { showLanguage: true },
+)
 
 const { t, locale } = useI18n()
 
@@ -44,9 +51,12 @@ const timestamp = computed<{ text: string; datetime: string } | null>(() => {
 
 const speakerColor = computed(() => props.speaker?.color ?? "transparent")
 
-// A turn always shows a speaker: unnamed ones get an explicit placeholder
-// (assignment lands with the speakers iteration).
-const displayName = computed(() => props.speaker?.name ?? t("speaker.unknown"))
+// The placeholder for an unnamed speaker is an invitation to assign one, so it
+// belongs where the label is a trigger. Read-only — a live session has no
+// speaker assignment — it would only be noise nobody can act on.
+const displayName = computed(
+  () => props.speaker?.name ?? (props.interactive ? t("speaker.unknown") : ""),
+)
 </script>
 
 <template>
@@ -54,13 +64,18 @@ const displayName = computed(() => props.speaker?.name ?? t("speaker.unknown"))
     class="speaker-label"
     :class="{ 'speaker-label--interactive': interactive }">
     <SpeakerIndicator v-if="speaker" :color="speakerColor" />
-    <span class="speaker-name" :class="{ 'speaker-name--unknown': !speaker }">{{
-      displayName
-    }}</span>
+    <span
+      v-if="displayName"
+      class="speaker-name"
+      :class="{ 'speaker-name--unknown': !speaker }"
+      >{{ displayName }}</span
+    >
     <time v-if="timestamp" class="timestamp" :datetime="timestamp.datetime">{{
       timestamp.text
     }}</time>
-    <span v-if="languageName" class="lang">{{ languageName }}</span>
+    <span v-if="showLanguage && languageName" class="lang">{{
+      languageName
+    }}</span>
   </div>
 </template>
 

package/src/components/SpeakerSidebar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { SpeakerIndicator, SwitchToggle, EditableText, SelectableListItem, EditorIcon, SpeakerMenu } from "@linto-ai/transcript-ui-ui"
-import { computed, ref } from "vue"
+import { SpeakerIndicator, SwitchToggle, EditableText, SelectableListItem, EditorIcon, RangeSlider, SpeakerMenu } from "@linto-ai/transcript-ui-ui"
+import { computed, ref, useId } from "vue"
 import ChannelSelector from "./ChannelSelector.vue"
 import TranslationSelector from "./TranslationSelector.vue"
 import MergeDialog from "./molecules/MergeDialog.vue"
 import { useI18n } from "@linto-ai/transcript-ui-i18n"
 import { useCore } from "../core"
+import { useIsMobile } from "../composables/useIsMobile"
 import { renameSpeaker } from "../core/helpers"
 import type { Speaker } from "../types/editor"
 import type { LLMServiceGenerationStatus, TranslationInfo } from "../core"
@@ -18,8 +19,9 @@ withDefaults(
     translations: TranslationInfo[]
     selectedTranslationId: string
     showSpeakers?: boolean
+    showThemeToggle?: boolean
   }>(),
-  { showSpeakers: true },
+  { showSpeakers: true, showThemeToggle: true },
 )
 
 defineEmits<{
@@ -29,6 +31,7 @@ defineEmits<{
 
 const core = useCore()
 const { t } = useI18n()
+const { isMobile } = useIsMobile()
 
 const canEditSpeakers = computed(
   () => core.capabilities.value.speakers === "edit",
@@ -47,6 +50,21 @@ function onToggleTts(value: boolean): void {
   else core.live.disableTTS()
 }
 
+// The switch is a bare checkbox with no built-in name, so the visible text
+// has to be a real <label> pointing at it.
+const partialsToggleId = useId()
+const darkThemeToggleId = useId()
+
+function onToggleDarkTheme(value: boolean): void {
+  core.theme.value = value ? "dark" : "light"
+}
+
+function onTogglePartials(value: boolean): void {
+  if (!core.live) return
+  if (value) core.live.showPartials()
+  else core.live.hidePartials()
+}
+
 const mergeOpen = ref(false)
 const mergeFromId = ref<string | null>(null)
 
@@ -146,32 +164,45 @@ function onSelectVersion(versionNumber: number): void {
           $emit('update:selectedTranslationId', $event)
         " />
     </section>
-    <section v-if="core.subtitle" class="sidebar-section">
+    <!-- Scoped to live sessions for now: the font size is a core setting, but
+         it is only offered where it was asked for. The reading size comes
+         first — it stays meaningful the day this section shows outside a live
+         session, where the partials toggle would not. -->
+    <section v-if="core.live" class="sidebar-section">
+      <h2 class="sidebar-title">{{ t("sidebar.transcription") }}</h2>
+      <RangeSlider
+        v-model="core.transcriptFontSize.value"
+        :label="t('transcription.fontSize')"
+        :min="14"
+        :max="28"
+        :step="2" />
+      <div class="subtitle-toggle">
+        <label class="subtitle-toggle-label" :for="partialsToggleId">
+          {{ t("live.showPartials") }}
+        </label>
+        <SwitchToggle
+          :id="partialsToggleId"
+          :model-value="core.live.partialsVisible.value"
+          @update:model-value="onTogglePartials" />
+      </div>
+    </section>
+    <!-- Subtitles are a desktop surface: Layout only mounts the banner above
+         the breakpoint, and the fullscreen view is opened by the host, not
+         from here. On a phone the whole section is inert — including the font
+         size and watermark controls, which hang off the switch above them. -->
+    <section v-if="core.subtitle && !isMobile" class="sidebar-section">
       <h2 class="sidebar-title">{{ t("sidebar.subtitle") }}</h2>
       <div class="subtitle-toggle">
         <span class="subtitle-toggle-label">{{ t("subtitle.show") }}</span>
         <SwitchToggle v-model="core.subtitle.isVisible.value" />
       </div>
-      <label class="subtitle-slider">
-        <span class="subtitle-slider-label">
-          {{ t("subtitle.fontSize") }}
-          <span class="subtitle-slider-value"
-            >{{ core.subtitle.fontSize.value }}px</span
-          >
-        </span>
-        <input
-          type="range"
-          :min="20"
-          :max="80"
-          :step="2"
-          :value="core.subtitle.fontSize.value"
-          :disabled="!core.subtitle.isVisible.value"
-          @input="
-            core.subtitle!.fontSize.value = Number(
-              ($event.target as HTMLInputElement).value,
-            )
-          " />
-      </label>
+      <RangeSlider
+        v-model="core.subtitle.fontSize.value"
+        :label="t('subtitle.fontSize')"
+        :min="20"
+        :max="80"
+        :step="2"
+        :disabled="!core.subtitle.isVisible.value" />
       <div
         v-if="core.subtitle.watermark && !core.subtitle.watermark.readonly"
         class="subtitle-toggle">
@@ -283,6 +314,20 @@ function onSelectVersion(versionNumber: number): void {
         </li>
       </ul>
     </section>
+    <!-- Its own section, and never gated: the theme belongs to the reader,
+         not to a plugin or to a live session. -->
+    <section v-if="showThemeToggle" class="sidebar-section">
+      <h2 class="sidebar-title">{{ t("sidebar.appearance") }}</h2>
+      <div class="subtitle-toggle">
+        <label class="subtitle-toggle-label" :for="darkThemeToggleId">
+          {{ t("theme.highContrast") }}
+        </label>
+        <SwitchToggle
+          :id="darkThemeToggleId"
+          :model-value="core.theme.value === 'dark'"
+          @update:model-value="onToggleDarkTheme" />
+      </div>
+    </section>
     <MergeDialog
       v-if="canEditSpeakers"
       v-model:open="mergeOpen"
@@ -355,6 +400,10 @@ function onSelectVersion(versionNumber: number): void {
   color: var(--color-text-primary);
 }
 
+label.subtitle-toggle-label {
+  cursor: pointer;
+}
+
 .voice-playback-hint {
   padding: 0 var(--spacing-sm);
   font-size: var(--font-size-xs);
@@ -365,35 +414,6 @@ function onSelectVersion(versionNumber: number): void {
   color: var(--color-danger);
 }
 
-.subtitle-slider {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-sm);
-}
-
-.subtitle-slider-label {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--font-size-sm);
-  color: var(--color-text-primary);
-}
-
-.subtitle-slider-value {
-  color: var(--color-text-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-.subtitle-slider input[type="range"] {
-  width: 100%;
-  accent-color: var(--color-primary);
-}
-
-.subtitle-slider input[type="range"]:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
 /* ── History (LLM generations + versions) ──────────────────────────── */
 
 .sidebar-section--busy {
@@ -416,7 +436,7 @@ function onSelectVersion(versionNumber: number): void {
 }
 
 .history-generation__status--completed {
-  color: var(--color-success, #2e7d32);
+  color: var(--color-success);
 }
 
 .history-generation__status--error {