@lumiastream/ui 0.5.3 → 0.5.5

package/dist/index.js

@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/lumia-ui.css
-styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n");
+styleInject(".ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n}\n.mui-ls-button.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.45;\n  background-color: var(--separator, #0a0821);\n  cursor: not-allowed;\n}\n.mui-ls-button {\n  border-radius: var(--radius, 1rem);\n  padding: 0.375rem 1.5rem;\n  text-transform: uppercase;\n}\n.mui-ls-button.MuiButton-sizeSmall {\n  padding: 0.25rem 1rem;\n}\n.mui-ls-button.MuiButton-sizeLarge {\n  padding: 0.625rem 2rem;\n}\n.mui-ls-button--extended {\n  padding-inline: 3rem;\n}\n.mui-ls-button.MuiButton-containedPrimary,\n.mui-ls-button.Mui-disabled.MuiButton-containedPrimary {\n  background: var(--primary, #ff4076);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.Mui-disabled.MuiButton-containedSecondary {\n  background-color: var(--secondary, #535395);\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  opacity: 0.4;\n}\n.mui-ls-button.MuiButton-outlinedPrimary {\n  color: var(--primary, #ff4076);\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-button.MuiButton-outlinedPrimary:hover {\n  border-color: var(--primary, #ff4076);\n  background-color: color-mix(in srgb, var(--primary, #ff4076) 12%, transparent);\n}\n.mui-ls-button.MuiButton-outlinedSecondary {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--secondary, #535395);\n}\n.mui-ls-button.MuiButton-outlinedSecondary.Mui-disabled {\n  color: var(--neutralLight2, var(--white2, #cac9d5));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n  opacity: 0.5;\n}\n.mui-ls-button.MuiButton-outlinedSecondary:hover {\n  border-color: var(--secondary, #535395);\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button.MuiButton-containedError {\n  color: var(--alwayswhite, #fff) !important;\n}\n.mui-ls-button.MuiButton-outlinedError {\n  color: var(--error, #fd5454);\n  border-color: var(--error, #fd5454);\n}\n.mui-ls-button.MuiButton-outlinedError:hover {\n  border-color: var(--error, #fd5454);\n  background-color: color-mix(in srgb, var(--error, #fd5454) 12%, transparent);\n}\n.mui-ls-button--neutral.mui-ls-button--contained {\n  background-color: var(--neutralDark4, var(--cardborder, #393853));\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-button--neutral.mui-ls-button--contained:hover {\n  background-color: color-mix(in srgb, var(--neutralDark4, var(--cardborder, #393853)) 82%, var(--neutralLight1, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--outlined {\n  color: var(--neutralLight1, var(--white, #fff));\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n  background-color: transparent;\n}\n.mui-ls-button--neutral.mui-ls-button--outlined:hover {\n  border-color: var(--neutralLight3, var(--grey, #9392a1));\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button--neutral.mui-ls-button--text {\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-button--neutral.mui-ls-button--text:hover {\n  background-color: var(--transwhite, rgba(255, 255, 255, 0.05));\n}\n.mui-ls-button svg {\n  max-height: 24px;\n  max-width: 24px;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-ls-input,\n.mui-ls-select-form-control,\n.mui-multi-select,\n.ls-font-picker,\n.mui-ls-slider-input-root {\n  --ls-control-height: 55px;\n}\n.mui-ls-input .MuiOutlinedInput-root,\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-input .MuiOutlinedInput-notchedOutline,\n.mui-ls-select.MuiOutlinedInput-root,\n.mui-ls-select .MuiOutlinedInput-notchedOutline,\n.mui-multi-select .mui-ls-select.MuiOutlinedInput-root,\n.mui-multi-select .mui-ls-select .MuiOutlinedInput-notchedOutline,\n.ls-font-picker .MuiOutlinedInput-root,\n.ls-font-picker .MuiInputBase-root,\n.ls-font-picker .MuiOutlinedInput-notchedOutline,\n.ls-color-picker__input .MuiOutlinedInput-root,\n.ls-color-picker__input .MuiInputBase-root,\n.ls-color-picker__input .MuiOutlinedInput-notchedOutline {\n  border-radius: var(--radius) !important;\n}\n.mui-ls-input .MuiInputBase-root,\n.mui-ls-select.MuiInputBase-root,\n.mui-multi-select .mui-ls-select.MuiInputBase-root,\n.ls-font-picker .MuiInputBase-root {\n  min-height: var(--ls-control-height);\n}\n.mui-ls-input.small .MuiInputBase-root {\n  min-height: 25px;\n}\n.mui-ls-input.medium .MuiInputBase-root {\n  min-height: 35px;\n}\n.mui-ls-input.noMinHeight .MuiInputBase-root {\n  min-height: unset;\n}\n.mui-ls-date-picker input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  cursor: pointer;\n  opacity: 0.9;\n  filter: invert(1);\n}\n.mui-ls-select .MuiSelect-select,\n.mui-multi-select .MuiSelect-select {\n  display: flex;\n  min-height: calc(var(--ls-control-height) - 2px);\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--radius);\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.MuiSvgIcon-root svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.mui-ls-input .MuiSvgIcon-root svg path {\n  fill: currentcolor;\n  stroke: currentcolor;\n}\n.mui-ls-input input::placeholder,\n.mui-ls-input textarea::placeholder {\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  opacity: 0.55;\n  font-style: italic;\n}\n.mui-ls-input .MuiInputBase-input,\n.mui-ls-input .MuiInputAdornment-root,\n.mui-ls-input .MuiSvgIcon-root,\n.mui-ls-input .MuiFormHelperText-root {\n  color: var(--neutralLight1, var(--white, #fff));\n  opacity: 1;\n}\n.mui-ls-input .Mui-focused .MuiOutlinedInput-notchedOutline,\n.mui-ls-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {\n  border-color: var(--primary, #ff4076) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-paper,\n.ls-variable-autocomplete-paper {\n  border: 1px solid var(--neutralDark4, var(--cardborder, #393853)) !important;\n  border-radius: var(--radius, 1rem) !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32) !important;\n  overflow: hidden !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-listbox,\n.ls-variable-autocomplete-listbox {\n  padding: 0.25rem 0 !important;\n  background: var(--neutralDark2, var(--cardbackground, #211f45)) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option {\n  display: flex !important;\n  min-height: 44px !important;\n  align-items: center !important;\n  padding: 0.625rem 1rem !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n  font-size: 1rem !important;\n  line-height: 1.35 !important;\n  cursor: pointer !important;\n  transition: background-color 120ms ease, color 120ms ease !important;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option > *,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option > * {\n  min-width: 0;\n}\n.ls-variable-autocomplete-popper .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-popper .MuiAutocomplete-option[aria-selected=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option:hover,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option.Mui-focused,\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[data-focus=true],\n.ls-variable-autocomplete-listbox .MuiAutocomplete-option[aria-selected=true] {\n  background: var( --cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)) ) !important;\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-option {\n  gap: 0.75rem;\n}\n.ls-variable-option__thumb {\n  width: 40px;\n  height: 40px;\n  flex: 0 0 40px;\n  border-radius: var(--radius, 1rem);\n  object-fit: cover;\n}\n.ls-variable-option__thumb--placeholder {\n  background: var(--neutralDark4, var(--cardborder, #393853));\n}\n.ls-variable-option__body {\n  min-width: 0;\n}\n.ls-variable-option__label {\n  color: var(--neutralLight1, var(--white, #fff));\n  font-weight: 500;\n  line-height: 1.25;\n}\n.ls-variable-option__helper {\n  margin-top: 0.125rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.875rem;\n  line-height: 1.25;\n}\n.ls-variable-autocomplete-popup-indicator,\n.ls-variable-autocomplete-popup-indicator.MuiIconButton-root,\n.ls-variable-autocomplete-popup-indicator svg {\n  color: var(--neutralLight1, var(--white, #fff)) !important;\n}\n.ls-variable-autocomplete-popup-indicator svg path {\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment,\n.ls-variable-input-adornment.MuiInputAdornment-root {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  min-width: 24px;\n  margin-left: 0.35rem;\n  border-radius: var(--radius, 1rem);\n  background: var(--primary, #ff4076) !important;\n  color: var(--alwayswhite, var(--white, #fff)) !important;\n  font-weight: 800;\n  line-height: 1;\n  letter-spacing: 0;\n  cursor: pointer;\n  user-select: none;\n}\n.ls-variable-input-adornment svg,\n.ls-variable-input-adornment path {\n  color: currentcolor !important;\n  fill: currentcolor !important;\n  stroke: currentcolor !important;\n}\n.ls-variable-input-adornment:hover,\n.ls-variable-input-adornment.MuiInputAdornment-root:hover {\n  filter: brightness(1.08);\n}\n.ls-variable-input-adornment:active,\n.ls-variable-input-adornment.MuiInputAdornment-root:active {\n  filter: brightness(0.96);\n}\n.mui-ls-slider-input-root {\n  width: 100%;\n}\n.mui-ls-slider-input-fieldset {\n  position: relative;\n  min-width: 0;\n  width: 100%;\n  min-height: var(--ls-control-height);\n  margin: 0;\n  border: 2px solid var(--neutralDark4, var(--cardborder, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0 0.875rem 0.5rem 0.875rem;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n}\n.mui-ls-slider-input-fieldset:hover {\n  border-color: var(--primary, #ff4076);\n}\n.mui-ls-slider-input-legend {\n  display: block;\n  width: auto;\n  max-width: calc(100% - 1rem);\n  margin: 0;\n  padding: 0 0.25rem;\n  color: var(--neutralLight1, var(--white, #fff));\n  font-size: 0.875rem;\n  line-height: 1.1;\n  white-space: nowrap;\n}\n.mui-ls-slider-input-row {\n  display: flex;\n  min-width: 0;\n  min-height: calc(var(--ls-control-height) - 14px);\n  align-items: center;\n  gap: 1rem;\n}\n.mui-ls-slider-input-row--slider {\n  flex-wrap: nowrap;\n}\n.mui-ls-slider-input-row--input {\n  justify-content: stretch;\n}\n.mui-ls-slider-input-value.mui-ls-input {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiFormControl-root,\n.mui-ls-slider-input-value.mui-ls-input .MuiTextField-root {\n  margin: 0;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiInputBase-root {\n  min-height: 36px;\n}\n.mui-ls-slider-input-value.mui-ls-input .MuiOutlinedInput-notchedOutline {\n  border-color: var(--neutralDark4, var(--cardborder, #393853));\n}\n.mui-ls-slider-input-helper {\n  display: block;\n  margin-top: 0.25rem;\n  color: var(--neutralLight3, var(--grey, #9392a1));\n  font-size: 0.75rem;\n  line-height: 1.25;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radius, 1rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var( --functionVariables, var(--semanticPurple, #b489ff) );\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 1rem;\n}\n.ls-variable-picker__field {\n  margin: 0 0 0.75rem;\n  border: 1px solid color-mix(in srgb, var(--primary, #ff4076) 42%, var(--neutralDark4, #393853));\n  border-radius: var(--radius, 1rem);\n  padding: 0.5rem;\n}\n.ls-variable-picker__legend {\n  padding-inline: 0.375rem;\n  color: var(--primary, #ff4076);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 1fr 1fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-right: 1.7rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 70%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row--no-border {\n  border-bottom: 0;\n}\n.ls-variable-picker__token-cell {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 0.375rem;\n}\n.ls-variable-picker__expand-toggle,\n.ls-variable-picker__expand-spacer {\n  width: 24px;\n  height: 24px;\n  flex: 0 0 24px;\n}\n.ls-variable-picker__expand-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid color-mix(in srgb, var(--neutralDark4, #393853) 75%, transparent);\n  border-radius: var(--radius, 1rem);\n  padding: 0;\n  background: var(--neutralDark3, var(--containerbackground, #1f1f3a));\n  color: var(--neutralLight2, #cac9d5);\n  transition:\n    background-color 140ms ease,\n    border-color 140ms ease,\n    color 140ms ease,\n    transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle:hover {\n  border-color: var(--primary, #ff4076);\n  background: color-mix(in srgb, var(--primary, #ff4076) 16%, var(--neutralDark3, #1f1f3a));\n  color: var(--neutralLight1, #fff);\n}\n.ls-variable-picker__expand-toggle svg {\n  transform: rotate(-90deg);\n  transition: transform 140ms ease;\n}\n.ls-variable-picker__expand-toggle--expanded svg {\n  transform: rotate(0deg);\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n  word-break: break-all;\n}\n.ls-variable-picker__value {\n  min-width: 0;\n}\n.ls-variable-picker__value-input {\n  width: 100%;\n  min-width: 0;\n  cursor: text;\n  overflow: hidden;\n  border: 0;\n  background: transparent;\n  color: var(--neutralLight1, var(--white, #fff));\n  caret-color: transparent;\n  font: inherit;\n  font-size: 1rem;\n  line-height: 1.25;\n  outline: 0;\n  padding: 0;\n  text-overflow: ellipsis;\n}\n.ls-variable-picker__value-input:focus {\n  outline: 0;\n}\n.ls-variable-picker__value-input::selection {\n  background: color-mix(in srgb, var(--primary, #ff4076) 45%, transparent);\n  color: var(--alwayswhite, var(--white, #fff));\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--suggested {\n  color: var(--suggestedVariables, #ffb469);\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: var(--radius, 1rem);\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n");
 
 // src/components/LSButton/LSButton.tsx
 import Button from "@mui/material/Button";
