Exclusivobeta

Drift Check `<mv-drift-check>`

Mostra como um texto repassado se afastou da fonte, salto a salto: requisitos que passam do cliente para vendas, para o PM e para o ticket, citações que viajam da entrevista para o release e para a matéria, resumos de resumos, textos encaminhados, traduzidos ou reescritos por IA. Forneça a cadeia ordenada de versões (a fonte primeiro, cada uma com rótulo, quem, como e quando, via filhos <template data-version> ou a propriedade versions) e ele compara cada salto palavra por palavra com seu próprio diff de Myers, depois aplica regras de risco semântico a cada mudança: números e datas alterados, negações perdidas ou acrescentadas, verbos modais mais fortes ou mais brandos (“pode precisar” → “deve”), quantificadores mais amplos ou mais restritos (“alguns” → “a maioria”), condições e ressalvas removidas (“se”, “só”, “até”), nomes trocados e os termos de glossário que você listar em terms. Uma pontuação de deriva (proporção de palavras alteradas mais um peso para cada mudança de alto risco) encabeça um veredito (“Meaning shifted · 7 high-risk changes across 4 hops · most introduced at hop 2”); um trilho de cards de salto encadeados mostra quanto cada etapa mudou e sinaliza o salto onde o sentido se quebrou; a versão final é pintada com riscado, sublinhado e etiquetas de texto numeradas, cada uma rastreada ao longo da cadeia até o salto que a introduziu. Clique em qualquer salto, ou escolha duas versões quaisquer, para compará-las inline ou lado a lado; as mudanças sinalizadas são listadas em frases claras com um botão Restaurar que devolve a redação original à versão final (mv-restore cancelável, desfazer). O método estático puro MvDriftCheck.compare(a, b) retorna o mesmo diff, os riscos e a pontuação no servidor.

Categoria	Exibição de dados
Tipo	Web Component (`<mv-drift-check>`)
Status	beta
Também instala	button, select
Keywords	exclusive, culture, diff, word-diff, text-diff, compare, drift, paraphrase, summary, ai-review, translation, requirements, quote-check, fact-check, provenance, hops, restore, server-side

When to use

A requirement went from a customer email through sales notes and a PM brief to a ticket, and the team must see what changed on the way
An editor or fact-checker must compare a published quote with the original interview and find where numbers or hedges changed
An AI summary, rewrite or translation must be reviewed for lost negations, stronger claims or changed figures before it ships
A forwarded policy or support macro drifted across teams and the exact hop that changed its meaning must be found and fixed

Avoid when

One document is edited over time and the question is how much of the signed or approved text survives, and who wrote each part → use Theseus instead
Two structured records must be reconciled field by field (invoice vs order, form vs ID) → use Papers instead
The claims of a single text must be checked against sources rather than against an earlier version → use Unsourced instead

Instalação

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

