@preprio/toolkit 0.1.0-beta.5 → 0.1.0-beta.6

package/README.md

@@ -292,7 +292,11 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 
 ### API Integration
 
-Use `getPreprHeaders()` to forward Prepr's personalization context to your own CMS or GraphQL fetches. Without these headers Prepr cannot resolve segments or A/B variants for the request.
+Use `getPreprHeaders()` to forward the request's Prepr personalization context to your Prepr GraphQL fetches. Prepr resolves segments and A/B variants from these headers, so a query sent without them always returns the default, unpersonalized content.
+
+The headers are set by the middleware, so they are only present on routes its matcher covers — off-matcher requests yield an empty object.
+
+The signature differs per framework: `getPreprHeaders()` is async and zero-argument on Next.js (it reads `headers()` for you), while the Astro, SvelteKit, and Nuxt builds are synchronous and take the request's `Headers`.
 
 #### With the Fetch API
 
@@ -364,7 +368,15 @@ export default {
 };
 ```
 
-The loader only rewrites URLs on `*.stream.prepr.io` and `*.b-cdn.net`; anything else passes through untouched. Existing crop and quality transforms in the URL survive the resize.
+The API emits each asset's real dimensions, so a Prepr URL renders as-is:
+
+```
+https://393qibegr87z.b-cdn.net/w_800,h_600,fx_75,fy_67/b7ijwafd586-photo.jpg
+```
+
+The loader rewrites `w_` to the width Next asks for and scales `h_` alongside it, holding the emitted ratio — for a cropped asset that ratio is the authored crop box, so the crop survives the resize. Focal points (`fx`/`fy`) are percentages and carry through unchanged, as does any other option in the segment. Quality is not a CDN option and is ignored.
+
+URLs with no transform segment pass through untouched — set `unoptimized` on those `<Image>`s.
 
 See the runnable example at `examples/nextjs` for the full source of truth.
 

package/dist/astro/index.cjs

@@ -30,7 +30,7 @@ __export(astro_exports, {
 module.exports = __toCommonJS(astro_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/server.ts
 var PreprError = class extends Error {

package/dist/astro/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/server.ts
 var PreprError = class extends Error {

package/dist/index.cjs

@@ -43,7 +43,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/index.d.cts

@@ -5,7 +5,7 @@ export { f as PreprEnvironment, g as PreprEventType, h as PreprHeaderName, i as
  * Package version; must match package.json. Lives in its own leaf module so
  * core can import it without cycling through the barrel.
  */
-declare const VERSION = "0.1.0-beta.5";
+declare const VERSION = "0.1.0-beta.6";
 
 interface ToolbarState {
     locale: Locale;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { f as PreprEnvironment, g as PreprEventType, h as PreprHeaderName, i as
  * Package version; must match package.json. Lives in its own leaf module so
  * core can import it without cycling through the barrel.
  */
-declare const VERSION = "0.1.0-beta.5";
+declare const VERSION = "0.1.0-beta.6";
 
 interface ToolbarState {
     locale: Locale;

package/dist/index.js

@@ -19,7 +19,7 @@ import {
 } from "./chunk-NLQIRN5O.js";
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/server.ts
 var PreprError = class extends Error {

package/dist/nextjs/image-loader.cjs

@@ -23,100 +23,23 @@ __export(image_loader_exports, {
   default: () => preprImageLoader
 });
 module.exports = __toCommonJS(image_loader_exports);
-var TRANSFORMABLE_HOST_SUFFIXES = [".stream.prepr.io", ".b-cdn.net"];
-var KNOWN_OPTION_KEYS = /* @__PURE__ */ new Set([
-  "w",
-  // width
-  "h",
-  // height
-  "q",
-  // quality
-  "c",
-  // crop position (north, centre, ...)
-  "ex",
-  // crop extract: x offset
-  "ey",
-  // crop extract: y offset
-  "ew",
-  // crop extract: width
-  "eh"
-  // crop extract: height
-]);
-function isTransformSegment(segment) {
-  if (!segment) return false;
-  const parts = segment.split(",");
-  let sawKnownOption = false;
-  for (const part of parts) {
-    const underscore = part.indexOf("_");
-    if (underscore <= 0) return false;
-    const key = part.slice(0, underscore);
-    const value = part.slice(underscore + 1);
-    if (!value) return false;
-    if (KNOWN_OPTION_KEYS.has(key)) {
-      sawKnownOption = true;
+var TRANSFORM_SEGMENT = /\/([^/]*\bw_\d+[^/]*)\//;
+var isPositiveInteger = (value) => /^\d+$/.test(value);
+function preprImageLoader({ src, width }) {
+  return src.replace(TRANSFORM_SEGMENT, (match, segment) => {
+    const options = segment.split(",").map((pair) => {
+      const underscore = pair.indexOf("_");
+      return [pair.slice(0, underscore), pair.slice(underscore + 1)];
+    });
+    const emittedWidth = options.find(([key]) => key === "w");
+    if (!emittedWidth || !isPositiveInteger(emittedWidth[1])) return match;
+    const emittedHeight = options.find(([key]) => key === "h");
+    if (emittedHeight && isPositiveInteger(emittedHeight[1])) {
+      emittedHeight[1] = String(
+        Math.round(width * Number(emittedHeight[1]) / Number(emittedWidth[1]))
+      );
     }
-  }
-  return sawKnownOption;
-}
-function parseTransform(segment) {
-  return segment.split(",").map((part) => {
-    const underscore = part.indexOf("_");
-    return [part.slice(0, underscore), part.slice(underscore + 1)];
+    emittedWidth[1] = String(width);
+    return `/${options.map(([key, value]) => `${key}_${value}`).join(",")}/`;
   });
 }
-function parsePreprUrl(rawUrl) {
-  let url;
-  try {
-    url = new URL(rawUrl);
-  } catch {
-    return null;
-  }
-  const isTransformableHost = TRANSFORMABLE_HOST_SUFFIXES.some(
-    (suffix) => url.hostname.endsWith(suffix)
-  );
-  if (!isTransformableHost) return null;
-  const rawSegments = url.pathname.split("/");
-  rawSegments.shift();
-  if (rawSegments.length === 0) return null;
-  const filename = rawSegments[rawSegments.length - 1];
-  const leading = rawSegments.slice(0, -1);
-  let transform = [];
-  const prefixSegments = [];
-  for (const segment of leading) {
-    if (transform.length === 0 && isTransformSegment(segment)) {
-      transform = parseTransform(segment);
-    } else if (segment === "") {
-      continue;
-    } else {
-      prefixSegments.push(segment);
-    }
-  }
-  const prefix = url.origin + "/" + (prefixSegments.length > 0 ? prefixSegments.join("/") + "/" : "");
-  return { prefix, transform, filename: filename + url.search };
-}
-function buildTransformSegment(pairs) {
-  return pairs.map(([key, value]) => `${key}_${value}`).join(",");
-}
-function preprImageLoader({ src, width, quality }) {
-  const parsed = parsePreprUrl(src);
-  if (!parsed) return src;
-  const { prefix, transform, filename } = parsed;
-  const hasCropExtract = transform.some(([key]) => ["ex", "ey", "ew", "eh"].includes(key));
-  const next = [];
-  let setWidth = false;
-  for (const [key, value] of transform) {
-    if (key === "w") {
-      next.push(["w", String(width)]);
-      setWidth = true;
-    } else if (key === "h" && !hasCropExtract) {
-      continue;
-    } else if (key === "q") {
-      continue;
-    } else {
-      next.push([key, value]);
-    }
-  }
-  if (!setWidth) next.push(["w", String(width)]);
-  if (quality) next.push(["q", String(quality)]);
-  return `${prefix}${buildTransformSegment(next)}/${filename}`;
-}

package/dist/nextjs/image-loader.d.cts

@@ -1,10 +1,14 @@
 import { ImageLoaderProps } from 'next/image';
 
 /**
- * Rewrites Prepr stream URLs to the width `next/image` asks for, preserving any
- * crop/preset options already on the URL. Non-Prepr URLs (other hosts, relative
- * paths) come back unchanged — set `unoptimized` on those `<Image>`s.
+ * Rewrites Prepr stream URLs to the width `next/image` asks for. URLs with no
+ * transform segment (other hosts, relative paths) come back unchanged — set
+ * `unoptimized` on those `<Image>`s.
+ *
+ * No upper clamp: the emitted width is the asset's own size or its crop box,
+ * neither of which is a ceiling on what the CDN can serve, so capping there
+ * would rule out retina.
  */
-declare function preprImageLoader({ src, width, quality }: ImageLoaderProps): string;
+declare function preprImageLoader({ src, width }: ImageLoaderProps): string;
 
 export { preprImageLoader as default };

package/dist/nextjs/image-loader.d.ts

@@ -1,10 +1,14 @@
 import { ImageLoaderProps } from 'next/image';
 
 /**
- * Rewrites Prepr stream URLs to the width `next/image` asks for, preserving any
- * crop/preset options already on the URL. Non-Prepr URLs (other hosts, relative
- * paths) come back unchanged — set `unoptimized` on those `<Image>`s.
+ * Rewrites Prepr stream URLs to the width `next/image` asks for. URLs with no
+ * transform segment (other hosts, relative paths) come back unchanged — set
+ * `unoptimized` on those `<Image>`s.
+ *
+ * No upper clamp: the emitted width is the asset's own size or its crop box,
+ * neither of which is a ceiling on what the CDN can serve, so capping there
+ * would rule out retina.
  */
-declare function preprImageLoader({ src, width, quality }: ImageLoaderProps): string;
+declare function preprImageLoader({ src, width }: ImageLoaderProps): string;
 
 export { preprImageLoader as default };

package/dist/nextjs/image-loader.js

@@ -1,101 +1,24 @@
 // src/nextjs/image-loader.ts
-var TRANSFORMABLE_HOST_SUFFIXES = [".stream.prepr.io", ".b-cdn.net"];
-var KNOWN_OPTION_KEYS = /* @__PURE__ */ new Set([
-  "w",
-  // width
-  "h",
-  // height
-  "q",
-  // quality
-  "c",
-  // crop position (north, centre, ...)
-  "ex",
-  // crop extract: x offset
-  "ey",
-  // crop extract: y offset
-  "ew",
-  // crop extract: width
-  "eh"
-  // crop extract: height
-]);
-function isTransformSegment(segment) {
-  if (!segment) return false;
-  const parts = segment.split(",");
-  let sawKnownOption = false;
-  for (const part of parts) {
-    const underscore = part.indexOf("_");
-    if (underscore <= 0) return false;
-    const key = part.slice(0, underscore);
-    const value = part.slice(underscore + 1);
-    if (!value) return false;
-    if (KNOWN_OPTION_KEYS.has(key)) {
-      sawKnownOption = true;
+var TRANSFORM_SEGMENT = /\/([^/]*\bw_\d+[^/]*)\//;
+var isPositiveInteger = (value) => /^\d+$/.test(value);
+function preprImageLoader({ src, width }) {
+  return src.replace(TRANSFORM_SEGMENT, (match, segment) => {
+    const options = segment.split(",").map((pair) => {
+      const underscore = pair.indexOf("_");
+      return [pair.slice(0, underscore), pair.slice(underscore + 1)];
+    });
+    const emittedWidth = options.find(([key]) => key === "w");
+    if (!emittedWidth || !isPositiveInteger(emittedWidth[1])) return match;
+    const emittedHeight = options.find(([key]) => key === "h");
+    if (emittedHeight && isPositiveInteger(emittedHeight[1])) {
+      emittedHeight[1] = String(
+        Math.round(width * Number(emittedHeight[1]) / Number(emittedWidth[1]))
+      );
     }
-  }
-  return sawKnownOption;
-}
-function parseTransform(segment) {
-  return segment.split(",").map((part) => {
-    const underscore = part.indexOf("_");
-    return [part.slice(0, underscore), part.slice(underscore + 1)];
+    emittedWidth[1] = String(width);
+    return `/${options.map(([key, value]) => `${key}_${value}`).join(",")}/`;
   });
 }
-function parsePreprUrl(rawUrl) {
-  let url;
-  try {
-    url = new URL(rawUrl);
-  } catch {
-    return null;
-  }
-  const isTransformableHost = TRANSFORMABLE_HOST_SUFFIXES.some(
-    (suffix) => url.hostname.endsWith(suffix)
-  );
-  if (!isTransformableHost) return null;
-  const rawSegments = url.pathname.split("/");
-  rawSegments.shift();
-  if (rawSegments.length === 0) return null;
-  const filename = rawSegments[rawSegments.length - 1];
-  const leading = rawSegments.slice(0, -1);
-  let transform = [];
-  const prefixSegments = [];
-  for (const segment of leading) {
-    if (transform.length === 0 && isTransformSegment(segment)) {
-      transform = parseTransform(segment);
-    } else if (segment === "") {
-      continue;
-    } else {
-      prefixSegments.push(segment);
-    }
-  }
-  const prefix = url.origin + "/" + (prefixSegments.length > 0 ? prefixSegments.join("/") + "/" : "");
-  return { prefix, transform, filename: filename + url.search };
-}
-function buildTransformSegment(pairs) {
-  return pairs.map(([key, value]) => `${key}_${value}`).join(",");
-}
-function preprImageLoader({ src, width, quality }) {
-  const parsed = parsePreprUrl(src);
-  if (!parsed) return src;
-  const { prefix, transform, filename } = parsed;
-  const hasCropExtract = transform.some(([key]) => ["ex", "ey", "ew", "eh"].includes(key));
-  const next = [];
-  let setWidth = false;
-  for (const [key, value] of transform) {
-    if (key === "w") {
-      next.push(["w", String(width)]);
-      setWidth = true;
-    } else if (key === "h" && !hasCropExtract) {
-      continue;
-    } else if (key === "q") {
-      continue;
-    } else {
-      next.push([key, value]);
-    }
-  }
-  if (!setWidth) next.push(["w", String(width)]);
-  if (quality) next.push(["q", String(quality)]);
-  return `${prefix}${buildTransformSegment(next)}/${filename}`;
-}
 export {
   preprImageLoader as default
 };

package/dist/nextjs/index.cjs

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(nextjs_exports);
 var import_server = require("next/server");
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/nextjs/index.js

@@ -2,7 +2,7 @@
 import { NextResponse } from "next/server";
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/nuxt/index.cjs

@@ -35,7 +35,7 @@ __export(nuxt_exports, {
 module.exports = __toCommonJS(nuxt_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/nuxt/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/index.cjs

@@ -35,7 +35,7 @@ __export(sveltekit_exports, {
 module.exports = __toCommonJS(sveltekit_exports);
 
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/dist/sveltekit/index.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "0.1.0-beta.5";
+var VERSION = "0.1.0-beta.6";
 
 // src/core/constants.ts
 var COOKIE_PREVIEW_MODE = "Prepr-Preview-Mode";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preprio/toolkit",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.6",
   "description": "Prepr personalization, A/B testing and preview toolkit for Next.js, Nuxt, Astro, SvelteKit and Express",
   "license": "Apache-2.0",
   "author": "Prepr B.V. (https://prepr.io)",