@lumiastream/ui 0.2.8-alpha.5 → 0.2.8-alpha.6

package/dist/index.d.ts

@@ -498,6 +498,7 @@ type OverlayLayerBounds = {
     zIndex?: number;
     matrix?: string;
     clipPath?: string;
+    autoSize?: boolean;
 };
 type OverlayLayerState = {
     id: string;
@@ -606,6 +607,7 @@ interface SEText {
     scrolling?: {
         direction?: string;
         speed?: number;
+        enabled?: boolean;
     };
     css?: Record<string, unknown>;
 }

package/dist/index.js

@@ -3237,11 +3237,21 @@ function listenerToLumiaVariable(listener) {
   return m[listener] ?? listener.replace(/-/g, "_");
 }
 function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
+  let widthIsAuto = false;
+  let heightIsAuto = false;
   const toPx = (v, fallback, axis) => {
-    if (v == null) return fallback;
+    if (v == null) {
+      if (axis === "width") widthIsAuto = true;
+      else if (axis === "height") heightIsAuto = true;
+      return fallback;
+    }
     if (typeof v === "number") return v;
     const s = v.trim();
-    if (s === "auto" || s === "") return fallback;
+    if (s === "auto" || s === "") {
+      if (axis === "width") widthIsAuto = true;
+      else if (axis === "height") heightIsAuto = true;
+      return fallback;
+    }
     if (s.endsWith("%")) {
       const pct = parseFloat(s);
       if (canvas && axis && Number.isFinite(pct)) {
@@ -3255,6 +3265,7 @@ function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
   };
   const width = toPx(css.width, defaults.width, "width");
   const height = toPx(css.height, defaults.height, "height");
+  const autoSize = widthIsAuto || heightIsAuto;
   let x = toPx(css.left, 0, "width");
   let y = toPx(css.top, 0, "height");
   if (typeof css.transform === "string" && css.transform.includes("translate")) {
@@ -3280,7 +3291,8 @@ function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
     width,
     height,
     opacity: css.opacity ?? 1,
-    zIndex: css["z-index"] ?? 0
+    zIndex: css["z-index"] ?? 0,
+    autoSize
   };
 }
 var LUMIA_DEFAULT_SIZES = {
@@ -3324,7 +3336,7 @@ function translateVariationCondition(seType, seCondition, requirement) {
   if (seCondition === "ATLEAST" && requirement != null) {
     return { conditionType: "GREATER_NUMBER", condition: requirement };
   }
-  return null;
+  return { conditionType: "RANDOM", condition: 100 };
 }
 var LUMIA_LAYOUTS = /* @__PURE__ */ new Set(["column", "row", "onlyImage", "onlyText", "imageOver", "textOver"]);
 function translateLayout(seLayout) {
@@ -3352,7 +3364,11 @@ function buildUnit(widget, lumiaType, moduleExtras) {
       height: bounds.height,
       scale: [1, 1],
       opacity: bounds.opacity,
-      zIndex: bounds.zIndex
+      zIndex: bounds.zIndex,
+      // Carried over only when at least one axis was `auto` in the
+      // source SE widget — text layers in particular want this so they
+      // don't import as a 600x200 empty box.
+      ...bounds.autoSize ? { autoSize: true } : {}
     }
   };
   const module = {
@@ -3374,6 +3390,19 @@ function buildUnit(widget, lumiaType, moduleExtras) {
 }
 
 // src/se-import/mappers/basic.ts
+function seExtraTextCss(seCss, scrolling) {
+  const extra = {};
+  if (typeof seCss["text-decoration"] === "string") extra.textDecoration = seCss["text-decoration"];
+  if (typeof seCss["text-transform"] === "string") extra.textTransform = seCss["text-transform"];
+  if (seCss["-webkit-text-stroke-color"]) extra["-webkit-text-stroke-color"] = seCss["-webkit-text-stroke-color"];
+  if (seCss["-webkit-text-stroke-width"] != null) extra["-webkit-text-stroke-width"] = seCss["-webkit-text-stroke-width"];
+  if (scrolling?.enabled) {
+    extra.scroll = true;
+    const speed = Number(scrolling.speed);
+    if (Number.isFinite(speed) && speed > 0) extra.scrollSpeed = speed * 1e3;
+  }
+  return extra;
+}
 function mapText(widget) {
   const value = translateSeText(widget.text?.value ?? "");
   const seCss = widget.text?.css ?? {};
@@ -3390,7 +3419,8 @@ function mapText(widget) {
       color: seCss["color"] ?? "#ffffff",
       textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
       lineHeight: seCss["line-height"] ?? 1,
-      background: "transparent"
+      background: "transparent",
+      ...seExtraTextCss(seCss, widget.text?.scrolling)
     }
   });
 }
@@ -3443,7 +3473,8 @@ function mapReadout(widget, fallbackVar) {
       color: seCss["color"] ?? "#ffffff",
       textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
       lineHeight: seCss["line-height"] ?? 1,
-      background: "transparent"
+      background: "transparent",
+      ...seExtraTextCss(seCss, widget.text?.scrolling)
     }
   });
 }
