@bygghammar/cms-platform 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.55.0
+
+- Public departures list is now package-owned: `blocks/components/TripListBlock`,
+  registered as the shared `tripList` block (with the legacy `courseList` alias).
+- New optional site adapter `useSiteActions` supplies shared call-to-action
+  labels (booking button) with brand-neutral defaults.
+- New shared utilities: `util/use-hash-scroll` and `site/site-url`.
+
 ## 0.54.0
 
 - `forms/FormRenderer`: the whole public managed-form runtime (validation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.54.0",
+  "version": "0.55.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": [
@@ -201,7 +201,9 @@
     "./server/media-usage-host": "./src/server/media-usage-host.ts",
     "./runtime/server-entry": "./src/runtime/server-entry.ts",
     "./site/indexing": "./src/site/indexing.ts",
-    "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx"
+    "./backoffice/IndexingStatusCard": "./src/backoffice/IndexingStatusCard.tsx",
+    "./util/use-hash-scroll": "./src/util/use-hash-scroll.ts",
+    "./site/site-url": "./src/site/site-url.ts"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/blocks/components/TripListBlock.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from "react";
+import { ArrowRight, Sparkles } from "lucide-react";
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { useHostSiteActions, useHostTripSource } from "../../host";
+import { tripNumber, type TripItem, type TripListProps } from "../../trips";
+
+/**
+ * Grid of bookable trips/departures.
+ *
+ * Items come either from the block's own props (`source: "custom"`) or from the
+ * site's single central source registered as the `useTripSource` adapter, so a
+ * page can show its own selection or a filtered year of the global list.
+ *
+ * Structure only: every colour comes from the shared design tokens, so each
+ * site keeps its own look without forking this component.
+ */
+export function TripListBlock({ props }: { props: TripListProps }) {
+  const { t } = useT();
+  const actions = useHostSiteActions();
+  const source = useHostTripSource() as TripItem[];
+  const globalItems = (source ?? []).map((c, i) => ({ ...c, id: c.id ?? `global-${i}` }));
+  const items: TripItem[] =
+    props.source === "custom"
+      ? (props.items ?? [])
+      : props.year
+        ? globalItems.filter((c) => String(c.year ?? "") === String(props.year))
+        : globalItems;
+  const tone = props.tone === "paper" ? "bg-paper" : "bg-white";
+  const cols =
+    props.columns === 2
+      ? "sm:grid-cols-2"
+      : props.columns === 4
+        ? "sm:grid-cols-2 lg:grid-cols-4"
+        : "sm:grid-cols-2 lg:grid-cols-3";
+
+  // The accent "focus" treatment is a mobile-only affordance: on stacked phone
+  // layouts the card nearest the viewport centre lights up while scrolling.
+  // From `sm:` up every card stays neutral.
+  const cardRefs = useRef<Array<HTMLElement | null>>([]);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 639px)");
+    let raf = 0;
+
+    const measure = () => {
+      raf = 0;
+      const mid = window.innerHeight / 2;
+      let best: number | null = null;
+      let bestDist = Infinity;
+      cardRefs.current.forEach((el, i) => {
+        if (!el) return;
+        const r = el.getBoundingClientRect();
+        if (r.bottom <= 0 || r.top >= window.innerHeight) return;
+        const dist = Math.abs(r.top + r.height / 2 - mid);
+        if (dist < bestDist) {
+          bestDist = dist;
+          best = i;
+        }
+      });
+      setActiveIndex(best);
+    };
+
+    const onScroll = () => {
+      if (!raf) raf = window.requestAnimationFrame(measure);
+    };
+
+    const attach = () => {
+      if (mq.matches) {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll);
+        measure();
+      } else {
+        window.removeEventListener("scroll", onScroll);
+        window.removeEventListener("resize", onScroll);
+        setActiveIndex(null);
+      }
+    };
+
+    attach();
+    mq.addEventListener("change", attach);
+    return () => {
+      mq.removeEventListener("change", attach);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (raf) window.cancelAnimationFrame(raf);
+    };
+  }, [items.length]);
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-20 md:py-28`}>
+      <div className="container-editorial">
+        {(props.eyebrow || props.title || props.lead) && (
+          <Reveal>
+            <div className="max-w-3xl">
+              {props.eyebrow ? (
+                <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/70">
+                  {t(props.eyebrow)}
+                </span>
+              ) : null}
+              {props.title ? (
+                <h2 className="mt-4 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] text-ink whitespace-pre-line">
+                  {t(props.title)}
+                </h2>
+              ) : null}
+              {props.lead ? (
+                <p className="mt-5 max-w-2xl text-base md:text-lg leading-relaxed text-ink/75 whitespace-pre-line">
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        )}
+
+        <div className={`mt-12 md:mt-16 grid gap-5 ${cols}`}>
+          {items.map((c, i) => (
+            <Reveal key={c.id ?? i} delay={i * 60}>
+              <article
+                ref={(el) => {
+                  cardRefs.current[i] = el;
+                }}
+                className={[
+                  "group relative flex h-full flex-col justify-between bg-card p-7 md:p-8 text-ink border transition-all",
+                  activeIndex === i
+                    ? "border-sea shadow-[0_20px_60px_-30px_rgba(42,196,234,0.55)]"
+                    : "border-ink/10 hover:border-ink/25",
+                ].join(" ")}
+              >
+                {activeIndex === i && (
+                  <span
+                    aria-hidden
+                    className="absolute inset-x-0 top-0 h-[3px]"
+                    style={{ backgroundColor: "var(--sea)" }}
+                  />
+                )}
+                <div>
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/70">
+                      {t(tripNumber(c))}
+                    </div>
+                    {c.badge ? (
+                      <span
+                        className="inline-flex items-center gap-1 px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.2em] text-ink"
+                        style={{ backgroundColor: "var(--sea)" }}
+                      >
+                        <Sparkles className="size-3" />
+                        {t(c.badge)}
+                      </span>
+                    ) : null}
+                  </div>
+                  <h3 className="mt-2 font-serif text-2xl md:text-[1.85rem] leading-tight tracking-[-0.01em] whitespace-pre-line">
+                    {t(c.location)}
+                  </h3>
+                  <div className="mt-4 space-y-1.5 border-t border-ink/10 pt-4 text-sm text-ink/70">
+                    <div>{t(c.dates)}</div>
+                    <div>{t(c.accommodation)}</div>
+                  </div>
+                </div>
+                <div className="mt-8">
+                  <div className="flex flex-wrap items-baseline gap-2">
+                    <span className="font-serif text-3xl tracking-[-0.01em]">{t(c.price)}</span>
+                    {c.oldPrice ? (
+                      <span className="text-sm text-ink/65 line-through">{t(c.oldPrice)}</span>
+                    ) : null}
+                  </div>
+                  {c.bookUrl ? (
+                    <a
+                      href={c.bookUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="mt-6 inline-flex w-full items-center justify-center gap-2 bg-ink px-5 py-3 text-xs uppercase tracking-[0.22em] text-paper transition-colors hover:bg-ink/85"
+                    >
+                      {c.bookLabel ? t(c.bookLabel) : t(actions.book)}
+                      <ArrowRight className="size-4" />
+                    </a>
+                  ) : null}
+                </div>
+              </article>
+            </Reveal>
+          ))}
+        </div>
+
+        {props.note ? (
+          <Reveal>
+            <p className="mt-8 max-w-3xl text-sm leading-relaxed text-ink/70 whitespace-pre-line">
+              {t(props.note)}
+            </p>
+          </Reveal>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+/** @deprecated Legacy alias; `courseList` blocks render the trips list. */
+export const CourseListBlock = TripListBlock;

package/src/blocks/registry.tsx

@@ -13,6 +13,7 @@ import { LinkTilesBlock } from "./components/LinkTilesBlock";
 import { CabinTabsBlock } from "./components/CabinTabsBlock";
 import { PriceTableBlock } from "./components/PriceTableBlock";
 import { FormBlock } from "./components/FormBlock";
+import { TripListBlock } from "./components/TripListBlock";
 import type {
   BlockProps,
   FaqProps,
@@ -29,6 +30,7 @@ import type {
   CabinTabsProps,
   PriceTableProps,
   FormProps,
+  TripListProps,
 } from "./types";
 import { BlockPropsProvider } from "./block-props-context";
 
@@ -324,6 +326,39 @@ export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
     } satisfies FormProps as unknown as BlockProps,
     hasInlineContent: true,
   },
+  tripList: {
+    type: "tripList",
+    label: "Departures",
+    description:
+      "Grid of bookable departures pulled from the central Trips source in the backoffice (optionally filtered by year).",
+    category: "content",
+    component: ({ props }) => <TripListBlock props={props as TripListProps} />,
+    defaultProps: {
+      title: { sv: "Avg\u00e5ngar", en: "Departures" },
+      tone: "white",
+      columns: 3,
+      source: "global",
+      year: "",
+      items: [],
+    } satisfies TripListProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
+  courseList: {
+    type: "courseList",
+    label: "Departures (legacy)",
+    description: "Legacy alias for the shared departures list.",
+    category: "content",
+    component: ({ props }) => <TripListBlock props={props as TripListProps} />,
+    defaultProps: {
+      title: { sv: "Avg\u00e5ngar", en: "Departures" },
+      tone: "white",
+      columns: 3,
+      source: "global",
+      year: "",
+      items: [],
+    } satisfies TripListProps as unknown as BlockProps,
+    hasInlineContent: true,
+  },
 };
 
 /**

package/src/host/index.tsx

@@ -1,5 +1,6 @@
 import type { ComponentType, ImgHTMLAttributes } from "react";
 import type { UseQueryOptions } from "@tanstack/react-query";
+import type { LocalizedString } from "../i18n/types";
 
 /**
  * Host component contract.
@@ -192,8 +193,20 @@ export type HostSiteAdapters = {
    * `trip`/`course` dropdowns from a single source of truth.
    */
   useTripSource: () => unknown[];
+  /**
+   * Hook returning the site's shared action labels (e.g. the booking button).
+   * Optional: the package falls back to neutral defaults.
+   */
+  useSiteActions: () => HostSiteActions;
+};
+
+/** Shared call-to-action labels used by public blocks. */
+export type HostSiteActions = {
+  book: Partial<LocalizedString>;
 };
 
+const DEFAULT_SITE_ACTIONS: HostSiteActions = { book: { sv: "Boka", en: "Book" } };
+
 let siteAdapters: Partial<HostSiteAdapters> = {};
 
 export function registerSiteAdapters(adapters: Partial<HostSiteAdapters>): void {
@@ -223,3 +236,10 @@ export function useHostTripSource(): unknown[] {
   const hook = siteAdapters.useTripSource;
   return hook ? hook() : [];
 }
+
+/** Shared action labels, or brand-neutral defaults when no site registered any. */
+export function useHostSiteActions(): HostSiteActions {
+  const hook = siteAdapters.useSiteActions;
+  const value = hook ? hook() : undefined;
+  return { ...DEFAULT_SITE_ACTIONS, ...(value ?? {}) };
+}

package/src/site/site-url.ts

@@ -0,0 +1,35 @@
+/**
+ * Canonical site origin.
+ *
+ * `SITE_URL` is the authoritative origin for the backoffice, authentication
+ * redirects and password links. When it is unset the request host is used.
+ *
+ * Pure module — no database, no filesystem, no network. Safe to import from
+ * tests, scripts and server code.
+ */
+
+/** Strip scheme, path, trailing dots/slashes and a leading `www.`. */
+export function normalizeHost(value: string): string {
+  return (value ?? "")
+    .trim()
+    .replace(/^[a-z][a-z0-9+.-]*:\/\//i, "")
+    .replace(/\/.*$/, "")
+    .replace(/\.+$/, "")
+    .replace(/^www\./i, "")
+    .toLowerCase();
+}
+
+/** The configured site origin (`https://host`), or null when unset. */
+export function siteOrigin(env: NodeJS.ProcessEnv = process.env): string | null {
+  const raw = (env["SITE_URL"] ?? "").trim().replace(/\/+$/, "");
+  if (!raw) return null;
+  return /^https?:\/\//i.test(raw) ? raw : `https://${raw}`;
+}
+
+/** The hostname of SITE_URL, normalized, or null when SITE_URL is unset. */
+export function siteHost(env: NodeJS.ProcessEnv = process.env): string | null {
+  const origin = siteOrigin(env);
+  if (!origin) return null;
+  const host = normalizeHost(origin);
+  return host || null;
+}

