From ca16ca145be5475279aa48639b08e7b416999781 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 28 Nov 2025 21:40:08 -0800
Subject: [PATCH] refactor: remove type assertions in component props

- create proper UncapStarProps and TranscendenceStarProps interfaces
- use discriminated union for StarRender type
- add function overloads for createStarProps with type safety
- remove 'as any' casts from star component spreading
- remove optionalProps workaround in SegmentedControl
- stop spreading HTMLAttributes to RadioGroupPrimitive (not supported)
---
 .../segmented-control/SegmentedControl.svelte |  6 +-
 .../components/uncap/UncapIndicator.svelte    | 60 +++++++++++++++----
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/ui/segmented-control/SegmentedControl.svelte b/src/lib/components/ui/segmented-control/SegmentedControl.svelte
index 1607e757..7cf865ea 100644
--- a/src/lib/components/ui/segmented-control/SegmentedControl.svelte
+++ b/src/lib/components/ui/segmented-control/SegmentedControl.svelte
@@ -7,7 +7,6 @@
 	import type { Snippet } from 'svelte'
 	import styles from './segmented-control.module.scss'
 	import type { HTMLAttributes } from 'svelte/elements'
-	import { optionalProps } from '$lib/utils/typeShims'
 
 	export type SegmentedControlVariant = 'default' | 'blended' | 'background'
 
@@ -32,8 +31,7 @@
 		gap = false,
 		class: className,
 		wrapperClass,
-		children,
-		...restProps
+		children
 	}: Props = $props()
 
 	// Provide variant to child segments via context
@@ -85,7 +83,7 @@
 </script>
 
 <div class={wrapperClassList}>
-	<RadioGroupPrimitive.Root bind:value class={classList} {...(optionalProps(restProps) as any)}>
+	<RadioGroupPrimitive.Root bind:value class={classList}>
 		{@render children?.()}
 	</RadioGroupPrimitive.Root>
 </div>
\ No newline at end of file
diff --git a/src/lib/components/uncap/UncapIndicator.svelte b/src/lib/components/uncap/UncapIndicator.svelte
index feaa77fb..82dd0c23 100644
--- a/src/lib/components/uncap/UncapIndicator.svelte
+++ b/src/lib/components/uncap/UncapIndicator.svelte
@@ -19,15 +19,34 @@
 		updateTranscendence?: ((index: number) => void) | undefined
 	}
 
-	interface StarRender {
-		type: 'uncap' | 'transcendence'
-		props: {
-			index?: number
-			onStarClick?: (index: number, empty: boolean) => void
-			[key: string]: any
-		}
+	// Props for UncapStar component
+	interface UncapStarProps {
+		empty?: boolean
+		special?: boolean
+		flb?: boolean
+		ulb?: boolean
+		index: number
+		tabindex?: number
+		onStarClick: (index: number, empty: boolean) => void
 	}
 
+	// Props for TranscendenceStar component
+	interface TranscendenceStarProps {
+		className?: string
+		stage?: number
+		type?: 'character' | 'weapon' | 'summon'
+		editable?: boolean
+		interactive?: boolean
+		tabindex?: number
+		onStarClick?: () => void
+		onFragmentClick?: (newStage: number) => void
+		onFragmentHover?: (newStage: number) => void
+	}
+
+	type StarRender =
+		| { type: 'uncap'; props: UncapStarProps }
+		| { type: 'transcendence'; props: TranscendenceStarProps }
+
 	let {
 		type,
 		rarity,
@@ -77,13 +96,26 @@
 		}
 	}
 
+	// Options for creating uncap star props
+	interface UncapStarOptions {
+		index: number
+		flb?: boolean
+		ulb?: boolean
+		special?: boolean
+	}
+
 	// Helper function to create star props
-	const createStarProps = (starType: 'uncap' | 'transcendence', options: any = {}): StarRender => {
+	function createStarProps(starType: 'transcendence'): StarRender
+	function createStarProps(starType: 'uncap', options: UncapStarOptions): StarRender
+	function createStarProps(
+		starType: 'uncap' | 'transcendence',
+		options?: UncapStarOptions
+	): StarRender {
 		if (starType === 'transcendence') {
 			return {
 				type: 'transcendence',
 				props: {
-					stage: transcendenceStage,
+					stage: transcendenceStage ?? 0,
 					type,
 					editable,
 					interactive: editable,
@@ -92,6 +124,10 @@
 			}
 		}
 
+		if (!options) {
+			throw new Error('Options required for uncap star')
+		}
+
 		return {
 			type: 'uncap',
 			props: {
@@ -100,7 +136,7 @@
 				flb: options.flb,
 				ulb: options.ulb,
 				special: options.special,
-				tabIndex: editable ? 0 : undefined,
+				tabindex: editable ? 0 : undefined,
 				onStarClick: editable ? toggleStar : () => {}
 			}
 		}
@@ -164,9 +200,9 @@
 			{@const star = renderStar(i)}
 			{#if star}
 				{#if star.type === 'transcendence'}
-					<TranscendenceStar {...(star.props as any)} />
+					<TranscendenceStar {...star.props} />
 				{:else}
-					<UncapStar {...(star.props as any)} />
+					<UncapStar {...star.props} />
 				{/if}
 			{/if}
 		{/each}