uidex 0.1.1 → 0.2.0

package/dist/react/index.d.cts

@@ -35,6 +35,77 @@ interface KeyboardShortcut {
     altKey?: boolean;
     metaKey?: boolean;
 }
+interface IngestConfig {
+    endpoint: string;
+    apiKey: string;
+    environment?: string;
+    appVersion?: string;
+    reporter?: {
+        email?: string;
+        name?: string;
+    };
+    metadata?: Record<string, string>;
+    captureConsole?: boolean;
+    captureNetwork?: boolean;
+}
+type FeedbackResult = {
+    ok: true;
+    id: string;
+    sequenceNumber: number;
+} | {
+    ok: false;
+    error: string;
+};
+type FeedbackType = 'bug' | 'feature' | 'improvement' | 'question';
+type FeedbackSeverity = 'low' | 'medium' | 'high' | 'critical';
+interface ConsoleLogEntry {
+    level: 'warn' | 'error';
+    message: string;
+    timestamp: string;
+}
+interface NetworkErrorEntry {
+    url: string;
+    method: string;
+    status: number | null;
+    statusText: string;
+    timestamp: string;
+}
+interface FeedbackReport {
+    type: FeedbackType;
+    severity: FeedbackSeverity;
+    title?: string;
+    description: string;
+    componentId: string;
+    element: string | null;
+    sources: {
+        filePath: string;
+        line: number;
+    }[];
+    url: string;
+    path: string;
+    route: string | null;
+    timestamp: string;
+    pageTitle: string;
+    locale: string;
+    sessionId: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    screen: {
+        width: number;
+        height: number;
+    };
+    userAgent: string;
+    screenshot?: string;
+    reporterEmail?: string;
+    reporterName?: string;
+    environment?: string;
+    appVersion?: string;
+    metadata?: Record<string, string>;
+    consoleLogs?: ConsoleLogEntry[];
+    networkErrors?: NetworkErrorEntry[];
+}
 
 interface UidexDevtoolsProps {
     components?: UidexMap;
@@ -44,8 +115,12 @@ interface UidexDevtoolsProps {
     onSelect?: (id: string) => void;
     /** Keyboard shortcut to toggle inspect mode. Default: Shift+Cmd+U. Set to false to disable. */
     inspectShortcut?: KeyboardShortcut | false;
+    /** Ingest configuration for submitting feedback to a server. */
+    ingest?: IngestConfig;
+    /** Called after feedback submission with the report and result. */
+    onSubmit?: (report: FeedbackReport, result: FeedbackResult) => void;
 }
-declare function UidexDevtools({ components, config, buttonPosition, disabled, onSelect, inspectShortcut, }: UidexDevtoolsProps): null;
+declare function UidexDevtools({ components, config, buttonPosition, disabled, onSelect, inspectShortcut, ingest, onSubmit, }: UidexDevtoolsProps): null;
 
 interface UidexOverlayProps {
     target: HTMLElement | null;
@@ -71,4 +146,4 @@ declare function getContrastColor(hexColor: string): string;
 declare function hexToRgba(hex: string, alpha: number): string;
 declare function resolveColor(color: string | undefined, colorMap?: Record<string, string>): string | undefined;
 
-export { type BorderStyle, type ButtonPosition, type KeyboardShortcut, type LabelPosition, type UidexConfig, type UidexDefaults, UidexDevtools, type UidexDevtoolsProps, type UidexFeature, type UidexLocation, type UidexMap, UidexOverlay, type UidexOverlayProps, type UidexPage, classNames, getComponents, getContrastColor, getFeatures, getPages, hexToRgba, registerComponents, registerFeatures, registerPages, resolveColor };
+export { type BorderStyle, type ButtonPosition, type FeedbackReport, type FeedbackResult, type FeedbackSeverity, type FeedbackType, type IngestConfig, type KeyboardShortcut, type LabelPosition, type UidexConfig, type UidexDefaults, UidexDevtools, type UidexDevtoolsProps, type UidexFeature, type UidexLocation, type UidexMap, UidexOverlay, type UidexOverlayProps, type UidexPage, classNames, getComponents, getContrastColor, getFeatures, getPages, hexToRgba, registerComponents, registerFeatures, registerPages, resolveColor };

package/dist/react/index.d.ts

@@ -35,6 +35,77 @@ interface KeyboardShortcut {
     altKey?: boolean;
     metaKey?: boolean;
 }
+interface IngestConfig {
+    endpoint: string;
+    apiKey: string;
+    environment?: string;
+    appVersion?: string;
+    reporter?: {
+        email?: string;
+        name?: string;
+    };
+    metadata?: Record<string, string>;
+    captureConsole?: boolean;
+    captureNetwork?: boolean;
+}
+type FeedbackResult = {
+    ok: true;
+    id: string;
+    sequenceNumber: number;
+} | {
+    ok: false;
+    error: string;
+};
+type FeedbackType = 'bug' | 'feature' | 'improvement' | 'question';
+type FeedbackSeverity = 'low' | 'medium' | 'high' | 'critical';
+interface ConsoleLogEntry {
+    level: 'warn' | 'error';
+    message: string;
+    timestamp: string;
+}
+interface NetworkErrorEntry {
+    url: string;
+    method: string;
+    status: number | null;
+    statusText: string;
+    timestamp: string;
+}
+interface FeedbackReport {
+    type: FeedbackType;
+    severity: FeedbackSeverity;
+    title?: string;
+    description: string;
+    componentId: string;
+    element: string | null;
+    sources: {
+        filePath: string;
+        line: number;
+    }[];
+    url: string;
+    path: string;
+    route: string | null;
+    timestamp: string;
+    pageTitle: string;
+    locale: string;
+    sessionId: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    screen: {
+        width: number;
+        height: number;
+    };
+    userAgent: string;
+    screenshot?: string;
+    reporterEmail?: string;
+    reporterName?: string;
+    environment?: string;
+    appVersion?: string;
+    metadata?: Record<string, string>;
+    consoleLogs?: ConsoleLogEntry[];
+    networkErrors?: NetworkErrorEntry[];
+}
 
 interface UidexDevtoolsProps {
     components?: UidexMap;
@@ -44,8 +115,12 @@ interface UidexDevtoolsProps {
     onSelect?: (id: string) => void;
     /** Keyboard shortcut to toggle inspect mode. Default: Shift+Cmd+U. Set to false to disable. */
     inspectShortcut?: KeyboardShortcut | false;
+    /** Ingest configuration for submitting feedback to a server. */
+    ingest?: IngestConfig;
+    /** Called after feedback submission with the report and result. */
+    onSubmit?: (report: FeedbackReport, result: FeedbackResult) => void;
 }
-declare function UidexDevtools({ components, config, buttonPosition, disabled, onSelect, inspectShortcut, }: UidexDevtoolsProps): null;
+declare function UidexDevtools({ components, config, buttonPosition, disabled, onSelect, inspectShortcut, ingest, onSubmit, }: UidexDevtoolsProps): null;
 
 interface UidexOverlayProps {
     target: HTMLElement | null;
@@ -71,4 +146,4 @@ declare function getContrastColor(hexColor: string): string;
 declare function hexToRgba(hex: string, alpha: number): string;
 declare function resolveColor(color: string | undefined, colorMap?: Record<string, string>): string | undefined;
 
-export { type BorderStyle, type ButtonPosition, type KeyboardShortcut, type LabelPosition, type UidexConfig, type UidexDefaults, UidexDevtools, type UidexDevtoolsProps, type UidexFeature, type UidexLocation, type UidexMap, UidexOverlay, type UidexOverlayProps, type UidexPage, classNames, getComponents, getContrastColor, getFeatures, getPages, hexToRgba, registerComponents, registerFeatures, registerPages, resolveColor };
+export { type BorderStyle, type ButtonPosition, type FeedbackReport, type FeedbackResult, type FeedbackSeverity, type FeedbackType, type IngestConfig, type KeyboardShortcut, type LabelPosition, type UidexConfig, type UidexDefaults, UidexDevtools, type UidexDevtoolsProps, type UidexFeature, type UidexLocation, type UidexMap, UidexOverlay, type UidexOverlayProps, type UidexPage, classNames, getComponents, getContrastColor, getFeatures, getPages, hexToRgba, registerComponents, registerFeatures, registerPages, resolveColor };

package/dist/react/index.js

@@ -528,6 +528,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;
@@ -1510,6 +1658,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";
@@ -1517,6 +1673,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");
@@ -1552,9 +1724,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,
@@ -1563,17 +1740,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 } : {}
       };
-      console.log("[uidex] Feedback submitted:", report);
-      submitBtn.textContent = "Submitted!";
-      setTimeout(() => {
-        submitBtn.textContent = "Submit";
-        submitBtn.disabled = false;
-      }, 1500);
+      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);
+        }
+      };
+      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);
@@ -2693,49 +2919,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);
@@ -2754,7 +2987,7 @@ body.uidex-inspecting * {
   background: var(--uidex-color-primary-hover);
 }
 
