@bygghammar/cms-platform 0.92.1 → 0.93.0

package/CHANGELOG.md

@@ -8,6 +8,45 @@ 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
+  raw text and escaped them again, so every save and every render added an
+  `amp;` to each `&` in a link: `?calendardates=…&trp=…` reached the browser
+  with a query key named `amp;trp`. Attribute values are now decoded once,
+  checked, and escaped exactly once, so sanitizing is idempotent through save
+  and render. The URL allowlist, style checks and target check judge the
+  decoded value, the one the browser will use. Text content is unchanged.
+- Links stored before this release keep their extra levels until an editor
+  saves the correct URL; they no longer grow on each save.
+- Two scheduling test suites no longer depend on the date they run on.
+
 ## 0.92.1
 
 - Fix the page-builder save and publish RPC call by removing the unsupported

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.92.1",
+  "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/html/sanitize-html.ts

@@ -85,6 +85,48 @@ function escapeAttr(v: string): string {
   return v.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
+/** The named references the editor and browsers write into attribute values. */
+const NAMED_REFERENCES: Record<string, string> = {
+  amp: "&",
+  AMP: "&",
+  lt: "<",
+  LT: "<",
+  gt: ">",
+  GT: ">",
+  quot: '"',
+  QUOT: '"',
+  apos: "'",
+  nbsp: "\u00a0",
+};
+
+/**
+ * An attribute value as a browser reads it: its character references decoded.
+ *
+ * Stored markup is HTML, so `?a=1&amp;b=2` means `?a=1&b=2`. Everything below
+ * judges the decoded value, and `escapeAttr` encodes it exactly once on the
+ * way out. Reading the raw text instead let `escapeAttr` encode the editor's
+ * own `&amp;` a second time, so every save and every render added a level and
+ * a link's `&b=` arrived in the browser as a key named `amp;b`.
+ *
+ * Numeric references, and the named ones above, are decoded. Any other name
+ * is left as written, so it is escaped as text and reaches the browser as that
+ * literal text. Either way the browser ends up with exactly the string that
+ * was checked: `&#106;avascript:` is judged as `javascript:`, and an
+ * undecoded `javascript&colon;` never becomes one.
+ */
+function decodeAttr(value: string): string {
+  return value.replace(
+    /&(?:#([0-9]{1,7})|#[xX]([0-9a-fA-F]{1,6})|([a-zA-Z][a-zA-Z0-9]{0,31}));/g,
+    (reference, decimal?: string, hex?: string, name?: string) => {
+      if (name !== undefined) return NAMED_REFERENCES[name] ?? reference;
+      const code = decimal !== undefined ? Number.parseInt(decimal, 10) : Number.parseInt(hex ?? "", 16);
+      // What a browser does with these: the replacement character.
+      if (code === 0 || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff)) return "\ufffd";
+      return String.fromCodePoint(code);
+    },
+  );
+}
+
 const ATTR_RE = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
 
 function sanitizeAttrs(tag: string, raw: string): string {
@@ -94,7 +136,7 @@ function sanitizeAttrs(tag: string, raw: string): string {
   ATTR_RE.lastIndex = 0;
   while ((m = ATTR_RE.exec(raw))) {
     const name = m[1].toLowerCase();
-    let value = m[3] ?? m[4] ?? m[5] ?? "";
+    let value = decodeAttr(m[3] ?? m[4] ?? m[5] ?? "");
     if (name.startsWith("on")) continue;
     if (!GLOBAL_ATTRS.has(name) && !allowed?.has(name)) continue;
     if (name === "href" || name === "src" || name === "srcset") {

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;