previewcn 0.1.2 → 0.1.3

package/dist/index.js

@@ -283,7 +283,7 @@ export function PreviewcnDevtools() {
 
   return <DevtoolsInner />;
 }
-`}function R(){return `"use client";
+`}function N(){return `"use client";
 
 import { useState } from "react";
 
@@ -387,7 +387,7 @@ export function FontSelector({ value, onChange }: FontSelectorProps) {
     </div>
   );
 }
-`}function N(){return `"use client";
+`}function R(){return `"use client";
 
 type ModeToggleProps = {
   value: boolean | null;
@@ -483,7 +483,7 @@ export function ModeToggle({ value, onChange }: ModeToggleProps) {
 }
 `}function E(){return `"use client";
 
-import { useEffect, useRef, type ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 
 import { useThemeState } from "./use-theme-state";
 import { applyTheme } from "./theme-applier";
@@ -730,12 +730,10 @@ export default function Panel({ onClose }: PanelProps) {
     resetTheme,
   } = useThemeState();
 
-  const didApplyOnOpenRef = useRef(false);
+  // Apply stored theme only when the panel opens
   useEffect(() => {
-    if (didApplyOnOpenRef.current) return;
-    didApplyOnOpenRef.current = true;
     applyTheme(config);
-  }, [config]);
+  }, []);
 
   usePanelKeyframes();
 
@@ -830,6 +828,10 @@ export type PresetSpec = {
     light?: string;
     dark?: string;
   };
+  destructiveForeground?: {
+    light?: string;
+    dark?: string;
+  };
 };
 
 export const colorPresetSpecs: PresetSpec[] = [
@@ -1086,6 +1088,11 @@ const defaultPrimaryForeground = {
   dark: "oklch(0.985 0 0)",
 };
 
+const defaultDestructiveForeground = {
+  light: "oklch(0.985 0 0)",
+  dark: "oklch(0.985 0 0)",
+};
+
 function createColorPreset(spec: PresetSpec): ColorPreset {
   return {
     name: spec.name,
@@ -1097,6 +1104,8 @@ function createColorPreset(spec: PresetSpec): ColorPreset {
         "primary-foreground":
           spec.primaryForeground?.light ?? defaultPrimaryForeground.light,
         destructive: spec.destructive?.light ?? defaultDestructive.light,
+        "destructive-foreground":
+          spec.destructiveForeground?.light ?? defaultDestructiveForeground.light,
       },
       dark: {
         ...neutralColors.dark,
@@ -1104,6 +1113,8 @@ function createColorPreset(spec: PresetSpec): ColorPreset {
         "primary-foreground":
           spec.primaryForeground?.dark ?? defaultPrimaryForeground.dark,
         destructive: spec.destructive?.dark ?? defaultDestructive.dark,
+        "destructive-foreground":
+          spec.destructiveForeground?.dark ?? defaultDestructiveForeground.dark,
       },
     },
   };
@@ -1925,5 +1936,5 @@ export function useThemeState() {
   };
 }
 `}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...
+`}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:N()},{path:"mode-toggle.tsx",content:R()},{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.2",
+  "version": "0.1.3",
   "engines": {
     "node": ">=18"
   },