@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-alpha.9

package/src/components/WellEditPopup.vue

@@ -101,21 +101,21 @@ const sampleTypeButtons = [
 <template>
   <Teleport to="body">
     <!-- Backdrop -->
-    <div class="mld-well-edit-popup__backdrop" @click="close" />
+    <div class="mint-well-edit-popup__backdrop" @click="close" />
 
     <!-- Popup -->
     <div
-      class="mld-well-edit-popup"
+      class="mint-well-edit-popup"
       :style="popupStyle"
       @click.stop
     >
       <!-- Header -->
-      <div class="mld-well-edit-popup__header">
-        <div class="mld-well-edit-popup__header-left">
-          <span class="mld-well-edit-popup__well-id">{{ wellId }}</span>
-          <span class="mld-well-edit-popup__title">Edit Well</span>
+      <div class="mint-well-edit-popup__header">
+        <div class="mint-well-edit-popup__header-left">
+          <span class="mint-well-edit-popup__well-id">{{ wellId }}</span>
+          <span class="mint-well-edit-popup__title">Edit Well</span>
         </div>
-        <button class="mld-well-edit-popup__close" @click="close">
+        <button class="mint-well-edit-popup__close" @click="close">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M18 6 6 18" /><path d="m6 6 12 12" />
           </svg>
@@ -123,32 +123,32 @@ const sampleTypeButtons = [
       </div>
 
       <!-- Body -->
-      <div class="mld-well-edit-popup__body">
+      <div class="mint-well-edit-popup__body">
         <!-- Sample Name -->
         <div v-if="hasField('label')">
-          <label class="mld-well-edit-popup__label">Sample Name</label>
+          <label class="mint-well-edit-popup__label">Sample Name</label>
           <input
             v-model="formData.label"
             type="text"
             placeholder="e.g., Sample_001"
-            class="mld-well-edit-popup__input"
+            class="mint-well-edit-popup__input"
             @keydown.enter="save"
             autofocus
           />
         </div>
 
         <!-- Type + Volume row -->
-        <div class="mld-well-edit-popup__row">
+        <div class="mint-well-edit-popup__row">
           <div v-if="hasField('sampleType')">
-            <label class="mld-well-edit-popup__label">Type</label>
-            <div class="mld-well-edit-popup__type-grid">
+            <label class="mint-well-edit-popup__label">Type</label>
+            <div class="mint-well-edit-popup__type-grid">
               <button
                 v-for="btn in sampleTypeButtons"
                 :key="btn.type"
                 :title="btn.tooltip"
-                class="mld-well-edit-popup__type-btn"
+                class="mint-well-edit-popup__type-btn"
                 :class="{
-                  [`mld-well-edit-popup__type-btn--${btn.type}`]: formData.sampleType === btn.type,
+                  [`mint-well-edit-popup__type-btn--${btn.type}`]: formData.sampleType === btn.type,
                 }"
                 @click="formData.sampleType = btn.type"
               >
@@ -157,14 +157,14 @@ const sampleTypeButtons = [
             </div>
           </div>
           <div v-if="hasField('injectionVolume')">
-            <label class="mld-well-edit-popup__label">Volume (uL)</label>
+            <label class="mint-well-edit-popup__label">Volume (uL)</label>
             <input
               v-model.number="formData.injectionVolume"
               type="number"
               min="0.1"
               max="100"
               step="0.5"
-              class="mld-well-edit-popup__input"
+              class="mint-well-edit-popup__input"
             />
           </div>
         </div>
@@ -172,7 +172,7 @@ const sampleTypeButtons = [
         <!-- Advanced toggle -->
         <label
           v-if="hasField('injectionCount') || hasField('customMethod')"
-          class="mld-well-edit-popup__advanced-toggle"
+          class="mint-well-edit-popup__advanced-toggle"
         >
           <input type="checkbox" v-model="showAdvanced" />
           <span>Advanced options</span>
@@ -182,13 +182,13 @@ const sampleTypeButtons = [
         <template v-if="showAdvanced">
           <!-- Injection count -->
           <div v-if="hasField('injectionCount')">
-            <label class="mld-well-edit-popup__label">Repeat Injections</label>
-            <div class="mld-well-edit-popup__count-grid">
+            <label class="mint-well-edit-popup__label">Repeat Injections</label>
+            <div class="mint-well-edit-popup__count-grid">
               <button
                 v-for="n in [1, 2, 3, 4, 5]"
                 :key="n"
-                class="mld-well-edit-popup__count-btn"
-                :class="{ 'mld-well-edit-popup__count-btn--active': formData.injectionCount === n }"
+                class="mint-well-edit-popup__count-btn"
+                :class="{ 'mint-well-edit-popup__count-btn--active': formData.injectionCount === n }"
                 @click="formData.injectionCount = n"
               >
                 {{ n }}&times;
@@ -198,30 +198,30 @@ const sampleTypeButtons = [
                 type="number"
                 min="1"
                 max="10"
-                class="mld-well-edit-popup__count-input"
+                class="mint-well-edit-popup__count-input"
               />
             </div>
           </div>
 
           <!-- Custom method -->
           <div v-if="hasField('customMethod')">
-            <label class="mld-well-edit-popup__label">Custom Method Path</label>
+            <label class="mint-well-edit-popup__label">Custom Method Path</label>
             <input
               v-model="formData.customMethod"
               type="text"
               placeholder="Leave empty for default"
-              class="mld-well-edit-popup__input mld-well-edit-popup__input--mono"
+              class="mint-well-edit-popup__input mint-well-edit-popup__input--mono"
             />
           </div>
         </template>
       </div>
 
       <!-- Footer -->
-      <div class="mld-well-edit-popup__footer">
-        <button class="mld-well-edit-popup__btn mld-well-edit-popup__btn--clear" @click="clear">
+      <div class="mint-well-edit-popup__footer">
+        <button class="mint-well-edit-popup__btn mint-well-edit-popup__btn--clear" @click="clear">
           Clear Well
         </button>
-        <button class="mld-well-edit-popup__btn mld-well-edit-popup__btn--save" @click="save">
+        <button class="mint-well-edit-popup__btn mint-well-edit-popup__btn--save" @click="save">
           Save
         </button>
       </div>

package/src/components/WellPlate.vue

@@ -316,22 +316,22 @@ function getWellClasses(well: Well): string[] {
   const isDragTarget = dragTargetWell.value === well.id
 
   const classes = [
-    'mld-well-plate__well',
-    props.wellShape === 'circle' ? 'mld-well-plate__well--circle' : 'mld-well-plate__well--rounded',
+    'mint-well-plate__well',
+    props.wellShape === 'circle' ? 'mint-well-plate__well--circle' : 'mint-well-plate__well--rounded',
   ]
 
   if (props.selectionMode === 'drag' && well.sampleType) {
-    classes.push('mld-well-plate__well--draggable')
+    classes.push('mint-well-plate__well--draggable')
   }
 
-  if (isDragSource) classes.push('mld-well-plate__well--drag-source')
-  else if (isDragTarget) classes.push('mld-well-plate__well--drag-target')
-  else if (isWellSelected) classes.push('mld-well-plate__well--selected')
-  else if (isDragOver) classes.push('mld-well-plate__well--drag-over')
-  else if (isHovered && !props.readonly) classes.push('mld-well-plate__well--hovered')
+  if (isDragSource) classes.push('mint-well-plate__well--drag-source')
+  else if (isDragTarget) classes.push('mint-well-plate__well--drag-target')
+  else if (isWellSelected) classes.push('mint-well-plate__well--selected')
+  else if (isDragOver) classes.push('mint-well-plate__well--drag-over')
+  else if (isHovered && !props.readonly) classes.push('mint-well-plate__well--hovered')
 
-  if (isDisabled) classes.push('mld-well-plate__well--disabled')
-  if (well.state === 'filled') classes.push('mld-well-plate__well--filled')
+  if (isDisabled) classes.push('mint-well-plate__well--disabled')
+  if (well.state === 'filled') classes.push('mint-well-plate__well--filled')
 
   return classes
 }
@@ -589,14 +589,14 @@ const tableStyle = computed(() => ({
 <template>
   <div
     ref="plateRef"
-    :class="['mld-well-plate', isFillMode ? 'mld-well-plate--fill' : 'mld-well-plate--inline']"
+    :class="['mint-well-plate', isFillMode ? 'mint-well-plate--fill' : 'mint-well-plate--inline']"
     :style="containerStyle"
   >
-    <div class="mld-well-plate__scroll">
-      <div class="mld-well-plate__content">
+    <div class="mint-well-plate__scroll">
+      <div class="mint-well-plate__content">
         <table
           ref="tableRef"
-          class="mld-well-plate__table"
+          class="mint-well-plate__table"
           role="grid"
           :aria-label="`${props.format}-well plate`"
           :style="tableStyle"
@@ -612,7 +612,7 @@ const tableStyle = computed(() => ({
               <th
                 v-if="'condition' in span"
                 :colspan="span.colspan"
-                class="mld-well-plate__condition-label"
+                class="mint-well-plate__condition-label"
                 :style="{
                   height: sizeConfig.headerHeight,
                   fontSize: sizeConfig.fontSize,
@@ -634,13 +634,13 @@ const tableStyle = computed(() => ({
             <th
               v-for="col in colLabels"
               :key="col"
-              class="mld-well-plate__col-header"
+              class="mint-well-plate__col-header"
               :style="{ height: sizeConfig.headerHeight, fontSize: sizeConfig.fontSize }"
             >
               <template v-for="entry in [colConditionMap.get(col)]" :key="col">
                 <span
                   v-if="entry"
-                  class="mld-well-plate__condition-cell"
+                  class="mint-well-plate__condition-cell"
                   :style="conditionGradientStyle(
                     entry.condition.color,
                     entry.condition.concentrations[entry.indexInGroup],
@@ -663,8 +663,8 @@ const tableStyle = computed(() => ({
                 :key="rowIndex"
                 :rowspan="span.rowspan"
                 :class="[
-                  'mld-well-plate__row-condition-label',
-                  'gap' in span ? 'mld-well-plate__row-condition-label--empty' : '',
+                  'mint-well-plate__row-condition-label',
+                  'gap' in span ? 'mint-well-plate__row-condition-label--empty' : '',
                 ]"
                 :style="{
                   width: sizeConfig.headerWidth,
@@ -673,15 +673,15 @@ const tableStyle = computed(() => ({
                   ...('condition' in span ? { color: span.condition.color } : {}),
                 }"
               >
-                <div v-if="'condition' in span" class="mld-well-plate__row-condition-wrap">
-                  <span class="mld-well-plate__row-condition-text">{{ span.condition.label }}</span>
+                <div v-if="'condition' in span" class="mint-well-plate__row-condition-wrap">
+                  <span class="mint-well-plate__row-condition-text">{{ span.condition.label }}</span>
                 </div>
               </td>
             </template>
             <!-- Row header (with concentration overlay when conditions present) -->
             <td
               v-if="props.showLabels"
-              class="mld-well-plate__row-header"
+              class="mint-well-plate__row-header"
               :style="{
                 width: sizeConfig.headerWidth,
                 height: sizeConfig.cellHeight,
@@ -693,7 +693,7 @@ const tableStyle = computed(() => ({
               <template v-for="entry in [rowConditionMap.get(rowLabels[rowIndex])]" :key="rowIndex">
                 <span
                   v-if="entry"
-                  class="mld-well-plate__condition-cell"
+                  class="mint-well-plate__condition-cell"
                   :style="conditionGradientStyle(
                     entry.condition.color,
                     entry.condition.concentrations[entry.indexInGroup],
@@ -707,7 +707,7 @@ const tableStyle = computed(() => ({
             </td>
 
             <!-- Wells -->
-            <td v-for="well in row" :key="well.id" class="mld-well-plate__cell">
+            <td v-for="well in row" :key="well.id" class="mint-well-plate__cell">
               <div
                 role="gridcell"
                 tabindex="0"
@@ -742,21 +742,21 @@ const tableStyle = computed(() => ({
                 <!-- Well label text (from metadata.label) -->
                 <span
                   v-if="getWellLabel(well)"
-                  class="mld-well-plate__label"
+                  class="mint-well-plate__label"
                 >
                   {{ getWellLabel(well) }}
                 </span>
                 <!-- Sample type indicator (S/B/Q/C) -->
                 <span
                   v-else-if="getSampleTypeIndicator(well)"
-                  class="mld-well-plate__indicator"
+                  class="mint-well-plate__indicator"
                 >
                   {{ getSampleTypeIndicator(well) }}
                 </span>
                 <!-- Well ID -->
                 <span
                   v-else-if="props.showWellIds"
-                  class="mld-well-plate__well-id"
+                  class="mint-well-plate__well-id"
                 >
                   {{ well.id }}
                 </span>
@@ -764,7 +764,7 @@ const tableStyle = computed(() => ({
                 <!-- Badge (injection count or custom method) -->
                 <span
                   v-if="getWellBadge(well)"
-                  class="mld-well-plate__badge"
+                  class="mint-well-plate__badge"
                   :style="{ backgroundColor: getWellBadge(well)!.color }"
                   :title="getWellBadge(well)!.text === '+' ? 'Custom method' : `${getWellBadge(well)!.text}x injections`"
                 >
@@ -779,32 +779,32 @@ const tableStyle = computed(() => ({
         <!-- Heatmap legend (inside content wrapper to match table width) -->
         <div
           v-if="props.heatmap?.enabled && props.heatmap.showLegend"
-          class="mld-well-plate__legend"
+          class="mint-well-plate__legend"
         >
-          <span class="mld-well-plate__legend-label">{{ props.heatmap.min ?? 0 }}</span>
-          <div class="mld-well-plate__legend-bar">
+          <span class="mint-well-plate__legend-label">{{ props.heatmap.min ?? 0 }}</span>
+          <div class="mint-well-plate__legend-bar">
             <div
               v-for="(color, index) in (props.heatmap.colorScale === 'custom' && props.heatmap.customColors?.length ? props.heatmap.customColors : heatmapColors[props.heatmap.colorScale || 'viridis'])"
               :key="index"
-              class="mld-well-plate__legend-segment"
+              class="mint-well-plate__legend-segment"
               :style="{ backgroundColor: color }"
             />
           </div>
-          <span class="mld-well-plate__legend-label">{{ props.heatmap.max ?? 1 }}</span>
+          <span class="mint-well-plate__legend-label">{{ props.heatmap.max ?? 1 }}</span>
         </div>
 
         <!-- Sample type legend bar -->
-        <div v-if="props.showLegend" class="mld-well-plate__sample-legend">
+        <div v-if="props.showLegend" class="mint-well-plate__sample-legend">
           <div
             v-for="item in activeLegendItems"
             :key="item.type"
-            class="mld-well-plate__sample-legend-item"
+            class="mint-well-plate__sample-legend-item"
           >
             <span
-              class="mld-well-plate__sample-legend-dot"
+              class="mint-well-plate__sample-legend-dot"
               :style="{ backgroundColor: `${item.color}26`, border: `1px solid ${item.color}66` }"
             />
-            <span class="mld-well-plate__sample-legend-text">{{ item.label }}</span>
+            <span class="mint-well-plate__sample-legend-text">{{ item.label }}</span>
           </div>
         </div>
       </div>

package/src/composables/useAppExperiment.ts

@@ -71,7 +71,7 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     // Fallback: if no explicit experiment_code, derive `EXP-${id}` so the
     // topbar always has a compact identifier to show instead of the long
     // name. Matches the `EXP-${id}` format used elsewhere (e.g., queue
-    // cards in mld-ms-planner). Callers with the real code should pass it
+    // cards in mint-ms-planner). Callers with the real code should pass it
     // via `experiment_code` to keep the topbar chip in sync with the
     // formal code shown in the popover panel.
     experimentCode.value = experiment.experiment_code ?? (

package/src/composables/usePlatformContext.ts

@@ -73,7 +73,7 @@ function resetPlatformContextState(): void {
 function isOriginAllowed(origin: string): boolean {
   // Development mode: allow any origin (must be explicitly enabled)
   if (allowAnyOrigin) {
-    console.warn('[MLD SDK] postMessage origin validation disabled - only use in development')
+    console.warn('[MINT SDK] postMessage origin validation disabled - only use in development')
     return true
   }
 
@@ -87,7 +87,7 @@ function isOriginAllowed(origin: string): boolean {
 }
 
 /**
- * Platform context composable for plugin integration with MLD Platform.
+ * Platform context composable for plugin integration with MINT Platform.
  *
  * Provides secure communication with the parent platform via postMessage.
  *
@@ -102,7 +102,7 @@ function isOriginAllowed(origin: string): boolean {
  *
  * // With explicit allowed origins
  * const { isIntegrated } = usePlatformContext({
- *   allowedOrigins: ['https://mld.example.com']
+ *   allowedOrigins: ['https://mint.example.com']
  * })
  *
  * // Development mode (UNSAFE)
@@ -111,7 +111,7 @@ function isOriginAllowed(origin: string): boolean {
  * })
  * ```
  */
-/** Connects a plugin to the MLD platform via postMessage, exposing user, theme, and experiment context. */
+/** Connects a plugin to the MINT platform via postMessage, exposing user, theme, and experiment context. */
 export function usePlatformContext(options: PlatformContextOptions = {}) {
   const consumerId = ++nextConsumerId
   const instanceOrigins = normalizeAllowedOrigins(options.allowedOrigins)
@@ -120,7 +120,7 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
   function detectPlatform(): void {
     const detectedOrigins = new Set<string>()
 
-    // Check if running under MLD Platform by looking for platform-injected global
+    // Check if running under MINT Platform by looking for platform-injected global
     const platformData = (window as unknown as { __MINT_PLATFORM__?: PlatformContext }).__MINT_PLATFORM__
 
     if (platformData) {
@@ -141,10 +141,10 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
     } else {
       // Check for platform indicator in URL or localStorage
       const urlParams = new URLSearchParams(window.location.search)
-      const hasPluginParam = urlParams.has('mld-plugin')
+      const hasPluginParam = urlParams.has('mint-plugin')
 
       // Try to get platform origin from URL parameter
-      const platformOrigin = urlParams.get('mld-origin')
+      const platformOrigin = urlParams.get('mint-origin')
       if (platformOrigin) {
         const origin = getOriginFromUrl(platformOrigin)
         if (origin) {
@@ -156,7 +156,7 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
         isIntegrated: hasPluginParam,
         theme: (() => {
           try {
-            const s = localStorage.getItem('mld-settings')
+            const s = localStorage.getItem('mint-settings')
             if (s) return (JSON.parse(s).theme as 'light' | 'dark' | 'system') || 'system'
           } catch { /* ignore */ }
           return 'system'
@@ -174,19 +174,19 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
 
     // Validate origin for security
     if (!isOriginAllowed(event.origin)) {
-      console.warn(`[MLD SDK] Rejected postMessage from untrusted origin: ${event.origin}`)
+      console.warn(`[MINT SDK] Rejected postMessage from untrusted origin: ${event.origin}`)
       return
     }
 
     try {
       const platformEvent = event.data as PlatformEvent
-      if (!platformEvent.type?.startsWith('mld:')) return
+      if (!platformEvent.type?.startsWith('mint:')) return
 
       switch (platformEvent.type) {
-        case 'mld:theme-changed':
+        case 'mint:theme-changed':
           platformContext.value.theme = platformEvent.payload as 'light' | 'dark' | 'system'
           break
-        case 'mld:user-changed':
+        case 'mint:user-changed':
           platformContext.value.user = platformEvent.payload as PlatformContext['user']
           break
       }
@@ -216,10 +216,10 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
     } else if (allowAnyOrigin) {
       // Development mode fallback
       targetOrigin = '*'
-      console.warn('[MLD SDK] Using wildcard origin for postMessage - only use in development')
+      console.warn('[MINT SDK] Using wildcard origin for postMessage - only use in development')
     } else {
       // Safety: if no origin is configured, log warning and don't send
-      console.warn('[MLD SDK] Cannot send postMessage: no platform origin configured')
+      console.warn('[MINT SDK] Cannot send postMessage: no platform origin configured')
       return
     }
 
@@ -231,7 +231,7 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
    */
   function navigate(path: string): void {
     sendToPlatform({
-      type: 'mld:navigate',
+      type: 'mint:navigate',
       payload: path,
     })
   }
@@ -241,7 +241,7 @@ export function usePlatformContext(options: PlatformContextOptions = {}) {
    */
   function notify(message: string, type: 'success' | 'error' | 'warning' | 'info' = 'info'): void {
     sendToPlatform({
-      type: 'mld:notification',
+      type: 'mint:notification',
       payload: { message, type },
     })
   }

package/src/composables/useProtocolTemplates.ts

@@ -346,7 +346,7 @@ const BUILT_IN_TEMPLATES: StepTemplate[] = [
 ]
 
 // Storage key for custom templates
-const STORAGE_KEY = 'mld-custom-protocol-templates'
+const STORAGE_KEY = 'mint-custom-protocol-templates'
 
 function loadCustomTemplates(): StepTemplate[] {
   try {

package/src/install.ts

@@ -2,13 +2,13 @@ import type { App, Plugin } from 'vue'
 import * as components from './components'
 
 /**
- * Vue plugin that registers all MLD SDK components globally.
+ * Vue plugin that registers all MINT SDK components globally.
  *
  * @example
  * ```typescript
  * import { createApp } from 'vue'
- * import { MINTSdk } from '@estrellaxd/mld-sdk'
- * import '@estrellaxd/mld-sdk/styles'
+ * import { MINTSdk } from '@morscherlab/mint-sdk'
+ * import '@morscherlab/mint-sdk/styles'
  *
  * const app = createApp(App)
  * app.use(MINTSdk)

package/src/stores/auth.ts

@@ -2,12 +2,12 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { AuthConfig, UserInfo } from '../types'
 
-const AUTH_TOKEN_KEY = 'mld-auth-token'
-const AUTH_EXPIRES_KEY = 'mld-auth-expires'
+const AUTH_TOKEN_KEY = 'mint-auth-token'
+const AUTH_EXPIRES_KEY = 'mint-auth-expires'
 
 const hasLocalStorage = typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function'
 
-export const useAuthStore = defineStore('mld-auth', () => {
+export const useAuthStore = defineStore('mint-auth', () => {
   // State
   const token = ref<string | null>(null)
   const tokenExpires = ref<Date | null>(null)

package/src/stores/settings.ts

@@ -23,7 +23,7 @@ export interface SettingsState {
   tableDensity: TableDensity
 }
 
-const STORAGE_KEY = 'mld-settings'
+const STORAGE_KEY = 'mint-settings'
 
 function getDefaultServerHost(): string {
   if (typeof window !== 'undefined' && window.location.hostname !== 'localhost') {
@@ -82,7 +82,7 @@ function saveSettings(settings: SettingsState): void {
   }
 }
 
-export const useSettingsStore = defineStore('mld-settings', () => {
+export const useSettingsStore = defineStore('mint-settings', () => {
   // State
   const serverHost = ref(defaultSettings.serverHost)
   const serverPort = ref(defaultSettings.serverPort)