@lumiastream/ui 0.2.5 → 0.2.7

package/dist/index.js

@@ -21,29 +21,57 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/lumia-ui.css
-styleInject(".ls-button,\n.ls-button *,\n.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-button,\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-button,\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: none;\n  user-select: none;\n}\n.ls-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  border-radius: var(--radiusContainerSm, 0.375rem);\n  border: 1px solid color-mix(in srgb, #fff 10%, transparent);\n  color: var(--neutralLight1, #f4f3ff);\n  font-weight: 500;\n  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);\n  transition:\n    filter 150ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n}\n.ls-button--small {\n  padding-inline: 0.75rem;\n  padding-block: 0.25rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ls-button--medium {\n  padding-inline: 1rem;\n  padding-block: 0.5rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.ls-button--large {\n  padding-inline: 1.5rem;\n  padding-block: 0.75rem;\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.ls-button:hover {\n  filter: brightness(1.1);\n}\n.ls-button:focus {\n  outline: none;\n}\n.ls-button:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 8px 18px rgba(0, 0, 0, 0.18);\n}\n.ls-button:active {\n  filter: brightness(0.95);\n}\n.ls-button:disabled,\n.ls-button[aria-disabled=true] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-button:disabled:hover,\n.ls-button[aria-disabled=true]:hover {\n  filter: none;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\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(--radiusContainerSm, 0.375rem);\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}\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) 2fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\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, #fff 10%, transparent);\n  padding: 1rem 0.25rem;\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}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\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: 0.25rem;\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-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 .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--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";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 var LSButton = ({
+  label,
+  disabled = false,
+  loading = false,
+  variant = "contained",
+  extended = 0,
+  color,
   primary = false,
-  size = "medium",
   backgroundColor,
-  label,
+  className,
+  sx,
+  style,
   ...props
 }) => {
-  const background = backgroundColor ?? (primary ? "var(--primary, #ff4076)" : "var(--neutralDark4, #46435f)");
+  const resolvedColor = color ?? (primary ? "primary" : "primary");
+  const muiColor = resolvedColor === "neutral" ? void 0 : resolvedColor;
+  const backgroundSx = backgroundColor ? { backgroundColor, "&:hover": { backgroundColor } } : null;
+  const secondaryOutlinedStyles = resolvedColor === "secondary" && variant === "outlined" ? {
+    color: "var(--white) !important",
+    "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+      color: "inherit"
+    }
+  } : null;
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
-      className: [
-        "ls-button",
-        size === "small" ? "ls-button--small" : size === "large" ? "ls-button--large" : "ls-button--medium"
-      ].join(" "),
-      style: { background },
+      disabled: disabled || loading,
+      variant,
+      color: muiColor,
+      style,
+      sx: [
+        { borderRadius: "1rem", transition: "opacity 300ms ease-in-out" },
+        ...backgroundSx ? [backgroundSx] : [],
+        ...Array.isArray(sx) ? sx : sx ? [sx] : [],
+        ...secondaryOutlinedStyles ? [secondaryOutlinedStyles] : []
+      ],
+      className: classNames(
+        "mui-ls-button cursor-pointer rounded-2xl pb-1.5 pt-1.5 hover:opacity-80 svg-current-color",
+        extended ? "pl-12 pr-12 mui-ls-button--extended" : "pl-6 pr-6",
+        `mui-ls-button--${resolvedColor}`,
+        `mui-ls-button--${variant}`,
+        className
+      ),
       ...props,
-      children: label
+      children: loading ? "Loading..." : label
     }
   );
 };
@@ -52,7 +80,7 @@ var LSButton = ({
 import FormControl from "@mui/material/FormControl";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField from "@mui/material/TextField";
-import classNames from "classnames";
+import classNames2 from "classnames";
 import { forwardRef } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LSInput = forwardRef(
@@ -149,7 +177,7 @@ var LSInput = forwardRef(
       FormControl,
       {
         variant: "outlined",
-        className: classNames("mui-ls-input", className, {
+        className: classNames2("mui-ls-input", className, {
           noMinHeight: $noMinHeight,
           bypassMuiColor: bypasscolor || bypasscolor === "default"
         }),
@@ -182,7 +210,7 @@ LSInput.displayName = "LSInput";
 
 // src/components/LSSliderInput/LSSliderInput.tsx
 import Slider from "@mui/material/Slider";
-import classNames2 from "classnames";
+import classNames3 from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var normalizeSliderValue = (rawValue) => {
@@ -301,7 +329,7 @@ var LSSliderInput = ({
   const controlsRow = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames2("mui-ls-slider-input-row", {
+      className: classNames3("mui-ls-slider-input-row", {
         "mui-ls-slider-input-row--slider": !hideSlider,
         "mui-ls-slider-input-row--input": hideInput
       }),
@@ -342,28 +370,20 @@ var LSSliderInput = ({
               inputMode: stepPrecision > 0 ? "decimal" : "numeric"
             },
             fullWidth: hideSlider ? fullWidth : false,
-            $noMinHeight: !fullWidth,
-            className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} small noMinHeight`.trim(),
-            style: hideSlider ? inputProps?.style : { width: 96, maxWidth: 96, flexShrink: 0 },
+            $noMinHeight: false,
+            className: hideSlider ? inputProps?.className : `${inputProps?.className ?? ""} mui-ls-slider-input-value`.trim(),
+            style: hideSlider ? inputProps?.style : { width: 112, maxWidth: 112, flexShrink: 0 },
             ...!hideSlider ? { size: "small" } : {}
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: classNames2("mui-ls-slider-input-root", { "mui-ls-slider-input-root--fullWidth": fullWidth }), children: [
-    /* @__PURE__ */ jsxs(
-      "fieldset",
-      {
-        className: classNames2("mui-ls-slider-input-fieldset", {
-          "mui-ls-slider-input-fieldset--fullWidth": fullWidth
-        }),
-        children: [
-          label && /* @__PURE__ */ jsx3("legend", { className: "mui-ls-slider-input-legend", children: label }),
-          controlsRow
-        ]
-      }
-    ),
+  return /* @__PURE__ */ jsxs("div", { className: "mui-ls-slider-input-root", children: [
+    /* @__PURE__ */ jsxs("fieldset", { className: "mui-ls-slider-input-fieldset", children: [
+      label && /* @__PURE__ */ jsx3("legend", { className: "mui-ls-slider-input-legend", children: label }),
+      controlsRow
+    ] }),
     helperText && /* @__PURE__ */ jsx3("small", { className: "mui-ls-slider-input-helper", children: helperText })
   ] });
 };
@@ -374,8 +394,19 @@ import FormControl2 from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
 import Select from "@mui/material/Select";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var LSSelect = ({ className = "", style, ...props }) => {
-  const { placeholder, displayEmpty: displayEmptyProp, renderValue: renderValueProp, variant: _variant, MenuProps, ...rest } = props;
+var LSSelect = ({
+  className = "",
+  style,
+  ...props
+}) => {
+  const {
+    placeholder,
+    displayEmpty: displayEmptyProp,
+    renderValue: renderValueProp,
+    variant: _variant,
+    MenuProps,
+    ...rest
+  } = props;
   const labelKey = props.name ?? (typeof props.label === "string" ? props.label : void 0);
   const labelId = props.label && labelKey ? `label_${labelKey}` : void 0;
   const placeholderText = typeof placeholder === "string" ? placeholder : "";
@@ -398,6 +429,7 @@ var LSSelect = ({ className = "", style, ...props }) => {
           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)",
           ...MenuProps?.slotProps?.paper?.sx
         }
@@ -418,6 +450,7 @@ var LSSelect = ({ className = "", style, ...props }) => {
         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)"
@@ -433,24 +466,39 @@ var LSSelect = ({ className = "", style, ...props }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs2(FormControl2, { variant: "outlined", className: `${className} mui-ls-select-form-control`, sx: { marginBottom: ".3rem", marginTop: ".5rem", minWidth: "100px", width: "100%" }, size: rest.size, style, children: [
-    props.label && /* @__PURE__ */ jsx4(InputLabel, { shrink: true, id: labelId, children: props.label }),
-    /* @__PURE__ */ jsx4(
-      Select,
-      {
-        MenuProps: mergedMenuProps,
-        className: "mui-ls-select",
-        variant: "outlined",
-        labelId,
-        label: props.label,
-        displayEmpty,
-        renderValue,
-        ...rest,
-        value,
-        children: props.children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    FormControl2,
+    {
+      variant: "outlined",
+      className: `${className} mui-ls-select-form-control`,
+      sx: {
+        marginBottom: ".3rem",
+        marginTop: ".5rem",
+        minWidth: "100px",
+        width: "100%"
+      },
+      size: rest.size,
+      style,
+      children: [
+        props.label && /* @__PURE__ */ jsx4(InputLabel, { shrink: true, id: labelId, children: props.label }),
+        /* @__PURE__ */ jsx4(
+          Select,
+          {
+            MenuProps: mergedMenuProps,
+            className: "mui-ls-select",
+            variant: "outlined",
+            labelId,
+            label: props.label,
+            displayEmpty,
+            renderValue,
+            ...rest,
+            value,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
 };
 LSSelect.displayName = "LSSelect";
 
@@ -459,7 +507,7 @@ import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { forwardRef as forwardRef2 } from "react";
 import { useController, useFormContext } from "react-hook-form";
-import classNames3 from "classnames";
+import classNames4 from "classnames";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
   const CheckboxComponent = Checkbox;
@@ -468,7 +516,7 @@ var LSCheckbox = forwardRef2(({ className = "", checked, inputRef, slotProps, ..
     {
       ...props,
       checked,
-      className: classNames3("ls-checkbox", className, { "Mui-disabled": props.disabled }),
+      className: classNames4("ls-checkbox", className, { "Mui-disabled": props.disabled }),
       ref,
       slotProps: {
         ...slotProps ?? {},
@@ -496,7 +544,7 @@ function LSCheckboxField({
   return /* @__PURE__ */ jsx5(
     FormControlLabel,
     {
-      className: classNames3("ls-checkbox-row", className),
+      className: classNames4("ls-checkbox-row", className),
       labelPlacement,
       disabled,
       control: /* @__PURE__ */ jsx5(
@@ -534,7 +582,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
     right: 0,
     top: "calc(100% + 0.5rem)",
     zIndex: 1e3,
-    borderRadius: "0.5rem",
+    borderRadius: "1rem",
     background: "var(--neutralDark1)",
     padding: "0.5rem",
     boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)"
@@ -545,7 +593,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
     height: inlinePickerHeight,
     minHeight: inlinePickerHeight,
     marginTop: "0.5rem",
-    borderRadius: "0.5rem",
+    borderRadius: "1rem",
     background: "var(--neutralDark1)",
     padding: "0.5rem",
     boxSizing: "border-box",
@@ -675,15 +723,36 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
 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 jsx7 } from "react/jsx-runtime";
-var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], localFonts = [], onLoadFonts, defaultValue = "Roboto", placeholder = "Select a font", isAlertManager = false, label, helperText }) {
+var LSFontPicker = memo(function LSFontPicker2({
+  value,
+  onChange,
+  fonts = [],
+  localFonts = [],
+  onLoadFonts,
+  defaultValue = "Roboto",
+  placeholder = "Select a font",
+  isAlertManager = false,
+  label,
+  helperText
+}) {
   const AutocompleteComponent = Autocomplete;
   const TextFieldComponent = TextField2;
   const [inputValue, setInputValue] = useState3(value ?? defaultValue);
   const onLoadFontsRef = useRef2(onLoadFonts);
   const onChangeRef = useRef2(onChange);
-  const combinedFonts = useMemo2(() => Array.from(/* @__PURE__ */ new Set([...localFonts, ...fonts])).sort(), [fonts, localFonts]);
+  const combinedFonts = useMemo2(
+    () => Array.from(/* @__PURE__ */ new Set([...localFonts, ...fonts])).sort(),
+    [fonts, localFonts]
+  );
   const currentValue = value ?? defaultValue;
   useEffect3(() => {
     onLoadFontsRef.current = onLoadFonts;
@@ -719,7 +788,9 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
       popupIcon: /* @__PURE__ */ jsx7(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") {
@@ -734,7 +805,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
           sx: {
             background: "var(--neutralDark3)",
             border: "1px solid var(--neutralDark4)",
-            borderRadius: "var(--radiusContainerSm)",
+            borderRadius: "var(--radius, 1rem)",
             boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
             color: "var(--neutralLight1)",
             marginTop: "4px"
@@ -783,7 +854,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
           helperText,
           placeholder,
           fullWidth: true,
-          className: "mui-ls-input noMinHeight",
+          className: "mui-ls-input",
           variant: "outlined",
           sx: {
             "& .MuiOutlinedInput-root": {
@@ -803,7 +874,13 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
 // src/components/LSMultiSelect/LSMultiSelect.tsx
 import { MenuItem } from "@mui/material";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, label }) => {
+var LSMultiSelect = ({
+  options,
+  placeholder = "Select...",
+  value,
+  onChange,
+  label
+}) => {
   const handleChange = (event) => {
     const {
       target: { value: value2 }
@@ -821,7 +898,9 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
       onChange: handleChange,
       displayEmpty: true,
       renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
-        /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map((val) => options.find((opt) => opt.value === val)?.label ?? val).join(", ") : placeholder }),
+        /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map(
+          (val) => options.find((opt) => opt.value === val)?.label ?? val
+        ).join(", ") : placeholder }),
         /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
@@ -832,6 +911,7 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
               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)",
               backdropFilter: "none",
               opacity: 1,
@@ -854,6 +934,7 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
             opacity: 1,
             maxHeight: "280px !important",
             border: "1px solid var(--neutralDark4)",
+            borderRadius: "var(--radius, 1rem)",
             "& .MuiList-root": {
               backgroundColor: "var(--neutralDark2)"
             }
@@ -877,7 +958,14 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
             }
           },
           children: [
-            /* @__PURE__ */ jsx8(LSCheckbox, { checked: (value ?? []).includes(option.value), tabIndex: -1, disableRipple: true }),
+            /* @__PURE__ */ jsx8(
+              LSCheckbox,
+              {
+                checked: (value ?? []).includes(option.value),
+                tabIndex: -1,
+                disableRipple: true
+              }
+            ),
             /* @__PURE__ */ jsx8("span", { children: option.label })
           ]
         },
@@ -891,16 +979,16 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
-import classNames4 from "classnames";
+import classNames5 from "classnames";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var LSRadio = ({ className = "", ...props }) => {
-  return /* @__PURE__ */ jsx9(Radio, { ...props, className: classNames4("ls-radio", className) });
+  return /* @__PURE__ */ jsx9(Radio, { ...props, className: classNames5("ls-radio", className) });
 };
 var LSRadioGroup = ({ selections, className = "", optionClassName = "", row, ...props }) => {
-  return /* @__PURE__ */ jsx9(RadioGroup, { ...props, row, className: classNames4("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9(RadioGroup, { ...props, row, className: classNames5("ls-radio-group", className, { row }), children: selections.map((selection) => /* @__PURE__ */ jsx9(
     FormControlLabel2,
     {
-      className: classNames4("ls-radio-row", optionClassName),
+      className: classNames5("ls-radio-row", optionClassName),
       value: selection.value,
       disabled: selection.disabled,
       control: /* @__PURE__ */ jsx9(LSRadio, {}),
@@ -915,47 +1003,65 @@ LSRadioGroup.displayName = "LSRadioGroup";
 import TextField3 from "@mui/material/TextField";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var LSTextField = forwardRef3((props, ref) => {
-  const { InputLabelProps, InputProps, slotProps, ...rest } = props;
-  return /* @__PURE__ */ jsx10(
-    TextField3,
-    {
-      ...rest,
-      variant: "outlined",
-      slotProps: {
-        ...slotProps ?? {},
-        input: {
-          ...slotProps?.input ?? {},
-          ...InputProps ?? {},
-          sx: {
-            ...slotProps?.input?.sx ?? {},
-            ...InputProps?.sx ?? {}
+var LSTextField = forwardRef3(
+  (props, ref) => {
+    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    return /* @__PURE__ */ jsx10(
+      TextField3,
+      {
+        ...rest,
+        variant: "outlined",
+        className: "mui-ls-input",
+        slotProps: {
+          ...slotProps ?? {},
+          input: {
+            ...slotProps?.input ?? {},
+            ...InputProps ?? {},
+            sx: {
+              ...slotProps?.input?.sx ?? {},
+              ...InputProps?.sx ?? {}
+            }
+          },
+          inputLabel: {
+            ...slotProps?.inputLabel ?? {},
+            shrink: true,
+            ...InputLabelProps ?? {}
           }
         },
-        inputLabel: {
-          ...slotProps?.inputLabel ?? {},
-          shrink: true,
-          ...InputLabelProps ?? {}
-        }
-      },
-      ref
-    }
-  );
-});
+        ref
+      }
+    );
+  }
+);
 LSTextField.displayName = "LSTextField";
 
 // src/components/LSVariableInputField/LSVariableInputField.tsx
-import Autocomplete2, { createFilterOptions } from "@mui/material/Autocomplete";
+import Autocomplete2, {
+  createFilterOptions
+} from "@mui/material/Autocomplete";
 import InputAdornment2 from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
 import Search from "@mui/icons-material/Search";
-import ArrowRight from "@mui/icons-material/ArrowRight";
+import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
 import Tooltip from "@mui/material/Tooltip";
-import { Fragment, createContext, forwardRef as forwardRef4, useCallback as useCallback2, useContext, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import {
+  Fragment,
+  createContext,
+  forwardRef as forwardRef4,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect4,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
 import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 import { createElement } from "react";
 var LSVariableInputContext = createContext({});
-var LSVariableInputProvider = ({ children, value }) => {
+var LSVariableInputProvider = ({
+  children,
+  value
+}) => {
   return /* @__PURE__ */ jsx11(LSVariableInputContext.Provider, { value, children });
 };
 var DEFAULT_FUNCTION_VARIABLES = [
@@ -1007,7 +1113,9 @@ var renderPrimitiveValue = (value) => {
 };
 var renderComplexPreview = (value) => {
   if (Array.isArray(value)) {
-    return `Array(${value.length}) [${value.slice(0, 3).map((item) => typeof item === "string" ? `"${item}"` : typeof item === "object" ? "{...}" : String(item)).join(", ")}${value.length > 3 ? "..." : ""}]`;
+    return `Array(${value.length}) [${value.slice(0, 3).map(
+      (item) => typeof item === "string" ? `"${item}"` : typeof item === "object" ? "{...}" : String(item)
+    ).join(", ")}${value.length > 3 ? "..." : ""}]`;
   }
   const keys = Object.keys(value);
   return `Object {${keys.slice(0, 2).join(", ")}${keys.length > 2 ? "..." : ""}}`;
@@ -1076,9 +1184,12 @@ var normalizeVariableRecords = (systemVariables) => {
 };
 var defaultTranslate = (key, fallback, options) => {
   if (fallback && fallback !== "-") return fallback;
-  if (key === "overlay-variables.variables-description") return "Use variables that will automatically be replaced before sending out the text";
-  if (key === "overlay-variables.variable" || key === "commands.variable") return "Variable";
-  if (key === "overlay-variables.description" || key === "commands.description") return "Description";
+  if (key === "overlay-variables.variables-description")
+    return "Use variables that will automatically be replaced before sending out the text";
+  if (key === "overlay-variables.variable" || key === "commands.variable")
+    return "Variable";
+  if (key === "overlay-variables.description" || key === "commands.description")
+    return "Description";
   if (key === "commands.suggested-variables") return "Suggested Variables";
   if (key === "common.value") return "Value";
   if (key === "common.search" || key === "assets.search") return "Search";
@@ -1104,7 +1215,11 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
       variableName = variable.trim();
     } else if (variable && typeof variable === "object") {
       const typedVariable = variable;
-      const candidateName = [typedVariable.name, typedVariable.key, typedVariable.variable].find((value) => typeof value === "string");
+      const candidateName = [
+        typedVariable.name,
+        typedVariable.key,
+        typedVariable.variable
+      ].find((value) => typeof value === "string");
       variableName = typeof candidateName === "string" ? candidateName.trim() : "";
       description = typeof typedVariable.description === "string" ? typedVariable.description.trim() : void 0;
       origin = typeof typedVariable.origin === "string" ? typedVariable.origin.trim().toLowerCase() : void 0;
@@ -1119,10 +1234,13 @@ var normalizeAllowedDefinitions = (allowedVariables) => {
 var filter = createFilterOptions({
   stringify: (option) => {
     if (typeof option === "string") return option;
-    if (typeof option === "number" || typeof option === "boolean" || typeof option === "bigint") return String(option);
+    if (typeof option === "number" || typeof option === "boolean" || typeof option === "bigint")
+      return String(option);
     if (!option || typeof option !== "object") return "";
     const typed = option;
-    return [typed.label, typed.value, typed.helperText, typed.searchText].filter((value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean").map((value) => String(value)).join(" ");
+    return [typed.label, typed.value, typed.helperText, typed.searchText].filter(
+      (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean"
+    ).map((value) => String(value)).join(" ");
   }
 });
 var visualTypeFromRecord = (variable) => {
@@ -1136,7 +1254,11 @@ var visualTypeRank = (variableType) => {
   return 2;
 };
 var orderItemsByVariableType = (items, getType) => {
-  const grouped = { custom: [], func: [], system: [] };
+  const grouped = {
+    custom: [],
+    func: [],
+    system: []
+  };
   items.forEach((item) => grouped[getType(item)].push(item));
   return [...grouped.custom, ...grouped.func, ...grouped.system];
 };
@@ -1152,7 +1274,8 @@ var humanizeVariableName = (rawName) => {
   return rawName.replace(/^_+|_+$/g, "").replace(/_/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
 };
 var getVariableColorClass = (variableType, isSuggested) => {
-  if (isSuggested && variableType !== "func") return "ls-variable-token--custom";
+  if (isSuggested && variableType !== "func")
+    return "ls-variable-token--custom";
   if (variableType === "func") return "ls-variable-token--function";
   if (variableType === "system") return "ls-variable-token--system";
   return "ls-variable-token--custom";
@@ -1205,8 +1328,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   } = props;
   const t = translate ?? context.translate ?? defaultTranslate;
   const rawSystemVariables = systemVariablesProp ?? context.systemVariables ?? {};
-  const variableRecords = useMemo3(() => normalizeVariableRecords(rawSystemVariables), [rawSystemVariables]);
-  const functionVariables = useMemo3(() => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES, [context.functionVariables, functionVariablesProp]);
+  const variableRecords = useMemo3(
+    () => normalizeVariableRecords(rawSystemVariables),
+    [rawSystemVariables]
+  );
+  const functionVariables = useMemo3(
+    () => functionVariablesProp ?? context.functionVariables ?? DEFAULT_FUNCTION_VARIABLES,
+    [context.functionVariables, functionVariablesProp]
+  );
   const requestTranslations = onVariableTranslationsNeeded ?? context.onVariableTranslationsNeeded;
   const isOriginConnected = isOriginConnectedProp ?? context.isOriginConnected;
   const translationKeyExists = translationKeyExistsProp ?? context.translationKeyExists;
@@ -1214,18 +1343,33 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   const variableId = useRef3(`variable-input-${name ?? "field"}`);
   const [showVariables, setShowVariables] = useState4(false);
   const [searchQuery, setSearchQuery] = useState4("");
-  const functionVariableSet = useMemo3(() => new Set(functionVariables), [functionVariables]);
-  const allowedVariableDefinitions = useMemo3(() => normalizeAllowedDefinitions(allowedVariables), [allowedVariables]);
+  const functionVariableSet = useMemo3(
+    () => new Set(functionVariables),
+    [functionVariables]
+  );
+  const allowedVariableDefinitions = useMemo3(
+    () => normalizeAllowedDefinitions(allowedVariables),
+    [allowedVariables]
+  );
   const allowedVariableDefinitionLookup = useMemo3(() => {
     const lookup = /* @__PURE__ */ new Map();
-    allowedVariableDefinitions.forEach((definition) => lookup.set(definition.name, definition));
+    allowedVariableDefinitions.forEach(
+      (definition) => lookup.set(definition.name, definition)
+    );
     return lookup;
   }, [allowedVariableDefinitions]);
-  const allowedVariableNames = useMemo3(() => allowedVariableDefinitions.map((definition) => definition.name), [allowedVariableDefinitions]);
+  const allowedVariableNames = useMemo3(
+    () => allowedVariableDefinitions.map((definition) => definition.name),
+    [allowedVariableDefinitions]
+  );
   const [filteredAllowedVariables, setFilteredAllowedVariables] = useState4(allowedVariableDefinitions);
   const [filteredSystemVariables, setFilteredSystemVariables] = useState4([]);
-  const [expandedPaths, setExpandedPaths] = useState4(() => /* @__PURE__ */ new Set());
-  const [autoExpandPaths, setAutoExpandPaths] = useState4(() => /* @__PURE__ */ new Set());
+  const [expandedPaths, setExpandedPaths] = useState4(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [autoExpandPaths, setAutoExpandPaths] = useState4(
+    () => /* @__PURE__ */ new Set()
+  );
   const systemVariableValueTrees = useMemo3(() => {
     const map = /* @__PURE__ */ new Map();
     Object.values(variableRecords).forEach((variable) => {
@@ -1247,7 +1391,10 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   useEffect4(() => {
     requestTranslations?.();
   }, [requestTranslations]);
-  const isPathExpanded = useCallback2((path) => expandedPaths.has(path) || autoExpandPaths.has(path), [autoExpandPaths, expandedPaths]);
+  const isPathExpanded = useCallback2(
+    (path) => expandedPaths.has(path) || autoExpandPaths.has(path),
+    [autoExpandPaths, expandedPaths]
+  );
   const toggleExpand = useCallback2(
     (path) => {
       const expanded = expandedPaths.has(path) || autoExpandPaths.has(path);
@@ -1293,12 +1440,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       if (!normalizedNamespace) return null;
       const normalizedName = variableName.trim().toLowerCase();
       if (!normalizedName) return null;
-      const unprefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName.slice(normalizedNamespace.length + 1) : normalizedName;
+      const unprefixedName = normalizedName.startsWith(
+        `${normalizedNamespace}_`
+      ) ? normalizedName.slice(normalizedNamespace.length + 1) : normalizedName;
       const prefixedName = normalizedName.startsWith(`${normalizedNamespace}_`) ? normalizedName : `${normalizedNamespace}_${normalizedName}`;
       const candidateKeys = [prefixedName, unprefixedName];
       for (const key of candidateKeys) {
-        if (namespaceHas(key, normalizedNamespace)) return t(key, void 0, { ns: normalizedNamespace });
-        if (namespaceHas(`variables.${key}`, normalizedNamespace)) return t(`variables.${key}`, void 0, { ns: normalizedNamespace });
+        if (namespaceHas(key, normalizedNamespace))
+          return t(key, void 0, { ns: normalizedNamespace });
+        if (namespaceHas(`variables.${key}`, normalizedNamespace))
+          return t(`variables.${key}`, void 0, { ns: normalizedNamespace });
       }
       return null;
     },
@@ -1307,7 +1458,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   const knownOrigins = useMemo3(() => {
     return Array.from(
       new Set(
-        Object.values(variableRecords).map((variable) => typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : "").filter((origin) => origin.length > 0)
+        Object.values(variableRecords).map(
+          (variable) => typeof variable?.origin === "string" ? variable.origin.trim().toLowerCase() : ""
+        ).filter((origin) => origin.length > 0)
       )
     );
   }, [variableRecords]);
@@ -1321,10 +1474,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       if (!normalizedName) return void 0;
       const prefixCandidate = normalizedName.split("_")[0];
       if (prefixCandidate) {
-        const hasScopedTranslation = namespaceHas(normalizedName, prefixCandidate) || namespaceHas(`variables.${normalizedName}`, prefixCandidate) || namespaceHas(normalizedName.slice(prefixCandidate.length + 1), prefixCandidate) || namespaceHas(`variables.${normalizedName.slice(prefixCandidate.length + 1)}`, prefixCandidate);
+        const hasScopedTranslation = namespaceHas(normalizedName, prefixCandidate) || namespaceHas(`variables.${normalizedName}`, prefixCandidate) || namespaceHas(
+          normalizedName.slice(prefixCandidate.length + 1),
+          prefixCandidate
+        ) || namespaceHas(
+          `variables.${normalizedName.slice(prefixCandidate.length + 1)}`,
+          prefixCandidate
+        );
         if (hasScopedTranslation) return prefixCandidate;
       }
-      const prefixedMatch = knownOrigins.find((origin) => normalizedName.startsWith(`${origin}_`));
+      const prefixedMatch = knownOrigins.find(
+        (origin) => normalizedName.startsWith(`${origin}_`)
+      );
       if (prefixedMatch) return prefixedMatch;
       const matchingOrigins = knownOrigins.filter(
         (origin) => namespaceHas(normalizedName, origin) || namespaceHas(`variables.${normalizedName}`, origin) || namespaceHas(`${origin}_${normalizedName}`, origin)
@@ -1342,7 +1503,13 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       );
       return inferredOrigins.length === 1 ? inferredOrigins[0] : void 0;
     },
-    [allowedVariableDefinitionLookup, allowedVariableOrigin, knownOrigins, namespaceHas, variableRecords]
+    [
+      allowedVariableDefinitionLookup,
+      allowedVariableOrigin,
+      knownOrigins,
+      namespaceHas,
+      variableRecords
+    ]
   );
   const resolveVariableDescription = useCallback2(
     (variableName, fallbackDescription, origin) => {
@@ -1350,8 +1517,10 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       if (fromOrigin && fromOrigin.trim().length > 0) return fromOrigin;
       const defaultTranslationKey = `variables.${variableName}`;
       const defaultTranslated = t(defaultTranslationKey);
-      if (typeof defaultTranslated === "string" && defaultTranslated !== defaultTranslationKey) return defaultTranslated;
-      if (fallbackDescription && fallbackDescription.trim().length > 0) return fallbackDescription;
+      if (typeof defaultTranslated === "string" && defaultTranslated !== defaultTranslationKey)
+        return defaultTranslated;
+      if (fallbackDescription && fallbackDescription.trim().length > 0)
+        return fallbackDescription;
       return humanizeVariableName(variableName);
     },
     [resolveTranslationFromNamespace, t]
@@ -1359,9 +1528,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   const getSystemVariableDescription = useCallback2(
     (variable) => {
       if (variable?.system && !variable?.pluginId) {
-        return t(`variables.${variable.description}`, void 0, { example: variable.example, interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } });
+        return t(`variables.${variable.description}`, void 0, {
+          example: variable.example,
+          interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" }
+        });
       }
-      return resolveVariableDescription(variable?.name ?? "", variable?.description, variable?.origin);
+      return resolveVariableDescription(
+        variable?.name ?? "",
+        variable?.description,
+        variable?.origin
+      );
     },
     [resolveVariableDescription, t]
   );
@@ -1382,9 +1558,19 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       if (variable) return getSystemVariableDescription(variable);
       const fromDefinition = allowedVariableDefinitionLookup.get(variableName);
       const origin = resolveAllowedVariableOrigin(variableName);
-      return resolveVariableDescription(variableName, fromDefinition?.description, origin);
+      return resolveVariableDescription(
+        variableName,
+        fromDefinition?.description,
+        origin
+      );
     },
-    [allowedVariableDefinitionLookup, getSystemVariableDescription, resolveAllowedVariableOrigin, resolveVariableDescription, variableRecords]
+    [
+      allowedVariableDefinitionLookup,
+      getSystemVariableDescription,
+      resolveAllowedVariableOrigin,
+      resolveVariableDescription,
+      variableRecords
+    ]
   );
   const getAllowedVariableValue = useCallback2(
     (variableName) => {
@@ -1440,14 +1626,21 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     };
     if (allowedVariableNames.length > 0) {
       if (!query) {
-        setFilteredAllowedVariables(orderItemsByVariableType(allowedVariableDefinitions, (definition) => getAllowedVariableVisualType(definition.name)));
+        setFilteredAllowedVariables(
+          orderItemsByVariableType(
+            allowedVariableDefinitions,
+            (definition) => getAllowedVariableVisualType(definition.name)
+          )
+        );
       } else {
         const nameMatches = [];
         const descMatches = [];
         const nestedMatches = [];
         allowedVariableDefinitions.forEach((definition) => {
           const nameLower = definition.name?.toLowerCase();
-          const descLower = getAllowedVariableDescription(definition.name)?.toLowerCase();
+          const descLower = getAllowedVariableDescription(
+            definition.name
+          )?.toLowerCase();
           if (nameLower?.includes(query)) {
             nameMatches.push(definition);
             return;
@@ -1461,8 +1654,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             nestedMatches.push(definition);
           }
         });
-        const sortByDef = (items) => sortItemsByVariableTypeThenName(items, (definition) => getAllowedVariableVisualType(definition.name), (definition) => definition.name);
-        setFilteredAllowedVariables([...sortByDef(nameMatches), ...sortByDef(descMatches), ...sortByDef(nestedMatches)]);
+        const sortByDef = (items) => sortItemsByVariableTypeThenName(
+          items,
+          (definition) => getAllowedVariableVisualType(definition.name),
+          (definition) => definition.name
+        );
+        setFilteredAllowedVariables([
+          ...sortByDef(nameMatches),
+          ...sortByDef(descMatches),
+          ...sortByDef(nestedMatches)
+        ]);
       }
     } else {
       setFilteredAllowedVariables([]);
@@ -1477,7 +1678,12 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     const allRecords = Object.values(variableRecords);
     if (!query) {
       const visible = allRecords.filter(shouldKeep);
-      setFilteredSystemVariables(orderItemsByVariableType(visible, (variable) => visualTypeFromRecord(variable)));
+      setFilteredSystemVariables(
+        orderItemsByVariableType(
+          visible,
+          (variable) => visualTypeFromRecord(variable)
+        )
+      );
     } else {
       const nameMatches = [];
       const descMatches = [];
@@ -1500,8 +1706,16 @@ var LSVariableInputField = forwardRef4((props, ref) => {
           nestedMatches.push(variable);
         }
       });
-      const sortSys = (items) => sortItemsByVariableTypeThenName(items, (variable) => visualTypeFromRecord(variable), (variable) => variable?.name ?? "");
-      setFilteredSystemVariables([...sortSys(nameMatches), ...sortSys(descMatches), ...sortSys(nestedMatches)]);
+      const sortSys = (items) => sortItemsByVariableTypeThenName(
+        items,
+        (variable) => visualTypeFromRecord(variable),
+        (variable) => variable?.name ?? ""
+      );
+      setFilteredSystemVariables([
+        ...sortSys(nameMatches),
+        ...sortSys(descMatches),
+        ...sortSys(nestedMatches)
+      ]);
     }
     setAutoExpandPaths(nextAutoExpand);
   }, [
@@ -1532,10 +1746,23 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     afterFilter?.(filtered);
     return filtered;
   };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`, children: [
-    /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
-    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__badge", title: t("variables.functionvariables", "Function variables"), children: "fx" })
-  ] });
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`,
+      children: [
+        /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+        variableType === "func" && /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: "ls-variable-token__badge",
+            title: t("variables.functionvariables", "Function variables"),
+            children: "fx"
+          }
+        )
+      ]
+    }
+  );
   const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx11(
     "button",
     {
@@ -1547,7 +1774,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
       "aria-label": expanded ? "Collapse" : "Expand",
       "aria-expanded": expanded,
-      children: /* @__PURE__ */ jsx11(ArrowRight, { style: { width: 14, height: 14 } })
+      children: /* @__PURE__ */ jsx11(KeyboardArrowDown2, { style: { width: 16, height: 16 } })
     }
   );
   const renderExpandSpacer = () => /* @__PURE__ */ jsx11("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
@@ -1555,6 +1782,19 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
     return { displayValue, fullValue };
   };
+  const renderVariableValueInput = (displayValue, fullValue) => /* @__PURE__ */ jsx11(
+    "input",
+    {
+      className: "ls-variable-picker__value-input",
+      title: fullValue,
+      readOnly: true,
+      value: fullValue || displayValue,
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      "aria-label": t("common.value", "Value")
+    }
+  );
   const renderValueChildRows = (rootToken, nodes) => nodes.map((node) => {
     const fullToken = `${rootToken}.${node.relativePath}`;
     const expanded = node.isExpandable && isPathExpanded(fullToken);
@@ -1569,12 +1809,25 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             else insertVariable(fullToken);
           },
           children: [
-            /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", style: { paddingLeft: `${node.depth * 1.25}rem` }, children: [
-              node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
-              /* @__PURE__ */ jsx11("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` }) })
-            ] }),
+            /* @__PURE__ */ jsxs5(
+              "div",
+              {
+                className: "ls-variable-picker__token-cell",
+                style: { paddingLeft: `${node.depth * 1.25}rem` },
+                children: [
+                  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
+                  /* @__PURE__ */ jsx11(
+                    "div",
+                    {
+                      className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`,
+                      children: /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` })
+                    }
+                  )
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: node.displayKey }),
-            /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
+            /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
           ]
         }
       ),
