@webto-id/variant-check 0.1.4 → 0.1.5

package/dist/cli.js

@@ -6,7 +6,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { readFileSync, writeFileSync } from "fs";
 
 // ../variant-compiler/src/ir.ts
-var COMPONENT_NAMES = ["Container", "Button", "EditUrlPill", "ViewMoreLink"];
+var COMPONENT_NAMES = ["Container", "Button", "EditUrlPill", "ViewMoreLink", "AddImageButton"];
 
 // ../variant-compiler/src/parse/parser.ts
 var ParseError = class extends Error {
@@ -603,9 +603,10 @@ var HELPER_BY_IMPORT = {
   Container: "Container",
   Button: "Button",
   EditUrlPill: "EditUrlPill",
-  ViewMoreLink: "ViewMoreLink"
+  ViewMoreLink: "ViewMoreLink",
+  AddImageButton: "AddImageButton"
 };
-var ALLOWED_SOURCE = /^(webto\/variant|(\.{1,2}\/)+(lib\/(sanitize|image|section-i18n)|(components\/)?(v2\/)?(ui\/)?(Container|Button|ViewMoreLink)\.astro|(components\/)?EditUrlPill\.astro|ui\/(Container|Button)\.astro|ViewMoreLink\.astro))$/;
+var ALLOWED_SOURCE = /^(webto\/variant|(\.{1,2}\/)+(lib\/(sanitize|image|section-i18n)|(components\/)?(v2\/)?(ui\/)?(Container|Button|ViewMoreLink|AddImageButton)\.astro|(components\/)?EditUrlPill\.astro|ui\/(Container|Button)\.astro|ViewMoreLink\.astro))$/;
 function stripComments(src) {
   return src.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " ")).replace(/(^|[^:\\])\/\/[^\n]*/g, (m, pre) => pre + " ".repeat(m.length - pre.length));
 }
