quiver-cli 0.1.0

package/template/.agents/skills/design/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/template/.agents/skills/design/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/template/.agents/skills/design/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/template/.agents/skills/design/impeccable/scripts/impeccable-paths.mjs

@@ -0,0 +1,126 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export const IMPECCABLE_DIR = '.impeccable';
+export const LIVE_DIR = 'live';
+export const CRITIQUE_DIR = 'critique';
+
+export function getImpeccableDir(cwd = process.cwd()) {
+  return path.join(cwd, IMPECCABLE_DIR);
+}
+
+export function getDesignSidecarPath(cwd = process.cwd()) {
+  return path.join(getImpeccableDir(cwd), 'design.json');
+}
+
+export function getDesignSidecarCandidates(cwd = process.cwd(), contextDir = cwd) {
+  const candidates = [
+    getDesignSidecarPath(cwd),
+    path.join(cwd, 'DESIGN.json'),
+  ];
+  const contextLegacy = path.join(contextDir, 'DESIGN.json');
+  if (!candidates.includes(contextLegacy)) candidates.push(contextLegacy);
+  return candidates;
+}
+
+export function resolveDesignSidecarPath(cwd = process.cwd(), contextDir = cwd) {
+  return firstExisting(getDesignSidecarCandidates(cwd, contextDir));
+}
+
+export function getLiveDir(cwd = process.cwd()) {
+  return path.join(getImpeccableDir(cwd), LIVE_DIR);
+}
+
+export function getLiveConfigPath(cwd = process.cwd()) {
+  return path.join(getLiveDir(cwd), 'config.json');
+}
+
+export function getLegacyLiveConfigPath(scriptsDir) {
+  return path.join(scriptsDir, 'config.json');
+}
+
+export function resolveLiveConfigPath({ cwd = process.cwd(), scriptsDir, env = process.env } = {}) {
+  if (env.IMPECCABLE_LIVE_CONFIG && env.IMPECCABLE_LIVE_CONFIG.trim()) {
+    const configured = env.IMPECCABLE_LIVE_CONFIG.trim();
+    return path.isAbsolute(configured) ? configured : path.resolve(cwd, configured);
+  }
+  const primary = getLiveConfigPath(cwd);
+  if (fs.existsSync(primary)) return primary;
+  if (scriptsDir) {
+    const legacy = getLegacyLiveConfigPath(scriptsDir);
+    if (fs.existsSync(legacy)) return legacy;
+  }
+  return primary;
+}
+
+export function getLiveServerPath(cwd = process.cwd()) {
+  return path.join(getLiveDir(cwd), 'server.json');
+}
+
+export function getLegacyLiveServerPath(cwd = process.cwd()) {
+  return path.join(cwd, '.impeccable-live.json');
+}
+
+export function readLiveServerInfo(cwd = process.cwd()) {
+  for (const filePath of [getLiveServerPath(cwd), getLegacyLiveServerPath(cwd)]) {
+    try {
+      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 */
+    }
+  }
+  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 });
+  fs.writeFileSync(filePath, JSON.stringify(info));
+  return filePath;
+}
+
+export function removeLiveServerInfo(cwd = process.cwd()) {
+  for (const filePath of [getLiveServerPath(cwd), getLegacyLiveServerPath(cwd)]) {
+    try { fs.unlinkSync(filePath); } catch {}
+  }
+}
+
+export function getLiveSessionsDir(cwd = process.cwd()) {
+  return path.join(getLiveDir(cwd), 'sessions');
+}
+
+export function getLegacyLiveSessionsDir(cwd = process.cwd()) {
+  return path.join(cwd, '.impeccable-live', 'sessions');
+}
+
+export function getLiveAnnotationsDir(cwd = process.cwd()) {
+  return path.join(getLiveDir(cwd), 'annotations');
+}
+
+export function getCritiqueDir(cwd = process.cwd()) {
+  return path.join(getImpeccableDir(cwd), CRITIQUE_DIR);
+}
+
+export function getLegacyLiveAnnotationsDir(cwd = process.cwd()) {
+  return path.join(cwd, '.impeccable-live', 'annotations');
+}
+
+function firstExisting(paths) {
+  return paths.find((filePath) => fs.existsSync(filePath)) || null;
+}

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

@@ -0,0 +1,69 @@
+/**
+ * Decide whether a given file is "generated" (regenerated by a build step,
+ * unsafe to write variants into) or "source" (safe to edit, changes persist).
+ *
+ * Why this matters: when the user picks an element on a page whose underlying
+ * file is regenerated by a build step (e.g. `scripts/build-sub-pages.js`
+ * rewriting `public/docs/*.html`), writing variants or accepted changes into
+ * that file is silent data loss — the next build wipes them.
+ *
+ * Signals, in order of reliability:
+ *   1. Git check-ignore: gitignored files are assumed generated.
+ *   2. File-header markers ("GENERATED", "DO NOT EDIT", "AUTO-GENERATED")
+ *      within the first ~300 characters — catches non-git projects.
+ */
+
+import { execSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const HEADER_SCAN_BYTES = 300;
+const HEADER_MARKERS = [
+  /@generated\b/i,
+  /\bGENERATED\s+FILE\b/,
+  /\bAUTO-?GENERATED\b/i,
+  /\bDO\s+NOT\s+EDIT\b/i,
+];
+
+/**
+ * @param {string} filePath - absolute or cwd-relative path
+ * @param {object} [options]
+ * @param {string} [options.cwd] - project root (defaults to process.cwd())
+ */
+export function isGeneratedFile(filePath, options = {}) {
+  const cwd = options.cwd || process.cwd();
+  const absPath = path.isAbsolute(filePath) ? filePath : path.resolve(cwd, filePath);
+
+  if (isGitIgnored(absPath, cwd)) return true;
+  if (hasGeneratedHeader(absPath)) return true;
+  return false;
+}
+
+function isGitIgnored(absPath, cwd) {
+  try {
+    execSync(`git check-ignore --quiet ${JSON.stringify(absPath)}`, {
+      cwd,
+      stdio: 'ignore',
+    });
+    return true; // exit 0 = ignored
+  } catch (err) {
+    // Exit code 1 = not ignored. Exit code 128 = not a git repo or other error.
+    // In both cases, treat as "not known to be ignored."
+    return false;
+  }
+}
+
+function hasGeneratedHeader(absPath) {
+  let fd;
+  try {
+    fd = fs.openSync(absPath, 'r');
+    const buf = Buffer.alloc(HEADER_SCAN_BYTES);
+    const bytesRead = fs.readSync(fd, buf, 0, HEADER_SCAN_BYTES, 0);
+    const head = buf.slice(0, bytesRead).toString('utf-8');
+    return HEADER_MARKERS.some((re) => re.test(head));
+  } catch {
+    return false;
+  } finally {
+    if (fd !== undefined) { try { fs.closeSync(fd); } catch {} }
+  }
+}