@lumiastream/ui 0.2.8-alpha.12 → 0.2.8-alpha.13

package/dist/index.js

@@ -3341,11 +3341,11 @@ var LUMIA_DEFAULT_SIZES = {
   audio: { width: 200, height: 200 },
   slideshow: { width: 400, height: 220 },
   alert: { width: 700, height: 600 },
-  // 80 was too short for the SE-style slim goal layout (label + bar + "Ends
-  // in" sublabel needs ~125 px of vertical space). Bumped so editor-canvas
-  // rendering (which doesn't honor autoHeight) doesn't clip the sublabel
-  // after import.
-  goal: { width: 740, height: 130 },
+  // Sized for the SE-style slim layout — title (~24px line) + tight gap +
+  // 1.7em bar + optional "Ends in" sublabel collapses to ~70-85 px. 90 gives
+  // a small safety margin for larger fonts without leaving dead space in the
+  // editor canvas (which doesn't honor the layer's `autoHeight: true`).
+  goal: { width: 740, height: 90 },
   timer: { width: 740, height: 80 },
   chatbox: { width: 375, height: 470 },
   eventlist: { width: 375, height: 470 },
@@ -3382,10 +3382,20 @@ function translateVariationCondition(seType, seCondition, requirement) {
   return { conditionType: "RANDOM", condition: 100 };
 }
 var LUMIA_LAYOUTS = /* @__PURE__ */ new Set(["column", "row", "onlyImage", "onlyText", "imageOver", "textOver"]);
+var SE_LAYOUT_ALIASES = {
+  behind: "textOver"
+};
 function translateLayout(seLayout) {
-  if (seLayout && LUMIA_LAYOUTS.has(seLayout)) return seLayout;
+  if (!seLayout) return "column";
+  const alias = SE_LAYOUT_ALIASES[seLayout];
+  if (alias) return alias;
+  if (LUMIA_LAYOUTS.has(seLayout)) return seLayout;
   return "column";
 }
+function seLayoutUsesPushText(seLayout) {
+  if (!seLayout) return true;
+  return seLayout !== "behind";
+}
 
 // src/se-import/mappers/build.ts
 import { nanoid } from "nanoid";
@@ -3596,7 +3606,7 @@ function buildAlertEvent(seEvent, seEventType) {
   const importedTextShadow = css["text-shadow"] ?? "rgba(0, 0, 0, 0.8) 1px 1px 1px";
   const textShadow = shadowEnabled ? importedTextShadow : "none";
   const marginTopRaw = Number(css["margin-top"]);
-  const pushTextUp = Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
+  const pushTextUp = seLayoutUsesPushText(seEvent.layout) && Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
   const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType, seEvent)).filter((v) => v != null);
   const defaultDuration = (seEventType && SE_DEFAULT_DURATION_BY_EVENT[seEventType]) ?? 8;
   return {
@@ -3726,25 +3736,52 @@ function deepMergeSeSettings(parent, variation) {
   }
   return out;
 }
+function pickBaseAlertFields(event) {
+  const { on: _on, variations: _variations, matchEmptyCondition: _mec, ...base } = event;
+  return base;
+}
 function mapAlertBox(widget, opts = {}) {
   const v = widget.variables ?? {};
   const events = {};
   const eventKeys = opts.onlyEvents ?? ["follower", "subscriber", "tip", "cheer", "raid", "merch", "purchase", "charityCampaignDonation"];
+  let firstEvent = null;
   for (const seKey of eventKeys) {
     const ev = v[seKey];
     if (!ev || typeof ev !== "object") continue;
     const lumiaAlert = SE_EVENT_TO_LUMIA_ALERT[seKey];
     if (!lumiaAlert) continue;
-    events[lumiaAlert] = buildAlertEvent(ev, seKey);
+    const built = buildAlertEvent(ev, seKey);
+    events[lumiaAlert] = built;
+    if (firstEvent == null) firstEvent = built;
   }
-  return buildUnit(widget, "alert", { alert: { events } });
+  const baseAlert = firstEvent ? pickBaseAlertFields(firstEvent) : {};
+  return buildUnit(widget, "alert", { alert: { ...baseAlert, events } });
 }
 function mapSingleAlert(widget, lumiaAlertKey) {
   const v = widget.variables ?? {};
+  const topText = widget.text;
+  const merged = { ...v };
+  if (topText) {
+    const inner = v.text ?? {};
+    const innerCss = inner.css ?? {};
+    const topCss = topText.css ?? {};
+    merged.text = {
+      ...inner,
+      message: inner.message ?? topText.value ?? "",
+      enableShadow: inner.enableShadow ?? topText.enableShadow,
+      // Top-level SE CSS is the source of truth for Extra Life / DonorDrive
+      // (which omit `variables.text` entirely). For Tiltify both are populated
+      // with the same values; letting the nested `variables.text.css` win
+      // preserves any per-event overrides the streamer might have set.
+      css: { ...topCss, ...innerCss }
+    };
+  }
+  const built = buildAlertEvent(merged);
   const events = {
-    [lumiaAlertKey]: buildAlertEvent(v)
+    [lumiaAlertKey]: built
   };
-  return buildUnit(widget, "alert", { alert: { events } });
+  const baseAlert = pickBaseAlertFields(built);
+  return buildUnit(widget, "alert", { alert: { ...baseAlert, events } });
 }
 
 // src/se-import/mappers/goal.ts
