@lumiastream/ui 0.6.9 → 0.7.2

package/dist/index.js

@@ -5412,10 +5412,8 @@ function mapChatbox(widget, ctx) {
   const fadeOutSeconds = isPermanent ? 0 : typeof v.fadeOut === "number" && v.fadeOut > 0 ? v.fadeOut : typeof v.delay === "number" && v.delay > 0 ? v.delay : DEFAULT_FADE_SECONDS;
   const DEFAULT_CHATBOX_FONT_SIZE = 14;
   const moduleCss = {};
-  const fontFamily = messageWins("font-family");
-  if (fontFamily != null) moduleCss.fontFamily = fontFamily;
-  const fontSize = messageWins("font-size");
-  moduleCss.fontSize = fontSize != null ? fontSize : DEFAULT_CHATBOX_FONT_SIZE;
+  const messageFontSize = messageCss["font-size"];
+  moduleCss.fontSize = typeof messageFontSize === "number" && messageFontSize > 0 || typeof messageFontSize === "string" && messageFontSize.length > 0 ? messageFontSize : DEFAULT_CHATBOX_FONT_SIZE;
   const rawColor = messageWins("color");
   const isSeDefaultColor = rawColor == null || typeof rawColor === "string" && (rawColor === "" || rawColor.toLowerCase() === "#fff" || rawColor.toLowerCase() === "#ffffff");
   if (!isSeDefaultColor) {
@@ -5425,6 +5423,10 @@ function mapChatbox(widget, ctx) {
   } else if (rawColor != null) {
     moduleCss.color = rawColor;
   }
+  const messageFontFamily = messageCss["font-family"];
+  if (typeof messageFontFamily === "string" && messageFontFamily.length > 0) {
+    moduleCss.fontFamily = messageFontFamily;
+  }
   const messageTextShadow = messageCss["text-shadow"];
   if (typeof messageTextShadow === "string" && messageTextShadow.length > 0) {
     moduleCss.textShadow = messageTextShadow;
@@ -5503,7 +5505,7 @@ var SE_LISTENER_TO_LUMIA_CATEGORY = {
   "superchat-recent": "superchats",
   "hypetrain-latest": "hypetrain"
 };
-function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
+function collectEnabledSEListeners(seListeners, explicitListener) {
   const enabled = [];
   if (seListeners && typeof seListeners === "object" && !Array.isArray(seListeners)) {
     for (const [k, v] of Object.entries(seListeners)) {
@@ -5515,6 +5517,19 @@ function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
   if (typeof explicitListener === "string" && explicitListener && !enabled.includes(explicitListener)) {
     enabled.push(explicitListener);
   }
+  return enabled;
+}
+function seWidgetIsCheer(widget) {
+  if (typeof widget.type === "string" && widget.type.includes("cheer")) return true;
+  const listeners = collectEnabledSEListeners(widget.listeners, widget.listener);
+  const fromVars = widget.variables?.listener;
+  if (typeof fromVars === "string" && fromVars) listeners.push(fromVars);
+  return listeners.some(
+    (listener) => SE_LISTENER_TO_LUMIA_CATEGORY[listener] === LumiaEventListTypes.BITS
+  );
+}
+function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
+  const enabled = collectEnabledSEListeners(seListeners, explicitListener);
   if (enabled.length === 0) return void 0;
   const allowedCategories = /* @__PURE__ */ new Set();
   for (const listener of enabled) {
@@ -5540,6 +5555,15 @@ function seTemplateToMarqueeTemplate(seTemplate) {
   if (typeof seTemplate !== "string" || !seTemplate.trim()) return void 0;
   return translateSeText(seTemplate);
 }
+function ensureCheermoteTemplate(template) {
+  const fallback = "{{username}}: {{cheermote}}{{amount}} ";
+  if (!template || !template.trim()) return fallback;
+  if (template.includes("{{cheermote}}")) return template;
+  if (template.includes("{{amount}}")) {
+    return template.replace("{{amount}}", "{{cheermote}}{{amount}}");
+  }
+  return `${template.replace(/\s+$/, "")} {{cheermote}}{{amount}} `;
+}
 function mapEventList(widget, ctx) {
   const v = widget.variables ?? {};
   const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
@@ -5547,7 +5571,9 @@ function mapEventList(widget, ctx) {
   const seText = widget.text;
   const scrolling = seText?.scrolling;
   const isMarquee = !!(scrolling && scrolling.enabled === true);
-  const itemTemplate = isMarquee ? seTemplateToMarqueeTemplate(seText?.value) : void 0;
+  const isCheerMarquee = isMarquee && seWidgetIsCheer(widget);
+  const baseItemTemplate = isMarquee ? seTemplateToMarqueeTemplate(seText?.value) : void 0;
+  const itemTemplate = isCheerMarquee ? ensureCheermoteTemplate(baseItemTemplate) : baseItemTemplate;
   const marqueeSpeed = isMarquee ? seScrollSpeedToPixelsPerSecond(scrolling?.speed) : void 0;
   const marqueeDirection = isMarquee ? scrolling?.direction === "right" ? "right" : "left" : void 0;
   const theme = isMarquee ? "marquee" : v.theme ?? "simple";
@@ -10209,19 +10235,17 @@ function StepReview({
   ] });
 }
 var CUSTOM_WIDGET_TABS = [
-  { key: "listeners", label: "listeners" },
-  { key: "css", label: "variables.css" },
-  { key: "html", label: "variables.html" },
-  { key: "js", label: "variables.js" },
-  { key: "fields", label: "variables.fields" },
-  { key: "fieldData", label: "variables.fieldData" },
-  { key: "provider", label: "provider" }
+  { key: "css", label: "CSS" },
+  { key: "html", label: "HTML" },
+  { key: "js", label: "JS" },
+  { key: "fields", label: "Fields" },
+  { key: "fieldData", label: "FieldData" },
+  { key: "listeners", label: "Listeners" },
+  { key: "provider", label: "Provider" }
 ];
 function CustomWidgetCard({ widget }) {
   const tabs = CUSTOM_WIDGET_TABS.filter(({ key }) => widget[key].trim().length > 0);
-  const [activeKey, setActiveKey] = useState6(
-    tabs[0]?.key ?? "js"
-  );
+  const [activeKey, setActiveKey] = useState6(tabs[0]?.key ?? "js");
   const [copied, setCopied] = useState6(false);
   const value = widget[activeKey] ?? "";
   useEffect6(() => setCopied(false), [activeKey]);

package/dist/se-import.js

@@ -2332,10 +2332,8 @@ function mapChatbox(widget, ctx) {
   const fadeOutSeconds = isPermanent ? 0 : typeof v.fadeOut === "number" && v.fadeOut > 0 ? v.fadeOut : typeof v.delay === "number" && v.delay > 0 ? v.delay : DEFAULT_FADE_SECONDS;
   const DEFAULT_CHATBOX_FONT_SIZE = 14;
   const moduleCss = {};
-  const fontFamily = messageWins("font-family");
-  if (fontFamily != null) moduleCss.fontFamily = fontFamily;
-  const fontSize = messageWins("font-size");
-  moduleCss.fontSize = fontSize != null ? fontSize : DEFAULT_CHATBOX_FONT_SIZE;
+  const messageFontSize = messageCss["font-size"];
+  moduleCss.fontSize = typeof messageFontSize === "number" && messageFontSize > 0 || typeof messageFontSize === "string" && messageFontSize.length > 0 ? messageFontSize : DEFAULT_CHATBOX_FONT_SIZE;
   const rawColor = messageWins("color");
   const isSeDefaultColor = rawColor == null || typeof rawColor === "string" && (rawColor === "" || rawColor.toLowerCase() === "#fff" || rawColor.toLowerCase() === "#ffffff");
   if (!isSeDefaultColor) {
@@ -2345,6 +2343,10 @@ function mapChatbox(widget, ctx) {
   } else if (rawColor != null) {
     moduleCss.color = rawColor;
   }
+  const messageFontFamily = messageCss["font-family"];
+  if (typeof messageFontFamily === "string" && messageFontFamily.length > 0) {
+    moduleCss.fontFamily = messageFontFamily;
+  }
   const messageTextShadow = messageCss["text-shadow"];
   if (typeof messageTextShadow === "string" && messageTextShadow.length > 0) {
     moduleCss.textShadow = messageTextShadow;
@@ -2423,7 +2425,7 @@ var SE_LISTENER_TO_LUMIA_CATEGORY = {
   "superchat-recent": "superchats",
   "hypetrain-latest": "hypetrain"
 };
-function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
+function collectEnabledSEListeners(seListeners, explicitListener) {
   const enabled = [];
   if (seListeners && typeof seListeners === "object" && !Array.isArray(seListeners)) {
     for (const [k, v] of Object.entries(seListeners)) {
@@ -2435,6 +2437,19 @@ function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
   if (typeof explicitListener === "string" && explicitListener && !enabled.includes(explicitListener)) {
     enabled.push(explicitListener);
   }
+  return enabled;
+}
+function seWidgetIsCheer(widget) {
+  if (typeof widget.type === "string" && widget.type.includes("cheer")) return true;
+  const listeners = collectEnabledSEListeners(widget.listeners, widget.listener);
+  const fromVars = widget.variables?.listener;
+  if (typeof fromVars === "string" && fromVars) listeners.push(fromVars);
+  return listeners.some(
+    (listener) => SE_LISTENER_TO_LUMIA_CATEGORY[listener] === LumiaEventListTypes.BITS
+  );
+}
+function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
+  const enabled = collectEnabledSEListeners(seListeners, explicitListener);
   if (enabled.length === 0) return void 0;
   const allowedCategories = /* @__PURE__ */ new Set();
   for (const listener of enabled) {
@@ -2460,6 +2475,15 @@ function seTemplateToMarqueeTemplate(seTemplate) {
   if (typeof seTemplate !== "string" || !seTemplate.trim()) return void 0;
   return translateSeText(seTemplate);
 }
+function ensureCheermoteTemplate(template) {
+  const fallback = "{{username}}: {{cheermote}}{{amount}} ";
+  if (!template || !template.trim()) return fallback;
+  if (template.includes("{{cheermote}}")) return template;
+  if (template.includes("{{amount}}")) {
+    return template.replace("{{amount}}", "{{cheermote}}{{amount}}");
+  }
+  return `${template.replace(/\s+$/, "")} {{cheermote}}{{amount}} `;
+}
 function mapEventList(widget, ctx) {
   const v = widget.variables ?? {};
   const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
@@ -2467,7 +2491,9 @@ function mapEventList(widget, ctx) {
   const seText = widget.text;
   const scrolling = seText?.scrolling;
   const isMarquee = !!(scrolling && scrolling.enabled === true);
-  const itemTemplate = isMarquee ? seTemplateToMarqueeTemplate(seText?.value) : void 0;
+  const isCheerMarquee = isMarquee && seWidgetIsCheer(widget);
+  const baseItemTemplate = isMarquee ? seTemplateToMarqueeTemplate(seText?.value) : void 0;
+  const itemTemplate = isCheerMarquee ? ensureCheermoteTemplate(baseItemTemplate) : baseItemTemplate;
   const marqueeSpeed = isMarquee ? seScrollSpeedToPixelsPerSecond(scrolling?.speed) : void 0;
   const marqueeDirection = isMarquee ? scrolling?.direction === "right" ? "right" : "left" : void 0;
   const theme = isMarquee ? "marquee" : v.theme ?? "simple";
@@ -9085,19 +9111,17 @@ function StepReview({
   ] });
 }
 var CUSTOM_WIDGET_TABS = [
-  { key: "listeners", label: "listeners" },
-  { key: "css", label: "variables.css" },
-  { key: "html", label: "variables.html" },
-  { key: "js", label: "variables.js" },
-  { key: "fields", label: "variables.fields" },
-  { key: "fieldData", label: "variables.fieldData" },
-  { key: "provider", label: "provider" }
+  { key: "css", label: "CSS" },
+  { key: "html", label: "HTML" },
+  { key: "js", label: "JS" },
+  { key: "fields", label: "Fields" },
+  { key: "fieldData", label: "FieldData" },
+  { key: "listeners", label: "Listeners" },
+  { key: "provider", label: "Provider" }
 ];
 function CustomWidgetCard({ widget }) {
   const tabs = CUSTOM_WIDGET_TABS.filter(({ key }) => widget[key].trim().length > 0);
-  const [activeKey, setActiveKey] = useState6(
-    tabs[0]?.key ?? "js"
-  );
+  const [activeKey, setActiveKey] = useState6(tabs[0]?.key ?? "js");
   const [copied, setCopied] = useState6(false);
   const value = widget[activeKey] ?? "";
   useEffect6(() => setCopied(false), [activeKey]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumiastream/ui",
-  "version": "0.6.9",
+  "version": "0.7.2",
   "author": "Lumia Stream",
   "license": "ISC",
   "description": "Lumia UI Kit",
@@ -128,8 +128,8 @@
     "vitest": "^4.1.6"
   },
   "dependencies": {
-    "@lumiastream/lumia-translations": "1.16.5",
-    "@lumiastream/lumia-types": "3.6.5",
+    "@lumiastream/lumia-translations": "1.16.6",
+    "@lumiastream/lumia-types": "3.6.8",
     "classnames": "^2.5.1",
     "globals": "^17.4.0",
     "nanoid": "^5.1.11",