@lumiastream/ui 0.5.7 → 0.5.9

package/dist/index.js

@@ -4138,7 +4138,9 @@ function seInnerAutoFit(widget, innerCss, mode) {
   const isInnerAutoWidth = innerCss?.width === "auto";
   const isInnerAutoHeight = innerCss?.height === "auto";
   if (mode === "width-drives-both") {
-    if (!isInnerAutoWidth) return {};
+    if (!innerCss) return {};
+    const innerWidth = innerCss.width;
+    if (innerWidth === "100" || innerWidth === "100%") return {};
     return { objectFit: "contain", autoWidth: true, autoHeight: true };
   }
   if (!isInnerAutoWidth && !isInnerAutoHeight) return {};
@@ -5121,10 +5123,10 @@ function defaultChatboxBackgroundForSeTheme(seTheme) {
   const t = (seTheme ?? "").toString().toLowerCase();
   if (!t || t === "default") return "transparent";
   if (t === "custom") return "transparent";
+  if (t.includes("white")) return "#ffffff";
   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("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";
@@ -5194,11 +5196,18 @@ function mapChatbox(widget, ctx) {
   } else if (rawColor != null) {
     moduleCss.color = rawColor;
   }
-  const textShadow = messageWins("text-shadow");
-  if (textShadow != null) moduleCss.textShadow = textShadow;
+  const messageTextShadow = messageCss["text-shadow"];
+  if (typeof messageTextShadow === "string" && messageTextShadow.length > 0) {
+    moduleCss.textShadow = messageTextShadow;
+  }
   const textAlign = messageWins("text-align");
   if (textAlign != null) moduleCss.textAlign = textAlign;
-  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
+  const messageFontWeight = messageCss["font-weight"];
+  if (typeof messageFontWeight === "string" && messageFontWeight.length > 0) {
+    moduleCss.fontWeight = messageFontWeight;
+  } else if (typeof messageFontWeight === "number") {
+    moduleCss.fontWeight = messageFontWeight;
+  }
   if (textCss["line-height"] != null) moduleCss.lineHeight = textCss["line-height"];
   const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : defaultChatboxBackgroundForSeTheme(v.theme);
   moduleCss.background = messageBackground;
@@ -5216,7 +5225,13 @@ function mapChatbox(widget, ctx) {
         fadeOutAfterDelay: fadeOutSeconds > 0,
         fadeOutDelayTime: fadeOutSeconds,
         showAvatar: true,
-        breakLine: false,
+        // SE's `.chat-line` renders with `word-break: break-word` and inline
+        // badges/emotes flowing inline-with-wrap. Lumia's chatbox container
+        // already has `word-break: break-word` + `overflow-wrap: anywhere`,
+        // and `breakLine: true` adds the `flex-wrap: wrap; align-items: center`
+        // layout that lets badges/emotes wrap alongside text — which is what
+        // SE does. Forcing `false` here was suppressing wrap on long lines.
+        breakLine: true,
         ...accentColor ? {
           chatboxStreamingSite: {
             ...chatboxDefaults.chatboxStreamingSite,
@@ -5746,7 +5761,11 @@ function mapTimer(widget, ctx) {
     {
       // 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),
+      // scaleWithContainer: SE renders the countdown at the literal font-size and lets
+      // `widget { overflow:hidden }` clip the overflow (visually masked by the canvas-level
+      // transform). Lumia has no equivalent clip on the layer, so a 150px font in a 162px
+      // box overflows visibly. Opt the imported timer into Lumia's container-query auto-fit.
+      css: { ...mapSeTextCssToModuleCss(widget), scaleWithContainer: true },
       content: {
         version: 1,
         type: "countdown",

package/dist/se-import.js

@@ -1058,7 +1058,9 @@ function seInnerAutoFit(widget, innerCss, mode) {
   const isInnerAutoWidth = innerCss?.width === "auto";
   const isInnerAutoHeight = innerCss?.height === "auto";
   if (mode === "width-drives-both") {
-    if (!isInnerAutoWidth) return {};
+    if (!innerCss) return {};
+    const innerWidth = innerCss.width;
+    if (innerWidth === "100" || innerWidth === "100%") return {};
     return { objectFit: "contain", autoWidth: true, autoHeight: true };
   }
   if (!isInnerAutoWidth && !isInnerAutoHeight) return {};
@@ -2041,10 +2043,10 @@ function defaultChatboxBackgroundForSeTheme(seTheme) {
   const t = (seTheme ?? "").toString().toLowerCase();
   if (!t || t === "default") return "transparent";
   if (t === "custom") return "transparent";
+  if (t.includes("white")) return "#ffffff";
   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("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";
@@ -2114,11 +2116,18 @@ function mapChatbox(widget, ctx) {
   } else if (rawColor != null) {
     moduleCss.color = rawColor;
   }
-  const textShadow = messageWins("text-shadow");
-  if (textShadow != null) moduleCss.textShadow = textShadow;
+  const messageTextShadow = messageCss["text-shadow"];
+  if (typeof messageTextShadow === "string" && messageTextShadow.length > 0) {
+    moduleCss.textShadow = messageTextShadow;
+  }
   const textAlign = messageWins("text-align");
   if (textAlign != null) moduleCss.textAlign = textAlign;
-  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
+  const messageFontWeight = messageCss["font-weight"];
+  if (typeof messageFontWeight === "string" && messageFontWeight.length > 0) {
+    moduleCss.fontWeight = messageFontWeight;
+  } else if (typeof messageFontWeight === "number") {
+    moduleCss.fontWeight = messageFontWeight;
+  }
   if (textCss["line-height"] != null) moduleCss.lineHeight = textCss["line-height"];
   const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : defaultChatboxBackgroundForSeTheme(v.theme);
   moduleCss.background = messageBackground;
@@ -2136,7 +2145,13 @@ function mapChatbox(widget, ctx) {
         fadeOutAfterDelay: fadeOutSeconds > 0,
         fadeOutDelayTime: fadeOutSeconds,
         showAvatar: true,
-        breakLine: false,
+        // SE's `.chat-line` renders with `word-break: break-word` and inline
+        // badges/emotes flowing inline-with-wrap. Lumia's chatbox container
+        // already has `word-break: break-word` + `overflow-wrap: anywhere`,
+        // and `breakLine: true` adds the `flex-wrap: wrap; align-items: center`
+        // layout that lets badges/emotes wrap alongside text — which is what
+        // SE does. Forcing `false` here was suppressing wrap on long lines.
+        breakLine: true,
         ...accentColor ? {
           chatboxStreamingSite: {
             ...chatboxDefaults.chatboxStreamingSite,
@@ -2666,7 +2681,11 @@ function mapTimer(widget, ctx) {
     {
       // 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),
+      // scaleWithContainer: SE renders the countdown at the literal font-size and lets
+      // `widget { overflow:hidden }` clip the overflow (visually masked by the canvas-level
+      // transform). Lumia has no equivalent clip on the layer, so a 150px font in a 162px
+      // box overflows visibly. Opt the imported timer into Lumia's container-query auto-fit.
+      css: { ...mapSeTextCssToModuleCss(widget), scaleWithContainer: true },
       content: {
         version: 1,
         type: "countdown",

package/package.json

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