@webto-id/variant-check 0.1.5 → 0.1.7

package/dist/cli.js

@@ -1198,7 +1198,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 +1225,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 +1238,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 +1739,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 +1764,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 +1786,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 };
 }
@@ -1878,6 +1896,25 @@ async function compile2(source2, opts) {
       lint.push({ level: "error", code: "tailwind", message: `Tailwind compile failed: ${e.message}` });
     }
   }
+  if (!opts.skipTailwind && twCss) {
+    const unknown = [];
+    for (const t of classTokens) {
+      if (!isCandidate(t)) continue;
+      if (/^(group|peer)([/]|$)/.test(t)) continue;
+      if (/^(js|wv)-/.test(t)) continue;
+      if (userCss.includes(t) || script.includes(t)) continue;
+      const cssName = "." + t.replace(/[^a-zA-Z0-9_-]/g, (ch) => "\\" + ch);
+      const boundary = new RegExp(cssName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?![\\w-])");
+      if (!boundary.test(twCss)) unknown.push(t);
+    }
+    if (unknown.length) {
+      lint.push({
+        level: "warning",
+        code: "unknown-class",
+        message: `class${unknown.length > 1 ? "es" : ""} '${unknown.join("', '")}' compile to no CSS: not a Tailwind utility, and neither this variant's <style> nor its <script> mentions ${unknown.length > 1 ? "them" : "it"}. Leftover from another CSS framework? Rewrite as Tailwind utilities/tokens or style it in <style>; a deliberate script hook belongs under a js- prefix`
+      });
+    }
+  }
   let css = "";
   try {
     css = scopeCss(twCss, ROOT_PLACEHOLDER) + (userCss.trim() ? "\n" + scopeCss(userCss, ROOT_PLACEHOLDER) : "");
@@ -1885,7 +1922,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";
@@ -2451,7 +2488,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 };
@@ -3710,6 +3752,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

@@ -1195,7 +1195,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 +1222,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 +1235,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 +1736,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 +1761,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 +1783,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 };
 }
@@ -1875,6 +1893,25 @@ async function compile2(source, opts) {
       lint.push({ level: "error", code: "tailwind", message: `Tailwind compile failed: ${e.message}` });
     }
   }
+  if (!opts.skipTailwind && twCss) {
+    const unknown = [];
+    for (const t of classTokens) {
+      if (!isCandidate(t)) continue;
+      if (/^(group|peer)([/]|$)/.test(t)) continue;
+      if (/^(js|wv)-/.test(t)) continue;
+      if (userCss.includes(t) || script.includes(t)) continue;
+      const cssName = "." + t.replace(/[^a-zA-Z0-9_-]/g, (ch) => "\\" + ch);
+      const boundary = new RegExp(cssName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?![\\w-])");
+      if (!boundary.test(twCss)) unknown.push(t);
+    }
+    if (unknown.length) {
+      lint.push({
+        level: "warning",
+        code: "unknown-class",
+        message: `class${unknown.length > 1 ? "es" : ""} '${unknown.join("', '")}' compile to no CSS: not a Tailwind utility, and neither this variant's <style> nor its <script> mentions ${unknown.length > 1 ? "them" : "it"}. Leftover from another CSS framework? Rewrite as Tailwind utilities/tokens or style it in <style>; a deliberate script hook belongs under a js- prefix`
+      });
+    }
+  }
   let css = "";
   try {
     css = scopeCss(twCss, ROOT_PLACEHOLDER) + (userCss.trim() ? "\n" + scopeCss(userCss, ROOT_PLACEHOLDER) : "");
@@ -1882,7 +1919,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";
@@ -2448,7 +2485,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webto-id/variant-check",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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",