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

package/dist/index.js

@@ -3114,7 +3114,7 @@ var resolveChatterProfileUrlWithResolvers = async ({
 };
 
 // src/se-import/index.ts
-import { nanoid as nanoid3 } from "nanoid";
+import { nanoid as nanoid4 } from "nanoid";
 
 // src/se-import/translate.ts
 var SE_TO_LUMIA_PLACEHOLDER = {
@@ -4062,6 +4062,7 @@ function mapGoal(widget, ctx) {
 }
 
 // src/se-import/mappers/custom.ts
+import { nanoid as nanoid2 } from "nanoid";
 var SOURCE_TO_LUMIA_FIELD_TYPE = {
   text: "input",
   number: "number",
@@ -4121,15 +4122,28 @@ function mapCustom(widget, ctx) {
   };
   const fields = parse(v.fields) ?? v.fields;
   const fieldData = parse(v.fieldData) ?? v.fieldData;
+  const widgetProvider = widget.provider;
+  const provider = widgetProvider === "kick" || widgetProvider === "youtube" || widgetProvider === "twitch" ? widgetProvider : ctx?.provider ?? "twitch";
   return buildUnit(widget, "custom", {
     content: {
-      codeId: String(widget.id),
+      // SE widget ids are integers unique only within a single SE overlay
+      // (1, 2, 3…). Using them as Lumia codeIds would collide across
+      // imports — codeId is the scoping key for variables, storage, and
+      // event listeners. Mint a fresh nanoid so every imported widget
+      // has its own scope.
+      codeId: nanoid2(),
       html: v.html ?? "",
       css: v.css ?? "",
       js: v.js ?? "",
       configs: translateConfigs(fields),
       data: fieldData ?? {},
-      flavor: "streamelements"
+      flavor: "streamelements",
+      // Native field on the Custom module content. The compatibility
+      // shim in Embed.tsx reads this to pick the right listener-name
+      // mapping table when forwarding Lumia events into the iframe as
+      // `onEventReceived` payloads. Default 'twitch' matches the shim's
+      // historical default so legacy imports keep working.
+      sourceProvider: provider
     }
   }, ctx);
 }
@@ -4664,7 +4678,21 @@ 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,
     content: {
       version: 1,
       type: "countdown",
@@ -4673,6 +4701,7 @@ function mapTimer(widget, ctx) {
       showMilliseconds: false,
       endAnimation: "",
       hideAfter: 0,
+      highlightColor: "inherit",
       messageAfterCountdown: translateSeText(v.messageAfterCountdown ?? ""),
       changeMessageAfter: !!v.changeMessageAfterCountdown,
       countDate: hasValidAbsoluteDate && (!!v.exactTime || !!v.datePicker || !!absoluteDate),
@@ -5494,7 +5523,7 @@ function guessMime(name) {
 }
 
 // src/se-import/transplant.ts
-import { nanoid as nanoid2 } from "nanoid";
+import { nanoid as nanoid3 } from "nanoid";
 function cloneModuleForTransplant(srcModule, newId) {
   const clonedContent = srcModule.content ? structuredClone(srcModule.content) : srcModule.content;
   if (srcModule.settings?.type === "custom" && clonedContent) {
@@ -5512,7 +5541,7 @@ function transplantLayer(source, sourceLayerId) {
   const srcLayer = layers.find((l) => l.id === sourceLayerId);
   const srcModule = modules[sourceLayerId];
   if (!srcLayer || !srcModule) return null;
-  const rootNewId = nanoid2();
+  const rootNewId = nanoid3();
   if (srcLayer.type !== "group") {
     const layer = { ...srcLayer, id: rootNewId };
     const module = cloneModuleForTransplant(srcModule, rootNewId);
@@ -5530,7 +5559,7 @@ function transplantLayer(source, sourceLayerId) {
       if (seen.has(child.id)) continue;
       seen.add(child.id);
       descendants.push(child);
-      idRemap.set(child.id, nanoid2());
+      idRemap.set(child.id, nanoid3());
       if (child.type === "group") queue.push(child.id);
     }
   }
@@ -8294,7 +8323,7 @@ function importSEBootstrap(bootstrap) {
     if (w.type !== "se-widget-group") continue;
     const uid = w.variables?.uid;
     if (typeof uid !== "string") continue;
-    const lumiaGroupId = nanoid3();
+    const lumiaGroupId = nanoid4();
     seUidToLumiaGroupId[uid] = lumiaGroupId;
     groupWidgetByUid[uid] = w;
   }

package/dist/se-import.js

@@ -1,5 +1,5 @@
 // src/se-import/index.ts
-import { nanoid as nanoid3 } from "nanoid";
+import { nanoid as nanoid4 } from "nanoid";
 
 // src/se-import/translate.ts
 var SE_TO_LUMIA_PLACEHOLDER = {
@@ -947,6 +947,7 @@ function mapGoal(widget, ctx) {
 }
 
 // src/se-import/mappers/custom.ts
+import { nanoid as nanoid2 } from "nanoid";
 var SOURCE_TO_LUMIA_FIELD_TYPE = {
   text: "input",
   number: "number",
@@ -1006,15 +1007,28 @@ function mapCustom(widget, ctx) {
   };
   const fields = parse(v.fields) ?? v.fields;
   const fieldData = parse(v.fieldData) ?? v.fieldData;
+  const widgetProvider = widget.provider;
+  const provider = widgetProvider === "kick" || widgetProvider === "youtube" || widgetProvider === "twitch" ? widgetProvider : ctx?.provider ?? "twitch";
   return buildUnit(widget, "custom", {
     content: {
-      codeId: String(widget.id),
+      // SE widget ids are integers unique only within a single SE overlay
+      // (1, 2, 3…). Using them as Lumia codeIds would collide across
+      // imports — codeId is the scoping key for variables, storage, and
+      // event listeners. Mint a fresh nanoid so every imported widget
+      // has its own scope.
+      codeId: nanoid2(),
       html: v.html ?? "",
       css: v.css ?? "",
       js: v.js ?? "",
       configs: translateConfigs(fields),
       data: fieldData ?? {},
-      flavor: "streamelements"
+      flavor: "streamelements",
+      // Native field on the Custom module content. The compatibility
+      // shim in Embed.tsx reads this to pick the right listener-name
+      // mapping table when forwarding Lumia events into the iframe as
+      // `onEventReceived` payloads. Default 'twitch' matches the shim's
+      // historical default so legacy imports keep working.
+      sourceProvider: provider
     }
   }, ctx);
 }
@@ -1549,7 +1563,21 @@ 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,
     content: {
       version: 1,
       type: "countdown",
@@ -1558,6 +1586,7 @@ function mapTimer(widget, ctx) {
       showMilliseconds: false,
       endAnimation: "",
       hideAfter: 0,
+      highlightColor: "inherit",
       messageAfterCountdown: translateSeText(v.messageAfterCountdown ?? ""),
       changeMessageAfter: !!v.changeMessageAfterCountdown,
       countDate: hasValidAbsoluteDate && (!!v.exactTime || !!v.datePicker || !!absoluteDate),
@@ -2379,7 +2408,7 @@ function guessMime(name) {
 }
 
 // src/se-import/transplant.ts
-import { nanoid as nanoid2 } from "nanoid";
+import { nanoid as nanoid3 } from "nanoid";
 function cloneModuleForTransplant(srcModule, newId) {
   const clonedContent = srcModule.content ? structuredClone(srcModule.content) : srcModule.content;
   if (srcModule.settings?.type === "custom" && clonedContent) {
@@ -2397,7 +2426,7 @@ function transplantLayer(source, sourceLayerId) {
   const srcLayer = layers.find((l) => l.id === sourceLayerId);
   const srcModule = modules[sourceLayerId];
   if (!srcLayer || !srcModule) return null;
-  const rootNewId = nanoid2();
+  const rootNewId = nanoid3();
   if (srcLayer.type !== "group") {
     const layer = { ...srcLayer, id: rootNewId };
     const module = cloneModuleForTransplant(srcModule, rootNewId);
@@ -2415,7 +2444,7 @@ function transplantLayer(source, sourceLayerId) {
       if (seen.has(child.id)) continue;
       seen.add(child.id);
       descendants.push(child);
-      idRemap.set(child.id, nanoid2());
+      idRemap.set(child.id, nanoid3());
       if (child.type === "group") queue.push(child.id);
     }
   }
@@ -7164,7 +7193,7 @@ function importSEBootstrap(bootstrap) {
     if (w.type !== "se-widget-group") continue;
     const uid = w.variables?.uid;
     if (typeof uid !== "string") continue;
-    const lumiaGroupId = nanoid3();
+    const lumiaGroupId = nanoid4();
     seUidToLumiaGroupId[uid] = lumiaGroupId;
     groupWidgetByUid[uid] = w;
   }

package/package.json

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