Mirror Rank <mv-mirror-rank>

node scripts/add.mjs mirror-rank --out ./src/marvelous

<mv-mirror-rank you="aiko" label="Q3 sales leaderboard">
  <script type="application/json">{
    "factors": [{ "key": "deals", "label": "Deals won", "min": 0, "max": 30 }, { "key": "csat", "label": "CSAT", "min": 60, "max": 100, "unit": "%" }],
    "entries": [{ "id": "priya", "name": "Priya Raman", "values": { "deals": 22, "csat": 94 } }, { "id": "aiko", "name": "Aiko Tanaka", "values": { "deals": 20, "csat": 92 } }, { "id": "mei", "name": "Mei Chen", "values": { "deals": 14, "csat": 87 } }]
  }</script>
</mv-mirror-rank>

<div id="mr-demo" style="width:min(100%,76rem);margin-inline:auto">
  <style>
    #mr-demo .mr-top { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem 1.5rem; flex-wrap:wrap; margin:0 0 1rem }
    #mr-demo .mr-top h3 { margin:0; font-size:1.125rem; letter-spacing:-.01em }
    #mr-demo .mr-top p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #mr-demo .mr-controls { display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap }
    #mr-demo .mr-controls .mv-choice { gap:.625rem; font-size:.8125rem }
    #mr-demo .mr-foot { display:flex; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; margin:.875rem 0 0; color:var(--mv-fg-muted); font-size:.75rem }
    #mr-demo .mr-foot code { font-family:var(--mv-font-mono); font-size:.6875rem; color:var(--mv-fg) }
  </style>

  <div class="mr-top">
    <div>
      <h3 id="mr-title">Q3 sales leaderboard</h3>
      <p id="mr-sub">Account executives · updated Sep 24, 2026</p>
    </div>
    <div class="mr-controls">
      <mv-segmented id="mr-scenario" value="sales" aria-label="Scenario">
        <button value="sales">Sales team</button>
        <button value="search">Search ranking</button>
      </mv-segmented>
      <label class="mv-choice" data-control="end">
        <input type="checkbox" role="switch" class="mv-switch" id="mr-honest" checked>
        <span class="mv-choice-text"><span class="mv-choice-title">Honest mode</span></span>
      </label>
      <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="mr-week">Simulate next week</button>
    </div>
  </div>

  <mv-mirror-rank id="mr-rank" you="aiko" honest label="Q3 sales leaderboard">
    <script type="application/json">
      {
        "factors": [
          { "key": "deals", "label": "Deals won", "weight": 30, "min": 0, "max": 30, "step": 1, "unit": ["deal", "deals"], "improve": "Close {n} more {unit}", "slip": "{n} fewer {unit} won" },
          { "key": "revenue", "label": "Revenue closed", "weight": 25, "min": 0, "max": 600, "step": 10, "prefix": "$", "unit": "k", "improve": "Bring in {value} more revenue", "slip": "Revenue {value} lower" },
          { "key": "response", "label": "Lead response", "weight": 20, "better": "lower", "min": 1, "max": 24, "step": 0.5, "unit": "h", "improve": "Respond {value} faster", "slip": "Responses {value} slower" },
          { "key": "csat", "label": "CSAT", "weight": 15, "min": 60, "max": 100, "step": 1, "unit": "%", "improve": "Lift CSAT by {n} points", "slip": "CSAT {n} points lower" },
          { "key": "tenure", "label": "Tenure", "weight": 10, "min": 0, "max": 60, "step": 1, "unit": "mo", "fixed": "Accrues with time on the team" }
        ],
        "entries": [
          { "id": "priya", "name": "Priya Raman", "meta": "EMEA · Enterprise", "values": { "deals": 22, "revenue": 480, "response": 2, "csat": 94, "tenure": 38 } },
          { "id": "marcus", "name": "Marcus Olsen", "meta": "Nordics · Mid-market", "values": { "deals": 24, "revenue": 410, "response": 3.5, "csat": 88, "tenure": 52 } },
          { "id": "amara", "name": "Amara Okafor", "meta": "West Africa · SMB", "values": { "deals": 19, "revenue": 360, "response": 1.5, "csat": 96, "tenure": 20 } },
          { "id": "diego", "name": "Diego Fernández", "meta": "LATAM · Enterprise", "values": { "deals": 17, "revenue": 450, "response": 4, "csat": 90, "tenure": 44 } },
          { "id": "aiko", "name": "Aiko Tanaka", "meta": "APAC · Mid-market", "values": { "deals": 20, "revenue": 400, "response": 4.5, "csat": 92, "tenure": 14 } },
          { "id": "lucas", "name": "Lucas Moreau", "meta": "France · SMB", "values": { "deals": 16, "revenue": 300, "response": 2.5, "csat": 89, "tenure": 30 } },
          { "id": "sofia", "name": "Sofia Rossi", "meta": "Southern Europe · Mid-market", "values": { "deals": 15, "revenue": 340, "response": 5, "csat": 93, "tenure": 26 } },
          { "id": "jonas", "name": "Jonas Weber", "meta": "DACH · Enterprise", "values": { "deals": 13, "revenue": 390, "response": 6.5, "csat": 85, "tenure": 48 } },
          { "id": "mei", "name": "Mei Chen", "meta": "Greater China · SMB", "values": { "deals": 14, "revenue": 260, "response": 2, "csat": 87, "tenure": 9 } },
          { "id": "omar", "name": "Omar Haddad", "meta": "Middle East · Mid-market", "values": { "deals": 11, "revenue": 280, "response": 7.5, "csat": 84, "tenure": 16 } }
        ]
      }
    </script>
  </mv-mirror-rank>

  <div class="mr-foot">
    <span>Pick anyone in the list to see their mirror · hover a suggestion to preview it, press it to pin</span>
    <span id="mr-event" aria-hidden="true"></span>
  </div>

  <script type="module">
    const rank = document.getElementById("mr-rank");
    await customElements.whenDefined("mv-mirror-rank");
    const $ = (id) => document.getElementById(id);
    const clone = (x) => JSON.parse(JSON.stringify(x));

    const sales = { factors: clone(rank.factors), entries: clone(rank.entries) };
    // Next week: Aiko closes three deals and answers leads faster; the others move a little.
    const nextWeek = sales.entries.map((e) => {
      const bump = { aiko: { deals: 3, response: -1.5, revenue: 40 }, amara: { deals: 1 }, diego: { revenue: 20 }, marcus: { deals: 1, csat: 1 }, lucas: { deals: 2 }, mei: { deals: 1 } }[e.id] ?? {};
      const values = { ...e.values };
      for (const [k, d] of Object.entries(bump)) values[k] = +(values[k] + d).toFixed(1);
      return { ...e, values };
    });

    // Search scenario: the marketplace's own (non-linear) relevance score, explained.
    const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
    const search = {
      factors: [
        { key: "match", label: "Query match", min: 0, max: 100, step: 1, unit: "%", maxPoints: 30, improve: "Raise query match by {n} points" },
        { key: "rating", label: "Rating", min: 1, max: 5, step: 0.1, decimals: 1, maxPoints: 25, improve: "Lift the rating by {n}", format: (v) => `${v.toFixed(1)} / 5` },
        { key: "reviews", label: "Reviews", min: 0, max: 5000, step: 10, unit: ["review", "reviews"], maxPoints: 15, improve: "Collect {n} more {unit}" },
        { key: "price", label: "Price vs median", better: "lower", min: -30, max: 30, step: 1, maxPoints: 12, improve: "Cut the price by {n}%", format: (v) => `${v > 0 ? "+" : v < 0 ? "−" : ""}${Math.abs(v)}%` },
        { key: "shipping", label: "Delivery time", better: "lower", min: 1, max: 7, step: 1, unit: ["day", "days"], maxPoints: 10, improve: "Deliver {value} sooner" },
        { key: "history", label: "Seller history", min: 0, max: 48, step: 1, unit: "mo", maxPoints: 8, fixed: "Account age, grows on its own" },
      ],
      score: (v) => {
        const parts = {
          match: 30 * clamp(v.match / 100, 0, 1),
          rating: 25 * clamp((v.rating - 3.5) / 1.5, 0, 1),
          reviews: 15 * Math.min(1, Math.log10(1 + Math.max(0, v.reviews)) / Math.log10(5001)),
          price: 12 * clamp((30 - v.price) / 60, 0, 1),
          shipping: 10 * clamp((7 - v.shipping) / 6, 0, 1),
          history: 8 * Math.min(1, v.history / 48),
        };
        return { total: Object.values(parts).reduce((a, b) => a + b, 0), parts };
      },
      entries: [
        ["northwind", "Northwind Audio", "Pulse ANC Buds · $119.00", 95, 4.7, 3200, -5, 2, 60],
        ["kestrel", "Kestrel Sound", "Glide Earbuds 2 · $99.00", 90, 4.6, 1800, 0, 1, 40],
        ["lumen", "Lumen & Co.", "Halo Mini · $129.00", 88, 4.8, 950, 6, 2, 36],
        ["harbor", "Harbor Tech", "WaveFit Pro · $89.00", 92, 4.4, 2600, -10, 3, 52],
        ["aurelia", "Aurelia Goods", "Calm Buds · $94.00", 85, 4.5, 1400, -4, 2, 30],
        ["juniper", "Juniper Direct", "AirLite Pro · $79.99", 80, 4.6, 420, -8, 3, 14],
        ["pine", "Pine Street Electronics", "Tempo X · $104.00", 86, 4.3, 2100, 4, 2, 48],
        ["mistral", "Mistral Supply", "Breeze Buds · $74.00", 78, 4.5, 700, -12, 4, 26],
        ["quokka", "Quokka Gear", "Hop Buds · $97.00", 82, 4.2, 1100, 2, 2, 20],
        ["sable", "Sable Audio Lab", "Studio Pods · $139.00", 75, 4.7, 300, 10, 3, 18],
        ["tidewater", "Tidewater Outlet", "Surf Buds · $64.00", 70, 4.1, 1600, -15, 5, 44],
        ["orbit", "Orbit Electronics", "Nova Lite · $84.00", 72, 4.0, 500, -2, 4, 10],
      ].map(([id, name, meta, match, rating, reviews, price, shipping, history]) => ({ id, name, meta, values: { match, rating, reviews, price, shipping, history } })),
    };

    let week = 0;
    const show = (scenario) => {
      const isSales = scenario === "sales";
      rank.score = isSales ? null : search.score;
      rank.factors = isSales ? sales.factors : search.factors;
      rank.entries = isSales ? (week ? nextWeek : sales.entries) : search.entries;
      rank.you = isSales ? "aiko" : "juniper";
      rank.selected = null;
      rank.target = "next";
      rank.limit = isSales ? 0 : 4;
      rank.label = isSales ? "Q3 sales leaderboard" : "Search results for wireless earbuds";
      $("mr-title").textContent = isSales ? "Q3 sales leaderboard" : "Search ranking · “wireless earbuds”";
      $("mr-sub").textContent = isSales ? "Account executives · updated Sep 24, 2026" : "Seller dashboard · why your listing sits where it does";
      $("mr-week").hidden = !isSales;
    };

    $("mr-scenario").addEventListener("mv-change", (e) => { week = 0; $("mr-week").textContent = "Simulate next week"; show(e.detail.value); });
    $("mr-honest").addEventListener("change", (e) => { rank.honest = e.target.checked; });
    $("mr-week").addEventListener("click", (e) => {
      week = week ? 0 : 1;
      e.currentTarget.textContent = week ? "Back to this week" : "Simulate next week";
      rank.entries = week ? nextWeek : sales.entries;
    });

    const log = (a) => {
      const t = a.target ? ` · target ${a.target.name}` : "";
      $("mr-event").replaceChildren(Object.assign(document.createElement("code"), { textContent: "mv-what-it-takes" }), ` ${a.suggestions.length} suggestion${a.suggestions.length === 1 ? "" : "s"}${t}`);
    };
    rank.addEventListener("mv-what-it-takes", (e) => log(e.detail));
    if (rank.analysis) log(rank.analysis);
  </script>
</div>