8213ebf fix(svelte): resolve all svelte-check warnings · pdraim

M src/lib/components/aim-login.svelte +1 -0


@@ -17,6 +17,7 @@
17	17
18	18		let { showAuth = $bindable(), onLoginSuccess, activeTab: initialTab = 'signin' } = $props();
19	19
	20	+	// svelte-ignore state_referenced_locally - intentionally capturing initial value
20	21		let activeTab = $state(initialTab);
21	22
22	23		// Sign In state


@@ -17,6 +17,7 @@
17		17
18	let { showAuth = $bindable(), onLoginSuccess, activeTab: initialTab = 'signin' } = $props();	18		let { showAuth = $bindable(), onLoginSuccess, activeTab: initialTab = 'signin' } = $props();
19		19
		20	+	// svelte-ignore state_referenced_locally - intentionally capturing initial value
20	let activeTab = $state(initialTab);	21		let activeTab = $state(initialTab);
21		22
22	// Sign In state	23		// Sign In state

M src/lib/components/chat-room.svelte +3 -2


@@ -58,10 +58,11 @@
58	58		}
59	59
60	60		// Text formatting state - initialize directly with merged initial style
	61	+	// svelte-ignore state_referenced_locally - intentionally capturing initial value
61	62		let currentTextStyle = $state<TextStyle>({
62	63		...DEFAULT_TEXT_STYLE,
63	64		...initialTextStyle,
64		-	color: initialTextStyle.color \|\| '#000000' // Ensure we always have a valid color
	65	+	color: initialTextStyle.color \|\| '#000000'
65	66		});
66	67
67	68		// Rate limiting state

@@ -703,7 +704,6 @@
703	704		bind:style={currentTextStyle}
704	705		compact={true}
705	706		showFontSelector={true}
706		-	showGradients={true}
707	707		/>
708	708		</div>
709	709		{/if}

@@ -998,6 +998,7 @@
998	998		/* Styled input - font is controlled by retro-font-* classes */
999	999		.styled-input {
1000	1000		/* Font family is set by retro-font-* classes, don't override here */
	1001	+	font-style: inherit;
1001	1002		}
1002	1003
1003	1004		button {

 	}
 	// Text formatting state - initialize directly with merged initial style
+	// svelte-ignore state_referenced_locally - intentionally capturing initial value
 	let currentTextStyle = $state<TextStyle>({
 		...DEFAULT_TEXT_STYLE,
 		...initialTextStyle,
-		color: initialTextStyle.color || '#000000' // Ensure we always have a valid color
+		color: initialTextStyle.color || '#000000'
 	});
 	// Rate limiting state
 								bind:style={currentTextStyle}
 								compact={true}
 								showFontSelector={true}
-								showGradients={true}
 							/>
 						</div>
 					{/if}
 	/* Styled input - font is controlled by retro-font-* classes */
 	.styled-input {
 		/* Font family is set by retro-font-* classes, don't override here */
+		font-style: inherit;
 	}
 	button {

M src/lib/components/color-picker-256.svelte +9 -4


@@ -6,16 +6,13 @@
6	6		selectedColor = $bindable('#000000'),
7	7		selectedGradient = $bindable(undefined),
8	8		onColorChange,
9		-	onGradientChange,
10		-	compact: _compact = true
	9	+	onGradientChange
11	10		} = $props<{
12	11		selectedColor?: string;
13	12		selectedGradient?: string[];
14	13		onColorChange?: (color: string) => void;
15	14		onGradientChange?: (gradient: string[]) => void;
16		-	compact?: boolean;
17	15		}>();
18		-	void _compact; // Reserved for future use
19	16
20	17		// State
21	18		let showPicker = $state(false);

@@ -139,6 +136,7 @@
139	136
140	137		<!-- Color picker dropdown -->
141	138		{#if showPicker}
	139	+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
142	140		<div class="picker-dropdown sunken-panel" onclick={(e) => e.stopPropagation()}>
143	141		<!-- Gradient controls -->
144	142		<div class="gradient-controls">

@@ -158,6 +156,13 @@
158	156		e.stopPropagation();
159	157		removeGradientColor(index);
160	158		}}
	159	+	onkeydown={(e) => {
	160	+	if (e.key === 'Enter' \|\| e.key === ' ') {
	161	+	e.preventDefault();
	162	+	e.stopPropagation();
	163	+	removeGradientColor(index);
	164	+	}
	165	+	}}
161	166		title="Remove this color"
162	167		role="button"
163	168		tabindex="0">×</span

 		selectedColor = $bindable('#000000'),
 		selectedGradient = $bindable(undefined),
 		onColorChange,
