quiver-cli 1.3.0 → 1.3.1

package/template/.agents/skills/design/impeccable/scripts/lib/image-metrics.mjs

@@ -0,0 +1,306 @@
+/**
+ * Perceptual measures for comparing a comp with a build screenshot. Pure
+ * functions over `{ width, height, data }` RGBA images; no I/O.
+ *
+ * Three families, because a build fails a comp in three separable ways:
+ *
+ * - structure: is the composition the same? Measured as SSIM over a blurred
+ *   grayscale downsample, which forgives font hinting and a few pixels of
+ *   drift and punishes a moved, missing, or invented region.
+ * - color: is the palette and its distribution the same? Histogram
+ *   intersection in a coarse quantized space plus a dominant-color extraction,
+ *   so a navy page built from a bone comp fails even if the shapes match.
+ * - detail: is the material there? Local high-frequency energy per cell. A
+ *   comp with an illustration, texture, or photograph carries energy a flat
+ *   CSS stand-in does not; the ratio build/comp per region is the most direct
+ *   measure of "the plate got replaced by a gradient".
+ */
+import { resize } from './raster.mjs';
+
+export function toGray(img) {
+  const g = new Float32Array(img.width * img.height);
+  for (let i = 0, p = 0; i < g.length; i++, p += 4) {
+    const a = img.data[p + 3] / 255;
+    // composite over white so transparent regions read as the page ground
+    const r = img.data[p] * a + 255 * (1 - a), gg = img.data[p + 1] * a + 255 * (1 - a), b = img.data[p + 2] * a + 255 * (1 - a);
+    g[i] = 0.2126 * r + 0.7152 * gg + 0.0722 * b;
+  }
+  return { width: img.width, height: img.height, data: g };
+}
+
+/** Separable box blur on a float gray image, radius r. */
+export function blurGray(gray, r) {
+  if (r <= 0) return gray;
+  const { width, height, data } = gray;
+  const tmp = new Float32Array(data.length), out = new Float32Array(data.length);
+  const win = 2 * r + 1;
+  for (let y = 0; y < height; y++) {
+    let acc = 0;
+    for (let x = -r; x <= r; x++) acc += data[y * width + Math.min(width - 1, Math.max(0, x))];
+    for (let x = 0; x < width; x++) {
+      tmp[y * width + x] = acc / win;
+      const outX = x - r, inX = x + r + 1;
+      acc += data[y * width + Math.min(width - 1, inX)] - data[y * width + Math.max(0, outX)];
+    }
+  }
+  for (let x = 0; x < width; x++) {
+    let acc = 0;
+    for (let y = -r; y <= r; y++) acc += tmp[Math.min(height - 1, Math.max(0, y)) * width + x];
+    for (let y = 0; y < height; y++) {
+      out[y * width + x] = acc / win;
+      const outY = y - r, inY = y + r + 1;
+      acc += tmp[Math.min(height - 1, inY) * width + x] - tmp[Math.max(0, outY) * width + x];
+    }
+  }
+  return { width, height, data: out };
+}
+
+/** Global SSIM between two same-size gray images using an 8x8 window grid. */
+export function ssim(a, b, win = 8) {
+  if (a.width !== b.width || a.height !== b.height) throw new Error('ssim: size mismatch');
+  const C1 = (0.01 * 255) ** 2, C2 = (0.03 * 255) ** 2;
+  let total = 0, n = 0;
+  for (let y = 0; y + win <= a.height; y += win) {
+    for (let x = 0; x + win <= a.width; x += win) {
+      let ma = 0, mb = 0;
+      for (let yy = 0; yy < win; yy++) for (let xx = 0; xx < win; xx++) { const i = (y + yy) * a.width + x + xx; ma += a.data[i]; mb += b.data[i]; }
+      ma /= win * win; mb /= win * win;
+      let va = 0, vb = 0, cov = 0;
+      for (let yy = 0; yy < win; yy++) for (let xx = 0; xx < win; xx++) { const i = (y + yy) * a.width + x + xx; const da = a.data[i] - ma, db = b.data[i] - mb; va += da * da; vb += db * db; cov += da * db; }
+      va /= win * win - 1; vb /= win * win - 1; cov /= win * win - 1;
+      total += ((2 * ma * mb + C1) * (2 * cov + C2)) / ((ma * ma + mb * mb + C1) * (va + vb + C2));
+      n++;
+    }
+  }
+  return n ? total / n : 1;
+}
+
+/** SSIM of `a` against `b` shifted by (dx, dy); the overlap is compared, edges dropped. */
+export function ssimShifted(a, b, dx, dy, win = 8) {
+  const w = a.width - Math.abs(dx), h = a.height - Math.abs(dy);
+  if (w < win || h < win) return 0;
+  const sa = { width: w, height: h, data: new Float32Array(w * h) };
+  const sb = { width: w, height: h, data: new Float32Array(w * h) };
+  const ax = Math.max(0, -dx), ay = Math.max(0, -dy), bx = Math.max(0, dx), by = Math.max(0, dy);
+  for (let y = 0; y < h; y++) {
+    sa.data.set(a.data.subarray((y + ay) * a.width + ax, (y + ay) * a.width + ax + w), y * w);
+    sb.data.set(b.data.subarray((y + by) * b.width + bx, (y + by) * b.width + bx + w), y * w);
+  }
+  return ssim(sa, sb, win);
+}
+
+/**
+ * Structure score 0..1: SSIM over blurred grayscale at a fixed working width,
+ * taking the best of a small translation search so a composition that sits a
+ * few pixels off (a different masthead height, a scrollbar) is not read as a
+ * different composition. Shifts up to ~4% of the width are forgiven; a moved
+ * region is not.
+ */
+export function structureScore(imgA, imgB, workWidth = 256) {
+  const h = Math.max(8, Math.round((imgA.height / imgA.width) * workWidth));
+  const a = blurGray(toGray(resize(imgA, workWidth, h)), 2);
+  const b = blurGray(toGray(resize(imgB, workWidth, h)), 2);
+  const win = Math.min(8, Math.max(2, Math.floor(Math.min(workWidth, h) / 8)));
+  let best = ssim(a, b, win);
+  const maxShift = Math.max(2, Math.round(workWidth * 0.04));
+  for (const dy of [-maxShift, -maxShift / 2, 0, maxShift / 2, maxShift]) {
+    for (const dx of [-maxShift, -maxShift / 2, 0, maxShift / 2, maxShift]) {
+      if (!dx && !dy) continue;
+      best = Math.max(best, ssimShifted(a, b, Math.round(dx), Math.round(dy), win));
+    }
+  }
+  return Math.max(0, Math.min(1, best));
+}
+
+// ---- color -----------------------------------------------------------------
+
+function rgbToLab(r, g, b) {
+  const lin = (c) => { c /= 255; return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
+  const R = lin(r), G = lin(g), B = lin(b);
+  const X = (R * 0.4124 + G * 0.3576 + B * 0.1805) / 0.95047;
+  const Y = (R * 0.2126 + G * 0.7152 + B * 0.0722) / 1.0;
+  const Z = (R * 0.0193 + G * 0.1192 + B * 0.9505) / 1.08883;
+  const f = (t) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116);
+  const fx = f(X), fy = f(Y), fz = f(Z);
+  return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - fz)];
+}
+
+export function deltaE(lab1, lab2) {
+  return Math.hypot(lab1[0] - lab2[0], lab1[1] - lab2[1], lab1[2] - lab2[2]);
+}
+
+/** Quantized color histogram (4 bits per channel = 4096 bins), normalized. */
+export function colorHistogram(img, sampleStep = 2) {
+  const bins = new Float32Array(4096);
+  let n = 0;
+  for (let y = 0; y < img.height; y += sampleStep) {
+    for (let x = 0; x < img.width; x += sampleStep) {
+      const p = (y * img.width + x) * 4;
+      if (img.data[p + 3] < 16) continue;
+      const key = ((img.data[p] >> 4) << 8) | ((img.data[p + 1] >> 4) << 4) | (img.data[p + 2] >> 4);
+      bins[key]++; n++;
+    }
+  }
+  if (n) for (let i = 0; i < bins.length; i++) bins[i] /= n;
+  return bins;
+}
+
+export function histogramIntersection(h1, h2) {
+  let s = 0;
+  for (let i = 0; i < h1.length; i++) s += Math.min(h1[i], h2[i]);
+  return s;
+}
+
+/**
+ * Dominant colors: merge histogram bins greedily by Lab distance into up to
+ * `k` clusters and return them sorted by coverage.
+ */
+export function dominantColors(img, k = 6, sampleStep = 3) {
+  const hist = colorHistogram(img, sampleStep);
+  const entries = [];
+  for (let i = 0; i < hist.length; i++) if (hist[i] > 0.0005) entries.push({ key: i, w: hist[i] });
+  entries.sort((a, b) => b.w - a.w);
+  const clusters = [];
+  for (const e of entries) {
+    const r = ((e.key >> 8) & 15) * 16 + 8, g = ((e.key >> 4) & 15) * 16 + 8, b = (e.key & 15) * 16 + 8;
+    const lab = rgbToLab(r, g, b);
+    let best = null, bestD = Infinity;
+    for (const c of clusters) { const d = deltaE(c.lab, lab); if (d < bestD) { bestD = d; best = c; } }
+    if (best && bestD < 14) {
+      const tw = best.w + e.w;
+      best.rgb = [(best.rgb[0] * best.w + r * e.w) / tw, (best.rgb[1] * best.w + g * e.w) / tw, (best.rgb[2] * best.w + b * e.w) / tw];
+      best.lab = rgbToLab(...best.rgb); best.w = tw;
+    } else clusters.push({ rgb: [r, g, b], lab, w: e.w });
+  }
+  clusters.sort((a, b) => b.w - a.w);
+  const top = clusters.slice(0, k);
+  const covered = top.reduce((s, c) => s + c.w, 0) || 1;
+  return top.map((c) => ({ hex: toHex(c.rgb), coverage: +(c.w / covered).toFixed(4), lab: c.lab }));
+}
+
+export function toHex(rgb) {
+  return '#' + rgb.map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
+}
+
+/**
+ * Palette match 0..1: for each dominant comp color, coverage-weighted best
+ * Lab match in the build's dominant set (dE 0 -> 1, dE >= 25 -> 0).
+ */
+export function paletteMatch(compColors, buildColors) {
+  if (!compColors.length) return 1;
+  let s = 0, wsum = 0;
+  for (const c of compColors) {
+    let best = Infinity;
+    for (const b of buildColors) best = Math.min(best, deltaE(c.lab, b.lab));
+    s += c.coverage * Math.max(0, 1 - best / 25); wsum += c.coverage;
+  }
+  return wsum ? s / wsum : 1;
+}
+
+/** Color score 0..1: blend of histogram intersection and dominant-palette match. */
+export function colorScore(imgA, imgB) {
+  const inter = histogramIntersection(colorHistogram(imgA), colorHistogram(imgB));
+  const pm = paletteMatch(dominantColors(imgA), dominantColors(imgB));
+  return { score: 0.35 * inter + 0.65 * pm, intersection: inter, paletteMatch: pm };
+}
+
+// ---- detail ----------------------------------------------------------------
+
+/** Mean absolute gradient (Sobel-lite) per cell over a cols x rows grid. */
+export function detailGrid(img, cols = 12, rows = 8, workWidth = 512) {
+  const h = Math.max(rows, Math.round((img.height / img.width) * workWidth));
+  const g = toGray(resize(img, workWidth, h));
+  const grid = new Float32Array(cols * rows);
+  const counts = new Float32Array(cols * rows);
+  for (let y = 1; y < g.height - 1; y++) {
+    const cy = Math.min(rows - 1, Math.floor((y / g.height) * rows));
+    for (let x = 1; x < g.width - 1; x++) {
+      const cx = Math.min(cols - 1, Math.floor((x / g.width) * cols));
+      const i = y * g.width + x;
+      const gx = Math.abs(g.data[i + 1] - g.data[i - 1]);
+      const gy = Math.abs(g.data[i + g.width] - g.data[i - g.width]);
+      grid[cy * cols + cx] += gx + gy; counts[cy * cols + cx]++;
+    }
+  }
+  for (let i = 0; i < grid.length; i++) grid[i] = counts[i] ? grid[i] / counts[i] : 0;
+  return { cols, rows, cells: grid };
+}
+
+/**
+ * Detail score 0..1 and per-cell ratio. Cells where the comp is nearly flat
+ * are ignored (nothing to lose); the score is the coverage-weighted mean of
+ * min(1, build/comp) over cells with comp energy, so extra detail in the
+ * build (invented chrome) is reported separately as `added`.
+ */
+export function detailScore(imgA, imgB, cols = 12, rows = 8) {
+  const a = detailGrid(imgA, cols, rows), b = detailGrid(imgB, cols, rows);
+  const floor = 1.5; // energy below this is a flat field at the 512px working width
+  let s = 0, w = 0, added = 0, addedW = 0;
+  const ratios = new Float32Array(cols * rows);
+  for (let i = 0; i < a.cells.length; i++) {
+    const ca = a.cells[i], cb = b.cells[i];
+    ratios[i] = ca > floor ? cb / ca : (cb > floor ? Infinity : 1);
+    // Signed: too much energy is as wrong as too little. Noise, a tile
+    // shuffle, or a mosaic saturate a one-sided ratio; a real plate does not.
+    if (ca > floor) { s += Math.min(cb / ca, ca / cb) * ca; w += ca; }
+    if (cb > ca * 1.8 && cb > floor * 2) { added += 1; }
+    addedW += 1;
+  }
+  const addedFraction = addedW ? added / addedW : 0;
+  const raw = w ? s / w : 1;
+  return { score: Math.max(0, raw - 0.5 * addedFraction), rawScore: raw, addedFraction, comp: a, build: b, ratios };
+}
+
+// ---- pixel diff -----------------------------------------------------------
+
+/** Per-pixel Lab-ish difference map (0..1) at a working width; blurred a little. */
+export function diffMap(imgA, imgB, workWidth = 384) {
+  const h = Math.max(8, Math.round((imgA.height / imgA.width) * workWidth));
+  const a = resize(imgA, workWidth, h), b = resize(imgB, workWidth, h);
+  const out = new Float32Array(workWidth * h);
+  for (let i = 0, p = 0; i < out.length; i++, p += 4) {
+    const dr = a.data[p] - b.data[p], dg = a.data[p + 1] - b.data[p + 1], db = a.data[p + 2] - b.data[p + 2];
+    out[i] = Math.min(1, Math.sqrt(dr * dr + dg * dg + db * db) / 200);
+  }
+  return blurGray({ width: workWidth, height: h, data: out }, 1);
+}
+
+// ---- bands (horizontal layout structure) ---------------------------------
+
+/**
+ * Detect horizontal band boundaries: rows where the mean color changes
+ * sharply. Returns normalized y positions (0..1) with strengths. This is the
+ * "layout grid" read of a page: header / hero / index / footer as bands.
+ */
+export function horizontalBands(img, workWidth = 128, minGap = 0.02) {
+  const h = Math.max(16, Math.round((img.height / img.width) * workWidth));
+  const s = resize(img, workWidth, h);
+  const rowMean = new Float32Array(h * 3);
+  for (let y = 0; y < h; y++) {
+    let r = 0, g = 0, b = 0;
+    for (let x = 0; x < workWidth; x++) { const p = (y * workWidth + x) * 4; r += s.data[p]; g += s.data[p + 1]; b += s.data[p + 2]; }
+    rowMean[y * 3] = r / workWidth; rowMean[y * 3 + 1] = g / workWidth; rowMean[y * 3 + 2] = b / workWidth;
+  }
+  const edges = [];
+  for (let y = 1; y < h; y++) {
+    const d = Math.hypot(rowMean[y * 3] - rowMean[(y - 1) * 3], rowMean[y * 3 + 1] - rowMean[(y - 1) * 3 + 1], rowMean[y * 3 + 2] - rowMean[(y - 1) * 3 + 2]);
+    if (d > 18) edges.push({ y: y / h, strength: Math.min(1, d / 120) });
+  }
+  // merge close edges
+  const merged = [];
+  for (const e of edges) {
+    const last = merged[merged.length - 1];
+    if (last && e.y - last.y < minGap) { if (e.strength > last.strength) { last.y = e.y; last.strength = e.strength; } }
+    else merged.push({ ...e });
+  }
+  return merged;
+}
+
+/** Band agreement 0..1: fraction of comp bands with a build band within tolerance, and vice versa. */
+export function bandScore(bandsA, bandsB, tol = 0.04) {
+  if (!bandsA.length && !bandsB.length) return 1;
+  const match = (from, to) => from.filter((a) => to.some((b) => Math.abs(a.y - b.y) <= tol)).length;
+  const recall = bandsA.length ? match(bandsA, bandsB) / bandsA.length : 1;
+  const precision = bandsB.length ? match(bandsB, bandsA) / bandsB.length : 1;
+  return 0.6 * recall + 0.4 * precision;
+}

