@linto-ai/transcript-ui-core 0.9.14 → 0.9.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linto-ai/transcript-ui-core",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "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.14",
-    "@linto-ai/transcript-ui-ui": "0.9.14",
+    "@linto-ai/transcript-ui-i18n": "0.9.16",
+    "@linto-ai/transcript-ui-ui": "0.9.16",
     "vue-stick-to-bottom": "^1.0.0"
   }
 }

package/src/components/Layout.vue

@@ -12,7 +12,7 @@ import TranslationSelector from "./TranslationSelector.vue"
 import SelectionActionBar from "./SelectionActionBar.vue"
 import { useIsMobile } from "../composables/useIsMobile"
 import { provideTurnSelection } from "../composables/useTurnSelection"
-import { useCore } from "../core"
+import { useCore, type LLMService } from "../core"
 
 const props = withDefaults(
   defineProps<{
@@ -27,7 +27,41 @@ const core = useCore()
 const { isMobile } = useIsMobile()
 const isSidebarOpen = ref(false)
 
-const activeTab = ref<string>(TRANSCRIPTION_TAB)
+const shownPanels = ref<string[]>([TRANSCRIPTION_TAB])
+// The ?? never actually triggers — every shownPanels mutation keeps at least one entry — it's just satisfying noUncheckedIndexedAccess.
+const activeTab = computed(() => shownPanels.value[0] ?? TRANSCRIPTION_TAB)
+
+const isSplit = computed({
+  get: () => shownPanels.value.length > 1,
+  set: (value: boolean) => {
+    shownPanels.value = value
+      ? [...shownPanels.value, VERBATIM_TAB]
+      : shownPanels.value.filter((id) => id !== VERBATIM_TAB)
+  },
+})
+
+type PanelDescriptor =
+  | { id: string; kind: "transcription" }
+  | { id: string; kind: "verbatim" }
+  | { id: string; kind: "service"; service: LLMService }
+
+// Resolved once per render, not inline in the template: avoids calling
+// core.llmServices.get() twice per item (once to guard, once to bind) with
+// no type-narrowing between the two — a discriminated union the template
+// just switches on instead.
+const panels = computed<PanelDescriptor[]>(() =>
+  shownPanels.value.map((id): PanelDescriptor => {
+    if (id === TRANSCRIPTION_TAB) return { id, kind: "transcription" }
+    if (id === VERBATIM_TAB) return { id, kind: "verbatim" }
+    const service = core.llmServices?.get(id)
+    // Unknown/vanished service id (e.g. llmServices isn't installed):
+    // same fallback as the old single-tab code — show transcription rather
+    // than nothing.
+    return service
+      ? { id, kind: "service", service }
+      : { id, kind: "transcription" }
+  }),
+)
 
 const activeTurns = computed(
   () => core.activeChannel.value?.activeTranslation.value.turns.value ?? [],
@@ -46,11 +80,6 @@ const activeTranslationId = computed(
 const speakerList = computed(() => Array.from(speakers.values()))
 
 const showTranscription = computed(() => activeTab.value === TRANSCRIPTION_TAB)
-const showVerbatim = computed(() => activeTab.value === VERBATIM_TAB)
-const activeService = computed(() => {
-  if (showTranscription.value || showVerbatim.value) return null
-  return core.llmServices?.get(activeTab.value) ?? null
-})
 
 watch(activeTab, (id) => {
   if (!core.llmServices) return
@@ -69,7 +98,7 @@ watch(
       activeTab.value !== VERBATIM_TAB &&
       !core.llmServices?.get(activeTab.value)
     ) {
-      activeTab.value = TRANSCRIPTION_TAB
+      shownPanels.value = [TRANSCRIPTION_TAB]
     }
   },
 )
@@ -115,22 +144,31 @@ function onTranslationChange(translationId: string) {
       @open-chat="core.chat?.setDrawerOpen(true)"
       @undo="core.transcriptionEditor?.undo()"
       @redo="core.transcriptionEditor?.redo()" />
-    <TabBar v-model="activeTab" />
+    <TabBar
+      :model-value="activeTab"
+      @update:model-value="(tab) => (shownPanels = [tab])" />
     <SelectionActionBar v-if="showTranscription" />
-    <main class="editor-body">
-      <TranscriptionPanel
-        v-if="showTranscription"
-        :turns="activeTurns"
-        :speakers="speakers" />
-      <VerbatimPanel v-else-if="showVerbatim" />
-      <component
-        :is="core.components.llmServicePanel"
-        v-else-if="activeService"
-        :key="activeService.id"
-        :service="activeService" />
-      <TranscriptionPanel v-else :turns="activeTurns" :speakers="speakers" />
+    <main
+      class="editor-body"
+      :class="{ 'editor-body--no-sidebar': panels.length > 1 }">
+      <div
+        class="editor-body__panels"
+        :class="{ 'editor-body__panels--split': panels.length > 1 }">
+        <template v-for="panel in panels" :key="panel.id">
+          <TranscriptionPanel
+            v-if="panel.kind === 'transcription'"
+            :turns="activeTurns"
+            :speakers="speakers" />
+          <VerbatimPanel v-else-if="panel.kind === 'verbatim'" />
+          <component
+            :is="core.components.llmServicePanel"
+            v-else
+            :service="panel.service"
+            v-model:split="isSplit" />
+        </template>
+      </div>
       <SpeakerSidebar
-        v-if="!isMobile"
+        v-if="!isMobile && panels.length === 1"
         :speakers="speakerList"
         :channels="channels"
         :selected-channel-id="core.activeChannelId.value"
@@ -140,7 +178,9 @@ function onTranslationChange(translationId: string) {
         @update:selected-channel-id="onChannelChange"
         @update:selected-translation-id="onTranslationChange" />
 
-      <SidebarDrawer v-if="isMobile" v-model:open="isSidebarOpen">
+      <SidebarDrawer
+        v-if="isMobile && panels.length === 1"
+        v-model:open="isSidebarOpen">
         <SpeakerSidebar
           :speakers="speakerList"
           :channels="channels"
@@ -201,6 +241,27 @@ function onTranslationChange(translationId: string) {
   min-height: 0;
 }
 
+/* Split mode: two panels already share the body between them, no room (or
+   need) for the speaker sidebar too — see Layout's panels/isSplit state. */
+.editor-body--no-sidebar {
+  grid-template-columns: 1fr;
+}
+
+.editor-body__panels {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.editor-body__panels > * {
+  flex: 1;
+  min-width: 0;
+}
+
+.editor-body__panels--split > * + * {
+  border-left: 1px solid var(--color-border);
+}
+
 .mobile-selectors {
   display: flex;
   gap: var(--spacing-sm);

package/src/components/TranscriptUI.vue

@@ -55,7 +55,13 @@ defineExpose({ core })
 </template>
 
 <style lang="css">
-@import "@linto-ai/transcript-ui-ui/styles/fonts.css";
+/* NOT fonts.css: a @font-face declared inside a shadow root isn't reliably
+ * applied by browsers (document.fonts never registers it) — dead weight in
+ * the webcomponent bundle specifically, which always runs shadow-DOM'd. The
+ * host declares --font-family's actual font at document level instead (see
+ * variables.css's token doc). A direct, non-shadow-DOM Vue embedder of this
+ * package (no such limitation) can still opt in: `@import
+ * "@linto-ai/transcript-ui-ui/styles/fonts.css"` themselves. */
 @import "@linto-ai/transcript-ui-ui/styles/variables.css";
 @import "@linto-ai/transcript-ui-ui/styles/base.css";
 @import "@linto-ai/transcript-ui-ui/styles/popover-list.css";

package/src/components/VerbatimPanel.vue

@@ -68,7 +68,9 @@ function onExport(format?: string): void {
   <section class="verbatim-panel">
     <DocumentArticle>
       <template #toolbar-right>
-        <DownloadMenu :formats="core.verbatimFormats.value" @select="onExport" />
+        <DownloadMenu
+          :formats="core.verbatimFormats.value"
+          @select="onExport" />
       </template>
 
       <article class="verbatim-panel__content">
@@ -109,7 +111,7 @@ function onExport(format?: string): void {
 }
 
 .verbatim-panel__content {
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: 4rem clamp(1.5rem, 6rem, 8%);
 }
 
 .verbatim-panel__header {
@@ -165,9 +167,4 @@ function onExport(format?: string): void {
   color: var(--color-text-primary);
 }
 
-@media (max-width: 767px) {
-  .verbatim-panel {
-    padding: var(--spacing-md);
-  }
-}
 </style>