bluedither 1.0.0

package/dist/bluedither-tuner.js

@@ -0,0 +1,401 @@
+(()=>{var u=structuredClone(window.__BD_TOKENS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-tokens]')?.textContent||"{}")),O=structuredClone(window.__BD_DEFAULTS__||JSON.parse(document.querySelector('script[type="application/json"][data-bluedither-defaults]')?.textContent||"{}")),N=!!(window.__BD_TOKENS__&&window.__BD_DEFAULTS__),$=["Arial","Arial Black","Bebas Neue Pro","Consolas","Courier New","Georgia","Helvetica","Impact","Lucida Console","Segoe UI","Tahoma","Times New Roman","Trebuchet MS","Verdana","SF Pro Display","SF Mono","Cascadia Code","Menlo","Monaco"],H=["Bebas Neue","Space Mono","Inter","Roboto","Roboto Mono","Roboto Condensed","Open Sans","Montserrat","Lato","Oswald","Raleway","Poppins","Nunito","Playfair Display","Merriweather","Source Sans 3","Source Code Pro","PT Sans","PT Serif","PT Mono","Ubuntu","Ubuntu Mono","Fira Sans","Fira Code","Fira Mono","Work Sans","Noto Sans","Noto Serif","DM Sans","DM Serif Display","DM Mono","IBM Plex Sans","IBM Plex Mono","IBM Plex Serif","JetBrains Mono","Inconsolata","Space Grotesk","Archivo","Archivo Black","Barlow","Barlow Condensed","Lexend","Outfit","Sora","Manrope","Bitter","Crimson Text","Libre Baskerville","Abril Fatface","Anton","Permanent Marker","Righteous","Orbitron","Teko","Rubik","Quicksand","Cabin","Karla","Josefin Sans","Comfortaa","Fredoka","Geologica","Instrument Sans","Instrument Serif"],A=[...new Set([...$,...H])].sort();function v(n,t,e){let a=t.split("."),l=n;for(let s=0;s<a.length-1;s++)l=l[a[s]];l[a[a.length-1]]=e}function _(n,t){return t.split(".").reduce((e,a)=>e?.[a],n)}function k(n,t){document.documentElement.style.setProperty(n,t)}function S(n,t){let e=window.__BD_SHADER__;e&&e.updateParams({[n]:t})}function j(n){let t=u.layout.designWidth,e=n/16,a=n/t*100;return`clamp(${(e*.55).toFixed(4)}rem, ${a.toFixed(4)}vw, ${e.toFixed(4)}rem)`}function P(n){let t="bd-gf-"+n.replace(/\s+/g,"-").toLowerCase();if(document.getElementById(t))return;let e=document.createElement("link");e.id=t,e.rel="stylesheet",e.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(n)}:wght@400;700&display=swap`,document.head.appendChild(e)}var x=document.createElement("div");x.id="bd-tuner";var M=document.createElement("button");M.id="bd-tuner-toggle";M.textContent="Tuner";M.onclick=()=>x.classList.remove("collapsed");document.body.appendChild(x);document.body.appendChild(M);x.innerHTML=`
+  <div class="bd-tuner-title">
+    <span>BlueDither Tuner</span>
+    <div style="display:flex;gap:8px;align-items:center;">
+      <button id="bd-tuner-reset" title="Reset to defaults">&#8635;</button>
+      <button id="bd-tuner-close" title="Close">&times;</button>
+    </div>
+  </div>
+`;x.querySelector("#bd-tuner-close").onclick=()=>x.classList.add("collapsed");x.querySelector("#bd-tuner-reset").onclick=()=>{confirm("Reset all tokens to defaults?")&&(Object.assign(u,structuredClone(O)),window.__BD_SERVER_MODE__?fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(u,null,2)}).then(()=>location.reload()):location.reload())};function T(n){let t=document.createElement("div");return t.className="bd-tuner-section",t.innerHTML=`<div class="bd-tuner-section-label">${n}</div>`,x.appendChild(t),t}function C(n,t,e,a,l){let s=_(u,e)||"#000000",r=document.createElement("div");r.className="bd-tuner-row",r.innerHTML=`
+    <span class="bd-tuner-label">${t}</span>
+    <span class="bd-tuner-input"><input type="color" value="${s.substring(0,7)}"></span>
+    <span class="bd-tuner-value">${s.substring(0,7)}</span>
+  `;let i=r.querySelector("input"),d=r.querySelector(".bd-tuner-value");return i.addEventListener("input",c=>{let m=c.target.value;v(u,e,m),d.textContent=m,a&&k(a,m),l&&l(m)}),n.appendChild(r),{setValue(c){v(u,e,c),i.value=c.substring(0,7),d.textContent=c.substring(0,7),a&&k(a,c)}}}function g(n,t,e,a,l,s,r){let i=_(u,e),d=document.createElement("div");d.className="bd-tuner-row bd-tuner-row-stacked",d.innerHTML=`
+    <div class="bd-tuner-row-top">
+      <span class="bd-tuner-label">${t}</span>
+      <div class="bd-tuner-px-input-wrap">
+        <input type="number" class="bd-tuner-px-num" value="${i}" min="${a}" max="${l}" step="${s}">
+        <span class="bd-tuner-unit">px</span>
+      </div>
+    </div>
+    <input type="range" class="bd-tuner-slider" min="${a}" max="${l}" step="${s}" value="${i}">
+  `;let c=d.querySelector(".bd-tuner-px-num"),m=d.querySelector(".bd-tuner-slider");function b(o){if(o=Math.max(a,Math.min(l,o)),v(u,e,o),c.value=o,m.value=o,r){let w=j(o);(Array.isArray(r)?r:[r]).forEach(f=>k(f,w))}}c.addEventListener("input",o=>b(parseFloat(o.target.value)||0)),m.addEventListener("input",o=>b(parseFloat(o.target.value))),c.addEventListener("keydown",o=>{if(o.key==="ArrowUp"||o.key==="ArrowDown"){o.preventDefault();let w=o.shiftKey?10:1,f=(o.key==="ArrowUp"?s:-s)*w;b(parseFloat(c.value)+f)}}),n.appendChild(d)}function F(n,t,e,a,l,s,r){let i=_(u,e),d=document.createElement("div");d.className="bd-tuner-row bd-tuner-row-stacked",d.innerHTML=`
+    <div class="bd-tuner-row-top">
+      <span class="bd-tuner-label">${t}</span>
+      <span class="bd-tuner-value">${i}</span>
+    </div>
+    <input type="range" class="bd-tuner-slider" min="${a}" max="${l}" step="${s}" value="${i}">
+  `;let c=d.querySelector(".bd-tuner-slider"),m=d.querySelector(".bd-tuner-value");c.addEventListener("input",b=>{let o=parseFloat(b.target.value);v(u,e,o),m.textContent=o,r&&r(o)}),n.appendChild(d)}function D(n,t,e,a){let l=_(u,e),s=document.createElement("div");s.className="bd-tuner-row",s.innerHTML=`
+    <span class="bd-tuner-label">${t}</span>
+    <span class="bd-tuner-input bd-tuner-font-input">
+      <input type="text" class="bd-tuner-font-search" value="${l}" placeholder="Search fonts...">
+      <div class="bd-tuner-font-dropdown"></div>
+    </span>
+  `;let r=s.querySelector(".bd-tuner-font-search"),i=s.querySelector(".bd-tuner-font-dropdown"),d=m=>$.some(b=>b.toLowerCase()===m.toLowerCase());function c(m=""){let b=A.filter(o=>o.toLowerCase().includes(m.toLowerCase())).slice(0,20);i.innerHTML=b.map(o=>{let w=d(o)?' <span style="opacity:0.4;font-size:9px">SYSTEM</span>':"";return`<div class="bd-tuner-font-option" data-font="${o}" style="font-family:'${o}',system-ui">${o}${w}</div>`}).join(""),b.filter(o=>!d(o)).forEach(P),i.querySelectorAll(".bd-tuner-font-option").forEach(o=>{o.addEventListener("mousedown",w=>{w.preventDefault();let f=o.dataset.font;r.value=f,v(u,e,f),d(f)||P(f),k(a,`"${f}", system-ui, sans-serif`),i.classList.remove("open")})})}r.addEventListener("focus",()=>{c(r.value),i.classList.add("open")}),r.addEventListener("input",()=>{c(r.value),i.classList.add("open")}),r.addEventListener("blur",()=>{setTimeout(()=>i.classList.remove("open"),150)}),r.addEventListener("keydown",m=>{if(m.key==="Enter"){let b=r.value.trim();b&&(v(u,e,b),d(b)||P(b),k(a,`"${b}", system-ui, sans-serif`),i.classList.remove("open"),r.blur())}}),n.appendChild(s)}function B(n,t,e,a,l){let s=_(u,e),r=document.createElement("div");r.className="bd-tuner-row bd-tuner-row-stacked",r.innerHTML=`
+    <span class="bd-tuner-label">${t}</span>
+    <div class="bd-tuner-segmented">
+      ${a.map(i=>`<button class="bd-tuner-seg-btn${i===s?" active":""}" data-val="${i}">${i}</button>`).join("")}
+    </div>
+  `,r.querySelectorAll(".bd-tuner-seg-btn").forEach(i=>{i.addEventListener("click",()=>{r.querySelectorAll(".bd-tuner-seg-btn").forEach(c=>c.classList.remove("active")),i.classList.add("active");let d=i.dataset.val;v(u,e,d),l&&l(d)})}),n.appendChild(r)}var E=T("Colors");C(E,"Background","colors.background","--bd-color-background");var z;C(E,"Primary","colors.primary","--bd-color-primary",n=>{z.setValue(n),S("colorFront",n)});C(E,"Text","colors.text","--bd-color-text");C(E,"CTA Background","colors.ctaBackground","--bd-color-cta-bg");C(E,"CTA Text","colors.ctaText","--bd-color-cta-text");z=C(E,"Shader Front","colors.shaderFront",null,n=>S("colorFront",n));var y=T("Typography");D(y,"Primary Font","typography.primaryFont","--bd-font-primary");D(y,"Secondary Font","typography.secondaryFont","--bd-font-secondary");g(y,"Headline Size","typography.headline.referencePx",32,300,1,"--bd-headline-size");g(y,"Headline LH","typography.headline.lineHeightPx",24,280,1,"--bd-headline-lh");g(y,"Sub Size","typography.subHeadline.referencePx",10,48,1,"--bd-subheadline-size");g(y,"Sub LH","typography.subHeadline.lineHeightPx",12,80,1,"--bd-subheadline-lh");g(y,"Logo Size","typography.logo.referencePx",12,80,1,"--bd-logo-size");g(y,"Nav Size","typography.navItem.referencePx",10,48,1,"--bd-nav-size");var h=T("Spacing");g(h,"Header Pad X","spacing.headerPaddingX",0,80,1,"--bd-header-px");g(h,"Header Pad Y","spacing.headerPaddingY",0,60,1,"--bd-header-py");g(h,"Hero Pad Top","spacing.heroPaddingTop",0,120,1,"--bd-hero-pt");g(h,"Hero Pad Bottom","spacing.heroPaddingBottom",0,120,1,"--bd-hero-pb");g(h,"Hero Pad X","spacing.heroPaddingX",0,120,1,"--bd-hero-px");g(h,"Nav Gap","spacing.navGap",0,100,1,"--bd-nav-gap");g(h,"CTA Pad X","spacing.ctaPaddingX",0,60,1,"--bd-cta-px");g(h,"CTA Pad Y","spacing.ctaPaddingY",0,30,1,"--bd-cta-py");g(h,"CTA Radius","spacing.ctaBorderRadius",0,32,1,"--bd-cta-radius");var L=T("Shader");B(L,"Shape","shader.shape",["warp","simplex","dots","wave","ripple","swirl","sphere"],n=>S("shape",n));B(L,"Dither Type","shader.type",["random","2x2","4x4","8x8"],n=>S("type",n));F(L,"Speed","shader.speed",0,2,.01,n=>S("speed",n));F(L,"Scale","shader.scale",.1,5,.01,n=>S("scale",n));F(L,"Dither Size","shader.size",.5,10,.1,n=>S("size",n));var q=T("Opacity");F(q,"Nav Links","opacity.navLinks",0,1,.01,n=>k("--bd-nav-opacity",n));var p=document.createElement("button");p.id="bd-tuner-commit";p.textContent="Commit Changes";var I=N?"Commit Changes":"Export Tokens";p.textContent=I;p.onclick=async()=>{p.textContent="Exporting...",p.disabled=!0;try{if(window.__BD_SERVER_MODE__){let t=await(await fetch("/commit",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(u,null,2)})).json();if(!t.ok)throw new Error(t.error);p.textContent="Committed!"}else{let n=new Blob([JSON.stringify(u,null,2)],{type:"application/json"}),t=URL.createObjectURL(n),e=document.createElement("a");e.href=t,e.download="tokens.json",e.click(),URL.revokeObjectURL(t),p.textContent="Downloaded!"}p.classList.add("success"),setTimeout(()=>{p.textContent=window.__BD_SERVER_MODE__?"Commit Changes":"Export Tokens",p.classList.remove("success"),p.disabled=!1},2e3)}catch(n){p.textContent="Error: "+n.message,p.disabled=!1,setTimeout(()=>{p.textContent=window.__BD_SERVER_MODE__?"Commit Changes":"Export Tokens"},3e3)}};window.__BD_SERVER_MODE__||(p.textContent="Export Tokens");x.appendChild(p);var R=document.createElement("style");R.textContent=`/* =============================================
+   BlueDither Fine-Tuner \u2014 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;
+}
+
+/* \u2500\u2500 Row layouts \u2500\u2500 */
+
+.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;
+}
+
+/* \u2500\u2500 Color input \u2500\u2500 */
+
+.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;
+}
+
+/* \u2500\u2500 Slider \u2500\u2500 */
+
+.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;
+}
+
+/* \u2500\u2500 Px input with number + unit \u2500\u2500 */
+
+.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;
+}
+
+/* \u2500\u2500 Font dropdown \u2500\u2500 */
+
+.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;
+}
+
+/* \u2500\u2500 Segmented buttons \u2500\u2500 */
+
+.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;
+}
+
+/* \u2500\u2500 Text inputs \u2500\u2500 */
+
+.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);
+}
+
+/* \u2500\u2500 Commit button \u2500\u2500 */
+
+#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; }
+
+/* \u2500\u2500 Scrollbar \u2500\u2500 */
+
+#bd-tuner::-webkit-scrollbar { width: 4px; }
+#bd-tuner::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+`;document.head.appendChild(R);})();

