npm - nimiq-branding-cli - Versions diffs - 1.3.1 → 1.4.0 - Mend

nimiq-branding-cli 1.3.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/LINT.md CHANGED Viewed

@@ -105,6 +105,18 @@ to flag *"this is getting busy, is it justified?"* — the deterministic half of
 | address not uppercase / flat | a display NIM address (≥20px) rendered lowercase or as one flat string instead of the uppercase 3×3 grid |
 | pulsing "live" dot animation | a small (≤28px) round element on an `infinite` animation that isn't a spinner/loader — the fake-"live" glow the slop blacklist names |
+**Media & page-quality** (the deterministic asymptote — last verifiable batch)
+| Check | Threshold |
+|---|---|
+| no `prefers-reduced-motion` | an `infinite` animation is present but **no** `@media (prefers-reduced-motion: reduce)` rule anywhere (nimiq.com ships the rule, so it's clean) |
+| missing viewport meta | a full page (has `<head><title>`) without `<meta name="viewport">` — silently breaks all mobile |
+| clipped / truncated text | a text element ellipsis/overflow-truncated (`scrollWidth > clientWidth`) with **no** `title` fallback to read it |
+| distorted image | an `<img>` whose displayed aspect ratio differs from its natural ratio by > 8% without `object-fit: cover/contain`, scoped to non-hero images (< 70% viewport wide) so full-bleed `fill` backgrounds aren't flagged |
+| content image missing alt | a **raster** (`jpg/png/webp/gif/avif`) `<img>` with no `alt` attribute (SVG illustrations + `alt=""` decoratives are exempt) |
+> **Deliberately not built:** adjacent tap-target spacing — nimiq.com's own layout has 12–14 closely-spaced controls (incl. non-nav) that can't be cleanly separated from real crowding, so it would be noise, not signal. Beyond this batch the remaining gaps are either niche, un-calibratable against the reference, or genuinely judgment (the optional vision pass).
 **Headline typography & line breaks** (closes the "lint passes ≠ brand-correct" gap)
 The deterministic checks above read color, spacing and shape — but a heading can satisfy all of
@@ -129,13 +141,18 @@ Weight/tracking are heading-scoped (buttons and bold body labels are legitimatel
 orphan check is general (it caught a body banner, not a heading) but gated at ≥ 20px so calibrated
 fine-print under 20px — which wasn't measured on the reference — is never flagged.
-**Mobile (a second pass at 390px)**
+**Responsive sweep (360 · 414 · 768 · 1024 · 1280px)**
+The desktop pass renders at 1440; this sweep re-measures at five more widths so a layout that's
+clean at phone *and* desktop but **breaks in the tablet / small-laptop no-man's-land** is caught —
+the single most common responsive bug a fixed 390+1440 check misses. Measured: nimiq.com has **zero
+horizontal overflow at every width** 320→1440, so overflow-at-a-breakpoint is calibrated to 0.
 | Check | Threshold |
 |---|---|
-| horizontal overflow | `scrollWidth > viewport` by > 4px |
-| tap targets too small | a button / input / link-button under 30px (inline text links are exempt) |
-| text smaller than 12px | any text element below 12px at mobile width |
+| horizontal overflow at a breakpoint | `scrollWidth > viewport` by > 4px at **any** swept width (reports which widths and by how much) |
+| tap targets too small | a button / input / link-button under 30px at any width (reports the worst breakpoint) |
+| text smaller than 12px | any text element below 12px at any width (reports the worst breakpoint) |
 The curated spacing scale (from `assets/css/modern/spacing.css`, desktop max of each step):
 `8 · 12 · 16 · 24 · 32 · 40 · 48 · 72 · 80 · 96 · 144 · 200`. Sub-8px is treated as optical

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "nimiq-branding-cli",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "nq — pixel-verified Nimiq UI component registry + CLI. 39 components (Vue 3 + plain HTML) diffed against the real Nimiq apps, plus the team's real asset library. Unofficial community tool.",
   "type": "module",
   "bin": {

package/scripts/lint.mjs CHANGED Viewed

@@ -132,6 +132,7 @@ function pageProbe({ SPACING_SCALE, ANCHORS, RADIUS_SCALE }) {
     blackBg: [], accentStripe: [], greenAction: [], dupGradIds: [], genericIcon: [], featherIcon: [],
     bakedIcon: [], duotoneBlack: [], modalBlack: [], flatNavySection: [], glowShadow: [], fontsNotLoaded: false, noFocusRing: false,
     lowContrast: [], h1Count: 0, unconstrained: [], amountColor: [], addrStructure: [], pulseDot: [],
+    noReducedMotion: false, hasInfiniteAnim: false, noViewport: false, clippedText: [], distortedImg: [], noAltImg: [],
   };
   for (const el of document.querySelectorAll('body *')) {
@@ -246,6 +247,13 @@ function pageProbe({ SPACING_SCALE, ANCHORS, RADIUS_SCALE }) {
       else if (el.children.length === 0) o.addrStructure.push('address as one flat string (use the 3×3 grid)');
     }
+    // any infinite animation on the page → feeds the reduced-motion check at the end of the probe
+    if (cs.animationName && cs.animationName !== 'none' && /(^|,)\s*infinite\s*(,|$)/.test(cs.animationIterationCount)) o.hasInfiniteAnim = true;
+    // clipped / truncated text — ellipsis (or overflow:hidden + nowrap) cutting text off, no title fallback
+    if (txt && el.children.length === 0) {
+      const ell = cs.textOverflow === 'ellipsis' || (cs.overflowX !== 'visible' && cs.whiteSpace === 'nowrap');
+      if (ell && el.scrollWidth > el.clientWidth + 2 && !el.title) o.clippedText.push(`<${tag}> "${txt.slice(0, 24)}" cut off (no title)`);
+    }
     // pulsing "live" dot (slop): a small round element on an infinite animation that isn't a spinner.
     if (cs.animationName && cs.animationName !== 'none' && /(^|,)\s*infinite\s*(,|$)/.test(cs.animationIterationCount) && r.width <= 28 && r.height <= 28) {
       const round = cs.borderRadius.includes('50%') || px(cs.borderRadius) >= Math.min(r.width, r.height) / 2 - 1;
@@ -393,6 +401,22 @@ function pageProbe({ SPACING_SCALE, ANCHORS, RADIUS_SCALE }) {
   // jumps h1→h4 for styling, so a no-skip rule would flag the reference.)
   o.h1Count = [...document.querySelectorAll('h1')].filter((e) => visible(e)).length;
+  // images — distortion (displayed ratio ≠ natural, not object-fit-preserved, not a full-bleed hero)
+  // and missing alt on raster CONTENT images (SVG illustrations + alt="" decoratives are exempt).
+  for (const img of document.querySelectorAll('img')) {
+    if (!visible(img)) continue;
+    const ir = img.getBoundingClientRect();
+    const src = img.currentSrc || img.getAttribute('src') || '';
+    if (img.naturalWidth && img.naturalHeight && ir.width < innerWidth * 0.7) {
+      const of = getComputedStyle(img).objectFit;
+      if (!/cover|contain|scale-down/.test(of)) {
+        const skew = Math.abs((ir.width / ir.height) - (img.naturalWidth / img.naturalHeight)) / (img.naturalWidth / img.naturalHeight);
+        if (skew > 0.08) o.distortedImg.push(`${src.split('/').pop().slice(0, 20)} ${Math.round(skew * 100)}% skew (${of})`);
+      }
+    }
+    if (!img.hasAttribute('alt') && /\.(jpe?g|png|webp|gif|avif)(\?|$)/i.test(src)) o.noAltImg.push(`${src.split('/').pop().slice(0, 24)} ${Math.round(ir.width)}×${Math.round(ir.height)}`);
+  }
   // per-section text-ink ratio (full-width bands)
   const vw = innerWidth;
   const leaves = [...document.querySelectorAll('body *')].filter((el) => !matchAny(el, 'svg') && visible(el) && el.children.length === 0 && directText(el)).map((el) => el.getBoundingClientRect());
@@ -424,6 +448,19 @@ function pageProbe({ SPACING_SCALE, ANCHORS, RADIUS_SCALE }) {
     }
   }
   o.noFocusRing = killsOutline && !restoresFocus;
+  // reduced-motion: infinite animation present but NO @media (prefers-reduced-motion) rule anywhere
+  // (cross-origin sheets throw on .cssRules and are skipped). nimiq.com ships the rule → not flagged.
+  let reducedMotionRule = false;
+  for (const sheet of document.styleSheets) {
+    let rules; try { rules = sheet.cssRules; } catch { continue; }
+    if (!rules) continue;
+    for (const rule of rules) { if (/prefers-reduced-motion/i.test(rule.cssText || '')) { reducedMotionRule = true; break; } }
+    if (reducedMotionRule) break;
+  }
+  o.noReducedMotion = o.hasInfiniteAnim && !reducedMotionRule;
+  // viewport meta — only on a full page (has a <head><title>), so component fragments aren't flagged
+  o.noViewport = !!document.querySelector('head > title') && !document.querySelector('meta[name="viewport"]');
   return o;
 }
@@ -483,10 +520,20 @@ export async function lint(target, opts = {}) {
     try { const en = page.locator('button.flag-btn', { hasText: 'English' }).first(); if (await en.count()) { await en.click({ timeout: 3000 }); await page.waitForLoadState('networkidle', { timeout: 12000 }).catch(() => {}); await page.waitForTimeout(1000); } } catch {}
     await page.evaluate(async () => { const s = innerHeight * 0.8; for (let y = 0; y < document.body.scrollHeight; y += s) { scrollTo(0, y); await new Promise((r) => setTimeout(r, 200)); } scrollTo(0, 0); await new Promise((r) => setTimeout(r, 350)); });
     const r = await page.evaluate(pageProbe, { SPACING_SCALE, ANCHORS, RADIUS_SCALE });
-    // second pass at mobile width (no reload — resize + re-measure)
-    await page.setViewportSize({ width: 390, height: 844 });
-    await page.waitForTimeout(500);
-    const mob = await page.evaluate(mobileProbe);
+    // responsive sweep — overflow / tap-targets / tiny-text across standard breakpoints. The 1440
+    // desktop pass above already covered the wide end; overflow at ANY intermediate width is the
+    // "no-man's-land" bug a fixed 390+1440 check misses. nimiq.com is overflow-clean at every width.
+    const SWEEP = [360, 414, 768, 1024, 1280];
+    const sweep = [];
+    for (const w of SWEEP) {
+      await page.setViewportSize({ width: w, height: 900 });
+      await page.waitForTimeout(350);
+      await page.evaluate(async () => { const s = innerHeight * 0.8; for (let y = 0; y < document.body.scrollHeight; y += s) { scrollTo(0, y); await new Promise((r) => setTimeout(r, 80)); } scrollTo(0, 0); await new Promise((r) => setTimeout(r, 120)); });
+      sweep.push({ w, ...(await page.evaluate(mobileProbe)) });
+    }
+    const overflowAt = sweep.filter((s) => s.overflowPx > 4);
+    const tapWorst = sweep.reduce((a, s) => (s.smallTargetN > a.smallTargetN ? s : a), sweep[0]);
+    const tinyWorst = sweep.reduce((a, s) => (s.tinyText > a.tinyText ? s : a), sweep[0]);
     // social-icon exemption (run in Node — SOCIAL anchors aren't in the page context)
     const socialName = (rgb) => { let best = Infinity, name = null; for (const [k, v] of Object.entries(SOCIAL)) { const d = Math.hypot(rgb[0] - v[0], rgb[1] - v[1], rgb[2] - v[2]); if (d < best) { best = d; name = k; } } return best <= SOCIAL_DELTA ? name : null; };
@@ -550,13 +597,18 @@ export async function lint(target, opts = {}) {
       ['flat-fill navy/colored section (use radial)', r.flatNavySection.length, r.flatNavySection[0]],
       ['focus outline removed w/o :focus-visible', r.noFocusRing ? 1 : 0, r.noFocusRing ? 'add a :focus-visible ring' : ''],
       ['Mulish not loaded (system-font fallback)', r.fontsNotLoaded ? 1 : 0, r.fontsNotLoaded ? 'load Mulish' : ''],
-      ['mobile horizontal overflow @390px', mob.overflowPx > 4 ? 1 : 0, `${mob.overflowPx}px`],
-      ['mobile tap targets < 36px', mob.smallTargetN, mob.smallTargets[0]],
-      ['text smaller than 12px @390px', mob.tinyText, `${mob.tinyText} element type(s)`],
+      ['horizontal overflow at a breakpoint', overflowAt.length, overflowAt.map((s) => `${s.w}px:${s.overflowPx}px`).join(' ')],
+      ['tap targets < 36px (any breakpoint)', tapWorst.smallTargetN, tapWorst.smallTargetN ? `@${tapWorst.w}px ${tapWorst.smallTargets[0] || ''}` : ''],
+      ['text smaller than 12px (any breakpoint)', tinyWorst.tinyText, tinyWorst.tinyText ? `@${tinyWorst.w}px, ${tinyWorst.tinyText} type(s)` : ''],
+      ['no prefers-reduced-motion (infinite anim)', r.noReducedMotion ? 1 : 0, r.noReducedMotion ? 'add @media (prefers-reduced-motion: reduce)' : ''],
+      ['missing viewport meta tag', r.noViewport ? 1 : 0, r.noViewport ? 'add <meta name="viewport" content="width=device-width…">' : ''],
+      ['clipped / truncated text (no title)', r.clippedText.length, r.clippedText[0]],
+      ['distorted image (wrong aspect ratio)', r.distortedImg.length, r.distortedImg[0]],
+      ['content image missing alt (raster)', r.noAltImg.length, r.noAltImg[0]],
     ];
     warnCount = warns.reduce((n, w) => n + (w[1] ? 1 : 0), 0);
-    if (opts.json) { out(JSON.stringify({ url, errorCount, warnCount, raw: r, mobile: mob, exemptSocial: exemptSocial.map(([c, v]) => ({ color: c, icon: v.social })) }, null, 2)); return { errorCount, warnCount }; }
+    if (opts.json) { out(JSON.stringify({ url, errorCount, warnCount, raw: r, responsive: sweep, exemptSocial: exemptSocial.map(([c, v]) => ({ color: c, icon: v.social })) }, null, 2)); return { errorCount, warnCount }; }
     out(`\n══════ nq lint — ${target} ══════\n`);
     out('ERRORS  (off-brand / a11y — must fix to pass)');