From 3b521543a83b5940a746f864fb75727dbf70e5fd Mon Sep 17 00:00:00 2001
From: Muhammad Azim <azeemamjad412@gmail.com>
Date: Wed, 13 Aug 2025 22:32:16 +0500
Subject: [PATCH 1/4] show scroll bar

---
 src/node_modules/steps_wizard/stepswizard.css | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/node_modules/steps_wizard/stepswizard.css b/src/node_modules/steps_wizard/stepswizard.css
index 666c4d1..d99341a 100644
--- a/src/node_modules/steps_wizard/stepswizard.css
+++ b/src/node_modules/steps_wizard/stepswizard.css
@@ -2,7 +2,6 @@
 .steps-wizard {
 	display: flex;
 	flex-direction: column;
-	overflow-y: scroll;
 	width: 100%;
 	height: 100%;
 	background: #131315;
@@ -74,14 +73,6 @@
 	padding: 5px;
 	overflow-x: auto;
 	scroll-behavior: smooth;
-	
-	/* Hide default scrollbar for horizontal */
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-}
-
-.steps-slot::-webkit-scrollbar {
-	display: none;
 }
 
 /* Navigation arrows */

From 360f2a85cbc45999c33fa11fbfce90d851a586d4 Mon Sep 17 00:00:00 2001
From: Muhammad Azim <azeemamjad412@gmail.com>
Date: Wed, 13 Aug 2025 22:46:58 +0500
Subject: [PATCH 2/4] center btn

---
 src/node_modules/steps_wizard/steps_wizard.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/node_modules/steps_wizard/steps_wizard.js b/src/node_modules/steps_wizard/steps_wizard.js
index 02a400d..4164e09 100644
--- a/src/node_modules/steps_wizard/steps_wizard.js
+++ b/src/node_modules/steps_wizard/steps_wizard.js
@@ -141,7 +141,9 @@ async function steps_wizard (opts, protocol) {
 
       btn.onclick = async () => {
         console.log('Clicked:', step)
+        center_step(btn)
         _?.up({type: 'step_clicked', data: {...step, index, total_steps: steps.length, is_accessible: accessible}})
+        
       };
 
       steps_entries.appendChild(btn)
@@ -163,6 +165,20 @@ async function steps_wizard (opts, protocol) {
     }, 100)
   }
 
