@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.2

package/src/components/index.ts

@@ -1,17 +1,16 @@
+// Components exported from the package root. Lab, shell, data and runtime
+// components are exported from their subpath entries (`src/lab.ts`, ...).
+
 // Base components
 export { default as BaseButton } from './BaseButton.vue'
 export { default as BaseInput } from './BaseInput.vue'
-export { default as BaseTextarea } from './BaseTextarea.vue'
 export { default as BaseSelect } from './BaseSelect.vue'
-export { default as SearchableSelect } from './SearchableSelect.vue'
 export { default as BaseCheckbox } from './BaseCheckbox.vue'
-export { default as BaseToggle } from './BaseToggle.vue'
 export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
 export { default as BaseSlider } from './BaseSlider.vue'
 export { default as BaseTabs } from './BaseTabs.vue'
 export { default as BaseModal } from './BaseModal.vue'
 export { default as SegmentedControl } from './SegmentedControl.vue'
-export { default as MultiSelect } from './MultiSelect.vue'
 export { default as BasePill } from './BasePill.vue'
 export { default as Calendar } from './Calendar.vue'
 export { default as DataFrame } from './DataFrame.vue'
@@ -19,140 +18,39 @@ export { default as DataFrame } from './DataFrame.vue'
 // Form components
 export { default as FormField } from './FormField.vue'
 export { default as DatePicker } from './DatePicker.vue'
-export { default as TimePicker } from './TimePicker.vue'
-export { default as TagsInput } from './TagsInput.vue'
-export { default as SecretInput } from './SecretInput.vue'
 export { default as NumberInput } from './NumberInput.vue'
 export { default as FileUploader } from './FileUploader.vue'
 
 // Feedback components
 export { default as AlertBox } from './AlertBox.vue'
 export { default as AppToastContainer } from './AppToastContainer.vue'
-export { default as RuntimeUpdateNotice } from './RuntimeUpdateNotice.vue'
 
 // Action components
 export { default as ActionMenu } from './ActionMenu.vue'
-export { default as IconButton } from './IconButton.vue'
 export { default as ThemeToggle } from './ThemeToggle.vue'
 
 // Layout components
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
-export { default as AppTopBar } from './AppTopBar.vue'
-export { default as AppAvatarMenu } from './AppAvatarMenu.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 GeneratedPluginView } from './GeneratedPluginView.vue'
-export { default as GeneratedResultRenderer } from './GeneratedResultRenderer.vue'
-export { default as GeneratedPlotlyResult } from './GeneratedPlotlyResult.vue'
-export { default as ComponentBindingRenderer } from './ComponentBindingRenderer.vue'
-export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'
-/** Complete ControlWorkspaceView page shell for WellPlate + DoseCalculator dose design. @deprecated Scheduled for removal in MINT 1.4; use `ControlWorkspaceView` instead, with `defineDoseDesignControlModel()`. */
-export { /** @deprecated Removed in MINT 1.4. */ default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as PluginIcon } from './PluginIcon.vue'
-export { default as LayoutResizeHandle } from './LayoutResizeHandle.vue'
 
 // Utility components
 export { default as Skeleton } from './Skeleton.vue'
 export { default as LoadingSpinner } from './LoadingSpinner.vue'
 export { default as Divider } from './Divider.vue'
-export { default as StatusIndicator } from './StatusIndicator.vue'
 export { default as ProgressBar } from './ProgressBar.vue'
 export { default as Avatar } from './Avatar.vue'
 export { default as EmptyState } from './EmptyState.vue'
 export { default as Breadcrumb } from './Breadcrumb.vue'
 export { default as Tooltip } from './Tooltip.vue'
 export { default as ConfirmDialog } from './ConfirmDialog.vue'
-export { default as ChartContainer } from './ChartContainer.vue'
-export { default as AdductText } from './AdductText.vue'
 export { default as SettingsModal } from './SettingsModal.vue'
 
