@bygghammar/cms-platform 0.62.1 → 0.63.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.63.0
+
+- Site config gains `branding` (`logo`, `logoDark`, `logoAlt`,
+  `invertLogoOnLightSurface`) and it is an overridable setting, so the logo can be
+  uploaded from **Site settings → Branding** with the code value as the fallback.
+- `SiteSettingsView` renders the branding section, using the host media field
+  (library picker + upload) when available and live previews on both surfaces.
+- New `loadSiteBrandingCore(client, config)` for a public read of the resolved
+  logo, and `brandingLogoFor()` to pick artwork per surface.
+- `SiteHeader` accepts `logoDarkSrc` and `logoAlt`; a dark artwork replaces the
+  CSS inversion on light surfaces.
+
 ## 0.61.1
 
 - `site/host-indexing-response` takes the configured origin from the site instead

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.62.1",
+  "version": "0.63.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": [
@@ -300,4 +300,4 @@
     "cms-platform-migrations": "scripts/sync-migrations.mjs",
     "create-cms-site": "./scripts/create-cms-site.mjs"
   }
-}
+}

package/src/backoffice/SiteSettingsView.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 import { Save, RotateCcw } from "lucide-react";
 
 import {
   DEFAULT_FEATURE_FLAGS,
+  EMPTY_BRANDING,
   EMPTY_COMPANY,
+  type SiteBranding,
   type SiteConfig,
   type SiteFeatureFlags,
   type SiteSettingOverrides,
@@ -37,6 +39,12 @@ export type SiteSettingsDeps = {
   companyValues?: Record<string, string>;
   /** Navigate to the contact details screen, where company fields are edited. */
   onOpenContactDetails?: () => void;
+  /**
+   * Site media field (library picker + upload). When omitted the branding
+   * section falls back to plain URL inputs so the screen still works.
+   */
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  MediaField?: (props: any) => ReactNode;
 };
 
 const FEATURE_LABELS: Record<keyof SiteFeatureFlags, string> = {
@@ -80,6 +88,10 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
   const [company, setCompany] = useState({ ...EMPTY_COMPANY, ...config.company });
   const [features, setFeatures] = useState<SiteFeatureFlags>({ ...config.features });
   const [brand, setBrand] = useState<Record<string, string>>({ ...config.brand });
+  const [branding, setBranding] = useState<SiteBranding>({
+    ...EMPTY_BRANDING,
+    ...config.branding,
+  });
   const [busy, setBusy] = useState<string | null>(null);
 
   useEffect(() => {
@@ -87,6 +99,7 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
     setCompany({ ...EMPTY_COMPANY, ...config.company });
     setFeatures({ ...config.features });
     setBrand({ ...config.brand });
+    setBranding({ ...EMPTY_BRANDING, ...config.branding });
   }, [config]);
 
   const save = async (key: string, patch: SiteSettingOverrides) => {
@@ -212,6 +225,60 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
         ) : null}
       </section>
 
+
+      <section className={`mt-6 ${cardClass}`}>
+        <SectionHeader
+          title="Branding"
+          overridden={overridden("branding")}
+          onReset={() => reset("branding")}
+          busy={busy === "branding"}
+        />
+        <p className="mt-2 max-w-2xl text-sm text-ink/60">
+          The logo shown in the site header. Upload the artwork you want here; leaving a field empty
+          falls back to the logo that ships with the site in code. Use a transparent PNG or SVG.
+        </p>
+        <div className="mt-5 grid gap-6 md:grid-cols-2">
+          <BrandingLogoField
+            label="Logo (light artwork, used on dark backgrounds)"
+            value={branding.logo}
+            onChange={(logo) => setBranding({ ...branding, logo })}
+            MediaField={deps.MediaField}
+            preview="dark"
+          />
+          <BrandingLogoField
+            label="Dark logo (optional, used on light backgrounds)"
+            value={branding.logoDark}
+            onChange={(logoDark) => setBranding({ ...branding, logoDark })}
+            MediaField={deps.MediaField}
+            preview="light"
+          />
+        </div>
+        <div className="mt-5 grid gap-4 md:grid-cols-2 md:items-end">
+          <label className="block">
+            <span className={labelClass}>Logo alt text</span>
+            <input
+              className={inputClass}
+              value={branding.logoAlt}
+              placeholder={config.name}
+              onChange={(e) => setBranding({ ...branding, logoAlt: e.target.value })}
+            />
+          </label>
+          <label className="flex items-center gap-3 text-sm text-ink">
+            <input
+              type="checkbox"
+              checked={branding.invertLogoOnLightSurface}
+              onChange={(e) =>
+                setBranding({ ...branding, invertLogoOnLightSurface: e.target.checked })
+              }
+            />
+            Invert the light artwork on light backgrounds (when no dark logo is set)
+          </label>
+        </div>
+        <div className="mt-5">
+          <SaveButton busy={busy === "branding"} onClick={() => save("branding", { branding })} />
+        </div>
+      </section>
+
       <section className={`mt-6 ${cardClass}`}>
         <SectionHeader
           title="Modules"
@@ -271,6 +338,52 @@ export function SiteSettingsView({ deps }: { deps: SiteSettingsDeps }) {
   );
 }
 