@@ -744,7 +745,7 @@ function parseFrontmatter(raw, lineOffset = 0) {
       const [, isType, def, named, source2] = m;
       i += m[0].length;
       if (isType) continue;
-      if (!ALLOWED_SOURCE.test(source2)) throw new ParseError(`import from '${source2}' is not allowed \u2014 only "webto/variant" helpers (t, img, url, Container, Button, EditUrlPill, ViewMoreLink)`, line, "import");
+      if (!ALLOWED_SOURCE.test(source2)) throw new ParseError(`import from '${source2}' is not allowed \u2014 only "webto/variant" helpers (t, img, url, Container, Button, EditUrlPill, ViewMoreLink, AddImageButton)`, line, "import");
       const names = [];
       if (def) names.push({ local: def, imported: def });
       if (named) {
@@ -1158,7 +1159,7 @@ function lintNodes(nodes, ctx, ariaHidden = false) {
       const style = staticValue(n.attrs.style);
       const pinned = typeof style === "string" && /font-size\s*:/i.test(style);
       const inert = typeof cls === "string" && !pinned ? cls.split(/\s+/).filter((c) => HEADING_SIZE_CLASS.test(c)) : [];
-      if (inert.length) push(ctx, "warning", "heading-size-inert", `${inert.join(" ")} on <${tag}> has no effect: h1-h4 sizes follow the site theme (Style tab). Keep it as intent, or force a fixed size with !${inert[0]}, an inline style, or a non-heading tag`);
+      if (inert.length) push(ctx, "warning", "heading-size-inert", `${inert.join(" ")} on <${tag}> has no effect: h1-h4 sizes follow the site theme (Style tab). Keep it as intent, pin the size with !${inert[0]} (honored everywhere, never rescaled by theme or per-section settings) or an inline style, or use a non-heading tag to follow the body scale`);
     }
     if (tag === "a") {
       const target = staticValue(n.attrs.target);
@@ -1520,18 +1521,18 @@ __name(hasBreak, "hasBreak");
 
 // ../variant-compiler/src/css/scope.ts
 var ROOT_PLACEHOLDER = "__WV_ROOT__";
-var RECURSE_AT = /^@(media|supports|container|layer|scope|document)\b/i;
 var VERBATIM_AT = /^@(keyframes|-webkit-keyframes|property|font-face|page|counter-style|font-feature-values|namespace|charset)\b/i;
 function scopeCss(css, root = ROOT_PLACEHOLDER) {
-  return scopeBlock(stripComments2(css), root);
+  return scopeBlock(stripComments2(css), root, null);
 }
 __name(scopeCss, "scopeCss");
 function stripComments2(s) {
   return s.replace(/\/\*[\s\S]*?\*\//g, "");
 }
 __name(stripComments2, "stripComments");
-function scopeBlock(src, root) {
+function scopeBlock(src, root, parents) {
   let out = "";
+  let decls = "";
   let i = 0;
   while (i < src.length) {
     let j = i;
@@ -1548,7 +1549,10 @@ function scopeBlock(src, root) {
     }
     const prelude = src.slice(i, j).trim();
     if (j >= src.length) {
-      if (prelude) out += prelude;
+      if (prelude) {
+        if (parents) decls += `${prelude};`;
+        else out += prelude;
+      }
       break;
     }
     if (src[j] === "}") {
@@ -1556,7 +1560,10 @@ function scopeBlock(src, root) {
       continue;
     }
     if (src[j] === ";") {
-      if (prelude) out += `${prelude};`;
+      if (prelude) {
+        if (parents && !prelude.startsWith("@")) decls += `${prelude};`;
+        else out += `${prelude};`;
+      }
       i = j + 1;
       continue;
     }
@@ -1566,21 +1573,28 @@ function scopeBlock(src, root) {
     if (!prelude) continue;
     if (prelude.startsWith("@")) {
       if (VERBATIM_AT.test(prelude)) out += `${prelude}{${body}}`;
-      else if (RECURSE_AT.test(prelude)) out += `${prelude}{${scopeBlock(body, root)}}`;
-      else out += `${prelude}{${scopeBlock(body, root)}}`;
+      else out += `${prelude}{${scopeBlock(body, root, parents)}}`;
       continue;
     }
-    const selectors = splitSelectors(prelude).map((s) => scopeSelector(s.trim(), root)).filter(Boolean);
+    const raw = splitSelectors(prelude).map((s) => s.trim()).filter(Boolean);
+    const selectors = parents ? resolveNested(raw, parents) : raw.map((s) => scopeSelector(s, root)).filter(Boolean);
     if (!selectors.length) continue;
-    if (body.includes("{")) {
-      out += `${selectors.join(",")}{${scopeBlock(body, root)}}`;
-    } else {
-      out += `${selectors.join(",")}{${body.trim()}}`;
-    }
+    out += scopeBlock(body, root, selectors);
   }
+  if (parents && decls) out = `${parents.join(",")}{${decls}}` + out;
   return out;
 }
 __name(scopeBlock, "scopeBlock");
+function resolveNested(selectors, parents) {
+  const parentRef = parents.length === 1 ? parents[0] : `:is(${parents.join(", ")})`;
+  const out = [];
+  for (const sel of selectors) {
+    if (sel.includes("&")) out.push(sel.replace(/&/g, parentRef));
+    else for (const p of parents) out.push(`${p} ${sel}`);
+  }
+  return out;
+}
+__name(resolveNested, "resolveNested");
 function matchBrace2(src, open) {
   let depth = 0;
   let inStr = null;
@@ -1625,7 +1639,7 @@ function splitSelectors(s) {
 __name(splitSelectors, "splitSelectors");
 function scopeSelector(sel, root) {
   if (!sel) return "";
-  if (sel.startsWith("&")) return `${root} ${sel.slice(1).trim()}`.trim();
+  if (sel.startsWith("&")) return `${root}${sel.slice(1)}`.trim();
   if (sel.includes(ROOT_PLACEHOLDER)) return sel;
   const m = /^(:root|html|body)(?![\w-])/i.exec(sel);
   if (m) {
@@ -1701,7 +1715,8 @@ var MACRO_CLASSES = [
   "text-foreground hover:bg-muted",
   "px-4 py-2 text-sm px-6 py-3 text-base px-8 py-4 text-lg",
   "gap-1.5 px-2.5 py-1 rounded-md border-dashed text-xs whitespace-nowrap font-mono break-all w-3.5 h-3.5 shrink-0",
-  "mt-10 flex justify-start justify-center justify-end hover:border-primary/30 text-primary hover:underline w-4 h-4 relative"
+  "mt-10 flex justify-start justify-center justify-end hover:border-primary/30 text-primary hover:underline w-4 h-4 relative",
+  "mt-8 absolute bottom-8 right-8 z-30"
 ];
 function pickCandidates(tokens) {
   const set = /* @__PURE__ */ new Set();
@@ -1766,7 +1781,7 @@ function deriveSchema(fields, props, base2) {
 __name(deriveSchema, "deriveSchema");
 
 // ../variant-compiler/src/index.ts
-var COMPILER_VERSION = "0.1.4";
+var COMPILER_VERSION = "0.1.5";
 var IR_MAX_BYTES = 256 * 1024;
 var CSS_MAX_BYTES = 64 * 1024;
 var STRICT_CODES = /* @__PURE__ */ new Set(["dead-text", "hardcoded-color", "hardcoded-radius", "hardcoded-font", "hardcoded-image", "img-alt", "props-optional", "tailwind-skipped"]);
@@ -2321,6 +2336,12 @@ function editUrlPillHtml(field, value, anchor = "below", extraClass = "") {
   return `<div data-edit-reveal data-anchor="${escAttr(anchor)}" class="edit-url-pill${extraClass ? " " + escAttr(extraClass) : ""}" style="display:none;position:absolute;z-index:10;pointer-events:auto;${pos}"><div class="edit-url-pill__inner inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md border border-dashed text-xs whitespace-nowrap shadow-sm" style="color:var(--color-background,#fff);border-color:color-mix(in srgb,var(--color-foreground,#000) 40%,transparent);background-color:var(--color-foreground,#000);text-transform:none;letter-spacing:normal;"><svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg><span data-edit-field="${escAttr(field)}" class="font-mono break-all">${escText(value)}</span></div></div>`;
 }
 __name(editUrlPillHtml, "editUrlPillHtml");
+function addImageButtonHtml(path, label = "Tambah Gambar", mode = "inline") {
+  const btn = /* @__PURE__ */ __name((cls) => `<button type="button" class="${escAttr(cls)}" data-edit-add-image="${escAttr(path)}" aria-label="${escAttr(label)}"><span class="webto-inline-add-icon">+</span>${escText(label)}</button>`, "btn");
+  if (mode === "floating") return btn("webto-inline-add-btn absolute bottom-8 right-8 z-30");
+  return `<div class="webto-add-row mt-8">${btn("webto-inline-add-btn")}</div>`;
+}
+__name(addImageButtonHtml, "addImageButtonHtml");
 function renderComponent(n, scope, ctx, budget) {
   const p = {};
   for (const [k, v] of Object.entries(n.props)) p[k] = attrValue(v, scope, budget);
@@ -2335,6 +2356,13 @@ function renderComponent(n, scope, ctx, budget) {
     }
     case "EditUrlPill":
       return editUrlPillHtml(stringify(p.field), stringify(p.value), stringify(p.anchor) || "below", flattenClassList(p.class));
+    case "AddImageButton": {
+      if (ctx.marks) ctx.marks.addImageButton = true;
+      if (!ctx.editChrome || p.visible === false) return "";
+      const path = stringify(p.path);
+      if (!path) return "";
+      return addImageButtonHtml(path, stringify(p.label) || "Tambah Gambar", p.mode === "floating" ? "floating" : "inline");
+    }
     case "ViewMoreLink": {
       const url = stringify(p.url);
       if (!url) return "";
@@ -2422,12 +2450,34 @@ function renderVariant(ir, content, ctx, opts = {}) {
     scope[p.name] = v === void 0 && p.def ? evalExpr(p.def, scope, budget) : v;
   }
   for (const c of ir.consts) scope[c.name] = evalExpr(c.e, scope, budget);
-  const html = renderNodes(ir.root, scope, ctx, budget);
+  const rctx = { ...ctx, marks: { addImageButton: false } };
+  const html = withAddImageFallback(renderNodes(ir.root, scope, rctx, budget), 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 };
 }
 __name(renderVariant, "renderVariant");
+var EDIT_IMAGE_ITEM_RE = /data-edit-image="([A-Za-z_]\w*)\.(\d+)\.([A-Za-z_]\w*)"/g;
+function withAddImageFallback(html, content, ctx) {
+  if (!ctx.editChrome || ctx.marks?.addImageButton || html.includes("data-edit-add-image=")) return html;
+  const lists = /* @__PURE__ */ new Map();
+  for (const m of html.matchAll(EDIT_IMAGE_ITEM_RE)) {
+    const [, list, index, key] = m;
+    const cur = lists.get(list) ?? { key, hits: 0, maxIndex: -1 };
+    cur.hits += 1;
+    cur.maxIndex = Math.max(cur.maxIndex, Number(index));
+    lists.set(list, cur);
+  }
+  let best = null;
+  for (const [list, v] of lists) if (!best || v.hits > best.hits) best = { list, ...v };
+  if (!best) return html;
+  const stored = content[best.list];
+  const length = Array.isArray(stored) ? stored.length : best.maxIndex + 1;
+  const pill = addImageButtonHtml(`${best.list}.${length}.${best.key}`);
+  const tail = html.lastIndexOf("</section>");
+  return tail >= 0 ? html.slice(0, tail) + pill + html.slice(tail) : html + pill;
+}
+__name(withAddImageFallback, "withAddImageFallback");
 var STATEMENT_AT = /^\s*@[a-zA-Z-]+[^;{}]*;/;
 function layerize(css) {
   let rest = css;

package/dist/index.js

@@ -3,7 +3,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // ../variant-compiler/src/ir.ts
-var COMPONENT_NAMES = ["Container", "Button", "EditUrlPill", "ViewMoreLink"];
+var COMPONENT_NAMES = ["Container", "Button", "EditUrlPill", "ViewMoreLink", "AddImageButton"];
 
 // ../variant-compiler/src/parse/parser.ts
 var ParseError = class extends Error {
@@ -600,9 +600,10 @@ var HELPER_BY_IMPORT = {
   Container: "Container",
   Button: "Button",
   EditUrlPill: "EditUrlPill",
-  ViewMoreLink: "ViewMoreLink"
+  ViewMoreLink: "ViewMoreLink",
+  AddImageButton: "AddImageButton"
 };
-var ALLOWED_SOURCE = /^(webto\/variant|(\.{1,2}\/)+(lib\/(sanitize|image|section-i18n)|(components\/)?(v2\/)?(ui\/)?(Container|Button|ViewMoreLink)\.astro|(components\/)?EditUrlPill\.astro|ui\/(Container|Button)\.astro|ViewMoreLink\.astro))$/;
+var ALLOWED_SOURCE = /^(webto\/variant|(\.{1,2}\/)+(lib\/(sanitize|image|section-i18n)|(components\/)?(v2\/)?(ui\/)?(Container|Button|ViewMoreLink|AddImageButton)\.astro|(components\/)?EditUrlPill\.astro|ui\/(Container|Button)\.astro|ViewMoreLink\.astro))$/;
 function stripComments(src) {
   return src.replace(/\/\*[\s\S]*?\*\//g, (m) => m.replace(/[^\n]/g, " ")).replace(/(^|[^:\\])\/\/[^\n]*/g, (m, pre) => pre + " ".repeat(m.length - pre.length));
 }
@@ -741,7 +742,7 @@ function parseFrontmatter(raw, lineOffset = 0) {
       const [, isType, def, named, source] = m;
       i += m[0].length;
       if (isType) continue;
-      if (!ALLOWED_SOURCE.test(source)) throw new ParseError(`import from '${source}' is not allowed \u2014 only "webto/variant" helpers (t, img, url, Container, Button, EditUrlPill, ViewMoreLink)`, line, "import");
+      if (!ALLOWED_SOURCE.test(source)) throw new ParseError(`import from '${source}' is not allowed \u2014 only "webto/variant" helpers (t, img, url, Container, Button, EditUrlPill, ViewMoreLink, AddImageButton)`, line, "import");
       const names = [];
       if (def) names.push({ local: def, imported: def });
       if (named) {
@@ -1155,7 +1156,7 @@ function lintNodes(nodes, ctx, ariaHidden = false) {
       const style = staticValue(n.attrs.style);
       const pinned = typeof style === "string" && /font-size\s*:/i.test(style);
       const inert = typeof cls === "string" && !pinned ? cls.split(/\s+/).filter((c) => HEADING_SIZE_CLASS.test(c)) : [];
-      if (inert.length) push(ctx, "warning", "heading-size-inert", `${inert.join(" ")} on <${tag}> has no effect: h1-h4 sizes follow the site theme (Style tab). Keep it as intent, or force a fixed size with !${inert[0]}, an inline style, or a non-heading tag`);
+      if (inert.length) push(ctx, "warning", "heading-size-inert", `${inert.join(" ")} on <${tag}> has no effect: h1-h4 sizes follow the site theme (Style tab). Keep it as intent, pin the size with !${inert[0]} (honored everywhere, never rescaled by theme or per-section settings) or an inline style, or use a non-heading tag to follow the body scale`);
     }
     if (tag === "a") {
       const target = staticValue(n.attrs.target);
@@ -1517,18 +1518,18 @@ __name(hasBreak, "hasBreak");
 
 // ../variant-compiler/src/css/scope.ts
 var ROOT_PLACEHOLDER = "__WV_ROOT__";
-var RECURSE_AT = /^@(media|supports|container|layer|scope|document)\b/i;
 var VERBATIM_AT = /^@(keyframes|-webkit-keyframes|property|font-face|page|counter-style|font-feature-values|namespace|charset)\b/i;
 function scopeCss(css, root = ROOT_PLACEHOLDER) {
-  return scopeBlock(stripComments2(css), root);
+  return scopeBlock(stripComments2(css), root, null);
 }
 __name(scopeCss, "scopeCss");
 function stripComments2(s) {
   return s.replace(/\/\*[\s\S]*?\*\//g, "");
 }
 __name(stripComments2, "stripComments");
-function scopeBlock(src, root) {
+function scopeBlock(src, root, parents) {
   let out = "";
+  let decls = "";
   let i = 0;
   while (i < src.length) {
     let j = i;
@@ -1545,7 +1546,10 @@ function scopeBlock(src, root) {
     }
     const prelude = src.slice(i, j).trim();
     if (j >= src.length) {
-      if (prelude) out += prelude;
+      if (prelude) {
+        if (parents) decls += `${prelude};`;
+        else out += prelude;
+      }
       break;
     }
     if (src[j] === "}") {
@@ -1553,7 +1557,10 @@ function scopeBlock(src, root) {
       continue;
     }
     if (src[j] === ";") {
-      if (prelude) out += `${prelude};`;
+      if (prelude) {
+        if (parents && !prelude.startsWith("@")) decls += `${prelude};`;
+        else out += `${prelude};`;
+      }
       i = j + 1;
       continue;
     }
@@ -1563,21 +1570,28 @@ function scopeBlock(src, root) {
     if (!prelude) continue;
     if (prelude.startsWith("@")) {
       if (VERBATIM_AT.test(prelude)) out += `${prelude}{${body}}`;
-      else if (RECURSE_AT.test(prelude)) out += `${prelude}{${scopeBlock(body, root)}}`;
-      else out += `${prelude}{${scopeBlock(body, root)}}`;
+      else out += `${prelude}{${scopeBlock(body, root, parents)}}`;
       continue;
     }
-    const selectors = splitSelectors(prelude).map((s) => scopeSelector(s.trim(), root)).filter(Boolean);
+    const raw = splitSelectors(prelude).map((s) => s.trim()).filter(Boolean);
+    const selectors = parents ? resolveNested(raw, parents) : raw.map((s) => scopeSelector(s, root)).filter(Boolean);
     if (!selectors.length) continue;
-    if (body.includes("{")) {
-      out += `${selectors.join(",")}{${scopeBlock(body, root)}}`;
-    } else {
-      out += `${selectors.join(",")}{${body.trim()}}`;
-    }
+    out += scopeBlock(body, root, selectors);
   }
+  if (parents && decls) out = `${parents.join(",")}{${decls}}` + out;
   return out;
 }
 __name(scopeBlock, "scopeBlock");
+function resolveNested(selectors, parents) {
+  const parentRef = parents.length === 1 ? parents[0] : `:is(${parents.join(", ")})`;
+  const out = [];
+  for (const sel of selectors) {
+    if (sel.includes("&")) out.push(sel.replace(/&/g, parentRef));
+    else for (const p of parents) out.push(`${p} ${sel}`);
+  }
+  return out;
+}
+__name(resolveNested, "resolveNested");
 function matchBrace2(src, open) {
   let depth = 0;
   let inStr = null;
@@ -1622,7 +1636,7 @@ function splitSelectors(s) {
 __name(splitSelectors, "splitSelectors");
 function scopeSelector(sel, root) {
   if (!sel) return "";
-  if (sel.startsWith("&")) return `${root} ${sel.slice(1).trim()}`.trim();
+  if (sel.startsWith("&")) return `${root}${sel.slice(1)}`.trim();
   if (sel.includes(ROOT_PLACEHOLDER)) return sel;
   const m = /^(:root|html|body)(?![\w-])/i.exec(sel);
   if (m) {
@@ -1698,7 +1712,8 @@ var MACRO_CLASSES = [
   "text-foreground hover:bg-muted",
   "px-4 py-2 text-sm px-6 py-3 text-base px-8 py-4 text-lg",
   "gap-1.5 px-2.5 py-1 rounded-md border-dashed text-xs whitespace-nowrap font-mono break-all w-3.5 h-3.5 shrink-0",
-  "mt-10 flex justify-start justify-center justify-end hover:border-primary/30 text-primary hover:underline w-4 h-4 relative"
+  "mt-10 flex justify-start justify-center justify-end hover:border-primary/30 text-primary hover:underline w-4 h-4 relative",
+  "mt-8 absolute bottom-8 right-8 z-30"
 ];
 function pickCandidates(tokens) {
   const set = /* @__PURE__ */ new Set();
@@ -1763,7 +1778,7 @@ function deriveSchema(fields, props, base) {
 __name(deriveSchema, "deriveSchema");
 
 // ../variant-compiler/src/index.ts
-var COMPILER_VERSION = "0.1.4";
+var COMPILER_VERSION = "0.1.5";
 var IR_MAX_BYTES = 256 * 1024;
 var CSS_MAX_BYTES = 64 * 1024;
 var STRICT_CODES = /* @__PURE__ */ new Set(["dead-text", "hardcoded-color", "hardcoded-radius", "hardcoded-font", "hardcoded-image", "img-alt", "props-optional", "tailwind-skipped"]);
@@ -2318,6 +2333,12 @@ function editUrlPillHtml(field, value, anchor = "below", extraClass = "") {
   return `<div data-edit-reveal data-anchor="${escAttr(anchor)}" class="edit-url-pill${extraClass ? " " + escAttr(extraClass) : ""}" style="display:none;position:absolute;z-index:10;pointer-events:auto;${pos}"><div class="edit-url-pill__inner inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md border border-dashed text-xs whitespace-nowrap shadow-sm" style="color:var(--color-background,#fff);border-color:color-mix(in srgb,var(--color-foreground,#000) 40%,transparent);background-color:var(--color-foreground,#000);text-transform:none;letter-spacing:normal;"><svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg><span data-edit-field="${escAttr(field)}" class="font-mono break-all">${escText(value)}</span></div></div>`;
 }
 __name(editUrlPillHtml, "editUrlPillHtml");
+function addImageButtonHtml(path, label = "Tambah Gambar", mode = "inline") {
+  const btn = /* @__PURE__ */ __name((cls) => `<button type="button" class="${escAttr(cls)}" data-edit-add-image="${escAttr(path)}" aria-label="${escAttr(label)}"><span class="webto-inline-add-icon">+</span>${escText(label)}</button>`, "btn");
+  if (mode === "floating") return btn("webto-inline-add-btn absolute bottom-8 right-8 z-30");
+  return `<div class="webto-add-row mt-8">${btn("webto-inline-add-btn")}</div>`;
+}
+__name(addImageButtonHtml, "addImageButtonHtml");
 function renderComponent(n, scope, ctx, budget) {
   const p = {};
   for (const [k, v] of Object.entries(n.props)) p[k] = attrValue(v, scope, budget);
@@ -2332,6 +2353,13 @@ function renderComponent(n, scope, ctx, budget) {
     }
     case "EditUrlPill":
       return editUrlPillHtml(stringify(p.field), stringify(p.value), stringify(p.anchor) || "below", flattenClassList(p.class));
+    case "AddImageButton": {
+      if (ctx.marks) ctx.marks.addImageButton = true;
+      if (!ctx.editChrome || p.visible === false) return "";
+      const path = stringify(p.path);
+      if (!path) return "";
+      return addImageButtonHtml(path, stringify(p.label) || "Tambah Gambar", p.mode === "floating" ? "floating" : "inline");
+    }
     case "ViewMoreLink": {
       const url = stringify(p.url);
       if (!url) return "";
@@ -2419,12 +2447,34 @@ function renderVariant(ir, content, ctx, opts = {}) {
     scope[p.name] = v === void 0 && p.def ? evalExpr(p.def, scope, budget) : v;
   }
   for (const c of ir.consts) scope[c.name] = evalExpr(c.e, scope, budget);
-  const html = renderNodes(ir.root, scope, ctx, budget);
+  const rctx = { ...ctx, marks: { addImageButton: false } };
+  const html = withAddImageFallback(renderNodes(ir.root, scope, rctx, budget), 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 };
 }
 __name(renderVariant, "renderVariant");
+var EDIT_IMAGE_ITEM_RE = /data-edit-image="([A-Za-z_]\w*)\.(\d+)\.([A-Za-z_]\w*)"/g;
+function withAddImageFallback(html, content, ctx) {
+  if (!ctx.editChrome || ctx.marks?.addImageButton || html.includes("data-edit-add-image=")) return html;
+  const lists = /* @__PURE__ */ new Map();
+  for (const m of html.matchAll(EDIT_IMAGE_ITEM_RE)) {
+    const [, list, index, key] = m;
+    const cur = lists.get(list) ?? { key, hits: 0, maxIndex: -1 };
+    cur.hits += 1;
+    cur.maxIndex = Math.max(cur.maxIndex, Number(index));
+    lists.set(list, cur);
+  }
+  let best = null;
+  for (const [list, v] of lists) if (!best || v.hits > best.hits) best = { list, ...v };
+  if (!best) return html;
+  const stored = content[best.list];
+  const length = Array.isArray(stored) ? stored.length : best.maxIndex + 1;
+  const pill = addImageButtonHtml(`${best.list}.${length}.${best.key}`);
+  const tail = html.lastIndexOf("</section>");
+  return tail >= 0 ? html.slice(0, tail) + pill + html.slice(tail) : html + pill;
+}
+__name(withAddImageFallback, "withAddImageFallback");
 var STATEMENT_AT = /^\s*@[a-zA-Z-]+[^;{}]*;/;
 function layerize(css) {
   let rest = css;

package/package.json

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