Mast <mv-mast>

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

<mv-mast safer="lower" delay="24h">
  <label>Daily deposit limit <input type="number" value="100" min="0"></label>
</mv-mast>

<div id="ms-demo" style="width:min(100%,62rem);margin-inline:auto">
  <style>
    #ms-demo { display:grid; gap:1rem; align-content:start }
    #ms-demo .ms-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap:1rem; align-items:start }
    #ms-demo .ms-panel { display:grid; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #ms-demo .ms-head { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.125rem; border-bottom:1px solid var(--mv-border) }
    #ms-demo .ms-logo { display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:var(--mv-radius-md); background:var(--mv-accent); color:var(--mv-fg-on-accent) }
    #ms-demo .ms-logo svg { width:1.0625rem; height:1.0625rem }
    #ms-demo .ms-title { display:grid; gap:.0625rem; min-width:0; flex:1 }
    #ms-demo .ms-title h3 { margin:0; font-size:.9375rem; letter-spacing:-.01em }
    #ms-demo .ms-title p { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #ms-demo .ms-row { padding:1rem 1.125rem }
    #ms-demo .ms-row + .ms-row { border-top:1px solid var(--mv-border) }
    #ms-demo .ms-field { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap }
    #ms-demo .ms-copy { display:grid; gap:.125rem; min-width:0; flex:1 1 11rem }
    #ms-demo .ms-label { font-size:.875rem; font-weight:560; color:var(--mv-fg) }
    #ms-demo .ms-sub { color:var(--mv-fg-muted); font-size:.75rem }
    #ms-demo .ms-range { display:grid; gap:.5rem; flex:1 1 100% }
    #ms-demo .ms-range-top { display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
    #ms-demo .ms-range output { font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums }
    #ms-demo .ms-range input { width:100% }
    #ms-demo mv-number-field { --mv-number-field-width:9.5rem }
    #ms-demo .ms-select { width:auto; min-width:9.5rem; flex:none }
    #ms-demo .ms-log { display:grid; gap:.5rem; padding:.875rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #ms-demo .ms-log h4 { display:flex; align-items:center; justify-content:space-between; margin:0; font-size:.75rem; font-weight:600; color:var(--mv-fg-muted); letter-spacing:.04em; text-transform:uppercase }
    #ms-demo .ms-log ol { display:grid; gap:.25rem; margin:0; padding:0; list-style:none; font:.75rem/1.45 var(--mv-font-mono); color:var(--mv-fg-muted) }
    #ms-demo .ms-log li { display:flex; gap:.625rem; min-width:0 }
    #ms-demo .ms-log time { flex:none; color:var(--mv-fg-subtle) }
    #ms-demo .ms-log b { flex:none; font-weight:600; color:var(--mv-fg) }
    #ms-demo .ms-log span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  </style>

  <div class="ms-grid">
    <!-- Personal finance: self-imposed spending and time limits -->
    <section class="ms-panel" aria-labelledby="ms-h-play">
      <header class="ms-head">
        <span class="ms-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l5-5 4 4 8-8"/><path d="M15 8h5v5"/></svg></span>
        <span class="ms-title">
          <h3 id="ms-h-play">Trading limits</h3>
          <p>Harborline · limits you set for yourself</p>
        </span>
        <span class="mv-badge" data-variant="success"><span class="mv-badge-dot"></span>Protected</span>
      </header>

      <mv-mast id="ms-deposit" class="ms-row" safer="lower" delay="24h" confirm-after reason="optional" label="daily deposit limit" pending-reason="Moving savings for the quarterly rebalance">
        <div class="ms-field">
          <span class="ms-copy">
            <span class="ms-label" id="ms-deposit-l">Daily deposit limit</span>
            <span class="ms-sub">Across cards and bank transfers</span>
          </span>
          <mv-number-field id="ms-deposit-field" value="100" min="0" max="5000" step="25" format="currency" currency="USD"></mv-number-field>
        </div>
      </mv-mast>

      <mv-mast id="ms-time" class="ms-row" safer="lower" delay="20s" label="daily session time" unit="minute">
        <div class="ms-range">
          <span class="ms-range-top">
            <span class="ms-copy">
              <label class="ms-label" for="ms-time-input">Daily session time</label>
              <span class="ms-sub">Demo speed: 20-second cooling-off, applies on its own</span>
            </span>
            <output id="ms-time-out" for="ms-time-input">60 min</output>
          </span>
          <input id="ms-time-input" type="range" class="mv-slider" min="15" max="240" step="15" value="60">
        </div>
      </mv-mast>
    </section>

    <!-- Team workspace: security-sensitive settings -->
    <section class="ms-panel" aria-labelledby="ms-h-sec">
      <header class="ms-head">
        <span class="ms-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v12"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg></span>
        <span class="ms-title">
          <h3 id="ms-h-sec">Repository settings</h3>
          <p>acme-labs / design-tokens</p>
        </span>
        <span class="mv-badge" data-variant="outline">Admin</span>
      </header>

      <mv-mast id="ms-visibility" class="ms-row" safer="private, internal, public" delay="72h" confirm-after confirm-window="7d" reason="required" label="repository visibility" pending-reason="Share the tokens with every product team in the company">
        <div class="ms-field">
          <span class="ms-copy">
            <span class="ms-label" id="ms-vis-l">Visibility</span>
            <span class="ms-sub">Who can see the code and its history</span>
          </span>
          <mv-segmented aria-labelledby="ms-vis-l" value="private">
            <button value="private">Private</button>
            <button value="internal">Internal</button>
            <button value="public">Public</button>
          </mv-segmented>
        </div>
      </mv-mast>

      <mv-mast id="ms-2fa" class="ms-row" safer="on" delay="48h" label="two-factor sign-in for all members">
        <div class="ms-field">
          <span class="ms-copy">
            <label class="ms-label" for="ms-2fa-input">Require two-factor sign-in</label>
            <span class="ms-sub">Members without it lose access until they enroll</span>
          </span>
          <input id="ms-2fa-input" type="checkbox" role="switch" class="mv-switch" checked>
        </div>
      </mv-mast>

      <mv-mast id="ms-retention" class="ms-row" safer="higher" delay="7d" unit="day" label="audit log retention">
        <div class="ms-field">
          <span class="ms-copy">
            <label class="ms-label" for="ms-retention-input">Audit log retention</label>
            <span class="ms-sub">Older events are deleted for good</span>
          </span>
          <select id="ms-retention-input" class="mv-select ms-select">
            <option value="365" selected>365 days</option>
            <option value="180">180 days</option>
            <option value="90">90 days</option>
            <option value="30">30 days</option>
          </select>
        </div>
      </mv-mast>
    </section>
  </div>

  <section class="ms-log" aria-labelledby="ms-log-h">
    <h4 id="ms-log-h">Server log <span style="text-transform:none;letter-spacing:0;font-weight:500">mv-request · mv-apply · mv-cancel</span></h4>
    <ol id="ms-log" aria-live="off"></ol>
  </section>

  <script type="module">
    const root = document.getElementById("ms-demo");
    const log = document.getElementById("ms-log");
    const deposit = document.getElementById("ms-deposit");
    const visibility = document.getElementById("ms-visibility");
    const timeInput = document.getElementById("ms-time-input");
    const timeOut = document.getElementById("ms-time-out");
    const now = Date.now();
    const clock = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const labelOf = (el) => el.getAttribute("label");

    // State coming from the server: a raise requested earlier, and a change that finished cooling off.
    deposit.setAttribute("until", new Date(now + (19 * 60 + 42) * 60_000 + 30_000).toISOString());
    deposit.setAttribute("pending", "250");
    visibility.setAttribute("until", new Date(now - 3 * 3_600_000).toISOString());
    visibility.setAttribute("pending", "internal");

    const say = (event, text) => {
      const li = document.createElement("li");
      const t = document.createElement("time");
      t.textContent = clock();
      const b = document.createElement("b");
      b.textContent = event;
      const s = document.createElement("span");
      s.textContent = text;
      li.append(t, b, s);
      log.prepend(li);
      while (log.children.length > 4) log.lastElementChild.remove();
    };
    // The number field has no built-in label here: name its inner input after the row title.
    customElements.whenDefined("mv-number-field").then(() => setTimeout(() => {
      document.getElementById("ms-deposit-field").input?.setAttribute("aria-labelledby", "ms-deposit-l");
    }));

    say("sync", "Loaded 1 pending raise and 1 change ready to confirm.");

    const fmt = (el, v) => {
      if (el.id === "ms-deposit") return `$${v}`;
      if (el.id === "ms-time") return `${v} min`;
      if (el.id === "ms-retention") return `${v} days`;
      if (typeof v === "boolean") return v ? "on" : "off";
      return String(v);
    };

    // The app persists each request (a fake 500 ms save) before the countdown starts.
    root.addEventListener("mv-request", (e) => {
      const { value, until } = e.detail;
      const when = new Date(until).toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
      e.detail.waitUntil(new Promise((r) => setTimeout(r, 500)).then(() => say("mv-request", `${labelOf(e.target)} → ${fmt(e.target, value)}, applies ${when}`)));
    });
    root.addEventListener("mv-apply", (e) => say("mv-apply", `${labelOf(e.target)} = ${fmt(e.target, e.detail.value)} (${e.detail.source})`));
    root.addEventListener("mv-cancel", (e) => say("mv-cancel", `${labelOf(e.target)}: request for ${fmt(e.target, e.detail.value)} ${e.detail.reason}`));

    // Keep the slider's readout in step with what the control shows.
    const syncTime = () => { timeOut.textContent = `${timeInput.value} min`; };
    for (const type of ["input", "change", "mv-draft", "mv-apply", "mv-request", "mv-cancel"]) {
      document.getElementById("ms-time").addEventListener(type, () => queueMicrotask(syncTime));
    }
  </script>
</div>