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

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

resources/views/components/empty.blade.php

@@ -0,0 +1,78 @@
+@props([
+    'title',
+    'description' => null,
+    'size' => 'base', // sm | base | lg
+    'iconName' => null, // reicon name; use with icon-name="…"
+])
+
+@php
+    $minHeight = match ($size) {
+        'sm' => 'min-h-44',
+        'lg' => 'min-h-96',
+        default => 'min-h-80',
+    };
+
+    $iconBox = match ($size) {
+        'sm' => 'mb-3 size-10',
+        'lg' => 'mb-4 size-12',
+        default => 'mb-4 size-11',
+    };
+
+    $iconSize = match ($size) {
+        'sm' => 'size-4.5',
+        'lg' => 'size-6',
+        default => 'size-5',
+    };
+
+    $titleClass = match ($size) {
+        'sm' => 'text-[14px] font-semibold text-black dark:text-fg',
+        'lg' => 'text-base font-semibold text-black dark:text-fg',
+        default => 'text-[15px] font-semibold text-black dark:text-fg',
+    };
+
+    $descriptionClass = match ($size) {
+        'sm' => 'mt-1 max-w-sm text-[12px] leading-5 text-neutral-500 dark:text-fg-dim',
+        default => 'mt-1 max-w-sm text-[13px] leading-5 text-neutral-500 dark:text-fg-dim',
+    };
+
+    $hasIconSlot = isset($icon) && $icon instanceof \Illuminate\View\ComponentSlot && ! $icon->isEmpty();
+    $hasIconName = filled($iconName);
+    $hasIcon = $hasIconSlot || $hasIconName;
+
+    // Prefer contents; fall back to actions (legacy slot name used in several views).
+    $footer = null;
+    if (isset($contents) && $contents instanceof \Illuminate\View\ComponentSlot && ! $contents->isEmpty()) {
+        $footer = $contents;
+    } elseif (isset($actions) && $actions instanceof \Illuminate\View\ComponentSlot && ! $actions->isEmpty()) {
+        $footer = $actions;
+    }
+@endphp
+
+{{-- Empty state: dashed card, icon badge, title, description, optional actions. --}}
+<div
+    {{ $attributes->merge([
+        'class' => "empty-state flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-6 py-10 text-center dark:border-white/[0.1] dark:bg-white/[0.02] {$minHeight}",
+    ]) }}>
+    @if ($hasIcon)
+        <div
+            class="{{ $iconBox }} flex items-center justify-center rounded-xl border border-neutral-200 bg-white text-neutral-400 shadow-sm dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-faint">
+            @if ($hasIconSlot)
+                {{ $icon }}
+            @else
+                <x-reicon :name="$iconName" class="{{ $iconSize }}" />
+            @endif
+        </div>
+    @endif
+
+    <h2 class="{{ $titleClass }}">{{ $title }}</h2>
+
+    @if ($description)
+        <p class="{{ $descriptionClass }}">{{ $description }}</p>
+    @endif
+
+    @if ($footer)
+        <div class="mt-4 flex flex-wrap items-center justify-center gap-2">
+            {{ $footer }}
+        </div>
+    @endif
+</div>