Agente de IA com o servidor MCP do Marvelous UI: install_components({ slugs: ["drift-check"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Arquivos copiados (dependências incluídas): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/focus.js, core/motion.js, components/drift-check/drift-check.js, components/drift-check/drift-check.css, components/button/button.css, components/select/select.css.

Uso

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis CSS:

<div id="dc-demo" style="width:min(100%,72rem);margin-inline:auto">
  <style>
    #dc-demo { display:grid; gap:1rem }
    #dc-demo .dc-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1.25rem }
    #dc-demo .dc-title { display:grid; gap:.125rem; min-width:0 }
    #dc-demo .dc-title small { color:var(--mv-fg-muted); font-size:.75rem }
    #dc-demo .dc-title strong { font-size:1rem; letter-spacing:-.01em }
    #dc-demo .dc-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.625rem 1.25rem }
    #dc-demo .dc-controls .mv-choice { font-size:.8125rem }
    #dc-demo .dc-log { display:flex; align-items:center; gap:.625rem; min-height:2.5rem; margin:0; padding:.5rem .875rem; border:1px dashed var(--mv-border); border-radius:var(--mv-radius-lg); color:var(--mv-fg-muted); font-size:.8125rem }
    #dc-demo .dc-log b { color:var(--mv-fg); font-weight:500 }
    #dc-demo .dc-log code { font-family:var(--mv-font-mono); font-size:.75rem; color:var(--mv-fg) }
  </style>

  <div class="dc-bar">
    <span class="dc-title">
      <small id="dc-kicker">Harborline Freight · Feature request FR-2291</small>
      <strong id="dc-heading">Bulk export for warehouse reports</strong>
    </span>
    <span class="dc-controls">
      <mv-segmented id="dc-scenario" aria-label="Scenario" value="request">
        <button value="request">Feature request</button>
        <button value="quote">Press quote</button>
      </mv-segmented>
      <label class="mv-choice">
        <input type="checkbox" role="switch" class="mv-switch" id="dc-review">
        <span class="mv-choice-text"><span class="mv-choice-title">Require reviewer to restore</span></span>
      </label>
    </span>
  </div>

  <mv-drift-check id="dc-check" terms="EU workspace, Rotterdam">
    <template data-version data-label="Customer email" data-by="Dana Whitfield" data-via="Head of Operations, Harborline" data-at="2026-09-02">
      We may need the export to handle up to 50,000 rows by the end of Q4. It should not email reports to all users, only to admins in the EU workspace. If the pilot in Rotterdam goes well, we would roll it out to the other 3 warehouses.
    </template>
    <template data-version data-label="Call notes" data-by="Marco Bellini" data-via="Paraphrased from a call" data-at="2026-09-04">
      Customer may need the export to handle 50,000 rows by the end of Q4. It should not email reports to all users, only admins in the EU workspace. If the Rotterdam pilot goes well, they would roll it out to the other 3 warehouses.
    </template>
    <template data-version data-label="Account summary" data-by="AI assistant" data-via="Summarized by AI" data-at="2026-09-05">
      The customer needs the export to handle 50,000 rows by the end of Q4. Reports should be emailed to all users, including admins in the EU workspace. After the Rotterdam pilot, they will roll it out to the other 3 warehouses.
    </template>
    <template data-version data-label="Product brief" data-by="Priya Nair" data-via="Edited for the roadmap" data-at="2026-09-08">
      The customer needs the export to handle 500,000 rows by the end of Q3. Reports should be emailed to all users, including admins in every workspace. After the Rotterdam pilot, we will roll it out to all 4 warehouses.
    </template>
    <template data-version data-label="Engineering ticket" data-by="Omar Haddad" data-via="Rewritten as a ticket" data-at="2026-09-10">
      Export must handle 500,000 rows by end of Q3. Email reports to all users, including admins in every workspace. After the Rotterdam pilot, we will roll it out to all 4 warehouses.
    </template>
  </mv-drift-check>

  <p class="dc-log" id="dc-log" aria-live="off"><span>Pick a hop, switch to <b>Side by side</b>, or restore a flagged span of the ticket.</span></p>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const check = $("dc-check");
    await customElements.whenDefined("mv-drift-check");

    const scenarios = {
      request: {
        kicker: "Harborline Freight · Feature request FR-2291",
        heading: "Bulk export for warehouse reports",
        terms: "EU workspace, Rotterdam",
        versions: null, // the <template> children
      },
      quote: {
        kicker: "Newsroom fact-check · Quote review",
        heading: "“Early results” quote, from interview to social post",
        terms: "",
        versions: [
          { label: "Interview transcript", by: "Dr. Amara Okafor", via: "Lead researcher, recorded interview", at: "2026-08-18",
            text: "In our trial, the treatment reduced symptoms in some patients, but we don't yet know whether the effect lasts beyond 12 weeks. We would not recommend it outside a study for now." },
          { label: "Press release", by: "University press office", via: "Edited for the press release", at: "2026-08-20",
            text: "In the trial, the treatment reduced symptoms in many patients, though it is not yet known whether the effect lasts beyond 12 weeks. The team would not recommend it outside a study for now." },
          { label: "News article", by: "Kenji Watanabe", via: "Quoted in an article", at: "2026-08-22",
            text: "The treatment reduced symptoms in most patients, and the effect lasts for 12 weeks. The team would recommend it outside a study." },
          { label: "Social post", by: "Health Daily", via: "Shortened for social", at: "2026-08-23",
            text: "New treatment cures symptoms in most patients for 3 months. Doctors will recommend it." },
        ],
      },
    };
    const original = check.versions;

    $("dc-scenario").addEventListener("mv-change", (e) => {
      const s = scenarios[e.detail.value];
      $("dc-kicker").textContent = s.kicker;
      $("dc-heading").textContent = s.heading;
      check.terms = s.terms || null;
      check.removeAttribute("from");
      check.removeAttribute("to");
      check.layout = e.detail.value === "quote" ? "split" : "inline";
      check.versions = s.versions ?? original;
      log(`Loaded ${check.versions.length} versions.`);
    });

    const log = (html) => {
      const p = $("dc-log");
      p.replaceChildren(...html.map ? html : [html]);
    };
    const el = (tag, text) => Object.assign(document.createElement(tag), { textContent: text });

    check.addEventListener("mv-hop-select", (e) => {
      const { from, to, comparison } = e.detail;
      log([el("code", "mv-hop-select"), el("span", ` ${from} → ${to} · drift ${comparison.score} · ${comparison.counts.high} high-risk`)]);
    });
    check.addEventListener("mv-restore", (e) => {
      if ($("dc-review").checked) {
        e.preventDefault();
        log([el("code", "mv-restore"), el("span", " declined: a reviewer must approve changes to the ticket.")]);
        return;
      }
      const c = e.detail.change;
      log([el("code", "mv-restore"), el("span", " "), el("b", c.removed ? `“${c.removed}”` : `removed “${c.added}”`), el("span", " is back in the ticket.")]);
    });
    check.addEventListener("mv-drift-found", (e) => {
      const { counts, breakHop } = e.detail;
      if (breakHop != null) log([el("code", "mv-drift-found"), el("span", ` ${counts.high} high-risk changes · meaning shifted most at hop ${breakHop}.`)]);
    });
  </script>
</div>

Referência cultural

Telefone sem fio (brincadeira infantil), Tradição popular (conhecida como Chinese whispers no Reino Unido) (século XIX, jogo). Uma frase é passada ao longo de uma fila de jogadores, de um para o outro, e chega alterada; a graça está em comparar a última versão com a original e refazer, passo a passo, o caminho até onde ela se desviou. Na interface, cada repasse de um texto (notas de vendas, um resumo de IA, uma reescrita) é um salto: o componente compara a versão final com a fonte, pontua quanto cada salto mudou, sinaliza o salto onde o sentido se quebrou e permite restaurar a redação original.

API

Attributes

Name	Tipo	Default	Description
`from / to`	number (version index)		The pair being compared (0 = source). Defaults to source → final. Clicking the source card selects 0 → last, a hop card selects (n − 1) → n; the pickers allow any pair, reversed pairs included.
`layout`	inline \| split	`inline`	Inline paints the “to” version with removed words struck through before the new ones; split shows both versions side by side (stacked in narrow containers), with the same numbered tags on each side.
`terms`	comma-separated list		Glossary terms (product names, legal phrases, “EU workspace”…): any change touching one is flagged as a high-risk Term change.
`readonly`	boolean		Hides the Restore buttons (review-only).
`label`	string	`Relay drift`	Accessible name of the region.
`locale`	BCP 47 tag	`en-US`	Date formatting on the hop cards.
`<template data-version>`	children		One per version, in chain order, source first. The template text is the version (indentation and soft wraps collapsed, blank lines kept as paragraphs); data-label (what it is: “Call notes”), data-by (who), data-via (how: “Summarized by AI”) and data-at (ISO date or free text) describe the hop.
`data-level / data-layout / data-playing`	set by the component		On the host: faithful \| reworded \| shifted (end-to-end verdict), the current layout, and data-playing while Step through runs.

Properties

Name	Tipo	Description
`versions`	Array<{ text, label?, by?, via?, at? }>	The chain, source first (wins over templates). Setting it resets restores and undo; reading it returns copies, restores included.
`value`	string	Current text of the final version, restores included (read-only).
`report`	{ score, changed, counts, breakHop, hops[], changes[] }	End-to-end analysis (read-only): drift score, share of words changed, counts by severity, the hop that introduced most high-risk changes, per-hop scores, and every change with the hops it came from and a full sentence description.
`strings`	Partial<Record<string, string>>	Overrides for every visible text and announcement (English defaults; see STRINGS in drift-check.js).
`from / to / layout / terms / readonly / label / locale`	reflected	Mirror the attributes.

Methods

Name	Description
`static compare(a, b, { terms? })`	Pure, DOM-free comparison usable server-side or in tests. Returns { score (0-100), changed (0-1), severity, counts: { high, medium, low, none }, changes: [{ id, type: replace \| insert \| delete, removed, added, severity, risks: [{ type, severity, direction, detail }], from: [start, end], to: [start, end], description }], parts: [{ type: equal \| delete \| insert, text }] }. Also exported as compareText.
`select(from, to)`	Compares any two versions (indexes). Does not emit mv-hop-select.
`restore(id)`	Reverts change id of the current comparison to the “from” wording in the final version (goes through the cancelable mv-restore). Returns true when applied.
`undo()`	Undoes the last restore. Returns false when there is nothing to undo.
`play() / stop()`	Steps through the chain hop by hop (about 2 s each), then returns to source → final; any click or key press inside stops it.

Events

Name	Description
`mv-hop-select`	The user picked a hop or a pair. detail: { index (hop number, 0 for source → final, null for a custom pair), from, to, version, comparison: { score, counts, changes } }.
`mv-drift-found`	After the chain is analyzed, when source → final has at least one medium or high-risk change (once per distinct result). detail: { score, counts, breakHop, findings: [{ …change, hops, description }] }.
`mv-restore`	Cancelable, before a span of the final version is reverted. detail: { change, from, before, after } (after = the resulting final text). preventDefault() keeps the text as is (e.g. the ticket needs a reviewer).
`mv-change`	The final text changed through a restore or an undo. detail: { value, reason: "restore" \| "undo" }.

Content structure

Name	Description
`template[data-version]`	Direct `<template data-version>` children are the chain (ignored once the versions property is set).

CSS classes

Name	Description
`mv-drift-check-head`	Score (-score-num, role=meter -meter), verdict (-verdict with data-level), summary line, flagged kinds (-kinds / -kind), actions (Undo restore, Step through).
`mv-drift-check-rail / mv-drift-check-hop`	The chained hop cards (role=toolbar of buttons with aria-pressed): -hop-top, -hop-num, -hop-risk, -hop-break (data-break), -hop-label, -hop-by, -hop-via, -hop-bar, -hop-foot; data-level low \| medium \| high, data-in-range and data-endpoint for the pair being compared.
`mv-drift-check-panel`	Comparison: -caption, -toolbar (pickers, -segs layout toggle), -view (-text, -split with -col), -findings (-list of -finding with -chip, -finding-diff, -hopchip, -restore; -more toggles minor changes).
`mv-drift-check-change / -del / -ins / -tag / -gap`	Diff marks: a change wraps `<del>` and `<ins>` (data-severity high = wavy underline, medium = dashed), a numbered text tag for flagged changes, and a gap marker in split view where words were only added or removed.

CSS variables

Name	Default	Description
`--mv-drift-check-added`	`var(--mv-success)`	Tint of inserted words.
`--mv-drift-check-removed`	`var(--mv-danger)`	Tint and strike of removed words.
`--mv-drift-check-risk`	`var(--mv-danger)`	High-risk tags, wavy underline, hop flags and the shifted verdict.
`--mv-drift-check-caution`	`var(--mv-warning)`	Medium-risk tags and the reworded verdict.
`--mv-drift-check-faithful`	`var(--mv-success)`	Score bar color when the text stayed faithful.
`--mv-drift-check-text-size`	`var(--mv-text-base)`	Font size of the inline text view.

Accessibility

The component is a labelled region. The drift score is a role="meter" with a spoken value (“64 of 100, meaning shifted”), and the verdict and summary are plain text. The hop rail is a role="toolbar" of real buttons with aria-pressed and roving tabindex (Left/Right, Home/End, Enter or Space to compare); each card has a full accessible name (“Hop 2: Account summary, AI assistant, summarized by AI, September 5, 2026. Drift score 57, 5 high-risk changes; 72 from the source. Meaning changed most here.”). Diffs never rely on color: removed words are real <del> with line-through and inserted words real <ins> with an underline (wavy for high risk, dashed for medium), each prefixed with visually hidden “Removed:” / “Added:”, and flagged changes carry a numbered text tag (“3 Negation”) plus a hidden “(flag 3: negation dropped)”. Every flagged change is also listed as a sentence (“Changed “It should not email reports” to “Reports should be emailed” at hop 2 (AI assistant): negation dropped. High risk.”) next to its Restore button, whose name quotes the wording it brings back; hop chips jump to the hop that introduced the change. Selecting a pair, restoring and undoing are announced in a polite live region; after a restore focus moves to the next Restore button, so keyboard users keep their place. The pickers are native selects with labels, the layout toggle uses aria-pressed, the minor-changes toggle aria-expanded/aria-controls. Hovering or focusing a change or its finding highlights both. Step through is opt-in, stops on any key or click (and on Escape). Reduced motion (OS or data-motion="reduce"): no view fade, bars jump instead of sliding. Forced colors: tags, chips and flags get system-color borders, the selected hop an Highlight outline, bars use Highlight.