@lumiastream/ui 0.5.6 → 0.5.8

package/dist/index.js

@@ -4126,7 +4126,7 @@ function mapText(widget, ctx) {
         fontWeight: seCss["font-weight"] ?? "bold",
         color: seCss["color"] ?? "#ffffff",
         textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-        lineHeight: seCss["line-height"] ?? "normal",
+        lineHeight: seCss["line-height"] ?? 1.5,
         background: "transparent",
         ...seExtraTextCss(seCss, widget.text?.scrolling)
       }
@@ -4245,7 +4245,7 @@ function mapReadout(widget, fallbackVar, ctx) {
         fontWeight: seCss["font-weight"] ?? "bold",
         color: seCss["color"] ?? "#ffffff",
         textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-        lineHeight: seCss["line-height"] ?? "normal",
+        lineHeight: seCss["line-height"] ?? 1.5,
         background: "transparent",
         ...seExtraTextCss(seCss, widget.text?.scrolling)
       }
@@ -5117,27 +5117,22 @@ var EVENTLIST_DEFAULT_MODULE = {
 };
 
 // src/se-import/mappers/misc.ts
-function mapChatboxTheme(seTheme) {
-  const t = (seTheme ?? "").toString().toLowerCase();
-  if (!t || t === "default") return "simple";
-  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly")) return "bubbly";
-  if (t.includes("glass") || t.includes("transparent")) return "glass";
-  if (t.includes("boxy") || t.includes("checker")) return "boxy";
-  if (t.includes("basic")) return "basic";
-  return "simple";
-}
 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";
 }
