app/static/component.html

<div class="mat-app">
  <aside class="sidebar">
    <div class="identity">
      <label>Contributor ID <input data-id="handle" placeholder="GitHub handle or alias" maxlength="39"></label>
      <button data-id="set-handle" title="Keyboard: P">Start (p)</button>
    </div>
    <input data-id="filter" placeholder="filter by PDF, figure, or key…">
    <div class="filters">
      <label><input type="checkbox" data-id="pending-only"> pending only</label>
      <select data-id="prediction-filter">
        <option value="">all predictions</option><option value="map">predicted map</option>
        <option value="not_map">predicted not-map</option><option value="none">no prediction</option>
      </select>
      <select data-id="queue-order">
        <option value="figure">figure order</option><option value="margin-desc">highest MapPool margin</option>
        <option value="margin-asc">lowest MapPool margin</option>
      </select>
    </div>
    <div data-id="counts" class="counts"></div>
    <div class="badge-legend"><span>✓ complete</span><span>! action needed</span><span>◇ unverified AI</span></div>
    <a data-id="repository" class="repository" target="_blank" rel="noopener" hidden>Open GitHub repository ↗</a>
    <div data-id="list" class="figure-list"></div>
  </aside>

  <main class="main">
    <div class="toolbar">
      <div class="figure-summary">
        <b data-id="title">← pick a figure</b>
        <span data-id="figmeta" class="meta"></span>
        <span class="spacer"></span>
        <span data-id="status" class="status"></span>
      </div>

      <div class="workflow">
        <section class="step-panel review-step">
          <div class="step-title"><span class="step-number">1</span> Map review
            <span data-id="prediction" class="prediction"></span>
            <span data-id="review-state" class="state-note"></span>
          </div>
          <div class="step-controls">
            <button data-id="map" class="state-button" title="Keyboard: M">Map (m)</button>
            <button data-id="not-map" class="state-button" title="Keyboard: X">Not a map (x)</button>
            <button data-id="unsure" class="state-button" title="Keyboard: U">Unsure (u)</button>
          </div>
        </section>

        <section class="step-panel type-step">
          <div class="step-title"><span class="step-number">2</span> Map type
            <span data-id="type-state" class="state-note"></span>
          </div>
          <div data-id="types" class="types"></div>
        </section>

        <section class="step-panel georef-step">
          <div class="step-title"><span class="step-number">3</span> Georeference
            <span data-id="georef-state" class="state-note"></span>
          </div>
          <div class="step-controls">
            <button data-id="hard" class="state-button" title="Keyboard: H">Cannot georeference (h)</button>
            <label>overlay <input type="range" data-id="opacity" min="0" max="1" step="0.05" value="0.5"></label>
            <button data-id="clear" title="Keyboard: C">Clear GCPs (c)</button>
            <button data-id="remove" title="Keyboard: R">Remove georeference (r)</button>
            <button data-id="reset" title="Keyboard: D">Discard draft (d)</button>
            <button data-id="save" class="primary state-button" title="Keyboard: S" disabled>Save georef (s)</button>
          </div>
        </section>

        <div class="toolbar-actions">
          <button data-id="next" title="Keyboard: N">Next pending (n)</button>
          <button data-id="export" title="Keyboard: E">Export (e)</button>
          <button data-id="backup" title="Keyboard: B">Backup (b)</button>
          <button data-id="reset-all" title="Keyboard: A">Reset all (a)</button>
          <label class="import" title="Keyboard: I">Import (i)<input type="file" data-id="import" accept="application/json,.json"></label>
        </div>
      </div>
    </div>

    <div class="maps">
      <div><div data-id="left-map" class="map"></div><div class="maplabel">Figure — click a feature</div></div>
      <div class="splitbar"></div>
      <div><div data-id="right-map" class="map"></div><div class="maplabel">Map — click the same place</div></div>
    </div>

    <div class="gcp-panel">
      <div class="table-wrap">
        <table><thead><tr><th>#</th><th>px x</th><th>px y</th><th>lon</th><th>lat</th><th></th></tr></thead>
        <tbody data-id="gcp-rows"></tbody></table>
      </div>
      <div class="hint">
        <b>bbox</b> <span data-id="bbox">—</span><br><span data-id="km" class="muted"></span>
        <hr>Click the same recognizable point in both panels. Two points preview an
        axis-aligned fit; saving a new or edited georeference requires at least three
        well-spread points. Browser drafts are private until exported.
      </div>
    </div>
  </main>
</div>