@lumiastream/ui 0.5.0 → 0.5.3

package/dist/index.js

@@ -3154,7 +3154,40 @@ var SE_TO_LUMIA_PLACEHOLDER = {
   // tied to an alert payload), so we route it at the *global* template
   // variable `{{streamer}}` populated by VariablesManager.refreshStreamerVariable
   // (Twitch → Kick → YouTube → Facebook → TikTok fallback chain).
-  streamer: "streamer"
+  streamer: "streamer",
+  // Sub / resub months — SL and SE both expose `{months}` inside sub-event
+  // variation templates ("{name} just resubbed for {months} months!"). Lumia
+  // surfaces this on the subscriber alert payload as `subMonths` (see
+  // lumia-types/src/variables.types.ts). Mapping is global because `{months}`
+  // only ever appears in subscriber-context templates in the wild — neither
+  // SE nor SL emit it for follower / cheer / tip alerts.
+  months: "subMonths",
+  // Merch / loyalty redemption product name — SL emits `{product}` in
+  // merch_message_template and loyalty_store_redemption_message_template,
+  // SE emits it the same way. Lumia's shopOrder alert exposes the first
+  // item's name as `firstItem.name`; alias to `item` (which already maps
+  // there) so both tokens resolve identically.
+  product: "firstItem.name",
+  // Treatstream title — SL `treat_message_template`
+  // ("{name} bought you a {title} treat"). Lumia's treat alert exposes the
+  // gift name as `treat` (see treatstream entry in variables.types.ts).
+  title: "treat",
+  // SL custom-HTML alias for the chat message — `{userMessage}` and
+  // `{message}` mean the same thing. Both should resolve to Lumia's
+  // `{{message}}`.
+  userMessage: "message",
+  // Prime-gaming gift tier — SL `prime_sub_gift_message_template`
+  // ("{name} gifted {giftType} Ultra subscription to {streamer}"). The gift
+  // type carries the subscription tier ("1000" / "2000" / "3000" / "prime")
+  // which Lumia exposes as `tier` on every sub-related alert payload.
+  giftType: "tier",
+  // TikTok-style jewel gift quantity — SL `jewel_gift_message_template`
+  // ("{name} gifted {giftName} x{jewelsAmount} jewels!"). Lumia's tiktok-gift
+  // alert exposes the quantity as `amount`. `{giftName}` (the gift's display
+  // name) doesn't have a 1:1 Lumia variable — TikTok's gift catalog isn't
+  // directly imported — so we leave it unmapped and the streamer can adjust
+  // the template in the Lumia editor.
+  jewelsAmount: "amount"
 };
 var TWITCH_CONTEXTS = {
   "follower-latest": {
@@ -6886,9 +6919,9 @@ async function fetchWithProxyFallback(url, options = {}) {
 }
 
 // src/se-import/assets.ts
-var IMPORTABLE_CDN_REGEX = /https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\/[^\s"'\\)]+/g;
+var IMPORTABLE_CDN_REGEX = /https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|streamlabs\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\/[^\s"'\\)]+/g;
 var CSS_URL_REGEX = /url\(\s*['"]?([^'")]+)['"]?\s*\)/g;
-var IMPORTABLE_CDN_HOST_REGEX = /^https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\//;
+var IMPORTABLE_CDN_HOST_REGEX = /^https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|streamlabs\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\//;
 function isImportableAssetUrl(url) {
   return IMPORTABLE_CDN_HOST_REGEX.test(url);
 }
@@ -7631,7 +7664,7 @@ function absolutizeSLUrl(raw) {
   if (typeof raw !== "string" || raw.length === 0) return "";
   if (raw.startsWith("http://") || raw.startsWith("https://")) return raw;
   if (raw.startsWith("//")) return `https:${raw}`;
-  if (raw.startsWith("/")) return `https://cdn.streamlabs.com${raw}`;
+  if (raw.startsWith("/")) return `https://streamlabs.com${raw}`;
   return raw;
 }
 function buildBaseAlertEvent(settings, prefix, defaultMessage) {
@@ -7642,13 +7675,7 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
   const fontWeight = getField(settings, prefix, "font_weight") ?? 600;
   const fontColor = getField(settings, prefix, "font_color") ?? "#FFFFFF";
   const highlightColor = getField(settings, prefix, "font_color2") ?? "#32C3A6";
-  const messageFontSize = pxToNumber(
-    getField(settings, prefix, "message_font_size"),
-    20
-  );
-  const messageFontFamily = getField(settings, prefix, "message_font") ?? fontFamily;
-  const messageFontWeight = getField(settings, prefix, "message_font_weight") ?? 400;
-  const messageFontColor = getField(settings, prefix, "message_font_color") ?? "#FFFFFF";
+  const secondaryMessage = readSecondaryMessageConfig(settings, prefix, fontFamily);
   const imageHref = absolutizeSLUrl(getField(settings, prefix, "image_href"));
   const soundHref = absolutizeSLUrl(getField(settings, prefix, "sound_href"));
   const soundVolume = getField(settings, prefix, "sound_volume") ?? 50;
@@ -7667,7 +7694,7 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
       accentColor: null,
       highlightColor,
       firstMessageTemplate: translateSeText(messageTemplate),
-      secondMessageTemplate: "",
+      secondMessageTemplate: secondaryMessage?.template ?? "",
       thirdMessageTemplate: "",
       showAvatar: false,
       showAmount: true,
@@ -7690,12 +7717,10 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
         textShadow: "rgba(0, 0, 0, 0.8) 1px 1px 1px",
         textAlign: "center"
       },
-      messageCss: {
-        fontFamily: messageFontFamily,
-        fontSize: messageFontSize,
-        color: messageFontColor,
-        fontWeight: messageFontWeight
-      },
+      // `messageCss` only matters when secondMessageTemplate is set;
+      // leave it empty when SL didn't ship a secondary-message block
+      // so Lumia's renderer falls back to its own default styling.
+      messageCss: secondaryMessage?.css ?? {},
       content: { value: translateSeText(messageTemplate) }
     },
     media: {
@@ -7738,6 +7763,36 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
     variations: []
   };
 }
+var SECONDARY_MESSAGE_PREFIX_OVERRIDE = {
+  sub: "resub"
+};
+function readSecondaryMessageConfig(settings, prefix, primaryFontFamily) {
+  const secondaryPrefix = SECONDARY_MESSAGE_PREFIX_OVERRIDE[prefix] ?? prefix;
+  const showKey = `show_${secondaryPrefix}_message`;
+  const enabled = settings[showKey];
+  if (enabled !== true) return null;
+  const fontFamily = getField(settings, secondaryPrefix, "message_font") ?? primaryFontFamily;
+  const fontSize = pxToNumber(
+    getField(settings, secondaryPrefix, "message_font_size"),
+    20
+  );
+  const fontWeight = getField(settings, secondaryPrefix, "message_font_weight") ?? 400;
+  const fontColor = getField(settings, secondaryPrefix, "message_font_color") ?? "#FFFFFF";
+  return {
+    // `{message}` is the SE/SL chat-message token (mapped to Lumia's
+    // `{{message}}` in translate.ts). It resolves at render time from
+    // the alert payload's `message` field — populated for every event
+    // where SL ships a secondary-message line (donations, resubs,
+    // cheers, charity, merch, etc.).
+    template: translateSeText("{message}"),
+    css: {
+      fontFamily,
+      fontSize,
+      color: fontColor,
+      fontWeight
+    }
+  };
+}
 function clampVolume(slVolume) {
   if (typeof slVolume !== "number" || !Number.isFinite(slVolume)) return 0.5;
   return Math.max(0, Math.min(1, slVolume / 100));

package/dist/se-import.js

@@ -20,7 +20,40 @@ var SE_TO_LUMIA_PLACEHOLDER = {
   // tied to an alert payload), so we route it at the *global* template
   // variable `{{streamer}}` populated by VariablesManager.refreshStreamerVariable
   // (Twitch → Kick → YouTube → Facebook → TikTok fallback chain).
-  streamer: "streamer"
+  streamer: "streamer",
+  // Sub / resub months — SL and SE both expose `{months}` inside sub-event
+  // variation templates ("{name} just resubbed for {months} months!"). Lumia
+  // surfaces this on the subscriber alert payload as `subMonths` (see
+  // lumia-types/src/variables.types.ts). Mapping is global because `{months}`
+  // only ever appears in subscriber-context templates in the wild — neither
+  // SE nor SL emit it for follower / cheer / tip alerts.
+  months: "subMonths",
+  // Merch / loyalty redemption product name — SL emits `{product}` in
+  // merch_message_template and loyalty_store_redemption_message_template,
+  // SE emits it the same way. Lumia's shopOrder alert exposes the first
+  // item's name as `firstItem.name`; alias to `item` (which already maps
+  // there) so both tokens resolve identically.
+  product: "firstItem.name",
+  // Treatstream title — SL `treat_message_template`
+  // ("{name} bought you a {title} treat"). Lumia's treat alert exposes the
+  // gift name as `treat` (see treatstream entry in variables.types.ts).
+  title: "treat",
+  // SL custom-HTML alias for the chat message — `{userMessage}` and
+  // `{message}` mean the same thing. Both should resolve to Lumia's
+  // `{{message}}`.
+  userMessage: "message",
+  // Prime-gaming gift tier — SL `prime_sub_gift_message_template`
+  // ("{name} gifted {giftType} Ultra subscription to {streamer}"). The gift
+  // type carries the subscription tier ("1000" / "2000" / "3000" / "prime")
+  // which Lumia exposes as `tier` on every sub-related alert payload.
+  giftType: "tier",
+  // TikTok-style jewel gift quantity — SL `jewel_gift_message_template`
+  // ("{name} gifted {giftName} x{jewelsAmount} jewels!"). Lumia's tiktok-gift
+  // alert exposes the quantity as `amount`. `{giftName}` (the gift's display
+  // name) doesn't have a 1:1 Lumia variable — TikTok's gift catalog isn't
+  // directly imported — so we leave it unmapped and the streamer can adjust
+  // the template in the Lumia editor.
+  jewelsAmount: "amount"
 };
 var TWITCH_CONTEXTS = {
   "follower-latest": {
@@ -3752,9 +3785,9 @@ async function fetchWithProxyFallback(url, options = {}) {
 }
 
 // src/se-import/assets.ts
-var IMPORTABLE_CDN_REGEX = /https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\/[^\s"'\\)]+/g;
+var IMPORTABLE_CDN_REGEX = /https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|streamlabs\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\/[^\s"'\\)]+/g;
 var CSS_URL_REGEX = /url\(\s*['"]?([^'")]+)['"]?\s*\)/g;
-var IMPORTABLE_CDN_HOST_REGEX = /^https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\//;
+var IMPORTABLE_CDN_HOST_REGEX = /^https?:\/\/(?:(?:cdn|static)\.streamelements\.com|streamelements-cdn\.com|streamlabs\.com|cdn\.streamlabs\.com|(?:cdn|uploads)\.twitchalerts\.com)\//;
 function isImportableAssetUrl(url) {
   return IMPORTABLE_CDN_HOST_REGEX.test(url);
 }
@@ -6479,7 +6512,7 @@ function absolutizeSLUrl(raw) {
   if (typeof raw !== "string" || raw.length === 0) return "";
   if (raw.startsWith("http://") || raw.startsWith("https://")) return raw;
   if (raw.startsWith("//")) return `https:${raw}`;
-  if (raw.startsWith("/")) return `https://cdn.streamlabs.com${raw}`;
+  if (raw.startsWith("/")) return `https://streamlabs.com${raw}`;
   return raw;
 }
 function buildBaseAlertEvent(settings, prefix, defaultMessage) {
@@ -6490,13 +6523,7 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
   const fontWeight = getField(settings, prefix, "font_weight") ?? 600;
   const fontColor = getField(settings, prefix, "font_color") ?? "#FFFFFF";
   const highlightColor = getField(settings, prefix, "font_color2") ?? "#32C3A6";
-  const messageFontSize = pxToNumber(
-    getField(settings, prefix, "message_font_size"),
-    20
-  );
-  const messageFontFamily = getField(settings, prefix, "message_font") ?? fontFamily;
-  const messageFontWeight = getField(settings, prefix, "message_font_weight") ?? 400;
-  const messageFontColor = getField(settings, prefix, "message_font_color") ?? "#FFFFFF";
+  const secondaryMessage = readSecondaryMessageConfig(settings, prefix, fontFamily);
   const imageHref = absolutizeSLUrl(getField(settings, prefix, "image_href"));
   const soundHref = absolutizeSLUrl(getField(settings, prefix, "sound_href"));
   const soundVolume = getField(settings, prefix, "sound_volume") ?? 50;
@@ -6515,7 +6542,7 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
       accentColor: null,
       highlightColor,
       firstMessageTemplate: translateSeText(messageTemplate),
-      secondMessageTemplate: "",
+      secondMessageTemplate: secondaryMessage?.template ?? "",
       thirdMessageTemplate: "",
       showAvatar: false,
       showAmount: true,
@@ -6538,12 +6565,10 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
         textShadow: "rgba(0, 0, 0, 0.8) 1px 1px 1px",
         textAlign: "center"
       },
-      messageCss: {
-        fontFamily: messageFontFamily,
-        fontSize: messageFontSize,
-        color: messageFontColor,
-        fontWeight: messageFontWeight
-      },
+      // `messageCss` only matters when secondMessageTemplate is set;
+      // leave it empty when SL didn't ship a secondary-message block
+      // so Lumia's renderer falls back to its own default styling.
+      messageCss: secondaryMessage?.css ?? {},
       content: { value: translateSeText(messageTemplate) }
     },
     media: {
@@ -6586,6 +6611,36 @@ function buildBaseAlertEvent(settings, prefix, defaultMessage) {
     variations: []
   };
 }
+var SECONDARY_MESSAGE_PREFIX_OVERRIDE = {
+  sub: "resub"
+};
+function readSecondaryMessageConfig(settings, prefix, primaryFontFamily) {
+  const secondaryPrefix = SECONDARY_MESSAGE_PREFIX_OVERRIDE[prefix] ?? prefix;
+  const showKey = `show_${secondaryPrefix}_message`;
+  const enabled = settings[showKey];
+  if (enabled !== true) return null;
+  const fontFamily = getField(settings, secondaryPrefix, "message_font") ?? primaryFontFamily;
+  const fontSize = pxToNumber(
+    getField(settings, secondaryPrefix, "message_font_size"),
+    20
+  );
+  const fontWeight = getField(settings, secondaryPrefix, "message_font_weight") ?? 400;
+  const fontColor = getField(settings, secondaryPrefix, "message_font_color") ?? "#FFFFFF";
+  return {
+    // `{message}` is the SE/SL chat-message token (mapped to Lumia's
+    // `{{message}}` in translate.ts). It resolves at render time from
+    // the alert payload's `message` field — populated for every event
+    // where SL ships a secondary-message line (donations, resubs,
+    // cheers, charity, merch, etc.).
+    template: translateSeText("{message}"),
+    css: {
+      fontFamily,
+      fontSize,
+      color: fontColor,
+      fontWeight
+    }
+  };
+}
 function clampVolume(slVolume) {
   if (typeof slVolume !== "number" || !Number.isFinite(slVolume)) return 0.5;
   return Math.max(0, Math.min(1, slVolume / 100));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumiastream/ui",
-  "version": "0.5.0",
+  "version": "0.5.3",
   "author": "Lumia Stream",
   "license": "ISC",
   "description": "Lumia UI Kit",