Forgot <mv-forgot>

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

<mv-forgot>
  <form>
    <textarea name="body" aria-label="Message">Hi Sam, the signed contract is attached.</textarea>
    <input type="file" name="files" aria-label="Attachments">
    <button>Send</button>
  </form>
</mv-forgot>

<div id="fg-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #fg-demo { display:grid; gap:1.25rem; align-content:start }
    #fg-demo .fg-card { min-width:0; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #fg-demo .fg-bar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:3rem; padding:.5rem 1rem .5rem 1.125rem; border-bottom:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #fg-demo .fg-bar h3 { margin:0; font-size:.875rem; font-weight:600; letter-spacing:-.01em }
    #fg-demo .fg-bar p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.75rem }
    #fg-demo .fg-row { display:flex; align-items:center; gap:.75rem; padding:0 1.125rem; border-bottom:1px solid var(--mv-border) }
    #fg-demo .fg-row label { flex:none; width:3.75rem; color:var(--mv-fg-muted); font-size:.8125rem }
    #fg-demo .fg-row input { flex:1; min-width:0; height:2.625rem; padding:0; border:0; background:transparent; color:var(--mv-fg); font:inherit; font-size:.875rem; outline:none }
    #fg-demo .fg-row:focus-within { box-shadow:inset 2px 0 0 var(--mv-accent) }
    #fg-demo .fg-body { display:block; width:100%; box-sizing:border-box; min-height:13.5rem; padding:.875rem 1.125rem; border:0; background:transparent; color:var(--mv-fg); font:.875rem/1.6 var(--mv-font-sans); resize:vertical; outline:none }
    #fg-demo .fg-body:focus-visible { box-shadow:inset 2px 0 0 var(--mv-accent) }
    #fg-demo .fg-files { display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.125rem .75rem }
    #fg-demo .fg-files:empty { display:none }
    #fg-demo .fg-file { display:inline-flex; align-items:center; gap:.5rem; height:2rem; padding:0 .375rem 0 .625rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle); font-size:.75rem }
    #fg-demo .fg-file svg { width:.875rem; height:.875rem; color:var(--mv-fg-muted) }
    #fg-demo .fg-file small { color:var(--mv-fg-muted) }
    #fg-demo .fg-file button { display:grid; place-items:center; width:1.375rem; height:1.375rem; padding:0; border:0; border-radius:var(--mv-radius-sm); background:none; color:var(--mv-fg-muted); cursor:pointer }
    #fg-demo .fg-file button:hover { background:var(--mv-bg-muted); color:var(--mv-fg) }
    #fg-demo .fg-foot { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.75rem 1rem .75rem 1.125rem; border-top:1px solid var(--mv-border) }
    #fg-demo .fg-foot .fg-grow { flex:1 }
    #fg-demo .fg-foot svg { width:1rem; height:1rem }
    #fg-demo .fg-controls { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.75rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #fg-demo .fg-controls .fg-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #fg-demo .fg-log { flex:1 1 16rem; min-height:1.125rem; margin:0; color:var(--mv-fg-muted); font:.75rem/1.4 var(--mv-font-mono) }
    #fg-demo .mv-choice { font-size:.8125rem }
    #fg-demo .fg-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:start }
    #fg-demo .fg-form { display:grid; gap:.875rem; padding:1rem 1.125rem }
    #fg-demo .fg-form .fg-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.75rem }
    #fg-demo .fg-form textarea { min-height:5.5rem; resize:vertical }
    #fg-demo .fg-form .fg-foot { margin:.125rem -1.125rem -1rem; justify-content:flex-end }
    #fg-demo .fg-amount { font-variant-numeric:tabular-nums }
    @media (max-width:48rem) {
      #fg-demo .fg-pair { grid-template-columns:minmax(0,1fr) }
    }
    @media (max-width:30rem) {
      #fg-demo .fg-form .fg-two { grid-template-columns:minmax(0,1fr) }
    }
  </style>

  <!-- Main: an email composer, checked live while typing and on Send -->
  <section class="fg-card" aria-labelledby="fg-mail-title">
    <div class="fg-bar">
      <div>
        <h3 id="fg-mail-title">New message</h3>
        <p>Tallypoint · Customer Success</p>
      </div>
      <span class="mv-badge" data-variant="secondary">Draft saved 10:41 AM</span>
    </div>
    <mv-forgot id="fg-composer" live remember="demo-composer" max-recipients="12">
      <form id="fg-mail" aria-labelledby="fg-mail-title">
        <div class="fg-row">
          <label for="fg-to">To</label>
          <input id="fg-to" name="to" data-forgot="recipients" value="[email protected], [email protected]" autocomplete="off" spellcheck="false">
        </div>
        <div class="fg-row">
          <label for="fg-subject">Subject</label>
          <input id="fg-subject" name="subject" value="Signed SOW and next steps for the Q4 rollout" autocomplete="off">
        </div>
        <label class="mv-sr-only" for="fg-body">Message</label>
        <textarea id="fg-body" class="fg-body" name="body" rows="9">Hi [First name],

