Unify UI workflows and streamline fleet management

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

@@ -12,9 +12,24 @@
         onchange?: (id: string) => void;
         ariaLabel?: string;
         size?: 'sm' | 'md';
+        panelId?: string;
+        idPrefix?: string;
     }
 
-    let { tabs, value = $bindable(), onchange, ariaLabel, size = 'md' }: Props = $props();
+    const uid = $props.id();
+    let { tabs, value = $bindable(), onchange, ariaLabel, size = 'md', panelId, idPrefix = uid }: Props = $props();
+
+    function onKey(event: KeyboardEvent) {
+        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+        event.preventDefault();
+        const enabled = tabs.filter(t => !t.disabled);
+        if (!enabled.length) return;
+        const index = enabled.findIndex(t => t.id === value);
+        const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
+            : (index + (event.key === 'ArrowRight' ? 1 : -1) + enabled.length) % enabled.length;
+        select(enabled[next].id, false);
+        document.getElementById(`${idPrefix}-${enabled[next].id}`)?.focus();
+    }
 
     function select(id: string, disabled: boolean | undefined) {
         if (disabled) return;
@@ -30,7 +45,11 @@
             class="tab"
             class:active={value === t.id}
             role="tab"
+            id={`${idPrefix}-${t.id}`}
             aria-selected={value === t.id}
+            aria-controls={panelId}
+            tabindex={value === t.id ? 0 : -1}
+            onkeydown={onKey}
             disabled={t.disabled}
             onclick={() => select(t.id, t.disabled)}
         >
@@ -52,7 +71,7 @@
         gap: 2px;
         padding: 4px;
         background: color-mix(in oklab, var(--surface) 80%, transparent);
-        border-radius: var(--radius-pill);
+        border-radius: var(--radius-md);
         border: 1px solid var(--border-subtle);
     }
     .tab {
@@ -68,7 +87,7 @@
         font-family: var(--font-body);
         font-weight: var(--weight-medium);
         cursor: pointer;
-        border-radius: var(--radius-pill);
+        border-radius: var(--radius-sm);
         transition:
             color var(--dur-fast) var(--ease-standard),
             background-color var(--dur-fast) var(--ease-standard);
@@ -97,7 +116,7 @@
         background: var(--surface-overlay);
         color: var(--text-secondary);
         font-family: var(--font-mono);
-        font-size: 10px;
+        font-size: var(--text-xs);
     }
     .tab.active .badge {
         background: var(--accent-primary);