@webto-id/variant-check 0.1.7 → 0.1.8

package/dist/cli.js

@@ -917,6 +917,95 @@ function escAttr(s) {
 }
 __name(escAttr, "escAttr");
 
+// ../variant-compiler/src/effects.ts
+var WV_EFFECTS = [
+  "reveal-up",
+  "reveal-down",
+  "reveal-left",
+  "reveal-right",
+  "fade",
+  "stagger",
+  "counter",
+  "parallax-soft",
+  "zoom-hover"
+];
+var WV_DELAY_MAX = 10;
+var WV_DURATION_MIN = 100;
+var WV_DURATION_MAX = 5e3;
+var WV_STRENGTHS = ["soft", "medium"];
+var WV_EFFECT_CSS = `@media (prefers-reduced-motion: no-preference){
+.wv-js [data-wv-effect^="reveal-"],.wv-js [data-wv-effect="fade"],.wv-js [data-wv-effect="stagger"]>*{opacity:0;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
+.wv-js [data-wv-effect="reveal-up"]{transform:translateY(22px)}
+.wv-js [data-wv-effect="reveal-down"]{transform:translateY(-22px)}
+.wv-js [data-wv-effect="reveal-left"]{transform:translateX(-22px)}
+.wv-js [data-wv-effect="reveal-right"]{transform:translateX(22px)}
+.wv-js [data-wv-effect="stagger"]>*{transform:translateY(16px)}
+.wv-js [data-wv-effect].wv-in,.wv-js [data-wv-effect="stagger"]>.wv-in{opacity:1;transform:none}
+[data-wv-effect="zoom-hover"] img{transition:transform .5s ease}
+[data-wv-effect="zoom-hover"]:hover img{transform:scale(1.03)}
+[data-wv-effect="parallax-soft"]{will-change:transform}
+}`;
+var WV_EFFECT_JS = `(function(){
+if(!('IntersectionObserver' in window))return;
+var els=document.querySelectorAll('[data-wv-effect]');
+if(!els.length)return;
+if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
+document.documentElement.classList.add('wv-js');
+function num(el,attr,def){var v=parseInt(el.getAttribute(attr)||'',10);return isFinite(v)?v:def;}
+function timing(el){
+  var d=num(el,'data-wv-delay',0);if(d>0)el.style.transitionDelay=(d*100)+'ms';
+  var ms=num(el,'data-wv-duration',0);if(ms>=100)el.style.transitionDuration=ms+'ms';
+}
+function counter(el){
+  var txt=el.textContent||'';var m=txt.match(/-?\\d[\\d.,]*/);if(!m)return;
+  var target=parseFloat(m[0].replace(/[.,](?=\\d{3}(\\D|$))/g,''));if(!isFinite(target))return;
+  var pre=txt.slice(0,m.index),post=txt.slice(m.index+m[0].length);
+  var dur=Math.min(Math.max(num(el,'data-wv-duration',1200),100),5000),t0=null;
+  function tick(t){
+    if(t0===null)t0=t;
+    var p=Math.min((t-t0)/dur,1),eased=1-Math.pow(1-p,3);
+    el.textContent=pre+Math.round(target*eased)+post;
+    if(p<1)requestAnimationFrame(tick);else el.textContent=txt;
+  }
+  requestAnimationFrame(tick);
+}
+var para=[];
+function onScroll(){
+  for(var i=0;i<para.length;i++){
+    var el=para[i],r=el.getBoundingClientRect();
+    var vh=window.innerHeight||1;
+    var f=el.getAttribute('data-wv-strength')==='medium'?0.1:0.06;
+    var y=((r.top+r.height/2)-vh/2)*-f;
+    if(y>48)y=48;if(y<-48)y=-48;
+    el.style.transform='translateY('+y.toFixed(1)+'px)';
+  }
+}
+var ticking=false;
+function onScrollRaf(){if(ticking)return;ticking=true;requestAnimationFrame(function(){ticking=false;onScroll();});}
+var io=new IntersectionObserver(function(entries){
+  for(var i=0;i<entries.length;i++){
+    var en=entries[i];if(!en.isIntersecting)continue;
+    var el=en.target;io.unobserve(el);
+    var fx=el.getAttribute('data-wv-effect');
+    if(fx==='counter'){counter(el);continue;}
+    if(fx==='stagger'){
+      var step=Math.max(num(el,'data-wv-delay',1),1)*100,kids=el.children;
+      for(var k=0;k<kids.length;k++){kids[k].style.transitionDelay=(k*step)+'ms';kids[k].classList.add('wv-in');}
+      continue;
+    }
+    el.classList.add('wv-in');
+  }
+},{threshold:0.15,rootMargin:'0px 0px -5% 0px'});
+for(var i=0;i<els.length;i++){
+  var el=els[i],fx=el.getAttribute('data-wv-effect');
+  if(fx==='zoom-hover')continue;
+  if(fx==='parallax-soft'){para.push(el);continue;}
+  timing(el);
+  io.observe(el);
+}
+if(para.length){window.addEventListener('scroll',onScrollRaf,{passive:true});window.addEventListener('resize',onScrollRaf,{passive:true});onScroll();}
+})();`;
+
 // ../variant-compiler/src/lint/html.ts
 var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "a",
