From 459ceff2d87ff290d39fcb45eb6c89aa57f38d27 Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Sun, 10 May 2026 09:14:00 +0700
Subject: [PATCH] fix: prevent localStorage leakage and fix navigation by
 implementing component isolation and reactive state management

---
 examples/content/button_input_arduino.md      |  91 +++--
 frontend/src/lib/components/CodeEditor.svelte |   1 +
 .../src/routes/lesson/[slug]/+page.svelte     | 362 +++++++++---------
 .../src/routes/lesson/[slug]/CodeTab.svelte   |   6 +-
 .../src/routes/lesson/[slug]/lesson.svelte.ts |   2 +-
 5 files changed, 249 insertions(+), 213 deletions(-)

diff --git a/examples/content/button_input_arduino.md b/examples/content/button_input_arduino.md
index ce7a9d0..e979be8 100644
--- a/examples/content/button_input_arduino.md
+++ b/examples/content/button_input_arduino.md
@@ -150,32 +150,20 @@ void loop() {
     {
       "type": "led",
       "id": "led-builtin",
-      "x": 956.2066448009604,
-      "y": -15.285273464964305,
+      "x": 188,
+      "y": -158,
       "rotation": 0,
       "props": {
         "color": "red",
         "pin": 13,
-        "state": false,
-        "value": false
-      }
-    },
-    {
-      "type": "resistor",
-      "id": "resistor-1776299815587-z0q0jzny8",
-      "x": 808.6031046903261,
-      "y": 44.96592399354325,
-      "rotation": 0,
-      "props": {
-        "value": false,
         "state": false
       }
     },
     {
       "type": "pushbutton",
-      "id": "pushbutton-1776299852057-07xh6qh7g",
-      "x": 829.2414304859469,
-      "y": 230.19576790585754,
+      "id": "pushbutton-1778378142489-v899irppo",
+      "x": 300,
+      "y": 59,
       "rotation": 0,
       "props": {
         "color": "red",
@@ -183,10 +171,33 @@ void loop() {
         "label": "",
         "xray": false
       }
+    },
+    {
+      "type": "resistor",
+      "id": "resistor-1778378159414-9y3d8f1uk",
+      "x": 409,
+      "y": 68,
+      "rotation": 0,
+      "props": {
+        "value": "1000"
+      }
+    },
+    {
+      "type": "resistor",
+      "id": "resistor-1778378205248-h9g1m1wml",
+      "x": 114,
+      "y": -89,
+      "rotation": 0,
+      "props": {
+        "value": "1000"
+      }
     }
   ],
-  "wires": []
+  "wires": [
+ 
+  ]
 }
+
 ---END_VELXIO_CIRCUIT---
 
 ---EXPECTED_SERIAL_OUTPUT---
