@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0-beta.9

package/README.md

@@ -33,6 +33,11 @@ import '@morscherlab/mint-sdk/styles'
 
 The SDK includes all necessary CSS utility classes pre-built, so **Tailwind CSS is optional**. The styles work standalone or alongside Tailwind.
 
+> **Required.** `dist/styles.css` is the SDK's single stylesheet: components no
+> longer `@import` their own CSS from their `<style>` block, so a plugin that
+> skips this import renders unstyled components. `src/styles/index.css` is the
+> sole aggregator — every component stylesheet is imported there exactly once.
+
 ### 2. (Optional) Configure Tailwind
 
 If you're using Tailwind CSS and want to extend the MINT theme:
@@ -656,6 +661,31 @@ The SDK provides ready-to-use CSS classes:
 - `.toggle-switch` - Toggle switch
 - `.checkbox-modern` - Styled checkbox
 
+## Icons
+
+**[lucide-vue-next](https://lucide.dev) is the icon standard for this SDK.** New
+components should import the icon component they need rather than inlining an
+SVG:
+
+```vue
+<script setup lang="ts">
+import { RefreshCw } from 'lucide-vue-next'
+</script>
+
+<template>
+  <RefreshCw :size="16" />
+</template>
+```
+
+`lucide-vue-next` is a declared dependency and is **external** to the built
+bundle (like `axios` and `@floating-ui/dom`), so the consumer resolves one
+shared copy instead of the SDK shipping its own.
+
+A number of older components still carry hand-written inline `<svg>` markup —
+usually annotated with the Lucide icon name they were traced from. Those are
+converted opportunistically, not in bulk; leave one alone unless you are already
+editing the component.
+
 ## Theming
 
 The SDK uses CSS variables for theming. Override them to customize:

package/dist/{ExperimentPopover-CfOdh5Rm.js → ExperimentPopover-oL0fg_A0.js}

@@ -1,6 +1,6 @@
 import { n as __exportAll } from "./chunk-BoAXSpZd.js";
 import { f as BaseModal_default, h as BaseButton_default, l as formatExperimentStatus } from "./experiment-utils-DV3DrvE_.js";
-import { t as useDropdownState } from "./useDropdownState-D5G4UvWd.js";
+import { t as useDropdownState } from "./useDropdownState-DitCtrTT.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, normalizeClass, onUnmounted, openBlock, ref, renderSlot, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
 //#region src/components/ConfirmDialog.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "mint-confirm" };
@@ -246,7 +246,7 @@ var ExperimentPopover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			return props.experimentName || props.experimentCode || "No experiment";
 		});
 		const emit = __emit;