@@ -1169,12 +1258,39 @@ function lintNodes(nodes, ctx, ariaHidden = false) {
       }
     }
     if ("id" in n.attrs) push(ctx, "warning", "id-attr", `<${tag} id> \u2014 the editor's click walker stops at ids; prefer a data-* attribute`);
+    lintEffectAttrs(n.attrs, tag, ctx);
     if (tag === "svg") ctx.inSvg++;
     lintNodes(n.ch, ctx, hidden);
     if (tag === "svg") ctx.inSvg--;
   }
 }
 __name(lintNodes, "lintNodes");
+function lintEffectAttrs(attrs, tag, ctx) {
+  const fx = "data-wv-effect" in attrs ? staticValue(attrs["data-wv-effect"]) : void 0;
+  if ("data-wv-effect" in attrs) {
+    if (fx !== null && fx !== void 0 && !WV_EFFECTS.includes(fx)) {
+      push(ctx, "error", "effect-unknown", `data-wv-effect="${fx}" is not a platform effect \u2014 one of: ${WV_EFFECTS.join(", ")}`);
+    }
+    if ("data-edit-field" in attrs || "data-edit-image" in attrs) {
+      push(ctx, "warning", "effect-on-editable", `data-wv-effect on an editable element (<${tag}>) can interfere with inline editing \u2014 prefer the effect on a wrapper`);
+    }
+  } else if ("data-wv-delay" in attrs || "data-wv-duration" in attrs || "data-wv-strength" in attrs) {
+    push(ctx, "error", "effect-param", `data-wv-delay/duration/strength on <${tag}> without data-wv-effect does nothing`);
+  }
+  const delay = staticValue(attrs["data-wv-delay"]);
+  if (delay !== null && delay !== void 0 && !(/^\d+$/.test(delay) && Number(delay) <= WV_DELAY_MAX)) {
+    push(ctx, "error", "effect-param", `data-wv-delay="${delay}" \u2014 whole steps of 100ms, 0..${WV_DELAY_MAX}`);
+  }
+  const dur = staticValue(attrs["data-wv-duration"]);
+  if (dur !== null && dur !== void 0 && !(/^\d+$/.test(dur) && Number(dur) >= WV_DURATION_MIN && Number(dur) <= WV_DURATION_MAX)) {
+    push(ctx, "error", "effect-param", `data-wv-duration="${dur}" \u2014 milliseconds, ${WV_DURATION_MIN}..${WV_DURATION_MAX}`);
+  }
+  const strength = staticValue(attrs["data-wv-strength"]);
+  if (strength !== null && strength !== void 0 && !WV_STRENGTHS.includes(strength)) {
+    push(ctx, "error", "effect-param", `data-wv-strength="${strength}" \u2014 one of: ${WV_STRENGTHS.join(", ")}`);
+  }
+}
+__name(lintEffectAttrs, "lintEffectAttrs");
 function lintAttr(name, v, tag, ctx) {
   const lower = name.toLowerCase();
   if (/^on[a-z]/.test(lower)) {
@@ -2542,25 +2658,49 @@ __name(wrapScript, "wrapScript");
 
 // ../variant-compiler/src/preview.ts
 var PREVIEW_THEMES = {
-  light: { background: "#ffffff", foreground: "#0f172a", card: "#f8fafc", muted: "#f1f5f9", mutedFg: "#64748b", border: "#e2e8f0", primary: "#3b82f6", primaryFg: "#ffffff", secondary: "#6366f1", accent: "#f59e0b", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "8px" },
-  dark: { background: "#0b1220", foreground: "#e5e7eb", card: "#111a2e", muted: "#16213a", mutedFg: "#9aa4b8", border: "#243049", primary: "#60a5fa", primaryFg: "#0b1220", secondary: "#a78bfa", accent: "#fbbf24", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "12px" },
-  warm: { background: "#fbf6ef", foreground: "#2b1d12", card: "#f4ebdf", muted: "#efe3d2", mutedFg: "#7a6652", border: "#e2d3bf", primary: "#b5562d", primaryFg: "#ffffff", secondary: "#7c4a2d", accent: "#d99a3f", heading: "Georgia, serif", body: "Inter, sans-serif", radius: "2px" }
+  light: { background: "#ffffff", foreground: "#0f172a", card: "#f8fafc", muted: "#f1f5f9", mutedFg: "#64748b", border: "#e2e8f0", primary: "#3b82f6", primaryFg: "#ffffff", secondary: "#6366f1", secondaryFg: "#ffffff", accent: "#e8eefb", accentFg: "#1e293b", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "8px" },
+  dark: { background: "#0b1220", foreground: "#e5e7eb", card: "#111a2e", muted: "#16213a", mutedFg: "#9aa4b8", border: "#243049", primary: "#60a5fa", primaryFg: "#0b1220", secondary: "#a78bfa", secondaryFg: "#0b1220", accent: "#1d2a47", accentFg: "#e5e7eb", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "12px" },
+  warm: { background: "#fbf6ef", foreground: "#2b1d12", card: "#f4ebdf", muted: "#efe3d2", mutedFg: "#7a6652", border: "#e2d3bf", primary: "#b5562d", primaryFg: "#ffffff", secondary: "#7c4a2d", secondaryFg: "#ffffff", accent: "#f1dfc0", accentFg: "#2b1d12", heading: "Georgia, serif", body: "Inter, sans-serif", radius: "2px" }
 };
 function isPreviewThemeKey(v) {
   return typeof v === "string" && v in PREVIEW_THEMES;
 }
 __name(isPreviewThemeKey, "isPreviewThemeKey");
 function buildPreviewDoc(ir, content, themeKey, opts = {}) {
-  const th = PREVIEW_THEMES[themeKey];
+  const base2 = PREVIEW_THEMES[themeKey];
+  const o = opts.themeOverride ?? {};
+  const th = {
+    background: o.background ?? base2.background,
+    foreground: o.foreground ?? base2.foreground,
+    card: o.card ?? base2.card,
+    muted: o.muted ?? base2.muted,
+    mutedFg: o.mutedFg ?? base2.mutedFg,
+    border: o.border ?? base2.border,
+    primary: o.primary ?? base2.primary,
+    primaryFg: o.primaryFg ?? base2.primaryFg,
+    secondary: o.secondary ?? base2.secondary,
+    secondaryFg: o.secondaryFg ?? base2.secondaryFg,
+    accent: o.accent ?? base2.accent,
+    accentFg: o.accentFg ?? base2.accentFg,
+    heading: o.heading ?? base2.heading,
+    body: o.body ?? base2.body,
+    radius: o.radius ?? base2.radius
+  };
+  const headingSize = o.headingSize ?? "48px";
+  const bodySize = o.bodySize ?? "16px";
+  const gradientFrom = o.gradientFrom ?? th.primary;
+  const gradientTo = o.gradientTo ?? th.secondary;
+  const isDark = o.dark ?? themeKey === "dark";
+  const fontLinks = (o.fontLinks ?? []).filter((h) => /^https:\/\/fonts\.googleapis\.com\//.test(h)).map((h) => `<link rel="stylesheet" href="${h.replace(/"/g, "&quot;")}">`).join("");
   const out = renderVariant(ir, content, { t: /* @__PURE__ */ __name((k) => k, "t"), editChrome: opts.editChrome ?? false }, { uid: "wv-preview" });
-  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:#fff;--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:#000;--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${th.primary};--gradient-to:${th.secondary};--spacing:.25rem;--site-max-width:72rem;--font-heading-size:48px;--font-body-size:16px;`;
+  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:${th.secondaryFg};--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:${th.accentFg};--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${gradientFrom};--gradient-to:${gradientTo};--spacing:.25rem;--site-max-width:72rem;--font-heading-size:${headingSize};--font-body-size:${bodySize};`;
   const tokens = `--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);`;
-  return `<!doctype html><html data-theme="${themeKey === "dark" ? "dark" : "light"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">
+  return `<!doctype html><html data-theme="${isDark ? "dark" : "light"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">${fontLinks}
 <style>@layer wvfbase{*,::before,::after{box-sizing:border-box;border:0 solid var(--color-border)}html{font-size:var(--font-body-size,16px);-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);color:var(--foreground);background:var(--background);line-height:1.5}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}h1,h2,h3,h4,p{margin:0}img,video,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:inherit}button{font:inherit;color:inherit;background:none}ul,ol{margin:0;padding:0;list-style:none}}
 :root{${vars}${tokens}}
 h1{font-size:var(--font-heading-size,48px)}h2{font-size:calc(var(--font-heading-size,48px) * 0.75)}h3{font-size:calc(var(--font-heading-size,48px) * 0.6)}h4{font-size:calc(var(--font-heading-size,48px) * 0.5)}
 .edit-url-pill{display:none!important}</style>
-<style>${out.css}</style></head><body><div data-wv-root data-wv-inst="${out.uid}">${out.html}</div>${out.script ? `<script>${out.script}</script>` : ""}</body></html>`;
+<style>${out.css}</style></head><body><div data-wv-root data-wv-inst="${out.uid}">${out.html}</div>${out.script ? `<script>${out.script}</script>` : ""}<style>${WV_EFFECT_CSS}</style><script>${WV_EFFECT_JS}</script></body></html>`;
 }
 __name(buildPreviewDoc, "buildPreviewDoc");
 

package/dist/index.js

@@ -914,6 +914,95 @@ function escAttr(s) {
 }
 __name(escAttr, "escAttr");
 
+// ../variant-compiler/src/effects.ts
+var WV_EFFECTS = [
+  "reveal-up",
+  "reveal-down",
+  "reveal-left",
+  "reveal-right",
+  "fade",
+  "stagger",
+  "counter",
+  "parallax-soft",
+  "zoom-hover"
+];
+var WV_DELAY_MAX = 10;
+var WV_DURATION_MIN = 100;
+var WV_DURATION_MAX = 5e3;
+var WV_STRENGTHS = ["soft", "medium"];
+var WV_EFFECT_CSS = `@media (prefers-reduced-motion: no-preference){
+.wv-js [data-wv-effect^="reveal-"],.wv-js [data-wv-effect="fade"],.wv-js [data-wv-effect="stagger"]>*{opacity:0;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
+.wv-js [data-wv-effect="reveal-up"]{transform:translateY(22px)}
+.wv-js [data-wv-effect="reveal-down"]{transform:translateY(-22px)}
+.wv-js [data-wv-effect="reveal-left"]{transform:translateX(-22px)}
+.wv-js [data-wv-effect="reveal-right"]{transform:translateX(22px)}
+.wv-js [data-wv-effect="stagger"]>*{transform:translateY(16px)}
+.wv-js [data-wv-effect].wv-in,.wv-js [data-wv-effect="stagger"]>.wv-in{opacity:1;transform:none}
+[data-wv-effect="zoom-hover"] img{transition:transform .5s ease}
+[data-wv-effect="zoom-hover"]:hover img{transform:scale(1.03)}
+[data-wv-effect="parallax-soft"]{will-change:transform}
+}`;
+var WV_EFFECT_JS = `(function(){
+if(!('IntersectionObserver' in window))return;
+var els=document.querySelectorAll('[data-wv-effect]');
+if(!els.length)return;
+if(window.matchMedia('(prefers-reduced-motion: reduce)').matches)return;
+document.documentElement.classList.add('wv-js');
+function num(el,attr,def){var v=parseInt(el.getAttribute(attr)||'',10);return isFinite(v)?v:def;}
+function timing(el){
+  var d=num(el,'data-wv-delay',0);if(d>0)el.style.transitionDelay=(d*100)+'ms';
+  var ms=num(el,'data-wv-duration',0);if(ms>=100)el.style.transitionDuration=ms+'ms';
+}
+function counter(el){
+  var txt=el.textContent||'';var m=txt.match(/-?\\d[\\d.,]*/);if(!m)return;
+  var target=parseFloat(m[0].replace(/[.,](?=\\d{3}(\\D|$))/g,''));if(!isFinite(target))return;
+  var pre=txt.slice(0,m.index),post=txt.slice(m.index+m[0].length);
+  var dur=Math.min(Math.max(num(el,'data-wv-duration',1200),100),5000),t0=null;
+  function tick(t){
+    if(t0===null)t0=t;
+    var p=Math.min((t-t0)/dur,1),eased=1-Math.pow(1-p,3);
+    el.textContent=pre+Math.round(target*eased)+post;
+    if(p<1)requestAnimationFrame(tick);else el.textContent=txt;
+  }
+  requestAnimationFrame(tick);
+}
+var para=[];
+function onScroll(){
+  for(var i=0;i<para.length;i++){
+    var el=para[i],r=el.getBoundingClientRect();
+    var vh=window.innerHeight||1;
+    var f=el.getAttribute('data-wv-strength')==='medium'?0.1:0.06;
+    var y=((r.top+r.height/2)-vh/2)*-f;
+    if(y>48)y=48;if(y<-48)y=-48;
+    el.style.transform='translateY('+y.toFixed(1)+'px)';
+  }
+}
+var ticking=false;
+function onScrollRaf(){if(ticking)return;ticking=true;requestAnimationFrame(function(){ticking=false;onScroll();});}
+var io=new IntersectionObserver(function(entries){
+  for(var i=0;i<entries.length;i++){
+    var en=entries[i];if(!en.isIntersecting)continue;
+    var el=en.target;io.unobserve(el);
+    var fx=el.getAttribute('data-wv-effect');
+    if(fx==='counter'){counter(el);continue;}
+    if(fx==='stagger'){
+      var step=Math.max(num(el,'data-wv-delay',1),1)*100,kids=el.children;
+      for(var k=0;k<kids.length;k++){kids[k].style.transitionDelay=(k*step)+'ms';kids[k].classList.add('wv-in');}
+      continue;
+    }
+    el.classList.add('wv-in');
+  }
+},{threshold:0.15,rootMargin:'0px 0px -5% 0px'});
+for(var i=0;i<els.length;i++){
+  var el=els[i],fx=el.getAttribute('data-wv-effect');
+  if(fx==='zoom-hover')continue;
+  if(fx==='parallax-soft'){para.push(el);continue;}
+  timing(el);
+  io.observe(el);
+}
+if(para.length){window.addEventListener('scroll',onScrollRaf,{passive:true});window.addEventListener('resize',onScrollRaf,{passive:true});onScroll();}
+})();`;
+
 // ../variant-compiler/src/lint/html.ts
 var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "a",
@@ -1166,12 +1255,39 @@ function lintNodes(nodes, ctx, ariaHidden = false) {
       }
     }
     if ("id" in n.attrs) push(ctx, "warning", "id-attr", `<${tag} id> \u2014 the editor's click walker stops at ids; prefer a data-* attribute`);
+    lintEffectAttrs(n.attrs, tag, ctx);
     if (tag === "svg") ctx.inSvg++;
     lintNodes(n.ch, ctx, hidden);
     if (tag === "svg") ctx.inSvg--;
   }
 }
 __name(lintNodes, "lintNodes");
+function lintEffectAttrs(attrs, tag, ctx) {
+  const fx = "data-wv-effect" in attrs ? staticValue(attrs["data-wv-effect"]) : void 0;
+  if ("data-wv-effect" in attrs) {
+    if (fx !== null && fx !== void 0 && !WV_EFFECTS.includes(fx)) {
+      push(ctx, "error", "effect-unknown", `data-wv-effect="${fx}" is not a platform effect \u2014 one of: ${WV_EFFECTS.join(", ")}`);
+    }
+    if ("data-edit-field" in attrs || "data-edit-image" in attrs) {
+      push(ctx, "warning", "effect-on-editable", `data-wv-effect on an editable element (<${tag}>) can interfere with inline editing \u2014 prefer the effect on a wrapper`);
+    }
+  } else if ("data-wv-delay" in attrs || "data-wv-duration" in attrs || "data-wv-strength" in attrs) {
+    push(ctx, "error", "effect-param", `data-wv-delay/duration/strength on <${tag}> without data-wv-effect does nothing`);
+  }
+  const delay = staticValue(attrs["data-wv-delay"]);
+  if (delay !== null && delay !== void 0 && !(/^\d+$/.test(delay) && Number(delay) <= WV_DELAY_MAX)) {
+    push(ctx, "error", "effect-param", `data-wv-delay="${delay}" \u2014 whole steps of 100ms, 0..${WV_DELAY_MAX}`);
+  }
+  const dur = staticValue(attrs["data-wv-duration"]);
+  if (dur !== null && dur !== void 0 && !(/^\d+$/.test(dur) && Number(dur) >= WV_DURATION_MIN && Number(dur) <= WV_DURATION_MAX)) {
+    push(ctx, "error", "effect-param", `data-wv-duration="${dur}" \u2014 milliseconds, ${WV_DURATION_MIN}..${WV_DURATION_MAX}`);
+  }
+  const strength = staticValue(attrs["data-wv-strength"]);
+  if (strength !== null && strength !== void 0 && !WV_STRENGTHS.includes(strength)) {
+    push(ctx, "error", "effect-param", `data-wv-strength="${strength}" \u2014 one of: ${WV_STRENGTHS.join(", ")}`);
+  }
+}
+__name(lintEffectAttrs, "lintEffectAttrs");
 function lintAttr(name, v, tag, ctx) {
   const lower = name.toLowerCase();
   if (/^on[a-z]/.test(lower)) {
@@ -2539,25 +2655,49 @@ __name(wrapScript, "wrapScript");
 
 // ../variant-compiler/src/preview.ts
 var PREVIEW_THEMES = {
-  light: { background: "#ffffff", foreground: "#0f172a", card: "#f8fafc", muted: "#f1f5f9", mutedFg: "#64748b", border: "#e2e8f0", primary: "#3b82f6", primaryFg: "#ffffff", secondary: "#6366f1", accent: "#f59e0b", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "8px" },
-  dark: { background: "#0b1220", foreground: "#e5e7eb", card: "#111a2e", muted: "#16213a", mutedFg: "#9aa4b8", border: "#243049", primary: "#60a5fa", primaryFg: "#0b1220", secondary: "#a78bfa", accent: "#fbbf24", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "12px" },
-  warm: { background: "#fbf6ef", foreground: "#2b1d12", card: "#f4ebdf", muted: "#efe3d2", mutedFg: "#7a6652", border: "#e2d3bf", primary: "#b5562d", primaryFg: "#ffffff", secondary: "#7c4a2d", accent: "#d99a3f", heading: "Georgia, serif", body: "Inter, sans-serif", radius: "2px" }
+  light: { background: "#ffffff", foreground: "#0f172a", card: "#f8fafc", muted: "#f1f5f9", mutedFg: "#64748b", border: "#e2e8f0", primary: "#3b82f6", primaryFg: "#ffffff", secondary: "#6366f1", secondaryFg: "#ffffff", accent: "#e8eefb", accentFg: "#1e293b", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "8px" },
+  dark: { background: "#0b1220", foreground: "#e5e7eb", card: "#111a2e", muted: "#16213a", mutedFg: "#9aa4b8", border: "#243049", primary: "#60a5fa", primaryFg: "#0b1220", secondary: "#a78bfa", secondaryFg: "#0b1220", accent: "#1d2a47", accentFg: "#e5e7eb", heading: "Inter, sans-serif", body: "Inter, sans-serif", radius: "12px" },
+  warm: { background: "#fbf6ef", foreground: "#2b1d12", card: "#f4ebdf", muted: "#efe3d2", mutedFg: "#7a6652", border: "#e2d3bf", primary: "#b5562d", primaryFg: "#ffffff", secondary: "#7c4a2d", secondaryFg: "#ffffff", accent: "#f1dfc0", accentFg: "#2b1d12", heading: "Georgia, serif", body: "Inter, sans-serif", radius: "2px" }
 };
 function isPreviewThemeKey(v) {
   return typeof v === "string" && v in PREVIEW_THEMES;
 }
 __name(isPreviewThemeKey, "isPreviewThemeKey");
 function buildPreviewDoc(ir, content, themeKey, opts = {}) {
-  const th = PREVIEW_THEMES[themeKey];
+  const base = PREVIEW_THEMES[themeKey];
+  const o = opts.themeOverride ?? {};
+  const th = {
+    background: o.background ?? base.background,
+    foreground: o.foreground ?? base.foreground,
+    card: o.card ?? base.card,
+    muted: o.muted ?? base.muted,
+    mutedFg: o.mutedFg ?? base.mutedFg,
+    border: o.border ?? base.border,
+    primary: o.primary ?? base.primary,
+    primaryFg: o.primaryFg ?? base.primaryFg,
+    secondary: o.secondary ?? base.secondary,
+    secondaryFg: o.secondaryFg ?? base.secondaryFg,
+    accent: o.accent ?? base.accent,
+    accentFg: o.accentFg ?? base.accentFg,
+    heading: o.heading ?? base.heading,
+    body: o.body ?? base.body,
+    radius: o.radius ?? base.radius
+  };
+  const headingSize = o.headingSize ?? "48px";
+  const bodySize = o.bodySize ?? "16px";
+  const gradientFrom = o.gradientFrom ?? th.primary;
+  const gradientTo = o.gradientTo ?? th.secondary;
+  const isDark = o.dark ?? themeKey === "dark";
+  const fontLinks = (o.fontLinks ?? []).filter((h) => /^https:\/\/fonts\.googleapis\.com\//.test(h)).map((h) => `<link rel="stylesheet" href="${h.replace(/"/g, "&quot;")}">`).join("");
   const out = renderVariant(ir, content, { t: /* @__PURE__ */ __name((k) => k, "t"), editChrome: opts.editChrome ?? false }, { uid: "wv-preview" });
-  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:#fff;--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:#000;--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${th.primary};--gradient-to:${th.secondary};--spacing:.25rem;--site-max-width:72rem;--font-heading-size:48px;--font-body-size:16px;`;
+  const vars = `--background:${th.background};--foreground:${th.foreground};--card:${th.card};--card-foreground:${th.foreground};--primary:${th.primary};--primary-foreground:${th.primaryFg};--secondary:${th.secondary};--secondary-foreground:${th.secondaryFg};--muted:${th.muted};--muted-foreground:${th.mutedFg};--accent:${th.accent};--accent-foreground:${th.accentFg};--border:${th.border};--input:${th.border};--ring:${th.primary};--radius:${th.radius};--font-heading:${th.heading};--font-body:${th.body};--gradient-from:${gradientFrom};--gradient-to:${gradientTo};--spacing:.25rem;--site-max-width:72rem;--font-heading-size:${headingSize};--font-body-size:${bodySize};`;
   const tokens = `--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted:var(--muted);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-border:var(--border);--color-input:var(--input);--color-ring:var(--ring);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);`;
-  return `<!doctype html><html data-theme="${themeKey === "dark" ? "dark" : "light"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">
+  return `<!doctype html><html data-theme="${isDark ? "dark" : "light"}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex">${fontLinks}
 <style>@layer wvfbase{*,::before,::after{box-sizing:border-box;border:0 solid var(--color-border)}html{font-size:var(--font-body-size,16px);-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);color:var(--foreground);background:var(--background);line-height:1.5}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}h1,h2,h3,h4,p{margin:0}img,video,svg{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:inherit}button{font:inherit;color:inherit;background:none}ul,ol{margin:0;padding:0;list-style:none}}
 :root{${vars}${tokens}}
 h1{font-size:var(--font-heading-size,48px)}h2{font-size:calc(var(--font-heading-size,48px) * 0.75)}h3{font-size:calc(var(--font-heading-size,48px) * 0.6)}h4{font-size:calc(var(--font-heading-size,48px) * 0.5)}
 .edit-url-pill{display:none!important}</style>
-<style>${out.css}</style></head><body><div data-wv-root data-wv-inst="${out.uid}">${out.html}</div>${out.script ? `<script>${out.script}</script>` : ""}</body></html>`;
+<style>${out.css}</style></head><body><div data-wv-root data-wv-inst="${out.uid}">${out.html}</div>${out.script ? `<script>${out.script}</script>` : ""}<style>${WV_EFFECT_CSS}</style><script>${WV_EFFECT_JS}</script></body></html>`;
 }
 __name(buildPreviewDoc, "buildPreviewDoc");
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webto-id/variant-check",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Lint, compile and preview a Webto Variant Format (.astro subset) section variant with the exact compiler the webto.id marketplace uses.",
   "license": "MIT",
   "type": "module",