@morscherlab/mint-sdk 1.0.14 → 1.0.16

package/src/components/MobileSupportGate.story.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import MobileSupportGate from './MobileSupportGate.vue'
+</script>
+
+<template>
+  <Story title="Layout/MobileSupportGate">
+    <Variant title="Unsupported State">
+      <div style="min-height: 560px;">
+        <MobileSupportGate
+          :supported="false"
+          media-query="(min-width: 0px)"
+          app-name="MINT platform"
+          title="Desktop workspace recommended"
+          message="This page is not supported on mobile. Experiments, Projects, and Admin remain available on smaller screens."
+          desktop-label="Switch to a desktop browser for the full platform workspace."
+        >
+          <div>Workspace content</div>
+        </MobileSupportGate>
+      </div>
+    </Variant>
+
+    <Variant title="Supported Content">
+      <div style="padding: 2rem; min-height: 360px;">
+        <MobileSupportGate :supported="true" media-query="(min-width: 0px)">
+          <div style="max-width: 640px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; padding: 1.5rem; background: var(--bg-secondary, #fff);">
+            <h3 style="margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.2;">Route content</h3>
+            <p style="margin: 0; color: var(--text-secondary, #475569);">
+              The gate renders its default slot whenever the route is supported or the viewport is wider than the mobile query.
+            </p>
+          </div>
+        </MobileSupportGate>
+      </div>
+    </Variant>
+
+    <Variant title="Custom Unsupported Slot">
+      <div style="min-height: 420px;">
+        <MobileSupportGate :supported="false" media-query="(min-width: 0px)">
+          <template #unsupported>
+            <div style="min-height: 420px; display: grid; place-items: center; padding: 2rem; background: var(--bg-primary, #f8fafc);">
+              <div style="max-width: 420px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; padding: 1.5rem; background: var(--bg-secondary, #fff);">
+                <h3 style="margin: 0 0 0.5rem; font-size: 1.125rem;">Custom fallback</h3>
+                <p style="margin: 0; color: var(--text-secondary, #475569); line-height: 1.5;">
+                  Consumers can replace the default message while keeping the SDK viewport detection behavior.
+                </p>
+              </div>
+            </div>
+          </template>
+        </MobileSupportGate>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/MobileSupportGate.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+let nextMobileSupportGateTitleId = 0
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  DEFAULT_MOBILE_VIEWPORT_QUERY,
+  useMobileSupportGate,
+} from '../composables/useMobileSupportGate'
+
+export interface MobileSupportGateProps {
+  supported?: boolean
+  mediaQuery?: string
+  appName?: string
+  title?: string
+  message?: string
+  desktopLabel?: string
+}
+
+const props = withDefaults(defineProps<MobileSupportGateProps>(), {
+  supported: true,
+  mediaQuery: DEFAULT_MOBILE_VIEWPORT_QUERY,
+  appName: 'MINT',
+  title: 'Desktop workspace recommended',
+  message: 'This workspace is optimized for a wider desktop screen and is not supported on mobile.',
+  desktopLabel: 'Open this page from a desktop browser to use the full workflow.',
+})
+
+defineSlots<{
+  default(props: { isMobileViewport: boolean; isSupported: boolean }): unknown
+  unsupported?(props: { isMobileViewport: boolean; isSupported: boolean }): unknown
+}>()
+
+const titleId = `mint-mobile-support-title-${++nextMobileSupportGateTitleId}`
+
+const supported = computed(() => props.supported)
+const mediaQuery = computed(() => props.mediaQuery)
+
+const {
+  isMobileViewport,
+  isSupported,
+  shouldShowUnsupported,
+} = useMobileSupportGate({
+  supported,
+  mediaQuery,
+})
+</script>
+
+<template>
+  <div
+    v-if="shouldShowUnsupported"
+    class="mint-mobile-support-gate"
+    role="main"
+    :aria-labelledby="titleId"
+    data-testid="mobile-unsupported"
+  >
+    <slot
+      name="unsupported"
+      :is-mobile-viewport="isMobileViewport"
+      :is-supported="isSupported"
+    >
+      <section class="mint-mobile-support-gate__panel">
+        <div class="mint-mobile-support-gate__mark" aria-hidden="true">
+          <svg
+            class="mint-mobile-support-gate__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="4" width="18" height="12" rx="2" />
+            <path d="M8 20h8" />
+            <path d="M12 16v4" />
+          </svg>
+        </div>
+
+        <div class="mint-mobile-support-gate__copy">
+          <p class="mint-mobile-support-gate__eyebrow">{{ appName }}</p>
+          <h1 :id="titleId" class="mint-mobile-support-gate__title">{{ title }}</h1>
+          <p class="mint-mobile-support-gate__message">{{ message }}</p>
+        </div>
+
+        <div class="mint-mobile-support-gate__hint">
+          <svg
+            class="mint-mobile-support-gate__hint-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 20h9" />
+            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
+          </svg>
+          <span>{{ desktopLabel }}</span>
+        </div>
+      </section>
+    </slot>
+  </div>
+
+  <slot
+    v-else
+    :is-mobile-viewport="isMobileViewport"
+    :is-supported="isSupported"
+  />
+</template>
+
+<style>
+@import '../styles/components/mobile-support-gate.css';
+</style>

