npm - @drttix/drt-sdk - Versions diffs - 1.0.2 → 1.0.3 - Mend

@drttix/drt-sdk 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (667) hide show

package/demo/test.html CHANGED Viewed

@@ -1,2306 +1,2306 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>DRT SDK &mdash; Test Console</title>
-        <link rel="icon" href="data:," />
-        <style>
-            :root {
-                --primary: #4f46e5;
-                --primary-hover: #4338ca;
-                --primary-light: #eef2ff;
-                --danger: #dc2626;
-                --danger-hover: #b91c1c;
-                --success: #059669;
-                --success-light: #d1fae5;
-                --warning: #d97706;
-                --warning-light: #fef3c7;
-                --info: #0284c7;
-                --info-light: #e0f2fe;
-                --text: #111827;
-                --text-muted: #6b7280;
-                --border: #e5e7eb;
-                --surface: #ffffff;
-                --surface-alt: #f9fafb;
-                --code-bg: #1e1e2e;
-                --code-text: #e4e4e7;
-            }
-            * {
-                box-sizing: border-box;
-            }
-            html,
-            body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-                font-family:
-                    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-                    'Helvetica Neue', sans-serif;
-                color: var(--text);
-                background: var(--surface-alt);
-                font-size: 14px;
-                line-height: 1.5;
-            }
-            .app {
-                display: flex;
-                height: 100vh;
-                overflow: hidden;
-            }
-            .left-panel {
-                width: 50%;
-                min-width: 50%;
-                max-width: 50%;
-                overflow-y: auto;
-                padding: 1.25rem 1.5rem 2rem;
-                background: var(--surface-alt);
-            }
-            .right-panel {
-                width: 50%;
-                min-width: 50%;
-                max-width: 50%;
-                background: var(--code-bg);
-                color: var(--code-text);
-                display: flex;
-                flex-direction: column;
-                border-left: 1px solid var(--border);
-                height: 100vh;
-            }
-            h1 {
-                font-size: 1.5rem;
-                font-weight: 700;
-                margin: 0 0 0.25rem;
-                color: var(--text);
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-            }
-            h1 .badge-version {
-                font-size: 0.7rem;
-                background: var(--primary-light);
-                color: var(--primary);
-                padding: 0.15rem 0.5rem;
-                border-radius: 999px;
-                font-weight: 600;
-            }
-            .subtitle {
-                color: var(--text-muted);
-                margin: 0 0 1.25rem;
-                font-size: 0.875rem;
-            }
-            h2.section-title {
-                font-size: 0.75rem;
-                font-weight: 700;
-                text-transform: uppercase;
-                letter-spacing: 0.05em;
-                color: var(--text-muted);
-                margin: 1.5rem 0 0.5rem;
-                padding: 0;
-                border: none;
-            }
-            button {
-                padding: 0.4rem 0.85rem;
-                font-size: 0.85rem;
-                font-weight: 500;
-                cursor: pointer;
-                border: 1px solid var(--border);
-                border-radius: 6px;
-                background: var(--surface);
-                color: var(--text);
-                transition: all 0.15s;
-            }
-            button:hover:not(:disabled) {
-                background: var(--surface-alt);
-                border-color: #d1d5db;
-            }
-            button:disabled {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
-            button.primary {
-                background: var(--primary);
-                color: white;
-                border-color: var(--primary);
-            }
-            button.primary:hover:not(:disabled) {
-                background: var(--primary-hover);
-                border-color: var(--primary-hover);
-            }
-            button.danger {
-                background: var(--surface);
-                color: var(--danger);
-                border-color: #fecaca;
-            }
-            button.danger:hover:not(:disabled) {
-                background: #fef2f2;
-            }
-            button.small {
-                padding: 0.25rem 0.6rem;
-                font-size: 0.75rem;
-            }
-            input,
-            select {
-                padding: 0.4rem 0.6rem;
-                font-size: 0.85rem;
-                border: 1px solid var(--border);
-                border-radius: 6px;
-                background: var(--surface);
-                color: var(--text);
-                font-family: inherit;
-            }
-            input:focus,
-            select:focus {
-                outline: none;
-                border-color: var(--primary);
-                box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
-            }
-            code {
-                background: #eef1f5;
-                color: #374151;
-                padding: 0.1rem 0.35rem;
-                border-radius: 4px;
-                font-size: 0.78rem;
-                font-family:
-                    ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
-            }
-            /* Config card */
-            .card {
-                background: var(--surface);
-                border: 1px solid var(--border);
-                border-radius: 10px;
-                padding: 1rem;
-                margin-bottom: 1rem;
-            }
-            .card-title {
-                font-size: 0.9rem;
-                font-weight: 600;
-                margin: 0 0 0.5rem;
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-            }
-            .card-title .step {
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                width: 1.5rem;
-                height: 1.5rem;
-                background: var(--primary);
-                color: white;
-                border-radius: 50%;
-                font-size: 0.75rem;
-                font-weight: 700;
-            }
-            .quick-start {
-                background: var(--primary-light);
-                border: 1px solid #c7d2fe;
-                padding: 0.75rem;
-                border-radius: 8px;
-                margin-bottom: 0.75rem;
-            }
-            .field {
-                display: block;
-                font-size: 0.8rem;
-                font-weight: 500;
-                color: var(--text-muted);
-                margin: 0.6rem 0 0.25rem;
-            }
-            .field + input {
-                width: 100%;
-            }
-            .inline-row {
-                display: flex;
-                gap: 0.5rem;
-                align-items: center;
-                flex-wrap: wrap;
-            }
-            .inline-row label {
-                font-size: 0.8rem;
-                font-weight: 500;
-                color: var(--text-muted);
-            }
-            .inline-row input,
-            .inline-row select {
-                flex: 1;
-                min-width: 0;
-            }
-            .btn-row {
-                display: flex;
-                gap: 0.5rem;
-                flex-wrap: wrap;
-                margin-top: 0.5rem;
-            }
-            /* Tabs for API */
-            .api-tabs {
-                display: flex;
-                gap: 0.25rem;
-                border-bottom: 1px solid var(--border);
-                margin-bottom: 1rem;
-            }
-            .api-tab {
-                padding: 0.5rem 0.9rem;
-                border: none;
-                background: none;
-                cursor: pointer;
-                font-size: 0.875rem;
-                font-weight: 500;
-                color: var(--text-muted);
-                border-bottom: 2px solid transparent;
-                margin-bottom: -1px;
-                border-radius: 0;
-            }
-            .api-tab:hover {
-                color: var(--text);
-                background: none;
-            }
-            .api-tab.active {
-                color: var(--primary);
-                border-bottom-color: var(--primary);
-            }
-            .api-content {
-                display: none;
-            }
-            .api-content.active {
-                display: block;
-            }
-            /* Collapsible sections */
-            details.api-section {
-                border: 1px solid var(--border);
-                border-radius: 8px;
-                margin-bottom: 0.5rem;
-                background: var(--surface);
-                overflow: hidden;
-            }
-            details.api-section > summary {
-                padding: 0.65rem 0.9rem;
-                font-weight: 600;
-                font-size: 0.9rem;
-                cursor: pointer;
-                user-select: none;
-                list-style: none;
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-                transition: background 0.15s;
-            }
-            details.api-section > summary:hover {
-                background: var(--surface-alt);
-            }
-            details.api-section > summary::-webkit-details-marker {
-                display: none;
-            }
-            details.api-section > summary::before {
-                content: '\25B8';
-                font-size: 0.7rem;
-                color: #9ca3af;
-                transition: transform 0.15s;
-                flex-shrink: 0;
-            }
-            details.api-section[open] > summary::before {
-                transform: rotate(90deg);
-            }
-            details.api-section > .section-body {
-                padding: 0.75rem 0.9rem 0.9rem;
-                border-top: 1px solid var(--border);
-                background: var(--surface-alt);
-            }
-            details.api-section.hidden-section {
-                display: none;
-            }
-            .section-badge {
-                font-size: 0.7rem;
-                padding: 0.1rem 0.45rem;
-                border-radius: 999px;
-                font-weight: 600;
-                margin-left: auto;
-                background: #f3f4f6;
-                color: var(--text-muted);
-            }
-            .badge-ga {
-                background: var(--success-light);
-                color: var(--success);
-            }
-            .badge-reserved {
-                background: var(--info-light);
-                color: var(--info);
-            }
-            .badge-ready {
-                background: var(--success-light);
-                color: var(--success);
-            }
-            .badge-count {
-                background: var(--primary-light);
-                color: var(--primary);
-            }
-            /* Info banners */
-            .info-banner {
-                padding: 0.5rem 0.75rem;
-                border-radius: 6px;
-                font-size: 0.825rem;
-                margin-bottom: 0.5rem;
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-            }
-            .info-banner.ga {
-                background: var(--success-light);
-                color: var(--success);
-            }
-            .info-banner.reserved {
-                background: var(--info-light);
-                color: var(--info);
-            }
-            .info-banner.warn {
-                background: var(--warning-light);
-                color: var(--warning);
-            }
-            /* Cart items */
-            .cart-items {
-                display: flex;
-                flex-direction: column;
-                gap: 0.4rem;
-                margin-top: 0.5rem;
-            }
-            .cart-item {
-                display: flex;
-                align-items: center;
-                gap: 0.75rem;
-                padding: 0.6rem 0.75rem;
-                background: var(--surface);
-                border: 1px solid var(--border);
-                border-radius: 6px;
-            }
-            .cart-item-icon {
-                width: 2rem;
-                height: 2rem;
-                border-radius: 6px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 1rem;
-                flex-shrink: 0;
-            }
-            .cart-item-icon.seat {
-                background: var(--info-light);
-                color: var(--info);
-            }
-            .cart-item-icon.product {
-                background: var(--warning-light);
-                color: var(--warning);
-            }
-            .cart-item-icon.donation {
-                background: var(--success-light);
-                color: var(--success);
-            }
-            .cart-item-body {
-                flex: 1;
-                min-width: 0;
-            }
-            .cart-item-title {
-                font-weight: 600;
-                font-size: 0.875rem;
-                color: var(--text);
-            }
-            .cart-item-subtitle {
-                font-size: 0.75rem;
-                color: var(--text-muted);
-                margin-top: 0.1rem;
-            }
-            .cart-item-price {
-                font-weight: 600;
-                font-size: 0.875rem;
-                color: var(--text);
-                margin-right: 0.5rem;
-                white-space: nowrap;
-            }
-            .cart-summary {
-                background: var(--primary-light);
-                border: 1px solid #c7d2fe;
-                border-radius: 6px;
-                padding: 0.6rem 0.75rem;
-                margin-top: 0.75rem;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                font-weight: 600;
-                font-size: 0.9rem;
-            }
-            .empty-cart {
-                text-align: center;
-                padding: 1.5rem 0.5rem;
-                color: var(--text-muted);
-                font-size: 0.875rem;
-                font-style: italic;
-            }
-            /* Right panel output */
-            .panel-tabs {
-                display: flex;
-                background: #181825;
-                border-bottom: 1px solid #313244;
-                padding: 0 0.5rem;
-            }
-            .panel-tab {
-                padding: 0.75rem 1rem;
-                border: none;
-                background: none;
-                cursor: pointer;
-                font-size: 0.85rem;
-                font-weight: 500;
-                color: #a1a1aa;
-                border-bottom: 2px solid transparent;
-                margin-bottom: -1px;
-                border-radius: 0;
-                font-family: inherit;
-            }
-            .panel-tab:hover {
-                background: none;
-                color: var(--code-text);
-            }
-            .panel-tab.active {
-                color: #a5b4fc;
-                border-bottom-color: #a5b4fc;
-            }
-            .panel-content {
-                flex: 1;
-                display: none;
-                flex-direction: column;
-                min-height: 0;
-            }
-            .panel-content.active {
-                display: flex;
-            }
-            #status {
-                padding: 0.5rem 1rem;
-                font-weight: 600;
-                background: #181825;
-                border-bottom: 1px solid #313244;
-                font-size: 0.8rem;
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-            }
-            #status.success {
-                color: #a6e3a1;
-            }
-            #status.error {
-                color: #f38ba8;
-            }
-            #status::before {
-                content: '';
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background: currentColor;
-                flex-shrink: 0;
-            }
-            #output-container {
-                flex: 1;
-                overflow: auto;
-                padding: 1rem;
-                min-width: 0;
-            }
-            pre {
-                background: transparent;
-                margin: 0;
-                white-space: pre-wrap;
-                word-wrap: break-word;
-                overflow-wrap: break-word;
-                font-size: 0.8rem;
-                font-family:
-                    ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
-                color: var(--code-text);
-            }
-            /* Implementation panel */
-            #impl-panel {
-                padding: 1.25rem;
-                overflow-y: auto;
-                flex: 1;
-                background: #181825;
-            }
-            #impl-panel h3 {
-                color: #cdd6f4;
-                margin: 1.25rem 0 0.5rem;
-                font-size: 0.95rem;
-                font-weight: 600;
-            }
-            #impl-panel h3:first-child {
-                margin-top: 0;
-            }
-            #impl-panel p {
-                color: #bac2de;
-                font-size: 0.85rem;
-                margin: 0.25rem 0 0.5rem;
-            }
-            .code-block {
-                position: relative;
-                background: #11111b;
-                border: 1px solid #313244;
-                border-radius: 8px;
-                padding: 0.8rem 0.9rem;
-                margin: 0.5rem 0;
-            }
-            .code-block pre {
-                font-size: 0.78rem;
-                line-height: 1.55;
-                color: #cdd6f4;
-            }
-            .code-block .copy-btn {
-                position: absolute;
-                top: 0.5rem;
-                right: 0.5rem;
-                padding: 0.2rem 0.5rem;
-                font-size: 0.7rem;
-                background: #313244;
-                color: #cdd6f4;
-                border: 1px solid #45475a;
-                border-radius: 4px;
-                cursor: pointer;
-                opacity: 0;
-                transition: opacity 0.15s;
-            }
-            .code-block:hover .copy-btn {
-                opacity: 1;
-            }
-            .code-block .copy-btn:hover {
-                background: #45475a;
-            }
-            .code-block .copy-btn.copied {
-                background: #a6e3a1;
-                color: #11111b;
-            }
-            .impl-note {
-                background: #181e2e;
-                border-left: 3px solid #89b4fa;
-                padding: 0.6rem 0.85rem;
-                margin: 0.75rem 0;
-                border-radius: 0 6px 6px 0;
-                font-size: 0.82rem;
-                color: #bac2de;
-            }
-            .kw {
-                color: #cba6f7;
-            }
-            .str {
-                color: #a6e3a1;
-            }
-            .com {
-                color: #6c7086;
-                font-style: italic;
-            }
-            .fn {
-                color: #89b4fa;
-            }
-            .num {
-                color: #fab387;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="app">
-            <!-- LEFT PANEL: Controls -->
-            <div class="left-panel">
-                <h1>
-                    DRT SDK Test Console
-                    <span id="sdkVersionBadge" class="badge-version"
-                        >v0.9.7</span
-                    >
-                </h1>
-                <p class="subtitle">
-                    Interactive playground for the
-                    <code>@drttix/drt-sdk</code> shopper & scanner APIs.
-                </p>
-                <!-- Step 1 -->
-                <div class="card">
-                    <div class="card-title">
-                        <span class="step">1</span> Connect SDK
-                    </div>
-                    <div class="quick-start">
-                        <strong style="font-size: 0.85rem"
-                            >Quick Start &mdash; Create a new shopper
-                            session</strong
-                        >
-                        <div
-                            class="inline-row"
-                            style="margin-top: 0.5rem; gap: 0.4rem"
-                        >
-                            <input
-                                type="number"
-                                id="createStudioId"
-                                placeholder="Studio ID"
-                                style="max-width: 110px"
-                            />
-                            <input
-                                type="text"
-                                id="createApiKey"
-                                placeholder="API Key"
-                            />
-                            <button id="btn-create-shopper" class="primary">
-                                Create
-                            </button>
-                        </div>
-                    </div>
-                    <label class="field" for="shopperGuid">Shopper GUID</label>
-                    <input
-                        type="text"
-                        id="shopperGuid"
-                        placeholder="e.g., F1199DCD-BB45-4BD0-..."
-                    />
-                    <label class="field" for="accountId">Account ID</label>
-                    <input type="text" id="accountId" placeholder="e.g., 508" />
-                    <label class="field" for="apiKey">API Key</label>
-                    <input type="text" id="apiKey" placeholder="your-api-key" />
-                    <div class="btn-row">
-                        <button id="btn-init" class="primary">
-                            Initialize SDK
-                        </button>
-                        <button id="btn-check-sdk">Check Status</button>
-                        <button id="btn-reset" class="danger">Reset</button>
-                    </div>
-                </div>
-                <!-- Step 2 -->
-                <div class="card">
-                    <div class="card-title">
-                        <span class="step">2</span> Explore APIs
-                    </div>
-                    <div class="api-tabs">
-                        <button class="api-tab active" data-tab="shopper">
-                            Shopper
-                        </button>
-                        <button class="api-tab" data-tab="scanner">
-                            Scanner
-                        </button>
-                    </div>
-                    <!-- SHOPPER -->
-                    <div id="tab-shopper" class="api-content active">
-                        <details class="api-section" open>
-                            <summary>
-                                Account <code>DRT.shopper.account</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="btn-row">
-                                    <button id="btn-theme">Theme</button>
-                                    <button id="btn-disposition">
-                                        Disposition
-                                    </button>
-                                    <button id="btn-root">Root Config</button>
-                                    <button id="btn-landing">
-                                        Landing Page
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                        <details class="api-section" open>
-                            <summary>
-                                Events <code>DRT.shopper.event</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="btn-row">
-                                    <button id="btn-events" class="primary">
-                                        Get All Events
-                                    </button>
-                                </div>
-                                <div
-                                    class="inline-row"
-                                    style="margin-top: 0.5rem"
-                                >
-                                    <select id="eventSelect" style="flex: 1">
-                                        <option value="">
-                                            &mdash; Click "Get All Events" first
-                                            &mdash;
-                                        </option>
-                                    </select>
-                                    <button id="btn-event-details">
-                                        Get Details
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                        <details
-                            id="section-seats"
-                            class="api-section hidden-section"
-                        >
-                            <summary>
-                                Seats
-                                <code>DRT.shopper.seat</code>
-                                <span
-                                    id="seat-badge"
-                                    class="section-badge"
-                                ></span>
-                            </summary>
-                            <div class="section-body">
-                                <div id="seat-type-info" class="info-banner">
-                                    Loading&hellip;
-                                </div>
-                                <div
-                                    id="seat-ga-controls"
-                                    style="display: none"
-                                >
-                                    <div class="inline-row">
-                                        <label>Tier</label>
-                                        <select
-                                            id="tierSelect"
-                                            style="flex: 2"
-                                        ></select>
-                                        <label>Qty</label>
-                                        <input
-                                            type="number"
-                                            id="gaQty"
-                                            value="1"
-                                            style="max-width: 70px"
-                                        />
-                                        <button
-                                            id="btn-hold-ga"
-                                            class="primary"
-                                        >
-                                            Hold
-                                        </button>
-                                    </div>
-                                </div>
-                                <div
-                                    id="seat-ba-controls"
-                                    style="display: none"
-                                >
-                                    <div class="inline-row">
-                                        <label>Seat #</label>
-                                        <input
-                                            type="number"
-                                            id="reservedSeatNum"
-                                            placeholder="e.g., 1"
-                                            style="flex: 1"
-                                        />
-                                        <button
-                                            id="btn-hold-reserved"
-                                            class="primary"
-                                        >
-                                            Hold Reserved Seat
-                                        </button>
-                                    </div>
-                                    <p
-                                        style="
-                                            margin: 0.35rem 0 0;
-                                            font-size: 0.75rem;
-                                            color: var(--text-muted);
-                                        "
-                                    >
-                                        Use section rules from event details to
-                                        find valid seat numbers.
-                                    </p>
-                                </div>
-                            </div>
-                        </details>
-                        <details
-                            id="section-update-tier"
-                            class="api-section hidden-section"
-                        >
-                            <summary>
-                                Update Tier
-                                <code>DRT.shopper.seat.updateTier</code>
-                                <span
-                                    id="tier-badge"
-                                    class="section-badge"
-                                ></span>
-                            </summary>
-                            <div class="section-body">
-                                <p
-                                    style="
-                                        margin: 0 0 0.5rem;
-                                        color: var(--text-muted);
-                                        font-size: 0.8rem;
-                                    "
-                                >
-                                    Change the pricing tier for a held seat.
-                                </p>
-                                <div class="inline-row">
-                                    <label>Seat #</label>
-                                    <input
-                                        type="number"
-                                        id="updateTierSeatNum"
-                                        placeholder="seat"
-                                        style="max-width: 90px"
-                                    />
-                                    <label>Tier</label>
-                                    <select
-                                        id="updateTierSelect"
-                                        style="flex: 2"
-                                    ></select>
-                                    <button id="btn-update-tier">Update</button>
-                                </div>
-                            </div>
-                        </details>
-                        <details
-                            id="section-products"
-                            class="api-section hidden-section"
-                        >
-                            <summary>
-                                Products
-                                <code>DRT.shopper.product</code>
-                                <span
-                                    id="product-badge"
-                                    class="section-badge"
-                                ></span>
-                            </summary>
-                            <div class="section-body">
-                                <div class="btn-row">
-                                    <button id="btn-get-products">
-                                        Get Products
-                                    </button>
-                                </div>
-                                <div
-                                    class="inline-row"
-                                    style="margin-top: 0.5rem; gap: 0.4rem"
-                                >
-                                    <input
-                                        type="number"
-                                        id="productId"
-                                        placeholder="ID"
-                                        style="max-width: 70px"
-                                    />
-                                    <input
-                                        type="text"
-                                        id="productHash"
-                                        placeholder="hash"
-                                        style="max-width: 120px"
-                                    />
-                                    <input
-                                        type="number"
-                                        id="productVariant"
-                                        placeholder="Variant"
-                                        value="0"
-                                        style="max-width: 75px"
-                                    />
-                                    <input
-                                        type="number"
-                                        id="productQty"
-                                        placeholder="Qty"
-                                        value="1"
-                                        style="max-width: 60px"
-                                    />
-                                    <button
-                                        id="btn-add-product"
-                                        class="primary"
-                                    >
-                                        Add
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                        <details class="api-section" open>
-                            <summary>
-                                Cart
-                                <code>DRT.shopper.cart</code>
-                                <span
-                                    id="cart-badge"
-                                    class="section-badge"
-                                ></span>
-                            </summary>
-                            <div class="section-body">
-                                <div class="btn-row">
-                                    <button id="btn-cart" class="primary">
-                                        Get Cart
-                                    </button>
-                                    <button id="btn-delete-cart" class="danger">
-                                        Delete Cart
-                                    </button>
-                                </div>
-                                <div id="cart-display" class="cart-items"></div>
-                            </div>
-                        </details>
-                        <details class="api-section">
-                            <summary>
-                                Orders <code>DRT.shopper.order</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="inline-row">
-                                    <label>Order GUID</label>
-                                    <input
-                                        type="text"
-                                        id="orderGuid"
-                                        placeholder="ABC123-..."
-                                    />
-                                    <button id="btn-receipt">Receipt</button>
-                                </div>
-                            </div>
-                        </details>
-                        <details class="api-section">
-                            <summary>
-                                Codes / Discounts
-                                <code>DRT.shopper.code</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="inline-row">
-                                    <label>Code</label>
-                                    <input
-                                        type="text"
-                                        id="promoCode"
-                                        placeholder="SAVE10"
-                                    />
-                                    <button id="btn-validate-code">
-                                        Validate
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                        <details class="api-section">
-                            <summary>
-                                Gift Cards
-                                <code>DRT.shopper.giftCard</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="inline-row">
-                                    <label>Card #</label>
-                                    <input
-                                        type="text"
-                                        id="giftCardNumber"
-                                        placeholder="Gift card number"
-                                    />
-                                    <button id="btn-gift-balance">
-                                        Check Balance
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                    </div>
-                    <!-- SCANNER -->
-                    <div id="tab-scanner" class="api-content">
-                        <details class="api-section" open>
-                            <summary>
-                                Scanning
-                                <code>DRT.scanner.scanning</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="btn-row">
-                                    <button id="btn-strings">
-                                        Get App Strings
-                                        <span
-                                            class="section-badge"
-                                            style="margin-left: 0.35rem"
-                                            >no auth</span
-                                        >
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                        <details class="api-section" open>
-                            <summary>
-                                Database
-                                <code>DRT.scanner.database</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="inline-row">
-                                    <label>Show Code</label>
-                                    <input
-                                        type="text"
-                                        id="scannerShowCode"
-                                        placeholder="e.g., ABC123"
-                                    />
-                                </div>
-                                <div
-                                    class="inline-row"
-                                    style="margin-top: 0.4rem"
-                                >
-                                    <label>Device</label>
-                                    <input
-                                        type="text"
-                                        id="scannerDevice"
-                                        value="test-device"
-                                    />
-                                    <label>User</label>
-                                    <input
-                                        type="text"
-                                        id="scannerUser"
-                                        value="test-user"
-                                    />
-                                </div>
-                                <div class="btn-row">
-                                    <button id="btn-scanner-db">
-                                        Download Database
-                                    </button>
-                                    <button id="btn-scanner-query">
-                                        Query Sections
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                        <details class="api-section">
-                            <summary>
-                                Orders
-                                <code>DRT.scanner.orders</code>
-                            </summary>
-                            <div class="section-body">
-                                <div class="inline-row">
-                                    <label>Phone</label>
-                                    <input
-                                        type="text"
-                                        id="scannerPhone"
-                                        placeholder="Phone number"
-                                    />
-                                    <button id="btn-scanner-by-phone">
-                                        Search
-                                    </button>
-                                </div>
-                                <div
-                                    class="inline-row"
-                                    style="margin-top: 0.4rem"
-                                >
-                                    <label>Name</label>
-                                    <input
-                                        type="text"
-                                        id="scannerName"
-                                        placeholder="Buyer name"
-                                    />
-                                    <button id="btn-scanner-by-name">
-                                        Search
-                                    </button>
-                                </div>
-                            </div>
-                        </details>
-                    </div>
-                </div>
-            </div>
-            <!-- RIGHT PANEL: Output + Implementation tabs -->
-            <div class="right-panel">
-                <div class="panel-tabs">
-                    <button class="panel-tab active" data-panel="output">
-                        Output
-                    </button>
-                    <button class="panel-tab" data-panel="impl">
-                        Implementation
-                    </button>
-                </div>
-                <div id="panel-output" class="panel-content active">
-                    <div id="status" class="success">
-                        SDK loaded &mdash; initialize with your credentials
-                    </div>
-                    <div id="output-container">
-                        <pre id="output">
-// Initialize the SDK, then click a button to test...
-// Tip: window.DRT is available in the browser console.</pre
-                        >
-                    </div>
-                </div>
-                <div id="panel-impl" class="panel-content">
-                    <div id="impl-panel">
-                        <h3>Install</h3>
-                        <p>
-                            The SDK is distributed on npm and works in browsers,
-                            Node, and bundlers.
-                        </p>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="npm-install">
-                                Copy
-                            </button>
-                            <pre
-                                id="npm-install"
-                            ><span class="com"># With npm</span>
-npm install @drttix/drt-sdk
-<span class="com"># With yarn</span>
-yarn add @drttix/drt-sdk
-<span class="com"># With pnpm</span>
-pnpm add @drttix/drt-sdk</pre>
-                        </div>
-                        <h3>Browser (ES Modules)</h3>
-                        <p>
-                            Use the prebuilt bundle directly from a CDN or
-                            static host:
-                        </p>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="browser-script">
-                                Copy
-                            </button>
-                            <pre
-                                id="browser-script"
-                            ><span class="kw">&lt;script</span> <span class="fn">type</span>=<span class="str">"module"</span><span class="kw">&gt;</span>
-  <span class="kw">import</span> { DRT } <span class="kw">from</span> <span class="str">'https://cdn.drttix.com/public/sdk/latest/drt-sdk.js'</span>;
-  DRT.<span class="fn">init</span>({
-    shopperGuid: <span class="str">'YOUR_SHOPPER_GUID'</span>,
-    accountId:   <span class="str">'YOUR_ACCOUNT_ID'</span>,
-    apiKey:      <span class="str">'YOUR_API_KEY'</span>,
-  });
-  <span class="kw">const</span> events = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEvents</span>();
-  <span class="fn">console</span>.log(events);
-<span class="kw">&lt;/script&gt;</span></pre>
-                        </div>
-                        <h3>JavaScript / TypeScript</h3>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="js-usage">
-                                Copy
-                            </button>
-                            <pre
-                                id="js-usage"
-                            ><span class="kw">import</span> { DRT } <span class="kw">from</span> <span class="str">'@drttix/drt-sdk'</span>;
-<span class="com">// 1. Initialize once at app startup</span>
-DRT.<span class="fn">init</span>({
-  shopperGuid: <span class="str">'F1199DCD-BB45-4BD0-...'</span>,
-  accountId:   <span class="str">'508'</span>,
-  apiKey:      <span class="str">'your-api-key'</span>,
-});
-<span class="com">// 2. Call any service &mdash; credentials are injected automatically</span>
-<span class="kw">const</span> events   = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEvents</span>();
-<span class="kw">const</span> details  = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEventById</span>(<span class="num">42075</span>);
-<span class="kw">const</span> cart     = <span class="kw">await</span> DRT.shopper.cart.<span class="fn">getCart</span>();</pre>
-                        </div>
-                        <h3>Creating a Shopper Session</h3>
-                        <p>
-                            If you don't have a shopperGuid yet, create one
-                            first:
-                        </p>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="create-session">
-                                Copy
-                            </button>
-                            <pre
-                                id="create-session"
-                            ><span class="kw">const</span> session = <span class="kw">await</span> DRT.shopper.session.<span class="fn">createSession</span>({
-  studioId: <span class="num">508</span>,
-});
-DRT.<span class="fn">init</span>({
-  shopperGuid: session.shopperGuid,
-  accountId:   <span class="fn">String</span>(session.studioId),
-  apiKey:      <span class="str">'your-api-key'</span>,
-});</pre>
-                        </div>
-                        <h3>Holding Seats</h3>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="hold-seats">
-                                Copy
-                            </button>
-                            <pre
-                                id="hold-seats"
-                            ><span class="com">// Reserved seat</span>
-<span class="kw">await</span> DRT.shopper.seat.<span class="fn">holdReservedSeat</span>({
-  eventId: <span class="num">42075</span>,
-  seatNum: <span class="num">101</span>,
-});
-<span class="com">// General admission</span>
-<span class="kw">await</span> DRT.shopper.seat.<span class="fn">holdGaSeat</span>({
-  eventId:   <span class="num">42075</span>,
-  tierId:    <span class="num">1</span>,
-  qty:       <span class="num">2</span>,
-  allOrNone: <span class="kw">true</span>,
-});
-<span class="com">// Release a reserved seat</span>
-<span class="kw">await</span> DRT.shopper.seat.<span class="fn">releaseReservedSeat</span>({
-  eventId: <span class="num">42075</span>,
-  seatNum: <span class="num">101</span>,
-});
-<span class="com">// Release GA seat</span>
-<span class="kw">await</span> DRT.shopper.seat.<span class="fn">releaseGaSeat</span>({
-  eventId: <span class="num">42075</span>,
-  tierId:  <span class="num">1</span>,
-  qty:     <span class="num">1</span>,
-});</pre>
-                        </div>
-                        <h3>Cart Management</h3>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="cart-ex">
-                                Copy
-                            </button>
-                            <pre
-                                id="cart-ex"
-                            ><span class="kw">const</span> { cart } = <span class="kw">await</span> DRT.shopper.cart.<span class="fn">getCart</span>();
-<span class="com">// cart.seats, cart.products, cart.donations</span>
-<span class="kw">for</span> (<span class="kw">const</span> seat <span class="kw">of</span> cart.seats) {
-  <span class="fn">console</span>.log(seat.tierName, seat.displayPrice);
-}
-<span class="com">// Clear entire cart</span>
-<span class="kw">await</span> DRT.shopper.cart.<span class="fn">deleteCart</span>();</pre>
-                        </div>
-                        <h3>Error Handling</h3>
-                        <div class="code-block">
-                            <button class="copy-btn" data-copy="err-handling">
-                                Copy
-                            </button>
-                            <pre id="err-handling"><span class="kw">try</span> {
-  <span class="kw">const</span> events = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEvents</span>();
-} <span class="kw">catch</span> (err) {
-  <span class="com">// err.status = HTTP status (400, 404, 500, ...)</span>
-  <span class="com">// err.body   = API error payload (errorCode, message)</span>
-  <span class="fn">console</span>.error(err.status, err.body);
-}</pre>
-                        </div>
-                        <h3>Available Services</h3>
-                        <div class="code-block">
-                            <pre><span class="kw">DRT</span>.shopper.{ account, event, seat, cart, product,
-                 order, code, giftCard, session, ... }
-<span class="kw">DRT</span>.scanner.{ scanning, database, orders }
-<span class="kw">DRT</span>.portal .{ ... admin-only services }</pre>
-                        </div>
-                        <h3>API Documentation (Swagger)</h3>
-                        <p>
-                            Interactive API docs for each service &mdash; open
-                            directly in the browser:
-                        </p>
-                        <div
-                            style="
-                                display: flex;
-                                flex-direction: column;
-                                gap: 0.4rem;
-                                margin: 0.5rem 0;
-                            "
-                        >
-                            <a
-                                href="https://api.drttix.com/shopper/docs"
-                                target="_blank"
-                                rel="noopener"
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    gap: 0.6rem;
-                                    padding: 0.55rem 0.8rem;
-                                    background: #11111b;
-                                    border: 1px solid #313244;
-                                    border-radius: 6px;
-                                    color: #89b4fa;
-                                    text-decoration: none;
-                                    font-size: 0.85rem;
-                                    font-family: inherit;
-                                "
-                            >
-                                <span style="font-size: 1rem">&#128722;</span>
-                                <span
-                                    ><strong>Shopper API</strong> &mdash;
-                                    events, seats, cart, products,
-                                    checkout</span
-                                >
-                                <span
-                                    style="
-                                        margin-left: auto;
-                                        font-size: 0.7rem;
-                                        color: #6c7086;
-                                    "
-                                    >api.drttix.com/shopper/docs</span
-                                >
-                            </a>
-                            <a
-                                href="https://api.drttix.com/scanner-v3/docs"
-                                target="_blank"
-                                rel="noopener"
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    gap: 0.6rem;
-                                    padding: 0.55rem 0.8rem;
-                                    background: #11111b;
-                                    border: 1px solid #313244;
-                                    border-radius: 6px;
-                                    color: #89b4fa;
-                                    text-decoration: none;
-                                    font-size: 0.85rem;
-                                    font-family: inherit;
-                                "
-                            >
-                                <span style="font-size: 1rem">&#128247;</span>
-                                <span
-                                    ><strong>Scanner API</strong> &mdash;
-                                    scanning, database, orders</span
-                                >
-                                <span
-                                    style="
-                                        margin-left: auto;
-                                        font-size: 0.7rem;
-                                        color: #6c7086;
-                                    "
-                                    >api.drttix.com/scanner-v3/docs</span
-                                >
-                            </a>
-                            <a
-                                href="https://api.drttix.com/admin-portal/docs"
-                                target="_blank"
-                                rel="noopener"
-                                style="
-                                    display: flex;
-                                    align-items: center;
-                                    gap: 0.6rem;
-                                    padding: 0.55rem 0.8rem;
-                                    background: #11111b;
-                                    border: 1px solid #313244;
-                                    border-radius: 6px;
-                                    color: #89b4fa;
-                                    text-decoration: none;
-                                    font-size: 0.85rem;
-                                    font-family: inherit;
-                                "
-                            >
-                                <span style="font-size: 1rem"
-                                    >&#9881;&#65039;</span
-                                >
-                                <span
-                                    ><strong>Portal API</strong> &mdash;
-                                    admin-only services</span
-                                >
-                                <span
-                                    style="
-                                        margin-left: auto;
-                                        font-size: 0.7rem;
-                                        color: #6c7086;
-                                    "
-                                    >api.drttix.com/admin-portal/docs</span
-                                >
-                            </a>
-                        </div>
-                        <div class="impl-note">
-                            <strong>Note:</strong> Once
-                            <code>DRT.init()</code> is called, the
-                            <code>shopperguid</code>, <code>accountid</code>,
-                            and <code>apikey</code> headers are automatically
-                            attached to every request &mdash; you don't need to
-                            pass them as function arguments.
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <script type="module">
-            import { DRT } from '/public/sdk/latest/drt-sdk.js';
-            const out = document.getElementById('output');
-            const status = document.getElementById('status');
-            // Expose DRT globally for console testing
-            window.DRT = DRT;
-            // Display the real SDK version if available
-            if (DRT.version) {
-                document.getElementById('sdkVersionBadge').textContent =
-                    'v' + DRT.version;
-            }
-            function setStatus(msg, isError = false) {
-                status.textContent = msg;
-                status.className = isError ? 'error' : 'success';
-            }
-            function setOutput(data) {
-                out.textContent =
-                    typeof data === 'string'
-                        ? data
-                        : JSON.stringify(data, null, 2);
-            }
-            function requireInit() {
-                if (!DRT.isReady()) {
-                    setStatus(
-                        'SDK not initialized! Fill credentials and click Initialize.',
-                        true,
-                    );
-                    return false;
-                }
-                return true;
-            }
-            async function callApi(fn, description) {
-                setStatus(`Fetching ${description}...`, false);
-                try {
-                    const result = await fn();
-                    setStatus(`Success - ${description}`, false);
-                    setOutput(result);
-                    return result;
-                } catch (err) {
-                    setStatus(`Error: ${err.message}`, true);
-                    setOutput({
-                        error: err.message,
-                        status: err.status,
-                        details: err.body || err.toString(),
-                    });
-                    console.error(err);
-                    return null;
-                }
-            }
-            /* ============ Right-panel tabs (Output / Implementation) ============ */
-            document.querySelectorAll('.panel-tab').forEach((tab) => {
-                tab.addEventListener('click', () => {
-                    document
-                        .querySelectorAll('.panel-tab')
-                        .forEach((t) => t.classList.remove('active'));
-                    document
-                        .querySelectorAll('.panel-content')
-                        .forEach((c) => c.classList.remove('active'));
-                    tab.classList.add('active');
-                    document
-                        .getElementById(`panel-${tab.dataset.panel}`)
-                        .classList.add('active');
-                });
-            });
-            /* ============ Copy-to-clipboard for impl code blocks ============ */
-            document.querySelectorAll('.copy-btn').forEach((btn) => {
-                btn.addEventListener('click', async () => {
-                    const id = btn.dataset.copy;
-                    const el = document.getElementById(id);
-                    if (!el) return;
-                    try {
-                        await navigator.clipboard.writeText(el.innerText);
-                        btn.textContent = 'Copied!';
-                        btn.classList.add('copied');
-                        setTimeout(() => {
-                            btn.textContent = 'Copy';
-                            btn.classList.remove('copied');
-                        }, 1500);
-                    } catch (e) {
-                        console.error(e);
-                    }
-                });
-            });
-            /* ============ API left-panel tabs (Shopper / Scanner) ============ */
-            document.querySelectorAll('.api-tab').forEach((tab) => {
-                tab.addEventListener('click', () => {
-                    document
-                        .querySelectorAll('.api-tab')
-                        .forEach((t) => t.classList.remove('active'));
-                    document
-                        .querySelectorAll('.api-content')
-                        .forEach((c) => c.classList.remove('active'));
-                    tab.classList.add('active');
-                    document
-                        .getElementById(`tab-${tab.dataset.tab}`)
-                        .classList.add('active');
-                });
-            });
-            /* ============ SDK Init / Reset ============ */
-            document
-                .getElementById('btn-init')
-                .addEventListener('click', () => {
-                    const shopperGuid = document
-                        .getElementById('shopperGuid')
-                        .value.trim();
-                    const accountId = document
-                        .getElementById('accountId')
-                        .value.trim();
-                    const apiKey = document
-                        .getElementById('apiKey')
-                        .value.trim();
-                    if (!shopperGuid || !accountId || !apiKey) {
-                        setStatus('Please fill in all fields', true);
-                        return;
-                    }
-                    try {
-                        DRT.init({ shopperGuid, accountId, apiKey });
-                        setStatus('SDK initialized successfully', false);
-                        setOutput({
-                            message: 'SDK initialized',
-                            config: { shopperGuid, accountId, apiKey: '***' },
-                        });
-                    } catch (err) {
-                        setStatus('Init failed: ' + err.message, true);
-                        setOutput({ error: err.message });
-                    }
-                });
-            document
-                .getElementById('btn-check-sdk')
-                .addEventListener('click', () => {
-                    setStatus('SDK Status', false);
-                    const config = DRT.getConfig();
-                    setOutput({
-                        isReady: DRT.isReady(),
-                        config: config
-                            ? {
-                                  shopperGuid: config.shopperGuid,
-                                  accountId: config.accountId,
-                                  apiKey: '***',
-                              }
-                            : null,
-                        availableServices: {
-                            shopper: Object.keys(DRT.shopper),
-                            scanner: Object.keys(DRT.scanner),
-                            portal: Object.keys(DRT.portal || {}),
-                        },
-                    });
-                });
-            document
-                .getElementById('btn-reset')
-                .addEventListener('click', () => {
-                    DRT.reset();
-                    setStatus('SDK has been reset', false);
-                    setOutput({
-                        message: 'SDK has been reset. Initialize again to use.',
-                    });
-                });
-            /* ============ Create Shopper Session ============ */
-            document
-                .getElementById('btn-create-shopper')
-                .addEventListener('click', async () => {
-                    const studioId = parseInt(
-                        document.getElementById('createStudioId').value,
-                    );
-                    const apiKey = document
-                        .getElementById('createApiKey')
-                        .value.trim();
-                    if (!studioId || !apiKey) {
-                        setStatus(
-                            'Please enter both Studio ID and API Key',
-                            true,
-                        );
-                        return;
-                    }
-                    setStatus('Creating shopper session...', false);
-                    try {
-                        const result = await DRT.shopper.session.createSession({
-                            studioId,
-                        });
-                        setOutput(result);
-                        // Populate credential fields and auto-init
-                        document.getElementById('shopperGuid').value =
-                            result.shopperGuid;
-                        document.getElementById('accountId').value =
-                            result.studioId;
-                        document.getElementById('apiKey').value = apiKey;
-                        DRT.init({
-                            shopperGuid: result.shopperGuid,
-                            accountId: String(result.studioId),
-                            apiKey,
-                        });
-                        setStatus(
-                            'Shopper created and SDK initialized!',
-                            false,
-                        );
-                    } catch (err) {
-                        setStatus(`Error: ${err.message}`, true);
-                        setOutput({
-                            error: err.message,
-                            details: err.body || err.toString(),
-                        });
-                    }
-                });
-            /* ============ SHOPPER - Account ============ */
-            document
-                .getElementById('btn-theme')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(() => DRT.shopper.account.getTheme(), 'theme');
-                });
-            document
-                .getElementById('btn-disposition')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(
-                        () => DRT.shopper.account.getDisposition(),
-                        'disposition',
-                    );
-                });
-            document
-                .getElementById('btn-root')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(() => DRT.shopper.account.getRoot(), 'root config');
-                });
-            document
-                .getElementById('btn-landing')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(
-                        () => DRT.shopper.account.getLandingPage(),
-                        'landing page',
-                    );
-                });
-            /* ============ SHOPPER - Events ============ */
-            document
-                .getElementById('btn-events')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    setStatus('Fetching events...', false);
-                    try {
-                        const result = await DRT.shopper.event.getEvents();
-                        const select = document.getElementById('eventSelect');
-                        select.innerHTML =
-                            '<option value="">-- Select an event --</option>';
-                        const events = result.events || result || [];
-                        events.forEach((ev) => {
-                            const opt = document.createElement('option');
-                            opt.value = ev.eventId || ev.id;
-                            opt.textContent = `${ev.eventId || ev.id}: ${ev.eventName || ev.name || 'Unnamed'}`;
-                            select.appendChild(opt);
-                        });
-                        const summary = events.map((e) => ({
-                            id: e.eventId || e.id,
-                            name: e.eventName || e.name || 'Unnamed',
-                            date: e.eventDate || e.date || '',
-                            venue: e.venueName || e.venue || '',
-                        }));
-                        setStatus(`Loaded ${events.length} events`, false);
-                        setOutput({
-                            eventCount: events.length,
-                            events: summary,
-                        });
-                    } catch (err) {
-                        setStatus(`Error: ${err.message}`, true);
-                        setOutput({
-                            error: err.message,
-                            details: err.body || err.toString(),
-                        });
-                    }
-                });
-            document
-                .getElementById('btn-event-details')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    const id = parseInt(
-                        document.getElementById('eventSelect').value,
-                    );
-                    if (!id) {
-                        setStatus('Please select an event', true);
-                        return;
-                    }
-                    setStatus(`Fetching event ${id} details...`, false);
-                    try {
-                        const result = await DRT.shopper.event.getEventById(id);
-                        const sections = result.sections || [];
-                        const tiers = result.tiers || [];
-                        const isGA =
-                            result.event && result.event.isGeneralSeating === 1;
-                        const seatSection =
-                            document.getElementById('section-seats');
-                        seatSection.classList.remove('hidden-section');
-                        seatSection.open = true;
-                        const infoEl =
-                            document.getElementById('seat-type-info');
-                        const gaControls =
-                            document.getElementById('seat-ga-controls');
-                        const baControls =
-                            document.getElementById('seat-ba-controls');
-                        const seatBadge = document.getElementById('seat-badge');
-                        if (isGA) {
-                            infoEl.textContent = `General Admission - ${tiers.length} tier(s), ${sections.length} section(s)`;
-                            infoEl.className = 'info-banner ga';
-                            gaControls.style.display = 'block';
-                            baControls.style.display = 'none';
-                            seatBadge.textContent = 'GA';
-                            seatBadge.className = 'section-badge badge-ga';
-                            const tierSel =
-                                document.getElementById('tierSelect');
-                            tierSel.innerHTML = '';
-                            tiers.forEach((t) => {
-                                const opt = document.createElement('option');
-                                opt.value = t.id;
-                                opt.textContent = `${t.name} - $${t.price} (id: ${t.id})`;
-                                tierSel.appendChild(opt);
-                            });
-                        } else {
-                            infoEl.textContent = `Reserved Seating - ${sections.length} section(s), ${tiers.length} tier(s)`;
-                            infoEl.className = 'info-banner reserved';
-                            gaControls.style.display = 'none';
-                            baControls.style.display = 'block';
-                            seatBadge.textContent = 'Reserved';
-                            seatBadge.className =
-                                'section-badge badge-reserved';
-                        }
-                        const tierSection = document.getElementById(
-                            'section-update-tier',
-                        );
-                        if (tiers.length > 0) {
-                            tierSection.classList.remove('hidden-section');
-                            const tb = document.getElementById('tier-badge');
-                            tb.textContent = `${tiers.length} tier(s)`;
-                            tb.className = 'section-badge badge-count';
-                            const sel =
-                                document.getElementById('updateTierSelect');
-                            sel.innerHTML = '';
-                            tiers.forEach((t) => {
-                                const opt = document.createElement('option');
-                                opt.value = t.id;
-                                opt.textContent = `${t.name} - $${t.price} (id: ${t.id})`;
-                                sel.appendChild(opt);
-                            });
-                        } else {
-                            tierSection.classList.add('hidden-section');
-                        }
-                        document
-                            .getElementById('section-products')
-                            .classList.remove('hidden-section');
-                        document.getElementById('product-badge').textContent =
-                            'Ready';
-                        document.getElementById('product-badge').className =
-                            'section-badge badge-ready';
-                        const sectionRules = result.sectionRules || [];
-                        setStatus('Success', false);
-                        setOutput({
-                            event: {
-                                id: result.event?.id,
-                                name: result.event?.name,
-                                title: result.event?.title,
-                                isGeneralSeating:
-                                    result.event?.isGeneralSeating,
-                                statusId: result.event?.statusId,
-                            },
-                            sections: sections.map((s) => ({
-                                id: s.id,
-                                name: s.name,
-                                isGA: s.is_general_seating,
-                                gaCapacity: s.ga_capacity,
-                            })),
-                            sectionRules: sectionRules.map((r) => ({
-                                section: r.section,
-                                sectionId: r.section_id,
-                                rowLow: r.row_low,
-                                rowHigh: r.row_high,
-                                seatLow: r.seat_low,
-                                seatHigh: r.seat_high,
-                            })),
-                            tiers: tiers.map((t) => ({
-                                id: t.id,
-                                name: t.name,
-                                price: t.price,
-                                sectionId: t.section_id,
-                            })),
-                        });
-                    } catch (err) {
-                        setStatus(`Error: ${err.message}`, true);
-                        setOutput({
-                            error: err.message,
-                            details: err.body || err.toString(),
-                        });
-                    }
-                });
-            /* ============ SHOPPER - Seats ============ */
-            document
-                .getElementById('btn-hold-ga')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    const eventId = parseInt(
-                        document.getElementById('eventSelect').value,
-                    );
-                    const tierId = parseInt(
-                        document.getElementById('tierSelect').value,
-                    );
-                    const qty =
-                        parseInt(document.getElementById('gaQty').value) || 1;
-                    if (!eventId || !tierId) {
-                        setStatus('Select event + tier first', true);
-                        return;
-                    }
-                    const result = await callApi(
-                        () =>
-                            DRT.shopper.seat.holdGaSeat({
-                                eventId,
-                                allOrNone: true,
-                                tierId,
-                                qty,
-                            }),
-                        `hold ${qty} GA seat(s) for event ${eventId}`,
-                    );
-                    if (result) silentRefreshCart();
-                });
-            document
-                .getElementById('btn-hold-reserved')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    const eventId = parseInt(
-                        document.getElementById('eventSelect').value,
-                    );
-                    const seatNum = parseInt(
-                        document.getElementById('reservedSeatNum').value,
-                    );
-                    if (!eventId || !seatNum) {
-                        setStatus('Select event + enter seat number', true);
-                        return;
-                    }
-                    const result = await callApi(
-                        () =>
-                            DRT.shopper.seat.holdReservedSeat({
-                                eventId,
-                                seatNum,
-                            }),
-                        `hold reserved seat #${seatNum}`,
-                    );
-                    if (result) silentRefreshCart();
-                });
-            document
-                .getElementById('btn-update-tier')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const eventId = parseInt(
-                        document.getElementById('eventSelect').value,
-                    );
-                    const seatNum = parseInt(
-                        document.getElementById('updateTierSeatNum').value,
-                    );
-                    const tierId = parseInt(
-                        document.getElementById('updateTierSelect').value,
-                    );
-                    if (!eventId || !seatNum || !tierId) {
-                        setStatus('Missing fields for tier update', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.shopper.seat.updateTier({
-                                eventId,
-                                seatNum,
-                                tierId,
-                            }),
-                        `update seat #${seatNum} to tier ${tierId}`,
-                    ).then((r) => r && silentRefreshCart());
-                });
-            /* ============ SHOPPER - Products ============ */
-            document
-                .getElementById('btn-get-products')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(
-                        () => DRT.shopper.product.getProducts(),
-                        'products',
-                    );
-                });
-            document
-                .getElementById('btn-add-product')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    const id = parseInt(
-                        document.getElementById('productId').value,
-                    );
-                    const hash = document
-                        .getElementById('productHash')
-                        .value.trim();
-                    const variantId =
-                        parseInt(
-                            document.getElementById('productVariant').value,
-                        ) || 0;
-                    const quantity =
-                        parseInt(document.getElementById('productQty').value) ||
-                        1;
-                    if (!id || !hash) {
-                        setStatus(
-                            'Enter Product ID and Hash (from Get Products)',
-                            true,
-                        );
-                        return;
-                    }
-                    const result = await callApi(
-                        () =>
-                            DRT.shopper.product.addProduct({
-                                id,
-                                hash,
-                                text: '',
-                                quantity,
-                                variantId,
-                            }),
-                        `add product ${id}`,
-                    );
-                    if (result) silentRefreshCart();
-                });
-            /* ============ SHOPPER - Cart (with per-item remove) ============ */
-            async function refreshCart() {
-                if (!DRT.isReady()) return;
-                try {
-                    const result = await DRT.shopper.cart.getCart();
-                    renderCart(result);
-                    setOutput(result);
-                    setStatus('Cart refreshed', false);
-                } catch (err) {
-                    setStatus(`Error: ${err.message}`, true);
-                    setOutput({
-                        error: err.message,
-                        details: err.body || err.toString(),
-                    });
-                }
-            }
-            // Silently update only the cart widget without touching the output panel.
-            // Used after hold/add/remove so the action result stays visible.
-            async function silentRefreshCart(delayMs = 300) {
-                if (!DRT.isReady()) return;
-                await new Promise((r) => setTimeout(r, delayMs));
-                try {
-                    const result = await DRT.shopper.cart.getCart();
-                    renderCart(result);
-                } catch (_) {
-                    // silent — don't overwrite current output on background refresh failure
-                }
-            }
-            function renderCart(cartResponse) {
-                const container = document.getElementById('cart-display');
-                const cart = cartResponse?.cart || cartResponse || {};
-                const seats = cart.seats || [];
-                const products = cart.products || [];
-                const donations = cart.donations || [];
-                container.innerHTML = '';
-                const totalItems =
-                    seats.length + products.length + donations.length;
-                const cartBadge = document.getElementById('cart-badge');
-                if (totalItems === 0) {
-                    cartBadge.textContent = 'empty';
-                    cartBadge.className = 'section-badge';
-                    container.innerHTML =
-                        '<div class="empty-cart">Cart is empty</div>';
-                    return;
-                }
-                cartBadge.textContent = `${totalItems} item${totalItems !== 1 ? 's' : ''}`;
-                cartBadge.className = 'section-badge badge-count';
-                let total = 0;
-                seats.forEach((s, idx) => {
-                    total += s.displayPrice || s.price || 0;
-                    const row = document.createElement('div');
-                    row.className = 'cart-item';
-                    const seatLabel = s.isGeneralSeating
-                        ? `GA - ${s.tierName || 'General'}`
-                        : `${s.section || ''} ${s.row ? 'Row ' + s.row : ''} Seat ${s.seat || s.num}`;
-                    row.innerHTML = `
-                        <div class="cart-item-icon seat">${s.isGeneralSeating ? 'GA' : 'S'}</div>
-                        <div class="cart-item-body">
-                            <div class="cart-item-title">${escapeHtml(s.shortName || 'Event')}</div>
-                            <div class="cart-item-subtitle">${escapeHtml(seatLabel)}${s.tierName ? ' - ' + escapeHtml(s.tierName) : ''}</div>
-                        </div>
-                        <div class="cart-item-price">$${(s.displayPrice ?? s.price ?? 0).toFixed(2)}</div>
-                        <button class="small danger" data-remove-seat="${idx}">Remove</button>
-                    `;
-                    row.querySelector('[data-remove-seat]').addEventListener(
-                        'click',
-                        () => removeSeatFromCart(s),
-                    );
-                    container.appendChild(row);
-                });
-                products.forEach((p) => {
-                    total += (p.price || 0) * (p.qty || 1);
-                    const row = document.createElement('div');
-                    row.className = 'cart-item';
-                    row.innerHTML = `
-                        <div class="cart-item-icon product">P</div>
-                        <div class="cart-item-body">
-                            <div class="cart-item-title">${escapeHtml(p.name || 'Product')}${p.variantName ? ' - ' + escapeHtml(p.variantName) : ''}</div>
-                            <div class="cart-item-subtitle">Qty: ${p.qty} - id: ${p.productId}</div>
-                        </div>
-                        <div class="cart-item-price">$${((p.price || 0) * (p.qty || 1)).toFixed(2)}</div>
-                        <button class="small danger" data-remove-product>Remove</button>
-                    `;
-                    row.querySelector('[data-remove-product]').addEventListener(
-                        'click',
-                        () => removeProductFromCart(p),
-                    );
-                    container.appendChild(row);
-                });
-                donations.forEach((d) => {
-                    total += d.amount || 0;
-                    const row = document.createElement('div');
-                    row.className = 'cart-item';
-                    row.innerHTML = `
-                        <div class="cart-item-icon donation">D</div>
-                        <div class="cart-item-body">
-                            <div class="cart-item-title">${escapeHtml(d.name || 'Donation')}</div>
-                            <div class="cart-item-subtitle">Fund id: ${d.id}</div>
-                        </div>
-                        <div class="cart-item-price">$${(d.amount || 0).toFixed(2)}</div>
-                    `;
-                    container.appendChild(row);
-                });
-                const sum = document.createElement('div');
-                sum.className = 'cart-summary';
-                sum.innerHTML = `<span>Subtotal</span><span>$${total.toFixed(2)}</span>`;
-                container.appendChild(sum);
-            }
-            function escapeHtml(s) {
-                return String(s ?? '').replace(
-                    /[&<>"']/g,
-                    (c) =>
-                        ({
-                            '&': '&amp;',
-                            '<': '&lt;',
-                            '>': '&gt;',
-                            '"': '&quot;',
-                            "'": '&#39;',
-                        })[c],
-                );
-            }
-            async function removeSeatFromCart(seat) {
-                if (!requireInit()) return;
-                const eventId = seat.showId;
-                if (seat.isGeneralSeating) {
-                    const qty = 1;
-                    const tierId = seat.tierId;
-                    const ok = await callApi(
-                        () =>
-                            DRT.shopper.seat.releaseGaSeat({
-                                eventId,
-                                tierId,
-                                qty,
-                            }),
-                        `release GA seat (tier ${tierId})`,
-                    );
-                    if (ok !== null) silentRefreshCart();
-                } else {
-                    const seatNum = seat.num;
-                    const ok = await callApi(
-                        () =>
-                            DRT.shopper.seat.releaseReservedSeat({
-                                eventId,
-                                seatNum,
-                            }),
-                        `release reserved seat #${seatNum}`,
-                    );
-                    if (ok !== null) silentRefreshCart();
-                }
-            }
-            async function removeProductFromCart(product) {
-                if (!requireInit()) return;
-                const ok = await callApi(
-                    () =>
-                        DRT.shopper.product.deleteProduct({
-                            id: product.productId,
-                            hash: product.guid || '',
-                            text: product.text || '',
-                            variantId: product.variantId || 0,
-                        }),
-                    `remove product ${product.productId}`,
-                );
-                if (ok !== null) silentRefreshCart();
-            }
-            document
-                .getElementById('btn-cart')
-                .addEventListener('click', refreshCart);
-            document
-                .getElementById('btn-delete-cart')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    if (!confirm('Delete the entire cart?')) return;
-                    await callApi(
-                        () => DRT.shopper.cart.deleteCart(),
-                        'delete cart',
-                    );
-                    refreshCart();
-                });
-            /* ============ SHOPPER - Orders / Codes / Gift Cards ============ */
-            document
-                .getElementById('btn-receipt')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const guid = document
-                        .getElementById('orderGuid')
-                        .value.trim();
-                    if (!guid) {
-                        setStatus('Enter an Order GUID', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.order.getReceipt(guid),
-                        'receipt',
-                    );
-                });
-            document
-                .getElementById('btn-validate-code')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const code = document
-                        .getElementById('promoCode')
-                        .value.trim();
-                    if (!code) {
-                        setStatus('Enter a code', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.code.validateCode(code),
-                        `code validation`,
-                    );
-                });
-            document
-                .getElementById('btn-gift-balance')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const num = document
-                        .getElementById('giftCardNumber')
-                        .value.trim();
-                    if (!num) {
-                        setStatus('Enter a gift card number', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.giftCard.getBalance(num),
-                        'gift card balance',
-                    );
-                });
-            /* ============ SCANNER API ============ */
-            document
-                .getElementById('btn-strings')
-                .addEventListener('click', () => {
-                    callApi(
-                        () => DRT.scanner.scanning.appControllerGetStrings(),
-                        'scanner strings',
-                    );
-                });
-            document
-                .getElementById('btn-scanner-db')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    const device = document
-                        .getElementById('scannerDevice')
-                        .value.trim();
-                    const user = document
-                        .getElementById('scannerUser')
-                        .value.trim();
-                    if (!showCode) {
-                        setStatus('Enter a Show Code', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.scanner.database.download(
-                                showCode,
-                                device,
-                                user,
-                                'en',
-                            ),
-                        'scanner database',
-                    );
-                });
-            document
-                .getElementById('btn-scanner-query')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    if (!showCode) {
-                        setStatus('Enter a Show Code', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.scanner.database.query(showCode, 'sections'),
-                        'sections query',
-                    );
-                });
-            document
-                .getElementById('btn-scanner-by-phone')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    const phone = document
-                        .getElementById('scannerPhone')
-                        .value.trim();
-                    if (!showCode || !phone) {
-                        setStatus('Enter Show Code and Phone', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.scanner.orders.ordersControllerGetOrdersByPhone(
-                                showCode,
-                                phone,
-                            ),
-                        'orders by phone',
-                    );
-                });
-            document
-                .getElementById('btn-scanner-by-name')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    const name = document
-                        .getElementById('scannerName')
-                        .value.trim();
-                    if (!showCode || !name) {
-                        setStatus('Enter Show Code and Name', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.scanner.orders.ordersControllerGetOrdersByName(
-                                showCode,
-                                name,
-                            ),
-                        'orders by name',
-                    );
-                });
-            console.log('DRT SDK available at window.DRT for console testing');
-        </script>
-    </body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>DRT SDK &mdash; Test Console</title>
+        <link rel="icon" href="data:," />
+        <style>
+            :root {
+                --primary: #4f46e5;
+                --primary-hover: #4338ca;
+                --primary-light: #eef2ff;
+                --danger: #dc2626;
+                --danger-hover: #b91c1c;
+                --success: #059669;
+                --success-light: #d1fae5;
+                --warning: #d97706;
+                --warning-light: #fef3c7;
+                --info: #0284c7;
+                --info-light: #e0f2fe;
+                --text: #111827;
+                --text-muted: #6b7280;
+                --border: #e5e7eb;
+                --surface: #ffffff;
+                --surface-alt: #f9fafb;
+                --code-bg: #1e1e2e;
+                --code-text: #e4e4e7;
+            }
+            * {
+                box-sizing: border-box;
+            }
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+                height: 100%;
+                font-family:
+                    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+                    'Helvetica Neue', sans-serif;
+                color: var(--text);
+                background: var(--surface-alt);
+                font-size: 14px;
+                line-height: 1.5;
+            }
+            .app {
+                display: flex;
+                height: 100vh;
+                overflow: hidden;
+            }
+            .left-panel {
+                width: 50%;
+                min-width: 50%;
+                max-width: 50%;
+                overflow-y: auto;
+                padding: 1.25rem 1.5rem 2rem;
+                background: var(--surface-alt);
+            }
+            .right-panel {
+                width: 50%;
+                min-width: 50%;
+                max-width: 50%;
+                background: var(--code-bg);
+                color: var(--code-text);
+                display: flex;
+                flex-direction: column;
+                border-left: 1px solid var(--border);
+                height: 100vh;
+            }
+            h1 {
+                font-size: 1.5rem;
+                font-weight: 700;
+                margin: 0 0 0.25rem;
+                color: var(--text);
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+            h1 .badge-version {
+                font-size: 0.7rem;
+                background: var(--primary-light);
+                color: var(--primary);
+                padding: 0.15rem 0.5rem;
+                border-radius: 999px;
+                font-weight: 600;
+            }
+            .subtitle {
+                color: var(--text-muted);
+                margin: 0 0 1.25rem;
+                font-size: 0.875rem;
+            }
+            h2.section-title {
+                font-size: 0.75rem;
+                font-weight: 700;
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                color: var(--text-muted);
+                margin: 1.5rem 0 0.5rem;
+                padding: 0;
+                border: none;
+            }
+            button {
+                padding: 0.4rem 0.85rem;
+                font-size: 0.85rem;
+                font-weight: 500;
+                cursor: pointer;
+                border: 1px solid var(--border);
+                border-radius: 6px;
+                background: var(--surface);
+                color: var(--text);
+                transition: all 0.15s;
+            }
+            button:hover:not(:disabled) {
+                background: var(--surface-alt);
+                border-color: #d1d5db;
+            }
+            button:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            button.primary {
+                background: var(--primary);
+                color: white;
+                border-color: var(--primary);
+            }
+            button.primary:hover:not(:disabled) {
+                background: var(--primary-hover);
+                border-color: var(--primary-hover);
+            }
+            button.danger {
+                background: var(--surface);
+                color: var(--danger);
+                border-color: #fecaca;
+            }
+            button.danger:hover:not(:disabled) {
+                background: #fef2f2;
+            }
+            button.small {
+                padding: 0.25rem 0.6rem;
+                font-size: 0.75rem;
+            }
+            input,
+            select {
+                padding: 0.4rem 0.6rem;
+                font-size: 0.85rem;
+                border: 1px solid var(--border);
+                border-radius: 6px;
+                background: var(--surface);
+                color: var(--text);
+                font-family: inherit;
+            }
+            input:focus,
+            select:focus {
+                outline: none;
+                border-color: var(--primary);
+                box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+            }
+            code {
+                background: #eef1f5;
+                color: #374151;
+                padding: 0.1rem 0.35rem;
+                border-radius: 4px;
+                font-size: 0.78rem;
+                font-family:
+                    ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
+            }
+            /* Config card */
+            .card {
+                background: var(--surface);
+                border: 1px solid var(--border);
+                border-radius: 10px;
+                padding: 1rem;
+                margin-bottom: 1rem;
+            }
+            .card-title {
+                font-size: 0.9rem;
+                font-weight: 600;
+                margin: 0 0 0.5rem;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+            .card-title .step {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 1.5rem;
+                height: 1.5rem;
+                background: var(--primary);
+                color: white;
+                border-radius: 50%;
+                font-size: 0.75rem;
+                font-weight: 700;
+            }
+            .quick-start {
+                background: var(--primary-light);
+                border: 1px solid #c7d2fe;
+                padding: 0.75rem;
+                border-radius: 8px;
+                margin-bottom: 0.75rem;
+            }
+            .field {
+                display: block;
+                font-size: 0.8rem;
+                font-weight: 500;
+                color: var(--text-muted);
+                margin: 0.6rem 0 0.25rem;
+            }
+            .field + input {
+                width: 100%;
+            }
+            .inline-row {
+                display: flex;
+                gap: 0.5rem;
+                align-items: center;
+                flex-wrap: wrap;
+            }
+            .inline-row label {
+                font-size: 0.8rem;
+                font-weight: 500;
+                color: var(--text-muted);
+            }
+            .inline-row input,
+            .inline-row select {
+                flex: 1;
+                min-width: 0;
+            }
+            .btn-row {
+                display: flex;
+                gap: 0.5rem;
+                flex-wrap: wrap;
+                margin-top: 0.5rem;
+            }
+            /* Tabs for API */
+            .api-tabs {
+                display: flex;
+                gap: 0.25rem;
+                border-bottom: 1px solid var(--border);
+                margin-bottom: 1rem;
+            }
+            .api-tab {
+                padding: 0.5rem 0.9rem;
+                border: none;
+                background: none;
+                cursor: pointer;
+                font-size: 0.875rem;
+                font-weight: 500;
+                color: var(--text-muted);
+                border-bottom: 2px solid transparent;
+                margin-bottom: -1px;
+                border-radius: 0;
+            }
+            .api-tab:hover {
+                color: var(--text);
+                background: none;
+            }
+            .api-tab.active {
+                color: var(--primary);
+                border-bottom-color: var(--primary);
+            }
+            .api-content {
+                display: none;
+            }
+            .api-content.active {
+                display: block;
+            }
+            /* Collapsible sections */
+            details.api-section {
+                border: 1px solid var(--border);
+                border-radius: 8px;
+                margin-bottom: 0.5rem;
+                background: var(--surface);
+                overflow: hidden;
+            }
+            details.api-section > summary {
+                padding: 0.65rem 0.9rem;
+                font-weight: 600;
+                font-size: 0.9rem;
+                cursor: pointer;
+                user-select: none;
+                list-style: none;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                transition: background 0.15s;
+            }
+            details.api-section > summary:hover {
+                background: var(--surface-alt);
+            }
+            details.api-section > summary::-webkit-details-marker {
+                display: none;
+            }
+            details.api-section > summary::before {
+                content: '\25B8';
+                font-size: 0.7rem;
+                color: #9ca3af;
+                transition: transform 0.15s;
+                flex-shrink: 0;
+            }
+            details.api-section[open] > summary::before {
+                transform: rotate(90deg);
+            }
+            details.api-section > .section-body {
+                padding: 0.75rem 0.9rem 0.9rem;
+                border-top: 1px solid var(--border);
+                background: var(--surface-alt);
+            }
+            details.api-section.hidden-section {
+                display: none;
+            }
+            .section-badge {
+                font-size: 0.7rem;
+                padding: 0.1rem 0.45rem;
+                border-radius: 999px;
+                font-weight: 600;
+                margin-left: auto;
+                background: #f3f4f6;
+                color: var(--text-muted);
+            }
+            .badge-ga {
+                background: var(--success-light);
+                color: var(--success);
+            }
+            .badge-reserved {
+                background: var(--info-light);
+                color: var(--info);
+            }
+            .badge-ready {
+                background: var(--success-light);
+                color: var(--success);
+            }
+            .badge-count {
+                background: var(--primary-light);
+                color: var(--primary);
+            }
+            /* Info banners */
+            .info-banner {
+                padding: 0.5rem 0.75rem;
+                border-radius: 6px;
+                font-size: 0.825rem;
+                margin-bottom: 0.5rem;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+            .info-banner.ga {
+                background: var(--success-light);
+                color: var(--success);
+            }
+            .info-banner.reserved {
+                background: var(--info-light);
+                color: var(--info);
+            }
+            .info-banner.warn {
+                background: var(--warning-light);
+                color: var(--warning);
+            }
+            /* Cart items */
+            .cart-items {
+                display: flex;
+                flex-direction: column;
+                gap: 0.4rem;
+                margin-top: 0.5rem;
+            }
+            .cart-item {
+                display: flex;
+                align-items: center;
+                gap: 0.75rem;
+                padding: 0.6rem 0.75rem;
+                background: var(--surface);
+                border: 1px solid var(--border);
+                border-radius: 6px;
+            }
+            .cart-item-icon {
+                width: 2rem;
+                height: 2rem;
+                border-radius: 6px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 1rem;
+                flex-shrink: 0;
+            }
+            .cart-item-icon.seat {
+                background: var(--info-light);
+                color: var(--info);
+            }
+            .cart-item-icon.product {
+                background: var(--warning-light);
+                color: var(--warning);
+            }
+            .cart-item-icon.donation {
+                background: var(--success-light);
+                color: var(--success);
+            }
+            .cart-item-body {
+                flex: 1;
+                min-width: 0;
+            }
+            .cart-item-title {
+                font-weight: 600;
+                font-size: 0.875rem;
+                color: var(--text);
+            }
+            .cart-item-subtitle {
+                font-size: 0.75rem;
+                color: var(--text-muted);
+                margin-top: 0.1rem;
+            }
+            .cart-item-price {
+                font-weight: 600;
+                font-size: 0.875rem;
+                color: var(--text);
+                margin-right: 0.5rem;
+                white-space: nowrap;
+            }
+            .cart-summary {
+                background: var(--primary-light);
+                border: 1px solid #c7d2fe;
+                border-radius: 6px;
+                padding: 0.6rem 0.75rem;
+                margin-top: 0.75rem;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-weight: 600;
+                font-size: 0.9rem;
+            }
+            .empty-cart {
+                text-align: center;
+                padding: 1.5rem 0.5rem;
+                color: var(--text-muted);
+                font-size: 0.875rem;
+                font-style: italic;
+            }
+            /* Right panel output */
+            .panel-tabs {
+                display: flex;
+                background: #181825;
+                border-bottom: 1px solid #313244;
+                padding: 0 0.5rem;
+            }
+            .panel-tab {
+                padding: 0.75rem 1rem;
+                border: none;
+                background: none;
+                cursor: pointer;
+                font-size: 0.85rem;
+                font-weight: 500;
+                color: #a1a1aa;
+                border-bottom: 2px solid transparent;
+                margin-bottom: -1px;
+                border-radius: 0;
+                font-family: inherit;
+            }
+            .panel-tab:hover {
+                background: none;
+                color: var(--code-text);
+            }
+            .panel-tab.active {
+                color: #a5b4fc;
+                border-bottom-color: #a5b4fc;
+            }
+            .panel-content {
+                flex: 1;
+                display: none;
+                flex-direction: column;
+                min-height: 0;
+            }
+            .panel-content.active {
+                display: flex;
+            }
+            #status {
+                padding: 0.5rem 1rem;
+                font-weight: 600;
+                background: #181825;
+                border-bottom: 1px solid #313244;
+                font-size: 0.8rem;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+            #status.success {
+                color: #a6e3a1;
+            }
+            #status.error {
+                color: #f38ba8;
+            }
+            #status::before {
+                content: '';
+                width: 8px;
+                height: 8px;
+                border-radius: 50%;
+                background: currentColor;
+                flex-shrink: 0;
+            }
+            #output-container {
+                flex: 1;
+                overflow: auto;
+                padding: 1rem;
+                min-width: 0;
+            }
+            pre {
+                background: transparent;
+                margin: 0;
+                white-space: pre-wrap;
+                word-wrap: break-word;
+                overflow-wrap: break-word;
+                font-size: 0.8rem;
+                font-family:
+                    ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
+                color: var(--code-text);
+            }
+            /* Implementation panel */
+            #impl-panel {
+                padding: 1.25rem;
+                overflow-y: auto;
+                flex: 1;
+                background: #181825;
+            }
+            #impl-panel h3 {
+                color: #cdd6f4;
+                margin: 1.25rem 0 0.5rem;
+                font-size: 0.95rem;
+                font-weight: 600;
+            }
+            #impl-panel h3:first-child {
+                margin-top: 0;
+            }
+            #impl-panel p {
+                color: #bac2de;
+                font-size: 0.85rem;
+                margin: 0.25rem 0 0.5rem;
+            }
+            .code-block {
+                position: relative;
+                background: #11111b;
+                border: 1px solid #313244;
+                border-radius: 8px;
+                padding: 0.8rem 0.9rem;
+                margin: 0.5rem 0;
+            }
+            .code-block pre {
+                font-size: 0.78rem;
+                line-height: 1.55;
+                color: #cdd6f4;
+            }
+            .code-block .copy-btn {
+                position: absolute;
+                top: 0.5rem;
+                right: 0.5rem;
+                padding: 0.2rem 0.5rem;
+                font-size: 0.7rem;
+                background: #313244;
+                color: #cdd6f4;
+                border: 1px solid #45475a;
+                border-radius: 4px;
+                cursor: pointer;
+                opacity: 0;
+                transition: opacity 0.15s;
+            }
+            .code-block:hover .copy-btn {
+                opacity: 1;
+            }
+            .code-block .copy-btn:hover {
+                background: #45475a;
+            }
+            .code-block .copy-btn.copied {
+                background: #a6e3a1;
+                color: #11111b;
+            }
+            .impl-note {
+                background: #181e2e;
+                border-left: 3px solid #89b4fa;
+                padding: 0.6rem 0.85rem;
+                margin: 0.75rem 0;
+                border-radius: 0 6px 6px 0;
+                font-size: 0.82rem;
+                color: #bac2de;
+            }
+            .kw {
+                color: #cba6f7;
+            }
+            .str {
+                color: #a6e3a1;
+            }
+            .com {
+                color: #6c7086;
+                font-style: italic;
+            }
+            .fn {
+                color: #89b4fa;
+            }
+            .num {
+                color: #fab387;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="app">
+            <!-- LEFT PANEL: Controls -->
+            <div class="left-panel">
+                <h1>
+                    DRT SDK Test Console
+                    <span id="sdkVersionBadge" class="badge-version"
+                        >v0.9.7</span
+                    >
+                </h1>
+                <p class="subtitle">
+                    Interactive playground for the
+                    <code>@drttix/drt-sdk</code> shopper & scanner APIs.
+                </p>
+                <!-- Step 1 -->
+                <div class="card">
+                    <div class="card-title">
+                        <span class="step">1</span> Connect SDK
+                    </div>
+                    <div class="quick-start">
+                        <strong style="font-size: 0.85rem"
+                            >Quick Start &mdash; Create a new shopper
+                            session</strong
+                        >
+                        <div
+                            class="inline-row"
+                            style="margin-top: 0.5rem; gap: 0.4rem"
+                        >
+                            <input
+                                type="number"
+                                id="createStudioId"
+                                placeholder="Studio ID"
+                                style="max-width: 110px"
+                            />
+                            <input
+                                type="text"
+                                id="createApiKey"
+                                placeholder="API Key"
+                            />
+                            <button id="btn-create-shopper" class="primary">
+                                Create
+                            </button>
+                        </div>
+                    </div>
+                    <label class="field" for="shopperGuid">Shopper GUID</label>
+                    <input
+                        type="text"
+                        id="shopperGuid"
+                        placeholder="e.g., F1199DCD-BB45-4BD0-..."
+                    />
+                    <label class="field" for="accountId">Account ID</label>
+                    <input type="text" id="accountId" placeholder="e.g., 508" />
+                    <label class="field" for="apiKey">API Key</label>
+                    <input type="text" id="apiKey" placeholder="your-api-key" />
+                    <div class="btn-row">
+                        <button id="btn-init" class="primary">
+                            Initialize SDK
+                        </button>
+                        <button id="btn-check-sdk">Check Status</button>
+                        <button id="btn-reset" class="danger">Reset</button>
+                    </div>
+                </div>
+                <!-- Step 2 -->
+                <div class="card">
+                    <div class="card-title">
+                        <span class="step">2</span> Explore APIs
+                    </div>
+                    <div class="api-tabs">
+                        <button class="api-tab active" data-tab="shopper">
+                            Shopper
+                        </button>
+                        <button class="api-tab" data-tab="scanner">
+                            Scanner
+                        </button>
+                    </div>
+                    <!-- SHOPPER -->
+                    <div id="tab-shopper" class="api-content active">
+                        <details class="api-section" open>
+                            <summary>
+                                Account <code>DRT.shopper.account</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="btn-row">
+                                    <button id="btn-theme">Theme</button>
+                                    <button id="btn-disposition">
+                                        Disposition
+                                    </button>
+                                    <button id="btn-root">Root Config</button>
+                                    <button id="btn-landing">
+                                        Landing Page
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                        <details class="api-section" open>
+                            <summary>
+                                Events <code>DRT.shopper.event</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="btn-row">
+                                    <button id="btn-events" class="primary">
+                                        Get All Events
+                                    </button>
+                                </div>
+                                <div
+                                    class="inline-row"
+                                    style="margin-top: 0.5rem"
+                                >
+                                    <select id="eventSelect" style="flex: 1">
+                                        <option value="">
+                                            &mdash; Click "Get All Events" first
+                                            &mdash;
+                                        </option>
+                                    </select>
+                                    <button id="btn-event-details">
+                                        Get Details
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                        <details
+                            id="section-seats"
+                            class="api-section hidden-section"
+                        >
+                            <summary>
+                                Seats
+                                <code>DRT.shopper.seat</code>
+                                <span
+                                    id="seat-badge"
+                                    class="section-badge"
+                                ></span>
+                            </summary>
+                            <div class="section-body">
+                                <div id="seat-type-info" class="info-banner">
+                                    Loading&hellip;
+                                </div>
+                                <div
+                                    id="seat-ga-controls"
+                                    style="display: none"
+                                >
+                                    <div class="inline-row">
+                                        <label>Tier</label>
+                                        <select
+                                            id="tierSelect"
+                                            style="flex: 2"
+                                        ></select>
+                                        <label>Qty</label>
+                                        <input
+                                            type="number"
+                                            id="gaQty"
+                                            value="1"
+                                            style="max-width: 70px"
+                                        />
+                                        <button
+                                            id="btn-hold-ga"
+                                            class="primary"
+                                        >
+                                            Hold
+                                        </button>
+                                    </div>
+                                </div>
+                                <div
+                                    id="seat-ba-controls"
+                                    style="display: none"
+                                >
+                                    <div class="inline-row">
+                                        <label>Seat #</label>
+                                        <input
+                                            type="number"
+                                            id="reservedSeatNum"
+                                            placeholder="e.g., 1"
+                                            style="flex: 1"
+                                        />
+                                        <button
+                                            id="btn-hold-reserved"
+                                            class="primary"
+                                        >
+                                            Hold Reserved Seat
+                                        </button>
+                                    </div>
+                                    <p
+                                        style="
+                                            margin: 0.35rem 0 0;
+                                            font-size: 0.75rem;
+                                            color: var(--text-muted);
+                                        "
+                                    >
+                                        Use section rules from event details to
+                                        find valid seat numbers.
+                                    </p>
+                                </div>
+                            </div>
+                        </details>
+                        <details
+                            id="section-update-tier"
+                            class="api-section hidden-section"
+                        >
+                            <summary>
+                                Update Tier
+                                <code>DRT.shopper.seat.updateTier</code>
+                                <span
+                                    id="tier-badge"
+                                    class="section-badge"
+                                ></span>
+                            </summary>
+                            <div class="section-body">
+                                <p
+                                    style="
+                                        margin: 0 0 0.5rem;
+                                        color: var(--text-muted);
+                                        font-size: 0.8rem;
+                                    "
+                                >
+                                    Change the pricing tier for a held seat.
+                                </p>
+                                <div class="inline-row">
+                                    <label>Seat #</label>
+                                    <input
+                                        type="number"
+                                        id="updateTierSeatNum"
+                                        placeholder="seat"
+                                        style="max-width: 90px"
+                                    />
+                                    <label>Tier</label>
+                                    <select
+                                        id="updateTierSelect"
+                                        style="flex: 2"
+                                    ></select>
+                                    <button id="btn-update-tier">Update</button>
+                                </div>
+                            </div>
+                        </details>
+                        <details
+                            id="section-products"
+                            class="api-section hidden-section"
+                        >
+                            <summary>
+                                Products
+                                <code>DRT.shopper.product</code>
+                                <span
+                                    id="product-badge"
+                                    class="section-badge"
+                                ></span>
+                            </summary>
+                            <div class="section-body">
+                                <div class="btn-row">
+                                    <button id="btn-get-products">
+                                        Get Products
+                                    </button>
+                                </div>
+                                <div
+                                    class="inline-row"
+                                    style="margin-top: 0.5rem; gap: 0.4rem"
+                                >
+                                    <input
+                                        type="number"
+                                        id="productId"
+                                        placeholder="ID"
+                                        style="max-width: 70px"
+                                    />
+                                    <input
+                                        type="text"
+                                        id="productHash"
+                                        placeholder="hash"
+                                        style="max-width: 120px"
+                                    />
+                                    <input
+                                        type="number"
+                                        id="productVariant"
+                                        placeholder="Variant"
+                                        value="0"
+                                        style="max-width: 75px"
+                                    />
+                                    <input
+                                        type="number"
+                                        id="productQty"
+                                        placeholder="Qty"
+                                        value="1"
+                                        style="max-width: 60px"
+                                    />
+                                    <button
+                                        id="btn-add-product"
+                                        class="primary"
+                                    >
+                                        Add
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                        <details class="api-section" open>
+                            <summary>
+                                Cart
+                                <code>DRT.shopper.cart</code>
+                                <span
+                                    id="cart-badge"
+                                    class="section-badge"
+                                ></span>
+                            </summary>
+                            <div class="section-body">
+                                <div class="btn-row">
+                                    <button id="btn-cart" class="primary">
+                                        Get Cart
+                                    </button>
+                                    <button id="btn-delete-cart" class="danger">
+                                        Delete Cart
+                                    </button>
+                                </div>
+                                <div id="cart-display" class="cart-items"></div>
+                            </div>
+                        </details>
+                        <details class="api-section">
+                            <summary>
+                                Orders <code>DRT.shopper.order</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="inline-row">
+                                    <label>Order GUID</label>
+                                    <input
+                                        type="text"
+                                        id="orderGuid"
+                                        placeholder="ABC123-..."
+                                    />
+                                    <button id="btn-receipt">Receipt</button>
+                                </div>
+                            </div>
+                        </details>
+                        <details class="api-section">
+                            <summary>
+                                Codes / Discounts
+                                <code>DRT.shopper.code</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="inline-row">
+                                    <label>Code</label>
+                                    <input
+                                        type="text"
+                                        id="promoCode"
+                                        placeholder="SAVE10"
+                                    />
+                                    <button id="btn-validate-code">
+                                        Validate
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                        <details class="api-section">
+                            <summary>
+                                Gift Cards
+                                <code>DRT.shopper.giftCard</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="inline-row">
+                                    <label>Card #</label>
+                                    <input
+                                        type="text"
+                                        id="giftCardNumber"
+                                        placeholder="Gift card number"
+                                    />
+                                    <button id="btn-gift-balance">
+                                        Check Balance
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                    </div>
+                    <!-- SCANNER -->
+                    <div id="tab-scanner" class="api-content">
+                        <details class="api-section" open>
+                            <summary>
+                                Scanning
+                                <code>DRT.scanner.scanning</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="btn-row">
+                                    <button id="btn-strings">
+                                        Get App Strings
+                                        <span
+                                            class="section-badge"
+                                            style="margin-left: 0.35rem"
+                                            >no auth</span
+                                        >
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                        <details class="api-section" open>
+                            <summary>
+                                Database
+                                <code>DRT.scanner.database</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="inline-row">
+                                    <label>Show Code</label>
+                                    <input
+                                        type="text"
+                                        id="scannerShowCode"
+                                        placeholder="e.g., ABC123"
+                                    />
+                                </div>
+                                <div
+                                    class="inline-row"
+                                    style="margin-top: 0.4rem"
+                                >
+                                    <label>Device</label>
+                                    <input
+                                        type="text"
+                                        id="scannerDevice"
+                                        value="test-device"
+                                    />
+                                    <label>User</label>
+                                    <input
+                                        type="text"
+                                        id="scannerUser"
+                                        value="test-user"
+                                    />
+                                </div>
+                                <div class="btn-row">
+                                    <button id="btn-scanner-db">
+                                        Download Database
+                                    </button>
+                                    <button id="btn-scanner-query">
+                                        Query Sections
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                        <details class="api-section">
+                            <summary>
+                                Orders
+                                <code>DRT.scanner.orders</code>
+                            </summary>
+                            <div class="section-body">
+                                <div class="inline-row">
+                                    <label>Phone</label>
+                                    <input
+                                        type="text"
+                                        id="scannerPhone"
+                                        placeholder="Phone number"
+                                    />
+                                    <button id="btn-scanner-by-phone">
+                                        Search
+                                    </button>
+                                </div>
+                                <div
+                                    class="inline-row"
+                                    style="margin-top: 0.4rem"
+                                >
+                                    <label>Name</label>
+                                    <input
+                                        type="text"
+                                        id="scannerName"
+                                        placeholder="Buyer name"
+                                    />
+                                    <button id="btn-scanner-by-name">
+                                        Search
+                                    </button>
+                                </div>
+                            </div>
+                        </details>
+                    </div>
+                </div>
+            </div>
+            <!-- RIGHT PANEL: Output + Implementation tabs -->
+            <div class="right-panel">
+                <div class="panel-tabs">
+                    <button class="panel-tab active" data-panel="output">
+                        Output
+                    </button>
+                    <button class="panel-tab" data-panel="impl">
+                        Implementation
+                    </button>
+                </div>
+                <div id="panel-output" class="panel-content active">
+                    <div id="status" class="success">
+                        SDK loaded &mdash; initialize with your credentials
+                    </div>
+                    <div id="output-container">
+                        <pre id="output">
+// Initialize the SDK, then click a button to test...
+// Tip: window.DRT is available in the browser console.</pre
+                        >
+                    </div>
+                </div>
+                <div id="panel-impl" class="panel-content">
+                    <div id="impl-panel">
+                        <h3>Install</h3>
+                        <p>
+                            The SDK is distributed on npm and works in browsers,
+                            Node, and bundlers.
+                        </p>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="npm-install">
+                                Copy
+                            </button>
+                            <pre
+                                id="npm-install"
+                            ><span class="com"># With npm</span>
+npm install @drttix/drt-sdk
+<span class="com"># With yarn</span>
+yarn add @drttix/drt-sdk
+<span class="com"># With pnpm</span>
+pnpm add @drttix/drt-sdk</pre>
+                        </div>
+                        <h3>Browser (ES Modules)</h3>
+                        <p>
+                            Use the prebuilt bundle directly from a CDN or
+                            static host:
+                        </p>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="browser-script">
+                                Copy
+                            </button>
+                            <pre
+                                id="browser-script"
+                            ><span class="kw">&lt;script</span> <span class="fn">type</span>=<span class="str">"module"</span><span class="kw">&gt;</span>
+  <span class="kw">import</span> { DRT } <span class="kw">from</span> <span class="str">'https://cdn.drttix.com/public/sdk/latest/drt-sdk.js'</span>;
+  DRT.<span class="fn">init</span>({
+    shopperGuid: <span class="str">'YOUR_SHOPPER_GUID'</span>,
+    accountId:   <span class="str">'YOUR_ACCOUNT_ID'</span>,
+    apiKey:      <span class="str">'YOUR_API_KEY'</span>,
+  });
+  <span class="kw">const</span> events = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEvents</span>();
+  <span class="fn">console</span>.log(events);
+<span class="kw">&lt;/script&gt;</span></pre>
+                        </div>
+                        <h3>JavaScript / TypeScript</h3>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="js-usage">
+                                Copy
+                            </button>
+                            <pre
+                                id="js-usage"
+                            ><span class="kw">import</span> { DRT } <span class="kw">from</span> <span class="str">'@drttix/drt-sdk'</span>;
+<span class="com">// 1. Initialize once at app startup</span>
+DRT.<span class="fn">init</span>({
+  shopperGuid: <span class="str">'F1199DCD-BB45-4BD0-...'</span>,
+  accountId:   <span class="str">'508'</span>,
+  apiKey:      <span class="str">'your-api-key'</span>,
+});
+<span class="com">// 2. Call any service &mdash; credentials are injected automatically</span>
+<span class="kw">const</span> events   = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEvents</span>();
+<span class="kw">const</span> details  = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEventById</span>(<span class="num">42075</span>);
+<span class="kw">const</span> cart     = <span class="kw">await</span> DRT.shopper.cart.<span class="fn">getCart</span>();</pre>
+                        </div>
+                        <h3>Creating a Shopper Session</h3>
+                        <p>
+                            If you don't have a shopperGuid yet, create one
+                            first:
+                        </p>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="create-session">
+                                Copy
+                            </button>
+                            <pre
+                                id="create-session"
+                            ><span class="kw">const</span> session = <span class="kw">await</span> DRT.shopper.session.<span class="fn">createSession</span>({
+  studioId: <span class="num">508</span>,
+});
+DRT.<span class="fn">init</span>({
+  shopperGuid: session.shopperGuid,
+  accountId:   <span class="fn">String</span>(session.studioId),
+  apiKey:      <span class="str">'your-api-key'</span>,
+});</pre>
+                        </div>
+                        <h3>Holding Seats</h3>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="hold-seats">
+                                Copy
+                            </button>
+                            <pre
+                                id="hold-seats"
+                            ><span class="com">// Reserved seat</span>
+<span class="kw">await</span> DRT.shopper.seat.<span class="fn">holdReservedSeat</span>({
+  eventId: <span class="num">42075</span>,
+  seatNum: <span class="num">101</span>,
+});
+<span class="com">// General admission</span>
+<span class="kw">await</span> DRT.shopper.seat.<span class="fn">holdGaSeat</span>({
+  eventId:   <span class="num">42075</span>,
+  tierId:    <span class="num">1</span>,
+  qty:       <span class="num">2</span>,
+  allOrNone: <span class="kw">true</span>,
+});
+<span class="com">// Release a reserved seat</span>
+<span class="kw">await</span> DRT.shopper.seat.<span class="fn">releaseReservedSeat</span>({
+  eventId: <span class="num">42075</span>,
+  seatNum: <span class="num">101</span>,
+});
+<span class="com">// Release GA seat</span>
+<span class="kw">await</span> DRT.shopper.seat.<span class="fn">releaseGaSeat</span>({
+  eventId: <span class="num">42075</span>,
+  tierId:  <span class="num">1</span>,
+  qty:     <span class="num">1</span>,
+});</pre>
+                        </div>
+                        <h3>Cart Management</h3>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="cart-ex">
+                                Copy
+                            </button>
+                            <pre
+                                id="cart-ex"
+                            ><span class="kw">const</span> { cart } = <span class="kw">await</span> DRT.shopper.cart.<span class="fn">getCart</span>();
+<span class="com">// cart.seats, cart.products, cart.donations</span>
+<span class="kw">for</span> (<span class="kw">const</span> seat <span class="kw">of</span> cart.seats) {
+  <span class="fn">console</span>.log(seat.tierName, seat.displayPrice);
+}
+<span class="com">// Clear entire cart</span>
+<span class="kw">await</span> DRT.shopper.cart.<span class="fn">deleteCart</span>();</pre>
+                        </div>
+                        <h3>Error Handling</h3>
+                        <div class="code-block">
+                            <button class="copy-btn" data-copy="err-handling">
+                                Copy
+                            </button>
+                            <pre id="err-handling"><span class="kw">try</span> {
+  <span class="kw">const</span> events = <span class="kw">await</span> DRT.shopper.event.<span class="fn">getEvents</span>();
+} <span class="kw">catch</span> (err) {
+  <span class="com">// err.status = HTTP status (400, 404, 500, ...)</span>
+  <span class="com">// err.body   = API error payload (errorCode, message)</span>
+  <span class="fn">console</span>.error(err.status, err.body);
+}</pre>
+                        </div>
+                        <h3>Available Services</h3>
+                        <div class="code-block">
+                            <pre><span class="kw">DRT</span>.shopper.{ account, event, seat, cart, product,
+                 order, code, giftCard, session, ... }
+<span class="kw">DRT</span>.scanner.{ scanning, database, orders }
+<span class="kw">DRT</span>.portal .{ ... admin-only services }</pre>
+                        </div>
+                        <h3>API Documentation (Swagger)</h3>
+                        <p>
+                            Interactive API docs for each service &mdash; open
+                            directly in the browser:
+                        </p>
+                        <div
+                            style="
+                                display: flex;
+                                flex-direction: column;
+                                gap: 0.4rem;
+                                margin: 0.5rem 0;
+                            "
+                        >
+                            <a
+                                href="https://api.drttix.com/shopper/docs"
+                                target="_blank"
+                                rel="noopener"
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    gap: 0.6rem;
+                                    padding: 0.55rem 0.8rem;
+                                    background: #11111b;
+                                    border: 1px solid #313244;
+                                    border-radius: 6px;
+                                    color: #89b4fa;
+                                    text-decoration: none;
+                                    font-size: 0.85rem;
+                                    font-family: inherit;
+                                "
+                            >
+                                <span style="font-size: 1rem">&#128722;</span>
+                                <span
+                                    ><strong>Shopper API</strong> &mdash;
+                                    events, seats, cart, products,
+                                    checkout</span
+                                >
+                                <span
+                                    style="
+                                        margin-left: auto;
+                                        font-size: 0.7rem;
+                                        color: #6c7086;
+                                    "
+                                    >api.drttix.com/shopper/docs</span
+                                >
+                            </a>
+                            <a
+                                href="https://api.drttix.com/scanner-v3/docs"
+                                target="_blank"
+                                rel="noopener"
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    gap: 0.6rem;
+                                    padding: 0.55rem 0.8rem;
+                                    background: #11111b;
+                                    border: 1px solid #313244;
+                                    border-radius: 6px;
+                                    color: #89b4fa;
+                                    text-decoration: none;
+                                    font-size: 0.85rem;
+                                    font-family: inherit;
+                                "
+                            >
+                                <span style="font-size: 1rem">&#128247;</span>
+                                <span
+                                    ><strong>Scanner API</strong> &mdash;
+                                    scanning, database, orders</span
+                                >
+                                <span
+                                    style="
+                                        margin-left: auto;
+                                        font-size: 0.7rem;
+                                        color: #6c7086;
+                                    "
+                                    >api.drttix.com/scanner-v3/docs</span
+                                >
+                            </a>
+                            <a
+                                href="https://api.drttix.com/admin-portal/docs"
+                                target="_blank"
+                                rel="noopener"
+                                style="
+                                    display: flex;
+                                    align-items: center;
+                                    gap: 0.6rem;
+                                    padding: 0.55rem 0.8rem;
+                                    background: #11111b;
+                                    border: 1px solid #313244;
+                                    border-radius: 6px;
+                                    color: #89b4fa;
+                                    text-decoration: none;
+                                    font-size: 0.85rem;
+                                    font-family: inherit;
+                                "
+                            >
+                                <span style="font-size: 1rem"
+                                    >&#9881;&#65039;</span
+                                >
+                                <span
+                                    ><strong>Portal API</strong> &mdash;
+                                    admin-only services</span
+                                >
+                                <span
+                                    style="
+                                        margin-left: auto;
+                                        font-size: 0.7rem;
+                                        color: #6c7086;
+                                    "
+                                    >api.drttix.com/admin-portal/docs</span
+                                >
+                            </a>
+                        </div>
+                        <div class="impl-note">
+                            <strong>Note:</strong> Once
+                            <code>DRT.init()</code> is called, the
+                            <code>shopperguid</code>, <code>accountid</code>,
+                            and <code>apikey</code> headers are automatically
+                            attached to every request &mdash; you don't need to
+                            pass them as function arguments.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script type="module">
+            import { DRT } from '/public/sdk/latest/drt-sdk.js';
+            const out = document.getElementById('output');
+            const status = document.getElementById('status');
+            // Expose DRT globally for console testing
+            window.DRT = DRT;
+            // Display the real SDK version if available
+            if (DRT.version) {
+                document.getElementById('sdkVersionBadge').textContent =
+                    'v' + DRT.version;
+            }
+            function setStatus(msg, isError = false) {
+                status.textContent = msg;
+                status.className = isError ? 'error' : 'success';
+            }
+            function setOutput(data) {
+                out.textContent =
+                    typeof data === 'string'
+                        ? data
+                        : JSON.stringify(data, null, 2);
+            }
+            function requireInit() {
+                if (!DRT.isReady()) {
+                    setStatus(
+                        'SDK not initialized! Fill credentials and click Initialize.',
+                        true,
+                    );
+                    return false;
+                }
+                return true;
+            }
+            async function callApi(fn, description) {
+                setStatus(`Fetching ${description}...`, false);
+                try {
+                    const result = await fn();
+                    setStatus(`Success - ${description}`, false);
+                    setOutput(result);
+                    return result;
+                } catch (err) {
+                    setStatus(`Error: ${err.message}`, true);
+                    setOutput({
+                        error: err.message,
+                        status: err.status,
+                        details: err.body || err.toString(),
+                    });
+                    console.error(err);
+                    return null;
+                }
+            }
+            /* ============ Right-panel tabs (Output / Implementation) ============ */
+            document.querySelectorAll('.panel-tab').forEach((tab) => {
+                tab.addEventListener('click', () => {
+                    document
+                        .querySelectorAll('.panel-tab')
+                        .forEach((t) => t.classList.remove('active'));
+                    document
+                        .querySelectorAll('.panel-content')
+                        .forEach((c) => c.classList.remove('active'));
+                    tab.classList.add('active');
+                    document
+                        .getElementById(`panel-${tab.dataset.panel}`)
+                        .classList.add('active');
+                });
+            });
+            /* ============ Copy-to-clipboard for impl code blocks ============ */
+            document.querySelectorAll('.copy-btn').forEach((btn) => {
+                btn.addEventListener('click', async () => {
+                    const id = btn.dataset.copy;
+                    const el = document.getElementById(id);
+                    if (!el) return;
+                    try {
+                        await navigator.clipboard.writeText(el.innerText);
+                        btn.textContent = 'Copied!';
+                        btn.classList.add('copied');
+                        setTimeout(() => {
+                            btn.textContent = 'Copy';
+                            btn.classList.remove('copied');
+                        }, 1500);
+                    } catch (e) {
+                        console.error(e);
+                    }
+                });
+            });
+            /* ============ API left-panel tabs (Shopper / Scanner) ============ */
+            document.querySelectorAll('.api-tab').forEach((tab) => {
+                tab.addEventListener('click', () => {
+                    document
+                        .querySelectorAll('.api-tab')
+                        .forEach((t) => t.classList.remove('active'));
+                    document
+                        .querySelectorAll('.api-content')
+                        .forEach((c) => c.classList.remove('active'));
+                    tab.classList.add('active');
+                    document
+                        .getElementById(`tab-${tab.dataset.tab}`)
+                        .classList.add('active');
+                });
+            });
+            /* ============ SDK Init / Reset ============ */
+            document
+                .getElementById('btn-init')
+                .addEventListener('click', () => {
+                    const shopperGuid = document
+                        .getElementById('shopperGuid')
+                        .value.trim();
+                    const accountId = document
+                        .getElementById('accountId')
+                        .value.trim();
+                    const apiKey = document
+                        .getElementById('apiKey')
+                        .value.trim();
+                    if (!shopperGuid || !accountId || !apiKey) {
+                        setStatus('Please fill in all fields', true);
+                        return;
+                    }
+                    try {
+                        DRT.init({ shopperGuid, accountId, apiKey });
+                        setStatus('SDK initialized successfully', false);
+                        setOutput({
+                            message: 'SDK initialized',
+                            config: { shopperGuid, accountId, apiKey: '***' },
+                        });
+                    } catch (err) {
+                        setStatus('Init failed: ' + err.message, true);
+                        setOutput({ error: err.message });
+                    }
+                });
+            document
+                .getElementById('btn-check-sdk')
+                .addEventListener('click', () => {
+                    setStatus('SDK Status', false);
+                    const config = DRT.getConfig();
+                    setOutput({
+                        isReady: DRT.isReady(),
+                        config: config
+                            ? {
+                                  shopperGuid: config.shopperGuid,
+                                  accountId: config.accountId,
+                                  apiKey: '***',
+                              }
+                            : null,
+                        availableServices: {
+                            shopper: Object.keys(DRT.shopper),
+                            scanner: Object.keys(DRT.scanner),
+                            portal: Object.keys(DRT.portal || {}),
+                        },
+                    });
+                });
+            document
+                .getElementById('btn-reset')
+                .addEventListener('click', () => {
+                    DRT.reset();
+                    setStatus('SDK has been reset', false);
+                    setOutput({
+                        message: 'SDK has been reset. Initialize again to use.',
+                    });
+                });
+            /* ============ Create Shopper Session ============ */
+            document
+                .getElementById('btn-create-shopper')
+                .addEventListener('click', async () => {
+                    const studioId = parseInt(
+                        document.getElementById('createStudioId').value,
+                    );
+                    const apiKey = document
+                        .getElementById('createApiKey')
+                        .value.trim();
+                    if (!studioId || !apiKey) {
+                        setStatus(
+                            'Please enter both Studio ID and API Key',
+                            true,
+                        );
+                        return;
+                    }
+                    setStatus('Creating shopper session...', false);
+                    try {
+                        const result = await DRT.shopper.session.createSession({
+                            studioId,
+                        });
+                        setOutput(result);
+                        // Populate credential fields and auto-init
+                        document.getElementById('shopperGuid').value =
+                            result.shopperGuid;
+                        document.getElementById('accountId').value =
+                            result.studioId;
+                        document.getElementById('apiKey').value = apiKey;
+                        DRT.init({
+                            shopperGuid: result.shopperGuid,
+                            accountId: String(result.studioId),
+                            apiKey,
+                        });
+                        setStatus(
+                            'Shopper created and SDK initialized!',
+                            false,
+                        );
+                    } catch (err) {
+                        setStatus(`Error: ${err.message}`, true);
+                        setOutput({
+                            error: err.message,
+                            details: err.body || err.toString(),
+                        });
+                    }
+                });
+            /* ============ SHOPPER - Account ============ */
+            document
+                .getElementById('btn-theme')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(() => DRT.shopper.account.getTheme(), 'theme');
+                });
+            document
+                .getElementById('btn-disposition')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(
+                        () => DRT.shopper.account.getDisposition(),
+                        'disposition',
+                    );
+                });
+            document
+                .getElementById('btn-root')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(() => DRT.shopper.account.getRoot(), 'root config');
+                });
+            document
+                .getElementById('btn-landing')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(
+                        () => DRT.shopper.account.getLandingPage(),
+                        'landing page',
+                    );
+                });
+            /* ============ SHOPPER - Events ============ */
+            document
+                .getElementById('btn-events')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    setStatus('Fetching events...', false);
+                    try {
+                        const result = await DRT.shopper.event.getEvents();
+                        const select = document.getElementById('eventSelect');
+                        select.innerHTML =
+                            '<option value="">-- Select an event --</option>';
+                        const events = result.events || result || [];
+                        events.forEach((ev) => {
+                            const opt = document.createElement('option');
+                            opt.value = ev.eventId || ev.id;
+                            opt.textContent = `${ev.eventId || ev.id}: ${ev.eventName || ev.name || 'Unnamed'}`;
+                            select.appendChild(opt);
+                        });
+                        const summary = events.map((e) => ({
+                            id: e.eventId || e.id,
+                            name: e.eventName || e.name || 'Unnamed',
+                            date: e.eventDate || e.date || '',
+                            venue: e.venueName || e.venue || '',
+                        }));
+                        setStatus(`Loaded ${events.length} events`, false);
+                        setOutput({
+                            eventCount: events.length,
+                            events: summary,
+                        });
+                    } catch (err) {
+                        setStatus(`Error: ${err.message}`, true);
+                        setOutput({
+                            error: err.message,
+                            details: err.body || err.toString(),
+                        });
+                    }
+                });
+            document
+                .getElementById('btn-event-details')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    const id = parseInt(
+                        document.getElementById('eventSelect').value,
+                    );
+                    if (!id) {
+                        setStatus('Please select an event', true);
+                        return;
+                    }
+                    setStatus(`Fetching event ${id} details...`, false);
+                    try {
+                        const result = await DRT.shopper.event.getEventById(id);
+                        const sections = result.sections || [];
+                        const tiers = result.tiers || [];
+                        const isGA =
+                            result.event && result.event.isGeneralSeating === 1;
+                        const seatSection =
+                            document.getElementById('section-seats');
+                        seatSection.classList.remove('hidden-section');
+                        seatSection.open = true;
+                        const infoEl =
+                            document.getElementById('seat-type-info');
+                        const gaControls =
+                            document.getElementById('seat-ga-controls');
+                        const baControls =
+                            document.getElementById('seat-ba-controls');
+                        const seatBadge = document.getElementById('seat-badge');
+                        if (isGA) {
+                            infoEl.textContent = `General Admission - ${tiers.length} tier(s), ${sections.length} section(s)`;
+                            infoEl.className = 'info-banner ga';
+                            gaControls.style.display = 'block';
+                            baControls.style.display = 'none';
+                            seatBadge.textContent = 'GA';
+                            seatBadge.className = 'section-badge badge-ga';
+                            const tierSel =
+                                document.getElementById('tierSelect');
+                            tierSel.innerHTML = '';
+                            tiers.forEach((t) => {
+                                const opt = document.createElement('option');
+                                opt.value = t.id;
+                                opt.textContent = `${t.name} - $${t.price} (id: ${t.id})`;
+                                tierSel.appendChild(opt);
+                            });
+                        } else {
+                            infoEl.textContent = `Reserved Seating - ${sections.length} section(s), ${tiers.length} tier(s)`;
+                            infoEl.className = 'info-banner reserved';
+                            gaControls.style.display = 'none';
+                            baControls.style.display = 'block';
+                            seatBadge.textContent = 'Reserved';
+                            seatBadge.className =
+                                'section-badge badge-reserved';
+                        }
+                        const tierSection = document.getElementById(
+                            'section-update-tier',
+                        );
+                        if (tiers.length > 0) {
+                            tierSection.classList.remove('hidden-section');
+                            const tb = document.getElementById('tier-badge');
+                            tb.textContent = `${tiers.length} tier(s)`;
+                            tb.className = 'section-badge badge-count';
+                            const sel =
+                                document.getElementById('updateTierSelect');
+                            sel.innerHTML = '';
+                            tiers.forEach((t) => {
+                                const opt = document.createElement('option');
+                                opt.value = t.id;
+                                opt.textContent = `${t.name} - $${t.price} (id: ${t.id})`;
+                                sel.appendChild(opt);
+                            });
+                        } else {
+                            tierSection.classList.add('hidden-section');
+                        }
+                        document
+                            .getElementById('section-products')
+                            .classList.remove('hidden-section');
+                        document.getElementById('product-badge').textContent =
+                            'Ready';
+                        document.getElementById('product-badge').className =
+                            'section-badge badge-ready';
+                        const sectionRules = result.sectionRules || [];
+                        setStatus('Success', false);
+                        setOutput({
+                            event: {
+                                id: result.event?.id,
+                                name: result.event?.name,
+                                title: result.event?.title,
+                                isGeneralSeating:
+                                    result.event?.isGeneralSeating,
+                                statusId: result.event?.statusId,
+                            },
+                            sections: sections.map((s) => ({
+                                id: s.id,
+                                name: s.name,
+                                isGA: s.is_general_seating,
+                                gaCapacity: s.ga_capacity,
+                            })),
+                            sectionRules: sectionRules.map((r) => ({
+                                section: r.section,
+                                sectionId: r.section_id,
+                                rowLow: r.row_low,
+                                rowHigh: r.row_high,
+                                seatLow: r.seat_low,
+                                seatHigh: r.seat_high,
+                            })),
+                            tiers: tiers.map((t) => ({
+                                id: t.id,
+                                name: t.name,
+                                price: t.price,
+                                sectionId: t.section_id,
+                            })),
+                        });
+                    } catch (err) {
+                        setStatus(`Error: ${err.message}`, true);
+                        setOutput({
+                            error: err.message,
+                            details: err.body || err.toString(),
+                        });
+                    }
+                });
+            /* ============ SHOPPER - Seats ============ */
+            document
+                .getElementById('btn-hold-ga')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    const eventId = parseInt(
+                        document.getElementById('eventSelect').value,
+                    );
+                    const tierId = parseInt(
+                        document.getElementById('tierSelect').value,
+                    );
+                    const qty =
+                        parseInt(document.getElementById('gaQty').value) || 1;
+                    if (!eventId || !tierId) {
+                        setStatus('Select event + tier first', true);
+                        return;
+                    }
+                    const result = await callApi(
+                        () =>
+                            DRT.shopper.seat.holdGaSeat({
+                                eventId,
+                                allOrNone: true,
+                                tierId,
+                                qty,
+                            }),
+                        `hold ${qty} GA seat(s) for event ${eventId}`,
+                    );
+                    if (result) silentRefreshCart();
+                });
+            document
+                .getElementById('btn-hold-reserved')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    const eventId = parseInt(
+                        document.getElementById('eventSelect').value,
+                    );
+                    const seatNum = parseInt(
+                        document.getElementById('reservedSeatNum').value,
+                    );
+                    if (!eventId || !seatNum) {
+                        setStatus('Select event + enter seat number', true);
+                        return;
+                    }
+                    const result = await callApi(
+                        () =>
+                            DRT.shopper.seat.holdReservedSeat({
+                                eventId,
+                                seatNum,
+                            }),
+                        `hold reserved seat #${seatNum}`,
+                    );
+                    if (result) silentRefreshCart();
+                });
+            document
+                .getElementById('btn-update-tier')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const eventId = parseInt(
+                        document.getElementById('eventSelect').value,
+                    );
+                    const seatNum = parseInt(
+                        document.getElementById('updateTierSeatNum').value,
+                    );
+                    const tierId = parseInt(
+                        document.getElementById('updateTierSelect').value,
+                    );
+                    if (!eventId || !seatNum || !tierId) {
+                        setStatus('Missing fields for tier update', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.shopper.seat.updateTier({
+                                eventId,
+                                seatNum,
+                                tierId,
+                            }),
+                        `update seat #${seatNum} to tier ${tierId}`,
+                    ).then((r) => r && silentRefreshCart());
+                });
+            /* ============ SHOPPER - Products ============ */
+            document
+                .getElementById('btn-get-products')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(
+                        () => DRT.shopper.product.getProducts(),
+                        'products',
+                    );
+                });
+            document
+                .getElementById('btn-add-product')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    const id = parseInt(
+                        document.getElementById('productId').value,
+                    );
+                    const hash = document
+                        .getElementById('productHash')
+                        .value.trim();
+                    const variantId =
+                        parseInt(
+                            document.getElementById('productVariant').value,
+                        ) || 0;
+                    const quantity =
+                        parseInt(document.getElementById('productQty').value) ||
+                        1;
+                    if (!id || !hash) {
+                        setStatus(
+                            'Enter Product ID and Hash (from Get Products)',
+                            true,
+                        );
+                        return;
+                    }
+                    const result = await callApi(
+                        () =>
+                            DRT.shopper.product.addProduct({
+                                id,
+                                hash,
+                                text: '',
+                                quantity,
+                                variantId,
+                            }),
+                        `add product ${id}`,
+                    );
+                    if (result) silentRefreshCart();
+                });
+            /* ============ SHOPPER - Cart (with per-item remove) ============ */
+            async function refreshCart() {
+                if (!DRT.isReady()) return;
+                try {
+                    const result = await DRT.shopper.cart.getCart();
+                    renderCart(result);
+                    setOutput(result);
+                    setStatus('Cart refreshed', false);
+                } catch (err) {
+                    setStatus(`Error: ${err.message}`, true);
+                    setOutput({
+                        error: err.message,
+                        details: err.body || err.toString(),
+                    });
+                }
+            }
+            // Silently update only the cart widget without touching the output panel.
+            // Used after hold/add/remove so the action result stays visible.
+            async function silentRefreshCart(delayMs = 300) {
+                if (!DRT.isReady()) return;
+                await new Promise((r) => setTimeout(r, delayMs));
+                try {
+                    const result = await DRT.shopper.cart.getCart();
+                    renderCart(result);
+                } catch (_) {
+                    // silent — don't overwrite current output on background refresh failure
+                }
+            }
+            function renderCart(cartResponse) {
+                const container = document.getElementById('cart-display');
+                const cart = cartResponse?.cart || cartResponse || {};
+                const seats = cart.seats || [];
+                const products = cart.products || [];
+                const donations = cart.donations || [];
+                container.innerHTML = '';
+                const totalItems =
+                    seats.length + products.length + donations.length;
+                const cartBadge = document.getElementById('cart-badge');
+                if (totalItems === 0) {
+                    cartBadge.textContent = 'empty';
+                    cartBadge.className = 'section-badge';
+                    container.innerHTML =
+                        '<div class="empty-cart">Cart is empty</div>';
+                    return;
+                }
+                cartBadge.textContent = `${totalItems} item${totalItems !== 1 ? 's' : ''}`;
+                cartBadge.className = 'section-badge badge-count';
+                let total = 0;
+                seats.forEach((s, idx) => {
+                    total += s.displayPrice || s.price || 0;
+                    const row = document.createElement('div');
+                    row.className = 'cart-item';
+                    const seatLabel = s.isGeneralSeating
+                        ? `GA - ${s.tierName || 'General'}`
+                        : `${s.section || ''} ${s.row ? 'Row ' + s.row : ''} Seat ${s.seat || s.num}`;
+                    row.innerHTML = `
+                        <div class="cart-item-icon seat">${s.isGeneralSeating ? 'GA' : 'S'}</div>
+                        <div class="cart-item-body">
+                            <div class="cart-item-title">${escapeHtml(s.shortName || 'Event')}</div>
+                            <div class="cart-item-subtitle">${escapeHtml(seatLabel)}${s.tierName ? ' - ' + escapeHtml(s.tierName) : ''}</div>
+                        </div>
+                        <div class="cart-item-price">$${(s.displayPrice ?? s.price ?? 0).toFixed(2)}</div>
+                        <button class="small danger" data-remove-seat="${idx}">Remove</button>
+                    `;
+                    row.querySelector('[data-remove-seat]').addEventListener(
+                        'click',
+                        () => removeSeatFromCart(s),
+                    );
+                    container.appendChild(row);
+                });
+                products.forEach((p) => {
+                    total += (p.price || 0) * (p.qty || 1);
+                    const row = document.createElement('div');
+                    row.className = 'cart-item';
+                    row.innerHTML = `
+                        <div class="cart-item-icon product">P</div>
+                        <div class="cart-item-body">
+                            <div class="cart-item-title">${escapeHtml(p.name || 'Product')}${p.variantName ? ' - ' + escapeHtml(p.variantName) : ''}</div>
+                            <div class="cart-item-subtitle">Qty: ${p.qty} - id: ${p.productId}</div>
+                        </div>
+                        <div class="cart-item-price">$${((p.price || 0) * (p.qty || 1)).toFixed(2)}</div>
+                        <button class="small danger" data-remove-product>Remove</button>
+                    `;
+                    row.querySelector('[data-remove-product]').addEventListener(
+                        'click',
+                        () => removeProductFromCart(p),
+                    );
+                    container.appendChild(row);
+                });
+                donations.forEach((d) => {
+                    total += d.amount || 0;
+                    const row = document.createElement('div');
+                    row.className = 'cart-item';
+                    row.innerHTML = `
+                        <div class="cart-item-icon donation">D</div>
+                        <div class="cart-item-body">
+                            <div class="cart-item-title">${escapeHtml(d.name || 'Donation')}</div>
+                            <div class="cart-item-subtitle">Fund id: ${d.id}</div>
+                        </div>
+                        <div class="cart-item-price">$${(d.amount || 0).toFixed(2)}</div>
+                    `;
+                    container.appendChild(row);
+                });
+                const sum = document.createElement('div');
+                sum.className = 'cart-summary';
+                sum.innerHTML = `<span>Subtotal</span><span>$${total.toFixed(2)}</span>`;
+                container.appendChild(sum);
+            }
+            function escapeHtml(s) {
+                return String(s ?? '').replace(
+                    /[&<>"']/g,
+                    (c) =>
+                        ({
+                            '&': '&amp;',
+                            '<': '&lt;',
+                            '>': '&gt;',
+                            '"': '&quot;',
+                            "'": '&#39;',
+                        })[c],
+                );
+            }
+            async function removeSeatFromCart(seat) {
+                if (!requireInit()) return;
+                const eventId = seat.showId;
+                if (seat.isGeneralSeating) {
+                    const qty = 1;
+                    const tierId = seat.tierId;
+                    const ok = await callApi(
+                        () =>
+                            DRT.shopper.seat.releaseGaSeat({
+                                eventId,
+                                tierId,
+                                qty,
+                            }),
+                        `release GA seat (tier ${tierId})`,
+                    );
+                    if (ok !== null) silentRefreshCart();
+                } else {
+                    const seatNum = seat.num;
+                    const ok = await callApi(
+                        () =>
+                            DRT.shopper.seat.releaseReservedSeat({
+                                eventId,
+                                seatNum,
+                            }),
+                        `release reserved seat #${seatNum}`,
+                    );
+                    if (ok !== null) silentRefreshCart();
+                }
+            }
+            async function removeProductFromCart(product) {
+                if (!requireInit()) return;
+                const ok = await callApi(
+                    () =>
+                        DRT.shopper.product.deleteProduct({
+                            id: product.productId,
+                            hash: product.guid || '',
+                            text: product.text || '',
+                            variantId: product.variantId || 0,
+                        }),
+                    `remove product ${product.productId}`,
+                );
+                if (ok !== null) silentRefreshCart();
+            }
+            document
+                .getElementById('btn-cart')
+                .addEventListener('click', refreshCart);
+            document
+                .getElementById('btn-delete-cart')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    if (!confirm('Delete the entire cart?')) return;
+                    await callApi(
+                        () => DRT.shopper.cart.deleteCart(),
+                        'delete cart',
+                    );
+                    refreshCart();
+                });
+            /* ============ SHOPPER - Orders / Codes / Gift Cards ============ */
+            document
+                .getElementById('btn-receipt')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const guid = document
+                        .getElementById('orderGuid')
+                        .value.trim();
+                    if (!guid) {
+                        setStatus('Enter an Order GUID', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.order.getReceipt(guid),
+                        'receipt',
+                    );
+                });
+            document
+                .getElementById('btn-validate-code')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const code = document
+                        .getElementById('promoCode')
+                        .value.trim();
+                    if (!code) {
+                        setStatus('Enter a code', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.code.validateCode(code),
+                        `code validation`,
+                    );
+                });
+            document
+                .getElementById('btn-gift-balance')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const num = document
+                        .getElementById('giftCardNumber')
+                        .value.trim();
+                    if (!num) {
+                        setStatus('Enter a gift card number', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.giftCard.getBalance(num),
+                        'gift card balance',
+                    );
+                });
+            /* ============ SCANNER API ============ */
+            document
+                .getElementById('btn-strings')
+                .addEventListener('click', () => {
+                    callApi(
+                        () => DRT.scanner.scanning.appControllerGetStrings(),
+                        'scanner strings',
+                    );
+                });
+            document
+                .getElementById('btn-scanner-db')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    const device = document
+                        .getElementById('scannerDevice')
+                        .value.trim();
+                    const user = document
+                        .getElementById('scannerUser')
+                        .value.trim();
+                    if (!showCode) {
+                        setStatus('Enter a Show Code', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.scanner.database.download(
+                                showCode,
+                                device,
+                                user,
+                                'en',
+                            ),
+                        'scanner database',
+                    );
+                });
+            document
+                .getElementById('btn-scanner-query')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    if (!showCode) {
+                        setStatus('Enter a Show Code', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.scanner.database.query(showCode, 'sections'),
+                        'sections query',
+                    );
+                });
+            document
+                .getElementById('btn-scanner-by-phone')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    const phone = document
+                        .getElementById('scannerPhone')
+                        .value.trim();
+                    if (!showCode || !phone) {
+                        setStatus('Enter Show Code and Phone', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.scanner.orders.ordersControllerGetOrdersByPhone(
+                                showCode,
+                                phone,
+                            ),
+                        'orders by phone',
+                    );
+                });
+            document
+                .getElementById('btn-scanner-by-name')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    const name = document
+                        .getElementById('scannerName')
+                        .value.trim();
+                    if (!showCode || !name) {
+                        setStatus('Enter Show Code and Name', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.scanner.orders.ordersControllerGetOrdersByName(
+                                showCode,
+                                name,
+                            ),
+                        'orders by name',
+                    );
+                });
+            console.log('DRT SDK available at window.DRT for console testing');
+        </script>
+    </body>
+</html>