@morscherlab/mint-sdk 1.1.25 → 1.2.0-beta.10

package/src/components/SampleSelector.vue

@@ -25,6 +25,7 @@ import {
   removeSampleFromGroup as removeSampleFromSampleGroup,
   removeSampleGroups,
 } from './SampleSelector.groups'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   samples?: string[]
@@ -35,6 +36,15 @@ interface Props {
   experimentId?: number
   designData?: Record<string, unknown>
   autoloadExperimentData?: boolean
+  /** Replace the selector body with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the selector body is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /** Empty-state headline shown when there are no samples to select from. */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,6 +55,9 @@ const props = withDefaults(defineProps<Props>(), {
   experimentId: undefined,
   designData: undefined,
   autoloadExperimentData: true,
+  loading: false,
+  error: null,
+  emptyMessage: 'No samples available',
 })
 
 const emit = defineEmits<{
@@ -69,6 +82,8 @@ const internalGroups = computed({
 })
 
 const {
+  announcement: reorderAnnouncement,
+  announcerStyle,
   draggingSample,
   dragOverGroup,
   draggingGroup,
@@ -81,6 +96,7 @@ const {
   handleDragLeave,
   handleDrop,
   handleGroupDragStart,
+  handleGroupReorderKeydown,
   handleGroupDragEnd,
   handleGroupDragOver,
   handleGroupDragLeave,
@@ -227,6 +243,7 @@ const treeContext = computed<SampleGroupTreeContext>(() => ({
   onGroupDragOver: handleGroupDragOver,
   onGroupDragLeave: handleGroupDragLeave,
   onGroupDrop: handleGroupDrop,
+  onGroupReorderKeydown: handleGroupReorderKeydown,
 }))
 
 // New group
@@ -237,13 +254,36 @@ function addNewGroup() {
   newGroupName.value = ''
 }
 
+/** True while a loading, error or empty placeholder stands in for the body. */
+const isPlaceholderState = computed(() =>
+  props.loading || Boolean(props.error) || resolvedSamples.value.length === 0,
+)
+
 defineExpose({ handleSmartGroupApply })
 </script>
 
 <template>
   <div class="mint-sample-selector">
+    <div v-if="error" class="mint-sample-selector__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-sample-selector__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading samples" />
+      </slot>
+    </div>
+
+    <div v-else-if="resolvedSamples.length === 0" class="mint-sample-selector__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <!-- Select All Row -->
-    <label class="mint-sample-selector__select-all">
+    <label v-if="!isPlaceholderState" class="mint-sample-selector__select-all">
       <input
         type="checkbox"
         :checked="isAllSelected"
@@ -255,7 +295,7 @@ defineExpose({ handleSmartGroupApply })
     </label>
 
     <!-- Action Buttons Row -->
-    <div v-if="enableGrouping" class="mint-sample-selector__actions">
+    <div v-if="!isPlaceholderState && enableGrouping" class="mint-sample-selector__actions">
       <div class="mint-sample-selector__actions-row">
         <!-- Grouping Button -->
         <BaseButton
@@ -291,7 +331,7 @@ defineExpose({ handleSmartGroupApply })
     </div>
 
     <!-- Grouped View -->
-    <div v-if="groupingEnabled" class="mint-sample-selector__grouped">
+    <div v-if="!isPlaceholderState && groupingEnabled" class="mint-sample-selector__grouped">
       <!-- Groups Header -->
       <div class="mint-sample-selector__groups-header">
         <span class="mint-sample-selector__groups-title">Groups ({{ internalGroups.length }})</span>
@@ -320,7 +360,7 @@ defineExpose({ handleSmartGroupApply })
         />
 
         <!-- Empty state -->
-        <div v-if="internalGroups.length === 0" class="mint-sample-selector__empty">
+        <div v-if="internalGroups.length === 0" class="mint-sample-selector__hint">
           Click Smart to auto-group samples
         </div>
       </div>
@@ -394,7 +434,7 @@ defineExpose({ handleSmartGroupApply })
     </div>
 
     <!-- Flat View (when no groups) -->
-    <div v-if="!groupingEnabled" class="mint-sample-selector__flat">
+    <div v-if="!isPlaceholderState && !groupingEnabled" class="mint-sample-selector__flat">
       <!-- Search -->
       <div class="mint-sample-selector__search">
         <svg class="mint-sample-selector__search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -427,7 +467,7 @@ defineExpose({ handleSmartGroupApply })
           <span class="mint-sample-selector__flat-name">{{ sample }}</span>
         </div>
 
-        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mint-sample-selector__empty">
+        <div v-if="filteredSamples.length === 0 && searchQuery.trim()" class="mint-sample-selector__hint">
           No samples match "{{ searchQuery }}"
         </div>
       </div>
@@ -443,9 +483,8 @@ defineExpose({ handleSmartGroupApply })
       :design-data="resolvedDesignData"
       @apply="handleSmartGroupApply"
     />
+
+    <!-- Group reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sample-selector.css';
-</style>

package/src/components/SampleSelectorGroupNode.vue

@@ -54,6 +54,18 @@ function onHeaderDrop(event: DragEvent) {
   if (dragKind.value === null) return
   props.ctx.onGroupDrop(dragName.value, dragKind.value, event)
 }
+
+/** Enter/Space expand the node; Alt+ArrowUp/Down reorder it among its siblings. */
+function onHeaderKeydown(event: KeyboardEvent) {
+  if (event.altKey) {
+    if (dragKind.value === null) return
+    props.ctx.onGroupReorderKeydown(dragName.value, dragKind.value, event)
+    return
+  }
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  props.ctx.toggleExpanded(props.node.key)
+}
 </script>
 
 <template>
@@ -81,7 +93,14 @@ function onHeaderDrop(event: DragEvent) {
         reorderEdge === 'after' ? 'mint-sample-selector__header--drag-over-after' : '',
       ]"
       :draggable="dragKind !== null"
+      role="button"
+      tabindex="0"
+      :aria-expanded="expanded"
+      :aria-label="dragKind !== null
+        ? `${node.label}. Press Alt with the up or down arrow keys to reorder.`
+        : node.label"
       @click="ctx.toggleExpanded(node.key)"
+      @keydown="onHeaderKeydown"
       @dragstart="onHeaderDragStart"
       @dragend="ctx.onGroupDragEnd"
       @dragover="onHeaderDragOver"

package/src/components/ScheduleCalendar.story.vue

@@ -86,6 +86,8 @@ const mockBlockedSlots: ScheduleBlockedSlot[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     modelValue: today,
     view: 'week' as const,
     events: mockEvents,
@@ -106,6 +108,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 1rem; height: 700px;">
           <ScheduleCalendar
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.modelValue"
             :view="state.view"
             :events="state.events"
@@ -123,6 +127,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.view"
           title="View"

package/src/components/ScheduleCalendar.vue

@@ -7,11 +7,13 @@ import type {
   ScheduleBlockedSlot,
 } from '../types/components'
 import { useScheduleDrag } from '../composables/useScheduleDrag'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 import {
   SCHEDULE_SLOT_HEIGHT,
   parseScheduleModelDate,
   useScheduleCalendarLayout,
 } from '../composables/useScheduleCalendarLayout'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   modelValue?: Date | string
@@ -28,6 +30,19 @@ interface Props {
   showNavigation?: boolean
   statusColors?: Record<string, string>
   locale?: string
+  /** Replace the calendar grid with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the calendar grid is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /**
+   * Opt-in empty-state headline. An empty grid is meaningful on a calendar, so
+   * the empty state only replaces it when this message is supplied and there
+   * are no events.
+   */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,6 +58,8 @@ const props = withDefaults(defineProps<Props>(), {
   showViewToggle: true,
   showNavigation: true,
   locale: 'en-US',
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -57,6 +74,11 @@ const emit = defineEmits<{
 
 const SLOT_HEIGHT = SCHEDULE_SLOT_HEIGHT
 const currentView = ref<ScheduleView>(props.view)
+
+/** Empty state is opt-in: it needs an `emptyMessage` and an event-free range. */
+const showEmptyState = computed(() =>
+  Boolean(props.emptyMessage) && props.events.length === 0,
+)
 const currentDate = ref<Date>(parseScheduleModelDate(props.modelValue))
 const nowTimer = ref<ReturnType<typeof setInterval>>()
 const now = ref(new Date())
@@ -76,7 +98,9 @@ const weekStartsOnRef = computed(() => props.weekStartsOn)
 const localeRef = computed(() => props.locale)
 const showNowIndicatorRef = computed(() => props.showNowIndicator)
 
-const { isDragging, ghost, startCreate, startMove, startResize } = useScheduleDrag({
+const { announcement, announce, announcerStyle } = useReorderAnnouncer()
+
+const { isDragging, ghost, startCreate, startMove, startResize, nudgeEvent } = useScheduleDrag({
   slotDuration: slotDurationRef,
   dayStartHour: dayStartRef,
   dayEndHour: dayEndRef,
@@ -180,6 +204,35 @@ function onResizePointerDown(event: ScheduleEvent, edge: 'top' | 'bottom', dayIn
   startResize(event, edge, e.clientY, dayIndex)
 }
 
+/**
+ * Keyboard alternative to dragging an event: Alt+ArrowUp/Down move it by one
+ * slot, Shift+Alt+ArrowUp/Down shorten or lengthen it, Enter/Space open it.
+ */
+function onEventKeydown(event: ScheduleEvent, e: KeyboardEvent) {
+  if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    emit('event-click', event)
+    return
+  }
+  if (!e.altKey) return
+  const direction = e.key === 'ArrowUp' ? -1 : e.key === 'ArrowDown' ? 1 : 0
+  if (direction === 0) return
+
+  e.preventDefault()
+  const mode = e.shiftKey ? 'resize' : 'move'
+  const applied = nudgeEvent(event, direction, mode)
+  announce(applied
+    ? `${event.title} ${mode === 'move' ? 'moved' : 'resized'} to ${formatEventTime(event)}.`
+    : `${event.title} cannot move further.`)
+}
+
+/** Instructions announced with each event. */
+function eventLabel(event: ScheduleEvent): string {
+  const base = `${event.title}, ${formatEventTime(event)}`
+  if (props.readonly || event.draggable === false) return base
+  return `${base}. Press Alt with the up or down arrow keys to reschedule it.`
+}
+
 function onMonthDayClick(date: Date) {
   currentDate.value = date
   emit('update:modelValue', date)
@@ -254,8 +307,27 @@ onUnmounted(() => {
       </div>
     </div>
 
+    <!-- Loading / error / empty placeholders replace the grid -->
+    <div v-if="error" class="mint-schedule__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-schedule__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" loading-label="Loading schedule" />
+      </slot>
+    </div>
+
+    <div v-else-if="showEmptyState" class="mint-schedule__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <!-- Day / Week View -->
-    <template v-if="currentView === 'day' || currentView === 'week'">
+    <template v-else-if="currentView === 'day' || currentView === 'week'">
       <!-- Day headers -->
       <div v-if="currentView === 'week'" class="mint-schedule__day-headers">
         <div class="mint-schedule__day-header-gutter" />
@@ -312,7 +384,11 @@ onUnmounted(() => {
               :key="event.id"
               :class="['mint-schedule__event', getStatusClass(event.status)]"
               :style="getEventStyle(event, day) || undefined"
+              role="button"
+              tabindex="0"
+              :aria-label="eventLabel(event)"
               @click="onEventClick(event, $event)"
+              @keydown="onEventKeydown(event, $event)"
               @pointerdown="onEventPointerDown(event, dayIdx, $event)"
             >
               <slot name="event" :event="event">
@@ -364,7 +440,7 @@ onUnmounted(() => {
     </template>
 
     <!-- Month View -->
-    <template v-if="currentView === 'month'">
+    <template v-else-if="currentView === 'month'">
       <div class="mint-schedule__month-grid">
         <!-- Weekday headers -->
         <div
@@ -406,9 +482,8 @@ onUnmounted(() => {
         </div>
       </div>
     </template>
+
+    <!-- Reschedule announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ announcement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/schedule-calendar.css';
-</style>

package/src/components/ScientificNumber.vue

@@ -191,7 +191,3 @@ async function copyToClipboard() {
     </button>
   </span>
 </template>
-
-<style>
-@import '../styles/components/scientific-number.css';
-</style>

package/src/components/SecretInput.story.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SecretInput from './SecretInput.vue'
+import type { PluginSecretRef } from '../utils/pluginSecrets'
+
+const sizes = ['sm', 'md', 'lg'] as const
+
+const storedRef: PluginSecretRef = { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true }
+const lockedRef: PluginSecretRef = { $secret: null, locked: true }
+
+const stored = ref<PluginSecretRef | string | null>({ ...storedRef })
+const unset = ref<PluginSecretRef | string | null>(null)
+const locked = ref<PluginSecretRef | string | null>({ ...lockedRef })
+</script>
+
+<template>
+  <Story title="Base Inputs/SecretInput">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SecretInput
+            v-model="state.value"
+            :placeholder="state.placeholder"
+            :disabled="state.disabled"
+            :error="state.error"
+            :size="state.size"
+          />
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+            Submits: <code>{{ JSON.stringify(state.value) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.placeholder" title="Placeholder" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="sizes.map(size => ({ label: size, value: size }))"
+        />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.error" title="Error" />
+      </template>
+
+      <template #initState>
+        {{ {
+          value: { $secret: 'sec_0f2a4c6e8a0c2e4a6c8e0a2c4e6a8c0e', set: true },
+          placeholder: 'Enter a new value',
+          disabled: false,
+          error: false,
+          size: 'md',
+        } }}
+      </template>
+    </Variant>
+
+    <Variant title="States">
+      <div style="padding: 2rem; max-width: 600px; display: flex; flex-direction: column; gap: 1.5rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">
+            Stored
+          </p>
+          <SecretInput v-model="stored" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">
+            Not set
+          </p>
+          <SecretInput v-model="unset" />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;">
+            Provided by environment
+          </p>
+          <SecretInput v-model="locked" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SecretInput.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/** Edits one plugin secret setting: shows set / not set / provided by environment, and submits a `$secret` reference, a new value, or `null`. */
+import { computed, ref, watch } from 'vue'
+import BaseInput from './BaseInput.vue'
+import BaseButton from './BaseButton.vue'
+import {
+  clearPluginSecret,
+  isPluginSecretLocked,
+  isPluginSecretRef,
+  keepPluginSecret,
+  pluginSecretLabel,
+  pluginSecretState,
+  setPluginSecret,
+  type PluginSecretRef,
+  type PluginSecretState,
+} from '../utils/pluginSecrets'
+
+type SecretValue = PluginSecretRef | string | null
+
+interface Props {
+  /** The `$secret` marker from the settings response, a typed string, or `null`. */
+  modelValue?: SecretValue
+  placeholder?: string
+  disabled?: boolean
+  error?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  /** Label on the control that starts entering a replacement value. */
+  changeLabel?: string
+  /** Label on the control that clears a stored secret. */
+  clearLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  placeholder: 'Enter a new value',
+  disabled: false,
+  error: false,
+  size: 'md',
+  changeLabel: 'Change',
+  clearLabel: 'Clear',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: SecretValue]
+}>()
+
+/** The reference this field started from, so an abandoned edit can restore it. */
+const storedReference = ref<PluginSecretRef | null>(keepPluginSecret(props.modelValue))
+const isEditing = ref(typeof props.modelValue === 'string')
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (isPluginSecretRef(value)) {
+      storedReference.value = keepPluginSecret(value)
+      isEditing.value = false
+    }
+  },
+)
+
+const state = computed<PluginSecretState>(() => pluginSecretState(props.modelValue))
+const locked = computed(() => isPluginSecretLocked(props.modelValue)
+  || isPluginSecretLocked(storedReference.value))
+const statusLabel = computed(() => isEditing.value
+  ? 'New value'
+  : pluginSecretLabel(props.modelValue))
+const typedValue = computed(() => typeof props.modelValue === 'string' ? props.modelValue : '')
+const canClear = computed(() => !locked.value && (state.value === 'set' || isEditing.value))
+
+function startEditing(): void {
+  if (props.disabled || locked.value) return
+  isEditing.value = true
+  emit('update:modelValue', setPluginSecret(''))
+}
+
+function updateTyped(value: string | number | null): void {
+  emit('update:modelValue', setPluginSecret(value == null ? '' : String(value)))
+}
+
+function cancelEditing(): void {
+  isEditing.value = false
+  emit('update:modelValue', storedReference.value ? { ...storedReference.value } : null)
+}
+
+function clear(): void {
+  if (props.disabled || locked.value) return
+  isEditing.value = false
+  storedReference.value = null
+  emit('update:modelValue', clearPluginSecret())
+}
+</script>
+
+<template>
+  <div class="mint-secret-input" :class="{ 'mint-secret-input--error': error }">
+    <div class="mint-secret-input__status">
+      <span
+        class="mint-secret-input__badge"
+        :class="`mint-secret-input__badge--${isEditing ? 'pending' : state}`"
+      >{{ statusLabel }}</span>
+      <span v-if="locked" class="mint-secret-input__hint">
+        This value comes from the environment and cannot be edited here.
+      </span>
+    </div>
+
+    <BaseInput
+      v-if="isEditing"
+      type="password"
+      autocomplete="new-password"
+      :model-value="typedValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :error="error"
+      :size="size"
+      @update:model-value="updateTyped"
+    />
+
+    <div class="mint-secret-input__actions">
+      <BaseButton
+        v-if="!isEditing"
+        type="button"
+        variant="secondary"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled || locked"
+        @click="startEditing"
+      >
+        {{ changeLabel }}
+      </BaseButton>
+      <BaseButton
+        v-else
+        type="button"
+        variant="ghost"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled"
+        @click="cancelEditing"
+      >
+        Cancel
+      </BaseButton>
+      <BaseButton
+        v-if="canClear"
+        type="button"
+        variant="ghost"
+        :size="size === 'lg' ? 'md' : 'sm'"
+        :disabled="disabled"
+        @click="clear"
+      >
+        {{ clearLabel }}
+      </BaseButton>
+    </div>
+  </div>
+</template>

package/src/components/SectionCard.vue

@@ -92,7 +92,3 @@ const cardClasses = computed(() => [
     </div>
   </section>
 </template>
-
-<style>
-@import '../styles/components/section-card.css';
-</style>