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

src/lib/ui/components/ScriptUploadDrawer.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 { goto } from '$app/navigation';
     import { tick } from 'svelte';
     import { plural } from '$ui/plural.js';
@@ -306,8 +309,8 @@
                             <a href="/scripts/{item.result.scriptId}">View script →</a>
                         </p>
                     {:else}
-                        <label
-                            >Destination<select
+                        <Field label="Destination">
+                            <Select
                                 bind:value={item.target}
                                 disabled={busy || item.inspecting}
                                 onchange={() => (item.error = '')}
@@ -320,10 +323,10 @@
                                             ? ' · beta active'
                                             : ''}</option
                                     >{/each}
-                            </select></label
+                            </Select></Field
                         >
-                        {#if item.target === 'new'}<label
-                                >Script name<input bind:value={item.name} disabled={busy} /></label
+                        {#if item.target === 'new'}<Field label="Script name">
+                                <Input bind:value={item.name} disabled={busy} /></Field
                             >
                         {:else if item.target !== ''}{@const s = scripts.find(
                                 (s) => s.id === item.target
@@ -362,8 +365,8 @@
                     ></textarea></label
                 >
                 {#if hasNew}
-                    <label
-                        >Scope for new scripts<select
+                    <Field label="Scope for new scripts">
+                        <Select
                             bind:value={scopeType}
                             disabled={busy}
                             onchange={() => {
@@ -372,28 +375,28 @@
                             }}
                             ><option value="none">Unscoped · choose beta targets</option><option
                                 value="game">Game</option
-                            ><option value="map">Map</option></select
-                        ></label
+                            ><option value="map">Map</option></Select
+                        ></Field
                     >
                     {#if scopeType !== 'none'}
-                        <label
-                            >Game<select
+                        <Field label="Game">
+                            <Select
                                 bind:value={scopeGame}
                                 disabled={busy || !scopeLoaded}
                                 onchange={() => (scopeMap = '')}
                                 ><option value="">Choose a game…</option
                                 >{#each scopeOptions.games as g}<option value={g}
                                         >{gameTitle(g)}</option
-                                    >{/each}</select
-                            ></label
+                                    >{/each}</Select
+                            ></Field
                         >
-                        {#if scopeType === 'map'}<label
-                                >Map<select bind:value={scopeMap} disabled={busy || !scopeGame}
+                        {#if scopeType === 'map'}<Field label="Map">
+                                <Select bind:value={scopeMap} disabled={busy || !scopeGame}
                                     ><option value="">Choose a map…</option
                                     >{#each scopeOptions.mapsByGame[scopeGame] ?? [] as m}<option
                                             value={m}>{mapLabel(m)}</option
-                                        >{/each}</select
-                                ></label
+                                        >{/each}</Select
+                                ></Field
                             >{/if}
                         {#if scopeValue}<p class="note">
                                 {matches.length} matching servers: {matches
@@ -548,7 +551,6 @@
         color: var(--text-secondary);
     }
     input,
-    select,
     textarea {
         box-sizing: border-box;
         width: 100%;
@@ -565,7 +567,6 @@
         resize: vertical;
     }
     input:focus-visible,
-    select:focus-visible,
     textarea:focus-visible {
         outline: 2px solid var(--accent-primary);
         outline-offset: 2px;
@@ -622,7 +623,6 @@
         }
     }
     input:not([type='checkbox']):not([type='file']),
-    select,
     textarea {
         border-color: var(--border-control);
     }