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

src/lib/ui/components/ProvisioningActivity.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 { timestampISO } from '$lib/time-zone.js';
     import { timeFormat } from '$ui/stores/time-zone.js';
     import { onDestroy } from 'svelte';
@@ -125,23 +128,23 @@
                     void load();
                 }}
             >
-                <label class="search"
-                    >Search activity<input
+                <Field class="search" label="Search activity">
+                    <Input
                         type="search"
                         bind:value={query}
                         placeholder="Find a stage or message"
-                    /></label
+                    /></Field
                 >
-                <label
-                    >Order<select
+                <Field label="Order">
+                    <Select
                         bind:value={order}
                         onchange={() => {
                             void load();
                         }}
                         ><option value="newest">Newest first</option><option value="oldest"
                             >Oldest first</option
-                        ></select
-                    ></label
+                        ></Select
+                    ></Field
                 >
                 <Button type="submit" disabled={loading}>Search</Button>
             </form>
@@ -270,31 +273,11 @@
         align-items: end;
         gap: var(--space-3);
     }
-    .tools label {
-        display: grid;
-        gap: var(--space-2);
-        font-size: var(--text-xs);
-        color: var(--text-secondary);
-    }
-    .search {
+
+    .tools :global(.search) {
         flex: 1 1 160px;
     }
-    input,
-    select {
-        background: var(--surface-sunken);
-        color: var(--text-primary);
-        border: 1px solid var(--border-control);
-        border-radius: var(--radius-sm);
-        padding: 10px;
-        font: inherit;
-        min-height: 40px;
-        width: 100%;
-    }
-    input:focus-visible,
-    select:focus-visible {
-        outline: 2px solid var(--border-focus);
-        outline-offset: 2px;
-    }
+
     .new-events {
         display: flex;
         align-items: center;
@@ -333,7 +316,7 @@
         .tools {
             align-items: stretch;
         }
-        .tools .search {
+        .tools :global(.search) {
             flex-basis: 100%;
         }
     }