bluedither 1.0.16 → 1.0.17

package/cli/commands/install.js

@@ -121,6 +121,9 @@ export default async function install(args) {
 
   console.log(`Copied ${copied} files to ${bdDir}`);
 
+  // Auto-wire Vite plugin if vite.config exists
+  autoWireVitePlugin(targetDir);
+
   // Generate Claude Code command file
   const claudeDir = resolve(targetDir, '.claude', 'commands');
   mkdirSync(claudeDir, { recursive: true });
@@ -145,14 +148,46 @@ $ARGUMENTS
   To apply the theme, use Claude Code:
     /apply-theme [description of your site]
 
-  To customize visually, add this to your HTML:
-    <script src="./bluedither/bluedither-tuner-inject.js"></script>
-
-  For auto-saving, run in a separate terminal:
-    npx bluedither tune --save-only
+  The tuner panel loads automatically in dev mode.
+  Click "Commit Changes" to save tweaks to tokens.json.
   `);
 }
 
+function autoWireVitePlugin(targetDir) {
+  // Find vite.config file
+  const variants = ['vite.config.js', 'vite.config.ts', 'vite.config.mjs', 'vite.config.mts'];
+  let configPath = null;
+  for (const v of variants) {
+    const p = resolve(targetDir, v);
+    if (existsSync(p)) { configPath = p; break; }
+  }
+  if (!configPath) return;
+
+  const config = readFileSync(configPath, 'utf-8');
+
+  // Skip if already wired
+  if (config.includes('bluedither')) return;
+
+  // Add import and plugin
+  const importLine = `import { bluedither } from './bluedither/dev-middleware.js'\n`;
+  let updated = importLine + config;
+
+  // Add bluedither() to plugins array
+  updated = updated.replace(
+    /plugins:\s*\[([^\]]*)\]/,
+    (match, inner) => {
+      const trimmed = inner.trim();
+      if (trimmed.endsWith(',')) {
+        return `plugins: [${trimmed} bluedither()]`;
+      }
+      return `plugins: [${trimmed}, bluedither()]`;
+    }
+  );
+
+  writeFileSync(configPath, updated);
+  console.log(`Wired BlueDither plugin into ${basename(configPath)}`);
+}
+
 async function installFromRegistry(slug, targetDir) {
   console.log(`\n  Installing theme "${slug}" from marketplace...\n`);
 
@@ -221,6 +256,9 @@ async function installFromRegistry(slug, targetDir) {
   const { framework, typescript } = detectFramework(targetDir);
   console.log(`  Detected framework: ${framework}${typescript ? ' + TypeScript' : ''}`);
 
+  // Auto-wire Vite plugin
+  autoWireVitePlugin(targetDir);
+
   const claudeDir = resolve(targetDir, '.claude', 'commands');
   mkdirSync(claudeDir, { recursive: true });
 
@@ -243,10 +281,7 @@ $ARGUMENTS
   To apply the theme, use Claude Code:
     /apply-theme [description of your site]
 
-  To customize visually, add this to your HTML:
-    <script src="./bluedither/bluedither-tuner-inject.js"><\/script>
-
-  For auto-saving, run in a separate terminal:
-    npx bluedither tune --save-only
+  The tuner panel loads automatically in dev mode.
+  Click "Commit Changes" to save tweaks to tokens.json.
   `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bluedither",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A bold, dithered-shader hero theme for Claude Code — skill + fine-tuner",
   "type": "module",
   "bin": {