-// Biological experiment components
-/** Render biology template envelopes with matching SDK components such as WellPlate, DoseCalculator, and DataFrame. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
-/** Current-experiment template workspace with load/save/reset controls and WellPlate/DataFrame/DoseCalculator previews. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
-/** Complete current-experiment workspace for a curated biology template pack with save/load controls and component-prop slots. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
-/** Complete editable biology template preset workspace for WellPlate/DoseCalculator, LC-MS, qPCR, generated controls, preview components, and current-experiment save wiring. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
-export { default as WellPlate } from './WellPlate.vue'
-export { default as PlateEditor } from './PlateEditor.vue'
-/** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SampleLegend } from './SampleLegend.vue'
-/** Horizontal or vertical timeline of ordered protocol steps with status indicators, drag-to-reorder, and step-type iconography. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as ExperimentTimeline } from './ExperimentTimeline.vue'
-
-// Sample management components
-/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
-export { default as SampleSelector } from './SampleSelector.vue'
-/** Smart Group modal wired to the `useAutoGroup` engine. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as AutoGroupModal } from './AutoGroupModal.vue'
-/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as GroupAssigner } from './GroupAssigner.vue'
-/** Smart Group modal with the auto Field Recipe and the manual cohort builder. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupModal } from './SmartGroupModal.vue'
-/** Smart Group auto mode: groups samples by a field recipe. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupFieldRecipe } from './SmartGroupFieldRecipe.vue'
-/** Smart Group manual mode: builds cohorts from selected samples. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupManual } from './SmartGroupManual.vue'
-
-// Lab/Experiment components
-export { default as MoleculeInput } from './MoleculeInput.vue'
-export { default as ConcentrationInput } from './ConcentrationInput.vue'
-export { default as DoseCalculator } from './DoseCalculator.vue'
-/** Editor for a single reagent definition with axis orientation, dilution-series generator, and position-count validation for 96/384-well plates. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as ReagentEditor, type ReagentDefinition } from './ReagentEditor.vue'
-/** Sortable, searchable table of experiment reagents showing lot number, expiry, storage conditions, and stock level with low-stock warnings. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as ReagentList } from './ReagentList.vue'
-export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
-export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
-
-// Scientific display components
-export { default as PlotlyChart } from './PlotlyChart.vue'
-export { default as ScientificNumber } from './ScientificNumber.vue'
-export { default as ChemicalFormula } from './ChemicalFormula.vue'
-/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
-export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
-/** Status badge for instrument states: a tone dot (or dash / hollow shape for offline, never-reported and inactive) plus a label. */
-export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
-
 // Scientific input components
-export { default as FormulaInput } from './FormulaInput.vue'
-export { default as SequenceInput } from './SequenceInput.vue'
-export { default as UnitInput } from './UnitInput.vue'
-
-// Workflow components
-export { default as StepWizard } from './StepWizard.vue'
-export { default as AuditTrail } from './AuditTrail.vue'
-export { default as BatchProgressList } from './BatchProgressList.vue'
-export { default as JobsStatusTray } from './JobsStatusTray.vue'
 
 // Form builder components
 export { default as FormBuilder } from './FormBuilder.vue'
-export { default as FormActions } from './FormActions.vue'
-
-// Experiment data display components
-export { default as ExperimentDataViewer } from './ExperimentDataViewer.vue'
-export { default as ExperimentCodeBadge } from './ExperimentCodeBadge.vue'
 
 // Scheduling / booking components
-export { default as DateTimePicker } from './DateTimePicker.vue'
-export { default as TimeRangeInput } from './TimeRangeInput.vue'
-export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
-export { default as ResourceCard } from './ResourceCard.vue'
 export { default as SectionCard } from './SectionCard.vue'
