@bygghammar/cms-platform 0.92.2 → 0.94.0

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/backoffice/routes/index.tsx

@@ -26,7 +26,7 @@ import {
   Users,
 } from "lucide-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useServerFn } from "@tanstack/react-start";
 
 import { MISSING_CREATED_ID } from "../../tracking/injections";
@@ -48,13 +48,16 @@ import { SitemapView, type SitemapCheck } from "../SitemapView";
 import { SiteSettingsView } from "../SiteSettingsView";
 import { TrackingView, type TrackingDeps } from "../TrackingView";
 import { UsersView } from "../UsersView";
-import { VersionView } from "../VersionView";
+import { VersionView, type PlatformBuildInfo, type PlatformRelease } from "../VersionView";
+import { moduleInventory, type ModuleSettingsRead } from "../../admin/module-inventory";
+import type { VersionReport } from "../../admin/version-report";
 import { parseEffectiveAdminHost } from "../../site/locale-domains";
 import {
   useFeatureEnabled,
   useFeatureGate,
   useModuleGate,
   useMyRoles,
+  useResolvedSiteConfig,
 } from "../shell/use-resolved-config";
 import { backofficeHost, backofficePaths } from "./host";
 
@@ -127,14 +130,96 @@ export function UsersRoute() {
   );
 }
 
-/** CMS build and platform version screen. */
+type SystemVersionPayload = {
+  build?: PlatformBuildInfo;
+  releases?: PlatformRelease[];
+  /** Present from hosts that build it with `buildVersionReport`. */
+  report?: VersionReport;
+};
+
+const SYSTEM_VERSION_QUERY_KEY = ["admin", "system-version"] as const;
+
+/**
+ * Release, package and module screen.
+ *
+ * Read-only: it shows the module switches, it never changes them. The version
+ * read is not polled — no refetch on focus, a five-minute stale time — and a
+ * manual check goes through the server, which applies its own minimum
+ * interval before asking the registry again.
+ */
 export function VersionRoute() {
-  const { fns } = backofficeHost();
-  const fetchVersion = useServerFn(fns.getSystemVersion);
-  const q = useQuery({ queryKey: ["admin", "system-version"], queryFn: () => fetchVersion() });
+  const host = backofficeHost();
+  const paths = backofficePaths(host);
+  const fetchVersion = useServerFn(host.fns.getSystemVersion);
+  const queryClient = useQueryClient();
+  const q = useQuery({
+    queryKey: SYSTEM_VERSION_QUERY_KEY,
+    queryFn: () => fetchVersion({ data: { refresh: false } }) as Promise<SystemVersionPayload>,
+    staleTime: 5 * 60_000,
+    refetchOnWindowFocus: false,
+    retry: 1,
+  });
+  const refreshing = useRef(false);
+  const [isRefreshing, setRefreshing] = useState(false);
+  // The `dataUpdatedAt` of the answer that was on screen when a "Check again"
+  // failed. The failure notice shows while that same answer is still shown, so
+  // any later successful answer (a retry or a re-read) clears it.
+  const [refreshFailedFor, setRefreshFailedFor] = useState<number | null>(null);
+  const refresh = useCallback(async () => {
+    if (refreshing.current) return;
+    refreshing.current = true;
+    setRefreshing(true);
+    try {
+      const next = (await fetchVersion({ data: { refresh: true } })) as SystemVersionPayload;
+      queryClient.setQueryData(SYSTEM_VERSION_QUERY_KEY, next);
+      setRefreshFailedFor(null);
+    } catch {
+      // Keep the last answer on screen, but say the check failed. The error
+      // itself (an expired session, a network failure) is not shown.
+      setRefreshFailedFor(queryClient.getQueryState(SYSTEM_VERSION_QUERY_KEY)?.dataUpdatedAt ?? 0);
+    } finally {
+      refreshing.current = false;
+      setRefreshing(false);
+    }
+  }, [fetchVersion, queryClient]);
+
+  const settings = useResolvedSiteConfig();
+  const settingsRead: ModuleSettingsRead =
+    settings.status === "loading"
+      ? { state: "loading" }
+      : settings.status === "error"
+        ? { state: "error" }
+        : { state: "ready", features: settings.config.features, stale: settings.status === "stale" };
+  const report = q.data?.report && q.data.report.schemaVersion === 1 ? q.data.report : null;
+  const cmsVersion =
+    report?.packages.find((p) => p.role === "cms")?.installed ?? q.data?.build?.platformVersion ?? null;
+  // The latest request failed while an earlier answer is still on screen:
+  // a failed "Check again", or a failed re-read of cached data.
+  const latestCheckFailed =
+    q.data !== undefined &&
+    ((refreshFailedFor !== null && refreshFailedFor === q.dataUpdatedAt) || q.isError);
+
   return (
     <VersionView
-      deps={{ build: q.data?.build, releases: q.data?.releases ?? [], loading: q.isLoading }}
+      deps={{
+        build: q.data?.build,
+        releases: q.data?.releases ?? [],
+        loading: q.isLoading,
+        error: q.isError && !q.data,
+        latestCheckFailed,
+        onRetry: () => void q.refetch(),
+        report,
+        modules: moduleInventory(settingsRead, report?.packages, q.isLoading ? null : cmsVersion),
+        onRefresh: report ? () => void refresh() : undefined,
+        refreshing: isRefreshing,
+        siteName: host.siteConfig.name,
+        settingsHref: paths.settings,
+        renderLink: ({ href, className, children }) => (
+          <Link to={href} className={className}>
+            {children}
+          </Link>
+        ),
+      }}
     />
   );
 }
