@litfamily/lithermes 1.0.7 → 1.0.9

package/assets/lithermes-plugin/skills/frontend-ui-ux/scripts/probe-page.js

@@ -0,0 +1,311 @@
+(() => {
+  const T = __UIUX_THRESHOLDS__;
+  const findings = [];
+  const viewport = __UIUX_VIEWPORT__;
+  const not_verified = [];
+  const selector = (element) => element === document.documentElement ? 'html' :
+    `${element.tagName.toLowerCase()}${element.id ? `#${CSS.escape(element.id)}` : ''}`;
+  const add = (rule, severity, element, value, threshold, tier = 'measured', note) => {
+    findings.push({ rule, severity, tier, viewport, selector: selector(element), value, threshold,
+      ...(note ? { note } : {}) });
+  };
+  const visible = (element) => {
+    const box = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    return box.width > 1 && box.height > 1 && style.display !== 'none' && style.visibility !== 'hidden' &&
+      !element.closest('[aria-hidden="true"],[hidden],[inert]') &&
+      !element.matches('.sr-only,.visually-hidden,.visuallyhidden') &&
+      style.clipPath !== 'inset(50%)' && !/^rect\(0/.test(style.clip) &&
+      box.right >= -9000 && box.left <= innerWidth + 9000;
+  };
+  const proseText = (element) => !element.closest('code,pre,kbd,blockquote,q,script,style,textarea,select');
+  const authoredText = (element) => !element.closest('code,pre,kbd,script,style,textarea,select');
+  const externalQuote = (element) => {
+    const quote = element.closest('q,blockquote');
+    if (!quote?.cite) return false;
+    try { return new URL(quote.cite, location.href).origin !== location.origin; } catch { return false; }
+  };
+  const rgb = (value) => {
+    const match = value.match(/^rgba?\(([^)]+)\)/);
+    if (!match) return null;
+    const parts = match[1].split(/[\s,\/]+/).filter(Boolean).map(Number);
+    return parts.length >= 3 && parts.slice(0, 3).every(Number.isFinite) ? parts : null;
+  };
+  const composite = (foreground, background) => {
+    const alpha = foreground[3] === undefined ? 1 : foreground[3];
+    return foreground.slice(0, 3).map((channel, index) => channel * alpha + background[index] * (1 - alpha));
+  };
+  const background = (element) => {
+    let color = [255, 255, 255];
+    const lineage = [];
+    for (let node = element; node instanceof Element; node = node.parentElement) lineage.unshift(node);
+    for (const node of lineage) {
+      const part = rgb(getComputedStyle(node).backgroundColor);
+      if (part) color = composite(part, color);
+    }
+    return color;
+  };
+  const imageBehind = (element) => {
+    for (let node = element; node instanceof Element; node = node.parentElement)
+      if (getComputedStyle(node).backgroundImage !== 'none') return true;
+    return false;
+  };
+  const luminance = (color) => {
+    const channel = (value) => {
+      const fraction = value / 255;
+      return fraction <= 0.04045 ? fraction / 12.92 : ((fraction + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * channel(color[0]) + 0.7152 * channel(color[1]) + 0.0722 * channel(color[2]);
+  };
+  const hueSaturation = (color) => {
+    const [r, g, b] = color.slice(0, 3).map((value) => value / 255);
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
+    const lightness = (max + min) / 2;
+    const saturation = delta ? delta / (1 - Math.abs(2 * lightness - 1)) : 0;
+    let hue = 0;
+    if (delta) hue = max === r ? ((g - b) / delta) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4;
+    return { hue: (hue * 60 + 360) % 360, saturation, lightness };
+  };
+  const pageWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
+  if (pageWidth > innerWidth + T.pageOverflowPx) add('RS-006', 'HIGH', document.documentElement, pageWidth, innerWidth + T.pageOverflowPx);
+  const textElements = [...document.querySelectorAll('body *')].filter((element) =>
+    visible(element) && [...element.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim()));
+  for (const element of textElements) {
+    const style = getComputedStyle(element);
+    const box = element.getBoundingClientRect();
+    const clipped = (/(hidden|clip)/.test(style.overflowX) && style.textOverflow !== 'ellipsis' && element.scrollWidth > element.clientWidth + T.elementClipPx) ||
+      (/(hidden|clip)/.test(style.overflowY) && !/^[1-9]/.test(style.webkitLineClamp) && !/^[1-9]/.test(style.lineClamp) && element.scrollHeight > element.clientHeight + T.elementClipPx);
+    if (clipped || box.right > innerWidth + T.offscreenPx || box.left < -T.offscreenPx) {
+      add('RS-007', 'HIGH', element,
+        { clipped, left: Math.round(box.left), right: Math.round(box.right) }, `within ${innerWidth}px`);
+    }
+    const foreground = rgb(style.color);
+    if (element.closest(':disabled,[aria-disabled="true"]')) continue;
+    if (foreground && foreground[3] !== 0 && !imageBehind(element)) {
+      const back = background(element);
+      const ink = composite(foreground, back);
+      const a = luminance(ink), b = luminance(back);
+      const ratio = (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+      const large = parseFloat(style.fontSize) >= T.largeTextPx || (parseFloat(style.fontSize) >= T.boldTextPx && Number(style.fontWeight) >= T.boldWeight);
+      const floor = large ? T.largeContrast : T.bodyContrast;
+      if (ratio < floor) add('CF-201', large ? 'MEDIUM' : 'HIGH', element, Number(ratio.toFixed(2)), floor, 'derived');
+    } else if (imageBehind(element)) not_verified.push({ rule: 'CF-201', viewport, reason: `${selector(element)}: image or gradient background` });
+  }
+  const controls = [...document.querySelectorAll('a,button,input,select,textarea,[role="button"],[role="link"],[tabindex]')].filter(visible);
+  const firstEmphasis = controls.find((element) => element.matches('button,.primary,[data-primary]') &&
+    getComputedStyle(element).backgroundColor !== 'rgba(0, 0, 0, 0)');
+  for (const element of controls) {
+    if (!visible(element)) continue;
+    const box = element.getBoundingClientRect();
+    if (element.matches('a') && element.parentElement?.matches('p,li') && element.parentElement.textContent.trim().length > element.textContent.trim().length) continue;
+    const primary = element === firstEmphasis || element.matches('button[type=submit]') &&
+      element.form && [...element.form.querySelectorAll('button[type=submit]')].length === 1;
+    const spaced = controls.every((other) => {
+      if (other === element) return true;
+      const peer = other.getBoundingClientRect();
+      const cx = box.left + box.width / 2, cy = box.top + box.height / 2;
+      const px = peer.left + peer.width / 2, py = peer.top + peer.height / 2;
+      return Math.hypot(cx - px, cy - py) >= T.hitMinimumPx;
+    });
+    if ((box.width < T.hitMinimumPx || box.height < T.hitMinimumPx) && !spaced) add('CF-701', 'HIGH', element,
+      { width: Math.round(box.width), height: Math.round(box.height) }, T.hitMinimumPx);
+    else if (innerWidth <= T.touchViewportPx && (box.width < T.hitRecommendedPx || box.height < T.hitRecommendedPx)) add('CF-701', primary ? 'HIGH' : 'MEDIUM', element,
+      { width: Math.round(box.width), height: Math.round(box.height) }, T.hitRecommendedPx);
+    if (innerWidth <= T.touchViewportPx && element.matches('input:not([type]),input:is([type=text],[type=email],[type=number],[type=password],[type=search],[type=tel],[type=url]),select,textarea,[contenteditable]') && parseFloat(getComputedStyle(element).fontSize) < T.mobileInputPx)
+      add('RS-008', 'MEDIUM', element, parseFloat(getComputedStyle(element).fontSize), T.mobileInputPx);
+    if (!element.matches('input[type=hidden]') && !element.getAttribute('aria-label') && !element.getAttribute('aria-labelledby') &&
+        !element.textContent.trim() && !element.labels?.length && !element.getAttribute('title'))
+      add('CF-603', 'HIGH', element, 'empty accessible name', 'discoverable name');
+    if (element.matches('input[placeholder],textarea[placeholder]')) {
+      const placeholder = rgb(getComputedStyle(element, '::placeholder').color);
+      if (placeholder && !imageBehind(element)) {
+        const back = background(element), ink = composite(placeholder, back);
+        const a = luminance(ink), b = luminance(back), ratio = (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+        if (ratio < T.bodyContrast) add('CF-807', 'MEDIUM', element, Number(ratio.toFixed(2)), T.bodyContrast, 'derived', 'placeholder');
+      }
+      if (!element.labels?.length && !element.getAttribute('aria-label') && !element.getAttribute('aria-labelledby'))
+        add('CF-806', 'MEDIUM', element, 'placeholder only', 'persistent label');
+    }
+    if (element.matches('button:not([type])') && element.form &&
+        [...document.querySelectorAll('button')].filter((button) => button.form === element.form &&
+          (!button.hasAttribute('type') || button.type === 'submit')).length >= 2)
+      add('SLOP-059', 'HIGH', element, 'implicit submit beside another submit-capable button', 'explicit button type', 'derived');
+  }
+  for (const element of document.querySelectorAll('a[href]')) {
+    const href = (element.getAttribute('href') || '').trim();
+    if (href === '#' || /^javascript:/i.test(href)) add('SLOP-058', element.closest('nav') || element.matches('.primary,[data-primary]') ? 'HIGH' : 'MEDIUM', element, href, 'working destination', 'derived');
+  }
+  const focusCandidates = [...document.querySelectorAll('a[href],button,input,select,textarea,[tabindex]')]
+    .filter((element) => visible(element) && !element.matches(':disabled,[aria-disabled="true"]')).slice(0, 5);
+  for (const element of focusCandidates) {
+    const snapshot = () => {
+      const style = getComputedStyle(element);
+      return [style.outlineStyle, style.outlineWidth, style.outlineColor, style.boxShadow,
+        style.borderColor, style.backgroundColor];
+    };
+    const resting = snapshot();
+    element.focus({ preventScroll: true });
+    if (!element.matches(':focus-visible')) {
+      not_verified.push({ rule: 'CF-202', viewport, reason: `${selector(element)}: focus-visible state unavailable` });
+      element.blur();
+      continue;
+    }
+    const focused = snapshot();
+    element.blur();
+    if (resting.every((part, index) => part === focused[index]))
+      add('CF-202', 'HIGH', element, 'no visible focus change', 'outline, shadow, border or background change');
+    else if (focused[0] !== 'auto' && focused[0] !== 'none' && parseFloat(focused[1]) < T.focusRingMinimumPx)
+      add('CF-202', 'MEDIUM', element, parseFloat(focused[1]), T.focusRingMinimumPx);
+  }
+  const inspectRules = (rules) => {
+    for (const rule of rules) {
+      if (rule.cssRules) inspectRules(rule.cssRules);
+      if (rule.type === CSSRule.KEYFRAMES_RULE) for (const frame of rule.cssRules) {
+        if (!/^(?:from|0%)$/.test(frame.keyText)) continue;
+        const match = frame.style.transform.match(/scale(?:X|Y)?\(\s*([\d.]+)/i);
+        if (match && Number(match[1]) < T.entranceScaleMinimum) {
+          const running = document.getAnimations().some((animation) => animation.playState === 'running' && animation.animationName === rule.name);
+          add('CF-503', running ? 'MEDIUM' : 'LOW', document.documentElement, Number(match[1]), T.entranceScaleMinimum,
+            running ? 'measured' : 'derived', running ? 'running entrance' : 'declared entrance; running state unverified');
+        }
+      }
+    }
+  };
+  for (const sheet of document.styleSheets) {
+    try { inspectRules(sheet.cssRules); } catch { not_verified.push({ rule: '*', viewport, reason: 'cross-origin stylesheet' }); }
+  }
+  const prose = textElements.filter((element) => /^(P|LI|BLOCKQUOTE|DD|TD)$/.test(element.tagName) && !element.closest('nav,footer,[class*="ticker"]'));
+  for (const element of prose) {
+    const content = element.textContent.trim();
+    if (content.length < 80) continue;
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const lines = new Map();
+    const node = [...element.childNodes].find((child) => child.nodeType === Node.TEXT_NODE && child.textContent.trim());
+    if (!node) continue;
+    for (let index = 0; index < Math.min(node.textContent.length, T.textCharacterCap); index++) {
+      range.setStart(node, index); range.setEnd(node, index + 1);
+      const rect = range.getBoundingClientRect();
+      if (rect.width > 0) lines.set(Math.round(rect.top), (lines.get(Math.round(rect.top)) || 0) + 1);
+    }
+    const estimate = Math.max(0, ...lines.values());
+    const cjk = (content.match(/[一-鿿぀-ヿ가-힣]/g) || []).length / content.length > 0.3;
+    const floor = cjk ? T.lineMeasureCjkMax : T.lineMeasureLatinMax;
+    if (lines.size >= T.lineMeasureMinLines && estimate > floor) add('CF-101', 'MEDIUM', element, estimate, floor, 'measured');
+  }
+  for (const element of textElements) {
+    const content = element.textContent.trim();
+    if (authoredText(element) && !externalQuote(element) && (content.includes('—') || /\s–\s/.test(content)) && !/\d(?::\d+)?\s*–\s*\d(?::\d+)?/.test(content) &&
+        !(content.includes('——') && (content.match(/[一-鿿]/g) || []).length / content.length > 0.3))
+      add('SLOP-040', 'MEDIUM', element, content.slice(0, 80), 'no flourish dash');
+    if (proseText(element) && /lorem ipsum|dolor sit amet|\[placeholder\]|\bTODO\b/i.test(content))
+      add('SLOP-060', 'LOW', element, content.slice(0, 80), 'finished copy');
+    if (proseText(element) && /\b(?:seamless experience|harness the power|best-in-class|transformative platform|next-generation solution)\b/i.test(content))
+      add('SLOP-036', 'MEDIUM', element, content.slice(0, 80), 'concrete claim');
+    if (element.matches('button,a') && /^(?:[A-Z][a-z]+\s+){2,}[A-Z][a-z]+$/.test(content))
+      add('CF-107', 'LOW', element, content.slice(0, 80), 'sentence case');
+    if (element.matches('h1,h2,h3,h4,h5,h6,p,li')) {
+      const s = getComputedStyle(element), font = parseFloat(s.fontSize), box = element.getBoundingClientRect();
+      if (s.lineHeight !== 'normal' && box.height >= font * 2) {
+        const ratio = parseFloat(s.lineHeight) / font;
+        const heading = element.matches('h1,h2,h3,h4,h5,h6');
+        const floor = heading ? T.headingLineHeightMinimum : (/[一-鿿぀-ヿ가-힣]/.test(content) ? T.bodyLineHeightCjk : T.bodyLineHeightLatin);
+        if (ratio < floor || (heading && ratio > T.headingLineHeightMaximum))
+          add(heading ? 'CF-102' : 'CF-103', heading ? 'LOW' : 'MEDIUM', element, Number(ratio.toFixed(2)), floor, 'derived');
+      }
+    }
+  }
+  for (const element of document.querySelectorAll('body *')) {
+    if (!visible(element)) continue;
+    const s = getComputedStyle(element);
+    if (element.matches('img')) {
+      const src = (element.getAttribute('src') || element.getAttribute('srcset') || '').trim();
+      const lazy = [...element.attributes].some((attribute) => /^data-(?:src|srcset|lazy)/.test(attribute.name));
+      if ((!src || /^(?:#|undefined)$/i.test(src)) && !lazy || element.complete && element.naturalWidth === 0 && !lazy)
+        add('SLOP-057', 'HIGH', element, src, 'decodable image');
+      else if (!element.complete || lazy) not_verified.push({ rule: 'SLOP-057', viewport, reason: `${selector(element)}: lazy image not fetched at capture` });
+    }
+    if (element.matches('marquee')) add('SLOP-061', 'LOW', element, 'marquee', 'stationary text');
+    if (s.backgroundClip === 'text' && s.backgroundImage.includes('gradient(')) add('SLOP-009', 'MEDIUM', element, s.backgroundImage.slice(0, 80), 'solid text');
+    if (element.matches('dialog,[role="dialog"]') && getComputedStyle(element, '::backdrop').backdropFilter !== 'none')
+      add('CF-406', 'LOW', element, 'blurred scrim', 'solid scrim');
+    const bounds = element.getBoundingClientRect();
+    const parent = element.parentElement;
+    if (parent && visible(parent) && s.borderTopLeftRadius.endsWith('px')) {
+      const outer = getComputedStyle(parent), box = parent.getBoundingClientRect();
+      const inset = [bounds.left - box.left, box.right - bounds.right, bounds.top - box.top, box.bottom - bounds.bottom];
+      const symmetric = Math.max(...inset) - Math.min(...inset) <= T.frameInsetTolerancePx;
+      const outerRadius = parseFloat(outer.borderTopLeftRadius), innerRadius = parseFloat(s.borderTopLeftRadius);
+      const expected = Math.max(0, outerRadius - inset.reduce((sum, value) => sum + value, 0) / inset.length);
+      if (symmetric && outerRadius > 0 && Number.isFinite(innerRadius) && Math.abs(innerRadius - expected) > T.radiusTolerancePx)
+        add('CF-401', 'LOW', element, Number(innerRadius.toFixed(1)), Number(expected.toFixed(1)), 'derived');
+    }
+    const fill = rgb(s.backgroundColor);
+    const ink = rgb(s.color);
+    if (ink && element.matches('h1,h2,h3,h4,h5,h6')) {
+      const hsl = hueSaturation(ink);
+      if (Math.max(...ink.slice(0, 3)) - Math.min(...ink.slice(0, 3)) >= T.purpleChannelSpread &&
+          hsl.hue >= T.accentHueMinimumDeg && hsl.hue <= T.accentHueMaximumDeg)
+        add('SLOP-008', 'MEDIUM', element, Number(hsl.hue.toFixed(1)), [T.accentHueMinimumDeg, T.accentHueMaximumDeg], 'derived', 'check brand rationale');
+    }
+    const shadow = s.boxShadow.match(/(?:rgba?\([^)]+\)|#[\da-fA-F]{3,8})?\s*([\d.]+)px\s+([\d.]+)px\s+([\d.]+)px/);
+    if (shadow && Math.abs(Number(shadow[1])) < 2 && Math.abs(Number(shadow[2])) < 2 &&
+        Number(shadow[3]) >= T.glowBlurToSideRatio * Math.min(bounds.width, bounds.height) && element.matches('button,[data-primary],.primary'))
+      add('CF-404', 'LOW', element, Number(shadow[3]), T.glowBlurToSideRatio * Math.min(bounds.width, bounds.height), 'derived');
+    if (s.willChange !== 'auto' && (!/^(?:transform|opacity|filter)(?:,\s*(?:transform|opacity|filter))*$/.test(s.willChange) || !element.getAnimations().some((animation) => animation.playState === 'running')))
+      add('CF-507', /^(?:transform|opacity|filter)(?:,\s*(?:transform|opacity|filter))*$/.test(s.willChange) ? 'MEDIUM' : 'LOW', element, s.willChange, 'active compositor animation only');
+    if (element.matches('a,button,[role="button"],[role="link"]') && /[\u{1F300}-\u{1FAFF}]/u.test(element.textContent))
+      add('SLOP-053', 'MEDIUM', element, element.textContent.trim().slice(0, 32), 'consistent icon system', 'derived');
+  }
+  const accents = [];
+  for (const element of document.querySelectorAll('button,[role="button"],.chip,.badge,.card')) {
+    if (!visible(element)) continue;
+    const bounds = element.getBoundingClientRect(), fill = rgb(getComputedStyle(element).backgroundColor);
+    if (!fill || fill[3] === 0 || bounds.width < T.accentSurfaceMinimumPx || bounds.height < T.accentSurfaceMinimumPx) continue;
+    const hsl = hueSaturation(fill);
+    if (hsl.saturation < T.accentSaturationMinimum || hsl.lightness < 0.12 || hsl.lightness > 0.93 || bounds.height <= 32 ||
+        element.closest('[role=status],[role=alert],[role=alertdialog],[role=log],[aria-live],[aria-invalid=true]') ||
+        /(?:^|\s)(?:success|warning|warn|error|danger|destructive|info|critical)(?:\s|$)/i.test(element.className || '')) continue;
+    if (!accents.some((hue) => Math.min(Math.abs(hue - hsl.hue), 360 - Math.abs(hue - hsl.hue)) <= T.accentHueToleranceDeg)) accents.push(hsl.hue);
+  }
+  if (accents.length > 1) add('CF-205', 'MEDIUM', document.documentElement, accents.map((hue) => Math.round(hue)), 1, 'derived');
+  for (let i = 0; i < Math.min(100, textElements.length); i++) {
+    const first = textElements[i], a = first.getBoundingClientRect();
+    for (let j = i + 1; j < Math.min(100, textElements.length); j++) {
+      const second = textElements[j];
+      if (first.contains(second) || second.contains(first)) continue;
+      const b = second.getBoundingClientRect();
+      const area = Math.max(0, Math.min(a.right, b.right) - Math.max(a.left, b.left)) *
+        Math.max(0, Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top));
+      const fraction = area / Math.max(1, Math.min(a.width * a.height, b.width * b.height));
+      if (fraction >= T.textOverlapFraction) add('RS-007', 'MEDIUM', second, Number(fraction.toFixed(2)), T.textOverlapFraction, 'derived', `overlaps ${selector(first)}`);
+    }
+  }
+  if (viewport === '390-dark' && luminance(background(document.body)) >= T.darkLuminanceMax) {
+    const theme = [...document.querySelectorAll('[data-theme-toggle],button,[role=switch],[role=button]')].find((element) =>
+      element.hasAttribute('data-theme-toggle') || /dark|theme|night|다크|테마|야간/i.test(`${element.getAttribute('aria-label') || ''} ${element.title || ''} ${element.textContent || ''}`));
+    if (theme) not_verified.push({ rule: 'RS-002', viewport, reason: `dark path may sit behind ${selector(theme)}; probe activates no control` });
+    else add('RS-002', 'MEDIUM', document.documentElement, Number(luminance(background(document.body)).toFixed(2)), T.darkLuminanceMax, 'derived');
+  }
+  if (viewport === '390-reduced-motion') {
+    if (!matchMedia('(prefers-reduced-motion: reduce)').matches) add('RS-003', 'HIGH', document.documentElement, false, true);
+    for (const video of document.querySelectorAll('video')) if (!video.paused) add('RS-003', 'HIGH', video, 'playing', 'paused');
+    for (const element of document.querySelectorAll('body *')) {
+      if (!visible(element)) continue;
+      const s = getComputedStyle(element);
+      const transitionMs = Math.max(0, ...s.transitionDuration.split(',').map((value) => Number.parseFloat(value) * (value.trim().endsWith('ms') ? 1 : 1000)));
+      const animationMs = Math.max(0, ...element.getAnimations().filter((animation) => animation.playState === 'running').map((animation) => {
+        const frames = animation.effect?.getKeyframes?.() || [];
+        return frames.some((frame) => Object.keys(frame).some((key) => /^(?:transform|translate|scale|rotate|top|right|bottom|left|inset|width|height|margin|offset|backgroundPosition)/.test(key)))
+          ? Number(animation.effect?.getTiming?.().duration || 0) : 0;
+      }));
+      const motion = /\b(?:all|transform|translate|scale|rotate|top|right|bottom|left|inset|width|height|margin|offset|background-position)\b/.test(s.transitionProperty);
+      const essential = element.closest('progress,[role=progressbar],[role=status],[aria-busy=true]');
+      const longest = Math.max(motion ? transitionMs : 0, animationMs);
+      if (!essential && longest > T.reducedMotionMaximumMs) add('RS-003', 'HIGH', element, longest, T.reducedMotionMaximumMs);
+    }
+  }
+  return JSON.stringify({ viewport, url: location.href, readyState: document.readyState,
+    bodyElements: document.body?.querySelectorAll('*').length ?? 0, findings, not_verified,
+    hover_target: [...document.querySelectorAll('button')].some(visible) ? 'button' : null });
+})()

package/assets/lithermes-plugin/skills/frontend-ui-ux/scripts/probe-rules.json

@@ -0,0 +1,46 @@
+{
+  "pageOverflowPx": 8,
+  "elementClipPx": 3,
+  "offscreenPx": 8,
+  "bodyContrast": 4.5,
+  "largeContrast": 3,
+  "largeTextPx": 24,
+  "boldTextPx": 18.5,
+  "boldWeight": 700,
+  "hitMinimumPx": 24,
+  "hitRecommendedPx": 44,
+  "touchViewportPx": 768,
+  "mobileInputPx": 16,
+  "mobileViewportPx": 480,
+  "entranceScaleMinimum": 0.95,
+  "bodyLineHeightLatin": 1.4,
+  "bodyLineHeightCjk": 1.5,
+  "headingLineHeightMinimum": 1.2,
+  "headingLineHeightMaximum": 1.35,
+  "lineMeasureLatinMax": 90,
+  "lineMeasureCjkMax": 60,
+  "radiusTolerancePx": 2,
+  "frameInsetTolerancePx": 2,
+  "glowBlurToSideRatio": 1.5,
+  "textOverlapFraction": 0.45,
+  "accentHueMinimumDeg": 260,
+  "accentHueMaximumDeg": 310,
+  "purpleChannelSpread": 50,
+  "accentSaturationMinimum": 0.12,
+  "accentHueToleranceDeg": 15,
+  "accentSurfaceMinimumPx": 24,
+  "fullBleedFraction": 0.92,
+  "reducedMotionMaximumMs": 250,
+  "zoomWidthPx": 720,
+  "zoomHeightPx": 450,
+  "visibleNodeCap": 500,
+  "textCharacterCap": 4000,
+  "darkLuminanceMax": 0.35,
+  "focusRingMinimumPx": 2,
+  "focusRingContrast": 3,
+  "lineMeasureMinLines": 2,
+  "glowOffsetMaxPx": 2,
+  "glowBlurMinPx": 16,
+  "glowSaturationMin": 0.4,
+  "hoverMaximumMs": 150
+}

package/assets/lithermes-plugin/skills/frontend-ui-ux/scripts/probe.mjs

@@ -0,0 +1,231 @@
+#!/usr/bin/env node
+import { execFileSync, spawnSync } from 'node:child_process';
+import { randomUUID } from 'node:crypto';
+import { existsSync, lstatSync, mkdirSync, mkdtempSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const pluginDir = resolve(scriptDir, '../../..');
+const argv = process.argv.slice(2);
+const option = (name) => {
+  const index = argv.indexOf(name);
+  return index < 0 ? null : argv[index + 1];
+};
+const url = option('--url');
+const source = option('--static');
+const out = option('--out');
+if (!out || (!url && !source)) {
+  process.stderr.write('usage: probe.mjs --url <http(s) URL> --out <directory> [--static <HTML/CSS/JSX path>]\n');
+  process.exit(2);
+}
+mkdirSync(out, { recursive: true });
+const thresholds = JSON.parse(readFileSync(join(scriptDir, 'probe-rules.json'), 'utf8'));
+const referenceDir = resolve(scriptDir, '../references');
+const allRules = [...new Set(['craft-floor.md', 'slop-register.md'].flatMap((name) =>
+  [...readFileSync(join(referenceDir, name), 'utf8').matchAll(/^\| ((?:CF|RS|SLOP)-\d{3}) \|/gm)].map((match) => match[1])))];
+const staticRules = new Set(['SLOP-058', 'CF-503', 'SLOP-009', 'SLOP-057', 'SLOP-060', 'SLOP-061', 'CF-507']);
+const liveRules = new Set(['RS-001', 'RS-002', 'RS-003', 'RS-006', 'RS-007', 'RS-008', 'CF-101', 'CF-102', 'CF-103',
+  'CF-107', 'CF-201', 'CF-202', 'CF-205', 'CF-401', 'CF-404', 'CF-406', 'CF-503', 'CF-507', 'CF-603', 'CF-701', 'CF-806', 'CF-807', 'SLOP-008',
+  'SLOP-009', 'SLOP-036', 'SLOP-040', 'SLOP-053', 'SLOP-057', 'SLOP-058', 'SLOP-059', 'SLOP-060', 'SLOP-061']);
+const notVerified = allRules.filter((rule) => !staticRules.has(rule))
+  .map((rule) => ({ rule, reason: 'static fallback: needs a rendered DOM or reviewer' }));
+
+function staticFallback(file) {
+  if (!file || !existsSync(file)) return { findings: [], not_verified: notVerified, source: null };
+  const findings = [];
+  const visit = (item) => {
+    const info = lstatSync(item);
+    if (info.isSymbolicLink()) return;
+    if (info.isDirectory()) {
+      for (const child of readdirSync(item)) {
+        if (child === 'node_modules' || child === '.git') continue;
+        visit(join(item, child));
+      }
+      return;
+    }
+    const extension = extname(item).toLowerCase();
+    if (!['.html', '.htm', '.css', '.js', '.jsx', '.tsx'].includes(extension)) return;
+    const contents = readFileSync(item, 'utf8');
+    const add = (rule, value, threshold, severity = 'MEDIUM', tier = 'measured', match = null) => findings.push({
+      rule, severity, tier, viewport: 'static', selector: `${item}:${match ? contents.slice(0, match.index).split('\n').length : 1}`,
+      value, threshold,
+    });
+    if (['.html', '.htm', '.jsx', '.tsx'].includes(extension) && /href\s*=\s*["'](?:#|javascript:[^"']*)["']/i.test(contents))
+      add('SLOP-058', 'placeholder destination', 'working destination', 'MEDIUM', 'derived', /href\s*=\s*["'](?:#|javascript:[^"']*)["']/i.exec(contents));
+    if (/scale\(\s*0(?:[\s,)]|$)/i.test(contents)) add('CF-503', 'scale(0)', thresholds.entranceScaleMinimum, 'LOW', 'derived', /scale\(\s*0(?:[\s,)]|$)/i.exec(contents));
+    if (/background-clip\s*:\s*text[^}]*gradient\(/is.test(contents) || /gradient\([^}]*background-clip\s*:\s*text/is.test(contents))
+      add('SLOP-009', 'gradient text', 'solid text');
+    if (/<img\b[^>]*\bsrc\s*=\s*["'](?:|#|undefined)["']/i.test(contents)) add('SLOP-057', 'broken source', 'decodable image', 'HIGH');
+    if (/lorem ipsum|\[placeholder\]|\bTODO\b/i.test(contents)) add('SLOP-060', 'placeholder copy', 'finished copy', 'LOW');
+    if (/<marquee\b/i.test(contents)) add('SLOP-061', 'marquee', 'stationary copy');
+    if (/will-change\s*:\s*(?:all|width|height|margin|padding)/i.test(contents)) add('CF-507', 'layout property', 'active compositor property');
+  };
+  visit(file);
+  return { findings, not_verified: notVerified, source: file };
+}
+
+function save(report) {
+  writeFileSync(join(out, 'report.json'), `${JSON.stringify({ manifest: report.manifest, findings: report.findings }, null, 2)}\n`);
+  const rows = report.findings.map((entry) =>
+    `| ${entry.severity} | ${entry.rule} | ${entry.selector || 'source'} @ ${entry.viewport} | ${entry.tier}: ${JSON.stringify(entry.value)} (floor ${JSON.stringify(entry.threshold)}) | ${fixFor(entry.rule)} |`);
+  writeFileSync(join(out, 'review.md'), [
+    '| Severity | Rule | Where | Measured | Fix |',
+    '| --- | --- | --- | --- | --- |',
+    ...rows,
+    '',
+    '## Not verified',
+    '',
+    ...report.not_verified.map(({ rule, viewport, reason }) => `- ${rule}${viewport ? ` @ ${viewport}` : ''}: ${reason}`),
+    '',
+    `Decision: ${report.manifest.exit_code === 2 ? 'BLOCKED' : report.manifest.exit_code === 1 ? 'Block' : 'Approve'}`,
+    '',
+  ].join('\n'));
+  process.stdout.write(report.manifest?.blocked_reason ? `BLOCKED: ${report.manifest.blocked_reason}\n` :
+    `${report.findings.length} findings; ${report.manifest?.exit_code === 1 ? 'Block' : 'Approve'}\n`);
+}
+
+function fixFor(rule) {
+  const named = { 'RS-006': 'Remove page overflow or contain the intentional rail',
+    'RS-007': 'Restore readable text and its container', 'CF-201': 'Use a contrasting ink or surface',
+    'CF-701': 'Expand the target without shifting visual hierarchy', 'CF-503': 'Start entrance at or above the scale floor',
+    'SLOP-058': 'Use a working destination', 'SLOP-060': 'Replace unfinished copy' };
+  return named[rule] || 'Review the numbered rule and correct the smallest cause';
+}
+
+const fallback = staticFallback(source);
+if (!url) {
+  save({ manifest: { url: null, viewports_run: [], browser_version: null, not_verified: fallback.not_verified,
+    screenshots: [], exit_code: 2, blocked_reason: 'browser unavailable' }, findings: fallback.findings, status: 'BLOCKED: browser unavailable', not_verified: fallback.not_verified });
+  process.exit(2);
+}
+const origin = JSON.parse(readFileSync(resolve(pluginDir, 'skills/browser-drive/ORIGIN.json'), 'utf8'));
+if (origin.schema !== 'lithermes.browser-drive-origin/v1' || origin.package?.name !== 'agent-browser' ||
+    !origin.package.dist?.integrity || !origin.verifiedVersionFloor) {
+  save({ status: 'BLOCKED: browser identity unverified', findings: fallback.findings, not_verified: fallback.not_verified,
+    manifest: { url: null, viewports_run: [], browser_version: null, not_verified: fallback.not_verified, screenshots: [], exit_code: 2, blocked_reason: 'browser identity unverified' } });
+  process.exit(2);
+}
+let capability;
+try {
+  capability = JSON.parse(execFileSync('python3', [resolve(pluginDir, 'skills/browser-drive/scripts/capability_probe.py')],
+    { encoding: 'utf8', timeout: 15000, env: { ...process.env, PYTHONDONTWRITEBYTECODE: '1' } }));
+} catch {
+  save({ status: 'BLOCKED: browser unavailable', findings: fallback.findings, not_verified: fallback.not_verified,
+    manifest: { url: null, viewports_run: [], browser_version: null, not_verified: fallback.not_verified, screenshots: [], exit_code: 2, blocked_reason: 'browser unavailable' } });
+  process.exit(2);
+}
+if (capability.status !== 'available' || !capability.command) {
+  save({ status: 'BLOCKED: browser unavailable', findings: fallback.findings, not_verified: fallback.not_verified,
+    manifest: { url: null, viewports_run: [], browser_version: null, not_verified: fallback.not_verified, screenshots: [], exit_code: 2, blocked_reason: 'browser unavailable' } });
+  process.exit(2);
+}
+
+const session = `lhui-${randomUUID().replaceAll('-', '').slice(0, 12)}`;
+const script = readFileSync(join(scriptDir, 'probe-page.js'), 'utf8');
+const socketDir = mkdtempSync(join(tmpdir(), 'lhui-ab-'));
+const browserEnv = { ...process.env, AGENT_BROWSER_IDLE_TIMEOUT_MS: '120000', AGENT_BROWSER_HIDE_SCROLLBARS: 'true',
+  AGENT_BROWSER_SOCKET_DIR: socketDir };
+const cases = [
+  { name: '320', width: 320, height: 800 },
+  { name: '390', width: 390, height: 844 },
+  { name: '768', width: 768, height: 900 },
+  { name: '1440', width: 1440, height: 900 },
+  { name: '390-dark', width: 390, height: 844, dark: true },
+  { name: '390-reduced-motion', width: 390, height: 844, reduced: true },
+  { name: '1440-zoom200', width: thresholds.zoomWidthPx, height: thresholds.zoomHeightPx, zoom: 200 },
+];
+const run = (...args) => {
+  const result = spawnSync(capability.command, ['--session', session, ...args], {
+    encoding: 'utf8', timeout: 60000, maxBuffer: 1024 * 1024,
+    env: browserEnv,
+  });
+  if (result.status !== 0 || result.error) throw new Error(`${args[0]}: ${result.error?.message || result.stderr?.slice(-500) || result.status}`);
+  return result.stdout.trim();
+};
+const findings = [];
+const screenshots = [];
+const unverified = [];
+const completed = [];
+let report;
+let contextStarted = false;
+try {
+  for (const item of cases) {
+    run('set', 'viewport', String(item.width), String(item.height));
+    contextStarted = true;
+    run('set', 'media', item.dark ? 'dark' : 'light', ...(item.reduced ? ['reduced-motion'] : []));
+    run('open', url);
+    run('wait', '1200');
+    const raw = spawnSync(capability.command, ['--session', session, 'eval', '--stdin'], {
+      input: script.replace('__UIUX_THRESHOLDS__', JSON.stringify(thresholds)).replace('__UIUX_VIEWPORT__', JSON.stringify(item.name)),
+      encoding: 'utf8', timeout: 60000, maxBuffer: 1024 * 1024, env: browserEnv,
+    });
+    if (raw.status !== 0 || raw.error) throw new Error(`eval ${item.name}: ${raw.error?.message || raw.stderr?.slice(-500) || raw.status}`);
+    let value = JSON.parse(raw.stdout.trim());
+    if (typeof value === 'string') value = JSON.parse(value);
+    if (!Array.isArray(value.findings)) throw new Error(`eval ${item.name}: invalid findings`);
+    if (value.readyState !== 'complete') {
+      run('wait', '1200');
+      const retry = spawnSync(capability.command, ['--session', session, 'eval', '--stdin'], {
+        input: script.replace('__UIUX_THRESHOLDS__', JSON.stringify(thresholds)).replace('__UIUX_VIEWPORT__', JSON.stringify(item.name)),
+        encoding: 'utf8', timeout: 60000, maxBuffer: 1024 * 1024, env: browserEnv,
+      });
+      if (retry.status !== 0) throw new Error(`eval ${item.name}: retry failed`);
+      value = JSON.parse(retry.stdout.trim());
+      if (typeof value === 'string') value = JSON.parse(value);
+    }
+    if (value.url !== url || value.readyState !== 'complete' || value.bodyElements < 1 || value.viewport !== item.name)
+      throw new Error(`eval ${item.name}: page identity or layout state unverified`);
+    findings.push(...value.findings);
+    unverified.push(...allRules.filter((rule) => !liveRules.has(rule))
+      .map((rule) => ({ rule, viewport: item.name, reason: 'probe has no deterministic implementation; review checklist' })),
+    ...(value.not_verified || []));
+    if (value.hover_target) {
+      run('hover', value.hover_target);
+      const hover = run('eval', `(() => { const element = document.querySelector(${JSON.stringify(value.hover_target)}); return JSON.stringify({ active: element?.matches(':hover'), duration: getComputedStyle(element).transitionDuration }); })()`);
+      const state = JSON.parse(JSON.parse(hover));
+      if (state.active) {
+        const duration = Math.max(0, ...state.duration.split(',').map((part) => {
+          const value = part.trim(); return Number.parseFloat(value) * (value.endsWith('ms') ? 1 : 1000);
+        }));
+        if (duration > thresholds.hoverMaximumMs) findings.push({ rule: 'CF-506', severity: 'LOW', tier: 'measured', viewport: item.name,
+          selector: value.hover_target, value: duration, threshold: thresholds.hoverMaximumMs });
+      } else unverified.push({ rule: 'CF-506', viewport: item.name, reason: 'hover state unverified' });
+    }
+    const capture = resolve(out, `${item.name}.png`);
+    run('screenshot', capture);
+    run('errors');
+    screenshots.push({ viewport: item.name, path: capture });
+    completed.push(item.name);
+  }
+  const exitCode = findings.some((entry) => entry.severity === 'HIGH' && entry.tier !== 'not_verified') ? 1 :
+    completed.length === cases.length ? 0 : 2;
+  report = { status: exitCode ? 'Block' : 'Approve', findings, not_verified: unverified, screenshots,
+    manifest: { url, viewports_run: completed, browser_version: capability.version || null, zoom_emulation: 'viewport-halved',
+      not_verified: unverified, screenshots, exit_code: exitCode, blocked_reason: exitCode === 2 ? 'matrix incomplete' : null } };
+} catch (error) {
+  const missing = cases.filter((item) => !completed.includes(item.name)).map((item) => item.name);
+  const reason = completed.length ? `matrix incomplete (${missing.join(',')})` : 'browser unavailable';
+  const code = findings.some((entry) => entry.severity === 'HIGH' && entry.tier !== 'not_verified') ? 1 : 2;
+  const diagnostics = [{ rule: '*', reason: `browser command: ${error.message}` }];
+  report = { status: `BLOCKED: ${reason}`, reason: error.message,
+    findings: [...findings, ...fallback.findings], not_verified: [...unverified, ...fallback.not_verified, ...diagnostics], screenshots,
+    manifest: { url: completed.length ? url : null, viewports_run: completed, browser_version: completed.length ? capability.version || null : null,
+      not_verified: [...unverified, ...fallback.not_verified, ...diagnostics], screenshots, exit_code: code, blocked_reason: code === 2 ? reason : null } };
+} finally {
+  try { run('close'); } catch {
+    if (contextStarted) {
+      report.status = 'BLOCKED: browser cleanup failed';
+      report.manifest.exit_code = 2;
+      report.manifest.blocked_reason = 'browser cleanup failed';
+    }
+  }
+  try { rmSync(socketDir, { recursive: true, force: true }); } catch {
+    report.status = 'BLOCKED: browser cleanup failed';
+    report.manifest.exit_code = 2;
+    report.manifest.blocked_reason = 'browser cleanup failed';
+  }
+}
+save(report);
+process.exitCode = report.manifest.exit_code;