From 81d5e83861e17b766ada13a445855f04335d6d2d Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 3 Apr 2026 12:04:18 +0200
Subject: [PATCH] fix: revert @const to svelte:component (invalid placement in
 div)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@const can only be used inside {#if}, {#each}, etc. — not directly in
a <div>. Reverted ActionZone and AuthGateModal back to <svelte:component>
which works correctly (the deprecation warning is less important than
a broken app).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/shared-auth-ui/src/components/AuthGateModal.svelte | 5 ++---
 packages/shared-ui/src/dnd/ActionZone.svelte                | 3 +--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/shared-auth-ui/src/components/AuthGateModal.svelte b/packages/shared-auth-ui/src/components/AuthGateModal.svelte
index c6faeb4df..29849f8eb 100644
--- a/packages/shared-auth-ui/src/components/AuthGateModal.svelte
+++ b/packages/shared-auth-ui/src/components/AuthGateModal.svelte
@@ -135,7 +135,7 @@
 	});
 
 	// Icon for action type
-	const ActionIcon = $derived(() => {
+	const actionIcon = $derived.by(() => {
 		switch (action) {
 			case 'save':
 				return CloudArrowUp;
@@ -235,8 +235,7 @@
 			<div
 				class="bg-primary/10 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full"
 			>
-				{@const Icon = ActionIcon()}
-				<Icon size={32} class="text-primary" />
+				<svelte:component this={actionIcon} size={32} class="text-primary" />
 			</div>
 
 			<!-- Title -->
diff --git a/packages/shared-ui/src/dnd/ActionZone.svelte b/packages/shared-ui/src/dnd/ActionZone.svelte
index 8dfbb44ca..6df0a59ba 100644
--- a/packages/shared-ui/src/dnd/ActionZone.svelte
+++ b/packages/shared-ui/src/dnd/ActionZone.svelte
@@ -60,8 +60,7 @@
 		role="button"
 		tabindex="-1"
 	>
-		{@const Icon = iconComponent}
-		<Icon size={20} weight="bold" />
+		<svelte:component this={iconComponent} size={20} weight="bold" />
 		{#if label}
 			<span class="action-label">{label}</span>
 		{/if}