@morscherlab/mld-sdk 0.6.0

package/src/components/LoadingSpinner.story.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import LoadingSpinner from './LoadingSpinner.vue'
+import type { SpinnerSize, SpinnerVariant } from '../types'
+
+const sizes: SpinnerSize[] = ['xs', 'sm', 'md', 'lg']
+const variants: SpinnerVariant[] = ['primary', 'cta', 'muted']
+</script>
+
+<template>
+  <Story title="Feedback/LoadingSpinner">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <LoadingSpinner
+            :size="state.size"
+            :variant="state.variant"
+            :label="state.label"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstSelect
+          v-model="state.variant"
+          title="Variant"
+          :options="variants.map(v => ({ label: v, value: v }))"
+        />
+        <HstText v-model="state.label" title="Label" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-end; justify-content: center;">
+        <div v-for="size in sizes" :key="size" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <LoadingSpinner :size="size" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">{{ size }}</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="All Variants">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center;">
+        <div v-for="variant in variants" :key="variant" style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
+          <LoadingSpinner :variant="variant" size="md" />
+          <span style="font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">{{ variant }}</span>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Labels">
+      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;">
+        <LoadingSpinner size="md" label="Loading experiments..." />
+        <LoadingSpinner size="sm" label="Processing plates..." variant="cta" />
+        <LoadingSpinner size="lg" label="Analyzing data..." />
+      </div>
+    </Variant>
+
+    <Variant title="Inline Usage">
+      <div style="padding: 2rem; display: flex; align-items: center; gap: 0.5rem; justify-content: center;">
+        <LoadingSpinner size="xs" label="" />
+        <span style="color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Fetching results...</span>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/LoadingSpinner.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+interface Props {
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  variant?: 'primary' | 'cta' | 'muted'
+  label?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'primary',
+  label: 'Loading',
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-spinner',
+      `mld-spinner--${size}`,
+      `mld-spinner--${variant}`,
+    ]"
+    role="status"
+  >
+    <svg
+      class="mld-spinner__svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        style="opacity: 0.25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        style="opacity: 0.75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+    <span class="mld-spinner__label">{{ label }}</span>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/loading-spinner.css';
+</style>

