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

src/lib/ui/components/PluginGithubImport.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 { timeFormat } from '$ui/stores/time-zone.js';
     import { onMount, onDestroy } from 'svelte';
     import { goto } from '$app/navigation';
@@ -184,9 +187,8 @@
             <p>Import a release below to track updates for this plugin.</p>
         {/if}
         <form onsubmit={preview} class="lookup">
-            <label
-                >Repository or release URL
-                <input
+            <Field label="Repository or release URL">
+                <Input
                     type="url"
                     bind:value={url}
                     oninput={() => {
@@ -197,7 +199,7 @@
                     placeholder="https://github.com/alicealys/t6-gsc-utils/releases/tag/v3.1.0"
                     disabled={busy || disabled}
                 />
-            </label>
+            </Field>
             <Button
                 type="submit"
                 loading={busy && !release}
@@ -228,29 +230,29 @@
                     </p>
                 {:else}
                     <div class="fields">
-                        <label
-                            >DLL asset<select bind:value={assetId} disabled={busy || disabled}>
+                        <Field label="DLL asset">
+                            <Select bind:value={assetId} disabled={busy || disabled}>
                                 <option value="" disabled>Choose a DLL…</option>
                                 {#each release.assets as asset}<option value={String(asset.id)}
                                         >{asset.name} · {(asset.size / 1024).toFixed(1)} KB</option
                                     >{/each}
-                            </select></label
+                            </Select></Field
                         >
                         {#if !pluginId}
-                            <label
-                                >Plugin name<input
+                            <Field label="Plugin name">
+                                <Input
                                     bind:value={name}
                                     disabled={busy}
                                     placeholder="t6-gsc-utils"
-                                /></label
+                                /></Field
                             >
-                            <label
-                                >Deploy scope<select bind:value={game} disabled={busy}
+                            <Field label="Deploy scope">
+                                <Select bind:value={game} disabled={busy}
                                     ><option value="">Unscoped — select servers in a beta</option
                                     ><option value="t5">Black Ops I</option><option value="t6"
                                         >Black Ops II</option
-                                    ></select
-                                ></label
+                                    ></Select
+                                ></Field
                             >
                         {/if}
                     </div>
@@ -334,30 +336,11 @@
         gap: var(--space-3);
         flex-wrap: wrap;
     }
-    .lookup label {
+
+    .lookup :global(.field) {
         flex: 1 1 300px;
     }
-    label {
-        display: grid;
-        gap: var(--space-2);
-        font-size: var(--text-sm);
-    }
-    input,
-    select {
-        width: 100%;
-        min-width: 0;
-        padding: 10px 12px;
-        background: var(--surface-sunken);
-        border: 1px solid var(--border-strong);
-        border-radius: var(--radius-md);
-        color: var(--text-primary);
-        font: inherit;
-    }
-    input:focus-visible,
-    select:focus-visible {
-        outline: 2px solid var(--accent-primary);
-        outline-offset: 2px;
-    }
+
     .fields {
         display: grid;
         gap: var(--space-3);
@@ -404,8 +387,4 @@
         font: var(--text-xs) var(--font-mono);
         margin-top: var(--space-2);
     }
-    input:not([type='checkbox']):not([type='file']),
-    select {
-        border-color: var(--border-control);
-    }
 </style>