@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260625120328 → 0.8.1-dev.20260627063733

package/dist/index.js

@@ -5373,18 +5373,17 @@ var deviceToMediaQuery = (device) => {
     case "sm":
       return "(max-width: 480px)";
     case "md":
-      return "(max-width: 768px)";
+      return "(min-width: 481px) and (max-width: 768px)";
     case "lg":
       return "(min-width: 769px)";
-    // case "tv":
-    //   return "(min-width: 1920px)";
     default:
       return null;
   }
 };
 var DEVICE_ORDER = ["sm", "md", "lg", "tv"];
 var parseMaybeNumber = (value) => {
-  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value === "number")
+    return Number.isFinite(value) ? value : void 0;
   if (typeof value !== "string") return void 0;
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
@@ -5423,25 +5422,16 @@ var getNestedValue3 = (obj, path) => {
   if (!obj || !path) {
     return void 0;
   }
-  return path.split(".").reduce(
-    (current, key) => {
-      return current?.[key];
-    },
-    obj
-  );
+  return path.split(".").reduce((current, key) => {
+    return current?.[key];
+  }, obj);
 };
 var ImageGalleryNode = (props) => {
   const resolveImageUrl = (image) => {
     let imageUrl = image.imageUrl;
     if (image.datafield && props.dataitem) {
-      const fieldValue = getNestedValue3(
-        props.dataitem,
-        image.datafield
-      );
-      const resolvedAsset = resolveAssetUrl(
-        fieldValue,
-        image.tag
-      );
+      const fieldValue = getNestedValue3(props.dataitem, image.datafield);
+      const resolvedAsset = resolveAssetUrl(fieldValue, image.tag);
       if (resolvedAsset) {
         imageUrl = resolvedAsset;
       }
@@ -5475,7 +5465,13 @@ var ImageGalleryNode = (props) => {
       if (!src) return [];
       const media = deviceToMediaQuery(img.device);
       const posterUrl = resolvePosterUrl(img.posterUrl);
-      return [{ src, ...media ? { media } : {}, ...posterUrl ? { posterUrl } : {} }];
+      return [
+        {
+          src,
+          ...media ? { media } : {},
+          ...posterUrl ? { posterUrl } : {}
+        }
+      ];
     }),
     ...hlsImages.filter((img) => !img.device).map((img) => {
       const src = resolveImageUrl(img);
@@ -5489,9 +5485,10 @@ var ImageGalleryNode = (props) => {
   const hlsStyles = {};
   if (primaryHls?.height) hlsStyles.height = primaryHls.height;
   if (primaryHls?.width) hlsStyles.width = primaryHls.width;
-  if (primaryHls?.borderRadius) hlsStyles.borderRadius = primaryHls.borderRadius;
+  if (primaryHls?.borderRadius)
+    hlsStyles.borderRadius = primaryHls.borderRadius;
   const staticSources = staticImages.filter((img) => !!img.device);
-  const staticFallback = staticImages.find((img) => !img.device) ?? staticImages[0] ?? null;
+  const staticFallback = staticImages.find((img) => !img.device) ?? null;
   const FormatClass = {
     center: "justify-center",
     left: "justify-start",
@@ -5514,17 +5511,22 @@ var ImageGalleryNode = (props) => {
         styles: hlsStyles
       }
     ) }),
-    staticFallback && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("picture", { children: [
+    (staticFallback || staticSources.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: staticFallback ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("picture", { children: [
       DEVICE_ORDER.map((deviceKey) => {
-        const match = staticSources.find((img) => img.device === deviceKey);
-        if (!match) return null;
+        const match = staticSources.find(
+          (img) => img.device === deviceKey
+        );
+        if (!match) {
+          return null;
+        }
         const srcUrl = resolveImageUrl(match);
-        if (!srcUrl) return null;
-        const mediaQuery = deviceToMediaQuery(match.device);
+        if (!srcUrl) {
+          return null;
+        }
         return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "source",
           {
-            media: mediaQuery,
+            media: deviceToMediaQuery(match.device),
             srcSet: srcUrl,
             width: parseMaybeNumber(match.intrinsicWidth),
             height: parseMaybeNumber(match.intrinsicHeight)
@@ -5535,31 +5537,75 @@ var ImageGalleryNode = (props) => {
       (() => {
         const img = staticFallback;
         const imageUrl = resolveImageUrl(img);
-        if (!imageUrl) return null;
-        const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
-        const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
-        const alt = img.title || "Gallery image";
-        const styles = {};
-        if (img.height) styles.height = img.height;
-        if (img.width) styles.width = img.width;
-        if (img.borderRadius) styles.borderRadius = img.borderRadius;
-        return (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-            "img",
-            {
-              loading: "lazy",
-              style: styles,
-              className: "object-cover max-w-full",
-              src: imageUrl,
-              width: intrinsicWidth,
-              height: intrinsicHeight,
-              alt
-            }
-          )
+        if (!imageUrl) {
+          return null;
+        }
+        const styles = {
+          width: img.width || "auto",
+          height: img.height || "auto"
+        };
+        if (img.borderRadius) {
+          styles.borderRadius = img.borderRadius;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          "img",
+          {
+            loading: "lazy",
+            style: styles,
+            className: "object-cover max-w-full",
+            src: imageUrl,
+            width: parseMaybeNumber(img.intrinsicWidth),
+            height: parseMaybeNumber(img.intrinsicHeight),
+            alt: img.title ?? "Gallery image"
+          }
         );
       })()
-    ] }) })
+    ] }) : (
+      /* Case 2: Only device-specific images exist */
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: staticSources.map((img, index) => {
+        const imageUrl = resolveImageUrl(img);
+        if (!imageUrl) {
+          return null;
+        }
+        const styles = {
+          width: img.width || "auto",
+          height: img.height || "auto"
+        };
+        if (img.borderRadius) {
+          styles.borderRadius = img.borderRadius;
+        }
+        let display = "none";
+        switch (img.device) {
+          case "sm":
+            display = props.device === "sm" ? "block" : "none";
+            break;
+          case "md":
+            display = props.device === "md" ? "block" : "none";
+            break;
+          case "lg":
+            display = props.device === "lg" ? "block" : "none";
+            break;
+          default:
+            display = "block";
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          "img",
+          {
+            loading: "lazy",
+            src: imageUrl,
+            style: {
+              ...styles,
+              display
+            },
+            className: "object-cover max-w-full",
+            width: parseMaybeNumber(img.intrinsicWidth),
+            height: parseMaybeNumber(img.intrinsicHeight),
+            alt: img.title ?? "Gallery image"
+          },
+          index
+        );
+      }) })
+    ) })
   ] });
 };
 var ImageGalleryNode_default = ImageGalleryNode;

