@morscherlab/mld-sdk 0.9.7 → 0.9.8

package/dist/styles.css

@@ -10582,21 +10582,27 @@ html.dark .mld-settings-modal__option-btn--active {
   cursor: not-allowed;
   background-color: var(--bg-tertiary);
 }
-/* Preview */
+/* Preview row */
 .mld-formula-input__preview {
-  padding: 0.375rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   background-color: var(--bg-tertiary);
   border-top: 1px solid var(--border-color);
-  font-size: 1.125rem;
-  min-height: 1.75rem;
+  min-height: 1.5rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.mld-formula-input__preview-formula {
+  font-size: 1rem;
+  line-height: 1.4;
 }
 /* Molecular weight display */
 .mld-formula-input__mw {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: var(--text-muted);
-  padding-left: 0.125rem;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 .mld-formula-input__mw::before {
   content: 'MW: ';
@@ -23504,22 +23510,28 @@ to {
   background-color: var(--bg-tertiary);
 }
 
-/* Preview */
+/* Preview row */
 .mld-formula-input__preview {
-  padding: 0.375rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   background-color: var(--bg-tertiary);
   border-top: 1px solid var(--border-color);
-  font-size: 1.125rem;
-  min-height: 1.75rem;
+  min-height: 1.5rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.mld-formula-input__preview-formula {
+  font-size: 1rem;
+  line-height: 1.4;
 }
 
 /* Molecular weight display */
 .mld-formula-input__mw {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: var(--text-muted);
-  padding-left: 0.125rem;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 .mld-formula-input__mw::before {
   content: 'MW: ';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/FormulaInput.vue

@@ -88,27 +88,28 @@ function handleInput(event: Event) {
       />
 
       <div
-        v-if="showPreview && modelValue"
+        v-if="(showPreview && modelValue) || (showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null)"
         class="mld-formula-input__preview"
       >
-        <template v-for="(part, i) in getParts(modelValue)" :key="i">
-          <span v-if="part.type === 'element'">{{ part.text }}</span>
-          <span v-else-if="part.type === 'subscript'" style="vertical-align: sub; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-          <span v-else-if="part.type === 'superscript'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-          <span v-else-if="part.type === 'paren'" style="color: var(--text-secondary);">{{ part.text }}</span>
-          <span v-else-if="part.type === 'dot'" style="margin: 0 0.125em; color: var(--text-muted);">{{ part.text }}</span>
-          <span v-else-if="part.type === 'charge'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
-        </template>
+        <span v-if="showPreview && modelValue" class="mld-formula-input__preview-formula">
+          <template v-for="(part, i) in getParts(modelValue)" :key="i">
+            <span v-if="part.type === 'element'">{{ part.text }}</span>
+            <span v-else-if="part.type === 'subscript'" style="vertical-align: sub; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+            <span v-else-if="part.type === 'superscript'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+            <span v-else-if="part.type === 'paren'" style="color: var(--text-secondary);">{{ part.text }}</span>
+            <span v-else-if="part.type === 'dot'" style="margin: 0 0.125em; color: var(--text-muted);">{{ part.text }}</span>
+            <span v-else-if="part.type === 'charge'" style="vertical-align: super; font-size: 0.75em; line-height: 0;">{{ part.text }}</span>
+          </template>
+        </span>
+        <span
+          v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
+          class="mld-formula-input__mw"
+        >
+          {{ formatMW(modelValue) }}
+        </span>
       </div>
     </div>
 
-    <div
-      v-if="showMW && modelValue && !getError(modelValue) && getMW(modelValue) !== null"
-      class="mld-formula-input__mw"
-    >
-      {{ formatMW(modelValue) }}
-    </div>
-
     <div
       v-if="modelValue && getError(modelValue)"
       class="mld-formula-input__error-text"

package/src/components/MoleculeInput.vue

@@ -140,39 +140,56 @@ function waitForJSME(): Promise<void> {
   return win.__jsmeLoadPromise__
 }
 
-// JSME initialization
+// Wait for the browser to complete a paint cycle
+function waitForPaint(): Promise<void> {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  })
+}
+
+// JSME initialization — two phases:
+// 1. Load the script (no DOM needed)
+// 2. Reveal the editor div, wait for paint, then mount JSME with explicit px dimensions
 async function initJSME() {
-  if (!containerRef.value || props.readonly) return
+  if (props.readonly) return
 
   try {
     isLoading.value = true
     loadError.value = null
 
-    // Wait for JSME to be ready
+    // Phase 1: load the JSME script (independent of DOM)
     await waitForJSME()
 
-    // Wait for DOM to be ready
+    const win = getJSMEState()
+    if (!win.JSApplet?.JSME) {
+      throw new Error('JSME library not available after loading')
+    }
+
+    // Phase 2: reveal the editor div by clearing the loading state
+    isLoading.value = false
     await nextTick()
 
     if (!containerRef.value) return
 
-    // Get JSME constructor from window
-    const win = getJSMEState()
+    // Wait for a full paint cycle so GWT can measure the container
+    await waitForPaint()
 
-    if (!win.JSApplet?.JSME) {
-      throw new Error('JSME library not available after loading')
-    }
+    if (!containerRef.value) return
+
+    // Use explicit pixel width — GWT cannot resolve percentage widths reliably
+    const rect = containerRef.value.getBoundingClientRect()
+    const width = Math.floor(rect.width) || 400
 
-    // Create JSME instance
+    // Mount JSME into the now-painted container
     const editorId = `jsme-${Date.now()}`
     containerRef.value.id = editorId
 
     const instance = new win.JSApplet.JSME(
       editorId,
-      '100%',
+      `${width}px`,
       `${props.height}px`,
       {
-        options: 'query,hydrogens,paste,depict',
+        options: 'query,hydrogens,paste',
       }
     )
 
@@ -185,8 +202,6 @@ async function initJSME() {
 
     // Set up change callback
     (instance as { setCallBack: (event: string, callback: () => void) => void }).setCallBack('AfterStructureModified', handleStructureChange)
-
-    isLoading.value = false
   } catch (err) {
     const message = err instanceof Error ? err.message : 'Failed to load molecule editor'
     loadError.value = message

package/src/components/PlateMapEditor.vue

@@ -112,7 +112,7 @@ watch(
 watch(
   () => props.modelValue,
   (newValue) => {
-    if (newValue) editor.reset()
+    if (newValue) editor.loadState(newValue)
   }
 )
 

package/src/composables/useAuth.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { ref, onMounted, onUnmounted, watch, type Ref } from 'vue'
+import { ref, onMounted, onUnmounted, watch, getCurrentInstance, type Ref } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useSettingsStore } from '../stores/settings'
 import type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, UpdateProfileRequest } from '../types'
@@ -66,8 +66,6 @@ export function useAuth(): UseAuthReturn {
   const authStore = useAuthStore()
   const settingsStore = useSettingsStore()
 
-  // Track refresh timer (module-level to prevent timer multiplication)
-  const refreshTimerId = ref<number | null>(_refreshTimerId)
   const isRefreshing = ref(false)
 
   function getApiBaseUrl(): string {
@@ -281,7 +279,7 @@ export function useAuth(): UseAuthReturn {
 
     // Schedule refresh
     const delay = refreshAt - now
-    refreshTimerId.value = window.setTimeout(() => {
+    _refreshTimerId = window.setTimeout(() => {
       refreshToken()
     }, delay)
   }
@@ -290,9 +288,9 @@ export function useAuth(): UseAuthReturn {
    * Stop automatic token refresh.
    */
   function stopTokenRefresh(): void {
-    if (refreshTimerId.value !== null) {
-      window.clearTimeout(refreshTimerId.value)
-      refreshTimerId.value = null
+    if (_refreshTimerId !== null) {
+      window.clearTimeout(_refreshTimerId)
+      _refreshTimerId = null
     }
   }
 
@@ -382,34 +380,34 @@ export function useAuth(): UseAuthReturn {
     }
   }
 
-  // Set up periodic check as safety net
+  // Set up periodic check as safety net (only inside component setup)
   let checkInterval: number | null = null
 
-  onMounted(() => {
-    // Start periodic check
-    checkInterval = window.setInterval(checkAndRefreshIfNeeded, TOKEN_REFRESH_CHECK_INTERVAL_MS)
-  })
+  if (getCurrentInstance()) {
+    onMounted(() => {
+      checkInterval = window.setInterval(checkAndRefreshIfNeeded, TOKEN_REFRESH_CHECK_INTERVAL_MS)
+    })
 
-  onUnmounted(() => {
-    // Clean up on unmount
-    stopTokenRefresh()
-    if (checkInterval !== null) {
-      window.clearInterval(checkInterval)
-      checkInterval = null
-    }
-  })
-
-  // Watch for token changes to reschedule refresh
-  watch(
-    () => authStore.tokenExpires,
-    (newExpires) => {
-      if (newExpires) {
-        scheduleTokenRefresh()
-      } else {
-        stopTokenRefresh()
+    onUnmounted(() => {
+      stopTokenRefresh()
+      if (checkInterval !== null) {
+        window.clearInterval(checkInterval)
+        checkInterval = null
       }
-    }
-  )
+    })
+
+    // Watch for token changes to reschedule refresh
+    watch(
+      () => authStore.tokenExpires,
+      (newExpires) => {
+        if (newExpires) {
+          scheduleTokenRefresh()
+        } else {
+          stopTokenRefresh()
+        }
+      }
+    )
+  }
 
   return {
     // Core auth methods

package/src/composables/useAutoGroup.ts

@@ -331,24 +331,9 @@ export function useAutoGroup() {
     }))
   })
 
-  const groups = computed(() => {
+  const _computedResult = computed(() => {
     if (effectiveColumns.value.length === 0 || enabledFields.value.size === 0) {
-      return []
-    }
-    const result = computeGroups(
-      samples.value,
-      effectiveColumns.value,
-      enabledFields.value,
-      outlierActions.value,
-      delimiter.value,
-      minFieldCount.value,
-    )
-    return result.groups
-  })
-
-  const metadata = computed(() => {
-    if (effectiveColumns.value.length === 0 || enabledFields.value.size === 0) {
-      return []
+      return { groups: [] as SampleGroup[], metadata: [] as MetadataRow[], excludedSamples: [] as string[] }
     }
     return computeGroups(
       samples.value,
@@ -357,25 +342,14 @@ export function useAutoGroup() {
       outlierActions.value,
       delimiter.value,
       minFieldCount.value,
-    ).metadata
+    )
   })
 
-  const excludedSamples = computed(() => {
-    return computeGroups(
-      samples.value,
-      effectiveColumns.value,
-      enabledFields.value,
-      outlierActions.value,
-      delimiter.value,
-      minFieldCount.value,
-    ).excludedSamples
-  })
+  const groups = computed(() => _computedResult.value.groups)
+  const metadata = computed(() => _computedResult.value.metadata)
+  const excludedSamples = computed(() => _computedResult.value.excludedSamples)
 
-  const result = computed<AutoGroupResult>(() => ({
-    groups: groups.value,
-    metadata: metadata.value,
-    excludedSamples: excludedSamples.value,
-  }))
+  const result = computed<AutoGroupResult>(() => _computedResult.value)
 
   function parseInput() {
     if (inputMode.value === 'csv' && csvData.value) {

package/src/composables/useForm.ts

@@ -354,7 +354,7 @@ export function useForm<T extends Record<string, unknown>>(
   function reset(values?: Partial<T>): void {
     const resetValues = values ? { ..._initialValues, ...values } : _initialValues
     for (const key of Object.keys(data)) {
-      ;(data as Record<string, unknown>)[key] = resetValues[key as keyof T]
+      ;(data as Record<string, unknown>)[key] = structuredClone(resetValues[key as keyof T])
       errors[key] = null
       touched[key] = false
       dirty[key] = false

package/src/composables/useWellPlateEditor.ts

@@ -52,6 +52,7 @@ export interface UseWellPlateEditorReturn {
   redo: () => void
   exportData: (format: 'json' | 'csv') => string
   importData: (data: string, format: 'json' | 'csv') => boolean
+  loadState: (state: Partial<PlateMapEditorState>) => void
   reset: () => void
 }
 
@@ -103,14 +104,10 @@ export function useWellPlateEditor(
   const canUndo = computed(() => historyIndex.value >= 0)
   const canRedo = computed(() => historyIndex.value < history.value.length - 1)
 
-  function deepClone<T>(obj: T): T {
-    return structuredClone(obj)
-  }
-
   function saveToHistory() {
     const entry: HistoryEntry = {
-      plates: deepClone(internalState.value.plates),
-      samples: deepClone(internalState.value.samples),
+      plates: structuredClone(internalState.value.plates),
+      samples: structuredClone(internalState.value.samples),
     }
 
     if (historyIndex.value < history.value.length - 1) {
@@ -257,8 +254,8 @@ export function useWellPlateEditor(
     const entry = history.value[historyIndex.value]
     historyIndex.value--
 
-    internalState.value.plates = deepClone(entry.plates)
-    internalState.value.samples = deepClone(entry.samples)
+    internalState.value.plates = structuredClone(entry.plates)
+    internalState.value.samples = structuredClone(entry.samples)
 
     const activePlateExists = internalState.value.plates.some(p => p.id === internalState.value.activePlateId)
     if (!activePlateExists) {
@@ -273,8 +270,8 @@ export function useWellPlateEditor(
     historyIndex.value++
     const entry = history.value[historyIndex.value]
 
-    internalState.value.plates = deepClone(entry.plates)
-    internalState.value.samples = deepClone(entry.samples)
+    internalState.value.plates = structuredClone(entry.plates)
+    internalState.value.samples = structuredClone(entry.samples)
     internalState.value.selectedWells = []
   }
 
@@ -368,6 +365,20 @@ export function useWellPlateEditor(
     }
   }
 
+  function loadState(state: Partial<PlateMapEditorState>) {
+    saveToHistory()
+    if (state.plates && state.plates.length > 0) {
+      internalState.value.plates = structuredClone(state.plates)
+      internalState.value.activePlateId = state.activePlateId ?? state.plates[0].id
+    }
+    if (state.samples) {
+      internalState.value.samples = structuredClone(state.samples)
+    }
+    internalState.value.selectedWells = state.selectedWells ?? []
+    internalState.value.activeSampleId = state.activeSampleId
+    updateSampleCounts()
+  }
+
   function reset() {
     const plate = createEmptyPlate('Plate 1', defaultFormat)
     internalState.value = {
@@ -403,6 +414,7 @@ export function useWellPlateEditor(
     redo,
     exportData,
     importData,
+    loadState,
     reset,
   }
 }

package/src/stores/settings.ts

@@ -33,8 +33,12 @@ function getDefaultServerHost(): string {
 }
 
 function getDefaultServerPort(): number {
-  if (typeof window !== 'undefined' && window.location.port) {
-    return parseInt(window.location.port, 10)
+  if (typeof window !== 'undefined') {
+    if (window.location.port) {
+      return parseInt(window.location.port, 10)
+    }
+    // Standard ports: 443 for HTTPS, 80 for HTTP (browser omits from location.port)
+    return window.location.protocol === 'https:' ? 443 : 80
   }
   return 8000
 }
@@ -92,34 +96,26 @@ export const useSettingsStore = defineStore('mld-settings', () => {
   // API prefix - can be configured via env variable VITE_API_PREFIX
   const apiPrefix: string = (import.meta.env?.VITE_API_PREFIX as string | undefined) ?? '/api'
 
-  function getApiBaseUrl(): string {
+  function _isSameOrigin(): { same: boolean; currentHost: string; currentPort: string } {
     const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
     const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+    const effectivePort = currentPort || (window.location.protocol === 'https:' ? '443' : '80')
+    const same =
+      (serverHost.value === currentHost && String(serverPort.value) === effectivePort) ||
+      (serverHost.value === 'localhost' && currentHost !== 'localhost')
+    return { same, currentHost, currentPort }
+  }
 
-    if (serverHost.value === currentHost && String(serverPort.value) === currentPort) {
-      return apiPrefix
-    }
-
-    if (serverHost.value === 'localhost' && currentHost !== 'localhost') {
-      return apiPrefix
-    }
-
+  function getApiBaseUrl(): string {
+    const { same } = _isSameOrigin()
+    if (same) return apiPrefix
     return `http://${serverHost.value}:${serverPort.value}${apiPrefix}`
   }
 
   function getWsBaseUrl(): string {
-    const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
-    const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+    const { same, currentHost, currentPort } = _isSameOrigin()
     const protocol = typeof window !== 'undefined' && window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-
-    if (serverHost.value === currentHost && String(serverPort.value) === currentPort) {
-      return `${protocol}//${currentHost}:${currentPort}${apiPrefix}`
-    }
-
-    if (serverHost.value === 'localhost' && currentHost !== 'localhost') {
-      return `${protocol}//${currentHost}:${currentPort}${apiPrefix}`
-    }
-
+    if (same) return `${protocol}//${currentHost}${currentPort ? ':' + currentPort : ''}${apiPrefix}`
     return `ws://${serverHost.value}:${serverPort.value}${apiPrefix}`
   }
 
@@ -138,19 +134,10 @@ export const useSettingsStore = defineStore('mld-settings', () => {
   }
 
   function applyTheme() {
-    let isDark = false
-
-    if (theme.value === 'system') {
-      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    } else {
-      isDark = theme.value === 'dark'
-    }
-
-    if (isDark) {
-      document.documentElement.classList.add('dark')
-    } else {
-      document.documentElement.classList.remove('dark')
-    }
+    const dark = theme.value === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+      : theme.value === 'dark'
+    document.documentElement.classList.toggle('dark', dark)
   }
 
   watch(theme, () => {
@@ -206,7 +193,6 @@ export const useSettingsStore = defineStore('mld-settings', () => {
   }
 
   return {
-    // State
     serverHost,
     serverPort,
     requestTimeout,
@@ -215,8 +201,6 @@ export const useSettingsStore = defineStore('mld-settings', () => {
     theme,
     colorPalette,
     tableDensity,
-
-    // Actions
     initialize,
     applyTheme,
     persistSettings,

package/src/styles/components/formula-input.css

@@ -65,22 +65,29 @@
   background-color: var(--bg-tertiary);
 }
 
-/* Preview */
+/* Preview row */
 .mld-formula-input__preview {
-  padding: 0.375rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   background-color: var(--bg-tertiary);
   border-top: 1px solid var(--border-color);
-  font-size: 1.125rem;
-  min-height: 1.75rem;
+  min-height: 1.5rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.mld-formula-input__preview-formula {
+  font-size: 1rem;
+  line-height: 1.4;
 }
 
 /* Molecular weight display */
 .mld-formula-input__mw {
-  font-size: 0.75rem;
+  font-size: 0.6875rem;
   color: var(--text-muted);
-  padding-left: 0.125rem;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .mld-formula-input__mw::before {