@webto-id/variant-check 0.1.6 → 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)) {
@@ -1198,7 +1314,7 @@ function lintAttr(name, v, tag, ctx) {
     const s = staticValue(v);
     if (s !== null) {
       if (/url\s*\(|expression\s*\(|@import|behavior\s*:/i.test(s)) push(ctx, "error", "style-url", `inline style on <${tag}> must not use url()/expression()`);
-      if (/position\s*:\s*fixed/i.test(s) && ctx.sectionType !== "navbar" && ctx.sectionType !== "banner") push(ctx, "error", "fixed", `position: fixed is only allowed in navbar/banner variants`);
+      if (/position\s*:\s*fixed/i.test(s)) push(ctx, "error", "fixed", `position: fixed is not allowed \u2014 the platform makes the section wrapper sticky (navbar) instead; keep the root in normal flow`);
       if (/#[0-9a-f]{3,8}\b/i.test(s) || /\b(rgb|hsl)a?\(/i.test(s)) push(ctx, "warning", "hardcoded-color", `inline style on <${tag}> hardcodes a color \u2014 use var(--color-*)`);
       if (/border-radius\s*:\s*\d/i.test(s)) push(ctx, "warning", "hardcoded-radius", `inline style on <${tag}> hardcodes border-radius \u2014 use var(--radius)`);
       if (/font-family\s*:(?![^;]*var\(--font-)/i.test(s)) push(ctx, "warning", "hardcoded-font", `inline style on <${tag}> hardcodes font-family \u2014 use var(--font-heading|--font-body)`);
@@ -1225,7 +1341,7 @@ __name(lintHtml, "lintHtml");
 
 // ../variant-compiler/src/lint/css.ts
 var ALLOWED_URL_HOSTS = ["images.unsplash.com", "images.pexels.com"];
-function lintCss(css, sectionType2, attrs = {}) {
+function lintCss(css, _sectionType, attrs = {}) {
   const out = [];
   const err = /* @__PURE__ */ __name((code, message) => out.push({ level: "error", code, message }), "err");
   const warn = /* @__PURE__ */ __name((code, message) => out.push({ level: "warning", code, message }), "warn");
@@ -1238,7 +1354,7 @@ function lintCss(css, sectionType2, attrs = {}) {
   if (/@font-face\b/i.test(stripped)) err("css-font-face", "@font-face is not allowed \u2014 fonts come from the site theme (var(--font-heading|--font-body))");
   if (/expression\s*\(/i.test(stripped)) err("css-expression", "expression() is not allowed");
   if (/behavior\s*:|-moz-binding\s*:/i.test(stripped)) err("css-behavior", "behavior/-moz-binding are not allowed");
-  if (/\bposition\s*:\s*fixed\b/i.test(stripped) && sectionType2 !== "navbar" && sectionType2 !== "banner") err("fixed", "position: fixed is only allowed in navbar/banner variants");
+  if (/\bposition\s*:\s*fixed\b/i.test(stripped)) err("fixed", "position: fixed is not allowed \u2014 the platform makes the section wrapper sticky (navbar) instead; keep the root in normal flow");
   for (const m of stripped.matchAll(/url\s*\(\s*(['"]?)([^'")]+)\1\s*\)/gi)) {
     const u = m[2].trim();
     if (/^data:image\/svg\+xml/i.test(u)) continue;
@@ -1739,6 +1855,19 @@ async function compileTailwind(candidates) {
 __name(compileTailwind, "compileTailwind");
 
 // ../variant-compiler/src/schema.ts
+var CHROME_CONTEXT_PROPS = /* @__PURE__ */ new Set([
+  "pages",
+  "currentSlug",
+  "linkPrefix",
+  "colorMode",
+  "footerPages",
+  "imageCredits"
+]);
+var CHROME_SECTION_TYPES = /* @__PURE__ */ new Set(["navbar", "banner", "footer"]);
+var NEVER_HIDDEN = {
+  products: ["source"],
+  blog: ["source"]
+};
 function typeOf(s) {
   if (!s) return "unknown";
   const t = s.type;
@@ -1751,13 +1880,16 @@ function typeOf(s) {
   return "unknown";
 }
 __name(typeOf, "typeOf");
-function deriveSchema(fields, props, base2) {
+function deriveSchema(fields, props, base2, sectionType2) {
   const lint = [];
+  const isChrome = sectionType2 !== void 0 && CHROME_SECTION_TYPES.has(sectionType2);
+  const isContextProp = /* @__PURE__ */ __name((key) => isChrome && CHROME_CONTEXT_PROPS.has(key), "isContextProp");
   const readKeys = new Set(props.map((p) => p.key));
   const declared = new Map(fields.map((f) => [f.key, f]));
   const extProps = {};
   const usedFields = [];
   for (const f of fields) {
+    if (isContextProp(f.key)) continue;
     if (!f.optional) lint.push({ level: "warning", code: "props-optional", message: `prop '${f.key}' should be optional (\`${f.key}?:\`) \u2014 content may omit it` });
     const baseField = base2?.properties[f.key];
     if (baseField) {
@@ -1770,11 +1902,13 @@ function deriveSchema(fields, props, base2) {
     extProps[f.key] = { ...f.schema, ...f.description ? { description: f.description } : {} };
   }
   for (const k of readKeys) {
+    if (isContextProp(k)) continue;
     if (!declared.has(k)) lint.push({ level: "warning", code: "props-undeclared", message: `'${k}' is read from Astro.props but not declared in interface Props` });
     else if (!base2?.properties[k] && !(k in extProps)) extProps[k] = { type: "string" };
     if (base2?.properties[k] && !usedFields.includes(k)) usedFields.push(k);
   }
-  const hiddenFields = base2 ? Object.keys(base2.properties).filter((k) => !usedFields.includes(k)) : [];
+  const keepVisible = new Set(sectionType2 !== void 0 ? NEVER_HIDDEN[sectionType2] ?? [] : []);
+  const hiddenFields = base2 ? Object.keys(base2.properties).filter((k) => !usedFields.includes(k) && !keepVisible.has(k)) : [];
   const extension = { type: "object", properties: extProps, additionalProperties: true };
   return { extension, hiddenFields, usedFields, lint };
 }
@@ -1904,7 +2038,7 @@ async function compile2(source2, opts) {
     lint.push({ level: "error", code: "css-parse", message: `could not scope CSS: ${e.message}` });
   }
   if (css.length > CSS_MAX_BYTES) lint.push({ level: "error", code: "css-size", message: `compiled CSS exceeds ${CSS_MAX_BYTES / 1024} KB` });
-  const sch = deriveSchema(front.fields, front.props, opts.base ?? null);
+  const sch = deriveSchema(front.fields, front.props, opts.base ?? null, opts.sectionType);
   lint.push(...sch.lint);
   if (opts.strict) {
     for (const m of lint) if (m.level === "warning" && STRICT_CODES.has(m.code)) m.level = "error";
@@ -2470,7 +2604,12 @@ function renderVariant(ir, content, ctx, opts = {}) {
   }
   for (const c of ir.consts) scope[c.name] = evalExpr(c.e, scope, budget);
   const rctx = { ...ctx, marks: { addImageButton: false } };
-  const html = withAddImageFallback(renderNodes(ir.root, scope, rctx, budget), content, rctx);
+  const isDbMode = (ir.sectionType === "products" || ir.sectionType === "blog") && content.source === "database";
+  let rendered = renderNodes(ir.root, scope, rctx, budget);
+  if (isDbMode) {
+    rendered = rendered.replace(/<div class="webto-add-row[^"]*">\s*<button[^>]*data-edit-add-image="(?:products|posts)\.[^"]*"[\s\S]*?<\/button>\s*<\/div>/g, "").replace(/<button[^>]*data-edit-add-image="(?:products|posts)\.[^"]*"[\s\S]*?<\/button>/g, "").replace(/\s(?:data-edit-(?:field|image|add-image))="(?:products|posts)\.[^"]*"/g, "");
+  }
+  const html = withAddImageFallback(rendered, content, rctx);
   const css = ir.css ? layerize(ir.css.replace(/__WV_ROOT__/g, `[data-wv-inst="${uid}"]`)) : "";
   const script = ir.script ? wrapScript(ir.script, uid) : "";
   return { html, css, script, uid };
@@ -2519,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");
 
@@ -3729,6 +3892,114 @@ var base_schemas_default = {
         type: "string"
       }
     }
+  },
+  navbar: {
+    properties: {
+      siteName: {
+        description: "Nama yang ditampilkan di navigasi",
+        type: "string"
+      },
+      siteNameSize: {
+        default: 18,
+        description: "Ukuran font nama (px)",
+        type: "number",
+        minimum: 12,
+        maximum: 48
+      },
+      logoUrl: {
+        description: "URL logo (image or vectorized SVG)",
+        type: "string"
+      },
+      logoUrlDark: {
+        description: "Optional logo shown when the site is in dark mode \u2014 falls back to the main logo",
+        type: "string"
+      },
+      showSiteNameWithLogo: {
+        description: "Also show the site name text when a logo image is set",
+        type: "boolean"
+      },
+      ctaText: {
+        description: "Teks tombol CTA",
+        type: "string"
+      },
+      ctaUrl: {
+        description: "URL tombol CTA",
+        type: "string"
+      },
+      links: {
+        description: "Custom navbar links (shown alongside page links)",
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            label: {
+              type: "string",
+              description: "Link text"
+            },
+            url: {
+              type: "string",
+              description: "Link URL (e.g. /#pricing, /about, https://...)"
+            }
+          },
+          required: [
+            "label",
+            "url"
+          ],
+          additionalProperties: false
+        }
+      }
+    }
+  },
+  banner: {
+    properties: {
+      text: {
+        type: "string",
+        description: "Banner announcement text"
+      },
+      ctaText: {
+        description: "Call-to-action button text",
+        type: "string"
+      },
+      ctaUrl: {
+        description: "Call-to-action button URL",
+        type: "string"
+      },
+      icon: {
+        description: "Icon emoji or name",
+        type: "string"
+      }
+    }
+  },
+  footer: {
+    properties: {
+      text: {
+        default: "\xA9 2025 All rights reserved.",
+        description: "Footer copyright text",
+        type: "string"
+      },
+      links: {
+        description: "Footer navigation links",
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            label: {
+              type: "string",
+              description: "Link text"
+            },
+            url: {
+              type: "string",
+              description: "Link URL"
+            }
+          },
+          required: [
+            "label",
+            "url"
+          ],
+          additionalProperties: false
+        }
+      }
+    }
   }
 };
 

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)) {
@@ -1195,7 +1311,7 @@ function lintAttr(name, v, tag, ctx) {
     const s = staticValue(v);
     if (s !== null) {
       if (/url\s*\(|expression\s*\(|@import|behavior\s*:/i.test(s)) push(ctx, "error", "style-url", `inline style on <${tag}> must not use url()/expression()`);
-      if (/position\s*:\s*fixed/i.test(s) && ctx.sectionType !== "navbar" && ctx.sectionType !== "banner") push(ctx, "error", "fixed", `position: fixed is only allowed in navbar/banner variants`);
+      if (/position\s*:\s*fixed/i.test(s)) push(ctx, "error", "fixed", `position: fixed is not allowed \u2014 the platform makes the section wrapper sticky (navbar) instead; keep the root in normal flow`);
       if (/#[0-9a-f]{3,8}\b/i.test(s) || /\b(rgb|hsl)a?\(/i.test(s)) push(ctx, "warning", "hardcoded-color", `inline style on <${tag}> hardcodes a color \u2014 use var(--color-*)`);
       if (/border-radius\s*:\s*\d/i.test(s)) push(ctx, "warning", "hardcoded-radius", `inline style on <${tag}> hardcodes border-radius \u2014 use var(--radius)`);
       if (/font-family\s*:(?![^;]*var\(--font-)/i.test(s)) push(ctx, "warning", "hardcoded-font", `inline style on <${tag}> hardcodes font-family \u2014 use var(--font-heading|--font-body)`);
@@ -1222,7 +1338,7 @@ __name(lintHtml, "lintHtml");
 
 // ../variant-compiler/src/lint/css.ts
 var ALLOWED_URL_HOSTS = ["images.unsplash.com", "images.pexels.com"];
-function lintCss(css, sectionType, attrs = {}) {
+function lintCss(css, _sectionType, attrs = {}) {
   const out = [];
   const err = /* @__PURE__ */ __name((code, message) => out.push({ level: "error", code, message }), "err");
   const warn = /* @__PURE__ */ __name((code, message) => out.push({ level: "warning", code, message }), "warn");
@@ -1235,7 +1351,7 @@ function lintCss(css, sectionType, attrs = {}) {
   if (/@font-face\b/i.test(stripped)) err("css-font-face", "@font-face is not allowed \u2014 fonts come from the site theme (var(--font-heading|--font-body))");
   if (/expression\s*\(/i.test(stripped)) err("css-expression", "expression() is not allowed");
   if (/behavior\s*:|-moz-binding\s*:/i.test(stripped)) err("css-behavior", "behavior/-moz-binding are not allowed");
-  if (/\bposition\s*:\s*fixed\b/i.test(stripped) && sectionType !== "navbar" && sectionType !== "banner") err("fixed", "position: fixed is only allowed in navbar/banner variants");
+  if (/\bposition\s*:\s*fixed\b/i.test(stripped)) err("fixed", "position: fixed is not allowed \u2014 the platform makes the section wrapper sticky (navbar) instead; keep the root in normal flow");
   for (const m of stripped.matchAll(/url\s*\(\s*(['"]?)([^'")]+)\1\s*\)/gi)) {
     const u = m[2].trim();
     if (/^data:image\/svg\+xml/i.test(u)) continue;
@@ -1736,6 +1852,19 @@ async function compileTailwind(candidates) {
 __name(compileTailwind, "compileTailwind");
 
 // ../variant-compiler/src/schema.ts
+var CHROME_CONTEXT_PROPS = /* @__PURE__ */ new Set([
+  "pages",
+  "currentSlug",
+  "linkPrefix",
+  "colorMode",
+  "footerPages",
+  "imageCredits"
+]);
+var CHROME_SECTION_TYPES = /* @__PURE__ */ new Set(["navbar", "banner", "footer"]);
+var NEVER_HIDDEN = {
+  products: ["source"],
+  blog: ["source"]
+};
 function typeOf(s) {
   if (!s) return "unknown";
   const t = s.type;
@@ -1748,13 +1877,16 @@ function typeOf(s) {
   return "unknown";
 }
 __name(typeOf, "typeOf");
-function deriveSchema(fields, props, base) {
+function deriveSchema(fields, props, base, sectionType) {
   const lint = [];
+  const isChrome = sectionType !== void 0 && CHROME_SECTION_TYPES.has(sectionType);
+  const isContextProp = /* @__PURE__ */ __name((key) => isChrome && CHROME_CONTEXT_PROPS.has(key), "isContextProp");
   const readKeys = new Set(props.map((p) => p.key));
   const declared = new Map(fields.map((f) => [f.key, f]));
   const extProps = {};
   const usedFields = [];
   for (const f of fields) {
+    if (isContextProp(f.key)) continue;
     if (!f.optional) lint.push({ level: "warning", code: "props-optional", message: `prop '${f.key}' should be optional (\`${f.key}?:\`) \u2014 content may omit it` });
     const baseField = base?.properties[f.key];
     if (baseField) {
@@ -1767,11 +1899,13 @@ function deriveSchema(fields, props, base) {
     extProps[f.key] = { ...f.schema, ...f.description ? { description: f.description } : {} };
   }
   for (const k of readKeys) {
+    if (isContextProp(k)) continue;
     if (!declared.has(k)) lint.push({ level: "warning", code: "props-undeclared", message: `'${k}' is read from Astro.props but not declared in interface Props` });
     else if (!base?.properties[k] && !(k in extProps)) extProps[k] = { type: "string" };
     if (base?.properties[k] && !usedFields.includes(k)) usedFields.push(k);
   }
-  const hiddenFields = base ? Object.keys(base.properties).filter((k) => !usedFields.includes(k)) : [];
+  const keepVisible = new Set(sectionType !== void 0 ? NEVER_HIDDEN[sectionType] ?? [] : []);
+  const hiddenFields = base ? Object.keys(base.properties).filter((k) => !usedFields.includes(k) && !keepVisible.has(k)) : [];
   const extension = { type: "object", properties: extProps, additionalProperties: true };
   return { extension, hiddenFields, usedFields, lint };
 }
@@ -1901,7 +2035,7 @@ async function compile2(source, opts) {
     lint.push({ level: "error", code: "css-parse", message: `could not scope CSS: ${e.message}` });
   }
   if (css.length > CSS_MAX_BYTES) lint.push({ level: "error", code: "css-size", message: `compiled CSS exceeds ${CSS_MAX_BYTES / 1024} KB` });
-  const sch = deriveSchema(front.fields, front.props, opts.base ?? null);
+  const sch = deriveSchema(front.fields, front.props, opts.base ?? null, opts.sectionType);
   lint.push(...sch.lint);
   if (opts.strict) {
     for (const m of lint) if (m.level === "warning" && STRICT_CODES.has(m.code)) m.level = "error";
@@ -2467,7 +2601,12 @@ function renderVariant(ir, content, ctx, opts = {}) {
   }
   for (const c of ir.consts) scope[c.name] = evalExpr(c.e, scope, budget);
   const rctx = { ...ctx, marks: { addImageButton: false } };
-  const html = withAddImageFallback(renderNodes(ir.root, scope, rctx, budget), content, rctx);
+  const isDbMode = (ir.sectionType === "products" || ir.sectionType === "blog") && content.source === "database";
+  let rendered = renderNodes(ir.root, scope, rctx, budget);
+  if (isDbMode) {
+    rendered = rendered.replace(/<div class="webto-add-row[^"]*">\s*<button[^>]*data-edit-add-image="(?:products|posts)\.[^"]*"[\s\S]*?<\/button>\s*<\/div>/g, "").replace(/<button[^>]*data-edit-add-image="(?:products|posts)\.[^"]*"[\s\S]*?<\/button>/g, "").replace(/\s(?:data-edit-(?:field|image|add-image))="(?:products|posts)\.[^"]*"/g, "");
+  }
+  const html = withAddImageFallback(rendered, content, rctx);
   const css = ir.css ? layerize(ir.css.replace(/__WV_ROOT__/g, `[data-wv-inst="${uid}"]`)) : "";
   const script = ir.script ? wrapScript(ir.script, uid) : "";
   return { html, css, script, uid };
@@ -2516,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.6",
+  "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",