@lumiastream/ui 0.7.5 → 0.7.7

package/dist/se-import.js

@@ -2114,12 +2114,36 @@ var CHATBOX_DEFAULT_CONTENT_FIELDS = {
   background: "transparent",
   theme: "simple",
   chatboxStreamingSite: {
-    twitch: { message: "", icon: "", themeConfig: { primaryColor: "#915dff", showUsernameColors: true } },
-    youtube: { message: "", icon: "", themeConfig: { primaryColor: "#ff0000", usePlatformColor: false } },
-    facebook: { message: "", icon: "", themeConfig: { primaryColor: "#4267B2", usePlatformColor: false } },
-    tiktok: { message: "", icon: "", themeConfig: { primaryColor: "#ff0050", usePlatformColor: false } },
-    kick: { message: "", icon: "", themeConfig: { primaryColor: "#3AD305", usePlatformColor: false } },
-    discord: { message: "", icon: "", themeConfig: { primaryColor: "#7289da", usePlatformColor: false } }
+    twitch: {
+      message: "",
+      icon: "",
+      themeConfig: { primaryColor: "#915dff", showUsernameColors: true }
+    },
+    youtube: {
+      message: "",
+      icon: "",
+      themeConfig: { primaryColor: "#ff0000", usePlatformColor: false }
+    },
+    facebook: {
+      message: "",
+      icon: "",
+      themeConfig: { primaryColor: "#4267B2", usePlatformColor: false }
+    },
+    tiktok: {
+      message: "",
+      icon: "",
+      themeConfig: { primaryColor: "#ff0050", usePlatformColor: false }
+    },
+    kick: {
+      message: "",
+      icon: "",
+      themeConfig: { primaryColor: "#3AD305", usePlatformColor: false }
+    },
+    discord: {
+      message: "",
+      icon: "",
+      themeConfig: { primaryColor: "#7289da", usePlatformColor: false }
+    }
   },
   borderRadius: "10px",
   bgOpacity: 0.4,
@@ -2135,7 +2159,17 @@ var CHATBOX_DEFAULT_CONTENT_FIELDS = {
   hyperClickableLinks: true,
   clickableChatterProfiles: false,
   previewMediaInChat: true,
-  previewMediaUserLevels: ["streamer", "moderators", "vips", "tier3", "tier2", "subscribers", "regular", "follower", "anyone"],
+  previewMediaUserLevels: [
+    "streamer",
+    "moderators",
+    "vips",
+    "tier3",
+    "tier2",
+    "subscribers",
+    "regular",
+    "follower",
+    "anyone"
+  ],
   breakLine: true,
   fadeOutAfterDelay: false,
   fadeOutDelayTime: 5,
@@ -2210,11 +2244,97 @@ var TIPJAR_DEFAULT_MODULE = {
   version: 1,
   content: TIPJAR_DEFAULT_CONTENT_FIELDS
 };
+var EVENTLIST_TYPE_BG_BASE = "#262541";
+var EVENTLIST_TYPE_COLORS = {
+  follower: "#22c55e",
+  subscribers: "#a855f7",
+  gifts: "#ec4899",
+  donation: "#10b981",
+  charity: "#f97316",
+  bits: "#facc15",
+  points: "#3b82f6",
+  redemption: "#06b6d4",
+  extension: "#8b5cf6",
+  raids: "#ef4444",
+  spells: "#7c3aed",
+  retweets: "#0ea5e9",
+  likes: "#f472b6",
+  shares: "#14b8a6",
+  purchases: "#eab308",
+  superstickers: "#fb923c",
+  superchats: "#f59e0b",
+  stars: "#fde047",
+  fans: "#d946ef"
+};
+var EVENTLIST_DEFAULT_EVENT_TYPES = [
+  "follower",
+  "bits",
+  "extension",
+  "points",
+  "donation",
+  "subscribers",
+  "gifts",
+  "purchases",
+  "raids",
+  "superstickers",
+  "superchats",
+  "stars",
+  "fans",
+  "shares",
+  "spells",
+  "redemption",
+  "retweets",
+  "likes",
+  "charity"
+];
+var muteEventColor = (hex) => {
+  const ratio = 0.22;
+  const blend = (offset) => Math.round(
+    parseInt(hex.slice(1 + offset, 3 + offset), 16) * ratio + parseInt(EVENTLIST_TYPE_BG_BASE.slice(1 + offset, 3 + offset), 16) * (1 - ratio)
+  ).toString(16).padStart(2, "0");
+  return `#${blend(0)}${blend(2)}${blend(4)}`;
+};
+var darkenHex = (hex, factor) => {
+  const channel = (offset) => Math.round(parseInt(hex.slice(1 + offset, 3 + offset), 16) * factor).toString(16).padStart(2, "0");
+  return `#${channel(0)}${channel(2)}${channel(4)}`;
+};
+var eventlistDefaultThemeConfig = {
+  backgroundColor: "#262541",
+  borderColor: "#FFFFFF1F",
+  primaryColor: "#FF4076",
+  showBorder: true,
+  secondaryColor: "#ffffff",
+  iconColor: "#ffffff",
+  titleColor: "#ffffff",
+  subtitleColor: "#ffffff",
+  highlightColor: "inherit",
+  useGlobalThemeConfig: true
+};
+var buildEventlistTypeDefaults = (base) => Object.fromEntries(
+  EVENTLIST_DEFAULT_EVENT_TYPES.map((type) => {
+    const color = EVENTLIST_TYPE_COLORS[type];
+    const background = muteEventColor(color);
+    return [
+      type,
+      {
+        message: "",
+        icon: "",
+        themeConfig: {
+          ...base,
+          backgroundColor: background,
+          primaryColor: darkenHex(background, 0.7),
+          iconColor: color,
+          useGlobalThemeConfig: false
+        }
+      }
+    ];
+  })
+);
 var EVENTLIST_DEFAULT_CONTENT_FIELDS = {
   version: 2,
-  eventListType: {},
+  eventListType: buildEventlistTypeDefaults(eventlistDefaultThemeConfig),
   theme: "basic",
-  themeConfig: {},
+  themeConfig: eventlistDefaultThemeConfig,
   borderRadius: "10px",
   condensedText: true,
   src: "",
@@ -2243,7 +2363,7 @@ var EVENTLIST_DEFAULT_CONTENT_FIELDS = {
   fadeOutAfterDelay: false,
   fadeOutDelayTime: 5,
   image: "",
-  itemGap: 16,
+  itemGap: 8,
   audio: {
     enter: "",
     volume: 1
@@ -2486,6 +2606,8 @@ function ensureCheermoteTemplate(template) {
   return `${template.replace(/\s+$/, "")} {{cheermote}}{{amount}} `;
 }
 function mapEventList(widget, ctx) {
+  const eventlistDefaults = EVENTLIST_DEFAULT_MODULE.content;
+  const eventlistVersion = EVENTLIST_DEFAULT_MODULE.version;
   const v = widget.variables ?? {};
   const allowedEvents = computeAllowedEventsFromSEListeners(widget.listeners, widget.listener);
   const maxItems = v.visibleEvents ?? v.visibleItems ?? 5;
@@ -2502,10 +2624,12 @@ function mapEventList(widget, ctx) {
     widget,
     "eventlist",
     {
+      version: eventlistVersion,
       // 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 }),
+      css: { ...mapSeTextCssToModuleCss(widget), fontSize: 18, scaleWithContainer: "true" },
       content: {
+        ...eventlistDefaults,
         theme,
         direction: v.direction ?? "top",
         maxItemsToShow: maxItems,
@@ -2523,8 +2647,7 @@ function mapEventList(widget, ctx) {
         // `itemTemplate` off either currentThemeConfig or themeConfig — stash
         // SE's per-item template here so the imported widget reproduces the
         // original (e.g. "{name} " → "{username} ").
-        themeConfig: isMarquee && itemTemplate ? { itemTemplate } : {},
-        eventListType: {},
+        themeConfig: isMarquee && itemTemplate ? { ...eventlistDefaults.themeConfig, itemTemplate } : eventlistDefaults.themeConfig,
         condensedText: false,
         // `horizontal` keeps non-marquee widgets that had scrolling enabled in
         // SE laid out on a single row (eventlist already supports this); for
@@ -2935,7 +3058,10 @@ function mapTimer(widget, ctx) {
     widget,
     "timer",
     {
-      css: { ...mapSeTextCssToModuleCss(widget), ...seTimerWantsContainerScaling(widget) ? { scaleWithContainer: "true" } : {} },
+      css: {
+        ...mapSeTextCssToModuleCss(widget),
+        ...seTimerWantsContainerScaling(widget) ? { scaleWithContainer: "true" } : {}
+      },
       content: {
         version: 1,
         type: "countdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lumiastream/ui",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "author": "Lumia Stream",
   "license": "ISC",
   "description": "Lumia UI Kit",
@@ -128,8 +128,8 @@
     "vitest": "^4.1.6"
   },
   "dependencies": {
-    "@lumiastream/lumia-translations": "1.16.6",
-    "@lumiastream/lumia-types": "3.6.9",
+    "@lumiastream/lumia-translations": "1.16.8",
+    "@lumiastream/lumia-types": "3.7.0",
     "classnames": "^2.5.1",
     "globals": "^17.4.0",
     "nanoid": "^5.1.11",