+function isDarkSurfaceSeTheme(seTheme) {
+  const t = (seTheme ?? "").toString().toLowerCase();
+  return t.includes("dark") || t.includes("boxy") || t.includes("checker") || t.includes("black");
+}
 var KAPPAGEN_EVENT_CATEGORIES = {
   tip: [LumiaEventListTypes.DONATION],
   cheer: [
@@ -5169,96 +5164,72 @@ function kappagenAlertTriggersFor(seEvent, provider) {
   const fallback = kappagenKeyFor(seEvent, provider);
   return fallback ? [fallback] : [];
 }
-function paddingShorthand(message) {
-  const pick = (key) => {
-    const raw = message?.[key];
-    if (raw == null || raw === "") return null;
-    const n = typeof raw === "number" ? raw : parseFloat(String(raw));
-    return Number.isFinite(n) ? n : null;
-  };
-  const t = pick("padding-top");
-  const r = pick("padding-right");
-  const b = pick("padding-bottom");
-  const l = pick("padding-left");
-  if (t == null && r == null && b == null && l == null) return void 0;
-  const px = (n) => `${n ?? 0}px`;
-  return `${px(t)} ${px(r)} ${px(b)} ${px(l)}`;
-}
 function mapChatbox(widget, ctx) {
   const chatboxDefaults = CHATBOX_DEFAULT_MODULE.content;
   const chatboxVersion = CHATBOX_DEFAULT_MODULE.version;
   const v = widget.variables ?? {};
   const textCss = widget.text?.css ?? {};
   const messageCss = textCss.message ?? {};
-  const isPermanent = v.fadeOut === true || v.permanent === true || v.showMessagesPermanently === true || v.displayPermanent === true || // SE CustomChat uses `hideAfter: 999` as the "never hide" sentinel; also
-  // accept any falsy / non-positive value defensively.
-  v.hideAfter === false || typeof v.hideAfter === "number" && (v.hideAfter <= 0 || v.hideAfter >= 999);
+  const messageWins = (key) => {
+    const m = messageCss[key];
+    if (typeof m === "string" && m.length > 0) return m;
+    if (typeof m === "number" && m > 0) return m;
+    return textCss[key];
+  };
+  const isPermanent = v.fadeOut === true || v.permanent === true || v.showMessagesPermanently === true || v.displayPermanent === true || v.hideAfter === false || typeof v.hideAfter === "number" && (v.hideAfter <= 0 || v.hideAfter >= 999);
   const DEFAULT_FADE_SECONDS = 30;
   const fadeOutSeconds = isPermanent ? 0 : typeof v.fadeOut === "number" && v.fadeOut > 0 ? v.fadeOut : typeof v.delay === "number" && v.delay > 0 ? v.delay : DEFAULT_FADE_SECONDS;
-  const messagePadding = paddingShorthand(messageCss);
   const DEFAULT_CHATBOX_FONT_SIZE = 14;
   const moduleCss = {};
-  if (textCss["font-family"] != null) moduleCss.fontFamily = textCss["font-family"];
-  moduleCss.fontSize = textCss["font-size"] != null ? textCss["font-size"] : DEFAULT_CHATBOX_FONT_SIZE;
-  if (textCss["color"] != null) moduleCss.color = textCss["color"];
-  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
-  if (textCss["text-shadow"] != null) moduleCss.textShadow = textCss["text-shadow"];
-  if (textCss["text-align"] != null) moduleCss.textAlign = textCss["text-align"];
+  const fontFamily = messageWins("font-family");
+  if (fontFamily != null) moduleCss.fontFamily = fontFamily;
+  const fontSize = messageWins("font-size");
+  moduleCss.fontSize = fontSize != null ? fontSize : DEFAULT_CHATBOX_FONT_SIZE;
+  const rawColor = messageWins("color");
+  const isSeDefaultColor = rawColor == null || typeof rawColor === "string" && (rawColor === "" || rawColor.toLowerCase() === "#fff" || rawColor.toLowerCase() === "#ffffff");
+  if (!isSeDefaultColor) {
+    moduleCss.color = rawColor;
+  } else if (!isDarkSurfaceSeTheme(v.theme)) {
+    moduleCss.color = "rgba(0, 0, 0, 0.9)";
+  } else if (rawColor != null) {
+    moduleCss.color = rawColor;
+  }
+  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;
+  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"];
-  if (messagePadding) moduleCss.padding = messagePadding;
   const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : defaultChatboxBackgroundForSeTheme(v.theme);
   moduleCss.background = messageBackground;
-  const messageFontFamily = typeof messageCss["font-family"] === "string" && messageCss["font-family"].length > 0 ? messageCss["font-family"] : void 0;
   const highlightBackground = v.highlight && typeof v.highlight === "object" && typeof v.highlight["background"] === "string" ? v.highlight["background"] : void 0;
   const accentColor = highlightBackground && highlightBackground.length > 0 ? highlightBackground : void 0;
   return buildUnit(
     widget,
     "chatbox",
     {
-      // Stamp the module version from the authoritative defaults so
-      // Overlay-UI's per-module Settings.tsx migration check
-      // (`module?.version !== currentVersion`) treats this import as
-      // already-current. Without this, every freshly-imported chatbox
-      // would trip the migration toast on first open even though the
-      // content is already complete.
       version: chatboxVersion,
-      // Visual styling (font / color / padding etc) lives on module.css, not
-      // content. Lumia's TextStyle settings panel + the chatbox renderer both
-      // read from here.
       css: moduleCss,
       content: {
-        // `chatboxDefaults` resolves host-injected first (preferred), then
-        // the local snapshot — see the top of this function. Spreading it
-        // here guarantees every field the chatbox renderer expects is
-        // present (`type`, `sites`, `useAnimatedEmotes`, etc.); the
-        // SE-specific override block below wins for the opinions that
-        // differ from a fresh-add.
         ...chatboxDefaults,
-        // ─── SE-specific overrides ────────────────────────────────────────
-        // The fresh-Lumia defaults assume the streamer is creating a new
-        // chatbox; SE-imported ones have opinions that differ. Override
-        // only those.
-        theme: mapChatboxTheme(v.theme),
+        theme: "simple",
         fadeOutAfterDelay: fadeOutSeconds > 0,
         fadeOutDelayTime: fadeOutSeconds,
-        ignoredList: Array.isArray(v.ignored) ? v.ignored : [],
-        // SE chat widgets default to showing avatars + site icons + tight
-        // line wrapping; Lumia's fresh default is the opposite.
         showAvatar: true,
-        showSiteIcon: true,
-        breakLine: false,
-        clickableChatterProfiles: true,
-        hideAlertMessage: false,
-        // Carry the SE message-level font override and the streamer's
-        // accent color across so the imported chatbox looks right at
-        // first paint. Background lives on `module.css.background`
-        // above — `content.background` was a dead write the renderer
-        // never read.
-        ...messageFontFamily ? { messageFontFamily } : {},
-        // Twitch primary color override — deep-merge into the full
-        // chatboxStreamingSite map from the default (otherwise we'd
-        // clobber the youtube/kick/facebook/tiktok/discord entries the
-        // chatbox renderer reads for per-platform theming).
+        // 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,
@@ -5270,18 +5241,7 @@ function mapChatbox(widget, ctx) {
               }
             }
           }
-        } : {},
-        // Source-side knobs preserved under the generic importMeta envelope —
-        // no native Lumia equivalent today. `messageDelay` is per-message
-        // hold, `initialDelay` is the show-after-connect delay, and we
-        // stash the raw highlight block + text css for any future feature
-        // that wants the fine-grained styling.
-        importMeta: buildImportMeta(widget, {
-          messageDelay: v.messageDelay,
-          initialDelay: v.delay,
-          highlightUsers: v.highlight,
-          textCss
-        })
+        } : {}
       }
     },
     ctx