-		const { isOpen, rootRef: popoverRef, close, toggle } = useDropdownState({ closeOnEscape: false });
+		const { isOpen, rootRef: popoverRef, triggerRef, close, toggle } = useDropdownState({ closeOnEscape: false });
 		const showSuccess = ref(false);
 		const showConfirm = ref(false);
 		function handleSelect() {
@@ -287,6 +287,8 @@ var ExperimentPopover_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				class: "mint-experiment-popover"
 			}, [
 				createElementVNode("div", { class: normalizeClass(["mint-experiment-popover__split", { "mint-experiment-popover__split--with-save": __props.showSave && __props.experimentName }]) }, [createElementVNode("button", {
+					ref_key: "triggerRef",
+					ref: triggerRef,
 					type: "button",
 					class: normalizeClass([
 						"mint-experiment-popover__trigger",
@@ -439,4 +441,4 @@ var ExperimentPopover_default = ExperimentPopover_vue_vue_type_script_setup_true
 //#endregion
 export { ExperimentPopover_exports as n, ConfirmDialog_default as r, ExperimentPopover_default as t };
 
-//# sourceMappingURL=ExperimentPopover-CfOdh5Rm.js.map
+//# sourceMappingURL=ExperimentPopover-oL0fg_A0.js.map

package/dist/ExperimentPopover-oL0fg_A0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperimentPopover-oL0fg_A0.js","names":["$slots"],"sources":["../src/components/ConfirmDialog.vue","../src/components/ConfirmDialog.vue","../src/components/ExperimentPopover.vue","../src/components/ExperimentPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Confirm/cancel dialog with danger, warning, and info variants; blocks close while loading. */\nimport { computed } from 'vue'\nimport type { ButtonVariant } from '../types'\nimport BaseModal from './BaseModal.vue'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  modelValue: boolean\n  title?: string\n  subtitle?: string\n  message?: string\n  variant?: 'danger' | 'warning' | 'info'\n  confirmLabel?: string\n  cancelLabel?: string\n  loading?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Confirm',\n  variant: 'danger',\n  confirmLabel: 'Confirm',\n  cancelLabel: 'Cancel',\n  loading: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  confirm: []\n  cancel: []\n}>()\n\nfunction handleCancel() {\n  emit('update:modelValue', false)\n  emit('cancel')\n}\n\nfunction handleConfirm() {\n  emit('confirm')\n}\n\nconst confirmVariant = computed<ButtonVariant>(() => {\n  if (props.variant === 'info') return 'primary'\n  if (props.variant === 'warning') return 'cta'\n  return 'danger'\n})\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :subtitle=\"subtitle\"\n    size=\"sm\"\n    :closable=\"!loading\"\n    :close-on-overlay=\"!loading\"\n    :close-on-escape=\"!loading\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <div class=\"mint-confirm\">\n      <!-- Icon is now opt-in via slot. Refresh design keeps the body focused on\n           the message; variant intent is carried by the confirm button's color. -->\n      <div\n        v-if=\"$slots.icon\"\n        :class=\"['mint-confirm__icon', `mint-confirm__icon--${variant}`]\"\n      >\n        <slot name=\"icon\" />\n      </div>\n      <p v-if=\"message\" class=\"mint-confirm__message\">{{ message }}</p>\n      <slot />\n    </div>\n\n    <template #footer>\n      <div class=\"mint-confirm__footer\">\n        <BaseButton\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"md\"\n          :disabled=\"loading\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelLabel }}\n        </BaseButton>\n        <BaseButton\n          type=\"button\"\n          :variant=\"confirmVariant\"\n          size=\"md\"\n          :loading=\"loading\"\n          @click=\"handleConfirm\"\n        >\n          {{ confirmLabel }}\n        </BaseButton>\n      </div>\n    </template>\n  </BaseModal>\n</template>\n","<script setup lang=\"ts\">\n/** Confirm/cancel dialog with danger, warning, and info variants; blocks close while loading. */\nimport { computed } from 'vue'\nimport type { ButtonVariant } from '../types'\nimport BaseModal from './BaseModal.vue'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  modelValue: boolean\n  title?: string\n  subtitle?: string\n  message?: string\n  variant?: 'danger' | 'warning' | 'info'\n  confirmLabel?: string\n  cancelLabel?: string\n  loading?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Confirm',\n  variant: 'danger',\n  confirmLabel: 'Confirm',\n  cancelLabel: 'Cancel',\n  loading: false,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  confirm: []\n  cancel: []\n}>()\n\nfunction handleCancel() {\n  emit('update:modelValue', false)\n  emit('cancel')\n}\n\nfunction handleConfirm() {\n  emit('confirm')\n}\n\nconst confirmVariant = computed<ButtonVariant>(() => {\n  if (props.variant === 'info') return 'primary'\n  if (props.variant === 'warning') return 'cta'\n  return 'danger'\n})\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :subtitle=\"subtitle\"\n    size=\"sm\"\n    :closable=\"!loading\"\n    :close-on-overlay=\"!loading\"\n    :close-on-escape=\"!loading\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <div class=\"mint-confirm\">\n      <!-- Icon is now opt-in via slot. Refresh design keeps the body focused on\n           the message; variant intent is carried by the confirm button's color. -->\n      <div\n        v-if=\"$slots.icon\"\n        :class=\"['mint-confirm__icon', `mint-confirm__icon--${variant}`]\"\n      >\n        <slot name=\"icon\" />\n      </div>\n      <p v-if=\"message\" class=\"mint-confirm__message\">{{ message }}</p>\n      <slot />\n    </div>\n\n    <template #footer>\n      <div class=\"mint-confirm__footer\">\n        <BaseButton\n          type=\"button\"\n          variant=\"secondary\"\n          size=\"md\"\n          :disabled=\"loading\"\n          @click=\"handleCancel\"\n        >\n          {{ cancelLabel }}\n        </BaseButton>\n        <BaseButton\n          type=\"button\"\n          :variant=\"confirmVariant\"\n          size=\"md\"\n          :loading=\"loading\"\n          @click=\"handleConfirm\"\n        >\n          {{ confirmLabel }}\n        </BaseButton>\n      </div>\n    </template>\n  </BaseModal>\n</template>\n","<script setup lang=\"ts\">\n/** Floating popover showing the active experiment with save, detach, and select actions. */\nimport { ref, computed, watch, onUnmounted } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\nimport { formatExperimentStatus } from '../composables/experiment-utils'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\ninterface Props {\n  experimentName?: string\n  experimentCode?: string\n  experimentStatus?: string\n  /** An experiment is bound but the platform has not returned its record yet. */\n  isResolving?: boolean\n  /** Message explaining why the bound experiment could not be resolved. */\n  error?: string\n  showSave?: boolean\n  showDetach?: boolean\n  saveDisabled?: boolean\n  saveLoading?: boolean\n  saveSuccessMessage?: string\n  saveDisabledMessage?: string\n  confirmSave?: boolean\n  confirmTitle?: string\n  confirmMessage?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  isResolving: false,\n  showSave: false,\n  showDetach: false,\n  saveDisabled: false,\n  saveLoading: false,\n  confirmSave: true,\n})\n\n// An experiment is bound but has no name to show — either still resolving or\n// resolution failed. The id is never substituted: a name may only come from the\n// platform, so these states say what is happening instead of inventing a label.\nconst isUnresolved = computed(() => props.isResolving || !!props.error)\nconst hasExperiment = computed(() => !!props.experimentName || !!props.experimentCode)\n\nconst panelSubtitle = computed(() => {\n  if (props.isResolving) return 'Loading experiment…'\n  if (props.error) return 'Could not load this experiment'\n  return hasExperiment.value ? 'Linked experiment context' : 'Link to an MINT experiment'\n})\n\nconst triggerLabel = computed(() => {\n  if (props.isResolving) return 'Loading experiment'\n  if (props.error) return 'Experiment unavailable'\n  return props.experimentName || props.experimentCode || 'No experiment'\n})\n\nconst emit = defineEmits<{\n  select: []\n  save: []\n  detach: []\n}>()\n\nconst { isOpen, rootRef: popoverRef, triggerRef, close, toggle } = useDropdownState({\n  closeOnEscape: false,\n})\nconst showSuccess = ref(false)\nconst showConfirm = ref(false)\n\nfunction handleSelect() {\n  emit('select')\n  close()\n}\n\nfunction handleSave() {\n  if (props.saveDisabled || props.saveLoading) return\n  if (props.confirmSave) {\n    showConfirm.value = true\n  } else {\n    emit('save')\n  }\n}\n\nfunction handleConfirmSave() {\n  showConfirm.value = false\n  emit('save')\n}\n\nfunction handleDetach() {\n  emit('detach')\n  close()\n}\n\nlet successTimer: ReturnType<typeof setTimeout> | null = null\n\n// Show success state when saveSuccessMessage changes from empty to a value\nwatch(() => props.saveSuccessMessage, (msg) => {\n  if (successTimer) clearTimeout(successTimer)\n  if (msg) {\n    showSuccess.value = true\n    successTimer = setTimeout(() => {\n      showSuccess.value = false\n      successTimer = null\n    }, 3000)\n  }\n})\n\nonUnmounted(() => {\n  if (successTimer) clearTimeout(successTimer)\n})\n</script>\n\n<template>\n  <div ref=\"popoverRef\" class=\"mint-experiment-popover\">\n    <!-- Split trigger: experiment pill + inline save -->\n    <div\n      :class=\"[\n        'mint-experiment-popover__split',\n        { 'mint-experiment-popover__split--with-save': showSave && experimentName },\n      ]\"\n    >\n      <!-- Left: experiment trigger (opens popover). Prefer the human-readable\n           name; the formal code, when present, stays in the detail panel. -->\n      <button\n        ref=\"triggerRef\"\n        type=\"button\"\n        :class=\"[\n          'mint-experiment-popover__trigger',\n          { 'mint-experiment-popover__trigger--active': isOpen },\n          { 'mint-experiment-popover__trigger--empty': !isUnresolved && !hasExperiment },\n          { 'mint-experiment-popover__trigger--loading': isResolving },\n          { 'mint-experiment-popover__trigger--error': !isResolving && !!error },\n        ]\"\n        :title=\"isUnresolved ? triggerLabel : experimentName || experimentCode || undefined\"\n        :aria-label=\"isUnresolved ? triggerLabel : undefined\"\n        :aria-busy=\"isResolving || undefined\"\n        :aria-expanded=\"isOpen\"\n        @click.stop=\"toggle\"\n      >\n        <!-- Flask icon -->\n        <svg class=\"mint-experiment-popover__trigger-icon\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"1.75\"\n            d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n          />\n        </svg>\n        <!-- Resolving and error come first: with an experiment bound but no name\n             yet, \"No experiment\" would be a lie. -->\n        <span v-if=\"isResolving\" class=\"mint-experiment-popover__trigger-skeleton\" aria-hidden=\"true\" />\n        <span v-else-if=\"error\" class=\"mint-experiment-popover__trigger-text\">Experiment unavailable</span>\n        <!-- Name preferred, code as fallback, \"No experiment\" as empty state -->\n        <span v-else-if=\"experimentName\" class=\"mint-experiment-popover__trigger-text\">{{ experimentName }}</span>\n        <span v-else-if=\"experimentCode\" class=\"mint-experiment-popover__trigger-code\">{{ experimentCode }}</span>\n        <span v-else class=\"mint-experiment-popover__trigger-text\">No experiment</span>\n        <!-- Chevron -->\n        <svg class=\"mint-experiment-popover__trigger-chevron\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </button>\n\n      <!-- Right: inline save button (direct action) -->\n      <button\n        v-if=\"showSave && experimentName\"\n        type=\"button\"\n        :class=\"[\n          'mint-experiment-popover__save-trigger',\n          { 'mint-experiment-popover__save-trigger--loading': saveLoading },\n          { 'mint-experiment-popover__save-trigger--success': showSuccess },\n          { 'mint-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },\n        ]\"\n        :disabled=\"saveDisabled && !showSuccess\"\n        :title=\"saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'\"\n        aria-label=\"Save to experiment\"\n        @click.stop=\"handleSave\"\n      >\n        <!-- Loading spinner -->\n        <span v-if=\"saveLoading\" class=\"mint-experiment-popover__spinner--inline\" />\n        <!-- Success check -->\n        <svg v-else-if=\"showSuccess\" class=\"mint-experiment-popover__save-trigger-icon\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M5 13l4 4L19 7\" />\n        </svg>\n        <!-- Save icon -->\n        <svg v-else class=\"mint-experiment-popover__save-trigger-icon\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Popover panel -->\n    <div v-if=\"isOpen\" class=\"mint-experiment-popover__panel\">\n      <!-- Header -->\n      <div class=\"mint-experiment-popover__header\">\n        <div class=\"mint-experiment-popover__title\">Experiment</div>\n        <div class=\"mint-experiment-popover__subtitle\">\n          {{ panelSubtitle }}\n        </div>\n      </div>\n\n      <!-- Bound, still resolving — placeholders stand in for the record the\n           platform has not returned yet. -->\n      <div v-if=\"isResolving\" class=\"mint-experiment-popover__body\">\n        <div class=\"mint-experiment-popover__card\" aria-busy=\"true\">\n          <div class=\"mint-experiment-popover__card-icon\">\n            <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"1.75\"\n                d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n              />\n            </svg>\n          </div>\n          <div class=\"mint-experiment-popover__card-info\">\n            <span class=\"mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--code\" />\n            <span class=\"mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--name\" />\n            <span class=\"mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--status\" />\n          </div>\n        </div>\n        <div class=\"mint-experiment-popover__card-actions\">\n          <button type=\"button\" class=\"mint-experiment-popover__change-btn\" @click=\"handleSelect\">\n            Change\n          </button>\n          <button v-if=\"showDetach\" type=\"button\" class=\"mint-experiment-popover__detach-btn\" @click=\"handleDetach\">\n            Detach\n          </button>\n        </div>\n      </div>\n\n      <!-- Bound, resolution failed — Detach stays reachable so the user is not\n           stuck on an experiment the platform cannot describe. -->\n      <div v-else-if=\"error\" class=\"mint-experiment-popover__body\">\n        <div class=\"mint-experiment-popover__card mint-experiment-popover__card--error\" role=\"alert\">\n          <div class=\"mint-experiment-popover__card-icon mint-experiment-popover__card-icon--error\">\n            <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"1.75\"\n                d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n              />\n            </svg>\n          </div>\n          <div class=\"mint-experiment-popover__card-info\">\n            <div class=\"mint-experiment-popover__card-name\">Experiment unavailable</div>\n            <div class=\"mint-experiment-popover__card-message\">{{ error }}</div>\n          </div>\n        </div>\n        <div class=\"mint-experiment-popover__card-actions\">\n          <button type=\"button\" class=\"mint-experiment-popover__change-btn\" @click=\"handleSelect\">\n            Change\n          </button>\n          <button v-if=\"showDetach\" type=\"button\" class=\"mint-experiment-popover__detach-btn\" @click=\"handleDetach\">\n            Detach\n          </button>\n        </div>\n      </div>\n\n      <!-- No experiment selected -->\n      <div v-else-if=\"!experimentName\" class=\"mint-experiment-popover__body\">\n        <button type=\"button\" class=\"mint-experiment-popover__select-btn\" @click=\"handleSelect\">\n          <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\" />\n          </svg>\n          Select Experiment\n        </button>\n      </div>\n\n      <!-- Experiment selected -->\n      <div v-else class=\"mint-experiment-popover__body\">\n        <div class=\"mint-experiment-popover__card\">\n          <div class=\"mint-experiment-popover__card-icon\">\n            <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"1.75\"\n                d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n              />\n            </svg>\n          </div>\n          <div class=\"mint-experiment-popover__card-info\">\n            <span v-if=\"experimentCode\" class=\"mint-experiment-popover__card-code\">{{ experimentCode }}</span>\n            <div class=\"mint-experiment-popover__card-name\">{{ experimentName }}</div>\n            <div v-if=\"experimentStatus\" class=\"mint-experiment-popover__card-status\">\n              {{ formatExperimentStatus(experimentStatus) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"mint-experiment-popover__card-actions\">\n          <button type=\"button\" class=\"mint-experiment-popover__change-btn\" @click=\"handleSelect\">\n            Change\n          </button>\n          <button v-if=\"showDetach\" type=\"button\" class=\"mint-experiment-popover__detach-btn\" @click=\"handleDetach\">\n            Detach\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Save confirmation dialog -->\n    <ConfirmDialog\n      v-model=\"showConfirm\"\n      :title=\"confirmTitle ?? 'Save to Experiment'\"\n      :message=\"confirmMessage ?? `Save current data to ${experimentName}?`\"\n      variant=\"info\"\n      confirm-label=\"Save\"\n      :loading=\"saveLoading\"\n      @confirm=\"handleConfirmSave\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Floating popover showing the active experiment with save, detach, and select actions. */\nimport { ref, computed, watch, onUnmounted } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\nimport { formatExperimentStatus } from '../composables/experiment-utils'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\ninterface Props {\n  experimentName?: string\n  experimentCode?: string\n  experimentStatus?: string\n  /** An experiment is bound but the platform has not returned its record yet. */\n  isResolving?: boolean\n  /** Message explaining why the bound experiment could not be resolved. */\n  error?: string\n  showSave?: boolean\n  showDetach?: boolean\n  saveDisabled?: boolean\n  saveLoading?: boolean\n  saveSuccessMessage?: string\n  saveDisabledMessage?: string\n  confirmSave?: boolean\n  confirmTitle?: string\n  confirmMessage?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  isResolving: false,\n  showSave: false,\n  showDetach: false,\n  saveDisabled: false,\n  saveLoading: false,\n  confirmSave: true,\n})\n\n// An experiment is bound but has no name to show — either still resolving or\n// resolution failed. The id is never substituted: a name may only come from the\n// platform, so these states say what is happening instead of inventing a label.\nconst isUnresolved = computed(() => props.isResolving || !!props.error)\nconst hasExperiment = computed(() => !!props.experimentName || !!props.experimentCode)\n\nconst panelSubtitle = computed(() => {\n  if (props.isResolving) return 'Loading experiment…'\n  if (props.error) return 'Could not load this experiment'\n  return hasExperiment.value ? 'Linked experiment context' : 'Link to an MINT experiment'\n})\n\nconst triggerLabel = computed(() => {\n  if (props.isResolving) return 'Loading experiment'\n  if (props.error) return 'Experiment unavailable'\n  return props.experimentName || props.experimentCode || 'No experiment'\n})\n\nconst emit = defineEmits<{\n  select: []\n  save: []\n  detach: []\n}>()\n\nconst { isOpen, rootRef: popoverRef, triggerRef, close, toggle } = useDropdownState({\n  closeOnEscape: false,\n})\nconst showSuccess = ref(false)\nconst showConfirm = ref(false)\n\nfunction handleSelect() {\n  emit('select')\n  close()\n}\n\nfunction handleSave() {\n  if (props.saveDisabled || props.saveLoading) return\n  if (props.confirmSave) {\n    showConfirm.value = true\n  } else {\n    emit('save')\n  }\n}\n\nfunction handleConfirmSave() {\n  showConfirm.value = false\n  emit('save')\n}\n\nfunction handleDetach() {\n  emit('detach')\n  close()\n}\n\nlet successTimer: ReturnType<typeof setTimeout> | null = null\n\n// Show success state when saveSuccessMessage changes from empty to a value\nwatch(() => props.saveSuccessMessage, (msg) => {\n  if (successTimer) clearTimeout(successTimer)\n  if (msg) {\n    showSuccess.value = true\n    successTimer = setTimeout(() => {\n      showSuccess.value = false\n      successTimer = null\n    }, 3000)\n  }\n})\n\nonUnmounted(() => {\n  if (successTimer) clearTimeout(successTimer)\n})\n</script>\n\n<template>\n  <div ref=\"popoverRef\" class=\"mint-experiment-popover\">\n    <!-- Split trigger: experiment pill + inline save -->\n    <div\n      :class=\"[\n        'mint-experiment-popover__split',\n        { 'mint-experiment-popover__split--with-save': showSave && experimentName },\n      ]\"\n    >\n      <!-- Left: experiment trigger (opens popover). Prefer the human-readable\n           name; the formal code, when present, stays in the detail panel. -->\n      <button\n        ref=\"triggerRef\"\n        type=\"button\"\n        :class=\"[\n          'mint-experiment-popover__trigger',\n          { 'mint-experiment-popover__trigger--active': isOpen },\n          { 'mint-experiment-popover__trigger--empty': !isUnresolved && !hasExperiment },\n          { 'mint-experiment-popover__trigger--loading': isResolving },\n          { 'mint-experiment-popover__trigger--error': !isResolving && !!error },\n        ]\"\n        :title=\"isUnresolved ? triggerLabel : experimentName || experimentCode || undefined\"\n        :aria-label=\"isUnresolved ? triggerLabel : undefined\"\n        :aria-busy=\"isResolving || undefined\"\n        :aria-expanded=\"isOpen\"\n        @click.stop=\"toggle\"\n      >\n        <!-- Flask icon -->\n        <svg class=\"mint-experiment-popover__trigger-icon\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"1.75\"\n            d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n          />\n        </svg>\n        <!-- Resolving and error come first: with an experiment bound but no name\n             yet, \"No experiment\" would be a lie. -->\n        <span v-if=\"isResolving\" class=\"mint-experiment-popover__trigger-skeleton\" aria-hidden=\"true\" />\n        <span v-else-if=\"error\" class=\"mint-experiment-popover__trigger-text\">Experiment unavailable</span>\n        <!-- Name preferred, code as fallback, \"No experiment\" as empty state -->\n        <span v-else-if=\"experimentName\" class=\"mint-experiment-popover__trigger-text\">{{ experimentName }}</span>\n        <span v-else-if=\"experimentCode\" class=\"mint-experiment-popover__trigger-code\">{{ experimentCode }}</span>\n        <span v-else class=\"mint-experiment-popover__trigger-text\">No experiment</span>\n        <!-- Chevron -->\n        <svg class=\"mint-experiment-popover__trigger-chevron\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </button>\n\n      <!-- Right: inline save button (direct action) -->\n      <button\n        v-if=\"showSave && experimentName\"\n        type=\"button\"\n        :class=\"[\n          'mint-experiment-popover__save-trigger',\n          { 'mint-experiment-popover__save-trigger--loading': saveLoading },\n          { 'mint-experiment-popover__save-trigger--success': showSuccess },\n          { 'mint-experiment-popover__save-trigger--disabled': saveDisabled && !showSuccess },\n        ]\"\n        :disabled=\"saveDisabled && !showSuccess\"\n        :title=\"saveDisabled && saveDisabledMessage ? saveDisabledMessage : showSuccess && saveSuccessMessage ? saveSuccessMessage : 'Save to Experiment'\"\n        aria-label=\"Save to experiment\"\n        @click.stop=\"handleSave\"\n      >\n        <!-- Loading spinner -->\n        <span v-if=\"saveLoading\" class=\"mint-experiment-popover__spinner--inline\" />\n        <!-- Success check -->\n        <svg v-else-if=\"showSuccess\" class=\"mint-experiment-popover__save-trigger-icon\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M5 13l4 4L19 7\" />\n        </svg>\n        <!-- Save icon -->\n        <svg v-else class=\"mint-experiment-popover__save-trigger-icon\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Popover panel -->\n    <div v-if=\"isOpen\" class=\"mint-experiment-popover__panel\">\n      <!-- Header -->\n      <div class=\"mint-experiment-popover__header\">\n        <div class=\"mint-experiment-popover__title\">Experiment</div>\n        <div class=\"mint-experiment-popover__subtitle\">\n          {{ panelSubtitle }}\n        </div>\n      </div>\n\n      <!-- Bound, still resolving — placeholders stand in for the record the\n           platform has not returned yet. -->\n      <div v-if=\"isResolving\" class=\"mint-experiment-popover__body\">\n        <div class=\"mint-experiment-popover__card\" aria-busy=\"true\">\n          <div class=\"mint-experiment-popover__card-icon\">\n            <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"1.75\"\n                d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n              />\n            </svg>\n          </div>\n          <div class=\"mint-experiment-popover__card-info\">\n            <span class=\"mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--code\" />\n            <span class=\"mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--name\" />\n            <span class=\"mint-experiment-popover__skeleton-line mint-experiment-popover__skeleton-line--status\" />\n          </div>\n        </div>\n        <div class=\"mint-experiment-popover__card-actions\">\n          <button type=\"button\" class=\"mint-experiment-popover__change-btn\" @click=\"handleSelect\">\n            Change\n          </button>\n          <button v-if=\"showDetach\" type=\"button\" class=\"mint-experiment-popover__detach-btn\" @click=\"handleDetach\">\n            Detach\n          </button>\n        </div>\n      </div>\n\n      <!-- Bound, resolution failed — Detach stays reachable so the user is not\n           stuck on an experiment the platform cannot describe. -->\n      <div v-else-if=\"error\" class=\"mint-experiment-popover__body\">\n        <div class=\"mint-experiment-popover__card mint-experiment-popover__card--error\" role=\"alert\">\n          <div class=\"mint-experiment-popover__card-icon mint-experiment-popover__card-icon--error\">\n            <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"1.75\"\n                d=\"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z\"\n              />\n            </svg>\n          </div>\n          <div class=\"mint-experiment-popover__card-info\">\n            <div class=\"mint-experiment-popover__card-name\">Experiment unavailable</div>\n            <div class=\"mint-experiment-popover__card-message\">{{ error }}</div>\n          </div>\n        </div>\n        <div class=\"mint-experiment-popover__card-actions\">\n          <button type=\"button\" class=\"mint-experiment-popover__change-btn\" @click=\"handleSelect\">\n            Change\n          </button>\n          <button v-if=\"showDetach\" type=\"button\" class=\"mint-experiment-popover__detach-btn\" @click=\"handleDetach\">\n            Detach\n          </button>\n        </div>\n      </div>\n\n      <!-- No experiment selected -->\n      <div v-else-if=\"!experimentName\" class=\"mint-experiment-popover__body\">\n        <button type=\"button\" class=\"mint-experiment-popover__select-btn\" @click=\"handleSelect\">\n          <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\" />\n          </svg>\n          Select Experiment\n        </button>\n      </div>\n\n      <!-- Experiment selected -->\n      <div v-else class=\"mint-experiment-popover__body\">\n        <div class=\"mint-experiment-popover__card\">\n          <div class=\"mint-experiment-popover__card-icon\">\n            <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"1.75\"\n                d=\"M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z\"\n              />\n            </svg>\n          </div>\n          <div class=\"mint-experiment-popover__card-info\">\n            <span v-if=\"experimentCode\" class=\"mint-experiment-popover__card-code\">{{ experimentCode }}</span>\n            <div class=\"mint-experiment-popover__card-name\">{{ experimentName }}</div>\n            <div v-if=\"experimentStatus\" class=\"mint-experiment-popover__card-status\">\n              {{ formatExperimentStatus(experimentStatus) }}\n            </div>\n          </div>\n        </div>\n        <div class=\"mint-experiment-popover__card-actions\">\n          <button type=\"button\" class=\"mint-experiment-popover__change-btn\" @click=\"handleSelect\">\n            Change\n          </button>\n          <button v-if=\"showDetach\" type=\"button\" class=\"mint-experiment-popover__detach-btn\" @click=\"handleDetach\">\n            Detach\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <!-- Save confirmation dialog -->\n    <ConfirmDialog\n      v-model=\"showConfirm\"\n      :title=\"confirmTitle ?? 'Save to Experiment'\"\n      :message=\"confirmMessage ?? `Save current data to ${experimentName}?`\"\n      variant=\"info\"\n      confirm-label=\"Save\"\n      :loading=\"saveLoading\"\n      @confirm=\"handleConfirmSave\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/{ExperimentSelectorModal-DvIagrxY.js → ExperimentSelectorModal-BeEOomw_.js}

@@ -1,8 +1,8 @@
 import { n as __exportAll } from "./chunk-BoAXSpZd.js";
 import { a as SORT_OPTIONS, c as formatExperimentDate, f as BaseModal_default, l as formatExperimentStatus, r as EXPERIMENT_STATUS_OPTIONS, t as DATE_PRESET_OPTIONS, u as getExperimentStatusVariant } from "./experiment-utils-DV3DrvE_.js";
-import { a as BaseSelect_default, i as BasePill_default, n as Skeleton_default, s as BaseInput_default, t as EmptyState_default } from "./EmptyState-NBqf2_8z.js";
-import { t as useExperimentStore } from "./experiment-Y9Iz7KYi.js";
-import { t as useExperimentSelector } from "./useExperimentSelector-DSEckf_g.js";
+import { a as BaseSelect_default, i as BasePill_default, r as EmptyState_default, s as BaseInput_default, t as Skeleton_default } from "./Skeleton-DxtwJ5gt.js";
+import { t as useExperimentStore } from "./experiment-Cwl9AYxw.js";
+import { t as useExperimentSelector } from "./useExperimentSelector-I8HC8hUu.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, reactive, ref, renderList, toDisplayString, unref, vModelCheckbox, watch, withCtx, withDirectives } from "vue";
 //#region src/components/ExperimentCodeBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = [
@@ -504,4 +504,4 @@ var ExperimentSelectorModal_default = ExperimentSelectorModal_vue_vue_type_scrip
 //#endregion
 export { ExperimentSelectorModal_exports as n, ExperimentCodeBadge_default as r, ExperimentSelectorModal_default as t };
 
-//# sourceMappingURL=ExperimentSelectorModal-DvIagrxY.js.map
+//# sourceMappingURL=ExperimentSelectorModal-BeEOomw_.js.map

package/dist/ExperimentSelectorModal-BeEOomw_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperimentSelectorModal-BeEOomw_.js","names":[],"sources":["../src/components/ExperimentCodeBadge.vue","../src/components/ExperimentCodeBadge.vue","../src/components/ExperimentSelectorModal.vue","../src/components/ExperimentSelectorModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** Inline badge that displays an experiment code and copies it to the clipboard on click. */\nimport { ref } from 'vue'\n\ninterface Props {\n  code: string\n  size?: 'sm' | 'md' | 'lg'\n  copyable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  copyable: true,\n})\n\nconst emit = defineEmits<{\n  copy: [code: string]\n}>()\n\nconst copied = ref(false)\nlet copyTimeout: ReturnType<typeof setTimeout> | null = null\n\nasync function handleCopy() {\n  if (!props.copyable) return\n  try {\n    await navigator.clipboard.writeText(props.code)\n    copied.value = true\n    emit('copy', props.code)\n    if (copyTimeout) clearTimeout(copyTimeout)\n    copyTimeout = setTimeout(() => { copied.value = false }, 1500)\n  } catch {\n    // Clipboard API not available (e.g. insecure context)\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (!props.copyable) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    handleCopy()\n  }\n}\n</script>\n\n<template>\n  <span\n    :class=\"[\n      'mint-exp-code',\n      `mint-exp-code--${size}`,\n      { 'mint-exp-code--copyable': copyable, 'mint-exp-code--copied': copied },\n    ]\"\n    :role=\"copyable ? 'button' : undefined\"\n    :tabindex=\"copyable ? 0 : undefined\"\n    :title=\"copyable ? (copied ? 'Copied!' : 'Click to copy') : undefined\"\n    @click=\"handleCopy\"\n    @keydown=\"handleKeydown\"\n  >\n    {{ copied ? 'Copied!' : code }}\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/** Inline badge that displays an experiment code and copies it to the clipboard on click. */\nimport { ref } from 'vue'\n\ninterface Props {\n  code: string\n  size?: 'sm' | 'md' | 'lg'\n  copyable?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  copyable: true,\n})\n\nconst emit = defineEmits<{\n  copy: [code: string]\n}>()\n\nconst copied = ref(false)\nlet copyTimeout: ReturnType<typeof setTimeout> | null = null\n\nasync function handleCopy() {\n  if (!props.copyable) return\n  try {\n    await navigator.clipboard.writeText(props.code)\n    copied.value = true\n    emit('copy', props.code)\n    if (copyTimeout) clearTimeout(copyTimeout)\n    copyTimeout = setTimeout(() => { copied.value = false }, 1500)\n  } catch {\n    // Clipboard API not available (e.g. insecure context)\n  }\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (!props.copyable) return\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault()\n    handleCopy()\n  }\n}\n</script>\n\n<template>\n  <span\n    :class=\"[\n      'mint-exp-code',\n      `mint-exp-code--${size}`,\n      { 'mint-exp-code--copyable': copyable, 'mint-exp-code--copied': copied },\n    ]\"\n    :role=\"copyable ? 'button' : undefined\"\n    :tabindex=\"copyable ? 0 : undefined\"\n    :title=\"copyable ? (copied ? 'Copied!' : 'Click to copy') : undefined\"\n    @click=\"handleCopy\"\n    @keydown=\"handleKeydown\"\n  >\n    {{ copied ? 'Copied!' : code }}\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Modal for searching and selecting an experiment from the platform list with filters and keyboard nav.\n *\n * @example Recommended\n * ```vue\n * <ExperimentSelectorModal v-model=\"open\" :allowed-experiment-types=\"['mass-spectrometry']\" />\n * ```\n */\nimport { ref, reactive, computed, watch, nextTick } from 'vue'\nimport type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'\nimport { useExperimentSelector } from '../composables/useExperimentSelector'\nimport { useExperimentStore } from '../stores/experiment'\nimport {\n  formatExperimentDate,\n  formatExperimentStatus,\n  getExperimentStatusVariant,\n  EXPERIMENT_STATUS_OPTIONS,\n  DATE_PRESET_OPTIONS,\n  SORT_OPTIONS,\n} from '../composables/experiment-utils'\nimport BaseModal from './BaseModal.vue'\nimport BaseInput from './BaseInput.vue'\nimport BaseSelect from './BaseSelect.vue'\nimport BasePill from './BasePill.vue'\nimport Skeleton from './Skeleton.vue'\nimport EmptyState from './EmptyState.vue'\nimport ExperimentCodeBadge from './ExperimentCodeBadge.vue'\n\ninterface Props {\n  modelValue: boolean\n  experimentType?: string\n  allowedExperimentTypes?: string[] | null\n  currentExperimentId?: number | null\n  title?: string\n  size?: ModalSize\n  groupByProject?: boolean\n  showFilters?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  currentExperimentId: null,\n  title: 'Select Experiment',\n  size: 'full',\n  groupByProject: false,\n  showFilters: false,\n})\n\n// Selection is committed to the shared experiment store rather than emitted.\n// A single owner of \"the current experiment\" is what stops callers holding —\n// or inventing — a record of their own.\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst experimentStore = useExperimentStore()\n\nconst {\n  experiments,\n  filters,\n  isLoading,\n  error,\n  sortKey,\n  experimentTypes,\n  projects,\n  groupedByProject,\n  fetch: fetchExperiments,\n  fetchFilterOptions,\n} = useExperimentSelector({\n  experimentType: props.experimentType,\n  allowedExperimentTypes: props.allowedExperimentTypes,\n})\n\nconst activeIndex = ref(-1)\nconst listRef = ref<HTMLElement | null>(null)\nconst showAdvanced = ref(props.showFilters)\nconst groupToggle = ref(props.groupByProject)\n\n// Track whether any advanced filter is active (for badge dot)\nconst hasActiveAdvancedFilters = computed(() =>\n  !!(filters.project || filters.experimentType || filters.datePreset || sortKey.value !== 'created_at:desc'),\n)\n\n// Build type filter options from fetched experiment types\nconst typeFilterOptions = computed(() => [\n  { value: '', label: 'All types' },\n  ...experimentTypes.value.map(t => ({ value: t.value, label: t.label })),\n])\nconst canChooseExperimentType = computed(() =>\n  !props.experimentType && typeFilterOptions.value.length > 2,\n)\n\n// Build project filter options from fetched projects\nconst projectFilterOptions = computed(() => [\n  { value: '', label: 'All projects' },\n  ...projects.value,\n])\n\n// Flat list of experiments for keyboard navigation (works across groups too)\nconst flatExperiments = computed(() => {\n  if (!groupToggle.value) return experiments.value\n  return groupedByProject.value.flatMap(([, exps]) => exps)\n})\n\n// Stable ids so the search field (role=\"combobox\") can expose the currently\n// arrow-highlighted row to assistive tech via aria-activedescendant. This\n// surfaces the existing keyboard model to screen readers without changing it.\nconst LISTBOX_ID = 'mint-experiment-selector-listbox'\nfunction optionId(experiment: ExperimentSummary): string {\n  return `mint-experiment-option-${experiment.id}`\n}\nconst activeDescendantId = computed(() => {\n  const exp = flatExperiments.value[activeIndex.value]\n  return activeIndex.value >= 0 && exp ? optionId(exp) : undefined\n})\nconst hasResults = computed(() => !isLoading.value && !error.value && experiments.value.length > 0)\n\nfunction setFilter<K extends keyof ExperimentFilters>(key: K, value: string | number) {\n  ;(filters as Record<string, unknown>)[key] = String(value) || undefined\n}\n\nfunction handleSortChange(value: string | number) {\n  sortKey.value = String(value) || 'created_at:desc'\n}\n\nfunction handleSelect(experiment: ExperimentSummary) {\n  experimentStore.select(experiment)\n  emit('update:modelValue', false)\n}\n\nfunction handleDeselect() {\n  experimentStore.clear()\n  emit('update:modelValue', false)\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  const list = flatExperiments.value\n  if (!list.length) return\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      activeIndex.value = Math.min(activeIndex.value + 1, list.length - 1)\n      scrollActiveIntoView()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      activeIndex.value = Math.max(activeIndex.value - 1, 0)\n      scrollActiveIntoView()\n      break\n    case 'Enter':\n      event.preventDefault()\n      if (activeIndex.value >= 0 && activeIndex.value < list.length) {\n        handleSelect(list[activeIndex.value])\n      }\n      break\n  }\n}\n\nfunction scrollActiveIntoView() {\n  nextTick(() => {\n    const row = listRef.value?.querySelector('.mint-experiment-selector__row--focused')\n    row?.scrollIntoView({ block: 'nearest' })\n  })\n}\n\n// Precomputed id → flat index for O(1) lookup in grouped mode\nconst flatIndexMap = computed(() => {\n  const map = new Map<number, number>()\n  flatExperiments.value.forEach((exp, i) => map.set(exp.id, i))\n  return map\n})\n\nfunction getFlatIndex(experiment: ExperimentSummary): number {\n  return flatIndexMap.value.get(experiment.id) ?? -1\n}\n\n// Track collapsed groups (reactive Set tracks .add/.delete/.has automatically)\nconst collapsedGroups = reactive(new Set<string>())\n\nfunction toggleGroup(groupName: string) {\n  if (collapsedGroups.has(groupName)) {\n    collapsedGroups.delete(groupName)\n  } else {\n    collapsedGroups.add(groupName)\n  }\n}\n\n// Reset active index when experiments change\nwatch(experiments, () => { activeIndex.value = -1 })\n\n// Fetch on open\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      activeIndex.value = -1\n      collapsedGroups.clear()\n      fetchFilterOptions()\n      fetchExperiments()\n    }\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :size=\"size\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <div class=\"mint-experiment-selector\" @keydown=\"handleKeydown\">\n      <!-- Filter bar row 1 -->\n      <div class=\"mint-experiment-selector__filters-row\">\n        <div class=\"mint-experiment-selector__search\">\n          <BaseInput\n            v-model=\"filters.search\"\n            placeholder=\"Search experiments...\"\n            size=\"sm\"\n            type=\"search\"\n            role=\"combobox\"\n            aria-label=\"Search experiments\"\n            :aria-expanded=\"hasResults\"\n            :aria-controls=\"LISTBOX_ID\"\n            :aria-activedescendant=\"activeDescendantId\"\n          />\n        </div>\n        <div class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.status ?? ''\"\n            :options=\"EXPERIMENT_STATUS_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('status', v)\"\n          />\n        </div>\n        <div v-if=\"canChooseExperimentType\" class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.experimentType ?? ''\"\n            :options=\"typeFilterOptions\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('experimentType', v)\"\n          />\n        </div>\n        <button\n          class=\"mint-experiment-selector__filters-toggle\"\n          :class=\"{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }\"\n          type=\"button\"\n          :aria-expanded=\"showAdvanced\"\n          @click=\"showAdvanced = !showAdvanced\"\n        >\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\" /><line x1=\"8\" y1=\"12\" x2=\"20\" y2=\"12\" /><line x1=\"12\" y1=\"18\" x2=\"20\" y2=\"18\" />\n            <circle cx=\"6\" cy=\"12\" r=\"2\" /><circle cx=\"10\" cy=\"18\" r=\"2\" /><circle cx=\"6\" cy=\"6\" r=\"2\" />\n          </svg>\n          Filters\n          <span v-if=\"hasActiveAdvancedFilters\" class=\"mint-experiment-selector__filters-dot\" />\n        </button>\n      </div>\n\n      <!-- Filter bar row 2 (advanced, collapsible) -->\n      <div v-if=\"showAdvanced\" class=\"mint-experiment-selector__filters-advanced\">\n        <div v-if=\"projectFilterOptions.length > 1\" class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.project ?? ''\"\n            :options=\"projectFilterOptions\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('project', v)\"\n          />\n        </div>\n        <div class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.datePreset ?? ''\"\n            :options=\"DATE_PRESET_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('datePreset', v)\"\n          />\n        </div>\n        <div class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"sortKey\"\n            :options=\"SORT_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"handleSortChange\"\n          />\n        </div>\n        <label class=\"mint-experiment-selector__group-toggle\">\n          <input\n            v-model=\"groupToggle\"\n            type=\"checkbox\"\n            class=\"mint-experiment-selector__group-checkbox\"\n          />\n          Group by project\n        </label>\n      </div>\n\n      <!-- Loading skeleton -->\n      <div v-if=\"isLoading\" class=\"mint-experiment-selector__skeleton\">\n        <div v-for=\"n in 4\" :key=\"n\" class=\"mint-experiment-selector__skeleton-row\">\n          <div class=\"mint-experiment-selector__skeleton-content\">\n            <Skeleton :width=\"120 + n * 20\" height=\"14px\" />\n            <Skeleton width=\"80px\" height=\"10px\" />\n          </div>\n          <Skeleton width=\"60px\" height=\"20px\" variant=\"rounded\" />\n        </div>\n      </div>\n\n      <!-- Error -->\n      <div v-else-if=\"error\" class=\"mint-experiment-selector__error\">\n        {{ error }}\n      </div>\n\n      <!-- Empty -->\n      <EmptyState\n        v-else-if=\"experiments.length === 0\"\n        title=\"No experiments found\"\n        description=\"Try adjusting your search or filters.\"\n        size=\"sm\"\n      />\n\n      <!-- Experiment list: grouped mode -->\n      <div v-else-if=\"groupToggle\" :id=\"LISTBOX_ID\" ref=\"listRef\" class=\"mint-experiment-selector__list\" role=\"listbox\" aria-label=\"Experiments\">\n        <template v-for=\"([groupName, groupExps]) in groupedByProject\" :key=\"groupName\">\n          <button\n            type=\"button\"\n            class=\"mint-experiment-selector__group-header\"\n            :aria-expanded=\"!collapsedGroups.has(groupName)\"\n            @click=\"toggleGroup(groupName)\"\n          >\n            <svg\n              class=\"mint-experiment-selector__group-chevron\"\n              :class=\"{ 'mint-experiment-selector__group-chevron--collapsed': collapsedGroups.has(groupName) }\"\n              aria-hidden=\"true\"\n              width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            >\n              <polyline points=\"6 9 12 15 18 9\" />\n            </svg>\n            <span class=\"mint-experiment-selector__group-name\">{{ groupName }}</span>\n            <span class=\"mint-experiment-selector__group-count\">{{ groupExps.length }}</span>\n          </button>\n          <template v-if=\"!collapsedGroups.has(groupName)\">\n            <div\n              v-for=\"exp in groupExps\"\n              :id=\"optionId(exp)\"\n              :key=\"exp.id\"\n              class=\"mint-experiment-selector__row\"\n              role=\"option\"\n              :aria-selected=\"exp.id === currentExperimentId\"\n              :class=\"{\n                'mint-experiment-selector__row--active': exp.id === currentExperimentId,\n                'mint-experiment-selector__row--focused': getFlatIndex(exp) === activeIndex,\n              }\"\n              @click=\"handleSelect(exp)\"\n              @mouseenter=\"activeIndex = getFlatIndex(exp)\"\n            >\n              <div class=\"mint-experiment-selector__row-content\">\n                <div class=\"mint-experiment-selector__name\">\n                  {{ exp.name }}\n                  <ExperimentCodeBadge\n                    v-if=\"exp.experiment_code\"\n                    :code=\"exp.experiment_code\"\n                    size=\"sm\"\n                    :copyable=\"false\"\n                  />\n                </div>\n                <div class=\"mint-experiment-selector__meta\">\n                  <span>{{ formatExperimentDate(exp.created_at) }}</span>\n                </div>\n              </div>\n              <BasePill :variant=\"getExperimentStatusVariant(exp.status)\" size=\"sm\">\n                {{ formatExperimentStatus(exp.status) }}\n              </BasePill>\n            </div>\n          </template>\n        </template>\n      </div>\n\n      <!-- Experiment list: flat mode -->\n      <div v-else :id=\"LISTBOX_ID\" ref=\"listRef\" class=\"mint-experiment-selector__list\" role=\"listbox\" aria-label=\"Experiments\">\n        <div\n          v-for=\"(exp, idx) in experiments\"\n          :id=\"optionId(exp)\"\n          :key=\"exp.id\"\n          class=\"mint-experiment-selector__row\"\n          role=\"option\"\n          :aria-selected=\"exp.id === currentExperimentId\"\n          :class=\"{\n            'mint-experiment-selector__row--active': exp.id === currentExperimentId,\n            'mint-experiment-selector__row--focused': idx === activeIndex,\n          }\"\n          @click=\"handleSelect(exp)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <div class=\"mint-experiment-selector__row-content\">\n            <div class=\"mint-experiment-selector__name\">\n              {{ exp.name }}\n              <ExperimentCodeBadge\n                v-if=\"exp.experiment_code\"\n                :code=\"exp.experiment_code\"\n                size=\"sm\"\n                :copyable=\"false\"\n              />\n            </div>\n            <div class=\"mint-experiment-selector__meta\">\n              <span v-if=\"exp.project_name || exp.project\">{{ exp.project_name || exp.project }}</span>\n              <span>{{ formatExperimentDate(exp.created_at) }}</span>\n            </div>\n          </div>\n          <BasePill :variant=\"getExperimentStatusVariant(exp.status)\" size=\"sm\">\n            {{ formatExperimentStatus(exp.status) }}\n          </BasePill>\n        </div>\n      </div>\n\n      <!-- Footer: clear selection -->\n      <div v-if=\"currentExperimentId != null\" class=\"mint-experiment-selector__footer\">\n        <button\n          type=\"button\"\n          class=\"mint-experiment-selector__clear-btn\"\n          @click=\"handleDeselect\"\n        >\n          Clear selection\n        </button>\n      </div>\n    </div>\n  </BaseModal>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Modal for searching and selecting an experiment from the platform list with filters and keyboard nav.\n *\n * @example Recommended\n * ```vue\n * <ExperimentSelectorModal v-model=\"open\" :allowed-experiment-types=\"['mass-spectrometry']\" />\n * ```\n */\nimport { ref, reactive, computed, watch, nextTick } from 'vue'\nimport type { ModalSize, ExperimentSummary, ExperimentFilters } from '../types'\nimport { useExperimentSelector } from '../composables/useExperimentSelector'\nimport { useExperimentStore } from '../stores/experiment'\nimport {\n  formatExperimentDate,\n  formatExperimentStatus,\n  getExperimentStatusVariant,\n  EXPERIMENT_STATUS_OPTIONS,\n  DATE_PRESET_OPTIONS,\n  SORT_OPTIONS,\n} from '../composables/experiment-utils'\nimport BaseModal from './BaseModal.vue'\nimport BaseInput from './BaseInput.vue'\nimport BaseSelect from './BaseSelect.vue'\nimport BasePill from './BasePill.vue'\nimport Skeleton from './Skeleton.vue'\nimport EmptyState from './EmptyState.vue'\nimport ExperimentCodeBadge from './ExperimentCodeBadge.vue'\n\ninterface Props {\n  modelValue: boolean\n  experimentType?: string\n  allowedExperimentTypes?: string[] | null\n  currentExperimentId?: number | null\n  title?: string\n  size?: ModalSize\n  groupByProject?: boolean\n  showFilters?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  currentExperimentId: null,\n  title: 'Select Experiment',\n  size: 'full',\n  groupByProject: false,\n  showFilters: false,\n})\n\n// Selection is committed to the shared experiment store rather than emitted.\n// A single owner of \"the current experiment\" is what stops callers holding —\n// or inventing — a record of their own.\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n}>()\n\nconst experimentStore = useExperimentStore()\n\nconst {\n  experiments,\n  filters,\n  isLoading,\n  error,\n  sortKey,\n  experimentTypes,\n  projects,\n  groupedByProject,\n  fetch: fetchExperiments,\n  fetchFilterOptions,\n} = useExperimentSelector({\n  experimentType: props.experimentType,\n  allowedExperimentTypes: props.allowedExperimentTypes,\n})\n\nconst activeIndex = ref(-1)\nconst listRef = ref<HTMLElement | null>(null)\nconst showAdvanced = ref(props.showFilters)\nconst groupToggle = ref(props.groupByProject)\n\n// Track whether any advanced filter is active (for badge dot)\nconst hasActiveAdvancedFilters = computed(() =>\n  !!(filters.project || filters.experimentType || filters.datePreset || sortKey.value !== 'created_at:desc'),\n)\n\n// Build type filter options from fetched experiment types\nconst typeFilterOptions = computed(() => [\n  { value: '', label: 'All types' },\n  ...experimentTypes.value.map(t => ({ value: t.value, label: t.label })),\n])\nconst canChooseExperimentType = computed(() =>\n  !props.experimentType && typeFilterOptions.value.length > 2,\n)\n\n// Build project filter options from fetched projects\nconst projectFilterOptions = computed(() => [\n  { value: '', label: 'All projects' },\n  ...projects.value,\n])\n\n// Flat list of experiments for keyboard navigation (works across groups too)\nconst flatExperiments = computed(() => {\n  if (!groupToggle.value) return experiments.value\n  return groupedByProject.value.flatMap(([, exps]) => exps)\n})\n\n// Stable ids so the search field (role=\"combobox\") can expose the currently\n// arrow-highlighted row to assistive tech via aria-activedescendant. This\n// surfaces the existing keyboard model to screen readers without changing it.\nconst LISTBOX_ID = 'mint-experiment-selector-listbox'\nfunction optionId(experiment: ExperimentSummary): string {\n  return `mint-experiment-option-${experiment.id}`\n}\nconst activeDescendantId = computed(() => {\n  const exp = flatExperiments.value[activeIndex.value]\n  return activeIndex.value >= 0 && exp ? optionId(exp) : undefined\n})\nconst hasResults = computed(() => !isLoading.value && !error.value && experiments.value.length > 0)\n\nfunction setFilter<K extends keyof ExperimentFilters>(key: K, value: string | number) {\n  ;(filters as Record<string, unknown>)[key] = String(value) || undefined\n}\n\nfunction handleSortChange(value: string | number) {\n  sortKey.value = String(value) || 'created_at:desc'\n}\n\nfunction handleSelect(experiment: ExperimentSummary) {\n  experimentStore.select(experiment)\n  emit('update:modelValue', false)\n}\n\nfunction handleDeselect() {\n  experimentStore.clear()\n  emit('update:modelValue', false)\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  const list = flatExperiments.value\n  if (!list.length) return\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      activeIndex.value = Math.min(activeIndex.value + 1, list.length - 1)\n      scrollActiveIntoView()\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      activeIndex.value = Math.max(activeIndex.value - 1, 0)\n      scrollActiveIntoView()\n      break\n    case 'Enter':\n      event.preventDefault()\n      if (activeIndex.value >= 0 && activeIndex.value < list.length) {\n        handleSelect(list[activeIndex.value])\n      }\n      break\n  }\n}\n\nfunction scrollActiveIntoView() {\n  nextTick(() => {\n    const row = listRef.value?.querySelector('.mint-experiment-selector__row--focused')\n    row?.scrollIntoView({ block: 'nearest' })\n  })\n}\n\n// Precomputed id → flat index for O(1) lookup in grouped mode\nconst flatIndexMap = computed(() => {\n  const map = new Map<number, number>()\n  flatExperiments.value.forEach((exp, i) => map.set(exp.id, i))\n  return map\n})\n\nfunction getFlatIndex(experiment: ExperimentSummary): number {\n  return flatIndexMap.value.get(experiment.id) ?? -1\n}\n\n// Track collapsed groups (reactive Set tracks .add/.delete/.has automatically)\nconst collapsedGroups = reactive(new Set<string>())\n\nfunction toggleGroup(groupName: string) {\n  if (collapsedGroups.has(groupName)) {\n    collapsedGroups.delete(groupName)\n  } else {\n    collapsedGroups.add(groupName)\n  }\n}\n\n// Reset active index when experiments change\nwatch(experiments, () => { activeIndex.value = -1 })\n\n// Fetch on open\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (isOpen) {\n      activeIndex.value = -1\n      collapsedGroups.clear()\n      fetchFilterOptions()\n      fetchExperiments()\n    }\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :size=\"size\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <div class=\"mint-experiment-selector\" @keydown=\"handleKeydown\">\n      <!-- Filter bar row 1 -->\n      <div class=\"mint-experiment-selector__filters-row\">\n        <div class=\"mint-experiment-selector__search\">\n          <BaseInput\n            v-model=\"filters.search\"\n            placeholder=\"Search experiments...\"\n            size=\"sm\"\n            type=\"search\"\n            role=\"combobox\"\n            aria-label=\"Search experiments\"\n            :aria-expanded=\"hasResults\"\n            :aria-controls=\"LISTBOX_ID\"\n            :aria-activedescendant=\"activeDescendantId\"\n          />\n        </div>\n        <div class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.status ?? ''\"\n            :options=\"EXPERIMENT_STATUS_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('status', v)\"\n          />\n        </div>\n        <div v-if=\"canChooseExperimentType\" class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.experimentType ?? ''\"\n            :options=\"typeFilterOptions\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('experimentType', v)\"\n          />\n        </div>\n        <button\n          class=\"mint-experiment-selector__filters-toggle\"\n          :class=\"{ 'mint-experiment-selector__filters-toggle--active': hasActiveAdvancedFilters }\"\n          type=\"button\"\n          :aria-expanded=\"showAdvanced\"\n          @click=\"showAdvanced = !showAdvanced\"\n        >\n          <svg aria-hidden=\"true\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\" /><line x1=\"8\" y1=\"12\" x2=\"20\" y2=\"12\" /><line x1=\"12\" y1=\"18\" x2=\"20\" y2=\"18\" />\n            <circle cx=\"6\" cy=\"12\" r=\"2\" /><circle cx=\"10\" cy=\"18\" r=\"2\" /><circle cx=\"6\" cy=\"6\" r=\"2\" />\n          </svg>\n          Filters\n          <span v-if=\"hasActiveAdvancedFilters\" class=\"mint-experiment-selector__filters-dot\" />\n        </button>\n      </div>\n\n      <!-- Filter bar row 2 (advanced, collapsible) -->\n      <div v-if=\"showAdvanced\" class=\"mint-experiment-selector__filters-advanced\">\n        <div v-if=\"projectFilterOptions.length > 1\" class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.project ?? ''\"\n            :options=\"projectFilterOptions\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('project', v)\"\n          />\n        </div>\n        <div class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"filters.datePreset ?? ''\"\n            :options=\"DATE_PRESET_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"v => setFilter('datePreset', v)\"\n          />\n        </div>\n        <div class=\"mint-experiment-selector__filter-select\">\n          <BaseSelect\n            :model-value=\"sortKey\"\n            :options=\"SORT_OPTIONS\"\n            size=\"sm\"\n            @update:model-value=\"handleSortChange\"\n          />\n        </div>\n        <label class=\"mint-experiment-selector__group-toggle\">\n          <input\n            v-model=\"groupToggle\"\n            type=\"checkbox\"\n            class=\"mint-experiment-selector__group-checkbox\"\n          />\n          Group by project\n        </label>\n      </div>\n\n      <!-- Loading skeleton -->\n      <div v-if=\"isLoading\" class=\"mint-experiment-selector__skeleton\">\n        <div v-for=\"n in 4\" :key=\"n\" class=\"mint-experiment-selector__skeleton-row\">\n          <div class=\"mint-experiment-selector__skeleton-content\">\n            <Skeleton :width=\"120 + n * 20\" height=\"14px\" />\n            <Skeleton width=\"80px\" height=\"10px\" />\n          </div>\n          <Skeleton width=\"60px\" height=\"20px\" variant=\"rounded\" />\n        </div>\n      </div>\n\n      <!-- Error -->\n      <div v-else-if=\"error\" class=\"mint-experiment-selector__error\">\n        {{ error }}\n      </div>\n\n      <!-- Empty -->\n      <EmptyState\n        v-else-if=\"experiments.length === 0\"\n        title=\"No experiments found\"\n        description=\"Try adjusting your search or filters.\"\n        size=\"sm\"\n      />\n\n      <!-- Experiment list: grouped mode -->\n      <div v-else-if=\"groupToggle\" :id=\"LISTBOX_ID\" ref=\"listRef\" class=\"mint-experiment-selector__list\" role=\"listbox\" aria-label=\"Experiments\">\n        <template v-for=\"([groupName, groupExps]) in groupedByProject\" :key=\"groupName\">\n          <button\n            type=\"button\"\n            class=\"mint-experiment-selector__group-header\"\n            :aria-expanded=\"!collapsedGroups.has(groupName)\"\n            @click=\"toggleGroup(groupName)\"\n          >\n            <svg\n              class=\"mint-experiment-selector__group-chevron\"\n              :class=\"{ 'mint-experiment-selector__group-chevron--collapsed': collapsedGroups.has(groupName) }\"\n              aria-hidden=\"true\"\n              width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            >\n              <polyline points=\"6 9 12 15 18 9\" />\n            </svg>\n            <span class=\"mint-experiment-selector__group-name\">{{ groupName }}</span>\n            <span class=\"mint-experiment-selector__group-count\">{{ groupExps.length }}</span>\n          </button>\n          <template v-if=\"!collapsedGroups.has(groupName)\">\n            <div\n              v-for=\"exp in groupExps\"\n              :id=\"optionId(exp)\"\n              :key=\"exp.id\"\n              class=\"mint-experiment-selector__row\"\n              role=\"option\"\n              :aria-selected=\"exp.id === currentExperimentId\"\n              :class=\"{\n                'mint-experiment-selector__row--active': exp.id === currentExperimentId,\n                'mint-experiment-selector__row--focused': getFlatIndex(exp) === activeIndex,\n              }\"\n              @click=\"handleSelect(exp)\"\n              @mouseenter=\"activeIndex = getFlatIndex(exp)\"\n            >\n              <div class=\"mint-experiment-selector__row-content\">\n                <div class=\"mint-experiment-selector__name\">\n                  {{ exp.name }}\n                  <ExperimentCodeBadge\n                    v-if=\"exp.experiment_code\"\n                    :code=\"exp.experiment_code\"\n                    size=\"sm\"\n                    :copyable=\"false\"\n                  />\n                </div>\n                <div class=\"mint-experiment-selector__meta\">\n                  <span>{{ formatExperimentDate(exp.created_at) }}</span>\n                </div>\n              </div>\n              <BasePill :variant=\"getExperimentStatusVariant(exp.status)\" size=\"sm\">\n                {{ formatExperimentStatus(exp.status) }}\n              </BasePill>\n            </div>\n          </template>\n        </template>\n      </div>\n\n      <!-- Experiment list: flat mode -->\n      <div v-else :id=\"LISTBOX_ID\" ref=\"listRef\" class=\"mint-experiment-selector__list\" role=\"listbox\" aria-label=\"Experiments\">\n        <div\n          v-for=\"(exp, idx) in experiments\"\n          :id=\"optionId(exp)\"\n          :key=\"exp.id\"\n          class=\"mint-experiment-selector__row\"\n          role=\"option\"\n          :aria-selected=\"exp.id === currentExperimentId\"\n          :class=\"{\n            'mint-experiment-selector__row--active': exp.id === currentExperimentId,\n            'mint-experiment-selector__row--focused': idx === activeIndex,\n          }\"\n          @click=\"handleSelect(exp)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <div class=\"mint-experiment-selector__row-content\">\n            <div class=\"mint-experiment-selector__name\">\n              {{ exp.name }}\n              <ExperimentCodeBadge\n                v-if=\"exp.experiment_code\"\n                :code=\"exp.experiment_code\"\n                size=\"sm\"\n                :copyable=\"false\"\n              />\n            </div>\n            <div class=\"mint-experiment-selector__meta\">\n              <span v-if=\"exp.project_name || exp.project\">{{ exp.project_name || exp.project }}</span>\n              <span>{{ formatExperimentDate(exp.created_at) }}</span>\n            </div>\n          </div>\n          <BasePill :variant=\"getExperimentStatusVariant(exp.status)\" size=\"sm\">\n            {{ formatExperimentStatus(exp.status) }}\n          </BasePill>\n        </div>\n      </div>\n\n      <!-- Footer: clear selection -->\n      <div v-if=\"currentExperimentId != null\" class=\"mint-experiment-selector__footer\">\n        <button\n          type=\"button\"\n          class=\"mint-experiment-selector__clear-btn\"\n          @click=\"handleDeselect\"\n        >\n          Clear selection\n        </button>\n      </div>\n    </div>\n  </BaseModal>\n</template>\n"],"mappings":"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"}

package/dist/{SettingsModal-W3TYfnP9.js → SettingsModal-Dphh3RrI.js}

@@ -1,8 +1,8 @@
 import { n as __exportAll } from "./chunk-BoAXSpZd.js";
 import { f as BaseModal_default } from "./experiment-utils-DV3DrvE_.js";
-import { E as getFieldRegistryEntry, b as controlsToSettingsSchema, f as resolveControlModel, g as mergeControlWorkspaceOptions, rt as isRecord } from "./useControlSchema-_OVhavKq.js";
-import { a as colorPalettes, i as useAuthStore, o as useSettingsStore } from "./useApi-CDBq6z23.js";
-import { i as usePlatformContext, t as useFormBuilder } from "./useFormBuilder-Bd714C7y.js";
+import { E as getFieldRegistryEntry, b as controlsToSettingsSchema, f as resolveControlModel, g as mergeControlWorkspaceOptions, rt as isRecord } from "./useControlSchema-aMZlb4Sc.js";
+import { a as useAuthStore, d as useSettingsStore, s as colorPalettes } from "./errors-_W0-LbA6.js";
+import { i as usePlatformContext, t as useFormBuilder } from "./useFormBuilder-TCxNnqeb.js";
 import { canAccessByPolicy } from "./permissions.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, vShow, watch, withCtx, withDirectives } from "vue";
 //#region src/utils/items.ts
@@ -466,4 +466,4 @@ var SettingsModal_default = SettingsModal_vue_vue_type_script_setup_true_lang_de
 //#endregion
 export { pickExistingRecordKeys as a, normalizeItemInput as c, formSchemaFieldNames as i, normalizeLabelItemInput as l, SettingsModal_exports as n, recordValuesEqualForKeys as o, FormFieldRendererInternal_default as r, FormField_default as s, SettingsModal_default as t };
 
-//# sourceMappingURL=SettingsModal-W3TYfnP9.js.map
+//# sourceMappingURL=SettingsModal-Dphh3RrI.js.map

package/dist/SettingsModal-Dphh3RrI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsModal-Dphh3RrI.js","names":["$slots"],"sources":["../src/utils/items.ts","../src/components/FormField.vue","../src/components/FormField.vue","../src/utils/formModelSync.ts","../src/components/internal/FormFieldRendererInternal.vue","../src/components/internal/FormFieldRendererInternal.vue","../src/components/SettingsModal.schema.ts","../src/components/SettingsModal.vue","../src/components/SettingsModal.vue"],"sourcesContent":["export type ItemWithLabel = {\n  label: string\n}\n\nexport type ItemWithId = ItemWithLabel & {\n  id: string\n}\n\nexport function normalizeItemInput<TItem extends ItemWithId>(\n  item: TItem | string,\n): TItem {\n  if (typeof item === 'object') return item\n\n  return {\n    id: item,\n    label: item,\n  } as TItem\n}\n\nexport function normalizeLabelItemInput<TItem extends ItemWithLabel>(\n  item: TItem | string,\n): TItem {\n  if (typeof item === 'object') return item\n\n  return {\n    label: item,\n  } as TItem\n}\n","<script setup lang=\"ts\">\n/** Wraps a form control with a label, optional hint text, and validation error display. */\nimport { computed } from 'vue'\n\ninterface Props {\n  label?: string\n  error?: string\n  hint?: string\n  required?: boolean\n  showOptional?: boolean\n  htmlFor?: string\n  fieldId?: string\n}\n\nconst props = defineProps<Props>()\n\nconst errorId = computed(() =>\n  props.error && props.fieldId ? `${props.fieldId}-error` : undefined\n)\n\nconst hintId = computed(() =>\n  !props.error && props.hint && props.fieldId ? `${props.fieldId}-hint` : undefined\n)\n\nconst describedBy = computed(() => errorId.value ?? hintId.value)\n</script>\n\n<template>\n  <div class=\"mint-form-field\">\n    <div v-if=\"label\" class=\"mint-form-field__label-row\">\n      <label\n        :for=\"htmlFor\"\n        class=\"mint-form-field__label\"\n      >\n        {{ label }}\n        <span v-if=\"required\" class=\"mint-form-field__required\" aria-hidden=\"true\">*</span>\n      </label>\n      <span\n        v-if=\"!required && showOptional\"\n        class=\"mint-form-field__optional\"\n      >\n        optional\n      </span>\n    </div>\n\n    <slot :described-by=\"describedBy\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"mint-form-field__error\" role=\"alert\">\n      {{ error }}\n    </p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"mint-form-field__hint\">\n      {{ hint }}\n    </p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Wraps a form control with a label, optional hint text, and validation error display. */\nimport { computed } from 'vue'\n\ninterface Props {\n  label?: string\n  error?: string\n  hint?: string\n  required?: boolean\n  showOptional?: boolean\n  htmlFor?: string\n  fieldId?: string\n}\n\nconst props = defineProps<Props>()\n\nconst errorId = computed(() =>\n  props.error && props.fieldId ? `${props.fieldId}-error` : undefined\n)\n\nconst hintId = computed(() =>\n  !props.error && props.hint && props.fieldId ? `${props.fieldId}-hint` : undefined\n)\n\nconst describedBy = computed(() => errorId.value ?? hintId.value)\n</script>\n\n<template>\n  <div class=\"mint-form-field\">\n    <div v-if=\"label\" class=\"mint-form-field__label-row\">\n      <label\n        :for=\"htmlFor\"\n        class=\"mint-form-field__label\"\n      >\n        {{ label }}\n        <span v-if=\"required\" class=\"mint-form-field__required\" aria-hidden=\"true\">*</span>\n      </label>\n      <span\n        v-if=\"!required && showOptional\"\n        class=\"mint-form-field__optional\"\n      >\n        optional\n      </span>\n    </div>\n\n    <slot :described-by=\"describedBy\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"mint-form-field__error\" role=\"alert\">\n      {{ error }}\n    </p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"mint-form-field__hint\">\n      {{ hint }}\n    </p>\n  </div>\n</template>\n","import type { FormSchema } from '../types/form-builder'\nimport { isRecord } from './records'\n\nexport function recordValuesEqualForKeys(\n  left: Record<string, unknown>,\n  right: Record<string, unknown>,\n  keys: readonly string[],\n): boolean {\n  for (const key of keys) {\n    if (!valuesEqual(left[key], right[key])) return false\n  }\n  return true\n}\n\nexport function pickRecordKeys(\n  source: Record<string, unknown>,\n  keys: readonly string[],\n): Record<string, unknown> {\n  return Object.fromEntries(keys.map(key => [key, source[key]]))\n}\n\nexport function pickExistingRecordKeys(\n  source: Record<string, unknown>,\n  keys: readonly string[],\n): Record<string, unknown> {\n  return Object.fromEntries(\n    keys\n      .filter(key => Object.prototype.hasOwnProperty.call(source, key))\n      .map(key => [key, source[key]]),\n  )\n}\n\nexport function formSchemaFieldNames(schema: FormSchema): string[] {\n  const sections = schema.steps\n    ? schema.steps.flatMap(step => step.sections)\n    : schema.sections\n  return sections.flatMap(section => section.fields.map(field => field.name))\n}\n\nfunction valuesEqual(left: unknown, right: unknown): boolean {\n  if (Object.is(left, right)) return true\n  if (Array.isArray(left) && Array.isArray(right)) {\n    return left.length === right.length && left.every((item, index) => valuesEqual(item, right[index]))\n  }\n  if (isRecord(left) && isRecord(right)) {\n    return recordValuesEqualForKeys(left, right, [...new Set([...Object.keys(left), ...Object.keys(right)])])\n  }\n  return false\n}\n\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { FormFieldSchema } from '../../types/form-builder'\nimport type { UseFormReturn } from '../../composables/useForm'\nimport { getFieldRegistryEntry } from '../../composables/formBuilderRegistry'\nimport FormField from '../FormField.vue'\n\ninterface Props {\n  field: FormFieldSchema\n  resolvedProps: Record<string, unknown>\n  form: UseFormReturn<Record<string, unknown>>\n}\n\nconst props = defineProps<Props>()\n\nconst entry = computed(() => getFieldRegistryEntry(props.field.type))\n\nconst isChoiceField = computed(() =>\n  props.field.type === 'checkbox' || props.field.type === 'toggle',\n)\n\nconst componentProps = computed<Record<string, unknown>>(() => {\n  if (!isChoiceField.value) return props.resolvedProps\n\n  return {\n    variant: 'row',\n    label: props.field.label,\n    description: props.field.hint,\n    icon: props.field.icon,\n    iconColor: props.field.iconColor,\n    iconBg: props.field.iconBg,\n    ...props.resolvedProps,\n  }\n})\n\nconst errorMessage = computed(() => {\n  const name = props.field.name\n  return props.form.touched[name] ? props.form.errors[name] : null\n})\n\nfunction handleUpload(files: File[]) {\n  props.form.setFieldValue(props.field.name, files)\n}\n</script>\n\n<template>\n  <FormField\n    :label=\"isChoiceField ? undefined : field.label\"\n    :error=\"errorMessage ?? undefined\"\n    :hint=\"isChoiceField ? undefined : field.hint\"\n    :required=\"!!field.validation?.required\"\n    :html-for=\"isChoiceField ? undefined : field.name\"\n  >\n    <slot :name=\"`field:${field.name}`\" :field=\"field\" :form=\"form\" :field-props=\"form.getFieldProps(field.name)\">\n      <component\n        :is=\"entry.component\"\n        v-if=\"entry.vModel\"\n        v-bind=\"componentProps\"\n      />\n      <component\n        :is=\"entry.component\"\n        v-else\n        v-bind=\"componentProps\"\n        @upload=\"handleUpload\"\n      />\n    </slot>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { FormFieldSchema } from '../../types/form-builder'\nimport type { UseFormReturn } from '../../composables/useForm'\nimport { getFieldRegistryEntry } from '../../composables/formBuilderRegistry'\nimport FormField from '../FormField.vue'\n\ninterface Props {\n  field: FormFieldSchema\n  resolvedProps: Record<string, unknown>\n  form: UseFormReturn<Record<string, unknown>>\n}\n\nconst props = defineProps<Props>()\n\nconst entry = computed(() => getFieldRegistryEntry(props.field.type))\n\nconst isChoiceField = computed(() =>\n  props.field.type === 'checkbox' || props.field.type === 'toggle',\n)\n\nconst componentProps = computed<Record<string, unknown>>(() => {\n  if (!isChoiceField.value) return props.resolvedProps\n\n  return {\n    variant: 'row',\n    label: props.field.label,\n    description: props.field.hint,\n    icon: props.field.icon,\n    iconColor: props.field.iconColor,\n    iconBg: props.field.iconBg,\n    ...props.resolvedProps,\n  }\n})\n\nconst errorMessage = computed(() => {\n  const name = props.field.name\n  return props.form.touched[name] ? props.form.errors[name] : null\n})\n\nfunction handleUpload(files: File[]) {\n  props.form.setFieldValue(props.field.name, files)\n}\n</script>\n\n<template>\n  <FormField\n    :label=\"isChoiceField ? undefined : field.label\"\n    :error=\"errorMessage ?? undefined\"\n    :hint=\"isChoiceField ? undefined : field.hint\"\n    :required=\"!!field.validation?.required\"\n    :html-for=\"isChoiceField ? undefined : field.name\"\n  >\n    <slot :name=\"`field:${field.name}`\" :field=\"field\" :form=\"form\" :field-props=\"form.getFieldProps(field.name)\">\n      <component\n        :is=\"entry.component\"\n        v-if=\"entry.vModel\"\n        v-bind=\"componentProps\"\n      />\n      <component\n        :is=\"entry.component\"\n        v-else\n        v-bind=\"componentProps\"\n        @upload=\"handleUpload\"\n      />\n    </slot>\n  </FormField>\n</template>\n","import type {\n  FormSchema,\n  FormSectionSchema,\n  SettingsGroup,\n  SettingsModalSchema,\n  SettingsTab,\n  SettingsTabInput,\n} from '../types'\nimport type { AccessControlled } from '../permissions'\nimport { normalizeItemInput } from '../utils/items'\n\nexport const APPEARANCE_TAB_ID = 'appearance'\n\nexport const APPEARANCE_TAB: SettingsTab = {\n  id: APPEARANCE_TAB_ID,\n  label: 'Appearance',\n  // Heroicons \"swatch\" — the built-in tab sits beside plugin tabs that all\n  // carry icons, so it needs one of its own to keep the rail consistent.\n  icon: '<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z\"></path></svg>',\n  description: 'Theme, color palette, and table density',\n}\n\n// Map settings groups onto the form-builder's flat-section shape.\n// `title: ''` because the rail/pane header already shows the group name.\nexport function buildFlatSettingsSchema(schema: SettingsModalSchema): FormSchema {\n  return {\n    sections: schema.groups.map<FormSectionSchema>((group) => ({\n      id: group.id,\n      title: '',\n      fields: group.fields,\n      columns: group.columns,\n      condition: group.condition,\n    })),\n  }\n}\n\nexport function filterSettingsSchemaByAccess(\n  schema: SettingsModalSchema,\n  canShow: (item: AccessControlled) => boolean\n): SettingsModalSchema {\n  const groups = schema.groups.flatMap((group) => {\n    if (!canShow(group)) return []\n\n    const fields = group.fields.filter(canShow)\n    if (fields.length === 0) return []\n\n    return [{ ...group, fields }]\n  })\n\n  return { groups }\n}\n\nexport function settingsGroupToTab(group: SettingsGroup): SettingsTab {\n  return {\n    id: group.id,\n    label: group.label,\n    icon: group.icon,\n    description: group.description,\n  }\n}\n\nexport function normalizeVisibleSettingsTabs(\n  tabs: SettingsTabInput[],\n  canShow: (item: AccessControlled) => boolean\n): SettingsTab[] {\n  return tabs.map(normalizeItemInput).filter(canShow)\n}\n\nexport function buildSettingsTabs(\n  baseTabs: SettingsTab[],\n  showAppearance: boolean\n): SettingsTab[] {\n  return showAppearance ? [...baseTabs, APPEARANCE_TAB] : baseTabs\n}\n","<script setup lang=\"ts\">\n/**\n * Tabbed settings modal with three usage modes:\n *\n *   1. Schema-driven (recommended) — pass `schema`, compact `controls`, or a\n *      complete `defineControlModel()` result plus `v-model:values`. Each\n *      group/section becomes a tab; fields auto-render via the SDK form field\n *      registry (text, select, number, toggle, molecule, concentration, …).\n *      Conditional visibility, validation, and dynamic options come for free.\n *\n *   2. Manual tabs + slots — pass `tabs` and a `<template #tab-{id}>` slot\n *      per tab. Use this when you need bespoke widgets the form-builder\n *      registry doesn't cover (or for legacy plugins).\n *\n *   3. Appearance only — `showAppearance` (default true) renders the built-in\n *      theme / palette / table-density tab. Works alongside both modes above.\n *\n * Layout: `horizontal` (underline tabs, default) or `vertical` (sidebar rail\n * with optional icons + descriptions, recommended for 5+ groups).\n *\n * @example Recommended\n * ```vue\n * <SettingsModal v-model=\"open\" v-model:values=\"values\" :model=\"settingsModel\" />\n * ```\n */\nimport { ref, computed, watch } from 'vue'\nimport BaseModal from './BaseModal.vue'\nimport FormFieldRendererInternal from './internal/FormFieldRendererInternal.vue'\nimport { useFormBuilder } from '../composables/useFormBuilder'\nimport {\n  controlsToSettingsSchema,\n  mergeControlWorkspaceOptions,\n  resolveControlModel,\n  type ControlModel,\n  type ControlModelBinding,\n  type ControlSchema,\n  type ControlWorkspaceOptions,\n} from '../composables/useControlSchema'\nimport { useSettingsStore, colorPalettes } from '../stores/settings'\nimport { useAuthStore } from '../stores/auth'\nimport { usePlatformContext } from '../composables/usePlatformContext'\nimport { canAccessByPolicy } from '../permissions'\nimport {\n  formSchemaFieldNames,\n  pickExistingRecordKeys,\n  pickRecordKeys,\n  recordValuesEqualForKeys,\n} from '../utils/formModelSync'\nimport type {\n  ThemeMode,\n  ColorPalette,\n  TableDensity,\n  ModalLayout,\n  ModalTab,\n  SettingsTab,\n  SettingsTabInput,\n  SettingsModalLayout,\n  SettingsModalSchema,\n  SettingsUserType,\n  FormEnhancements,\n} from '../types'\nimport type { AccessControlled, PermissionUser } from '../permissions'\nimport {\n  APPEARANCE_TAB_ID,\n  buildFlatSettingsSchema,\n  buildSettingsTabs,\n  filterSettingsSchemaByAccess,\n  normalizeVisibleSettingsTabs,\n  settingsGroupToTab,\n} from './SettingsModal.schema'\n\ninterface Props {\n  modelValue: boolean\n  title?: string\n  /** Manual tab descriptors. Ignored when `schema` is set (groups become tabs). */\n  tabs?: SettingsTabInput[]\n  showAppearance?: boolean\n  size?: 'md' | 'lg' | 'xl'\n  layout?: SettingsModalLayout\n  /** Declarative schema — fields auto-render via SDK form components. */\n  schema?: SettingsModalSchema\n  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step settings generation. */\n  model?: ControlModel | ControlModelBinding\n  /** Compact controls model — converted to `schema` when `schema` is not set. */\n  controls?: ControlSchema\n  /** Conversion options for `controls`, such as section labels, columns, and shared initialValues. */\n  controlOptions?: ControlWorkspaceOptions\n  /** Two-way bound values when `schema`, `model`, or `controls` is set. */\n  values?: Record<string, unknown>\n  /** Optional dynamic enhancements (validators, dynamic options, callbacks). */\n  enhancements?: FormEnhancements<Record<string, unknown>>\n  /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */\n  userType?: SettingsUserType\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Settings',\n  tabs: () => [],\n  showAppearance: true,\n  size: 'lg',\n  layout: 'horizontal',\n  model: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  'update:values': [data: Record<string, unknown>]\n  close: []\n}>()\n\nconst settings = useSettingsStore()\nconst auth = useAuthStore()\nconst { user: platformUser } = usePlatformContext()\n\nconst isVertical = computed(() => props.layout === 'vertical')\n\nconst resolvedModel = computed<ControlModelBinding | undefined>(() => {\n  return resolveControlModel(props.model)\n})\nconst resolvedControls = computed<ControlSchema | undefined>(() =>\n  props.controls ?? resolvedModel.value?.controls,\n)\nconst resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>\n  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)\n)\nconst sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>\n  props.schema ?? (\n    resolvedControls.value\n      ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value)\n      : undefined\n  ),\n)\nconst currentAccessUser = computed<PermissionUser | null>(() => {\n  if (props.userType) {\n    return { role: props.userType === 'admin' ? 'admin' : 'user' }\n  }\n  return auth.userInfo ?? platformUser.value ?? null\n})\nconst isAccessUserAuthenticated = computed(() =>\n  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value,\n)\nconst settingsSchema = computed<SettingsModalSchema | undefined>(() => {\n  if (!sourceSettingsSchema.value) return undefined\n  return filterSettingsSchemaByAccess(sourceSettingsSchema.value, canShowForCurrentUser)\n})\nconst isSchemaDriven = computed(() => !!settingsSchema.value)\nconst resolvedValues = computed<Record<string, unknown>>(() => ({\n  ...(resolvedControlOptions.value.initialValues ?? {}),\n  ...(props.values ?? {}),\n}))\n\n// Schema-driven mode keeps one form-builder instance and syncs schema changes\n// into it, so callers can swap groups/fields without remounting the modal.\nconst builder = useFormBuilder(\n  settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },\n  resolvedValues.value,\n  props.enhancements,\n)\n\nwatch(\n  () => settingsSchema.value,\n  (schema) => {\n    if (!schema) {\n      builder.updateSchema({ sections: [] }, {})\n      return\n    }\n\n    const flatSchema = buildFlatSettingsSchema(schema)\n    const fieldNames = formSchemaFieldNames(flatSchema)\n    const sourceValues = props.values === undefined\n      ? {\n          ...resolvedValues.value,\n          ...(builder.form.data as Record<string, unknown>),\n        }\n      : resolvedValues.value\n\n    builder.updateSchema(flatSchema, pickExistingRecordKeys(sourceValues ?? {}, fieldNames))\n  },\n  { deep: true },\n)\n\nwatch(\n  () => ({ ...resolvedValues.value }),\n  (data) => {\n    if (!settingsSchema.value) return\n    const fieldNames = builderFieldNames()\n    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return\n    builder.reset(pickRecordKeys(data, fieldNames))\n  },\n  { deep: true },\n)\n\nwatch(\n  () => ({ ...builder.form.data }),\n  (data) => {\n    if (settingsSchema.value) {\n      emit('update:values', {\n        ...resolvedValues.value,\n        ...data,\n      })\n    }\n  },\n  { deep: true },\n)\n\n// Schema groups whose `condition` evaluates false against the current data are\n// dropped from the rail entirely — same semantics as section visibility in\n// FormBuilder. Manual `tabs` have no condition mechanism, so they pass through.\nconst visibleSchemaGroups = computed(() =>\n  settingsSchema.value\n    ? settingsSchema.value.groups.filter((g) => builder.isSectionVisible(g.id))\n    : [],\n)\n\nconst manualTabs = computed<SettingsTab[]>(() =>\n  normalizeVisibleSettingsTabs(props.tabs, canShowForCurrentUser)\n)\n\nconst allTabs = computed<SettingsTab[]>(() => {\n  const base: SettingsTab[] = settingsSchema.value\n    ? visibleSchemaGroups.value.map(settingsGroupToTab)\n    : manualTabs.value\n  return buildSettingsTabs(base, props.showAppearance)\n})\n\nconst activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)\n\n// BaseModal owns the tab chrome: 'vertical' keeps its public name and maps to\n// the shell rail; horizontal maps to the shell strip (plain when single-tab).\nconst baseLayout = computed<ModalLayout>(() => {\n  if (isVertical.value) return 'rail'\n  return allTabs.value.length > 1 ? 'tabs' : 'plain'\n})\n\nconst modalTabs = computed<ModalTab[]>(() =>\n  allTabs.value.map((tab) => ({\n    id: tab.id,\n    label: tab.label,\n    icon: tab.icon,\n    description: tab.description,\n    meta: tab.meta,\n  })),\n)\n\n// If the active tab vanishes (group hidden by condition), drop back to the first available.\nwatch(allTabs, (tabs) => {\n  if (!tabs.some((t) => t.id === activeTab.value)) {\n    activeTab.value = tabs[0]?.id ?? APPEARANCE_TAB_ID\n  }\n})\n\nconst activeGroup = computed(() =>\n  visibleSchemaGroups.value.find((g) => g.id === activeTab.value),\n)\n\nconst activeGroupVisibleFields = computed(() => {\n  if (!activeGroup.value) return []\n  return activeGroup.value.fields.filter((f) => builder.isFieldVisible(f.name))\n})\n\nconst themeOptions: { value: ThemeMode; label: string }[] = [\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n  { value: 'system', label: 'System' },\n]\n\nconst densityOptions: { value: TableDensity; label: string }[] = [\n  { value: 'compact', label: 'Compact' },\n  { value: 'normal', label: 'Normal' },\n  { value: 'comfortable', label: 'Comfortable' },\n]\n\nfunction handleClose() {\n  emit('update:modelValue', false)\n  emit('close')\n}\n\nfunction builderFieldNames(): string[] {\n  return builder.fields.map(field => field.name)\n}\n\nfunction canShowForCurrentUser(item: AccessControlled): boolean {\n  return canAccessByPolicy(\n    currentAccessUser.value,\n    item,\n    isAccessUserAuthenticated.value,\n  )\n}\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :size=\"size\"\n    :layout=\"baseLayout\"\n    :tabs=\"modalTabs\"\n    :active-tab=\"activeTab\"\n    @update:active-tab=\"activeTab = $event\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n    @close=\"handleClose\"\n  >\n    <!-- Body: the active pane only — tab strip / rail / footer are BaseModal's shell. -->\n    <div class=\"mint-settings-modal\">\n      <div\n        v-if=\"isSchemaDriven && activeGroup\"\n        class=\"mint-settings-modal__group-grid\"\n        :style=\"{ '--mint-settings-cols': activeGroup.columns ?? 1 }\"\n      >\n        <template v-for=\"field in activeGroupVisibleFields\" :key=\"field.name\">\n          <div :style=\"field.colSpan ? { gridColumn: `span ${field.colSpan}` } : undefined\">\n            <slot\n              :name=\"`field:${field.name}`\"\n              :field=\"field\"\n              :form=\"builder.form\"\n              :field-props=\"builder.form.getFieldProps(field.name)\"\n            >\n              <FormFieldRendererInternal\n                :field=\"field\"\n                :resolved-props=\"builder.getResolvedFieldProps(field)\"\n                :form=\"builder.form\"\n              />\n            </slot>\n          </div>\n        </template>\n      </div>\n\n      <template v-else-if=\"!isSchemaDriven\">\n        <template v-for=\"tab in manualTabs\" :key=\"tab.id\">\n          <div v-show=\"activeTab === tab.id\">\n            <slot :name=\"`tab-${tab.id}`\" />\n          </div>\n        </template>\n      </template>\n\n      <div v-if=\"showAppearance\" v-show=\"activeTab === APPEARANCE_TAB_ID\">\n        <div class=\"mint-settings-modal__section\">\n          <div class=\"mint-settings-modal__section-label\">Theme</div>\n          <div class=\"mint-settings-modal__option-group\">\n            <button\n              v-for=\"opt in themeOptions\"\n              :key=\"opt.value\"\n              type=\"button\"\n              :class=\"['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.theme === opt.value }]\"\n              @click=\"settings.theme = opt.value\"\n            >\n              {{ opt.label }}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__section\">\n          <div class=\"mint-settings-modal__section-label\">Color Palette</div>\n          <div class=\"mint-settings-modal__option-group\">\n            <button\n              v-for=\"(palette, key) in colorPalettes\"\n              :key=\"key\"\n              type=\"button\"\n              :class=\"['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.colorPalette === key }]\"\n              @click=\"settings.colorPalette = key as ColorPalette\"\n            >\n              {{ palette.name }}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__section\">\n          <div class=\"mint-settings-modal__section-label\">Table Density</div>\n          <div class=\"mint-settings-modal__option-group\">\n            <button\n              v-for=\"opt in densityOptions\"\n              :key=\"opt.value\"\n              type=\"button\"\n              :class=\"['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.tableDensity === opt.value }]\"\n              @click=\"settings.tableDensity = opt.value\"\n            >\n              {{ opt.label }}\n            </button>\n          </div>\n          <p class=\"mint-settings-modal__note\">Adjusts row height in data tables.</p>\n        </div>\n\n        <slot name=\"appearance\" />\n      </div>\n    </div>\n\n    <template v-if=\"$slots.footer\" #footer>\n      <slot\n        name=\"footer\"\n        :values=\"builder.form.data\"\n        :close=\"handleClose\"\n      />\n    </template>\n  </BaseModal>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Tabbed settings modal with three usage modes:\n *\n *   1. Schema-driven (recommended) — pass `schema`, compact `controls`, or a\n *      complete `defineControlModel()` result plus `v-model:values`. Each\n *      group/section becomes a tab; fields auto-render via the SDK form field\n *      registry (text, select, number, toggle, molecule, concentration, …).\n *      Conditional visibility, validation, and dynamic options come for free.\n *\n *   2. Manual tabs + slots — pass `tabs` and a `<template #tab-{id}>` slot\n *      per tab. Use this when you need bespoke widgets the form-builder\n *      registry doesn't cover (or for legacy plugins).\n *\n *   3. Appearance only — `showAppearance` (default true) renders the built-in\n *      theme / palette / table-density tab. Works alongside both modes above.\n *\n * Layout: `horizontal` (underline tabs, default) or `vertical` (sidebar rail\n * with optional icons + descriptions, recommended for 5+ groups).\n *\n * @example Recommended\n * ```vue\n * <SettingsModal v-model=\"open\" v-model:values=\"values\" :model=\"settingsModel\" />\n * ```\n */\nimport { ref, computed, watch } from 'vue'\nimport BaseModal from './BaseModal.vue'\nimport FormFieldRendererInternal from './internal/FormFieldRendererInternal.vue'\nimport { useFormBuilder } from '../composables/useFormBuilder'\nimport {\n  controlsToSettingsSchema,\n  mergeControlWorkspaceOptions,\n  resolveControlModel,\n  type ControlModel,\n  type ControlModelBinding,\n  type ControlSchema,\n  type ControlWorkspaceOptions,\n} from '../composables/useControlSchema'\nimport { useSettingsStore, colorPalettes } from '../stores/settings'\nimport { useAuthStore } from '../stores/auth'\nimport { usePlatformContext } from '../composables/usePlatformContext'\nimport { canAccessByPolicy } from '../permissions'\nimport {\n  formSchemaFieldNames,\n  pickExistingRecordKeys,\n  pickRecordKeys,\n  recordValuesEqualForKeys,\n} from '../utils/formModelSync'\nimport type {\n  ThemeMode,\n  ColorPalette,\n  TableDensity,\n  ModalLayout,\n  ModalTab,\n  SettingsTab,\n  SettingsTabInput,\n  SettingsModalLayout,\n  SettingsModalSchema,\n  SettingsUserType,\n  FormEnhancements,\n} from '../types'\nimport type { AccessControlled, PermissionUser } from '../permissions'\nimport {\n  APPEARANCE_TAB_ID,\n  buildFlatSettingsSchema,\n  buildSettingsTabs,\n  filterSettingsSchemaByAccess,\n  normalizeVisibleSettingsTabs,\n  settingsGroupToTab,\n} from './SettingsModal.schema'\n\ninterface Props {\n  modelValue: boolean\n  title?: string\n  /** Manual tab descriptors. Ignored when `schema` is set (groups become tabs). */\n  tabs?: SettingsTabInput[]\n  showAppearance?: boolean\n  size?: 'md' | 'lg' | 'xl'\n  layout?: SettingsModalLayout\n  /** Declarative schema — fields auto-render via SDK form components. */\n  schema?: SettingsModalSchema\n  /** Model returned by defineControlModel(), or a raw nested ControlModel for one-step settings generation. */\n  model?: ControlModel | ControlModelBinding\n  /** Compact controls model — converted to `schema` when `schema` is not set. */\n  controls?: ControlSchema\n  /** Conversion options for `controls`, such as section labels, columns, and shared initialValues. */\n  controlOptions?: ControlWorkspaceOptions\n  /** Two-way bound values when `schema`, `model`, or `controls` is set. */\n  values?: Record<string, unknown>\n  /** Optional dynamic enhancements (validators, dynamic options, callbacks). */\n  enhancements?: FormEnhancements<Record<string, unknown>>\n  /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */\n  userType?: SettingsUserType\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Settings',\n  tabs: () => [],\n  showAppearance: true,\n  size: 'lg',\n  layout: 'horizontal',\n  model: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  'update:values': [data: Record<string, unknown>]\n  close: []\n}>()\n\nconst settings = useSettingsStore()\nconst auth = useAuthStore()\nconst { user: platformUser } = usePlatformContext()\n\nconst isVertical = computed(() => props.layout === 'vertical')\n\nconst resolvedModel = computed<ControlModelBinding | undefined>(() => {\n  return resolveControlModel(props.model)\n})\nconst resolvedControls = computed<ControlSchema | undefined>(() =>\n  props.controls ?? resolvedModel.value?.controls,\n)\nconst resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>\n  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)\n)\nconst sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>\n  props.schema ?? (\n    resolvedControls.value\n      ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value)\n      : undefined\n  ),\n)\nconst currentAccessUser = computed<PermissionUser | null>(() => {\n  if (props.userType) {\n    return { role: props.userType === 'admin' ? 'admin' : 'user' }\n  }\n  return auth.userInfo ?? platformUser.value ?? null\n})\nconst isAccessUserAuthenticated = computed(() =>\n  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value,\n)\nconst settingsSchema = computed<SettingsModalSchema | undefined>(() => {\n  if (!sourceSettingsSchema.value) return undefined\n  return filterSettingsSchemaByAccess(sourceSettingsSchema.value, canShowForCurrentUser)\n})\nconst isSchemaDriven = computed(() => !!settingsSchema.value)\nconst resolvedValues = computed<Record<string, unknown>>(() => ({\n  ...(resolvedControlOptions.value.initialValues ?? {}),\n  ...(props.values ?? {}),\n}))\n\n// Schema-driven mode keeps one form-builder instance and syncs schema changes\n// into it, so callers can swap groups/fields without remounting the modal.\nconst builder = useFormBuilder(\n  settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },\n  resolvedValues.value,\n  props.enhancements,\n)\n\nwatch(\n  () => settingsSchema.value,\n  (schema) => {\n    if (!schema) {\n      builder.updateSchema({ sections: [] }, {})\n      return\n    }\n\n    const flatSchema = buildFlatSettingsSchema(schema)\n    const fieldNames = formSchemaFieldNames(flatSchema)\n    const sourceValues = props.values === undefined\n      ? {\n          ...resolvedValues.value,\n          ...(builder.form.data as Record<string, unknown>),\n        }\n      : resolvedValues.value\n\n    builder.updateSchema(flatSchema, pickExistingRecordKeys(sourceValues ?? {}, fieldNames))\n  },\n  { deep: true },\n)\n\nwatch(\n  () => ({ ...resolvedValues.value }),\n  (data) => {\n    if (!settingsSchema.value) return\n    const fieldNames = builderFieldNames()\n    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return\n    builder.reset(pickRecordKeys(data, fieldNames))\n  },\n  { deep: true },\n)\n\nwatch(\n  () => ({ ...builder.form.data }),\n  (data) => {\n    if (settingsSchema.value) {\n      emit('update:values', {\n        ...resolvedValues.value,\n        ...data,\n      })\n    }\n  },\n  { deep: true },\n)\n\n// Schema groups whose `condition` evaluates false against the current data are\n// dropped from the rail entirely — same semantics as section visibility in\n// FormBuilder. Manual `tabs` have no condition mechanism, so they pass through.\nconst visibleSchemaGroups = computed(() =>\n  settingsSchema.value\n    ? settingsSchema.value.groups.filter((g) => builder.isSectionVisible(g.id))\n    : [],\n)\n\nconst manualTabs = computed<SettingsTab[]>(() =>\n  normalizeVisibleSettingsTabs(props.tabs, canShowForCurrentUser)\n)\n\nconst allTabs = computed<SettingsTab[]>(() => {\n  const base: SettingsTab[] = settingsSchema.value\n    ? visibleSchemaGroups.value.map(settingsGroupToTab)\n    : manualTabs.value\n  return buildSettingsTabs(base, props.showAppearance)\n})\n\nconst activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)\n\n// BaseModal owns the tab chrome: 'vertical' keeps its public name and maps to\n// the shell rail; horizontal maps to the shell strip (plain when single-tab).\nconst baseLayout = computed<ModalLayout>(() => {\n  if (isVertical.value) return 'rail'\n  return allTabs.value.length > 1 ? 'tabs' : 'plain'\n})\n\nconst modalTabs = computed<ModalTab[]>(() =>\n  allTabs.value.map((tab) => ({\n    id: tab.id,\n    label: tab.label,\n    icon: tab.icon,\n    description: tab.description,\n    meta: tab.meta,\n  })),\n)\n\n// If the active tab vanishes (group hidden by condition), drop back to the first available.\nwatch(allTabs, (tabs) => {\n  if (!tabs.some((t) => t.id === activeTab.value)) {\n    activeTab.value = tabs[0]?.id ?? APPEARANCE_TAB_ID\n  }\n})\n\nconst activeGroup = computed(() =>\n  visibleSchemaGroups.value.find((g) => g.id === activeTab.value),\n)\n\nconst activeGroupVisibleFields = computed(() => {\n  if (!activeGroup.value) return []\n  return activeGroup.value.fields.filter((f) => builder.isFieldVisible(f.name))\n})\n\nconst themeOptions: { value: ThemeMode; label: string }[] = [\n  { value: 'light', label: 'Light' },\n  { value: 'dark', label: 'Dark' },\n  { value: 'system', label: 'System' },\n]\n\nconst densityOptions: { value: TableDensity; label: string }[] = [\n  { value: 'compact', label: 'Compact' },\n  { value: 'normal', label: 'Normal' },\n  { value: 'comfortable', label: 'Comfortable' },\n]\n\nfunction handleClose() {\n  emit('update:modelValue', false)\n  emit('close')\n}\n\nfunction builderFieldNames(): string[] {\n  return builder.fields.map(field => field.name)\n}\n\nfunction canShowForCurrentUser(item: AccessControlled): boolean {\n  return canAccessByPolicy(\n    currentAccessUser.value,\n    item,\n    isAccessUserAuthenticated.value,\n  )\n}\n</script>\n\n<template>\n  <BaseModal\n    :model-value=\"modelValue\"\n    :title=\"title\"\n    :size=\"size\"\n    :layout=\"baseLayout\"\n    :tabs=\"modalTabs\"\n    :active-tab=\"activeTab\"\n    @update:active-tab=\"activeTab = $event\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n    @close=\"handleClose\"\n  >\n    <!-- Body: the active pane only — tab strip / rail / footer are BaseModal's shell. -->\n    <div class=\"mint-settings-modal\">\n      <div\n        v-if=\"isSchemaDriven && activeGroup\"\n        class=\"mint-settings-modal__group-grid\"\n        :style=\"{ '--mint-settings-cols': activeGroup.columns ?? 1 }\"\n      >\n        <template v-for=\"field in activeGroupVisibleFields\" :key=\"field.name\">\n          <div :style=\"field.colSpan ? { gridColumn: `span ${field.colSpan}` } : undefined\">\n            <slot\n              :name=\"`field:${field.name}`\"\n              :field=\"field\"\n              :form=\"builder.form\"\n              :field-props=\"builder.form.getFieldProps(field.name)\"\n            >\n              <FormFieldRendererInternal\n                :field=\"field\"\n                :resolved-props=\"builder.getResolvedFieldProps(field)\"\n                :form=\"builder.form\"\n              />\n            </slot>\n          </div>\n        </template>\n      </div>\n\n      <template v-else-if=\"!isSchemaDriven\">\n        <template v-for=\"tab in manualTabs\" :key=\"tab.id\">\n          <div v-show=\"activeTab === tab.id\">\n            <slot :name=\"`tab-${tab.id}`\" />\n          </div>\n        </template>\n      </template>\n\n      <div v-if=\"showAppearance\" v-show=\"activeTab === APPEARANCE_TAB_ID\">\n        <div class=\"mint-settings-modal__section\">\n          <div class=\"mint-settings-modal__section-label\">Theme</div>\n          <div class=\"mint-settings-modal__option-group\">\n            <button\n              v-for=\"opt in themeOptions\"\n              :key=\"opt.value\"\n              type=\"button\"\n              :class=\"['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.theme === opt.value }]\"\n              @click=\"settings.theme = opt.value\"\n            >\n              {{ opt.label }}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__section\">\n          <div class=\"mint-settings-modal__section-label\">Color Palette</div>\n          <div class=\"mint-settings-modal__option-group\">\n            <button\n              v-for=\"(palette, key) in colorPalettes\"\n              :key=\"key\"\n              type=\"button\"\n              :class=\"['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.colorPalette === key }]\"\n              @click=\"settings.colorPalette = key as ColorPalette\"\n            >\n              {{ palette.name }}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__section\">\n          <div class=\"mint-settings-modal__section-label\">Table Density</div>\n          <div class=\"mint-settings-modal__option-group\">\n            <button\n              v-for=\"opt in densityOptions\"\n              :key=\"opt.value\"\n              type=\"button\"\n              :class=\"['mint-settings-modal__option-btn', { 'mint-settings-modal__option-btn--active': settings.tableDensity === opt.value }]\"\n              @click=\"settings.tableDensity = opt.value\"\n            >\n              {{ opt.label }}\n            </button>\n          </div>\n          <p class=\"mint-settings-modal__note\">Adjusts row height in data tables.</p>\n        </div>\n\n        <slot name=\"appearance\" />\n      </div>\n    </div>\n\n    <template v-if=\"$slots.footer\" #footer>\n      <slot\n        name=\"footer\"\n        :values=\"builder.form.data\"\n        :close=\"handleClose\"\n      />\n    </template>\n  </BaseModal>\n</template>\n"],"mappings":"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"}