@klodd/ds 1.2.0 → 3.0.0

package/js/hero-roll.js

@@ -0,0 +1,287 @@
+/* Hero Roll Animation - delad komponent
+ * Krav: .hero-amount[data-animate-roll] i HTML
+ * Krav: font-variant-numeric: tabular-nums pa elementet
+ * Krav: --lh-tight definierad i CSS (anvands som rullhojd)
+ * Turbo: triggar via turbo:swap-event om Turbo finns, annars fresh-session only
+ *
+ * Delad mellan Jubb och Ekonom (extraherad fran Ekonom 2026-05-07).
+ * Filen ar oforandrad fran Ekonom-originalet - portabel utan wrapper.
+ */
+
+/*--------------------------------------------------------------
+ Sprint J + J.4 + J.5: Hero-siffra rullnings-animation pa /avstamning.
+
+ Inspirerat av kodlas-rullning (parallella siffror som rullar med
+ olika sluttider). Triggers:
+ 1. **Fresh session** (J.5): kallstart-detektering via sessionStorage-
+    marker. Animation kor vid forsta page-load efter att PWA/tab
+    stangts helt. Sprint D3:s `body[data-first-load]` (cookie-baserad)
+    fungerar bara for helt nya anvandare; J.5-trigger fungerar for
+    return-anvandare som har `ekonom_seen`-cookie satt sedan tidigare.
+ 2. Manadsbyte via < / > i manads-pillen pa /avstamning
+
+ Sprint J.4 (CE-rapport: 000 kr syns lite val lange + hela processen
+ ar lang):
+ - Turbo-nav.js skip:ar VT vid month-change. Original DOM byts
+   omedelbart till rollers - ingen 160ms VT-fade-paus. Animation
+   borjar pa samma frame som DOM-swap.
+ - Korta animation-durations: BASE 800ms -> 500ms, STEP 200ms ->
+   100ms. Total animation 500/600/700ms istallet for 800/1000/1200ms.
+ - Riv ut J.3:s tva-fas-arkitektur (BUILD/ANIMATE separation). Allt
+   sker synchron inom buildAndAnimate.
+ - Behaller force-reflow-pattern (`void el.offsetHeight`) sa browser
+   registrerar initial state innan transition triggas.
+
+ Total perceived tid (klick till slutvarde): ~720ms vid month-change
+ (network ~50ms + animation 700ms). Tidigare: ~1400ms.
+
+ Bredd-glitch-fix (J.3 oforandrat):
+ Default `<p>`-block-flow med inline-block rollers. Content-driven
+ width via tabular-nums - identisk packning som server-text.
+--------------------------------------------------------------*/
+( function () {
+	'use strict';
+
+	// Sprint J.4: kortare durations. 500/600/700ms for tre siffror.
+	const ROLLER_DURATION_BASE = 500;   // var 800ms
+	const ROLLER_DURATION_STEP = 100;   // var 200ms
+	const EXTRA_ROUNDS = 3;
+	// Sprint J.6: linear istallet for cubic-bezier(0.22, 1, 0.36, 1)
+	// (ease-out-quart). Quart-easing packar 95%+ av rorelsen i forsta
+	// halvan av tiden - sista 10% av tiden tacker bara 0.01% av rorelse,
+	// vilket gor sista rollers slutfas visuellt ororlig ("byts ut" istallet
+	// for "rullar"). Linear ger konstant hastighet sa alla siffror rullar
+	// synligt fran start till slut. Aven mer mekaniskt-korrekt - faktiska
+	// kodlas rullar med moment-konstant rotation.
+	const EASING = 'linear';
+
+	// Sprint J.5: sessionStorage-marker for fresh-session-detektering.
+	// sessionStorage rensas vid PWA-stangning/tab-close, persisterar
+	// mellan reloads/nav inom samma session.
+	// Delad sessionStorage-key for hero-roll. Bytt fran ekonom_hero_session
+	// 2026-05-08 nar komponenten porterades tillbaka till Ekonom som shared-
+	// system. Befintliga session-markers fran gamla nyckeln tappar persist
+	// engang per anvandare - ny markering satts vid nasta kallstart.
+	const SESSION_KEY = 'ds_hero_session';
+
+	let hasRunInitial = false;
+	let lastSeenUrl = window.location.href;
+
+	function getHeroEl () {
+		return document.querySelector( '.hero-amount[data-animate-roll]' );
+	}
+
+	function prefersReducedMotion () {
+		return window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
+	}
+
+	function buildRoller ( targetDigit ) {
+		const roller = document.createElement( 'span' );
+		roller.className = 'hero-digit-roller';
+
+		const track = document.createElement( 'span' );
+		track.className = 'hero-digit-track';
+
+		const totalSteps = targetDigit + ( EXTRA_ROUNDS * 10 );
+		for ( let i = 0; i <= totalSteps; i++ ) {
+			const span = document.createElement( 'span' );
+			span.textContent = String( i % 10 );
+			track.appendChild( span );
+		}
+
+		roller.appendChild( track );
+		return { roller: roller, track: track, steps: totalSteps };
+	}
+
+	function buildStaticChar ( text ) {
+		const span = document.createElement( 'span' );
+		span.className = 'hero-static-char';
+		span.textContent = text;
+		return span;
+	}
+
+	/*--------------------------------------------------------------
+	 Bygg digit-rollers + starta transition synchron i samma frame.
+	 Idempotent via data-rolled-attribut.
+	--------------------------------------------------------------*/
+	function buildAndAnimate ( el ) {
+		if ( ! el ) return;
+		if ( el.dataset.rolled === 'true' ) return;
+		const target = parseInt( el.dataset.animateRoll, 10 );
+		if ( isNaN( target ) ) return;
+
+		// No-op for 0
+		if ( target === 0 ) {
+			el.dataset.rolled = 'true';
+			return;
+		}
+
+		el.dataset.rolled = 'true';
+
+		const originalText = el.textContent;
+		const isNegative = target < 0;
+		const absTarget = Math.abs( target );
+		const digits = String( absTarget ).split( '' ).map( Number );
+		const len = digits.length;
+
+		const fragment = document.createDocumentFragment();
+
+		if ( isNegative ) {
+			fragment.appendChild( buildStaticChar( '−' ) );
+		}
+
+		const rollers = [];
+		digits.forEach( function ( d, i ) {
+			const r = buildRoller( d );
+			fragment.appendChild( r.roller );
+			rollers.push( r );
+			const fromRight = len - 1 - i;
+			if ( fromRight > 0 && fromRight % 3 === 0 ) {
+				fragment.appendChild( buildStaticChar( ' ' ) );
+			}
+		} );
+
+		fragment.appendChild( buildStaticChar( ' kr' ) );
+
+		// Mat font-line-height for digit-roller-hojd.
+		const computed = window.getComputedStyle( el );
+		const fontSize = parseFloat( computed.fontSize );
+		const lineHeightRaw = computed.lineHeight;
+		let lineHeight;
+		if ( lineHeightRaw === 'normal' ) {
+			lineHeight = fontSize * 1.05;
+		} else {
+			lineHeight = parseFloat( lineHeightRaw );
+		}
+		el.style.setProperty( '--hero-digit-height', lineHeight + 'px' );
+
+		// Replace content
+		el.innerHTML = '';
+		el.appendChild( fragment );
+
+		// Reduced-motion: hopppa direkt till slutposition utan transition.
+		if ( prefersReducedMotion() ) {
+			rollers.forEach( function ( r ) {
+				r.track.style.transform =
+					'translateY(calc(-1 * var(--hero-digit-height) * ' + r.steps + '))';
+			} );
+			requestAnimationFrame( function () {
+				el.textContent = originalText;
+			} );
+			return;
+		}
+
+		// Sprint J.4: force reflow sa browser registrerar initial state
+		// (translateY default 0) innan transition triggas. Utan reflow
+		// hoppar browser direkt till slut-state utan animation.
+		void el.offsetHeight;
+
+		// Trigga transition synchron i samma frame.
+		rollers.forEach( function ( r, i ) {
+			const duration = ROLLER_DURATION_BASE + ( i * ROLLER_DURATION_STEP );
+			r.track.style.transition =
+				'transform ' + duration + 'ms ' + EASING;
+			r.track.style.transform =
+				'translateY(calc(-1 * var(--hero-digit-height) * ' + r.steps + '))';
+		} );
+
+		// Vid done: restora till server-text for klean DOM-state.
+		const totalDuration = ROLLER_DURATION_BASE + ( ( rollers.length - 1 ) * ROLLER_DURATION_STEP );
+		setTimeout( function () {
+			el.textContent = originalText;
+		}, totalDuration + 60 );
+	}
+
+	/*--------------------------------------------------------------
+	 Trigger-detektering.
+	--------------------------------------------------------------*/
+	function isMonthChange ( fromUrl, toUrl ) {
+		if ( ! fromUrl ) return false;
+		try {
+			const f = new URL( fromUrl );
+			const t = new URL( toUrl );
+			if ( f.pathname !== '/avstamning' || t.pathname !== '/avstamning' ) return false;
+			const fromMonth = f.searchParams.get( 'month' );
+			const toMonth = t.searchParams.get( 'month' );
+			return fromMonth !== toMonth;
+		} catch ( _ ) {
+			return false;
+		}
+	}
+
+	/*--------------------------------------------------------------
+	 Sprint J.5: trigger animation vid fresh session (kallstart fran
+	 stangd PWA/tab). sessionStorage-marker satts forsta gang per
+	 session - om saknad ar det en ny session.
+
+	 Behaller `data-first-load`-trigger som fallback for browsers utan
+	 sessionStorage-stod (extremt sallsynt) och for konsistens med
+	 Sprint D3 splash-animations.
+	--------------------------------------------------------------*/
+	function tryAnimateInitial () {
+		if ( hasRunInitial ) return;
+
+		// Fresh-session-detektering via sessionStorage.
+		let isFreshSession = false;
+		try {
+			if ( ! sessionStorage.getItem( SESSION_KEY ) ) {
+				isFreshSession = true;
+				sessionStorage.setItem( SESSION_KEY, '1' );
+			}
+		} catch ( _ ) {
+			// sessionStorage kan kasta i restricted contexts (extremt
+			// sallsynt). Falla tillbaka till data-first-load.
+		}
+
+		const isFirstEver = document.body.dataset.firstLoad === 'true';
+
+		if ( ! isFreshSession && ! isFirstEver ) return;
+
+		const el = getHeroEl();
+		if ( ! el ) return;
+		hasRunInitial = true;
+		buildAndAnimate( el );
+	}
+
+	/*--------------------------------------------------------------
+	 First-load via DOMContentLoaded.
+	--------------------------------------------------------------*/
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', tryAnimateInitial );
+	} else {
+		tryAnimateInitial();
+	}
+
+	/*--------------------------------------------------------------
+	 Sprint J.4: month-change via turbo:swap (synchron inom turbo-nav.js
+	 swap-kornplats). Eftersom turbo-nav.js skip:ar VT vid month-change,
+	 ar swap synchron och original DOM ar synlig direkt - animation
+	 borjar pa samma frame som DOM-byte.
+	--------------------------------------------------------------*/
+	document.addEventListener( 'turbo:swap', function ( e ) {
+		const detail = e.detail || {};
+		const newUrl = detail.url || window.location.href;
+
+		if ( ! isMonthChange( lastSeenUrl, newUrl ) ) {
+			lastSeenUrl = newUrl;
+			return;
+		}
+
+		const el = getHeroEl();
+		if ( ! el ) {
+			lastSeenUrl = newUrl;
+			return;
+		}
+
+		buildAndAnimate( el );
+		lastSeenUrl = newUrl;
+	} );
+
+	/*--------------------------------------------------------------
+	 Fallback: turbo:navigated (efter VT-end) for first-load om
+	 DOMContentLoaded inte hunnit.
+	--------------------------------------------------------------*/
+	document.addEventListener( 'turbo:navigated', function () {
+		tryAnimateInitial();
+	} );
+} )();

