@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/index.ts

@@ -27,23 +27,23 @@ export { default as FileUploader } from './FileUploader.vue'
 
 // Feedback components
 export { default as AlertBox } from './AlertBox.vue'
-export { default as ToastNotification } from './ToastNotification.vue'
-export { default as AppToastContainer } from './ToastNotification.vue'
+export { default as AppToastContainer } from './AppToastContainer.vue'
 
 // Action components
 export { default as IconButton } from './IconButton.vue'
 export { default as ThemeToggle } from './ThemeToggle.vue'
-export { default as SettingsButton } from './SettingsButton.vue'
 
 // Layout components
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
 export { default as AppTopBar } from './AppTopBar.vue'
-export { default as AppPageSelector } from './AppPageSelector.vue'
-export { default as AppPillNav } from './AppPillNav.vue'
 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 PluginWorkspaceView } from './PluginWorkspaceView.vue'
+export { default as ComponentBindingRenderer } from './ComponentBindingRenderer.vue'
+export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'
+export { default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as PluginIcon } from './PluginIcon.vue'
 
@@ -62,6 +62,10 @@ export { default as ChartContainer } from './ChartContainer.vue'
 export { default as SettingsModal } from './SettingsModal.vue'
 
 // Biological experiment components
+export { default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
+export { default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
+export { default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
+export { default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
 export { default as WellPlate } from './WellPlate.vue'
 export { default as RackEditor } from './RackEditor.vue'
 export { default as SampleLegend } from './SampleLegend.vue'
@@ -70,7 +74,6 @@ export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
 
 // Sample management components
 export { default as SampleSelector } from './SampleSelector.vue'
-export { default as GroupingModal } from './GroupingModal.vue'
 export { default as AutoGroupModal } from './AutoGroupModal.vue'
 export { default as GroupAssigner } from './GroupAssigner.vue'
 
@@ -99,9 +102,7 @@ export { default as BatchProgressList } from './BatchProgressList.vue'
 
 // Form builder components
 export { default as FormBuilder } from './FormBuilder.vue'
-export { default as FormSection } from './FormSection.vue'
 export { default as FormActions } from './FormActions.vue'
-export { default as FormFieldRenderer } from './FormFieldRenderer.vue'
 
 // Experiment data display components
 export { default as ExperimentDataViewer } from './ExperimentDataViewer.vue'

package/src/components/internal/ActionItemInternal.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/** Private routable action primitive for SDK nav and menu components. */
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  href?: string
+  to?: string | Record<string, unknown>
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+type RouterNavigate = (event?: MouseEvent) => unknown
+
+function blockDisabledEvent(event: MouseEvent) {
+  event.preventDefault()
+  event.stopImmediatePropagation()
+}
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    blockDisabledEvent(event)
+    return
+  }
+  emit('click', event)
+}
+
+function handleRouterClick(event: MouseEvent, navigate: RouterNavigate) {
+  if (props.disabled) {
+    blockDisabledEvent(event)
+    return
+  }
+  emit('click', event)
+  void navigate(event)
+}
+</script>
+
+<template>
+  <a
+    v-if="href"
+    v-bind="$attrs"
+    :href="disabled ? undefined : href"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled ? -1 : undefined"
+    @click="handleClick"
+  >
+    <slot />
+  </a>
+  <router-link
+    v-else-if="to"
+    :to="to"
+    custom
+    v-slot="{ href: routerHref, navigate }"
+  >
+    <a
+      v-bind="$attrs"
+      :href="disabled ? undefined : routerHref"
+      :aria-disabled="disabled || undefined"
+      :tabindex="disabled ? -1 : undefined"
+      @click="handleRouterClick($event, navigate)"
+    >
+      <slot />
+    </a>
+  </router-link>
+  <button
+    v-else
+    v-bind="$attrs"
+    :type="type"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/internal/AppPageSelectorInternal.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+/** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
+import { computed } from 'vue'
+import { useDropdownState } from '../../composables/useDropdownState'
+import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
+import { normalizeItemInput } from '../../utils/items'
+import { isPluginIconFormat } from '../../utils/pluginIcon'
+import ActionItemInternal from './ActionItemInternal.vue'
+import PluginIcon from '../PluginIcon.vue'
+
+interface Props {
+  pages: PageSelectorItemInput[]
+  currentPageId?: string
+  placeholder?: string
+  minWidth?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Go to…',
+  minWidth: '11.25rem',
+})
+
+const emit = defineEmits<{
+  select: [page: PageSelectorItem]
+}>()
+
+const { isOpen, rootRef, close, toggle } = useDropdownState()
+const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
+
+const current = computed<PageSelectorItem | undefined>(() =>
+  normalizedPages.value.find((p) => p.id === props.currentPageId) ?? normalizedPages.value[0],
+)
+
+function handleSelect(page: PageSelectorItem) {
+  if (page.disabled) return
+  if (page.href || page.to) {
+    close()
+    return
+  }
+  emit('select', page)
+  close()
+}
+</script>
+
+<template>
+  <div ref="rootRef" class="mint-page-selector" :style="{ minWidth }">
+    <button
+      type="button"
+      class="mint-page-selector__trigger"
+      :class="{ 'mint-page-selector__trigger--open': isOpen }"
+      :aria-expanded="isOpen"
+      aria-haspopup="menu"
+      @click.stop="toggle"
+    >
+      <span
+        v-if="current"
+        class="mint-page-selector__icon"
+        :class="{ 'mint-page-selector__icon--metadata': isPluginIconFormat(current.icon) }"
+      >
+        <slot name="icon" :page="current">
+          <PluginIcon
+            v-if="isPluginIconFormat(current.icon)"
+            class="mint-page-selector__trigger-metadata-icon"
+            :icon="current.icon"
+            size="sm"
+            variant="tinted"
+          />
+          <span v-else class="mint-page-selector__icon-fallback">{{ current.label.charAt(0) }}</span>
+        </slot>
+      </span>
+      <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
+      <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
+        <svg
+          class="mint-page-selector__chevron"
+          :class="{ 'mint-page-selector__chevron--open': isOpen }"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </span>
+    </button>
+
+    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
+      <div class="mint-page-selector__menu-title">Go to</div>
+      <ActionItemInternal
+        v-for="page in normalizedPages"
+        :key="page.id"
+        :href="page.href"
+        :to="page.to"
+        :disabled="page.disabled"
+        :class="[
+          'mint-page-selector__item',
+          { 'mint-page-selector__item--active': page.id === current?.id },
+          { 'mint-page-selector__item--disabled': page.disabled },
+        ]"
+        role="menuitem"
+        @click="handleSelect(page)"
+      >
+        <span
+          class="mint-page-selector__item-icon"
+          :class="{ 'mint-page-selector__item-icon--metadata': isPluginIconFormat(page.icon) }"
+        >
+          <slot name="item-icon" :page="page">
+            <PluginIcon
+              v-if="isPluginIconFormat(page.icon)"
+              class="mint-page-selector__metadata-icon"
+              :icon="page.icon"
+              size="sm"
+              variant="tinted"
+            />
+            <span v-else class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+          </slot>
+        </span>
+        <span class="mint-page-selector__item-label">{{ page.label }}</span>
+        <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
+      </ActionItemInternal>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../../styles/components/app-page-selector.css';
+</style>

package/src/components/internal/AppPillNavInternal.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+/** Horizontal pill-style navigation bar that emits select events and supports href, router-link, button, or dropdown items. */
+import { computed, ref } from 'vue'
+import type { PillNavItem, PillNavItemInput, PillNavOption, PillNavOptionInput } from '../../types/components'
+import { normalizeItemInput } from '../../utils/items'
+import { useEventListener } from '../../composables/useEventListener'
+import ActionItemInternal from './ActionItemInternal.vue'
+
+interface Props {
+  items: PillNavItemInput[]
+  currentItemId?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [item: PillNavItem]
+  'option-select': [option: PillNavOption, item: PillNavItem]
+}>()
+
+const openItemId = ref<string | null>(null)
+const itemRefs = ref<Map<string, HTMLElement>>(new Map())
+
+const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+
+function handleClick(item: PillNavItem) {
+  if (item.disabled) return
+  if (item.children?.length) {
+    toggleDropdown(item.id)
+    return
+  }
+  if (item.href || item.to) return
+  emit('select', item)
+}
+
+function handleOptionClick(option: PillNavOption, item: PillNavItem) {
+  if (option.disabled) return
+  if (!option.href && !option.to) emit('option-select', option, item)
+  openItemId.value = null
+}
+
+function normalizePillNavItem(item: PillNavItemInput): PillNavItem {
+  const normalized = normalizeItemInput<Omit<PillNavItem, 'children'> & { children?: PillNavOptionInput[] }>(item)
+  return {
+    ...normalized,
+    children: normalized.children?.map(normalizeItemInput),
+  }
+}
+
+function toggleDropdown(itemId: string) {
+  openItemId.value = openItemId.value === itemId ? null : itemId
+}
+
+function setItemRef(el: HTMLElement | null, itemId: string) {
+  if (el) {
+    itemRefs.value.set(itemId, el)
+  } else {
+    itemRefs.value.delete(itemId)
+  }
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  const clickedInside = Array.from(itemRefs.value.values()).some(el => el.contains(target))
+  if (!clickedInside) openItemId.value = null
+}
+
+const hasActiveChild = (item: PillNavItem) =>
+  item.children?.some(child => child.id === props.currentItemId) ?? false
+
+function isSvgIcon(icon: PillNavItem['icon']): icon is string | string[] {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+useEventListener(() => document, 'click', handleClickOutside)
+</script>
+
+<template>
+  <nav class="mint-pill-nav" aria-label="Primary">
+    <div
+      v-for="item in normalizedItems"
+      :key="item.id"
+      :ref="(el) => setItemRef(el as HTMLElement | null, item.id)"
+      class="mint-pill-nav__item-wrap"
+    >
+      <button
+        v-if="item.children?.length"
+        type="button"
+        :class="[
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId || hasActiveChild(item) },
+          { 'mint-pill-nav__item--disabled': item.disabled },
+        ]"
+        :disabled="item.disabled"
+        :aria-expanded="openItemId === item.id"
+        aria-haspopup="menu"
+        @click.stop="handleClick(item)"
+      >
+        <svg
+          v-if="isSvgIcon(item.icon)"
+          class="mint-pill-nav__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <template v-if="Array.isArray(item.icon)">
+            <path v-for="(d, index) in item.icon" :key="index" :d="d" />
+          </template>
+          <path v-else :d="item.icon" />
+        </svg>
+        {{ item.label }}
+        <svg
+          class="mint-pill-nav__chevron"
+          :class="{ 'mint-pill-nav__chevron--open': openItemId === item.id }"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      <ActionItemInternal
+        v-else
+        :href="item.href"
+        :to="item.to"
+        :disabled="item.disabled"
+        :class="[
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId },
+          { 'mint-pill-nav__item--disabled': item.disabled },
+        ]"
+        @click="handleClick(item)"
+      >
+        <svg
+          v-if="isSvgIcon(item.icon)"
+          class="mint-pill-nav__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <template v-if="Array.isArray(item.icon)">
+            <path v-for="(d, index) in item.icon" :key="index" :d="d" />
+          </template>
+          <path v-else :d="item.icon" />
+        </svg>
+        {{ item.label }}
+      </ActionItemInternal>
+
+      <div
+        v-if="item.children?.length && openItemId === item.id"
+        class="mint-pill-nav__dropdown"
+        role="menu"
+      >
+        <ActionItemInternal
+          v-for="option in item.children"
+          :key="option.id"
+          :href="option.href"
+          :to="option.to"
+          :disabled="option.disabled"
+          :class="[
+            'mint-pill-nav__dropdown-item',
+            { 'mint-pill-nav__dropdown-item--active': option.id === currentItemId },
+            { 'mint-pill-nav__dropdown-item--disabled': option.disabled },
+          ]"
+          role="menuitem"
+          @click="handleOptionClick(option, item)"
+        >
+          <span class="mint-pill-nav__dropdown-label">{{ option.label }}</span>
+          <span v-if="option.description" class="mint-pill-nav__dropdown-description">
+            {{ option.description }}
+          </span>
+        </ActionItemInternal>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style>
+@import '../../styles/components/app-pill-nav.css';
+</style>