-
-// Experiment / analysis components
-export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
-export { default as ArtifactSelectorModal } from './ArtifactSelectorModal.vue'
-/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
-export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
-export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
-export { default as ExperimentPopover } from './ExperimentPopover.vue'
-/** Control panel for running a curve-fit job with progress bar, results table, and error display. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as FitPanel } from './FitPanel.vue'
-
-export { default as FilePicker } from './FilePicker.vue'

package/src/components/{AutoGroupModal.adapter.ts → internal/AutoGroupModalInternal.adapter.ts}

@@ -2,15 +2,15 @@
  * Pure adapters mapping the `useAutoGroup` engine state to the controlled
  * Smart Group UI (`SmartGroupFieldRecipe` / `SmartGroupManual`) and back to an
  * `AutoGroupResult`. Framework-free so the mapping is unit-testable in isolation
- * from `AutoGroupModal.vue`.
+ * from `AutoGroupModalInternal.vue`.
  */
-import type { AutoGroupResult, ClassSchema, ColumnInfo, ColumnRole, SampleClass } from '../types/auto-group'
-import type { SampleGroup } from '../types'
-import type { FieldRecipeGroup, QcRoute, SmartGroupField } from './SmartGroupFieldRecipe.groups'
-import type { ManualSample } from './SmartGroupManual.cohorts'
-import type { FieldRecipeAnatomyToken, FieldRecipeQcChip, SmartGroupSeed } from './SmartGroup.types'
-import { GROUPING_FIELD_ROLES, classKey, isExperimentalKind } from '../composables/autoGroup'
-import type { ExperimentHeader } from '../composables/autoGroup'
+import type { AutoGroupResult, ClassSchema, ColumnInfo, ColumnRole, SampleClass } from '../../types/auto-group'
+import type { SampleGroup } from '../../types'
+import type { FieldRecipeGroup, QcRoute, SmartGroupField } from '../SmartGroupFieldRecipe.groups'
+import type { ManualSample } from '../SmartGroupManual.cohorts'
+import type { FieldRecipeAnatomyToken, FieldRecipeQcChip, SmartGroupSeed } from '../SmartGroup.types'
+import { GROUPING_FIELD_ROLES, classKey, isExperimentalKind } from './autoGroup'
+import type { ExperimentHeader } from './autoGroup'
 
 const PREVIEW_VALUES = 3
 

package/src/components/{AutoGroupModal.vue → internal/AutoGroupModalInternal.vue}

@@ -5,17 +5,17 @@
  * staying wired to the `useAutoGroup` engine. The UI is the Smart Group design
  * (`SmartGroupFieldRecipe` / `SmartGroupManual`) driven in controlled mode; this
  * component is the adapter that maps engine state ↔ that UI and emits the
- * resulting `AutoGroupResult`. Public props/emits are unchanged so existing
- * consumers (`SampleSelector`, template catalog) keep working.
+ * resulting `AutoGroupResult`. Private to `SampleSelector`, which emits that
+ * result as its `smartGroup` event.
  */
 import { ref, computed, watch } from 'vue'
