Whose Words <mv-whose-words>

node scripts/add.mjs whose-words --out ./src/marvelous

<mv-whose-words author="Lena" show>
  <p>We cut checkout from 94 to 58 seconds. <span data-origin="ai">Every extra field is a question the customer must answer.</span> <span data-origin="quoted" data-source="Customer interview">“I just want to pay.”</span></p>
</mv-whose-words>

<div id="ww-demo" style="width:min(100%,66rem);margin-inline:auto">
  <style>
    #ww-demo { display:grid; gap:1.5rem }
    #ww-demo .ww-card { padding:1.5rem 1.75rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #ww-demo .ww-eyebrow { display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #ww-demo article h3 { margin:0 0 .25rem; font-size:1.375rem; letter-spacing:-.015em; line-height:1.25 }
    #ww-demo article .ww-by { margin:0 0 1rem; color:var(--mv-fg-muted); font-size:.8125rem }
    #ww-demo article p { margin:0 0 .875rem; font-size:.9375rem; line-height:1.7; color:var(--mv-fg) }
    #ww-demo article p:last-child { margin-bottom:0 }
    #ww-demo article .ww-foot { padding-top:.75rem; border-top:1px dashed var(--mv-border); color:var(--mv-fg-muted); font-size:.8125rem }
    #ww-demo .ww-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem; align-items:start }
    #ww-demo .ww-help h4 { margin:0 0 .5rem; font-size:1rem; letter-spacing:-.01em }
    #ww-demo .ww-help article p { margin:.75rem 0 0; font-size:.875rem; line-height:1.65 }
    #ww-demo .ww-draft-head { display:flex; justify-content:space-between; gap:.75rem; margin:0 0 1rem; font-size:.8125rem; color:var(--mv-fg-muted) }
    #ww-demo .ww-draft-head b { color:var(--mv-fg); font-weight:600 }
    #ww-demo .ww-editor { min-height:9rem; padding:.875rem 1rem; border:1px solid var(--mv-input); border-radius:var(--mv-radius-lg); background:var(--mv-bg); font-size:.875rem; line-height:1.65; outline:none }
    #ww-demo .ww-editor:focus-visible { box-shadow:var(--mv-focus-ring) }
    #ww-demo .ww-editor p { margin:0 0 .625rem } #ww-demo .ww-editor p:last-child { margin:0 }
    #ww-demo .ww-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem }
    #ww-demo .ww-actions .ww-status { margin-left:auto; color:var(--mv-fg-muted); font-size:.75rem }
    #ww-demo .ww-hint { margin:0; color:var(--mv-fg-muted); font-size:.75rem; text-align:center }
    @media (max-width:56rem) { #ww-demo .ww-row { grid-template-columns:minmax(0,1fr) } }
  </style>

  <section class="ww-card" aria-label="Published article, reader view">
    <p class="ww-eyebrow"><span class="mv-badge" data-variant="secondary" data-shape="pill">Reader view</span> Field notes · Payments</p>
    <mv-whose-words id="ww-post" author="Lena Fischer" show>
      <article>
        <h3>How we cut checkout time by 38%</h3>
        <p class="ww-by">Lena Fischer, with Omar Haddad · September 18, 2026</p>
        <p>For two quarters, our checkout asked for more than it needed. <span data-origin="ai" data-model="Draft assistant" data-at="2026-09-12T10:04:00">Every extra field is a question the customer has to answer before they can pay.</span> We started by counting them: fourteen, on a phone screen, before the Pay button.</p>
        <p>The customer interviews said it more bluntly. <span data-origin="quoted" data-source="Customer interview #14, Aug 28" data-href="#interviews" data-at="2026-09-12T10:11:00">“I just want to pay and get back to my day.”</span> <span data-origin="ai-edited" data-model="Draft assistant" data-at="2026-09-12T10:26:00" data-original="The redesigned flow reduced the median checkout time from 94 seconds to 58 seconds, which represents a significant 38% improvement for our customers.">The new flow brought median checkout time down from 94 to 58 seconds, 38% faster, with no drop in average order value.</span></p>
        <p><span data-origin="author" data-by="Omar Haddad" data-at="2026-09-13T16:40:00">On the engineering side, we moved card tokenization ahead of the review step, so the Pay button no longer waits on a network round trip.</span> <span data-origin="translated" data-lang="de" data-model="Machine translation" data-at="2026-09-14T09:02:00" data-original="Die Adressprüfung läuft jetzt im Hintergrund und blockiert den Bezahlknopf nicht mehr.">Address validation now runs in the background and no longer blocks the Pay button.</span></p>
        <p>We shipped it to 10% of traffic first and watched refunds and support tickets for a week. <span data-origin="ai" data-model="Draft assistant" data-at="2026-09-12T10:31:00">Next, we will test saved payment methods for returning customers and one-tap wallets in six more markets.</span></p>
        <p class="ww-foot"><span data-origin="template" data-source="Release note footer" data-at="2026-09-12T09:58:00">Questions about this release? Reach the Payments team in #payments-help.</span></p>
      </article>
    </mv-whose-words>
  </section>

  <div class="ww-row">
    <section class="ww-card ww-help" aria-label="Help center article, badge view">
      <p class="ww-eyebrow"><span class="mv-badge" data-variant="secondary" data-shape="pill">Badge view</span> Help center</p>
      <mv-whose-words id="ww-help" view="badge" author="Priya Raman">
        <article>
          <h4>Reset two-factor authentication</h4>
          <p><span data-origin="ai-edited" data-model="Support assistant" data-at="2026-09-02T14:12:00" data-original="If you lost access to your authenticator app, you can reset two-factor authentication from the sign-in page.">Lost your phone or authenticator app? You can reset two-factor authentication yourself from the sign-in page.</span> Choose <b>Use a recovery code</b>, enter one of the codes you saved when you turned it on, then scan the new QR code.</p>
          <p><span data-origin="ai" data-model="Support assistant" data-at="2026-09-02T14:15:00">If you no longer have your recovery codes, an admin of your workspace can reset it for you from Members.</span></p>
        </article>
      </mv-whose-words>
    </section>

    <section class="ww-card" aria-label="Reply draft, author view">
      <p class="ww-eyebrow"><span class="mv-badge" data-variant="secondary" data-shape="pill">Author view</span> Live tracking</p>
      <div class="ww-draft-head"><span>Reply to <b>Kenji Watanabe</b></span><span>Ticket #48213 · Refund request</span></div>
      <mv-whose-words id="ww-draft" view="author" author="Sofia Marino" summary="none" show>
        <div class="ww-editor" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Reply to Kenji Watanabe">
          <p>Hi Kenji,</p>
          <p><span data-origin="ai" data-model="Reply assistant" data-at="2026-09-24T09:41:00">Thank you for reaching out, and I'm sorry the order arrived damaged. I've issued a full refund of $86.40 to your original payment method; it should appear within 5 to 7 business days.</span> I've also flagged the carrier so it doesn't happen again.</p>
        </div>
      </mv-whose-words>
      <div class="ww-actions">
        <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="ww-suggest">Suggest a closing line</button>
        <button class="mv-button" data-size="sm" type="button" id="ww-send">Send reply</button>
        <span class="ww-status" id="ww-status" role="status">Type inside the highlighted text to edit it</span>
      </div>
    </section>
  </div>
  <p class="ww-hint">Hover or Tab through the underlined passages · open the badge’s Details · click a legend row to highlight one origin</p>

  <script type="module">
    await customElements.whenDefined("mv-whose-words");
    const draft = document.getElementById("ww-draft");
    const status = document.getElementById("ww-status");
    const closings = [
      " Please let me know if there is anything else I can help with.",
      " If the refund hasn't arrived by next Friday, just reply to this email and I'll follow up with our payments team.",
    ];
    let n = 0;
    document.getElementById("ww-suggest").addEventListener("click", () => {
      const last = draft.querySelector(".ww-editor p:last-child");
      const r = document.createRange();
      r.selectNodeContents(last);
      r.collapse(false);
      const sel = getSelection();
      sel.removeAllRanges();
      sel.addRange(r);
      draft.insert(closings[n++ % closings.length], "ai", { model: "Reply assistant" });
    });
    document.getElementById("ww-send").addEventListener("click", () => {
      const res = draft.checkBeforePublish();
      status.textContent = res.ok ? `Sent · disclosed as “${res.label}”` : `Held: ${Math.round(res.unedited * 100)}% unedited AI text`;
    });
    draft.addEventListener("mv-origin-change", (e) => {
      if (e.detail.source === "edit") status.textContent = e.detail.origin === "ai-edited" ? "Edited: now counted as AI-assisted, edited" : "Edit undone: back to AI, as-is";
    });
    document.querySelector("#ww-post").addEventListener("click", (e) => { if (e.target.closest("a[href^='#']")) e.preventDefault(); });
  </script>
</div>