@morscherlab/mld-sdk 0.6.1 → 0.6.2

package/dist/components/StepWizard.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepWizard.vue.js","sources":["../../src/components/StepWizard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\ninterface WizardStep {\n  id: string\n  label: string\n  description?: string\n  icon?: string\n  optional?: boolean\n}\n\ntype WizardStepState = 'pending' | 'active' | 'completed' | 'disabled'\n\ninterface Props {\n  steps: WizardStep[]\n  modelValue?: number\n  linear?: boolean\n  showProgress?: boolean\n  showStepNumbers?: boolean\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 0,\n  linear: true,\n  showProgress: true,\n  showStepNumbers: true,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [index: number]\n  'complete': []\n  'cancel': []\n  'step-change': [change: [from: number, to: number]]\n}>()\n\nconst stepValidity = ref<boolean[]>([])\n\n// Initialize validity for all steps to true\nif (stepValidity.value.length === 0) {\n  stepValidity.value = props.steps.map(() => true)\n}\n\nconst stepStates = computed<WizardStepState[]>(() => {\n  return props.steps.map((_, index) => {\n    if (index === props.modelValue) return 'active'\n    if (index < props.modelValue && stepValidity.value[index] !== false) return 'completed'\n    if (index > props.modelValue && props.linear) {\n      for (let i = props.modelValue; i < index; i++) {\n        if (stepValidity.value[i] === false) return 'disabled'\n      }\n    }\n    return 'pending'\n  })\n})\n\nfunction setStepValid(index: number, valid: boolean) {\n  if (index >= 0 && index < props.steps.length) {\n    stepValidity.value[index] = valid\n  }\n}\n\nfunction goToStep(index: number) {\n  if (index < 0 || index >= props.steps.length) return\n  if (stepStates.value[index] === 'disabled') return\n\n  if (props.linear && index > props.modelValue) {\n    for (let i = props.modelValue; i < index; i++) {\n      if (stepValidity.value[i] === false) return\n    }\n  }\n\n  const from = props.modelValue\n  emit('step-change', [from, index])\n  emit('update:modelValue', index)\n}\n\nfunction goNext() {\n  if (stepValidity.value[props.modelValue] === false) return\n  if (props.modelValue < props.steps.length - 1) {\n    goToStep(props.modelValue + 1)\n  }\n}\n\nfunction goBack() {\n  if (props.modelValue > 0) {\n    goToStep(props.modelValue - 1)\n  }\n}\n\nfunction finish() {\n  if (stepValidity.value[props.modelValue] === false) return\n  if (props.modelValue === props.steps.length - 1) {\n    emit('complete')\n  }\n}\n\nfunction cancel() {\n  emit('cancel')\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault()\n      goBack()\n      break\n    case 'ArrowRight':\n      event.preventDefault()\n      goNext()\n      break\n    case 'Escape':\n      cancel()\n      break\n  }\n}\n\ndefineExpose({ setStepValid })\n</script>\n\n<template>\n  <div\n    :class=\"['mld-wizard', `mld-wizard--${props.size}`]\"\n    tabindex=\"0\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- Progress indicator -->\n    <div v-if=\"props.showProgress\" class=\"mld-wizard__progress\">\n      <slot name=\"progress\" :steps=\"props.steps\" :current=\"props.modelValue\" :states=\"stepStates\">\n        <div class=\"mld-wizard__steps-indicator\">\n          <template v-for=\"(step, index) in props.steps\" :key=\"step.id\">\n            <!-- Connector line (before each step except first) -->\n            <div\n              v-if=\"index > 0\"\n              :class=\"[\n                'mld-wizard__step-connector',\n                stepStates[index - 1] === 'completed' ? 'mld-wizard__step-connector--completed' : '',\n              ]\"\n            />\n            <!-- Step indicator -->\n            <div\n              :class=\"[\n                'mld-wizard__step-indicator',\n                `mld-wizard__step-indicator--${stepStates[index]}`,\n              ]\"\n              @click=\"goToStep(index)\"\n            >\n              <div class=\"mld-wizard__step-dot\">\n                <template v-if=\"stepStates[index] === 'completed'\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M20 6 9 17l-5-5\" />\n                  </svg>\n                </template>\n                <template v-else-if=\"props.showStepNumbers\">\n                  {{ index + 1 }}\n                </template>\n              </div>\n              <div class=\"mld-wizard__step-label\">{{ step.label }}</div>\n            </div>\n          </template>\n        </div>\n      </slot>\n    </div>\n\n    <!-- Step content -->\n    <div class=\"mld-wizard__body\">\n      <div\n        v-for=\"(step, index) in props.steps\"\n        :key=\"step.id\"\n        v-show=\"index === props.modelValue\"\n        class=\"mld-wizard__step-content\"\n      >\n        <slot :name=\"`step-${step.id}`\" :step=\"step\" :index=\"index\" />\n      </div>\n    </div>\n\n    <!-- Navigation -->\n    <div class=\"mld-wizard__navigation\">\n      <slot\n        name=\"navigation\"\n        :go-back=\"goBack\"\n        :go-next=\"goNext\"\n        :finish=\"finish\"\n        :cancel=\"cancel\"\n        :is-first=\"props.modelValue === 0\"\n        :is-last=\"props.modelValue === props.steps.length - 1\"\n        :can-proceed=\"stepValidity[props.modelValue] !== false\"\n      >\n        <button\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--cancel\"\n          @click=\"cancel\"\n        >\n          Cancel\n        </button>\n        <div style=\"flex: 1\" />\n        <button\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--back\"\n          :disabled=\"props.modelValue === 0\"\n          @click=\"goBack\"\n        >\n          Back\n        </button>\n        <button\n          v-if=\"props.modelValue < props.steps.length - 1\"\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--next\"\n          :disabled=\"stepValidity[props.modelValue] === false\"\n          @click=\"goNext\"\n        >\n          Next\n        </button>\n        <button\n          v-else\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--finish\"\n          :disabled=\"stepValidity[props.modelValue] === false\"\n          @click=\"finish\"\n        >\n          Finish\n        </button>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/step-wizard.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_renderSlot","_createElementVNode","_Fragment","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"StepWizard.vue.js","sources":["../../src/components/StepWizard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { WizardStep, WizardStepState } from '../types'\n\ninterface Props {\n  steps: WizardStep[]\n  modelValue?: number\n  linear?: boolean\n  showProgress?: boolean\n  showStepNumbers?: boolean\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: 0,\n  linear: true,\n  showProgress: true,\n  showStepNumbers: true,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [index: number]\n  'complete': []\n  'cancel': []\n  'step-change': [change: [from: number, to: number]]\n}>()\n\nconst stepValidity = ref<boolean[]>([])\n\n// Initialize validity for all steps to true\nif (stepValidity.value.length === 0) {\n  stepValidity.value = props.steps.map(() => true)\n}\n\nconst stepStates = computed<WizardStepState[]>(() => {\n  return props.steps.map((_, index) => {\n    if (index === props.modelValue) return 'active'\n    if (index < props.modelValue && stepValidity.value[index] !== false) return 'completed'\n    if (index > props.modelValue && props.linear) {\n      for (let i = props.modelValue; i < index; i++) {\n        if (stepValidity.value[i] === false) return 'disabled'\n      }\n    }\n    return 'pending'\n  })\n})\n\nfunction setStepValid(index: number, valid: boolean) {\n  if (index >= 0 && index < props.steps.length) {\n    stepValidity.value[index] = valid\n  }\n}\n\nfunction goToStep(index: number) {\n  if (index < 0 || index >= props.steps.length) return\n  if (stepStates.value[index] === 'disabled') return\n\n  if (props.linear && index > props.modelValue) {\n    for (let i = props.modelValue; i < index; i++) {\n      if (stepValidity.value[i] === false) return\n    }\n  }\n\n  const from = props.modelValue\n  emit('step-change', [from, index])\n  emit('update:modelValue', index)\n}\n\nfunction goNext() {\n  if (stepValidity.value[props.modelValue] === false) return\n  if (props.modelValue < props.steps.length - 1) {\n    goToStep(props.modelValue + 1)\n  }\n}\n\nfunction goBack() {\n  if (props.modelValue > 0) {\n    goToStep(props.modelValue - 1)\n  }\n}\n\nfunction finish() {\n  if (stepValidity.value[props.modelValue] === false) return\n  if (props.modelValue === props.steps.length - 1) {\n    emit('complete')\n  }\n}\n\nfunction cancel() {\n  emit('cancel')\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  switch (event.key) {\n    case 'ArrowLeft':\n      event.preventDefault()\n      goBack()\n      break\n    case 'ArrowRight':\n      event.preventDefault()\n      goNext()\n      break\n    case 'Escape':\n      cancel()\n      break\n  }\n}\n\ndefineExpose({ setStepValid })\n</script>\n\n<template>\n  <div\n    :class=\"['mld-wizard', `mld-wizard--${props.size}`]\"\n    tabindex=\"0\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- Progress indicator -->\n    <div v-if=\"props.showProgress\" class=\"mld-wizard__progress\">\n      <slot name=\"progress\" :steps=\"props.steps\" :current=\"props.modelValue\" :states=\"stepStates\">\n        <div class=\"mld-wizard__steps-indicator\">\n          <template v-for=\"(step, index) in props.steps\" :key=\"step.id\">\n            <!-- Connector line (before each step except first) -->\n            <div\n              v-if=\"index > 0\"\n              :class=\"[\n                'mld-wizard__step-connector',\n                stepStates[index - 1] === 'completed' ? 'mld-wizard__step-connector--completed' : '',\n              ]\"\n            />\n            <!-- Step indicator -->\n            <div\n              :class=\"[\n                'mld-wizard__step-indicator',\n                `mld-wizard__step-indicator--${stepStates[index]}`,\n              ]\"\n              @click=\"goToStep(index)\"\n            >\n              <div class=\"mld-wizard__step-dot\">\n                <template v-if=\"stepStates[index] === 'completed'\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M20 6 9 17l-5-5\" />\n                  </svg>\n                </template>\n                <template v-else-if=\"props.showStepNumbers\">\n                  {{ index + 1 }}\n                </template>\n              </div>\n              <div class=\"mld-wizard__step-label\">{{ step.label }}</div>\n            </div>\n          </template>\n        </div>\n      </slot>\n    </div>\n\n    <!-- Step content -->\n    <div class=\"mld-wizard__body\">\n      <div\n        v-for=\"(step, index) in props.steps\"\n        :key=\"step.id\"\n        v-show=\"index === props.modelValue\"\n        class=\"mld-wizard__step-content\"\n      >\n        <slot :name=\"`step-${step.id}`\" :step=\"step\" :index=\"index\" />\n      </div>\n    </div>\n\n    <!-- Navigation -->\n    <div class=\"mld-wizard__navigation\">\n      <slot\n        name=\"navigation\"\n        :go-back=\"goBack\"\n        :go-next=\"goNext\"\n        :finish=\"finish\"\n        :cancel=\"cancel\"\n        :is-first=\"props.modelValue === 0\"\n        :is-last=\"props.modelValue === props.steps.length - 1\"\n        :can-proceed=\"stepValidity[props.modelValue] !== false\"\n      >\n        <button\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--cancel\"\n          @click=\"cancel\"\n        >\n          Cancel\n        </button>\n        <div style=\"flex: 1\" />\n        <button\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--back\"\n          :disabled=\"props.modelValue === 0\"\n          @click=\"goBack\"\n        >\n          Back\n        </button>\n        <button\n          v-if=\"props.modelValue < props.steps.length - 1\"\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--next\"\n          :disabled=\"stepValidity[props.modelValue] === false\"\n          @click=\"goNext\"\n        >\n          Next\n        </button>\n        <button\n          v-else\n          type=\"button\"\n          class=\"mld-wizard__nav-btn mld-wizard__nav-btn--finish\"\n          :disabled=\"stepValidity[props.modelValue] === false\"\n          @click=\"finish\"\n        >\n          Finish\n        </button>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/step-wizard.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_renderSlot","_createElementVNode","_Fragment","_toDisplayString"],"mappings":"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"}

