previewcn 0.1.1 → 0.1.2

package/dist/index.js

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
-import {Command}from'commander';import*as x from'fs/promises';import x__default from'fs/promises';import*as l from'path';import l__default from'path';import p from'chalk';import V from'ora';import ue from'prompts';async function g(e){let t={isNextJs:false,isAppRouter:false};try{let r=l__default.join(e,"package.json"),a=await x__default.readFile(r,"utf-8"),n=JSON.parse(a);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 x__default.stat(r)).isDirectory()){t.isAppRouter=!0;break}}catch{}return t}async function h(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 x__default.access(o),o}catch{}return null}var s={info:e=>console.log(p.blue("info"),e),success:e=>console.log(p.green("success"),e),warn:e=>console.log(p.yellow("warn"),e),error:e=>console.log(p.red("error"),e),hint:e=>console.log(p.gray("hint"),e)};var oe=/^import[\s\S]*?;\s*$/gm,re="@/components/ui/previewcn",ne='{process.env.NODE_ENV === "development" && <PreviewcnDevtools />}';function se(e){return `import { PreviewcnDevtools } from "${e}";`}function ae(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(`
-`)}`,r=[...e.matchAll(oe)];if(r.length===0)return `${t.join(`
+`)}`,r=[...e.matchAll(re)];if(r.length===0)return `${t.join(`
 `)}
 
-${e}`;let a=r[r.length-1],n=a.index+a[0].length;return e.slice(0,n)+o+e.slice(n)}function le(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 J(e,t=re){let o=await x__default.readFile(e,"utf-8"),r=[];o.includes("PreviewcnDevtools")||r.push(se(t));let a=ae(o,r);a.includes("<PreviewcnDevtools")||(a=le(a,ne)),await x__default.writeFile(e,a,"utf-8");}async function G(e){try{return (await x__default.readFile(e,"utf-8")).includes("PreviewcnDevtools")}catch{return  false}}async function Y(e){let t=l.join(e,"components.json");try{let o=await x.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 d(e){let o=(await Y(e)).replace(/^@\//,"");return l.join(e,o,"previewcn")}async function H(e){return `${await Y(e)}/previewcn`}async function ce(e){try{let t=await d(e),o=l__default.join(t,"index.ts");return await x__default.access(o),!0}catch{return  false}}async function K(){s.info(`Running PreviewCN diagnostics...
-`);let e=process.cwd(),t=[],o=await g(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 r=await ce(e),a=await d(e),n=l__default.relative(e,a);t.push({name:"PreviewCN components",pass:r,message:r?`Found in ${n}`:"Not found (run `npx previewcn init`)"});let c=false,v=await h(e);v&&(c=await G(v)),t.push({name:"PreviewcnDevtools in layout",pass:c,message:c?"Found":"Not found in layout (run `npx previewcn init`)"}),console.log();for(let i of t){let ee=i.pass?p.green("\u2713"):p.red("\u2717"),te=i.pass?p.green(i.message):p.red(i.message);console.log(`  ${ee} ${i.name}: ${te}`);}console.log(),t.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 P(){return `"use client";
+${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";
 
@@ -53,9 +55,9 @@ export function ColorPicker({ value, onChange }: ColorPickerProps) {
     </div>
   );
 }
-`}function w(){return `"use client";
+`}function T(){return `"use client";
 
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import type { ThemeConfig } from "./theme-applier";
 import { copyToClipboard, generateExportCss } from "./css-export";
@@ -103,6 +105,15 @@ function CheckIcon() {
 
 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;
@@ -115,7 +126,10 @@ export function CssExportButton({ config }: CssExportButtonProps) {
 
     if (success) {
       setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      if (resetTimerRef.current) {
+        clearTimeout(resetTimerRef.current);
+      }
+      resetTimerRef.current = setTimeout(() => setCopied(false), 2000);
     }
   };
 
@@ -142,7 +156,7 @@ export function CssExportButton({ config }: CssExportButtonProps) {
     </button>
   );
 }
-`}function T(){return `// CSS Export utilities for generating shadcn/ui compatible CSS
+`}function S(){return `// CSS Export utilities for generating shadcn/ui compatible CSS
 
 import { getColorPreset } from "./presets/colors";
 import { getThemePreset } from "./presets/theme-presets";
@@ -234,7 +248,7 @@ export async function copyToClipboard(text: string): Promise<boolean> {
     }
   }
 }
-`}function S(){return `"use client";
+`}function F(){return `"use client";
 
 import { lazy, Suspense, useState } from "react";
 
