@lumiastream/ui 0.2.8-alpha.25 → 0.2.8-alpha.27

package/dist/index.js

@@ -3226,9 +3226,17 @@ var YOUTUBE_CONTEXTS = {
   "subscriber-week": { amount: "youtube_week_member_count", count: "youtube_week_member_count" },
   "subscriber-month": { amount: "youtube_month_member_count", count: "youtube_month_member_count" }
 };
+var RECENT_TO_LATEST_LISTENER = {
+  "follower-recent": "follower-latest",
+  "subscriber-recent": "subscriber-latest",
+  "cheer-recent": "cheer-latest",
+  "tip-recent": "tip-latest",
+  "raid-recent": "raid-latest"
+};
 function listenerPlaceholderContext(listener, provider = "twitch") {
+  const resolved = RECENT_TO_LATEST_LISTENER[listener] ?? listener;
   const platformTable = provider === "kick" ? KICK_CONTEXTS : provider === "youtube" ? YOUTUBE_CONTEXTS : null;
-  return platformTable?.[listener] ?? TWITCH_CONTEXTS[listener] ?? {};
+  return platformTable?.[resolved] ?? TWITCH_CONTEXTS[resolved] ?? {};
 }
 var SE_WIDGET_TYPE_LABELS = {
   "subscriber-latest": "Latest subscriber",
@@ -3313,8 +3321,9 @@ var YOUTUBE_LISTENER_VARS = {
 };
 function listenerToLumiaVariable(listener, provider = "twitch") {
   if (typeof listener !== "string" || !listener) return "username";
-  if (provider === "kick" && KICK_LISTENER_VARS[listener]) return KICK_LISTENER_VARS[listener];
-  if (provider === "youtube" && YOUTUBE_LISTENER_VARS[listener]) return YOUTUBE_LISTENER_VARS[listener];
+  const resolvedListener = RECENT_TO_LATEST_LISTENER[listener] ?? listener;
+  if (provider === "kick" && KICK_LISTENER_VARS[resolvedListener]) return KICK_LISTENER_VARS[resolvedListener];
+  if (provider === "youtube" && YOUTUBE_LISTENER_VARS[resolvedListener]) return YOUTUBE_LISTENER_VARS[resolvedListener];
   const m = {
     // Latest events
     "follower-latest": "twitch_last_follower",
@@ -3371,7 +3380,7 @@ function listenerToLumiaVariable(listener, provider = "twitch") {
     "cheer-alltime-top-donation": "twitch_alltime_top_cheerer_amount",
     "cheer-alltime-top-donator": "twitch_alltime_top_cheerer"
   };
-  return m[listener] ?? listener.replace(/-/g, "_");
+  return m[resolvedListener] ?? resolvedListener.replace(/-/g, "_");
 }
 function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
   let widthIsAuto = false;
@@ -3502,6 +3511,25 @@ function seLayoutUsesPushText(seLayout) {
 
 // src/se-import/mappers/build.ts
 import { nanoid } from "nanoid";
+function mapSeTextCssToModuleCss(widget, defaults = {}) {
+  const seTextCss = widget.text?.css ?? {};
+  const asStr = (v, fallback) => typeof v === "string" && v.length > 0 ? v : fallback;
+  const asNumOrStr = (v, fallback) => {
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+    if (typeof v === "string" && v.length > 0) return v;
+    return fallback;
+  };
+  return {
+    lineHeight: asNumOrStr(seTextCss["line-height"], defaults.lineHeight ?? 1),
+    fontSize: asNumOrStr(seTextCss["font-size"], defaults.fontSize ?? 24),
+    textAlign: asStr(seTextCss["text-align"], defaults.textAlign ?? "center"),
+    fontFamily: asStr(seTextCss["font-family"], defaults.fontFamily ?? "Roboto"),
+    fontWeight: asStr(seTextCss["font-weight"], defaults.fontWeight ?? "bold"),
+    color: asStr(seTextCss.color, defaults.color ?? "#ffffff"),
+    textShadow: asStr(seTextCss["text-shadow"], defaults.textShadow ?? "rgb(0, 0, 0) 1px 1px 1px"),
+    background: defaults.background ?? "transparent"
+  };
+}
 function buildUnit(widget, lumiaType, moduleExtras, ctx) {
   const id = nanoid();
   const defaults = LUMIA_DEFAULT_SIZES[lumiaType] ?? { width: 400, height: 400 };
@@ -3998,7 +4026,6 @@ function mapGoal(widget, ctx) {
   const v = widget.variables ?? {};
   const listener = v.goalListener ?? (typeof widget.listener === "string" ? widget.listener : null);
   const charity = charityGoalVariables(widget.type);
-  const seTextCss = widget.text?.css ?? {};
   return buildUnit(widget, "goal", {
     content: {
       version: 1,
@@ -4041,23 +4068,16 @@ function mapGoal(widget, ctx) {
         simpleDesign: !!v.simpleDesign
       })
     },
-    css: {
-      // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
-      // used to be set here too, but the Goal renderer applies its own
-      // border + borderRadius via inline `style={…}` on the .goal-bar
-      // div (see Goal/index.tsx:123,127,155) sourced from
-      // `content.border` and `content.borderRadius`. Writing them to
-      // module.css just plopped useless transparent-0px rules on the
-      // outer .overlay-module wrapper.
-      lineHeight: seTextCss["line-height"] ?? 1,
-      fontSize: seTextCss["font-size"] ?? 30,
-      textAlign: seTextCss["text-align"] ?? "center",
-      fontFamily: seTextCss["font-family"] ?? "Roboto",
-      fontWeight: seTextCss["font-weight"] ?? "bold",
-      color: seTextCss.color ?? "#ffffff",
-      textShadow: seTextCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-      background: "transparent"
-    }
+    // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
+    // used to be set on `css` too, but the Goal renderer applies its
+    // own border + borderRadius via inline `style={…}` on the .goal-bar
+    // div (see Goal/index.tsx:123,127,155) sourced from
+    // `content.border` and `content.borderRadius`. Writing them to
+    // module.css just plopped useless transparent-0px rules on the
+    // outer .overlay-module wrapper. SE charity goals commonly use
+    // 24-30px Nunito/Roboto — fontSize default of 30 mirrors the
+    // previous hardcoded fallback.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30 })
   }, ctx);
 }
 
@@ -4331,6 +4351,9 @@ function mapEventList(widget, ctx) {
   const filters = computeListenerFilters(widget.listeners, widget.listener);
   const maxItems = v.visibleEvents ?? v.visibleItems ?? 5;
   return buildUnit(widget, "eventlist", {
+    // SE event-list widgets style per-event lines via widget.text.css; the
+    // Lumia eventlist reads font/size/color from module.css.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 18 }),
     content: {
       theme: v.theme ?? "simple",
       direction: v.direction ?? "top",
@@ -4542,16 +4565,11 @@ function mapCredits(widget, ctx) {
         amount: v.amount
       })
     },
-    css: {
-      fontSize: 30,
-      lineHeight: 1,
-      fontFamily: "Roboto",
-      fontWeight: "normal",
-      color: "#ffffff",
-      textShadow: "",
-      textAlign: "center",
-      background: "transparent"
-    }
+    // Credits renders scrolling section headers + per-event lines; the
+    // renderer reads font/size/weight/color from module.css. Pull from SE's
+    // text.css so an imported credits widget keeps the streamer's chosen
+    // font and weight — defaults match the prior hardcoded fallbacks.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30, fontWeight: "normal", textShadow: "" })
   }, ctx);
 }
 function inferSlideshowMediaType(mime, url) {
@@ -4678,21 +4696,10 @@ function mapTimer(widget, ctx) {
     if (v.seconds !== false) clockBits.push("{{seconds}}");
     if (clockBits.length) parts.push(clockBits.join(":"));
   }
-  const seTextCss = widget.text?.css ?? {};
-  const asStr = (v2, fallback) => typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const asNum = (v2, fallback) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const moduleCss = {
-    lineHeight: asNum(seTextCss["line-height"], 1),
-    fontSize: asNum(seTextCss["font-size"], 24),
-    textAlign: asStr(seTextCss["text-align"], "center"),
-    fontFamily: asStr(seTextCss["font-family"], "Roboto"),
-    fontWeight: asStr(seTextCss["font-weight"], "bold"),
-    color: asStr(seTextCss.color, "#ffffff"),
-    textShadow: asStr(seTextCss["text-shadow"], "rgb(0, 0, 0) 1px 1px 1px"),
-    background: "transparent"
-  };
   return buildUnit(widget, "timer", {
-    css: moduleCss,
+    // Carry the streamer's SE text styling (font/size/color/shadow) so an
+    // imported countdown doesn't render in Lumia's default Roboto/24px.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       version: 1,
       type: "countdown",
@@ -4780,14 +4787,10 @@ function mapMediaShare(widget, ctx) {
       // `durationSeconds + grace`).
       importMeta: buildImportMeta(widget, { timeLeft: v.timeLeft === true })
     },
-    css: {
-      fontFamily: "Roboto",
-      fontWeight: "bold",
-      color: "#ffffff",
-      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
-      background: "transparent",
-      fontSize: 18
-    }
+    // Lumia songrequest renders the queue list as styled text; pull SE's
+    // widget.text.css so font/size/color carry across (defaults match the
+    // previous hardcoded fallbacks for this widget specifically).
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 18 })
   }, ctx);
 }
 function mapKappagen(widget, ctx) {
@@ -4855,6 +4858,9 @@ function mapLeaderboardFromVariables(widget, currency, ctx) {
   const window = v.period === "weekly" ? "week" : v.period === "monthly" ? "month" : "alltime";
   const title = currency === "tips" ? "Top Tippers" : currency === "cheers" ? "Top Cheerers" : "Top Gifters";
   return buildUnit(widget, "loyaltyleaderboard", {
+    // Carry SE text styling so the leaderboard list keeps the streamer's
+    // chosen font / size / color.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 18 }),
     content: {
       source: "variables",
       currency,
@@ -4881,6 +4887,8 @@ function mapGiveaway(widget, ctx) {
   const primary = v.colors?.primary ?? "#393853";
   const accent = v.colors?.accent ?? "#FF4076";
   return buildUnit(widget, "raffle", {
+    // Raffle renders entrants/winner text via module.css.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       version: 1,
       type: "basic",
@@ -4965,6 +4973,9 @@ function isHypetrainCustomWidget(widget) {
 function mapHypetrain(widget, ctx) {
   const v = widget.variables ?? {};
   return buildUnit(widget, "hypetrain", {
+    // Hypetrain renders level / progress / contributor text — carry SE
+    // styling so an imported hype-train widget keeps its font + accent.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       // Twitch-native is the right default — SE hype-train widgets always
       // reflected the Twitch native train. Users can flip to 'synthetic'
@@ -5357,6 +5368,23 @@ var GOAL_TYPES = /* @__PURE__ */ new Set([
   "se-widget-merch-goal"
 ]);
 var EVENTLIST_TYPES = /* @__PURE__ */ new Set(["se-widget-event-list", "se-widget-follower-recent", "se-widget-subscriber-recent", "se-widget-cheer-recent", "se-widget-tip-recent"]);
+var SCROLLING_RECENT_TYPES = /* @__PURE__ */ new Set([
+  "se-widget-follower-recent",
+  "se-widget-subscriber-recent",
+  "se-widget-cheer-recent",
+  "se-widget-tip-recent"
+]);
+var RECENT_TO_LATEST_FALLBACK_VAR = {
+  "se-widget-follower-recent": "twitch_last_follower",
+  "se-widget-subscriber-recent": "twitch_last_subscriber",
+  "se-widget-cheer-recent": "twitch_last_bit",
+  "se-widget-tip-recent": "latest_donator"
+};
+function isScrollingRecentWidget(widget) {
+  if (!SCROLLING_RECENT_TYPES.has(widget.type)) return false;
+  const scrolling = widget.text?.scrolling;
+  return !!(scrolling && typeof scrolling === "object" && scrolling.enabled === true);
+}
 function dispatch(widget, ctx) {
   const t = widget.type;
   console.log("[SE-IMPORT] dispatch widget", {
@@ -5385,6 +5413,10 @@ function dispatch(widget, ctx) {
   if (t === "se-widget-donor-drive-alert") return { unit: mapSingleAlert(widget, "donordrive-donation", ctx), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-extralife-alert") return { unit: mapSingleAlert(widget, "extralife-donation", ctx), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-tiltify-alert") return { unit: mapSingleAlert(widget, "tiltify-campaignDonation", ctx), status: "direct", lumiaType: "alert" };
+  if (isScrollingRecentWidget(widget)) {
+    const fallbackVar = RECENT_TO_LATEST_FALLBACK_VAR[t] ?? "username";
+    return { unit: mapReadout(widget, fallbackVar, ctx), status: "direct", lumiaType: "text" };
+  }
   if (EVENTLIST_TYPES.has(t)) return { unit: mapEventList(widget, ctx), status: "direct", lumiaType: "eventlist" };
   if (t === "se-widget-top-tippers-list") return { unit: mapLeaderboardFromVariables(widget, "tips", ctx), status: "direct", lumiaType: "loyaltyleaderboard" };
   if (t === "se-widget-top-cheerers-list") return { unit: mapLeaderboardFromVariables(widget, "cheers", ctx), status: "direct", lumiaType: "loyaltyleaderboard" };

package/dist/se-import.js

@@ -111,9 +111,17 @@ var YOUTUBE_CONTEXTS = {
   "subscriber-week": { amount: "youtube_week_member_count", count: "youtube_week_member_count" },
   "subscriber-month": { amount: "youtube_month_member_count", count: "youtube_month_member_count" }
 };
+var RECENT_TO_LATEST_LISTENER = {
+  "follower-recent": "follower-latest",
+  "subscriber-recent": "subscriber-latest",
+  "cheer-recent": "cheer-latest",
+  "tip-recent": "tip-latest",
+  "raid-recent": "raid-latest"
+};
 function listenerPlaceholderContext(listener, provider = "twitch") {
+  const resolved = RECENT_TO_LATEST_LISTENER[listener] ?? listener;
   const platformTable = provider === "kick" ? KICK_CONTEXTS : provider === "youtube" ? YOUTUBE_CONTEXTS : null;
-  return platformTable?.[listener] ?? TWITCH_CONTEXTS[listener] ?? {};
+  return platformTable?.[resolved] ?? TWITCH_CONTEXTS[resolved] ?? {};
 }
 var SE_WIDGET_TYPE_LABELS = {
   "subscriber-latest": "Latest subscriber",
@@ -198,8 +206,9 @@ var YOUTUBE_LISTENER_VARS = {
 };
 function listenerToLumiaVariable(listener, provider = "twitch") {
   if (typeof listener !== "string" || !listener) return "username";
-  if (provider === "kick" && KICK_LISTENER_VARS[listener]) return KICK_LISTENER_VARS[listener];
-  if (provider === "youtube" && YOUTUBE_LISTENER_VARS[listener]) return YOUTUBE_LISTENER_VARS[listener];
+  const resolvedListener = RECENT_TO_LATEST_LISTENER[listener] ?? listener;
+  if (provider === "kick" && KICK_LISTENER_VARS[resolvedListener]) return KICK_LISTENER_VARS[resolvedListener];
+  if (provider === "youtube" && YOUTUBE_LISTENER_VARS[resolvedListener]) return YOUTUBE_LISTENER_VARS[resolvedListener];
   const m = {
     // Latest events
     "follower-latest": "twitch_last_follower",
@@ -256,7 +265,7 @@ function listenerToLumiaVariable(listener, provider = "twitch") {
     "cheer-alltime-top-donation": "twitch_alltime_top_cheerer_amount",
     "cheer-alltime-top-donator": "twitch_alltime_top_cheerer"
   };
-  return m[listener] ?? listener.replace(/-/g, "_");
+  return m[resolvedListener] ?? resolvedListener.replace(/-/g, "_");
 }
 function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
   let widthIsAuto = false;
@@ -387,6 +396,25 @@ function seLayoutUsesPushText(seLayout) {
 
 // src/se-import/mappers/build.ts
 import { nanoid } from "nanoid";
+function mapSeTextCssToModuleCss(widget, defaults = {}) {
+  const seTextCss = widget.text?.css ?? {};
+  const asStr = (v, fallback) => typeof v === "string" && v.length > 0 ? v : fallback;
+  const asNumOrStr = (v, fallback) => {
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+    if (typeof v === "string" && v.length > 0) return v;
+    return fallback;
+  };
+  return {
+    lineHeight: asNumOrStr(seTextCss["line-height"], defaults.lineHeight ?? 1),
+    fontSize: asNumOrStr(seTextCss["font-size"], defaults.fontSize ?? 24),
+    textAlign: asStr(seTextCss["text-align"], defaults.textAlign ?? "center"),
+    fontFamily: asStr(seTextCss["font-family"], defaults.fontFamily ?? "Roboto"),
+    fontWeight: asStr(seTextCss["font-weight"], defaults.fontWeight ?? "bold"),
+    color: asStr(seTextCss.color, defaults.color ?? "#ffffff"),
+    textShadow: asStr(seTextCss["text-shadow"], defaults.textShadow ?? "rgb(0, 0, 0) 1px 1px 1px"),
+    background: defaults.background ?? "transparent"
+  };
+}
 function buildUnit(widget, lumiaType, moduleExtras, ctx) {
   const id = nanoid();
   const defaults = LUMIA_DEFAULT_SIZES[lumiaType] ?? { width: 400, height: 400 };
@@ -883,7 +911,6 @@ function mapGoal(widget, ctx) {
   const v = widget.variables ?? {};
   const listener = v.goalListener ?? (typeof widget.listener === "string" ? widget.listener : null);
   const charity = charityGoalVariables(widget.type);
-  const seTextCss = widget.text?.css ?? {};
   return buildUnit(widget, "goal", {
     content: {
       version: 1,
@@ -926,23 +953,16 @@ function mapGoal(widget, ctx) {
         simpleDesign: !!v.simpleDesign
       })
     },
-    css: {
-      // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
-      // used to be set here too, but the Goal renderer applies its own
-      // border + borderRadius via inline `style={…}` on the .goal-bar
-      // div (see Goal/index.tsx:123,127,155) sourced from
-      // `content.border` and `content.borderRadius`. Writing them to
-      // module.css just plopped useless transparent-0px rules on the
-      // outer .overlay-module wrapper.
-      lineHeight: seTextCss["line-height"] ?? 1,
-      fontSize: seTextCss["font-size"] ?? 30,
-      textAlign: seTextCss["text-align"] ?? "center",
-      fontFamily: seTextCss["font-family"] ?? "Roboto",
-      fontWeight: seTextCss["font-weight"] ?? "bold",
-      color: seTextCss.color ?? "#ffffff",
-      textShadow: seTextCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-      background: "transparent"
-    }
+    // `borderRadius` / `borderStyle` / `borderWidth` / `borderColor`
+    // used to be set on `css` too, but the Goal renderer applies its
+    // own border + borderRadius via inline `style={…}` on the .goal-bar
+    // div (see Goal/index.tsx:123,127,155) sourced from
+    // `content.border` and `content.borderRadius`. Writing them to
+    // module.css just plopped useless transparent-0px rules on the
+    // outer .overlay-module wrapper. SE charity goals commonly use
+    // 24-30px Nunito/Roboto — fontSize default of 30 mirrors the
+    // previous hardcoded fallback.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30 })
   }, ctx);
 }
 
@@ -1216,6 +1236,9 @@ function mapEventList(widget, ctx) {
   const filters = computeListenerFilters(widget.listeners, widget.listener);
   const maxItems = v.visibleEvents ?? v.visibleItems ?? 5;
   return buildUnit(widget, "eventlist", {
+    // SE event-list widgets style per-event lines via widget.text.css; the
+    // Lumia eventlist reads font/size/color from module.css.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 18 }),
     content: {
       theme: v.theme ?? "simple",
       direction: v.direction ?? "top",
@@ -1427,16 +1450,11 @@ function mapCredits(widget, ctx) {
         amount: v.amount
       })
     },
-    css: {
-      fontSize: 30,
-      lineHeight: 1,
-      fontFamily: "Roboto",
-      fontWeight: "normal",
-      color: "#ffffff",
-      textShadow: "",
-      textAlign: "center",
-      background: "transparent"
-    }
+    // Credits renders scrolling section headers + per-event lines; the
+    // renderer reads font/size/weight/color from module.css. Pull from SE's
+    // text.css so an imported credits widget keeps the streamer's chosen
+    // font and weight — defaults match the prior hardcoded fallbacks.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 30, fontWeight: "normal", textShadow: "" })
   }, ctx);
 }
 function inferSlideshowMediaType(mime, url) {
@@ -1563,21 +1581,10 @@ function mapTimer(widget, ctx) {
     if (v.seconds !== false) clockBits.push("{{seconds}}");
     if (clockBits.length) parts.push(clockBits.join(":"));
   }
-  const seTextCss = widget.text?.css ?? {};
-  const asStr = (v2, fallback) => typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const asNum = (v2, fallback) => typeof v2 === "number" && Number.isFinite(v2) ? v2 : typeof v2 === "string" && v2.length > 0 ? v2 : fallback;
-  const moduleCss = {
-    lineHeight: asNum(seTextCss["line-height"], 1),
-    fontSize: asNum(seTextCss["font-size"], 24),
-    textAlign: asStr(seTextCss["text-align"], "center"),
-    fontFamily: asStr(seTextCss["font-family"], "Roboto"),
-    fontWeight: asStr(seTextCss["font-weight"], "bold"),
-    color: asStr(seTextCss.color, "#ffffff"),
-    textShadow: asStr(seTextCss["text-shadow"], "rgb(0, 0, 0) 1px 1px 1px"),
-    background: "transparent"
-  };
   return buildUnit(widget, "timer", {
-    css: moduleCss,
+    // Carry the streamer's SE text styling (font/size/color/shadow) so an
+    // imported countdown doesn't render in Lumia's default Roboto/24px.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       version: 1,
       type: "countdown",
@@ -1665,14 +1672,10 @@ function mapMediaShare(widget, ctx) {
       // `durationSeconds + grace`).
       importMeta: buildImportMeta(widget, { timeLeft: v.timeLeft === true })
     },
-    css: {
-      fontFamily: "Roboto",
-      fontWeight: "bold",
-      color: "#ffffff",
-      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
-      background: "transparent",
-      fontSize: 18
-    }
+    // Lumia songrequest renders the queue list as styled text; pull SE's
+    // widget.text.css so font/size/color carry across (defaults match the
+    // previous hardcoded fallbacks for this widget specifically).
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 18 })
   }, ctx);
 }
 function mapKappagen(widget, ctx) {
@@ -1740,6 +1743,9 @@ function mapLeaderboardFromVariables(widget, currency, ctx) {
   const window = v.period === "weekly" ? "week" : v.period === "monthly" ? "month" : "alltime";
   const title = currency === "tips" ? "Top Tippers" : currency === "cheers" ? "Top Cheerers" : "Top Gifters";
   return buildUnit(widget, "loyaltyleaderboard", {
+    // Carry SE text styling so the leaderboard list keeps the streamer's
+    // chosen font / size / color.
+    css: mapSeTextCssToModuleCss(widget, { fontSize: 18 }),
     content: {
       source: "variables",
       currency,
@@ -1766,6 +1772,8 @@ function mapGiveaway(widget, ctx) {
   const primary = v.colors?.primary ?? "#393853";
   const accent = v.colors?.accent ?? "#FF4076";
   return buildUnit(widget, "raffle", {
+    // Raffle renders entrants/winner text via module.css.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       version: 1,
       type: "basic",
@@ -1850,6 +1858,9 @@ function isHypetrainCustomWidget(widget) {
 function mapHypetrain(widget, ctx) {
   const v = widget.variables ?? {};
   return buildUnit(widget, "hypetrain", {
+    // Hypetrain renders level / progress / contributor text — carry SE
+    // styling so an imported hype-train widget keeps its font + accent.
+    css: mapSeTextCssToModuleCss(widget),
     content: {
       // Twitch-native is the right default — SE hype-train widgets always
       // reflected the Twitch native train. Users can flip to 'synthetic'
@@ -2242,6 +2253,23 @@ var GOAL_TYPES = /* @__PURE__ */ new Set([
   "se-widget-merch-goal"
 ]);
 var EVENTLIST_TYPES = /* @__PURE__ */ new Set(["se-widget-event-list", "se-widget-follower-recent", "se-widget-subscriber-recent", "se-widget-cheer-recent", "se-widget-tip-recent"]);
+var SCROLLING_RECENT_TYPES = /* @__PURE__ */ new Set([
+  "se-widget-follower-recent",
+  "se-widget-subscriber-recent",
+  "se-widget-cheer-recent",
+  "se-widget-tip-recent"
+]);
+var RECENT_TO_LATEST_FALLBACK_VAR = {
+  "se-widget-follower-recent": "twitch_last_follower",
+  "se-widget-subscriber-recent": "twitch_last_subscriber",
+  "se-widget-cheer-recent": "twitch_last_bit",
+  "se-widget-tip-recent": "latest_donator"
+};
+function isScrollingRecentWidget(widget) {
+  if (!SCROLLING_RECENT_TYPES.has(widget.type)) return false;
+  const scrolling = widget.text?.scrolling;
+  return !!(scrolling && typeof scrolling === "object" && scrolling.enabled === true);
+}
 function dispatch(widget, ctx) {
   const t = widget.type;
   console.log("[SE-IMPORT] dispatch widget", {
@@ -2270,6 +2298,10 @@ function dispatch(widget, ctx) {
   if (t === "se-widget-donor-drive-alert") return { unit: mapSingleAlert(widget, "donordrive-donation", ctx), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-extralife-alert") return { unit: mapSingleAlert(widget, "extralife-donation", ctx), status: "direct", lumiaType: "alert" };
   if (t === "se-widget-tiltify-alert") return { unit: mapSingleAlert(widget, "tiltify-campaignDonation", ctx), status: "direct", lumiaType: "alert" };
+  if (isScrollingRecentWidget(widget)) {
+    const fallbackVar = RECENT_TO_LATEST_FALLBACK_VAR[t] ?? "username";
+    return { unit: mapReadout(widget, fallbackVar, ctx), status: "direct", lumiaType: "text" };
+  }
   if (EVENTLIST_TYPES.has(t)) return { unit: mapEventList(widget, ctx), status: "direct", lumiaType: "eventlist" };
   if (t === "se-widget-top-tippers-list") return { unit: mapLeaderboardFromVariables(widget, "tips", ctx), status: "direct", lumiaType: "loyaltyleaderboard" };
   if (t === "se-widget-top-cheerers-list") return { unit: mapLeaderboardFromVariables(widget, "cheers", ctx), status: "direct", lumiaType: "loyaltyleaderboard" };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.2.8-alpha.25",
+	"version": "0.2.8-alpha.27",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",