エクスクルーシブ

Fork `<mv-fork>`

入力値によって決まる任意のビュー（ローンや料金の計算ツール、プランの比較、設定のプレビュー、コピーのバリエーション）のための「もしも」のタイムラインです。Fork はビューを、最初は同一の並んだタイムラインに分割し、それぞれが独自の入力値を持ちます。各タイムラインの出力は、compute(state) 関数（同期または非同期）か render(state, body) コールバックで再計算されます。

文化的リファレンス

『スライディング・ドア』、ピーター・ハウイット（1998年、映画）。ヒロインが電車に乗れるか乗り遅れるかの瞬間に物語が 2 つに分かれ、2 つのタイムラインを並行して追いながら交互に切り替えることで、ほんの小さな違いがどう展開するかを観客が比べられます。UI では、入力で動くあらゆるビューを任意の瞬間に分割し、最初は同一の並行タイムラインにできます。入力と結果のあらゆる違いが並べて示され、最終的に 1 つのタイムラインが本物として採用されます。

仕組み

入力値で動くあらゆるビュー（ローンや料金の計算ツール、プラン比較、設定プレビュー、コピーのバリエーション）のための「もしも」のタイムライン：Fork はビューを、最初は同一でそれぞれ独自の入力を持つ横並びのタイムラインに分割し、compute(state) 関数（同期または非同期）または render(state, body) コールバックを通じて各タイムラインの出力を再計算します。基準タイムラインとの違いはすべてその場でマークされます。変更されたフィールドには色付きのハローと読み上げ用の説明（「Timeline A has 6.1%」）が付き、数値の出力には符号付きで良し悪しを反映した差分バッジ（data-better="lower" のときに赤で表示される「+$1,128 / mo」、日付なら「15 yr earlier」）が付き、各フッターには変更された入力が言葉で列挙されます（「Rate 6.1% → 5.4%」）。区切り線が分岐の発生地点を記録し（「Forked at 2:14 PM from 30-year fixed, 6.1%」）、弧でできた小さなツリーがどのタイムラインがどこから派生したかを示します（最大 4 つ、6 つまで設定可能）。ペインはさらに分岐、入れ替え（左端が基準、または各ペインを親と比較）、破棄、採用ができます。キャンセル可能な mv-keep は選んだ状態をメインビューにマージします。メインビューは常に元の DOM なので、参照やフォーム送信はそのまま保たれます。ビューは data-bind（input、select、ラジオ、チェックボックス、レンジ、value を持つカスタム要素）と data-out（currency、percent、number、compact、date 形式の出力）で宣言的にバインドされます。クローンには一意の id とラジオ名が付き、フォームから切り離されます。分割はアニメーションします（ビューが 2 つに切られて引き離され、新しいペインが継ぎ目から展開し、採用されたペインはクリップで現れながら広がります）。モーション軽減時は即座に切り替わり、狭いコンテナでは縦に積み重なります。

カテゴリー	データ表示
タイプ	Web Component（`<mv-fork>`）
ステータス	安定版
同時にインストールされるもの	badge, button
Keywords	exclusive, culture, what-if, scenario, compare, comparison, side-by-side, calculator, simulator, diff, delta, branch, timeline, split, pricing, mortgage, flip, cancelable, accessibility

When to use

A loan, pricing or savings calculator should let users compare two scenarios side by side without losing their current inputs
A plan, seat or configuration picker needs a what-if comparison where only the differences matter
Users tweak several inputs and need to see exactly which ones changed and how much each output moved
A settings or copy preview should let users branch, compare, then keep one version as the new default

Avoid when

The goal is to generate and explore mutations of an element's CSS properties → use Variant Tree instead
The comparison is between two aligned images, before and after → use Image Compare instead
Users should undo or scrub through their past edits of one form rather than compare parallel versions → use Rewind instead

インストール

node scripts/add.mjs fork --out ./src/marvelous