-import BaseModal from './BaseModal.vue'
-import AlertBox from './AlertBox.vue'
-import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
-import SmartGroupManual from './SmartGroupManual.vue'
-import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
-import { useApi } from '../composables/useApi'
-import { readFileAsText } from '../composables/useFileImport'
+import BaseModal from '../BaseModal.vue'
+import AlertBox from '../AlertBox.vue'
+import SmartGroupFieldRecipe from '../SmartGroupFieldRecipe.vue'
+import SmartGroupManual from '../SmartGroupManual.vue'
+import { useAutoGroup, parseCSV } from './useAutoGroup'
+import { useApi } from '../../composables/useApi'
+import { readFileAsText } from '../../composables/useFileImport'
 import {
   engineAnatomy,
   engineColumnNames,
@@ -27,18 +27,18 @@ import {
   manualSamplesToResult,
   qcRouteToEngine,
   seedFromGroups,
-} from './AutoGroupModal.adapter'
-import { SAMPLE_GROUP_COLOR_OPTIONS } from './SampleSelector.colors'
-import { mostlySingletons, type QcRoute } from './SmartGroupFieldRecipe.groups'
-import type { ManualSample } from './SmartGroupManual.cohorts'
-import type { ManualPaletteEntry } from './SmartGroup.types'
-import type { AutoGroupResult } from '../types/auto-group'
-import type { SampleGroup } from '../types'
+} from './AutoGroupModalInternal.adapter'
+import { SAMPLE_GROUP_COLOR_OPTIONS } from '../SampleSelector.colors'
+import { mostlySingletons, type QcRoute } from '../SmartGroupFieldRecipe.groups'
+import type { ManualSample } from '../SmartGroupManual.cohorts'
+import type { ManualPaletteEntry } from '../SmartGroup.types'
+import type { AutoGroupResult } from '../../types/auto-group'
+import type { SampleGroup } from '../../types'
 
 type GroupingWorkflow = 'auto' | 'manual'
 
 export interface Props {
-  modelValue: boolean
+  open: boolean
   samples?: string[]
   groups?: SampleGroup[]
   initialMode?: GroupingWorkflow
@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   'apply': [result: AutoGroupResult]
 }>()
 