Thanks again for the call on Tuesday. I’ve attached the signed statement of work for the Q4 rollout, along with the updated timeline.

You can review the onboarding checklist using the link below, and I’ll send the kickoff agenda by Friday. TODO: confirm the invoicing contact.

Best,
Lena Fischer
Customer Success · Tallypoint</textarea>
        <div class="fg-files" id="fg-files" data-forgot="attachments" data-count="0" aria-label="Attachments"></div>
        <div class="fg-foot">
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="fg-attach" data-forgot-attach>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20.5 11.5-8.3 8.3a5.3 5.3 0 0 1-7.5-7.5l8.3-8.3a3.5 3.5 0 0 1 5 5l-8.3 8.3a1.8 1.8 0 0 1-2.5-2.5l7.6-7.6"/></svg>
            Attach
          </button>
          <span class="fg-grow"></span>
          <button type="submit" class="mv-button" data-variant="ghost" data-size="sm" data-forgot-skip>Save draft</button>
          <button type="submit" class="mv-button" data-size="sm" id="fg-send">
            Send
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12 20 4l-4 16-4-7z"/><path d="m12 13 8-9"/></svg>
          </button>
        </div>
      </form>
    </mv-forgot>
    <div class="fg-controls">
      <p class="fg-log" id="fg-log" aria-live="off">Checked live: the glow next to Send says something may be missing.</p>
      <span class="fg-actions">
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="fg-live" checked>
          <span class="mv-choice-text"><span class="mv-choice-title">Live check</span></span>
        </label>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="fg-unmute">Forget muted rules</button>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="fg-reset">Reset example</button>
      </span>
    </div>
  </section>

  <div class="fg-pair">
    <!-- Variant: checked only when submitting, with a custom rule and its own verb -->
    <section class="fg-card" aria-labelledby="fg-meet-title">
      <div class="fg-bar">
        <div>
          <h3 id="fg-meet-title">New meeting</h3>
          <p>Checked when you press Schedule</p>
        </div>
      </div>
      <mv-forgot id="fg-meeting" verb="schedule" builtins="date, placeholder">
        <form class="fg-form" id="fg-meet" aria-labelledby="fg-meet-title">
          <div class="mv-field">
            <label class="mv-label" for="fg-m-title">Title</label>
            <input class="mv-input" id="fg-m-title" name="title" value="Q4 rollout walkthrough" required data-forgot-scan>
          </div>
          <div class="fg-two">
            <div class="mv-field">
              <label class="mv-label" for="fg-m-when">Date and time</label>
              <input class="mv-input" id="fg-m-when" name="when" type="datetime-local" data-forgot="date">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="fg-m-where">Video link</label>
              <input class="mv-input" id="fg-m-where" name="location" type="url" placeholder="https://" autocomplete="off">
            </div>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="fg-m-desc">Description</label>
            <textarea class="mv-textarea" id="fg-m-desc" name="description" rows="3">Let’s meet tomorrow at 3 pm to walk through the Q4 rollout plan with the Acme team. We’ll join online and share the timeline on screen.</textarea>
          </div>
          <div class="fg-foot">
            <button type="submit" class="mv-button" data-size="sm">Schedule</button>
          </div>
        </form>
      </mv-forgot>
    </section>

    <!-- Variant: live, only the placeholder and past-date rules -->
    <section class="fg-card" aria-labelledby="fg-inv-title">
      <div class="fg-bar">
        <div>
          <h3 id="fg-inv-title">Invoice INV-2048</h3>
          <p>Acme Trading · <span class="fg-amount">$17,400.00</span></p>
        </div>
      </div>
      <mv-forgot id="fg-invoice" live builtins="placeholder, past-date">
        <form class="fg-form" id="fg-inv" aria-labelledby="fg-inv-title">
          <div class="fg-two">
            <div class="mv-field">
              <label class="mv-label" for="fg-i-to">Bill to</label>
              <input class="mv-input" id="fg-i-to" name="client" value="[email protected]" autocomplete="off">
            </div>
            <div class="mv-field">
              <label class="mv-label" for="fg-i-due">Due date</label>
              <input class="mv-input" id="fg-i-due" name="due" type="date" data-forgot="due">
            </div>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="fg-i-note">Message</label>
            <textarea class="mv-textarea" id="fg-i-note" name="note" rows="3">Hi {{client_first_name}}, here is invoice INV-2048 for the Q4 rollout ($17,400.00). Thank you for your business!</textarea>
          </div>
          <div class="fg-foot">
            <button type="submit" class="mv-button" data-size="sm">Send invoice</button>
          </div>
        </form>
      </mv-forgot>
    </section>
  </div>

  <script type="module">
    const composer = document.getElementById("fg-composer");
    const mail = document.getElementById("fg-mail");
    const files = document.getElementById("fg-files");
    const log = document.getElementById("fg-log");
    const meeting = document.getElementById("fg-meeting");
    const invoice = document.getElementById("fg-invoice");
    const time = () => new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
    const say = (text) => { log.textContent = `${time()} · ${text}`; };

    // A simulated uploader: one click attaches the signed PDF.
    const clip = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z"/><path d="M14 3.5v5h5"/></svg>';
    const sync = () => {
      files.dataset.count = String(files.children.length);
      files.dispatchEvent(new Event("change", { bubbles: true }));
    };
    document.getElementById("fg-attach").addEventListener("click", () => {
      if (files.children.length) return;
      const chip = document.createElement("span");
      chip.className = "fg-file";
      chip.innerHTML = `${clip}<span>SOW-Acme-signed.pdf</span><small>284 KB</small>`;
      const remove = document.createElement("button");
      remove.type = "button";
      remove.setAttribute("aria-label", "Remove SOW-Acme-signed.pdf");
      remove.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
      remove.addEventListener("click", () => { chip.remove(); sync(); });
      chip.append(remove);
      files.append(chip);
      sync();
    });

    // What the app sees.
    composer.addEventListener("mv-forgot", (e) => {
      const ids = e.detail.findings.map((f) => f.id).join(", ");
      say(e.detail.trigger === "submit" ? `Send held: ${ids}.` : `Checked: ${ids}.`);
    });
    composer.addEventListener("mv-send-anyway", (e) => say(`Sent anyway despite ${e.detail.findings.length} reminder${e.detail.findings.length === 1 ? "" : "s"}.`));
    composer.addEventListener("mv-mute", (e) => say(`Won’t remind about “${e.detail.id}” again (saved in this browser).`));
    mail.addEventListener("submit", (e) => {
      e.preventDefault();
      if (e.submitter?.hasAttribute("data-forgot-skip")) { say("Draft saved, no check needed."); return; }
      say("Message sent to 2 recipients.");
    });
    document.getElementById("fg-live").addEventListener("change", (e) => { composer.live = e.target.checked; });
    document.getElementById("fg-unmute").addEventListener("click", () => { composer.unmute(); say("Muted rules forgotten: every reminder is back."); });
    document.getElementById("fg-reset").addEventListener("click", () => {
      mail.reset();
      files.replaceChildren();
      sync();
      say("Example restored.");
    });

    // A custom rule: the invite says people join online, but there is no video link.
    meeting.rules = [{
      id: "video-link",
      icon: "video",
      pattern: /\b(?:join(?:ing)? online|video call|meet online|remotely)\b/i,
      condition: (state) => !String(state.get("location")).trim(),
      message: "The description says “{match}”, but there’s no video link.",
      fix: {
        label: "Create a video link",
        run: (ctx) => {
          const field = ctx.state.field("location");
          field.value = "https://meet.example.com/q4-rollout-8fk2";
          field.dispatchEvent(new Event("input", { bubbles: true }));
        },
      },
    }];
    document.getElementById("fg-meet").addEventListener("submit", (e) => { e.preventDefault(); say("Meeting scheduled."); });
    document.getElementById("fg-inv").addEventListener("submit", (e) => { e.preventDefault(); say("Invoice INV-2048 sent."); });

    // The invoice due date is nine days ago, whatever today is.
    const due = document.getElementById("fg-i-due");
    const past = new Date(Date.now() - 9 * 864e5);
    due.value = due.defaultValue = `${past.getFullYear()}-${String(past.getMonth() + 1).padStart(2, "0")}-${String(past.getDate()).padStart(2, "0")}`;
    due.dispatchEvent(new Event("change", { bubbles: true }));

    // Show the mechanic right away: what the composer would say on Send.
    customElements.whenDefined("mv-forgot").then(() => requestAnimationFrame(() => composer.check()));
  </script>
</div>