Import maps — interactive resolver

<div class="pg">
    <h1 class="pg-title">🎮 Import map resolver</h1>
    <p class="pg-sub">
      Edit the <code>&lt;script type="importmap"&gt;</code> JSON below, then ask the browser to resolve a bare
      specifier like <code>lodash-es/debounce</code>. Watch which rule fires — an exact match, a prefix match,
      or a scope override — the same three rules a real browser uses.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The import map</div>
      <textarea class="map-editor" id="mapJson" spellcheck="false"></textarea>
      <div class="presets" style="margin-top:10px">
        <button class="btn sm" data-preset="exact">Exact mapping (no slash)</button>
        <button class="btn sm" data-preset="prefix">Prefix mapping (subpaths)</button>
        <button class="btn sm" data-preset="scopes">Scopes override</button>
      </div>
      <div class="status" id="mapStatus" style="margin-top:10px">
        <span class="dot info" id="mapDot"></span><span id="mapStatusText">Map applied.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Resolve a specifier</div>
      <div class="row">
        <div class="field">
          <label class="ctl-label" for="specifier">Module specifier (what a file writes in <code>import … from "…"</code>)</label>
          <input type="text" id="specifier" value="lodash-es/debounce" />
        </div>
      </div>
      <div class="row">
        <div class="field">
          <label class="ctl-label">Which file is doing the importing? (matters for scopes)</label>
          <div class="seg" id="referrerSeg">
            <button aria-pressed="true" data-referrer="/app.js">/app.js</button>
            <button aria-pressed="false" data-referrer="/admin/panel.js">/admin/panel.js</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="resolveBtn">Resolve →</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What the browser does</div>
      <div class="status" id="status">
        <span class="dot info" id="dot"></span><span id="statusText">Click "Resolve →" to see what URL this specifier resolves to.</span>
      </div>
      <div class="output" id="output" style="margin-top:10px; display:none;">
        <div class="code resolved-url" id="resolvedUrl"></div>
      </div>
      <p class="hint" id="hint">Try switching the referrer to <code>/admin/panel.js</code> after loading the "Scopes override" preset — the same specifier resolves to a different version.</p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.