@lumiastream/ui 0.7.0 → 0.7.3

package/dist/index.js

@@ -5261,7 +5261,8 @@ var TIPJAR_DEFAULT_CONTENT_FIELDS = {
     chat: false
   },
   chat: {
-    useViewerAvatars: true
+    useViewerAvatars: true,
+    useChatEmotes: false
   },
   display: {
     showEventMessages: false,
@@ -5505,7 +5506,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)) {
@@ -5517,6 +5518,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) {
@@ -5542,6 +5556,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);
@@ -5549,7 +5572,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";
@@ -6556,36 +6581,61 @@ function mapUnsupportedAsText(widget, ctx) {
 var SE_TYPE_TO_CATEGORY = {
   cheer: "bits",
   sub: "subs",
+  subscriber: "subs",
   follower: "follows",
   raid: "raids",
   tip: "tips"
 };
+function isUnsupportedSETipVariation(seKey, variation) {
+  return seKey === "tip" && variation.condition === "EXACT" && variation.amount === 4.2;
+}
+function isSubscriberGiftVariation(seKey, variation) {
+  if (seKey !== "sub" && seKey !== "subscriber") return false;
+  const condition = typeof variation.condition === "string" ? variation.condition.toUpperCase() : "";
+  const name = typeof variation.name === "string" ? variation.name.toLowerCase() : "";
+  return condition === "GIFT" || name.includes("gift");
+}
+function categoryForSEVariation(seKey, variation) {
+  if (isSubscriberGiftVariation(seKey, variation)) return "gifts";
+  return SE_TYPE_TO_CATEGORY[seKey];
+}
 function liftSESpritesIntoTiers(types) {
   const out = {};
-  if (!types) return out;
+  if (!types) {
+    return out;
+  }
   for (const [seKey, block] of Object.entries(types)) {
-    const cat = SE_TYPE_TO_CATEGORY[seKey];
-    if (!cat) continue;
+    if (!SE_TYPE_TO_CATEGORY[seKey]) {
+      continue;
+    }
+    if (seKey === "cheer") {
+      continue;
+    }
     const variations = block?.variations ?? [];
     const usable = variations.filter(
-      (v) => typeof (v?.preview ?? v?.src) === "string" && (v.preview ?? v.src ?? "").length > 0
+      (v) => !isUnsupportedSETipVariation(seKey, v) && typeof (v?.preview ?? v?.src) === "string" && (v.preview ?? v.src ?? "").length > 0
     );
-    const flagged = usable.filter((v) => v.default === true);
-    const picked = flagged.length > 0 ? flagged : usable;
-    const seenAmounts = /* @__PURE__ */ new Set();
-    const tiers = [];
-    for (const v of picked) {
+    for (const v of usable) {
+      const cat = categoryForSEVariation(seKey, v);
+      if (!cat) continue;
       const amount = typeof v.amount === "number" && v.amount > 0 ? v.amount : 1;
-      if (seenAmounts.has(amount)) continue;
-      seenAmounts.add(amount);
-      tiers.push({
+      const isSpritesheet = v.isSpritesheet === true || v.srcType === "spritesheet";
+      const frameWidth = typeof v.frames?.[0] === "number" && v.frames[0] > 0 ? v.frames[0] : void 0;
+      const frameHeight = typeof v.frames?.[1] === "number" && v.frames[1] > 0 ? v.frames[1] : void 0;
+      const frameCount = typeof v.frames?.[2] === "number" && v.frames[2] > 0 ? v.frames[2] : void 0;
+      const tier = {
+        ...typeof v.name === "string" && v.name.length > 0 ? { name: v.name } : {},
         minAmount: amount,
-        imageUrl: v.preview ?? v.src,
-        scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1
-      });
+        imageUrl: isSpritesheet ? v.src : v.preview ?? v.src,
+        scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1,
+        ...v.condition === "EXACT" || v.condition === "ATLEAST" ? { condition: v.condition } : {},
+        ...isSpritesheet && frameWidth && frameHeight && frameCount ? { useSpritesheet: true, frameWidth, frameHeight, frameCount } : {}
+      };
+      out[cat] = [...out[cat] ?? [], tier];
     }
+  }
+  for (const tiers of Object.values(out)) {
     tiers.sort((a, b) => a.minAmount - b.minAmount);
-    if (tiers.length > 0) out[cat] = tiers;
   }
   return out;
 }
@@ -6612,15 +6662,30 @@ function categoriesFromListeners(listeners) {
     redemptions: false,
     chat: false
   };
-  if (!listeners) return events;
+  if (!listeners) {
+    return events;
+  }
   const onListeners = Array.isArray(listeners) ? listeners : Object.entries(listeners).filter(([, on]) => on === true).map(([k]) => k);
   for (const l of onListeners) {
     const cat = LISTENER_TO_CATEGORY[l];
     if (cat) events[cat] = true;
   }
-  if (events.subs) events.resubs = true;
+  if (events.subs) {
+    events.resubs = true;
+    events.gifts = true;
+  }
   return events;
 }
+function chatEmotesEnabled(v) {
+  const candidates = {
+    chatEmotes: v.chatEmotes,
+    useChatEmotes: v.useChatEmotes,
+    showChatEmotes: v.showChatEmotes,
+    enableChatEmotes: v.enableChatEmotes
+  };
+  const enabled = Object.values(candidates).some((value) => value === true);
+  return enabled;
+}
 function mapHypeCup(widget, ctx) {
   const v = widget.variables ?? {};
   const widgetWidth = typeof v.width === "number" && v.width > 0 ? v.width : parsePx(widget.css?.width);
@@ -6631,6 +6696,7 @@ function mapHypeCup(widget, ctx) {
   const maxBodies = typeof v.recentEvents === "number" && v.recentEvents > 0 ? Math.min(300, Math.max(10, v.recentEvents)) : 80;
   const duration = typeof v.duration === "number" && v.duration > 0 ? Math.min(15, Math.max(1, v.duration)) : 3;
   const sprites = liftSESpritesIntoTiers(v.types);
+  const useChatEmotes = chatEmotesEnabled(v);
   return buildUnit(
     widget,
     "tipjar",
@@ -6655,11 +6721,14 @@ function mapHypeCup(widget, ctx) {
           maxBodies
         },
         tokens: {
-          defaultRadius: 16
+          // Imported SE hype cups visually match better at 26px than the older
+          // Lumia default, especially for the 125px tip spritesheets.
+          defaultRadius: 26
         },
         events: categoriesFromListeners(widget.listeners),
         chat: {
-          useViewerAvatars: true
+          useViewerAvatars: true,
+          useChatEmotes
         },
         display: {
           showWireframes: !!v.showWireframes,

package/dist/se-import.js

@@ -2181,7 +2181,8 @@ var TIPJAR_DEFAULT_CONTENT_FIELDS = {
     chat: false
   },
   chat: {
-    useViewerAvatars: true
+    useViewerAvatars: true,
+    useChatEmotes: false
   },
   display: {
     showEventMessages: false,
@@ -2425,7 +2426,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)) {
@@ -2437,6 +2438,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) {
@@ -2462,6 +2476,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);
@@ -2469,7 +2492,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";
@@ -3476,36 +3501,61 @@ function mapUnsupportedAsText(widget, ctx) {
 var SE_TYPE_TO_CATEGORY = {
   cheer: "bits",
   sub: "subs",
+  subscriber: "subs",
   follower: "follows",
   raid: "raids",
   tip: "tips"
 };
+function isUnsupportedSETipVariation(seKey, variation) {
+  return seKey === "tip" && variation.condition === "EXACT" && variation.amount === 4.2;
+}
+function isSubscriberGiftVariation(seKey, variation) {
+  if (seKey !== "sub" && seKey !== "subscriber") return false;
+  const condition = typeof variation.condition === "string" ? variation.condition.toUpperCase() : "";
+  const name = typeof variation.name === "string" ? variation.name.toLowerCase() : "";
+  return condition === "GIFT" || name.includes("gift");
+}
+function categoryForSEVariation(seKey, variation) {
+  if (isSubscriberGiftVariation(seKey, variation)) return "gifts";
+  return SE_TYPE_TO_CATEGORY[seKey];
+}
 function liftSESpritesIntoTiers(types) {
   const out = {};
-  if (!types) return out;
+  if (!types) {
+    return out;
+  }
   for (const [seKey, block] of Object.entries(types)) {
-    const cat = SE_TYPE_TO_CATEGORY[seKey];
-    if (!cat) continue;
+    if (!SE_TYPE_TO_CATEGORY[seKey]) {
+      continue;
+    }
+    if (seKey === "cheer") {
+      continue;
+    }
     const variations = block?.variations ?? [];
     const usable = variations.filter(
-      (v) => typeof (v?.preview ?? v?.src) === "string" && (v.preview ?? v.src ?? "").length > 0
+      (v) => !isUnsupportedSETipVariation(seKey, v) && typeof (v?.preview ?? v?.src) === "string" && (v.preview ?? v.src ?? "").length > 0
     );
-    const flagged = usable.filter((v) => v.default === true);
-    const picked = flagged.length > 0 ? flagged : usable;
-    const seenAmounts = /* @__PURE__ */ new Set();
-    const tiers = [];
-    for (const v of picked) {
+    for (const v of usable) {
+      const cat = categoryForSEVariation(seKey, v);
+      if (!cat) continue;
       const amount = typeof v.amount === "number" && v.amount > 0 ? v.amount : 1;
-      if (seenAmounts.has(amount)) continue;
-      seenAmounts.add(amount);
-      tiers.push({
+      const isSpritesheet = v.isSpritesheet === true || v.srcType === "spritesheet";
+      const frameWidth = typeof v.frames?.[0] === "number" && v.frames[0] > 0 ? v.frames[0] : void 0;
+      const frameHeight = typeof v.frames?.[1] === "number" && v.frames[1] > 0 ? v.frames[1] : void 0;
+      const frameCount = typeof v.frames?.[2] === "number" && v.frames[2] > 0 ? v.frames[2] : void 0;
+      const tier = {
+        ...typeof v.name === "string" && v.name.length > 0 ? { name: v.name } : {},
         minAmount: amount,
-        imageUrl: v.preview ?? v.src,
-        scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1
-      });
+        imageUrl: isSpritesheet ? v.src : v.preview ?? v.src,
+        scale: typeof v.cheerSize === "number" && v.cheerSize > 0 ? v.cheerSize : 1,
+        ...v.condition === "EXACT" || v.condition === "ATLEAST" ? { condition: v.condition } : {},
+        ...isSpritesheet && frameWidth && frameHeight && frameCount ? { useSpritesheet: true, frameWidth, frameHeight, frameCount } : {}
+      };
+      out[cat] = [...out[cat] ?? [], tier];
     }
+  }
+  for (const tiers of Object.values(out)) {
     tiers.sort((a, b) => a.minAmount - b.minAmount);
-    if (tiers.length > 0) out[cat] = tiers;
   }
   return out;
 }
@@ -3532,15 +3582,30 @@ function categoriesFromListeners(listeners) {
     redemptions: false,
     chat: false
   };
-  if (!listeners) return events;
+  if (!listeners) {
+    return events;
+  }
   const onListeners = Array.isArray(listeners) ? listeners : Object.entries(listeners).filter(([, on]) => on === true).map(([k]) => k);
   for (const l of onListeners) {
     const cat = LISTENER_TO_CATEGORY[l];
     if (cat) events[cat] = true;
   }
-  if (events.subs) events.resubs = true;
+  if (events.subs) {
+    events.resubs = true;
+    events.gifts = true;
+  }
   return events;
 }
+function chatEmotesEnabled(v) {
+  const candidates = {
+    chatEmotes: v.chatEmotes,
+    useChatEmotes: v.useChatEmotes,
+    showChatEmotes: v.showChatEmotes,
+    enableChatEmotes: v.enableChatEmotes
+  };
+  const enabled = Object.values(candidates).some((value) => value === true);
+  return enabled;
+}
 function mapHypeCup(widget, ctx) {
   const v = widget.variables ?? {};
   const widgetWidth = typeof v.width === "number" && v.width > 0 ? v.width : parsePx(widget.css?.width);
@@ -3551,6 +3616,7 @@ function mapHypeCup(widget, ctx) {
   const maxBodies = typeof v.recentEvents === "number" && v.recentEvents > 0 ? Math.min(300, Math.max(10, v.recentEvents)) : 80;
   const duration = typeof v.duration === "number" && v.duration > 0 ? Math.min(15, Math.max(1, v.duration)) : 3;
   const sprites = liftSESpritesIntoTiers(v.types);
+  const useChatEmotes = chatEmotesEnabled(v);
   return buildUnit(
     widget,
     "tipjar",
@@ -3575,11 +3641,14 @@ function mapHypeCup(widget, ctx) {
           maxBodies
         },
         tokens: {
-          defaultRadius: 16
+          // Imported SE hype cups visually match better at 26px than the older
+          // Lumia default, especially for the 125px tip spritesheets.
+          defaultRadius: 26
         },
         events: categoriesFromListeners(widget.listeners),
         chat: {
-          useViewerAvatars: true
+          useViewerAvatars: true,
+          useChatEmotes
         },
         display: {
           showWireframes: !!v.showWireframes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumiastream/ui",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "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.6",
+    "@lumiastream/lumia-translations": "1.16.6",
+    "@lumiastream/lumia-types": "3.6.8",
     "classnames": "^2.5.1",
     "globals": "^17.4.0",
     "nanoid": "^5.1.11",