Use shared form controls and enforce UI patterns (Refs #110)

src/routes/campaigns/+page.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Select from '$ui/components/primitives/Select.svelte';
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import RelativeTime from '$ui/components/RelativeTime.svelte';
     import { contextHref } from '$lib/navigation-context.js';
     import { timeFormat } from '$ui/stores/time-zone.js';
@@ -102,31 +105,31 @@
 <div class="page">
     <SectionHeader title="Campaigns" />
     <div class="toolbar">
-        <label class="search"
-            >Search<input
+        <Field class="search" label="Search">
+            <Input
                 type="search"
                 bind:value={query}
                 oninput={() => saveContext(true)}
                 placeholder="Script, campaign, or server"
-                maxlength="100"
-            /></label
+                maxlength={100}
+            /></Field
         >
-        <label
-            >Status<select bind:value={status} onchange={() => saveContext(true)}>
+        <Field label="Status">
+            <Select bind:value={status} onchange={() => saveContext(true)}>
                 <option value="">All statuses</option><option value="progress">In progress</option
                 ><option value="attention">Needs attention</option><option value="complete"
                     >Complete</option
                 ><option value="rolled-back">Rolled back</option><option value="inactive"
                     >Inactive</option
                 >
-            </select></label
+            </Select></Field
         >
-        <label
-            >Type<select bind:value={action} onchange={() => saveContext(true)}>
+        <Field label="Type">
+            <Select bind:value={action} onchange={() => saveContext(true)}>
                 <option value="">All types</option><option value="promote">Promote</option><option
                     value="rollback">Rollback</option
                 ><option value="drift">Maintenance repair</option>
-            </select></label
+            </Select></Field
         >
         {#if filtered}<Button variant="ghost" onclick={clearFilters}>Clear filters</Button>{/if}
     </div>
@@ -254,29 +257,12 @@
         flex-wrap: wrap;
         gap: 12px;
     }
-    label {
-        display: grid;
-        gap: 6px;
-        font-size: var(--text-xs);
-        color: var(--text-secondary);
-    }
-    .search {
+
+    .toolbar :global(.search) {
         flex: 1;
         min-width: 220px;
     }
-    input,
-    select {
-        padding: 10px 12px;
-        min-height: 40px;
-        background: var(--surface-sunken);
-        color: var(--text-primary);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-        font: inherit;
-        font-size: var(--text-sm);
-    }
-    input:focus-visible,
-    select:focus-visible,
+
     .timestamp:focus-visible {
         outline: 2px solid var(--accent-primary);
         outline-offset: 2px;
@@ -438,10 +424,11 @@
         td {
             padding: 12px 8px;
         }
-        .search {
+        .toolbar :global(.search) {
             flex-basis: 100%;
         }
-        .toolbar > label:not(.search) {
+
+        .toolbar > :global(.field:not(.search)) {
             flex: 1;
         }
     }