feat(staples): add CategorySection component with eyebrow heading and chip row

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/onboarding/CategorySection.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import StapleChip from './StapleChip.svelte';
+
+  type Ingredient = { id: string; name: string; isStaple: boolean };
+
+  let { name, ingredients, onToggle }: {
+    name: string;
+    ingredients: Ingredient[];
+    onToggle: (id: string, value: boolean) => void;
+  } = $props();
+</script>
+
+<div>
+  <p class="text-[10px] font-medium tracking-[.08em] uppercase text-[var(--color-text-muted)] mb-[8px]">
+    {name}
+  </p>
+  <div class="flex flex-wrap gap-[6px]">
+    {#each ingredients as ingredient (ingredient.id)}
+      <StapleChip
+        name={ingredient.name}
+        selected={ingredient.isStaple}
+        onToggle={(value) => onToggle(ingredient.id, value)}
+      />
+    {/each}
+  </div>
+</div>