@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/theme/AiThemeCustomizer.svelte

@@ -0,0 +1,665 @@
+<script lang="ts">import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Badge } from "../ui/badge";
+import { Icon } from "../icon";
+let { isPaidUser = true, onApplyTheme, onUpgradeRequest, class: className = "" } = $props();
+let prompt = $state("");
+let generating = $state(false);
+let generatedResult = $state(null);
+const INSPIRATION_PROMPTS = [
+	{
+		label: "Vaporwave Mall 1995",
+		prompt: "90s vaporwave mall aesthetic with pastel cyan, sunset magenta, and marble grid"
+	},
+	{
+		label: "Myspace Glitter 2006",
+		prompt: "Myspace scene kid 2006 glitter with hot fuchsia, pitch black, and sparkling neon borders"
+	},
+	{
+		label: "Cyberpunk CRT Scanlines",
+		prompt: "Cyberpunk terminal rain with emerald phosphor scanlines and dark obsidian glass"
+	},
+	{
+		label: "Autumn Cedar Lodge",
+		prompt: "Cozy rustic cedar lodge with warm maple wood, crackling ember orange, and cream paper"
+	},
+	{
+		label: "Tokyo Anime Dusk",
+		prompt: "Lo-fi Tokyo midnight with storm purple, neon indigo, and pastel pink lanterns"
+	},
+	{
+		label: "Brat Electric Lime",
+		prompt: "Hyperpop club night with striking electric lime green and high-contrast black lacquer"
+	}
+];
+function selectInspiration(item) {
+	prompt = item.prompt;
+	generateTheme();
+}
+function generateTheme() {
+	if (!prompt.trim() || generating) return;
+	generating = true;
+	// Deterministic, offline theme synthesis: prompt keywords map to semantic
+	// palettes and retro effects. It answers at once; no latency is simulated.
+	const lower = prompt.toLowerCase();
+	let name;
+	let description;
+	let tags;
+	let palette;
+	let customCss;
+	if (lower.includes("vaporwave") || lower.includes("1995") || lower.includes("pastel")) {
+		name = "Vaporwave Sunset 1995";
+		description = "Pastel cyan, dusk magenta, and nostalgic mall plaza grids";
+		tags = [
+			"vaporwave",
+			"retro",
+			"nostalgia"
+		];
+		palette = {
+			light: {
+				"--background": "#fdf4ff",
+				"--foreground": "#3b0764",
+				"--card": "#ffffff",
+				"--card-foreground": "#3b0764",
+				"--popover": "#ffffff",
+				"--popover-foreground": "#3b0764",
+				"--primary": "#c026d3",
+				"--primary-foreground": "#ffffff",
+				"--secondary": "#fdf2f8",
+				"--secondary-foreground": "#3b0764",
+				"--muted": "#fae8ff",
+				"--muted-foreground": "#86198f",
+				"--accent": "#a5f3fc",
+				"--accent-foreground": "#083344",
+				"--success": "#06b6d4",
+				"--success-foreground": "#ffffff",
+				"--warning": "#f59e0b",
+				"--warning-foreground": "#451a03",
+				"--info": "#8b5cf6",
+				"--info-foreground": "#ffffff",
+				"--destructive": "#e11d48",
+				"--destructive-foreground": "#ffffff",
+				"--border": "#f0abfc",
+				"--input": "#f0abfc",
+				"--ring": "#c026d3",
+				"--chart-1": "#c026d3",
+				"--chart-2": "#06b6d4",
+				"--chart-3": "#8b5cf6",
+				"--chart-4": "#f59e0b",
+				"--chart-5": "#3b0764",
+				"--sidebar": "#ffffff",
+				"--sidebar-foreground": "#3b0764",
+				"--sidebar-primary": "#c026d3",
+				"--sidebar-primary-foreground": "#ffffff",
+				"--sidebar-accent": "#fdf2f8",
+				"--sidebar-accent-foreground": "#3b0764",
+				"--sidebar-border": "#f0abfc",
+				"--sidebar-ring": "#c026d3",
+				"--brand": "#c026d3",
+				"--brand-fill": "#c026d3",
+				"--brand-foreground": "#ffffff"
+			},
+			dark: {
+				"--background": "#150824",
+				"--foreground": "#fdf4ff",
+				"--card": "#200e36",
+				"--card-foreground": "#fdf4ff",
+				"--popover": "#200e36",
+				"--popover-foreground": "#fdf4ff",
+				"--primary": "#f472b6",
+				"--primary-foreground": "#150824",
+				"--secondary": "#331554",
+				"--secondary-foreground": "#fdf4ff",
+				"--muted": "#2c1048",
+				"--muted-foreground": "#e879f9",
+				"--accent": "#083344",
+				"--accent-foreground": "#67e8f9",
+				"--success": "#22d3ee",
+				"--success-foreground": "#083344",
+				"--warning": "#fbbf24",
+				"--warning-foreground": "#150824",
+				"--info": "#a78bfa",
+				"--info-foreground": "#150824",
+				"--destructive": "#fb7185",
+				"--destructive-foreground": "#150824",
+				"--border": "color-mix(in oklch, #f472b6 28%, transparent)",
+				"--input": "color-mix(in oklch, #f472b6 32%, transparent)",
+				"--ring": "#f472b6",
+				"--chart-1": "#f472b6",
+				"--chart-2": "#22d3ee",
+				"--chart-3": "#a78bfa",
+				"--chart-4": "#fbbf24",
+				"--chart-5": "#fdf4ff",
+				"--sidebar": "#11051e",
+				"--sidebar-foreground": "#fdf4ff",
+				"--sidebar-primary": "#f472b6",
+				"--sidebar-primary-foreground": "#150824",
+				"--sidebar-accent": "#331554",
+				"--sidebar-accent-foreground": "#fdf4ff",
+				"--sidebar-border": "color-mix(in oklch, #f472b6 28%, transparent)",
+				"--sidebar-ring": "#f472b6",
+				"--brand": "#f472b6",
+				"--brand-fill": "#f472b6",
+				"--brand-foreground": "#150824"
+			}
+		};
+		customCss = [
+			"body {",
+			"  background-image:",
+			"    linear-gradient(to right, rgba(192, 38, 211, 0.05) 1px, transparent 1px),",
+			"    linear-gradient(to bottom, rgba(192, 38, 211, 0.05) 1px, transparent 1px),",
+			"    radial-gradient(ellipse at 50% 0%, rgba(6, 182, 212, 0.15) 0%, transparent 60%);",
+			"  background-size: 32px 32px, 32px 32px, 100% 100%;",
+			"  background-attachment: fixed;",
+			"}",
+			".bg-card {",
+			"  backdrop-filter: blur(12px);",
+			"  border-image: linear-gradient(135deg, #c026d3, #06b6d4) 1;",
+			"  box-shadow: 0 8px 32px -4px rgba(192, 38, 211, 0.15);",
+			"}"
+		].join("\n");
+	} else if (lower.includes("myspace") || lower.includes("glitter") || lower.includes("scene")) {
+		name = "Myspace Scene Glitter 2006";
+		description = "Hot pink, sparkling borders, and pure 2006 web nostalgia";
+		tags = [
+			"myspace",
+			"glitter",
+			"emo-scene"
+		];
+		palette = {
+			light: {
+				"--background": "#fff1f2",
+				"--foreground": "#18020a",
+				"--card": "#ffffff",
+				"--card-foreground": "#18020a",
+				"--popover": "#ffffff",
+				"--popover-foreground": "#18020a",
+				"--primary": "#e11d48",
+				"--primary-foreground": "#ffffff",
+				"--secondary": "#ffe4e6",
+				"--secondary-foreground": "#18020a",
+				"--muted": "#fff1f2",
+				"--muted-foreground": "#9f1239",
+				"--accent": "#fecdd3",
+				"--accent-foreground": "#881337",
+				"--success": "#10b981",
+				"--success-foreground": "#ffffff",
+				"--warning": "#f59e0b",
+				"--warning-foreground": "#18020a",
+				"--info": "#06b6d4",
+				"--info-foreground": "#ffffff",
+				"--destructive": "#be123c",
+				"--destructive-foreground": "#ffffff",
+				"--border": "#fda4af",
+				"--input": "#fda4af",
+				"--ring": "#e11d48",
+				"--chart-1": "#e11d48",
+				"--chart-2": "#fb7185",
+				"--chart-3": "#06b6d4",
+				"--chart-4": "#f59e0b",
+				"--chart-5": "#18020a",
+				"--sidebar": "#ffffff",
+				"--sidebar-foreground": "#18020a",
+				"--sidebar-primary": "#e11d48",
+				"--sidebar-primary-foreground": "#ffffff",
+				"--sidebar-accent": "#ffe4e6",
+				"--sidebar-accent-foreground": "#18020a",
+				"--sidebar-border": "#fda4af",
+				"--sidebar-ring": "#e11d48",
+				"--brand": "#e11d48",
+				"--brand-fill": "#e11d48",
+				"--brand-foreground": "#ffffff"
+			},
+			dark: {
+				"--background": "#0d0206",
+				"--foreground": "#ffe4e6",
+				"--card": "#19040c",
+				"--card-foreground": "#ffe4e6",
+				"--popover": "#19040c",
+				"--popover-foreground": "#ffe4e6",
+				"--primary": "#fb7185",
+				"--primary-foreground": "#0d0206",
+				"--secondary": "#2e0716",
+				"--secondary-foreground": "#ffe4e6",
+				"--muted": "#240612",
+				"--muted-foreground": "#fda4af",
+				"--accent": "#3d0a1e",
+				"--accent-foreground": "#fff1f2",
+				"--success": "#34d399",
+				"--success-foreground": "#0d0206",
+				"--warning": "#fbbf24",
+				"--warning-foreground": "#0d0206",
+				"--info": "#22d3ee",
+				"--info-foreground": "#0d0206",
+				"--destructive": "#f43f5e",
+				"--destructive-foreground": "#0d0206",
+				"--border": "color-mix(in oklch, #fb7185 30%, transparent)",
+				"--input": "color-mix(in oklch, #fb7185 34%, transparent)",
+				"--ring": "#fb7185",
+				"--chart-1": "#fb7185",
+				"--chart-2": "#fda4af",
+				"--chart-3": "#22d3ee",
+				"--chart-4": "#fbbf24",
+				"--chart-5": "#ffe4e6",
+				"--sidebar": "#0a0105",
+				"--sidebar-foreground": "#ffe4e6",
+				"--sidebar-primary": "#fb7185",
+				"--sidebar-primary-foreground": "#0d0206",
+				"--sidebar-accent": "#2e0716",
+				"--sidebar-accent-foreground": "#ffe4e6",
+				"--sidebar-border": "color-mix(in oklch, #fb7185 30%, transparent)",
+				"--sidebar-ring": "#fb7185",
+				"--brand": "#fb7185",
+				"--brand-fill": "#fb7185",
+				"--brand-foreground": "#0d0206"
+			}
+		};
+		customCss = [
+			"body {",
+			"  background-image:",
+			"    radial-gradient(circle at 10% 10%, rgba(251, 113, 133, 0.15) 0%, transparent 20%),",
+			"    radial-gradient(circle at 90% 90%, rgba(251, 113, 133, 0.15) 0%, transparent 20%),",
+			"    linear-gradient(180deg, #0d0206 0%, #15030a 100%);",
+			"  background-attachment: fixed;",
+			"}",
+			".bg-card {",
+			"  border: 1px dashed #fb7185;",
+			"  box-shadow: 0 0 15px rgba(251, 113, 133, 0.25);",
+			"}"
+		].join("\n");
+	} else if (lower.includes("cyber") || lower.includes("crt") || lower.includes("matrix")) {
+		name = "Cyber Matrix Neon";
+		description = "CRT phosphor scanlines with cyberpunk rainy glass depth";
+		tags = [
+			"cyberpunk",
+			"crt-scanlines",
+			"terminal"
+		];
+		palette = {
+			light: {
+				"--background": "#f0fdf4",
+				"--foreground": "#052e16",
+				"--card": "#ffffff",
+				"--card-foreground": "#052e16",
+				"--popover": "#ffffff",
+				"--popover-foreground": "#052e16",
+				"--primary": "#15803d",
+				"--primary-foreground": "#ffffff",
+				"--secondary": "#dcfce7",
+				"--secondary-foreground": "#052e16",
+				"--muted": "#f0fdf4",
+				"--muted-foreground": "#166534",
+				"--accent": "#bbf7d0",
+				"--accent-foreground": "#14532d",
+				"--success": "#16a34a",
+				"--success-foreground": "#ffffff",
+				"--warning": "#ca8a04",
+				"--warning-foreground": "#ffffff",
+				"--info": "#0284c7",
+				"--info-foreground": "#ffffff",
+				"--destructive": "#dc2626",
+				"--destructive-foreground": "#ffffff",
+				"--border": "#86efac",
+				"--input": "#86efac",
+				"--ring": "#15803d",
+				"--chart-1": "#15803d",
+				"--chart-2": "#22c55e",
+				"--chart-3": "#4ade80",
+				"--chart-4": "#ca8a04",
+				"--chart-5": "#052e16",
+				"--sidebar": "#ffffff",
+				"--sidebar-foreground": "#052e16",
+				"--sidebar-primary": "#15803d",
+				"--sidebar-primary-foreground": "#ffffff",
+				"--sidebar-accent": "#dcfce7",
+				"--sidebar-accent-foreground": "#052e16",
+				"--sidebar-border": "#86efac",
+				"--sidebar-ring": "#15803d",
+				"--brand": "#15803d",
+				"--brand-fill": "#15803d",
+				"--brand-foreground": "#ffffff"
+			},
+			dark: {
+				"--background": "#020804",
+				"--foreground": "#86efac",
+				"--card": "#051409",
+				"--card-foreground": "#86efac",
+				"--popover": "#051409",
+				"--popover-foreground": "#86efac",
+				"--primary": "#4ade80",
+				"--primary-foreground": "#020804",
+				"--secondary": "#0c2e15",
+				"--secondary-foreground": "#86efac",
+				"--muted": "#092110",
+				"--muted-foreground": "#22c55e",
+				"--accent": "#144621",
+				"--accent-foreground": "#bbf7d0",
+				"--success": "#4ade80",
+				"--success-foreground": "#020804",
+				"--warning": "#facc15",
+				"--warning-foreground": "#020804",
+				"--info": "#38bdf8",
+				"--info-foreground": "#020804",
+				"--destructive": "#f87171",
+				"--destructive-foreground": "#020804",
+				"--border": "color-mix(in oklch, #4ade80 26%, transparent)",
+				"--input": "color-mix(in oklch, #4ade80 30%, transparent)",
+				"--ring": "#4ade80",
+				"--chart-1": "#4ade80",
+				"--chart-2": "#22c55e",
+				"--chart-3": "#86efac",
+				"--chart-4": "#facc15",
+				"--chart-5": "#166534",
+				"--sidebar": "#010502",
+				"--sidebar-foreground": "#86efac",
+				"--sidebar-primary": "#4ade80",
+				"--sidebar-primary-foreground": "#020804",
+				"--sidebar-accent": "#0c2e15",
+				"--sidebar-accent-foreground": "#86efac",
+				"--sidebar-border": "color-mix(in oklch, #4ade80 26%, transparent)",
+				"--sidebar-ring": "#4ade80",
+				"--brand": "#4ade80",
+				"--brand-fill": "#4ade80",
+				"--brand-foreground": "#020804"
+			}
+		};
+		customCss = [
+			"body {",
+			"  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(34, 197, 94, 0.04) 2px, rgba(34, 197, 94, 0.04) 4px);",
+			"}",
+			".bg-card {",
+			"  box-shadow: 0 0 20px -3px rgba(34, 197, 94, 0.15);",
+			"}"
+		].join("\n");
+	} else {
+		// Harmonious modern dusk synth
+		name = "Twilight Synth Pulse";
+		description = "Deep violet mood with luminous sapphire accents and clean glass cards";
+		tags = [
+			"synth",
+			"twilight",
+			"clean"
+		];
+		palette = {
+			light: {
+				"--background": "#f8fafc",
+				"--foreground": "#0f172a",
+				"--card": "#ffffff",
+				"--card-foreground": "#0f172a",
+				"--popover": "#ffffff",
+				"--popover-foreground": "#0f172a",
+				"--primary": "#6366f1",
+				"--primary-foreground": "#ffffff",
+				"--secondary": "#eef2ff",
+				"--secondary-foreground": "#0f172a",
+				"--muted": "#f1f5f9",
+				"--muted-foreground": "#475569",
+				"--accent": "#e0e7ff",
+				"--accent-foreground": "#3730a3",
+				"--success": "#10b981",
+				"--success-foreground": "#ffffff",
+				"--warning": "#f59e0b",
+				"--warning-foreground": "#0f172a",
+				"--info": "#3b82f6",
+				"--info-foreground": "#ffffff",
+				"--destructive": "#ef4444",
+				"--destructive-foreground": "#ffffff",
+				"--border": "#cbd5e1",
+				"--input": "#cbd5e1",
+				"--ring": "#6366f1",
+				"--chart-1": "#6366f1",
+				"--chart-2": "#8b5cf6",
+				"--chart-3": "#3b82f6",
+				"--chart-4": "#f59e0b",
+				"--chart-5": "#0f172a",
+				"--sidebar": "#ffffff",
+				"--sidebar-foreground": "#0f172a",
+				"--sidebar-primary": "#6366f1",
+				"--sidebar-primary-foreground": "#ffffff",
+				"--sidebar-accent": "#eef2ff",
+				"--sidebar-accent-foreground": "#0f172a",
+				"--sidebar-border": "#cbd5e1",
+				"--sidebar-ring": "#6366f1",
+				"--brand": "#6366f1",
+				"--brand-fill": "#6366f1",
+				"--brand-foreground": "#ffffff"
+			},
+			dark: {
+				"--background": "#0a0a14",
+				"--foreground": "#f8fafc",
+				"--card": "#121324",
+				"--card-foreground": "#f8fafc",
+				"--popover": "#121324",
+				"--popover-foreground": "#f8fafc",
+				"--primary": "#818cf8",
+				"--primary-foreground": "#0a0a14",
+				"--secondary": "#1e213d",
+				"--secondary-foreground": "#f8fafc",
+				"--muted": "#181a30",
+				"--muted-foreground": "#a5b4fc",
+				"--accent": "#272b52",
+				"--accent-foreground": "#e0e7ff",
+				"--success": "#34d399",
+				"--success-foreground": "#0a0a14",
+				"--warning": "#fbbf24",
+				"--warning-foreground": "#0a0a14",
+				"--info": "#60a5fa",
+				"--info-foreground": "#0a0a14",
+				"--destructive": "#f87171",
+				"--destructive-foreground": "#0a0a14",
+				"--border": "color-mix(in oklch, #818cf8 24%, transparent)",
+				"--input": "color-mix(in oklch, #818cf8 28%, transparent)",
+				"--ring": "#818cf8",
+				"--chart-1": "#818cf8",
+				"--chart-2": "#a78bfa",
+				"--chart-3": "#60a5fa",
+				"--chart-4": "#fbbf24",
+				"--chart-5": "#f8fafc",
+				"--sidebar": "#080810",
+				"--sidebar-foreground": "#f8fafc",
+				"--sidebar-primary": "#818cf8",
+				"--sidebar-primary-foreground": "#0a0a14",
+				"--sidebar-accent": "#1e213d",
+				"--sidebar-accent-foreground": "#f8fafc",
+				"--sidebar-border": "color-mix(in oklch, #818cf8 24%, transparent)",
+				"--sidebar-ring": "#818cf8",
+				"--brand": "#818cf8",
+				"--brand-fill": "#818cf8",
+				"--brand-foreground": "#0a0a14"
+			}
+		};
+		customCss = [
+			"body {",
+			"  background-image:",
+			"    radial-gradient(circle at 80% 10%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),",
+			"    linear-gradient(180deg, #0a0a14 0%, #06060c 100%);",
+			"  background-attachment: fixed;",
+			"}",
+			".bg-card {",
+			"  box-shadow: 0 4px 20px -2px rgba(99, 102, 241, 0.15);",
+			"}"
+		].join("\n");
+	}
+	if (!palette.light["--highlight"]) {
+		palette.light["--highlight"] = palette.light["--ring"] || palette.light["--primary"];
+		palette.light["--highlight-foreground"] = palette.light["--primary-foreground"] || "#ffffff";
+	}
+	if (!palette.dark["--highlight"]) {
+		palette.dark["--highlight"] = palette.dark["--ring"] || palette.dark["--primary"];
+		palette.dark["--highlight-foreground"] = palette.dark["--primary-foreground"] || "#000000";
+	}
+	generatedResult = {
+		name,
+		description,
+		colors: palette,
+		customCss,
+		tags
+	};
+	generating = false;
+}
+function handleApply() {
+	if (!generatedResult) return;
+	if (!isPaidUser) {
+		onUpgradeRequest?.();
+		return;
+	}
+	onApplyTheme?.(generatedResult.colors, generatedResult.customCss, generatedResult.name);
+}
+</script>
+
+<div class={`ai-theme-customizer space-y-4 rounded-lg border p-4 ${className}`}>
+	<div class="flex items-center justify-between gap-2">
+		<div class="space-y-0.5">
+			<div class="flex items-center gap-2">
+				<h3 class="text-sm font-semibold tracking-tight">AI Theme Studio</h3>
+				<Badge variant="secondary" class="gap-1 text-[10px] font-medium tracking-wide">
+					<Icon icon="lucide:sparkles" class="h-3 w-3 text-amber-500" />
+					PRO
+				</Badge>
+			</div>
+			<p class="text-xs text-muted-foreground">
+				Describe any mood, nostalgic era, or visual aesthetic to synthesize matched colors,
+				background effects, and retro flourishes.
+			</p>
+		</div>
+	</div>
+
+	<div class="space-y-2">
+		<div class="flex gap-2">
+			<Input
+				bind:value={prompt}
+				placeholder="e.g. 90s vaporwave mall with neon cyan, dusk magenta, and CRT scanlines..."
+				class="text-xs"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') generateTheme();
+				}}
+			/>
+			<Button
+				type="button"
+				size="sm"
+				class="shrink-0 gap-1.5"
+				disabled={generating || !prompt.trim()}
+				onclick={generateTheme}
+			>
+				{#if generating}
+					<Icon icon="lucide:loader-circle" class="h-3.5 w-3.5 animate-spin" />
+					Synthesizing...
+				{:else}
+					<Icon icon="lucide:wand-2" class="h-3.5 w-3.5" />
+					Generate
+				{/if}
+			</Button>
+		</div>
+
+		<!-- Quick inspiration chips -->
+		<div class="flex flex-wrap items-center gap-1.5 pt-1">
+			<span class="text-[10px] font-medium tracking-wider text-muted-foreground uppercase"
+				>Inspiration:</span
+			>
+			{#each INSPIRATION_PROMPTS as item (item.label)}
+				<button
+					type="button"
+					class="rounded-full border border-border/80 bg-muted/40 px-2 py-0.5 text-[11px] text-muted-foreground transition hover:border-primary/50 hover:bg-muted hover:text-foreground"
+					onclick={() => selectInspiration(item)}
+				>
+					{item.label}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	{#if generatedResult}
+		<div class="space-y-3 rounded-md border bg-muted/20 p-3">
+			<div class="flex items-start justify-between gap-2">
+				<div>
+					<h4 class="text-xs font-semibold">{generatedResult.name}</h4>
+					<p class="text-[11px] text-muted-foreground">{generatedResult.description}</p>
+				</div>
+				<div class="flex flex-wrap gap-1">
+					{#each generatedResult.tags as tag (tag)}
+						<span
+							class="rounded bg-secondary px-1.5 py-0.5 text-[9px] font-medium text-secondary-foreground"
+						>
+							#{tag}
+						</span>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Live preview card with generated styles -->
+			<div
+				class="rounded-md border p-3 transition-all"
+				style="background-color: {generatedResult.colors.light[
+					'--card'
+				]}; border-color: {generatedResult.colors.light['--border']}; color: {generatedResult.colors
+					.light['--foreground']};"
+			>
+				<div
+					class="flex items-center justify-between border-b pb-2"
+					style="border-color: {generatedResult.colors.light['--border']};"
+				>
+					<div class="flex items-center gap-2">
+						<div
+							class="flex h-5 w-5 items-center justify-center rounded text-[10px] font-bold"
+							style="background-color: {generatedResult.colors.light[
+								'--primary'
+							]}; color: {generatedResult.colors.light['--primary-foreground']};"
+						>
+							V
+						</div>
+						<span class="text-[11px] font-bold tracking-wide">Workspace Preview</span>
+					</div>
+					<span
+						class="rounded px-1.5 py-0.5 text-[9px] font-semibold"
+						style="background-color: {generatedResult.colors.light[
+							'--accent'
+						]}; color: {generatedResult.colors.light['--accent-foreground']};"
+					>
+						Active Vibe
+					</span>
+				</div>
+
+				<div class="mt-2.5 flex items-center gap-2">
+					<button
+						type="button"
+						class="rounded px-2.5 py-1 text-[11px] font-medium shadow-xs"
+						style="background-color: {generatedResult.colors.light[
+							'--primary'
+						]}; color: {generatedResult.colors.light['--primary-foreground']};"
+					>
+						Primary Action
+					</button>
+					<button
+						type="button"
+						class="rounded border px-2 py-1 text-[11px] font-medium"
+						style="background-color: {generatedResult.colors.light[
+							'--secondary'
+						]}; color: {generatedResult.colors.light[
+							'--secondary-foreground'
+						]}; border-color: {generatedResult.colors.light['--border']};"
+					>
+						Secondary
+					</button>
+				</div>
+			</div>
+
+			<div class="flex items-center justify-end gap-2 pt-1">
+				{#if !isPaidUser}
+					<div class="flex items-center gap-2">
+						<span class="text-xs text-muted-foreground">Unlock custom AI themes with Pro</span>
+						<Button size="sm" variant="default" class="gap-1 text-xs" onclick={handleApply}>
+							<Icon icon="lucide:sparkles" class="h-3 w-3 text-amber-400" />
+							Upgrade to Apply
+						</Button>
+					</div>
+				{:else}
+					<Button size="sm" class="gap-1.5 text-xs" onclick={handleApply}>
+						<Icon icon="lucide:check" class="h-3.5 w-3.5" />
+						Apply This Vibe
+					</Button>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/lib/components/theme/AiThemeCustomizer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeColors } from './theme-colors';
+type Props = {
+    isPaidUser?: boolean;
+    onApplyTheme?: (colors: ThemeColors, customCss: string, name: string) => void;
+    onUpgradeRequest?: () => void;
+    class?: string;
+};
+declare const AiThemeCustomizer: import("svelte").Component<Props, {}, "">;
+type AiThemeCustomizer = ReturnType<typeof AiThemeCustomizer>;
+export default AiThemeCustomizer;