@@ -196,9 +207,9 @@ PRESSED
 ---EXPECTED_WIRING---
 {
   "wires": [
-    {
+   {
       "start": {
-        "componentId": "resistor-1776299815587-z0q0jzny8",
+        "componentId": "resistor-1778378205248-h9g1m1wml",
         "pinName": "2"
       },
       "end": {
@@ -206,6 +217,16 @@ PRESSED
         "pinName": "A"
       }
     },
+    {
+      "start": {
+        "componentId": "resistor-1778378205248-h9g1m1wml",
+        "pinName": "1"
+      },
+      "end": {
+        "componentId": "arduino-uno",
+        "pinName": "13"
+      }
+    },
     {
       "start": {
         "componentId": "arduino-uno",
@@ -218,22 +239,22 @@ PRESSED
     },
     {
       "start": {
-        "componentId": "resistor-1776299815587-z0q0jzny8",
-        "pinName": "1"
+        "componentId": "arduino-uno",
+        "pinName": "5V"
       },
       "end": {
-        "componentId": "arduino-uno",
-        "pinName": "13"
+        "componentId": "resistor-1778378159414-9y3d8f1uk",
+        "pinName": "2"
       }
     },
     {
       "start": {
-        "componentId": "pushbutton-1776299852057-07xh6qh7g",
-        "pinName": "1.l"
+        "componentId": "resistor-1778378159414-9y3d8f1uk",
+        "pinName": "1"
       },
       "end": {
-        "componentId": "arduino-uno",
-        "pinName": "2"
+        "componentId": "pushbutton-1778378142489-v899irppo",
+        "pinName": "1.r"
       }
     },
     {
@@ -242,8 +263,18 @@ PRESSED
         "pinName": "GND.3"
       },
       "end": {
-        "componentId": "pushbutton-1776299852057-07xh6qh7g",
-        "pinName": "2.l"
+        "componentId": "pushbutton-1778378142489-v899irppo",
+        "pinName": "2.r"
+      }
+    },
+    {
+      "start": {
+        "componentId": "arduino-uno",
+        "pinName": "2"
+      },
+      "end": {
+        "componentId": "pushbutton-1778378142489-v899irppo",
+        "pinName": "1.r"
       }
     }
   ]
diff --git a/frontend/src/lib/components/CodeEditor.svelte b/frontend/src/lib/components/CodeEditor.svelte
index 8afa685..a30a0c2 100644
--- a/frontend/src/lib/components/CodeEditor.svelte
+++ b/frontend/src/lib/components/CodeEditor.svelte
@@ -252,6 +252,7 @@
 	onDestroy(() => {
 		cleanupNoPaste?.();
 		view?.destroy();
+		clearTimeout(saveTimeout);
 	});
 
 	// Recreate editor ONLY when theme actually changes (not on ready/container changes)
diff --git a/frontend/src/routes/lesson/[slug]/+page.svelte b/frontend/src/routes/lesson/[slug]/+page.svelte
index 95b20e0..b3dc0f1 100644
--- a/frontend/src/routes/lesson/[slug]/+page.svelte
+++ b/frontend/src/routes/lesson/[slug]/+page.svelte
@@ -26,9 +26,11 @@
 	const mgr = new LessonManager();
 	const float = createFloatingPanel();
 
-	// Sync lesson data when navigating
+	// Initialize manager with lesson data whenever it changes.
 	$effect(() => {
-		if (pageData.lesson) mgr.init(pageData.lesson);
+		if (pageData.lesson) {
+			mgr.init(pageData.lesson);
+		}
 	});
 
 	// Mobile behavior for floating panel
@@ -79,191 +81,193 @@
 	<title>{mgr.data?.lesson_title ?? 'Pelajaran'} - Elemes LMS</title>
 </svelte:head>
 
-{#if mgr.data}
-	<div class="lesson-layout" class:single-col={float.floating || mgr.isMobile}>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="lesson-content" bind:this={contentEl} use:noSelect use:renderMath
-			role="region" aria-label="Konten pelajaran"
-			class:full-width={float.floating || mgr.isMobile}
-			onselectstart={(e) => e.preventDefault()}
-			oncopy={(e) => e.preventDefault()}
-			oncut={(e) => e.preventDefault()}
-			oncontextmenu={(e) => e.preventDefault()}>
-			
-			{#if mgr.data.locked}
-				<div class="locked-banner">
-					<span class="locked-banner-icon">&#128274;</span>
-					<div>
-						<strong>Pelajaran ini terkunci.</strong> Kamu dapat membaca materinya, namun workspace (editor) dinonaktifkan hingga prasyarat selesai.
-						{#if mgr.data.missing_prerequisites?.length}
-							<div class="missing-list">
-								Belum selesai: 
-								{#each mgr.data.missing_prerequisites as p, i}
-									<a href="/lesson/{p}" class="prereq-link">{mgr.getLessonTitle(p)}</a>{i < mgr.data.missing_prerequisites.length - 1 ? ', ' : ''}
-								{/each}
+{#if pageData.lesson}
+	{#key pageData.lesson.filename}
+		<div class="lesson-layout" class:single-col={float.floating || mgr.isMobile}>
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div class="lesson-content" bind:this={contentEl} use:noSelect use:renderMath
+				role="region" aria-label="Konten pelajaran"
+				class:full-width={float.floating || mgr.isMobile}
+				onselectstart={(e) => e.preventDefault()}
+				oncopy={(e) => e.preventDefault()}
+				oncut={(e) => e.preventDefault()}
+				oncontextmenu={(e) => e.preventDefault()}>
+				
+				{#if mgr.data?.locked}
+					<div class="locked-banner">
+						<span class="locked-banner-icon">&#128274;</span>
+						<div>
+							<strong>Pelajaran ini terkunci.</strong> Kamu dapat membaca materinya, namun workspace (editor) dinonaktifkan hingga prasyarat selesai.
+							{#if mgr.data.missing_prerequisites?.length}
+								<div class="missing-list">
+									Belum selesai: 
+									{#each mgr.data.missing_prerequisites as p, i}
+										<a href="/lesson/{p}" class="prereq-link">{mgr.getLessonTitle(p)}</a>{i < mgr.data.missing_prerequisites.length - 1 ? ', ' : ''}
+									{/each}
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/if}
+
+				{#if mgr.isQuizMode}
+					<div class="quiz-blur-container">
+						<div class="quiz-blur-content">
+							<div class="quiz-blur-icon">🫣</div>
+							<h3>Materi Disembunyikan</h3>
+							<p>Selesaikan atau batalkan kuis untuk melihat materi kembali.</p>
+							<button class="btn btn-outline" onclick={() => mgr.isQuizMode = false}>Batal Kuis</button>
+						</div>
+					</div>
+				{:else}
+					<div class="prose">{@html mgr.data?.lesson_content ?? ''}</div>
+					<LessonList lessons={mgr.data?.ordered_lessons ?? []} currentSlug={mgr.slug} />
+				{/if}
+				</div>
+
+				{#if float.floating && float.minimized && !mgr.isMobile}
+				<button type="button" class="float-restore-btn" onclick={float.restore}>&#9654; Editor</button>
+				{/if}
+
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="editor-area"
+				class:floating={float.floating && !mgr.isMobile && !float.minimized}
+				class:floating-hidden={float.floating && float.minimized && !mgr.isMobile}
+				class:mobile-sheet={mgr.isMobile}
+				class:mobile-hidden={mgr.isMobile && mgr.mobileMode === 'hidden'}
+				class:mobile-half={mgr.isMobile && mgr.mobileMode === 'half'}
+				class:mobile-full={mgr.isMobile && mgr.mobileMode === 'full'}
+				class:editor-locked={mgr.data?.locked}
+				style={float.style}>
+
+				<WorkspaceHeader
+					isMobile={mgr.isMobile}
+					bind:mobileMode={mgr.mobileMode}
+					bind:activeTab={mgr.activeTab}
+					bind:currentLanguage={mgr.currentLanguage}
+					hasInfo={!!mgr.data?.lesson_info}
+					hasExercise={!!mgr.data?.exercise_content}
+					activeTabs={mgr.data?.active_tabs ?? []}
+					floating={float.floating}
+					minimized={float.minimized}
+					onDragStart={float.onDragStart}
+					onResizeStart={float.onResizeStart}
+					onFloatToggle={float.toggle}
+					onMinimize={float.minimize}
+					locked={mgr.data?.locked}
+				/>
+
+				<div class="editor-body" bind:this={tabsEl} use:renderMath style="position: relative;">
+					{#if mgr.data?.locked}
+						<div class="workspace-lock-overlay">
+							<div class="lock-overlay-content">
+								<div class="lock-overlay-icon">&#128274;</div>
+								<h3>Workspace Terkunci</h3>
+								<p>Selesaikan materi sebelumnya untuk mulai mengerjakan latihan ini.</p>
+							</div>
+						</div>
+					{/if}
+
+					<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'info'} use:noSelect>
+						{#if mgr.data?.lesson_info}
+							<div class="tab-content">{@html mgr.data.lesson_info}</div>
+						{/if}
+					</div>
+
+					<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'exercise'} use:noSelect>
+						{#if mgr.data?.exercise_content}
+							<div class="tab-content">
+								<h2 class="tab-heading">Latihan</h2>
+								{@html mgr.data.exercise_content}
 							</div>
 						{/if}
 					</div>
-				</div>
-			{/if}
 
-			{#if mgr.isQuizMode}
-				<div class="quiz-blur-container">
-					<div class="quiz-blur-content">
-						<div class="quiz-blur-icon">🫣</div>
-						<h3>Materi Disembunyikan</h3>
-						<p>Selesaikan atau batalkan kuis untuk melihat materi kembali.</p>
-						<button class="btn btn-outline" onclick={() => mgr.isQuizMode = false}>Batal Kuis</button>
-					</div>
-				</div>
-			{:else}
-				<div class="prose">{@html mgr.data.lesson_content}</div>
-				<LessonList lessons={mgr.data.ordered_lessons ?? []} currentSlug={mgr.slug} />
-			{/if}
-		</div>
-
-		{#if float.floating && float.minimized && !mgr.isMobile}
-			<button type="button" class="float-restore-btn" onclick={float.restore}>&#9654; Editor</button>
-		{/if}
-
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="editor-area"
-			class:floating={float.floating && !mgr.isMobile && !float.minimized}
-			class:floating-hidden={float.floating && float.minimized && !mgr.isMobile}
-			class:mobile-sheet={mgr.isMobile}
-			class:mobile-hidden={mgr.isMobile && mgr.mobileMode === 'hidden'}
-			class:mobile-half={mgr.isMobile && mgr.mobileMode === 'half'}
-			class:mobile-full={mgr.isMobile && mgr.mobileMode === 'full'}
-			class:editor-locked={mgr.data.locked}
-			style={float.style}>
-
-			<WorkspaceHeader
-				isMobile={mgr.isMobile}
-				bind:mobileMode={mgr.mobileMode}
-				bind:activeTab={mgr.activeTab}
-				bind:currentLanguage={mgr.currentLanguage}
-				hasInfo={!!mgr.data.lesson_info}
-				hasExercise={!!mgr.data.exercise_content}
-				activeTabs={mgr.data.active_tabs ?? []}
-				floating={float.floating}
-				minimized={float.minimized}
-				onDragStart={float.onDragStart}
-				onResizeStart={float.onResizeStart}
-				onFloatToggle={float.toggle}
-				onMinimize={float.minimize}
-				locked={mgr.data.locked}
-			/>
-
-			<div class="editor-body" bind:this={tabsEl} use:renderMath style="position: relative;">
-				{#if mgr.data.locked}
-					<div class="workspace-lock-overlay">
-						<div class="lock-overlay-content">
-							<div class="lock-overlay-icon">&#128274;</div>
-							<h3>Workspace Terkunci</h3>
-							<p>Selesaikan materi sebelumnya untuk mulai mengerjakan latihan ini.</p>
-						</div>
-					</div>
-				{/if}
-
-				<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'info'} use:noSelect>
-					{#if mgr.data.lesson_info}
-						<div class="tab-content">{@html mgr.data.lesson_info}</div>
-					{/if}
-				</div>
-
-				<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'exercise'} use:noSelect>
-					{#if mgr.data.exercise_content}
-						<div class="tab-content">
-							<h2 class="tab-heading">Latihan</h2>
-							{@html mgr.data.exercise_content}
+					{#if mgr.data?.active_tabs?.includes('circuit')}
+						<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'circuit'}>
+							<CircuitTab
+								data={mgr.data}
+								bind:circuitEditor={mgr.circuitEditor}
+								compiling={mgr.compiling}
+								authLoggedIn={$authLoggedIn}
+								lessonCompleted={mgr.lessonCompleted}
+								showSolution={mgr.showSolution}
+								slug={mgr.slug}
+								onRun={mgr.handleRun.bind(mgr)}
+								onReset={mgr.handleReset.bind(mgr)}
+								onShowSolution={mgr.handleShowSolution.bind(mgr)}
+							/>
 						</div>
 					{/if}
+
+					{#if mgr.isVelxio}
+						<div class="tab-panel velxio-panel" class:tab-hidden={mgr.activeTab !== 'velxio'}>
+							<VelxioTab
+								hasArduinoCode={!!mgr.data?.initial_code_arduino}
+								velxioError={mgr.velxioError}
+								authLoggedIn={$authLoggedIn}
+								velxioSaving={mgr.velxioSaving}
+								onSetupBridge={mgr.setupVelxioBridge.bind(mgr)}
+							/>
+						</div>
+					{/if}
+
+					{#if mgr.isFlowchart}
+						<div class="tab-panel flowchart-panel" class:tab-hidden={mgr.activeTab !== 'flowchart'}>
+							<FlowchartTab
+								bind:this={mgr.flowchartTab}
+								storageKey={mgr.flowchartStorageKey}
+								initialData={mgr.data?.initial_flowchart}
+								onRun={mgr.handleRun.bind(mgr)}
+								onReset={mgr.handleReset.bind(mgr)}
+								compiling={mgr.compiling}
+							/>
+						</div>
+					{/if}
+
+					{#if !mgr.data?.active_tabs?.length || mgr.data.active_tabs.includes('c') || mgr.data.active_tabs.includes('python')}
+						<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'editor'}>
+							<CodeTab
+								data={mgr.data}
+								bind:currentLanguage={mgr.currentLanguage}
+								bind:currentCode={mgr.currentCode}
+								bind:editor={mgr.editor}
+								compiling={mgr.compiling}
+								authLoggedIn={$authLoggedIn}
+								lessonCompleted={mgr.lessonCompleted}
+								showSolution={mgr.showSolution}
+								slug={mgr.slug}
+								onRun={mgr.handleRun.bind(mgr)}
+								onReset={mgr.handleReset.bind(mgr)}
+								onShowSolution={mgr.handleShowSolution.bind(mgr)}
+							/>
+						</div>
+					{/if}
+
+					{#if mgr.data?.active_tabs?.includes('quiz')}
+						<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'quiz'}>
+							<QuizTab
+								quizData={mgr.data.quiz_data ?? []}
+								bind:isQuizMode={mgr.isQuizMode}
+								completedStatus={mgr.data.lesson_progress_status}
+								onComplete={(status) => mgr.completeLesson(status)}
+							/>
+						</div>
+					{/if}
+
+					<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'output'}>
+						<OutputPanel sections={mgr.outputSections}>
+							{#snippet actions()}
+								<button class="btn btn-success btn-sm btn-run-all" onclick={() => mgr.handleRunAll()} disabled={mgr.compiling}>
+									{mgr.compiling ? 'Mengevaluasi...' : '▶ Run Keseluruhan'}
+								</button>
+							{/snippet}
+						</OutputPanel>
+					</div>
 				</div>
 
-				{#if mgr.data.active_tabs?.includes('circuit')}
-					<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'circuit'}>
-						<CircuitTab
-							data={mgr.data}
-							bind:circuitEditor={mgr.circuitEditor}
-							compiling={mgr.compiling}
-							authLoggedIn={$authLoggedIn}
-							lessonCompleted={mgr.lessonCompleted}
-							showSolution={mgr.showSolution}
-							slug={mgr.slug}
-							onRun={mgr.handleRun.bind(mgr)}
-							onReset={mgr.handleReset.bind(mgr)}
-							onShowSolution={mgr.handleShowSolution.bind(mgr)}
-						/>
-					</div>
-				{/if}
-
-				{#if mgr.isVelxio}
-					<div class="tab-panel velxio-panel" class:tab-hidden={mgr.activeTab !== 'velxio'}>
-						<VelxioTab
-							hasArduinoCode={!!mgr.data.initial_code_arduino}
-							velxioError={mgr.velxioError}
-							authLoggedIn={$authLoggedIn}
-							velxioSaving={mgr.velxioSaving}
-							onSetupBridge={mgr.setupVelxioBridge.bind(mgr)}
-						/>
-					</div>
-				{/if}
-
-				{#if mgr.isFlowchart}
-					<div class="tab-panel flowchart-panel" class:tab-hidden={mgr.activeTab !== 'flowchart'}>
-						<FlowchartTab
-							bind:this={mgr.flowchartTab}
-							storageKey={mgr.flowchartStorageKey}
-							initialData={mgr.data.initial_flowchart}
-							onRun={mgr.handleRun.bind(mgr)}
-							onReset={mgr.handleReset.bind(mgr)}
-							compiling={mgr.compiling}
-						/>
-					</div>
-				{/if}
-
-				{#if !mgr.data.active_tabs?.length || mgr.data.active_tabs.includes('c') || mgr.data.active_tabs.includes('python')}
-					<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'editor'}>
-						<CodeTab
-							data={mgr.data}
-							bind:currentLanguage={mgr.currentLanguage}
-							bind:currentCode={mgr.currentCode}
-							bind:editor={mgr.editor}
-							compiling={mgr.compiling}
-							authLoggedIn={$authLoggedIn}
-							lessonCompleted={mgr.lessonCompleted}
-							showSolution={mgr.showSolution}
-							slug={mgr.slug}
-							onRun={mgr.handleRun.bind(mgr)}
-							onReset={mgr.handleReset.bind(mgr)}
-							onShowSolution={mgr.handleShowSolution.bind(mgr)}
-						/>
-					</div>
-				{/if}
-
-				{#if mgr.data.active_tabs?.includes('quiz')}
-					<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'quiz'}>
-						<QuizTab
-							quizData={mgr.data.quiz_data ?? []}
-							bind:isQuizMode={mgr.isQuizMode}
-							completedStatus={mgr.data.lesson_progress_status}
-							onComplete={(status) => mgr.completeLesson(status)}
-						/>
-					</div>
-				{/if}
-
-				<div class="tab-panel" class:tab-hidden={mgr.activeTab !== 'output'}>
-					<OutputPanel sections={mgr.outputSections}>
-						{#snippet actions()}
-							<button class="btn btn-success btn-sm btn-run-all" onclick={() => mgr.handleRunAll()} disabled={mgr.compiling}>
-								{mgr.compiling ? 'Mengevaluasi...' : '▶ Run Keseluruhan'}
-							</button>
-						{/snippet}
-					</OutputPanel>
-				</div>
+				<CelebrationOverlay bind:visible={mgr.showCelebration} />
 			</div>
-
-			<CelebrationOverlay bind:visible={mgr.showCelebration} />
 		</div>
-	</div>
+	{/key}
 {/if}
diff --git a/frontend/src/routes/lesson/[slug]/CodeTab.svelte b/frontend/src/routes/lesson/[slug]/CodeTab.svelte
index 062ff83..8a351f2 100644
--- a/frontend/src/routes/lesson/[slug]/CodeTab.svelte
+++ b/frontend/src/routes/lesson/[slug]/CodeTab.svelte
@@ -36,7 +36,7 @@
 		{compiling ? 'Compiling...' : '▶ Run'}
 	</button>
 	<button type="button" class="btn btn-secondary" onclick={onReset}>Reset</button>
-	{#if data.solution_code && authLoggedIn && lessonCompleted}
+	{#if data?.solution_code && authLoggedIn && lessonCompleted}
 		<button type="button" class="btn btn-secondary" onclick={onShowSolution}>
 			{showSolution ? 'Sembunyikan Solusi' : 'Lihat Solusi'}
 		</button>
@@ -57,9 +57,9 @@
 	{/key}
 </div>
 
-{#if (currentLanguage === 'python' ? (data.expected_output_python || data.expected_output) : data.expected_output)}
+{#if (currentLanguage === 'python' ? (data?.expected_output_python || data?.expected_output) : data?.expected_output)}
 	<details class="expected-output">
 		<summary>Expected Output</summary>
-		<pre>{currentLanguage === 'python' ? (data.expected_output_python || data.expected_output) : data.expected_output}</pre>
+		<pre>{currentLanguage === 'python' ? (data?.expected_output_python || data?.expected_output) : data?.expected_output}</pre>
 	</details>
 {/if}
diff --git a/frontend/src/routes/lesson/[slug]/lesson.svelte.ts b/frontend/src/routes/lesson/[slug]/lesson.svelte.ts
index c6f521d..423fee1 100644
--- a/frontend/src/routes/lesson/[slug]/lesson.svelte.ts
+++ b/frontend/src/routes/lesson/[slug]/lesson.svelte.ts
@@ -54,7 +54,7 @@ export class LessonManager {
 	circuitEditor = $state<CircuitEditor | null>(null);
 	flowchartTab = $state<any>(null);
 
-	slug = $derived(get(page).params.slug);
+	get slug() { return get(page).params.slug; }
 	
 	isVelxio = $derived(this.data?.active_tabs?.includes('velxio') ?? false);
 	isFlowchart = $derived(this.data?.active_tabs?.includes('flowchart') ?? false);