Env Marker <mv-env-marker>

node scripts/add.mjs env-marker --out ./src/marvelous

<mv-env-marker env="staging" build="2026.09.22-3" commit="8f3c2a1"></mv-env-marker>

<div id="em-demo" style="width:min(100%,56rem);margin-inline:auto">
  <style>
    #em-demo { display:grid; gap:1rem; align-content:start }
    #em-demo .em-app { position:relative; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #em-demo .em-url { display:flex; align-items:center; gap:.5rem; height:2.25rem; padding:0 .875rem; border-bottom:1px solid var(--mv-border); background:var(--mv-bg-subtle); color:var(--mv-fg-muted); font:.75rem/1 var(--mv-font-mono) }
    #em-demo .em-url svg { width:.8125rem; height:.8125rem; flex:none; color:var(--mv-fg-subtle) }
    #em-demo .em-url span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #em-demo .em-bar { display:flex; align-items:center; gap:1rem; height:3.5rem; padding:0 1rem 0 1.125rem; border-bottom:1px solid var(--mv-border) }
    #em-demo .em-brand { display:flex; align-items:center; gap:.5rem; font-weight:650; font-size:.9375rem; letter-spacing:-.01em }
    #em-demo .em-logo { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:var(--mv-radius-md); background:var(--mv-fg); color:var(--mv-bg) }
    #em-demo .em-logo svg { width:1rem; height:1rem }
    #em-demo .em-nav { display:flex; gap:.25rem; margin:0; padding:0; list-style:none }
    #em-demo .em-nav a { display:block; padding:.375rem .625rem; border-radius:var(--mv-radius-md); color:var(--mv-fg-muted); font-size:.8125rem; font-weight:500; text-decoration:none }
    #em-demo .em-nav a[aria-current] { background:var(--mv-bg-muted); color:var(--mv-fg) }
    #em-demo .em-end { display:flex; align-items:center; gap:.75rem; margin-inline-start:auto }
    #em-demo .em-me { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--mv-bg-emphasis); color:var(--mv-fg); font-size:.75rem; font-weight:600 }
    #em-demo .em-body { display:grid; grid-template-columns:minmax(0,1fr) 14rem; gap:1rem; padding:1.125rem }
    #em-demo .em-card { min-width:0; padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle) }
    #em-demo .em-card h4 { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:0 0 .25rem; font-size:.875rem }
    #em-demo .em-card p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5 }
    #em-demo .em-rows { display:grid; gap:.5rem; margin-top:.875rem }
    #em-demo .em-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem .625rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-md); background:var(--mv-surface); font-size:.8125rem }
    #em-demo .em-row span:last-child { color:var(--mv-fg-muted); font-variant-numeric:tabular-nums }
    #em-demo .em-side { display:grid; gap:.75rem; align-content:start }
    #em-demo .em-side .mv-button { width:100% }
    #em-demo .em-log { min-height:2.5rem; margin:0; color:var(--mv-fg-subtle); font:.6875rem/1.5 var(--mv-font-mono); overflow-wrap:anywhere }
    #em-demo .em-controls { display:flex; align-items:center; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.875rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface) }
    #em-demo .em-field { display:grid; gap:.375rem }
    #em-demo .em-k { color:var(--mv-fg-muted); font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase }
    #em-demo .em-switches { display:flex; gap:.5rem 1.25rem; flex-wrap:wrap; margin-inline-start:auto }
    #em-demo .mv-choice { font-size:.8125rem }
    #em-demo .em-variants { display:grid; gap:.75rem; padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface) }
    #em-demo .em-variants h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #em-demo .em-variants p { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #em-demo .em-chips { display:flex; align-items:center; gap:.625rem; flex-wrap:wrap }
    @media (max-width:44rem) {
      #em-demo .em-nav { display:none }
      #em-demo .em-url { height:auto; padding:1.125rem .875rem .5rem } /* clear of the frame tab */
      #em-demo .em-body { grid-template-columns:minmax(0,1fr) }
      #em-demo .em-switches { margin-inline-start:0 }
    }
  </style>

  <!-- Main: the same refund screen on four hosts. The marker says which one is real. -->
  <section class="em-app" id="em-app" aria-label="Order console">
    <div class="em-url">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
      <span id="em-url">https://staging.kestrel.example/orders/KS-48213</span>
    </div>
    <header class="em-bar">
      <span class="em-brand">
        <span class="em-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 7l9-4 9 4-9 4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg></span>
        Kestrel
      </span>
      <ul class="em-nav">
        <li><a href="#" aria-current="page">Orders</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Payouts</a></li>
      </ul>
      <span class="em-end">
        <mv-env-marker id="em-main" hostname="staging.kestrel.example" frame="#em-app" settle="always"
          build="2026.09.22-3" commit="8f3c2a1" api="https://api.staging.kestrel.example/v2"
          source="Nightly snapshot, anonymized" since="2026-09-22T16:12:00-07:00">
          <a slot="actions" class="mv-button" data-variant="ghost" data-size="sm" href="#" id="em-goprod">Open production</a>
        </mv-env-marker>
        <span class="em-me" aria-hidden="true">MR</span>
      </span>
    </header>
    <div class="em-body">
      <div class="em-card">
        <h4>Order KS-48213 <span class="mv-badge" data-variant="success" data-shape="pill">Paid</span></h4>
        <p>Aiko Tanaka · Osaka, Japan · paid Sep 21, 2026 with the card ending 4242</p>
        <div class="em-rows">
          <div class="em-row"><span>Linen overshirt, sand (M)</span><span>$148.00</span></div>
          <div class="em-row"><span>Merino crew, charcoal (M) × 2</span><span>$236.00</span></div>
          <div class="em-row"><span>Waxed field jacket (L)</span><span>$856.00</span></div>
        </div>
      </div>
      <div class="em-side">
        <button type="button" class="mv-button" data-variant="destructive" id="em-refund">Refund $1,240.00</button>
        <button type="button" class="mv-button" data-variant="outline">Resend receipt</button>
        <p class="em-log" id="em-log" aria-live="off">Resolved staging from host rule staging.*</p>
      </div>
    </div>
  </section>

  <div class="em-controls">
    <div class="em-field">
      <span class="em-k" id="em-host-label">Simulated host</span>
      <mv-segmented id="em-host" aria-labelledby="em-host-label" value="staging">
        <button value="local">localhost</button>
        <button value="preview">Preview deploy</button>
        <button value="staging">Staging</button>
        <button value="production">Production</button>
      </mv-segmented>
    </div>
    <div class="em-switches">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="em-imp"> Impersonate the customer</label>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="em-frame" checked> Frame the edges</label>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="em-title"> Prefix the tab title</label>
    </div>
  </div>

  <div class="em-variants">
    <h4>Every environment at a glance</h4>
    <div class="em-chips">
      <mv-env-marker env="local" hostname="localhost:3000" build="dev server" api="http://localhost:8787"></mv-env-marker>
      <mv-env-marker env="preview" hostname="checkout-git-tax-rules.preview.kestrel.example" commit="c41d9e2"></mv-env-marker>
      <mv-env-marker env="staging" hostname="staging.kestrel.example" build="2026.09.22-3"></mv-env-marker>
      <mv-env-marker env="sandbox" hostname="sandbox.kestrel.example" source="Test cards only"></mv-env-marker>
      <mv-env-marker env="production" mode="Test mode" tone="warning" hostname="app.kestrel.example" source="Test data, no real charges"></mv-env-marker>
      <mv-env-marker env="production" hostname="app.kestrel.example" settle="always" compact="never" build="2026.09.21-1"></mv-env-marker>
      <mv-env-marker env="production" hostname="app.kestrel.example" settle="always" build="2026.09.21-1"></mv-env-marker>
    </div>
    <p>Anything that is not production keeps pulsing. Production settles once into a solid, still dot, tiny and quiet (last one: compact, the name slides out on hover). Click any of them for the details.</p>
  </div>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const marker = $("em-main");
    const log = $("em-log");
    const ago = (min) => new Date(Date.now() - min * 60_000).toISOString();

    const HOSTS = {
      local: { host: "localhost:5173", build: "dev server", commit: "working tree", api: "http://localhost:8787/v2", source: "Seeded fixtures (42 orders)", since: ago(12) },
      preview: { host: "checkout-git-tax-rules.preview.kestrel.example", build: "Preview #1184", commit: "c41d9e2", api: "https://api.staging.kestrel.example/v2", source: "Staging replica", since: ago(95) },
      staging: { host: "staging.kestrel.example", build: "2026.09.22-3", commit: "8f3c2a1", api: "https://api.staging.kestrel.example/v2", source: "Nightly snapshot, anonymized", since: ago(60 * 19) },
      production: { host: "app.kestrel.example", build: "2026.09.21-1", commit: "7ab03f5", api: "https://api.kestrel.example/v2", source: "Primary database (us-east-1)", since: ago(60 * 42) },
    };

    const apply = (key) => {
      const h = HOSTS[key];
      $("em-url").textContent = `https://${h.host}/orders/KS-48213`;
      marker.hostname = h.host;
      marker.build = h.build;
      marker.commit = h.commit;
      marker.api = h.api;
      marker.source = h.source;
      marker.since = h.since;
      $("em-goprod").hidden = key === "production";
    };

    const showTitle = () => requestAnimationFrame(() => {
      if ($("em-title").checked) log.textContent = `Tab title: ${document.title}`;
    });

    marker.addEventListener("mv-resolve", (e) => {
      const { env, source, rule, real, mode } = e.detail;
      const how = source === "attribute" ? "the env attribute" : source === "rule" ? `host rule ${rule}` : "the fallback (no rule matched)";
      log.textContent = `Resolved ${env}${mode ? ` + ${mode}` : ""} from ${how} · ${real ? "real: the marker settles" : "not real: it pulses"}`;
      showTitle();
    });

    $("em-host").addEventListener("mv-change", (e) => apply(e.detail.value));
    $("em-imp").addEventListener("change", (e) => { marker.mode = e.target.checked ? "Viewing as Aiko Tanaka" : null; });
    $("em-frame").addEventListener("change", (e) => { marker.frame = e.target.checked ? "#em-app" : null; });
    $("em-title").addEventListener("change", (e) => { marker.titlePrefix = e.target.checked ? "" : null; showTitle(); });
    $("em-goprod").addEventListener("click", (e) => {
      e.preventDefault();
      $("em-host").value = "production";
      apply("production");
      marker.toggle(false);
    });
    $("em-refund").addEventListener("click", () => {
      const r = marker.resolved;
      log.textContent = r.production
        ? `Refund of $1,240.00 sent to the card ending 4242. This was real${r.mode ? `, even ${r.mode.toLowerCase()}` : ""}.`
        : `Refund simulated on ${r.label.toLowerCase()}: no money moved.`;
    });
    apply("staging");
  </script>
</div>