uidex 0.1.1 → 0.2.1

package/dist/core/style.css

@@ -782,49 +782,56 @@ body.uidex-inspecting * {
   color: var(--uidex-color-text-muted);
 }
 
-.uidex-form-select {
-  appearance: none;
-  padding: 6px 10px;
+.uidex-form-select,
+.uidex-form-input,
+.uidex-form-textarea {
   border: 1px solid var(--uidex-color-border);
   border-radius: 0;
   background: transparent;
   color: var(--uidex-color-text);
   font-size: var(--uidex-font-size-sm);
   font-family: var(--uidex-font-mono);
-  cursor: pointer;
   outline: none;
+}
+
+.uidex-form-select:focus,
+.uidex-form-input:focus,
+.uidex-form-textarea:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.uidex-form-input::placeholder,
+.uidex-form-textarea::placeholder {
+  color: var(--uidex-color-text-muted);
+}
+
+.uidex-form-select {
+  appearance: none;
+  padding: 6px 10px;
+  cursor: pointer;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ababab' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-right: 26px;
 }
 
-.uidex-form-select:focus {
-  border-color: rgba(255, 255, 255, 0.3);
+.uidex-form-input {
+  padding: 6px 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.uidex-form-input + .uidex-form-input {
+  margin-top: 6px;
 }
 
 .uidex-form-textarea {
   padding: 8px 10px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text);
-  font-size: var(--uidex-font-size-sm);
-  font-family: var(--uidex-font-mono);
   line-height: 1.5;
   resize: vertical;
-  outline: none;
   min-height: 80px;
 }
 
-.uidex-form-textarea::placeholder {
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-form-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
 .uidex-form-submit {
   padding: 6px 16px;
   border: 1px solid var(--uidex-color-border);
@@ -843,7 +850,7 @@ body.uidex-inspecting * {
   background: var(--uidex-color-primary-hover);
 }
 
-.uidex-form-submit:active {
+.uidex-form-submit:not(:disabled):active {
   transform: translateY(1px);
 }
 

package/dist/index.cjs

@@ -273,7 +273,7 @@ function resolveColor(color, colorMap) {
 }
 
 // src/core/overlay.ts
-var DEFAULT_COLOR = "#e5e5e5";
+var DEFAULT_COLOR = "#3b82f6";
 var DEFAULT_BORDER_STYLE = "solid";
 var DEFAULT_BORDER_WIDTH = 2;
 var DEFAULT_LABEL_POSITION = "top-left";
@@ -424,6 +424,23 @@ var Overlay = class {
     this.element.style.left = `${rect.left}px`;
     this.element.style.width = `${rect.width}px`;
     this.element.style.height = `${rect.height}px`;
+    this.clampLabel(rect);
+  }
+  /** Move the label inside the overlay when there is no room outside. */
+  clampLabel(rect) {
+    if (!this.labelElement || this.labelElement.style.display === "none") return;
+    const {
+      labelPosition = DEFAULT_LABEL_POSITION
+    } = this.options;
+    const isTop = labelPosition === "top-left" || labelPosition === "top-right";
+    const labelHeight = 20;
+    if (isTop && rect.top < labelHeight) {
+      this.labelElement.style.top = "4px";
+      this.labelElement.style.transform = "";
+    } else if (!isTop && window.innerHeight - rect.bottom < labelHeight) {
+      this.labelElement.style.bottom = "4px";
+      this.labelElement.style.transform = "";
+    }
   }
   addListeners() {
     window.addEventListener("resize", this.boundUpdatePosition);
@@ -564,6 +581,154 @@ var Inspector = class {
   }
 };
 
+// src/core/ingest.ts
+var MAX_CONSOLE_LOGS = 50;
+var MAX_NETWORK_ERRORS = 20;
+var nativeFetch = null;
+function safeStringify(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+var IngestCapture = class {
+  constructor(captureConsole, captureNetwork) {
+    this.captureConsole = captureConsole;
+    this.captureNetwork = captureNetwork;
+  }
+  consoleLogs = [];
+  networkErrors = [];
+  originalConsoleWarn = null;
+  originalConsoleError = null;
+  originalFetch = null;
+  start() {
+    this.consoleLogs = [];
+    this.networkErrors = [];
+    if (this.captureConsole) this.interceptConsole();
+    if (this.captureNetwork) this.interceptNetwork();
+  }
+  stop() {
+    this.restoreConsole();
+    this.restoreNetwork();
+  }
+  getConsoleLogs() {
+    return [...this.consoleLogs];
+  }
+  getNetworkErrors() {
+    return [...this.networkErrors];
+  }
+  interceptConsole() {
+    if (this.originalConsoleWarn) return;
+    this.originalConsoleWarn = console.warn;
+    this.originalConsoleError = console.error;
+    console.warn = (...args) => {
+      this.addConsoleLog("warn", args);
+      this.originalConsoleWarn.apply(console, args);
+    };
+    console.error = (...args) => {
+      this.addConsoleLog("error", args);
+      this.originalConsoleError.apply(console, args);
+    };
+  }
+  addConsoleLog(level, args) {
+    this.consoleLogs.push({
+      level,
+      message: args.map(safeStringify).join(" "),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (this.consoleLogs.length > MAX_CONSOLE_LOGS) {
+      this.consoleLogs.shift();
+    }
+  }
+  restoreConsole() {
+    if (this.originalConsoleWarn) {
+      console.warn = this.originalConsoleWarn;
+      this.originalConsoleWarn = null;
+    }
+    if (this.originalConsoleError) {
+      console.error = this.originalConsoleError;
+      this.originalConsoleError = null;
+    }
+  }
+  interceptNetwork() {
+    if (this.originalFetch) return;
+    this.originalFetch = window.fetch;
+    if (!nativeFetch) nativeFetch = this.originalFetch;
+    window.fetch = async (...args) => {
+      try {
+        const response = await this.originalFetch.apply(window, args);
+        if (!response.ok) {
+          this.addNetworkError(args[0], args[1]?.method, response.status, response.statusText);
+        }
+        return response;
+      } catch (error) {
+        this.addNetworkError(
+          args[0],
+          args[1]?.method,
+          null,
+          error instanceof Error ? error.message : "Network error"
+        );
+        throw error;
+      }
+    };
+  }
+  addNetworkError(input, method, status, statusText) {
+    let url;
+    if (typeof input === "string") {
+      url = input;
+    } else if (input instanceof URL) {
+      url = input.href;
+    } else {
+      url = input.url;
+      method ??= input.method;
+    }
+    this.networkErrors.push({
+      url,
+      method: method ?? "GET",
+      status,
+      statusText,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    if (this.networkErrors.length > MAX_NETWORK_ERRORS) {
+      this.networkErrors.shift();
+    }
+  }
+  restoreNetwork() {
+    if (this.originalFetch) {
+      window.fetch = this.originalFetch;
+      this.originalFetch = null;
+    }
+  }
+};
+function generateSessionId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
+async function submitFeedback(endpoint, apiKey, report) {
+  const fetchFn = nativeFetch ?? fetch;
+  const response = await fetchFn(endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`
+    },
+    body: JSON.stringify(report)
+  });
+  if (!response.ok) {
+    const text = await response.text().catch(() => "");
+    throw new Error(`Ingest failed (${response.status}): ${text}`);
+  }
+  return response.json();
+}
+
 // src/core/modal.ts
 var Modal = class _Modal {
   backdrop = null;
@@ -1546,6 +1711,14 @@ var Modal = class _Modal {
       "medium"
     );
     form.appendChild(severitySelect.group);
+    const titleGroup = this.createFormGroup("Title");
+    const titleInput = document.createElement("input");
+    titleInput.type = "text";
+    titleInput.className = "uidex-form-input";
+    titleInput.placeholder = "Brief summary (optional)";
+    titleInput.maxLength = 200;
+    titleGroup.appendChild(titleInput);
+    form.appendChild(titleGroup);
     const descGroup = this.createFormGroup("Description");
     const textarea = document.createElement("textarea");
     textarea.className = "uidex-form-textarea";
@@ -1553,6 +1726,22 @@ var Modal = class _Modal {
     textarea.rows = 4;
     descGroup.appendChild(textarea);
     form.appendChild(descGroup);
+    let emailInput;
+    let nameInput;
+    if (this.options.ingest && !this.options.ingest.reporter) {
+      const reporterGroup = this.createFormGroup("Reporter");
+      nameInput = document.createElement("input");
+      nameInput.type = "text";
+      nameInput.className = "uidex-form-input";
+      nameInput.placeholder = "Name (optional)";
+      reporterGroup.appendChild(nameInput);
+      emailInput = document.createElement("input");
+      emailInput.type = "email";
+      emailInput.className = "uidex-form-input";
+      emailInput.placeholder = "Email (optional)";
+      reporterGroup.appendChild(emailInput);
+      form.appendChild(reporterGroup);
+    }
     const screenshotGroup = document.createElement("div");
     screenshotGroup.className = "uidex-form-group";
     const screenshotLabel = document.createElement("label");
@@ -1588,9 +1777,14 @@ var Modal = class _Modal {
       }
       const env = this.collectEnv();
       const page = this.data.pages.find((p) => p.componentIds.includes(id));
+      const { ingest } = this.options;
+      const reporterEmail = ingest?.reporter?.email || emailInput?.value.trim() || void 0;
+      const reporterName = ingest?.reporter?.name || nameInput?.value.trim() || void 0;
+      const titleValue = titleInput.value.trim();
       const report = {
         type: typeSelect.select.value,
         severity: severitySelect.select.value,
+        ...titleValue ? { title: titleValue } : {},
         description: textarea.value.trim(),
         componentId: id,
         element: element ? this.describeElement(element) : null,
@@ -1599,17 +1793,66 @@ var Modal = class _Modal {
         path: window.location.pathname,
         route: page?.dir ?? null,
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        pageTitle: document.title,
+        locale: navigator.language,
+        sessionId: this.options.sessionId ?? "",
         viewport: env.viewport,
         screen: env.screen,
         userAgent: env.userAgent,
-        screenshot
+        screenshot,
+        ...reporterEmail ? { reporterEmail } : {},
+        ...reporterName ? { reporterName } : {},
+        ...ingest?.environment ? { environment: ingest.environment } : {},
+        ...ingest?.appVersion ? { appVersion: ingest.appVersion } : {},
+        ...ingest?.metadata ? { metadata: ingest.metadata } : {}
+      };
+      const consoleLogs = this.options.getConsoleLogs?.();
+      if (consoleLogs && consoleLogs.length > 0) {
+        report.consoleLogs = consoleLogs;
+      }
+      const networkErrors = this.options.getNetworkErrors?.();
+      if (networkErrors && networkErrors.length > 0) {
+        report.networkErrors = networkErrors;
+      }
+      const showSuccess = (autoClose) => {
+        submitBtn.textContent = "Submitted!";
+        if (autoClose) {
+          setTimeout(() => this.hide(), 1500);
+        } else {
+          setTimeout(() => {
+            submitBtn.textContent = "Submit";
+            submitBtn.disabled = false;
+          }, 1500);
+        }
       };
-      console.log("[uidex] Feedback submitted:", report);
-      submitBtn.textContent = "Submitted!";
-      setTimeout(() => {
-        submitBtn.textContent = "Submit";
-        submitBtn.disabled = false;
-      }, 1500);
+      if (ingest) {
+        submitBtn.textContent = "Submitting\u2026";
+        try {
+          const serverResult = await submitFeedback(
+            ingest.endpoint,
+            ingest.apiKey,
+            report
+          );
+          this.options.onSubmit?.(report, {
+            ok: true,
+            id: serverResult.id,
+            sequenceNumber: serverResult.sequenceNumber
+          });
+          showSuccess(true);
+        } catch (err) {
+          const errorMessage = err instanceof Error ? err.message : "Unknown error";
+          console.warn("[uidex] Feedback submission failed:", errorMessage);
+          this.options.onSubmit?.(report, { ok: false, error: errorMessage });
+          submitBtn.textContent = "Failed \u2014 retry?";
+          submitBtn.disabled = false;
+        }
+      } else {
+        if (!this.options.onSubmit) {
+          console.log("[uidex] Feedback submitted:", report);
+        }
+        this.options.onSubmit?.(report, { ok: true, id: "", sequenceNumber: 0 });
+        showSuccess(false);
+      }
     });
     form.appendChild(submitBtn);
     this.mainContent.appendChild(form);
@@ -2729,49 +2972,56 @@ body.uidex-inspecting * {
   color: var(--uidex-color-text-muted);
 }
 
-.uidex-form-select {
-  appearance: none;
-  padding: 6px 10px;
+.uidex-form-select,
+.uidex-form-input,
+.uidex-form-textarea {
   border: 1px solid var(--uidex-color-border);
   border-radius: 0;
   background: transparent;
   color: var(--uidex-color-text);
   font-size: var(--uidex-font-size-sm);
   font-family: var(--uidex-font-mono);
-  cursor: pointer;
   outline: none;
+}
+
+.uidex-form-select:focus,
+.uidex-form-input:focus,
+.uidex-form-textarea:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.uidex-form-input::placeholder,
+.uidex-form-textarea::placeholder {
+  color: var(--uidex-color-text-muted);
+}
+
+.uidex-form-select {
+  appearance: none;
+  padding: 6px 10px;
+  cursor: pointer;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ababab' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-right: 26px;
 }
 
-.uidex-form-select:focus {
-  border-color: rgba(255, 255, 255, 0.3);
+.uidex-form-input {
+  padding: 6px 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.uidex-form-input + .uidex-form-input {
+  margin-top: 6px;
 }
 
 .uidex-form-textarea {
   padding: 8px 10px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text);
-  font-size: var(--uidex-font-size-sm);
-  font-family: var(--uidex-font-mono);
   line-height: 1.5;
   resize: vertical;
-  outline: none;
   min-height: 80px;
 }
 
-.uidex-form-textarea::placeholder {
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-form-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
 .uidex-form-submit {
   padding: 6px 16px;
   border: 1px solid var(--uidex-color-border);
@@ -2790,7 +3040,7 @@ body.uidex-inspecting * {
   background: var(--uidex-color-primary-hover);
 }
 
-.uidex-form-submit:active {
+.uidex-form-submit:not(:disabled):active {
   transform: translateY(1px);
 }
 
@@ -2934,8 +3184,17 @@ var UidexUI = class {
   copyTimer = null;
   currentPresentIds = [];
   activeMode = null;
+  sessionId;
+  capture = null;
   constructor(options = {}) {
     this.options = options;
+    this.sessionId = generateSessionId();
+    if (options.ingest?.captureConsole || options.ingest?.captureNetwork) {
+      this.capture = new IngestCapture(
+        options.ingest.captureConsole ?? false,
+        options.ingest.captureNetwork ?? false
+      );
+    }
     this.overlay = new Overlay({
       color: options.config?.defaults?.color,
       borderStyle: options.config?.defaults?.borderStyle,
@@ -2952,7 +3211,12 @@ var UidexUI = class {
         }
         this.options.onSelect?.(id);
       },
-      elementGetter: (id) => this.findElement(id)
+      elementGetter: (id) => this.findElement(id),
+      ingest: options.ingest,
+      onSubmit: options.onSubmit,
+      sessionId: this.sessionId,
+      getConsoleLogs: () => this.capture?.getConsoleLogs() ?? [],
+      getNetworkErrors: () => this.capture?.getNetworkErrors() ?? []
     });
     this.menu = new Menu({
       onInspectToggle: () => this.toggleMode("inspect"),
@@ -2991,6 +3255,7 @@ var UidexUI = class {
     this.shadowHost.style.width = "0";
     this.shadowHost.style.height = "0";
     this.shadowHost.style.pointerEvents = "none";
+    this.shadowHost.style.zIndex = "2147483646";
     this.shadowRoot = this.shadowHost.attachShadow({ mode: "open" });
     injectStyles(this.shadowRoot);
     const presentIds = this.scanPresentIds(componentIds);
@@ -3003,12 +3268,14 @@ var UidexUI = class {
     this.modal.setShadowRoot(this.shadowRoot);
     this.updateModalData(presentIds);
     this.inspector?.mount();
+    this.capture?.start();
     this.startObserving();
     this.mounted = true;
   }
   destroy() {
     if (!this.mounted) return;
     this.stopObserving();
+    this.capture?.stop();
     if (this.copyTimer !== null) {
       clearTimeout(this.copyTimer);
       this.copyTimer = null;
@@ -3198,7 +3465,9 @@ function UidexDevtools({
   buttonPosition = "bottom-right",
   disabled = false,
   onSelect,
-  inspectShortcut
+  inspectShortcut,
+  ingest,
+  onSubmit
 }) {
   const uiRef = (0, import_react.useRef)(null);
   const stableShortcut = (0, import_react.useMemo)(
@@ -3208,6 +3477,15 @@ function UidexDevtools({
       inspectShortcut === false ? false : `${inspectShortcut?.key}:${inspectShortcut?.ctrlKey}:${inspectShortcut?.shiftKey}:${inspectShortcut?.altKey}:${inspectShortcut?.metaKey}`
     ]
   );
+  const stableIngest = (0, import_react.useMemo)(
+    () => ingest,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      ingest ? `${ingest.endpoint}:${ingest.apiKey}:${ingest.environment}:${ingest.appVersion}:${ingest.captureConsole}:${ingest.captureNetwork}:${ingest.reporter?.email}:${ingest.reporter?.name}` : void 0
+    ]
+  );
+  const onSubmitRef = (0, import_react.useRef)(onSubmit);
+  onSubmitRef.current = onSubmit;
   (0, import_react.useEffect)(() => {
     if (disabled) {
       return;
@@ -3217,7 +3495,9 @@ function UidexDevtools({
       config,
       buttonPosition,
       onSelect,
-      inspectShortcut: stableShortcut
+      inspectShortcut: stableShortcut,
+      ingest: stableIngest,
+      onSubmit: (...args) => onSubmitRef.current?.(...args)
     });
     ui.mount();
     uiRef.current = ui;
@@ -3225,7 +3505,7 @@ function UidexDevtools({
       ui.destroy();
       uiRef.current = null;
     };
-  }, [components, config, buttonPosition, disabled, onSelect, stableShortcut]);
+  }, [components, config, buttonPosition, disabled, onSelect, stableShortcut, stableIngest]);
   return null;
 }