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

package/package.json

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

package/src/components/Layout.vue

@@ -87,8 +87,7 @@ const speakerList = computed(() => Array.from(speakers.values()))
 
 const showTranscription = computed(() => activeTab.value === TRANSCRIPTION_TAB)
 
-// Two 50/50 panels are unreadable on a phone: leaving split when the
-// viewport shrinks also brings the speaker drawer and the player back.
+// remove split when shrinking in mobile view
 watch(isMobile, (mobile) => {
   if (mobile && isSplit.value) isSplit.value = false
 })
@@ -123,8 +122,11 @@ watch(
   () => props.showVerbatim,
   (canShow) => {
     if (canShow) return
-    const withoutVerbatim = shownPanels.value.filter((id) => id !== VERBATIM_TAB)
-    shownPanels.value = withoutVerbatim.length > 0 ? withoutVerbatim : [TRANSCRIPTION_TAB]
+    const withoutVerbatim = shownPanels.value.filter(
+      (id) => id !== VERBATIM_TAB,
+    )
+    shownPanels.value =
+      withoutVerbatim.length > 0 ? withoutVerbatim : [TRANSCRIPTION_TAB]
   },
 )
 

package/src/composables/useIsMobile.ts

@@ -3,7 +3,9 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
 const MOBILE_BREAKPOINT = '(max-width: 767px)'
 
 export function useIsMobile() {
-  const isMobile = ref(false)
+  // Read right away, not on mount: the first render must already match the
+  // viewport, or a phone briefly mounts desktop-only UI before swapping it.
+  const isMobile = ref(window.matchMedia(MOBILE_BREAKPOINT).matches)
   let mql: MediaQueryList | null = null
 
   function onChange(e: MediaQueryListEvent) {

package/src/index.ts

@@ -66,6 +66,10 @@ export { default as SpeakerLabel } from './components/SpeakerLabel.vue'
 export { default as SpeakerPopover } from './components/molecules/SpeakerPopover.vue'
 export { useEditorReady } from './composables/useEditorReady'
 
+// Phone breakpoint shared with plugins, so their panels switch layout at the
+// same width as the core Layout.
+export { useIsMobile } from './composables/useIsMobile'
+
 // Adapter API LinTO
 export { mapApiDocument } from './adapters/apiAdapter'
 export { mapApiTurns } from './adapters/mapApiTurns'