From 6c6d683b9a55827cd1cf3096ae4703404e8448f4 Mon Sep 17 00:00:00 2001
From: Kevin Adametz <kevin.adametz@me.com>
Date: Fri, 29 May 2026 15:57:33 +0000
Subject: [PATCH] Display CMS Optimierungen 29-05-2026

- Mediathek: Video-Vorschaubilder statt Icons (FFmpeg-Thumbnails + Backfill-Command), Kategorie "Sonstiges"
- B2in Media-Picker zeigt alle Medientypen, Typ wird automatisch erkannt; Thumbnail-Preview vor allen Medien-URL-Feldern
- B2in Marke/Footer: Footer ein/aus, Logo+Claim frei positionierbar (Ecken) mit Constraints, separate Anzeige-Schalter
- Angebote-Modul dynamisch: kein Slide-Typ mehr, einheitliches Detail-Layout mit ein-/ausblendbaren Bloecken, Logo/Brand pro Slide, Streichpreis-Option
- Player: leere Module stoppen Endlosschleife, dynamische Layout-Anpassung bei verstecktem Footer/Header
- Fix: Script-Ladereihenfolge (Livewire vor Flux), entfernte stale public/flux/flux.js, Modal-Crash beim Aktualisieren behoben

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .env.example                                  |     6 +
 .../Commands/GenerateVideoThumbnails.php      |    59 +
 .../Api/DisplayPreviewController.php          |     4 +-
 .../Api/ModulePreviewController.php           |    11 +-
 app/Livewire/Admin/Cms/DisplayList.php        |    41 +
 app/Livewire/Admin/Cms/DisplayMediaPicker.php |     3 +-
 .../Admin/Cms/DisplayVersionEditor.php        |   194 +-
 app/Livewire/Admin/Cms/DisplayVersionList.php |    15 +-
 app/Livewire/Cabinet/QuickStatus.php          |    11 +-
 app/Models/Display.php                        |    16 +
 app/Models/DisplayMedia.php                   |     8 +
 app/Services/DisplayMediaService.php          |    77 +-
 app/Services/DisplayPlaylistConfigBuilder.php |    53 +-
 app/Support/DisplayModuleSettings.php         |    11 +-
 database/seeders/DatabaseSeeder.php           |     2 +
 database/seeders/DisplayVersionSeeder.php     |    16 +-
 database/seeders/TestDisplaySeeder.php        |    31 +
 dev/displays-11-05-2026/01-status.md          |    67 +-
 phpunit.xml                                   |     1 +
 public/_cabinet/display/index.html            |   303 +-
 public/flux/flux.js                           | 13171 ----------------
 .../components/layouts/app/header.blade.php   |     1 +
 .../components/layouts/app/sidebar.blade.php  |     4 +-
 .../components/layouts/auth/simple.blade.php  |    12 -
 .../components/layouts/auth/split.blade.php   |     1 +
 .../views/components/media-thumb.blade.php    |    27 +
 .../livewire/admin/cms/display-list.blade.php |    19 +-
 .../admin/cms/display-media-library.blade.php |    58 +-
 .../admin/cms/display-media-picker.blade.php  |    26 +-
 .../cms/display-version-editor.blade.php      |   244 +-
 .../admin/cms/display-version-list.blade.php  |     9 +
 .../partials/version-editor-offers.blade.php  |    43 +-
 .../version-editor-settings.blade.php         |    81 +-
 .../partials/version-editor-video.blade.php   |    73 +-
 .../livewire/admin/hubs/manage.blade.php      |   686 +-
 tests/Feature/DisplayListTest.php             |    57 +-
 tests/Feature/DisplayMediaTest.php            |   175 +
 tests/Feature/DisplayVersionApiTest.php       |    97 +-
 tests/Feature/DisplayVersionTest.php          |   389 +-
 tests/Feature/LayoutScriptOrderTest.php       |    41 +
 tests/Feature/LiveSiteReviewTest.php          |    10 +-
 tests/Feature/TestDisplaySeederTest.php       |    19 +
 42 files changed, 2267 insertions(+), 13905 deletions(-)
 create mode 100644 app/Console/Commands/GenerateVideoThumbnails.php
 create mode 100644 database/seeders/TestDisplaySeeder.php
 delete mode 100644 public/flux/flux.js
 create mode 100644 resources/views/components/media-thumb.blade.php
 create mode 100644 tests/Feature/LayoutScriptOrderTest.php
 create mode 100644 tests/Feature/TestDisplaySeederTest.php

diff --git a/.env.example b/.env.example
index ed229cd..4ffd7b0 100644
--- a/.env.example
+++ b/.env.example
@@ -64,6 +64,12 @@ AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
 
+# Display-Player URL (Basis-URL der Player-Seite ohne ?id=).
+# Live: https://cabinet.b2in.eu/display
+# Lokal: https://portal.b2in.test/_cabinet/display (Player-Seite + API laufen auf der Portal-Domain)
+# Ohne Wert greift der Produktions-Fallback aus config/display.php.
+DISPLAY_PLAYER_URL=https://portal.b2in.test/_cabinet/display
+
 # Cookie Consent & Google Analytics (acme/cookie-consent)
 # GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
 # GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXXX
diff --git a/app/Console/Commands/GenerateVideoThumbnails.php b/app/Console/Commands/GenerateVideoThumbnails.php
new file mode 100644
index 0000000..e325da0
--- /dev/null
+++ b/app/Console/Commands/GenerateVideoThumbnails.php
@@ -0,0 +1,59 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Console\Commands;
+
+use App\Models\DisplayMedia;
+use App\Services\DisplayMediaService;
+use Illuminate\Console\Command;
+
+class GenerateVideoThumbnails extends Command
+{
+    protected $signature = 'display-media:generate-video-thumbnails
+        {--force : Regenerate posters even if a thumbnail already exists}';
+
+    protected $description = 'Generate poster frames for uploaded display media videos using ffmpeg';
+
+    public function handle(DisplayMediaService $service): int
+    {
+        $query = DisplayMedia::query()
+            ->where('type', 'video')
+            ->where('source_type', 'upload');
+
+        if (! $this->option('force')) {
+            $query->whereNull('thumbnail_path');
+        }
+
+        $videos = $query->get();
+
+        if ($videos->isEmpty()) {
+            $this->info('Keine Videos zum Verarbeiten gefunden.');
+
+            return self::SUCCESS;
+        }
+
+        $this->info(sprintf('%d Video(s) werden verarbeitet...', $videos->count()));
+
+        $generated = 0;
+        $failed = 0;
+
+        foreach ($videos as $video) {
+            $thumbnailPath = $service->generateVideoThumbnail($video);
+
+            if ($thumbnailPath !== null) {
+                $video->update(['thumbnail_path' => $thumbnailPath]);
+                $this->line("  <info>✓</info> {$video->getDisplayName()}");
+                $generated++;
+            } else {
+                $this->warn("  ✗ {$video->getDisplayName()} (Poster konnte nicht erzeugt werden)");
+                $failed++;
+            }
+        }
+
+        $this->newLine();
+        $this->info(sprintf('Fertig: %d erzeugt, %d fehlgeschlagen.', $generated, $failed));
+
+        return self::SUCCESS;
+    }
+}
diff --git a/app/Http/Controllers/Api/DisplayPreviewController.php b/app/Http/Controllers/Api/DisplayPreviewController.php
index 05cf830..a907c8d 100644
--- a/app/Http/Controllers/Api/DisplayPreviewController.php
+++ b/app/Http/Controllers/Api/DisplayPreviewController.php
@@ -16,7 +16,9 @@ class DisplayPreviewController extends Controller
             ->where('preview_token', $token)
             ->firstOrFail();
 
-        return response()->file(public_path('_cabinet/display/index.html'));
+        return response()->file(public_path('_cabinet/display/index.html'), [
+            'Cache-Control' => 'no-cache, must-revalidate',
+        ]);
     }
 
     public function config(string $token, DisplayPlaylistConfigBuilder $configBuilder): JsonResponse
diff --git a/app/Http/Controllers/Api/ModulePreviewController.php b/app/Http/Controllers/Api/ModulePreviewController.php
index 560184a..bec62e4 100644
--- a/app/Http/Controllers/Api/ModulePreviewController.php
+++ b/app/Http/Controllers/Api/ModulePreviewController.php
@@ -13,14 +13,21 @@ class ModulePreviewController extends Controller
 {
     public function show(DisplayVersion $module): BinaryFileResponse
     {
-        return response()->file(public_path('_cabinet/display/index.html'));
+        return $this->playerResponse();
     }
 
     public function showItem(DisplayVersion $module, DisplayVersionItem $item): BinaryFileResponse
     {
         abort_unless($item->display_version_id === $module->id, 404);
 
-        return response()->file(public_path('_cabinet/display/index.html'));
+        return $this->playerResponse();
+    }
+
+    private function playerResponse(): BinaryFileResponse
+    {
+        return response()->file(public_path('_cabinet/display/index.html'), [
+            'Cache-Control' => 'no-cache, must-revalidate',
+        ]);
     }
 
     public function config(DisplayVersion $module, DisplayPlaylistConfigBuilder $configBuilder): JsonResponse
diff --git a/app/Livewire/Admin/Cms/DisplayList.php b/app/Livewire/Admin/Cms/DisplayList.php
index 1a32b5c..698e540 100644
--- a/app/Livewire/Admin/Cms/DisplayList.php
+++ b/app/Livewire/Admin/Cms/DisplayList.php
@@ -30,6 +30,9 @@ class DisplayList extends Component
 
     public $addVersionSelect = null;
 
+    /** @var array<int> */
+    public $versionsToAdd = [];
+
     public $editingPlaylistStatus = DisplayPlaylist::STATUS_PUBLISHED;
 
     public ?string $draftPreviewToken = null;
@@ -75,6 +78,20 @@ class DisplayList extends Component
         $this->persistDraftPreviewIfNeeded();
     }
 
+    public function addSelectedVersions(): void
+    {
+        foreach ($this->versionsToAdd as $versionId) {
+            $id = (int) $versionId;
+
+            if ($id && ! in_array($id, $this->selectedVersionIds, true)) {
+                $this->selectedVersionIds[] = $id;
+            }
+        }
+
+        $this->versionsToAdd = [];
+        $this->persistDraftPreviewIfNeeded();
+    }
+
     private function firstAvailableVersionId(): ?int
     {
         return DisplayVersion::active()
@@ -175,10 +192,31 @@ class DisplayList extends Component
         }
 
         $display->draftPlaylist->delete();
+        $display->clearPreviewToken();
 
         session()->flash('success', 'Entwurf wurde verworfen.');
     }
 
+    public function rotatePreviewToken(int $displayId): void
+    {
+        $display = Display::with('draftPlaylist')->findOrFail($displayId);
+
+        if (! $display->draftPlaylist) {
+            session()->flash('success', 'Für dieses Display gibt es keinen Entwurf.');
+
+            return;
+        }
+
+        $display->rotatePreviewToken();
+
+        if ($this->displayId === $display->id && $this->editingPlaylistStatus === DisplayPlaylist::STATUS_DRAFT) {
+            $this->draftPreviewToken = $display->preview_token;
+            $this->previewFrameRefreshCounter++;
+        }
+
+        session()->flash('success', 'Vorschau-Link wurde neu erzeugt. Der alte Link ist jetzt ungültig.');
+    }
+
     public function publishDraft(int $displayId): void
     {
         $display = Display::with(['draftPlaylist.modules'])->findOrFail($displayId);
@@ -201,6 +239,8 @@ class DisplayList extends Component
             return $display->draftPlaylist->fresh('modules');
         });
 
+        $display->clearPreviewToken();
+
         session()->flash('success', 'Entwurf wurde veröffentlicht.');
     }
 
@@ -314,6 +354,7 @@ class DisplayList extends Component
         $this->displayIsActive = true;
         $this->displayIsTest = false;
         $this->addVersionSelect = null;
+        $this->versionsToAdd = [];
         $this->editingPlaylistStatus = DisplayPlaylist::STATUS_PUBLISHED;
         $this->draftPreviewToken = null;
         $this->previewFrameRefreshCounter = 0;
diff --git a/app/Livewire/Admin/Cms/DisplayMediaPicker.php b/app/Livewire/Admin/Cms/DisplayMediaPicker.php
index 1c56870..27b2b90 100644
--- a/app/Livewire/Admin/Cms/DisplayMediaPicker.php
+++ b/app/Livewire/Admin/Cms/DisplayMediaPicker.php
@@ -117,8 +117,7 @@ class DisplayMediaPicker extends Component
             ->active()
             ->when($this->type === 'image', fn ($q) => $q->images())
             ->when($this->type === 'video', fn ($q) => $q->videos())
-            ->when($this->search, fn ($q) => $q->where('filename', 'like', "%{$this->search}%")
-                ->orWhere('title', 'like', "%{$this->search}%"))
+            ->when($this->search, fn ($q) => $q->search($this->search))
             ->orderByDesc('created_at')
             ->paginate(18);
     }
diff --git a/app/Livewire/Admin/Cms/DisplayVersionEditor.php b/app/Livewire/Admin/Cms/DisplayVersionEditor.php
index 37d5561..ac5a318 100644
--- a/app/Livewire/Admin/Cms/DisplayVersionEditor.php
+++ b/app/Livewire/Admin/Cms/DisplayVersionEditor.php
@@ -3,10 +3,10 @@
 namespace App\Livewire\Admin\Cms;
 
 use App\Enums\DisplayVersionType;
+use App\Models\DisplayMedia;
 use App\Models\DisplayVersion;
 use App\Models\DisplayVersionItem;
 use App\Support\DisplayModuleSettings;
-use Illuminate\Support\Facades\File;
 use Livewire\Attributes\On;
 use Livewire\Component;
 
@@ -56,8 +56,12 @@ class DisplayVersionEditor extends Component
 
     public bool $mediaIsActive = true;
 
-    // Offers: Slide fields
-    public string $slideType = 'product-hero';
+    // Offers: Slide fields (single dynamic detail layout)
+    public bool $slideShowLogo = true;
+
+    public string $slideLogoUrl = '';
+
+    public string $slideBrandText = '';
 
     public int $slideDuration = 8000;
 
@@ -65,30 +69,46 @@ class DisplayVersionEditor extends Component
 
     public string $slideBadge = '';
 
+    public bool $slideShowBadge = true;
+
     public string $slideEyebrow = '';
 
+    public bool $slideShowEyebrow = true;
+
     public string $slideTitle = '';
 
     public string $slideSubline = '';
 
+    public bool $slideShowSubline = false;
+
     public string $slidePrice = '';
 
     public string $slideOriginalPrice = '';
 
+    public bool $slideStrikeOriginalPrice = false;
+
     public string $slideTagText = '';
 
+    public bool $slideShowPrice = false;
+
     /** @var array<string> */
     public array $slideBullets = [];
 
+    public bool $slideShowBullets = true;
+
     public string $slideDisclaimer = '';
 
+    public bool $slideShowDisclaimer = false;
+
     public string $slideQrUrl = '';
 
     public string $slideQrTitle = '';
 
+    public bool $slideShowQr = true;
+
     public string $slideContact = '';
 
-    public bool $slideShowBrandText = false;
+    public bool $slideShowContact = true;
 
     public string $slideBrandTagline = '';
 
@@ -99,32 +119,25 @@ class DisplayVersionEditor extends Component
 
     public array $settings = [];
 
-    /** @var array<string> */
-    public array $availableVideos = [];
-
     public int $previewFrameRefreshCounter = 0;
 
+    /** @var array<string> */
+    public const BRAND_POSITIONS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+
     public function mount(DisplayVersion $displayVersion): void
     {
         $this->version = $displayVersion;
         $this->versionName = $displayVersion->name;
         $this->settings = $this->settingsWithDefaults();
-
-        if ($this->version->type === DisplayVersionType::VideoDisplay) {
-            $this->loadAvailableVideos();
-        }
+        $this->normalizeBrandPositions();
     }
 
-    public function loadAvailableVideos(): void
+    public function updated(string $name): void
     {
-        $assetsPath = public_path('_cabinet/assets');
-
-        if (File::exists($assetsPath)) {
-            $this->availableVideos = collect(File::files($assetsPath))
-                ->map(fn ($file) => $file->getFilename())
-                ->filter(fn ($filename) => in_array(pathinfo($filename, PATHINFO_EXTENSION), ['mp4', 'webm', 'mov']))
-                ->values()
-                ->toArray();
+        if (str_starts_with($name, 'settings.show_footer')
+            || str_starts_with($name, 'settings.logo_position')
+            || str_starts_with($name, 'settings.claim_position')) {
+            $this->normalizeBrandPositions();
         }
     }
 
@@ -160,12 +173,56 @@ class DisplayVersionEditor extends Component
 
     public function saveSettings(): void
     {
+        $this->normalizeBrandPositions();
         $this->version->update(['settings' => $this->settings]);
         $this->showSettingsModal = false;
         $this->refreshModulePreview();
         session()->flash('success', 'Einstellungen gespeichert!');
     }
 
+    /**
+     * Keep the B2in logo/claim corners consistent:
+     * - bottom corners are only valid while the footer is hidden,
+     * - the claim can never sit in the same corner as the logo.
+     */
+    private function normalizeBrandPositions(): void
+    {
+        if ($this->version->type !== DisplayVersionType::B2in) {
+            return;
+        }
+
+        $footerShown = ($this->settings['show_footer'] ?? true) !== false;
+        $allowed = $footerShown ? ['top-left', 'top-right'] : self::BRAND_POSITIONS;
+
+        $logo = $this->settings['logo_position'] ?? 'top-left';
+        $claim = $this->settings['claim_position'] ?? 'top-right';
+
+        $logo = $this->moveIntoAllowed($logo, $allowed);
+        $claim = $this->moveIntoAllowed($claim, $allowed);
+
+        if ($claim === $logo) {
+            $claim = collect($allowed)->first(fn (string $position) => $position !== $logo) ?? $claim;
+        }
+
+        $this->settings['logo_position'] = $logo;
+        $this->settings['claim_position'] = $claim;
+    }
+
+    /**
+     * @param  array<string>  $allowed
+     */
+    private function moveIntoAllowed(string $position, array $allowed): string
+    {
+        if (in_array($position, $allowed, true)) {
+            return $position;
+        }
+
+        // Pull bottom corners up to the matching top corner when forbidden.
+        $fallback = str_replace('bottom-', 'top-', $position);
+
+        return in_array($fallback, $allowed, true) ? $fallback : ($allowed[0] ?? 'top-left');
+    }
+
     // ========================================
     // ITEM CRUD
     // ========================================
@@ -276,10 +333,20 @@ class DisplayVersionEditor extends Component
             'videoFilename' => $this->videoFilename = $url,
             'mediaUrl' => $this->mediaUrl = $url,
             'slideImageUrl' => $this->slideImageUrl = $url,
+            'slideLogoUrl' => $this->slideLogoUrl = $url,
             'settings.header_logo_url' => $this->settings['header_logo_url'] = $url,
-            'settings.logo_url' => $this->settings['logo_url'] = $url,
             default => null,
         };
+
+        // The media type for a B2in playlist item is derived from the chosen
+        // media – the type selector in the form is only an informational hint.
+        if ($field === 'mediaUrl' && $mediaId) {
+            $media = DisplayMedia::find($mediaId);
+
+            if ($media) {
+                $this->mediaType = $media->isVideo() ? 'video' : 'image';
+            }
+        }
     }
 
     public function addBullet(): void
@@ -306,33 +373,43 @@ class DisplayVersionEditor extends Component
     private function loadItemContent(DisplayVersionItem $item): void
     {
         $content = $item->content;
+        $isActive = (bool) $item->is_active;
 
         match ($item->item_type) {
-            'video' => $this->loadVideoContent($content),
-            'footer' => $this->loadFooterContent($content),
-            'media' => $this->loadMediaContent($content),
-            'slide' => $this->loadSlideContent($content),
+            'video' => $this->loadVideoContent($content, $isActive),
+            'footer' => $this->loadFooterContent($content, $isActive),
+            'media' => $this->loadMediaContent($content, $isActive),
+            'slide' => $this->loadSlideContent($content, $isActive),
             default => null,
         };
     }
 
-    private function loadVideoContent(array $content): void
+    /**
+     * @param  array<string, mixed>  $content
+     */
+    private function loadVideoContent(array $content, bool $isActive): void
     {
         $this->videoFilename = $content['filename'] ?? '';
         $this->videoTitle = $content['title'] ?? '';
         $this->videoPosition = $content['position'] ?? 25;
-        $this->videoIsActive = true;
+        $this->videoIsActive = $isActive;
     }
 
-    private function loadFooterContent(array $content): void
+    /**
+     * @param  array<string, mixed>  $content
+     */
+    private function loadFooterContent(array $content, bool $isActive): void
     {
         $this->footerHeadline = $content['headline'] ?? '';
         $this->footerSubline = $content['subline'] ?? '';
         $this->footerUrl = $content['url'] ?? '';
-        $this->footerIsActive = true;
+        $this->footerIsActive = $isActive;
     }
 
-    private function loadMediaContent(array $content): void
+    /**
+     * @param  array<string, mixed>  $content
+     */
+    private function loadMediaContent(array $content, bool $isActive): void
     {
         $this->mediaType = $content['media_type'] ?? 'image';
         $this->mediaCategory = $content['category'] ?? 'immobilien';
@@ -340,12 +417,17 @@ class DisplayVersionEditor extends Component
         $this->mediaHeadline = $content['headline'] ?? '';
         $this->mediaSubline = $content['subline'] ?? '';
         $this->mediaDuration = $content['duration_seconds'] ?? 10;
-        $this->mediaIsActive = true;
+        $this->mediaIsActive = $isActive;
     }
 
-    private function loadSlideContent(array $content): void
+    /**
+     * @param  array<string, mixed>  $content
+     */
+    private function loadSlideContent(array $content, bool $isActive): void
     {
-        $this->slideType = $content['type'] ?? 'product-hero';
+        $this->slideShowLogo = $content['show_logo'] ?? true;
+        $this->slideLogoUrl = $content['logo_url'] ?? '';
+        $this->slideBrandText = $content['brand_text'] ?? '';
         $this->slideDuration = $content['duration'] ?? 8000;
         $this->slideImageUrl = $content['image_url'] ?? '';
         $this->slideBadge = $content['badge_text'] ?? '';
@@ -354,15 +436,26 @@ class DisplayVersionEditor extends Component
         $this->slideSubline = $content['subline'] ?? '';
         $this->slidePrice = $content['price'] ?? '';
         $this->slideOriginalPrice = $content['original_price'] ?? '';
+        $this->slideStrikeOriginalPrice = $content['strike_original_price'] ?? false;
         $this->slideTagText = $content['tag_text'] ?? '';
         $this->slideBullets = $content['bullets'] ?? [];
         $this->slideDisclaimer = $content['disclaimer'] ?? '';
         $this->slideQrUrl = $content['qr_url'] ?? '';
         $this->slideQrTitle = $content['qr_title'] ?? '';
         $this->slideContact = $content['contact'] ?? '';
-        $this->slideShowBrandText = $content['show_brand_text'] ?? false;
         $this->slideBrandTagline = $content['brand_tagline'] ?? '';
-        $this->slideIsActive = true;
+        $this->slideIsActive = $isActive;
+
+        // Show flags fall back to "is there content?" so slides created before
+        // the dynamic detail layout keep rendering exactly as they did.
+        $this->slideShowBadge = $content['show_badge'] ?? ($content['badge_text'] ?? '') !== '';
+        $this->slideShowEyebrow = $content['show_eyebrow'] ?? ($content['eyebrow'] ?? '') !== '';
+        $this->slideShowSubline = $content['show_subline'] ?? ($content['subline'] ?? '') !== '';
+        $this->slideShowBullets = $content['show_bullets'] ?? ! empty($content['bullets']);
+        $this->slideShowPrice = $content['show_price'] ?? ($content['price'] ?? '') !== '';
+        $this->slideShowDisclaimer = $content['show_disclaimer'] ?? ($content['disclaimer'] ?? '') !== '';
+        $this->slideShowQr = $content['show_qr'] ?? ($content['qr_url'] ?? '') !== '';
+        $this->slideShowContact = $content['show_contact'] ?? ($content['contact'] ?? '') !== '';
     }
 
     /**
@@ -390,22 +483,33 @@ class DisplayVersionEditor extends Component
                 'duration_seconds' => $this->mediaDuration,
             ],
             'slide' => [
-                'type' => $this->slideType,
+                'type' => 'detail',
+                'show_logo' => $this->slideShowLogo,
+                'logo_url' => $this->slideLogoUrl,
+                'brand_text' => $this->slideBrandText,
                 'duration' => $this->slideDuration,
                 'image_url' => $this->slideImageUrl,
                 'badge_text' => $this->slideBadge,
+                'show_badge' => $this->slideShowBadge,
                 'eyebrow' => $this->slideEyebrow,
+                'show_eyebrow' => $this->slideShowEyebrow,
                 'title' => $this->slideTitle,
                 'subline' => $this->slideSubline,
+                'show_subline' => $this->slideShowSubline,
                 'price' => $this->slidePrice,
                 'original_price' => $this->slideOriginalPrice,
+                'strike_original_price' => $this->slideStrikeOriginalPrice,
                 'tag_text' => $this->slideTagText,
-                'bullets' => $this->slideBullets,
+                'show_price' => $this->slideShowPrice,
+                'bullets' => array_values(array_filter($this->slideBullets, fn (string $bullet) => trim($bullet) !== '')),
+                'show_bullets' => $this->slideShowBullets,
                 'disclaimer' => $this->slideDisclaimer,
+                'show_disclaimer' => $this->slideShowDisclaimer,
                 'qr_url' => $this->slideQrUrl,
                 'qr_title' => $this->slideQrTitle,
+                'show_qr' => $this->slideShowQr,
                 'contact' => $this->slideContact,
-                'show_brand_text' => $this->slideShowBrandText,
+                'show_contact' => $this->slideShowContact,
                 'brand_tagline' => $this->slideBrandTagline,
             ],
             default => [],
@@ -451,22 +555,32 @@ class DisplayVersionEditor extends Component
         $this->mediaSubline = '';
         $this->mediaDuration = 10;
         $this->mediaIsActive = true;
-        $this->slideType = 'product-hero';
+        $this->slideShowLogo = true;
+        $this->slideLogoUrl = '';
+        $this->slideBrandText = '';
         $this->slideDuration = 8000;
         $this->slideImageUrl = '';
         $this->slideBadge = '';
+        $this->slideShowBadge = true;
         $this->slideEyebrow = '';
+        $this->slideShowEyebrow = true;
         $this->slideTitle = '';
         $this->slideSubline = '';
+        $this->slideShowSubline = false;
         $this->slidePrice = '';
         $this->slideOriginalPrice = '';
+        $this->slideStrikeOriginalPrice = false;
         $this->slideTagText = '';
+        $this->slideShowPrice = false;
         $this->slideBullets = [];
+        $this->slideShowBullets = true;
         $this->slideDisclaimer = '';
+        $this->slideShowDisclaimer = false;
         $this->slideQrUrl = '';
         $this->slideQrTitle = '';
+        $this->slideShowQr = true;
         $this->slideContact = '';
-        $this->slideShowBrandText = false;
+        $this->slideShowContact = true;
         $this->slideBrandTagline = '';
         $this->slideIsActive = true;
     }
diff --git a/app/Livewire/Admin/Cms/DisplayVersionList.php b/app/Livewire/Admin/Cms/DisplayVersionList.php
index dad96a1..80dd21e 100644
--- a/app/Livewire/Admin/Cms/DisplayVersionList.php
+++ b/app/Livewire/Admin/Cms/DisplayVersionList.php
@@ -54,7 +54,20 @@ class DisplayVersionList extends Component
 
     public function deleteVersion(int $id): void
     {
-        $version = DisplayVersion::findOrFail($id);
+        $version = DisplayVersion::query()
+            ->withCount([
+                'playlistItems as displays_count' => fn ($query) => $query
+                    ->join('display_playlists', 'display_playlist_items.display_playlist_id', '=', 'display_playlists.id')
+                    ->select(DB::raw('count(distinct display_playlists.display_id)')),
+            ])
+            ->findOrFail($id);
+
+        if ($version->displays_count > 0) {
+            session()->flash('error', 'Modul "'.$version->name.'" wird noch von '.$version->displays_count.' Display(s) verwendet und kann nicht gelöscht werden. Entfernen Sie es zuerst aus den betroffenen Bespielungen.');
+
+            return;
+        }
+
         $name = $version->name;
         $version->delete();
 
diff --git a/app/Livewire/Cabinet/QuickStatus.php b/app/Livewire/Cabinet/QuickStatus.php
index 47dcd6a..a97410d 100644
--- a/app/Livewire/Cabinet/QuickStatus.php
+++ b/app/Livewire/Cabinet/QuickStatus.php
@@ -45,10 +45,10 @@ class QuickStatus extends Component
         ],
     ];
 
-    public function mount(): void
+    public function mount(?string $k = null): void
     {
         $validKey = config('domains.cabinet_status_key');
-        $key = request()->get('key');
+        $key = $k ?? request()->query('k');
         if (! $validKey || $key !== $validKey) {
             $this->authorized = false;
 
@@ -92,6 +92,13 @@ class QuickStatus extends Component
             'noticeSubtext.max' => 'Subtext max. 80 Zeichen.',
         ]);
 
+        $showsNotice = in_array($this->storeStatus, ['notice', 'warning'], true);
+
+        if (! $showsNotice) {
+            $this->noticeHeadline = '';
+            $this->noticeSubtext = '';
+        }
+
         CabinetTabletSetting::current()->update([
             'store_status' => $this->storeStatus,
             'notice_headline' => $this->noticeHeadline ?: null,
diff --git a/app/Models/Display.php b/app/Models/Display.php
index f73082a..73d705d 100644
--- a/app/Models/Display.php
+++ b/app/Models/Display.php
@@ -64,4 +64,20 @@ class Display extends Model
 
         return $this->preview_token;
     }
+
+    public function rotatePreviewToken(): string
+    {
+        $this->preview_token = Str::random(40);
+        $this->save();
+
+        return $this->preview_token;
+    }
+
+    public function clearPreviewToken(): void
+    {
+        if ($this->preview_token !== null) {
+            $this->preview_token = null;
+            $this->save();
+        }
+    }
 }
diff --git a/app/Models/DisplayMedia.php b/app/Models/DisplayMedia.php
index 3cf2397..eb91036 100644
--- a/app/Models/DisplayMedia.php
+++ b/app/Models/DisplayMedia.php
@@ -150,4 +150,12 @@ class DisplayMedia extends Model
     {
         return $query->where('collection', $collection);
     }
+
+    public function scopeSearch(Builder $query, string $term): Builder
+    {
+        return $query->where(function (Builder $query) use ($term): void {
+            $query->where('filename', 'like', "%{$term}%")
+                ->orWhere('title', 'like', "%{$term}%");
+        });
+    }
 }
diff --git a/app/Services/DisplayMediaService.php b/app/Services/DisplayMediaService.php
index bc08115..f62c459 100644
--- a/app/Services/DisplayMediaService.php
+++ b/app/Services/DisplayMediaService.php
@@ -7,6 +7,7 @@ use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Str;
+use Symfony\Component\Process\Process;
 
 class DisplayMediaService
 {
@@ -34,7 +35,7 @@ class DisplayMediaService
             }
         }
 
-        return DisplayMedia::create([
+        $media = DisplayMedia::create([
             'filename' => $filename,
             'disk' => 'public',
             'path' => $relativePath,
@@ -45,6 +46,80 @@ class DisplayMediaService
             'collection' => $collection,
             'metadata' => ! empty($metadata) ? $metadata : null,
         ]);
+
+        if ($type === 'video') {
+            $thumbnailPath = $this->generateVideoThumbnail($media);
+
+            if ($thumbnailPath !== null) {
+                $media->update(['thumbnail_path' => $thumbnailPath]);
+            }
+        }
+
+        return $media;
+    }
+
+    /**
+     * Generate a poster frame for an uploaded video using ffmpeg.
+     *
+     * Returns the relative thumbnail path on the media's disk, or null when
+     * generation is not possible (e.g. ffmpeg missing or an unreadable file).
+     */
+    public function generateVideoThumbnail(DisplayMedia $media): ?string
+    {
+        if (! $media->isVideo() || ! $media->isUpload() || ! $media->path) {
+            return null;
+        }
+
+        $disk = Storage::disk($media->disk);
+        $videoPath = $disk->path($media->path);
+
+        if (! is_file($videoPath)) {
+            return null;
+        }
+
+        $thumbnailRelativePath = preg_replace('/\.[^.\/]+$/', '', $media->path).'-poster.jpg';
+        $thumbnailPath = $disk->path($thumbnailRelativePath);
+
+        if (! is_dir(dirname($thumbnailPath))) {
+            @mkdir(dirname($thumbnailPath), 0755, true);
+        }
+
+        // Try a frame ~1s in first (avoids black intro frames); fall back to
+        // the very first frame for clips shorter than one second.
+        foreach (['1', '0'] as $seekSeconds) {
+            if ($this->extractFrame($videoPath, $thumbnailPath, $seekSeconds) && filesize($thumbnailPath) > 0) {
+                return $thumbnailRelativePath;
+            }
+        }
+
+        if (is_file($thumbnailPath)) {
+            @unlink($thumbnailPath);
+        }
+
+        return null;
+    }
+
+    private function extractFrame(string $videoPath, string $thumbnailPath, string $seekSeconds): bool
+    {
+        $process = new Process([
+            'ffmpeg',
+            '-y',
+            '-ss', $seekSeconds,
+            '-i', $videoPath,
+            '-frames:v', '1',
+            '-vf', 'scale=640:-2',
+            '-q:v', '3',
+            $thumbnailPath,
+        ]);
+        $process->setTimeout(60);
+
+        try {
+            $process->run();
+        } catch (\Throwable) {
+            return false;
+        }
+
+        return $process->isSuccessful() && is_file($thumbnailPath);
     }
 
     /**
diff --git a/app/Services/DisplayPlaylistConfigBuilder.php b/app/Services/DisplayPlaylistConfigBuilder.php
index 2163ed8..46c7414 100644
--- a/app/Services/DisplayPlaylistConfigBuilder.php
+++ b/app/Services/DisplayPlaylistConfigBuilder.php
@@ -143,25 +143,40 @@ class DisplayPlaylistConfigBuilder
      */
     private function offersData(DisplayVersion $module, Collection $items): array
     {
-        $slides = $items->where('item_type', 'slide')->values()->map(fn ($item) => [
-            'type' => $item->content['type'] ?? 'product-hero',
-            'duration' => $item->content['duration'] ?? 8000,
-            'image_url' => $item->content['image_url'] ?? '',
-            'badge_text' => $item->content['badge_text'] ?? '',
-            'eyebrow' => $item->content['eyebrow'] ?? '',
-            'title' => $item->content['title'] ?? '',
-            'subline' => $item->content['subline'] ?? '',
-            'price' => $item->content['price'] ?? '',
-            'original_price' => $item->content['original_price'] ?? '',
-            'tag_text' => $item->content['tag_text'] ?? '',
-            'bullets' => $item->content['bullets'] ?? [],
-            'disclaimer' => $item->content['disclaimer'] ?? '',
-            'qr_url' => $item->content['qr_url'] ?? '',
-            'qr_title' => $item->content['qr_title'] ?? '',
-            'contact' => $item->content['contact'] ?? '',
-            'show_brand_text' => $item->content['show_brand_text'] ?? false,
-            'brand_tagline' => $item->content['brand_tagline'] ?? '',
-        ]);
+        $slides = $items->where('item_type', 'slide')->values()->map(function ($item) {
+            $content = $item->content;
+
+            return [
+                'type' => $content['type'] ?? 'detail',
+                'show_logo' => $content['show_logo'] ?? true,
+                'logo_url' => $content['logo_url'] ?? '',
+                'brand_text' => $content['brand_text'] ?? '',
+                'duration' => $content['duration'] ?? 8000,
+                'image_url' => $content['image_url'] ?? '',
+                'badge_text' => $content['badge_text'] ?? '',
+                'show_badge' => $content['show_badge'] ?? ($content['badge_text'] ?? '') !== '',
+                'eyebrow' => $content['eyebrow'] ?? '',
+                'show_eyebrow' => $content['show_eyebrow'] ?? ($content['eyebrow'] ?? '') !== '',
+                'title' => $content['title'] ?? '',
+                'subline' => $content['subline'] ?? '',
+                'show_subline' => $content['show_subline'] ?? ($content['subline'] ?? '') !== '',
+                'price' => $content['price'] ?? '',
+                'original_price' => $content['original_price'] ?? '',
+                'strike_original_price' => $content['strike_original_price'] ?? false,
+                'tag_text' => $content['tag_text'] ?? '',
+                'show_price' => $content['show_price'] ?? ($content['price'] ?? '') !== '',
+                'bullets' => $content['bullets'] ?? [],
+                'show_bullets' => $content['show_bullets'] ?? ! empty($content['bullets']),
+                'disclaimer' => $content['disclaimer'] ?? '',
+                'show_disclaimer' => $content['show_disclaimer'] ?? ($content['disclaimer'] ?? '') !== '',
+                'qr_url' => $content['qr_url'] ?? '',
+                'qr_title' => $content['qr_title'] ?? '',
+                'show_qr' => $content['show_qr'] ?? ($content['qr_url'] ?? '') !== '',
+                'contact' => $content['contact'] ?? '',
+                'show_contact' => $content['show_contact'] ?? ($content['contact'] ?? '') !== '',
+                'brand_tagline' => $content['brand_tagline'] ?? '',
+            ];
+        });
 
         return [
             'type' => 'offers',
diff --git a/app/Support/DisplayModuleSettings.php b/app/Support/DisplayModuleSettings.php
index fc3bc1d..2fcad41 100644
--- a/app/Support/DisplayModuleSettings.php
+++ b/app/Support/DisplayModuleSettings.php
@@ -21,6 +21,11 @@ class DisplayModuleSettings
                 'theme' => 'dark',
                 'header_logo_url' => '../assets/b2in-logo-positive.svg',
                 'header_claim' => 'Connecting Design & Property',
+                'logo_position' => 'top-left',
+                'claim_position' => 'top-right',
+                'show_logo' => true,
+                'show_claim' => true,
+                'show_footer' => true,
                 'footer_url' => 'B2in.eu',
                 'footer_name' => '',
                 'footer_prefix' => 'by',
@@ -35,12 +40,6 @@ class DisplayModuleSettings
             ],
             DisplayVersionType::Offers->value => [
                 'loop' => true,
-                'logo_url' => '../logo-cabinet-300.png',
-                'brand_text' => 'Bielefeld',
-                'footer_claim' => '',
-                'footer_url' => '',
-                'qr_default_title' => 'Kontakt',
-                'qr_subtitle' => 'QR scannen',
                 'transition' => [
                     'type' => 'fade',
                     'duration' => 600,
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 0f83fd4..b40ae54 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -21,5 +21,7 @@ class DatabaseSeeder extends Seeder
             'email' => 'kevin.adametz@me.com',
             'password' => Hash::make('xunfew-0Jygjy-minnyt'),
         ]);
+
+        $this->call(TestDisplaySeeder::class);
     }
 }
diff --git a/database/seeders/DisplayVersionSeeder.php b/database/seeders/DisplayVersionSeeder.php
index d6a3357..4d27410 100644
--- a/database/seeders/DisplayVersionSeeder.php
+++ b/database/seeders/DisplayVersionSeeder.php
@@ -169,7 +169,9 @@ class DisplayVersionSeeder extends Seeder
                 'qr_url' => 'https://cabinet-bielefeld.de',
                 'qr_title' => 'Kontakt',
                 'contact' => "0521 98620100\nTel. oder WhatsApp",
-                'show_brand_text' => true,
+                'show_logo' => true,
+                'logo_url' => '../logo-cabinet-300.png',
+                'brand_text' => 'Bielefeld',
                 'brand_tagline' => "Planung • Beratung\nLieferung & Montage",
             ],
             [
@@ -188,7 +190,9 @@ class DisplayVersionSeeder extends Seeder
                 'qr_url' => 'https://cabinet-bielefeld.de',
                 'qr_title' => 'Reservieren',
                 'contact' => "0521 98620100\nTel. oder WhatsApp",
-                'show_brand_text' => false,
+                'show_logo' => true,
+                'logo_url' => '../logo-cabinet-300.png',
+                'brand_text' => '',
                 'brand_tagline' => '',
             ],
             [
@@ -212,7 +216,9 @@ class DisplayVersionSeeder extends Seeder
                 'qr_url' => 'https://cabinet-bielefeld.de',
                 'qr_title' => 'Reservieren',
                 'contact' => "0521 98620100\nTel. oder WhatsApp",
-                'show_brand_text' => false,
+                'show_logo' => true,
+                'logo_url' => '../logo-cabinet-300.png',
+                'brand_text' => '',
                 'brand_tagline' => '',
             ],
             [
@@ -231,7 +237,9 @@ class DisplayVersionSeeder extends Seeder
                 'qr_url' => 'https://cabinet-bielefeld.de',
                 'qr_title' => 'Sichern',
                 'contact' => "0521 98620100\nTel. oder WhatsApp",
-                'show_brand_text' => false,
+                'show_logo' => true,
+                'logo_url' => '../logo-cabinet-300.png',
+                'brand_text' => '',
                 'brand_tagline' => '',
             ],
         ];
diff --git a/database/seeders/TestDisplaySeeder.php b/database/seeders/TestDisplaySeeder.php
new file mode 100644
index 0000000..8bc6729
--- /dev/null
+++ b/database/seeders/TestDisplaySeeder.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\Display;
+use Illuminate\Database\Seeder;
+
+class TestDisplaySeeder extends Seeder
+{
+    /**
+     * Stellt sicher, dass genau ein Test-Display existiert (Konzept §10.1).
+     * Idempotent: legt nur an, wenn noch kein Test-Display vorhanden ist.
+     */
+    public function run(): void
+    {
+        if (Display::query()->where('is_test', true)->exists()) {
+            $this->command?->info('Test-Display existiert bereits – übersprungen.');
+
+            return;
+        }
+
+        Display::query()->create([
+            'name' => 'Test-Display',
+            'location' => 'Vorschau / Test',
+            'is_active' => true,
+            'is_test' => true,
+        ]);
+
+        $this->command?->info('Test-Display angelegt.');
+    }
+}
diff --git a/dev/displays-11-05-2026/01-status.md b/dev/displays-11-05-2026/01-status.md
index 8389a3d..16628d7 100644
--- a/dev/displays-11-05-2026/01-status.md
+++ b/dev/displays-11-05-2026/01-status.md
@@ -13,7 +13,8 @@
 | **4** | Admin-UI: Entwurf-Editor (Iframe-Vorschau) | ✅ 12.05.2026 |
 | **5** | Modul-Editor: 3-stufige Vorschau | ✅ 12.05.2026 |
 | **6** | Umbenennung Versionen → Module + Onboarding | ✅ 12.05.2026 |
-| **7** | Aufräumen + alte Pivot-Tabelle entfernen | ⏳ offen |
+| **7** | Aufräumen + alte Pivot-Tabelle entfernen | ✅ 13.05.2026 |
+| **8** | Review: Fehler / Optimierungen / Erweiterungen | 🟡 29.05.2026 (Befundaufnahme) |
 
 Legende: ✅ fertig · 🟡 in Arbeit · ⏳ offen · ⛔ blockiert
 
@@ -308,3 +309,67 @@ Umsetzung:
 - Admin-Iframes laden per `loading="lazy"` verzögert, um die parallelen Player-Vorschauen leichter zu halten
 - Video-Display-Items zeigen im Editor sichtbar an, ob die Quelle aus der Mediathek oder aus einem Legacy-Dateinamen kommt
 
+---
+
+## Phase 8 – Review 29.05.2026 (Befundaufnahme)
+
+Geprüft wurden die drei Navigationspunkte:
+- `admin/cms/display-media` → Volt `admin.cms.display-media-library`
+- `admin/cms/display-modules` → `App\Livewire\Admin\Cms\DisplayVersionList` (+ Editor `DisplayVersionEditor`)
+- `admin/cms/displays` → `App\Livewire\Admin\Cms\DisplayList`
+
+**Vorgehen:** Code-Review der Komponenten/Views/Services/Player + Laravel-Logs + DB-Stand. Eine Browser-Sichtprüfung war in dieser Session nicht möglich (Browser-MCP nicht verfügbar). **Alle Befunde (#1–#11) wurden inzwischen umgesetzt** (Details je Punkt unten).
+
+**Aktueller Datenstand (DB):** 5 Displays (davon **0** Test-Displays), 6 Module, 7 Playlists (5 Live + 2 Entwürfe), 13 Medien.
+
+**Tests:** `DisplayListTest`, `DisplayMediaTest`, `DisplayVersionTest`, `DisplayVersionApiTest`, `DisplayPlaylistMigrationTest` → **95 passed** (276 Assertions). Keine CMS-Fehler in `storage/logs` (vorhandene Log-Fehler betreffen unrelated `immobilien-azizi`-Routen).
+
+### 🔴 Fehler (sollten behoben werden)
+
+1. **Mediathek-Suche hebelt alle Filter aus.** ✅ **behoben 29.05.2026**
+   In `display-media-library.blade.php` (`$media`-Computed) und in `DisplayMediaPicker::resolveMediaItems()` wurde die Suche als `->where('filename','like',…)->orWhere('title','like',…)` ohne Gruppierung an die vorherigen `when()`-Filter gehängt. Durch SQL-Präzedenz (`AND` bindet stärker als `OR`) wurde die Query zu `… AND filename LIKE … OR title LIKE …`. Sobald gesucht wurde, wurden **Typ-, Quelle-, Sammlungs- und (beim Picker) der `active()`-Filter ignoriert**, sobald ein Treffer über `title` zustande kam. 
+   *Behebung:* Neuer gekapselter Scope `DisplayMedia::scopeSearch()` (Closure um `filename`/`title`), den Library und Picker gemeinsam nutzen. Tests: `keeps preceding filters when combined with the search scope`, `search scope respects the active filter on the media picker` in `DisplayMediaTest.php`.
+
+2. **Inhalt-Bearbeiten reaktiviert deaktivierte Items.** ✅ **behoben 29.05.2026**
+   In `DisplayVersionEditor` übergab `loadItemContent()` nur das `content`-Array an `loadVideoContent()/loadFooterContent()/loadMediaContent()/loadSlideContent()`. Alle vier setzten `…IsActive = true` fest – das tatsächliche `is_active` des Items wurde nie geladen. Wer ein zuvor per Auge-Icon deaktiviertes Item öffnete und „Aktualisieren" klickte, hat es über `getActiveFlag()` **ungewollt wieder aktiviert**. 
+   *Behebung:* `loadItemContent()` reicht `(bool) $item->is_active` an die Loader durch, die es in die jeweilige `…IsActive`-Property schreiben. Test: `editing an inactive item keeps it inactive` in `DisplayVersionTest.php`.
+
+### 🟡 Optimierungen / Aufräumen
+
+3. **Toter Code im Video-Editor.** ✅ **behoben 29.05.2026** `DisplayVersionEditor::loadAvailableVideos()`, Property `$availableVideos`, der `mount()`-Aufruf und der ungenutzte `Illuminate\Support\Facades\File`-Import wurden entfernt (im aktiven Editor-Blade ungenutzt; das einzige Blade mit `availableVideos` gehört zur Legacy-`CabinetDisplay`). Spart den Dateisystem-Scan von `public/_cabinet/assets` bei jedem Editor-Aufruf.
+
+4. **Modul-Löschen ohne Schutz.** ✅ **behoben 29.05.2026** `DisplayVersionList::deleteVersion()` ermittelt jetzt den `displays_count` (distinct Displays über Playlists) und **blockiert** das Löschen, solange das Modul in irgendeiner Bespielung (Live oder Entwurf) genutzt wird; es erscheint ein roter Flash-Hinweis mit Anzahl. Module ohne Nutzung lassen sich weiterhin löschen. Test: `cannot delete a display version that is used by a playlist` in `DisplayVersionTest.php`.
+
+5. **Doppelte Such-Logik** zwischen Library und Picker (siehe #1) → ein gemeinsamer Query-Scope `DisplayMedia::scopeSearch(string $term)` verhindert künftige Divergenz. ✅ **erledigt 29.05.2026** (im Zuge von #1).
+
+6. **Preview-Token bleibt nach Veröffentlichen bestehen.** ✅ **behoben 29.05.2026**
+   `DisplayList::publishDraft()`/`discardDraft()` ließen `displays.preview_token` gesetzt, obwohl `/preview/{token}` danach 404 lieferte (kein Draft mehr); ein Rotations-Button fehlte ganz. 
+   *Behebung:* Neue Model-Methoden `Display::rotatePreviewToken()` und `Display::clearPreviewToken()`. `publishDraft()` und `discardDraft()` setzen den Token jetzt zurück (alter Link wird ungültig). Im Entwurf gibt es einen „Link erneuern"-Button (`rotatePreviewToken()` mit `wire:confirm`), der bei offenem Entwurf zugleich die Iframe-Vorschau aktualisiert. Tests: `publishing a draft clears the preview token`, `can discard a draft playlist` (erweitert) und `can rotate the preview token of a draft` in `DisplayListTest.php`.
+
+### 🟠 Konfiguration / Dev-Umgebung
+
+7. **Live-Vorschau zeigt im lokalen Dev auf die Produktion.** ✅ **behoben 29.05.2026**
+   `config/display.php` `player_url` defaultete auf `https://cabinet.b2in.eu/display`, und `DISPLAY_PLAYER_URL` war in `.env` nicht gesetzt. In `display-list.blade.php` nutzten „Vorschau", „Live-URL zum Kopieren" und „Display-Übersicht öffnen" diese Produktions-URL, während die Entwurfs-„Test-URL" über `url('/preview/…')` lokal lief. Lokal sah man Live also den Produktionsstand, Entwurf aber lokale Daten – inkonsistent und irreführend. 
+   *Behebung:* Player-Seite (`public/_cabinet/display/`) **und** die Display-API liegen auf der Portal-Domain, daher ist der Player lokal unter `https://portal.b2in.test/_cabinet/display` erreichbar (der Player ermittelt `BASE_URL` aus `window.location.origin` und ruft die API auf derselben Domain auf). 
+   - `.env`: `DISPLAY_PLAYER_URL=https://portal.b2in.test/_cabinet/display` gesetzt (Config-Cache geleert). 
+   - `.env.example`: dokumentiert (Live-Wert als Kommentar). 
+   - `phpunit.xml`: `DISPLAY_PLAYER_URL=https://cabinet.b2in.eu/display` gepinnt, damit die bestehenden URL-Tests (`DisplayListTest`, `DisplayVersionApiTest`) deterministisch gegen den Produktionswert prüfen, unabhängig von der lokalen `.env`. 
+   - Der Produktions-Fallback in `config/display.php` (und damit das Live-Verhalten) bleibt unverändert.
+
+### 🟢 Erweiterungen / Verbesserungen (UX)
+
+8. **Test-Display existiert nicht.** ✅ **behoben 29.05.2026** Neuer idempotenter `Database\Seeders\TestDisplaySeeder` legt genau **ein** Test-Display an (überspringt, falls schon vorhanden) und ist im `DatabaseSeeder` registriert. In der Dev-DB wurde das Test-Display angelegt. Tests: `seeds exactly one test display`, `is idempotent and does not create a second test display` in `TestDisplaySeederTest.php`.
+
+9. **Externe Bilder ohne Thumbnail.** ✅ **behoben 29.05.2026** Grid, Listenansicht und Detail-Sidebar (`display-media-library.blade.php`) rendern externe Bilder jetzt direkt via `<img src="{{ external_url }}">` (gemeinsame `$thumbSrc`-Logik: Upload-Thumbnail → sonst `external_url`). Nicht-Bild-Externe behalten das Link-Icon. Test: `renders external image media with an inline thumbnail` in `DisplayMediaTest.php`.
+
+10. **Mediathek-Pagination ohne `resetPage`.** ✅ **behoben 29.05.2026** Die Volt-Komponente nutzt jetzt `WithPagination` und Update-Hooks (`updatedSearch/updatedFilterType/updatedFilterSource/updatedFilterCollection`), die bei jeder Filter-/Suchänderung `resetPage()` aufrufen. Test: `resets pagination to page one when a filter changes` in `DisplayMediaTest.php`.
+
+11. **Modul-Hinzufügen nur einzeln.** ✅ **behoben 29.05.2026** Der Bespielungs-Dialog (`display-list.blade.php`) nutzt jetzt einen durchsuchbaren Flux-Listbox-Multi-Select (`versionsToAdd`) plus „Hinzufügen"-Button (`addSelectedVersions()`), der alle ausgewählten Module auf einmal übernimmt (Duplikate werden übersprungen). Die programmatische `addVersion()`-Methode bleibt für Einzel-Adds/Tests erhalten. Test: `can add multiple modules to a playlist at once` in `DisplayListTest.php`.
+
+### Empfohlene Reihenfolge
+
+1. #1 + #2 (echte Fehler, klein, mit Tests) → 2. #7 (Dev-Konfiguration, blockiert lokales Testen) → 3. #3/#4/#5/#6 (Aufräumen/Robustheit) → 4. #8–#11 (UX-Erweiterungen). Jeder Punkt wird gemäß Projekt-Regeln mit Test abgesichert und mit Pint formatiert.
+
+**Stand 29.05.2026:** Alle Befunde (#1–#11) sind umgesetzt, getestet und mit Pint formatiert.
+
+
diff --git a/phpunit.xml b/phpunit.xml
index 5cf230b..4dbc029 100644
--- a/phpunit.xml
+++ b/phpunit.xml
@@ -20,6 +20,7 @@
     <php>
         <env name="APP_ENV" value="testing"/>
         <env name="APP_MAINTENANCE_DRIVER" value="file"/>
+        <env name="DISPLAY_PLAYER_URL" value="https://cabinet.b2in.eu/display"/>
         <env name="BCRYPT_ROUNDS" value="4"/>
         <env name="CACHE_STORE" value="array"/>
         <env name="DB_CONNECTION" value="sqlite" force="true"/>
diff --git a/public/_cabinet/display/index.html b/public/_cabinet/display/index.html
index 96e9eff..c166923 100644
--- a/public/_cabinet/display/index.html
+++ b/public/_cabinet/display/index.html
@@ -143,6 +143,24 @@
       text-transform: uppercase; color: rgba(255,255,255,0.7);
     }
 
+    /* B2in Brand (positionable logo + claim) */
+    .b2in-brand { position: absolute; z-index: 12; display: flex; align-items: center; max-width: 60%; }
+    .b2in-brand-logo img { height: 3.5vh; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45)); }
+    .b2in-brand-claim {
+      font-size: 1.3vh; font-weight: 300; letter-spacing: 0.15em;
+      text-transform: uppercase; color: rgba(255,255,255,0.85);
+      text-shadow: 0 1px 4px rgba(0,0,0,0.55);
+    }
+    .b2in-brand.pos-top-left { top: 2.5vh; left: 3vh; }
+    .b2in-brand.pos-top-right { top: 2.5vh; right: 3vh; }
+    .b2in-brand.pos-bottom-left { bottom: 2.5vh; left: 3vh; }
+    .b2in-brand.pos-bottom-right { bottom: 2.5vh; right: 3vh; }
+
+    /* Legibility scrims behind positioned brand elements */
+    .b2in-scrim { position: absolute; left: 0; right: 0; height: 12vh; z-index: 11; pointer-events: none; }
+    .b2in-scrim-top { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); }
+    .b2in-scrim-bottom { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); }
+
     /* B2in Media */
     .b2in-media {
       flex: 1; position: relative; overflow: hidden;
@@ -171,6 +189,8 @@
       font-size: 1.8vh; font-weight: 300; color: rgba(255,255,255,0.7);
       line-height: 1.4;
     }
+    /* Without footer the text reclaims the footer's space at the bottom */
+    .b2in-layer.no-footer .b2in-text { padding-bottom: 4vh; }
 
     /* B2in Footer */
     .b2in-footer {
@@ -204,6 +224,9 @@
       background: linear-gradient(to bottom, rgba(247,248,250,0.9), transparent);
     }
     .b2in-layer[data-theme="light"] .b2in-claim { color: rgba(43,63,81,0.6); }
+    .b2in-layer[data-theme="light"] .b2in-brand-claim { color: rgba(43,63,81,0.75); text-shadow: 0 1px 3px rgba(255,255,255,0.5); }
+    .b2in-layer[data-theme="light"] .b2in-scrim-top { background: linear-gradient(to bottom, rgba(247,248,250,0.9), transparent); }
+    .b2in-layer[data-theme="light"] .b2in-scrim-bottom { background: linear-gradient(to top, rgba(247,248,250,0.9), transparent); }
     .b2in-layer[data-theme="light"] .b2in-text {
       background: linear-gradient(to top, rgba(247,248,250,0.85) 40%, transparent);
     }
@@ -325,6 +348,10 @@
       font-size: 24px; color: #737373; text-align: right;
       line-height: 1.35; font-weight: 400;
     }
+    .offer-price-note.strike {
+      color: #dc2626; text-decoration: line-through;
+      text-decoration-color: #dc2626; text-decoration-thickness: 3px;
+    }
 
     /* Bullets */
     .offer-bullets {
@@ -412,6 +439,16 @@
     .status-error { color: #ef4444; font-weight: 500; }
     .status-sub { font-size: 1.4vh; opacity: 0.4; margin-top: 1vh; }
 
+    .display-empty {
+      position: absolute; inset: 0; z-index: 10;
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center;
+      text-align: center; padding: 6vw;
+      background: #000; color: #fff;
+    }
+    .display-empty__title { font-size: 2.4vh; font-weight: 600; }
+    .display-empty__hint { font-size: 1.6vh; opacity: 0.5; margin-top: 1.2vh; font-weight: 300; }
+
     .display-overview {
       position: fixed; inset: 0; z-index: 10000;
       overflow-y: auto; background: radial-gradient(circle at top, #12364d 0, #05070a 42%, #000 100%);
@@ -549,6 +586,7 @@ class DisplayPlayer {
     this.lastSuccessTime = Date.now();
     this.isRunning = false;
     this.activeVersionRenderer = null;
+    this.emptyVersionStreak = 0;
 
     // DOM
     this.viewport = document.getElementById('viewport');
@@ -810,6 +848,19 @@ class DisplayPlayer {
       return;
     }
 
+    // Guard against a delay-free infinite restart loop when no version in the
+    // playlist has any playable content (e.g. a freshly created, empty module).
+    if (!this.versionHasContent(version)) {
+      this.emptyVersionStreak++;
+      if (this.emptyVersionStreak >= this.playlist.length) {
+        this.showEmptyPlaylist();
+        return;
+      }
+      this.advanceVersion();
+      return;
+    }
+    this.emptyVersionStreak = 0;
+
     console.log(`[Display] Playing version ${this.currentVersionIndex + 1}/${this.playlist.length}: ${version.version_name} (${version.type})`);
 
     // Clean up previous renderer
@@ -850,6 +901,38 @@ class DisplayPlayer {
     this.playCurrentVersion();
   }
 
+  versionHasContent(version) {
+    if (!version) return false;
+    switch (version.type) {
+      case 'video-display':
+        return (version.videoPlaylist || []).length > 0;
+      case 'b2in':
+        return (version.items || []).some(item => item.is_active);
+      case 'offers':
+        return (version.slides || []).length > 0;
+      default:
+        return false;
+    }
+  }
+
+  showEmptyPlaylist() {
+    this.isRunning = false;
+    this.emptyVersionStreak = 0;
+
+    if (this.activeVersionRenderer) {
+      this.activeVersionRenderer.destroy();
+      this.activeVersionRenderer = null;
+    }
+
+    this.viewport.innerHTML = `
+      <div class="display-empty">
+        <p class="display-empty__title">Noch keine Inhalte vorhanden</p>
+        <p class="display-empty__hint">Sobald Inhalte angelegt und aktiviert sind, erscheinen sie hier.</p>
+      </div>
+    `;
+    console.log('[Display] Playlist has no playable content – playback stopped.');
+  }
+
   // ========================================
   // UI HELPERS
   // ========================================
@@ -1132,7 +1215,7 @@ class B2inRenderer {
 
   build() {
     const layer = document.createElement('div');
-    layer.className = 'version-layer b2in-layer active';
+    layer.className = 'version-layer b2in-layer active' + (this.settings.show_footer === false ? ' no-footer' : '');
     layer.setAttribute('data-theme', this.theme);
 
     const headerLogoUrl = this.resolveUrl(this.settings.header_logo_url || '../assets/b2in-logo-positive.svg');
@@ -1145,11 +1228,57 @@ class B2inRenderer {
       : '';
     const qrUrl = normalizeQrUrl(this.settings.qr_url || footerUrl || 'b2in.eu');
 
-    layer.innerHTML = `
-      <header class="b2in-header">
+    // Footer visibility, brand element visibility + corner positioning
+    const showFooter = this.settings.show_footer !== false;
+    const showLogo = this.settings.show_logo !== false;
+    const showClaim = this.settings.show_claim !== false;
+    const validPositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+    let logoPos = validPositions.includes(this.settings.logo_position) ? this.settings.logo_position : 'top-left';
+    let claimPos = validPositions.includes(this.settings.claim_position) ? this.settings.claim_position : 'top-right';
+
+    // Bottom corners only allowed when the footer is hidden
+    if (showFooter) {
+      if (logoPos.startsWith('bottom')) logoPos = logoPos.replace('bottom-', 'top-');
+      if (claimPos.startsWith('bottom')) claimPos = claimPos.replace('bottom-', 'top-');
+    }
+    // Claim must not share the logo corner
+    if (claimPos === logoPos) {
+      claimPos = (validPositions.filter(p => (showFooter ? p.startsWith('top') : true) && p !== logoPos)[0]) || claimPos;
+    }
+
+    const logoVisible = showLogo;
+    const claimVisible = showClaim && !!headerClaim;
+
+    const hasTop = (logoVisible && logoPos.startsWith('top')) || (claimVisible && claimPos.startsWith('top'));
+    const hasBottom = (logoVisible && logoPos.startsWith('bottom')) || (claimVisible && claimPos.startsWith('bottom'));
+
+    const logoHtml = logoVisible
+      ? `<div class="b2in-brand b2in-brand-logo pos-${logoPos}">
         <img src="${escapeHtml(headerLogoUrl)}" alt="B2in">
-        <span class="b2in-claim">${escapeHtml(headerClaim)}</span>
-      </header>
+      </div>`
+      : '';
+
+    const claimHtml = claimVisible
+      ? `<div class="b2in-brand b2in-brand-claim pos-${claimPos}">${escapeHtml(headerClaim)}</div>`
+      : '';
+
+    const footerHtml = showFooter
+      ? `<footer class="b2in-footer">
+        <div>
+          <span class="b2in-footer-url">${escapeHtml(footerUrl)}</span>
+          ${footerNameHtml}
+        </div>
+        <div class="b2in-footer-qr">
+          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&margin=5&data=${encodeURIComponent(qrUrl)}" alt="QR">
+        </div>
+      </footer>`
+      : '';
+
+    layer.innerHTML = `
+      ${hasTop ? '<div class="b2in-scrim b2in-scrim-top"></div>' : ''}
+      ${(hasBottom && !showFooter) ? '<div class="b2in-scrim b2in-scrim-bottom"></div>' : ''}
+      ${logoHtml}
+      ${claimHtml}
       <section class="b2in-media">
         <div class="b2in-media-layer active" id="b2in-layer-a"></div>
         <div class="b2in-media-layer" id="b2in-layer-b"></div>
@@ -1158,15 +1287,7 @@ class B2inRenderer {
         <div class="b2in-headline" id="b2in-headline"></div>
         <div class="b2in-subline" id="b2in-subline"></div>
       </section>
-      <footer class="b2in-footer">
-        <div>
-          <span class="b2in-footer-url">${escapeHtml(footerUrl)}</span>
-          ${footerNameHtml}
-        </div>
-        <div class="b2in-footer-qr">
-          <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&margin=5&data=${encodeURIComponent(qrUrl)}" alt="QR">
-        </div>
-      </footer>
+      ${footerHtml}
       <div class="b2in-progress-track">
         <div class="b2in-progress-fill" id="b2in-progress"></div>
       </div>
@@ -1375,42 +1496,64 @@ class OffersRenderer {
   }
 
   buildSlide(slide) {
+    // Single dynamic detail layout: every block is toggleable. Older slides
+    // without explicit show_* flags fall back to "is there content?".
+    const has = v => v !== undefined && v !== null && v !== '';
+    const qrUrl = slide.qr_url || this.settings.footer_url || '';
+    const contactText = slide.contact || this.settings.footer_claim || '';
+    const show = {
+      logo: slide.show_logo ?? true,
+      badge: (slide.show_badge ?? has(slide.badge_text)) && has(slide.badge_text),
+      eyebrow: (slide.show_eyebrow ?? has(slide.eyebrow)) && has(slide.eyebrow),
+      subline: (slide.show_subline ?? has(slide.subline)) && has(slide.subline),
+      bullets: (slide.show_bullets ?? (slide.bullets && slide.bullets.length > 0)) && (slide.bullets && slide.bullets.length > 0),
+      price: (slide.show_price ?? has(slide.price)) && has(slide.price),
+      disclaimer: (slide.show_disclaimer ?? has(slide.disclaimer)) && has(slide.disclaimer),
+      qr: (slide.show_qr ?? has(slide.qr_url)) && has(qrUrl),
+      contact: (slide.show_contact ?? has(slide.contact)) && has(contactText),
+    };
+
     const wrapper = document.createElement('div');
     wrapper.className = 'offers-slide-container';
 
     const article = document.createElement('article');
     article.className = 'offer-slide';
 
-    // --- HEADER ---
-    const header = document.createElement('header');
-    header.className = 'offer-header';
+    // --- HEADER (Logo & Marke) – per slide, toggleable ---
+    if (show.logo) {
+      const header = document.createElement('header');
+      header.className = 'offer-header';
 
-    const brand = document.createElement('div');
-    brand.className = 'offer-brand';
-    const brandLogo = document.createElement('img');
-    brandLogo.src = this.resolveUrl(this.settings.logo_url || '../logo-cabinet-300.png');
-    brandLogo.alt = 'CABINET';
-    brandLogo.className = 'offer-brand-logo';
-    brand.appendChild(brandLogo);
+      const brand = document.createElement('div');
+      brand.className = 'offer-brand';
+      const brandLogo = document.createElement('img');
+      brandLogo.src = this.resolveUrl(slide.logo_url || '../logo-cabinet-300.png');
+      brandLogo.alt = 'Logo';
+      brandLogo.className = 'offer-brand-logo';
+      brand.appendChild(brandLogo);
 
-    if (slide.show_brand_text) {
-      const brandText = document.createElement('span');
-      brandText.className = 'offer-brand-text';
-      brandText.textContent = this.settings.brand_text || 'Bielefeld';
-      brand.appendChild(brandText);
+      if (has(slide.brand_text)) {
+        const brandText = document.createElement('span');
+        brandText.className = 'offer-brand-text';
+        brandText.textContent = slide.brand_text;
+        brand.appendChild(brandText);
+      }
+
+      header.appendChild(brand);
+
+      if (has(slide.brand_tagline)) {
+        const tagline = document.createElement('div');
+        tagline.className = 'offer-tagline';
+        tagline.innerHTML = slide.brand_tagline.replace(/\n/g, '<br>');
+        header.appendChild(tagline);
+      }
+
+      article.appendChild(header);
+    } else {
+      // Without the header row, let the hero stay the flexible middle row.
+      article.style.gridTemplateRows = '1fr auto';
     }
 
-    header.appendChild(brand);
-
-    if (slide.show_brand_text && slide.brand_tagline) {
-      const tagline = document.createElement('div');
-      tagline.className = 'offer-tagline';
-      tagline.innerHTML = slide.brand_tagline.replace(/\n/g, '<br>');
-      header.appendChild(tagline);
-    }
-
-    article.appendChild(header);
-
     // --- HERO ---
     const hero = document.createElement('section');
     hero.className = 'offer-hero';
@@ -1419,7 +1562,7 @@ class OffersRenderer {
       hero.style.background = `url('${imgUrl}') center/cover no-repeat`;
     }
 
-    if (slide.badge_text) {
+    if (show.badge) {
       const badge = document.createElement('span');
       badge.className = 'offer-hero-badge large';
       badge.textContent = slide.badge_text;
@@ -1439,7 +1582,7 @@ class OffersRenderer {
     const infoContent = document.createElement('div');
     infoContent.className = 'offer-info-content';
 
-    if (slide.eyebrow) {
+    if (show.eyebrow) {
       const eyebrow = document.createElement('p');
       eyebrow.className = 'offer-eyebrow';
       eyebrow.textContent = slide.eyebrow;
@@ -1448,22 +1591,19 @@ class OffersRenderer {
 
     if (slide.title) {
       const title = document.createElement('h1');
-      const titleSize = (slide.type === 'product-details') ? 'medium' : 'large';
-      title.className = `offer-title ${titleSize}`;
+      title.className = 'offer-title medium';
       title.innerHTML = slide.title.replace(/\n/g, '<br>');
       infoContent.appendChild(title);
     }
 
-    // Subline (product-impulse)
-    if (slide.subline) {
+    if (show.subline) {
       const subline = document.createElement('p');
       subline.className = 'offer-subline';
       subline.textContent = slide.subline;
       infoContent.appendChild(subline);
     }
 
-    // Bullets (product-details)
-    if (slide.bullets && slide.bullets.length > 0) {
+    if (show.bullets) {
       const ul = document.createElement('ul');
       ul.className = 'offer-bullets';
       slide.bullets.forEach(text => {
@@ -1477,8 +1617,8 @@ class OffersRenderer {
 
     info.appendChild(infoContent);
 
-    // Price block (product-hero, product-impulse)
-    if (slide.price) {
+    // Price block
+    if (show.price) {
       const priceBlock = document.createElement('div');
       priceBlock.className = 'offer-price-block';
 
@@ -1492,7 +1632,7 @@ class OffersRenderer {
 
       if (slide.original_price) {
         const note = document.createElement('div');
-        note.className = 'offer-price-note';
+        note.className = slide.strike_original_price ? 'offer-price-note strike' : 'offer-price-note';
         note.textContent = slide.original_price;
         priceRow.appendChild(note);
       }
@@ -1511,8 +1651,8 @@ class OffersRenderer {
       info.appendChild(priceBlock);
     }
 
-    // Disclaimer (intro)
-    if (slide.disclaimer) {
+    // Disclaimer
+    if (show.disclaimer) {
       const footer = document.createElement('div');
       footer.className = 'offer-info-footer';
       const disc = document.createElement('span');
@@ -1524,38 +1664,41 @@ class OffersRenderer {
 
     bottom.appendChild(info);
 
-    // QR Box
-    const qrBox = document.createElement('aside');
-    qrBox.className = 'offer-qr-box';
+    // QR / Contact box – only when at least one of the two is enabled.
+    if (show.qr || show.contact) {
+      const qrBox = document.createElement('aside');
+      qrBox.className = 'offer-qr-box';
 
-    const qrHeader = document.createElement('div');
-    qrHeader.className = 'offer-qr-header';
-    qrHeader.innerHTML = `
-      <p class="offer-qr-title">${this.escapeHtml(slide.qr_title || this.settings.qr_default_title || 'Kontakt')}</p>
-      <p class="offer-qr-subtitle">${this.escapeHtml(this.settings.qr_subtitle || 'QR scannen')}</p>
-    `;
-    qrBox.appendChild(qrHeader);
+      if (show.qr) {
+        const qrHeader = document.createElement('div');
+        qrHeader.className = 'offer-qr-header';
+        qrHeader.innerHTML = `
+          <p class="offer-qr-title">${this.escapeHtml(slide.qr_title || this.settings.qr_default_title || 'Kontakt')}</p>
+          <p class="offer-qr-subtitle">${this.escapeHtml(this.settings.qr_subtitle || 'QR scannen')}</p>
+        `;
+        qrBox.appendChild(qrHeader);
 
-    const qrWrapper = document.createElement('div');
-    qrWrapper.className = 'offer-qr-wrapper';
-    const qrUrl = slide.qr_url || this.settings.footer_url || '';
-    if (qrUrl) {
-      const qrImg = document.createElement('img');
-      qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&color=000000&bgcolor=ffffff&margin=8&data=${encodeURIComponent(normalizeQrUrl(qrUrl))}`;
-      qrImg.alt = 'QR Code';
-      qrWrapper.appendChild(qrImg);
-    }
-    qrBox.appendChild(qrWrapper);
+        const qrWrapper = document.createElement('div');
+        qrWrapper.className = 'offer-qr-wrapper';
+        const qrImg = document.createElement('img');
+        qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&color=000000&bgcolor=ffffff&margin=8&data=${encodeURIComponent(normalizeQrUrl(qrUrl))}`;
+        qrImg.alt = 'QR Code';
+        qrWrapper.appendChild(qrImg);
+        qrBox.appendChild(qrWrapper);
+      }
 
-    const contactText = slide.contact || this.settings.footer_claim || '';
-    if (contactText) {
-      const contact = document.createElement('p');
-      contact.className = 'offer-qr-contact';
-      contact.innerHTML = contactText.replace(/\n/g, '<br>');
-      qrBox.appendChild(contact);
+      if (show.contact) {
+        const contact = document.createElement('p');
+        contact.className = 'offer-qr-contact';
+        contact.innerHTML = contactText.replace(/\n/g, '<br>');
+        qrBox.appendChild(contact);
+      }
+
+      bottom.appendChild(qrBox);
+    } else {
+      bottom.style.gridTemplateColumns = '1fr';
     }
 
-    bottom.appendChild(qrBox);
     article.appendChild(bottom);
     wrapper.appendChild(article);
 
diff --git a/public/flux/flux.js b/public/flux/flux.js
deleted file mode 100644
index f59722a..0000000
--- a/public/flux/flux.js
+++ /dev/null
@@ -1,13171 +0,0 @@
-(() => {
-  // node_modules/@oddbird/popover-polyfill/dist/popover.js
-  var ToggleEvent = class extends Event {
-    oldState;
-    newState;
-    constructor(type, { oldState = "", newState = "", ...init } = {}) {
-      super(type, init);
-      this.oldState = String(oldState || "");
-      this.newState = String(newState || "");
-    }
-  };
-  var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap();
-  function queuePopoverToggleEventTask(element2, oldState, newState) {
-    popoverToggleTaskQueue.set(
-      element2,
-      setTimeout(() => {
-        if (!popoverToggleTaskQueue.has(element2)) return;
-        element2.dispatchEvent(
-          new ToggleEvent("toggle", {
-            cancelable: false,
-            oldState,
-            newState
-          })
-        );
-      }, 0)
-    );
-  }
-  var ShadowRoot2 = globalThis.ShadowRoot || function() {
-  };
-  var HTMLDialogElement = globalThis.HTMLDialogElement || function() {
-  };
-  var topLayerElements = /* @__PURE__ */ new WeakMap();
-  var autoPopoverList = /* @__PURE__ */ new WeakMap();
-  var visibilityState = /* @__PURE__ */ new WeakMap();
-  function getPopoverVisibilityState(popover) {
-    return visibilityState.get(popover) || "hidden";
-  }
-  var popoverInvoker = /* @__PURE__ */ new WeakMap();
-  function popoverTargetAttributeActivationBehavior(element2) {
-    const popover = element2.popoverTargetElement;
-    if (!(popover instanceof HTMLElement)) {
-      return;
-    }
-    const visibility = getPopoverVisibilityState(popover);
-    if (element2.popoverTargetAction === "show" && visibility === "showing") {
-      return;
-    }
-    if (element2.popoverTargetAction === "hide" && visibility === "hidden") return;
-    if (visibility === "showing") {
-      hidePopover(popover, true, true);
-    } else if (checkPopoverValidity(popover, false)) {
-      popoverInvoker.set(popover, element2);
-      showPopover(popover);
-    }
-  }
-  function checkPopoverValidity(element2, expectedToBeShowing) {
-    if (element2.popover !== "auto" && element2.popover !== "manual") {
-      return false;
-    }
-    if (!element2.isConnected) return false;
-    if (expectedToBeShowing && getPopoverVisibilityState(element2) !== "showing") {
-      return false;
-    }
-    if (!expectedToBeShowing && getPopoverVisibilityState(element2) !== "hidden") {
-      return false;
-    }
-    if (element2 instanceof HTMLDialogElement && element2.hasAttribute("open")) {
-      return false;
-    }
-    if (document.fullscreenElement === element2) return false;
-    return true;
-  }
-  function getStackPosition(popover) {
-    if (!popover) return 0;
-    return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(
-      popover
-    ) + 1;
-  }
-  function topMostClickedPopover(target) {
-    const clickedPopover = nearestInclusiveOpenPopover(target);
-    const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target);
-    if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) {
-      return clickedPopover;
-    }
-    return invokerPopover;
-  }
-  function topMostAutoPopover(document2) {
-    const documentPopovers = autoPopoverList.get(document2);
-    for (const popover of documentPopovers || []) {
-      if (!popover.isConnected) {
-        documentPopovers.delete(popover);
-      } else {
-        return popover;
-      }
-    }
-    return null;
-  }
-  function getRootNode(node) {
-    if (typeof node.getRootNode === "function") {
-      return node.getRootNode();
-    }
-    if (node.parentNode) return getRootNode(node.parentNode);
-    return node;
-  }
-  function nearestInclusiveOpenPopover(node) {
-    while (node) {
-      if (node instanceof HTMLElement && node.popover === "auto" && visibilityState.get(node) === "showing") {
-        return node;
-      }
-      node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode(node);
-      if (node instanceof ShadowRoot2) node = node.host;
-      if (node instanceof Document) return;
-    }
-  }
-  function nearestInclusiveTargetPopoverForInvoker(node) {
-    while (node) {
-      const nodePopover = node.popoverTargetElement;
-      if (nodePopover instanceof HTMLElement) return nodePopover;
-      node = node.parentElement || getRootNode(node);
-      if (node instanceof ShadowRoot2) node = node.host;
-      if (node instanceof Document) return;
-    }
-  }
-  function topMostPopoverAncestor(newPopover) {
-    const popoverPositions = /* @__PURE__ */ new Map();
-    let i = 0;
-    for (const popover of autoPopoverList.get(newPopover.ownerDocument) || []) {
-      popoverPositions.set(popover, i);
-      i += 1;
-    }
-    popoverPositions.set(newPopover, i);
-    i += 1;
-    let topMostPopoverAncestor22 = null;
-    function checkAncestor(candidate) {
-      const candidateAncestor = nearestInclusiveOpenPopover(candidate);
-      if (candidateAncestor === null) return null;
-      const candidatePosition = popoverPositions.get(candidateAncestor);
-      if (topMostPopoverAncestor22 === null || popoverPositions.get(topMostPopoverAncestor22) < candidatePosition) {
-        topMostPopoverAncestor22 = candidateAncestor;
-      }
-    }
-    checkAncestor(newPopover.parentElement || getRootNode(newPopover));
-    return topMostPopoverAncestor22;
-  }
-  function isFocusable(focusTarget) {
-    if (focusTarget.hidden || focusTarget instanceof ShadowRoot2) return false;
-    if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
-      if (focusTarget.disabled) return false;
-    }
-    if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") {
-      return false;
-    }
-    if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") {
-      return false;
-    }
-    return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
-  }
-  function focusDelegate(focusTarget) {
-    if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) {
-      return null;
-    }
-    let whereToLook = focusTarget;
-    if (whereToLook.shadowRoot) {
-      whereToLook = whereToLook.shadowRoot;
-    }
-    let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
-    if (autoFocusDelegate) {
-      return autoFocusDelegate;
-    } else {
-      const slots = whereToLook.querySelectorAll("slot");
-      for (const slot of slots) {
-        const assignedElements = slot.assignedElements({ flatten: true });
-        for (const el of assignedElements) {
-          if (el.hasAttribute("autofocus")) {
-            return el;
-          } else {
-            autoFocusDelegate = el.querySelector("[autofocus]");
-            if (autoFocusDelegate) {
-              return autoFocusDelegate;
-            }
-          }
-        }
-      }
-    }
-    const walker2 = focusTarget.ownerDocument.createTreeWalker(
-      whereToLook,
-      NodeFilter.SHOW_ELEMENT
-    );
-    let descendant = walker2.currentNode;
-    while (descendant) {
-      if (isFocusable(descendant)) {
-        return descendant;
-      }
-      descendant = walker2.nextNode();
-    }
-  }
-  function popoverFocusingSteps(subject) {
-    focusDelegate(subject)?.focus();
-  }
-  var previouslyFocusedElements = /* @__PURE__ */ new WeakMap();
-  function showPopover(element2) {
-    if (!checkPopoverValidity(element2, false)) {
-      return;
-    }
-    const document2 = element2.ownerDocument;
-    if (!element2.dispatchEvent(
-      new ToggleEvent("beforetoggle", {
-        cancelable: true,
-        oldState: "closed",
-        newState: "open"
-      })
-    )) {
-      return;
-    }
-    if (!checkPopoverValidity(element2, false)) {
-      return;
-    }
-    let shouldRestoreFocus = false;
-    if (element2.popover === "auto") {
-      const originalType = element2.getAttribute("popover");
-      const ancestor = topMostPopoverAncestor(element2) || document2;
-      hideAllPopoversUntil(ancestor, false, true);
-      if (originalType !== element2.getAttribute("popover") || !checkPopoverValidity(element2, false)) {
-        return;
-      }
-    }
-    if (!topMostAutoPopover(document2)) {
-      shouldRestoreFocus = true;
-    }
-    previouslyFocusedElements.delete(element2);
-    const originallyFocusedElement = document2.activeElement;
-    element2.classList.add(":popover-open");
-    visibilityState.set(element2, "showing");
-    if (!topLayerElements.has(document2)) {
-      topLayerElements.set(document2, /* @__PURE__ */ new Set());
-    }
-    topLayerElements.get(document2).add(element2);
-    popoverFocusingSteps(element2);
-    if (element2.popover === "auto") {
-      if (!autoPopoverList.has(document2)) {
-        autoPopoverList.set(document2, /* @__PURE__ */ new Set());
-      }
-      autoPopoverList.get(document2).add(element2);
-      setInvokerAriaExpanded(popoverInvoker.get(element2), true);
-    }
-    if (shouldRestoreFocus && originallyFocusedElement && element2.popover === "auto") {
-      previouslyFocusedElements.set(element2, originallyFocusedElement);
-    }
-    queuePopoverToggleEventTask(element2, "closed", "open");
-  }
-  function hidePopover(element2, focusPreviousElement = false, fireEvents = false) {
-    if (!checkPopoverValidity(element2, true)) {
-      return;
-    }
-    const document2 = element2.ownerDocument;
-    if (element2.popover === "auto") {
-      hideAllPopoversUntil(element2, focusPreviousElement, fireEvents);
-      if (!checkPopoverValidity(element2, true)) {
-        return;
-      }
-    }
-    setInvokerAriaExpanded(popoverInvoker.get(element2), false);
-    popoverInvoker.delete(element2);
-    if (fireEvents) {
-      element2.dispatchEvent(
-        new ToggleEvent("beforetoggle", {
-          oldState: "open",
-          newState: "closed"
-        })
-      );
-      if (!checkPopoverValidity(element2, true)) {
-        return;
-      }
-    }
-    topLayerElements.get(document2)?.delete(element2);
-    autoPopoverList.get(document2)?.delete(element2);
-    element2.classList.remove(":popover-open");
-    visibilityState.set(element2, "hidden");
-    if (fireEvents) {
-      queuePopoverToggleEventTask(element2, "open", "closed");
-    }
-    const previouslyFocusedElement = previouslyFocusedElements.get(element2);
-    if (previouslyFocusedElement) {
-      previouslyFocusedElements.delete(element2);
-      if (focusPreviousElement) {
-        previouslyFocusedElement.focus();
-      }
-    }
-  }
-  function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) {
-    let popover = topMostAutoPopover(document2);
-    while (popover) {
-      hidePopover(popover, focusPreviousElement, fireEvents);
-      popover = topMostAutoPopover(document2);
-    }
-  }
-  function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) {
-    const document2 = endpoint.ownerDocument || endpoint;
-    if (endpoint instanceof Document) {
-      return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
-    }
-    let lastToHide = null;
-    let foundEndpoint = false;
-    for (const popover of autoPopoverList.get(document2) || []) {
-      if (popover === endpoint) {
-        foundEndpoint = true;
-      } else if (foundEndpoint) {
-        lastToHide = popover;
-        break;
-      }
-    }
-    if (!foundEndpoint) {
-      return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents);
-    }
-    while (lastToHide && getPopoverVisibilityState(lastToHide) === "showing" && autoPopoverList.get(document2)?.size) {
-      hidePopover(lastToHide, focusPreviousElement, fireEvents);
-    }
-  }
-  var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap();
-  function lightDismissOpenPopovers(event) {
-    if (!event.isTrusted) return;
-    const target = event.composedPath()[0];
-    if (!target) return;
-    const document2 = target.ownerDocument;
-    const topMostPopover = topMostAutoPopover(document2);
-    if (!topMostPopover) return;
-    const ancestor = topMostClickedPopover(target);
-    if (ancestor && event.type === "pointerdown") {
-      popoverPointerDownTargets.set(document2, ancestor);
-    } else if (event.type === "pointerup") {
-      const sameTarget = popoverPointerDownTargets.get(document2) === ancestor;
-      popoverPointerDownTargets.delete(document2);
-      if (sameTarget) {
-        hideAllPopoversUntil(ancestor || document2, false, true);
-      }
-    }
-  }
-  var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap();
-  function setInvokerAriaExpanded(el, force = false) {
-    if (!el) return;
-    if (!initialAriaExpandedValue.has(el)) {
-      initialAriaExpandedValue.set(el, el.getAttribute("aria-expanded"));
-    }
-    const popover = el.popoverTargetElement;
-    if (popover instanceof HTMLElement && popover.popover === "auto") {
-      el.setAttribute("aria-expanded", String(force));
-    } else {
-      const initialValue = initialAriaExpandedValue.get(el);
-      if (!initialValue) {
-        el.removeAttribute("aria-expanded");
-      } else {
-        el.setAttribute("aria-expanded", initialValue);
-      }
-    }
-  }
-  var ShadowRoot22 = globalThis.ShadowRoot || function() {
-  };
-  function isSupported() {
-    return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
-  }
-  function patchSelectorFn(object, name, mapper) {
-    const original = object[name];
-    Object.defineProperty(object, name, {
-      value(selector) {
-        return original.call(this, mapper(selector));
-      }
-    });
-  }
-  var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g;
-  function hasLayerSupport() {
-    return typeof globalThis.CSSLayerBlockRule === "function";
-  }
-  function getStyles() {
-    const useLayer = hasLayerSupport();
-    return `
-${useLayer ? "@layer popover-polyfill {" : ""}
-  :where([popover]) {
-    position: fixed;
-    z-index: 2147483647;
-    inset: 0;
-    padding: 0.25em;
-    width: fit-content;
-    height: fit-content;
-    border-width: initial;
-    border-color: initial;
-    border-image: initial;
-    border-style: solid;
-    background-color: canvas;
-    color: canvastext;
-    overflow: auto;
-    margin: auto;
-  }
-
-  :where([popover]:not(.\\:popover-open)) {
-    display: none;
-  }
-
-  :where(dialog[popover].\\:popover-open) {
-    display: block;
-  }
-
-  :where(dialog[popover][open]) {
-    display: revert;
-  }
-
-  :where([anchor].\\:popover-open) {
-    inset: auto;
-  }
-
-  :where([anchor]:popover-open) {
-    inset: auto;
-  }
-
-  @supports not (background-color: canvas) {
-    :where([popover]) {
-      background-color: white;
-      color: black;
-    }
-  }
-
-  @supports (width: -moz-fit-content) {
-    :where([popover]) {
-      width: -moz-fit-content;
-      height: -moz-fit-content;
-    }
-  }
-
-  @supports not (inset: 0) {
-    :where([popover]) {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-${useLayer ? "}" : ""}
-`;
-  }
-  var popoverStyleSheet = null;
-  function injectStyles(root) {
-    const styles = getStyles();
-    if (popoverStyleSheet === null) {
-      try {
-        popoverStyleSheet = new CSSStyleSheet();
-        popoverStyleSheet.replaceSync(styles);
-      } catch {
-        popoverStyleSheet = false;
-      }
-    }
-    if (popoverStyleSheet === false) {
-      const sheet = document.createElement("style");
-      sheet.textContent = styles;
-      if (root instanceof Document) {
-        root.head.prepend(sheet);
-      } else {
-        root.prepend(sheet);
-      }
-    } else {
-      root.adoptedStyleSheets = [popoverStyleSheet, ...root.adoptedStyleSheets];
-    }
-  }
-  function apply() {
-    if (typeof window === "undefined") return;
-    window.ToggleEvent = window.ToggleEvent || ToggleEvent;
-    function rewriteSelector(selector) {
-      if (selector?.includes(":popover-open")) {
-        selector = selector.replace(
-          nonEscapedPopoverSelector,
-          "$1.\\:popover-open"
-        );
-      }
-      return selector;
-    }
-    patchSelectorFn(Document.prototype, "querySelector", rewriteSelector);
-    patchSelectorFn(Document.prototype, "querySelectorAll", rewriteSelector);
-    patchSelectorFn(Element.prototype, "querySelector", rewriteSelector);
-    patchSelectorFn(Element.prototype, "querySelectorAll", rewriteSelector);
-    patchSelectorFn(Element.prototype, "matches", rewriteSelector);
-    patchSelectorFn(Element.prototype, "closest", rewriteSelector);
-    patchSelectorFn(
-      DocumentFragment.prototype,
-      "querySelectorAll",
-      rewriteSelector
-    );
-    Object.defineProperties(HTMLElement.prototype, {
-      popover: {
-        enumerable: true,
-        configurable: true,
-        get() {
-          if (!this.hasAttribute("popover")) return null;
-          const value3 = (this.getAttribute("popover") || "").toLowerCase();
-          if (value3 === "" || value3 == "auto") return "auto";
-          return "manual";
-        },
-        set(value3) {
-          if (value3 === null) {
-            this.removeAttribute("popover");
-          } else {
-            this.setAttribute("popover", value3);
-          }
-        }
-      },
-      showPopover: {
-        enumerable: true,
-        configurable: true,
-        value() {
-          showPopover(this);
-        }
-      },
-      hidePopover: {
-        enumerable: true,
-        configurable: true,
-        value() {
-          hidePopover(this, true, true);
-        }
-      },
-      togglePopover: {
-        enumerable: true,
-        configurable: true,
-        value(force) {
-          if (visibilityState.get(this) === "showing" && force === void 0 || force === false) {
-            hidePopover(this, true, true);
-          } else if (force === void 0 || force === true) {
-            showPopover(this);
-          }
-        }
-      }
-    });
-    const originalAttachShadow = Element.prototype.attachShadow;
-    if (originalAttachShadow) {
-      Object.defineProperties(Element.prototype, {
-        attachShadow: {
-          enumerable: true,
-          configurable: true,
-          writable: true,
-          value(options) {
-            const shadowRoot = originalAttachShadow.call(this, options);
-            injectStyles(shadowRoot);
-            return shadowRoot;
-          }
-        }
-      });
-    }
-    const originalAttachInternals = HTMLElement.prototype.attachInternals;
-    if (originalAttachInternals) {
-      Object.defineProperties(HTMLElement.prototype, {
-        attachInternals: {
-          enumerable: true,
-          configurable: true,
-          writable: true,
-          value() {
-            const internals = originalAttachInternals.call(this);
-            if (internals.shadowRoot) {
-              injectStyles(internals.shadowRoot);
-            }
-            return internals;
-          }
-        }
-      });
-    }
-    const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
-    function applyPopoverInvokerElementMixin(ElementClass) {
-      Object.defineProperties(ElementClass.prototype, {
-        popoverTargetElement: {
-          enumerable: true,
-          configurable: true,
-          set(targetElement) {
-            if (targetElement === null) {
-              this.removeAttribute("popovertarget");
-              popoverTargetAssociatedElements.delete(this);
-            } else if (!(targetElement instanceof Element)) {
-              throw new TypeError(
-                `popoverTargetElement must be an element or null`
-              );
-            } else {
-              this.setAttribute("popovertarget", "");
-              popoverTargetAssociatedElements.set(this, targetElement);
-            }
-          },
-          get() {
-            if (this.localName !== "button" && this.localName !== "input") {
-              return null;
-            }
-            if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") {
-              return null;
-            }
-            if (this.disabled) {
-              return null;
-            }
-            if (this.form && this.type === "submit") {
-              return null;
-            }
-            const targetElement = popoverTargetAssociatedElements.get(this);
-            if (targetElement && targetElement.isConnected) {
-              return targetElement;
-            } else if (targetElement && !targetElement.isConnected) {
-              popoverTargetAssociatedElements.delete(this);
-              return null;
-            }
-            const root = getRootNode(this);
-            const idref = this.getAttribute("popovertarget");
-            if ((root instanceof Document || root instanceof ShadowRoot22) && idref) {
-              return root.getElementById(idref) || null;
-            }
-            return null;
-          }
-        },
-        popoverTargetAction: {
-          enumerable: true,
-          configurable: true,
-          get() {
-            const value3 = (this.getAttribute("popovertargetaction") || "").toLowerCase();
-            if (value3 === "show" || value3 === "hide") return value3;
-            return "toggle";
-          },
-          set(value3) {
-            this.setAttribute("popovertargetaction", value3);
-          }
-        }
-      });
-    }
-    applyPopoverInvokerElementMixin(HTMLButtonElement);
-    applyPopoverInvokerElementMixin(HTMLInputElement);
-    const handleInvokerActivation = (event) => {
-      const composedPath = event.composedPath();
-      const target = composedPath[0];
-      if (!(target instanceof Element) || target?.shadowRoot) {
-        return;
-      }
-      const root = getRootNode(target);
-      if (!(root instanceof ShadowRoot22 || root instanceof Document)) {
-        return;
-      }
-      const invoker = composedPath.find(
-        (el) => el.matches?.("[popovertargetaction],[popovertarget]")
-      );
-      if (invoker) {
-        popoverTargetAttributeActivationBehavior(invoker);
-        event.preventDefault();
-        return;
-      }
-    };
-    const onKeydown = (event) => {
-      const key = event.key;
-      const target = event.target;
-      if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) {
-        hideAllPopoversUntil(target.ownerDocument, true, true);
-      }
-    };
-    const addEventListeners = (root) => {
-      root.addEventListener("click", handleInvokerActivation);
-      root.addEventListener("keydown", onKeydown);
-      root.addEventListener("pointerdown", lightDismissOpenPopovers);
-      root.addEventListener("pointerup", lightDismissOpenPopovers);
-    };
-    addEventListeners(document);
-    injectStyles(document);
-  }
-  if (!isSupported()) apply();
-
-  // node_modules/@oddbird/popover-polyfill/dist/popover-fn.js
-  var ToggleEvent2 = class extends Event {
-    oldState;
-    newState;
-    constructor(type, { oldState = "", newState = "", ...init } = {}) {
-      super(type, init);
-      this.oldState = String(oldState || "");
-      this.newState = String(newState || "");
-    }
-  };
-  var popoverToggleTaskQueue2 = /* @__PURE__ */ new WeakMap();
-  function queuePopoverToggleEventTask2(element2, oldState, newState) {
-    popoverToggleTaskQueue2.set(
-      element2,
-      setTimeout(() => {
-        if (!popoverToggleTaskQueue2.has(element2)) return;
-        element2.dispatchEvent(
-          new ToggleEvent2("toggle", {
-            cancelable: false,
-            oldState,
-            newState
-          })
-        );
-      }, 0)
-    );
-  }
-  var ShadowRoot3 = globalThis.ShadowRoot || function() {
-  };
-  var HTMLDialogElement2 = globalThis.HTMLDialogElement || function() {
-  };
-  var topLayerElements2 = /* @__PURE__ */ new WeakMap();
-  var autoPopoverList2 = /* @__PURE__ */ new WeakMap();
-  var visibilityState2 = /* @__PURE__ */ new WeakMap();
-  function getPopoverVisibilityState2(popover) {
-    return visibilityState2.get(popover) || "hidden";
-  }
-  var popoverInvoker2 = /* @__PURE__ */ new WeakMap();
-  function popoverTargetAttributeActivationBehavior2(element2) {
-    const popover = element2.popoverTargetElement;
-    if (!(popover instanceof HTMLElement)) {
-      return;
-    }
-    const visibility = getPopoverVisibilityState2(popover);
-    if (element2.popoverTargetAction === "show" && visibility === "showing") {
-      return;
-    }
-    if (element2.popoverTargetAction === "hide" && visibility === "hidden") return;
-    if (visibility === "showing") {
-      hidePopover2(popover, true, true);
-    } else if (checkPopoverValidity2(popover, false)) {
-      popoverInvoker2.set(popover, element2);
-      showPopover2(popover);
-    }
-  }
-  function checkPopoverValidity2(element2, expectedToBeShowing) {
-    if (element2.popover !== "auto" && element2.popover !== "manual") {
-      return false;
-    }
-    if (!element2.isConnected) return false;
-    if (expectedToBeShowing && getPopoverVisibilityState2(element2) !== "showing") {
-      return false;
-    }
-    if (!expectedToBeShowing && getPopoverVisibilityState2(element2) !== "hidden") {
-      return false;
-    }
-    if (element2 instanceof HTMLDialogElement2 && element2.hasAttribute("open")) {
-      return false;
-    }
-    if (document.fullscreenElement === element2) return false;
-    return true;
-  }
-  function getStackPosition2(popover) {
-    if (!popover) return 0;
-    return Array.from(autoPopoverList2.get(popover.ownerDocument) || []).indexOf(
-      popover
-    ) + 1;
-  }
-  function topMostClickedPopover2(target) {
-    const clickedPopover = nearestInclusiveOpenPopover2(target);
-    const invokerPopover = nearestInclusiveTargetPopoverForInvoker2(target);
-    if (getStackPosition2(clickedPopover) > getStackPosition2(invokerPopover)) {
-      return clickedPopover;
-    }
-    return invokerPopover;
-  }
-  function topMostAutoPopover2(document2) {
-    const documentPopovers = autoPopoverList2.get(document2);
-    for (const popover of documentPopovers || []) {
-      if (!popover.isConnected) {
-        documentPopovers.delete(popover);
-      } else {
-        return popover;
-      }
-    }
-    return null;
-  }
-  function getRootNode2(node) {
-    if (typeof node.getRootNode === "function") {
-      return node.getRootNode();
-    }
-    if (node.parentNode) return getRootNode2(node.parentNode);
-    return node;
-  }
-  function nearestInclusiveOpenPopover2(node) {
-    while (node) {
-      if (node instanceof HTMLElement && node.popover === "auto" && visibilityState2.get(node) === "showing") {
-        return node;
-      }
-      node = node instanceof Element && node.assignedSlot || node.parentElement || getRootNode2(node);
-      if (node instanceof ShadowRoot3) node = node.host;
-      if (node instanceof Document) return;
-    }
-  }
-  function nearestInclusiveTargetPopoverForInvoker2(node) {
-    while (node) {
-      const nodePopover = node.popoverTargetElement;
-      if (nodePopover instanceof HTMLElement) return nodePopover;
-      node = node.parentElement || getRootNode2(node);
-      if (node instanceof ShadowRoot3) node = node.host;
-      if (node instanceof Document) return;
-    }
-  }
-  function topMostPopoverAncestor2(newPopover) {
-    const popoverPositions = /* @__PURE__ */ new Map();
-    let i = 0;
-    for (const popover of autoPopoverList2.get(newPopover.ownerDocument) || []) {
-      popoverPositions.set(popover, i);
-      i += 1;
-    }
-    popoverPositions.set(newPopover, i);
-    i += 1;
-    let topMostPopoverAncestor22 = null;
-    function checkAncestor(candidate) {
-      const candidateAncestor = nearestInclusiveOpenPopover2(candidate);
-      if (candidateAncestor === null) return null;
-      const candidatePosition = popoverPositions.get(candidateAncestor);
-      if (topMostPopoverAncestor22 === null || popoverPositions.get(topMostPopoverAncestor22) < candidatePosition) {
-        topMostPopoverAncestor22 = candidateAncestor;
-      }
-    }
-    checkAncestor(newPopover.parentElement || getRootNode2(newPopover));
-    return topMostPopoverAncestor22;
-  }
-  function isFocusable2(focusTarget) {
-    if (focusTarget.hidden || focusTarget instanceof ShadowRoot3) return false;
-    if (focusTarget instanceof HTMLButtonElement || focusTarget instanceof HTMLInputElement || focusTarget instanceof HTMLSelectElement || focusTarget instanceof HTMLTextAreaElement || focusTarget instanceof HTMLOptGroupElement || focusTarget instanceof HTMLOptionElement || focusTarget instanceof HTMLFieldSetElement) {
-      if (focusTarget.disabled) return false;
-    }
-    if (focusTarget instanceof HTMLInputElement && focusTarget.type === "hidden") {
-      return false;
-    }
-    if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === "") {
-      return false;
-    }
-    return typeof focusTarget.tabIndex === "number" && focusTarget.tabIndex !== -1;
-  }
-  function focusDelegate2(focusTarget) {
-    if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) {
-      return null;
-    }
-    let whereToLook = focusTarget;
-    if (whereToLook.shadowRoot) {
-      whereToLook = whereToLook.shadowRoot;
-    }
-    let autoFocusDelegate = whereToLook.querySelector("[autofocus]");
-    if (autoFocusDelegate) {
-      return autoFocusDelegate;
-    } else {
-      const slots = whereToLook.querySelectorAll("slot");
-      for (const slot of slots) {
-        const assignedElements = slot.assignedElements({ flatten: true });
-        for (const el of assignedElements) {
-          if (el.hasAttribute("autofocus")) {
-            return el;
-          } else {
-            autoFocusDelegate = el.querySelector("[autofocus]");
-            if (autoFocusDelegate) {
-              return autoFocusDelegate;
-            }
-          }
-        }
-      }
-    }
-    const walker2 = focusTarget.ownerDocument.createTreeWalker(
-      whereToLook,
-      NodeFilter.SHOW_ELEMENT
-    );
-    let descendant = walker2.currentNode;
-    while (descendant) {
-      if (isFocusable2(descendant)) {
-        return descendant;
-      }
-      descendant = walker2.nextNode();
-    }
-  }
-  function popoverFocusingSteps2(subject) {
-    focusDelegate2(subject)?.focus();
-  }
-  var previouslyFocusedElements2 = /* @__PURE__ */ new WeakMap();
-  function showPopover2(element2) {
-    if (!checkPopoverValidity2(element2, false)) {
-      return;
-    }
-    const document2 = element2.ownerDocument;
-    if (!element2.dispatchEvent(
-      new ToggleEvent2("beforetoggle", {
-        cancelable: true,
-        oldState: "closed",
-        newState: "open"
-      })
-    )) {
-      return;
-    }
-    if (!checkPopoverValidity2(element2, false)) {
-      return;
-    }
-    let shouldRestoreFocus = false;
-    if (element2.popover === "auto") {
-      const originalType = element2.getAttribute("popover");
-      const ancestor = topMostPopoverAncestor2(element2) || document2;
-      hideAllPopoversUntil2(ancestor, false, true);
-      if (originalType !== element2.getAttribute("popover") || !checkPopoverValidity2(element2, false)) {
-        return;
-      }
-    }
-    if (!topMostAutoPopover2(document2)) {
-      shouldRestoreFocus = true;
-    }
-    previouslyFocusedElements2.delete(element2);
-    const originallyFocusedElement = document2.activeElement;
-    element2.classList.add(":popover-open");
-    visibilityState2.set(element2, "showing");
-    if (!topLayerElements2.has(document2)) {
-      topLayerElements2.set(document2, /* @__PURE__ */ new Set());
-    }
-    topLayerElements2.get(document2).add(element2);
-    popoverFocusingSteps2(element2);
-    if (element2.popover === "auto") {
-      if (!autoPopoverList2.has(document2)) {
-        autoPopoverList2.set(document2, /* @__PURE__ */ new Set());
-      }
-      autoPopoverList2.get(document2).add(element2);
-      setInvokerAriaExpanded2(popoverInvoker2.get(element2), true);
-    }
-    if (shouldRestoreFocus && originallyFocusedElement && element2.popover === "auto") {
-      previouslyFocusedElements2.set(element2, originallyFocusedElement);
-    }
-    queuePopoverToggleEventTask2(element2, "closed", "open");
-  }
-  function hidePopover2(element2, focusPreviousElement = false, fireEvents = false) {
-    if (!checkPopoverValidity2(element2, true)) {
-      return;
-    }
-    const document2 = element2.ownerDocument;
-    if (element2.popover === "auto") {
-      hideAllPopoversUntil2(element2, focusPreviousElement, fireEvents);
-      if (!checkPopoverValidity2(element2, true)) {
-        return;
-      }
-    }
-    setInvokerAriaExpanded2(popoverInvoker2.get(element2), false);
-    popoverInvoker2.delete(element2);
-    if (fireEvents) {
-      element2.dispatchEvent(
-        new ToggleEvent2("beforetoggle", {
-          oldState: "open",
-          newState: "closed"
-        })
-      );
-      if (!checkPopoverValidity2(element2, true)) {
-        return;
-      }
-    }
-    topLayerElements2.get(document2)?.delete(element2);
-    autoPopoverList2.get(document2)?.delete(element2);
-    element2.classList.remove(":popover-open");
-    visibilityState2.set(element2, "hidden");
-    if (fireEvents) {
-      queuePopoverToggleEventTask2(element2, "open", "closed");
-    }
-    const previouslyFocusedElement = previouslyFocusedElements2.get(element2);
-    if (previouslyFocusedElement) {
-      previouslyFocusedElements2.delete(element2);
-      if (focusPreviousElement) {
-        previouslyFocusedElement.focus();
-      }
-    }
-  }
-  function closeAllOpenPopovers2(document2, focusPreviousElement = false, fireEvents = false) {
-    let popover = topMostAutoPopover2(document2);
-    while (popover) {
-      hidePopover2(popover, focusPreviousElement, fireEvents);
-      popover = topMostAutoPopover2(document2);
-    }
-  }
-  function hideAllPopoversUntil2(endpoint, focusPreviousElement, fireEvents) {
-    const document2 = endpoint.ownerDocument || endpoint;
-    if (endpoint instanceof Document) {
-      return closeAllOpenPopovers2(document2, focusPreviousElement, fireEvents);
-    }
-    let lastToHide = null;
-    let foundEndpoint = false;
-    for (const popover of autoPopoverList2.get(document2) || []) {
-      if (popover === endpoint) {
-        foundEndpoint = true;
-      } else if (foundEndpoint) {
-        lastToHide = popover;
-        break;
-      }
-    }
-    if (!foundEndpoint) {
-      return closeAllOpenPopovers2(document2, focusPreviousElement, fireEvents);
-    }
-    while (lastToHide && getPopoverVisibilityState2(lastToHide) === "showing" && autoPopoverList2.get(document2)?.size) {
-      hidePopover2(lastToHide, focusPreviousElement, fireEvents);
-    }
-  }
-  var popoverPointerDownTargets2 = /* @__PURE__ */ new WeakMap();
-  function lightDismissOpenPopovers2(event) {
-    if (!event.isTrusted) return;
-    const target = event.composedPath()[0];
-    if (!target) return;
-    const document2 = target.ownerDocument;
-    const topMostPopover = topMostAutoPopover2(document2);
-    if (!topMostPopover) return;
-    const ancestor = topMostClickedPopover2(target);
-    if (ancestor && event.type === "pointerdown") {
-      popoverPointerDownTargets2.set(document2, ancestor);
-    } else if (event.type === "pointerup") {
-      const sameTarget = popoverPointerDownTargets2.get(document2) === ancestor;
-      popoverPointerDownTargets2.delete(document2);
-      if (sameTarget) {
-        hideAllPopoversUntil2(ancestor || document2, false, true);
-      }
-    }
-  }
-  var initialAriaExpandedValue2 = /* @__PURE__ */ new WeakMap();
-  function setInvokerAriaExpanded2(el, force = false) {
-    if (!el) return;
-    if (!initialAriaExpandedValue2.has(el)) {
-      initialAriaExpandedValue2.set(el, el.getAttribute("aria-expanded"));
-    }
-    const popover = el.popoverTargetElement;
-    if (popover instanceof HTMLElement && popover.popover === "auto") {
-      el.setAttribute("aria-expanded", String(force));
-    } else {
-      const initialValue = initialAriaExpandedValue2.get(el);
-      if (!initialValue) {
-        el.removeAttribute("aria-expanded");
-      } else {
-        el.setAttribute("aria-expanded", initialValue);
-      }
-    }
-  }
-  var ShadowRoot23 = globalThis.ShadowRoot || function() {
-  };
-  function isSupported2() {
-    return typeof HTMLElement !== "undefined" && typeof HTMLElement.prototype === "object" && "popover" in HTMLElement.prototype;
-  }
-  function isPolyfilled() {
-    return Boolean(
-      document.body?.showPopover && !/native code/i.test(document.body.showPopover.toString())
-    );
-  }
-  function patchSelectorFn2(object, name, mapper) {
-    const original = object[name];
-    Object.defineProperty(object, name, {
-      value(selector) {
-        return original.call(this, mapper(selector));
-      }
-    });
-  }
-  var nonEscapedPopoverSelector2 = /(^|[^\\]):popover-open\b/g;
-  function hasLayerSupport2() {
-    return typeof globalThis.CSSLayerBlockRule === "function";
-  }
-  function getStyles2() {
-    const useLayer = hasLayerSupport2();
-    return `
-${useLayer ? "@layer popover-polyfill {" : ""}
-  :where([popover]) {
-    position: fixed;
-    z-index: 2147483647;
-    inset: 0;
-    padding: 0.25em;
-    width: fit-content;
-    height: fit-content;
-    border-width: initial;
-    border-color: initial;
-    border-image: initial;
-    border-style: solid;
-    background-color: canvas;
-    color: canvastext;
-    overflow: auto;
-    margin: auto;
-  }
-
-  :where([popover]:not(.\\:popover-open)) {
-    display: none;
-  }
-
-  :where(dialog[popover].\\:popover-open) {
-    display: block;
-  }
-
-  :where(dialog[popover][open]) {
-    display: revert;
-  }
-
-  :where([anchor].\\:popover-open) {
-    inset: auto;
-  }
-
-  :where([anchor]:popover-open) {
-    inset: auto;
-  }
-
-  @supports not (background-color: canvas) {
-    :where([popover]) {
-      background-color: white;
-      color: black;
-    }
-  }
-
-  @supports (width: -moz-fit-content) {
-    :where([popover]) {
-      width: -moz-fit-content;
-      height: -moz-fit-content;
-    }
-  }
-
-  @supports not (inset: 0) {
-    :where([popover]) {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  }
-${useLayer ? "}" : ""}
-`;
-  }
-  var popoverStyleSheet2 = null;
-  function injectStyles2(root) {
-    const styles = getStyles2();
-    if (popoverStyleSheet2 === null) {
-      try {
-        popoverStyleSheet2 = new CSSStyleSheet();
-        popoverStyleSheet2.replaceSync(styles);
-      } catch {
-        popoverStyleSheet2 = false;
-      }
-    }
-    if (popoverStyleSheet2 === false) {
-      const sheet = document.createElement("style");
-      sheet.textContent = styles;
-      if (root instanceof Document) {
-        root.head.prepend(sheet);
-      } else {
-        root.prepend(sheet);
-      }
-    } else {
-      root.adoptedStyleSheets = [popoverStyleSheet2, ...root.adoptedStyleSheets];
-    }
-  }
-  function apply2() {
-    if (typeof window === "undefined") return;
-    window.ToggleEvent = window.ToggleEvent || ToggleEvent2;
-    function rewriteSelector(selector) {
-      if (selector?.includes(":popover-open")) {
-        selector = selector.replace(
-          nonEscapedPopoverSelector2,
-          "$1.\\:popover-open"
-        );
-      }
-      return selector;
-    }
-    patchSelectorFn2(Document.prototype, "querySelector", rewriteSelector);
-    patchSelectorFn2(Document.prototype, "querySelectorAll", rewriteSelector);
-    patchSelectorFn2(Element.prototype, "querySelector", rewriteSelector);
-    patchSelectorFn2(Element.prototype, "querySelectorAll", rewriteSelector);
-    patchSelectorFn2(Element.prototype, "matches", rewriteSelector);
-    patchSelectorFn2(Element.prototype, "closest", rewriteSelector);
-    patchSelectorFn2(
-      DocumentFragment.prototype,
-      "querySelectorAll",
-      rewriteSelector
-    );
-    Object.defineProperties(HTMLElement.prototype, {
-      popover: {
-        enumerable: true,
-        configurable: true,
-        get() {
-          if (!this.hasAttribute("popover")) return null;
-          const value3 = (this.getAttribute("popover") || "").toLowerCase();
-          if (value3 === "" || value3 == "auto") return "auto";
-          return "manual";
-        },
-        set(value3) {
-          if (value3 === null) {
-            this.removeAttribute("popover");
-          } else {
-            this.setAttribute("popover", value3);
-          }
-        }
-      },
-      showPopover: {
-        enumerable: true,
-        configurable: true,
-        value() {
-          showPopover2(this);
-        }
-      },
-      hidePopover: {
-        enumerable: true,
-        configurable: true,
-        value() {
-          hidePopover2(this, true, true);
-        }
-      },
-      togglePopover: {
-        enumerable: true,
-        configurable: true,
-        value(force) {
-          if (visibilityState2.get(this) === "showing" && force === void 0 || force === false) {
-            hidePopover2(this, true, true);
-          } else if (force === void 0 || force === true) {
-            showPopover2(this);
-          }
-        }
-      }
-    });
-    const originalAttachShadow = Element.prototype.attachShadow;
-    if (originalAttachShadow) {
-      Object.defineProperties(Element.prototype, {
-        attachShadow: {
-          enumerable: true,
-          configurable: true,
-          writable: true,
-          value(options) {
-            const shadowRoot = originalAttachShadow.call(this, options);
-            injectStyles2(shadowRoot);
-            return shadowRoot;
-          }
-        }
-      });
-    }
-    const originalAttachInternals = HTMLElement.prototype.attachInternals;
-    if (originalAttachInternals) {
-      Object.defineProperties(HTMLElement.prototype, {
-        attachInternals: {
-          enumerable: true,
-          configurable: true,
-          writable: true,
-          value() {
-            const internals = originalAttachInternals.call(this);
-            if (internals.shadowRoot) {
-              injectStyles2(internals.shadowRoot);
-            }
-            return internals;
-          }
-        }
-      });
-    }
-    const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap();
-    function applyPopoverInvokerElementMixin(ElementClass) {
-      Object.defineProperties(ElementClass.prototype, {
-        popoverTargetElement: {
-          enumerable: true,
-          configurable: true,
-          set(targetElement) {
-            if (targetElement === null) {
-              this.removeAttribute("popovertarget");
-              popoverTargetAssociatedElements.delete(this);
-            } else if (!(targetElement instanceof Element)) {
-              throw new TypeError(
-                `popoverTargetElement must be an element or null`
-              );
-            } else {
-              this.setAttribute("popovertarget", "");
-              popoverTargetAssociatedElements.set(this, targetElement);
-            }
-          },
-          get() {
-            if (this.localName !== "button" && this.localName !== "input") {
-              return null;
-            }
-            if (this.localName === "input" && this.type !== "reset" && this.type !== "image" && this.type !== "button") {
-              return null;
-            }
-            if (this.disabled) {
-              return null;
-            }
-            if (this.form && this.type === "submit") {
-              return null;
-            }
-            const targetElement = popoverTargetAssociatedElements.get(this);
-            if (targetElement && targetElement.isConnected) {
-              return targetElement;
-            } else if (targetElement && !targetElement.isConnected) {
-              popoverTargetAssociatedElements.delete(this);
-              return null;
-            }
-            const root = getRootNode2(this);
-            const idref = this.getAttribute("popovertarget");
-            if ((root instanceof Document || root instanceof ShadowRoot23) && idref) {
-              return root.getElementById(idref) || null;
-            }
-            return null;
-          }
-        },
-        popoverTargetAction: {
-          enumerable: true,
-          configurable: true,
-          get() {
-            const value3 = (this.getAttribute("popovertargetaction") || "").toLowerCase();
-            if (value3 === "show" || value3 === "hide") return value3;
-            return "toggle";
-          },
-          set(value3) {
-            this.setAttribute("popovertargetaction", value3);
-          }
-        }
-      });
-    }
-    applyPopoverInvokerElementMixin(HTMLButtonElement);
-    applyPopoverInvokerElementMixin(HTMLInputElement);
-    const handleInvokerActivation = (event) => {
-      const composedPath = event.composedPath();
-      const target = composedPath[0];
-      if (!(target instanceof Element) || target?.shadowRoot) {
-        return;
-      }
-      const root = getRootNode2(target);
-      if (!(root instanceof ShadowRoot23 || root instanceof Document)) {
-        return;
-      }
-      const invoker = composedPath.find(
-        (el) => el.matches?.("[popovertargetaction],[popovertarget]")
-      );
-      if (invoker) {
-        popoverTargetAttributeActivationBehavior2(invoker);
-        event.preventDefault();
-        return;
-      }
-    };
-    const onKeydown = (event) => {
-      const key = event.key;
-      const target = event.target;
-      if (!event.defaultPrevented && target && (key === "Escape" || key === "Esc")) {
-        hideAllPopoversUntil2(target.ownerDocument, true, true);
-      }
-    };
-    const addEventListeners = (root) => {
-      root.addEventListener("click", handleInvokerActivation);
-      root.addEventListener("keydown", onKeydown);
-      root.addEventListener("pointerdown", lightDismissOpenPopovers2);
-      root.addEventListener("pointerup", lightDismissOpenPopovers2);
-    };
-    addEventListeners(document);
-    injectStyles2(document);
-  }
-
-  // js/utils.js
-  function inject(callback) {
-    let styles = callback({
-      css: (strings, ...values) => `@layer base { ${strings.raw[0] + values.join("")} }`
-    });
-    if (document.adoptedStyleSheets === void 0) {
-      let styleElement = document.createElement("style");
-      styleElement.textContent = styles;
-      document.head.appendChild(styleElement);
-      return;
-    }
-    let sheet = new CSSStyleSheet();
-    sheet.replaceSync(styles);
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
-  }
-  function closest(el, condition) {
-    let current = el;
-    while (current) {
-      if (condition(current)) return current;
-      current = current.parentElement;
-    }
-  }
-  function walker(el, callback) {
-    let walker2 = document.createTreeWalker(
-      el,
-      NodeFilter.SHOW_ELEMENT,
-      callback ? {
-        acceptNode: (el2) => {
-          let skipped, rejected;
-          callback(el2, {
-            skip: () => skipped = true,
-            reject: () => rejected = true
-          });
-          if (skipped) return NodeFilter.FILTER_SKIP;
-          if (rejected) return NodeFilter.FILTER_REJECT;
-          return NodeFilter.FILTER_ACCEPT;
-        }
-      } : {}
-    );
-    return new Traverse(walker2);
-  }
-  var Traverse = class {
-    constructor(walker2) {
-      this.walker = walker2;
-    }
-    from(el) {
-      this.walker.currentNode = el;
-      return this;
-    }
-    first() {
-      return this.walker.firstChild();
-    }
-    last() {
-      return this.walker.lastChild();
-    }
-    next(el) {
-      this.walker.currentNode = el;
-      return this.walker.nextSibling();
-    }
-    nextOrFirst(el) {
-      let found = this.next(el);
-      if (found) return found;
-      this.walker.currentNode = this.walker.root;
-      return this.first();
-    }
-    prev(el) {
-      this.walker.currentNode = el;
-      return this.walker.previousSibling();
-    }
-    prevOrLast(el) {
-      let found = this.prev(el);
-      if (found) return found;
-      this.walker.currentNode = this.walker.root;
-      return this.last();
-    }
-    closest(el, condition) {
-      let walker2 = this.from(el).walker;
-      while (walker2.currentNode) {
-        if (condition(walker2.currentNode)) return walker2.currentNode;
-        walker2.parentNode();
-      }
-    }
-    contains(el) {
-      return this.find((i) => i === el);
-    }
-    find(callback) {
-      return this.walk((el, bail) => {
-        callback(el) && bail(el);
-      });
-    }
-    findOrFirst(callback) {
-      let found = this.find(callback);
-      if (!found) this.walker.currentNode = this.walker.root;
-      return this.first();
-    }
-    each(callback) {
-      this.walk((el) => callback(el));
-    }
-    some(callback) {
-      return !!this.find(callback);
-    }
-    every(callback) {
-      let every = true;
-      this.walk((el) => {
-        callback(el) || (every = false);
-      });
-      return every;
-    }
-    map(callback) {
-      let els = [];
-      this.walk((el) => els.push(callback(el)));
-      return els;
-    }
-    filter(callback) {
-      let els = [];
-      this.walk((el) => callback(el) && els.push(el));
-      return els;
-    }
-    walk(callback) {
-      let current;
-      let walker2 = this.walker;
-      let bailed;
-      while (walker2.nextNode()) {
-        current = walker2.currentNode;
-        callback(current, (bailValue) => bailed = bailValue);
-        if (bailed !== void 0) {
-          break;
-        }
-      }
-      return bailed;
-    }
-  };
-  function element(name, type) {
-    customElements.define(`ui-${name}`, type);
-  }
-  function on(target, event, handler, options = {}) {
-    target.addEventListener(event, handler, options);
-    return {
-      off: () => target.removeEventListener(event, handler),
-      pause: (callback) => {
-        target.removeEventListener(event, handler), callback();
-        target.addEventListener(event, handler);
-      }
-    };
-  }
-  function isFocusable3(el) {
-    let selectors = [
-      "a[href]",
-      "area[href]",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      "button:not([disabled])",
-      "iframe",
-      "object",
-      "embed",
-      "[tabindex]",
-      "[contenteditable]"
-    ];
-    return selectors.some((selector) => el.matches(selector)) && el.tabIndex >= 0;
-  }
-  function throttle(func, limit) {
-    let inThrottle;
-    return function() {
-      let context = this, args = arguments;
-      if (!inThrottle) {
-        func.apply(context, args);
-        inThrottle = true;
-        setTimeout(() => inThrottle = false, limit);
-      }
-    };
-  }
-  function timeout(callback, delay) {
-    let timerId;
-    let start;
-    let remaining = delay;
-    let active = false;
-    let timeout2 = {
-      pause: () => {
-        if (!active) return;
-        clearTimeout(timerId);
-        remaining -= Date.now() - start;
-        active = false;
-      },
-      resume: () => {
-        if (active) return;
-        start = Date.now();
-        timerId = setTimeout(callback, remaining);
-        active = true;
-      },
-      cancel: () => {
-        clearTimeout(timerId);
-        active = false;
-        remaining = delay;
-      }
-    };
-    timeout2.resume();
-    return timeout2;
-  }
-  var using = "pointer";
-  document.addEventListener("keydown", () => using = "keyboard", { capture: true });
-  document.addEventListener("pointerdown", (e) => {
-    using = e.pointerType === "mouse" ? "mouse" : "touch";
-  }, { capture: true });
-  document.addEventListener("pointermove", (e) => {
-    using = e.pointerType === "mouse" ? "mouse" : "touch";
-  }, { capture: true });
-  function isUsingKeyboard() {
-    return using === "keyboard";
-  }
-  function isUsingTouch() {
-    return using === "touch";
-  }
-  function search(el, callback) {
-    let runningQuery = "";
-    let clearRunningQuery = debounce(() => {
-      runningQuery = "";
-    }, 300);
-    el.addEventListener("keydown", (e) => {
-      if (e.key.length === 1 && /[a-zA-Z]/.test(e.key)) {
-        runningQuery += e.key;
-        callback(runningQuery);
-        e.stopPropagation();
-      }
-      clearRunningQuery();
-    });
-  }
-  function dispenseId(el, prefix) {
-    return "lofi-" + (prefix ? prefix + "-" : "") + Math.random().toString(16).slice(2);
-  }
-  function assignId(el, prefix) {
-    let id = el.hasAttribute("id") ? el.getAttribute("id") : dispenseId(el, prefix);
-    setAttribute2(el, "id", id);
-    if (!el._x_bindings) el._x_bindings = {};
-    if (!el._x_bindings.id) el._x_bindings.id = id;
-    return id;
-  }
-  function detangle() {
-    let blocked = false;
-    return (callback) => (...args) => {
-      if (blocked) return;
-      blocked = true;
-      callback(...args);
-      blocked = false;
-    };
-  }
-  function interest(trigger, panel, { gain, lose, focusable, useSafeArea }) {
-    let engaged = false;
-    let focusInHander = (e) => {
-      if (!isUsingKeyboard()) return;
-      if (trigger.contains(e.target) || panel.contains(e.target)) {
-        engaged = true;
-        gain();
-      } else {
-        engaged = false;
-        lose();
-      }
-    };
-    focusable && document.addEventListener("focusin", focusInHander);
-    let removeFocusInHandler = () => {
-      document.removeEventListener("focusin", focusInHander);
-    };
-    let removeSafeArea = () => {
-    };
-    let removePointerMoveHandler = () => {
-    };
-    let disinterest = () => {
-      engaged = false;
-      lose();
-      removeSafeArea();
-      removePointerMoveHandler();
-    };
-    let clear = () => {
-      engaged = false;
-      removeSafeArea();
-      removePointerMoveHandler();
-    };
-    let pointerEnterHandler = (e) => {
-      if (isUsingTouch()) return;
-      if (engaged) return;
-      engaged = true;
-      gain();
-      setTimeout(() => {
-        let { safeArea, redraw: redrawSafeArea, remove: remove2 } = useSafeArea ? createSafeArea(trigger, panel, e.clientX, e.clientY) : nullSafeArea();
-        removeSafeArea = remove2;
-        let pointerStoppedOverSafeAreaTimeout;
-        let pointerMoveHandler = throttle((e2) => {
-          let panelRect = panel.getBoundingClientRect();
-          let triggerRect = trigger.getBoundingClientRect();
-          let mouseState;
-          if (safeArea.contains(e2.target) && mouseIsExclusivelyInsideSafeArea(triggerRect, panelRect, e2.clientX, e2.clientY)) mouseState = "safeArea";
-          else if (panel.contains(e2.target)) mouseState = "panel";
-          else if (trigger.contains(e2.target)) mouseState = "trigger";
-          else mouseState = "outside";
-          if (pointerStoppedOverSafeAreaTimeout) {
-            clearTimeout(pointerStoppedOverSafeAreaTimeout);
-          }
-          switch (mouseState) {
-            case "outside":
-              disinterest();
-              break;
-            case "trigger":
-              redrawSafeArea(e2.clientX, e2.clientY);
-              break;
-            case "panel":
-              removeSafeArea();
-              break;
-            case "safeArea":
-              redrawSafeArea(e2.clientX, e2.clientY);
-              pointerStoppedOverSafeAreaTimeout = setTimeout(() => {
-                disinterest();
-              }, 300);
-              break;
-            default:
-              break;
-          }
-        }, 100);
-        document.addEventListener("pointermove", pointerMoveHandler);
-        removePointerMoveHandler = () => document.removeEventListener("pointermove", pointerMoveHandler);
-      });
-    };
-    trigger.addEventListener("pointerenter", pointerEnterHandler);
-    let removePointerEnterHandler = () => {
-      trigger.removeEventListener("pointerenter", pointerEnterHandler);
-    };
-    let remove = () => {
-      clear();
-      removePointerEnterHandler();
-      removeFocusInHandler();
-    };
-    return { clear, remove };
-  }
-  function createSafeArea(trigger, panel, x, y) {
-    let safeArea = document.createElement("div");
-    let panelRect = panel.getBoundingClientRect();
-    let triggerRect = trigger.getBoundingClientRect();
-    safeArea.style.position = "fixed";
-    setAttribute2(safeArea, "data-safe-area", "");
-    let draw = (x2, y2) => {
-      if (panelRect.top === 0 && panelRect.bottom === 0) return;
-      let direction;
-      if (panelRect.left < triggerRect.left) direction = "left";
-      if (panelRect.right > triggerRect.right) direction = "right";
-      if (panelRect.top < triggerRect.top && panelRect.bottom < y2) direction = "up";
-      if (panelRect.bottom > triggerRect.bottom && panelRect.top > y2) direction = "down";
-      if (direction === void 0) direction = "right";
-      let left, right, width, top, bottom, height, offset3, shape;
-      let padding = 10;
-      switch (direction) {
-        case "left":
-          left = panelRect.right;
-          right = Math.max(panelRect.right, x2) + 5;
-          width = right - left;
-          top = Math.min(triggerRect.top, panelRect.top) - padding;
-          bottom = Math.max(triggerRect.bottom, panelRect.bottom) + padding;
-          height = bottom - top;
-          offset3 = y2 - top;
-          shape = `polygon(0% 0%, 100% ${offset3}px, 0% 100%)`;
-          break;
-        case "right":
-          left = Math.min(panelRect.left, x2) - 5;
-          right = panelRect.left;
-          width = right - left;
-          top = Math.min(triggerRect.top, panelRect.top) - padding;
-          bottom = Math.max(triggerRect.bottom, panelRect.bottom) + padding;
-          height = bottom - top;
-          offset3 = y2 - top;
-          shape = `polygon(0% ${offset3}px, 100% 0%, 100% 100%)`;
-          break;
-        case "up":
-          left = Math.min(x2, panelRect.left) - padding;
-          right = Math.max(x2, panelRect.right) + padding;
-          width = right - left;
-          top = panelRect.bottom;
-          bottom = Math.max(panelRect.bottom, y2) + 5;
-          height = bottom - top;
-          offset3 = x2 - left;
-          shape = `polygon(0% 0%, 100% 0%, ${offset3}px 100%)`;
-          break;
-        case "down":
-          left = Math.min(x2, panelRect.left) - padding;
-          right = Math.max(x2, panelRect.right) + padding;
-          width = right - left;
-          top = Math.min(panelRect.top, y2) - 5;
-          bottom = panelRect.top;
-          height = bottom - top;
-          offset3 = x2 - left;
-          shape = `polygon(${offset3}px 0%, 100% 100%, 0% 100%)`;
-          break;
-      }
-      safeArea.style.left = `${left}px`;
-      safeArea.style.top = `${top}px`;
-      safeArea.style.width = `${width}px`;
-      safeArea.style.height = `${height}px`;
-      safeArea.style.clipPath = shape;
-    };
-    return {
-      safeArea,
-      redraw: (x2, y2) => {
-        if (!safeArea.isConnected) trigger.appendChild(safeArea);
-        draw(x2, y2);
-      },
-      remove: () => {
-        safeArea.remove();
-      }
-    };
-  }
-  function mouseIsExclusivelyInsideSafeArea(triggerRect, panelRect, x, y) {
-    return !mouseIsOverTrigger(triggerRect, x, y) && !mouseIsOverPanel(panelRect, x, y);
-  }
-  function mouseIsOverTrigger(triggerRect, x, y) {
-    if (triggerRect.left <= x && x <= triggerRect.right && (triggerRect.top <= y && y <= triggerRect.bottom)) return true;
-    return false;
-  }
-  function mouseIsOverPanel(panelRect, x, y) {
-    if (panelRect.left <= x && x <= panelRect.right && (panelRect.top <= y && y <= panelRect.bottom)) return true;
-    return false;
-  }
-  function setAttribute2(el, name, value3) {
-    if (el._durableAttributeObserver === void 0) {
-      el._durableAttributeObserver = attributeObserver(el, [name]);
-    }
-    if (!el._durableAttributeObserver.hasAttribute(name)) {
-      el._durableAttributeObserver.addAttribute(name);
-    }
-    el._durableAttributeObserver.pause(() => {
-      el.setAttribute(name, value3);
-    });
-  }
-  function removeAndReleaseAttribute(el, name) {
-    removeAttribute(el, name);
-    releaseAttribute(el, name);
-  }
-  function removeAttribute(el, name) {
-    if (el._durableAttributeObserver === void 0) {
-      el._durableAttributeObserver = attributeObserver(el, [name]);
-    }
-    if (!el._durableAttributeObserver.hasAttribute(name)) {
-      el._durableAttributeObserver.addAttribute(name);
-    }
-    el._durableAttributeObserver.pause(() => {
-      el.removeAttribute(name);
-    });
-  }
-  function releaseAttribute(el, name) {
-    if (!el?._durableAttributeObserver?.hasAttribute(name)) return;
-    el._durableAttributeObserver.releaseAttribute(name);
-  }
-  function attributeObserver(el, initialAttributes) {
-    let processMutations = (mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.oldValue === null) {
-          el._durableAttributeObserver.pause(() => removeAttribute(el, mutation.attributeName));
-        } else {
-          el._durableAttributeObserver.pause(() => setAttribute2(el, mutation.attributeName, mutation.oldValue));
-        }
-      });
-    };
-    let observer = new MutationObserver((mutations) => processMutations(mutations));
-    observer.observe(el, { attributeFilter: initialAttributes, attributeOldValue: true });
-    return {
-      attributes: initialAttributes,
-      hasAttribute(name) {
-        return this.attributes.includes(name);
-      },
-      addAttribute(name) {
-        this.attributes.includes(name) || this.attributes.push(name);
-        observer.observe(el, { attributeFilter: this.attributes, attributeOldValue: true });
-      },
-      releaseAttribute(name) {
-        if (!this.hasAttribute(name)) return;
-        observer.observe(el, { attributeFilter: this.attributes, attributeOldValue: true });
-      },
-      pause(callback) {
-        processMutations(observer.takeRecords());
-        observer.disconnect();
-        callback();
-        observer.observe(el, { attributeFilter: this.attributes, attributeOldValue: true });
-      }
-    };
-  }
-  function nullSafeArea() {
-    return {
-      safeArea: { contains: () => false },
-      redraw: () => {
-      },
-      remove: () => {
-      }
-    };
-  }
-  function debounce(callback, delay) {
-    let timeout2;
-    return (...args) => {
-      clearTimeout(timeout2);
-      timeout2 = setTimeout(() => {
-        callback(...args);
-      }, delay);
-    };
-  }
-  var lockCount = 0;
-  var pointerEventsLocked = false;
-  inject(({ css }) => css`[data-flux-allow-scroll] { pointer-events: auto; }`);
-  function lockScroll(el = null, allowScroll = false, except = []) {
-    if (allowScroll) return { lock: () => {
-    }, unlock: () => {
-    } };
-    let applyDocumentLockStyles = (disablePointerEvents = false) => {
-      undoLockStyles(document.documentElement);
-      let lockStyles = {
-        overflow: "hidden",
-        ...disablePointerEvents ? { pointerEvents: "none" } : {}
-      };
-      if (window.CSS && CSS.supports && CSS.supports("scrollbar-gutter: stable")) {
-        if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-          lockStyles.scrollbarGutter = "stable";
-        }
-      } else {
-        lockStyles.paddingRight = `calc(${window.innerWidth - document.documentElement.clientWidth}px + ${window.getComputedStyle(document.documentElement).paddingRight})`;
-      }
-      setLockStyles(document.documentElement, lockStyles);
-      if (disablePointerEvents) {
-        setAttribute2(el, "data-flux-allow-scroll", "");
-        except.forEach((el2) => {
-          setAttribute2(el2, "data-flux-allow-scroll", "");
-        });
-        pointerEventsLocked = true;
-      }
-    };
-    let removeDocumentLockStyles = (enablePointerEvents = false) => {
-      undoLockStyles(document.documentElement);
-      if (enablePointerEvents) {
-        removeAndReleaseAttribute(el, "data-flux-allow-scroll");
-        except.forEach((el2) => {
-          removeAttribute(el2, "data-flux-allow-scroll");
-        });
-        pointerEventsLocked = false;
-      }
-    };
-    return {
-      lock() {
-        lockCount++;
-        if (lockCount > 1 && el !== null && pointerEventsLocked) return;
-        applyDocumentLockStyles(el !== null && !pointerEventsLocked);
-      },
-      unlock() {
-        lockCount = Math.max(0, lockCount - 1);
-        if (lockCount > 0 && el !== null && !pointerEventsLocked) return;
-        removeDocumentLockStyles(el !== null && pointerEventsLocked);
-        if (lockCount > 0) {
-          applyDocumentLockStyles(false);
-        }
-      }
-    };
-  }
-  function setLockStyles(element2, styles) {
-    let unlockedStyles = JSON.parse(element2.getAttribute(`data-flux-scroll-unlock`) || "{}");
-    Object.entries(styles).forEach(([style, value3]) => {
-      if (unlockedStyles[style] === void 0) {
-        unlockedStyles[style] = element2.style[style];
-        element2.style[style] = value3;
-      }
-    });
-    element2.setAttribute(`data-flux-scroll-unlock`, JSON.stringify(unlockedStyles));
-  }
-  function undoLockStyles(element2) {
-    let unlockedStyles = JSON.parse(element2.getAttribute(`data-flux-scroll-unlock`) || "{}");
-    Object.entries(unlockedStyles).forEach(([style, value3]) => {
-      element2.style[style] = value3;
-    });
-    element2.removeAttribute(`data-flux-scroll-unlock`);
-  }
-  function setStyle(element2, style, value3) {
-    let currentValue = element2.style[style];
-    element2.style[style] = value3;
-    return () => {
-      element2.style[style] = currentValue;
-    };
-  }
-  function initFauxButton(el, isDisabled, action) {
-    let ifKey = (key, callback) => (e) => {
-      if (e.key === key && !isDisabled()) {
-        callback();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    setAttribute2(el, "role", "button");
-    let syncDisabledAttributes = () => {
-      if (el.hasAttribute("disabled")) {
-        setAttribute2(el, "aria-disabled", "true");
-        setAttribute2(el, "tabindex", "-1");
-      } else {
-        removeAttribute(el, "aria-disabled");
-        setAttribute2(el, "tabindex", "0");
-      }
-    };
-    let observer = new MutationObserver(() => syncDisabledAttributes());
-    observer.observe(el, { attributes: true, attributeFilter: ["disabled"] });
-    syncDisabledAttributes();
-    on(el, "click", () => action());
-    on(el, "keydown", ifKey("Enter", () => action()));
-    on(el, "keydown", ifKey(" ", () => {
-    }));
-    on(el, "keyup", ifKey(" ", () => action()));
-  }
-  function responsiveAttributeValue(el, name, fallback = null) {
-    let getValue = () => {
-      let value3 = el.getAttribute(name);
-      let breakpoints = {
-        sm: 640,
-        md: 768,
-        lg: 1024,
-        xl: 1280,
-        "2xl": 1536
-      };
-      for (let [breakpoint, minWidth] of Object.entries(breakpoints).reverse()) {
-        let responsiveValue = el.getAttribute(`${breakpoint}:${name}`);
-        if (responsiveValue && window.innerWidth >= minWidth) {
-          return responsiveValue;
-        }
-      }
-      return value3 || fallback;
-    };
-    let currentValue = getValue();
-    let callbacks = [];
-    new ResizeObserver(() => {
-      let newValue = getValue();
-      let memo = JSON.stringify(currentValue);
-      if (JSON.stringify(newValue) !== memo) {
-        currentValue = newValue;
-        callbacks.forEach((callback) => callback(newValue));
-      }
-    }).observe(window.document.documentElement);
-    return [currentValue, (callback) => callbacks.push(callback)];
-  }
-  function getLocale() {
-    return navigator?.language || document.documentElement.lang || "en-US";
-  }
-  function hydrateTemplate(template, slotsAndAttributes = { slots: {}, attrs: {} }) {
-    let { slots = {}, attrs = {} } = slotsAndAttributes;
-    let clone = template.content.cloneNode(true).firstElementChild;
-    Object.entries(slots).forEach(([key, value3]) => {
-      let slotNodes = key === "default" ? clone.querySelectorAll("slot:not([name])") : clone.querySelectorAll(`slot[name="${key}"]`);
-      slotNodes.forEach((i) => i.replaceWith(
-        typeof value3 === "string" ? document.createTextNode(value3) : value3
-      ));
-    });
-    clone.querySelectorAll("slot").forEach((slot) => slot.remove());
-    Object.entries(attrs).forEach(([key, value3]) => {
-      clone.setAttribute(key, value3);
-    });
-    clone.setAttribute("data-appended", "");
-    return clone;
-  }
-  function isRTL() {
-    return document.documentElement.dir === "rtl";
-  }
-  function isSafari() {
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && !navigator.userAgent.includes("CriOS") && !navigator.userAgent.includes("FxiOS");
-  }
-  function isIOS() {
-    return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-  }
-  var Observable = class {
-    constructor() {
-      this.subscribers = [];
-    }
-    subscribe(reason, callback) {
-      this.subscribers.push({ reason, callback });
-    }
-    notify(reason, data) {
-      this.subscribers.forEach(({ reason: subReason, callback }) => {
-        if (reason === subReason) {
-          callback(data);
-        }
-      });
-    }
-  };
-
-  // js/element.js
-  var UIElement = class extends HTMLElement {
-    wasDisconnected = false;
-    constructor() {
-      super();
-      this.boot?.();
-    }
-    connectedCallback() {
-      if (this.wasDisconnected) {
-        this.wasDisconnected = false;
-        return;
-      }
-      queueMicrotask(() => {
-        this.mount?.();
-      });
-    }
-    disconnectedCallback() {
-      this.wasDisconnected = true;
-      queueMicrotask(() => {
-        if (this.wasDisconnected) {
-          this.unmount?.();
-        }
-        this.wasDisconnected = false;
-      });
-    }
-    mixin(func, options = {}) {
-      return new func(this, options);
-    }
-    // @todo: this is redundant now...
-    appendMixin(func, options = {}) {
-      return new func(this, options);
-    }
-    use(func) {
-      let found;
-      this.mixins.forEach((mixin) => {
-        if (mixin instanceof func) found = mixin;
-      });
-      return found;
-    }
-    uses(func) {
-      let found;
-      this.mixins.forEach((mixin) => {
-        if (mixin instanceof func) found = true;
-      });
-      return !!found;
-    }
-    on(event, handler) {
-      return on(this, event, handler);
-    }
-    root(name, attributes = {}) {
-      if (name === void 0) return this.__root;
-      let el = document.createElement(name);
-      for (let name2 in attributes) {
-        setAttribute(el, name2, attributes[name2]);
-      }
-      let shadow = this.attachShadow({ mode: "open" });
-      el.appendChild(document.createElement("slot"));
-      shadow.appendChild(el);
-      this.__root = el;
-      return this.__root;
-    }
-  };
-  var UIControl = class extends UIElement {
-    //
-  };
-
-  // js/mixins/mixin.js
-  var Mixin = class {
-    constructor(el, options = {}) {
-      this.el = el;
-      this.grouped = options.grouped === void 0 ? true : false;
-      this.el.mixins = this.el.mixins ? this.el.mixins : /* @__PURE__ */ new Map();
-      this.el.mixins.set(this.constructor.name, this);
-      this.el[this.constructor.name] = true;
-      if (!this.el.use) this.el.use = UIElement.prototype.use.bind(this.el);
-      this.opts = options;
-      this.boot?.({
-        options: (defaults) => {
-          let options2 = defaults;
-          Object.entries(this.opts).forEach(([key, value3]) => {
-            if (value3 !== void 0) {
-              options2[key] = value3;
-            }
-          });
-          this.opts = options2;
-        }
-      });
-      queueMicrotask(() => {
-        this.mount?.();
-      });
-    }
-    options() {
-      return this.opts;
-    }
-    hasGroup() {
-      return !!this.group();
-    }
-    group() {
-      if (this.grouped === false) return;
-      return closest(this.el, (i) => i[this.groupedByType.name])?.use(this.groupedByType);
-    }
-    on(event, handler) {
-      return on(this.el, event, handler);
-    }
-  };
-  var MixinGroup = class extends Mixin {
-    constructor(el, options = {}) {
-      super(el, options);
-    }
-    walker() {
-      return walker(this.el, (el, { skip, reject }) => {
-        if (el[this.constructor.name] && el !== this.el) return reject();
-        if (!el[this.groupOfType.name]) return skip();
-        if (!el.mixins.get(this.groupOfType.name).grouped) return skip();
-      });
-    }
-  };
-
-  // js/mixins/controllable.js
-  var Controllable = class extends Mixin {
-    boot({ options }) {
-      options({
-        bubbles: false
-      });
-      this.initialState = this.el.value;
-      this.getterFunc = () => {
-      };
-      this.setterFunc = (value3) => this.initialState = value3;
-      Object.defineProperty(this.el, "value", {
-        get: () => {
-          return this.getterFunc();
-        },
-        set: (value3) => {
-          this.setterFunc(value3);
-        }
-      });
-    }
-    initial(callback) {
-      callback(this.initialState);
-    }
-    getter(func) {
-      this.getterFunc = func;
-    }
-    setter(func) {
-      this.setterFunc = func;
-    }
-    dispatch() {
-      this.el.dispatchEvent(new Event("input", {
-        bubbles: this.options().bubbles,
-        cancelable: true
-      }));
-      this.el.dispatchEvent(new Event("change", {
-        bubbles: this.options().bubbles,
-        cancelable: true
-      }));
-    }
-  };
-
-  // js/mixins/dialogable.js
-  var lastMouseDownEvent = null;
-  document.addEventListener("mousedown", (event) => lastMouseDownEvent = event);
-  var Dialogable = class extends Mixin {
-    boot({ options }) {
-      options({
-        clickOutside: true,
-        triggers: []
-      });
-      this.onChanges = [];
-      this.state = false;
-      this.stopDialogFromFocusingTheFirstElement();
-      let triggers = this.options().triggers;
-      let observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName !== "open") return;
-          this.el.hasAttribute("open") ? this.state = true : this.state = false;
-        });
-        this.onChanges.forEach((i) => i());
-      });
-      observer.observe(this.el, { attributeFilter: ["open"] });
-      if (this.options().clickOutside) {
-        this.el.addEventListener("click", (e) => {
-          if (e.target !== this.el) {
-            lastMouseDownEvent = null;
-            return;
-          }
-          if (lastMouseDownEvent && clickHappenedOutside(this.el, lastMouseDownEvent) && clickHappenedOutside(this.el, e)) {
-            this.cancel();
-            e.preventDefault();
-            e.stopPropagation();
-          }
-          lastMouseDownEvent = null;
-        });
-      }
-      if (this.el.hasAttribute("open")) {
-        this.state = true;
-        this.hide();
-        this.show();
-      }
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    show() {
-      if (!this.el.isConnected) return;
-      this.el.showModal();
-    }
-    hide() {
-      this.el.close();
-    }
-    toggle() {
-      this.state ? this.hide() : this.show();
-    }
-    cancel() {
-      let event = new Event("cancel", { bubbles: false, cancelable: true });
-      this.el.dispatchEvent(event);
-      if (!event.defaultPrevented) {
-        this.hide();
-      }
-    }
-    getState() {
-      return this.state;
-    }
-    setState(value3) {
-      value3 ? this.show() : this.hide();
-    }
-    // By default, browsers focus the first focusable element inside a dialog when it is opened. This is bad for screen readers because
-    // the focus could potentially be at the end of the dialog skipping all of the content. This also causes issues for iOS devices
-    // as when inputs are focused and the keyboard is shown, hiding half of the dialog content...
-    stopDialogFromFocusingTheFirstElement() {
-      let placeholder = document.createElement("div");
-      placeholder.setAttribute("data-flux-focus-placeholder", "");
-      placeholder.setAttribute("data-appended", "");
-      placeholder.setAttribute("tabindex", "0");
-      this.el.prepend(placeholder);
-      this.onChange(() => {
-        setAttribute2(placeholder, "style", this.state ? "display: none" : "display: block");
-        if (this.state && isSafari() && !this.el.hasAttribute("autofocus") && this.el.querySelectorAll("[autofocus]").length === 0) {
-          setTimeout(() => {
-            this.el.setAttribute("tabindex", "-1");
-            this.el.focus();
-            this.el.blur();
-          });
-        }
-      });
-    }
-  };
-  function clickHappenedOutside(el, event) {
-    let rect = el.getBoundingClientRect();
-    let x = event.clientX;
-    let y = event.clientY;
-    let isInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-    return !isInside;
-  }
-
-  // js/mixins/closeable.js
-  var Closeable = class extends Mixin {
-    boot() {
-      this.onCloses = [];
-    }
-    onClose(callback) {
-      this.onCloses.push(callback);
-    }
-    close() {
-      this.onCloses.forEach((callback) => callback());
-    }
-  };
-
-  // js/modal.js
-  var UIModal = class extends UIElement {
-    boot() {
-      this.querySelectorAll("[data-appended]").forEach((el) => el.remove());
-      this._controllable = new Controllable(this, { disabled: this.hasAttribute("disabled") });
-      let button = this.button();
-      let dialog = this.dialog();
-      if (!dialog) return;
-      dialog._dialogable = new Dialogable(dialog, {
-        clickOutside: !this.hasAttribute("disable-click-outside")
-      });
-      dialog._closeable = new Closeable(dialog);
-      dialog._closeable.onClose(() => dialog._dialogable.hide());
-      this._controllable.initial((initial) => initial && dialog._dialogable.show());
-      this._controllable.getter(() => dialog._dialogable.getState());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        dialog._dialogable.setState(value3);
-      }));
-      dialog._dialogable.onChange(detangled(() => {
-        this._controllable.dispatch();
-      }));
-      let refresh = () => {
-        if (dialog._dialogable.getState()) {
-          setAttribute2(this, "data-open", "");
-          button?.setAttribute("data-open", "");
-          setAttribute2(dialog, "data-open", "");
-        } else {
-          removeAttribute(this, "data-open");
-          button?.removeAttribute("data-open");
-          removeAttribute(dialog, "data-open");
-        }
-      };
-      dialog._dialogable.onChange(() => refresh());
-      refresh();
-      let { lock, unlock } = lockScroll();
-      dialog._dialogable.onChange(() => {
-        dialog._dialogable.getState() ? lock() : unlock();
-      });
-      button && on(button, "click", (e) => {
-        dialog._dialogable.show();
-      });
-    }
-    unmount() {
-      if (this.dialog()?._dialogable?.getState()) {
-        let { unlock } = lockScroll();
-        unlock();
-      }
-    }
-    button() {
-      let button = this.querySelector("button,ui-button");
-      let dialog = this.dialog();
-      if (dialog?.contains(button)) return;
-      return button;
-    }
-    dialog() {
-      return this.querySelector("dialog");
-    }
-    showModal() {
-      let dialog = this.dialog();
-      if (!dialog) return;
-      dialog.showModal();
-    }
-  };
-  inject(({ css }) => css`dialog, ::backdrop { margin: auto; }`);
-  element("modal", UIModal);
-
-  // js/mixins/activatable.js
-  var ActivatableGroup = class extends MixinGroup {
-    groupOfType = Activatable;
-    boot({ options }) {
-      options({
-        wrap: false,
-        filter: false
-      });
-      this.onChanges = [];
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    activated(activeEl) {
-      this.onChanges.forEach((i) => i());
-    }
-    activateFirst() {
-      this.filterAwareWalker().first()?.use(Activatable).activate();
-    }
-    activateBySearch(query) {
-      let found = this.filterAwareWalker().find((i) => i.textContent.toLowerCase().trim().startsWith(query.toLowerCase()));
-      found?.use(Activatable).activate();
-    }
-    activateSelectedOrFirst(selectedEl) {
-      let isHidden = (el) => el.matches("ui-option, ui-option-create") ? getComputedStyle(el).display === "none" : false;
-      if (!selectedEl || isHidden(selectedEl)) {
-        this.filterAwareWalker().first()?.use(Activatable).activate();
-        return;
-      }
-      selectedEl?.use(Activatable).activate();
-    }
-    activateActiveOrFirst() {
-      let active = this.getActive();
-      if (!active) {
-        this.filterAwareWalker().first()?.use(Activatable).activate();
-        return;
-      }
-      active?.use(Activatable).activate();
-    }
-    activateActiveOrLast() {
-      let active = this.getActive();
-      if (!active) {
-        this.filterAwareWalker().last()?.use(Activatable).activate();
-        return;
-      }
-      active?.use(Activatable).activate();
-    }
-    activatePrev() {
-      let active = this.getActive();
-      if (!active) {
-        this.filterAwareWalker().last()?.use(Activatable).activate();
-        return;
-      }
-      let found;
-      if (this.options.wrap) {
-        found = this.filterAwareWalker().prevOrLast(active);
-      } else {
-        found = this.filterAwareWalker().prev(active);
-      }
-      found?.use(Activatable).activate();
-    }
-    activateNext() {
-      let active = this.getActive();
-      if (!active) {
-        this.filterAwareWalker().first()?.use(Activatable).activate();
-        return;
-      }
-      let found;
-      if (this.options.wrap) {
-        found = this.filterAwareWalker().nextOrFirst(active);
-      } else {
-        found = this.filterAwareWalker().next(active);
-      }
-      found?.use(Activatable).activate();
-    }
-    getActive() {
-      return this.walker().find((i) => i.use(Activatable).isActive());
-    }
-    clearActive() {
-      this.getActive()?.use(Activatable).deactivate();
-    }
-    filterAwareWalker() {
-      let isHidden = (el) => el.matches("ui-option, ui-option-create") ? getComputedStyle(el).display === "none" : false;
-      return walker(this.el, (el, { skip, reject }) => {
-        if (el[this.constructor.name] && el !== this.el) return reject();
-        if (!el[this.groupOfType.name]) return skip();
-        if (el.hasAttribute("disabled")) return reject();
-        if (isHidden(el)) return reject();
-      });
-    }
-  };
-  var Activatable = class _Activatable extends Mixin {
-    groupedByType = ActivatableGroup;
-    mount() {
-      this.el.addEventListener("mouseenter", () => {
-        this.activate();
-      });
-      this.el.addEventListener("mouseleave", () => {
-        this.deactivate();
-      });
-    }
-    activate(force = false) {
-      if (this.group()) {
-        this.group().walker().each((item) => item.use(_Activatable).deactivate(false));
-      }
-      if (this.el.hasAttribute("disabled") && !force) return;
-      setAttribute2(this.el, "data-active", "");
-      if (isUsingKeyboard()) {
-        this.el.scrollIntoView({ block: "nearest" });
-      }
-      this.group() && this.group().activated(this.el);
-    }
-    deactivate(notify = true) {
-      removeAttribute(this.el, "data-active");
-      notify && this.group() && this.group().activated(this.el);
-    }
-    isActive() {
-      return this.el.hasAttribute("data-active");
-    }
-  };
-
-  // js/mixins/filterable.js
-  var FilterableGroup = class extends MixinGroup {
-    groupOfType = Filterable;
-    boot({ options }) {
-      options({});
-      this.onChanges = [];
-      this.lastSearch = "";
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    filter(search2) {
-      if (search2 === "") {
-        this.walker().each((i) => {
-          i.use(Filterable).unfilter();
-        });
-      } else {
-        this.walker().each((i) => {
-          if (this.matches(i, search2)) {
-            i.use(Filterable).unfilter();
-          } else {
-            i.use(Filterable).filter();
-          }
-        });
-      }
-      if (this.lastSearch !== search2) {
-        this.onChanges.forEach((i) => i());
-      }
-      this.lastSearch = search2;
-    }
-    matches(el, search2) {
-      return this.normalize(el.textContent).includes(this.normalize(search2));
-    }
-    // This function normalizes the value to remove diacritics (accents) and convert to lowercase
-    // to ensure that the search is case-insensitive and diacritic-insensitive...
-    normalize(value3) {
-      return value3.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase().trim();
-    }
-    hasResults() {
-      return this.walker().some((i) => !i.use(Filterable).isFiltered());
-    }
-  };
-  var Filterable = class extends Mixin {
-    groupedByType = FilterableGroup;
-    boot({ options }) {
-      options({ mirror: null, keep: false });
-      this.onChanges = [];
-    }
-    filter() {
-      if (this.options().keep) return;
-      setAttribute2(this.el, "data-hidden", "");
-      if (this.options().mirror) setAttribute2(this.options().mirror, "data-hidden", "");
-    }
-    unfilter() {
-      if (this.options().keep) return;
-      removeAttribute(this.el, "data-hidden");
-      if (this.options().mirror) removeAttribute(this.options().mirror, "data-hidden", "");
-    }
-    isFiltered() {
-      return this.el.hasAttribute("data-hidden");
-    }
-  };
-
-  // js/mixins/popoverable.js
-  var currentlyOpenPopoversByScope = /* @__PURE__ */ new Map();
-  var Popoverable = class extends Mixin {
-    boot({ options }) {
-      options({ triggers: [], scope: null });
-      let scope = this.options().scope || "global";
-      setAttribute2(this.el, "popover", "manual");
-      this.triggers = this.options().triggers;
-      this.onChanges = [];
-      this.state = false;
-      on(this.el, "beforetoggle", (e) => {
-        let oldState = this.state;
-        this.state = e.newState === "open";
-        if (this.state) {
-          closeOtherOpenPopovers(this.el, scope);
-          let controller = new AbortController();
-          let activeElement = document.activeElement;
-          let triggers = [...this.triggers, activeElement];
-          setTimeout(() => {
-            closeOnClickOutside(this.el, triggers, controller);
-            closeOnFocusAway(this.el, triggers, controller);
-            closeOnEscape(this.el, triggers, controller);
-          });
-          this.el.addEventListener("beforetoggle", (e2) => {
-            if (e2.newState === "closed") {
-              controller.abort();
-              activeElement?.focus();
-            }
-          }, { signal: controller.signal });
-        }
-        if (oldState !== this.state) {
-          this.onChanges.forEach((i) => i(this.state, oldState));
-        }
-      });
-      on(this.el, "toggle", (e) => {
-        if (e.newState === "open") {
-          if (!currentlyOpenPopoversByScope.has(scope)) {
-            currentlyOpenPopoversByScope.set(scope, /* @__PURE__ */ new Set());
-          }
-          currentlyOpenPopoversByScope.get(scope).add(this.el);
-        } else if (e.newState === "closed") {
-          if (!currentlyOpenPopoversByScope.has(scope)) return;
-          currentlyOpenPopoversByScope.get(scope).delete(this.el);
-          if (currentlyOpenPopoversByScope.get(scope).size === 0) {
-            currentlyOpenPopoversByScope.delete(scope);
-          }
-        }
-      });
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    setState(value3) {
-      value3 ? this.show() : this.hide();
-    }
-    getState() {
-      return this.state;
-    }
-    toggle() {
-      this.el.isConnected && this.el.togglePopover();
-    }
-    show() {
-      this.el.isConnected && this.el.showPopover();
-    }
-    hide() {
-      this.el.isConnected && this.el.hidePopover();
-    }
-  };
-  function closeOtherOpenPopovers(el, scope) {
-    if (!currentlyOpenPopoversByScope.has(scope)) return;
-    currentlyOpenPopoversByScope.get(scope).forEach((popoverEl) => {
-      if (el.contains(popoverEl) || popoverEl.contains(el)) return;
-      popoverEl.hidePopover();
-    });
-  }
-  function closeOnClickOutside(el, except, controller) {
-    document.addEventListener("click", (e) => {
-      if (el.contains(e.target) || except.includes(e.target)) return;
-      el.hidePopover();
-    }, { signal: controller.signal });
-  }
-  function closeOnFocusAway(el, except, controller) {
-    document.addEventListener("focusin", (e) => {
-      if (el.contains(e.target) || except.includes(e.target)) return;
-      controller.abort();
-      el.hidePopover();
-    }, {
-      // Without "capture: true", when you focus away from the popover onto an element that triggers a popover
-      // on focus (a tooltip), it will focus back this popover's trigger instead of keeping focus on the tooltip button.
-      // It does this because only one popover can be open at a time, so focusing the tooltip, opens a popover, closing this one,
-      // which will trigger the "focus back" behavior.
-      capture: true,
-      signal: controller.signal
-    });
-  }
-  function closeOnEscape(el, except, controller) {
-    document.addEventListener("keydown", (e) => {
-      if (e.key !== "Escape") return;
-      el.hidePopover();
-    }, { signal: controller.signal });
-  }
-
-  // js/mixins/disableable.js
-  var Disableable = class extends Mixin {
-    boot({ options }) {
-      options({
-        disableWithParent: true
-      });
-      this.onChanges = [];
-      Object.defineProperty(this.el, "disabled", {
-        get: () => {
-          return this.el.hasAttribute("disabled");
-        },
-        set: (value3) => {
-          if (value3) {
-            this.el.setAttribute("disabled", "");
-          } else {
-            this.el.removeAttribute("disabled");
-          }
-        }
-      });
-      if (this.el.hasAttribute("disabled")) {
-        this.el.disabled = true;
-      } else if (this.options().disableWithParent && this.el.parentElement?.closest("[disabled]")) {
-        this.el.disabled = true;
-      }
-      let observer = new MutationObserver((mutations) => {
-        this.onChanges.forEach((i) => i(this.el.disabled));
-      });
-      observer.observe(this.el, { attributeFilter: ["disabled"] });
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    onInitAndChange(callback) {
-      callback(this.el.disabled);
-      this.onChanges.push(callback);
-    }
-    enabled(callback) {
-      return (...args) => {
-        if (this.el.disabled) return;
-        return callback(...args);
-      };
-    }
-    disabled(callback) {
-      return (...args) => {
-        if (!this.el.disabled) return;
-        return callback(...args);
-      };
-    }
-    isDisabled() {
-      return this.el.disabled;
-    }
-  };
-
-  // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
-  var min = Math.min;
-  var max = Math.max;
-  var round = Math.round;
-  var floor = Math.floor;
-  var createCoords = (v) => ({
-    x: v,
-    y: v
-  });
-  var oppositeSideMap = {
-    left: "right",
-    right: "left",
-    bottom: "top",
-    top: "bottom"
-  };
-  var oppositeAlignmentMap = {
-    start: "end",
-    end: "start"
-  };
-  function clamp(start, value3, end) {
-    return max(start, min(value3, end));
-  }
-  function evaluate(value3, param) {
-    return typeof value3 === "function" ? value3(param) : value3;
-  }
-  function getSide(placement) {
-    return placement.split("-")[0];
-  }
-  function getAlignment(placement) {
-    return placement.split("-")[1];
-  }
-  function getOppositeAxis(axis) {
-    return axis === "x" ? "y" : "x";
-  }
-  function getAxisLength(axis) {
-    return axis === "y" ? "height" : "width";
-  }
-  function getSideAxis(placement) {
-    return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
-  }
-  function getAlignmentAxis(placement) {
-    return getOppositeAxis(getSideAxis(placement));
-  }
-  function getAlignmentSides(placement, rects, rtl) {
-    if (rtl === void 0) {
-      rtl = false;
-    }
-    const alignment = getAlignment(placement);
-    const alignmentAxis = getAlignmentAxis(placement);
-    const length = getAxisLength(alignmentAxis);
-    let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
-    if (rects.reference[length] > rects.floating[length]) {
-      mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
-    }
-    return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
-  }
-  function getExpandedPlacements(placement) {
-    const oppositePlacement = getOppositePlacement(placement);
-    return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
-  }
-  function getOppositeAlignmentPlacement(placement) {
-    return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
-  }
-  function getSideList(side, isStart, rtl) {
-    const lr = ["left", "right"];
-    const rl = ["right", "left"];
-    const tb = ["top", "bottom"];
-    const bt = ["bottom", "top"];
-    switch (side) {
-      case "top":
-      case "bottom":
-        if (rtl) return isStart ? rl : lr;
-        return isStart ? lr : rl;
-      case "left":
-      case "right":
-        return isStart ? tb : bt;
-      default:
-        return [];
-    }
-  }
-  function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
-    const alignment = getAlignment(placement);
-    let list = getSideList(getSide(placement), direction === "start", rtl);
-    if (alignment) {
-      list = list.map((side) => side + "-" + alignment);
-      if (flipAlignment) {
-        list = list.concat(list.map(getOppositeAlignmentPlacement));
-      }
-    }
-    return list;
-  }
-  function getOppositePlacement(placement) {
-    return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
-  }
-  function expandPaddingObject(padding) {
-    return {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      ...padding
-    };
-  }
-  function getPaddingObject(padding) {
-    return typeof padding !== "number" ? expandPaddingObject(padding) : {
-      top: padding,
-      right: padding,
-      bottom: padding,
-      left: padding
-    };
-  }
-  function rectToClientRect(rect) {
-    const {
-      x,
-      y,
-      width,
-      height
-    } = rect;
-    return {
-      width,
-      height,
-      top: y,
-      left: x,
-      right: x + width,
-      bottom: y + height,
-      x,
-      y
-    };
-  }
-
-  // node_modules/@floating-ui/core/dist/floating-ui.core.mjs
-  function computeCoordsFromPlacement(_ref, placement, rtl) {
-    let {
-      reference,
-      floating
-    } = _ref;
-    const sideAxis = getSideAxis(placement);
-    const alignmentAxis = getAlignmentAxis(placement);
-    const alignLength = getAxisLength(alignmentAxis);
-    const side = getSide(placement);
-    const isVertical = sideAxis === "y";
-    const commonX = reference.x + reference.width / 2 - floating.width / 2;
-    const commonY = reference.y + reference.height / 2 - floating.height / 2;
-    const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
-    let coords;
-    switch (side) {
-      case "top":
-        coords = {
-          x: commonX,
-          y: reference.y - floating.height
-        };
-        break;
-      case "bottom":
-        coords = {
-          x: commonX,
-          y: reference.y + reference.height
-        };
-        break;
-      case "right":
-        coords = {
-          x: reference.x + reference.width,
-          y: commonY
-        };
-        break;
-      case "left":
-        coords = {
-          x: reference.x - floating.width,
-          y: commonY
-        };
-        break;
-      default:
-        coords = {
-          x: reference.x,
-          y: reference.y
-        };
-    }
-    switch (getAlignment(placement)) {
-      case "start":
-        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
-        break;
-      case "end":
-        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
-        break;
-    }
-    return coords;
-  }
-  var computePosition = async (reference, floating, config) => {
-    const {
-      placement = "bottom",
-      strategy = "absolute",
-      middleware = [],
-      platform: platform2
-    } = config;
-    const validMiddleware = middleware.filter(Boolean);
-    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
-    let rects = await platform2.getElementRects({
-      reference,
-      floating,
-      strategy
-    });
-    let {
-      x,
-      y
-    } = computeCoordsFromPlacement(rects, placement, rtl);
-    let statefulPlacement = placement;
-    let middlewareData = {};
-    let resetCount = 0;
-    for (let i = 0; i < validMiddleware.length; i++) {
-      const {
-        name,
-        fn
-      } = validMiddleware[i];
-      const {
-        x: nextX,
-        y: nextY,
-        data,
-        reset
-      } = await fn({
-        x,
-        y,
-        initialPlacement: placement,
-        placement: statefulPlacement,
-        strategy,
-        middlewareData,
-        rects,
-        platform: platform2,
-        elements: {
-          reference,
-          floating
-        }
-      });
-      x = nextX != null ? nextX : x;
-      y = nextY != null ? nextY : y;
-      middlewareData = {
-        ...middlewareData,
-        [name]: {
-          ...middlewareData[name],
-          ...data
-        }
-      };
-      if (reset && resetCount <= 50) {
-        resetCount++;
-        if (typeof reset === "object") {
-          if (reset.placement) {
-            statefulPlacement = reset.placement;
-          }
-          if (reset.rects) {
-            rects = reset.rects === true ? await platform2.getElementRects({
-              reference,
-              floating,
-              strategy
-            }) : reset.rects;
-          }
-          ({
-            x,
-            y
-          } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
-        }
-        i = -1;
-      }
-    }
-    return {
-      x,
-      y,
-      placement: statefulPlacement,
-      strategy,
-      middlewareData
-    };
-  };
-  async function detectOverflow(state, options) {
-    var _await$platform$isEle;
-    if (options === void 0) {
-      options = {};
-    }
-    const {
-      x,
-      y,
-      platform: platform2,
-      rects,
-      elements,
-      strategy
-    } = state;
-    const {
-      boundary = "clippingAncestors",
-      rootBoundary = "viewport",
-      elementContext = "floating",
-      altBoundary = false,
-      padding = 0
-    } = evaluate(options, state);
-    const paddingObject = getPaddingObject(padding);
-    const altContext = elementContext === "floating" ? "reference" : "floating";
-    const element2 = elements[altBoundary ? altContext : elementContext];
-    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
-      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element2))) != null ? _await$platform$isEle : true) ? element2 : element2.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
-      boundary,
-      rootBoundary,
-      strategy
-    }));
-    const rect = elementContext === "floating" ? {
-      x,
-      y,
-      width: rects.floating.width,
-      height: rects.floating.height
-    } : rects.reference;
-    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
-    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
-      x: 1,
-      y: 1
-    } : {
-      x: 1,
-      y: 1
-    };
-    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
-      elements,
-      rect,
-      offsetParent,
-      strategy
-    }) : rect);
-    return {
-      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-    };
-  }
-  var flip = function(options) {
-    if (options === void 0) {
-      options = {};
-    }
-    return {
-      name: "flip",
-      options,
-      async fn(state) {
-        var _middlewareData$arrow, _middlewareData$flip;
-        const {
-          placement,
-          middlewareData,
-          rects,
-          initialPlacement,
-          platform: platform2,
-          elements
-        } = state;
-        const {
-          mainAxis: checkMainAxis = true,
-          crossAxis: checkCrossAxis = true,
-          fallbackPlacements: specifiedFallbackPlacements,
-          fallbackStrategy = "bestFit",
-          fallbackAxisSideDirection = "none",
-          flipAlignment = true,
-          ...detectOverflowOptions
-        } = evaluate(options, state);
-        if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
-          return {};
-        }
-        const side = getSide(placement);
-        const initialSideAxis = getSideAxis(initialPlacement);
-        const isBasePlacement = getSide(initialPlacement) === initialPlacement;
-        const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
-        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-        const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
-        if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
-          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
-        }
-        const placements2 = [initialPlacement, ...fallbackPlacements];
-        const overflow = await detectOverflow(state, detectOverflowOptions);
-        const overflows = [];
-        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
-        if (checkMainAxis) {
-          overflows.push(overflow[side]);
-        }
-        if (checkCrossAxis) {
-          const sides2 = getAlignmentSides(placement, rects, rtl);
-          overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
-        }
-        overflowsData = [...overflowsData, {
-          placement,
-          overflows
-        }];
-        if (!overflows.every((side2) => side2 <= 0)) {
-          var _middlewareData$flip2, _overflowsData$filter;
-          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
-          const nextPlacement = placements2[nextIndex];
-          if (nextPlacement) {
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
-          }
-          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
-          if (!resetPlacement) {
-            switch (fallbackStrategy) {
-              case "bestFit": {
-                var _overflowsData$filter2;
-                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
-                  if (hasFallbackAxisSideDirection) {
-                    const currentSideAxis = getSideAxis(d.placement);
-                    return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
-                    // reading directions favoring greater width.
-                    currentSideAxis === "y";
-                  }
-                  return true;
-                }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
-                if (placement2) {
-                  resetPlacement = placement2;
-                }
-                break;
-              }
-              case "initialPlacement":
-                resetPlacement = initialPlacement;
-                break;
-            }
-          }
-          if (placement !== resetPlacement) {
-            return {
-              reset: {
-                placement: resetPlacement
-              }
-            };
-          }
-        }
-        return {};
-      }
-    };
-  };
-  async function convertValueToCoords(state, options) {
-    const {
-      placement,
-      platform: platform2,
-      elements
-    } = state;
-    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
-    const side = getSide(placement);
-    const alignment = getAlignment(placement);
-    const isVertical = getSideAxis(placement) === "y";
-    const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
-    const crossAxisMulti = rtl && isVertical ? -1 : 1;
-    const rawValue = evaluate(options, state);
-    let {
-      mainAxis,
-      crossAxis,
-      alignmentAxis
-    } = typeof rawValue === "number" ? {
-      mainAxis: rawValue,
-      crossAxis: 0,
-      alignmentAxis: null
-    } : {
-      mainAxis: rawValue.mainAxis || 0,
-      crossAxis: rawValue.crossAxis || 0,
-      alignmentAxis: rawValue.alignmentAxis
-    };
-    if (alignment && typeof alignmentAxis === "number") {
-      crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
-    }
-    return isVertical ? {
-      x: crossAxis * crossAxisMulti,
-      y: mainAxis * mainAxisMulti
-    } : {
-      x: mainAxis * mainAxisMulti,
-      y: crossAxis * crossAxisMulti
-    };
-  }
-  var offset = function(options) {
-    if (options === void 0) {
-      options = 0;
-    }
-    return {
-      name: "offset",
-      options,
-      async fn(state) {
-        var _middlewareData$offse, _middlewareData$arrow;
-        const {
-          x,
-          y,
-          placement,
-          middlewareData
-        } = state;
-        const diffCoords = await convertValueToCoords(state, options);
-        if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
-          return {};
-        }
-        return {
-          x: x + diffCoords.x,
-          y: y + diffCoords.y,
-          data: {
-            ...diffCoords,
-            placement
-          }
-        };
-      }
-    };
-  };
-  var shift = function(options) {
-    if (options === void 0) {
-      options = {};
-    }
-    return {
-      name: "shift",
-      options,
-      async fn(state) {
-        const {
-          x,
-          y,
-          placement
-        } = state;
-        const {
-          mainAxis: checkMainAxis = true,
-          crossAxis: checkCrossAxis = false,
-          limiter = {
-            fn: (_ref) => {
-              let {
-                x: x2,
-                y: y2
-              } = _ref;
-              return {
-                x: x2,
-                y: y2
-              };
-            }
-          },
-          ...detectOverflowOptions
-        } = evaluate(options, state);
-        const coords = {
-          x,
-          y
-        };
-        const overflow = await detectOverflow(state, detectOverflowOptions);
-        const crossAxis = getSideAxis(getSide(placement));
-        const mainAxis = getOppositeAxis(crossAxis);
-        let mainAxisCoord = coords[mainAxis];
-        let crossAxisCoord = coords[crossAxis];
-        if (checkMainAxis) {
-          const minSide = mainAxis === "y" ? "top" : "left";
-          const maxSide = mainAxis === "y" ? "bottom" : "right";
-          const min2 = mainAxisCoord + overflow[minSide];
-          const max2 = mainAxisCoord - overflow[maxSide];
-          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
-        }
-        if (checkCrossAxis) {
-          const minSide = crossAxis === "y" ? "top" : "left";
-          const maxSide = crossAxis === "y" ? "bottom" : "right";
-          const min2 = crossAxisCoord + overflow[minSide];
-          const max2 = crossAxisCoord - overflow[maxSide];
-          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
-        }
-        const limitedCoords = limiter.fn({
-          ...state,
-          [mainAxis]: mainAxisCoord,
-          [crossAxis]: crossAxisCoord
-        });
-        return {
-          ...limitedCoords,
-          data: {
-            x: limitedCoords.x - x,
-            y: limitedCoords.y - y,
-            enabled: {
-              [mainAxis]: checkMainAxis,
-              [crossAxis]: checkCrossAxis
-            }
-          }
-        };
-      }
-    };
-  };
-  var size = function(options) {
-    if (options === void 0) {
-      options = {};
-    }
-    return {
-      name: "size",
-      options,
-      async fn(state) {
-        var _state$middlewareData, _state$middlewareData2;
-        const {
-          placement,
-          rects,
-          platform: platform2,
-          elements
-        } = state;
-        const {
-          apply: apply3 = () => {
-          },
-          ...detectOverflowOptions
-        } = evaluate(options, state);
-        const overflow = await detectOverflow(state, detectOverflowOptions);
-        const side = getSide(placement);
-        const alignment = getAlignment(placement);
-        const isYAxis = getSideAxis(placement) === "y";
-        const {
-          width,
-          height
-        } = rects.floating;
-        let heightSide;
-        let widthSide;
-        if (side === "top" || side === "bottom") {
-          heightSide = side;
-          widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
-        } else {
-          widthSide = side;
-          heightSide = alignment === "end" ? "top" : "bottom";
-        }
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
-        const maximumClippingWidth = width - overflow.left - overflow.right;
-        const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
-        const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
-        const noShift = !state.middlewareData.shift;
-        let availableHeight = overflowAvailableHeight;
-        let availableWidth = overflowAvailableWidth;
-        if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
-          availableWidth = maximumClippingWidth;
-        }
-        if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
-          availableHeight = maximumClippingHeight;
-        }
-        if (noShift && !alignment) {
-          const xMin = max(overflow.left, 0);
-          const xMax = max(overflow.right, 0);
-          const yMin = max(overflow.top, 0);
-          const yMax = max(overflow.bottom, 0);
-          if (isYAxis) {
-            availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
-          } else {
-            availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
-          }
-        }
-        await apply3({
-          ...state,
-          availableWidth,
-          availableHeight
-        });
-        const nextDimensions = await platform2.getDimensions(elements.floating);
-        if (width !== nextDimensions.width || height !== nextDimensions.height) {
-          return {
-            reset: {
-              rects: true
-            }
-          };
-        }
-        return {};
-      }
-    };
-  };
-
-  // node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
-  function hasWindow() {
-    return typeof window !== "undefined";
-  }
-  function getNodeName(node) {
-    if (isNode(node)) {
-      return (node.nodeName || "").toLowerCase();
-    }
-    return "#document";
-  }
-  function getWindow(node) {
-    var _node$ownerDocument;
-    return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-  }
-  function getDocumentElement(node) {
-    var _ref;
-    return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-  }
-  function isNode(value3) {
-    if (!hasWindow()) {
-      return false;
-    }
-    return value3 instanceof Node || value3 instanceof getWindow(value3).Node;
-  }
-  function isElement(value3) {
-    if (!hasWindow()) {
-      return false;
-    }
-    return value3 instanceof Element || value3 instanceof getWindow(value3).Element;
-  }
-  function isHTMLElement(value3) {
-    if (!hasWindow()) {
-      return false;
-    }
-    return value3 instanceof HTMLElement || value3 instanceof getWindow(value3).HTMLElement;
-  }
-  function isShadowRoot(value3) {
-    if (!hasWindow() || typeof ShadowRoot === "undefined") {
-      return false;
-    }
-    return value3 instanceof ShadowRoot || value3 instanceof getWindow(value3).ShadowRoot;
-  }
-  function isOverflowElement(element2) {
-    const {
-      overflow,
-      overflowX,
-      overflowY,
-      display
-    } = getComputedStyle2(element2);
-    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
-  }
-  function isTableElement(element2) {
-    return ["table", "td", "th"].includes(getNodeName(element2));
-  }
-  function isTopLayer(element2) {
-    return [":popover-open", ":modal"].some((selector) => {
-      try {
-        return element2.matches(selector);
-      } catch (e) {
-        return false;
-      }
-    });
-  }
-  function isContainingBlock(elementOrCss) {
-    const webkit = isWebKit();
-    const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-    return ["transform", "translate", "scale", "rotate", "perspective"].some((value3) => css[value3] ? css[value3] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((value3) => (css.willChange || "").includes(value3)) || ["paint", "layout", "strict", "content"].some((value3) => (css.contain || "").includes(value3));
-  }
-  function getContainingBlock(element2) {
-    let currentNode = getParentNode(element2);
-    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-      if (isContainingBlock(currentNode)) {
-        return currentNode;
-      } else if (isTopLayer(currentNode)) {
-        return null;
-      }
-      currentNode = getParentNode(currentNode);
-    }
-    return null;
-  }
-  function isWebKit() {
-    if (typeof CSS === "undefined" || !CSS.supports) return false;
-    return CSS.supports("-webkit-backdrop-filter", "none");
-  }
-  function isLastTraversableNode(node) {
-    return ["html", "body", "#document"].includes(getNodeName(node));
-  }
-  function getComputedStyle2(element2) {
-    return getWindow(element2).getComputedStyle(element2);
-  }
-  function getNodeScroll(element2) {
-    if (isElement(element2)) {
-      return {
-        scrollLeft: element2.scrollLeft,
-        scrollTop: element2.scrollTop
-      };
-    }
-    return {
-      scrollLeft: element2.scrollX,
-      scrollTop: element2.scrollY
-    };
-  }
-  function getParentNode(node) {
-    if (getNodeName(node) === "html") {
-      return node;
-    }
-    const result = (
-      // Step into the shadow DOM of the parent of a slotted node.
-      node.assignedSlot || // DOM Element detected.
-      node.parentNode || // ShadowRoot detected.
-      isShadowRoot(node) && node.host || // Fallback.
-      getDocumentElement(node)
-    );
-    return isShadowRoot(result) ? result.host : result;
-  }
-  function getNearestOverflowAncestor(node) {
-    const parentNode = getParentNode(node);
-    if (isLastTraversableNode(parentNode)) {
-      return node.ownerDocument ? node.ownerDocument.body : node.body;
-    }
-    if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-      return parentNode;
-    }
-    return getNearestOverflowAncestor(parentNode);
-  }
-  function getOverflowAncestors(node, list, traverseIframes) {
-    var _node$ownerDocument2;
-    if (list === void 0) {
-      list = [];
-    }
-    if (traverseIframes === void 0) {
-      traverseIframes = true;
-    }
-    const scrollableAncestor = getNearestOverflowAncestor(node);
-    const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
-    const win = getWindow(scrollableAncestor);
-    if (isBody) {
-      const frameElement = getFrameElement(win);
-      return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-    }
-    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
-  }
-  function getFrameElement(win) {
-    return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
-  }
-
-  // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
-  function getCssDimensions(element2) {
-    const css = getComputedStyle2(element2);
-    let width = parseFloat(css.width) || 0;
-    let height = parseFloat(css.height) || 0;
-    const hasOffset = isHTMLElement(element2);
-    const offsetWidth = hasOffset ? element2.offsetWidth : width;
-    const offsetHeight = hasOffset ? element2.offsetHeight : height;
-    const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
-    if (shouldFallback) {
-      width = offsetWidth;
-      height = offsetHeight;
-    }
-    return {
-      width,
-      height,
-      $: shouldFallback
-    };
-  }
-  function unwrapElement(element2) {
-    return !isElement(element2) ? element2.contextElement : element2;
-  }
-  function getScale(element2) {
-    const domElement = unwrapElement(element2);
-    if (!isHTMLElement(domElement)) {
-      return createCoords(1);
-    }
-    const rect = domElement.getBoundingClientRect();
-    const {
-      width,
-      height,
-      $
-    } = getCssDimensions(domElement);
-    let x = ($ ? round(rect.width) : rect.width) / width;
-    let y = ($ ? round(rect.height) : rect.height) / height;
-    if (!x || !Number.isFinite(x)) {
-      x = 1;
-    }
-    if (!y || !Number.isFinite(y)) {
-      y = 1;
-    }
-    return {
-      x,
-      y
-    };
-  }
-  var noOffsets = /* @__PURE__ */ createCoords(0);
-  function getVisualOffsets(element2) {
-    const win = getWindow(element2);
-    if (!isWebKit() || !win.visualViewport) {
-      return noOffsets;
-    }
-    return {
-      x: win.visualViewport.offsetLeft,
-      y: win.visualViewport.offsetTop
-    };
-  }
-  function shouldAddVisualOffsets(element2, isFixed, floatingOffsetParent) {
-    if (isFixed === void 0) {
-      isFixed = false;
-    }
-    if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element2)) {
-      return false;
-    }
-    return isFixed;
-  }
-  function getBoundingClientRect(element2, includeScale, isFixedStrategy, offsetParent) {
-    if (includeScale === void 0) {
-      includeScale = false;
-    }
-    if (isFixedStrategy === void 0) {
-      isFixedStrategy = false;
-    }
-    const clientRect = element2.getBoundingClientRect();
-    const domElement = unwrapElement(element2);
-    let scale = createCoords(1);
-    if (includeScale) {
-      if (offsetParent) {
-        if (isElement(offsetParent)) {
-          scale = getScale(offsetParent);
-        }
-      } else {
-        scale = getScale(element2);
-      }
-    }
-    const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
-    let x = (clientRect.left + visualOffsets.x) / scale.x;
-    let y = (clientRect.top + visualOffsets.y) / scale.y;
-    let width = clientRect.width / scale.x;
-    let height = clientRect.height / scale.y;
-    if (domElement) {
-      const win = getWindow(domElement);
-      const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-      let currentWin = win;
-      let currentIFrame = getFrameElement(currentWin);
-      while (currentIFrame && offsetParent && offsetWin !== currentWin) {
-        const iframeScale = getScale(currentIFrame);
-        const iframeRect = currentIFrame.getBoundingClientRect();
-        const css = getComputedStyle2(currentIFrame);
-        const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-        const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
-        x *= iframeScale.x;
-        y *= iframeScale.y;
-        width *= iframeScale.x;
-        height *= iframeScale.y;
-        x += left;
-        y += top;
-        currentWin = getWindow(currentIFrame);
-        currentIFrame = getFrameElement(currentWin);
-      }
-    }
-    return rectToClientRect({
-      width,
-      height,
-      x,
-      y
-    });
-  }
-  function getWindowScrollBarX(element2, rect) {
-    const leftScroll = getNodeScroll(element2).scrollLeft;
-    if (!rect) {
-      return getBoundingClientRect(getDocumentElement(element2)).left + leftScroll;
-    }
-    return rect.left + leftScroll;
-  }
-  function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-    if (ignoreScrollbarX === void 0) {
-      ignoreScrollbarX = false;
-    }
-    const htmlRect = documentElement.getBoundingClientRect();
-    const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
-      // RTL <body> scrollbar.
-      getWindowScrollBarX(documentElement, htmlRect)
-    ));
-    const y = htmlRect.top + scroll.scrollTop;
-    return {
-      x,
-      y
-    };
-  }
-  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
-    let {
-      elements,
-      rect,
-      offsetParent,
-      strategy
-    } = _ref;
-    const isFixed = strategy === "fixed";
-    const documentElement = getDocumentElement(offsetParent);
-    const topLayer = elements ? isTopLayer(elements.floating) : false;
-    if (offsetParent === documentElement || topLayer && isFixed) {
-      return rect;
-    }
-    let scroll = {
-      scrollLeft: 0,
-      scrollTop: 0
-    };
-    let scale = createCoords(1);
-    const offsets = createCoords(0);
-    const isOffsetParentAnElement = isHTMLElement(offsetParent);
-    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
-        scroll = getNodeScroll(offsetParent);
-      }
-      if (isHTMLElement(offsetParent)) {
-        const offsetRect = getBoundingClientRect(offsetParent);
-        scale = getScale(offsetParent);
-        offsets.x = offsetRect.x + offsetParent.clientLeft;
-        offsets.y = offsetRect.y + offsetParent.clientTop;
-      }
-    }
-    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
-    return {
-      width: rect.width * scale.x,
-      height: rect.height * scale.y,
-      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
-      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
-    };
-  }
-  function getClientRects(element2) {
-    return Array.from(element2.getClientRects());
-  }
-  function getDocumentRect(element2) {
-    const html = getDocumentElement(element2);
-    const scroll = getNodeScroll(element2);
-    const body = element2.ownerDocument.body;
-    const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
-    const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
-    let x = -scroll.scrollLeft + getWindowScrollBarX(element2);
-    const y = -scroll.scrollTop;
-    if (getComputedStyle2(body).direction === "rtl") {
-      x += max(html.clientWidth, body.clientWidth) - width;
-    }
-    return {
-      width,
-      height,
-      x,
-      y
-    };
-  }
-  function getViewportRect(element2, strategy) {
-    const win = getWindow(element2);
-    const html = getDocumentElement(element2);
-    const visualViewport = win.visualViewport;
-    let width = html.clientWidth;
-    let height = html.clientHeight;
-    let x = 0;
-    let y = 0;
-    if (visualViewport) {
-      width = visualViewport.width;
-      height = visualViewport.height;
-      const visualViewportBased = isWebKit();
-      if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
-        x = visualViewport.offsetLeft;
-        y = visualViewport.offsetTop;
-      }
-    }
-    return {
-      width,
-      height,
-      x,
-      y
-    };
-  }
-  function getInnerBoundingClientRect(element2, strategy) {
-    const clientRect = getBoundingClientRect(element2, true, strategy === "fixed");
-    const top = clientRect.top + element2.clientTop;
-    const left = clientRect.left + element2.clientLeft;
-    const scale = isHTMLElement(element2) ? getScale(element2) : createCoords(1);
-    const width = element2.clientWidth * scale.x;
-    const height = element2.clientHeight * scale.y;
-    const x = left * scale.x;
-    const y = top * scale.y;
-    return {
-      width,
-      height,
-      x,
-      y
-    };
-  }
-  function getClientRectFromClippingAncestor(element2, clippingAncestor, strategy) {
-    let rect;
-    if (clippingAncestor === "viewport") {
-      rect = getViewportRect(element2, strategy);
-    } else if (clippingAncestor === "document") {
-      rect = getDocumentRect(getDocumentElement(element2));
-    } else if (isElement(clippingAncestor)) {
-      rect = getInnerBoundingClientRect(clippingAncestor, strategy);
-    } else {
-      const visualOffsets = getVisualOffsets(element2);
-      rect = {
-        x: clippingAncestor.x - visualOffsets.x,
-        y: clippingAncestor.y - visualOffsets.y,
-        width: clippingAncestor.width,
-        height: clippingAncestor.height
-      };
-    }
-    return rectToClientRect(rect);
-  }
-  function hasFixedPositionAncestor(element2, stopNode) {
-    const parentNode = getParentNode(element2);
-    if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
-      return false;
-    }
-    return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
-  }
-  function getClippingElementAncestors(element2, cache) {
-    const cachedResult = cache.get(element2);
-    if (cachedResult) {
-      return cachedResult;
-    }
-    let result = getOverflowAncestors(element2, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
-    let currentContainingBlockComputedStyle = null;
-    const elementIsFixed = getComputedStyle2(element2).position === "fixed";
-    let currentNode = elementIsFixed ? getParentNode(element2) : element2;
-    while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-      const computedStyle = getComputedStyle2(currentNode);
-      const currentNodeIsContaining = isContainingBlock(currentNode);
-      if (!currentNodeIsContaining && computedStyle.position === "fixed") {
-        currentContainingBlockComputedStyle = null;
-      }
-      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element2, currentNode);
-      if (shouldDropCurrentNode) {
-        result = result.filter((ancestor) => ancestor !== currentNode);
-      } else {
-        currentContainingBlockComputedStyle = computedStyle;
-      }
-      currentNode = getParentNode(currentNode);
-    }
-    cache.set(element2, result);
-    return result;
-  }
-  function getClippingRect(_ref) {
-    let {
-      element: element2,
-      boundary,
-      rootBoundary,
-      strategy
-    } = _ref;
-    const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element2) ? [] : getClippingElementAncestors(element2, this._c) : [].concat(boundary);
-    const clippingAncestors = [...elementClippingAncestors, rootBoundary];
-    const firstClippingAncestor = clippingAncestors[0];
-    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-      const rect = getClientRectFromClippingAncestor(element2, clippingAncestor, strategy);
-      accRect.top = max(rect.top, accRect.top);
-      accRect.right = min(rect.right, accRect.right);
-      accRect.bottom = min(rect.bottom, accRect.bottom);
-      accRect.left = max(rect.left, accRect.left);
-      return accRect;
-    }, getClientRectFromClippingAncestor(element2, firstClippingAncestor, strategy));
-    return {
-      width: clippingRect.right - clippingRect.left,
-      height: clippingRect.bottom - clippingRect.top,
-      x: clippingRect.left,
-      y: clippingRect.top
-    };
-  }
-  function getDimensions(element2) {
-    const {
-      width,
-      height
-    } = getCssDimensions(element2);
-    return {
-      width,
-      height
-    };
-  }
-  function getRectRelativeToOffsetParent(element2, offsetParent, strategy) {
-    const isOffsetParentAnElement = isHTMLElement(offsetParent);
-    const documentElement = getDocumentElement(offsetParent);
-    const isFixed = strategy === "fixed";
-    const rect = getBoundingClientRect(element2, true, isFixed, offsetParent);
-    let scroll = {
-      scrollLeft: 0,
-      scrollTop: 0
-    };
-    const offsets = createCoords(0);
-    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
-        scroll = getNodeScroll(offsetParent);
-      }
-      if (isOffsetParentAnElement) {
-        const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
-        offsets.x = offsetRect.x + offsetParent.clientLeft;
-        offsets.y = offsetRect.y + offsetParent.clientTop;
-      } else if (documentElement) {
-        offsets.x = getWindowScrollBarX(documentElement);
-      }
-    }
-    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
-    const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
-    const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
-    return {
-      x,
-      y,
-      width: rect.width,
-      height: rect.height
-    };
-  }
-  function isStaticPositioned(element2) {
-    return getComputedStyle2(element2).position === "static";
-  }
-  function getTrueOffsetParent(element2, polyfill) {
-    if (!isHTMLElement(element2) || getComputedStyle2(element2).position === "fixed") {
-      return null;
-    }
-    if (polyfill) {
-      return polyfill(element2);
-    }
-    let rawOffsetParent = element2.offsetParent;
-    if (getDocumentElement(element2) === rawOffsetParent) {
-      rawOffsetParent = rawOffsetParent.ownerDocument.body;
-    }
-    return rawOffsetParent;
-  }
-  function getOffsetParent(element2, polyfill) {
-    const win = getWindow(element2);
-    if (isTopLayer(element2)) {
-      return win;
-    }
-    if (!isHTMLElement(element2)) {
-      let svgOffsetParent = getParentNode(element2);
-      while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
-        if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
-          return svgOffsetParent;
-        }
-        svgOffsetParent = getParentNode(svgOffsetParent);
-      }
-      return win;
-    }
-    let offsetParent = getTrueOffsetParent(element2, polyfill);
-    while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
-      offsetParent = getTrueOffsetParent(offsetParent, polyfill);
-    }
-    if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
-      return win;
-    }
-    return offsetParent || getContainingBlock(element2) || win;
-  }
-  var getElementRects = async function(data) {
-    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
-    const getDimensionsFn = this.getDimensions;
-    const floatingDimensions = await getDimensionsFn(data.floating);
-    return {
-      reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
-      floating: {
-        x: 0,
-        y: 0,
-        width: floatingDimensions.width,
-        height: floatingDimensions.height
-      }
-    };
-  };
-  function isRTL2(element2) {
-    return getComputedStyle2(element2).direction === "rtl";
-  }
-  var platform = {
-    convertOffsetParentRelativeRectToViewportRelativeRect,
-    getDocumentElement,
-    getClippingRect,
-    getOffsetParent,
-    getElementRects,
-    getClientRects,
-    getDimensions,
-    getScale,
-    isElement,
-    isRTL: isRTL2
-  };
-  function rectsAreEqual(a, b) {
-    return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
-  }
-  function observeMove(element2, onMove) {
-    let io = null;
-    let timeoutId;
-    const root = getDocumentElement(element2);
-    function cleanup() {
-      var _io;
-      clearTimeout(timeoutId);
-      (_io = io) == null || _io.disconnect();
-      io = null;
-    }
-    function refresh(skip, threshold) {
-      if (skip === void 0) {
-        skip = false;
-      }
-      if (threshold === void 0) {
-        threshold = 1;
-      }
-      cleanup();
-      const elementRectForRootMargin = element2.getBoundingClientRect();
-      const {
-        left,
-        top,
-        width,
-        height
-      } = elementRectForRootMargin;
-      if (!skip) {
-        onMove();
-      }
-      if (!width || !height) {
-        return;
-      }
-      const insetTop = floor(top);
-      const insetRight = floor(root.clientWidth - (left + width));
-      const insetBottom = floor(root.clientHeight - (top + height));
-      const insetLeft = floor(left);
-      const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
-      const options = {
-        rootMargin,
-        threshold: max(0, min(1, threshold)) || 1
-      };
-      let isFirstUpdate = true;
-      function handleObserve(entries) {
-        const ratio = entries[0].intersectionRatio;
-        if (ratio !== threshold) {
-          if (!isFirstUpdate) {
-            return refresh();
-          }
-          if (!ratio) {
-            timeoutId = setTimeout(() => {
-              refresh(false, 1e-7);
-            }, 1e3);
-          } else {
-            refresh(false, ratio);
-          }
-        }
-        if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element2.getBoundingClientRect())) {
-          refresh();
-        }
-        isFirstUpdate = false;
-      }
-      try {
-        io = new IntersectionObserver(handleObserve, {
-          ...options,
-          // Handle <iframe>s
-          root: root.ownerDocument
-        });
-      } catch (e) {
-        io = new IntersectionObserver(handleObserve, options);
-      }
-      io.observe(element2);
-    }
-    refresh(true);
-    return cleanup;
-  }
-  function autoUpdate(reference, floating, update, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    const {
-      ancestorScroll = true,
-      ancestorResize = true,
-      elementResize = typeof ResizeObserver === "function",
-      layoutShift = typeof IntersectionObserver === "function",
-      animationFrame = false
-    } = options;
-    const referenceEl = unwrapElement(reference);
-    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
-    ancestors.forEach((ancestor) => {
-      ancestorScroll && ancestor.addEventListener("scroll", update, {
-        passive: true
-      });
-      ancestorResize && ancestor.addEventListener("resize", update);
-    });
-    const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
-    let reobserveFrame = -1;
-    let resizeObserver = null;
-    if (elementResize) {
-      resizeObserver = new ResizeObserver((_ref) => {
-        let [firstEntry] = _ref;
-        if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
-          resizeObserver.unobserve(floating);
-          cancelAnimationFrame(reobserveFrame);
-          reobserveFrame = requestAnimationFrame(() => {
-            var _resizeObserver;
-            (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
-          });
-        }
-        update();
-      });
-      if (referenceEl && !animationFrame) {
-        resizeObserver.observe(referenceEl);
-      }
-      resizeObserver.observe(floating);
-    }
-    let frameId;
-    let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
-    if (animationFrame) {
-      frameLoop();
-    }
-    function frameLoop() {
-      const nextRefRect = getBoundingClientRect(reference);
-      if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
-        update();
-      }
-      prevRefRect = nextRefRect;
-      frameId = requestAnimationFrame(frameLoop);
-    }
-    update();
-    return () => {
-      var _resizeObserver2;
-      ancestors.forEach((ancestor) => {
-        ancestorScroll && ancestor.removeEventListener("scroll", update);
-        ancestorResize && ancestor.removeEventListener("resize", update);
-      });
-      cleanupIo == null || cleanupIo();
-      (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
-      resizeObserver = null;
-      if (animationFrame) {
-        cancelAnimationFrame(frameId);
-      }
-    };
-  }
-  var offset2 = offset;
-  var shift2 = shift;
-  var flip2 = flip;
-  var size2 = size;
-  var computePosition2 = (reference, floating, options) => {
-    const cache = /* @__PURE__ */ new Map();
-    const mergedOptions = {
-      platform,
-      ...options
-    };
-    const platformWithCache = {
-      ...mergedOptions.platform,
-      _c: cache
-    };
-    return computePosition(reference, floating, {
-      ...mergedOptions,
-      platform: platformWithCache
-    });
-  };
-
-  // js/mixins/anchorable.js
-  var Anchorable = class extends Mixin {
-    boot({ options }) {
-      options({
-        reference: null,
-        auto: true,
-        position: "bottom start",
-        gap: "5",
-        offset: "0",
-        matchWidth: false,
-        crossAxis: false,
-        scrollY: true
-      });
-      if (this.options().reference === null) return;
-      if (this.options().position === null) return;
-      let [setPosition, cleanupDurablePositioning] = createDurablePositionSetter(this.el, { scrollY: this.options().scrollY });
-      let reposition = anchor(this.el, this.options().reference, setPosition, {
-        position: this.options().position,
-        gap: this.options().gap,
-        offset: this.options().offset,
-        matchWidth: this.options().matchWidth,
-        crossAxis: this.options().crossAxis,
-        scrollY: this.options().scrollY
-      });
-      let cleanupAutoUpdate = () => {
-      };
-      this.reposition = (...args) => {
-        if (this.options().auto) {
-          cleanupAutoUpdate = autoUpdate(this.options().reference, this.el, reposition);
-        } else {
-          reposition(null, ...args);
-        }
-      };
-      this.cleanup = () => {
-        cleanupAutoUpdate();
-        cleanupDurablePositioning();
-      };
-    }
-  };
-  function anchor(target, invoke, setPosition, { position, offset: offsetValue, gap, matchWidth, crossAxis, scrollY }) {
-    let elMaxHeight = window.getComputedStyle(target).maxHeight;
-    elMaxHeight = elMaxHeight === "none" ? null : parseFloat(elMaxHeight);
-    return (event, forceX, forceY) => {
-      computePosition2(invoke, target, {
-        placement: compilePlacement(position),
-        // Placements: ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
-        middleware: [
-          // Offset needs to be first, as per the Floating UI docs...
-          offset2({
-            mainAxis: Number(gap),
-            alignmentAxis: Number(offsetValue)
-          }),
-          flip2(),
-          shift2({ padding: 5, crossAxis }),
-          size2({
-            padding: 5,
-            apply({ rects, elements, availableHeight }) {
-              if (matchWidth) {
-                Object.assign(elements.floating.style, {
-                  width: `${rects.reference.width}px`
-                });
-              }
-              let maxHeight = elMaxHeight;
-              if (maxHeight === null) {
-                maxHeight = scrollY ? elements.floating.scrollHeight : elements.floating.offsetHeight;
-              }
-              elements.floating.style.maxHeight = availableHeight > maxHeight ? "" : `${availableHeight}px`;
-            }
-          })
-        ]
-      }).then(({ x, y }) => {
-        setPosition(forceX || x, forceY || y);
-      });
-    };
-  }
-  function compilePlacement(anchor2) {
-    let placement = anchor2.split(" ");
-    switch (placement[0]) {
-      case "start":
-        placement[0] = isRTL() ? "right" : "left";
-        break;
-      case "end":
-        placement[0] = isRTL() ? "left" : "right";
-        break;
-    }
-    return placement.join("-");
-  }
-  function createDurablePositionSetter(target, { scrollY = true }) {
-    let position = (x, y) => {
-      Object.assign(target.style, {
-        position: "absolute",
-        overflowY: scrollY ? "auto" : "hidden",
-        left: `${x}px`,
-        top: `${y}px`,
-        // This is required to reset the `popover` default styles, otherwise the dropdown appears in the middle of the screen...
-        right: "auto",
-        bottom: "auto"
-      });
-    };
-    let lastX, lastY;
-    let observer = new MutationObserver(() => position(lastX, lastY));
-    return [
-      (x, y) => {
-        lastX = x;
-        lastY = y;
-        observer.disconnect();
-        position(lastX, lastY);
-        observer.observe(target, { attributeFilter: ["style"] });
-      },
-      () => {
-        observer.disconnect();
-      }
-    ];
-  }
-
-  // js/selected.js
-  var UISelected = class extends UIElement {
-    boot() {
-      this.querySelectorAll("[data-appended]").forEach((el) => el.remove());
-      if (!this.querySelector("template")) {
-        let template = document.createElement("template");
-        template.setAttribute("name", "placeholder");
-        template.innerHTML = "<span>" + this.innerHTML + "</span>";
-        this.innerHTML = "";
-        this.appendChild(template);
-      }
-      if (!this.querySelector('template[name="options"]')) {
-        let template = document.createElement("template");
-        template.setAttribute("name", "options");
-        template.innerHTML = "<div><slot></slot></div>";
-        this.appendChild(template);
-      }
-      if (!this.querySelector('template[name="option"]')) {
-        let template = document.createElement("template");
-        template.setAttribute("name", "option");
-        template.innerHTML = "<div><slot></slot></div>";
-        this.appendChild(template);
-      }
-      this.templates = {
-        placeholder: this.querySelector('template[name="placeholder"]'),
-        overflow: this.querySelector('template[name="overflow"]'),
-        options: this.querySelector('template[name="options"]'),
-        option: this.querySelector('template[name="option"]')
-      };
-      this.templates.options.elsByValue = /* @__PURE__ */ new Map();
-      this.max = this.templates.overflow?.getAttribute("max") ? this.templates.overflow.getAttribute("max") : Infinity;
-      this.selecteds = /* @__PURE__ */ new Map();
-      this.picker = this.closest("ui-select,ui-pillbox");
-      this.multiple = this.picker.hasAttribute("multiple");
-    }
-    mount() {
-      queueMicrotask(() => {
-        this.picker._selectable.onInitAndChange(() => {
-          this.render(true);
-        });
-        let optionsEl = this.picker.list();
-        if (optionsEl) {
-          new MutationObserver((mutations) => {
-            queueMicrotask(() => this.render());
-          }).observe(optionsEl, { childList: true });
-        }
-      });
-    }
-    render(retry) {
-      if (!this.multiple) {
-        let value3 = this.picker.value;
-        if (Array.from(this.selecteds.keys()).includes(value3)) {
-          return;
-        }
-        this.selecteds.clear();
-        let selected = this.picker._selectable.findByValue(value3);
-        if (selected) {
-          this.selecteds.set(value3, selected);
-        } else {
-          if (!["", null, void 0].includes(value3)) {
-            if (retry) return setTimeout(() => {
-              this.render();
-            });
-            else throw `Could not find option for value "${value3}"`;
-          }
-        }
-        this.templates.placeholder?.clearPlaceholder?.();
-        this.templates.option?.clearOption?.();
-        if (this.selecteds.size > 0) {
-          this.renderOption();
-        } else {
-          this.renderPlaceholder();
-        }
-      } else {
-        let values = this.picker.value;
-        let removedValues = Array.from(this.selecteds.keys()).filter((i) => !values.includes(i));
-        let newValues = values.filter((i) => !this.selecteds.has(i));
-        removedValues.forEach((value3) => this.selecteds.delete(value3));
-        let newSelecteds = /* @__PURE__ */ new Map();
-        for (let value3 of newValues) {
-          let selected = this.picker._selectable.findByValue(value3);
-          if (!selected) {
-            if (retry) return setTimeout(() => this.render());
-            else throw `Could not find option for value "${value3}"`;
-          }
-          newSelecteds.set(value3, selected);
-        }
-        newSelecteds.forEach((selected, value3) => this.selecteds.set(value3, selected));
-        this.templates.placeholder?.clearPlaceholder?.();
-        this.templates.overflow?.clearOverflow?.();
-        this.templates.options?.clearOptions?.();
-        if (this.selecteds.size > 0) {
-          this.renderOptions({
-            hasOverflowed: (rendered) => {
-              if (this.max === "auto") {
-                let willOverflow = false;
-                this.renderOverflow(this.selecteds.size, this.selecteds.size - rendered);
-                if (this.clientWidth < this.scrollWidth) {
-                  willOverflow = true;
-                }
-                this.templates.overflow?.clearOverflow?.();
-                if (willOverflow) {
-                  return true;
-                }
-              }
-              return rendered > parseInt(this.max);
-            },
-            renderOverflow: (remainder) => {
-              if (this.templates?.overflow?.getAttribute("mode") !== "append") {
-                this.templates.options?.clearOptions?.();
-              }
-              this.renderOverflow(this.selecteds.size, remainder);
-            }
-          });
-        } else {
-          this.renderPlaceholder();
-        }
-      }
-    }
-    renderOptions({ hasOverflowed, renderOverflow }) {
-      let container = document.createElement("div");
-      container.style.display = "contents";
-      let optionsEl = hydrateTemplate2(this.templates.options, {
-        default: container
-      });
-      this.templates.options.after(optionsEl);
-      this.templates.options.clearOptions = () => {
-        optionsEl.remove();
-        this.templates.options.clearOptions = () => {
-        };
-      };
-      let rendered = 0;
-      let shouldRenderOverflow = false;
-      for (let [value3, selected] of this.selecteds) {
-        let fragment2 = new DocumentFragment();
-        fragment2.append(...selected.el.cloneNode(true).childNodes);
-        let optionEl = hydrateTemplate2(this.templates.option, {
-          text: selected.getSelectedLabel() ?? selected.getLabel(),
-          default: selected.getSelectedLabel() ?? fragment2,
-          value: value3
-        });
-        optionEl.setAttribute("data-value", value3);
-        optionEl.setAttribute("data-appended", "");
-        optionEl.deselect = () => selected.deselect();
-        container.appendChild(optionEl);
-        rendered++;
-        if (hasOverflowed(rendered)) {
-          shouldRenderOverflow = true;
-          container.removeChild(optionEl);
-          rendered--;
-          break;
-        }
-      }
-      let fragment = new DocumentFragment();
-      fragment.append(...container.childNodes);
-      container.replaceWith(fragment);
-      if (shouldRenderOverflow) {
-        renderOverflow(this.selecteds.size - rendered);
-      }
-    }
-    renderOption() {
-      for (let [value3, selected] of this.selecteds) {
-        let fragment = new DocumentFragment();
-        fragment.append(...selected.el.cloneNode(true).childNodes);
-        let optionEl = hydrateTemplate2(this.templates.option, {
-          text: selected.getSelectedLabel() ?? selected.getLabel(),
-          default: selected.getSelectedLabel() ?? fragment,
-          value: value3
-        });
-        optionEl.setAttribute("data-value", value3);
-        optionEl.setAttribute("data-appended", value3);
-        optionEl.deselect = () => selected.deselect();
-        this.templates.option.after(optionEl);
-        this.templates.option.clearOption = () => {
-          optionEl.remove();
-          this.templates.option.clearOption = () => {
-          };
-        };
-      }
-    }
-    renderPlaceholder() {
-      if (!this.templates.placeholder) return;
-      let el = hydrateTemplate2(this.templates.placeholder);
-      el.setAttribute("data-appended", "");
-      this.templates.placeholder.after(el);
-      this.templates.placeholder.clearPlaceholder = () => {
-        el.remove();
-        this.templates.placeholder.clearPlaceholder = () => {
-        };
-      };
-    }
-    renderOverflow(count, remainder) {
-      if (!this.templates.overflow) return;
-      let el = hydrateTemplate2(this.templates.overflow, {
-        remainder,
-        count: this.selecteds.size
-      });
-      el.setAttribute("data-appended", "");
-      this.templates.overflow.after(el);
-      this.templates.overflow.clearOverflow = () => {
-        el.remove();
-        this.templates.placeholder.clearOverflow = () => {
-        };
-      };
-    }
-  };
-  var UISelectedRemove = class extends UIElement {
-    boot() {
-      this.addEventListener("click", (e) => {
-        e.stopPropagation();
-        let value3 = this.closest("[data-value]")?.getAttribute("data-value");
-        if (value3 === void 0) return;
-        let selectableGroup = this.closest("ui-pillbox")._selectable;
-        let selectable = selectableGroup.selectableByValue(value3);
-        if (selectable) {
-          selectable.deselect();
-        } else {
-          selectableGroup.deselectByValue(value3);
-        }
-      });
-    }
-  };
-  function hydrateTemplate2(template, slots = {}) {
-    let fragment = template.content.cloneNode(true);
-    Object.entries(slots).forEach(([key, value3]) => {
-      let slotNodes = key === "default" ? fragment.querySelectorAll("slot:not([name])") : fragment.querySelectorAll(`slot[name="${key}"]`);
-      slotNodes.forEach((i) => i.replaceWith(
-        typeof value3 === "string" ? document.createTextNode(value3) : value3
-      ));
-    });
-    return fragment.firstElementChild;
-  }
-
-  // js/mixins/selectable.js
-  var SelectableGroup = class extends MixinGroup {
-    groupOfType = Selectable;
-    boot({ options }) {
-      options({
-        multiple: false
-      });
-      this.state = this.options().multiple ? /* @__PURE__ */ new Set() : null;
-      this.onChanges = [];
-    }
-    onInitAndChange(callback) {
-      callback();
-      this.onChanges.push(callback);
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    changed(selectable, silent = false) {
-      if (selectable.ungrouped) return;
-      let value3 = selectable.value;
-      let selected = selectable.isSelected();
-      let multiple = this.options().multiple;
-      if (selected) {
-        multiple ? this.state.add(value3) : this.state = value3;
-      } else {
-        multiple ? this.state.delete(value3) : this.state = null;
-      }
-      if (!silent) {
-        this.onChanges.forEach((i) => i(selectable));
-      }
-    }
-    deselectByValue(value3, silent = false) {
-      this.options().multiple ? this.state.delete(value3) : this.state = null;
-      if (!silent) {
-        this.onChanges.forEach((i) => i());
-      }
-    }
-    getState() {
-      return this.options().multiple ? Array.from(this.state) : this.state;
-    }
-    hasValue(value3) {
-      return this.options().multiple ? this.state.has(value3) : this.state === value3;
-    }
-    setState(value3) {
-      if (value3 === null || value3 === "") value3 = this.options().multiple ? [] : "";
-      if (this.options().multiple) {
-        if (!Array.isArray(value3)) value3 = [value3];
-        value3 = value3.map((i) => i + "");
-      } else {
-        value3 = value3 + "";
-      }
-      this.state = this.options().multiple ? new Set(value3) : value3;
-      let values = this.options().multiple ? value3 : [value3];
-      this.walker().each((el) => {
-        let selectable = el.use(Selectable);
-        if (selectable.ungrouped) return;
-        let selected = values.includes(selectable.value);
-        if (selected && !selectable.isSelected()) {
-          selectable.surgicallySelect();
-        } else if (!selected && selectable.isSelected()) {
-          selectable.surgicallyDeselect();
-        }
-      });
-      this.onChanges.forEach((i) => i());
-    }
-    selected() {
-      return this.walker().find((item) => item.use(Selectable).isSelected()).use(Selectable);
-    }
-    selecteds() {
-      return this.walker().filter((el) => el.use(Selectable).isSelected()).map((el) => el.use(Selectable));
-    }
-    selectFirst() {
-      this.walker().first()?.use(Selectable).select();
-    }
-    selectAll() {
-      this.walker().filter((el) => !el.use(Selectable).isSelected()).map((el) => el.use(Selectable).select());
-    }
-    deselectAll() {
-      this.walker().filter((el) => el.use(Selectable).isSelected()).map((el) => el.use(Selectable).deselect());
-    }
-    allAreSelected() {
-      let selectableElements = this.walker().filter((el) => true);
-      return selectableElements.length > 0 && this.walker().filter((el) => el.use(Selectable).isSelected()).length === selectableElements.length;
-    }
-    noneAreSelected() {
-      return this.state === null || this.state?.size === 0;
-    }
-    isEmpty() {
-      return this.noneAreSelected();
-    }
-    isNotEmpty() {
-      return !this.isEmpty();
-    }
-    selectableByValue(value3) {
-      return this.walker().find((el) => el.use(Selectable).value === value3)?.use(Selectable);
-    }
-    deselectOthers(except) {
-      this.walker().each((el) => {
-        if (el === except) return;
-        el.use(Selectable).surgicallyDeselect();
-      });
-    }
-    selectedTextValue() {
-      if (!this.options().multiple) return this.convertValueStringToElementText(this.state);
-      return Array.from(this.state).map((i) => {
-        return this.convertValueStringToElementText(i);
-      }).join(", ");
-    }
-    convertValueStringToElementText(value3) {
-      let selected = this.findByValue(value3);
-      if (selected) {
-        return selected.selectedLabel || selected.label || selected.value;
-      } else {
-        return value3;
-      }
-    }
-    findByValue(value3) {
-      return this.selecteds().find((i) => i.value === value3);
-    }
-    walker() {
-      return walker(this.el, (el, { skip, reject }) => {
-        if (el[this.constructor.name] && el !== this.el) return reject();
-        if (!el[this.groupOfType.name]) return skip();
-        if (el.mixins.get(this.groupOfType.name).ungrouped) return skip();
-      });
-    }
-  };
-  var Selectable = class extends Mixin {
-    boot({ options }) {
-      this.groupedByType = SelectableGroup;
-      options({
-        ungrouped: false,
-        togglable: false,
-        value: void 0,
-        label: void 0,
-        selectedLabel: void 0,
-        selectedInitially: false,
-        dataAttr: "data-selected",
-        ariaAttr: "aria-selected"
-      });
-      this.ungrouped = this.options().ungrouped;
-      this.value = this.options().value === void 0 ? this.el.value : this.options().value;
-      this.value = this.value + "";
-      this.label = this.options().label;
-      this.selectedLabel = this.options().selectedLabel;
-      let state = this.options().selectedInitially;
-      this.onSelects = [];
-      this.onUnselects = [];
-      this.onChanges = [];
-      let initState = () => {
-        if (this.group()) {
-          if (this.group().hasValue(this.value)) state = true;
-        }
-        this.multiple = this.hasGroup() ? this.group().options().multiple : false;
-        this.toggleable = this.options().toggleable || this.multiple;
-        if (state) {
-          this.select(true);
-        } else {
-          this.state = state;
-          this.surgicallyDeselect(true);
-        }
-      };
-      initState();
-      if (!this.hasGroup() && !this.el.isConnected) {
-        queueMicrotask(() => {
-          if (this.hasGroup()) {
-            initState();
-          }
-        });
-      }
-    }
-    mount() {
-      this.el.hasAttribute(this.options().ariaAttr) || setAttribute2(this.el, this.options().ariaAttr, "false");
-    }
-    onInitAndChange(callback) {
-      callback();
-      this.onChanges.push(callback);
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    onSelect(callback) {
-      this.onSelects.push(callback);
-    }
-    onUnselect(callback) {
-      this.onUnselects.push(callback);
-    }
-    setState(value3) {
-      value3 ? this.select() : this.deselect();
-    }
-    getState() {
-      return this.state;
-    }
-    // @todo: depricate in favor of "trigger"...
-    press() {
-      this.toggleable ? this.toggle() : this.select();
-    }
-    trigger() {
-      this.toggleable ? this.toggle() : this.select();
-    }
-    toggle() {
-      this.isSelected() ? this.deselect() : this.select();
-    }
-    isSelected() {
-      return this.state;
-    }
-    select(silent = false) {
-      let changed = !this.isSelected();
-      this.toggleable || this.group()?.deselectOthers(this.el);
-      this.state = true;
-      setAttribute2(this.el, this.options().ariaAttr, "true");
-      setAttribute2(this.el, this.options().dataAttr, "");
-      if (changed) {
-        if (!silent) {
-          this.onSelects.forEach((i) => i());
-          this.onChanges.forEach((i) => i());
-        }
-        this.group()?.changed(this, silent);
-      }
-    }
-    surgicallySelect() {
-      let changed = !this.isSelected();
-      this.state = true;
-      setAttribute2(this.el, this.options().ariaAttr, "true");
-      setAttribute2(this.el, this.options().dataAttr, "");
-      if (changed) {
-        this.onSelects.forEach((i) => i());
-        this.onChanges.forEach((i) => i());
-      }
-    }
-    deselect(notify = true) {
-      let changed = this.isSelected();
-      this.state = false;
-      setAttribute2(this.el, this.options().ariaAttr, "false");
-      removeAttribute(this.el, this.options().dataAttr);
-      if (changed) {
-        this.onUnselects.forEach((i) => i());
-        this.onChanges.forEach((i) => i());
-        notify && this.group()?.changed(this);
-      }
-    }
-    surgicallyDeselect(silent = false) {
-      let changed = this.isSelected();
-      this.state = false;
-      setAttribute2(this.el, this.options().ariaAttr, "false");
-      removeAttribute(this.el, this.options().dataAttr);
-      if (changed && !silent) {
-        this.onUnselects.forEach((i) => i());
-        this.onChanges.forEach((i) => i());
-      }
-    }
-    getValue() {
-      return this.value;
-    }
-    getLabel() {
-      return this.label;
-    }
-    getSelectedLabel() {
-      return this.selectedLabel;
-    }
-  };
-
-  // js/mixins/submittable.js
-  var Submittable = class extends Mixin {
-    boot({ options }) {
-      options({
-        name: void 0,
-        value: void 0,
-        includeWhenEmpty: true,
-        shouldUpdateValue: true
-      });
-      this.name = this.options().name;
-      this.value = this.options().value === void 0 ? this.el.value : this.options().value;
-      this.state = false;
-      this.observer = new MutationObserver(() => {
-        this.renderHiddenInputs();
-      });
-      this.observer.observe(this.el, { childList: true });
-    }
-    mount() {
-      this.renderHiddenInputs();
-    }
-    update(value3) {
-      if (this.options().shouldUpdateValue) {
-        this.value = value3;
-      } else {
-        this.state = !!value3;
-      }
-      this.renderHiddenInputs();
-    }
-    valueIsEmpty() {
-      return this.value === void 0 || this.value === null || this.value === "";
-    }
-    renderHiddenInputs() {
-      this.observer.disconnect();
-      if (!this.name) return;
-      let children = this.el.children;
-      let oldInputs = [];
-      for (let i = 0; i < children.length; i++) {
-        let child = children[i];
-        if (child.hasAttribute("data-flux-hidden")) oldInputs.push(child);
-      }
-      oldInputs.forEach((i) => i.remove());
-      let hiddenInputs;
-      if (this.options().shouldUpdateValue) {
-        hiddenInputs = !this.valueIsEmpty() || this.options().includeWhenEmpty ? this.generateInputs(this.name, this.value) : [];
-      } else {
-        hiddenInputs = this.state || this.options().includeWhenEmpty ? this.generateInputs(this.name, this.value) : [];
-      }
-      hiddenInputs.forEach((hiddenInput) => {
-        this.el.append(hiddenInput);
-      });
-      this.observer.observe(this.el, { childList: true });
-    }
-    generateInputs(name, value3, carry = []) {
-      if (this.isObjectOrArray(value3)) {
-        for (let key in value3) {
-          carry = carry.concat(
-            this.generateInputs(`${name}[${key}]`, value3[key])
-          );
-        }
-      } else {
-        let el = document.createElement("input");
-        el.setAttribute("type", "hidden");
-        el.setAttribute("name", name);
-        el.setAttribute("value", value3 === null ? "" : "" + value3);
-        el.setAttribute("data-flux-hidden", "");
-        el.setAttribute("data-appended", "");
-        return [el];
-      }
-      return carry;
-    }
-    isObjectOrArray(value3) {
-      return typeof value3 === "object" && value3 !== null;
-    }
-    submitEnclosingForm() {
-      let form = this.getAssociatedForm();
-      if (form) {
-        form.requestSubmit();
-      }
-    }
-    getAssociatedForm() {
-      let formId = this.el.getAttribute("form");
-      if (formId) {
-        return document.getElementById(formId) || null;
-      }
-      return this.el.closest("form");
-    }
-  };
-
-  // js/select.js
-  var UISelect = class extends UIControl {
-    boot() {
-      let list = this.list();
-      this._controllable = new Controllable(this, { bubbles: true });
-      this._selectable = new SelectableGroup(list, {
-        multiple: this.hasAttribute("multiple")
-      });
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this._selectable.getState()
-      });
-      this._controllable.initial((initial) => initial && this._selectable.setState(initial));
-      this._controllable.getter(() => this._selectable.getState());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        this._selectable.setState(value3);
-      }));
-      this._selectable.onChange(detangled(() => {
-        this._controllable.dispatch();
-        this.dispatchEvent(new CustomEvent("select", { bubbles: false }));
-      }));
-      this._selectable.onInitAndChange(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-      queueMicrotask(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-    }
-    mount() {
-      this._disableable = new Disableable(this);
-      let input = this.input();
-      let button = this.button();
-      let list = this.list();
-      let multiple = this.hasAttribute("multiple");
-      let autocomplete = this.hasAttribute("autocomplete");
-      let strictAutocomplete = this.hasAttribute("autocomplete") && this.getAttribute("autocomplete").trim().split(" ").includes("strict");
-      let listbox = this.querySelector("ui-options") || this;
-      let listId = initListbox(listbox, "options", multiple);
-      this._activatable = new ActivatableGroup(listbox, { filter: "data-hidden" });
-      if (!input && !button) {
-        this._disableable.onInitAndChange((disabled) => {
-          disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "0");
-        });
-      }
-      if (this.hasAttribute("filter") && this.getAttribute("filter") !== "manual") {
-        this._filterable = new FilterableGroup(list);
-        this._filterable.onChange(() => {
-          this._activatable.clearActive();
-          if (this._filterable.hasResults()) {
-            this._activatable.activateFirst();
-          }
-        });
-        this.addEventListener("close", () => {
-          if (this._filterable) {
-            requestAnimationFrame(() => {
-              this._filterable.filter("");
-            });
-          }
-        });
-      }
-      let popoverEl = this.querySelector("[popover]:not(ui-tooltip > [popover])");
-      let popoverInputEl = popoverEl?.querySelector('input:not([type="hidden"])');
-      let inputEl = this.querySelector('input:not([type="hidden"])');
-      inputEl = popoverEl?.contains(inputEl) ? null : inputEl;
-      let buttonEl = this.querySelector("button,ui-button");
-      buttonEl = popoverEl?.contains(buttonEl) ? null : buttonEl;
-      if (!(popoverEl || inputEl)) {
-        handleKeyboardNavigation(this, this._activatable);
-        handleKeyboardSelection(this, this, this._activatable);
-        handleActivationOnFocus(this, this._activatable, this._selectable);
-      } else if (!popoverEl && inputEl) {
-        let input2 = inputEl;
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            input2 && setAttribute2(input2, "disabled", "");
-          } else {
-            input2 && removeAttribute(input2, "disabled");
-          }
-        });
-        handleInputClearing(this, input2, this._selectable, this._popoverable);
-        handleActivationOnFocus(input2, this._activatable, this._selectable);
-        handleAutocomplete(autocomplete, strictAutocomplete, this, input2, this._selectable, this._popoverable, this._filterable);
-        preventInputEventsFromBubblingToSelectRoot(input2);
-        highlightInputContentsWhenFocused(input2);
-        this._filterable && filterResultsByInput(list, input2, this._filterable);
-        trackActiveDescendant(input2, this._activatable, this._selectable);
-        handleKeyboardNavigation(input2, this._activatable);
-        handleKeyboardSelection(this, input2, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        clearInvalidAttributeWhenTyping(input2);
-      } else if (popoverEl && inputEl) {
-        let input2 = inputEl;
-        setAttribute2(input2, "role", "combobox");
-        setAttribute2(input2, "aria-controls", listId);
-        let popover = popoverEl;
-        this._popoverable = new Popoverable(popover);
-        this._anchorable = new Anchorable(popover, {
-          reference: input2,
-          matchWidth: true,
-          position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-          gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-          offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-        });
-        handleAutocomplete(autocomplete, strictAutocomplete, this, input2, this._selectable, this._popoverable, this._filterable);
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            input2 && setAttribute2(input2, "disabled", "");
-          } else {
-            input2 && removeAttribute(input2, "disabled");
-          }
-        });
-        this.querySelectorAll("button,ui-button").forEach((button2) => {
-          if (popover.contains(button2)) return;
-          setAttribute2(button2, "tabindex", "-1");
-          setAttribute2(button2, "aria-controls", listId);
-          setAttribute2(button2, "aria-haspopup", "listbox");
-          linkExpandedStateToPopover(button2, this._popoverable);
-          on(button2, "click", () => {
-            this._popoverable.toggle();
-            input2.focus();
-          });
-        });
-        handleInputClearing(this, input2, this._selectable, this._popoverable);
-        initPopover(this, input2, popover, this._popoverable, this._anchorable);
-        preventScrollWhenPopoverIsOpen(this, this._popoverable, [input2]);
-        linkExpandedStateToPopover(input2, this._popoverable);
-        preventInputEventsFromBubblingToSelectRoot(input2);
-        highlightInputContentsWhenFocused(input2);
-        this._filterable && filterResultsByInput(list, input2, this._filterable);
-        trackActiveDescendant(input2, this._activatable, this._selectable);
-        controlPopoverWithInput(input2, this._popoverable);
-        controlPopoverWithKeyboard(input2, this._popoverable, this._activatable, this._selectable);
-        openPopoverWithMouse(input2, this._popoverable);
-        controlPopoverWithEscapeKey(this, this._popoverable);
-        handleKeyboardNavigation(input2, this._activatable);
-        handleKeyboardSelection(this, input2, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        controlActivationWithPopover(this._popoverable, this._activatable, this._selectable);
-        handlePopoverClosing(this, this._selectable, this._popoverable, multiple);
-        clearInvalidAttributeWhenTyping(input2);
-      } else if (popoverEl && popoverInputEl) {
-        let button2 = buttonEl;
-        let input2 = popoverInputEl;
-        let popover = popoverEl;
-        setAttribute2(button2, "role", "combobox");
-        setAttribute2(input2, "role", "combobox");
-        setAttribute2(button2, "aria-controls", listId);
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            button2 && setAttribute2(button2, "disabled", "");
-            input2 && setAttribute2(input2, "disabled", "");
-          } else {
-            button2 && removeAttribute(button2, "disabled");
-            input2 && removeAttribute(input2, "disabled");
-          }
-        });
-        this._popoverable = new Popoverable(popover);
-        this._anchorable = new Anchorable(popover, {
-          reference: button2,
-          matchWidth: true,
-          position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-          gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-          offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0,
-          scrollY: false
-        });
-        preventInputEventsFromBubblingToSelectRoot(input2);
-        highlightInputContentsWhenFocused(input2);
-        this._filterable && filterResultsByInput(list, input2, this._filterable);
-        focusInputWhenPopoverOpens(input2, this._popoverable);
-        initPopover(this, button2, popover, this._popoverable, this._anchorable);
-        preventScrollWhenPopoverIsOpen(this, this._popoverable, [input2]);
-        linkExpandedStateToPopover(button2, this._popoverable);
-        handleInputClearing(this, input2, this._selectable, this._popoverable);
-        controlPopoverWithKeyboard(button2, this._popoverable, this._activatable, this._selectable);
-        togglePopoverWithMouse(button2, this._popoverable, input2);
-        controlPopoverWithEscapeKey(this, this._popoverable);
-        handleKeyboardNavigation(input2, this._activatable);
-        handleKeyboardSearchNavigation(button2, this._activatable, this._popoverable);
-        handleKeyboardSelection(this, input2, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        controlActivationWithPopover(this._popoverable, this._activatable, this._selectable);
-        handlePopoverClosing(this, this._selectable, this._popoverable, multiple);
-        clearInvalidAttributeWhenTyping(input2);
-      } else if (popoverEl) {
-        let button2 = buttonEl;
-        let popover = popoverEl;
-        setAttribute2(button2, "role", "combobox");
-        setAttribute2(button2, "aria-controls", listId);
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            button2 && setAttribute2(button2, "disabled", "");
-            input && setAttribute2(input, "disabled", "");
-          } else {
-            button2 && removeAttribute(button2, "disabled");
-            input && removeAttribute(input, "disabled");
-          }
-        });
-        this._popoverable = new Popoverable(popover);
-        this._anchorable = new Anchorable(popover, {
-          reference: button2,
-          matchWidth: true,
-          position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-          gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-          offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-        });
-        initPopover(this, button2, popover, this._popoverable, this._anchorable);
-        preventScrollWhenPopoverIsOpen(this, this._popoverable);
-        linkExpandedStateToPopover(button2, this._popoverable);
-        controlPopoverWithKeyboard(button2, this._popoverable, this._activatable, this._selectable);
-        togglePopoverWithMouse(button2, this._popoverable);
-        trackActiveDescendant(button2, this._activatable, this._selectable);
-        controlPopoverWithEscapeKey(this, this._popoverable);
-        handleKeyboardNavigation(button2, this._activatable);
-        handleKeyboardSearchNavigation(button2, this._activatable, this._popoverable);
-        handleKeyboardSelection(this, button2, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        controlActivationWithPopover(this._popoverable, this._activatable, this._selectable);
-        handlePopoverClosing(this, this._selectable, this._popoverable, multiple);
-      }
-      let observer = new MutationObserver(() => {
-        requestAnimationFrame(() => {
-          if (!this._popoverable || this._popoverable.getState()) {
-            let firstSelectedOption = this._selectable.selecteds().find((selected) => !selected.el._disableable.isDisabled())?.el;
-            this._activatable.activateSelectedOrFirst(firstSelectedOption);
-          } else {
-            this._activatable.clearActive();
-          }
-        });
-      });
-      observer.observe(list, { childList: true });
-    }
-    unmount() {
-      if (this._popoverable?.getState()) {
-        let { unlock } = lockScroll();
-        unlock();
-      }
-    }
-    trigger() {
-      return this.button() || this.input();
-    }
-    button() {
-      return Array.from(this.querySelectorAll("button,ui-button")).find(
-        (button) => button.nextElementSibling?.matches("[popover]")
-      ) || null;
-    }
-    input() {
-      return this.querySelector('input:not([type="hidden"])');
-    }
-    list() {
-      return this.querySelector("ui-options") || this;
-    }
-    clear() {
-      if (!this.input()) return;
-      this.input().value = "";
-      this.input().dispatchEvent(new Event("input", { bubbles: false }));
-    }
-    open() {
-      this._popoverable.setState(true);
-    }
-    close() {
-      this._popoverable.setState(false);
-    }
-    deselectLast() {
-      if (!this.hasAttribute("multiple") && this.value !== null) {
-        this.value = null;
-        this.dispatchEvent(new Event("input", { bubbles: false }));
-        this.dispatchEvent(new Event("change", { bubbles: false }));
-      }
-      if (this.hasAttribute("multiple") && this.value.length !== 0) {
-        this.value = this.value.slice(0, -1);
-        this.dispatchEvent(new Event("input", { bubbles: false }));
-        this.dispatchEvent(new Event("change", { bubbles: false }));
-      }
-    }
-  };
-  element("selected-remove", UISelectedRemove);
-  element("selected", UISelected);
-  element("select", UISelect);
-  inject(({ css }) => css`ui-select { display: block; }`);
-  inject(({ css }) => css`ui-selected-option { display: contents; }`);
-  function handleKeyboardNavigation(el, activatable) {
-    on(el, "keydown", (e) => {
-      if (!["ArrowDown", "ArrowUp"].includes(e.key)) return;
-      if (e.key === "ArrowDown") {
-        activatable.activateNext();
-        e.preventDefault();
-        e.stopPropagation();
-      } else if (e.key === "ArrowUp") {
-        activatable.activatePrev();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    });
-  }
-  function handleKeyboardSearchNavigation(el, activatable, popoverable) {
-    search(el, (query) => {
-      activatable.activateBySearch(query);
-      if (!popoverable.getState()) {
-        activatable.getActive()?.click();
-      }
-    });
-  }
-  function handleKeyboardSelection(root, el, activatable) {
-    on(el, "keydown", (e) => {
-      if (e.key === "Enter") {
-        let activeEl = activatable.getActive();
-        e.preventDefault();
-        e.stopPropagation();
-        if (!activeEl) return;
-        if (activeEl._disableable?.isDisabled()) return;
-        activeEl.click();
-        root.dispatchEvent(new CustomEvent("interaction", {
-          bubbles: false,
-          cancelable: false,
-          detail: { optionEl: activeEl }
-        }));
-        if (activeEl.hasAttribute("action")) {
-          root.dispatchEvent(new CustomEvent("action", {
-            bubbles: false,
-            cancelable: false,
-            detail: { optionEl: activeEl }
-          }));
-        }
-      }
-    });
-  }
-  function handleMouseSelection(root, activatable, pointerdown = false) {
-    on(root, pointerdown ? "pointerdown" : "click", (e) => {
-      if (e.target.closest("ui-option, ui-option-create")) {
-        let option = e.target.closest("ui-option, ui-option-create");
-        if (option._disableable.isDisabled()) return;
-        option._selectable?.trigger();
-        root.dispatchEvent(new CustomEvent("interaction", {
-          bubbles: false,
-          cancelable: false,
-          detail: { optionEl: option }
-        }));
-        if (option.hasAttribute("action")) {
-          root.dispatchEvent(new CustomEvent("action", {
-            bubbles: false,
-            cancelable: false,
-            detail: { optionEl: option }
-          }));
-        }
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    });
-  }
-  function handleActivationOnFocus(el, activatable, selectable) {
-    on(el, "focus", () => {
-      let firstSelectedOption = selectable.selecteds().find((selected) => !selected.el._disableable.isDisabled())?.el;
-      activatable.activateSelectedOrFirst(firstSelectedOption);
-    });
-    on(el, "blur", () => {
-      activatable.clearActive();
-    });
-  }
-  function initListbox(el, multiple) {
-    let listId = assignId(el, "options");
-    setAttribute2(el, "role", "listbox");
-    setAttribute2(el, "aria-multiselectable", multiple ? "true" : "false");
-    return listId;
-  }
-  function linkExpandedStateToPopover(el, popoverable) {
-    setAttribute2(el, "aria-haspopup", "listbox");
-    let refreshPopover = () => {
-      setAttribute2(el, "aria-expanded", popoverable.getState() ? "true" : "false");
-      popoverable.getState() ? setAttribute2(el, "data-open", "") : removeAttribute(el, "data-open", "");
-    };
-    popoverable.onChange(() => {
-      refreshPopover();
-    });
-    refreshPopover();
-  }
-  function initPopover(root, trigger, popover, popoverable, anchorable) {
-    let refreshPopover = () => {
-      Array.from([root, popover]).forEach((i) => {
-        popoverable.getState() ? setAttribute2(i, "data-open", "") : removeAttribute(i, "data-open", "");
-      });
-      popoverable.getState() ? anchorable.reposition() : anchorable.cleanup();
-    };
-    popoverable.onChange(() => refreshPopover());
-    refreshPopover();
-    popoverable.onChange(() => {
-      if (popoverable.getState()) {
-        root.dispatchEvent(new Event("open", {
-          bubbles: false,
-          cancelable: false
-        }));
-      } else {
-        root.dispatchEvent(new Event("close", {
-          bubbles: false,
-          cancelable: false
-        }));
-      }
-    });
-  }
-  function controlActivationWithPopover(popoverable, activatable, selectable) {
-    popoverable.onChange(() => {
-      if (popoverable.getState()) {
-        let firstSelectedOption = selectable.selecteds().find((selected) => !selected.el._disableable.isDisabled())?.el;
-        setTimeout(() => {
-          activatable.activateSelectedOrFirst(firstSelectedOption);
-        });
-      } else {
-        activatable.clearActive();
-      }
-    });
-  }
-  function controlPopoverWithEscapeKey(root, popoverable) {
-    on(root, "keydown", (e) => {
-      if (e.key === "Escape" && popoverable.getState()) {
-        popoverable.setState(false);
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      }
-    });
-  }
-  function controlPopoverWithKeyboard(button, popoverable) {
-    on(button, "keydown", (e) => {
-      if (!["ArrowDown", "ArrowUp"].includes(e.key)) return;
-      if (e.key === "ArrowDown") {
-        if (!popoverable.getState()) {
-          popoverable.setState(true);
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        }
-      } else if (e.key === "ArrowUp") {
-        if (!popoverable.getState()) {
-          popoverable.setState(true);
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        }
-      }
-    });
-  }
-  function openPopoverWithMouse(el, popoverable) {
-    on(el, "click", () => {
-      if (!popoverable.getState()) {
-        popoverable.setState(true);
-        el.focus();
-      }
-    });
-  }
-  function togglePopoverWithMouse(button, popoverable, input = null) {
-    on(button, "click", () => {
-      popoverable.setState(!popoverable.getState());
-      button.focus();
-      if (popoverable.getState() && input) {
-        input.focus();
-      }
-    });
-  }
-  function focusInputWhenPopoverOpens(input, popoverable) {
-    popoverable.onChange(() => {
-      if (popoverable.getState()) {
-        setTimeout(() => input.focus());
-      }
-    });
-  }
-  function filterResultsByInput(list, input, filterable) {
-    on(input, "input", (e) => {
-      filterable.filter(e.target.value);
-    });
-    let observer = new MutationObserver(() => {
-      filterable.filter(input.value);
-    });
-    observer.observe(list, { childList: true });
-  }
-  function highlightInputContentsWhenFocused(input) {
-    on(input, "focus", () => input.select());
-  }
-  function preventInputEventsFromBubblingToSelectRoot(input) {
-    on(input, "change", (e) => e.stopPropagation());
-    on(input, "input", (e) => e.stopPropagation());
-  }
-  function controlPopoverWithInput(input, popoverable) {
-    on(input, "keydown", (e) => {
-      if (/^[a-zA-Z0-9]$/.test(e.key) || e.key === "Backspace") {
-        popoverable.getState() || popoverable.setState(true);
-      }
-    });
-  }
-  function handleInputClearing(root, input, selectable, popoverable) {
-    let shouldClear = root.hasAttribute("clear");
-    if (!shouldClear) return;
-    let setInputValue = (value3) => {
-      if (input.value === value3) return;
-      input.value = value3;
-      input.dispatchEvent(new Event("input", { bubbles: false }));
-    };
-    let clear = root.getAttribute("clear");
-    let clearOnAction = clear === "" || clear.split(" ").includes("action");
-    let clearOnSelect = clear === "" || clear.split(" ").includes("select");
-    let clearOnClose = clear === "" || clear.split(" ").includes("close");
-    let clearOnEsc = clear === "" || clear.split(" ").includes("esc");
-    if (clear === "none") clearOnAction = clearOnSelect = clearOnClose = clearOnEsc = false;
-    if (clearOnAction) {
-      root.addEventListener("action", (e) => {
-        setInputValue("");
-      });
-    } else if (clearOnSelect) {
-      selectable.onChange(() => {
-        queueMicrotask(() => setInputValue(""));
-      });
-    }
-    if (clearOnClose) {
-      popoverable.onChange(() => {
-        if (!popoverable.getState()) {
-          setInputValue("");
-        }
-      });
-    }
-    if (clearOnEsc) {
-      on(input, "keydown", (e) => {
-        if (e.key === "Escape") {
-          setInputValue("");
-        }
-      });
-    }
-  }
-  function handlePopoverClosing(root, selectable, popoverable, multiple) {
-    let closeOnInteraction = !multiple;
-    let closeOnAction = !multiple;
-    let closeOnSelect = !multiple;
-    if (root.hasAttribute("close")) {
-      let close = root.getAttribute("close");
-      closeOnInteraction = close === "";
-      closeOnAction = close.split(" ").includes("action");
-      closeOnSelect = close.split(" ").includes("select");
-      if (close === "none") return;
-    }
-    if (closeOnInteraction || closeOnAction) {
-      root.addEventListener("interaction", (e) => {
-        let optionEl = e.detail.optionEl;
-        if (!optionEl.hasAttribute("action")) {
-          popoverable.setState(false);
-          return;
-        }
-        setTimeout(() => {
-          if (!optionEl.hasAttribute("data-flux-loading") && !optionEl.hasAttribute("data-loading")) {
-            popoverable.setState(false);
-            return;
-          }
-          let observer = new MutationObserver(() => {
-            requestAnimationFrame(() => {
-              if (!root.querySelector("input[data-invalid]")) {
-                popoverable.setState(false);
-              }
-            });
-            observer.disconnect();
-          });
-          observer.observe(optionEl, { attributes: true, attributeFilter: ["data-loading", "data-flux-loading"] });
-        }, 10);
-      });
-    } else if (closeOnSelect) {
-      selectable.onChange(() => {
-        popoverable.setState(false);
-      });
-    }
-  }
-  function trackActiveDescendant(input, activatable, selectable) {
-    activatable.onChange(() => {
-      let activeEl = activatable.getActive();
-      activeEl ? setAttribute2(input, "aria-activedescendant", activeEl.id) : removeAttribute(input, "aria-activedescendant");
-    });
-    selectable.onChange((selectableItem) => {
-      if (!selectableItem) return;
-      let activeEl = selectableItem.el;
-      activeEl && setAttribute2(input, "aria-activedescendant", activeEl.id);
-    });
-  }
-  function handleAutocomplete(autocomplete, isStrict, root, input, selectable, popoverable, filterable) {
-    if (!autocomplete) {
-      setAttribute2(input, "autocomplete", "off");
-      setAttribute2(input, "aria-autocomplete", "none");
-      return;
-    }
-    let setInputValue = (value3) => {
-      if (input.value === value3) return;
-      input.value = value3;
-      input.dispatchEvent(new Event("input", { bubbles: false }));
-    };
-    setAttribute2(input, "autocomplete", "off");
-    setAttribute2(input, "aria-autocomplete", "list");
-    if (input.value !== "") {
-      selectable.setState(input.value);
-    }
-    let sync = () => {
-      if (selectable.isNotEmpty()) {
-        requestAnimationFrame(() => {
-          setInputValue(selectable.selectedTextValue());
-          if (isStrict) setAttribute2(input, "data-selected", selectable.selectedTextValue());
-        });
-      } else {
-        setInputValue("");
-        removeAttribute(input, "data-selected");
-      }
-    };
-    queueMicrotask(() => {
-      selectable.onInitAndChange(() => sync());
-    });
-    root.addEventListener("interaction", (e) => {
-      if (e.detail.optionEl._selectable?.isSelected()) sync();
-    });
-    if (isStrict) {
-      popoverable.onChange(() => {
-        if (!popoverable.getState()) {
-          requestAnimationFrame(() => {
-            setInputValue(input.getAttribute("data-selected"));
-          });
-        }
-      });
-    }
-  }
-  function preventScrollWhenPopoverIsOpen(root, popoverable, except = []) {
-    let { lock, unlock } = lockScroll(popoverable.el, false, except);
-    popoverable.onChange(() => {
-      popoverable.getState() ? lock() : unlock();
-    });
-  }
-  function clearInvalidAttributeWhenTyping(input) {
-    on(input, "input", () => {
-      if (input.hasAttribute("data-invalid")) {
-        input.removeAttribute("data-invalid");
-        input.removeAttribute("aria-invalid");
-      }
-    });
-  }
-
-  // js/pillbox.js
-  var UIPillbox = class extends UISelect {
-    mount() {
-      this._disableable = new Disableable(this);
-      let input = this.input();
-      let list = this.list();
-      let multiple = this.hasAttribute("multiple");
-      let triggerEl = this.querySelector("ui-pillbox-trigger");
-      let listbox = this.querySelector("ui-options") || this;
-      let listId = initListbox(listbox, "options", multiple);
-      this._activatable = new ActivatableGroup(listbox, { filter: "data-hidden" });
-      if (this.hasAttribute("filter") && this.getAttribute("filter") !== "manual") {
-        this._filterable = new FilterableGroup(list);
-        this._filterable.onChange(() => {
-          this._activatable.clearActive();
-          if (this._filterable.hasResults()) {
-            this._activatable.activateFirst();
-          }
-        });
-        this.addEventListener("close", () => {
-          if (this._filterable) {
-            this._filterable.filter("");
-          }
-        });
-      }
-      let popoverEl = this.querySelector("[popover]:not(ui-tooltip > [popover])");
-      let popoverInputEl = popoverEl?.querySelector('input:not([type="hidden"])');
-      let inlineInputEl = this.querySelector("ui-selected input");
-      if (!popoverEl) throw new Error("Popover element not found");
-      if (popoverInputEl) {
-        let trigger = triggerEl;
-        let input2 = popoverInputEl;
-        let popover = popoverEl;
-        setAttribute2(trigger, "role", "button");
-        setAttribute2(input2, "aria-autocomplete", "list");
-        setAttribute2(input2, "aria-controls", listId);
-        setAttribute2(input2, "role", "combobox");
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            trigger && setAttribute2(trigger, "disabled", "");
-            input2 && setAttribute2(input2, "disabled", "");
-          } else {
-            trigger && removeAttribute(trigger, "disabled");
-            input2 && removeAttribute(input2, "disabled");
-          }
-        });
-        this._popoverable = new Popoverable(popover);
-        this._anchorable = new Anchorable(popover, {
-          reference: trigger,
-          matchWidth: true,
-          position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-          gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-          offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0,
-          scrollY: false
-        });
-        trackActiveDescendant(input2, this._activatable, this._selectable);
-        preventInputEventsFromBubblingToSelectRoot(input2);
-        highlightInputContentsWhenFocused(input2);
-        this._filterable && filterResultsByInput(list, input2, this._filterable);
-        focusInputWhenPopoverOpens(input2, this._popoverable);
-        initPopover(this, trigger, popover, this._popoverable, this._anchorable);
-        preventScrollWhenPopoverIsOpen(this, this._popoverable, [input2]);
-        linkExpandedStateToPopover(trigger, this._popoverable);
-        handleInputClearing(this, input2, this._selectable, this._popoverable);
-        controlPopoverWithKeyboard(trigger, this._popoverable, this._activatable, this._selectable);
-        togglePopoverWithMouse(trigger, this._popoverable);
-        controlPopoverWithEscapeKey(this, this._popoverable);
-        handleKeyboardNavigation(input2, this._activatable);
-        handleKeyboardSearchNavigation(trigger, this._activatable, this._popoverable);
-        handleKeyboardSelection(this, input2, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        controlActivationWithPopover(this._popoverable, this._activatable, this._selectable);
-        handlePopoverClosing(this, this._selectable, this._popoverable, multiple);
-        clearInvalidAttributeWhenTyping(input2);
-        openPopoverWithSpacebar(trigger);
-      } else if (inlineInputEl) {
-        let trigger = triggerEl;
-        let input2 = inlineInputEl;
-        let popover = popoverEl;
-        setAttribute2(trigger, "role", "button");
-        setAttribute2(input2, "aria-autocomplete", "list");
-        setAttribute2(input2, "aria-controls", listId);
-        setAttribute2(input2, "role", "combobox");
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            trigger && setAttribute2(trigger, "disabled", "");
-            input2 && setAttribute2(input2, "disabled", "");
-          } else {
-            trigger && removeAttribute(trigger, "disabled");
-            input2 && removeAttribute(input2, "disabled");
-          }
-        });
-        this._popoverable = new Popoverable(popover, {
-          triggers: [input2, trigger]
-          // Make sure that focusing the input doesn't close the popover...
-        });
-        this._anchorable = new Anchorable(popover, {
-          reference: trigger,
-          matchWidth: true,
-          position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-          gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-          offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-        });
-        trackActiveDescendant(input2, this._activatable, this._selectable);
-        preventInputEventsFromBubblingToSelectRoot(input2);
-        highlightInputContentsWhenFocused(input2);
-        this._filterable && filterResultsByInput(list, input2, this._filterable);
-        focusInputWhenPopoverOpens(input2, this._popoverable);
-        initPopover(this, trigger, popover, this._popoverable, this._anchorable);
-        preventScrollWhenPopoverIsOpen(this, this._popoverable, [trigger]);
-        linkExpandedStateToPopover(trigger, this._popoverable);
-        handleInputClearing(this, input2, this._selectable, this._popoverable);
-        controlPopoverWithInput(input2, this._popoverable);
-        controlPopoverWithKeyboard(input2, this._popoverable, this._activatable, this._selectable);
-        openPopoverWithMouse(trigger, this._popoverable, input2);
-        controlPopoverWithEscapeKey(this, this._popoverable);
-        handleKeyboardNavigation(input2, this._activatable);
-        handleKeyboardSearchNavigation(trigger, this._activatable, this._popoverable);
-        handleKeyboardSelection(this, input2, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        controlActivationWithPopover(this._popoverable, this._activatable, this._selectable);
-        handlePopoverClosing(this, this._selectable, this._popoverable, multiple);
-        focusInputOnSelection(this, this._selectable, input2);
-        hideInputPlaceholderWhenNotEmpty(this._selectable, input2);
-        deselectLastItemWithBackspace(this._selectable, input2);
-        clearInvalidAttributeWhenTyping(input2);
-        forwardClicksToInputWhenPopoverIsOpen(this._popoverable, trigger, input2);
-      } else {
-        let trigger = triggerEl;
-        let popover = popoverEl;
-        setAttribute2(trigger, "role", "combobox");
-        setAttribute2(trigger, "aria-controls", listId);
-        setAttribute2(trigger, "aria-autocomplete", "none");
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            trigger && setAttribute2(trigger, "disabled", "");
-            input && setAttribute2(input, "disabled", "");
-          } else {
-            trigger && removeAttribute(trigger, "disabled");
-            input && removeAttribute(input, "disabled");
-          }
-        });
-        this._popoverable = new Popoverable(popover);
-        this._anchorable = new Anchorable(popover, {
-          reference: trigger,
-          matchWidth: true,
-          position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-          gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-          offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-        });
-        initPopover(this, trigger, popover, this._popoverable, this._anchorable);
-        preventScrollWhenPopoverIsOpen(this, this._popoverable);
-        linkExpandedStateToPopover(trigger, this._popoverable);
-        controlPopoverWithKeyboard(trigger, this._popoverable, this._activatable, this._selectable);
-        togglePopoverWithMouse(trigger, this._popoverable);
-        trackActiveDescendant(trigger, this._activatable, this._selectable);
-        controlPopoverWithEscapeKey(this, this._popoverable);
-        handleKeyboardNavigation(trigger, this._activatable);
-        handleKeyboardSearchNavigation(trigger, this._activatable, this._popoverable);
-        handleKeyboardSelection(this, trigger, this._activatable);
-        handleMouseSelection(this, this._activatable);
-        controlActivationWithPopover(this._popoverable, this._activatable, this._selectable);
-        handlePopoverClosing(this, this._selectable, this._popoverable, multiple);
-        openPopoverWithSpacebar(trigger);
-      }
-      let observer = new MutationObserver(() => {
-        requestAnimationFrame(() => {
-          if (!this._popoverable || this._popoverable.getState()) {
-            let firstSelectedOption = this._selectable.selecteds().find((selected) => !selected.el._disableable.isDisabled())?.el;
-            this._activatable.activateSelectedOrFirst(firstSelectedOption);
-          } else {
-            this._activatable.clearActive();
-          }
-        });
-      });
-      observer.observe(list, { childList: true });
-    }
-    list() {
-      return this.querySelector("ui-options") || this;
-    }
-  };
-  var UIPillboxTrigger = class extends UIElement {
-    boot() {
-      if (this.querySelector("input")) {
-        setAttribute2(this, "tabindex", "-1");
-      } else {
-        setAttribute2(this, "tabindex", "0");
-      }
-      this._disableable = new Disableable(this);
-      let disableClick = (e) => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      };
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          this.addEventListener("click", disableClick, true);
-        } else {
-          this.removeEventListener("click", disableClick, true);
-        }
-      });
-    }
-    mount() {
-    }
-  };
-  element("pillbox-trigger", UIPillboxTrigger);
-  element("pillbox", UIPillbox);
-  inject(({ css }) => css`ui-pillbox { display: block; }`);
-  function openPopoverWithSpacebar(el) {
-    on(el, "keydown", (e) => {
-      if (e.key === " ") {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        el.click();
-      }
-    });
-  }
-  function focusInputOnSelection(root, selectable, input) {
-    selectable.onChange(() => {
-      if (document.activeElement !== input && document.activeElement.closest("ui-pillbox") === root) {
-        input.focus();
-      }
-    });
-  }
-  function hideInputPlaceholderWhenNotEmpty(selectable, input) {
-    selectable.onInitAndChange(() => {
-      if (selectable.noneAreSelected()) {
-        setAttribute2(input, "placeholder", input.getAttribute("data-placeholder"));
-      } else {
-        setAttribute2(input, "placeholder", "");
-      }
-    });
-  }
-  function deselectLastItemWithBackspace(selectable, input) {
-    on(input, "keydown", (e) => {
-      if (input.value == "" && e.key === "Backspace") {
-        let last = selectable.findByValue(
-          selectable.getState().at(-1)
-        );
-        last?.deselect();
-      }
-    });
-  }
-  function forwardClicksToInputWhenPopoverIsOpen(popoverable, trigger, input) {
-    on(trigger, "click", (e) => {
-      if (popoverable.getState()) {
-        input.focus();
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      }
-    });
-  }
-
-  // js/options.js
-  var UIOptions = class extends UIElement {
-    boot() {
-      setAttribute2(this, "tabindex", "-1");
-      if (this.hasAttribute("popover")) {
-        this.addEventListener("lofi-close-popovers", () => {
-          this.hidePopover();
-        });
-      }
-      setAttribute2(this, "role", "listbox");
-    }
-    mount() {
-      let picker = this.closest("ui-autocomplete, ui-combobox, ui-select, ui-pillbox");
-      let input = picker?.input();
-      if (input) displayEmptyAndCreateOptions(this, input, picker._filterable);
-    }
-  };
-  var UIOption = class extends UIElement {
-    mount() {
-      let target = this;
-      this._disableable = new Disableable(target, {
-        disableWithParent: false
-      });
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          setAttribute2(target, "aria-disabled", "true");
-        } else {
-          removeAttribute(target, "aria-disabled");
-        }
-      });
-      let id = assignId(target, "option");
-      setAttribute2(target, "role", "option");
-      this._filterable = new Filterable(target, {
-        mirror: this,
-        keep: !!this.closest("ui-option-empty, ui-empty") || this.getAttribute("filter") === "manual"
-      });
-      this._activatable = new Activatable(target);
-      if (!this.hasAttribute("action")) {
-        this._selectable = new Selectable(target, {
-          value: this.getValue(),
-          label: this.getLabel(),
-          selectedLabel: this.getSelectedLabel(),
-          selectedInitially: this.hasAttribute("selected")
-        });
-      }
-      let observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName === "selected") {
-            if (this.hasAttribute("selected")) this._selectable.setState(true);
-            else this._selectable.setState(false);
-          }
-        });
-      });
-      observer.observe(this, { attributeFilter: ["selected"] });
-    }
-    get selected() {
-      if (!this?._selectable) return false;
-      return this._selectable.isSelected();
-    }
-    set selected(value3) {
-      if (!this?._selectable) return false;
-      this._selectable.setState(value3);
-    }
-    getSelectedLabel() {
-      return this.getAttribute("selected-label");
-    }
-    getLabel() {
-      return this.hasAttribute("label") ? this.getAttribute("label") : this.textContent.trim();
-    }
-    getValue() {
-      return this.hasAttribute("value") ? this.getAttribute("value") : this.textContent.trim();
-    }
-  };
-  var UIOptionCreate = class extends UIElement {
-    mount() {
-      this._activatable = new Activatable(this);
-      this._filterable = new Filterable(this, { keep: true });
-      this._disableable = new Disableable(this, {
-        disableWithParent: false
-      });
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          setAttribute2(this, "aria-disabled", "true");
-        } else {
-          removeAttribute(this, "aria-disabled");
-        }
-      });
-    }
-  };
-  var UIOptionEmpty = class extends UIElement {
-  };
-  var UIEmpty = class extends UIOptionEmpty {
-  };
-  inject(({ css }) => css`ui-options:not([popover]), ui-option { display: block; cursor: default; }`);
-  inject(({ css }) => css`ui-option-create { display: block; cursor: default; }`);
-  inject(({ css }) => css`ui-option-empty { display: block; cursor: default; }`);
-  inject(({ css }) => css`ui-empty { display: block; cursor: default; }`);
-  element("options", UIOptions);
-  element("option", UIOption);
-  element("option-create", UIOptionCreate);
-  element("option-empty", UIOptionEmpty);
-  element("empty", UIEmpty);
-  function normalizeScopedSelector(selector) {
-    if (!CSS.supports("selector(&)")) {
-      return selector.replace("&", ":scope");
-    }
-    return selector;
-  }
-  function displayEmptyAndCreateOptions(list, input, filterable) {
-    let empty = list.querySelector(normalizeScopedSelector("& > ui-option-empty, & > ui-empty"));
-    let create = list.querySelector(normalizeScopedSelector("& > ui-option-create"));
-    let minLength = create?.hasAttribute("min-length") ? parseInt(create.getAttribute("min-length")) : void 0;
-    setAttribute2(empty, "data-hidden", "");
-    if (create) setAttribute2(create, "data-hidden", "");
-    let isHidden = (el) => el.hasAttribute("data-hidden");
-    let isUnique = (el) => el.textContent.toLowerCase().trim() !== input.value.toLowerCase().trim();
-    let getItems = () => Array.from(list.querySelectorAll(normalizeScopedSelector("& > ui-option")));
-    let showLoading = () => {
-      if (empty.hasAttribute("when-loading")) {
-        let emptyContent = empty.textContent;
-        empty.textContent = empty.getAttribute("when-loading");
-        empty.__hideLoading = () => {
-          empty.textContent = emptyContent;
-          empty.__hideLoading = void 0;
-        };
-      }
-    };
-    let revertDisable;
-    let debounceEnable;
-    let refresh = () => {
-      clearTimeout(revertDisable);
-      clearTimeout(debounceEnable);
-      if (input.hasAttribute("data-flux-loading") || input.hasAttribute("data-loading")) return;
-      let items = getItems();
-      let isEmpty = items.every((i) => isHidden(i));
-      if (create) {
-        if (minLength && input.value.trim().length < minLength) {
-          setAttribute2(create, "data-hidden", "");
-        } else {
-          if (items.every((i) => isUnique(i))) {
-            removeAttribute(create, "data-hidden");
-          } else {
-            setAttribute2(create, "data-hidden", "");
-          }
-        }
-        if (isEmpty) create._activatable.activate(true);
-        let enable = () => {
-          removeAttribute(create, "disabled");
-        };
-        if (filterable) {
-          enable();
-        } else {
-          debounceEnable = setTimeout(enable, 150);
-        }
-      }
-      if (isEmpty && (!create || isHidden(create))) {
-        removeAttribute(empty, "data-hidden");
-      } else {
-        setAttribute2(empty, "data-hidden", "");
-      }
-      empty.__hideLoading?.();
-    };
-    if (filterable) {
-      filterable.onChange(() => refresh());
-      if (create) {
-        on(input, "input", () => {
-          if (minLength && input.value.trim().length < minLength) {
-            setAttribute2(create, "data-hidden", "");
-          }
-        });
-      }
-    } else {
-      let observer = new MutationObserver(() => {
-        requestAnimationFrame(() => refresh());
-      });
-      observer.observe(list, { childList: true });
-      observer.observe(input, { attributes: true, attributeFilter: ["data-loading", "data-flux-loading"] });
-      if (create) {
-        on(input, "input", (e) => {
-          clearTimeout(revertDisable);
-          clearTimeout(debounceEnable);
-          let isEmpty = getItems().every((i) => isHidden(i));
-          if (isEmpty && input.value.trim() === "" && !isHidden(create)) {
-            showLoading();
-            removeAttribute(empty, "data-hidden");
-            setAttribute2(create, "data-hidden", "");
-          } else if (input.value.trim() === "" && !isHidden(create)) {
-            setAttribute2(create, "data-hidden", "");
-          }
-          if (minLength && input.value.trim().length >= minLength) {
-            removeAttribute(create, "data-hidden");
-          }
-          setAttribute2(create, "disabled", "");
-          revertDisable = setTimeout(() => {
-            removeAttribute(create, "disabled");
-            if (isEmpty) create._activatable.activate();
-          }, 200);
-        });
-      }
-    }
-    refresh();
-  }
-
-  // js/calendar/date.js
-  var DateValue = class _DateValue {
-    constructor(year, month, day = 1) {
-      this._date = new Date(Date.UTC(year, month - 1, day));
-    }
-    isBetween(min2, max2) {
-      if (!min2 && !max2) return true;
-      if (!min2) return this._date <= max2._date;
-      if (!max2) return this._date >= min2._date;
-      return this._date >= min2._date && this._date <= max2._date;
-    }
-    isSameDay(date) {
-      if (!date) return false;
-      return this._date.getUTCDate() === date._date.getUTCDate() && this._date.getUTCMonth() === date._date.getUTCMonth() && this._date.getUTCFullYear() === date._date.getUTCFullYear();
-    }
-    isBefore(date) {
-      if (!date) return false;
-      return this._date < date._date;
-    }
-    isAfter(date) {
-      if (!date) return false;
-      return this._date > date._date;
-    }
-    /** Immutable manipulators */
-    incrementDays(days) {
-      let copy = this.getCopy();
-      copy._date.setUTCDate(copy._date.getUTCDate() + days);
-      return copy;
-    }
-    addMonths(months) {
-      let copy = this.getCopy();
-      copy._date.setUTCMonth(copy._date.getUTCMonth() + months);
-      return copy;
-    }
-    addDays(days) {
-      let copy = this.getCopy();
-      copy._date.setUTCDate(copy._date.getUTCDate() + days);
-      return copy;
-    }
-    /** Getters */
-    getYear() {
-      return this._date.getUTCFullYear();
-    }
-    getMonth() {
-      return this._date.getUTCMonth() + 1;
-    }
-    getPaddedMonth() {
-      return String(this.getMonth()).padStart(2, "0");
-    }
-    getDay() {
-      return this._date.getUTCDate();
-    }
-    getPaddedDay() {
-      return String(this.getDay()).padStart(2, "0");
-    }
-    getDate() {
-      return this._date;
-    }
-    getCopy() {
-      return new _DateValue(this.getYear(), this.getMonth(), this.getDay());
-    }
-    getDayOfWeek() {
-      return this._date.getUTCDay();
-    }
-    getDaysInMonth() {
-      return new _DateValue(this.getYear(), this.getMonth() + 1, 0).getDay();
-    }
-    getFirstDayOfMonth() {
-      return new _DateValue(this.getYear(), this.getMonth(), 1).getDayOfWeek();
-    }
-    getWeekNumber() {
-      let firstDayOfYear = new Date(Date.UTC(this._date.getUTCFullYear(), 0, 1));
-      let firstThursday = new Date(firstDayOfYear);
-      firstThursday.setUTCDate(1 + (11 - firstDayOfYear.getUTCDay()) % 7);
-      let targetThursday = new Date(this._date);
-      targetThursday.setUTCDate(this._date.getUTCDate() + (11 - this._date.getUTCDay()) % 7);
-      let weeksBetween = Math.floor((targetThursday.getTime() - firstThursday.getTime()) / (7 * 24 * 60 * 60 * 1e3));
-      return weeksBetween + 1;
-    }
-    /** Setters */
-    setDay(day) {
-      this._date.setUTCDate(day);
-    }
-    setMonth(month) {
-      this._date.setUTCMonth(month - 1);
-    }
-    setYear(year) {
-      this._date.setUTCFullYear(year);
-    }
-    /** Static factories: */
-    static fromIsoDateString(isoString) {
-      if (!isoString) return null;
-      let [year, month, day] = isoString.split("T")[0]?.split("-")?.map(Number);
-      return new _DateValue(year, month, day);
-    }
-    static fromLocalDate(date) {
-      if (!date) return null;
-      return new _DateValue(date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate());
-    }
-    static fromDate(date) {
-      if (!date) return null;
-      return new _DateValue(date.getFullYear(), date.getMonth() + 1, date.getDate());
-    }
-    static fromParts(year, month, day) {
-      return new _DateValue(year, month, day);
-    }
-    static today() {
-      return _DateValue.fromDate(/* @__PURE__ */ new Date());
-    }
-    static firstDayOfMonth(date) {
-      return new _DateValue(date.getYear(), date.getMonth(), 1);
-    }
-    /** Formats */
-    toIsoDateString() {
-      return [this.getYear(), this.getPaddedMonth(), this.getPaddedDay()].join("-");
-    }
-    toParts() {
-      return [this.getYear(), this.getMonth(), this.getDay()];
-    }
-    toDate() {
-      return new Date(this.getYear(), this.getMonth() - 1, this.getDay());
-    }
-    toFormattedString(locale, options) {
-      return this.toDate().toLocaleDateString(locale, options);
-    }
-  };
-
-  // js/calendar/render.js
-  function renderMonth(monthEl, config, viewState, metadata) {
-    let headingTemplate = monthEl.querySelector('template[name="heading"]');
-    let weekdayTemplate = monthEl.querySelector('template[name="weekday"]');
-    let weekTemplate = monthEl.querySelector('template[name="week"]');
-    headingTemplate && renderHeading(headingTemplate, config, viewState);
-    weekdayTemplate && renderWeekdays(weekdayTemplate, config);
-    weekTemplate && renderDates(weekTemplate, config, viewState, metadata);
-  }
-  function renderHeading(template, config, viewState) {
-    renderTemplate(template, (hydrate) => {
-      return hydrate({
-        slots: {
-          default: new Intl.DateTimeFormat(config.locale, {
-            month: template.hasAttribute("display") ? template.getAttribute("display") : "long",
-            year: "numeric",
-            timeZone: "UTC"
-          }).format(new DateValue(viewState.year, viewState.month).getDate())
-        }
-      });
-    });
-  }
-  function renderWeekdays(template, config) {
-    let format = (date) => {
-      if (template.hasAttribute("display")) {
-        return new Intl.DateTimeFormat(config.locale, { weekday: template.getAttribute("display") }).format(date);
-      }
-      let safeTwoCharLocales = ["en", "es", "de", "fr", "it", "pt"];
-      if (safeTwoCharLocales.includes(config.locale.split("-")[0])) {
-        let formatter2 = new Intl.DateTimeFormat(config.locale, { weekday: "short" });
-        return formatter2.format(date).slice(0, 2);
-      }
-      let formatter = new Intl.DateTimeFormat(config.locale, { weekday: "narrow" });
-      return formatter.format(date);
-    };
-    let weekdays = Array.from({ length: 7 }, (_, idx) => {
-      let adjustedIdx = (idx + config.startDay) % 7;
-      let date = new Date(2024, 0, adjustedIdx + 7);
-      return format(date);
-    });
-    renderTemplate(template, (hydrate) => {
-      return weekdays.map((weekday) => hydrate({ slots: { default: weekday } }));
-    });
-  }
-  function renderDates(template, config, viewState, metadata) {
-    let month = viewState.month;
-    let year = viewState.year;
-    let firstDay = (new DateValue(year, month).getFirstDayOfMonth() - config.startDay + 7) % 7;
-    let totalDays = new DateValue(year, month).getDaysInMonth();
-    let [prevYear, prevMonth] = new DateValue(year, month).addMonths(-1).toParts();
-    let prevMonthDays = new DateValue(prevYear, prevMonth).getDaysInMonth();
-    let [displayDates, actualDates] = [[], []];
-    for (let i = 0; i < firstDay; i++) {
-      displayDates.push(0);
-      let prevDate = prevMonthDays - firstDay + i + 1;
-      actualDates.push(new DateValue(prevYear, prevMonth, prevDate).toIsoDateString());
-    }
-    for (let i = 1; i <= totalDays; i++) {
-      displayDates.push(i);
-      actualDates.push(new DateValue(year, month, i).toIsoDateString());
-    }
-    let totalCells = firstDay + totalDays;
-    let remainingDays = (7 - totalCells % 7) % 7;
-    let [nextYear, nextMonth] = new DateValue(year, month).addMonths(1).toParts();
-    for (let i = 1; i <= remainingDays; i++) {
-      displayDates.push(0);
-      actualDates.push(new DateValue(nextYear, nextMonth, i).toIsoDateString());
-    }
-    if (config.fixedWeeks) {
-      let currentWeeks = Math.ceil(displayDates.length / 7);
-      let targetWeeks = config.fixedWeeks;
-      let weeksDiff = targetWeeks - currentWeeks;
-      if (weeksDiff > 0) {
-        for (let i = 0; i < weeksDiff * 7; i++) {
-          displayDates.push(0);
-          actualDates.push(DateValue.fromIsoDateString(actualDates[actualDates.length - 1]).addDays(1).toIsoDateString());
-        }
-      } else if (weeksDiff < 0) {
-        displayDates.length = targetWeeks * 7;
-        actualDates.length = targetWeeks * 7;
-      }
-    }
-    let splitIntoWeeks = (arr) => Array.from(
-      { length: Math.ceil(arr.length / 7) },
-      (_, idx) => arr.slice(idx * 7, (idx + 1) * 7)
-    );
-    let displayWeeks = splitIntoWeeks(displayDates);
-    let actualWeeks = splitIntoWeeks(actualDates);
-    renderTemplate(template, (hydrate) => {
-      return displayWeeks.map((week, weekIdx) => {
-        let weekEl = hydrate();
-        let actualWeekDates = actualWeeks[weekIdx];
-        let numberTemplate = weekEl.querySelector('template[name="number"]');
-        if (numberTemplate) {
-          let fourthDayIdx = (4 - config.startDay + 7) % 7;
-          let weekNumber = DateValue.fromIsoDateString(actualWeekDates[fourthDayIdx]).getWeekNumber();
-          renderTemplate(numberTemplate, (hydrate2) => {
-            return hydrate2({ slots: { default: weekNumber } });
-          });
-        }
-        renderTemplate(weekEl.querySelector('template[name="day"]'), (hydrate2) => {
-          return week.map((day, dayIdx) => {
-            if (day === 0) {
-              let weekDate = DateValue.fromIsoDateString(actualWeekDates[dayIdx]);
-              let dayNumber = weekDate.getDay();
-              return hydrate2({
-                slots: { default: dayNumber },
-                attrs: { "data-date": actualWeekDates[dayIdx], "data-outside": "" }
-              });
-            }
-            let date = DateValue.fromIsoDateString(actualWeekDates[dayIdx]);
-            let dayEl = hydrate2({
-              slots: { default: day },
-              attrs: { "data-date": actualWeekDates[dayIdx] }
-            });
-            let subtext = metadata.subtext(date);
-            let details = metadata.details(date);
-            let variant = metadata.variant(date);
-            if (![false, null, void 0].includes(variant)) {
-              dayEl.dataset.dateVariant = variant;
-            }
-            if (![false, null, void 0].includes(subtext)) {
-              let template2 = dayEl.querySelector('template[name="subtext"]');
-              template2 && renderTemplate(template2, (hydrate3) => hydrate3({ slots: { default: subtext } }));
-            }
-            if (![false, null, void 0].includes(details)) {
-              let template2 = dayEl.querySelector('template[name="details"]');
-              template2 && renderTemplate(template2, (hydrate3) => hydrate3({ slots: { default: details } }));
-            }
-            return dayEl;
-          });
-        });
-        return weekEl;
-      });
-    });
-  }
-  function updateMonth(el, disabled, config, viewState, selectable, validator) {
-    let getFirstDateToMakeTabbable = (month, year) => {
-      return selectable.lowerBound(() => {
-        let isCurrentMonth = DateValue.today().getMonth() === month && DateValue.today().getYear() === year;
-        return isCurrentMonth ? DateValue.today() : new DateValue(year, month);
-      });
-    };
-    let tabbable = getFirstDateToMakeTabbable(viewState.month, viewState.year);
-    el.querySelectorAll("[data-date]").forEach((cell) => {
-      setAttribute2(cell, "role", "gridcell");
-      let button = cell.querySelector("button,ui-button");
-      let date = dateFromCell(cell);
-      if (!date) return;
-      button ? setAttribute2(button, "aria-label", date.toFormattedString(config.locale, { day: "numeric", month: "long", year: "numeric", weekday: "long" })) : setAttribute2(cell, "aria-label", date.toFormattedString(config.locale, { day: "numeric", month: "long", year: "numeric", weekday: "long" }));
-      if (!validator.isValid(date)) {
-        setAttribute2(cell, "disabled", "");
-        setAttribute2(cell, "aria-disabled", "true");
-        button && setAttribute2(button, "disabled", "");
-        validator.isUnavailable(date) && setAttribute2(cell, "data-unavailable", "");
-      } else if (disabled) {
-        setAttribute2(cell, "disabled", "");
-        setAttribute2(cell, "aria-disabled", "true");
-        button && setAttribute2(button, "disabled", "");
-      } else {
-        removeAttribute(cell, "disabled");
-        removeAttribute(cell, "data-unavailable");
-        removeAttribute(cell, "aria-disabled");
-        button && removeAttribute(button, "disabled");
-      }
-      if (DateValue.today().isSameDay(date)) {
-        setAttribute2(cell, "data-today", "");
-      } else {
-        removeAttribute(cell, "data-today", "");
-      }
-      selectable.attributes(cell, date);
-      if (date.isSameDay(tabbable)) {
-        button && setAttribute2(button, "tabindex", "0");
-      } else {
-        button && setAttribute2(button, "tabindex", "-1");
-      }
-    });
-  }
-  function renderTemplate(template, callback) {
-    if (!template) return;
-    let cleanup = () => {
-      let sibling = template.nextElementSibling;
-      while (sibling && sibling.hasAttribute("data-appended")) {
-        let toRemove = sibling;
-        sibling = sibling.nextElementSibling;
-        toRemove.remove();
-      }
-    };
-    cleanup();
-    let hydrated = callback(({ slots = {}, attrs = {} } = {}) => {
-      let clone = template.content.cloneNode(true).firstElementChild;
-      Object.entries(slots).forEach(([key, value3]) => {
-        let slotNodes = key === "default" ? clone.querySelectorAll("slot:not([name])") : clone.querySelectorAll(`slot[name="${key}"]`);
-        slotNodes.forEach((i) => i.replaceWith(
-          typeof value3 === "string" ? document.createTextNode(value3) : value3
-        ));
-      });
-      clone.querySelectorAll("slot").forEach((slot) => slot.remove());
-      Object.entries(attrs).forEach(([key, value3]) => {
-        clone.setAttribute(key, value3);
-      });
-      return clone;
-    });
-    hydrated = Array.isArray(hydrated) ? hydrated : [hydrated];
-    hydrated.reverse().forEach((node) => {
-      setAttribute2(node, "data-appended", "");
-      template.after(node);
-    });
-    return { cleanup };
-  }
-  function dateFromCell(cell) {
-    if (!cell) return null;
-    if (!cell.hasAttribute("data-date")) return null;
-    return DateValue.fromIsoDateString(cell.getAttribute("data-date"));
-  }
-
-  // js/time-picker/selectable.js
-  var SelectableModes = class {
-    static SINGLE = "single";
-    static MULTIPLE = "multiple";
-  };
-  var ObservableTrigger = class {
-    static SELECTION = "selection";
-    static ACTIVATION = "activation";
-    static VIEW_CHANGE = "view-change";
-  };
-  var Selectable2 = class _Selectable {
-    constructor(selection, config, observable) {
-      this.config = config;
-      this.observable = observable;
-      this.selection = selection;
-    }
-    select(value3) {
-      let previousSelection = this.selection;
-      this.selection = this.selection.select(value3, this.config);
-      if (this.selection.shouldNotify(previousSelection)) this.observable.notify(ObservableTrigger.SELECTION);
-      else this.observable.notify(ObservableTrigger.ACTIVATION);
-    }
-    setValue(value3) {
-      let previousSelection = this.selection;
-      this.selection = _Selectable.createSelectionFromValue(value3, this.config);
-      if (this.selection.shouldNotify(previousSelection)) this.observable.notify(ObservableTrigger.SELECTION);
-      else this.observable.notify(ObservableTrigger.ACTIVATION);
-    }
-    getValue() {
-      return this.selection.value();
-    }
-    isSelectable(value3) {
-      return this.selection.selectable(value3, this.config);
-    }
-    /** Passthrough methods */
-    contains(...params) {
-      return this.selection.contains(...params);
-    }
-    hasSelection() {
-      return this.selection.hasSelection();
-    }
-    lowerBound(...params) {
-      return this.selection.lowerBound(...params);
-    }
-    upperBound(...params) {
-      return this.selection.upperBound(...params);
-    }
-    display(...params) {
-      return this.selection.display(this.config, ...params);
-    }
-    attributes(...params) {
-      return this.selection.attributes(...params);
-    }
-    static createSelectionFromValue(value3, config) {
-      if (config.mode === SelectableModes.MULTIPLE) {
-        value3 ??= [];
-        return new MultipleSelection(value3);
-      } else {
-        if (!value3) return new NoneSelection();
-        return new SingleSelection(value3);
-      }
-    }
-    static createFromValueStringAttribute(value3, config, observable) {
-      let selection = _Selectable.createSelectionFromValueStringAttribute(value3, config);
-      return new _Selectable(selection, config, observable);
-    }
-    static createSelectionFromValueStringAttribute(value3, config) {
-      if (config.mode === SelectableModes.MULTIPLE) {
-        value3 = value3 ? value3.split(",").map((i) => i.trim()) : [];
-      }
-      return _Selectable.createSelectionFromValue(value3, config);
-    }
-  };
-  var Selection = class {
-    contains() {
-    }
-    shouldNotify(previousSelection) {
-      return true;
-    }
-    hasSelection() {
-      return false;
-    }
-    lowerBound(fallback) {
-      return value(fallback);
-    }
-    upperBound(fallback) {
-      return this.lowerBound(fallback);
-    }
-    selectable(value3, config) {
-      return true;
-    }
-    display(config) {
-    }
-    value() {
-    }
-    attributes(el, value3) {
-      if (this.contains(value3)) {
-        setAttribute2(el, "data-selected", "");
-        setAttribute2(el, "aria-selected", "true");
-      } else {
-        removeAttribute(el, "data-selected");
-        setAttribute2(el, "aria-selected", "false");
-      }
-    }
-  };
-  var NoneSelection = class _NoneSelection extends Selection {
-    contains() {
-      return false;
-    }
-    shouldNotify(selection) {
-      return !(selection instanceof _NoneSelection);
-    }
-    hasSelection() {
-      return false;
-    }
-    lowerBound(fallback) {
-      return value(fallback);
-    }
-    select(value3) {
-      return new SingleSelection(value3);
-    }
-    display(config) {
-      return "";
-    }
-    value() {
-      return null;
-    }
-  };
-  var SingleSelection = class _SingleSelection extends Selection {
-    constructor(value3) {
-      super();
-      this._value = value3;
-    }
-    contains(value3) {
-      return this._value === value3;
-    }
-    shouldNotify(previousSelection) {
-      if (previousSelection instanceof _SingleSelection && this._value === previousSelection._value) return false;
-      return true;
-    }
-    hasSelection() {
-      return true;
-    }
-    lowerBound() {
-      return this._value;
-    }
-    select(value3) {
-      if (this._value === value3) return new NoneSelection();
-      return new _SingleSelection(value3);
-    }
-    display(config) {
-      return formatTime(this._value, config.timeFormat, config.locale);
-    }
-    value() {
-      return this._value;
-    }
-  };
-  var MultipleSelection = class _MultipleSelection extends Selection {
-    constructor(values) {
-      super();
-      this._values = values.sort((a, b) => timeInMinutes(a) < timeInMinutes(b) ? -1 : 1);
-    }
-    contains(value3) {
-      return this._values.some((i) => i === value3);
-    }
-    shouldNotify(previousSelection) {
-      if (previousSelection instanceof _MultipleSelection && this._values.every((i) => previousSelection._values.includes(i)) && previousSelection._values.every((i) => this._values.includes(i))) return false;
-      return true;
-    }
-    hasSelection() {
-      return this._values.length > 0;
-    }
-    lowerBound(fallback) {
-      let sortedValues = this._values.sort((a, b) => timeInMinutes(a) < timeInMinutes(b) ? -1 : 1);
-      return sortedValues[0] || value(fallback);
-    }
-    upperBound(fallback) {
-      let sortedValues = this._values.sort((a, b) => timeInMinutes(a) < timeInMinutes(b) ? -1 : 1);
-      return sortedValues[sortedValues.length - 1] || value(fallback);
-    }
-    select(value3) {
-      let containsValue = this._values.some((i) => i === value3);
-      if (containsValue) return new _MultipleSelection(this._values.filter((i) => i !== value3));
-      return new _MultipleSelection([...this._values, value3]);
-    }
-    display(config) {
-      return this._values.sort((a, b) => timeInMinutes(a) < timeInMinutes(b) ? -1 : 1).map((i) => formatTime(i, config.timeFormat, config.locale)).join(", ");
-    }
-    value() {
-      return this._values;
-    }
-  };
-  function value(i = null) {
-    return typeof i === "function" ? i() : i;
-  }
-
-  // js/time-picker/trigger.js
-  var UITimePickerTrigger = class extends UIElement {
-    boot() {
-      this.picker = this.closest("ui-time-picker");
-      let inputs = this.querySelectorAll("input");
-      this._disableable = new Disableable(this);
-      let disableClick = (e) => {
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      };
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          this.addEventListener("click", disableClick, true);
-        } else {
-          this.removeEventListener("click", disableClick, true);
-        }
-      });
-      if (inputs.length === 0) return;
-      if (inputs.length < 2) throw new Error("Time picker inputs missing");
-      this.hourInput = inputs[0];
-      this.minuteInput = inputs[1];
-      this.meridiemInput = inputs[2] || null;
-      if (this.meridiemInput && this.use24HourFormat()) {
-        this.meridiemInput.style.display = "none";
-        this.meridiemInput = null;
-      }
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          this.hourInput.setAttribute("disabled", "");
-          this.minuteInput.setAttribute("disabled", "");
-          this.meridiemInput?.setAttribute("disabled", "");
-        } else {
-          this.hourInput.removeAttribute("disabled");
-          this.minuteInput.removeAttribute("disabled");
-          this.meridiemInput?.removeAttribute("disabled");
-        }
-      });
-      this.clearInputs();
-      initCursorSelectionListeners(this.hourInput);
-      initCursorSelectionListeners(this.minuteInput);
-      this.meridiemInput && initCursorSelectionListeners(this.meridiemInput);
-      this.hourInput.addEventListener("keydown", (e) => {
-        if (e.key === "ArrowRight") return this.minuteInput.focus();
-      });
-      this.minuteInput.addEventListener("keydown", (e) => {
-        if (e.key === "ArrowLeft") return this.hourInput.focus();
-        if (e.key === "ArrowRight") return this.meridiemInput?.focus();
-      });
-      this.meridiemInput?.addEventListener("keydown", (e) => {
-        if (e.key === "ArrowLeft") return this.minuteInput.focus();
-      });
-      blockDefaultInputs(this.hourInput);
-      blockDefaultInputs(this.minuteInput);
-      this.meridiemInput && blockDefaultInputs(this.meridiemInput);
-      this.initHourInputListeners();
-      this.initMinuteInputListeners();
-      this.meridiemInput && this.initMeridiemInputListeners();
-      this.meridiemInput && this.setMeridiemWidthBasedOnLocale();
-      this.picker.observable.subscribe(ObservableTrigger.SELECTION, () => {
-        this.updateInputsFromSelectable(this.picker.selectable);
-      });
-      this.updateInputsFromSelectable(this.picker.selectable);
-    }
-    focus() {
-      if (this.hourInput) return this.hourInput.focus();
-      this.querySelector("button,ui-button")?.focus();
-    }
-    use24HourFormat() {
-      if (this.picker.config.timeFormat === "24-hour") return true;
-      if (this.picker.config.timeFormat === "12-hour") return false;
-      return localeIs24HourFormat(this.picker.config.locale);
-    }
-    processTime() {
-      let time = getTime(
-        this.hourInput.value,
-        this.minuteInput.value,
-        this.meridiemInput?.value
-      );
-      if (!time) return;
-      this.updateSelectable(time);
-      this.updateInputsFromSelectable(this.picker.selectable);
-    }
-    updateSelectable(time) {
-      this.picker.selectable.setValue(time);
-    }
-    updateInputsFromSelectable(selectable) {
-      let time = selectable.getValue();
-      this.updateInputs(time);
-    }
-    // Time is in 24 hour format
-    updateInputs(time) {
-      if (!time) return this.clearInputs();
-      let [hours, minutes] = time.split(":");
-      let meridiem = null;
-      if (this.meridiemInput) {
-        hours = parseInt(hours);
-        meridiem = getLocalisedMeridiem(hours, this.picker.config.locale);
-        if (hours > 12) {
-          hours = hours - 12;
-        } else if (hours === 0) {
-          hours = 12;
-        }
-        hours = hours.toString();
-      }
-      this.hourInput.value = hours.padStart(2, "0");
-      this.minuteInput.value = minutes.padStart(2, "0");
-      this.meridiemInput && (this.meridiemInput.value = meridiem);
-    }
-    clearInputs() {
-      this.hourInput.value = "--";
-      this.minuteInput.value = "--";
-      this.meridiemInput && (this.meridiemInput.value = "--");
-    }
-    initHourInputListeners() {
-      let isEditing = false;
-      this.hourInput.addEventListener("keydown", (e) => {
-        if (!["ArrowUp", "ArrowDown"].includes(e.key)) return;
-        e.preventDefault();
-        e.stopPropagation();
-        let number = parseInt(this.hourInput.value);
-        let currentTime = this.picker.selectable.getValue();
-        let [hours, minutes] = currentTime?.split(":") || ["00", "00"];
-        hours = parseInt(hours);
-        if (e.key === "ArrowUp") {
-          if (currentTime === null || hours === 23) {
-            hours = 0;
-          } else {
-            hours++;
-          }
-        } else if (e.key === "ArrowDown") {
-          if (currentTime === null || hours === 0) {
-            hours = 23;
-          } else {
-            hours--;
-          }
-        }
-        let newTime = getTime(hours.toString(), minutes);
-        this.updateSelectable(newTime);
-        this.updateInputsFromSelectable(this.picker.selectable);
-        highlightInputContents(this.hourInput);
-      });
-      this.hourInput.addEventListener("keydown", (e) => {
-        if (!/[0-9]/.test(e.key)) return;
-        let number = parseInt(e.key);
-        if (this.hourInput.value === "" || this.hourInput.value === "--" || !isEditing) {
-          isEditing = true;
-          this.hourInput.value = `0${number}`;
-          number > 2 ? this.minuteInput.focus() : highlightInputContents(this.hourInput);
-          return;
-        }
-        let existingNumber = parseInt(this.hourInput.value);
-        if (existingNumber === 2 && (number >= 0 && number <= 3)) {
-          this.hourInput.value = `${existingNumber}${number}`;
-          this.minuteInput.focus();
-          return;
-        }
-        if (existingNumber === 1 || existingNumber === 0) {
-          this.hourInput.value = `${existingNumber}${number}`;
-          this.minuteInput.focus();
-          return;
-        }
-        this.hourInput.value = `0${number}`;
-        number > 2 ? this.minuteInput.focus() : highlightInputContents(this.hourInput);
-      });
-      this.hourInput.addEventListener("blur", (e) => {
-        isEditing = false;
-        this.processTime();
-      });
-    }
-    initMinuteInputListeners() {
-      let isEditing = false;
-      this.minuteInput.addEventListener("keydown", (e) => {
-        if (!["ArrowUp", "ArrowDown"].includes(e.key)) return;
-        e.preventDefault();
-        e.stopPropagation();
-        let number = parseInt(this.minuteInput.value);
-        if (e.key === "ArrowUp") {
-          if (isNaN(number) || number === 59) {
-            number = 0;
-          } else {
-            number = number + 1;
-          }
-        } else if (e.key === "ArrowDown") {
-          if (isNaN(number) || number === 0) {
-            number = 59;
-          } else {
-            number = number - 1;
-          }
-        }
-        this.minuteInput.value = number.toString().padStart(2, "0");
-        this.processTime();
-        highlightInputContents(this.minuteInput);
-      });
-      this.minuteInput.addEventListener("keydown", (e) => {
-        if (!/[0-9]/.test(e.key)) return;
-        let number = parseInt(e.key);
-        if (this.minuteInput.value === "" || this.minuteInput.value === "--" || !isEditing) {
-          isEditing = true;
-          this.minuteInput.value = `0${number}`;
-          this.processTime();
-          number > 5 ? this.meridiemInput?.focus() : highlightInputContents(this.minuteInput);
-          return;
-        }
-        let existingNumber = parseInt(this.minuteInput.value);
-        if (existingNumber <= 5) {
-          this.minuteInput.value = `${existingNumber}${number}`;
-          this.processTime();
-          this.meridiemInput?.focus();
-          return;
-        }
-        this.minuteInput.value = `0${number}`;
-        this.processTime();
-        number > 5 ? this.meridiemInput?.focus() : highlightInputContents(this.minuteInput);
-      });
-      this.minuteInput.addEventListener("blur", (e) => {
-        isEditing = false;
-        this.processTime();
-      });
-    }
-    initMeridiemInputListeners() {
-      this.meridiemInput?.addEventListener("keydown", (e) => {
-        if (!["ArrowUp", "ArrowDown"].includes(e.key)) return;
-        e.preventDefault();
-        e.stopPropagation();
-        let value3 = this.meridiemInput.value;
-        if (e.key === "ArrowUp") {
-          if (value3 === "" || value3 === "AM") {
-            value3 = "PM";
-          } else {
-            value3 = "AM";
-          }
-        } else if (e.key === "ArrowDown") {
-          if (value3 === "" || value3 === "PM") {
-            value3 = "AM";
-          } else {
-            value3 = "PM";
-          }
-        }
-        this.meridiemInput.value = value3;
-        this.processTime();
-        highlightInputContents(this.meridiemInput);
-      });
-      this.meridiemInput?.addEventListener("keydown", (e) => {
-        if (!["a", "p", "A", "P"].includes(e.key)) return;
-        if (e.key === "a" || e.key === "A") {
-          this.meridiemInput.value = "AM";
-        } else if (e.key === "p" || e.key === "P") {
-          this.meridiemInput.value = "PM";
-        }
-        this.processTime();
-        highlightInputContents(this.meridiemInput);
-      });
-    }
-    // Not all locales have the same width meridiem, like US is `AM` but Canada is `a.m.`,
-    // so we need to calculate the width based on the locale...
-    setMeridiemWidthBasedOnLocale() {
-      let meridiem = getLocalisedMeridiem(12, this.picker.config.locale);
-      if (!meridiem) return;
-      this.meridiemInput.style.width = `calc(${meridiem.length}ch + 2px)`;
-    }
-  };
-  function initCursorSelectionListeners(input) {
-    input.addEventListener("focus", (e) => {
-      highlightInputContents(input);
-    });
-    input.addEventListener("mousedown", (e) => {
-      highlightInputContents(input);
-    });
-    input.addEventListener("mouseup", (e) => {
-      e.preventDefault();
-      highlightInputContents(input);
-    });
-  }
-  function blockDefaultInputs(input) {
-    input.addEventListener("keydown", (e) => {
-      if (e.ctrlKey || e.metaKey || e.altKey) return;
-      if (["Tab"].includes(e.key)) return;
-      e.preventDefault();
-    });
-  }
-  function highlightInputContents(input) {
-    input.setSelectionRange(0, input.value.length);
-  }
-  function getLocalisedMeridiem(hours, locale) {
-    let formatter = new Intl.DateTimeFormat(locale, {
-      hour: "numeric",
-      hour12: true
-    });
-    let parts = formatter.formatToParts(new Date(2024, 0, 1, hours, 0));
-    let medridiem = parts.find((part) => part.type === "dayPeriod")?.value;
-    if (medridiem) return medridiem;
-    return hours >= 12 ? "PM" : "AM";
-  }
-  function getTime(hour, minute, meridiem = null) {
-    if (hour === "--" && minute === "--" && (meridiem === null || meridiem === "--")) return null;
-    if (meridiem === "PM" && hour === "--") hour = "12";
-    if (hour === "--") hour = "00";
-    if (minute === "--") minute = "00";
-    if (meridiem === "--") meridiem = null;
-    hour = hour.padStart(2, "0");
-    minute = minute.padStart(2, "0");
-    let time = meridiem ? hour + ":" + minute + " " + meridiem : hour + ":" + minute;
-    return convertTimeStringTo24HourFormat(time);
-  }
-  function localeIs24HourFormat(locale) {
-    let formatter = new Intl.DateTimeFormat(locale, { hour: "numeric" });
-    let midnight = formatter.format(new Date(2024, 0, 1, 0, 0));
-    return midnight.startsWith("00");
-  }
-  function convertTimeStringTo24HourFormat(time) {
-    let match = time.trim().match(/^(\d{1,2}):(\d{2})(?:\s*(am|pm|AM|PM))?$/i);
-    if (!match) throw new Error(`Invalid time string: ${time}`);
-    let hours = parseInt(match[1], 10);
-    let minutes = parseInt(match[2], 10);
-    let meridiem = match[3]?.toUpperCase();
-    if (minutes > 59 || hours > 23 || meridiem !== "AM" && meridiem !== "PM" && meridiem !== void 0) throw new Error(`Invalid time string: ${time}`);
-    if (hours >= 13 || hours === 0) {
-      return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-    }
-    if (meridiem) {
-      if (hours === 12) {
-        hours = meridiem === "AM" ? 0 : 12;
-      } else if (meridiem === "PM") {
-        hours += 12;
-      }
-    }
-    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
-  }
-
-  // js/time-picker/index.js
-  var UITimePicker = class extends UIControl {
-    boot() {
-      this.config = {
-        timeFormat: this.hasAttribute("time-format") ? this.getAttribute("time-format") : "auto",
-        interval: this.interval(),
-        min: this.min(),
-        max: this.max(),
-        unavailable: this.unavailable(),
-        openTo: this.openTo(),
-        locale: this.hasAttribute("locale") ? this.getAttribute("locale") : navigator.language,
-        mode: this.hasAttribute("multiple") ? SelectableModes.MULTIPLE : SelectableModes.SINGLE,
-        dropdown: this.hasAttribute("dropdown") && this.getAttribute("dropdown") === "false" ? false : true
-      };
-      this.observable = new Observable();
-      this._controllable = new Controllable(this, { bubbles: true });
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.getAttribute("value"),
-        includeWhenEmpty: false
-      });
-      this.selectable = Selectable2.createFromValueStringAttribute(this.getAttribute("value"), this.config, this.observable);
-      this._controllable.getter(() => this.selectable.getValue());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        this.selectable.setValue(value3);
-      }));
-      this.observable.subscribe(ObservableTrigger.SELECTION, () => {
-        this._controllable.dispatch();
-        this.dispatchEvent(new CustomEvent("input", { bubbles: false }));
-      });
-      this.observable.subscribe(ObservableTrigger.SELECTION, () => {
-        this._submittable.update(this.selectable.getValue());
-      });
-      this._disableable = new Disableable(this);
-      if (!this.config.dropdown) return;
-      let popoverEl = this.querySelector("[popover]");
-      if (!popoverEl) return;
-      let triggerEl = this.trigger();
-      let optionsEl = this.querySelector("ui-time-picker-options");
-      let optionsId = initOptions(optionsEl, this.config.mode === SelectableModes.MULTIPLE);
-      this._popoverable = new Popoverable(popoverEl, {
-        triggers: [triggerEl]
-      });
-      this._anchorable = new Anchorable(popoverEl, {
-        reference: triggerEl,
-        position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-        gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-        offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0,
-        matchWidth: true
-      });
-      this._activatable = new ActivatableGroup(optionsEl, { filter: "data-hidden" });
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          setAttribute2(triggerEl, "disabled", "");
-          triggerEl.querySelectorAll("button,ui-button").forEach((button) => setAttribute2(button, "disabled", ""));
-        } else {
-          removeAttribute(triggerEl, "disabled");
-          triggerEl.querySelectorAll("button,ui-button").forEach((button) => removeAttribute(button, "disabled"));
-        }
-      });
-      triggerEl.addEventListener("click", (e) => {
-        this._popoverable.toggle();
-        triggerEl.focus();
-      });
-      triggerEl.querySelectorAll("button,ui-button").forEach((button) => {
-        initTriggerButton(button, this._popoverable, optionsId);
-        trackActiveDescendant2(button, this._activatable, this.observable);
-      });
-      initPopover2(this, popoverEl, this._popoverable, this._anchorable);
-      preventScrollWhenPopoverIsOpen2(this, this._popoverable);
-      controlPopoverWithKeyboard(triggerEl, this._popoverable);
-      controlPopoverWithEscapeKey(this, this._popoverable);
-      handleKeyboardNavigation(triggerEl, this._activatable);
-      handleKeyboardSearchNavigation(triggerEl, this._activatable, this._popoverable);
-      handleKeyboardSelection(this, triggerEl, this._activatable);
-      controlActivationWithPopover2(this._popoverable, this._activatable, this.selectable, this.config.openTo);
-      handlePopoverClosing2(this, this.config.mode, this.observable, this.selectable, this._popoverable);
-      let observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (!["interval", "unavailable", "max", "min", "open-to"].includes(mutation.attributeName)) return;
-          this.config.interval = this.interval();
-          this.config.unavailable = this.unavailable();
-          this.config.min = this.min();
-          this.config.max = this.max();
-          this.config.openTo = this.openTo();
-          this.observable.notify(ObservableTrigger.VIEW_CHANGE);
-        });
-      });
-      observer.observe(this, { attributes: true });
-    }
-    trigger() {
-      return this.querySelector("ui-time-picker-trigger");
-    }
-    list() {
-      return this.querySelector("ui-options") || this;
-    }
-    clear() {
-      this.selectable.setValue(null);
-    }
-    interval() {
-      if (this.hasAttribute("interval")) {
-        return parseInt(this.getAttribute("interval"));
-      }
-      return 30;
-    }
-    min() {
-      if (this.hasAttribute("min")) {
-        let min2 = this.getAttribute("min");
-        if (min2 === "now") {
-          return (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
-        }
-        if (validateTimeString(min2)) {
-          return min2;
-        }
-        return console.warn(`Invalid min attribute: ${min2}`);
-      }
-      return void 0;
-    }
-    max() {
-      if (this.hasAttribute("max")) {
-        let max2 = this.getAttribute("max");
-        if (max2 === "now") {
-          return (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
-        }
-        if (validateTimeString(max2)) {
-          return max2;
-        }
-        return console.warn(`Invalid max attribute: ${max2}`);
-      }
-      return void 0;
-    }
-    unavailable() {
-      if (this.hasAttribute("unavailable")) {
-        let unavailable = this.getAttribute("unavailable").split(",").map((i) => i.trim());
-        if (unavailable.every((i) => i.includes("-") ? validateTimeRangeString(i) : validateTimeString(i))) {
-          return unavailable;
-        }
-        return console.warn(`Invalid unavailable attribute: ${unavailable}`);
-      }
-      return [];
-    }
-    openTo() {
-      if (this.hasAttribute("open-to")) {
-        let openTo = this.getAttribute("open-to");
-        if (openTo === "now") {
-          return (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
-        }
-        if (validateTimeString(openTo)) {
-          return openTo;
-        }
-        return console.warn(`Invalid open-to attribute: ${openTo}`);
-      }
-      return void 0;
-    }
-  };
-  var UISelectedTime = class extends UIElement {
-    boot() {
-      this.picker = this.closest("ui-time-picker");
-      if (!this.querySelector('template[name="time"]')) {
-        let template = document.createElement("template");
-        template.setAttribute("name", "time");
-        template.innerHTML = "<div><slot></slot></div>";
-      }
-      this.templates = {
-        placeholder: this.querySelector('template[name="placeholder"]'),
-        time: this.querySelector('template[name="time"]')
-      };
-      this.picker.observable.subscribe(ObservableTrigger.SELECTION, () => {
-        this.render(this.picker);
-      });
-      this.render(this.picker);
-    }
-    mount() {
-      this.render(this.picker);
-    }
-    render(picker) {
-      this.templates.placeholder?.clearPlaceholder?.();
-      this.templates.time?.clearTime?.();
-      if (picker.selectable.hasSelection()) {
-        let { cleanup } = renderTemplate(this.templates.time, (hydrate) => {
-          return hydrate({ slots: { default: picker.selectable.display(picker.config.locale) } });
-        });
-        this.templates.time.clearTime = cleanup;
-      } else {
-        if (!this.templates.placeholder) return;
-        let { cleanup } = renderTemplate(this.templates.placeholder, (hydrate) => {
-          return hydrate({ slots: {} });
-        });
-        this.templates.placeholder.clearPlaceholder = cleanup;
-      }
-    }
-  };
-  var UITimePickerOptions = class extends UIElement {
-    boot() {
-      this.picker = this.closest("ui-time-picker");
-      this.render();
-      this.picker.observable.subscribe(ObservableTrigger.SELECTION, () => {
-        this.render();
-      });
-      this.picker.observable.subscribe(ObservableTrigger.VIEW_CHANGE, () => {
-        this.render();
-      });
-      let { enable: enableListeners, disable: disableListeners } = initializeEventListeners(this, this.picker.selectable);
-      this.picker._disableable.onInitAndChange((disabled) => {
-        disabled ? disableListeners() : enableListeners();
-      });
-    }
-    render() {
-      let template = this.querySelector('template[name="option"]');
-      if (!template) return;
-      renderTemplate(template, (hydrate) => {
-        let times = generateTimes(this.picker.config);
-        return times.map(({ value: value3, label }) => {
-          let isDisabled = this.picker.config.unavailable.some((unavailableTime) => timesAreOverlapping(value3, unavailableTime));
-          let attrs = {
-            "data-time": value3,
-            "role": "option"
-          };
-          if (isDisabled) attrs.disabled = "";
-          let el = hydrate({ attrs, slots: { default: label } });
-          this.picker.selectable.attributes(el, value3);
-          el._activatable = new Activatable(el);
-          assignId(el, "option");
-          return el;
-        });
-      });
-    }
-  };
-  element("time-picker", UITimePicker);
-  element("time-picker-trigger", UITimePickerTrigger);
-  element("selected-time", UISelectedTime);
-  element("time-picker-options", UITimePickerOptions);
-  inject(({ css }) => css`ui-time-picker { display: block; }`);
-  function initOptions(options, multiple) {
-    let optionsId = assignId(options, "options");
-    setAttribute2(options, "role", "listbox");
-    setAttribute2(options, "aria-multiselectable", multiple ? "true" : "false");
-    return optionsId;
-  }
-  function initTriggerButton(el, popoverable, optionsId) {
-    setAttribute2(el, "role", "combobox");
-    setAttribute2(el, "aria-controls", optionsId);
-    setAttribute2(el, "aria-haspopup", "listbox");
-    linkExpandedStateToPopover2(el, popoverable);
-    on(el, "click", (e) => {
-      e.stopPropagation();
-      popoverable.setState(!popoverable.getState());
-      el.focus();
-    });
-  }
-  function initPopover2(root, popover, popoverable, anchorable) {
-    let refreshPopover = () => {
-      Array.from([root, popover]).forEach((i) => {
-        popoverable.getState() ? setAttribute2(i, "data-open", "") : removeAttribute(i, "data-open", "");
-      });
-      popoverable.getState() ? anchorable.reposition() : anchorable.cleanup();
-    };
-    popoverable.onChange(() => refreshPopover());
-    refreshPopover();
-    popoverable.onChange(() => {
-      if (popoverable.getState()) {
-        root.dispatchEvent(new Event("open", {
-          bubbles: false,
-          cancelable: false
-        }));
-      } else {
-        root.dispatchEvent(new Event("close", {
-          bubbles: false,
-          cancelable: false
-        }));
-      }
-    });
-  }
-  function preventScrollWhenPopoverIsOpen2(root, popoverable) {
-    let { lock, unlock } = lockScroll(popoverable.el);
-    popoverable.onChange(() => {
-      popoverable.getState() ? lock() : unlock();
-    });
-  }
-  function linkExpandedStateToPopover2(el, popoverable) {
-    setAttribute2(el, "aria-haspopup", "listbox");
-    let refreshPopover = () => {
-      setAttribute2(el, "aria-expanded", popoverable.getState() ? "true" : "false");
-      popoverable.getState() ? setAttribute2(el, "data-open", "") : removeAttribute(el, "data-open", "");
-    };
-    popoverable.onChange(() => {
-      refreshPopover();
-    });
-    refreshPopover();
-  }
-  function trackActiveDescendant2(el, activatable) {
-    activatable.onChange(() => {
-      let activeEl = activatable.getActive();
-      activeEl ? setAttribute2(el, "aria-activedescendant", activeEl.id) : removeAttribute(el, "aria-activedescendant");
-    });
-  }
-  function handlePopoverClosing2(root, mode, observable, selectable, popoverable) {
-    if (mode === SelectableModes.MULTIPLE) return;
-    observable.subscribe(ObservableTrigger.SELECTION, () => {
-      if (selectable.hasSelection()) {
-        popoverable.setState(false);
-      }
-    });
-  }
-  function initializeEventListeners(el, selectable) {
-    let blocked = false;
-    let readonly = el.hasAttribute("readonly");
-    on(el, "click", (e) => {
-      if (blocked || readonly) return;
-      let option = e.target.closest("[data-time]");
-      if (!option) return;
-      let time = option.getAttribute("data-time");
-      setTimeout(() => {
-        validateTimeString(time) && selectable.select(time);
-      });
-    });
-    return {
-      enable: () => {
-      },
-      disable: () => {
-      }
-    };
-  }
-  function validateTimeString(time) {
-    return new RegExp(`^${timeRegex()}$`).test(time);
-  }
-  function validateTimeRangeString(time) {
-    return new RegExp(`^${timeRegex()}-${timeRegex()}$`).test(time);
-  }
-  function timeRegex() {
-    return "([01]?[0-9]|2[0-3]):[0-5][0-9]";
-  }
-  function timesAreOverlapping(first, second) {
-    let [firstStart, firstEnd] = first.split("-").map((t) => {
-      let [hours, minutes] = t.split(":").map(Number);
-      return hours * 60 + minutes;
-    });
-    let [secondStart, secondEnd] = second.split("-").map((t) => {
-      let [hours, minutes] = t.split(":").map(Number);
-      return hours * 60 + minutes;
-    });
-    if (isNaN(firstEnd)) firstEnd = firstStart;
-    if (isNaN(secondEnd)) secondEnd = secondStart;
-    return !(firstEnd < secondStart || firstStart > secondEnd);
-  }
-  function formatTime(time, timeFormat, locale) {
-    let [hours, minutes] = time.split(":").map(Number);
-    let hour12Map = {
-      "12-hour": true,
-      "24-hour": false,
-      "auto": void 0
-    };
-    let formatter = new Intl.DateTimeFormat(locale, {
-      hour: "numeric",
-      minute: "numeric",
-      hour12: hour12Map[timeFormat]
-    });
-    return formatter.format(new Date(2024, 0, 1, hours, minutes));
-  }
-  function timeInMinutes(time) {
-    if (!time) return null;
-    let [hours, minutes] = time.split(":");
-    if (isNaN(hours) || isNaN(minutes)) return null;
-    return parseInt(hours) * 60 + parseInt(minutes);
-  }
-  function controlActivationWithPopover2(popoverable, activatable, selectable, openTo = null) {
-    popoverable.onChange(() => {
-      if (popoverable.getState()) {
-        let selectedValues = selectable.getValue();
-        if (!Array.isArray(selectedValues)) {
-          selectedValues = selectedValues === null ? [] : [selectedValues];
-        }
-        let selectables = activatable.filterAwareWalker();
-        let firstSelectedOption = selectables.find((el) => selectedValues.includes(el.getAttribute("data-time")));
-        let firstOptionToActivate = null;
-        if (!firstSelectedOption && openTo) {
-          firstOptionToActivate = findCloestOptionToOpenTo(activatable, openTo);
-        }
-        setTimeout(() => {
-          let optionToScrollTo = firstSelectedOption || firstOptionToActivate;
-          activatable.activateSelectedOrFirst(optionToScrollTo);
-          optionToScrollTo?.scrollIntoView({ block: "nearest" });
-        });
-      } else {
-        activatable.clearActive();
-      }
-    });
-  }
-  function findCloestOptionToOpenTo(activatable, openTo) {
-    let openToInMinutes = timeInMinutes(openTo);
-    let closestOption = null;
-    let closestOptionTimeInMinutes = null;
-    activatable.filterAwareWalker().walk((option, bail) => {
-      let optionTime = option.getAttribute("data-time");
-      let optionTimeInMinutes = timeInMinutes(optionTime);
-      if (optionTimeInMinutes > openToInMinutes) return;
-      if (Math.abs(optionTimeInMinutes - openToInMinutes) < Math.abs(closestOptionTimeInMinutes - openToInMinutes)) {
-        closestOption = option;
-        closestOptionTimeInMinutes = optionTimeInMinutes;
-      }
-    });
-    return closestOption;
-  }
-  function generateTimes({ interval = 30, timeFormat = "auto", locale = navigator.language, min: min2, max: max2 } = {}) {
-    let times = [];
-    let minInMinutes = 0;
-    let maxInMinutes = 24 * 60 - 1;
-    if (min2) {
-      let minDate = new Date(2024, 0, 1);
-      let [minHours, minMinutes] = min2.split(":");
-      minDate.setHours(minHours, minMinutes);
-      minInMinutes = minDate.getHours() * 60 + minDate.getMinutes();
-    }
-    if (max2) {
-      let maxDate = new Date(2024, 0, 1, 23, 59, 59);
-      let [maxHours, maxMinutes] = max2.split(":");
-      maxDate.setHours(maxHours, maxMinutes);
-      maxInMinutes = maxDate.getHours() * 60 + maxDate.getMinutes();
-    }
-    for (let minutes = minInMinutes; minutes <= maxInMinutes; minutes += interval) {
-      let hours = Math.floor(minutes / 60);
-      let mins = minutes % 60;
-      let value3 = `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
-      let label = formatTime(value3, timeFormat, locale);
-      times.push({ value: value3, label });
-    }
-    return times;
-  }
-
-  // js/mixins/disclosable.js
-  var Disclosable = class extends Mixin {
-    boot({ options }) {
-      this.onChanges = [];
-      this.state = false;
-    }
-    onChange(callback) {
-      this.onChanges.push(callback);
-    }
-    getState() {
-      return this.state;
-    }
-    setState(value3) {
-      let oldState = this.state;
-      this.state = !!value3;
-      if (this.state !== oldState) {
-        this.onChanges.forEach((i) => i());
-      }
-    }
-  };
-
-  // js/disclosure.js
-  var UIDisclosure = class extends UIElement {
-    boot() {
-      let button = this.button();
-      let details = this.details();
-      if (!button) {
-        return console.warn("ui-disclosure: no trigger element found", this);
-      } else if (!details) {
-        return console.warn("ui-disclosure: no panel element found", this);
-      }
-      this._disabled = this.hasAttribute("disabled");
-      this._controllable = new Controllable(this, { disabled: this._disabled });
-      details._disclosable = new Disclosable(details);
-      this._controllable.initial((initial) => initial && details._disclosable.setState(true));
-      this._controllable.getter(() => details._disclosable.getState());
-      this._controllable.setter((value3) => details._disclosable.setState(value3));
-      details._disclosable.onChange(() => {
-        this.dispatchEvent(new CustomEvent("lofi-disclosable-change", { bubbles: true }));
-        this._controllable.dispatch();
-      });
-      let refresh = () => {
-        if (details._disclosable.getState()) {
-          setAttribute2(this, "data-open", "");
-          setAttribute2(button, "data-open", "");
-          setAttribute2(details, "data-open", "");
-        } else {
-          removeAttribute(this, "data-open");
-          removeAttribute(button, "data-open");
-          removeAttribute(details, "data-open");
-        }
-      };
-      details._disclosable.onChange(() => refresh());
-      refresh();
-      if (!this._disabled) {
-        on(button, "click", (e) => {
-          details._disclosable.setState(!details._disclosable.getState());
-        });
-      }
-      let id = assignId(details, "disclosure");
-      setAttribute2(button, "aria-controls", id);
-      setAttribute2(button, "aria-expanded", "false");
-      details._disclosable.onChange(() => {
-        details._disclosable.getState() ? setAttribute2(button, "aria-expanded", "true") : setAttribute2(button, "aria-expanded", "false");
-      });
-      if (this.hasAttribute("open")) {
-        details._disclosable.setState(true);
-      }
-    }
-    button() {
-      return this.querySelector("button,ui-button");
-    }
-    details() {
-      return this.lastElementChild;
-    }
-  };
-  var UIDisclosureGroup = class _UIDisclosureGroup extends UIElement {
-    boot() {
-      this.exclusive = this.hasAttribute("exclusive");
-      if (this.exclusive) {
-        on(this, "lofi-disclosable-change", (e) => {
-          e.stopPropagation();
-          if (e.target.localName === "ui-disclosure" && e.target.value) {
-            this.disclosureWalker().each((el) => {
-              if (el === e.target) return;
-              el.value = false;
-            });
-          }
-        });
-      }
-    }
-    disclosureWalker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof _UIDisclosureGroup && el !== this) return reject();
-        if (el.localName !== "ui-disclosure") return reject();
-      });
-    }
-  };
-  inject(({ css }) => css`ui-disclosure { display: block; }`);
-  element("disclosure", UIDisclosure);
-  element("disclosure-group", UIDisclosureGroup);
-
-  // js/resizable.js
-  var UIResizable = class extends UIElement {
-    boot() {
-    }
-  };
-  var UIGrip = class extends UIElement {
-    boot() {
-      let dimension = this.hasAttribute("resize") ? this.getAttribute("resize") : "both";
-      let shrink = this.hasAttribute("shrink");
-      let container = this.closest("ui-resizable");
-      let maxWidth, maxHeight;
-      let hasAttemptedAResizeYet = false;
-      if (!container) throw "Resizable container not found";
-      this.addEventListener("pointerdown", (e) => {
-        if (!hasAttemptedAResizeYet) {
-          maxWidth = container.offsetWidth;
-          maxHeight = container.offsetHeight;
-          hasAttemptedAResizeYet = true;
-        }
-        let startX = e.clientX;
-        let startY = e.clientY;
-        let startWidth = parseInt(getComputedStyle(container).width, 10);
-        let startHeight = parseInt(getComputedStyle(container).height, 10);
-        let resize = (e2) => {
-          let width = startWidth + (e2.clientX - startX);
-          let height = startHeight + (e2.clientY - startY);
-          if (dimension === "width" || dimension === "both") {
-            if (shrink) {
-              container.style.width = `${Math.min(width, maxWidth)}px`;
-            } else {
-              container.style.width = `${width}px`;
-            }
-          }
-          if (dimension === "height" || dimension === "both") {
-            if (shrink) {
-              container.style.height = `${Math.min(height, maxHeight)}px`;
-            } else {
-              container.style.height = `${height}px`;
-            }
-          }
-        };
-        document.addEventListener("pointermove", resize);
-        document.addEventListener("pointerup", () => {
-          this.releasePointerCapture(e.pointerId);
-          document.removeEventListener("pointermove", resize);
-        }, { once: true });
-        this.setPointerCapture(e.pointerId);
-      });
-    }
-  };
-  inject(({ css }) => css`ui-resizable { display: block; }`);
-  element("resizable", UIResizable);
-  element("grip", UIGrip);
-
-  // js/checkbox.js
-  var UICheckboxGroup = class _UICheckboxGroup extends UIControl {
-    boot() {
-      this._disableable = new Disableable(this);
-      let undoDisableds = [];
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          this.walker().each((el) => {
-            if (!el.hasAttribute("disabled")) {
-              el.setAttribute("disabled", "");
-              undoDisableds.push(() => el.removeAttribute("disabled"));
-            }
-          });
-        } else {
-          undoDisableds.forEach((fn) => fn());
-          undoDisableds = [];
-        }
-      });
-      this._selectable = new SelectableGroup(this, { multiple: true });
-      this._controllable = new Controllable(this, { disabled: this._disabled, bubbles: true });
-      this.walker().each((el) => {
-        el.addEventListener("input", (e) => e.stopPropagation());
-        el.addEventListener("change", (e) => e.stopPropagation());
-      });
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.getAttribute("value"),
-        includeWhenEmpty: false
-      });
-      this._controllable.initial((initial) => initial && this._selectable.setState(initial));
-      this._controllable.getter(() => this._selectable.getState());
-      this._detangled = detangle();
-      this._controllable.setter(this._detangled((value3) => {
-        this._selectable.setState(value3);
-      }));
-      this._selectable.onChange(this._detangled(() => {
-        this._controllable.dispatch();
-      }));
-      this._selectable.onInitAndChange(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-      setAttribute2(this, "role", "group");
-      queueMicrotask(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-    }
-    initCheckAll(checkAll) {
-      let detangled = detangle();
-      checkAll._selectable.onChange(detangled(() => {
-        if (checkAll.indeterminate) {
-          this._selectable.selectAll();
-          checkAll.checked = true;
-          checkAll.indeterminate = false;
-        } else if (checkAll.checked) {
-          this._selectable.selectAll();
-          checkAll.checked = true;
-          checkAll.indeterminate = false;
-        } else {
-          this._selectable.deselectAll();
-          checkAll.checked = false;
-          checkAll.indeterminate = false;
-        }
-      }));
-      let setCheckAllIndeterminate = () => {
-        if (this._selectable.allAreSelected()) {
-          checkAll.indeterminate = false;
-          checkAll._selectable.select();
-        } else if (this._selectable.noneAreSelected()) {
-          checkAll.indeterminate = false;
-          checkAll._selectable.deselect();
-        } else {
-          checkAll.indeterminate = true;
-        }
-      };
-      this._selectable.onChange(detangled(() => {
-        setCheckAllIndeterminate();
-      }));
-      setCheckAllIndeterminate();
-    }
-    walker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof _UICheckboxGroup) return reject();
-        if (!(el.localName === "ui-checkbox")) return skip();
-      });
-    }
-  };
-  var UICheckbox = class extends UIControl {
-    boot() {
-      let button = this;
-      this.isIndeterminate = false;
-      this._disableable = new Disableable(this);
-      if (this.hasAttribute("all")) {
-        this._selectable = new Selectable(button, {
-          ungrouped: true,
-          toggleable: true,
-          value: this.hasAttribute("value") ? this.getAttribute("value") : Math.random().toString(36).substring(2, 10),
-          label: this.hasAttribute("label") ? this.getAttribute("label") : null,
-          selectedInitially: this.hasAttribute("checked"),
-          dataAttr: "data-checked",
-          ariaAttr: "aria-checked"
-        });
-        queueMicrotask(() => {
-          this.closest("ui-checkbox-group")?.initCheckAll(this);
-        });
-      } else {
-        this._selectable = new Selectable(button, {
-          toggleable: true,
-          dataAttr: "data-checked",
-          ariaAttr: "aria-checked",
-          value: this.hasAttribute("value") ? this.getAttribute("value") : Math.random().toString(36).substring(2, 10),
-          label: this.hasAttribute("label") ? this.getAttribute("label") : null,
-          selectedInitially: this.hasAttribute("checked")
-        });
-        this._submittable = new Submittable(this, {
-          name: this.getAttribute("name"),
-          value: this.getAttribute("value") ?? "on",
-          // Default value for checkboxes...
-          includeWhenEmpty: false,
-          shouldUpdateValue: false
-        });
-        this._selectable.onChange(() => {
-          if (this.indeterminate) this.indeterminate = false;
-        });
-        this._selectable.onInitAndChange(() => {
-          this._submittable.update(this._selectable.isSelected());
-        });
-        this.value = this._selectable.getValue();
-        queueMicrotask(() => {
-          this._submittable.update(this._selectable.isSelected());
-        });
-      }
-      this._detangled = detangle();
-      this._selectable.onChange(this._detangled(() => {
-        this.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
-        this.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));
-      }));
-      setAttribute2(button, "role", "checkbox");
-      this._disableable.onInitAndChange((disabled) => {
-        disabled ? removeAttribute(button, "tabindex", "0") : setAttribute2(button, "tabindex", "0");
-      });
-      on(button, "click", this._disableable.disabled((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }), { capture: true });
-      on(button, "click", this._disableable.enabled((e) => {
-        this._selectable.press();
-      }));
-      on(button, "keydown", this._disableable.enabled((e) => {
-        if (e.key === "Enter") {
-          this.closest("form")?.requestSubmit();
-        }
-      }));
-      on(button, "keydown", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      on(button, "keyup", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          this._selectable.press();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      respondToLabelClick(button);
-    }
-    get checked() {
-      return this._selectable.isSelected();
-    }
-    set checked(value3) {
-      let groupDetangled = this.closest("ui-checkbox-group")?._detangled || ((i) => i);
-      this._detangled(groupDetangled(() => {
-        value3 ? this._selectable.select() : this._selectable.deselect();
-      }))();
-    }
-    get indeterminate() {
-      return this.isIndeterminate;
-    }
-    set indeterminate(value3) {
-      this.isIndeterminate = !!value3;
-      if (this.isIndeterminate) {
-        setAttribute2(this, "data-indeterminate", "");
-      } else {
-        removeAttribute(this, "data-indeterminate");
-      }
-    }
-  };
-  element("checkbox-group", UICheckboxGroup);
-  element("checkbox", UICheckbox);
-  inject(({ css }) => css`ui-checkbox-group { display: block; }`);
-  inject(({ css }) => css`ui-checkbox { display: inline-block; user-select: none; }`);
-  function respondToLabelClick(el) {
-    el.closest("label")?.addEventListener("click", (e) => {
-      if (!el.contains(e.target)) {
-        el._selectable.press();
-      }
-    });
-  }
-
-  // js/dropdown.js
-  var UIDropdown = class extends UIElement {
-    boot() {
-      let trigger = this.trigger();
-      let overlay = this.overlay();
-      if (!trigger) {
-        return console.warn("ui-dropdown: no trigger element found", this);
-      } else if (!overlay) {
-        return console.warn("ui-dropdown: no [popover] overlay found", this);
-      }
-      this._disabled = this.hasAttribute("disabled");
-      this._controllable = new Controllable(this);
-      overlay._popoverable = new Popoverable(overlay);
-      overlay._anchorable = new Anchorable(overlay, {
-        reference: trigger,
-        position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-        gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-        offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-      });
-      overlay._popoverable.onChange(() => {
-        overlay._popoverable.getState() ? overlay._anchorable.reposition() : overlay._anchorable.cleanup();
-      });
-      if (!this.hasAttribute("hover")) {
-        let { lock, unlock } = lockScroll(overlay._popoverable.el);
-        overlay._popoverable.onChange(() => {
-          overlay._popoverable.getState() ? lock() : unlock();
-        });
-      }
-      this._controllable.initial((initial) => overlay._popoverable.setState(initial));
-      this._controllable.getter(() => overlay._popoverable.getState());
-      let detangled = detangle();
-      this._controllable.setter((value3) => overlay._popoverable.setState(value3));
-      overlay._popoverable.onChange(detangled(() => this._controllable.dispatch()));
-      if (this.hasAttribute("hover")) {
-        let off = () => {
-        };
-        interest(trigger, overlay, {
-          gain() {
-            overlay._popoverable.setState(true);
-            let listener = on(document, "scroll", () => {
-              if (overlay._popoverable.getState()) {
-                overlay._popoverable.setState(false);
-                off();
-              }
-            });
-            off = listener.off;
-          },
-          lose() {
-            overlay._popoverable.setState(false);
-            off();
-          },
-          focusable: false
-        });
-      }
-      on(trigger, "click", () => overlay._popoverable.toggle());
-      if (overlay._popoverable.getState()) {
-        setAttribute2(this, "data-open", "");
-        setAttribute2(trigger, "data-open", "");
-        setAttribute2(overlay, "data-open", "");
-      } else {
-        removeAttribute(this, "data-open");
-        removeAttribute(trigger, "data-open");
-        removeAttribute(overlay, "data-open");
-      }
-      overlay._popoverable.onChange(() => {
-        if (overlay._popoverable.getState()) {
-          setAttribute2(this, "data-open", "");
-          setAttribute2(trigger, "data-open", "");
-          setAttribute2(overlay, "data-open", "");
-        } else {
-          removeAttribute(this, "data-open");
-          removeAttribute(trigger, "data-open");
-          removeAttribute(overlay, "data-open");
-        }
-      });
-      let id = assignId(overlay, "dropdown");
-      setAttribute2(trigger, "aria-haspopup", "true");
-      setAttribute2(trigger, "aria-controls", id);
-      setAttribute2(trigger, "aria-expanded", overlay._popoverable.getState() ? "true" : "false");
-      overlay._popoverable.onChange(() => {
-        setAttribute2(trigger, "aria-expanded", overlay._popoverable.getState() ? "true" : "false");
-      });
-      overlay._popoverable.onChange(() => {
-        setTimeout(
-          () => overlay._popoverable.getState() ? overlay.onPopoverShow?.() : overlay.onPopoverHide?.()
-        );
-      });
-    }
-    unmount() {
-      if (this.overlay()?._popoverable?.getState() && !this.hasAttribute("hover")) {
-        let { unlock } = lockScroll();
-        unlock();
-      }
-    }
-    trigger() {
-      return this.querySelector("button,ui-button,a");
-    }
-    overlay() {
-      return this.lastElementChild?.matches("[popover]") && this.lastElementChild;
-    }
-  };
-  element("dropdown", UIDropdown);
-
-  // js/file-upload.js
-  var UIFileUpload = class extends UIElement {
-    boot() {
-      this.type = "file";
-    }
-    mount() {
-      this._disableable = new Disableable(this);
-      this._files = [];
-      this.inputEl = this.querySelector('input[data-slot="receiver"]');
-      if (this.inputEl) {
-        this.forwardAcceptAttribute();
-        this.configureSRInput();
-      }
-      this.triggerEl = this.findTriggerElement();
-      this.rootEl = this.closest("ui-file-upload");
-      let hasMultiple = this.hasAttribute("multiple") || this.rootEl && this.rootEl.hasAttribute("multiple");
-      if (hasMultiple) {
-        setAttribute2(this.inputEl, "multiple", "");
-      }
-      Object.defineProperty(this, "multiple", {
-        get() {
-          return hasMultiple;
-        }
-      });
-      Object.defineProperty(this, "files", {
-        get() {
-          return this._files;
-        },
-        set(newValue) {
-          if (newValue === null || newValue === "") {
-            this._files = [];
-          } else if (Array.isArray(newValue)) {
-            this._files = newValue;
-          } else if (newValue instanceof FileList) {
-            this._files = Array.from(newValue);
-          } else {
-            this._files = [newValue];
-          }
-          this.dispatchEvent(new Event("change", { bubbles: true }));
-        }
-      });
-      this.observer = new MutationObserver(() => {
-        this.ensureInputsExist();
-      });
-      this.observer.observe(this, { childList: true });
-      this.style.setProperty("--flux-file-upload-progress", "0%");
-      this.style.setProperty("--flux-file-upload-progress-as-string", "'0%'");
-      on(this, "livewire-upload-start", () => {
-        setAttribute2(this, "data-loading", "");
-        this.disabled = true;
-        this.style.setProperty("--flux-file-upload-progress", "0");
-        this.style.setProperty("--flux-file-upload-progress-as-string", "'0%'");
-      });
-      on(this, "livewire-upload-finish", () => {
-        removeAttribute(this, "data-loading");
-        this.disabled = false;
-        this.style.setProperty("--flux-file-upload-progress", "100%");
-        this.style.setProperty("--flux-file-upload-progress-as-string", "'100%'");
-      });
-      on(this, "livewire-upload-cancel", () => {
-        removeAttribute(this, "data-loading");
-        this.disabled = false;
-        this.style.setProperty("--flux-file-upload-progress", "0%");
-        this.style.setProperty("--flux-file-upload-progress-as-string", "'0%'");
-      });
-      on(this, "livewire-upload-error", () => {
-        removeAttribute(this, "data-loading");
-        this.disabled = false;
-        this.style.setProperty("--flux-file-upload-progress", "0%");
-        this.style.setProperty("--flux-file-upload-progress-as-string", "'0%'");
-      });
-      on(this, "livewire-upload-progress", (e) => {
-        let percentage = e.detail.progress;
-        this.style.setProperty("--flux-file-upload-progress", `${percentage}%`);
-        this.style.setProperty("--flux-file-upload-progress-as-string", `'${percentage}%'`);
-      });
-      this._disableable.onInitAndChange((disabled) => {
-        this.inputEl.disabled = disabled;
-        if (this.triggerEl) {
-          if (disabled) {
-            removeAttribute(this.triggerEl, "tabindex");
-          } else {
-            setAttribute2(this.triggerEl, "tabindex", "0");
-          }
-        }
-      });
-      on(this.inputEl, "click", (e) => {
-        e.stopPropagation();
-        this.clear();
-      });
-      this.initDragListeners();
-      this.initClickListeners();
-    }
-    addFiles(newFiles) {
-      let files = Array.from(newFiles);
-      let hasMultiple = this.multiple;
-      if (hasMultiple) {
-        this._files = [...this._files, ...files];
-      } else {
-        this._files = files.slice(0, 1);
-      }
-      this.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-    removeFile(index) {
-      this._files = this._files.filter((_, i) => i !== index);
-      this.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-    clear() {
-      this.inputEl.value = null;
-      this._files = [];
-    }
-    forwardAcceptAttribute() {
-      if (this.hasAttribute("accept")) {
-        this.inputEl.setAttribute("accept", this.getAttribute("accept"));
-      }
-    }
-    configureSRInput() {
-      this.inputEl.tabIndex = -1;
-      Object.assign(this.inputEl.style, {
-        position: "absolute",
-        width: "1px",
-        height: "1px",
-        padding: "0",
-        margin: "-1px",
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        border: "0"
-      });
-    }
-    findTriggerElement() {
-      let children = Array.from(this.children);
-      return children.find((child) => !child.hasAttribute("data-slot"));
-    }
-    ensureInputsExist() {
-      if (!this.inputEl || !this.querySelector('input[data-slot="receiver"]')) {
-        this.inputEl = this.querySelector('input[data-slot="receiver"]');
-        if (this.inputEl) {
-          this.configureSRInput();
-          let hasMultiple = this.hasAttribute("multiple") || this.rootEl && this.rootEl.hasAttribute("multiple");
-          if (hasMultiple) {
-            setAttribute2(this.inputEl, "multiple", "");
-          }
-          this.inputEl.disabled = this.disabled;
-        }
-      }
-      if (!this.triggerEl || !this.contains(this.triggerEl)) {
-        this.triggerEl = this.findTriggerElement();
-        if (this.triggerEl && !this.disabled) {
-          setAttribute2(this.triggerEl, "tabindex", "0");
-        } else if (this.triggerEl && this.disabled) {
-          removeAttribute(this.triggerEl, "tabindex");
-        }
-      }
-    }
-    initDragListeners() {
-      if (!this.triggerEl) return;
-      on(this.triggerEl, "dragenter", this._disableable.enabled((e) => {
-        e.preventDefault();
-        setAttribute2(this, "data-dragging", "");
-        this.clear();
-      }));
-      on(this.triggerEl, "dragover", this._disableable.enabled((e) => {
-        e.preventDefault();
-        setAttribute2(this, "data-dragging", "");
-      }));
-      on(this.triggerEl, "drop", this._disableable.enabled((e) => {
-        e.preventDefault();
-        removeAttribute(this, "data-dragging");
-        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-          this.addFiles(e.dataTransfer.files);
-        }
-      }));
-      on(this.triggerEl, "dragleave", (e) => {
-        removeAttribute(this, "data-dragging");
-      });
-    }
-    initClickListeners() {
-      if (!this.triggerEl) return;
-      on(this.triggerEl, "click", this._disableable.disabled((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }), { capture: true });
-      on(this.triggerEl, "click", this._disableable.enabled((e) => {
-        e.preventDefault();
-        this.inputEl.click();
-      }));
-      on(this.inputEl, "change", (e) => {
-        e.stopPropagation();
-        if (this.inputEl.files && this.inputEl.files.length > 0 && !this.disabled) {
-          this.addFiles(this.inputEl.files);
-        }
-      });
-      on(this.triggerEl, "keydown", this._disableable.enabled((e) => {
-        if (["Enter", " "].includes(e.key)) {
-          e.preventDefault();
-        }
-        if (["Enter"].includes(e.key)) {
-          this.inputEl.click();
-        }
-      }));
-      on(this.triggerEl, "keyup", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          e.preventDefault();
-          this.inputEl.click();
-        }
-      }));
-      on(this.triggerEl, "focus", this._disableable.enabled(() => {
-        setAttribute2(this, "data-focus", "");
-      }));
-      on(this.triggerEl, "blur", () => {
-        removeAttribute(this, "data-focus");
-      });
-    }
-  };
-  element("file-upload", UIFileUpload);
-
-  // js/calendar/observable.js
-  var ObservableTrigger2 = class {
-    static SELECTION = 1;
-    static ACTIVATION = 2;
-    static VIEW_CHANGE = 3;
-  };
-  var Observable2 = class {
-    constructor() {
-      this.subscribers = [];
-      this.subscriberTypes = /* @__PURE__ */ new WeakMap();
-    }
-    subscribe(type, callback) {
-      let types = Array.isArray(type) ? type : [type];
-      this.subscribers.push(callback);
-      if (!this.subscriberTypes.has(callback)) this.subscriberTypes.set(callback, []);
-      this.subscriberTypes.get(callback).push(...types);
-    }
-    notify(type) {
-      let types = Array.isArray(type) ? type : [type];
-      this.subscribers.forEach((callback) => {
-        if (types.length && !this.subscriberTypes.get(callback)?.some((t) => types.includes(t))) return;
-        callback();
-      });
-    }
-  };
-
-  // js/calendar/selectable.js
-  var CalendarModes = class {
-    static SINGLE = "single";
-    static MULTIPLE = "multiple";
-    static RANGE = "range";
-  };
-  var Selectable3 = class _Selectable {
-    constructor(selection, config, observable) {
-      this.config = config;
-      this.observable = observable;
-      this.selection = selection;
-      this.active = null;
-      this.displayResolver = (i) => i;
-    }
-    setDisplayResolver(resolver) {
-      this.displayResolver = resolver;
-    }
-    select(date) {
-      let previousSelection = this.selection;
-      this.selection = this.selection.select(date, this.config);
-      if (this.selection.shouldNotify(previousSelection)) this.observable.notify(ObservableTrigger2.SELECTION);
-      else this.observable.notify(ObservableTrigger2.ACTIVATION);
-    }
-    activate(date) {
-      let memo = this.active;
-      if (!date) {
-        this.active = null;
-      } else {
-        this.active = date;
-      }
-      this.selection.activate(date);
-      if (memo !== this.active) this.observable.notify(ObservableTrigger2.ACTIVATION);
-    }
-    setValue(value3) {
-      let previousSelection = this.selection;
-      this.selection = this.createSelectionFromValue(value3, this.config);
-      if (this.selection.shouldNotify(previousSelection)) this.observable.notify(ObservableTrigger2.SELECTION);
-      else this.observable.notify(ObservableTrigger2.ACTIVATION);
-    }
-    getValue() {
-      return this.selection.value();
-    }
-    isSelectable(date) {
-      return this.selection.selectable(date, this.config);
-    }
-    /** Passthrough methods */
-    contains(...params) {
-      return this.selection.contains(...params);
-    }
-    hasSelection() {
-      return this.selection.hasSelection();
-    }
-    lowerBound(...params) {
-      return this.selection.lowerBound(...params);
-    }
-    upperBound(...params) {
-      return this.selection.upperBound(...params);
-    }
-    display(...params) {
-      return this.displayResolver(this.selection.display(...params));
-    }
-    attributes(...params) {
-      return this.selection.attributes(...params);
-    }
-    createSelectionFromValue(value3, config) {
-      if (config.mode === CalendarModes.MULTIPLE) {
-        let dates = value3 ? value3.map((i) => DateValue.fromIsoDateString(i)) : [];
-        return new MultipleSelection2(dates);
-      } else if (config.mode === CalendarModes.RANGE) {
-        let { start, end, preset } = value3 || {};
-        if (preset && presets[preset] && preset !== "custom") return new PresetRangeSelection(preset, config);
-        if (!start && !end) return new EmptyRangeSelection();
-        if (!end) return new PartialRangeSelection(DateValue.fromIsoDateString(start));
-        return new RangeSelection(DateValue.fromIsoDateString(start), DateValue.fromIsoDateString(end));
-      } else {
-        if (!value3) return new NoneSelection2();
-        return new SingleSelection2(DateValue.fromIsoDateString(value3));
-      }
-    }
-    static createFromValueStringAttribute(value3, config, observable) {
-      let selection = _Selectable.createSelectionFromValueStringAttribute(value3, config);
-      return new _Selectable(selection, config, observable);
-    }
-    static createSelectionFromValueStringAttribute(value3, config) {
-      if (config.mode === CalendarModes.MULTIPLE) {
-        let dates = value3 ? value3.split(",").map((i) => i.trim()).map((i) => DateValue.fromIsoDateString(i)) : [];
-        return new MultipleSelection2(dates);
-      } else if (config.mode === CalendarModes.RANGE) {
-        if (!value3) return new EmptyRangeSelection();
-        let [start, end] = value3.split("/").map((i) => i.trim());
-        if (!end && start && presets[start] && start !== "custom") {
-          return new PresetRangeSelection(start, config);
-        }
-        start = DateValue.fromIsoDateString(start);
-        if (!end) {
-          return new PartialRangeSelection(start);
-        }
-        end = DateValue.fromIsoDateString(end);
-        return new RangeSelection(start, end);
-      } else {
-        if (!value3) return new NoneSelection2();
-        return new SingleSelection2(DateValue.fromIsoDateString(value3));
-      }
-    }
-  };
-  var DeferredSelectable = class {
-    constructor(selectable, observable) {
-      this.selectable = selectable;
-      this.observable = observable;
-      this._selection = this.selectable.selection;
-      this.selectable.observable.subscribe(ObservableTrigger2.SELECTION, () => {
-        this._blockSync() || this.sync();
-      });
-      this._blockSync = () => {
-      };
-    }
-    blockSyncIf(condition) {
-      this._blockSync = condition;
-    }
-    sync() {
-      this._selection = this.selectable.selection;
-      this.observable.notify(ObservableTrigger2.SELECTION);
-    }
-    setValue(value3) {
-      return this.selectable.setValue(value3);
-    }
-    getValue() {
-      return this._selection.value();
-    }
-    isSelectable(date) {
-      return this._selection.selectable(date, this.config);
-    }
-    hasSelection() {
-      return this._selection.hasSelection();
-    }
-    display(...params) {
-      return this.selectable.displayResolver(this._selection.display(...params));
-    }
-  };
-  var Selection2 = class {
-    contains() {
-    }
-    shouldNotify(previousSelection) {
-      return true;
-    }
-    hasSelection() {
-      return false;
-    }
-    lowerBound(fallback) {
-      return value2(fallback);
-    }
-    upperBound(fallback) {
-      return this.lowerBound(fallback);
-    }
-    selectable(date, config) {
-      return true;
-    }
-    display() {
-    }
-    value() {
-    }
-    activate() {
-    }
-    attributes(el, date) {
-      if (this.contains(date)) {
-        setAttribute2(el, "data-selected", "");
-        setAttribute2(el, "aria-selected", "true");
-      } else {
-        removeAttribute(el, "data-selected");
-        setAttribute2(el, "aria-selected", "false");
-      }
-    }
-  };
-  var NoneSelection2 = class _NoneSelection extends Selection2 {
-    shouldNotify(selection) {
-      return !(selection instanceof _NoneSelection);
-    }
-    hasSelection() {
-      return false;
-    }
-    contains() {
-      return false;
-    }
-    select(date) {
-      return new SingleSelection2(date);
-    }
-    lowerBound(fallback) {
-      return value2(fallback);
-    }
-    display(locale) {
-      return "";
-    }
-    value() {
-      return null;
-    }
-  };
-  var SingleSelection2 = class _SingleSelection extends Selection2 {
-    constructor(date) {
-      super();
-      this._date = date;
-    }
-    hasSelection() {
-      return true;
-    }
-    shouldNotify(previousSelection) {
-      if (previousSelection instanceof _SingleSelection && this._date.isSameDay(previousSelection._date)) return false;
-      return true;
-    }
-    select(date) {
-      if (this._date.isSameDay(date)) return new NoneSelection2();
-      return new _SingleSelection(date);
-    }
-    contains(date) {
-      return this._date.isSameDay(date);
-    }
-    lowerBound() {
-      return this._date;
-    }
-    display(locale) {
-      return this._date.toFormattedString(locale, { day: "numeric", month: "short", year: "numeric" });
-    }
-    value() {
-      return this._date.toIsoDateString();
-    }
-  };
-  var MultipleSelection2 = class _MultipleSelection extends Selection2 {
-    constructor(dates) {
-      super();
-      this._dates = dates;
-    }
-    hasSelection() {
-      return this._dates.length > 0;
-    }
-    shouldNotify(previousSelection) {
-      if (previousSelection instanceof _MultipleSelection && this._dates.every((i) => previousSelection._dates.includes(i)) && previousSelection._dates.every((i) => this._dates.includes(i))) return false;
-      return true;
-    }
-    select(date) {
-      let containsDate = this._dates.some((i) => i.isSameDay(date));
-      if (containsDate) return new _MultipleSelection(this._dates.filter((i) => !i.isSameDay(date)));
-      return new _MultipleSelection([...this._dates, date]);
-    }
-    contains(date) {
-      return this._dates.some((i) => i.isSameDay(date));
-    }
-    lowerBound(fallback) {
-      let sortedDates = this._dates.sort((a, b) => a.isBefore(b) ? -1 : 1);
-      return sortedDates[0] || value2(fallback);
-    }
-    upperBound(fallback) {
-      let sortedDates = this._dates.sort((a, b) => a.isBefore(b) ? -1 : 1);
-      return sortedDates[sortedDates.length - 1] || value2(fallback);
-    }
-    display(locale) {
-      return this._dates.map((i) => i.toFormattedString(locale, { day: "numeric", month: "short", year: "numeric" })).join(", ");
-    }
-    value() {
-      return this._dates.map((i) => i.toIsoDateString());
-    }
-  };
-  var EmptyRangeSelection = class _EmptyRangeSelection extends Selection2 {
-    constructor() {
-      super();
-    }
-    hasSelection() {
-      return false;
-    }
-    shouldNotify(previousSelection) {
-      return !(previousSelection instanceof _EmptyRangeSelection || previousSelection instanceof PartialRangeSelection);
-    }
-    select(date) {
-      return new PartialRangeSelection(date);
-    }
-    contains() {
-      return false;
-    }
-    lowerBound(fallback) {
-      return value2(fallback);
-    }
-    display(locale) {
-      return "";
-    }
-    value() {
-      return null;
-    }
-  };
-  var PartialRangeSelection = class _PartialRangeSelection extends Selection2 {
-    constructor(start) {
-      super();
-      this._start = start;
-      this._endPreview = null;
-    }
-    hasSelection() {
-      return false;
-    }
-    shouldNotify(previousSelection) {
-      return false;
-    }
-    select(date, config) {
-      if (date.isBefore(this._start)) return new _PartialRangeSelection(date);
-      if (date.isSameDay(this._start) && config.minRange > 1) {
-        return new EmptyRangeSelection();
-      }
-      return new RangeSelection(this._start, date);
-    }
-    activate(date) {
-      this._endPreview = date;
-    }
-    selectable(date, config) {
-      if (config.maxRange) {
-        if (date.isBefore(this._start)) return false;
-        if (this._start.addDays(config.maxRange - 1).isBefore(date)) return false;
-      }
-      if (config.minRange) {
-        if (this._start.isSameDay(date)) return true;
-        if (date.isBefore(this._start)) return false;
-        if (this._start.addDays(config.minRange - 1).isAfter(date)) return false;
-      }
-      let nextUnavailable = config.unavailable.filter((d) => d.isAfter(this._start)).sort((a, b) => a.toDate() - b.toDate())[0];
-      let prevUnavailable = config.unavailable.filter((d) => d.isBefore(this._start)).sort((a, b) => b.toDate() - a.toDate())[0];
-      if (date.isAfter(this._start)) {
-        return !nextUnavailable || date.isBefore(nextUnavailable);
-      }
-      if (date.isBefore(this._start)) {
-        return !prevUnavailable || date.isAfter(prevUnavailable);
-      }
-      return true;
-    }
-    contains(date) {
-      return date.isSameDay(this._start);
-    }
-    lowerBound() {
-      return this._start;
-    }
-    display(locale) {
-      return new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" }).format(this._start.getDate()) + " -";
-    }
-    value() {
-      return null;
-    }
-    attributes(el, date) {
-      if (this._endPreview && date.isBetween(this._start, this._endPreview)) {
-        setAttribute2(el, "data-in-range", "");
-        setAttribute2(el, "aria-selected", "true");
-      } else {
-        removeAttribute(el, "data-in-range");
-        removeAttribute(el, "aria-selected");
-      }
-      date.isSameDay(this._start) ? setAttribute2(el, "data-selected", "") : removeAttribute(el, "data-selected");
-      date.isSameDay(this._start) ? setAttribute2(el, "aria-selected", "true") : removeAttribute(el, "aria-selected");
-      date.isSameDay(this._start) ? setAttribute2(el, "data-start", "") : removeAttribute(el, "data-start");
-      date.isSameDay(this._endPreview) ? setAttribute2(el, "data-end-preview", "") : removeAttribute(el, "data-end-preview");
-    }
-  };
-  var RangeSelection = class _RangeSelection extends Selection2 {
-    constructor(start, end) {
-      super();
-      this._start = start;
-      this._end = end;
-    }
-    hasSelection() {
-      return true;
-    }
-    shouldNotify(previousSelection) {
-      if (previousSelection instanceof _RangeSelection && this._start.isSameDay(previousSelection._start) && this._end.isSameDay(previousSelection._end)) return false;
-      return true;
-    }
-    select(date) {
-      return new PartialRangeSelection(date);
-    }
-    contains(date) {
-      return date.isBetween(this._start, this._end);
-    }
-    lowerBound() {
-      return this._start;
-    }
-    upperBound() {
-      return this._end;
-    }
-    display(locale) {
-      return new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" }).formatRange(this._start.getDate(), this._end.getDate()).replaceAll("\u2009", " ");
-    }
-    value() {
-      return { start: this._start.toIsoDateString(), end: this._end.toIsoDateString() };
-    }
-    attributes(el, date) {
-      date.isSameDay(this._start) || date.isSameDay(this._end) ? setAttribute2(el, "data-selected", "") : removeAttribute(el, "data-selected");
-      date.isSameDay(this._start) ? setAttribute2(el, "data-start", "") : removeAttribute(el, "data-start");
-      date.isSameDay(this._end) ? setAttribute2(el, "data-end", "") : removeAttribute(el, "data-end");
-      if (this.contains(date)) {
-        setAttribute2(el, "data-in-range", "");
-        setAttribute2(el, "aria-selected", "true");
-      } else {
-        removeAttribute(el, "data-in-range");
-        removeAttribute(el, "aria-selected");
-      }
-    }
-  };
-  var PresetRangeSelection = class _PresetRangeSelection extends Selection2 {
-    constructor(preset, config) {
-      super();
-      this._preset = preset;
-      this._config = config;
-    }
-    get _start() {
-      let [start] = presets[this._preset](this._config);
-      return this._config.min && start.isBefore(this._config.min) ? this._config.min : start;
-    }
-    get _end() {
-      let [, end] = presets[this._preset](this._config);
-      return this._config.max && end.isAfter(this._config.max) ? this._config.max : end;
-    }
-    hasSelection() {
-      return true;
-    }
-    shouldNotify(previousSelection) {
-      return !(previousSelection instanceof _PresetRangeSelection && this._preset === previousSelection._preset);
-    }
-    select(date) {
-      return new PartialRangeSelection(date, this._config);
-    }
-    contains(date) {
-      return date.isBetween(this._start, this._end);
-    }
-    lowerBound() {
-      if (this._preset === "allTime") return DateValue.today();
-      return this._start;
-    }
-    upperBound() {
-      if (this._preset === "allTime") return DateValue.today();
-      return DateValue.today();
-    }
-    display(locale) {
-      return new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" }).formatRange(this._start.getDate(), this._end.getDate()).replaceAll("\u2009", " ");
-    }
-    value() {
-      return { start: this._start.toIsoDateString(), end: this._end.toIsoDateString(), preset: this._preset };
-    }
-    attributes(el, date) {
-      date.isSameDay(this._start) || date.isSameDay(this._end) ? setAttribute2(el, "data-selected", "") : removeAttribute(el, "data-selected");
-      date.isSameDay(this._start) ? setAttribute2(el, "data-start", "") : removeAttribute(el, "data-start");
-      date.isSameDay(this._end) ? setAttribute2(el, "data-end", "") : removeAttribute(el, "data-end");
-      if (this.contains(date)) {
-        setAttribute2(el, "data-in-range", "");
-        setAttribute2(el, "aria-selected", "true");
-      } else {
-        removeAttribute(el, "data-in-range");
-        removeAttribute(el, "aria-selected");
-      }
-    }
-  };
-  function value2(i = null) {
-    return typeof i === "function" ? i() : i;
-  }
-  var presets = {
-    today: () => {
-      return [DateValue.today(), DateValue.today()];
-    },
-    yesterday: () => {
-      let date = DateValue.today().incrementDays(-1);
-      return [date, date];
-    },
-    thisWeek: (config) => {
-      let start = DateValue.today().getCopy().incrementDays(config.startDay - DateValue.today().getDayOfWeek());
-      let end = start.incrementDays(6);
-      return [start, end];
-    },
-    lastWeek: (config) => {
-      let start = DateValue.today().incrementDays(config.startDay - (DateValue.today().getDayOfWeek() + 7));
-      let end = start.incrementDays(6);
-      return [start, end];
-    },
-    last7Days: () => {
-      let end = DateValue.today();
-      let start = DateValue.today().incrementDays(-6);
-      return [start, end];
-    },
-    thisMonth: () => {
-      let start = DateValue.fromParts(DateValue.today().getYear(), DateValue.today().getMonth(), 1);
-      let end = DateValue.fromParts(DateValue.today().getYear(), DateValue.today().getMonth(), DateValue.today().getDaysInMonth());
-      return [start, end];
-    },
-    lastMonth: () => {
-      let month = DateValue.today().getMonth() - 1;
-      let year = DateValue.today().getYear();
-      if (month < 1) {
-        month += 12;
-        year--;
-      }
-      let start = DateValue.fromParts(year, month, 1);
-      let end = DateValue.fromParts(year, month, start.getDaysInMonth());
-      return [start, end];
-    },
-    thisQuarter: () => {
-      let quarter = Math.floor((DateValue.today().getMonth() - 1) / 3);
-      let startMonth = quarter * 3 + 1;
-      let endMonth = startMonth + 2;
-      let start = DateValue.fromParts(DateValue.today().getYear(), startMonth, 1);
-      let endMonthStart = DateValue.fromParts(DateValue.today().getYear(), endMonth, 1);
-      let end = DateValue.fromParts(DateValue.today().getYear(), endMonth, endMonthStart.getDaysInMonth());
-      return [start, end];
-    },
-    lastQuarter: () => {
-      let quarter = Math.floor((DateValue.today().getMonth() - 4) / 3);
-      let startMonth = quarter * 3 + 1;
-      let endMonth = startMonth + 2;
-      let year = DateValue.today().getYear();
-      if (startMonth < 1) {
-        startMonth += 12;
-        endMonth += 12;
-        year--;
-      }
-      let start = DateValue.fromParts(year, startMonth, 1);
-      let endMonthStart = DateValue.fromParts(year, endMonth, 1);
-      let end = DateValue.fromParts(year, endMonth, endMonthStart.getDaysInMonth());
-      return [start, end];
-    },
-    thisYear: () => {
-      let start = DateValue.fromParts(DateValue.today().getYear(), 1, 1);
-      let end = DateValue.fromParts(DateValue.today().getYear(), 12, 31);
-      return [start, end];
-    },
-    lastYear: () => {
-      let year = DateValue.today().getYear() - 1;
-      let start = DateValue.fromParts(year, 1, 1);
-      let end = DateValue.fromParts(year, 12, 31);
-      return [start, end];
-    },
-    last14Days: () => {
-      let end = DateValue.today();
-      let start = DateValue.today().incrementDays(-13);
-      return [start, end];
-    },
-    last30Days: () => {
-      let end = DateValue.today();
-      let start = DateValue.today().incrementDays(-29);
-      return [start, end];
-    },
-    last3Months: () => {
-      let end = DateValue.today();
-      let day = DateValue.today().getDay() + 1;
-      let month = DateValue.today().getMonth() - 3;
-      let year = DateValue.today().getYear();
-      if (month < 1) {
-        month += 12;
-        year--;
-      }
-      let start = DateValue.fromParts(year, month, day);
-      return [start, end];
-    },
-    last6Months: () => {
-      let end = DateValue.today();
-      let day = DateValue.today().getDay() + 1;
-      let month = DateValue.today().getMonth() - 6;
-      let year = DateValue.today().getYear();
-      if (month < 1) {
-        month += 12;
-        year--;
-      }
-      let start = DateValue.fromParts(year, month, day);
-      return [start, end];
-    },
-    yearToDate: () => {
-      let start = DateValue.fromParts(DateValue.today().getYear(), 1, 1);
-      let end = DateValue.today();
-      return [start, end];
-    },
-    allTime: (config) => {
-      if (!config.min) throw new Error("Min date is required for allTime preset");
-      let start = config.min;
-      let end = DateValue.today();
-      return [start, end];
-    }
-  };
-
-  // js/calendar/view.js
-  var CalendarViewState = class {
-    constructor(month, year, config, observable) {
-      this.month = month;
-      this.year = year;
-      this.config = config;
-      this.observable = observable;
-    }
-    generateOffsetState(offset3) {
-      return new CalendarOffsetViewState(this, offset3);
-    }
-    canNavigatePrevious() {
-      let [prevYear, prevMonth] = new DateValue(this.year, this.month).addMonths(-1).toParts();
-      return !(this.config.min && DateValue.fromParts(prevYear, prevMonth).isBefore(DateValue.firstDayOfMonth(this.config.min)));
-    }
-    canNavigateNext() {
-      let [nextYear, nextMonth] = new DateValue(this.year, this.month).addMonths(this.config.months).toParts();
-      return !(this.config.max && DateValue.fromParts(nextYear, nextMonth).isAfter(this.config.max));
-    }
-    nextMonth() {
-      if (!this.canNavigateNext()) return;
-      this.adjustMonth(1);
-    }
-    previousMonth() {
-      this.adjustMonth(-1);
-    }
-    setMonth(month) {
-      if (!month) return;
-      if (this.isWithinMinAndMax(month, this.year)) {
-        this.month = month;
-      }
-      this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-    }
-    setYear(year) {
-      if (!year) return;
-      if (this.isWithinMinAndMax(this.month, year)) {
-        this.year = year;
-      }
-      this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-    }
-    setDate(date) {
-      if (!date) return;
-      if (this.isWithinMinAndMax(date.getMonth(), date.getYear())) {
-        this.month = date.getMonth();
-        this.year = date.getYear();
-      }
-      this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-    }
-    isWithinMinAndMax(month, year) {
-      if (this.config.min && DateValue.fromParts(year, month).isBefore(DateValue.firstDayOfMonth(this.config.min))) return false;
-      if (this.config.max && DateValue.fromParts(year, month).isAfter(this.config.max)) return false;
-      return true;
-    }
-    adjustMonth(delta) {
-      let [nextYear, nextMonth] = new DateValue(this.year, this.month).addMonths(delta).toParts();
-      if (this.config.min && DateValue.fromParts(nextYear, nextMonth).isBefore(DateValue.firstDayOfMonth(this.config.min))) return;
-      if (this.config.max && DateValue.fromParts(nextYear, nextMonth).isAfter(this.config.max)) return;
-      [this.month, this.year] = [nextMonth, nextYear];
-      this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-    }
-  };
-  var CalendarOffsetViewState = class {
-    constructor(viewState, offset3 = 0) {
-      this.offset = offset3;
-      this.viewState = viewState;
-    }
-    get month() {
-      let [, newMonth] = new DateValue(this.viewState.year, this.viewState.month).addMonths(this.offset).toParts();
-      return newMonth;
-    }
-    get year() {
-      let [newYear] = new DateValue(this.viewState.year, this.viewState.month).addMonths(this.offset).toParts();
-      return newYear;
-    }
-  };
-
-  // js/calendar/validator.js
-  var Validator = class {
-    constructor(selectable, metadata, config) {
-      this.min = config.min;
-      this.max = config.max;
-      this.unavailable = config.unavailable;
-      this.selectable = selectable;
-      this.metadata = metadata;
-    }
-    isBetweenMinMax(date) {
-      return date.isBetween(this.min, this.max);
-    }
-    isUnavailable(date) {
-      return this.unavailable.some((i) => i.isSameDay(date)) || this.metadata.unavailable(date);
-    }
-    isBlocked(date) {
-      return !this.selectable.isSelectable(date);
-    }
-    isValid(date) {
-      return this.isBetweenMinMax(date) && !this.isUnavailable(date) && !this.isBlocked(date);
-    }
-  };
-
-  // js/calendar/meta.js
-  var DateMetadata = class {
-    constructor(observable) {
-      this.metadata = {};
-      this.observable = observable;
-    }
-    resetFromJSON(json) {
-      this.reset(JSON.parse(json));
-    }
-    appendFromJSON(json) {
-      this.append(JSON.parse(json));
-    }
-    append(object) {
-      this.metadata = { ...this.metadata, ...object };
-      this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-    }
-    reset(object) {
-      this.metadata = object;
-      this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-    }
-    get(date) {
-      return this.metadata[date.toIsoDateString()];
-    }
-    has(date) {
-      return this.metadata[date.toIsoDateString()] !== void 0;
-    }
-    subtext(date) {
-      return this.metadata[date.toIsoDateString()]?.subtext;
-    }
-    details(date) {
-      return this.metadata[date.toIsoDateString()]?.details;
-    }
-    variant(date) {
-      return this.metadata[date.toIsoDateString()]?.variant;
-    }
-    unavailable(date) {
-      return !!this.metadata[date.toIsoDateString()]?.unavailable;
-    }
-  };
-
-  // js/calendar/index.js
-  var UICalendar = class extends UIElement {
-    boot() {
-      let elDrivingConfig = this.closest("ui-date-picker") || this;
-      this.querySelectorAll("[data-appended]").forEach((el) => el.remove());
-      let [months, onMonthsChange] = responsiveAttributeValue(elDrivingConfig, "months", 1);
-      this.observable = new Observable2();
-      let locale = elDrivingConfig.hasAttribute("locale") ? elDrivingConfig.getAttribute("locale") : getLocale();
-      this.config = {
-        mode: elDrivingConfig.getAttribute("mode") === "range" ? CalendarModes.RANGE : elDrivingConfig.hasAttribute("multiple") ? CalendarModes.MULTIPLE : CalendarModes.SINGLE,
-        months: parseInt(months),
-        min: this.getMinDate(elDrivingConfig),
-        max: this.getMaxDate(elDrivingConfig),
-        maxRange: elDrivingConfig.hasAttribute("max-range") ? parseInt(elDrivingConfig.getAttribute("max-range")) : null,
-        minRange: elDrivingConfig.hasAttribute("min-range") ? parseInt(elDrivingConfig.getAttribute("min-range")) : null,
-        startDay: elDrivingConfig.hasAttribute("start-day") ? parseInt(elDrivingConfig.getAttribute("start-day")) : (new Intl.Locale(locale).weekInfo?.firstDay || 7) % 7,
-        unavailable: this.getUnavailableDates(elDrivingConfig),
-        locale,
-        fixedWeeks: elDrivingConfig.hasAttribute("fixed-weeks") ? 6 : null
-      };
-      onMonthsChange((months2) => {
-        this.config.months = parseInt(months2);
-        this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-      });
-      this.selectable = Selectable3.createFromValueStringAttribute(elDrivingConfig.getAttribute("value"), this.config, this.observable);
-      this.metadata = new DateMetadata(this.observable);
-      this.validator = new Validator(this.selectable, this.metadata, this.config);
-      let openToDate = elDrivingConfig.hasAttribute("open-to") && (elDrivingConfig.hasAttribute("force-open-to") || this.selectable.lowerBound() === null) ? this.getOpenTo(elDrivingConfig) : this.selectable.lowerBound(() => DateValue.today());
-      this.viewState = new CalendarViewState(openToDate.getMonth(), openToDate.getYear(), this.config, this.observable);
-      this._disableable = new Disableable(this, {
-        disableWithParent: false
-      });
-      if (!this.hasAttribute("static")) {
-        let { enable: enableListeners, disable: disableListeners } = initializeEventListeners2(this, this.selectable, this.viewState, this.validator);
-        this._disableable.onInitAndChange((disabled) => {
-          disabled ? disableListeners() : enableListeners();
-        });
-      }
-      this._controllable = new Controllable(this, { bubbles: true });
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.selectable.getValue()
-      });
-      let detangled = detangle();
-      this._controllable.initial((initial) => initial && this.selectable.setValue(initial));
-      this._controllable.getter(() => this.selectable.getValue());
-      this._controllable.setter(detangled((value3) => {
-        this.selectable.setValue(value3);
-      }));
-      this.observable.subscribe(ObservableTrigger2.SELECTION, detangled(() => {
-        this.dispatchEvent(new Event("select", { bubbles: false, cancelable: true }));
-        this._controllable.dispatch();
-      }));
-      this.observable.subscribe(ObservableTrigger2.SELECTION, () => {
-        this._submittable.update(this.selectable.getValue());
-      });
-      this.observable.subscribe(ObservableTrigger2.SELECTION, () => {
-        this.anchorSelection();
-      });
-      this.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => {
-        this.dispatchEvent(new Event("navigate", { bubbles: false, cancelable: true }));
-      });
-      queueMicrotask(() => {
-        this.closest("ui-date-picker")?.bootWithCalendar(this);
-      });
-      let observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (!["unavailable", "max", "min"].includes(mutation.attributeName)) return;
-          this.config.unavailable = this.getUnavailableDates(elDrivingConfig);
-          this.config.min = this.getMinDate(elDrivingConfig);
-          this.config.max = this.getMaxDate(elDrivingConfig);
-          this.validator.unavailable = this.config.unavailable;
-          this.validator.min = this.config.min;
-          this.validator.max = this.config.max;
-          this.observable.notify(ObservableTrigger2.VIEW_CHANGE);
-        });
-      });
-      observer.observe(elDrivingConfig, { attributes: true });
-    }
-    getOpenTo(el) {
-      if (!el.hasAttribute("open-to")) return;
-      let openTo = el.getAttribute("open-to");
-      openTo = openTo === "today" ? DateValue.today() : DateValue.fromIsoDateString(openTo);
-      if (!this.validator.isBetweenMinMax(openTo)) {
-        return this.config.min;
-      }
-      return openTo;
-    }
-    navigateNext() {
-      this.viewState.nextMonth();
-    }
-    navigatePrevious() {
-      this.viewState.previousMonth();
-    }
-    anchorSelection() {
-      let focusedEl = document.activeElement;
-      let isFocusedOnADateButton = this.contains(focusedEl) && focusedEl.closest("[data-date]") !== null;
-      if (isFocusedOnADateButton) return;
-      this.viewState.setDate(
-        this.selectable.lowerBound(DateValue.today())
-      );
-    }
-    appendMetadata(object) {
-      this.metadata.append(object);
-    }
-    resetMetadata(object = {}) {
-      this.metadata.reset(object);
-    }
-    visibleDateRange() {
-      return [
-        DateValue.fromParts(this.viewState.year, this.viewState.month, 1).toIsoDateString(),
-        DateValue.fromParts(this.viewState.year, this.viewState.month + 1, 0).toIsoDateString()
-      ];
-    }
-    getUnavailableDates(el) {
-      return el.hasAttribute("unavailable") ? el.getAttribute("unavailable").split(",").map((i) => DateValue.fromIsoDateString(i.trim())) : [];
-    }
-    getMinDate(el) {
-      return el.hasAttribute("min") ? el.getAttribute("min") === "today" ? DateValue.today() : DateValue.fromIsoDateString(el.getAttribute("min")) : null;
-    }
-    getMaxDate(el) {
-      return el.hasAttribute("max") ? el.getAttribute("max") === "today" ? DateValue.today() : DateValue.fromIsoDateString(el.getAttribute("max")) : null;
-    }
-  };
-  var UICalendarPrevious = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      initFauxButton(this, () => this._disableable.isDisabled(), () => calendar.navigatePrevious());
-      let setDisabled = () => {
-        if (calendar.viewState.canNavigatePrevious() && !this._disableable.isDisabled()) {
-          removeAttribute(this, "disabled");
-        } else {
-          setAttribute2(this, "disabled", "");
-        }
-      };
-      calendar.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, setDisabled);
-      this._disableable.onInitAndChange(() => {
-        setDisabled();
-      });
-    }
-  };
-  var UICalendarNext = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      initFauxButton(this, () => this._disableable.isDisabled(), () => calendar.navigateNext());
-      let setDisabled = () => {
-        if (calendar.viewState.canNavigateNext() && !this._disableable.isDisabled()) {
-          removeAttribute(this, "disabled");
-        } else {
-          setAttribute2(this, "disabled", "");
-        }
-      };
-      calendar.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, setDisabled);
-      this._disableable.onInitAndChange(() => {
-        setDisabled();
-      });
-    }
-  };
-  var UICalendarMonth = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      this.offset = this.hasAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
-      this.config = calendar.config;
-      this.viewState = calendar.viewState;
-      this.offsetState = this.viewState.generateOffsetState(this.offset);
-      this.validator = calendar.validator;
-      let select = this.querySelector("select");
-      let display = this.hasAttribute("display") ? this.getAttribute("display") : "long";
-      if (select) {
-        this.renderSelectOptions(select, display);
-        select.value = this.viewState.month;
-        select.addEventListener("change", this._disableable.enabled(() => {
-          this.viewState.setMonth(parseInt(select.value));
-        }));
-        calendar.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => {
-          this.renderSelectOptions(select, display);
-          select.value = this.viewState.month;
-        });
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            setAttribute2(select, "disabled", "");
-          } else {
-            removeAttribute(select, "disabled");
-          }
-        });
-      } else {
-        let update = () => this.textContent = new Intl.DateTimeFormat(this.config.locale, {
-          month: this.hasAttribute("display") ? this.getAttribute("display") : "long",
-          timeZone: "UTC"
-        }).format(new DateValue(this.offsetState.year, this.offsetState.month).getDate());
-        update();
-        this.viewState.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => update());
-      }
-    }
-    renderSelectOptions(select, display) {
-      let months = Array.from({ length: 12 }, (_, idx) => idx + 1);
-      let renderableMonths = months.map((month) => {
-        let firstDayOfMonth = new DateValue(this.viewState.year, month);
-        let lastDayOfMonth = new DateValue(this.viewState.year, month + 1, 0);
-        if (!this.validator.isBetweenMinMax(firstDayOfMonth) && !this.validator.isBetweenMinMax(lastDayOfMonth)) {
-          return null;
-        }
-        return {
-          month,
-          label: new Intl.DateTimeFormat(this.config.locale, { month: display, timeZone: "UTC" }).format(new DateValue(2024, month).getDate())
-        };
-      }).filter(Boolean);
-      renderTemplate(select.querySelector("template"), (hydrate) => {
-        if (renderableMonths.length === 0) {
-          let month = this.viewState.month;
-          let label = new Intl.DateTimeFormat(this.config.locale, { month: display, timeZone: "UTC" }).format(new DateValue(2024, month).getDate());
-          let option = hydrate({ slots: { default: label } });
-          option.setAttribute("value", month);
-          return option;
-        }
-        return renderableMonths.map((month) => {
-          let option = hydrate({ slots: { default: month.label } });
-          option.setAttribute("value", month.month);
-          return option;
-        });
-      });
-    }
-  };
-  var UICalendarYear = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      this.offset = this.hasAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
-      this.config = calendar.config;
-      this.viewState = calendar.viewState;
-      this.offsetState = this.viewState.generateOffsetState(this.offset);
-      this.numberOfPastYears = 100;
-      this.numberOfFutureYears = 10;
-      this.validator = calendar.validator;
-      let select = this.querySelector("select");
-      if (select) {
-        if (this.config.min) this.numberOfPastYears = this.viewState.year - this.config.min.getYear();
-        if (this.config.max) this.numberOfFutureYears = this.config.max.getYear() - this.viewState.year;
-        this.renderSelectOptions(select);
-        select.value = this.viewState.year;
-        select.addEventListener("change", this._disableable.enabled(() => {
-          this.viewState.setYear(parseInt(select.value));
-        }));
-        calendar.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => {
-          if (this.yearIsLessThanMinimum(this.viewState.year)) {
-            this.numberOfPastYears += 100;
-            this.renderSelectOptions(select);
-          }
-          if (this.yearIsGreaterThanMaximum(this.viewState.year)) {
-            this.numberOfFutureYears += 10;
-            this.renderSelectOptions(select);
-          }
-          select.value = this.viewState.year;
-        });
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            setAttribute2(select, "disabled", "");
-          } else {
-            removeAttribute(select, "disabled");
-          }
-        });
-      } else {
-        let update = () => this.textContent = new Intl.DateTimeFormat(this.config.locale, {
-          year: this.hasAttribute("display") ? this.getAttribute("display") : "numeric",
-          timeZone: "UTC"
-        }).format(new DateValue(this.offsetState.year, this.offsetState.month).getDate());
-        update();
-        this.viewState.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => update());
-      }
-    }
-    yearIsLessThanMinimum(year) {
-      return year < this.minimumYear();
-    }
-    yearIsGreaterThanMaximum(year) {
-      return year > this.maximumYear();
-    }
-    minimumYear() {
-      return (/* @__PURE__ */ new Date()).getFullYear() - this.numberOfPastYears;
-    }
-    maximumYear() {
-      return (/* @__PURE__ */ new Date()).getFullYear() + this.numberOfFutureYears;
-    }
-    renderSelectOptions(select) {
-      let currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-      let years = Array.from(
-        { length: this.numberOfPastYears + this.numberOfFutureYears + 1 },
-        (_, i) => currentYear - this.numberOfPastYears + i
-      );
-      let renderableYears = years.map((year) => {
-        let firstDayOfMonth = new DateValue(year, 1);
-        let lastDayOfMonth = new DateValue(year, 12, 31);
-        if (!this.validator.isBetweenMinMax(firstDayOfMonth) && !this.validator.isBetweenMinMax(lastDayOfMonth)) {
-          return null;
-        }
-        return year;
-      }).filter(Boolean);
-      renderTemplate(select.querySelector("template"), (hydrate) => {
-        if (renderableYears.length === 0) {
-          let year = this.viewState.year;
-          return hydrate({ slots: { default: year } });
-        }
-        return renderableYears.map((year) => hydrate({ slots: { default: year } }));
-      });
-    }
-  };
-  var UICalendarMonths = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      this.offset = this.hasAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
-      this.config = calendar.config;
-      this.selectable = calendar.selectable;
-      this.observable = calendar.observable;
-      this.metadata = calendar.metadata;
-      this.validator = calendar.validator;
-      this.viewState = calendar.viewState;
-      this.offsetState = this.viewState.generateOffsetState(this.offset);
-      this.monthEls = [];
-      this.renderMonths();
-      let render = () => this.monthEls.forEach((month) => renderMonth(month, this.config, month.offsetState, this.metadata));
-      let update = () => this.monthEls.forEach((month) => updateMonth(month, this._disableable.isDisabled(), this.config, month.offsetState, this.selectable, this.validator));
-      render();
-      update();
-      let months = this.config.months;
-      this.viewState.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => {
-        if (months !== this.config.months) {
-          months = this.config.months;
-          this.renderMonths();
-        }
-        render();
-        update();
-      });
-      this.observable.subscribe([ObservableTrigger2.SELECTION, ObservableTrigger2.ACTIVATION], () => {
-        update();
-      });
-      this._disableable.onChange(() => update());
-    }
-    renderMonths() {
-      let template = this.querySelector('template:not([name]), template[name="month"]');
-      renderTemplate(template, (hydrate) => {
-        let monthOffsetTemplate = Array.from({ length: this.config.months }).map((_, idx) => idx);
-        this.monthEls = monthOffsetTemplate.map((offset3) => {
-          let offsetState = this.viewState.generateOffsetState(offset3);
-          let monthEl = hydrate({ attrs: { "data-month": "" } });
-          monthEl.offsetState = offsetState;
-          let head = monthEl.querySelector("thead")?.set;
-          setAttribute2(monthEl, "role", "grid");
-          head && setAttribute2(head, "aria-hidden", "true");
-          return monthEl;
-        });
-        return this.monthEls;
-      });
-    }
-  };
-  var UICalendarToday = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar, ui-date-picker");
-      this._disableable = calendar._disableable;
-      this.behavior = this.hasAttribute("behavior") ? this.getAttribute("behavior") : "auto";
-      if (calendar.hasAttribute("static")) {
-        this.behavior = "none";
-      }
-      initFauxButton(this, () => this._disableable.isDisabled(), () => this.navigateAndSelectToday());
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          setAttribute2(this, "disabled", "");
-        } else {
-          removeAttribute(this, "disabled");
-        }
-      });
-      let template = this.querySelector("template");
-      template && renderTemplate(template, (hydrate) => {
-        return hydrate({ slots: { default: DateValue.today().getDay() } });
-      });
-    }
-    navigateAndSelectToday() {
-      let calendar = this.closest("ui-calendar, ui-date-picker");
-      let isViewingCurrentMonth = () => {
-        let viewState = calendar.viewState;
-        let today = DateValue.today();
-        return viewState.year === today.getYear() && viewState.month === today.getMonth();
-      };
-      let shouldSelect = this.behavior === "select" || this.behavior === "auto" && isViewingCurrentMonth();
-      if (shouldSelect) {
-        if (calendar.config.mode === CalendarModes.RANGE) {
-          calendar.selectable.setValue({ start: DateValue.today().toIsoDateString(), end: DateValue.today().toIsoDateString() });
-        } else if (calendar.config.mode === CalendarModes.MULTIPLE) {
-          calendar.selectable.setValue([DateValue.today().toIsoDateString()]);
-        } else {
-          calendar.selectable.setValue(DateValue.today().toIsoDateString());
-        }
-      }
-      calendar.viewState.setMonth(DateValue.today().getMonth());
-      calendar.viewState.setYear(DateValue.today().getYear());
-    }
-  };
-  var UICalendarPresets = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      this.offset = this.hasAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
-      this.selectable = calendar.selectable;
-      this.observable = calendar.observable;
-      this.config = calendar.config;
-      this.viewState = calendar.viewState;
-      this.offsetState = this.viewState.generateOffsetState(this.offset);
-      if (this.config.mode !== CalendarModes.RANGE) throw "Presets can only be used with range calendars";
-      let selectable = this.firstElementChild;
-      if (selectable) {
-        let getLabelFromPreset = (preset) => {
-          if (selectable._selectable instanceof SelectableGroup) {
-            let option = selectable._selectable.findByValue(preset);
-            if (!option) return null;
-            return option?.el?.textContent;
-          } else if (selectable instanceof HTMLSelectElement) {
-            return selectable.querySelector(`option[value="${preset}"]`)?.textContent;
-          }
-          return null;
-        };
-        this.selectable.setDisplayResolver((i) => {
-          let preset = this.selectable.getValue()?.preset || "";
-          if (preset) {
-            let label = getLabelFromPreset(preset);
-            if (label) return label;
-          }
-          return i;
-        });
-        selectable.value = this.selectable.getValue()?.preset || "custom";
-        selectable.addEventListener("change", this._disableable.enabled(() => {
-          if (["", "custom"].includes(selectable.value)) {
-            let { start, end } = this.selectable.getValue() || {};
-            if (start && end) this.selectable.setValue({ start, end });
-          } else {
-            this.selectable.setValue({ preset: selectable.value });
-          }
-        }));
-        this.observable.subscribe(ObservableTrigger2.SELECTION, () => {
-          let value3 = this.selectable.getValue();
-          selectable.value = value3?.preset || "custom";
-        });
-        this._disableable.onInitAndChange((disabled) => {
-          if (disabled) {
-            setAttribute2(selectable, "disabled", "");
-          } else {
-            removeAttribute(selectable, "disabled");
-          }
-        });
-      }
-    }
-  };
-  var UICalendarInputs = class extends UIElement {
-    boot() {
-      let calendar = this.closest("ui-calendar");
-      this._disableable = calendar._disableable;
-      this.offset = this.hasAttribute("offset") ? parseInt(this.getAttribute("offset")) : 0;
-      this.selectable = calendar.selectable;
-      this.observable = calendar.observable;
-      this.config = calendar.config;
-      this.viewState = calendar.viewState;
-      this.offsetState = this.viewState.generateOffsetState(this.offset);
-      let [firstInput, secondInput] = this.querySelectorAll("input");
-      if (this.config.mode === CalendarModes.RANGE) {
-        syncInputStateWithRangeSelectionState(firstInput, secondInput, calendar);
-      } else {
-        syncInputStateWithSingleSelectionState(firstInput, calendar);
-      }
-    }
-  };
-  inject(({ css }) => css`
-    ui-calendar-preset,
-    ui-calendar-previous,
-    ui-calendar-next {
-        display: block;
-        user-select: none;
-    }
-`);
-  element("calendar", UICalendar);
-  element("calendar-today", UICalendarToday);
-  element("calendar-presets", UICalendarPresets);
-  element("calendar-previous", UICalendarPrevious);
-  element("calendar-inputs", UICalendarInputs);
-  element("calendar-next", UICalendarNext);
-  element("calendar-months", UICalendarMonths);
-  element("calendar-month", UICalendarMonth);
-  element("calendar-year", UICalendarYear);
-  function initializeEventListeners2(el, selectable, viewState, validator) {
-    let blocked = false;
-    let readonly = el.hasAttribute("readonly");
-    on(el, "click", (e) => {
-      if (blocked || readonly) return;
-      let cell = e.target.closest("[data-date]");
-      if (!cell) return;
-      let date = dateFromCell2(cell);
-      validator.isValid(date) && selectable.select(date);
-    });
-    on(el, "mouseover", (e) => {
-      if (blocked || readonly) return;
-      let cell = e.target.closest("[data-date]");
-      if (!cell) return;
-      let date = dateFromCell2(cell);
-      if (!validator.isValid(date)) return;
-      selectable.activate(date);
-    });
-    on(el, "mouseout", () => {
-      if (blocked || readonly) return;
-      selectable.activate(null);
-    });
-    on(el, "focusin", (e) => {
-      if (blocked || readonly) return;
-      let cell = e.target.closest("[data-date]");
-      if (!cell) return;
-      let date = dateFromCell2(cell);
-      if (!validator.isValid(date)) return;
-      selectable.activate(date);
-    });
-    on(el, "keydown", (e) => {
-      if (blocked) return;
-      let cell = e.target.closest("[data-date]");
-      if (!cell) return;
-      let handled = true;
-      let direction;
-      let focusedDate = dateFromCell2(cell);
-      let adjustActive = (adjustment) => {
-        let activeDate = focusedDate.getCopy();
-        let direction2 = Math.sign(adjustment);
-        let safetyCounter = 366;
-        activeDate.setDay(activeDate.getDay() + adjustment);
-        while (!validator.isValid(activeDate) && safetyCounter > 0) {
-          activeDate.setDay(activeDate.getDay() + direction2);
-          safetyCounter--;
-        }
-        focusedDate = activeDate;
-      };
-      switch (e.key) {
-        case "ArrowRight":
-          direction = "forward";
-          adjustActive(1);
-          break;
-        case "ArrowLeft":
-          direction = "backward";
-          adjustActive(-1);
-          break;
-        case "ArrowUp":
-          direction = "backward";
-          adjustActive(-7);
-          break;
-        case "ArrowDown":
-          direction = "forward";
-          adjustActive(7);
-          break;
-        case "Home":
-          viewState.previousMonth();
-          break;
-        case "End":
-          viewState.nextMonth();
-          break;
-        case "PageUp":
-          if (e.shiftKey) {
-            viewState.previousMonth();
-          } else {
-            viewState.previousMonth();
-          }
-          break;
-        case "PageDown":
-          if (e.shiftKey) {
-            viewState.nextMonth();
-          } else {
-            viewState.nextMonth();
-          }
-          break;
-        default:
-          handled = false;
-      }
-      if (handled) {
-        e.preventDefault();
-        e.stopPropagation();
-        let cell2 = Array.from(el.querySelectorAll("[data-date]")).find((cell3) => dateFromCell2(cell3).isSameDay(focusedDate));
-        if (!cell2 && direction) {
-          if (direction === "forward") {
-            viewState.nextMonth();
-          } else {
-            viewState.previousMonth();
-          }
-          cell2 = Array.from(el.querySelectorAll("[data-date]")).find((cell3) => dateFromCell2(cell3).isSameDay(focusedDate));
-        }
-        cell2?.querySelector("button,ui-button")?.focus();
-      }
-    });
-    return { enable() {
-      blocked = false;
-    }, disable() {
-      blocked = true;
-    } };
-  }
-  function dateFromCell2(cell) {
-    if (!cell) return null;
-    if (!cell.hasAttribute("data-date")) return null;
-    return DateValue.fromIsoDateString(cell.getAttribute("data-date"));
-  }
-  function syncInputStateWithSingleSelectionState(input, subject) {
-    preventInputEventsFromBubblingToSelectRoot2(input);
-    let detangled = detangle();
-    let sync = detangled(() => {
-      let selected = subject.selectable.getValue();
-      input.value = selected || "";
-    });
-    subject.observable.subscribe(ObservableTrigger2.SELECTION, sync);
-    sync();
-    input.addEventListener("change", detangled(() => {
-      let date = input.valueAsDate;
-      if (date) {
-        subject.selectable.setValue(
-          DateValue.fromLocalDate(date).toIsoDateString()
-        );
-        subject.viewState.setDate(DateValue.fromLocalDate(date));
-      } else {
-        subject.selectable.setValue("");
-      }
-    }));
-  }
-  function syncInputStateWithRangeSelectionState(input, secondInput, subject) {
-    preventInputEventsFromBubblingToSelectRoot2(input);
-    preventInputEventsFromBubblingToSelectRoot2(secondInput);
-    let detangled = detangle();
-    let setInputsFromValue = detangled(() => {
-      let { start, end } = subject.selectable.getValue() || {};
-      input.value = start || "";
-      secondInput.value = end || "";
-    });
-    let setValueFromInputs = detangled(() => {
-      let start = input.valueAsDate;
-      let end = secondInput.valueAsDate;
-      if (start && end) {
-        subject.selectable.setValue(
-          { start: DateValue.fromLocalDate(start).toIsoDateString(), end: DateValue.fromLocalDate(end).toIsoDateString() }
-        );
-      } else if (start) {
-        subject.selectable.setValue(
-          { start: DateValue.fromLocalDate(start).toIsoDateString(), end: null }
-        );
-      } else {
-        subject.selectable.setValue(
-          { start: null, end: null }
-        );
-      }
-    });
-    subject.observable.subscribe(ObservableTrigger2.SELECTION, setInputsFromValue);
-    setInputsFromValue();
-    input.addEventListener("change", setValueFromInputs);
-    secondInput.addEventListener("change", setValueFromInputs);
-  }
-  function preventInputEventsFromBubblingToSelectRoot2(input) {
-    on(input, "change", (e) => e.stopPropagation());
-    on(input, "input", (e) => e.stopPropagation());
-  }
-
-  // js/calendar/picker.js
-  var UIDatePicker = class extends UIControl {
-    bootWithCalendar(calendar) {
-      let isRange = calendar.config.mode === CalendarModes.RANGE;
-      this.calendar = calendar;
-      this._disableable = new Disableable(this);
-      this._disableable.onInitAndChange((disabled) => {
-        this.calendar.disabled = disabled;
-      });
-      this.observable = new Observable2();
-      this.selectable = new DeferredSelectable(this.calendar.selectable, this.observable);
-      this.viewState = this.calendar.viewState;
-      this.querySelector("ui-selected-date")?.bootWithCalendar();
-      this.querySelector("ui-date-picker-select")?.bootWithCalendar();
-      let popoverEl = this.querySelector("dialog");
-      if (!popoverEl) return;
-      let inputEl = this.querySelector("input");
-      inputEl = popoverEl?.contains(inputEl) ? null : inputEl;
-      let secondInputEl = Array.from(this.querySelectorAll("input")).find((i) => i !== inputEl);
-      secondInputEl = popoverEl?.contains(secondInputEl) ? null : secondInputEl;
-      inputEl && inputEl.addEventListener("click", (e) => e.preventDefault());
-      secondInputEl && secondInputEl.addEventListener("click", (e) => e.preventDefault());
-      let buttonEl = this.querySelector("button,ui-button");
-      buttonEl = popoverEl?.contains(buttonEl) ? null : buttonEl;
-      let calendarId = assignId(this.calendar, "calendar");
-      this.triggerEl = inputEl || buttonEl;
-      if (!this.triggerEl) return;
-      setAttribute2(this.triggerEl, "role", "combobox");
-      setAttribute2(this.triggerEl, "aria-controls", calendarId);
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) setAttribute2(this.triggerEl, "disabled", "");
-        else removeAttribute(this.triggerEl, "disabled");
-      });
-      this._dialogable = new Dialogable(popoverEl, {
-        clickOutside: !this.hasAttribute("disable-click-outside"),
-        triggers: [buttonEl, inputEl, secondInputEl].filter(Boolean)
-      });
-      this._closeable = new Closeable(this);
-      this._closeable.onClose(() => this._dialogable.hide());
-      this._anchorable = new Anchorable(popoverEl, {
-        reference: this.triggerEl,
-        position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-        gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-        offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-      });
-      if (isIOS()) {
-        inputEl && this.showIOSOverlay(inputEl);
-        secondInputEl && this.showIOSOverlay(secondInputEl);
-      }
-      this.querySelectorAll("button,ui-button").forEach((button) => {
-        if (button === this.triggerEl) return;
-        if (popoverEl.contains(button)) return;
-        setAttribute2(button, "aria-controls", calendarId);
-        setAttribute2(button, "aria-haspopup", "combobox");
-        linkExpandedStateToPopover3(button, this._dialogable);
-        on(button, "click", () => this._dialogable.toggle());
-      });
-      initPopover3(this, this.triggerEl, popoverEl, this._dialogable, this._anchorable);
-      linkExpandedStateToPopover3(this.triggerEl, this._dialogable);
-      preventScrollWhenPopoverIsOpen3(this, this._dialogable);
-      controlPopoverWithKeyboard2(this.triggerEl, this._dialogable);
-      handlePopoverClosing3(this, this.calendar.config.mode, this.observable, this.selectable, this._dialogable);
-      if (isRange && popoverEl && inputEl && secondInputEl) {
-        highlightInputContentsWhenFocused2(inputEl);
-        highlightInputContentsWhenFocused2(secondInputEl);
-        syncInputStateWithRangeSelectionState(inputEl, secondInputEl, this);
-      } else if (popoverEl && inputEl) {
-        let input = inputEl;
-        highlightInputContentsWhenFocused2(input);
-        syncInputStateWithSingleSelectionState(input, this);
-      } else if (popoverEl) {
-        let button = buttonEl;
-        togglePopoverWithMouse2(button, this._dialogable);
-      }
-      this._controllable = new Controllable(this, { bubbles: true });
-      this.calendar.addEventListener("change", (e) => e.stopPropagation());
-      this.calendar.addEventListener("input", (e) => e.stopPropagation());
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.selectable.getValue()
-      });
-      let detangled = detangle();
-      this._controllable.initial((initial) => initial && this.selectable.setValue(initial));
-      this._controllable.getter(() => this.selectable.getValue());
-      this._controllable.setter(detangled((value3) => this.selectable.setValue(value3)));
-      this.observable.subscribe(ObservableTrigger2.SELECTION, detangled(() => {
-        this.dispatchEvent(new Event("select", { bubbles: false, cancelable: true }));
-        this._controllable.dispatch();
-      }));
-      this.observable.subscribe(ObservableTrigger2.SELECTION, () => {
-        this._submittable.update(this.selectable.getValue());
-      });
-      this.observable.subscribe(ObservableTrigger2.VIEW_CHANGE, () => {
-        this.dispatchEvent(new Event("navigate", { bubbles: false, cancelable: true }));
-      });
-    }
-    unmount() {
-      if (this._dialogable?.getState()) {
-        let { unlock } = lockScroll();
-        unlock();
-      }
-    }
-    showIOSOverlay(inputEl) {
-      let overlay = document.createElement("button");
-      overlay.setAttribute("data-flux-ios-overlay", "");
-      overlay.setAttribute("data-appended", "");
-      overlay.classList.add("absolute", "inset-0");
-      inputEl.after(overlay);
-    }
-    input() {
-      return this.querySelector("input");
-    }
-    clear() {
-      this.selectable.setValue(null);
-    }
-    open() {
-      this._dialogable.setState(true);
-    }
-    close() {
-      this._dialogable.setState(false);
-    }
-    trigger() {
-      return this.triggerEl;
-    }
-  };
-  var UISelectedDate = class extends UIElement {
-    bootWithCalendar() {
-      this.picker = this.closest("ui-date-picker");
-      this.querySelectorAll("[data-appended]").forEach((el) => el.remove());
-      if (!this.querySelector('template[name="date"]')) {
-        let template = document.createElement("template");
-        template.setAttribute("name", "date");
-        template.innerHTML = "<div><slot></slot></div>";
-        this.appendChild(template);
-      }
-      this.templates = {
-        placeholder: this.querySelector('template[name="placeholder"]'),
-        date: this.querySelector('template[name="date"]')
-      };
-      this.picker.observable.subscribe(ObservableTrigger2.SELECTION, () => {
-        this.render(this.picker);
-      });
-      this.render(this.picker);
-    }
-    render(picker) {
-      this.templates.placeholder?.clearPlaceholder?.();
-      this.templates.date?.clearDate?.();
-      if (picker.selectable.hasSelection()) {
-        let { cleanup } = renderTemplate(this.templates.date, (hydrate) => {
-          return hydrate({ slots: { default: picker.selectable.display(this.picker.calendar.config.locale) } });
-        });
-        this.templates.date.clearDate = cleanup;
-      } else {
-        if (!this.templates.placeholder) return;
-        let { cleanup } = renderTemplate(this.templates.placeholder, (hydrate) => {
-          return hydrate({ slots: {} });
-        });
-        this.templates.placeholder.clearPlaceholder = cleanup;
-      }
-    }
-  };
-  var UIDatePickerSelect = class extends UIElement {
-    bootWithCalendar() {
-      this.picker = this.closest("ui-date-picker");
-      this.picker.selectable.blockSyncIf(() => {
-        return this.getBoundingClientRect().width > 0;
-      });
-      initFauxButton(this, () => this.picker._disableable.isDisabled(), () => {
-        this.picker.selectable.sync();
-        this.picker._dialogable.setState(false);
-      });
-    }
-  };
-  element("date-picker", UIDatePicker);
-  element("date-picker-select", UIDatePickerSelect);
-  element("selected-date", UISelectedDate);
-  inject(({ css }) => css`ui-date-picker { display: block; }`);
-  inject(({ css }) => css`
-/* For Chrome, Safari, Edge */
-ui-date-picker input[type="date"]::-webkit-calendar-picker-indicator {
-    display: none;
-    -webkit-appearance: none;
-}
-`);
-  function linkExpandedStateToPopover3(el, dialogable) {
-    setAttribute2(el, "aria-haspopup", "listbox");
-    let refreshPopover = () => {
-      setAttribute2(el, "aria-expanded", dialogable.getState() ? "true" : "false");
-      dialogable.getState() ? setAttribute2(el, "data-open", "") : removeAttribute(el, "data-open", "");
-    };
-    dialogable.onChange(() => {
-      refreshPopover();
-    });
-    refreshPopover();
-  }
-  function initPopover3(root, trigger, popover, dialogable, anchorable) {
-    let refreshPopover = () => {
-      Array.from([root, popover]).forEach((i) => {
-        dialogable.getState() ? setAttribute2(i, "data-open", "") : removeAttribute(i, "data-open", "");
-      });
-      dialogable.getState() && anchorable.reposition();
-    };
-    dialogable.onChange(() => refreshPopover());
-    refreshPopover();
-    dialogable.onChange(() => {
-      if (dialogable.getState()) {
-        root.dispatchEvent(new Event("open", {
-          bubbles: false,
-          cancelable: false
-        }));
-      } else {
-        root.dispatchEvent(new Event("close", {
-          bubbles: false,
-          cancelable: false
-        }));
-      }
-    });
-  }
-  function controlPopoverWithKeyboard2(button, dialogable) {
-    on(button, "keydown", (e) => {
-      if (!["ArrowDown", "ArrowUp", "Escape"].includes(e.key)) return;
-      if (e.key === "ArrowDown") {
-        if (!dialogable.getState()) {
-          dialogable.setState(true);
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        }
-      } else if (e.key === "ArrowUp") {
-        if (!dialogable.getState()) {
-          dialogable.setState(true);
-          e.preventDefault();
-          e.stopImmediatePropagation();
-        }
-      } else if (e.key === "Escape") {
-        if (dialogable.getState()) {
-          dialogable.setState(false);
-        }
-      }
-    });
-  }
-  function togglePopoverWithMouse2(button, dialogable) {
-    on(button, "click", () => {
-      dialogable.setState(!dialogable.getState());
-    });
-  }
-  function highlightInputContentsWhenFocused2(input) {
-    on(input, "focus", () => input.select());
-  }
-  function preventScrollWhenPopoverIsOpen3(root, dialogable) {
-    let { lock, unlock } = lockScroll(dialogable.el);
-    dialogable.onChange(() => {
-      dialogable.getState() ? lock() : unlock();
-    });
-  }
-  function handlePopoverClosing3(root, mode, observable, selectable, dialogable) {
-    let closeOnSelect = mode !== CalendarModes.MULTIPLE;
-    if (root.hasAttribute("close")) {
-      let close = root.getAttribute("close");
-      closeOnSelect = close.split(" ").includes("auto");
-      if (close === "manual") closeOnSelect = false;
-    }
-    if (!closeOnSelect) return;
-    observable.subscribe(ObservableTrigger2.SELECTION, () => {
-      if (selectable.hasSelection()) {
-        dialogable.setState(false);
-      }
-    });
-  }
-
-  // js/composer.js
-  var UIComposer = class extends UIControl {
-    boot() {
-      setAttribute2(this, "role", "group");
-      this.config = {
-        submit: this.getAttribute("submit") || "cmd-enter",
-        rows: Number(this.getAttribute("rows")) || 2,
-        maxRows: Number(this.getAttribute("max-rows")) || 10
-      };
-      let textarea = this.querySelector("textarea");
-      let editor = this.querySelector("ui-editor");
-      if (textarea) {
-        this._inputEl = textarea;
-        this._initTextarea();
-      } else {
-        this._inputEl = editor;
-        this._initEditor();
-      }
-      this.state = {
-        onChanges: [],
-        getValue: () => {
-          return this._inputEl.value;
-        },
-        setValue: (value3) => {
-          this._inputEl.value = value3;
-          this.state.onChanges.forEach((i) => i(this.state.getValue()));
-        },
-        onChange: (callback) => {
-          this.state.onChanges.push(callback);
-        }
-      };
-      this._controllable = new Controllable(this);
-      this._disableable = new Disableable(this);
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.state.getValue()
-      });
-      this.state.onChange((value3) => {
-        this._submittable.update(value3);
-      });
-      this._controllable.initial((initial) => initial && this.state.setValue(initial));
-      this._controllable.getter(() => this.state.getValue());
-      this._controllable.setter((v) => this.state.setValue(v));
-      let undoDisableActions = () => {
-      };
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          undoDisableActions = this._disableActions();
-          setAttribute2(this._inputEl, "disabled", "");
-        } else {
-          undoDisableActions();
-          undoDisableActions = () => {
-          };
-          removeAttribute(this._inputEl, "disabled");
-        }
-      });
-      on(this._inputEl, "input", (e) => {
-        this._controllable.dispatch();
-        e.stopPropagation();
-      });
-    }
-    _resizeTextarea() {
-      setAttribute2(this._inputEl, "style", "height: auto");
-      let style = window.getComputedStyle(this._inputEl);
-      let height = this._inputEl.scrollHeight;
-      let lineHeight = parseFloat(style.lineHeight);
-      if (isNaN(lineHeight)) {
-        lineHeight = parseFloat(style.fontSize) * 1.2;
-      }
-      let borderTop = parseFloat(style.borderTopWidth);
-      let borderBottom = parseFloat(style.borderBottomWidth);
-      let paddingTop = parseFloat(style.paddingTop);
-      let paddingBottom = parseFloat(style.paddingBottom);
-      let minHeight = this.config.rows * lineHeight;
-      let maxHeight = this.config.maxRows * lineHeight;
-      if (style.boxSizing === "border-box") {
-        height += borderTop + borderBottom;
-        minHeight += paddingTop + paddingBottom + borderTop + borderBottom;
-        maxHeight += paddingTop + paddingBottom + borderTop + borderBottom;
-      } else {
-        height -= paddingTop + paddingBottom;
-      }
-      if (height < minHeight) height = minHeight;
-      let overflow = "hidden";
-      if (height > maxHeight) {
-        height = maxHeight;
-        overflow = "auto";
-      }
-      setAttribute2(this._inputEl, "style", `height: ${height}px; overflow-y: ${overflow}`);
-    }
-    focusInput() {
-      this._inputEl.focus();
-    }
-    _resizeEditor() {
-      let contentEl = this._inputEl.querySelector('[data-slot="content"]');
-      if (!contentEl) return;
-      let style = window.getComputedStyle(contentEl);
-      let lineHeight = parseFloat(style.lineHeight);
-      if (isNaN(lineHeight)) {
-        lineHeight = parseFloat(style.fontSize) * 1.2;
-      }
-      let borderTop = parseFloat(style.borderTopWidth);
-      let borderBottom = parseFloat(style.borderBottomWidth);
-      let paddingTop = parseFloat(style.paddingTop);
-      let paddingBottom = parseFloat(style.paddingBottom);
-      let minHeight = this.config.rows * lineHeight;
-      let maxHeight = this.config.maxRows * lineHeight;
-      if (style.boxSizing === "border-box") {
-        minHeight += paddingTop + paddingBottom + borderTop + borderBottom;
-        maxHeight += paddingTop + paddingBottom + borderTop + borderBottom;
-      }
-      setAttribute2(contentEl, "style", `min-height: ${minHeight}px; max-height: ${maxHeight}px; height: auto; overflow-y: auto;`);
-    }
-    _initTextarea() {
-      if (!this._inputEl.hasAttribute("rows")) {
-        setAttribute2(this._inputEl, "rows", this.config.rows);
-      }
-      if (this.hasAttribute("placeholder")) {
-        setAttribute2(this._inputEl, "placeholder", this.getAttribute("placeholder"));
-      }
-      this._inputEl.addEventListener("input", () => this._resizeTextarea());
-      this._resizeTextarea();
-      on(this._inputEl, "keydown", (e) => this._handleSubmitKeydown(e));
-    }
-    _initEditor() {
-      if (this.hasAttribute("placeholder")) {
-        setAttribute2(this._inputEl, "placeholder", this.getAttribute("placeholder"));
-      }
-      this.addEventListener("flux:editor:ready", () => {
-        this._resizeEditor();
-      });
-      on(this._inputEl, "keydown", (e) => this._handleSubmitKeydown(e), { capture: true });
-    }
-    _handleSubmitKeydown(e) {
-      if (["cmd-enter", "super-enter", "ctrl-enter"].includes(this.config.submit) && (e.metaKey || e.ctrlKey) && e.key === "Enter") {
-        e.preventDefault();
-        e.stopPropagation();
-        this._submittable.submitEnclosingForm();
-      } else if (this.config.submit === "enter" && e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        this._submittable.submitEnclosingForm();
-      } else if (this.config.submit === "shift-enter" && e.key === "Enter" && e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        this._submittable.submitEnclosingForm();
-      }
-    }
-    _disableActions() {
-      let undos = [];
-      let actionEls = this.querySelectorAll("button");
-      actionEls.forEach((el) => {
-        if (!el.hasAttribute("disabled")) {
-          setAttribute2(el, "disabled", "");
-          undos.push(() => {
-            removeAndReleaseAttribute(el, "disabled");
-          });
-        }
-      });
-      return () => {
-        undos.forEach((undo) => undo());
-        undos = [];
-      };
-    }
-  };
-  inject(({ css }) => css`ui-composer { display: block; }`);
-  element("composer", UIComposer);
-
-  // js/context.js
-  var UIContext = class extends UIElement {
-    boot() {
-      let trigger = this.trigger();
-      let overlay = this.overlay();
-      this._disabled = this.hasAttribute("disabled");
-      this._popoverable = new Popoverable(overlay);
-      this._anchorable = new Anchorable(overlay, {
-        reference: trigger,
-        auto: false,
-        position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-        gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-        offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-      });
-      let { lock, unlock } = lockScroll(this._popoverable.el);
-      this._popoverable.onChange(() => {
-        this._popoverable.getState() ? lock() : unlock();
-      });
-      on(trigger, "contextmenu", (e) => {
-        e.preventDefault();
-        this._anchorable.reposition(e.pageX, e.pageY);
-        this._popoverable.setState(true);
-        if (this.hasAttribute("detail")) {
-          setAttribute2(overlay, "data-detail", this.getAttribute("detail"));
-        }
-      });
-      if (this.hasAttribute("detail")) {
-        setAttribute2(overlay, "data-detail", "");
-      }
-    }
-    unmount() {
-      if (this.overlay()?._popoverable?.getState()) {
-        let { unlock } = lockScroll();
-        unlock();
-      }
-    }
-    trigger() {
-      return this.firstElementChild;
-    }
-    overlay() {
-      if (this.hasAttribute("target")) {
-        let target = this.getAttribute("target");
-        return document.getElementById(target);
-      } else {
-        return this.lastElementChild.matches("[popover]") && this.lastElementChild;
-      }
-    }
-  };
-  element("context", UIContext);
-
-  // js/mixins/focusable.js
-  var FocusableGroup = class extends MixinGroup {
-    groupOfType = Focusable;
-    boot({ options }) {
-      options({ wrap: false, ensureTabbable: true });
-    }
-    mount() {
-      this.options().ensureTabbable && this.ensureTabbable();
-    }
-    focusFirst() {
-      let target;
-      target = target || this.walker().find((i) => i.hasAttribute("autofocus"));
-      target = target || this.walker().find((i) => i.getAttribute("tabindex") === "0");
-      target = target || this.walker().find((i) => i.getAttribute("tabindex") === "-1");
-      target = target || this.walker().find((i) => isFocusable3(i));
-      target?.focus();
-    }
-    focusPrev() {
-      this.moveFocus((from) => {
-        return this.options().wrap ? this.walker().prevOrLast(from) : this.walker().prev(from);
-      });
-    }
-    focusNext() {
-      this.moveFocus((from) => {
-        return this.options().wrap ? this.walker().nextOrFirst(from) : this.walker().next(from);
-      });
-    }
-    focusBySearch(query) {
-      let found = this.walker().find((i) => i.textContent.toLowerCase().trim().startsWith(query.toLowerCase()));
-      found?.use(Focusable).tabbable();
-      found?.use(Focusable).focus();
-    }
-    moveFocus(callback) {
-      let tabbable = this.walker().find((i) => i.use(Focusable).isTabbable());
-      let to = callback(tabbable);
-      to?.use(Focusable).focus();
-    }
-    ensureTabbable() {
-      this.walker().findOrFirst((el) => {
-        el.use(Focusable).isTabbable();
-      })?.use(Focusable).tabbable();
-    }
-    wipeTabbables() {
-      this.walker().each((el) => {
-        el.use(Focusable).untabbable();
-      });
-    }
-    untabbleOthers(except) {
-      this.walker().each((el) => {
-        if (el === except) return;
-        el.use(Focusable).untabbable();
-      });
-    }
-    walker() {
-      return walker(this.el, (el, { skip, reject }) => {
-        if (el[this.constructor.name] && el !== this.el) return reject();
-        if (!el[this.groupOfType.name]) return skip();
-        if (el.hasAttribute("disabled")) return reject();
-      });
-    }
-  };
-  var Focusable = class extends Mixin {
-    groupedByType = FocusableGroup;
-    boot({ options }) {
-      options({ hover: false, disableable: null, tabbable: false, tabbableAttr: null });
-    }
-    mount() {
-      let disableable = this.options().disableable;
-      if (!disableable) throw "Focusable requires a Disableable instance...";
-      if (!this.el.hasAttribute("tabindex")) {
-        this.options().tabbable ? this.tabbable() : this.untabbable();
-      }
-      this.pauseFocusListener = this.on("focus", disableable.enabled(() => {
-        this.focus(false);
-      })).pause;
-      this.on("focus", disableable.enabled(() => {
-        isUsingKeyboard() && setAttribute2(this.el, "data-focus", "");
-      }));
-      this.on("blur", disableable.enabled(() => {
-        removeAttribute(this.el, "data-focus");
-      }));
-      this.options().hover && this.on("pointerenter", disableable.enabled(() => {
-        this.group()?.untabbleOthers(this.el);
-        this.tabbable();
-      }));
-      this.options().hover && this.on("pointerleave", disableable.enabled((e) => {
-        this.untabbable();
-      }));
-    }
-    focus(focusProgramatically = true) {
-      this.group()?.untabbleOthers(this.el);
-      this.tabbable();
-      focusProgramatically && this.pauseFocusListener(() => {
-        this.el.focus({ focusVisible: false });
-      });
-    }
-    tabbable() {
-      setAttribute2(this.el, "tabindex", "0");
-      this.options().tabbableAttr && setAttribute2(this.el, this.options().tabbableAttr, "");
-    }
-    untabbable() {
-      setAttribute2(this.el, "tabindex", "-1");
-      this.options().tabbableAttr && removeAttribute(this.el, this.options().tabbableAttr);
-    }
-    isTabbable() {
-      return this.el.getAttribute("tabindex") === "0";
-    }
-  };
-
-  // js/menu.js
-  var UIMenu = class _UIMenu extends UIElement {
-    boot() {
-      this._focusable = new FocusableGroup(this, { wrap: false, ensureTabbable: false });
-      on(this, "keydown", (e) => {
-        if (["ArrowDown"].includes(e.key)) {
-          e.target === this ? this._focusable.focusFirst() : this._focusable.focusNext();
-          e.preventDefault();
-          e.stopPropagation();
-        } else if (["ArrowUp"].includes(e.key)) {
-          e.target === this ? this._focusable.focusFirst() : this._focusable.focusPrev();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      });
-      search(this, (query) => this._focusable.focusBySearch(query));
-      if (this.hasAttribute("popover")) {
-        this.addEventListener("lofi-close-popovers", () => {
-          if (this.hasAttribute("keep-open")) return;
-          setTimeout(() => this.hidePopover(), 50);
-        });
-      }
-      if (this.parentElement.localName === "ui-dropdown") {
-        let dropdown = this.parentElement;
-        on(dropdown.trigger(), "keydown", (e) => {
-          if (e.key === "ArrowDown") {
-            this.fromArrowDown = true;
-            this.showPopover();
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        });
-      }
-      setAttribute2(this, "role", "menu");
-      setAttribute2(this, "tabindex", "-1");
-    }
-    mount() {
-      this.initializeMenuItems();
-      let observer = new MutationObserver((mutations) => {
-        this.initializeMenuItems();
-      });
-      observer.observe(this, { childList: true, subtree: true });
-    }
-    onPopoverShow() {
-      queueMicrotask(() => {
-        if (this.fromArrowDown) {
-          this._focusable.focusFirst();
-          this.fromArrowDown = false;
-        } else {
-          this.focus();
-        }
-      });
-    }
-    onPopoverHide() {
-      this._focusable.wipeTabbables();
-    }
-    initializeMenuItems() {
-      this.walker().each((el) => {
-        if (el._disableable) return;
-        initializeMenuItem(el);
-      });
-    }
-    walker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof _UIMenu) return reject();
-        if (el instanceof UISelect) return reject();
-        if (!["a", "button"].includes(el.localName)) return skip();
-      });
-    }
-  };
-  var UISubmenu = class extends UIElement {
-    boot() {
-    }
-  };
-  var UIMenuCheckbox = class extends UIElement {
-    boot() {
-      this._disabled = this.hasAttribute("disabled");
-      this._disableable = new Disableable(this);
-      let button = this;
-      if (this._disabled) {
-        setAttribute2(button, "disabled", "");
-        setAttribute2(button, "aria-disabled", "true");
-      }
-      assignId(button, "menu-checkbox");
-      setAttribute2(button, "role", "menuitemcheckbox");
-      if (this._disabled) return;
-      button._focusable = new Focusable(button, { disableable: this._disableable, hover: true, tabbableAttr: "data-active" });
-      button._selectable = new Selectable(button, {
-        toggleable: true,
-        value: this.hasAttribute("value") ? this.getAttribute("value") : button.textContent.trim(),
-        label: this.hasAttribute("label") ? this.getAttribute("label") : button.textContent.trim(),
-        dataAttr: "data-checked",
-        ariaAttr: "aria-checked",
-        selectedInitially: this.hasAttribute("checked")
-      });
-      this._controllable = new Controllable(this);
-      this._controllable.initial((initial) => initial && button._selectable.setState(initial));
-      this._controllable.getter(() => button._selectable.getState());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        this._selectable.setState(value3);
-      }));
-      this._selectable.onChange(detangled(() => {
-        this._controllable.dispatch();
-      }));
-      on(button, "click", () => {
-        if (!this.hasAttribute("keep-open")) {
-          this.dispatchEvent(new CustomEvent("lofi-close-popovers", { bubbles: true }));
-        }
-        button._selectable.press();
-      });
-      respondToKeyboardClick(button);
-    }
-  };
-  var UIMenuRadio = class extends UIElement {
-    boot() {
-      this._disabled = this.hasAttribute("disabled");
-      this._disableable = new Disableable(this);
-      let button = this;
-      if (this._disabled) {
-        setAttribute2(button, "disabled", "");
-        setAttribute2(button, "aria-disabled", "true");
-      }
-      assignId(button, "menu-radio");
-      setAttribute2(button, "role", "menuitemradio");
-      if (this._disabled) return;
-      button._focusable = new Focusable(button, { disableable: this._disableable, hover: true, tabbableAttr: "data-active" });
-      button._selectable = new Selectable(button, {
-        toggleable: false,
-        value: this.hasAttribute("value") ? this.getAttribute("value") : button.textContent.trim(),
-        label: this.hasAttribute("label") ? this.getAttribute("label") : button.textContent.trim(),
-        dataAttr: "data-checked",
-        ariaAttr: "aria-checked",
-        selectedInitially: this.hasAttribute("checked")
-      });
-      on(button, "click", () => {
-        if (!this.hasAttribute("keep-open")) {
-          this.dispatchEvent(new CustomEvent("lofi-close-popovers", { bubbles: true }));
-        }
-        button._selectable.press();
-      });
-      respondToKeyboardClick(button);
-    }
-  };
-  var UIMenuRadioGroup = class extends UIElement {
-    boot() {
-      this._selectable = new SelectableGroup(this);
-      this._controllable = new Controllable(this);
-      setAttribute2(this, "role", "group");
-      this._controllable.initial((initial) => initial && this._selectable.setState(initial));
-      this._controllable.getter(() => this._selectable.getState());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        this._selectable.setState(value3);
-      }));
-      this._selectable.onChange(detangled(() => {
-        this._controllable.dispatch();
-      }));
-      on(this, "lofi-close-popovers", (e) => {
-        if (this.hasAttribute("keep-open")) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      });
-    }
-  };
-  var UIMenuCheckboxGroup = class extends UIElement {
-    boot() {
-      this._selectable = new SelectableGroup(this, { multiple: true });
-      this._controllable = new Controllable(this);
-      setAttribute2(this, "role", "group");
-      this._controllable.initial((initial) => initial && this._selectable.setState(initial));
-      this._controllable.getter(() => this._selectable.getState());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        this._selectable.setState(value3);
-      }));
-      this._selectable.onChange(detangled(() => {
-        this._controllable.dispatch();
-      }));
-    }
-  };
-  inject(({ css }) => css`ui-menu[popover]:popover-open { display: block; }`);
-  inject(({ css }) => css`ui-menu[popover].\:popover-open { display: block; }`);
-  inject(({ css }) => css`ui-menu-checkbox, ui-menu-radio { cursor: default; display: contents; }`);
-  element("menu", UIMenu);
-  element("submenu", UISubmenu);
-  element("menu-checkbox", UIMenuCheckbox);
-  element("menu-radio", UIMenuRadio);
-  element("menu-radio-group", UIMenuRadioGroup);
-  element("menu-checkbox-group", UIMenuCheckboxGroup);
-  function respondToKeyboardClick(el) {
-    on(el, "keydown", (e) => {
-      if (e.key === "Enter") {
-        el.click();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    });
-    on(el, "keydown", (e) => {
-      if (e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    });
-    on(el, "keyup", (e) => {
-      if (e.key === " ") {
-        el.click();
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    });
-  }
-  function initializeMenuItem(el) {
-    el._disableable = new Disableable(el);
-    el._disabled = el.hasAttribute("disabled");
-    let link = el.querySelector("a");
-    let button = el;
-    let submenu = el.parentElement.matches("ui-submenu") && el.parentElement.querySelector("ui-menu[popover]");
-    let target = link || button;
-    if (el._disabled) {
-      setAttribute2(target, "disabled", "");
-      setAttribute2(target, "aria-disabled", "true");
-    }
-    assignId(target, "menu-item");
-    setAttribute2(target, "role", "menuitem");
-    if (el._disabled) return;
-    target._focusable = new Focusable(target, { disableable: el._disableable, hover: true, tabbableAttr: "data-active" });
-    if (!submenu) {
-      el.hasAttribute("disabled") || on(el, "click", () => {
-        if (!el.hasAttribute("keep-open")) {
-          el.dispatchEvent(new CustomEvent("lofi-close-popovers", { bubbles: true }));
-        }
-      });
-      respondToKeyboardClick(button);
-    } else {
-      submenu._popoverable = new Popoverable(submenu, { triggers: [button] });
-      submenu._anchorable = new Anchorable(submenu, {
-        reference: button,
-        position: submenu.hasAttribute("position") ? submenu.getAttribute("position") : isRTL() ? "left start" : "right start",
-        gap: submenu.hasAttribute("gap") ? submenu.getAttribute("gap") : "-5",
-        crossAxis: true
-      });
-      button.addEventListener("click", (e) => {
-        submenu._popoverable.setState(true);
-      });
-      let { clear } = interest(button, submenu, {
-        gain() {
-          submenu._popoverable.setState(true);
-        },
-        lose() {
-          submenu._popoverable.setState(false);
-        },
-        focusable: false,
-        useSafeArea: true
-      });
-      submenu._popoverable.onChange(() => {
-        if (!submenu._popoverable.getState()) {
-          clear();
-          submenu._focusable.wipeTabbables();
-        }
-        submenu._popoverable.getState() ? submenu._anchorable.reposition() : submenu._anchorable.cleanup();
-      });
-      on(button, "keydown", (e) => {
-        if (e.key === "Enter") {
-          submenu._popoverable.setState(true);
-          setTimeout(() => submenu._focusable.focusFirst());
-        }
-      });
-      on(button, "keydown", (e) => {
-        if (e.key === "ArrowRight") {
-          submenu._popoverable.setState(true);
-          setTimeout(() => submenu._focusable.focusFirst());
-        }
-      });
-      on(submenu, "keydown", (e) => {
-        if (e.key === "ArrowLeft") {
-          submenu._popoverable.setState(false);
-          button.focus();
-          e.stopPropagation();
-        }
-      });
-    }
-  }
-
-  // js/toolbar.js
-  var UIToolbar = class _UIToolbar extends UIElement {
-    mount() {
-      this._focusable = new FocusableGroup(this, { wrap: true });
-      this._disableable = new Disableable(this);
-      let undoDisableds = [];
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          setAttribute2(this, "aria-disabled", "true");
-          this.walker().each((el) => {
-            if (!el.hasAttribute("disabled")) {
-              setAttribute2(el, "disabled", "true");
-              setAttribute2(el, "aria-disabled", "true");
-              undoDisableds.push(() => {
-                removeAndReleaseAttribute(el, "disabled");
-                removeAndReleaseAttribute(el, "aria-disabled");
-              });
-            }
-          });
-        } else {
-          removeAndReleaseAttribute(this, "aria-disabled");
-          undoDisableds.forEach((fn) => fn());
-          undoDisableds = [];
-        }
-      });
-      on(this, "keydown", (e) => {
-        if (["ArrowRight"].includes(e.key)) {
-          e.target === this ? this._focusable.focusFirst() : this._focusable.focusNext();
-          e.preventDefault();
-          e.stopPropagation();
-        } else if (["ArrowLeft"].includes(e.key)) {
-          e.target === this ? this._focusable.focusFirst() : this._focusable.focusPrev();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      });
-      setAttribute2(this, "role", "toolbar");
-      this.initializeToolbarItems();
-    }
-    initializeToolbarItems() {
-      this.walker().each((el) => {
-        if (el._disableable) return;
-        initializeToolbarItem(el);
-      });
-    }
-    walker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof _UIToolbar) return reject();
-        if (el.hasAttribute("popover")) return reject();
-        if (el instanceof UIMenu) return reject();
-        if (el instanceof UIOptions) return reject();
-        if (!["a", "button"].includes(el.localName)) return skip();
-      });
-    }
-  };
-  element("toolbar", UIToolbar);
-  function initializeToolbarItem(el) {
-    el._disableable = new Disableable(el);
-    el._disabled = el.hasAttribute("disabled");
-    let link = el.querySelector("a");
-    let button = el;
-    let target = link || button;
-    if (el._disabled) {
-      setAttribute2(target, "disabled", "");
-      setAttribute2(target, "aria-disabled", "true");
-    }
-    if (el._disabled) return;
-    target._focusable = new Focusable(target, { disableable: el._disableable });
-  }
-
-  // js/tooltip.js
-  var UITooltip = class extends UIElement {
-    boot() {
-      let type = this.hasAttribute("label") ? "label" : "description";
-      let button = this.button();
-      let overlay = this.overlay();
-      if (!button) {
-        return console.warn("ui-tooltip: no trigger element found", this);
-      } else if (!overlay) {
-        return;
-      }
-      overlay._popoverable = new Popoverable(overlay, { scope: "tooltip" });
-      overlay._anchorable = new Anchorable(overlay, {
-        reference: button,
-        position: this.hasAttribute("position") ? this.getAttribute("position") : void 0,
-        gap: this.hasAttribute("gap") ? this.getAttribute("gap") : void 0,
-        offset: this.hasAttribute("offset") ? this.getAttribute("offset") : void 0
-      });
-      overlay._popoverable.onChange(() => {
-        overlay._popoverable.getState() ? overlay._anchorable.reposition() : overlay._anchorable.cleanup();
-      });
-      this._disableable = new Disableable(this);
-      let removeInterest;
-      this._disableable.onInitAndChange((disabled) => {
-        if (removeInterest) {
-          removeInterest();
-          removeInterest = null;
-        }
-        if (!disabled) {
-          let result = interest(button, overlay, {
-            gain() {
-              overlay._popoverable.setState(true);
-            },
-            lose() {
-              overlay._popoverable.setState(false);
-            },
-            focusable: true,
-            useSafeArea: false
-          });
-          removeInterest = result.remove;
-        }
-      });
-      let id = assignId(overlay, "tooltip");
-      let interactive = this.hasAttribute("interactive");
-      let wantsLabel = this.hasAttribute("label") || button.textContent.trim() === "";
-      if (interactive) {
-        setAttribute2(button, "aria-controls", id);
-        setAttribute2(button, "aria-expanded", "false");
-        overlay._popoverable.onChange(() => {
-          overlay._popoverable.getState() ? setAttribute2(button, "aria-expanded", "true") : setAttribute2(button, "aria-expanded", "false");
-        });
-      } else {
-        if (wantsLabel) setAttribute2(button, "aria-labelledby", id);
-        else setAttribute2(button, "aria-describedby", id);
-        setAttribute2(overlay, "aria-hidden", "true");
-      }
-      setAttribute2(overlay, "role", "tooltip");
-    }
-    button() {
-      return this.firstElementChild;
-    }
-    overlay() {
-      return this.lastElementChild !== this.button() && this.lastElementChild.tagName !== "TEMPLATE" && this.lastElementChild;
-    }
-  };
-  element("tooltip", UITooltip);
-
-  // js/sidebar.js
-  var EVENTS = {
-    STATE_CHANGED: "stateChanged",
-    DESKTOP_COLLAPSED: "desktopCollapsed",
-    DESKTOP_EXPANDED: "desktopExpanded",
-    MOBILE_COLLAPSED: "mobileCollapsed",
-    MOBILE_EXPANDED: "mobileExpanded",
-    VIEWPORT_ENTER_MOBILE: "viewportEnterMobile",
-    VIEWPORT_ENTER_DESKTOP: "viewportEnterDesktop"
-  };
-  var UISidebar = class extends UIElement {
-    boot() {
-      this.config = {
-        breakpoint: this.hasAttribute("breakpoint") ? this.getAttribute("breakpoint") : 1024,
-        collapsible: false,
-        persist: this.hasAttribute("persist") ? ["false", "none"].includes(this.getAttribute("persist")) ? false : true : true,
-        sticky: this.hasAttribute("sticky") ? true : false
-      };
-      this.observable = new Observable();
-      this.state = {
-        active: false,
-        viewportDesktop: true,
-        viewportMobile: false,
-        collapsedMobile: true,
-        collapsedDesktop: false
-      };
-      if (this.config.sticky) {
-        this.setStickyPositionStyles();
-      }
-      if (this.hasAttribute("collapsible")) {
-        let value3 = this.getAttribute("collapsible");
-        if (value3 === "true") {
-          this.config.collapsible = true;
-        } else if (value3 === "false") {
-          this.config.collapsible = false;
-        } else if (value3 === "mobile") {
-          this.config.collapsible = "mobile";
-        }
-      }
-      if (this.config.persist && this.config.collapsible) {
-        this.state.collapsedDesktop = JSON.parse(localStorage.getItem("flux-sidebar-collapsed-desktop"));
-      }
-      this.removeAttribute("data-flux-sidebar-cloak");
-      this.observable.subscribe(EVENTS.VIEWPORT_ENTER_DESKTOP, () => {
-        let reapplyTransition = setStyle(this, "transition", "none");
-        setTimeout(reapplyTransition);
-        this.state.viewportDesktop = true;
-        this.state.viewportMobile = false;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.observable.subscribe(EVENTS.VIEWPORT_ENTER_MOBILE, () => {
-        let reapplyTransition = setStyle(this, "transition", "none");
-        setTimeout(reapplyTransition);
-        this.state.viewportDesktop = false;
-        this.state.viewportMobile = true;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.observable.subscribe(EVENTS.DESKTOP_COLLAPSED, () => {
-        this.state.collapsedDesktop = true;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.observable.subscribe(EVENTS.DESKTOP_EXPANDED, () => {
-        this.state.collapsedDesktop = false;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.observable.subscribe(EVENTS.MOBILE_COLLAPSED, () => {
-        this.state.collapsedMobile = true;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.observable.subscribe(EVENTS.MOBILE_EXPANDED, () => {
-        this.state.collapsedMobile = false;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.observable.subscribe(EVENTS.STATE_CHANGED, () => {
-        if (this.config.persist) {
-          localStorage.setItem("flux-sidebar-collapsed-desktop", JSON.stringify(this.state.collapsedDesktop));
-        }
-        this.updateDataAttributes(this);
-      });
-      new ViewportResizeObserver(this.observable, this.config);
-      document.addEventListener("flux-sidebar-toggle", () => {
-        if (this.state.viewportDesktop) {
-          this.state.collapsedDesktop ? this.observable.notify(EVENTS.DESKTOP_EXPANDED) : this.observable.notify(EVENTS.DESKTOP_COLLAPSED);
-        } else {
-          this.state.collapsedMobile ? this.observable.notify(EVENTS.MOBILE_EXPANDED) : this.observable.notify(EVENTS.MOBILE_COLLAPSED);
-        }
-      });
-      this.addEventListener("click", (e) => {
-        if (!(e.target === this)) return;
-        if (!this.state.collapsedDesktop) return;
-        this.observable.notify(EVENTS.DESKTOP_EXPANDED);
-      });
-      this.addEventListener("mouseenter", (e) => {
-        this.state.active = true;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.addEventListener("mouseleave", (e) => {
-        this.state.active = false;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.addEventListener("focusin", (e) => {
-        this.state.active = true;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-      this.addEventListener("focusout", (e) => {
-        this.state.active = false;
-        this.observable.notify(EVENTS.STATE_CHANGED);
-      });
-    }
-    setStickyPositionStyles() {
-      let offsetTop = this.offsetTop;
-      let pageScrollYValue = window.pageYOffset;
-      if (pageScrollYValue > 0) {
-        window.scrollTo(window.scrollX, 0);
-        offsetTop = this.offsetTop;
-        window.scrollTo(window.scrollX, pageScrollYValue);
-      }
-      this.style.position = "sticky";
-      this.style.top = offsetTop + "px";
-      this.style.maxHeight = `calc(100dvh - ${offsetTop}px)`;
-    }
-    updateDataAttributes(el) {
-      let isFullCollapsible = this.config.collapsible === true;
-      if (isFullCollapsible) {
-        this.state.active ? setAttribute2(el, "data-flux-sidebar-active", "") : removeAndReleaseAttribute(el, "data-flux-sidebar-active");
-      }
-      if (this.state.viewportDesktop) {
-        removeAndReleaseAttribute(el, "data-flux-sidebar-on-mobile");
-        setAttribute2(el, "data-flux-sidebar-on-desktop", "");
-        removeAndReleaseAttribute(el, "data-flux-sidebar-collapsed-mobile");
-        if (this.state.collapsedDesktop) {
-          if (isFullCollapsible) {
-            setAttribute2(el, "data-flux-sidebar-collapsed-desktop", "");
-          }
-        } else {
-          removeAndReleaseAttribute(el, "data-flux-sidebar-collapsed-desktop");
-        }
-      } else {
-        removeAndReleaseAttribute(el, "data-flux-sidebar-on-desktop");
-        setAttribute2(el, "data-flux-sidebar-on-mobile", "");
-        removeAndReleaseAttribute(el, "data-flux-sidebar-collapsed-desktop");
-        if (this.state.collapsedMobile) {
-          setAttribute2(el, "data-flux-sidebar-collapsed-mobile", "");
-        } else {
-          removeAndReleaseAttribute(el, "data-flux-sidebar-collapsed-mobile");
-        }
-      }
-    }
-  };
-  var ViewportResizeObserver = class {
-    constructor(observable, { breakpoint }) {
-      this.observable = observable;
-      this.breakpoint = breakpoint;
-      this.watchForViewportChanges();
-    }
-    watchForViewportChanges() {
-      let breakpoint = typeof this.breakpoint === "number" ? `${this.breakpoint}px` : this.breakpoint;
-      let viewport = matchMedia(`(min-width: ${breakpoint})`);
-      viewport.matches ? this.observable.notify(EVENTS.VIEWPORT_ENTER_DESKTOP) : this.observable.notify(EVENTS.VIEWPORT_ENTER_MOBILE);
-      viewport.addEventListener("change", () => {
-        viewport.matches ? this.observable.notify(EVENTS.VIEWPORT_ENTER_DESKTOP) : this.observable.notify(EVENTS.VIEWPORT_ENTER_MOBILE);
-      });
-    }
-  };
-  var UISidebarToggle = class extends UIElement {
-    mount() {
-      let button = this.querySelector("button,ui-button");
-      on(button || this, "click", () => {
-        this.dispatchEvent(new CustomEvent("flux-sidebar-toggle", { bubbles: true }));
-      });
-      queueMicrotask(() => {
-        let sidebar = document.querySelector("ui-sidebar");
-        sidebar.updateDataAttributes(this);
-        sidebar.observable.subscribe(EVENTS.STATE_CHANGED, () => {
-          sidebar.updateDataAttributes(this);
-        });
-      });
-    }
-  };
-  element("sidebar", UISidebar);
-  element("sidebar-toggle", UISidebarToggle);
-
-  // js/slider.js
-  var UISlider = class extends UIControl {
-    boot() {
-      this.thumbs = this.querySelectorAll("[data-flux-slider-thumb]");
-      this.indicator = this.querySelector("[data-flux-slider-indicator]");
-      this.inputEls = this.querySelectorAll('input[type="range"]');
-      this.config = {
-        range: this.range(),
-        min: this.min(),
-        max: this.max(),
-        step: this.step(),
-        bigStep: this.bigStep(),
-        minStepsBetween: this.minStepsBetween(),
-        rangeStartString: this.rangeStartString(),
-        rangeEndString: this.rangeEndString()
-      };
-      this.state = {
-        onChanges: [],
-        getValue: () => {
-          return this.config.range ? [parseFloat(this.inputEls[0].value), parseFloat(this.inputEls[1].value)] : parseFloat(this.inputEls[0].value);
-        },
-        getValueAsArray: () => {
-          return this.config.range ? this.state.getValue() : [this.state.getValue()];
-        },
-        setValue: (value3) => {
-          if (this.config.range) {
-            this.inputEls[0].value = value3[0];
-            this.inputEls[1].value = value3[1];
-          } else {
-            this.inputEls[0].value = value3;
-          }
-          this.state.onChanges.forEach((i) => i(this.state.getValue()));
-        },
-        setValueInRange: (index, value3) => {
-          let newValues = [...this.state.getValue()];
-          newValues[index] = value3;
-          this.state.setValue(newValues);
-        },
-        setValueFromString: (value3) => {
-          if (this.config.range) {
-            this.state.setValue(value3.split(","));
-          } else {
-            this.state.setValue(value3);
-          }
-        },
-        increment: (index, increment) => {
-          let values = this.state.getValueAsArray();
-          if (this.config.range) {
-            values[index] = this.constrainRangeValue(index, values[index] + increment);
-            this.state.setValueInRange(index, values[index]);
-          } else {
-            this.state.setValue(clamp2(values[index] + increment, this.config.min, this.config.max));
-          }
-        },
-        onChange: (callback) => {
-          this.state.onChanges.push(callback);
-        }
-      };
-      this._controllable = new Controllable(this);
-      this._disableable = new Disableable(this);
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.state.getValue()
-      });
-      this.state.onChange((value3) => {
-        this.repositionThumbsAndIndicator();
-        this.updateTicks();
-        this._submittable.update(value3);
-        if (this.config.range) {
-          this.inputEls[0].ariaValueText = `${value3[0]} ${this.config.rangeStartString}`;
-          this.inputEls[1].ariaValueText = `${value3[1]} ${this.config.rangeEndString}`;
-        }
-      });
-      this._controllable.initial((initial) => initial && this.state.setValue(initial));
-      this._controllable.getter(() => this.state.getValue());
-      this._controllable.setter((v) => this.state.setValue(v));
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          this.inputEls.forEach((el) => el.setAttribute("disabled", ""));
-        } else {
-          this.inputEls.forEach((el) => el.removeAttribute("disabled"));
-        }
-      });
-      this.setNativeInputAttributes();
-      this.setInitialValue();
-      this.setupExtraInputIfExists();
-      this.repositionTicks();
-      this.registerNativeInputListeners();
-      this.registerPointerListeners();
-      this.registerMutationObserver();
-      new ResizeObserver(() => {
-        this.repositionThumbsAndIndicator();
-        this.repositionTicks();
-      }).observe(this);
-    }
-    trigger() {
-      return this.inputEls[0];
-    }
-    setNativeInputAttributes() {
-      for (let i = 0; i < this.inputEls.length; i++) {
-        this.inputEls[i].setAttribute("min", this.config.min);
-        this.inputEls[i].setAttribute("max", this.config.max);
-        this.inputEls[i].setAttribute("step", this.config.step);
-      }
-    }
-    setInitialValue() {
-      if (this.hasAttribute("value")) {
-        this.state.setValueFromString(this.getAttribute("value"));
-      } else {
-        this.state.setValue(this.state.getValue());
-      }
-    }
-    setupExtraInputIfExists() {
-      let extraInput = this.closest("ui-field")?.querySelector("[data-flux-input] > input");
-      if (!extraInput) return;
-      this._disableable.onInitAndChange((disabled) => {
-        if (disabled) {
-          setAttribute2(extraInput, "disabled", "");
-        } else {
-          removeAttribute(extraInput, "disabled");
-        }
-      });
-    }
-    registerNativeInputListeners() {
-      for (let i = 0; i < this.inputEls.length; i++) {
-        on(this.inputEls[i], "input", (e) => {
-          e.stopPropagation();
-        });
-        on(this.inputEls[i], "change", (e) => {
-          let value3 = parseFloat(e.target.value);
-          if (this.config.range) {
-            value3 = this.constrainRangeValue(i, value3);
-            this.state.setValueInRange(i, value3);
-          } else {
-            this.state.setValue(value3);
-          }
-          this._controllable.dispatch();
-          e.stopPropagation();
-        });
-        on(this.inputEls[i], "keydown", (e) => {
-          if (!e.shiftKey) return;
-          switch (e.key) {
-            case "ArrowUp":
-              this.state.increment(i, this.config.bigStep);
-              break;
-            case "ArrowDown":
-              this.state.increment(i, this.config.bigStep * -1);
-              break;
-            case "ArrowRight":
-              this.state.increment(i, this.config.bigStep * (isRTL() ? -1 : 1));
-              break;
-            case "ArrowLeft":
-              this.state.increment(i, this.config.bigStep * (isRTL() ? 1 : -1));
-              break;
-            default:
-              return;
-          }
-          this._controllable.dispatch();
-          e.preventDefault();
-        });
-        on(this.inputEls[i], "focus", () => this.raiseThumb(i));
-        on(this.inputEls[i], "blur", () => this.lowerThumb(i));
-      }
-    }
-    registerPointerListeners() {
-      on(this, "pointerdown", (e) => {
-        if (this._disableable.isDisabled()) return;
-        if (e.button !== 0) return;
-        let index = this.getThumbIndexFromX(e.clientX);
-        let thumbRect = this.thumbs[index].getBoundingClientRect();
-        let thumbMidpoint = thumbRect.left + thumbRect.width / 2;
-        let pointerOffset = 0;
-        if (Math.abs(e.clientX - thumbMidpoint) < thumbRect.width / 2) {
-          pointerOffset = e.clientX - thumbMidpoint;
-        }
-        let initialValues = this.state.getValueAsArray();
-        let lastValues = this.state.getValueAsArray();
-        let setValue = (e2) => {
-          let value3 = this.getValueFromX(e2.clientX - pointerOffset);
-          if (this.config.range) {
-            value3 = this.constrainRangeValue(index, value3);
-          }
-          let newValues = [...lastValues];
-          newValues[index] = value3;
-          if (lastValues.toString() !== newValues.toString()) {
-            lastValues = newValues;
-            this.config.range ? this.state.setValueInRange(index, value3) : this.state.setValue(value3);
-            this.dispatchEvent(new Event("input", {
-              bubbles: false,
-              cancelable: true
-            }));
-          }
-        };
-        setValue(e);
-        this.setPointerCapture(e.pointerId);
-        requestAnimationFrame(() => {
-          this.inputEls[index].focus();
-        });
-        document.addEventListener("pointermove", setValue);
-        document.addEventListener("pointerup", (e2) => {
-          document.removeEventListener("pointermove", setValue);
-          this.releasePointerCapture(e2.pointerId);
-          requestAnimationFrame(() => {
-            this.lowerThumb(index);
-          });
-          if (initialValues.toString() !== lastValues.toString()) {
-            this.dispatchEvent(new Event("change", {
-              bubbles: false,
-              cancelable: true
-            }));
-          }
-        }, { once: true });
-      });
-    }
-    registerMutationObserver() {
-      let observer = new MutationObserver(() => {
-        this.config.min = this.min();
-        this.config.max = this.max();
-        this.config.step = this.step();
-        this.config.bigStep = this.bigStep();
-        this.config.minStepsBetween = this.minStepsBetween();
-        this.setNativeInputAttributes();
-        this.repositionThumbsAndIndicator();
-        this.repositionTicks();
-      });
-      observer.observe(this, {
-        attributes: true,
-        attributeFilter: ["min", "max", "step", "big-step", "min-steps-between"]
-      });
-    }
-    repositionThumbsAndIndicator() {
-      if (this.config.range) {
-        let value3 = this.state.getValue();
-        let startPercentage = this.getPercentageFromValue(value3[0]);
-        let endPercentage = this.getPercentageFromValue(value3[1]);
-        this.thumbs[0].style.insetInlineStart = startPercentage + "%";
-        this.thumbs[1].style.insetInlineStart = endPercentage + "%";
-        this.indicator.style.insetInlineStart = startPercentage + "%";
-        this.indicator.style.insetInlineEnd = 100 - endPercentage + "%";
-      } else {
-        let value3 = this.state.getValue();
-        let percentage = this.getPercentageFromValue(value3);
-        this.thumbs[0].style.insetInlineStart = percentage + "%";
-        this.indicator.style.insetInlineStart = 0;
-        this.indicator.style.insetInlineEnd = 100 - percentage + "%";
-      }
-    }
-    repositionTicks() {
-      this.querySelectorAll("[data-flux-slider-tick]").forEach((tick) => {
-        let tickValue = parseFloat(tick.getAttribute("data-value"));
-        if (isNaN(tickValue)) return;
-        let percentage = this.getPercentageFromValue(tickValue);
-        setAttribute2(tick, "style", `inset-inline-start: ${percentage}%`);
-      });
-    }
-    updateTicks() {
-      let values = this.state.getValueAsArray();
-      let activeRange = this.config.range ? values : [this.state.min, values[0]];
-      this.querySelectorAll("[data-flux-slider-tick]").forEach((tick) => {
-        let tickValue = parseFloat(tick.getAttribute("data-value"));
-        if (isNaN(tickValue)) return;
-        for (let i = 0; i < values.length; i++) {
-          if (values[i] == tickValue) {
-            setAttribute2(tick, "data-current", "");
-          } else {
-            removeAttribute(tick, "data-current");
-          }
-        }
-        if (tickValue >= activeRange[0] || tickValue <= activeRange[1]) {
-          setAttribute2(tick, "data-active", "");
-        } else {
-          removeAttribute(tick, "data-active");
-        }
-      });
-    }
-    raiseThumb(index) {
-      this.thumbs[index].style.zIndex = 10;
-    }
-    lowerThumb(index) {
-      this.thumbs[index].style.zIndex = null;
-    }
-    getThumbIndexFromX(x) {
-      let closestIndex;
-      let closestDistance;
-      for (let i = 0; i < this.thumbs.length; i++) {
-        let rect = this.thumbs[i].getBoundingClientRect();
-        let midpoint = (rect.left + rect.right) / 2;
-        let distance = Math.abs(midpoint - x);
-        if (closestDistance && Math.abs(closestDistance - distance) < rect.width / 2) {
-          let trackRect = this.getBoundingClientRect();
-          let distanceFromMax = trackRect.right - rect.right;
-          if (distanceFromMax < rect.width / 4) {
-            continue;
-          }
-        }
-        if (closestDistance === void 0 || distance <= closestDistance) {
-          closestDistance = distance;
-          closestIndex = i;
-        }
-      }
-      return closestIndex;
-    }
-    getPercentageFromValue(value3) {
-      let current = value3 - this.config.min;
-      let total = this.config.max - this.config.min;
-      if (total == 0) return 0;
-      let fraction = clamp2(current / total, 0, 100);
-      let trackRect = this.getBoundingClientRect();
-      let thumbRect = this.thumbs[0].getBoundingClientRect();
-      let trackPadding = thumbRect.width / 2;
-      let width = trackRect.width - trackPadding * 2;
-      let offset3 = width * fraction + trackPadding;
-      let adjustedPercentage = offset3 / trackRect.width * 100;
-      return adjustedPercentage;
-    }
-    getValueFromX(x) {
-      let min2 = this.config.min;
-      let max2 = this.config.max;
-      let step = this.config.step;
-      let trackRect = this.getBoundingClientRect();
-      let thumbRect = this.thumbs[0].getBoundingClientRect();
-      let trackPadding = thumbRect.width / 2;
-      let trackWidth = trackRect.width - trackPadding * 2;
-      let trackLeft = trackRect.left + trackPadding;
-      let relativeX = x - trackLeft;
-      let rescaled = clamp2(relativeX / trackWidth, 0, 1);
-      rescaled = isRTL() ? 1 - rescaled : rescaled;
-      let value3 = (max2 - min2) * rescaled + min2;
-      value3 = roundValueToStep(value3, step, min2);
-      value3 = clamp2(value3, min2, max2);
-      return value3;
-    }
-    constrainRangeValue(index, value3) {
-      let newValues = [...this.state.getValue()];
-      newValues[index] = value3;
-      let stepsBetween = (newValues[1] - newValues[0]) / this.config.step;
-      if (stepsBetween < this.config.minStepsBetween) {
-        let limits = [
-          newValues[1] - this.config.minStepsBetween * this.config.step,
-          newValues[0] + this.config.minStepsBetween * this.config.step
-        ];
-        return limits[index];
-      }
-      return value3;
-    }
-    range() {
-      return this.hasAttribute("range");
-    }
-    min() {
-      return this.hasAttribute("min") ? parseFloat(this.getAttribute("min")) : 0;
-    }
-    max() {
-      return this.hasAttribute("max") ? parseFloat(this.getAttribute("max")) : 100;
-    }
-    step() {
-      if (!this.hasAttribute("step")) {
-        return 1;
-      }
-      let step = parseFloat(this.getAttribute("step"));
-      return step <= 0 || isNaN(step) ? 1 : step;
-    }
-    bigStep() {
-      if (!this.hasAttribute("big-step")) {
-        return this.step();
-      }
-      let bigStep = parseFloat(this.getAttribute("big-step"));
-      return bigStep <= 0 || isNaN(bigStep) ? this.step() : bigStep;
-    }
-    minStepsBetween() {
-      return this.hasAttribute("min-steps-between") ? parseFloat(this.getAttribute("min-steps-between")) : 0;
-    }
-    rangeStartString() {
-      return this.getAttribute("data-flux-aria-range-start") || "start range";
-    }
-    rangeEndString() {
-      return this.getAttribute("data-flux-aria-range-end") || "end range";
-    }
-  };
-  function clamp2(value3, min2, max2) {
-    return Math.min(Math.max(value3, min2), max2);
-  }
-  function roundValueToStep(value3, step, min2) {
-    let precision;
-    if (Math.abs(step) >= 1) {
-      precision = step.toString().split(".")[1]?.length || 0;
-    } else {
-      let parts = step.toExponential().split("e-");
-      let matissaDecimalPart = parts[0].split(".")[1];
-      precision = (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
-    }
-    let nearest = Math.round((value3 - min2) / step) * step + min2;
-    return Number(nearest.toFixed(precision));
-  }
-  element("slider", UISlider);
-
-  // js/switch.js
-  var UISwitch = class extends UIControl {
-    boot() {
-      let button = this;
-      this._disableable = new Disableable(this);
-      this._selectable = new Selectable(button, {
-        toggleable: true,
-        dataAttr: "data-checked",
-        ariaAttr: "aria-checked",
-        value: this.hasAttribute("value") ? this.getAttribute("value") : null,
-        label: this.hasAttribute("label") ? this.getAttribute("label") : null,
-        selectedInitially: this.hasAttribute("checked")
-      });
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.getAttribute("value") ?? "on",
-        // Default value for checkboxes...
-        includeWhenEmpty: false,
-        shouldUpdateValue: false
-      });
-      this.value = this._selectable.getValue();
-      this._detangled = detangle();
-      this._selectable.onChange(this._detangled(() => {
-        this.dispatchEvent(new Event("input", { bubbles: false, cancelable: true }));
-        this.dispatchEvent(new Event("change", { bubbles: false, cancelable: true }));
-      }));
-      setAttribute2(button, "role", "switch");
-      this._selectable.onInitAndChange(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-      this._disableable.onInitAndChange((disabled) => {
-        disabled ? removeAttribute(button, "tabindex", "0") : setAttribute2(button, "tabindex", "0");
-      });
-      on(button, "click", this._disableable.disabled((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }), { capture: true });
-      on(button, "click", this._disableable.enabled((e) => {
-        this._selectable.press();
-      }));
-      on(button, "keydown", this._disableable.enabled((e) => {
-        if (e.key === "Enter") {
-          this._selectable.press();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      on(button, "keydown", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      on(button, "keyup", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          this._selectable.press();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      respondToLabelClick2(button);
-    }
-    get checked() {
-      return this._selectable.isSelected();
-    }
-    set checked(value3) {
-      this._detangled(() => {
-        value3 ? this._selectable.select() : this._selectable.deselect();
-      })();
-    }
-  };
-  function respondToLabelClick2(el) {
-    el.closest("label")?.addEventListener("click", (e) => {
-      if (!el.contains(e.target)) {
-        el.click();
-      }
-    });
-  }
-  inject(({ css }) => css`ui-switch { display: inline-block; user-select: none; }`);
-  element("switch", UISwitch);
-
-  // js/field.js
-  var UIField = class _UIField extends UIElement {
-    mount() {
-      this.control = this.fieldWalker().find((el) => this.isControl(el));
-      if (!this.control) return;
-    }
-    associateLabelWithControl(control) {
-      if (!control) return;
-      if (!this.label) return;
-      this.control = control;
-      if (this.control.hasAttribute("aria-labelledby")) return;
-      setAttribute2(this.elOrButton(this.control), "aria-labelledby", this.label.id);
-      if (this.control && !(this.control instanceof UIControl) && this.hasAttribute("disabled")) {
-        this.control.setAttribute("disabled", "");
-      }
-    }
-    associateDescriptionWithControl(control) {
-      if (!control) return;
-      if (!this.description) return;
-      this.control = control;
-      if (this.control.hasAttribute("aria-describedby")) return;
-      setAttribute2(this.elOrButton(this.control), "aria-describedby", this.description.id);
-    }
-    associateLabel(label) {
-      this.label = label;
-      on(label, "click", (e) => {
-        if (["a", "button", "ui-button"].includes(e.target.localName)) return;
-        this.focusOrTogggle(this.control);
-      });
-      this.control && this.associateLabelWithControl(this.control);
-    }
-    associateDescription(description) {
-      this.description = description;
-      this.control && this.associateDescriptionWithControl(this.control);
-    }
-    fieldWalker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof _UIField && el !== this) return reject();
-        if (el.parentElement.localName === "ui-editor" && el !== this) return reject();
-      });
-    }
-    isControl(el) {
-      if (el instanceof UIControl) return true;
-      if (el.matches("input, textarea, select")) return true;
-      return false;
-    }
-    focusOrTogggle(control) {
-      if (!control) return;
-      if (control.disabled || control.hasAttribute("disabled")) return;
-      let isCheckable = control.localName === "input" && ["checkbox", "radio"].includes(control.type) || ["ui-switch", "ui-radio", "ui-checkbox"].includes(control.localName);
-      if (isCheckable) {
-        control.click();
-        control.focus();
-      } else if (control.localName === "input" && ["file"].includes(control.type)) {
-        control.click();
-      } else if (["ui-select", "ui-date-picker", "ui-time-picker", "ui-otp", "ui-slider"].includes(control.localName)) {
-        control.trigger()?.focus();
-      } else if (["ui-editor"].includes(control.localName)) {
-        control.focus();
-      } else if (["ui-composer"].includes(control.localName)) {
-        control.focusInput();
-      } else {
-        control.focus();
-      }
-    }
-    elOrButton(el) {
-      if (el instanceof UIElement && el.firstElementChild instanceof HTMLButtonElement) return el.firstElementChild;
-      return el;
-    }
-  };
-  var UILabel = class extends UIElement {
-    mount() {
-      assignId(this, "label");
-      setAttribute2(this, "aria-hidden", "true");
-      this.closest("ui-field")?.associateLabel(this);
-    }
-  };
-  var UIDescription = class extends UIElement {
-    mount() {
-      assignId(this, "description");
-      setAttribute2(this, "aria-hidden", "true");
-      this.closest("ui-field")?.associateDescription(this);
-    }
-  };
-  inject(({ css }) => css`
-    ui-label { display: inline-block; cursor: default; }
-    ui-description { display: block; }
-`);
-  element("field", UIField);
-  element("label", UILabel);
-  element("description", UIDescription);
-
-  // js/chart/chart.js
-  function generateChartObject(config) {
-    let scaleFns = {
-      "time": scaleTime,
-      "linear": scaleLinear,
-      "categorical": scaleCategorical
-    };
-    let dataMemoKey = Date.now();
-    let dimensionsMemoKey = Date.now();
-    let memoizedValues = {};
-    let memoize = (name, key, fn) => {
-      let memoKey = `${name}-${key}`;
-      for (let existingKey in memoizedValues) {
-        if (existingKey.startsWith(`${name}-`) && !existingKey.endsWith(String(key))) {
-          delete memoizedValues[existingKey];
-        }
-      }
-      if (!memoizedValues[memoKey]) {
-        memoizedValues[memoKey] = fn();
-      }
-      return memoizedValues[memoKey];
-    };
-    let chart = {
-      locale: config.locale,
-      data: [],
-      width: config.width,
-      height: config.height,
-      inset: config.inset,
-      axes: {
-        x: {
-          axis: "x",
-          key: config.axes.x.key,
-          format: config.axes.x.format,
-          inset: { start: 0, end: 0 },
-          position: config.axes.x.position || "bottom",
-          tickStart: config.axes.x.tickStart,
-          tickEnd: config.axes.x.tickEnd,
-          tickCount: config.axes.x.tickCount,
-          tickStep: config.axes.x.tickStep,
-          tickValues: config.axes.x.tickValues,
-          tickSuffix: config.axes.x.tickSuffix,
-          tickPrefix: config.axes.x.tickPrefix,
-          get rawValues() {
-            return memoize("x.rawValues", dataMemoKey, () => chart.data.map((d) => d[this.key]));
-          },
-          get type() {
-            return memoize("x.type", dataMemoKey, () => {
-              return config.axes.x.scale || (this.rawValues.every((v) => isDateish(v)) ? "time" : "categorical");
-            });
-          },
-          get interval() {
-            return memoize("x.interval", dataMemoKey, () => {
-              return config.axes.x.interval || "auto";
-            });
-          },
-          get values() {
-            return memoize("x.values", dataMemoKey, () => this.rawValues.map((v) => {
-              if (this.type === "time") {
-                return dateFromString(v);
-              } else if (this.type === "linear") {
-                return Number(v);
-              } else {
-                return v;
-              }
-            }));
-          },
-          get ticks() {
-            return memoize("x.ticks", dataMemoKey, () => {
-              let xTickValues = generateTickValues(chart.data, this, generateDomain(this.type, this.values));
-              let xTickLabels = generateTickLabels(xTickValues, this.type, this.format, this.tickSuffix, this.tickPrefix, this.interval, chart.locale);
-              return xTickValues.map((value3, index) => ({ value: value3, label: xTickLabels[index] }));
-            });
-          },
-          get domain() {
-            return memoize("x.domain", dataMemoKey, () => generateDomain(this.type, [...this.ticks.map((t) => t.value), ...this.values]));
-          },
-          get range() {
-            return memoize("x.range", dimensionsMemoKey, () => [chart.inset.left + this.inset.start, chart.width - chart.inset.right - this.inset.end]);
-          },
-          get scale() {
-            return memoize("x.scale", dimensionsMemoKey + dataMemoKey, () => scaleFns[this.type](this.domain, this.range, this.values));
-          }
-        },
-        y: {
-          axis: "y",
-          keys: config.axes.y.keys,
-          format: config.axes.y.format,
-          inset: { start: 0, end: 0 },
-          position: config.axes.y.position || "left",
-          tickStart: config.axes.y.tickStart,
-          tickEnd: config.axes.y.tickEnd,
-          tickCount: config.axes.y.tickCount,
-          tickStep: config.axes.y.tickStep,
-          tickValues: config.axes.y.tickValues,
-          tickSuffix: config.axes.y.tickSuffix,
-          tickPrefix: config.axes.y.tickPrefix,
-          get values() {
-            return memoize("y.values", dataMemoKey, () => chart.data.flatMap((d) => this.keys.reduce((acc, key) => {
-              if (d[key] === void 0) {
-                return acc;
-              }
-              acc.push(d[key]);
-              return acc;
-            }, [])));
-          },
-          get type() {
-            return memoize("y.type", dataMemoKey, () => {
-              return config.axes.y.scale || "linear";
-            });
-          },
-          get interval() {
-            return memoize("y.interval", dataMemoKey, () => {
-              return config.axes.y.interval || "auto";
-            });
-          },
-          get ticks() {
-            return memoize("y.ticks", dataMemoKey, () => {
-              let yTickValues = generateTickValues(chart.data, this, generateDomain(this.type, this.values));
-              let yTickLabels = generateTickLabels(yTickValues, this.type, this.format, this.tickSuffix, this.tickPrefix, this.interval, chart.locale);
-              return yTickValues.map((value3, index) => ({ value: value3, label: yTickLabels[index] }));
-            });
-          },
-          get domain() {
-            return memoize("y.domain", dataMemoKey, () => generateDomain(this.type, [...this.ticks.map((t) => t.value), ...this.values]));
-          },
-          get range() {
-            return memoize("y.range", dimensionsMemoKey, () => [chart.height - chart.inset.bottom - this.inset.end, chart.inset.top + this.inset.start]);
-          },
-          get scale() {
-            return memoize("y.scale", dimensionsMemoKey + dataMemoKey, () => scaleFns[this.type](this.domain, this.range, this.values));
-          }
-        }
-      },
-      get series() {
-        return memoize("series", dataMemoKey + dimensionsMemoKey, () => this.axes.y.keys.reduce((acc, key) => {
-          if (!chart.data[0].hasOwnProperty(key)) {
-            console.warn(`ui-chart: series field "${key}" does not exist`);
-            return acc;
-          }
-          let points = chart.data.map((datum) => ({
-            x: chart.axes.x.scale(datum[chart.axes.x.key]),
-            y: chart.axes.y.scale(datum[key]),
-            datum
-          }));
-          let series = {
-            field: key,
-            values: chart.data.map((d) => d[key]),
-            linePath(curve = "smooth") {
-              let points2 = this.points.map((p) => [p.x, p.y]);
-              return {
-                smooth: smoothX,
-                none: noCurve
-              }[curve](points2);
-            },
-            areaPath(curve = "smooth") {
-              let linePath = {
-                smooth: smoothX,
-                none: noCurve
-              }[curve](this.points.map((p) => [p.x, p.y]));
-              let areaPath = `${linePath} L${chart.axes.x.scale(chart.axes.x.domain[1])},${chart.axes.y.scale(chart.axes.y.domain[0])} L${chart.axes.x.scale(chart.axes.x.domain[0])},${chart.axes.y.scale(chart.axes.y.domain[0])} Z`;
-              return areaPath;
-            },
-            points
-          };
-          acc[key] = series;
-          return acc;
-        }, {}));
-      },
-      closestXPoint(xPosition) {
-        return this.closestXPoints(xPosition)[0];
-      },
-      closestXPoints(xPosition) {
-        return memoize("closestXPoints", dataMemoKey + dimensionsMemoKey + xPosition, () => {
-          let closestPoints = [];
-          let minDistance = Infinity;
-          Object.values(this.series).forEach((series) => {
-            let lastPoint = null;
-            series.points.forEach((point) => {
-              const distance = Math.abs(point.x - xPosition);
-              if (distance < minDistance) {
-                minDistance = distance;
-                lastPoint = point;
-              }
-            });
-            lastPoint && closestPoints.push(lastPoint);
-          });
-          return closestPoints;
-        });
-      },
-      updateDimensions(dimensions, inset) {
-        this.width = dimensions.width;
-        this.height = dimensions.height;
-        this.inset = inset;
-        dimensionsMemoKey = Date.now();
-      },
-      updateData(rawData) {
-        let data = JSON.parse(JSON.stringify(rawData));
-        if (data[0] !== void 0 && typeof data[0] !== "object") {
-          data = data.map((d, i) => {
-            return {
-              value: d
-            };
-          });
-        }
-        if (!data.every((d) => d.index)) {
-          data.forEach((d, i) => {
-            d.index = i;
-          });
-        }
-        this.data = data;
-        dataMemoKey = Date.now();
-      }
-    };
-    chart.updateData(config.data);
-    return chart;
-  }
-  function generateDomain(type, values) {
-    let deduplicatedValues = [...new Set(values)];
-    if (type === "time") {
-      return generateTimeDomain(deduplicatedValues);
-    } else if (type === "linear") {
-      deduplicatedValues.sort((a, b) => Number(a) - Number(b));
-      if (deduplicatedValues.length === 1) {
-        if (deduplicatedValues[0] === 0) {
-          return [
-            Number(deduplicatedValues[0]),
-            1
-          ];
-        } else if (deduplicatedValues[0] > 0) {
-          return [
-            0,
-            Number(deduplicatedValues[0])
-          ];
-        } else {
-          return [
-            Number(deduplicatedValues[0]),
-            0
-          ];
-        }
-      }
-      return [Number(deduplicatedValues[0]), Number(deduplicatedValues[deduplicatedValues.length - 1])];
-    } else {
-      return [
-        deduplicatedValues[0],
-        deduplicatedValues[deduplicatedValues.length - 1]
-      ];
-    }
-  }
-  function generateTickValues(data, axis, domain) {
-    let tickValues = [];
-    if (axis.type === "linear") {
-      if (axis.tickValues) {
-        return axis.tickValues;
-      }
-      let [minValue, maxValue] = domain;
-      let targetCount = axis.tickCount ? Number(axis.tickCount) : 5;
-      let tickStart = axis.tickStart === 0 || axis.tickStart === "0" ? 0 : axis.tickStart || "auto";
-      let tickEnd = axis.tickEnd === 0 || axis.tickEnd === "0" ? 0 : axis.tickEnd || "auto";
-      if (tickStart === "auto" && minValue > 0 && maxValue > 0) {
-        minValue = 0;
-      }
-      if (tickEnd !== "auto" && tickEnd !== "max" && !isNaN(Number(tickEnd))) {
-        maxValue = Number(tickEnd);
-      }
-      let interval = Number(axis.interval);
-      let niceStep;
-      if (axis.interval === "auto" || Number.isNaN(interval)) {
-        let range = maxValue - minValue;
-        let rawStep = range / (targetCount - 1);
-        let magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
-        let normalizedStep = rawStep / magnitude;
-        if (normalizedStep < 1.5) niceStep = 1;
-        else if (normalizedStep < 3) niceStep = 2;
-        else if (normalizedStep < 7) niceStep = 5;
-        else niceStep = 10;
-        niceStep *= magnitude;
-      } else {
-        niceStep = interval;
-      }
-      let start;
-      if (tickStart === "auto") {
-        start = Math.floor(minValue / niceStep) * niceStep;
-      } else if (tickStart === "min") {
-        start = minValue;
-      } else {
-        start = Number(tickStart);
-      }
-      let currentTick = start;
-      while (currentTick <= maxValue + niceStep * 0.1) {
-        if (currentTick >= minValue - niceStep * 0.1) {
-          tickValues.push(currentTick);
-        }
-        currentTick += niceStep;
-      }
-      if (tickEnd === "max") {
-        if (Math.abs(tickValues[tickValues.length - 1] - domain[1]) > niceStep * 0.1) {
-          tickValues.push(domain[1]);
-        }
-      } else if (tickEnd !== "auto" && !isNaN(Number(tickEnd))) {
-        const end = Number(tickEnd);
-        const count = tickValues.length;
-        tickValues = Array.from(
-          { length: count },
-          (_, i) => start + (end - start) * (i / (count - 1))
-        );
-      }
-      if (tickValues.length > targetCount * 2) {
-        let step = Math.ceil(tickValues.length / targetCount);
-        tickValues = tickValues.filter((_, i) => i % step === 0);
-      }
-    } else if (axis.type === "time") {
-      let [_, ticks] = generateDateFormatAndTicks(domain[0], domain[1], axis.tickCount, axis.interval);
-      return ticks;
-    } else if (axis.type === "categorical") {
-      data.forEach((datum) => {
-        let value3 = datum[axis.key];
-        tickValues.push(value3);
-      });
-      if (axis.tickCount && tickValues.length > axis.tickCount) {
-        const step = Math.ceil(tickValues.length / axis.tickCount);
-        tickValues = tickValues.filter((_, i) => i % step === 0);
-      }
-    }
-    return tickValues;
-  }
-  function generateTickLabels(tickValues, type, format, tickSuffix, tickPrefix, interval, locale) {
-    let labels = [];
-    if (type === "time") {
-      if (!format) {
-        [format] = generateDateFormatAndTicks(tickValues[0], tickValues[tickValues.length - 1], null, interval);
-      }
-      format = { ...format, timeZone: "UTC" };
-      labels = tickValues.map((value3) => new Date(value3).toLocaleString(locale, format));
-    } else if (type === "linear") {
-      if (format) labels = tickValues.map((value3) => value3.toLocaleString(locale, format));
-      else labels = tickValues.map((value3) => value3.toLocaleString(locale));
-    } else {
-      labels = tickValues.map((value3) => value3 + "");
-    }
-    if (tickPrefix) labels = labels.map((l) => tickPrefix + l);
-    if (tickSuffix) labels = labels.map((l) => l + tickSuffix);
-    return labels;
-  }
-  function scaleCategorical(domain, range, values) {
-    const uniqueValues = [...new Set(values)];
-    const step = (range[1] - range[0]) / (uniqueValues.length - 1);
-    const categoryMap = new Map(
-      uniqueValues.map((category, i) => [
-        category,
-        range[0] + i * step
-      ])
-    );
-    return function(value3) {
-      if (value3 === null || value3 === void 0) {
-        return void 0;
-      }
-      return categoryMap.get(value3);
-    };
-  }
-  function scaleLinear(domain, range) {
-    const domainDiff = domain[1] - domain[0];
-    const rangeDiff = range[1] - range[0];
-    return function(value3) {
-      return range[0] + (value3 - domain[0]) * (rangeDiff / domainDiff);
-    };
-  }
-  function smoothX(points) {
-    if (points.length < 2) return "";
-    const sign = (x) => x < 0 ? -1 : 1;
-    const calculateSlope = (x0, y0, x1, y1, x2, y2) => {
-      const h0 = x1 - x0;
-      const h1 = x2 - x1;
-      const s0 = (y1 - y0) / (h0 || h1 < 0 && -0);
-      const s1 = (y2 - y1) / (h1 || h0 < 0 && -0);
-      const p = (s0 * h1 + s1 * h0) / (h0 + h1);
-      return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;
-    };
-    const endpointSlope = (x0, y0, x1, y1, t) => {
-      const h = x1 - x0;
-      return h ? (3 * (y1 - y0) / h - t) / 2 : t;
-    };
-    let path = `M${points[0][0]},${points[0][1]}`;
-    if (points.length === 2) {
-      return path + `L${points[1][0]},${points[1][1]}`;
-    }
-    for (let i = 0; i < points.length - 2; i++) {
-      const p0 = points[i];
-      const p1 = points[i + 1];
-      if (p0[0] === p1[0] && p0[1] === p1[1]) continue;
-      const p2 = points[i + 2];
-      const t1 = calculateSlope(p0[0], p0[1], p1[0], p1[1], p2[0], p2[1]);
-      const dx = (p1[0] - p0[0]) / 3;
-      const c1x = p0[0] + dx;
-      const c1y = p0[1] + dx * (i === 0 ? endpointSlope(p0[0], p0[1], p1[0], p1[1], t1) : points[i - 1] ? calculateSlope(points[i - 1][0], points[i - 1][1], p0[0], p0[1], p1[0], p1[1]) : t1);
-      const c2x = p1[0] - dx;
-      const c2y = p1[1] - dx * t1;
-      path += `C${c1x},${c1y} ${c2x},${c2y} ${p1[0]},${p1[1]}`;
-    }
-    const n = points.length;
-    const last = points[n - 1];
-    const secondLast = points[n - 2];
-    if (!(last[0] === secondLast[0] && last[1] === secondLast[1])) {
-      const t0 = calculateSlope(
-        points[n - 3][0],
-        points[n - 3][1],
-        secondLast[0],
-        secondLast[1],
-        last[0],
-        last[1]
-      );
-      const dx = (last[0] - secondLast[0]) / 3;
-      const c1x = secondLast[0] + dx;
-      const c1y = secondLast[1] + dx * t0;
-      const c2x = last[0] - dx;
-      const c2y = last[1] - dx * endpointSlope(secondLast[0], secondLast[1], last[0], last[1], t0);
-      path += `C${c1x},${c1y} ${c2x},${c2y} ${last[0]},${last[1]}`;
-    }
-    return path;
-  }
-  function simpleCurve(points, smoothing = 0.05) {
-    if (!points || points.length < 2) return "";
-    let path = `M ${points[0][0]} ${points[0][1]}`;
-    for (let i = 1; i < points.length; i++) {
-      const current = points[i];
-      const previous = points[i - 1];
-      const prevPoint = points[i - 2] || previous;
-      const nextPoint = points[i + 1] || current;
-      const cp1x = previous[0] + (nextPoint[0] - prevPoint[0]) * smoothing;
-      const cp1y = previous[1] + (nextPoint[1] - prevPoint[1]) * smoothing;
-      const cp2x = current[0] - (nextPoint[0] - prevPoint[0]) * smoothing;
-      const cp2y = current[1] - (nextPoint[1] - prevPoint[1]) * smoothing;
-      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${current[0]} ${current[1]}`;
-    }
-    return path;
-  }
-  function noCurve(points) {
-    return simpleCurve(points, 0);
-  }
-  function isDateish(value3) {
-    return value3 instanceof Date || typeof value3 === "string" && value3.includes("-") && !isNaN(Date.parse(value3));
-  }
-  function generateTimeDomain(values) {
-    values.sort((a, b) => {
-      if (typeof a === "string") {
-        return a.localeCompare(b);
-      }
-      return a - b;
-    });
-    return [
-      dateFromString(values[0]),
-      dateFromString(values[values.length - 1])
-    ];
-  }
-  function scaleTime(domain, range) {
-    let minValue = new Date(domain[0]).getTime();
-    let maxValue = new Date(domain[1]).getTime();
-    let domainDiff = maxValue - minValue;
-    let rangeDiff = range[1] - range[0];
-    return function(value3) {
-      if (!value3) return void 0;
-      const dateValue = dateFromString(value3);
-      if (isNaN(dateValue.getTime())) return void 0;
-      const percent = (dateValue.getTime() - minValue) / domainDiff;
-      return range[0] + percent * rangeDiff;
-    };
-  }
-  function generateDateFormatAndTicks(start, end, tickCount, interval) {
-    let startDate = start;
-    let endDate = end;
-    const diffMs = endDate - startDate;
-    const diffSeconds = diffMs / 1e3;
-    const diffMinutes = diffSeconds / 60;
-    const diffHours = diffMinutes / 60;
-    const diffDays = diffHours / 24;
-    const diffMonths = diffDays / 30;
-    const diffYears = diffDays / 365;
-    let format;
-    let incrementFn;
-    let firstTick;
-    switch (interval) {
-      case "second":
-        format = { hour: "numeric", minute: "numeric", second: "numeric" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds() + 1));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate(), startDate.getUTCHours(), startDate.getUTCMinutes(), startDate.getUTCSeconds()));
-        break;
-      case "minute":
-        format = { hour: "numeric", minute: "numeric" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes() + 1));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate(), startDate.getUTCHours(), startDate.getUTCMinutes()));
-        break;
-      case "hour":
-        format = { hour: "numeric", minute: "numeric" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours() + 1));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate(), startDate.getUTCHours()));
-        break;
-      case "day":
-        format = { day: "numeric" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + 1));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()));
-        break;
-      case "week":
-        format = { day: "numeric", month: "short" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + 7));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()));
-        break;
-      case "month":
-        format = { month: "short", day: "numeric" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 1));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), 1));
-        break;
-      case "year":
-        format = { year: "numeric" };
-        incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear() + 1, 0, 1));
-        firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), 0, 1));
-        break;
-      default:
-    }
-    if (incrementFn) {
-    } else if (diffHours < 1) {
-      format = { hour: "numeric", minute: "numeric" };
-      let hourStep = tickCount ? Math.max(1, Math.floor(diffMinutes / (tickCount - 1))) : 1;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes() + hourStep));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate(), startDate.getUTCHours()));
-    } else if (diffDays < 1) {
-      format = { hour: "numeric" };
-      let hourStep = tickCount ? Math.max(1, Math.floor(diffHours / (tickCount - 1))) : 1;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours() + hourStep));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate(), 0));
-    } else if (diffDays <= 7) {
-      format = { weekday: "short", hour: "numeric" };
-      let hourStep = tickCount ? Math.max(1, Math.floor(diffHours / (tickCount - 1))) : 6;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours() + hourStep));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate(), 0));
-    } else if (diffDays <= 30) {
-      format = { month: "short", day: "numeric" };
-      let dateStep = tickCount ? Math.max(1, Math.floor(diffDays / (tickCount - 1))) : 1;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + dateStep));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()));
-    } else if (diffMonths <= 6) {
-      format = { month: "short", day: "numeric" };
-      let dateStep = tickCount ? Math.max(1, Math.floor(diffDays / (tickCount - 1))) : 7;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + dateStep));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()));
-    } else if (diffYears < 2) {
-      format = { month: "short" };
-      let monthStep = tickCount ? Math.max(1, Math.floor(diffMonths / (tickCount - 1))) : 1;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + monthStep, 1));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth()));
-    } else {
-      format = { year: "numeric" };
-      let yearStep = tickCount ? Math.max(1, Math.floor(diffYears / (tickCount - 1))) : 1;
-      incrementFn = (date) => new Date(Date.UTC(date.getUTCFullYear() + yearStep, 0, 1));
-      firstTick = new Date(Date.UTC(startDate.getUTCFullYear(), 0, 1));
-    }
-    let ticks = [startDate];
-    let currentTick = startDate;
-    while (currentTick <= endDate) {
-      currentTick = incrementFn(currentTick);
-      if (currentTick <= endDate) {
-        ticks.push(new Date(currentTick.getTime()));
-      }
-    }
-    return [format, ticks];
-  }
-  function dateFromString(value3) {
-    if (value3 instanceof Date) return value3;
-    let {
-      year,
-      month,
-      day,
-      hour,
-      minute,
-      second,
-      millisecond
-    } = parseDateString(value3);
-    return new Date(Date.UTC(year, month - 1, day, hour, minute, second, millisecond));
-  }
-  function parseDateString(dateStr) {
-    const match = dateStr.match(/^(\d{4})(?:-(\d{2}))?(?:-(\d{2}))?(?:T(\d{2}):(\d{2}):(\d{2})(?:\.(\d+))?(Z)?)?$/);
-    if (!match) {
-      throw new Error("Invalid date format");
-    }
-    return {
-      year: match[1] ? parseInt(match[1], 10) : null,
-      month: match[2] ? parseInt(match[2], 10) : null,
-      day: match[3] ? parseInt(match[3], 10) : null,
-      hour: match[4] ? parseInt(match[4], 10) : null,
-      minute: match[5] ? parseInt(match[5], 10) : null,
-      second: match[6] ? parseInt(match[6], 10) : null,
-      millisecond: match[7] ? parseInt(match[7].padEnd(3, "0"), 10) : null,
-      utc: !!match[8]
-    };
-  }
-
-  // js/chart/index.js
-  var UIChart = class extends HTMLElement {
-    constructor() {
-      super();
-      this.querySelectorAll("[data-appended]").forEach((el) => el.remove());
-      let svgTemplate = this.querySelector('template[name="svg"]');
-      let svg = hydrateTemplate(svgTemplate);
-      svgTemplate.after(svg);
-      this.init(svgTemplate, svg);
-    }
-    init(svgTemplate, svg) {
-      this._data = this.hasAttribute("value") ? JSON.parse(this.getAttribute("value")) : [];
-      let locale = this.hasAttribute("locale") ? this.getAttribute("locale") : getLocale();
-      this._observable = new Observable();
-      this._selectable = { getState: () => this._data, setState: (value3) => {
-        this._data = value3;
-        this._observable.notify("data", this._data);
-      } };
-      this._controllable = new Controllable(this);
-      this._controllable.initial((initial) => initial && this._selectable.setState(initial));
-      this._controllable.getter(() => this._selectable.getState());
-      this._controllable.setter((value3) => {
-        this._selectable.setState(value3);
-      });
-      let templates = {
-        svg: svgTemplate,
-        lines: {},
-        areas: {},
-        points: {},
-        cursor: svgTemplate.content.querySelector('template[name="cursor"]'),
-        zeroLine: svgTemplate.content.querySelector('template[name="zero-line"]'),
-        axes: {
-          x: {
-            template: svgTemplate.content.querySelector('template[name="axis"][axis="x"]'),
-            axisLine: svgTemplate.content.querySelector('template[name="axis"][axis="x"] template[name="axis-line"]'),
-            gridLine: svgTemplate.content.querySelector('template[name="axis"][axis="x"] template[name="grid-line"]'),
-            tickMark: svgTemplate.content.querySelector('template[name="axis"][axis="x"] template[name="tick-mark"]'),
-            tickLabel: svgTemplate.content.querySelector('template[name="axis"][axis="x"] template[name="tick-label"]')
-          },
-          y: {
-            template: svgTemplate.content.querySelector('template[name="axis"][axis="y"]'),
-            axisLine: svgTemplate.content.querySelector('template[name="axis"][axis="y"] template[name="axis-line"]'),
-            gridLine: svgTemplate.content.querySelector('template[name="axis"][axis="y"] template[name="grid-line"]'),
-            tickMark: svgTemplate.content.querySelector('template[name="axis"][axis="y"] template[name="tick-mark"]'),
-            tickLabel: svgTemplate.content.querySelector('template[name="axis"][axis="y"] template[name="tick-label"]')
-          }
-        },
-        tooltip: this.querySelector('template[name="tooltip"]'),
-        summary: this.querySelector('template[name="summary"]')
-      };
-      svgTemplate.content.querySelectorAll('template[name="line"]').forEach((template) => {
-        templates.lines[template.getAttribute("field")] = template;
-      });
-      svgTemplate.content.querySelectorAll('template[name="area"]').forEach((template) => {
-        templates.areas[template.getAttribute("field")] = template;
-      });
-      svgTemplate.content.querySelectorAll('template[name="point"]').forEach((template) => {
-        templates.points[template.getAttribute("field")] = template;
-      });
-      let repositionCursorLine = () => {
-      };
-      let repositionTooltip = () => {
-      };
-      let updateSummary = () => {
-      };
-      let activatePoint = () => {
-      };
-      let cursorLine = null;
-      let overlay = null;
-      let tooltip = null;
-      let summary = null;
-      overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      overlay.setAttribute("data-overlay", "");
-      overlay.setAttribute("fill", "none");
-      overlay.setAttribute("pointer-events", "all");
-      overlay.addEventListener("mousemove", throttle(function(event) {
-        repositionCursorLine(event);
-        repositionTooltip(event);
-        updateSummary(event);
-        activatePoint(event);
-      }, 1));
-      overlay.addEventListener("mouseleave", () => {
-        repositionCursorLine(null);
-        repositionTooltip(null);
-        updateSummary(null);
-        activatePoint(null);
-      });
-      svg.appendChild(overlay);
-      if (templates.cursor) {
-        cursorLine = hydrateSvgTemplate(templates.cursor);
-        cursorLine.setAttribute("data-cursor", "");
-        svg.appendChild(cursorLine);
-      }
-      if (templates.tooltip) {
-        tooltip = hydrateTemplate(templates.tooltip);
-        templates.tooltip.after(tooltip);
-      }
-      if (templates.summary) {
-        summary = hydrateTemplate(templates.summary);
-        templates.summary.after(summary);
-      }
-      let gutter = { left: 8, right: 8, top: 8, bottom: 8 };
-      if (templates.svg?.hasAttribute("gutter")) {
-        let values = templates.svg?.getAttribute("gutter").split(" ").map((i) => i.replace("px", "")).map(Number);
-        if (values.length === 1) {
-          gutter.top = values[0];
-          gutter.right = values[0];
-          gutter.bottom = values[0];
-          gutter.left = values[0];
-        } else if (values.length === 2) {
-          gutter.top = values[0];
-          gutter.right = values[1];
-          gutter.bottom = values[0];
-          gutter.left = values[1];
-        } else if (values.length === 3) {
-          gutter.top = values[0];
-          gutter.right = values[1];
-          gutter.bottom = values[2];
-          gutter.left = values[1];
-        } else if (values.length === 4) {
-          gutter.top = values[0];
-          gutter.right = values[1];
-          gutter.bottom = values[2];
-          gutter.left = values[3];
-        }
-      }
-      let [xKey, yKeys] = discoverXandYKeys(svg);
-      let chart = generateChartObject({
-        locale,
-        data: this._data,
-        width: svg.parentElement.getBoundingClientRect().width,
-        height: svg.parentElement.getBoundingClientRect().height,
-        inset: {
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0
-        },
-        axes: {
-          x: {
-            key: xKey,
-            format: templates.axes.x.template?.hasAttribute("format") ? JSON.parse(templates.axes.x.template?.getAttribute("format")) : null,
-            scale: templates.axes.x.template?.getAttribute("scale"),
-            interval: templates.axes.x.template?.getAttribute("interval"),
-            position: templates.axes.x.template?.getAttribute("position"),
-            tickCount: templates.axes.x.template?.getAttribute("tick-count") || templates.axes.x.tickLabel?.getAttribute("target-tick-count"),
-            tickStart: templates.axes.x.template?.getAttribute("tick-start"),
-            tickEnd: templates.axes.x.template?.getAttribute("tick-end"),
-            tickStep: templates.axes.x.template?.getAttribute("tick-step") ? Number(templates.axes.x.template?.getAttribute("tick-step")) : null,
-            tickSuffix: templates.axes.x.template?.getAttribute("tick-suffix"),
-            tickPrefix: templates.axes.x.template?.getAttribute("tick-prefix"),
-            tickValues: templates.axes.x.template?.hasAttribute("tick-values") ? JSON.parse(templates.axes.x.template?.getAttribute("tick-values")) : null
-          },
-          y: {
-            keys: yKeys,
-            format: templates.axes.y.template?.hasAttribute("format") ? JSON.parse(templates.axes.y.template?.getAttribute("format")) : null,
-            scale: templates.axes.y.template?.getAttribute("scale"),
-            interval: templates.axes.y.template?.getAttribute("interval"),
-            position: templates.axes.y.template?.getAttribute("position"),
-            tickCount: templates.axes.y.template?.getAttribute("tick-count") || templates.axes.y.tickLabel?.getAttribute("target-tick-count"),
-            tickStart: templates.axes.y.template?.getAttribute("tick-start"),
-            tickEnd: templates.axes.y.template?.getAttribute("tick-end"),
-            tickStep: templates.axes.y.template?.getAttribute("tick-step") ? Number(templates.axes.y.template?.getAttribute("tick-step")) : null,
-            tickSuffix: templates.axes.y.template?.getAttribute("tick-suffix"),
-            tickPrefix: templates.axes.y.template?.getAttribute("tick-prefix"),
-            tickValues: templates.axes.y.template?.hasAttribute("tick-values") ? JSON.parse(templates.axes.y.template?.getAttribute("tick-values")) : null
-          }
-        }
-      });
-      let redraw = (checkOverflow = true) => {
-        setAttribute2(svg, "viewBox", `0 0 ${chart.width} ${chart.height}`);
-        if (chart.data.length === 0) {
-          return;
-        }
-        if (chart.data.length === 1) {
-          console.warn("ui-chart: chart only has one data point so it cannot be rendered.");
-          return;
-        }
-        if (chart.data[0][chart.axes.x.key] === void 0) {
-          console.warn(`ui-chart: axis field "${chart.axes.x.key}" does not exist`);
-          return;
-        }
-        Object.entries(chart.series).forEach(([field, series]) => {
-          let line = svg.querySelector(`[data-line][data-series="${field}"]`);
-          let template = templates.lines[field];
-          if (template) {
-            let curve = template.getAttribute("curve") || "smooth";
-            if (!line) {
-              let lineEl = hydrateSvgTemplate(template);
-              lineEl.setAttribute("data-line", "");
-              lineEl.setAttribute("data-series", field);
-              lineEl.setAttribute("d", series.linePath(curve));
-              svg.appendChild(lineEl);
-            } else {
-              line.setAttribute("d", series.linePath(curve));
-            }
-          }
-        });
-        Object.entries(chart.series).forEach(([field, series]) => {
-          let area = svg.querySelector(`[data-area][data-series="${field}"]`);
-          let template = templates.areas[field];
-          if (template) {
-            let curve = template.getAttribute("curve") || "smooth";
-            if (!area) {
-              let areaEl = hydrateSvgTemplate(template);
-              areaEl.setAttribute("data-area", "");
-              areaEl.setAttribute("data-series", field);
-              areaEl.setAttribute("d", series.areaPath(curve));
-              svg.appendChild(areaEl);
-            } else {
-              area.setAttribute("d", series.areaPath(curve));
-            }
-          }
-        });
-        Object.entries(chart.series).forEach(([field, series]) => {
-          let pointGroupEl = svg.querySelector(`[data-point-group][data-series="${field}"]`);
-          let template = templates.points[field];
-          if (template) {
-            svg.querySelector(`[data-point-group][data-series="${field}"]`)?.remove();
-            pointGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            pointGroupEl.setAttribute("data-point-group", "");
-            pointGroupEl.setAttribute("data-series", field);
-            series.points.forEach((point) => {
-              let pointEl = hydrateSvgTemplate(template);
-              pointEl.setAttribute("data-point", "");
-              pointEl.setAttribute("data-series", field);
-              pointEl.setAttribute("cx", point.x);
-              pointEl.setAttribute("cy", point.y);
-              pointGroupEl.appendChild(pointEl);
-            });
-            svg.appendChild(pointGroupEl);
-          }
-        });
-        activatePoint = (event) => {
-          svg.querySelectorAll("[data-point-group]").forEach((pointGroupEl) => {
-            pointGroupEl.querySelectorAll("[data-point]").forEach((i) => i.removeAttribute("data-active"));
-            if (event) {
-              let mouseX = event.clientX - svg.getBoundingClientRect().left;
-              let mouseY = event.clientY - svg.getBoundingClientRect().top;
-              if (mouseX >= chart.inset.left && mouseX <= chart.width - chart.inset.right && mouseY >= chart.inset.top && mouseY <= chart.height - chart.inset.bottom) {
-                let closestPoints = chart.closestXPoints(mouseX);
-                closestPoints.forEach((point) => {
-                  pointGroupEl.querySelectorAll(`[data-point][cx="${point.x}"]`).forEach((i) => i.setAttribute("data-active", ""));
-                });
-              }
-            } else {
-              pointGroupEl.querySelectorAll("[data-point]").forEach((i) => i.removeAttribute("data-active"));
-            }
-          });
-        };
-        if (templates.axes.x.template) {
-          if (templates.axes.x.axisLine) {
-            svg.querySelector('[data-axis-line][data-axis="x"]')?.remove();
-            let axisLineEl = hydrateSvgTemplate(templates.axes.x.axisLine);
-            axisLineEl.setAttribute("data-axis-line", "");
-            axisLineEl.setAttribute("data-axis", "x");
-            axisLineEl.setAttribute("x1", chart.axes.x.scale(chart.axes.x.domain[0]));
-            axisLineEl.setAttribute("x2", chart.axes.x.scale(chart.axes.x.domain[1]));
-            axisLineEl.setAttribute("y1", chart.axes.y.scale(chart.axes.y.domain[chart.axes.x.position === "bottom" ? 0 : 1]));
-            axisLineEl.setAttribute("y2", chart.axes.y.scale(chart.axes.y.domain[chart.axes.x.position === "bottom" ? 0 : 1]));
-            svg.appendChild(axisLineEl);
-          }
-          if (templates.axes.x.gridLine) {
-            svg.querySelector('[data-grid-line-group][data-axis="x"]')?.remove();
-            let gridLineGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            gridLineGroupEl.setAttribute("data-grid-line-group", "");
-            gridLineGroupEl.setAttribute("data-axis", "x");
-            chart.axes.x.ticks.forEach(({ value: value3 }) => {
-              let gridLineEl = hydrateSvgTemplate(templates.axes.x.gridLine);
-              gridLineEl.setAttribute("data-grid-line", "");
-              gridLineEl.setAttribute("data-axis", "x");
-              gridLineEl.setAttribute("x1", chart.axes.x.scale(value3));
-              gridLineEl.setAttribute("x2", chart.axes.x.scale(value3));
-              gridLineEl.setAttribute("y1", chart.inset.top);
-              gridLineEl.setAttribute("y2", chart.height - chart.inset.bottom);
-              gridLineGroupEl.appendChild(gridLineEl);
-            });
-            svg.appendChild(gridLineGroupEl);
-          }
-          if (templates.axes.x.tickMark) {
-            svg.querySelector('[data-tick-mark-group][data-axis="x"]')?.remove();
-            let tickMarkGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            tickMarkGroupEl.setAttribute("data-tick-mark-group", "");
-            tickMarkGroupEl.setAttribute("data-axis", "x");
-            chart.axes.x.ticks.forEach(({ value: value3, label }) => {
-              let position = { x: chart.axes.x.scale(value3), y: chart.axes.y.scale(chart.axes.y.domain[chart.axes.x.position === "bottom" ? 0 : 1]) };
-              let tickMarkEl = hydrateSvgTemplate(templates.axes.x.tickMark);
-              tickMarkEl.setAttribute("data-tick-mark", "");
-              tickMarkEl.setAttribute("data-axis", "x");
-              tickMarkEl.setAttribute("transform", `translate(${position.x}, ${position.y})`);
-              tickMarkGroupEl.appendChild(tickMarkEl);
-            });
-            svg.appendChild(tickMarkGroupEl);
-          }
-          if (templates.axes.x.tickLabel) {
-            svg.querySelector('[data-tick-label-group][data-axis="x"]')?.remove();
-            let tickLabelGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            tickLabelGroupEl.setAttribute("data-tick-label-group", "");
-            tickLabelGroupEl.setAttribute("data-axis", "x");
-            chart.axes.x.ticks.forEach(({ value: value3, label }) => {
-              let position = { x: chart.axes.x.scale(value3), y: chart.axes.y.scale(chart.axes.y.domain[chart.axes.x.position === "bottom" ? 0 : 1]) };
-              let tickLabelEl = hydrateSvgTemplate(templates.axes.x.tickLabel);
-              tickLabelEl.querySelectorAll("slot").forEach((i) => i.replaceWith(document.createTextNode(label)));
-              tickLabelEl.setAttribute("data-tick-label", "");
-              tickLabelEl.setAttribute("data-axis", "x");
-              tickLabelEl.setAttribute("transform", `translate(${position.x}, ${position.y})`);
-              tickLabelGroupEl.appendChild(tickLabelEl);
-            });
-            svg.appendChild(tickLabelGroupEl);
-            handleTickOverflow(tickLabelGroupEl, chart.axes.x);
-          }
-        }
-        if (templates.axes.y.template) {
-          if (templates.axes.y.axisLine) {
-            svg.querySelector('[data-axis-line][data-axis="y"]')?.remove();
-            let axisLineEl = hydrateSvgTemplate(templates.axes.y.axisLine);
-            axisLineEl.setAttribute("data-axis-line", "");
-            axisLineEl.setAttribute("data-axis", "y");
-            axisLineEl.setAttribute("x1", chart.axes.x.scale(chart.axes.x.domain[chart.axes.y.position === "left" ? 0 : 1]));
-            axisLineEl.setAttribute("x2", chart.axes.x.scale(chart.axes.x.domain[chart.axes.y.position === "left" ? 0 : 1]));
-            axisLineEl.setAttribute("y1", chart.axes.y.scale(chart.axes.y.domain[0]));
-            axisLineEl.setAttribute("y2", chart.axes.y.scale(chart.axes.y.domain[1]));
-            svg.appendChild(axisLineEl);
-          }
-          if (templates.axes.y.gridLine) {
-            svg.querySelector('[data-grid-line-group][data-axis="y"]')?.remove();
-            let gridLineGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            gridLineGroupEl.setAttribute("data-grid-line-group", "");
-            gridLineGroupEl.setAttribute("data-axis", "y");
-            chart.axes.y.ticks.forEach(({ value: value3, label }) => {
-              let position = { x: chart.axes.x.scale(chart.axes.x.domain[0]), y: chart.axes.y.scale(value3) };
-              let gridLineEl = hydrateSvgTemplate(templates.axes.y.gridLine);
-              gridLineEl.setAttribute("data-grid-line", "");
-              gridLineEl.setAttribute("data-axis", "y");
-              gridLineEl.setAttribute("x1", chart.inset.left);
-              gridLineEl.setAttribute("x2", chart.width - chart.inset.right);
-              gridLineEl.setAttribute("y1", position.y);
-              gridLineEl.setAttribute("y2", position.y);
-              gridLineGroupEl.appendChild(gridLineEl);
-            });
-            svg.appendChild(gridLineGroupEl);
-          }
-          if (templates.axes.y.tickMark) {
-            svg.querySelector('[data-tick-mark-group][data-axis="y"]')?.remove();
-            let tickMarkGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            tickMarkGroupEl.setAttribute("data-tick-mark-group", "");
-            tickMarkGroupEl.setAttribute("data-axis", "y");
-            chart.axes.y.ticks.forEach(({ value: value3, label }) => {
-              let position = { x: chart.axes.x.scale(chart.axes.x.domain[chart.axes.y.position === "left" ? 0 : 1]), y: chart.axes.y.scale(value3) };
-              let tickMarkEl = hydrateSvgTemplate(templates.axes.y.tickMark);
-              tickMarkEl.setAttribute("data-tick-mark", "");
-              tickMarkEl.setAttribute("data-axis", "y");
-              tickMarkEl.setAttribute("transform", `translate(${position.x}, ${position.y})`);
-              tickMarkGroupEl.appendChild(tickMarkEl);
-            });
-            svg.appendChild(tickMarkGroupEl);
-          }
-          if (templates.axes.y.tickLabel) {
-            svg.querySelector('[data-tick-label-group][data-axis="y"]')?.remove();
-            let tickLabelGroupEl = document.createElementNS("http://www.w3.org/2000/svg", "g");
-            tickLabelGroupEl.setAttribute("data-tick-label-group", "");
-            tickLabelGroupEl.setAttribute("data-axis", "y");
-            chart.axes.y.ticks.forEach(({ value: value3, label }) => {
-              let position = { x: chart.axes.x.scale(chart.axes.x.domain[chart.axes.y.position === "left" ? 0 : 1]), y: chart.axes.y.scale(value3) };
-              let tickLabelEl = hydrateSvgTemplate(templates.axes.y.tickLabel);
-              tickLabelEl.querySelectorAll("slot").forEach((i) => i.replaceWith(document.createTextNode(label)));
-              tickLabelEl.setAttribute("data-tick-label", "");
-              tickLabelEl.setAttribute("data-axis", "y");
-              tickLabelEl.setAttribute("transform", `translate(${position.x}, ${position.y})`);
-              tickLabelGroupEl.appendChild(tickLabelEl);
-            });
-            svg.appendChild(tickLabelGroupEl);
-            handleTickOverflow(tickLabelGroupEl, chart.axes.y);
-          }
-        }
-        if (templates.zeroLine && chart.axes.y.domain[0] < 0 && chart.axes.y.domain[1] > 0) {
-          svg.querySelector('[data-zero-line][data-axis="y"]')?.remove();
-          let zeroLineEl = hydrateSvgTemplate(templates.zeroLine);
-          zeroLineEl.setAttribute("data-zero-line", "");
-          zeroLineEl.setAttribute("data-axis", "y");
-          zeroLineEl.setAttribute("x1", chart.axes.x.scale(chart.axes.x.domain[0]));
-          zeroLineEl.setAttribute("x2", chart.axes.x.scale(chart.axes.x.domain[1]));
-          zeroLineEl.setAttribute("y1", chart.axes.y.scale(0));
-          zeroLineEl.setAttribute("y2", chart.axes.y.scale(0));
-          svg.appendChild(zeroLineEl);
-        }
-        if (overlay) {
-          overlay.setAttribute("width", chart.width);
-          overlay.setAttribute("height", chart.height);
-          overlay.setAttribute("x", 0);
-          overlay.setAttribute("y", 0);
-        }
-        if (cursorLine) {
-          repositionCursorLine = (event) => {
-            if (event) {
-              let mouseX = event.clientX - svg.getBoundingClientRect().left;
-              let mouseY = event.clientY - svg.getBoundingClientRect().top;
-              if (mouseX >= chart.inset.left && mouseX <= chart.width - chart.inset.right && mouseY >= chart.inset.top && mouseY <= chart.height - chart.inset.bottom) {
-                let closestXPoint = chart.closestXPoint(mouseX);
-                cursorLine.setAttribute("opacity", "1");
-                cursorLine.setAttribute("x1", closestXPoint.x);
-                cursorLine.setAttribute("x2", closestXPoint.x);
-                cursorLine.setAttribute("y1", chart.axes.y.scale(chart.axes.y.domain[0]));
-                cursorLine.setAttribute("y2", chart.axes.y.scale(chart.axes.y.domain[1]));
-              } else {
-                cursorLine.setAttribute("opacity", "0");
-              }
-            } else {
-              cursorLine.setAttribute("opacity", "0");
-            }
-          };
-        }
-        if (tooltip) {
-          repositionTooltip = (event) => {
-            if (event === null) {
-              removeAttribute(tooltip, "data-active");
-            } else {
-              let mouseX = event.clientX - svg.getBoundingClientRect().left;
-              let mouseY = event.clientY - svg.getBoundingClientRect().top;
-              if (mouseX >= chart.inset.left && mouseX <= chart.width - chart.inset.right && mouseY >= chart.inset.top && mouseY <= chart.height - chart.inset.bottom) {
-                let closestXPoint = chart.closestXPoint(mouseX);
-                if (closestXPoint) {
-                  setAttribute2(tooltip, "data-active", "");
-                  let tooltipRect = tooltip.getBoundingClientRect();
-                  let svgRect = svg.getBoundingClientRect();
-                  let rightSpace = svgRect.width - (closestXPoint.x + tooltipRect.width + 15);
-                  let bottomSpace = svgRect.height - (mouseY + tooltipRect.height + 15);
-                  let xOffset = rightSpace < 0 ? closestXPoint.x - tooltipRect.width - 15 : closestXPoint.x + 15;
-                  let yOffset = bottomSpace < 0 ? mouseY - tooltipRect.height - 15 : mouseY + 15;
-                  tooltip.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
-                  let tooltipClone = templates.tooltip.content.cloneNode(true).firstElementChild;
-                  tooltipClone.querySelectorAll("slot").forEach((slot) => {
-                    let field = slot.getAttribute("field");
-                    if (field) {
-                      let format = slot.hasAttribute("format") ? JSON.parse(slot.getAttribute("format")) : null;
-                      let value3 = closestXPoint.datum[field];
-                      if (format === null) return slot.textContent = value3;
-                      format = { ...format, timeZone: "UTC" };
-                      if (isNumeric(value3)) {
-                        value3 = Number(value3).toLocaleString(chart.locale, format);
-                      } else if (isDateish2(value3)) {
-                        value3 = new Date(value3).toLocaleDateString(chart.locale, format);
-                      }
-                      slot.textContent = value3;
-                    }
-                  });
-                  tooltip.innerHTML = tooltipClone.innerHTML;
-                } else {
-                  removeAttribute(tooltip, "data-active");
-                }
-              } else {
-                removeAttribute(tooltip, "data-active");
-              }
-            }
-          };
-        }
-        if (summary) {
-          updateSummary = (event) => {
-            let closestXPoint = null;
-            if (event !== null) {
-              let mouseX = event.clientX - svg.getBoundingClientRect().left;
-              let mouseY = event.clientY - svg.getBoundingClientRect().top;
-              if (mouseX >= chart.inset.left && mouseX <= chart.width - chart.inset.right && mouseY >= chart.inset.top && mouseY <= chart.height - chart.inset.bottom) {
-                closestXPoint = chart.closestXPoint(mouseX);
-              }
-            }
-            closestXPoint = closestXPoint || chart.closestXPoint(chart.axes.x.range[1]);
-            if (closestXPoint) {
-              let summaryClone = templates.summary.content.cloneNode(true).firstElementChild;
-              summaryClone.querySelectorAll("slot").forEach((slot) => {
-                let field = slot.getAttribute("field");
-                if (field) {
-                  let format = slot.hasAttribute("format") ? JSON.parse(slot.getAttribute("format")) : {};
-                  format = { ...format, timeZone: "UTC" };
-                  let value3 = slot.hasAttribute("fallback") && event === null ? slot.getAttribute("fallback") : closestXPoint.datum[field];
-                  if (isNumeric(value3)) {
-                    value3 = Number(value3).toLocaleString(chart.locale, format);
-                  } else if (isDateish2(value3)) {
-                    value3 = new Date(value3).toLocaleString(chart.locale, format);
-                  }
-                  slot.textContent = value3;
-                }
-              });
-              summary.innerHTML = summaryClone.innerHTML;
-            }
-          };
-          updateSummary(null);
-        }
-        svg.appendChild(overlay);
-        svg.querySelectorAll("[data-grid-line-group]").forEach((i) => overlay.before(i));
-        svg.querySelectorAll("[data-axis-line]").forEach((i) => overlay.before(i));
-        svg.querySelectorAll("[data-zero-line]").forEach((i) => overlay.before(i));
-        svg.querySelectorAll("[data-area]").forEach((i) => overlay.before(i));
-        svg.querySelectorAll("[data-line]").forEach((i) => overlay.before(i));
-        svg.querySelectorAll("[data-cursor]").forEach((i) => overlay.before(i));
-        svg.querySelectorAll("[data-point-group]").forEach((i) => overlay.before(i));
-        if (checkOverflow) {
-          let overflow = getSvgOverflow(svg);
-          chart.updateDimensions({ width: chart.width, height: chart.height }, {
-            left: gutter.left + overflow.left,
-            right: gutter.right + overflow.right,
-            top: gutter.top + overflow.top,
-            bottom: gutter.bottom + overflow.bottom
-          });
-          redraw(false);
-        }
-      };
-      this._observable.subscribe("resize", () => {
-        chart.updateDimensions({
-          width: svg.parentElement.getBoundingClientRect().width,
-          height: svg.parentElement.getBoundingClientRect().height
-        }, {
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0
-        });
-        redraw();
-      });
-      this._observable.subscribe("data", () => {
-        chart.updateData(this._data);
-        chart.updateDimensions({ width: chart.width, height: chart.height }, {
-          left: 0,
-          right: 0,
-          top: 0,
-          bottom: 0
-        });
-        redraw();
-      });
-      new ResizeObserver(() => {
-        this._observable.notify("resize");
-      }).observe(this);
-      new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName !== "value") return;
-          this._selectable.setState(this.hasAttribute("value") ? JSON.parse(this.getAttribute("value")) : []);
-        });
-      }).observe(this, { attributes: true, attributeFilter: ["value"] });
-    }
-  };
-  customElements.define("ui-chart", UIChart);
-  function discoverXandYKeys(svg) {
-    let xKey = null;
-    let yKeys = [];
-    svg.querySelectorAll('template[name="line"], template[name="area"], template[name="point"]').forEach((template) => {
-      yKeys.push(template.getAttribute("field") || "value");
-    });
-    svg.querySelectorAll('template[name="axis"][axis="x"]').forEach((template) => {
-      xKey = template.getAttribute("field") || "index";
-    });
-    yKeys = Array.from(new Set(yKeys));
-    if (xKey === null) xKey = "index";
-    if (yKeys.length === 0) yKeys = ["value"];
-    return [xKey, yKeys];
-  }
-  function hydrateSvgTemplate(template) {
-    let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svg.setAttribute("version", "1.1");
-    svg.innerHTML = template.innerHTML;
-    return svg.firstElementChild;
-  }
-  function handleTickOverflow(tickLabelGroupEl, axis) {
-    if (!hasOverlappingTicks(tickLabelGroupEl, axis)) return;
-    if (axis.axis === "x" && axis.type === "categorical") {
-      rotateTickLabels(tickLabelGroupEl);
-    } else if (axis.axis === "x" && axis.type === "time") {
-      let undo = hideEveryOtherTickLabel(tickLabelGroupEl);
-      if (!hasOverlappingTicks(tickLabelGroupEl, axis)) return;
-      undo();
-      onlyShowFirstAndLastTickLabel(tickLabelGroupEl);
-    }
-  }
-  function hasOverlappingTicks(tickLabelGroupEl, axis) {
-    let children = Array.from(tickLabelGroupEl.children);
-    children = children.filter((child) => {
-      return child.style.display != "none";
-    });
-    for (let i = 0; i < children.length; i++) {
-      let tickLabelEl = children[i];
-      let nextTickLabelEl = children[i + 1];
-      if (!nextTickLabelEl) break;
-      let tickLabelRect = tickLabelEl.getBoundingClientRect();
-      let nextTickLabelRect = nextTickLabelEl.getBoundingClientRect();
-      let overlapMargin = 20;
-      if (axis.axis === "y") {
-        if (tickLabelRect.bottom + overlapMargin < nextTickLabelRect.top) {
-          return true;
-        }
-      } else {
-        if (tickLabelRect.right + overlapMargin > nextTickLabelRect.left) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  function rotateTickLabels(tickLabelGroupEl) {
-    let undos = [];
-    Array.from(tickLabelGroupEl.children).forEach((child, index) => {
-      let textNode = child.matches("text") ? child : child.querySelector("text");
-      Array.from(tickLabelGroupEl.children).forEach((child2, index2) => {
-        let textNode2 = child2.matches("text") ? child2 : child2.querySelector("text");
-        if (textNode2) {
-          textNode2.style.transform = "rotate(-45deg)";
-          textNode2.style.textAnchor = "end";
-          undos.push(() => {
-            textNode2.style.transform = null;
-            textNode2.style.textAnchor = null;
-          });
-        }
-      });
-    });
-    return () => undos.forEach((undo) => undo());
-  }
-  function hideEveryOtherTickLabel(tickLabelGroupEl) {
-    let children = Array.from(tickLabelGroupEl.children);
-    children.forEach((child, index) => {
-      if (index % 2 === 1) child.style.display = "none";
-    });
-    return () => children.forEach((child, index) => {
-      child.style.display = "inline";
-    });
-  }
-  function onlyShowFirstAndLastTickLabel(tickLabelGroupEl) {
-    let children = Array.from(tickLabelGroupEl.children);
-    children.forEach((child, index) => {
-      child.style.display = "none";
-    });
-    let firstChild = children[0];
-    let lastChild = children[children.length - 1];
-    let firstTextNode = firstChild.matches("text") ? firstChild : firstChild.querySelector("text");
-    let lastTextNode = lastChild.matches("text") ? lastChild : lastChild.querySelector("text");
-    firstChild.style.display = "inline";
-    firstTextNode.style.textAnchor = "start";
-    lastChild.style.display = "inline";
-    lastTextNode.style.textAnchor = "end";
-    return () => children.forEach((child, index) => {
-      child.style.display = "inline";
-    });
-  }
-  function isNumeric(value3) {
-    return typeof value3 === "number" || typeof value3 === "string" && !isNaN(Number(value3));
-  }
-  function isDateish2(value3) {
-    return value3 instanceof Date || typeof value3 === "string" && !isNaN(Date.parse(value3));
-  }
-  function getSvgOverflow(svg) {
-    let svgRect = svg.getBoundingClientRect();
-    let contentRect = { top: Infinity, right: -Infinity, bottom: -Infinity, left: Infinity };
-    Array.from(svg.children).forEach((el) => {
-      if (el.hasAttribute("data-overlay")) return;
-      if (el.style.display === "none") return;
-      let rect = el.getBoundingClientRect();
-      if (!rect.width && !rect.height) return;
-      contentRect.top = Math.min(contentRect.top, rect.top);
-      contentRect.right = Math.max(contentRect.right, rect.right);
-      contentRect.bottom = Math.max(contentRect.bottom, rect.bottom);
-      contentRect.left = Math.min(contentRect.left, rect.left);
-    });
-    return {
-      top: Math.max(0, svgRect.top - contentRect.top),
-      right: Math.max(0, contentRect.right - svgRect.right),
-      bottom: Math.max(0, contentRect.bottom - svgRect.bottom),
-      left: Math.max(0, svgRect.left - contentRect.left)
-    };
-  }
-
-  // js/button.js
-  var UIButton = class extends UIElement {
-    boot() {
-      setAttribute2(this, "role", "button");
-      this._disableable = new Disableable(this);
-      this._disableable.onInitAndChange((disabled) => {
-        disabled ? removeAttribute(this, "tabindex", "0") : setAttribute2(this, "tabindex", "0");
-      });
-      this._buttonType = this.getAttribute("type") || "button";
-    }
-    mount() {
-      on(this, "keydown", (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          this.disabled || this.click();
-        }
-        if (e.key === " ") {
-          e.preventDefault();
-        }
-      });
-      on(this, "keyup", (e) => {
-        if (e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-          this.disabled || this.click();
-        }
-      });
-      on(this, "click", () => {
-        if (this.disabled) return;
-        if (this._buttonType === "submit") {
-          this._handleSubmit();
-        } else if (this._buttonType === "reset") {
-          this._handleReset();
-        }
-      });
-    }
-    _handleSubmit() {
-      let form = this.closest("form");
-      if (form) {
-        form.requestSubmit();
-      }
-    }
-    _handleReset() {
-      let form = this.closest("form");
-      if (form) {
-        form.reset();
-      }
-    }
-  };
-  inject(({ css }) => css`ui-button { display: block; }`);
-  element("button", UIButton);
-
-  // js/close.js
-  var UIClose = class extends UIElement {
-    mount() {
-      let button = this.querySelector("button,ui-button");
-      on(button, "click", () => {
-        let closeable = closest(this, (el) => !!el._closeable)?._closeable;
-        closeable?.close();
-      });
-    }
-  };
-  element("close", UIClose);
-
-  // js/toast.js
-  var UIToastGroup = class extends UIElement {
-    toasts = [];
-    initiallyExpanded = false;
-    expanded = false;
-    mount() {
-      this.initiallyExpanded = this.hasAttribute("expanded");
-      let position = this.getAttribute("position") || "bottom right";
-      this.verticalPosition = position.match(/\b(top|bottom)\b/)?.[0] || "bottom";
-      this.horizontalPosition = position.match(/\b(left|start|center|right|end)\b/)?.[0] || "right";
-      if (this.horizontalPosition === "left") {
-        this.horizontalPosition = "start";
-      } else if (this.horizontalPosition === "right") {
-        this.horizontalPosition = "end";
-      }
-      setAttribute2(this, "role", "status");
-    }
-    showToast(options = {}) {
-      let toastContainer = this.querySelector("ui-toast");
-      if (!toastContainer) {
-        return console.warn("ui-toast-group: no ui-toast element found", this);
-      }
-      if (this.matches(":popover-open")) {
-        this.hidePopover();
-      }
-      this.showPopover();
-      let duration = Number(options.duration === void 0 ? 5e3 : options.duration);
-      let template = toastContainer.prepareToastTemplate(options);
-      let toastEl = template.firstElementChild;
-      let toast = {
-        timeout: null,
-        el: template,
-        height: null,
-        contentEl: toastEl,
-        contentHeight: null
-      };
-      let show = () => {
-        this.animateIn(toast);
-        this.updateList();
-      };
-      let hide2 = () => {
-        this.animateOut(toast);
-        this.updateList();
-      };
-      this.toasts.unshift(toast);
-      this.appendChild(template);
-      show();
-      template.hideToast = hide2;
-      let toastTimeout = duration !== 0 && timeout(() => {
-        toast.timeout = null;
-        hide2();
-      }, duration);
-      if (toastTimeout) {
-        toast.timeout = toastTimeout;
-      }
-      template.destroyToast = () => {
-        if (toast.timeout) {
-          toast.timeout.cancel();
-          toast.timeout = null;
-        }
-        let index = this.toasts.indexOf(toast);
-        if (index > -1) {
-          this.toasts.splice(index, 1);
-        }
-        template.remove();
-        this.updateList();
-      };
-      template.addEventListener("mouseenter", () => {
-        this.pauseTimeouts();
-        if (!this.initiallyExpanded) {
-          this.expanded = true;
-          this.updateList();
-        }
-      });
-      template.addEventListener("mouseleave", () => {
-        this.resumeTimeouts();
-        if (!this.initiallyExpanded) {
-          this.expanded = false;
-          this.updateList();
-        }
-      });
-      template._closeable = new Closeable(template);
-      template._closeable.onClose(() => template.destroyToast());
-    }
-    pauseTimeouts() {
-      for (let toast of this.toasts) {
-        toast.timeout?.pause();
-      }
-    }
-    resumeTimeouts() {
-      for (let toast of this.toasts) {
-        toast.timeout?.resume();
-      }
-    }
-    animateIn(toast) {
-      let reverseVerticalPosition = this.verticalPosition === "top" ? "bottom" : "top";
-      let verticalPositionInt = reverseVerticalPosition === "top" ? 1 : -1;
-      let translateY = 1.5 * verticalPositionInt;
-      toast.contentEl.style.opacity = 0;
-      toast.contentEl.style.transform = `translateY(${translateY}rem)`;
-      toast.el.style.zIndex = 5001;
-      toast.contentEl.offsetHeight;
-      toast.contentHeight = toast.contentEl.offsetHeight;
-      toast.height = toast.el.offsetHeight;
-      toast.contentEl.style.opacity = 100;
-      toast.contentEl.style.transform = `translateY(0)`;
-    }
-    animateOut(toast) {
-      let verticalPositionInt = this.verticalPosition === "top" ? 1 : -1;
-      let translateY = 0.5 * verticalPositionInt;
-      toast.contentEl.style.transform = `translateY(${translateY}rem)`;
-      toast.contentEl.style.opacity = 0;
-      let index = this.toasts.indexOf(toast);
-      if (index > -1) {
-        this.toasts.splice(index, 1);
-      }
-      let cleanup = () => {
-        toast.el.remove();
-        if (this.toasts.length === 0) {
-          this.expanded = false;
-        }
-      };
-      if (toast.contentEl.getAnimations().length) {
-        toast.contentEl.addEventListener("transitionend", () => {
-          cleanup();
-        }, { once: true });
-      } else {
-        cleanup();
-      }
-    }
-    updateList() {
-      this.initiallyExpanded || this.expanded ? this.expand() : this.collapse();
-    }
-    expand() {
-      let runningHeight = 0;
-      for (let toast of this.toasts) {
-        let verticalPositionInt = this.verticalPosition === "top" ? 1 : -1;
-        toast.el.style.transform = `translateY(${verticalPositionInt * runningHeight}px)`;
-        toast.el.style.opacity = 100;
-        toast.contentEl.style.height = `${toast.contentHeight}px`;
-        toast.contentEl.style.overflow = "auto";
-        runningHeight += toast.height;
-      }
-    }
-    collapse() {
-      let i = 0;
-      let frontToast = this.toasts[0];
-      let frontToastHeight = frontToast?.contentHeight || 0;
-      for (let toast of this.toasts) {
-        let numberOfToastsToShow = 3;
-        let scale = 0;
-        let verticalPositionInt = this.verticalPosition === "top" ? 1 : -1;
-        let translateY = 10 * verticalPositionInt * i;
-        toast.el.style.zIndex = 5e3 - i;
-        if (i >= numberOfToastsToShow) {
-          scale = 1 - 0.05 * (numberOfToastsToShow - 1);
-          toast.el.style.opacity = 0;
-        } else {
-          scale = 1 - 0.05 * i;
-          toast.el.style.opacity = 100;
-        }
-        toast.contentEl.style.height = `${frontToastHeight}px`;
-        toast.contentEl.style.overflow = "hidden";
-        toast.el.style.transform = `scaleX(${scale}) translateY(${translateY}px)`;
-        i++;
-      }
-    }
-  };
-  var UIToast = class extends UIElement {
-    mount() {
-      if (!this.closest("ui-toast-group")) {
-        setAttribute2(this, "role", "status");
-        document.addEventListener("keydown", (e) => {
-          if (e.key === "Escape") {
-            this.hideToast();
-          }
-        });
-        this.defaultPosition = this.getAttribute("position") || "bottom end";
-      }
-    }
-    showToast(options = {}) {
-      let existingToast = this.template().nextElementSibling;
-      if (existingToast) existingToast.destroyToast();
-      let duration = Number(options.duration === void 0 ? 5e3 : options.duration);
-      let position = options.dataset?.position ?? this.defaultPosition;
-      if (options.dataset?.position !== void 0) {
-        delete options.dataset.position;
-      }
-      this.setAttribute("position", position);
-      let template = this.prepareToastTemplate(options);
-      let show = () => {
-        this.showPopover();
-        template.classList.add("showing");
-      };
-      let hide2 = () => {
-        template._hiding = true;
-        template.classList.remove("showing");
-        if (template.getAnimations().length) {
-          template.addEventListener("transitionend", () => {
-            template.remove();
-            this.hidePopover();
-          }, { once: true });
-        } else {
-          template.remove();
-          this.hidePopover();
-        }
-      };
-      this.appendChild(template);
-      show();
-      template.hideToast = hide2;
-      let toastTimeout = duration !== 0 && timeout(() => {
-        hide2();
-      }, duration);
-      template.destroyToast = () => {
-        toastTimeout && toastTimeout.cancel();
-        template.remove();
-        this.hidePopover();
-      };
-      template.addEventListener("mouseenter", () => {
-        toastTimeout && toastTimeout.pause();
-      });
-      template.addEventListener("mouseleave", () => {
-        toastTimeout && toastTimeout.resume();
-      });
-      template._closeable = new Closeable(template);
-      template._closeable.onClose(() => template.destroyToast());
-    }
-    hideToast() {
-      let toast = this.template().nextElementSibling;
-      toast && toast.destroyToast();
-    }
-    template() {
-      return this.querySelector("template");
-    }
-    prepareToastTemplate(options) {
-      let slots = options.slots || {};
-      let dataset = options.dataset || {};
-      let templateEl = this.template();
-      if (!templateEl) {
-        return console.warn("ui-toast: no template element found", this);
-      }
-      let template = templateEl.content.cloneNode(true).firstElementChild;
-      template.setAttribute("aria-atomic", "true");
-      Object.entries(slots).forEach(([key, value3]) => {
-        if ([null, void 0, false].includes(value3)) return;
-        template.querySelectorAll(`slot[name="${key}"]`).forEach((i) => {
-          i.replaceWith(document.createTextNode(value3));
-        });
-      });
-      Object.entries(dataset).forEach(([key, value3]) => {
-        template.dataset[key] = value3;
-      });
-      template.querySelectorAll("slot").forEach((slot) => slot.remove());
-      return template;
-    }
-  };
-  element("toast-group", UIToastGroup);
-  element("toast", UIToast);
-
-  // js/radio.js
-  var UIRadioGroup = class _UIRadioGroup extends UIControl {
-    boot() {
-      this._disableable = new Disableable(this);
-      this._disableable.onInitAndChange((disabled) => {
-        this.walker().each((el) => {
-          el.disabled = disabled;
-        });
-      });
-      this._selectable = new SelectableGroup(this);
-      this._controllable = new Controllable(this, { disabled: this._disabled, bubbles: true });
-      this._focusable = new FocusableGroup(this, { wrap: true });
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this._selectable.getState(),
-        includeWhenEmpty: false
-      });
-      this._controllable.initial((initial) => initial && this._selectable.setState(initial));
-      this._controllable.getter(() => this._selectable.getState());
-      this._detangled = detangle();
-      this._controllable.setter(this._detangled((value3) => {
-        this._selectable.setState(value3);
-      }));
-      this._selectable.onChange(this._detangled(() => {
-        this._controllable.dispatch();
-      }));
-      this._selectable.onInitAndChange(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-      on(this, "keydown", (e) => {
-        if (["ArrowDown", "ArrowRight"].includes(e.key)) {
-          this._focusable.focusNext();
-          e.preventDefault();
-          e.stopPropagation();
-        } else if (["ArrowUp", "ArrowLeft"].includes(e.key)) {
-          this._focusable.focusPrev();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      });
-      setAttribute2(this, "role", "radiogroup");
-      queueMicrotask(() => {
-        this._submittable.update(this._selectable.getState());
-      });
-    }
-    walker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof _UIRadioGroup) return reject();
-        if (!(el.localName === "ui-radio")) return skip();
-      });
-    }
-  };
-  var UIRadio = class extends UIControl {
-    boot() {
-      let button = this;
-      this._disableable = new Disableable(this);
-      this._selectable = new Selectable(button, {
-        value: this.hasAttribute("value") ? this.getAttribute("value") : Math.random().toString(36).substring(2, 10),
-        label: this.hasAttribute("label") ? this.getAttribute("label") : null,
-        selectedInitially: this.hasAttribute("checked"),
-        dataAttr: "data-checked",
-        ariaAttr: "aria-checked"
-      });
-      this.value = this._selectable.getValue();
-      this._selectable.onChange(() => {
-        if (this._selectable.isSelected()) this._focusable.focus(false);
-      });
-      this._disableable.onChange((disabled) => {
-        if (disabled) {
-          this._focusable.untabbable();
-        } else {
-          this._selectable.isSelected() && this._focusable.tabbable();
-        }
-      });
-      setAttribute2(button, "role", "radio");
-      this._focusable = new Focusable(button, { disableable: this._disableable, tabbableAttr: "data-active" });
-      on(button, "click", this._disableable.disabled((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }), { capture: true });
-      on(button, "click", this._disableable.enabled((e) => {
-        this._selectable.press();
-      }));
-      on(button, "keydown", this._disableable.enabled((e) => {
-        if (e.key === "Enter") {
-          this.closest("form")?.requestSubmit();
-        }
-      }));
-      on(button, "keydown", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      on(button, "keyup", this._disableable.enabled((e) => {
-        if (e.key === " ") {
-          this._selectable.press();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }));
-      respondToLabelClick3(button);
-      on(button, "focus", (e) => {
-        isUsingKeyboard() && this._selectable.select();
-      });
-    }
-    get checked() {
-      return this._selectable.isSelected();
-    }
-    set checked(value3) {
-      let detangled = this.closest("ui-radio-group")?._detangled || (() => {
-      });
-      detangled(() => {
-        value3 && this._selectable.select();
-      })();
-    }
-  };
-  function respondToLabelClick3(el) {
-    el.closest("label")?.addEventListener("click", (e) => {
-      if (!el.contains(e.target)) {
-        el.click();
-      }
-    });
-  }
-  inject(({ css }) => css`ui-radio-group { display: block; }`);
-  inject(({ css }) => css`ui-radio { display: inline-block; user-select: none; }`);
-  element("radio-group", UIRadioGroup);
-  element("radio", UIRadio);
-
-  // js/table.js
-  var UITableScrollArea = class extends UIElement {
-    boot() {
-      on(this, "scroll", (e) => {
-        this.updateAttributes();
-      }, { passive: true });
-      new ResizeObserver(() => {
-        this.updateAttributes();
-      }).observe(this);
-    }
-    mount() {
-      queueMicrotask(() => {
-        this.updateAttributes();
-      });
-    }
-    updateAttributes() {
-      if (this.scrollLeft > 12) {
-        setAttribute2(this, "data-scrolled-right", "");
-      } else {
-        removeAttribute(this, "data-scrolled-right");
-      }
-      if (this.scrollWidth - this.clientWidth - this.scrollLeft > 12) {
-        setAttribute2(this, "data-scrolled-left", "");
-      } else {
-        removeAttribute(this, "data-scrolled-left");
-      }
-    }
-  };
-  element("table-scroll-area", UITableScrollArea);
-
-  // js/tabs.js
-  var UITabGroup = class _UITabGroup extends UIElement {
-    boot() {
-      this._disabled = this.hasAttribute("disabled");
-    }
-    mount() {
-      this.walkPanels((el) => initializePanel(el));
-      new MutationObserver((mutations) => {
-        this.walkPanels((el) => initializePanel(el));
-      }).observe(this, { childList: true });
-    }
-    showPanel(name) {
-      this.walkPanels((el) => {
-        if (el.getAttribute("name") === name) el.show();
-        else el.hide();
-      });
-    }
-    getPanel(name) {
-      return this.walkPanels((el, bail) => {
-        if (el.getAttribute("name") === name) {
-          bail(el);
-        }
-      });
-    }
-    walkPanels(callback) {
-      let bailed = false;
-      let bailedReturn;
-      for (let child of this.children) {
-        if (child instanceof _UITabGroup) continue;
-        if (child instanceof UITabs) continue;
-        callback(child, (forward) => {
-          bailed = true;
-          bailedReturn = forward;
-        });
-        if (bailed) break;
-      }
-      return bailedReturn;
-    }
-  };
-  var UITabsScrollArea = class extends UIElement {
-    boot() {
-      on(this, "scroll", (e) => {
-        this.updateScrollVariable();
-      }, { passive: true });
-      new ResizeObserver(() => {
-        this.updateScrollVariable();
-      }).observe(this);
-    }
-    updateScrollVariable() {
-      let percentage = Math.abs(this.scrollLeft) / (this.scrollWidth - this.clientWidth) * 100;
-      this.style.setProperty("--flux-scroll-percentage", percentage + "%");
-    }
-  };
-  var UITabs = class _UITabs extends UIControl {
-    boot() {
-      this._focusable = new FocusableGroup(this, { wrap: true });
-      this._selectableGroup = new SelectableGroup(this);
-      this._controllable = new Controllable(this, { disabled: this._disabled });
-      this._controllable.initial((initial) => initial && this._selectableGroup.setState(initial));
-      this._controllable.getter(() => this._selectableGroup.getState());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => {
-        this._selectableGroup.setState(value3);
-      }));
-      this._selectableGroup.onChange(detangled(() => {
-        this._controllable.dispatch();
-      }));
-      on(this, "keydown", (e) => {
-        if (["ArrowDown", "ArrowRight"].includes(e.key)) {
-          this._focusable.focusNext();
-          e.preventDefault();
-          e.stopPropagation();
-        } else if (["ArrowUp", "ArrowLeft"].includes(e.key)) {
-          this._focusable.focusPrev();
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      });
-      setAttribute2(this, "role", "tablist");
-    }
-    mount() {
-      this.initializeTabs();
-      this._focusable.ensureTabbable();
-      if (!this._selectableGroup.getState()) {
-        this._selectableGroup.selectFirst();
-      }
-      new MutationObserver((mutations) => {
-        this.initializeTabs();
-        let selected = this._selectableGroup.selected();
-        selected.el.closest("ui-tab-group").showPanel(selected.value);
-      }).observe(this, { childList: true });
-    }
-    initializeTabs() {
-      this.walker().each((el) => {
-        if (el._initialized) return;
-        if (el._disableable) return;
-        if (el.hasAttribute("action")) return;
-        initializeTab(el);
-        el._initialized = true;
-      });
-    }
-    walker() {
-      return walker(this, (el, { skip, reject }) => {
-        if (el instanceof UITabGroup) return reject();
-        if (el instanceof _UITabs) return reject();
-        if (!["a", "button"].includes(el.localName)) return skip();
-      });
-    }
-  };
-  function initializeTab(el) {
-    el._disableable = new Disableable(el);
-    let link = el.matches("a") ? el : null;
-    let target = link || el;
-    el._disableable.onInitAndChange((disabled) => {
-      if (disabled) {
-        setAttribute2(target, "aria-disabled", "true");
-      } else {
-        removeAttribute(target, "aria-disabled");
-      }
-    });
-    let id = assignId(target, "tab");
-    setAttribute2(target, "role", "tab");
-    target._focusable = new Focusable(target, { disableable: el._disableable, tabbableAttr: "data-active" });
-    if (!link) {
-      let panel = el.getAttribute("name");
-      el._selectable = new Selectable(el, {
-        value: panel || Math.random().toString(36).substring(2, 10),
-        label: el.hasAttribute("label") ? el.getAttribute("label") : el.textContent.trim(),
-        selectedInitially: el.hasAttribute("selected"),
-        toggleable: false
-      });
-      on(el, "click", () => el._selectable.press());
-      el._selectable.onInitAndChange(() => {
-        let panelEl = el.closest("ui-tab-group")?.getPanel(panel);
-        el._selectable.getState() ? panelEl?.show() : panelEl?.hide();
-        if (el._selectable.getState()) {
-          el._focusable.focus(false);
-        }
-      });
-      let pointerdownTimeout = null;
-      if (!el.closest("ui-tab-group")?.hasAttribute("manual")) {
-        on(el, "pointerdown", () => {
-          clearTimeout(pointerdownTimeout);
-          pointerdownTimeout = setTimeout(() => pointerdownTimeout = null);
-        });
-        on(el, "focus", () => {
-          if (!pointerdownTimeout) {
-            el._selectable.select();
-          }
-        });
-      }
-      queueMicrotask(() => {
-        let container = el.closest("ui-tab-group");
-        if (!container) return;
-        let panelEl = container.getPanel(panel);
-        if (!panelEl) throw new Error("Could not find panel...");
-        setAttribute2(el, "aria-controls", panelEl.id);
-        setAttribute2(panelEl, "aria-labelledby", el.id);
-      });
-    }
-  }
-  function initializePanel(el) {
-    if (el._initialized) return;
-    assignId(el, "tab-panel");
-    setAttribute2(el, "role", "tabpanel");
-    el.hasAttribute("tabindex") || setAttribute2(el, "tabindex", "-1");
-    el.show = () => {
-      setAttribute2(el, "data-selected", "");
-      setAttribute2(el, "tabindex", "0");
-    };
-    el.hide = () => {
-      removeAttribute(el, "data-selected");
-      setAttribute2(el, "tabindex", "-1");
-    };
-    el._initialized = true;
-  }
-  inject(({ css }) => css`ui-tab-group, ui-tabs { display: block; cursor: default; }`);
-  element("tab-group", UITabGroup);
-  element("tabs-scroll-area", UITabsScrollArea);
-  element("tabs", UITabs);
-
-  // js/otp.js
-  var UIOTP = class extends UIControl {
-    mount() {
-      this.inputEls = this.querySelectorAll("[data-flux-otp-input]");
-      this.length = this.inputEls.length;
-      this.config = {
-        mode: this.getAttribute("mode") || "numeric",
-        autocomplete: this.getAttribute("autocomplete") || "one-time-code",
-        autoSubmit: this.getAttribute("submit") === "auto",
-        inputAriaLabelTemplate: this.getAttribute("data-flux-input-aria-label") || "Character {current} of {total}"
-      };
-      this.state = {
-        length: 0,
-        onChanges: [],
-        getValue: () => {
-          return Array.from(this.inputEls).map((input) => input.value).join("");
-        },
-        setValue: (value3) => {
-          let cleaned = (value3 ?? "").replace(/\s/g, "").replace(this.invalidCharacters(), "").toUpperCase();
-          for (let i = 0; i < this.length; i++) {
-            this.inputEls[i].value = cleaned[i] || "";
-          }
-          this.state.length = cleaned.length;
-          this.state.onChanges.forEach((i) => i(cleaned));
-        },
-        notify: () => {
-          let value3 = this.state.getValue();
-          this.state.length = value3.length;
-          this.state.onChanges.forEach((i) => i(value3));
-        },
-        reapply: () => {
-          let value3 = this.state.getValue();
-          this.state.setValue(value3);
-        },
-        onChange: (callback) => {
-          this.state.onChanges.push(callback);
-        }
-      };
-      if (this.hasAttribute("value")) {
-        this.state.setValue(this.getAttribute("value"));
-      }
-      this._controllable = new Controllable(this);
-      this._controllable.initial((initial) => initial && this.state.setValue(initial));
-      this._controllable.getter(() => this.state.getValue());
-      let detangled = detangle();
-      this._controllable.setter(detangled((value3) => this.state.setValue(value3)));
-      this.state.onChange(detangled(() => this._controllable.dispatch()));
-      this._submittable = new Submittable(this, {
-        name: this.getAttribute("name"),
-        value: this.state.getValue()
-      });
-      this.state.onChange((value3) => {
-        this._submittable.update(value3);
-        if (value3.length === this.length && this.config.autoSubmit) {
-          this.closest("form")?.requestSubmit();
-        }
-        let activeIndex = Array.from(this.inputEls).findIndex((input) => input === document.activeElement);
-        if (activeIndex > this.nextIndex()) {
-          this.focusIndex(this.nextIndex());
-        }
-      });
-      this._disableable = new Disableable(this);
-      this._disableable.onInitAndChange((disabled) => {
-        for (let inputEl of this.inputEls) {
-          if (disabled) {
-            setAttribute2(inputEl, "disabled", disabled);
-          } else {
-            removeAttribute(inputEl, "disabled");
-          }
-        }
-      });
-      this.updateTabIndexes(this.nextIndex());
-      for (let i = 0; i < this.length; i++) {
-        setAttribute2(this.inputEls[i], "autocomplete", i === 0 ? this.config.autocomplete : "off");
-        setAttribute2(this.inputEls[i], "aria-label", this.config.inputAriaLabelTemplate.replace("{current}", i + 1).replace("{total}", this.length));
-        let prevValue;
-        on(this.inputEls[i], "beforeinput", (e) => {
-          prevValue = e.target.value;
-        });
-        on(this.inputEls[i], "input", (e) => {
-          e.stopPropagation();
-          let value3 = e.target.value;
-          if (value3.length > 1) {
-            this.state.setValue(value3);
-            this.focusIndex(this.nextIndex());
-            e.preventDefault();
-            return;
-          }
-          if (value3 == "") {
-            this.state.reapply();
-            if (i < this.nextIndex()) {
-              this.focusIndex(i);
-            } else {
-              this.focusPrev(i);
-            }
-            return;
-          }
-          if (this.invalidCharacters().test(value3)) {
-            e.target.value = prevValue;
-            this.focusIndex(i);
-            return;
-          }
-          if (this.config.mode !== "numeric") {
-            e.target.value = value3.toUpperCase();
-          }
-          this.inputEls[i].blur();
-          this.state.notify();
-          this.focusNext(i);
-        });
-        on(this.inputEls[i], "keydown", (e) => {
-          if (["Backspace", "Delete", "Clear"].includes(e.key)) {
-            if (e.target.value === "") {
-              requestAnimationFrame(() => this.focusPrev(i));
-            }
-          } else if (e.key === "ArrowRight") {
-            isRTL() ? this.focusPrev(i) : this.focusNext(i);
-            e.preventDefault();
-          } else if (e.key === "ArrowLeft") {
-            isRTL() ? this.focusNext(i) : this.focusPrev(i);
-            e.preventDefault();
-          }
-        });
-        on(this.inputEls[i], "pointerdown", (e) => {
-          this.focusIndex(Math.min(i, this.nextIndex()));
-          e.preventDefault();
-        });
-        on(this.inputEls[i], "focus", (e) => {
-          e.target.setSelectionRange(0, 1);
-          this.updateTabIndexes(i);
-        });
-      }
-    }
-    trigger() {
-      return this.inputEls[this.nextIndex()];
-    }
-    focusIndex(index) {
-      let input = this.inputEls[index];
-      if (document.activeElement === input) {
-        input.blur();
-      }
-      input.focus();
-    }
-    focusPrev(i) {
-      this.focusIndex(Math.max(0, i - 1));
-    }
-    focusNext(i) {
-      this.focusIndex(Math.min(i + 1, this.nextIndex()));
-    }
-    nextIndex() {
-      return Math.min(this.state.length, this.length - 1);
-    }
-    updateTabIndexes(active) {
-      for (let i = 0; i < this.length; i++) {
-        if (i === active) {
-          setAttribute2(this.inputEls[i], "tabindex", "0");
-        } else {
-          setAttribute2(this.inputEls[i], "tabindex", "-1");
-        }
-      }
-    }
-    invalidCharacters() {
-      switch (this.config.mode) {
-        case "numeric":
-          return /[^\d]/g;
-        case "alpha":
-          return /[^a-zA-Z]/g;
-        case "alphanumeric":
-          return /[^a-zA-Z0-9]/g;
-        default:
-          throw new Error(`Unknown OTP input mode "${this.config.mode}"`);
-      }
-    }
-  };
-  element("otp", UIOTP);
-
-  // js/store.js
-  document.addEventListener("alpine:init", () => {
-    let applyAppearance = window.Flux?.applyAppearance;
-    if (!applyAppearance) {
-      applyAppearance = () => {
-        window.Flux.appearance = null;
-        window.localStorage.removeItem("flux.appearance");
-      };
-    }
-    let flux = Alpine.reactive({
-      toast(...params) {
-        let detail = { slots: {}, dataset: {} };
-        if (typeof params[0] === "string") {
-          detail.slots.text = params.shift();
-        }
-        if (typeof params[0] === "string") {
-          detail.slots.heading = detail.slots.text;
-          detail.slots.text = params.shift();
-        }
-        let options = params.shift() || {};
-        if (options.text) detail.slots.text = options.text;
-        if (options.heading) detail.slots.heading = options.heading;
-        if (options.variant) detail.dataset.variant = options.variant;
-        if (options.position) detail.dataset.position = options.position;
-        if (options.duration !== void 0) detail.duration = options.duration;
-        document.dispatchEvent(new CustomEvent("toast-show", { detail }));
-      },
-      modal(name) {
-        return {
-          show() {
-            document.dispatchEvent(new CustomEvent("modal-show", { detail: { name } }));
-          },
-          close() {
-            document.dispatchEvent(new CustomEvent("modal-close", { detail: { name } }));
-          }
-        };
-      },
-      modals() {
-        return { close() {
-          document.dispatchEvent(new CustomEvent("modal-close", { detail: {} }));
-        } };
-      },
-      appearance: window.localStorage.getItem("flux.appearance") || "system",
-      systemAppearanceChanged: 1,
-      // A counter to trigger reactivity when the system appearance changes...
-      get dark() {
-        JSON.stringify(flux.systemAppearanceChanged);
-        if (flux.appearance === "system") {
-          let media2 = window.matchMedia("(prefers-color-scheme: dark)");
-          return media2.matches;
-        } else {
-          return flux.appearance === "dark";
-        }
-      },
-      set dark(value3) {
-        let current = this.dark;
-        if (value3 === current) return;
-        if (value3) {
-          flux.appearance = "dark";
-        } else {
-          flux.appearance = "light";
-        }
-      }
-    });
-    window.Flux = flux;
-    Alpine.magic("flux", () => flux);
-    Alpine.effect(() => {
-      applyAppearance(flux.appearance);
-    });
-    document.addEventListener("livewire:navigated", () => {
-      applyAppearance(flux.appearance);
-    });
-    let media = window.matchMedia("(prefers-color-scheme: dark)");
-    media.addEventListener("change", () => {
-      flux.systemAppearanceChanged++;
-      applyAppearance(flux.appearance);
-    });
-  });
-
-  // js/index.js
-  if (!isSupported2() && !isPolyfilled()) {
-    apply2();
-  }
-})();
diff --git a/resources/views/components/layouts/app/header.blade.php b/resources/views/components/layouts/app/header.blade.php
index dd41add..bd2612f 100644
--- a/resources/views/components/layouts/app/header.blade.php
+++ b/resources/views/components/layouts/app/header.blade.php
@@ -119,6 +119,7 @@
 
         {{ $slot }}
 
+        @livewireScripts
         @fluxScripts
     </body>
 </html>
diff --git a/resources/views/components/layouts/app/sidebar.blade.php b/resources/views/components/layouts/app/sidebar.blade.php
index 62d07cb..e7c44b9 100644
--- a/resources/views/components/layouts/app/sidebar.blade.php
+++ b/resources/views/components/layouts/app/sidebar.blade.php
@@ -380,9 +380,9 @@
 
     <flux:toast />
 
-    {{-- Flux vor Livewire: flux.js registriert Alpine.data('fluxModal') im alpine:init-Handler --}}
-    @fluxScripts
+    {{-- Reihenfolge laut Flux-Doku: Livewire stellt das gebündelte Alpine bereit, danach registriert flux.js seine Alpine-Komponenten (fluxModal, …). --}}
     @livewireScripts
+    @fluxScripts
 </body>
 
 </html>
diff --git a/resources/views/components/layouts/auth/simple.blade.php b/resources/views/components/layouts/auth/simple.blade.php
index 91b7ccb..574c84d 100644
--- a/resources/views/components/layouts/auth/simple.blade.php
+++ b/resources/views/components/layouts/auth/simple.blade.php
@@ -26,17 +26,5 @@
         @livewireScripts
         @fluxScripts
         @include('partials.theme-toggle-script')
-        <script src="{{ asset('vendor/livewire/livewire.js') }}"></script>
-
-        <!-- Debug: Script-Status -->
-        <script>
-        console.log('Body Scripts geladen');
-        console.log('Livewire JS:', {{ file_exists(public_path('vendor/livewire/livewire.js')) ? 'true' : 'false' }});
-        if (typeof Livewire !== 'undefined') {
-            console.log('Livewire verfügbar:', true);
-        } else {
-            console.log('Livewire verfügbar:', false);
-        }
-        </script>
     </body>
 </html>
diff --git a/resources/views/components/layouts/auth/split.blade.php b/resources/views/components/layouts/auth/split.blade.php
index 0627b6c..8af6917 100644
--- a/resources/views/components/layouts/auth/split.blade.php
+++ b/resources/views/components/layouts/auth/split.blade.php
@@ -43,6 +43,7 @@
                 </div>
             </div>
         </div>
+        @livewireScripts
         @fluxScripts
         @include('partials.theme-toggle-script')
     </body>
diff --git a/resources/views/components/media-thumb.blade.php b/resources/views/components/media-thumb.blade.php
new file mode 100644
index 0000000..7a8eb53
--- /dev/null
+++ b/resources/views/components/media-thumb.blade.php
@@ -0,0 +1,27 @@
+@props(['url' => '', 'size' => 'h-10 w-10'])
+
+@php
+    $url = (string) $url;
+    $path = parse_url($url, PHP_URL_PATH) ?? '';
+    $ext = strtolower(pathinfo($path, PATHINFO_EXTENSION));
+    $isVideo = in_array($ext, ['mp4', 'webm', 'mov', 'm4v', 'ogv'], true);
+@endphp
+
+<div {{ $attributes->merge(['class' => "relative {$size} shrink-0 flex items-center justify-center overflow-hidden rounded-lg border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800"]) }}>
+    @if($url === '')
+        <x-heroicon-o-photo class="h-5 w-5 text-zinc-300 dark:text-zinc-600" />
+    @elseif($isVideo)
+        <video class="h-full w-full object-cover" preload="metadata" muted playsinline>
+            <source src="{{ $url }}#t=1">
+        </video>
+        <span class="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <x-heroicon-s-play class="h-4 w-4 text-white/90 drop-shadow" />
+        </span>
+    @else
+        <img src="{{ $url }}" alt="" class="h-full w-full object-cover" loading="lazy"
+            onerror="this.style.display='none';this.nextElementSibling.classList.remove('hidden');" />
+        <span class="hidden">
+            <x-heroicon-o-link class="h-5 w-5 text-zinc-400" />
+        </span>
+    @endif
+</div>
diff --git a/resources/views/livewire/admin/cms/display-list.blade.php b/resources/views/livewire/admin/cms/display-list.blade.php
index 766f88b..0d129a2 100644
--- a/resources/views/livewire/admin/cms/display-list.blade.php
+++ b/resources/views/livewire/admin/cms/display-list.blade.php
@@ -220,6 +220,13 @@
                                             <flux:icon.play class="w-3 h-3" />
                                             {{ __('Test-URL') }}
                                         </a>
+                                        <flux:button wire:click="rotatePreviewToken({{ $display->id }})"
+                                                     wire:confirm="Vorschau-Link neu erzeugen? Der bisherige Link wird damit ungültig."
+                                                     size="xs"
+                                                     variant="ghost"
+                                                     icon="arrow-path">
+                                            {{ __('Link erneuern') }}
+                                        </flux:button>
                                         <flux:button wire:click="publishDraft({{ $display->id }})"
                                                      wire:confirm="Diesen Entwurf veröffentlichen und den Live-Stand ersetzen?"
                                                      size="xs"
@@ -342,17 +349,23 @@
                         @if($availableVersions->isNotEmpty())
                             <div class="flex gap-2">
                                 <div class="flex-1">
-                                    <flux:select wire:model="addVersionSelect" placeholder="Modul hinzufügen...">
+                                    <flux:select wire:model="versionsToAdd"
+                                                 variant="listbox"
+                                                 multiple
+                                                 searchable
+                                                 placeholder="Module hinzufügen..."
+                                                 selected-suffix="Module ausgewählt">
                                         @foreach($availableVersions as $version)
-                                            <option value="{{ $version->id }}">{{ $version->name }} ({{ $version->type->label() }})</option>
+                                            <flux:select.option value="{{ $version->id }}">{{ $version->name }} ({{ $version->type->label() }})</flux:select.option>
                                         @endforeach
                                     </flux:select>
                                 </div>
-                                <flux:button wire:click="addVersion"
+                                <flux:button wire:click="addSelectedVersions"
                                             type="button"
                                             icon="plus"
                                             size="sm"
                                             variant="ghost">
+                                    {{ __('Hinzufügen') }}
                                 </flux:button>
                             </div>
                         @else
diff --git a/resources/views/livewire/admin/cms/display-media-library.blade.php b/resources/views/livewire/admin/cms/display-media-library.blade.php
index fe843f6..d490583 100644
--- a/resources/views/livewire/admin/cms/display-media-library.blade.php
+++ b/resources/views/livewire/admin/cms/display-media-library.blade.php
@@ -6,11 +6,12 @@ use Flux\Flux;
 use Illuminate\Support\Facades\Storage;
 use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
 use Livewire\WithFileUploads;
+use Livewire\WithPagination;
 use function Livewire\Volt\{layout, title, state, computed, on, uses};
 
 layout('components.layouts.app');
 title('Display-Mediathek');
-uses([WithFileUploads::class]);
+uses([WithFileUploads::class, WithPagination::class]);
 
 state([
     'search' => '',
@@ -47,12 +48,16 @@ $media = computed(
             default => $q,
         })
         ->when($this->filterCollection, fn ($q) => $q->inCollection($this->filterCollection))
-        ->when($this->search, fn ($q) => $q->where('filename', 'like', "%{$this->search}%")
-            ->orWhere('title', 'like', "%{$this->search}%"))
+        ->when($this->search, fn ($q) => $q->search($this->search))
         ->orderByDesc('created_at')
         ->paginate(48),
 );
 
+$updatedSearch = fn () => $this->resetPage();
+$updatedFilterType = fn () => $this->resetPage();
+$updatedFilterSource = fn () => $this->resetPage();
+$updatedFilterCollection = fn () => $this->resetPage();
+
 $collections = computed(fn () => DisplayMedia::query()
     ->whereNotNull('collection')
     ->where('collection', '!=', '')
@@ -283,27 +288,37 @@ $closeDetail = function () {
                             class="group relative cursor-pointer overflow-hidden rounded-lg border transition-all
                                 {{ $editingId === $item->id ? 'border-blue-500 ring-2 ring-blue-200 dark:ring-blue-800' : 'border-zinc-200 hover:border-zinc-400 dark:border-zinc-700' }}"
                             wire:click="startEdit({{ $item->id }})">
-                            <div class="aspect-square bg-zinc-100 dark:bg-zinc-800">
-                                @if ($item->isImage() && $item->isUpload())
-                                    <img src="{{ $item->getThumbnailUrl() }}"
+                            @php
+                                $thumbSrc = $item->getThumbnailUrl() ?? ($item->isImage() && $item->isExternal() ? $item->external_url : null);
+                                $videoFrameSrc = (! $thumbSrc && $item->isVideo() && $item->isUpload()) ? $item->getUrl() : null;
+                            @endphp
+                            <div class="relative aspect-square bg-zinc-100 dark:bg-zinc-800">
+                                @if ($thumbSrc)
+                                    <img src="{{ $thumbSrc }}"
                                         alt="{{ $item->alt_text ?? $item->filename }}"
                                         class="h-full w-full object-cover" loading="lazy" />
+                                @elseif ($videoFrameSrc)
+                                    <video class="h-full w-full object-cover" preload="metadata" muted playsinline>
+                                        <source src="{{ $videoFrameSrc }}#t=1" type="{{ $item->mime_type }}">
+                                    </video>
                                 @elseif ($item->isVideo())
                                     <div class="flex h-full w-full flex-col items-center justify-center gap-2 text-purple-400">
                                         <x-heroicon-o-film class="h-10 w-10" />
                                         <span class="text-xs">Video</span>
                                     </div>
-                                @elseif ($item->isExternal() && $item->isImage())
-                                    <div class="flex h-full w-full flex-col items-center justify-center gap-2 text-blue-400">
-                                        <x-heroicon-o-photo class="h-10 w-10" />
-                                        <span class="text-xs">Extern</span>
-                                    </div>
                                 @else
                                     <div class="flex h-full w-full flex-col items-center justify-center gap-2 text-zinc-400">
                                         <x-heroicon-o-link class="h-10 w-10" />
                                         <span class="text-xs">Link</span>
                                     </div>
                                 @endif
+                                @if ($item->isVideo() && ($thumbSrc || $videoFrameSrc))
+                                    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+                                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-black/45 text-white ring-1 ring-white/30 backdrop-blur-sm">
+                                            <x-heroicon-s-play class="h-5 w-5" />
+                                        </span>
+                                    </div>
+                                @endif
                             </div>
                             <div class="flex items-center gap-1.5 p-2">
                                 @if ($item->isVideo())
@@ -352,9 +367,17 @@ $closeDetail = function () {
                                     class="cursor-pointer transition {{ $editingId === $item->id ? 'bg-blue-50 dark:bg-blue-900/20' : 'hover:bg-zinc-50 dark:hover:bg-zinc-800/50' }}"
                                     wire:click="startEdit({{ $item->id }})">
                                     <td class="px-3 py-1.5">
-                                        <div class="flex h-8 w-8 items-center justify-center overflow-hidden rounded border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800">
-                                            @if ($item->isImage() && $item->isUpload())
-                                                <img src="{{ $item->getThumbnailUrl() }}" class="h-full w-full object-cover" loading="lazy" />
+                                        @php
+                                            $rowThumb = $item->getThumbnailUrl() ?? ($item->isImage() && $item->isExternal() ? $item->external_url : null);
+                                            $rowVideoFrame = (! $rowThumb && $item->isVideo() && $item->isUpload()) ? $item->getUrl() : null;
+                                        @endphp
+                                        <div class="relative flex h-8 w-8 items-center justify-center overflow-hidden rounded border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800">
+                                            @if ($rowThumb)
+                                                <img src="{{ $rowThumb }}" class="h-full w-full object-cover" loading="lazy" />
+                                            @elseif ($rowVideoFrame)
+                                                <video class="h-full w-full object-cover" preload="metadata" muted playsinline>
+                                                    <source src="{{ $rowVideoFrame }}#t=1" type="{{ $item->mime_type }}">
+                                                </video>
                                             @elseif ($item->isVideo())
                                                 <x-heroicon-s-film class="h-4 w-4 text-purple-500" />
                                             @else
@@ -418,17 +441,18 @@ $closeDetail = function () {
 
                         {{-- Preview --}}
                         <div class="mb-4 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800">
-                            @if ($editMedia->isImage() && $editMedia->isUpload())
+                            @if ($editMedia->isImage())
                                 <img src="{{ $editMedia->getUrl() }}" alt="{{ $editMedia->filename }}"
                                     class="w-full object-contain" style="max-height: 300px;" />
                             @elseif ($editMedia->isVideo() && $editMedia->isUpload())
-                                <video controls class="w-full" style="max-height: 300px;">
+                                <video controls preload="metadata" class="w-full" style="max-height: 300px;"
+                                    @if ($editMedia->getThumbnailUrl()) poster="{{ $editMedia->getThumbnailUrl() }}" @endif>
                                     <source src="{{ $editMedia->getUrl() }}" type="{{ $editMedia->mime_type }}">
                                 </video>
                             @elseif ($editMedia->isExternal())
                                 <div class="flex flex-col items-center justify-center gap-3 py-8">
                                     <x-heroicon-o-link class="h-12 w-12 text-blue-400" />
-                                    <span class="text-sm text-zinc-500">Externe Ressource</span>
+                                    <span class="text-sm text-zinc-500">Externe Ressource (Vorschau nicht einbettbar)</span>
                                 </div>
                             @endif
                         </div>
diff --git a/resources/views/livewire/admin/cms/display-media-picker.blade.php b/resources/views/livewire/admin/cms/display-media-picker.blade.php
index 53e97ef..f28e9dc 100644
--- a/resources/views/livewire/admin/cms/display-media-picker.blade.php
+++ b/resources/views/livewire/admin/cms/display-media-picker.blade.php
@@ -2,11 +2,20 @@
     <div class="flex items-end gap-3">
         <div class="flex-1">
             @if ($selectedMedia)
+                @php
+                    $selectedThumb = $selectedMedia->getThumbnailUrl()
+                        ?? ($selectedMedia->isImage() && $selectedMedia->isExternal() ? $selectedMedia->external_url : null);
+                    $selectedVideoFrame = (! $selectedThumb && $selectedMedia->isVideo() && $selectedMedia->isUpload()) ? $selectedMedia->getUrl() : null;
+                @endphp
                 <div class="flex items-center gap-3 rounded-lg border border-zinc-200 p-2 dark:border-zinc-700">
-                    @if ($selectedMedia->isImage() && $selectedMedia->isUpload())
-                        <img src="{{ $selectedMedia->getThumbnailUrl() }}"
+                    @if ($selectedThumb)
+                        <img src="{{ $selectedThumb }}"
                             alt="{{ $selectedMedia->filename }}"
                             class="h-16 w-16 rounded-md object-cover" />
+                    @elseif ($selectedVideoFrame)
+                        <video class="h-16 w-16 rounded-md object-cover" preload="metadata" muted playsinline>
+                            <source src="{{ $selectedVideoFrame }}#t=1" type="{{ $selectedMedia->mime_type }}">
+                        </video>
                     @elseif ($selectedMedia->isVideo())
                         <div class="flex h-16 w-16 items-center justify-center rounded-md bg-purple-50 dark:bg-purple-900/20">
                             <x-heroicon-o-film class="h-8 w-8 text-purple-500" />
@@ -88,9 +97,18 @@
                         {{ $value === $item->id ? 'border-blue-500 ring-2 ring-blue-200' : 'border-zinc-200 hover:border-blue-300 dark:border-zinc-700' }}"
                     wire:click="selectMedia({{ $item->id }})">
                     <div class="relative aspect-square bg-zinc-100 dark:bg-zinc-800">
-                        @if ($item->isImage() && $item->isUpload())
-                            <img src="{{ $item->getThumbnailUrl() }}"
+                        @php
+                            $pickThumb = $item->getThumbnailUrl()
+                                ?? ($item->isImage() && $item->isExternal() ? $item->external_url : null);
+                            $pickVideoFrame = (! $pickThumb && $item->isVideo() && $item->isUpload()) ? $item->getUrl() : null;
+                        @endphp
+                        @if ($pickThumb)
+                            <img src="{{ $pickThumb }}"
                                 alt="{{ $item->filename }}" class="h-full w-full object-cover" loading="lazy" />
+                        @elseif ($pickVideoFrame)
+                            <video class="h-full w-full object-cover" preload="metadata" muted playsinline>
+                                <source src="{{ $pickVideoFrame }}#t=1" type="{{ $item->mime_type }}">
+                            </video>
                         @elseif ($item->isVideo())
                             <div class="flex h-full w-full items-center justify-center text-purple-500">
                                 <x-heroicon-o-film class="h-10 w-10" />
diff --git a/resources/views/livewire/admin/cms/display-version-editor.blade.php b/resources/views/livewire/admin/cms/display-version-editor.blade.php
index 572d5df..70e3992 100644
--- a/resources/views/livewire/admin/cms/display-version-editor.blade.php
+++ b/resources/views/livewire/admin/cms/display-version-editor.blade.php
@@ -121,9 +121,13 @@
                         type="video"
                         label="Video aus Mediathek"
                         :key="'picker-video-' . ($itemId ?? 'new')" />
-                    <flux:input wire:model="videoFilename" label="Video-Pfad / URL" placeholder="Wird automatisch gesetzt oder manuell eingeben..."
-                               description="Über die Mediathek auswählen oder direkt Pfad/URL eingeben." />
-                    <flux:input wire:model="videoTitle" label="Titel (optional)" placeholder="z.B. Herbst Kollektion 2025" />
+                    <div class="flex items-end gap-3">
+                        <x-media-thumb :url="$videoFilename" />
+                        <flux:input wire:model.live.debounce.500ms="videoFilename" label="Video-Pfad / URL" placeholder="Wird automatisch gesetzt oder manuell eingeben..."
+                                   description="Über die Mediathek auswählen oder direkt Pfad/URL eingeben." class="flex-1" />
+                    </div>
+                    <flux:input wire:model="videoTitle" label="Name" placeholder="z.B. Herbst Kollektion 2025"
+                               description="Interner Name des Videos – wird nicht im Video eingeblendet." />
                     <flux:input wire:model="videoPosition" type="number" min="0" max="100" label="Position (%)"
                                description="Vertikale Position im Video (0 = oben, 100 = unten)" />
                     <flux:checkbox wire:model="videoIsActive" label="Aktiv" />
@@ -140,22 +144,29 @@
 
                 {{-- Media fields (B2in) --}}
                 @if($itemType === 'media')
-                    <flux:select wire:model="mediaType" label="Medientyp">
-                        <option value="image">Bild</option>
-                        <option value="video">Video</option>
-                    </flux:select>
-                    <flux:select wire:model="mediaCategory" label="Kategorie">
-                        <option value="immobilien">Immobilien</option>
-                        <option value="moebel">Möbel</option>
-                    </flux:select>
                     <livewire:admin.cms.display-media-picker
                         :value="null"
                         field="mediaUrl"
-                        :type="$mediaType === 'video' ? 'video' : 'image'"
+                        type="all"
                         label="Aus Mediathek"
                         :key="'picker-media-' . ($itemId ?? 'new')" />
-                    <flux:input wire:model="mediaUrl" label="Medien-URL" placeholder="Wird automatisch gesetzt oder manuell eingeben..."
-                               description="Über die Mediathek auswählen oder direkt URL eingeben." />
+                    <div class="flex items-end gap-3">
+                        <x-media-thumb :url="$mediaUrl" />
+                        <flux:input wire:model.live.debounce.500ms="mediaUrl" label="Medien-URL" placeholder="Wird automatisch gesetzt oder manuell eingeben..."
+                                   description="Über die Mediathek auswählen oder direkt URL eingeben." class="flex-1" />
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <flux:text class="text-sm">{{ __('Medientyp:') }}</flux:text>
+                        <flux:badge size="sm" :color="$mediaType === 'video' ? 'purple' : 'sky'">
+                            {{ $mediaType === 'video' ? __('Video') : __('Bild') }}
+                        </flux:badge>
+                        <flux:text class="text-xs text-zinc-400">{{ __('wird automatisch aus dem gewählten Medium erkannt') }}</flux:text>
+                    </div>
+                    <flux:select wire:model="mediaCategory" label="Kategorie">
+                        <option value="immobilien">Immobilien</option>
+                        <option value="moebel">Möbel</option>
+                        <option value="sonstiges">Sonstiges</option>
+                    </flux:select>
                     <flux:input wire:model="mediaHeadline" label="Überschrift" placeholder="z.B. Ihr Zuhause. Weltweit." />
                     <flux:input wire:model="mediaSubline" label="Unterzeile" placeholder="z.B. Beratung und Vermittlung." />
                     @if($mediaType === 'image')
@@ -165,47 +176,79 @@
                     <flux:checkbox wire:model="mediaIsActive" label="Aktiv" />
                 @endif
 
-                {{-- Slide fields (Offers) --}}
+                {{-- Slide fields (Offers) – einheitliches Detail-Layout mit Ein-/Ausblende-Schaltern --}}
                 @if($itemType === 'slide')
-                    {{-- Basis --}}
-                    <flux:select wire:model.live="slideType" label="Slide-Typ">
-                        <option value="intro">Intro</option>
-                        <option value="product-hero">Produkt-Hero</option>
-                        <option value="product-details">Produkt-Details</option>
-                        <option value="product-impulse">Produkt-Impuls</option>
-                    </flux:select>
-                    <flux:input wire:model="slideDuration" type="number" min="1000" label="Dauer (ms)" />
-                    <livewire:admin.cms.display-media-picker
-                        :value="null"
-                        field="slideImageUrl"
-                        type="image"
-                        label="Bild aus Mediathek"
-                        :key="'picker-slide-' . ($itemId ?? 'new')" />
-                    <flux:input wire:model="slideImageUrl" label="Bild-URL" placeholder="Wird automatisch gesetzt oder manuell eingeben..."
-                               description="Über die Mediathek auswählen oder direkt URL eingeben." />
-                    <flux:input wire:model="slideBadge" label="Badge-Text" placeholder="z.B. Einzelstück" />
-                    <flux:input wire:model="slideEyebrow" label="Eyebrow" placeholder="z.B. Hersteller: Sudbrock" />
-                    <flux:input wire:model="slideTitle" label="Titel" placeholder="z.B. GOYA Sideboard" />
+                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
+                        {{ __('Jedes Angebot nutzt dasselbe Detail-Layout. Über die Schalter blendest du einzelne Bausteine ein oder aus und befüllst sie mit Inhalten.') }}
+                    </flux:text>
 
-                    {{-- Intro-spezifisch --}}
-                    @if($slideType === 'intro')
-                        <flux:input wire:model="slideDisclaimer" label="Disclaimer" placeholder="z.B. Zwischenverkauf vorbehalten" />
-                        <flux:checkbox wire:model="slideShowBrandText" label="Brand-Text anzeigen" />
-                        @if($slideShowBrandText)
-                            <flux:input wire:model="slideBrandTagline" label="Brand-Tagline" placeholder="z.B. Planung • Beratung • Lieferung & Montage" />
+                    {{-- Logo & Marke (Kopfbereich) --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('Logo & Marke') }}</flux:heading>
+                        <flux:switch wire:model.live="slideShowLogo" label="Logo & Marken-Text anzeigen"
+                                    description="Kopfbereich oben mit Logo, Marken-Text und Tagline." />
+                        @if($slideShowLogo)
+                            <livewire:admin.cms.display-media-picker
+                                :value="null"
+                                field="slideLogoUrl"
+                                type="image"
+                                label="Logo aus Mediathek"
+                                :key="'picker-slide-logo-' . ($itemId ?? 'new')" />
+                            <div class="flex items-end gap-3">
+                                <x-media-thumb :url="$slideLogoUrl" />
+                                <flux:input wire:model.live.debounce.500ms="slideLogoUrl" label="Logo-URL" placeholder="Standard: CABINET-Logo"
+                                           description="Leer = Standard-Logo wird genutzt." class="flex-1" />
+                            </div>
+                            <flux:input wire:model="slideBrandText" label="Marken-Text" placeholder="z.B. Bielefeld"
+                                       description="Text direkt neben dem Logo (optional)." />
+                            <flux:input wire:model="slideBrandTagline" label="Tagline" placeholder="z.B. Planung • Beratung • Lieferung & Montage"
+                                       description="Rechts im Kopfbereich (optional)." />
                         @endif
-                    @endif
+                    </div>
 
-                    {{-- Product-Hero --}}
-                    @if($slideType === 'product-hero')
-                        <flux:input wire:model="slidePrice" label="Preis" placeholder="z.B. 489 €" />
-                        <flux:input wire:model="slideOriginalPrice" label="Originalpreis" placeholder="z.B. statt 4.744 €" />
-                    @endif
+                    {{-- Bild & Badge (wichtigstes Element – farblich hervorgehoben) --}}
+                    <div class="space-y-4 rounded-xl border-2 border-blue-300 bg-blue-50/60 p-4 ring-1 ring-blue-200 dark:border-blue-700 dark:bg-blue-950/30 dark:ring-blue-900">
+                        <div class="flex items-center gap-2">
+                            <flux:heading size="sm">{{ __('Bild & Badge') }}</flux:heading>
+                            <flux:badge color="blue" size="sm">{{ __('Wichtigstes Element') }}</flux:badge>
+                        </div>
+                        <livewire:admin.cms.display-media-picker
+                            :value="null"
+                            field="slideImageUrl"
+                            type="image"
+                            label="Bild aus Mediathek"
+                            :key="'picker-slide-' . ($itemId ?? 'new')" />
+                        <div class="flex items-end gap-3">
+                            <x-media-thumb :url="$slideImageUrl" />
+                            <flux:input wire:model.live.debounce.500ms="slideImageUrl" label="Bild-URL" placeholder="Wird automatisch gesetzt oder manuell eingeben..."
+                                       description="Über die Mediathek auswählen oder direkt URL eingeben." class="flex-1" />
+                        </div>
+                        <flux:switch wire:model.live="slideShowBadge" label="Badge anzeigen" description="Kleine Markierung über dem Bild." />
+                        @if($slideShowBadge)
+                            <flux:input wire:model="slideBadge" label="Badge-Text" placeholder="z.B. Einzelstück" />
+                        @endif
+                    </div>
 
-                    {{-- Product-Details --}}
-                    @if($slideType === 'product-details')
-                        <div>
-                            <flux:heading size="sm" class="mb-2">{{ __('Aufzählungspunkte') }}</flux:heading>
+                    {{-- Texte --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('Texte') }}</flux:heading>
+                        <flux:input wire:model="slideTitle" label="Titel" placeholder="z.B. GOYA Sideboard"
+                                   description="Hauptüberschrift des Angebots (Zeilenumbruch mit Enter möglich)." />
+                        <flux:switch wire:model.live="slideShowEyebrow" label="Eyebrow anzeigen" description="Kleine Überzeile über dem Titel." />
+                        @if($slideShowEyebrow)
+                            <flux:input wire:model="slideEyebrow" label="Eyebrow" placeholder="z.B. Hersteller: Sudbrock" />
+                        @endif
+                        <flux:switch wire:model.live="slideShowSubline" label="Unterzeile anzeigen" />
+                        @if($slideShowSubline)
+                            <flux:input wire:model="slideSubline" label="Unterzeile" placeholder="z.B. Heute mitnehmen" />
+                        @endif
+                    </div>
+
+                    {{-- Aufzählung --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('Aufzählungspunkte') }}</flux:heading>
+                        <flux:switch wire:model.live="slideShowBullets" label="Aufzählung anzeigen" description="Liste mit Stichpunkten, z.B. Produktdetails." />
+                        @if($slideShowBullets)
                             <div class="space-y-2">
                                 @foreach($slideBullets as $i => $bullet)
                                     <div class="flex items-center gap-2" wire:key="bullet-{{ $i }}">
@@ -214,30 +257,58 @@
                                     </div>
                                 @endforeach
                             </div>
-                            <flux:button wire:click="addBullet" size="xs" variant="ghost" icon="plus" class="mt-2">
+                            <flux:button wire:click="addBullet" size="xs" variant="ghost" icon="plus">
                                 {{ __('Punkt hinzufügen') }}
                             </flux:button>
-                        </div>
-                    @endif
-
-                    {{-- Product-Impulse --}}
-                    @if($slideType === 'product-impulse')
-                        <flux:input wire:model="slideSubline" label="Subline" placeholder="z.B. Heute mitnehmen" />
-                        <flux:input wire:model="slidePrice" label="Preis" placeholder="z.B. 199 €" />
-                        <flux:input wire:model="slideTagText" label="Tag-Text" placeholder="z.B. Im Store verfügbar" />
-                    @endif
-
-                    {{-- QR --}}
-                    <div class="border-t border-zinc-200 dark:border-zinc-700 pt-4 mt-2">
-                        <flux:heading size="sm" class="mb-3">{{ __('QR-Code & Kontakt') }}</flux:heading>
-                        <div class="space-y-4">
-                            <flux:input wire:model="slideQrUrl" label="QR-URL" placeholder="z.B. https://cabinet-bielefeld.de" />
-                            <flux:input wire:model="slideQrTitle" label="QR-Titel" placeholder="z.B. Reservieren" />
-                            <flux:input wire:model="slideContact" label="Kontakt" placeholder="z.B. 0521 98620100 / Tel. oder WhatsApp" />
-                        </div>
+                        @endif
                     </div>
 
-                    <flux:checkbox wire:model="slideIsActive" label="Aktiv" />
+                    {{-- Preis --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('Preis') }}</flux:heading>
+                        <flux:switch wire:model.live="slideShowPrice" label="Preis anzeigen" />
+                        @if($slideShowPrice)
+                            <flux:input wire:model="slidePrice" label="Preis" placeholder="z.B. 489 €" />
+                            <flux:input wire:model="slideOriginalPrice" label="Originalpreis (optional)" placeholder="z.B. statt 4.744 €" />
+                            @if(trim($slideOriginalPrice) !== '')
+                                <flux:switch wire:model.live="slideStrikeOriginalPrice" label="Streichpreis"
+                                            description="Originalpreis wird rot durchgestrichen dargestellt." />
+                            @endif
+                            <flux:input wire:model="slideTagText" label="Hinweis-Tag (optional)" placeholder="z.B. Im Store verfügbar" />
+                        @endif
+                    </div>
+
+                    {{-- Hinweis --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('Hinweis') }}</flux:heading>
+                        <flux:switch wire:model.live="slideShowDisclaimer" label="Disclaimer anzeigen" />
+                        @if($slideShowDisclaimer)
+                            <flux:input wire:model="slideDisclaimer" label="Disclaimer" placeholder="z.B. Zwischenverkauf vorbehalten" />
+                        @endif
+                    </div>
+
+                    {{-- QR & Kontakt --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('QR-Code & Kontakt') }}</flux:heading>
+                        <flux:switch wire:model.live="slideShowQr" label="QR-Code anzeigen" />
+                        @if($slideShowQr)
+                            <flux:input wire:model="slideQrUrl" label="QR-URL" placeholder="z.B. https://cabinet-bielefeld.de"
+                                       description="Leer = es wird die Web/QR-URL aus den Einstellungen genutzt." />
+                            <flux:input wire:model="slideQrTitle" label="QR-Titel" placeholder="z.B. Reservieren" />
+                        @endif
+                        <flux:switch wire:model.live="slideShowContact" label="Kontakt anzeigen" />
+                        @if($slideShowContact)
+                            <flux:input wire:model="slideContact" label="Kontakt" placeholder="z.B. 0521 98620100 / Tel. oder WhatsApp" />
+                        @endif
+                    </div>
+
+                    {{-- Anzeige --}}
+                    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
+                        <flux:heading size="sm">{{ __('Anzeige') }}</flux:heading>
+                        <flux:input wire:model="slideDuration" type="number" min="1000" step="500" label="Dauer (ms)"
+                                   description="Wie lange dieses Angebot eingeblendet wird." />
+                        <flux:switch wire:model="slideIsActive" label="Aktiv" description="Inaktive Angebote werden im Display übersprungen." />
+                    </div>
                 @endif
 
                 <div class="space-y-3 border-t border-zinc-200 pt-6 dark:border-zinc-700">
@@ -246,22 +317,37 @@
                         <flux:subheading>{{ __('Zeigt nur den aktuell bearbeiteten Inhalt im Display-Player') }}</flux:subheading>
                     </div>
 
-                    <div class="mx-auto aspect-[9/16] w-full max-w-[320px] overflow-hidden rounded-xl border border-zinc-200 bg-black shadow-sm dark:border-zinc-700">
+                    {{-- Stable iframe element: only its `src` changes between the
+                         "new" (about:blank) and "saved" state. Swapping the element
+                         structure inside the teleported Flux modal crashes Livewire's
+                         morph/cleanup, so we keep the DOM shape constant. --}}
+                    <div class="relative mx-auto aspect-[9/16] w-full max-w-[320px] overflow-hidden rounded-xl border border-zinc-200 bg-black shadow-sm dark:border-zinc-700">
                         <iframe
-                            wire:key="item-modal-module-preview-{{ $previewFrameRefreshCounter }}"
-                            src="{{ $this->itemPreviewUrl() }}"
+                            wire:key="item-modal-preview"
+                            src="{{ $itemId ? $this->itemPreviewUrl() : 'about:blank' }}"
                             class="h-full w-full border-0"
                             loading="lazy"
                             title="{{ __('Einzel-Vorschau im Bearbeiten-Dialog') }}"
                         ></iframe>
+
+                        @unless($itemId)
+                            <div class="absolute inset-0 flex items-center justify-center bg-zinc-50 text-center dark:bg-zinc-900">
+                                <div class="px-6 text-sm text-zinc-500 dark:text-zinc-400">
+                                    <flux:icon.eye class="mx-auto mb-2 h-8 w-8 opacity-40" />
+                                    {{ __('Die Vorschau erscheint, sobald der Inhalt gespeichert wurde.') }}
+                                </div>
+                            </div>
+                        @endunless
                     </div>
 
-                    <a href="{{ $this->itemPreviewUrl() }}"
-                       target="_blank"
-                       class="mx-auto flex max-w-[320px] items-center justify-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400">
-                        <flux:icon.arrow-top-right-on-square class="w-3 h-3" />
-                        {{ __('Vollbild öffnen') }}
-                    </a>
+                    @if($itemId)
+                        <a href="{{ $this->itemPreviewUrl() }}"
+                           target="_blank"
+                           class="mx-auto flex max-w-[320px] items-center justify-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400">
+                            <flux:icon.arrow-top-right-on-square class="w-3 h-3" />
+                            {{ __('Vollbild öffnen') }}
+                        </a>
+                    @endif
                 </div>
 
                 <div class="flex flex-wrap justify-end gap-3 border-t border-zinc-200 pt-4 dark:border-zinc-700">
diff --git a/resources/views/livewire/admin/cms/display-version-list.blade.php b/resources/views/livewire/admin/cms/display-version-list.blade.php
index 69866d0..4caecae 100644
--- a/resources/views/livewire/admin/cms/display-version-list.blade.php
+++ b/resources/views/livewire/admin/cms/display-version-list.blade.php
@@ -10,6 +10,15 @@
         </x-success-alert>
     @endif
 
+    @if (session()->has('error'))
+        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/20">
+            <div class="flex items-start gap-3">
+                <flux:icon.exclamation-circle class="mt-0.5 h-5 w-5 shrink-0 text-red-600 dark:text-red-400" />
+                <p class="text-sm font-medium text-red-800 dark:text-red-200">{{ session('error') }}</p>
+            </div>
+        </div>
+    @endif
+
     <flux:card>
         <div class="flex items-center justify-between mb-6">
             <div>
diff --git a/resources/views/livewire/admin/cms/partials/version-editor-offers.blade.php b/resources/views/livewire/admin/cms/partials/version-editor-offers.blade.php
index 29eccd3..dfbc8e6 100644
--- a/resources/views/livewire/admin/cms/partials/version-editor-offers.blade.php
+++ b/resources/views/livewire/admin/cms/partials/version-editor-offers.blade.php
@@ -6,18 +6,18 @@
 <flux:card>
     <div class="flex items-center justify-between mb-6">
         <div>
-            <flux:heading size="lg">{{ __('Slides') }}</flux:heading>
-            <flux:subheading>{{ __('Angebots-Slides werden in der angegebenen Reihenfolge angezeigt') }}</flux:subheading>
+            <flux:heading size="lg">{{ __('Angebote') }}</flux:heading>
+            <flux:subheading>{{ __('Angebote werden im einheitlichen Detail-Layout in der angegebenen Reihenfolge angezeigt') }}</flux:subheading>
         </div>
         <flux:button wire:click="openItemModal(null, 'slide')" icon="plus">
-            {{ __('Slide hinzufügen') }}
+            {{ __('Angebot hinzufügen') }}
         </flux:button>
     </div>
 
     @if($slides->isEmpty())
         <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
             <flux:icon.presentation-chart-bar class="w-16 h-16 mx-auto mb-4 opacity-50" />
-            <p>{{ __('Noch keine Slides vorhanden.') }}</p>
+            <p>{{ __('Noch keine Angebote vorhanden.') }}</p>
         </div>
     @else
         <div class="space-y-3">
@@ -42,29 +42,30 @@
                     </div>
 
                     <div class="flex-1 min-w-0">
+                        @php
+                            $c = $item->content;
+                            $enabledBlocks = collect([
+                                'Badge' => ($c['show_badge'] ?? ! empty($c['badge_text'])) && ! empty($c['badge_text']),
+                                'Aufzählung' => ($c['show_bullets'] ?? ! empty($c['bullets'])) && ! empty($c['bullets']),
+                                'Preis' => ($c['show_price'] ?? ! empty($c['price'])) && ! empty($c['price']),
+                                'QR' => ($c['show_qr'] ?? ! empty($c['qr_url'])) && ! empty($c['qr_url']),
+                                'Kontakt' => ($c['show_contact'] ?? ! empty($c['contact'])) && ! empty($c['contact']),
+                            ])->filter()->keys();
+                        @endphp
                         <div class="flex items-center gap-3 mb-1">
                             <flux:badge :color="$item->is_active ? 'green' : 'zinc'" size="sm">
                                 {{ $item->is_active ? __('Aktiv') : __('Inaktiv') }}
                             </flux:badge>
-                            <flux:badge color="amber" size="sm">
-                                {{ match($item->content['type'] ?? '') {
-                                    'intro' => 'Intro',
-                                    'product-hero' => 'Produkt-Hero',
-                                    'product-details' => 'Produkt-Details',
-                                    'product-impulse' => 'Produkt-Impuls',
-                                    default => $item->content['type'] ?? '–',
-                                } }}
-                            </flux:badge>
-                            <span class="font-semibold text-sm">{{ $item->content['title'] ?? '–' }}</span>
+                            <span class="font-semibold text-sm truncate">{{ $c['title'] ?? '–' }}</span>
                         </div>
-                        <div class="text-xs text-zinc-600 dark:text-zinc-400 space-x-4">
-                            @if(!empty($item->content['price']))
-                                <span class="font-medium">{{ $item->content['price'] }}</span>
-                            @endif
-                            <span>{{ number_format(($item->content['duration'] ?? 8000) / 1000, 1) }}s</span>
-                            @if(!empty($item->content['badge_text']))
-                                <span>{{ $item->content['badge_text'] }}</span>
+                        <div class="flex flex-wrap items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
+                            <span>{{ number_format(($c['duration'] ?? 8000) / 1000, 1) }}s</span>
+                            @if(!empty($c['price']) && ($c['show_price'] ?? ! empty($c['price'])))
+                                <span class="font-medium">{{ $c['price'] }}</span>
                             @endif
+                            @foreach($enabledBlocks as $block)
+                                <flux:badge color="zinc" size="sm">{{ $block }}</flux:badge>
+                            @endforeach
                         </div>
                     </div>
 
diff --git a/resources/views/livewire/admin/cms/partials/version-editor-settings.blade.php b/resources/views/livewire/admin/cms/partials/version-editor-settings.blade.php
index 91180e8..ceda105 100644
--- a/resources/views/livewire/admin/cms/partials/version-editor-settings.blade.php
+++ b/resources/views/livewire/admin/cms/partials/version-editor-settings.blade.php
@@ -1,25 +1,74 @@
 @if($version->type->value === 'b2in')
+    @php
+        $footerShown = ($settings['show_footer'] ?? true) !== false;
+        $showLogo = ($settings['show_logo'] ?? true) !== false;
+        $showClaim = ($settings['show_claim'] ?? true) !== false;
+        $logoPos = $settings['logo_position'] ?? 'top-left';
+        $claimPos = $settings['claim_position'] ?? 'top-right';
+        $brandPositions = [
+            'top-left' => __('Oben links'),
+            'top-right' => __('Oben rechts'),
+            'bottom-left' => __('Unten links'),
+            'bottom-right' => __('Unten rechts'),
+        ];
+    @endphp
     <flux:select wire:model="settings.theme" label="Theme">
         <option value="dark">Dark</option>
         <option value="light">Light</option>
     </flux:select>
     <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
-        <flux:heading size="sm">{{ __('Header') }}</flux:heading>
+        <flux:heading size="sm">{{ __('Marke') }}</flux:heading>
+        <flux:subheading>{{ __('Logo und Claim. Standardmäßig oben im Header. Die Ecken lassen sich frei wählen.') }}</flux:subheading>
         <livewire:admin.cms.display-media-picker
             :value="null"
             field="settings.header_logo_url"
             type="image"
-            label="Header-Logo aus Mediathek"
+            label="Logo aus Mediathek"
             :key="'picker-b2in-header-logo-' . $context . '-' . $version->id" />
-        <flux:input wire:model="settings.header_logo_url" label="Header-Logo URL" placeholder="../assets/b2in-logo-positive.svg" />
+        <div class="flex items-end gap-3">
+            <x-media-thumb :url="$settings['header_logo_url'] ?? ''" />
+            <flux:input wire:model.live.debounce.500ms="settings.header_logo_url" label="Logo URL" placeholder="../assets/b2in-logo-positive.svg" class="flex-1" />
+        </div>
         <flux:input wire:model="settings.header_claim" label="Claim" placeholder="Connecting Design & Property" />
+
+        <div class="flex flex-wrap gap-6">
+            <flux:switch wire:model.live="settings.show_logo" label="Logo anzeigen" />
+            <flux:switch wire:model.live="settings.show_claim" label="Claim anzeigen" />
+        </div>
+
+        @if($showLogo)
+            <flux:select wire:model.live="settings.logo_position" label="Logo-Position">
+                @foreach($brandPositions as $value => $label)
+                    <option value="{{ $value }}" @disabled($footerShown && str_starts_with($value, 'bottom'))>{{ $label }}</option>
+                @endforeach
+            </flux:select>
+        @endif
+
+        @if($showClaim)
+            <flux:select wire:model.live="settings.claim_position" label="Claim-Position">
+                @foreach($brandPositions as $value => $label)
+                    <option value="{{ $value }}"
+                        @disabled(($showLogo && $value === $logoPos) || ($footerShown && str_starts_with($value, 'bottom')))>
+                        {{ $label }}{{ ($showLogo && $value === $logoPos) ? ' '.__('(Logo)') : '' }}
+                    </option>
+                @endforeach
+            </flux:select>
+        @endif
+
+        @if($footerShown)
+            <flux:callout variant="secondary" icon="information-circle">
+                <flux:callout.text>{{ __('Untere Ecken sind nur verfügbar, wenn der Footer ausgeblendet ist.') }}</flux:callout.text>
+            </flux:callout>
+        @endif
     </div>
     <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
         <flux:heading size="sm">{{ __('Footer & QR') }}</flux:heading>
+        <flux:switch wire:model.live="settings.show_footer" label="Footer anzeigen"
+            description="Blendet die Fußzeile mit Domain, Name und QR-Code ein oder aus." />
         <flux:input wire:model="settings.footer_prefix" label="Footer-Präfix" placeholder="by" />
         <flux:input wire:model="settings.footer_name" label="Footer Name" placeholder="z.B. Marcel Scheibe" />
-        <flux:input wire:model="settings.footer_url" label="Footer Domain" placeholder="z.B. b2in.de" />
-        <flux:input wire:model="settings.qr_url" label="QR-URL (optional)" placeholder="https://b2in.de"
+        <flux:input wire:model="settings.footer_url" label="Footer Domain" placeholder="z.B. b2in.eu" />
+        <flux:input wire:model="settings.qr_url" label="QR-URL (optional)" placeholder="https://b2in.e"
                     description="Leer = QR-Code nutzt die Footer-Domain." />
     </div>
     <flux:select wire:model="settings.transition.type" label="Transition">
@@ -32,30 +81,14 @@
     <flux:checkbox wire:model="settings.display_active" label="Display aktiv" />
 @elseif($version->type->value === 'offers')
     <flux:checkbox wire:model="settings.loop" label="Endlosschleife" />
-    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
-        <flux:heading size="sm">{{ __('Branding') }}</flux:heading>
-        <livewire:admin.cms.display-media-picker
-            :value="null"
-            field="settings.logo_url"
-            type="image"
-            label="Logo aus Mediathek"
-            :key="'picker-offers-logo-' . $context . '-' . $version->id" />
-        <flux:input wire:model="settings.logo_url" label="Logo URL" placeholder="../logo-cabinet-300.png" />
-        <flux:input wire:model="settings.brand_text" label="Brand-Text" placeholder="Bielefeld" />
-    </div>
-    <div class="space-y-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
-        <flux:heading size="sm">{{ __('Footer & QR für alle Slides') }}</flux:heading>
-        <flux:input wire:model="settings.footer_claim" label="Footer-Claim" placeholder="z.B. Planung • Beratung • Lieferung & Montage" />
-        <flux:input wire:model="settings.footer_url" label="Web/QR-URL" placeholder="https://cabinet-bielefeld.de"
-                    description="Wird als QR-Ziel genutzt, wenn der einzelne Slide keine eigene QR-URL hat." />
-        <flux:input wire:model="settings.qr_default_title" label="Standard QR-Titel" placeholder="Kontakt" />
-        <flux:input wire:model="settings.qr_subtitle" label="QR-Unterzeile" placeholder="QR scannen" />
-    </div>
     <flux:select wire:model="settings.transition.type" label="Transition">
         <option value="fade">Fade</option>
         <option value="slide">Slide</option>
     </flux:select>
     <flux:input wire:model="settings.transition.duration" type="number" label="Transition-Dauer (ms)" />
+    <flux:callout variant="secondary" icon="information-circle">
+        <flux:callout.text>{{ __('Logo, Marken-Text, QR-Code und Kontakt werden je Angebot direkt am Element gepflegt.') }}</flux:callout.text>
+    </flux:callout>
 @elseif($version->type->value === 'video-display')
     <flux:input wire:model="settings.qr_label" label="QR-Label im Footer" placeholder="Website" />
 @endif
diff --git a/resources/views/livewire/admin/cms/partials/version-editor-video.blade.php b/resources/views/livewire/admin/cms/partials/version-editor-video.blade.php
index 4d727c3..53f59ae 100644
--- a/resources/views/livewire/admin/cms/partials/version-editor-video.blade.php
+++ b/resources/views/livewire/admin/cms/partials/version-editor-video.blade.php
@@ -16,40 +16,43 @@
         </flux:button>
     </div>
 
-    @if($videos->isEmpty())
+    @if ($videos->isEmpty())
         <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
             <flux:icon.film class="w-16 h-16 mx-auto mb-4 opacity-50" />
             <p>{{ __('Noch keine Videos vorhanden.') }}</p>
         </div>
     @else
         <div class="space-y-3">
-            @foreach($videos as $index => $item)
+            @foreach ($videos as $index => $item)
                 <div wire:key="item-{{ $item->id }}"
-                     class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 transition">
+                    class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 transition">
 
                     <div class="flex flex-col gap-1">
-                        @if($index > 0)
-                            <flux:button wire:click="moveItem({{ $item->id }}, 'up')" size="xs" variant="ghost" icon="chevron-up" class="text-zinc-400 hover:text-zinc-600"></flux:button>
+                        @if ($index > 0)
+                            <flux:button wire:click="moveItem({{ $item->id }}, 'up')" size="xs" variant="ghost"
+                                icon="chevron-up" class="text-zinc-400 hover:text-zinc-600"></flux:button>
                         @endif
-                        @if($index < count($videos) - 1)
-                            <flux:button wire:click="moveItem({{ $item->id }}, 'down')" size="xs" variant="ghost" icon="chevron-down" class="text-zinc-400 hover:text-zinc-600"></flux:button>
+                        @if ($index < count($videos) - 1)
+                            <flux:button wire:click="moveItem({{ $item->id }}, 'down')" size="xs"
+                                variant="ghost" icon="chevron-down" class="text-zinc-400 hover:text-zinc-600">
+                            </flux:button>
                         @endif
                     </div>
 
-                    <div class="flex h-16 w-12 shrink-0 items-center justify-center rounded-lg bg-black text-[10px] font-semibold uppercase text-white">
-                        Video
-                    </div>
+                    <x-media-thumb :url="$item->content['filename'] ?? ''" size="h-16 w-12" />
 
                     <div class="flex-1 min-w-0">
                         <div class="flex items-center gap-3 mb-1">
                             <flux:badge :color="$item->is_active ? 'green' : 'zinc'" size="sm">
                                 {{ $item->is_active ? __('Aktiv') : __('Inaktiv') }}
                             </flux:badge>
-                            <span class="font-semibold text-sm">{{ $item->content['title'] ?? $item->content['filename'] ?? '–' }}</span>
+                            <span
+                                class="font-semibold text-sm">{{ $item->content['title'] ?? ($item->content['filename'] ?? '–') }}</span>
                         </div>
                         @php
                             $videoSource = $item->content['filename'] ?? '';
-                            $isMediaLibrarySource = str_starts_with($videoSource, '/storage/') || str_starts_with($videoSource, 'http');
+                            $isMediaLibrarySource =
+                                str_starts_with($videoSource, '/storage/') || str_starts_with($videoSource, 'http');
                         @endphp
                         <div class="flex flex-wrap items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
                             <flux:badge size="sm" :color="$isMediaLibrarySource ? 'sky' : 'zinc'">
@@ -61,9 +64,13 @@
                     </div>
 
                     <div class="flex items-center gap-2">
-                        <flux:button wire:click="toggleItemStatus({{ $item->id }})" size="sm" variant="ghost" :icon="$item->is_active ? 'eye-slash' : 'eye'"></flux:button>
-                        <flux:button wire:click="openItemModal({{ $item->id }})" size="sm" variant="ghost" icon="pencil"></flux:button>
-                        <flux:button wire:click="deleteItem({{ $item->id }})" wire:confirm="Möchten Sie diesen Eintrag wirklich löschen?" size="sm" variant="ghost" icon="trash" class="text-red-600 hover:text-red-700"></flux:button>
+                        <flux:button wire:click="toggleItemStatus({{ $item->id }})" size="sm" variant="ghost"
+                            :icon="$item->is_active ? 'eye-slash' : 'eye'"></flux:button>
+                        <flux:button wire:click="openItemModal({{ $item->id }})" size="sm" variant="ghost"
+                            icon="pencil"></flux:button>
+                        <flux:button wire:click="deleteItem({{ $item->id }})"
+                            wire:confirm="Möchten Sie diesen Eintrag wirklich löschen?" size="sm" variant="ghost"
+                            icon="trash" class="text-red-600 hover:text-red-700"></flux:button>
                     </div>
                 </div>
             @endforeach
@@ -76,34 +83,40 @@
     <div class="flex items-center justify-between mb-6">
         <div>
             <flux:heading size="lg">{{ __('Footer-Inhalte') }}</flux:heading>
-            <flux:subheading>{{ __('Inhalte werden im Footer rotiert') }}</flux:subheading>
+            <flux:subheading>{{ __('Inhalte werden im Footer rotiert / ohne Inhalte bleibt der untere Teil frei.') }}
+            </flux:subheading>
         </div>
         <flux:button wire:click="openItemModal(null, 'footer')" icon="plus">
             {{ __('Inhalt hinzufügen') }}
         </flux:button>
     </div>
 
-    @if($footers->isEmpty())
+    @if ($footers->isEmpty())
         <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
             <flux:icon.document-text class="w-16 h-16 mx-auto mb-4 opacity-50" />
             <p>{{ __('Noch keine Footer-Inhalte vorhanden.') }}</p>
         </div>
     @else
         <div class="space-y-3">
-            @foreach($footers as $index => $item)
+            @foreach ($footers as $index => $item)
                 <div wire:key="item-{{ $item->id }}"
-                     class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 transition">
+                    class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 transition">
 
                     <div class="flex flex-col gap-1">
-                        @if($index > 0)
-                            <flux:button wire:click="moveItem({{ $item->id }}, 'up')" size="xs" variant="ghost" icon="chevron-up" class="text-zinc-400 hover:text-zinc-600"></flux:button>
+                        @if ($index > 0)
+                            <flux:button wire:click="moveItem({{ $item->id }}, 'up')" size="xs"
+                                variant="ghost" icon="chevron-up" class="text-zinc-400 hover:text-zinc-600">
+                            </flux:button>
                         @endif
-                        @if($index < count($footers) - 1)
-                            <flux:button wire:click="moveItem({{ $item->id }}, 'down')" size="xs" variant="ghost" icon="chevron-down" class="text-zinc-400 hover:text-zinc-600"></flux:button>
+                        @if ($index < count($footers) - 1)
+                            <flux:button wire:click="moveItem({{ $item->id }}, 'down')" size="xs"
+                                variant="ghost" icon="chevron-down" class="text-zinc-400 hover:text-zinc-600">
+                            </flux:button>
                         @endif
                     </div>
 
-                    <div class="flex h-16 w-12 shrink-0 flex-col justify-end rounded-lg bg-zinc-900 p-1 text-[8px] text-white">
+                    <div
+                        class="flex h-16 w-12 shrink-0 flex-col justify-end rounded-lg bg-zinc-900 p-1 text-[8px] text-white">
                         <div class="truncate text-zinc-400">{{ $item->content['headline'] ?? 'Footer' }}</div>
                         <div class="truncate font-semibold">{{ $item->content['subline'] ?? '' }}</div>
                     </div>
@@ -117,16 +130,20 @@
                         </div>
                         <div class="text-xs text-zinc-600 dark:text-zinc-400">
                             {{ $item->content['subline'] ?? '' }}
-                            @if(!empty($item->content['url']))
+                            @if (!empty($item->content['url']))
                                 <span class="ml-2">{{ Str::limit($item->content['url'], 40) }}</span>
                             @endif
                         </div>
                     </div>
 
                     <div class="flex items-center gap-2">
-                        <flux:button wire:click="toggleItemStatus({{ $item->id }})" size="sm" variant="ghost" :icon="$item->is_active ? 'eye-slash' : 'eye'"></flux:button>
-                        <flux:button wire:click="openItemModal({{ $item->id }})" size="sm" variant="ghost" icon="pencil"></flux:button>
-                        <flux:button wire:click="deleteItem({{ $item->id }})" wire:confirm="Möchten Sie diesen Eintrag wirklich löschen?" size="sm" variant="ghost" icon="trash" class="text-red-600 hover:text-red-700"></flux:button>
+                        <flux:button wire:click="toggleItemStatus({{ $item->id }})" size="sm" variant="ghost"
+                            :icon="$item->is_active ? 'eye-slash' : 'eye'"></flux:button>
+                        <flux:button wire:click="openItemModal({{ $item->id }})" size="sm" variant="ghost"
+                            icon="pencil"></flux:button>
+                        <flux:button wire:click="deleteItem({{ $item->id }})"
+                            wire:confirm="Möchten Sie diesen Eintrag wirklich löschen?" size="sm" variant="ghost"
+                            icon="trash" class="text-red-600 hover:text-red-700"></flux:button>
                     </div>
                 </div>
             @endforeach
diff --git a/resources/views/livewire/admin/hubs/manage.blade.php b/resources/views/livewire/admin/hubs/manage.blade.php
index 59cb86f..25aa71b 100644
--- a/resources/views/livewire/admin/hubs/manage.blade.php
+++ b/resources/views/livewire/admin/hubs/manage.blade.php
@@ -35,26 +35,26 @@ mount(function ($hubId = null) {
 
 // Auto-generate slug from name
 $updatedName = function ($value) {
-    if (!$this->hubId) { // Only auto-generate for new hubs
+    if (!$this->hubId) {
+        // Only auto-generate for new hubs
         $this->slug = \Illuminate\Support\Str::slug($value);
     }
 };
 
 $locations = computed(function () {
-    if (!$this->hubId) return collect();
+    if (!$this->hubId) {
+        return collect();
+    }
 
-    return \App\Models\HubLocation::where('hub_id', $this->hubId)
-        ->when($this->zipSearch, fn($q) => $q->where('zip_code', 'like', "%{$this->zipSearch}%")
-            ->orWhere('city_name', 'like', "%{$this->zipSearch}%"))
-        ->orderBy('zip_code')
-        ->paginate(50);
+    return \App\Models\HubLocation::where('hub_id', $this->hubId)->when($this->zipSearch, fn($q) => $q->where('zip_code', 'like', "%{$this->zipSearch}%")->orWhere('city_name', 'like', "%{$this->zipSearch}%"))->orderBy('zip_code')->paginate(50);
 });
 
 $partners = computed(function () {
-    if (!$this->hubId) return collect();
+    if (!$this->hubId) {
+        return collect();
+    }
 
-    return \App\Models\Partner::where('hub_id', $this->hubId)
-        ->get();
+    return \App\Models\Partner::where('hub_id', $this->hubId)->get();
 });
 
 // Dummy save function
@@ -103,12 +103,12 @@ $deleteLocation = function ($id) {
 
     {{-- Flash Message --}}
     @if (session()->has('message'))
-    <flux:card class="p-4 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
-        <div class="flex items-center gap-3">
-            <flux:icon.check-circle class="h-5 w-5 text-green-600 dark:text-green-400" />
-            <span class="text-sm text-green-900 dark:text-green-100">{{ session('message') }}</span>
-        </div>
-    </flux:card>
+        <flux:card class="p-4 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
+            <div class="flex items-center gap-3">
+                <flux:icon.check-circle class="h-5 w-5 text-green-600 dark:text-green-400" />
+                <span class="text-sm text-green-900 dark:text-green-100">{{ session('message') }}</span>
+            </div>
+        </flux:card>
     @endif
 
     {{-- Tabs --}}
@@ -119,364 +119,360 @@ $deleteLocation = function ($id) {
     </flux:tabs>
 
     {{-- TAB 1: Identität & Design --}}
-    @if($activeTab === 'identity')
-    <flux:card class="p-6 space-y-6">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            {{-- Basis-Informationen --}}
-            <div class="space-y-6">
-                <flux:field>
-                    <flux:label>{{ __('Hub-Name') }} <span class="text-red-500">*</span></flux:label>
-                    <flux:input wire:model.live="name" placeholder="Ostwestfalen-Lippe" />
-                    <flux:description>{{ __('Wird dem Kunden angezeigt, z.B. "Region Ostwestfalen-Lippe"') }}</flux:description>
-                </flux:field>
+    @if ($activeTab === 'identity')
+        <flux:card class="p-6 space-y-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {{-- Basis-Informationen --}}
+                <div class="space-y-6">
+                    <flux:field>
+                        <flux:label>{{ __('Hub-Name') }} <span class="text-red-500">*</span></flux:label>
+                        <flux:input wire:model.live="name" placeholder="Ostwestfalen-Lippe" />
+                        <flux:description>{{ __('Wird dem Kunden angezeigt, z.B. "Region Ostwestfalen-Lippe"') }}
+                        </flux:description>
+                    </flux:field>
 
-                <flux:field>
-                    <flux:label>{{ __('URL-Slug') }} <span class="text-red-500">*</span></flux:label>
-                    <flux:input wire:model="slug" placeholder="owl" />
-                    <flux:description>{{ __('Für saubere URLs, z.B. b2in.de/region/owl') }}</flux:description>
-                </flux:field>
+                    <flux:field>
+                        <flux:label>{{ __('URL-Slug') }} <span class="text-red-500">*</span></flux:label>
+                        <flux:input wire:model="slug" placeholder="owl" />
+                        <flux:description>{{ __('Für saubere URLs, z.B. b2in.eu/region/owl') }}</flux:description>
+                    </flux:field>
 
-                <flux:field>
-                    <flux:label>{{ __('Status') }}</flux:label>
-                    <flux:checkbox wire:model="is_active">
-                        {{ __('Hub ist aktiv und für Kunden sichtbar') }}
-                    </flux:checkbox>
-                    <flux:description>
-                        {{ __('Inaktive Hubs sind im "Coming Soon"-Modus') }}
-                    </flux:description>
-                </flux:field>
-            </div>
+                    <flux:field>
+                        <flux:label>{{ __('Status') }}</flux:label>
+                        <flux:checkbox wire:model="is_active">
+                            {{ __('Hub ist aktiv und für Kunden sichtbar') }}
+                        </flux:checkbox>
+                        <flux:description>
+                            {{ __('Inaktive Hubs sind im "Coming Soon"-Modus') }}
+                        </flux:description>
+                    </flux:field>
+                </div>
 
-            {{-- Vorschau --}}
-            <div class="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
-                <h4 class="font-semibold mb-3 text-zinc-900 dark:text-zinc-100">{{ __('Vorschau: Kunden-Landingpage') }}</h4>
-                <div class="relative h-48 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-700 shadow-lg">
-                    @if($keyvisual)
-                    <img src="{{ $keyvisual }}" class="w-full h-full object-cover" alt="Keyvisual" />
-                    @else
-                    <div class="flex items-center justify-center h-full">
-                        <div class="text-center">
-                            <flux:icon.photo class="w-12 h-12 text-zinc-400 mx-auto mb-2" />
-                            <p class="text-sm text-zinc-500">{{ __('Keyvisual hochladen') }}</p>
+                {{-- Vorschau --}}
+                <div class="p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg">
+                    <h4 class="font-semibold mb-3 text-zinc-900 dark:text-zinc-100">
+                        {{ __('Vorschau: Kunden-Landingpage') }}</h4>
+                    <div class="relative h-48 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-700 shadow-lg">
+                        @if ($keyvisual)
+                            <img src="{{ $keyvisual }}" class="w-full h-full object-cover" alt="Keyvisual" />
+                        @else
+                            <div class="flex items-center justify-center h-full">
+                                <div class="text-center">
+                                    <flux:icon.photo class="w-12 h-12 text-zinc-400 mx-auto mb-2" />
+                                    <p class="text-sm text-zinc-500">{{ __('Keyvisual hochladen') }}</p>
+                                </div>
+                            </div>
+                        @endif
+                        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
+                            <h3 class="text-xl font-bold text-white">
+                                {{ $name ?: __('Ihr Hub-Name') }}
+                            </h3>
+                            <p class="text-sm text-zinc-200">
+                                {{ __('Die besten Marken Europas, von Händlern aus Ihrer Nachbarschaft') }}
+                            </p>
                         </div>
+                        @if ($emblem)
+                            <div class="absolute top-3 right-3 w-12 h-12 bg-white rounded-full p-2 shadow-lg">
+                                <img src="{{ $emblem }}" alt="Emblem" class="w-full h-full object-contain" />
+                            </div>
+                        @endif
                     </div>
-                    @endif
-                    <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
-                        <h3 class="text-xl font-bold text-white">
-                            {{ $name ?: __('Ihr Hub-Name') }}
-                        </h3>
-                        <p class="text-sm text-zinc-200">
-                            {{ __('Die besten Marken Europas, von Händlern aus Ihrer Nachbarschaft') }}
-                        </p>
-                    </div>
-                    @if($emblem)
-                    <div class="absolute top-3 right-3 w-12 h-12 bg-white rounded-full p-2 shadow-lg">
-                        <img src="{{ $emblem }}" alt="Emblem" class="w-full h-full object-contain" />
-                    </div>
-                    @endif
                 </div>
             </div>
-        </div>
 
-        <flux:separator />
+            <flux:separator />
 
-        {{-- Keyvisual Upload --}}
-        <flux:field>
-            <flux:label>{{ __('Keyvisual (Hintergrundbild)') }}</flux:label>
-            {{-- <flux:input type="file" wire:model="keyvisual" accept="image/*" /> --}}
-            <flux:description>
-                {{ __('Atmosphärisches Regionalbild für emotionalen Einstieg') }}
-                <br>
-                <span class="text-xs">
-                    {{ __('Beispiele: Hermannsdenkmal (OWL), Skyline (Frankfurt), Hafen (Hamburg)') }}
-                    • {{ __('Empfohlen: 1920x800px, max. 2MB') }}
-                </span>
-            </flux:description>
-        </flux:field>
+            {{-- Keyvisual Upload --}}
+            <flux:field>
+                <flux:label>{{ __('Keyvisual (Hintergrundbild)') }}</flux:label>
+                {{-- <flux:input type="file" wire:model="keyvisual" accept="image/*" /> --}}
+                <flux:description>
+                    {{ __('Atmosphärisches Regionalbild für emotionalen Einstieg') }}
+                    <br>
+                    <span class="text-xs">
+                        {{ __('Beispiele: Hermannsdenkmal (OWL), Skyline (Frankfurt), Hafen (Hamburg)') }}
+                        • {{ __('Empfohlen: 1920x800px, max. 2MB') }}
+                    </span>
+                </flux:description>
+            </flux:field>
 
-        {{-- Wappen Upload --}}
-        <flux:field>
-            <flux:label>{{ __('Wappen / Emblem') }}</flux:label>
-            {{-- <flux:input type="file" wire:model="emblem" accept="image/*" /> --}}
-            <flux:description>
-                {{ __('Offizielles Wappen oder Logo der Region für Vertrauen & Offizialität') }}
-                <br>
-                <span class="text-xs">
-                    {{ __('Beispiele: Sparrenburg-Logo, Landeswappen') }}
-                    • {{ __('Empfohlen: 256x256px, PNG mit transparentem Hintergrund') }}
-                </span>
-            </flux:description>
-        </flux:field>
-    </flux:card>
+            {{-- Wappen Upload --}}
+            <flux:field>
+                <flux:label>{{ __('Wappen / Emblem') }}</flux:label>
+                {{-- <flux:input type="file" wire:model="emblem" accept="image/*" /> --}}
+                <flux:description>
+                    {{ __('Offizielles Wappen oder Logo der Region für Vertrauen & Offizialität') }}
+                    <br>
+                    <span class="text-xs">
+                        {{ __('Beispiele: Sparrenburg-Logo, Landeswappen') }}
+                        • {{ __('Empfohlen: 256x256px, PNG mit transparentem Hintergrund') }}
+                    </span>
+                </flux:description>
+            </flux:field>
+        </flux:card>
     @endif
 
     {{-- TAB 2: Geografie & PLZ --}}
-    @if($activeTab === 'geography')
-    <div class="space-y-6">
+    @if ($activeTab === 'geography')
+        <div class="space-y-6">
 
-        {{-- Info-Box --}}
-        <flux:card class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
-            <div class="flex items-start gap-3">
-                <flux:icon.light-bulb class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
-                <div class="flex-1">
-                    <div class="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
-                        {{ __('Die Mapping-Engine') }}
-                    </div>
-                    <div class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
-                        {{ __('Hier ordnen Sie Postleitzahlen diesem Hub zu. Gibt ein Kunde seine PLZ ein, wird er automatisch diesem regionalen Marktplatz zugewiesen und sieht lokale Händler.') }}
+            {{-- Info-Box --}}
+            <flux:card class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
+                <div class="flex items-start gap-3">
+                    <flux:icon.light-bulb class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5" />
+                    <div class="flex-1">
+                        <div class="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
+                            {{ __('Die Mapping-Engine') }}
+                        </div>
+                        <div class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+                            {{ __('Hier ordnen Sie Postleitzahlen diesem Hub zu. Gibt ein Kunde seine PLZ ein, wird er automatisch diesem regionalen Marktplatz zugewiesen und sieht lokale Händler.') }}
+                        </div>
                     </div>
                 </div>
-            </div>
-        </flux:card>
+            </flux:card>
 
-        {{-- PLZ-Import Tools --}}
-        <flux:card class="p-6">
-            <flux:heading size="lg" class="mb-4">{{ __('Postleitzahlen hinzufügen') }}</flux:heading>
+            {{-- PLZ-Import Tools --}}
+            <flux:card class="p-6">
+                <flux:heading size="lg" class="mb-4">{{ __('Postleitzahlen hinzufügen') }}</flux:heading>
 
-            <flux:tabs wire:model.live="importMethod" variant="segmented">
-                <flux:tab name="single" icon="plus">{{ __('Einzeln') }}</flux:tab>
-                <flux:tab name="range" icon="arrows-right-left">{{ __('Bereich') }}</flux:tab>
-                <flux:tab name="csv" icon="document">{{ __('CSV-Import') }}</flux:tab>
-            </flux:tabs>
+                <flux:tabs wire:model.live="importMethod" variant="segmented">
+                    <flux:tab name="single" icon="plus">{{ __('Einzeln') }}</flux:tab>
+                    <flux:tab name="range" icon="arrows-right-left">{{ __('Bereich') }}</flux:tab>
+                    <flux:tab name="csv" icon="document">{{ __('CSV-Import') }}</flux:tab>
+                </flux:tabs>
 
-            <div class="mt-6">
-                {{-- Einzelne PLZ --}}
-                @if($importMethod === 'single')
-                <div class="space-y-4">
-                    <div class="grid grid-cols-2 gap-4">
-                        <flux:field>
-                            <flux:label>{{ __('Postleitzahl') }} <span class="text-red-500">*</span></flux:label>
-                            <flux:input wire:model="newZipCode" placeholder="33602" />
-                        </flux:field>
-                        <flux:field>
-                            <flux:label>{{ __('Stadt') }} <span class="text-red-500">*</span></flux:label>
-                            <flux:input wire:model="newCityName" placeholder="Bielefeld" />
-                        </flux:field>
+                <div class="mt-6">
+                    {{-- Einzelne PLZ --}}
+                    @if ($importMethod === 'single')
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-4">
+                                <flux:field>
+                                    <flux:label>{{ __('Postleitzahl') }} <span class="text-red-500">*</span>
+                                    </flux:label>
+                                    <flux:input wire:model="newZipCode" placeholder="33602" />
+                                </flux:field>
+                                <flux:field>
+                                    <flux:label>{{ __('Stadt') }} <span class="text-red-500">*</span></flux:label>
+                                    <flux:input wire:model="newCityName" placeholder="Bielefeld" />
+                                </flux:field>
+                            </div>
+                            <flux:button wire:click="addSingleZip" icon="plus">
+                                {{ __('PLZ hinzufügen') }}
+                            </flux:button>
+                        </div>
+                    @endif
+
+                    {{-- PLZ-Bereich --}}
+                    @if ($importMethod === 'range')
+                        <div class="space-y-4">
+                            <div class="grid grid-cols-2 gap-4">
+                                <flux:field>
+                                    <flux:label>{{ __('Von PLZ') }} <span class="text-red-500">*</span></flux:label>
+                                    <flux:input wire:model="rangeStart" placeholder="33000" />
+                                </flux:field>
+                                <flux:field>
+                                    <flux:label>{{ __('Bis PLZ') }} <span class="text-red-500">*</span></flux:label>
+                                    <flux:input wire:model="rangeEnd" placeholder="33999" />
+                                </flux:field>
+                            </div>
+                            <flux:button wire:click="addZipRange" icon="arrows-right-left">
+                                {{ __('Bereich importieren') }}
+                            </flux:button>
+                            <flux:description>
+                                ⚠️
+                                {{ __('Generiert automatisch alle PLZs im Bereich. Kann bei großen Bereichen mehrere Minuten dauern!') }}
+                            </flux:description>
+                        </div>
+                    @endif
+
+                    {{-- CSV-Import --}}
+                    @if ($importMethod === 'csv')
+                        <div class="space-y-4">
+                            <flux:field>
+                                <flux:label>{{ __('CSV-Datei') }} <span class="text-red-500">*</span></flux:label>
+                                <flux:input type="file" wire:model="csvFile" accept=".csv" />
+                                <flux:description>
+                                    {{ __('Format: PLZ,Stadt (eine Zeile pro Eintrag)') }}
+                                    <br>
+                                    <span class="text-xs">{{ __('Beispiel:') }}</span>
+                                    <code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded">
+                                        33602,Bielefeld<br>33603,Bielefeld<br>33604,Bielefeld
+                                    </code>
+                                </flux:description>
+                            </flux:field>
+                            <flux:button wire:click="importCsv" icon="arrow-up-tray">
+                                {{ __('CSV importieren') }}
+                            </flux:button>
+                        </div>
+                    @endif
+                </div>
+            </flux:card>
+
+            {{-- PLZ-Liste --}}
+            <flux:card>
+                <div class="p-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <flux:heading size="lg">
+                            {{ __('Zugeordnete Postleitzahlen') }}
+                            @if ($hubId)
+                                <span class="text-sm font-normal text-zinc-600 dark:text-zinc-400">
+                                    ({{ $this->locations->total() }} {{ __('gesamt') }})
+                                </span>
+                            @endif
+                        </flux:heading>
+                        <flux:input wire:model.live.debounce="zipSearch"
+                            placeholder="{{ __('PLZ oder Stadt suchen...') }}" icon="magnifying-glass"
+                            class="w-64" />
                     </div>
-                    <flux:button wire:click="addSingleZip" icon="plus">
-                        {{ __('PLZ hinzufügen') }}
-                    </flux:button>
-                </div>
-                @endif
 
-                {{-- PLZ-Bereich --}}
-                @if($importMethod === 'range')
-                <div class="space-y-4">
-                    <div class="grid grid-cols-2 gap-4">
-                        <flux:field>
-                            <flux:label>{{ __('Von PLZ') }} <span class="text-red-500">*</span></flux:label>
-                            <flux:input wire:model="rangeStart" placeholder="33000" />
-                        </flux:field>
-                        <flux:field>
-                            <flux:label>{{ __('Bis PLZ') }} <span class="text-red-500">*</span></flux:label>
-                            <flux:input wire:model="rangeEnd" placeholder="33999" />
-                        </flux:field>
-                    </div>
-                    <flux:button wire:click="addZipRange" icon="arrows-right-left">
-                        {{ __('Bereich importieren') }}
-                    </flux:button>
-                    <flux:description>
-                        ⚠️ {{ __('Generiert automatisch alle PLZs im Bereich. Kann bei großen Bereichen mehrere Minuten dauern!') }}
-                    </flux:description>
-                </div>
-                @endif
+                    @if ($hubId)
+                        <flux:table>
+                            <flux:table.columns>
+                                <flux:table.column>{{ __('PLZ') }}</flux:table.column>
+                                <flux:table.column>{{ __('Stadt') }}</flux:table.column>
+                                <flux:table.column class="text-right w-32">{{ __('Aktion') }}</flux:table.column>
+                            </flux:table.columns>
 
-                {{-- CSV-Import --}}
-                @if($importMethod === 'csv')
-                <div class="space-y-4">
-                    <flux:field>
-                        <flux:label>{{ __('CSV-Datei') }} <span class="text-red-500">*</span></flux:label>
-                        <flux:input type="file" wire:model="csvFile" accept=".csv" />
-                        <flux:description>
-                            {{ __('Format: PLZ,Stadt (eine Zeile pro Eintrag)') }}
-                            <br>
-                            <span class="text-xs">{{ __('Beispiel:') }}</span>
-                            <code class="text-xs bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded">
-                                33602,Bielefeld<br>33603,Bielefeld<br>33604,Bielefeld
-                            </code>
-                        </flux:description>
-                    </flux:field>
-                    <flux:button wire:click="importCsv" icon="arrow-up-tray">
-                        {{ __('CSV importieren') }}
-                    </flux:button>
-                </div>
-                @endif
-            </div>
-        </flux:card>
+                            <flux:table.rows>
+                                @forelse($this->locations as $location)
+                                    <flux:table.row :key="$location->id">
+                                        <flux:table.cell>
+                                            <span class="font-mono">{{ $location->zip_code }}</span>
+                                        </flux:table.cell>
+                                        <flux:table.cell>{{ $location->city_name }}</flux:table.cell>
+                                        <flux:table.cell class="text-right">
+                                            <flux:button variant="ghost" size="sm" icon="trash"
+                                                wire:click="deleteLocation({{ $location->id }})" />
+                                        </flux:table.cell>
+                                    </flux:table.row>
+                                @empty
+                                    <flux:table.row>
+                                        <flux:table.cell colspan="3" class="text-center py-8">
+                                            <flux:icon.map-pin class="w-12 h-12 text-zinc-400 mx-auto mb-2" />
+                                            <p class="text-zinc-600 dark:text-zinc-400">
+                                                {{ __('Noch keine PLZs zugeordnet') }}
+                                            </p>
+                                        </flux:table.cell>
+                                    </flux:table.row>
+                                @endforelse
+                            </flux:table.rows>
+                        </flux:table>
 
-        {{-- PLZ-Liste --}}
-        <flux:card>
-            <div class="p-6">
-                <div class="flex items-center justify-between mb-4">
-                    <flux:heading size="lg">
-                        {{ __('Zugeordnete Postleitzahlen') }}
-                        @if($hubId)
-                        <span class="text-sm font-normal text-zinc-600 dark:text-zinc-400">
-                            ({{ $this->locations->total() }} {{ __('gesamt') }})
-                        </span>
+                        {{-- Pagination --}}
+                        @if ($this->locations->hasPages())
+                            <div class="mt-4 border-t border-zinc-200 dark:border-zinc-700 pt-4">
+                                {{ $this->locations->links() }}
+                            </div>
                         @endif
-                    </flux:heading>
-                    <flux:input
-                        wire:model.live.debounce="zipSearch"
-                        placeholder="{{ __('PLZ oder Stadt suchen...') }}"
-                        icon="magnifying-glass"
-                        class="w-64"
-                    />
+                    @else
+                        <div class="text-center py-8 text-zinc-600 dark:text-zinc-400">
+                            {{ __('Speichern Sie zuerst den Hub, um PLZs hinzuzufügen') }}
+                        </div>
+                    @endif
                 </div>
-
-                @if($hubId)
-                <flux:table>
-                    <flux:table.columns>
-                        <flux:table.column>{{ __('PLZ') }}</flux:table.column>
-                        <flux:table.column>{{ __('Stadt') }}</flux:table.column>
-                        <flux:table.column class="text-right w-32">{{ __('Aktion') }}</flux:table.column>
-                    </flux:table.columns>
-
-                    <flux:table.rows>
-                        @forelse($this->locations as $location)
-                        <flux:table.row :key="$location->id">
-                            <flux:table.cell>
-                                <span class="font-mono">{{ $location->zip_code }}</span>
-                            </flux:table.cell>
-                            <flux:table.cell>{{ $location->city_name }}</flux:table.cell>
-                            <flux:table.cell class="text-right">
-                                <flux:button
-                                    variant="ghost"
-                                    size="sm"
-                                    icon="trash"
-                                    wire:click="deleteLocation({{ $location->id }})"
-                                />
-                            </flux:table.cell>
-                        </flux:table.row>
-                        @empty
-                        <flux:table.row>
-                            <flux:table.cell colspan="3" class="text-center py-8">
-                                <flux:icon.map-pin class="w-12 h-12 text-zinc-400 mx-auto mb-2" />
-                                <p class="text-zinc-600 dark:text-zinc-400">
-                                    {{ __('Noch keine PLZs zugeordnet') }}
-                                </p>
-                            </flux:table.cell>
-                        </flux:table.row>
-                        @endforelse
-                    </flux:table.rows>
-                </flux:table>
-
-                {{-- Pagination --}}
-                @if($this->locations->hasPages())
-                <div class="mt-4 border-t border-zinc-200 dark:border-zinc-700 pt-4">
-                    {{ $this->locations->links() }}
-                </div>
-                @endif
-                @else
-                <div class="text-center py-8 text-zinc-600 dark:text-zinc-400">
-                    {{ __('Speichern Sie zuerst den Hub, um PLZs hinzuzufügen') }}
-                </div>
-                @endif
-            </div>
-        </flux:card>
-    </div>
+            </flux:card>
+        </div>
     @endif
 
     {{-- TAB 3: Partner-Monitor --}}
-    @if($activeTab === 'partners')
-    <flux:card class="p-6">
-        <flux:heading size="lg" class="mb-4">
-            {{ __('Partner in diesem Hub') }}
-            @if($hubId)
-            <span class="text-sm font-normal text-zinc-600 dark:text-zinc-400">
-                ({{ $this->partners->count() }} {{ __('Partner') }})
-            </span>
+    @if ($activeTab === 'partners')
+        <flux:card class="p-6">
+            <flux:heading size="lg" class="mb-4">
+                {{ __('Partner in diesem Hub') }}
+                @if ($hubId)
+                    <span class="text-sm font-normal text-zinc-600 dark:text-zinc-400">
+                        ({{ $this->partners->count() }} {{ __('Partner') }})
+                    </span>
+                @endif
+            </flux:heading>
+
+            {{-- Info --}}
+            <flux:card class="p-4 mb-4 bg-zinc-50 dark:bg-zinc-800 border-0">
+                <div class="text-sm text-zinc-600 dark:text-zinc-400">
+                    <strong>{{ __('Logik:') }}</strong>
+                    <ul class="list-disc ml-5 mt-2 space-y-1">
+                        <li>{{ __('Händler (Retailer) → Werden diesem Hub fest zugeordnet') }}</li>
+                        <li>{{ __('Hersteller (Manufacturer) → Sind "Hub-agnostisch", in allen Hubs sichtbar') }}</li>
+                        <li>{{ __('Makler (Estate-Agent) → Werden Hub zugeordnet für regionale Kundenakquise') }}</li>
+                    </ul>
+                </div>
+            </flux:card>
+
+            @if ($hubId)
+                <flux:table>
+                    <flux:table.columns>
+                        <flux:table.column>{{ __('Name') }}</flux:table.column>
+                        <flux:table.column>{{ __('Typ') }}</flux:table.column>
+                        <flux:table.column>{{ __('Stadt') }}</flux:table.column>
+                        <flux:table.column>{{ __('Lieferradius') }}</flux:table.column>
+                        <flux:table.column class="text-center">{{ __('Status') }}</flux:table.column>
+                        <flux:table.column class="text-right">{{ __('Aktion') }}</flux:table.column>
+                    </flux:table.columns>
+
+                    <flux:table.rows>
+                        @forelse($this->partners as $partner)
+                            <flux:table.row :key="$partner->id">
+                                <flux:table.cell>
+                                    <div class="font-semibold text-zinc-900 dark:text-zinc-100">
+                                        {{ $partner->company_name }}
+                                    </div>
+                                    @if ($partner->display_name && $partner->display_name !== $partner->company_name)
+                                        <div class="text-xs text-zinc-500">{{ $partner->display_name }}</div>
+                                    @endif
+                                </flux:table.cell>
+                                <flux:table.cell>
+                                    @php
+                                        $typeColors = [
+                                            'Retailer' => 'blue',
+                                            'Manufacturer' => 'purple',
+                                            'Estate-Agent' => 'green',
+                                        ];
+                                    @endphp
+                                    <flux:badge :color="$typeColors[$partner->type] ?? 'zinc'" size="sm">
+                                        {{ $partner->type }}
+                                    </flux:badge>
+                                </flux:table.cell>
+                                <flux:table.cell>
+                                    {{ $partner->city ?? '-' }}
+                                </flux:table.cell>
+                                <flux:table.cell>
+                                    @if ($partner->delivery_radius_km)
+                                        <span class="text-sm">{{ $partner->delivery_radius_km }} km</span>
+                                    @else
+                                        <span class="text-sm text-zinc-400">-</span>
+                                    @endif
+                                </flux:table.cell>
+                                <flux:table.cell class="text-center">
+                                    <flux:badge :color="$partner->is_active ? 'green' : 'zinc'" size="sm">
+                                        {{ $partner->is_active ? __('Aktiv') : __('Inaktiv') }}
+                                    </flux:badge>
+                                </flux:table.cell>
+                                <flux:table.cell class="text-right">
+                                    <flux:button variant="ghost" size="sm" icon="eye">
+                                        {{ __('Details') }}
+                                    </flux:button>
+                                </flux:table.cell>
+                            </flux:table.row>
+                        @empty
+                            <flux:table.row>
+                                <flux:table.cell colspan="6" class="text-center py-8">
+                                    <flux:icon.user-group class="w-12 h-12 text-zinc-400 mx-auto mb-2" />
+                                    <p class="text-zinc-600 dark:text-zinc-400">
+                                        {{ __('Noch keine Partner in diesem Hub') }}
+                                    </p>
+                                    <p class="text-xs text-zinc-500 mt-2">
+                                        {{ __('Partner werden automatisch beim Onboarding zugeordnet (basierend auf PLZ)') }}
+                                    </p>
+                                </flux:table.cell>
+                            </flux:table.row>
+                        @endforelse
+                    </flux:table.rows>
+                </flux:table>
+            @else
+                <div class="text-center py-8 text-zinc-600 dark:text-zinc-400">
+                    {{ __('Speichern Sie zuerst den Hub, um Partner-Zuordnungen zu sehen') }}
+                </div>
             @endif
-        </flux:heading>
-
-        {{-- Info --}}
-        <flux:card class="p-4 mb-4 bg-zinc-50 dark:bg-zinc-800 border-0">
-            <div class="text-sm text-zinc-600 dark:text-zinc-400">
-                <strong>{{ __('Logik:') }}</strong>
-                <ul class="list-disc ml-5 mt-2 space-y-1">
-                    <li>{{ __('Händler (Retailer) → Werden diesem Hub fest zugeordnet') }}</li>
-                    <li>{{ __('Hersteller (Manufacturer) → Sind "Hub-agnostisch", in allen Hubs sichtbar') }}</li>
-                    <li>{{ __('Makler (Estate-Agent) → Werden Hub zugeordnet für regionale Kundenakquise') }}</li>
-                </ul>
-            </div>
         </flux:card>
-
-        @if($hubId)
-        <flux:table>
-            <flux:table.columns>
-                <flux:table.column>{{ __('Name') }}</flux:table.column>
-                <flux:table.column>{{ __('Typ') }}</flux:table.column>
-                <flux:table.column>{{ __('Stadt') }}</flux:table.column>
-                <flux:table.column>{{ __('Lieferradius') }}</flux:table.column>
-                <flux:table.column class="text-center">{{ __('Status') }}</flux:table.column>
-                <flux:table.column class="text-right">{{ __('Aktion') }}</flux:table.column>
-            </flux:table.columns>
-
-            <flux:table.rows>
-                @forelse($this->partners as $partner)
-                <flux:table.row :key="$partner->id">
-                    <flux:table.cell>
-                        <div class="font-semibold text-zinc-900 dark:text-zinc-100">
-                            {{ $partner->company_name }}
-                        </div>
-                        @if($partner->display_name && $partner->display_name !== $partner->company_name)
-                        <div class="text-xs text-zinc-500">{{ $partner->display_name }}</div>
-                        @endif
-                    </flux:table.cell>
-                    <flux:table.cell>
-                        @php
-                            $typeColors = [
-                                'Retailer' => 'blue',
-                                'Manufacturer' => 'purple',
-                                'Estate-Agent' => 'green',
-                            ];
-                        @endphp
-                        <flux:badge :color="$typeColors[$partner->type] ?? 'zinc'" size="sm">
-                            {{ $partner->type }}
-                        </flux:badge>
-                    </flux:table.cell>
-                    <flux:table.cell>
-                        {{ $partner->city ?? '-' }}
-                    </flux:table.cell>
-                    <flux:table.cell>
-                        @if($partner->delivery_radius_km)
-                            <span class="text-sm">{{ $partner->delivery_radius_km }} km</span>
-                        @else
-                            <span class="text-sm text-zinc-400">-</span>
-                        @endif
-                    </flux:table.cell>
-                    <flux:table.cell class="text-center">
-                        <flux:badge :color="$partner->is_active ? 'green' : 'zinc'" size="sm">
-                            {{ $partner->is_active ? __('Aktiv') : __('Inaktiv') }}
-                        </flux:badge>
-                    </flux:table.cell>
-                    <flux:table.cell class="text-right">
-                        <flux:button variant="ghost" size="sm" icon="eye">
-                            {{ __('Details') }}
-                        </flux:button>
-                    </flux:table.cell>
-                </flux:table.row>
-                @empty
-                <flux:table.row>
-                    <flux:table.cell colspan="6" class="text-center py-8">
-                        <flux:icon.user-group class="w-12 h-12 text-zinc-400 mx-auto mb-2" />
-                        <p class="text-zinc-600 dark:text-zinc-400">
-                            {{ __('Noch keine Partner in diesem Hub') }}
-                        </p>
-                        <p class="text-xs text-zinc-500 mt-2">
-                            {{ __('Partner werden automatisch beim Onboarding zugeordnet (basierend auf PLZ)') }}
-                        </p>
-                    </flux:table.cell>
-                </flux:table.row>
-                @endforelse
-            </flux:table.rows>
-        </flux:table>
-        @else
-        <div class="text-center py-8 text-zinc-600 dark:text-zinc-400">
-            {{ __('Speichern Sie zuerst den Hub, um Partner-Zuordnungen zu sehen') }}
-        </div>
-        @endif
-    </flux:card>
     @endif
 </div>
-
diff --git a/tests/Feature/DisplayListTest.php b/tests/Feature/DisplayListTest.php
index 4dc5b30..c289592 100644
--- a/tests/Feature/DisplayListTest.php
+++ b/tests/Feature/DisplayListTest.php
@@ -197,7 +197,7 @@ test('can create a draft playlist from live modules', function () {
 test('can discard a draft playlist', function () {
     $user = User::factory()->create();
     $version = DisplayVersion::factory()->create();
-    $display = Display::factory()->create();
+    $display = Display::factory()->create(['preview_token' => 'token-discard-123456789012345678901234']);
     createDisplayListPlaylist($display, DisplayPlaylist::STATUS_DRAFT, [$version->id]);
 
     Livewire::actingAs($user)
@@ -205,6 +205,57 @@ test('can discard a draft playlist', function () {
         ->call('discardDraft', $display->id);
 
     expect($display->fresh()->draftPlaylist)->toBeNull();
+    expect($display->fresh()->preview_token)->toBeNull();
+});
+
+test('publishing a draft clears the preview token', function () {
+    $user = User::factory()->create();
+    $liveVersion = DisplayVersion::factory()->create();
+    $draftVersion = DisplayVersion::factory()->create();
+    $display = Display::factory()->create(['preview_token' => 'token-publish-12345678901234567890123456']);
+    createDisplayListPlaylist($display, DisplayPlaylist::STATUS_PUBLISHED, [$liveVersion->id]);
+    createDisplayListPlaylist($display, DisplayPlaylist::STATUS_DRAFT, [$draftVersion->id]);
+
+    Livewire::actingAs($user)
+        ->test(DisplayList::class)
+        ->call('publishDraft', $display->id);
+
+    expect($display->fresh()->preview_token)->toBeNull();
+});
+
+test('can rotate the preview token of a draft', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create();
+    $display = Display::factory()->create(['preview_token' => 'token-old-1234567890123456789012345678901']);
+    createDisplayListPlaylist($display, DisplayPlaylist::STATUS_DRAFT, [$version->id]);
+
+    Livewire::actingAs($user)
+        ->test(DisplayList::class)
+        ->call('rotatePreviewToken', $display->id);
+
+    $newToken = $display->fresh()->preview_token;
+
+    expect($newToken)->not->toBeNull()
+        ->and($newToken)->not->toBe('token-old-1234567890123456789012345678901');
+});
+
+test('can add multiple modules to a playlist at once', function () {
+    $user = User::factory()->create();
+    $version1 = DisplayVersion::factory()->create();
+    $version2 = DisplayVersion::factory()->create();
+    $version3 = DisplayVersion::factory()->create();
+    $display = Display::factory()->create();
+    createDisplayListPlaylist($display, DisplayPlaylist::STATUS_PUBLISHED, []);
+
+    Livewire::actingAs($user)
+        ->test(DisplayList::class)
+        ->call('openModal', $display->id, DisplayPlaylist::STATUS_PUBLISHED)
+        ->set('versionsToAdd', [$version1->id, $version3->id])
+        ->call('addSelectedVersions')
+        ->assertSet('selectedVersionIds', [$version1->id, $version3->id])
+        ->assertSet('versionsToAdd', []);
+
+    expect(true)->toBeTrue();
 });
 
 test('can publish a draft playlist over the live playlist', function () {
@@ -313,8 +364,8 @@ test('module select only shows modules that can still be added', function () {
     Livewire::actingAs($user)
         ->test(DisplayList::class)
         ->call('openModal', $display->id, DisplayPlaylist::STATUS_PUBLISHED)
-        ->assertDontSeeHtml('<option value="'.$selectedVersion->id.'">Schon gewählt')
-        ->assertSeeHtml('<option value="'.$availableVersion->id.'">Noch verfügbar');
+        ->assertDontSee('Schon gewählt (')
+        ->assertSee('Noch verfügbar (');
 });
 
 test('module select is replaced by a hint when all modules are already selected', function () {
diff --git a/tests/Feature/DisplayMediaTest.php b/tests/Feature/DisplayMediaTest.php
index fb38f15..2ebc568 100644
--- a/tests/Feature/DisplayMediaTest.php
+++ b/tests/Feature/DisplayMediaTest.php
@@ -14,6 +14,31 @@ beforeEach(function () {
     Storage::fake('public');
 });
 
+/**
+ * Create a real, tiny mp4 on disk using ffmpeg and return the path.
+ * Returns null when ffmpeg is unavailable so callers can skip.
+ */
+function makeRealTestVideo(): ?string
+{
+    $ffmpeg = trim((string) shell_exec('command -v ffmpeg'));
+
+    if ($ffmpeg === '') {
+        return null;
+    }
+
+    $path = tempnam(sys_get_temp_dir(), 'vid_').'.mp4';
+
+    $command = sprintf(
+        '%s -y -f lavfi -i testsrc=duration=2:size=320x240:rate=10 -pix_fmt yuv420p %s 2>/dev/null',
+        escapeshellarg($ffmpeg),
+        escapeshellarg($path)
+    );
+
+    shell_exec($command);
+
+    return is_file($path) && filesize($path) > 0 ? $path : null;
+}
+
 // ========================================
 // MODEL TESTS
 // ========================================
@@ -66,6 +91,20 @@ it('returns display name from title or filename', function () {
     expect($withoutTitle->getDisplayName())->toBe('file.mp4');
 });
 
+it('returns the stored poster as thumbnail url for a video', function () {
+    $media = DisplayMedia::factory()->video()->create([
+        'thumbnail_path' => 'display-media/2026/05/tour-poster.jpg',
+    ]);
+
+    expect($media->getThumbnailUrl())->toContain('display-media/2026/05/tour-poster.jpg');
+});
+
+it('has no thumbnail url for a video without a poster', function () {
+    $media = DisplayMedia::factory()->video()->create(['thumbnail_path' => null]);
+
+    expect($media->getThumbnailUrl())->toBeNull();
+});
+
 // ========================================
 // SCOPE TESTS
 // ========================================
@@ -105,6 +144,41 @@ it('filters by collection scope', function () {
     expect(DisplayMedia::inCollection('immobilien')->count())->toBe(1);
 });
 
+it('keeps preceding filters when combined with the search scope', function () {
+    DisplayMedia::factory()->create([
+        'type' => 'image',
+        'filename' => 'haus.webp',
+        'title' => 'Schaufenster',
+    ]);
+    DisplayMedia::factory()->video()->create([
+        'filename' => 'tour.mp4',
+        'title' => 'Haus Tour',
+    ]);
+
+    $results = DisplayMedia::images()->search('haus')->get();
+
+    expect($results)->toHaveCount(1)
+        ->and($results->first()->filename)->toBe('haus.webp');
+});
+
+it('search scope respects the active filter on the media picker', function () {
+    DisplayMedia::factory()->create([
+        'filename' => 'aktiv.webp',
+        'title' => 'Goya',
+        'is_active' => true,
+    ]);
+    DisplayMedia::factory()->create([
+        'filename' => 'inaktiv.webp',
+        'title' => 'Goya',
+        'is_active' => false,
+    ]);
+
+    $results = DisplayMedia::active()->search('goya')->get();
+
+    expect($results)->toHaveCount(1)
+        ->and($results->first()->filename)->toBe('aktiv.webp');
+});
+
 it('filters by active scope', function () {
     DisplayMedia::factory()->create(['is_active' => true]);
     DisplayMedia::factory()->create(['is_active' => false]);
@@ -142,6 +216,33 @@ it('stores a video upload', function () {
         ->and($media->mime_type)->toBe('video/mp4');
 });
 
+it('generates a poster thumbnail when a real video is uploaded', function () {
+    $videoPath = makeRealTestVideo();
+
+    if ($videoPath === null) {
+        $this->markTestSkipped('ffmpeg is not available.');
+    }
+
+    $service = app(DisplayMediaService::class);
+    $file = new UploadedFile($videoPath, 'showroom.mp4', 'video/mp4', null, true);
+
+    $media = $service->storeUpload($file);
+
+    expect($media->thumbnail_path)->not->toBeNull();
+    expect(Storage::disk('public')->exists($media->thumbnail_path))->toBeTrue();
+
+    @unlink($videoPath);
+});
+
+it('does not set a thumbnail when the video cannot be decoded', function () {
+    $service = app(DisplayMediaService::class);
+    $file = UploadedFile::fake()->create('broken.mp4', 500, 'video/mp4');
+
+    $media = $service->storeUpload($file);
+
+    expect($media->thumbnail_path)->toBeNull();
+});
+
 it('stores an svg upload as image media', function () {
     $service = app(DisplayMediaService::class);
     $file = UploadedFile::fake()->createWithContent(
@@ -158,6 +259,44 @@ it('stores an svg upload as image media', function () {
     expect(Storage::disk('public')->exists($media->path))->toBeTrue();
 });
 
+it('resets pagination to page one when a filter changes', function () {
+    Volt::test('admin.cms.display-media-library')
+        ->call('gotoPage', 3)
+        ->set('filterType', 'video')
+        ->assertSet('paginators.page', 1);
+});
+
+it('renders external image media with an inline thumbnail', function () {
+    $media = DisplayMedia::factory()->external()->create([
+        'type' => 'image',
+        'external_url' => 'https://example.com/foto.jpg',
+    ]);
+
+    Volt::test('admin.cms.display-media-library')
+        ->assertSeeHtml('src="https://example.com/foto.jpg"');
+});
+
+it('renders a stored poster image for a video with a thumbnail', function () {
+    DisplayMedia::factory()->video()->create([
+        'path' => 'display-media/2026/05/tour.mp4',
+        'thumbnail_path' => 'display-media/2026/05/tour-poster.jpg',
+    ]);
+
+    Volt::test('admin.cms.display-media-library')
+        ->assertSeeHtml('tour-poster.jpg');
+});
+
+it('renders an inline video frame for an uploaded video without a poster', function () {
+    DisplayMedia::factory()->video()->create([
+        'path' => 'display-media/2026/05/clip.mp4',
+        'thumbnail_path' => null,
+        'mime_type' => 'video/mp4',
+    ]);
+
+    Volt::test('admin.cms.display-media-library')
+        ->assertSeeHtml('clip.mp4#t=1');
+});
+
 it('accepts svg uploads in the display media library', function () {
     $file = UploadedFile::fake()->createWithContent(
         'brand.svg',
@@ -237,6 +376,42 @@ it('deletes external media record', function () {
     expect(DisplayMedia::find($media->id))->toBeNull();
 });
 
+// ========================================
+// COMMAND TESTS
+// ========================================
+
+it('reports when there are no videos to process', function () {
+    $this->artisan('display-media:generate-video-thumbnails')
+        ->expectsOutputToContain('Keine Videos zum Verarbeiten gefunden.')
+        ->assertSuccessful();
+});
+
+it('backfills posters for existing uploaded videos', function () {
+    $videoPath = makeRealTestVideo();
+
+    if ($videoPath === null) {
+        $this->markTestSkipped('ffmpeg is not available.');
+    }
+
+    Storage::disk('public')->putFileAs(
+        'display-media/2026/05',
+        new UploadedFile($videoPath, 'clip.mp4', 'video/mp4', null, true),
+        'clip.mp4'
+    );
+
+    $media = DisplayMedia::factory()->video()->create([
+        'source_type' => 'upload',
+        'path' => 'display-media/2026/05/clip.mp4',
+        'thumbnail_path' => null,
+    ]);
+
+    $this->artisan('display-media:generate-video-thumbnails')->assertSuccessful();
+
+    expect($media->fresh()->thumbnail_path)->not->toBeNull();
+
+    @unlink($videoPath);
+});
+
 // ========================================
 // ROUTE TESTS
 // ========================================
diff --git a/tests/Feature/DisplayVersionApiTest.php b/tests/Feature/DisplayVersionApiTest.php
index 74dadf2..f6af4e0 100644
--- a/tests/Feature/DisplayVersionApiTest.php
+++ b/tests/Feature/DisplayVersionApiTest.php
@@ -115,9 +115,45 @@ test('returns playlist with b2in config', function () {
     $response->assertSuccessful();
     $response->assertJsonPath('playlist.0.type', 'b2in');
     $response->assertJsonPath('playlist.0.settings.theme', 'dark');
+    $response->assertJsonPath('playlist.0.settings.show_footer', true);
+    $response->assertJsonPath('playlist.0.settings.logo_position', 'top-left');
+    $response->assertJsonPath('playlist.0.settings.claim_position', 'top-right');
     $response->assertJsonPath('playlist.0.items.0.category', 'immobilien');
 });
 
+test('b2in config passes through custom brand positions and footer toggle', function () {
+    $version = DisplayVersion::factory()->create([
+        'type' => 'b2in',
+        'settings' => [
+            'show_footer' => false,
+            'logo_position' => 'bottom-right',
+            'claim_position' => 'top-left',
+        ],
+    ]);
+    DisplayVersionItem::factory()->create([
+        'display_version_id' => $version->id,
+        'item_type' => 'media',
+        'content' => [
+            'category' => 'sonstiges',
+            'media_type' => 'image',
+            'media_url' => '../assets/test.jpg',
+            'headline' => 'H',
+            'subline' => 'S',
+            'duration_seconds' => 10,
+        ],
+    ]);
+    $display = Display::factory()->create();
+    publishDisplayModules($display, [$version->id]);
+
+    $response = $this->getJson("/api/display/{$display->id}/config");
+
+    $response->assertSuccessful();
+    $response->assertJsonPath('playlist.0.settings.show_footer', false);
+    $response->assertJsonPath('playlist.0.settings.logo_position', 'bottom-right');
+    $response->assertJsonPath('playlist.0.settings.claim_position', 'top-left');
+    $response->assertJsonPath('playlist.0.items.0.category', 'sonstiges');
+});
+
 test('returns playlist with offers config', function () {
     $version = DisplayVersion::factory()->create([
         'type' => 'offers',
@@ -320,38 +356,32 @@ test('module preview returns a single module config', function () {
     $response->assertJsonPath('playlist.0.items.0.category', 'moebel');
 });
 
-test('module preview exposes configurable player chrome settings', function () {
+test('offers slides carry their own logo and brand chrome', function () {
     $version = DisplayVersion::factory()->create([
         'type' => 'offers',
         'name' => 'Custom Chrome',
-        'settings' => [
-            'logo_url' => '/storage/display-media/logo.svg',
-            'brand_text' => 'Musterstadt',
-            'footer_claim' => 'Beratung im Schauraum',
-            'footer_url' => 'cabinet-bielefeld.de',
-            'qr_default_title' => 'Mehr Infos',
-            'qr_subtitle' => 'Jetzt scannen',
-        ],
     ]);
     DisplayVersionItem::factory()->create([
         'display_version_id' => $version->id,
         'item_type' => 'slide',
         'content' => [
-            'type' => 'intro',
+            'type' => 'detail',
             'title' => 'Intro',
             'image_url' => '../assets/intro.jpg',
+            'show_logo' => true,
+            'logo_url' => '/storage/display-media/logo.svg',
+            'brand_text' => 'Musterstadt',
+            'brand_tagline' => 'Beratung im Schauraum',
         ],
     ]);
 
     $response = $this->getJson("/api/display/module/{$version->id}/preview");
 
     $response->assertSuccessful();
-    $response->assertJsonPath('playlist.0.settings.logo_url', '/storage/display-media/logo.svg');
-    $response->assertJsonPath('playlist.0.settings.brand_text', 'Musterstadt');
-    $response->assertJsonPath('playlist.0.settings.footer_claim', 'Beratung im Schauraum');
-    $response->assertJsonPath('playlist.0.settings.footer_url', 'cabinet-bielefeld.de');
-    $response->assertJsonPath('playlist.0.settings.qr_default_title', 'Mehr Infos');
-    $response->assertJsonPath('playlist.0.settings.qr_subtitle', 'Jetzt scannen');
+    $response->assertJsonPath('playlist.0.slides.0.show_logo', true);
+    $response->assertJsonPath('playlist.0.slides.0.logo_url', '/storage/display-media/logo.svg');
+    $response->assertJsonPath('playlist.0.slides.0.brand_text', 'Musterstadt');
+    $response->assertJsonPath('playlist.0.slides.0.brand_tagline', 'Beratung im Schauraum');
 });
 
 test('module item preview returns only the selected slide', function () {
@@ -416,11 +446,28 @@ test('display player keeps previews in a strict 9 by 16 viewport', function () {
         ->toContain('Aktive Live-Displays')
         ->toContain('renderOverview(data.displays || [])')
         ->toContain('translate(${offsetX}px, ${offsetY}px) scale(${scale})')
-        ->toContain('this.settings.logo_url')
         ->toContain('this.settings.footer_claim')
         ->toContain('this.settings.footer_url')
         ->toContain('this.settings.header_logo_url')
-        ->toContain('this.settings.qr_label');
+        ->toContain('this.settings.qr_label')
+        ->toContain('this.settings.show_footer !== false')
+        ->toContain('this.settings.show_logo !== false')
+        ->toContain('this.settings.show_claim !== false')
+        ->toContain('this.settings.logo_position')
+        ->toContain('this.settings.claim_position')
+        ->toContain('b2in-brand-logo pos-')
+        ->toContain('b2in-scrim')
+        ->toContain('.b2in-layer.no-footer .b2in-text');
+});
+
+test('display player stops looping when the playlist has no playable content', function () {
+    $player = file_get_contents(public_path('_cabinet/display/index.html'));
+
+    expect($player)
+        ->toContain('versionHasContent(version)')
+        ->toContain('showEmptyPlaylist()')
+        ->toContain('this.emptyVersionStreak >= this.playlist.length')
+        ->toContain('Noch keine Inhalte vorhanden');
 });
 
 test('preview player pages are reachable for valid display and module previews', function () {
@@ -438,6 +485,20 @@ test('preview player pages are reachable for valid display and module previews',
         ->assertSuccessful();
 });
 
+test('preview player is served with a revalidation cache header', function () {
+    $display = Display::factory()->create(['preview_token' => 'fresh-token']);
+    $version = DisplayVersion::factory()->create();
+
+    foreach ([
+        '/preview/fresh-token',
+        "/preview/module/{$version->id}",
+    ] as $url) {
+        $response = $this->get($url);
+        $response->assertSuccessful();
+        expect($response->headers->get('Cache-Control'))->toContain('no-cache');
+    }
+});
+
 test('existing display config api still works', function () {
     $response = $this->getJson('/api/display/config');
 
diff --git a/tests/Feature/DisplayVersionTest.php b/tests/Feature/DisplayVersionTest.php
index f184644..de0bbc2 100644
--- a/tests/Feature/DisplayVersionTest.php
+++ b/tests/Feature/DisplayVersionTest.php
@@ -3,6 +3,10 @@
 use App\Enums\DisplayVersionType;
 use App\Livewire\Admin\Cms\DisplayVersionEditor;
 use App\Livewire\Admin\Cms\DisplayVersionList;
+use App\Models\Display;
+use App\Models\DisplayMedia;
+use App\Models\DisplayPlaylist;
+use App\Models\DisplayPlaylistItem;
 use App\Models\DisplayVersion;
 use App\Models\DisplayVersionItem;
 use App\Models\User;
@@ -91,6 +95,29 @@ test('can delete a display version', function () {
     expect(DisplayVersion::find($version->id))->toBeNull();
 });
 
+test('cannot delete a display version that is used by a playlist', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['name' => 'Genutztes Modul']);
+    $display = Display::factory()->create();
+    $playlist = DisplayPlaylist::factory()->create([
+        'display_id' => $display->id,
+        'status' => DisplayPlaylist::STATUS_PUBLISHED,
+        'published_at' => now(),
+    ]);
+    DisplayPlaylistItem::factory()->create([
+        'display_playlist_id' => $playlist->id,
+        'display_version_id' => $version->id,
+        'sort_order' => 0,
+    ]);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionList::class)
+        ->call('deleteVersion', $version->id)
+        ->assertSee('kann nicht gelöscht werden');
+
+    expect(DisplayVersion::find($version->id))->not->toBeNull();
+});
+
 test('can toggle display version active status', function () {
     $user = User::factory()->create();
     $version = DisplayVersion::factory()->create(['is_active' => true]);
@@ -152,6 +179,81 @@ test('item edit modal renders module iframe preview', function () {
         ->assertSee('Schließen');
 });
 
+test('item modal url inputs avoid wire:model.blur to prevent the teleported-modal cleanup crash', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'media')
+        ->assertDontSee('wire:model.blur', false)
+        ->assertSee('wire:model.live.debounce.500ms="mediaUrl"', false);
+});
+
+test('video item modal labels the title field as an internal name not shown on screen', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'video-display']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'video')
+        ->assertSee('Name')
+        ->assertSee('wird nicht im Video eingeblendet')
+        ->assertDontSee('Titel (optional)');
+});
+
+test('video playlist renders a media thumbnail for stored videos', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'video-display']);
+    DisplayVersionItem::factory()->create([
+        'display_version_id' => $version->id,
+        'item_type' => 'video',
+        'content' => ['filename' => '/storage/display-media/clip.mp4', 'title' => 'Clip', 'position' => 25],
+    ]);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->assertSee('/storage/display-media/clip.mp4#t=1', false);
+});
+
+test('new item modal shows a placeholder instead of the module preview', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'video-display']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'video')
+        ->assertSee('Die Vorschau erscheint, sobald der Inhalt gespeichert wurde.')
+        ->assertSee('src="about:blank"', false)
+        ->assertDontSee('/preview/module/'.$version->id.'/item/', false);
+});
+
+test('item modal preview iframe keeps a stable wire:key to avoid morph crashes', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'video-display']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'video')
+        ->assertSee('wire:key="item-modal-preview"', false);
+});
+
+test('saved item modal shows the single-item preview iframe', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'video-display']);
+    $item = DisplayVersionItem::factory()->create([
+        'display_version_id' => $version->id,
+        'item_type' => 'video',
+        'content' => ['filename' => 'clip.mp4', 'title' => 'Clip', 'position' => 25],
+    ]);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', $item->id)
+        ->assertSee('wire:key="item-modal-preview"', false)
+        ->assertSee('/preview/module/'.$version->id.'/item/'.$item->id, false);
+});
+
 test('can add a video item to video-display version', function () {
     $user = User::factory()->create();
     $version = DisplayVersion::factory()->create(['type' => 'video-display']);
@@ -213,6 +315,26 @@ test('can edit an existing item', function () {
     expect($item->content['title'])->toBe('New Title');
 });
 
+test('editing an inactive item keeps it inactive', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'video-display']);
+    $item = DisplayVersionItem::factory()->create([
+        'display_version_id' => $version->id,
+        'item_type' => 'video',
+        'content' => ['filename' => 'old.mp4', 'title' => 'Old', 'position' => 25],
+        'is_active' => false,
+    ]);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', $item->id)
+        ->assertSet('videoIsActive', false)
+        ->set('videoTitle', 'New Title')
+        ->call('saveItem');
+
+    expect($item->fresh()->is_active)->toBeFalse();
+});
+
 test('updating an item keeps modal open and refreshes iframe preview', function () {
     $user = User::factory()->create();
     $version = DisplayVersion::factory()->create(['type' => 'offers']);
@@ -299,12 +421,13 @@ test('can add a slide item to offers version', function () {
     Livewire::actingAs($user)
         ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
         ->call('openItemModal', null, 'slide')
-        ->set('slideType', 'product-hero')
         ->set('slideDuration', 10000)
         ->set('slideImageUrl', '../assets/goya1.jpg')
+        ->set('slideShowBadge', true)
         ->set('slideBadge', 'Einzelstück')
         ->set('slideEyebrow', 'Hersteller: Sudbrock')
         ->set('slideTitle', 'GOYA Sideboard')
+        ->set('slideShowPrice', true)
         ->set('slidePrice', '489 €')
         ->set('slideOriginalPrice', 'statt 4.744 €')
         ->set('slideQrUrl', 'https://cabinet-bielefeld.de')
@@ -315,9 +438,10 @@ test('can add a slide item to offers version', function () {
     $item = DisplayVersionItem::where('display_version_id', $version->id)->first();
     expect($item)->not->toBeNull();
     expect($item->item_type)->toBe('slide');
-    expect($item->content['type'])->toBe('product-hero');
+    expect($item->content['type'])->toBe('detail');
     expect($item->content['title'])->toBe('GOYA Sideboard');
     expect($item->content['price'])->toBe('489 €');
+    expect($item->content['show_price'])->toBeTrue();
     expect($item->content['image_url'])->toBe('../assets/goya1.jpg');
     expect($item->content['qr_url'])->toBe('https://cabinet-bielefeld.de');
 });
@@ -329,14 +453,99 @@ test('can add a slide with bullets to offers version', function () {
     Livewire::actingAs($user)
         ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
         ->call('openItemModal', null, 'slide')
-        ->set('slideType', 'product-details')
         ->set('slideTitle', 'GOYA Sideboard')
+        ->set('slideShowBullets', true)
         ->set('slideBullets', ['Einzelstück', 'Abholung möglich', 'Lieferung optional'])
         ->call('saveItem');
 
     $item = DisplayVersionItem::where('display_version_id', $version->id)->first();
     expect($item->content['bullets'])->toHaveCount(3);
     expect($item->content['bullets'][0])->toBe('Einzelstück');
+    expect($item->content['show_bullets'])->toBeTrue();
+});
+
+test('slide editor persists the strike-through original price option', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'offers']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'slide')
+        ->set('slideTitle', 'Streich Slide')
+        ->set('slideShowPrice', true)
+        ->set('slidePrice', '199 €')
+        ->set('slideOriginalPrice', 'statt 399 €')
+        ->set('slideStrikeOriginalPrice', true)
+        ->call('saveItem');
+
+    $item = DisplayVersionItem::where('display_version_id', $version->id)->first();
+    expect($item->content['strike_original_price'])->toBeTrue();
+    expect($item->content['original_price'])->toBe('statt 399 €');
+});
+
+test('slide editor no longer exposes a slide type selector', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'offers']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'slide')
+        ->assertDontSee('Slide-Typ')
+        ->assertSee('Bild & Badge')
+        ->assertSee('Badge anzeigen')
+        ->assertSee('Aufzählung anzeigen')
+        ->assertSee('QR-Code anzeigen');
+});
+
+test('hidden slide blocks are persisted via their show flags', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'offers']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'slide')
+        ->set('slideTitle', 'Nur Titel')
+        ->set('slideShowBadge', false)
+        ->set('slideShowEyebrow', false)
+        ->set('slideShowBullets', false)
+        ->set('slideShowPrice', false)
+        ->set('slideShowQr', false)
+        ->set('slideShowContact', false)
+        ->call('saveItem');
+
+    $item = DisplayVersionItem::where('display_version_id', $version->id)->first();
+    expect($item->content['show_badge'])->toBeFalse();
+    expect($item->content['show_eyebrow'])->toBeFalse();
+    expect($item->content['show_bullets'])->toBeFalse();
+    expect($item->content['show_price'])->toBeFalse();
+    expect($item->content['show_qr'])->toBeFalse();
+    expect($item->content['show_contact'])->toBeFalse();
+});
+
+test('legacy slides without show flags keep rendering their populated blocks', function () {
+    $version = DisplayVersion::factory()->create(['type' => 'offers']);
+    DisplayVersionItem::factory()->create([
+        'display_version_id' => $version->id,
+        'item_type' => 'slide',
+        'content' => [
+            'type' => 'product-hero',
+            'title' => 'Legacy Slide',
+            'badge_text' => 'Einzelstück',
+            'price' => '489 €',
+            'bullets' => ['Punkt A'],
+        ],
+    ]);
+
+    $config = app(\App\Services\DisplayPlaylistConfigBuilder::class)
+        ->fromModules(DisplayVersion::whereKey($version->id)->with('items')->get());
+
+    $slide = $config['playlist'][0]['slides'][0];
+
+    expect($slide['show_badge'])->toBeTrue();
+    expect($slide['show_price'])->toBeTrue();
+    expect($slide['show_bullets'])->toBeTrue();
+    expect($slide['show_subline'])->toBeFalse();
+    expect($slide['show_disclaimer'])->toBeFalse();
 });
 
 test('can edit a slide item with new fields', function () {
@@ -399,22 +608,174 @@ test('can save version settings', function () {
     expect($version->fresh()->settings['footer_prefix'])->toBe('powered by');
 });
 
-test('module settings expose player chrome fields in the editor', function () {
+test('b2in defaults include brand position and footer toggle', function () {
+    $defaults = \App\Support\DisplayModuleSettings::defaults(DisplayVersionType::B2in);
+
+    expect($defaults)->toHaveKey('logo_position', 'top-left')
+        ->and($defaults)->toHaveKey('claim_position', 'top-right')
+        ->and($defaults)->toHaveKey('show_footer', true)
+        ->and($defaults)->toHaveKey('show_logo', true)
+        ->and($defaults)->toHaveKey('show_claim', true);
+});
+
+test('selecting a video medium auto-sets the media type to video', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+    $media = DisplayMedia::factory()->video()->create();
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'media')
+        ->set('mediaType', 'image')
+        ->call('onDisplayMediaSelected', 'mediaUrl', $media->id, $media->getUrl())
+        ->assertSet('mediaType', 'video');
+});
+
+test('selecting an image medium auto-sets the media type to image', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+    $media = DisplayMedia::factory()->create(['type' => 'image']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'media')
+        ->set('mediaType', 'video')
+        ->call('onDisplayMediaSelected', 'mediaUrl', $media->id, $media->getUrl())
+        ->assertSet('mediaType', 'image');
+});
+
+test('media item modal offers the sonstiges category and an automatic type hint', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'media')
+        ->assertSee('Sonstiges')
+        ->assertSee('wird automatisch aus dem gewählten Medium erkannt');
+});
+
+test('b2in settings editor shows the brand section and footer toggle', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->assertSee('Marke')
+        ->assertSee('Logo-Position')
+        ->assertSee('Claim-Position')
+        ->assertSee('Logo anzeigen')
+        ->assertSee('Claim anzeigen')
+        ->assertSee('Footer anzeigen');
+});
+
+test('saving b2in settings persists logo and claim visibility', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openSettingsModal')
+        ->set('settings.show_logo', false)
+        ->set('settings.show_claim', false)
+        ->call('saveSettings');
+
+    $settings = $version->fresh()->settings;
+    expect($settings['show_logo'])->toBeFalse()
+        ->and($settings['show_claim'])->toBeFalse();
+});
+
+test('enabling the footer pulls bottom brand positions back to the top', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->set('settings.show_footer', false)
+        ->set('settings.logo_position', 'bottom-left')
+        ->set('settings.claim_position', 'bottom-right')
+        ->set('settings.show_footer', true)
+        ->assertSet('settings.logo_position', 'top-left')
+        ->assertSet('settings.claim_position', 'top-right');
+});
+
+test('bottom brand positions are kept when the footer is hidden', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->set('settings.show_footer', false)
+        ->set('settings.logo_position', 'bottom-left')
+        ->assertSet('settings.logo_position', 'bottom-left');
+});
+
+test('claim never shares the same corner as the logo', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->set('settings.show_footer', false)
+        ->set('settings.logo_position', 'bottom-left')
+        ->set('settings.claim_position', 'bottom-left')
+        ->assertSet('settings.claim_position', fn ($value) => $value !== 'bottom-left');
+});
+
+test('saving b2in settings persists brand positions and footer toggle', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'b2in']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openSettingsModal')
+        ->set('settings.show_footer', false)
+        ->set('settings.logo_position', 'bottom-right')
+        ->set('settings.claim_position', 'top-left')
+        ->call('saveSettings');
+
+    $settings = $version->fresh()->settings;
+    expect($settings['show_footer'])->toBeFalse()
+        ->and($settings['logo_position'])->toBe('bottom-right')
+        ->and($settings['claim_position'])->toBe('top-left');
+});
+
+test('offers meta settings only keep loop and transition', function () {
     $user = User::factory()->create();
     $version = DisplayVersion::factory()->create(['type' => 'offers']);
 
     Livewire::actingAs($user)
         ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
         ->assertSee('Meta-Einstellungen für dieses Modul')
-        ->assertSee('Diese Werte gelten für die gesamte Media-Playlist bzw. alle Slides dieses Moduls.')
         ->call('openSettingsModal')
-        ->assertSee('Branding')
-        ->assertSee('Logo URL')
-        ->assertDontSee('Logo Alt-Text')
-        ->assertSee('Brand-Text')
-        ->assertSee('Footer & QR für alle Slides')
-        ->assertSee('Footer-Claim')
-        ->assertSee('Web/QR-URL')
-        ->assertSee('Standard QR-Titel')
-        ->assertSee('QR-Unterzeile');
+        ->assertSee('Endlosschleife')
+        ->assertSee('Transition')
+        ->assertSee('Transition-Dauer (ms)')
+        ->assertDontSee('Branding')
+        ->assertDontSee('Brand-Text')
+        ->assertDontSee('Footer & QR für alle Slides')
+        ->assertDontSee('Footer-Claim');
+});
+
+test('offer slide editor manages logo and brand text per slide', function () {
+    $user = User::factory()->create();
+    $version = DisplayVersion::factory()->create(['type' => 'offers']);
+
+    Livewire::actingAs($user)
+        ->test(DisplayVersionEditor::class, ['displayVersion' => $version])
+        ->call('openItemModal', null, 'slide')
+        ->assertSee('Logo & Marke')
+        ->assertSee('Logo & Marken-Text anzeigen')
+        ->set('slideTitle', 'Logo Slide')
+        ->set('slideShowLogo', true)
+        ->set('slideLogoUrl', '/storage/display-media/logo.svg')
+        ->set('slideBrandText', 'Musterstadt')
+        ->set('slideBrandTagline', 'Beratung • Lieferung')
+        ->call('saveItem');
+
+    $item = DisplayVersionItem::where('display_version_id', $version->id)->first();
+    expect($item->content['show_logo'])->toBeTrue();
+    expect($item->content['logo_url'])->toBe('/storage/display-media/logo.svg');
+    expect($item->content['brand_text'])->toBe('Musterstadt');
+    expect($item->content['brand_tagline'])->toBe('Beratung • Lieferung');
 });
diff --git a/tests/Feature/LayoutScriptOrderTest.php b/tests/Feature/LayoutScriptOrderTest.php
new file mode 100644
index 0000000..a85d202
--- /dev/null
+++ b/tests/Feature/LayoutScriptOrderTest.php
@@ -0,0 +1,41 @@
+<?php
+
+use App\Models\User;
+use Illuminate\Support\Facades\URL;
+
+beforeEach(function () {
+    URL::forceRootUrl('https://'.config('domains.domain_portal'));
+});
+
+test('admin layout loads livewire before flux so flux can register its alpine components', function () {
+    $user = User::factory()->create();
+
+    $content = $this->actingAs($user)
+        ->get(route('admin.cms.display-modules'))
+        ->assertSuccessful()
+        ->getContent();
+
+    $livewirePosition = strpos($content, 'livewire.js?id=');
+    $fluxPosition = strpos($content, '/flux/flux');
+
+    expect($livewirePosition)->not->toBeFalse('Livewire script tag is missing from the layout.');
+    expect($fluxPosition)->not->toBeFalse('Flux script tag is missing from the layout.');
+    expect($livewirePosition)->toBeLessThan(
+        $fluxPosition,
+        'Livewire must be loaded before Flux; otherwise window.Alpine is undefined when flux.js registers fluxModal/fluxSelectSearchClearable.'
+    );
+});
+
+test('admin layout loads the livewire script only once', function () {
+    $user = User::factory()->create();
+
+    $content = $this->actingAs($user)
+        ->get(route('admin.cms.display-modules'))
+        ->assertSuccessful()
+        ->getContent();
+
+    expect(substr_count($content, 'livewire.js?id='))->toBe(
+        1,
+        'Livewire must only be injected once; a duplicate script tag creates multiple Alpine instances.'
+    );
+});
diff --git a/tests/Feature/LiveSiteReviewTest.php b/tests/Feature/LiveSiteReviewTest.php
index 3a92618..3074d70 100644
--- a/tests/Feature/LiveSiteReviewTest.php
+++ b/tests/Feature/LiveSiteReviewTest.php
@@ -57,11 +57,11 @@ it('announcement bar visible on about', fn () => $this->get('/about')->assertSee
 it('homepage has navigation', fn () => $this->get('/')->assertSee('Immobilien')->assertSee('Netzwerk')->assertSee('Magazin'));
 it('immobilien has all five sections', function () {
     $this->get('/immobilien')
-        ->assertSee('Dynamik')
-        ->assertSee('Investment in Dubai')
-        ->assertSee('Kaufprozess')
-        ->assertSee('Meine Aufgabe')
-        ->assertSee('Investor');
+        ->assertSee('Warum Dubai für Investoren relevant bleibt')
+        ->assertSee('Der Kaufprozess mit B2in')
+        ->assertSee('Passt Dubai zu Ihrer Investmentstrategie?')
+        ->assertSee('Einrichtung mitdenken')
+        ->assertSee('Investoren');
 });
 it('netzwerk has teaser cards', fn () => $this->get('/netzwerk')->assertSee('Einrichtungsnetzwerk')->assertSee('In Entwicklung'));
 it('magazin has all five articles', function () {
diff --git a/tests/Feature/TestDisplaySeederTest.php b/tests/Feature/TestDisplaySeederTest.php
new file mode 100644
index 0000000..95e603e
--- /dev/null
+++ b/tests/Feature/TestDisplaySeederTest.php
@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+use App\Models\Display;
+use Database\Seeders\TestDisplaySeeder;
+
+it('seeds exactly one test display', function () {
+    $this->seed(TestDisplaySeeder::class);
+
+    expect(Display::query()->where('is_test', true)->count())->toBe(1);
+});
+
+it('is idempotent and does not create a second test display', function () {
+    $this->seed(TestDisplaySeeder::class);
+    $this->seed(TestDisplaySeeder::class);
+
+    expect(Display::query()->where('is_test', true)->count())->toBe(1);
+});