From 3fded37d64ac3ce70738a168ce5cd3ee60342437 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 7 Oct 2025 22:16:13 -0700
Subject: [PATCH] fix(svelte5): update event handler syntax from
 on:clickoutside to onclickoutside
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Update all clickOutside action usages to use Svelte 5's new event handler
syntax. Replace deprecated `on:clickoutside` with `onclickoutside` across
all components to fix Svelte 5 compilation errors.

Fixed in:
- ProjectListItem
- AdminSegmentedController
- BaseDropdown
- PostDropdown
- BubbleTextStyleMenu
- BubbleColorPicker
- EssayForm
- BasePane

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/admin/AdminSegmentedController.svelte     | 2 +-
 src/lib/components/admin/BaseDropdown.svelte                 | 2 +-
 src/lib/components/admin/EssayForm.svelte                    | 2 +-
 src/lib/components/admin/PostDropdown.svelte                 | 2 +-
 src/lib/components/admin/ProjectListItem.svelte              | 2 +-
 src/lib/components/admin/composer/BubbleColorPicker.svelte   | 2 +-
 src/lib/components/admin/composer/BubbleTextStyleMenu.svelte | 2 +-
 src/lib/components/ui/BasePane.svelte                        | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/admin/AdminSegmentedController.svelte b/src/lib/components/admin/AdminSegmentedController.svelte
index 33887db..54c6fc5 100644
--- a/src/lib/components/admin/AdminSegmentedController.svelte
+++ b/src/lib/components/admin/AdminSegmentedController.svelte
@@ -59,7 +59,7 @@
 	<div
 		class="dropdown-container"
 		use:clickOutside={{ enabled: showDropdown }}
-		on:clickoutside={handleClickOutside}
+		onclickoutside={handleClickOutside}
 	>
 		<button
 			class="dropdown-trigger"
diff --git a/src/lib/components/admin/BaseDropdown.svelte b/src/lib/components/admin/BaseDropdown.svelte
index 26fe0fc..df5f46c 100644
--- a/src/lib/components/admin/BaseDropdown.svelte
+++ b/src/lib/components/admin/BaseDropdown.svelte
@@ -41,7 +41,7 @@
 <div
 	class="dropdown-container {className}"
 	use:clickOutside={{ enabled: isOpen }}
-	on:clickoutside={handleClickOutside}
+	onclickoutside={handleClickOutside}
 >
 	<div class="dropdown-trigger">
 		{@render trigger()}
diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte
index b6dbff3..b210f98 100644
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@@ -347,7 +347,7 @@ $effect(() => {
 			<div
 				class="save-actions"
 				use:clickOutside={{ enabled: showPublishMenu }}
-				on:clickoutside={handleClickOutsideMenu}
+				onclickoutside={handleClickOutsideMenu}
 			>
 				<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
 					{status === 'published' ? 'Save' : 'Save Draft'}
diff --git a/src/lib/components/admin/PostDropdown.svelte b/src/lib/components/admin/PostDropdown.svelte
index a74c936..c8064b8 100644
--- a/src/lib/components/admin/PostDropdown.svelte
+++ b/src/lib/components/admin/PostDropdown.svelte
@@ -43,7 +43,7 @@
 	}
 </script>
 
-<div class="dropdown-container" use:clickOutside={{ enabled: isOpen }} on:clickoutside={handleClickOutside}>
+<div class="dropdown-container" use:clickOutside={{ enabled: isOpen }} onclickoutside={handleClickOutside}>
 	<Button
 		bind:this={buttonRef}
 		variant="primary"
diff --git a/src/lib/components/admin/ProjectListItem.svelte b/src/lib/components/admin/ProjectListItem.svelte
index b3f61ac..69a10b5 100644
--- a/src/lib/components/admin/ProjectListItem.svelte
+++ b/src/lib/components/admin/ProjectListItem.svelte
@@ -111,7 +111,7 @@
 	<div
 		class="dropdown-container"
 		use:clickOutside={{ enabled: isDropdownOpen }}
-		on:clickoutside={handleClickOutside}
+		onclickoutside={handleClickOutside}
 	>
 		<button
 			class="action-button"
diff --git a/src/lib/components/admin/composer/BubbleColorPicker.svelte b/src/lib/components/admin/composer/BubbleColorPicker.svelte
index d7ef8de..60bece1 100644
--- a/src/lib/components/admin/composer/BubbleColorPicker.svelte
+++ b/src/lib/components/admin/composer/BubbleColorPicker.svelte
@@ -101,7 +101,7 @@
 </script>
 
 {#if isOpen}
-	<div class="bubble-color-picker" use:clickOutside on:clickoutside={onClose}>
+	<div class="bubble-color-picker" use:clickOutside onclickoutside={onClose}>
 		<div class="color-picker-header">
 			<span>{mode === 'text' ? 'Text Color' : 'Highlight Color'}</span>
 			<button class="remove-color-btn" onclick={removeColor}> Remove </button>
diff --git a/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
index 8644bef..9a2567f 100644
--- a/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
+++ b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
@@ -71,7 +71,7 @@
 </script>
 
 {#if isOpen}
-	<div class="bubble-text-style-menu" use:clickOutside on:clickoutside={onClose}>
+	<div class="bubble-text-style-menu" use:clickOutside onclickoutside={onClose}>
 		{#each textStyles as style}
 			<button
 				class="text-style-option"
diff --git a/src/lib/components/ui/BasePane.svelte b/src/lib/components/ui/BasePane.svelte
index 69da8f9..d12da66 100644
--- a/src/lib/components/ui/BasePane.svelte
+++ b/src/lib/components/ui/BasePane.svelte
@@ -117,7 +117,7 @@
 		role="dialog"
 		aria-modal="false"
 		use:clickOutside={{ enabled: closeOnBackdrop }}
-		on:clickoutside={handleClose}
+		onclickoutside={handleClose}
 	>
 		{#if children}
 			{@render children()}