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

package/dist/index.js

@@ -5373,11 +5373,9 @@ 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;
   }
@@ -5491,7 +5489,7 @@ var ImageGalleryNode = (props) => {
   if (primaryHls?.width) hlsStyles.width = primaryHls.width;
   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 +5512,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 +5538,81 @@ 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";
+        if (!imageUrl) {
+          return null;
+        }
         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 (img.height) {
+          styles.height = img.height;
+        }
+        if (img.width) {
+          styles.width = img.width;
+        }
+        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 = {};
+        if (img.height) {
+          styles.height = img.height;
+        }
+        if (img.width) {
+          styles.width = img.width;
+        }
+        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,11 +3767,9 @@ 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;
   }
@@ -3885,7 +3883,7 @@ var ImageGalleryNode = (props) => {
   if (primaryHls?.width) hlsStyles.width = primaryHls.width;
   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 +3906,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 +3932,81 @@ 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";
+        if (!imageUrl) {
+          return null;
+        }
         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 (img.height) {
+          styles.height = img.height;
+        }
+        if (img.width) {
+          styles.width = img.width;
+        }
+        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 = {};
+        if (img.height) {
+          styles.height = img.height;
+        }
+        if (img.width) {
+          styles.width = img.width;
+        }
+        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.20260625120809",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",