@@ -269,7 +283,7 @@ export function PreviewcnDevtools() {
 
   return <DevtoolsInner />;
 }
-`}function F(){return `"use client";
+`}function R(){return `"use client";
 
 import { useState } from "react";
 
@@ -280,6 +294,11 @@ type FontSelectorProps = {
   onChange: (font: string) => void;
 };
 
+type FontMenuProps = {
+  value: string | null;
+  onSelect: (fontValue: string) => void;
+};
+
 function ChevronDownIcon() {
   return (
     <svg
@@ -298,12 +317,50 @@ function ChevronDownIcon() {
   );
 }
 
+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"}\`}
@@ -314,7 +371,7 @@ export function FontSelector({ value, onChange }: FontSelectorProps) {
       </label>
       <div className="relative z-[1]">
         <button
-          onClick={() => setIsOpen(!isOpen)}
+          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}
@@ -324,39 +381,13 @@ export function FontSelector({ value, onChange }: FontSelectorProps) {
         </button>
 
         {isOpen && (
-          <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={() => {
-                    onChange(font.value);
-                    setIsOpen(false);
-                  }}
-                  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>
+          <FontMenu value={value} onSelect={handleSelect} />
         )}
       </div>
     </div>
   );
 }
-`}function E(){return `"use client";
+`}function N(){return `"use client";
 
 type ModeToggleProps = {
   value: boolean | null;
@@ -450,9 +481,9 @@ export function ModeToggle({ value, onChange }: ModeToggleProps) {
     </div>
   );
 }
-`}function N(){return `"use client";
+`}function E(){return `"use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 
 import { useThemeState } from "./use-theme-state";
 import { applyTheme } from "./theme-applier";
@@ -467,6 +498,32 @@ 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
@@ -505,7 +562,6 @@ function RotateCcwIcon() {
   );
 }
 
-// Inject keyframes for animations
 const keyframesStyle = \`
 @keyframes previewcn-slide-in-right {
   from { transform: translateX(100%); }
@@ -521,26 +577,43 @@ const keyframesStyle = \`
 }
 \`;
 
-export default function Panel({ onClose }: PanelProps) {
-  const {
-    config,
-    setColorPreset,
-    setRadius,
-    setDarkMode,
-    setFont,
-    setPresetTheme,
-    resetTheme,
-  } = useThemeState();
+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",
+};
 
-  // Apply stored theme only when the panel is opened (user-initiated).
-  const didApplyOnOpenRef = useRef(false);
-  useEffect(() => {
-    if (didApplyOnOpenRef.current) return;
-    didApplyOnOpenRef.current = true;
-    applyTheme(config);
-  }, [config]);
+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)]";
 
-  // Inject keyframes stylesheet once
+const footerStyle = {
+  background: "linear-gradient(0deg, oklch(0.18 0.02 260), transparent)",
+};
+
+function usePanelKeyframes() {
   useEffect(() => {
     const styleId = "previewcn-keyframes";
     if (!document.getElementById(styleId)) {
@@ -550,84 +623,134 @@ export default function Panel({ onClose }: PanelProps) {
       document.head.appendChild(style);
     }
   }, []);
+}
 
+function PanelSection({ delay, children }: PanelSectionProps) {
   return (
     <div
-      className="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)]"
       style={{
-        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",
+        animation: "previewcn-rise 0.32s ease both",
+        animationDelay: \`\${delay}s\`,
       }}
     >
-      {/* Header */}
-      <div
-        className="flex items-center justify-between px-4 py-3 border-b border-[oklch(1_0_0/0.08)]"
-        style={{
-          background: "linear-gradient(180deg, oklch(0.18 0.02 260), transparent)",
-        }}
-      >
-        <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>
+      {children}
+    </div>
+  );
+}
 
-      {/* Content */}
-      <div
-        className="flex-1 overflow-y-auto p-4 grid gap-4"
-        style={{
-          scrollbarWidth: "thin",
-          scrollbarColor: "oklch(1 0 0 / 0.2) transparent",
-        }}
-      >
-        <div style={{ animation: "previewcn-rise 0.32s ease both", animationDelay: "0.02s" }}>
-          <PresetSelector value={config.preset} onChange={setPresetTheme} />
-        </div>
-        <div style={{ animation: "previewcn-rise 0.32s ease both", animationDelay: "0.05s" }}>
-          <ColorPicker value={config.colorPreset} onChange={setColorPreset} />
-        </div>
-        <div style={{ animation: "previewcn-rise 0.32s ease both", animationDelay: "0.08s" }}>
-          <RadiusSelector value={config.radius} onChange={setRadius} />
-        </div>
-        <div style={{ animation: "previewcn-rise 0.32s ease both", animationDelay: "0.11s" }}>
-          <FontSelector value={config.font} onChange={setFont} />
-        </div>
-        <div style={{ animation: "previewcn-rise 0.32s ease both", animationDelay: "0.14s" }}>
-          <ModeToggle value={config.darkMode} onChange={setDarkMode} />
-        </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>
+  );
+}
 
-      {/* Footer */}
-      <div
-        className="flex items-center justify-end px-4 py-3 border-t border-[oklch(1_0_0/0.08)]"
-        style={{
-          background: "linear-gradient(0deg, oklch(0.18 0.02 260), transparent)",
-        }}
+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)]"
       >
-        <CssExportButton config={config} />
-        <button
-          onClick={resetTheme}
-          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>
+        <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>
   );
 }
@@ -689,7 +812,7 @@ export function PresetSelector({ value, onChange }: PresetSelectorProps) {
     </div>
   );
 }
-`}function R(){return `// Color preset data used by the devtools color picker.
+`}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 = {
@@ -901,7 +1024,7 @@ export const colorPresetSpecs: PresetSpec[] = [
     },
   },
 ];
