@lumiastream/ui 0.4.0 → 0.4.2

package/dist/index.js

@@ -3878,7 +3878,11 @@ var LUMIA_DEFAULT_SIZES = {
   // card + 5-item queue list needs a bit more vertical room, so we add ~80px
   // for the queue list. Users can hide the queue list and shrink back to
   // just the card if they want SE's exact footprint.
-  songrequest: { width: 480, height: 380 }
+  songrequest: { width: 480, height: 380 },
+  // Train: slim horizontal bar. SE train widgets vary in size but Lumia's
+  // layout is always a single-line ticker, so we fix the import footprint.
+  // (mapTrain also forces dimensions directly so this is a backstop only.)
+  train: { width: 540, height: 60 }
 };
 function translateVariationCondition(seType, seCondition, requirement, seEventType) {
   if (seType === "gift") return { conditionType: "IS_GIFT", condition: 1 };
@@ -4609,6 +4613,8 @@ function mapGoal(widget, ctx) {
       goalAnimationLoop: true,
       unfilledColor: v.backgroundColor ?? "#400022",
       filledColor: v.fillColor ?? "#ff0055",
+      condensed: !!v.dense,
+      showPercentComplete: !!v.percent,
       alignItemsToEdges: false,
       border: "solid 1px transparent",
       borderRadius: "40px",
@@ -4744,10 +4750,7 @@ function mapCustom(widget, ctx) {
 }
 
 // src/se-import/mappers/misc.ts
-import {
-  LumiaEventListTypes,
-  LumiaMapAlertTypeToEventListType
-} from "@lumiastream/lumia-types";
+import { LumiaEventListTypes, LumiaMapAlertTypeToEventListType } from "@lumiastream/lumia-types";
 
 // src/se-import/mappers/module-defaults.ts
 var CHATBOX_DEFAULT_CONTENT_FIELDS = {
@@ -4808,13 +4811,24 @@ var CHATBOX_DEFAULT_MODULE = {
 function mapChatboxTheme(seTheme) {
   const t = (seTheme ?? "").toString().toLowerCase();
   if (!t || t === "default") return "simple";
-  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly"))
-    return "bubbly";
+  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly")) return "bubbly";
   if (t.includes("glass") || t.includes("transparent")) return "glass";
   if (t.includes("boxy") || t.includes("checker")) return "boxy";
   if (t.includes("basic")) return "basic";
   return "simple";
 }
+function defaultChatboxBackgroundForSeTheme(seTheme) {
+  const t = (seTheme ?? "").toString().toLowerCase();
+  if (!t || t === "default") return "transparent";
+  if (t === "custom") return "transparent";
+  if (t.includes("glass") || t.includes("transparent") || t.includes("flipin") || t.includes("bubble") || t.includes("bubbly"))
+    return "transparent";
+  if (t.includes("white") || t.includes("light") || t.includes("clean") && !t.includes("dark"))
+    return "transparent";
+  if (t.includes("dark") || t.includes("boxy") || t.includes("checker") || t.includes("black"))
+    return "#1e1e1e";
+  return "#1e1e1e";
+}
 var KAPPAGEN_EVENT_CATEGORIES = {
   tip: [LumiaEventListTypes.DONATION],
   cheer: [
@@ -4830,9 +4844,7 @@ var KAPPAGEN_EVENT_CATEGORIES = {
   subscriber: [LumiaEventListTypes.SUBSCRIBERS],
   purchase: [LumiaEventListTypes.PURCHASES]
 };
-var alertKeysByEventListType = Object.entries(
-  LumiaMapAlertTypeToEventListType
-).reduce(
+var alertKeysByEventListType = Object.entries(LumiaMapAlertTypeToEventListType).reduce(
   (acc, [alertKey, eventListType]) => {
     acc[eventListType] = acc[eventListType] ?? [];
     acc[eventListType].push(alertKey);
@@ -4877,21 +4889,15 @@ function mapChatbox(widget, ctx) {
   const messagePadding = paddingShorthand(messageCss);
   const DEFAULT_CHATBOX_FONT_SIZE = 14;
   const moduleCss = {};
-  if (textCss["font-family"] != null)
-    moduleCss.fontFamily = textCss["font-family"];
+  if (textCss["font-family"] != null) moduleCss.fontFamily = textCss["font-family"];
   moduleCss.fontSize = textCss["font-size"] != null ? textCss["font-size"] : DEFAULT_CHATBOX_FONT_SIZE;
   if (textCss["color"] != null) moduleCss.color = textCss["color"];
-  if (textCss["font-weight"] != null)
-    moduleCss.fontWeight = textCss["font-weight"];
-  if (textCss["text-shadow"] != null)
-    moduleCss.textShadow = textCss["text-shadow"];
-  if (textCss["text-align"] != null)
-    moduleCss.textAlign = textCss["text-align"];
-  if (textCss["line-height"] != null)
-    moduleCss.lineHeight = textCss["line-height"];
+  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
+  if (textCss["text-shadow"] != null) moduleCss.textShadow = textCss["text-shadow"];
+  if (textCss["text-align"] != null) moduleCss.textAlign = textCss["text-align"];
+  if (textCss["line-height"] != null) moduleCss.lineHeight = textCss["line-height"];
   if (messagePadding) moduleCss.padding = messagePadding;
-  const DEFAULT_CHATBOX_BG = "#1e1e1e";
-  const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : DEFAULT_CHATBOX_BG;
+  const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : defaultChatboxBackgroundForSeTheme(v.theme);
   moduleCss.background = messageBackground;
   const messageFontFamily = typeof messageCss["font-family"] === "string" && messageCss["font-family"].length > 0 ? messageCss["font-family"] : void 0;
   const highlightBackground = v.highlight && typeof v.highlight === "object" && typeof v.highlight["background"] === "string" ? v.highlight["background"] : void 0;
@@ -5001,9 +5007,7 @@ var SE_LISTENER_TO_LUMIA_CATEGORY = {
 function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
   const enabled = [];
   if (seListeners && typeof seListeners === "object" && !Array.isArray(seListeners)) {
-    for (const [k, v] of Object.entries(
-      seListeners
-    )) {
+    for (const [k, v] of Object.entries(seListeners)) {
       if (v) enabled.push(k);
     }
   } else if (Array.isArray(seListeners)) {
@@ -5021,6 +5025,7 @@ function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
   if (allowedCategories.size === 0) return [];
   const allowedAlerts = [];
   Object.keys(LumiaMapAlertTypeToEventListType).forEach((alertKey) => {
+    if (alertKey.includes("session")) return;
     const mappedCategory = LumiaMapAlertTypeToEventListType[alertKey];
     if (mappedCategory && allowedCategories.has(mappedCategory)) {
       allowedAlerts.push(alertKey);
@@ -5038,10 +5043,7 @@ function seTemplateToMarqueeTemplate(seTemplate) {
 }
 function mapEventList(widget, ctx) {
   const v = widget.variables ?? {};
-  const allowedEvents = computeAllowedEventsFromSEListeners(
-    widget.listeners,
-    widget.listener
-  );
+  const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
   const maxItems = v.visibleEvents ?? v.visibleItems ?? 5;
   const seText = widget.text;
   const scrolling = seText?.scrolling;
@@ -5328,10 +5330,7 @@ function mapSlideshow(widget, ctx) {
     const url = typeof raw === "string" ? raw : raw.url ?? raw.src ?? "";
     if (!url) return null;
     return {
-      type: inferSlideshowMediaType(
-        typeof raw === "object" ? raw?.type : void 0,
-        url
-      ),
+      type: inferSlideshowMediaType(typeof raw === "object" ? raw?.type : void 0, url),
       src: url,
       name: nameFromUrl(url)
     };
@@ -5376,6 +5375,46 @@ function mapSlideshow(widget, ctx) {
     ctx
   );
 }
+function mapTrain(widget, ctx) {
+  const v = widget.variables ?? {};
+  const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
+  const TRAIN_WIDTH = 540;
+  const TRAIN_HEIGHT = v.vertical === true ? 200 : 60;
+  const widgetWithSize = {
+    ...widget,
+    css: { ...widget.css, width: TRAIN_WIDTH, height: TRAIN_HEIGHT }
+  };
+  return buildUnit(
+    widgetWithSize,
+    "train",
+    {
+      css: mapSeTextCssToModuleCss(widget, {
+        fontSize: 24,
+        fontFamily: "Nunito",
+        fontWeight: "bold",
+        color: "#ffffff",
+        textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+        textAlign: "left",
+        lineHeight: 1.3,
+        background: "transparent"
+      }),
+      content: {
+        version: 1,
+        // SE stores train duration in minutes; Lumia stores it in seconds.
+        duration: typeof v.duration === "number" && v.duration > 0 ? v.duration * 60 : 300,
+        autoHide: false,
+        showCount: v.showCount !== false,
+        showTime: v.showTime !== false,
+        showLatest: v.show_latest !== false,
+        showIcons: v.icons !== false,
+        vertical: v.vertical === true,
+        ...allowedEvents !== void 0 ? { allowedEvents } : { allowedEvents: [] }
+      }
+    },
+    ctx,
+    { width: 540, height: 60 }
+  );
+}
 function mapTimer(widget, ctx) {
   const v = widget.variables ?? {};
   const textValue = typeof widget.text?.value === "string" ? widget.text.value : void 0;
@@ -5402,9 +5441,7 @@ function mapTimer(widget, ctx) {
       resolved = true;
     }
   }
-  if (!resolved && [v.days, v.hours, v.minutes, v.seconds].some(
-    (part) => typeof part === "number"
-  )) {
+  if (!resolved && [v.days, v.hours, v.minutes, v.seconds].some((part) => typeof part === "number")) {
     days = typeof v.days === "number" ? v.days : 0;
     hours = typeof v.hours === "number" ? v.hours : 0;
     minutes = typeof v.minutes === "number" ? v.minutes : 0;
@@ -5512,8 +5549,7 @@ function mapNowPlaying(widget, ctx) {
   };
   if (typeof seTextCss["text-transform"] === "string")
     importedCss.textTransform = seTextCss["text-transform"];
-  if (typeof seTextCss["font-style"] === "string")
-    importedCss.fontStyle = seTextCss["font-style"];
+  if (typeof seTextCss["font-style"] === "string") importedCss.fontStyle = seTextCss["font-style"];
   if (typeof seTextCss["text-decoration"] === "string")
     importedCss.textDecoration = seTextCss["text-decoration"];
   if (typeof seTextCss["letter-spacing"] === "string" || typeof seTextCss["letter-spacing"] === "number") {
@@ -5738,10 +5774,11 @@ function mapViewerProfilesLeaderboard(widget, currency, ctx) {
       // chosen font / size / color.
       css: mapSeTextCssToModuleCss(widget, { fontSize: 18 }),
       content: {
+        theme: "list",
         sortBy: TOP_LIST_SORT_BY[currency],
         count,
         title: TOP_LIST_TITLE[currency],
-        showTitle: true,
+        showTitle: false,
         showAvatar: true,
         showPlatform: true,
         // Hide noisy columns that aren't relevant for a single-metric
@@ -6542,6 +6579,12 @@ function dispatch(widget, ctx) {
       status: "direct",
       lumiaType: "image"
     };
+  if (t === "se-widget-train")
+    return {
+      unit: mapTrain(widget, ctx),
+      status: "direct",
+      lumiaType: "train"
+    };
   return {
     unit: mapUnsupportedAsText(widget, ctx),
     status: "placeholder",
@@ -9577,7 +9620,6 @@ var REVIEW_REASONS = {
   // `tipjar` module (see dispatcher.ts) and lands with `partial` status, so it
   // never reaches the placeholder-reason fallback. If a future feature flag
   // disables tipjar auto-import, add an entry to FLAG_OFF_REASONS instead.
-  "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.",
@@ -9608,9 +9650,7 @@ function extractSEOverlayId(input) {
 }
 function extractSEPreviewParts(input) {
   const trimmed = input.trim();
-  const m = trimmed.match(
-    /streamelements\.com\/overlay\/([0-9a-f]{24})(?:\/([A-Za-z0-9_-]+))?/i
-  );
+  const m = trimmed.match(/streamelements\.com\/overlay\/([0-9a-f]{24})(?:\/([A-Za-z0-9_-]+))?/i);
   if (!m) return null;
   const overlayId = m[1];
   const second = m[2];
@@ -9645,9 +9685,7 @@ async function fetchSEBootstrap({
   }
   const json = await res.json();
   if (!isSEBootstrap(json)) {
-    throw new Error(
-      "Server returned a response that does not look like an SE bootstrap payload."
-    );
+    throw new Error("Server returned a response that does not look like an SE bootstrap payload.");
   }
   return json;
 }
@@ -9690,11 +9728,7 @@ function importSEBootstrap(bootstrap) {
     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 bounds = seCssToBounds(w.css, { width: 200, height: 200 }, importCanvas);
     const layer = {
       id: lumiaGroupId,
       type: "group",
@@ -9827,9 +9861,7 @@ function applyReviewAction(result, moduleId, action, payload) {
   if (action === "skip") {
     delete modules[moduleId];
     const nextLayers = layers.filter((l) => l.id !== moduleId);
-    const reviewItems2 = result.reviewItems.filter(
-      (r) => r.moduleId !== moduleId
-    );
+    const reviewItems2 = result.reviewItems.filter((r) => r.moduleId !== moduleId);
     return {
       ...result,
       overlay: {
@@ -9878,9 +9910,7 @@ function applyReviewAction(result, moduleId, action, payload) {
       modules[extra.module.id] = extra.module;
     }
     modules[moduleId] = newModule;
-    const reviewItems2 = result.reviewItems.filter(
-      (r) => r.moduleId !== moduleId
-    );
+    const reviewItems2 = result.reviewItems.filter((r) => r.moduleId !== moduleId);
     return {
       ...result,
       overlay: {

package/dist/se-import.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentType, ReactNode } from 'react';
 
-type ModuleType = 'alert' | 'emotebox' | 'emotealert' | 'text' | 'image' | 'audio' | 'video' | 'camera' | 'slideshow' | 'shape' | 'svg' | 'colorbox' | 'goal' | 'timer' | 'gradientlight' | 'browsersource' | 'chatbox' | 'credits' | 'eventlist' | 'eventrotate' | 'hfx' | 'hfxalert' | 'clip' | 'youtube' | 'spinwheel' | 'raffle' | 'viewerqueue' | 'loyaltyleaderboard' | 'viewerprofiles' | 'achievements' | 'poll' | 'tournaments' | 'spotify' | 'nowplaying' | 'youtubemusic' | 'brbscreen' | 'vlc' | 'tts' | 'livecaption' | 'custom' | 'tipjar' | 'hypetrain' | 'streamboss' | 'songrequest' | 'group';
+type ModuleType = 'alert' | 'emotebox' | 'emotealert' | 'text' | 'image' | 'audio' | 'video' | 'camera' | 'slideshow' | 'shape' | 'svg' | 'colorbox' | 'goal' | 'timer' | 'gradientlight' | 'browsersource' | 'chatbox' | 'credits' | 'eventlist' | 'eventrotate' | 'hfx' | 'hfxalert' | 'clip' | 'youtube' | 'spinwheel' | 'raffle' | 'viewerqueue' | 'loyaltyleaderboard' | 'viewerprofiles' | 'achievements' | 'poll' | 'tournaments' | 'spotify' | 'nowplaying' | 'youtubemusic' | 'brbscreen' | 'vlc' | 'tts' | 'livecaption' | 'custom' | 'tipjar' | 'hypetrain' | 'streamboss' | 'songrequest' | 'train' | 'group';
 type OverlayLayerType = 'layer' | 'group';
 type OverlayLayerBounds = {
     height: number;

package/dist/se-import.js

@@ -744,7 +744,11 @@ var LUMIA_DEFAULT_SIZES = {
   // card + 5-item queue list needs a bit more vertical room, so we add ~80px
   // for the queue list. Users can hide the queue list and shrink back to
   // just the card if they want SE's exact footprint.
-  songrequest: { width: 480, height: 380 }
+  songrequest: { width: 480, height: 380 },
+  // Train: slim horizontal bar. SE train widgets vary in size but Lumia's
+  // layout is always a single-line ticker, so we fix the import footprint.
+  // (mapTrain also forces dimensions directly so this is a backstop only.)
+  train: { width: 540, height: 60 }
 };
 function translateVariationCondition(seType, seCondition, requirement, seEventType) {
   if (seType === "gift") return { conditionType: "IS_GIFT", condition: 1 };
@@ -1475,6 +1479,8 @@ function mapGoal(widget, ctx) {
       goalAnimationLoop: true,
       unfilledColor: v.backgroundColor ?? "#400022",
       filledColor: v.fillColor ?? "#ff0055",
+      condensed: !!v.dense,
+      showPercentComplete: !!v.percent,
       alignItemsToEdges: false,
       border: "solid 1px transparent",
       borderRadius: "40px",
@@ -1610,10 +1616,7 @@ function mapCustom(widget, ctx) {
 }
 
 // src/se-import/mappers/misc.ts
-import {
-  LumiaEventListTypes,
-  LumiaMapAlertTypeToEventListType
-} from "@lumiastream/lumia-types";
+import { LumiaEventListTypes, LumiaMapAlertTypeToEventListType } from "@lumiastream/lumia-types";
 
 // src/se-import/mappers/module-defaults.ts
 var CHATBOX_DEFAULT_CONTENT_FIELDS = {
@@ -1674,13 +1677,24 @@ var CHATBOX_DEFAULT_MODULE = {
 function mapChatboxTheme(seTheme) {
   const t = (seTheme ?? "").toString().toLowerCase();
   if (!t || t === "default") return "simple";
-  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly"))
-    return "bubbly";
+  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly")) return "bubbly";
   if (t.includes("glass") || t.includes("transparent")) return "glass";
   if (t.includes("boxy") || t.includes("checker")) return "boxy";
   if (t.includes("basic")) return "basic";
   return "simple";
 }
+function defaultChatboxBackgroundForSeTheme(seTheme) {
+  const t = (seTheme ?? "").toString().toLowerCase();
+  if (!t || t === "default") return "transparent";
+  if (t === "custom") return "transparent";
+  if (t.includes("glass") || t.includes("transparent") || t.includes("flipin") || t.includes("bubble") || t.includes("bubbly"))
+    return "transparent";
+  if (t.includes("white") || t.includes("light") || t.includes("clean") && !t.includes("dark"))
+    return "transparent";
+  if (t.includes("dark") || t.includes("boxy") || t.includes("checker") || t.includes("black"))
+    return "#1e1e1e";
+  return "#1e1e1e";
+}
 var KAPPAGEN_EVENT_CATEGORIES = {
   tip: [LumiaEventListTypes.DONATION],
   cheer: [
@@ -1696,9 +1710,7 @@ var KAPPAGEN_EVENT_CATEGORIES = {
   subscriber: [LumiaEventListTypes.SUBSCRIBERS],
   purchase: [LumiaEventListTypes.PURCHASES]
 };
-var alertKeysByEventListType = Object.entries(
-  LumiaMapAlertTypeToEventListType
-).reduce(
+var alertKeysByEventListType = Object.entries(LumiaMapAlertTypeToEventListType).reduce(
   (acc, [alertKey, eventListType]) => {
     acc[eventListType] = acc[eventListType] ?? [];
     acc[eventListType].push(alertKey);
@@ -1743,21 +1755,15 @@ function mapChatbox(widget, ctx) {
   const messagePadding = paddingShorthand(messageCss);
   const DEFAULT_CHATBOX_FONT_SIZE = 14;
   const moduleCss = {};
-  if (textCss["font-family"] != null)
-    moduleCss.fontFamily = textCss["font-family"];
+  if (textCss["font-family"] != null) moduleCss.fontFamily = textCss["font-family"];
   moduleCss.fontSize = textCss["font-size"] != null ? textCss["font-size"] : DEFAULT_CHATBOX_FONT_SIZE;
   if (textCss["color"] != null) moduleCss.color = textCss["color"];
-  if (textCss["font-weight"] != null)
-    moduleCss.fontWeight = textCss["font-weight"];
-  if (textCss["text-shadow"] != null)
-    moduleCss.textShadow = textCss["text-shadow"];
-  if (textCss["text-align"] != null)
-    moduleCss.textAlign = textCss["text-align"];
-  if (textCss["line-height"] != null)
-    moduleCss.lineHeight = textCss["line-height"];
+  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
+  if (textCss["text-shadow"] != null) moduleCss.textShadow = textCss["text-shadow"];
+  if (textCss["text-align"] != null) moduleCss.textAlign = textCss["text-align"];
+  if (textCss["line-height"] != null) moduleCss.lineHeight = textCss["line-height"];
   if (messagePadding) moduleCss.padding = messagePadding;
-  const DEFAULT_CHATBOX_BG = "#1e1e1e";
-  const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : DEFAULT_CHATBOX_BG;
+  const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : defaultChatboxBackgroundForSeTheme(v.theme);
   moduleCss.background = messageBackground;
   const messageFontFamily = typeof messageCss["font-family"] === "string" && messageCss["font-family"].length > 0 ? messageCss["font-family"] : void 0;
   const highlightBackground = v.highlight && typeof v.highlight === "object" && typeof v.highlight["background"] === "string" ? v.highlight["background"] : void 0;
@@ -1867,9 +1873,7 @@ var SE_LISTENER_TO_LUMIA_CATEGORY = {
 function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
   const enabled = [];
   if (seListeners && typeof seListeners === "object" && !Array.isArray(seListeners)) {
-    for (const [k, v] of Object.entries(
-      seListeners
-    )) {
+    for (const [k, v] of Object.entries(seListeners)) {
       if (v) enabled.push(k);
     }
   } else if (Array.isArray(seListeners)) {
@@ -1887,6 +1891,7 @@ function computeAllowedEventsFromSEListeners(seListeners, explicitListener) {
   if (allowedCategories.size === 0) return [];
   const allowedAlerts = [];
   Object.keys(LumiaMapAlertTypeToEventListType).forEach((alertKey) => {
+    if (alertKey.includes("session")) return;
     const mappedCategory = LumiaMapAlertTypeToEventListType[alertKey];
     if (mappedCategory && allowedCategories.has(mappedCategory)) {
       allowedAlerts.push(alertKey);
@@ -1904,10 +1909,7 @@ function seTemplateToMarqueeTemplate(seTemplate) {
 }
 function mapEventList(widget, ctx) {
   const v = widget.variables ?? {};
-  const allowedEvents = computeAllowedEventsFromSEListeners(
-    widget.listeners,
-    widget.listener
-  );
+  const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
   const maxItems = v.visibleEvents ?? v.visibleItems ?? 5;
   const seText = widget.text;
   const scrolling = seText?.scrolling;
@@ -2194,10 +2196,7 @@ function mapSlideshow(widget, ctx) {
     const url = typeof raw === "string" ? raw : raw.url ?? raw.src ?? "";
     if (!url) return null;
     return {
-      type: inferSlideshowMediaType(
-        typeof raw === "object" ? raw?.type : void 0,
-        url
-      ),
+      type: inferSlideshowMediaType(typeof raw === "object" ? raw?.type : void 0, url),
       src: url,
       name: nameFromUrl(url)
     };
@@ -2242,6 +2241,46 @@ function mapSlideshow(widget, ctx) {
     ctx
   );
 }
+function mapTrain(widget, ctx) {
+  const v = widget.variables ?? {};
+  const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
+  const TRAIN_WIDTH = 540;
+  const TRAIN_HEIGHT = v.vertical === true ? 200 : 60;
+  const widgetWithSize = {
+    ...widget,
+    css: { ...widget.css, width: TRAIN_WIDTH, height: TRAIN_HEIGHT }
+  };
+  return buildUnit(
+    widgetWithSize,
+    "train",
+    {
+      css: mapSeTextCssToModuleCss(widget, {
+        fontSize: 24,
+        fontFamily: "Nunito",
+        fontWeight: "bold",
+        color: "#ffffff",
+        textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+        textAlign: "left",
+        lineHeight: 1.3,
+        background: "transparent"
+      }),
+      content: {
+        version: 1,
+        // SE stores train duration in minutes; Lumia stores it in seconds.
+        duration: typeof v.duration === "number" && v.duration > 0 ? v.duration * 60 : 300,
+        autoHide: false,
+        showCount: v.showCount !== false,
+        showTime: v.showTime !== false,
+        showLatest: v.show_latest !== false,
+        showIcons: v.icons !== false,
+        vertical: v.vertical === true,
+        ...allowedEvents !== void 0 ? { allowedEvents } : { allowedEvents: [] }
+      }
+    },
+    ctx,
+    { width: 540, height: 60 }
+  );
+}
 function mapTimer(widget, ctx) {
   const v = widget.variables ?? {};
   const textValue = typeof widget.text?.value === "string" ? widget.text.value : void 0;
@@ -2268,9 +2307,7 @@ function mapTimer(widget, ctx) {
       resolved = true;
     }
   }
-  if (!resolved && [v.days, v.hours, v.minutes, v.seconds].some(
-    (part) => typeof part === "number"
-  )) {
+  if (!resolved && [v.days, v.hours, v.minutes, v.seconds].some((part) => typeof part === "number")) {
     days = typeof v.days === "number" ? v.days : 0;
     hours = typeof v.hours === "number" ? v.hours : 0;
     minutes = typeof v.minutes === "number" ? v.minutes : 0;
@@ -2378,8 +2415,7 @@ function mapNowPlaying(widget, ctx) {
   };
   if (typeof seTextCss["text-transform"] === "string")
     importedCss.textTransform = seTextCss["text-transform"];
-  if (typeof seTextCss["font-style"] === "string")
-    importedCss.fontStyle = seTextCss["font-style"];
+  if (typeof seTextCss["font-style"] === "string") importedCss.fontStyle = seTextCss["font-style"];
   if (typeof seTextCss["text-decoration"] === "string")
     importedCss.textDecoration = seTextCss["text-decoration"];
   if (typeof seTextCss["letter-spacing"] === "string" || typeof seTextCss["letter-spacing"] === "number") {
@@ -2604,10 +2640,11 @@ function mapViewerProfilesLeaderboard(widget, currency, ctx) {
       // chosen font / size / color.
       css: mapSeTextCssToModuleCss(widget, { fontSize: 18 }),
       content: {
+        theme: "list",
         sortBy: TOP_LIST_SORT_BY[currency],
         count,
         title: TOP_LIST_TITLE[currency],
-        showTitle: true,
+        showTitle: false,
         showAvatar: true,
         showPlatform: true,
         // Hide noisy columns that aren't relevant for a single-metric
@@ -3408,6 +3445,12 @@ function dispatch(widget, ctx) {
       status: "direct",
       lumiaType: "image"
     };
+  if (t === "se-widget-train")
+    return {
+      unit: mapTrain(widget, ctx),
+      status: "direct",
+      lumiaType: "train"
+    };
   return {
     unit: mapUnsupportedAsText(widget, ctx),
     status: "placeholder",
@@ -8447,7 +8490,6 @@ var REVIEW_REASONS = {
   // `tipjar` module (see dispatcher.ts) and lands with `partial` status, so it
   // never reaches the placeholder-reason fallback. If a future feature flag
   // disables tipjar auto-import, add an entry to FLAG_OFF_REASONS instead.
-  "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.",
@@ -8478,9 +8520,7 @@ function extractSEOverlayId(input) {
 }
 function extractSEPreviewParts(input) {
   const trimmed = input.trim();
-  const m = trimmed.match(
-    /streamelements\.com\/overlay\/([0-9a-f]{24})(?:\/([A-Za-z0-9_-]+))?/i
-  );
+  const m = trimmed.match(/streamelements\.com\/overlay\/([0-9a-f]{24})(?:\/([A-Za-z0-9_-]+))?/i);
   if (!m) return null;
   const overlayId = m[1];
   const second = m[2];
@@ -8515,9 +8555,7 @@ async function fetchSEBootstrap({
   }
   const json = await res.json();
   if (!isSEBootstrap(json)) {
-    throw new Error(
-      "Server returned a response that does not look like an SE bootstrap payload."
-    );
+    throw new Error("Server returned a response that does not look like an SE bootstrap payload.");
   }
   return json;
 }
@@ -8560,11 +8598,7 @@ function importSEBootstrap(bootstrap) {
     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 bounds = seCssToBounds(w.css, { width: 200, height: 200 }, importCanvas);
     const layer = {
       id: lumiaGroupId,
       type: "group",
@@ -8697,9 +8731,7 @@ function applyReviewAction(result, moduleId, action, payload) {
   if (action === "skip") {
     delete modules[moduleId];
     const nextLayers = layers.filter((l) => l.id !== moduleId);
-    const reviewItems2 = result.reviewItems.filter(
-      (r) => r.moduleId !== moduleId
-    );
+    const reviewItems2 = result.reviewItems.filter((r) => r.moduleId !== moduleId);
     return {
       ...result,
       overlay: {
@@ -8748,9 +8780,7 @@ function applyReviewAction(result, moduleId, action, payload) {
       modules[extra.module.id] = extra.module;
     }
     modules[moduleId] = newModule;
-    const reviewItems2 = result.reviewItems.filter(
-      (r) => r.moduleId !== moduleId
-    );
+    const reviewItems2 = result.reviewItems.filter((r) => r.moduleId !== moduleId);
     return {
       ...result,
       overlay: {

package/package.json

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