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

nimiq-branding-cli 1.3.2 → 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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "nimiq-branding-cli",
-  "version": "1.3.2",
+  "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;
 }
@@ -563,6 +600,11 @@ export async function lint(target, opts = {}) {
       ['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);