@bygghammar/cms-platform 0.72.0 → 0.73.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.73.0
+
+- New **Countdown** block: timezone-aware deadline (IANA zone + wall clock),
+  localized heading, sub text, fine print and unit labels, theme-token colours
+  with per-field overrides, configurable rounding, tile size, gaps, spacing,
+  alignment, separators, borders and shadows, and a choice of what happens at
+  zero (hide the block, show a global block instead, or schedule a hidden page
+  to go live at the deadline). The editor shows the current time, the resolved
+  deadline and the remaining time live.
+
+
 ## 0.72.0
 
 - `HeroFullBlock`: four new "Text colour" options for busy media — light/dark text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.72.0",
+  "version": "0.73.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/inspectors/blocks.tsx

@@ -6,6 +6,14 @@
  */
 import { useEffect, useMemo, useState } from "react";
 import { BUTTON_COLOR_DEFAULTS, type ButtonColors } from "../../blocks/button-colors";
+import { COUNTDOWN_COLOR_DEFAULTS, type CountdownColors } from "../../blocks/countdown-colors";
+import {
+  COUNTDOWN_DEFAULT_TIMEZONE,
+  COUNTDOWN_TIMEZONES,
+  countdownParts,
+  formatInZone,
+  resolveCountdownTarget,
+} from "../../blocks/countdown-time";
 import type {
   BlockInstance,
   BlockProps,
@@ -37,6 +45,7 @@ import type {
   PriceTableProps,
   PriceGroup,
   IntroImageAspect,
+  CountdownProps,
 } from "../../blocks/types";
 import { INTRO_IMAGE_ASPECTS } from "../../blocks/types";
 import { BLOCK_ICON_NAMES, resolveBlockIcon } from "../../blocks/icons";
@@ -2391,3 +2400,301 @@ export {
   Toggle as InspectorToggle,
   uid as inspectorUid,
 };
+
+/* ---------------- Countdown ---------------- */
+export function CountdownInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as CountdownProps;
+  const update = (next: CountdownProps) => patch(next as unknown as BlockProps);
+
+  const timezone = p.timezone?.trim() || COUNTDOWN_DEFAULT_TIMEZONE;
+  const target = resolveCountdownTarget(p.targetLocal, timezone);
+
+  // Live clock so the editor always shows the real current time next to the
+  // deadline and the remaining time.
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const parts = countdownParts(target, now);
+
+  const colorRow = (label: string, key: keyof CountdownColors) => {
+    const current = (p.colors?.[key] ?? "").trim();
+    const swatch = current.startsWith("#") ? current : "#ffffff";
+    return (
+      <label key={key} className="block space-y-1.5">
+        <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+        <span className="flex items-center gap-2">
+          <input
+            type="color"
+            value={swatch}
+            onChange={(e) => update({ ...p, colors: { ...p.colors, [key]: e.target.value } })}
+            className="h-9 w-12 shrink-0 cursor-pointer border border-ink/15 bg-white p-0.5"
+            aria-label={`${label} colour picker`}
+          />
+          <input
+            type="text"
+            value={current}
+            placeholder={COUNTDOWN_COLOR_DEFAULTS[key]}
+            onChange={(e) => update({ ...p, colors: { ...p.colors, [key]: e.target.value } })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          />
+        </span>
+      </label>
+    );
+  };
+
+  const select = <T extends string>(
+    label: string,
+    value: T | undefined,
+    fallback: T,
+    options: { value: T; label: string }[],
+    onPick: (v: T) => void,
+  ) => (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value ?? fallback}
+        onChange={(e) => onPick(e.target.value as T)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+
+  const toggle = (label: string, value: boolean, onPick: (v: boolean) => void) => (
+    <label className="flex items-center gap-2 text-sm text-ink">
+      <input type="checkbox" checked={value} onChange={(e) => onPick(e.target.checked)} />
+      {label}
+    </label>
+  );
+
+  return (
+    <>
+      <InspectorSection title="Text above the timer">
+        <LocalizedField label="Heading" multiline value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Sub text" multiline value={p.body} onChange={(v) => update({ ...p, body: v })} />
+        <LocalizedField label="Fine print (under the timer)" value={p.note} onChange={(v) => update({ ...p, note: v })} />
+      </InspectorSection>
+
+      <InspectorSection title="Deadline">
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            Counts down to (date and time)
+          </span>
+          <input
+            type="datetime-local"
+            value={p.targetLocal ?? ""}
+            onChange={(e) => update({ ...p, targetLocal: e.target.value })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          />
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Timezone</span>
+          <select
+            value={timezone}
+            onChange={(e) => update({ ...p, timezone: e.target.value })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            {COUNTDOWN_TIMEZONES.map((tz) => (
+              <option key={tz} value={tz}>
+                {tz}
+              </option>
+            ))}
+          </select>
+        </label>
+        <div className="space-y-1 border border-ink/10 bg-paper/60 px-3 py-2.5 text-xs leading-relaxed text-ink/70">
+          <p>Time right now: {formatInZone(now, timezone)}</p>
+          <p>
+            Deadline:{" "}
+            {target == null ? "not set yet" : formatInZone(target, timezone)}
+          </p>
+          <p>
+            Time left:{" "}
+            {target == null
+              ? "—"
+              : parts.expired
+                ? "the timer has already reached zero"
+                : `${parts.days}d ${parts.hours}h ${parts.minutes}m ${parts.seconds}s`}
+          </p>
+        </div>
+      </InspectorSection>
+
+      <InspectorSection title="Unit labels">
+        <LocalizedField label="Days" value={p.labelDays} onChange={(v) => update({ ...p, labelDays: v })} />
+        <LocalizedField label="Hours" value={p.labelHours} onChange={(v) => update({ ...p, labelHours: v })} />
+        <LocalizedField label="Minutes" value={p.labelMinutes} onChange={(v) => update({ ...p, labelMinutes: v })} />
+        <LocalizedField label="Seconds" value={p.labelSeconds} onChange={(v) => update({ ...p, labelSeconds: v })} />
+        {toggle("Show days", p.showDays ?? true, (v) => update({ ...p, showDays: v }))}
+        {toggle("Hide days when less than a day is left", p.hideDaysWhenZero !== false, (v) =>
+          update({ ...p, hideDaysWhenZero: v }),
+        )}
+        {toggle("Show seconds", p.showSeconds ?? true, (v) => update({ ...p, showSeconds: v }))}
+      </InspectorSection>
+
+      <InspectorSection title="Colours">
+        <p className="text-xs leading-relaxed text-ink/60">
+          Leave a field empty to use the site theme. Accepts hex values such as #ff4f9a.
+        </p>
+        {colorRow("Section background", "sectionBg")}
+        {colorRow("Heading", "heading")}
+        {colorRow("Sub text", "subText")}
+        {colorRow("Number tile background", "tileBg")}
+        {colorRow("Numbers", "digit")}
+        {colorRow("Unit labels", "unit")}
+        {colorRow("Tile border", "border")}
+        <button
+          type="button"
+          onClick={() => update({ ...p, colors: {} })}
+          className="text-xs uppercase tracking-[0.18em] text-ink/60 underline hover:text-ink"
+        >
+          Reset colours to theme defaults
+        </button>
+      </InspectorSection>
+
+      <InspectorSection title="Layout">
+        {select(
+          "Corner rounding",
+          p.rounding,
+          "soft",
+          [
+            { value: "square", label: "Square" },
+            { value: "soft", label: "Soft" },
+            { value: "rounded", label: "Rounded" },
+            { value: "pill", label: "Pill" },
+            { value: "custom", label: "Custom value" },
+          ],
+          (v) => update({ ...p, rounding: v as CountdownProps["rounding"] }),
+        )}
+        {p.rounding === "custom" ? (
+          <TextField
+            label="Custom radius (e.g. 12px or 1.5rem)"
+            value={p.radius ?? ""}
+            onChange={(v) => update({ ...p, radius: v })}
+          />
+        ) : null}
+        {select(
+          "Tile size",
+          p.tileSize,
+          "md",
+          [
+            { value: "sm", label: "Small" },
+            { value: "md", label: "Medium" },
+            { value: "lg", label: "Large" },
+          ],
+          (v) => update({ ...p, tileSize: v as CountdownProps["tileSize"] }),
+        )}
+        {select(
+          "Space between tiles",
+          p.gap,
+          "md",
+          [
+            { value: "sm", label: "Tight" },
+            { value: "md", label: "Normal" },
+            { value: "lg", label: "Wide" },
+          ],
+          (v) => update({ ...p, gap: v as CountdownProps["gap"] }),
+        )}
+        {select(
+          "Section spacing",
+          p.padding,
+          "normal",
+          [
+            { value: "compact", label: "Compact" },
+            { value: "normal", label: "Normal" },
+            { value: "roomy", label: "Roomy" },
+          ],
+          (v) => update({ ...p, padding: v as CountdownProps["padding"] }),
+        )}
+        {select(
+          "Alignment",
+          p.align,
+          "center",
+          [
+            { value: "left", label: "Left" },
+            { value: "center", label: "Centered" },
+            { value: "right", label: "Right" },
+          ],
+          (v) => update({ ...p, align: v as CountdownProps["align"] }),
+        )}
+        {select(
+          "Separator between tiles",
+          p.separator,
+          "none",
+          [
+            { value: "none", label: "None" },
+            { value: "colon", label: "Colon" },
+          ],
+          (v) => update({ ...p, separator: v as CountdownProps["separator"] }),
+        )}
+        {toggle("Border around tiles", Boolean(p.showBorder), (v) => update({ ...p, showBorder: v }))}
+        {toggle("Shadow under tiles", Boolean(p.showShadow), (v) => update({ ...p, showShadow: v }))}
+        <TextField label="Anchor id" value={p.anchor ?? ""} onChange={(v) => update({ ...p, anchor: v })} />
+      </InspectorSection>
+
+      <InspectorSection title="When the timer reaches zero">
+        {select(
+          "Then",
+          p.onExpire,
+          "hide",
+          [
+            { value: "hide", label: "Stop showing this block" },
+            { value: "replace", label: "Show another (global) block instead" },
+            { value: "revealPage", label: "Publish a hidden page at the deadline" },
+          ],
+          (v) => update({ ...p, onExpire: v as CountdownProps["onExpire"] }),
+        )}
+        {p.onExpire === "replace" ? (
+          <TextField
+            label="Global block key to show instead"
+            value={p.expiredSectionKey ?? ""}
+            onChange={(v) => update({ ...p, expiredSectionKey: v })}
+          />
+        ) : null}
+        {p.onExpire === "revealPage" ? (
+          <>
+            <TextField
+              label="Page key to publish at the deadline"
+              value={p.revealPageKey ?? ""}
+              onChange={(v) => update({ ...p, revealPageKey: v })}
+            />
+            <p className="text-xs leading-relaxed text-ink/60">
+              The page is scheduled to go live at the deadline the next time you publish this page.
+              Nothing is deleted or unpublished.
+            </p>
+          </>
+        ) : null}
+        {p.onExpire !== "hide" ? (
+          <>
+            <LocalizedField
+              label="Message heading after the deadline"
+              value={p.expiredTitle}
+              onChange={(v) => update({ ...p, expiredTitle: v })}
+            />
+            <LocalizedField
+              label="Message text after the deadline"
+              multiline
+              value={p.expiredBody}
+              onChange={(v) => update({ ...p, expiredBody: v })}
+            />
+            <LocalizedField
+              label="Button label"
+              value={p.expiredCtaLabel}
+              onChange={(v) => update({ ...p, expiredCtaLabel: v })}
+            />
+            <TextField
+              label="Button link"
+              value={p.expiredCtaHref ?? ""}
+              onChange={(v) => update({ ...p, expiredCtaHref: v })}
+            />
+          </>
+        ) : null}
+      </InspectorSection>
+    </>
+  );
+}

package/src/backoffice/inspectors/index.tsx

@@ -40,6 +40,7 @@ import {
   IconGridInspector,
   ChecklistInspector,
   CtaBannerInspector,
+  CountdownInspector,
   MediaSplitInspector,
   type BlockPatchProps,
 } from "./blocks";
@@ -748,6 +749,8 @@ export function BlockInspector({
     case "tripList":
     case "courseList":
       return <TripListInspector block={block} patch={patch} />;
+    case "countdown":
+      return <CountdownInspector block={block} patch={patch} />;
     case "ctaBanner":
       return <CtaBannerInspector block={block} patch={patch} />;
     case "mediaSplit":

package/src/blocks/components/CountdownBlock.tsx

@@ -0,0 +1,188 @@
+import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+
+import { useT } from "../../i18n";
+import type { LocalizedString } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { countdownColorStyle, countdownRadius } from "../countdown-colors";
+import { countdownParts, resolveCountdownTarget } from "../countdown-time";
+import { useCountdownReplacement } from "../countdown-replacement";
+import type { CountdownProps } from "../types";
+
+const TILE_SIZE = {
+  sm: { box: "min-w-14 px-3 py-2.5", digit: "text-2xl md:text-3xl", unit: "text-[0.55rem]" },
+  md: { box: "min-w-20 px-4 py-3.5", digit: "text-3xl md:text-5xl", unit: "text-[0.6rem]" },
+  lg: { box: "min-w-28 px-6 py-5", digit: "text-4xl md:text-6xl", unit: "text-[0.68rem]" },
+} as const;
+
+const GAP = { sm: "gap-2", md: "gap-3 md:gap-4", lg: "gap-5 md:gap-7" } as const;
+const PADDING = {
+  compact: "py-8 md:py-10",
+  normal: "py-14 md:py-20",
+  roomy: "py-20 md:py-32",
+} as const;
+const ALIGN = {
+  left: { wrap: "items-start text-left", row: "justify-start" },
+  center: { wrap: "items-center text-center", row: "justify-center" },
+  right: { wrap: "items-end text-right", row: "justify-end" },
+} as const;
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+/**
+ * Localized, timezone-aware countdown with fully configurable colours, corner
+ * rounding and expiry behaviour.
+ */
+export function CountdownBlock({ props: p }: { props: CountdownProps }) {
+  const { t } = useT();
+  const replacement = useCountdownReplacement();
+
+  const target = useMemo(
+    () => resolveCountdownTarget(p.targetLocal, p.timezone),
+    [p.targetLocal, p.timezone],
+  );
+
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (target == null) return;
+    let timer: ReturnType<typeof setInterval> | undefined;
+    const tick = () => setNow(Date.now());
+    const start = () => {
+      stop();
+      tick();
+      timer = setInterval(tick, 1000);
+    };
+    const stop = () => {
+      if (timer) clearInterval(timer);
+      timer = undefined;
+    };
+    const onVisibility = () => (document.hidden ? stop() : start());
+    start();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [target]);
+
+  const parts = countdownParts(target, now);
+  const expired = parts.expired;
+  const onExpire = p.onExpire ?? "hide";
+
+  const size = TILE_SIZE[p.tileSize ?? "md"];
+  const align = ALIGN[p.align ?? "center"];
+  const radius = countdownRadius(p.rounding, p.radius);
+  const style = {
+    ...countdownColorStyle(p.colors),
+    ["--cd-radius" as string]: radius,
+  } as CSSProperties;
+
+  const section = (children: ReactNode) => (
+    <section
+      id={p.anchor || undefined}
+      style={style}
+      className={`bg-[var(--cd-section-bg)] ${PADDING[p.padding ?? "normal"]}`}
+    >
+      <div className="container-editorial">
+        <Reveal>
+          <div className={`flex flex-col ${align.wrap}`}>{children}</div>
+        </Reveal>
+      </div>
+    </section>
+  );
+
+  const heading = (title?: Partial<LocalizedString>, body?: Partial<LocalizedString>) => (
+    <>
+      {t(title) ? (
+        <h2 className="font-serif text-[clamp(1.6rem,3.6vw,2.9rem)] leading-[1.1] tracking-[-0.02em] whitespace-pre-line text-[var(--cd-heading)]">
+          {t(title)}
+        </h2>
+      ) : null}
+      {t(body) ? (
+        <p className="mt-4 max-w-2xl text-base md:text-lg leading-relaxed whitespace-pre-line text-[var(--cd-sub)]">
+          {t(body)}
+        </p>
+      ) : null}
+    </>
+  );
+
+  /* ---------- Expired ---------- */
+  if (expired) {
+    if (onExpire === "hide") return null;
+    if (onExpire === "replace" && replacement) return <>{replacement}</>;
+    // "replace" without a global block, and "revealPage", both show the
+    // configured expired message (plus an optional link to the revealed page).
+    const href = p.expiredCtaHref?.trim() || (p.revealPageKey?.trim() ? `/${p.revealPageKey.trim()}` : "");
+    const label = t(p.expiredCtaLabel);
+    return section(
+      <>
+        {heading(p.expiredTitle, p.expiredBody)}
+        {href && label ? (
+          <a
+            href={href}
+            className="mt-8 inline-flex items-center gap-2 rounded-[var(--cd-radius)] bg-[var(--cd-tile-bg)] px-7 py-4 text-xs uppercase tracking-[0.22em] text-[var(--cd-digit)] transition-opacity hover:opacity-90"
+          >
+            {label}
+          </a>
+        ) : null}
+      </>,
+    );
+  }
+
+  /* ---------- Running ---------- */
+  const showDays = (p.showDays ?? true) && !(p.hideDaysWhenZero !== false && parts.days === 0);
+  const units: { value: string; label?: Partial<LocalizedString> }[] = [
+    ...(showDays ? [{ value: pad(parts.days), label: p.labelDays }] : []),
+    { value: pad(parts.hours), label: p.labelHours },
+    { value: pad(parts.minutes), label: p.labelMinutes },
+    ...((p.showSeconds ?? true) ? [{ value: pad(parts.seconds), label: p.labelSeconds }] : []),
+  ];
+
+  const border = p.showBorder ? "border border-[var(--cd-border)]" : "";
+  const shadow = p.showShadow ? "shadow-lg shadow-black/10" : "";
+
+  return section(
+    <>
+      {heading(p.title, p.body)}
+      <div
+        className={`mt-8 flex flex-wrap items-stretch ${GAP[p.gap ?? "md"]} ${align.row}`}
+        aria-live="off"
+      >
+        {units.map((u, i) => (
+          <div key={i} className="flex items-stretch">
+            <div
+              className={`flex flex-col items-center justify-center bg-[var(--cd-tile-bg)] ${size.box} ${border} ${shadow}`}
+              style={{ borderRadius: "var(--cd-radius)" }}
+            >
+              <span
+                suppressHydrationWarning
+                className={`font-semibold tabular-nums leading-none text-[var(--cd-digit)] ${size.digit}`}
+              >
+                {u.value}
+              </span>
+              {t(u.label) ? (
+                <span
+                  className={`mt-1.5 uppercase tracking-[0.18em] text-[var(--cd-unit)] ${size.unit}`}
+                >
+                  {t(u.label)}
+                </span>
+              ) : null}
+            </div>
+            {p.separator === "colon" && i < units.length - 1 ? (
+              <span
+                className={`self-center px-1 font-semibold text-[var(--cd-heading)] ${size.digit}`}
+                aria-hidden="true"
+              >
+                :
+              </span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+      {t(p.note) ? (
+        <p className="mt-5 text-xs uppercase tracking-[0.18em] text-[var(--cd-sub)]">
+          {t(p.note)}
+        </p>
+      ) : null}
+    </>,
+  );
+}

package/src/blocks/countdown-colors.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Editable colours for the countdown block. Every value is a plain CSS colour
+ * string (hex, rgb(), oklch(), var(--token)). Empty/undefined values fall back
+ * to the site theme tokens below, so a fresh site looks right with no setup.
+ */
+export type CountdownColors = {
+  /** Section background. */
+  sectionBg?: string;
+  /** Heading colour. */
+  heading?: string;
+  /** Sub-text (and fine print) colour. */
+  subText?: string;
+  /** Digit tile background. */
+  tileBg?: string;
+  /** Digit colour. */
+  digit?: string;
+  /** Unit label colour (DAYS/HOURS…). */
+  unit?: string;
+  /** Tile border colour (only visible when the border is switched on). */
+  border?: string;
+};
+
+export const COUNTDOWN_COLOR_DEFAULTS: Required<CountdownColors> = {
+  sectionBg: "transparent",
+  heading: "var(--sea)",
+  subText: "var(--ink)",
+  tileBg: "var(--sea)",
+  digit: "#ffffff",
+  unit: "#ffffff",
+  border: "var(--ink)",
+};
+
+/** Inline CSS variables for the countdown colours, with theme defaults applied. */
+export function countdownColorStyle(colors?: CountdownColors): CSSProperties {
+  const pick = (key: keyof CountdownColors) =>
+    colors?.[key]?.trim() || COUNTDOWN_COLOR_DEFAULTS[key];
+  return {
+    ["--cd-section-bg" as string]: pick("sectionBg"),
+    ["--cd-heading" as string]: pick("heading"),
+    ["--cd-sub" as string]: pick("subText"),
+    ["--cd-tile-bg" as string]: pick("tileBg"),
+    ["--cd-digit" as string]: pick("digit"),
+    ["--cd-unit" as string]: pick("unit"),
+    ["--cd-border" as string]: pick("border"),
+  } as CSSProperties;
+}
+
+/** Corner rounding presets; `custom` uses the block's `radius` value. */
+export const COUNTDOWN_ROUNDING = ["square", "soft", "rounded", "pill", "custom"] as const;
+export type CountdownRounding = (typeof COUNTDOWN_ROUNDING)[number];
+
+export function countdownRadius(
+  rounding: CountdownRounding | undefined,
+  custom: string | undefined,
+): string {
+  switch (rounding ?? "soft") {
+    case "square":
+      return "0px";
+    case "rounded":
+      return "1rem";
+    case "pill":
+      return "9999px";
+    case "custom":
+      return custom?.trim() || "0.5rem";
+    case "soft":
+    default:
+      return "0.5rem";
+  }
+}

package/src/blocks/countdown-replacement.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+/**
+ * Replacement content for an expired countdown.
+ *
+ * The page renderer resolves the global block chosen in the inspector and puts
+ * the rendered nodes here, so the countdown block itself stays free of any
+ * data-fetching.
+ */
+const Ctx = createContext<ReactNode>(null);
+
+export function CountdownReplacementProvider({
+  value,
+  children,
+}: {
+  value: ReactNode;
+  children: ReactNode;
+}) {
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+}
+
+export function useCountdownReplacement(): ReactNode {
+  return useContext(Ctx);
+}

package/src/blocks/countdown-time.ts

@@ -0,0 +1,128 @@
+/**
+ * Timezone-aware countdown maths.
+ *
+ * The editor stores a wall-clock date/time (`2026-09-07T16:00`) plus an IANA
+ * timezone (`Europe/Stockholm`). That pair is resolved to one absolute instant,
+ * so every visitor — wherever they are — counts down to the same moment.
+ * Only `Intl` is used, no extra dependency.
+ */
+
+/** A short list of zones offered in the editor; any IANA zone can be typed. */
+export const COUNTDOWN_TIMEZONES = [
+  "Europe/Stockholm",
+  "Europe/Oslo",
+  "Europe/Copenhagen",
+  "Europe/Helsinki",
+  "Europe/London",
+  "Europe/Berlin",
+  "Europe/Madrid",
+  "Europe/Athens",
+  "UTC",
+  "America/New_York",
+  "America/Chicago",
+  "America/Los_Angeles",
+  "Asia/Dubai",
+  "Asia/Bangkok",
+  "Asia/Tokyo",
+  "Australia/Sydney",
+] as const;
+
+export const COUNTDOWN_DEFAULT_TIMEZONE = "Europe/Stockholm";
+
+function safeZone(tz?: string): string {
+  const zone = tz?.trim() || COUNTDOWN_DEFAULT_TIMEZONE;
+  try {
+    new Intl.DateTimeFormat("en-GB", { timeZone: zone });
+    return zone;
+  } catch {
+    return "UTC";
+  }
+}
+
+/** Offset (ms) of `tz` from UTC at the given instant. */
+export function timezoneOffsetMs(instant: number, tz: string): number {
+  const zone = safeZone(tz);
+  const parts = new Intl.DateTimeFormat("en-GB", {
+    timeZone: zone,
+    hour12: false,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  }).formatToParts(new Date(instant));
+  const get = (type: string) => Number(parts.find((p) => p.type === type)?.value ?? "0");
+  const asUtc = Date.UTC(
+    get("year"),
+    get("month") - 1,
+    get("day"),
+    get("hour") % 24,
+    get("minute"),
+    get("second"),
+  );
+  return asUtc - instant;
+}
+
+/**
+ * Resolve `YYYY-MM-DDTHH:mm` in `tz` to an absolute timestamp (ms).
+ * Returns `null` when the value is empty or unparsable.
+ */
+export function resolveCountdownTarget(local?: string, tz?: string): number | null {
+  const raw = local?.trim();
+  if (!raw) return null;
+  const m = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?$/.exec(raw);
+  if (!m) return null;
+  const [, y, mo, d, h, mi, s] = m;
+  const naive = Date.UTC(
+    Number(y),
+    Number(mo) - 1,
+    Number(d),
+    Number(h ?? "0"),
+    Number(mi ?? "0"),
+    Number(s ?? "0"),
+  );
+  const zone = safeZone(tz);
+  // Two passes settle DST boundaries (the offset itself depends on the instant).
+  let instant = naive - timezoneOffsetMs(naive, zone);
+  instant = naive - timezoneOffsetMs(instant, zone);
+  return instant;
+}
+
+export type CountdownParts = {
+  total: number;
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  expired: boolean;
+};
+
+/** Remaining time between `now` and `target`, clamped at zero. */
+export function countdownParts(target: number | null, now: number): CountdownParts {
+  const total = target == null ? 0 : Math.max(0, target - now);
+  const secs = Math.floor(total / 1000);
+  return {
+    total,
+    days: Math.floor(secs / 86400),
+    hours: Math.floor((secs % 86400) / 3600),
+    minutes: Math.floor((secs % 3600) / 60),
+    seconds: secs % 60,
+    expired: target != null && total <= 0,
+  };
+}
+
+/** Human wall-clock text for an instant in a zone, e.g. "7 Sep 2026, 16:00 CEST". */
+export function formatInZone(instant: number, tz?: string, locale = "en-GB"): string {
+  const zone = safeZone(tz);
+  return new Intl.DateTimeFormat(locale, {
+    timeZone: zone,
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    timeZoneName: "short",
+  }).format(new Date(instant));
+}

package/src/blocks/index.ts

@@ -1,6 +1,7 @@
 export { CabinTabsBlock } from "./components/CabinTabsBlock";
 export { ChecklistBlock } from "./components/ChecklistBlock";
 export { CtaBannerBlock } from "./components/CtaBannerBlock";
+export { CountdownBlock } from "./components/CountdownBlock";
 export { FaqBlock } from "./components/FaqBlock";
 export { HeroFullBlock } from "./components/HeroFullBlock";
 export { IconGridBlock } from "./components/IconGridBlock";
@@ -17,3 +18,24 @@ export {
   buttonColorStyle,
   type ButtonColors,
 } from "./button-colors";
+export {
+  COUNTDOWN_COLOR_DEFAULTS,
+  COUNTDOWN_ROUNDING,
+  countdownColorStyle,
+  countdownRadius,
+  type CountdownColors,
+  type CountdownRounding,
+} from "./countdown-colors";
+export {
+  COUNTDOWN_DEFAULT_TIMEZONE,
+  COUNTDOWN_TIMEZONES,
+  countdownParts,
+  formatInZone,
+  resolveCountdownTarget,
+  timezoneOffsetMs,
+  type CountdownParts,
+} from "./countdown-time";
+export {
+  CountdownReplacementProvider,
+  useCountdownReplacement,
+} from "./countdown-replacement";

package/src/blocks/registry.tsx

@@ -6,6 +6,7 @@ import { RichTextBlock } from "./components/RichTextBlock";
 import { ChecklistBlock } from "./components/ChecklistBlock";
 import { IconGridBlock } from "./components/IconGridBlock";
 import { CtaBannerBlock } from "./components/CtaBannerBlock";
+import { CountdownBlock } from "./components/CountdownBlock";
 import { MediaSplitBlock } from "./components/MediaSplitBlock";
 import { HeroFullBlock } from "./components/HeroFullBlock";
 import { ImageMarqueeBlock } from "./components/ImageMarqueeBlock";
@@ -23,6 +24,7 @@ import type {
   ChecklistProps,
   IconGridProps,
   CtaBannerProps,
+  CountdownProps,
   MediaSplitProps,
   HeroFullProps,
   ImageMarqueeProps,
@@ -167,6 +169,35 @@ export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
     } satisfies IconGridProps as unknown as BlockProps,
     hasInlineContent: true,
   },
+  countdown: {
+    type: "countdown",
+    label: "Countdown",
+    description:
+      "Timezone-aware countdown with heading, translated unit labels, fully configurable colours and a choice of what happens at zero.",
+    category: "content",
+    component: ({ props }) => <CountdownBlock props={props as CountdownProps} />,
+    defaultProps: {
+      title: { sv: "BOKNINGEN \u00d6PPNAR", en: "BOOKING OPENS" },
+      body: { sv: "", en: "" },
+      targetLocal: "",
+      timezone: "Europe/Stockholm",
+      labelDays: { sv: "DAGAR", en: "DAYS" },
+      labelHours: { sv: "TIMMAR", en: "HOURS" },
+      labelMinutes: { sv: "MINUTER", en: "MINUTES" },
+      labelSeconds: { sv: "SEKUNDER", en: "SECONDS" },
+      showDays: true,
+      hideDaysWhenZero: true,
+      showSeconds: true,
+      rounding: "soft",
+      tileSize: "md",
+      gap: "md",
+      padding: "normal",
+      align: "center",
+      separator: "none",
+      onExpire: "hide",
+    } satisfies CountdownProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
   ctaBanner: {
     type: "ctaBanner",
     label: "CTA banner",

package/src/blocks/types.ts

@@ -1,4 +1,5 @@
 import type { ButtonColors } from "./button-colors";
+import type { CountdownColors, CountdownRounding } from "./countdown-colors";
 import type { LocalizedString } from "../i18n";
 
 /**
@@ -448,3 +449,61 @@ export type FormProps = {
   tone?: "white" | "paper" | "ink";
   anchor?: string;
 };
+
+/** ---- Countdown (timezone-aware timer with configurable expiry) ---- */
+
+/** What happens once the countdown reaches zero. */
+export type CountdownExpiryAction = "hide" | "replace" | "revealPage";
+
+export type CountdownProps = {
+  /** Heading above the timer. */
+  title?: Partial<LocalizedString>;
+  /** Sub text under the heading. */
+  body?: Partial<LocalizedString>;
+  /** Fine print under the timer. */
+  note?: Partial<LocalizedString>;
+
+  /** Deadline as wall-clock time, `YYYY-MM-DDTHH:mm`. */
+  targetLocal?: string;
+  /** IANA timezone the deadline is expressed in, e.g. `Europe/Stockholm`. */
+  timezone?: string;
+
+  /** Unit labels, translated per language. */
+  labelDays?: Partial<LocalizedString>;
+  labelHours?: Partial<LocalizedString>;
+  labelMinutes?: Partial<LocalizedString>;
+  labelSeconds?: Partial<LocalizedString>;
+  showDays?: boolean;
+  /** Drop the days tile once fewer than 24 hours remain (default true). */
+  hideDaysWhenZero?: boolean;
+  showSeconds?: boolean;
+
+  /** Colours; empty values fall back to the site theme. */
+  colors?: CountdownColors;
+
+  /** Layout. */
+  rounding?: CountdownRounding;
+  /** Custom corner radius, used when `rounding` is `custom`. */
+  radius?: string;
+  tileSize?: "sm" | "md" | "lg";
+  gap?: "sm" | "md" | "lg";
+  padding?: "compact" | "normal" | "roomy";
+  align?: "left" | "center" | "right";
+  separator?: "none" | "colon";
+  showBorder?: boolean;
+  showShadow?: boolean;
+
+  /** Expiry behaviour. */
+  onExpire?: CountdownExpiryAction;
+  /** Global block rendered instead of the countdown when it expires. */
+  expiredSectionKey?: string;
+  /** Fallback message when no global block is chosen. */
+  expiredTitle?: Partial<LocalizedString>;
+  expiredBody?: Partial<LocalizedString>;
+  expiredCtaLabel?: Partial<LocalizedString>;
+  expiredCtaHref?: string;
+  /** Page key scheduled to go live at the deadline (`revealPage`). */
+  revealPageKey?: string;
+
+  anchor?: string;
+};

package/src/server/pages-core.ts

@@ -16,6 +16,7 @@ import {
   invalidatePublishedCache,
   withPublishedCache,
 } from "./published-cache";
+import { resolveCountdownTarget } from "../blocks/countdown-time";
 import { resolveGlobalsDeep } from "./resolve-globals";
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -179,10 +180,75 @@ export async function savePageVersionCore(
       published_by: context.userId,
     });
     await context.supabase.from("pages").update({ status: "published" }).eq("id", input.pageId);
+    await scheduleCountdownReveals(context, input.blocks);
   }
   return { versionId: inserted.id as string, versionNo: nextNo };
 }
 
+/**
+ * A countdown set to "reveal a hidden page" schedules that page to publish at
+ * the deadline, reusing the normal time-based publication window. Nothing is
+ * ever unpublished or deleted here.
+ */
+async function scheduleCountdownReveals(
+  context: PagesDeps["context"],
+  blocks: BlockInstance[],
+) {
+  const reveals = blocks
+    .filter((b) => b.type === "countdown")
+    .map((b) => b.props as { onExpire?: string; revealPageKey?: string; targetLocal?: string; timezone?: string } | undefined)
+    .filter((p): p is { onExpire: string; revealPageKey: string; targetLocal: string; timezone?: string } =>
+      Boolean(p && p.onExpire === "revealPage" && p.revealPageKey?.trim() && p.targetLocal?.trim()),
+    );
+
+  for (const reveal of reveals) {
+    const at = resolveCountdownTarget(reveal.targetLocal, reveal.timezone);
+    if (at == null) continue;
+    const publishAt = new Date(at).toISOString();
+    const { data: target } = await context.supabase
+      .from("pages")
+      .select("id, current_version_id")
+      .eq("key", reveal.revealPageKey.trim())
+      .is("deleted_at", null)
+      .maybeSingle();
+    if (!target?.current_version_id) continue;
+
+    const { data: existing } = await context.supabase
+      .from("page_publications")
+      .select("id")
+      .eq("page_id", target.id)
+      .eq("version_id", target.current_version_id)
+      .eq("publish_at", publishAt)
+      .eq("is_active", true)
+      .maybeSingle();
+    if (existing) continue;
+
+    await context.supabase
+      .from("page_publications")
+      .update({ is_active: false })
+      .eq("page_id", target.id)
+      .eq("is_active", true);
+    await context.supabase.from("page_publications").insert({
+      page_id: target.id,
+      version_id: target.current_version_id,
+      is_active: true,
+      publish_at: publishAt,
+      published_by: context.userId,
+    });
+    await context.supabase.from("pages").update({ status: "published" }).eq("id", target.id);
+    await context.supabase.from("audit_logs").insert({
+      actor_id: context.userId,
+      action: "page.schedule",
+      entity: "pages",
+      entity_id: target.id,
+      meta: {
+        description: `Scheduled the page "${reveal.revealPageKey.trim()}" to go live at ${publishAt} because a countdown block reveals it when the timer reaches zero.`,
+        publish_at: publishAt,
+      },
+    });
+  }
+}
+
 export async function listPageVersionsCore(deps: PagesDeps, pageId: string) {
   const { context, admin } = deps;
   await assertStaff(context);

package/src/server/resolve-globals.ts

@@ -18,8 +18,13 @@ export type GlobalsReadClient = {
 
 function refKeysOf(blocks: BlockInstance[]): string[] {
   return blocks
-    .filter((b) => b.type === "globalRef")
-    .map((b) => String((b.props as BlockProps | undefined)?.sectionKey ?? ""))
+    .map((b) => {
+      const props = b.props as (BlockProps & { expiredSectionKey?: string }) | undefined;
+      if (b.type === "globalRef") return String(props?.sectionKey ?? "");
+      // An expired countdown may render a global block in its place.
+      if (b.type === "countdown") return String(props?.expiredSectionKey ?? "");
+      return "";
+    })
     .filter(Boolean);
 }
 

package/src/site/PageRenderer.tsx

@@ -8,6 +8,7 @@
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 
 import { PriorityMediaProvider } from "../media/priority";
+import { CountdownReplacementProvider } from "../blocks/countdown-replacement";
 import type { BlockDef } from "../blocks/registry";
 import type { BlockInstance, BlockProps } from "../blocks/types";
 
@@ -62,7 +63,35 @@ function RenderBlock({
   const def = registry[block.type];
   if (!def) return null;
   const Cmp = def.component;
-  const rendered = <Cmp props={(block.props ?? {}) as BlockProps} />;
+  let rendered = <Cmp props={(block.props ?? {}) as BlockProps} />;
+
+  // An expired countdown can show a global block instead of itself; resolve it
+  // here so the block component stays free of data access.
+  if (block.type === "countdown") {
+    const props = (block.props ?? {}) as BlockProps & {
+      onExpire?: string;
+      expiredSectionKey?: string;
+    };
+    const key = props.onExpire === "replace" ? String(props.expiredSectionKey ?? "") : "";
+    const inner = key ? (globals[key] ?? []) : [];
+    if (inner.length > 0) {
+      rendered = (
+        <CountdownReplacementProvider
+          value={inner.map((b) => (
+            <RenderBlock
+              key={b.id}
+              block={b}
+              globals={globals}
+              registry={registry}
+              edit={false}
+            />
+          ))}
+        >
+          {rendered}
+        </CountdownReplacementProvider>
+      );
+    }
+  }
 
   if (!edit) return rendered;