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

package/src/blocks/components/IconGridBlock.tsx

@@ -1,5 +1,6 @@
 import { useT } from "../../i18n";
 import { Reveal } from "../../ui/Reveal";
+import { MobileCarousel, clampAutoplayMs } from "../../ui/MobileCarousel";
 import { resolveBlockIcon } from "../icons";
 import type { IconGridProps } from "../types";
 
@@ -19,6 +20,11 @@ const TONE: Record<string, string> = {
 /**
  * Icon cards: icon + title + optional meta (e.g. price) and body text.
  * One column on mobile, configurable 2–5 columns from `sm:`/`lg:` up.
+ *
+ * On phones the cards can instead be a swipeable carousel (`mobileLayout:
+ * "slider"`). The switch happens below `sm`, so the tablet and desktop grids
+ * are exactly what they were; a block that never sets `mobileLayout` keeps
+ * stacking.
  */
 export function IconGridBlock({ props }: { props: IconGridProps }) {
   const { t } = useT();
@@ -28,11 +34,57 @@ export function IconGridBlock({ props }: { props: IconGridProps }) {
   const bare = props.cardStyle === "bare";
   const plainIcon = props.iconStyle === "plain";
   const iconAlign = props.iconAlign ?? "center";
+  const slider = props.mobileLayout === "slider";
   const iconAlignClass =
     iconAlign === "left" ? "self-start" : iconAlign === "right" ? "self-end" : "self-center";
   const textAlignClass =
     iconAlign === "left" ? "text-left" : iconAlign === "right" ? "text-right" : "text-center";
 
+  const card = (item: (typeof items)[number], i: number) => {
+    const Icon = resolveBlockIcon(item.icon);
+    const inner = (
+      <>
+        <span
+          className={`${iconAlignClass} ${
+            plainIcon
+              ? "inline-flex text-sea"
+              : "inline-flex size-11 shrink-0 items-center justify-center rounded-full border border-sea/35 bg-sea/10 text-sea"
+          }`}
+          aria-hidden
+        >
+          <Icon className="size-5" strokeWidth={1.5} />
+        </span>
+        <div className="mt-5 min-w-0">
+          <h3 className="font-serif text-lg md:text-xl leading-snug text-ink whitespace-pre-line">
+            {item.title ? t(item.title) : null}
+          </h3>
+          {item.meta ? (
+            <div className="mt-1.5 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+              {t(item.meta)}
+            </div>
+          ) : null}
+          {item.body ? (
+            <p className="mt-3 text-sm leading-relaxed text-ink/70 whitespace-pre-line">
+              {t(item.body)}
+            </p>
+          ) : null}
+        </div>
+      </>
+    );
+    const cls = bare
+      ? `flex h-full flex-col ${textAlignClass}`
+      : `flex h-full flex-col p-7 md:p-8 ${tone} ${textAlignClass} transition-colors hover:bg-ice/40`;
+    return item.href ? (
+      <a key={item.id ?? i} href={item.href} className={`${cls} group`}>
+        {inner}
+      </a>
+    ) : (
+      <div key={item.id ?? i} className={cls}>
+        {inner}
+      </div>
+    );
+  };
+
   return (
     <section id={props.anchor || undefined} className={`${tone} py-20 md:py-28`}>
       <div className="container-editorial">
@@ -58,59 +110,32 @@ export function IconGridBlock({ props }: { props: IconGridProps }) {
           </Reveal>
         )}
 
-        <div
-          className={`mt-12 md:mt-16 grid grid-cols-1 ${cols} ${
-            bare ? "gap-8 md:gap-10" : "gap-px bg-ink/10"
-          }`}
-        >
-
-          {items.map((item, i) => {
-            const Icon = resolveBlockIcon(item.icon);
-            const inner = (
-              <>
-                <span
-                  className={`${iconAlignClass} ${
-                    plainIcon
-                      ? "inline-flex text-sea"
-                      : "inline-flex size-11 shrink-0 items-center justify-center rounded-full border border-sea/35 bg-sea/10 text-sea"
-                  }`}
-                  aria-hidden
-                >
-                  <Icon className="size-5" strokeWidth={1.5} />
-                </span>
-                <div className="mt-5 min-w-0">
-                  <h3 className="font-serif text-lg md:text-xl leading-snug text-ink whitespace-pre-line">
-                    {item.title ? t(item.title) : null}
-                  </h3>
-                  {item.meta ? (
-                    <div className="mt-1.5 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
-                      {t(item.meta)}
-                    </div>
-                  ) : null}
-                  {item.body ? (
-                    <p className="mt-3 text-sm leading-relaxed text-ink/70 whitespace-pre-line">
-                      {t(item.body)}
-                    </p>
-                  ) : null}
-                </div>
-              </>
-            );
-            const cls = bare
-              ? `flex h-full flex-col ${textAlignClass}`
-              : `flex h-full flex-col p-7 md:p-8 ${tone} ${textAlignClass} transition-colors hover:bg-ice/40`;
-            return (
+        {slider ? (
+          <div className="mt-12 md:mt-16">
+            <MobileCarousel
+              label={props.title ? t(props.title) : "Cards"}
+              gridClassName={`grid-cols-1 ${cols} ${bare ? "" : "sm:bg-ink/10"}`}
+              gapClassName={bare ? "gap-8 md:gap-10" : "gap-4 sm:gap-px"}
+              slideClassName={bare ? "" : "border border-ink/10 sm:border-0"}
+              autoplay={props.mobileAutoplay === true}
+              autoplayMs={clampAutoplayMs(props.mobileAutoplayMs)}
+            >
+              {items.map((item, i) => card(item, i))}
+            </MobileCarousel>
+          </div>
+        ) : (
+          <div
+            className={`mt-12 md:mt-16 grid grid-cols-1 ${cols} ${
+              bare ? "gap-8 md:gap-10" : "gap-px bg-ink/10"
+            }`}
+          >
+            {items.map((item, i) => (
               <Reveal key={item.id ?? i} delay={i * 50}>
-                {item.href ? (
-                  <a href={item.href} className={`${cls} group`}>
-                    {inner}
-                  </a>
-                ) : (
-                  <div className={cls}>{inner}</div>
-                )}
+                {card(item, i)}
               </Reveal>
-            );
-          })}
-        </div>
+            ))}
+          </div>
+        )}
 
         {props.note ? (
           <Reveal>

package/src/blocks/components/LayoutBlock.tsx

@@ -0,0 +1,100 @@
+import { useBlockChildren } from "../block-children";
+import { readColumnsFromProps, layoutColumnCountFromProps } from "../block-tree";
+import type { BlockProps, LayoutProps } from "../types";
+
+/*
+ * Tailwind needs the finished class names in the source, so the responsive
+ * column counts are literal maps rather than generated strings.
+ */
+const TABLET_COLS: Record<number, string> = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+};
+
+const DESKTOP_COLS: Record<number, string> = {
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+};
+
+const GAP: Record<string, string> = {
+  none: "gap-0",
+  sm: "gap-4",
+  md: "gap-8 md:gap-10",
+  lg: "gap-12 md:gap-16",
+};
+
+const ALIGN: Record<string, string> = {
+  start: "items-start",
+  center: "items-center",
+  stretch: "items-stretch",
+};
+
+const TONE: Record<string, string> = {
+  transparent: "",
+  white: "bg-white",
+  paper: "bg-paper",
+  ice: "bg-ice",
+};
+
+const PADDING: Record<string, string> = {
+  none: "",
+  compact: "py-8 md:py-10",
+  normal: "py-16 md:py-20",
+  roomy: "py-24 md:py-32",
+};
+
+/**
+ * A row of columns holding other blocks.
+ *
+ * It renders no content of its own: each column is a stack of child blocks,
+ * drawn through the page renderer so nested blocks behave exactly as they do
+ * at the top level. Columns always collapse to one on phones and every column
+ * is `min-w-0`, so a wide child (a table, a long word, an image) shrinks with
+ * its column instead of pushing the page sideways.
+ */
+export function LayoutBlock({ props }: { props: LayoutProps }) {
+  const { render, edit } = useBlockChildren();
+  const raw = props as unknown as BlockProps;
+  const columns = readColumnsFromProps(raw);
+  const desktop = layoutColumnCountFromProps(raw);
+  const tablet = Math.min(4, Math.max(1, props.columnsTablet ?? Math.min(2, desktop)));
+
+  const tone = TONE[props.tone ?? "transparent"] ?? "";
+  const padding = PADDING[props.padding ?? "none"] ?? "";
+  const gap = GAP[props.gap ?? "md"] ?? GAP["md"];
+  const align = ALIGN[props.align ?? "stretch"] ?? ALIGN["stretch"];
+  const contained = props.contained !== false;
+
+  const grid = (
+    <div
+      className={`grid w-full grid-cols-1 ${TABLET_COLS[tablet] ?? TABLET_COLS[2]} ${
+        DESKTOP_COLS[desktop] ?? DESKTOP_COLS[2]
+      } ${gap} ${align}`}
+    >
+      {columns.map((column, i) => (
+        <div key={i} className="min-w-0">
+          {column.length === 0 && edit ? (
+            <div className="flex min-h-24 items-center justify-center border border-dashed border-ink/20 p-4 text-[0.7rem] uppercase tracking-[0.18em] text-ink/35">
+              {`Column ${i + 1}`}
+            </div>
+          ) : (
+            render(column)
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} ${padding}`.trim()}>
+      {contained ? <div className="container-editorial">{grid}</div> : grid}
+    </section>
+  );
+}

package/src/blocks/countdown-time.ts

@@ -4,89 +4,34 @@
  * 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.
+ *
+ * The zone maths itself lives in `../cms/timezone`, which is the platform's one
+ * scheduling engine (countdowns, scheduled menu items and scheduled footer
+ * links all share it). The names below are kept as they were so existing
+ * imports keep working.
  */
 
+import {
+  DEFAULT_TIMEZONE,
+  TIMEZONE_OPTIONS,
+  formatInZone,
+  timezoneOffsetMs,
+  zonedLocalToInstant,
+} from "../cms/timezone";
+
 /** 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_TIMEZONES = TIMEZONE_OPTIONS;
 
-export const COUNTDOWN_DEFAULT_TIMEZONE = "Europe/Stockholm";
+export const COUNTDOWN_DEFAULT_TIMEZONE = DEFAULT_TIMEZONE;
 
-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;
-}
+export { timezoneOffsetMs, formatInZone };
 
 /**
  * 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;
+  return zonedLocalToInstant(local, tz);
 }
 
 export type CountdownParts = {
@@ -111,18 +56,3 @@ export function countdownParts(target: number | null, now: number): CountdownPar
     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/registry.tsx

@@ -15,6 +15,7 @@ import { CabinTabsBlock } from "./components/CabinTabsBlock";
 import { PriceTableBlock } from "./components/PriceTableBlock";
 import { FormBlock } from "./components/FormBlock";
 import { TripListBlock } from "./components/TripListBlock";
+import { LayoutBlock } from "./components/LayoutBlock";
 import type {
   BlockProps,
   FaqProps,
@@ -33,6 +34,7 @@ import type {
   PriceTableProps,
   FormProps,
   TripListProps,
+  LayoutProps,
 } from "./types";
 import { BlockPropsProvider } from "./block-props-context";
 
@@ -66,6 +68,25 @@ export const wrapBlock = (C: ComponentType) =>
  * Default copy here is intentionally brand-neutral.
  */
 export const SHARED_BLOCK_DEFS: Record<string, BlockDef> = {
+  layout: {
+    type: "layout",
+    label: "Columns",
+    description:
+      "Container: puts other blocks side by side. 2\u20138 columns on desktop, configurable on tablet, stacked on phones.",
+    category: "section",
+    component: ({ props }) => <LayoutBlock props={props as LayoutProps} />,
+    defaultProps: {
+      columnsDesktop: 2,
+      columnsTablet: 2,
+      gap: "md",
+      align: "stretch",
+      tone: "transparent",
+      contained: true,
+      padding: "none",
+      columns: [[], []],
+    } satisfies LayoutProps as unknown as BlockProps,
+    hasInlineContent: false,
+  },
   faq: {
     type: "faq",
     label: "FAQ",

package/src/blocks/types.ts

@@ -85,6 +85,15 @@ export type IconGridProps = {
   /** Horizontal placement of the icon above the card text. Defaults to centred. */
   iconAlign?: "left" | "center" | "right";
   cardStyle?: "bordered" | "bare";
+  /**
+   * How the cards behave on phones. `stack` is the original single-column
+   * stack and stays the default, so existing pages are untouched.
+   */
+  mobileLayout?: "stack" | "slider";
+  /** Advance the slider on its own. Off unless switched on. */
+  mobileAutoplay?: boolean;
+  /** Milliseconds between automatic advances. */
+  mobileAutoplayMs?: number;
   anchor?: string;
   items?: IconGridItem[];
 };
@@ -519,3 +528,34 @@ export type CountdownProps = {
 
   anchor?: string;
 };
+
+/** ---- Layout (columns container) ---- */
+
+/**
+ * A container block: it holds other blocks in columns instead of rendering
+ * content of its own. Children live in `columns` — one entry per desktop
+ * column — and are walked with the helpers in `./block-tree`.
+ */
+export type LayoutProps = {
+  /** 2-8 columns side by side from the desktop breakpoint up. */
+  columnsDesktop?: 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  /** Columns from the tablet breakpoint up. */
+  columnsTablet?: 1 | 2 | 3 | 4;
+  /**
+   * Legacy. Phones always show one column — two columns on a 375px screen is
+   * two unreadable ones — so this is tolerated in stored payloads and ignored.
+   * There is no editor control for it.
+   */
+  columnsMobile?: number;
+  /** Gap between columns, using the theme spacing scale. */
+  gap?: "none" | "sm" | "md" | "lg";
+  /** Vertical alignment of columns of unequal height. */
+  align?: "start" | "center" | "stretch";
+  tone?: "transparent" | "white" | "paper" | "ice";
+  /** Constrain the row to the site container width. */
+  contained?: boolean;
+  padding?: "none" | "compact" | "normal" | "roomy";
+  anchor?: string;
+  /** Child blocks, one array per column. Managed by the page builder. */
+  columns?: BlockInstance[][];
+};