Enhance Theme Creator with TweakCN Layout and Metadata Support

resources/js/components/app/newsletter-dialog.tsx

@@ -1,5 +1,6 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form } from '@inertiajs/react';
 import { Mail } from 'lucide-react';
+import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -11,7 +12,6 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
-import InputError from '@/components/input-error';
 import { subscribe } from '@/routes/newsletter';
 
 interface NewsletterDialogProps {

resources/js/components/delete-user.tsx

@@ -1,6 +1,5 @@
 import { Form } from '@inertiajs/react';
 import { useRef } from 'react';
-import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 import Heading from '@/components/heading';
 import InputError from '@/components/input-error';
 import PasswordInput from '@/components/password-input';
@@ -15,6 +14,7 @@ import {
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
 
 export default function DeleteUser() {
     const passwordInput = useRef<HTMLInputElement>(null);

resources/js/components/preview/cards-preview.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown, Sparkles, Terminal } from 'lucide-react';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 import {
     Bar,
     BarChart,
@@ -91,7 +91,6 @@ const chartData = [
 
 export default function CardsPreview({ ...props }) {
     const [date, setDate] = useState<Date | undefined>(new Date());
-    const onTooltipOpenChange = useCallback(() => {}, []);
 
     return (
         <div

resources/js/components/themes/color-controls.tsx

@@ -1,17 +1,17 @@
 import { Sparkles } from 'lucide-react';
+import { memo } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { PALETTE_PRESETS } from './pallets-preset';
 import {
     derivePaletteFromPrimary,
     hexToTokenValue,
     tokenValueToHex,
 } from '@/lib/theme/color';
 import { TOKEN_GROUPS } from '@/lib/theme/defaults';
 import { useThemeStore } from '@/lib/theme/store';
-import { memo } from 'react';
+import { PALETTE_PRESETS } from './pallets-preset';
 
 export function ColorControls() {
     const { light, dark, setToken, setManyTokens } = useThemeStore();

resources/js/components/themes/controls-panel.tsx

@@ -1,15 +1,22 @@
+import { usePage } from '@inertiajs/react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { useThemeStore } from '@/lib/theme/store';
 import { ColorControls } from './color-controls';
 import { RadiusControls } from './raduis-controles';
+import ThemeInfo from './theme-info';
 import { TypographyControls } from './typography-controls';
 
 export function ControlsPanel() {
+    const { title, name, description, tags, setInfo } = useThemeStore();
+    const { availableTags = [] } = usePage<{ availableTags: string[] }>().props;
+
     return (
         <Tabs defaultValue="colors" className="flex h-full flex-col">
-            <TabsList className="m-3 grid grid-cols-3">
+            <TabsList className="m-3 grid grid-cols-4">
                 <TabsTrigger value="colors">Colors</TabsTrigger>
                 <TabsTrigger value="radius">Radius</TabsTrigger>
                 <TabsTrigger value="type">Type</TabsTrigger>
+                <TabsTrigger value="info">Info</TabsTrigger>
             </TabsList>
             <div className="flex-1 overflow-y-auto px-4 pb-6">
                 <TabsContent value="colors" className="mt-0">
@@ -21,6 +28,13 @@ export function ControlsPanel() {
                 <TabsContent value="type" className="mt-0">
                     <TypographyControls />
                 </TabsContent>
+                <TabsContent value="info" className="mt-0">
+                    <ThemeInfo
+                        theme={{ title, name, description, tags }}
+                        availableTags={availableTags}
+                        onChange={setInfo}
+                    />
+                </TabsContent>
             </div>
         </Tabs>
     );

resources/js/components/themes/export-dialog.tsx

@@ -1,8 +1,5 @@
-import { useThemeStore } from '@/lib/theme/store';
-import {
-    generateIndexCss,
-    generateTailwindSnippet,
-} from '@/lib/theme/css-export';
+import { Download, FileCode } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
@@ -11,9 +8,12 @@ import {
     DialogTrigger,
 } from '@/components/ui/dialog';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Button } from '@/components/ui/button';
-import { Download, FileCode } from 'lucide-react';
 import { MainCodeBlock } from '@/layouts/main/theme/main-code-block';
+import {
+    generateIndexCss,
+    generateTailwindSnippet,
+} from '@/lib/theme/css-export';
+import { useThemeStore } from '@/lib/theme/store';
 
 export function ExportDialog() {
     const state = useThemeStore();

resources/js/components/themes/raduis-controles.tsx

@@ -1,9 +1,10 @@
-import { useThemeStore } from '@/lib/theme/store';
 import { Label } from '@/components/ui/label';
 import { Slider } from '@/components/ui/slider';
+import { useThemeStore } from '@/lib/theme/store';
 
 export function RadiusControls() {
     const { radius, setRadius } = useThemeStore();
+
     return (
         <div className="space-y-3">
             <div className="flex items-center justify-between">

resources/js/components/themes/theme-preview.tsx

@@ -1,12 +1,9 @@
-import { useThemeStore } from '@/lib/theme/store';
-import { tokenValueToCss } from '@/lib/theme/color';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Sun, Moon } from 'lucide-react';
 import { useMemo, useState } from 'react';
+import CardsPreview from '@/components/preview/cards-preview';
+import { Button } from '@/components/ui/button';
+import { tokenValueToCss } from '@/lib/theme/color';
+import { useThemeStore } from '@/lib/theme/store';
 
 const COLOR_TOKENS = [
     'background', 'foreground',
@@ -30,6 +27,7 @@ function buildVars(
 
     for (const token of COLOR_TOKENS) {
         const val = colors[token];
+
         if (val) {
             const css = tokenValueToCss(val);
             vars[`--${token}`] = css;
@@ -68,93 +66,38 @@ export function ThemePreview() {
 
     return (
         <div className="flex h-full flex-col">
-            <div className="flex items-center justify-between border-b px-4 py-2" style={{ borderColor: 'var(--color-border)' }}>
-                <span className="text-sm font-medium text-muted-foreground">Preview</span>
+            <div
+                className="flex items-center justify-between border-b px-4 py-2"
+                style={{ borderColor: 'var(--color-border)' }}
+            >
+                <span className="text-sm font-medium text-muted-foreground">
+                    Preview
+                </span>
                 <Button variant="outline" size="sm" onClick={toggleMode}>
                     {previewMode === 'light' ? (
-                        <><Moon className="mr-1 size-3.5" /> Dark</>
+                        <>
+                            <Moon className="mr-1 size-3.5" /> Dark
+                        </>
                     ) : (
-                        <><Sun className="mr-1 size-3.5" /> Light</>
+                        <>
+                            <Sun className="mr-1 size-3.5" /> Light
+                        </>
                     )}
                 </Button>
             </div>
 
             <div
                 className="flex-1 overflow-y-auto"
-                style={{ background: bgCss, color: fgCss } as React.CSSProperties}
+                style={
+                    {
+                        background: bgCss,
+                        color: fgCss,
+                        ...cssVars,
+                    } as React.CSSProperties
+                }
             >
-                <div className="min-h-full p-6" style={cssVars as React.CSSProperties}>
-                    <p
-                        className="text-2xl font-bold"
-                        style={{ fontFamily: `"${fonts.serif}"` }}
-                    >
-                        Theme Preview
-                    </p>
-                    <p className="mt-1 mb-6 text-sm" style={{ color: 'var(--color-muted-foreground)' }}>
-                        Sample UI components using your current palette.
-                    </p>
-
-                    <div className="flex flex-wrap gap-2">
-                        <Button>Primary</Button>
-                        <Button variant="secondary">Secondary</Button>
-                        <Button variant="outline">Outline</Button>
-                        <Button variant="ghost">Ghost</Button>
-                        <Button variant="destructive">Destructive</Button>
-                    </div>
-
-                    <Card className="mt-6 max-w-sm">
-                        <CardHeader>
-                            <CardTitle>Example Card</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                            <p className="text-sm" style={{ color: 'var(--color-muted-foreground)' }}>
-                                This card demonstrates how your theme appears on standard
-                                shadcn/ui components.
-                            </p>
-                        </CardContent>
-                        <CardFooter className="flex justify-between">
-                            <Button variant="outline">Cancel</Button>
-                            <Button>Save</Button>
-                        </CardFooter>
-                    </Card>
-
-                    <Card className="mt-4 max-w-sm">
-                        <CardHeader>
-                            <CardTitle>Form Example</CardTitle>
-                        </CardHeader>
-                        <CardContent className="space-y-3">
-                            <div className="space-y-1">
-                                <Label htmlFor="pv-email">Email</Label>
-                                <Input id="pv-email" placeholder="you@example.com" />
-                            </div>
-                            <div className="space-y-1">
-                                <Label htmlFor="pv-pw">Password</Label>
-                                <Input id="pv-pw" type="password" placeholder="••••••••" />
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    <div className="mt-6 flex flex-wrap gap-2">
-                        <Badge>Default</Badge>
-                        <Badge variant="secondary">Secondary</Badge>
-                        <Badge variant="outline">Outline</Badge>
-                        <Badge variant="destructive">Destructive</Badge>
-                    </div>
-
-                    <div
-                        className="mt-6 rounded-lg border p-4 space-y-1"
-                        style={{ borderColor: 'var(--color-border)' }}
-                    >
-                        <p className="font-mono text-xs" style={{ color: 'var(--color-muted-foreground)' }}>
-                            SYSTEM — font-mono ({fonts.mono})
-                        </p>
-                        <p style={{ fontFamily: `"${fonts.serif}"` }}>
-                            The quick brown fox jumps over the lazy dog — serif
-                        </p>
-                        <p style={{ fontFamily: `"${fonts.sans}"` }}>
-                            The quick brown fox jumps over the lazy dog — sans
-                        </p>
-                    </div>
+                <div className="min-h-full p-6">
+                    <CardsPreview />
                 </div>
             </div>
         </div>

resources/js/components/themes/typography-controls.tsx

@@ -7,14 +7,14 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { useThemeStore } from '@/lib/theme/store';
 import {
     loadGoogleFont,
     MONO_FONTS,
     SANS_FONTS,
     SERIF_FONTS,
 } from './font-list';
-import { Slider } from '@/components/ui/slider';
-import { useThemeStore } from '@/lib/theme/store';
 
 const SCALES = [
     { name: 'Minor Second', value: 1.067 },
@@ -129,13 +129,11 @@ export function TypographyControls() {
 }
 
 function FontSelect({
-    kind,
     label,
     options,
     value,
     onChange,
 }: {
-    kind: string;
     label: string;
     options: string[];
     value: string;

resources/js/layouts/main/main-footer.tsx

@@ -1,11 +1,11 @@
 import { Link } from '@inertiajs/react';
 import { GithubIcon } from 'lucide-react';
 
+import XIcon from '@/components/icons/x-icon';
 import { Button } from '@/components/ui/button';
 import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
 import MainWrapper from '@/layouts/main/main-wrapper';
 import { home } from '@/routes';
-import XIcon from '@/components/icons/x-icon';
 
 const navLinks = [
     { href: '#', label: 'Features' },

resources/js/layouts/main/theme/main-theme-card.tsx

@@ -1,4 +1,5 @@
-import { motion, type Variants } from 'motion/react';
+import { motion  } from 'motion/react';
+import type {Variants} from 'motion/react';
 import {
     Card,
     CardContent,

resources/js/layouts/main/theme/main-theme-search.tsx

@@ -48,7 +48,9 @@ function MainThemeSearch({
     }, [debouncedSearch, selectedTags]);
 
     useEffect(() => {
-        if (!showFilters) return;
+        if (!showFilters) {
+return;
+}
 
         const handler = (e: MouseEvent) => {
             if (