@@ -93,9 +93,6 @@ var LSInput = forwardRef(
       inputAfterText,
       maxWidth,
       className = "",
-      InputProps: inputPropsProp,
-      InputLabelProps: inputLabelPropsProp,
-      inputProps: htmlInputPropsProp,
       slotProps: slotPropsProp,
       onChange,
       onChangeStart,
@@ -130,25 +127,11 @@ var LSInput = forwardRef(
       onChange?.(event, sanitizedValue);
       onChangeEnd?.(event, sanitizedValue);
     };
-    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
-    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
-    const inputSlotProps = {
-      ...inputPropsProp,
-      startAdornment: resolvedStartAdornment,
-      endAdornment: resolvedEndAdornment,
-      readOnly: rest.readOnly ?? inputPropsProp?.readOnly,
-      sx: {
-        ...inputPropsProp?.sx ?? {},
-        "& input, & textarea": {
-          textAlign: centerText ? "center" : void 0,
-          color: textColor ?? void 0
-        }
-      }
-    };
-    const inputLabelProps = {
-      shrink: true,
-      ...inputLabelPropsProp
-    };
+    const callerInputSlot = slotPropsProp?.input ?? {};
+    const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
+    const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
+    const resolvedStartAdornment = callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
     const helperContent = helperText ?? (typeof error === "string" ? error : "");
     const hasError = typeof error === "string" ? true : Boolean(error);
     const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
@@ -156,20 +139,24 @@ var LSInput = forwardRef(
     const slotProps = {
       ...slotPropsProp ?? {},
       input: {
-        ...slotPropsProp?.input ?? {},
-        ...inputSlotProps,
+        ...callerInputSlot,
+        startAdornment: resolvedStartAdornment,
+        endAdornment: resolvedEndAdornment,
+        readOnly: rest.readOnly ?? callerInputSlot.readOnly,
         sx: {
-          ...slotPropsProp?.input?.sx ?? {},
-          ...inputSlotProps.sx
+          ...callerInputSlot.sx ?? {},
+          "& input, & textarea": {
+            textAlign: centerText ? "center" : void 0,
+            color: textColor ?? void 0
+          }
         }
       },
       inputLabel: {
-        ...slotPropsProp?.inputLabel ?? {},
-        ...inputLabelProps
+        shrink: true,
+        ...callerInputLabelSlot
       },
       htmlInput: {
-        ...slotPropsProp?.htmlInput ?? {},
-        ...htmlInputPropsProp ?? {}
+        ...callerHtmlInputSlot
       }
     };
     const TextFieldComponent = TextField;
@@ -359,15 +346,15 @@ var LSSliderInput = ({
             onChange: (_event, nextValue) => handleInputChange({ target: { value: nextValue ?? "" } }),
             value: displayValue ?? "",
             inputAfterText,
-            InputProps: {
-              ...inputProps?.InputProps ?? {},
-              name,
-              type: "number",
-              value: displayValue,
-              min: displayMinimum,
-              max: displayMaximum,
-              step: displayStep,
-              inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+            slotProps: {
+              ...inputProps?.slotProps ?? {},
+              htmlInput: {
+                ...inputProps?.slotProps?.htmlInput ?? {},
+                min: displayMinimum,
+                max: displayMaximum,
+                step: displayStep,
+                inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+              }
             },
             fullWidth: hideSlider ? fullWidth : false,
             $noMinHeight: false,
@@ -431,6 +418,16 @@ var LSSelect = ({
           border: "1px solid var(--neutralDark4)",
           borderRadius: "var(--radius, 1rem)",
           boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+          "& .MuiList-root": {
+            backgroundColor: "var(--neutralDark2)"
+          },
+          "& .MuiListSubheader-root": {
+            backgroundColor: "var(--neutralDark1)",
+            color: "var(--neutralLight2)"
+          },
+          "& .MuiMenuItem-root": {
+            color: "var(--neutralLight1)"
+          },
           ...MenuProps?.slotProps?.paper?.sx
         }
       },
@@ -442,28 +439,6 @@ var LSSelect = ({
           ...MenuProps?.slotProps?.list?.sx
         }
       }
-    },
-    PaperProps: {
-      ...MenuProps?.PaperProps ?? {},
-      sx: {
-        background: "var(--neutralDark2) !important",
-        backgroundColor: "var(--neutralDark2)",
-        color: "var(--neutralLight1)",
-        border: "1px solid var(--neutralDark4)",
-        borderRadius: "var(--radius, 1rem)",
-        boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
-        "& .MuiList-root": {
-          backgroundColor: "var(--neutralDark2)"
-        },
-        "& .MuiListSubheader-root": {
-          backgroundColor: "var(--neutralDark1)",
-          color: "var(--neutralLight2)"
-        },
-        "& .MuiMenuItem-root": {
-          color: "var(--neutralLight1)"
-        },
-        ...MenuProps?.PaperProps?.sx
-      }
     }
   };
   return /* @__PURE__ */ jsxs2(
@@ -783,14 +758,7 @@ LSDatePicker.displayName = "LSDatePicker";
 import { KeyboardArrowDown } from "@mui/icons-material";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField2 from "@mui/material/TextField";
-import {
-  memo,
-  startTransition,
-  useEffect as useEffect3,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState3
-} from "react";
+import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var LSFontPicker = memo(function LSFontPicker2({
   value,
@@ -848,9 +816,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       popupIcon: /* @__PURE__ */ jsx8(KeyboardArrowDown, {}),
       isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
       onChange: (_event, newValue) => {
-        handleValueChange(
-          typeof newValue === "string" ? newValue : `${newValue ?? ""}`
-        );
+        handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
       },
       onInputChange: (_event, newInputValue, reason) => {
         if (reason === "input" || reason === "clear") {
@@ -907,11 +873,7 @@ var LSFontPicker = memo(function LSFontPicker2({
         );
       },
       renderInput: (params) => {
-        const {
-          InputLabelProps: paramsInputLabelProps,
-          InputProps: paramsInputProps,
-          ...restParams
-        } = params;
+        const { slotProps: paramsSlotProps = {}, ...restParams } = params;
         return /* @__PURE__ */ jsx8(
           TextFieldComponent,
           {
@@ -928,12 +890,16 @@ var LSFontPicker = memo(function LSFontPicker2({
               }
             },
             slotProps: {
+              ...paramsSlotProps,
               inputLabel: {
-                shrink: true,
-                ...paramsInputLabelProps ?? {}
+                ...paramsSlotProps.inputLabel ?? {},
+                shrink: true
               },
               input: {
-                ...paramsInputProps ?? {}
+                ...paramsSlotProps.input ?? {}
+              },
+              htmlInput: {
+                ...paramsSlotProps.htmlInput ?? {}
               }
             }
           }
@@ -976,6 +942,12 @@ var LSMultiSelect = ({
         /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
+        // The previous version of this also set `PaperProps` here — that
+        // prop was removed from Menu in @mui/material v9 and React warns
+        // "does not recognize the `PaperProps` prop on a DOM element"
+        // when Menu spreads it through. Folded the one unique selector
+        // (`& .MuiList-root`) into `slotProps.paper.sx` below; everything
+        // else was already duplicated there.
         slotProps: {
           paper: {
             sx: {
@@ -987,7 +959,10 @@ var LSMultiSelect = ({
               boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
               backdropFilter: "none",
               opacity: 1,
-              maxHeight: "280px !important"
+              maxHeight: "280px !important",
+              "& .MuiList-root": {
+                backgroundColor: "var(--neutralDark2)"
+              }
             }
           },
           list: {
@@ -996,21 +971,6 @@ var LSMultiSelect = ({
               color: "var(--neutralLight1)"
             }
           }
-        },
-        PaperProps: {
-          sx: {
-            background: "var(--neutralDark2) !important",
-            backgroundColor: "var(--neutralDark2)",
-            color: "var(--neutralLight1)",
-            backdropFilter: "none",
-            opacity: 1,
-            maxHeight: "280px !important",
-            border: "1px solid var(--neutralDark4)",
-            borderRadius: "var(--radius, 1rem)",
-            "& .MuiList-root": {
-              backgroundColor: "var(--neutralDark2)"
-            }
-          }
         }
       },
       children: options.map((option) => /* @__PURE__ */ jsxs4(
@@ -1077,7 +1037,8 @@ import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var LSTextField = forwardRef4(
   (props, ref) => {
-    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    const { slotProps, ...rest } = props;
+    const paramsInputLabel = slotProps?.inputLabel ?? {};
     return /* @__PURE__ */ jsx11(
       TextField3,
       {
@@ -1086,18 +1047,9 @@ var LSTextField = forwardRef4(
         className: "mui-ls-input",
         slotProps: {
           ...slotProps ?? {},
-          input: {
-            ...slotProps?.input ?? {},
-            ...InputProps ?? {},
-            sx: {
-              ...slotProps?.input?.sx ?? {},
-              ...InputProps?.sx ?? {}
-            }
-          },
           inputLabel: {
-            ...slotProps?.inputLabel ?? {},
-            shrink: true,
-            ...InputLabelProps ?? {}
+            ...paramsInputLabel,
+            shrink: true
           }
         },
         ref
@@ -2256,14 +2208,12 @@ var VariableInputTextField = forwardRef5(
     containerRef,
     showVariableIcon
   }, ref) => {
-    const inputPropsInputProps = inputProps?.InputProps ?? {};
-    const paramsInputProps = params?.InputProps ?? {};
-    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
-    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
     const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx12(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
-    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment ?? resolvedExplicitStartAdornment;
-    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
+    const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
+    const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
     return /* @__PURE__ */ jsx12(
       LSTextField,
       {
@@ -2285,31 +2235,27 @@ var VariableInputTextField = forwardRef5(
         onChange: onChange ? (e) => onChange(e.target.value) : void 0,
         ...inputProps,
         ...params,
-        InputProps: {
-          ...inputPropsSlotInputProps,
-          ...inputPropsInputProps,
-          ...paramsSlotInputProps,
-          ...paramsInputProps,
-          startAdornment,
-          endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            endAdornment ?? null,
-            showVariableIcon ? /* @__PURE__ */ jsx12(
-              Tooltip,
-              {
-                title: t("chatbot.allowed-variables", "Allowed Variables"),
-                children: /* @__PURE__ */ jsx12(
-                  InputAdornment2,
-                  {
-                    position: "end",
-                    onClick: clickedVariableIcon,
-                    ref: containerRef,
-                    className: "ls-variable-input-adornment",
-                    children: "{}"
-                  }
-                )
-              }
-            ) : null
-          ] })
+        slotProps: {
+          ...inputProps?.slotProps ?? {},
+          ...params?.slotProps ?? {},
+          input: {
+            ...inputPropsSlotInput,
+            ...paramsSlotInput,
+            startAdornment,
+            endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              endAdornment ?? null,
+              showVariableIcon ? /* @__PURE__ */ jsx12(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx12(
+                InputAdornment2,
+                {
+                  position: "end",
+                  onClick: clickedVariableIcon,
+                  ref: containerRef,
+                  className: "ls-variable-input-adornment",
+                  children: "{}"
+                }
+              ) }) : null
+            ] })
+          }
         },
         inputRef: ref
       }
@@ -3133,7 +3079,7 @@ var resolveChatterProfileUrlWithResolvers = async ({
 };
 
 // src/se-import/index.ts
-import { nanoid as nanoid10 } from "nanoid";
+import { nanoid as nanoid8 } from "nanoid";
 
 // src/se-import/translate.ts
 var SE_TO_LUMIA_PLACEHOLDER = {
@@ -4184,26 +4130,55 @@ function mapText(widget, ctx) {
     ctx
   );
 }
+function seInnerAutoFit(widget, innerCss, mode) {
+  const isInnerAutoWidth = innerCss?.width === "auto";
+  const isInnerAutoHeight = innerCss?.height === "auto";
+  if (mode === "width-drives-both") {
+    if (!isInnerAutoWidth) return {};
+    return { objectFit: "contain", autoWidth: true, autoHeight: true };
+  }
+  if (!isInnerAutoWidth && !isInnerAutoHeight) return {};
+  const result = { objectFit: "contain" };
+  if (isInnerAutoWidth && !isExplicitPxSize(widget.css?.width))
+    result.autoWidth = true;
+  if (isInnerAutoHeight && !isExplicitPxSize(widget.css?.height))
+    result.autoHeight = true;
+  return result;
+}
+function applySeAutoFitBounds(unit, fit) {
+  const bounds = unit.layer.bounds;
+  if (fit.autoWidth) bounds.autoWidth = true;
+  if (fit.autoHeight) bounds.autoHeight = true;
+}
 function mapImage(widget, ctx) {
+  const fit = seInnerAutoFit(widget, widget.image?.css, "inner-axis-gated");
   const unit = buildUnit(
     widget,
     "image",
     {
       content: {
         src: widget.image?.src ?? "",
-        loop: true
+        loop: true,
+        ...fit.objectFit ? { objectFit: fit.objectFit } : {}
       }
     },
     ctx
   );
-  const innerWidth = widget.image?.css?.width;
-  const innerHeight = widget.image?.css?.height;
-  const bounds = unit.layer.bounds;
-  if (innerWidth === "auto") bounds.autoWidth = true;
-  if (innerHeight === "auto") bounds.autoHeight = true;
+  applySeAutoFitBounds(unit, fit);
   return unit;
 }
+function isExplicitPxSize(value) {
+  if (value == null) return false;
+  if (typeof value === "number") return Number.isFinite(value) && value > 0;
+  if (typeof value !== "string") return false;
+  const s = value.trim().toLowerCase();
+  if (s === "" || s === "auto") return false;
+  if (s.endsWith("%")) return false;
+  const parsed = parseFloat(s);
+  return Number.isFinite(parsed) && parsed > 0;
+}
 function mapVideo(widget, ctx) {
+  const fit = seInnerAutoFit(widget, widget.video?.css, "width-drives-both");
   const unit = buildUnit(
     widget,
     "video",
@@ -4217,6 +4192,7 @@ function mapVideo(widget, ctx) {
     },
     ctx
   );
+  applySeAutoFitBounds(unit, fit);
   unit.layer.bounds.autoHeight = true;
   return unit;
 }
@@ -4276,118 +4252,157 @@ function mapReadout(widget, fallbackVar, ctx) {
 
 // src/se-import/mappers/alert.ts
 import { LumiaAlertConfigs } from "@lumiastream/lumia-types";
+import { nanoid as nanoid2 } from "nanoid";
+
+// src/se-import/import-utils.ts
+function pxToNumber(raw, fallback) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw !== "string") return fallback;
+  const trimmed = raw.trim();
+  if (!trimmed) return fallback;
+  if (trimmed.endsWith("px")) {
+    const n2 = parseFloat(trimmed.slice(0, -2));
+    return Number.isFinite(n2) ? n2 : fallback;
+  }
+  const n = parseFloat(trimmed);
+  return Number.isFinite(n) ? n : fallback;
+}
+function parseDurationMs(raw, fallbackMs) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw !== "string") return fallbackMs;
+  const trimmed = raw.trim();
+  if (!trimmed) return fallbackMs;
+  if (trimmed.endsWith("ms")) {
+    const n2 = parseFloat(trimmed.slice(0, -2));
+    return Number.isFinite(n2) ? n2 : fallbackMs;
+  }
+  if (trimmed.endsWith("s")) {
+    const n2 = parseFloat(trimmed.slice(0, -1));
+    return Number.isFinite(n2) ? n2 * 1e3 : fallbackMs;
+  }
+  const n = parseFloat(trimmed);
+  return Number.isFinite(n) ? n : fallbackMs;
+}
+function buildImportDescription(head, sourceUrl) {
+  if (typeof sourceUrl === "string" && sourceUrl.trim().length > 0) {
+    return `${head}
+Source: ${sourceUrl.trim()}`;
+  }
+  return head;
+}
 
 // src/se-import/mappers/provider-alerts.ts
+import { LumiaAlertValues } from "@lumiastream/lumia-types";
 var ALERT_BOX_KEYS = {
   twitch: {
-    follower: ["twitch-follower"],
-    subscriber: ["twitch-subscriber"],
-    tip: ["lumiastream-donation", "streamelements-donation"],
-    cheer: ["twitch-bits"],
-    raid: ["twitch-raid"],
-    merch: ["fourthwall-shopOrder"],
-    purchase: ["fourthwall-shopOrder"],
-    charityCampaignDonation: ["twitch-charityDonation"]
+    follower: [LumiaAlertValues.TWITCH_FOLLOWER],
+    subscriber: [LumiaAlertValues.TWITCH_SUBSCRIBER],
+    tip: [LumiaAlertValues.LUMIASTREAM_DONATION, LumiaAlertValues.STREAMELEMENTS_DONATION],
+    cheer: [LumiaAlertValues.TWITCH_BITS],
+    raid: [LumiaAlertValues.TWITCH_RAID],
+    merch: [LumiaAlertValues.FOURTHWALL_SHOPORDER],
+    purchase: [LumiaAlertValues.FOURTHWALL_SHOPORDER],
+    charityCampaignDonation: [LumiaAlertValues.TWITCH_CHARITY_DONATION]
   },
   kick: {
-    follower: ["kick-follower"],
-    subscriber: ["kick-subscriber"],
-    tip: ["lumiastream-donation", "streamelements-donation"],
-    cheer: ["kick-kicks"],
-    raid: ["kick-host"],
-    host: ["kick-host"],
-    merch: ["fourthwall-shopOrder"],
-    purchase: ["fourthwall-shopOrder"]
+    follower: [LumiaAlertValues.KICK_FOLLOWER],
+    subscriber: [LumiaAlertValues.KICK_SUBSCRIBER],
+    tip: [LumiaAlertValues.LUMIASTREAM_DONATION, LumiaAlertValues.STREAMELEMENTS_DONATION],
+    cheer: [LumiaAlertValues.KICK_KICKS],
+    raid: [LumiaAlertValues.KICK_HOST],
+    host: [LumiaAlertValues.KICK_HOST],
+    merch: [LumiaAlertValues.FOURTHWALL_SHOPORDER],
+    purchase: [LumiaAlertValues.FOURTHWALL_SHOPORDER]
   },
   youtube: {
-    follower: ["youtube-subscriber"],
-    subscriber: ["youtube-member"],
-    tip: ["lumiastream-donation", "streamelements-donation"],
-    cheer: ["youtube-superchat"],
-    merch: ["fourthwall-shopOrder"],
-    purchase: ["fourthwall-shopOrder"]
+    follower: [LumiaAlertValues.YOUTUBE_SUBSCRIBER],
+    subscriber: [LumiaAlertValues.YOUTUBE_MEMBER],
+    tip: [LumiaAlertValues.LUMIASTREAM_DONATION, LumiaAlertValues.STREAMELEMENTS_DONATION],
+    cheer: [LumiaAlertValues.YOUTUBE_SUPERCHAT],
+    merch: [LumiaAlertValues.FOURTHWALL_SHOPORDER],
+    purchase: [LumiaAlertValues.FOURTHWALL_SHOPORDER]
   }
 };
 var KAPPAGEN_KEYS = {
   twitch: {
-    follower: "twitch-follower",
-    subscriber: "twitch-subscriber",
-    cheer: "twitch-bits",
-    raid: "twitch-raid",
-    tip: "lumiastream-donation"
+    follower: LumiaAlertValues.TWITCH_FOLLOWER,
+    subscriber: LumiaAlertValues.TWITCH_SUBSCRIBER,
+    cheer: LumiaAlertValues.TWITCH_BITS,
+    raid: LumiaAlertValues.TWITCH_RAID,
+    tip: LumiaAlertValues.LUMIASTREAM_DONATION
   },
   kick: {
-    follower: "kick-follower",
-    subscriber: "kick-subscriber",
-    cheer: "kick-kicks",
-    raid: "kick-host",
-    tip: "lumiastream-donation"
+    follower: LumiaAlertValues.KICK_FOLLOWER,
+    subscriber: LumiaAlertValues.KICK_SUBSCRIBER,
+    cheer: LumiaAlertValues.KICK_KICKS,
+    raid: LumiaAlertValues.KICK_HOST,
+    tip: LumiaAlertValues.LUMIASTREAM_DONATION
   },
   youtube: {
-    follower: "youtube-subscriber",
-    subscriber: "youtube-member",
-    cheer: "youtube-superchat",
-    tip: "lumiastream-donation"
+    follower: LumiaAlertValues.YOUTUBE_SUBSCRIBER,
+    subscriber: LumiaAlertValues.YOUTUBE_MEMBER,
+    cheer: LumiaAlertValues.YOUTUBE_SUPERCHAT,
+    tip: LumiaAlertValues.LUMIASTREAM_DONATION
   }
 };
 var STREAMBOSS_LISTENER_KEYS = {
   twitch: {
-    "follower-latest": ["twitch-follower"],
-    "subscriber-latest": ["twitch-subscriber"],
-    "tip-latest": ["lumiastream-donation", "streamelements-donation"],
-    "cheer-latest": ["twitch-bits"],
-    "raid-latest": ["twitch-raid"]
+    "follower-latest": [LumiaAlertValues.TWITCH_FOLLOWER],
+    "subscriber-latest": [LumiaAlertValues.TWITCH_SUBSCRIBER],
+    "tip-latest": [LumiaAlertValues.LUMIASTREAM_DONATION, LumiaAlertValues.STREAMELEMENTS_DONATION],
+    "cheer-latest": [LumiaAlertValues.TWITCH_BITS],
+    "raid-latest": [LumiaAlertValues.TWITCH_RAID]
   },
   kick: {
-    "follower-latest": ["kick-follower"],
-    "subscriber-latest": ["kick-subscriber"],
-    "tip-latest": ["lumiastream-donation", "streamelements-donation"],
-    "cheer-latest": ["kick-kicks"],
-    "raid-latest": ["kick-host"]
+    "follower-latest": [LumiaAlertValues.KICK_FOLLOWER],
+    "subscriber-latest": [LumiaAlertValues.KICK_SUBSCRIBER],
+    "tip-latest": [LumiaAlertValues.LUMIASTREAM_DONATION, LumiaAlertValues.STREAMELEMENTS_DONATION],
+    "cheer-latest": [LumiaAlertValues.KICK_KICKS],
+    "raid-latest": [LumiaAlertValues.KICK_HOST]
   },
   youtube: {
-    "follower-latest": ["youtube-subscriber"],
-    "subscriber-latest": ["youtube-member"],
-    "tip-latest": ["lumiastream-donation", "streamelements-donation"],
-    "cheer-latest": ["youtube-superchat"]
+    "follower-latest": [LumiaAlertValues.YOUTUBE_SUBSCRIBER],
+    "subscriber-latest": [LumiaAlertValues.YOUTUBE_MEMBER],
+    "tip-latest": [LumiaAlertValues.LUMIASTREAM_DONATION, LumiaAlertValues.STREAMELEMENTS_DONATION],
+    "cheer-latest": [LumiaAlertValues.YOUTUBE_SUPERCHAT]
   }
 };
 var CURATED_ALERTS = {
   twitch: [
-    "twitch-follower",
-    "twitch-subscriber",
-    "twitch-giftSubscription",
-    "twitch-bits",
-    "twitch-bitsCombo",
-    "twitch-raid",
-    "twitch-points",
-    "twitch-redemption",
-    "twitch-charityDonation",
-    "twitch-hypetrainStarted",
-    "twitch-clip",
-    "twitch-shoutoutReceive",
-    "twitch-watchStreak",
-    "twitch-firstChatter",
-    "twitch-extension"
+    LumiaAlertValues.TWITCH_FOLLOWER,
+    LumiaAlertValues.TWITCH_SUBSCRIBER,
+    LumiaAlertValues.TWITCH_GIFT_SUBSCRIPTION,
+    LumiaAlertValues.TWITCH_BITS,
+    LumiaAlertValues.TWITCH_BITS_COMBO,
+    LumiaAlertValues.TWITCH_RAID,
+    LumiaAlertValues.TWITCH_POINTS,
+    LumiaAlertValues.TWITCH_REDEMPTION,
+    LumiaAlertValues.TWITCH_CHARITY_DONATION,
+    LumiaAlertValues.TWITCH_HYPETRAIN_STARTED,
+    LumiaAlertValues.TWITCH_CLIP,
+    LumiaAlertValues.TWITCH_SHOUTOUT_RECEIVE,
+    LumiaAlertValues.TWITCH_WATCH_STREAK,
+    LumiaAlertValues.TWITCH_FIRST_CHATTER,
+    LumiaAlertValues.TWITCH_EXTENSION
   ],
   kick: [
-    "kick-follower",
-    "kick-subscriber",
-    "kick-subscriptionGift",
-    "kick-kicks",
-    "kick-host",
-    "kick-points",
-    "kick-firstChatter"
+    LumiaAlertValues.KICK_FOLLOWER,
+    LumiaAlertValues.KICK_SUBSCRIBER,
+    LumiaAlertValues.KICK_GIFT_SUBSCRIPTION,
+    LumiaAlertValues.KICK_KICKS,
+    LumiaAlertValues.KICK_HOST,
+    LumiaAlertValues.KICK_POINTS,
+    LumiaAlertValues.KICK_FIRST_CHATTER
   ],
   youtube: [
-    "youtube-subscriber",
-    "youtube-member",
-    "youtube-giftMembers",
-    "youtube-superchat",
-    "youtube-supersticker",
-    "youtube-gifts",
-    "youtube-like",
-    "youtube-firstChatter"
+    LumiaAlertValues.YOUTUBE_SUBSCRIBER,
+    LumiaAlertValues.YOUTUBE_MEMBER,
+    LumiaAlertValues.YOUTUBE_GIFT_MEMBERS,
+    LumiaAlertValues.YOUTUBE_SUPERCHAT,
+    LumiaAlertValues.YOUTUBE_SUPERSTICKER,
+    LumiaAlertValues.YOUTUBE_GIFTS,
+    LumiaAlertValues.YOUTUBE_LIKE,
+    LumiaAlertValues.YOUTUBE_FIRST_CHATTER
   ]
 };
 function curatedAlertsFor(provider = "twitch") {
@@ -4455,8 +4470,12 @@ function buildAlertEvent(seEvent, seEventType) {
   const shadowEnabled = text.enableShadow !== false;
   const importedTextShadow = css["text-shadow"] ?? "rgba(0, 0, 0, 0.8) 1px 1px 1px";
   const textShadow = shadowEnabled ? importedTextShadow : "none";
-  const marginTopRaw = Number(css["margin-top"]);
-  const pushTextUp = seLayoutUsesPushText(seEvent.layout) && Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
+  const allowPush = seLayoutUsesPushText(seEvent.layout);
+  const pushTextUp = allowPush ? pxToNumber(css["margin-top"], 0) : 0;
+  const pushTextLeft = allowPush ? pxToNumber(css["margin-left"], 0) : 0;
+  const usesColumnLayout = !seEvent.layout || seEvent.layout === "column";
+  const usesRowLayout = seEvent.layout === "row";
+  const tightLayout = allowPush && (usesColumnLayout || usesRowLayout);
   const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType, seEvent)).filter((v) => v != null);
   const defaultDuration = (seEventType && SE_DEFAULT_DURATION_BY_EVENT[seEventType]) ?? 8;
   return {
@@ -4483,7 +4502,7 @@ function buildAlertEvent(seEvent, seEventType) {
       showBrandIcon: true
     },
     settings: { duration: (seEvent.duration ?? defaultDuration) * 1e3 },
-    layout: { value: translateLayout(seEvent.layout), css: {}, customCss: "", pushTextUp, pushTextLeft: 0 },
+    layout: { value: translateLayout(seEvent.layout), css: {}, customCss: "", pushTextUp, pushTextLeft, tight: tightLayout },
     text: {
       css: {
         fontFamily: css["font-family"] ?? "Roboto",
@@ -4492,6 +4511,10 @@ function buildAlertEvent(seEvent, seEventType) {
         fontWeight: css["font-weight"] ?? "bold",
         textShadow,
         textAlign: css["text-align"] ?? "center"
+        // SE's per-event `margin-top` / `margin-left` are routed to
+        // `layout.pushTextUp` / `layout.pushTextLeft` above (not
+        // stamped on `text.css`) so they land in the alert editor's
+        // dedicated sliders. See the long comment near `pushTextUp`.
       },
       messageCss,
       content: { value: translateSeText(text.message ?? "") }
@@ -4561,6 +4584,15 @@ function buildAlertVariation(v, seEventType, parentSettings) {
   const mergedSettings = deepMergeSeSettings(parentSettings ? parentInheritable : void 0, v.settings);
   const base = buildAlertEvent(mergedSettings, seEventType);
   return {
+    // Stable per-variation ID. Lumia's alert editor (Settings.tsx) auto-
+    // stamps a nanoid on first open for any variation missing an id, but
+    // that leaves a window where the imported overlay's variations have
+    // no stable key — list components rendering them key on
+    // `variation.id || variation.name || idx` and adjacent variations
+    // with the same name collide. Stamping at import time gives every
+    // variation a stable identity from save #1 without waiting for the
+    // editor's first mount.
+    id: nanoid2(),
     name: v.name ?? "Variation",
     on: v.enabled !== false,
     randomChance: v.chance ?? 100,
@@ -4644,7 +4676,7 @@ function mapSingleAlert(widget, lumiaAlertKey, ctx) {
       css: { ...topCss, ...innerCss }
     };
   }
-  const built = buildAlertEvent(merged);
+  const built = buildAlertEvent(merged, void 0);
   const events = {
     [lumiaAlertKey]: built
   };
@@ -4790,7 +4822,7 @@ function mapGoal(widget, ctx) {
 }
 
 // src/se-import/mappers/custom.ts
-import { nanoid as nanoid2 } from "nanoid";
+import { nanoid as nanoid3 } from "nanoid";
 var SOURCE_TO_LUMIA_FIELD_TYPE = {
   text: "input",
   number: "number",
@@ -4880,7 +4912,7 @@ function mapCustom(widget, ctx) {
         // imports — codeId is the scoping key for variables, storage, and
         // event listeners. Mint a fresh nanoid so every imported widget
         // has its own scope.
-        codeId: nanoid2(),
+        codeId: nanoid3(),
         html: v.html ?? "",
         css: v.css ?? "",
         js: v.js ?? "",
@@ -5017,6 +5049,63 @@ var TIPJAR_DEFAULT_MODULE = {
   version: 1,
   content: TIPJAR_DEFAULT_CONTENT_FIELDS
 };
+var EVENTLIST_DEFAULT_CONTENT_FIELDS = {
+  version: 2,
+  eventListType: {},
+  theme: "basic",
+  themeConfig: {},
+  borderRadius: "10px",
+  condensedText: true,
+  src: "",
+  // Category blacklist — events whose Lumia type appears here are
+  // hidden. SL `show_<type>: false` maps to inserting the equivalent
+  // Lumia category here.
+  filters: [],
+  sites: [],
+  maxItemsToShow: 20,
+  removeAfter: 0,
+  reverse: false,
+  horizontal: false,
+  animations: {
+    enterAnimation: "fadeIn",
+    exitAnimation: "fadeOut",
+    enterAnimationDuration: 1e3,
+    exitAnimationDuration: 1e3,
+    enterAnimationDelay: 0,
+    exitAnimationDelay: 0
+  },
+  showDetailedText: true,
+  hideAlertMessage: false,
+  showAlertIcon: true,
+  showSiteIcon: false,
+  showUserAvatar: false,
+  fadeOutAfterDelay: false,
+  fadeOutDelayTime: 5,
+  image: "",
+  itemGap: 16,
+  audio: {
+    enter: "",
+    volume: 1
+  }
+};
+var EVENTLIST_DEFAULT_MODULE = {
+  version: 2,
+  content: EVENTLIST_DEFAULT_CONTENT_FIELDS,
+  css: {
+    borderRadius: "0px",
+    borderStyle: "solid",
+    borderWidth: "0px",
+    borderColor: "transparent",
+    fontSize: 16,
+    lineHeight: 1.2,
+    textAlign: "left",
+    fontFamily: "Roboto",
+    fontWeight: "normal",
+    color: "#ffffff",
+    textShadow: "",
+    background: "transparent"
+  }
+};
 
 // src/se-import/mappers/misc.ts
 function mapChatboxTheme(seTheme) {
@@ -5303,7 +5392,11 @@ function mapEventList(widget, ctx) {
         ...isMarquee ? { marqueeItemGap: 24 } : {},
         showAlertIcon: !isMarquee,
         showSiteIcon: !isMarquee,
-        showUserAvatar: true,
+        // SE event lists are text-only (`{name}: {amount}` rows for tip-recent,
+        // follower-recent, etc.) — no avatar column. Mirror that on import so
+        // the streamer's layout matches what they had in SE; they can re-enable
+        // avatars from the Eventlist settings panel if they want.
+        showUserAvatar: false,
         showDetailedText: false,
         hideAlertMessage: false
       }
@@ -6966,11 +7059,6 @@ function rewriteAssetURLs(overlay, mapping) {
   };
 }
 var MAX_MIRROR_ASSET_BYTES = 100 * 1024 * 1024;
-function looksLikeCorsError2(err) {
-  if (!(err instanceof TypeError)) return false;
-  const msg = (err.message ?? "").toLowerCase();
-  return msg.includes("failed to fetch") || msg.includes("networkerror") || msg.includes("network error") || msg.includes("cors") || msg.includes("access-control") || err.message.length > 0;
-}
 async function mirrorOneAsset(url, upload, signal, proxyAssetFetch) {
   const blob = await fetchAssetBlob(url, signal, proxyAssetFetch);
   if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
@@ -7002,7 +7090,7 @@ async function fetchAssetBlob(url, signal, proxyAssetFetch) {
     return res.blob();
   }
   if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
-  if (proxyAssetFetch && looksLikeCorsError2(directErr)) {
+  if (proxyAssetFetch && looksLikeCorsError(directErr)) {
     try {
       return await proxyAssetFetch(url);
     } catch (proxyErr) {
@@ -7053,7 +7141,7 @@ function guessMime(name) {
 }
 
 // src/se-import/transplant.ts
-import { nanoid as nanoid3 } from "nanoid";
+import { nanoid as nanoid4 } from "nanoid";
 function cloneModuleForTransplant(srcModule, newId) {
   const clonedContent = srcModule.content ? structuredClone(srcModule.content) : srcModule.content;
   if (srcModule.settings?.type === "custom" && clonedContent) {
@@ -7071,7 +7159,7 @@ function transplantLayer(source, sourceLayerId) {
   const srcLayer = layers.find((l) => l.id === sourceLayerId);
   const srcModule = modules[sourceLayerId];
   if (!srcLayer || !srcModule) return null;
-  const rootNewId = nanoid3();
+  const rootNewId = nanoid4();
   if (srcLayer.type !== "group") {
     const layer = { ...srcLayer, id: rootNewId };
     const module = cloneModuleForTransplant(srcModule, rootNewId);
@@ -7089,7 +7177,7 @@ function transplantLayer(source, sourceLayerId) {
       if (seen.has(child.id)) continue;
       seen.add(child.id);
       descendants.push(child);
-      idRemap.set(child.id, nanoid3());
+      idRemap.set(child.id, nanoid4());
       if (child.type === "group") queue.push(child.id);
     }
   }
@@ -7593,7 +7681,74 @@ function readSLProvider(response) {
 }
 
 // src/sl-import/mappers/alert-box.ts
-import { nanoid as nanoid4 } from "nanoid";
+import { nanoid as nanoid6 } from "nanoid";
+import { LumiaAlertValues as LumiaAlertValues2 } from "@lumiastream/lumia-types";
+
+// src/se-import/import-envelope.ts
+import { nanoid as nanoid5 } from "nanoid";
+function buildModuleEnvelope(opts) {
+  const id = opts.id ?? nanoid5();
+  const locked = opts.locked ?? false;
+  const visible = opts.visible ?? true;
+  const layer = {
+    id,
+    ...opts.parentGroupId !== void 0 ? { group: opts.parentGroupId } : {},
+    ...opts.type_layer ? { type: opts.type_layer } : {},
+    state: {
+      visible,
+      locked,
+      ...opts.expanded !== void 0 ? { expanded: opts.expanded } : {}
+    },
+    bounds: {
+      x: opts.bounds.x,
+      y: opts.bounds.y,
+      width: opts.bounds.width,
+      height: opts.bounds.height,
+      scale: [1, 1],
+      ...opts.zIndex !== void 0 ? { zIndex: opts.zIndex } : {}
+    }
+  };
+  const module = {
+    id,
+    version: opts.version ?? 1,
+    loaded: true,
+    settings: { type: opts.type, title: opts.title, locked },
+    lights: opts.lights ?? [],
+    css: opts.css ?? {},
+    content: opts.content ?? {},
+    variables: opts.variables ?? {},
+    events: opts.events ?? {},
+    ...opts.alert !== void 0 ? { alert: opts.alert } : {}
+  };
+  return { id, layer, module };
+}
+var IMPORT_META_KEY = "importMeta";
+function stampImportMetaMerge(module, meta) {
+  const existing = module.content?.[IMPORT_META_KEY] ?? {};
+  module.content = {
+    ...module.content ?? {},
+    [IMPORT_META_KEY]: {
+      importedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      ...existing,
+      ...meta
+    }
+  };
+}
+function customHtmlReviewItem(moduleId, importSourceType, settings, reason) {
+  return {
+    moduleId,
+    // ReviewItem's `seWidget` is typed against SEWidget but the review
+    // UI just reads `.type` and `.settings`. Cast through unknown is
+    // the only place we touch the shape mismatch; widening the
+    // ReviewItem type is a future cleanup.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    seWidget: { type: importSourceType, settings },
+    status: "template",
+    reason
+  };
+}
+
+// src/sl-import/mappers/alert-box.ts
 var SL_EVENT_ROUTING = {
   // Platform-native — provider routes (Twitch / Kick / YouTube).
   follow: { pickProviderKeys: "follower" },
@@ -7605,47 +7760,35 @@ var SL_EVENT_ROUTING = {
   // `subscriber` here is YouTube subscribe (free); `sponsor` is YouTube
   // channel membership; `fanfunding` is YouTube superchat. SL ships these
   // even on Twitch-primary accounts so we always map them.
-  subscriber: { keys: ["youtube-subscriber"] },
-  sponsor: { keys: ["youtube-member"] },
-  fanfunding: { keys: ["youtube-superchat"] },
-  super_sticker: { keys: ["youtube-supersticker"] },
+  subscriber: { keys: [LumiaAlertValues2.YOUTUBE_SUBSCRIBER] },
+  sponsor: { keys: [LumiaAlertValues2.YOUTUBE_MEMBER] },
+  fanfunding: { keys: [LumiaAlertValues2.YOUTUBE_SUPERCHAT] },
+  super_sticker: { keys: [LumiaAlertValues2.YOUTUBE_SUPERSTICKER] },
   // Donation / tip channels — Lumia ships dedicated alert keys for each
   // integration. `donation` itself fans out to `streamlabs-donation` AND
   // `lumiastream-donation` so the imported alert fires regardless of which
   // channel the donation actually came in on.
-  donation: { keys: ["streamlabs-donation", "lumiastream-donation"] },
-  eldonation: { keys: ["extralife-donation"] },
-  tiltifydonation: { keys: ["tiltify-campaignDonation"] },
-  donordrivedonation: { keys: ["donordrive-donation"] },
-  justgivingdonation: { keys: ["streamlabs-donation"] },
-  pledge: { keys: ["patreon-campaignPledge"] },
+  donation: { keys: [LumiaAlertValues2.STREAMLABS_DONATION, LumiaAlertValues2.LUMIASTREAM_DONATION] },
+  eldonation: { keys: [LumiaAlertValues2.EXTRALIFE_DONATION] },
+  tiltifydonation: { keys: [LumiaAlertValues2.TILTIFY_DONATION] },
+  donordrivedonation: { keys: [LumiaAlertValues2.DONORDRIVE_DONATION] },
+  justgivingdonation: { keys: [LumiaAlertValues2.STREAMLABS_DONATION] },
+  pledge: { keys: [LumiaAlertValues2.PATREON_PLEDGE] },
   // Charity / merch / loyalty / prime gifting — SL-flavored channels with
   // matching Lumia keys.
-  streamlabscharitydonation: { keys: ["streamlabs-charity"] },
-  twitchcharitydonation: { keys: ["twitch-charityDonation"] },
-  merch: { keys: ["streamlabs-merch"] },
-  loyalty_store_redemption: { keys: ["streamlabs-redemption"] },
-  prime_sub_gift: { keys: ["streamlabs-primegift"] },
-  treat: { keys: ["treatstream-treat"] },
+  streamlabscharitydonation: { keys: [LumiaAlertValues2.STREAMLABS_CHARITY] },
+  twitchcharitydonation: { keys: [LumiaAlertValues2.TWITCH_CHARITY_DONATION] },
+  merch: { keys: [LumiaAlertValues2.STREAMLABS_MERCH] },
+  loyalty_store_redemption: { keys: [LumiaAlertValues2.STREAMLABS_REDEMPTION] },
+  prime_sub_gift: { keys: [LumiaAlertValues2.STREAMLABS_PRIMEGIFT] },
+  treat: { keys: [LumiaAlertValues2.TREATSTREAM_TREAT] },
   // TikTok-flavored (jewel gift is TikTok-ish in concept).
-  jewel_gift: { keys: ["tiktok-gift"] }
+  jewel_gift: { keys: [LumiaAlertValues2.TIKTOK_GIFT] }
 };
 function getField(settings, prefix, field) {
   const key = `${prefix}_${field}`;
   return settings[key];
 }
-function pxToNumber(raw, fallback) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw !== "string") return fallback;
-  const trimmed = raw.trim();
-  if (!trimmed) return fallback;
-  if (trimmed.endsWith("px")) {
-    const n2 = parseFloat(trimmed.slice(0, -2));
-    return Number.isFinite(n2) ? n2 : fallback;
-  }
-  const n = parseFloat(trimmed);
-  return Number.isFinite(n) ? n : fallback;
-}
 function translateLayout2(slLayout) {
   switch (slLayout) {
     case "above":
@@ -7755,9 +7898,7 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
     tts: {
       enabled: getField(settings, prefix, "tts_enabled") ?? false,
       voice: getField(settings, prefix, "tts_language") ?? "Brian",
-      volume: clampVolume(
-        getField(settings, prefix, "tts_volume") ?? 75
-      ),
+      volume: clampVolume(getField(settings, prefix, "tts_volume") ?? 75),
       minAmount: getField(settings, prefix, "tts_min_amount") ?? 0
     },
     variations: []
@@ -7772,10 +7913,7 @@ function readSecondaryMessageConfig(settings, prefix, primaryFontFamily) {
   const enabled = settings[showKey];
   if (enabled !== true) return null;
   const fontFamily = getField(settings, secondaryPrefix, "message_font") ?? primaryFontFamily;
-  const fontSize = pxToNumber(
-    getField(settings, secondaryPrefix, "message_font_size"),
-    20
-  );
+  const fontSize = pxToNumber(getField(settings, secondaryPrefix, "message_font_size"), 20);
   const fontWeight = getField(settings, secondaryPrefix, "message_font_weight") ?? 400;
   const fontColor = getField(settings, secondaryPrefix, "message_font_color") ?? "#FFFFFF";
   return {
@@ -7802,11 +7940,20 @@ function translateSLVariationCondition(v) {
   const numericData = typeof data === "number" ? data : Number(data);
   switch (v.condition) {
     case "RANDOM":
-      return { conditionType: "RANDOM", condition: Number.isFinite(numericData) ? numericData : 100 };
+      return {
+        conditionType: "RANDOM",
+        condition: Number.isFinite(numericData) ? numericData : 100
+      };
     case "MIN_BITS_USED":
-      return { conditionType: "GREATER_NUMBER", condition: Number.isFinite(numericData) ? numericData : 0 };
+      return {
+        conditionType: "GREATER_NUMBER",
+        condition: Number.isFinite(numericData) ? numericData : 0
+      };
     case "EXACT_BITS_USED":
-      return { conditionType: "EQUAL_NUMBER", condition: Number.isFinite(numericData) ? numericData : 0 };
+      return {
+        conditionType: "EQUAL_NUMBER",
+        condition: Number.isFinite(numericData) ? numericData : 0
+      };
     case "MIN_MONTHS_SUBSCRIBED":
       return {
         conditionType: "SUBSCRIBED_MONTHS_GREATER",
@@ -7871,6 +8018,14 @@ function buildVariationEvent(v, parentBase) {
   if (s.hideAnimation) inherited.animations.alertExitAnimation = s.hideAnimation;
   if (s.layout) inherited.layout.value = translateLayout2(s.layout);
   return {
+    // Reuse SL's own `uuid` when present so re-importing the same SL
+    // alert-box keeps the variation identity stable across import
+    // runs. SL always emits a uuid in their config (every fixture we've
+    // seen has one); fall back to nanoid for the edge case of a
+    // hand-crafted / older payload that omits it. Matches the SE
+    // alert mapper's variation-id pattern — see Settings.tsx auto-fill
+    // note there for why a stable id matters from save #1.
+    id: typeof v.uuid === "string" && v.uuid.length > 0 ? v.uuid : nanoid6(),
     name: v.name ?? "Variation",
     on: v.paused !== true,
     randomChance: 100,
@@ -7936,11 +8091,7 @@ function buildSLAlertBox(settings, options = {}) {
   for (const [prefix, routing] of Object.entries(SL_EVENT_ROUTING)) {
     const lumiaKeys = routing.pickProviderKeys ? alertBoxKeysFor(routing.pickProviderKeys, provider) : routing.keys ?? [];
     if (lumiaKeys.length === 0) continue;
-    const built = buildBaseAlertEvent(
-      settings,
-      prefix,
-      DEFAULT_MESSAGES[prefix] ?? "{name}"
-    );
+    const built = buildBaseAlertEvent(settings, prefix, DEFAULT_MESSAGES[prefix] ?? "{name}");
     if (!built) continue;
     const variationKey = VARIATION_KEY_FOR_PREFIX[prefix];
     const variations = variationKey ? settings[variationKey] : void 0;
@@ -7957,53 +8108,32 @@ function buildSLAlertBox(settings, options = {}) {
     channelsImported.push(prefix);
     if (firstEvent == null) firstEvent = built;
   }
-  const id = nanoid4();
-  const layer = {
-    id,
-    state: { visible: true, locked: false },
-    bounds: { x: 100, y: 100, width: 700, height: 600, scale: [1, 1] }
-  };
   const baseAlert = firstEvent ? stripEventOnlyFields(firstEvent) : {};
-  const module = {
-    id,
-    version: 1,
-    loaded: true,
-    settings: { type: "alert", title: "Streamlabs Alerts", locked: false },
-    lights: [],
-    css: {},
-    content: {},
-    variables: {},
-    events: {},
+  const { layer, module } = buildModuleEnvelope({
+    type: "alert",
+    title: "Streamlabs Alerts",
+    bounds: { x: 100, y: 100, width: 700, height: 600 },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     alert: { ...baseAlert, events }
-  };
+  });
   return { layer, module, channelsImported };
 }
 function stripEventOnlyFields(event) {
-  const { on: _on, variations: _variations, matchEmptyCondition: _mec, ...base } = event;
+  const {
+    on: _on,
+    variations: _variations,
+    matchEmptyCondition: _mec,
+    ...base
+  } = event;
   return base;
 }
 
 // src/sl-import/mappers/tip-jar.ts
-import { nanoid as nanoid5 } from "nanoid";
-function pxToNumber2(raw, fallback) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw !== "string") return fallback;
-  const trimmed = raw.trim();
-  if (!trimmed) return fallback;
-  if (trimmed.endsWith("px")) {
-    const n2 = parseFloat(trimmed.slice(0, -2));
-    return Number.isFinite(n2) ? n2 : fallback;
-  }
-  const n = parseFloat(trimmed);
-  return Number.isFinite(n) ? n : fallback;
-}
 function buildSLTipJar(settings) {
-  const id = nanoid5();
   const backgroundColor = settings.background?.color ?? "transparent";
   const textColor = settings.text?.color ?? "#FFFFFF";
   const fontFamily = settings.text?.font ?? "Open Sans";
-  const fontSize = pxToNumber2(settings.text?.size, 32);
+  const fontSize = pxToNumber(settings.text?.size, 32);
   const types = settings.types ?? {};
   const tipsConfig = types.tips ?? {};
   const slEvents = {
@@ -8019,17 +8149,11 @@ function buildSLTipJar(settings) {
     ...TIPJAR_DEFAULT_MODULE.content.display,
     showEventMessages: settings.text?.show !== false
   };
-  const layer = {
-    id,
-    state: { visible: true, locked: false },
-    bounds: { x: 100, y: 100, width: 600, height: 700, scale: [1, 1] }
-  };
-  const module = {
-    id,
+  const { layer, module } = buildModuleEnvelope({
+    type: "tipjar",
+    title: "Streamlabs Tip Jar",
+    bounds: { x: 100, y: 100, width: 600, height: 700 },
     version: TIPJAR_DEFAULT_MODULE.version,
-    loaded: true,
-    settings: { type: "tipjar", title: "Streamlabs Tip Jar", locked: false },
-    lights: [],
     css: {
       fontFamily,
       fontSize,
@@ -8050,12 +8174,7 @@ function buildSLTipJar(settings) {
         source: "streamlabs",
         widgetType: "tip_jar",
         importedAt: (/* @__PURE__ */ new Date()).toISOString(),
-        // SL jar type doesn't have a 1:1 mapping to Lumia's preset
-        // vocabulary (cup-01, cup-02, …). Stashed for review.
         slJarType: settings.jar?.type ?? null,
-        // SL tier coin tiers — Lumia's sprite tiers are per-event and
-        // configured in the sprite editor; the user re-creates these
-        // manually. Stored here so they're not lost.
         slTipTiers: Array.isArray(tipsConfig.tiers) ? tipsConfig.tiers.map((t) => ({
           minimumAmount: t.minimum_amount,
           imageSrc: t.image_src ?? null
@@ -8063,15 +8182,12 @@ function buildSLTipJar(settings) {
         slMinimumTipAmount: tipsConfig.minimum_amount ?? null,
         slHadCustomHtml: settings.custom_html_enabled === true
       }
-    },
-    variables: {},
-    events: {}
-  };
+    }
+  });
   return { layer, module };
 }
 
 // src/sl-import/mappers/goal.ts
-import { nanoid as nanoid6 } from "nanoid";
 var GOAL_SOURCE_MAP = {
   follower_goal: "follower",
   sub_goal: "subscriber",
@@ -8084,69 +8200,262 @@ var GOAL_TITLE_MAP = {
   donation_goal: "Donation Goal",
   bit_goal: "Bits Goal"
 };
-function pxToNumber3(raw, fallback) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw !== "string") return fallback;
-  const trimmed = raw.trim();
-  if (!trimmed) return fallback;
-  if (trimmed.endsWith("px")) {
-    const n2 = parseFloat(trimmed.slice(0, -2));
-    return Number.isFinite(n2) ? n2 : fallback;
-  }
-  const n = parseFloat(trimmed);
-  return Number.isFinite(n) ? n : fallback;
-}
+var GOAL_CURRENT_TEMPLATE = {
+  follower_goal: "{{twitch_total_follower_count}}",
+  sub_goal: "{{twitch_total_subscriber_count}}",
+  donation_goal: "{{total_donation_amount}}",
+  bit_goal: "{{twitch_total_bits_count}}"
+};
 function buildSLGoal(settings, widgetType) {
-  const id = nanoid6();
   const goalSource = GOAL_SOURCE_MAP[widgetType] ?? "follower";
   const defaultTitle = GOAL_TITLE_MAP[widgetType] ?? "Goal";
+  const currentTemplate = GOAL_CURRENT_TEMPLATE[widgetType] ?? "";
+  const requiresReview = settings.custom_enabled === true;
   const title = typeof settings.title === "string" ? settings.title : defaultTitle;
   const goalAmount = typeof settings.goal === "number" ? settings.goal : 100;
   const currentAmount = typeof settings.current === "number" ? settings.current : 0;
   const startingAmount = typeof settings.starting_amount === "number" ? settings.starting_amount : 0;
-  const endsAt = typeof settings.ends_at === "string" ? settings.ends_at : null;
+  const endsAt = typeof settings.ends_at === "string" ? settings.ends_at : "";
   const barColor = settings.bar_color ?? "#32C3A6";
-  const barBackgroundColor = settings.bar_background_color ?? "#181818";
+  const barBgColor = settings.bar_bg_color ?? "#181818";
+  const widgetBgColor = settings.background_color ?? "transparent";
   const textColor = settings.text_color ?? "#FFFFFF";
   const barTextColor = settings.bar_text_color ?? textColor;
   const fontFamily = settings.font ?? "Open Sans";
-  const layer = {
-    id,
-    state: { visible: true, locked: false },
-    bounds: { x: 100, y: 100, width: 740, height: 90, scale: [1, 1] }
-  };
-  const module = {
-    id,
-    version: 1,
-    loaded: true,
-    settings: { type: "goal", title, locked: false },
-    lights: [],
+  const fontSize = pxToNumber(settings.font_size, 24);
+  const barThickness = pxToNumber(settings.bar_thickness, 48);
+  const layerHeight = Math.max(60, barThickness + 32);
+  const { layer, module } = buildModuleEnvelope({
+    type: "goal",
+    title,
+    bounds: { x: 100, y: 100, width: 740, height: layerHeight },
     css: {
       fontFamily,
       color: textColor,
-      background: barBackgroundColor
+      background: widgetBgColor,
+      fontSize
     },
+    // Use Lumia's canonical goal field names — `targetGoal` (string),
+    // `current` (template string), `display`, `filledColor` /
+    // `unfilledColor`. The prior schema used invented field names
+    // (`goalAmount`, `barColor`) that the renderer ignored.
     content: {
-      title,
-      goalSource,
-      goalAmount,
-      currentAmount,
-      startingAmount,
-      endsAt,
-      barColor,
-      barBackgroundColor,
-      barTextColor,
-      fontFamily,
-      fontSize: pxToNumber3(settings.font_size, 24)
+      version: 1,
+      type: "bar",
+      label: title,
+      subLabel: "",
+      display: "{{current}} / {{goal}}",
+      current: currentAmount > 0 ? String(currentAmount) : currentTemplate,
+      targetGoal: String(goalAmount),
+      image: "",
+      audio: {
+        decrement: "",
+        increment: "",
+        goal: "",
+        goalFailed: "",
+        volume: 1
+      },
+      endDate: endsAt,
+      goalAnimation: "",
+      goalAnimationLoop: true,
+      unfilledColor: barBgColor,
+      filledColor: barColor,
+      alignItemsToEdges: false,
+      border: "solid 1px transparent",
+      borderRadius: "40px",
+      highlightColor: "inherit",
+      importMeta: {
+        source: "streamlabs",
+        widgetType,
+        importedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        goalSource,
+        slLayout: settings.layout ?? null,
+        slBarTextColor: barTextColor,
+        slBarThickness: barThickness,
+        slStartingAmount: startingAmount,
+        slHadCustomHtml: settings.custom_enabled === true
+      }
+    }
+  });
+  return { layer, module, requiresReview };
+}
+
+// src/sl-import/mappers/chat-box.ts
+function buildSitesArray(settings) {
+  const defaultSites = [...CHATBOX_DEFAULT_MODULE.content.sites];
+  const drop = /* @__PURE__ */ new Set();
+  if (settings.show_bttv_emotes === false) drop.add("bttv");
+  if (settings.show_franker_emotes === false) drop.add("ffz");
+  if (settings.show_7tv_emotes === false) drop.add("seventv");
+  if (settings.twitch_enabled === false) drop.add("twitch");
+  if (settings.youtube_enabled === false) drop.add("youtube");
+  if (settings.facebook_enabled === false) drop.add("facebook");
+  if (settings.tiktok_enabled === false) drop.add("tiktok");
+  if (settings.kick_enabled === false) drop.add("kick");
+  if (drop.size === 0) return defaultSites;
+  return defaultSites.filter((s) => !drop.has(s));
+}
+function buildSLChatBox(settings) {
+  const requiresReview = settings.custom_enabled === true;
+  const backgroundColor = settings.background_color ?? "transparent";
+  const textColor = settings.text_color ?? "#FFFFFF";
+  const textSize = pxToNumber(settings.text_size, 16);
+  const fadeOutAfterDelay = settings.always_show_messages !== true;
+  const fadeOutDelayTime = fadeOutAfterDelay ? Math.max(1, Math.round((settings.message_hide_delay ?? 15e3) / 1e3)) : 0;
+  const sites = buildSitesArray(settings);
+  const { layer, module } = buildModuleEnvelope({
+    type: "chatbox",
+    title: "Streamlabs Chat Box",
+    bounds: { x: 100, y: 100, width: 375, height: 470 },
+    version: CHATBOX_DEFAULT_MODULE.version,
+    css: {
+      background: backgroundColor,
+      color: textColor,
+      fontSize: textSize
     },
-    variables: {},
-    events: {}
-  };
-  return { layer, module };
+    content: {
+      // Spread canonical defaults FIRST so the renderer's dereferences
+      // (chatboxStreamingSite.<platform>.themeConfig, animations,
+      // chatboxStreamingSite.<platform>.message, etc.) all exist.
+      ...CHATBOX_DEFAULT_MODULE.content,
+      // Then override the bits SL controls.
+      sites,
+      fadeOutAfterDelay,
+      fadeOutDelayTime,
+      // SL keeps history forever by default — `always_show_messages`
+      // implies the streamer wants a permanent scrollback. Lumia
+      // exposes that as `permanent: true`.
+      permanent: settings.always_show_messages === true,
+      // Preserve the SL-specific provenance for the review step.
+      importMeta: {
+        source: "streamlabs",
+        widgetType: "chat_box",
+        importedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        slTheme: settings.theme ?? null,
+        slHadCustomHtml: settings.custom_enabled === true,
+        slHidesCommonBots: settings.hide_common_chat_bots === true,
+        slHidesCommands: settings.hide_commands === true,
+        slMutedChatters: settings.muted_chatters ?? "",
+        slMessageShowDelayMs: settings.message_show_delay ?? 0
+      }
+    }
+  });
+  return { layer, module, requiresReview };
+}
+
+// src/sl-import/mappers/event-list.ts
+var SL_SHOW_FLAG_TO_LUMIA_FILTER = {
+  show_follows: "follower",
+  show_subscriptions: "subscribers",
+  show_resubs: "subscribers",
+  show_sub_gifts: "gifts",
+  show_subscribers: "subscribers",
+  show_sponsors: "subscribers",
+  // YouTube channel members
+  show_sponsor_gifts: "gifts",
+  show_bits: "bits",
+  show_donations: "donation",
+  show_pledges: "donation",
+  // Patreon
+  show_eldonations: "donation",
+  show_tiltifydonations: "donation",
+  show_donordrivedonations: "donation",
+  show_justgivingdonations: "donation",
+  show_streamlabscharitydonations: "donation",
+  show_twitchcharitydonations: "donation",
+  show_twitch_charity: "donation",
+  show_treats: "donation",
+  // TreatStream
+  show_merch: "purchases",
+  show_raids: "raids",
+  show_hosts: "raids",
+  show_redemptions: "redemption",
+  show_fanfundings: "superchats",
+  // YouTube Super Chat
+  show_super_stickers: "superstickers",
+  show_jewel_gifts: "stars"
+  // TikTok-flavored, closest analogue
+};
+function buildFilters(settings) {
+  const drop = /* @__PURE__ */ new Set();
+  for (const [slFlag, lumiaCategory] of Object.entries(SL_SHOW_FLAG_TO_LUMIA_FILTER)) {
+    if (settings[slFlag] === false) {
+      drop.add(lumiaCategory);
+    }
+  }
+  return Array.from(drop);
+}
+function buildSLEventList(settings) {
+  const requiresReview = settings.custom_enabled === true;
+  const backgroundColor = settings.background_color ?? "transparent";
+  const textColor = settings.text_color ?? "#FFFFFF";
+  const textSize = pxToNumber(settings.text_size, 16);
+  const fontFamily = settings.font_family ?? "Roboto";
+  const maxEvents = typeof settings.max_events === "number" && settings.max_events > 0 ? settings.max_events : EVENTLIST_DEFAULT_MODULE.content.maxItemsToShow;
+  const enterAnimation = settings.show_animation ?? "fadeIn";
+  const exitAnimation = settings.hide_animation ?? "fadeOut";
+  const animationDuration = typeof settings.animation_speed === "number" ? settings.animation_speed : 1e3;
+  const filters = buildFilters(settings);
+  const { layer, module } = buildModuleEnvelope({
+    type: "eventlist",
+    title: "Streamlabs Event List",
+    bounds: { x: 100, y: 100, width: 375, height: 470 },
+    version: EVENTLIST_DEFAULT_MODULE.version,
+    css: {
+      ...EVENTLIST_DEFAULT_MODULE.css,
+      background: backgroundColor,
+      color: textColor,
+      fontSize: textSize,
+      fontFamily
+    },
+    content: {
+      // Spread canonical defaults FIRST so the renderer's dereferences
+      // don't crash on missing nested objects.
+      ...EVENTLIST_DEFAULT_MODULE.content,
+      maxItemsToShow: maxEvents,
+      // SL's `flip_y` corresponds to Lumia's `reverse` (newest item
+      // at the bottom vs the top). SL's `flip_x` flips the alignment
+      // to right; Lumia covers that via css.textAlign but doesn't
+      // have a per-module horizontal flip — stash as importMeta for
+      // the review step.
+      reverse: settings.flip_y === true,
+      // SL's `keep_history: false` means events disappear after the
+      // fade time; map to `fadeOutAfterDelay: true` with the fade
+      // time SL configured.
+      fadeOutAfterDelay: settings.keep_history === false,
+      fadeOutDelayTime: typeof settings.fade_time === "number" && settings.fade_time > 0 ? Math.max(1, Math.round(settings.fade_time / 1e3)) : EVENTLIST_DEFAULT_MODULE.content.fadeOutDelayTime,
+      animations: {
+        ...EVENTLIST_DEFAULT_MODULE.content.animations,
+        enterAnimation,
+        exitAnimation,
+        enterAnimationDuration: animationDuration,
+        exitAnimationDuration: animationDuration
+      },
+      filters,
+      importMeta: {
+        source: "streamlabs",
+        widgetType: "event_list",
+        importedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        slTheme: settings.theme ?? null,
+        slThemeColor: settings.theme_color ?? null,
+        slFlipX: settings.flip_x === true,
+        slHadCustomHtml: settings.custom_enabled === true,
+        // Per-event-type minimums SL filters by — Lumia's eventlist
+        // has no equivalent thresholding; preserve so the streamer
+        // can recreate via the alert module's variation conditions.
+        slHostViewerMinimum: settings.host_viewer_minimum ?? 0,
+        slBitsMinimum: settings.bits_minimum ?? 0,
+        slRaidRaiderMinimum: settings.raid_raider_minimum ?? 0
+      }
+    }
+  });
+  return { layer, module, requiresReview };
 }
 
 // src/sl-import/sl-dispatch.ts
-var IMPORT_META_KEY = "importMeta";
+function buildSLDescription(widgetType, sourceUrl) {
+  return buildImportDescription(`Imported from Streamlabs ${widgetType}`, sourceUrl);
+}
 var GOAL_WIDGET_TYPES = /* @__PURE__ */ new Set([
   "follower_goal",
   "sub_goal",
@@ -8154,8 +8463,6 @@ var GOAL_WIDGET_TYPES = /* @__PURE__ */ new Set([
   "bit_goal"
 ]);
 var PLACEHOLDER_WIDGET_TYPES = /* @__PURE__ */ new Set([
-  "chat_box",
-  "event_list",
   "donation_ticker",
   "stream_boss",
   "credits",
@@ -8165,8 +8472,6 @@ var PLACEHOLDER_WIDGET_TYPES = /* @__PURE__ */ new Set([
   "streamlabels"
 ]);
 var PLACEHOLDER_REASONS = {
-  chat_box: "Lumia has a native chatbox module \u2014 set it up directly rather than importing the SL config.",
-  event_list: "Lumia has a native eventlist module \u2014 set it up directly rather than importing the SL config.",
   donation_ticker: "No native Lumia equivalent yet \u2014 imported as a placeholder text layer.",
   stream_boss: "Lumia has a native streamboss module \u2014 set it up directly rather than importing the SL config.",
   credits: "Lumia has a native credits module \u2014 set it up directly rather than importing the SL config.",
@@ -8175,19 +8480,14 @@ var PLACEHOLDER_REASONS = {
   sub_train: "No native Lumia equivalent yet \u2014 imported as a placeholder text layer.",
   streamlabels: "Use Lumia template variables (e.g. {{twitch_last_follower}}) inside a Text module instead of importing the SL streamlabels config."
 };
+var CUSTOM_HTML_REVIEW_REASON = "The Streamlabs widget used custom HTML/CSS/JS that Lumia cannot host. The native Lumia module is the right starting point \u2014 recreate the styling there. The original SL settings are stashed under module.content.importMeta for reference.";
 function stampImportMeta(module, widgetType, role, extra = {}) {
-  const existing = module.content?.[IMPORT_META_KEY] ?? {};
-  module.content = {
-    ...module.content ?? {},
-    [IMPORT_META_KEY]: {
-      source: "streamlabs",
-      widgetType,
-      role,
-      importedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      ...existing,
-      ...extra
-    }
-  };
+  stampImportMetaMerge(module, {
+    source: "streamlabs",
+    widgetType,
+    role,
+    ...extra
+  });
 }
 function buildPlaceholder(widgetType) {
   const id = nanoid7();
@@ -8219,7 +8519,7 @@ function buildPlaceholder(widgetType) {
   };
   return { layer, module };
 }
-function importStreamlabsWidget(response, widgetType) {
+function importStreamlabsWidget(response, widgetType, options = {}) {
   if (!isSLWidgetConfigResponse(response)) {
     throw new Error(
       "Streamlabs response is missing the expected `settings` envelope. The widget may be private or the response format may have changed."
@@ -8269,9 +8569,61 @@ function importStreamlabsWidget(response, widgetType) {
     coverage.mappings.push({
       seType: `streamlabs:${widgetType}`,
       lumiaType: "goal",
-      status: "direct",
+      status: built.requiresReview ? "partial" : "direct",
+      count: 1
+    });
+    if (built.requiresReview) {
+      reviewItems.push(
+        customHtmlReviewItem(
+          built.module.id,
+          `streamlabs-${widgetType}`,
+          response.settings,
+          CUSTOM_HTML_REVIEW_REASON
+        )
+      );
+    }
+  } else if (widgetType === "chat_box") {
+    const built = buildSLChatBox(response.settings);
+    stampImportMeta(built.module, widgetType, "chatbox");
+    layers.push(built.layer);
+    modules[built.layer.id] = built.module;
+    coverage.mappings.push({
+      seType: "streamlabs:chat_box",
+      lumiaType: "chatbox",
+      status: built.requiresReview ? "partial" : "direct",
+      count: 1
+    });
+    if (built.requiresReview) {
+      reviewItems.push(
+        customHtmlReviewItem(
+          built.module.id,
+          "streamlabs-chat_box",
+          response.settings,
+          CUSTOM_HTML_REVIEW_REASON
+        )
+      );
+    }
+  } else if (widgetType === "event_list") {
+    const built = buildSLEventList(response.settings);
+    stampImportMeta(built.module, widgetType, "eventlist");
+    layers.push(built.layer);
+    modules[built.layer.id] = built.module;
+    coverage.mappings.push({
+      seType: "streamlabs:event_list",
+      lumiaType: "eventlist",
+      status: built.requiresReview ? "partial" : "direct",
       count: 1
     });
+    if (built.requiresReview) {
+      reviewItems.push(
+        customHtmlReviewItem(
+          built.module.id,
+          "streamlabs-event_list",
+          response.settings,
+          CUSTOM_HTML_REVIEW_REASON
+        )
+      );
+    }
   } else if (PLACEHOLDER_WIDGET_TYPES.has(widgetType)) {
     const placeholder = buildPlaceholder(widgetType);
     const reason = PLACEHOLDER_REASONS[widgetType] ?? "No native Lumia mapping yet.";
@@ -8320,7 +8672,7 @@ function importStreamlabsWidget(response, widgetType) {
     uuid: "",
     listen_id: "",
     name: overlayName,
-    description: `Imported from Streamlabs ${widgetType}`,
+    description: buildSLDescription(widgetType, options.sourceUrl),
     settings: {
       metadata: { width: 1920, height: 1080 },
       layers,
@@ -9882,7 +10234,12 @@ function SEImportWizard({
             );
           }
           importedOverlays.push({
-            result: importSEBootstrap(bootstrap),
+            result: importSEBootstrap(bootstrap, {
+              // JWT-flow imports don't come from a pasted URL; synthesize
+              // the SE dashboard URL so the description still carries a
+              // useful traceback. Same shape SE editor links use.
+              sourceUrl: `https://streamelements.com/dashboard/overlays/${overlayId}/editor`
+            }),
             summary
           });
         }
@@ -9927,7 +10284,9 @@ function SEImportWizard({
             "StreamElements returned a payload that doesn't look like an overlay bootstrap."
           );
         }
-        const imported = importSEBootstrap(bootstrap);
+        const imported = importSEBootstrap(bootstrap, {
+          sourceUrl: `https://streamelements.com/dashboard/overlays/${overlayId}/editor`
+        });
         setBatchImports([{ result: imported, summary }]);
         setResult(imported);
         setAssetUrls(findSEAssetURLs(imported.overlay));
@@ -10015,7 +10374,9 @@ function SEImportWizard({
             "Streamlabs returned a response that does not look like a widget config payload."
           );
         }
-        const imported = importStreamlabsWidget(raw, slParts.widgetType);
+        const imported = importStreamlabsWidget(raw, slParts.widgetType, {
+          sourceUrl: url
+        });
         setBatchImports([]);
         setResult(imported);
         setAssetUrls(findSEAssetURLs(imported.overlay));
@@ -10056,7 +10417,7 @@ function SEImportWizard({
             "StreamElements returned a response that does not look like an Element widget payload."
           );
         }
-        const imported = importElementOverlay(raw);
+        const imported = importElementOverlay(raw, { sourceUrl: url });
         setBatchImports([]);
         setResult(imported);
         setAssetUrls(findSEAssetURLs(imported.overlay));
@@ -10104,7 +10465,7 @@ function SEImportWizard({
         ...parts,
         proxyFetch: bindings.proxyFetch
       });
-      const imported = importSEBootstrap(bootstrap);
+      const imported = importSEBootstrap(bootstrap, { sourceUrl: url });
       setBatchImports([]);
       setResult(imported);
       setAssetUrls(findSEAssetURLs(imported.overlay));
@@ -10763,7 +11124,7 @@ function extractErrorMessage(err) {
 }
 
 // src/se-import/element-dispatch.ts
-import { nanoid as nanoid9 } from "nanoid";
+import { LumiaAlertValues as LumiaAlertValues3 } from "@lumiastream/lumia-types";
 
 // src/se-import/element-types.ts
 function isSEElementResponse(value) {
@@ -11007,34 +11368,8 @@ function translateAnimationName(name, fallback) {
   if (PINNED_ANIMATION_MAP[name]) return PINNED_ANIMATION_MAP[name];
   return name.replace(/-([a-z])/g, (_m, c) => c.toUpperCase());
 }
-function parseAnimationDurationMs(raw, fallbackMs) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw !== "string") return fallbackMs;
-  const trimmed = raw.trim();
-  if (!trimmed) return fallbackMs;
-  if (trimmed.endsWith("ms")) {
-    const n2 = parseFloat(trimmed.slice(0, -2));
-    return Number.isFinite(n2) ? n2 : fallbackMs;
-  }
-  if (trimmed.endsWith("s")) {
-    const n2 = parseFloat(trimmed.slice(0, -1));
-    return Number.isFinite(n2) ? n2 * 1e3 : fallbackMs;
-  }
-  const n = parseFloat(trimmed);
-  return Number.isFinite(n) ? n : fallbackMs;
-}
-function parsePx2(raw) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw !== "string") return NaN;
-  const trimmed = raw.trim();
-  if (!trimmed) return NaN;
-  if (trimmed.endsWith("px")) {
-    const n2 = parseFloat(trimmed.slice(0, -2));
-    return Number.isFinite(n2) ? n2 : NaN;
-  }
-  const n = parseFloat(trimmed);
-  return Number.isFinite(n) ? n : NaN;
-}
+var parseAnimationDurationMs = parseDurationMs;
+var parsePx2 = (raw) => pxToNumber(raw, NaN);
 function findFieldByType(fields, type) {
   if (!fields) return void 0;
   for (const f of Object.values(fields)) {
@@ -11110,6 +11445,47 @@ function buildAnimations(title) {
   const visibleDurationMs = enterDelay + enterDuration + staticDuration + exitDuration;
   return { animations, visibleDurationMs: visibleDurationMs || DEFAULT_DURATION_MS };
 }
+function resolveFieldBoundsInCanvas(style, canvas, textContent) {
+  if (!style) return null;
+  const x = parsePx2(style.left);
+  const y = parsePx2(style.top);
+  const hasXY = Number.isFinite(x) || Number.isFinite(y);
+  if (!hasXY && style.width == null && style.height == null) return null;
+  const sx = Number.isFinite(x) ? x : 0;
+  const sy = Number.isFinite(y) ? y : 0;
+  let width = parsePx2(style.width);
+  let height = parsePx2(style.height);
+  if (!Number.isFinite(width)) width = Math.max(1, canvas.width - sx);
+  if (!Number.isFinite(height)) {
+    if (typeof textContent === "string") {
+      const lineCount = (textContent.match(/\n/g)?.length ?? 0) + 1;
+      const lhPx = parsePx2(style.lineHeight) || parsePx2(style["line-height"]);
+      const fsPx = parsePx2(style.fontSize);
+      let effectiveLh = lhPx;
+      if (!Number.isFinite(effectiveLh) || effectiveLh < 8) {
+        effectiveLh = Number.isFinite(fsPx) ? fsPx * 1.3 : 24 * 1.3;
+      }
+      height = Math.max(1, lineCount * effectiveLh);
+    } else {
+      height = Math.max(1, canvas.height - sy);
+    }
+  }
+  return { x: sx, y: sy, width, height };
+}
+function unionBounds(boxes) {
+  if (boxes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const b of boxes) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
 function buildElementAlertEvent(state, options = {}) {
   const compositeFields = state.settings?.compositeFields;
   const titleField = findFieldByType(compositeFields, "text");
@@ -11127,6 +11503,31 @@ function buildElementAlertEvent(state, options = {}) {
   const titleStyle = titleField?.style;
   const highlightColor = titleField?.highlightedStyle?.color ?? null;
   const { animations, visibleDurationMs } = buildAnimations(titleField);
+  const canvas = options.canvas ?? { width: 1920, height: 1080 };
+  const mediaBounds = resolveFieldBoundsInCanvas(mainAsset?.style, canvas);
+  const textBounds = resolveFieldBoundsInCanvas(titleStyle, canvas, rawMessage);
+  const collected = [];
+  if (mediaBounds) collected.push(mediaBounds);
+  if (textBounds) collected.push(textBounds);
+  let layerBounds = unionBounds(collected);
+  if (!layerBounds) {
+    layerBounds = {
+      x: Math.round(canvas.width * 0.6),
+      y: Math.round(canvas.height * 0.15),
+      width: 400,
+      height: 300
+    };
+  }
+  let pushTextUp = 0;
+  let pushTextLeft = 0;
+  if (textBounds) {
+    const desiredTextTopInLayer = textBounds.y - layerBounds.y;
+    const naturalTextTopInLayer = Math.max(0, (layerBounds.height - textBounds.height) / 2);
+    pushTextUp = Math.round(desiredTextTopInLayer - naturalTextTopInLayer);
+    const desiredTextLeftInLayer = textBounds.x - layerBounds.x;
+    const naturalTextLeftInLayer = Math.max(0, (layerBounds.width - textBounds.width) / 2);
+    pushTextLeft = Math.round(desiredTextLeftInLayer - naturalTextLeftInLayer);
+  }
   const event = {
     on: true,
     // `'custom'` lowercase is load-bearing in Lumia's AlertBoxHandler —
@@ -11145,7 +11546,11 @@ function buildElementAlertEvent(state, options = {}) {
       showBrandIcon: true
     },
     settings: { duration: visibleDurationMs },
-    layout: { value: "column", css: {}, customCss: "", pushTextUp: 0, pushTextLeft: 0 },
+    // `textOver` matches SE Element's text-on-video render pattern.
+    // `imageOver` / `column` / `row` would all stack the text outside
+    // the media, which is the bug this layout fixes (text rendered
+    // below the alert graphic instead of overlaid on it).
+    layout: { value: "textOver", css: {}, customCss: "", pushTextUp, pushTextLeft },
     text: {
       css: titleCss(titleStyle),
       messageCss: {},
@@ -11167,44 +11572,13 @@ function buildElementAlertEvent(state, options = {}) {
     },
     variations: []
   };
-  const style = mainAsset?.style;
-  let bounds;
-  if (style) {
-    const x = parsePx2(style.left);
-    const y = parsePx2(style.top);
-    const width = parsePx2(style.width);
-    const height = parsePx2(style.height);
-    if (Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(width)) {
-      bounds = {
-        x,
-        y,
-        width,
-        // Height isn't always present on video Main Assets (the video
-        // aspect-ratios itself from the source). Fall back to a
-        // reasonable default that matches SE's preview row.
-        height: Number.isFinite(height) ? height : Math.round(width * 0.75)
-      };
-    }
-  }
-  return { event, bounds };
+  return { event, bounds: layerBounds };
 }
 
 // src/se-import/mappers/element-scene.ts
-import { nanoid as nanoid8 } from "nanoid";
 var TEXT_FALLBACK = { width: 400, height: 50 };
 var IMAGE_FALLBACK = { width: 300, height: 100 };
-function parsePx3(raw) {
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw !== "string") return NaN;
-  const trimmed = raw.trim();
-  if (!trimmed) return NaN;
-  if (trimmed.endsWith("px")) {
-    const n2 = parseFloat(trimmed.slice(0, -2));
-    return Number.isFinite(n2) ? n2 : NaN;
-  }
-  const n = parseFloat(trimmed);
-  return Number.isFinite(n) ? n : NaN;
-}
+var parsePx3 = (raw) => pxToNumber(raw, NaN);
 function styleToBounds(style, type, canvas) {
   const x = Number.isFinite(parsePx3(style?.left)) ? parsePx3(style?.left) : 0;
   const y = Number.isFinite(parsePx3(style?.top)) ? parsePx3(style?.top) : 0;
@@ -11240,33 +11614,17 @@ function styleToBounds(style, type, canvas) {
   }
   return { x, y, width, height };
 }
-function buildLayer(id, groupId, bounds, zIndex) {
-  return {
-    id,
-    group: groupId,
-    state: { visible: true, locked: false },
-    bounds: {
-      x: bounds.x,
-      y: bounds.y,
-      width: bounds.width,
-      height: bounds.height,
-      scale: [1, 1],
-      zIndex
-    }
-  };
-}
-function buildModule(id, type, title, content, css = {}) {
-  return {
-    id,
-    version: 1,
-    loaded: true,
-    settings: { type, title, locked: false },
-    lights: [],
-    css,
+function buildChild(groupId, zIndex, bounds, type, title, content, css = {}) {
+  const { layer, module } = buildModuleEnvelope({
+    type,
+    title,
+    bounds,
     content,
-    variables: {},
-    events: {}
-  };
+    css,
+    parentGroupId: groupId,
+    zIndex
+  });
+  return { layer, module };
 }
 function textStyleToCss(style) {
   const s = style ?? {};
@@ -11281,80 +11639,69 @@ function textStyleToCss(style) {
   return out;
 }
 function mapCompositeField(name, field, groupId, zIndex, provider, canvas) {
-  const id = nanoid8();
   switch (field.type) {
     case "video": {
-      const bounds = styleToBounds(field.style, "video", canvas);
-      const layer = buildLayer(id, groupId, bounds, zIndex);
       const src = pickFieldMediaHref(field.media, "video/");
       const volume = typeof field.volume === "number" ? field.volume : 1;
-      const module = buildModule(id, "video", name, {
-        src,
-        volume,
-        loop: true,
-        autoplay: true,
-        muted: volume === 0
-      });
-      return { layer, module };
+      return buildChild(
+        groupId,
+        zIndex,
+        styleToBounds(field.style, "video", canvas),
+        "video",
+        name,
+        { src, volume, loop: true, autoplay: true, muted: volume === 0 }
+      );
     }
     case "image": {
-      const bounds = styleToBounds(field.style, "image", canvas);
-      const layer = buildLayer(id, groupId, bounds, zIndex);
       const src = pickFieldMediaHref(field.media, "image/");
-      const module = buildModule(id, "image", name, { src });
-      return { layer, module };
+      return buildChild(
+        groupId,
+        zIndex,
+        styleToBounds(field.style, "image", canvas),
+        "image",
+        name,
+        { src }
+      );
     }
     case "text": {
-      const bounds = styleToBounds(field.style, "text", canvas);
-      const layer = buildLayer(id, groupId, bounds, zIndex);
       const raw = field.text?.[0]?.content ?? "";
       const value = substituteElementTokens(raw, { provider });
-      const module = buildModule(
-        id,
+      return buildChild(
+        groupId,
+        zIndex,
+        styleToBounds(field.style, "text", canvas),
         "text",
         name,
         { value, highlightColor: "inherit" },
         textStyleToCss(field.style)
       );
-      return { layer, module };
     }
     case "audio": {
-      const layer = buildLayer(id, groupId, { x: 0, y: 0, width: 1, height: 1 }, zIndex);
       const src = pickFieldMediaHref(field.media, "audio/");
       const volume = typeof field.volume === "number" ? field.volume : 0.5;
-      const module = buildModule(id, "audio", name, { src, volume, loop: false });
-      return { layer, module };
+      return buildChild(
+        groupId,
+        zIndex,
+        { x: 0, y: 0, width: 1, height: 1 },
+        "audio",
+        name,
+        { src, volume, loop: false }
+      );
     }
     default:
       return null;
   }
 }
 function buildElementScene(state, options) {
-  const groupId = nanoid8();
   const groupTitle = typeof state.displayName === "string" && state.displayName || state.referenceId || "Scene";
-  const groupLayer = {
-    id: groupId,
+  const { id: groupId, layer: groupLayer, module: groupModule } = buildModuleEnvelope({
     type: "group",
-    group: null,
-    bounds: {
-      x: 0,
-      y: 0,
-      width: options.canvas.width,
-      height: options.canvas.height,
-      scale: [1, 1]
-    },
-    state: { visible: true, locked: false, expanded: false }
-  };
-  const groupModule = {
-    id: groupId,
-    loaded: true,
-    settings: { type: "group", title: groupTitle },
-    lights: [],
-    css: {},
-    content: {},
-    variables: {},
-    events: {}
-  };
+    title: groupTitle,
+    bounds: { x: 0, y: 0, width: options.canvas.width, height: options.canvas.height },
+    type_layer: "group",
+    parentGroupId: null,
+    expanded: false
+  });
   const children = [];
   const fields = state.settings?.compositeFields ?? {};
   let zIndex = 1;
@@ -11373,7 +11720,12 @@ function buildElementScene(state, options) {
 }
 
 // src/se-import/element-dispatch.ts
-var IMPORT_META_KEY2 = "importMeta";
+function buildElementDescription(widgetInstanceId, sourceUrl) {
+  return buildImportDescription(
+    `Imported from StreamElements Element widget ${widgetInstanceId}`,
+    sourceUrl
+  );
+}
 function elementAlertKindToLumiaKeys(kind, provider) {
   switch (kind) {
     case "follower":
@@ -11392,9 +11744,9 @@ function elementAlertKindToLumiaKeys(kind, provider) {
       return alertBoxKeysFor("charityCampaignDonation", provider);
     case "subscriberGift":
     case "communityGiftPurchase": {
-      if (provider === "twitch") return ["twitch-giftSubscription"];
-      if (provider === "kick") return ["kick-subscriptionGift"];
-      if (provider === "youtube") return ["youtube-giftMembers"];
+      if (provider === "twitch") return [LumiaAlertValues3.TWITCH_GIFT_SUBSCRIPTION];
+      if (provider === "kick") return [LumiaAlertValues3.KICK_GIFT_SUBSCRIPTION];
+      if (provider === "youtube") return [LumiaAlertValues3.YOUTUBE_GIFT_MEMBERS];
       return alertBoxKeysFor("subscriber", provider);
     }
     default:
@@ -11409,7 +11761,7 @@ function buildCombinedAlertModule(alertStates, provider, canvas) {
   for (const state of alertStates) {
     const cls = classifyConfigState(state);
     if (cls.kind !== "alert") continue;
-    const { event, bounds: bounds2 } = buildElementAlertEvent(state, { provider });
+    const { event, bounds: bounds2 } = buildElementAlertEvent(state, { provider, canvas });
     const keys = elementAlertKindToLumiaKeys(cls.alertKind, provider);
     if (keys.length === 0) continue;
     for (const key of keys) {
@@ -11421,61 +11773,42 @@ function buildCombinedAlertModule(alertStates, provider, canvas) {
     }
   }
   if (Object.keys(events).length === 0) return null;
-  const id = nanoid9();
   const bounds = firstBounds ?? {
     x: Math.round(canvas.width * 0.6),
     y: Math.round(canvas.height * 0.15),
     width: 400,
     height: 300
   };
-  const layer = {
-    id,
-    state: { visible: true, locked: false },
-    bounds: {
-      x: bounds.x,
-      y: bounds.y,
-      width: bounds.width,
-      height: bounds.height,
-      scale: [1, 1]
-    }
-  };
   const baseAlert = firstEvent ? stripEventOnlyFields2(firstEvent) : {};
-  const module = {
-    id,
-    version: 1,
-    loaded: true,
-    settings: { type: "alert", title: "Alerts (Element import)", locked: false },
-    lights: [],
-    css: {},
-    content: {},
-    variables: {},
-    events: {},
+  const { layer, module } = buildModuleEnvelope({
+    type: "alert",
+    title: "Alerts (Element import)",
+    bounds,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     alert: { ...baseAlert, events }
-  };
+  });
   return { layer, module };
 }
 function stripEventOnlyFields2(event) {
-  const { on: _on, variations: _variations, matchEmptyCondition: _mec, ...base } = event;
+  const {
+    on: _on,
+    variations: _variations,
+    matchEmptyCondition: _mec,
+    ...base
+  } = event;
   return base;
 }
 function stampImportMeta2(module, state, role) {
-  module.content = {
-    ...module.content ?? {},
-    [IMPORT_META_KEY2]: {
-      source: "streamelements-element",
-      role,
-      referenceId: state?.referenceId,
-      categoryId: state?.categoryId,
-      displayName: state?.displayName,
-      importedAt: (/* @__PURE__ */ new Date()).toISOString()
-    }
-  };
+  stampImportMetaMerge(module, {
+    source: "streamelements-element",
+    role,
+    referenceId: state?.referenceId,
+    categoryId: state?.categoryId,
+    displayName: state?.displayName
+  });
 }
-function importElementOverlay(response) {
-  const configData = parseElementConfigData(
-    response.widgetInstanceConfigVersion.configData
-  );
+function importElementOverlay(response, options = {}) {
+  const configData = parseElementConfigData(response.widgetInstanceConfigVersion.configData);
   if (!configData) {
     throw new Error(
       "StreamElements Element response carries an invalid configData payload. The widget may be corrupted or the response format may have changed."
@@ -11545,7 +11878,10 @@ function importElementOverlay(response) {
     uuid: "",
     listen_id: "",
     name: response.widgetInstance.displayName ? `[SE Element] ${response.widgetInstance.displayName}` : `Imported from StreamElements Element (${response.widgetInstance.widgetInstanceId})`,
-    description: `Imported from StreamElements Element widget ${response.widgetInstance.widgetInstanceId}`,
+    description: buildElementDescription(
+      response.widgetInstance.widgetInstanceId,
+      options.sourceUrl
+    ),
     settings: {
       metadata: { width: canvas.width, height: canvas.height },
       layers,
@@ -11559,7 +11895,7 @@ function importElementOverlay(response) {
 }
 
 // src/se-import/index.ts
-var IMPORT_META_KEY3 = "importMeta";
+var IMPORT_META_KEY2 = "importMeta";
 var REVIEW_REASONS = {
   "se-widget-bit-boss": "No native Lumia equivalent \u2014 bit boss fight bar with HP/damage states.",
   // `se-widget-hype-cup` intentionally omitted — it now routes to the native
@@ -11589,6 +11925,10 @@ function reasonFor(seType, status, flaggedOff) {
   if (flaggedOff && FLAG_OFF_REASONS[seType]) return FLAG_OFF_REASONS[seType];
   return REVIEW_REASONS[seType] ?? (status === "template" ? "Imported as a generic template stub." : "No native mapping yet \u2014 imported as a labelled text placeholder.");
 }
+function buildSEBootstrapDescription(overlayId, sourceUrl) {
+  const head = overlayId ? `Imported from StreamElements overlay ${overlayId}` : "Imported from StreamElements";
+  return buildImportDescription(head, sourceUrl);
+}
 function extractSEOverlayId(input) {
   const trimmed = input.trim();
   const m = trimmed.match(/[0-9a-f]{24}/i);
@@ -11643,7 +11983,7 @@ function isSEBootstrap(value) {
   const o = v.overlay;
   return Array.isArray(o.widgets);
 }
-function importSEBootstrap(bootstrap) {
+function importSEBootstrap(bootstrap, options = {}) {
   const seOverlay = bootstrap.overlay;
   const widgets = seOverlay?.widgets ?? [];
   const coverage = {
@@ -11666,7 +12006,7 @@ function importSEBootstrap(bootstrap) {
     if (w.type !== "se-widget-group") continue;
     const uid = w.variables?.uid;
     if (typeof uid !== "string") continue;
-    const lumiaGroupId = nanoid10();
+    const lumiaGroupId = nanoid8();
     seUidToLumiaGroupId[uid] = lumiaGroupId;
     groupWidgetByUid[uid] = w;
   }
@@ -11705,7 +12045,7 @@ function importSEBootstrap(bootstrap) {
       lights: [],
       css: {},
       content: {
-        [IMPORT_META_KEY3]: {
+        [IMPORT_META_KEY2]: {
           source: "streamelements",
           widgetType: w.type,
           importedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -11743,7 +12083,7 @@ function importSEBootstrap(bootstrap) {
     if (result.status === "placeholder" || result.status === "template") {
       module.content = {
         ...module.content ?? {},
-        [IMPORT_META_KEY3]: {
+        [IMPORT_META_KEY2]: {
           source: "streamelements",
           widgetType: w.type,
           importedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -11783,7 +12123,7 @@ function importSEBootstrap(bootstrap) {
     uuid: "",
     listen_id: "",
     name: seOverlay?.name ? `[SE] ${seOverlay.name}` : `Imported from StreamElements (${seOverlay?._id ?? ""})`,
-    description: seOverlay?._id ? `Imported from StreamElements overlay ${seOverlay._id}` : "Imported from StreamElements",
+    description: buildSEBootstrapDescription(seOverlay?._id, options.sourceUrl),
     settings: {
       metadata: {
         width: seOverlay?.settings?.width ?? 1920,
@@ -11831,7 +12171,7 @@ function applyReviewAction(result, moduleId, action, payload) {
       bounds: existingLayer.bounds,
       state: existingLayer.state
     };
-    const importMeta2 = existing2.content?.[IMPORT_META_KEY3];
+    const importMeta2 = existing2.content?.[IMPORT_META_KEY2];
     const mergedLights = (existing2.lights?.length ?? 0) > 0 ? existing2.lights : transplant.module.lights;
     const mergedEvents = existing2.events && Object.keys(existing2.events).length > 0 ? { ...transplant.module.events, ...existing2.events } : transplant.module.events;
     const mergedVariables = existing2.variables && Object.keys(existing2.variables).length > 0 ? { ...transplant.module.variables, ...existing2.variables } : transplant.module.variables;
@@ -11843,7 +12183,7 @@ function applyReviewAction(result, moduleId, action, payload) {
       variables: mergedVariables,
       content: {
         ...transplant.module.content ?? {},
-        [IMPORT_META_KEY3]: importMeta2
+        [IMPORT_META_KEY2]: importMeta2
       }
     };
     const rootOldNewId = transplant.layer.id;
@@ -11871,7 +12211,7 @@ function applyReviewAction(result, moduleId, action, payload) {
   const existing = modules[moduleId];
   const generated = payload;
   if (!existing || !generated) return result;
-  const importMeta = existing.content?.[IMPORT_META_KEY3];
+  const importMeta = existing.content?.[IMPORT_META_KEY2];
   const replaced = {
     ...existing,
     settings: { ...existing.settings ?? {}, type: "custom" },
@@ -11885,7 +12225,7 @@ function applyReviewAction(result, moduleId, action, payload) {
       data: parseLooseJson(generated.data) ?? {},
       configs: parseLooseJson(generated.configs) ?? [],
       flavor: "ai-generated",
-      [IMPORT_META_KEY3]: importMeta
+      [IMPORT_META_KEY2]: importMeta
     }
   };
   modules[moduleId] = replaced;