From c134d2f5937b5d32d73dc15a4880e5554c145f55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn=20Seidel?= <joern.seidel@casoon.de>
Date: Thu, 1 Oct 2026 20:03:26 +0200
Subject: [PATCH 1/2] fix: replace style attributes and inline scripts the CSP
 would block

- Shiki code blocks: a transformer turns the inline styles into classes
  (packages/styles/src/shiki.{mjs,css}).
- Progress bars: width via data-width, applied from a bundled script in
  AppShell; DocsHero status dot: box-shadow moved to a class.
- QuizToggle, Tabs, Hint, Quiz and ChatWidget: is:inline/define:vars
  scripts become bundled scripts (Astro does not hash body inline
  scripts); data moves to data attributes. The stored quiz visibility is
  applied by AppShell's head script, so it holds before first paint.
---
 apps/docs/src/components/DocsHero.astro       |   7 +-
 packages/styles/package.json                  |   4 +-
 packages/styles/src/prose.css                 |   1 +
 packages/styles/src/shiki.css                 |  86 ++++++
 packages/styles/src/shiki.d.mts               |   5 +
 packages/styles/src/shiki.mjs                 |  31 ++
 .../src/components/content/ChatWidget.astro   | 290 +++++++++---------
 packages/ui/src/components/content/Tabs.astro |  80 ++---
 .../src/components/courses/CourseCard.astro   |   2 +-
 packages/ui/src/components/courses/Hint.astro |  18 +-
 .../ui/src/components/courses/LessonNav.astro |   2 +-
 .../src/components/courses/ProgressBar.astro  |   4 +-
 packages/ui/src/components/courses/Quiz.astro |  24 +-
 .../components/courses/TotalProgress.astro    |   3 +-
 .../ui/src/components/layout/AppShell.astro   |  15 +
 .../components/navigation/QuizToggle.astro    |  90 ++----
 .../ui/src/styles/components/lesson-nav.css   |   1 +
 17 files changed, 393 insertions(+), 270 deletions(-)
 create mode 100644 packages/styles/src/shiki.css
 create mode 100644 packages/styles/src/shiki.d.mts
 create mode 100644 packages/styles/src/shiki.mjs

diff --git a/apps/docs/src/components/DocsHero.astro b/apps/docs/src/components/DocsHero.astro
index 62d9e5c..07604e4 100644
--- a/apps/docs/src/components/DocsHero.astro
+++ b/apps/docs/src/components/DocsHero.astro
@@ -10,8 +10,7 @@
       class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-3.5 py-1.5 dark:border-slate-700 dark:bg-slate-900"
     >
       <span
-        class="h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400"
-        style="box-shadow: 0 0 6px 2px oklch(79.2% 0.209 151.711 / 0.5)"
+        class="hero-status-dot h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400"
       ></span>
       <div class="h-4 overflow-hidden text-xs font-mono text-slate-600 dark:text-slate-300">
         <ul
@@ -87,6 +86,10 @@
 </section>
 
 <style>