@@ -5799,7 +5759,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

@@ -1046,7 +1046,7 @@ function mapText(widget, ctx) {
         fontWeight: seCss["font-weight"] ?? "bold",
         color: seCss["color"] ?? "#ffffff",
         textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-        lineHeight: seCss["line-height"] ?? "normal",
+        lineHeight: seCss["line-height"] ?? 1.5,
         background: "transparent",
         ...seExtraTextCss(seCss, widget.text?.scrolling)
       }
@@ -1165,7 +1165,7 @@ function mapReadout(widget, fallbackVar, ctx) {
         fontWeight: seCss["font-weight"] ?? "bold",
         color: seCss["color"] ?? "#ffffff",
         textShadow: seCss["text-shadow"] ?? "rgb(0, 0, 0) 1px 1px 1px",
-        lineHeight: seCss["line-height"] ?? "normal",
+        lineHeight: seCss["line-height"] ?? 1.5,
         background: "transparent",
         ...seExtraTextCss(seCss, widget.text?.scrolling)
       }
@@ -2037,27 +2037,22 @@ var EVENTLIST_DEFAULT_MODULE = {
 };
 
 // src/se-import/mappers/misc.ts
-function mapChatboxTheme(seTheme) {
-  const t = (seTheme ?? "").toString().toLowerCase();
-  if (!t || t === "default") return "simple";
-  if (t.includes("flipin") || t.includes("bubble") || t.includes("bubbly")) return "bubbly";
-  if (t.includes("glass") || t.includes("transparent")) return "glass";
-  if (t.includes("boxy") || t.includes("checker")) return "boxy";
-  if (t.includes("basic")) return "basic";
-  return "simple";
-}
 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";
 }