+  
+  function center_step(step_button) {
+    const container_width = steps_entries.clientWidth
+    const step_left = step_button.offsetLeft
+    const step_width = step_button.offsetWidth
+    
+    const center_position = step_left - (container_width / 2) + (step_width / 2)
+    
+    steps_entries.scrollTo({
+      left: center_position,
+      behavior: 'smooth'
+    })
+  }
+
   function can_access(index, steps) {
     for (let i = 0; i < index; i++) {
       if (!steps[i].is_completed && steps[i].type !== 'optional') {

From b05b0157947e6af5d137fa7e291a8c8c53582821 Mon Sep 17 00:00:00 2001
From: Muhammad Azim <azeemamjad412@gmail.com>
Date: Sun, 17 Aug 2025 23:19:09 +0500
Subject: [PATCH 3/4] add ellipses and no wrap

---
 bundle.js                                     | 19 ++++++++++++-
 src/node_modules/steps_wizard/steps_wizard.js |  3 ++-
 src/node_modules/steps_wizard/stepswizard.css | 27 +++++++++++++------
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/bundle.js b/bundle.js
index 13b2d31..9c2c993 100644
--- a/bundle.js
+++ b/bundle.js
@@ -4391,7 +4391,7 @@ async function steps_wizard (opts, protocol) {
   // for demo purpose
   render_steps([
     {name: "Optional Step", "type": "optional", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
-	  {name: "Step 2", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
+	  {name: "Step 2 testingasadasdadasdasdaasdasdsassss", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 3", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 4", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 5", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
@@ -4471,6 +4471,7 @@ async function steps_wizard (opts, protocol) {
       const btn = document.createElement('button')
       btn.className = 'step-button'
       btn.textContent = step.name + (step.type === 'optional' ? ' *' : '')
+      btn.title = btn.textContent
       btn.setAttribute('data-step', index + 1)
 
       const accessible = can_access(index, steps)
@@ -4485,7 +4486,9 @@ async function steps_wizard (opts, protocol) {
 
       btn.onclick = async () => {
         console.log('Clicked:', step)
+        center_step(btn)
         _?.up({type: 'step_clicked', data: {...step, index, total_steps: steps.length, is_accessible: accessible}})
+        
       };
 
       steps_entries.appendChild(btn)
@@ -4507,6 +4510,20 @@ async function steps_wizard (opts, protocol) {
     }, 100)
   }
 
+  
+  function center_step(step_button) {
+    const container_width = steps_entries.clientWidth
+    const step_left = step_button.offsetLeft
+    const step_width = step_button.offsetWidth
+    
+    const center_position = step_left - (container_width / 2) + (step_width / 2)
+    
+    steps_entries.scrollTo({
+      left: center_position,
+      behavior: 'smooth'
+    })
+  }
+
   function can_access(index, steps) {
     for (let i = 0; i < index; i++) {
       if (!steps[i].is_completed && steps[i].type !== 'optional') {
diff --git a/src/node_modules/steps_wizard/steps_wizard.js b/src/node_modules/steps_wizard/steps_wizard.js
index 4164e09..a7d5cfe 100644
--- a/src/node_modules/steps_wizard/steps_wizard.js
+++ b/src/node_modules/steps_wizard/steps_wizard.js
@@ -47,7 +47,7 @@ async function steps_wizard (opts, protocol) {
   // for demo purpose
   render_steps([
     {name: "Optional Step", "type": "optional", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
-	  {name: "Step 2", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
+	  {name: "Step 2 testingasadasdadasdasdaasdasdsassss", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 3", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 4", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
     {name: "Step 5", "type": "mandatory", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
@@ -127,6 +127,7 @@ async function steps_wizard (opts, protocol) {
       const btn = document.createElement('button')
       btn.className = 'step-button'
       btn.textContent = step.name + (step.type === 'optional' ? ' *' : '')
+      btn.title = btn.textContent
       btn.setAttribute('data-step', index + 1)
 
       const accessible = can_access(index, steps)
diff --git a/src/node_modules/steps_wizard/stepswizard.css b/src/node_modules/steps_wizard/stepswizard.css
index d99341a..67677ac 100644
--- a/src/node_modules/steps_wizard/stepswizard.css
+++ b/src/node_modules/steps_wizard/stepswizard.css
@@ -149,32 +149,43 @@
 
 .step-button {
 	position: relative;
-	display: flex;
-	align-items: center;
+	display: block; /* Changed from flex to block */
 	cursor: pointer;
-	font-size: 16px;
-	padding: 10px 16px 10px 44px;
+	font-size: 14px;
+	padding: 10px 8px 10px 44px;
 	margin: 10px 0;
 	border-radius: 12px;
 	font-weight: 500;
 	transition: background-color 0.3s;
-	width: fit-content;
 	border: 2px solid;
+	width: 120px;
+	min-width: 120px;
+	box-sizing: border-box;
+	flex-shrink: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: left;
+	line-height: 20px;
 }
 
 .step-button:before {
 	content: attr(data-step);
 	position: absolute;
 	left: 12px;
-	width: 20px;
-	height: 20px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 18px;
+	height: 18px;
 	border: 1px solid white;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-weight: bold;
-	font-size: 12px;
+	font-size: 11px;
+	flex-shrink: 0;
+	z-index: 1;
 }
 
 /* Default (active step) */

From 31bb4782c621d4a96551084ce2c07d366c29593b Mon Sep 17 00:00:00 2001
From: Muhammad Azim <azeemamjad412@gmail.com>
Date: Sun, 24 Aug 2025 23:08:55 +0500
Subject: [PATCH 4/4] add arrows

---
 bundle.js                                     | 84 +++----------------
 src/node_modules/steps_wizard/steps_wizard.js | 84 +++----------------
 src/node_modules/steps_wizard/stepswizard.css | 72 ++++++----------
 3 files changed, 53 insertions(+), 187 deletions(-)

diff --git a/bundle.js b/bundle.js
index 9c2c993..3a54073 100644
--- a/bundle.js
+++ b/bundle.js
@@ -4357,6 +4357,7 @@ async function steps_wizard (opts, protocol) {
   }
 
   let variables = []
+  let currentActiveStep = 0
 
   let _ = null
   if(protocol){
@@ -4370,8 +4371,6 @@ async function steps_wizard (opts, protocol) {
   <div class="steps-wizard main">
     <div class="steps-container">
       <div class="steps-slot"></div>
-      <button class="nav-arrow left" id="leftArrow">‹</button>
-      <button class="nav-arrow right" id="rightArrow">›</button>
     </div>
   </div>
   <style>
@@ -4379,15 +4378,9 @@ async function steps_wizard (opts, protocol) {
   `
 
   const style = shadow.querySelector('style')
-  const steps_container = shadow.querySelector('.steps-container')
   const steps_entries = shadow.querySelector('.steps-slot')
-  const leftArrow = shadow.querySelector('#leftArrow')
-  const rightArrow = shadow.querySelector('#rightArrow')
-  
   const subs = await sdb.watch(onbatch)
 
-  setupArrowNavigation()
-
   // for demo purpose
   render_steps([
     {name: "Optional Step", "type": "optional", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
@@ -4405,53 +4398,6 @@ async function steps_wizard (opts, protocol) {
   ])
 
   return el
-
-  function setupArrowNavigation() {
-    function updateArrows() {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      } else {
-        leftArrow.classList.remove('visible')
-        steps_container.classList.remove('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      } else {
-        rightArrow.classList.remove('visible')
-        steps_container.classList.remove('has-right-overflow')
-      }
-    }
-
-    leftArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: -(stepWidth + 8),
-        behavior: 'smooth'
-      })
-    })
-
-    rightArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: stepWidth + 8,
-        behavior: 'smooth'
-      })
-    })
-
-    steps_entries.addEventListener('scroll', updateArrows)
-    
-    window.addEventListener('resize', () => {
-      setTimeout(updateArrows, 100)
-    })
-
-    setTimeout(updateArrows, 100)
-  }
   
   function onmessage ({ type, data }) {
     console.log('steps_ data', type, data)
@@ -4484,30 +4430,26 @@ async function steps_wizard (opts, protocol) {
 
       btn.classList.add(`step-${status}`)
 
+      if (index === currentActiveStep - 1 && index > 0) {
+        btn.classList.add('back')
+      }
+      if (index === currentActiveStep + 1 && index < steps.length - 1) {
+        btn.classList.add('next')
+      }
+      if (index === currentActiveStep) {
+        btn.classList.add('active')
+      }
+
       btn.onclick = async () => {
         console.log('Clicked:', step)
+        currentActiveStep = index
         center_step(btn)
+        render_steps(steps)
         _?.up({type: 'step_clicked', data: {...step, index, total_steps: steps.length, is_accessible: accessible}})
-        
       };
 
       steps_entries.appendChild(btn)
     });
-    
-    setTimeout(() => {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      }
-    }, 100)
   }
 
   
diff --git a/src/node_modules/steps_wizard/steps_wizard.js b/src/node_modules/steps_wizard/steps_wizard.js
index a7d5cfe..81ff0ae 100644
--- a/src/node_modules/steps_wizard/steps_wizard.js
+++ b/src/node_modules/steps_wizard/steps_wizard.js
@@ -13,6 +13,7 @@ async function steps_wizard (opts, protocol) {
   }
 
   let variables = []
+  let currentActiveStep = 0
 
   let _ = null
   if(protocol){
@@ -26,8 +27,6 @@ async function steps_wizard (opts, protocol) {
   <div class="steps-wizard main">
     <div class="steps-container">
       <div class="steps-slot"></div>
-      <button class="nav-arrow left" id="leftArrow">‹</button>
-      <button class="nav-arrow right" id="rightArrow">›</button>
     </div>
   </div>
   <style>
@@ -35,15 +34,9 @@ async function steps_wizard (opts, protocol) {
   `
 
   const style = shadow.querySelector('style')
-  const steps_container = shadow.querySelector('.steps-container')
   const steps_entries = shadow.querySelector('.steps-slot')
-  const leftArrow = shadow.querySelector('#leftArrow')
-  const rightArrow = shadow.querySelector('#rightArrow')
-  
   const subs = await sdb.watch(onbatch)
 
-  setupArrowNavigation()
-
   // for demo purpose
   render_steps([
     {name: "Optional Step", "type": "optional", "is_completed": false, "component": "form_input", "status": "default", "data": ""},
@@ -61,53 +54,6 @@ async function steps_wizard (opts, protocol) {
   ])
 
   return el
-
-  function setupArrowNavigation() {
-    function updateArrows() {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      } else {
-        leftArrow.classList.remove('visible')
-        steps_container.classList.remove('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      } else {
-        rightArrow.classList.remove('visible')
-        steps_container.classList.remove('has-right-overflow')
-      }
-    }
-
-    leftArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: -(stepWidth + 8),
-        behavior: 'smooth'
-      })
-    })
-
-    rightArrow.addEventListener('click', () => {
-      const stepWidth = steps_entries.children[0]?.offsetWidth || 200
-      steps_entries.scrollBy({
-        left: stepWidth + 8,
-        behavior: 'smooth'
-      })
-    })
-
-    steps_entries.addEventListener('scroll', updateArrows)
-    
-    window.addEventListener('resize', () => {
-      setTimeout(updateArrows, 100)
-    })
-
-    setTimeout(updateArrows, 100)
-  }
   
   function onmessage ({ type, data }) {
     console.log('steps_ data', type, data)
@@ -140,30 +86,26 @@ async function steps_wizard (opts, protocol) {
 
       btn.classList.add(`step-${status}`)
 
+      if (index === currentActiveStep - 1 && index > 0) {
+        btn.classList.add('back')
+      }
+      if (index === currentActiveStep + 1 && index < steps.length - 1) {
+        btn.classList.add('next')
+      }
+      if (index === currentActiveStep) {
+        btn.classList.add('active')
+      }
+
       btn.onclick = async () => {
         console.log('Clicked:', step)
+        currentActiveStep = index
         center_step(btn)
+        render_steps(steps)
         _?.up({type: 'step_clicked', data: {...step, index, total_steps: steps.length, is_accessible: accessible}})
-        
       };
 
       steps_entries.appendChild(btn)
     });
-    
-    setTimeout(() => {
-      const scrollLeft = steps_entries.scrollLeft
-      const maxScroll = steps_entries.scrollWidth - steps_entries.clientWidth
-      
-      if (scrollLeft > 0) {
-        leftArrow.classList.add('visible')
-        steps_container.classList.add('has-left-overflow')
-      }
-      
-      if (scrollLeft < maxScroll - 1) {
-        rightArrow.classList.add('visible')
-        steps_container.classList.add('has-right-overflow')
-      }
-    }, 100)
   }
 
   
diff --git a/src/node_modules/steps_wizard/stepswizard.css b/src/node_modules/steps_wizard/stepswizard.css
index 67677ac..a203b5e 100644
--- a/src/node_modules/steps_wizard/stepswizard.css
+++ b/src/node_modules/steps_wizard/stepswizard.css
@@ -75,49 +75,6 @@
 	scroll-behavior: smooth;
 }
 
-/* Navigation arrows */
-.nav-arrow {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 40px;
-	height: 40px;
-	background: rgba(19, 19, 21, 0.9);
-	border: 1px solid #444;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	color: #ccc;
-	font-size: 18px;
-	font-weight: bold;
-	z-index: 10;
-	transition: all 0.3s ease;
-	opacity: 0;
-	pointer-events: none;
-}
-
-.nav-arrow.visible {
-	opacity: 1;
-	pointer-events: auto;
-}
-
-.nav-arrow:hover {
-	background: rgba(41, 153, 16, 0.8);
-	color: white;
-	border-color: #299910;
-	transform: translateY(-50%) scale(1.1);
-}
-
-.nav-arrow.left {
-	left: 10px;
-}
-
-.nav-arrow.right {
-	right: 10px;
-}
-
 /* Fade edges to indicate more content */
 .steps-container::before,
 .steps-container::after {
@@ -149,14 +106,14 @@
 
 .step-button {
 	position: relative;
-	display: block; /* Changed from flex to block */
+	display: block;
 	cursor: pointer;
 	font-size: 14px;
 	padding: 10px 8px 10px 44px;
 	margin: 10px 0;
 	border-radius: 12px;
 	font-weight: 500;
-	transition: background-color 0.3s;
+	transition: background-color 0.3s, transform 0.2s;
 	border: 2px solid;
 	width: 120px;
 	min-width: 120px;
@@ -188,6 +145,31 @@
 	z-index: 1;
 }
 
+/* Navigation arrows */
+.step-button.back::after {
+	content: "◄";
+	position: absolute;
+	left: 0px;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 12px;
+	font-weight: bold;
+	color: inherit;
+	animation: pulse-left 2s infinite;
+}
+
+.step-button.next::after {
+	content: "►";
+	position: absolute;
+	right: 8px;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 12px;
+	font-weight: bold;
+	color: inherit;
+	animation: pulse-right 2s infinite;
+}
+
 /* Default (active step) */
 .step-default {
 	background-color: #224B24;