@@ -3760,9 +3797,17 @@ function currentForListener(listener) {
   if (listener.startsWith("merch-")) return "{{fourthwall_total_order_count}}";
   return "0";
 }
+function charityGoalVariables(widgetType) {
+  if (widgetType === "se-widget-tiltify-goal") return { current: "{{tiltify_total_raised=0}}", targetGoal: "{{tiltify_goal_amount=100}}" };
+  if (widgetType === "se-widget-extralife-goal") return { current: "{{extralife_total_raised=0}}", targetGoal: "{{extralife_goal_amount=100}}" };
+  if (widgetType === "se-widget-donor-drive-goal") return { current: "{{donordrive_total_raised=0}}", targetGoal: "{{donordrive_goal_amount=100}}" };
+  return null;
+}
 function mapGoal(widget) {
   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,
@@ -3774,11 +3819,13 @@ function mapGoal(widget) {
       label: translateSeText(v.title ?? "Goal"),
       subLabel: "",
       // The Goal module renders this template literal with {{current}} + {{goal}} substituted.
-      display: "{{current}} / {{goal}}",
+      // Charity goals track donation amounts — prefix `$` so the rendered bar reads
+      // "$0 / $100" the way SE's charity goals do, instead of bare integers.
+      display: charity ? "${{current}} / ${{goal}}" : "{{current}} / {{goal}}",
       // `current` is a template variable reference (resolved at render time from session variables).
       // `targetGoal` is the numeric ceiling. Both required by Goal/index.tsx:28-29.
-      current: currentForListener(listener),
-      targetGoal: String(v.goalAmount ?? 100),
+      current: charity ? charity.current : currentForListener(listener),
+      targetGoal: charity ? charity.targetGoal : String(v.goalAmount ?? 100),
       image: "",
       audio: { decrement: "", increment: "", goal: "", goalFailed: "", volume: 1 },
       // `null` (rather than `''`) is the cleaner contract — Goal/index.tsx:11's
@@ -3805,13 +3852,13 @@ function mapGoal(widget) {
       // `content.border` and `content.borderRadius`. Writing them to
       // module.css just plopped useless transparent-0px rules on the
       // outer .overlay-module wrapper.
-      lineHeight: 1,
-      fontSize: 30,
-      textAlign: "center",
-      fontFamily: "Roboto",
-      fontWeight: "bold",
-      color: "#ffffff",
-      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+      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"
     }
   });
@@ -4070,33 +4117,143 @@ function mapEventList(widget) {
     }
   });
 }
