@seatlayer/js 0.15.1 → 0.16.1

package/dist/index.js

@@ -476,24 +476,26 @@ var CSS = `
 .sl-body{display:flex;flex:1;min-height:0}
 .sl-map{position:relative;flex:1;min-width:0}
 .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}
+.sl-side{width:300px;flex:none;border-left:1px solid var(--sl-line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
 
 /* 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).
+   summary line) / "open" (room for rows + checkout, swipe up to open).
    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%;border-left:0;border-top:1px solid var(--sl-line);
-  flex:none;height:50%;transition:height .3s cubic-bezier(.2,.8,.2,1)}
+  flex:none;height:min(72%,480px);overflow:hidden;transition:height .3s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
+.sl-picker[data-layout="narrow"][data-sheet="open"][data-has-selection="false"] .sl-side{height:min(252px,52%)}
 .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)}
+.sl-picker[data-layout="narrow"] .sl-tray{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
+.sl-picker[data-layout="narrow"] .sl-foot{position:static;background:var(--sl-bg)}
+.sl-picker[data-layout="narrow"] .sl-foot.empty{display:none}
 .sl-picker[data-layout="narrow"] .sl-sheet-head{order:0}
-.sl-picker[data-layout="narrow"] .sl-seats-sec{order:1}
+.sl-picker[data-layout="narrow"] .sl-seats-sec{display:none}
 .sl-picker[data-layout="narrow"] .sl-tray{order:2}
 .sl-picker[data-layout="narrow"] .sl-filtersec{order:3}
 .sl-picker[data-layout="narrow"] .sl-filters{order:4}
@@ -501,13 +503,21 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-pricef{order:6}
 .sl-picker[data-layout="narrow"] .sl-prices{order:7}
 .sl-picker[data-layout="narrow"] .sl-foot{order:8}
+.sl-picker[data-layout="narrow"] .sl-tray-hint,
+.sl-picker[data-layout="narrow"] .sl-filtersec,
+.sl-picker[data-layout="narrow"] .sl-filters,
+.sl-picker[data-layout="narrow"] .sl-prices-sec,
+.sl-picker[data-layout="narrow"] .sl-prices{display:none!important}
+.sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec,
+.sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters,
+.sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-prices-sec{display:none}
 /* 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). The WHOLE
    head is the tap/swipe toggle target (min 44px), so it reads as one control. */
-.sl-sheet-head{display:none;flex-direction:column;justify-content:center;padding:6px 16px 8px;min-height:44px;
+.sl-sheet-head{display:none;flex-direction:column;justify-content:center;padding:6px 12px 8px;min-height:56px;
   cursor:pointer;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}
@@ -522,54 +532,72 @@ var CSS = `
 /* state chevron: points UP while peeking, rotates to point DOWN when open.
    Base keeps an explicit rotate(0) \u2014 transitioning to/from a bare 'none' leaves
    the value stuck in some engines, so both endpoints must be real transforms. */
-.sl-sheet-chevron{flex:none;display:flex;align-items:center;justify-content:center;color:var(--sl-muted);
-  transform:rotate(0deg);transition:transform .22s ease}
-.sl-sheet-chevron svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;
+.sl-sheet-toggle{width:44px;height:44px;margin:-8px -8px -8px 0;border-radius:999px;flex:none;display:flex;
+  align-items:center;justify-content:center;color:var(--sl-muted);transition:color .15s,background .15s}
+.sl-sheet-toggle:hover,.sl-sheet-toggle:focus-visible{color:var(--sl-text);background:color-mix(in srgb,var(--sl-line) 44%,transparent)}
+.sl-sheet-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.4;fill:none;
   stroke-linecap:round;stroke-linejoin:round}
