feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)

Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>

resources/views/components/process-dialog.blade.php

@@ -0,0 +1,81 @@
+@props([
+    'closeWithX' => false,
+    'size' => 'lg',
+])
+
+@php
+    $panelWidth = match ($size) {
+        'md' => 'min-w-0 w-full max-w-2xl sm:min-w-[28rem]',
+        'xl' => 'min-w-0 w-full max-w-5xl sm:min-w-[36rem] lg:min-w-[48rem]',
+        default => 'min-w-0 w-full max-w-4xl sm:min-w-[32rem] lg:min-w-[42rem]',
+    };
+@endphp
+
+{{-- `contents` so event-only shells (no trigger in the default slot) do not leave a
+     ghost layout box above layer-2 tabs. Trigger buttons in the slot still flow
+     into the parent as if unwrapped. --}}
+<div x-data="{
+        processDialogOpen: false
+    }"
+    x-init="$watch('processDialogOpen', value => {
+        if (!value) {
+            $dispatch('processDialogClosed')
+        }
+    })"
+    {{ $attributes->merge(['class' => 'contents']) }}>
+    {{ $slot }}
+    <template x-teleport="body">
+        <div x-show="processDialogOpen" x-cloak class="relative z-99"
+            @if (! $closeWithX) @keydown.window.escape="processDialogOpen = false" @endif>
+            <div x-show="processDialogOpen"
+                x-transition:enter="ease-out duration-150"
+                x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100"
+                x-transition:leave="ease-in duration-100"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0"
+                @if (! $closeWithX) @click="processDialogOpen = false" @endif
+                class="fixed inset-0 bg-black/50 backdrop-blur-[2px] dark:bg-black/60"></div>
+
+            <div class="fixed inset-0 overflow-y-auto">
+                <div @if (! $closeWithX) @click.self="processDialogOpen = false" @endif
+                    class="flex min-h-full items-center justify-center p-4 sm:p-6">
+                    <div x-show="processDialogOpen"
+                        x-trap.inert.noscroll="processDialogOpen"
+                        x-transition:enter="ease-out duration-150"
+                        x-transition:enter-start="opacity-0 translate-y-2 sm:scale-95"
+                        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                        x-transition:leave="ease-in duration-100"
+                        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                        x-transition:leave-end="opacity-0 translate-y-2 sm:scale-95"
+                        role="dialog"
+                        aria-modal="true"
+                        aria-labelledby="process-dialog-title"
+                        @class([
+                            'application-settings-section application-settings-form process-dialog relative flex flex-col overflow-hidden',
+                            $panelWidth,
+                            // Fixed shell size so empty “waiting for process” state does not collapse.
+                            'min-h-[min(70dvh,28rem)] h-[min(85dvh,52rem)] max-h-[calc(100dvh-2rem)]',
+                        ])
+                        style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal)">
+                        <header class="flex-nowrap!">
+                            <h3 id="process-dialog-title" class="min-w-0 flex-1 truncate">
+                                {{ $title }}
+                            </h3>
+                            <button type="button" @click="processDialogOpen = false"
+                                class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-500 outline-0 transition-colors hover:bg-neutral-100 hover:text-black focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg"
+                                aria-label="Close">
+                                <x-reicon name="x" class="size-4" />
+                            </button>
+                        </header>
+
+                        <div class="application-settings-section-body process-dialog-body flex min-h-0 flex-1 flex-col overflow-hidden p-3 sm:p-4"
+                            style="-webkit-overflow-scrolling: touch;">
+                            {{ $content }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>