-var CREDITS_DEFAULT_EVENTS_TO_SHOW = {
+var SE_CREDITS_EVENTS_TO_SHOW = {
   mods: false,
   subscribers: true,
   gifts: true,
-  donations: true,
-  purchases: true,
-  bits: true,
-  kicks: true,
-  raids: true,
-  hosts: true,
-  superstickers: true,
-  superchats: true,
-  redemptions: true,
-  stars: true,
-  fans: true,
+  donations: false,
+  purchases: false,
+  bits: false,
+  kicks: false,
+  raids: false,
+  hosts: false,
+  superstickers: false,
+  superchats: false,
+  redemptions: false,
+  stars: false,
+  fans: false,
   shares: false,
-  spells: true,
+  spells: false,
   likes: false,
-  followers: true,
+  followers: false,
   others: false,
-  topGifts: true,
-  topBits: true,
-  topKicks: true,
-  topDonations: true,
-  topSuperstickers: true,
-  topSuperchats: true,
-  topRedemptions: true
+  topGifts: false,
+  topBits: false,
+  topKicks: false,
+  topDonations: false,
+  topSuperstickers: false,
+  topSuperchats: false,
+  topRedemptions: false
+};
+var CREDITS_DEFAULT_SECTION_ORDER = [
+  "topGifts",
+  "topBits",
+  "topKicks",
+  "topDonations",
+  "topSuperstickers",
+  "topSuperchats",
+  "topRedemptions",
+  "subscribers",
+  "gifts",
+  "followers",
+  "donations",
+  "bits",
+  "kicks",
+  "raids",
+  "hosts",
+  "superstickers",
+  "superchats",
+  "redemptions",
+  "others"
+];
+var CREDITS_DEFAULT_TOP_LIMITS = {
+  topGifts: 5,
+  topBits: 5,
+  topKicks: 5,
+  topDonations: 5,
+  topSuperstickers: 5,
+  topSuperchats: 5,
+  topRedemptions: 5
+};
+var CREDITS_DEFAULT_EVENT_NAMES = {
+  mods: "Mods (Total {{amount}})",
+  topGifts: "Top Gifters",
+  topBits: "Top Cheerers",
+  topKicks: "Top Kicks",
+  topDonations: "Top Donators",
+  topSuperstickers: "Top Super Stickers",
+  topSuperchats: "Top Super Chatters",
+  topRedemptions: "Top Redeemers",
+  subscribers: "Subscribers (Total {{amount}})",
+  gifts: "Gifts (Total {{amount}})",
+  donations: "Donations (Total {{amount}})",
+  purchases: "Purchases (Total {{amount}})",
+  bits: "Cheers (Total {{amount}})",
+  kicks: "Kicks (Total {{amount}})",
+  superstickers: "Super Stickers (Total {{amount}})",
+  superchats: "Super Chatters (Total {{amount}})",
+  redemptions: "Redemptions (Total {{amount}})",
+  stars: "Stars (Total {{amount}})",
+  fans: "Fans (Total {{amount}})",
+  shares: "Shares (Total {{amount}})",
+  raids: "Raids (Total {{amount}})",
+  hosts: "Hosts (Total {{amount}})",
+  spells: "Spells (Total {{amount}})",
+  retweets: "Retweets (Total {{amount}})",
+  likes: "Likes (Total {{amount}})",
+  followers: "Followers (Total {{amount}})",
+  others: "Other (Total {{amount}})"
+};
+var CREDITS_DEFAULT_PREFIXES = {
+  mods: "x",
+  subscribers: "x",
+  gifts: "x",
+  donations: "x",
+  purchases: "x",
+  bits: "x",
+  kicks: "x",
+  superstickers: "x",
+  superchats: "x",
+  redemptions: "x",
+  stars: "x",
+  fans: "x",
+  shares: "x",
+  raids: "x",
+  hosts: "x",
+  spells: "x",
+  retweets: "x",
+  likes: "x",
+  followers: "",
+  others: ""
+};
+var CREDITS_DEFAULT_TEMPLATES = {
+  mods: "{{username}}",
+  subscribers: "{{username}} x{{amount}}",
+  gifts: "{{username}} x{{amount}}",
+  donations: "{{username}} x{{amount}}",
+  purchases: "{{username}} x{{amount}}",
+  bits: "{{username}} x{{amount}}",
+  kicks: "{{username}} x{{amount}}",
+  raids: "{{username}} x{{amount}}",
+  hosts: "{{username}} x{{amount}}",
+  superstickers: "{{username}} x{{amount}}",
+  superchats: "{{username}} x{{amount}}",
+  redemptions: "{{username}} x{{amount}}",
+  stars: "{{username}} x{{amount}}",
+  fans: "{{username}} x{{amount}}",
+  shares: "{{username}}",
+  spells: "{{username}} x{{amount}}",
+  retweets: "{{username}}",
+  likes: "{{username}}",
+  followers: "{{username}}",
+  others: "{{username}} x{{amount}}",
+  topGifts: "{{username}} x{{amount}}",
+  topBits: "{{username}} x{{amount}}",
+  topKicks: "{{username}} x{{amount}}",
+  topDonations: "{{username}} x{{amount}}",
+  topSuperstickers: "{{username}} x{{amount}}",
+  topSuperchats: "{{username}} x{{amount}}",
+  topRedemptions: "{{username}} x{{amount}}"
 };
 function mapCredits(widget) {
   const v = widget.variables ?? {};
@@ -4104,20 +4261,53 @@ function mapCredits(widget) {
   const reverseFlow = v.direction === "bottom";
   return buildUnit(widget, "credits", {
     content: {
+      version: 1,
       type: "basic",
       title: "Stream Credits",
-      subtitle: "",
-      speed: 1,
+      titleColor: "#ffffff",
+      subtitle: "A massive thanks to everyone below",
+      subtitleColor: "#ffffff",
+      headerColor: "#ffffff",
+      endMessage: "See you next time!",
+      endMessageColor: "#ffffff",
+      eventColor: "#ffffff",
       loop: false,
-      eventsToShow: { ...CREDITS_DEFAULT_EVENTS_TO_SHOW },
+      speed: 1,
+      sectionOrder: [...CREDITS_DEFAULT_SECTION_ORDER],
+      // SE only ships subscribers + gift-subs, so import with just those
+      // enabled. The Manager can re-enable additional sections at any time;
+      // the underlying activity feed is fetched session-wide regardless.
+      eventsToShow: { ...SE_CREDITS_EVENTS_TO_SHOW },
+      topLimits: { ...CREDITS_DEFAULT_TOP_LIMITS },
+      eventNames: { ...CREDITS_DEFAULT_EVENT_NAMES },
+      prefixes: { ...CREDITS_DEFAULT_PREFIXES },
+      templates: { ...CREDITS_DEFAULT_TEMPLATES },
+      daysToShow: "session",
       itemGap,
       reverseFlow,
+      media: {
+        type: "image",
+        content: { src: [], name: [], loop: true, playAudio: true, volume: 1 }
+      },
+      audio: {
+        content: { src: [], name: [], loop: false, volume: 1 }
+      },
       // SE-specific knobs preserved as provenance; no direct Lumia equivalent for
       // these. `chosenFilter` would narrow eventsToShow if we had a clean mapping;
       // `separator` would join entries but Lumia credits uses sectioned cards instead.
       se_chosen_filter: v.chosenFilter,
       se_separator: v.separator,
       se_amount: v.amount
+    },
+    css: {
+      fontSize: 30,
+      lineHeight: 1,
+      fontFamily: "Roboto",
+      fontWeight: "normal",
+      color: "#ffffff",
+      textShadow: "",
+      textAlign: "center",
+      background: "transparent"
     }
   });
 }
@@ -4560,6 +4750,11 @@ function mapHypetrain(widget) {
       levelUpSoundUrl: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
       trainEndSoundUrl: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
       audioVolume: 0.5,
+      // Match native defaults so SE-imported trains get the same polished
+      // sprite pack the native module ships with.
+      trainLocoImageUrl: "https://storage.lumiastream.com/overlays/global/hypetrain/train_loco_default.png",
+      rocketImageUrl: "https://storage.lumiastream.com/overlays/global/hypetrain/rocket_default.png",
+      infernoImageUrl: "https://storage.lumiastream.com/overlays/global/hypetrain/inferno_default.png",
       // SE config preserved verbatim as provenance — no Lumia equivalent for
       // most of these knobs (per-widget animation tunables, sound URLs the
       // streamer might want to migrate manually, etc.). Users can inspect

package/dist/se-import.js

@@ -226,11 +226,11 @@ var LUMIA_DEFAULT_SIZES = {
   audio: { width: 200, height: 200 },
   slideshow: { width: 400, height: 220 },
   alert: { width: 700, height: 600 },
-  // 80 was too short for the SE-style slim goal layout (label + bar + "Ends
-  // in" sublabel needs ~125 px of vertical space). Bumped so editor-canvas
-  // rendering (which doesn't honor autoHeight) doesn't clip the sublabel
-  // after import.
-  goal: { width: 740, height: 130 },
+  // Sized for the SE-style slim layout — title (~24px line) + tight gap +
+  // 1.7em bar + optional "Ends in" sublabel collapses to ~70-85 px. 90 gives
+  // a small safety margin for larger fonts without leaving dead space in the
+  // editor canvas (which doesn't honor the layer's `autoHeight: true`).
+  goal: { width: 740, height: 90 },
   timer: { width: 740, height: 80 },
   chatbox: { width: 375, height: 470 },
   eventlist: { width: 375, height: 470 },
@@ -267,10 +267,20 @@ function translateVariationCondition(seType, seCondition, requirement) {
   return { conditionType: "RANDOM", condition: 100 };
 }
 var LUMIA_LAYOUTS = /* @__PURE__ */ new Set(["column", "row", "onlyImage", "onlyText", "imageOver", "textOver"]);
+var SE_LAYOUT_ALIASES = {
+  behind: "textOver"
+};
 function translateLayout(seLayout) {
-  if (seLayout && LUMIA_LAYOUTS.has(seLayout)) return seLayout;
+  if (!seLayout) return "column";
+  const alias = SE_LAYOUT_ALIASES[seLayout];
+  if (alias) return alias;
+  if (LUMIA_LAYOUTS.has(seLayout)) return seLayout;
   return "column";
 }
+function seLayoutUsesPushText(seLayout) {
+  if (!seLayout) return true;
+  return seLayout !== "behind";
+}
 
 // src/se-import/mappers/build.ts
 import { nanoid } from "nanoid";
@@ -481,7 +491,7 @@ function buildAlertEvent(seEvent, seEventType) {
   const importedTextShadow = css["text-shadow"] ?? "rgba(0, 0, 0, 0.8) 1px 1px 1px";
   const textShadow = shadowEnabled ? importedTextShadow : "none";
   const marginTopRaw = Number(css["margin-top"]);
-  const pushTextUp = Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
+  const pushTextUp = seLayoutUsesPushText(seEvent.layout) && Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
   const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType, seEvent)).filter((v) => v != null);
   const defaultDuration = (seEventType && SE_DEFAULT_DURATION_BY_EVENT[seEventType]) ?? 8;
   return {
@@ -611,25 +621,52 @@ function deepMergeSeSettings(parent, variation) {
   }
   return out;
 }
+function pickBaseAlertFields(event) {
+  const { on: _on, variations: _variations, matchEmptyCondition: _mec, ...base } = event;
+  return base;
+}
 function mapAlertBox(widget, opts = {}) {
   const v = widget.variables ?? {};
   const events = {};
   const eventKeys = opts.onlyEvents ?? ["follower", "subscriber", "tip", "cheer", "raid", "merch", "purchase", "charityCampaignDonation"];
+  let firstEvent = null;
   for (const seKey of eventKeys) {
     const ev = v[seKey];
     if (!ev || typeof ev !== "object") continue;
     const lumiaAlert = SE_EVENT_TO_LUMIA_ALERT[seKey];
     if (!lumiaAlert) continue;
-    events[lumiaAlert] = buildAlertEvent(ev, seKey);
+    const built = buildAlertEvent(ev, seKey);
+    events[lumiaAlert] = built;
+    if (firstEvent == null) firstEvent = built;
   }
-  return buildUnit(widget, "alert", { alert: { events } });
+  const baseAlert = firstEvent ? pickBaseAlertFields(firstEvent) : {};
+  return buildUnit(widget, "alert", { alert: { ...baseAlert, events } });
 }
 function mapSingleAlert(widget, lumiaAlertKey) {
   const v = widget.variables ?? {};
+  const topText = widget.text;
+  const merged = { ...v };
+  if (topText) {
+    const inner = v.text ?? {};
+    const innerCss = inner.css ?? {};
+    const topCss = topText.css ?? {};
+    merged.text = {
+      ...inner,
+      message: inner.message ?? topText.value ?? "",
+      enableShadow: inner.enableShadow ?? topText.enableShadow,
+      // Top-level SE CSS is the source of truth for Extra Life / DonorDrive
+      // (which omit `variables.text` entirely). For Tiltify both are populated
+      // with the same values; letting the nested `variables.text.css` win
+      // preserves any per-event overrides the streamer might have set.
+      css: { ...topCss, ...innerCss }
+    };
+  }
+  const built = buildAlertEvent(merged);
   const events = {
-    [lumiaAlertKey]: buildAlertEvent(v)
+    [lumiaAlertKey]: built
   };
-  return buildUnit(widget, "alert", { alert: { events } });
+  const baseAlert = pickBaseAlertFields(built);
+  return buildUnit(widget, "alert", { alert: { ...baseAlert, events } });
 }
 
 // src/se-import/mappers/goal.ts
@@ -645,9 +682,17 @@ function currentForListener(listener) {
   if (listener.startsWith("merch-")) return "{{fourthwall_total_order_count}}";
   return "0";
 }
+function charityGoalVariables(widgetType) {
+  if (widgetType === "se-widget-tiltify-goal") return { current: "{{tiltify_total_raised=0}}", targetGoal: "{{tiltify_goal_amount=100}}" };
+  if (widgetType === "se-widget-extralife-goal") return { current: "{{extralife_total_raised=0}}", targetGoal: "{{extralife_goal_amount=100}}" };
+  if (widgetType === "se-widget-donor-drive-goal") return { current: "{{donordrive_total_raised=0}}", targetGoal: "{{donordrive_goal_amount=100}}" };
+  return null;
+}
 function mapGoal(widget) {
   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,
@@ -659,11 +704,13 @@ function mapGoal(widget) {
       label: translateSeText(v.title ?? "Goal"),
       subLabel: "",
       // The Goal module renders this template literal with {{current}} + {{goal}} substituted.
-      display: "{{current}} / {{goal}}",
+      // Charity goals track donation amounts — prefix `$` so the rendered bar reads
+      // "$0 / $100" the way SE's charity goals do, instead of bare integers.
+      display: charity ? "${{current}} / ${{goal}}" : "{{current}} / {{goal}}",
       // `current` is a template variable reference (resolved at render time from session variables).
       // `targetGoal` is the numeric ceiling. Both required by Goal/index.tsx:28-29.
-      current: currentForListener(listener),
-      targetGoal: String(v.goalAmount ?? 100),
+      current: charity ? charity.current : currentForListener(listener),
+      targetGoal: charity ? charity.targetGoal : String(v.goalAmount ?? 100),
       image: "",
       audio: { decrement: "", increment: "", goal: "", goalFailed: "", volume: 1 },
       // `null` (rather than `''`) is the cleaner contract — Goal/index.tsx:11's
@@ -690,13 +737,13 @@ function mapGoal(widget) {
       // `content.border` and `content.borderRadius`. Writing them to
       // module.css just plopped useless transparent-0px rules on the
       // outer .overlay-module wrapper.
-      lineHeight: 1,
-      fontSize: 30,
-      textAlign: "center",
-      fontFamily: "Roboto",
-      fontWeight: "bold",
-      color: "#ffffff",
-      textShadow: "rgb(0, 0, 0) 1px 1px 1px",
+      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"
     }
   });
@@ -955,33 +1002,143 @@ function mapEventList(widget) {
     }
   });
 }
