@jay-framework/wix-media 0.19.1 → 0.19.3

package/agent-kit/designer/wix-media.md

@@ -51,22 +51,24 @@ URL format: `https://static.wixstatic.com/media/{mediaId}/v1/{mode}/{params}/fil
 
 ## Responsive Images
 
-Use `srcset` and `sizes` to let the browser pick the best image size for the viewport. Generate multiple sizes from the same Wix media URL:
+Use `srcset` and `sizes` to let the browser pick the best image size for the viewport. Generate multiple sizes from the same Wix media URL.
+
+**Important:** In `srcset` attributes, commas separate image candidates per the HTML spec. Wix media URL parameters also use commas (`w_400,h_400`). To prevent the browser from splitting URLs at parameter commas, use `%2C` instead of `,` inside `srcset` URLs. The `src` attribute does not need encoding.
 
 ```html
 <img
   src="{url}/v1/fill/w_400,h_400/file.webp"
-  srcset="{url}/v1/fill/w_300,h_300/file.webp 300w,
-          {url}/v1/fill/w_400,h_400/file.webp 400w,
-          {url}/v1/fill/w_600,h_600/file.webp 600w,
-          {url}/v1/fill/w_800,h_800/file.webp 800w"
+  srcset="{url}/v1/fill/w_300%2Ch_300/file.webp 300w,
+          {url}/v1/fill/w_400%2Ch_400/file.webp 400w,
+          {url}/v1/fill/w_600%2Ch_600/file.webp 600w,
+          {url}/v1/fill/w_800%2Ch_800/file.webp 800w"
   sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 25vw"
   alt="description"
 />
 ```
 
-- `src` — fallback for browsers that don't support srcset
-- `srcset` — candidate images with their width in pixels (`w` descriptor)
+- `src` — fallback for browsers that don't support srcset (use `,` normally)
+- `srcset` — candidate images with their width in pixels (`w` descriptor) — use `%2C` for commas in URL paths
 - `sizes` — tells the browser how wide the image will be at each breakpoint
 
 Match `sizes` to your CSS layout (grid columns, container widths). The browser combines `sizes` with the device pixel ratio to pick the smallest sufficient image from `srcset`.
@@ -76,9 +78,9 @@ For hero/banner images that span the full viewport:
 ```html
 <img
   src="{url}/v1/fill/w_1200,h_600/file.webp"
-  srcset="{url}/v1/fill/w_600,h_300/file.webp 600w,
-          {url}/v1/fill/w_1200,h_600/file.webp 1200w,
-          {url}/v1/fill/w_1920,h_960/file.webp 1920w"
+  srcset="{url}/v1/fill/w_600%2Ch_300/file.webp 600w,
+          {url}/v1/fill/w_1200%2Ch_600/file.webp 1200w,
+          {url}/v1/fill/w_1920%2Ch_960/file.webp 1920w"
   sizes="100vw"
   alt="description"
 />

package/dist/index.js

@@ -11,7 +11,9 @@ import * as path$1 from "node:path";
 const WIXSTATIC_MEDIA_RE = /static\.wixstatic\.com\/media\//;
 const V1_TRANSFORM_RE = /\/v1\//;
 const IMAGE_EXTENSIONS_RE = /\.(jpe?g|png|gif|webp|svg|bmp|ico)$/i;
+const SRCSET_UNENCODED_COMMA_RE = /\/v1\/[^/]+\/[^/]*[a-z]_\d+,[a-z]_\d+/;
 const MEDIA_SRC_ATTRS = ["src", "poster"];
+const MEDIA_SRCSET_ATTRS = ["srcset"];
 const MEDIA_ELEMENTS = /* @__PURE__ */ new Set(["img", "video", "source"]);
 function checkStaticWixUrl(value) {
   return WIXSTATIC_MEDIA_RE.test(value) && !V1_TRANSFORM_RE.test(value);
@@ -55,7 +57,7 @@ const validate = (ctx) => {
         } else if (isLocalImagePath(staticValue)) {
           findings.push({
             severity: "error",
-            message: "Local image reference — upload to Wix Media Manager and use a Wix media URL with optimization parameters. See agent-kit/wix-media.md.",
+            message: `Local image reference '${staticValue}' — run \`jay-stack-cli run wix-media/upload-public\` to upload local images to Wix Media Manager, then use the Wix media URL with optimization parameters. See agent-kit/wix-media.md.`,
             element: `<${tagName}>`,
             attribute: attr
           });
@@ -78,6 +80,23 @@ const validate = (ctx) => {
         }
       }
     }
+    for (const attr of MEDIA_SRCSET_ATTRS) {
+      const value = el.getAttribute(attr);
+      if (!value) continue;
+      const parts = parseTemplateParts(value);
+      for (const part of parts) {
+        if (part.kind !== "static") continue;
+        if (SRCSET_UNENCODED_COMMA_RE.test(part.value)) {
+          findings.push({
+            severity: "error",
+            message: "Wix media URL in srcset has unencoded commas in parameters (e.g. w_400,h_300). The srcset attribute uses commas to separate image candidates, so commas inside URLs must be encoded as %2C (e.g. w_400%2Ch_300). See agent-kit/wix-media.md.",
+            element: `<${tagName}>`,
+            attribute: attr
+          });
+          break;
+        }
+      }
+    }
   });
   return findings;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/wix-media",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "type": "module",
   "description": "Wix Media Manager plugin for Jay Framework — media validation, index generation, and agent-kit references",
   "license": "Apache-2.0",
@@ -25,19 +25,19 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@jay-framework/compiler-jay-html": "^0.19.1",
-    "@jay-framework/compiler-shared": "^0.19.1",
-    "@jay-framework/component": "^0.19.1",
-    "@jay-framework/fullstack-component": "^0.19.1",
-    "@jay-framework/stack-server-runtime": "^0.19.1",
-    "@jay-framework/wix-server-client": "^0.19.1",
-    "@jay-framework/wix-utils": "^0.19.1",
+    "@jay-framework/compiler-jay-html": "^0.19.3",
+    "@jay-framework/compiler-shared": "^0.19.3",
+    "@jay-framework/component": "^0.19.3",
+    "@jay-framework/fullstack-component": "^0.19.3",
+    "@jay-framework/stack-server-runtime": "^0.19.3",
+    "@jay-framework/wix-server-client": "^0.19.3",
+    "@jay-framework/wix-utils": "^0.19.3",
     "@wix/media": "^1.0.247",
     "@wix/sdk": "^1.21.5"
   },
   "devDependencies": {
-    "@jay-framework/compiler-jay-stack": "^0.19.1",
-    "@jay-framework/vite-plugin": "^0.19.1",
+    "@jay-framework/compiler-jay-stack": "^0.19.3",
+    "@jay-framework/vite-plugin": "^0.19.3",
     "@types/node": "^20.11.0",
     "node-html-parser": "^6.1.0",
     "rimraf": "^5.0.5",