@morscherlab/mld-sdk 0.9.7 → 0.10.0

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 {