-var CREDITS_DEFAULT_EVENTS_TO_SHOW = {
+var SE_CREDITS_EVENTS_TO_SHOW = {
   mods: false,
   subscribers: true,
   gifts: true,
-  donations: true,
-  purchases: true,
-  bits: true,
-  kicks: true,
-  raids: true,
-  hosts: true,
-  superstickers: true,
-  superchats: true,
-  redemptions: true,
-  stars: true,
-  fans: true,
+  donations: false,
+  purchases: false,
+  bits: false,
+  kicks: false,
+  raids: false,
+  hosts: false,
+  superstickers: false,
+  superchats: false,
+  redemptions: false,
+  stars: false,
+  fans: false,
   shares: false,
-  spells: true,
+  spells: false,
   likes: false,
-  followers: true,
+  followers: false,
   others: false,
-  topGifts: true,
-  topBits: true,
-  topKicks: true,
-  topDonations: true,
-  topSuperstickers: true,
-  topSuperchats: true,
-  topRedemptions: true
+  topGifts: false,
+  topBits: false,
+  topKicks: false,
+  topDonations: false,
+  topSuperstickers: false,
+  topSuperchats: false,
+  topRedemptions: false
+};
+var CREDITS_DEFAULT_SECTION_ORDER = [
+  "topGifts",
+  "topBits",
+  "topKicks",
+  "topDonations",
+  "topSuperstickers",
+  "topSuperchats",
+  "topRedemptions",
+  "subscribers",
+  "gifts",
+  "followers",
+  "donations",
+  "bits",
+  "kicks",
+  "raids",
+  "hosts",
+  "superstickers",
+  "superchats",
+  "redemptions",
+  "others"
+];
+var CREDITS_DEFAULT_TOP_LIMITS = {
+  topGifts: 5,
+  topBits: 5,
+  topKicks: 5,
+  topDonations: 5,
+  topSuperstickers: 5,
+  topSuperchats: 5,
+  topRedemptions: 5
+};
+var CREDITS_DEFAULT_EVENT_NAMES = {
+  mods: "Mods (Total {{amount}})",
+  topGifts: "Top Gifters",
+  topBits: "Top Cheerers",
+  topKicks: "Top Kicks",
+  topDonations: "Top Donators",
+  topSuperstickers: "Top Super Stickers",
+  topSuperchats: "Top Super Chatters",
+  topRedemptions: "Top Redeemers",
+  subscribers: "Subscribers (Total {{amount}})",
+  gifts: "Gifts (Total {{amount}})",
+  donations: "Donations (Total {{amount}})",
+  purchases: "Purchases (Total {{amount}})",
+  bits: "Cheers (Total {{amount}})",
+  kicks: "Kicks (Total {{amount}})",
+  superstickers: "Super Stickers (Total {{amount}})",
+  superchats: "Super Chatters (Total {{amount}})",
+  redemptions: "Redemptions (Total {{amount}})",
+  stars: "Stars (Total {{amount}})",
+  fans: "Fans (Total {{amount}})",
+  shares: "Shares (Total {{amount}})",
+  raids: "Raids (Total {{amount}})",
+  hosts: "Hosts (Total {{amount}})",
+  spells: "Spells (Total {{amount}})",
+  retweets: "Retweets (Total {{amount}})",
+  likes: "Likes (Total {{amount}})",
+  followers: "Followers (Total {{amount}})",
+  others: "Other (Total {{amount}})"
+};
+var CREDITS_DEFAULT_PREFIXES = {
+  mods: "x",
+  subscribers: "x",
+  gifts: "x",
+  donations: "x",
+  purchases: "x",
+  bits: "x",
+  kicks: "x",
+  superstickers: "x",
+  superchats: "x",
+  redemptions: "x",
+  stars: "x",
+  fans: "x",
+  shares: "x",
+  raids: "x",
+  hosts: "x",
+  spells: "x",
+  retweets: "x",
+  likes: "x",
+  followers: "",
+  others: ""
+};
+var CREDITS_DEFAULT_TEMPLATES = {
+  mods: "{{username}}",
+  subscribers: "{{username}} x{{amount}}",
+  gifts: "{{username}} x{{amount}}",
+  donations: "{{username}} x{{amount}}",
+  purchases: "{{username}} x{{amount}}",
+  bits: "{{username}} x{{amount}}",
+  kicks: "{{username}} x{{amount}}",
+  raids: "{{username}} x{{amount}}",
+  hosts: "{{username}} x{{amount}}",
+  superstickers: "{{username}} x{{amount}}",
+  superchats: "{{username}} x{{amount}}",
+  redemptions: "{{username}} x{{amount}}",
+  stars: "{{username}} x{{amount}}",
+  fans: "{{username}} x{{amount}}",
+  shares: "{{username}}",
+  spells: "{{username}} x{{amount}}",
+  retweets: "{{username}}",
+  likes: "{{username}}",
+  followers: "{{username}}",
+  others: "{{username}} x{{amount}}",
+  topGifts: "{{username}} x{{amount}}",
+  topBits: "{{username}} x{{amount}}",
+  topKicks: "{{username}} x{{amount}}",
+  topDonations: "{{username}} x{{amount}}",
+  topSuperstickers: "{{username}} x{{amount}}",
+  topSuperchats: "{{username}} x{{amount}}",
+  topRedemptions: "{{username}} x{{amount}}"
 };
 function mapCredits(widget) {
   const v = widget.variables ?? {};
@@ -989,20 +1146,53 @@ function mapCredits(widget) {
   const reverseFlow = v.direction === "bottom";
   return buildUnit(widget, "credits", {
     content: {
+      version: 1,
       type: "basic",
       title: "Stream Credits",
-      subtitle: "",
-      speed: 1,
+      titleColor: "#ffffff",
+      subtitle: "A massive thanks to everyone below",
+      subtitleColor: "#ffffff",
+      headerColor: "#ffffff",
+      endMessage: "See you next time!",
+      endMessageColor: "#ffffff",
+      eventColor: "#ffffff",
       loop: false,
-      eventsToShow: { ...CREDITS_DEFAULT_EVENTS_TO_SHOW },
+      speed: 1,
+      sectionOrder: [...CREDITS_DEFAULT_SECTION_ORDER],
+      // SE only ships subscribers + gift-subs, so import with just those
+      // enabled. The Manager can re-enable additional sections at any time;
+      // the underlying activity feed is fetched session-wide regardless.
+      eventsToShow: { ...SE_CREDITS_EVENTS_TO_SHOW },
+      topLimits: { ...CREDITS_DEFAULT_TOP_LIMITS },
+      eventNames: { ...CREDITS_DEFAULT_EVENT_NAMES },
+      prefixes: { ...CREDITS_DEFAULT_PREFIXES },
+      templates: { ...CREDITS_DEFAULT_TEMPLATES },
+      daysToShow: "session",
       itemGap,
       reverseFlow,
+      media: {
+        type: "image",
+        content: { src: [], name: [], loop: true, playAudio: true, volume: 1 }
+      },
+      audio: {
+        content: { src: [], name: [], loop: false, volume: 1 }
+      },
       // SE-specific knobs preserved as provenance; no direct Lumia equivalent for
       // these. `chosenFilter` would narrow eventsToShow if we had a clean mapping;
       // `separator` would join entries but Lumia credits uses sectioned cards instead.
       se_chosen_filter: v.chosenFilter,
       se_separator: v.separator,
       se_amount: v.amount
+    },
+    css: {
+      fontSize: 30,
+      lineHeight: 1,
+      fontFamily: "Roboto",
+      fontWeight: "normal",
+      color: "#ffffff",
+      textShadow: "",
+      textAlign: "center",
+      background: "transparent"
     }
   });
 }
@@ -1445,6 +1635,11 @@ function mapHypetrain(widget) {
       levelUpSoundUrl: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
       trainEndSoundUrl: "https://storage.lumiastream.com/overlays/lumia/audio/crowdClap.mp3",
       audioVolume: 0.5,
+      // Match native defaults so SE-imported trains get the same polished
+      // sprite pack the native module ships with.
+      trainLocoImageUrl: "https://storage.lumiastream.com/overlays/global/hypetrain/train_loco_default.png",
+      rocketImageUrl: "https://storage.lumiastream.com/overlays/global/hypetrain/rocket_default.png",
+      infernoImageUrl: "https://storage.lumiastream.com/overlays/global/hypetrain/inferno_default.png",
       // SE config preserved verbatim as provenance — no Lumia equivalent for
       // most of these knobs (per-widget animation tunables, sound URLs the
       // streamer might want to migrate manually, etc.). Users can inspect

package/package.json

@@ -1,133 +1,133 @@
 {
-  "name": "@lumiastream/ui",
-  "version": "0.2.8-alpha.12",
-  "author": "Lumia Stream",
-  "license": "ISC",
-  "description": "Lumia UI Kit",
-  "packageManager": "npm@11.9.0",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./components": {
-      "types": "./dist/components.d.ts",
-      "import": "./dist/components.js"
-    },
-    "./LSButton": {
-      "types": "./dist/LSButton.d.ts",
-      "import": "./dist/LSButton.js"
-    },
-    "./LSCheckbox": {
-      "types": "./dist/LSCheckbox.d.ts",
-      "import": "./dist/LSCheckbox.js"
-    },
-    "./LSColorPicker": {
-      "types": "./dist/LSColorPicker.d.ts",
-      "import": "./dist/LSColorPicker.js"
-    },
-    "./LSDatePicker": {
-      "types": "./dist/LSDatePicker.d.ts",
-      "import": "./dist/LSDatePicker.js"
-    },
-    "./LSFontPicker": {
-      "types": "./dist/LSFontPicker.d.ts",
-      "import": "./dist/LSFontPicker.js"
-    },
-    "./LSInput": {
-      "types": "./dist/LSInput.d.ts",
-      "import": "./dist/LSInput.js"
-    },
-    "./LSMultiSelect": {
-      "types": "./dist/LSMultiSelect.d.ts",
-      "import": "./dist/LSMultiSelect.js"
-    },
-    "./LSRadio": {
-      "types": "./dist/LSRadio.d.ts",
-      "import": "./dist/LSRadio.js"
-    },
-    "./LSSelect": {
-      "types": "./dist/LSSelect.d.ts",
-      "import": "./dist/LSSelect.js"
-    },
-    "./LSSliderInput": {
-      "types": "./dist/LSSliderInput.d.ts",
-      "import": "./dist/LSSliderInput.js"
-    },
-    "./LSTextField": {
-      "types": "./dist/LSTextField.d.ts",
-      "import": "./dist/LSTextField.js"
-    },
-    "./LSVariableInputField": {
-      "types": "./dist/LSVariableInputField.d.ts",
-      "import": "./dist/LSVariableInputField.js"
-    },
-    "./utils": {
-      "types": "./dist/utils.d.ts",
-      "import": "./dist/utils.js"
-    },
-    "./utils/chatMedia": {
-      "types": "./dist/utils/chatMedia.d.ts",
-      "import": "./dist/utils/chatMedia.js"
-    },
-    "./se-import": {
-      "types": "./dist/se-import.d.ts",
-      "import": "./dist/se-import.js"
-    }
-  },
-  "scripts": {
-    "start": "storybook dev -p 6006",
-    "build": "tsup",
-    "build-storybook": "storybook build",
-    "watch": "tsup --watch",
-    "release": "changeset && changeset tag && npm run build && npm publish",
-    "prepublishOnly": "npm run build",
-    "postpublish": "npm cache clean --force && node ./scripts/postpublish-install.mjs"
-  },
-  "peerDependencies": {
-    "@codemirror/autocomplete": "^6.0.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.0.0",
-    "@mui/material": "^9.0.0",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-hook-form": "^7.62.0"
-  },
-  "devDependencies": {
-    "@codemirror/autocomplete": "^6.20.1",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.0.0",
-    "@mui/material": "^9.0.0",
-    "@storybook/builder-vite": "^10.2.17",
-    "@storybook/react-vite": "^10.2.17",
-    "@types/node": "^25.5.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "19.2.3",
-    "postcss": "^8.5.14",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-hook-form": "^7.73.1",
-    "sass-embedded": "^1.99.0",
-    "storybook": "^10.2.17",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.8"
-  },
-  "dependencies": {
-    "@lumiastream/lumia-translations": "1.15.7",
-    "@lumiastream/lumia-types": "^3.3.7-alpha.2",
-    "classnames": "^2.5.1",
-    "globals": "^17.4.0",
-    "nanoid": "^5.1.11",
-    "react-best-gradient-color-picker": "^3.0.14"
-  }
+	"name": "@lumiastream/ui",
+	"version": "0.2.8-alpha.13",
+	"author": "Lumia Stream",
+	"license": "ISC",
+	"description": "Lumia UI Kit",
+	"packageManager": "npm@11.9.0",
+	"type": "module",
+	"main": "dist/index.js",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./components": {
+			"types": "./dist/components.d.ts",
+			"import": "./dist/components.js"
+		},
+		"./LSButton": {
+			"types": "./dist/LSButton.d.ts",
+			"import": "./dist/LSButton.js"
+		},
+		"./LSCheckbox": {
+			"types": "./dist/LSCheckbox.d.ts",
+			"import": "./dist/LSCheckbox.js"
+		},
+		"./LSColorPicker": {
+			"types": "./dist/LSColorPicker.d.ts",
+			"import": "./dist/LSColorPicker.js"
+		},
+		"./LSDatePicker": {
+			"types": "./dist/LSDatePicker.d.ts",
+			"import": "./dist/LSDatePicker.js"
+		},
+		"./LSFontPicker": {
+			"types": "./dist/LSFontPicker.d.ts",
+			"import": "./dist/LSFontPicker.js"
+		},
+		"./LSInput": {
+			"types": "./dist/LSInput.d.ts",
+			"import": "./dist/LSInput.js"
+		},
+		"./LSMultiSelect": {
+			"types": "./dist/LSMultiSelect.d.ts",
+			"import": "./dist/LSMultiSelect.js"
+		},
+		"./LSRadio": {
+			"types": "./dist/LSRadio.d.ts",
+			"import": "./dist/LSRadio.js"
+		},
+		"./LSSelect": {
+			"types": "./dist/LSSelect.d.ts",
+			"import": "./dist/LSSelect.js"
+		},
+		"./LSSliderInput": {
+			"types": "./dist/LSSliderInput.d.ts",
+			"import": "./dist/LSSliderInput.js"
+		},
+		"./LSTextField": {
+			"types": "./dist/LSTextField.d.ts",
+			"import": "./dist/LSTextField.js"
+		},
+		"./LSVariableInputField": {
+			"types": "./dist/LSVariableInputField.d.ts",
+			"import": "./dist/LSVariableInputField.js"
+		},
+		"./utils": {
+			"types": "./dist/utils.d.ts",
+			"import": "./dist/utils.js"
+		},
+		"./utils/chatMedia": {
+			"types": "./dist/utils/chatMedia.d.ts",
+			"import": "./dist/utils/chatMedia.js"
+		},
+		"./se-import": {
+			"types": "./dist/se-import.d.ts",
+			"import": "./dist/se-import.js"
+		}
+	},
+	"scripts": {
+		"start": "storybook dev -p 6006",
+		"build": "tsup",
+		"build-storybook": "storybook build",
+		"watch": "tsup --watch",
+		"release": "changeset && changeset tag && npm run build && npm publish",
+		"prepublishOnly": "npm run build",
+		"postpublish": "npm cache clean --force && node ./scripts/postpublish-install.mjs"
+	},
+	"peerDependencies": {
+		"@codemirror/autocomplete": "^6.0.0",
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
+		"@mui/icons-material": "^9.0.0",
+		"@mui/material": "^9.0.0",
+		"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+		"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+		"react-hook-form": "^7.62.0"
+	},
+	"devDependencies": {
+		"@codemirror/autocomplete": "^6.20.1",
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
+		"@mui/icons-material": "^9.0.0",
+		"@mui/material": "^9.0.0",
+		"@storybook/builder-vite": "^10.2.17",
+		"@storybook/react-vite": "^10.2.17",
+		"@types/node": "^25.5.0",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "19.2.3",
+		"postcss": "^8.5.14",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"react-hook-form": "^7.73.1",
+		"sass-embedded": "^1.99.0",
+		"storybook": "^10.2.17",
+		"tsup": "^8.5.1",
+		"typescript": "^5.9.3",
+		"vite": "^8.0.8"
+	},
+	"dependencies": {
+		"@lumiastream/lumia-translations": "1.15.7",
+		"@lumiastream/lumia-types": "^3.3.7-alpha.2",
+		"classnames": "^2.5.1",
+		"globals": "^17.4.0",
+		"nanoid": "^5.1.11",
+		"react-best-gradient-color-picker": "^3.0.14"
+	}
 }