@bygghammar/cms-platform 0.65.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.65.0",
+  "version": "0.66.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": [
@@ -300,4 +300,4 @@
     "cms-platform-migrations": "scripts/sync-migrations.mjs",
     "create-cms-site": "./scripts/create-cms-site.mjs"
   }
-}
+}

package/src/blocks/components/CabinTabsBlock.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type TouchEvent as ReactTouchEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Check, ChevronLeft, ChevronRight } from "lucide-react";
 import { useT } from "../../i18n";
 import { Reveal } from "../../ui/Reveal";
@@ -11,99 +11,48 @@ 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 });
+  const [scroll, setScroll] = useState({ value: 0, max: 0 });
 
   const railRef = useRef<HTMLDivElement | null>(null);
-  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
-  const touchStart = useRef<{ x: number; y: number } | null>(null);
 
-  const count = items.length;
-  const index = count > 0 ? Math.min(active, count - 1) : 0;
-
-  const syncEdges = useCallback(() => {
+  // Keep the mobile slider in sync with how far the tab row is scrolled.
+  const syncScroll = 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 });
+    setScroll({ value: el.scrollLeft, max: Math.max(0, el.scrollWidth - el.clientWidth) });
   }, []);
 
   useEffect(() => {
-    syncEdges();
+    syncScroll();
     const el = railRef.current;
     if (!el) return;
-    el.addEventListener("scroll", syncEdges, { passive: true });
-    window.addEventListener("resize", syncEdges);
+    el.addEventListener("scroll", syncScroll, { passive: true });
+    window.addEventListener("resize", syncScroll);
     return () => {
-      el.removeEventListener("scroll", syncEdges);
-      window.removeEventListener("resize", syncEdges);
+      el.removeEventListener("scroll", syncScroll);
+      window.removeEventListener("resize", syncScroll);
     };
-  }, [syncEdges, count]);
-
-  // 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]);
+  }, [syncScroll, items.length]);
 
-  const select = useCallback((i: number) => {
-    setActive(i);
-    setSlide(0);
-  }, []);
+  if (items.length === 0) return null;
 
-  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 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 toneKey = props.tone ?? "white";
-  const tone = TONE[toneKey] ?? TONE.white;
-  const fade = FADE[toneKey] ?? FADE.white;
+  const tone = TONE[props.tone ?? "white"] ?? "bg-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);
+  const select = (i: number) => {
+    setActive(i);
+    setSlide(0);
   };
 
   return (
@@ -133,93 +82,65 @@ 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">
-            {/* Category rail (mobile) / vertical tab list (desktop) */}
+            {/* Tabs */}
             <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
-                    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"
-                  >
-                    <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>
+            <div className="relative lg:static">
+            <div
+              ref={railRef}
+              role="tablist"
+              aria-label={t(props.title) || "Categories"}
+              className="flex gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:flex-col lg:overflow-visible lg:pb-0"
+            >
+              {items.map((it, i) => {
+                const on = i === Math.min(active, items.length - 1);
+                return (
                   <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"
+                    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"
+                    }`}
                   >
-                    <ChevronRight className="size-4" />
+                    {t(it.label)}
                   </button>
+                );
+              })}
+            </div>
+
+              {/* Arrow hint: there is more to the right. */}
+              {scroll.max > 4 && scroll.value < scroll.max - 4 ? (
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 bg-white/85 p-1 text-sea shadow-sm lg:hidden"
+                >
+                  <ChevronRight className="size-5" />
                 </div>
               ) : null}
             </div>
 
+            {/* Slider: drag to move through the categories. */}
+            {scroll.max > 4 ? (
+              <input
+                type="range"
+                min={0}
+                max={scroll.max}
+                value={Math.min(scroll.value, scroll.max)}
+                aria-label="Bläddra bland hyttkategorier"
+                onChange={(e) => {
+                  const el = railRef.current;
+                  if (el) el.scrollLeft = Number(e.target.value);
+                }}
+                className="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-ink/12 accent-sea lg:hidden"
+              />
+            ) : null}
+            </div>
+
             {/* Copy */}
-            <div className="min-w-0" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
+            <div className="min-w-0">
               <h3 className="font-serif text-2xl md:text-3xl text-sea">
                 {t(item.title) || t(item.label)}
               </h3>