@bygghammar/cms-platform 0.1.0

package/src/blocks/components/MediaSplitBlock.tsx

@@ -0,0 +1,427 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { ArrowLeft, ArrowRight, Check, Image as ImageIcon, Play } from "lucide-react";
+
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { Lightbox } from "../../ui/Lightbox";
+import { FocalImage } from "../../host";
+import { LazyVideo } from "../../host";
+import type { MediaSplitProps, MediaSplitSlide } from "../types";
+
+
+const PADDING: Record<NonNullable<MediaSplitProps["padding"]>, string> = {
+  compact: "py-12 md:py-16",
+  normal: "py-20 md:py-28",
+  spacious: "py-28 md:py-40",
+};
+
+const ASPECT: Record<NonNullable<MediaSplitProps["aspect"]>, string> = {
+  square: "aspect-square",
+  portrait: "aspect-[4/5]",
+  landscape: "aspect-[4/3]",
+  wide: "aspect-video",
+  auto: "",
+};
+
+/** Column template depends on both the media ratio and which side it sits on. */
+function columnsClass(
+  ratio: NonNullable<MediaSplitProps["mediaRatio"]>,
+  side: NonNullable<MediaSplitProps["mediaSide"]>,
+) {
+  if (ratio === "50") return "md:grid-cols-2";
+  const mediaBigger = ratio === "60";
+  const mediaFirst = side === "left";
+  if (mediaBigger === mediaFirst) return "md:grid-cols-[3fr_2fr]";
+  return "md:grid-cols-[2fr_3fr]";
+}
+
+function Slideshow({
+  slides,
+  props,
+  aspectClass,
+  radius,
+}: {
+  slides: MediaSplitSlide[];
+  props: MediaSplitProps;
+  aspectClass: string;
+  radius: string;
+}) {
+  const { t } = useT();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [index, setIndex] = useState(0);
+  const indexRef = useRef(0);
+  const [inView, setInView] = useState(false);
+  const count = slides.length;
+
+  const goTo = useCallback((i: number) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const child = el.children[i] as HTMLElement | undefined;
+    if (!child) return;
+    el.scrollTo({ left: child.offsetLeft - el.offsetLeft, behavior: "smooth" });
+    indexRef.current = i;
+    setIndex(i);
+  }, []);
+
+  const step = useCallback(
+    (dir: -1 | 1) => {
+      if (count === 0) return;
+      let next = indexRef.current + dir;
+      const loop = props.loop !== false;
+      if (next < 0) next = loop ? count - 1 : 0;
+      if (next > count - 1) next = loop ? 0 : count - 1;
+      goTo(next);
+    },
+    [count, goTo, props.loop],
+  );
+
+  useEffect(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      ([entry]) => setInView(entry.isIntersecting),
+      { threshold: 0.25 },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!props.autoplay || !inView || count < 2) return;
+    const ms = Math.max(1500, props.intervalMs ?? 5000);
+    const id = window.setInterval(() => step(1), ms);
+    return () => window.clearInterval(id);
+  }, [props.autoplay, props.intervalMs, inView, count, step]);
+
+  const onScroll = () => {
+    const el = trackRef.current;
+    if (!el) return;
+    const children = Array.from(el.children) as HTMLElement[];
+    const mid = el.scrollLeft + el.clientWidth / 2;
+    let nearest = 0;
+    let best = Infinity;
+    children.forEach((c, i) => {
+      const center = c.offsetLeft - el.offsetLeft + c.clientWidth / 2;
+      const d = Math.abs(center - mid);
+      if (d < best) {
+        best = d;
+        nearest = i;
+      }
+    });
+    indexRef.current = nearest;
+    setIndex(nearest);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        ref={trackRef}
+        onScroll={onScroll}
+        className={`flex snap-x snap-mandatory overflow-x-auto scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${radius}`}
+      >
+        {slides.map((s, i) => {
+          const alt = s.alt ? t(s.alt as Parameters<typeof t>[0]) : "";
+          const media = (
+            <div className={`relative w-full ${props.mediaBg === "transparent" ? "" : "bg-ink/5"} overflow-hidden ${aspectClass}`}>
+              {s.image ? (
+                <FocalImage
+                  src={s.image}
+                  sizes="(min-width: 768px) 50vw, 100vw"
+                  alt={alt}
+                  loading={i === 0 ? "eager" : "lazy"}
+                  className={`absolute inset-0 h-full w-full ${props.mediaFit === "contain" ? "object-contain" : "object-cover"}`}
+                />
+              ) : (
+                <div className="absolute inset-0 grid place-items-center text-ink/25">
+                  <ImageIcon className="size-8" />
+                </div>
+              )}
+            </div>
+          );
+          return (
+            <div key={s.id ?? i} className="w-full shrink-0 snap-center">
+              {s.href ? (
+                <a href={s.href} target="_blank" rel="noreferrer noopener" className="block">
+                  {media}
+                </a>
+              ) : (
+                media
+              )}
+              {props.showCaptions && s.caption ? (
+                <p className="mt-3 text-sm text-ink/65 whitespace-pre-line">{t(s.caption as Parameters<typeof t>[0])}</p>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {props.showArrows !== false && count > 1 ? (
+        <div className="pointer-events-none absolute inset-y-0 left-0 right-0 flex items-center justify-between px-3">
+          <button
+            type="button"
+            aria-label="Previous"
+            onClick={() => step(-1)}
+            className="pointer-events-auto grid size-10 place-items-center bg-paper/85 text-ink hover:bg-paper transition-colors"
+          >
+            <ArrowLeft className="size-4" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next"
+            onClick={() => step(1)}
+            className="pointer-events-auto grid size-10 place-items-center bg-paper/85 text-ink hover:bg-paper transition-colors"
+          >
+            <ArrowRight className="size-4" />
+          </button>
+        </div>
+      ) : null}
+
+      {props.showDots !== false && count > 1 ? (
+        <div className="mt-4 flex justify-center gap-2">
+          {slides.map((s, i) => (
+            <button
+              key={s.id ?? i}
+              type="button"
+              aria-label={`Go to slide ${i + 1}`}
+              onClick={() => goTo(i)}
+              className={`h-1.5 transition-all ${
+                i === index ? "w-8 bg-sea" : "w-3 bg-ink/25 hover:bg-ink/45"
+              }`}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Split section: image / slideshow / video on one side, editorial text on the
+ * other. Mirrorable. On mobile the order is always eyebrow + title, media,
+ * then the rest of the text.
+ */
+export function MediaSplitBlock({ props }: { props: MediaSplitProps }) {
+  const { t } = useT();
+  const side = props.mediaSide ?? "left";
+  const tone = props.tone ?? "white";
+  const dark = tone === "ink";
+  const bg =
+    tone === "ink"
+      ? "bg-ink text-paper"
+      : tone === "sea"
+        ? "bg-ice text-ink"
+        : tone === "paper"
+          ? "bg-paper text-ink"
+          : "bg-white text-ink";
+  const muted = dark ? "text-paper/80" : "text-ink/80";
+  const eyebrowTone = dark ? "text-paper/70" : "text-ink/70";
+  const radius = props.rounded ? "rounded-2xl overflow-hidden" : "";
+  const aspectClass = ASPECT[props.aspect ?? "landscape"];
+  const mediaBgClass = props.mediaBg === "transparent" ? "" : "bg-ink/5";
+  const fitClass = props.mediaFit === "contain" ? "object-contain" : "object-cover";
+  const items = (props.slides ?? []).filter((s) => s.image || s.caption);
+  const bullets = props.bullets ?? [];
+  const [videoOpen, setVideoOpen] = useState(false);
+  const lightboxVideoRef = useRef<HTMLVideoElement>(null);
+
+  const openVideoWithSound = () => {
+    // Mount and start the lightbox player inside the initiating click. This
+    // preserves the browser's user-activation window for unmuted playback.
+    flushSync(() => setVideoOpen(true));
+    const video = lightboxVideoRef.current;
+    if (!video) return;
+    video.muted = false;
+    video.defaultMuted = false;
+    video.volume = 1;
+    video.play().catch(() => {
+      // Keep the player unmuted: native controls let the user start playback
+      // if this browser still requires a second explicit media interaction.
+    });
+  };
+
+
+
+  const primaryBtn = dark
+    ? "bg-paper text-ink hover:bg-sea"
+    : "bg-ink text-paper hover:bg-ink/85";
+  const secondaryBtn = dark
+    ? "border border-paper/60 text-paper hover:bg-paper hover:text-ink"
+    : "border border-ink/30 text-ink hover:bg-ink hover:text-paper";
+
+  const media = (() => {
+    if (props.mediaType === "video") {
+      if (!props.videoSrc && !props.posterSrc) return null;
+      return (
+        <div className={`relative w-full ${mediaBgClass} overflow-hidden ${aspectClass} ${radius}`}>
+          {props.videoSrc ? (
+            <>
+              <LazyVideo
+                src={props.videoSrc}
+                poster={props.posterSrc || undefined}
+                autoPlay={props.videoAutoplay !== false}
+                loop={props.videoLoop !== false}
+                muted={props.videoMuted !== false}
+                controls={props.videoControls ?? false}
+                preload="metadata"
+                className={`absolute inset-0 h-full w-full ${fitClass}`}
+              />
+              <button
+                type="button"
+                onClick={openVideoWithSound}
+                aria-label="Play video"
+                className="group absolute inset-0 flex items-end justify-end p-4 sm:p-5 bg-ink/0 transition-colors hover:bg-ink/25"
+              >
+                <span className="grid size-14 sm:size-16 place-items-center rounded-full bg-paper/85 text-ink shadow-lg transition-transform group-hover:scale-110">
+                  <Play className="size-5 sm:size-6 translate-x-[2px]" />
+                </span>
+
+              </button>
+            </>
+          ) : (
+            <FocalImage
+              src={props.posterSrc}
+              alt=""
+              className={`absolute inset-0 h-full w-full ${fitClass}`}
+            />
+          )}
+        </div>
+      );
+    }
+
+    if (props.mediaType === "slideshow") {
+      if (items.length === 0) return null;
+      return <Slideshow slides={items} props={props} aspectClass={aspectClass} radius={radius} />;
+    }
+    if (!props.image) return null;
+    return (
+      <div className={`relative w-full ${mediaBgClass} overflow-hidden ${aspectClass} ${radius}`}>
+        <FocalImage
+          src={props.image}
+          sizes="(min-width: 768px) 50vw, 100vw"
+          alt={props.imageAlt ? t(props.imageAlt as Parameters<typeof t>[0]) : ""}
+          className={`absolute inset-0 h-full w-full ${fitClass}`}
+        />
+      </div>
+    );
+  })();
+
+  const hasHead = Boolean(props.eyebrow || props.title);
+  const links = [
+    { cta: props.cta, className: primaryBtn },
+    { cta: props.secondaryCta, className: secondaryBtn },
+  ].filter((l) => l.cta?.href || l.cta?.label);
+
+  const inner = (
+    <div
+      className={`grid gap-8 md:gap-14 ${columnsClass(props.mediaRatio ?? "50", side)} ${
+        props.align === "top" ? "items-start" : "items-center"
+      }`}
+    >
+      {/* Text wrapper: on mobile it dissolves so head/body can be ordered
+          around the media; on desktop it becomes one column. */}
+      <div
+        className={`contents md:block md:space-y-6 ${
+          side === "left" ? "md:order-2" : "md:order-1"
+        }`}
+      >
+        {hasHead ? (
+          <div className="order-1">
+            {props.eyebrow ? (
+              <span className={`text-[0.7rem] uppercase tracking-[0.22em] ${eyebrowTone}`}>
+                {t(props.eyebrow as Parameters<typeof t>[0])}
+              </span>
+            ) : null}
+            {props.title ? (
+              <h2 className="mt-4 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] whitespace-pre-line">
+                {t(props.title as Parameters<typeof t>[0])}
+              </h2>
+            ) : null}
+          </div>
+        ) : null}
+
+        <div className="order-3 space-y-6">
+          {props.lead ? (
+            <p className={`text-lg md:text-xl leading-relaxed whitespace-pre-line ${muted}`}>
+              {t(props.lead as Parameters<typeof t>[0])}
+            </p>
+          ) : null}
+          {props.body ? (
+            <p className={`leading-relaxed whitespace-pre-line ${muted}`}>
+              {t(props.body as Parameters<typeof t>[0])}
+            </p>
+          ) : null}
+          {bullets.length > 0 ? (
+            <ul className="space-y-3">
+              {bullets.map((b, i) => (
+                <li key={b.id ?? i} className="flex gap-3">
+                  <Check className={`mt-0.5 size-4 shrink-0 ${dark ? "text-sea" : "text-sea"}`} />
+                  <span className={muted}>{t(b.text as Parameters<typeof t>[0])}</span>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          {links.length > 0 ? (
+            <div className="flex flex-wrap gap-3 pt-2">
+              {links.map((l, i) => (
+                <a
+                  key={i}
+                  href={l.cta?.href || "#"}
+                  className={`inline-flex items-center gap-2 px-6 py-3 text-xs uppercase tracking-[0.22em] transition-colors ${l.className}`}
+                >
+                  {l.cta?.label ? t(l.cta.label as Parameters<typeof t>[0]) : ""}
+                  <ArrowRight className="size-4" />
+                </a>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {media ? (
+        <div className={`order-2 ${side === "left" ? "md:order-1" : "md:order-2"}`}>{media}</div>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <section
+      id={props.anchor || undefined}
+      className={`${bg} ${PADDING[props.padding ?? "normal"]}`}
+    >
+      <div className={props.fullBleed ? "px-4 md:px-8" : "container-editorial"}>
+        <Reveal>{inner}</Reveal>
+      </div>
+
+      {props.mediaType === "video" && props.videoSrc ? (
+        <Lightbox
+          open={videoOpen}
+          onClose={() => setVideoOpen(false)}
+          label={props.title ? t(props.title as Parameters<typeof t>[0]) : "Video"}
+          contentClassName="w-full max-w-5xl"
+        >
+          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          <video
+            key={videoOpen ? "open" : "closed"}
+            ref={lightboxVideoRef}
+            src={props.videoSrc}
+            poster={props.posterSrc || undefined}
+            autoPlay
+            muted={false}
+            controls
+            playsInline
+            onLoadedData={(event) => {
+              event.currentTarget.muted = false;
+              event.currentTarget.defaultMuted = false;
+              event.currentTarget.volume = 1;
+            }}
+            onClick={(e) => e.stopPropagation()}
+            className="h-auto max-h-[85vh] w-full bg-ink object-contain"
+          />
+
+        </Lightbox>
+      ) : null}
+    </section>
+  );
+}
+

package/src/blocks/components/PriceTableBlock.tsx

@@ -0,0 +1,166 @@
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import type { PriceTableProps } from "../types";
+
+const TONE: Record<string, string> = {
+  white: "bg-white",
+  paper: "bg-paper",
+  ice: "bg-ice",
+  ink: "bg-ink",
+};
+
+/**
+ * Price cards — one card per cabin category with a row per occupancy.
+ * Replaces the old price image so prices stay editable and readable.
+ */
+export function PriceTableBlock({ props }: { props: PriceTableProps }) {
+  const { t } = useT();
+  const groups = props.groups ?? [];
+  const dark = (props.tone ?? "paper") === "ink";
+  const tone = TONE[props.tone ?? "paper"] ?? "bg-paper";
+  const cols = (props.columns ?? 3) === 2 ? "sm:grid-cols-2" : "sm:grid-cols-2 lg:grid-cols-3";
+  // Centered by default — applies on every breakpoint.
+  const centered = (props.align ?? "center") === "center";
+  const headBox = centered ? "mx-auto max-w-2xl text-center" : "max-w-2xl";
+  const footBox = centered
+    ? "justify-center text-center"
+    : "";
+
+  if (groups.length === 0) return null;
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-16 md:py-24`}>
+      <div className="container-editorial">
+        {props.eyebrow || props.title || props.lead ? (
+          <Reveal>
+            <div className={headBox}>
+              {props.eyebrow ? (
+                <span
+                  className={`text-[0.7rem] uppercase tracking-[0.22em] ${
+                    dark ? "text-paper/70" : "text-ink/60"
+                  }`}
+                >
+                  {t(props.eyebrow)}
+                </span>
+              ) : null}
+              {props.title ? (
+                <h2
+                  className={`mt-3 font-serif text-[clamp(1.8rem,3.6vw,2.9rem)] leading-[1.06] ${
+                    dark ? "text-paper" : "text-ink"
+                  }`}
+                >
+                  {t(props.title)}
+                </h2>
+              ) : null}
+              {props.lead ? (
+                <p
+                  className={`mt-4 text-base leading-relaxed whitespace-pre-line ${
+                    dark ? "text-paper/80" : "text-ink/70"
+                  }`}
+                >
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        ) : null}
+
+        <Reveal>
+          <div className={`mt-10 grid grid-cols-1 ${cols} gap-5`}>
+            {groups.map((g, gi) => (
+              <div
+                key={g.id ?? gi}
+                className={`flex h-full flex-col border ${
+                  g.highlight
+                    ? "border-sea/60 bg-white shadow-[0_18px_40px_-30px_rgb(0_0_0/0.45)]"
+                    : dark
+                      ? "border-paper/15 bg-paper/5"
+                      : "border-ink/10 bg-white"
+                }`}
+              >
+                <div
+                  className={`flex items-baseline justify-between gap-3 px-5 py-4 ${
+                    g.highlight ? "bg-sea text-white" : dark ? "bg-paper/10" : "bg-ink/[0.04]"
+                  }`}
+                >
+                  <span
+                    className={`font-serif text-lg md:text-xl ${
+                      g.highlight ? "text-white" : dark ? "text-paper" : "text-ink"
+                    }`}
+                  >
+                    {t(g.label)}
+                  </span>
+                  {props.unitLabel ? (
+                    <span
+                      className={`text-[0.6rem] uppercase tracking-[0.2em] ${
+                        g.highlight ? "text-white/80" : dark ? "text-paper/60" : "text-ink/50"
+                      }`}
+                    >
+                      {t(props.unitLabel)}
+                    </span>
+                  ) : null}
+                </div>
+
+                <ul className={`flex-1 divide-y ${dark ? "divide-paper/12" : "divide-ink/8"}`}>
+                  {(g.rows ?? []).filter((r) => !r.hidden).map((r, ri) => (
+                    <li
+                      key={r.id ?? ri}
+                      className="flex items-baseline justify-between gap-4 px-5 py-3.5"
+                    >
+                      <span
+                        className={`text-[0.7rem] uppercase tracking-[0.18em] ${
+                          dark ? "text-paper/65" : "text-ink/55"
+                        }`}
+                      >
+                        {t(r.label)}
+                      </span>
+                      <span
+                        className={`font-serif text-xl tabular-nums ${
+                          dark ? "text-paper" : "text-ink"
+                        }`}
+                      >
+                        {t(r.price)}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+
+                {g.caption ? (
+                  <p
+                    className={`px-5 pb-5 pt-3 text-xs leading-relaxed ${
+                      dark ? "text-paper/60" : "text-ink/55"
+                    }`}
+                  >
+                    {t(g.caption)}
+                  </p>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </Reveal>
+
+        <div className={`mt-8 flex flex-wrap items-center gap-5 ${footBox}`}>
+          {props.ctaLabel && props.ctaHref ? (
+            <a
+              href={props.ctaHref}
+              className="inline-flex items-center bg-sea px-6 py-3 text-[0.7rem] uppercase tracking-[0.22em] text-white hover:bg-brass"
+            >
+              {t(props.ctaLabel)}
+            </a>
+          ) : null}
+          {props.note ? (
+            <p
+              className={`max-w-2xl text-sm leading-relaxed whitespace-pre-line ${
+                centered ? "mx-auto" : ""
+              } ${
+                dark ? "text-paper/70" : "text-ink/65"
+              }`}
+            >
+              {t(props.note)}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/blocks/components/ProseBlock.tsx

@@ -0,0 +1,77 @@
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import type { ProseProps } from "../types";
+
+/**
+ * Editorial long-form text block: optional eyebrow/title/lead plus a list of
+ * heading + body passages. Every string is localized (see i18n rules).
+ */
+export function ProseBlock({ props }: { props: ProseProps }) {
+  const { t } = useT();
+  const items = props.items ?? [];
+  const twoCol = props.layout === "two-col";
+  const tone = props.tone === "paper" ? "bg-paper" : "bg-white";
+  const hasHeader = Boolean(props.eyebrow || props.title || props.lead);
+  // Without body items (or without a header) the block is just a heading —
+  // keep it tight so stacking it above another block doesn't leave a huge gap.
+  const padY = [
+    hasHeader ? "pt-20 md:pt-28" : "pt-0",
+    items.length > 0 ? "pb-20 md:pb-28" : "pb-8 md:pb-10",
+  ].join(" ");
+
+  return (
+    <section className={`${tone} ${padY}`}>
+
+      <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-6 text-lg md:text-xl leading-relaxed text-ink/85 whitespace-pre-line">
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        )}
+
+        {items.length > 0 && (
+          <div
+            className={`mt-12 md:mt-16 ${
+              twoCol
+                ? "grid gap-10 md:gap-14 md:grid-cols-2"
+                : "max-w-3xl space-y-10"
+            }`}
+          >
+            {items.map((item, i) => (
+              <Reveal key={item.id ?? i} delay={i * 70}>
+                <article className="border-t border-ink/10 pt-6">
+                  {item.heading ? (
+                    <h3 className="font-serif text-xl md:text-2xl text-ink whitespace-pre-line">
+                      {t(item.heading)}
+                    </h3>
+                  ) : null}
+                  {item.body ? (
+                    <p className="mt-3 leading-relaxed text-ink/80 whitespace-pre-line">
+                      {t(item.body)}
+                    </p>
+                  ) : null}
+                </article>
+              </Reveal>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}