-.sl-picker[data-sheet="open"] .sl-sheet-chevron{transform:rotate(180deg)}
+.sl-sheet-toggle svg{transform:rotate(0deg);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
+.sl-picker[data-sheet="open"] .sl-sheet-toggle svg{transform:rotate(180deg)}
 
 /* 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-picker[data-layout="narrow"] .sl-filtersec.has,
+.sl-picker[data-layout="narrow"] .sl-filters.has{display:none}
+.sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec.has,
+.sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters.has{display:none}
 .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}
-.sl-prices{padding:4px 16px 10px;border-bottom:1px solid var(--sl-line)}
-.sl-price-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
+/* price panel \u2014 one compact filter control replaces the wrapping price-chip row. */
+.sl-sec{padding:14px 14px 4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
+.sl-prices-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
+.sl-price-select{min-height:32px;max-width:130px;padding:5px 28px 5px 9px;border:1px solid var(--sl-line);border-radius:9px;
+  background:var(--sl-surface);color:var(--sl-text);font:inherit;font-size:11px;font-weight:750;letter-spacing:0;text-transform:none}
+.sl-prices{padding:5px 14px 10px;border-bottom:1px solid var(--sl-line)}
+.sl-prices-sec,.sl-prices,.sl-seats-sec{flex:none}
+.sl-price-row{display:flex;align-items:center;gap:7px;min-height:28px;font-size:12px}
 .sl-dot{width:9px;height:9px;border-radius:50%;flex:none}
 .sl-price-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
 .sl-price-left{font-size:11px;color:var(--sl-muted);font-variant-numeric:tabular-nums}
 .sl-price-amt{font-weight:800;font-variant-numeric:tabular-nums}
-.sl-status-key{display:flex;gap:12px;flex-wrap:wrap;padding:8px 16px 12px;border-bottom:1px solid var(--sl-line);color:var(--sl-muted);font-size:11px}
+.sl-status-key{display:flex;gap:13px;flex-wrap:wrap;padding:8px 0 2px;margin-top:5px;border-top:1px solid var(--sl-line);color:var(--sl-muted);font-size:10.5px}
 .sl-status-item{display:inline-flex;align-items:center;gap:6px}
 .sl-status-icon{width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
-  color:#fff;background:#6b7280;font-size:9px;font-weight:900;line-height:1}
-.sl-status-icon.sold{background:#374151;font-size:14px}
+  color:#fff;background:#6b7280;line-height:1}
+.sl-status-icon svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-status-icon.sold{background:#8b93a0}
+.sl-status-icon.sold svg{width:11px;height:11px;stroke-width:2.4}
 
 /* tray */
-.sl-tray{flex:1;padding:10px 16px;display:flex;flex-direction:column;gap:8px;min-height:0}
+.sl-seats-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
+.sl-seat-summary{font-size:10px;letter-spacing:0;text-transform:none;white-space:nowrap}
+.sl-tray{flex:1;padding:10px 14px 14px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;
+  overscroll-behavior:contain;scrollbar-gutter:stable}
 .sl-tray-hint{font-size:12.5px;color:var(--sl-muted);line-height:1.5}
-.sl-chip{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--sl-line);
-  border-radius:var(--sl-r-sm);background:var(--sl-surface);font-size:13px;transform-origin:center}
+.sl-chip{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto 30px;align-items:center;gap:8px;
+  min-height:53px;padding:7px 7px 7px 9px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm);
+  background:var(--sl-surface);font-size:13px;transform-origin:center;transition:border-color .15s,background .15s}
+.sl-chip:hover{border-color:color-mix(in srgb,var(--sl-accent) 38%,var(--sl-line))}
 .sl-chip.sl-enter{animation:slChipIn .38s cubic-bezier(.2,.8,.2,1) both}
 .sl-chip.sl-leave{pointer-events:none;animation:slChipOut .16s ease-in both}
 .sl-chip.sl-held{border-color:var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
   box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent)}
-.sl-chip b{font-weight:800;flex:none;min-width:max-content;white-space:nowrap}
-.sl-chip .cat{color:var(--sl-muted);font-size:11.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-ticket-state{width:23px;height:23px;border-radius:999px;display:flex;align-items:center;justify-content:center;
+  background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent)}
+.sl-ticket-state svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-chip-main{min-width:0}
+.sl-chip b{display:block;font-weight:800;min-width:max-content;white-space:nowrap}
+.sl-chip-sub{display:flex;align-items:center;gap:5px;min-width:0;margin-top:2px}
+.sl-chip .cat{color:var(--sl-muted);font-size:10.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-chip .amt{font-weight:700;font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
-.sl-chip-state{flex:none;padding:3px 6px;border-radius:999px;background:var(--sl-accent);color:var(--sl-accent-ink);
-  font-size:8.5px;line-height:1;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
-.sl-chip-state.sl-pending{background:transparent;color:var(--sl-muted);border:1px solid var(--sl-line)}
-.sl-chip .rm{width:22px;height:22px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--sl-muted)}
-.sl-chip .rm:hover{color:var(--sl-text)}
+.sl-chip .rm{width:29px;height:29px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--sl-muted)}
+.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
 .sl-chip .rm svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
 
 /* GA rows */
@@ -584,16 +612,22 @@ var CSS = `
 .sl-ga-qty span{min-width:16px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
 
 /* footer */
-.sl-foot{padding:12px 16px 14px;border-top:1px solid var(--sl-line);flex:none}
-.sl-hold-note{display:none;align-items:center;gap:9px;margin-bottom:10px;padding:9px 10px;border-radius:var(--sl-r-sm);
+.sl-foot{position:relative;z-index:2;padding:12px 16px 14px;border-top:1px solid var(--sl-line);flex:none;
+  background:var(--sl-bg);box-shadow:0 -10px 24px -22px rgba(0,0,0,.72)}
+.sl-hold-note{display:none;align-items:center;gap:7px;margin-bottom:8px;padding:7px 8px;border-radius:var(--sl-r-sm);
   border:1px solid var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
   box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent);
   font-size:11.5px;line-height:1.35;color:var(--sl-muted)}
 .sl-hold-note.on{display:flex;animation:slNoticeIn .38s cubic-bezier(.2,.8,.2,1) both}
 .sl-hold-note svg{width:16px;height:16px;flex:none;stroke:var(--sl-accent);stroke-width:2.4;fill:none;
   stroke-linecap:round;stroke-linejoin:round}
-.sl-hold-note b{display:block;color:var(--sl-text);font-size:12px}
-.sl-hold-copy{display:block}
+.sl-hold-note b{display:block;color:var(--sl-text);font-size:11.5px;white-space:nowrap}
+.sl-hold-copy{display:block;white-space:nowrap;font-size:10.5px}
+.sl-hold-note>span{flex:1;min-width:0}
+.sl-hold-change{flex:none;min-height:30px;padding:5px 8px;border-radius:8px;border:1px solid var(--sl-line);
+  color:var(--sl-text);font-size:10.5px;font-weight:750;white-space:nowrap}
+.sl-hold-change:hover,.sl-hold-change:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-hold-change:disabled{opacity:.58;cursor:wait}
 .sl-total{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px}
 .sl-total b{font-size:17px;font-variant-numeric:tabular-nums}
 .sl-value-pop{animation:slValuePop .32s cubic-bezier(.2,.8,.2,1)}
@@ -651,6 +685,9 @@ var CSS = `
   font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;white-space:nowrap;
   overflow:hidden;text-overflow:ellipsis}
 .sl-toast.on{opacity:1;transform:translateY(0) scale(1)}
+.sl-toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:12px;padding-right:8px}
+.sl-toast-action{min-height:30px;padding:5px 10px;border-radius:999px;background:var(--sl-accent);color:var(--sl-accent-ink);
+  font:inherit;font-weight:800}
 .sl-toast[data-tone="error"]{border-color:#ef4444}
 .sl-toast[data-tone="warning"]{border-color:var(--sl-accent)}
 .sl-toast[data-tone="success"]{border-color:#22c55e}
@@ -733,29 +770,49 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-confirm{left:50%!important;top:auto!important;bottom:14px;width:min(342px,calc(100% - 24px));
   transform:translateX(-50%);animation:slConfirmMobileIn .24s cubic-bezier(.2,.8,.2,1) both}
 
-/* best-available row */
-.sl-ba{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm)}
-.sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:7px;
-  font:inherit;font-size:12px;padding:7px 8px;min-width:0;width:100%;max-width:none}
-.sl-ba-qty{display:flex;align-items:center;gap:7px}
-.sl-ba-qty button{width:24px;height:24px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
-  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
+/* Best available is a first-class shortcut, not an anonymous utility row. */
+.sl-ba{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
+  padding:13px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));border-radius:13px;
+  background:linear-gradient(135deg,color-mix(in srgb,var(--sl-accent) 5%,var(--sl-surface)),color-mix(in srgb,var(--sl-accent) 11%,var(--sl-surface)))}
+.sl-ba::after{content:'\u2726';position:absolute;right:10px;top:3px;color:color-mix(in srgb,var(--sl-accent) 20%,transparent);font-size:42px;line-height:1}
+.sl-ba-title,.sl-ba-copy,.sl-ba select,.sl-ba-qty,.sl-ba-go{position:relative;z-index:1}
+.sl-ba-title{grid-column:1/-1;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:850}
+.sl-ba-title .spark{color:var(--sl-accent);font-size:16px}
+.sl-ba-copy{grid-column:1/-1;margin:-4px 0 2px 23px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
+.sl-ba-copy .narrow{display:none}
+.sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:8px;
+  font:inherit;font-size:11px;padding:7px 8px;min-width:0;width:100%;max-width:none}
+.sl-ba-qty{display:flex;align-items:center;gap:7px;padding:3px;border:1px solid var(--sl-line);border-radius:9px;background:var(--sl-surface)}
+.sl-ba-qty button{width:25px;height:25px;border-radius:7px;background:color-mix(in srgb,var(--sl-line) 35%,transparent);border:0;
+  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
 .sl-ba-qty span{min-width:14px;text-align:center;font-weight:800}
-.sl-ba-go{grid-column:1/-1;width:100%;min-height:38px;padding:7px 12px;border-radius:9px;border:1px solid var(--sl-line);font-weight:800;font-size:12px;
-  transition:border-color .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:6px}
-.sl-ba-go:hover{border-color:var(--sl-muted)}
-.sl-ba-go:disabled{opacity:.62;cursor:wait}
+.sl-picker .sl-ba-go{grid-column:1/-1;width:100%;min-height:37px;padding:7px 12px;border-radius:9px;background:var(--sl-accent);
+  color:var(--sl-accent-ink);font-weight:800;font-size:12px;transition:filter .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:6px;
+  box-shadow:0 8px 18px color-mix(in srgb,var(--sl-accent) 18%,transparent)}
+.sl-picker .sl-ba-go:hover{filter:brightness(1.06)}
+.sl-picker .sl-ba-go:disabled{opacity:.62;cursor:wait}
+.sl-ba-replace{grid-column:1/-1;padding:3px 0 1px}
+.sl-ba-replace b{display:block;font-size:12.5px}
+.sl-ba-replace span{display:block;margin-top:3px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
+.sl-ba-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px}
+.sl-ba-actions button{min-height:36px;border-radius:9px;border:1px solid var(--sl-line);font-size:11.5px;font-weight:800}
+.sl-ba-actions .replace{border-color:var(--sl-accent);background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-picker[data-layout="narrow"] .sl-ba{padding:11px}
+.sl-picker[data-layout="narrow"] .sl-ba-copy .wide{display:none}
+.sl-picker[data-layout="narrow"] .sl-ba-copy .narrow{display:inline}
 
 /* screen-reader live region */
 .sl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
 /* per-seat ticket-tier select + view-from-seat button in tray chips */
-.sl-chip .tier{background:var(--sl-bg);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:7px;
-  font:inherit;font-size:11px;padding:3px 5px;max-width:130px;cursor:pointer}
-.sl-chip .view{width:24px;height:24px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
-  color:var(--sl-muted);transition:color .15s}
+.sl-chip .tier{background:var(--sl-bg);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:6px;
+  font:inherit;font-size:10px;padding:2px 4px;min-width:0;max-width:100%;cursor:pointer}
+.sl-chip .view{width:20px;height:20px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
+  color:var(--sl-muted);opacity:.36;transition:color .15s,opacity .15s}
 .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}
+.sl-chip:hover .view,.sl-chip .view:focus-visible{opacity:1;color:var(--sl-text)}
+.sl-chip .view svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+@media(pointer:coarse){.sl-chip .view{opacity:.58}}
 
 /* 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}
@@ -842,10 +899,6 @@ var CSS = `
 .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}
@@ -935,6 +988,8 @@ var SeatPicker = class _SeatPicker {
     this.a11yFilter = "all";
     this.baQty = 2;
     this.baCat = "";
+    this.bestAvailableConfirm = false;
+    this.releasingHold = false;
     // arena / multi-floor / seat-view chrome
     this.rungsEl = null;
     this.floorsEl = null;
@@ -982,10 +1037,11 @@ var SeatPicker = class _SeatPicker {
     this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
     this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
     this.api = new PubApi(this.apiBase);
+    this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.controller = new PickerController2({
       transport: this.api,
       eventKey: options.event,
-      maxSelection: options.maxSelection ?? DEFAULT_MAX_SELECTION2,
+      maxSelection: this.maxTickets,
       currency: options.currency,
       flashOnLiveChange: true,
       colorblindSafe: options.colorblindSafe,
@@ -1020,6 +1076,9 @@ var SeatPicker = class _SeatPicker {
       onDeselect: (seat) => {
         if (this.confirmSeat?.id === seat.id) this.dismissConfirm();
       },
+      onSelectionLimit: () => {
+        this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
+      },
       onViewChange: () => {
         this.reanchorConfirm();
         this.syncRung();
@@ -1082,6 +1141,10 @@ var SeatPicker = class _SeatPicker {
       if (picker.confirmSeat) {
         e.preventDefault();
         picker.cancelConfirm();
+      } else if (picker.bestAvailableConfirm) {
+        e.preventDefault();
+        picker.bestAvailableConfirm = false;
+        picker.syncTray();
       } else {
         close();
       }
@@ -1105,10 +1168,17 @@ var SeatPicker = class _SeatPicker {
     this.root = root;
     mount.appendChild(root);
     root.addEventListener("keydown", (e) => {
-      if (e.key !== "Escape" || !this.confirmSeat) return;
-      e.preventDefault();
-      e.stopPropagation();
-      this.cancelConfirm();
+      if (e.key !== "Escape") return;
+      if (this.confirmSeat) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancelConfirm();
+      } else if (this.bestAvailableConfirm) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.bestAvailableConfirm = false;
+        this.syncTray();
+      }
     });
     Object.entries(resolveTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     root.innerHTML = `
@@ -1141,21 +1211,22 @@ var SeatPicker = class _SeatPicker {
             <div class="sl-sheet-grab"></div>
             <div class="sl-sheet-bar">
               <div class="sl-sheet-peek" data-ref="peek"></div>
-              <span class="sl-sheet-chevron" aria-hidden="true">
+              <button type="button" class="sl-sheet-toggle" data-ref="sheetToggle" aria-label="Open ticket panel" aria-expanded="false">
                 <svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6"/></svg>
-              </span>
+              </button>
             </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 sl-prices-sec" data-ref="pricesSec">Prices</div>
+          <div class="sl-sec sl-prices-sec" data-ref="pricesSec"><span>Ticket prices</span></div>
           <div class="sl-prices" data-ref="prices"></div>
-          <div class="sl-sec sl-seats-sec">Your seats</div>
+          <div class="sl-sec sl-seats-sec"><span>Your seats</span><span class="sl-seat-summary" data-ref="seatSummary"></span></div>
           <div class="sl-tray" data-ref="tray"></div>
-          <div class="sl-foot">
+          <div class="sl-foot" data-ref="foot">
             <div class="sl-hold-note" data-ref="holdNote" role="status" aria-live="polite">
               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
               <span><b data-ref="holdTitle">Seats secured</b><span class="sl-hold-copy" data-ref="holdCopy">Checkout timer is running.</span></span>
+              <button type="button" class="sl-hold-change" data-ref="holdChange" aria-label="Release held tickets and choose different seats">Change</button>
             </div>
             <div class="sl-total"><span data-ref="count"></span><b data-ref="total"></b></div>
             <button type="button" class="sl-cta" data-ref="cta" disabled></button>
@@ -1184,9 +1255,17 @@ var SeatPicker = class _SeatPicker {
     this.els.zfit.addEventListener("click", () => this.controller.zoomToFit());
     const head = this.els.sheetHead;
     if (head) {
+      const toggle = this.els.sheetToggle;
       const setSheet = (open) => {
         root.dataset.sheet = open ? "open" : "peek";
+        toggle?.setAttribute("aria-expanded", String(open));
+        toggle?.setAttribute("aria-label", open ? "Collapse ticket panel" : "Open ticket panel");
       };
+      setSheet(root.dataset.sheet === "open");
+      toggle?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        setSheet(root.dataset.sheet !== "open");
+      });
       let startY = 0;
       let swiped = false;
       let tracking = false;
@@ -1209,7 +1288,7 @@ var SeatPicker = class _SeatPicker {
       });
       head.addEventListener("pointerup", (e) => {
         if (tracking && !swiped && Math.abs(e.clientY - startY) < 6) {
-          if (!e.target.closest(".sl-seccard")) setSheet(root.dataset.sheet !== "open");
+          if (!e.target.closest(".sl-seccard,.sl-sheet-toggle")) setSheet(root.dataset.sheet !== "open");
         }
         tracking = false;
         head.releasePointerCapture?.(e.pointerId);
@@ -1225,6 +1304,7 @@ var SeatPicker = class _SeatPicker {
       if (this.tipEl && this.tipEl.style.display !== "none") this.placeTooltip();
     });
     this.els.cta.addEventListener("click", () => void this.handleCta());
+    this.els.holdChange?.addEventListener("click", () => void this.handleChangeSeats());
     const canvasHost = document.createElement("div");
     canvasHost.style.cssText = "position:absolute;inset:0";
     this.mapHost.appendChild(canvasHost);
@@ -1431,15 +1511,51 @@ var SeatPicker = class _SeatPicker {
     const heldItems = this.hold?.items ?? [];
     const heldLabels = new Set(heldItems.map((item) => item.label));
     const pendingSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).length;
+    return pendingSeats + this.pendingGACount();
+  }
+  heldGACounts() {
     const heldGA = /* @__PURE__ */ new Map();
-    for (const item of heldItems.filter((candidate) => candidate.objectType === "ga")) {
+    for (const item of (this.hold?.items ?? []).filter((candidate) => candidate.objectType === "ga")) {
       heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
     }
-    const pendingGA = [...this.gaQty.entries()].reduce(
+    return heldGA;
+  }
+  pendingGACount() {
+    const heldGA = this.heldGACounts();
+    return [...this.gaQty.entries()].reduce(
       (sum, [areaId, qty]) => sum + Math.max(0, qty - (heldGA.get(areaId) ?? 0)),
       0
     );
-    return pendingSeats + pendingGA;
+  }
+  heldTicketCount() {
+    return (this.hold?.items ?? []).reduce((sum, item) => sum + (item.quantity ?? 1), 0);
+  }
+  totalTicketCount() {
+    const heldLabels = new Set((this.hold?.items ?? []).map((item) => item.label));
+    const freshSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).length;
+    return this.heldTicketCount() + freshSeats + this.pendingGACount();
+  }
+  /** Held tickets and standing quantities consume the same order-wide cap. */
+  updateSelectionCapacity() {
+    const heldLabels = new Set((this.hold?.items ?? []).map((item) => item.label));
+    const selectedHeld = this.committedSelection().filter((seat) => heldLabels.has(seat.label)).length;
+    const remaining = Math.max(0, this.maxTickets - this.heldTicketCount() - this.pendingGACount());
+    this.controller.setMaxSelection(selectedHeld + remaining);
+  }
+  canAddTicket() {
+    if (this.totalTicketCount() < this.maxTickets) return true;
+    this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
+    return false;
+  }
+  pendingGATotal(gaAreas) {
+    const heldGA = /* @__PURE__ */ new Map();
+    for (const item of (this.hold?.items ?? []).filter((candidate) => candidate.objectType === "ga")) {
+      heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
+    }
+    return gaAreas.reduce(
+      (sum, area) => sum + area.price * Math.max(0, (this.gaQty.get(area.id) ?? 0) - (heldGA.get(area.id) ?? 0)),
+      0
+    );
   }
   syncCta(count = this.lastTrayCount, pending = this.pendingSelectionCount()) {
     const cta = this.els.cta;
@@ -1728,39 +1844,26 @@ var SeatPicker = class _SeatPicker {
     }
     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.
-   */
+  /** Build the compact price selector in the panel header. Choosing a band both
+   *  filters availability and smoothly frames the matching seats on the map. */
   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);
-      });
+    const select = document.createElement("select");
+    select.className = "sl-price-select";
+    select.setAttribute("aria-label", "Filter and focus seats by price");
+    select.innerHTML = `<option value="all">All prices</option>` + bands.map((band) => `<option value="${band.id}">${band.label}</option>`).join("");
+    this.els.pricesSec.appendChild(select);
+    this.priceFilterEl = select;
+    select.addEventListener("change", () => {
+      const band = bands.find((candidate) => candidate.id === select.value);
+      const keys = band?.keys ?? null;
+      this.priceBandKeys = keys ? new Set(keys) : null;
+      this.controller.setCategoryFilter(keys);
+      this.controller.focusCategoryFilter(keys);
+      this.syncPrices();
+      if (this.lastSection) this.showSectionCard(this.lastSection);
     });
   }
   // ---- arena / multi-floor chrome -------------------------------------------
