@bygghammar/cms-platform 0.64.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.64.0",
+  "version": "0.65.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/blocks/components/CabinTabsBlock.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState, type TouchEvent as ReactTouchEvent } from "react";
 import { Check, ChevronLeft, ChevronRight } from "lucide-react";
 import { useT } from "../../i18n";
 import { Reveal } from "../../ui/Reveal";
@@ -11,26 +11,99 @@ const TONE: Record<string, string> = {
   ice: "bg-ice",
 };
 
+/** Gradient start colour for the mobile rail edge fades, per section tone. */
+const FADE: Record<string, string> = {
+  white: "from-white",
+  paper: "from-paper",
+  ice: "from-ice",
+};
+
+/** Minimum horizontal travel (px) before a touch counts as a category swipe. */
+const SWIPE_THRESHOLD = 48;
+
 /**
  * Cabin categories as clickable tabs — each tab keeps its own description,
  * bullet list and image gallery. Everything is editable in the page builder.
+ *
+ * On mobile the tabs become a snap-scrolling "category rail": the active tab is
+ * auto-centred, edge fades signal that more categories exist, and a prev/next
+ * stepper with a counter lets people move without swiping at all.
  */
 export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
   const { t } = useT();
   const items = props.items ?? [];
   const [active, setActive] = useState(0);
   const [slide, setSlide] = useState(0);
+  const [edges, setEdges] = useState({ start: false, end: false });
 
-  if (items.length === 0) return null;
+  const railRef = useRef<HTMLDivElement | null>(null);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const touchStart = useRef<{ x: number; y: number } | null>(null);
 
-  const item = items[Math.min(active, items.length - 1)];
-  const images = (item.images ?? []).filter((i) => i.src);
-  const image = images.length > 0 ? images[slide % images.length] : undefined;
-  const tone = TONE[props.tone ?? "white"] ?? "bg-white";
+  const count = items.length;
+  const index = count > 0 ? Math.min(active, count - 1) : 0;
+
+  const syncEdges = useCallback(() => {
+    const el = railRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    setEdges({ start: el.scrollLeft > 4, end: max > 4 && el.scrollLeft < max - 4 });
+  }, []);
+
+  useEffect(() => {
+    syncEdges();
+    const el = railRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", syncEdges, { passive: true });
+    window.addEventListener("resize", syncEdges);
+    return () => {
+      el.removeEventListener("scroll", syncEdges);
+      window.removeEventListener("resize", syncEdges);
+    };
+  }, [syncEdges, count]);
 