-		onGradientChange,
+		onGradientChange
-		compact: _compact = true
 	} = $props<{
 		selectedColor?: string;
 		selectedGradient?: string[];
 		onColorChange?: (color: string) => void;
 		onGradientChange?: (gradient: string[]) => void;
-		compact?: boolean;
 	}>();
-	void _compact; // Reserved for future use
 	// State
 	let showPicker = $state(false);
 	<!-- Color picker dropdown -->
 	{#if showPicker}
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 		<div class="picker-dropdown sunken-panel" onclick={(e) => e.stopPropagation()}>
 			<!-- Gradient controls -->
 			<div class="gradient-controls">
 										e.stopPropagation();
 										removeGradientColor(index);
 									}}
+									onkeydown={(e) => {
+										if (e.key === 'Enter' || e.key === ' ') {
+											e.preventDefault();
+											e.stopPropagation();
+											removeGradientColor(index);
+										}
+									}}
 									title="Remove this color"
 									role="button"
 									tabindex="0">×</span

M src/lib/components/text-formatting-toolbar.svelte +1 -8


@@ -10,19 +10,13 @@
10	10		// Props
11	11		let {
12	12		style = $bindable(DEFAULT_TEXT_STYLE),
13		-	onPreviewText: _onPreviewText,
14	13		compact = true,
15		-	showFontSelector = false,
16		-	showGradients: _showGradients = true
	14	+	showFontSelector = false
17	15		} = $props<{
18	16		style?: TextStyle;
19		-	onPreviewText?: (text: string) => void;
20	17		compact?: boolean;
21	18		showFontSelector?: boolean;
22		-	showGradients?: boolean;
23	19		}>();
24		-	void _showGradients; // Reserved for future use
25		-	void _onPreviewText; // Reserved for future use
26	20
27	21		// State
28	22		let currentColor = $state(style.color \|\| '#000000');

@@ -145,7 +139,6 @@
145	139		bind:selectedGradient={currentGradient}
146	140		onColorChange={handleColorChange}
147	141		onGradientChange={handleGradientChange}
148		-	{compact}
149	142		/>
150	143		</div>
151	144		</div>

 	// Props
 	let {
 		style = $bindable(DEFAULT_TEXT_STYLE),
-		onPreviewText: _onPreviewText,
 		compact = true,
-		showFontSelector = false,
+		showFontSelector = false
-		showGradients: _showGradients = true
 	} = $props<{
 		style?: TextStyle;
-		onPreviewText?: (text: string) => void;
 		compact?: boolean;
 		showFontSelector?: boolean;
-		showGradients?: boolean;
 	}>();
-	void _showGradients; // Reserved for future use
-	void _onPreviewText; // Reserved for future use
 	// State
 	let currentColor = $state(style.color || '#000000');
 			bind:selectedGradient={currentGradient}
 			onColorChange={handleColorChange}
 			onGradientChange={handleGradientChange}
-			{compact}
 		/>
 	</div>
 </div>

M src/lib/components/text-style-selector.svelte +11 -14


@@ -100,8 +100,9 @@
100	100		<div class="text-style-selector" class:compact>
101	101		<!-- Font Family Selection -->
102	102		<div class="style-group">
103		-	<label>Font:</label>
	103	+	<label for="font-family-select">Font:</label>
104	104		<select
	105	+	id="font-family-select"
105	106		bind:value={style.fontFamily}
106	107		onchange={(e) => selectFont((e.target as HTMLSelectElement).value as FontFamily)}
107	108		>

@@ -115,8 +116,9 @@
115	116
116	117		<!-- Font Size -->
117	118		<div class="style-group">
118		-	<label>Size:</label>
	119	+	<label for="font-size-range">Size:</label>
119	120		<input
	121	+	id="font-size-range"
120	122		type="range"
121	123		min="8"
122	124		max="18"

@@ -164,14 +166,13 @@
164	166
165	167		<!-- Color & Gradient Selection -->
166	168		<div class="style-group">
167		-	<label>Color:</label>
	169	+	<span class="label-text">Color:</span>
168	170		<div class="color-controls">
169	171		<ColorPicker256
170	172		bind:selectedColor={currentColor}
171	173		bind:selectedGradient={currentGradient}
172	174		onColorChange={handleColorChange}
173	175		onGradientChange={handleGradientChange}
174		-	compact={false}
175	176		/>
176	177		</div>
177	178		</div>

