@bounded-sh/client 0.0.13 → 0.0.14

package/dist/auth/providers/offchain-auth-provider.d.ts

@@ -33,24 +33,18 @@ export declare class OffchainAuthProvider implements AuthProvider {
     signMessage(message: string): Promise<string>;
     signMessageMock(message: string): Promise<string>;
     private showUnsupportedTransactionModal;
-    private getUnsupportedModalHTML;
     private showTransactionModal;
     private closeModal;
-    /**
-     * Escape a value for safe interpolation into an HTML string.
-     *
-     * Transaction messages are attacker-influenceable (they originate from
-     * server responses / app-supplied data), so every value derived from them
-     * MUST be escaped before being placed into innerHTML. Without this, a field
-     * key/value, path segment, document id, or raw message containing markup
-     * such as `<img src=x onerror=...>` would execute in the dApp origin and
-     * could exfiltrate the stored session (idToken/refreshToken).
-     */
-    private escapeHtml;
+    private createElement;
+    private appendTextElement;
+    private buildModalShell;
+    private buildInfoBox;
+    private buildUnsupportedModalContent;
     private formatPath;
     private formatFieldValue;
     private getActionDescription;
-    private getModalHTML;
+    private buildTransactionModalContent;
+    private buildInstructionElement;
     private getModalStyles;
     private generateMockSignature;
 }

package/dist/index.js