package/template/.agents/skills/design/impeccable/scripts/lib/impeccable-config.mjs

@@ -206,10 +206,10 @@ function parseIgnoreColor(value) {
   if (rgb) {
     const parts = splitColorArgs(rgb[1]);
     if (parts.length < 3 || parts.length > 4) return null;
-    const r = parseRgbChannel(parts[0]);
-    const g = parseRgbChannel(parts[1]);
-    const b = parseRgbChannel(parts[2]);
-    const a = parts[3] === undefined ? 1 : parseAlphaChannel(parts[3]);
+    const r = parseColorChannel(parts[0], COLOR_CHANNEL_FORMATS.rgb);
+    const g = parseColorChannel(parts[1], COLOR_CHANNEL_FORMATS.rgb);
+    const b = parseColorChannel(parts[2], COLOR_CHANNEL_FORMATS.rgb);
+    const a = parts[3] === undefined ? 1 : parseColorChannel(parts[3], COLOR_CHANNEL_FORMATS.alpha);
     if ([r, g, b, a].some((v) => v === null)) return null;
     return { r, g, b, a };
   }
@@ -218,10 +218,10 @@ function parseIgnoreColor(value) {
   if (hsl) {
     const parts = splitColorArgs(hsl[1]);
     if (parts.length < 3 || parts.length > 4) return null;
-    const h = parseHueChannel(parts[0]);
-    const s = parsePercentChannel(parts[1]);
-    const l = parsePercentChannel(parts[2]);
-    const a = parts[3] === undefined ? 1 : parseAlphaChannel(parts[3]);
+    const h = parseColorChannel(parts[0], COLOR_CHANNEL_FORMATS.hue);
+    const s = parseColorChannel(parts[1], COLOR_CHANNEL_FORMATS.percent);
+    const l = parseColorChannel(parts[2], COLOR_CHANNEL_FORMATS.percent);
+    const a = parts[3] === undefined ? 1 : parseColorChannel(parts[3], COLOR_CHANNEL_FORMATS.alpha);
     if ([h, s, l, a].some((v) => v === null)) return null;
     return hslToRgb(h, s, l, a);
   }
@@ -230,18 +230,13 @@ function parseIgnoreColor(value) {
 }
 
 function parseHexIgnoreColor(hex) {
-  if (hex.length === 3 || hex.length === 4) {
-    const r = parseInt(hex[0] + hex[0], 16);
-    const g = parseInt(hex[1] + hex[1], 16);
-    const b = parseInt(hex[2] + hex[2], 16);
-    const a = hex.length === 4 ? parseInt(hex[3] + hex[3], 16) / 255 : 1;
-    return { r, g, b, a };
-  }
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
-  return { r, g, b, a };
+  const expanded = hex.length <= 4
+    ? [...hex].map((digit) => digit.repeat(2)).join('')
+    : hex;
+  const [r, g, b, alpha = 255] = expanded
+    .match(/../g)
+    .map((channel) => Number.parseInt(channel, 16));
+  return { r, g, b, a: alpha / 255 };
 }
 
 function splitColorArgs(body) {
@@ -259,47 +254,34 @@ function splitColorArgs(body) {
   return text.replace(/\s*\/\s*/g, ' / ').split(/\s+/).filter((part) => part && part !== '/');
 }
 
-function parseRgbChannel(raw) {
-  const text = String(raw || '').trim();
-  const match = text.match(/^(-?\d*\.?\d+)(%)?$/);
-  if (!match) return null;
-  const value = Number.parseFloat(match[1]);
-  if (!Number.isFinite(value)) return null;
-  const scaled = match[2] ? value * 2.55 : value;
-  if (scaled < 0 || scaled > 255) return null;
-  return Math.round(scaled);
-}
-
-function parseAlphaChannel(raw) {
-  const text = String(raw || '').trim();
-  const match = text.match(/^(-?\d*\.?\d+)(%)?$/);
-  if (!match) return null;
-  const value = Number.parseFloat(match[1]);
-  if (!Number.isFinite(value)) return null;
-  const alpha = match[2] ? value / 100 : value;
-  return alpha >= 0 && alpha <= 1 ? alpha : null;
-}
-
-function parseHueChannel(raw) {
-  const text = String(raw || '').trim();
-  const match = text.match(/^(-?\d*\.?\d+)(deg|rad|turn|grad)?$/);
-  if (!match) return null;
-  const value = Number.parseFloat(match[1]);
-  if (!Number.isFinite(value)) return null;
-  const unit = match[2] || 'deg';
-  if (unit === 'turn') return value * 360;
-  if (unit === 'rad') return value * (180 / Math.PI);
-  if (unit === 'grad') return value * 0.9;
-  return value;
-}
-
-function parsePercentChannel(raw) {
+const CSS_NUMBER_RE = /^(-?\d*\.?\d+)(%|deg|rad|turn|grad)?$/;
+const identity = (value) => value;
+const COLOR_CHANNEL_FORMATS = {
+  rgb: { units: { '': identity, '%': (value) => value * 2.55 }, min: 0, max: 255, round: true },
+  alpha: { units: { '': identity, '%': (value) => value / 100 }, min: 0, max: 1 },
+  hue: {
+    units: {
+      '': identity,
+      deg: identity,
+      rad: (value) => value * (180 / Math.PI),
+      turn: (value) => value * 360,
+      grad: (value) => value * 0.9,
+    },
+  },
+  percent: { units: { '%': (value) => value / 100 }, min: 0, max: 1 },
+};
+
+function parseColorChannel(raw, { units, min = -Infinity, max = Infinity, round = false }) {
   const text = String(raw || '').trim();
-  const match = text.match(/^(-?\d*\.?\d+)%$/);
+  const match = text.match(CSS_NUMBER_RE);
   if (!match) return null;
-  const value = Number.parseFloat(match[1]);
-  if (!Number.isFinite(value)) return null;
-  return value >= 0 && value <= 100 ? value / 100 : null;
+  const convert = units[match[2] || ''];
+  if (!convert) return null;
+  const number = Number.parseFloat(match[1]);
+  if (!Number.isFinite(number)) return null;
+  const value = convert(number);
+  if (value < min || value > max) return null;
+  return round ? Math.round(value) : value;
 }
 
 function hslToRgb(hue, saturation, lightness, alpha) {

package/template/.agents/skills/design/impeccable/scripts/lib/is-generated.mjs

@@ -13,7 +13,7 @@
  *      within the first ~300 characters — catches non-git projects.
  */
 
-import { execSync } from 'node:child_process';
+import { execFileSync } from 'node:child_process';
 import fs from 'node:fs';
 import path from 'node:path';
 
@@ -41,7 +41,10 @@ export function isGeneratedFile(filePath, options = {}) {
 
 function isGitIgnored(absPath, cwd) {
   try {
-    execSync(`git check-ignore --quiet ${JSON.stringify(absPath)}`, {
+    // argv form, never a shell: this runs on every file the live-mode source
+    // walk reaches, so a hostile filename embedding $(...) or backticks must
+    // not be interpretable (issue #476). JSON.stringify is not shell quoting.
+    execFileSync('git', ['check-ignore', '--quiet', absPath], {
       cwd,
       stdio: 'ignore',
     });

package/template/.agents/skills/design/impeccable/scripts/lib/live-path-globs.mjs

@@ -0,0 +1,37 @@
+/**
+ * Convert a live-config glob pattern to a RegExp.
+ *
+ * Supports `**` across path segments, `*` within one segment, and `?` for one
+ * character. Callers normalize project-relative paths to forward slashes.
+ */
+export function livePathGlobToRegex(pattern) {
+  let re = '';
+  let i = 0;
+  while (i < pattern.length) {
+    const c = pattern[i];
+    if (c === '*') {
+      if (pattern[i + 1] === '*') {
+        if (pattern[i + 2] === '/') {
+          re += '(?:.*/)?';
+          i += 3;
+        } else {
+          re += '.*';
+          i += 2;
+        }
+      } else {
+        re += '[^/]*';
+        i += 1;
+      }
+    } else if (c === '?') {
+      re += '[^/]';
+      i += 1;
+    } else if (/[.+^${}()|[\]\\]/.test(c)) {
+      re += `\\${c}`;
+      i += 1;
+    } else {
+      re += c;
+      i += 1;
+    }
+  }
+  return new RegExp(`^${re}$`);
+}

package/template/.agents/skills/design/impeccable/scripts/lib/open-system-browser.mjs

@@ -0,0 +1,26 @@
+import { spawn } from 'node:child_process';
+
+export function browserOpenCommand(url, {
+  platform = process.platform,
+  comspec = process.env.ComSpec || process.env.COMSPEC || 'cmd.exe',
+} = {}) {
+  if (platform === 'darwin') return { command: 'open', args: [url] };
+  if (platform === 'win32') return { command: comspec, args: ['/c', 'start', '', url] };
+  return { command: 'xdg-open', args: [url] };
+}
+
+export function openSystemBrowser(url, {
+  platform = process.platform,
+  comspec = process.env.ComSpec || process.env.COMSPEC || 'cmd.exe',
+  spawnImpl = spawn,
+} = {}) {
+  const { command, args } = browserOpenCommand(url, { platform, comspec });
+  try {
+    const child = spawnImpl(command, args, { stdio: 'ignore', detached: true });
+    child.on('error', () => {});
+    child.unref();
+    return true;
+  } catch {
+    return false;
+  }
+}