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

src/lib/ui/components/ConfigTextEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import Field from '$ui/components/primitives/Field.svelte';
+    import Input from '$ui/components/primitives/Input.svelte';
     import {
         addConfigSetting,
         changeConfigValue,
@@ -69,44 +71,50 @@
         ></textarea>
     {:else}
         <div class="settings">
-            <input
-                class="search"
-                aria-label="Find a setting"
-                bind:value={search}
-                placeholder="Find a setting…"
-            />
+            <Field label="Find a setting" hiddenLabel class="search"
+                ><Input
+                    aria-label="Find a setting"
+                    bind:value={search}
+                    placeholder="Find a setting…"
+                /></Field
+            >
             <p class="hint">
                 Edit values and inline comments. Other commands and formatting stay in the raw file.
             </p>
             {#each visible as entry (entry.index)}
-                <label class="setting"
-                    ><span><code>{entry.key}</code><small>Line {entry.index + 1}</small></span>
-                    <input
+                <Field class="setting"
+                    >{#snippet label()}<span
+                            ><code>{entry.key}</code><small>Line {entry.index + 1}</small></span
+                        >{/snippet}
+                    <Input
+                        mono
                         value={entry.value}
                         {disabled}
                         aria-label={`${entry.key}, line ${entry.index + 1}`}
                         oninput={(e) =>
                             (text = changeConfigValue(text, entry.index, e.currentTarget.value))}
                     />
-                </label>
+                </Field>
             {:else}<p class="hint">
                     {entries.length ? 'No matching settings.' : 'Add your first setting below.'}
                 </p>{/each}
             <div class="add-setting">
-                <label
-                    >Setting name<input
+                <Field label="Setting name">
+                    <Input
+                        mono
                         bind:value={newKey}
                         onkeydown={addOnEnter}
                         placeholder="g_inactivity"
                         {disabled}
-                    /></label
-                ><label
-                    >Value<input
+                    /></Field
+                ><Field label="Value">
+                    <Input
+                        mono
                         bind:value={newValue}
                         onkeydown={addOnEnter}
                         placeholder="0"
                         {disabled}
-                    /></label
+                    /></Field
                 ><Button
                     size="sm"
                     onclick={addSetting}
@@ -170,7 +178,6 @@
         color: var(--text-secondary);
     }
     button:focus-visible,
-    input:focus-visible,
     textarea:focus-visible {
         outline: 2px solid var(--accent-primary);
         outline-offset: -2px;
@@ -189,8 +196,7 @@
         font: var(--text-sm)/1.8 var(--font-mono);
         tab-size: 4;
     }
-    textarea:disabled,
-    input:disabled {
+    textarea:disabled {
         opacity: 0.65;
     }
     .settings {
@@ -198,17 +204,8 @@
         max-height: 520px;
         overflow: auto;
     }
-    input {
-        box-sizing: border-box;
-        background: var(--surface);
-        color: var(--text-primary);
-        border: 1px solid var(--border-strong);
-        border-radius: var(--radius-sm);
-        padding: 9px 12px;
-        font: var(--text-sm) var(--font-mono);
-        width: 100%;
-    }
-    .setting {
+
+    .settings :global(.setting) {
         display: grid;
         grid-template-columns: minmax(140px, 1fr) minmax(0, 1.4fr);
         align-items: center;
@@ -216,7 +213,7 @@
         padding: 12px 0;
         border-top: 1px solid var(--border-subtle);
     }
-    .setting span {
+    .settings :global(.setting span) {
         min-width: 0;
         overflow-wrap: anywhere;
     }
@@ -228,11 +225,9 @@
         border-top: 1px solid var(--border-strong);
         padding-top: 16px;
     }
-    .add-setting label {
+
+    .add-setting :global(.field) {
         flex: 1 1 140px;
-        display: grid;
-        gap: 6px;
-        font-size: var(--text-sm);
     }
     code {
         font: var(--text-sm) var(--font-mono);
@@ -259,7 +254,7 @@
         margin: 6px 0;
     }
     @media (max-width: 600px) {
-        .setting {
+        .settings :global(.setting) {
             grid-template-columns: 1fr;
             gap: 8px;
         }
@@ -267,7 +262,6 @@
             display: none;
         }
     }
-    input:not([type='checkbox']):not([type='file']),
     textarea {
         border-color: var(--border-control);
     }