@lumiastream/ui 0.5.4 → 0.5.6

package/dist/index.js

@@ -93,9 +93,6 @@ var LSInput = forwardRef(
       inputAfterText,
       maxWidth,
       className = "",
-      InputProps: inputPropsProp,
-      InputLabelProps: inputLabelPropsProp,
-      inputProps: htmlInputPropsProp,
       slotProps: slotPropsProp,
       onChange,
       onChangeStart,
@@ -130,25 +127,11 @@ var LSInput = forwardRef(
       onChange?.(event, sanitizedValue);
       onChangeEnd?.(event, sanitizedValue);
     };
-    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
-    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
-    const inputSlotProps = {
-      ...inputPropsProp,
-      startAdornment: resolvedStartAdornment,
-      endAdornment: resolvedEndAdornment,
-      readOnly: rest.readOnly ?? inputPropsProp?.readOnly,
-      sx: {
-        ...inputPropsProp?.sx ?? {},
-        "& input, & textarea": {
-          textAlign: centerText ? "center" : void 0,
-          color: textColor ?? void 0
-        }
-      }
-    };
-    const inputLabelProps = {
-      shrink: true,
-      ...inputLabelPropsProp
-    };
+    const callerInputSlot = slotPropsProp?.input ?? {};
+    const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
+    const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
+    const resolvedStartAdornment = callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
     const helperContent = helperText ?? (typeof error === "string" ? error : "");
     const hasError = typeof error === "string" ? true : Boolean(error);
     const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
@@ -156,20 +139,24 @@ var LSInput = forwardRef(
     const slotProps = {
       ...slotPropsProp ?? {},
       input: {
-        ...slotPropsProp?.input ?? {},
-        ...inputSlotProps,
+        ...callerInputSlot,
+        startAdornment: resolvedStartAdornment,
+        endAdornment: resolvedEndAdornment,
+        readOnly: rest.readOnly ?? callerInputSlot.readOnly,
         sx: {
-          ...slotPropsProp?.input?.sx ?? {},
-          ...inputSlotProps.sx
+          ...callerInputSlot.sx ?? {},
+          "& input, & textarea": {
+            textAlign: centerText ? "center" : void 0,
+            color: textColor ?? void 0
+          }
         }
       },
       inputLabel: {
-        ...slotPropsProp?.inputLabel ?? {},
-        ...inputLabelProps
+        shrink: true,
+        ...callerInputLabelSlot
       },
       htmlInput: {
-        ...slotPropsProp?.htmlInput ?? {},
-        ...htmlInputPropsProp ?? {}
+        ...callerHtmlInputSlot
       }
     };
     const TextFieldComponent = TextField;
@@ -359,15 +346,15 @@ var LSSliderInput = ({
             onChange: (_event, nextValue) => handleInputChange({ target: { value: nextValue ?? "" } }),
             value: displayValue ?? "",
             inputAfterText,
-            InputProps: {
-              ...inputProps?.InputProps ?? {},
-              name,
-              type: "number",
-              value: displayValue,
-              min: displayMinimum,
-              max: displayMaximum,
-              step: displayStep,
-              inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+            slotProps: {
+              ...inputProps?.slotProps ?? {},
+              htmlInput: {
+                ...inputProps?.slotProps?.htmlInput ?? {},
+                min: displayMinimum,
+                max: displayMaximum,
+                step: displayStep,
+                inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+              }
             },
             fullWidth: hideSlider ? fullWidth : false,
             $noMinHeight: false,
@@ -431,6 +418,16 @@ var LSSelect = ({
           border: "1px solid var(--neutralDark4)",
           borderRadius: "var(--radius, 1rem)",
           boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+          "& .MuiList-root": {
+            backgroundColor: "var(--neutralDark2)"
+          },
+          "& .MuiListSubheader-root": {
+            backgroundColor: "var(--neutralDark1)",
+            color: "var(--neutralLight2)"
+          },
+          "& .MuiMenuItem-root": {
+            color: "var(--neutralLight1)"
+          },
           ...MenuProps?.slotProps?.paper?.sx
         }
       },
@@ -442,28 +439,6 @@ var LSSelect = ({
           ...MenuProps?.slotProps?.list?.sx
         }
       }
-    },
-    PaperProps: {
-      ...MenuProps?.PaperProps ?? {},
-      sx: {
-        background: "var(--neutralDark2) !important",
-        backgroundColor: "var(--neutralDark2)",
-        color: "var(--neutralLight1)",
-        border: "1px solid var(--neutralDark4)",
-        borderRadius: "var(--radius, 1rem)",
-        boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
-        "& .MuiList-root": {
-          backgroundColor: "var(--neutralDark2)"
-        },
-        "& .MuiListSubheader-root": {
-          backgroundColor: "var(--neutralDark1)",
-          color: "var(--neutralLight2)"
-        },
-        "& .MuiMenuItem-root": {
-          color: "var(--neutralLight1)"
-        },
-        ...MenuProps?.PaperProps?.sx
-      }
     }
   };
   return /* @__PURE__ */ jsxs2(
@@ -783,14 +758,7 @@ LSDatePicker.displayName = "LSDatePicker";
 import { KeyboardArrowDown } from "@mui/icons-material";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField2 from "@mui/material/TextField";
-import {
-  memo,
-  startTransition,
-  useEffect as useEffect3,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState3
-} from "react";
+import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var LSFontPicker = memo(function LSFontPicker2({
   value,
@@ -848,9 +816,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       popupIcon: /* @__PURE__ */ jsx8(KeyboardArrowDown, {}),
       isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
       onChange: (_event, newValue) => {
-        handleValueChange(
-          typeof newValue === "string" ? newValue : `${newValue ?? ""}`
-        );
+        handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
       },
       onInputChange: (_event, newInputValue, reason) => {
         if (reason === "input" || reason === "clear") {
@@ -907,11 +873,7 @@ var LSFontPicker = memo(function LSFontPicker2({
         );
       },
       renderInput: (params) => {
-        const {
-          InputLabelProps: paramsInputLabelProps,
-          InputProps: paramsInputProps,
-          ...restParams
-        } = params;
+        const { slotProps: paramsSlotProps = {}, ...restParams } = params;
         return /* @__PURE__ */ jsx8(
           TextFieldComponent,
           {
@@ -928,12 +890,16 @@ var LSFontPicker = memo(function LSFontPicker2({
               }
             },
             slotProps: {
+              ...paramsSlotProps,
               inputLabel: {
-                shrink: true,
-                ...paramsInputLabelProps ?? {}
+                ...paramsSlotProps.inputLabel ?? {},
+                shrink: true
               },
               input: {
-                ...paramsInputProps ?? {}
+                ...paramsSlotProps.input ?? {}
+              },
+              htmlInput: {
+                ...paramsSlotProps.htmlInput ?? {}
               }
             }
           }
@@ -976,6 +942,12 @@ var LSMultiSelect = ({
         /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
+        // The previous version of this also set `PaperProps` here — that
+        // prop was removed from Menu in @mui/material v9 and React warns
+        // "does not recognize the `PaperProps` prop on a DOM element"
+        // when Menu spreads it through. Folded the one unique selector
+        // (`& .MuiList-root`) into `slotProps.paper.sx` below; everything
+        // else was already duplicated there.
         slotProps: {
           paper: {
             sx: {
@@ -987,7 +959,10 @@ var LSMultiSelect = ({
               boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
               backdropFilter: "none",
               opacity: 1,
-              maxHeight: "280px !important"
+              maxHeight: "280px !important",
+              "& .MuiList-root": {
+                backgroundColor: "var(--neutralDark2)"
+              }
             }
           },
           list: {
@@ -996,21 +971,6 @@ var LSMultiSelect = ({
               color: "var(--neutralLight1)"
             }
           }
-        },
-        PaperProps: {
-          sx: {
-            background: "var(--neutralDark2) !important",
-            backgroundColor: "var(--neutralDark2)",
-            color: "var(--neutralLight1)",
-            backdropFilter: "none",
-            opacity: 1,
-            maxHeight: "280px !important",
-            border: "1px solid var(--neutralDark4)",
-            borderRadius: "var(--radius, 1rem)",
-            "& .MuiList-root": {
-              backgroundColor: "var(--neutralDark2)"
-            }
-          }
         }
       },
       children: options.map((option) => /* @__PURE__ */ jsxs4(
@@ -1077,7 +1037,8 @@ import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var LSTextField = forwardRef4(
   (props, ref) => {
-    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    const { slotProps, ...rest } = props;
+    const paramsInputLabel = slotProps?.inputLabel ?? {};
     return /* @__PURE__ */ jsx11(
       TextField3,
       {
@@ -1086,18 +1047,9 @@ var LSTextField = forwardRef4(
         className: "mui-ls-input",
         slotProps: {
           ...slotProps ?? {},
-          input: {
-            ...slotProps?.input ?? {},
-            ...InputProps ?? {},
-            sx: {
-              ...slotProps?.input?.sx ?? {},
-              ...InputProps?.sx ?? {}
-            }
-          },
           inputLabel: {
-            ...slotProps?.inputLabel ?? {},
-            shrink: true,
-            ...InputLabelProps ?? {}
+            ...paramsInputLabel,
+            shrink: true
           }
         },
         ref
@@ -2256,14 +2208,12 @@ var VariableInputTextField = forwardRef5(
     containerRef,
     showVariableIcon
   }, ref) => {
-    const inputPropsInputProps = inputProps?.InputProps ?? {};
-    const paramsInputProps = params?.InputProps ?? {};
-    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
-    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
     const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx12(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
-    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment ?? resolvedExplicitStartAdornment;
-    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
+    const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
+    const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
     return /* @__PURE__ */ jsx12(
       LSTextField,
       {
@@ -2285,31 +2235,27 @@ var VariableInputTextField = forwardRef5(
         onChange: onChange ? (e) => onChange(e.target.value) : void 0,
         ...inputProps,
         ...params,
-        InputProps: {
-          ...inputPropsSlotInputProps,
-          ...inputPropsInputProps,
-          ...paramsSlotInputProps,
-          ...paramsInputProps,
-          startAdornment,
-          endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            endAdornment ?? null,
-            showVariableIcon ? /* @__PURE__ */ jsx12(
-              Tooltip,
-              {
-                title: t("chatbot.allowed-variables", "Allowed Variables"),
-                children: /* @__PURE__ */ jsx12(
-                  InputAdornment2,
-                  {
-                    position: "end",
-                    onClick: clickedVariableIcon,
-                    ref: containerRef,
-                    className: "ls-variable-input-adornment",
-                    children: "{}"
-                  }
-                )
-              }
-            ) : null
-          ] })
+        slotProps: {
+          ...inputProps?.slotProps ?? {},
+          ...params?.slotProps ?? {},
+          input: {
+            ...inputPropsSlotInput,
+            ...paramsSlotInput,
+            startAdornment,
+            endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              endAdornment ?? null,
+              showVariableIcon ? /* @__PURE__ */ jsx12(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx12(
+                InputAdornment2,
+                {
+                  position: "end",
+                  onClick: clickedVariableIcon,
+                  ref: containerRef,
+                  className: "ls-variable-input-adornment",
+                  children: "{}"
+                }
+              ) }) : null
+            ] })
+          }
         },
         inputRef: ref
       }
@@ -4145,13 +4091,15 @@ function seExtraTextCss(seCss, scrolling) {
     extra.WebkitTextStrokeWidth = seCss["-webkit-text-stroke-width"];
   if (seCss["letter-spacing"] != null) extra.letterSpacing = seCss["letter-spacing"];
   if (seCss["word-spacing"] != null) extra.wordSpacing = seCss["word-spacing"];
-  if (scrolling?.enabled) {
-    extra.scroll = true;
-    const speed = Number(scrolling.speed);
-    if (Number.isFinite(speed) && speed > 0) extra.scrollSpeed = speed * 600;
-  }
+  if (scrolling?.enabled) extra.scroll = true;
   return extra;
 }
+function seMarqueeSpeedPxPerSec(scrolling) {
+  if (!scrolling?.enabled) return void 0;
+  const speed = Number(scrolling.speed);
+  if (!Number.isFinite(speed) || speed <= 0) return void 0;
+  return speed * 12;
+}
 function mapText(widget, ctx) {
   const value = translateSeText(
     widget.text?.value ?? "",
@@ -4161,13 +4109,15 @@ function mapText(widget, ctx) {
     { context: "static" }
   );
   const seCss = widget.text?.css ?? {};
+  const marqueeSpeed = seMarqueeSpeedPxPerSec(widget.text?.scrolling);
   return buildUnit(
     widget,
     "text",
     {
       content: {
         value,
-        highlightColor: "inherit"
+        highlightColor: "inherit",
+        ...marqueeSpeed != null ? { marqueeSpeed } : {}
       },
       css: {
         fontSize: seCss["font-size"] ?? 24,
@@ -4184,25 +4134,41 @@ function mapText(widget, ctx) {
     ctx
   );
 }
+function seInnerAutoFit(widget, innerCss, mode) {
+  const isInnerAutoWidth = innerCss?.width === "auto";
+  const isInnerAutoHeight = innerCss?.height === "auto";
+  if (mode === "width-drives-both") {
+    if (!isInnerAutoWidth) return {};
+    return { objectFit: "contain", autoWidth: true, autoHeight: true };
+  }
+  if (!isInnerAutoWidth && !isInnerAutoHeight) return {};
+  const result = { objectFit: "contain" };
+  if (isInnerAutoWidth && !isExplicitPxSize(widget.css?.width))
+    result.autoWidth = true;
+  if (isInnerAutoHeight && !isExplicitPxSize(widget.css?.height))
+    result.autoHeight = true;
+  return result;
+}
+function applySeAutoFitBounds(unit, fit) {
+  const bounds = unit.layer.bounds;
+  if (fit.autoWidth) bounds.autoWidth = true;
+  if (fit.autoHeight) bounds.autoHeight = true;
+}
 function mapImage(widget, ctx) {
+  const fit = seInnerAutoFit(widget, widget.image?.css, "inner-axis-gated");
   const unit = buildUnit(
     widget,
     "image",
     {
       content: {
         src: widget.image?.src ?? "",
-        loop: true
+        loop: true,
+        ...fit.objectFit ? { objectFit: fit.objectFit } : {}
       }
     },
     ctx
   );
-  const innerWidth = widget.image?.css?.width;
-  const innerHeight = widget.image?.css?.height;
-  const outerWidthExplicit = isExplicitPxSize(widget.css?.width);
-  const outerHeightExplicit = isExplicitPxSize(widget.css?.height);
-  const bounds = unit.layer.bounds;
-  if (innerWidth === "auto" && !outerWidthExplicit) bounds.autoWidth = true;
-  if (innerHeight === "auto" && !outerHeightExplicit) bounds.autoHeight = true;
+  applySeAutoFitBounds(unit, fit);
   return unit;
 }
 function isExplicitPxSize(value) {
@@ -4216,8 +4182,7 @@ function isExplicitPxSize(value) {
   return Number.isFinite(parsed) && parsed > 0;
 }
 function mapVideo(widget, ctx) {
-  const innerWidth = widget.video?.css?.width;
-  const isInnerAutoWidth = innerWidth === "auto";
+  const fit = seInnerAutoFit(widget, widget.video?.css, "width-drives-both");
   const unit = buildUnit(
     widget,
     "video",
@@ -4226,19 +4191,13 @@ function mapVideo(widget, ctx) {
         src: widget.video?.src ?? "",
         volume: widget.video?.volume ?? 0.5,
         loop: true,
-        muted: false,
-        ...isInnerAutoWidth ? { objectFit: "contain" } : {}
+        muted: false
       }
     },
     ctx
   );
-  const bounds = unit.layer.bounds;
-  if (isInnerAutoWidth) {
-    bounds.autoWidth = true;
-    bounds.autoHeight = true;
-  } else {
-    bounds.autoHeight = true;
-  }
+  applySeAutoFitBounds(unit, fit);
+  unit.layer.bounds.autoHeight = true;
   return unit;
 }
 var LUMIA_SNOW_WEBM = "https://storage.lumiastream.com/overlays/global/seasonal/snow.webm";
@@ -4269,11 +4228,16 @@ function mapReadout(widget, fallbackVar, ctx) {
     context: "static"
   }) : `{{${variable}}}`;
   const seCss = widget.text?.css ?? {};
+  const marqueeSpeed = seMarqueeSpeedPxPerSec(widget.text?.scrolling);
   return buildUnit(
     widget,
     "text",
     {
-      content: { value, highlightColor: "inherit" },
+      content: {
+        value,
+        highlightColor: "inherit",
+        ...marqueeSpeed != null ? { marqueeSpeed } : {}
+      },
       css: {
         fontSize: seCss["font-size"] ?? 28,
         textAlign: seCss["text-align"] ?? "center",
@@ -5437,7 +5401,11 @@ function mapEventList(widget, ctx) {
         ...isMarquee ? { marqueeItemGap: 24 } : {},
         showAlertIcon: !isMarquee,
         showSiteIcon: !isMarquee,
-        showUserAvatar: true,
+        // SE event lists are text-only (`{name}: {amount}` rows for tip-recent,
+        // follower-recent, etc.) — no avatar column. Mirror that on import so
+        // the streamer's layout matches what they had in SE; they can re-enable
+        // avatars from the Eventlist settings panel if they want.
+        showUserAvatar: false,
         showDetailedText: false,
         hideAlertMessage: false
       }