package/src/components/internal/CalendarGridPanelInternal.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/** Shared calendar grid panel used by date-oriented picker components. */
+import type { CalendarGridDay } from '../../composables/useCalendarGrid'
+
+interface Props {
+  weekDays: readonly string[]
+  monthYear: string
+  days: CalendarGridDay[]
+  selectedDate?: Date | null
+  locale?: string
+  previousLabel?: string
+  nextLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  selectedDate: null,
+  locale: 'en-US',
+  previousLabel: 'Previous month',
+  nextLabel: 'Next month',
+})
+
+const emit = defineEmits<{
+  'previous-month': []
+  'next-month': []
+  select: [day: CalendarGridDay]
+}>()
+
+function isSameDay(date: Date, other: Date | null | undefined): boolean {
+  if (!other) return false
+  return date.toDateString() === other.toDateString()
+}
+
+function isToday(date: Date): boolean {
+  return isSameDay(date, new Date())
+}
+
+function dayAriaLabel(date: Date): string {
+  return date.toLocaleDateString(props.locale, {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <div class="mint-calendar-grid-panel">
+    <div class="mint-date-picker__header">
+      <button
+        type="button"
+        class="mint-date-picker__nav-btn"
+        :aria-label="previousLabel"
+        @click="emit('previous-month')"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m15 18-6-6 6-6" />
+        </svg>
+      </button>
+      <span class="mint-date-picker__month-year">{{ monthYear }}</span>
+      <button
+        type="button"
+        class="mint-date-picker__nav-btn"
+        :aria-label="nextLabel"
+        @click="emit('next-month')"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="mint-date-picker__weekdays">
+      <div
+        v-for="day in weekDays"
+        :key="day"
+        class="mint-date-picker__weekday"
+      >
+        {{ day }}
+      </div>
+    </div>
+
+    <div class="mint-date-picker__grid">
+      <button
+        v-for="(day, index) in days"
+        :key="index"
+        type="button"
+        :disabled="day.isDisabled"
+        :aria-label="dayAriaLabel(day.date)"
+        :aria-selected="isSameDay(day.date, selectedDate)"
+        :class="[
+          'mint-date-picker__day',
+          !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
+          day.isDisabled ? 'mint-date-picker__day--disabled' : '',
+          isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
+          isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
+        ]"
+        @click="emit('select', day)"
+      >
+        {{ day.date.getDate() }}
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/{FormFieldRenderer.vue → internal/FormFieldRendererInternal.vue}

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-/**
- * Renders a single form field inside a FormField wrapper.
- *
- * Resolves the SDK component for the field type from the registry, shows
- * validation errors only after the field has been touched, and handles the
- * FileUploader's event-based upload pattern via `handleUpload`. Consumers can
- * override rendering via the `field:<name>` slot.
- */
 import { computed } from 'vue'
-import type { FormFieldSchema } from '../types/form-builder'
-import type { UseFormReturn } from '../composables/useForm'
-import { getFieldRegistryEntry } from '../composables/formBuilderRegistry'
-import FormField from './FormField.vue'
+import type { FormFieldSchema } from '../../types/form-builder'
+import type { UseFormReturn } from '../../composables/useForm'
+import { getFieldRegistryEntry } from '../../composables/formBuilderRegistry'
+import FormField from '../FormField.vue'
 
 interface Props {
   field: FormFieldSchema

package/src/components/{FormSection.vue → internal/FormSectionRenderer.vue}

@@ -1,18 +1,8 @@
 <script setup lang="ts">
-/**
- * Renders a single `FormSectionSchema` inside a FormBuilder.
- *
- * Filters out hidden fields before rendering, applies the section's column
- * grid and per-field `colSpan`, and switches between a collapsible
- * (`CollapsibleCard`) and a static layout based on `section.collapsible`.
- * The entire section is hidden when all its fields are hidden. Consumers can
- * replace the section body via `section:<id>` or inject content after it via
- * `section:<id>:after`, and override individual fields via `field:<name>`.
- */
 import { computed } from 'vue'
-import type { FormSectionSchema, UseFormBuilderReturn } from '../types/form-builder'
-import CollapsibleCard from './CollapsibleCard.vue'
-import FormFieldRenderer from './FormFieldRenderer.vue'
+import type { FormSectionSchema, UseFormBuilderReturn } from '../../types/form-builder'
+import CollapsibleCard from '../CollapsibleCard.vue'
+import FormFieldRendererInternal from './FormFieldRendererInternal.vue'
 
 interface Props {
   section: FormSectionSchema
@@ -33,7 +23,6 @@ const gridStyle = computed(() => ({
 <template>
   <div v-if="visibleFields.length > 0" class="mint-form-section">
     <slot :name="`section:${section.id}`" :section="section" :form="builder.form">
-      <!-- Collapsible variant -->
       <CollapsibleCard
         v-if="section.collapsible"
         :title="section.title"
@@ -47,7 +36,7 @@ const gridStyle = computed(() => ({
             :style="field.colSpan ? { gridColumn: `span ${field.colSpan}` } : undefined"
           >
             <slot :name="`field:${field.name}`" :field="field" :form="builder.form" :field-props="builder.form.getFieldProps(field.name)">
-              <FormFieldRenderer
+              <FormFieldRendererInternal
                 :field="field"
                 :resolved-props="builder.getResolvedFieldProps(field)"
                 :form="builder.form"
@@ -57,7 +46,6 @@ const gridStyle = computed(() => ({
         </div>
       </CollapsibleCard>
 
-      <!-- Static variant -->
       <div v-else class="mint-form-section--static">
         <div v-if="section.title || section.description" class="mint-form-section__header">
           <h3 v-if="section.title" class="mint-form-section__title">{{ section.title }}</h3>
@@ -70,7 +58,7 @@ const gridStyle = computed(() => ({
             :style="field.colSpan ? { gridColumn: `span ${field.colSpan}` } : undefined"
           >
             <slot :name="`field:${field.name}`" :field="field" :form="builder.form" :field-props="builder.form.getFieldProps(field.name)">
-              <FormFieldRenderer
+              <FormFieldRendererInternal
                 :field="field"
                 :resolved-props="builder.getResolvedFieldProps(field)"
                 :form="builder.form"
@@ -86,5 +74,5 @@ const gridStyle = computed(() => ({
 </template>
 
 <style>
-@import '../styles/components/form-builder.css';
+@import '../../styles/components/form-builder.css';
 </style>