package/js/index.js

@@ -0,0 +1,95 @@
+/* @klodd/ds - JavaScript entry point.
+ *
+ * Convenience-aggregator som kor enskilda init-funktioner. Default
+ * fungerar utan konfiguration (LLM-vanligt). Konfig-objektet kan
+ * over-rida vad som ska aktiveras.
+ *
+ * Anvandning:
+ *
+ *   <script src="https://unpkg.com/@klodd/ds/js/index.js" defer></script>
+ *   <script>
+ *     window.addEventListener('DOMContentLoaded', () => {
+ *       KloddDS.init();
+ *     });
+ *   </script>
+ *
+ * Eller med konfig:
+ *
+ *   KloddDS.init({
+ *     swPath: '/service-worker.js',
+ *     lucide: true,
+ *     barStyles: true,
+ *     heroRoll: true,
+ *     pullToRefresh: false,
+ *     turboNav: false,
+ *     navOptimistic: true,
+ *     sheetDrag: true,
+ *     pwaRegister: false,  // satt true + swPath for SW + install-prompts
+ *   });
+ *
+ * Individuella moduler kan ocksa importeras separat fran js/-mappen.
+ * KloddDS.init() ar bara en convenience-wrapper - den inkluderar inte
+ * filerna sjalv, dvs varje modul-fil maste laddas via <script>-tag.
+ *
+ * Defaults ar konservativa: heavy beteenden (PtR, Turbo Drive, PWA
+ * register) ar OFF default. App-mantainern aktiverar opt-in.
+ */
+'use strict';
+
+(function (root) {
+  const defaults = {
+    lucide: true,
+    barStyles: true,
+    heroRoll: true,
+    navOptimistic: true,
+    sheetDrag: true,
+    pullToRefresh: false,
+    turboNav: false,
+    pwaRegister: false,
+    swPath: '/static/sw.js',
+  };
+
+  const KloddDS = {
+    init(config) {
+      const cfg = Object.assign({}, defaults, config || {});
+
+      if (cfg.lucide && typeof root.initLucide === 'function') {
+        root.initLucide();
+      } else if (cfg.lucide && root.lucide && typeof root.lucide.createIcons === 'function') {
+        root.lucide.createIcons();
+      }
+
+      if (cfg.barStyles && typeof root.initBarStyles === 'function') {
+        root.initBarStyles();
+      }
+
+      if (cfg.heroRoll && typeof root.initHeroRoll === 'function') {
+        root.initHeroRoll();
+      }
+
+      if (cfg.navOptimistic && typeof root.initNavOptimistic === 'function') {
+        root.initNavOptimistic();
+      }
+
+      if (cfg.sheetDrag && typeof root.initSheetDrag === 'function') {
+        root.initSheetDrag();
+      }
+
+      if (cfg.pullToRefresh && typeof root.initPullToRefresh === 'function') {
+        root.initPullToRefresh();
+      }
+
+      if (cfg.turboNav && typeof root.initTurboNav === 'function') {
+        root.initTurboNav();
+      }
+
+      if (cfg.pwaRegister && typeof root.initPwaRegister === 'function') {
+        root.initPwaRegister({ swPath: cfg.swPath });
+      }
+    },
+
+    version: '2.0.0',
+  };
+
+  root.KloddDS = KloddDS;
+})(typeof window !== 'undefined' ? window : globalThis);