+function isDarkSurfaceSeTheme(seTheme) {
+  const t = (seTheme ?? "").toString().toLowerCase();
+  return t.includes("dark") || t.includes("boxy") || t.includes("checker") || t.includes("black");
+}
 var KAPPAGEN_EVENT_CATEGORIES = {
   tip: [LumiaEventListTypes.DONATION],
   cheer: [
@@ -2089,96 +2084,72 @@ function kappagenAlertTriggersFor(seEvent, provider) {
   const fallback = kappagenKeyFor(seEvent, provider);
   return fallback ? [fallback] : [];
 }
-function paddingShorthand(message) {
-  const pick = (key) => {
-    const raw = message?.[key];
-    if (raw == null || raw === "") return null;
-    const n = typeof raw === "number" ? raw : parseFloat(String(raw));
-    return Number.isFinite(n) ? n : null;
-  };
-  const t = pick("padding-top");
-  const r = pick("padding-right");
-  const b = pick("padding-bottom");
-  const l = pick("padding-left");
-  if (t == null && r == null && b == null && l == null) return void 0;
-  const px = (n) => `${n ?? 0}px`;
-  return `${px(t)} ${px(r)} ${px(b)} ${px(l)}`;
-}
 function mapChatbox(widget, ctx) {
   const chatboxDefaults = CHATBOX_DEFAULT_MODULE.content;
   const chatboxVersion = CHATBOX_DEFAULT_MODULE.version;
   const v = widget.variables ?? {};
   const textCss = widget.text?.css ?? {};
   const messageCss = textCss.message ?? {};
-  const isPermanent = v.fadeOut === true || v.permanent === true || v.showMessagesPermanently === true || v.displayPermanent === true || // SE CustomChat uses `hideAfter: 999` as the "never hide" sentinel; also
-  // accept any falsy / non-positive value defensively.
-  v.hideAfter === false || typeof v.hideAfter === "number" && (v.hideAfter <= 0 || v.hideAfter >= 999);
+  const messageWins = (key) => {
+    const m = messageCss[key];
+    if (typeof m === "string" && m.length > 0) return m;
+    if (typeof m === "number" && m > 0) return m;
+    return textCss[key];
+  };
+  const isPermanent = v.fadeOut === true || v.permanent === true || v.showMessagesPermanently === true || v.displayPermanent === true || v.hideAfter === false || typeof v.hideAfter === "number" && (v.hideAfter <= 0 || v.hideAfter >= 999);
   const DEFAULT_FADE_SECONDS = 30;
   const fadeOutSeconds = isPermanent ? 0 : typeof v.fadeOut === "number" && v.fadeOut > 0 ? v.fadeOut : typeof v.delay === "number" && v.delay > 0 ? v.delay : DEFAULT_FADE_SECONDS;
-  const messagePadding = paddingShorthand(messageCss);
   const DEFAULT_CHATBOX_FONT_SIZE = 14;
   const moduleCss = {};
-  if (textCss["font-family"] != null) moduleCss.fontFamily = textCss["font-family"];
-  moduleCss.fontSize = textCss["font-size"] != null ? textCss["font-size"] : DEFAULT_CHATBOX_FONT_SIZE;
-  if (textCss["color"] != null) moduleCss.color = textCss["color"];
-  if (textCss["font-weight"] != null) moduleCss.fontWeight = textCss["font-weight"];
-  if (textCss["text-shadow"] != null) moduleCss.textShadow = textCss["text-shadow"];
-  if (textCss["text-align"] != null) moduleCss.textAlign = textCss["text-align"];
+  const fontFamily = messageWins("font-family");
+  if (fontFamily != null) moduleCss.fontFamily = fontFamily;
+  const fontSize = messageWins("font-size");
+  moduleCss.fontSize = fontSize != null ? fontSize : DEFAULT_CHATBOX_FONT_SIZE;
+  const rawColor = messageWins("color");
+  const isSeDefaultColor = rawColor == null || typeof rawColor === "string" && (rawColor === "" || rawColor.toLowerCase() === "#fff" || rawColor.toLowerCase() === "#ffffff");
+  if (!isSeDefaultColor) {
+    moduleCss.color = rawColor;
+  } else if (!isDarkSurfaceSeTheme(v.theme)) {
+    moduleCss.color = "rgba(0, 0, 0, 0.9)";
+  } else if (rawColor != null) {
+    moduleCss.color = rawColor;
+  }
+  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;
+  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"];
-  if (messagePadding) moduleCss.padding = messagePadding;
   const messageBackground = typeof messageCss["background"] === "string" && messageCss["background"].length > 0 ? messageCss["background"] : defaultChatboxBackgroundForSeTheme(v.theme);
   moduleCss.background = messageBackground;
-  const messageFontFamily = typeof messageCss["font-family"] === "string" && messageCss["font-family"].length > 0 ? messageCss["font-family"] : void 0;
   const highlightBackground = v.highlight && typeof v.highlight === "object" && typeof v.highlight["background"] === "string" ? v.highlight["background"] : void 0;
   const accentColor = highlightBackground && highlightBackground.length > 0 ? highlightBackground : void 0;
   return buildUnit(
     widget,
     "chatbox",
     {
-      // Stamp the module version from the authoritative defaults so
-      // Overlay-UI's per-module Settings.tsx migration check
-      // (`module?.version !== currentVersion`) treats this import as
-      // already-current. Without this, every freshly-imported chatbox
-      // would trip the migration toast on first open even though the
-      // content is already complete.
       version: chatboxVersion,
-      // Visual styling (font / color / padding etc) lives on module.css, not
-      // content. Lumia's TextStyle settings panel + the chatbox renderer both
-      // read from here.
       css: moduleCss,
       content: {
-        // `chatboxDefaults` resolves host-injected first (preferred), then
-        // the local snapshot — see the top of this function. Spreading it
-        // here guarantees every field the chatbox renderer expects is
-        // present (`type`, `sites`, `useAnimatedEmotes`, etc.); the
-        // SE-specific override block below wins for the opinions that
-        // differ from a fresh-add.
         ...chatboxDefaults,
-        // ─── SE-specific overrides ────────────────────────────────────────
-        // The fresh-Lumia defaults assume the streamer is creating a new
-        // chatbox; SE-imported ones have opinions that differ. Override
-        // only those.
-        theme: mapChatboxTheme(v.theme),
+        theme: "simple",
         fadeOutAfterDelay: fadeOutSeconds > 0,
         fadeOutDelayTime: fadeOutSeconds,
-        ignoredList: Array.isArray(v.ignored) ? v.ignored : [],
-        // SE chat widgets default to showing avatars + site icons + tight
-        // line wrapping; Lumia's fresh default is the opposite.
         showAvatar: true,
-        showSiteIcon: true,
-        breakLine: false,
-        clickableChatterProfiles: true,
-        hideAlertMessage: false,
-        // Carry the SE message-level font override and the streamer's
-        // accent color across so the imported chatbox looks right at
-        // first paint. Background lives on `module.css.background`
-        // above — `content.background` was a dead write the renderer
-        // never read.
-        ...messageFontFamily ? { messageFontFamily } : {},
-        // Twitch primary color override — deep-merge into the full
-        // chatboxStreamingSite map from the default (otherwise we'd
-        // clobber the youtube/kick/facebook/tiktok/discord entries the
-        // chatbox renderer reads for per-platform theming).
+        // 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,
@@ -2190,18 +2161,7 @@ function mapChatbox(widget, ctx) {
               }
             }
           }
-        } : {},
-        // Source-side knobs preserved under the generic importMeta envelope —
-        // no native Lumia equivalent today. `messageDelay` is per-message
-        // hold, `initialDelay` is the show-after-connect delay, and we
-        // stash the raw highlight block + text css for any future feature
-        // that wants the fine-grained styling.
-        importMeta: buildImportMeta(widget, {
-          messageDelay: v.messageDelay,
-          initialDelay: v.delay,
-          highlightUsers: v.highlight,
-          textCss
-        })
+        } : {}
       }
     },
     ctx
@@ -2719,7 +2679,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.6",
+  "version": "0.5.8",
   "author": "Lumia Stream",
   "license": "ISC",
   "description": "Lumia UI Kit",