@@ -2160,7 +2263,7 @@ var SeatPicker = class _SeatPicker {
       const price = c.tiers?.length ? c.tiers[0].price : c.price;
       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("") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon">H</i>Held by another buyer</span><span class="sl-status-item"><i class="sl-status-icon sold">\xD7</i>Sold</span></div>`;
+    }).join("") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>Temporarily held</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>Sold</span></div>`;
     this.els.prices.querySelectorAll(".sl-price-row").forEach((row) => {
       row.addEventListener("mouseenter", () => this.controller.getRenderer()?.setCategoryHighlight?.(row.dataset.cat ?? null));
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
@@ -2179,6 +2282,7 @@ var SeatPicker = class _SeatPicker {
   }
   syncTray() {
     if (!this.els.tray) return;
+    this.updateSelectionCapacity();
     const seats = this.committedSelection();
     const gaAreas = this.controller.getGAAreas();
     const heldItems = this.hold?.items ?? [];
@@ -2189,14 +2293,19 @@ var SeatPicker = class _SeatPicker {
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
+    if (!this.hold) {
+      const cats = this.controller.doc?.categories ?? [];
+      parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
+    }
     for (const item of heldItems) {
       const itemKey = `held:${item.label}`;
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === item.categoryKey);
       const tierName = item.tierId ? cat?.tiers?.find((ti) => ti.id === item.tierId)?.name : void 0;
       const canView2 = this.seatViewEnabled() && item.objectType !== "ga" && !!this.controller.seatByLabel(item.label);
+      const viewBtn = canView2 ? `<button type="button" class="view" data-view-label="${item.label}" aria-label="${t2("picker.viewFromSeat", { label: item.label })}"><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></button>` : "";
       parts.push(
-        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="sl-chip-state" aria-label="Held by you" title="Held by you">Held</span><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span>` + (canView2 ? `<button type="button" class="view" data-view-label="${item.label}" aria-label="${t2("picker.viewFromSeat", { label: item.label })}"><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></button>` : "") + `<button type="button" class="rm" aria-label="Remove held ticket ${item.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
+        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><div class="sl-chip-main"><b>${item.label}</b><div class="sl-chip-sub"><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span>${viewBtn}</div></div><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span><button type="button" class="rm" aria-label="Remove held ticket ${item.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
@@ -2208,7 +2317,7 @@ var SeatPicker = class _SeatPicker {
       const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(ti.price)}</option>`).join("") + `</select>` : "";
       const viewBtn = canView ? `<button type="button" class="view" data-view-label="${s.label}" aria-label="${t2("picker.viewFromSeat", { label: s.label })}"><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></button>` : "";
       parts.push(
-        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}"><b>${s.label}</b><span class="cat">${cat?.label ?? s.categoryKey}</span>` + tierSelect + `<span class="sl-chip-state sl-pending">Selected</span><span class="amt">${this.money(s.price)}</span>` + viewBtn + `<button type="button" class="rm" aria-label="Remove ${s.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
+        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><div class="sl-chip-main"><b>${s.label}</b><div class="sl-chip-sub"><span class="cat">${cat?.label ?? s.categoryKey}</span>${tierSelect}${viewBtn}</div></div><span class="amt">${this.money(s.price)}</span><button type="button" class="rm" aria-label="Remove ${s.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
       );
     }
     for (const area of gaAreas) {
@@ -2217,17 +2326,11 @@ var SeatPicker = class _SeatPicker {
         `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.label}</div><div class="sl-ga-sub">${this.money(area.price)} \xB7 ${area.available} left</div></div><div class="sl-ga-qty"><button type="button" data-d="-1" aria-label="Fewer">\u2212</button><span>${qty}</span><button type="button" data-d="1" aria-label="More">+</button></div></div>`
       );
     }
