@multiplatform.one/theme 7.83.1 → 7.83.2

package/dist/esm/audit/themeMatrix.mjs

@@ -0,0 +1,890 @@
+import { aaTextContrastRatio, measureContrast, minContrastRatio } from "../theme/colorRules.mjs";
+function captureMatrixSnapshot() {
+  if (typeof document === "undefined") throw new Error("captureMatrixSnapshot needs a DOM");
+  const SKIP_TAGS = /* @__PURE__ */new Set(["script", "style", "link", "meta", "head", "title", "noscript", "br", "wbr", "template"]);
+  const round = n => Math.round(n * 4) / 4;
+  const toRect = r => ({
+    x: round(r.x),
+    y: round(r.y),
+    w: round(r.width),
+    h: round(r.height)
+  });
+  function parseCssColor(raw) {
+    const s = raw.trim().toLowerCase();
+    if (s === "transparent") return [0, 0, 0, 0];
+    const m = s.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.%]+))?\s*\)$/);
+    if (!m) return null;
+    let a = 1;
+    if (m[4] !== void 0) {
+      a = m[4].endsWith("%") ? Number.parseFloat(m[4]) / 100 : Number.parseFloat(m[4]);
+    }
+    return [Number.parseFloat(m[1]), Number.parseFloat(m[2]), Number.parseFloat(m[3]), a];
+  }
+  function toHex(rgb) {
+    const h = v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0");
+    return `#${h(rgb[0])}${h(rgb[1])}${h(rgb[2])}`;
+  }
+  function blend(top, bottom) {
+    const a = top[3];
+    return [top[0] * a + bottom[0] * (1 - a), top[1] * a + bottom[1] * (1 - a), top[2] * a + bottom[2] * (1 - a)];
+  }
+  function effectiveBackground(el) {
+    const layers = [];
+    let overImage = false;
+    let node = el;
+    let opaqueBase = null;
+    while (node) {
+      const cs = getComputedStyle(node);
+      if (cs.backgroundImage && cs.backgroundImage !== "none") overImage = true;
+      if (node.getAttribute("data-mpo-chart-backdrop") === "patterned") overImage = true;
+      const parsed = parseCssColor(cs.backgroundColor);
+      if (parsed && parsed[3] > 0) {
+        if (parsed[3] >= 0.999) {
+          opaqueBase = [parsed[0], parsed[1], parsed[2]];
+          break;
+        }
+        layers.push(parsed);
+      }
+      node = node.parentElement;
+    }
+    if (!opaqueBase) {
+      return {
+        hex: "#ffffff",
+        resolved: false,
+        overImage
+      };
+    }
+    let acc = opaqueBase;
+    for (let i = layers.length - 1; i >= 0; i--) {
+      acc = blend(layers[i], acc);
+    }
+    return {
+      hex: toHex(acc),
+      resolved: !overImage,
+      overImage
+    };
+  }
+  function effectiveOpacity(el) {
+    let o = 1;
+    let node = el;
+    while (node) {
+      const v = Number.parseFloat(getComputedStyle(node).opacity);
+      if (!Number.isNaN(v)) o *= v;
+      node = node.parentElement;
+    }
+    return o;
+  }
+  const GEOMETRY_PROPS = ["borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "rowGap", "columnGap", "fontSize", "fontWeight", "fontFamily", "lineHeight", "letterSpacing"];
+  const root = document.querySelector("#mpo-matrix-root") ?? document.querySelector("[data-mpo-matrix-root]") ?? document.querySelector("#storybook-root") ?? document.querySelector("#root") ?? document.body;
+  const storyRendered = !!root && root.children.length > 0;
+  const geometry = [];
+  const textSamples = [];
+  const iconSamples = [];
+  const chartSamples = [];
+  let svgRootCount = 0;
+  const capturedSvgRoots = /* @__PURE__ */new Set();
+  function accessibleName(el) {
+    const labelledBy = el.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const name = labelledBy.split(/\s+/).map(id => document.getElementById(id)?.textContent ?? "").join(" ").trim();
+      if (name) return name.slice(0, 100);
+    }
+    const labels = "labels" in el ? el.labels : null;
+    const labelText = labels ? Array.from(labels).map(label => label.textContent ?? "").join(" ") : "";
+    return (el.getAttribute("aria-label") || labelText || el.getAttribute("title") || el.textContent || "").trim().slice(0, 100);
+  }
+  function controlName(el) {
+    if (el.matches("[data-mp-input-box]")) {
+      const input = el.querySelector("input, textarea, select");
+      if (input) return accessibleName(input) || input.getAttribute("placeholder") || "input";
+    }
+    return accessibleName(el);
+  }
+  function unsupportedCompositing(el) {
+    let backgroundInGroup = false;
+    for (let node = el; node; node = node.parentElement) {
+      const cs = getComputedStyle(node);
+      const background = parseCssColor(cs.backgroundColor);
+      if (background && background[3] > 0) backgroundInGroup = true;
+      if (Number.parseFloat(cs.opacity) < 1 && backgroundInGroup) return true;
+      if (cs.mixBlendMode && cs.mixBlendMode !== "normal") return true;
+    }
+    return false;
+  }
+  function collectIcon(el, key, cs) {
+    if (el.tagName.toLowerCase() !== "svg" || el.parentElement?.closest("svg")) return;
+    const backdrop = effectiveBackground(el);
+    const rect = el.getBoundingClientRect();
+    const sample = {
+      key,
+      context: accessibleName(el),
+      status: "conveying",
+      background: backdrop.hex,
+      backgroundResolved: backdrop.resolved,
+      overImage: backdrop.overImage,
+      shapeCount: 0,
+      distinctPaints: 0,
+      rect: toRect(rect)
+    };
+    iconSamples.push(sample);
+    if (cs.visibility === "hidden" || cs.visibility === "collapse" || effectiveOpacity(el) === 0 || rect.width === 0 || rect.height === 0) {
+      sample.status = "hidden";
+      return;
+    }
+    if (el.closest('[disabled], [aria-disabled="true"], [data-disabled="true"]')) {
+      sample.status = "disabled-control";
+      return;
+    }
+    const controls = 'button, a[href], label, summary, [data-mp-input-box], [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], [role="option"], [role="combobox"]';
+    let namedControl = el.closest(controls);
+    while (namedControl && !controlName(namedControl)) namedControl = namedControl.parentElement?.closest(controls) ?? null;
+    if (namedControl) sample.context = controlName(namedControl);else if (el.closest('[aria-hidden="true"], [role="presentation"], [role="none"]')) {
+      sample.status = "decorative-standalone";
+      return;
+    }
+    if (!backdrop.resolved) {
+      sample.unmeasurable = "unresolved-backdrop";
+      return;
+    }
+    if (el.querySelector("use")) {
+      sample.unmeasurable = "use-indirection";
+      return;
+    }
+    const paintNodes = [el, ...Array.from(el.querySelectorAll("*"))];
+    for (let ancestor = el.parentElement; ancestor; ancestor = ancestor.parentElement) paintNodes.push(ancestor);
+    if (paintNodes.some(node => {
+      const style = getComputedStyle(node);
+      return style.filter && style.filter !== "none" || style.maskImage && style.maskImage !== "none";
+    })) {
+      sample.unmeasurable = "masked-or-filtered";
+      return;
+    }
+    const background = [Number.parseInt(backdrop.hex.slice(1, 3), 16), Number.parseInt(backdrop.hex.slice(3, 5), 16), Number.parseInt(backdrop.hex.slice(5, 7), 16)];
+    const paints = /* @__PURE__ */new Set();
+    const kinds = /* @__PURE__ */new Set();
+    const alphaValue = raw => raw.endsWith("%") ? Number.parseFloat(raw) / 100 : Number.parseFloat(raw);
+    for (const shape of Array.from(el.querySelectorAll("path, rect, circle, ellipse, line, polyline, polygon, text, tspan"))) {
+      if (shape.closest("defs, clipPath, mask, pattern, marker, symbol")) continue;
+      const style = getComputedStyle(shape);
+      let hiddenGroup = false;
+      for (let node = shape; node && node !== el; node = node.parentElement) {
+        if (getComputedStyle(node).display === "none") hiddenGroup = true;
+      }
+      if (hiddenGroup || style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse" || effectiveOpacity(shape) === 0) continue;
+      const bounds = shape.getBBox();
+      if (typeof SVGGeometryElement !== "undefined" && shape instanceof SVGGeometryElement && shape.getTotalLength() === 0) continue;
+      sample.shapeCount++;
+      if (unsupportedCompositing(shape)) {
+        sample.unmeasurable = "unsupported-compositing";
+        return;
+      }
+      if ([style.markerStart, style.markerMid, style.markerEnd].some(value => value && value !== "none")) {
+        sample.unmeasurable = "unsupported-paint";
+        return;
+      }
+      for (const kind of ["fill", "stroke"]) {
+        if (kind === "fill" && (shape.tagName.toLowerCase() === "line" || bounds.width === 0 || bounds.height === 0)) continue;
+        if (kind === "stroke" && !(Number.parseFloat(style.strokeWidth) > 0)) continue;
+        const raw = style[kind].trim().toLowerCase();
+        if (raw === "none") continue;
+        const ink = parseCssColor(raw === "currentcolor" ? style.color : raw);
+        if (!ink) {
+          sample.unmeasurable = "unsupported-paint";
+          return;
+        }
+        const paintOpacity = alphaValue(kind === "fill" ? style.fillOpacity : style.strokeOpacity);
+        ink[3] *= (Number.isFinite(paintOpacity) ? paintOpacity : 1) * effectiveOpacity(shape);
+        if (ink[3] === 0) continue;
+        paints.add(toHex(blend(ink, background)));
+        kinds.add(kind);
+      }
+    }
+    sample.distinctPaints = paints.size;
+    if (paints.size === 0) sample.unmeasurable = "no-paint";else if (paints.size > 1) sample.unmeasurable = "multicolor";else {
+      sample.paint = Array.from(paints)[0];
+      sample.paintKinds = Array.from(kinds);
+    }
+  }
+  function collectChart(el, key) {
+    const backdrop = effectiveBackground(el);
+    const rawCount = el.getAttribute("data-mpo-chart-datum-count");
+    const expected = rawCount !== null && /^\d+$/.test(rawCount) ? Number(rawCount) : -1;
+    const owner = el.closest("[data-mpo-chart-owner]");
+    const rows = owner ? Array.from(owner.querySelectorAll("[data-mpo-chart-datum-text]")).filter(row => row.tagName.toLowerCase() !== "svg" && row.closest("[data-mpo-chart-owner]") === owner) : [];
+    const visible = node => {
+      const style = getComputedStyle(node);
+      const rect = node.getBoundingClientRect();
+      return style.visibility !== "hidden" && style.visibility !== "collapse" && effectiveOpacity(node) > 0 && (rect.width > 0 || rect.height > 0);
+    };
+    const completeRows = rows.filter((row, index) => {
+      const name = row.querySelector("[data-mpo-chart-datum-label]");
+      const value = row.querySelector("[data-mpo-chart-datum-value]");
+      return row.getAttribute("data-mpo-chart-datum-text") === String(index) && name && value && visible(name) && visible(value) && !!name.textContent?.trim() && !!value.textContent?.trim();
+    });
+    const sample = {
+      key,
+      kind: el.getAttribute("data-mpo-chart") ?? "",
+      context: accessibleName(el),
+      label: (el.getAttribute("aria-label") ?? "").trim(),
+      background: backdrop.hex,
+      backgroundResolved: backdrop.resolved,
+      marks: [],
+      labels: [],
+      chrome: [],
+      unaccountedPaint: [],
+      separation: {
+        declared: el.getAttribute("data-mpo-chart-separated") === "true"
+      },
+      datumText: {
+        viewId: el.getAttribute("data-mpo-chart-data-view") ?? void 0,
+        expectedValues: el.getAttribute("data-mpo-chart-data-expected") ?? void 0,
+        declared: el.getAttribute("data-mpo-chart-datum-text") === "true",
+        expected,
+        observed: completeRows.length,
+        complete: expected > 0 && rows.length === expected && completeRows.length === expected
+      }
+    };
+    chartSamples.push(sample);
+    if (!visible(el)) sample.unmeasurable = "hidden-chart";else if (!backdrop.resolved) sample.unmeasurable = "unresolved-backdrop";else if (el.querySelector("use")) sample.unmeasurable = "use-indirection";
+    const marks = Array.from(el.querySelectorAll("[data-mpo-chart-mark]"));
+    const certifiedMasks = /* @__PURE__ */new Set();
+    if ((sample.kind === "pie" || sample.kind === "donut") && marks.length > 1) {
+      const round2 = value => Math.round(value * 1e3) / 1e3;
+      const pathTokens = path => JSON.stringify((path.replace(/^path\(["']?|["']?\)$/g, "").match(/[a-zA-Z]|[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g) ?? []).map(token => Number.isNaN(Number(token)) ? token : Number(token)));
+      const point = (radius, angle) => `${round2(radius * Math.cos(angle - Math.PI / 2))},${round2(radius * Math.sin(angle - Math.PI / 2))}`;
+      const proofs = marks.map(mark => {
+        if (mark.tagName.toLowerCase() !== "path" || mark.getAttribute("data-mpo-chart-mask") !== "eroded-arc-v1") return;
+        const values = (mark.getAttribute("data-mpo-chart-slice") ?? "").split(",").map(Number);
+        if (values.length !== 4 || !values.every(Number.isFinite)) return;
+        const [start, end, inner, outer] = values;
+        const span = end - start;
+        if (start < 0 || end > Math.PI * 2 + 1e-9 || span <= 0 || span >= Math.PI * 2 || inner < 0 || outer <= inner) return;
+        const radius = (inner + outer) / 2;
+        const projection = Math.min(outer, Math.max(inner, radius * Math.cos(span / 2)));
+        const radialDistance = Math.sqrt(Math.max(0, radius ** 2 + projection ** 2 - 2 * radius * projection * Math.cos(span / 2)));
+        if (outer - radius <= 1.002 || radius - inner <= 1.002 || radialDistance <= 1.002) return;
+        const large = Number(span >= Math.PI);
+        const d = `M${point(outer, start)}A${round2(outer)},${round2(outer)},0,${large},1,${point(outer, end)}` + (inner ? `L${point(inner, end)}A${round2(inner)},${round2(inner)},0,${large},0,${point(inner, start)}Z` : "L0,0Z");
+        if (mark.getAttribute("d") !== d) return;
+        const markStyle = getComputedStyle(mark);
+        const paintedD = markStyle.getPropertyValue("d");
+        if (paintedD && pathTokens(paintedD) !== pathTokens(d)) return;
+        if (markStyle.stroke !== "none") return;
+        const reference = /^url\(["']?#([^"')]+)["']?\)$/.exec(mark.getAttribute("mask") ?? "");
+        if (!reference) return;
+        const matches = Array.from(document.querySelectorAll("[id]")).filter(node => node.id === reference[1]);
+        const mask = matches[0];
+        if (matches.length !== 1 || mask.tagName.toLowerCase() !== "mask" || !el.contains(mask)) return;
+        const definitions = mask.parentElement;
+        if (definitions?.tagName.toLowerCase() !== "defs" || definitions.parentElement !== mark.parentElement) return;
+        const computedReference = /^url\(["']?([^"')]+)["']?\)$/.exec(markStyle.maskImage);
+        if (!computedReference || !["match-source", "luminance"].includes(markStyle.maskMode)) return;
+        try {
+          if (new URL(computedReference[1], document.baseURI).href !== new URL(`#${reference[1]}`, document.URL).href) return;
+        } catch {
+          return;
+        }
+        if (mask.getAttribute("maskUnits") !== "userSpaceOnUse" || mask.getAttribute("maskContentUnits") !== "userSpaceOnUse" || getComputedStyle(mask).getPropertyValue("mask-type") !== "luminance") return;
+        const bounds = {
+          x: -outer - 2,
+          y: -outer - 2,
+          width: (outer + 2) * 2,
+          height: (outer + 2) * 2
+        };
+        if (Object.entries(bounds).some(([name, value]) => Number(mask.getAttribute(name)) !== value)) return;
+        if (mask.children.length !== 1) return;
+        const boundary = mask.children[0];
+        if (boundary.tagName.toLowerCase() !== "path" || boundary.getAttribute("d") !== d) return;
+        for (const node of [definitions, mask, boundary]) {
+          const style = getComputedStyle(node);
+          if (style.transform !== "none" || style.filter !== "none" || style.maskImage !== "none" || style.clipPath !== "none" || style.opacity !== "1" || style.visibility !== "visible" || style.display === "none") return;
+          if ([style.markerStart, style.markerMid, style.markerEnd].some(value => value && value !== "none")) return;
+        }
+        if (unsupportedCompositing(boundary)) return;
+        const boundaryStyle = getComputedStyle(boundary);
+        if (boundaryStyle.fill !== "rgb(255, 255, 255)" || boundaryStyle.stroke !== "rgb(0, 0, 0)" || boundaryStyle.fillOpacity !== "1" || boundaryStyle.strokeOpacity !== "1" || Number.parseFloat(boundaryStyle.strokeWidth) !== 2 || boundaryStyle.strokeLinejoin !== "round" || boundaryStyle.strokeLinecap !== "round" || boundaryStyle.paintOrder !== "normal" || boundaryStyle.vectorEffect !== "none" || boundaryStyle.strokeDasharray !== "none") return;
+        const boundaryD = boundaryStyle.getPropertyValue("d");
+        if (boundaryD && pathTokens(boundaryD) !== pathTokens(d)) return;
+        for (let node = mark; node; node = node.parentElement) {
+          const style = getComputedStyle(node);
+          if (style.transform.startsWith("matrix3d") || style.perspective && style.perspective !== "none") return;
+        }
+        const ctm = mark.getScreenCTM();
+        if (!ctm) return;
+        const matrix = [ctm.a, ctm.b, ctm.c, ctm.d, ctm.e, ctm.f];
+        const firstScale = Math.hypot(ctm.a + ctm.d, ctm.b - ctm.c);
+        const secondScale = Math.hypot(ctm.a - ctm.d, ctm.b + ctm.c);
+        const smallest = Math.abs(firstScale - secondScale) / 2;
+        if (!matrix.every(Number.isFinite) || !Number.isFinite(smallest) || smallest <= 0) return;
+        const measuredGap = 2 * smallest * window.devicePixelRatio;
+        const gap = Math.abs(measuredGap - 2) <= 8 * Number.EPSILON ? 2 : measuredGap;
+        return {
+          mark,
+          start,
+          end,
+          inner,
+          outer,
+          matrix,
+          gap
+        };
+      });
+      const first = proofs[0];
+      if (first && Math.abs(first.start) < 1e-9 && proofs.every((proof, index) => proof && proof.inner === first.inner && proof.outer === first.outer && proof.matrix.every((value, axis) => value === first.matrix[axis]) && Math.abs(proof.start - (index ? proofs[index - 1].end : 0)) < 1e-9) && Math.abs(proofs[proofs.length - 1].end - Math.PI * 2) < 1e-9) {
+        for (const proof of proofs) certifiedMasks.add(proof.mark);
+        sample.separation.method = "eroded-arc";
+        sample.separation.minimumGapPx = first.gap;
+      }
+    }
+    function paintSample(shape, paintKey, label) {
+      const item = {
+        key: paintKey,
+        label,
+        background: backdrop.hex
+      };
+      if (shape.closest("defs, clipPath, mask, pattern, marker, symbol")) return {
+        ...item,
+        unmeasurable: "no-paint"
+      };
+      if (!visible(shape)) return {
+        ...item,
+        unmeasurable: "no-paint"
+      };
+      if (!backdrop.resolved) return {
+        ...item,
+        unmeasurable: "unresolved-backdrop"
+      };
+      for (let node = shape; node; node = node.parentElement) {
+        const style2 = getComputedStyle(node);
+        if (style2.filter && style2.filter !== "none" || style2.maskImage && style2.maskImage !== "none" && !(node === shape && certifiedMasks.has(shape))) return {
+          ...item,
+          unmeasurable: "masked-or-filtered"
+        };
+        if (style2.clipPath && style2.clipPath !== "none") return {
+          ...item,
+          unmeasurable: "unsupported-paint"
+        };
+      }
+      if (unsupportedCompositing(shape)) return {
+        ...item,
+        unmeasurable: "unsupported-compositing"
+      };
+      const style = getComputedStyle(shape);
+      if ([style.markerStart, style.markerMid, style.markerEnd].some(value => value && value !== "none")) return {
+        ...item,
+        unmeasurable: "unsupported-paint"
+      };
+      let bounds;
+      try {
+        bounds = shape.getBBox();
+      } catch {
+        return {
+          ...item,
+          unmeasurable: "unsupported-paint"
+        };
+      }
+      const background = [Number.parseInt(backdrop.hex.slice(1, 3), 16), Number.parseInt(backdrop.hex.slice(3, 5), 16), Number.parseInt(backdrop.hex.slice(5, 7), 16)];
+      const paints = /* @__PURE__ */new Set();
+      for (const kind of ["fill", "stroke"]) {
+        if (kind === "fill" && (shape.tagName.toLowerCase() === "line" || bounds.width === 0 || bounds.height === 0)) continue;
+        if (kind === "stroke" && !(Number.parseFloat(style.strokeWidth) > 0)) continue;
+        const raw = style[kind].trim().toLowerCase();
+        if (raw === "none") continue;
+        const ink = parseCssColor(raw === "currentcolor" ? style.color : raw);
+        if (!ink) return {
+          ...item,
+          unmeasurable: "unsupported-paint"
+        };
+        const alphaRaw = kind === "fill" ? style.fillOpacity : style.strokeOpacity;
+        const alpha = Number.parseFloat(alphaRaw) / (alphaRaw.endsWith("%") ? 100 : 1);
+        ink[3] *= (Number.isFinite(alpha) ? alpha : 1) * effectiveOpacity(shape);
+        if (ink[3] > 0) paints.add(toHex(blend(ink, background)));
+      }
+      if (paints.size !== 1) return {
+        ...item,
+        unmeasurable: paints.size ? "multicolor" : "no-paint"
+      };
+      return {
+        ...item,
+        paint: Array.from(paints)[0]
+      };
+    }
+    for (const [index, mark] of marks.entries()) {
+      const tag = mark.tagName.toLowerCase();
+      const item = !["path", "rect", "circle", "ellipse", "line", "polyline", "polygon"].includes(tag) ? {
+        key: `${key}/mark:${index}`,
+        label: mark.getAttribute("data-mpo-chart-mark") ?? "",
+        background: backdrop.hex,
+        unmeasurable: "unsupported-paint"
+      } : paintSample(mark, `${key}/mark:${index}`, mark.getAttribute("data-mpo-chart-mark") || `mark ${index + 1}`);
+      sample.marks.push(item);
+    }
+    for (const [index, node] of Array.from(el.querySelectorAll("text, tspan")).entries()) {
+      const text = Array.from(node.childNodes).filter(child => child.nodeType === 3).map(child => child.textContent ?? "").join("").trim();
+      if (text) sample.labels.push(paintSample(node, `${key}/label:${index}`, text));
+    }
+    for (const [index, drawable] of Array.from(el.querySelectorAll("path, rect, circle, ellipse, line, polyline, polygon, image, foreignObject, use")).entries()) {
+      if (drawable.hasAttribute("data-mpo-chart-mark")) continue;
+      const tag = drawable.tagName.toLowerCase();
+      const item = paintSample(drawable, `${key}/drawable:${index}`, `unaccounted ${tag}`);
+      if (item.unmeasurable === "no-paint") continue;
+      const chrome = drawable.getAttribute("data-mpo-chart-chrome");
+      const style = getComputedStyle(drawable);
+      const rect = drawable.getBoundingClientRect();
+      const ctm = drawable.getScreenCTM?.();
+      const squareSum = ctm ? ctm.a ** 2 + ctm.b ** 2 + ctm.c ** 2 + ctm.d ** 2 : NaN;
+      const determinant = ctm ? ctm.a * ctm.d - ctm.b * ctm.c : NaN;
+      const largestScale = Math.sqrt((squareSum + Math.sqrt(Math.max(0, squareSum ** 2 - 4 * determinant ** 2))) / 2);
+      const screenStrokeWidth = Number.parseFloat(style.strokeWidth) * largestScale;
+      const thinAxisLine = (chrome === "axis" || chrome === "grid") && tag === "line" && (rect.width === 0 || rect.height === 0) && Number.isFinite(screenStrokeWidth) && screenStrokeWidth <= 1 && screenStrokeWidth > 0 && !item.unmeasurable;
+      if (thinAxisLine) sample.chrome.push({
+        ...item,
+        label: `${chrome} line`
+      });else sample.unaccountedPaint.push({
+        ...item,
+        unmeasurable: "unsupported-paint"
+      });
+    }
+    if (sample.kind === "bar" && marks.length > 0 && marks.every((mark, index) =>
+    // A bar path that declares its box (value-end rounding, MPO-56)
+    // paints inside that box just as a rect does.
+    (mark.tagName.toLowerCase() === "rect" || mark.tagName.toLowerCase() === "path" && mark.hasAttribute("data-mpo-chart-bar")) && getComputedStyle(mark).stroke === "none" && !sample.marks[index].unmeasurable)) {
+      let minimumGapPx = Infinity;
+      const bounds = marks.map(mark => mark.getBoundingClientRect());
+      for (let i = 0; i < bounds.length; i++) for (let j = i + 1; j < bounds.length; j++) {
+        const a = bounds[i];
+        const b = bounds[j];
+        const dx = Math.max(0, a.left - b.right, b.left - a.right);
+        const dy = Math.max(0, a.top - b.bottom, b.top - a.bottom);
+        minimumGapPx = Math.min(minimumGapPx, Math.hypot(dx, dy) * window.devicePixelRatio);
+      }
+      sample.separation.method = "rect-bounds";
+      sample.separation.minimumGapPx = Number.isFinite(minimumGapPx) ? minimumGapPx : 2;
+    }
+    if (sample.kind === "area") sample.unmeasurable ??= "unsupported-overlap";
+  }
+  function collectText(el, key, cs) {
+    const directText = [];
+    for (const child of Array.from(el.childNodes)) {
+      if (child.nodeType === 3 && (child.textContent ?? "").trim().length > 0) {
+        directText.push(child);
+      }
+    }
+    if (directText.length === 0) return void 0;
+    const range = document.createRange();
+    range.setStartBefore(directText[0]);
+    range.setEndAfter(directText[directText.length - 1]);
+    const textRect = range.getBoundingClientRect();
+    if (!(textRect.width > 0 && textRect.height > 0)) return void 0;
+    const opacity = effectiveOpacity(el);
+    if (opacity > 0.05 && cs.visibility !== "hidden") {
+      const ink = parseCssColor(cs.color);
+      const backdrop = effectiveBackground(el);
+      if (ink) {
+        const baseParsed = parseCssColor(backdrop.hex) ?? [255, 255, 255, 1];
+        const inkOpaque = toHex(ink[3] >= 0.999 ? [ink[0], ink[1], ink[2]] : blend(ink, [baseParsed[0], baseParsed[1], baseParsed[2]]));
+        textSamples.push({
+          key,
+          text: (directText[0].textContent ?? "").trim().slice(0, 60),
+          color: inkOpaque,
+          background: backdrop.hex,
+          backgroundResolved: backdrop.resolved,
+          overImage: backdrop.overImage,
+          fontSizePx: Number.parseFloat(cs.fontSize) || 0,
+          fontWeightNum: Number.parseFloat(cs.fontWeight) || 400,
+          rect: toRect(textRect)
+        });
+      }
+    }
+    return toRect(textRect);
+  }
+  function boxedChildren(el, path) {
+    const out = [];
+    const counts = {};
+    for (const child of Array.from(el.children)) {
+      const tag = child.tagName.toLowerCase();
+      if (SKIP_TAGS.has(tag)) continue;
+      if (child.namespaceURI === "http://www.w3.org/2000/svg" && tag !== "svg") continue;
+      const cs = getComputedStyle(child);
+      if (cs.display === "none") continue;
+      if (cs.display === "contents") {
+        const index = counts[tag] ?? 0;
+        counts[tag] = index + 1;
+        collectText(child, `${path}/${tag}:${index}~contents`, cs);
+        for (const grandchild of boxedChildren(child, path)) out.push(grandchild);
+        continue;
+      }
+      out.push(child);
+    }
+    return out;
+  }
+  function visit(el, path) {
+    const tag = el.tagName.toLowerCase();
+    const cs = getComputedStyle(el);
+    const rect = el.getBoundingClientRect();
+    const props = {};
+    for (const prop of GEOMETRY_PROPS) {
+      props[prop] = cs[prop];
+    }
+    const entry = {
+      key: path,
+      tag,
+      rect: toRect(rect),
+      props
+    };
+    const textRect = collectText(el, path, cs);
+    if (textRect) entry.textRect = textRect;
+    if (tag === "svg" && !el.parentElement?.closest("svg")) {
+      capturedSvgRoots.add(el);
+      if (el.hasAttribute("data-mpo-chart")) collectChart(el, path);else collectIcon(el, path, cs);
+    }
+    geometry.push(entry);
+    const counts = {};
+    for (const child of boxedChildren(el, path)) {
+      const childTag = child.tagName.toLowerCase();
+      const index = counts[childTag] ?? 0;
+      counts[childTag] = index + 1;
+      visit(child, `${path}/${childTag}:${index}`);
+    }
+  }
+  if (root) {
+    const counts = {};
+    for (const child of boxedChildren(root, "")) {
+      const childTag = child.tagName.toLowerCase();
+      const index = counts[childTag] ?? 0;
+      counts[childTag] = index + 1;
+      visit(child, `${childTag}:${index}`);
+    }
+    const svgRoots = Array.from(root.querySelectorAll("svg")).filter(svg => !svg.parentElement?.closest("svg"));
+    svgRootCount = svgRoots.length;
+    for (const [index, svg] of svgRoots.entries()) {
+      if (capturedSvgRoots.has(svg)) continue;
+      const key = `unpainted-svg:${index}`;
+      if (svg.hasAttribute("data-mpo-chart")) collectChart(svg, key);else collectIcon(svg, key, getComputedStyle(svg));
+    }
+  }
+  return {
+    storyRendered,
+    geometry,
+    textSamples,
+    iconSamples,
+    chartSamples,
+    svgRootCount
+  };
+}
+function diffGeometry(before, after, options = {}) {
+  const epsilon = options.epsilonPx ?? 0;
+  const byKey = new Map(before.geometry.map(g => [g.key, g]));
+  const seen = /* @__PURE__ */new Set();
+  const moves = [];
+  const addedKeys = [];
+  const rectDiffers = (a, b) => Math.abs(a.x - b.x) > epsilon || Math.abs(a.y - b.y) > epsilon || Math.abs(a.w - b.w) > epsilon || Math.abs(a.h - b.h) > epsilon;
+  const formatRect = r => `${r.x},${r.y} ${r.w}x${r.h}`;
+  for (const curr of after.geometry) {
+    const prev = byKey.get(curr.key);
+    if (!prev) {
+      addedKeys.push(curr.key);
+      continue;
+    }
+    seen.add(curr.key);
+    if (rectDiffers(prev.rect, curr.rect)) {
+      moves.push({
+        key: curr.key,
+        property: "rect",
+        before: formatRect(prev.rect),
+        after: formatRect(curr.rect)
+      });
+    }
+    if (prev.textRect && curr.textRect && rectDiffers(prev.textRect, curr.textRect)) {
+      moves.push({
+        key: curr.key,
+        property: "textRect",
+        before: formatRect(prev.textRect),
+        after: formatRect(curr.textRect)
+      });
+    } else if (!!prev.textRect !== !!curr.textRect) {
+      moves.push({
+        key: curr.key,
+        property: "textRect",
+        before: prev.textRect ? formatRect(prev.textRect) : "(none)",
+        after: curr.textRect ? formatRect(curr.textRect) : "(none)"
+      });
+    }
+    for (const prop of Object.keys(prev.props)) {
+      if (prev.props[prop] !== curr.props[prop]) {
+        moves.push({
+          key: curr.key,
+          property: prop,
+          before: prev.props[prop],
+          after: curr.props[prop] ?? "(missing)"
+        });
+      }
+    }
+  }
+  const removedKeys = before.geometry.filter(g => !seen.has(g.key)).map(g => g.key);
+  return {
+    identical: moves.length === 0 && addedKeys.length === 0 && removedKeys.length === 0,
+    removedKeys,
+    addedKeys,
+    moves
+  };
+}
+function evaluateTextContrast(samples) {
+  let measured = 0;
+  let unmeasurable = 0;
+  const violations = [];
+  for (const sample of samples) {
+    if (!sample.backgroundResolved) {
+      unmeasurable++;
+      continue;
+    }
+    const large = sample.fontSizePx >= 24 || sample.fontSizePx >= 18.66 && sample.fontWeightNum >= 700;
+    const required = large ? minContrastRatio : aaTextContrastRatio;
+    try {
+      const report = measureContrast({
+        foreground: sample.color,
+        background: sample.background,
+        floor: required,
+        label: sample.key
+      });
+      measured++;
+      if (!report.pass) {
+        violations.push({
+          key: sample.key,
+          text: sample.text,
+          color: report.foreground,
+          background: report.background,
+          ratio: report.ratio,
+          required: report.floor
+        });
+      }
+    } catch {
+      unmeasurable++;
+    }
+  }
+  return {
+    measured,
+    unmeasurable,
+    violations
+  };
+}
+function evaluateIconContrast(samples) {
+  const result = {
+    ok: true,
+    candidates: 0,
+    measured: 0,
+    violations: [],
+    unverified: [],
+    excludedDisabled: 0,
+    excludedDecorative: 0,
+    excludedHidden: 0
+  };
+  for (const sample of samples) {
+    if (sample.status === "disabled-control") {
+      result.excludedDisabled++;
+      continue;
+    }
+    if (sample.status === "decorative-standalone") {
+      result.excludedDecorative++;
+      continue;
+    }
+    if (sample.status === "hidden") {
+      result.excludedHidden++;
+      continue;
+    }
+    result.candidates++;
+    const reason = sample.unmeasurable ?? (!sample.backgroundResolved ? "unresolved-backdrop" : !sample.paint ? "no-paint" : void 0);
+    if (reason) {
+      result.unverified.push({
+        key: sample.key,
+        context: sample.context,
+        reason
+      });
+      continue;
+    }
+    try {
+      const contrast = measureContrast({
+        foreground: sample.paint,
+        background: sample.background,
+        floor: minContrastRatio,
+        label: sample.key
+      });
+      result.measured++;
+      if (!contrast.pass) result.violations.push({
+        key: sample.key,
+        context: sample.context,
+        paint: contrast.foreground,
+        background: contrast.background,
+        ratio: contrast.ratio,
+        required: contrast.floor
+      });
+    } catch {
+      result.unverified.push({
+        key: sample.key,
+        context: sample.context,
+        reason: "unsupported-paint"
+      });
+    }
+  }
+  result.ok = result.violations.length === 0 && result.unverified.length === 0;
+  return result;
+}
+function iconContrastSignatures(result) {
+  return [...result.violations.map(item => `${item.key} (${item.context}) icon ${item.paint} on ${item.background} = ${item.ratio}:1 (floor ${item.required})`), ...result.unverified.map(item => `${item.key} (${item.context}) icon UNVERIFIED: ${item.reason}`)];
+}
+function evaluateChartProof(samples) {
+  const result = {
+    ok: true,
+    candidates: samples.length,
+    measured: 0,
+    marksMeasured: 0,
+    labelsMeasured: 0,
+    byKind: /* @__PURE__ */Object.create(null),
+    violations: [],
+    unverified: []
+  };
+  for (const sample of samples) {
+    result.byKind[sample.kind] = (result.byKind[sample.kind] ?? 0) + 1;
+    const unverified = (reason, key = sample.key, context = sample.context) => result.unverified.push({
+      key,
+      context,
+      reason
+    });
+    if (!["bar", "pie", "donut", "line", "area"].includes(sample.kind)) {
+      unverified("unknown-kind");
+      continue;
+    }
+    if (!sample.label.trim()) result.violations.push({
+      key: sample.key,
+      context: sample.context,
+      rule: "missing-label"
+    });
+    if (sample.unmeasurable) unverified(sample.unmeasurable);else if (!sample.backgroundResolved) unverified("unresolved-backdrop");
+    if (!sample.marks.length) unverified("no-marks");
+    for (const item of sample.unaccountedPaint ?? []) unverified("unsupported-paint", item.key, `${sample.context}: ${item.label}`);
+    if (!sample.datumText.declared || !sample.datumText.complete || sample.datumText.expected <= 0 || sample.datumText.observed !== sample.datumText.expected) unverified("incomplete-datum-text", sample.key, sample.datumText.failure ? `${sample.context}: ${sample.datumText.failure}` : sample.context);
+    const compare = (paint, background, key, context, rule, floor) => {
+      try {
+        const measured = measureContrast({
+          foreground: paint,
+          background,
+          floor,
+          label: key
+        });
+        if (!measured.pass) result.violations.push({
+          key,
+          context,
+          rule,
+          paint: measured.foreground,
+          background: measured.background,
+          ratio: measured.ratio,
+          required: measured.floor
+        });
+        return true;
+      } catch {
+        unverified("unsupported-paint", key, context);
+        return false;
+      }
+    };
+    for (const mark of sample.marks) {
+      const context = `${sample.context}: ${mark.label}`;
+      if (mark.unmeasurable || !mark.paint) unverified(mark.unmeasurable ?? "no-paint", mark.key, context);else if (compare(mark.paint, mark.background, mark.key, context, "mark-backdrop", minContrastRatio)) result.marksMeasured++;
+    }
+    for (const label of sample.labels) {
+      const context = `${sample.context}: ${label.label}`;
+      if (label.unmeasurable || !label.paint) unverified(label.unmeasurable ?? "no-paint", label.key, context);else if (compare(label.paint, label.background, label.key, context, "axis-text", aaTextContrastRatio)) result.labelsMeasured++;
+    }
+    const separated = (sample.kind === "bar" && sample.separation.method === "rect-bounds" || (sample.kind === "pie" || sample.kind === "donut") && sample.separation.method === "eroded-arc") && Number.isFinite(sample.separation.minimumGapPx) && sample.separation.minimumGapPx >= 2;
+    if (sample.kind === "bar" && !separated) unverified("unverified-separation");
+    if (sample.kind === "pie" || sample.kind === "donut") {
+      if (sample.separation.declared && !separated) unverified("unverified-separation");
+      if (sample.marks.length > 1 && !separated) {
+        for (let i = 0; i < sample.marks.length; i++) {
+          const first = sample.marks[i];
+          const second = sample.marks[(i + 1) % sample.marks.length];
+          if (sample.marks.length === 2 && i === 1) continue;
+          if (first.paint && second.paint && !first.unmeasurable && !second.unmeasurable) compare(first.paint, second.paint, `${first.key}~${second.key}`, `${sample.context}: ${first.label} / ${second.label}`, "adjacent-pair", minContrastRatio);
+        }
+      }
+    }
+    if (!sample.unmeasurable && sample.backgroundResolved && sample.marks.length > 0 && sample.marks.every(mark => mark.paint && !mark.unmeasurable)) result.measured++;
+  }
+  result.ok = result.violations.length === 0 && result.unverified.length === 0;
+  return result;
+}
+function chartProofSignatures(result) {
+  return [...result.violations.map(item => `${item.key} (${item.context}) chart ${item.rule}${item.ratio === void 0 ? "" : ` ${item.paint} on ${item.background} = ${item.ratio}:1 (floor ${item.required})`}`), ...result.unverified.map(item => `${item.key} (${item.context}) chart UNVERIFIED: ${item.reason}`)];
+}
+function auditSignatures(violations) {
+  const out = [];
+  for (const element of violations) {
+    for (const violation of element.violations) out.push(`${element.key ? `[${element.key}] ` : ""}${element.label} :: ${violation}`);
+  }
+  return out;
+}
+function newEntries(before, after) {
+  const remaining = /* @__PURE__ */new Map();
+  for (const entry of before) remaining.set(entry, (remaining.get(entry) ?? 0) + 1);
+  const added = [];
+  for (const entry of after) {
+    const count = remaining.get(entry) ?? 0;
+    if (count > 0) remaining.set(entry, count - 1);else added.push(entry);
+  }
+  return added;
+}
+function offScaleIdentity(signature) {
+  return signature.replace(/-?\d+(?:\.\d+)?px/g, "#px").replace(/(inlineColor: \w+=)"[^"]*"/g, '$1"#colour"').replace(/\.font_[\w-]+/g, ".font_#family");
+}
+function newOffScaleEntries(before, after) {
+  const added = newEntries(before.map(offScaleIdentity), after.map(offScaleIdentity));
+  const pending = /* @__PURE__ */new Map();
+  for (const identity of added) pending.set(identity, (pending.get(identity) ?? 0) + 1);
+  const named = [];
+  for (const signature of after) {
+    const identity = offScaleIdentity(signature);
+    const count = pending.get(identity) ?? 0;
+    if (count === 0) continue;
+    pending.set(identity, count - 1);
+    named.push(signature);
+  }
+  return named;
+}
+const namedList = (entries, limit = 6) => {
+  if (entries.length === 0) return "";
+  const shown = entries.slice(0, limit).join("; ");
+  return entries.length > limit ? ` \u2014 new: ${shown}; \u2026 ${entries.length - limit} more` : ` \u2014 new: ${shown}`;
+};
+function evaluateNoBreakage(input) {
+  const failures = [];
+  if (!input.storyRendered) {
+    failures.push("story did not render (empty story root)");
+  }
+  const structuralAdded = input.offScaleSignatures && input.baselineOffScaleSignatures ? newOffScaleEntries(input.baselineOffScaleSignatures, input.offScaleSignatures) : [];
+  if (structuralAdded.length || input.offScaleViolations > input.baselineOffScaleViolations) {
+    failures.push(`constraint audit: ${input.offScaleViolations} off-scale violations (default cell has ${input.baselineOffScaleViolations})${namedList(structuralAdded)}`);
+  }
+  const signature = violation => `${violation.key} "${violation.text}" ${violation.color} on ${violation.background} = ${violation.ratio}:1 (floor ${violation.required})`;
+  const contrastAdded = input.baselineContrast ? newEntries(input.baselineContrast.violations.map(signature), input.contrast.violations.map(signature)) : [];
+  if (contrastAdded.length || input.contrast.violations.length > input.baselineContrastViolations) {
+    failures.push(`text contrast: ${input.contrast.violations.length} below-floor text nodes (default cell has ${input.baselineContrastViolations})${namedList(contrastAdded)}`);
+  }
+  if (input.icons === void 0 !== (input.baselineIcons === void 0)) {
+    failures.push("icon contrast: icons and baselineIcons must be supplied together");
+  } else if (input.icons && input.baselineIcons) {
+    const newIconFindings = newEntries(iconContrastSignatures(input.baselineIcons), iconContrastSignatures(input.icons));
+    if (newIconFindings.length > 0) {
+      failures.push(`icon contrast: ${newIconFindings.length} new findings${namedList(newIconFindings)}`);
+    }
+  }
+  if (input.charts === void 0 !== (input.baselineCharts === void 0)) {
+    failures.push("chart proof: charts and baselineCharts must be supplied together");
+  } else if (input.charts && input.baselineCharts) {
+    const added = newEntries(chartProofSignatures(input.baselineCharts), chartProofSignatures(input.charts));
+    if (added.length) failures.push(`chart proof: ${added.length} new findings${namedList(added)}`);
+  }
+  return {
+    ok: failures.length === 0,
+    failures
+  };
+}
+export { auditSignatures, captureMatrixSnapshot, chartProofSignatures, diffGeometry, evaluateChartProof, evaluateIconContrast, evaluateNoBreakage, evaluateTextContrast, iconContrastSignatures, offScaleIdentity };
+//# sourceMappingURL=themeMatrix.mjs.map