package/src/components/MoleculeInput.story.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import MoleculeInput from './MoleculeInput.vue'
+import type { MoleculeData } from './MoleculeInput.vue'
+
+function initState() {
+  return {
+    modelValue: undefined as MoleculeData | undefined,
+    disabled: false,
+    readonly: false,
+    height: 300,
+    showSmiles: true,
+    placeholder: 'Draw a chemical structure',
+    error: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Lab/MoleculeInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <MoleculeInput
+            v-model="state.modelValue"
+            :disabled="state.disabled"
+            :readonly="state.readonly"
+            :height="state.height"
+            :show-smiles="state.showSmiles"
+            :placeholder="state.placeholder"
+            :error="state.error"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.readonly" title="Readonly" />
+        <HstSlider v-model="state.height" title="Height (px)" :min="200" :max="500" />
+        <HstCheckbox v-model="state.showSmiles" title="Show SMILES" />
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstCheckbox v-model="state.error" title="Error" />
+      </template>
+    </Variant>
+
+    <Variant title="Readonly (No Structure)">
+      <div style="padding: 2rem; max-width: 600px;">
+        <MoleculeInput readonly :height="250" />
+      </div>
+    </Variant>
+
+    <Variant title="Readonly (With Structure)">
+      <div style="padding: 2rem; max-width: 600px;">
+        <MoleculeInput
+          readonly
+          :height="250"
+          :model-value="{ smiles: 'CCO', molfile: '' }"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Error State">
+      <div style="padding: 2rem; max-width: 600px;">
+        <MoleculeInput error :height="250" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/MoleculeInput.vue

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+
+export interface MoleculeData {
+  smiles: string
+  molfile: string
+}
+
+interface Props {
+  modelValue?: MoleculeData
+  disabled?: boolean
+  readonly?: boolean
+  height?: number
+  showSmiles?: boolean
+  placeholder?: string
+  error?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  readonly: false,
+  height: 300,
+  showSmiles: true,
+  placeholder: 'Draw a chemical structure',
+  error: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [data: MoleculeData | undefined]
+  'error': [message: string]
+}>()
+
+// State
+const containerRef = ref<HTMLDivElement | null>(null)
+const jsmeInstance = ref<unknown>(null)
+const isLoading = ref(true)
+const loadError = ref<string | null>(null)
+const debounceTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+// Computed
+const hasStructure = computed(() => {
+  return props.modelValue?.smiles && props.modelValue.smiles.length > 0
+})
+
+// Use window-level state to persist across component instances and hot-reloads
+interface JSMEGlobalState {
+  __jsmeCallbacks__?: Array<() => void>
+  __jsmeLoading__?: boolean
+  __jsmeLoaded__?: boolean
+  __jsmeLoadPromise__?: Promise<void>
+  JSApplet?: { JSME?: new (id: string, width: string, height: string, options?: object) => unknown }
+  jsmeOnLoad?: () => void
+}
+
+function getJSMEState(): JSMEGlobalState {
+  const win = window as unknown as JSMEGlobalState
+  if (!win.__jsmeCallbacks__) {
+    win.__jsmeCallbacks__ = []
+  }
+  return win
+}
+
+function waitForJSME(): Promise<void> {
+  const win = getJSMEState()
+
+  // Already loaded
+  if (win.JSApplet?.JSME) {
+    return Promise.resolve()
+  }
+
+  // Reuse existing promise if loading
+  if (win.__jsmeLoadPromise__) {
+    return win.__jsmeLoadPromise__
+  }
+
+  win.__jsmeLoadPromise__ = new Promise((resolve, reject) => {
+    // Double-check after promise creation
+    if (win.JSApplet?.JSME) {
+      resolve()
+      return
+    }
+
+    // Set up global callback FIRST (before checking for existing script)
+    const originalOnLoad = win.jsmeOnLoad
+    win.jsmeOnLoad = () => {
+      win.__jsmeLoaded__ = true
+      originalOnLoad?.()
+      win.__jsmeCallbacks__?.forEach(cb => cb())
+      win.__jsmeCallbacks__ = []
+      resolve()
+    }
+
+    // Add to callback queue
+    win.__jsmeCallbacks__?.push(resolve)
+
+    // Check if script already exists
+    const existingScript = document.querySelector('script[data-jsme]')
+    if (existingScript) {
+      // Script exists, poll for JSApplet.JSME (in case jsmeOnLoad already fired)
+      const checkReady = setInterval(() => {
+        if (win.JSApplet?.JSME) {
+          clearInterval(checkReady)
+          win.__jsmeLoaded__ = true
+          win.__jsmeCallbacks__?.forEach(cb => cb())
+          win.__jsmeCallbacks__ = []
+          resolve()
+        }
+      }, 100)
+
+      setTimeout(() => {
+        clearInterval(checkReady)
+        if (!win.__jsmeLoaded__ && !win.JSApplet?.JSME) {
+          reject(new Error('JSME initialization timeout'))
+        }
+      }, 15000)
+      return
+    }
+
+    // Load the script
+    win.__jsmeLoading__ = true
+    const script = document.createElement('script')
+    script.src = 'https://jsme-editor.github.io/dist/jsme/jsme.nocache.js'
+    script.integrity = 'sha384-l6tNzsc/eAJ7uql0dGAcHYI5ANVEV7DrJYjzXp3t13L+3OzLnfpzJO0Uio7mUSjY'
+    script.crossOrigin = 'anonymous'
+    script.async = true
+    script.setAttribute('data-jsme', 'true')
+
+    script.onerror = () => {
+      win.__jsmeLoading__ = false
+      win.__jsmeLoadPromise__ = undefined
+      reject(new Error('Failed to load JSME script'))
+    }
+
+    // Timeout
+    setTimeout(() => {
+      if (!win.__jsmeLoaded__ && !win.JSApplet?.JSME) {
+        reject(new Error('JSME initialization timeout'))
+      }
+    }, 15000)
+
+    document.head.appendChild(script)
+  })
+
+  return win.__jsmeLoadPromise__
+}
+
+// JSME initialization
+async function initJSME() {
+  if (!containerRef.value || props.readonly) return
+
+  try {
+    isLoading.value = true
+    loadError.value = null
+
+    // Wait for JSME to be ready
+    await waitForJSME()
+
+    // Wait for DOM to be ready
+    await nextTick()
+
+    if (!containerRef.value) return
+
+    // Get JSME constructor from window
+    const win = getJSMEState()
+
+    if (!win.JSApplet?.JSME) {
+      throw new Error('JSME library not available after loading')
+    }
+
+    // Create JSME instance
+    const editorId = `jsme-${Date.now()}`
+    containerRef.value.id = editorId
+
+    const instance = new win.JSApplet.JSME(
+      editorId,
+      '100%',
+      `${props.height}px`,
+      {
+        options: 'query,hydrogens,paste,depict',
+      }
+    )
+
+    jsmeInstance.value = instance
+
+    // Set initial value if provided
+    if (props.modelValue?.molfile) {
+      (instance as { readMolFile: (mol: string) => void }).readMolFile(props.modelValue.molfile)
+    }
+
+    // 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
+    emit('error', message)
+    isLoading.value = false
+  }
+}
+
+function handleStructureChange() {
+  // Debounce the change event
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+
+  debounceTimer.value = setTimeout(() => {
+    if (!jsmeInstance.value) return
+
+    const instance = jsmeInstance.value as {
+      smiles: () => string
+      molFile: () => string
+    }
+
+    const smiles = instance.smiles()
+    const molfile = instance.molFile()
+
+    if (!smiles || smiles.length === 0) {
+      emit('update:modelValue', undefined)
+    } else {
+      emit('update:modelValue', { smiles, molfile })
+    }
+  }, 300)
+}
+
+function clearStructure() {
+  if (jsmeInstance.value) {
+    (jsmeInstance.value as { reset: () => void }).reset()
+  }
+  emit('update:modelValue', undefined)
+}
+
+// Watch for external value changes
+watch(() => props.modelValue, (newValue) => {
+  if (!jsmeInstance.value) return
+
+  const instance = jsmeInstance.value as {
+    smiles: () => string
+    readMolFile: (mol: string) => void
+    reset: () => void
+  }
+
+  // Only update if the external value differs from current
+  const currentSmiles = instance.smiles()
+  if (newValue?.smiles !== currentSmiles) {
+    if (newValue?.molfile) {
+      instance.readMolFile(newValue.molfile)
+    } else {
+      instance.reset()
+    }
+  }
+})
+
+// Lifecycle
+onMounted(() => {
+  if (!props.readonly) {
+    initJSME()
+  } else {
+    isLoading.value = false
+  }
+})
+
+onUnmounted(() => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  jsmeInstance.value = null
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'mld-molecule-input',
+      disabled ? 'mld-molecule-input--disabled' : '',
+      readonly ? 'mld-molecule-input--readonly' : '',
+      error ? 'mld-molecule-input--error' : '',
+    ]"
+  >
+    <!-- Loading state -->
+    <div
+      v-if="isLoading && !readonly"
+      class="mld-molecule-input__skeleton"
+      :style="{ height: `${height}px` }"
+    >
+      <svg
+        class="mld-molecule-input__skeleton-icon"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+        />
+      </svg>
+      <span class="mld-molecule-input__skeleton-text">Loading molecule editor...</span>
+    </div>
+
+    <!-- Error state -->
+    <div
+      v-else-if="loadError"
+      class="mld-molecule-input__error"
+    >
+      <svg
+        class="mld-molecule-input__error-icon"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+        />
+      </svg>
+      {{ loadError }}
+    </div>
+
+    <!-- Readonly mode - show empty or placeholder -->
+    <template v-else-if="readonly">
+      <div
+        v-if="hasStructure"
+        class="mld-molecule-input__readonly"
+        :style="{ height: `${height}px` }"
+      >
+        <!-- In readonly mode, we just display a placeholder since we don't have SVG rendering -->
+        <div class="mld-molecule-input__empty">
+          <svg
+            class="mld-molecule-input__empty-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+            />
+          </svg>
+          <span class="mld-molecule-input__empty-text">Structure defined (readonly)</span>
+        </div>
+      </div>
+      <div
+        v-else
+        class="mld-molecule-input__empty"
+        :style="{ height: `${height}px` }"
+      >
+        <svg
+          class="mld-molecule-input__empty-icon"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+          />
+        </svg>
+        <span class="mld-molecule-input__empty-text">No structure</span>
+      </div>
+    </template>
+
+    <!-- Editor mode -->
+    <template v-else>
+      <div
+        ref="containerRef"
+        class="mld-molecule-input__editor"
+        :style="{ height: `${height}px` }"
+        role="application"
+        aria-label="Molecule structure editor"
+      />
+
+      <!-- Actions toolbar -->
+      <div class="mld-molecule-input__actions">
+        <button
+          type="button"
+          class="mld-molecule-input__action-btn"
+          :disabled="!hasStructure || disabled"
+          aria-label="Clear structure"
+          @click="clearStructure"
+        >
+          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+      </div>
+    </template>
+
+    <!-- SMILES display -->
+    <div
+      v-if="showSmiles && hasStructure && !loadError"
+      class="mld-molecule-input__smiles"
+    >
+      <span class="mld-molecule-input__smiles-label">SMILES:</span>
+      {{ modelValue?.smiles }}
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/molecule-input.css';
+</style>