bluedither 1.0.0 → 1.0.2

package/fine-tuner/server.js

@@ -0,0 +1,283 @@
+/**
+ * BlueDither Fine-Tuner Dev Server
+ *
+ * Serves the rendered theme with tuner overlay.
+ * Computes clamp() values from reference px values at render time.
+ * Handles "commit" to write tokens back to disk.
+ *
+ * Usage: node fine-tuner/server.js [--port 3333]
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { createServer } from 'http';
+import { resolve, extname, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// BD_THEME_DIR env var is set by `bluedither tune` for installed themes
+const THEME_DIR = process.env.BD_THEME_DIR || resolve(__dirname, '..', 'theme');
+const TOKENS_PATH = resolve(THEME_DIR, 'tokens.json');
+const PORT = parseInt(process.argv.find((_, i, a) => a[i - 1] === '--port') || '3333', 10);
+
+function loadTokens() {
+  return JSON.parse(readFileSync(TOKENS_PATH, 'utf-8'));
+}
+
+function resolveTokenPath(obj, path) {
+  return path.split('.').reduce((o, k) => (o && o[k] !== undefined ? o[k] : ''), obj);
+}
+
+/**
+ * Compute a clamp() value from a reference px size.
+ * Formula: clamp(minRem, vwValue, maxRem)
+ * - max = referencePx / 16 (rem at design width)
+ * - vw = referencePx / designWidth * 100
+ * - min = max * 0.55 (scales down to ~55% on small screens)
+ */
+function pxToClamp(px, designWidth) {
+  const maxRem = px / 16;
+  const vw = (px / designWidth) * 100;
+  const minRem = maxRem * 0.55;
+  return `clamp(${minRem.toFixed(4)}rem, ${vw.toFixed(4)}vw, ${maxRem.toFixed(4)}rem)`;
+}
+
+/**
+ * Build computed clamp values from tokens.
+ */
+function buildClampValues(tokens) {
+  const dw = tokens.layout.designWidth;
+  const t = tokens.typography;
+  const s = tokens.spacing;
+
+  return {
+    headline: {
+      fontSize: pxToClamp(t.headline.referencePx, dw),
+      lineHeight: pxToClamp(t.headline.lineHeightPx, dw),
+    },
+    subHeadline: {
+      fontSize: pxToClamp(t.subHeadline.referencePx, dw),
+      lineHeight: pxToClamp(t.subHeadline.lineHeightPx, dw),
+    },
+    logo: {
+      fontSize: pxToClamp(t.logo.referencePx, dw),
+      lineHeight: pxToClamp(t.logo.lineHeightPx, dw),
+    },
+    navItem: {
+      fontSize: pxToClamp(t.navItem.referencePx, dw),
+      lineHeight: pxToClamp(t.navItem.lineHeightPx, dw),
+    },
+    ctaButton: {
+      fontSize: pxToClamp(t.ctaButton.referencePx, dw),
+      lineHeight: pxToClamp(t.ctaButton.lineHeightPx, dw),
+    },
+    spacing: {
+      headerPaddingX: pxToClamp(s.headerPaddingX, dw),
+      headerPaddingY: pxToClamp(s.headerPaddingY, dw),
+      heroPaddingTop: pxToClamp(s.heroPaddingTop, dw),
+      heroPaddingBottom: pxToClamp(s.heroPaddingBottom, dw),
+      heroPaddingX: pxToClamp(s.heroPaddingX, dw),
+      navGap: pxToClamp(s.navGap, dw),
+      ctaPaddingX: pxToClamp(s.ctaPaddingX, dw),
+      ctaPaddingY: pxToClamp(s.ctaPaddingY, dw),
+      ctaBorderRadius: `${(s.ctaBorderRadius / 16).toFixed(4)}rem`,
+    },
+  };
+}
+
+function renderFullPage(tokens) {
+  let template = readFileSync(resolve(THEME_DIR, 'template', 'index.html'), 'utf-8');
+
+  // Build clamp values
+  const clamp = buildClampValues(tokens);
+  const renderData = { ...tokens, clamp };
+
+  // Handle font URL encoding for Google Fonts links
+  template = template.replace(/\{\{typography\.primaryFont\.urlEncoded\}\}/g,
+    encodeURIComponent(tokens.typography.primaryFont));
+  template = template.replace(/\{\{typography\.secondaryFont\.urlEncoded\}\}/g,
+    encodeURIComponent(tokens.typography.secondaryFont));
+
+  // Handle {{#each}} blocks
+  template = template.replace(
+    /\{\{#each\s+([^}]+)\}\}([\s\S]*?)\{\{\/each\}\}/g,
+    (_, arrayPath, inner) => {
+      const arr = resolveTokenPath(renderData, arrayPath.trim());
+      if (!Array.isArray(arr)) return '';
+      return arr.map(item => inner.replace(/\{\{this\}\}/g, item)).join('\n');
+    }
+  );
+
+  // Replace remaining {{path}} tokens
+  template = template.replace(/\{\{([^#/][^}]*)\}\}/g, (_, path) => {
+    const val = resolveTokenPath(renderData, path.trim());
+    return val !== undefined && val !== '' ? val : '';
+  });
+
+  // Fix headline newlines
+  template = template.replace(
+    /(<div class="bd-headline">)([\s\S]*?)(<\/div>)/,
+    (_, open, content, close) => open + content.replace(/\n/g, '<br>') + close
+  );
+
+  // Inject shader, tokens, and tuner
+  const shaderJS = readFileSync(resolve(THEME_DIR, 'shaders', 'bluedither-shader.js'), 'utf-8');
+  const shaderBundle = readFileSync(resolve(THEME_DIR, 'shaders', 'paper-shaders-bundle.js'), 'utf-8');
+  const tunerCSS = readFileSync(resolve(__dirname, 'tuner.css'), 'utf-8');
+  const tunerJS = readFileSync(resolve(__dirname, 'tuner.js'), 'utf-8');
+
+  const injection = `
+    <script>
+      window.__BD_TOKENS__ = ${JSON.stringify(tokens, null, 2)};
+      window.__BD_DEFAULTS__ = ${JSON.stringify(loadDefaults(), null, 2)};
+    </script>
+    <script type="module">
+      // Paper shaders bundle (inlined)
+      ${shaderBundle}
+
+      // BlueDither shader module (inlined, imports resolved above)
+      const shapeEnum = { simplex: 1, warp: 2, dots: 3, wave: 4, ripple: 5, swirl: 6, sphere: 7 };
+      const typeEnum = { random: 1, '2x2': 2, '4x4': 3, '8x8': 4 };
+
+      const parentEl = document.getElementById('bd-shader-parent');
+      const tokens = window.__BD_TOKENS__;
+
+      const uniforms = {
+        u_colorFront: getShaderColorFromString(tokens.colors.shaderFront),
+        u_colorBack: getShaderColorFromString(tokens.colors.shaderBack),
+        u_shape: shapeEnum[tokens.shader.shape] || 2,
+        u_type: typeEnum[tokens.shader.type] || 2,
+        u_pxSize: tokens.shader.size,
+        u_scale: tokens.shader.scale,
+        u_rotation: 0,
+        u_originX: 0.5,
+        u_originY: 0.5,
+        u_worldWidth: 0,
+        u_worldHeight: 0,
+        u_fit: 0,
+        u_offsetX: 0,
+        u_offsetY: 0,
+      };
+
+      const mount = new ShaderMount(
+        parentEl,
+        ditheringFragmentShader,
+        uniforms,
+        { alpha: true, premultipliedAlpha: false },
+        tokens.shader.speed,
+        0,
+        2,
+      );
+
+      // Expose for tuner
+      window.__BD_SHADER__ = {
+        updateParams(p) {
+          const u = {};
+          if (p.colorFront !== undefined) u.u_colorFront = getShaderColorFromString(p.colorFront);
+          if (p.colorBack !== undefined) u.u_colorBack = getShaderColorFromString(p.colorBack);
+          if (p.shape !== undefined) u.u_shape = shapeEnum[p.shape] || 2;
+          if (p.type !== undefined) u.u_type = typeEnum[p.type] || 2;
+          if (p.size !== undefined) u.u_pxSize = p.size;
+          if (p.scale !== undefined) u.u_scale = p.scale;
+          if (p.speed !== undefined) mount.setSpeed(p.speed);
+          if (Object.keys(u).length > 0) mount.setUniforms(u);
+        },
+        destroy() { mount.dispose(); }
+      };
+    </script>
+    <style>${tunerCSS}</style>
+    <script type="module">${tunerJS}</script>
+  `;
+
+  template = template.replace('</body>', injection + '\n</body>');
+  return template;
+}
+
+function loadDefaults() {
+  // Store the original shipped tokens as defaults for reset
+  const defaultsPath = resolve(THEME_DIR, 'tokens.defaults.json');
+  try {
+    return JSON.parse(readFileSync(defaultsPath, 'utf-8'));
+  } catch {
+    // If no defaults file, current tokens ARE the defaults
+    return loadTokens();
+  }
+}
+
+const MIME = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.woff2': 'font/woff2',
+};
+
+const server = createServer((req, res) => {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204);
+    res.end();
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/commit') {
+    let body = '';
+    req.on('data', chunk => { body += chunk; });
+    req.on('end', () => {
+      try {
+        const updatedTokens = JSON.parse(body);
+        writeFileSync(TOKENS_PATH, JSON.stringify(updatedTokens, null, 2) + '\n', 'utf-8');
+        res.writeHead(200, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: true, message: 'Tokens committed to disk.' }));
+        console.log('[BlueDither] Tokens committed successfully.');
+      } catch (e) {
+        res.writeHead(400, { 'Content-Type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
+  if (req.method === 'GET' && req.url === '/tokens') {
+    const tokens = loadTokens();
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.end(JSON.stringify(tokens));
+    return;
+  }
+
+  if (req.method === 'GET' && (req.url === '/' || req.url === '/index.html')) {
+    try {
+      const tokens = loadTokens();
+      const page = renderFullPage(tokens);
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(page);
+    } catch (e) {
+      res.writeHead(500, { 'Content-Type': 'text/plain' });
+      res.end('Server error: ' + e.message + '\n' + e.stack);
+    }
+    return;
+  }
+
+  // Static files from assets
+  const filePath = resolve(THEME_DIR, 'assets', req.url.slice(1));
+  try {
+    const data = readFileSync(filePath);
+    const ext = extname(filePath);
+    res.writeHead(200, { 'Content-Type': MIME[ext] || 'application/octet-stream' });
+    res.end(data);
+  } catch {
+    res.writeHead(404);
+    res.end('Not found');
+  }
+});
+
+server.listen(PORT, () => {
+  console.log(`\n  BlueDither Fine-Tuner running at http://localhost:${PORT}\n`);
+  console.log(`  Tokens: ${TOKENS_PATH}`);
+  console.log(`  Edit in browser → hit Commit → tokens.json updated on disk.\n`);
+});

package/fine-tuner/tuner.css

@@ -0,0 +1,362 @@
+/* =============================================
+   BlueDither Fine-Tuner — Overlay Panel v2
+   ============================================= */
+
+#bd-tuner {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 320px;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  background: rgba(10, 10, 20, 0.92);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  padding: 20px;
+  z-index: 9999;
+  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
+  font-size: 12px;
+  color: #e0e0e0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  transition: transform 0.2s ease;
+}
+
+#bd-tuner.collapsed {
+  transform: translateX(calc(100% + 32px));
+}
+
+#bd-tuner-toggle {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 10000;
+  background: rgba(10, 10, 20, 0.92);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  color: #e0e0e0;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-family: "SF Mono", "Cascadia Code", "Consolas", monospace;
+  font-size: 11px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  display: none;
+}
+
+#bd-tuner.collapsed ~ #bd-tuner-toggle {
+  display: block;
+}
+
+.bd-tuner-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #888;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bd-tuner-title button {
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0;
+}
+
+.bd-tuner-title button:hover {
+  color: #fff;
+}
+
+#bd-tuner-reset {
+  font-size: 18px !important;
+}
+
+.bd-tuner-section {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.bd-tuner-section:last-of-type {
+  border-bottom: none;
+  margin-bottom: 8px;
+}
+
+.bd-tuner-section-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+/* ── Row layouts ── */
+
+.bd-tuner-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.bd-tuner-row:last-child {
+  margin-bottom: 0;
+}
+
+.bd-tuner-row-stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+}
+
+.bd-tuner-row-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bd-tuner-label {
+  font-size: 11px;
+  color: #999;
+  flex-shrink: 0;
+  width: 110px;
+}
+
+.bd-tuner-value {
+  font-size: 10px;
+  color: #666;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.bd-tuner-input {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Color input ── */
+
+.bd-tuner-input input[type="color"] {
+  width: 32px;
+  height: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  cursor: pointer;
+  background: none;
+  padding: 0;
+}
+
+/* ── Slider ── */
+
+.bd-tuner-slider {
+  width: 100%;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  outline: none;
+}
+
+.bd-tuner-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: pointer;
+}
+
+/* ── Px input with number + unit ── */
+
+.bd-tuner-px-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.bd-tuner-px-num {
+  width: 56px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: #e0e0e0;
+  padding: 3px 6px;
+  font-family: inherit;
+  font-size: 11px;
+  outline: none;
+  text-align: right;
+  -moz-appearance: textfield;
+}
+
+.bd-tuner-px-num::-webkit-inner-spin-button,
+.bd-tuner-px-num::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.bd-tuner-px-num:focus {
+  border-color: rgba(51, 0, 255, 0.5);
+}
+
+.bd-tuner-unit {
+  font-size: 10px;
+  color: #555;
+  width: 16px;
+}
+
+/* ── Font dropdown ── */
+
+.bd-tuner-font-input {
+  position: relative;
+}
+
+.bd-tuner-font-search {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: #e0e0e0;
+  padding: 5px 8px;
+  font-family: inherit;
+  font-size: 11px;
+  outline: none;
+}
+
+.bd-tuner-font-search:focus {
+  border-color: rgba(51, 0, 255, 0.5);
+}
+
+.bd-tuner-font-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: rgba(15, 15, 25, 0.98);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  margin-top: 2px;
+  z-index: 100;
+}
+
+.bd-tuner-font-dropdown.open {
+  display: block;
+}
+
+.bd-tuner-font-option {
+  padding: 6px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bd-tuner-font-option:hover {
+  background: rgba(51, 0, 255, 0.3);
+}
+
+.bd-tuner-font-dropdown::-webkit-scrollbar {
+  width: 4px;
+}
+
+.bd-tuner-font-dropdown::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+
+/* ── Segmented buttons ── */
+
+.bd-tuner-segmented {
+  display: flex;
+  gap: 1px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 4px;
+}
+
+.bd-tuner-seg-btn {
+  flex: 1;
+  padding: 5px 4px;
+  background: transparent;
+  border: none;
+  color: #888;
+  font-family: inherit;
+  font-size: 10px;
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: background 0.1s, color 0.1s;
+}
+
+.bd-tuner-seg-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: #ccc;
+}
+
+.bd-tuner-seg-btn.active {
+  background: rgba(51, 0, 255, 0.5);
+  color: #fff;
+}
+
+/* ── Text inputs ── */
+
+.bd-tuner-input input[type="text"],
+.bd-tuner-input input[type="number"] {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: #e0e0e0;
+  padding: 4px 8px;
+  font-family: inherit;
+  font-size: 11px;
+  outline: none;
+}
+
+.bd-tuner-input input[type="text"]:focus,
+.bd-tuner-input input[type="number"]:focus {
+  border-color: rgba(51, 0, 255, 0.5);
+}
+
+/* ── Commit button ── */
+
+#bd-tuner-commit {
+  width: 100%;
+  padding: 10px;
+  background: #3300FF;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  margin-top: 8px;
+}
+
+#bd-tuner-commit:hover { background: #4400FF; }
+#bd-tuner-commit:active { background: #2200CC; }
+#bd-tuner-commit.success { background: #0a7; }
+
+/* ── Scrollbar ── */
+
+#bd-tuner::-webkit-scrollbar { width: 4px; }
+#bd-tuner::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}