Marvelous UI MCP サーバーを使う AI エージェント：install_components({ slugs: ["fork"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, components/badge/badge.css, components/button/button.css, core/dom.js, core/element.js, core/focus.js, core/motion.js, core/observe.js, components/fork/fork.js, components/fork/fork.css。

使い方

基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：

<div id="fk-demo" style="width:min(100%,68rem);margin-inline:auto">
  <style>
    #fk-demo { display:grid; gap:1.5rem }
    #fk-demo .fk-presets { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .625rem }
    #fk-demo .fk-presets > span { color:var(--mv-fg-muted); font-size:.75rem; font-weight:500; margin-inline-end:.25rem }
    #fk-demo .fk-view { display:grid; gap:1.25rem; container-type:inline-size }
    #fk-demo .fk-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1rem }
    @container (max-width: 22rem) { #fk-demo .fk-inputs { grid-template-columns:minmax(0,1fr) } }
    #fk-demo .fk-field { display:grid; gap:.375rem; align-content:start; font-size:.8125rem }
    #fk-demo .fk-field > span:first-child { display:flex; justify-content:space-between; gap:.5rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #fk-demo .fk-field output { color:var(--mv-fg); font-variant-numeric:tabular-nums }
    #fk-demo .fk-wide { grid-column:1/-1 }
    #fk-demo .fk-range { padding-block:.5rem .25rem }
    #fk-demo .fk-hero { display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .5rem; margin:0; padding-top:1.125rem; border-top:1px solid var(--mv-border) }
    #fk-demo .fk-hero dt { flex-basis:100%; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #fk-demo .fk-hero dd { margin:0; display:flex; align-items:center; font-size:1.875rem; font-weight:650; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.1 }
    #fk-demo .fk-hero small { color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500 }
    #fk-demo .fk-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.625rem; margin:0 }
    @container (max-width: 24rem) { #fk-demo .fk-stats { grid-template-columns:minmax(0,1fr) } }
    #fk-demo .fk-stats div { display:grid; gap:.25rem; align-content:start; padding:.625rem .75rem; border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #fk-demo .fk-stats dt { color:var(--mv-fg-muted); font-size:.6875rem }
    #fk-demo .fk-stats dd { margin:0; display:flex; flex-wrap:wrap; align-items:center; row-gap:.25rem; font-size:.9375rem; font-weight:600; font-variant-numeric:tabular-nums }
    #fk-demo .fk-stats dd .mv-fork-delta { margin-inline-start:0; flex-basis:auto }
    #fk-demo .fk-stats dd [data-out] { margin-inline-end:.5rem }
    #fk-demo .fk-split { display:grid; gap:.5rem }
    #fk-demo .fk-bar { display:flex; height:.5rem; border-radius:999px; overflow:hidden; background:var(--mv-bg-muted) }
    #fk-demo .fk-bar i { display:block; height:100%; transition:flex-grow var(--mv-duration-normal) var(--mv-ease-out) }
    #fk-demo .fk-bar .p { background:var(--mv-fg-muted) }
    #fk-demo .fk-bar .i { background:color-mix(in oklab, var(--mv-warning) 80%, var(--mv-fg) 10%) }
    #fk-demo .fk-legend { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; color:var(--mv-fg-muted); font-size:.75rem }
    #fk-demo .fk-legend b { color:var(--mv-fg); font-weight:600; font-variant-numeric:tabular-nums }
    #fk-demo .fk-legend span::before { content:""; display:inline-block; width:.5rem; height:.5rem; margin-inline-end:.375rem; border-radius:2px; background:var(--c) }
    #fk-demo .fk-second { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,27rem); gap:1.5rem 3rem; align-items:start; padding-top:1.5rem; border-top:1px dashed var(--mv-border) }
    #fk-demo .fk-second h4 { margin:0 0 .375rem; font-size:.9375rem }
    #fk-demo .fk-second p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.55 }
    #fk-demo .fk-seats { display:grid; gap:1rem }
    #fk-demo .fk-plans { display:flex; gap:.375rem; margin:0; padding:0; border:0 }
    #fk-demo .fk-plans legend { margin-bottom:.375rem; padding:0; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #fk-demo .fk-plans label { flex:1; display:grid; place-items:center; padding:.4375rem .5rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-md); font-size:.8125rem; cursor:pointer }
    #fk-demo .fk-plans label:has(:checked) { border-color:var(--mv-fg); background:var(--mv-bg-muted); font-weight:600 }
    #fk-demo .fk-plans label:has(:focus-visible) { box-shadow:var(--mv-focus-ring) }
    #fk-demo .fk-plans input { position:absolute; opacity:0; pointer-events:none }
    #fk-demo .fk-total { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; margin:0; font-size:1.375rem; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
    #fk-demo .fk-total small { color:var(--mv-fg-muted); font-size:.75rem; font-weight:500; letter-spacing:0; margin-inline-start:.25rem }
    #fk-demo .fk-log { list-style:none; margin:.75rem 0 0; padding:0; display:grid; gap:.375rem; font-size:.75rem; color:var(--mv-fg-muted) }
    #fk-demo .fk-log b { color:var(--mv-fg); font-weight:600 }
    @media (max-width: 48rem) { #fk-demo .fk-second { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="fk-presets" role="group" aria-label="Scenario presets">
    <span>Try a what-if</span>
    <button class="mv-button" data-variant="secondary" data-size="sm" type="button" data-preset="rate">Rates drop to 5.4%</button>
    <button class="mv-button" data-variant="secondary" data-size="sm" type="button" data-preset="down">Put 30% down</button>
    <button class="mv-button" data-variant="secondary" data-size="sm" type="button" data-preset="extra">Pay $400 extra a month</button>
    <label class="mv-choice" data-control="start" style="margin-inline-start:auto">
      <input type="checkbox" role="switch" class="mv-switch" id="fk-parent">
      <span class="mv-choice-text"><span class="mv-choice-title">Compare each with its parent</span></span>
    </label>
  </div>

  <mv-fork id="fk-mortgage">
    <div class="fk-view">
      <div class="fk-inputs">
        <label class="fk-field">
          <span>Home price</span>
          <input class="mv-input" type="number" data-bind="price" data-format="currency" min="50000" step="5000" value="685000" inputmode="numeric">
        </label>
        <label class="fk-field">
          <span>Loan term</span>
          <select class="mv-select" data-bind="term" data-summary>
            <option value="30" selected>30-year fixed</option>
            <option value="20">20-year fixed</option>
            <option value="15">15-year fixed</option>
          </select>
        </label>
        <label class="fk-field">
          <span>Interest rate</span>
          <input class="mv-input" type="number" data-bind="rate" data-format="percent" data-summary min="1" max="15" step="0.05" value="6.1" inputmode="decimal">
        </label>
        <label class="fk-field">
          <span>Extra each month</span>
          <input class="mv-input" type="number" data-bind="extra" data-format="currency" min="0" step="50" value="0" inputmode="numeric">
        </label>
        <label class="fk-field fk-wide">
          <span>Down payment <output data-out="downLabel">20% · $137,000</output></span>
          <input class="mv-slider fk-range" type="range" data-bind="down" data-format="percent" min="5" max="40" step="1" value="20">
        </label>
      </div>
      <dl class="fk-hero">
        <dt>Monthly principal &amp; interest</dt>
        <dd><span data-out="monthly" data-format="currency" data-better="lower" data-unit="/ mo" data-label="Monthly payment">$3,321</span></dd>
      </dl>
      <dl class="fk-stats">
        <div><dt>Total interest</dt><dd><span data-out="interest" data-format="currency" data-better="lower">$647,538</span></dd></div>
        <div><dt>Paid off</dt><dd><span data-out="payoff" data-format="date" data-better="lower">Oct 2056</span></dd></div>
        <div><dt>Loan amount</dt><dd><span data-out="loan" data-format="currency">$548,000</span></dd></div>
      </dl>
      <div class="fk-split" aria-hidden="true">
        <div class="fk-bar"><i class="p" style="flex-grow:548"></i><i class="i" style="flex-grow:647"></i></div>
        <div class="fk-legend"><span style="--c:var(--mv-fg-muted)">Principal <b class="fk-lp">46%</b></span><span style="--c:var(--mv-warning)">Interest <b class="fk-li">54%</b> of all you pay</span></div>
      </div>
    </div>
  </mv-fork>

  <div class="fk-second">
    <div>
      <h4>Stacked, starting from one timeline</h4>
      <p>Narrow containers stack the timelines. Fork the seat plan, change the plan or the billing cycle on one side, then keep the timeline you prefer: its values merge back into the main view.</p>
      <ol class="fk-log" id="fk-log" aria-label="Event log"><li>Events will appear here.</li></ol>
    </div>
    <mv-fork id="fk-seats" max="3" style="--mv-fork-min:20rem">
      <div class="fk-seats">
        <label class="fk-field">
          <span>Seats</span>
          <input class="mv-input" type="number" data-bind="seats" data-summary min="1" max="500" value="24" inputmode="numeric">
        </label>
        <fieldset class="fk-plans">
          <legend>Plan</legend>
          <label><input type="radio" name="fk-plan" value="team" data-bind="plan" data-summary checked>Team</label>
          <label><input type="radio" name="fk-plan" value="business" data-bind="plan">Business</label>
          <label><input type="radio" name="fk-plan" value="enterprise" data-bind="plan">Enterprise</label>
        </fieldset>
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" data-bind="annual" data-label="Billing" data-on="Annual" data-off="Monthly" checked>
          <span class="mv-choice-text"><span class="mv-choice-title">Annual billing</span><span class="mv-choice-description">Two months free</span></span>
        </label>
        <p class="fk-total"><span data-out="yearly" data-format="currency" data-better="lower" data-unit="/ yr" data-label="Yearly cost">$4,320</span><small>per year</small></p>
      </div>
    </mv-fork>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-fork");
    const fk = document.getElementById("fk-mortgage");
    const seats = document.getElementById("fk-seats");
    const usd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 });

    // Amortization with an optional extra payment each month (first payment: Nov 2026).
    fk.compute = ({ price = 0, down = 20, term = "30", rate = 6, extra = 0 }) => {
      const loan = Math.max(0, price * (1 - down / 100));
      const n = Number(term) * 12;
      const r = rate / 100 / 12;
      const monthly = r ? (loan * r) / (1 - (1 + r) ** -n) : loan / n;
      let balance = loan, interest = 0, months = 0;
      while (balance > 0.005 && months < n) {
        const i = balance * r;
        interest += i;
        balance -= Math.min(balance, monthly + extra - i);
        months++;
      }
      return {
        loan, monthly, interest,
        payoff: new Date(2026, 9 + months, 1),
        downLabel: `${down}% · ${usd.format(price * down / 100)}`,
      };
    };
    fk.render = (state, body, { outputs }) => {
      const p = outputs.loan ?? 0, i = outputs.interest ?? 0, total = p + i || 1;
      const [bp, bi] = body.querySelectorAll(".fk-bar i");
      bp.style.flexGrow = String(p); bi.style.flexGrow = String(i);
      body.querySelector(".fk-lp").textContent = `${Math.round((p / total) * 100)}%`;
      body.querySelector(".fk-li").textContent = `${Math.round((i / total) * 100)}%`;
    };

    const presets = { rate: { rate: 5.4 }, down: { down: 30 }, extra: { extra: 400 } };
    document.querySelectorAll("#fk-demo [data-preset]").forEach((b) => b.addEventListener("click", () => {
      fk.fork(fk.active, presets[b.dataset.preset]);
    }));
    document.getElementById("fk-parent").addEventListener("change", (e) => { fk.compare = e.target.checked ? "parent" : "first"; });

    // Opens already split: 30-year at 6.1% vs 15-year at 5.4%.
    if (!fk.forked) fk.fork("A", { term: "15", rate: 5.4 });

    const prices = { team: 15, business: 29, enterprise: 49 };
    seats.compute = ({ seats: n = 1, plan = "team", annual = true }) => ({
      yearly: (n || 0) * prices[plan] * (annual ? 10 : 12),
    });
    const log = document.getElementById("fk-log");
    const note = (html) => {
      const li = document.createElement("li");
      li.append(...html);
      if (log.firstElementChild && !log.firstElementChild.querySelector("b")) log.firstElementChild.remove();
      log.prepend(li);
      while (log.children.length > 4) log.lastElementChild.remove();
    };
    const b = (t) => Object.assign(document.createElement("b"), { textContent: t });
    seats.addEventListener("mv-fork", (e) => note([b("mv-fork"), ` Timeline ${e.detail.timeline} from ${e.detail.from}`]));
    seats.addEventListener("mv-keep", (e) => note([b("mv-keep"), ` Timeline ${e.detail.timeline} kept (${e.detail.state.seats} seats, ${e.detail.state.plan})`]));
    seats.addEventListener("mv-diff", (e) => {
      const o = e.detail.outputs[0];
      note([b("mv-diff"), ` ${e.detail.timeline}: ${o ? `${o.label} ${o.deltaText}` : `identical to ${e.detail.reference}`}`]);
    });
  </script>
</div>

API

Attributes

Name	タイプ	Default	Description
`max`	number (2..6)	`4`	Maximum number of timelines, the original included. Fork buttons are disabled at the limit and the reason is given in their tooltip and announced.
`compare`	"first" \| "parent"	`"first"`	Reference for markers, badges and diffs: the leftmost timeline (swap to change it) or each timeline's parent (the timeline it was forked from).
`locale`	BCP 47 tag	`"en-US"`	Locale of built-in number, currency, date and time formatting.
`currency`	ISO 4217 code	`"USD"`	Currency of data-format="currency" values (overridable per element with data-currency).
`bar`	"auto" \| "none"	`"auto"`	"none" hides the built-in bar (hint, tree, Swap and Fork): drive it with your own data-fork-action buttons or the methods.
`quiet`	boolean	`false`	Stops the debounced spoken summary of diffs after edits (fork, keep, discard and swap are still announced).
`data-bind`	state key		On an input, select, textarea, radio group, checkbox or custom element with a value property inside the view: the state key it reads and writes. Numbers are parsed for number and range inputs (or data-type="number"); checkboxes give booleans. Several controls may share a key (a range and a number field stay in sync).
`data-out`	output key		On any element: replaced with the formatted value of that key from compute(). Numeric and date outputs get a delta badge when they differ from the reference.
`data-format`	"currency" \| "percent" \| "number" \| "integer" \| "compact" \| "date"		On data-bind or data-out elements. percent takes percentage points (6.1 → 6.1%); date shows month and year and its delta in years and months. data-digits sets the fraction digits.
`data-better`	"lower" \| "higher"		On a data-out: which direction is good, so the delta badge turns success or danger (neutral otherwise).
`data-unit`	string		Appended to delta badges and diff sentences ("/ mo" → “+$104 / mo”).
`data-label / data-on / data-off / data-text`	string		Names used in diffs: field or output label (default: its `<label>`, legend, aria-label or the `<dt>` before it), checkbox texts, radio option text.
`data-summary`	boolean		On data-bind controls: the values quoted in “Forked at … from …” (default: the first two bound fields).
`data-fork-field`	boolean		Marks the container that gets the changed halo (default: the control's label, .mv-field or fieldset, else its parent).
`data-fork-action`	"fork" \| "keep" \| "discard" \| "swap" \| "focus"		On any button inside the element: runs that action for the timeline it sits in (or data-timeline / the active one).
`data-forked / data-count / data-layout`	read-only		Set on the host: forked state, number of timelines, "split" or "stacked".

Properties

Name	タイプ	Description
`compute`	(state, { timeline, label, parent }) => object \| Promise`<object>`	Returns the outputs of one timeline, keyed like data-out. Async results show aria-busy and stale answers are dropped.
`render`	(state, body, info) => void	Called for every timeline after its outputs are written, for custom visuals (charts, previews). info has id, outputs, reference, compareTo, refOutputs, refState and diff. Must be idempotent.
`format`	(value, { key, kind, format, timeline }) => string \| undefined	Overrides built-in formatting for inputs, outputs and deltas (return undefined to keep the default).
`describe`	(state, id) => string	Summary of a state for the split divider (default: the data-summary fields).
`strings`	object	Partial override of every visible text and announcement (English defaults).
`state`	object	State of Timeline A, the main view. Setting it writes A's inputs and recomputes (can be set before the element is defined).
`timelines`	Array<{ id, label, parent, state, outputs, forkedAt, reference, compareTo, active, diff, element }>	Snapshot of every timeline in visual order (read-only).
`forked / active`	boolean / string	Whether more than one timeline exists; id of the timeline that has (or last had) focus.

Methods

Name	Description
`fork(from?, patch?)`	Splits a timeline (default: the active one) into a new one that starts identical, with an optional state patch (scenario presets). Returns the new id ("B"…) or null when canceled or at max.
`keep(id)`	Merges that timeline's state into Timeline A and closes the others. Returns false if mv-keep was canceled.
`discard(id)`	Closes a timeline without merging (A cannot be discarded; its children are re-parented).
`swap(a?, b?)`	Swaps two panes (default: the active one and the reference); the leftmost becomes the reference.
`set(id, patch)`	Merges values into a timeline's state, writes its inputs and recomputes.
`focusTimeline(id)`	Moves focus to the same field in that timeline, or to its region.
`recompute()`	Recomputes every timeline (after external data used by compute changed).

Events

Name	Description
`mv-fork`	Before a timeline is created. detail: { from, timeline, state }. Cancelable: preventDefault() vetoes the fork.
`mv-keep`	Before a timeline is kept. detail: { timeline, state, previous (A's state), discarded (ids) }. Cancelable: preventDefault() keeps everything as is (confirm first, save to the server…).
`mv-diff`	A timeline's differences with its reference changed. detail: { timeline, reference, inputs: [{ key, label, from, to, fromText, toText }], outputs: [{ key, label, from, to, fromText, toText, delta, deltaText, direction, tone }], text }.
`mv-change`	A bound control was edited. detail: { timeline, key, value, state }.
`mv-discard`	A timeline was discarded. detail: { timeline, state }.
`mv-swap`	Two timelines were swapped. detail: { a, b, reference }.

Content structure

Name	Description
`(content)`	The view: your fields (data-bind) and outputs (data-out). It stays your DOM as Timeline A; forks are clones. Use a `<template>` child instead when the view contains custom elements that build their own DOM, so each timeline is stamped from pristine markup. Listeners you attach to the original controls are not copied: react to mv-change or compute instead.

CSS classes

Name	Description
`mv-fork-bar / -hint / -tree / -node / -arcs / -count / -swap / -main`	Top bar: hint and Fork button when unforked; mini tree, count, Swap and Fork once forked.
`mv-fork-origin`	Split divider “Forked at … from …” (role=note).
`mv-fork-stage / mv-fork-pane`	Grid of timelines. Pane attributes: data-timeline (A-F), data-reference, data-active, data-seam ("inline" \| "block"), aria-busy while computing.
`mv-fork-head / -dot / -title / -sub / -tag / -tool`	Pane header: letter, name, provenance, change count badge, Fork and Discard tools.
`mv-fork-body / mv-fork-foot / mv-fork-diff / mv-fork-keep`	The view, then the footer with the differences in words and “Keep this timeline”.
`mv-fork-delta`	Delta badge inserted after a data-out: data-tone="good \| bad \| neutral", data-sign="up \| down".
`[data-fork-changed]`	On changed controls, their container (halo) and changed outputs.

CSS variables

Name	Default	Description
`--mv-fork-tone-a … --mv-fork-tone-f`	`slate, accent, teal, amber, rose, blue`	Identity color of each timeline (letter, node, arc, halo, active border).
`--mv-fork-good / --mv-fork-bad`	`var(--mv-success) / var(--mv-danger)`	Delta badge tones for data-better.
`--mv-fork-min`	`17rem`	Minimum pane width: fewer columns (down to one, stacked) when the container is narrower.
`--mv-fork-gap`	`var(--mv-space-5)`	Gap between panes, where the seam is drawn.
`--mv-fork-radius`	`var(--mv-radius-xl)`	Pane corner radius.

Accessibility

Once forked, each timeline is a region named “Timeline A”, “Timeline B”… and described by its provenance (“From A · 2:14 PM”); before that the view is a plain container with no extra landmarks. Differences never rely on color: every changed control gets an aria-describedby text (“Changed in this timeline, Timeline A has 6.1%”), each delta badge carries a visually hidden “compared with Timeline A”, the footer lists changed inputs as “Rate 5.4%, was 6.1% in Timeline A”, and delta arrows plus signs (+ / −) back the success/danger tones. A polite live region announces forks, keeps, discards and swaps, and after edits a debounced summary of the output changes (“Timeline B compared with Timeline A: Monthly payment $4,448, $1,128 / mo higher; …”), silenced with quiet. Keyboard: the mini tree is a toolbar with roving arrows whose nodes move focus into their timeline; Alt+Shift+Arrow keys jump from a field to the same field in the previous or next timeline; Fork, Keep this timeline and Discard are real buttons with explicit labels, and disabled Fork buttons explain the limit. Focus is preserved: swapping keeps it on the same element (moveBefore when available), and keeping or discarding a pane that held focus moves it to the same field in the surviving timeline, else to its region. Clones get unique ids, relinked label/for and ARIA references, renamed radio groups and are detached from forms so only the original submits. Reduced motion (prefers-reduced-motion or data-motion="reduce"): every split, expand and swap is instant. Forced colors: panes, badges and diff chips use system colors, halos become dashed Highlight outlines and the active timeline a Highlight outline.