refactor: services layer, valibot validation, shared CSS utilities, aria labels, and drizzle migrate

- Extract groceries/categories/references services with db injection
- Add valibot for form validation and safe numeric id parsing
- Fix category delete FK behavior with onDelete: set null + migration
- Replace custom migrate.js with drizzle-orm/libsql/migrator
- Add shared CSS utility classes in app.css (forms, lists, buttons)
- Add aria-pressed and aria-label on interactive elements
- Remove redundant app.css imports and unused /stores import
- Add integration tests for all services using drizzle migrate helper
- Remove smoke test; add db:migrate and db:studio scripts

1 files changed, 17 insertions, 112 deletions

diff --git a/src/routes/catalog/+page.svelte b/src/routes/catalog/+page.svelte
index 0fda271..4b43c02 100644
--- a/src/routes/catalog/+page.svelte
+++ b/src/routes/catalog/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import '../../app.css';
 	import { enhance } from '$app/forms';
 
 	let { data, form } = $props();
@@ -24,20 +23,26 @@
 			<h3 class="category-name">{cat}</h3>
 			<ul class="item-list">
 				{#each items as item (item.id)}
-					<li class="catalog-item">
-						<button name="id" value={item.id} type="submit">
+					<li class="item-row item-row--fixed">
+						<button
+							class="item-btn item-btn--grow"
+							name="id"
+							value={item.id}
+							type="submit"
+							aria-pressed={item.checked}
+						>
 							<span class="item-text">
 								<span class:checked={item.checked}>{item.name}</span>
 								{#if item.bestRef}
-											<span class="best-ref"
-												>{item.bestRef.reference}
-												{#if item.bestRef.price && item.bestRef.unit}
-													&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
-												{/if}
-												{#if item.bestRef.qualityScore != null}
-													&nbsp;({item.bestRef.qualityScore}/100)
-												{/if}
-											</span>
+									<span class="best-ref"
+										>{item.bestRef.reference}
+										{#if item.bestRef.price && item.bestRef.unit}
+											&nbsp;{item.bestRef.price.toFixed(2)} {item.bestRef.unit}
+										{/if}
+										{#if item.bestRef.qualityScore != null}
+											&nbsp;({item.bestRef.qualityScore}/100)
+										{/if}
+									</span>
 								{/if}
 							</span>
 						</button>
@@ -50,114 +55,14 @@
 {/if}
 
 <style>
-	.item-list {
-		list-style: none;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-	}
-
-	.item-list li button {
-		width: 100%;
-		text-align: left;
-		padding: 0 0.875rem;
-		height: 100%;
-		border: none;
-		border-radius: 0.75rem;
-		background: var(--surface);
-		font-size: 1rem;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.item-list li button:hover {
-		background: #fff8f5;
-		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
-		transform: translateY(-1px);
-	}
-
-	.catalog-item {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-		height: 2.75rem;
-	}
-
-	.catalog-item button:first-child {
-		flex-grow: 1;
-		width: auto;
-		display: flex;
-		align-items: center;
-		height: 100%;
-	}
-
-	.item-text {
-		display: flex;
-		flex-direction: column;
-		text-align: left;
-		line-height: 1.2;
-		gap: 0.0625rem;
-		overflow: hidden;
-	}
-
 	.checked {
 		text-decoration: line-through;
 		color: var(--text-secondary);
 		font-weight: 400;
 	}
 
-	.best-ref {
-		font-size: 0.75rem;
-		color: var(--text-secondary);
-		font-weight: 400;
-	}
-
-	.ref-link {
-		width: 2.75rem;
-		flex-shrink: 0;
-		height: 2.75rem;
-		aspect-ratio: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 0.75rem;
-		background: var(--surface);
-		color: var(--text-secondary);
-		text-decoration: none;
-		font-size: 1rem;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.ref-link:hover {
-		background: #fff8f5;
-		color: var(--accent);
-		box-shadow: 0 2px 6px rgba(217, 119, 87, 0.1);
-		transform: translateY(-1px);
-	}
-
 	.empty {
-		color: var(--text-secondary);
-		font-size: 0.9375rem;
 		margin-top: 1rem;
-		text-align: center;
 		padding: 2rem;
-		background: var(--surface);
-		border-radius: 0.75rem;
-		box-shadow: 0 1px 2px var(--shadow);
-	}
-
-	.category-name {
-		font-size: 0.75rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		margin: 1.25rem 0 0.5rem;
-		padding-left: 0.5rem;
-		border-left: 3px solid var(--accent);
 	}
 </style>