fix(svelte5): update event handler syntax from on:clickoutside to onclickoutside

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

@@ -59,7 +59,7 @@
 	<div
 		class="dropdown-container"
 		use:clickOutside={{ enabled: showDropdown }}
-		on:clickoutside={handleClickOutside}
+		onclickoutside={handleClickOutside}
 	>
 		<button
 			class="dropdown-trigger"

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()}

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'}

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"

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"

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>

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"

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()}