Theme selector added

Author: claudemyburgh

app/Http/Controllers/Api/Registries/RegistrySearchController.php

@@ -26,6 +26,7 @@ public function search(Request $request): JsonResponse
                 'category' => $item->meta['category'] ?? null,
                 'description' => $item->meta['description'] ?? null,
                 'baseColor' => $item->baseColor ?? null,
+                'css_vars' => $item->css_vars ?? null,
             ]);
 
         return response()->json($results);

app/Http/Controllers/Api/ThemeCssController.php

@@ -5,6 +5,7 @@
 use App\Http\Controllers\Controller;
 use App\Models\Registry;
 use App\Services\ThemeCssGenerator;
+use Illuminate\Http\Request;
 use Illuminate\Http\Response;
 
 class ThemeCssController extends Controller
@@ -13,17 +14,36 @@ public function __construct(
         private readonly ThemeCssGenerator $generator,
     ) {}
 
-    public function show(string $name): Response
+    public function show(string $name, Request $request): Response
     {
         $theme = Registry::where('name', $name)
             ->where('type', 'registry:theme')
             ->firstOrFail();
 
         $css = $this->generator->generate($theme);
 
+        if ($request->boolean('inject')) {
+            $css = $this->extractVariableBlocks($css);
+        }
+
         return response($css, 200, [
             'Content-Type' => 'text/css',
             'Cache-Control' => 'public, max-age=3600',
         ]);
     }
+
+    private function extractVariableBlocks(string $css): string
+    {
+        $blocks = [];
+
+        if (preg_match('/:root\s*\{[^}]*\}/s', $css, $matches)) {
+            $blocks[] = $matches[0];
+        }
+
+        if (preg_match('/\.dark\s*\{[^}]*\}/s', $css, $matches)) {
+            $blocks[] = $matches[0];
+        }
+
+        return implode("\n\n", $blocks);
+    }
 }

app/Http/Controllers/ThemePageController.php

@@ -13,6 +13,7 @@ class ThemePageController extends Controller
      */
     public function __invoke(Request $request)
     {
+        
         return Inertia::render('theme/index', [
             'themes' => Registry::query()->themes()->get(),
         ]);

app/Services/ThemeCssGenerator.php

@@ -22,10 +22,10 @@ public function generate(Registry $registry): string
 
         $light = $cssVars['light'] ?? [];
         $dark = $cssVars['dark'] ?? [];
-        $theme = $cssVars['theme'] ?? [];
+        $themeVars = $cssVars['theme'] ?? [];
 
-        $rootVars = array_merge($light, $theme);
-        $darkVars = array_merge($dark, $theme);
+        $rootVars = array_merge($light, $themeVars);
+        $darkVars = array_merge($dark, $themeVars);
 
         $rootVars = $this->normalizeKeys($rootVars);
         $darkVars = $this->normalizeKeys($darkVars);
@@ -35,7 +35,13 @@ public function generate(Registry $registry): string
 
         $rootBlock = $this->objectToVars($rootVars);
         $darkBlock = $this->objectToVars($darkVars);
-        $layerBase = $this->convertLayerBase($css);
+
+        // Use css from registry if available, otherwise use default
+        if (!empty($css)) {
+            $cssBlock = $this->convertCss($css);
+        } else {
+            $cssBlock = $this->getDefaultCssBlock();
+        }
 
         return <<<CSS
 @import "tailwindcss";
@@ -50,6 +56,79 @@ public function generate(Registry $registry): string
 {$darkBlock}
 }
 
+{$cssBlock}
+CSS;
+    }
+
+    private function normalizeKeys(array $obj): array
+    {
+        $normalized = [];
+
+        foreach ($obj as $key => $value) {
+            $newKey = self::KEY_MAP[$key] ?? $key;
+            $normalized[$newKey] = $value;
+        }
+
+        return $normalized;
+    }
+
+    private function objectToVars(array $obj): string
+    {
+        return collect($obj)
+            ->map(fn ($v, $k) => "  --{$k}: {$v};")
+            ->join("\n");
+    }
+
+    private function convertCss(array $css): string
+    {
+        $blocks = [];
+
+        // Handle @theme inline
+        if (!empty($css['@theme inline'])) {
+            $themeInline = $this->convertThemeInline($css['@theme inline']);
+            $blocks[] = "@theme inline {\n{$themeInline}\n}";
+        }
+
+        // Handle @layer base
+        if (!empty($css['@layer base'])) {
+            $layerBase = $this->convertLayerBase($css['@layer base']);
+            $blocks[] = "@layer base {\n{$layerBase}\n}";
+        }
+
+        return implode("\n\n", $blocks);
+    }
+
+    private function convertThemeInline(array $theme): string
+    {
+        return collect($theme)
+            ->map(fn ($v, $k) => "  {$k}: {$v};")
+            ->join("\n");
+    }
+
+    private function convertLayerBase(array $rules): string
+    {
+        return collect($rules)
+            ->map(function ($styles, $selector) {
+                if (is_string($styles)) {
+                    $indentedStyles = collect(explode("\n", $styles))
+                        ->map(fn ($line) => '    '.$line)
+                        ->join("\n");
+
+                    return "  {$selector} {\n{$indentedStyles}\n  }";
+                }
+
+                $props = collect($styles)
+                    ->map(fn ($v, $k) => "    {$k}: {$v};")
+                    ->join("\n");
+
+                return "  {$selector} {\n{$props}\n  }";
+            })
+            ->join("\n");
+    }
+
+    private function getDefaultCssBlock(): string
+    {
+        return <<<CSS
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -103,55 +182,15 @@ public function generate(Registry $registry): string
   --shadow-2xl: var(--shadow-2xl);
 }
 
-{$layerBase}
-CSS;
-    }
-
-    private function normalizeKeys(array $obj): array
-    {
-        $normalized = [];
-
-        foreach ($obj as $key => $value) {
-            $newKey = self::KEY_MAP[$key] ?? $key;
-            $normalized[$newKey] = $value;
-        }
-
-        return $normalized;
-    }
-
-    private function objectToVars(array $obj): string
-    {
-        return collect($obj)
-            ->map(fn ($v, $k) => "  --{$k}: {$v};")
-            ->join("\n");
-    }
-
-    private function convertLayerBase(?array $css): string
-    {
-        if (empty($css['@layer base'])) {
-            return '';
-        }
-
-        $rules = $css['@layer base'];
+@layer base {
+  * {
+    @apply border-border;
+  }
 
-        $body = collect($rules)
-            ->map(function ($styles, $selector) {
-                if (is_string($styles)) {
-                    $indentedStyles = collect(explode("\n", $styles))
-                        ->map(fn ($line) => '    '.$line)
-                        ->join("\n");
-
-                    return "  {$selector} {\n{$indentedStyles}\n  }";
-                }
-
-                $props = collect($styles)
-                    ->map(fn ($v, $k) => "    {$k}: {$v};")
-                    ->join("\n");
-
-                return "  {$selector} {\n{$props}\n  }";
-            })
-            ->join("\n");
-
-        return "@layer base {\n{$body}\n}";
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+CSS;
     }
 }