@@ -179,7 +180,7 @@
179	180		<!-- Preview -->
180	181		{#if showPreview}
181	182		<div class="preview-section">
182		-	<label>Preview:</label>
	183	+	<span class="label-text">Preview:</span>
183	184		<div class="preview-text" style={generateCSSStyle(style)}>
184	185		{#if isProcessing}
185	186		<span class="loading">Processing...</span>

@@ -212,7 +213,8 @@
212	213		margin-bottom: 8px;
213	214		}
214	215
215		-	.style-group label {
	216	+	.style-group label,
	217	+	.style-group .label-text {
216	218		font-weight: bold;
217	219		min-width: 50px;
218	220		}

@@ -271,7 +273,7 @@
271	273		border-top: 1px solid #ccc;
272	274		}
273	275
274		-	.preview-section label {
	276	+	.preview-section .label-text {
275	277		display: block;
276	278		margin-bottom: 4px;
277	279		font-weight: bold;

@@ -300,7 +302,8 @@
300	302		margin-bottom: 4px;
301	303		}
302	304
303		-	.compact .style-group label {
	305	+	.compact .style-group label,
	306	+	.compact .style-group .label-text {
304	307		min-width: 40px;
305	308		font-size: 10px;
306	309		}

@@ -310,10 +313,4 @@
310	313		height: 20px;
311	314		font-size: 10px;
312	315		}
313		-
314		-	.compact .color-button,
315		-	.compact .gradient-button {
316		-	font-size: 9px;
317		-	padding: 1px 4px;
318		-	}
319	316		</style>

 <div class="text-style-selector" class:compact>
 	<!-- Font Family Selection -->
 	<div class="style-group">
-		<label>Font:</label>
+		<label for="font-family-select">Font:</label>
 		<select
+			id="font-family-select"
 			bind:value={style.fontFamily}
 			onchange={(e) => selectFont((e.target as HTMLSelectElement).value as FontFamily)}
 		>
 	<!-- Font Size -->
 	<div class="style-group">
-		<label>Size:</label>
+		<label for="font-size-range">Size:</label>
 		<input
+			id="font-size-range"
 			type="range"
 			min="8"
 			max="18"
 	<!-- Color & Gradient Selection -->
 	<div class="style-group">
-		<label>Color:</label>
+		<span class="label-text">Color:</span>
 		<div class="color-controls">
 			<ColorPicker256
 				bind:selectedColor={currentColor}
 				bind:selectedGradient={currentGradient}
 				onColorChange={handleColorChange}
 				onGradientChange={handleGradientChange}
-				compact={false}
 			/>
 		</div>
 	</div>
 	<!-- Preview -->
 	{#if showPreview}
 		<div class="preview-section">
-			<label>Preview:</label>
+			<span class="label-text">Preview:</span>
 			<div class="preview-text" style={generateCSSStyle(style)}>
 				{#if isProcessing}
 					<span class="loading">Processing...</span>
 		margin-bottom: 8px;
 	}
-	.style-group label {
+	.style-group label,
+	.style-group .label-text {
 		font-weight: bold;
 		min-width: 50px;
 	}
 		border-top: 1px solid #ccc;
 	}
-	.preview-section label {
+	.preview-section .label-text {
 		display: block;
 		margin-bottom: 4px;
 		font-weight: bold;
 		margin-bottom: 4px;
 	}
-	.compact .style-group label {
+	.compact .style-group label,
+	.compact .style-group .label-text {
 		min-width: 40px;
 		font-size: 10px;
 	}
 		height: 20px;
 		font-size: 10px;
 	}
-	.compact .color-button,
-	.compact .gradient-button {
-		font-size: 9px;
-		padding: 1px 4px;
-	}
 </style>

M src/lib/components/user-preferences-modal.svelte +2 -1


@@ -89,8 +89,9 @@
89	89		role="dialog"
90	90		aria-modal="true"
91	91		aria-labelledby="preferences-title"
	92	+	tabindex="-1"
92	93		>
93		-	<!-- Modal content -->
	94	+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
94	95		<div class="modal-window window" onclick={(e) => e.stopPropagation()}>
95	96		<div class="title-bar">
96	97		<div class="title-bar-text" id="preferences-title">Text Formatting Preferences</div>

 		role="dialog"
 		aria-modal="true"
 		aria-labelledby="preferences-title"
+		tabindex="-1"
 	>
-		<!-- Modal content -->
+		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 		<div class="modal-window window" onclick={(e) => e.stopPropagation()}>
 			<div class="title-bar">
 				<div class="title-bar-text" id="preferences-title">Text Formatting Preferences</div>