package/dist/components/UnitInput.vue.d.ts

@@ -1,9 +1,4 @@
-interface UnitOption {
-    value: string;
-    label: string;
-    factor?: number;
-    group?: string;
-}
+import { UnitOption } from '../types';
 interface Props {
     modelValue?: number;
     unit?: string;

package/dist/components/UnitInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnitInput.vue.js","sources":["../../src/components/UnitInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\n\ninterface UnitOption {\n  value: string\n  label: string\n  factor?: number\n  group?: string\n}\n\ninterface Props {\n  modelValue?: number\n  unit?: string\n  units: UnitOption[]\n  precision?: number\n  min?: number\n  max?: number\n  step?: number\n  placeholder?: string\n  disabled?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  convertOnUnitChange?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  precision: undefined,\n  step: undefined,\n  placeholder: 'Enter value',\n  disabled: false,\n  error: false,\n  size: 'md',\n  convertOnUnitChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number | undefined]\n  'update:unit': [unit: string]\n  'change': [data: { value: number | undefined; unit: string }]\n}>()\n\nconst conversionHint = ref<string | null>(null)\n\nconst currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))\n\n// Group units by their group property\nconst hasGroups = computed(() => props.units.some(u => u.group))\n\nconst groupedUnits = computed(() => {\n  if (!hasGroups.value) return null\n  const groups = new Map<string, UnitOption[]>()\n  const ungrouped: UnitOption[] = []\n  for (const u of props.units) {\n    if (u.group) {\n      if (!groups.has(u.group)) groups.set(u.group, [])\n      groups.get(u.group)!.push(u)\n    } else {\n      ungrouped.push(u)\n    }\n  }\n  return { groups, ungrouped }\n})\n\nfunction findUnit(value: string): UnitOption | undefined {\n  return props.units.find(u => u.value === value)\n}\n\nfunction roundToPrecision(value: number): number {\n  if (props.precision === undefined) return value\n  const factor = Math.pow(10, props.precision)\n  return Math.round(value * factor) / factor\n}\n\nfunction clamp(value: number): number {\n  let result = value\n  if (props.min !== undefined && result < props.min) result = props.min\n  if (props.max !== undefined && result > props.max) result = props.max\n  return result\n}\n\nfunction handleValueInput(event: Event) {\n  const target = event.target as HTMLInputElement\n  const value = target.value === '' ? undefined : Number(target.value)\n\n  conversionHint.value = null\n\n  if (value === undefined || isNaN(value)) {\n    emit('update:modelValue', undefined)\n    emit('change', { value: undefined, unit: currentUnit.value })\n    return\n  }\n\n  const clamped = clamp(value)\n  emit('update:modelValue', clamped)\n  emit('change', { value: clamped, unit: currentUnit.value })\n}\n\nfunction handleUnitChange(event: Event) {\n  const target = event.target as HTMLSelectElement\n  const newUnitValue = target.value\n  const oldUnitValue = currentUnit.value\n\n  let newValue = props.modelValue\n\n  if (props.convertOnUnitChange && newValue !== undefined) {\n    const oldUnit = findUnit(oldUnitValue)\n    const newUnit = findUnit(newUnitValue)\n\n    if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {\n      const converted = newValue * (oldUnit.factor / newUnit.factor)\n      newValue = roundToPrecision(converted)\n      newValue = clamp(newValue)\n      conversionHint.value = `Converted from ${oldUnit.label} to ${newUnit.label}`\n      emit('update:modelValue', newValue)\n    }\n  }\n\n  emit('update:unit', newUnitValue)\n  emit('change', { value: newValue, unit: newUnitValue })\n}\n\n// Clear conversion hint after a delay\nwatch(conversionHint, (hint) => {\n  if (hint) {\n    setTimeout(() => {\n      conversionHint.value = null\n    }, 3000)\n  }\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mld-unit-input',\n      error ? 'mld-unit-input--error' : '',\n      disabled ? 'mld-unit-input--disabled' : '',\n    ]\"\n  >\n    <div class=\"mld-unit-input__controls\">\n      <input\n        type=\"number\"\n        :value=\"modelValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :step=\"step\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :class=\"[\n          'mld-unit-input__value',\n          `mld-unit-input__value--${size}`,\n          disabled ? 'mld-unit-input__value--disabled' : '',\n        ]\"\n        aria-label=\"Value\"\n        @input=\"handleValueInput\"\n      />\n\n      <div class=\"mld-unit-input__unit\">\n        <select\n          :value=\"currentUnit\"\n          :disabled=\"disabled\"\n          :class=\"[\n            'mld-unit-input__unit-select',\n            `mld-unit-input__unit-select--${size}`,\n          ]\"\n          aria-label=\"Unit\"\n          @change=\"handleUnitChange\"\n        >\n          <template v-if=\"groupedUnits\">\n            <template v-if=\"groupedUnits.ungrouped.length > 0\">\n              <option\n                v-for=\"u in groupedUnits.ungrouped\"\n                :key=\"u.value\"\n                :value=\"u.value\"\n              >\n                {{ u.label }}\n              </option>\n            </template>\n            <optgroup\n              v-for=\"[groupLabel, groupUnits] in groupedUnits.groups\"\n              :key=\"groupLabel\"\n              :label=\"groupLabel\"\n              class=\"mld-unit-input__unit-group\"\n            >\n              <option\n                v-for=\"u in groupUnits\"\n                :key=\"u.value\"\n                :value=\"u.value\"\n              >\n                {{ u.label }}\n              </option>\n            </optgroup>\n          </template>\n          <template v-else>\n            <option\n              v-for=\"u in units\"\n              :key=\"u.value\"\n              :value=\"u.value\"\n            >\n              {{ u.label }}\n            </option>\n          </template>\n        </select>\n      </div>\n    </div>\n\n    <div\n      v-if=\"conversionHint\"\n      class=\"mld-unit-input__conversion-hint\"\n    >\n      {{ conversionHint }}\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/unit-input.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_openBlock","_renderList","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"UnitInput.vue.js","sources":["../../src/components/UnitInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport type { UnitOption } from '../types'\n\ninterface Props {\n  modelValue?: number\n  unit?: string\n  units: UnitOption[]\n  precision?: number\n  min?: number\n  max?: number\n  step?: number\n  placeholder?: string\n  disabled?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  convertOnUnitChange?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  precision: undefined,\n  step: undefined,\n  placeholder: 'Enter value',\n  disabled: false,\n  error: false,\n  size: 'md',\n  convertOnUnitChange: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number | undefined]\n  'update:unit': [unit: string]\n  'change': [data: { value: number | undefined; unit: string }]\n}>()\n\nconst conversionHint = ref<string | null>(null)\n\nconst currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))\n\n// Group units by their group property\nconst hasGroups = computed(() => props.units.some(u => u.group))\n\nconst groupedUnits = computed(() => {\n  if (!hasGroups.value) return null\n  const groups = new Map<string, UnitOption[]>()\n  const ungrouped: UnitOption[] = []\n  for (const u of props.units) {\n    if (u.group) {\n      if (!groups.has(u.group)) groups.set(u.group, [])\n      groups.get(u.group)!.push(u)\n    } else {\n      ungrouped.push(u)\n    }\n  }\n  return { groups, ungrouped }\n})\n\nfunction findUnit(value: string): UnitOption | undefined {\n  return props.units.find(u => u.value === value)\n}\n\nfunction roundToPrecision(value: number): number {\n  if (props.precision === undefined) return value\n  const factor = Math.pow(10, props.precision)\n  return Math.round(value * factor) / factor\n}\n\nfunction clamp(value: number): number {\n  let result = value\n  if (props.min !== undefined && result < props.min) result = props.min\n  if (props.max !== undefined && result > props.max) result = props.max\n  return result\n}\n\nfunction handleValueInput(event: Event) {\n  const target = event.target as HTMLInputElement\n  const value = target.value === '' ? undefined : Number(target.value)\n\n  conversionHint.value = null\n\n  if (value === undefined || isNaN(value)) {\n    emit('update:modelValue', undefined)\n    emit('change', { value: undefined, unit: currentUnit.value })\n    return\n  }\n\n  const clamped = clamp(value)\n  emit('update:modelValue', clamped)\n  emit('change', { value: clamped, unit: currentUnit.value })\n}\n\nfunction handleUnitChange(event: Event) {\n  const target = event.target as HTMLSelectElement\n  const newUnitValue = target.value\n  const oldUnitValue = currentUnit.value\n\n  let newValue = props.modelValue\n\n  if (props.convertOnUnitChange && newValue !== undefined) {\n    const oldUnit = findUnit(oldUnitValue)\n    const newUnit = findUnit(newUnitValue)\n\n    if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {\n      const converted = newValue * (oldUnit.factor / newUnit.factor)\n      newValue = roundToPrecision(converted)\n      newValue = clamp(newValue)\n      conversionHint.value = `Converted from ${oldUnit.label} to ${newUnit.label}`\n      emit('update:modelValue', newValue)\n    }\n  }\n\n  emit('update:unit', newUnitValue)\n  emit('change', { value: newValue, unit: newUnitValue })\n}\n\n// Clear conversion hint after a delay\nwatch(conversionHint, (hint) => {\n  if (hint) {\n    setTimeout(() => {\n      conversionHint.value = null\n    }, 3000)\n  }\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mld-unit-input',\n      error ? 'mld-unit-input--error' : '',\n      disabled ? 'mld-unit-input--disabled' : '',\n    ]\"\n  >\n    <div class=\"mld-unit-input__controls\">\n      <input\n        type=\"number\"\n        :value=\"modelValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :step=\"step\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :class=\"[\n          'mld-unit-input__value',\n          `mld-unit-input__value--${size}`,\n          disabled ? 'mld-unit-input__value--disabled' : '',\n        ]\"\n        aria-label=\"Value\"\n        @input=\"handleValueInput\"\n      />\n\n      <div class=\"mld-unit-input__unit\">\n        <select\n          :value=\"currentUnit\"\n          :disabled=\"disabled\"\n          :class=\"[\n            'mld-unit-input__unit-select',\n            `mld-unit-input__unit-select--${size}`,\n          ]\"\n          aria-label=\"Unit\"\n          @change=\"handleUnitChange\"\n        >\n          <template v-if=\"groupedUnits\">\n            <template v-if=\"groupedUnits.ungrouped.length > 0\">\n              <option\n                v-for=\"u in groupedUnits.ungrouped\"\n                :key=\"u.value\"\n                :value=\"u.value\"\n              >\n                {{ u.label }}\n              </option>\n            </template>\n            <optgroup\n              v-for=\"[groupLabel, groupUnits] in groupedUnits.groups\"\n              :key=\"groupLabel\"\n              :label=\"groupLabel\"\n              class=\"mld-unit-input__unit-group\"\n            >\n              <option\n                v-for=\"u in groupUnits\"\n                :key=\"u.value\"\n                :value=\"u.value\"\n              >\n                {{ u.label }}\n              </option>\n            </optgroup>\n          </template>\n          <template v-else>\n            <option\n              v-for=\"u in units\"\n              :key=\"u.value\"\n              :value=\"u.value\"\n            >\n              {{ u.label }}\n            </option>\n          </template>\n        </select>\n      </div>\n    </div>\n\n    <div\n      v-if=\"conversionHint\"\n      class=\"mld-unit-input__conversion-hint\"\n    >\n      {{ conversionHint }}\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/unit-input.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_openBlock","_renderList","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,UAAM,QAAQ;AAUd,UAAM,OAAO;AAMb,UAAM,iBAAiB,IAAmB,IAAI;AAE9C,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM,SAAS,IAAI,MAAM,MAAM,CAAC,EAAE,QAAQ,GAAG;AAGrG,UAAM,YAAY,SAAS,MAAM,MAAM,MAAM,KAAK,CAAA,MAAK,EAAE,KAAK,CAAC;AAE/D,UAAM,eAAe,SAAS,MAAM;AAClC,UAAI,CAAC,UAAU,MAAO,QAAO;AAC7B,YAAM,6BAAa,IAAA;AACnB,YAAM,YAA0B,CAAA;AAChC,iBAAW,KAAK,MAAM,OAAO;AAC3B,YAAI,EAAE,OAAO;AACX,cAAI,CAAC,OAAO,IAAI,EAAE,KAAK,EAAG,QAAO,IAAI,EAAE,OAAO,EAAE;AAChD,iBAAO,IAAI,EAAE,KAAK,EAAG,KAAK,CAAC;AAAA,QAC7B,OAAO;AACL,oBAAU,KAAK,CAAC;AAAA,QAClB;AAAA,MACF;AACA,aAAO,EAAE,QAAQ,UAAA;AAAA,IACnB,CAAC;AAED,aAAS,SAAS,OAAuC;AACvD,aAAO,MAAM,MAAM,KAAK,CAAA,MAAK,EAAE,UAAU,KAAK;AAAA,IAChD;AAEA,aAAS,iBAAiB,OAAuB;AAC/C,UAAI,MAAM,cAAc,OAAW,QAAO;AAC1C,YAAM,SAAS,KAAK,IAAI,IAAI,MAAM,SAAS;AAC3C,aAAO,KAAK,MAAM,QAAQ,MAAM,IAAI;AAAA,IACtC;AAEA,aAAS,MAAM,OAAuB;AACpC,UAAI,SAAS;AACb,UAAI,MAAM,QAAQ,UAAa,SAAS,MAAM,cAAc,MAAM;AAClE,UAAI,MAAM,QAAQ,UAAa,SAAS,MAAM,cAAc,MAAM;AAClE,aAAO;AAAA,IACT;AAEA,aAAS,iBAAiB,OAAc;AACtC,YAAM,SAAS,MAAM;AACrB,YAAM,QAAQ,OAAO,UAAU,KAAK,SAAY,OAAO,OAAO,KAAK;AAEnE,qBAAe,QAAQ;AAEvB,UAAI,UAAU,UAAa,MAAM,KAAK,GAAG;AACvC,aAAK,qBAAqB,MAAS;AACnC,aAAK,UAAU,EAAE,OAAO,QAAW,MAAM,YAAY,OAAO;AAC5D;AAAA,MACF;AAEA,YAAM,UAAU,MAAM,KAAK;AAC3B,WAAK,qBAAqB,OAAO;AACjC,WAAK,UAAU,EAAE,OAAO,SAAS,MAAM,YAAY,OAAO;AAAA,IAC5D;AAEA,aAAS,iBAAiB,OAAc;AACtC,YAAM,SAAS,MAAM;AACrB,YAAM,eAAe,OAAO;AAC5B,YAAM,eAAe,YAAY;AAEjC,UAAI,WAAW,MAAM;AAErB,UAAI,MAAM,uBAAuB,aAAa,QAAW;AACvD,cAAM,UAAU,SAAS,YAAY;AACrC,cAAM,UAAU,SAAS,YAAY;AAErC,aAAI,mCAAS,YAAW,WAAa,mCAAS,YAAW,UAAa,QAAQ,WAAW,GAAG;AAC1F,gBAAM,YAAY,YAAY,QAAQ,SAAS,QAAQ;AACvD,qBAAW,iBAAiB,SAAS;AACrC,qBAAW,MAAM,QAAQ;AACzB,yBAAe,QAAQ,kBAAkB,QAAQ,KAAK,OAAO,QAAQ,KAAK;AAC1E,eAAK,qBAAqB,QAAQ;AAAA,QACpC;AAAA,MACF;AAEA,WAAK,eAAe,YAAY;AAChC,WAAK,UAAU,EAAE,OAAO,UAAU,MAAM,cAAc;AAAA,IACxD;AAGA,UAAM,gBAAgB,CAAC,SAAS;AAC9B,UAAI,MAAM;AACR,mBAAW,MAAM;AACf,yBAAe,QAAQ;AAAA,QACzB,GAAG,GAAI;AAAA,MACT;AAAA,IACF,CAAC;;0BAICA,mBAgFM,OAAA;AAAA,QA/EH,OAAKC,eAAA;AAAA;UAAkC,QAAA,QAAK,0BAAA;AAAA,UAAuC,QAAA,WAAQ,6BAAA;AAAA,QAAA;;QAM5FC,mBAiEM,OAjEN,YAiEM;AAAA,UAhEJA,mBAeE,SAAA;AAAA,YAdA,MAAK;AAAA,YACJ,OAAO,QAAA;AAAA,YACP,KAAK,QAAA;AAAA,YACL,KAAK,QAAA;AAAA,YACL,MAAM,QAAA;AAAA,YACN,UAAU,QAAA;AAAA,YACV,aAAa,QAAA;AAAA,YACb,OAAKD,eAAA;AAAA;wCAA2E,QAAA,IAAI;AAAA,cAAc,QAAA,WAAQ,oCAAA;AAAA,YAAA;YAK3G,cAAW;AAAA,YACV,SAAO;AAAA,UAAA;UAGVC,mBA8CM,OA9CN,YA8CM;AAAA,YA7CJA,mBA4CS,UAAA;AAAA,cA3CN,OAAO,YAAA;AAAA,cACP,UAAU,QAAA;AAAA,cACV,OAAKD,eAAA;AAAA;gDAA2F,QAAA,IAAI;AAAA,cAAA;cAIrG,cAAW;AAAA,cACV,UAAQ;AAAA,YAAA;cAEO,aAAA,sBAAhBD,mBAwBWG,UAAA,EAAA,KAAA,KAAA;AAAA,gBAvBO,aAAA,MAAa,UAAU,SAAM,KAC3CC,UAAA,IAAA,GAAAJ,mBAMSG,UAAA,EAAA,KAAA,KAAAE,WALK,aAAA,MAAa,YAAlB,MAAC;sCADVL,mBAMS,UAAA;AAAA,oBAJN,KAAK,EAAE;AAAA,oBACP,OAAO,EAAE;AAAA,kBAAA,GAEPM,gBAAA,EAAE,KAAK,GAAA,GAAA,UAAA;AAAA;iBAGdF,UAAA,IAAA,GAAAJ,mBAaWG,2BAZ0B,aAAA,MAAa,QAAM,CAAA,CAA9C,YAAY,UAAU,MAAA;sCADhCH,mBAaW,YAAA;AAAA,oBAXR,KAAK;AAAA,oBACL,OAAO;AAAA,oBACR,OAAM;AAAA,kBAAA;sCAENA,mBAMSG,UAAA,MAAAE,WALK,YAAU,CAAf,MAAC;0CADVL,mBAMS,UAAA;AAAA,wBAJN,KAAK,EAAE;AAAA,wBACP,OAAO,EAAE;AAAA,sBAAA,GAEPM,gBAAA,EAAE,KAAK,GAAA,GAAA,UAAA;AAAA;;;0CAKdN,mBAMSG,UAAA,EAAA,KAAA,KAAAE,WALK,QAAA,OAAK,CAAV,MAAC;oCADVL,mBAMS,UAAA;AAAA,kBAJN,KAAK,EAAE;AAAA,kBACP,OAAO,EAAE;AAAA,gBAAA,GAEPM,gBAAA,EAAE,KAAK,GAAA,GAAA,UAAA;AAAA;;;;QAQZ,eAAA,sBADRN,mBAKM,OALN,YAKMM,gBADD,eAAA,KAAc,GAAA,CAAA;;;;;"}