@@ -206,7 +206,7 @@ function applyManual(payload: { samples: ManualSample[] }) {
 }
 
 function close() {
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 
 async function fetchExperimentData() {
@@ -242,7 +242,7 @@ async function fetchExperimentData() {
 // comes from the `samples` / `designData` / `experimentId` props exactly as
 // before — the redesign just drops the multi-step input/schema/merge UI.
 watch(
-  () => props.modelValue,
+  () => props.open,
   (open) => {
     if (!open) return
     activeWorkflow.value = props.initialMode
@@ -268,14 +268,14 @@ watch(
 <template>
   <BaseModal
     class="sg-host"
-    :model-value="modelValue"
+    :open="open"
     :closable="false"
     :close-on-overlay="false"
     :close-on-escape="false"
     size="lg"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
-    <AlertBox v-if="experimentError" type="error" class="sg-host__error">
+    <AlertBox v-if="experimentError" tone="error" class="sg-host__error">
       {{ experimentError }}
     </AlertBox>
 

package/src/components/{BaseToggle.vue → internal/CheckboxSwitchInternal.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-/** Renders an on/off toggle switch with label, size, and keyboard interaction support. */
-import Tooltip from './Tooltip.vue'
+/** BaseCheckbox with `type="switch"`: an on/off switch with label, size, and keyboard interaction support. */
+import Tooltip from '../Tooltip.vue'
 
 interface Props {
   modelValue?: boolean
@@ -14,7 +14,7 @@ interface Props {
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
   reverse?: boolean
-  variant?: 'default' | 'row'
+  layout?: 'inline' | 'row'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   reverse: false,
-  variant: 'default',
+  layout: 'inline',
 })
 
 const emit = defineEmits<{
@@ -58,7 +58,7 @@ function iconStyle(): Record<string, string> {
   <div
     :class="[
       'mint-toggle',
-      `mint-toggle--${variant}`,
+      `mint-toggle--${layout}`,
       reverse ? 'mint-toggle--reverse' : '',
       disabled ? 'mint-toggle--disabled' : '',
       modelValue ? 'mint-toggle--checked' : '',
@@ -66,7 +66,7 @@ function iconStyle(): Record<string, string> {
     @click="toggle"
   >
     <span
-      v-if="variant === 'row' && icon"
+      v-if="layout === 'row' && icon"
       class="mint-toggle__row-icon"
       :style="iconStyle()"
       aria-hidden="true"
@@ -89,7 +89,7 @@ function iconStyle(): Record<string, string> {
       <span v-else class="mint-toggle__row-text-icon">{{ icon }}</span>
     </span>
     <span
-      v-if="variant === 'row' && label"
+      v-if="layout === 'row' && label"
       class="mint-toggle__copy"
     >
       <Tooltip
@@ -124,7 +124,7 @@ function iconStyle(): Record<string, string> {
       <span :class="['mint-toggle__knob', `mint-toggle__knob--${size}`]" />
     </div>
     <span
-      v-if="label && variant !== 'row'"
+      v-if="label && layout !== 'row'"
       :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
     >
       {{ label }}

package/src/components/internal/DataStateInternal.vue

@@ -61,7 +61,7 @@ const spinnerSize = computed(() => (props.size === 'sm' ? 'sm' : props.size ===
       :title="title"
       :description="description"
       :icon-path="state === 'error' ? ERROR_ICON_PATH : iconPath"
-      :color="state === 'error' ? 'error' : 'muted'"
+      :tone="state === 'error' ? 'error' : 'neutral'"
       :size="size"
       :variant="variant"
       :action-label="actionLabel"

package/src/components/internal/DatePickerDateInternal.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+/** DatePicker type="date": input that opens a calendar dropdown for selecting a single date, with clearable support. */
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { ref, computed, nextTick, onBeforeUnmount, watch, useTemplateRef } from 'vue'
+import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
+import { useDropdownState } from '../../composables/useDropdownState'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  invalid?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  invalid: false,
+  size: 'md',
+  clearable: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const dropdownRef = ref<HTMLElement | null>(null)
+const dropdownStyle = ref<Record<string, string>>({})
+const { isOpen, triggerRef, open, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('container'),
+  insideRefs: [dropdownRef],
+})
+// The panel is a non-modal dialog: Tab cycles inside it while it is open, and
+// focus returns to the input when it closes.
+useFocusTrap({ containerRef: dropdownRef, active: isOpen })
+const {
+  weekDays,
+  monthYear,
+  calendarDays,
+  isDateDisabled,
+  formatDateValue,
+  setCurrentMonthFromDate,
+  prevMonth,
+  nextMonth,
+} = useCalendarGrid({
+  min: () => props.min,
+  max: () => props.max,
+})
+
+const selectedDate = computed(() => {
+  if (!props.modelValue) return null
+  const date = new Date(props.modelValue + 'T00:00:00')
+  return isNaN(date.getTime()) ? null : date
+})
+
+const displayValue = computed(() => {
+  if (!selectedDate.value) return ''
+  return selectedDate.value.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+})
+
+function selectDate(day: CalendarGridDay) {
+  if (day.isDisabled || props.disabled) return
+  emit('update:modelValue', formatDateValue(day.date))
+  close()
+}
+
+function goToToday() {
+  const today = new Date()
+  setCurrentMonthFromDate(today)
+  if (!isDateDisabled(today)) {
+    emit('update:modelValue', formatDateValue(today))
+    close()
+  }
+}
+
+function clear() {
+  emit('update:modelValue', undefined)
+  close()
+}
+
+function toggleCalendar() {
+  if (props.disabled) return
+  toggle()
+}
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled || isOpen.value) return
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    open()
+  }
+}
+
+// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
+// instead of the panel closing on every scroll or resize.
+let stopAutoUpdate: (() => void) | null = null
+
+async function updateDropdownPosition() {
+  const trigger = triggerRef.value
+  const panel = dropdownRef.value
+  if (!trigger || !panel) return
+
+  const { x, y } = await computePosition(trigger, panel, {
+    placement: 'bottom-start',
+    strategy: 'fixed',
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+  })
+  dropdownStyle.value = {
+    position: 'fixed',
+    top: `${y}px`,
+    left: `${x}px`,
+    zIndex: '9999',
+  }
+}
+
+function stopPositioning() {
+  stopAutoUpdate?.()
+  stopAutoUpdate = null
+}
+
+function startPositioning() {
+  const trigger = triggerRef.value
+  const panel = dropdownRef.value
+  if (!trigger || !panel) return
+  stopPositioning()
+  stopAutoUpdate = autoUpdate(trigger, panel, () => void updateDropdownPosition())
+}
+
+/** Moves focus into the calendar grid: selected day, else today, else the first day. */
+function focusCalendar() {
+  const panel = dropdownRef.value
+  if (!panel) return
+  const target =
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
+  target?.focus()
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) {
+    stopPositioning()
+    return
+  }
+  if (selectedDate.value) {
+    setCurrentMonthFromDate(selectedDate.value)
+  }
+  await nextTick()
+  startPositioning()
+  // A second tick so this focus lands after the focus trap's initial focus.
+  await nextTick()
+  focusCalendar()
+})
+
+onBeforeUnmount(stopPositioning)
+</script>
+
+<template>
+  <div ref="container" class="mint-date-picker">
+    <div class="mint-date-picker__input-wrapper">
+      <input
+        ref="triggerRef"
+        type="text"
+        readonly
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
+        :value="displayValue"
+        :placeholder="placeholder || 'Select date'"
+        :disabled="disabled"
+        :class="[
+          'mint-date-picker__input',
+          `mint-date-picker__input--${size}`,
+          invalid ? 'mint-date-picker__input--error' : '',
+          disabled ? 'mint-date-picker__input--disabled' : '',
+        ]"
+        @click="toggleCalendar"
+        @keydown="handleTriggerKeydown"
+      />
+      <div class="mint-date-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+        </svg>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="mint-date-picker__dropdown-enter-active"
+        enter-from-class="mint-date-picker__dropdown-enter-from"
+        enter-to-class="mint-date-picker__dropdown-enter-to"
+        leave-active-class="mint-date-picker__dropdown-leave-active"
+        leave-from-class="mint-date-picker__dropdown-leave-from"
+        leave-to-class="mint-date-picker__dropdown-leave-to"
+      >
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="mint-popover mint-date-picker__dropdown"
+          :style="dropdownStyle"
+          role="dialog"
+          aria-label="Date picker"
+        >
+          <CalendarGridPanelInternal
+            :week-days="weekDays"
+            :month-year="monthYear"
+            :days="calendarDays"
+            :selected-date="selectedDate"
+            @previous-month="prevMonth"
+            @next-month="nextMonth"
+            @select="selectDate"
+          />
+
+          <div class="mint-date-picker__footer">
+            <button
+              type="button"
+              class="mint-date-picker__footer-btn mint-date-picker__today-btn"
+              @click="goToToday"
+            >
+              Today
+            </button>
+            <button
+              v-if="clearable && modelValue"
+              type="button"
+              class="mint-date-picker__footer-btn mint-date-picker__clear-btn"
+              @click="clear"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/src/components/{DateTimePicker.vue → internal/DatePickerDateTimeInternal.vue}

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-/** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
+/** DatePicker type="datetime": combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
 import { computed, ref, watch, nextTick, useTemplateRef } from 'vue'
-import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
-import { useDropdownState } from '../composables/useDropdownState'
-import { useFocusTrap } from '../composables/useFocusTrap'
-import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../composables/useTimeUtils'
-import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
+import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
+import { useDropdownState } from '../../composables/useDropdownState'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../../utils/time'
+import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
 
 interface Props {
   modelValue?: string
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   min?: string
   max?: string
@@ -24,7 +24,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Select date & time',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   timeStep: 15,
   timeFormat: '24h',
@@ -214,7 +214,7 @@ watch(isOpen, async (opened) => {
         :class="[
           'mint-datetime-picker__input',
           `mint-datetime-picker__input--${size}`,
-          error ? 'mint-datetime-picker__input--error' : '',
+          invalid ? 'mint-datetime-picker__input--error' : '',
           disabled ? 'mint-datetime-picker__input--disabled' : '',
         ]"
         aria-label="Select date and time"