-`}function D(){return `// Color presets compatible with shadcn/ui
+`}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";
@@ -992,7 +1115,7 @@ export const colorPresets: ColorPreset[] =
 export function getColorPreset(name: string): ColorPreset | undefined {
   return colorPresets.find((p) => p.name === name);
 }
-`}function j(){return `// Font presets using Google Fonts
+`}function M(){return `// Font presets using Google Fonts
 
 export type FontPreset = {
   label: string;
@@ -1077,12 +1200,12 @@ export const fontPresets: FontPreset[] = [
 export function getFontPreset(value: string): FontPreset | undefined {
   return fontPresets.find((f) => f.value === value);
 }
-`}function M(){return `export * from "./colors";
+`}function O(){return `export * from "./colors";
 export * from "./color-preset-specs";
 export * from "./fonts";
 export * from "./radius";
 export * from "./theme-presets";
-`}function O(){return `// Radius presets for border-radius customization
+`}function L(){return `// Radius presets for border-radius customization
 
 export type RadiusPreset = {
   name: string;
@@ -1370,7 +1493,7 @@ const themePresetByName = new Map(
 export function getThemePreset(name: string): ThemePreset | undefined {
   return themePresetByName.get(name);
 }
-`}function L(){return `"use client";
+`}function $(){return `"use client";
 
 import { radiusPresets } from "./presets/radius";
 
@@ -1453,8 +1576,8 @@ type ThemeColors = {
   dark: Record<string, string>;
 };
 
-function getOrCreateThemeColorStyleElement(): HTMLStyleElement {
-  const existing = document.getElementById(THEME_COLOR_STYLE_ID);
+function getOrCreateStyleElement(id: string): HTMLStyleElement {
+  const existing = document.getElementById(id);
   if (existing instanceof HTMLStyleElement) {
     return existing;
   }
@@ -1464,7 +1587,7 @@ function getOrCreateThemeColorStyleElement(): HTMLStyleElement {
   }
 
   const styleEl = document.createElement("style");
-  styleEl.id = THEME_COLOR_STYLE_ID;
+  styleEl.id = id;
   document.head.appendChild(styleEl);
   return styleEl;
 }
@@ -1476,7 +1599,7 @@ function serializeCssVars(cssVars: Record<string, string>): string {
 }
 
 function applyThemeColors(colors: ThemeColors) {
-  const styleEl = getOrCreateThemeColorStyleElement();
+  const styleEl = getOrCreateStyleElement(THEME_COLOR_STYLE_ID);
 
   const lightCss = serializeCssVars(colors.light);
   const darkCss = serializeCssVars(colors.dark);
@@ -1518,22 +1641,6 @@ export function applyPresetColors(preset: ThemePreset) {
   applyThemeColors(preset.colors);
 }
 
-function getOrCreateFontStyleElement(): HTMLStyleElement {
-  const existing = document.getElementById(THEME_FONT_STYLE_ID);
-  if (existing instanceof HTMLStyleElement) {
-    return existing;
-  }
-
-  if (existing) {
-    existing.remove();
-  }
-
-  const styleEl = document.createElement("style");
-  styleEl.id = THEME_FONT_STYLE_ID;
-  document.head.appendChild(styleEl);
-  return styleEl;
-}
-
 function applyFontConfig(font: ThemePresetFont) {
   const { fontFamily, googleFontsUrl, value: fontId } = font;
 
@@ -1555,7 +1662,7 @@ function applyFontConfig(font: ThemePresetFont) {
 
   // Use multiple strategies to ensure font override works universally
   // This covers various Tailwind v4 and next/font configurations
-  const styleEl = getOrCreateFontStyleElement();
+  const styleEl = getOrCreateStyleElement(THEME_FONT_STYLE_ID);
   styleEl.textContent = \`
     :root {
       --font-sans: \${fontFamily} !important;
@@ -1632,7 +1739,7 @@ export function clearTheme() {
   root.style.removeProperty("color-scheme");
   root.classList.remove("light", "dark");
 }
-`}function $(){return `"use client";
+`}function U(){return `"use client";
 
 type TriggerProps = {
   onClick: () => void;
@@ -1679,7 +1786,7 @@ export function Trigger({ onClick }: TriggerProps) {
     </button>
   );
 }
-`}function U(){return `"use client";
+`}function V(){return `"use client";
 
 import { useCallback, useState } from "react";
 
@@ -1817,6 +1924,6 @@ export function useThemeState() {
     resetTheme,
   };
 }
-`}function pe(){return `export { PreviewcnDevtools } from "./devtools";
-`}function X(){return [{path:"index.ts",content:pe()},{path:"devtools.tsx",content:S()},{path:"trigger.tsx",content:$()},{path:"panel.tsx",content:N()},{path:"color-picker.tsx",content:P()},{path:"preset-selector.tsx",content:I()},{path:"radius-selector.tsx",content:L()},{path:"font-selector.tsx",content:F()},{path:"mode-toggle.tsx",content:E()},{path:"css-export-button.tsx",content:w()},{path:"theme-applier.ts",content:B()},{path:"use-theme-state.ts",content:U()},{path:"css-export.ts",content:T()},{path:"presets/index.ts",content:M()},{path:"presets/colors.ts",content:D()},{path:"presets/color-preset-specs.ts",content:R()},{path:"presets/radius.ts",content:O()},{path:"presets/fonts.ts",content:j()},{path:"presets/theme-presets.ts",content:A()}]}function u(e){return p.cyan(e)}async function q(e,t){return !!(await ue({type:"confirm",name:"value",message:e,initial:t})).value}async function Z(e,t){await x.mkdir(e,{recursive:true});for(let o of t){let r=l.join(e,o.path);await x.mkdir(l.dirname(r),{recursive:true}),await x.writeFile(r,o.content,"utf-8");}}async function Q(e){s.info(`Initializing PreviewCN...
-`);let t=process.cwd(),o=V("Detecting project type...").start(),r=await g(t);r.isNextJs||(o.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)),r.isAppRouter||(o.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)),o.succeed("Next.js App Router project detected");let a=await h(t);a||(s.error("Could not find app/layout.tsx"),process.exit(1)),s.info(`Found layout at: ${u(l__default.relative(t,a))}`);let n=await d(t),c=await H(t);s.info(`Components will be generated at: ${u(l__default.relative(t,n))}`),e.yes||await q("This will generate PreviewCN components and modify your app layout. Continue?",true)||(s.info("Aborted."),process.exit(0)),await me(n,a,c),console.log(),s.success("PreviewCN devtools initialized successfully!"),console.log(),s.info("Next step:"),console.log(`  Run ${u("pnpm dev")} (or your dev command) to start the dev server.`),console.log(`  Click the ${u("theme palette icon")} in the bottom-right corner to open the editor.`),console.log();}async function me(e,t,o){let r=V("Generating PreviewCN components...").start();try{let n=X();await Z(e,n),r.succeed(`Generated ${n.length} files in ${l__default.basename(l__default.dirname(e))}/${l__default.basename(e)}`);}catch(n){r.fail("Failed to generate PreviewCN components"),s.error(n instanceof Error?n.message:String(n)),process.exit(1);}let a=V("Adding PreviewcnDevtools to layout...").start();try{await J(t,o),a.succeed("Added PreviewcnDevtools to layout");}catch(n){a.fail("Failed to modify layout for devtools"),s.error(n instanceof Error?n.message:String(n)),s.hint("You may need to add PreviewcnDevtools manually. See documentation.");}}var b=new Command;b.name("previewcn").description("CLI for PreviewCN - real-time shadcn/ui theme editor").version("0.1.0");b.command("init",{isDefault:true}).description("Initialize PreviewCN devtools in your Next.js project").option("-y, --yes","Skip confirmation prompts").action(Q);b.command("doctor").description("Check PreviewCN setup and diagnose issues").action(K);b.parse();
+`}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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "previewcn",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "engines": {
     "node": ">=18"
   },