bluedither 1.0.15 → 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/fine-tuner/inject.js

@@ -2,7 +2,7 @@
  * BlueDither Tuner — Injectable Loader
  *
  * Drop this script into ANY page to get the tuner overlay.
- * Reads tokens from bluedither/tokens.json, updates CSS vars live.
+ * On load: reads tokens.json, applies CSS vars + shader params (so saved changes persist).
  * "Commit Changes" saves via dev middleware → sidecar → File System API → download.
  *
  * Usage:
@@ -31,11 +31,102 @@
     defaults = structuredClone(tokens);
   }
 
+  // ── Apply saved tokens to the page ──
+  // This makes "Commit Changes" persist across page reloads.
+  const root = document.documentElement;
+  const t = tokens;
+
+  function pxToClamp(px) {
+    const dw = t.layout?.designWidth || 1364;
+    const maxRem = px / 16;
+    const vw = (px / dw) * 100;
+    const minRem = maxRem * 0.55;
+    return `clamp(${minRem.toFixed(4)}rem, ${vw.toFixed(4)}vw, ${maxRem.toFixed(4)}rem)`;
+  }
+
+  // Colors
+  if (t.colors) {
+    if (t.colors.background) root.style.setProperty('--bd-bg', t.colors.background);
+    if (t.colors.primary) root.style.setProperty('--bd-primary', t.colors.primary);
+    if (t.colors.text) root.style.setProperty('--bd-text', t.colors.text);
+    if (t.colors.ctaBackground) root.style.setProperty('--bd-cta-bg', t.colors.ctaBackground);
+    if (t.colors.ctaText) root.style.setProperty('--bd-cta-text', t.colors.ctaText);
+  }
+
+  // Typography
+  if (t.typography) {
+    if (t.typography.primaryFont) root.style.setProperty('--bd-font-primary', t.typography.primaryFont);
+    if (t.typography.secondaryFont) root.style.setProperty('--bd-font-secondary', t.typography.secondaryFont);
+    if (t.typography.headline) {
+      root.style.setProperty('--bd-headline-size', pxToClamp(t.typography.headline.referencePx));
+      root.style.setProperty('--bd-headline-lh', pxToClamp(t.typography.headline.lineHeightPx));
+    }
+    if (t.typography.subHeadline) {
+      root.style.setProperty('--bd-sub-size', pxToClamp(t.typography.subHeadline.referencePx));
+      root.style.setProperty('--bd-sub-lh', pxToClamp(t.typography.subHeadline.lineHeightPx));
+    }
+    if (t.typography.logo) {
+      root.style.setProperty('--bd-logo-size', pxToClamp(t.typography.logo.referencePx));
+      root.style.setProperty('--bd-logo-lh', pxToClamp(t.typography.logo.lineHeightPx));
+    }
+    if (t.typography.navItem) {
+      root.style.setProperty('--bd-nav-size', pxToClamp(t.typography.navItem.referencePx));
+      root.style.setProperty('--bd-nav-lh', pxToClamp(t.typography.navItem.lineHeightPx));
+    }
+    if (t.typography.ctaButton) {
+      root.style.setProperty('--bd-cta-size', pxToClamp(t.typography.ctaButton.referencePx));
+      root.style.setProperty('--bd-cta-lh', pxToClamp(t.typography.ctaButton.lineHeightPx));
+    }
+  }
+
+  // Spacing
+  if (t.spacing) {
+    if (t.spacing.headerPaddingX) root.style.setProperty('--bd-header-px', pxToClamp(t.spacing.headerPaddingX));
+    if (t.spacing.headerPaddingY) root.style.setProperty('--bd-header-py', pxToClamp(t.spacing.headerPaddingY));
+    if (t.spacing.heroPaddingTop) root.style.setProperty('--bd-hero-pt', pxToClamp(t.spacing.heroPaddingTop));
+    if (t.spacing.heroPaddingBottom) root.style.setProperty('--bd-hero-pb', pxToClamp(t.spacing.heroPaddingBottom));
+    if (t.spacing.heroPaddingX) root.style.setProperty('--bd-hero-px', pxToClamp(t.spacing.heroPaddingX));
+    if (t.spacing.navGap) root.style.setProperty('--bd-nav-gap', pxToClamp(t.spacing.navGap));
+    if (t.spacing.ctaPaddingX) root.style.setProperty('--bd-cta-px', pxToClamp(t.spacing.ctaPaddingX));
+    if (t.spacing.ctaPaddingY) root.style.setProperty('--bd-cta-py', pxToClamp(t.spacing.ctaPaddingY));
+    if (t.spacing.ctaBorderRadius != null) root.style.setProperty('--bd-cta-radius', `${(t.spacing.ctaBorderRadius / 16).toFixed(4)}rem`);
+  }
+
+  // Opacity
+  if (t.opacity) {
+    if (t.opacity.navLinks != null) root.style.setProperty('--bd-nav-opacity', t.opacity.navLinks);
+  }
+
+  // Shader — wait for __BD_SHADER__ to be available, then update
+  if (t.shader || t.colors) {
+    const applyShader = () => {
+      const shader = window.__BD_SHADER__;
+      if (!shader) return false;
+      const params = {};
+      if (t.colors?.shaderFront) params.colorFront = t.colors.shaderFront;
+      if (t.colors?.shaderBack) params.colorBack = t.colors.shaderBack;
+      if (t.shader?.shape) params.shape = t.shader.shape;
+      if (t.shader?.type) params.type = t.shader.type;
+      if (t.shader?.speed != null) params.speed = t.shader.speed;
+      if (t.shader?.scale != null) params.scale = t.shader.scale;
+      if (t.shader?.size != null) params.size = t.shader.size;
+      if (t.shader?.rotation != null) params.rotation = t.shader.rotation;
+      shader.updateParams(params);
+      return true;
+    };
+
+    // Try immediately, then poll briefly (shader may init after this script)
+    if (!applyShader()) {
+      let attempts = 0;
+      const interval = setInterval(() => {
+        if (applyShader() || ++attempts > 20) clearInterval(interval);
+      }, 100);
+    }
+  }
+
   // Inject into globals for the tuner
   window.__BD_TOKENS__ = tokens;
   window.__BD_DEFAULTS__ = defaults;
-
-  // Signal that we're in injectable mode (tuner will use commitTokens cascade)
   window.__BD_TUNER_SERVER_MODE__ = true;
 
   // Load tuner CSS
@@ -47,9 +138,7 @@
       style.textContent = css;
       document.head.appendChild(style);
     }
-  } catch {
-    // CSS will be inlined in the bundled version
-  }
+  } catch {}
 
   // Load and execute tuner script
   const tunerScript = document.createElement('script');

package/package.json

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