@seatlayer/js 0.8.0 → 0.10.0

package/dist/index.js

@@ -57,6 +57,14 @@ var PubApi = class {
       body: { labels, holdId }
     });
   }
+  /** P4 "need more time?": push an active hold's expiry out. Throws ApiError 409
+   *  (reason: expired | extend_limit | not_found | not_active) if it can't. */
+  extend(key, holdId, ttlMs) {
+    return request(this.base, `/pub/events/${encodeURIComponent(key)}/extend`, {
+      method: "POST",
+      body: { holdId, ...ttlMs ? { ttlMs } : {} }
+    });
+  }
   socketUrl(key) {
     const wsBase = this.base.replace(/^http/, "ws");
     return `${wsBase}/pub/events/${encodeURIComponent(key)}/subscribe`;
@@ -386,6 +394,15 @@ import {
 } from "@seatlayer/core";
 var DEFAULT_API_BASE2 = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION2 = 10;
+var EXTEND_PROMPT_MS = 6e4;
+function pointInPolygon(x, y, poly) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const xi = poly[i].x, yi = poly[i].y, xj = poly[j].x, yj = poly[j].y;
+    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
+}
 function resolveContainer3(container) {
   if (typeof container === "string") {
     const el = document.querySelector(container);
@@ -429,12 +446,44 @@ var CSS = `
 .sl-map-host{position:absolute;inset:0}
 .sl-side{width:300px;flex:none;border-left:1px solid var(--sl-line);display:flex;flex-direction:column;min-height:0;overflow-y:auto}
 
-/* narrow (container < 640px): side panel becomes a bottom sheet */
+/* narrow (container < 640px): map-first \u2014 the map claims ~80-85% of the
+   container and the side panel becomes a PEEKING bottom sheet (AXS/Ticketmaster
+   mobile pattern). data-sheet on the root: "peek" (default: grab handle + one
+   summary line) / "open" (\u226450%, swipe up or auto-expand on first selection).
+   Swipe handling lives on the sheet head ONLY \u2014 never the map host, so the
+   map's raw-pointer gesture pipeline is untouched. */
 .sl-picker[data-layout="narrow"] .sl-body{flex-direction:column}
 .sl-picker[data-layout="narrow"] .sl-map{min-height:0;flex:1}
-.sl-picker[data-layout="narrow"] .sl-side{width:100%;max-height:46%;border-left:0;border-top:1px solid var(--sl-line)}
+.sl-picker[data-layout="narrow"] .sl-side{width:100%;border-left:0;border-top:1px solid var(--sl-line);
+  flex:none;height:50%;transition:height .22s ease}
+.sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side{height:86px;overflow:hidden}
+.sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side > :not(.sl-sheet-head){display:none}
 .sl-picker[data-layout="narrow"] .sl-tray{flex:none}
 .sl-picker[data-layout="narrow"] .sl-foot{position:sticky;bottom:0;background:var(--sl-bg)}
+/* touch chrome: pinch-zoom exists \u2014 hide +/\u2212 on the sheet layout (keep fit) */
+.sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zin"],
+.sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zout"]{display:none}
+
+/* bottom-sheet head: grab handle + one-line summary (narrow only) */
+.sl-sheet-head{display:none;flex-direction:column;padding:6px 16px 8px;cursor:grab;touch-action:none;
+  user-select:none;-webkit-user-select:none;flex:none}
+.sl-picker[data-layout="narrow"] .sl-sheet-head{display:flex}
+.sl-sheet-grab{width:36px;height:4px;border-radius:999px;background:var(--sl-muted);opacity:.55;margin:2px auto 7px}
+.sl-sheet-peek{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--sl-text);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:20px}
+.sl-sheet-peek .sub{color:var(--sl-muted);font-weight:600}
+.sl-sheet-peek .go{margin-left:auto;color:var(--sl-accent);font-weight:800;flex:none}
+
+/* consolidated Filters row inside the sheet (a11y chips + colorblind toggle
+   dock here on narrow; they live on the map / zoom column on wide) */
+.sl-filtersec{display:none}
+.sl-filters{display:none;gap:6px;flex-wrap:wrap;align-items:center;padding:2px 16px 10px}
+.sl-picker[data-layout="narrow"] .sl-filtersec.has{display:block}
+.sl-picker[data-layout="narrow"] .sl-filters.has{display:flex}
+.sl-cbbtn{width:32px;height:32px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
+  color:var(--sl-text);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
+.sl-cbbtn:hover{border-color:var(--sl-muted)}
+.sl-cbbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
 /* price panel */
 .sl-sec{padding:14px 16px 4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
@@ -477,19 +526,44 @@ var CSS = `
 .sl-cta:hover{filter:brightness(1.08)}
 .sl-cta:disabled{opacity:.45;cursor:not-allowed}
 
-/* zoom column */
-.sl-zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:5}
+/* Chrome anchor regions (Feature 6) \u2014 every persistent map overlay is APPENDED
+   INTO one of these positioned flex containers and flows/stacks within it, so no
+   two pieces of chrome free-float on top of each other. Regions never overlap:
+   the top strip splits into left/center/right; rails + corners own their edge. */
+.sl-anchor{position:absolute;z-index:5;display:flex;gap:8px;pointer-events:none}
+.sl-anchor > *{pointer-events:auto}
+.sl-anchor[data-region="top-left"]{top:12px;left:12px;flex-wrap:wrap;max-width:38%}
+.sl-anchor[data-region="top-center"]{top:12px;left:50%;transform:translateX(-50%);flex-direction:column;
+  align-items:center;max-width:44%}
+.sl-anchor[data-region="top-right"]{top:12px;right:12px;justify-content:flex-end;flex-wrap:wrap;max-width:38%}
+.sl-anchor[data-region="left-rail"]{top:50%;left:12px;transform:translateY(-50%);flex-direction:column;max-width:42%;gap:6px}
+.sl-anchor[data-region="bottom-left"]{left:12px;bottom:12px;flex-direction:column;align-items:flex-start}
+.sl-anchor[data-region="bottom-center"]{left:50%;bottom:14px;transform:translateX(-50%);z-index:9;
+  flex-direction:column;align-items:center;gap:8px;max-width:92%}
+.sl-anchor[data-region="bottom-right"]{right:12px;bottom:12px;flex-direction:column;align-items:flex-end;gap:6px}
+/* narrow: tighten the top strip so left/center can't crowd each other */
+.sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-left"]{max-width:30%}
+.sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-center"]{max-width:44%}
+
+/* TEST MODE badge \u2014 a small pill in the top-right region (shrinks on narrow) */
+.sl-testbadge{padding:5px 11px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.1em;
+  text-transform:uppercase;white-space:nowrap;background:var(--sl-accent);color:var(--sl-accent-ink);
+  box-shadow:0 2px 8px rgba(0,0,0,.25)}
+.sl-picker[data-layout="narrow"] .sl-testbadge{padding:3px 8px;font-size:8.5px;letter-spacing:.06em}
+
+/* zoom column (flows within the bottom-right region) */
+.sl-zoom{display:flex;flex-direction:column;gap:6px}
 .sl-zoom button{width:36px;height:36px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-zoom button:hover{border-color:var(--sl-muted)}
 .sl-zoom svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
-/* toast + boot states */
-.sl-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(6px);z-index:8;max-width:88%;
+/* toast + boot states (toast flows in the bottom-center region) */
+.sl-toast{transform:translateY(6px);max-width:100%;
   background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);border-radius:999px;padding:9px 16px;
   font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;
   overflow:hidden;text-overflow:ellipsis}
-.sl-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
+.sl-toast.on{opacity:1;transform:translateY(0)}
 .sl-boot{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:10px;background:var(--sl-bg);font-size:13px;font-weight:600;color:var(--sl-muted)}
 .sl-boot-spin{width:24px;height:24px;border-radius:50%;border:3px solid var(--sl-line);border-top-color:var(--sl-accent);
@@ -499,8 +573,32 @@ var CSS = `
 .sl-boot-retry{margin-top:4px;padding:9px 20px;border-radius:var(--sl-r-sm);background:var(--sl-accent);
   color:var(--sl-accent-ink);font-weight:700;font-size:13px}
 
-/* a11y filter chips (over the map, top-left) */
-.sl-chips{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}
+/* "Need more time?" extend prompt (flows in the bottom-center region, above the toast) */
+.sl-extend{transform:translateY(6px);
+  display:none;align-items:center;gap:12px;max-width:100%;background:var(--sl-surface);border:1px solid var(--sl-line);
+  color:var(--sl-text);border-radius:14px;padding:10px 12px 10px 16px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);
+  opacity:0;transition:opacity .2s,transform .2s}
+.sl-extend.on{display:flex;opacity:1;transform:translateY(0)}
+.sl-extend-txt{font-size:12.5px;font-weight:600;line-height:1.35}
+.sl-extend-txt b{font-variant-numeric:tabular-nums}
+.sl-extend-btn{flex:none;padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;
+  background:var(--sl-accent);color:var(--sl-accent-ink);transition:filter .15s,opacity .15s}
+.sl-extend-btn:hover{filter:brightness(1.08)}
+.sl-extend-btn:disabled{opacity:.5;cursor:not-allowed}
+
+/* booked confirmation overlay (covers the widget once the held seats are sold) */
+.sl-booked{position:absolute;inset:0;z-index:11;display:none;flex-direction:column;align-items:center;
+  justify-content:center;gap:12px;text-align:center;padding:28px;background:var(--sl-bg)}
+.sl-booked.on{display:flex}
+.sl-booked-badge{width:60px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center;
+  background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-booked-badge svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-booked-title{font-weight:800;font-size:19px;color:var(--sl-text)}
+.sl-booked-sub{font-size:13px;color:var(--sl-muted);line-height:1.5;max-width:320px}
+.sl-booked-seats{font-weight:700;color:var(--sl-text)}
+
+/* a11y filter chips (flow within the top-left region) */
+.sl-chips{display:flex;gap:6px;flex-wrap:wrap}
 .sl-chip-f{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;
   background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-muted);transition:color .15s,border-color .15s}
 .sl-chip-f:hover{color:var(--sl-text)}
@@ -540,18 +638,18 @@ var CSS = `
 .sl-chip .view:hover{color:var(--sl-text)}
 .sl-chip .view svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
-/* arena: LOD rung pills (top-center over the map) */
-.sl-rungs{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;display:none;
-  background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:999px;padding:3px}
+/* arena: LOD rung pills (flow within the top-center region) */
+.sl-rungs{display:none;background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:999px;padding:3px}
 .sl-rungs.on{display:inline-flex;gap:2px}
 .sl-rungs button{padding:6px 13px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
   color:var(--sl-muted);white-space:nowrap;transition:color .15s}
 .sl-rungs button:hover{color:var(--sl-text)}
 .sl-rungs button.on{background:var(--sl-accent);color:var(--sl-accent-ink)}
+/* narrow: shrink the rung pills so the centered row can't reach the corner regions */
+.sl-picker[data-layout="narrow"] .sl-rungs button{padding:5px 9px;font-size:9px;letter-spacing:.03em}
 
-/* multi-floor switcher (center-left rail over the map) */
-.sl-floors{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:5;display:none;
-  flex-direction:column;gap:6px;max-width:42%}
+/* multi-floor switcher (flows within the left-rail region) */
+.sl-floors{display:none;flex-direction:column;gap:6px;max-width:100%}
 .sl-floors.on{display:flex}
 .sl-floors button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;background:var(--sl-surface);
   border:1px solid var(--sl-line);color:var(--sl-muted);white-space:nowrap;max-width:100%;overflow:hidden;
@@ -559,11 +657,25 @@ var CSS = `
 .sl-floors button:hover{color:var(--sl-text)}
 .sl-floors button.on{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
 
-/* tapped-section summary card (top-center, under the rung pills) */
-.sl-seccard{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:6;width:250px;
-  max-width:calc(100% - 24px);background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:12px;
+/* tapped-section summary card \u2014 docks INSIDE the top-center anchor region on
+   wide (flows below the rung pills, never over them, never floating over the
+   seats at the tap point). Auto-collapses to a slim pill once seat-picking
+   begins (first seat select, or a pan/zoom after the focus glide); tapping the
+   pill re-expands; \u2715 closes in both states. On narrow it renders as a compact
+   strip inside the bottom sheet's peek head \u2014 never over the canvas. */
+.sl-seccard{width:250px;max-width:100%;background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:12px;
   padding:12px 14px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);display:none}
 .sl-seccard.on{display:block}
+/* collapsed pill (wide) */
+.sl-seccard.mini{width:auto;padding:5px 7px 5px 12px;border-radius:999px;cursor:pointer}
+.sl-seccard.mini.on{display:inline-flex;align-items:center;gap:7px}
+.sl-seccard.mini .sl-seccard-name{font-size:12px;flex:none;max-width:120px}
+.sl-seccard.mini .sl-seccard-left{font-size:11px}
+/* narrow: compact strip inside the sheet head (peek area) */
+.sl-seccard.strip{width:100%;padding:7px 0 0;border:0;border-radius:0;box-shadow:none;background:none;cursor:default}
+.sl-seccard.strip.on{display:flex;align-items:center;gap:7px;font-size:12.5px}
+.sl-seccard.strip .sl-seccard-name{font-size:12.5px}
+.sl-seccard.strip .sl-seccard-price{margin-left:auto}
 .sl-seccard-head{display:flex;align-items:center;gap:8px}
 .sl-seccard-dot{width:10px;height:10px;border-radius:50%;flex:none}
 .sl-seccard-name{font-weight:800;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -605,6 +717,20 @@ var CSS = `
   font-size:11.5px;font-weight:600;background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-muted);
   white-space:nowrap;pointer-events:none;max-width:90%;overflow:hidden;text-overflow:ellipsis}
 
