Cross-Check <mv-cross-check>

node scripts/add.mjs cross-check --out ./src/marvelous

<div id="xc-demo" style="width:min(100%,80rem);margin-inline:auto">
  <style>
    #xc-demo { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem }
    #xc-demo .xc-top { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem 1.5rem; flex-wrap:wrap }
    #xc-demo .xc-top h3 { margin:0; font-size:1.125rem; letter-spacing:-.01em }
    #xc-demo .xc-top p { margin:.25rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #xc-demo .xc-doc { display:grid; align-content:start; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs); overflow:hidden }
    #xc-demo .xc-doc-head { display:flex; align-items:center; gap:.75rem; padding:.875rem 1rem; border-bottom:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #xc-demo .xc-doc-ico { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:var(--mv-radius-md); background:var(--mv-surface); border:1px solid var(--mv-border); color:var(--mv-fg-muted) }
    #xc-demo .xc-doc-ico svg { width:1rem; height:1rem }
    #xc-demo .xc-doc-head h4 { margin:0; font-size:.875rem; font-weight:600; letter-spacing:-.005em }
    #xc-demo .xc-doc-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.75rem }
    #xc-demo .xc-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.875rem; margin:0; padding:1rem }
    #xc-demo .xc-fields > div { display:grid; gap:.1875rem; grid-column:1 / -1 }
    #xc-demo .xc-fields > [data-half] { grid-column:auto }
    #xc-demo .xc-fields dt { color:var(--mv-fg-muted); font-size:.6875rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase }
    #xc-demo .xc-fields dd { justify-self:start; margin:0; font-size:.875rem; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.35 }
    #xc-demo .xc-total { margin:0 1rem 1rem; padding-top:.75rem; border-top:1px dashed var(--mv-border-strong); display:flex; justify-content:space-between; align-items:baseline; font-size:.8125rem; color:var(--mv-fg-muted) }
    #xc-demo .xc-total strong { color:var(--mv-fg); font-size:.9375rem; font-variant-numeric:tabular-nums }
    #xc-demo .xc-controls { display:flex; align-items:center; gap:.75rem 1.5rem; flex-wrap:wrap; padding:.75rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #xc-demo .xc-controls .mv-choice { font-size:.8125rem }
    #xc-demo .xc-log { flex:1 1 12rem; min-width:0; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); text-align:end; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    @media (max-width:40rem) { #xc-demo .xc-log { text-align:start } }
    @media (max-width:22rem) { #xc-demo .xc-fields > [data-half] { grid-column:1 / -1 } }
  </style>

  <div class="xc-top">
    <div>
      <h3 id="xc-title">Identity check · Case KYC-20931</h3>
      <p id="xc-sub">Amélie Durand-Lefèvre · personal account · submitted Sep 18, 2026</p>
    </div>
    <mv-segmented id="xc-scenario" value="kyc" label="Review scenario">
      <button value="kyc">Identity check</button>
      <button value="ap">Three-way match</button>
    </mv-segmented>
  </div>

  <!-- KYC: application form vs passport vs proof of address -->
  <mv-cross-check id="xc-kyc" reference="application" label="Identity check for Amélie Durand-Lefèvre">
    <article class="xc-doc" data-doc="application" data-doc-label="Application">
      <header class="xc-doc-head">
        <span class="xc-doc-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg></span>
        <div><h4>Account application</h4><p>Online form · Sep 18, 2026</p></div>
      </header>
      <dl class="xc-fields">
        <div><dt>Full name</dt><dd data-field="name">Amélie Durand-Lefèvre</dd></div>
        <div data-half><dt>Date of birth</dt><dd data-field="dob" data-compare="date">03/14/1991</dd></div>
        <div data-half><dt>Nationality</dt><dd data-field="nationality">French</dd></div>
        <div><dt>ID document no.</dt><dd data-field="doc_number" data-compare="alnum">19AB 45872</dd></div>
        <div><dt>Home address</dt><dd data-field="address">48 Rue de la Paix, 75002 Paris</dd></div>
        <div><dt>Occupation</dt><dd data-field="occupation">Product designer</dd></div>
      </dl>
    </article>

    <article class="xc-doc" data-doc="passport" data-doc-label="Passport">
      <header class="xc-doc-head">
        <span class="xc-doc-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="18" rx="2"/><circle cx="12" cy="10" r="3"/><path d="M9 16.5h6"/></svg></span>
        <div><h4>Passport</h4><p>Scanned · verified chip</p></div>
      </header>
      <dl class="xc-fields">
        <div><dt>Holder</dt><dd data-field="name">AMELIE DURAND-LEFEVRE</dd></div>
        <div data-half><dt>Date of birth</dt><dd data-field="dob">14 MAR 1991</dd></div>
        <div data-half><dt>Nationality</dt><dd data-field="nationality">FRENCH</dd></div>
        <div><dt>Document no.</dt><dd data-field="doc_number">19AB45827</dd></div>
        <div data-half><dt>Place of birth</dt><dd data-field="birthplace">Lyon</dd></div>
        <div data-half><dt>Expires</dt><dd data-field="expiry">11 JUL 2031</dd></div>
      </dl>
    </article>

    <article class="xc-doc" data-doc="bill" data-doc-label="Utility bill">
      <header class="xc-doc-head">
        <span class="xc-doc-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11.5 12 4l9 7.5"/><path d="M5.5 9.5V20h13V9.5"/><path d="M10 20v-5h4v5"/></svg></span>
        <div><h4>Proof of address</h4><p>Electricity bill · Aug 29, 2026</p></div>
      </header>
      <dl class="xc-fields">
        <div><dt>Account holder</dt><dd data-field="name">Amelie Durand</dd></div>
        <div><dt>Service address</dt><dd data-field="service_address">12 Rue Oberkampf, 75011 Paris</dd></div>
        <div data-half><dt>Billing period</dt><dd data-field="period">Jul 1 to Jul 31, 2026</dd></div>
        <div data-half><dt>Customer no.</dt><dd data-field="customer_no">40-2281-7736</dd></div>
      </dl>
      <p class="xc-total"><span>Amount due</span><strong data-field="bill_amount" data-field-label="Amount due">$96.40</strong></p>
    </article>
  </mv-cross-check>

  <!-- Accounts payable: purchase order vs invoice vs delivery note (rules set from script) -->
  <mv-cross-check id="xc-ap" reference="po" label="Three-way match for invoice INV-20931" hidden>
    <article class="xc-doc" data-doc="po" data-doc-label="Purchase order">
      <header class="xc-doc-head">
        <span class="xc-doc-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h12v18l-3-2-3 2-3-2-3 2z"/><path d="M9 8h6M9 12h6"/></svg></span>
        <div><h4>Purchase order</h4><p>Harbor &amp; Pine Interiors · Sep 2, 2026</p></div>
      </header>
      <dl class="xc-fields">
        <div><dt>Supplier</dt><dd data-field="supplier">Nordvik Timber AB</dd></div>
        <div><dt>PO number</dt><dd data-field="po">PO-4471</dd></div>
        <div><dt>Item</dt><dd data-field="item">Oak flooring, 14 mm</dd></div>
        <div data-half><dt>Quantity</dt><dd data-field="qty">50 m²</dd></div>
        <div data-half><dt>Unit price</dt><dd data-field="unit_price">$248.00</dd></div>
      </dl>
      <p class="xc-total"><span>Order total</span><strong data-field="total" data-field-label="Total">$12,400.00</strong></p>
    </article>

    <article class="xc-doc" data-doc="invoice" data-doc-label="Invoice">
      <header class="xc-doc-head">
        <span class="xc-doc-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M12 11v6M10 12.5c0-.8.9-1.5 2-1.5s2 .7 2 1.5-1 1.2-2 1.5-2 .7-2 1.5.9 1.5 2 1.5 2-.7 2-1.5"/></svg></span>
        <div><h4>Invoice INV-20931</h4><p>Received Sep 23, 2026 · due Oct 23</p></div>
      </header>
      <dl class="xc-fields">
        <div><dt>Supplier</dt><dd data-field="supplier">NORDVIK TIMBER AB</dd></div>
        <div><dt>PO reference</dt><dd data-field="po">PO 4471</dd></div>
        <div><dt>Item</dt><dd data-field="item">Oak flooring, 14 mm</dd></div>
        <div data-half><dt>Quantity</dt><dd data-field="qty">50 m²</dd></div>
        <div data-half><dt>Unit price</dt><dd data-field="unit_price">$248.95</dd></div>
      </dl>
      <p class="xc-total"><span>Amount due</span><strong data-field="total" data-field-label="Total">$12,447.50</strong></p>
    </article>

    <article class="xc-doc" data-doc="delivery" data-doc-label="Delivery note">
      <header class="xc-doc-head">
        <span class="xc-doc-ico" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7z"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg></span>
        <div><h4>Delivery note DN-883</h4><p>Signed on receipt · Sep 22, 2026</p></div>
      </header>
      <dl class="xc-fields">
        <div><dt>Supplier</dt><dd data-field="supplier">Nordvik Timber AB</dd></div>
        <div><dt>PO number</dt><dd data-field="po">PO-4471</dd></div>
        <div><dt>Item</dt><dd data-field="item">Oak flooring, 14 mm</dd></div>
        <div data-half><dt>Delivered</dt><dd data-field="qty">48 m²</dd></div>
        <div data-half><dt>Received by</dt><dd data-field="received_by">Kwame Okafor</dd></div>
      </dl>
      <p class="xc-total"><span>Pallets</span><strong data-field="pallets" data-field-label="Pallets">6 of 6</strong></p>
    </article>
  </mv-cross-check>

  <div class="xc-controls">
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="xc-all"> Show every connector</label>
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="xc-open"> Allow approval with open items</label>
    <p class="xc-log" id="xc-log">Auto-check done. Turn on Inspect to flag a field pair.</p>
  </div>

  <script type="module">
    const kyc = document.getElementById("xc-kyc");
    const ap = document.getElementById("xc-ap");
    const log = document.getElementById("xc-log");
    const title = document.getElementById("xc-title");
    const sub = document.getElementById("xc-sub");
    const say = (text) => { log.textContent = `${new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" })} · ${text}`; };

    // Accounts payable tolerances: unit price may drift 0.5 %, totals to the cent.
    ap.rules = { qty: "number", unit_price: "number:0.5%", total: "number:0.01", po: "alnum" };

    customElements.whenDefined("mv-cross-check").then(() => {
      // The reviewer already linked the two addresses the auto-check can't pair (different keys)…
      kyc.flag('[data-doc="application"] [data-field="address"]', '[data-doc="bill"] [data-field="service_address"]');
      // …and accepted the shorter surname on the utility account.
      kyc.resolve("auto:name", "accepted", { note: "Account opened before marriage; surname matches the passport." });
    });

    for (const el of [kyc, ap]) {
      el.addEventListener("mv-inspect", (e) => say(e.detail.inspect ? "Inspect on: select two fields." : "Inspect off."));
      el.addEventListener("mv-flag", (e) => say(`mv-flag · ${e.detail.fields.map((f) => `${f.docLabel} ${f.label}`).join(" ↔ ")}${e.detail.same ? " (identical)" : ""}`));
      el.addEventListener("mv-resolve", (e) => say(`mv-resolve · #${e.detail.discrepancy.n} ${e.detail.discrepancy.label} → ${e.detail.status}`));
      el.addEventListener("mv-verdict", (e) => say(`mv-verdict · ${e.detail.verdict} (${e.detail.reasons.length} reasons, ${e.detail.exceptions.length} exceptions)`));
      el.addEventListener("mv-reopen", () => say("mv-reopen · review reopened"));
    }

    const scenarios = {
      kyc: ["Identity check · Case KYC-20931", "Amélie Durand-Lefèvre · personal account · submitted Sep 18, 2026"],
      ap: ["Three-way match · Invoice INV-20931", "Nordvik Timber AB · $12,447.50 · awaiting approval"],
    };
    document.getElementById("xc-scenario").addEventListener("mv-change", (e) => {
      const v = e.detail.value;
      kyc.hidden = v !== "kyc";
      ap.hidden = v !== "ap";
      [title.textContent, sub.textContent] = scenarios[v];
      say(v === "ap" ? "Unit price differs by 0.38 %: within tolerance, so it matches." : "Auto-check done. Turn on Inspect to flag a field pair.");
    });
    document.getElementById("xc-all").addEventListener("change", (e) => {
      for (const el of [kyc, ap]) el.connectors = e.target.checked ? "all" : "auto";
    });
    document.getElementById("xc-open").addEventListener("change", (e) => {
      for (const el of [kyc, ap]) el.allowOpen = e.target.checked;
    });
  </script>
</div>