package/js/lucide-init.js

@@ -0,0 +1,27 @@
+/* Lucide-init: scannar DOM efter <i data-lucide="..."> och ersatter
+ * med <svg>-element. Kors vid DOMContentLoaded plus efter Turbo-nav-
+ * swap (om Turbo finns) sa nya element pa nyladdade pages aktiveras.
+ *
+ * Lucide CDN-script laddas separat via cdn.jsdelivr.net (allowed i
+ * Jubbs CSP). Detta init-script ar lokalt sa det forklaras inte av
+ * inline-script-restrict.
+ */
+(function () {
+  'use strict';
+
+  function createIcons() {
+    if (typeof window.lucide !== 'undefined' && window.lucide.createIcons) {
+      window.lucide.createIcons();
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', createIcons);
+  } else {
+    createIcons();
+  }
+
+  // Re-init efter Turbo-swap sa nya ikoner pa swapped DOM aktiveras.
+  document.addEventListener('turbo:swap', createIcons);
+  document.addEventListener('turbo:navigated', createIcons);
+})();

package/js/nav-optimistic.js

@@ -0,0 +1,74 @@
+/*--------------------------------------------------------------
+ Sprint F1 + G4 + I: optimistic active-flytt pa bottom-nav.
+
+ Problem (CE 2026-04-27): tap pa bottom-nav-pod tar ~1s innan
+ podden blir visuellt aktiv. Anvandaren ser inaktiv pod tills
+ hela nya sidan laddats. Native-appar uppdaterar tab-bar
+ omedelbart vid tap, oberoende av content-render.
+
+ Losning: vid click pa nav-pod flytta active-class direkt till
+ tappad pod. Turbo-fetch (Sprint I) eller cross-document VT
+ renderar content parallellt. Failsafe rullar tillbaka active-
+ flytt om navigation inte landar (notification, network-stall
+ etc.).
+
+ Sprint G4: borttagen body.navigating-class + content-fade. Native
+ iOS fadar inte content under nav-byten. Active-flytt ensam ger
+ onskad feedback.
+
+ Sprint I: lyssna pa turbo:navigated istallet for pageshow
+ (pageshow firar inte vid same-document swap). Pageshow-handler
+ behalls for bfcache-restore.
+--------------------------------------------------------------*/
+( function () {
+	const nav = document.querySelector( '.bottom-nav' );
+	if ( ! nav ) return;
+
+	let pendingNav = null;
+	let failsafeTimer = null;
+
+	function reset () {
+		pendingNav = null;
+		clearTimeout( failsafeTimer );
+		failsafeTimer = null;
+	}
+
+	nav.addEventListener( 'click', ( e ) => {
+		// Skippa modifier-clicks (cmd/ctrl/shift -> ny flik) och middle-click.
+		// Browser hanterar dem som "open in new tab" - vi vill INTE flytta active.
+		if ( e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) return;
+		if ( e.button !== undefined && e.button !== 0 ) return;
+
+		const pod = e.target.closest( '.nav-pod' );
+		if ( ! pod || ! nav.contains( pod ) ) return;
+		if ( pod.classList.contains( 'active' ) ) return;
+
+		const previousActive = nav.querySelector( '.nav-pod.active' );
+		previousActive && previousActive.classList.remove( 'active' );
+		pod.classList.add( 'active' );
+
+		pendingNav = { from: previousActive, to: pod };
+
+		// Failsafe: om ny sida inte landar inom 3s, rulla tillbaka. Skyddar
+		// mot edge-cases dar navigation avbryts (notification dragdown,
+		// network-stall, abort etc.).
+		clearTimeout( failsafeTimer );
+		failsafeTimer = setTimeout( () => {
+			if ( pendingNav ) {
+				pendingNav.to.classList.remove( 'active' );
+				pendingNav.from && pendingNav.from.classList.add( 'active' );
+				reset();
+			}
+		}, 3000 );
+	} );
+
+	// Sprint I: turbo-swap rensar pending state och korrigerar active-class
+	// om server-render skiljer sig fran optimistic flytt (turbo-nav.js gor
+	// performSwap.bottom-nav-active-justering vilket overskuggar var optimistic
+	// flytt om server-render landade pa annan route).
+	document.addEventListener( 'turbo:navigated', reset );
+
+	// pageshow firar bade vid fresh load OCH bfcache-restore. Behalls for
+	// fallback-fall (no-turbo, full reload, browser back utan turbo-state).
+	window.addEventListener( 'pageshow', reset );
+} )();

package/js/pull-to-refresh.js

@@ -0,0 +1,162 @@
+/*--------------------------------------------------------------
+ Ekonom - Pull-to-refresh (Sprint E1).
+
+ Pointer Events-baserad pull fran top-of-page nar window.scrollY === 0.
+ Aktiveras pa main routes (avstamning/kategorier/bolanet/jag) via
+ data-ptr-enabled-attribut pa body.
+
+ Fysik:
+ - 1:1 tracking forsta 40px, sen kvadratisk dampning
+ - Threshold: 80px med damping for trigger
+ - Spinner-indikator visas centrerad ovanfor hero
+ - Refresh = location.reload()
+
+ Edge cases (no-op):
+ - Sheet ar oppen
+ - Form har :focus-within
+ - VT-animation pagar (impossible to detect reliably; vi kollar via
+   document.startViewTransition existence + nyligen-startad-flagga)
+ - Aktiv upload (.upload-spinner-overlay.visible)
+--------------------------------------------------------------*/
+(function () {
+	'use strict';
+
+	const THRESHOLD_PX = 80;
+	const LINEAR_PX = 40;
+	const SETTLE_PX = 60;
+	const REFRESH_DELAY_MS = 200;
+
+	function shouldEnable() {
+		return document.body.dataset.ptrEnabled === 'true' ||
+			document.body.hasAttribute('data-ptr-enabled');
+	}
+
+	function isBlocked() {
+		// Sheet/dialog open
+		if (document.querySelector('dialog.sheet[open]')) return true;
+		// Form has focus (keyboard up)
+		if (document.activeElement && document.activeElement.matches &&
+			(document.activeElement.matches('input, textarea, select') ||
+			 document.activeElement.closest('form:focus-within'))) return true;
+		// Upload spinner active
+		const upload = document.getElementById('upload-spinner-overlay');
+		if (upload && upload.classList.contains('visible')) return true;
+		return false;
+	}
+
+	function applyResistance(dy) {
+		if (dy <= LINEAR_PX) return dy;
+		// kvadratisk dampning efter 40px
+		return LINEAR_PX + Math.sqrt(dy - LINEAR_PX) * 4;
+	}
+
+	function ensureIndicator() {
+		let el = document.getElementById('ptr-indicator');
+		if (el) return el;
+		el = document.createElement('div');
+		el.id = 'ptr-indicator';
+		el.className = 'ptr-indicator';
+		el.setAttribute('aria-hidden', 'true');
+		el.innerHTML = '<div class="ptr-spinner"></div>';
+		document.body.appendChild(el);
+		return el;
+	}
+
+	let dragging = false;
+	let startY = 0;
+	let pullY = 0;
+	let pointerId = null;
+	let triggered = false;
+
+	function onPointerDown(e) {
+		if (!shouldEnable()) return;
+		if (isBlocked()) return;
+		if (window.scrollY > 0) return;
+		if (e.pointerType === 'mouse' && e.button !== 0) return;
+		dragging = true;
+		triggered = false;
+		startY = e.clientY;
+		pullY = 0;
+		pointerId = e.pointerId;
+	}
+
+	function onPointerMove(e) {
+		if (!dragging || e.pointerId !== pointerId) return;
+		const dy = e.clientY - startY;
+		if (dy <= 0) {
+			pullY = 0;
+			updateIndicator(0);
+			return;
+		}
+		// Om scrollY har gatt > 0 sen drag-start (t.ex. anvandaren bytte riktning),
+		// avbryt drag.
+		if (window.scrollY > 0) {
+			cancelDrag();
+			return;
+		}
+		pullY = applyResistance(dy);
+		updateIndicator(pullY);
+		// Forhindra default sa browsern inte scrollar (om vi ar pa scrollY=0).
+		if (e.cancelable) e.preventDefault();
+	}
+
+	function onPointerUp(e) {
+		if (!dragging) return;
+		dragging = false;
+		const indicator = document.getElementById('ptr-indicator');
+		if (pullY >= THRESHOLD_PX && !triggered) {
+			triggered = true;
+			// Snap till SETTLE_PX, sedan reload.
+			if (indicator) {
+				indicator.style.transition = 'transform 220ms var(--ease-spring-snappy)';
+				indicator.style.transform = 'translate(-50%, ' + SETTLE_PX + 'px)';
+				indicator.classList.add('ptr-indicator--triggered');
+			}
+			setTimeout(function () { window.location.reload(); }, REFRESH_DELAY_MS);
+		} else {
+			// Spring-back till 0.
+			if (indicator) {
+				indicator.style.transition = 'transform 320ms var(--ease-spring-bounce), opacity 220ms';
+				indicator.style.transform = 'translate(-50%, -40px)';
+				indicator.style.opacity = '0';
+				const onEnd = function () {
+					indicator.removeEventListener('transitionend', onEnd);
+					indicator.style.transition = '';
+					indicator.style.transform = '';
+					indicator.style.opacity = '';
+				};
+				indicator.addEventListener('transitionend', onEnd, { once: true });
+			}
+		}
+		pullY = 0;
+	}
+
+	function cancelDrag() {
+		dragging = false;
+		const indicator = document.getElementById('ptr-indicator');
+		if (indicator) {
+			indicator.style.transition = 'transform 220ms, opacity 180ms';
+			indicator.style.transform = 'translate(-50%, -40px)';
+			indicator.style.opacity = '0';
+		}
+		pullY = 0;
+	}
+
+	function updateIndicator(y) {
+		const el = ensureIndicator();
+		el.style.transition = 'none';
+		// Translate fran -40px (dolt ovanfor viewport) till y px nedat.
+		const translateY = -40 + y;
+		el.style.transform = 'translate(-50%, ' + translateY + 'px)';
+		const progress = Math.min(1, y / THRESHOLD_PX);
+		el.style.opacity = String(progress);
+		// Rotation pa spinnern: hela 360deg vid threshold.
+		const spinner = el.firstChild;
+		if (spinner) spinner.style.transform = 'rotate(' + (progress * 360) + 'deg)';
+	}
+
+	document.addEventListener('pointerdown', onPointerDown, { passive: true });
+	document.addEventListener('pointermove', onPointerMove, { passive: false });
+	document.addEventListener('pointerup', onPointerUp, { passive: true });
+	document.addEventListener('pointercancel', cancelDrag, { passive: true });
+})();