package/dist/index.mjs

@@ -3767,18 +3767,17 @@ var deviceToMediaQuery = (device) => {
     case "sm":
       return "(max-width: 480px)";
     case "md":
-      return "(max-width: 768px)";
+      return "(min-width: 481px) and (max-width: 768px)";
     case "lg":
       return "(min-width: 769px)";
-    // case "tv":
-    //   return "(min-width: 1920px)";
     default:
       return null;
   }
 };
 var DEVICE_ORDER = ["sm", "md", "lg", "tv"];
 var parseMaybeNumber = (value) => {
-  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value === "number")
+    return Number.isFinite(value) ? value : void 0;
   if (typeof value !== "string") return void 0;
   const n = Number(value);
   return Number.isFinite(n) ? n : void 0;
@@ -3817,25 +3816,16 @@ var getNestedValue3 = (obj, path) => {
   if (!obj || !path) {
     return void 0;
   }
-  return path.split(".").reduce(
-    (current, key) => {
-      return current?.[key];
-    },
-    obj
-  );
+  return path.split(".").reduce((current, key) => {
+    return current?.[key];
+  }, obj);
 };
 var ImageGalleryNode = (props) => {
   const resolveImageUrl = (image) => {
     let imageUrl = image.imageUrl;
     if (image.datafield && props.dataitem) {
-      const fieldValue = getNestedValue3(
-        props.dataitem,
-        image.datafield
-      );
-      const resolvedAsset = resolveAssetUrl(
-        fieldValue,
-        image.tag
-      );
+      const fieldValue = getNestedValue3(props.dataitem, image.datafield);
+      const resolvedAsset = resolveAssetUrl(fieldValue, image.tag);
       if (resolvedAsset) {
         imageUrl = resolvedAsset;
       }
@@ -3869,7 +3859,13 @@ var ImageGalleryNode = (props) => {
       if (!src) return [];
       const media = deviceToMediaQuery(img.device);
       const posterUrl = resolvePosterUrl(img.posterUrl);
-      return [{ src, ...media ? { media } : {}, ...posterUrl ? { posterUrl } : {} }];
+      return [
+        {
+          src,
+          ...media ? { media } : {},
+          ...posterUrl ? { posterUrl } : {}
+        }
+      ];
     }),
     ...hlsImages.filter((img) => !img.device).map((img) => {
       const src = resolveImageUrl(img);
@@ -3883,9 +3879,10 @@ var ImageGalleryNode = (props) => {
   const hlsStyles = {};
   if (primaryHls?.height) hlsStyles.height = primaryHls.height;
   if (primaryHls?.width) hlsStyles.width = primaryHls.width;
-  if (primaryHls?.borderRadius) hlsStyles.borderRadius = primaryHls.borderRadius;
+  if (primaryHls?.borderRadius)
+    hlsStyles.borderRadius = primaryHls.borderRadius;
   const staticSources = staticImages.filter((img) => !!img.device);
-  const staticFallback = staticImages.find((img) => !img.device) ?? staticImages[0] ?? null;
+  const staticFallback = staticImages.find((img) => !img.device) ?? null;
   const FormatClass = {
     center: "justify-center",
     left: "justify-start",
@@ -3908,17 +3905,22 @@ var ImageGalleryNode = (props) => {
         styles: hlsStyles
       }
     ) }),
-    staticFallback && /* @__PURE__ */ jsx58(Fragment8, { children: /* @__PURE__ */ jsxs31("picture", { children: [
+    (staticFallback || staticSources.length > 0) && /* @__PURE__ */ jsx58(Fragment8, { children: staticFallback ? /* @__PURE__ */ jsxs31("picture", { children: [
       DEVICE_ORDER.map((deviceKey) => {
-        const match = staticSources.find((img) => img.device === deviceKey);
-        if (!match) return null;
+        const match = staticSources.find(
+          (img) => img.device === deviceKey
+        );
+        if (!match) {
+          return null;
+        }
         const srcUrl = resolveImageUrl(match);
-        if (!srcUrl) return null;
-        const mediaQuery = deviceToMediaQuery(match.device);
+        if (!srcUrl) {
+          return null;
+        }
         return /* @__PURE__ */ jsx58(
           "source",
           {
-            media: mediaQuery,
+            media: deviceToMediaQuery(match.device),
             srcSet: srcUrl,
             width: parseMaybeNumber(match.intrinsicWidth),
             height: parseMaybeNumber(match.intrinsicHeight)
@@ -3929,31 +3931,75 @@ var ImageGalleryNode = (props) => {
       (() => {
         const img = staticFallback;
         const imageUrl = resolveImageUrl(img);
-        if (!imageUrl) return null;
-        const intrinsicWidth = parseMaybeNumber(img.intrinsicWidth);
-        const intrinsicHeight = parseMaybeNumber(img.intrinsicHeight);
-        const alt = img.title || "Gallery image";
-        const styles = {};
-        if (img.height) styles.height = img.height;
-        if (img.width) styles.width = img.width;
-        if (img.borderRadius) styles.borderRadius = img.borderRadius;
-        return (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ jsx58(
-            "img",
-            {
-              loading: "lazy",
-              style: styles,
-              className: "object-cover max-w-full",
-              src: imageUrl,
-              width: intrinsicWidth,
-              height: intrinsicHeight,
-              alt
-            }
-          )
+        if (!imageUrl) {
+          return null;
+        }
+        const styles = {
+          width: img.width || "auto",
+          height: img.height || "auto"
+        };
+        if (img.borderRadius) {
+          styles.borderRadius = img.borderRadius;
+        }
+        return /* @__PURE__ */ jsx58(
+          "img",
+          {
+            loading: "lazy",
+            style: styles,
+            className: "object-cover max-w-full",
+            src: imageUrl,
+            width: parseMaybeNumber(img.intrinsicWidth),
+            height: parseMaybeNumber(img.intrinsicHeight),
+            alt: img.title ?? "Gallery image"
+          }
         );
       })()
-    ] }) })
+    ] }) : (
+      /* Case 2: Only device-specific images exist */
+      /* @__PURE__ */ jsx58(Fragment8, { children: staticSources.map((img, index) => {
+        const imageUrl = resolveImageUrl(img);
+        if (!imageUrl) {
+          return null;
+        }
+        const styles = {
+          width: img.width || "auto",
+          height: img.height || "auto"
+        };
+        if (img.borderRadius) {
+          styles.borderRadius = img.borderRadius;
+        }
+        let display = "none";
+        switch (img.device) {
+          case "sm":
+            display = props.device === "sm" ? "block" : "none";
+            break;
+          case "md":
+            display = props.device === "md" ? "block" : "none";
+            break;
+          case "lg":
+            display = props.device === "lg" ? "block" : "none";
+            break;
+          default:
+            display = "block";
+        }
+        return /* @__PURE__ */ jsx58(
+          "img",
+          {
+            loading: "lazy",
+            src: imageUrl,
+            style: {
+              ...styles,
+              display
+            },
+            className: "object-cover max-w-full",
+            width: parseMaybeNumber(img.intrinsicWidth),
+            height: parseMaybeNumber(img.intrinsicHeight),
+            alt: img.title ?? "Gallery image"
+          },
+          index
+        );
+      }) })
+    ) })
   ] });
 };
 var ImageGalleryNode_default = ImageGalleryNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260625120328",
+  "version": "0.8.1-dev.20260627063733",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",