-    if (!this.hold) {
-      const cats = this.controller.doc?.categories ?? [];
-      parts.push(
-        `<div class="sl-ba">` + (cats.length > 1 ? `<select aria-label="Category" data-ba-cat><option value="">Any tier</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding\u2026` : "Best available") + `</button></div>`
-      );
-    }
     this.els.tray.innerHTML = parts.join("");
     this.lastTrayKeys = nextTrayKeys;
     this.els.tray.querySelectorAll("[data-ba]").forEach((btn) => {
       btn.addEventListener("click", () => {
-        this.baQty = Math.max(1, Math.min(8, this.baQty + Number(btn.dataset.ba)));
+        this.baQty = Math.max(1, Math.min(this.maxTickets, this.baQty + Number(btn.dataset.ba)));
         this.syncTray();
       });
     });
@@ -2235,6 +2338,21 @@ var SeatPicker = class _SeatPicker {
       this.baCat = e.target.value;
     });
     this.els.tray.querySelector(".sl-ba-go")?.addEventListener("click", () => {
+      if (this.pendingSelectionCount() > 0) {
+        this.bestAvailableConfirm = true;
+        this.syncTray();
+        this.els.tray.querySelector("[data-ba-replace]")?.focus();
+        return;
+      }
+      void this.bestAvailable(this.baQty, this.baCat || void 0);
+    });
+    this.els.tray.querySelector("[data-ba-cancel]")?.addEventListener("click", () => {
+      this.bestAvailableConfirm = false;
+      this.syncTray();
+      this.els.tray.querySelector(".sl-ba-go")?.focus();
+    });
+    this.els.tray.querySelector("[data-ba-replace]")?.addEventListener("click", () => {
+      this.bestAvailableConfirm = false;
       void this.bestAvailable(this.baQty, this.baCat || void 0);
     });
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
@@ -2245,12 +2363,26 @@ var SeatPicker = class _SeatPicker {
           return;
         }
         const id = chip.dataset.seat;
