@bastani/atomic 0.8.20 → 0.8.21

package/dist/builtin/workflows/skills/impeccable/scripts/detector/shared/color.mjs

@@ -0,0 +1,124 @@
+// ─── Section 2: Color Utilities ─────────────────────────────────────────────
+
+function isNeutralColor(color) {
+  if (!color || color === 'transparent') return true;
+
+  // rgb/rgba — use channel spread. Threshold 30 ≈ 11.7% of the 0–255 range.
+  const rgb = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (rgb) {
+    return (Math.max(+rgb[1], +rgb[2], +rgb[3]) - Math.min(+rgb[1], +rgb[2], +rgb[3])) < 30;
+  }
+
+  // oklch()/lch() — chroma is the second numeric component.
+  // oklch chroma is ~0–0.4 in sRGB gamut; >= 0.02 reads as tinted, not gray.
+  // lch chroma is ~0–150; >= 3 reads as tinted. jsdom emits both formats
+  // literally (it does NOT convert them to rgb).
+  const oklch = color.match(/oklch\(\s*[\d.]+%?\s*([\d.-]+)/i);
+  if (oklch) return parseFloat(oklch[1]) < 0.02;
+  const lch = color.match(/lch\(\s*[\d.]+%?\s*([\d.-]+)/i);
+  if (lch) return parseFloat(lch[1]) < 3;
+
+  // oklab()/lab() — a and b are signed axes; chroma = sqrt(a² + b²).
+  // oklab a/b are ~-0.4..0.4, threshold 0.02. lab a/b are ~-128..127, threshold 3.
+  const oklab = color.match(/oklab\(\s*[\d.]+%?\s*([\d.-]+)\s+([\d.-]+)/i);
+  if (oklab) {
+    const a = parseFloat(oklab[1]), b = parseFloat(oklab[2]);
+    return Math.hypot(a, b) < 0.02;
+  }
+  const lab = color.match(/lab\(\s*[\d.]+%?\s*([\d.-]+)\s+([\d.-]+)/i);
+  if (lab) {
+    const a = parseFloat(lab[1]), b = parseFloat(lab[2]);
+    return Math.hypot(a, b) < 3;
+  }
+
+  // hsl/hsla — saturation is the second numeric component (percent).
+  // Modern jsdom usually converts hsl() to rgb, but handle it directly for
+  // safety across versions and for any engine that preserves the format.
+  const hsl = color.match(/hsla?\(\s*[\d.-]+\s*,?\s*([\d.]+)%/i);
+  if (hsl) return parseFloat(hsl[1]) < 10;
+
+  // hwb(hue whiteness% blackness%) — a pixel is fully gray when
+  // whiteness + blackness >= 100; chroma-like saturation = 1 - (w+b)/100.
+  const hwb = color.match(/hwb\(\s*[\d.-]+\s+([\d.]+)%\s+([\d.]+)%/i);
+  if (hwb) {
+    const w = parseFloat(hwb[1]), b = parseFloat(hwb[2]);
+    return (1 - Math.min(100, w + b) / 100) < 0.1;
+  }
+
+  // Unknown / unrecognized format — err on the side of DETECTING rather
+  // than silently skipping. This is the opposite of the previous default,
+  // which was the root cause of the oklch bug.
+  return false;
+}
+
+function parseRgb(color) {
+  if (!color || color === 'transparent') return null;
+  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (!m) return null;
+  return { r: +m[1], g: +m[2], b: +m[3], a: m[4] !== undefined ? +m[4] : 1 };
+}
+
+function relativeLuminance({ r, g, b }) {
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(c =>
+    c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  );
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+function contrastRatio(c1, c2) {
+  const l1 = relativeLuminance(c1);
+  const l2 = relativeLuminance(c2);
+  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+
+function parseGradientColors(bgImage) {
+  if (!bgImage || !bgImage.includes('gradient')) return [];
+  const colors = [];
+  for (const m of bgImage.matchAll(/rgba?\([^)]+\)/g)) {
+    const c = parseRgb(m[0]);
+    if (c) colors.push(c);
+  }
+  for (const m of bgImage.matchAll(/#([0-9a-f]{6}|[0-9a-f]{3})\b/gi)) {
+    const h = m[1];
+    if (h.length === 6) {
+      colors.push({ r: parseInt(h.slice(0,2),16), g: parseInt(h.slice(2,4),16), b: parseInt(h.slice(4,6),16), a: 1 });
+    } else {
+      colors.push({ r: parseInt(h[0]+h[0],16), g: parseInt(h[1]+h[1],16), b: parseInt(h[2]+h[2],16), a: 1 });
+    }
+  }
+  return colors;
+}
+
+function hasChroma(c, threshold = 30) {
+  if (!c) return false;
+  return (Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b)) >= threshold;
+}
+
+function getHue(c) {
+  if (!c) return 0;
+  const r = c.r / 255, g = c.g / 255, b = c.b / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  if (max === min) return 0;
+  const d = max - min;
+  let h;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return Math.round(h * 360);
+}
+
+function colorToHex(c) {
+  if (!c) return '?';
+  return '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join('');
+}
+
+export {
+  isNeutralColor,
+  parseRgb,
+  relativeLuminance,
+  contrastRatio,
+  parseGradientColors,
+  hasChroma,
+  getHue,
+  colorToHex,
+};

package/dist/builtin/workflows/skills/impeccable/scripts/detector/shared/constants.mjs

@@ -0,0 +1,101 @@
+// ─── Section 1: Constants ───────────────────────────────────────────────────
+
+const SAFE_TAGS = new Set([
+  'blockquote', 'nav', 'a', 'input', 'textarea', 'select',
+  'pre', 'code', 'span', 'th', 'td', 'tr', 'li', 'label',
+  'button', 'hr', 'html', 'head', 'body', 'script', 'style',
+  'link', 'meta', 'title', 'br', 'img', 'svg', 'path', 'circle',
+  'rect', 'line', 'polyline', 'polygon', 'g', 'defs', 'use',
+]);
+
+// Per-check safe-tags override for the border (side-tab / border-accent)
+// rule. We intentionally re-allow <label> here because card-shaped clickable
+// labels (e.g. .checklist-item wrapping a checkbox + content) are one of the
+// canonical side-tab anti-pattern shapes and must be detected. The rule's
+// other preconditions (non-neutral color, width >= 2px on a single side,
+// radius > 0 or width >= 3, element size >= 20x20 in the browser path)
+// already filter out plain inline form labels so this does not introduce
+// false positives. See modern-color-borders.html for the test matrix.
+const BORDER_SAFE_TAGS = new Set(
+  [...SAFE_TAGS].filter(t => t !== 'label')
+);
+
+const OVERUSED_FONTS = new Set([
+  // Older monoculture (still ubiquitous):
+  'inter', 'roboto', 'open sans', 'lato', 'montserrat', 'arial', 'helvetica',
+  // Newer monoculture (the Anthropic-skill / Vercel / GitHub default wave):
+  'fraunces', 'instrument sans', 'instrument serif',
+  'geist', 'geist sans', 'geist mono',
+  'mona sans',
+  'plus jakarta sans', 'space grotesk', 'recoleta',
+]);
+
+// Brand-associated fonts: don't flag these as "overused" on the brand's own domains.
+// Keys are font names, values are arrays of hostname suffixes where the font is allowed.
+const GOOGLE_DOMAINS = [
+  'google.com', 'youtube.com', 'android.com', 'chromium.org',
+  'chrome.com', 'web.dev', 'gstatic.com', 'firebase.google.com',
+];
+const VERCEL_DOMAINS = ['vercel.com', 'nextjs.org', 'v0.app'];
+const GITHUB_DOMAINS = ['github.com', 'githubnext.com'];
+const BRAND_FONT_DOMAINS = {
+  'roboto': GOOGLE_DOMAINS,
+  'google sans': GOOGLE_DOMAINS,
+  'product sans': GOOGLE_DOMAINS,
+  'geist': VERCEL_DOMAINS,
+  'geist sans': VERCEL_DOMAINS,
+  'geist mono': VERCEL_DOMAINS,
+  'mona sans': GITHUB_DOMAINS,
+};
+
+function isBrandFontOnOwnDomain(font) {
+  if (typeof location === 'undefined') return false;
+  const allowed = BRAND_FONT_DOMAINS[font];
+  if (!allowed) return false;
+  const host = location.hostname.toLowerCase();
+  return allowed.some(suffix => host === suffix || host.endsWith('.' + suffix));
+}
+
+const GENERIC_FONTS = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy',
+  'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded',
+  '-apple-system', 'blinkmacsystemfont', 'segoe ui',
+  'inherit', 'initial', 'unset', 'revert',
+]);
+
+// WCAG large text thresholds are defined in points: 18pt normal text and
+// 14pt bold text. Browsers expose font-size in CSS pixels at 96px per inch.
+const WCAG_LARGE_TEXT_PX = 18 * (96 / 72);
+const WCAG_LARGE_BOLD_TEXT_PX = 14 * (96 / 72);
+
+// Serif faces that show up in italic-display heroes. The rule also fires when
+// the primary face is unknown but the stack ends in the generic `serif` token,
+// which catches custom/private faces with a serif fallback.
+const KNOWN_SERIF_FONTS = new Set([
+  'fraunces', 'recoleta', 'newsreader', 'playfair display', 'playfair',
+  'cormorant', 'cormorant garamond', 'garamond', 'eb garamond',
+  'tiempos', 'tiempos headline', 'tiempos text',
+  'lora', 'vollkorn', 'spectral',
+  'source serif pro', 'source serif 4', 'source serif',
+  'ibm plex serif', 'merriweather',
+  'libre caslon', 'libre baskerville', 'baskerville',
+  'georgia', 'times new roman', 'times',
+  'dm serif display', 'dm serif text',
+  'instrument serif', 'gt sectra', 'ogg', 'canela',
+  'freight display', 'freight text',
+]);
+
+export {
+  SAFE_TAGS,
+  BORDER_SAFE_TAGS,
+  OVERUSED_FONTS,
+  GOOGLE_DOMAINS,
+  VERCEL_DOMAINS,
+  GITHUB_DOMAINS,
+  BRAND_FONT_DOMAINS,
+  isBrandFontOnOwnDomain,
+  GENERIC_FONTS,
+  WCAG_LARGE_TEXT_PX,
+  WCAG_LARGE_BOLD_TEXT_PX,
+  KNOWN_SERIF_FONTS,
+};

package/dist/builtin/workflows/skills/impeccable/scripts/detector/shared/page.mjs

@@ -0,0 +1,7 @@
+/** Check if content looks like a full page (not a component/partial) */
+function isFullPage(content) {
+  const stripped = content.replace(/<!--[\s\S]*?-->/g, '');
+  return /<!doctype\s|<html[\s>]|<head[\s>]/i.test(stripped);
+}
+
+export { isFullPage };

package/dist/builtin/workflows/skills/impeccable/scripts/impeccable-paths.mjs

@@ -64,7 +64,12 @@ export function getLegacyLiveServerPath(cwd = process.cwd()) {
 export function readLiveServerInfo(cwd = process.cwd()) {
   for (const filePath of [getLiveServerPath(cwd), getLegacyLiveServerPath(cwd)]) {
     try {
-      return { info: JSON.parse(fs.readFileSync(filePath, 'utf-8')), path: filePath };
+      const info = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+      if (info && typeof info.pid === 'number' && !isLiveServerPidReachable(info.pid)) {
+        try { fs.unlinkSync(filePath); } catch {}
+        continue;
+      }
+      return { info, path: filePath };
     } catch {
       /* try next */
     }
@@ -72,6 +77,17 @@ export function readLiveServerInfo(cwd = process.cwd()) {
   return null;
 }
 
+export function isLiveServerPidReachable(pid) {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (err) {
+    // ESRCH means "no such process". EPERM means the process exists but this
+    // user cannot signal it, so the live server info is still valid.
+    return err?.code !== 'ESRCH';
+  }
+}
+
 export function writeLiveServerInfo(cwd = process.cwd(), info) {
   const filePath = getLiveServerPath(cwd);
   fs.mkdirSync(path.dirname(filePath), { recursive: true });

package/dist/builtin/workflows/skills/impeccable/scripts/is-generated.mjs

@@ -13,7 +13,7 @@
  *      within the first ~300 characters — catches non-git projects.
  */
 
-import { execFileSync } from 'node:child_process';
+import { execSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 
@@ -41,7 +41,7 @@ export function isGeneratedFile(filePath, options = {}) {
 
 function isGitIgnored(absPath, cwd) {
   try {
-    execFileSync('git', ['check-ignore', '--quiet', '--', absPath], {
+    execSync(`git check-ignore --quiet ${JSON.stringify(absPath)}`, {
       cwd,
       stdio: 'ignore',
     });

package/dist/builtin/workflows/skills/impeccable/scripts/live-accept.mjs

@@ -16,6 +16,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { isGeneratedFile } from './is-generated.mjs';
+import { readBuffer as readManualEditsBuffer, writeBuffer as writeManualEditsBuffer } from './live-manual-edits-buffer.mjs';
 
 const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro'];
 
@@ -38,19 +39,22 @@ Modes:
 Required:
   --id SESSION_ID    Session ID of the variant wrapper
 
+Options:
+  --page-url URL     Current browser page URL; scopes staged copy-edit cleanup
+
 Output (JSON):
   { handled, file, carbonize }`);
     process.exit(0);
   }
 
   const id = argVal(args, '--id');
-  const variantNumRaw = argVal(args, '--variant');
+  const variantNum = argVal(args, '--variant');
   const paramValuesRaw = argVal(args, '--param-values');
+  const pageUrl = argVal(args, '--page-url');
   const isDiscard = args.includes('--discard');
 
   if (!id) { console.error('Missing --id'); process.exit(1); }
-  if (!isDiscard && !variantNumRaw) { console.error('Need --discard or --variant N'); process.exit(1); }
-  const variantNum = isDiscard ? null : parseVariantNumber(variantNumRaw);
+  if (!isDiscard && !variantNum) { console.error('Need --discard or --variant N'); process.exit(1); }
 
   let paramValues = null;
   if (paramValuesRaw) {
@@ -87,16 +91,88 @@ Output (JSON):
     console.log(JSON.stringify({ handled: true, file: relFile, carbonize: false, ...result }));
   } else {
     const result = handleAccept(id, variantNum, lines, targetFile, paramValues);
+    const acceptedOriginalText = result.acceptedOriginalText || '';
+    delete result.acceptedOriginalText;
     // Single-line attention-grabber when cleanup is required. The full
     // five-step checklist lives in reference/live.md (loaded once per
     // session); repeating it per-event would waste tokens.
     if (result.carbonize) {
       result.todo = 'REQUIRED before next poll: carbonize cleanup in ' + relFile + '. See reference/live.md "Required after accept".';
     }
+    // Scrub stash entries whose text appeared inside the just-replaced
+    // original wrap block. The accept embodies those manual edits (wrap was
+    // buffer-aware), so only those scoped ops are redundant.
+    if (result.handled !== false) {
+      try {
+        scrubManualEditsAgainstOriginalBlock(acceptedOriginalText, process.cwd(), pageUrl);
+      } catch {
+        // Non-fatal; the buffer stays as-is and the user can discard later.
+      }
+    }
     console.log(JSON.stringify({ handled: true, file: relFile, ...result }));
   }
 }
 
+/**
+ * After a variant accept rewrites one wrapper, drop only buffer ops whose
+ * text appeared inside that wrapper's original block. The previous file-wide
+ * scrub dropped unrelated staged edits from other components/files whenever
+ * their originalText wasn't present in the just-accepted file.
+ *
+ * Match both originalText and newText because live-wrap rewrites the original
+ * preview block to reflect pending manual edits before variants are generated.
+ */
+function scrubManualEditsAgainstOriginalBlock(originalBlockText, cwd = process.cwd(), pageUrl = null) {
+  const originalBlock = String(originalBlockText || '');
+  if (!originalBlock) return;
+  if (!pageUrl) return;
+  const buffer = readManualEditsBuffer(cwd);
+  if (buffer.entries.length === 0) return;
+  let mutated = false;
+  for (const entry of buffer.entries) {
+    if (entry.pageUrl !== pageUrl) continue;
+    const before = entry.ops.length;
+    entry.ops = entry.ops.filter((op) => {
+      return !manualEditOpAppearsInBlock(op, originalBlock);
+    });
+    if (entry.ops.length !== before) mutated = true;
+  }
+  buffer.entries = buffer.entries.filter((entry) => entry.ops.length > 0);
+  if (mutated) writeManualEditsBuffer(cwd, buffer);
+}
+
+function manualEditOpAppearsInBlock(op, originalBlock) {
+  const candidates = [op?.newText, op?.originalText]
+    .filter((text) => typeof text === 'string' && text.length > 0);
+  return candidates.some((text) => originalBlockHasExactManualText(originalBlock, text));
+}
+
+function originalBlockHasExactManualText(originalBlock, text) {
+  const needle = normalizeManualEditText(text);
+  if (!needle) return false;
+  return manualEditTextSegments(originalBlock).some((segment) => segment === needle);
+}
+
+function manualEditTextSegments(source) {
+  return String(source || '')
+    .replace(/<[^>]*>/g, '\n')
+    .replace(/\{\/\*[\s\S]*?\*\/\}/g, '\n')
+    .replace(/<!--[\s\S]*?-->/g, '\n')
+    .split(/\n+/)
+    .map(normalizeManualEditText)
+    .filter(Boolean);
+}
+
+function normalizeManualEditText(text) {
+  return String(text || '').replace(/\s+/g, ' ').trim();
+}
+
+// Compatibility export for older tests/callers. The unsafe file-wide scrub was
+// removed; callers must pass accepted original-block text for scoped cleanup.
+function scrubManualEditsAgainstFile(_targetFile, cwd = process.cwd(), originalBlockText = '', pageUrl = null) {
+  return scrubManualEditsAgainstOriginalBlock(originalBlockText, cwd, pageUrl);
+}
+
 // ---------------------------------------------------------------------------
 // Discard
 // ---------------------------------------------------------------------------
@@ -147,6 +223,7 @@ function handleAccept(id, variantNum, lines, targetFile, paramValues) {
   // Extract the chosen variant's inner content
   const variantContent = extractVariant(lines, block, variantNum);
   if (!variantContent) return { handled: false, error: 'Variant ' + variantNum + ' not found' };
+  const originalContent = extractOriginal(lines, block);
 
   // Extract CSS block if present
   const cssContent = extractCss(lines, block, id);
@@ -205,7 +282,7 @@ function handleAccept(id, variantNum, lines, targetFile, paramValues) {
   ];
   fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8');
 
-  return { carbonize: needsCarbonize };
+  return { carbonize: needsCarbonize, acceptedOriginalText: originalContent.join('\n') };
 }
 
 // ---------------------------------------------------------------------------
@@ -227,7 +304,7 @@ function findMarkerBlock(id, lines) {
     if (lines[i].includes(endPattern)) { end = i; break; }
   }
 
-  return (start !== -1 && end !== -1) ? { start, end } : null;
+  return (start !== -1 && end !== -1) ? { start, end, id } : null;
 }
 
 /**
@@ -254,11 +331,14 @@ function expandReplaceRange(block, lines, isJsx) {
   // Walk back for the wrapper `<div data-impeccable-variants="..."` opener.
   // The attr may sit on a continuation line of a multi-line opening tag, so
   // also walk to the line that actually contains `<div`.
-  for (let i = start - 1; i >= Math.max(0, start - 12); i--) {
-    if (/data-impeccable-variants=/.test(lines[i])) {
+  for (let i = start - 1; i >= 0; i--) {
+    if (isVariantEndMarkerLine(lines[i], block.id)) break;
+    if (hasVariantWrapperAttr(lines[i], block.id)) {
       let opener = i;
-      while (opener > 0 && !/<div\b/.test(lines[opener])) opener--;
-      start = opener;
+      while (opener > 0 && !/<div\b/.test(lines[opener]) && !isVariantEndMarkerLine(lines[opener], block.id)) {
+        opener--;
+      }
+      if (/<div\b/.test(lines[opener])) start = opener;
       break;
     }
   }
@@ -296,6 +376,19 @@ function expandReplaceRange(block, lines, isJsx) {
   return { start, end };
 }
 
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function isVariantEndMarkerLine(line, id) {
+  return new RegExp('impeccable-variants-end\\s+' + escapeRegExp(id) + '(?:\\s|--|\\*/|$)').test(line);
+}
+
+function hasVariantWrapperAttr(line, id) {
+  const escaped = escapeRegExp(id);
+  return new RegExp(`data-impeccable-variants\\s*=\\s*(?:"${escaped}"|'${escaped}'|\\{["']${escaped}["']\\})`).test(line);
+}
+
 /**
  * Join wrapper lines into a single string with `<style>` elements removed so
  * marker matching and div-depth tracking aren't confused by:
@@ -308,92 +401,50 @@ function expandReplaceRange(block, lines, isJsx) {
 function stripStyleAndJoin(lines, block) {
   const out = [];
   let inStyle = false;
-
   for (let i = block.start; i <= block.end; i++) {
-    const { text, stillInStyle } = stripStyleSegmentsFromLine(lines[i], inStyle);
-    inStyle = stillInStyle;
-    if (text !== null) out.push(text);
-  }
-
-  return out.join('\n');
-}
-
-function stripStyleSegmentsFromLine(line, startsInStyle) {
-  let remaining = line;
-  let output = '';
-  let inStyle = startsInStyle;
-
-  while (remaining.length > 0) {
-    const lower = remaining.toLowerCase();
-
-    if (inStyle) {
-      const closeIdx = lower.indexOf('</style');
-      if (closeIdx === -1) return { text: output || null, stillInStyle: true };
-      const closeEnd = lower.indexOf('>', closeIdx);
-      if (closeEnd === -1) return { text: output || null, stillInStyle: true };
-      remaining = remaining.slice(closeEnd + 1);
-      inStyle = false;
-      continue;
-    }
-
-    const openIdx = lower.indexOf('<style');
-    if (openIdx === -1) {
-      output += remaining;
-      remaining = '';
-      break;
-    }
-
-    output += remaining.slice(0, openIdx);
-    const openEnd = lower.indexOf('>', openIdx);
-    if (openEnd === -1) break;
-
-    const opener = remaining.slice(openIdx, openEnd + 1);
-    if (/\/\s*>$/.test(opener)) {
-      remaining = remaining.slice(openEnd + 1);
-      continue;
-    }
-
-    const afterOpen = remaining.slice(openEnd + 1);
-    const afterOpenLower = afterOpen.toLowerCase();
-    const sameLineClose = afterOpenLower.indexOf('</style');
-    if (sameLineClose === -1) {
-      inStyle = true;
-      remaining = '';
-      break;
-    }
-
-    const closeEnd = afterOpenLower.indexOf('>', sameLineClose);
-    if (closeEnd === -1) {
-      inStyle = true;
-      remaining = '';
-      break;
+    let line = lines[i];
+
+    if (!inStyle) {
+      // Strip any complete <style> elements on this line (self-closed or
+      // same-line-closed), including their body content.
+      line = line
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style\s*>/g, '')
+        .replace(/<style\b[^>]*\/\s*>/g, '');
+
+      // If a <style> opener remains (multi-line body starts here), strip from
+      // the opener to end-of-line and flip into skip mode.
+      const openerIdx = line.search(/<style\b/);
+      if (openerIdx !== -1) {
+        line = line.slice(0, openerIdx);
+        inStyle = true;
+      }
+      out.push(line);
+    } else {
+      // In multi-line style body; drop everything until we see </style>.
+      const closeIdx = line.search(/<\/style\s*>/);
+      if (closeIdx !== -1) {
+        inStyle = false;
+        out.push(line.slice(closeIdx).replace(/<\/style\s*>/, ''));
+      }
+      // else: skip line entirely
     }
-    remaining = afterOpen.slice(closeEnd + 1);
   }
-
-  return { text: output, stillInStyle: inStyle };
+  return out.join('\n');
 }
 
 /**
- * Find the inner content of `<TAG ...attrName="attrValue"...>…</TAG>` inside
- * `text`, handling nested same-tag elements via depth counting. Returns the
- * inner string (may be empty), or null if not found.
+ * Find the inner content of `<TAG ...attrMatch...>…</TAG>` inside `text`,
+ * handling nested same-tag elements via depth counting. `attrMatch` is a
+ * regex source fragment that must appear inside the opener tag.
+ * Returns the inner string (may be empty), or null if not found.
  */
-function extractInnerByAttr(text, attrName, attrValue) {
-  const attrNeedle = attrName + '="' + attrValue + '"';
-  const attrIdx = text.indexOf(attrNeedle);
-  if (attrIdx === -1) return null;
-
-  const openStart = text.lastIndexOf('<', attrIdx);
-  const openEnd = text.indexOf('>', attrIdx);
-  if (openStart === -1 || openEnd === -1 || openStart > attrIdx || openEnd < attrIdx) return null;
-
-  const opener = text.slice(openStart, openEnd + 1);
-  const openMatch = opener.match(/^<([A-Za-z][A-Za-z0-9]*)\b/);
+function extractInnerByAttr(text, attrMatch) {
+  const openerRe = new RegExp('<([A-Za-z][A-Za-z0-9]*)\\b[^>]*' + attrMatch + '[^>]*>');
+  const openMatch = text.match(openerRe);
   if (!openMatch) return null;
 
   const tagName = openMatch[1];
-  const innerStart = openEnd + 1;
+  const innerStart = openMatch.index + openMatch[0].length;
 
   // Match any opener or closer of this tag name after innerStart.
   // (Does not match self-closing <TAG … />, which doesn't contribute to depth.)
@@ -421,7 +472,7 @@ function extractInnerByAttr(text, attrName, attrValue) {
  */
 function extractOriginal(lines, block) {
   const text = stripStyleAndJoin(lines, block);
-  const inner = extractInnerByAttr(text, 'data-impeccable-variant', 'original');
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="original"');
   if (inner === null) return [];
   return inner.split('\n');
 }
@@ -432,7 +483,7 @@ function extractOriginal(lines, block) {
  */
 function extractVariant(lines, block, variantNum) {
   const text = stripStyleAndJoin(lines, block);
-  const inner = extractInnerByAttr(text, 'data-impeccable-variant', String(variantNum));
+  const inner = extractInnerByAttr(text, 'data-impeccable-variant="' + variantNum + '"');
   if (inner === null) return null;
   const result = inner.split('\n');
   // Collapse a lone empty leading/trailing line (common after string splice).
@@ -629,18 +680,10 @@ function argVal(args, flag) {
   return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null;
 }
 
-function parseVariantNumber(value) {
-  if (!/^(?:0|[1-9]\d{0,2})$/.test(value ?? '')) {
-    console.error('Invalid --variant value; expected an integer from 0 to 999');
-    process.exit(1);
-  }
-  return Number(value);
-}
-
 // Auto-execute when run directly
 const _running = process.argv[1];
 if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) {
   acceptCli();
 }
 
-export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax };
+export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax, scrubManualEditsAgainstFile, scrubManualEditsAgainstOriginalBlock };