@@ -11147,39 +11147,8 @@ async function get(path, opts = {}) {
         }
         // Create a new request promise and store it
         const requestPromise = (async () => {
-            var _a;
             try {
-                // For realtime chains, prefer WebSocket reads (lower latency, already connected)
-                const config = await getConfig();
                 const pathIsDocument = normalizedPath.split("/").length % 2 === 0;
-                if (((_a = config.chain) === null || _a === void 0 ? void 0 : _a.startsWith('realtime_')) && !config.isServer && !opts.prompt && !opts.shape && !opts.cursor && !opts.includeSubPaths && !opts.filter && !opts.sort) {
-                    try {
-                        const { wsGet, wsQuery, hasActiveConnection } = await Promise.resolve().then(function () { return subscriptionV2; });
-                        if (hasActiveConnection()) {
-                            if (pathIsDocument) {
-                                const wsResult = await wsGet(normalizedPath);
-                                const responseData = normalizeReadResult(wsResult, true);
-                                if (!opts.bypassCache) {
-                                    getCache[cacheKey] = { data: responseData, expiresAt: now + GET_CACHE_TTL };
-                                }
-                                return responseData;
-                            }
-                            else if (!opts.limit) {
-                                const wsResult = await wsQuery(normalizedPath, {
-                                    filter: undefined,
-                                    sort: undefined,
-                                    includeSubPaths: opts.includeSubPaths,
-                                });
-                                const responseData = normalizeReadResult(wsResult, false);
-                                if (!opts.bypassCache) {
-                                    getCache[cacheKey] = { data: responseData, expiresAt: now + GET_CACHE_TTL };
-                                }
-                                return responseData;
-                            }
-                        }
-                    }
-                    catch ( /* fall through to HTTP */_b) { /* fall through to HTTP */ }
-                }
                 // Cache miss or bypass - proceed with HTTP API request
                 let response;
                 // Build common query params
@@ -11432,7 +11401,7 @@ async function set(path, document, options) {
     return result;
 }
 async function setMany(many, options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Returns the data that was set, or undefined if the document was already set.
     try {
         const config = await getConfig();
@@ -11469,40 +11438,13 @@ async function setMany(many, options) {
         }
         let setResponse;
         try {
-            // For realtime chains, prefer WebSocket if a connection is active (lower latency)
-            const useWs = ((_c = config.chain) === null || _c === void 0 ? void 0 : _c.startsWith('realtime_')) && !config.isServer;
-            if (useWs) {
-                try {
-                    const { wsSet, hasActiveConnection } = await Promise.resolve().then(function () { return subscriptionV2; });
-                    if (hasActiveConnection()) {
-                        // Connection is active — send via WS. If this throws, the write
-                        // may have been applied server-side (ack lost). Do NOT fall through
-                        // to HTTP, as that would double-apply non-idempotent ops (Increment).
-                        const wsResult = await wsSet(documents);
-                        setResponse = { data: wsResult, status: 200 };
-                    }
-                }
-                catch (wsError) {
-                    // Only fall through to HTTP if the request was never sent (connection not available).
-                    // If the request was sent and ack was lost (timeout), the server may have
-                    // applied it — re-sending via HTTP risks double-write for non-idempotent ops.
-                    const msg = (_d = wsError === null || wsError === void 0 ? void 0 : wsError.message) !== null && _d !== void 0 ? _d : '';
-                    const neverSent = msg.includes('not available') || msg.includes('connection timeout');
-                    if (!neverSent) {
-                        throw wsError;
-                    }
-                    // Safe to retry via HTTP — request was never sent
-                }
-            }
-            if (!setResponse) {
-                setResponse = await makeApiRequest('PUT', `items`, { documents }, options === null || options === void 0 ? void 0 : options._overrides);
-            }
+            setResponse = await makeApiRequest('PUT', `items`, { documents }, options === null || options === void 0 ? void 0 : options._overrides);
         }
         catch (error) {
             if ((error === null || error === void 0 ? void 0 : error.statusCode) === 402 && (error === null || error === void 0 ? void 0 : error.error) === 'INSUFFICIENT_BALANCE') {
-                const deficitLamports = Number((_e = error.deficitLamports) !== null && _e !== void 0 ? _e : 0);
-                const deficitSol = Number((_f = error.deficitSol) !== null && _f !== void 0 ? _f : deficitLamports / 1000000000);
-                throw new InsufficientBalanceError(String((_g = error.address) !== null && _g !== void 0 ? _g : ''), Number((_h = error.balanceLamports) !== null && _h !== void 0 ? _h : 0), Number((_j = error.estimatedCostLamports) !== null && _j !== void 0 ? _j : 0), deficitLamports, deficitSol);
+                const deficitLamports = Number((_c = error.deficitLamports) !== null && _c !== void 0 ? _c : 0);
+                const deficitSol = Number((_d = error.deficitSol) !== null && _d !== void 0 ? _d : deficitLamports / 1000000000);
+                throw new InsufficientBalanceError(String((_e = error.address) !== null && _e !== void 0 ? _e : ''), Number((_f = error.balanceLamports) !== null && _f !== void 0 ? _f : 0), Number((_g = error.estimatedCostLamports) !== null && _g !== void 0 ? _g : 0), deficitLamports, deficitSol);
             }
             throw error;
         }
@@ -11549,7 +11491,7 @@ async function setMany(many, options) {
             else if (setResponse.data &&
                 typeof setResponse.data === 'object' &&
                 setResponse.data.success === true) {
-                const _k = setResponse.data, { success: _success } = _k, rest = __rest$1(_k, ["success"]);
+                const _h = setResponse.data, { success: _success } = _h, rest = __rest$1(_h, ["success"]);
                 return Object.assign(Object.assign(Object.assign({}, documents.map(d => d.document)), rest), { transactionId: null });
             }
             else {
@@ -13077,23 +13019,6 @@ async function wsGetMany(paths) {
     }));
 }
 
-var subscriptionV2 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    clearCacheV2: clearCacheV2,
-    closeAllSubscriptionsV2: closeAllSubscriptionsV2,
-    getCachedDataV2: getCachedDataV2,
-    hasActiveConnection: hasActiveConnection,
-    reconnectWithNewAuthV2: reconnectWithNewAuthV2,
-    subscribeV2: subscribeV2,
-    wsDelete: wsDelete,
-    wsGet: wsGet,
-    wsGetMany: wsGetMany,
-    wsIntent: wsIntent,
-    wsIntentReliable: wsIntentReliable,
-    wsQuery: wsQuery,
-    wsSet: wsSet
-});
-
 /**
  * WebSocket Subscription Module
  *
@@ -14904,7 +14829,7 @@ class OffchainAuthProvider {
             // Create modal container
             this.modalContainer = document.createElement("div");
             this.modalContainer.id = "poofnet-unsupported-modal";
-            this.modalContainer.innerHTML = this.getUnsupportedModalHTML();
+            this.modalContainer.appendChild(this.buildUnsupportedModalContent());
             document.body.appendChild(this.modalContainer);
             // Add styles
             const style = document.createElement("style");
@@ -14960,38 +14885,6 @@ class OffchainAuthProvider {
             document.addEventListener("keydown", escHandler);
         });
     }
-    getUnsupportedModalHTML() {
-        return `
-      <div class="poofnet-modal-overlay">
-        <div class="poofnet-modal-content">
-          <button id="poofnet-close-btn" class="poofnet-close-btn" aria-label="Close">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M1 1L13 13M1 13L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-          </button>
-          <div class="poofnet-modal-header">
-            <div class="poofnet-modal-icon">⚠️</div>
-            <h2 class="poofnet-modal-title">Transaction Not Supported</h2>
-            <p class="poofnet-modal-subtitle">Poofnet Simulated Blockchain</p>
-          </div>
-
-          <div class="poofnet-modal-body">
-            <div class="poofnet-info-box" style="background: #fef3c7;">
-              <span class="poofnet-info-icon">ℹ️</span>
-              <span class="poofnet-info-text" style="color: #92400e;">
-                Poofnet is a simulated blockchain and does not support real Solana transactions.
-                Deploy your project to mainnet to test real transactions.
-              </span>
-            </div>
-          </div>
-
-          <div class="poofnet-modal-footer">
-            <button id="poofnet-cancel-btn" class="poofnet-btn poofnet-btn-cancel" style="flex: 1;">Close</button>
-          </div>
-        </div>
-      </div>
-    `;
-    }
     async showTransactionModal(message) {
         return new Promise((resolve) => {
             // Parse the transaction message for display
@@ -15005,7 +14898,7 @@ class OffchainAuthProvider {
             // Create modal container
             this.modalContainer = document.createElement("div");
             this.modalContainer.id = "poofnet-tx-modal";
-            this.modalContainer.innerHTML = this.getModalHTML(parsed, message);
+            this.modalContainer.appendChild(this.buildTransactionModalContent(parsed, message));
             document.body.appendChild(this.modalContainer);
             // Add styles
             const style = document.createElement("style");
@@ -15088,24 +14981,59 @@ class OffchainAuthProvider {
             }, 200);
         }
     }
-    /**
-     * Escape a value for safe interpolation into an HTML string.
-     *
-     * Transaction messages are attacker-influenceable (they originate from
-     * server responses / app-supplied data), so every value derived from them
-     * MUST be escaped before being placed into innerHTML. Without this, a field
-     * key/value, path segment, document id, or raw message containing markup
-     * such as `<img src=x onerror=...>` would execute in the dApp origin and
-     * could exfiltrate the stored session (idToken/refreshToken).
-     */
-    escapeHtml(value) {
-        const str = value === null || value === undefined ? "" : String(value);
-        return str
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#39;");
+    createElement(tag, className, text) {
+        const el = document.createElement(tag);
+        if (className)
+            el.className = className;
+        if (text !== undefined)
+            el.textContent = text;
+        return el;
+    }
+    appendTextElement(parent, tag, className, text) {
+        const el = this.createElement(tag, className, text);
+        parent.appendChild(el);
+        return el;
+    }
+    buildModalShell(icon, title) {
+        const overlay = this.createElement("div", "poofnet-modal-overlay");
+        const content = this.createElement("div", "poofnet-modal-content");
+        overlay.appendChild(content);
+        const close = this.createElement("button", "poofnet-close-btn", "×");
+        close.id = "poofnet-close-btn";
+        close.setAttribute("aria-label", "Close");
+        close.type = "button";
+        content.appendChild(close);
+        const header = this.createElement("div", "poofnet-modal-header");
+        this.appendTextElement(header, "div", "poofnet-modal-icon", icon);
+        this.appendTextElement(header, "h2", "poofnet-modal-title", title);
+        this.appendTextElement(header, "p", "poofnet-modal-subtitle", "Poofnet Simulated Blockchain");
+        content.appendChild(header);
+        const body = this.createElement("div", "poofnet-modal-body");
+        content.appendChild(body);
+        const footer = this.createElement("div", "poofnet-modal-footer");
+        content.appendChild(footer);
+        return { overlay, body, footer };
+    }
+    buildInfoBox(text, warning = false) {
+        const info = this.createElement("div", "poofnet-info-box");
+        if (warning)
+            info.style.background = "#fef3c7";
+        this.appendTextElement(info, "span", "poofnet-info-icon", "ℹ️");
+        const infoText = this.createElement("span", "poofnet-info-text", text);
+        if (warning)
+            infoText.style.color = "#92400e";
+        info.appendChild(infoText);
+        return info;
+    }
+    buildUnsupportedModalContent() {
+        const { overlay, body, footer } = this.buildModalShell("⚠️", "Transaction Not Supported");
+        body.appendChild(this.buildInfoBox("Poofnet is a simulated blockchain and does not support real Solana transactions. Deploy your project to mainnet to test real transactions.", true));
+        const close = this.createElement("button", "poofnet-btn poofnet-btn-cancel", "Close");
+        close.id = "poofnet-cancel-btn";
+        close.type = "button";
+        close.style.flex = "1";
+        footer.appendChild(close);
+        return overlay;
     }
     formatPath(path) {
         const parts = path.split("/").filter(Boolean);
@@ -15138,59 +15066,11 @@ class OffchainAuthProvider {
             return `Delete from ${collection}`;
         return isNew ? `Create in ${collection}` : `Update ${collection}`;
     }
-    getModalHTML(parsed, rawMessage) {
+    buildTransactionModalContent(parsed, rawMessage) {
         const instructions = parsed.instructions || [];
         // Group instructions by type for summary
         const sets = instructions.filter((i) => i.type === "set");
         const deletes = instructions.filter((i) => i.type === "delete");
-        const instructionsList = instructions
-            .map((inst) => {
-            const { collection, documentId } = this.formatPath(inst.path);
-            const isDelete = inst.type === "delete";
-            const icon = isDelete ? "🗑️" : "✏️";
-            const actionClass = isDelete
-                ? "poofnet-action-delete"
-                : "poofnet-action-set";
-            // Format data fields for display
-            let fieldsHtml = "";
-            if (inst.data && !isDelete) {
-                const fields = Object.entries(inst.data)
-                    .filter(([key]) => !key.startsWith("_")) // Hide internal fields
-                    .slice(0, 4);
-                if (fields.length > 0) {
-                    fieldsHtml = `
-            <div class="poofnet-fields">
-              ${fields
-                        .map(([key, value]) => `
-                <div class="poofnet-field">
-                  <span class="poofnet-field-key">${this.escapeHtml(key)}:</span>
-                  <span class="poofnet-field-value">${this.escapeHtml(this.formatFieldValue(value))}</span>
-                </div>
-              `)
-                        .join("")}
-              ${Object.keys(inst.data).filter((k) => !k.startsWith("_"))
-                        .length > 4
-                        ? `<div class="poofnet-field-more">+${Object.keys(inst.data).filter((k) => !k.startsWith("_")).length - 4} more fields</div>`
-                        : ""}
-            </div>
-          `;
-                }
-            }
-            return `
-        <div class="poofnet-instruction ${actionClass}">
-          <div class="poofnet-instruction-header">
-            <span class="poofnet-instruction-icon">${icon}</span>
-            <span class="poofnet-instruction-action">${isDelete ? "Delete" : "Save"}</span>
-            <span class="poofnet-instruction-collection">${this.escapeHtml(collection)}</span>
-          </div>
-          ${documentId
-                ? `<div class="poofnet-instruction-id">ID: ${this.escapeHtml(documentId)}</div>`
-                : ""}
-          ${fieldsHtml}
-        </div>
-      `;
-        })
-            .join("");
         // Create summary text
         let summaryText = "";
         if (sets.length > 0 && deletes.length > 0) {
@@ -15202,50 +15082,65 @@ class OffchainAuthProvider {
         else if (deletes.length > 0) {
             summaryText = `${deletes.length} delete${deletes.length > 1 ? "s" : ""}`;
         }
-        return `
-      <div class="poofnet-modal-overlay">
-        <div class="poofnet-modal-content">
-          <button id="poofnet-close-btn" class="poofnet-close-btn" aria-label="Close">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M1 1L13 13M1 13L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-          </button>
-          <div class="poofnet-modal-header">
-            <div class="poofnet-modal-icon">🔐</div>
-            <h2 class="poofnet-modal-title">Confirm Transaction</h2>
-            <p class="poofnet-modal-subtitle">Poofnet Simulated Blockchain</p>
-          </div>
-
-          <div class="poofnet-modal-body">
-            ${instructions.length > 0
-            ? `
-              ${summaryText
-                ? `<div class="poofnet-summary">${summaryText}</div>`
-                : ""}
-              <div class="poofnet-instructions-list">
-                ${instructionsList}
-              </div>
-            `
-            : `
-              <div class="poofnet-section">
-                <h3 class="poofnet-section-title">Message</h3>
-                <pre class="poofnet-raw-message">${this.escapeHtml(rawMessage.slice(0, 200))}${rawMessage.length > 200 ? "..." : ""}</pre>
-              </div>
-            `}
-
-            <div class="poofnet-info-box">
-              <span class="poofnet-info-icon">ℹ️</span>
-              <span class="poofnet-info-text">This is a simulated transaction. No real fees will be charged.</span>
-            </div>
-          </div>
-
-          <div class="poofnet-modal-footer">
-            <button id="poofnet-cancel-btn" class="poofnet-btn poofnet-btn-cancel">Cancel</button>
-            <button id="poofnet-confirm-btn" class="poofnet-btn poofnet-btn-confirm">Confirm</button>
-          </div>
-        </div>
-      </div>
-    `;
+        const { overlay, body, footer } = this.buildModalShell("🔐", "Confirm Transaction");
+        if (instructions.length > 0) {
+            if (summaryText) {
+                this.appendTextElement(body, "div", "poofnet-summary", summaryText);
+            }
+            const list = this.createElement("div", "poofnet-instructions-list");
+            for (const inst of instructions) {
+                list.appendChild(this.buildInstructionElement(inst));
+            }
+            body.appendChild(list);
+        }
+        else {
+            const section = this.createElement("div", "poofnet-section");
+            this.appendTextElement(section, "h3", "poofnet-section-title", "Message");
+            const raw = this.createElement("pre", "poofnet-raw-message", rawMessage.slice(0, 200) + (rawMessage.length > 200 ? "..." : ""));
+            section.appendChild(raw);
+            body.appendChild(section);
+        }
+        body.appendChild(this.buildInfoBox("This is a simulated transaction. No real fees will be charged."));
+        const cancel = this.createElement("button", "poofnet-btn poofnet-btn-cancel", "Cancel");
+        cancel.id = "poofnet-cancel-btn";
+        cancel.type = "button";
+        footer.appendChild(cancel);
+        const confirm = this.createElement("button", "poofnet-btn poofnet-btn-confirm", "Confirm");
+        confirm.id = "poofnet-confirm-btn";
+        confirm.type = "button";
+        footer.appendChild(confirm);
+        return overlay;
+    }
+    buildInstructionElement(inst) {
+        const { collection, documentId } = this.formatPath(inst.path);
+        const isDelete = inst.type === "delete";
+        const card = this.createElement("div", `poofnet-instruction ${isDelete ? "poofnet-action-delete" : "poofnet-action-set"}`);
+        const header = this.createElement("div", "poofnet-instruction-header");
+        this.appendTextElement(header, "span", "poofnet-instruction-icon", isDelete ? "🗑️" : "✏️");
+        this.appendTextElement(header, "span", "poofnet-instruction-action", isDelete ? "Delete" : "Save");
+        this.appendTextElement(header, "span", "poofnet-instruction-collection", collection);
+        card.appendChild(header);
+        if (documentId) {
+            this.appendTextElement(card, "div", "poofnet-instruction-id", `ID: ${documentId}`);
+        }
+        if (inst.data && !isDelete) {
+            const fieldKeys = Object.keys(inst.data).filter((key) => !key.startsWith("_"));
+            const visibleFields = fieldKeys.slice(0, 4);
+            if (visibleFields.length > 0) {
+                const fields = this.createElement("div", "poofnet-fields");
+                for (const key of visibleFields) {
+                    const row = this.createElement("div", "poofnet-field");
+                    this.appendTextElement(row, "span", "poofnet-field-key", `${key}:`);
+                    this.appendTextElement(row, "span", "poofnet-field-value", this.formatFieldValue(inst.data[key]));
+                    fields.appendChild(row);
+                }
+                if (fieldKeys.length > 4) {
+                    this.appendTextElement(fields, "div", "poofnet-field-more", `+${fieldKeys.length - 4} more fields`);
+                }
+                card.appendChild(fields);
+            }
+        }
+        return card;
     }
     getModalStyles() {
         return `
@@ -18581,9 +18476,7 @@ const emailProviderSingleton = new EmailAuthProvider();
 function openEmailModal() {
     return new Promise((resolve) => {
         var _a;
-        const root = document.createElement('div');
-        root.id = 'bounded-auth-modal';
-        root.innerHTML = MODAL_HTML;
+        const root = createEmailModalTree();
         const style = document.createElement('style');
         style.textContent = MODAL_CSS;
         root.appendChild(style);
@@ -18671,26 +18564,97 @@ function openEmailModal() {
         });
     });
 }
-const MODAL_HTML = `
-<div class="ba-overlay">
-  <div class="ba-card" role="dialog" aria-modal="true" aria-label="Sign in">
-    <button id="ba-close" class="ba-x" aria-label="Close">&times;</button>
-    <div class="ba-brand"><span class="ba-dot"></span> Sign in</div>
-    <div id="ba-email-step">
-      <label class="ba-label" for="ba-email">Email</label>
-      <input id="ba-email" class="ba-input" type="email" inputmode="email" autocomplete="email" placeholder="you@example.com" />
-      <button id="ba-email-btn" class="ba-btn">Continue</button>
-    </div>
-    <div id="ba-otp-step" class="hidden">
-      <label class="ba-label" for="ba-otp">Enter the code sent to <span id="ba-sent-to" class="ba-em"></span></label>
-      <input id="ba-otp" class="ba-input ba-code" inputmode="numeric" autocomplete="one-time-code" maxlength="8" placeholder="······" />
-      <button id="ba-otp-btn" class="ba-btn">Verify &amp; continue</button>
-      <button id="ba-back" class="ba-link">Use a different email</button>
-    </div>
-    <div id="ba-msg" class="ba-msg"></div>
-    <div class="ba-foot">Secured by Bounded</div>
-  </div>
-</div>`;
+function createEmailModalTree() {
+    const root = document.createElement('div');
+    root.id = 'bounded-auth-modal';
+    const overlay = document.createElement('div');
+    overlay.className = 'ba-overlay';
+    root.appendChild(overlay);
+    const card = document.createElement('div');
+    card.className = 'ba-card';
+    card.setAttribute('role', 'dialog');
+    card.setAttribute('aria-modal', 'true');
+    card.setAttribute('aria-label', 'Sign in');
+    overlay.appendChild(card);
+    const close = document.createElement('button');
+    close.id = 'ba-close';
+    close.className = 'ba-x';
+    close.setAttribute('aria-label', 'Close');
+    close.type = 'button';
+    close.textContent = '×';
+    card.appendChild(close);
+    const brand = document.createElement('div');
+    brand.className = 'ba-brand';
+    const dot = document.createElement('span');
+    dot.className = 'ba-dot';
+    brand.appendChild(dot);
+    brand.appendChild(document.createTextNode(' Sign in'));
+    card.appendChild(brand);
+    const emailStep = document.createElement('div');
+    emailStep.id = 'ba-email-step';
+    card.appendChild(emailStep);
+    const emailLabel = document.createElement('label');
+    emailLabel.className = 'ba-label';
+    emailLabel.htmlFor = 'ba-email';
+    emailLabel.textContent = 'Email';
+    emailStep.appendChild(emailLabel);
+    const emailInput = document.createElement('input');
+    emailInput.id = 'ba-email';
+    emailInput.className = 'ba-input';
+    emailInput.type = 'email';
+    emailInput.inputMode = 'email';
+    emailInput.autocomplete = 'email';
+    emailInput.placeholder = 'you@example.com';
+    emailStep.appendChild(emailInput);
+    const emailButton = document.createElement('button');
+    emailButton.id = 'ba-email-btn';
+    emailButton.className = 'ba-btn';
+    emailButton.type = 'button';
+    emailButton.textContent = 'Continue';
+    emailStep.appendChild(emailButton);
+    const otpStep = document.createElement('div');
+    otpStep.id = 'ba-otp-step';
+    otpStep.className = 'hidden';
+    card.appendChild(otpStep);
+    const otpLabel = document.createElement('label');
+    otpLabel.className = 'ba-label';
+    otpLabel.htmlFor = 'ba-otp';
+    otpLabel.appendChild(document.createTextNode('Enter the code sent to '));
+    const sentTo = document.createElement('span');
+    sentTo.id = 'ba-sent-to';
+    sentTo.className = 'ba-em';
+    otpLabel.appendChild(sentTo);
+    otpStep.appendChild(otpLabel);
+    const otpInput = document.createElement('input');
+    otpInput.id = 'ba-otp';
+    otpInput.className = 'ba-input ba-code';
+    otpInput.inputMode = 'numeric';
+    otpInput.autocomplete = 'one-time-code';
+    otpInput.maxLength = 8;
+    otpInput.placeholder = '······';
+    otpStep.appendChild(otpInput);
+    const otpButton = document.createElement('button');
+    otpButton.id = 'ba-otp-btn';
+    otpButton.className = 'ba-btn';
+    otpButton.type = 'button';
+    otpButton.textContent = 'Verify & continue';
+    otpStep.appendChild(otpButton);
+    const backButton = document.createElement('button');
+    backButton.id = 'ba-back';
+    backButton.className = 'ba-link';
+    backButton.type = 'button';
+    backButton.textContent = 'Use a different email';
+    otpStep.appendChild(backButton);
+    const msg = document.createElement('div');
+    msg.id = 'ba-msg';
+    msg.className = 'ba-msg';
+    card.appendChild(msg);
+    const foot = document.createElement('div');
+    foot.className = 'ba-foot';
+    foot.textContent = 'Secured by Bounded';
+    card.appendChild(foot);
+    return root;
+}
 const MODAL_CSS = `
 #bounded-auth-modal .ba-overlay{position:fixed;inset:0;background:rgba(8,10,18,.62);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:2147483000;opacity:1;transition:opacity .16s ease;
@@ -21428,7 +21392,7 @@ async function awaitSignInGestureAndSign(theme, signFn, noResultError = 'MWA ret
         ].join('; ');
         const closeBtn = document.createElement('button');
         closeBtn.setAttribute('aria-label', 'Close');
-        closeBtn.textContent = '×'; // × (multiplication sign), set via textContent to avoid any innerHTML usage
+        closeBtn.textContent = '×';
         closeBtn.style.cssText = [
             'position: absolute',
             'top: 12px',