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

package/dist/index.d.ts

@@ -498,7 +498,8 @@ type OverlayLayerBounds = {
     zIndex?: number;
     matrix?: string;
     clipPath?: string;
-    autoSize?: boolean;
+    autoWidth?: boolean;
+    autoHeight?: boolean;
 };
 type OverlayLayerState = {
     id: string;

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,
@@ -3265,7 +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 autoSize = widthIsAuto || heightIsAuto;
+  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")) {
@@ -3292,7 +3293,8 @@ function seCssToBounds(css, defaults = { width: 600, height: 200 }, canvas) {
     height,
     opacity: css.opacity ?? 1,
     zIndex: css["z-index"] ?? 0,
-    autoSize
+    autoWidth,
+    autoHeight
   };
 }
 var LUMIA_DEFAULT_SIZES = {
@@ -3302,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 },
@@ -3365,10 +3371,12 @@ function buildUnit(widget, lumiaType, moduleExtras) {
       scale: [1, 1],
       opacity: bounds.opacity,
       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 } : {}
+      // 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 = {
@@ -3399,7 +3407,7 @@ function seExtraTextCss(seCss, scrolling) {
   if (scrolling?.enabled) {
     extra.scroll = true;
     const speed = Number(scrolling.speed);
-    if (Number.isFinite(speed) && speed > 0) extra.scrollSpeed = speed * 1e3;
+    if (Number.isFinite(speed) && speed > 0) extra.scrollSpeed = speed * 600;
   }
   return extra;
 }
@@ -3984,13 +3992,38 @@ function mapCredits(widget) {
     }
   });
 }
+function inferSlideshowMediaType(mime, url) {
+  if (typeof mime === "string") {
+    if (mime.startsWith("video/")) return "video";
+    if (mime.startsWith("image/")) return "image";
+  }
+  const ext = url.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase() ?? "";
+  if (["mp4", "webm", "mov", "m4v", "ogv"].includes(ext)) return "video";
+  return "image";
+}
+function nameFromUrl(url) {
+  try {
+    const path = url.split("?")[0].split("#")[0];
+    return decodeURIComponent(path.split("/").pop() ?? url);
+  } catch {
+    return url;
+  }
+}
 function mapSlideshow(widget) {
   const v = widget.variables ?? {};
-  const sources = (v.images ?? []).map((i) => typeof i === "string" ? i : i.src ?? "").filter(Boolean);
+  const items = (v.images ?? []).map((raw) => {
+    const url = typeof raw === "string" ? raw : raw.url ?? raw.src ?? "";
+    if (!url) return null;
+    return {
+      type: inferSlideshowMediaType(typeof raw === "object" ? raw?.type : void 0, url),
+      src: url,
+      name: nameFromUrl(url)
+    };
+  }).filter((item) => item !== null);
   const seAnim = typeof v.animation === "object" && v.animation !== null ? v.animation : {};
   return buildUnit(widget, "slideshow", {
     content: {
-      items: sources.map((src) => ({ src })),
+      src: items,
       // `interval` of 0 = "rapid cycle" in SE (no delay between images); Lumia's
       // `imageDuration` is the total ms per image. Distinguish three cases:
       //   - undefined → use 5000ms default
@@ -4001,7 +4034,10 @@ function mapSlideshow(widget) {
       loopDelay: 0,
       delay: 0,
       playAudio: !!v.playAudio,
-      random: !!v.random,
+      // Lumia's renderer reads `content.shuffle` (Slideshow/index.tsx:21);
+      // mirroring SE's `random` to that name keeps "play in random order"
+      // working out of the box.
+      shuffle: !!v.random,
       animation: {
         enterAnimation: typeof v.animation === "string" ? v.animation : seAnim.in ?? "fadeIn",
         exitAnimation: typeof v.animation === "string" ? v.animation : seAnim.out ?? "fadeOut",
@@ -5004,6 +5040,7 @@ var SEAuthError = class extends Error {
     this.code = code;
     this.name = "SEAuthError";
   }
+  code;
 };
 function decodeBase64Url(s) {
   const b64 = s.replace(/-/g, "+").replace(/_/g, "/");
@@ -5045,6 +5082,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.6",
+	"version": "0.2.8-alpha.8",
 	"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"
 	}
 }