@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/server/published-cache.ts

@@ -52,14 +52,26 @@ export function publishedCacheGet<T>(scope: PublishedCacheScope, key: string): T
   return entry.value as T;
 }
 
-/** Stores an entry. */
+/**
+ * Stores an entry.
+ *
+ * `notAfter` is an instant the caller knows this value stops being true at — a
+ * scheduled publication, a window about to close. The entry expires then if
+ * that comes first, so a cache can shorten a value's life but never extend it
+ * past the moment the answer changes. An instant already in the past means the
+ * value is stale on arrival and is not stored at all.
+ */
 export function publishedCacheSet(
   scope: PublishedCacheScope,
   key: string,
   value: unknown,
+  notAfter?: number | null,
 ): void {
   if (ttlMs === 0) return;
-  store.set(cacheKey(scope, key), { value, expiresAt: Date.now() + ttlMs });
+  const now = Date.now();
+  const expiresAt = notAfter == null ? now + ttlMs : Math.min(now + ttlMs, notAfter);
+  if (expiresAt <= now) return;
+  store.set(cacheKey(scope, key), { value, expiresAt });
 }
 
 /**
@@ -83,11 +95,20 @@ export function invalidatePublishedCache(scope?: PublishedCacheScope, key?: stri
   for (const k of [...store.keys()]) if (k.startsWith(prefix)) store.delete(k);
 }
 
-/** Runs `load` only when the entry is missing or expired. */
+/**
+ * Runs `load` only when the entry is missing or expired.
+ *
+ * `boundaryOf` reads the instant the loaded value stops being true at, when the
+ * caller knows one. Content that is going to change on a schedule is the case
+ * this exists for: a page cached twenty seconds before it goes live would be
+ * served as missing for twenty seconds after it went live, and no amount of
+ * invalidation on write helps, because nobody writes anything at that moment.
+ */
 export async function withPublishedCache<T>(
   scope: PublishedCacheScope,
   key: string,
   load: () => Promise<T>,
+  boundaryOf?: (value: T) => number | null | undefined,
 ): Promise<T> {
   const cached = publishedCacheGet<T>(scope, key);
   if (cached !== undefined) {
@@ -97,7 +118,7 @@ export async function withPublishedCache<T>(
   misses += 1;
   const value = await load();
   // `undefined` is indistinguishable from "absent", so it is never stored.
-  if (value !== undefined) publishedCacheSet(scope, key, value);
+  if (value !== undefined) publishedCacheSet(scope, key, value, boundaryOf?.(value));
   return value;
 }
 

package/src/server/resolve-globals.ts

@@ -5,6 +5,7 @@
  * passes, so it works with an authenticated client in the backoffice and with a
  * privileged client during public rendering.
  */
+import { flattenBlockTree } from "../blocks/block-tree";
 import type { BlockInstance, BlockProps } from "../blocks/types";
 
 /** Minimal read surface this helper needs from a Supabase-style client. */
@@ -16,8 +17,12 @@ export type GlobalsReadClient = {
   };
 };
 
+/*
+ * Flattened, not root-only: a global reference nested in a layout column is
+ * still a reference, and missing it renders the global as empty on the page.
+ */
 function refKeysOf(blocks: BlockInstance[]): string[] {
-  return blocks
+  return flattenBlockTree(blocks)
     .map((b) => {
       const props = b.props as (BlockProps & { expiredSectionKey?: string }) | undefined;
       if (b.type === "globalRef") return String(props?.sectionKey ?? "");

package/src/server/schema-drift.ts

@@ -64,6 +64,10 @@ export const SCHEMA_MIGRATIONS: readonly string[] = [
   "20260818040722_1bdf1b8f-7fb0-4ae8-8ecf-73f1fadff3c2.sql",
   "20260818040808_69a5e832-57e8-4aa7-aff8-7fd7777faa7c.sql",
   "20260818040839_e6523163-bbf5-4a39-9233-91759059569a.sql",
+  "20260902090000_dc072b25-8467-46ae-aef3-0ccdf40aa7eb.sql",
+  "20260904090000_c54603f8-a155-40f8-a86c-54434aa5c0ae.sql",
+  "20260904140000_9f2a7c41-06d5-4d6b-8b4e-1c7a5d3e9b20.sql",
+  "20260904160000_0d565000-2839-4738-aacc-537d7090398f.sql",
 ];
 
 /** Schema baseline version = the newest canonical migration. */

package/src/server/schemas.ts

@@ -126,6 +126,17 @@ export const pageSchemas = {
     name: z.string().min(1).max(120),
     editSessionId: editSessionId.optional(),
   }),
+  setPageStatus: z.object({
+    pageId: uuid,
+    status: z.enum(["draft", "published"]),
+    editSessionId: editSessionId.optional(),
+  }),
+  duplicatePage: z.object({
+    pageId: uuid,
+    name: z.string().min(1).max(120),
+    /** Optional explicit key; the slug is derived from the name otherwise. */
+    key: cmsKey.optional(),
+  }),
   schedulePageVersion: z.object({
     versionId: uuid,
     publishAt: z.string().datetime(),
@@ -202,6 +213,10 @@ export const mediaSchemas = {
       .min(1)
       .max(50),
     upsert: z.boolean().optional(),
+    /** Destination folder; empty/absent means the automatic `YYYY-MM` folder. */
+    folder: z.string().max(200).optional(),
+    /** Site timezone for the automatic folder's month boundary. */
+    timezone: z.string().max(64).optional(),
   }),
   reviewImage: z.object({
     slug: z.string().trim().min(1).max(80),

package/src/site/PageRenderer.tsx

@@ -5,10 +5,13 @@
  * a published page or an unsaved draft. The registry is passed in, so a site
  * only supplies its own block definitions.
  */
+import { useMemo } from "react";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 
+import { publishedPageStaleTime } from "../cms/page-publication";
 import { PriorityMediaProvider } from "../media/priority";
 import { CountdownReplacementProvider } from "../blocks/countdown-replacement";
+import { BlockChildrenProvider } from "../blocks/block-children";
 import type { BlockDef } from "../blocks/registry";
 import type { BlockInstance, BlockProps } from "../blocks/types";
 
@@ -17,6 +20,12 @@ export type BlockRegistry = Record<string, BlockDef>;
 export type RenderedPage = {
   blocks: BlockInstance[];
   globals: Record<string, BlockInstance[]>;
+  /**
+   * The next instant this page's public answer changes, when the server knows
+   * of one — a version scheduled to replace this one, or the end of the window
+   * showing it. Caching stops there.
+   */
+  revalidateAt?: string | null;
 };
 
 function RenderBlock({
@@ -121,34 +130,58 @@ export function DraftPageRendererView({
   edit?: boolean;
   selectedId?: string | null;
 }) {
+  // Container blocks (`layout`) render their children through this, so nesting
+  // uses exactly the same code path — and the same globals, selection
+  // highlighting and priority scope — as the top level.
+  const children = useMemo(
+    () => ({
+      edit,
+      render: (list: BlockInstance[]) =>
+        list.map((b) => (
+          <RenderBlock
+            key={b.id}
+            block={b}
+            globals={globals}
+            registry={registry}
+            edit={edit}
+            selectedId={selectedId}
+          />
+        )),
+    }),
+    [globals, registry, edit, selectedId],
+  );
+
   // Every page render gets its own priority scope, so the first first-screen
   // image loads eagerly and the rest stay lazy. In the builder (`edit`) the
   // editor jumps around the page, so no image is treated as the hero.
   return (
     <PriorityMediaProvider enabled={!edit}>
-      {blocks.map((b) => (
-        <RenderBlock
-          key={b.id}
-          block={b}
-          globals={globals}
-          registry={registry}
-          edit={edit}
-          selectedId={selectedId}
-        />
-      ))}
+      <BlockChildrenProvider value={children}>{children.render(blocks)}</BlockChildrenProvider>
     </PriorityMediaProvider>
   );
 }
 
-/** Query options for one published page, keyed by page key. */
+/** How long a fetched page may be reused when nothing is scheduled. */
+export const PAGE_STALE_TIME_MS = 30_000;
+
+/**
+ * Query options for one published page, keyed by page key.
+ *
+ * The freshness window is a ceiling, not a promise: it is cut short by whatever
+ * the server said would change next. Half a minute is a sensible default for a
+ * page nobody has scheduled anything for, and exactly the wrong answer for one
+ * going live in ten seconds — it would keep showing the visitor a 404 for
+ * twenty seconds after publication, with no write anywhere to invalidate on.
+ */
 export function createPageQueryOptions(
   fetchPublishedPage: (key: string) => Promise<RenderedPage | null>,
+  defaultStaleTimeMs: number = PAGE_STALE_TIME_MS,
 ) {
   return (key: string) =>
     queryOptions({
       queryKey: ["cms", "page", key],
       queryFn: () => fetchPublishedPage(key),
-      staleTime: 30_000,
+      staleTime: (query) => publishedPageStaleTime(query.state.data, defaultStaleTimeMs),
     });
 }
 

package/src/site/SiteFooter.tsx

@@ -6,8 +6,12 @@
  */
 import { Link } from "@tanstack/react-router";
 
+import { useScheduleClock } from "../cms/use-schedule-clock";
+import { isVisibleAt, type VisibilitySchedule } from "../cms/visibility-schedule";
+import type { SiteTypography } from "../config/typography";
 import { useT } from "../i18n";
 import type { LocalizedString } from "../i18n/types";
+import { SiteFontLinks, fontStyle, slotFont, typographyFontRequests } from "./typography";
 
 export type SiteFooterCompany = {
   legalName: string;
@@ -21,11 +25,31 @@ export type SiteFooterCompany = {
   phone: string;
 };
 
+/** A footer link, optionally only shown inside a scheduled window. */
+export type SiteFooterLink = {
+  label: LocalizedString;
+  href: string;
+  /** Absent means "always visible", so existing footers are unchanged. */
+  schedule?: VisibilitySchedule;
+};
+
 export type SiteFooterColumn = {
   title: LocalizedString;
-  links: Array<{ label: LocalizedString; href: string }>;
+  links: SiteFooterLink[];
+  /** Hides the whole column, links included, outside its window. */
+  schedule?: VisibilitySchedule;
 };
 
+/** Every schedule in a footer, for the re-render clock. */
+function footerSchedules(columns: readonly SiteFooterColumn[]): VisibilitySchedule[] {
+  const out: VisibilitySchedule[] = [];
+  for (const column of columns) {
+    if (column.schedule) out.push(column.schedule);
+    for (const link of column.links ?? []) if (link.schedule) out.push(link.schedule);
+  }
+  return out;
+}
+
 export type SiteFooterProps = {
   brandShort: LocalizedString;
   brandName: LocalizedString;
@@ -35,6 +59,11 @@ export type SiteFooterProps = {
   company: SiteFooterCompany;
   /** Label prefixing the organisation number in the address block. */
   orgNumberLabel?: string;
+  /**
+   * Site typography. Only the `footer` slot is applied here, and only when it
+   * names a Google family; otherwise the footer keeps its theme fonts exactly.
+   */
+  typography?: SiteTypography;
 };
 
 export function SiteFooter({
@@ -45,8 +74,19 @@ export function SiteFooter({
   columns,
   company,
   orgNumberLabel = "Org.nr",
+  typography,
 }: SiteFooterProps) {
   const { t } = useT();
+  // Same clock as the menu: a scheduled link appears or disappears on its
+  // boundary rather than on the next full page load.
+  const now = useScheduleClock(footerSchedules(columns));
+  const footerFont = slotFont(typography, "footer");
+  const visibleColumns = columns
+    .filter((column) => isVisibleAt(column.schedule, now))
+    .map((column) => ({
+      ...column,
+      links: (column.links ?? []).filter((link) => isVisibleAt(link.schedule, now)),
+    }));
 
   const jsonLd = {
     "@context": "https://schema.org",
@@ -66,7 +106,8 @@ export function SiteFooter({
   };
 
   return (
-    <footer className="bg-ink text-paper">
+    <footer className="bg-ink text-paper" style={fontStyle(footerFont)}>
+      <SiteFontLinks requests={typographyFontRequests(typography)} />
       <div className="container-editorial py-20 md:py-28">
         <div className="grid gap-12 md:grid-cols-12">
           <div className="md:col-span-4">
@@ -76,7 +117,7 @@ export function SiteFooter({
             </p>
           </div>
           <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
-            {columns.map((col, i) => (
+            {visibleColumns.map((col, i) => (
               <div key={i} className="min-w-0">
                 <div className="eyebrow text-paper/80">{t(col.title)}</div>
                 <ul className="mt-4 space-y-2">

package/src/site/SiteHeader.tsx

@@ -10,9 +10,17 @@ import { Link, useRouterState } from "@tanstack/react-router";
 import { useEffect, useRef, useState } from "react";
 import { ChevronDown, Menu, X } from "lucide-react";
 
+import { useScheduleClock } from "../cms/use-schedule-clock";
+import type { SiteTypography } from "../config/typography";
 import { useT } from "../i18n";
 import type { LocalizedString } from "../i18n/types";
-import { navigationPanelId, renderableNavigation, type NavigationItem } from "../navigation";
+import {
+  navigationPanelId,
+  navigationSchedules,
+  renderableNavigation,
+  type NavigationItem,
+} from "../navigation";
+import { SiteFontLinks, fontStyle, slotFont, typographyFontRequests } from "./typography";
 
 export type SiteHeaderProps = {
   /**
@@ -42,6 +50,12 @@ export type SiteHeaderProps = {
    * un-scrolled header uses light text. Defaults to the home route.
    */
   lightTextPaths?: readonly string[];
+  /**
+   * Site typography. Only the `menu` slot is read here, and only when it names
+   * a Google family — otherwise the header renders no font-family at all and
+   * keeps inheriting the theme font exactly as before.
+   */
+  typography?: SiteTypography;
 };
 
 function NavEntry({ item, lightText }: { item: NavigationItem; lightText: boolean }) {
@@ -179,6 +193,7 @@ export function SiteHeader({
   menuLabels,
   backoffice,
   lightTextPaths = ["/"],
+  typography,
 }: SiteHeaderProps) {
   const { t, locale } = useT();
   const pathname = useRouterState({ select: (r) => r.location.pathname });
@@ -234,8 +249,12 @@ export function SiteHeader({
   const logo = onLightSurface && logoDarkSrc ? logoDarkSrc : logoSrc;
   const invertLogo = onLightSurface && !logoDarkSrc && invertLogoOnLightSurface;
   const showBackoffice = Boolean(backoffice?.signedIn);
+  // A page left open past a scheduled publish/hide time re-renders on the
+  // boundary instead of showing what was true when it loaded.
+  const now = useScheduleClock(navigationSchedules(nav));
   // Half-finished entries are the editor's business, not a visitor's.
-  const items = renderableNavigation(nav, locale);
+  const items = renderableNavigation(nav, locale, now);
+  const menuFont = slotFont(typography, "menu");
 
   return (
     <header
@@ -243,7 +262,9 @@ export function SiteHeader({
         "fixed inset-x-0 top-0 z-50 transition-all duration-500",
         scrolled ? "backdrop-blur-md bg-background/70 border-b border-border/50" : "bg-transparent",
       ].join(" ")}
+      style={fontStyle(menuFont)}
     >
+      <SiteFontLinks requests={typographyFontRequests(typography)} />
       <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

package/src/site/google-fonts.ts

@@ -0,0 +1,191 @@
+/**
+ * Google Fonts support, without an API key and without a runtime catalog fetch.
+ *
+ * The picker is backed by the static list below rather than the Google Fonts
+ * Developer API: an API key would have to reach the browser to query it, and a
+ * catalog request on every admin render is a lot of bytes for a select box.
+ * Any family Google serves can still be typed in by hand — the list is a
+ * shortcut, not a whitelist.
+ *
+ * Self-hosted WOFF2 fonts (`../site/font-bundle`) are untouched by this module.
+ * A site using them simply leaves typography on the theme default.
+ */
+
+import { DEFAULT_FONT_WEIGHTS, sanitizeFontFamily } from "../config/typography";
+
+/**
+ * Families offered in the picker. Deliberately a short, curated list of
+ * well-supported text faces rather than the full 1500-family catalog.
+ */
+export const GOOGLE_FONT_CATALOG = [
+  "Abril Fatface",
+  "Alegreya",
+  "Archivo",
+  "Arvo",
+  "Barlow",
+  "Bitter",
+  "Cabin",
+  "Cardo",
+  "Cormorant Garamond",
+  "Crimson Text",
+  "DM Sans",
+  "DM Serif Display",
+  "DM Serif Text",
+  "EB Garamond",
+  "Fira Sans",
+  "Fraunces",
+  "Heebo",
+  "IBM Plex Sans",
+  "IBM Plex Serif",
+  "Inter",
+  "Josefin Sans",
+  "Karla",
+  "Lato",
+  "Libre Baskerville",
+  "Libre Franklin",
+  "Lora",
+  "Manrope",
+  "Merriweather",
+  "Montserrat",
+  "Mulish",
+  "Newsreader",
+  "Noto Sans",
+  "Noto Serif",
+  "Nunito",
+  "Nunito Sans",
+  "Old Standard TT",
+  "Open Sans",
+  "Oswald",
+  "Outfit",
+  "Playfair Display",
+  "Plus Jakarta Sans",
+  "Poppins",
+  "PT Sans",
+  "PT Serif",
+  "Public Sans",
+  "Quicksand",
+  "Raleway",
+  "Roboto",
+  "Roboto Serif",
+  "Roboto Slab",
+  "Rubik",
+  "Sora",
+  "Source Sans 3",
+  "Source Serif 4",
+  "Space Grotesk",
+  "Spectral",
+  "Syne",
+  "Tenor Sans",
+  "Urbanist",
+  "Work Sans",
+] as const;
+
+/**
+ * Families that do not ship the usual range of weights.
+ *
+ * The picker offers 400 and 700 by default, and `css2` answers a request for a
+ * weight a family does not have with an error rather than a stylesheet — so
+ * asking DM Serif Display for 700 loses the font entirely, including the 400 it
+ * does have. Only families that are actually restricted are listed; anything
+ * absent is treated as unrestricted, which is the safe default for a family
+ * typed in by hand.
+ *
+ * These are all single-weight display faces: Google publishes one upright (and
+ * for some an italic), and no bold at all.
+ */
+export const GOOGLE_FONT_WEIGHTS: Readonly<Record<string, readonly number[]>> = {
+  "Abril Fatface": [400],
+  "DM Serif Display": [400],
+  "DM Serif Text": [400],
+  "Tenor Sans": [400],
+};
+
+/**
+ * The weights a family actually has, or `null` when nothing is known about it.
+ *
+ * `null` means "do not narrow anything" — the catalog above is a list of known
+ * exceptions, not a whitelist, and a hand-typed family must keep working.
+ */
+export function supportedFontWeights(family: string): readonly number[] | null {
+  return GOOGLE_FONT_WEIGHTS[sanitizeFontFamily(family)] ?? null;
+}
+
+/**
+ * The weights to actually request for a family.
+ *
+ * Unsupported weights are mapped to the nearest one the family has rather than
+ * dropped, because dropping every requested weight would drop the family: an
+ * editor who asks a 400-only face for bold should get its 400, not lose the
+ * font. De-duplicated, so 400 and 700 of a single-weight family cost one style.
+ */
+export function usableFontWeights(family: string, requested: readonly number[]): number[] {
+  const supported = supportedFontWeights(family);
+  if (!supported || supported.length === 0) return [...new Set(requested)].sort((a, b) => a - b);
+  const nearest = (want: number) =>
+    supported.reduce((best, w) => (Math.abs(w - want) < Math.abs(best - want) ? w : best));
+  return [...new Set(requested.map(nearest))].sort((a, b) => a - b);
+}
+
+/** Ranked catalog search for the picker: prefix matches first, then contains. */
+export function searchGoogleFonts(query: string, limit = 12): string[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return GOOGLE_FONT_CATALOG.slice(0, limit);
+  const starts: string[] = [];
+  const contains: string[] = [];
+  for (const family of GOOGLE_FONT_CATALOG) {
+    const lower = family.toLowerCase();
+    if (lower.startsWith(q)) starts.push(family);
+    else if (lower.includes(q)) contains.push(family);
+  }
+  return [...starts, ...contains].slice(0, limit);
+}
+
+export type FontRequest = { family: string; weights?: readonly number[] };
+
+/**
+ * One `css2` stylesheet URL for every family requested, or `null` when nothing
+ * needs loading. Families are merged and de-duplicated so asking for the same
+ * font in the menu and the footer costs a single request.
+ */
+export function googleFontsCssUrl(requests: readonly FontRequest[]): string | null {
+  const merged = new Map<string, Set<number>>();
+  for (const request of requests) {
+    const family = sanitizeFontFamily(request.family);
+    if (!family) continue;
+    const weights = merged.get(family) ?? new Set<number>();
+    for (const weight of request.weights?.length ? request.weights : DEFAULT_FONT_WEIGHTS) {
+      if (Number.isFinite(weight)) weights.add(weight);
+    }
+    merged.set(family, weights);
+  }
+  if (merged.size === 0) return null;
+
+  const families = [...merged.entries()]
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([family, weights]) => {
+      // Narrowed here rather than at the call sites: this is the one place every
+      // stylesheet URL is built, so a weight a family does not have cannot reach
+      // Google however it was configured — picker, hand-typed name, or settings
+      // stored before the family's limits were known.
+      const list = usableFontWeights(family, [...weights]);
+      return `family=${encodeURIComponent(family).replace(/%20/g, "+")}:wght@${list.join(";")}`;
+    });
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
+}
+
+export type HeadLink = Record<string, string>;
+
+/**
+ * `<link>` descriptors for a site's `head()`: the two preconnects Google
+ * recommends plus the stylesheet. Empty when no Google font is configured, so
+ * a site that never picks one ships no extra requests at all.
+ */
+export function googleFontsHeadLinks(requests: readonly FontRequest[]): HeadLink[] {
+  const href = googleFontsCssUrl(requests);
+  if (!href) return [];
+  return [
+    { rel: "preconnect", href: "https://fonts.googleapis.com" },
+    { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
+    { rel: "stylesheet", href },
+  ];
+}