feat(badges): add manual one-off badge create modal

Two-step creation: POST event_person first, then event_badge linked to it.
Badge create route (event_person parent) pending backend fix — frontend is
ready and passing event_person_id + event_badge_template_id in payload.

- ae_events__event_person.ts: new create function (nested under event)
- ae_events_functions.ts: export create_ae_obj__event_person
- ae_comp__badge_create_form.svelte: modal form with live name preview,
  conditional display-name override, template selector (auto-selects when
  only one template), badge_type_code_li derived from selected template's
  badge_type_list JSON, two-step submit status labels
- +page.svelte: load template list via liveQuery, wire Create Badge button
  (edit_mode only), native <dialog> modal with backdrop, remote-first
  refresh on success

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/routes/events/[event_id]/(badges)/badges/+page.svelte

@@ -28,8 +28,32 @@ import { events_func } from '$lib/ae_events/ae_events_functions';
 
 import Comp_badge_search from './ae_comp__badge_search.svelte';
 import Comp_badge_obj_li from './ae_comp__badge_obj_li.svelte';
+import Comp_badge_create_form from './ae_comp__badge_create_form.svelte';
 
-import { LoaderCircle } from '@lucide/svelte';
+import { LoaderCircle, UserPlus } from '@lucide/svelte';
+
+// Load templates for this event so the create form can show the selector and
+// derive badge_type_code_li from whichever template the user picks.
+$effect(() => {
+    const event_id = $events_slct?.event_id;
+    if (!event_id) return;
+    events_func.load_ae_obj_li__event_badge_template({
+        api_cfg: $ae_api,
+        event_id,
+        log_lvl: 0
+    });
+});
+
+let lq__badge_template_li = $derived(
+    liveQuery(async () => {
+        const event_id = $events_slct?.event_id;
+        if (!event_id) return [];
+        return await db_events.badge_template
+            .where('event_id')
+            .equals(event_id)
+            .sortBy('name');
+    })
+);
 // *** Initialization & Store Guard ***
 // Ensure all search fields are initialized to prevent circular undefined triggers
 if ($events_loc.badges) {
@@ -52,6 +76,7 @@ if ($events_loc.badges) {
 // Variables
 let show_create_badge_modal: boolean = $state(false);
 let show_upload_badge_modal: boolean = $state(false);
+let create_badge_dialog: HTMLDialogElement | undefined = $state();
 
 let event_badge_id_li: Array<string> = $state([]);
 let search_debounce_timer: any = null;
@@ -362,6 +387,49 @@ async function handle_search_refresh(params: any) {
 <Comp_badge_search event_id={$events_slct?.event_id ?? ''} log_lvl={1}
 ></Comp_badge_search>
 
+{#if $ae_loc.edit_mode}
+    <div class="flex justify-end px-4">
+        <button
+            type="button"
+            class="btn btn-sm preset-tonal-primary border-primary-500 border"
+            onclick={() => {
+                show_create_badge_modal = true;
+                create_badge_dialog?.showModal();
+            }}>
+            <UserPlus size="1em" />
+            Create Badge
+        </button>
+    </div>
+{/if}
+
+<!-- Create Badge modal — native <dialog> for focus trap + backdrop.
+     Clicking the backdrop closes it. The form remounts each open so state is fresh. -->
+<dialog
+    bind:this={create_badge_dialog}
+    class="w-full max-w-lg rounded-xl border border-gray-200 bg-white p-0 shadow-2xl dark:border-gray-700 dark:bg-gray-900"
+    onclick={(e) => { if (e.target === create_badge_dialog) { create_badge_dialog?.close(); show_create_badge_modal = false; } }}
+    onclose={() => { show_create_badge_modal = false; }}>
+    <div class="border-surface-200-800 border-b px-5 py-3">
+        <h2 class="text-surface-900-50 text-base font-semibold">Create Badge</h2>
+    </div>
+    {#if show_create_badge_modal}
+        <Comp_badge_create_form
+            event_id={$events_slct?.event_id ?? ''}
+            template_li={$lq__badge_template_li ?? []}
+            onsuccess={() => {
+                create_badge_dialog?.close();
+                show_create_badge_modal = false;
+                // Trigger a remote-first refresh so the new badge appears in results
+                $events_loc.badges.search_version = ($events_loc.badges.search_version ?? 0) + 1;
+                $events_loc.badges.qry__remote_first = true;
+            }}
+            oncancel={() => {
+                create_badge_dialog?.close();
+                show_create_badge_modal = false;
+            }} />
+    {/if}
+</dialog>
+
 {#if $events_sess?.badges?.search_status === 'loading' && event_badge_id_li.length === 0}
     <div
         class="flex flex-col items-center justify-center p-10 text-center opacity-50">
@@ -371,3 +439,13 @@ async function handle_search_refresh(params: any) {
 {:else}
     <Comp_badge_obj_li {lq__event_badge_obj_li} log_lvl={1}></Comp_badge_obj_li>
 {/if}
+
+<style>
+dialog {
+    margin: auto;
+}
+dialog::backdrop {
+    background: rgb(0 0 0 / 0.55);
+    backdrop-filter: blur(3px);
+}
+</style>