package/lib/render.js

@@ -0,0 +1,108 @@
+/**
+ * Shared rendering utilities for BlueDither.
+ * Extracted from fine-tuner/server.js for CLI and build reuse.
+ */
+
+/**
+ * Compute a clamp() value from a reference px size.
+ * @param {number} px - Reference pixel value
+ * @param {number} designWidth - Design reference width
+ * @returns {string} CSS clamp() expression
+ */
+export 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)`;
+}
+
+/**
+ * Resolve a dot-path on an object (e.g., "colors.primary").
+ */
+export function resolveTokenPath(obj, path) {
+  return path.split('.').reduce((o, k) => (o && o[k] !== undefined ? o[k] : ''), obj);
+}
+
+/**
+ * Build computed clamp values from tokens.
+ */
+export 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`,
+    },
+  };
+}
+
+/**
+ * Render the template HTML with token values.
+ * @param {string} template - Raw template HTML
+ * @param {object} tokens - Token values
+ * @returns {string} Rendered HTML
+ */
+export function renderTemplate(template, tokens) {
+  const clamp = buildClampValues(tokens);
+  const renderData = { ...tokens, clamp };
+
+  // Handle font URL encoding
+  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
+  );
+
+  return template;
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "bluedither",
+  "version": "1.0.0",
+  "description": "A bold, dithered-shader hero theme for Claude Code — skill + fine-tuner",
+  "type": "module",
+  "bin": {
+    "bluedither": "./cli/bin.js"
+  },
+  "scripts": {
+    "tune": "node fine-tuner/server.js",
+    "tune:port": "node fine-tuner/server.js --port",
+    "build": "node scripts/build.js",
+    "validate": "node scripts/validate-tokens.js"
+  },
+  "files": [
+    "dist/",
+    "theme/",
+    "cli/",
+    "lib/",
+    "skill.md",
+    "bluedither.config.json"
+  ],
+  "keywords": [
+    "claude-code",
+    "theme",
+    "shader",
+    "dithering",
+    "skill",
+    "bluedither"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@paper-design/shaders": "^0.0.71"
+  },
+  "devDependencies": {
+    "ajv": "^8.18.0",
+    "ajv-draft-04": "^1.0.0",
+    "esbuild": "^0.27.3"
+  }
+}

