As Stored <mv-as-stored>

node scripts/add.mjs as-stored --out ./src/marvelous

<mv-as-stored>
  <form>
    <label>First name <input name="first_name" value="Chloé" data-as-stored="charset:ascii:transliterate"></label>
    <button>Save</button>
  </form>
</mv-as-stored>

<div id="as-demo" style="width:min(100%,50rem);margin-inline:auto">
  <style>
    #as-demo { display:grid; gap:1rem; align-content:start }
    #as-demo .as-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap }
    #as-demo .as-top p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; flex:1 1 20rem }
    #as-demo .as-top strong { color:var(--mv-fg); font-weight:600 }
    #as-demo .as-switches { display:flex; gap:.5rem 1.125rem; flex-wrap:wrap }
    #as-demo .mv-choice { font-size:.8125rem }
    #as-demo .as-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; align-items:start }
    #as-demo .as-log { margin:0; min-height:1.25rem; color:var(--mv-fg-subtle); font:.75rem/1.45 var(--mv-font-mono); overflow-wrap:anywhere }
    #as-demo .as-legend { display:flex; align-items:center; gap:.5rem }
    #as-demo .mv-fieldset { margin:0 }
    @media (max-width:40rem) { #as-demo .as-row { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="as-top">
    <p>This CRM syncs every customer to a <strong>legacy billing system</strong> with byte limits, an ASCII-only first name, cents and UTC days. Before saving, each field shows how it will really be stored.</p>
    <span class="as-switches">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="as-all"> Show cosmetic changes</label>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="as-live"> Live summary</label>
    </span>
  </div>

  <!-- Main: a customer form synced to a legacy billing system -->
  <mv-as-stored id="as-main" time-zone="America/Los_Angeles" country="US" submit-stored>
    <form id="as-form" autocomplete="off">
      <fieldset class="mv-fieldset" data-variant="card">
        <legend class="as-legend">New customer <span class="mv-badge" data-variant="secondary" data-shape="pill">Syncs to billing</span></legend>
        <div class="mv-field-group">
          <div class="as-row">
            <div class="mv-field">
              <label class="mv-label" for="as-first">First name</label>
              <input class="mv-input" id="as-first" name="first_name" value="Chloé" data-as-stored="trim charset:ascii:transliterate">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="as-last">Last name</label>
              <input class="mv-input" id="as-last" name="last_name" value="Kowalczyk-Brzęczyszczykiewicz" data-as-stored="trim nfc max-bytes:20">
            </div>
          </div>
          <div class="as-row">
            <div class="mv-field">
              <label class="mv-label" for="as-email">Work email</label>
              <input class="mv-input" id="as-email" name="email" type="email" value="[email protected]" data-as-stored="trim lowercase">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="as-phone">Phone</label>
              <input class="mv-input" id="as-phone" name="phone" type="tel" value="(415) 555-0132 ext. 204" data-as-stored="phone:e164">
            </div>
          </div>
          <div class="as-row">
            <div class="mv-field">
              <label class="mv-label" for="as-company">Company</label>
              <input class="mv-input" id="as-company" name="company" value="Northwind  Traders " data-as-stored="trim collapse max-bytes:40">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="as-limit">Credit limit</label>
              <input class="mv-input" id="as-limit" name="credit_limit" inputmode="decimal" value="$2,499.995" data-as-stored="currency:USD">
            </div>
          </div>
          <div class="as-row">
            <div class="mv-field">
              <label class="mv-label" for="as-start">Contract start (Pacific time)</label>
              <input class="mv-input" id="as-start" name="contract_start" type="datetime-local" value="2026-10-15T20:30" data-as-stored="timezone:UTC date">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="as-note">Delivery note</label>
              <textarea class="mv-textarea" id="as-note" name="delivery_note" rows="2" data-as-stored="charset:no-emoji collapse trim">Leave at the front desk 📦 thanks! 🙏</textarea>
            </div>
          </div>
        </div>
        <div class="mv-fieldset-footer">
          <button type="reset" class="mv-button" data-variant="ghost">Reset</button>
          <button type="submit" class="mv-button">Save customer</button>
        </div>
      </fieldset>
    </form>
  </mv-as-stored>
  <p class="as-log" id="as-log" aria-live="polite">Stored values are sent as shown (submit-stored).</p>

  <!-- Variant: airline passenger names, printed on a boarding pass -->
  <mv-as-stored id="as-pax" summary="none" accept="apply">
    <form onsubmit="event.preventDefault()">
      <fieldset class="mv-fieldset" data-variant="card">
        <legend>Passengers <span class="mv-badge" data-variant="secondary" data-shape="pill">As on the boarding pass</span></legend>
        <div class="as-row">
          <div class="mv-field">
            <label class="mv-label" for="as-p1">Passenger 1 · full name</label>
            <input class="mv-input" id="as-p1" name="pax1" value="Seán O’Brien-Müller" data-as-stored="strip-diacritics:icao uppercase strip:'’- charset:ascii max:30">
          </div>
          <div class="mv-field">
            <label class="mv-label" for="as-p2">Passenger 2 · full name</label>
            <input class="mv-input" id="as-p2" name="pax2" value="王小明" data-as-stored="strip-diacritics:icao uppercase strip:'’- charset:ascii max:30">
          </div>
        </div>
      </fieldset>
    </form>
  </mv-as-stored>

  <script type="module">
    const main = document.getElementById("as-main");
    const pax = document.getElementById("as-pax");
    const form = document.getElementById("as-form");
    const log = document.getElementById("as-log");
    const say = (t) => { log.textContent = t; };

    // App-provided alternatives: a shorter legal name that fits, a passport spelling on file.
    main.alternatives = {
      last_name: ({ input, transform }) => {
        const first = input.split(/[-\s]/)[0];
        return first && first !== input && !transform(first).changed ? [{ label: `Use “${first}”`, value: first, description: "Keep only the first part of the name" }] : [];
      },
    };
    pax.alternatives = {
      pax2: ({ value }) => (value.includes("?") ? [{ label: "Use passport spelling “WANG XIAOMING”", value: "WANG XIAOMING" }] : []),
    };

    main.addEventListener("mv-reshape-accept", (e) => say(`Accepted: ${e.detail.label} → “${e.detail.value}”`));
    main.addEventListener("mv-reshape-summary", (e) => say(`Held the save: ${e.detail.fields.length} fields will be reshaped.`));
    pax.addEventListener("mv-reshape-accept", (e) => say(`Applied to the field: ${e.detail.label} → “${e.detail.value}”`));
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      say(`Saved · ${JSON.stringify(data)}`);
    });

    document.getElementById("as-all").addEventListener("change", (e) => { main.show = e.target.checked ? "all" : "change"; pax.show = main.show; });
    document.getElementById("as-live").addEventListener("change", (e) => { main.summary = e.target.checked ? "live" : "hold"; });
  </script>
</div>