@@ -1583,15 +1836,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   });
   const toOptionLabelString = (input) => {
     if (typeof input === "string") return input;
-    if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint") return String(input);
+    if (typeof input === "number" || typeof input === "boolean" || typeof input === "bigint")
+      return String(input);
     if (input === null || input === void 0) return "";
     if (typeof input === "object") {
       const labelCandidate = input.label;
       if (typeof labelCandidate === "string") return labelCandidate;
-      if (typeof labelCandidate === "number" || typeof labelCandidate === "boolean" || typeof labelCandidate === "bigint") return String(labelCandidate);
+      if (typeof labelCandidate === "number" || typeof labelCandidate === "boolean" || typeof labelCandidate === "bigint")
+        return String(labelCandidate);
       const valueCandidate = input.value;
       if (typeof valueCandidate === "string") return valueCandidate;
-      if (typeof valueCandidate === "number" || typeof valueCandidate === "boolean" || typeof valueCandidate === "bigint") return String(valueCandidate);
+      if (typeof valueCandidate === "number" || typeof valueCandidate === "boolean" || typeof valueCandidate === "bigint")
+        return String(valueCandidate);
       try {
         return JSON.stringify(input);
       } catch {
@@ -1604,7 +1860,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     if (typeof getOptionLabel === "function") {
       try {
         const customLabel = getOptionLabel(option);
-        return toOptionLabelString(customLabel === void 0 ? option : customLabel);
+        return toOptionLabelString(
+          customLabel === void 0 ? option : customLabel
+        );
       } catch {
         return toOptionLabelString(option);
       }
@@ -1621,9 +1879,20 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       {
         ...optionProps,
         key: String(opt?.label ?? opt?.value ?? ""),
-        className: `ls-variable-option${isSelected ? " ls-variable-option--selected" : ""}`
+        className: [
+          optionProps.className,
+          "ls-variable-option",
+          isSelected ? "ls-variable-option--selected" : ""
+        ].filter(Boolean).join(" ")
       },
-      thumb ? /* @__PURE__ */ jsx11("img", { src: thumb, className: "ls-variable-option__thumb", alt: "" }) : /* @__PURE__ */ jsx11("span", { className: "ls-variable-option__thumb ls-variable-option__thumb--placeholder" }),
+      thumb ? /* @__PURE__ */ jsx11(
+        "img",
+        {
+          src: thumb,
+          className: "ls-variable-option__thumb",
+          alt: ""
+        }
+      ) : null,
       /* @__PURE__ */ jsxs5("div", { className: "ls-variable-option__body", children: [
         /* @__PURE__ */ jsx11("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
         helperText ? /* @__PURE__ */ jsx11("div", { className: "ls-variable-option__helper", children: helperText }) : null
@@ -1633,22 +1902,24 @@ var LSVariableInputField = forwardRef4((props, ref) => {
   const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
   const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
     /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
-      /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__intro-text", children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
+      /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__intro-text", children: t(
+        "overlay-variables.variables-description",
+        "Use variables that will automatically be replaced before sending out the text"
+      ) }),
       /* @__PURE__ */ jsx11(
         LSInput,
         {
           autoFocus: true,
-          startAdornment: /* @__PURE__ */ jsx11(Search, { style: { width: 18, height: 18 } }),
+          startAdornment: /* @__PURE__ */ jsx11(Search, { style: { color: "#fff", width: 20, height: 20 } }),
           placeholder: t("common.search", "Search"),
           value: searchQuery,
           onChange: (e) => setSearchQuery(e.target.value),
-          type: "text",
-          style: { padding: "1rem 0 0" }
+          type: "text"
         }
       )
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
-      /* @__PURE__ */ jsx11("div", { children: t("commands.variable", "Variable") }),
+      /* @__PURE__ */ jsx11("div", { style: { paddingLeft: "2.2rem" }, children: t("commands.variable", "Variable") }),
       /* @__PURE__ */ jsx11("div", { children: t("commands.description", "Description") }),
       /* @__PURE__ */ jsx11("div", { children: t("common.value", "Value") })
     ] }),
@@ -1656,9 +1927,13 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "ls-variable-picker__field", children: [
         /* @__PURE__ */ jsx11("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
         filteredAllowedVariables.map((definition, idx) => {
-          const variableType = getAllowedVariableVisualType(definition.name);
+          const variableType = getAllowedVariableVisualType(
+            definition.name
+          );
           const tree = getAllowedVariableTree(definition);
-          const { displayValue, fullValue } = getVariableValuePreview(getAllowedVariableValue(definition.name) ?? definition.example);
+          const { displayValue, fullValue } = getVariableValuePreview(
+            getAllowedVariableValue(definition.name) ?? definition.example
+          );
           const expandable = !!tree && tree.length > 0;
           const expanded = expandable && isPathExpanded(definition.name);
           const isLast = idx === filteredAllowedVariables.length - 1;
@@ -1669,7 +1944,8 @@ var LSVariableInputField = forwardRef4((props, ref) => {
               {
                 className: rowCls,
                 onClick: () => {
-                  if (expandable && !expanded) toggleExpand(definition.name);
+                  if (expandable && !expanded)
+                    toggleExpand(definition.name);
                   else insertVariable(definition.name);
                 },
                 children: [
@@ -1678,7 +1954,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
                     renderVariableToken(definition.name, variableType, true)
                   ] }),
                   /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
-                  /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
+                  /* @__PURE__ */ jsx11(
+                    "div",
+                    {
+                      className: "ls-variable-picker__value",
+                      title: fullValue,
+                      children: renderVariableValueInput(displayValue, fullValue)
+                    }
+                  )
                 ]
               }
             ),
@@ -1688,7 +1971,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       ] }),
       filteredSystemVariables?.map((variable) => {
         const variableType = visualTypeFromRecord(variable);
-        const { displayValue, fullValue } = getVariableValuePreview(variable.value);
+        const { displayValue, fullValue } = getVariableValuePreview(
+          variable.value
+        );
         const rootToken = variable.example ?? variable.name;
         const tree = systemVariableValueTrees.get(variable.name);
         const expandable = !!tree && tree.length > 0;
@@ -1708,7 +1993,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
                   renderVariableToken(variable.name, variableType)
                 ] }),
                 /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
-                /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
+                /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: renderVariableValueInput(displayValue, fullValue) })
               ]
             }
           ),
