Why Not <mv-why-not>

node scripts/add.mjs why-not --out ./src/marvelous

<mv-why-not why="Publishing needs the Editor role. You are a Viewer." decider="Maya Chen">
  <button>Publish</button>
  <button data-why-not-path="request">Request Editor access</button>
</mv-why-not>

<div id="wn-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #wn-demo { display:grid; gap:1rem; align-content:start }
    #wn-demo .wn-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #wn-demo .wn-bar { display:flex; align-items:center; gap:.75rem 1rem; flex-wrap:wrap; min-height:3.5rem; padding:.625rem 1rem .625rem 1.125rem; border-bottom:1px solid var(--mv-border) }
    #wn-demo .wn-crumbs { display:flex; align-items:center; gap:.375rem; min-width:0; font-size:.8125rem; color:var(--mv-fg-muted) }
    #wn-demo .wn-crumbs b { color:var(--mv-fg); font-weight:600 }
    #wn-demo .wn-crumbs svg { width:.875rem; height:.875rem; color:var(--mv-fg-subtle) }
    #wn-demo .wn-tools { display:flex; align-items:center; gap:.625rem; flex-wrap:wrap; margin-inline-start:auto }
    #wn-demo .wn-body { padding:1.25rem 1.125rem 1.25rem }
    #wn-demo .wn-doc h3 { margin:0 0 .25rem; font-size:1.25rem; letter-spacing:-.015em }
    #wn-demo .wn-meta { margin:0 0 1rem; color:var(--mv-fg-muted); font-size:.75rem }
    #wn-demo .wn-doc p { margin:0 0 .75rem; color:var(--mv-fg-muted); font-size:.875rem; line-height:1.6; max-width:34rem }
    #wn-demo .wn-doc ul { margin:0; padding-inline-start:1.125rem; color:var(--mv-fg-muted); font-size:.875rem; line-height:1.7 }
    #wn-demo .wn-foot { display:grid; gap:.5rem; padding:.875rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #wn-demo .wn-controls { display:flex; align-items:center; gap:.625rem 1.125rem; flex-wrap:wrap }
    #wn-demo .mv-choice { font-size:.8125rem }
    #wn-demo .wn-log { margin:0; min-height:1.125rem; color:var(--mv-fg-subtle); font:.6875rem/1.5 var(--mv-font-mono); overflow-wrap:anywhere }
    #wn-demo .wn-standalone { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:stretch }
    #wn-demo .wn-caption { margin:.25rem 0 -.25rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    @media (max-width:46rem) {
      #wn-demo .wn-standalone { grid-template-columns:minmax(0,1fr) }
    }
  </style>

  <!-- A docs editor seen by a Viewer: three refused actions, each explaining itself -->
  <section class="wn-app" aria-label="Page editor">
    <header class="wn-bar">
      <span class="wn-crumbs">
        Launch
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
        <b>Q4 launch plan</b>
        <span class="mv-badge" data-variant="secondary">Viewer</span>
      </span>
      <span class="wn-tools">
        <!-- Pending: a request is already waiting for an answer -->
        <mv-why-not id="wn-invite" placement="bottom-end"
          what="You can’t invite guests to this page"
          why="People outside Tidewell need an admin’s approval before they can see internal pages."
          decider="Workspace admins" decider-type="team" decider-role="IT · Tidewell"
          response-time="within 4 hours" pending="request" pending-from="Workspace admins">
          <button type="button" class="mv-button" data-variant="ghost" data-size="sm">Invite guest</button>
          <button data-why-not-path="request">Ask admins to approve a guest</button>
          <button data-why-not-path data-hint="Anyone at Tidewell can be added right away">Invite a teammate instead</button>
        </mv-why-not>

        <!-- Not yet: a quota that resets on its own -->
        <mv-why-not id="wn-export" kind="not-yet" placement="bottom-end"
          what="You’ve used this month’s PDF exports"
          why="The Starter plan includes 20 PDF exports per month, and all 20 have been used."
          decider="Starter plan" decider-type="policy" decider-role="20 exports per month">
          <button type="button" class="mv-button" data-variant="outline" data-size="sm">Export PDF</button>
          <button data-why-not-path data-hint="Unlimited exports, $12 per member per month">Upgrade to Team</button>
          <button data-why-not-path data-hint="Paste it into any doc or email">Copy the page as Markdown</button>
        </mv-why-not>

        <!-- Not allowed: a role the person doesn't have (opened on load) -->
        <mv-why-not id="wn-publish" open placement="bottom-end"
          what="You can’t publish this page"
          why="Publishing needs the Editor role in Launch. You are a Viewer."
          decider="Maya Chen" decider-role="Space owner · Launch" contact="[email protected]"
          response-time="within a day" reference="PERM-EDITOR-LAUNCH">
          <button type="button" class="mv-button" data-size="sm">Publish</button>
          <button data-why-not-path="request">Request Editor access</button>
          <button data-why-not-path data-hint="She gets a link to this draft">Ask Maya to publish it</button>
          <button data-why-not-path data-hint="Your changes stay private for now">Save as draft instead</button>
        </mv-why-not>
      </span>
    </header>

    <div class="wn-body">
      <article class="wn-doc">
        <h3>Q4 launch plan</h3>
        <p class="wn-meta">Draft · edited 12 minutes ago by Kenji Watanabe</p>
        <p>We ship the new billing dashboard to all Team and Business workspaces on October 20. The rollout runs in three waves over two weeks, starting with the 40 design partners who joined the beta in July.</p>
        <ul>
          <li>Oct 6 · docs freeze and support training</li>
          <li>Oct 20 · wave 1, design partners</li>
          <li>Oct 27 · wave 2, Team plans in North America and Europe</li>
          <li>Nov 3 · wave 3, everyone else</li>
        </ul>
      </article>

    </div>
    <footer class="wn-foot">
      <span class="wn-controls">
        <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="wn-grant"> Maya grants Editor access</label>
        <label class="mv-choice"><input type="checkbox" class="mv-checkbox" id="wn-fail"> Make requests fail</label>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="wn-decline">Maya declines</button>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="wn-reset">Reset</button>
      </span>
      <p class="wn-log" id="wn-log" aria-live="polite">Hover, focus or click a refused action in the toolbar.</p>
    </footer>
  </section>

  <p class="wn-caption">Standalone, for pages and messages that are themselves the refusal</p>
  <div class="wn-standalone">
    <mv-why-not id="wn-payment" kind-label="Payment declined"
      what="Your payment didn’t go through"
      why="Your bank declined the $240.00 charge for the Team plan on the card ending in 4242. No money was taken."
      decider="Your card issuer" decider-type="system" decider-role="Declined with code 51, insufficient funds"
      reference="PAY-7Q2X-91">
      <button data-why-not-path data-hint="Your workspace stays active while you fix this">Use a different card</button>
      <button data-why-not-path data-hint="Worth a try once your bank confirms">Retry the payment</button>
      <a data-why-not-path href="#billing-help">Why banks decline payments</a>
    </mv-why-not>

    <mv-why-not id="wn-post" kind-label="Post removed"
      what="Your post was removed from Plant Swap"
      why="It links to a paid seed shop, and rule 3 of the group doesn’t allow selling or affiliate links."
      decider="Community moderators" decider-type="team" decider-role="Plant Swap · 4 volunteers"
      response-time="within 3 days" reference="MOD-20931">
      <button data-why-not-path data-hint="Your text and photos are kept">Edit and repost without the link</button>
      <a data-why-not-path href="#group-rules">Read the group rules</a>
      <button data-why-not-path="appeal">Appeal this decision</button>
    </mv-why-not>
  </div>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const publish = $("wn-publish");
    const invite = $("wn-invite");
    const exp = $("wn-export");
    const log = $("wn-log");
    const say = (text) => { log.textContent = text; };

    // The quota resets on the 1st of next month, at midnight.
    const now = new Date();
    exp.until = new Date(now.getFullYear(), now.getMonth() + 1, 1).toISOString();
    // The guest request was sent two hours ago.
    invite.pendingSince = new Date(Date.now() - 2 * 3600e3 - 4 * 60e3).toISOString();

    // A fake API: 700 ms round trip, optionally failing.
    const api = () => new Promise((resolve, reject) => {
      setTimeout(() => ($("wn-fail").checked ? reject(new Error("503")) : resolve()), 700);
    });

    const root = $("wn-demo");
    root.addEventListener("mv-why", (e) => say(`mv-why · ${e.detail.via} · “${e.detail.what}”${e.detail.attempts ? ` · attempt ${e.detail.attempts}` : ""}`));
    root.addEventListener("mv-request", (e) => { say(`mv-request · ${e.detail.label}…`); e.detail.waitUntil(api().then(() => say("Request delivered."))); });
    root.addEventListener("mv-appeal", (e) => { say(`mv-appeal · ${e.detail.reference}…`); e.detail.waitUntil(api()); });
    root.addEventListener("mv-withdraw", (e) => { say(`mv-withdraw · ${e.detail.type}…`); e.detail.waitUntil(api()); });
    root.addEventListener("mv-request-error", (e) => say(`mv-request-error · ${e.detail.type} · ${e.detail.error.message}`));
    root.addEventListener("mv-path", (e) => say(`mv-path · ${e.detail.label}`));
    root.addEventListener("mv-lift", () => say("mv-lift · the quota reset"));
    root.addEventListener("click", (e) => { if (e.target.closest("a[href^='#']")) e.preventDefault(); });

    $("wn-grant").addEventListener("change", (e) => {
      if (e.target.checked) { publish.grant(); say("Maya granted Editor access: Publish works now."); }
      else { publish.allowed = false; say("Editor access removed."); }
    });
    $("wn-decline").addEventListener("click", () => {
      $("wn-grant").checked = false;
      publish.allowed = false;
      publish.decline("Maya declined on " + new Date().toLocaleDateString("en-US", { month: "short", day: "numeric" }) + ": “Only the launch team publishes until the Oct 6 docs freeze.”");
      say("Maya declined the request.");
    });
    $("wn-reset").addEventListener("click", () => {
      $("wn-grant").checked = false;
      $("wn-fail").checked = false;
      publish.allowed = false;
      publish.pending = null;
      publish.note = null;
      invite.pending = "request";
      invite.pendingSince = new Date(Date.now() - 2 * 3600e3 - 4 * 60e3).toISOString();
      say("Reset.");
    });
    // The Publish button only does its job once allowed.
    publish.querySelector(".mv-button").addEventListener("click", () => say("Published “Q4 launch plan”."));
  </script>
</div>