package/src/util/use-hash-scroll.ts

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+import { useRouterState } from "@tanstack/react-router";
+
+/**
+ * Scrolls to `#hash` targets across route transitions and initial loads.
+ * Retries briefly so sections that mount after data loads still resolve.
+ */
+export function useHashScroll(options?: { desktopOffset?: number; mobileOffset?: number }) {
+  const hash = useRouterState({ select: (s) => s.location.hash });
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const desktopOffset = options?.desktopOffset ?? 80;
+  const mobileOffset = options?.mobileOffset ?? 64;
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const raw = hash?.replace(/^#/, "");
+    if (!raw) return;
+
+    let cancelled = false;
+    const start = performance.now();
+    const headerOffset = window.matchMedia("(min-width: 768px)").matches
+      ? desktopOffset
+      : mobileOffset;
+
+    const tick = () => {
+      if (cancelled) return;
+      const el = document.getElementById(raw);
+      if (el) {
+        const top = el.getBoundingClientRect().top + window.scrollY - headerOffset;
+        window.scrollTo({ top, behavior: "smooth" });
+        return;
+      }
+      if (performance.now() - start < 1500) window.requestAnimationFrame(tick);
+    };
+
+    const raf = window.requestAnimationFrame(tick);
+    return () => {
+      cancelled = true;
+      window.cancelAnimationFrame(raf);
+    };
+  }, [hash, pathname, desktopOffset, mobileOffset]);
+}