@@ -1739,7 +2024,7 @@ var LSVariableInputField = forwardRef4((props, ref) => {
       clickedVariableIcon,
       inputProps,
       allowedVariables,
-      showVariableIcon: !hideVariables,
+      showVariableIcon: !hideVariables && (!isAutoComplete || allowedVariableDefinitions.length > 0),
       ref
     }
   );
@@ -1761,7 +2046,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
               // single source of internal spacing. Adding paper padding on top of
               // that compounds the inset and forces premature horizontal scroll.
               padding: 0,
-              border: "1px solid var(--neutralDark4, #393853)"
+              border: "1px solid var(--neutralDark4, #393853)",
+              borderRadius: "var(--radius, 1rem)",
+              overflow: "hidden"
             }
           }
         },
@@ -1810,7 +2097,55 @@ var LSVariableInputField = forwardRef4((props, ref) => {
         filterOptions: handleFilterOptions,
         renderOption: $renderOption ?? renderOption ?? defaultRenderOption,
         slots: ListboxComponent ? { listbox: ListboxComponent } : void 0,
-        slotProps: { listbox: { onScroll: onScrollListBox } },
+        slotProps: {
+          popper: {
+            className: "ls-variable-autocomplete-popper"
+          },
+          paper: {
+            className: "ls-variable-autocomplete-paper",
+            sx: {
+              border: "1px solid var(--neutralDark4, var(--cardborder, #393853))",
+              borderRadius: "var(--radius, 1rem)",
+              backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+              color: "var(--neutralLight1, var(--white, #fff))",
+              boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+              overflow: "hidden"
+            }
+          },
+          listbox: {
+            className: "ls-variable-autocomplete-listbox",
+            onScroll: onScrollListBox,
+            sx: {
+              padding: "0.25rem 0",
+              backgroundColor: "var(--neutralDark2, var(--cardbackground, #211f45))",
+              color: "var(--neutralLight1, var(--white, #fff))",
+              "& .MuiAutocomplete-option": {
+                display: "flex",
+                minHeight: 44,
+                alignItems: "center",
+                padding: "0.625rem 1rem",
+                color: "var(--neutralLight1, var(--white, #fff))",
+                fontSize: "1rem",
+                lineHeight: 1.35,
+                transition: "background-color 120ms ease, color 120ms ease"
+              },
+              "& .MuiAutocomplete-option:hover, & .MuiAutocomplete-option.Mui-focused, & .MuiAutocomplete-option[data-focus='true'], & .MuiAutocomplete-option[aria-selected='true']": {
+                backgroundColor: "var(--cardHover, var(--transwhite, rgba(255, 255, 255, 0.05)))",
+                color: "var(--neutralLight1, var(--white, #fff))"
+              }
+            }
+          },
+          popupIndicator: {
+            className: "ls-variable-autocomplete-popup-indicator",
+            sx: {
+              color: "var(--neutralLight1, var(--white, #fff))",
+              "& svg": {
+                color: "var(--neutralLight1, var(--white, #fff))",
+                fill: "currentColor"
+              }
+            }
+          }
+        },
         onHighlightChange,
         onOpen: onPopupOpen,
         onClose: onPopupClose,
@@ -1846,7 +2181,9 @@ var VariableInputTextField = forwardRef4(
     const paramsInputProps = params?.InputProps ?? {};
     const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
     const paramsSlotInputProps = params?.slotProps?.input ?? {};
-    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment;
+    const explicitStartAdornment = inputProps?.startAdornment;
+    const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx11(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;
     return /* @__PURE__ */ jsx11(
       LSTextField,
@@ -1855,7 +2192,7 @@ var VariableInputTextField = forwardRef4(
         name,
         label,
         type,
-        color: "secondary",
+        color: "primary",
         variant,
         disabled,
         autoFocus,
@@ -1865,8 +2202,8 @@ var VariableInputTextField = forwardRef4(
         maxRows,
         value,
         fullWidth: true,
-        className: `mui-ls-input noMinHeight ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
-        onChange: onChange ? ((e) => onChange(e.target.value)) : void 0,
+        className: `mui-ls-input ${params?.className ?? ""} ${inputProps?.className ?? ""}`.trim(),
+        onChange: onChange ? (e) => onChange(e.target.value) : void 0,
         ...inputProps,
         ...params,
         InputProps: {
@@ -1877,16 +2214,22 @@ var VariableInputTextField = forwardRef4(
           startAdornment,
           endAdornment: /* @__PURE__ */ jsxs5(Fragment2, { children: [
             endAdornment ?? null,
-            showVariableIcon ? /* @__PURE__ */ jsx11(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx11(
-              InputAdornment2,
+            showVariableIcon ? /* @__PURE__ */ jsx11(
+              Tooltip,
               {
-                position: "end",
-                onClick: clickedVariableIcon,
-                ref: containerRef,
-                className: "ls-variable-input-adornment",
-                children: "{}"
+                title: t("chatbot.allowed-variables", "Allowed Variables"),
+                children: /* @__PURE__ */ jsx11(
+                  InputAdornment2,
+                  {
+                    position: "end",
+                    onClick: clickedVariableIcon,
+                    ref: containerRef,
+                    className: "ls-variable-input-adornment",
+                    children: "{}"
+                  }
+                )
               }
-            ) }) : null
+            ) : null
           ] })
         },
         inputRef: ref
@@ -2709,7 +3052,2561 @@ var resolveChatterProfileUrlWithResolvers = async ({
     userId: normalizedUserId || void 0
   });
 };
+
+// src/se-import/index.ts
+import { nanoid as nanoid3 } from "nanoid";
+
+// src/se-import/translate.ts
+var SE_TO_LUMIA_PLACEHOLDER = {
+  name: "username",
+  username: "username",
+  displayName: "displayname",
+  sender: "gifter",
+  amount: "amount",
+  currency: "currency",
+  message: "message",
+  items: "itemsDetailed",
+  item: "firstItem.name",
+  count: "amount",
+  total: "total",
+  gifts: "giftAmount"
+};
+function listenerPlaceholderContext(listener) {
+  if (listener === "follower-latest") return { name: "twitch_last_follower", username: "twitch_last_follower" };
+  if (listener === "subscriber-latest" || listener === "subscriber-new-latest" || listener === "subscriber-resub-latest") {
+    return { name: "twitch_last_subscriber", username: "twitch_last_subscriber" };
+  }
+  if (listener === "subscriber-gifted-latest") return { name: "twitch_last_gifter", username: "twitch_last_gifter", amount: "twitch_last_gifter_amount", count: "twitch_last_gifter_amount" };
+  if (listener === "subscriber-alltime-gifter") return { name: "twitch_alltime_top_gifter", username: "twitch_alltime_top_gifter", amount: "twitch_alltime_top_gifter_amount", count: "twitch_alltime_top_gifter_amount" };
+  if (listener === "cheer-latest") return { name: "twitch_last_bit", username: "twitch_last_bit", amount: "twitch_last_bit_amount", count: "twitch_last_bit_amount" };
+  if (listener === "tip-latest" || listener === "latest_donator") {
+    return { name: "latest_donator", username: "latest_donator", amount: "latest_donator_amount", count: "latest_donator_amount", currency: "latest_donator_currency_symbol" };
+  }
+  if (listener === "raid-latest") return { name: "twitch_last_raider", username: "twitch_last_raider", amount: "twitch_last_raid_amount", count: "twitch_last_raid_amount" };
+  if (listener === "follower-session") return { amount: "twitch_session_follower_count", count: "twitch_session_follower_count" };
+  if (listener === "subscriber-session") return { amount: "twitch_session_subscribers_count", count: "twitch_session_subscribers_count" };
+  if (listener === "cheer-session") return { amount: "twitch_session_bits_count", count: "twitch_session_bits_count" };
+  if (listener === "tip-session") return { amount: "session_donation_amount", count: "session_donation_count", currency: "session_donation_amount_currency_symbol" };
+  if (listener === "follower-total") return { amount: "twitch_total_follower_count", count: "twitch_total_follower_count" };
+  if (listener === "subscriber-total") return { amount: "twitch_total_subscriber_count", count: "twitch_total_subscriber_count" };
+  if (listener === "cheer-total") return { amount: "twitch_total_bits_count", count: "twitch_total_bits_count" };
+  if (listener === "tip-total") return { amount: "total_donation_amount", count: "total_donation_amount", currency: "total_donation_amount_currency_symbol" };
+  if (listener === "tip-count") return { amount: "donation_count", count: "donation_count" };
+  if (listener === "cheer-session-top-donation") return { amount: "twitch_session_top_cheer_amount", count: "twitch_session_top_cheer_amount" };
+  if (listener === "cheer-session-top-donator") return { name: "twitch_session_top_cheerer", username: "twitch_session_top_cheerer", amount: "twitch_session_top_cheerer_amount", count: "twitch_session_top_cheerer_amount" };
+  if (listener === "tip-session-top-donation") return { amount: "session_top_donator_amount", count: "session_top_donator_amount", currency: "session_top_donator_currency_symbol" };
+  if (listener === "tip-session-top-donator") return { name: "session_top_donator", username: "session_top_donator", amount: "session_top_donator_amount", count: "session_top_donator_amount", currency: "session_top_donator_currency_symbol" };
+  if (listener === "twitch_session_chat_count") return { wins: "twitch_session_chat_count", count: "twitch_session_chat_count", amount: "twitch_session_chat_count" };
+  if (listener === "merch-latest" || listener === "purchase-latest") {
+    return {
+      name: "fourthwall_last_order.username",
+      username: "fourthwall_last_order.username",
+      amount: "fourthwall_last_order.amount",
+      count: "fourthwall_last_order.itemsCount",
+      currency: "fourthwall_last_order.currency",
+      items: "fourthwall_last_order.items",
+      item: "fourthwall_last_order.firstItem.name",
+      message: "fourthwall_last_order.message"
+    };
+  }
+  return {};
+}
+function translateSeText(input, listener) {
+  if (!input) return "";
+  const ctx = listener ? listenerPlaceholderContext(listener) : {};
+  return input.replace(/\{([a-zA-Z][a-zA-Z0-9_.]*)\}/g, (_match, raw) => {
+    const mapped = ctx[raw] ?? SE_TO_LUMIA_PLACEHOLDER[raw] ?? raw;
+    return `{{${mapped}}}`;
+  });
+}
+function listenerToLumiaVariable(listener) {
+  if (typeof listener !== "string" || !listener) return "username";
+  const m = {
+    // Latest events
+    "follower-latest": "twitch_last_follower",
+    "subscriber-latest": "twitch_last_subscriber",
+    "subscriber-new-latest": "twitch_last_subscriber",
+    "subscriber-resub-latest": "twitch_last_subscriber",
+    "subscriber-gifted-latest": "twitch_last_gifter",
+    "subscriber-alltime-gifter": "twitch_alltime_top_gifter",
+    "tip-latest": "latest_donator",
+    "cheer-latest": "twitch_last_bit",
+    "raid-latest": "twitch_last_raider",
+    // Counters — session / total / week / month
+    "follower-session": "twitch_session_follower_count",
+    "follower-week": "twitch_week_follower_count",
+    "follower-month": "twitch_month_follower_count",
+    "follower-total": "twitch_total_follower_count",
+    "subscriber-session": "twitch_session_subscribers_count",
+    "subscriber-new-session": "twitch_session_new_subscribers_count",
+    "subscriber-resub-session": "twitch_session_resub_subscribers_count",
+    "subscriber-gifted-session": "twitch_session_gifted_subscribers_count",
+    "subscriber-week": "twitch_week_subscriber_count",
+    "subscriber-month": "twitch_month_subscriber_count",
+    "subscriber-total": "twitch_total_subscriber_count",
+    "cheer-session": "twitch_session_bits_count",
+    "cheer-week": "twitch_week_bits_count",
+    "cheer-month": "twitch_month_bits_count",
+    "cheer-total": "twitch_total_bits_count",
+    "tip-session": "session_donation_amount",
+    "tip-week": "week_donation_amount",
+    "tip-month": "month_donation_amount",
+    "tip-total": "total_donation_amount",
+    "tip-count": "donation_count",
+    // Top donors / cheerers — session / week / month / all-time
+    "tip-session-top-donation": "session_top_donator_amount",
+    "tip-session-top-donator": "session_top_donator",
+    "tip-weekly-top-donation": "week_top_donator_amount",
+    "tip-weekly-top-donator": "week_top_donator",
+    "tip-monthly-top-donation": "month_top_donator_amount",
+    "tip-monthly-top-donator": "month_top_donator",
+    "tip-alltime-top-donation": "top_donator_amount",
+    "tip-alltime-top-donator": "top_donator",
+    "cheer-session-top-donation": "twitch_session_top_cheer_amount",
+    "cheer-session-top-donator": "twitch_session_top_cheerer",
+    // Hype train readouts (SE captures these as listener keys on text widgets)
+    "hypetrain-latest": "twitch_hypetrain_total",
+    "hypetrain-level-progress": "twitch_hypetrain_progress",
+    "hypetrain-level-goal": "twitch_hypetrain_level_goal",
+    "hypetrain-total": "twitch_hypetrain_total",
+    "hypetrain-latest-top-contributors": "twitch_hypetrain_top_contributor",
+    "cheer-weekly-top-donation": "twitch_week_top_cheerer_amount",
+    "cheer-weekly-top-donator": "twitch_week_top_cheerer",
+    "cheer-monthly-top-donation": "twitch_month_top_cheerer_amount",
+    "cheer-monthly-top-donator": "twitch_month_top_cheerer",
+    "cheer-alltime-top-donation": "twitch_alltime_top_cheerer_amount",
+    "cheer-alltime-top-donator": "twitch_alltime_top_cheerer"
+  };
+  return m[listener] ?? listener.replace(/-/g, "_");
+}
+function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
+  const toPx = (v, fallback, axis) => {
+    if (v == null) return fallback;
+    if (typeof v === "number") return v;
+    const s = v.trim();
+    if (s === "auto" || s === "") return fallback;
+    if (s.endsWith("%")) {
+      const pct = parseFloat(s);
+      if (canvas && axis && Number.isFinite(pct)) {
+        const base = axis === "width" ? canvas.width : canvas.height;
+        return pct / 100 * base;
+      }
+      return fallback;
+    }
+    const parsed = parseFloat(s);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  };
+  const width = toPx(css.width, defaults.width, "width");
+  const height = toPx(css.height, defaults.height, "height");
+  let x = toPx(css.left, 0, "width");
+  let y = toPx(css.top, 0, "height");
+  if (typeof css.transform === "string" && css.transform.includes("translate")) {
+    const m = /translate\s*\(\s*([^,)]+)\s*(?:,\s*([^)]+))?\s*\)/i.exec(css.transform);
+    if (m) {
+      const parseShift = (raw, basis) => {
+        if (!raw) return 0;
+        const s = raw.trim();
+        if (s.endsWith("%")) {
+          const pct = parseFloat(s);
+          return Number.isFinite(pct) ? pct / 100 * basis : 0;
+        }
+        const px = parseFloat(s);
+        return Number.isFinite(px) ? px : 0;
+      };
+      x += parseShift(m[1], width);
+      y += parseShift(m[2], height);
+    }
+  }
+  return {
+    x,
+    y,
+    width,
+    height,
+    opacity: css.opacity ?? 1,
+    zIndex: css["z-index"] ?? 0
+  };
+}
+var LUMIA_DEFAULT_SIZES = {
+  text: { width: 600, height: 200 },
+  image: { width: 200, height: 200 },
+  video: { width: 400, height: 220 },
+  audio: { width: 200, height: 200 },
+  slideshow: { width: 400, height: 220 },
+  alert: { width: 700, height: 600 },
+  goal: { width: 740, height: 80 },
+  timer: { width: 740, height: 80 },
+  chatbox: { width: 375, height: 470 },
+  eventlist: { width: 375, height: 470 },
+  credits: { width: 700, height: 700 },
+  custom: { width: 700, height: 700 },
+  emotealert: { width: 600, height: 600 },
+  emotebox: { width: 400, height: 400 },
+  nowplaying: { width: 600, height: 250 },
+  spotify: { width: 600, height: 250 },
+  youtubemusic: { width: 600, height: 250 }
+};
+function translateVariationCondition(seType, seCondition, requirement) {
+  if (seType === "gift") return { conditionType: "IS_GIFT", condition: 1 };
+  if (seType === "communityGift") return { conditionType: "GIFT_SUB_GREATER", condition: requirement ?? 0 };
+  if (seCondition === "EXACT" && requirement != null) return { conditionType: "EQUAL_NUMBER", condition: requirement };
+  if (seCondition === "ATLEAST" && requirement != null) {
+    return { conditionType: "GREATER_NUMBER", condition: requirement };
+  }
+  return null;
+}
+var LUMIA_LAYOUTS = /* @__PURE__ */ new Set(["column", "row", "onlyImage", "onlyText", "imageOver", "textOver"]);
+function translateLayout(seLayout) {
+  if (seLayout && LUMIA_LAYOUTS.has(seLayout)) return seLayout;
+  return "column";
+}
+
+// src/se-import/mappers/build.ts
+import { nanoid } from "nanoid";
+var currentImportCanvas = null;
+function setImportCanvas(canvas) {
+  currentImportCanvas = canvas;
+}
+function buildUnit(widget, lumiaType, moduleExtras) {
+  const id = nanoid();
+  const defaults = LUMIA_DEFAULT_SIZES[lumiaType] ?? { width: 400, height: 400 };
+  const bounds = seCssToBounds(widget.css, defaults, currentImportCanvas ?? void 0);
+  const layer = {
+    id,
+    state: { visible: widget.visible ?? true, locked: widget.locked ?? false },
+    bounds: {
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+      scale: [1, 1],
+      opacity: bounds.opacity,
+      zIndex: bounds.zIndex
+    }
+  };
+  const module = {
+    id,
+    version: 1,
+    settings: {
+      type: lumiaType,
+      title: widget.name ?? null,
+      locked: widget.locked ?? false
+    },
+    lights: [],
+    css: {},
+    content: {},
+    variables: {},
+    events: {},
+    ...moduleExtras
+  };
+  return { layer, module };
+}
+
+// src/se-import/mappers/basic.ts
+function mapText(widget) {
+  const value = translateSeText(widget.text?.value ?? "");
+  const seCss = widget.text?.css ?? {};
+  return buildUnit(widget, "text", {
+    content: {
+      value,
+      highlightColor: "inherit"
+    },
+    css: {
+      fontSize: seCss["font-size"] ?? 24,
+      textAlign: seCss["text-align"] ?? "center",
+      fontFamily: seCss["font-family"] ?? "Roboto",
+      fontWeight: seCss["font-weight"] ?? "bold",
+      color: seCss["color"] ?? "#ffffff",
+      textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
+      lineHeight: seCss["line-height"] ?? 1,
+      background: "transparent"
+    }
+  });
+}
+function mapImage(widget) {
+  return buildUnit(widget, "image", {
+    content: {
+      src: widget.image?.src ?? "",
+      loop: true
+    }
+  });
+}
+function mapVideo(widget) {
+  return buildUnit(widget, "video", {
+    content: {
+      src: widget.video?.src ?? "",
+      volume: widget.video?.volume ?? 0.5,
+      loop: true,
+      muted: false
+    }
+  });
+}
+function mapReadout(widget, fallbackVar) {
+  const explicitListener = widget.variables?.listener;
+  const explicit = typeof explicitListener === "string" ? explicitListener : null;
+  const widgetListener = typeof widget.listener === "string" ? widget.listener : null;
+  const listener = explicit ?? widgetListener ?? fallbackVar;
+  const variable = listenerToLumiaVariable(listener);
+  const userTemplate = widget.text?.value ?? "";
+  const inheritsText = userTemplate.trim().length > 0 && /\{[a-zA-Z]/.test(userTemplate);
+  const value = inheritsText ? translateSeText(userTemplate, listener) : `{{${variable}}}`;
+  const seCss = widget.text?.css ?? {};
+  return buildUnit(widget, "text", {
+    content: { value, highlightColor: "inherit" },
+    css: {
+      fontSize: seCss["font-size"] ?? 28,
+      textAlign: seCss["text-align"] ?? "center",
+      fontFamily: seCss["font-family"] ?? "Roboto",
+      fontWeight: seCss["font-weight"] ?? "bold",
+      color: seCss["color"] ?? "#ffffff",
+      textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
+      lineHeight: seCss["line-height"] ?? 1,
+      background: "transparent"
+    }
+  });
+}
+
+// src/se-import/mappers/alert.ts
+var SE_EVENT_TO_LUMIA_ALERT = {
+  follower: "twitch-follower",
+  subscriber: "twitch-subscriber",
+  tip: "streamelements-donation",
+  cheer: "twitch-bits",
+  raid: "twitch-raid",
+  // Merch / shop-order — Lumia's Fourthwall integration is the data path most
+  // users now have wired up since SE deprecated their own merch flow in favor
+  // of Fourthwall. `fourthwall-shopOrder` is the alert key from
+  // LumiaAlertValues / activity.types.ts.
+  merch: "fourthwall-shopOrder",
+  purchase: "fourthwall-shopOrder",
+  charityCampaignDonation: "twitch-charityDonation",
+  host: "twitch-raid",
+  redemption: "twitch-redemption"
+};
+function pickGraphics(g) {
+  if (!g) return { type: "image", content: { src: "", loop: false, volume: 1 } };
+  return {
+    type: g.type === "video" ? "video" : "image",
+    content: {
+      src: g.src ?? "",
+      loop: false,
+      volume: g.volume ?? 0.5
+    }
+  };
+}
+var SE_DEFAULT_DURATION_BY_EVENT = {
+  follower: 5,
+  subscriber: 10,
+  tip: 5,
+  cheer: 5,
+  raid: 8,
+  host: 8,
+  merch: 8,
+  purchase: 8,
+  charityCampaignDonation: 8,
+  redemption: 5
+};
+function buildAlertEvent(seEvent, seEventType) {
+  if (!seEvent) {
+    return { on: false, variations: [] };
+  }
+  const text = seEvent.text ?? {};
+  const css = text.css ?? {};
+  const messageCss = css.message ?? {};
+  const highlight = css.highlights ?? {};
+  const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType)).filter((v) => v != null);
+  const defaultDuration = (seEventType && SE_DEFAULT_DURATION_BY_EVENT[seEventType]) ?? 8;
+  return {
+    on: seEvent.enabled !== false,
+    theme: "CUSTOM",
+    themeSettings: {
+      primaryColor: null,
+      accentColor: null,
+      highlightColor: highlight.color ?? null,
+      firstMessageTemplate: translateSeText(text.message ?? "{{username}}"),
+      secondMessageTemplate: "",
+      thirdMessageTemplate: "",
+      showAvatar: false,
+      showAmount: true,
+      showBrandIcon: true
+    },
+    settings: { duration: (seEvent.duration ?? defaultDuration) * 1e3 },
+    layout: { value: translateLayout(seEvent.layout), css: {}, customCss: "" },
+    text: {
+      css: {
+        fontFamily: css["font-family"] ?? "Roboto",
+        fontSize: css["font-size"] ?? 30,
+        color: css.color ?? "#ffffff",
+        fontWeight: css["font-weight"] ?? "bold",
+        textShadow: css["text-shadow"] ?? "rgba(0, 0, 0, 0.8) 1px 1px 1px",
+        textAlign: css["text-align"] ?? "center"
+      },
+      messageCss,
+      content: { value: translateSeText(text.message ?? "") }
+    },
+    media: pickGraphics(seEvent.graphics),
+    audio: {
+      content: {
+        src: seEvent.audio?.src ?? "",
+        volume: seEvent.audio?.volume ?? 0.5
+      }
+    },
+    animations: {
+      alertEnterAnimation: seEvent.animation?.in ?? "fadeIn",
+      alertEnterAnimationDuration: (seEvent.animation?.inDuration ?? 1) * 1e3,
+      alertExitAnimation: seEvent.animation?.out ?? "fadeOut",
+      alertExitAnimationDuration: (seEvent.animation?.outDuration ?? 1) * 1e3,
+      textEnterAnimation: text.animation ?? "",
+      textEnterAnimationDuration: 1e3
+    },
+    tts: {
+      enabled: !!seEvent.tts?.enabled,
+      voice: seEvent.tts?.voice ?? "Brian",
+      volume: seEvent.tts?.volume ?? 0.75,
+      minAmount: seEvent.tts?.minAmount ?? 0
+    },
+    variations
+  };
+}
+function buildAlertVariation(v, seEventType) {
+  const translated = translateVariationCondition(v.type ?? null, v.condition ?? null, v.requirement ?? null);
+  if (!translated) return null;
+  const base = buildAlertEvent(v.settings, seEventType);
+  return {
+    name: v.name ?? "Variation",
+    on: v.enabled !== false,
+    randomChance: v.chance ?? 100,
+    conditionType: translated.conditionType,
+    condition: translated.condition,
+    conditionExtra: null,
+    ...base
+  };
+}
+function mapAlertBox(widget, opts = {}) {
+  const v = widget.variables ?? {};
+  const events = {};
+  const eventKeys = opts.onlyEvents ?? ["follower", "subscriber", "tip", "cheer", "raid", "merch", "purchase", "charityCampaignDonation"];
+  for (const seKey of eventKeys) {
+    const ev = v[seKey];
+    if (!ev || typeof ev !== "object") continue;
+    const lumiaAlert = SE_EVENT_TO_LUMIA_ALERT[seKey];
+    if (!lumiaAlert) continue;
+    events[lumiaAlert] = buildAlertEvent(ev, seKey);
+  }
+  return buildUnit(widget, "alert", { alert: { events } });
+}
+function mapSingleAlert(widget, lumiaAlertKey) {
+  const v = widget.variables ?? {};
+  const events = {
+    [lumiaAlertKey]: buildAlertEvent(v)
+  };
+  return buildUnit(widget, "alert", { alert: { events } });
+}
+
+// src/se-import/mappers/goal.ts
+function currentForListener(listener) {
+  if (!listener) return "0";
+  if (listener.startsWith("follower-")) return "{{twitch_total_follower_count}}";
+  if (listener.startsWith("subscriber-")) return "{{twitch_total_subscriber_count}}";
+  if (listener.startsWith("cheer-")) return "{{twitch_total_bits_count}}";
+  if (listener.startsWith("tip-")) return "{{total_donation_amount}}";
+  if (listener.startsWith("merch-")) return "{{fourthwall_total_order_count}}";
+  return "0";
+}
+function mapGoal(widget) {
+  const v = widget.variables ?? {};
+  const listener = v.goalListener ?? (typeof widget.listener === "string" ? widget.listener : null);
+  return buildUnit(widget, "goal", {
+    content: {
+      version: 1,
+      // Matches GoalTypes enum in components/Modules/Views/Goal/types.ts.
+      type: "bar",
+      label: translateSeText(v.title ?? "Goal"),
+      subLabel: "",
+      // The Goal module renders this template literal with {{current}} + {{goal}} substituted.
+      display: "{{current}} / {{goal}}",
+      // `current` is a template variable reference (resolved at render time from session variables).
+      // `targetGoal` is the numeric ceiling. Both required by Goal/index.tsx:28-29.
+      current: currentForListener(listener),
+      targetGoal: String(v.goalAmount ?? 100),
+      image: "",
+      audio: { decrement: "", increment: "", goal: "", goalFailed: "", volume: 1 },
+      // `null` (rather than `''`) is the cleaner contract — Goal/index.tsx:11's
+      // `isGoalExpired` treats any falsy as not-expired so both work at render time,
+      // but `null` survives JSON round-trips without ambiguity ('' vs unset).
+      endDate: v.endDate ?? null,
+      goalAnimation: "",
+      goalAnimationLoop: true,
+      unfilledColor: v.backgroundColor ?? "#400022",
+      filledColor: v.fillColor ?? "#ff0055",
+      alignItemsToEdges: false,
+      border: "solid 1px transparent",
+      borderRadius: "40px",
+      highlightColor: "inherit",
+      // SE-only fields preserved as provenance — no native Lumia equivalent.
+      se_source_listener: listener,
+      se_simple_design: !!v.simpleDesign
+    },
+    css: {
+      borderRadius: "0px",
+      borderStyle: "solid",
+      borderWidth: "0px",
+      borderColor: "transparent",
+      lineHeight: 1,
+      fontSize: 30,
+      textAlign: "center",
+      fontFamily: "Roboto",
+      fontWeight: "bold",
+      color: "#ffffff",
+      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+      background: "transparent"
+    }
+  });
+}
+
+// src/se-import/mappers/custom.ts
+var SE_FIELD_TYPE_TO_LUMIA = {
+  text: "input",
+  number: "number",
+  checkbox: "checkbox",
+  dropdown: "dropdown",
+  slider: "slider",
+  colorpicker: "colorpicker",
+  fontpicker: "fontpicker",
+  image: "input"
+};
+function translateConfigs(seFields) {
+  if (!seFields) return [];
+  return Object.entries(seFields).map(([key, f]) => ({
+    key,
+    label: f.label ?? key,
+    type: SE_FIELD_TYPE_TO_LUMIA[f.type ?? "text"] ?? "input",
+    value: f.value,
+    options: f.options
+  }));
+}
+function mapCustom(widget) {
+  const v = widget.variables ?? {};
+  const parse = (x) => {
+    if (x == null) return void 0;
+    if (typeof x !== "string") return x;
+    try {
+      return JSON.parse(x);
+    } catch {
+      return void 0;
+    }
+  };
+  const fields = parse(v.fields) ?? v.fields;
+  const fieldData = parse(v.fieldData) ?? v.fieldData;
+  return buildUnit(widget, "custom", {
+    content: {
+      codeId: String(widget.id),
+      html: v.html ?? "",
+      css: v.css ?? "",
+      js: v.js ?? "",
+      configs: translateConfigs(fields),
+      data: fieldData ?? {},
+      flavor: "streamelements"
+    }
+  });
+}
+var SEASONAL_TEMPLATE_HTML = '<canvas id="particles"></canvas>';
+var SEASONAL_TEMPLATE_CSS = `html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
+#particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }`;
+var SEASONAL_TEMPLATE_JS = `const SEASONS = {
+  snow:      { emoji: '\\u2744',  count: 80, sizeMin: 14, sizeMax: 28, gravity: 1.0, drift: 0.6, sway: 1.2 },
+  halloween: { emoji: '\\ud83d\\udc7b',  count: 25, sizeMin: 28, sizeMax: 44, gravity: 0.6, drift: 0.4, sway: 0.8 },
+  xmas:      { emoji: '\\u2744',  count: 120, sizeMin: 16, sizeMax: 32, gravity: 1.1, drift: 0.7, sway: 1.3 },
+  valentine: { emoji: '\\u2764\\ufe0f', count: 50, sizeMin: 18, sizeMax: 34, gravity: 0.8, drift: 0.5, sway: 1.0 },
+  easter:    { emoji: '\\ud83e\\udd5a',  count: 30, sizeMin: 22, sizeMax: 38, gravity: 0.9, drift: 0.3, sway: 0.4 },
+  worldcup:  { emoji: '\\u26bd', count: 25, sizeMin: 24, sizeMax: 40, gravity: 1.1, drift: 0.4, sway: 0.5 },
+};
+const cfg = SEASONS[(window.DATA && window.DATA.season) || 'snow'] || SEASONS.snow;
+const canvas = document.getElementById('particles');
+const ctx = canvas.getContext('2d');
+const dpr = window.devicePixelRatio || 1;
+function resize() {
+  canvas.width = window.innerWidth * dpr;
+  canvas.height = window.innerHeight * dpr;
+  canvas.style.width = window.innerWidth + 'px';
+  canvas.style.height = window.innerHeight + 'px';
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+}
+resize();
+window.addEventListener('resize', resize);
+const particles = [];
+for (let i = 0; i < cfg.count; i++) {
+  particles.push({
+    x: Math.random() * window.innerWidth,
+    y: Math.random() * window.innerHeight - window.innerHeight,
+    size: cfg.sizeMin + Math.random() * (cfg.sizeMax - cfg.sizeMin),
+    speed: 0.5 + Math.random() * 1.5,
+    phase: Math.random() * Math.PI * 2,
+  });
+}
+function tick(now) {
+  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  const t = now / 1000;
+  for (const p of particles) {
+    p.y += p.speed * cfg.gravity;
+    const sway = Math.sin(t + p.phase) * cfg.sway;
+    if (p.y > window.innerHeight + 40) {
+      p.y = -40;
+      p.x = Math.random() * window.innerWidth;
+    }
+    ctx.font = p.size + 'px serif';
+    ctx.fillText(cfg.emoji, p.x + sway * 20, p.y);
+  }
+  requestAnimationFrame(tick);
+}
+requestAnimationFrame(tick);`;
+function mapSeasonal(widget, season) {
+  return buildUnit(widget, "custom", {
+    content: {
+      codeId: `seasonal-${season}-${widget.id}`,
+      html: SEASONAL_TEMPLATE_HTML,
+      css: SEASONAL_TEMPLATE_CSS,
+      js: SEASONAL_TEMPLATE_JS,
+      configs: [
+        {
+          key: "season",
+          label: "Season",
+          type: "dropdown",
+          value: season,
+          options: { snow: "Snow", halloween: "Halloween", xmas: "Christmas", valentine: "Valentine's", easter: "Easter", worldcup: "World Cup" }
+        }
+      ],
+      data: { season },
+      flavor: "lumia-seasonal"
+    }
+  });
+}
+
+// src/se-import/mappers/misc.ts
+function mapChatbox(widget) {
+  const v = widget.variables ?? {};
+  const fadeOutSeconds = typeof v.fadeOut === "number" ? v.fadeOut : 0;
+  return buildUnit(widget, "chatbox", {
+    content: {
+      theme: v.theme ?? "default",
+      fadeOutAfterDelay: fadeOutSeconds > 0,
+      fadeOutDelayTime: fadeOutSeconds,
+      showAvatar: true,
+      // SE `messageDelay` (between-message delay) and `delay` (initial delay) have no
+      // Lumia equivalent today — kept as provenance so users can wire them later if
+      // Lumia adds the feature.
+      se_message_delay: v.messageDelay,
+      se_initial_delay: v.delay,
+      // SE `ignored` (per-user ignore) and `highlight` (per-user emphasis) likewise
+      // have no Lumia equivalent — preserved as provenance only.
+      se_ignored_users: v.ignored,
+      se_highlight_users: v.highlight
+    }
+  });
+}
+var SE_LISTENER_TO_LUMIA_CATEGORY = {
+  "follower-latest": "follower",
+  "subscriber-latest": "subscribers",
+  "subscriber-new-latest": "subscribers",
+  "subscriber-resub-latest": "subscribers",
+  "subscriber-gifted-latest": "gifts",
+  "community-gift-latest": "gifts",
+  "cheer-latest": "bits",
+  "cheerPurchase-latest": "bits",
+  "tip-latest": "donation",
+  "raid-latest": "raids",
+  "host-latest": "hosts",
+  "redemption-latest": "redemption",
+  "merch-latest": "purchases",
+  "purchase-latest": "purchases",
+  "superchat-latest": "superchats",
+  "hypetrain-latest": "hypetrain"
+};
+var ALL_LUMIA_EVENTLIST_CATEGORIES = [
+  "redemption",
+  "follower",
+  "bits",
+  "kicks",
+  "extension",
+  "points",
+  "donation",
+  "subscribers",
+  "gifts",
+  "hosts",
+  "raids",
+  "hypetrain",
+  "spells",
+  "retweets",
+  "likes",
+  "purchases",
+  "superstickers",
+  "superchats",
+  "stars",
+  "fans",
+  "shares",
+  "raffles",
+  "others"
+];
+function computeListenerFilters(seListeners, explicitListener) {
+  const enabled = [];
+  if (seListeners && typeof seListeners === "object" && !Array.isArray(seListeners)) {
+    for (const [k, v] of Object.entries(seListeners)) {
+      if (v) enabled.push(k);
+    }
+  } else if (Array.isArray(seListeners)) {
+    enabled.push(...seListeners);
+  }
+  if (typeof explicitListener === "string" && explicitListener && !enabled.includes(explicitListener)) {
+    enabled.push(explicitListener);
+  }
+  if (enabled.length === 0) return [];
+  const allowed = /* @__PURE__ */ new Set();
+  for (const listener of enabled) {
+    const category = SE_LISTENER_TO_LUMIA_CATEGORY[listener];
+    if (category) allowed.add(category);
+  }
+  if (allowed.size === 0) return [];
+  return ALL_LUMIA_EVENTLIST_CATEGORIES.filter((c) => !allowed.has(c));
+}
+function mapEventList(widget) {
+  const v = widget.variables ?? {};
+  const filters = computeListenerFilters(widget.listeners, widget.listener);
+  const maxItems = v.visibleEvents ?? v.visibleItems ?? 5;
+  return buildUnit(widget, "eventlist", {
+    content: {
+      theme: v.theme ?? "simple",
+      direction: v.direction ?? "top",
+      maxItemsToShow: maxItems,
+      visibleEvents: maxItems,
+      // legacy field name kept for back-compat
+      themeBgOpacity: v.themeBgOpacity ?? 0,
+      highlight: v.highlight,
+      // `filters` is a blacklist: every category here is HIDDEN. Empty = show all.
+      filters,
+      // `sites` is a platform blacklist (same shape). Default to "no platforms hidden".
+      sites: [],
+      // Eventlist Manager assumes these objects exist; provide an empty stub so
+      // imported overlays render without throwing.
+      themeConfig: {},
+      eventListType: {},
+      condensedText: false,
+      horizontal: false,
+      showAlertIcon: true,
+      showSiteIcon: true,
+      showUserAvatar: true,
+      showDetailedText: false,
+      hideAlertMessage: false
+    }
+  });
+}
+var CREDITS_DEFAULT_EVENTS_TO_SHOW = {
+  mods: false,
+  subscribers: true,
+  gifts: true,
+  donations: true,
+  purchases: true,
+  bits: true,
+  kicks: true,
+  raids: true,
+  hosts: true,
+  superstickers: true,
+  superchats: true,
+  redemptions: true,
+  stars: true,
+  fans: true,
+  shares: false,
+  spells: true,
+  likes: false,
+  followers: true,
+  others: false,
+  topGifts: true,
+  topBits: true,
+  topKicks: true,
+  topDonations: true,
+  topSuperstickers: true,
+  topSuperchats: true,
+  topRedemptions: true
+};
+function mapCredits(widget) {
+  const v = widget.variables ?? {};
+  const itemGap = typeof v.padding === "number" ? v.padding : void 0;
+  const reverseFlow = v.direction === "bottom";
+  return buildUnit(widget, "credits", {
+    content: {
+      type: "basic",
+      title: "Stream Credits",
+      subtitle: "",
+      speed: 1,
+      loop: false,
+      eventsToShow: { ...CREDITS_DEFAULT_EVENTS_TO_SHOW },
+      itemGap,
+      reverseFlow,
+      // SE-specific knobs preserved as provenance; no direct Lumia equivalent for
+      // these. `chosenFilter` would narrow eventsToShow if we had a clean mapping;
+      // `separator` would join entries but Lumia credits uses sectioned cards instead.
+      se_chosen_filter: v.chosenFilter,
+      se_separator: v.separator,
+      se_amount: v.amount
+    }
+  });
+}
+function mapSlideshow(widget) {
+  const v = widget.variables ?? {};
+  const sources = (v.images ?? []).map((i) => typeof i === "string" ? i : i.src ?? "").filter(Boolean);
+  const seAnim = typeof v.animation === "object" && v.animation !== null ? v.animation : {};
+  return buildUnit(widget, "slideshow", {
+    content: {
+      items: sources.map((src) => ({ src })),
+      // `interval` of 0 = "rapid cycle" in SE (no delay between images); Lumia's
+      // `imageDuration` is the total ms per image. Distinguish three cases:
+      //   - undefined → use 5000ms default
+      //   - 0 → minimum sane cycle of 100ms (browsers can't render faster than ~60fps anyway)
+      //   - >0 → SE seconds * 1000
+      imageDuration: typeof v.interval === "number" ? v.interval === 0 ? 100 : v.interval * 1e3 : 5e3,
+      loop: v.loop !== false,
+      loopDelay: 0,
+      delay: 0,
+      playAudio: !!v.playAudio,
+      random: !!v.random,
+      animation: {
+        enterAnimation: typeof v.animation === "string" ? v.animation : seAnim.in ?? "fadeIn",
+        exitAnimation: typeof v.animation === "string" ? v.animation : seAnim.out ?? "fadeOut",
+        enterAnimationDuration: (seAnim.inDuration ?? 1) * 1e3,
+        exitAnimationDuration: (seAnim.outDuration ?? 1) * 1e3,
+        enterAnimationDelay: (seAnim.inDelay ?? 0) * 1e3,
+        exitAnimationDelay: (seAnim.outDelay ?? 0) * 1e3
+      },
+      se_interval: v.interval,
+      se_raw_duration: v.duration
+    }
+  });
+}
+function mapTimer(widget) {
+  const v = widget.variables ?? {};
+  let days = 0, hours = 0, minutes = 5, seconds = 0;
+  let absoluteDate = v.date ?? v.endsAt ?? v.endDate;
+  let resolved = false;
+  if (absoluteDate) {
+    const target = Date.parse(absoluteDate);
+    if (Number.isFinite(target)) {
+      let remainingMs = target - Date.now();
+      if (remainingMs > 0) {
+        const ONE_DAY = 24 * 60 * 60 * 1e3;
+        days = Math.floor(remainingMs / ONE_DAY);
+        remainingMs -= days * ONE_DAY;
+        hours = Math.floor(remainingMs / (60 * 60 * 1e3));
+        remainingMs -= hours * 60 * 60 * 1e3;
+        minutes = Math.floor(remainingMs / (60 * 1e3));
+        remainingMs -= minutes * 60 * 1e3;
+        seconds = Math.floor(remainingMs / 1e3);
+        resolved = true;
+      }
+    }
+  }
+  if (!resolved && v.duration != null) {
+    if (typeof v.duration === "number" && Number.isFinite(v.duration) && v.duration > 0) {
+      const totalSeconds = Math.floor(v.duration * 60);
+      days = Math.floor(totalSeconds / 86400);
+      hours = Math.floor(totalSeconds % 86400 / 3600);
+      minutes = Math.floor(totalSeconds % 3600 / 60);
+      seconds = totalSeconds % 60;
+      resolved = true;
+    } else if (typeof v.duration === "object" && v.duration !== null) {
+      const d = v.duration;
+      days = typeof d.days === "number" ? d.days : 0;
+      hours = typeof d.hours === "number" ? d.hours : 0;
+      minutes = typeof d.minutes === "number" ? d.minutes : 0;
+      seconds = typeof d.seconds === "number" ? d.seconds : 0;
+      if (days || hours || minutes || seconds) resolved = true;
+    }
+  }
+  if (!resolved) {
+    days = 0;
+    hours = 0;
+    minutes = 5;
+    seconds = 0;
+  }
+  const parts = [];
+  if (v.days !== false) parts.push("{{days}} days");
+  if (v.hours !== false || v.minutes !== false || v.seconds !== false) {
+    const clockBits = [];
+    if (v.hours !== false) clockBits.push("{{hours}}");
+    if (v.minutes !== false) clockBits.push("{{minutes}}");
+    if (v.seconds !== false) clockBits.push("{{seconds}}");
+    if (clockBits.length) parts.push(clockBits.join(":"));
+  }
+  return buildUnit(widget, "timer", {
+    content: {
+      version: 1,
+      type: "countdown",
+      value: { days, hours, minutes, seconds },
+      display: parts.join(" ") || "{{minutes}}:{{seconds}}",
+      showMilliseconds: false,
+      endAnimation: "",
+      hideAfter: 0,
+      messageAfterCountdown: translateSeText(v.messageAfterCountdown ?? ""),
+      changeMessageAfter: !!v.changeMessageAfterCountdown,
+      se_date: v.date,
+      se_exact_time: v.exactTime
+    }
+  });
+}
+function mapNowPlaying(widget) {
+  const v = widget.variables ?? {};
+  const source = v.provider === "youtube" ? "youtubemusic" : "spotify";
+  return buildUnit(widget, "nowplaying", {
+    content: {
+      version: 1,
+      type: "nowplaying",
+      source,
+      theme: "basic",
+      borderRadius: "30px",
+      songTitle: `{{${source}_now_playing_song=Lumia Dream}}`,
+      songArtist: `{{${source}_now_playing_artist}}`,
+      songImg: `{{${source}_now_playing_image}}`,
+      showImg: true,
+      oneLineTitle: false,
+      highlightColor: "inherit",
+      se_simple_design: !!v.simpleDesign
+    },
+    css: {
+      borderRadius: "0px",
+      borderStyle: "solid",
+      borderWidth: "0px",
+      borderColor: "transparent",
+      lineHeight: 1,
+      textAlign: "left",
+      fontFamily: "Be Vietnam Pro",
+      color: "#ffffff",
+      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+      background: "transparent"
+    }
+  });
+}
+var SE_KAPPAGEN_EVENT_TO_LUMIA_ALERT = {
+  follower: "twitch-follower",
+  subscriber: "twitch-subscriber",
+  cheer: "twitch-bits",
+  raid: "twitch-raid",
+  host: "twitch-host",
+  tip: "streamelements-donation",
+  purchase: "streamlabs-merch",
+  embers: "youtube-superchat"
+};
+function mapKappagen(widget) {
+  const v = widget.variables ?? {};
+  const eventsFromNested = v.eventsConfig ? {
+    subscriber: v.eventsConfig.subscriber?.enabled ?? true,
+    follower: v.eventsConfig.follower?.enabled ?? true,
+    cheer: v.eventsConfig.cheer?.enabled ?? true,
+    raid: v.eventsConfig.raid?.enabled ?? true,
+    tip: v.eventsConfig.tip?.enabled ?? true
+  } : null;
+  const events = v.events ?? eventsFromNested ?? { subscriber: true, follower: true, cheer: true, raid: true, tip: true };
+  const alertTriggers = Object.entries(events).filter(([, enabled]) => !!enabled).map(([seKey]) => SE_KAPPAGEN_EVENT_TO_LUMIA_ALERT[seKey]).filter((x) => !!x);
+  const alertEmotes = ["Kappa", "<3", "imGlitch"];
+  return buildUnit(
+    widget,
+    "emotealert",
+    {
+      content: {
+        version: 1,
+        // Lumia's animation type ('random', 'rise', 'fall', etc.). SE only has rough
+        // equivalents — `direction` maps closest. Default to 'random'.
+        type: v.direction === "up" ? "rise" : v.direction === "down" ? "fall" : "random",
+        excludedAnimations: [],
+        src: "",
+        userLevels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        ignoredList: [],
+        emojis: !!v.emoji,
+        background: "transparent",
+        theme: "dark",
+        imageSize: typeof v.size === "number" ? v.size : 30,
+        animationTime: typeof v.duration === "number" ? v.duration : 5,
+        duration: typeof v.duration === "number" ? v.duration : 5,
+        useAnimatedEmotes: true,
+        alertNumberEmotes: typeof v.limit === "number" && v.limit > 0 ? v.limit : 30,
+        alertEmotes,
+        alertTriggers,
+        // Lumia BTTV/FFZ/7TV per-source toggles — read by Emotealert/index.tsx:48.
+        emoteSources: {
+          bttv: v.bttv !== false,
+          ffz: v.ffz !== false,
+          sevenTv: v.sevenTv !== false
+        },
+        // SE-only knobs preserved as provenance; no Lumia rendering for these.
+        se_mode: v.mode,
+        se_cheersplosions: !!v.cheersplosions,
+        se_emotesplosion: v.emotesplosion,
+        se_emotesplosion_dir: v.emotesplosiondir,
+        se_emotesplosion_duration: v.emotesplosionduration,
+        se_spawn_zone: v.spawnzone,
+        se_fullscreen: !!v.fullscreen,
+        se_direction: v.direction
+      },
+      css: { background: "transparent" }
+    }
+  );
+}
+function mapLeaderboardFromVariables(widget, currency) {
+  const v = widget.variables ?? {};
+  const count = v.limit ?? v.visibleItems ?? 10;
+  const window = v.period === "weekly" ? "week" : v.period === "monthly" ? "month" : "alltime";
+  const title = currency === "tips" ? "Top Tippers" : currency === "cheers" ? "Top Cheerers" : "Top Gifters";
+  return buildUnit(widget, "loyaltyleaderboard", {
+    content: {
+      source: "variables",
+      currency,
+      window,
+      count,
+      title,
+      showTitle: true,
+      showHeader: false,
+      showCurrentPoints: false,
+      showAllTimePoints: true,
+      itemGap: 8,
+      // Preserve SE knobs that don't map cleanly so they survive the round-trip
+      // and the user can re-introspect later if behaviour differs.
+      se_period: v.period,
+      se_offset: v.offset,
+      se_layout: v.layout
+    }
+  });
+}
+function mapGiveaway(widget) {
+  const v = widget.variables ?? {};
+  const primary = v.colors?.primary ?? "#393853";
+  const accent = v.colors?.accent ?? "#FF4076";
+  return buildUnit(widget, "raffle", {
+    content: {
+      version: 1,
+      type: "basic",
+      title: "Play to win",
+      subtitle: "",
+      wonTitle: "{{winner}} just won",
+      showTitle: true,
+      showSubTitle: false,
+      // SE `displayRunningTime` toggles the running-timer label. Lumia's equivalent
+      // is `showTimeSince`. SE `enableTimeOut` enables auto-end which Lumia honours
+      // via raffle.auto_end on the raffle state itself, not the module — best we can
+      // do is leave Lumia's `showTimeSince` on so the countdown is visible.
+      showTimeSince: v.displayRunningTime ?? true,
+      // SE `displayEntrants: false` means "never show the entrant list" (persistent).
+      // Lumia's `hideParticipantOnStart` is "hide until spin starts, then show" (transient).
+      // Mapping one to the other reverses semantics: SE-hidden entrants would briefly
+      // flash on screen the moment the spin starts. Since Lumia has no permanent
+      // hide-entrants knob, keep Lumia at its default (show) and surface the SE
+      // preference via provenance — a future renderer can read it without us
+      // having lied about the toggle. Same for `displayTicketsPurchased`.
+      hideParticipantOnStart: false,
+      se_displayEntrants: v.displayEntrants !== false,
+      se_displayTicketsPurchased: v.displayTicketsPurchased !== false,
+      removeWhenRedeemed: false,
+      showWinningModal: true,
+      playSoundFx: true,
+      spinSound: "https://storage.lumiastream.com/overlays/lumia/audio/Wheel_of_Fortune.mp3",
+      winSound: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
+      spinDuration: 4,
+      transparent: false,
+      backgroundColor: primary,
+      borderColor: accent,
+      border: "solid 1px transparent",
+      borderRadius: "10px",
+      flashOnNewEntry: true,
+      flashColor: accent,
+      raffleEndedText: "The raffle has ended, and the selection of the winner will take place shortly.",
+      raffleTimerText: "Time since raffle started",
+      raffleCountdownText: "Raffle will end after",
+      // SE-specific knobs with no Lumia equivalent — preserved as provenance.
+      se_timeout: v.timeout,
+      se_enable_timeout: v.enableTimeOut,
+      se_display_entrants: v.displayEntrants,
+      se_display_tickets_purchased: v.displayTicketsPurchased,
+      se_image_style_width: v.imageStyle?.width
+    }
+  });
+}
+function mapUnsupportedAsText(widget) {
+  return buildUnit(widget, "text", {
+    content: {
+      value: `[Unsupported SE widget: ${widget.type}]`,
+      highlightColor: "inherit"
+    },
+    css: {
+      color: "#ff8c00",
+      fontSize: 18,
+      textAlign: "center",
+      fontFamily: "Roboto",
+      fontWeight: "bold",
+      background: "rgba(0,0,0,0.4)"
+    }
+  });
+}
+
+// src/se-import/feature-flags.ts
+var SE_IMPORT_FLAGS = {
+  // (Removed) IMPORT_CUSTOM_EMBED: custom-event-list now routes to native eventlist
+  // by default with a one-click "switch to custom HTML" option in the review step.
+  // (Removed) IMPORT_MERCH_GOAL: Fourthwall integration provides session/total order
+  // counters now (see fourthwall.manager.ts ORDER_PLACED handler); merch goal maps
+  // to {{fourthwall_total_order_count}} via the goal mapper.
+  // Merch products rotator — Lumia has no Fourthwall product-list API yet. The
+  // Fourthwall integration is webhook-driven (events flow in) but doesn't fetch
+  // the user's shop catalog. Adding it requires a separate Fourthwall API auth
+  // flow + product-fetch endpoint + periodic refresh. Until then a static stub
+  // is unhelpful, so users are routed to review for AI/skip/marketplace-when-
+  // available replacements.
+  IMPORT_MERCH_PRODUCTS: false,
+  // Seasonal effects (snow/halloween/xmas/valentine/easter/worldcup). The
+  // generic canvas-particle template is approximate, not pixel-accurate vs
+  // SE's polished versions. Flagging off so users get the option to grab a
+  // AI-generated replacement or a curated marketplace seasonal overlay when one
+  // is configured.
+  IMPORT_SEASONAL: false
+};
+function isWidgetFlaggedOff(seType) {
+  if (seType === "se-widget-merch-products-rotator") return !SE_IMPORT_FLAGS.IMPORT_MERCH_PRODUCTS;
+  if (seType === "se-widget-snow" || seType === "se-widget-halloween" || seType === "se-widget-halloween-2019" || seType === "se-widget-xmas" || seType === "se-widget-valentine" || seType === "se-widget-easter" || seType === "se-widget-world-cup") {
+    return !SE_IMPORT_FLAGS.IMPORT_SEASONAL;
+  }
+  return false;
+}
+var FLAG_OFF_REASONS = {
+  "se-widget-merch-products-rotator": "Merch products rotator \u2014 Lumia tracks Fourthwall orders but doesn't fetch the full product catalog yet. Generate a replacement with AI, skip it, or use Marketplace when a curated replacement is configured.",
+  "se-widget-snow": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
+  "se-widget-halloween": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
+  "se-widget-halloween-2019": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
+  "se-widget-xmas": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
+  "se-widget-valentine": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
+  "se-widget-easter": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured.",
+  "se-widget-world-cup": "Seasonal effect \u2014 the generic auto-import template is approximate. Generate a replacement with AI, skip it, or use Marketplace when a curated version is configured."
+};
+
+// src/se-import/dispatcher.ts
+var READOUT_TYPES = {
+  "follower-latest": "follower-latest",
+  "subscriber-latest": "subscriber-latest",
+  "subscriber-new-latest": "subscriber-new-latest",
+  "subscriber-resub-latest": "subscriber-resub-latest",
+  "subscriber-gifted-latest": "subscriber-gifted-latest",
+  "subscriber-alltime-gifter": "subscriber-alltime-gifter",
+  "cheer-total": "cheer-total",
+  "tip-count": "tip-count",
+  "se-widget-follower-count": "follower-session",
+  "se-widget-follower-total": "follower-total",
+  "se-widget-subscriber-count": "subscriber-session",
+  "se-widget-subscriber-total": "subscriber-total",
+  "se-widget-cheer-amount": "cheer-session",
+  "se-widget-cheer-latest": "cheer-latest",
+  "se-widget-tip-amount": "tip-session",
+  "se-widget-tip-latest": "tip-latest",
+  "se-widget-raid-latest": "raid-latest",
+  "se-widget-top-cheer": "cheer-session-top-donation",
+  "se-widget-top-cheerer": "cheer-session-top-donator",
+  "se-widget-top-donation": "tip-session-top-donation",
+  "se-widget-top-donator": "tip-session-top-donator",
+  // SE's botcounter is just a counter of chat messages; Lumia exposes this directly via
+  // twitch_session_chat_count, so we render it as a text layer with the variable inline.
+  "se-widget-botcounter": "twitch_session_chat_count"
+};
+var SEASONAL_TYPES = {
+  "se-widget-snow": "snow",
+  "se-widget-halloween": "halloween",
+  "se-widget-halloween-2019": "halloween",
+  "se-widget-xmas": "xmas",
+  "se-widget-valentine": "valentine",
+  "se-widget-easter": "easter",
+  "se-widget-world-cup": "worldcup"
+};
+var GOAL_TYPES = /* @__PURE__ */ new Set([
+  "se-widget-follower-goal",
+  "se-widget-subscriber-goal",
+  "se-widget-cheer-goal",
+  "se-widget-tip-goal",
+  "se-widget-donor-drive-goal",
+  "se-widget-extralife-goal",
+  "se-widget-tiltify-goal",
+  "se-widget-merch-goal"
+]);
+var EVENTLIST_TYPES = /* @__PURE__ */ new Set(["se-widget-event-list", "se-widget-follower-recent", "se-widget-subscriber-recent", "se-widget-cheer-recent", "se-widget-tip-recent"]);
+function dispatch(widget) {
+  const t = widget.type;
+  if (isWidgetFlaggedOff(t)) {
+    return { unit: mapUnsupportedAsText(widget), status: "placeholder", lumiaType: "text", flaggedOff: true };
+  }
+  if (t === "text") return { unit: mapText(widget), status: "direct", lumiaType: "text" };
+  if (t === "image") return { unit: mapImage(widget), status: "direct", lumiaType: "image" };
+  if (t === "video") return { unit: mapVideo(widget), status: "direct", lumiaType: "video" };
+  if (t in READOUT_TYPES) {
+    return { unit: mapReadout(widget, READOUT_TYPES[t]), status: "direct", lumiaType: "text" };
+  }
+  if (GOAL_TYPES.has(t)) return { unit: mapGoal(widget), status: "direct", lumiaType: "goal" };
+  if (t === "se-widget-alert-box") return { unit: mapAlertBox(widget), status: "direct", lumiaType: "alert" };
+  if (t === "se-widget-alert-box-merch") return { unit: mapAlertBox(widget, { onlyEvents: ["merch"] }), status: "direct", lumiaType: "alert" };
+  if (t === "se-widget-store-redemptions") return { unit: mapSingleAlert(widget, "twitch-redemption"), status: "direct", lumiaType: "alert" };
+  if (t === "se-widget-donor-drive-alert") return { unit: mapSingleAlert(widget, "donordrive-donation"), status: "direct", lumiaType: "alert" };
+  if (t === "se-widget-extralife-alert") return { unit: mapSingleAlert(widget, "extralife-donation"), status: "direct", lumiaType: "alert" };
+  if (t === "se-widget-tiltify-alert") return { unit: mapSingleAlert(widget, "tiltify-campaignDonation"), status: "direct", lumiaType: "alert" };
+  if (EVENTLIST_TYPES.has(t)) return { unit: mapEventList(widget), status: "direct", lumiaType: "eventlist" };
+  if (t === "se-widget-top-tippers-list") return { unit: mapLeaderboardFromVariables(widget, "tips"), status: "direct", lumiaType: "loyaltyleaderboard" };
+  if (t === "se-widget-top-cheerers-list") return { unit: mapLeaderboardFromVariables(widget, "cheers"), status: "direct", lumiaType: "loyaltyleaderboard" };
+  if (t === "se-widget-top-gifters-list") return { unit: mapLeaderboardFromVariables(widget, "gifts"), status: "direct", lumiaType: "loyaltyleaderboard" };
+  if (t === "se-widget-credit-roll") return { unit: mapCredits(widget), status: "partial", lumiaType: "credits" };
+  if (t === "se-widget-twitch-chat") return { unit: mapChatbox(widget), status: "partial", lumiaType: "chatbox" };
+  if (t === "se-widget-image-rotator" || t === "se-widget-merch-products-rotator") return { unit: mapSlideshow(widget), status: t === "se-widget-merch-products-rotator" ? "partial" : "direct", lumiaType: "slideshow" };
+  if (t === "se-widget-countdown") return { unit: mapTimer(widget), status: "partial", lumiaType: "timer" };
+  if (t === "se-widget-current-song") return { unit: mapNowPlaying(widget), status: "partial", lumiaType: "nowplaying" };
+  if (t === "se-widget-kappagen") return { unit: mapKappagen(widget), status: "partial", lumiaType: "emotealert" };
+  if (t === "se-widget-giveaway") return { unit: mapGiveaway(widget), status: "direct", lumiaType: "raffle" };
+  if (t === "se-widget-custom-event-list") return { unit: mapCustom(widget), status: "partial", lumiaType: "custom" };
+  if (t in SEASONAL_TYPES) {
+    return { unit: mapSeasonal(widget, SEASONAL_TYPES[t]), status: "direct", lumiaType: "custom" };
+  }
+  return { unit: mapUnsupportedAsText(widget), status: "placeholder", lumiaType: "text" };
+}
+function recordCoverage(coverage, result, seType) {
+  const existing = coverage.mappings.find((m) => m.seType === seType);
+  if (existing) {
+    existing.count += 1;
+    return;
+  }
+  coverage.mappings.push({ seType, lumiaType: result.lumiaType, status: result.status, count: 1 });
+}
+
+// src/se-import/assets.ts
+var SE_CDN_REGEX = /https?:\/\/(?:cdn|static)\.streamelements\.com\/[^\s"'\\)]+/g;
+var SE_CDN_REGEX_ALT = /https?:\/\/streamelements-cdn\.com\/[^\s"'\\)]+/g;
+var CSS_URL_REGEX = /url\(\s*['"]?([^'")]+)['"]?\s*\)/g;
+function isSEUrl(url) {
+  return /^https?:\/\/(?:cdn|static)\.streamelements\.com\//.test(url) || /^https?:\/\/streamelements-cdn\.com\//.test(url);
+}
+function findSEAssetURLs(overlay) {
+  const settings = overlay.settings ?? {};
+  const found = /* @__PURE__ */ new Set();
+  const serialized = JSON.stringify(settings);
+  for (const m of serialized.match(SE_CDN_REGEX) ?? []) found.add(m);
+  for (const m of serialized.match(SE_CDN_REGEX_ALT) ?? []) found.add(m);
+  const modulesRecord = settings.modules;
+  if (modulesRecord && typeof modulesRecord === "object") {
+    for (const mod of Object.values(modulesRecord)) {
+      const content = mod?.content;
+      if (!content) continue;
+      for (const key of ["html", "css", "js"]) {
+        const blob = content[key];
+        if (typeof blob !== "string" || !blob) continue;
+        CSS_URL_REGEX.lastIndex = 0;
+        let match;
+        while ((match = CSS_URL_REGEX.exec(blob)) !== null) {
+          const inner = match[1];
+          if (inner && isSEUrl(inner)) found.add(inner);
+        }
+      }
+    }
+  }
+  return Array.from(found);
+}
+function escapeRegex(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function rewriteAssetURLs(overlay, mapping) {
+  const oldUrls = Object.keys(mapping).filter((oldUrl) => oldUrl && mapping[oldUrl] && oldUrl !== mapping[oldUrl]);
+  if (oldUrls.length === 0) return overlay;
+  oldUrls.sort((a, b) => b.length - a.length);
+  const pattern = new RegExp(oldUrls.map(escapeRegex).join("|"), "g");
+  const serialized = JSON.stringify(overlay.settings);
+  const rewritten = serialized.replace(pattern, (match) => mapping[match] ?? match);
+  return {
+    ...overlay,
+    settings: JSON.parse(rewritten)
+  };
+}
+async function mirrorOneAsset(url, upload, signal) {
+  const res = await fetch(url, { mode: "cors", signal });
+  if (!res.ok) throw new Error(`Source returned HTTP ${res.status}`);
+  const blob = await res.blob();
+  if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+  const filename = filenameFromURL(url);
+  const type = blob.type || guessMime(filename);
+  const file = new File([blob], filename, { type });
+  const uploaded = await upload(file);
+  const newUrl = uploaded?.asset?.url ?? uploaded?.url;
+  if (!newUrl) throw new Error("Upload succeeded but no URL returned.");
+  return newUrl;
+}
+function filenameFromURL(url) {
+  try {
+    const u = new URL(url);
+    const last = u.pathname.split("/").filter(Boolean).pop() || "asset";
+    return decodeURIComponent(last.split("?")[0]);
+  } catch {
+    return "asset";
+  }
+}
+function guessMime(name) {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  switch (ext) {
+    case "webm":
+      return "video/webm";
+    case "mp4":
+      return "video/mp4";
+    case "gif":
+      return "image/gif";
+    case "png":
+      return "image/png";
+    case "jpg":
+    case "jpeg":
+      return "image/jpeg";
+    case "svg":
+      return "image/svg+xml";
+    case "ogg":
+      return "audio/ogg";
+    case "mp3":
+      return "audio/mpeg";
+    case "wav":
+      return "audio/wav";
+    default:
+      return "application/octet-stream";
+  }
+}
+
+// src/se-import/transplant.ts
+import { nanoid as nanoid2 } from "nanoid";
+function cloneModuleForTransplant(srcModule, newId) {
+  const clonedContent = srcModule.content ? structuredClone(srcModule.content) : srcModule.content;
+  if (srcModule.settings?.type === "custom" && clonedContent) {
+    clonedContent.codeId = `marketplace-${newId}`;
+  }
+  return {
+    ...srcModule,
+    id: newId,
+    content: clonedContent
+  };
+}
+function transplantLayer(source, sourceLayerId) {
+  const layers = source.settings?.layers ?? [];
+  const modules = source.settings?.modules ?? {};
+  const srcLayer = layers.find((l) => l.id === sourceLayerId);
+  const srcModule = modules[sourceLayerId];
+  if (!srcLayer || !srcModule) return null;
+  const rootNewId = nanoid2();
+  if (srcLayer.type !== "group") {
+    const layer = { ...srcLayer, id: rootNewId };
+    const module = cloneModuleForTransplant(srcModule, rootNewId);
+    return { layer, module };
+  }
+  const idRemap = /* @__PURE__ */ new Map();
+  idRemap.set(srcLayer.id, rootNewId);
+  const descendants = [];
+  const queue = [srcLayer.id];
+  const seen = /* @__PURE__ */ new Set([srcLayer.id]);
+  while (queue.length > 0) {
+    const parentId = queue.shift();
+    const children = layers.filter((l) => l.group === parentId);
+    for (const child of children) {
+      if (seen.has(child.id)) continue;
+      seen.add(child.id);
+      descendants.push(child);
+      idRemap.set(child.id, nanoid2());
+      if (child.type === "group") queue.push(child.id);
+    }
+  }
+  const rootLayer = { ...srcLayer, id: rootNewId };
+  const rootModule = cloneModuleForTransplant(srcModule, rootNewId);
+  const extras = [];
+  for (const descLayer of descendants) {
+    const descModule = modules[descLayer.id];
+    if (!descModule) continue;
+    const newDescId = idRemap.get(descLayer.id);
+    const remappedGroup = descLayer.group != null ? idRemap.get(descLayer.group) ?? null : null;
+    const newLayer = {
+      ...descLayer,
+      id: newDescId,
+      group: remappedGroup
+    };
+    const newModule = cloneModuleForTransplant(descModule, newDescId);
+    extras.push({ layer: newLayer, module: newModule });
+  }
+  return { layer: rootLayer, module: rootModule, extras };
+}
+function listTransplantableLayers(source) {
+  const layers = source.settings?.layers ?? [];
+  const modules = source.settings?.modules ?? {};
+  return layers.map((l) => {
+    const m = modules[l.id];
+    if (!m) return null;
+    return {
+      id: l.id,
+      label: m.settings?.title ?? m.settings?.type ?? "Untitled",
+      type: m.settings?.type ?? "unknown"
+    };
+  }).filter((x) => x !== null);
+}
+
+// src/se-import/marketplace-candidates.ts
+var SE_WIDGET_TO_MARKETPLACE_CANDIDATES = {
+  // Hard widgets — gamified animations with state machines or physics. Highest
+  // value for marketplace replacements since AI generation rarely produces
+  // satisfying results for these.
+  "se-widget-hype-cup": [],
+  "se-widget-bit-boss": [],
+  "se-widget-train": [],
+  // Medium-difficulty widgets — possible to AI-generate but a curated overlay
+  // will usually look better.
+  "se-widget-media-share": [],
+  "se-widget-contest": [],
+  // Bot counters, custom event lists, and one-off SE widgets users sometimes
+  // have curated replacements for.
+  "se-widget-custom-event-list": [],
+  "se-widget-botcounter": [],
+  // Flagged-off in feature-flags.ts — the auto-import is disabled because
+  // Lumia has no merch data source. Marketplace overlays here would be
+  // curated static merch-style goals/sliders that don't depend on a feed.
+  "se-widget-merch-goal": [],
+  "se-widget-merch-products-rotator": [],
+  // Flagged-off seasonal effects — generic canvas-particle template is too
+  // approximate. Marketplace candidates should be polished season-specific
+  // overlays (e.g. a curated snow scene, a haunted-house halloween scene).
+  "se-widget-snow": [],
+  "se-widget-halloween": [],
+  "se-widget-halloween-2019": [],
+  "se-widget-xmas": [],
+  "se-widget-valentine": [],
+  "se-widget-easter": [],
+  "se-widget-world-cup": []
+};
+function getMarketplaceCandidates(seWidgetType) {
+  return SE_WIDGET_TO_MARKETPLACE_CANDIDATES[seWidgetType] ?? [];
+}
+function hasMarketplaceCandidates(seWidgetType) {
+  return getMarketplaceCandidates(seWidgetType).length > 0;
+}
+
+// src/se-import/ui/SEImportWizard.tsx
+import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef4, useState as useState6 } from "react";
+
+// src/se-import/ui/MarketplacePicker.tsx
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function MarketplacePicker({ seWidgetType, fetchMarketplaceOverlay, CustomEmbed, onPick, onCancel }) {
+  const candidateIds = useMemo4(() => getMarketplaceCandidates(seWidgetType), [seWidgetType]);
+  const [candidates, setCandidates] = useState5(() => candidateIds.map((id) => ({ id, loading: true })));
+  const [activeId, setActiveId] = useState5(candidateIds[0] ?? null);
+  const [activeLayerId, setActiveLayerId] = useState5(null);
+  useEffect5(() => {
+    let cancelled = false;
+    candidateIds.forEach(async (id) => {
+      try {
+        const overlay = await fetchMarketplaceOverlay(id);
+        if (cancelled) return;
+        setCandidates((prev) => prev.map((c) => c.id === id ? { ...c, loading: false, overlay } : c));
+      } catch (err) {
+        if (cancelled) return;
+        setCandidates((prev) => prev.map((c) => c.id === id ? { ...c, loading: false, error: err?.message ?? "Failed to fetch overlay." } : c));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [candidateIds, fetchMarketplaceOverlay]);
+  const activeCandidate = candidates.find((c) => c.id === activeId);
+  const activeLayers = useMemo4(() => activeCandidate?.overlay ? listTransplantableLayers(activeCandidate.overlay) : [], [activeCandidate?.overlay]);
+  useEffect5(() => {
+    if (activeLayers.length > 0 && !activeLayerId) {
+      setActiveLayerId(activeLayers[0].id);
+    }
+  }, [activeLayers, activeLayerId]);
+  const handleConfirm = () => {
+    if (!activeCandidate?.overlay || !activeLayerId) return;
+    const transplant = transplantLayer(activeCandidate.overlay, activeLayerId);
+    if (!transplant) return;
+    onPick(transplant);
+  };
+  if (candidateIds.length === 0) {
+    return /* @__PURE__ */ jsxs6("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16 }, children: [
+      /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600 }, children: "No marketplace replacements yet" }),
+      /* @__PURE__ */ jsxs6("div", { style: { fontSize: 13, opacity: 0.8 }, children: [
+        "No curated marketplace overlays are listed for ",
+        /* @__PURE__ */ jsx12("code", { children: seWidgetType }),
+        " yet. Use AI generation or skip the widget for now."
+      ] }),
+      /* @__PURE__ */ jsx12("div", { className: "ui-flex-row", style: { marginTop: 8 }, children: /* @__PURE__ */ jsx12("button", { type: "button", className: "ui-button", onClick: onCancel, children: "Close" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "ui-flex-column ui-gap-2", style: { padding: 16, minHeight: 420 }, children: [
+    /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Pick a marketplace replacement" }),
+    /* @__PURE__ */ jsxs6("div", { style: { fontSize: 13, opacity: 0.8 }, children: [
+      "Replacing ",
+      /* @__PURE__ */ jsx12("code", { children: seWidgetType }),
+      " with a layer from a curated Lumia Marketplace overlay."
+    ] }),
+    /* @__PURE__ */ jsx12("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", marginTop: 4 }, children: candidates.map((c) => /* @__PURE__ */ jsx12(
+      "button",
+      {
+        type: "button",
+        className: `ui-button ${c.id === activeId ? "ui-button-purple" : ""}`,
+        onClick: () => {
+          setActiveId(c.id);
+          setActiveLayerId(null);
+        },
+        children: c.loading ? `Loading #${c.id}\u2026` : c.error ? `#${c.id} (error)` : c.overlay?.name ?? `Overlay #${c.id}`
+      },
+      c.id
+    )) }),
+    activeCandidate?.error && /* @__PURE__ */ jsxs6("div", { style: { padding: 12, borderRadius: 6, background: "rgba(220,38,38,0.15)", color: "#fecaca", fontSize: 13 }, children: [
+      "Failed to load overlay #",
+      activeCandidate.id,
+      ": ",
+      activeCandidate.error
+    ] }),
+    activeCandidate?.loading && /* @__PURE__ */ jsx12("div", { style: { padding: 12, fontSize: 13, opacity: 0.8 }, children: "Loading overlay\u2026" }),
+    activeCandidate?.overlay && /* @__PURE__ */ jsxs6("div", { className: "ui-flex-row ui-gap-2", style: { alignItems: "stretch" }, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { flex: "0 0 200px", display: "flex", flexDirection: "column", gap: 4, maxHeight: 320, overflowY: "auto" }, children: [
+        /* @__PURE__ */ jsx12("div", { style: { fontSize: 12, fontWeight: 600, opacity: 0.8 }, children: "Layers" }),
+        activeLayers.map((l) => /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: `ui-button ${l.id === activeLayerId ? "ui-button-purple" : ""}`,
+            style: { justifyContent: "flex-start", textAlign: "left" },
+            onClick: () => setActiveLayerId(l.id),
+            children: /* @__PURE__ */ jsxs6("div", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+              /* @__PURE__ */ jsx12("div", { style: { fontSize: 12, fontWeight: 600 }, children: l.label }),
+              /* @__PURE__ */ jsx12("div", { style: { fontSize: 10, opacity: 0.7 }, children: l.type })
+            ] })
+          },
+          l.id
+        )),
+        activeLayers.length === 0 && /* @__PURE__ */ jsx12("div", { style: { fontSize: 12, opacity: 0.7 }, children: "No transplantable layers." })
+      ] }),
+      /* @__PURE__ */ jsx12("div", { style: { flex: 1, minHeight: 240, background: "rgba(0,0,0,0.3)", borderRadius: 6, overflow: "hidden" }, children: /* @__PURE__ */ jsx12(ActiveLayerPreview, { overlay: activeCandidate.overlay, layerId: activeLayerId, CustomEmbed }) })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "ui-flex-row ui-gap-2", style: { marginTop: 12, justifyContent: "flex-end" }, children: [
+      /* @__PURE__ */ jsx12("button", { type: "button", className: "ui-button", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "ui-button ui-button-purple",
+          onClick: handleConfirm,
+          disabled: !activeCandidate?.overlay || !activeLayerId,
+          children: "Use this layer"
+        }
+      )
+    ] })
+  ] });
+}
+function ActiveLayerPreview({ overlay, layerId, CustomEmbed }) {
+  if (!layerId) return /* @__PURE__ */ jsx12("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Select a layer to preview." });
+  const module = overlay.settings?.modules?.[layerId];
+  if (!module) return /* @__PURE__ */ jsx12("div", { style: { padding: 16, fontSize: 12, opacity: 0.7 }, children: "Layer not found." });
+  const type = module.settings?.type;
+  if (type === "custom" && module.content && CustomEmbed) {
+    const c = module.content;
+    return /* @__PURE__ */ jsx12(
+      CustomEmbed,
+      {
+        codeId: c.codeId ?? layerId,
+        html: c.html ?? "",
+        css: c.css ?? "",
+        js: c.js ?? "",
+        data: c.data ?? {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6("div", { style: { padding: 16, fontSize: 12 }, children: [
+    /* @__PURE__ */ jsx12("div", { style: { fontWeight: 600, marginBottom: 8 }, children: module.settings?.title ?? type }),
+    /* @__PURE__ */ jsxs6("div", { style: { opacity: 0.8 }, children: [
+      "Preview not available for module type ",
+      /* @__PURE__ */ jsx12("code", { children: String(type) }),
+      '. Click "Use this layer" to transplant it anyway.'
+    ] })
+  ] });
+}
+
+// src/se-import/ui/SEImportWizard.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+function StepDot({ active, done, label, num }) {
+  const bg = done ? "#22c55e" : active ? "#6a6ffc" : "var(--ui-bg-elevated, #2a2c31)";
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { alignItems: "center", gap: 8, opacity: active || done ? 1 : 0.6 }, children: [
+    /* @__PURE__ */ jsx13("div", { style: { width: 22, height: 22, borderRadius: "50%", background: bg, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700 }, children: done ? "\u2713" : num }),
+    /* @__PURE__ */ jsx13("span", { style: { fontSize: 12, fontWeight: active ? 600 : 400 }, children: label })
+  ] });
+}
+function ProgressBar({ value, max }) {
+  const pct = max > 0 ? Math.min(100, Math.round(value / max * 100)) : 0;
+  return /* @__PURE__ */ jsx13("div", { style: { height: 6, borderRadius: 3, background: "var(--ui-bg-elevated, #2a2c31)", overflow: "hidden" }, children: /* @__PURE__ */ jsx13("div", { style: { height: "100%", width: `${pct}%`, background: "#6a6ffc", transition: "width 240ms" } }) });
+}
+function ErrorPanel({ message, hint }) {
+  return /* @__PURE__ */ jsxs7("div", { style: { padding: 10, borderRadius: 6, background: "rgba(220, 38, 38, 0.12)", border: "1px solid rgba(220, 38, 38, 0.4)", color: "#fca5a5", fontSize: 13 }, children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600 }, children: message }),
+    hint && /* @__PURE__ */ jsx13("div", { style: { marginTop: 6, whiteSpace: "pre-wrap", opacity: 0.85 }, children: hint })
+  ] });
+}
+function StatusBadge({ label, count, pct, tone }) {
+  const colors = { success: "#22c55e", info: "#6a6ffc", warn: "#f59e0b", muted: "#9ca3af" };
+  return /* @__PURE__ */ jsxs7("div", { style: { flex: "1 1 120px", padding: "10px 12px", borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)", borderLeft: `3px solid ${colors[tone]}` }, children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5, opacity: 0.7 }, children: label }),
+    /* @__PURE__ */ jsx13("div", { style: { fontSize: 22, fontWeight: 700 }, children: count }),
+    /* @__PURE__ */ jsxs7("div", { style: { fontSize: 12, opacity: 0.7 }, children: [
+      pct,
+      "%"
+    ] })
+  ] });
+}
+function CoverageCards({ coverage }) {
+  const byStatus = useMemo5(() => {
+    const acc = { direct: 0, partial: 0, template: 0, placeholder: 0 };
+    for (const m of coverage.mappings) acc[m.status] += m.count;
+    return acc;
+  }, [coverage]);
+  const pct = (n) => coverage.totalWidgets > 0 ? Math.round(n / coverage.totalWidgets * 100) : 0;
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsx13(StatusBadge, { label: "Direct", count: byStatus.direct, pct: pct(byStatus.direct), tone: "success" }),
+    /* @__PURE__ */ jsx13(StatusBadge, { label: "Partial", count: byStatus.partial, pct: pct(byStatus.partial), tone: "info" }),
+    /* @__PURE__ */ jsx13(StatusBadge, { label: "Template", count: byStatus.template, pct: pct(byStatus.template), tone: "warn" }),
+    /* @__PURE__ */ jsx13(StatusBadge, { label: "Placeholder", count: byStatus.placeholder, pct: pct(byStatus.placeholder), tone: "muted" })
+  ] });
+}
+function CustomOverlayPreview({ html, css, js, data, width, height }) {
+  const srcdoc = useMemo5(() => {
+    const safeData = JSON.stringify(data ?? {});
+    const safeJs = JSON.stringify(`(async () => { ${js || ""} })()`);
+    const safeHtml = (html || "").replace(/<\/script>/gi, "<\\/script>");
+    const safeCss = (css || "").replace(/<\/style>/gi, "<\\/style>");
+    return `<!DOCTYPE html><html><head><meta charset="utf-8"/><style>html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:transparent;}${safeCss}</style></head><body>${safeHtml}<script>
+window.DATA = ${safeData};
+window.Overlay = window.Overlay || { on:()=>{}, callCommand:()=>Promise.resolve(), chatbot:()=>Promise.resolve(), setVariable:()=>Promise.resolve(), getVariable:()=>Promise.resolve(), saveStorage:()=>Promise.resolve(), getStorage:()=>Promise.resolve(), deleteStorage:()=>Promise.resolve(), addLoyaltyPoints:()=>Promise.resolve(), getLoyaltyPoints:()=>Promise.resolve() };
+try { eval(${safeJs}); } catch(e) { document.body.insertAdjacentHTML('beforeend','<pre style=\\"color:#fca5a5;font:11px monospace;padding:8px;\\">' + (e && e.message ? e.message : e) + '</pre>'); }
+</script></body></html>`;
+  }, [html, css, js, data]);
+  return /* @__PURE__ */ jsx13(
+    "iframe",
+    {
+      title: "ai-preview",
+      sandbox: "allow-scripts",
+      srcDoc: srcdoc,
+      style: { width: "100%", height: 260, border: "1px solid var(--ui-border, #2a2c31)", borderRadius: 6, background: "repeating-conic-gradient(#1a1c20 0% 25%, #1d1f24 0% 50%) 50% / 20px 20px" },
+      "data-canvas-width": width,
+      "data-canvas-height": height
+    }
+  );
+}
+function StepURL({ url, setUrl, error, busy }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
+    /* @__PURE__ */ jsxs7("p", { style: { margin: 0, opacity: 0.85 }, children: [
+      "Paste the public ",
+      /* @__PURE__ */ jsx13("strong", { children: "preview URL" }),
+      " for your StreamElements overlay. The URL contains the access token, so no StreamElements login is required."
+    ] }),
+    /* @__PURE__ */ jsx13(LSInput, { label: "StreamElements overlay URL", value: url, onChange: (e) => setUrl(e.target.value), placeholder: "https://streamelements.com/overlay/<id>/<token>", disabled: busy }),
+    /* @__PURE__ */ jsxs7("details", { children: [
+      /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontWeight: 600, fontSize: 13 }, children: "How to find the overlay URL" }),
+      /* @__PURE__ */ jsxs7("ol", { style: { paddingLeft: 18, marginTop: 8, fontSize: 13, opacity: 0.9 }, children: [
+        /* @__PURE__ */ jsxs7("li", { children: [
+          "Open ",
+          /* @__PURE__ */ jsx13("a", { href: "https://streamelements.com/dashboard/overlays", target: "_blank", rel: "noreferrer", children: "streamelements.com/dashboard/overlays" }),
+          "."
+        ] }),
+        /* @__PURE__ */ jsx13("li", { children: "Click the overlay you want to bring over." }),
+        /* @__PURE__ */ jsxs7("li", { children: [
+          "Click ",
+          /* @__PURE__ */ jsx13("strong", { children: "Copy URL" }),
+          " in the top-right of the editor."
+        ] }),
+        /* @__PURE__ */ jsx13("li", { children: "Paste it above." })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error.message, hint: error.hint })
+  ] });
+}
+function StepDiscovery({ result, assetCount }) {
+  const widgets = result.coverage.totalWidgets;
+  const reviewCount = result.reviewItems.length;
+  const customCount = result.coverage.mappings.find((m) => m.seType === "se-widget-custom-event-list")?.count ?? 0;
+  const alertCount = result.coverage.mappings.filter((m) => m.lumiaType === "alert").reduce((a, m) => a + m.count, 0);
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Here's what we found" }),
+    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Total widgets", value: widgets }),
+      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Alerts", value: alertCount }),
+      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Custom widgets", value: customCount, sub: customCount > 0 ? "will need the SE compatibility shim" : void 0 }),
+      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "SE-hosted assets", value: assetCount, sub: assetCount > 0 ? "can be mirrored to Lumia storage" : "no migration needed" }),
+      /* @__PURE__ */ jsx13(DiscoveryStat, { label: "Need review", value: reviewCount, sub: reviewCount > 0 ? "no native Lumia equivalent yet" : "everything maps cleanly", highlight: reviewCount > 0 })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx13(CoverageCards, { coverage: result.coverage }) })
+  ] });
+}
+function DiscoveryStat({ label, value, sub, highlight }) {
+  return /* @__PURE__ */ jsxs7("div", { style: { flex: "1 1 160px", padding: "12px 14px", borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)", border: highlight ? "1px solid #f59e0b" : "1px solid transparent" }, children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5, opacity: 0.7 }, children: label }),
+    /* @__PURE__ */ jsx13("div", { style: { fontSize: 26, fontWeight: 700 }, children: value }),
+    sub && /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, opacity: 0.65, marginTop: 4 }, children: sub })
+  ] });
+}
+function StepOptions({ options, setOptions, assetCount }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Import options" }),
+    /* @__PURE__ */ jsxs7("label", { className: "ui-flex-row", style: { gap: 10, padding: 12, borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)", cursor: assetCount === 0 ? "not-allowed" : "pointer", opacity: assetCount === 0 ? 0.5 : 1 }, children: [
+      /* @__PURE__ */ jsx13("input", { type: "checkbox", checked: options.mirrorAssets, disabled: assetCount === 0, onChange: (e) => setOptions({ ...options, mirrorAssets: e.target.checked }), style: { marginTop: 2 } }),
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsxs7("div", { style: { fontWeight: 600 }, children: [
+          "Mirror StreamElements assets to Lumia storage ",
+          assetCount > 0 && /* @__PURE__ */ jsxs7("span", { style: { opacity: 0.7, fontWeight: 400 }, children: [
+            "(",
+            assetCount,
+            " files)"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { style: { fontSize: 12, opacity: 0.8, marginTop: 4 }, children: [
+          "Downloads every ",
+          `cdn.streamelements.com`,
+          " URL referenced in the overlay and re-uploads it to your Lumia asset library, then rewrites the URLs. Recommended \u2014 if StreamElements rotates their CDN or removes a file, your overlay keeps working."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13(LSInput, { label: "Overlay name", value: options.name, onChange: (e) => setOptions({ ...options, name: e.target.value }) })
+  ] });
+}
+function StepMirror({ rows, running, onRetry }) {
+  const done = rows.filter((r) => r.state === "done").length;
+  const reused = rows.filter((r) => r.state === "reused").length;
+  const keptOnCdn = rows.filter((r) => r.state === "kept-on-cdn").length;
+  const failed = rows.filter((r) => r.state === "failed").length;
+  const summary = running ? `Downloading from StreamElements and uploading to Lumia\u2026 (${done + reused + keptOnCdn}/${rows.length})` : `Finished. ${done} mirrored${reused ? `, ${reused} reused from your library` : ""}${keptOnCdn ? `, ${keptOnCdn} SVG kept on SE CDN` : ""}${failed ? `, ${failed} failed (left pointing at SE).` : "."}`;
+  const stateColor = (s) => s === "done" ? "#22c55e" : s === "reused" ? "#60a5fa" : s === "kept-on-cdn" ? "#a78bfa" : s === "failed" ? "#ef4444" : "#6a6ffc";
+  const stateLabel = (s) => s === "pending" ? "\u2026" : s === "fetching" ? "Fetching\u2026" : s === "reused" ? "\u21BA reused" : s === "kept-on-cdn" ? "\u2297 kept on SE CDN" : s === "done" ? "\u2713" : "\u2717";
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Mirroring assets" }),
+    /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, opacity: 0.8 }, children: summary }),
+    /* @__PURE__ */ jsx13(ProgressBar, { value: done + reused + failed + keptOnCdn, max: rows.length }),
+    /* @__PURE__ */ jsx13("div", { className: "ui-flex-column", style: { maxHeight: 320, overflowY: "auto", border: "1px solid var(--ui-border, #2a2c31)", borderRadius: 6 }, children: rows.map((row, i) => /* @__PURE__ */ jsxs7("div", { style: { padding: "8px 12px", borderTop: i === 0 ? "none" : "1px solid var(--ui-border, #2a2c31)", fontSize: 12 }, children: [
+      /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { justifyContent: "space-between", gap: 8, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx13("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, fontFamily: "ui-monospace, monospace" }, title: row.url, children: row.url }),
+        /* @__PURE__ */ jsx13("span", { style: { color: stateColor(row.state), fontWeight: 600 }, children: stateLabel(row.state) }),
+        row.state === "failed" && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            className: "ui-button ui-button-secondary",
+            style: { padding: "2px 10px", fontSize: 11, minWidth: 0 },
+            onClick: () => onRetry(i),
+            title: "Retry this asset",
+            children: "Retry"
+          }
+        )
+      ] }),
+      row.error && /* @__PURE__ */ jsx13("div", { style: { marginTop: 4, color: "#fca5a5" }, children: row.error })
+    ] }, row.url)) })
+  ] });
+}
+function StepReview({ item, index, total, state, error, generated, canvas, onSkip, onKeep, onGenerate, onAccept, onRetry, onPickMarketplace, onKeepAllPlaceholders, onSkipAll, remainingCount, marketplaceAvailable }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs7("div", { style: { fontWeight: 600, fontSize: 16 }, children: [
+        "Reviewing widget ",
+        index + 1,
+        " of ",
+        total
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { alignItems: "center" }, children: [
+        item.flaggedOff && /* @__PURE__ */ jsx13("div", { style: { fontSize: 10, padding: "2px 8px", borderRadius: 4, background: "rgba(234, 179, 8, 0.2)", color: "#facc15", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600 }, children: "Auto-import disabled" }),
+        /* @__PURE__ */ jsx13("div", { style: { fontSize: 11, opacity: 0.7, textTransform: "uppercase", letterSpacing: 0.5 }, children: item.status })
+      ] })
+    ] }),
+    remainingCount > 1 && /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { justifyContent: "flex-end", alignItems: "center", fontSize: 12 }, children: [
+      /* @__PURE__ */ jsxs7("span", { style: { opacity: 0.7 }, children: [
+        remainingCount,
+        " remaining"
+      ] }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-secondary", style: { padding: "4px 10px", fontSize: 12 }, onClick: onKeepAllPlaceholders, title: "Keep every remaining placeholder/template widget as-is (skips flagged-off widgets that should go to marketplace/AI)", children: "Keep all placeholders" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-secondary", style: { padding: "4px 10px", fontSize: 12 }, onClick: onSkipAll, title: "Drop every remaining widget entirely", children: "Skip all" })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { style: { padding: 12, borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)" }, children: [
+      /* @__PURE__ */ jsx13("div", { style: { fontFamily: "ui-monospace, monospace", fontWeight: 600, fontSize: 13 }, children: item.seWidget.type }),
+      /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, opacity: 0.85, marginTop: 4 }, children: item.reason })
+    ] }),
+    state === "generating" && /* @__PURE__ */ jsx13("div", { style: { padding: 12, fontSize: 13, opacity: 0.85 }, children: "Generating with AI\u2026 this can take 30\u201390 seconds." }),
+    state === "generated" && generated && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx13("div", { style: { fontSize: 13, fontWeight: 600, marginTop: 4 }, children: "Preview" }),
+      (() => {
+        const landing = getAILandingBounds(item.seWidget, canvas);
+        return /* @__PURE__ */ jsx13(CustomOverlayPreview, { html: generated.html ?? "", css: generated.css ?? "", js: generated.js ?? "", data: generated.data ?? {}, width: landing.width, height: landing.height });
+      })(),
+      /* @__PURE__ */ jsxs7("details", { children: [
+        /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12, opacity: 0.8 }, children: "Generated code" }),
+        /* @__PURE__ */ jsxs7("details", { style: { marginLeft: 12, marginTop: 8 }, children: [
+          /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12 }, children: "HTML" }),
+          /* @__PURE__ */ jsx13("pre", { style: { fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 160, overflow: "auto" }, children: generated.html || "" })
+        ] }),
+        /* @__PURE__ */ jsxs7("details", { style: { marginLeft: 12 }, children: [
+          /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12 }, children: "CSS" }),
+          /* @__PURE__ */ jsx13("pre", { style: { fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 160, overflow: "auto" }, children: generated.css || "" })
+        ] }),
+        /* @__PURE__ */ jsxs7("details", { style: { marginLeft: 12 }, children: [
+          /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12 }, children: "JS" }),
+          /* @__PURE__ */ jsx13("pre", { style: { fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 160, overflow: "auto" }, children: generated.js || "" })
+        ] })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx13(ErrorPanel, { message: error }),
+    /* @__PURE__ */ jsxs7("details", { children: [
+      /* @__PURE__ */ jsx13("summary", { style: { cursor: "pointer", fontSize: 12, opacity: 0.8 }, children: "Original StreamElements config" }),
+      /* @__PURE__ */ jsx13("pre", { style: { marginTop: 6, fontSize: 11, padding: 8, background: "rgba(0,0,0,0.25)", borderRadius: 4, maxHeight: 180, overflow: "auto" }, children: JSON.stringify(item.seWidget.variables ?? {}, null, 2) })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "ui-flex-row ui-gap-2", style: { marginTop: 8 }, children: state === "generated" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onRetry, children: "Try again" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onSkip, children: "Skip this widget" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-purple", onClick: onAccept, children: "Use this and continue" })
+    ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      !item.flaggedOff && /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onKeep, disabled: state === "generating", children: "Keep placeholder" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onSkip, disabled: state === "generating", children: "Skip" }),
+      marketplaceAvailable && /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: onPickMarketplace, disabled: state === "generating", children: "Pick from Marketplace" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-purple", onClick: onGenerate, disabled: state === "generating", children: state === "generating" ? "Generating\u2026" : "Generate with AI" })
+    ] }) }),
+    item.flaggedOff && !marketplaceAvailable && state !== "generated" && /* @__PURE__ */ jsx13("div", { style: { fontSize: 12, opacity: 0.75 }, children: "No curated Marketplace replacement is configured for this widget yet." })
+  ] });
+}
+function StepConfirm({ result, options, mirrorRows, rowStates }) {
+  const total = result.overlay.settings.layers.length;
+  const mirrored = mirrorRows.filter((r) => r.state === "done" || r.state === "reused" || r.state === "kept-on-cdn").length;
+  const mirrorFailed = mirrorRows.filter((r) => r.state === "failed").length;
+  const reviewBuckets = Object.values(rowStates).reduce(
+    (acc, s) => {
+      acc[s.state] = (acc[s.state] ?? 0) + 1;
+      return acc;
+    },
+    {}
+  );
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", children: [
+    /* @__PURE__ */ jsx13("div", { style: { fontWeight: 600, fontSize: 16 }, children: "Ready to import" }),
+    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", style: { padding: 12, borderRadius: 6, background: "var(--ui-bg-elevated, #1d1f24)" }, children: [
+      /* @__PURE__ */ jsx13(Row, { label: "Overlay name", value: options.name || result.overlay.name }),
+      /* @__PURE__ */ jsx13(Row, { label: "Layers", value: `${total}` }),
+      /* @__PURE__ */ jsx13(Row, { label: "Assets mirrored", value: options.mirrorAssets ? `${mirrored} / ${mirrorRows.length}${mirrorFailed ? ` (${mirrorFailed} kept on SE CDN)` : ""}` : "skipped" }),
+      /* @__PURE__ */ jsx13(Row, { label: "Generated with AI", value: `${reviewBuckets.generated ?? 0}` }),
+      /* @__PURE__ */ jsx13(Row, { label: "Skipped", value: `${reviewBuckets.skipped ?? 0}` }),
+      /* @__PURE__ */ jsx13(Row, { label: "Kept as placeholder", value: `${reviewBuckets.kept ?? 0}` })
+    ] })
+  ] });
+}
+function Row({ label, value }) {
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row", style: { justifyContent: "space-between" }, children: [
+    /* @__PURE__ */ jsx13("span", { style: { opacity: 0.75 }, children: label }),
+    /* @__PURE__ */ jsx13("span", { style: { fontWeight: 600 }, children: value })
+  ] });
+}
+function SEImportWizard({ bindings }) {
+  const {
+    fetchMarketplaceOverlay,
+    generateAICustomCode,
+    uploadAsset,
+    existingAssets,
+    saveOverlay,
+    onComplete,
+    onClose,
+    notify,
+    CustomEmbed,
+    t
+  } = bindings;
+  const translate = (key, fallback) => t ? t(key) ?? fallback : fallback;
+  const [step, setStep] = useState6("url");
+  const [url, setUrl] = useState6("");
+  const [loadError, setLoadError] = useState6(null);
+  const [loading, setLoading] = useState6(false);
+  const [result, setResult] = useState6(null);
+  const [originalReviewItems, setOriginalReviewItems] = useState6([]);
+  const [options, setOptions] = useState6({ mirrorAssets: true, name: "" });
+  const assetUrls = useMemo5(() => result ? findSEAssetURLs(result.overlay) : [], [result]);
+  const [mirrorRows, setMirrorRows] = useState6([]);
+  const [mirrorRunning, setMirrorRunning] = useState6(false);
+  const mirrorStartedRef = useRef4(false);
+  const [rowStates, setRowStates] = useState6({});
+  const [reviewIndex, setReviewIndex] = useState6(0);
+  const [importing, setImporting] = useState6(false);
+  const handleLoad = useCallback3(async () => {
+    setLoadError(null);
+    const parts = extractSEPreviewParts(url);
+    if (!parts) {
+      setLoadError({ message: "That doesn't look like a StreamElements overlay URL.", hint: "Expected: https://streamelements.com/overlay/<overlayId>/<token>" });
+      return;
+    }
+    setLoading(true);
+    try {
+      const bootstrap = await fetchSEBootstrap(parts);
+      const imported = importSEBootstrap(bootstrap);
+      setResult(imported);
+      setOptions((o) => ({ ...o, name: imported.overlay.name }));
+      setOriginalReviewItems(imported.reviewItems);
+      setRowStates(Object.fromEntries(imported.reviewItems.map((r) => [r.moduleId, { state: "pending" }])));
+      setReviewIndex(0);
+      setStep("discovery");
+    } catch (e) {
+      setLoadError({ message: "Could not load the overlay.", hint: e?.message });
+    } finally {
+      setLoading(false);
+    }
+  }, [url]);
+  const mirrorAbortRef = useRef4(null);
+  const processAssetRow = useCallback3(
+    async (assetUrl, idx, existingByFilename, signal) => {
+      const filename = filenameFromURL(assetUrl);
+      const reuseUrl = existingByFilename.get(filename);
+      if (reuseUrl) {
+        setResult((curr) => curr ? { ...curr, overlay: rewriteAssetURLs(curr.overlay, { [assetUrl]: reuseUrl }) } : curr);
+        return { state: "reused", newUrl: reuseUrl };
+      }
+      if (filename.toLowerCase().endsWith(".svg")) {
+        return { state: "kept-on-cdn", newUrl: assetUrl };
+      }
+      setMirrorRows((prev) => prev.map((r, i) => i === idx ? { ...r, state: "fetching", error: void 0 } : r));
+      try {
+        const newUrl = await mirrorOneAsset(assetUrl, (file) => uploadAsset(file), signal);
+        existingByFilename.set(filename, newUrl);
+        setResult((curr) => curr ? { ...curr, overlay: rewriteAssetURLs(curr.overlay, { [assetUrl]: newUrl }) } : curr);
+        return { state: "done", newUrl };
+      } catch (err) {
+        if (err?.name === "AbortError" || signal?.aborted) {
+          return { state: "pending" };
+        }
+        return { state: "failed", error: extractErrorMessage(err) };
+      }
+    },
+    [uploadAsset]
+  );
+  const filenameCacheRef = useRef4(/* @__PURE__ */ new Map());
+  const runMirror = useCallback3(async () => {
+    if (!result) return;
+    mirrorAbortRef.current = new AbortController();
+    const signal = mirrorAbortRef.current.signal;
+    setMirrorRunning(true);
+    const initialRows = assetUrls.map((u) => ({ url: u, state: "pending" }));
+    setMirrorRows(initialRows);
+    const existingByFilename = /* @__PURE__ */ new Map();
+    for (const asset of existingAssets ?? []) {
+      const name = asset.file_name || asset.name;
+      if (name && asset.url) existingByFilename.set(name, asset.url);
+    }
+    filenameCacheRef.current = existingByFilename;
+    for (let i = 0; i < initialRows.length; i += 1) {
+      if (signal.aborted) {
+        setMirrorRunning(false);
+        return;
+      }
+      const row = initialRows[i];
+      const outcome = await processAssetRow(row.url, i, existingByFilename, signal);
+      if (signal.aborted) {
+        setMirrorRunning(false);
+        return;
+      }
+      setMirrorRows((prev) => prev.map((r, idx) => idx === i ? { ...r, ...outcome } : r));
+    }
+    setMirrorRunning(false);
+  }, [assetUrls, existingAssets, processAssetRow, result]);
+  const retryMirrorRow = useCallback3(
+    async (idx) => {
+      const rowUrl = mirrorRows[idx]?.url;
+      if (!rowUrl) return;
+      const outcome = await processAssetRow(rowUrl, idx, filenameCacheRef.current, mirrorAbortRef.current?.signal);
+      setMirrorRows((prev) => prev.map((r, i) => i === idx ? { ...r, ...outcome } : r));
+    },
+    [mirrorRows, processAssetRow]
+  );
+  useEffect6(() => {
+    if (step === "mirror" && !mirrorStartedRef.current) {
+      mirrorStartedRef.current = true;
+      void runMirror();
+    }
+  }, [step, runMirror]);
+  const currentItem = originalReviewItems[reviewIndex];
+  const currentRow = currentItem ? rowStates[currentItem.moduleId] ?? { state: "pending" } : void 0;
+  const advanceReview = useCallback3(() => {
+    if (reviewIndex + 1 < originalReviewItems.length) setReviewIndex(reviewIndex + 1);
+    else setStep("confirm");
+  }, [originalReviewItems.length, reviewIndex]);
+  const setRow = useCallback3((moduleId, patch) => {
+    setRowStates((prev) => ({ ...prev, [moduleId]: { ...prev[moduleId] ?? { state: "pending" }, ...patch } }));
+  }, []);
+  const handleKeep = () => {
+    if (!result || !currentItem) return;
+    setResult(applyReviewAction(result, currentItem.moduleId, "keep"));
+    setRow(currentItem.moduleId, { state: "kept" });
+    advanceReview();
+  };
+  const handleSkip = () => {
+    if (!result || !currentItem) return;
+    setResult(applyReviewAction(result, currentItem.moduleId, "skip"));
+    setRow(currentItem.moduleId, { state: "skipped" });
+    advanceReview();
+  };
+  const handleGenerate = async () => {
+    if (!currentItem || !result) return;
+    setRow(currentItem.moduleId, { state: "generating", error: void 0 });
+    try {
+      const canvas = { width: result.overlay.settings.metadata.width, height: result.overlay.settings.metadata.height };
+      const generated = await generateAICustomCode(buildAIPromptForSEWidget(currentItem.seWidget, canvas));
+      setRow(currentItem.moduleId, { state: "generated", generated });
+    } catch (e) {
+      setRow(currentItem.moduleId, { state: "failed", error: e?.message ?? "AI generation failed." });
+    }
+  };
+  const handleAcceptGenerated = () => {
+    if (!result || !currentItem || !currentRow?.generated) return;
+    setResult(applyReviewAction(result, currentItem.moduleId, "ai", currentRow.generated));
+    advanceReview();
+  };
+  const [marketplacePickerOpen, setMarketplacePickerOpen] = useState6(false);
+  const handlePickMarketplace = (transplant) => {
+    if (!result || !currentItem) return;
+    setResult(applyReviewAction(result, currentItem.moduleId, "marketplace", transplant));
+    setRow(currentItem.moduleId, { state: "kept" });
+    setMarketplacePickerOpen(false);
+    advanceReview();
+  };
+  const handleKeepAllPlaceholders = () => {
+    if (!result) return;
+    const patch = {};
+    for (const item of originalReviewItems) {
+      const rowState = rowStates[item.moduleId]?.state ?? "pending";
+      if (rowState !== "pending") continue;
+      if (item.flaggedOff) continue;
+      if (item.status !== "placeholder" && item.status !== "template") continue;
+      patch[item.moduleId] = { state: "kept" };
+    }
+    if (Object.keys(patch).length) setRowStates((prev) => ({ ...prev, ...patch }));
+    const remainingIndex = originalReviewItems.findIndex((item) => (patch[item.moduleId]?.state ?? rowStates[item.moduleId]?.state ?? "pending") === "pending");
+    if (remainingIndex >= 0) {
+      setReviewIndex(remainingIndex);
+      const remainingItem = originalReviewItems[remainingIndex];
+      if (remainingItem?.flaggedOff) {
+        const actionText = hasMarketplaceCandidates(remainingItem.seWidget.type) ? "Skip, Marketplace, or Generate with AI" : "Skip or Generate with AI";
+        notify.warning(`Choose ${actionText} for the flagged-off widget.`);
+      } else {
+        notify.warning("Review the remaining widget before continuing.");
+      }
+      return;
+    }
+    setStep("confirm");
+  };
+  const handleSkipAll = () => {
+    if (!result) return;
+    const toSkip = /* @__PURE__ */ new Set();
+    const patch = {};
+    for (const item of originalReviewItems) {
+      const rowState = rowStates[item.moduleId]?.state ?? "pending";
+      if (rowState !== "pending") continue;
+      toSkip.add(item.moduleId);
+      patch[item.moduleId] = { state: "skipped" };
+    }
+    if (toSkip.size === 0) {
+      setStep("confirm");
+      return;
+    }
+    const nextLayers = (result.overlay.settings.layers ?? []).filter((l) => !toSkip.has(l.id));
+    const modules = { ...result.overlay.settings.modules ?? {} };
+    for (const id of toSkip) delete modules[id];
+    const reviewItems = result.reviewItems.filter((r) => !toSkip.has(r.moduleId));
+    setResult({
+      ...result,
+      overlay: {
+        ...result.overlay,
+        settings: { ...result.overlay.settings, layers: nextLayers, modules },
+        layers_count: nextLayers.length
+      },
+      reviewItems
+    });
+    setRowStates((prev) => ({ ...prev, ...patch }));
+    setStep("confirm");
+  };
+  const handleFinalImport = useCallback3(async () => {
+    if (!result) return;
+    setImporting(true);
+    try {
+      const body = {
+        name: options.name.trim() || result.overlay.name,
+        description: result.overlay.description,
+        settings: result.overlay.settings
+      };
+      const { uuid } = await saveOverlay(body);
+      notify.success(`Imported overlay from StreamElements.`);
+      mirrorAbortRef.current?.abort();
+      onClose();
+      if (uuid) onComplete({ overlayId: uuid });
+    } catch (err) {
+      notify.error(`Import failed: ${extractErrorMessage(err)}`);
+    } finally {
+      setImporting(false);
+    }
+  }, [notify, onClose, onComplete, options.name, result, saveOverlay]);
+  const stepOrder = ["url", "discovery", "options", "mirror", "review", "confirm"];
+  const goBack = () => {
+    if (step === "review" && reviewIndex > 0) {
+      setReviewIndex(reviewIndex - 1);
+      return;
+    }
+    const idx = stepOrder.indexOf(step);
+    if (idx <= 0) return;
+    let prev = stepOrder[idx - 1];
+    if (prev === "mirror" && !options.mirrorAssets) prev = stepOrder[idx - 2];
+    if (prev) setStep(prev);
+  };
+  const goNext = () => {
+    if (step === "url") {
+      void handleLoad();
+      return;
+    }
+    if (step === "discovery") {
+      setStep("options");
+      return;
+    }
+    if (step === "options") {
+      if (options.mirrorAssets && assetUrls.length > 0) setStep("mirror");
+      else if (originalReviewItems.length > 0) setStep("review");
+      else setStep("confirm");
+      return;
+    }
+    if (step === "mirror") {
+      if (originalReviewItems.length > 0) setStep("review");
+      else setStep("confirm");
+      return;
+    }
+    if (step === "review") {
+      if (currentItem) {
+        if (currentRow?.state === "generated") {
+          handleAcceptGenerated();
+        } else if (currentRow?.state === "pending") {
+          if (currentItem.flaggedOff) {
+            const actionText = hasMarketplaceCandidates(currentItem.seWidget.type) ? "Skip, Marketplace, or Generate with AI" : "Skip or Generate with AI";
+            notify.warning(`Choose ${actionText} for the flagged-off widget.`);
+            return;
+          }
+          handleKeep();
+        } else {
+          advanceReview();
+        }
+      }
+      return;
+    }
+    if (step === "confirm") {
+      void handleFinalImport();
+      return;
+    }
+  };
+  const nextLabel = (() => {
+    if (step === "url") return loading ? "Loading\u2026" : "Load overlay";
+    if (step === "discovery") return "Continue";
+    if (step === "options") return "Continue";
+    if (step === "mirror") return mirrorRunning ? "Working\u2026" : "Continue";
+    if (step === "review") return currentRow?.state === "generated" ? "Use & continue" : "Continue";
+    if (step === "confirm") return importing ? "Importing\u2026" : "Create overlay";
+    return "Next";
+  })();
+  const nextDisabled = (() => {
+    if (step === "url") return loading || !url.trim();
+    if (step === "mirror") return mirrorRunning;
+    if (step === "review") return currentRow?.state === "generating" || currentRow?.state === "pending" && currentItem?.flaggedOff;
+    if (step === "confirm") return importing;
+    return false;
+  })();
+  const stepperIndex = stepOrder.indexOf(step);
+  const visibleSteps = [
+    { key: "url", label: "Load" },
+    { key: "discovery", label: "Discovery" },
+    { key: "options", label: "Options" },
+    ...options.mirrorAssets && assetUrls.length > 0 ? [{ key: "mirror", label: "Assets" }] : [],
+    ...originalReviewItems.length > 0 ? [{ key: "review", label: `Review (${originalReviewItems.length})` }] : [],
+    { key: "confirm", label: "Confirm" }
+  ];
+  return /* @__PURE__ */ jsxs7("div", { className: "ui-flex-column ui-gap-2", style: { minWidth: 680 }, children: [
+    result && /* @__PURE__ */ jsx13("div", { className: "ui-flex-row ui-gap-2", style: { flexWrap: "wrap", paddingBottom: 8, borderBottom: "1px solid var(--ui-border, #2a2c31)" }, children: visibleSteps.map((s, i) => /* @__PURE__ */ jsx13(StepDot, { num: i + 1, label: s.label, active: s.key === step, done: visibleSteps.findIndex((v) => v.key === step) > i }, s.key)) }),
+    step === "url" && /* @__PURE__ */ jsx13(StepURL, { url, setUrl, error: loadError, busy: loading }),
+    step === "discovery" && result && /* @__PURE__ */ jsx13(StepDiscovery, { result, assetCount: assetUrls.length }),
+    step === "options" && /* @__PURE__ */ jsx13(StepOptions, { options, setOptions, assetCount: assetUrls.length }),
+    step === "mirror" && /* @__PURE__ */ jsx13(StepMirror, { rows: mirrorRows, running: mirrorRunning, onRetry: retryMirrorRow }),
+    step === "review" && currentItem && result && !marketplacePickerOpen && /* @__PURE__ */ jsx13(
+      StepReview,
+      {
+        item: currentItem,
+        index: reviewIndex,
+        total: originalReviewItems.length,
+        state: currentRow?.state ?? "pending",
+        error: currentRow?.error,
+        generated: currentRow?.generated,
+        canvas: { width: result.overlay.settings.metadata.width, height: result.overlay.settings.metadata.height },
+        onSkip: handleSkip,
+        onKeep: handleKeep,
+        onGenerate: handleGenerate,
+        onAccept: handleAcceptGenerated,
+        onRetry: handleGenerate,
+        onPickMarketplace: () => setMarketplacePickerOpen(true),
+        onKeepAllPlaceholders: handleKeepAllPlaceholders,
+        onSkipAll: handleSkipAll,
+        remainingCount: originalReviewItems.filter((r) => (rowStates[r.moduleId]?.state ?? "pending") === "pending").length,
+        marketplaceAvailable: hasMarketplaceCandidates(currentItem.seWidget.type)
+      }
+    ),
+    step === "review" && currentItem && marketplacePickerOpen && /* @__PURE__ */ jsx13(
+      MarketplacePicker,
+      {
+        seWidgetType: currentItem.seWidget.type,
+        fetchMarketplaceOverlay,
+        CustomEmbed,
+        onPick: handlePickMarketplace,
+        onCancel: () => setMarketplacePickerOpen(false)
+      }
+    ),
+    step === "confirm" && result && /* @__PURE__ */ jsx13(StepConfirm, { result, options, mirrorRows, rowStates }),
+    /* @__PURE__ */ jsxs7("div", { className: "ui-flex-row ui-gap-2", style: { justifyContent: "flex-end", marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx13(
+        "button",
+        {
+          type: "button",
+          className: "ui-button",
+          onClick: () => {
+            mirrorAbortRef.current?.abort();
+            onClose();
+          },
+          disabled: loading || importing,
+          children: translate("action.cancel", "Cancel")
+        }
+      ),
+      stepperIndex > 0 && /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button", onClick: goBack, disabled: loading || importing || mirrorRunning || currentRow?.state === "generating", children: "Back" }),
+      /* @__PURE__ */ jsx13("button", { type: "button", className: "ui-button ui-button-purple", onClick: goNext, disabled: nextDisabled, children: nextLabel })
+    ] })
+  ] });
+}
+function extractErrorMessage(err) {
+  if (!err) return "Failed";
+  const e = err;
+  return e?.response?.data?.message || e?.response?.data?.error || e?.message || "Failed";
+}
+
+// src/se-import/index.ts
+var REVIEW_REASONS = {
+  "se-widget-bit-boss": "No native Lumia equivalent \u2014 bit boss fight bar with HP/damage states.",
+  "se-widget-hype-cup": "No native Lumia equivalent \u2014 Box2D physics stacking animation.",
+  "se-widget-train": "No native Lumia equivalent \u2014 animated subscriber/event train.",
+  "se-widget-media-share": "No native Lumia equivalent \u2014 viewer-submitted media player.",
+  "se-widget-contest": "No native Lumia equivalent \u2014 SE-specific contest widget.",
+  "se-widget-giveaway": "No native Lumia equivalent \u2014 SE giveaway service.",
+  "se-widget-botcounter": "No native Lumia equivalent \u2014 chatter/message counter.",
+  "se-widget-top-cheerers-list": 'Lumia loyaltyleaderboard needs a "source" extension before it can render cheer rankings.',
+  "se-widget-top-gifters-list": 'Lumia loyaltyleaderboard needs a "source" extension before it can render gifter rankings.',
+  "se-widget-top-tippers-list": 'Lumia loyaltyleaderboard needs a "source" extension before it can render tipper rankings.',
+  "se-widget-snow": "Seasonal effect \u2014 needs a particle template in Lumia.",
+  "se-widget-halloween": "Seasonal effect \u2014 needs a Lumia template.",
+  "se-widget-halloween-2019": "Seasonal effect \u2014 needs a Lumia template.",
+  "se-widget-xmas": "Seasonal effect \u2014 needs a Lumia template.",
+  "se-widget-valentine": "Seasonal effect \u2014 needs a Lumia template.",
+  "se-widget-easter": "Seasonal effect \u2014 needs a Lumia template.",
+  "se-widget-world-cup": "Seasonal effect \u2014 needs a Lumia template."
+};
+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 extractSEOverlayId(input) {
+  const trimmed = input.trim();
+  const m = trimmed.match(/[0-9a-f]{24}/i);
+  return m ? m[0] : null;
+}
+function extractSEPreviewParts(input) {
+  const trimmed = input.trim();
+  const m = trimmed.match(/streamelements\.com\/overlay\/([0-9a-f]{24})\/([A-Za-z0-9_-]+)/i);
+  if (!m) return null;
+  return { overlayId: m[1], apikey: m[2] };
+}
+function buildBootstrapUrl(overlayId) {
+  return `https://api.streamelements.com/kappa/v2/overlays/${overlayId}/bootstrap?isEditor=false&isMobile=false&isObs=false&isObsLive=false&isXsplit=false`;
+}
+async function fetchSEBootstrap({ overlayId, apikey }) {
+  const res = await fetch(buildBootstrapUrl(overlayId), {
+    method: "GET",
+    headers: { Accept: "application/json", Authorization: `apikey ${apikey}` }
+  });
+  if (!res.ok) {
+    let detail = "";
+    try {
+      const body = await res.json();
+      detail = body?.message ? ` \u2014 ${body.message}` : "";
+    } catch {
+    }
+    const reason = res.status === 401 || res.status === 403 ? "StreamElements rejected the URL token. The preview link may have been revoked." : res.status === 404 ? "Overlay not found. Double-check the URL." : `HTTP ${res.status}`;
+    throw new Error(`${reason}${detail}`);
+  }
+  const json = await res.json();
+  if (!isSEBootstrap(json)) {
+    throw new Error("Server returned a response that does not look like an SE bootstrap payload.");
+  }
+  return json;
+}
+function isSEBootstrap(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  if (!v.overlay || typeof v.overlay !== "object") return false;
+  const o = v.overlay;
+  return Array.isArray(o.widgets);
+}
+function importSEBootstrap(bootstrap) {
+  const seOverlay = bootstrap.overlay;
+  const widgets = seOverlay?.widgets ?? [];
+  const coverage = {
+    totalWidgets: widgets.length,
+    mappings: [],
+    notes: []
+  };
+  const importCanvas = {
+    width: seOverlay?.settings?.width ?? 1920,
+    height: seOverlay?.settings?.height ?? 1080
+  };
+  setImportCanvas(importCanvas);
+  const layers = [];
+  const modules = {};
+  const reviewItems = [];
+  try {
+    const seUidToLumiaGroupId = {};
+    const groupWidgetByUid = {};
+    for (const w of widgets) {
+      if (w.type !== "se-widget-group") continue;
+      const uid = w.variables?.uid;
+      if (typeof uid !== "string") continue;
+      const lumiaGroupId = nanoid3();
+      seUidToLumiaGroupId[uid] = lumiaGroupId;
+      groupWidgetByUid[uid] = w;
+    }
+    for (const uid of Object.keys(groupWidgetByUid)) {
+      const w = groupWidgetByUid[uid];
+      const lumiaGroupId = seUidToLumiaGroupId[uid];
+      const parentUid = typeof w.group === "string" ? w.group : null;
+      const parentLumiaGroupId = parentUid ? seUidToLumiaGroupId[parentUid] ?? null : null;
+      const bounds = seCssToBounds(w.css, { width: 200, height: 200 }, importCanvas);
+      const layer = {
+        id: lumiaGroupId,
+        type: "group",
+        group: parentLumiaGroupId,
+        bounds: {
+          x: bounds.x,
+          y: bounds.y,
+          width: bounds.width,
+          height: bounds.height,
+          opacity: bounds.opacity,
+          zIndex: bounds.zIndex,
+          rotate: 0,
+          scale: [1, 1],
+          matrix: ""
+        },
+        state: {
+          locked: w.locked ?? false,
+          visible: w.visible ?? true,
+          // SE's `variables.expanded` is the editor's collapsed/open state.
+          expanded: w.variables?.expanded ?? true
+        }
+      };
+      const module = {
+        id: lumiaGroupId,
+        loaded: true,
+        settings: { title: w.name ?? "Group", type: "group" },
+        lights: [],
+        css: {},
+        content: {
+          se_provenance: { widget: w, reason: "Imported as native group", status: "group" }
+        },
+        events: {},
+        variables: {}
+      };
+      layers.push(layer);
+      modules[lumiaGroupId] = module;
+      recordCoverage(coverage, { unit: { layer, module }, status: "direct", lumiaType: "group" }, w.type);
+    }
+    for (const w of widgets) {
+      if (w.type === "se-widget-group") continue;
+      const result = dispatch(w);
+      if (typeof w.group === "string") {
+        const parentLumiaGroupId = seUidToLumiaGroupId[w.group];
+        if (parentLumiaGroupId) {
+          result.unit.layer.group = parentLumiaGroupId;
+        }
+      }
+      layers.push(result.unit.layer);
+      const module = result.unit.module;
+      if (result.status === "placeholder" || result.status === "template") {
+        module.content = {
+          ...module.content ?? {},
+          se_provenance: {
+            widget: w,
+            reason: reasonFor(w.type, result.status, result.flaggedOff),
+            status: result.status,
+            flaggedOff: result.flaggedOff
+          }
+        };
+        reviewItems.push({
+          moduleId: module.id,
+          seWidget: w,
+          status: result.status,
+          reason: reasonFor(w.type, result.status, result.flaggedOff),
+          flaggedOff: result.flaggedOff
+        });
+      }
+      modules[module.id] = module;
+      recordCoverage(coverage, result, w.type);
+    }
+    if (coverage.mappings.some((m) => m.status === "placeholder")) {
+      coverage.notes.push("Some widgets imported as placeholder text layers \u2014 see SE/05-widget-to-module-mapping.md for status.");
+    }
+    if (coverage.mappings.some((m) => m.seType === "se-widget-merch-goal")) {
+      coverage.notes.push("Merch-goal widgets imported as generic goals \u2014 see SE/03-missing-variables.md \xA78 for the missing data source.");
+    }
+    if (coverage.mappings.some((m) => m.seType === "se-widget-custom-event-list")) {
+      coverage.notes.push("\u26A0 Custom widgets are experimental \u2014 they run under the SE compatibility shim (Embed.tsx) which handles most SE APIs but may not cover every edge case. Verify each custom layer renders correctly in the editor.");
+    }
+    const overlay = {
+      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",
+      settings: {
+        metadata: {
+          width: seOverlay?.settings?.width ?? 1920,
+          height: seOverlay?.settings?.height ?? 1080
+        },
+        layers,
+        modules
+      },
+      metadata: {
+        width: seOverlay?.settings?.width ?? null,
+        height: seOverlay?.settings?.height ?? null
+      },
+      layers_count: layers.length,
+      hasFullSettings: true
+    };
+    return { overlay, coverage, reviewItems };
+  } finally {
+    setImportCanvas(null);
+  }
+}
+function applyReviewAction(result, moduleId, action, payload) {
+  if (action === "keep") return result;
+  const layers = result.overlay.settings.layers ?? [];
+  const modules = { ...result.overlay.settings.modules ?? {} };
+  if (action === "skip") {
+    delete modules[moduleId];
+    const nextLayers = layers.filter((l) => l.id !== moduleId);
+    const reviewItems2 = result.reviewItems.filter((r) => r.moduleId !== moduleId);
+    return {
+      ...result,
+      overlay: { ...result.overlay, settings: { ...result.overlay.settings, layers: nextLayers, modules }, layers_count: nextLayers.length },
+      reviewItems: reviewItems2
+    };
+  }
+  if (action === "marketplace") {
+    const transplant = payload;
+    const existing2 = modules[moduleId];
+    const existingLayer = layers.find((l) => l.id === moduleId);
+    if (!existing2 || !existingLayer || !transplant) return result;
+    const newLayer = {
+      ...transplant.layer,
+      id: moduleId,
+      group: existingLayer.group ?? null,
+      bounds: existingLayer.bounds,
+      state: existingLayer.state
+    };
+    const provenance2 = existing2.content?.se_provenance;
+    const newModule = {
+      ...transplant.module,
+      id: moduleId,
+      content: { ...transplant.module.content ?? {}, se_provenance: provenance2 }
+    };
+    const rootOldNewId = transplant.layer.id;
+    const remappedExtras = (transplant.extras ?? []).map((e) => ({
+      layer: e.layer.group === rootOldNewId ? { ...e.layer, group: moduleId } : e.layer,
+      module: e.module
+    }));
+    const nextLayers = layers.map((l) => l.id === moduleId ? newLayer : l);
+    for (const extra of remappedExtras) {
+      nextLayers.push(extra.layer);
+      modules[extra.module.id] = extra.module;
+    }
+    modules[moduleId] = newModule;
+    const reviewItems2 = result.reviewItems.filter((r) => r.moduleId !== moduleId);
+    return {
+      ...result,
+      overlay: {
+        ...result.overlay,
+        settings: { ...result.overlay.settings, layers: nextLayers, modules },
+        layers_count: nextLayers.length
+      },
+      reviewItems: reviewItems2
+    };
+  }
+  const existing = modules[moduleId];
+  const generated = payload;
+  if (!existing || !generated) return result;
+  const provenance = existing.content?.se_provenance;
+  const replaced = {
+    ...existing,
+    settings: { ...existing.settings ?? {}, type: "custom" },
+    css: {},
+    // discard the placeholder's red-warning styling
+    content: {
+      codeId: generated.codeId ?? `ai-${moduleId}`,
+      html: generated.html ?? "",
+      css: generated.css ?? "",
+      js: generated.js ?? "",
+      data: parseLooseJson(generated.data) ?? {},
+      configs: parseLooseJson(generated.configs) ?? [],
+      flavor: "ai-generated",
+      se_provenance: provenance
+    }
+  };
+  modules[moduleId] = replaced;
+  const reviewItems = result.reviewItems.filter((r) => r.moduleId !== moduleId);
+  return {
+    ...result,
+    overlay: { ...result.overlay, settings: { ...result.overlay.settings, modules } },
+    reviewItems
+  };
+}
+function parseLooseJson(value) {
+  if (value == null) return void 0;
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function getAILandingBounds(widget, canvas) {
+  const bounds = seCssToBounds(widget.css, LUMIA_DEFAULT_SIZES.text, canvas);
+  return { width: bounds.width, height: bounds.height };
+}
+function buildAIPromptForSEWidget(widget, canvas) {
+  const variables = widget.variables ?? {};
+  const listener = typeof widget.listener === "string" ? widget.listener : null;
+  const listeners = widget.listeners && typeof widget.listeners === "object" && !Array.isArray(widget.listeners) ? Object.keys(widget.listeners) : null;
+  const landing = getAILandingBounds(widget, canvas);
+  return [
+    "Recreate a StreamElements overlay widget as a Lumia Stream custom overlay (HTML + CSS + JS).",
+    "",
+    `StreamElements widget type: ${widget.type}`,
+    listener ? `Primary event listener: ${listener}` : "",
+    listeners ? `Subscribes to events: ${listeners.join(", ")}` : "",
+    `Canvas: ${landing.width} \xD7 ${landing.height}`,
+    "",
+    "Widget configuration (JSON):",
+    "```json",
+    JSON.stringify(variables, null, 2).slice(0, 6e3),
+    "```",
+    "",
+    "Constraints \u2014 your output must run inside a Lumia Custom Overlay sandboxed iframe:",
+    '- Use `window.Overlay.on("alert", handler)` / `window.Overlay.on("chat", handler)` to receive Lumia events.',
+    "- Lumia template variables use double-brace syntax: {{username}}, {{amount}}, {{message}}, {{currency}}.",
+    "- The `window.DATA` object holds user-configurable values (mirrors your `configs`).",
+    "- DO NOT depend on StreamElements globals (no SE_API, no jQuery).",
+    "- Keep dependencies inline or via CDN <link>/<script> tags inside the HTML.",
+    "",
+    "Match the SE widget's visible behavior as closely as you can. Return the result via the `upsertOverlayTabs` function call with `html`, `css`, `js`, plus a `configs` array describing any tunable fields."
+  ].filter(Boolean).join("\n");
+}
 export {
+  FLAG_OFF_REASONS,
   LSButton,
   LSCheckbox,
   LSCheckboxField,
@@ -2725,11 +5622,31 @@ export {
   LSVariableInputField,
   LSVariableInputProvider,
   MEDIA_PREVIEW_USER_LEVEL_VALUES,
+  MarketplacePicker,
+  SEImportWizard,
+  SE_IMPORT_FLAGS,
+  SE_WIDGET_TO_MARKETPLACE_CANDIDATES,
+  applyReviewAction,
+  buildAIPromptForSEWidget,
+  buildBootstrapUrl,
   buildChatMessageContent,
   codeMirrorlinterOptions,
+  extractSEOverlayId,
+  extractSEPreviewParts,
+  fetchSEBootstrap,
+  filenameFromURL,
+  findSEAssetURLs,
+  getAILandingBounds,
+  getMarketplaceCandidates,
   getMediaPreviewFromUrl,
   getNormalizedUserLevels,
+  hasMarketplaceCandidates,
+  importSEBootstrap,
   isMediaPreviewAllowedForUser,
+  isSEBootstrap,
+  isWidgetFlaggedOff,
+  listTransplantableLayers,
+  mirrorOneAsset,
   normalizeHttpUrl,
   normalizeMediaPreviewUserLevels,
   parseMessageLinks,
@@ -2737,6 +5654,8 @@ export {
   resolveMediaPreviewRoleSettings,
   resolveMediaPreviewSetting,
   resolvePlatformChatterProfileUrl,
+  rewriteAssetURLs,
   tokenizeChatMessage,
+  transplantLayer,
   variableCompletionOptions
 };