Exclusivobeta

Scope Tally `<mv-scope-tally>`

Hace visible el crecimiento del alcance frente al encargo original, para proyectos de clientes y presupuestos cerrados, especificaciones de producto, compromisos de sprint, RFP y contratos. Dale la línea base (elementos con estimaciones) y la cronología de cambios (elementos añadidos, modificados o eliminados, cada uno con quién lo pidió, cuándo, su impacto en la estimación, un estado de aceptado, pendiente, pasado a la fase 2 o rechazado, y si es facturable) como dos listas escritas en el HTML o con las propiedades baseline y changes. Un recuento en palabras encabeza la tarjeta (“Original 12 días → Ahora 21 días · +75 % en 7 cambios aceptados”, luego el impacto pendiente y los días facturables con su importe a tu tarifa) sobre dos carriles dibujados a la misma escala: el encargo original, con lo que se eliminó después rayado, y el alcance actual, donde cada aumento aceptado es un escalón, cada uno un tono más oscuro que el anterior, y las peticiones pendientes aparecen rayadas al final, cruzadas por líneas discontinuas de puntos de revisión (+25 %, +50 %, configurables) que se vuelven continuas una vez superadas. La cronología es una lista ordenada de escalones con fecha, tipo, costo, solicitante, total acumulado y el escalón que superó cada punto de revisión; las peticiones pendientes se deciden en el sitio (Aceptar como orden de cambio, Pasar a la fase 2, Rechazar, con Deshacer) mediante un mv-scope-decision cancelable que anticipa los totales tras la decisión, y cada una dice lo que haría aceptarla (“Si se acepta: 24 días · +100 % · Superaría +100 %”). Un separador “Nuevo desde tu última visita” (last-seen, o por navegador con storage-key y un botón Marcar como visto) separa lo que cambió desde tu última visita, y un aviso neutral sugiere revisar presupuesto y plazos en cada punto de revisión, con mv-scope-threshold para la app. Comparar con el original lista los elementos añadidos, modificados, eliminados y sin cambios en una tabla con totales, y Copiar resumen produce texto plano listo para un correo electrónico al cliente (mv-scope-export cancelable). Las unidades pueden ser días, horas, semanas, puntos o un código de moneda; variant="summary" conserva solo el recuento y los carriles para paneles de cartera.

Categoría	Visualización de datos
Tipo	Web Component (`<mv-scope-tally>`)
Estado	beta
También instala	button
Keywords	exclusive, culture, scope, scope-creep, change-order, quote, estimate, baseline, budget, freelance, agency, sprint, commitment, rfp, contract, timeline, compare, renegotiation, project-management

When to use

A freelancer or agency must show a client how a fixed quote grew, request by request, before asking for a change order
A sprint or release commitment keeps absorbing unplanned work and the team needs the growth and its sources in plain numbers
New requests on a spec, RFP or contract must be accepted, moved to a later phase or declined with their cost visible
A project dashboard should flag which engagements passed +25% or +50% of their original estimate

Avoid when

Tasks need to move through workflow stages rather than be measured against an original commitment → use Kanban instead
The wording of a requirement changed as it was relayed, not its size or cost → use Drift Check instead
A single request must be argued for and against before deciding, with weighted pros and cons → use Balance Sheet instead

Instalación

node scripts/add.mjs scope-tally --out ./src/marvelous