+/* F3 minimap \u2014 venue overview + live viewport rect (flows in the bottom-left region) */
+.sl-minimap{border:1px solid var(--sl-line);border-radius:9px;
+  overflow:hidden;background:var(--sl-surface);box-shadow:0 12px 34px -14px rgba(0,0,0,.55);line-height:0;cursor:pointer}
+.sl-minimap canvas{display:block}
+.sl-picker[data-layout="narrow"] .sl-minimap{display:none}
+
+/* F4 price-band filter \u2014 chip row in the side panel, above the price legend it
+ *  dims (keeps clear of the map's top-center rungs / top-left a11y chips). */
+.sl-pricef{display:flex;gap:6px;flex-wrap:wrap;padding:2px 16px 10px}
+.sl-pricef .sl-chip-f{padding:6px 11px;font-size:11.5px}
+/* F4 legend reflection: rows + counts for out-of-band categories read muted */
+.sl-price-row.sl-dim{opacity:.4}
+.sl-seccard-mix-item.sl-dim{opacity:.4}
+
 /* modal host */
 .sl-modal-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(5,7,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
 .sl-modal-frame{width:min(1200px,100%);height:min(820px,100%);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
@@ -640,12 +766,22 @@ var SeatPicker = class _SeatPicker {
     this.destroyed = false;
     // chrome refs
     this.els = {};
+    /** Feature 6 anchor regions — positioned flex containers over the map. */
+    this.regions = {};
     this.ro = null;
     this.holdTimer = null;
     this.toastTimer = null;
     // state
     this.currency = "USD";
     this.hold = null;
+    /** Latest server expiry for the open hold (moves on extend). */
+    this.holdExpiresAt = 0;
+    /** True once we handed off to checkout — arms booked-confirmation detection. */
+    this.handedOff = false;
+    /** Guards single onBooked + single success overlay per hold. */
+    this.bookedShown = false;
+    this.extendEl = null;
+    this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
@@ -662,6 +798,25 @@ var SeatPicker = class _SeatPicker {
     this.viewEl = null;
     this.viewCleanup = null;
     this.allSeatsCache = null;
+    // F3 minimap
+    this.miniEl = null;
+    this.miniCanvas = null;
+    this.miniBase = null;
+    this.miniTf = null;
+    // F4 price-band filter — active band's category keys (null = all prices)
+    this.priceBandKeys = null;
+    this.priceFilterEl = null;
+    /** Last surfaced section summary (re-rendered when the price band changes). */
+    this.lastSection = null;
+    /** Section card collapsed to its slim pill (seat-picking has begun). */
+    this.secCardCollapsed = false;
+    /** When the card was (re)shown — the focus glide's own view change must not collapse it. */
+    this.secCardShownAt = 0;
+    /** Previous tray ticket count — first 0→n transition auto-expands the mobile sheet. */
+    this.lastTrayCount = 0;
+    // narrow-layout chrome that docks into the sheet's Filters row on mobile
+    this.a11yChipsEl = null;
+    this.cbEl = null;
     // modal plumbing (set by open())
     this.modalScrim = null;
     this.prevFocus = null;
@@ -680,13 +835,20 @@ var SeatPicker = class _SeatPicker {
       currency: options.currency,
       flashOnLiveChange: true,
       colorblindSafe: options.colorblindSafe,
-      onSelectionChange: () => this.syncTray(),
+      onSelectionChange: () => {
+        this.syncTray();
+        if (this.controller.getSelection().length) this.collapseSectionCard();
+      },
       onStatusChange: () => {
         this.syncPrices();
         this.evictTakenSelections();
+        this.detectBooked();
+        this.refreshMinimap();
       },
       onHoldExpired: () => {
         this.hold = null;
+        this.handedOff = false;
+        this.bookedShown = false;
         this.stopHoldTimer();
         this.gaQty.clear();
         this.toast(t2("picker.holdExpired", void 0) || "Your hold expired \u2014 seats released. Pick again.");
@@ -700,6 +862,8 @@ var SeatPicker = class _SeatPicker {
       onViewChange: () => {
         this.reanchorConfirm();
         this.syncRung();
+        this.drawMinimapRect();
+        this.sectionCardOnView();
       },
       // Tapped-section glide-in → surface (or clear) the section-summary card.
       onSectionFocus: (summary) => this.showSectionCard(summary),
@@ -779,7 +943,7 @@ var SeatPicker = class _SeatPicker {
       <div class="sl-body">
         <div class="sl-map">
           <div class="sl-map-host" data-ref="map"></div>
-          <div class="sl-zoom">
+          <div class="sl-zoom" data-ref="zoom">
             <button type="button" aria-label="Zoom in" data-ref="zin">+</button>
             <button type="button" aria-label="Zoom out" data-ref="zout">\u2212</button>
             <button type="button" aria-label="Fit to screen" data-ref="zfit">
@@ -789,7 +953,13 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>Loading seat map\u2026</div>
           <div class="sl-toast" data-ref="toast" role="status" aria-live="polite"></div>
         </div>
-        <div class="sl-side">
+        <div class="sl-side" data-ref="side">
+          <div class="sl-sheet-head" data-ref="sheetHead">
+            <div class="sl-sheet-grab"></div>
+            <div class="sl-sheet-peek" data-ref="peek"></div>
+          </div>
+          <div class="sl-sec sl-filtersec" data-ref="filtersSec">Filters</div>
+          <div class="sl-filters" data-ref="filters"></div>
           <div class="sl-sec" data-ref="pricesSec">Prices</div>
           <div class="sl-prices" data-ref="prices"></div>
           <div class="sl-sec">Your seats</div>
@@ -804,14 +974,55 @@ var SeatPicker = class _SeatPicker {
       this.els[el.dataset.ref] = el;
     });
     this.mapHost = this.els.map;
-    this.ro = new ResizeObserver(() => {
+    const applyLayout = () => {
       const w = root.clientWidth;
-      root.dataset.layout = w < 640 ? "narrow" : "wide";
-    });
+      if (w <= 0) return;
+      const next = w < 640 ? "narrow" : "wide";
+      if (root.dataset.layout === next) return;
+      root.dataset.layout = next;
+      if (next === "narrow" && !root.dataset.sheet) root.dataset.sheet = "peek";
+      this.dockLayoutChrome();
+    };
+    this.ro = new ResizeObserver(applyLayout);
     this.ro.observe(root);
+    applyLayout();
+    requestAnimationFrame(applyLayout);
     this.els.zin.addEventListener("click", () => this.controller.zoomIn());
     this.els.zout.addEventListener("click", () => this.controller.zoomOut());
     this.els.zfit.addEventListener("click", () => this.controller.zoomToFit());
+    const head = this.els.sheetHead;
+    if (head) {
+      const setSheet = (open) => {
+        root.dataset.sheet = open ? "open" : "peek";
+      };
+      let startY = 0;
+      let swiped = false;
+      let tracking = false;
+      head.addEventListener("pointerdown", (e) => {
+        tracking = true;
+        swiped = false;
+        startY = e.clientY;
+        head.setPointerCapture?.(e.pointerId);
+      });
+      head.addEventListener("pointermove", (e) => {
+        if (!tracking || swiped) return;
+        const dy = e.clientY - startY;
+        if (dy < -18) {
+          setSheet(true);
+          swiped = true;
+        } else if (dy > 18) {
+          setSheet(false);
+          swiped = true;
+        }
+      });
+      head.addEventListener("pointerup", (e) => {
+        if (tracking && !swiped && Math.abs(e.clientY - startY) < 6) {
+          if (!e.target.closest(".sl-seccard")) setSheet(root.dataset.sheet !== "open");
+        }
+        tracking = false;
+        head.releasePointerCapture?.(e.pointerId);
+      });
+    }
     this.tipEl = document.createElement("div");
     this.tipEl.setAttribute("role", "tooltip");
     this.tipEl.style.cssText = "position:absolute;z-index:7;pointer-events:none;display:none;max-width:240px;background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.45;";
@@ -838,13 +1049,15 @@ var SeatPicker = class _SeatPicker {
       return this;
     }
     this.els.boot.remove();
+    this.buildRegions();
+    this.regions["bottom-right"].appendChild(this.els.zoom);
+    this.regions["bottom-center"].appendChild(this.els.toast);
     if (info.mode === "test") {
-      const ribbon = document.createElement("div");
-      ribbon.textContent = t2("picker.testMode");
-      ribbon.setAttribute("aria-label", t2("picker.testMode"));
-      ribbon.style.cssText = "position:absolute;top:18px;right:-34px;z-index:6;transform:rotate(45deg);width:140px;text-align:center;padding:4px 0;background:#f4b740;color:#1a1200;font:800 10.5px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.12em;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;";
-      this.els.map.style.overflow = "hidden";
-      this.els.map.appendChild(ribbon);
+      const badge = document.createElement("div");
+      badge.className = "sl-testbadge";
+      badge.textContent = t2("picker.testMode");
+      badge.setAttribute("aria-label", t2("picker.testMode"));
+      this.regions["top-right"].appendChild(badge);
     }
     const chartTheme = this.controller.doc?.theme;
     Object.entries(resolveTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
@@ -868,7 +1081,8 @@ var SeatPicker = class _SeatPicker {
       const GLYPH = { wheelchair: "\u267F", companion: "\u{1F9D1}\u200D\u{1F91D}\u200D\u{1F9D1}" };
       const mk = (key, label) => `<button type="button" class="sl-chip-f${key === "all" ? " on" : ""}" data-f="${key}">${label}</button>`;
       chips.innerHTML = mk("all", "All seats") + [...present].map((type) => mk(type, `${GLYPH[type] ? GLYPH[type] + " " : ""}${type[0].toUpperCase()}${type.slice(1).replace(/-/g, " ")}`)).join("");
-      this.els.map.appendChild(chips);
+      this.regions["top-left"].appendChild(chips);
+      this.a11yChipsEl = chips;
       chips.querySelectorAll("button").forEach((btn) => {
         btn.addEventListener("click", () => {
           const f = btn.dataset.f;
@@ -880,6 +1094,8 @@ var SeatPicker = class _SeatPicker {
     }
     const cb = document.createElement("button");
     cb.type = "button";
+    cb.className = "sl-cbbtn";
+    this.cbEl = cb;
     cb.setAttribute("aria-label", "Toggle colorblind-friendly colors");
     cb.setAttribute("aria-pressed", String(!!this.opts.colorblindSafe));
     cb.innerHTML = '<svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>';
@@ -895,10 +1111,314 @@ var SeatPicker = class _SeatPicker {
     this.srEl.setAttribute("aria-live", "polite");
     root.appendChild(this.srEl);
     this.buildArenaChrome();
+    this.buildMinimap();
+    this.buildPriceFilter();
+    this.buildExtendPrompt();
+    this.buildBookedOverlay();
+    this.dockLayoutChrome();
     this.syncPrices();
     this.syncTray();
     return this;
   }
+  /**
+   * Move layout-dependent chrome between its wide dock (map regions / zoom
+   * column) and its narrow dock (the sheet's consolidated Filters row), and
+   * re-render the section card in the form the layout wants (docked card/pill
+   * on wide, sheet strip on narrow). Runs on every layout flip + once post-render.
+   */
+  dockLayoutChrome() {
+    const narrow = this.root?.dataset.layout === "narrow";
+    const filters = this.els.filters;
+    if (filters) {
+      if (narrow) {
+        if (this.a11yChipsEl) filters.appendChild(this.a11yChipsEl);
+        if (this.cbEl) filters.appendChild(this.cbEl);
+      } else {
+        if (this.a11yChipsEl) this.regions["top-left"]?.appendChild(this.a11yChipsEl);
+        if (this.cbEl) this.els.zoom?.appendChild(this.cbEl);
+      }
+      const has = narrow && filters.children.length > 0;
+      filters.classList.toggle("has", has);
+      this.els.filtersSec?.classList.toggle("has", has);
+    }
+    if (this.lastSection) this.renderSectionCard(this.lastSection);
+  }
+  /** The "Need more time?" prompt shown in the hold's final EXTEND_PROMPT_MS. */
+  buildExtendPrompt() {
+    const el = document.createElement("div");
+    el.className = "sl-extend";
+    el.setAttribute("role", "status");
+    el.innerHTML = `<span class="sl-extend-txt" data-ref="extendTxt"></span><button type="button" class="sl-extend-btn" data-ref="extendBtn"></button>`;
+    (this.regions["bottom-center"] ?? this.els.map).appendChild(el);
+    this.extendEl = el;
+    this.els.extendTxt = el.querySelector('[data-ref="extendTxt"]');
+    this.els.extendBtn = el.querySelector('[data-ref="extendBtn"]');
+    this.els.extendBtn.textContent = "Add time";
+    this.els.extendBtn.addEventListener("click", () => void this.handleExtend());
+  }
+  /** Success overlay + onBooked fire when the held seats settle to booked. */
+  buildBookedOverlay() {
+    const el = document.createElement("div");
+    el.className = "sl-booked";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-live", "polite");
+    el.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">You're all set</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
+    this.root.appendChild(el);
+    this.bookedEl = el;
+    this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
+  }
+  // ---- Feature 6: chrome anchor regions -------------------------------------
+  /**
+   * Create the positioned flex containers that own every persistent map overlay.
+   * Appended once after controller.render(); each chrome piece is then appended
+   * INTO its region and flows within it, so nothing free-floats over anything
+   * else. Regions carve the map into non-overlapping zones (top strip split into
+   * left/center/right, left rail, and the three used corners).
+   */
+  buildRegions() {
+    if (!this.els.map) return;
+    const REGIONS = ["top-left", "top-center", "top-right", "left-rail", "bottom-left", "bottom-center", "bottom-right"];
+    for (const region of REGIONS) {
+      const el = document.createElement("div");
+      el.className = "sl-anchor";
+      el.dataset.region = region;
+      this.els.map.appendChild(el);
+      this.regions[region] = el;
+    }
+  }
+  // ---- F3 minimap -----------------------------------------------------------
+  /** Read a resolved --sl-* token value (canvas needs a real color, not var()). */
+  cssVar(name) {
+    return this.root ? getComputedStyle(this.root).getPropertyValue(name).trim() : "";
+  }
+  /** Section-bearing objects on the active floor (single-floor → doc.objects). */
+  activeFloorObjects() {
+    const doc = this.controller.doc;
+    if (!doc) return [];
+    const floors = doc.floors;
+    if (floors?.length) {
+      const id = this.controller.getActiveFloorId();
+      return (floors.find((f) => f.id === id) ?? floors[0]).objects ?? [];
+    }
+    return doc.objects ?? [];
+  }
+  /**
+   * Build the overview minimap: a static venue thumbnail (section outlines, or
+   * seat dots when the chart has no sections) with the live viewport rectangle
+   * drawn on top. The rect tracks pan/zoom via the constructor's onViewChange.
+   */
+  buildMinimap() {
+    const vp = this.controller.getViewport();
+    if (!vp || !this.els.map) return;
+    const b = vp.bounds;
+    if (!(b.width > 0 && b.height > 0)) return;
+    const MAXW = 158;
+    const MAXH = 118;
+    const PAD = 6;
+    const aspect = b.width / Math.max(1, b.height);
+    let w = MAXW;
+    let h = Math.round(MAXW / aspect);
+    if (h > MAXH) {
+      h = MAXH;
+      w = Math.round(MAXH * aspect);
+    }
+    w = Math.max(64, w);
+    h = Math.max(48, h);
+    const dpr = Math.min(2, window.devicePixelRatio || 1);
+    const wrap = document.createElement("div");
+    wrap.className = "sl-minimap";
+    wrap.setAttribute("aria-hidden", "true");
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(w * dpr);
+    canvas.height = Math.round(h * dpr);
+    canvas.style.width = `${w}px`;
+    canvas.style.height = `${h}px`;
+    wrap.appendChild(canvas);
+    (this.regions["bottom-left"] ?? this.els.map).appendChild(wrap);
+    this.miniEl = wrap;
+    this.miniCanvas = canvas;
+    const scale = Math.min((w - PAD * 2) / Math.max(1, b.width), (h - PAD * 2) / Math.max(1, b.height)) * dpr;
+    const offX = (w * dpr - b.width * scale) / 2 - b.x * scale;
+    const offY = (h * dpr - b.height * scale) / 2 - b.y * scale;
+    this.miniTf = { scale, offX, offY, dpr };
+    const base = document.createElement("canvas");
+    base.width = canvas.width;
+    base.height = canvas.height;
+    this.miniBase = base;
+    wrap.addEventListener("click", (e) => this.minimapJump(e));
+    this.drawMinimapStatic();
+    this.drawMinimapRect();
+  }
+  /** Repaint the static overview + rect (floor switch, live open/close). */
+  refreshMinimap() {
+    if (!this.miniBase) return;
+    this.drawMinimapStatic();
+    this.drawMinimapRect();
+  }
+  /** Paint the venue overview into the offscreen base canvas. */
+  drawMinimapStatic() {
+    const base = this.miniBase;
+    const tf = this.miniTf;
+    const doc = this.controller.doc;
+    if (!base || !tf || !doc) return;
+    const ctx = base.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, base.width, base.height);
+    const fx = (x) => x * tf.scale + tf.offX;
+    const fy = (y) => y * tf.scale + tf.offY;
+    const line = this.cssVar("--sl-line") || "rgba(139,147,167,.5)";
+    const muted = this.cssVar("--sl-muted") || "#8b93a7";
+    const accent = this.cssVar("--sl-accent") || "#6e7bff";
+    const zoneColor = new Map((doc.zones ?? []).map((z) => [z.id, z.color]));
+    let drewSection = false;
+    for (const o of this.activeFloorObjects()) {
+      if (o.type !== "section" || !o.outline || o.outline.length < 3) continue;
+      drewSection = true;
+      const closed = this.controller.isSectionClosed(o.id);
+      const fill = closed ? muted : o.color ?? (o.zone && zoneColor.get(o.zone)) ?? accent;
+      ctx.beginPath();
+      o.outline.forEach((p, i) => i === 0 ? ctx.moveTo(fx(p.x), fy(p.y)) : ctx.lineTo(fx(p.x), fy(p.y)));
+      ctx.closePath();
+      ctx.globalAlpha = closed ? 0.26 : 0.42;
+      ctx.fillStyle = fill;
+      ctx.fill();
+      ctx.globalAlpha = 0.85;
+      ctx.lineWidth = Math.max(1, tf.dpr);
+      ctx.strokeStyle = line;
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+    if (!drewSection) {
+      const r = Math.max(1, tf.dpr);
+      for (const seat of expandChart(doc)) {
+        const cat = doc.categories.find((c) => c.key === seat.categoryKey);
+        ctx.fillStyle = cat?.color ?? accent;
+        ctx.beginPath();
+        ctx.arc(fx(seat.x), fy(seat.y), r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  }
+  /** Blit the base overview, then stroke the current viewport rectangle on top. */
+  drawMinimapRect() {
+    const canvas = this.miniCanvas;
+    const base = this.miniBase;
+    const tf = this.miniTf;
+    if (!canvas || !base || !tf) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(base, 0, 0);
+    const vp = this.controller.getViewport();
+    if (!vp) return;
+    const v = vp.visible;
+    const x = v.x * tf.scale + tf.offX;
+    const y = v.y * tf.scale + tf.offY;
+    const w = v.width * tf.scale;
+    const h = v.height * tf.scale;
+    const accent = this.cssVar("--sl-accent") || "#f4b740";
+    ctx.save();
+    ctx.globalAlpha = 0.14;
+    ctx.fillStyle = accent;
+    ctx.fillRect(x, y, w, h);
+    ctx.globalAlpha = 1;
+    ctx.lineWidth = Math.max(1.5, tf.dpr * 1.5);
+    ctx.strokeStyle = accent;
+    ctx.strokeRect(x, y, w, h);
+    ctx.restore();
+  }
+  /** Minimap click → focus the section under the point (or overview on a miss). */
+  minimapJump(e) {
+    const canvas = this.miniCanvas;
+    const tf = this.miniTf;
+    if (!canvas || !tf) return;
+    const r = canvas.getBoundingClientRect();
+    const px = (e.clientX - r.left) * (canvas.width / r.width);
+    const py = (e.clientY - r.top) * (canvas.height / r.height);
+    const wx = (px - tf.offX) / tf.scale;
+    const wy = (py - tf.offY) / tf.scale;
+    for (const o of this.activeFloorObjects()) {
+      if (o.type !== "section" || !o.outline || o.outline.length < 3) continue;
+      if (this.controller.isSectionClosed(o.id)) continue;
+      if (pointInPolygon(wx, wy, o.outline)) {
+        this.controller.focusSection(o.id);
+        return;
+      }
+    }
+    this.controller.overview();
+  }
+  // ---- F4 price-band filter -------------------------------------------------
+  /** Effective price of a category (first tier when tiered, else base price). */
+  catPrice(c) {
+    return c.tiers?.length ? c.tiers[0].price : c.price;
+  }
+  /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
+  priceBands() {
+    const doc = this.controller.doc;
+    if (!doc) return [];
+    const priced = doc.categories.map((c) => ({ key: c.key, price: this.catPrice(c) })).filter((x) => x.price != null);
+    if (!priced.length) return [];
+    const distinct = [...new Set(priced.map((p) => p.price))].sort((a, b) => a - b);
+    if (distinct.length <= 5) {
+      return distinct.map((price) => ({
+        id: `p${price}`,
+        label: this.money(price),
+        keys: priced.filter((p) => p.price === price).map((p) => p.key),
+        min: price,
+        max: price
+      }));
+    }
+    const chunk = Math.ceil(distinct.length / 4);
+    const bands = [];
+    for (let i = 0; i < distinct.length; i += chunk) {
+      const slice = distinct.slice(i, i + chunk);
+      const lo = slice[0];
+      const hi = slice[slice.length - 1];
+      bands.push({
+        id: `b${i}`,
+        label: lo === hi ? this.money(lo) : `${this.money(lo)}\u2013${this.money(hi)}`,
+        keys: priced.filter((p) => p.price >= lo && p.price <= hi).map((p) => p.key),
+        min: lo,
+        max: hi
+      });
+    }
+    return bands;
+  }
+  /**
+   * Build the price-band chip row in the side panel, directly under the "Prices"
+   * header and above the legend it dims. Living in the panel (not a map overlay)
+   * keeps it clear of the top-center rung pills and top-left a11y chips, and it
+   * rides the bottom sheet on narrow layouts. Skipped when there's <2 bands.
+   */
+  buildPriceFilter() {
+    if (!this.els.prices || !this.els.pricesSec) return;
+    const bands = this.priceBands();
+    if (bands.length < 2) return;
+    const wrap = document.createElement("div");
+    wrap.className = "sl-pricef";
+    wrap.setAttribute("role", "group");
+    wrap.setAttribute("aria-label", "Filter seats by price");
+    const mk = (band, label, on) => `<button type="button" class="sl-chip-f${on ? " on" : ""}" data-band="${band}">${label}</button>`;
+    wrap.innerHTML = mk("all", "All prices", true) + bands.map((bd) => mk(bd.id, bd.label, false)).join("");
+    this.els.pricesSec.after(wrap);
+    this.priceFilterEl = wrap;
+    wrap.querySelectorAll("button").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        wrap.querySelectorAll("button").forEach((b) => b.classList.toggle("on", b === btn));
+        const id = btn.dataset.band;
+        if (id === "all") {
+          this.priceBandKeys = null;
+          this.controller.setCategoryFilter(null);
+        } else {
+          const bd = bands.find((x) => x.id === id);
+          this.priceBandKeys = bd ? new Set(bd.keys) : null;
+          this.controller.setCategoryFilter(bd ? bd.keys : null);
+        }
+        this.syncPrices();
+        if (this.lastSection) this.showSectionCard(this.lastSection);
+      });
+    });
+  }
   // ---- arena / multi-floor chrome -------------------------------------------
   /** Build the rung pills (charts with sections) and floor switcher (>1 floor). */
   buildArenaChrome() {
@@ -927,7 +1447,7 @@ var SeatPicker = class _SeatPicker {
       pills.querySelectorAll("button").forEach((btn) => {
         btn.addEventListener("click", () => this.controller.setRung(btn.dataset.rung));
       });
-      this.els.map.appendChild(pills);
+      this.regions["top-center"].appendChild(pills);
       this.rungsEl = pills;
       this.syncRung();
     }
@@ -944,9 +1464,10 @@ var SeatPicker = class _SeatPicker {
           this.showSectionCard(null);
           this.syncFloors();
           this.syncRung();
+          this.refreshMinimap();
         });
       });
-      this.els.map.appendChild(rail);
+      this.regions["left-rail"].appendChild(rail);
       this.floorsEl = rail;
       this.syncFloors();
     }
@@ -971,27 +1492,105 @@ var SeatPicker = class _SeatPicker {
   }
   /** Show (or clear, on null) the tapped-section summary card. */
   showSectionCard(summary) {
-    if (!summary) {
-      this.secCardEl?.remove();
-      this.secCardEl = null;
-      return;
-    }
+    this.lastSection = summary;
+    this.secCardEl?.remove();
+    this.secCardEl = null;
+    if (!summary) return;
+    this.secCardCollapsed = false;
+    this.secCardShownAt = Date.now();
+    this.renderSectionCard(summary);
+  }
+  /**
+   * Render the section card in the form the layout + state want: expanded card
+   * or slim pill in the top-center anchor region (wide), or a compact strip in
+   * the sheet head (narrow). Never floats over the seats at the tap point.
+   */
+  renderSectionCard(summary) {
     if (!this.els.map) return;
     this.secCardEl?.remove();
     const priceLabel = summary.priceMin === summary.priceMax ? this.money(summary.priceMin) : `${this.money(summary.priceMin)}\u2013${this.money(summary.priceMax)}`;
+    const leftLabel = tCount("picker.seatsLeftInSection", summary.seatsLeft);
+    const xBtn = `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button>`;
     const card = document.createElement("div");
-    card.className = "sl-seccard on";
-    card.setAttribute("role", "dialog");
-    card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
-    const mix = summary.categories.map(
-      (c) => `<span class="sl-seccard-mix-item"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(c.price)}</span></span>`
-    ).join("");
-    card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button></div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${tCount("picker.seatsLeftInSection", summary.seatsLeft)}</span></div>` + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
-    card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
-    card.querySelector(".sl-seccard-overview").addEventListener("click", () => this.controller.overview());
-    this.els.map.appendChild(card);
+    const narrow = this.root?.dataset.layout === "narrow";
+    if (narrow) {
+      card.className = "sl-seccard strip on";
+      card.setAttribute("role", "status");
+      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn;
+      card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
+      (this.els.sheetHead ?? this.els.side ?? this.els.map).appendChild(card);
+    } else if (this.secCardCollapsed) {
+      card.className = "sl-seccard mini on";
+      card.setAttribute("role", "button");
+      card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
+      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + xBtn;
+      card.addEventListener("click", (e) => {
+        if (e.target.closest(".sl-seccard-x")) return;
+        this.secCardCollapsed = false;
+        this.secCardShownAt = Date.now();
+        this.renderSectionCard(summary);
+      });
+      card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
+      (this.regions["top-center"] ?? this.els.map).appendChild(card);
+    } else {
+      card.className = "sl-seccard on";
+      card.setAttribute("role", "dialog");
+      card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
+      const mix = summary.categories.map((c) => {
+        const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
+        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(c.price)}</span></span>`;
+      }).join("");
+      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
+      card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
+      card.querySelector(".sl-seccard-overview").addEventListener("click", () => this.controller.overview());
+      (this.regions["top-center"] ?? this.els.map).appendChild(card);
+    }
     this.secCardEl = card;
   }
+  /** Collapse the expanded card to its slim pill (seat-picking started). */
+  collapseSectionCard() {
+    if (!this.secCardEl || this.secCardCollapsed || !this.lastSection) return;
+    if (this.root?.dataset.layout === "narrow") return;
+    this.secCardCollapsed = true;
+    this.renderSectionCard(this.lastSection);
+  }
+  /**
+   * onViewChange hook for the card. The focus glide's own settle (within the
+   * grace window) enforces the ~25% coverage rule with the FINAL viewport; any
+   * later pan/zoom means seat-picking has begun → collapse to the pill.
+   */
+  sectionCardOnView() {
+    if (!this.secCardEl || this.secCardCollapsed || !this.lastSection) return;
+    if (this.root?.dataset.layout === "narrow") return;
+    if (Date.now() - this.secCardShownAt < 1400) {
+      if (this.sectionCardCoverage() > 0.25) this.collapseSectionCard();
+      return;
+    }
+    this.collapseSectionCard();
+  }
+  /** Fraction of the focused section's on-screen bbox covered by the card. */
+  sectionCardCoverage() {
+    const card = this.secCardEl;
+    const sec = this.lastSection;
+    if (!card || !sec || !this.els.map) return 0;
+    const outline = this.activeFloorObjects().find((o) => o.type === "section" && o.id === sec.id)?.outline;
+    if (!outline || outline.length < 3) return 0;
+    const pts = outline.map((p) => this.controller.worldToScreen(p));
+    const xs = pts.map((p) => p.x);
+    const ys = pts.map((p) => p.y);
+    const bx = Math.min(...xs);
+    const by = Math.min(...ys);
+    const bw = Math.max(...xs) - bx;
+    const bh = Math.max(...ys) - by;
+    if (bw <= 0 || bh <= 0) return 0;
+    const mapR = this.els.map.getBoundingClientRect();
+    const cr = card.getBoundingClientRect();
+    const cx = cr.left - mapR.left;
+    const cy = cr.top - mapR.top;
+    const ox = Math.max(0, Math.min(cx + cr.width, bx + bw) - Math.max(cx, bx));
+    const oy = Math.max(0, Math.min(cy + cr.height, by + bh) - Math.max(cy, by));
+    return ox * oy / (bw * bh);
+  }
   /** aria-live readout when keyboard focus lands on a seat. */
   announceSeat(seat) {
     if (!this.srEl) return;
@@ -1166,7 +1765,8 @@ var SeatPicker = class _SeatPicker {
     const left = this.controller.categoryAvailability();
     this.els.prices.innerHTML = doc.categories.map((c) => {
       const price = c.tiers?.length ? c.tiers[0].price : c.price;
-      return `<div class="sl-price-row" data-cat="${c.key}"><span class="sl-dot" style="background:${c.color}"></span><span class="sl-price-label">${c.label}</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
+      const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
+      return `<div class="sl-price-row${dim ? " sl-dim" : ""}" data-cat="${c.key}"><span class="sl-dot" style="background:${c.color}"></span><span class="sl-price-label">${c.label}</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
     }).join("");
     this.els.prices.querySelectorAll(".sl-price-row").forEach((row) => {
       row.addEventListener("mouseenter", () => this.controller.getRenderer()?.setCategoryHighlight?.(row.dataset.cat ?? null));
@@ -1272,12 +1872,26 @@ var SeatPicker = class _SeatPicker {
     const cta = this.els.cta;
     cta.disabled = count === 0;
     cta.textContent = this.hold ? "Continue to checkout" : count ? "Hold seats & checkout" : "Select seats";
+    if (this.els.peek) {
+      if (count) {
+        this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><span class="go">${this.hold ? "Continue \u2192" : "Review \u2192"}</span>`;
+      } else {
+        const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
+        this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<span class="sub">\xB7 Best available</span><span class="go">\u2191</span>`;
+      }
+    }
+    if (this.root?.dataset.layout === "narrow" && count > 0 && this.lastTrayCount === 0) {
+      this.root.dataset.sheet = "open";
+    }
+    this.lastTrayCount = count;
     this.opts.onSelectionChange?.(seats);
   }
   async handleCta() {
     const cta = this.els.cta;
     if (this.hold && !this.controller.getSelection().some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
-      this.opts.onCheckout?.(this.hold, this.hold.seats ?? this.controller.getSelection());
+      const seats = this.hold.seats ?? this.controller.getSelection();
+      this.handedOff = true;
+      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
       return;
     }
     cta.disabled = true;
@@ -1300,8 +1914,9 @@ var SeatPicker = class _SeatPicker {
         return;
       }
       this.hold = hold;
+      this.handedOff = true;
       this.startHoldTimer(hold.expiresAt);
-      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? []);
+      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? [], this.buildHandoff(hold));
     } catch (err) {
       this.opts.onError?.(err);
       this.toast("One or more seats were just taken. Please pick again.");
@@ -1311,13 +1926,15 @@ var SeatPicker = class _SeatPicker {
   }
   startHoldTimer(expiresAt) {
     this.stopHoldTimer();
+    this.holdExpiresAt = expiresAt;
     const pill = this.els.hold;
     const tick = () => {
-      const ms = Math.max(0, expiresAt - Date.now());
+      const ms = Math.max(0, this.holdExpiresAt - Date.now());
       const m = Math.floor(ms / 6e4);
       const s = String(Math.floor(ms % 6e4 / 1e3)).padStart(2, "0");
       pill.textContent = `Held ${m}:${s}`;
       pill.classList.add("on");
+      this.setExtendPrompt(ms > 0 && ms <= EXTEND_PROMPT_MS, ms);
       if (ms <= 0) this.stopHoldTimer();
     };
     tick();
@@ -1327,6 +1944,83 @@ var SeatPicker = class _SeatPicker {
     if (this.holdTimer) clearInterval(this.holdTimer);
     this.holdTimer = null;
     this.els.hold?.classList.remove("on");
+    this.setExtendPrompt(false, 0);
+  }
+  /** Show/refresh (or hide) the "Need more time?" prompt with the live seconds left. */
+  setExtendPrompt(show, ms) {
+    if (!this.extendEl) return;
+    if (show && this.controller.currentHold() && !this.bookedShown) {
+      const secs = Math.ceil(ms / 1e3);
+      this.els.extendTxt.innerHTML = `Your seats are held for <b>0:${String(secs).padStart(2, "0")}</b>. Need more time?`;
+      this.extendEl.classList.add("on");
+    } else {
+      this.extendEl.classList.remove("on");
+    }
+  }
+  async handleExtend() {
+    const btn = this.els.extendBtn;
+    btn.disabled = true;
+    const prev = btn.textContent;
+    btn.textContent = "Adding\u2026";
+    try {
+      const h = await this.controller.extendHold(this.opts.holdTtlMs);
+      if (h) {
+        this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
+        this.holdExpiresAt = h.expiresAt;
+        this.extendEl?.classList.remove("on");
+        this.toast("More time added \u2014 your seats are still held.");
+      } else {
+        this.toast("Couldn't add more time \u2014 please head to checkout now.");
+      }
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Couldn't add more time \u2014 please head to checkout now.");
+    } finally {
+      btn.disabled = false;
+      btn.textContent = prev;
+    }
+  }
+  /**
+   * Fire the booked-confirmation state once the buyer's held seats settle to
+   * booked. The controller clears its own hold the moment every held label reads
+   * 'booked' over the realtime channel (clearBookedHoldIfSettled), and this runs
+   * on the same onStatusChange — so `currentHold() === null` while we still hold
+   * a checkout handoff means "sold", not expired (expiry clears via onHoldExpired
+   * on a different path, which nulls this.hold first).
+   */
+  detectBooked() {
+    if (this.bookedShown || !this.handedOff || !this.hold) return;
+    if (this.controller.currentHold() !== null) return;
+    this.showBooked();
+  }
+  showBooked() {
+    if (this.bookedShown || !this.hold) return;
+    this.bookedShown = true;
+    const handoff = this.buildHandoff(this.hold);
+    this.stopHoldTimer();
+    const n = handoff.lineItems.reduce((sum, i) => sum + i.quantity, 0);
+    if (this.els.bookedSub) {
+      this.els.bookedSub.innerHTML = `<span class="sl-booked-seats">${n} ${n === 1 ? "ticket" : "tickets"}</span> confirmed. A confirmation is on its way.`;
+    }
+    this.bookedEl?.classList.add("on");
+    this.opts.onBooked?.(handoff);
+  }
+  /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
+  buildHandoff(hold) {
+    const items = hold.items ?? [];
+    const lineItems = items.map((it) => ({
+      label: it.label,
+      objectId: it.objectId,
+      objectType: it.objectType,
+      categoryKey: it.categoryKey,
+      tierId: it.tierId,
+      unitPrice: it.unitPrice,
+      currency: it.currency ?? this.currency,
+      quantity: it.quantity ?? 1
+    }));
+    const currency = lineItems[0]?.currency ?? this.currency;
+    const total = lineItems.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
+    return { holdId: hold.holdId, expiresAt: hold.expiresAt, currency, lineItems, total };
   }
   toast(msg) {
     const el = this.els.toast;
@@ -1368,6 +2062,8 @@ var SeatPicker = class _SeatPicker {
       const h = await this.controller.bestAvailable(qty, categoryKey);
       if (h) {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
+        this.handedOff = false;
+        this.bookedShown = false;
         this.startHoldTimer(h.expiresAt);
         this.syncTray();
         return this.hold;
@@ -1381,6 +2077,8 @@ var SeatPicker = class _SeatPicker {
   async release() {
     await this.controller.release();
     this.hold = null;
+    this.handedOff = false;
+    this.bookedShown = false;
     this.stopHoldTimer();
     this.gaQty.clear();
     this.syncTray();