Posting As <mv-posting-as>

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

<mv-posting-as verb="Reply">
  <data data-identity="priya" data-kind="work" data-handle="[email protected]">Priya Natarajan</data>
  <data data-identity="support" data-kind="shared" data-handle="[email protected]">Acme Support</data>
  <textarea aria-label="Reply text"></textarea>
</mv-posting-as>

<div id="pa-demo" style="width:min(100%,58rem);margin-inline:auto">
  <style>
    #pa-demo { display:grid; gap:1.25rem; align-content:start }
    #pa-demo .pa-app { display:grid; gap:.875rem; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #pa-demo .pa-top { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
    #pa-demo .pa-title { display:grid; gap:.125rem; flex:1 1 16rem; min-width:0 }
    #pa-demo .pa-title strong { font-size:.9375rem; letter-spacing:-.01em }
    #pa-demo .pa-title span { color:var(--mv-fg-muted); font-size:.8125rem }
    #pa-demo .pa-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap:1.25rem; align-items:start }
    #pa-demo .pa-controls { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap }
    #pa-demo .pa-log { margin:0; min-height:1.25rem; color:var(--mv-fg-muted); font:.75rem/1.4 var(--mv-font-mono); flex:1 1 18rem }
    #pa-demo .pa-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #pa-demo .mv-choice { font-size:.8125rem }
    #pa-demo .pa-threads { display:flex; gap:.375rem; flex-wrap:wrap }
    #pa-demo .pa-thread[aria-pressed="true"] { background:var(--mv-bg-emphasis); border-color:var(--mv-border-strong) }
    #pa-demo .pa-quote { margin:0; padding:.625rem .75rem; border-left:3px solid var(--mv-border-strong); border-radius:var(--mv-radius-sm); background:var(--mv-surface); color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5 }
    #pa-demo .pa-quote b { color:var(--mv-fg); font-weight:600 }
    #pa-demo input[data-posting-as-field] { min-height:0; padding-block:.875rem }
  </style>

  <!-- 1 · Social publishing: a personal-sounding draft on the brand account -->
  <section class="pa-app" aria-label="Social publishing">
    <div class="pa-top">
      <span class="pa-title">
        <strong>Launch week queue</strong>
        <span>Three accounts share this composer. The draft below reads like Maya, but it’s about to go out as the brand.</span>
      </span>
      <span class="mv-badge" data-variant="secondary">4 scheduled</span>
    </div>

    <mv-posting-as id="pa-social" value="acme" verb="Post">
      <data data-identity="acme" data-kind="brand" data-handle="@AcmeCorp" data-markers="#AcmeLaunch, our customers, our team, we’re hiring" data-last-self="2026-06-18" data-last-others="0">Acme Corp</data>
      <data data-identity="maya" data-kind="personal" data-handle="@mayachen" data-markers="#weekendvibes, #trailrunning, my kid">Maya Chen</data>
      <data data-identity="help" data-kind="shared" data-handle="@AcmeHelp" data-markers="#AcmeStatus, ticket" data-last-self="2026-02-09" data-last-others="12">Acme Support</data>
      <span slot="context">Scheduled for Oct 7, 9:00 AM</span>
      <textarea data-posting-as-field aria-label="Post text" rows="3" placeholder="Write a post…">Finally ran my first trail half marathon this morning, legs are toast lol #trailrunning #weekendvibes</textarea>
      <button slot="actions" type="button" class="mv-button" data-variant="ghost" data-size="icon" aria-label="Add image"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m21 16-5-5-9 9"/></svg></button>
      <button slot="actions" type="button" class="mv-button" data-variant="ghost" data-size="icon" aria-label="Add link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></button>
    </mv-posting-as>

    <div class="pa-controls">
      <p class="pa-log" id="pa-log" aria-live="polite">Brand draft loaded.</p>
      <span class="pa-actions">
        <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="pa-hold"> Hold to post on high-stakes accounts</label>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="pa-reset">Reset draft</button>
      </span>
    </div>
  </section>

  <div class="pa-row">
    <!-- 2 · Shared inbox: the identity is remembered per thread -->
    <section class="pa-app" aria-label="Support inbox">
      <div class="pa-top">
        <span class="pa-title">
          <strong>Support inbox</strong>
          <span>Each thread remembers who you reply as.</span>
        </span>
        <span class="pa-threads" role="group" aria-label="Thread">
          <button type="button" class="mv-button pa-thread" data-variant="outline" data-size="sm" data-thread="2231" aria-pressed="true">#2231</button>
          <button type="button" class="mv-button pa-thread" data-variant="outline" data-size="sm" data-thread="2232" aria-pressed="false">#2232</button>
        </span>
      </div>
      <p class="pa-quote" id="pa-quote"><b>Lucía Fernández</b> · Refund for order 88213 hasn’t shown up on my card yet. Can you check?</p>
      <mv-posting-as id="pa-inbox" verb="Reply" noun="reply">
        <data data-identity="priya" data-kind="work" data-kind-label="You" data-handle="[email protected]" data-last-self="2026-09-23">Priya Natarajan</data>
        <data data-identity="support" data-kind="shared" data-handle="[email protected]" data-last-self="2026-08-12" data-last-others="14">Acme Support</data>
        <textarea data-posting-as-field aria-label="Reply text" rows="2" placeholder="Write a reply…">Hi Lucía, the refund was issued on Sep 21 and usually takes 3 to 5 business days to appear.</textarea>
      </mv-posting-as>
    </section>

    <!-- 3 · Production deploy: hold to act as the high-stakes identity -->
    <section class="pa-app" aria-label="Deploy">
      <div class="pa-top">
        <span class="pa-title">
          <strong>Release v2.14.0</strong>
          <span>Production needs a deliberate hold; staging deploys on click.</span>
        </span>
      </div>
      <mv-posting-as id="pa-deploy" value="prod" verb="Deploy" noun="deploy" confirm="hold" hold="1.2s" guards="">
        <data data-identity="prod" data-kind="production" data-handle="acme-prod" data-initials="P">Production · us-east-1</data>
        <data data-identity="staging" data-kind="staging" data-kind-label="Staging" data-pattern="dots" data-tint="var(--mv-info)" data-handle="acme-staging" data-initials="S">Staging · us-east-1</data>
        <input data-posting-as-field type="text" aria-label="Release note" value="Checkout: retry declined cards once before failing">
      </mv-posting-as>
    </section>
  </div>

  <script type="module">
    const root = document.getElementById("pa-demo");
    const social = document.getElementById("pa-social");
    const inbox = document.getElementById("pa-inbox");
    const deploy = document.getElementById("pa-deploy");
    const log = document.getElementById("pa-log");
    const say = (text) => { log.textContent = text; };
    const DRAFT = "Finally ran my first trail half marathon this morning, legs are toast lol #trailrunning #weekendvibes";

    social.addEventListener("mv-identity-mismatch", (e) => say(`mv-identity-mismatch · ${e.detail.rule}: ${e.detail.title}`));
    social.addEventListener("mv-identity-change", (e) => say(`mv-identity-change · ${e.detail.previous?.handle} → ${e.detail.identity.handle} (${e.detail.reason}), draft kept`));
    social.addEventListener("mv-act", (e) => {
      say(`mv-act · publishing as ${e.detail.identity.handle}…`);
      // A fake publishing endpoint: 500 ms round trip.
      e.detail.waitUntil(new Promise((resolve) => setTimeout(resolve, 500)));
    });
    social.addEventListener("mv-undo", (e) => say(`mv-undo · post by ${e.detail.identity.handle} retracted`));
    social.addEventListener("mv-commit", (e) => say(`mv-commit · post by ${e.detail.identity.handle} is final`));

    const hold = document.getElementById("pa-hold");
    hold.addEventListener("change", () => { social.confirm = hold.checked ? "hold" : "step"; });
    document.getElementById("pa-reset").addEventListener("click", () => {
      social.value = "acme";
      const field = social.querySelector("[data-posting-as-field]");
      // Emptying the field first starts a fresh draft: dismissed warnings can show again.
      field.value = "";
      field.dispatchEvent(new Event("input", { bubbles: true }));
      field.value = DRAFT;
      field.dispatchEvent(new Event("input", { bubbles: true }));
      say("Brand draft loaded.");
    });

    // Inbox: one draft and one remembered identity per thread.
    const threads = {
      2231: { quote: ["Lucía Fernández", "Refund for order 88213 hasn’t shown up on my card yet. Can you check?"], draft: "Hi Lucía, the refund was issued on Sep 21 and usually takes 3 to 5 business days to appear.", as: "support" },
      2232: { quote: ["Kenji Watanabe", "Thanks for the quick call earlier, can you send me the deck you mentioned?"], draft: "Hi Kenji, great talking to you! Here’s the deck from our call.", as: "priya" },
    };
    try { for (const [id, t] of Object.entries(threads)) localStorage.setItem(`mv-posting-as:demo-inbox-${id}`, t.as); } catch {}
    const inboxField = inbox.querySelector("[data-posting-as-field]");
    const quote = document.getElementById("pa-quote");
    const openThread = (id) => {
      const t = threads[id];
      quote.replaceChildren(Object.assign(document.createElement("b"), { textContent: t.quote[0] }), ` · ${t.quote[1]}`);
      inboxField.value = t.draft;
      inbox.remember = `demo-inbox-${id}`;
      inboxField.dispatchEvent(new Event("input", { bubbles: true }));
      for (const b of root.querySelectorAll(".pa-thread")) b.setAttribute("aria-pressed", String(b.dataset.thread === id));
    };
    let current = "2231";
    inboxField.addEventListener("input", () => { threads[current].draft = inboxField.value; });
    for (const b of root.querySelectorAll(".pa-thread")) b.addEventListener("click", () => { current = b.dataset.thread; openThread(current); });
    customElements.whenDefined("mv-posting-as").then(() => openThread(current));

    deploy.addEventListener("mv-act", (e) => e.detail.waitUntil(new Promise((resolve) => setTimeout(resolve, 700))));
    deploy.addEventListener("mv-commit", () => {
      const f = deploy.querySelector("[data-posting-as-field]");
      if (!f.value) f.value = "Checkout: retry declined cards once before failing";
      f.dispatchEvent(new Event("input", { bubbles: true }));
    });
  </script>
</div>