+/**
+ * One logo slot: the site's media field when the host provides one, otherwise a
+ * plain URL input. Both render the same live preview on the target surface.
+ */
+function BrandingLogoField({
+  label,
+  value,
+  onChange,
+  MediaField,
+  preview,
+}: {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  MediaField?: (props: any) => ReactNode;
+  preview: "light" | "dark";
+}) {
+  return (
+    <div>
+      <span className={labelClass}>{label}</span>
+      {MediaField ? (
+        <MediaField value={value} onChange={onChange} label="" />
+      ) : (
+        <input
+          className={inputClass}
+          value={value}
+          placeholder="/logo.png"
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+      <div
+        className={`mt-3 flex h-20 items-center justify-center border border-ink/10 px-4 ${
+          preview === "dark" ? "bg-ink" : "bg-white"
+        }`}
+      >
+        {value ? (
+          <img src={value} alt="" className="max-h-12 w-auto" />
+        ) : (
+          <span className="text-xs uppercase tracking-wider text-ink/35">Code default</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function SectionHeader({
   title,
   overridden,

package/src/backoffice/routes/index.tsx

@@ -162,6 +162,7 @@ export function SiteSettingsRoute() {
         onOpenContactDetails: () => {
           window.location.href = contactPath;
         },
+        MediaField: host.components.MediaField,
       }}
     />
   );

package/src/config/site-config.ts

@@ -64,6 +64,32 @@ export const EMPTY_COMPANY: SiteCompany = {
   phone: "",
 };
 
+
+/**
+ * Brand identity assets (logo artwork). Locale-neutral URLs; `alt` is plain
+ * text because a logo's accessible name is the brand name in every language.
+ */
+export type SiteBranding = {
+  /** Primary logo/wordmark URL. Empty string means "no logo configured". */
+  logo: string;
+  /**
+   * Optional dark-ink logo used on light surfaces. When empty, the primary
+   * artwork is CSS-inverted instead (see `invertLogoOnLightSurface`).
+   */
+  logoDark: string;
+  /** Accessible name for the logo image. Falls back to the site name. */
+  logoAlt: string;
+  /** Invert the primary artwork on light surfaces when no dark variant exists. */
+  invertLogoOnLightSurface: boolean;
+};
+
+export const EMPTY_BRANDING: SiteBranding = {
+  logo: "",
+  logoDark: "",
+  logoAlt: "",
+  invertLogoOnLightSurface: true,
+};
+
 /** Brand design tokens. Values are CSS colors written into the theme contract. */
 export type SiteBrandTokens = Record<string, string>;
 
@@ -86,6 +112,8 @@ export type SiteConfigInput = {
   /** UI language of the backoffice itself. */
   backofficeLocale?: string;
   company?: Partial<SiteCompany>;
+  /** Logo artwork defaults; the backoffice may override these. */
+  branding?: Partial<SiteBranding>;
   brand?: SiteBrandTokens;
   features?: Partial<SiteFeatureFlags>;
   /** Optional free-form per-site extras shared code never reads. */
@@ -101,6 +129,7 @@ export type SiteConfig = {
   backofficePath: string;
   backofficeLocale: string;
   company: SiteCompany;
+  branding: SiteBranding;
   brand: SiteBrandTokens;
   features: SiteFeatureFlags;
   extra: SiteExtra;
@@ -134,6 +163,7 @@ export function defineSiteConfig(input: SiteConfigInput): SiteConfig {
     backofficePath,
     backofficeLocale: input.backofficeLocale ?? "en",
     company: { ...EMPTY_COMPANY, ...(input.company ?? {}) },
+    branding: { ...EMPTY_BRANDING, ...(input.branding ?? {}) },
     brand: { ...(input.brand ?? {}) },
     features: { ...DEFAULT_FEATURE_FLAGS, ...(input.features ?? {}) },
     extra: { ...(input.extra ?? {}) },
@@ -170,6 +200,7 @@ export function originIsFromEnvironment(fallback: string, rawEnvValue?: string |
 export const OVERRIDABLE_SETTING_KEYS = [
   "name",
   "company",
+  "branding",
   "brand",
   "features",
 ] as const satisfies readonly (keyof SiteConfig)[];
@@ -180,6 +211,7 @@ export type OverridableSettingKey = (typeof OVERRIDABLE_SETTING_KEYS)[number];
 export type SiteSettingOverrides = Partial<{
   name: string;
   company: Partial<SiteCompany>;
+  branding: Partial<SiteBranding>;
   brand: SiteBrandTokens;
   features: Partial<SiteFeatureFlags>;
 }>;
@@ -201,6 +233,18 @@ export function parseSiteSettingOverrides(raw: unknown): SiteSettingOverrides {
     }
     out.company = company;
   }
+  if (isRecord(raw["branding"])) {
+    const source = raw["branding"] as Record<string, unknown>;
+    const branding: Partial<SiteBranding> = {};
+    for (const key of ["logo", "logoDark", "logoAlt"] as const) {
+      const value = source[key];
+      if (typeof value === "string") branding[key] = value;
+    }
+    if (typeof source["invertLogoOnLightSurface"] === "boolean") {
+      branding.invertLogoOnLightSurface = source["invertLogoOnLightSurface"];
+    }
+    out.branding = branding;
+  }
   if (isRecord(raw["brand"])) {
     const brand: SiteBrandTokens = {};
     for (const [key, value] of Object.entries(raw["brand"])) {
@@ -226,6 +270,7 @@ export function resolveSiteConfig(base: SiteConfig, overrides: unknown): SiteCon
     ...base,
     name: parsed.name ?? base.name,
     company: { ...base.company, ...(parsed.company ?? {}) },
+    branding: { ...base.branding, ...(parsed.branding ?? {}) },
     brand: { ...base.brand, ...(parsed.brand ?? {}) },
     features: { ...base.features, ...(parsed.features ?? {}) },
   };
@@ -259,3 +304,18 @@ export function siteConfig(): SiteConfig {
   }
   return active;
 }
+
+/**
+ * Resolve the logo to render for a surface. A dark variant wins on light
+ * surfaces; otherwise the caller inverts the primary artwork when configured.
+ */
+export function brandingLogoFor(
+  branding: SiteBranding,
+  surface: "light" | "dark",
+): { src: string; invert: boolean } {
+  if (surface === "light" && branding.logoDark) return { src: branding.logoDark, invert: false };
+  return {
+    src: branding.logo,
+    invert: surface === "light" && branding.invertLogoOnLightSurface,
+  };
+}

package/src/server/site-settings-core.ts

@@ -11,6 +11,9 @@ import { auditAs } from "./audit-core";
 import {
   OVERRIDABLE_SETTING_KEYS,
   parseSiteSettingOverrides,
+  resolveSiteConfig,
+  type SiteBranding,
+  type SiteConfig,
   type OverridableSettingKey,
   type SiteSettingOverrides,
 } from "../config/site-config";
@@ -87,3 +90,23 @@ export async function clearSiteSettingCore(
     });
   }
 }
+
+/**
+ * Public read of the resolved branding (logo artwork) for the running site.
+ *
+ * The public header needs the stored logo before any staff session exists, so
+ * this takes whatever client the host passes — typically the publishable one —
+ * and always falls back to the code defaults when nothing is stored.
+ */
+export async function loadSiteBrandingCore(
+  client: Client,
+  base: SiteConfig,
+): Promise<SiteBranding> {
+  try {
+    const overrides = await loadSiteSettingsCore(client);
+    return resolveSiteConfig(base, overrides).branding;
+  } catch {
+    // Branding must never break the header; code defaults are always valid.
+    return base.branding;
+  }
+}

package/src/site/SiteHeader.tsx

@@ -21,6 +21,10 @@ export type SiteHeaderProps = {
   brandName: LocalizedString;
   /** Logo/wordmark artwork. Light artwork is inverted on light surfaces. */
   logoSrc: string;
+  /** Optional dark-ink artwork used on light surfaces instead of inverting. */
+  logoDarkSrc?: string;
+  /** Accessible name for the logo image. Defaults to the brand name. */
+  logoAlt?: string;
   /** Set false when the logo artwork is already dark. */
   invertLogoOnLightSurface?: boolean;
   /** Primary call to action shown on desktop and at the end of the mobile panel. */
@@ -164,6 +168,8 @@ export function SiteHeader({
   nav,
   brandName,
   logoSrc,
+  logoDarkSrc,
+  logoAlt,
   invertLogoOnLightSurface = true,
   primaryCta,
   menuLabels,
@@ -201,6 +207,10 @@ export function SiteHeader({
 
   const lightText = lightTextPaths.includes(pathname) && !scrolled;
   const name = t(brandName);
+  // A dedicated dark artwork wins on light surfaces; otherwise invert the light one.
+  const onLightSurface = !lightText;
+  const logo = onLightSurface && logoDarkSrc ? logoDarkSrc : logoSrc;
+  const invertLogo = onLightSurface && !logoDarkSrc && invertLogoOnLightSurface;
   const showBackoffice = Boolean(backoffice?.signedIn);
 
   return (
@@ -213,11 +223,11 @@ export function SiteHeader({
       <div className="container-editorial flex h-16 items-center justify-between gap-4 md:h-20">
         <Link to="/" className="shrink-0 inline-flex items-center" aria-label={name}>
           <img
-            src={logoSrc}
-            alt={name}
+            src={logo}
+            alt={logoAlt?.trim() || name}
             className={[
               "h-10 w-auto md:h-12 transition-[filter] duration-500",
-              !lightText && invertLogoOnLightSurface ? "brightness-0" : "",
+              invertLogo ? "brightness-0" : "",
             ].join(" ")}
           />
         </Link>