react-pref-guard 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1609 @@
+// src/PerfProvider.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/collector.ts
+var buffer = /* @__PURE__ */ new Map();
+function collectMetric(metric2) {
+  const {
+    component,
+    phase,
+    actualDuration,
+    boundaryType
+  } = metric2;
+  let entry = buffer.get(component);
+  if (!entry) {
+    entry = {
+      renders: 0,
+      totalTime: 0,
+      maxTime: 0,
+      boundaryType,
+      phaseCounts: { mount: 0, update: 0 }
+    };
+    buffer.set(component, entry);
+  }
+  entry.renders += 1;
+  entry.totalTime += actualDuration;
+  entry.maxTime = Math.max(entry.maxTime, actualDuration);
+  if (phase === "mount" || phase === "update") {
+    entry.phaseCounts[phase] += 1;
+  }
+}
+function flushMetrics() {
+  const now = performance.now();
+  const snapshot = [];
+  for (const [component, metric2] of buffer.entries()) {
+    snapshot.push({
+      component,
+      renders: metric2.renders,
+      avgTime: metric2.renders > 0 ? metric2.totalTime / metric2.renders : 0,
+      maxTime: metric2.maxTime,
+      boundaryType: metric2.boundaryType,
+      phaseCounts: {
+        mount: metric2.phaseCounts.mount,
+        update: metric2.phaseCounts.update
+      },
+      timestamp: now
+    });
+  }
+  buffer.clear();
+  return snapshot;
+}
+
+// src/issue-store/issueStore.ts
+var store = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+function upsertIssue(issue) {
+  store.set(issue.id, issue);
+  notify();
+}
+function resolveIssue(id) {
+  const row = store.get(id);
+  if (!row) return;
+  row.status = "RESOLVED";
+  notify();
+  setTimeout(() => {
+    store.delete(id);
+    notify();
+  }, 1e4);
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  listener(Array.from(store.values()));
+  return () => listeners.delete(listener);
+}
+function notify() {
+  const snapshot = Array.from(store.values());
+  listeners.forEach((l) => l(snapshot));
+}
+
+// src/warnings.ts
+var activeIssues = /* @__PURE__ */ new Map();
+var lastLogTime = /* @__PURE__ */ new Map();
+var LOG_COOLDOWN = 3e4;
+var RESOLVE_AFTER_MISSES = 3;
+function fingerprint(component, issue) {
+  return `${component}:${issue.ruleId}:${issue.severity}`;
+}
+function shouldLog(fp) {
+  const last = lastLogTime.get(fp) || 0;
+  if (Date.now() - last < LOG_COOLDOWN) return false;
+  lastLogTime.set(fp, Date.now());
+  return true;
+}
+function severityEmoji(sev) {
+  switch (sev) {
+    case "CRITICAL":
+      return "\u{1F4A5}";
+    case "HIGH":
+      return "\u{1F534}";
+    case "MEDIUM":
+      return "\u{1F7E1}";
+    case "LOW":
+      return "\u{1F535}";
+    default:
+      return "\u2139\uFE0F";
+  }
+}
+function severityColor(sev) {
+  switch (sev) {
+    case "CRITICAL":
+      return "#dc2626";
+    case "HIGH":
+      return "#ef4444";
+    case "MEDIUM":
+      return "#f59e0b";
+    case "LOW":
+      return "#3b82f6";
+    default:
+      return "#6b7280";
+  }
+}
+function showWarning(result) {
+  const seenThisBatch = /* @__PURE__ */ new Set();
+  for (const issue of result.issues) {
+    const fp = fingerprint(result.component, issue);
+    seenThisBatch.add(fp);
+    const state = activeIssues.get(fp);
+    if (!state) {
+      activeIssues.set(fp, { issue, missingCount: 0 });
+      upsertIssue({
+        id: fp,
+        component: result.component,
+        ruleId: issue.ruleId,
+        severity: issue.severity,
+        confidence: issue.confidence,
+        boundaryType: result.boundaryType,
+        status: "NEW",
+        reason: issue.reason,
+        lastSeen: Date.now()
+      });
+      if (shouldLog(fp)) {
+        logNewIssue(result, issue);
+      }
+    } else {
+      state.missingCount = 0;
+      upsertIssue({
+        id: fp,
+        component: result.component,
+        ruleId: issue.ruleId,
+        severity: issue.severity,
+        // CRITICAL preserved
+        confidence: issue.confidence,
+        boundaryType: result.boundaryType,
+        status: "ACTIVE",
+        reason: issue.reason,
+        lastSeen: Date.now()
+      });
+    }
+  }
+  for (const [fp, state] of activeIssues.entries()) {
+    if (!seenThisBatch.has(fp)) {
+      state.missingCount++;
+      if (state.missingCount >= RESOLVE_AFTER_MISSES) {
+        activeIssues.delete(fp);
+        resolveIssue(fp);
+        logResolvedIssue(result.component, state.issue);
+      }
+    }
+  }
+}
+function showCriticalAlert(result) {
+  for (const issue of result.issues) {
+    if (issue.severity !== "CRITICAL") continue;
+    const fp = fingerprint(result.component, issue);
+    if (!shouldLog(fp)) continue;
+    showCriticalOverlay(result.component, issue);
+  }
+}
+function logNewIssue(result, issue) {
+  console.groupCollapsed(
+    `%c\u26A1 PerfGuard \xB7 ${result.component}`,
+    `color:${severityColor(issue.severity)};font-weight:bold`
+  );
+  console.info(
+    `%c${severityEmoji(issue.severity)} ${issue.ruleId} (${issue.severity})`,
+    `color:${severityColor(issue.severity)}`
+  );
+  console.info("Confidence:", `${Math.round(issue.confidence * 100)}%`);
+  console.info("Reason:", issue.reason);
+  console.info("Boundary:", result.boundaryType);
+  console.groupCollapsed("\u{1F4CA} Metrics");
+  console.table(result.metrics);
+  console.groupEnd();
+  console.groupEnd();
+}
+function logResolvedIssue(component, issue) {
+  console.info(
+    `%c\u2705 PerfGuard \xB7 RESOLVED \xB7 ${component} \xB7 ${issue.ruleId}`,
+    "color:#16a34a;font-weight:bold"
+  );
+}
+function showCriticalOverlay(component, issue) {
+  if (typeof document === "undefined") return;
+  const alert = document.createElement("div");
+  alert.style.cssText = `
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: #dc2626;
+    color: white;
+    padding: 14px 18px;
+    border-radius: 8px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.35);
+    z-index: 10000;
+    font-family: monospace;
+    font-size: 13px;
+    max-width: 360px;
+  `;
+  alert.innerHTML = `
+    <strong>\u{1F4A5} PerfGuard \u2013 CRITICAL</strong><br/>
+    Component: ${component}<br/>
+    Rule: ${issue.ruleId}<br/>
+    Confidence: ${Math.round(issue.confidence * 100)}%
+  `;
+  document.body.appendChild(alert);
+  setTimeout(() => alert.remove(), 8e3);
+}
+
+// src/worker/createWorker.ts
+function createAnalyzerWorker() {
+  const code = `
+    /* ===============================
+       PerfGuard \u2013 Enhanced Rule DSL Worker
+       =============================== */
+
+    const history = new Map();
+    const MAX_HISTORY = 10; // Increased for trend detection
+
+    const DOMINANT_RULES = new Set([
+    "BLOCKING_RENDER",
+    "SEVERE_PERF_REGRESSION",
+    "SUSPICIOUS_RENDER_LOOP",
+    "RENDER_TIME_CREEP",
+    ]);
+
+    let RULES = [];
+
+    /* -------------------------------
+       Utilities
+    -------------------------------- */
+
+    function hasDominantIssue(issues) {
+    return issues.some(issue => DOMINANT_RULES.has(issue.ruleId));
+    }
+
+    function record(snapshot) {
+      const list = history.get(snapshot.component) || [];
+      list.push(snapshot);
+      if (list.length > MAX_HISTORY) list.shift();
+      history.set(snapshot.component, list);
+    }
+
+  function calculateConfidenceWithCurrent(predicateFn, historyList, snapshot) {
+   if (historyList.length === 0) return 1;
+
+    const matches = historyList.filter(predicateFn).length;
+    const currentMatch = predicateFn(snapshot) ? 1 : 0;
+
+   return (matches + currentMatch) / (historyList.length + 1);
+}
+
+  function downgradeSeverity(severity, confidence, boundaryType) {
+  //  CRITICAL is NEVER downgraded
+  if (severity === "CRITICAL") return "CRITICAL";
+
+  //  INLINE components downgrade by ONE level only
+  if (boundaryType === "INLINE") {
+    if (severity === "HIGH") return "MEDIUM";
+    if (severity === "MEDIUM") return "LOW";
+    return "INFO";
+  }
+
+  // \u{1F4C9} Confidence-based softening
+  if (confidence < 0.7) return "LOW";
+  if (confidence < 0.85) return "MEDIUM";
+
+  return severity;
+}
+
+    function buildPredicate({ field, operator, value }) {
+      switch (operator) {
+        case ">": return (s) => s[field] > value;
+        case "<": return (s) => s[field] < value;
+        case ">=": return (s) => s[field] >= value;
+        case "<=": return (s) => s[field] <= value;
+        case "===": return (s) => s[field] === value;
+        default: return () => false;
+      }
+    }
+
+    function interpolateMessage(template, values) {
+      let result = template;
+      for (const [key, value] of Object.entries(values)) {
+        result = result.replace(
+          new RegExp(\`{\${key}}\`, 'g'),
+          typeof value === 'number' ? Math.round(value).toString() : value
+        );
+      }
+      return result;
+    }
+
+    /* -------------------------------
+       Trend Detection
+    -------------------------------- */
+
+    function detectTrend(historyList, field) {
+      if (historyList.length < 5) return { direction: 'stable', change: 0 };
+      
+      // Use linear regression to detect trend
+      const values = historyList.map(s => s[field]);
+      const n = values.length;
+      const indices = Array.from({ length: n }, (_, i) => i);
+      
+      const sumX = indices.reduce((a, b) => a + b, 0);
+      const sumY = values.reduce((a, b) => a + b, 0);
+      const sumXY = indices.reduce((sum, x, i) => sum + x * values[i], 0);
+      const sumX2 = indices.reduce((sum, x) => sum + x * x, 0);
+      
+      const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
+      const avgValue = sumY / n;
+      
+      // Calculate percentage change
+      const percentChange = (slope * n / avgValue) * 100;
+      
+      return {
+        direction: slope > 0 ? 'increasing' : slope < 0 ? 'decreasing' : 'stable',
+        change: Math.abs(percentChange)
+      };
+    }
+
+    /* -------------------------------
+       Rule Evaluation Engine
+    -------------------------------- */
+
+function evaluate(snapshot) {
+  const issues = [];
+  const historyList = history.get(snapshot.component) || [];
+  const previous = historyList[historyList.length - 1];
+
+  /* ===============================
+     PASS 1: DOMINANT RULES ONLY
+     =============================== */
+  for (const rule of RULES) {
+    if (!DOMINANT_RULES.has(rule.id)) continue;
+
+    /* ----- Regression Rule ----- */
+    if (rule.regression && previous) {
+      const field = rule.regression.field;
+      const multiplier = rule.regression.multiplier;
+
+      if (snapshot[field] > previous[field] * multiplier) {
+        issues.push({
+          ruleId: rule.id,
+          confidence: 1,
+          severity: downgradeSeverity(
+            rule.baseSeverity,
+            1,
+            snapshot.boundaryType || "HOC"
+          ),
+          reason: interpolateMessage(rule.messageTemplate, {
+            prevValue: previous[field].toFixed(1),
+            currValue: snapshot[field].toFixed(1),
+          }),
+        });
+      }
+      continue;
+    }
+
+    /* ----- Trend Detection Rule ----- */
+    if (rule.trend && historyList.length >= 5) {
+      const trend = detectTrend(historyList, rule.trend.field);
+
+      if (
+        trend.direction === rule.trend.direction &&
+        trend.change >= rule.trend.threshold
+      ) {
+        const confidence = Math.min(trend.change / 100, 1.0);
+
+        issues.push({
+          ruleId: rule.id,
+          confidence,
+          severity: downgradeSeverity(
+            rule.baseSeverity,
+            confidence,
+            snapshot.boundaryType || "HOC"
+          ),
+          reason: interpolateMessage(rule.messageTemplate, {
+            change: trend.change.toFixed(1),
+          }),
+        });
+      }
+      continue;
+    }
+
+    /* ----- Predicate Rule ----- */
+    if (rule.predicate) {
+      const predicateFn = buildPredicate(rule.predicate);
+      const confidence = calculateConfidenceWithCurrent(
+  predicateFn,
+  historyList,
+  snapshot
+);
+      const threshold = rule.confidenceThreshold || 0.6;
+
+      if (predicateFn(snapshot) && confidence >= threshold) {
+        issues.push({
+          ruleId: rule.id,
+          confidence,
+          severity: downgradeSeverity(
+            rule.baseSeverity,
+            confidence,
+            snapshot.boundaryType || "HOC"
+          ),
+          reason: interpolateMessage(rule.messageTemplate, {
+            confidence: (confidence * 100).toFixed(0),
+          }),
+        });
+      }
+    }
+  }
+
+  /* ===============================
+     If dominant issue exists \u2192 stop
+     =============================== */
+  if (issues.length) {
+    // Allow DEV_HINT rules only
+    for (const rule of RULES) {
+      if (!rule.id.startsWith("DEV_HINT")) continue;
+      if (!rule.predicate) continue;
+
+      const predicateFn = buildPredicate(rule.predicate);
+      const confidence = calculateConfidenceWithCurrent(
+  predicateFn,
+  historyList,
+  snapshot
+);
+      const threshold = rule.confidenceThreshold || 0.6;
+
+      if (predicateFn(snapshot) && confidence >= threshold) {
+        issues.push({
+          ruleId: rule.id,
+          confidence,
+          severity: "INFO",
+          reason: interpolateMessage(rule.messageTemplate, {
+            confidence: (confidence * 100).toFixed(0),
+          }),
+        });
+      }
+    }
+
+    record(snapshot);
+    return issues;
+  }
+
+  /* ===============================
+     PASS 2: NORMAL RULES
+     =============================== */
+  for (const rule of RULES) {
+
+    /* ----- Regression Rule ----- */
+    if (rule.regression && previous) {
+      const field = rule.regression.field;
+      const multiplier = rule.regression.multiplier;
+
+      if (snapshot[field] > previous[field] * multiplier) {
+        issues.push({
+          ruleId: rule.id,
+          confidence: 1,
+          severity: downgradeSeverity(
+            rule.baseSeverity,
+            1,
+            snapshot.boundaryType || "HOC"
+          ),
+          reason: interpolateMessage(rule.messageTemplate, {
+            prevValue: previous[field].toFixed(1),
+            currValue: snapshot[field].toFixed(1),
+          }),
+        });
+      }
+      continue;
+    }
+
+    /* ----- Trend Detection Rule ----- */
+    if (rule.trend && historyList.length >= 5) {
+      const trend = detectTrend(historyList, rule.trend.field);
+
+      if (
+        trend.direction === rule.trend.direction &&
+        trend.change >= rule.trend.threshold
+      ) {
+        const confidence = Math.min(trend.change / 100, 1.0);
+
+        issues.push({
+          ruleId: rule.id,
+          confidence,
+          severity: downgradeSeverity(
+            rule.baseSeverity,
+            confidence,
+            snapshot.boundaryType || "HOC"
+          ),
+          reason: interpolateMessage(rule.messageTemplate, {
+            change: trend.change.toFixed(1),
+          }),
+        });
+      }
+      continue;
+    }
+
+    /* ----- Predicate Rule ----- */
+    if (rule.predicate) {
+      const predicateFn = buildPredicate(rule.predicate);
+      const confidence = calculateConfidenceWithCurrent(
+  predicateFn,
+  historyList,
+  snapshot
+);
+      const threshold = rule.confidenceThreshold || 0.6;
+
+      if (predicateFn(snapshot) && confidence >= threshold) {
+        issues.push({
+          ruleId: rule.id,
+          confidence,
+          severity: downgradeSeverity(
+            rule.baseSeverity,
+            confidence,
+            snapshot.boundaryType || "HOC"
+          ),
+          reason: interpolateMessage(rule.messageTemplate, {
+            confidence: (confidence * 100).toFixed(0),
+          }),
+        });
+      }
+    }
+  }
+
+  record(snapshot);
+  return issues;
+}
+
+
+    /* -------------------------------
+       Worker Message Handler
+    -------------------------------- */
+
+    self.onmessage = (e) => {
+      const { type, payload } = e.data;
+
+      /* Init rules once */
+      if (type === "INIT_RULES") {
+        RULES = payload;
+        // console.log('[PerfGuard Worker] Rules loaded:', RULES.length);
+        self.postMessage({ type: "INIT_SUCCESS", count: RULES.length });
+        return;
+      }
+
+      /* Evaluate snapshots */
+      if (type === "EVALUATE") {
+        const results = [];
+        let hasCritical = false;
+
+        for (const snapshot of payload) {
+          const issues = evaluate(snapshot);
+
+          if (issues.length) {
+            const componentResult = {
+              component: snapshot.component,
+              boundaryType: snapshot.boundaryType || "HOC",
+              metrics: {
+                renders: snapshot.renders,
+                avgTime: snapshot.avgTime,
+                maxTime: snapshot.maxTime,
+              },
+              issues,
+            };
+
+            // Check for critical issues
+            if (issues.some(i => i.severity === 'CRITICAL')) {
+              hasCritical = true;
+              componentResult.hasCritical = true;
+            }
+
+            results.push(componentResult);
+          }
+        }
+
+        // console.log('[PerfGuard Worker] Evaluation complete:', results.length, 'issues');
+        self.postMessage({ 
+          type: "RESULTS", 
+          data: results,
+          hasCritical,
+          timestamp: Date.now()
+        });
+      }
+
+      /* Reset history */
+      if (type === "RESET") {
+        history.clear();
+        self.postMessage({ type: "RESET_SUCCESS" });
+      }
+
+      /* Get stats */
+      if (type === "GET_STATS") {
+        const stats = {
+          componentsTracked: history.size,
+          totalSnapshots: Array.from(history.values()).reduce((sum, list) => sum + list.length, 0),
+          rulesLoaded: RULES.length,
+        };
+        self.postMessage({ type: "STATS", data: stats });
+      }
+    };
+  `;
+  return new Worker(
+    URL.createObjectURL(new Blob([code], { type: "application/javascript" }))
+  );
+}
+
+// src/env.ts
+var isDev = typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
+
+// src/pref-engine/rules.ts
+var PERF_RULES = [
+  // ========================================
+  // CRITICAL PERFORMANCE RULES
+  // ========================================
+  {
+    id: "BLOCKING_RENDER",
+    category: "PERFORMANCE",
+    baseSeverity: "CRITICAL",
+    predicate: {
+      field: "avgTime",
+      operator: ">",
+      value: 100
+    },
+    confidenceThreshold: 0.4,
+    messageTemplate: "CRITICAL: Component blocks UI thread for >100ms in {confidence}% of renders",
+    messageFields: ["confidence"],
+    docUrl: "https://web.dev/rail/"
+  },
+  {
+    id: "SLOW_RENDER",
+    category: "PERFORMANCE",
+    baseSeverity: "HIGH",
+    predicate: {
+      field: "avgTime",
+      operator: ">",
+      value: 16
+    },
+    confidenceThreshold: 0.6,
+    messageTemplate: "Average render time exceeded 16ms in {confidence}% of recent batches",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "VERY_SLOW_RENDER",
+    category: "PERFORMANCE",
+    baseSeverity: "HIGH",
+    predicate: {
+      field: "avgTime",
+      operator: ">",
+      value: 50
+    },
+    confidenceThreshold: 0.5,
+    messageTemplate: "Critical: render time exceeded 50ms in {confidence}% of batches",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "INCONSISTENT_PERFORMANCE",
+    category: "STABILITY",
+    baseSeverity: "MEDIUM",
+    predicate: {
+      field: "maxTime",
+      operator: ">",
+      value: 50
+    },
+    confidenceThreshold: 0.3,
+    messageTemplate: "Unstable performance: max render time spikes to >50ms",
+    messageFields: ["confidence"]
+  },
+  // ========================================
+  // RENDER OPTIMIZATION RULES
+  // ========================================
+  {
+    id: "EXCESSIVE_RENDERS",
+    category: "PERFORMANCE",
+    baseSeverity: "MEDIUM",
+    predicate: {
+      field: "renders",
+      operator: ">",
+      value: 20
+    },
+    confidenceThreshold: 0.6,
+    messageTemplate: "Component rendered excessively in {confidence}% of recent batches",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "RENDER_THRASHING",
+    category: "PERFORMANCE",
+    baseSeverity: "HIGH",
+    predicate: {
+      field: "renders",
+      operator: ">",
+      value: 50
+    },
+    confidenceThreshold: 0.4,
+    messageTemplate: "Severe render thrashing detected: >50 renders in {confidence}% of batches",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "SUSPICIOUS_RENDER_LOOP",
+    category: "RELIABILITY",
+    baseSeverity: "CRITICAL",
+    predicate: {
+      field: "renders",
+      operator: ">",
+      value: 100
+    },
+    confidenceThreshold: 0.2,
+    messageTemplate: "Potential infinite render loop: >100 renders detected",
+    messageFields: ["confidence"]
+  },
+  // ========================================
+  // REGRESSION DETECTION
+  // ========================================
+  {
+    id: "PERF_REGRESSION",
+    category: "PERFORMANCE",
+    baseSeverity: "HIGH",
+    regression: {
+      field: "avgTime",
+      multiplier: 1.3
+    },
+    messageTemplate: "Avg render time increased from {prevValue}ms to {currValue}ms",
+    messageFields: ["prevValue", "currValue"]
+  },
+  {
+    id: "SEVERE_PERF_REGRESSION",
+    category: "PERFORMANCE",
+    baseSeverity: "CRITICAL",
+    regression: {
+      field: "avgTime",
+      multiplier: 2
+    },
+    messageTemplate: "SEVERE: Performance degraded by 2x from {prevValue}ms to {currValue}ms",
+    messageFields: ["prevValue", "currValue"]
+  },
+  {
+    id: "RENDER_COUNT_SPIKE",
+    category: "STABILITY",
+    baseSeverity: "MEDIUM",
+    regression: {
+      field: "renders",
+      multiplier: 1.5
+    },
+    messageTemplate: "Render count increased from {prevValue} to {currValue}",
+    messageFields: ["prevValue", "currValue"]
+  },
+  {
+    id: "MAX_TIME_REGRESSION",
+    category: "STABILITY",
+    baseSeverity: "HIGH",
+    regression: {
+      field: "maxTime",
+      multiplier: 1.5
+    },
+    messageTemplate: "Peak render time degraded from {prevValue}ms to {currValue}ms",
+    messageFields: ["prevValue", "currValue"]
+  },
+  // ========================================
+  // USER EXPERIENCE RULES
+  // ========================================
+  {
+    id: "JANKY_ANIMATION",
+    category: "UX",
+    baseSeverity: "MEDIUM",
+    predicate: {
+      field: "avgTime",
+      operator: ">",
+      value: 16.67
+      // 60fps threshold
+    },
+    confidenceThreshold: 0.7,
+    messageTemplate: "Janky animations: unable to maintain 60fps in {confidence}% of renders",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "POOR_INTERACTION_RESPONSE",
+    category: "UX",
+    baseSeverity: "HIGH",
+    predicate: {
+      field: "avgTime",
+      operator: ">",
+      value: 50
+    },
+    confidenceThreshold: 0.5,
+    messageTemplate: "Poor interaction response: >50ms delay in {confidence}% of renders",
+    messageFields: ["confidence"]
+  },
+  // ========================================
+  // MEMORY & LEAK DETECTION
+  // ========================================
+  {
+    id: "RENDER_TIME_CREEP",
+    category: "MEMORY",
+    baseSeverity: "MEDIUM",
+    trend: {
+      field: "avgTime",
+      direction: "increasing",
+      threshold: 20
+      // 20% increase over time
+    },
+    messageTemplate: "Gradual performance degradation: render time increasing over time",
+    confidenceThreshold: 0.6
+  },
+  {
+    id: "RENDER_COUNT_CREEP",
+    category: "MEMORY",
+    baseSeverity: "MEDIUM",
+    trend: {
+      field: "renders",
+      direction: "increasing",
+      threshold: 30
+    },
+    messageTemplate: "Render count steadily increasing - possible state management issue",
+    confidenceThreshold: 0.6
+  },
+  // ========================================
+  // STABILITY & RELIABILITY
+  // ========================================
+  {
+    id: "ERRATIC_PERFORMANCE",
+    category: "STABILITY",
+    baseSeverity: "MEDIUM",
+    predicate: {
+      field: "maxTime",
+      operator: ">",
+      value: 100
+    },
+    confidenceThreshold: 0.3,
+    messageTemplate: "Erratic performance spikes detected (>100ms)",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "FIRST_RENDER_SLOW",
+    category: "UX",
+    baseSeverity: "MEDIUM",
+    predicate: {
+      field: "maxTime",
+      operator: ">",
+      value: 200
+    },
+    confidenceThreshold: 0.8,
+    messageTemplate: "Slow initial mount: first render >200ms",
+    messageFields: ["confidence"]
+  },
+  // ========================================
+  // PRODUCTION READINESS CHECKS
+  // ========================================
+  {
+    id: "PROD_READY_PERF",
+    category: "PERFORMANCE",
+    baseSeverity: "INFO",
+    predicate: {
+      field: "avgTime",
+      operator: "<",
+      value: 10
+    },
+    confidenceThreshold: 0.9,
+    messageTemplate: "\u2705 Component meets production performance standards (<10ms avg)",
+    messageFields: ["confidence"]
+  },
+  // ========================================
+  // HELPFUL HINTS (DEVELOPMENT)
+  // ========================================
+  {
+    id: "DEV_HINT_MEMOIZATION",
+    category: "PERFORMANCE",
+    baseSeverity: "INFO",
+    predicate: {
+      field: "renders",
+      operator: ">",
+      value: 15
+    },
+    confidenceThreshold: 0.5,
+    messageTemplate: "\u{1F4A1} Consider React.memo or useMemo for this component",
+    messageFields: ["confidence"]
+  },
+  {
+    id: "DEV_HINT_OPTIMIZATION",
+    category: "PERFORMANCE",
+    baseSeverity: "INFO",
+    predicate: {
+      field: "avgTime",
+      operator: ">",
+      value: 20
+    },
+    confidenceThreshold: 0.5,
+    messageTemplate: "\u{1F4A1} Component could benefit from optimization (>20ms avg)",
+    messageFields: ["confidence"]
+  }
+];
+function getRulesConfig() {
+  return PERF_RULES;
+}
+var RULE_GROUPS = {
+  CRITICAL_ONLY: PERF_RULES.filter((r) => r.baseSeverity === "CRITICAL"),
+  PERFORMANCE: PERF_RULES.filter((r) => r.category === "PERFORMANCE"),
+  UX: PERF_RULES.filter((r) => r.category === "UX"),
+  STABILITY: PERF_RULES.filter((r) => r.category === "STABILITY"),
+  MEMORY: PERF_RULES.filter((r) => r.category === "MEMORY"),
+  HINTS: PERF_RULES.filter((r) => r.id.startsWith("DEV_HINT") || r.id.startsWith("PROD_READY"))
+};
+
+// src/PrevGuardPanel.tsx
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PerfGuardPanel() {
+  const [issues, setIssues] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [selectedIssue, setSelectedIssue] = useState(null);
+  useEffect(() => {
+    subscribe(setIssues);
+  }, []);
+  if (!issues.length) {
+    return /* @__PURE__ */ jsx("div", { style: panel, children: /* @__PURE__ */ jsxs("div", { style: header, children: [
+      /* @__PURE__ */ jsx("div", { style: headerTitle, children: "PerfGuard" }),
+      /* @__PURE__ */ jsx("div", { style: headerSubtitle, children: "No issues detected" })
+    ] }) });
+  }
+  const criticalCount = issues.filter(
+    (i) => i.severity === "CRITICAL" && i.status === "ACTIVE"
+  ).length;
+  const highCount = issues.filter(
+    (i) => i.severity === "HIGH" && i.status === "ACTIVE"
+  ).length;
+  const activeCount = issues.filter(
+    (i) => i.status === "ACTIVE" || i.status === "NEW"
+  ).length;
+  const getSeverityClass = (severity) => {
+    switch (severity) {
+      case "CRITICAL":
+        return "severity-critical";
+      case "HIGH":
+        return "severity-high";
+      case "MEDIUM":
+        return "severity-medium";
+      default:
+        return "severity-low";
+    }
+  };
+  const sortedIssues = [...issues].sort((a, b) => {
+    if (a.status === b.status) return 0;
+    return a.status === "ACTIVE" ? -1 : 1;
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: styles }),
+    /* @__PURE__ */ jsxs("div", { style: panel, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: header,
+          onClick: () => setOpen((o) => !o),
+          className: "perfguard-header",
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: headerLeft, children: [
+              /* @__PURE__ */ jsxs("div", { style: iconWrapper, children: [
+                /* @__PURE__ */ jsx("span", { style: icon, children: "\u26A1" }),
+                criticalCount > 0 && /* @__PURE__ */ jsx("span", { style: criticalPing })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { style: headerTitle, children: [
+                  "PerfGuard",
+                  /* @__PURE__ */ jsx("span", { style: betaBadge, children: "BETA" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: headerSubtitle, children: [
+                  activeCount,
+                  " active issue",
+                  activeCount !== 1 ? "s" : ""
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: headerRight, children: [
+              criticalCount > 0 && /* @__PURE__ */ jsxs("span", { style: criticalBadge, className: "critical-badge", children: [
+                criticalCount,
+                " Critical"
+              ] }),
+              highCount > 0 && /* @__PURE__ */ jsxs("span", { style: highBadge, children: [
+                highCount,
+                " High"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  style: {
+                    ...chevron,
+                    transform: open ? "rotate(180deg)" : "rotate(0deg)"
+                  },
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs("div", { style: issuesContainer, className: "issues-container", children: [
+        /* @__PURE__ */ jsx("div", { style: issuesList, children: sortedIssues.map((issue, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => setSelectedIssue(
+              selectedIssue === issue.id ? null : issue.id
+            ),
+            style: issueCard(idx),
+            className: `issue-card ${getSeverityClass(issue.severity)}`,
+            children: /* @__PURE__ */ jsxs("div", { style: issueContent, children: [
+              /* @__PURE__ */ jsxs("div", { style: issueMain, children: [
+                /* @__PURE__ */ jsxs("div", { style: issueHeader, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: statusDot(issue.status),
+                      className: issue.status === "ACTIVE" ? "status-dot-pulse" : ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: componentName, children: issue.component }),
+                  issue.status === "RESOLVED" ? /* @__PURE__ */ jsx("span", { style: statusBadgeResolved, children: "\u2713 Resolved" }) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: statusBadgeOpen,
+                      className: "status-badge-open",
+                      children: "\u25CF Open"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: ruleId, children: issue.ruleId.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ") }),
+                /* @__PURE__ */ jsxs("div", { style: issueMetrics, children: [
+                  /* @__PURE__ */ jsxs("div", { style: metric, children: [
+                    /* @__PURE__ */ jsx("span", { style: metricLabel, children: "Severity:" }),
+                    /* @__PURE__ */ jsx("span", { style: metricValue, children: issue.severity })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { style: metric, children: [
+                    /* @__PURE__ */ jsx("span", { style: metricLabel, children: "Confidence:" }),
+                    /* @__PURE__ */ jsxs("div", { style: confidenceWrapper, children: [
+                      /* @__PURE__ */ jsx("div", { style: confidenceBar, children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            ...confidenceProgress,
+                            width: `${issue.confidence * 100}%`
+                          },
+                          className: `confidence-progress ${getSeverityClass(
+                            issue.severity
+                          )}`
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("span", { style: confidenceValue, children: [
+                        Math.round(issue.confidence * 100),
+                        "%"
+                      ] })
+                    ] })
+                  ] })
+                ] }),
+                selectedIssue === issue.id && /* @__PURE__ */ jsx("div", { style: issueDetails, className: "issue-details", children: /* @__PURE__ */ jsxs("div", { style: detailsContent, children: [
+                  /* @__PURE__ */ jsxs("span", { style: detailsText, children: [
+                    "Rule ID: ",
+                    issue.ruleId
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { style: detailsDescription, children: issue.reason })
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  style: {
+                    ...expandIcon,
+                    transform: selectedIssue === issue.id ? "rotate(180deg)" : "rotate(0deg)"
+                  },
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M19 9l-7 7-7-7"
+                    }
+                  )
+                }
+              )
+            ] })
+          },
+          issue.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { style: footer, children: [
+          /* @__PURE__ */ jsx("span", { style: footerText, children: "Last scan: just now" }),
+          /* @__PURE__ */ jsx("button", { style: scanButton, children: "Run Scan" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+var styles = `
+  @keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+  
+  @keyframes slideDown {
+    from { max-height: 0; opacity: 0; }
+    to { max-height: 600px; opacity: 1; }
+  }
+  
+  @keyframes pulseGlow {
+    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); }
+    50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.6); }
+  }
+  
+  @keyframes ping {
+    75%, 100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  .perfguard-header:hover {
+    background: linear-gradient(to right, #1e293b, #0f172a);
+  }
+
+  .critical-badge {
+    animation: pulseGlow 2s ease-in-out infinite;
+  }
+
+  .status-dot-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .status-badge-open {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .issues-container {
+    animation: slideDown 0.3s ease-out;
+  }
+
+  .issue-card {
+    animation: slideUp 0.3s ease-out;
+    transition: all 0.2s ease;
+  }
+
+  .issue-card:hover {
+    background-color: rgba(30, 41, 59, 0.5);
+  }
+
+  .issue-card.severity-critical {
+    border-left: 4px solid rgba(239, 68, 68, 0.3);
+    background-color: rgba(239, 68, 68, 0.1);
+  }
+
+  .issue-card.severity-high {
+    border-left: 4px solid rgba(249, 115, 22, 0.3);
+    background-color: rgba(249, 115, 22, 0.1);
+  }
+
+  .issue-card.severity-medium {
+    border-left: 4px solid rgba(234, 179, 8, 0.3);
+    background-color: rgba(234, 179, 8, 0.1);
+  }
+
+  .issue-card.severity-low {
+    border-left: 4px solid rgba(59, 130, 246, 0.3);
+    background-color: rgba(59, 130, 246, 0.1);
+  }
+
+  .issue-details {
+    animation: slideDown 0.2s ease-out;
+  }
+
+  .confidence-progress {
+    transition: width 0.5s ease-out;
+  }
+
+  .confidence-progress.severity-critical {
+    background-color: #ef4444;
+  }
+
+  .confidence-progress.severity-high {
+    background-color: #f97316;
+  }
+
+  .confidence-progress.severity-medium {
+    background-color: #eab308;
+  }
+
+  .confidence-progress.severity-low {
+    background-color: #3b82f6;
+  }
+`;
+var panel = {
+  position: "fixed",
+  bottom: 16,
+  right: 16,
+  width: 480,
+  fontFamily: "monospace",
+  fontSize: 14,
+  zIndex: 1e4,
+  background: "#0f172a",
+  borderRadius: 8,
+  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+  border: "1px solid #334155",
+  overflow: "hidden",
+  animation: "slideUp 0.3s ease-out"
+};
+var header = {
+  padding: "12px 16px",
+  background: "linear-gradient(to right, #1e293b, #0f172a)",
+  borderBottom: "1px solid #334155",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  transition: "background 0.2s ease"
+};
+var headerLeft = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+};
+var iconWrapper = {
+  position: "relative"
+};
+var icon = {
+  fontSize: 24
+};
+var criticalPing = {
+  position: "absolute",
+  top: -4,
+  right: -4,
+  width: 12,
+  height: 12,
+  background: "#ef4444",
+  borderRadius: "50%",
+  animation: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
+};
+var headerTitle = {
+  fontWeight: "bold",
+  color: "#ffffff",
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var betaBadge = {
+  fontSize: 10,
+  padding: "2px 8px",
+  background: "rgba(59, 130, 246, 0.2)",
+  color: "#60a5fa",
+  borderRadius: 4,
+  border: "1px solid rgba(59, 130, 246, 0.3)"
+};
+var headerSubtitle = {
+  fontSize: 12,
+  color: "#94a3b8"
+};
+var headerRight = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8
+};
+var criticalBadge = {
+  padding: "4px 8px",
+  fontSize: 12,
+  background: "rgba(239, 68, 68, 0.2)",
+  color: "#f87171",
+  borderRadius: 4,
+  border: "1px solid rgba(239, 68, 68, 0.3)"
+};
+var highBadge = {
+  padding: "4px 8px",
+  fontSize: 12,
+  background: "rgba(249, 115, 22, 0.2)",
+  color: "#fb923c",
+  borderRadius: 4,
+  border: "1px solid rgba(249, 115, 22, 0.3)"
+};
+var chevron = {
+  width: 20,
+  height: 20,
+  color: "#94a3b8",
+  transition: "transform 0.3s ease"
+};
+var issuesContainer = {
+  maxHeight: 500,
+  overflowY: "auto"
+};
+var issuesList = {
+  borderTop: "1px solid #1e293b"
+};
+var issueCard = (idx) => ({
+  padding: 16,
+  cursor: "pointer",
+  borderBottom: "1px solid #1e293b",
+  animationDelay: `${idx * 50}ms`
+});
+var issueContent = {
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: 12
+};
+var issueMain = {
+  flex: 1
+};
+var issueHeader = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  marginBottom: 8
+};
+var statusDot = (status) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  background: status === "OPEN" ? "#ef4444" : "#22c55e"
+});
+var componentName = {
+  fontWeight: 600,
+  color: "#ffffff"
+};
+var statusBadgeResolved = {
+  padding: "2px 8px",
+  fontSize: 12,
+  borderRadius: 9999,
+  background: "rgba(34, 197, 94, 0.2)",
+  color: "#4ade80",
+  border: "1px solid rgba(34, 197, 94, 0.3)"
+};
+var statusBadgeOpen = {
+  padding: "2px 8px",
+  fontSize: 12,
+  borderRadius: 9999,
+  background: "rgba(239, 68, 68, 0.2)",
+  color: "#f87171",
+  border: "1px solid rgba(239, 68, 68, 0.3)"
+};
+var ruleId = {
+  fontSize: 14,
+  color: "#cbd5e1",
+  marginBottom: 8,
+  fontWeight: 500
+};
+var issueMetrics = {
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+  fontSize: 12
+};
+var metric = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+};
+var metricLabel = {
+  color: "#64748b"
+};
+var metricValue = {
+  fontWeight: "bold",
+  color: "#e2e8f0"
+};
+var confidenceWrapper = {
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+};
+var confidenceBar = {
+  width: 64,
+  height: 6,
+  background: "#334155",
+  borderRadius: 9999,
+  overflow: "hidden"
+};
+var confidenceProgress = {
+  height: "100%"
+};
+var confidenceValue = {
+  color: "#cbd5e1",
+  fontWeight: 500
+};
+var issueDetails = {
+  marginTop: 12,
+  paddingTop: 12,
+  borderTop: "1px solid #334155"
+};
+var detailsContent = {
+  display: "flex",
+  flexDirection: "column",
+  //   justifyContent: "space-between",
+  alignItems: "flex-start",
+  gap: 2,
+  fontSize: 12,
+  color: "#94a3b8"
+};
+var detailsDescription = {
+  color: "#b8b594ff"
+};
+var detailsText = {
+  color: "#94a3b8"
+};
+var expandIcon = {
+  width: 16,
+  height: 16,
+  color: "#64748b",
+  transition: "transform 0.2s ease",
+  flexShrink: 0,
+  marginTop: 4
+};
+var footer = {
+  padding: 12,
+  background: "rgba(30, 41, 59, 0.5)",
+  borderTop: "1px solid #334155",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center"
+};
+var footerText = {
+  fontSize: 12,
+  color: "#94a3b8"
+};
+var scanButton = {
+  fontSize: 12,
+  padding: "6px 12px",
+  background: "#3b82f6",
+  color: "#ffffff",
+  border: "none",
+  borderRadius: 4,
+  cursor: "pointer",
+  fontWeight: 500,
+  fontFamily: "monospace",
+  transition: "background 0.2s ease"
+};
+
+// src/PerfProvider.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var worker = null;
+function PerfProvider({ children }) {
+  const [stats, setStats] = useState2({ issues: 0, critical: 0 });
+  if (!isDev) {
+    return /* @__PURE__ */ jsx2(Fragment2, { children });
+  }
+  useEffect2(() => {
+    try {
+      worker = createAnalyzerWorker();
+      const rules = getRulesConfig();
+      worker.postMessage({
+        type: "INIT_RULES",
+        payload: rules
+      });
+      worker.onmessage = (e) => {
+        const { type, data, hasCritical } = e.data;
+        if (type === "INIT_SUCCESS") {
+          console.log(`\u2705 [PerfGuard] Worker ready with ${e.data.count} rules`);
+        }
+        if (type === "RESULTS") {
+          setStats((prev) => ({
+            issues: prev.issues + data.length,
+            critical: prev.critical + (hasCritical ? 1 : 0)
+          }));
+          data.forEach((result) => {
+            showWarning(result);
+            if (result.hasCritical) {
+              showCriticalAlert(result);
+            }
+          });
+        }
+        if (type === "STATS") {
+          console.log("\u{1F4CA} [PerfGuard] Stats:", e.data.data);
+        }
+      };
+      worker.onerror = (err) => {
+        console.error("[PerfGuard] Worker error:", err);
+      };
+    } catch (err) {
+      console.warn("[PerfGuard] Worker failed to start", err);
+      return;
+    }
+    const interval = setInterval(() => {
+      const data = flushMetrics();
+      if (data.length) {
+        console.log(`[PerfGuard] Flushing ${data.length} snapshot(s)`);
+        worker?.postMessage({
+          type: "EVALUATE",
+          payload: data
+        });
+      }
+    }, 5e3);
+    const statsInterval = setInterval(() => {
+      worker?.postMessage({ type: "GET_STATS" });
+    }, 3e4);
+    return () => {
+      clearInterval(interval);
+      clearInterval(statsInterval);
+      worker?.terminate();
+      worker = null;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    children,
+    /* @__PURE__ */ jsx2(PerfGuardPanel, {})
+  ] });
+}
+
+// src/withPerfGuard.tsx
+import { Profiler } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DEFAULT_OPTIONS = {
+  boundaryType: "INLINE",
+  enabled: true
+};
+function withPerfGuard(Component, options) {
+  const { boundaryType, enabled } = {
+    ...DEFAULT_OPTIONS,
+    ...options
+  };
+  const fallbackId = "AnonymousComponent";
+  const name = Component.displayName || Component.name || `PerfGuard(${fallbackId})`;
+  if (process.env.NODE_ENV === "production" || !enabled) {
+    return Component;
+  }
+  const Guarded = (props) => {
+    return /* @__PURE__ */ jsx3(
+      Profiler,
+      {
+        id: name,
+        onRender: (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+          collectMetric({
+            component: id,
+            phase,
+            actualDuration,
+            baseDuration,
+            startTime,
+            commitTime,
+            boundaryType
+          });
+        },
+        children: /* @__PURE__ */ jsx3(Component, { ...props })
+      }
+    );
+  };
+  Guarded.displayName = `withPerfGuard(${name})`;
+  return Guarded;
+}
+
+// src/PerfProfiler.tsx
+import { Profiler as Profiler2 } from "react";
+import { Fragment as Fragment3, jsx as jsx4 } from "react/jsx-runtime";
+function PerfProfiler({
+  id,
+  children,
+  boundaryType = "INLINE"
+}) {
+  if (!isDev) {
+    return /* @__PURE__ */ jsx4(Fragment3, { children });
+  }
+  return /* @__PURE__ */ jsx4(
+    Profiler2,
+    {
+      id,
+      onRender: (component, phase, actualDuration, baseDuration, startTime, commitTime) => {
+        collectMetric({
+          component,
+          phase,
+          actualDuration,
+          baseDuration,
+          startTime,
+          commitTime,
+          boundaryType
+        });
+      },
+      children
+    }
+  );
+}
+export {
+  PerfProfiler,
+  PerfProvider,
+  withPerfGuard
+};