-        if (this.reducedMotion()) {
+        const label = chip.querySelector("b")?.textContent ?? "Seat";
+        const remove = () => {
           this.controller.deselect([id]);
+          this.toast(`${label} removed.`, "neutral", {
+            label: "Undo",
+            onClick: () => {
+              const restored = this.controller.select([id]);
+              this.toast(
+                restored.length ? `${label} restored.` : `${label} is no longer available.`,
+                restored.length ? "success" : "warning"
+              );
+            }
+          });
+        };
+        if (this.reducedMotion()) {
+          remove();
           return;
         }
         chip.classList.add("sl-leave");
-        this.scheduleMotion(() => this.controller.deselect([id]), 150);
+        this.scheduleMotion(remove, 150);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip .tier").forEach((sel) => {
@@ -2267,13 +2399,15 @@ var SeatPicker = class _SeatPicker {
         const areaEl = btn.closest(".sl-ga");
         const id = areaEl.dataset.ga;
         const area = gaAreas.find((a) => a.id === id);
-        const next = Math.max(0, Math.min(area?.available ?? 0, (this.gaQty.get(id) ?? 0) + Number(btn.dataset.d)));
+        const delta = Number(btn.dataset.d);
+        if (delta > 0 && !this.canAddTicket()) return;
+        const next = Math.max(0, Math.min(area?.available ?? 0, (this.gaQty.get(id) ?? 0) + delta));
         this.gaQty.set(id, next);
         this.syncTray();
       });
     });
