From d3e8a56f9f5da63023323f75e7a86f01725d9378 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Wed, 7 Jan 2026 20:39:59 +0530
Subject: [PATCH] fixes linting issues

---
 .../HorizontalScroller/Debug.svelte           |  4 ++--
 .../HorizontalScroller.svelte                 | 10 +--------
 .../demo/ScrollableGraphic.svelte             |  2 +-
 .../demo/graphic/ai2svelte/demo.svelte        | 22 ++++---------------
 4 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/components/HorizontalScroller/Debug.svelte b/src/components/HorizontalScroller/Debug.svelte
index 8170b937..d24e01e5 100644
--- a/src/components/HorizontalScroller/Debug.svelte
+++ b/src/components/HorizontalScroller/Debug.svelte
@@ -109,7 +109,7 @@
       <div style="display: flex; flex-direction: column; gap: 4px;">
         <p class="state-value progress-value">
           {#if componentState.stops.length > 0}
-            {#each componentState.stops as stop, index}
+            {#each componentState.stops as stop}
               <span class="stops" style={`left: ${stop * 100}%;`}>{stop}</span>
             {/each}
           {/if}
@@ -141,7 +141,7 @@
             class="state-value"
             style="display: flex; gap: 4px; flex-wrap: wrap;"
           >
-            {#each componentState.stops as stop, index}
+            {#each componentState.stops as stop}
               <span class="tag">{stop}</span>
             {/each}
           </p>
diff --git a/src/components/HorizontalScroller/HorizontalScroller.svelte b/src/components/HorizontalScroller/HorizontalScroller.svelte
index 299acb47..80787546 100644
--- a/src/components/HorizontalScroller/HorizontalScroller.svelte
+++ b/src/components/HorizontalScroller/HorizontalScroller.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Block from '../Block/Block.svelte';
   import type { ContainerWidth } from '../@types/global';
-  import { untrack, type Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
   import { Tween } from 'svelte/motion';
   import type { Action } from 'svelte/action';
   import { clamp, map } from './utils';
@@ -141,14 +141,6 @@
     handleStops(rawProgress);
   }
 
-  // $effect(() => {
-  //   if (handleScroll && progressTween.current) {
-  //     untrack(() => {
-  //       progress = progressTween.target;
-  //     });
-  //   }
-  // });
-
   function handleStops(rawProgress: number) {
     scrollProgress =
       clampedProgress ? clamp(rawProgress, clampStart, clampEnd) : rawProgress;
diff --git a/src/components/HorizontalScroller/demo/ScrollableGraphic.svelte b/src/components/HorizontalScroller/demo/ScrollableGraphic.svelte
index d0dcf2f2..095118fe 100644
--- a/src/components/HorizontalScroller/demo/ScrollableGraphic.svelte
+++ b/src/components/HorizontalScroller/demo/ScrollableGraphic.svelte
@@ -20,7 +20,7 @@
     }
 
     if (captions?.length) {
-      captions.forEach((caption, index) => {
+      captions.forEach((caption) => {
         let captionWidth = caption.getBoundingClientRect().width;
         let captionMidpoint =
           caption.getBoundingClientRect().left + captionWidth / 2;
diff --git a/src/components/HorizontalScroller/demo/graphic/ai2svelte/demo.svelte b/src/components/HorizontalScroller/demo/graphic/ai2svelte/demo.svelte
index f6d72542..bc215620 100644
--- a/src/components/HorizontalScroller/demo/graphic/ai2svelte/demo.svelte
+++ b/src/components/HorizontalScroller/demo/graphic/ai2svelte/demo.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // For demo purposes only, hard-wiring img paths from Vite
   // @ts-ignore img
   import imageXl from '../imgs/demo-xl.jpg';
@@ -8,7 +8,6 @@
   import imagePngOverlayXl from '../imgs/layer-overlay-xl.png';
 
   let {
-    assetsPath = '/',
     onAiMounted = () => {},
     onArtboardChange = () => {},
     taggedText = { text: {}, htext: {} },
@@ -16,15 +15,15 @@
     artboardWidth = $bindable(undefined),
   } = $props();
   import { onMount, untrack } from 'svelte';
-  let aiBox;
+  let aiBox: HTMLDivElement | undefined = $state(undefined);
   let screenWidth = $state(0);
   let aiBoxWidth = $derived(artboardWidth ?? screenWidth);
-  let activeArtboard = $state(undefined);
+  let activeArtboard: Element | undefined = $state(undefined);
   onMount(() => {
     onAiMounted();
   });
   $effect(() => {
-    if (aiBoxWidth) {
+    if (aiBoxWidth && aiBox) {
       const currentArtboard = aiBox.querySelectorAll('.g-artboard')[0];
       if (currentArtboard?.id !== activeArtboard?.id) {
         activeArtboard = untrack(() => currentArtboard);
@@ -55,9 +54,7 @@
       <div
         id="g-demo-lg-img"
         class="g-demo-lg-img g-aiImg"
-        alt=""
         style="background-image: url({imageLg});"
-        loading="lazy"
       ></div>
     </div>
   {/if}
@@ -73,16 +70,12 @@
       <div
         id="g-demo-xl-img"
         class="g-demo-xl-img g-aiImg"
-        alt=""
         style="background-image: url({imageXl});"
-        loading="lazy"
       ></div>
       <div
         id="g-png-layer-overlay-xl"
         class="g-png-layer-overlay g-aiImg"
-        alt=""
         style="opacity:1;;background-image: url({imagePngOverlayXl});"
-        loading="lazy"
       ></div>
       <div
         id="g-caption2"
@@ -194,13 +187,6 @@ taggedText={{
     background-size: contain;
     background-repeat: no-repeat;
   }
-  #g-demo-box .g-aiSymbol {
-    position: absolute;
-    box-sizing: border-box;
-  }
-  #g-demo-box .g-aiPointText p {
-    white-space: nowrap;
-  }
   #g-demo-box {
     height: 100%;
   }