+  .hero-status-dot {
+    box-shadow: 0 0 6px 2px oklch(79.2% 0.209 151.711 / 0.5);
+  }
+
   .hero-grid {
     background-image: linear-gradient(to right, oklch(0% 0 0 / 1) 1px, transparent 1px),
       linear-gradient(to bottom, oklch(0% 0 0 / 1) 1px, transparent 1px);
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 11cfb8b..1d74d36 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -7,7 +7,9 @@
   "exports": {
     "./global.css": "./src/global.css",
     "./tokens.css": "./src/tokens.css",
-    "./prose.css": "./src/prose.css"
+    "./prose.css": "./src/prose.css",
+    "./shiki.css": "./src/shiki.css",
+    "./shiki.mjs": "./src/shiki.mjs"
   },
   "dependencies": {
     "tailwindcss": "catalog:"
diff --git a/packages/styles/src/prose.css b/packages/styles/src/prose.css
index 6e4ff43..b702d1c 100644
--- a/packages/styles/src/prose.css
+++ b/packages/styles/src/prose.css
@@ -1,4 +1,5 @@
 /* MDX/Prose Styling */
+@import "./shiki.css";
 @reference "@knowledge-core/styles/global.css";
 
 @layer components {
diff --git a/packages/styles/src/shiki.css b/packages/styles/src/shiki.css
new file mode 100644
index 0000000..7234c8b
--- /dev/null
+++ b/packages/styles/src/shiki.css
@@ -0,0 +1,86 @@
+/*
+  Classes for the inline styles of Shiki code blocks (github-dark), written by the
+  shikiStyleToClass transformer in shiki.mjs. Unlayered, like the style attributes
+  they replace, so they win over layered rules such as .prose pre.astro-code span.
+*/
+.shiki-color-6a737d {
+  color: #6a737d;
+}
+.shiki-color-79b8ff {
+  color: #79b8ff;
+}
+.shiki-color-b392f0 {
+  color: #b392f0;
+}
+.shiki-color-e1e4e8 {
+  color: #e1e4e8;
+}
+.shiki-color-85e89d {
+  color: #85e89d;
+}
+.shiki-color-f97583 {
+  color: #f97583;
+}
+.shiki-color-9ecbff {
+  color: #9ecbff;
+}
+.shiki-color-ffab70 {
+  color: #ffab70;
+}
+.shiki-color-fdaeb7 {
+  color: #fdaeb7;
+}
+.shiki-color-24292e {
+  color: #24292e;
+}
+.shiki-color-dbedff {
+  color: #dbedff;
+}
+.shiki-color-2f363d {
+  color: #2f363d;
+}
+.shiki-color-d1d5da {
+  color: #d1d5da;
+}
+.shiki-background-color-24292e {
+  background-color: #24292e;
+}
+.shiki-background-color-f97583 {
+  background-color: #f97583;
+}
+.shiki-background-color-86181d {
+  background-color: #86181d;
+}
+.shiki-background-color-144620 {
+  background-color: #144620;
+}
+.shiki-background-color-c24e00 {
+  background-color: #c24e00;
+}
+.shiki-background-color-79b8ff {
+  background-color: #79b8ff;
+}
+.shiki-overflow-x-auto {
+  overflow-x: auto;
+}
+.shiki-white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+.shiki-word-wrap-break-word {
+  word-wrap: break-word;
+}
+.shiki-font-style-italic {
+  font-style: italic;
+}
+.shiki-font-weight-bold {
+  font-weight: bold;
+}
+.shiki-text-decoration-underline {
+  text-decoration: underline;
+}
+.shiki-text-decoration-line-through {
+  text-decoration: line-through;
+}
+.shiki-text-decoration-underline-line-through {
+  text-decoration: underline line-through;
+}
diff --git a/packages/styles/src/shiki.d.mts b/packages/styles/src/shiki.d.mts
new file mode 100644
index 0000000..8a555d8
--- /dev/null
+++ b/packages/styles/src/shiki.d.mts
@@ -0,0 +1,5 @@
+/** Shiki transformer that moves inline styles to classes (see shiki.mjs). */
+export declare const shikiStyleToClass: {
+  name: string;
+  root(root: unknown): void;
+};
diff --git a/packages/styles/src/shiki.mjs b/packages/styles/src/shiki.mjs
new file mode 100644
index 0000000..b19b3dd
--- /dev/null
+++ b/packages/styles/src/shiki.mjs
@@ -0,0 +1,31 @@
+/**
+ * Shiki transformer: turns every inline style Shiki and Astro put on code blocks
+ * (`color:#e1e4e8`, `overflow-x:auto` …) into a class (`shiki-color-e1e4e8`,
+ * `shiki-overflow-x-auto` …), because the CSP blocks style attributes. The classes
+ * are defined in shiki.css for the github-dark theme.
+ */
+export const shikiStyleToClass = {
+  name: 'style-to-class',
+  root(root) {
+    const visit = (node) => {
+      if (node.type !== 'element') return;
+      const style = node.properties?.style;
+      if (typeof style === 'string') {
+        const classes = style
+          .split(';')
+          .map((declaration) => declaration.trim())
+          .filter(Boolean)
+          .map((declaration) => {
+            const [property, ...value] = declaration.split(':');
+            const name = `${property}-${value.join(':')}`.trim().toLowerCase();
+            return `shiki-${name.replace(/[^a-z0-9]+/g, '-').replace(/-$/, '')}`;
+          });
+        const existing = node.properties.class;
+        node.properties.class = [existing, ...classes].filter(Boolean).join(' ');
+        node.properties.style = undefined;
+      }
+      for (const child of node.children ?? []) visit(child);
+    };
+    for (const child of root.children) visit(child);
+  },
+};
diff --git a/packages/ui/src/components/content/ChatWidget.astro b/packages/ui/src/components/content/ChatWidget.astro
index 1af9327..ddb713f 100644
--- a/packages/ui/src/components/content/ChatWidget.astro
+++ b/packages/ui/src/components/content/ChatWidget.astro
@@ -12,7 +12,11 @@ const {
 } = Astro.props;
 ---
 
-<div class="fixed bottom-6 right-6 z-50 font-sans" id="knowledge-chat-container">
+<div
+  class="fixed bottom-6 right-6 z-50 font-sans"
+  id="knowledge-chat-container"
+  data-api-endpoint={apiEndpoint}
+>
   <!-- Trigger Button -->
   <button
     id="chat-trigger"
@@ -84,169 +88,175 @@ const {
   </div>
 </div>
 
-<script define:vars={{ apiEndpoint }}>
-  // Initialize state
-  let isOpen = false;
-  let chatHistory = [];
-
-  const container = document.getElementById('knowledge-chat-container');
-  const trigger = document.getElementById('chat-trigger');
-  const panel = document.getElementById('chat-panel');
-  const closeBtn = document.getElementById('chat-close');
-  const messagesContainer = document.getElementById('chat-messages');
-  const form = document.getElementById('chat-form');
-  const input = document.getElementById('chat-input');
-
-  const chatIcon = trigger?.querySelector('.chat-icon');
-  const closeIcon = trigger?.querySelector('.close-icon');
-
-  function toggleChat() {
-    isOpen = !isOpen;
-    if (isOpen) {
-      panel?.classList.remove('hidden');
-      setTimeout(() => panel?.classList.remove('scale-95', 'opacity-0'), 50);
-      chatIcon?.classList.add('hidden');
-      closeIcon?.classList.remove('hidden');
-      input?.focus();
-    } else {
-      panel?.classList.add('scale-95', 'opacity-0');
-      setTimeout(() => panel?.classList.add('hidden'), 300);
-      chatIcon?.classList.remove('hidden');
-      closeIcon?.classList.add('hidden');
+<script>
+  // Bundled instead of is:inline/define:vars: the CSP only allows scripts Astro hashed or served from 'self'.
+  document.addEventListener('astro:page-load', () => {
+    const container = document.getElementById('knowledge-chat-container');
+    const apiEndpoint = container?.dataset.apiEndpoint;
+    if (!apiEndpoint) return;
+
+    // Initialize state
+    let isOpen = false;
+    const chatHistory: { role: string; content: string }[] = [];
+
+    const trigger = document.getElementById('chat-trigger');
+    const panel = document.getElementById('chat-panel');
+    const closeBtn = document.getElementById('chat-close');
+    const messagesContainer = document.getElementById('chat-messages');
+    const form = document.getElementById('chat-form');
+    const input = document.getElementById('chat-input') as HTMLInputElement | null;
+
+    const chatIcon = trigger?.querySelector('.chat-icon');
+    const closeIcon = trigger?.querySelector('.close-icon');
+
+    function toggleChat() {
+      isOpen = !isOpen;
+      if (isOpen) {
+        panel?.classList.remove('hidden');
+        setTimeout(() => panel?.classList.remove('scale-95', 'opacity-0'), 50);
+        chatIcon?.classList.add('hidden');
+        closeIcon?.classList.remove('hidden');
+        input?.focus();
+      } else {
+        panel?.classList.add('scale-95', 'opacity-0');
+        setTimeout(() => panel?.classList.add('hidden'), 300);
+        chatIcon?.classList.remove('hidden');
+        closeIcon?.classList.add('hidden');
+      }
     }
-  }
 
-  trigger?.addEventListener('click', toggleChat);
-  closeBtn?.addEventListener('click', toggleChat);
+    trigger?.addEventListener('click', toggleChat);
+    closeBtn?.addEventListener('click', toggleChat);
 
-  // Helper to escape HTML and parse simple markdown bold & code blocks
-  function formatMessage(text) {
-    const escaped = text
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+    // Helper to escape HTML and parse simple markdown bold & code blocks
+    function formatMessage(text: string) {
+      const escaped = text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
     
-    // Parse inline code `code`
-    let formatted = escaped.replace(/`([^`]+)`/g, '<code class="bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-xs border border-border">$1</code>');
+      // Parse inline code `code`
+      let formatted = escaped.replace(/`([^`]+)`/g, '<code class="bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-xs border border-border">$1</code>');
     
-    // Parse bold **text**
-    formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-
-    // Parse code blocks ```lang ... ```
-    formatted = formatted.replace(/```(?:[a-zA-Z]+)?\n([\s\S]*?)```/g, '<pre class="bg-gray-950 dark:bg-black text-gray-100 p-3 rounded-lg font-mono text-xs overflow-x-auto border border-border my-2"><code class="block whitespace-pre">$1</code></pre>');
+      // Parse bold **text**
+      formatted = formatted.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
 
-    // Parse paragraph breaks
-    return formatted.replace(/\n/g, '<br>');
-  }
+      // Parse code blocks ```lang ... ```
+      formatted = formatted.replace(/```(?:[a-zA-Z]+)?\n([\s\S]*?)```/g, '<pre class="bg-gray-950 dark:bg-black text-gray-100 p-3 rounded-lg font-mono text-xs overflow-x-auto border border-border my-2"><code class="block whitespace-pre">$1</code></pre>');
 
-  function appendMessage(sender, text, isStreaming = false) {
-    const messageDiv = document.createElement('div');
-    messageDiv.className = 'flex gap-2 max-w-[85%]';
-    if (sender === 'user') {
-      messageDiv.className += ' ml-auto flex-row-reverse';
+      // Parse paragraph breaks
+      return formatted.replace(/\n/g, '<br>');
     }
 
-    const avatarDiv = document.createElement('div');
-    avatarDiv.className = 'flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm';
-    if (sender === 'user') {
-      avatarDiv.className += ' bg-primary text-white';
-      avatarDiv.textContent = 'U';
-    } else {
-      avatarDiv.className += ' bg-primary/10 text-primary';
-      avatarDiv.textContent = 'AI';
-    }
+    function appendMessage(sender: 'user' | 'assistant', text: string) {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = 'flex gap-2 max-w-[85%]';
+      if (sender === 'user') {
+        messageDiv.className += ' ml-auto flex-row-reverse';
+      }
 
-    const contentDiv = document.createElement('div');
-    contentDiv.className = 'text-text text-sm rounded-2xl px-3 py-2 leading-relaxed border border-border';
-    if (sender === 'user') {
-      contentDiv.className += ' bg-primary/5 rounded-tr-none';
-    } else {
-      contentDiv.className += ' bg-surface-alt rounded-tl-none';
-    }
+      const avatarDiv = document.createElement('div');
+      avatarDiv.className = 'flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm';
+      if (sender === 'user') {
+        avatarDiv.className += ' bg-primary text-white';
+        avatarDiv.textContent = 'U';
+      } else {
+        avatarDiv.className += ' bg-primary/10 text-primary';
+        avatarDiv.textContent = 'AI';
+      }
+
+      const contentDiv = document.createElement('div');
+      contentDiv.className = 'text-text text-sm rounded-2xl px-3 py-2 leading-relaxed border border-border';
+      if (sender === 'user') {
+        contentDiv.className += ' bg-primary/5 rounded-tr-none';
+      } else {
+        contentDiv.className += ' bg-surface-alt rounded-tl-none';
+      }
     
-    contentDiv.innerHTML = formatMessage(text);
-    messageDiv.appendChild(avatarDiv);
-    messageDiv.appendChild(contentDiv);
-    messagesContainer?.appendChild(messageDiv);
+      contentDiv.innerHTML = formatMessage(text);
+      messageDiv.appendChild(avatarDiv);
+      messageDiv.appendChild(contentDiv);
+      messagesContainer?.appendChild(messageDiv);
     
-    // Scroll to bottom
-    if (messagesContainer) {
-      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      // Scroll to bottom
+      if (messagesContainer) {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      }
+
+      return contentDiv;
     }
 
-    return contentDiv;
-  }
-
-  form?.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    if (!input) return;
-    const text = input.value.trim();
-    if (!text) return;
-
-    input.value = '';
-    appendMessage('user', text);
-
-    // Add loading indicator bubble
-    const responseBubble = appendMessage('assistant', '...', true);
-
-    try {
-      const response = await fetch(apiEndpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          message: text,
-          history: chatHistory,
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to get answer from AI Server.');
-      }
+    form?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      if (!input) return;
+      const text = input.value.trim();
+      if (!text) return;
+
+      input.value = '';
+      appendMessage('user', text);
+
+      // Add loading indicator bubble
+      const responseBubble = appendMessage('assistant', '...');
+
+      try {
+        const response = await fetch(apiEndpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            message: text,
+            history: chatHistory,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to get answer from AI Server.');
+        }
 
-      const reader = response.body?.getReader();
-      const decoder = new TextDecoder();
-      let aiResponseText = '';
-      responseBubble.innerHTML = '';
+        const reader = response.body?.getReader();
+        const decoder = new TextDecoder();
+        let aiResponseText = '';
+        responseBubble.innerHTML = '';
 
-      if (reader) {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
+        if (reader) {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
 
-          const chunk = decoder.decode(value, { stream: true });
+            const chunk = decoder.decode(value, { stream: true });
           
-          // Split SSE lines
-          const lines = chunk.split('\n');
-          for (const line of lines) {
-            if (line.startsWith('data: ')) {
-              const dataText = line.slice(6).trim();
-              if (dataText === '[DONE]') continue;
-              try {
-                const parsed = JSON.parse(dataText);
-                if (parsed.response) {
-                  aiResponseText += parsed.response;
-                  responseBubble.innerHTML = formatMessage(aiResponseText);
-                  if (messagesContainer) {
-                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            // Split SSE lines
+            const lines = chunk.split('\n');
+            for (const line of lines) {
+              if (line.startsWith('data: ')) {
+                const dataText = line.slice(6).trim();
+                if (dataText === '[DONE]') continue;
+                try {
+                  const parsed = JSON.parse(dataText);
+                  if (parsed.response) {
+                    aiResponseText += parsed.response;
+                    responseBubble.innerHTML = formatMessage(aiResponseText);
+                    if (messagesContainer) {
+                      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+                    }
                   }
+                } catch (e) {
+                  // Not a valid JSON chunk, standard LLM text streams sometimes return raw tokens
+                  aiResponseText += dataText;
+                  responseBubble.innerHTML = formatMessage(aiResponseText);
                 }
-              } catch (e) {
-                // Not a valid JSON chunk, standard LLM text streams sometimes return raw tokens
-                aiResponseText += dataText;
-                responseBubble.innerHTML = formatMessage(aiResponseText);
               }
             }
           }
-        }
 
-        // Save to local history
-        chatHistory.push({ role: 'user', content: text });
-        chatHistory.push({ role: 'assistant', content: aiResponseText });
+          // Save to local history
+          chatHistory.push({ role: 'user', content: text });
+          chatHistory.push({ role: 'assistant', content: aiResponseText });
+        }
+      } catch (err) {
+        responseBubble.innerHTML = `<span class="text-error font-medium">Error: ${(err as Error).message}</span>`;
       }
-    } catch (err) {
-      responseBubble.innerHTML = `<span class="text-error font-medium">Error: ${err.message}</span>`;
-    }
+    });
   });
 </script>
diff --git a/packages/ui/src/components/content/Tabs.astro b/packages/ui/src/components/content/Tabs.astro
index 219014e..f5bda52 100644
--- a/packages/ui/src/components/content/Tabs.astro
+++ b/packages/ui/src/components/content/Tabs.astro
@@ -10,11 +10,10 @@ export interface Props {
 }
 
 const { tabs, defaultTab } = Astro.props;
-const tabsId = `tabs-${Math.random().toString(36).substring(7)}`;
 const activeTab = defaultTab || tabs[0]?.value;
 ---
 
-<div class="tabs-container my-6" data-tabs-id={tabsId}>
+<div class="tabs-container my-6" data-tabs data-active-tab={activeTab}>
   <div class="flex border-b border-border mb-4 overflow-x-auto">
     {
       tabs.map((tab) => (
@@ -41,48 +40,53 @@ const activeTab = defaultTab || tabs[0]?.value;
   </div>
 </div>
 
-<script define:vars={{ tabsId, tabs, activeTab }}>
-  const container = document.querySelector(`[data-tabs-id="${tabsId}"]`);
-  const buttons = container?.querySelectorAll('[data-tab-button]');
-  const panels = container?.querySelectorAll('[data-tab-panel]');
+<script>
+  // Bundled instead of is:inline/define:vars: the CSP only allows scripts Astro hashed or served from 'self'.
+  document.addEventListener('astro:page-load', () => {
+    for (const container of document.querySelectorAll<HTMLElement>('[data-tabs]')) {
+      const activeTab = container.dataset.activeTab;
+      const buttons = container.querySelectorAll('[data-tab-button]');
+      const panels = container.querySelectorAll('[data-tab-panel]');
 
-  // Initialize: show only active tab
-  panels?.forEach((panel) => {
-    const value = panel.getAttribute('data-tab-panel');
-    if (value === activeTab) {
-      panel.classList.remove('hidden');
-    } else {
-      panel.classList.add('hidden');
-    }
-  });
-
-  buttons?.forEach((button) => {
-    button.addEventListener('click', () => {
-      const value = button.getAttribute('data-tab-button');
-
-      // Update button states
-      buttons.forEach((btn) => {
-        const btnValue = btn.getAttribute('data-tab-button');
-        if (btnValue === value) {
-          btn.classList.remove('border-transparent', 'text-text-muted');
-          btn.classList.add('border-primary', 'text-primary');
-          btn.setAttribute('aria-selected', 'true');
-        } else {
-          btn.classList.add('border-transparent', 'text-text-muted');
-          btn.classList.remove('border-primary', 'text-primary');
-          btn.setAttribute('aria-selected', 'false');
-        }
-      });
-
-      // Update panel visibility
+      // Initialize: show only active tab
       panels?.forEach((panel) => {
-        const panelValue = panel.getAttribute('data-tab-panel');
-        if (panelValue === value) {
+        const value = panel.getAttribute('data-tab-panel');
+        if (value === activeTab) {
           panel.classList.remove('hidden');
         } else {
           panel.classList.add('hidden');
         }
       });
-    });
+
+      buttons?.forEach((button) => {
+        button.addEventListener('click', () => {
+          const value = button.getAttribute('data-tab-button');
+
+          // Update button states
+          buttons.forEach((btn) => {
+            const btnValue = btn.getAttribute('data-tab-button');
+            if (btnValue === value) {
+              btn.classList.remove('border-transparent', 'text-text-muted');
+              btn.classList.add('border-primary', 'text-primary');
+              btn.setAttribute('aria-selected', 'true');
+            } else {
+              btn.classList.add('border-transparent', 'text-text-muted');
+              btn.classList.remove('border-primary', 'text-primary');
+              btn.setAttribute('aria-selected', 'false');
+            }
+          });
+
+          // Update panel visibility
+          panels?.forEach((panel) => {
+            const panelValue = panel.getAttribute('data-tab-panel');
+            if (panelValue === value) {
+              panel.classList.remove('hidden');
+            } else {
+              panel.classList.add('hidden');
+            }
+          });
+        });
+      });
+    }
   });
 </script>
diff --git a/packages/ui/src/components/courses/CourseCard.astro b/packages/ui/src/components/courses/CourseCard.astro
index 15fd681..20efc05 100644
--- a/packages/ui/src/components/courses/CourseCard.astro
+++ b/packages/ui/src/components/courses/CourseCard.astro
@@ -81,7 +81,7 @@ const { title, description, level, estimatedMinutes, tags, href, progress, lesso
       progress !== undefined && (
         <div class="flex items-center gap-2">
           <div class="w-16 h-2 bg-surface-alt rounded-full overflow-hidden">
-            <div class="h-full bg-primary transition-all" style={`width: ${progress}%`} />
+            <div class="h-full w-0 bg-primary transition-all" data-width={progress} />
           </div>
           <span>{progress}%</span>
         </div>
diff --git a/packages/ui/src/components/courses/Hint.astro b/packages/ui/src/components/courses/Hint.astro
index aeaf289..e406edd 100644
--- a/packages/ui/src/components/courses/Hint.astro
+++ b/packages/ui/src/components/courses/Hint.astro
@@ -4,14 +4,13 @@ export interface Props {
 }
 
 const { title = 'Hint' } = Astro.props;
-const hintId = `hint-${Math.random().toString(36).substring(7)}`;
 ---
 
 <div class="hint-container my-6">
   <button
     type="button"
     class="hint-toggle flex items-center gap-2 text-text-muted hover:text-text transition-colors"
-    data-hint-toggle={hintId}
+    data-hint-toggle
     aria-expanded="false"
   >
     <svg
@@ -31,7 +30,7 @@ const hintId = `hint-${Math.random().toString(36).substring(7)}`;
 
   <div
     class="hint-content hidden mt-3 p-4 bg-warning-bg rounded-lg border border-warning"
-    data-hint-content={hintId}
+    data-hint-content
   >
     <div class="flex gap-3">
       <svg
@@ -53,12 +52,13 @@ const hintId = `hint-${Math.random().toString(36).substring(7)}`;
   </div>
 </div>
 
-<script define:vars={{ hintId }}>
-  const toggle = document.querySelector(`[data-hint-toggle="${hintId}"]`);
-  const content = document.querySelector(`[data-hint-content="${hintId}"]`);
-  const icon = toggle?.querySelector(".hint-icon");
-
-  toggle?.addEventListener("click", () => {
+<script>
+  // Bundled instead of is:inline/define:vars: the CSP only allows scripts Astro hashed or served from 'self'.
+  document.addEventListener("click", (e) => {
+    const toggle = (e.target as Element).closest<HTMLElement>("[data-hint-toggle]");
+    if (!toggle) return;
+    const content = toggle.closest(".hint-container")?.querySelector("[data-hint-content]");
+    const icon = toggle.querySelector(".hint-icon");
     const isHidden = content?.classList.contains("hidden");
 
     if (isHidden) {
diff --git a/packages/ui/src/components/courses/LessonNav.astro b/packages/ui/src/components/courses/LessonNav.astro
index c5ede1d..631b04d 100644
--- a/packages/ui/src/components/courses/LessonNav.astro
+++ b/packages/ui/src/components/courses/LessonNav.astro
@@ -56,7 +56,7 @@ const progress = Math.round(((currentIndex + 1) / lessons.length) * 100);
           >{currentIndex + 1} of {lessons.length} lessons</span
         >
         <div class="progress-bar-container">
-          <div class="progress-bar-fill" style={`width: ${progress}%`}></div>
+          <div class="progress-bar-fill" data-width={progress}></div>
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/components/courses/ProgressBar.astro b/packages/ui/src/components/courses/ProgressBar.astro
index 3ea358c..6fae2b6 100644
--- a/packages/ui/src/components/courses/ProgressBar.astro
+++ b/packages/ui/src/components/courses/ProgressBar.astro
@@ -22,8 +22,8 @@ const percentage = Math.round((current / total) * 100);
   }
   <div class="w-full h-3 bg-surface-alt rounded-full overflow-hidden">
     <div
-      class="h-full bg-primary transition-all duration-300"
-      style={`width: ${percentage}%`}
+      class="h-full w-0 bg-primary transition-all duration-300"
+      data-width={percentage}
       role="progressbar"
       aria-valuenow={current}
       aria-valuemin="0"
diff --git a/packages/ui/src/components/courses/Quiz.astro b/packages/ui/src/components/courses/Quiz.astro
index 48bc8f0..ac0b01f 100644
--- a/packages/ui/src/components/courses/Quiz.astro
+++ b/packages/ui/src/components/courses/Quiz.astro
@@ -18,6 +18,7 @@ const quizId = `quiz-${Math.random().toString(36).substring(7)}`;
 <div
   class="quiz-container my-8 p-6 bg-surface-alt rounded-lg border border-border"
   data-quiz-id={quizId}
+  data-questions={JSON.stringify(questions)}
 >
   <h3 class="text-xl font-semibold text-text mb-6">{title}</h3>
 
@@ -63,12 +64,11 @@ const quizId = `quiz-${Math.random().toString(36).substring(7)}`;
   </div>
 </div>
 
-<script define:vars={{ questions, quizId }}>
-  const quizContainer = document.querySelector(`[data-quiz-id="${quizId}"]`);
-  const checkButton = quizContainer?.querySelector("[data-check-answers]");
-  const resultDiv = quizContainer?.querySelector("[data-result]");
+<script>
+  type QuizQuestion = { options: string[]; correctAnswer: number; explanation?: string };
 
-  function renderFeedback(container, isCorrect, question) {
+  // Bundled instead of is:inline/define:vars: the CSP only allows scripts Astro hashed or served from 'self'.
+  function renderFeedback(container: Element, isCorrect: boolean, question: QuizQuestion) {
     const color = isCorrect ? "success" : "error";
     // Static SVG icons only — no content data interpolated
     const iconSvg = isCorrect
@@ -105,18 +105,24 @@ const quizId = `quiz-${Math.random().toString(36).substring(7)}`;
     container.appendChild(wrapper);
   }
 
-  checkButton?.addEventListener("click", () => {
+  document.addEventListener("click", (e) => {
+    const checkButton = (e.target as Element).closest<HTMLElement>("[data-check-answers]");
+    const quizContainer = checkButton?.closest<HTMLElement>("[data-quiz-id]");
+    if (!checkButton || !quizContainer) return;
+    const quizId = quizContainer.dataset.quizId;
+    const questions: QuizQuestion[] = JSON.parse(quizContainer.dataset.questions ?? "[]");
+    const resultDiv = quizContainer.querySelector("[data-result]");
     let correct = 0;
     const total = questions.length;
 
     questions.forEach((question, qIndex) => {
-      const selectedInput = quizContainer?.querySelector(
+      const selectedInput = quizContainer.querySelector<HTMLInputElement>(
         `input[name="${quizId}-q${qIndex}"]:checked`,
       );
-      const feedbackDiv = quizContainer?.querySelector(
+      const feedbackDiv = quizContainer.querySelector(
         `[data-question-index="${qIndex}"] [data-feedback]`,
       );
-      const feedbackContent = quizContainer?.querySelector(
+      const feedbackContent = quizContainer.querySelector(
         `[data-question-index="${qIndex}"] [data-feedback-content]`,
       );
 
diff --git a/packages/ui/src/components/courses/TotalProgress.astro b/packages/ui/src/components/courses/TotalProgress.astro
index a9f3f7e..25085c1 100644
--- a/packages/ui/src/components/courses/TotalProgress.astro
+++ b/packages/ui/src/components/courses/TotalProgress.astro
@@ -41,8 +41,7 @@ const totalLessons = courses.reduce((sum, c) => sum + c.lessonCount, 0);
 
   <div class="w-full h-4 bg-surface-alt rounded-full overflow-hidden">
     <div
-      class="h-full bg-gradient-to-r from-primary to-primary-hover transition-all duration-500"
-      style="width: 0%"
+      class="h-full w-0 bg-gradient-to-r from-primary to-primary-hover transition-all duration-500"
       role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
diff --git a/packages/ui/src/components/layout/AppShell.astro b/packages/ui/src/components/layout/AppShell.astro
index ab39bce..399525f 100644
--- a/packages/ui/src/components/layout/AppShell.astro
+++ b/packages/ui/src/components/layout/AppShell.astro
@@ -67,11 +67,26 @@ const chatEndpoint =
           const theme = stored || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
           document.documentElement.classList.toggle("dark", theme === "dark");
         }
+        // Quizzes switched off via QuizToggle stay hidden from the first paint
+        function applyQuizVisibility() {
+          document.documentElement.classList.toggle("quiz-hidden", safeGetItem("quiz-enabled") === "false");
+        }
         applyTheme();
+        applyQuizVisibility();
         // Re-apply after ClientRouter navigation (DOM swap)
         document.addEventListener("astro:after-swap", applyTheme);
+        document.addEventListener("astro:after-swap", applyQuizVisibility);
       })();
     </script>
+    <script>
+      // Progress bars carry their width as data-width: the CSP blocks style attributes,
+      // CSSOM writes are allowed.
+      document.addEventListener("astro:page-load", () => {
+        for (const el of document.querySelectorAll<HTMLElement>("[data-width]")) {
+          el.style.width = `${el.dataset.width}%`;
+        }
+      });
+    </script>
   </head>
   <body class="min-h-screen flex flex-col">
     <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded focus:bg-primary focus:text-white focus:font-medium">
diff --git a/packages/ui/src/components/navigation/QuizToggle.astro b/packages/ui/src/components/navigation/QuizToggle.astro
index 4cce47f..2a2d4e7 100644
--- a/packages/ui/src/components/navigation/QuizToggle.astro
+++ b/packages/ui/src/components/navigation/QuizToggle.astro
@@ -54,72 +54,32 @@
   }
 </style>
 
-<script is:inline>
-  // safeGetItem, safeSetItem sind global via StorageUtils
-  (function () {
-    const STORAGE_KEY = "quiz-enabled";
-    let currentState = null;
-
-    function isQuizEnabled() {
-      if (currentState !== null) return currentState;
-      const stored = safeGetItem(STORAGE_KEY);
-      currentState = stored !== "false";
-      return currentState;
-    }
-
-    function setQuizEnabled(enabled) {
-      currentState = enabled;
-      safeSetItem(STORAGE_KEY, enabled.toString());
-    }
-
-    function applyState(enabled) {
-      if (enabled) {
-        document.documentElement.classList.remove("quiz-hidden");
-      } else {
-        document.documentElement.classList.add("quiz-hidden");
-      }
-      setQuizEnabled(enabled);
-
-      document.querySelectorAll(".quiz-toggle").forEach(function (btn) {
-        btn.setAttribute("aria-pressed", enabled.toString());
-        btn.setAttribute(
-          "title",
-          enabled ? "Quizze ausblenden" : "Quizze einblenden",
-        );
-        btn.setAttribute(
-          "aria-label",
-          enabled ? "Quizze ausblenden" : "Quizze einblenden",
-        );
-
-        btn.classList.remove("quiz-on", "quiz-off");
-        btn.classList.add(enabled ? "quiz-on" : "quiz-off");
-      });
-    }
-
-    function handleClick(e) {
-      e.preventDefault();
-      const newState = !isQuizEnabled();
-      applyState(newState);
+<script>
+  // Bundled instead of is:inline: the CSP only allows scripts Astro hashed or served from 'self'.
+  // AppShell's head script sets html.quiz-hidden from the stored choice before the first paint.
+  import { safeSetItem } from "../../scripts/storage";
+
+  const STORAGE_KEY = "quiz-enabled";
+
+  function syncButtons(): void {
+    const enabled = !document.documentElement.classList.contains("quiz-hidden");
+    for (const btn of document.querySelectorAll(".quiz-toggle")) {
+      const label = enabled ? "Quizze ausblenden" : "Quizze einblenden";
+      btn.setAttribute("aria-pressed", enabled.toString());
+      btn.setAttribute("title", label);
+      btn.setAttribute("aria-label", label);
+      btn.classList.remove("quiz-on", "quiz-off");
+      btn.classList.add(enabled ? "quiz-on" : "quiz-off");
     }
+  }
 
-    // Apply initial state
-    applyState(isQuizEnabled());
-
-    // Register click delegation only once (guard prevents accumulation)
-    if (!window.__quizToggleInit) {
-      window.__quizToggleInit = true;
-      document.addEventListener("click", function (e) {
-        var btn = e.target.closest(".quiz-toggle");
-        if (btn) {
-          handleClick(e);
-        }
-      });
-    }
+  document.addEventListener("click", (e) => {
+    if (!(e.target as Element).closest(".quiz-toggle")) return;
+    e.preventDefault();
+    const hidden = document.documentElement.classList.toggle("quiz-hidden");
+    safeSetItem(STORAGE_KEY, (!hidden).toString());
+    syncButtons();
+  });
 
-    // Re-apply state after ClientRouter navigation
-    document.addEventListener("astro:after-swap", function () {
-      currentState = null;
-      applyState(isQuizEnabled());
-    });
-  })();
+  document.addEventListener("astro:page-load", syncButtons);
 </script>
diff --git a/packages/ui/src/styles/components/lesson-nav.css b/packages/ui/src/styles/components/lesson-nav.css
index f959b3a..e90e8a3 100644
--- a/packages/ui/src/styles/components/lesson-nav.css
+++ b/packages/ui/src/styles/components/lesson-nav.css
@@ -98,6 +98,7 @@
 }
 
 .lesson-nav .progress-bar-fill {
+  width: 0;
   height: 100%;
   background: var(--color-primary);
   border-radius: 2px;

From d60cb7784ba1601029cf21ab9eaad83fae8f0c85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn=20Seidel?= <joern.seidel@casoon.de>
Date: Thu, 1 Oct 2026 20:03:33 +0200
Subject: [PATCH 2/2] fix: enable the CSP under security.csp in docs and
 courses

Astro only reads csp inside security; the top-level key was silently
ignored, so both sites shipped without a CSP. Google Fonts is allowed as
a style source for AppShell's Inter stylesheet.
---
 apps/courses/astro.config.mjs | 12 ++++++++----
 apps/docs/astro.config.mjs    | 12 ++++++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/courses/astro.config.mjs b/apps/courses/astro.config.mjs
index f7364fe..32bea99 100644
--- a/apps/courses/astro.config.mjs
+++ b/apps/courses/astro.config.mjs
@@ -2,6 +2,7 @@ import mdx from '@astrojs/mdx';
 import postAudit from '@casoon/astro-post-audit';
 import siteFiles from '@casoon/astro-site-files';
 import speedMeasure from '@casoon/astro-speed-measure';
+import { shikiStyleToClass } from '@knowledge-core/styles/shiki.mjs';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
 
@@ -53,6 +54,7 @@ export default defineConfig({
     shikiConfig: {
       theme: 'github-dark',
       wrap: true,
+      transformers: [shikiStyleToClass],
     },
   },
 
@@ -61,12 +63,14 @@ export default defineConfig({
     defaultStrategy: 'viewport',
   },
 
+  // Astro reads the CSP only under security; a top-level csp key is silently ignored.
   security: {
     checkOrigin: true,
-  },
-
-  csp: {
-    algorithm: 'SHA-256',
+    csp: {
+      algorithm: 'SHA-256',
+      // AppShell loads the Inter stylesheet from Google Fonts
+      styleDirective: { resources: ["'self'", 'https://fonts.googleapis.com'] },
+    },
   },
 
   image: {
diff --git a/apps/docs/astro.config.mjs b/apps/docs/astro.config.mjs
index 0ef625f..d9d8fd8 100644
--- a/apps/docs/astro.config.mjs
+++ b/apps/docs/astro.config.mjs
@@ -2,6 +2,7 @@ import mdx from '@astrojs/mdx';
 import postAudit from '@casoon/astro-post-audit';
 import siteFiles from '@casoon/astro-site-files';
 import speedMeasure from '@casoon/astro-speed-measure';
+import { shikiStyleToClass } from '@knowledge-core/styles/shiki.mjs';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
 
@@ -54,6 +55,7 @@ export default defineConfig({
     shikiConfig: {
       theme: 'github-dark',
       wrap: true,
+      transformers: [shikiStyleToClass],
     },
   },
 
@@ -62,12 +64,14 @@ export default defineConfig({
     defaultStrategy: 'viewport',
   },
 
+  // Astro reads the CSP only under security; a top-level csp key is silently ignored.
   security: {
     checkOrigin: true,
-  },
-
-  csp: {
-    algorithm: 'SHA-256',
+    csp: {
+      algorithm: 'SHA-256',
+      // AppShell loads the Inter stylesheet from Google Fonts
+      styleDirective: { resources: ["'self'", 'https://fonts.googleapis.com'] },
+    },
   },
 
   image: {