@fluxiapi/react 0.3.0

package/dist/index.mjs

@@ -0,0 +1,1278 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/devtools/FluxDevTools.tsx
+import { useState as useState3, useEffect as useEffect2, useCallback } from "react";
+
+// src/context.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useSyncExternalStore
+} from "react";
+
+// src/scanner-bridge.ts
+var ScannerBridge = class {
+  constructor(config = {}) {
+    this._listeners = /* @__PURE__ */ new Set();
+    this._analyzeTimer = null;
+    this._tickTimer = null;
+    // Lazy-loaded scan engine classes
+    this._scanner = null;
+    this._analyzer = null;
+    this._config = {
+      network: config.network ?? "wifi",
+      analysisInterval: config.analysisInterval ?? 3e3,
+      autoStart: config.autoStart ?? true,
+      verbose: config.verbose ?? false
+    };
+    this._state = {
+      scanning: false,
+      requests: [],
+      report: null,
+      score: 100,
+      violations: [],
+      startTime: 0,
+      elapsed: 0,
+      network: this._config.network,
+      framework: null
+    };
+  }
+  // ─── State Management ───────────────────────────────────────
+  get state() {
+    return this._state;
+  }
+  subscribe(listener) {
+    this._listeners.add(listener);
+    return () => this._listeners.delete(listener);
+  }
+  _emit() {
+    const snapshot = { ...this._state };
+    this._listeners.forEach((fn) => fn(snapshot));
+  }
+  _update(partial) {
+    this._state = { ...this._state, ...partial };
+    this._emit();
+  }
+  // ─── Scan Lifecycle ─────────────────────────────────────────
+  async start() {
+    if (this._state.scanning) return;
+    try {
+      const scanModule = await import("@fluxiapi/scan");
+      this._scanner = new scanModule.FluxScanner({
+        duration: Infinity,
+        // We control the stop
+        network: this._config.network,
+        verbose: this._config.verbose
+      });
+      this._analyzer = new scanModule.FluxAnalyzer({
+        network: this._config.network
+      });
+      this._scanner.start();
+      this._update({
+        scanning: true,
+        startTime: Date.now(),
+        elapsed: 0,
+        requests: [],
+        report: null,
+        violations: [],
+        score: 100
+      });
+      this._tickTimer = setInterval(() => {
+        if (!this._scanner) return;
+        const requests = this._scanner.getRequests?.() ?? [];
+        this._update({
+          elapsed: Math.round((Date.now() - this._state.startTime) / 1e3),
+          requests
+        });
+      }, 500);
+      this._analyzeTimer = setInterval(() => {
+        this._runAnalysis();
+      }, this._config.analysisInterval);
+      if (this._config.verbose) {
+        console.log("[FluxAPI] Scanner started");
+      }
+    } catch (err) {
+      console.error("[FluxAPI] Failed to start scanner:", err);
+    }
+  }
+  stop() {
+    if (!this._state.scanning || !this._scanner) return null;
+    if (this._tickTimer) clearInterval(this._tickTimer);
+    if (this._analyzeTimer) clearInterval(this._analyzeTimer);
+    this._tickTimer = null;
+    this._analyzeTimer = null;
+    const session = this._scanner.stop();
+    const report = this._analyzer?.analyze(session) ?? null;
+    this._update({
+      scanning: false,
+      report,
+      score: report?.score?.overall ?? 100,
+      violations: report?.violations ?? [],
+      framework: session?.stack?.framework?.name ?? null
+    });
+    if (this._config.verbose) {
+      console.log("[FluxAPI] Scanner stopped. Score:", report?.score?.overall);
+    }
+    return report;
+  }
+  reset() {
+    this.stop();
+    this._update({
+      scanning: false,
+      requests: [],
+      report: null,
+      score: 100,
+      violations: [],
+      startTime: 0,
+      elapsed: 0,
+      framework: null
+    });
+  }
+  setNetwork(network) {
+    this._config.network = network;
+    this._update({ network });
+    if (this._analyzer) {
+      try {
+        const scanModule = __require("@fluxiapi/scan");
+        this._analyzer = new scanModule.FluxAnalyzer({ network });
+      } catch {
+      }
+    }
+  }
+  // ─── Analysis ───────────────────────────────────────────────
+  _runAnalysis() {
+    if (!this._scanner || !this._analyzer) return;
+    try {
+      const session = this._scanner.stop();
+      this._scanner.start();
+      const report = this._analyzer.analyze(session);
+      this._update({
+        report,
+        score: report?.score?.overall ?? 100,
+        violations: report?.violations ?? [],
+        framework: session?.stack?.framework?.name ?? null
+      });
+    } catch (err) {
+      if (this._config.verbose) {
+        console.error("[FluxAPI] Analysis error:", err);
+      }
+    }
+  }
+  // ─── TanStack Query Integration ─────────────────────────────
+  /**
+   * Capture a TanStack Query event. Called by FluxQueryClient wrapper.
+   */
+  captureQueryEvent(event) {
+    if (this._config.verbose) {
+      console.log("[FluxAPI] Query event:", event.type, event.queryKey);
+    }
+  }
+  /**
+   * Capture a SWR event.
+   */
+  captureSWREvent(event) {
+    if (this._config.verbose) {
+      console.log("[FluxAPI] SWR event:", event.type, event.key);
+    }
+  }
+  destroy() {
+    this.stop();
+    this._listeners.clear();
+    this._scanner = null;
+    this._analyzer = null;
+  }
+};
+var _globalBridge = null;
+function getGlobalBridge(config) {
+  if (!_globalBridge) {
+    _globalBridge = new ScannerBridge(config);
+  }
+  return _globalBridge;
+}
+function resetGlobalBridge() {
+  _globalBridge?.destroy();
+  _globalBridge = null;
+}
+
+// src/context.tsx
+import { jsx } from "react/jsx-runtime";
+var FluxContext = createContext(null);
+function FluxProvider({
+  children,
+  network,
+  analysisInterval,
+  autoStart = true,
+  verbose = false,
+  bridge: customBridge
+}) {
+  const bridgeRef = useRef(
+    customBridge ?? getGlobalBridge({ network, analysisInterval, autoStart, verbose })
+  );
+  const bridge = bridgeRef.current;
+  const state = useSyncExternalStore(
+    (callback) => bridge.subscribe(callback),
+    () => bridge.state,
+    () => bridge.state
+    // server snapshot
+  );
+  useEffect(() => {
+    if (autoStart && !bridge.state.scanning) {
+      bridge.start();
+    }
+    return () => {
+    };
+  }, [autoStart, bridge]);
+  return /* @__PURE__ */ jsx(FluxContext.Provider, { value: { bridge, state }, children });
+}
+function useFlux() {
+  const ctx = useContext(FluxContext);
+  if (!ctx) {
+    throw new Error(
+      "useFlux must be used within a <FluxProvider>. Wrap your app with <FluxProvider> or use <FluxDevTools /> which includes it."
+    );
+  }
+  return ctx;
+}
+function useFluxBridge() {
+  return useFlux().bridge;
+}
+function useFluxState() {
+  return useFlux().state;
+}
+
+// src/devtools/styles.ts
+var COLORS = {
+  bg: "#0f0f13",
+  bg2: "#16161d",
+  bg3: "#1e1e28",
+  border: "#2a2a3a",
+  fg: "#e2e2e6",
+  fg2: "#a0a0b0",
+  fg3: "#6a6a7a",
+  accent: "#7c6afc",
+  accent2: "#a78bfa",
+  green: "#22c55e",
+  blue: "#3b82f6",
+  orange: "#f59e0b",
+  red: "#ef4444",
+  cyan: "#06b6d4"
+};
+var FONTS = {
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  mono: '"SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace'
+};
+var containerStyle = {
+  position: "fixed",
+  zIndex: 2147483647,
+  fontFamily: FONTS.sans,
+  fontSize: "12px",
+  lineHeight: "1.5",
+  color: COLORS.fg,
+  WebkitFontSmoothing: "antialiased"
+};
+var badgeStyle = (score, position) => {
+  const color = score >= 90 ? COLORS.green : score >= 70 ? COLORS.blue : score >= 50 ? COLORS.orange : COLORS.red;
+  const pos = parsePosition(position);
+  return {
+    ...pos,
+    width: "48px",
+    height: "48px",
+    borderRadius: "50%",
+    background: COLORS.bg,
+    border: `2px solid ${color}`,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    boxShadow: `0 4px 20px rgba(0,0,0,0.5), 0 0 0 1px ${COLORS.border}`,
+    transition: "all 0.2s ease",
+    userSelect: "none"
+  };
+};
+var badgeScoreStyle = (score) => ({
+  fontSize: "14px",
+  fontWeight: 800,
+  lineHeight: "1",
+  color: score >= 90 ? COLORS.green : score >= 70 ? COLORS.blue : score >= 50 ? COLORS.orange : COLORS.red
+});
+var badgeLabelStyle = {
+  fontSize: "6px",
+  fontWeight: 600,
+  color: COLORS.fg3,
+  letterSpacing: "0.5px",
+  textTransform: "uppercase"
+};
+var scanningDotStyle = {
+  width: "10px",
+  height: "10px",
+  borderRadius: "50%",
+  background: COLORS.accent,
+  animation: "fluxPulse 1.5s ease-in-out infinite"
+};
+var panelStyle = (position) => {
+  const isRight = position.includes("right");
+  const isBottom = position.includes("bottom");
+  return {
+    position: "fixed",
+    [isBottom ? "bottom" : "top"]: "16px",
+    [isRight ? "right" : "left"]: "16px",
+    width: "380px",
+    maxHeight: "min(580px, calc(100vh - 40px))",
+    background: COLORS.bg,
+    border: `1px solid ${COLORS.border}`,
+    borderRadius: "12px",
+    boxShadow: "0 8px 40px rgba(0,0,0,0.6)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  };
+};
+var panelHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 14px",
+  background: COLORS.bg2,
+  borderBottom: `1px solid ${COLORS.border}`,
+  cursor: "move"
+};
+var panelTitleStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  fontSize: "13px",
+  fontWeight: 700,
+  color: COLORS.fg
+};
+var panelCloseBtnStyle = {
+  background: "none",
+  border: "none",
+  color: COLORS.fg3,
+  cursor: "pointer",
+  fontSize: "16px",
+  padding: "2px 4px",
+  borderRadius: "4px",
+  lineHeight: "1"
+};
+var tabBarStyle = {
+  display: "flex",
+  borderBottom: `1px solid ${COLORS.border}`,
+  background: COLORS.bg2
+};
+var tabStyle = (active) => ({
+  flex: 1,
+  padding: "7px 0",
+  fontSize: "10px",
+  fontWeight: 600,
+  textAlign: "center",
+  cursor: "pointer",
+  color: active ? COLORS.accent : COLORS.fg3,
+  borderBottom: active ? `2px solid ${COLORS.accent}` : "2px solid transparent",
+  background: "none",
+  border: "none",
+  borderBottomStyle: "solid",
+  transition: "all 0.15s",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+});
+var panelBodyStyle = {
+  flex: 1,
+  overflow: "auto",
+  padding: "12px"
+};
+var scoreRingContainerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "16px",
+  marginBottom: "14px"
+};
+var scoreRingStyle = {
+  width: "72px",
+  height: "72px",
+  position: "relative",
+  flexShrink: 0
+};
+var scoreNumberStyle = (color) => ({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -55%)",
+  fontSize: "22px",
+  fontWeight: 800,
+  color,
+  lineHeight: "1"
+});
+var scoreGradeStyle = (color) => ({
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, 50%)",
+  fontSize: "8px",
+  fontWeight: 600,
+  color,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+});
+var catRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "6px",
+  fontSize: "11px"
+};
+var catNameStyle = {
+  width: "70px",
+  color: COLORS.fg2
+};
+var catTrackStyle = {
+  flex: 1,
+  height: "6px",
+  borderRadius: "3px",
+  background: COLORS.bg3,
+  overflow: "hidden"
+};
+var catFillStyle = (pct, color) => ({
+  width: `${pct}%`,
+  height: "100%",
+  borderRadius: "3px",
+  background: color,
+  transition: "width 0.5s ease"
+});
+var catPctStyle = (color) => ({
+  width: "32px",
+  textAlign: "right",
+  fontWeight: 700,
+  fontFamily: FONTS.mono,
+  fontSize: "10px",
+  color
+});
+var violationCardStyle = {
+  background: COLORS.bg2,
+  border: `1px solid ${COLORS.border}`,
+  borderRadius: "8px",
+  padding: "10px",
+  marginBottom: "8px"
+};
+var violationHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  marginBottom: "4px"
+};
+var severityDotStyle = (severity) => ({
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  flexShrink: 0,
+  background: severity === "critical" ? COLORS.red : severity === "warning" ? COLORS.orange : COLORS.blue
+});
+var ruleIdBadgeStyle = {
+  fontSize: "9px",
+  fontWeight: 700,
+  fontFamily: FONTS.mono,
+  color: COLORS.accent,
+  padding: "1px 4px",
+  borderRadius: "3px",
+  background: "rgba(124, 106, 252, 0.12)"
+};
+var violationTitleStyle = {
+  fontSize: "11px",
+  fontWeight: 600,
+  color: COLORS.fg,
+  flex: 1
+};
+var violationDescStyle = {
+  fontSize: "10px",
+  color: COLORS.fg3,
+  lineHeight: "1.4"
+};
+var violationImpactStyle = {
+  display: "flex",
+  gap: "10px",
+  marginTop: "6px",
+  fontSize: "10px"
+};
+var impactItemStyle = (color) => ({
+  color,
+  fontWeight: 600,
+  fontFamily: FONTS.mono
+});
+var requestRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "4px 0",
+  borderBottom: `1px solid ${COLORS.border}`,
+  fontSize: "10px"
+};
+var methodBadgeStyle = (method) => ({
+  fontSize: "9px",
+  fontWeight: 700,
+  fontFamily: FONTS.mono,
+  padding: "1px 4px",
+  borderRadius: "3px",
+  color: method === "GET" ? COLORS.green : method === "POST" ? COLORS.blue : COLORS.orange,
+  background: method === "GET" ? "rgba(34, 197, 94, 0.1)" : method === "POST" ? "rgba(59, 130, 246, 0.1)" : "rgba(245, 158, 11, 0.1)",
+  minWidth: "32px",
+  textAlign: "center"
+});
+var pathStyle = {
+  flex: 1,
+  color: COLORS.fg2,
+  fontFamily: FONTS.mono,
+  fontSize: "10px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var durationStyle = (ms) => ({
+  fontFamily: FONTS.mono,
+  fontWeight: 600,
+  fontSize: "10px",
+  color: ms > 500 ? COLORS.red : ms > 200 ? COLORS.orange : COLORS.green,
+  minWidth: "40px",
+  textAlign: "right"
+});
+var statusStyle = (status) => ({
+  fontFamily: FONTS.mono,
+  fontSize: "9px",
+  fontWeight: 600,
+  color: status >= 500 ? COLORS.red : status >= 400 ? COLORS.orange : status >= 300 ? COLORS.blue : COLORS.green,
+  minWidth: "24px",
+  textAlign: "center"
+});
+var statsGridStyle = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr 1fr",
+  gap: "8px",
+  marginBottom: "14px"
+};
+var statCardStyle = (color) => ({
+  background: COLORS.bg2,
+  border: `1px solid ${COLORS.border}`,
+  borderRadius: "8px",
+  padding: "8px",
+  textAlign: "center"
+});
+var statNumStyle = (color) => ({
+  fontSize: "18px",
+  fontWeight: 800,
+  color,
+  lineHeight: "1.2"
+});
+var statLabelStyle = {
+  fontSize: "9px",
+  color: COLORS.fg3,
+  textTransform: "uppercase",
+  letterSpacing: "0.3px"
+};
+var infoRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "6px 10px",
+  background: COLORS.bg2,
+  borderRadius: "6px",
+  marginBottom: "8px",
+  fontSize: "10px",
+  color: COLORS.fg2
+};
+var emptyStateStyle = {
+  textAlign: "center",
+  padding: "24px",
+  color: COLORS.fg3,
+  fontSize: "12px"
+};
+function parsePosition(pos) {
+  switch (pos) {
+    case "bottom-right":
+      return { bottom: "16px", right: "16px" };
+    case "bottom-left":
+      return { bottom: "16px", left: "16px" };
+    case "top-right":
+      return { top: "16px", right: "16px" };
+    case "top-left":
+      return { top: "16px", left: "16px" };
+    default:
+      return { bottom: "16px", right: "16px" };
+  }
+}
+var _stylesInjected = false;
+function injectKeyframes() {
+  if (_stylesInjected || typeof document === "undefined") return;
+  _stylesInjected = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes fluxPulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.85); }
+    }
+    @keyframes fluxFadeIn {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .flux-devtools * { box-sizing: border-box; }
+    .flux-devtools ::-webkit-scrollbar { width: 4px; }
+    .flux-devtools ::-webkit-scrollbar-track { background: transparent; }
+    .flux-devtools ::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 2px; }
+  `;
+  document.head.appendChild(style);
+}
+
+// src/devtools/Badge.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Badge({ state, position, onClick }) {
+  const { score, scanning, violations } = state;
+  const critCount = violations.filter((v) => v.severity === "critical").length;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: badgeStyle(score, position),
+      onClick,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      },
+      title: scanning ? `Scanning... ${state.requests.length} requests` : `API Score: ${score}/100 \xB7 ${violations.length} issues`,
+      children: scanning ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("div", { style: scanningDotStyle }),
+        /* @__PURE__ */ jsx2("div", { style: { ...badgeLabelStyle, marginTop: "2px" }, children: "SCAN" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("div", { style: badgeScoreStyle(score), children: score }),
+        /* @__PURE__ */ jsx2("div", { style: badgeLabelStyle, children: critCount > 0 ? `${critCount}!` : "API" })
+      ] })
+    }
+  );
+}
+
+// src/devtools/Panel.tsx
+import { useState as useState2, useMemo } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var RULE_NAMES = {
+  E1: "Request Waterfall",
+  E2: "Duplicate Requests",
+  E3: "N+1 Pattern",
+  E4: "Over-fetching",
+  E5: "Batchable Requests",
+  C1: "No Cache",
+  C2: "Under-Caching",
+  C3: "Over-Caching",
+  C4: "Missing Revalidation",
+  P1: "Missing Prefetch",
+  P2: "Unnecessary Polling",
+  P3: "No Error Recovery",
+  P4: "Uncompressed"
+};
+function Panel({ state, bridge, position, onClose }) {
+  const [tab, setTab] = useState2("overview");
+  const { report, violations, requests, scanning, elapsed, score, framework } = state;
+  const apiRequests = useMemo(
+    () => requests.filter((r) => r.type === "api-rest" || r.type === "api-graphql"),
+    [requests]
+  );
+  return /* @__PURE__ */ jsxs2("div", { style: panelStyle(position), className: "flux-devtools", children: [
+    /* @__PURE__ */ jsxs2("div", { style: panelHeaderStyle, children: [
+      /* @__PURE__ */ jsxs2("div", { style: panelTitleStyle, children: [
+        /* @__PURE__ */ jsx3("span", { children: "\u26A1" }),
+        /* @__PURE__ */ jsx3("span", { children: "FluxAPI" }),
+        scanning && /* @__PURE__ */ jsx3("span", { style: { color: COLORS.accent, fontSize: "10px", fontWeight: 500 }, children: "\u25CF Recording" }),
+        !scanning && report && /* @__PURE__ */ jsxs2("span", { style: {
+          color: score >= 70 ? COLORS.green : score >= 50 ? COLORS.orange : COLORS.red,
+          fontSize: "10px",
+          fontWeight: 700
+        }, children: [
+          score,
+          "/100"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "4px" }, children: [
+        scanning ? /* @__PURE__ */ jsx3(
+          "button",
+          {
+            style: { ...panelCloseBtnStyle, color: COLORS.red, fontSize: "10px" },
+            onClick: () => bridge.stop(),
+            children: "\u23F9 Stop"
+          }
+        ) : /* @__PURE__ */ jsx3(
+          "button",
+          {
+            style: { ...panelCloseBtnStyle, color: COLORS.green, fontSize: "10px" },
+            onClick: () => bridge.start(),
+            children: "\u25B6 Scan"
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { style: panelCloseBtnStyle, onClick: onClose, children: "\u2715" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { style: tabBarStyle, children: ["overview", "violations", "requests"].map((t) => /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        style: tabStyle(tab === t),
+        onClick: () => setTab(t),
+        children: [
+          t,
+          t === "violations" && violations.length > 0 && /* @__PURE__ */ jsx3("span", { style: {
+            marginLeft: "4px",
+            background: COLORS.red,
+            color: "#fff",
+            borderRadius: "8px",
+            padding: "0 5px",
+            fontSize: "9px",
+            fontWeight: 700
+          }, children: violations.length }),
+          t === "requests" && /* @__PURE__ */ jsx3("span", { style: {
+            marginLeft: "4px",
+            color: COLORS.fg3,
+            fontSize: "9px"
+          }, children: apiRequests.length })
+        ]
+      },
+      t
+    )) }),
+    /* @__PURE__ */ jsxs2("div", { style: panelBodyStyle, children: [
+      tab === "overview" && /* @__PURE__ */ jsx3(
+        OverviewTab,
+        {
+          state,
+          apiRequests,
+          violations
+        }
+      ),
+      tab === "violations" && /* @__PURE__ */ jsx3(ViolationsTab, { violations }),
+      tab === "requests" && /* @__PURE__ */ jsx3(RequestsTab, { requests: apiRequests })
+    ] })
+  ] });
+}
+function OverviewTab({
+  state,
+  apiRequests,
+  violations
+}) {
+  const { report, score, scanning, elapsed, framework } = state;
+  const scoreObj = report?.score;
+  const color = score >= 90 ? COLORS.green : score >= 70 ? COLORS.blue : score >= 50 ? COLORS.orange : COLORS.red;
+  const dash = Math.round(score / 100 * 251);
+  const crits = violations.filter((v) => v.severity === "critical").length;
+  const warns = violations.filter((v) => v.severity === "warning").length;
+  const infos = violations.filter((v) => v.severity === "info").length;
+  const totalTimeSaved = violations.reduce((s, v) => s + (v.impact?.timeSavedMs ?? 0), 0);
+  const totalReqsSaved = violations.reduce((s, v) => s + (v.impact?.requestsEliminated ?? 0), 0);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("div", { style: scoreRingContainerStyle, children: [
+      /* @__PURE__ */ jsxs2("div", { style: scoreRingStyle, children: [
+        /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 100 100", style: { transform: "rotate(-90deg)" }, children: [
+          /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "40", fill: "none", stroke: COLORS.bg3, strokeWidth: "6" }),
+          /* @__PURE__ */ jsx3(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: "40",
+              fill: "none",
+              stroke: color,
+              strokeWidth: "6",
+              strokeDasharray: `${dash} 251`,
+              strokeLinecap: "round"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3("div", { style: scoreNumberStyle(color), children: score }),
+        /* @__PURE__ */ jsx3("div", { style: scoreGradeStyle(color), children: score >= 90 ? "A+" : score >= 70 ? "B" : score >= 50 ? "C" : "F" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontSize: "13px", fontWeight: 700, marginBottom: "4px" }, children: "API Health" }),
+        /* @__PURE__ */ jsxs2("div", { style: { fontSize: "10px", color: COLORS.fg3 }, children: [
+          apiRequests.length,
+          " API calls \xB7 ",
+          elapsed,
+          "s"
+        ] }),
+        framework && /* @__PURE__ */ jsxs2("div", { style: { fontSize: "10px", color: COLORS.accent, marginTop: "2px" }, children: [
+          "\u269B\uFE0F ",
+          framework
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: statsGridStyle, children: [
+      /* @__PURE__ */ jsxs2("div", { style: statCardStyle(COLORS.red), children: [
+        /* @__PURE__ */ jsx3("div", { style: statNumStyle(COLORS.red), children: crits }),
+        /* @__PURE__ */ jsx3("div", { style: statLabelStyle, children: "Critical" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: statCardStyle(COLORS.orange), children: [
+        /* @__PURE__ */ jsx3("div", { style: statNumStyle(COLORS.orange), children: warns }),
+        /* @__PURE__ */ jsx3("div", { style: statLabelStyle, children: "Warnings" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: statCardStyle(COLORS.blue), children: [
+        /* @__PURE__ */ jsx3("div", { style: statNumStyle(COLORS.blue), children: apiRequests.length }),
+        /* @__PURE__ */ jsx3("div", { style: statLabelStyle, children: "API Calls" })
+      ] })
+    ] }),
+    (totalTimeSaved > 0 || totalReqsSaved > 0) && /* @__PURE__ */ jsxs2("div", { style: infoRowStyle, children: [
+      totalTimeSaved > 0 && /* @__PURE__ */ jsxs2("span", { style: { color: COLORS.blue, fontWeight: 600 }, children: [
+        "\u26A1 ",
+        fmtMs(totalTimeSaved),
+        " saveable"
+      ] }),
+      totalReqsSaved > 0 && /* @__PURE__ */ jsxs2("span", { style: { color: COLORS.green, fontWeight: 600 }, children: [
+        "\u{1F4C9} ",
+        totalReqsSaved,
+        " fewer requests"
+      ] })
+    ] }),
+    scoreObj && (() => {
+      const cats = scoreObj.categories ?? [];
+      const getCat = (cat) => cats.find((c) => c.category === cat)?.score ?? 100;
+      return /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ jsx3(CategoryBar, { icon: "\u26A1", name: "Efficiency", score: getCat("efficiency") }),
+        /* @__PURE__ */ jsx3(CategoryBar, { icon: "\u{1F4BE}", name: "Caching", score: getCat("caching") }),
+        /* @__PURE__ */ jsx3(CategoryBar, { icon: "\u{1F504}", name: "Patterns", score: getCat("patterns") })
+      ] });
+    })(),
+    violations.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "10px", fontWeight: 700, color: COLORS.fg2, marginBottom: "6px", textTransform: "uppercase", letterSpacing: "0.5px" }, children: "Top Issues" }),
+      violations.slice(0, 3).map((v, i) => /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "6px", padding: "3px 0", fontSize: "10px" }, children: [
+        /* @__PURE__ */ jsx3("span", { style: severityDotStyle(v.severity) }),
+        /* @__PURE__ */ jsx3("span", { style: ruleIdBadgeStyle, children: v.ruleId }),
+        /* @__PURE__ */ jsx3("span", { style: { color: COLORS.fg2, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: v.title }),
+        v.impact?.timeSavedMs > 0 && /* @__PURE__ */ jsxs2("span", { style: { color: COLORS.blue, fontSize: "9px", fontWeight: 600 }, children: [
+          "\u26A1",
+          fmtMs(v.impact.timeSavedMs)
+        ] })
+      ] }, i))
+    ] }),
+    violations.length === 0 && !scanning && apiRequests.length > 0 && /* @__PURE__ */ jsxs2("div", { style: emptyStateStyle, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "24px", marginBottom: "6px" }, children: "\u2728" }),
+      /* @__PURE__ */ jsx3("div", { style: { color: COLORS.green, fontWeight: 700 }, children: "No API issues found!" })
+    ] }),
+    scanning && apiRequests.length === 0 && /* @__PURE__ */ jsxs2("div", { style: emptyStateStyle, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "24px", marginBottom: "6px" }, children: "\u{1F4E1}" }),
+      "Waiting for API requests..."
+    ] })
+  ] });
+}
+function ViolationsTab({ violations }) {
+  const [expanded, setExpanded] = useState2(null);
+  if (violations.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { style: emptyStateStyle, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "24px", marginBottom: "6px" }, children: "\u2728" }),
+      "No violations detected"
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(Fragment2, { children: violations.map((v, i) => /* @__PURE__ */ jsxs2("div", { style: violationCardStyle, children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: { ...violationHeaderStyle, cursor: "pointer" },
+        onClick: () => setExpanded(expanded === i ? null : i),
+        children: [
+          /* @__PURE__ */ jsx3("span", { style: severityDotStyle(v.severity) }),
+          /* @__PURE__ */ jsx3("span", { style: ruleIdBadgeStyle, children: v.ruleId }),
+          /* @__PURE__ */ jsx3("span", { style: { ...violationTitleStyle, fontSize: "10px", color: COLORS.fg3 }, children: RULE_NAMES[v.ruleId] || v.ruleId }),
+          /* @__PURE__ */ jsx3("span", { style: { color: COLORS.fg3, fontSize: "10px" }, children: expanded === i ? "\u25BE" : "\u25B8" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { style: { ...violationTitleStyle, marginTop: "2px" }, children: v.title }),
+    /* @__PURE__ */ jsxs2("div", { style: violationImpactStyle, children: [
+      v.impact?.timeSavedMs > 0 && /* @__PURE__ */ jsxs2("span", { style: impactItemStyle(COLORS.blue), children: [
+        "\u26A1 ",
+        fmtMs(v.impact.timeSavedMs)
+      ] }),
+      v.impact?.requestsEliminated > 0 && /* @__PURE__ */ jsxs2("span", { style: impactItemStyle(COLORS.green), children: [
+        "\u{1F4C9} ",
+        v.impact.requestsEliminated,
+        " reqs"
+      ] }),
+      v.impact?.bandwidthSavedBytes > 0 && /* @__PURE__ */ jsxs2("span", { style: impactItemStyle(COLORS.orange), children: [
+        "\u{1F4BE} ",
+        fmtBytes(v.impact.bandwidthSavedBytes)
+      ] })
+    ] }),
+    expanded === i && /* @__PURE__ */ jsxs2("div", { style: { marginTop: "8px" }, children: [
+      /* @__PURE__ */ jsx3("div", { style: violationDescStyle, children: v.description }),
+      v.affectedEndpoints && v.affectedEndpoints.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { marginTop: "6px" }, children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontSize: "9px", color: COLORS.fg3, fontWeight: 600, marginBottom: "3px" }, children: "ENDPOINTS" }),
+        v.affectedEndpoints.slice(0, 5).map((ep, j) => /* @__PURE__ */ jsx3("div", { style: { fontSize: "10px", fontFamily: FONTS.mono, color: COLORS.fg2, padding: "1px 0" }, children: ep }, j))
+      ] }),
+      v.metadata?.fix && /* @__PURE__ */ jsxs2("div", { style: { marginTop: "6px" }, children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontSize: "9px", color: COLORS.fg3, fontWeight: 600, marginBottom: "3px" }, children: "FIX" }),
+        /* @__PURE__ */ jsx3("pre", { style: {
+          fontSize: "9px",
+          fontFamily: FONTS.mono,
+          color: COLORS.accent2,
+          background: COLORS.bg,
+          borderRadius: "4px",
+          padding: "6px",
+          overflow: "auto",
+          maxHeight: "120px",
+          lineHeight: "1.4",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-all"
+        }, children: typeof v.metadata.fix === "string" ? v.metadata.fix : v.metadata.fix?.code ?? "" })
+      ] })
+    ] })
+  ] }, i)) });
+}
+function RequestsTab({ requests }) {
+  const sorted = useMemo(
+    () => [...requests].sort((a, b) => b.startTime - a.startTime),
+    [requests]
+  );
+  if (sorted.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { style: emptyStateStyle, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: "24px", marginBottom: "6px" }, children: "\u{1F4E1}" }),
+      "No API requests captured yet"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("div", { style: { fontSize: "10px", color: COLORS.fg3, marginBottom: "6px" }, children: [
+      sorted.length,
+      " API requests (newest first)"
+    ] }),
+    sorted.slice(0, 50).map((r, i) => {
+      const path = r.urlParts?.pathname ?? new URL(r.url, "http://x").pathname;
+      const short = path.length > 40 ? "\u2026" + path.slice(-37) : path;
+      const status = r.response?.status ?? 0;
+      return /* @__PURE__ */ jsxs2("div", { style: requestRowStyle, children: [
+        /* @__PURE__ */ jsx3("span", { style: methodBadgeStyle(r.method), children: r.method }),
+        /* @__PURE__ */ jsx3("span", { style: pathStyle, title: r.url, children: short }),
+        status > 0 && /* @__PURE__ */ jsx3("span", { style: statusStyle(status), children: status }),
+        /* @__PURE__ */ jsxs2("span", { style: durationStyle(r.duration ?? 0), children: [
+          r.duration ?? 0,
+          "ms"
+        ] })
+      ] }, i);
+    })
+  ] });
+}
+function CategoryBar({ icon, name, score }) {
+  const color = score >= 70 ? COLORS.green : score >= 50 ? COLORS.orange : COLORS.red;
+  return /* @__PURE__ */ jsxs2("div", { style: catRowStyle, children: [
+    /* @__PURE__ */ jsx3("span", { children: icon }),
+    /* @__PURE__ */ jsx3("span", { style: catNameStyle, children: name }),
+    /* @__PURE__ */ jsx3("div", { style: catTrackStyle, children: /* @__PURE__ */ jsx3("div", { style: catFillStyle(score, color) }) }),
+    /* @__PURE__ */ jsxs2("span", { style: catPctStyle(color), children: [
+      score,
+      "%"
+    ] })
+  ] });
+}
+function fmtMs(ms) {
+  return ms >= 1e3 ? `${(ms / 1e3).toFixed(1)}s` : `${Math.round(ms)}ms`;
+}
+function fmtBytes(bytes) {
+  if (bytes >= 1048576) return `${(bytes / 1048576).toFixed(1)}MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)}KB`;
+  return `${bytes}B`;
+}
+
+// src/devtools/FluxDevTools.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FluxDevTools({
+  position = "bottom-right",
+  network,
+  analysisInterval,
+  autoStart = true,
+  defaultOpen = false,
+  verbose = false,
+  bridge,
+  forceShow = false,
+  shortcut = "ctrl+shift+f"
+}) {
+  if (!forceShow && typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(
+    FluxProvider,
+    {
+      network,
+      analysisInterval,
+      autoStart,
+      verbose,
+      bridge,
+      children: /* @__PURE__ */ jsx4(
+        DevToolsInner,
+        {
+          position,
+          defaultOpen,
+          shortcut
+        }
+      )
+    }
+  );
+}
+function DevToolsInner({
+  position,
+  defaultOpen,
+  shortcut
+}) {
+  const [open, setOpen] = useState3(defaultOpen);
+  const { bridge, state } = useFlux();
+  useEffect2(() => {
+    injectKeyframes();
+  }, []);
+  useEffect2(() => {
+    if (!shortcut) return;
+    const parts = shortcut.toLowerCase().split("+");
+    const key = parts.pop();
+    const needCtrl = parts.includes("ctrl") || parts.includes("control");
+    const needShift = parts.includes("shift");
+    const needAlt = parts.includes("alt");
+    const needMeta = parts.includes("meta") || parts.includes("cmd");
+    function handleKeydown(e) {
+      if (e.key.toLowerCase() === key && e.ctrlKey === needCtrl && e.shiftKey === needShift && e.altKey === needAlt && e.metaKey === needMeta) {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+    window.addEventListener("keydown", handleKeydown);
+    return () => window.removeEventListener("keydown", handleKeydown);
+  }, [shortcut]);
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+  return /* @__PURE__ */ jsx4("div", { style: containerStyle, className: "flux-devtools", children: open ? /* @__PURE__ */ jsx4(
+    Panel,
+    {
+      state,
+      bridge,
+      position,
+      onClose: toggle
+    }
+  ) : /* @__PURE__ */ jsx4(
+    Badge,
+    {
+      state,
+      position,
+      onClick: toggle
+    }
+  ) });
+}
+
+// src/hooks/index.ts
+import { useMemo as useMemo2 } from "react";
+function useFluxScore() {
+  const { state } = useFlux();
+  return useMemo2(() => {
+    const score = state.report?.score;
+    const overall = score?.overall ?? 100;
+    const cats = score?.categories ?? [];
+    const getCat = (label) => cats.find((c) => c.category === label)?.score ?? 100;
+    return {
+      overall,
+      grade: score?.grade ?? "excellent",
+      efficiency: getCat("efficiency"),
+      caching: getCat("caching"),
+      patterns: getCat("patterns"),
+      color: overall >= 90 ? "#22c55e" : overall >= 70 ? "#3b82f6" : overall >= 50 ? "#f59e0b" : "#ef4444"
+    };
+  }, [state.report?.score]);
+}
+function useFluxViolations(filter) {
+  const { state } = useFlux();
+  return useMemo2(() => {
+    let violations = state.violations;
+    if (filter?.severity) {
+      violations = violations.filter((v) => v.severity === filter.severity);
+    }
+    if (filter?.ruleId) {
+      violations = violations.filter((v) => v.ruleId === filter.ruleId);
+    }
+    if (filter?.category) {
+      const prefixMap = {
+        efficiency: ["E1", "E2", "E3", "E4", "E5"],
+        caching: ["C1", "C2", "C3", "C4"],
+        patterns: ["P1", "P2", "P3", "P4"]
+      };
+      const allowed = prefixMap[filter.category] ?? [];
+      violations = violations.filter((v) => allowed.includes(v.ruleId));
+    }
+    return violations;
+  }, [state.violations, filter?.severity, filter?.ruleId, filter?.category]);
+}
+function useFluxRequests(filter) {
+  const { state } = useFlux();
+  return useMemo2(() => {
+    let requests = state.requests;
+    if (filter?.type) {
+      requests = requests.filter((r) => r.type === filter.type);
+    }
+    if (filter?.method) {
+      requests = requests.filter((r) => r.method === filter.method);
+    }
+    if (filter?.minDuration) {
+      requests = requests.filter((r) => (r.duration ?? 0) >= (filter.minDuration ?? 0));
+    }
+    return requests;
+  }, [state.requests, filter?.type, filter?.method, filter?.minDuration]);
+}
+function useFluxReport() {
+  const { state } = useFlux();
+  return state.report;
+}
+function useFluxScanning() {
+  const { bridge, state } = useFlux();
+  return useMemo2(
+    () => ({
+      scanning: state.scanning,
+      elapsed: state.elapsed,
+      requestCount: state.requests.length,
+      start: () => bridge.start(),
+      stop: () => bridge.stop(),
+      reset: () => bridge.reset()
+    }),
+    [bridge, state.scanning, state.elapsed, state.requests.length]
+  );
+}
+
+// src/integrations/tanstack.ts
+function wrapQueryClient(queryClient, bridge) {
+  const _bridge = bridge ?? getGlobalBridge();
+  try {
+    const qc = queryClient;
+    if (typeof qc.getQueryCache === "function") {
+      const cache = qc.getQueryCache();
+      if (typeof cache.subscribe === "function") {
+        cache.subscribe((event) => {
+          if (!event.query) return;
+          const { query } = event;
+          const eventType = event.type;
+          if (eventType === "added" || eventType === "updated") {
+            _bridge.captureQueryEvent({
+              type: eventType === "added" ? "query-added" : "query-updated",
+              queryKey: query.queryKey,
+              state: {
+                status: query.state.status,
+                fetchStatus: query.state.fetchStatus,
+                dataUpdatedAt: query.state.dataUpdatedAt
+              },
+              options: {
+                staleTime: query.options.staleTime,
+                gcTime: query.options.gcTime,
+                refetchInterval: query.options.refetchInterval,
+                enabled: query.options.enabled,
+                retry: query.options.retry
+              }
+            });
+          } else if (eventType === "removed") {
+            _bridge.captureQueryEvent({
+              type: "query-removed",
+              queryKey: query.queryKey
+            });
+          }
+        });
+      }
+    }
+  } catch (err) {
+    console.warn("[FluxAPI] Failed to instrument QueryClient:", err);
+  }
+  return queryClient;
+}
+function extractQueryMetrics(queryClient) {
+  const metrics = {
+    uniqueQueries: 0,
+    queriesWithoutStaleTime: 0,
+    pollingQueries: 0,
+    noRetryQueries: 0,
+    avgStaleTime: 0
+  };
+  try {
+    if (typeof queryClient.getQueryCache !== "function") return metrics;
+    const cache = queryClient.getQueryCache();
+    const queries = cache.getAll?.() ?? [];
+    metrics.uniqueQueries = queries.length;
+    let totalStaleTime = 0;
+    let staleTimeCount = 0;
+    queries.forEach((q) => {
+      const opts = q.options ?? {};
+      if (!opts.staleTime || opts.staleTime === 0) {
+        metrics.queriesWithoutStaleTime++;
+      } else {
+        totalStaleTime += opts.staleTime;
+        staleTimeCount++;
+      }
+      if (opts.refetchInterval && opts.refetchInterval !== false) {
+        metrics.pollingQueries++;
+      }
+      if (opts.retry === false || opts.retry === 0) {
+        metrics.noRetryQueries++;
+      }
+    });
+    metrics.avgStaleTime = staleTimeCount > 0 ? Math.round(totalStaleTime / staleTimeCount) : 0;
+  } catch {
+  }
+  return metrics;
+}
+
+// src/integrations/swr.ts
+function createFluxSWRMiddleware(bridge) {
+  const _bridge = bridge ?? getGlobalBridge();
+  return (useSWRNext) => {
+    return (key, fetcher, config) => {
+      const resolvedKey = typeof key === "function" ? (() => {
+        try {
+          return key();
+        } catch {
+          return null;
+        }
+      })() : key;
+      const keyStr = resolvedKey ? typeof resolvedKey === "string" ? resolvedKey : JSON.stringify(resolvedKey) : "null";
+      _bridge.captureSWREvent({
+        type: "swr-request",
+        key: keyStr,
+        config: {
+          refreshInterval: config.refreshInterval,
+          dedupingInterval: config.dedupingInterval,
+          revalidateOnFocus: config.revalidateOnFocus,
+          errorRetryCount: config.errorRetryCount
+        }
+      });
+      const instrumentedFetcher = fetcher ? async (...args) => {
+        const start = Date.now();
+        try {
+          const result = await fetcher(...args);
+          _bridge.captureSWREvent({
+            type: "swr-success",
+            key: keyStr
+          });
+          return result;
+        } catch (err) {
+          _bridge.captureSWREvent({
+            type: "swr-error",
+            key: keyStr
+          });
+          throw err;
+        }
+      } : fetcher;
+      return useSWRNext(key, instrumentedFetcher, config);
+    };
+  };
+}
+var fluxSWRMiddleware = createFluxSWRMiddleware();
+export {
+  FluxDevTools,
+  FluxProvider,
+  ScannerBridge,
+  createFluxSWRMiddleware,
+  extractQueryMetrics,
+  fluxSWRMiddleware,
+  getGlobalBridge,
+  resetGlobalBridge,
+  useFlux,
+  useFluxBridge,
+  useFluxReport,
+  useFluxRequests,
+  useFluxScanning,
+  useFluxScore,
+  useFluxState,
+  useFluxViolations,
+  wrapQueryClient
+};