update theme file

Author: claudemyburgh

app/Concerns/HasTheme.php

@@ -148,14 +148,21 @@ public function toRegistry(): array
             'devDependencies' => $this->devDependencies ?? [],
             'registryDependencies' => $this->registryDependencies ?? [],
             'files' => $this->files ?? [],
-            'css' => $this->css ?? [],
             'tailwind' => $this->tailwind,
-            'cssVars' => $this->buildCssVars(),
             'meta' => $this->meta,
             'docs' => $this->docs,
             'tags' => $this->tags->pluck('name')->toArray(),
         ];
 
+        if (! empty($this->css)) {
+            $registry['css'] = $this->css;
+        }
+
+        $cssVars = $this->buildCssVars();
+        if (! empty($cssVars)) {
+            $registry['cssVars'] = $cssVars;
+        }
+
         if ($this->type === 'registry:style') {
             $registry['extends'] = $this->extends;
         }

resources/js/pages/dashboard/components/edit.tsx

@@ -1,9 +1,8 @@
 import { Head, Link, useForm } from '@inertiajs/react';
 import { ArrowLeft, Plus, Trash2, Save, FileCode } from 'lucide-react';
-import React, { useState } from 'react';
 import { toast } from 'sonner';
+import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
-import { useFileHandling } from '@/hooks/use-file-handling';
 import {
     Card,
     CardContent,
@@ -14,16 +13,17 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
-import InputError from '@/components/input-error';
-import { index, update } from '@/routes/dashboard/components';
+import { useFileHandling } from '@/hooks/use-file-handling';
 import { dashboard } from '@/routes';
-import MainEditorBlock from '@/layouts/main/theme/main-editor-block';
+import { index, update } from '@/routes/dashboard/components';
 
 const getLanguageFromPath = (path: string) => {
     if (!path) {
         return 'typescript';
     }
+
     const ext = path.split('.').pop()?.toLowerCase();
+
     switch (ext) {
         case 'css':
             return 'css';
@@ -280,7 +280,9 @@ export default function EditComponent({
                                         {existingCategories.join(', ')}
                                     </p>
                                 )}
-                                <InputError message={(errors as any).categories} />
+                                <InputError
+                                    message={(errors as any).categories}
+                                />
                             </div>
 
                             <div className="grid gap-4 sm:grid-cols-2">
@@ -299,7 +301,9 @@ export default function EditComponent({
                                             )
                                         }
                                     />
-                                    <InputError message={(errors as any).dependencies} />
+                                    <InputError
+                                        message={(errors as any).dependencies}
+                                    />
                                 </div>
                                 <div className="space-y-1">
                                     <Label htmlFor="registryDependencies">
@@ -317,7 +321,9 @@ export default function EditComponent({
                                         }
                                     />
                                     <InputError
-                                        message={(errors as any).registryDependencies}
+                                        message={
+                                            (errors as any).registryDependencies
+                                        }
                                     />
                                 </div>
                             </div>
@@ -414,7 +420,8 @@ export default function EditComponent({
                                             Code Content
                                         </Label>
                                         <div className="overflow-hidden rounded-md border border-border/80 bg-background">
-                                            <MainEditorBlock
+                                            <MainEdit
+                                                orBlock
                                                 value={file.content}
                                                 onChange={(val) =>
                                                     handleFileChange(

tests/Feature/RegistriesControllerTest.php

@@ -0,0 +1,96 @@
+<?php
+
+use App\Models\Theme;
+use App\Models\User;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+beforeEach(function () {
+    User::factory()->create(['id' => 1]);
+});
+
+test('theme registry endpoint returns the theme successfully', function () {
+    $theme = Theme::factory()->create([
+        'name' => 'japanese-zen',
+        'css' => [],
+        'vars_light' => [],
+        'vars_dark' => [],
+        'font_family' => null,
+    ]);
+
+    $response = $this->get('/r/themes/japanese-zen.json');
+
+    $response->assertOk()
+        ->assertJson([
+            'name' => 'japanese-zen',
+            'type' => 'registry:theme',
+        ]);
+});
+
+test('theme registry endpoint omits empty css field to avoid empty array schema mismatch', function () {
+    $theme = Theme::factory()->create([
+        'name' => 'japanese-zen',
+        'css' => [],
+    ]);
+
+    $response = $this->get('/r/themes/japanese-zen.json');
+
+    $response->assertOk();
+    $data = $response->json();
+    expect($data)->not->toHaveKey('css');
+});
+
+test('theme registry endpoint includes css field when it is populated', function () {
+    $theme = Theme::factory()->create([
+        'name' => 'japanese-zen',
+        'css' => [
+            '@layer base' => [
+                'body' => [
+                    'background' => 'var(--background)',
+                ],
+            ],
+        ],
+    ]);
+
+    $response = $this->get('/r/themes/japanese-zen.json');
+
+    $response->assertOk();
+    $data = $response->json();
+    expect($data)->toHaveKey('css')
+        ->and($data['css'])->toBeArray(); // Since decoded from JSON object into PHP associative array
+});
+
+test('theme registry endpoint omits empty cssVars field', function () {
+    $theme = Theme::factory()->create([
+        'name' => 'japanese-zen',
+        'vars_light' => [],
+        'vars_dark' => [],
+        'vars_theme' => [],
+        'font_family' => null,
+        'font_mono' => null,
+        'font_serif' => null,
+    ]);
+
+    $response = $this->get('/r/themes/japanese-zen.json');
+
+    $response->assertOk();
+    $data = $response->json();
+    expect($data)->not->toHaveKey('cssVars');
+});
+
+test('theme registry endpoint includes cssVars when populated', function () {
+    $theme = Theme::factory()->create([
+        'name' => 'japanese-zen',
+        'vars_light' => [
+            'background' => 'oklch(0.97 0.01 90)',
+        ],
+    ]);
+
+    $response = $this->get('/r/themes/japanese-zen.json');
+
+    $response->assertOk();
+    $data = $response->json();
+    expect($data)->toHaveKey('cssVars')
+        ->and($data['cssVars'])->toBeArray();
+});