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

package/dist/index.d.ts

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

package/dist/index.js

@@ -2292,7 +2292,7 @@ function variableCompletionOptions(context, variables) {
 }
 
 // src/utils/codeMirrorlinterOptions.ts
-import * as globals from "globals";
+import globals from "globals";
 var browserGlobals = Object.fromEntries(
   Object.entries(globals.browser).map(([key, value]) => [
     key,
@@ -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,8 @@ 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 autoWidth = widthIsAuto;
+  const autoHeight = 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 +3292,9 @@ 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,
+    autoWidth,
+    autoHeight
   };
 }
 var LUMIA_DEFAULT_SIZES = {
@@ -3290,7 +3304,11 @@ var LUMIA_DEFAULT_SIZES = {
   audio: { width: 200, height: 200 },
   slideshow: { width: 400, height: 220 },
   alert: { width: 700, height: 600 },
-  goal: { width: 740, height: 80 },
+  // 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 },
   timer: { width: 740, height: 80 },
   chatbox: { width: 375, height: 470 },
   eventlist: { width: 375, height: 470 },
@@ -3324,7 +3342,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 +3370,13 @@ function buildUnit(widget, lumiaType, moduleExtras) {
       height: bounds.height,
       scale: [1, 1],
       opacity: bounds.opacity,
-      zIndex: bounds.zIndex
+      zIndex: bounds.zIndex,
+      // Per-axis flags — only the SE axis that was actually `auto`
+      // collapses in render. The SE cheer goal is the canonical case:
+      // width: "700px" + height: "auto" → numeric width stays at 700,
+      // height collapses to content.
+      ...bounds.autoWidth ? { autoWidth: true } : {},
+      ...bounds.autoHeight ? { autoHeight: true } : {}
     }
   };
   const module = {
@@ -3374,6 +3398,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 * 600;
+  }
+  return extra;
+}
 function mapText(widget) {
   const value = translateSeText(widget.text?.value ?? "");
   const seCss = widget.text?.css ?? {};
@@ -3390,7 +3427,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 +3481,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 +3560,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 +3657,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 +3673,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 +3729,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.
@@ -4952,6 +5012,7 @@ var SEAuthError = class extends Error {
     this.code = code;
     this.name = "SEAuthError";
   }
+  code;
 };
 function decodeBase64Url(s) {
   const b64 = s.replace(/-/g, "+").replace(/_/g, "/");
@@ -4993,6 +5054,7 @@ var SEClient = class _SEClient {
   constructor(claims) {
     this.claims = claims;
   }
+  claims;
   static fromJwt(jwt) {
     return new _SEClient(decodeJwtPayload(jwt));
   }

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.2.8-alpha.5",
+	"version": "0.2.8-alpha.7",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",
-	"packageManager": "pnpm@10.32.1",
+	"packageManager": "npm@11.9.0",
 	"type": "module",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -23,23 +23,35 @@
 		"build": "tsup src/index.ts",
 		"build-storybook": "storybook build",
 		"watch": "tsup src/index.ts --watch",
-		"release": "changeset && changeset tag && pnpm build && pnpm publish",
-		"prepublishOnly": "pnpm build",
-		"postpublish": "pnpm store prune && node ./scripts/postpublish-install.mjs"
+		"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-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.8",
+		"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",
@@ -47,16 +59,11 @@
 		"vite": "^8.0.8"
 	},
 	"dependencies": {
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
 		"@lumiastream/lumia-translations": "1.15.4",
-		"@lumiastream/lumia-types": "^3.2.7",
-		"@mui/icons-material": "^9.0.0",
-		"@mui/material": "^9.0.0",
+		"@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",
-		"react-hook-form": "^7.73.1"
+		"react-best-gradient-color-picker": "^3.0.14"
 	}
 }