package/src/components/SampleSelector.colors.ts

@@ -6,6 +6,7 @@ export type ColorEdit =
   | { kind: 'family'; names: string[] }
 
 export const DEFAULT_COLOR_PICKER_SEED = '#3B82F6'
+export const SAMPLE_GROUP_COLOR_OPTIONS = DEFAULT_COLORS.slice(0, 5)
 
 export function applySampleGroupColorEdit(
   groups: SampleGroup[],
@@ -31,13 +32,17 @@ export function pickUnusedSampleGroupColor(groups: SampleGroup[]): string {
   return DEFAULT_COLORS.find(color => !usedColors.has(color)) || DEFAULT_COLORS[0]
 }
 
-export function createSampleGroup(name: string, existingGroups: SampleGroup[]): SampleGroup | null {
+export function createSampleGroup(
+  name: string,
+  existingGroups: SampleGroup[],
+  color?: string,
+): SampleGroup | null {
   const trimmedName = name.trim()
   if (!trimmedName) return null
 
   return {
     name: trimmedName,
-    color: pickUnusedSampleGroupColor(existingGroups),
+    color: color || pickUnusedSampleGroupColor(existingGroups),
     samples: [],
   }
 }

package/src/components/SampleSelector.story.vue

@@ -17,6 +17,29 @@ const mockGroups: SampleGroup[] = [
   { name: 'Vehicle', color: '#F59E0B', samples: ['Vehicle_Rep1', 'Vehicle_Rep2', 'Vehicle_Rep3'] },
 ]
 
+const manualSamples = [
+  'Pt001_TumorA_d7_rep1',
+  'Pt001_TumorA_d7_rep1_reseq2024',
+  'Pt001_TumorA_d14_rep1',
+  'Pt002_TumorB_d7_rep1',
+  'Pt002_tumorb_d7_rep2',
+  'Pt002_TumorB_d14_rep1',
+  'Pt003_NoID_d7_rep1',
+  'Pt003_TumorC_d14_rep1_redo',
+  'Ctrl_pooled_old_naming',
+  'control_2_(redo)',
+  'Pt004_TumorA_d7_2024batch2',
+  'Pt004_TumorA_d14',
+  'QC_pool_01',
+  'blank_run3',
+]
+
+const manualGroups: SampleGroup[] = [
+  { name: 'Responder/Day 7', color: '#0EA5A4', samples: ['Pt001_TumorA_d7_rep1'] },
+  { name: 'Responder/Day 14', color: '#0EA5A4', samples: ['Pt001_TumorA_d14_rep1'] },
+  { name: 'Non-responder/Day 7', color: '#F43F5E', samples: ['Pt002_TumorB_d7_rep1'] },
+]
+
 // Demonstrates same-hue gradient for sub-groups inside a major group:
 // each Treatment_* gets a shade of the major group's color.
 const hierarchicalSamples = [
@@ -83,6 +106,17 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </div>
     </Variant>
 
+    <Variant title="With Manual Group Button">
+      <div style="padding: 2rem; max-width: 1040px;">
+        <SampleSelector
+          :model-value="[]"
+          :samples="manualSamples"
+          :groups="manualGroups"
+          :enable-smart-group="false"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Hierarchical Color Family">
       <div style="padding: 2rem; max-width: 460px;">
         <SampleSelector

package/src/components/SampleSelector.vue

@@ -54,6 +54,7 @@ const emit = defineEmits<{
 
 // UI State
 const showSmartGroupModal = ref(false)
+const groupingModalMode = ref<'auto' | 'manual'>('auto')
 const newGroupName = ref('')
 const editingColor = ref<ColorEdit | null>(null)
 const colorPickerInput = ref<HTMLInputElement | null>(null)
@@ -165,6 +166,11 @@ function handleSmartGroupApply(result: AutoGroupResult) {
   emit('update:groups', result.groups)
 }
 
+function openGroupingModal(mode: 'auto' | 'manual') {
+  groupingModalMode.value = mode
+  showSmartGroupModal.value = true
+}
+
 // Group management
 function clearGroups() {
   internalGroups.value = []
@@ -247,7 +253,7 @@ defineExpose({ handleSmartGroupApply })
           size="sm"
           :disabled="resolvedSamples.length === 0"
           class="mint-sample-selector__action-btn"
-          @click="showSmartGroupModal = true"
+          @click="openGroupingModal('auto')"
         >
           <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
@@ -255,6 +261,19 @@ defineExpose({ handleSmartGroupApply })
           <span>Smart Group</span>
         </BaseButton>
 
+        <BaseButton
+          variant="secondary"
+          size="sm"
+          :disabled="resolvedSamples.length === 0"
+          class="mint-sample-selector__action-btn"
+          @click="openGroupingModal('manual')"
+        >
+          <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3 3 7.5l9 4.5 9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5" />
+          </svg>
+          <span>Manual Group</span>
+        </BaseButton>
+
         <!-- Reset Button -->
         <BaseButton
           variant="ghost"
@@ -673,6 +692,8 @@ defineExpose({ handleSmartGroupApply })
           v-for="sample in filteredSamples"
           :key="sample"
           class="mint-sample-selector__flat-item"
+          :title="sample"
+          :aria-label="`Sample: ${sample}`"
         >
           <input
             type="checkbox"
@@ -693,6 +714,8 @@ defineExpose({ handleSmartGroupApply })
     <AutoGroupModal
       v-model="showSmartGroupModal"
       :samples="resolvedSamples"
+      :groups="internalGroups"
+      :initial-mode="groupingModalMode"
       :experiment-id="resolvedExperimentId"
       :design-data="resolvedDesignData"
       @apply="handleSmartGroupApply"

package/src/components/SampleSelectorSampleRow.vue

@@ -36,6 +36,8 @@ const checkboxClasses = computed(() => [
       'mint-sample-selector__sample',
       dragging ? 'mint-sample-selector__sample--dragging' : '',
     ]"
+    :title="sample"
+    :aria-label="`Sample: ${sample}`"
     draggable="true"
   >
     <svg class="mint-sample-selector__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/src/components/index.ts

@@ -40,6 +40,7 @@ export { default as AppAvatarMenu } from './AppAvatarMenu.vue'
 export { default as AppPluginSwitcher } from './AppPluginSwitcher.vue'
 export { default as AppSidebar } from './AppSidebar.vue'
 export { default as AppLayout } from './AppLayout.vue'
+export { default as MobileSupportGate } from './MobileSupportGate.vue'
 export { default as PluginWorkspaceView } from './PluginWorkspaceView.vue'
 export { default as ComponentBindingRenderer } from './ComponentBindingRenderer.vue'
 export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'

package/src/composables/index.ts

@@ -102,6 +102,14 @@ export {
   type UseEventListenerObjectOptions,
   type UseEventListenerOptions,
 } from './useEventListener'
+export {
+  DEFAULT_MOBILE_VIEWPORT_QUERY,
+  useMobileSupportGate,
+  type MobileSupportSource,
+  type MobileViewportQuerySource,
+  type UseMobileSupportGateOptions,
+  type UseMobileSupportGateReturn,
+} from './useMobileSupportGate'
 export {
   useDebouncedWatch,
   type DebouncedWatchCallback,

package/src/composables/useMobileSupportGate.ts

@@ -0,0 +1,80 @@
+import { computed, onMounted, onUnmounted, ref, unref, watch, type ComputedRef, type Ref } from 'vue'
+
+export const DEFAULT_MOBILE_VIEWPORT_QUERY = '(max-width: 767px)'
+
+export type MobileSupportSource = boolean | Ref<boolean> | ComputedRef<boolean>
+export type MobileViewportQuerySource = string | Ref<string> | ComputedRef<string>
+
+export interface UseMobileSupportGateOptions {
+  supported?: MobileSupportSource
+  mediaQuery?: MobileViewportQuerySource
+}
+
+export interface UseMobileSupportGateReturn {
+  isMobileViewport: Ref<boolean>
+  isSupported: ComputedRef<boolean>
+  shouldShowUnsupported: ComputedRef<boolean>
+}
+
+export function useMobileSupportGate(options: UseMobileSupportGateOptions = {}): UseMobileSupportGateReturn {
+  const isMobileViewport = ref(false)
+
+  const mediaQuery = computed(() => {
+    const value = unref(options.mediaQuery)
+    return value?.trim() || DEFAULT_MOBILE_VIEWPORT_QUERY
+  })
+
+  const isSupported = computed(() => {
+    if (options.supported === undefined) return true
+    return Boolean(unref(options.supported))
+  })
+
+  const shouldShowUnsupported = computed(() => isMobileViewport.value && !isSupported.value)
+
+  let mediaQueryList: MediaQueryList | null = null
+  let removeMediaListener: (() => void) | undefined
+
+  const syncMobileState = (event?: MediaQueryListEvent | MediaQueryList) => {
+    isMobileViewport.value = Boolean(event?.matches ?? mediaQueryList?.matches)
+  }
+
+  const unbindMediaQuery = () => {
+    removeMediaListener?.()
+    removeMediaListener = undefined
+    mediaQueryList = null
+  }
+
+  const bindMediaQuery = () => {
+    unbindMediaQuery()
+
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      isMobileViewport.value = false
+      return
+    }
+
+    const queryList = window.matchMedia(mediaQuery.value)
+    mediaQueryList = queryList
+    syncMobileState(queryList)
+
+    const handleChange = (event: MediaQueryListEvent) => syncMobileState(event)
+
+    if (typeof queryList.addEventListener === 'function') {
+      queryList.addEventListener('change', handleChange)
+      removeMediaListener = () => queryList.removeEventListener('change', handleChange)
+      return
+    }
+
+    queryList.addListener(handleChange)
+    removeMediaListener = () => queryList.removeListener(handleChange)
+  }
+
+  onMounted(bindMediaQuery)
+  watch(mediaQuery, bindMediaQuery, { flush: 'post' })
+  onUnmounted(unbindMediaQuery)
+
+  return {
+    isMobileViewport,
+    isSupported,
+    shouldShowUnsupported,
+  }
+}