Agente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["scope-tally"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Archivos copiados (dependencias incluidas): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/focus.js, core/motion.js, core/observe.js, components/scope-tally/scope-tally.js, components/scope-tally/scope-tally.css, components/button/button.css.

Uso

Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables CSS:

<div id="st-demo" style="width:min(100%,72rem);margin-inline:auto">
  <style>
    #st-demo .st-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.25rem; align-items:start }
    #st-demo .st-side { display:grid; gap:1rem; position:sticky; top:1rem }
    #st-demo .st-panel { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface-raised); box-shadow:var(--mv-shadow-xs); font-size:.8125rem }
    #st-demo .st-panel h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #st-demo .st-panel p { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #st-demo .st-k { color:var(--mv-fg-muted); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600 }
    #st-demo .st-log { list-style:none; margin:0; padding:0; display:grid; gap:.375rem; font-size:.75rem }
    #st-demo .st-log li { display:grid; gap:.125rem; padding:.375rem .5rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle) }
    #st-demo .st-log code { font:500 .6875rem/1.2 var(--mv-font-mono); color:var(--mv-fg) }
    #st-demo .st-log span { color:var(--mv-fg-muted) }
    #st-demo .st-log .st-empty { background:none; padding:0; color:var(--mv-fg-subtle) }
    #st-demo .st-minis { display:grid; gap:1rem }
    @media (max-width:60rem) {
      #st-demo .st-layout { grid-template-columns:minmax(0,1fr) }
      #st-demo .st-side { position:static; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) }
    }
  </style>

  <div class="st-layout">
    <mv-scope-tally id="st-main"
      heading="Customer portal rebuild"
      subheading="Harbor &amp; Pine Outfitters · Fixed quote Q-2026-114, signed Jul 28"
      unit="day" rate="850" thresholds="25,50,100" last-seen="2026-09-12">
      <ol data-scope-baseline>
        <li data-id="discovery" data-estimate="1">Discovery workshop and sitemap</li>
        <li data-id="design" data-estimate="3">Visual design: 5 page templates</li>
        <li data-id="cms" data-estimate="2">CMS setup and content model</li>
        <li data-id="catalog" data-estimate="3">Product catalog with filters</li>
        <li data-id="account" data-estimate="2">Customer accounts and order history</li>
        <li data-id="launch" data-estimate="1">QA, launch and handover</li>
      </ol>
      <ol data-scope-changes>
        <li data-id="newsletter" data-kind="add" data-delta="0.5" data-by="Maya Chen" data-role="Client" data-date="2026-08-04" data-status="accepted" data-billable>Newsletter signup synced to the CRM</li>
        <li data-id="templates" data-kind="change" data-target="design" data-delta="1.5" data-by="Maya Chen" data-role="Client" data-date="2026-08-12" data-status="accepted" data-billable>Two more page templates: Stores and Careers</li>
        <li data-id="sso" data-kind="add" data-delta="2" data-by="Daniel Okafor" data-role="Client IT" data-date="2026-08-19" data-status="accepted" data-billable>Staff sign-in through the company directory (SSO)</li>
        <li data-id="sitemap" data-kind="remove" data-target="discovery" data-by="Maya Chen" data-role="Client" data-date="2026-08-27" data-status="accepted">Discovery workshop dropped<span data-note>The client supplied an approved sitemap from their agency of record.</span></li>
        <li data-id="chat" data-kind="add" data-delta="4" data-by="Leo Martins" data-role="Client" data-date="2026-08-30" data-status="declined">Custom live chat widget<span data-note>Replaced by their existing help desk embed, at no cost.</span></li>
        <li data-id="locator" data-kind="add" data-delta="2" data-by="Maya Chen" data-role="Client" data-date="2026-09-03" data-status="accepted" data-billable>Store locator with map and opening hours</li>
        <li data-id="filters" data-kind="change" data-target="catalog" data-delta="1.5" data-by="Aiko Tanaka" data-role="Studio lead" data-date="2026-09-08" data-status="accepted" data-billable="false">Catalog filters by size, color and in-store stock<span data-note>Underestimated in the quote; absorbed by the studio.</span></li>
        <li data-id="i18n" data-kind="add" data-delta="3" data-by="Priya Raman" data-role="Client marketing" data-date="2026-09-10" data-status="deferred">French and Spanish versions of the site</li>
        <li data-id="giftcards" data-kind="add" data-delta="2.5" data-by="Leo Martins" data-role="Client" data-date="2026-09-15" data-status="accepted" data-billable>Gift cards at checkout</li>
        <li data-id="loyalty" data-kind="add" data-delta="3" data-by="Leo Martins" data-role="Client" data-date="2026-09-18" data-status="pending">Loyalty points in the account area<span data-note>Needs the points API from their POS vendor, expected in October.</span></li>
        <li data-id="a11y" data-kind="add" data-delta="1" data-by="Samira Haddad" data-role="Studio QA" data-date="2026-09-22" data-status="pending" data-billable="false">Fixes from the accessibility audit (contrast, focus order)</li>
      </ol>
    </mv-scope-tally>

    <aside class="st-side" aria-label="Demo controls">
      <div class="st-panel">
        <h4>Try it</h4>
        <p>Decide the pending requests, hover a step to find it on the rails, or switch to Compare to original.</p>
        <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="st-request">Client sends a new request</button>
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="st-readonly">
          <span class="mv-choice-text"><span class="mv-choice-title">Client view</span><span class="mv-choice-description">Read-only, no decision buttons</span></span>
        </label>
      </div>
      <div class="st-panel">
        <span class="st-k">Events</span>
        <ol class="st-log" id="st-log"><li class="st-empty">Decide a request to see mv-scope-decision</li></ol>
      </div>
      <div class="st-minis">
        <mv-scope-tally id="st-sprint" variant="summary" heading="Sprint 42 commitment" subheading="Payments team · Sep 15 to Sep 26" unit="point" thresholds="15,30"></mv-scope-tally>
        <mv-scope-tally id="st-brand" variant="summary" heading="Brand guidelines" subheading="Northwind Labs · Fixed fee" unit="USD" thresholds="25,50"></mv-scope-tally>
      </div>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-scope-tally");
    const $ = (id) => document.getElementById(id);
    const main = $("st-main"), log = $("st-log");

    $("st-sprint").baseline = [
      { id: "refunds", label: "Partial refunds", estimate: 8 },
      { id: "payouts", label: "Scheduled payouts", estimate: 13 },
      { id: "report", label: "Legacy settlement report", estimate: 5 },
      { id: "webhooks", label: "Webhook retries", estimate: 8 },
    ];
    $("st-sprint").changes = [
      { id: "hotfix", label: "Hotfix: refund rounding", delta: 3, by: "On-call", date: "2026-09-16", status: "accepted" },
      { id: "applepay", label: "Apple Pay on web", delta: 8, by: "Product", date: "2026-09-17", status: "accepted" },
      { id: "drop", label: "Legacy report moved out", kind: "remove", target: "report", date: "2026-09-18", status: "accepted" },
      { id: "alerts", label: "Chargeback alerts", delta: 5, by: "Risk", date: "2026-09-22", status: "pending" },
    ];
    $("st-brand").baseline = [
      { id: "logo", label: "Logo refresh", estimate: 4500 },
      { id: "guide", label: "Guidelines document", estimate: 5000 },
      { id: "templates", label: "Social templates", estimate: 2500 },
    ];
    $("st-brand").changes = [
      { id: "motion", label: "Motion logo", delta: 1800, by: "Client", date: "2026-09-02", status: "accepted", billable: true },
      { id: "print", label: "Print stationery", delta: 950, by: "Client", date: "2026-09-11", status: "accepted", billable: true },
      { id: "signage", label: "Store signage kit", delta: 2400, by: "Client", date: "2026-09-19", status: "pending" },
    ];

    const push = (name, text) => {
      log.querySelector(".st-empty")?.remove();
      const li = document.createElement("li");
      const code = document.createElement("code");
      code.textContent = name;
      const span = document.createElement("span");
      span.textContent = text;
      li.append(code, span);
      log.prepend(li);
      while (log.children.length > 4) log.lastElementChild.remove();
    };
    const pct = (g) => `${g >= 0 ? "+" : ""}${Math.round(g * 100)}%`;
    main.addEventListener("mv-scope-decision", (e) => {
      const { decision, change, after } = e.detail;
      push("mv-scope-decision", `${decision} · ${change.label} → ${after?.now ?? main.totals.now} days`);
    });
    main.addEventListener("mv-scope-threshold", (e) => {
      const { threshold, direction, growth } = e.detail;
      push("mv-scope-threshold", `${direction} · +${threshold}% review point (${pct(growth)})`);
    });
    main.addEventListener("mv-scope-export", (e) => push("mv-scope-export", `${e.detail.text.split("\n").length} lines of summary`));

    const requests = [
      { label: "Export order history to CSV", delta: 1, by: "Maya Chen", role: "Client" },
      { label: "Wishlist shared by email", delta: 1.5, by: "Leo Martins", role: "Client" },
      { label: "Staff-only price overrides", delta: 2, by: "Daniel Okafor", role: "Client IT" },
    ];
    let next = 0;
    $("st-request").addEventListener("click", () => {
      const r = requests[next++ % requests.length];
      main.addChange({ ...r, id: `req-${next}`, date: new Date(), status: "pending" });
    });
    $("st-readonly").addEventListener("change", (e) => { main.readonly = e.target.checked; });
  </script>
</div>

Referencia cultural

El pescador y su mujer, Hermanos Grimm (1812, fábula). Cada deseo concedido lleva directamente a otro mayor, una cabaña, luego un castillo, un reino y más, y el agua se vuelve más oscura a cada regreso hasta que todo se pierde. En la interfaz, cada petición aceptada es un escalón visible sobre el encargo original, cada escalón un tono más oscuro que el anterior, con puntos de revisión que invitan a hablar de presupuesto y plazos antes de que el alcance se desborde.

API

Attributes

Name	Tipo	Default	Description
`heading`	string	`Scope`	Title of the card (project, quote or sprint name). Also heads the exported summary.
`subheading`	string		Secondary line under the title (client, quote number, signature date).
`heading-level`	number (2-6)	`3`	Level of the heading element.
`unit`	"day" \| "hour" \| "week" \| "month" \| any noun ("point") \| 3-letter currency code ("USD")	`day`	Unit of every estimate. Time units are formatted with Intl (“1 day”, “2.5 days”), other nouns get a plural (see unit-plural), a currency code formats estimates as money.
`unit-plural`	string		Plural of a custom unit when adding “s” is wrong (unit="person-day" unit-plural="person-days").
`rate`	number		Price per unit. When set, billable accepted changes also show their amount (“8.5 days billable ($7,225)”) and the summary adds the rate.
`currency`	ISO 4217 code	`USD`	Currency of rate amounts.
`thresholds`	comma-separated percents	`25,50`	Review points above the original estimate. Drawn as lines across the rails, reported on the step that passed them, and each one reached shows the renegotiation nudge and fires mv-scope-threshold.
`last-seen`	ISO date or date-time		Changes dated after this moment get a “New” tag and the “New since you last looked” divider. Overridden by Mark as seen / markSeen() and by the stored value when storage-key is set.
`storage-key`	string		Persists the last-seen moment and dismissed nudges per browser in localStorage (key mv-scope-tally:`<storage-key>`), synced across tabs.
`view`	"timeline" \| "compare"	`timeline`	Visible view. Reflects the tab chosen by the user.
`variant`	"summary"		Compact card with only the tally, the rails and the nudge (no views, no copy button), for dashboards listing several projects.
`readonly`	boolean		Hides decision and undo buttons, e.g. when the tally is shared with the client. Pending requests still show their impact.
`locale`	BCP 47 tag	`en-US`	Locale for numbers, percents, dates and lists.
`data-scope-baseline / data-scope-changes`	authored lists		On two child lists: each `<li>` of the baseline carries data-id and data-estimate; each change carries data-id, data-kind (add \| change \| remove), data-delta (signed; a removal without delta removes the target’s whole estimate), data-target (id of the item changed or removed), data-by, data-role, data-date, data-status (accepted \| pending \| deferred \| declined) and data-billable (present = billable, "false" = absorbed). The text is the label; an inner [data-note] element becomes the note. Read once, then replaced by the rendered card.
`data-tier / data-over`	set by the component		On the host: number of review points passed, and present once at least one is passed (the --_tier variable deepens the growth pill).

Properties

Name	Tipo	Description
`baseline`	Array<{ id, label, estimate }>	The original ask. Setting it re-renders.
`changes`	Array<{ id, label, kind?, target?, delta?, by?, role?, date?, status?, billable?, note? }>	Every change to the ask. kind defaults to "add" (or "change" when target is set), status to "pending"; dates sort the timeline. Reading it returns each change with its computed effect.
`totals`	{ baseline, now, delta, growth, projected, pending, pendingDelta, accepted, billable, billableAmount, threshold }	Current figures (read-only). growth is a ratio (0.75 = +75%), projected includes every pending request, billableAmount needs rate.
`threshold`	number \| null	Highest review point reached, in percent (read-only).
`seen`	Date \| null	Moment used for the “since you last looked” marker (read-only).
`strings`	Partial<Record<string, string>>	Overrides for every visible text, announcement and summary line ({placeholders} kept). English defaults.

Methods

Name	Description
`decide(id, decision)`	Applies "accept" \| "defer" \| "decline" \| "reopen" from code; emits mv-scope-decision with source "api" (cancelable). Returns false if cancelled, unknown or unchanged.
`addChange(change)`	Appends a change (usually a new pending request), animates it in and announces it. Returns its id.
`removeChange(id)`	Removes a change without an event.
`markSeen(at?)`	Marks everything up to now (or at) as seen, persists it with storage-key and emits mv-scope-seen.
`summary()`	Plain-text summary for a client email: original and current estimate, growth, billable change orders at your rate, pending impact, then accepted, pending, phase 2 and declined changes with date, cost and requester.
`copySummary()`	Emits the cancelable mv-scope-export, then copies the summary. Resolves true when copied.

Events

Name	Description
`mv-scope-decision`	Cancelable, before a decision is applied. detail: { id, decision: "accept" \| "defer" \| "decline" \| "reopen", source: "user" \| "api", previous: { status, billable }, change, totals (before), after: { baseline, now, growth, projected, threshold } }; undo sets detail.undo. preventDefault() keeps the change as it was (e.g. to confirm on the server first, then call decide()).
`mv-scope-threshold`	The highest review point reached changed after a decision or a data update. detail: { threshold, level, direction: "up" \| "down", growth, baseline, now }. Not fired for the initial state: read threshold instead.
`mv-scope-export`	Cancelable, before Copy summary writes to the clipboard. detail: { text, format: "text" }. preventDefault() to open your own mail composer with detail.text instead.
`mv-scope-seen`	Mark as seen was used. detail: { lastSeen }.
`mv-scope-view`	The user switched views. detail: { view }.

CSS classes

Name	Description
`mv-scope-tally-card`	The card (section labelled by the heading): -head, -overview, -nudge, -body.
`mv-scope-tally-tally / -subline`	Tally in words (-fig, -fig-label, -fig-value, -growth with data-dir, -across) and the pending / billable line.
`mv-scope-tally-strip`	Decorative rails (aria-hidden): -rail[data-rail=original\|now], -track, -seg[data-seg=original\|removed\|kept\|step\|pending] (data-id, --_d depth, data-active when linked), -marks / -mark[data-reached], -legend.
`mv-scope-tally-nudge`	Review-point note (role=note) with -nudge-title and Copy summary / Dismiss.
`mv-scope-tally-tabs / -tab / -panel`	View switcher (tablist) and its panels.
`mv-scope-tally-steps / -step`	Timeline `<ol>`; each step has data-id, data-status, data-kind, data-sign, data-new, and holds -node, -since (first new step), -step-top, -delta, -step-label, -step-by, -step-note, -step-foot (-status, -running, -cross), -decide, -undo.
`mv-scope-tally-table`	Compare to original table: tbody[data-group=added\|changed\|removed\|unchanged], tfoot totals, -compare-note.

CSS variables

Name	Default	Description
`--mv-scope-tally-step`	`var(--mv-accent)`	Hue of accepted steps; each step mixes more of it than the previous one.
`--mv-scope-tally-review`	`var(--mv-warning)`	Review-point lines, the nudge and the growth pill once a point is passed.
`--mv-scope-tally-pending`	`var(--mv-warning)`	Hatching and ink of pending requests.
`--mv-scope-tally-original`	`muted neutral`	Fill of the original ask on both rails.

Accessibility

The card is a <section> labelled by its heading. Everything the rails show is also written as text: the tally paragraph reads “Original: 12 days · Now: 21 days · +75% across 7 accepted changes”, the subline gives pending impact and billable days, and the rails themselves are aria-hidden (their segments are a pointer-only shortcut that scrolls to and focuses the matching step). The timeline is an ordered list in date order; each step states its date (<time>), kind (Added, Changed, Removed), cost, requester, status in words with an icon (Accepted · Change order, Awaiting decision, Moved to phase 2, Declined), the running total and any review point it passed, so nothing relies on color or hatching. The “New since you last looked” divider is real text inside the first new step, and every later new step carries a “New” tag. Decisions are native buttons grouped per request (role=group, “Decision for Loyalty points…”); after a decision focus moves to that step’s Undo button, after an undo back to Accept, and a polite status region announces the result with the new total (“Gift cards at checkout: Accepted. Total 21 days, +75% compared with the original.”), new requests and review points passed. The view switcher is a tablist with roving tabindex (arrow keys, Home, End) and automatic activation; the compare view is a real table with a caption, column and row headers, row groups and a totals footer, dashes read as “none”. The nudge is a role=note with a labelled Dismiss button. Reduced motion (OS or data-motion="reduce"): no segment growth, no flash, no slide-in. Forced colors: rails, marks and chips switch to system colors with borders and dashed outlines.