package/dist/styles.css

@@ -1553,6 +1553,8 @@ html.dark .focus\:ring-offset-2:focus {
   border-radius: 0.5rem;
   font-weight: 500;
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+  line-height: 1.25;
+  white-space: nowrap;
   cursor: pointer;
   border: none;
 }
@@ -9061,6 +9063,11 @@ html.dark .mld-dataframe__loading {
   letter-spacing: 0.025em;
   color: var(--text-muted);
 }
+.mld-rack-editor__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .mld-rack-editor__toolbar-divider {
   width: 1px;
   height: 1.5rem;
@@ -11122,6 +11129,9 @@ html.dark .mld-settings-modal__option-btn--active {
 .mld-datetime-picker__footer-btn:hover {
   opacity: 0.8;
 }
+.mld-datetime-picker__footer-btn + .mld-datetime-picker__footer-btn {
+  margin-left: 0.75rem;
+}
 .mld-datetime-picker__footer-btn--muted {
   color: var(--text-muted);
 }
@@ -11910,6 +11920,8 @@ html.dark .mld-settings-modal__option-btn--active {
   border-radius: 0.5rem;
   font-weight: 500;
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+  line-height: 1.25;
+  white-space: nowrap;
   cursor: pointer;
   border: none;
 }
@@ -17580,6 +17592,11 @@ to {
   letter-spacing: 0.025em;
   color: var(--text-muted);
 }
+.mld-rack-editor__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .mld-rack-editor__toolbar-divider {
   width: 1px;
   height: 1.5rem;
@@ -22462,6 +22479,9 @@ to { transform: rotate(360deg);
 .mld-datetime-picker__footer-btn:hover {
   opacity: 0.8;
 }
+.mld-datetime-picker__footer-btn + .mld-datetime-picker__footer-btn {
+  margin-left: 0.75rem;
+}
 .mld-datetime-picker__footer-btn--muted {
   color: var(--text-muted);
 }

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, ResourceStatus, ResourceSpec, } from './components';
+export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, AlertType, Toast, TabItem, SelectOption, RadioOption, FormFieldProps, SidebarToolSection, CollapsibleState, TopBarVariant, TopBarPage, TopBarTab, TopBarTabOption, TopBarSettingsConfig, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectSize, PillVariant, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, TooltipPosition, ConfirmVariant, SettingsTab, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, ResourceStatus, ResourceSpec, MoleculeData, StorageCondition, ReagentColumn, Reagent, TreeNodeType, BadgeVariant, TreeNode, } from './components';
 export type { AuthConfig, UserInfo, LoginResponse, TokenVerifyResponse, RegisterRequest, UpdateProfileRequest, CredentialInfo, } from './auth';
 export type { PluginInfo, PluginNavItem, PluginSettings, PluginSettingField, PlatformContext, PlatformContextOptions, PlatformEventType, PlatformEvent, ThemeMode, ColorPalette, TableDensity, } from './platform';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mld-sdk",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "MLD Platform SDK - Vue 3 components, composables, and types for plugin development",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/AuditTrail.vue

@@ -1,17 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-
-type AuditEntryType = 'create' | 'update' | 'delete' | 'system'
-
-interface AuditEntry {
-  id: string
-  type: AuditEntryType
-  action: string
-  detail?: string
-  user?: string
-  timestamp: Date | string
-  metadata?: Record<string, unknown>
-}
+import type { AuditEntryType, AuditEntry } from '../types'
 
 interface Props {
   entries: AuditEntry[]

package/src/components/BatchProgressList.vue

@@ -1,25 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch, nextTick } from 'vue'
-
-type BatchItemStatus = 'pending' | 'processing' | 'completed' | 'error' | 'skipped'
-
-interface BatchItem {
-  id: string
-  label: string
-  status: BatchItemStatus
-  progress?: number
-  message?: string
-}
-
-interface BatchSummary {
-  total: number
-  completed: number
-  processing: number
-  error: number
-  pending: number
-  skipped: number
-  percent: number
-}
+import type { BatchItem, BatchSummary } from '../types'
 
 interface Props {
   items: BatchItem[]

package/src/components/Breadcrumb.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-interface BreadcrumbItem {
-  label: string
-  to?: string
-  href?: string
-}
+import type { BreadcrumbItem } from '../types'
 
 interface Props {
   items: BreadcrumbItem[]

package/src/components/DateTimePicker.vue

@@ -370,7 +370,7 @@ onUnmounted(() => {
         <div class="mld-datetime-picker__footer">
           <div>
             <button type="button" class="mld-datetime-picker__footer-btn" @click="goToToday">Today</button>
-            <button type="button" class="mld-datetime-picker__footer-btn" style="margin-left: 0.75rem" @click="goToNow">Now</button>
+            <button type="button" class="mld-datetime-picker__footer-btn" @click="goToNow">Now</button>
           </div>
           <button
             v-if="clearable && modelValue"

package/src/components/MoleculeInput.story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import MoleculeInput from './MoleculeInput.vue'
-import type { MoleculeData } from './MoleculeInput.vue'
+import type { MoleculeData } from '../types'
 
 function initState() {
   return {

package/src/components/MoleculeInput.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
-
-export interface MoleculeData {
-  smiles: string
-  molfile: string
-}
+import type { MoleculeData } from '../types'
 
 interface Props {
   modelValue?: MoleculeData

package/src/components/RackEditor.vue

@@ -287,7 +287,7 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <div v-if="editor.activeRack.value && !readonly" class="mld-rack-editor__toolbar">
       <div class="mld-rack-editor__toolbar-group">
         <!-- Format selector -->
-        <div style="display: flex; align-items: center; gap: 0.5rem;">
+        <div class="mld-rack-editor__toolbar-section">
           <span class="mld-rack-editor__toolbar-label">Plate</span>
           <div class="mld-rack-editor__format-btns">
             <button
@@ -307,7 +307,7 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         <div class="mld-rack-editor__toolbar-divider" />
 
         <!-- Slot selector -->
-        <div style="display: flex; align-items: center; gap: 0.5rem;">
+        <div class="mld-rack-editor__toolbar-section">
           <span class="mld-rack-editor__toolbar-label">Slot</span>
           <div class="mld-rack-editor__slot-btns">
             <button

package/src/components/ReagentList.story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ReagentList from './ReagentList.vue'
-import type { Reagent } from './ReagentList.vue'
+import type { Reagent } from '../types'
 
 const today = new Date()
 const pastDate = new Date(today)

package/src/components/ReagentList.vue

@@ -1,31 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-
-export type StorageCondition = 'RT' | '4C' | '-20C' | '-80C'
-
-export type ReagentColumn =
-  | 'name'
-  | 'catalog'
-  | 'lot'
-  | 'expiry'
-  | 'storage'
-  | 'location'
-  | 'stock'
-  | 'supplier'
-
-export interface Reagent {
-  id: string
-  name: string
-  catalogNumber?: string
-  lotNumber?: string
-  expiryDate?: Date | string
-  storageCondition?: StorageCondition
-  location?: string
-  stockLevel?: number
-  stockUnit?: string
-  supplier?: string
-  url?: string
-}
+import type { ReagentColumn, Reagent } from '../types'
 
 interface Props {
   modelValue?: Reagent[]

package/src/components/SampleHierarchyTree.story.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import SampleHierarchyTree from './SampleHierarchyTree.vue'
-import type { TreeNode } from './SampleHierarchyTree.vue'
+import type { TreeNode } from '../types'
 
 const mockNodes: TreeNode[] = [
   {

package/src/components/SampleHierarchyTree.vue

@@ -1,31 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, type VNode } from 'vue'
 import { h, Transition } from 'vue'
-
-export type TreeNodeType =
-  | 'study'
-  | 'experiment'
-  | 'plate'
-  | 'sample'
-  | 'cell_line'
-  | 'passage'
-  | 'clone'
-  | 'treatment'
-  | 'folder'
-  | 'custom'
-
-export type BadgeVariant = 'default' | 'success' | 'warning' | 'error'
-
-export interface TreeNode {
-  id: string
-  label: string
-  type?: TreeNodeType
-  icon?: string
-  children?: TreeNode[]
-  metadata?: Record<string, unknown>
-  badge?: string | number
-  badgeVariant?: BadgeVariant
-}
+import type { TreeNodeType, BadgeVariant, TreeNode } from '../types'
 
 interface Props {
   nodes: TreeNode[]

package/src/components/ScheduleCalendar.vue

@@ -360,7 +360,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="mld-schedule" :style="{ '--slot-height': `${SLOT_HEIGHT}px` } as any">
+  <div class="mld-schedule" :style="({ '--slot-height': `${SLOT_HEIGHT}px` } as Record<string, string>)">
     <!-- Header -->
     <div v-if="showNavigation || showViewToggle" class="mld-schedule__header">
       <div v-if="showNavigation" class="mld-schedule__nav">

package/src/components/ScientificNumber.story.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import ScientificNumber from './ScientificNumber.vue'
-
-type NumberNotation = 'auto' | 'scientific' | 'engineering' | 'compact'
+import type { NumberNotation } from '../types'
 const notations: NumberNotation[] = ['auto', 'scientific', 'engineering', 'compact']
 </script>
 

package/src/components/ScientificNumber.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-
-type NumberNotation = 'auto' | 'scientific' | 'engineering' | 'compact'
+import type { NumberNotation } from '../types'
 
 interface Props {
   value: number

package/src/components/SettingsModal.vue

@@ -2,13 +2,7 @@
 import { ref, computed } from 'vue'
 import BaseModal from './BaseModal.vue'
 import { useSettingsStore, colorPalettes } from '../stores/settings'
-import type { ThemeMode, ColorPalette, TableDensity } from '../types'
-
-export interface SettingsTab {
-  id: string
-  label: string
-  icon?: string
-}
+import type { ThemeMode, ColorPalette, TableDensity, SettingsTab } from '../types'
 
 interface Props {
   modelValue: boolean

package/src/components/StepWizard.vue

@@ -1,15 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-
-interface WizardStep {
-  id: string
-  label: string
-  description?: string
-  icon?: string
-  optional?: boolean
-}
-
-type WizardStepState = 'pending' | 'active' | 'completed' | 'disabled'
+import type { WizardStep, WizardStepState } from '../types'
 
 interface Props {
   steps: WizardStep[]

package/src/components/UnitInput.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-
-interface UnitOption {
-  value: string
-  label: string
-  factor?: number
-  group?: string
-}
+import type { UnitOption } from '../types'
 
 interface Props {
   modelValue?: number

package/src/styles/components/button.css

@@ -8,6 +8,8 @@
   border-radius: 0.5rem;
   font-weight: 500;
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+  line-height: 1.25;
+  white-space: nowrap;
   cursor: pointer;
   border: none;
 }

package/src/styles/components/datetime-picker.css

@@ -195,6 +195,10 @@
   opacity: 0.8;
 }
 
+.mld-datetime-picker__footer-btn + .mld-datetime-picker__footer-btn {
+  margin-left: 0.75rem;
+}
+
 .mld-datetime-picker__footer-btn--muted {
   color: var(--text-muted);
 }

package/src/styles/components/rack-editor.css

@@ -170,6 +170,12 @@
   color: var(--text-muted);
 }
 
+.mld-rack-editor__toolbar-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .mld-rack-editor__toolbar-divider {
   width: 1px;
   height: 1.5rem;

package/src/types/index.ts

@@ -120,6 +120,16 @@ export type {
   // Resource types
   ResourceStatus,
   ResourceSpec,
+  // MoleculeInput types
+  MoleculeData,
+  // ReagentList types
+  StorageCondition,
+  ReagentColumn,
+  Reagent,
+  // SampleHierarchyTree types
+  TreeNodeType,
+  BadgeVariant,
+  TreeNode,
 } from './components'
 
 // Auth types