@bygghammar/cms-platform 0.64.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.64.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 { useState } 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";
@@ -20,6 +20,28 @@ export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
   const items = props.items ?? [];
   const [active, setActive] = useState(0);
   const [slide, setSlide] = useState(0);
+  const [scroll, setScroll] = useState({ value: 0, max: 0 });
+
+  const railRef = useRef<HTMLDivElement | null>(null);
+
+  // Keep the mobile slider in sync with how far the tab row is scrolled.
+  const syncScroll = useCallback(() => {
+    const el = railRef.current;
+    if (!el) return;
+    setScroll({ value: el.scrollLeft, max: Math.max(0, el.scrollWidth - el.clientWidth) });
+  }, []);
+
+  useEffect(() => {
+    syncScroll();
+    const el = railRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", syncScroll, { passive: true });
+    window.addEventListener("resize", syncScroll);
+    return () => {
+      el.removeEventListener("scroll", syncScroll);
+      window.removeEventListener("resize", syncScroll);
+    };
+  }, [syncScroll, items.length]);
 
   if (items.length === 0) return null;
 
@@ -61,10 +83,13 @@ 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 className="min-w-0">
+            <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 lg:flex-col lg:overflow-visible lg:pb-0"
+              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);
@@ -86,6 +111,34 @@ export function CabinTabsBlock({ props }: { props: CabinTabsProps }) {
               })}
             </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">
               <h3 className="font-serif text-2xl md:text-3xl text-sea">