previewcn 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,10 +1,1929 @@
 #!/usr/bin/env node
-import {Command}from'commander';import l from'chalk';import y from'fs/promises';import a from'path';import h from'ora';import F from'prompts';import {spawn}from'child_process';import {detect}from'detect-package-manager';async function u(e){let t={isNextJs:false,isAppRouter:false};try{let n=a.join(e,"package.json"),r=await y.readFile(n,"utf-8"),c=JSON.parse(r);t.isNextJs=!!(c.dependencies?.next||c.devDependencies?.next);}catch{return t}let o=[a.join(e,"app"),a.join(e,"src","app")];for(let n of o)try{if((await y.stat(n)).isDirectory()){t.isAppRouter=!0;break}}catch{}return t}async function f(e){let t=[a.join(e,"app","layout.tsx"),a.join(e,"app","layout.ts"),a.join(e,"app","layout.jsx"),a.join(e,"app","layout.js"),a.join(e,"src","app","layout.tsx"),a.join(e,"src","app","layout.ts"),a.join(e,"src","app","layout.jsx"),a.join(e,"src","app","layout.js")];for(let o of t)try{return await y.access(o),o}catch{}return null}async function P(e){return await O(e,"@previewcn/devtools")}async function O(e,t){let o=await S(e);return o?!!(o.devDependencies?.[t]??o.dependencies?.[t]):false}async function S(e){try{let t=a.join(e,"package.json"),o=await y.readFile(t,"utf-8");return JSON.parse(o)}catch{return null}}var s={info:e=>console.log(l.blue("info"),e),success:e=>console.log(l.green("success"),e),warn:e=>console.log(l.yellow("warn"),e),error:e=>console.log(l.red("error"),e),hint:e=>console.log(l.gray("hint"),e)};var b=/^import[\s\S]*?;\s*$/gm,T='import "@previewcn/devtools/styles.css";',J='import { PreviewcnDevtools } from "@previewcn/devtools";',E='{process.env.NODE_ENV === "development" && <PreviewcnDevtools />}';function M(e,t){if(t.length===0)return e;let o=`
+import {Command}from'commander';import*as C from'fs/promises';import C__default from'fs/promises';import*as l from'path';import l__default from'path';import u from'chalk';import G from'ora';import we from'prompts';async function h(e){let t={isNextJs:false,isAppRouter:false};try{let r=l__default.join(e,"package.json"),s=await C__default.readFile(r,"utf-8"),n=JSON.parse(s);t.isNextJs=!!(n.dependencies?.next||n.devDependencies?.next);}catch{return t}let o=[l__default.join(e,"app"),l__default.join(e,"src","app")];for(let r of o)try{if((await C__default.stat(r)).isDirectory()){t.isAppRouter=!0;break}}catch{}return t}async function k(e){let t=[l__default.join(e,"app","layout.tsx"),l__default.join(e,"app","layout.ts"),l__default.join(e,"app","layout.jsx"),l__default.join(e,"app","layout.js"),l__default.join(e,"src","app","layout.tsx"),l__default.join(e,"src","app","layout.ts"),l__default.join(e,"src","app","layout.jsx"),l__default.join(e,"src","app","layout.js")];for(let o of t)try{return await C__default.access(o),o}catch{}return null}var a={info:e=>console.log(u.blue("info"),e),success:e=>console.log(u.green("success"),e),warn:e=>console.log(u.yellow("warn"),e),error:e=>console.log(u.red("error"),e),hint:e=>console.log(u.gray("hint"),e)};var re=/^import[\s\S]*?;\s*$/gm,ne=/^import[\s\S]*?@previewcn\/devtools(?:\/styles\.css)?["'][\s\S]*?;\s*$/gm,se=/import\s+\{[^}]*\bPreviewcnDevtools\b[^}]*\}\s+from\s+["'][^"']+["'];?/,ae="@/components/ui/previewcn",le='{process.env.NODE_ENV === "development" && <PreviewcnDevtools />}';function ie(e){return `import { PreviewcnDevtools } from "${e}";`}function ce(e){return e.replace(ne,"").replace(/\n{3,}/g,`
+
+`)}function pe(e){return se.test(e)}function de(e,t){if(t.length===0)return e;let o=`
 ${t.join(`
-`)}`,n=[...e.matchAll(b)];if(n.length===0)return `${t.join(`
+`)}`,r=[...e.matchAll(re)];if(r.length===0)return `${t.join(`
 `)}
 
-${e}`;let r=n[n.length-1],c=r.index+r[0].length;return e.slice(0,c)+o+e.slice(c)}function L(e,t){let o=e.match(/<body[^>]*>/);if(!o)return e;let n=o.index+o[0].length;return e.slice(0,n)+`
-        `+t+e.slice(n)}async function x(e){let t=await y.readFile(e,"utf-8"),o=[];t.includes("@previewcn/devtools/styles.css")||o.push(T),t.includes("PreviewcnDevtools")||o.push(J);let n=M(t,o);n.includes("<PreviewcnDevtools")||(n=L(n,E)),await y.writeFile(e,n,"utf-8");}async function D(e){try{return (await y.readFile(e,"utf-8")).includes("PreviewcnDevtools")}catch{return  false}}async function j(){s.info(`Running PreviewCN diagnostics...
-`);let e=[],t=await u(process.cwd());e.push({name:"Next.js App Router",pass:t.isNextJs&&t.isAppRouter,message:t.isNextJs?t.isAppRouter?"Detected":"App Router not found (using Pages Router?)":"Not a Next.js project"});let o=await P(process.cwd());e.push({name:"@previewcn/devtools package",pass:o,message:o?"Installed":"Not found (run `npx previewcn init`)"});let n=false,r=await f(process.cwd());r&&(n=await D(r)),e.push({name:"PreviewcnDevtools in layout",pass:n,message:n?"Found":"Not found in layout (run `npx previewcn init`)"}),console.log();for(let i of e){let d=i.pass?l.green("\u2713"):l.red("\u2717"),p=i.pass?l.green(i.message):l.red(i.message);console.log(`  ${d} ${i.name}: ${p}`);}console.log(),e.every(i=>i.pass)?(s.success("All checks passed! PreviewCN devtools is ready to use."),s.info("Run your dev server and click the theme icon to open the editor.")):s.warn("Some checks failed. Run `npx previewcn init` to set up.");}function g(e){return l.cyan(e)}async function N(e,t){return !!(await F({type:"confirm",name:"value",message:e,initial:t})).value}async function k(e){return await detect({cwd:e})}async function A(e,t,o){let n=V(e,t);return new Promise((r,c)=>{let i=spawn(e,n,{cwd:o,stdio:"pipe"}),d="";i.stderr?.on("data",p=>{d+=p.toString();}),i.on("close",p=>{p===0?r():c(new Error(`Failed to install ${t}: ${d}`));}),i.on("error",p=>{c(p);});})}function V(e,t){return e==="pnpm"?["add","-D",t]:e==="yarn"?["add","-D",t]:e==="bun"?["add","-D",t]:["install","-D",t]}async function C(e){s.info(`Initializing PreviewCN...
-`);let t=h("Detecting project type...").start(),o=await u(process.cwd());o.isNextJs||(t.fail("Not a Next.js project"),s.error("PreviewCN requires a Next.js project with App Router."),s.hint("Make sure you're in the root of a Next.js project."),process.exit(1)),o.isAppRouter||(t.fail("App Router not detected"),s.error("PreviewCN requires Next.js App Router (app/ directory)."),s.hint("Create an app/ directory or migrate from pages/ to app/."),process.exit(1)),t.succeed("Next.js App Router project detected");let n=await f(process.cwd());n||(s.error("Could not find app/layout.tsx"),process.exit(1)),s.info(`Found layout at: ${g(a.relative(process.cwd(),n))}`),e.yes||await N("This will install @previewcn/devtools and modify your app layout. Continue?",true)||(s.info("Aborted."),process.exit(0)),await Y(n),console.log(),s.success("PreviewCN devtools initialized successfully!"),console.log(),s.info("Next step:"),console.log(`  Run ${g("pnpm dev")} (or your dev command) to start the dev server.`),console.log(`  Click the ${g("theme palette icon")} in the bottom-right corner to open the editor.`),console.log();}async function Y(e){let t=process.cwd(),o=h("Installing @previewcn/devtools...").start();try{let r=await k(t);await A(r,"@previewcn/devtools",t),o.succeed("Installed @previewcn/devtools");}catch(r){o.fail("Failed to install @previewcn/devtools"),s.error(r instanceof Error?r.message:String(r)),s.hint("You can install it manually: pnpm add -D @previewcn/devtools");}let n=h("Adding PreviewcnDevtools to layout...").start();try{await x(e),n.succeed("Added PreviewcnDevtools to layout");}catch(r){n.fail("Failed to modify layout for devtools"),s.error(r instanceof Error?r.message:String(r)),s.hint("You may need to add PreviewcnDevtools manually. See documentation.");}}var v=new Command;v.name("previewcn").description("CLI for PreviewCN - real-time shadcn/ui theme editor").version("0.1.0");v.command("init",{isDefault:true}).description("Initialize PreviewCN devtools in your Next.js project").option("-y, --yes","Skip confirmation prompts").action(C);v.command("doctor").description("Check PreviewCN setup and diagnose issues").action(j);v.parse();
+${e}`;let s=r[r.length-1],n=s.index+s[0].length;return e.slice(0,n)+o+e.slice(n)}function ue(e,t){let o=e.match(/<body[^>]*>/);if(!o)return e;let r=o.index+o[0].length;return e.slice(0,r)+`
+        `+t+e.slice(r)}async function z(e,t=ae){let o=await C__default.readFile(e,"utf-8"),r=ce(o),s=[];pe(r)||s.push(ie(t));let n=de(r,s);n.includes("<PreviewcnDevtools")||(n=ue(n,le)),await C__default.writeFile(e,n,"utf-8");}async function W(e){try{return (await C__default.readFile(e,"utf-8")).includes("PreviewcnDevtools")}catch{return  false}}var Y=".json";async function fe(e){try{let t=await C.readFile(e,"utf-8");return JSON.parse(t)}catch{return null}}function H(e){return e.endsWith(Y)?e:`${e}${Y}`}function ge(e,t){return t.startsWith(".")?l.resolve(l.dirname(e),H(t)):l.isAbsolute(t)?H(t):null}function me(e,t,o){if(!e)return {};let r=o?l.resolve(t,o):t,s={};for(let[n,c]of Object.entries(e))s[n]=c.map(d=>l.resolve(r,d));return s}async function _(e,t=new Set){if(t.has(e))return {};t.add(e);let o=await fe(e);if(!o)return {};let r=l.dirname(e),s=me(o.compilerOptions?.paths,r,o.compilerOptions?.baseUrl);if(!o.extends)return s;let n=ge(e,o.extends);return n?{...await _(n,t),...s}:s}async function he(e){let t=l.join(e,"tsconfig.json"),o=l.join(e,"jsconfig.json"),r=await _(t);return Object.keys(r).length>0?r:_(o)}function ke(e,t){let o=t.indexOf("*");if(o===-1)return e===t?"":null;let r=t.slice(0,o),s=t.slice(o+1);return !e.startsWith(r)||!e.endsWith(s)?null:e.slice(r.length,e.length-s.length)}function ye(e,t){for(let[o,r]of Object.entries(t)){let s=ke(e,o);if(s===null)continue;let n=r[0];if(n)return o.includes("*")?n.replace("*",s):n}return null}async function be(e,t){if(l.isAbsolute(t))return t;if(t.startsWith("./")||t.startsWith("../"))return l.resolve(e,t);let o=await he(e),r=ye(t,o);if(r)return r;if(t.startsWith("@/")){let s=t.replace(/^@\//,"");try{return await C.access(l.join(e,"src")),l.join(e,"src",s)}catch{return l.join(e,s)}}return l.join(e,t)}async function ve(e){let t=l.join(e,"components.json");try{let o=await C.readFile(t,"utf-8"),r=JSON.parse(o);if(r.aliases?.ui)return r.aliases.ui;if(r.aliases?.components)return `${r.aliases.components}/ui`}catch{}return "@/components/ui"}async function y(e){let t=await ve(e),o=await be(e,t);return {uiAlias:t,importPath:`${t}/previewcn`,targetDir:l.join(o,"previewcn")}}async function Ce(e){try{let t=l__default.join(e,"index.ts");return await C__default.access(t),!0}catch{return  false}}async function X(){a.info(`Running PreviewCN diagnostics...
+`);let e=process.cwd(),t=[],o=await h(e);t.push({name:"Next.js App Router",pass:o.isNextJs&&o.isAppRouter,message:o.isNextJs?o.isAppRouter?"Detected":"App Router not found (using Pages Router?)":"Not a Next.js project"});let{targetDir:r}=await y(e),s=await Ce(r),n=l__default.relative(e,r);t.push({name:"PreviewCN components",pass:s,message:s?`Found in ${n}`:"Not found (run `npx previewcn init`)"});let c=false,d=await k(e);d&&(c=await W(d)),t.push({name:"PreviewcnDevtools in layout",pass:c,message:c?"Found":"Not found in layout (run `npx previewcn init`)"}),console.log();for(let p of t){let te=p.pass?u.green("\u2713"):u.red("\u2717"),oe=p.pass?u.green(p.message):u.red(p.message);console.log(`  ${te} ${p.name}: ${oe}`);}console.log(),t.every(p=>p.pass)?(a.success("All checks passed! PreviewCN devtools is ready to use."),a.info("Run your dev server and click the theme icon to open the editor.")):a.warn("Some checks failed. Run `npx previewcn init` to set up.");}function w(){return `"use client";
+
+import { colorPresets } from "./presets/colors";
+
+type ColorPickerProps = {
+  value: string | null;
+  onChange: (colorPreset: string) => void;
+};
+
+export function ColorPicker({ value, onChange }: ColorPickerProps) {
+  return (
+    <div
+      className="relative grid gap-2.5 p-3 rounded-xl border border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)]"
+      style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+    >
+      <label className="block text-[10.5px] font-semibold tracking-[0.16em] uppercase text-[oklch(0.72_0_0)]">
+        Theme
+      </label>
+      <div className="grid grid-cols-6 gap-2">
+        {colorPresets.map((preset) => {
+          const isSelected = value === preset.name;
+          const primaryColor = preset.colors.light.primary;
+
+          return (
+            <button
+              key={preset.name}
+              onClick={() => onChange(preset.name)}
+              className={\`aspect-square rounded-lg border cursor-pointer transition-all duration-[160ms] focus-visible:outline-2 focus-visible:outline-[oklch(0.72_0.15_265)] focus-visible:outline-offset-2 \${
+                isSelected
+                  ? "border-[oklch(0.72_0.15_265)] shadow-[0_0_0_1px_oklch(0.72_0.15_265),0_10px_20px_oklch(0_0_0/0.35)]"
+                  : "border-[oklch(1_0_0/0.08)] hover:border-[oklch(1_0_0/0.18)]"
+              }\`}
+              style={{
+                backgroundColor: primaryColor,
+                boxShadow: isSelected
+                  ? undefined
+                  : "inset 0 1px 0 oklch(1 0 0 / 0.04)",
+              }}
+              aria-label={preset.label}
+              title={preset.label}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+`}function T(){return `"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import type { ThemeConfig } from "./theme-applier";
+import { copyToClipboard, generateExportCss } from "./css-export";
+
+type CssExportButtonProps = {
+  config: ThemeConfig;
+};
+
+function CopyIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export function CssExportButton({ config }: CssExportButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const resetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+    };
+  }, []);
+
+  const exportCss = generateExportCss(config);
+  const isDisabled = !exportCss;
+  const label = copied ? "Copied!" : "Copy CSS";
+
+  const handleCopy = async () => {
+    if (!exportCss) return;
+
+    const success = await copyToClipboard(exportCss);
+
+    if (success) {
+      setCopied(true);
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+      resetTimerRef.current = setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const baseClass =
+    "inline-flex items-center justify-center gap-1.5 min-h-[30px] px-2.5 py-1.5 mr-auto rounded-[10px] border text-xs font-medium tracking-[0.01em] cursor-pointer transition-all duration-[160ms]";
+
+  const stateClass = copied
+    ? "border-[oklch(0.72_0.17_142)] text-[oklch(0.72_0.17_142)]"
+    : isDisabled
+      ? "opacity-50 cursor-not-allowed border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] text-[oklch(0.96_0_0)]"
+      : "border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] text-[oklch(0.96_0_0)] hover:bg-[oklch(0.24_0.02_260/0.95)] hover:border-[oklch(1_0_0/0.18)]";
+
+  return (
+    <button
+      onClick={handleCopy}
+      className={\`\${baseClass} \${stateClass}\`}
+      style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+      disabled={isDisabled}
+      aria-label={label}
+      title={isDisabled ? "Select a theme first" : "Copy CSS to clipboard"}
+    >
+      {copied ? <CheckIcon /> : <CopyIcon />}
+      <span>{label}</span>
+    </button>
+  );
+}
+`}function S(){return `// CSS Export utilities for generating shadcn/ui compatible CSS
+
+import { getColorPreset } from "./presets/colors";
+import { getThemePreset } from "./presets/theme-presets";
+import type { ThemeConfig } from "./theme-applier";
+
+type ThemeColors = {
+  light: Record<string, string>;
+  dark: Record<string, string>;
+};
+
+type ResolvedTheme = {
+  colors: ThemeColors;
+  radius: string;
+};
+
+/**
+ * Resolve export-ready theme data based on config priority:
+ * 1. colorPreset (if set and found)
+ * 2. preset (full theme preset)
+ * 3. null (no theme selected)
+ */
+function resolveExportTheme(config: ThemeConfig): ResolvedTheme | null {
+  const preset = config.preset !== null ? getThemePreset(config.preset) : null;
+  const colorPreset =
+    config.colorPreset !== null ? getColorPreset(config.colorPreset) : null;
+
+  const colors = colorPreset?.colors ?? preset?.colors ?? null;
+  if (!colors) return null;
+
+  const radius = config.radius ?? preset?.radius ?? "0.5rem";
+  return { colors, radius };
+}
+
+/**
+ * Format CSS variables with proper indentation
+ */
+function formatCssVars(
+  cssVars: Record<string, string>,
+  indent: string = "  "
+): string {
+  return Object.entries(cssVars)
+    .map(([key, value]) => \`\${indent}--\${key}: \${value};\`)
+    .join("\\n");
+}
+
+function formatCssBlock(selector: string, cssVars: Record<string, string>) {
+  return \`\${selector} {\\n\${formatCssVars(cssVars)}\\n}\`;
+}
+
+/**
+ * Generate CSS export string from current theme config
+ * Output format is compatible with shadcn/ui globals.css
+ */
+export function generateExportCss(config: ThemeConfig): string | null {
+  const theme = resolveExportTheme(config);
+  if (!theme) return null;
+
+  const lightVars = { radius: theme.radius, ...theme.colors.light };
+
+  return \`\${formatCssBlock(":root", lightVars)}\\n\\n\${formatCssBlock(
+    ".dark",
+    theme.colors.dark
+  )}\`;
+}
+
+/**
+ * Copy text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback for older browsers or non-HTTPS contexts
+    try {
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      textArea.style.top = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      const result = document.execCommand("copy");
+      document.body.removeChild(textArea);
+      return result;
+    } catch {
+      return false;
+    }
+  }
+}
+`}function F(){return `"use client";
+
+import { lazy, Suspense, useState } from "react";
+
+import { Trigger } from "./trigger";
+
+const Panel = lazy(() => import("./panel"));
+
+// Check if we're in development mode
+const IS_DEV = process.env.NODE_ENV === "development";
+
+// Inner component that uses hooks
+function DevtoolsInner() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      {!open && <Trigger onClick={() => setOpen(true)} />}
+      {open && (
+        <Suspense fallback={null}>
+          <Panel onClose={() => setOpen(false)} />
+        </Suspense>
+      )}
+    </>
+  );
+}
+
+export function PreviewcnDevtools() {
+  // Production guard - return null in production
+  if (!IS_DEV) {
+    return null;
+  }
+
+  return <DevtoolsInner />;
+}
+`}function R(){return `"use client";
+
+import { useState } from "react";
+
+import { fontPresets } from "./presets/fonts";
+
+type FontSelectorProps = {
+  value: string | null;
+  onChange: (font: string) => void;
+};
+
+type FontMenuProps = {
+  value: string | null;
+  onSelect: (fontValue: string) => void;
+};
+
+function ChevronDownIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+function FontMenu({ value, onSelect }: FontMenuProps) {
+  return (
+    <div
+      className="absolute top-[calc(100%+6px)] left-0 z-20 w-full p-1.5 rounded-xl bg-[oklch(0.18_0.02_260)] border border-[oklch(1_0_0/0.08)] max-h-[220px] overflow-y-auto"
+      style={{
+        boxShadow: "0 10px 26px oklch(0 0 0 / 0.45)",
+        animation: "previewcn-pop 0.14s ease",
+      }}
+    >
+      {fontPresets.map((font) => {
+        const isSelected = value === font.value;
+        return (
+          <button
+            key={font.value}
+            onClick={() => onSelect(font.value)}
+            className={\`flex w-full items-center rounded-lg border border-transparent px-2 py-1.5 text-xs text-left text-[oklch(0.96_0_0)] cursor-pointer transition-all duration-[140ms] hover:bg-[oklch(0.24_0.02_260/0.95)] focus-visible:outline-2 focus-visible:outline-[oklch(0.72_0.15_265)] focus-visible:outline-offset-1 \${
+              isSelected
+                ? "border-[oklch(0.72_0.15_265)] bg-[oklch(0.72_0.15_265/0.18)]"
+                : ""
+            }\`}
+          >
+            {font.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function FontSelector({ value, onChange }: FontSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedFont = fontPresets.find((f) => f.value === value);
+  const displayLabel = selectedFont?.label ?? "Select font...";
+
+  const handleToggle = () => {
+    setIsOpen((open) => !open);
+  };
+
+  const handleSelect = (fontValue: string) => {
+    onChange(fontValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      className={\`relative grid gap-2.5 p-3 rounded-xl border border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] \${isOpen ? "z-30" : "z-0"}\`}
+      style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+    >
+      <label className="block text-[10.5px] font-semibold tracking-[0.16em] uppercase text-[oklch(0.72_0_0)]">
+        Font
+      </label>
+      <div className="relative z-[1]">
+        <button
+          onClick={handleToggle}
+          className="inline-flex items-center justify-between gap-1.5 w-full min-h-[30px] px-2.5 py-1.5 rounded-[10px] border border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] text-[oklch(0.96_0_0)] text-xs font-medium tracking-[0.01em] cursor-pointer transition-all duration-[160ms] hover:bg-[oklch(0.24_0.02_260/0.95)] hover:border-[oklch(1_0_0/0.18)] focus-visible:outline-2 focus-visible:outline-[oklch(0.72_0.15_265)] focus-visible:outline-offset-2"
+          style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+          aria-expanded={isOpen}
+        >
+          <span>{displayLabel}</span>
+          <ChevronDownIcon />
+        </button>
+
+        {isOpen && (
+          <FontMenu value={value} onSelect={handleSelect} />
+        )}
+      </div>
+    </div>
+  );
+}
+`}function N(){return `"use client";
+
+type ModeToggleProps = {
+  value: boolean | null;
+  onChange: (darkMode: boolean) => void;
+};
+
+function SunIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+  );
+}
+
+const baseButtonClass =
+  "inline-flex items-center justify-center gap-1.5 w-full min-h-[30px] px-2.5 py-1.5 rounded-[10px] border text-xs font-medium tracking-[0.01em] cursor-pointer transition-all duration-[160ms]";
+
+const defaultButtonClass =
+  "border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] text-[oklch(0.96_0_0)] hover:bg-[oklch(0.24_0.02_260/0.95)] hover:border-[oklch(1_0_0/0.18)]";
+
+const selectedButtonClass =
+  "bg-[oklch(0.24_0.02_260/0.95)] border-[oklch(0.72_0.15_265)] shadow-[0_0_0_1px_oklch(0.72_0.15_265),0_10px_24px_oklch(0_0_0/0.35)]";
+
+export function ModeToggle({ value, onChange }: ModeToggleProps) {
+  const isDark = value ?? false;
+
+  return (
+    <div
+      className="relative grid gap-2.5 p-3 rounded-xl border border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)]"
+      style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+    >
+      <label className="block text-[10.5px] font-semibold tracking-[0.16em] uppercase text-[oklch(0.72_0_0)]">
+        Mode
+      </label>
+      <div className="grid grid-cols-2 gap-2">
+        <button
+          onClick={() => onChange(false)}
+          className={\`\${baseButtonClass} \${!isDark ? selectedButtonClass : defaultButtonClass}\`}
+          style={!isDark ? undefined : { boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+          aria-label="Light mode"
+        >
+          <SunIcon />
+          <span>Light</span>
+        </button>
+        <button
+          onClick={() => onChange(true)}
+          className={\`\${baseButtonClass} \${isDark ? selectedButtonClass : defaultButtonClass}\`}
+          style={isDark ? undefined : { boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+          aria-label="Dark mode"
+        >
+          <MoonIcon />
+          <span>Dark</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+`}function E(){return `"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+import { useThemeState } from "./use-theme-state";
+import { applyTheme } from "./theme-applier";
+import { ColorPicker } from "./color-picker";
+import { CssExportButton } from "./css-export-button";
+import { FontSelector } from "./font-selector";
+import { ModeToggle } from "./mode-toggle";
+import { PresetSelector } from "./preset-selector";
+import { RadiusSelector } from "./radius-selector";
+
+type PanelProps = {
+  onClose: () => void;
+};
+
+type PanelState = ReturnType<typeof useThemeState>;
+
+type PanelSectionProps = {
+  delay: number;
+  children: ReactNode;
+};
+
+type PanelContentProps = Pick<
+  PanelState,
+  | "config"
+  | "setColorPreset"
+  | "setRadius"
+  | "setDarkMode"
+  | "setFont"
+  | "setPresetTheme"
+>;
+
+type PanelHeaderProps = {
+  onClose: () => void;
+};
+
+type PanelFooterProps = {
+  config: PanelState["config"];
+  onReset: () => void;
+};
+
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+function RotateCcwIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+    </svg>
+  );
+}
+
+const keyframesStyle = \`
+@keyframes previewcn-slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+@keyframes previewcn-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes previewcn-pop {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+\`;
+
+const panelClassName =
+  "fixed top-0 right-0 z-[99998] flex flex-col w-80 h-dvh overflow-hidden text-[oklch(0.96_0_0)] text-[12.5px] leading-[1.55] tracking-[0.01em] border-l border-[oklch(1_0_0/0.08)]";
+
+const panelStyle = {
+  fontFamily:
+    'var(--font-sans, "Inter", "Geist", "SF Pro Text", "Segoe UI", sans-serif)',
+  background: \`
+    radial-gradient(120% 140% at 0% 0%, oklch(0.25 0.05 265 / 0.25), transparent 45%),
+    linear-gradient(180deg, oklch(0.18 0.02 260), oklch(0.14 0.02 260))
+  \`,
+  boxShadow:
+    "0 24px 60px oklch(0 0 0 / 0.6), 0 1px 0 oklch(1 0 0 / 0.04) inset",
+  animation: "previewcn-slide-in-right 0.3s ease-out",
+};
+
+const headerClassName =
+  "flex items-center justify-between px-4 py-3 border-b border-[oklch(1_0_0/0.08)]";
+
+const headerStyle = {
+  background: "linear-gradient(180deg, oklch(0.18 0.02 260), transparent)",
+};
+
+const contentClassName = "flex-1 overflow-y-auto p-4 grid gap-4";
+
+const contentStyle = {
+  scrollbarWidth: "thin",
+  scrollbarColor: "oklch(1 0 0 / 0.2) transparent",
+};
+
+const footerClassName =
+  "flex items-center justify-end px-4 py-3 border-t border-[oklch(1_0_0/0.08)]";
+
+const footerStyle = {
+  background: "linear-gradient(0deg, oklch(0.18 0.02 260), transparent)",
+};
+
+function usePanelKeyframes() {
+  useEffect(() => {
+    const styleId = "previewcn-keyframes";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = keyframesStyle;
+      document.head.appendChild(style);
+    }
+  }, []);
+}
+
+function PanelSection({ delay, children }: PanelSectionProps) {
+  return (
+    <div
+      style={{
+        animation: "previewcn-rise 0.32s ease both",
+        animationDelay: \`\${delay}s\`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function PanelHeader({ onClose }: PanelHeaderProps) {
+  return (
+    <div className={headerClassName} style={headerStyle}>
+      <div className="flex items-center gap-2">
+        <span className="text-[13px] font-semibold tracking-[0.02em]">
+          previewcn
+        </span>
+      </div>
+      <button
+        onClick={onClose}
+        className="inline-flex items-center justify-center size-7 rounded-[10px] border border-transparent bg-transparent text-[oklch(0.72_0_0)] cursor-pointer transition-all duration-[160ms] hover:bg-[oklch(0.2_0.02_260/0.9)] hover:border-[oklch(1_0_0/0.08)] hover:text-[oklch(0.96_0_0)] focus-visible:outline-2 focus-visible:outline-[oklch(0.72_0.15_265)] focus-visible:outline-offset-2"
+        aria-label="Close"
+      >
+        <CloseIcon />
+      </button>
+    </div>
+  );
+}
+
+function PanelContent({
+  config,
+  setColorPreset,
+  setRadius,
+  setDarkMode,
+  setFont,
+  setPresetTheme,
+}: PanelContentProps) {
+  const sections = [
+    {
+      key: "preset",
+      delay: 0.02,
+      content: <PresetSelector value={config.preset} onChange={setPresetTheme} />,
+    },
+    {
+      key: "color",
+      delay: 0.05,
+      content: <ColorPicker value={config.colorPreset} onChange={setColorPreset} />,
+    },
+    {
+      key: "radius",
+      delay: 0.08,
+      content: <RadiusSelector value={config.radius} onChange={setRadius} />,
+    },
+    {
+      key: "font",
+      delay: 0.11,
+      content: <FontSelector value={config.font} onChange={setFont} />,
+    },
+    {
+      key: "mode",
+      delay: 0.14,
+      content: <ModeToggle value={config.darkMode} onChange={setDarkMode} />,
+    },
+  ];
+
+  return (
+    <div className={contentClassName} style={contentStyle}>
+      {sections.map((section) => (
+        <PanelSection key={section.key} delay={section.delay}>
+          {section.content}
+        </PanelSection>
+      ))}
+    </div>
+  );
+}
+
+function PanelFooter({ config, onReset }: PanelFooterProps) {
+  return (
+    <div className={footerClassName} style={footerStyle}>
+      <CssExportButton config={config} />
+      <button
+        onClick={onReset}
+        className="inline-flex items-center justify-center gap-1.5 min-h-[30px] px-2.5 py-1.5 rounded-[10px] border border-transparent bg-transparent text-[oklch(0.72_0_0)] text-xs font-medium tracking-[0.01em] cursor-pointer transition-all duration-[160ms] hover:bg-[oklch(0.2_0.02_260/0.9)] hover:border-[oklch(1_0_0/0.08)] hover:text-[oklch(0.96_0_0)]"
+      >
+        <RotateCcwIcon />
+        <span>Reset</span>
+      </button>
+    </div>
+  );
+}
+
+export default function Panel({ onClose }: PanelProps) {
+  const {
+    config,
+    setColorPreset,
+    setRadius,
+    setDarkMode,
+    setFont,
+    setPresetTheme,
+    resetTheme,
+  } = useThemeState();
+
+  const didApplyOnOpenRef = useRef(false);
+  useEffect(() => {
+    if (didApplyOnOpenRef.current) return;
+    didApplyOnOpenRef.current = true;
+    applyTheme(config);
+  }, [config]);
+
+  usePanelKeyframes();
+
+  return (
+    <div className={panelClassName} style={panelStyle}>
+      <PanelHeader onClose={onClose} />
+      <PanelContent
+        config={config}
+        setColorPreset={setColorPreset}
+        setRadius={setRadius}
+        setDarkMode={setDarkMode}
+        setFont={setFont}
+        setPresetTheme={setPresetTheme}
+      />
+      <PanelFooter config={config} onReset={resetTheme} />
+    </div>
+  );
+}
+`}function I(){return `"use client";
+
+import { themePresets } from "./presets/theme-presets";
+
+type PresetSelectorProps = {
+  value: string | null;
+  onChange: (preset: string) => void;
+};
+
+const baseCardClass =
+  "flex flex-col items-center gap-1.5 w-full min-h-[56px] p-2 rounded-[10px] border text-[11px] font-medium cursor-pointer transition-all duration-[160ms] focus-visible:outline-2 focus-visible:outline-[oklch(0.72_0.15_265)] focus-visible:outline-offset-2";
+
+const defaultCardClass =
+  "border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] text-[oklch(0.96_0_0)] hover:bg-[oklch(0.24_0.02_260/0.95)] hover:border-[oklch(1_0_0/0.18)]";
+
+const selectedCardClass =
+  "bg-[oklch(0.24_0.02_260/0.95)] border-[oklch(0.72_0.15_265)] shadow-[0_0_0_1px_oklch(0.72_0.15_265),0_10px_24px_oklch(0_0_0/0.35)]";
+
+export function PresetSelector({ value, onChange }: PresetSelectorProps) {
+  return (
+    <div
+      className="relative grid gap-2.5 p-3 rounded-xl border border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)]"
+      style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+    >
+      <span className="block text-[10.5px] font-semibold tracking-[0.16em] uppercase text-[oklch(0.72_0_0)]">
+        Presets
+      </span>
+      <div className="grid grid-cols-3 gap-2">
+        {themePresets.map((preset) => {
+          const isSelected = value === preset.name;
+          // Use light mode primary color for preview
+          const primaryColor = preset.colors.light.primary;
+          const bgColor = preset.colors.light.background;
+
+          return (
+            <button
+              key={preset.name}
+              onClick={() => onChange(preset.name)}
+              className={\`\${baseCardClass} \${isSelected ? selectedCardClass : defaultCardClass}\`}
+              style={isSelected ? undefined : { boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+              aria-label={preset.label}
+              aria-pressed={isSelected}
+            >
+              <div className="flex w-full h-[18px] rounded overflow-hidden border border-[oklch(1_0_0/0.08)]">
+                <div
+                  className="flex-1 border-r border-[oklch(0_0_0/0.1)]"
+                  style={{ backgroundColor: bgColor }}
+                />
+                <div className="flex-1" style={{ backgroundColor: primaryColor }} />
+              </div>
+              <span className="text-[oklch(0.72_0_0)]">{preset.label}</span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+`}function D(){return `// Color preset data used by the devtools color picker.
+// Kept in a separate file to keep logic files small.
+
+export type PresetSpec = {
+  name: string;
+  label: string;
+  primary: {
+    light: string;
+    dark: string;
+  };
+  primaryForeground?: {
+    light?: string;
+    dark?: string;
+  };
+  destructive?: {
+    light?: string;
+    dark?: string;
+  };
+};
+
+export const colorPresetSpecs: PresetSpec[] = [
+  {
+    name: "neutral",
+    label: "Neutral",
+    primary: { light: "oklch(0.556 0 0)", dark: "oklch(0.708 0 0)" },
+    primaryForeground: {
+      light: "oklch(0.985 0 0)",
+      dark: "oklch(0.205 0 0)",
+    },
+  },
+  {
+    name: "red",
+    label: "Red",
+    primary: {
+      light: "oklch(0.577 0.245 27.325)",
+      dark: "oklch(0.637 0.237 25.331)",
+    },
+    primaryForeground: {
+      light: "oklch(0.971 0.013 17.38)",
+      dark: "oklch(0.971 0.013 17.38)",
+    },
+    destructive: { light: "oklch(0.505 0.213 27.518)" },
+  },
+  {
+    name: "orange",
+    label: "Orange",
+    primary: {
+      light: "oklch(0.646 0.222 41.116)",
+      dark: "oklch(0.705 0.213 47.604)",
+    },
+    primaryForeground: {
+      light: "oklch(0.98 0.016 73.684)",
+      dark: "oklch(0.98 0.016 73.684)",
+    },
+  },
+  {
+    name: "amber",
+    label: "Amber",
+    primary: { light: "oklch(0.67 0.16 58)", dark: "oklch(0.77 0.16 70)" },
+    primaryForeground: {
+      light: "oklch(0.99 0.02 95)",
+      dark: "oklch(0.28 0.07 46)",
+    },
+  },
+  {
+    name: "yellow",
+    label: "Yellow",
+    primary: {
+      light: "oklch(0.852 0.199 91.936)",
+      dark: "oklch(0.795 0.184 86.047)",
+    },
+    primaryForeground: {
+      light: "oklch(0.421 0.095 57.708)",
+      dark: "oklch(0.421 0.095 57.708)",
+    },
+  },
+  {
+    name: "lime",
+    label: "Lime",
+    primary: {
+      light: "oklch(0.65 0.18 132)",
+      dark: "oklch(0.77 0.20 131)",
+    },
+    primaryForeground: {
+      light: "oklch(0.99 0.03 121)",
+      dark: "oklch(0.27 0.07 132)",
+    },
+  },
+  {
+    name: "green",
+    label: "Green",
+    primary: {
+      light: "oklch(0.648 0.2 131.684)",
+      dark: "oklch(0.648 0.2 131.684)",
+    },
+    primaryForeground: {
+      light: "oklch(0.986 0.031 120.757)",
+      dark: "oklch(0.986 0.031 120.757)",
+    },
+  },
+  {
+    name: "emerald",
+    label: "Emerald",
+    primary: {
+      light: "oklch(0.60 0.13 163)",
+      dark: "oklch(0.70 0.15 162)",
+    },
+    primaryForeground: {
+      light: "oklch(0.98 0.02 166)",
+      dark: "oklch(0.26 0.05 173)",
+    },
+  },
+  {
+    name: "teal",
+    label: "Teal",
+    primary: { light: "oklch(0.60 0.10 185)", dark: "oklch(0.70 0.12 183)" },
+    primaryForeground: {
+      light: "oklch(0.98 0.01 181)",
+      dark: "oklch(0.28 0.04 193)",
+    },
+  },
+  {
+    name: "cyan",
+    label: "Cyan",
+    primary: { light: "oklch(0.61 0.11 222)", dark: "oklch(0.71 0.13 215)" },
+    primaryForeground: {
+      light: "oklch(0.98 0.02 201)",
+      dark: "oklch(0.30 0.05 230)",
+    },
+  },
+  {
+    name: "sky",
+    label: "Sky",
+    primary: { light: "oklch(0.59 0.14 242)", dark: "oklch(0.68 0.15 237)" },
+    primaryForeground: {
+      light: "oklch(0.98 0.01 237)",
+      dark: "oklch(0.29 0.06 243)",
+    },
+  },
+  {
+    name: "blue",
+    label: "Blue",
+    primary: {
+      light: "oklch(0.488 0.243 264.376)",
+      dark: "oklch(0.42 0.18 266)",
+    },
+    primaryForeground: {
+      light: "oklch(0.97 0.014 254.604)",
+      dark: "oklch(0.97 0.014 254.604)",
+    },
+  },
+  {
+    name: "indigo",
+    label: "Indigo",
+    primary: { light: "oklch(0.51 0.23 277)", dark: "oklch(0.59 0.20 277)" },
+    primaryForeground: {
+      light: "oklch(0.96 0.02 272)",
+      dark: "oklch(0.96 0.02 272)",
+    },
+  },
+  {
+    name: "violet",
+    label: "Violet",
+    primary: {
+      light: "oklch(0.541 0.281 293.009)",
+      dark: "oklch(0.606 0.25 292.717)",
+    },
+    primaryForeground: {
+      light: "oklch(0.969 0.016 293.756)",
+      dark: "oklch(0.969 0.016 293.756)",
+    },
+  },
+  {
+    name: "purple",
+    label: "Purple",
+    primary: { light: "oklch(0.56 0.25 302)", dark: "oklch(0.63 0.23 304)" },
+    primaryForeground: {
+      light: "oklch(0.98 0.01 308)",
+      dark: "oklch(0.98 0.01 308)",
+    },
+  },
+  {
+    name: "fuchsia",
+    label: "Fuchsia",
+    primary: { light: "oklch(0.59 0.26 323)", dark: "oklch(0.67 0.26 322)" },
+    primaryForeground: {
+      light: "oklch(0.98 0.02 320)",
+      dark: "oklch(0.98 0.02 320)",
+    },
+  },
+  {
+    name: "pink",
+    label: "Pink",
+    primary: { light: "oklch(0.59 0.22 1)", dark: "oklch(0.66 0.21 354)" },
+    primaryForeground: {
+      light: "oklch(0.97 0.01 343)",
+      dark: "oklch(0.97 0.01 343)",
+    },
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    primary: {
+      light: "oklch(0.586 0.253 17.585)",
+      dark: "oklch(0.645 0.246 16.439)",
+    },
+    primaryForeground: {
+      light: "oklch(0.969 0.015 12.422)",
+      dark: "oklch(0.969 0.015 12.422)",
+    },
+  },
+];
+`}function j(){return `// Color presets compatible with shadcn/ui
+// Uses OKLCH color space for better perceptual uniformity
+
+import { colorPresetSpecs, type PresetSpec } from "./color-preset-specs";
+
+export type ColorPreset = {
+  name: string;
+  label: string;
+  colors: {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+  };
+};
+
+// Base neutral colors that all themes share
+const neutralColors = {
+  light: {
+    background: "oklch(1 0 0)",
+    foreground: "oklch(0.145 0 0)",
+    card: "oklch(1 0 0)",
+    "card-foreground": "oklch(0.145 0 0)",
+    popover: "oklch(1 0 0)",
+    "popover-foreground": "oklch(0.145 0 0)",
+    secondary: "oklch(0.97 0 0)",
+    "secondary-foreground": "oklch(0.205 0 0)",
+    muted: "oklch(0.97 0 0)",
+    "muted-foreground": "oklch(0.556 0 0)",
+    accent: "oklch(0.97 0 0)",
+    "accent-foreground": "oklch(0.205 0 0)",
+    border: "oklch(0.922 0 0)",
+    input: "oklch(0.922 0 0)",
+    ring: "oklch(0.708 0 0)",
+  },
+  dark: {
+    background: "oklch(0.145 0 0)",
+    foreground: "oklch(0.985 0 0)",
+    card: "oklch(0.205 0 0)",
+    "card-foreground": "oklch(0.985 0 0)",
+    popover: "oklch(0.205 0 0)",
+    "popover-foreground": "oklch(0.985 0 0)",
+    secondary: "oklch(0.269 0 0)",
+    "secondary-foreground": "oklch(0.985 0 0)",
+    muted: "oklch(0.269 0 0)",
+    "muted-foreground": "oklch(0.708 0 0)",
+    accent: "oklch(0.269 0 0)",
+    "accent-foreground": "oklch(0.985 0 0)",
+    border: "oklch(1 0 0 / 10%)",
+    input: "oklch(1 0 0 / 15%)",
+    ring: "oklch(0.556 0 0)",
+  },
+};
+
+const defaultDestructive = {
+  light: "oklch(0.577 0.245 27.325)",
+  dark: "oklch(0.704 0.191 22.216)",
+};
+
+const defaultPrimaryForeground = {
+  light: "oklch(0.985 0 0)",
+  dark: "oklch(0.985 0 0)",
+};
+
+function createColorPreset(spec: PresetSpec): ColorPreset {
+  return {
+    name: spec.name,
+    label: spec.label,
+    colors: {
+      light: {
+        ...neutralColors.light,
+        primary: spec.primary.light,
+        "primary-foreground":
+          spec.primaryForeground?.light ?? defaultPrimaryForeground.light,
+        destructive: spec.destructive?.light ?? defaultDestructive.light,
+      },
+      dark: {
+        ...neutralColors.dark,
+        primary: spec.primary.dark,
+        "primary-foreground":
+          spec.primaryForeground?.dark ?? defaultPrimaryForeground.dark,
+        destructive: spec.destructive?.dark ?? defaultDestructive.dark,
+      },
+    },
+  };
+}
+
+export const colorPresets: ColorPreset[] =
+  colorPresetSpecs.map(createColorPreset);
+
+export function getColorPreset(name: string): ColorPreset | undefined {
+  return colorPresets.find((p) => p.name === name);
+}
+`}function M(){return `// Font presets using Google Fonts
+
+export type FontPreset = {
+  label: string;
+  value: string;
+  fontFamily: string;
+  googleFontsUrl: string;
+};
+
+export const fontPresets: FontPreset[] = [
+  {
+    label: "Inter",
+    value: "inter",
+    fontFamily: '"Inter", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "Noto Sans",
+    value: "noto-sans",
+    fontFamily: '"Noto Sans", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "Nunito Sans",
+    value: "nunito-sans",
+    fontFamily: '"Nunito Sans", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "Figtree",
+    value: "figtree",
+    fontFamily: '"Figtree", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "Roboto",
+    value: "roboto",
+    fontFamily: '"Roboto", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap",
+  },
+  {
+    label: "Raleway",
+    value: "raleway",
+    fontFamily: '"Raleway", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "DM Sans",
+    value: "dm-sans",
+    fontFamily: '"DM Sans", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "Public Sans",
+    value: "public-sans",
+    fontFamily: '"Public Sans", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "Outfit",
+    value: "outfit",
+    fontFamily: '"Outfit", sans-serif',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap",
+  },
+  {
+    label: "JetBrains Mono",
+    value: "jetbrains-mono",
+    fontFamily: '"JetBrains Mono", monospace',
+    googleFontsUrl:
+      "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
+  },
+];
+
+export function getFontPreset(value: string): FontPreset | undefined {
+  return fontPresets.find((f) => f.value === value);
+}
+`}function O(){return `export * from "./colors";
+export * from "./color-preset-specs";
+export * from "./fonts";
+export * from "./radius";
+export * from "./theme-presets";
+`}function L(){return `// Radius presets for border-radius customization
+
+export type RadiusPreset = {
+  name: string;
+  label: string;
+  value: string;
+};
+
+export const radiusPresets: RadiusPreset[] = [
+  { name: "none", label: "None", value: "0rem" },
+  { name: "sm", label: "SM", value: "0.3rem" },
+  { name: "md", label: "MD", value: "0.5rem" },
+  { name: "lg", label: "LG", value: "0.625rem" },
+  { name: "xl", label: "XL", value: "0.75rem" },
+  { name: "full", label: "Full", value: "1rem" },
+];
+
+export function getRadiusPreset(name: string): RadiusPreset | undefined {
+  return radiusPresets.find((p) => p.name === name);
+}
+`}function A(){return `// Theme presets adapted from tweakcn (Apache License 2.0)
+// https://github.com/jnsahaj/tweakcn
+// Original presets by Sahaj Jain
+
+export type ThemePresetFont = {
+  value: string;
+  fontFamily: string;
+  googleFontsUrl: string;
+};
+
+export type ThemePreset = {
+  name: string;
+  label: string;
+  colors: {
+    light: Record<string, string>;
+    dark: Record<string, string>;
+  };
+  radius: string;
+  font?: ThemePresetFont;
+};
+
+export const themePresets: ThemePreset[] = [
+  {
+    name: "vercel",
+    label: "Vercel",
+    colors: {
+      light: {
+        background: "oklch(0.99 0 0)",
+        foreground: "oklch(0 0 0)",
+        card: "oklch(1.00 0 0)",
+        "card-foreground": "oklch(0 0 0)",
+        popover: "oklch(0.99 0 0)",
+        "popover-foreground": "oklch(0 0 0)",
+        primary: "oklch(0 0 0)",
+        "primary-foreground": "oklch(1.00 0 0)",
+        secondary: "oklch(0.94 0 0)",
+        "secondary-foreground": "oklch(0 0 0)",
+        muted: "oklch(0.97 0 0)",
+        "muted-foreground": "oklch(0.44 0 0)",
+        accent: "oklch(0.94 0 0)",
+        "accent-foreground": "oklch(0 0 0)",
+        destructive: "oklch(0.63 0.19 23.03)",
+        "destructive-foreground": "oklch(1.00 0 0)",
+        border: "oklch(0.92 0 0)",
+        input: "oklch(0.94 0 0)",
+        ring: "oklch(0 0 0)",
+        "chart-1": "oklch(0.81 0.17 75.35)",
+        "chart-2": "oklch(0.55 0.22 264.53)",
+        "chart-3": "oklch(0.72 0 0)",
+        "chart-4": "oklch(0.92 0 0)",
+        "chart-5": "oklch(0.56 0 0)",
+        sidebar: "oklch(0.99 0 0)",
+        "sidebar-foreground": "oklch(0 0 0)",
+        "sidebar-primary": "oklch(0 0 0)",
+        "sidebar-primary-foreground": "oklch(1.00 0 0)",
+        "sidebar-accent": "oklch(0.94 0 0)",
+        "sidebar-accent-foreground": "oklch(0 0 0)",
+        "sidebar-border": "oklch(0.94 0 0)",
+        "sidebar-ring": "oklch(0 0 0)",
+      },
+      dark: {
+        background: "oklch(0 0 0)",
+        foreground: "oklch(1.00 0 0)",
+        card: "oklch(0.14 0 0)",
+        "card-foreground": "oklch(1.00 0 0)",
+        popover: "oklch(0.18 0 0)",
+        "popover-foreground": "oklch(1.00 0 0)",
+        primary: "oklch(1.00 0 0)",
+        "primary-foreground": "oklch(0 0 0)",
+        secondary: "oklch(0.25 0 0)",
+        "secondary-foreground": "oklch(1.00 0 0)",
+        muted: "oklch(0.23 0 0)",
+        "muted-foreground": "oklch(0.72 0 0)",
+        accent: "oklch(0.32 0 0)",
+        "accent-foreground": "oklch(1.00 0 0)",
+        destructive: "oklch(0.69 0.20 23.91)",
+        "destructive-foreground": "oklch(0 0 0)",
+        border: "oklch(0.26 0 0)",
+        input: "oklch(0.32 0 0)",
+        ring: "oklch(0.72 0 0)",
+        "chart-1": "oklch(0.81 0.17 75.35)",
+        "chart-2": "oklch(0.58 0.21 260.84)",
+        "chart-3": "oklch(0.56 0 0)",
+        "chart-4": "oklch(0.44 0 0)",
+        "chart-5": "oklch(0.92 0 0)",
+        sidebar: "oklch(0.18 0 0)",
+        "sidebar-foreground": "oklch(1.00 0 0)",
+        "sidebar-primary": "oklch(1.00 0 0)",
+        "sidebar-primary-foreground": "oklch(0 0 0)",
+        "sidebar-accent": "oklch(0.32 0 0)",
+        "sidebar-accent-foreground": "oklch(1.00 0 0)",
+        "sidebar-border": "oklch(0.32 0 0)",
+        "sidebar-ring": "oklch(0.72 0 0)",
+      },
+    },
+    radius: "0.5rem",
+    font: {
+      value: "inter",
+      fontFamily: '"Inter", sans-serif',
+      googleFontsUrl:
+        "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    },
+  },
+  {
+    name: "supabase",
+    label: "Supabase",
+    colors: {
+      light: {
+        background: "#fcfcfc",
+        foreground: "#171717",
+        card: "#fcfcfc",
+        "card-foreground": "#171717",
+        popover: "#fcfcfc",
+        "popover-foreground": "#525252",
+        primary: "#72e3ad",
+        "primary-foreground": "#1e2723",
+        secondary: "#fdfdfd",
+        "secondary-foreground": "#171717",
+        muted: "#ededed",
+        "muted-foreground": "#202020",
+        accent: "#ededed",
+        "accent-foreground": "#202020",
+        destructive: "#ca3214",
+        "destructive-foreground": "#fffcfc",
+        border: "#dfdfdf",
+        input: "#f6f6f6",
+        ring: "#72e3ad",
+        "chart-1": "#72e3ad",
+        "chart-2": "#3b82f6",
+        "chart-3": "#8b5cf6",
+        "chart-4": "#f59e0b",
+        "chart-5": "#10b981",
+        sidebar: "#fcfcfc",
+        "sidebar-foreground": "#707070",
+        "sidebar-primary": "#72e3ad",
+        "sidebar-primary-foreground": "#1e2723",
+        "sidebar-accent": "#ededed",
+        "sidebar-accent-foreground": "#202020",
+        "sidebar-border": "#dfdfdf",
+        "sidebar-ring": "#72e3ad",
+      },
+      dark: {
+        background: "#121212",
+        foreground: "#e2e8f0",
+        card: "#171717",
+        "card-foreground": "#e2e8f0",
+        popover: "#242424",
+        "popover-foreground": "#a9a9a9",
+        primary: "#006239",
+        "primary-foreground": "#dde8e3",
+        secondary: "#242424",
+        "secondary-foreground": "#fafafa",
+        muted: "#1f1f1f",
+        "muted-foreground": "#a2a2a2",
+        accent: "#313131",
+        "accent-foreground": "#fafafa",
+        destructive: "#541c15",
+        "destructive-foreground": "#ede9e8",
+        border: "#292929",
+        input: "#242424",
+        ring: "#4ade80",
+        "chart-1": "#4ade80",
+        "chart-2": "#60a5fa",
+        "chart-3": "#a78bfa",
+        "chart-4": "#fbbf24",
+        "chart-5": "#2dd4bf",
+        sidebar: "#121212",
+        "sidebar-foreground": "#898989",
+        "sidebar-primary": "#006239",
+        "sidebar-primary-foreground": "#dde8e3",
+        "sidebar-accent": "#313131",
+        "sidebar-accent-foreground": "#fafafa",
+        "sidebar-border": "#292929",
+        "sidebar-ring": "#4ade80",
+      },
+    },
+    radius: "0.5rem",
+    font: {
+      value: "outfit",
+      fontFamily: '"Outfit", sans-serif',
+      googleFontsUrl:
+        "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap",
+    },
+  },
+  {
+    name: "claude",
+    label: "Claude",
+    colors: {
+      light: {
+        background: "#faf9f5",
+        foreground: "#3d3929",
+        card: "#faf9f5",
+        "card-foreground": "#141413",
+        popover: "#ffffff",
+        "popover-foreground": "#28261b",
+        primary: "#c96442",
+        "primary-foreground": "#ffffff",
+        secondary: "#e9e6dc",
+        "secondary-foreground": "#535146",
+        muted: "#ede9de",
+        "muted-foreground": "#83827d",
+        accent: "#e9e6dc",
+        "accent-foreground": "#28261b",
+        destructive: "#141413",
+        "destructive-foreground": "#ffffff",
+        border: "#dad9d4",
+        input: "#b4b2a7",
+        ring: "#c96442",
+        "chart-1": "#b05730",
+        "chart-2": "#9c87f5",
+        "chart-3": "#ded8c4",
+        "chart-4": "#dbd3f0",
+        "chart-5": "#b4552d",
+        sidebar: "#f5f4ee",
+        "sidebar-foreground": "#3d3d3a",
+        "sidebar-primary": "#c96442",
+        "sidebar-primary-foreground": "#fbfbfb",
+        "sidebar-accent": "#e9e6dc",
+        "sidebar-accent-foreground": "#343434",
+        "sidebar-border": "#ebebeb",
+        "sidebar-ring": "#b5b5b5",
+      },
+      dark: {
+        background: "#262624",
+        foreground: "#c3c0b6",
+        card: "#262624",
+        "card-foreground": "#faf9f5",
+        popover: "#30302e",
+        "popover-foreground": "#e5e5e2",
+        primary: "#d97757",
+        "primary-foreground": "#ffffff",
+        secondary: "#faf9f5",
+        "secondary-foreground": "#30302e",
+        muted: "#1b1b19",
+        "muted-foreground": "#b7b5a9",
+        accent: "#1a1915",
+        "accent-foreground": "#f5f4ee",
+        destructive: "#ef4444",
+        "destructive-foreground": "#ffffff",
+        border: "#3e3e38",
+        input: "#52514a",
+        ring: "#d97757",
+        "chart-1": "#b05730",
+        "chart-2": "#9c87f5",
+        "chart-3": "#1a1915",
+        "chart-4": "#2f2b48",
+        "chart-5": "#b4552d",
+        sidebar: "#1f1e1d",
+        "sidebar-foreground": "#c3c0b6",
+        "sidebar-primary": "#343434",
+        "sidebar-primary-foreground": "#fbfbfb",
+        "sidebar-accent": "#0f0f0e",
+        "sidebar-accent-foreground": "#c3c0b6",
+        "sidebar-border": "#ebebeb",
+        "sidebar-ring": "#b5b5b5",
+      },
+    },
+    radius: "0.5rem",
+  },
+];
+
+const themePresetByName = new Map(
+  themePresets.map((preset) => [preset.name, preset])
+);
+
+export function getThemePreset(name: string): ThemePreset | undefined {
+  return themePresetByName.get(name);
+}
+`}function $(){return `"use client";
+
+import { radiusPresets } from "./presets/radius";
+
+type RadiusSelectorProps = {
+  value: string | null;
+  onChange: (radius: string) => void;
+};
+
+const baseButtonClass =
+  "inline-flex flex-col items-center justify-center gap-1.5 w-full min-h-[52px] px-2.5 py-1.5 rounded-[10px] border text-xs font-medium tracking-[0.01em] cursor-pointer transition-all duration-[160ms]";
+
+const defaultButtonClass =
+  "border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)] text-[oklch(0.96_0_0)] hover:bg-[oklch(0.24_0.02_260/0.95)] hover:border-[oklch(1_0_0/0.18)]";
+
+const selectedButtonClass =
+  "bg-[oklch(0.24_0.02_260/0.95)] border-[oklch(0.72_0.15_265)] shadow-[0_0_0_1px_oklch(0.72_0.15_265),0_10px_24px_oklch(0_0_0/0.35)]";
+
+export function RadiusSelector({ value, onChange }: RadiusSelectorProps) {
+  return (
+    <div
+      className="relative grid gap-2.5 p-3 rounded-xl border border-[oklch(1_0_0/0.08)] bg-[oklch(0.2_0.02_260/0.9)]"
+      style={{ boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+    >
+      <label className="block text-[10.5px] font-semibold tracking-[0.16em] uppercase text-[oklch(0.72_0_0)]">
+        Radius
+      </label>
+      <div className="grid grid-cols-3 gap-2">
+        {radiusPresets.map((preset) => {
+          const isSelected = value === preset.value;
+
+          return (
+            <button
+              key={preset.name}
+              onClick={() => onChange(preset.value)}
+              className={\`\${baseButtonClass} \${isSelected ? selectedButtonClass : defaultButtonClass}\`}
+              style={isSelected ? undefined : { boxShadow: "inset 0 1px 0 oklch(1 0 0 / 0.04)" }}
+              title={preset.label}
+            >
+              <span
+                className="w-7 h-[18px] border border-[oklch(1_0_0/0.12)]"
+                style={{
+                  borderRadius: preset.value,
+                  background:
+                    "linear-gradient(180deg, oklch(0.8 0 0 / 0.45), oklch(0.6 0 0 / 0.2))",
+                }}
+              />
+              <span className="text-[11px] text-[oklch(0.72_0_0)]">
+                {preset.label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+`}function B(){return `// Direct DOM theme application (no postMessage needed)
+
+import { getColorPreset } from "./presets/colors";
+import { getFontPreset } from "./presets/fonts";
+import {
+  getThemePreset,
+  type ThemePreset,
+  type ThemePresetFont,
+} from "./presets/theme-presets";
+
+const THEME_COLOR_STYLE_ID = "previewcn-devtools-theme-colors";
+const THEME_FONT_STYLE_ID = "previewcn-devtools-theme-font";
+
+export type ThemeConfig = {
+  colorPreset: string | null;
+  radius: string | null;
+  darkMode: boolean | null;
+  font: string | null;
+  preset: string | null;
+};
+
+type ThemeColors = {
+  light: Record<string, string>;
+  dark: Record<string, string>;
+};
+
+function getOrCreateStyleElement(id: string): HTMLStyleElement {
+  const existing = document.getElementById(id);
+  if (existing instanceof HTMLStyleElement) {
+    return existing;
+  }
+
+  if (existing) {
+    existing.remove();
+  }
+
+  const styleEl = document.createElement("style");
+  styleEl.id = id;
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+
+function serializeCssVars(cssVars: Record<string, string>): string {
+  return Object.entries(cssVars)
+    .map(([key, value]) => \`--\${key}: \${value};\`)
+    .join(" ");
+}
+
+function applyThemeColors(colors: ThemeColors) {
+  const styleEl = getOrCreateStyleElement(THEME_COLOR_STYLE_ID);
+
+  const lightCss = serializeCssVars(colors.light);
+  const darkCss = serializeCssVars(colors.dark);
+
+  styleEl.textContent = \`:root { \${lightCss} } .dark { \${darkCss} }\`;
+}
+
+// Apply dark mode class to document
+export function applyDarkMode(darkMode: boolean) {
+  const root = document.documentElement;
+
+  if (darkMode) {
+    root.classList.remove("light");
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+    root.classList.add("light");
+  }
+
+  root.style.colorScheme = darkMode ? "dark" : "light";
+}
+
+// Apply radius to document
+export function applyRadius(radius: string) {
+  const root = document.documentElement;
+  root.style.setProperty("--radius", radius);
+}
+
+// Apply color preset to document
+export function applyColors(colorPresetName: string) {
+  const preset = getColorPreset(colorPresetName);
+  if (!preset) return;
+
+  applyThemeColors(preset.colors);
+}
+
+// Apply theme preset colors directly (bypasses colorPreset lookup)
+export function applyPresetColors(preset: ThemePreset) {
+  applyThemeColors(preset.colors);
+}
+
+function applyFontConfig(font: ThemePresetFont) {
+  const { fontFamily, googleFontsUrl, value: fontId } = font;
+
+  // Validate Google Fonts URL to prevent XSS attacks
+  if (!googleFontsUrl.startsWith("https://fonts.googleapis.com/")) {
+    console.warn("[PreviewCN] Invalid font URL");
+    return;
+  }
+
+  // Inject Google Fonts link if not already present
+  const linkId = \`previewcn-font-\${fontId}\`;
+  if (!document.getElementById(linkId)) {
+    const link = document.createElement("link");
+    link.id = linkId;
+    link.rel = "stylesheet";
+    link.href = googleFontsUrl;
+    document.head.appendChild(link);
+  }
+
+  // Use multiple strategies to ensure font override works universally
+  // This covers various Tailwind v4 and next/font configurations
+  const styleEl = getOrCreateStyleElement(THEME_FONT_STYLE_ID);
+  styleEl.textContent = \`
+    :root {
+      --font-sans: \${fontFamily} !important;
+      --font-sans-override: \${fontFamily} !important;
+      --font-geist-sans: \${fontFamily} !important;
+    }
+    html, body, .font-sans {
+      font-family: \${fontFamily} !important;
+    }
+  \`;
+}
+
+// Apply font to document
+export function applyFont(fontId: string) {
+  const fontPreset = getFontPreset(fontId);
+  if (!fontPreset) return;
+
+  applyFontConfig(fontPreset);
+}
+
+// Apply font from theme preset (using preset's font config directly)
+export function applyPresetFont(font: ThemePresetFont) {
+  applyFontConfig(font);
+}
+
+// Apply a complete theme preset (colors, radius, and optionally font)
+export function applyPreset(presetName: string) {
+  const preset = getThemePreset(presetName);
+  if (!preset) return;
+
+  applyPresetColors(preset);
+  applyRadius(preset.radius);
+
+  if (preset.font) {
+    applyFontConfig(preset.font);
+  }
+}
+
+// Apply full theme config
+export function applyTheme(config: ThemeConfig) {
+  const preset = config.preset ? getThemePreset(config.preset) : null;
+
+  if (config.colorPreset !== null) {
+    applyColors(config.colorPreset);
+  } else if (preset) {
+    applyPresetColors(preset);
+  }
+
+  const radius = config.radius ?? preset?.radius;
+  if (radius !== null && radius !== undefined) {
+    applyRadius(radius);
+  }
+
+  if (config.darkMode !== null) {
+    applyDarkMode(config.darkMode);
+  }
+
+  if (config.font !== null) {
+    applyFont(config.font);
+  } else if (preset?.font) {
+    applyFontConfig(preset.font);
+  }
+}
+
+export function clearTheme() {
+  const colorStyleEl = document.getElementById(THEME_COLOR_STYLE_ID);
+  if (colorStyleEl) colorStyleEl.remove();
+
+  const fontStyleEl = document.getElementById(THEME_FONT_STYLE_ID);
+  if (fontStyleEl) fontStyleEl.remove();
+
+  const root = document.documentElement;
+  root.style.removeProperty("--radius");
+  root.style.removeProperty("color-scheme");
+  root.classList.remove("light", "dark");
+}
+`}function U(){return `"use client";
+
+type TriggerProps = {
+  onClick: () => void;
+};
+
+// SVG icon for the trigger button (palette icon)
+function PaletteIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" />
+      <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
+      <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
+      <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" />
+      <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.555C21.965 6.012 17.461 2 12 2z" />
+    </svg>
+  );
+}
+
+export function Trigger({ onClick }: TriggerProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="fixed bottom-4 right-4 z-[99999] inline-flex items-center justify-center size-12 rounded-full border border-[oklch(1_0_0/0.18)] text-[oklch(0.96_0_0)] transition-all duration-[180ms] hover:border-[oklch(1_0_0/0.28)] focus-visible:outline-2 focus-visible:outline-[oklch(0.72_0.15_265)] focus-visible:outline-offset-[3px]"
+      style={{
+        background:
+          "linear-gradient(180deg, oklch(0.23 0.03 260) 0%, oklch(0.16 0.02 260) 100%)",
+        boxShadow:
+          "0 16px 32px oklch(0 0 0 / 0.45), 0 0 0 1px oklch(1 0 0 / 0.04) inset",
+      }}
+      aria-label="Open PreviewCN theme editor"
+      title="PreviewCN Theme Editor"
+    >
+      <PaletteIcon />
+    </button>
+  );
+}
+`}function V(){return `"use client";
+
+import { useCallback, useState } from "react";
+
+import { getThemePreset } from "./presets/theme-presets";
+import type { ThemeConfig } from "./theme-applier";
+import {
+  applyColors,
+  applyDarkMode,
+  applyFont,
+  applyPreset,
+  applyRadius,
+  clearTheme,
+} from "./theme-applier";
+
+// LocalStorage key for persisting theme state
+const STORAGE_KEY = "previewcn-devtools-theme";
+
+function loadFromStorage(): Partial<ThemeConfig> {
+  if (typeof window === "undefined") return {};
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch {
+    // Ignore parse errors
+  }
+  return {};
+}
+
+function saveToStorage(config: ThemeConfig) {
+  if (typeof window === "undefined") return;
+
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+const defaultConfig: ThemeConfig = {
+  colorPreset: null,
+  radius: null,
+  darkMode: null,
+  font: null,
+  preset: null,
+};
+
+export function useThemeState() {
+  const [config, setConfigState] = useState<ThemeConfig>(() => ({
+    ...defaultConfig,
+    ...loadFromStorage(),
+  }));
+
+  const updateConfig = useCallback(
+    (updater: (prev: ThemeConfig) => ThemeConfig) => {
+      setConfigState((prev) => {
+        const next = updater(prev);
+        saveToStorage(next);
+        return next;
+      });
+    },
+    []
+  );
+
+  const setColorPreset = useCallback(
+    (colorPreset: string) => {
+      updateConfig((prev) => ({ ...prev, colorPreset }));
+      applyColors(colorPreset);
+    },
+    [updateConfig]
+  );
+
+  const setRadius = useCallback(
+    (radius: string) => {
+      updateConfig((prev) => ({ ...prev, radius }));
+      applyRadius(radius);
+    },
+    [updateConfig]
+  );
+
+  const setDarkMode = useCallback(
+    (darkMode: boolean) => {
+      updateConfig((prev) => ({ ...prev, darkMode }));
+      applyDarkMode(darkMode);
+    },
+    [updateConfig]
+  );
+
+  const setFont = useCallback(
+    (font: string) => {
+      updateConfig((prev) => ({ ...prev, font }));
+      applyFont(font);
+    },
+    [updateConfig]
+  );
+
+  const setPresetTheme = useCallback(
+    (preset: string) => {
+      const themePreset = getThemePreset(preset);
+      if (!themePreset) return;
+
+      updateConfig((prev) => ({
+        ...prev,
+        preset,
+        // Update individual settings to match preset
+        radius: themePreset.radius,
+        font: themePreset.font?.value ?? prev.font,
+        // Clear colorPreset since we're using preset colors
+        colorPreset: null,
+      }));
+      applyPreset(preset);
+    },
+    [updateConfig]
+  );
+
+  const resetTheme = useCallback(() => {
+    // Remove stored config
+    if (typeof window !== "undefined") {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+    clearTheme();
+
+    setConfigState(defaultConfig);
+  }, []);
+
+  return {
+    config,
+    setColorPreset,
+    setRadius,
+    setDarkMode,
+    setFont,
+    setPresetTheme,
+    resetTheme,
+  };
+}
+`}function Pe(){return `export { PreviewcnDevtools } from "./devtools";
+`}function q(){return [{path:"index.ts",content:Pe()},{path:"devtools.tsx",content:F()},{path:"trigger.tsx",content:U()},{path:"panel.tsx",content:E()},{path:"color-picker.tsx",content:w()},{path:"preset-selector.tsx",content:I()},{path:"radius-selector.tsx",content:$()},{path:"font-selector.tsx",content:R()},{path:"mode-toggle.tsx",content:N()},{path:"css-export-button.tsx",content:T()},{path:"theme-applier.ts",content:B()},{path:"use-theme-state.ts",content:V()},{path:"css-export.ts",content:S()},{path:"presets/index.ts",content:O()},{path:"presets/colors.ts",content:j()},{path:"presets/color-preset-specs.ts",content:D()},{path:"presets/radius.ts",content:L()},{path:"presets/fonts.ts",content:M()},{path:"presets/theme-presets.ts",content:A()}]}function g(e){return u.cyan(e)}async function Z(e,t){return !!(await we({type:"confirm",name:"value",message:e,initial:t})).value}async function Q(e,t){await C.mkdir(e,{recursive:true});for(let o of t){let r=l.join(e,o.path);await C.mkdir(l.dirname(r),{recursive:true}),await C.writeFile(r,o.content,"utf-8");}}async function ee(e){a.info(`Initializing PreviewCN...
+`);let t=process.cwd(),o=G("Detecting project type...").start(),r=await h(t);r.isNextJs||(o.fail("Not a Next.js project"),a.error("PreviewCN requires a Next.js project with App Router."),a.hint("Make sure you're in the root of a Next.js project."),process.exit(1)),r.isAppRouter||(o.fail("App Router not detected"),a.error("PreviewCN requires Next.js App Router (app/ directory)."),a.hint("Create an app/ directory or migrate from pages/ to app/."),process.exit(1)),o.succeed("Next.js App Router project detected");let s=await k(t);s||(a.error("Could not find app/layout.tsx"),process.exit(1)),a.info(`Found layout at: ${g(l__default.relative(t,s))}`);let{targetDir:n,importPath:c}=await y(t);a.info(`Components will be generated at: ${g(l__default.relative(t,n))}`),e.yes||await Z("This will generate PreviewCN components and modify your app layout. Continue?",true)||(a.info("Aborted."),process.exit(0)),await Te(n,s,c),console.log(),a.success("PreviewCN devtools initialized successfully!"),console.log(),a.info("Next step:"),console.log(`  Run ${g("pnpm dev")} (or your dev command) to start the dev server.`),console.log(`  Click the ${g("theme palette icon")} in the bottom-right corner to open the editor.`),console.log();}async function Te(e,t,o){let r=G("Generating PreviewCN components...").start();try{let n=q();await Q(e,n);let c=l__default.relative(process.cwd(),e);r.succeed(`Generated ${n.length} files in ${c}`);}catch(n){r.fail("Failed to generate PreviewCN components"),a.error(n instanceof Error?n.message:String(n)),process.exit(1);}let s=G("Adding PreviewcnDevtools to layout...").start();try{await z(t,o),s.succeed("Added PreviewcnDevtools to layout");}catch(n){s.fail("Failed to modify layout for devtools"),a.error(n instanceof Error?n.message:String(n)),a.hint("You may need to add PreviewcnDevtools manually. See documentation.");}}var x=new Command;x.name("previewcn").description("CLI for PreviewCN - real-time shadcn/ui theme editor").version("0.1.0");x.command("init",{isDefault:true}).description("Initialize PreviewCN devtools in your Next.js project").option("-y, --yes","Skip confirmation prompts").action(ee);x.command("doctor").description("Check PreviewCN setup and diagnose issues").action(X);x.parse();