atomicuilibrary 0.0.1 → 0.1.0

package/dist/collection/assets/js/demos/progress-demo.js

@@ -16,20 +16,30 @@ export function initProgressDemo() {
     </p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button onclick="showProgressPlayground()" variant="outline">🎮 Playground</ui-button>
-      <ui-button onclick="showProgressBasics()" variant="outline">Line Progress</ui-button>
-      <ui-button onclick="showProgressCircular()" variant="outline">Circular & Dashboard</ui-button>
-      <ui-button onclick="showProgressPremium()" variant="outline">✨ Premium Effects</ui-button>
-      <ui-button onclick="showProgressAdvanced()" variant="outline">Advanced Features</ui-button>
-      <ui-button onclick="showProgressIndustrial()" variant="outline">🛡️ Industrial Monitoring</ui-button>
-      <ui-button onclick="showProgressInteractive()" variant="outline">🕹️ Control Suite</ui-button>
-      <ui-button onclick="showProgressVertical()" variant="outline">↕️ Vertical Racks</ui-button>
+      <ui-button onclick="showProgressPlayground()" data-demo="playground" variant="outline">🎮 Playground</ui-button>
+      <ui-button onclick="showProgressLifecycles()" data-demo="lifecycles" variant="outline">🔄 Lifecycle Statuses</ui-button>
+      <ui-button onclick="showProgressScanning()" data-demo="scanning" variant="outline">🔍 Device Scanner</ui-button>
+      <ui-button onclick="showProgressBasics()" data-demo="basics" variant="outline">Line Progress</ui-button>
+      <ui-button onclick="showProgressCircular()" data-demo="circular" variant="outline">Circular & Dashboard</ui-button>
+      <ui-button onclick="showProgressPremium()" data-demo="premium" variant="outline">✨ Premium Effects</ui-button>
+      <ui-button onclick="showProgressAdvanced()" data-demo="advanced" variant="outline">Advanced Features</ui-button>
+      <ui-button onclick="showProgressIndustrial()" data-demo="industrial" variant="outline">🛡️ Industrial Monitoring</ui-button>
+      <ui-button onclick="showProgressInteractive()" data-demo="interactive" variant="outline">🕹️ Control Suite</ui-button>
+      <ui-button onclick="showProgressVertical()" data-demo="vertical" variant="outline">↕️ Vertical Racks</ui-button>
+      <ui-button onclick="showProgressStatusBar()" data-demo="statusbar" variant="outline">🏷️ Status Bar</ui-button>
     </div>
 
     <div id="progressDemoContainer" style="margin-top: 40px; min-height: 400px; padding: 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;"></div>
   `;
 
+  const updateProgressActiveBtn = demoName => {
+    section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+      btn.selected = btn.getAttribute('data-demo') === demoName;
+    });
+  };
+
   window.showProgressPlayground = function () {
+    updateProgressActiveBtn('playground');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -61,6 +71,10 @@ export function initProgressDemo() {
                 <option value="exception">Exception (Red)</option>
                 <option value="warning">Warning (Yellow)</option>
                 <option value="danger">Danger (Vibrating)</option>
+                <option value="empty">Empty</option>
+                <option value="running">Running (Spinner)</option>
+                <option value="completed">Completed (Check)</option>
+                <option value="interrupted">Interrupted (Alert)</option>
               </ui-dropdown>
             </label>
 
@@ -133,7 +147,136 @@ export function initProgressDemo() {
     code.innerText = `<ui-progress ${props}></ui-progress>`;
   };
 
+  window.showProgressLifecycles = function () {
+    updateProgressActiveBtn('lifecycles');
+    const container = document.getElementById('progressDemoContainer');
+    container.innerHTML = `
+      <div class="demo-block">
+        <h3 style="margin-bottom: 8px;">🔄 Lifecycle Status Monitoring</h3>
+        <p style="font-size: 14px; color: #64748b; margin-bottom: 24px;">
+          Track system processes end-to-end using native status lifecycles: <code>empty</code>, <code>running</code>, <code>completed</code>, and <code>interrupted</code>.
+        </p>
+
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 40px;">
+          
+          <!-- Empty State -->
+          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+            <h4 style="margin: 0 0 16px; font-size: 13px; color: #64748b; display: flex; align-items: center; justify-content: space-between;">
+              <span>Empty State</span>
+              <span style="font-size: 10px; font-weight: bold; background: #f1f5f9; color: #64748b; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Awaiting</span>
+            </h4>
+            <ui-progress percent="0" status="empty" stroke-width="12"></ui-progress>
+            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Task queued, awaiting resource allocation.</p>
+          </div>
+
+          <!-- Running State -->
+          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+            <h4 style="margin: 0 0 16px; font-size: 13px; color: #1890ff; display: flex; align-items: center; justify-content: space-between;">
+              <span>Running State</span>
+              <span style="font-size: 10px; font-weight: bold; background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Active</span>
+            </h4>
+            <ui-progress percent="45" status="running" stroke-width="12"></ui-progress>
+            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Actively processing records. Wave pulse enabled.</p>
+          </div>
+
+          <!-- Completed State -->
+          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+            <h4 style="margin: 0 0 16px; font-size: 13px; color: #52c41a; display: flex; align-items: center; justify-content: space-between;">
+              <span>Completed State</span>
+              <span style="font-size: 10px; font-weight: bold; background: #dcfce7; color: #15803d; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Success</span>
+            </h4>
+            <ui-progress percent="100" status="completed" stroke-width="12"></ui-progress>
+            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Operation finished successfully. Output generated.</p>
+          </div>
+
+          <!-- Interrupted State -->
+          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+            <h4 style="margin: 0 0 16px; font-size: 13px; color: #ff4d4f; display: flex; align-items: center; justify-content: space-between;">
+              <span>Interrupted State</span>
+              <span style="font-size: 10px; font-weight: bold; background: #fef2f2; color: #b91c1c; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Halted</span>
+            </h4>
+            <ui-progress percent="70" status="interrupted" stroke-width="12"></ui-progress>
+            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Network loss detected. Thread execution suspended.</p>
+          </div>
+
+        </div>
+
+        <!-- Dynamic Process Lifecycle Simulator -->
+        <div style="background: #1e293b; color: white; border-radius: 16px; padding: 32px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
+            <h4 style="margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.02em;">⚡ Operation Lifecycle Simulator</h4>
+            <span id="lifecycleStateText" style="font-size: 11px; font-weight: bold; background: #475569; color: #f8fafc; padding: 6px 14px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase;">QUEUED</span>
+          </div>
+
+          <div style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 24px; margin-bottom: 24px;">
+            <ui-progress id="lifecycleProgress" percent="0" status="empty" stroke-width="16" decimal-precision="1"></ui-progress>
+          </div>
+
+          <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+            <ui-button id="btnLifecycleInit" onclick="handleLifecycleAction('init')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">🔌 Queue (Empty)</ui-button>
+            <ui-button id="btnLifecycleStart" onclick="handleLifecycleAction('start')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">🚀 Start (Running)</ui-button>
+            <ui-button id="btnLifecycleInterrupt" onclick="handleLifecycleAction('interrupt')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">🚫 Halt (Interrupt)</ui-button>
+            <ui-button id="btnLifecycleComplete" onclick="handleLifecycleAction('complete')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">✨ Force Complete</ui-button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    let simInterval = null;
+
+    window.handleLifecycleAction = function (action) {
+      const pBar = document.getElementById('lifecycleProgress');
+      const stateText = document.getElementById('lifecycleStateText');
+      if (!pBar || !stateText) return;
+
+      if (window.lifecycleInterval) {
+        clearInterval(window.lifecycleInterval);
+        window.lifecycleInterval = null;
+      }
+
+      if (action === 'init') {
+        pBar.percent = 0;
+        pBar.status = 'empty';
+        stateText.innerText = 'QUEUED';
+        stateText.style.background = '#475569';
+      } else if (action === 'start') {
+        pBar.status = 'running';
+        stateText.innerText = 'RUNNING';
+        stateText.style.background = '#1d4ed8';
+        
+        let current = parseFloat(pBar.percent) || 0;
+        if (current >= 100) {
+          current = 0;
+        }
+
+        window.lifecycleInterval = setInterval(() => {
+          current += 1.2;
+          if (current < 100) {
+            pBar.percent = current.toFixed(1);
+          } else {
+            clearInterval(window.lifecycleInterval);
+            window.lifecycleInterval = null;
+            pBar.percent = 100;
+            pBar.status = 'completed';
+            stateText.innerText = 'COMPLETED';
+            stateText.style.background = '#15803d';
+          }
+        }, 100);
+      } else if (action === 'interrupt') {
+        pBar.status = 'interrupted';
+        stateText.innerText = 'INTERRUPTED';
+        stateText.style.background = '#b91c1c';
+      } else if (action === 'complete') {
+        pBar.percent = 100;
+        pBar.status = 'completed';
+        stateText.innerText = 'COMPLETED';
+        stateText.style.background = '#15803d';
+      }
+    };
+  };
+
   window.showProgressBasics = function () {
+    updateProgressActiveBtn('basics');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -165,6 +308,7 @@ export function initProgressDemo() {
   };
 
   window.showProgressCircular = function () {
+    updateProgressActiveBtn('circular');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -198,6 +342,7 @@ export function initProgressDemo() {
   };
 
   window.showProgressPremium = function () {
+    updateProgressActiveBtn('premium');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -234,6 +379,7 @@ export function initProgressDemo() {
   };
 
   window.showProgressAdvanced = function () {
+    updateProgressActiveBtn('advanced');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -282,6 +428,7 @@ export function initProgressDemo() {
   };
 
   window.showProgressIndustrial = function () {
+    updateProgressActiveBtn('industrial');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -387,6 +534,7 @@ export function initProgressDemo() {
   };
 
   window.showProgressInteractive = function () {
+    updateProgressActiveBtn('interactive');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -444,6 +592,7 @@ export function initProgressDemo() {
   };
 
   window.showProgressVertical = function () {
+    updateProgressActiveBtn('vertical');
     const container = document.getElementById('progressDemoContainer');
     container.innerHTML = `
       <div class="demo-block">
@@ -458,5 +607,549 @@ export function initProgressDemo() {
     `;
   };
 
+  window.showProgressScanning = function () {
+    updateProgressActiveBtn('scanning');
+    const container = document.getElementById('progressDemoContainer');
+    container.innerHTML = `
+      <div class="demo-block" style="font-family: inherit;">
+        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
+          <div>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 700; color: #0f172a;">🔍 Cybernetic Device Scanner</h3>
+            <p style="margin: 4px 0 0; font-size: 14px; color: #64748b;">Automated sector, memory, and threat scanning telemetry.</p>
+          </div>
+          <span id="scanStatusBadge" style="font-size: 11px; font-weight: 700; background: #f1f5f9; color: #64748b; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;">AWAITING COMMAND</span>
+        </div>
+
+        <div style="display: grid; grid-template-columns: 280px 1fr; gap: 32px; margin-bottom: 32px;">
+          <!-- Left Panel: Dial & Actions -->
+          <div style="background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+            <div style="position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center;">
+              <ui-progress 
+                id="scanCircularProgress" 
+                type="dashboard" 
+                percent="0" 
+                stroke-width="12" 
+                stroke-color='{"from": "#3b82f6", "to": "#10b981"}'
+                gap-position="bottom"
+                width="160"
+                glow="true"
+                liquid="true"
+                status="empty"
+              ></ui-progress>
+            </div>
+
+            <!-- Scanning Controls -->
+            <div style="display: flex; flex-direction: column; width: 100%; gap: 10px; margin-top: 10px;">
+              <ui-button id="btnStartScan" onclick="handleScanAction('start')" variant="primary" style="width: 100%;">⚡ Start Full Scan</ui-button>
+              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+                <ui-button id="btnPauseScan" onclick="handleScanAction('pause')" variant="outline" style="font-size: 12px;">⏸️ Pause</ui-button>
+                <ui-button id="btnHaltScan" onclick="handleScanAction('halt')" variant="outline" style="font-size: 12px; --ui-button-color: #ef4444; --ui-button-border-color: #fecaca;">🚫 Abort</ui-button>
+              </div>
+              <ui-button id="btnResetScan" onclick="handleScanAction('reset')" variant="ghost" style="width: 100%; font-size: 12px;">🔄 Reset Console</ui-button>
+            </div>
+          </div>
+
+          <!-- Right Panel: Live Logs & Telemetry -->
+          <div style="display: flex; flex-direction: column; gap: 20px;">
+            <!-- Telemetry Cards -->
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
+              <div style="background: white; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; text-align: center;">
+                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600;">Sectors Checked</span>
+                <h4 id="sectorsCount" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #0f172a;">0</h4>
+              </div>
+              <div style="background: white; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; text-align: center;">
+                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600;">Threats Detected</span>
+                <h4 id="threatsCount" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #0f172a;">0</h4>
+              </div>
+              <div style="background: white; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; text-align: center;">
+                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600;">Scan Time</span>
+                <h4 id="elapsedScanTime" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #0f172a;">0.0s</h4>
+              </div>
+            </div>
+
+            <!-- Terminal Console Logs -->
+            <div style="background: #0f172a; color: #38bdf8; border-radius: 16px; padding: 20px; font-family: 'Courier New', Courier, monospace; font-size: 12px; height: 180px; overflow-y: auto; border: 1px solid #1e293b; box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);" id="scanTerminalConsole">
+              <div style="color: #64748b;">[SCAN ENGINE v4.2.1] INITIALIZED...</div>
+              <div style="color: #64748b;">[CONSOLE] READY FOR HARDWARE RAMP...</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Linear Sub-System Feed -->
+        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+          <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: 0.05em;">Memory Buffer Allocation Check</h4>
+          <ui-progress id="scanLinearBuffer" percent="0" status="empty" stroke-width="16" vitality="true"></ui-progress>
+        </div>
+      </div>
+    `;
+
+    // Active scan memory variables
+    if (window.scanInterval) {
+      clearInterval(window.scanInterval);
+      window.scanInterval = null;
+    }
+    window.scanTimeElapsed = 0;
+    window.scanSectors = 0;
+    window.scanThreats = 0;
+
+    const mockSectors = [
+      '/dev/disk0s1/System/Library/Kernels/kernel',
+      '/dev/disk0s1/System/Library/Extensions/AppleACPIPlatform.kext',
+      '/dev/disk0s1/System/Library/Extensions/AppleSMBIOS.kext',
+      '/dev/disk0s1/System/Library/Fonts/SF-Pro.ttf',
+      '/dev/disk0s1/usr/sbin/cron',
+      '/dev/disk0s1/usr/bin/security',
+      '/dev/disk0s1/private/var/log/system.log',
+      '/dev/disk0s1/Applications/CyberneticScanner.app',
+      '/Memory/Alloc/RAM_BLOCK_0x00FF34D',
+      '/Memory/Alloc/RAM_BLOCK_0x01AA87D',
+      '/Ports/TCP/Port-80-Listener',
+      '/Ports/TCP/Port-443-SecureGateway',
+      '/Ports/TCP/Port-8080-AltServer',
+    ];
+
+    window.handleScanAction = function (action) {
+      const circ = document.getElementById('scanCircularProgress');
+      const line = document.getElementById('scanLinearBuffer');
+      const statusBadge = document.getElementById('scanStatusBadge');
+      const term = document.getElementById('scanTerminalConsole');
+      const secCount = document.getElementById('sectorsCount');
+      const thCount = document.getElementById('threatsCount');
+      const timeCount = document.getElementById('elapsedScanTime');
+
+      if (!circ || !line || !statusBadge || !term) return;
+
+      const log = (msg, color = '#38bdf8') => {
+        const div = document.createElement('div');
+        div.style.color = color;
+        div.innerText = `[${new Date().toLocaleTimeString()}] ${msg}`;
+        term.appendChild(div);
+        term.scrollTop = term.scrollHeight;
+      };
+
+      if (action === 'start') {
+        if (window.scanInterval) return;
+
+        circ.status = 'running';
+        line.status = 'running';
+        statusBadge.innerText = 'RUNNING';
+        statusBadge.style.background = '#e0f2fe';
+        statusBadge.style.color = '#0369a1';
+        log('INITIATING FULL HARDWARE DEVICE SCAN...', '#10b981');
+
+        window.scanTimeStart = Date.now() - window.scanTimeElapsed;
+
+        window.scanInterval = setInterval(() => {
+          let current = parseFloat(circ.percent) || 0;
+          if (current < 100) {
+            current += 1.6;
+            if (current > 100) current = 100;
+            
+            circ.percent = current.toFixed(1);
+            line.percent = current.toFixed(1);
+
+            // Update timer
+            window.scanTimeElapsed = Date.now() - window.scanTimeStart;
+            timeCount.innerText = (window.scanTimeElapsed / 1000).toFixed(1) + 's';
+
+            // Check mock sector files
+            window.scanSectors += Math.floor(Math.random() * 8) + 3;
+            secCount.innerText = window.scanSectors;
+
+            const randomFile = mockSectors[Math.floor(Math.random() * mockSectors.length)];
+            log(`CHECKING: ${randomFile}`);
+
+            // Mock threats detection at 40% and 80%
+            if (current >= 40 && window.scanThreats === 0) {
+              window.scanThreats = 1;
+              thCount.innerText = '1';
+              thCount.style.color = '#f59e0b';
+              circ.status = 'warning';
+              line.status = 'warning';
+              statusBadge.innerText = 'WARNING';
+              statusBadge.style.background = '#fef3c7';
+              statusBadge.style.color = '#b45309';
+              log('⚠️ SYSTEM WARNING: UNVERIFIED BUFFER DETECTED AT SECTOR 4!', '#f59e0b');
+            }
+
+            if (current >= 80 && window.scanThreats === 1) {
+              window.scanThreats = 2;
+              thCount.innerText = '2';
+              thCount.style.color = '#ef4444';
+              circ.status = 'interrupted';
+              line.status = 'interrupted';
+              statusBadge.innerText = 'SUSPECTED THREAT';
+              statusBadge.style.background = '#fef2f2';
+              statusBadge.style.color = '#b91c1c';
+              log('🚨 CRITICAL ALERT: CORRUPTED MALICIOUS THREAD IN RAM BLOCK!', '#ef4444');
+            }
+
+          } else {
+            clearInterval(window.scanInterval);
+            window.scanInterval = null;
+            circ.percent = 100;
+            line.percent = 100;
+            
+            if (window.scanThreats > 0) {
+              circ.status = 'interrupted';
+              line.status = 'interrupted';
+              statusBadge.innerText = 'THREAT FOUND';
+              statusBadge.style.background = '#fef2f2';
+              statusBadge.style.color = '#b91c1c';
+              log('❌ SCAN COMPLETE: 2 CRITICAL THREATS SECURED. IMMEDIATE ACTION REQUIRED.', '#ef4444');
+            } else {
+              circ.status = 'completed';
+              line.status = 'completed';
+              statusBadge.innerText = 'COMPLETED';
+              statusBadge.style.background = '#dcfce7';
+              statusBadge.style.color = '#15803d';
+              log('✨ SCAN COMPLETE: DEVICE SECURE. ZERO THREATS DETECTED.', '#10b981');
+            }
+          }
+        }, 120);
+      } else if (action === 'pause') {
+        if (!window.scanInterval) return;
+        clearInterval(window.scanInterval);
+        window.scanInterval = null;
+        
+        statusBadge.innerText = 'PAUSED';
+        statusBadge.style.background = '#f1f5f9';
+        statusBadge.style.color = '#475569';
+        log('SCAN SUSPENDED BY OPERATOR.', '#faad14');
+      } else if (action === 'halt') {
+        if (window.scanInterval) {
+          clearInterval(window.scanInterval);
+          window.scanInterval = null;
+        }
+        circ.status = 'interrupted';
+        line.status = 'interrupted';
+        statusBadge.innerText = 'ABORTED';
+        statusBadge.style.background = '#fef2f2';
+        statusBadge.style.color = '#b91c1c';
+        log('❌ CRITICAL: HARDWARE SCAN ABORTED IMMEDIATELY!', '#ef4444');
+      } else if (action === 'reset') {
+        if (window.scanInterval) {
+          clearInterval(window.scanInterval);
+          window.scanInterval = null;
+        }
+        circ.percent = 0;
+        circ.status = 'empty';
+        line.percent = 0;
+        line.status = 'empty';
+        window.scanTimeElapsed = 0;
+        window.scanSectors = 0;
+        window.scanThreats = 0;
+
+        secCount.innerText = '0';
+        thCount.innerText = '0';
+        thCount.style.color = '';
+        timeCount.innerText = '0.0s';
+        statusBadge.innerText = 'AWAITING COMMAND';
+        statusBadge.style.background = '';
+        statusBadge.style.color = '';
+        
+        term.innerHTML = `
+          <div style="color: #64748b;">[SCAN ENGINE v4.2.1] INITIALIZED...</div>
+          <div style="color: #64748b;">[CONSOLE] READY FOR HARDWARE RAMP...</div>
+        `;
+        log('SCAN TELEMETRY CLEARED AND RESET.', '#64748b');
+      }
+    };
+  };
+
+  window.showProgressStatusBar = function () {
+    updateProgressActiveBtn('statusbar');
+    const container = document.getElementById('progressDemoContainer');
+    container.innerHTML = `
+      <div class="demo-block">
+        <h3 style="margin-bottom:6px;">🏷️ Status Bar Variant</h3>
+        <p style="font-size:13px; color:#64748b; margin:0 0 28px; line-height:1.6;">Add <code>status-bar</code> to any <code>ui-progress</code> line bar. The status badge and percentage are derived automatically from <code>percent</code> and <code>status</code>. Use <code>status-bar-align</code> to position the label and <code>status-labels</code> to override any text.</p>
+
+        <!-- Custom labels showcase -->
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Custom Labels</h4>
+        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:36px;">
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">Deploy pipeline labels</span>
+            <ui-progress percent="0"  status-bar stroke-width="6"
+              status-labels='{"notStarted":"Queued","running":"Deploying","interrupted":"Rolled Back","completed":"Live"}'></ui-progress>
+          </div>
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">File transfer labels</span>
+            <ui-progress percent="55" status-bar stroke-width="6" stroke-color="#3b82f6"
+              status-labels='{"notStarted":"Pending","running":"Uploading","interrupted":"Paused","completed":"Sent"}'></ui-progress>
+          </div>
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">Partial override (running only)</span>
+            <ui-progress percent="72" status-bar stroke-width="6" stroke-color="#8b5cf6"
+              status-labels='{"running":"In Progress"}'></ui-progress>
+          </div>
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">Interrupted — custom label</span>
+            <ui-progress percent="41" status="interrupted" status-bar stroke-width="6" stroke-color="#f59e0b"
+              status-labels='{"interrupted":"On Hold"}'></ui-progress>
+          </div>
+        </div>
+
+        <!-- Badge Alignment showcase -->
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Chip Alignment</h4>
+        <div style="display:flex; flex-direction:column; gap:12px; margin-bottom:36px;">
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">LEFT (default) — chip anchored to left edge</span>
+            <ui-progress percent="60" status-bar status-bar-align="left" stroke-width="7" stroke-color="#3b82f6"></ui-progress>
+          </div>
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">CENTER — chip centered on bar</span>
+            <ui-progress percent="60" status-bar status-bar-align="center" stroke-width="7" stroke-color="#8b5cf6"></ui-progress>
+          </div>
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">RIGHT — chip anchored to right edge</span>
+            <ui-progress percent="60" status-bar status-bar-align="right" stroke-width="7" stroke-color="#22c55e"></ui-progress>
+          </div>
+        </div>
+
+        <!-- All 4 lifecycle states -->
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Lifecycle States</h4>
+        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:36px;">
+
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <ui-progress percent="0" status-bar stroke-width="6"></ui-progress>
+          </div>
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <ui-progress percent="45" status-bar stroke-width="6" stroke-color="#3b82f6"></ui-progress>
+          </div>
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <ui-progress percent="72" status="interrupted" status-bar stroke-width="6" stroke-color="#f59e0b"></ui-progress>
+          </div>
+          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <ui-progress percent="100" status-bar stroke-width="6" stroke-color="#22c55e"></ui-progress>
+          </div>
+        </div>
+
+        <!-- Real-world context cards -->
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Real-World Usage</h4>
+        <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:36px;">
+
+          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
+              <div>
+                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">CI/CD Pipeline</p>
+                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">main → production</p>
+              </div>
+              <span style="font-size:10px; font-weight:700; background:#eff6ff; color:#3b82f6; padding:3px 8px; border-radius:20px;">DEPLOY</span>
+            </div>
+            <ui-progress percent="68" status-bar stroke-width="7" stroke-color="#3b82f6"></ui-progress>
+          </div>
+
+          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
+              <div>
+                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">File Upload</p>
+                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">design-assets-v3.zip</p>
+              </div>
+              <span style="font-size:10px; font-weight:700; background:#f0fdf4; color:#16a34a; padding:3px 8px; border-radius:20px;">DONE</span>
+            </div>
+            <ui-progress percent="100" status-bar status-bar-align="right" stroke-width="7" stroke-color="#22c55e"></ui-progress>
+          </div>
+
+          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
+              <div>
+                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">Database Migration</p>
+                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">prod_db → replica_eu</p>
+              </div>
+              <span style="font-size:10px; font-weight:700; background:#fffbeb; color:#d97706; padding:3px 8px; border-radius:20px;">PAUSED</span>
+            </div>
+            <ui-progress percent="41" status="interrupted" status-bar stroke-width="7" stroke-color="#f59e0b"></ui-progress>
+          </div>
+
+          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
+              <div>
+                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">Scheduled Backup</p>
+                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">Starts at 03:00 UTC</p>
+              </div>
+              <span style="font-size:10px; font-weight:700; background:#f1f5f9; color:#64748b; padding:3px 8px; border-radius:20px;">QUEUED</span>
+            </div>
+            <ui-progress percent="0" status-bar status-bar-align="center" stroke-width="7"></ui-progress>
+          </div>
+        </div>
+
+        <!-- Interactive demo -->
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Interactive</h4>
+        <div style="background:white; padding:24px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;">
+            <label style="font-size:13px; font-weight:600; white-space:nowrap; color:#0f172a;">Progress: <span id="sb-val">0</span>%</label>
+            <input type="range" id="sb-slider" min="0" max="100" value="0" style="flex:1; min-width:140px;">
+            <ui-button id="sb-btn-interrupt" variant="outline" style="--ui-button-color:#d97706; --ui-button-border-color:#fde68a;">⛔ Interrupt</ui-button>
+            <ui-button id="sb-btn-reset" variant="ghost">↺ Reset</ui-button>
+          </div>
+          <div style="display:flex; align-items:center; gap:8px; margin-bottom:16px;">
+            <span style="font-size:12px; font-weight:600; color:#64748b;">Align:</span>
+            <button id="sb-align-left"   data-align="left"   style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #3b82f6; background:#eff6ff; color:#2563eb; cursor:pointer;">Left</button>
+            <button id="sb-align-center" data-align="center" style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Center</button>
+            <button id="sb-align-right"  data-align="right"  style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Right</button>
+          </div>
+          <!-- Position and Height controls -->
+          <div style="display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
+            <div style="display:flex; align-items:center; gap:8px;">
+              <span style="font-size:12px; font-weight:600; color:#64748b;">Position:</span>
+              <button id="sb-pos-inside" data-pos="inside" style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #3b82f6; background:#eff6ff; color:#2563eb; cursor:pointer;">Inside Bar</button>
+              <button id="sb-pos-top"    data-pos="top"    style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">On Top</button>
+            </div>
+            <div style="display:flex; align-items:center; gap:8px; flex:1; min-width:200px;">
+              <span style="font-size:12px; font-weight:600; color:#64748b; white-space:nowrap;">Bar Height: <span id="sb-height-val">8</span>px</span>
+              <input type="range" id="sb-height-slider" min="2" max="40" value="8" style="flex:1; cursor:pointer;">
+            </div>
+          </div>
+          <!-- Custom label inputs -->
+          <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:20px; padding:16px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+              Not Started
+              <input id="sb-lbl-notStarted" type="text" placeholder="Not Started" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+            </label>
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+              Running
+              <input id="sb-lbl-running" type="text" placeholder="Running" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+            </label>
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+              Interrupted
+              <input id="sb-lbl-interrupted" type="text" placeholder="Interrupted" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+            </label>
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+              Completed
+              <input id="sb-lbl-completed" type="text" placeholder="Completed" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+            </label>
+          </div>
+          <ui-progress id="sb-bar" percent="0" status-bar status-bar-align="left" stroke-width="8"></ui-progress>
+        </div>
+
+        <!-- Usage snippet -->
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:28px 0 14px;">Usage</h4>
+        <div style="background:#0f172a; border-radius:10px; padding:18px 22px; font-family:'Courier New',monospace; font-size:12px; line-height:1.9; color:#e2e8f0; overflow-x:auto;">
+          <span style="color:#64748b;">/* default labels (rendered inside, forces minimum 32px height) */</span><br>
+          <span style="color:#7dd3fc;">&lt;ui-progress</span><span style="color:#86efac;"> percent</span><span style="color:#f8fafc;">="45"</span><span style="color:#86efac;"> status-bar</span><span style="color:#7dd3fc;">&gt;&lt;/ui-progress&gt;</span><br><br>
+          <span style="color:#64748b;">/* status bar on top (allows custom/reduced height via stroke-width) */</span><br>
+          <span style="color:#7dd3fc;">&lt;ui-progress</span><span style="color:#86efac;"> percent</span><span style="color:#f8fafc;">="60"</span><span style="color:#86efac;"> status-bar</span><span style="color:#86efac;"> status-bar-position</span><span style="color:#f8fafc;">="top"</span><span style="color:#86efac;"> stroke-width</span><span style="color:#f8fafc;">="4"</span><span style="color:#7dd3fc;">&gt;&lt;/ui-progress&gt;</span><br><br>
+          <span style="color:#64748b;">/* custom all 4 labels */</span><br>
+          <span style="color:#7dd3fc;">&lt;ui-progress</span><span style="color:#86efac;"> percent</span><span style="color:#f8fafc;">="55"</span><span style="color:#86efac;"> status-bar</span><br>
+          &nbsp;&nbsp;<span style="color:#86efac;"> status-labels</span><span style="color:#f8fafc;">='{"notStarted":"Queued","running":"Uploading","interrupted":"Paused","completed":"Sent"}'</span><span style="color:#7dd3fc;">&gt;&lt;/ui-progress&gt;</span>
+        </div>
+      </div>
+    `;
+
+    const bar    = document.getElementById('sb-bar');
+    const slider = document.getElementById('sb-slider');
+    const valEl  = document.getElementById('sb-val');
+    const heightSlider = document.getElementById('sb-height-slider');
+    const heightValEl = document.getElementById('sb-height-val');
+    let interrupted = false;
+
+    function applyState(pct, isInterrupted) {
+      valEl.textContent = pct;
+      bar.setAttribute('percent', pct);
+      if (isInterrupted) {
+        bar.setAttribute('status', 'interrupted');
+        bar.setAttribute('stroke-color', '#f59e0b');
+      } else if (pct >= 100) {
+        bar.setAttribute('status', 'completed');
+        bar.setAttribute('stroke-color', '#22c55e');
+      } else if (pct > 0) {
+        bar.setAttribute('status', 'running');
+        bar.setAttribute('stroke-color', '#3b82f6');
+      } else {
+        bar.removeAttribute('status');
+        bar.setAttribute('stroke-color', '#94a3b8');
+      }
+    }
+
+    slider.addEventListener('input', e => {
+      interrupted = false;
+      applyState(+e.target.value, false);
+    });
+    document.getElementById('sb-btn-interrupt').addEventListener('click', () => {
+      interrupted = true;
+      applyState(+slider.value, true);
+    });
+    document.getElementById('sb-btn-reset').addEventListener('click', () => {
+      interrupted = false;
+      slider.value = 0;
+      applyState(0, false);
+
+      // Reset height and position
+      heightSlider.value = 8;
+      heightValEl.textContent = 8;
+      bar.setAttribute('stroke-width', 8);
+      bar.removeAttribute('status-bar-position');
+
+      // Update position toggle buttons styles
+      ['inside', 'top'].forEach(p => {
+        const btn = document.getElementById(`sb-pos-${p}`);
+        const active = p === 'inside';
+        btn.style.borderColor  = active ? '#3b82f6' : '#e2e8f0';
+        btn.style.background   = active ? '#eff6ff' : '#f8fafc';
+        btn.style.color        = active ? '#2563eb' : '#475569';
+      });
+    });
+
+    // Alignment toggle buttons
+    ['left', 'center', 'right'].forEach(align => {
+      document.getElementById(`sb-align-${align}`).addEventListener('click', () => {
+        bar.setAttribute('status-bar-align', align);
+        ['left', 'center', 'right'].forEach(a => {
+          const btn = document.getElementById(`sb-align-${a}`);
+          const active = a === align;
+          btn.style.borderColor  = active ? '#3b82f6' : '#e2e8f0';
+          btn.style.background   = active ? '#eff6ff' : '#f8fafc';
+          btn.style.color        = active ? '#2563eb' : '#475569';
+        });
+      });
+    });
+
+    // Position toggle buttons
+    ['inside', 'top'].forEach(pos => {
+      document.getElementById(`sb-pos-${pos}`).addEventListener('click', () => {
+        bar.setAttribute('status-bar-position', pos);
+        ['inside', 'top'].forEach(p => {
+          const btn = document.getElementById(`sb-pos-${p}`);
+          const active = p === pos;
+          btn.style.borderColor  = active ? '#3b82f6' : '#e2e8f0';
+          btn.style.background   = active ? '#eff6ff' : '#f8fafc';
+          btn.style.color        = active ? '#2563eb' : '#475569';
+        });
+      });
+    });
+
+    // Height slider
+    heightSlider.addEventListener('input', e => {
+      const val = e.target.value;
+      heightValEl.textContent = val;
+      bar.setAttribute('stroke-width', val);
+    });
+
+    // Custom label inputs — update status-labels attribute live
+    function syncLabels() {
+      const labels = {};
+      ['notStarted', 'running', 'interrupted', 'completed'].forEach(key => {
+        const val = document.getElementById(`sb-lbl-${key}`)?.value.trim();
+        if (val) labels[key] = val;
+      });
+      if (Object.keys(labels).length) {
+        bar.setAttribute('status-labels', JSON.stringify(labels));
+      } else {
+        bar.removeAttribute('status-labels');
+      }
+    }
+    ['notStarted', 'running', 'interrupted', 'completed'].forEach(key => {
+      document.getElementById(`sb-lbl-${key}`)?.addEventListener('input', syncLabels);
+    });
+  };
+
   showProgressPlayground();
 }