feat: add the Livewire UI foundation

README.md

@@ -67,6 +67,15 @@ composer native:dev
 
 That path installs dependencies, prepares the Laravel app, bootstraps NativePHP, and starts the local desktop development loop.
 
+### Frontend Foundation
+
+Katra's base UI foundation now includes Tailwind CSS v4 and Livewire 4.
+
+- Use `npm install` if you only need the frontend toolchain without running the full `composer setup` bootstrap.
+- Use `npm run dev` while shaping Blade, Tailwind, and Livewire UI work in the browser.
+- Use `npm run build` to verify the production asset bundle.
+- Visit `/foundation-preview` to confirm the branded Livewire + Tailwind foundation is rendering successfully.
+
 ### Authentication
 
 Katra now uses Laravel Fortify for the first authentication foundation.

app/Livewire/FoundationPreview.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Livewire;
+
+use Illuminate\View\View;
+use Livewire\Component;
+
+class FoundationPreview extends Component
+{
+    public int $surfaceIndex = 0;
+
+    /**
+     * @var array<int, array{label: string, title: string, detail: string}>
+     */
+    protected array $surfaces = [
+        [
+            'label' => 'Desktop',
+            'title' => 'Desktop-first shell',
+            'detail' => 'NativePHP remains the first-class local shell for Katra while Laravel stays at the core.',
+        ],
+        [
+            'label' => 'Server',
+            'title' => 'Server deployment',
+            'detail' => 'The same Laravel foundation is intended to run as a traditional shared or dedicated server deployment.',
+        ],
+        [
+            'label' => 'Container',
+            'title' => 'Container runtime',
+            'detail' => 'Docker and Kubernetes targets stay in view so the product model is not trapped in a desktop-only shape.',
+        ],
+    ];
+
+    public function cycleSurface(): void
+    {
+        $this->surfaceIndex = ($this->surfaceIndex + 1) % count($this->surfaces);
+    }
+
+    public function updatingSurfaceIndex(mixed $value): void
+    {
+        $this->surfaceIndex = $this->normalizeSurfaceIndex((int) $value);
+    }
+
+    public function hydrate(): void
+    {
+        $this->surfaceIndex = $this->normalizeSurfaceIndex($this->surfaceIndex);
+    }
+
+    public function render(): View
+    {
+        $this->surfaceIndex = $this->normalizeSurfaceIndex($this->surfaceIndex);
+
+        return view('livewire.foundation-preview', [
+            'surfaces' => $this->surfaces,
+            'activeSurface' => $this->surfaces[$this->surfaceIndex],
+        ]);
+    }
+
+    protected function normalizeSurfaceIndex(int $index): int
+    {
+        $maxIndex = count($this->surfaces) - 1;
+
+        if ($maxIndex < 0 || $index < 0) {
+            return 0;
+        }
+
+        if ($index > $maxIndex) {
+            return $maxIndex;
+        }
+
+        return $index;
+    }
+}

composer.json

@@ -16,6 +16,7 @@
         "laravel/mcp": "^0.6.3",
         "laravel/pennant": "^1.0",
         "laravel/tinker": "^3.0",
+        "livewire/livewire": "^4.2",
         "nativephp/desktop": "dev-l13-compatibility",
         "postare/blade-mdi": "^1.0"
     },