Improve operational UX, recovery flows, and action safety

Implement the approved UX review across Fleet, Betas, Library, deployments, and Settings. Add reviewed promotion and reconciliation plans, atomic queued-removal cancellation, recoverable beta drafts and launch inputs, accessible controls, and mobile improvements.

Validated with 473 tests, a clean typecheck, production build, and isolated desktop/mobile browser walkthroughs. Include the review and implementation coverage notes.

src/lib/ui/components/primitives/Field.svelte

@@ -18,14 +18,28 @@
         get messageId() { return error || hint ? `${id}-message` : undefined; },
         get invalid() { return !!error; }
     });
+
+    function connectLabel(node: HTMLDivElement) {
+        const connect = () => {
+            const label = node.querySelector<HTMLLabelElement>('label.label');
+            const control = node.querySelector<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>('input:not([type="hidden"]), select, textarea');
+            if (!label || !control || forId) return;
+            if (!control.id) control.id = `${id}-control`;
+            label.htmlFor = control.id;
+        };
+        connect();
+        const observer = new MutationObserver(connect);
+        observer.observe(node, { childList: true, subtree: true });
+        return { destroy: () => observer.disconnect() };
+    }
 </script>
 
-<div class="field">
+<div class="field" use:connectLabel>
     {#if label}
-        <svelte:element this={forId ? 'label' : 'div'} class="label" id={`${id}-label`} for={forId}>
+        <label class="label" id={`${id}-label`} for={forId ?? `${id}-control`}>
             {label}
             {#if required}<span class="req" aria-hidden="true">*</span>{/if}
-        </svelte:element>
+        </label>
     {/if}
     <div class="control" class:has-error={!!error}>
         {@render children?.()}