-  const select = (i: number) => {
+  // Keep the active tab fully visible in the middle of the rail.
+  useEffect(() => {
+    const tab = tabRefs.current[index];
+    if (!tab) return;
+    tab.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+  }, [index]);
+
+  const select = useCallback((i: number) => {
     setActive(i);
     setSlide(0);
+  }, []);
+
+  const step = useCallback(
+    (delta: number) => {
+      if (count === 0) return;
+      select((index + delta + count) % count);
+    },
+    [count, index, select],
+  );
+
+  if (count === 0) return null;
+
+  const item = items[index];
+  const images = (item.images ?? []).filter((i) => i.src);
+  const image = images.length > 0 ? images[slide % images.length] : undefined;
+  const toneKey = props.tone ?? "white";
+  const tone = TONE[toneKey] ?? TONE.white;
+  const fade = FADE[toneKey] ?? FADE.white;
+
+  const onTouchStart = (e: ReactTouchEvent) => {
+    const touch = e.touches[0];
+    touchStart.current = { x: touch.clientX, y: touch.clientY };
+  };
+  const onTouchEnd = (e: ReactTouchEvent) => {
+    const start = touchStart.current;
+    touchStart.current = null;
+    if (!start || count < 2) return;
+    const touch = e.changedTouches[0];
+    const dx = touch.clientX - start.x;
+    const dy = touch.clientY - start.y;
+    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+    step(dx < 0 ? 1 : -1);
   };
 
   return (
@@ -60,34 +133,93 @@ export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
 
         <Reveal>
           <div className="mt-10 grid gap-8 lg:grid-cols-[minmax(0,15rem)_minmax(0,1fr)_minmax(0,1.05fr)] lg:gap-10">
-            {/* Tabs */}
-            <div
-              role="tablist"
-              aria-label={t(props.title) || "Categories"}
-              className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
-            >
-              {items.map((it, i) => {
-                const on = i === Math.min(active, items.length - 1);
-                return (
+            {/* Category rail (mobile) / vertical tab list (desktop) */}
+            <div className="min-w-0">
+              <div className="relative lg:static">
+                <div
+                  ref={railRef}
+                  role="tablist"
+                  aria-label={t(props.title) || "Categories"}
+                  onKeyDown={(e) => {
+                    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+                      e.preventDefault();
+                      step(1);
+                    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+                      e.preventDefault();
+                      step(-1);
+                    }
+                  }}
+                  className="-mx-6 flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-6 pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:mx-0 lg:flex-col lg:overflow-visible lg:px-0 lg:pb-0"
+                >
+                  {items.map((it, i) => {
+                    const on = i === index;
+                    return (
+                      <button
+                        key={it.id ?? i}
+                        ref={(el) => {
+                          tabRefs.current[i] = el;
+                        }}
+                        role="tab"
+                        aria-selected={on}
+                        tabIndex={on ? 0 : -1}
+                        onClick={() => select(i)}
+                        className={`shrink-0 snap-center border px-4 py-3 text-left text-[0.7rem] uppercase tracking-[0.2em] transition-colors lg:shrink ${
+                          on
+                            ? "border-sea bg-sea text-white"
+                            : "border-ink/12 bg-white text-ink/70 hover:border-sea hover:text-ink"
+                        }`}
+                      >
+                        {t(it.label)}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                {/* Edge fades: a tab disappearing under a gradient reads as "more". */}
+                <div
+                  aria-hidden
+                  className={`pointer-events-none absolute inset-y-0 -left-6 w-10 bg-gradient-to-r ${fade} to-transparent transition-opacity duration-200 lg:hidden ${
+                    edges.start ? "opacity-100" : "opacity-0"
+                  }`}
+                />
+                <div
+                  aria-hidden
+                  className={`pointer-events-none absolute inset-y-0 -right-6 w-12 bg-gradient-to-l ${fade} to-transparent transition-opacity duration-200 lg:hidden ${
+                    edges.end ? "opacity-100" : "opacity-0"
+                  }`}
+                />
+              </div>
+
+              {count > 1 ? (
+                <div className="mt-3 flex items-center justify-center gap-3 lg:hidden">
                   <button
-                    key={it.id ?? i}
-                    role="tab"
-                    aria-selected={on}
-                    onClick={() => select(i)}
-                    className={`shrink-0 border px-4 py-3 text-left text-[0.7rem] uppercase tracking-[0.2em] transition-colors lg:shrink ${
-                      on
-                        ? "border-sea bg-sea text-white"
-                        : "border-ink/12 bg-white text-ink/70 hover:border-sea hover:text-ink"
-                    }`}
+                    type="button"
+                    onClick={() => step(-1)}
+                    aria-label="Föregående kategori"
+                    className="border border-ink/12 bg-white p-2 text-ink/70 transition-colors hover:border-sea hover:text-ink"
                   >
-                    {t(it.label)}
+                    <ChevronLeft className="size-4" />
                   </button>
-                );
-              })}
+                  <span
+                    aria-live="polite"
+                    className="min-w-0 truncate text-[0.7rem] uppercase tracking-[0.2em] text-ink/60"
+                  >
+                    {t(item.label)} · {index + 1} / {count}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => step(1)}
+                    aria-label="Nästa kategori"
+                    className="border border-ink/12 bg-white p-2 text-ink/70 transition-colors hover:border-sea hover:text-ink"
+                  >
+                    <ChevronRight className="size-4" />
+                  </button>
+                </div>
+              ) : null}
             </div>
 
             {/* Copy */}
-            <div className="min-w-0">
+            <div className="min-w-0" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
               <h3 className="font-serif text-2xl md:text-3xl text-sea">
                 {t(item.title) || t(item.label)}
               </h3>