@ethlete/cli 3.0.0-next.25 → 3.0.0-next.27

package/src/lib/design/system/contrast-check.js

@@ -1,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CONTRAST_STATEMENTS = exports.contrastExceptionsOf = exports.contrastPairsOf = void 0;
+exports.CONTRAST_STATEMENTS = exports.contrastExceptionsOf = exports.contrastPairsOf = exports.schemesOf = void 0;
+/** The schemes a product renders: both when a stylesheet of it holds a `prefers-color-scheme` query or `light-dark(`, else the one the browser starts with. */
+const schemesOf = (stylesheets) => stylesheets.some((source) => source !== null && /prefers-color-scheme|light-dark\(/.test(source))
+    ? ['light', 'dark']
+    : [null];
+exports.schemesOf = schemesOf;
 const CONTRAST_NORMAL = 4.5;
 const CONTRAST_LARGE = 3;
+const CONTRAST_NON_TEXT = 3;
 const tokenNamesOf = (value) => (Array.isArray(value) ? value : [value]).filter((name) => typeof name === 'string' && /^--[\w-]+$/.test(name));
 /**
  * The token pairs of a part's `contrast.pairs`: each entry lists `text` tokens and the `on` tokens they are drawn
@@ -50,6 +56,11 @@ exports.CONTRAST_STATEMENTS = `
       parsed.set(value, rgba);
       return rgba;
     };
+    const solidImageOf = (style) => {
+      const solid = /^linear-gradient\\(([a-z-]+\\([^()]*\\)), \\1\\)$/.exec(style.backgroundImage);
+      return solid ? rgbaOf(solid[1]) : null;
+    };
+    const imageOf = (style) => style.backgroundImage !== 'none' && solidImageOf(style) === null;
     const over = (top, under) => [0, 1, 2].map((i) => top[i] * top[3] + under[i] * (1 - top[3]));
     const fade = (inner, behind, opacity) => [0, 1, 2].map((i) => inner[i] * opacity + behind[i] * (1 - opacity));
     const chainOf = (element) => {
@@ -57,23 +68,76 @@ exports.CONTRAST_STATEMENTS = `
       for (let at = element; at; at = at.parentElement) chain.unshift(at);
       return chain;
     };
-    const pixelOf = (chain, index, behind, text) => {
+    const createsContext = (element) => {
+      if (element === document.documentElement) return true;
+      const style = getComputedStyle(element);
+      const flexed = /flex|grid/.test(getComputedStyle(element.parentElement).display);
+      return (style.zIndex !== 'auto' && (style.position !== 'static' || flexed)) || style.position === 'fixed' || style.position === 'sticky' ||
+        parseFloat(style.opacity) < 1 || style.isolation === 'isolate' || style.transform !== 'none' || style.filter !== 'none' || style.mixBlendMode !== 'normal';
+    };
+    const contextOf = (element) => {
+      let at = element;
+      while (!createsContext(at)) at = at.parentElement;
+      return at;
+    };
+    let layers = null;
+    const layerOf = (style, self, start, rect) => {
+      const context = contextOf(start);
+      let opacity = parseFloat(style.opacity);
+      for (let at = start; at !== context; at = at.parentElement) opacity *= parseFloat(getComputedStyle(at).opacity);
+      return { self, context, rect, opacity, z: parseInt(style.zIndex, 10), color: rgbaOf(style.backgroundColor), solid: solidImageOf(style), image: imageOf(style) };
+    };
+    const layersOf = () => {
+      if (layers) return layers;
+      layers = [];
+      for (const element of document.querySelectorAll('*')) {
+        const style = getComputedStyle(element);
+        if (element.parentElement && style.position !== 'static' && parseInt(style.zIndex, 10) < 0 && style.visibility === 'visible')
+          layers.push(layerOf(style, element, element.parentElement, element.getBoundingClientRect()));
+        if (style.position === 'static') continue;
+        for (const pseudo of ['::before', '::after']) {
+          const at = getComputedStyle(element, pseudo);
+          if (at.content === 'none' || at.content === 'normal' || at.position !== 'absolute' || !(parseInt(at.zIndex, 10) < 0) || at.visibility !== 'visible') continue;
+          const px = (name) => parseFloat(at[name]) || 0;
+          const content = at.boxSizing !== 'border-box';
+          const box = element.getBoundingClientRect();
+          const left = box.left + element.clientLeft - element.scrollLeft + px('left');
+          const top = box.top + element.clientTop - element.scrollTop + px('top');
+          const width = px('width') + (content ? px('paddingLeft') + px('paddingRight') + px('borderLeftWidth') + px('borderRightWidth') : 0);
+          const height = px('height') + (content ? px('paddingTop') + px('paddingBottom') + px('borderTopWidth') + px('borderBottomWidth') : 0);
+          layers.push(layerOf(at, null, element, { left, top, right: left + width, bottom: top + height }));
+        }
+      }
+      layers.sort((a, b) => a.z - b.z);
+      return layers;
+    };
+    const pixelOf = (chain, index, behind, ink, under) => {
       const style = getComputedStyle(chain[index]);
-      const filled = over(rgbaOf(style.backgroundColor), behind);
-      const inner = index + 1 < chain.length ? pixelOf(chain, index + 1, filled, text) : text ? over(rgbaOf(style.color), filled) : filled;
+      const paint = (color, solid, at) => (solid ? over(solid, over(color, at)) : over(color, at));
+      const filled = under[index].reduce((at, layer) => fade(paint(layer.color, layer.solid, at), at, layer.opacity), paint(rgbaOf(style.backgroundColor), solidImageOf(style), behind));
+      const inner = index + 1 < chain.length ? pixelOf(chain, index + 1, filled, ink, under) : ink ? over(ink, filled) : filled;
       return fade(inner, behind, parseFloat(style.opacity));
     };
     const luminanceOf = (rgb) => {
       const [r, g, b] = rgb.map((channel) => (channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4));
       return 0.2126 * r + 0.7152 * g + 0.0722 * b;
     };
-    const ratioOf = (element) => {
+    const contrastOf = (element, point, ink, ground) => {
       const chain = chainOf(element);
-      if (chain.some((at) => getComputedStyle(at).backgroundImage !== 'none')) return null;
+      if (chain.some((at) => imageOf(getComputedStyle(at)))) return null;
+      const under = chain.map(() => []);
+      for (const layer of layersOf()) {
+        const index = chain.indexOf(layer.context);
+        const { left, top, right, bottom } = layer.rect;
+        if (index < 0 || layer.self?.contains(element) || point.x < left || point.x > right || point.y < top || point.y > bottom) continue;
+        if (layer.image) return null;
+        under[index].push(layer);
+      }
       const white = [1, 1, 1];
-      const [light, dark] = [luminanceOf(pixelOf(chain, 0, white, true)), luminanceOf(pixelOf(chain, 0, white, false))].sort((a, b) => b - a);
+      const [light, dark] = [luminanceOf(pixelOf(chain, 0, white, ink, under)), luminanceOf(pixelOf(ground ? chain.slice(0, ground) : chain, 0, white, null, under))].sort((a, b) => b - a);
       return (light + 0.05) / (dark + 0.05);
     };
+    const ratioOf = (element, point) => contrastOf(element, point, rgbaOf(getComputedStyle(element).color));
     const shown = (ratio) => ratio.toFixed(2) + ':1';
     const contrastSeen = new Set();
     const exempt = (element) => contrast.exceptions.some((selector) => {
@@ -106,13 +170,14 @@ exports.CONTRAST_STATEMENTS = `
     for (let node = texts.nextNode(); node; node = texts.nextNode()) {
       const element = node.parentElement;
       if (!element || !node.textContent.trim() || element.closest('svg, style, script, template')) continue;
-      if (element.closest(':disabled, [aria-disabled="true"], [inert]') || inOffLabel(element) || exempt(element)) continue;
+      if (element.closest(':disabled, [aria-disabled="true"]') || inOffLabel(element) || exempt(element)) continue;
       const style = getComputedStyle(element);
       if (style.visibility !== 'visible') continue;
       const range = document.createRange();
       range.selectNodeContents(node);
-      if (![...range.getClientRects()].some((rect) => rect.width > 1 && rect.height > 1)) continue;
-      const ratio = ratioOf(element);
+      const box = [...range.getClientRects()].find((rect) => rect.width > 1 && rect.height > 1);
+      if (!box) continue;
+      const ratio = ratioOf(element, { x: box.left + box.width / 2, y: box.top + box.height / 2 });
       if (ratio === null) continue;
       const size = parseFloat(style.fontSize) || 0;
       const large = size >= 24 || (size >= 18.66 && parseInt(style.fontWeight, 10) >= 700);
@@ -125,10 +190,110 @@ exports.CONTRAST_STATEMENTS = `
       found.push({
         rule: 'CONTRAST',
         path,
-        detail: '"' + (text.length > 32 ? text.slice(0, 31) + '…' : text) + '" ' + shown(ratio) + ', needs ' + shown(limit) +
+        detail: '"' + (text.length > 32 ? text.slice(0, 31) + '…' : text) + '" ' + shown(ratio) + (options.contrast.scheme ? ' in the ' + options.contrast.scheme + ' scheme' : '') + ', needs ' + shown(limit) +
           (large ? ' (large text)' : '') + '; on purpose: definePart({ contrast: { exceptions: [{ selector, reason }] } })',
       });
     }
+    const inScheme = options.contrast.scheme ? ' in the ' + options.contrast.scheme + ' scheme' : '';
+    const offWrapper = (element) => {
+      const controls = [...element.querySelectorAll('input, select, textarea, button')];
+      return controls.length > 0 && controls.every(offControl);
+    };
+    const skipped = (element) => element.closest(':disabled, [aria-disabled="true"]') !== null || inOffLabel(element) || offWrapper(element) || exempt(element) ||
+      getComputedStyle(element).visibility !== 'visible' || chainOf(element).some((at) => parseFloat(getComputedStyle(at).opacity) === 0);
+    const nonText = (kind, element, ratio) => {
+      const path = pathOf(element);
+      if (contrastSeen.has(kind + ' ' + path)) return;
+      contrastSeen.add(kind + ' ' + path);
+      found.push({
+        rule: 'CONTRAST',
+        path,
+        detail: kind + ' ' + shown(ratio) + inScheme + ', needs ' + shown(${CONTRAST_NON_TEXT}) + ' (non-text); on purpose: definePart({ contrast: { exceptions: [{ selector, reason }] } })',
+      });
+    };
+    const bordersOf = (element) => {
+      const style = getComputedStyle(element);
+      const box = element.getBoundingClientRect();
+      return ['Top', 'Right', 'Bottom', 'Left'].flatMap((side) => {
+        const width = parseFloat(style['border' + side + 'Width']) || 0;
+        if (width <= 0 || ['none', 'hidden'].includes(style['border' + side + 'Style'])) return [];
+        const color = rgbaOf(style['border' + side + 'Color']);
+        if (color[3] <= 0) return [];
+        const x = side === 'Left' ? box.left + width / 2 : side === 'Right' ? box.right - width / 2 : box.left + box.width / 2;
+        const y = side === 'Top' ? box.top + width / 2 : side === 'Bottom' ? box.bottom - width / 2 : box.top + box.height / 2;
+        return [{ color, point: { x, y } }];
+      });
+    };
+    const controlSelector = 'input:not([type="hidden"]), select, textarea, button, [data-et-control], [role="button"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], [role="option"], [role="textbox"], [role="combobox"], [role="slider"], [role="menuitem"]';
+    const frameSelector = 'input:not([type="hidden"]), [data-et-control]';
+    const frames = new Set();
+    const hugs = (frame) => {
+      if (frame.matches('[role="toolbar"]') || bordersOf(frame).length !== 4) return false;
+      const boxes = [...frame.querySelectorAll(frameSelector)].map((control) => control.getBoundingClientRect());
+      const width = Math.max(...boxes.map((box) => box.right)) - Math.min(...boxes.map((box) => box.left));
+      const height = Math.max(...boxes.map((box) => box.bottom)) - Math.min(...boxes.map((box) => box.top));
+      return width * 2 >= frame.clientWidth && height * 2 >= frame.clientHeight;
+    };
+    const surfaceOf = (element) => [...element.classList].find((name) => name.startsWith('et-surface--'));
+    const floating = (element) => {
+      if (element.matches('.et-overlay')) return true;
+      const own = surfaceOf(element);
+      if (!own || getComputedStyle(element).boxShadow === 'none') return false;
+      for (let at = element.parentElement; at; at = at.parentElement) {
+        const step = surfaceOf(at);
+        if (step) return step !== own;
+      }
+      return true;
+    };
+    const wrappers = new Set();
+    for (const control of root.querySelectorAll(frameSelector)) {
+      for (let at = control; at && at !== root.parentElement; at = at.parentElement) {
+        if (bordersOf(at).length === 0) continue;
+        if (at !== control) wrappers.add(at);
+        break;
+      }
+    }
+    for (const wrapper of wrappers) if (hugs(wrapper)) frames.add(wrapper);
+    for (const element of [root, ...root.querySelectorAll('*')]) {
+      if (element.closest('svg, style, script, template')) continue;
+      if (!element.matches(controlSelector) && !frames.has(element)) continue;
+      const box = element.getBoundingClientRect();
+      if (box.width <= 1 || box.height <= 1) continue;
+      const sides = bordersOf(element);
+      if (sides.length === 0 || skipped(element) || floating(element)) continue;
+      const ground = chainOf(element).length - 1;
+      const fill = contrastOf(element, { x: box.left + box.width / 2, y: box.top + box.height / 2 }, null, ground);
+      if (fill === null || fill >= ${CONTRAST_NON_TEXT}) continue;
+      const ratios = sides.map(({ color, point }) => contrastOf(element, point, color, ground));
+      if (ratios.includes(null)) continue;
+      const lowest = Math.min(...ratios);
+      if (lowest < ${CONTRAST_NON_TEXT}) nonText('border', element, lowest);
+    }
+    const paintOf = (style, paint, opacity) => {
+      const value = style[paint];
+      if (!value || value === 'none' || value.startsWith('url(')) return null;
+      const [r, g, b, a] = rgbaOf(/currentcolor/i.test(value) ? style.color : value);
+      const alpha = a * (parseFloat(style[opacity]) || 0);
+      return alpha > 0 ? [r, g, b, alpha] : null;
+    };
+    for (const icon of [root, ...root.querySelectorAll('svg')]) {
+      if (icon.tagName.toLowerCase() !== 'svg' || icon.parentElement?.closest('svg') || skipped(icon)) continue;
+      if (icon.closest('[aria-hidden="true"]') && !icon.closest(controlSelector)) continue;
+      const shapes = [...icon.querySelectorAll('path, circle, ellipse, line, polygon, polyline, rect, text, use')].filter((shape) => !shape.closest('defs, clipPath, mask, symbol, pattern, marker'));
+      const ratios = shapes.flatMap((shape) => {
+        const style = getComputedStyle(shape);
+        const box = shape.getBoundingClientRect();
+        if (style.visibility !== 'visible' || (box.width <= 0 && box.height <= 0)) return [];
+        const point = { x: box.left + box.width / 2, y: box.top + box.height / 2 };
+        const stroked = (parseFloat(style.strokeWidth) || 0) > 0;
+        return [paintOf(style, 'fill', 'fillOpacity'), stroked ? paintOf(style, 'stroke', 'strokeOpacity') : null]
+          .filter((ink) => ink !== null)
+          .map((ink) => contrastOf(shape, point, ink));
+      });
+      if (ratios.length === 0 || ratios.includes(null)) continue;
+      const best = Math.max(...ratios);
+      if (best < ${CONTRAST_NON_TEXT}) nonText('icon', icon, best);
+    }
     for (const pair of contrast.pairs) {
       const missing = [pair.text, pair.on].filter((name) => getComputedStyle(root).getPropertyValue(name).trim() === '');
       if (missing.length > 0) {
@@ -142,10 +307,11 @@ exports.CONTRAST_STATEMENTS = `
       sample.textContent = 'Aa';
       surface.append(sample);
       root.append(surface);
-      const ratio = ratioOf(sample);
+      const box = sample.getBoundingClientRect();
+      const ratio = ratioOf(sample, { x: box.left + box.width / 2, y: box.top + box.height / 2 });
       surface.remove();
       if (ratio !== null && ratio < ${CONTRAST_NORMAL})
-        found.push({ rule: 'CONTRAST', path: pair.text + ' on ' + pair.on, detail: 'token pair ' + shown(ratio) + ', needs ' + shown(${CONTRAST_NORMAL}) });
+        found.push({ rule: 'CONTRAST', path: pair.text + ' on ' + pair.on, detail: 'token pair ' + shown(ratio) + (options.contrast.scheme ? ' in the ' + options.contrast.scheme + ' scheme' : '') + ', needs ' + shown(${CONTRAST_NORMAL}) });
     }
     probe.remove();
   }

package/src/lib/design/system/contrast-check.js.map

@@ -1 +1 @@
-{"version":3,"file":"contrast-check.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/contrast-check.ts"],"names":[],"mappings":";;;AAMA,MAAM,eAAe,GAAG,GAAG,CAAC;AAC5B,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB,MAAM,YAAY,GAAG,CAAC,KAAc,EAAE,EAAE,CACtC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAC7C,CAAC,IAAI,EAAkB,EAAE,CAAC,OAAO,IAAI,KAAK,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAC9E,CAAC;AAEJ;;;GAGG;AACI,MAAM,eAAe,GAAG,CAAC,KAAc,EAAkB,EAAE,CAChE,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,KAA8C,EAAE,EAAE,CAC7F,YAAY,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CACjG,CAAC;AAHS,QAAA,eAAe,mBAGxB;AAEJ,2HAA2H;AACpH,MAAM,oBAAoB,GAAG,CAAC,KAAc,EAAE,EAAE;IACrD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,MAAM,KAAK,GAAG,CAAC,KAAsD,EAAE,EAAE,CACvE,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAA,KAAK,QAAQ;QACnC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE;QAC5B,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ;QAChC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAE7B,OAAO;QACL,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAA2B,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC;QACrF,QAAQ,EAAE,OAAO;aACd,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aAChC,GAAG,CACF,CAAC,KAAK,EAAE,EAAE,CACR,sBAAsB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,8FAA8F,CAC5I;KACJ,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,oBAAoB,wBAiB/B;AAEF;;;;GAIG;AACU,QAAA,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAsFL,cAAc,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCA4B3B,eAAe;uIACkF,eAAe;;;;CAIrJ,CAAC"}
+{"version":3,"file":"contrast-check.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/contrast-check.ts"],"names":[],"mappings":"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"}

package/src/lib/design/system/demo-backdrop.d.ts

@@ -0,0 +1,11 @@
+import { CompletenessGap, SeenFrame } from './complete';
+/**
+ * A page script over the frame root `root`: the `data-et-part` root of `part` when it paints the very fill of the
+ * surface it sits on, as `{ path, fill }`, else `null`. A control or a surface root is never one.
+ */
+export declare const findDemoBackdrop: (part: string) => string;
+/** A `DEMO-BACKDROP` gap when a drawn frame of `part` paints its root in the fill of the surface under it. */
+export declare const demoBackdropGapsOf: (options: {
+    part: string;
+    frames: SeenFrame[];
+}) => CompletenessGap[];

package/src/lib/design/system/demo-backdrop.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.demoBackdropGapsOf = exports.findDemoBackdrop = void 0;
+const TRANSPARENT = new Set(['transparent', 'rgba(0, 0, 0, 0)']);
+/**
+ * A page script over the frame root `root`: the `data-et-part` root of `part` when it paints the very fill of the
+ * surface it sits on, as `{ path, fill }`, else `null`. A control or a surface root is never one.
+ */
+const findDemoBackdrop = (part) => `((root) => {
+  const own = [root, ...root.querySelectorAll('[data-et-part]')].find((element) => (element.getAttribute('data-et-part') ?? '').split(' ').includes(${JSON.stringify(part)}));
+  if (!own || !own.parentElement || own.hasAttribute('data-et-control') || own.hasAttribute('data-et-surface')) return null;
+  const fill = getComputedStyle(own).backgroundColor;
+  if (${JSON.stringify([...TRANSPARENT])}.includes(fill)) return null;
+  const probe = document.createElement('div');
+  probe.style.backgroundColor = 'rgb(var(--et-surface-background))';
+  own.parentElement.appendChild(probe);
+  const under = getComputedStyle(probe).backgroundColor;
+  probe.remove();
+  if (under !== fill) return null;
+  const cls = [...own.classList].find((name) => /^[a-z][\\w-]*$/i.test(name));
+  return { path: own.tagName.toLowerCase() + (cls ? '.' + cls : ''), fill };
+})`;
+exports.findDemoBackdrop = findDemoBackdrop;
+/** A `DEMO-BACKDROP` gap when a drawn frame of `part` paints its root in the fill of the surface under it. */
+const demoBackdropGapsOf = (options) => {
+    var _a;
+    const painted = options.frames.filter((frame) => frame.backdrop);
+    const first = (_a = painted[0]) === null || _a === void 0 ? void 0 : _a.backdrop;
+    if (!first)
+        return [];
+    const states = [...new Set(painted.map((frame) => frame.state))];
+    return [
+        {
+            code: 'DEMO-BACKDROP',
+            target: options.part,
+            detail: `${states.join(', ')}: the part root ${first.path} paints the surface it sits on (${first.fill}), a demo backdrop the app part does not draw - drop the fill from the drawing and let the part stay transparent`,
+        },
+    ];
+};
+exports.demoBackdropGapsOf = demoBackdropGapsOf;
+//# sourceMappingURL=demo-backdrop.js.map

package/src/lib/design/system/demo-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo-backdrop.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/demo-backdrop.ts"],"names":[],"mappings":";;;AAEA,MAAM,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAEjE;;;GAGG;AACI,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC;sJACoG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;;QAGlK,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC;;;;;;;;;GASrC,CAAC;AAbS,QAAA,gBAAgB,oBAazB;AAEJ,8GAA8G;AACvG,MAAM,kBAAkB,GAAG,CAAC,OAA8C,EAAqB,EAAE;;IACtG,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,MAAA,OAAO,CAAC,CAAC,CAAC,0CAAE,QAAQ,CAAC;IAEnC,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IAEtB,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAEjE,OAAO;QACL;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,OAAO,CAAC,IAAI;YACpB,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,KAAK,CAAC,IAAI,mCAAmC,KAAK,CAAC,IAAI,kHAAkH;SACzN;KACF,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,kBAAkB,sBAe7B"}

package/src/lib/design/system/design-hash.d.ts

@@ -0,0 +1,31 @@
+import { ResolvedPart, ResolvedProduct } from './resolve-product';
+/** The content hash of each file, under its path from the repository root. */
+export type FileHashes = Record<string, string>;
+/** A part's design hash, the file hashes it covers, and the folder-only hash records from before file lists. */
+export type DesignHash = {
+    hash: string;
+    files: FileHashes;
+    legacy: string;
+};
+/** A stored mark: one with `files` holds at the design hash, one without at the folder-only hash. */
+export type HashRecord = {
+    hash: string;
+    files?: FileHashes;
+};
+export declare const sha16: (data: string | Buffer) => string;
+/** Whether a stored `files` value is absent or a valid file hash map, for the readers of the mark files. */
+export declare const isOptionalFileHashes: (value: unknown) => value is FileHashes | undefined;
+/** The hash of each existing file in `files`, keyed by its `/`-separated path from `root`, sorted. */
+export declare const fileHashesOf: (root: string, files: Iterable<string>) => FileHashes;
+export declare const hashOfFiles: (files: FileHashes) => string;
+/**
+ * The design hash of a part: its folder, the shared and asset files it reaches, and every file it reaches through
+ * imports - other `@system` parts, `@ethlete/<lib>/design` mocks and the fixtures - with the hash of each file.
+ */
+export declare const designHashOf: (options: {
+    product: ResolvedProduct;
+    part: ResolvedPart;
+}) => DesignHash;
+export declare const recordHolds: (record: HashRecord, now: DesignHash) => boolean;
+/** The paths whose hash differs between two file hash maps, added and removed paths included, sorted. */
+export declare const changedFilesOf: (before: FileHashes, now: FileHashes) => string[];

package/src/lib/design/system/design-hash.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.changedFilesOf = exports.recordHolds = exports.designHashOf = exports.hashOfFiles = exports.fileHashesOf = exports.isOptionalFileHashes = exports.sha16 = void 0;
+const crypto_1 = require("crypto");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const assets_1 = require("./assets");
+const imports_1 = require("./imports");
+const inventory_approval_1 = require("./inventory-approval");
+const reachable_files_1 = require("./reachable-files");
+const baseline_1 = require("./sketch/baseline");
+const ts_source_1 = require("./ts-source");
+const sha16 = (data) => (0, crypto_1.createHash)('sha256').update(data).digest('hex').slice(0, 16);
+exports.sha16 = sha16;
+const isFileHashes = (value) => !!value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    Object.values(value).every((hash) => typeof hash === 'string');
+/** Whether a stored `files` value is absent or a valid file hash map, for the readers of the mark files. */
+const isOptionalFileHashes = (value) => value === undefined || isFileHashes(value);
+exports.isOptionalFileHashes = isOptionalFileHashes;
+/** The hash of each existing file in `files`, keyed by its `/`-separated path from `root`, sorted. */
+const fileHashesOf = (root, files) => Object.fromEntries([...new Set(files)]
+    .map((file) => [(0, path_1.relative)(root, file).split(path_1.sep).join('/'), file])
+    .sort(([a], [b]) => a.localeCompare(b))
+    .flatMap(([path, file]) => {
+    try {
+        return [[path, (0, exports.sha16)((0, fs_1.readFileSync)(file))]];
+    }
+    catch (_a) {
+        return [];
+    }
+}));
+exports.fileHashesOf = fileHashesOf;
+const hashOfFiles = (files) => (0, exports.sha16)(Object.entries(files)
+    .map(([path, hash]) => `${path}\0${hash}\n`)
+    .join(''));
+exports.hashOfFiles = hashOfFiles;
+/**
+ * The design hash of a part: its folder, the shared and asset files it reaches, and every file it reaches through
+ * imports - other `@system` parts, `@ethlete/<lib>/design` mocks and the fixtures - with the hash of each file.
+ */
+const designHashOf = (options) => {
+    const { product, part } = options;
+    const owner = (0, inventory_approval_1.partOwnerOf)({ product, part });
+    const dir = (0, path_1.dirname)(part.file);
+    const inputs = (0, baseline_1.partInputsOf)({ product: owner, dir });
+    const reachable = (0, reachable_files_1.reachableFilesOf)(product, [part]);
+    const reached = [...reachable.files.keys()];
+    const fixtures = product.fixtures && [...reachable.files.values()].some((source) => (0, ts_source_1.importsOf)(source).includes(imports_1.FIXTURES_SPECIFIER))
+        ? [product.fixtures]
+        : [];
+    const files = [
+        ...inputs.files,
+        ...inputs.shared.map(({ file }) => file),
+        ...inputs.assets.map(({ file }) => file),
+        ...reached,
+        ...(0, assets_1.importedAssetsOf)({ product: owner, files: reached }).map(({ file }) => file),
+        ...reachable.sdkDesign.keys(),
+        ...fixtures,
+    ].filter((file) => !inputs.generated.has(file));
+    const hashes = (0, exports.fileHashesOf)((0, reachable_files_1.repoRootOf)(product), files);
+    return { hash: (0, exports.hashOfFiles)(hashes), files: hashes, legacy: (0, baseline_1.partHashOf)({ product: owner, dir }) };
+};
+exports.designHashOf = designHashOf;
+const recordHolds = (record, now) => record.files ? record.hash === now.hash : record.hash === now.legacy;
+exports.recordHolds = recordHolds;
+/** The paths whose hash differs between two file hash maps, added and removed paths included, sorted. */
+const changedFilesOf = (before, now) => [...new Set([...Object.keys(before), ...Object.keys(now)])]
+    .filter((path) => before[path] !== now[path])
+    .sort((a, b) => a.localeCompare(b));
+exports.changedFilesOf = changedFilesOf;
+//# sourceMappingURL=design-hash.js.map

package/src/lib/design/system/design-hash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-hash.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/design-hash.ts"],"names":[],"mappings":"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"}

package/src/lib/design/system/disabled-interaction.d.ts

@@ -0,0 +1,8 @@
+/** The rule a disabled control breaks when a forced hover or active changes how it looks. */
+export declare const DISABLED_INTERACTION_RULE = "DISABLED-INTERACTION";
+/**
+ * The statements of the disabled-interaction check inside the frame script of `render-check`. They use `root` and
+ * `report` of that script. They measure each disabled element plain, then with `data-et-force` hover and active, and
+ * restore the element, so they run last.
+ */
+export declare const DISABLED_INTERACTION_STATEMENTS = "\n  const disabledLook = (element) => {\n    const style = getComputedStyle(element);\n    return ['backgroundColor', 'color', 'borderColor', 'boxShadow', 'outline', 'opacity', 'transform'].map((name) => [name, style[name]]);\n  };\n  for (const element of root.querySelectorAll(':disabled, [aria-disabled=\"true\"]')) {\n    if (element.getClientRects().length === 0) continue;\n    const before = element.getAttribute('data-et-force');\n    const transition = element.style.transition;\n    element.style.transition = 'none';\n    element.removeAttribute('data-et-force');\n    const plain = disabledLook(element);\n    const changed = new Set();\n    for (const interaction of ['hover', 'active']) {\n      element.setAttribute('data-et-force', interaction);\n      disabledLook(element).forEach(([name, value], index) => {\n        if (value !== plain[index][1]) changed.add(name);\n      });\n    }\n    if (before === null) element.removeAttribute('data-et-force');\n    else element.setAttribute('data-et-force', before);\n    element.style.transition = transition;\n    if (changed.size > 0)\n      report('DISABLED-INTERACTION', element, 'hover/active styles apply while disabled - add a :not([disabled]) guard (changes ' + [...changed].join(', ') + ')');\n  }\n";

package/src/lib/design/system/disabled-interaction.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DISABLED_INTERACTION_STATEMENTS = exports.DISABLED_INTERACTION_RULE = void 0;
+/** The rule a disabled control breaks when a forced hover or active changes how it looks. */
+exports.DISABLED_INTERACTION_RULE = 'DISABLED-INTERACTION';
+/**
+ * The statements of the disabled-interaction check inside the frame script of `render-check`. They use `root` and
+ * `report` of that script. They measure each disabled element plain, then with `data-et-force` hover and active, and
+ * restore the element, so they run last.
+ */
+exports.DISABLED_INTERACTION_STATEMENTS = `
+  const disabledLook = (element) => {
+    const style = getComputedStyle(element);
+    return ['backgroundColor', 'color', 'borderColor', 'boxShadow', 'outline', 'opacity', 'transform'].map((name) => [name, style[name]]);
+  };
+  for (const element of root.querySelectorAll(':disabled, [aria-disabled="true"]')) {
+    if (element.getClientRects().length === 0) continue;
+    const before = element.getAttribute('data-et-force');
+    const transition = element.style.transition;
+    element.style.transition = 'none';
+    element.removeAttribute('data-et-force');
+    const plain = disabledLook(element);
+    const changed = new Set();
+    for (const interaction of ['hover', 'active']) {
+      element.setAttribute('data-et-force', interaction);
+      disabledLook(element).forEach(([name, value], index) => {
+        if (value !== plain[index][1]) changed.add(name);
+      });
+    }
+    if (before === null) element.removeAttribute('data-et-force');
+    else element.setAttribute('data-et-force', before);
+    element.style.transition = transition;
+    if (changed.size > 0)
+      report('${exports.DISABLED_INTERACTION_RULE}', element, 'hover/active styles apply while disabled - add a :not([disabled]) guard (changes ' + [...changed].join(', ') + ')');
+  }
+`;
+//# sourceMappingURL=disabled-interaction.js.map

package/src/lib/design/system/disabled-interaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disabled-interaction.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/lib/design/system/disabled-interaction.ts"],"names":[],"mappings":";;;AAAA,6FAA6F;AAChF,QAAA,yBAAyB,GAAG,sBAAsB,CAAC;AAEhE;;;;GAIG;AACU,QAAA,+BAA+B,GAAG;;;;;;;;;;;;;;;;;;;;;;;gBAuB/B,iCAAyB;;CAExC,CAAC"}

package/src/lib/design/system/dom-command.d.ts

@@ -0,0 +1,36 @@
+import { DesignConfig } from '../paths';
+import { StartHarnessServer } from './harness-server';
+import { PointerOpen } from './part-compare';
+import { ResolvedProduct } from './resolve-product';
+export declare const DOM_USAGE = "dom <layer>/<name> --product <name> [--state <name>] [--app] [--url <app dev server url>]";
+export type ReadDom = (options: {
+    target: string;
+    config: DesignConfig;
+    product: ResolvedProduct;
+    part: string;
+    state: string | null;
+    app: boolean;
+    url: string;
+}) => Promise<{
+    state: string;
+    html: string;
+} | string>;
+/** The reason `--app` cannot print a state: compare forces its hover, active or focus, or clicks a trigger to open it. */
+export declare const appRefusalOf: (options: {
+    part: string;
+    state: string;
+    markup: string;
+    open: PointerOpen | string | undefined;
+}) => string | null;
+export declare const readDom: ReadDom;
+/**
+ * `et design dom <layer>/<name> …` prints the pretty-printed HTML of one state of a part: its rendered design, or
+ * with `--app` the harness host element of the app that compare shoots.
+ */
+export declare const designDom: (options: {
+    target: string;
+    argv: string[];
+    invocation: string;
+    read?: ReadDom;
+    start?: StartHarnessServer;
+}) => Promise<0 | 1 | 2>;