@@ -466,8 +551,8 @@ export function AdminOverviewRoute() {
     },
     {
       to: paths.version,
-      title: "CMS & platform version",
-      body: "Current CMS build, shared platform package version and release history with dates.",
+      title: "Version & modules",
+      body: "The live site release, installed CMS and module packages, module status and available updates.",
       icon: Package,
     },
     ...(isSuper && host.siteConfig.features.backup

package/src/backoffice/shell/use-resolved-config.tsx

@@ -21,11 +21,27 @@ import { backofficeNav, type BackofficeNavItem, type BackofficeNavOptions } from
 /** Query key shared with the site-settings screen. */
 export const SITE_SETTINGS_QUERY_KEY = ["admin", "site-settings"] as const;
 
+/**
+ * Where the resolved configuration came from:
+ *
+ * - `loading`: no answer yet; `config` is the compiled code config.
+ * - `error`: the read failed (or answered without settings) and no earlier
+ *   answer is held; `config` is the compiled code config, not the live one.
+ * - `ready`: `config` includes the saved overrides.
+ * - `stale`: a re-read failed; `config` is from the last successful read.
+ */
+export type SiteSettingsStatus = "loading" | "error" | "ready" | "stale";
+
 /**
  * Code config merged with the stored overrides. While loading, the code config
- * is returned so the shell renders without a flash of empty navigation.
+ * is returned so the shell renders without a flash of empty navigation; a
+ * caller that must not present that fallback as the live answer reads `status`.
  */
-export function useResolvedSiteConfig(): { config: SiteConfig; isLoading: boolean } {
+export function useResolvedSiteConfig(): {
+  config: SiteConfig;
+  isLoading: boolean;
+  status: SiteSettingsStatus;
+} {
   const host = backofficeHost();
   const load = useServerFn(host.fns.getSiteSettings);
   const q = useQuery({
@@ -34,13 +50,22 @@ export function useResolvedSiteConfig(): { config: SiteConfig; isLoading: boolea
     staleTime: 30_000,
   });
 
-  const resolved =
+  const fromSettings =
     (q.data?.config as SiteConfig | undefined) ??
     (q.data?.overrides
       ? resolveSiteConfig(host.siteConfig, q.data.overrides as never)
-      : host.siteConfig);
+      : undefined);
+  const resolved = fromSettings ?? host.siteConfig;
+
+  const status: SiteSettingsStatus = q.isLoading
+    ? "loading"
+    : !fromSettings
+      ? "error"
+      : q.isError
+        ? "stale"
+        : "ready";
 
-  return { config: resolved, isLoading: q.isLoading };
+  return { config: resolved, isLoading: q.isLoading, status };
 }
 
 /** Sidebar model built from the live (override-aware) configuration. */

package/src/config/modules.ts

@@ -23,6 +23,8 @@ import {
   MessageSquareQuote,
 } from "lucide-react";
 
+import { POPUP_PACKAGE } from "../popups/package-name";
+
 /**
  * Every module a site can switch on.
  *
@@ -90,6 +92,14 @@ export type CmsModuleDefinition = {
    * enabled, so a disabled module mounts nothing.
    */
   readonly hasPublicRuntime?: boolean;
+  /**
+   * A separately published first-party package the module's runtime is built
+   * on, beyond the CMS package itself. The version screen reports its installed
+   * and published versions; every other module ships inside the CMS package and
+   * updates with it. Naming a package here also allows the server to look it up
+   * in the public registry, so only first-party packages belong here.
+   */
+  readonly package?: `@bygghammar/${string}`;
 };
 
 /**
@@ -145,6 +155,7 @@ export const CMS_MODULES = [
     nav: { path: "/popups", label: "Popups", icon: MessageSquare },
     requiresRole: "staff",
     hasPublicRuntime: true,
+    package: POPUP_PACKAGE,
   },
 ] as const satisfies readonly CmsModuleDefinition[];
 

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/popups/package-name.ts

@@ -0,0 +1,8 @@
+/**
+ * The separately published package the Popups module is built on.
+ *
+ * Named here, inside the module's own directory, so the module table can
+ * declare it without the rest of the CMS mentioning the popup package. This
+ * file holds only the name: importing it loads nothing from the package.
+ */
+export const POPUP_PACKAGE = "@bygghammar/lightweight-popup" as const;

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;