feat: auto-ID generation from label with kebab conversion

src/routes/admin/+page.svelte

@@ -27,6 +27,46 @@
   let groupFormSnapshot = $state<Partial<Group>>({});
   let groupFieldError = $state<string | null>(null); // which field has error
 
+  // ── Auto-ID state ─────────────────────────────────────────────────────────────
+  let unitIdManuallyEdited = $state(false);
+  let groupIdManuallyEdited = $state(false);
+
+  function toKebab(s: string): string {
+    return s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  }
+
+  function onUnitLabelInput() {
+    if (!unitIdManuallyEdited) {
+      unitForm.id = toKebab(unitForm.label ?? '');
+    }
+  }
+
+  function onUnitIdInput() {
+    const val = unitForm.id ?? '';
+    if (val === '') {
+      unitIdManuallyEdited = false;
+      unitForm.id = toKebab(unitForm.label ?? '');
+    } else {
+      unitIdManuallyEdited = true;
+    }
+  }
+
+  function onGroupLabelInput() {
+    if (!groupIdManuallyEdited) {
+      groupForm.id = toKebab(groupForm.label ?? '');
+    }
+  }
+
+  function onGroupIdInput() {
+    const val = groupForm.id ?? '';
+    if (val === '') {
+      groupIdManuallyEdited = false;
+      groupForm.id = toKebab(groupForm.label ?? '');
+    } else {
+      groupIdManuallyEdited = true;
+    }
+  }
+
   // ── Drag-to-reorder state ─────────────────────────────────────────────────────
   let dragGroupId = $state<string | null>(null);      // group being dragged
   let dragOverGroupId = $state<string | null>(null);  // group being hovered over
@@ -311,6 +351,7 @@
     groupFormNew = false;
     unitFieldError = null;
     groupFieldError = null;
+    unitIdManuallyEdited = false;
     formError = null;
     formSuccess = null;
   }
@@ -325,6 +366,7 @@
     unitFormNew = false;
     unitFieldError = null;
     groupFieldError = null;
+    groupIdManuallyEdited = false;
     formError = null;
     formSuccess = null;
   }
@@ -731,12 +773,14 @@
       <label>
         ID {#if !unitFormNew}<small class="muted">(readonly)</small>{/if}
         <input type="text" bind:value={unitForm.id} readonly={!unitFormNew} placeholder="e.g. my-unit"
-          class:field-error={unitFieldError === 'unit-id'} />
+          class:field-error={unitFieldError === 'unit-id'}
+          oninput={() => unitFormNew && onUnitIdInput()} />
       </label>
       <label>
         Label
         <input type="text" bind:value={unitForm.label} placeholder="e.g. My Unit"
-          class:field-error={unitFieldError === 'unit-label'} />
+          class:field-error={unitFieldError === 'unit-label'}
+          oninput={() => unitFormNew && onUnitLabelInput()} />
       </label>
       <label>
         Label (plural)
@@ -781,12 +825,14 @@
       <label>
         ID {#if !groupFormNew}<small class="muted">(readonly)</small>{/if}
         <input type="text" bind:value={groupForm.id} readonly={!groupFormNew} placeholder="e.g. my-group"
-          class:field-error={groupFieldError === 'group-id'} />
+          class:field-error={groupFieldError === 'group-id'}
+          oninput={() => groupFormNew && onGroupIdInput()} />
       </label>
       <label>
         Label
         <input type="text" bind:value={groupForm.label} placeholder="e.g. My Group"
-          class:field-error={groupFieldError === 'group-label'} />
+          class:field-error={groupFieldError === 'group-label'}
+          oninput={() => groupFormNew && onGroupLabelInput()} />
       </label>
       <label>
         Base Unit