bluedither 1.0.15 → 1.0.16

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.16",
   "description": "A bold, dithered-shader hero theme for Claude Code — skill + fine-tuner",
   "type": "module",
   "bin": {