@autorender/sdk-core 0.1.28 → 0.1.30

package/README.md

@@ -105,6 +105,21 @@ const attrs = AR.responsiveImageAttributes({
 const dpr = AR.getDPR(); // 1 or 2
 ```
 
+## Playground
+
+A **vanilla TypeScript + Vite** sample lives in [`playground/html`](../../playground/html). It uses `createUploader` and `createAR` from `@autorender/sdk-core` (no framework adapter).
+
+From the **repository root**:
+
+```bash
+npm install --prefix playground/html
+npm run dev --prefix playground/html
+```
+
+Entry: `playground/html/src/main.ts` and `style.css`.
+
+For richer **ViewTag + uploader** examples (React components wrapping the same core), see [`playground/react`](../../playground/react) and the other framework playgrounds in the [root README](../../README.md) (section **Development → Playgrounds**).
+
 ## API Reference
 
 ### `createAR(config: CreateARConfig): ARInstance`
@@ -117,7 +132,6 @@ Creates a new AutoRender client instance for image transformations.
 - `defaults?: { f?: string, q?: string | number }` - Default transformations
 - `deviceBreakpoints?: number[]` - Device breakpoints for responsive images
 - `imageBreakpoints?: number[]` - Image breakpoints for responsive images
-- `connectionQuality?: 'auto' | '2g' | '3g' | '4g' | 'wifi'` - Connection quality override
 
 ### `ARInstance`
 

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(src_exports, {
   detectBestFormat: () => detectBestFormat,
   encodeAssetPathForDelivery: () => encodeAssetPathForDelivery,
   getBestFormatSync: () => getBestFormatSync,
+  isGifFormatOutput: () => isGifFormatOutput,
   registerAutorenderUploaderElement: () => registerAutorenderUploaderElement,
   resetFormatCache: () => resetFormatCache
 });
@@ -2982,7 +2983,35 @@ function getDPR() {
 }
 
 // src/viewtag/transform.ts
-function buildTransformString(transform, defaults, enableDPR = true, connectionQuality) {
+function normalizePosition(value) {
+  const normalized = value.trim().toLowerCase();
+  const positionMap = {
+    center: "c",
+    "top-left": "tl",
+    "top-right": "tr",
+    "bottom-left": "bl",
+    "bottom-right": "br",
+    top: "t",
+    bottom: "b",
+    left: "l",
+    right: "r",
+    p_c: "c",
+    p_tl: "tl",
+    p_tr: "tr",
+    p_bl: "bl",
+    p_br: "br",
+    p_t: "t",
+    p_b: "b",
+    p_l: "l",
+    p_r: "r"
+  };
+  return positionMap[normalized] || normalized;
+}
+function isGifFormatOutput(transform) {
+  const f = transform?.f;
+  return typeof f === "string" && f.toLowerCase() === "gif";
+}
+function buildTransformString(transform, defaults, enableDPR = true) {
   const parts = [];
   const addPart = (param, value) => {
     if (value === void 0 || value === null) return;
@@ -3091,16 +3120,24 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
     addPart("c_", fitMap[transform.fit] || transform.fit);
   }
   if (transform.ar) addPart("ar_", transform.ar);
-  if (transform.p) addPart("p_", transform.p);
-  if (transform.ps) addPart("ps_", transform.ps);
+  if (transform.position) addPart("p_", normalizePosition(transform.position));
+  if (transform.position_startagy) {
+    const strategy = String(transform.position_startagy).trim().toLowerCase().replace(/^ps_/, "");
+    if (strategy === "entropy" || strategy === "attention") {
+      addPart("ps_", strategy);
+    }
+  }
   if (transform.focus) addPart("fo_", transform.focus);
+  if (transform.so !== void 0) addPart("so_", transform.so);
+  if (transform.eo !== void 0) addPart("eo_", transform.eo);
   if (transform.r !== void 0) addPart("r_", transform.r);
   if (transform.z !== void 0) addPart("z_", transform.z);
   if (transform.flip) addPart("flip_", transform.flip);
   if (transform.br !== void 0) addPart("br_", transform.br);
-  let format = transform.f ?? defaults?.f;
-  if (format && format !== "auto") addPart("f_", format);
-  const quality = transform.q ?? defaults?.q;
+  const resolvedFormat = transform.f ?? defaults?.f;
+  const isGifOutput = typeof resolvedFormat === "string" && resolvedFormat.toLowerCase() === "gif";
+  if (resolvedFormat && resolvedFormat !== "auto") addPart("f_", resolvedFormat);
+  const quality = isGifOutput ? transform.q : transform.q ?? defaults?.q;
   if (quality !== void 0 && quality !== "auto") addPart("q_", quality);
   if (transform.bg) {
     if (transform.bg.startsWith("rgb:")) {
@@ -3109,12 +3146,13 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
       addPart("bg_", transform.bg);
     }
   }
-  if (transform.k) addPart("k_", transform.k);
-  if (enableDPR && transform.dpr === void 0) {
-    const dpr = getDPR();
-    if (dpr !== 1) addPart("dpr_", dpr);
-  } else if (transform.dpr !== void 0) {
-    addPart("dpr_", transform.dpr);
+  if (!isGifOutput) {
+    if (enableDPR && transform.dpr === void 0) {
+      const dpr = getDPR();
+      if (dpr !== 1) addPart("dpr_", dpr);
+    } else if (transform.dpr !== void 0) {
+      addPart("dpr_", transform.dpr);
+    }
   }
   if (transform.improve !== void 0) {
     if (typeof transform.improve === "boolean" && transform.improve) {
@@ -3175,9 +3213,11 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
       "h",
       "fit",
       "ar",
-      "p",
-      "ps",
+      "position",
+      "position_startagy",
       "focus",
+      "so",
+      "eo",
       "r",
       "z",
       "flip",
@@ -3185,7 +3225,6 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
       "f",
       "q",
       "bg",
-      "k",
       "dpr",
       "improve",
       "unsharpMask",
@@ -3274,13 +3313,14 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
         if (param.startsWith("lw_")) return 3;
         if (param.startsWith("lh_")) return 4;
         if (param.startsWith("o_")) return 5;
-        if (param.startsWith("l")) return 6;
+        if (param.startsWith("l") && !param.startsWith("lzoom_")) return 6;
         if (param.startsWith("co_")) return 7;
         if (param.startsWith("a_")) return 8;
         if (param.startsWith("lr_")) return 8;
-        if (param.startsWith("x_") || param.startsWith("y_")) return 9;
-        if (param.startsWith("le_")) return 10;
-        if (param.startsWith("e_")) return 11;
+        if (param.startsWith("lzoom_")) return 9;
+        if (param.startsWith("x_") || param.startsWith("y_")) return 10;
+        if (param.startsWith("le_")) return 11;
+        if (param.startsWith("e_")) return 12;
         return 100;
       };
       regularParts.sort((a, b) => {
@@ -3384,6 +3424,7 @@ function buildLayerTransform(layer, addPart) {
   addPart("fl_layer_apply", "");
 }
 function normalizePlacement(placement) {
+  const normalized = placement.trim().toLowerCase().replace(/\s+/g, " ");
   const mapping = {
     "north": "n",
     "south": "s",
@@ -3391,12 +3432,16 @@ function normalizePlacement(placement) {
     "west": "w",
     "center": "c",
     "north-west": "nw",
+    "north west": "nw",
     "north-east": "ne",
+    "north east": "ne",
     "south-west": "sw",
+    "south west": "sw",
     "south-east": "se",
+    "south east": "se",
     "none": "none"
   };
-  return mapping[placement.toLowerCase()] || placement.toLowerCase();
+  return mapping[normalized] || normalized;
 }
 
 // src/viewtag/url-builder.ts
@@ -3415,9 +3460,9 @@ function encodeAssetPathForDelivery(src) {
   }
   return trimmed.split("/").filter(Boolean).map((segment) => encodeURIComponent(segment)).join("/");
 }
-function buildImageUrl(baseUrl, workspace, src, transform, defaults, enableDPR = true, connectionQuality) {
+function buildImageUrl(baseUrl, workspace, src, transform, defaults, enableDPR = true) {
   const normalizedBase = baseUrl.replace(/\/+$/, "");
-  const transformStr = buildTransformString(transform || {}, defaults, enableDPR, connectionQuality);
+  const transformStr = buildTransformString(transform || {}, defaults, enableDPR);
   const trimmedSrc = src.trim();
   if (ABSOLUTE_URL_RE.test(trimmedSrc)) {
     const fetchPart = `fetch_${trimmedSrc}`;
@@ -3445,7 +3490,7 @@ function parseMinVWFromSizes(sizes) {
   const vwValues = vwMatches.map((m) => parseFloat(m));
   return Math.min(...vwValues);
 }
-function generateResponsiveAttributes(baseUrl, workspace, options, defaults, deviceBreakpoints = DEFAULT_DEVICE_BREAKPOINTS, imageBreakpoints = DEFAULT_IMAGE_BREAKPOINTS, enableDPR = true, connectionQuality) {
+function generateResponsiveAttributes(baseUrl, workspace, options, defaults, deviceBreakpoints = DEFAULT_DEVICE_BREAKPOINTS, imageBreakpoints = DEFAULT_IMAGE_BREAKPOINTS, enableDPR = true) {
   const { src, width, sizes, transform, breakpoints } = options;
   const effectiveBreakpoints = breakpoints || deviceBreakpoints;
   if (width !== void 0 && !sizes) {
@@ -3457,7 +3502,7 @@ function generateResponsiveAttributes(baseUrl, workspace, options, defaults, dev
       w: baseWidth2,
       dpr: 1
     };
-    const url1x = buildImageUrl(baseUrl, workspace, src, transform1x, defaults, false, connectionQuality);
+    const url1x = buildImageUrl(baseUrl, workspace, src, transform1x, defaults, false);
     srcSetParts2.push(`${url1x} 1x`);
     if (dpr >= 2) {
       const transform2x = {
@@ -3465,14 +3510,10 @@ function generateResponsiveAttributes(baseUrl, workspace, options, defaults, dev
         w: baseWidth2,
         dpr: 2
       };
-      const url2x = buildImageUrl(baseUrl, workspace, src, transform2x, defaults, false, connectionQuality);
+      const url2x = buildImageUrl(baseUrl, workspace, src, transform2x, defaults, false);
       srcSetParts2.push(`${url2x} 2x`);
     }
-    const baseTransform2 = {
-      ...transform,
-      w: baseWidth2
-    };
-    const baseSrc2 = buildImageUrl(baseUrl, workspace, src, baseTransform2, defaults, enableDPR, connectionQuality);
+    const baseSrc2 = url1x;
     return {
       src: baseSrc2,
       srcSet: srcSetParts2.join(", "),
@@ -3489,7 +3530,7 @@ function generateResponsiveAttributes(baseUrl, workspace, options, defaults, dev
         ...transform,
         w: bp
       };
-      const url = buildImageUrl(baseUrl, workspace, src, transformWithWidth, defaults, enableDPR, connectionQuality);
+      const url = buildImageUrl(baseUrl, workspace, src, transformWithWidth, defaults, enableDPR);
       return `${url} ${bp}w`;
     });
     const baseWidth2 = width || filteredBreakpoints[0] || effectiveBreakpoints[0];
@@ -3497,7 +3538,7 @@ function generateResponsiveAttributes(baseUrl, workspace, options, defaults, dev
       ...transform,
       w: baseWidth2
     };
-    const baseSrc2 = buildImageUrl(baseUrl, workspace, src, baseTransform2, defaults, enableDPR, connectionQuality);
+    const baseSrc2 = buildImageUrl(baseUrl, workspace, src, baseTransform2, defaults, enableDPR);
     return {
       src: baseSrc2,
       srcSet: srcSetParts2.join(", "),
@@ -3510,7 +3551,7 @@ function generateResponsiveAttributes(baseUrl, workspace, options, defaults, dev
       ...transform,
       w: bp
     };
-    const url = buildImageUrl(baseUrl, workspace, src, transformWithWidth, defaults, enableDPR, connectionQuality);
+    const url = buildImageUrl(baseUrl, workspace, src, transformWithWidth, defaults, enableDPR);
     return `${url} ${bp}w`;
   });
   const baseWidth = effectiveBreakpoints[0];
@@ -3518,7 +3559,7 @@ function generateResponsiveAttributes(baseUrl, workspace, options, defaults, dev
     ...transform,
     w: baseWidth
   };
-  const baseSrc = buildImageUrl(baseUrl, workspace, src, baseTransform, defaults, enableDPR, connectionQuality);
+  const baseSrc = buildImageUrl(baseUrl, workspace, src, baseTransform, defaults, enableDPR);
   return {
     src: baseSrc,
     srcSet: srcSetParts.join(", "),
@@ -3850,6 +3891,7 @@ function registerAutorenderUploaderElement() {
   detectBestFormat,
   encodeAssetPathForDelivery,
   getBestFormatSync,
+  isGifFormatOutput,
   registerAutorenderUploaderElement,
   resetFormatCache
 });