From 46d5241bd499e8eb898e94fc6068237a84b04b87 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@MacBook-Pro.local>
Date: Wed, 1 Apr 2026 16:12:07 +0200
Subject: [PATCH] fix: input validation, null guard and code comments in
 app.js/style.css

---
 js/app.js | 6 +++++-
 style.css | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/js/app.js b/js/app.js
index 09b086b..72c187e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,7 +1,10 @@
 // Globaler State — aktive Farbe als { h, s, l } (HSL, 0-360, 0-100, 0-100)
+// state.color is read-only from outside — always use setColor() to update,
+// so that the colorChanged event is dispatched to all listening modules.
 export const state = {
   color: { h: 200, s: 60, l: 50 },
   setColor(hsl) {
+    if (!hsl || typeof hsl.h !== 'number' || typeof hsl.s !== 'number' || typeof hsl.l !== 'number') return;
     this.color = hsl;
     document.dispatchEvent(new CustomEvent('colorChanged', { detail: hsl }));
   }
@@ -14,6 +17,7 @@ document.querySelectorAll('.tab-btn').forEach(btn => {
     document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
     document.querySelectorAll('.tab-content').forEach(s => s.classList.remove('active'));
     btn.classList.add('active');
-    document.getElementById('tab-' + tab).classList.add('active');
+    const section = document.getElementById('tab-' + tab);
+    if (section) section.classList.add('active');
   });
 });
diff --git a/style.css b/style.css
index 0199c1d..8af2658 100644
--- a/style.css
+++ b/style.css
@@ -40,6 +40,7 @@ main { padding: 1.5rem; max-width: 900px; margin: 0 auto; }
 .tab-content { display: none; }
 .tab-content.active { display: block; }
 
+/* --- Shared component classes (used across tabs) --- */
 .color-preview {
   width: 100%;
   height: 80px;