@@ -3521,7 +3552,7 @@ function buildAlertEvent(seEvent, seEventType) {
   const textShadow = shadowEnabled ? importedTextShadow : "none";
   const marginTopRaw = Number(css["margin-top"]);
   const pushTextUp = Number.isFinite(marginTopRaw) ? -marginTopRaw : 0;
-  const variations = (seEvent.variations ?? []).map((variation) => buildAlertVariation(variation, seEventType)).filter((v) => v != null);
+  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 {
     on: seEvent.enabled !== false,
@@ -3618,10 +3649,12 @@ function buildAlertEvent(seEvent, seEventType) {
     variations
   };
 }
-function buildAlertVariation(v, seEventType) {
+function buildAlertVariation(v, seEventType, parentSettings) {
   const translated = translateVariationCondition(v.type ?? null, v.condition ?? null, v.requirement ?? null);
   if (!translated) return null;
-  const base = buildAlertEvent(v.settings, seEventType);
+  const { variations: _parentVariations, ...parentInheritable } = parentSettings ?? {};
+  const mergedSettings = deepMergeSeSettings(parentSettings ? parentInheritable : void 0, v.settings);
+  const base = buildAlertEvent(mergedSettings, seEventType);
   return {
     name: v.name ?? "Variation",
     on: v.enabled !== false,
@@ -3632,6 +3665,22 @@ function buildAlertVariation(v, seEventType) {
     ...base
   };
 }
+function deepMergeSeSettings(parent, variation) {
+  if (parent == null) return variation;
+  if (variation == null) return parent;
+  if (typeof parent !== "object" || typeof variation !== "object") return variation;
+  if (Array.isArray(parent) || Array.isArray(variation)) return variation;
+  const out = { ...parent };
+  for (const [k, vv] of Object.entries(variation)) {
+    if (vv === void 0) continue;
+    if (vv && typeof vv === "object" && !Array.isArray(vv) && parent[k] && typeof parent[k] === "object" && !Array.isArray(parent[k])) {
+      out[k] = deepMergeSeSettings(parent[k], vv);
+    } else {
+      out[k] = vv;
+    }
+  }
+  return out;
+}
 function mapAlertBox(widget, opts = {}) {
   const v = widget.variables ?? {};
   const events = {};
@@ -3672,8 +3721,11 @@ function mapGoal(widget) {
   return buildUnit(widget, "goal", {
     content: {
       version: 1,
-      // Matches GoalTypes enum in components/Modules/Views/Goal/types.ts.
-      type: "bar",
+      // `slim` reproduces SE's default goal look — label above a thin
+      // track, with `0` / `goalAmount` anchoring the bar's edges and the
+      // live `current` floating at the percentage position. See
+      // components/Modules/Views/Goal/types.ts:GoalTypes.SLIM.
+      type: "slim",
       label: translateSeText(v.title ?? "Goal"),
       subLabel: "",
       // The Goal module renders this template literal with {{current}} + {{goal}} substituted.

package/package.json

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