-    const gaTotal = gaAreas.reduce((sum, a) => sum + a.price * (this.gaQty.get(a.id) ?? 0), 0);
-    const gaCount = [...this.gaQty.values()].reduce((a, b) => a + b, 0);
+    const gaTotal = this.pendingGATotal(gaAreas);
+    const gaCount = this.pendingGACount();
     const heldTotal = heldItems.reduce((sum, item) => sum + item.unitPrice * (item.quantity ?? 1), 0);
     const heldCount = heldItems.reduce((sum, item) => sum + (item.quantity ?? 1), 0);
     const freshSeats = seats.filter((seat) => !heldLabels.has(seat.label));
@@ -2284,14 +2418,24 @@ var SeatPicker = class _SeatPicker {
     const previousTotal = this.lastTrayTotal;
     this.els.count.textContent = count ? `${count} ${count === 1 ? "ticket" : "tickets"}` : "No seats selected";
     this.els.total.textContent = count ? this.money(total) : "";
+    this.root?.setAttribute("data-has-selection", String(count > 0));
+    this.els.foot?.classList.toggle("empty", count === 0);
+    if (this.els.seatSummary) {
+      this.els.seatSummary.textContent = count ? `${count} selected` : "";
+    }
     this.syncCta(count, pendingCount);
     if (this.hold) {
       const securedCount = heldCount || this.hold.seats?.length || 0;
       if (this.els.holdTitle) {
-        this.els.holdTitle.textContent = `${securedCount} ${securedCount === 1 ? "seat" : "seats"} secured`;
+        this.els.holdTitle.textContent = `${securedCount} secured`;
       }
       if (this.els.holdCopy) {
-        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected \u2014 secure before checkout.` : "Checkout timer is running.";
+        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected` : "Checkout timer running";
+      }
+      const change = this.els.holdChange;
+      if (change) {
+        change.disabled = this.releasingHold;
+        change.textContent = this.releasingHold ? "Releasing\u2026" : "Change";
       }
     }
     if (count !== previousCount) this.animateOnce(this.els.count, "sl-value-pop", 380);
@@ -2302,7 +2446,7 @@ var SeatPicker = class _SeatPicker {
         this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><span class="go">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</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>`;
+        this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<span class="go">\u2726 Best seats</span>`;
       }
     }
     this.lastTrayCount = count;
