@usero/sdk 0.2.0 → 0.3.0

package/dist/vanilla.js

@@ -155,6 +155,25 @@ function getGradientEnd(color) {
   return `#${[shiftedR, shiftedG, shiftedB].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
 }
 
+// src/plugin.ts
+function createPluginLogger(name) {
+  const prefix = `[usero:${name}]`;
+  return {
+    debug: (...args) => {
+      if (typeof console !== "undefined") console.debug(prefix, ...args);
+    },
+    info: (...args) => {
+      if (typeof console !== "undefined") console.info(prefix, ...args);
+    },
+    warn: (...args) => {
+      if (typeof console !== "undefined") console.warn(prefix, ...args);
+    },
+    error: (...args) => {
+      if (typeof console !== "undefined") console.error(prefix, ...args);
+    }
+  };
+}
+
 // src/validation.ts
 function validateFeedbackSubmission(data) {
   const errors = [];
@@ -190,8 +209,8 @@ var FEEDBACK_CSS = `
 .fb-es {
   display: flex;
   justify-content: center;
-  gap: 15px;
-  padding-bottom: 10px;
+  gap: 12px;
+  padding-bottom: 8px;
 }
 
 .fb-ec {
@@ -282,7 +301,7 @@ var FEEDBACK_CSS = `
 
 .fb-sub {
   width: 100%;
-  padding: 16px 24px;
+  padding: 12px 24px;
   border: none;
   border-radius: 12px;
   font-size: 15px;
@@ -310,7 +329,7 @@ var FEEDBACK_CSS = `
 }
 
 .fb-cnt {
-  padding: 24px;
+  padding: 20px 24px 16px;
   overflow: auto;
   max-height: calc(90vh - 48px);
 }
@@ -323,22 +342,29 @@ var FEEDBACK_CSS = `
 
 .fb-ta {
   width: 100%;
-  min-height: 100px;
-  padding: 12px;
+  min-height: 80px;
+  padding: 10px;
   border-radius: 8px;
   font-size: 14px;
   font-family: inherit;
   outline: none;
   resize: vertical;
   transition: border-color 150ms ease;
-  margin-bottom: 4px;
+  margin-bottom: 2px;
   box-sizing: border-box;
 }
 
+.fb-toolrow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
 .fb-charcount {
   font-size: 12px;
   margin-left: auto;
-  margin-bottom: 8px;
   text-align: right;
 }
 
@@ -349,8 +375,8 @@ var FEEDBACK_CSS = `
 .fb-email {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
+  gap: 6px;
+  margin-bottom: 10px;
 }
 
 .fb-email-lbl {
@@ -486,8 +512,8 @@ var FEEDBACK_CSS = `
 .fb-up {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-bottom: 12px;
+  gap: 6px;
+  margin-bottom: 8px;
 }
 
 .fb-upb {
@@ -589,15 +615,15 @@ var FEEDBACK_CSS = `
   .fb-pnl-base {
     width: 100% !important;
     max-width: none !important;
-    top: 5vh !important;
-    max-height: 70vh !important;
+    top: 4vh !important;
+    max-height: 92vh !important;
   }
-  .fb-cnt { padding: 20px !important; max-height: calc(100vh - 80px) !important; }
-  .fb-ta { font-size: 16px !important; min-height: 80px !important; }
+  .fb-cnt { padding: 16px 18px 14px !important; max-height: calc(100vh - 40px) !important; }
+  .fb-ta { font-size: 16px !important; min-height: 64px !important; }
   .fb-ttl { font-size: 18px !important; }
   .fb-ei { font-size: 24px !important; }
   .fb-el { font-size: 11px !important; }
-  .fb-sub { padding: 14px 20px !important; font-size: 16px !important; }
+  .fb-sub { padding: 12px 20px !important; font-size: 16px !important; }
 }
 `;
 
@@ -634,6 +660,21 @@ function escapeHtml(value) {
     }
   });
 }
+function mergePluginPatches(base, patches) {
+  let result = base;
+  for (const patch of patches) {
+    if (!patch || typeof patch !== "object") continue;
+    const { metadata: patchMetadata, ...rest } = patch;
+    result = { ...result, ...rest };
+    if (patchMetadata && typeof patchMetadata === "object") {
+      result.metadata = {
+        ...result.metadata ?? {},
+        ...patchMetadata
+      };
+    }
+  }
+  return result;
+}
 function readStoredEmail() {
   if (typeof window === "undefined") return "";
   try {
@@ -658,7 +699,8 @@ function initUseroFeedbackWidget(props) {
       close: () => {
       },
       update: () => {
-      }
+      },
+      whenReady: () => Promise.resolve()
     };
   }
   const { clientId, baseUrl } = props;
@@ -673,7 +715,8 @@ function initUseroFeedbackWidget(props) {
       close: () => {
       },
       update: () => {
-      }
+      },
+      whenReady: () => Promise.resolve()
     };
   }
   let position = props.position ?? "right";
@@ -690,6 +733,34 @@ function initUseroFeedbackWidget(props) {
   let onOpen = props.onOpen;
   let onClose = props.onClose;
   const apiClient = new FeedbackApiClient(baseUrl);
+  const pluginList = props.plugins ?? [];
+  const pluginStores = /* @__PURE__ */ new Map();
+  const pluginContexts = /* @__PURE__ */ new Map();
+  const initPromises = [];
+  for (const plugin of pluginList) {
+    const ctx = {
+      clientId,
+      baseUrl: baseUrl ?? DEFAULT_API_URL,
+      logger: createPluginLogger(plugin.name),
+      getStore: () => pluginStores.get(plugin.name),
+      setStore: (value) => {
+        pluginStores.set(plugin.name, value);
+      }
+    };
+    pluginContexts.set(plugin.name, ctx);
+    if (plugin.onInit) {
+      const settled = (async () => {
+        try {
+          await plugin.onInit?.(ctx);
+        } catch (err) {
+          ctx.logger.error("onInit threw", err);
+        }
+      })();
+      initPromises.push(settled);
+    }
+  }
+  const readyPromise = initPromises.length === 0 ? Promise.resolve() : Promise.all(initPromises).then(() => {
+  });
   let isOpen = false;
   let selectedRating = void 0;
   let comment = "";
@@ -808,8 +879,24 @@ function initUseroFeedbackWidget(props) {
       setSubmitMessage({ type: "error", text: validation.errors.join(", ") });
       return;
     }
+    let enrichedSubmission = submission;
+    if (pluginList.length > 0) {
+      const patchPromises = pluginList.map(async (plugin) => {
+        if (!plugin.onFeedbackSubmit) return void 0;
+        const ctx = pluginContexts.get(plugin.name);
+        if (!ctx) return void 0;
+        try {
+          return await plugin.onFeedbackSubmit(ctx, submission);
+        } catch (err) {
+          ctx.logger.error("onFeedbackSubmit threw", err);
+          return void 0;
+        }
+      });
+      const patches = await Promise.all(patchPromises);
+      enrichedSubmission = mergePluginPatches(submission, patches);
+    }
     try {
-      const response = await apiClient.submitFeedback(submission);
+      const response = await apiClient.submitFeedback(enrichedSubmission);
       if (response.success) {
         if (shareEmail && userEmail) writeStoredEmail(userEmail);
         onSubmit?.(feedbackData);
@@ -866,17 +953,26 @@ function initUseroFeedbackWidget(props) {
       const cls = ["fb-ec", sel && "fb-ec--sel"].filter(Boolean).join(" ");
       return `
 					<div class="${cls}" style="background:${bg}">
-						<button type="button" class="fb-eb" data-rating="${r}" role="radio" aria-checked="${sel}" aria-label="${r}: ${RATING_LABELS[r]}">
+						<button type="button" class="fb-eb" data-rating="${r}" role="radio" aria-checked="${sel}" aria-label="${r}: ${RATING_LABELS[r]}" style="color:${theme.text}">
 							<div class="fb-ei"><span role="img" aria-label="${RATING_LABELS[r]}">${EMOJI_MAP[r]}</span></div>
-							<div class="fb-el">${RATING_LABELS[r]}</div>
+							<div class="fb-el" style="color:${theme.text}">${RATING_LABELS[r]}</div>
 						</button>
 					</div>
 				`;
     }).join("");
     const messageHtml = submitMessage ? `<div class="fb-msg fb-msg--header ${submitMessage.type === "success" ? "fb-msg--ok" : "fb-msg--err"}">${submitMessage.type === "success" ? "\u2713" : "\u26A0"} ${escapeHtml(submitMessage.text)}</div>` : "";
-    const screenshotBlockHtml = showScreenshotOption ? (() => {
+    const uploadBtnHtml = showScreenshotOption ? (() => {
       const atMax = screenshots.length >= MAX_SCREENSHOTS;
       const btnDisabled = isUploadingScreenshot || atMax;
+      return `
+						<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
+						<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
+							${isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot"}
+						</button>
+					`;
+    })() : "";
+    const uploadExtrasHtml = showScreenshotOption ? (() => {
+      const atMax = screenshots.length >= MAX_SCREENSHOTS;
       const previewsHtml = screenshots.map(
         (shot, i) => `
 								<div class="fb-sp">
@@ -887,16 +983,7 @@ function initUseroFeedbackWidget(props) {
       ).join("");
       const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
       const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
-      const extrasHtml = screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
-      return `
-						<div class="fb-up">
-							<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
-							<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
-								${isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot"}
-							</button>
-							${extrasHtml}
-						</div>
-					`;
+      return screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
     })() : "";
     const emailBlockHtml = showEmailOption ? `
 				<div class="fb-email">
@@ -919,8 +1006,11 @@ function initUseroFeedbackWidget(props) {
 				<form data-role="form">
 					<div class="fb-es" role="radiogroup" aria-label="Rate experience">${ratingsHtml}</div>
 					<textarea class="fb-ta" data-role="comment" placeholder="${escapeHtml(placeholder)}" aria-label="Comments" maxlength="1000" rows="2" style="border:1px solid ${theme.border};color:${theme.text};background-color:${theme.background};">${escapeHtml(comment)}</textarea>
-					<div class="fb-charcount${lowChars ? " fb-charcount--low" : ""}" data-role="charcount" style="color:${lowChars ? "#dc2626" : theme.text};opacity:${lowChars ? 1 : 0.6};">${remaining} chars remaining</div>
-					${screenshotBlockHtml}
+					<div class="fb-toolrow">
+						${uploadBtnHtml}
+						<div class="fb-charcount${lowChars ? " fb-charcount--low" : ""}" data-role="charcount" style="color:${lowChars ? "#dc2626" : theme.text};opacity:${lowChars ? 1 : 0.6};">${remaining} chars remaining</div>
+					</div>
+					${uploadExtrasHtml ? `<div class="fb-up">${uploadExtrasHtml}</div>` : ""}
 					${emailBlockHtml}
 					<button class="fb-sub ${submitDisabled ? "fb-sub--dis" : ""}" type="submit" aria-label="Submit" ${submitDisabled ? "disabled" : ""} style="${submitStyle}">
 						${isSubmitting ? '<span class="fb-spin"></span>' : ""}
@@ -1051,10 +1141,23 @@ function initUseroFeedbackWidget(props) {
       destroyed = true;
       document.removeEventListener("keydown", onKeyDown);
       detachMqlListener();
+      for (const plugin of pluginList) {
+        if (!plugin.onDestroy) continue;
+        const ctx = pluginContexts.get(plugin.name);
+        if (!ctx) continue;
+        try {
+          plugin.onDestroy(ctx);
+        } catch (err) {
+          ctx.logger.error("onDestroy threw", err);
+        }
+      }
+      pluginStores.clear();
+      pluginContexts.clear();
       host.remove();
     },
     open,
     close,
+    whenReady: () => readyPromise,
     update: (next) => {
       if (destroyed) return;
       let needsRender = false;
@@ -1096,6 +1199,6 @@ function initUseroFeedbackWidget(props) {
   };
 }
 
-export { DARK_THEME, DEFAULT_THEME, initUseroFeedbackWidget, mergeTheme, resolveTheme };
+export { DARK_THEME, DEFAULT_THEME, initUseroFeedbackWidget, mergePluginPatches, mergeTheme, resolveTheme };
 //# sourceMappingURL=vanilla.js.map
 //# sourceMappingURL=vanilla.js.map