@catandbox/schrodinger-web-adapter 0.1.16 → 0.1.18

package/dist/client/dom-utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * DOM helpers that avoid direct innerHTML/outerHTML assignment.
+ * All dynamic content must still be escaped before passing to these functions.
+ */
+export declare function setInnerHtml(el: HTMLElement, html: string): void;
+export declare function replaceOuterHtml(el: HTMLElement, html: string): void;

package/dist/client/dom-utils.js

@@ -0,0 +1,15 @@
+/**
+ * DOM helpers that avoid direct innerHTML/outerHTML assignment.
+ * All dynamic content must still be escaped before passing to these functions.
+ */
+export function setInnerHtml(el, html) {
+    el.replaceChildren();
+    if (html) {
+        const frag = document.createRange().createContextualFragment(html);
+        el.append(frag);
+    }
+}
+export function replaceOuterHtml(el, html) {
+    const frag = document.createRange().createContextualFragment(html);
+    el.replaceWith(frag);
+}

package/dist/client/file-upload.js

@@ -1,3 +1,4 @@
+import { setInnerHtml, replaceOuterHtml } from "./dom-utils";
 const MAX_FILES = 5;
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5 MB
 async function computeSha256(file) {
@@ -85,7 +86,7 @@ export function createFileUpload() {
                 const errorEl = container.querySelector("#sch-file-error");
                 const err = addFiles(input.files);
                 if (err) {
-                    errorEl.innerHTML = `<s-text variant="bodySm" tone="critical">${escapeHtml(err)}</s-text>`;
+                    setInnerHtml(errorEl, `<s-text variant="bodySm" tone="critical">${escapeHtml(err)}</s-text>`);
                 }
                 else {
                     errorEl.innerHTML = "";
@@ -108,7 +109,7 @@ export function createFileUpload() {
         const wrapper = container.querySelector("#sch-file-list")?.parentElement;
         if (!wrapper)
             return;
-        wrapper.outerHTML = render();
+        replaceOuterHtml(wrapper, render());
         attachListeners(container);
     }
     function hasFiles() {

package/dist/client/new-ticket-form.js

@@ -1,4 +1,5 @@
 import { createFileUpload } from "./file-upload";
+import { setInnerHtml } from "./dom-utils";
 const FIELD_STYLE = [
     "width:100%",
     "padding:10px 12px",
@@ -18,7 +19,7 @@ export function renderNewTicketForm(container, client, categories, emitter) {
         .map((cat) => `<option value="${cat.id}">${escapeHtml(cat.name)}</option>`)
         .join("");
     const fileUpload = createFileUpload();
-    container.innerHTML = `
+    setInnerHtml(container, `
     <s-card>
       <s-box padding="large">
         <s-stack gap="large">
@@ -82,7 +83,7 @@ export function renderNewTicketForm(container, client, categories, emitter) {
         </s-stack>
       </s-box>
     </s-card>
-  `;
+  `);
     fileUpload.attachListeners(container);
     const form = container.querySelector("#sch-new-ticket-form");
     container.querySelector("#sch-cancel-btn")?.addEventListener("click", () => {
@@ -131,11 +132,11 @@ export function renderNewTicketForm(container, client, categories, emitter) {
             emitter.emit("ticket:created", ticket.id);
         }
         catch (error) {
-            errorEl.innerHTML = `
+            setInnerHtml(errorEl, `
         <s-banner tone="critical">
           <s-text>Failed to create ticket: ${escapeHtml(error instanceof Error ? error.message : String(error))}</s-text>
         </s-banner>
-      `;
+      `);
             submitBtn.removeAttribute("disabled");
         }
     });

package/dist/client/ticket-detail.js

@@ -1,5 +1,6 @@
 import { renderStatusBadge } from "./status-badge";
 import { createFileUpload } from "./file-upload";
+import { setInnerHtml } from "./dom-utils";
 function formatTimestamp(timestamp) {
     const date = new Date(timestamp * 1000);
     const now = new Date();
@@ -37,7 +38,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
         const data = await client.getTicket(ticketId);
         const { ticket, messages } = data;
         const isOpen = ticket.status !== "Closed" && ticket.status !== "Archived";
-        container.innerHTML = `
+        setInnerHtml(container, `
       <s-card>
         <s-box padding="large">
           <s-stack gap="large">
@@ -103,7 +104,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
           </s-box>
         </s-card>`
             : ""}
-    `;
+    `);
         // Back button
         container.querySelector("#sch-back-btn")?.addEventListener("click", () => {
             emitter.emit("ticket:back", undefined);
@@ -113,7 +114,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
         const replyFilesContainer = container.querySelector("#sch-reply-files");
         if (replyFilesContainer) {
             replyFileUpload = createFileUpload();
-            replyFilesContainer.innerHTML = replyFileUpload.render();
+            setInnerHtml(replyFilesContainer, replyFileUpload.render());
             replyFileUpload.attachListeners(replyFilesContainer);
         }
         // Send reply
@@ -168,7 +169,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
         });
     }
     catch (error) {
-        container.innerHTML = `
+        setInnerHtml(container, `
       <s-card>
         <s-box padding="large">
           <s-stack gap="base">
@@ -184,7 +185,7 @@ export async function renderTicketDetail(container, client, ticketId, emitter) {
           </s-stack>
         </s-box>
       </s-card>
-    `;
+    `);
         container.querySelector("#sch-back-btn")?.addEventListener("click", () => {
             emitter.emit("ticket:back", undefined);
         });
@@ -237,11 +238,11 @@ function showError(container, message) {
         existing.remove();
     const banner = document.createElement("div");
     banner.id = "sch-error-banner";
-    banner.innerHTML = `
+    setInnerHtml(banner, `
     <s-banner tone="critical" style="margin-bottom:12px;">
       <s-text>${escapeHtml(message)}</s-text>
     </s-banner>
-  `;
+  `);
     const replySection = container.querySelector("#sch-reply-section");
     if (replySection) {
         replySection.insertBefore(banner, replySection.firstChild);

package/dist/client/ticket-list.js

@@ -1,4 +1,5 @@
 import { renderStatusBadge } from "./status-badge";
+import { setInnerHtml } from "./dom-utils";
 function formatDate(timestamp) {
     return new Date(timestamp * 1000).toLocaleDateString(undefined, {
         month: "short",
@@ -75,7 +76,7 @@ export async function renderTicketList(container, client, emitter, statusFilter)
                 ?.addEventListener("click", () => emitter.emit("ticket:create", undefined));
             return;
         }
-        body.innerHTML = tickets
+        setInnerHtml(body, tickets
             .map((ticket) => `
       <div class="sch-ticket-row" data-ticket-id="${ticket.id}"
         style="display:flex; justify-content:space-between; align-items:center; padding:14px 16px; margin:0 -16px; border-radius:8px; cursor:pointer; transition:background 0.15s ease;"
@@ -100,7 +101,7 @@ export async function renderTicketList(container, client, emitter, statusFilter)
         </div>
       </div>
     `)
-            .join(`<div style="border-bottom:1px solid var(--p-color-border-subdued, #e1e3e5); margin:0;"></div>`);
+            .join(`<div style="border-bottom:1px solid var(--p-color-border-subdued, #e1e3e5); margin:0;"></div>`));
         container.querySelectorAll("[data-ticket-id]").forEach((el) => {
             el.addEventListener("click", () => {
                 const ticketId = el.getAttribute("data-ticket-id");
@@ -111,11 +112,11 @@ export async function renderTicketList(container, client, emitter, statusFilter)
         });
     }
     catch (error) {
-        body.innerHTML = `
+        setInnerHtml(body, `
       <s-banner tone="critical">
         <s-text>Failed to load tickets: ${escapeHtml(error instanceof Error ? error.message : String(error))}</s-text>
       </s-banner>
-    `;
+    `);
     }
 }
 function getStatusDotColor(status) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catandbox/schrodinger-web-adapter",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",