@@ -2343,7 +2487,30 @@ var SeatPicker = class _SeatPicker {
       if (button?.isConnected) button.disabled = false;
     }
   }
+  async handleChangeSeats() {
+    if (!this.hold || this.releasingHold) return;
+    this.releasingHold = true;
+    const button = this.els.holdChange;
+    if (button) {
+      button.disabled = true;
+      button.textContent = "Releasing\u2026";
+    }
+    try {
+      await this.release();
+      if (!this.hold) this.toast("Held tickets released. Choose your new seats.", "success");
+    } finally {
+      this.releasingHold = false;
+      if (button?.isConnected) {
+        button.disabled = false;
+        button.textContent = "Change";
+      }
+    }
+  }
   async handleCta() {
+    if (this.totalTicketCount() > this.maxTickets) {
+      this.toast(`Remove tickets until your order has ${this.maxTickets} or fewer.`, "warning");
+      return;
+    }
     const committed = this.committedSelection();
     if (this.hold && !committed.some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
       const seats = this.hold.seats ?? committed;
@@ -2381,7 +2548,10 @@ var SeatPicker = class _SeatPicker {
       this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("One or more seats were just taken. Please pick again.", "error");
+      const problem = err;
+      const labels = (problem.conflicts ?? []).map((conflict) => conflict.label).filter(Boolean).slice(0, 3);
+      const message = problem.reason === "event_closed" ? "Seat sales have closed for this event." : labels.length ? `${labels.join(", ")} ${labels.length === 1 ? "is" : "are"} no longer available. Choose another ${labels.length === 1 ? "seat" : "group"}.` : "One or more seats were just taken. Please pick again.";
+      this.toast(message, "error");
       this.setCtaPhase("idle");
     } finally {
       this.holdingLabels.clear();
@@ -2504,15 +2674,28 @@ var SeatPicker = class _SeatPicker {
       hold ? this.buildHandoff(hold) : null
     );
   }
-  toast(msg, tone = "neutral") {
+  toast(msg, tone = "neutral", action) {
     const el = this.els.toast;
     if (!el) return;
-    el.textContent = msg;
+    el.replaceChildren();
+    const copy = document.createElement("span");
+    copy.textContent = msg;
+    el.appendChild(copy);
+    el.classList.toggle("has-action", !!action);
+    if (action) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "sl-toast-action";
+      button.textContent = action.label;
+      button.addEventListener("click", action.onClick, { once: true });
+      el.appendChild(button);
+    }
     el.dataset.tone = tone;
     el.classList.add("on");
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.toastTimer = setTimeout(() => {
       el.classList.remove("on");
+      el.classList.remove("has-action");
       el.dataset.tone = "neutral";
     }, 4200);
   }
@@ -2562,7 +2745,9 @@ var SeatPicker = class _SeatPicker {
   }
   async bestAvailable(qty, categoryKey) {
     if (this.bestAvailableBusy) return null;
+    qty = Math.max(1, Math.min(this.maxTickets, Math.floor(qty)));
     if (this.confirmSeat) this.cancelConfirm();
+    this.bestAvailableConfirm = false;
     this.bestAvailableBusy = true;
     const button = this.els.tray?.querySelector(".sl-ba-go");
     if (button) {
@@ -2575,6 +2760,7 @@ var SeatPicker = class _SeatPicker {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
         this.handedOff = false;
         this.bookedShown = false;
+        this.gaQty.clear();
         this.startHoldTimer(h.expiresAt);
         this.flashHeldSeats(this.hold);
         this.syncTray();
@@ -2584,14 +2770,13 @@ var SeatPicker = class _SeatPicker {
       return null;
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("Those seats are no longer available. Try another quantity or category.", "error");
+      const reason = err?.reason;
+      const message = reason === "not_enough_together" ? `We couldn't find ${qty} seats together. Try fewer seats or another ticket type.` : reason === "sold_out" ? "That ticket type is sold out. Try another ticket type." : reason === "event_closed" ? "Seat sales have closed for this event." : "Those seats are no longer available. Try another quantity or ticket type.";
+      this.toast(message, "error");
       return null;
     } finally {
       this.bestAvailableBusy = false;
-      if (!this.hold && button?.isConnected) {
-        button.disabled = false;
-        button.textContent = "Best available";
-      }
+      this.syncTray();
     }
   }
   async release() {