-.uidex-form-submit:active {
+.uidex-form-submit:not(:disabled):active {
   transform: translateY(1px);
 }
 
@@ -2898,8 +3131,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,
@@ -2916,7 +3158,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"),
@@ -2967,12 +3214,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;
@@ -3162,7 +3411,9 @@ function UidexDevtools({
   buttonPosition = "bottom-right",
   disabled = false,
   onSelect,
-  inspectShortcut
+  inspectShortcut,
+  ingest,
+  onSubmit
 }) {
   const uiRef = useRef(null);
   const stableShortcut = useMemo(
@@ -3172,6 +3423,15 @@ function UidexDevtools({
       inspectShortcut === false ? false : `${inspectShortcut?.key}:${inspectShortcut?.ctrlKey}:${inspectShortcut?.shiftKey}:${inspectShortcut?.altKey}:${inspectShortcut?.metaKey}`
     ]
   );
+  const stableIngest = 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 = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
   useEffect(() => {
     if (disabled) {
       return;
@@ -3181,7 +3441,9 @@ function UidexDevtools({
       config,
       buttonPosition,
       onSelect,
-      inspectShortcut: stableShortcut
+      inspectShortcut: stableShortcut,
+      ingest: stableIngest,
+      onSubmit: (...args) => onSubmitRef.current?.(...args)
     });
     ui.mount();
     uiRef.current = ui;
@@ -3189,7 +3451,7 @@ function UidexDevtools({
       ui.destroy();
       uiRef.current = null;
     };
-  }, [components, config, buttonPosition, disabled, onSelect, stableShortcut]);
+  }, [components, config, buttonPosition, disabled, onSelect, stableShortcut, stableIngest]);
   return null;
 }