package/skill.md

@@ -0,0 +1,122 @@
+---
+name: bluedither-theme
+description: Generate a bold hero+navbar layout with a dithered shader background. Detects framework, supports greenfield/partial/design-system modes.
+trigger: bluedither-theme
+---
+
+# BlueDither Theme — Skill Instructions
+
+You are generating a layout using the BlueDither theme. This is a **highly opinionated, structurally locked template**. The structure is defined in `theme/structure.json`, design rules in `theme/rules.md`, and tokens in `theme/tokens.json` (validated by `theme/tokens.schema.json`).
+
+## Modes
+
+The skill operates in three modes based on the user's request:
+
+### 1. Greenfield Mode (default)
+Generate the full layout as framework-native components. This is the default when the user says things like "create a landing page", "generate a theme for my surf shop", etc.
+
+### 2. Partial Mode
+Generate only specific components. Triggered when the user says "just the navbar", "only the hero section", "add the header component", etc. Output only the requested components plus the shared CSS file.
+
+### 3. Design-System Mode
+Emit only CSS custom properties and design rules — no components. Triggered when the user says "apply this theme to my site", "just the design tokens", "give me the CSS variables", etc. Output a CSS file with all `--bd-*` custom properties and a reference to `theme/rules.md`.
+
+## Step 1 — Detect Framework
+
+Read the target project's `package.json` to detect the framework:
+
+| Signal | Framework |
+|--------|-----------|
+| `react` or `react-dom` in dependencies | React |
+| `next` in dependencies | React (Next.js) |
+| `vue` in dependencies | Vue |
+| `nuxt` in dependencies | Vue (Nuxt) |
+| `svelte` in dependencies | Svelte |
+| `@sveltejs/kit` in dependencies | Svelte (SvelteKit) |
+| None of the above | Vanilla HTML |
+
+Also detect TypeScript: look for `typescript` in devDependencies or a `tsconfig.json` file.
+
+If no `package.json` exists in the target directory, default to Vanilla HTML.
+
+## Step 2 — Determine Content
+
+From the user's description (e.g., "a fictional surf shop"), infer appropriate values for these **content slots only**:
+
+| Slot | Constraints |
+|------|-------------|
+| `companyName` | Short brand name, ALL CAPS, 1-2 words |
+| `navItems` | Exactly 4 navigation labels, ALL CAPS |
+| `ctaText` | CTA button label, ALL CAPS, 1-2 words |
+| `headline` | Bold headline, ALL CAPS, 2 lines max (~4-6 words), separated by `\n` |
+| `subHeadline` | One sentence, ALL CAPS (CSS handles text-transform) |
+
+## Step 3 — Read Theme Files
+
+Read these files from the BlueDither theme directory:
+1. `theme/tokens.json` — All design tokens. **Do not modify** any non-content tokens.
+2. `theme/structure.json` — Component tree contract. The generated DOM must match this exactly.
+3. `theme/rules.md` — Design language rules. Follow these when making any design decisions.
+
+## Step 4 — Read Generator Instructions
+
+Based on the detected framework, read the corresponding generator file:
+- Vanilla: `theme/generators/vanilla.md`
+- React: `theme/generators/react.md`
+- Vue: `theme/generators/vue.md`
+- Svelte: `theme/generators/svelte.md`
+
+Follow the generator's patterns for component structure, file naming, shader initialization, and TypeScript usage.
+
+## Step 5 — Generate Output
+
+### Greenfield Mode
+1. Update ONLY the `content` object in `tokens.json` with generated values
+2. Generate all component files per the generator instructions
+3. Copy shader files to the target project
+4. Generate the CSS custom properties file with computed `clamp()` values
+
+### Partial Mode
+1. Generate only the requested component(s) per generator instructions
+2. Always include the CSS file (components depend on it)
+3. Include shader files only if the hero component is requested
+
+### Design-System Mode
+1. Generate only `bluedither.css` with all `--bd-*` custom properties
+2. Include a comment header referencing `theme/rules.md` for usage guidance
+3. Do NOT generate any component files
+
+## Step 6 — Inform About Fine-Tuner
+
+Tell the user:
+> Your BlueDither theme has been generated. To customize colors, fonts, spacing, and shader parameters visually, run:
+>
+> ```
+> npm run tune
+> ```
+>
+> Open http://localhost:3333 to see your theme with a floating customization panel.
+
+## CSS Custom Property Computation
+
+All `referencePx` and spacing values must be converted to `clamp()`:
+```
+max = px / 16  (rem)
+vw = px / designWidth * 100
+min = max * 0.55
+→ clamp(min rem, vw vw, max rem)
+```
+
+Border radius converts directly: `px / 16` rem (no clamp).
+
+## Critical Rules
+
+1. **Structure is locked** — the DOM must match `structure.json`. No extra elements.
+2. **Only content slots are editable** — never change colors, typography, spacing, shader, or opacity tokens during generation.
+3. **Two sections only** — navbar + hero. No footers, sidebars, additional sections, icons, or images.
+4. **Framework-native output** — use the framework's idioms (JSX for React, SFCs for Vue, etc.), never output raw HTML for a framework project.
+5. **Shader is required** — the WebGL dithering shader must be initialized in every greenfield and hero-partial output.
+6. **CSS namespace** — all custom properties use `--bd-*` prefix. All classes use `bd-*` prefix.
+7. **Headline is 2 lines max**, ALL CAPS, 4-6 words.
+8. **Exactly 4 nav items.**
+9. **The fine-tuner is the ONLY way to customize visual tokens** after generation.