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

src/lib/ui/components/ConfigInspector.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import Input from '$ui/components/primitives/Input.svelte';
+    import Select from '$ui/components/primitives/Select.svelte';
+    import Field from '$ui/components/primitives/Field.svelte';
     import { onMount } from 'svelte';
     import { serverTitle } from '$ui/server-labels.js';
     import type { ConfigInspection, ConfigServer, ConfigSource } from '$lib/config-workbench.js';
@@ -191,8 +194,8 @@
             ? 'Your draft composed with the other promoted configs. Saving creates an untested version.'
             : 'The intended file from promoted configs and the selected map. Live files and active betas may differ.'}
     </p>
-    {#if !fixedServer}<label class="server-label"
-            >Server<select
+    {#if !fixedServer}<Field class="server-label" label="Server">
+            <Select
                 aria-label="Server"
                 bind:value={selected}
                 disabled={!!fixedServer || !eligible.length}
@@ -201,7 +204,7 @@
                         >{serverTitle(server.name)}</option
                     >{/each}
                 {#if !eligible.length}<option value="">No matching servers</option>{/if}
-            </select></label
+            </Select></Field
         >{/if}
     {#if error}<div class="error" role="alert">
             {error}{inspection ? ' Showing the last completed preview.' : ''}
@@ -274,11 +277,13 @@
             ></textarea>
         {:else}
             <div class="filters">
-                <input
-                    aria-label="Search effective settings"
-                    bind:value={query}
-                    placeholder="Search settings or sources…"
-                /><label class="check"
+                <Field label="Search effective settings" hiddenLabel class="search"
+                    ><Input
+                        aria-label="Search effective settings"
+                        bind:value={query}
+                        placeholder="Search settings or sources…"
+                    /></Field
+                ><label class="check"
                     ><input type="checkbox" bind:checked={onlyOverrides} /> Overrides ({overlaps})</label
                 >
             </div>
@@ -379,13 +384,12 @@
         font-size: var(--text-sm);
         margin: 12px 0 20px;
     }
-    .server-label {
+    .inspector :global(.server-label) {
         display: grid;
         gap: 8px;
         font-size: var(--text-xs);
         color: var(--text-secondary);
     }
-    select,
     input:not([type='checkbox']) {
         width: 100%;
         box-sizing: border-box;
@@ -396,7 +400,6 @@
         padding: 10px 12px;
         font: var(--text-sm) var(--font-body);
     }
-    select:focus-visible,
     input:focus-visible,
     button:focus-visible,
     summary:focus-visible,
@@ -480,12 +483,13 @@
         color: var(--text-secondary);
         margin-left: 6px;
     }
+    .filters > :global(.search) {
+        flex: 1 1 180px;
+    }
     .filters {
         margin: 16px 0 8px;
     }
-    .filters > input {
-        flex: 1 1 180px;
-    }
+
     .check {
         font-size: var(--text-xs);
         color: var(--text-secondary);
@@ -532,6 +536,7 @@
         color: var(--text-secondary);
         margin-top: 6px;
     }
+
     .source-label::before {
         content: '▸';
     }
@@ -610,7 +615,6 @@
         }
     }
     input:not([type='checkbox']):not([type='file']),
-    select,
     textarea {
         border-color: var(--border-control);
     }