@bygghammar/cms-platform 0.92.2 → 0.93.0

package/CHANGELOG.md

@@ -8,6 +8,32 @@ matches `package.json` exactly. See
 Versions 0.1.0 through 0.78.0 predate this repository and were reconstructed
 from the published npm tarballs.
 
+## 0.93.0
+
+- **Breaking for callers of `responsiveImage`, and for transparent images in
+  browsers without WebP:** responsive images now display as WebP only.
+  `responsiveImage` used to derive a `-fallback.png` for every responsive WebP
+  and `FocalImage` rendered it as the `<img src>`; the optimizer writes that
+  PNG only for transparent uploads, so opaque images carried a missing object
+  that crawlers and browsers without WebP requested. `FocalImage` now renders
+  the stored URL as `src` with the WebP widths as `srcSet`, and uses
+  `<picture>` only for art direction. `ResponsiveImage.fallbackSrc` is
+  deprecated and never set. Transparent uploads still get their PNG copy, but
+  responsive page markup does not serve it, so a browser without WebP support
+  does not receive it, even when the upload generated one. **Host side:** drop
+  any branch that reads `fallbackSrc`; it is now always undefined (Voyara's
+  site hero has one).
+- Eager responsive images are now preloaded by React's server renderer,
+  because they are no longer inside a `<picture>`.
+- Fix review-image uploads. The browser prepared five WebP widths (including
+  2560) while the server accepts exactly four (480, 768, 1200, 1920), so every
+  review upload was rejected before storage. Review images are now prepared at
+  the four review widths. The upload help text now says what happens:
+  proportions are usually kept, a very tall image may be cropped at the top
+  and bottom to the 2400px height limit, and no PNG copy is made.
+- Upload and re-upload help text no longer promises a PNG fallback; review
+  image uploads never made one.
+
 ## 0.92.2
 
 - Fix rich-text attribute escaping. `sanitizeHtml` read attribute values as

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.92.2",
+  "version": "0.93.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": [

package/src/backoffice/media/ReuploadOverwrite.tsx

@@ -139,8 +139,8 @@ export function ReuploadOverwrite({
           <strong className="font-medium text-ink">Re-upload &amp; overwrite</strong> — pick the
           original source files again. Matching library files are regenerated at the current quality
           (480/768/1200/1920/2560, q0.90) and written over the same filenames, so nothing needs
-          re-linking. Transparent PNGs/WebPs keep alpha and regenerate their PNG fallback.
-          Superadmin only.
+          re-linking. Transparent PNGs/WebPs keep alpha in the WebP files; their PNG copy is
+          regenerated too, but responsive page images use the WebP files only. Superadmin only.
         </div>
         <label className="inline-flex items-center gap-2 text-[0.7rem] text-ink/70">
           <input

package/src/backoffice/media/ReviewImageUpload.tsx

@@ -30,8 +30,10 @@ export type ReviewImageUploadProps = {
 };
 
 /**
- * Uploads a review image: cover-cropped to 16:10 and re-encoded to WebP at
- * 480/768/1200/1920 in the browser, then re-validated server-side before storage.
+ * Uploads a review image: re-encoded in the browser to WebP at 480/768/1200/1920,
+ * usually with its proportions kept (a variant taller than the 2400px stored-height
+ * limit is center-cropped vertically; pages crop around the focus point when
+ * shown), then re-validated server-side before storage.
  *
  * Host-agnostic: storage happens through the injected `upload` function.
  */
@@ -96,8 +98,10 @@ export function ReviewImageUpload({
         {busy ? "Optimizing…" : "Upload image"}
       </button>
       <p className="mt-1.5 text-[0.7rem] text-ink/55">
-        Auto-cropped to 16:10 and compressed to WebP (480/768/1200/1920). Max 15 MB. PNGs with
-        transparency keep their alpha channel and receive a PNG fallback.
+        Usually keeps its proportions, but a very tall image may be cropped at the top and
+        bottom to the 2400px height limit; pages crop it around the focus point. Compressed
+        to WebP (480/768/1200/1920). Max 15 MB. PNGs with
+        transparency keep their alpha channel in the WebP files; no PNG copy is made.
       </p>
     </div>
   );

package/src/media/FocalImage.tsx

@@ -103,9 +103,12 @@ export type FocalImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> &
  * `decoding="async"`, so an image nobody asked to prioritize can never compete
  * with the first screen. The one image that should compete says `priority`.
  *
- * When the source is a responsive WebP variant with a `-fallback.png` sibling,
- * renders a `<picture>` so browsers that do not support WebP (or need explicit
- * alpha handling) still receive a transparent PNG.
+ * A responsive WebP variant renders as one `<img>` whose `src` is the stored URL
+ * and whose `srcSet` holds the sibling widths. Only art direction adds a
+ * `<picture>`. Display is WebP-only: no `-fallback.png` is ever referenced,
+ * even for a transparent upload whose optimizer run wrote one, because nothing
+ * stored says which uploads have one. A browser without WebP support gets no
+ * PNG from this markup.
  */
 export function FocalImage({
   src,
@@ -158,17 +161,6 @@ export function FocalImage({
     fetchPriority: fetchPriorityAttr,
   };
 
-  // Only wrap in <picture> when a fallback PNG is advertised. The fallback URL
-  // is always derived, but it only exists for transparent uploads; using it for
-  // every image would cause unnecessary 404s on opaque assets.
-  const hasFallback =
-    "fallbackSrc" in img &&
-    img.fallbackSrc &&
-    // A missing fallback is indistinguishable from an opaque asset, so we only
-    // render the <source> when the primary URL is definitely a responsive WebP.
-    img.type === "image/webp" &&
-    img.srcSet;
-
   const artSources =
     responsive && !srcSetFailed
       ? (artDirected ?? [])
@@ -176,7 +168,11 @@ export function FocalImage({
           .filter((a) => a.img.src)
       : [];
 
-  if (artSources.length || (hasFallback && "fallbackSrc" in img)) {
+  // Only art direction needs a <picture>. Its <img src> is the stored URL, the
+  // one file known to exist: a `-fallback.png` sibling exists only for
+  // transparent uploads, so pointing at it broke every opaque image for
+  // crawlers and for any browser that falls back to `src`.
+  if (artSources.length) {
     // The <picture> is only a source selector: it must not take the layout or
     // focus classes, or the inner <img> loses `object-position` and the crop
     // ignores the editor-chosen focus point.
@@ -195,7 +191,7 @@ export function FocalImage({
         <img
           {...imgProps}
           className={className}
-          src={hasFallback && "fallbackSrc" in img ? img.fallbackSrc : img.src}
+          src={img.src}
           alt={rest.alt}
           style={merged}
           onError={(event) => {

package/src/media/optimize.ts

@@ -2,8 +2,9 @@
  * Client-side media optimization run at upload time in the backoffice.
  * - Images → WebP variants, quality 0.90, max width 2560 (preserves aspect).
  *   PNG/WebP/AVIF sources with an alpha channel keep their transparency in
- *   every generated WebP file, and a single `-fallback.png` is produced so
- *   older browsers still see a transparent image.
+ *   every generated WebP file. They also get a single `-fallback.png` copy,
+ *   but responsive page markup never references it: those images display as
+ *   WebP only, so a browser without WebP support does not receive the PNG.
  * - Videos → original file + a JPG poster grabbed from ~10% into the clip.
  * - Everything else → passthrough.
  *
@@ -18,7 +19,7 @@ export type OptimizedFile = {
 
 export type OptimizedBundle = {
   primary: OptimizedFile;
-  /** Optional sibling files uploaded alongside (e.g. video poster, PNG fallback). */
+  /** Optional sibling files uploaded alongside (e.g. video poster, transparent PNG copy). */
   extras: OptimizedFile[];
 };
 
@@ -96,9 +97,10 @@ export async function optimizeForUpload(
         const primary = files.find((f) => f.name.endsWith("-2560.webp")) ?? files[files.length - 1];
         const extras = files.filter((f) => f !== primary);
 
-        // Transparent sources also get a single PNG fallback at the largest
-        // width. It is stored as an extra so the primary WebP URL stays stable
-        // and every existing page reference remains valid.
+        // Transparent sources also get a single PNG copy at the largest width,
+        // stored as an extra so the primary WebP URL stays stable. Responsive
+        // markup does not reference it (nothing stored says which uploads have
+        // one), so no page serves it as a fallback.
         if (transparent) {
           const fallback = await encodePngAt(bmp, largestW, largestH);
           extras.push({ name: `${base}-fallback.png`, blob: fallback, contentType: "image/png" });

package/src/media/review-image.ts

@@ -1,19 +1,33 @@
 /**
  * Client-side preparation of review (testimonial) images.
  *
- * Uploaded review images keep their original aspect ratio (no crop at upload
- * time — cropping happens at display time around the editor-chosen focus point)
- * and are re-encoded to WebP at the four standard responsive widths so review
- * cards stay fast. The server re-validates every produced variant
- * (see `review-image.server.ts`) — this step is an optimisation, not a trust boundary.
+ * Uploaded review images usually keep their original aspect ratio. The exception
+ * is a source tall enough that a variant would exceed `MAX_STORED_HEIGHT`: that
+ * variant is center-cropped vertically to the limit. Display may crop again,
+ * around the editor-chosen focus point. Variants are re-encoded to WebP at the
+ * four review widths (`REVIEW_IMAGE_WIDTHS`)
+ * so review cards stay fast. The server re-validates every produced variant
+ * (see `server/review-image-validate.ts`) — this step is an optimisation, not a
+ * trust boundary.
  *
  * Browser-only (uses Canvas). Do NOT import from server code.
  */
 
-import { RESPONSIVE_WIDTHS } from "./srcset";
+/**
+ * The review-image upload contract: exactly these widths, in this order. The
+ * server accepts nothing else (`mediaSchemas.reviewImage` requires four
+ * variants and `validateReviewVariant` checks each width against
+ * `REVIEW_WIDTHS`) and stores the 1920 file as the primary. Deliberately not
+ * the general `RESPONSIVE_WIDTHS`, which added 2560 for page media: five
+ * variants fail the server schema, so no review image could be stored.
+ */
+export const REVIEW_IMAGE_WIDTHS = [480, 768, 1200, 1920] as const;
 
 export const REVIEW_ASPECT = 16 / 10;
-/** Safety ceiling for the stored image height (very tall panoramas). */
+/**
+ * Height ceiling for every stored variant. When a variant's proportional height
+ * would exceed it, `encodeCoverWebp` center-crops the image vertically to fit.
+ */
 export const MAX_STORED_HEIGHT = 2400;
 export const REVIEW_QUALITY = 0.8;
 /** Hard client-side guard before we even decode the file. */
@@ -63,7 +77,7 @@ export async function prepareReviewImage(file: File): Promise<PreparedReviewImag
     }
     const variants: PreparedVariant[] = [];
     let optimizedBytes = 0;
-    for (const targetW of RESPONSIVE_WIDTHS) {
+    for (const targetW of REVIEW_IMAGE_WIDTHS) {
       const width = Math.min(targetW, Math.max(320, bmp.width));
       let height = Math.max(1, Math.round((width * bmp.height) / bmp.width));
       if (height > MAX_STORED_HEIGHT) height = MAX_STORED_HEIGHT;

package/src/media/srcset.ts

@@ -2,12 +2,13 @@
  * Responsive image helpers. Works with files produced by `optimizeForUpload`,
  * which uploads a base slug plus WebP variants: `-480`, `-768`, `-1200`, `-1920`
  * and (for assets uploaded after the HiDPI change) `-2560`. Transparent uploads
- * also produce a single `-fallback.png` for older browsers.
+ * also produce a single `-fallback.png`, but only those: nothing a page stores
+ * says which uploads were transparent, so that file is never advertised here
+ * and responsive images display as WebP only.
  *
  * Given the largest variant URL (`…-1920.webp`), derives sibling URLs and returns
- * a ready-to-use `srcSet`/`sizes` pair plus a PNG fallback when one exists. For
- * any other URL shape, returns the original `src` so legacy assets keep working
- * with no responsive scaling.
+ * a ready-to-use `srcSet`/`sizes` pair. For any other URL shape, returns the
+ * original `src` so legacy assets keep working with no responsive scaling.
  */
 
 import { resolveMediaSrc } from "./urls";
@@ -23,7 +24,14 @@ export type ResponsiveImage = {
   sizes?: string;
   /** MIME type of the responsive srcSet (`image/webp`). */
   type?: string;
-  /** PNG fallback URL for browsers that do not support WebP or need alpha. */
+  /**
+   * @deprecated Never set. It used to be derived from the WebP name, but the
+   * optimizer writes `-fallback.png` only for transparent uploads, so for every
+   * opaque one the derived URL was a missing object rendered as `<img src>`.
+   * Kept so existing readers still compile; they now take their non-fallback
+   * path, and a transparent upload's PNG is no longer offered to browsers
+   * without WebP support.
+   */
   fallbackSrc?: string;
 };
 
@@ -53,7 +61,6 @@ export function responsiveImage(input: string | undefined, sizes?: string): Resp
     srcSet: parts.join(", "),
     sizes: sizes ?? "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 1200px",
     type: "image/webp",
-    fallbackSrc: `${base}-fallback.png${query}`,
   };
 }
 

package/src/server/media-library-core.ts

@@ -393,9 +393,11 @@ export async function uploadMediaBundleCore(
 /**
  * Upload a review (testimonial) image.
  *
- * The browser crops and re-encodes to WebP at the four responsive widths; every
- * variant is independently validated here (magic number, real dimensions,
- * aspect, compression ratio, byte ceiling) before anything is stored.
+ * The browser re-encodes to WebP at the four review widths, keeping proportions
+ * unless a variant would exceed the 2400px stored-height limit, which it
+ * center-crops vertically. Every variant is independently validated here (magic
+ * number, real dimensions, aspect, compression ratio, byte ceiling) before
+ * anything is stored.
  */
 export async function uploadReviewImageCore(
   deps: MediaLibraryDeps,

package/src/server/review-image-validate.ts

@@ -5,8 +5,9 @@
  * never trusts that: every variant is decoded here, sniffed for a real WebP magic
  * number, measured, and checked against the canonical review constraints
  * (expected width, sane aspect bounds, height ceiling, byte ceiling) before
- * anything is written to storage. Images keep their original aspect ratio;
- * cropping is done at display time around the saved focus point.
+ * anything is written to storage. Images usually keep their original aspect
+ * ratio: the browser center-crops a variant only when it would exceed the height
+ * ceiling, and display crops around the saved focus point.
  */
 
 export const REVIEW_WIDTHS = [480, 768, 1200, 1920] as const;