Whereabouts — <mv-whereabouts>

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

<div id="wa-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #wa-demo { display:grid; grid-template-columns:minmax(0,1fr) 18rem; gap:1rem; align-items:start }
    #wa-demo .wa-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) }
    #wa-demo .wa-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.875rem 1rem .75rem 1.125rem; border-bottom:1px solid var(--mv-border) }
    #wa-demo .wa-title { display:grid; gap:.125rem; min-width:0 }
    #wa-demo .wa-title strong { font-size:.9375rem; letter-spacing:-.01em }
    #wa-demo .wa-title span { color:var(--mv-fg-muted); font-size:.75rem }
    #wa-demo .wa-body { padding:1.25rem 1rem 1rem }
    #wa-demo .wa-foot { display:flex; align-items:center; justify-content:space-between; gap:.625rem 1rem; flex-wrap:wrap; padding:.75rem 1rem .75rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle); border-radius:0 0 var(--mv-radius-xl) var(--mv-radius-xl) }
    #wa-demo .wa-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #wa-demo .wa-live { display:inline-flex; align-items:center; gap:.5rem; color:var(--mv-fg-muted); font-size:.8125rem; cursor:pointer }
    #wa-demo .wa-log { min-height:1.1rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 14rem; min-width:0 }
    #wa-demo .wa-side .wa-body { padding:.5rem .5rem .75rem }
    #wa-demo .wa-side .wa-head { padding:.75rem .875rem .625rem }
    @media (max-width:52rem) { #wa-demo { grid-template-columns:minmax(0,1fr) } }
  </style>

  <!-- Main board: the dial -->
  <section class="wa-card" aria-labelledby="wa-main-title">
    <header class="wa-head">
      <span class="wa-title">
        <strong id="wa-main-title">Platform team</strong>
        <span>12 people · 9 time zones · click a state to filter</span>
      </span>
      <mv-segmented id="wa-layout" value="auto" aria-label="Layout" data-size="sm">
        <button value="auto">Auto</button>
        <button value="dial">Dial</button>
        <button value="list">List</button>
      </mv-segmented>
    </header>
    <div class="wa-body">
      <mv-whereabouts id="wa-main" label="Platform team whereabouts"></mv-whereabouts>
    </div>
    <footer class="wa-foot">
      <span class="wa-actions">
        <button type="button" class="mv-button" data-size="sm" id="wa-standup">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8.5" r="3"/><path d="M3.5 19.5a5.5 5.5 0 0 1 11 0"/><path d="M15.5 5.8a3 3 0 0 1 0 5.4"/><path d="M17.5 14.2a5.5 5.5 0 0 1 3 5.3"/></svg>
          Start standup
        </button>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="wa-shuffle">Simulate an update</button>
        <label class="wa-live"><input type="checkbox" role="switch" class="mv-switch" id="wa-auto"> Live updates</label>
      </span>
      <p class="wa-log" id="wa-log" aria-hidden="true">Ben’s 1:1 ends in a few seconds…</p>
    </footer>
  </section>

  <!-- Same data in a narrow sidebar: switches to the list layout by itself -->
  <aside class="wa-card wa-side" aria-labelledby="wa-side-title">
    <header class="wa-head">
      <span class="wa-title">
        <strong id="wa-side-title">Who’s around</strong>
        <span>Same data, sidebar width</span>
      </span>
    </header>
    <div class="wa-body">
      <mv-whereabouts id="wa-side" label="Who’s around" quiet></mv-whereabouts>
    </div>
  </aside>

  <script type="module">
    const main = document.getElementById("wa-main");
    const side = document.getElementById("wa-side");
    const log = document.getElementById("wa-log");
    const boards = [main, side];
    const now = Date.now();
    const min = 60_000;
    const at = (m) => new Date(now + m * min);
    const tomorrowAt = (h, m = 0) => { const d = new Date(now + 864e5); d.setHours(h, m, 0, 0); return d; };

    const states = [
      ...main.constructor.defaultStates,
      { id: "pairing", label: "Pairing", icon: "link", tone: "light-dark(oklch(0.56 0.16 330), oklch(0.74 0.14 330))" },
    ];
    const people = [
      { id: "ben", name: "Ben Carter", state: "meeting", since: at(-26), until: new Date(now + 9_000), then: "available", note: "Customer call", timeZone: "America/New_York" },
      { id: "priya", name: "Priya Raman", state: "focus", since: at(-35), until: at(55), timeZone: "Asia/Kolkata" },
      { id: "mateo", name: "Mateo Rossi", state: "meeting", since: at(-20), until: at(25), note: "Sprint planning", timeZone: "Europe/Rome" },
      { id: "aiko", name: "Aiko Tanaka", state: "ooo", since: at(-60 * 26), until: tomorrowAt(9), then: "available", note: "Back tomorrow", timeZone: "Asia/Tokyo" },
      { id: "lucas", name: "Lucas Oliveira", state: "available", since: at(-12), timeZone: "America/Sao_Paulo" },
      { id: "amara", name: "Amara Okafor", state: "available", since: at(-48), timeZone: "Africa/Lagos" },
      { id: "jonas", name: "Jonas Weber", state: "commuting", since: at(-14), until: at(20), then: "available", timeZone: "Europe/Berlin" },
      { id: "sofia", name: "Sofía Hernández", state: "on-call", since: at(-180), until: tomorrowAt(9), note: "Primary for payments", timeZone: "America/Mexico_City" },
      { id: "noah", name: "Noah Kim", state: "pairing", since: at(-30), until: at(30), note: "With Elena on the billing migration", timeZone: "America/Los_Angeles" },
      { id: "elena", name: "Elena Petrova", state: "pairing", since: at(-30), until: at(30), note: "With Noah on the billing migration", timeZone: "Europe/Sofia" },
      { id: "omar", name: "Omar Haddad", state: "away", since: at(-9), until: at(15), then: "available", note: "Lunch", timeZone: "Asia/Dubai" },
      { id: "chloe", name: "Chloé Martin", state: "focus", since: at(-70), until: at(40), timeZone: "Europe/Paris" },
    ];
    for (const b of boards) { b.states = states; b.people = people; }

    const time = (d) => d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
    const apply = (id, state, opts) => boards.every((b) => b.set(id, state, opts));

    main.addEventListener("mv-state-change", (e) => {
      const { person, to, until, source } = e.detail;
      const label = states.find((s) => s.id === to)?.label ?? to;
      log.textContent = `${time(new Date())} · ${person.name} → ${label}${until ? ` until ${time(until)}` : ""}${source === "schedule" ? " (scheduled)" : ""}`;
    });
    main.addEventListener("mv-filter", (e) => {
      log.textContent = e.detail.state ? `Filter: ${states.find((s) => s.id === e.detail.state)?.label}` : "Filter cleared";
    });

    document.getElementById("wa-layout").addEventListener("mv-change", (e) => { main.layout = e.detail.value; });

    document.getElementById("wa-standup").addEventListener("click", () => {
      const until = new Date(Date.now() + 15 * min);
      for (const p of main.people) {
        if (["available", "focus"].includes(p.state)) apply(p.id, "meeting", { until, then: p.state, note: "Daily standup" });
      }
    });

    const moves = [
      ["focus", 45, "available"], ["meeting", 30, "available"], ["available"], ["away", 10, "available"],
      ["commuting", 25, "available"], ["on-call", 240], ["pairing", 60, "focus"],
    ];
    const shuffle = () => {
      const list = main.people.filter((p) => p.state !== "ooo");
      const p = list[Math.floor(Math.random() * list.length)];
      const options = moves.filter(([s]) => s !== p.state);
      const [state, mins, then] = options[Math.floor(Math.random() * options.length)];
      apply(p.id, state, mins ? { until: new Date(Date.now() + mins * min), then } : {});
    };
    document.getElementById("wa-shuffle").addEventListener("click", shuffle);

    let timer = 0;
    document.getElementById("wa-auto").addEventListener("change", (e) => {
      clearInterval(timer);
      if (e.target.checked) { shuffle(); timer = setInterval(() => { if (!main.isConnected) clearInterval(timer); else shuffle(); }, 4000); }
    });
  </script>
</div>