vite-plugin-smart-prefetch 0.1.0

package/dist/react/index.js

@@ -0,0 +1,758 @@
+// src/frameworks/react/usePrefetch.ts
+import { useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+
+// src/runtime/prefetch-manager.ts
+var PrefetchManager = class {
+  constructor(strategy = "hybrid", debug = false) {
+    this.config = null;
+    this.prefetched = /* @__PURE__ */ new Set();
+    this.observer = null;
+    this.currentSegment = null;
+    this.fallbackToDefault = true;
+    this.strategy = strategy;
+    this.debug = debug;
+  }
+  /**
+   * Initialize the prefetch manager
+   * Loads configuration and sets up observers
+   */
+  async init() {
+    if (this.debug) {
+      console.log("\u{1F680} Smart Prefetch Manager - Initializing...");
+      console.log("   Strategy:", this.strategy);
+      console.log("   Debug mode: enabled");
+    }
+    try {
+      if (this.debug) {
+        console.log("\u{1F4E5} Fetching prefetch-config.json...");
+      }
+      const response = await fetch("/prefetch-config.json");
+      if (!response.ok) {
+        if (response.status === 404) {
+          if (this.debug) {
+            console.warn("\u26A0\uFE0F  Prefetch config not found (404)");
+            console.log("   This is expected if:");
+            console.log("   1. You haven't built the app yet (run `pnpm build`)");
+            console.log("   2. The plugin failed to generate the config during build");
+            console.log("   Prefetch manager will be inactive until config is available");
+          }
+          return;
+        }
+        throw new Error(`Failed to load prefetch config: ${response.statusText}`);
+      }
+      this.config = await response.json();
+      if (this.debug && this.config) {
+        console.log("\u2705 Config loaded successfully");
+        console.log(`   Routes with prefetch rules: ${Object.keys(this.config.routes).length} ${typeof this.config.routes}`);
+        console.log(`   Environment: ${this.config.environment}`);
+        console.log(`   Config version: ${this.config.version || "N/A"}`);
+        console.groupCollapsed("\u{1F4CB} Available prefetch rules:");
+        Object.entries(this.config.routes).forEach(([source, data]) => {
+          console.log(
+            `${source} \u2192 ${data.prefetch.length} target(s)`,
+            data.prefetch.map((t) => t.route)
+          );
+        });
+        console.groupEnd();
+      }
+      if (this.strategy === "visible" || this.strategy === "hybrid") {
+        this.initIntersectionObserver();
+        if (this.debug) {
+          console.log("\u{1F441}\uFE0F  IntersectionObserver initialized for visibility-based prefetching");
+        }
+      }
+      if (this.debug) {
+        console.log("\u2705 Prefetch Manager fully initialized");
+        console.log("\u{1F4A1} Run window.__PREFETCH_DEBUG__() to see current state");
+        window.__PREFETCH_DEBUG__ = () => this.logDebugInfo();
+      }
+    } catch (error) {
+      if (this.debug) {
+        console.error("\u274C Failed to initialize Prefetch Manager:", error);
+      }
+    }
+  }
+  /**
+   * Set the user segment for segment-based prefetch rules
+   * @param segment - The user's segment (e.g., 'premium', 'free', 'admin')
+   * @param fallbackToDefault - Use default rules if segment rules unavailable
+   */
+  setSegment(segment, fallbackToDefault = true) {
+    this.currentSegment = segment;
+    this.fallbackToDefault = fallbackToDefault;
+    if (this.debug) {
+      console.log(`\u{1F504} Segment updated: ${segment || "(none)"}`);
+      console.log(`   Fallback to default: ${fallbackToDefault}`);
+    }
+  }
+  /**
+   * Get the current segment
+   */
+  getSegment() {
+    return this.currentSegment;
+  }
+  /**
+   * Prefetch routes based on current route
+   */
+  prefetch(currentRoute) {
+    const cleanRoute = currentRoute.split("?")[0].split("#")[0];
+    if (this.debug) {
+      console.log(`\u{1F4CD} Checking prefetch for route: ${currentRoute}`);
+      if (currentRoute !== cleanRoute) {
+        console.log(`   Clean route: ${cleanRoute}`);
+      }
+    }
+    if (!this.config) {
+      if (this.debug) {
+        console.warn("\u26A0\uFE0F  Config not loaded yet - cannot prefetch");
+        console.log("   Make sure the app was built with the plugin enabled");
+      }
+      return;
+    }
+    if (!this.shouldPrefetch()) {
+      if (this.debug) {
+        console.log("\u23ED\uFE0F  Skipping prefetch due to network conditions");
+      }
+      return;
+    }
+    let routeConfig = this.config.routes[cleanRoute] || this.config.routes[currentRoute];
+    const matchedRoute = routeConfig ? this.config.routes[cleanRoute] ? cleanRoute : currentRoute : null;
+    if (!routeConfig) {
+      if (this.debug) {
+        console.warn(`\u26A0\uFE0F  No prefetch rules configured for route: ${cleanRoute}`);
+        console.groupCollapsed("Available routes in config:");
+        Object.keys(this.config.routes).forEach((route) => {
+          const targets = this.config.routes[route].prefetch;
+          console.log(`   ${route} \u2192 ${targets.length} target(s)`, targets.map((t) => t.route));
+        });
+        console.groupEnd();
+        console.log(`\u{1F4A1} Tip: Make sure your manualRules key matches exactly: "${cleanRoute}"`);
+      }
+      return;
+    }
+    let prefetchTargets = routeConfig.prefetch;
+    let ruleSource = "default";
+    if (this.currentSegment && routeConfig.segments?.[this.currentSegment]) {
+      prefetchTargets = routeConfig.segments[this.currentSegment];
+      ruleSource = `segment (${this.currentSegment})`;
+    } else if (this.currentSegment && !routeConfig.segments?.[this.currentSegment] && !this.fallbackToDefault) {
+      if (this.debug) {
+        console.warn(`\u26A0\uFE0F  No prefetch rules for segment "${this.currentSegment}" and fallback disabled`);
+      }
+      return;
+    }
+    console.log(`\u2705 Found prefetch rule for: ${matchedRoute}`);
+    console.log(`   Total targets to prefetch: ${prefetchTargets.length}`);
+    console.log(`   Using: ${ruleSource} rules`);
+    console.log(`   Strategy: ${this.strategy}`);
+    if (this.debug) {
+      console.groupCollapsed(`\u{1F4CA} Prefetch Rules for: ${matchedRoute} (${ruleSource})`);
+      prefetchTargets.forEach((target, index) => {
+        console.log(`   ${index + 1}. ${target.route} (${target.priority} priority, ${(target.probability * 100).toFixed(1)}%)`);
+      });
+      console.groupEnd();
+    }
+    prefetchTargets.forEach((target) => {
+      this.prefetchTarget(target);
+    });
+  }
+  /**
+   * Prefetch a specific target
+   */
+  prefetchTarget(target) {
+    if (this.prefetched.has(target.route)) {
+      console.log(`   \u23ED\uFE0F  Already prefetched: ${target.route}`);
+      return;
+    }
+    console.log(`   \u{1F517} Prefetch target: ${target.route}, chunk: ${target.chunk}`);
+    try {
+      switch (this.strategy) {
+        case "auto":
+          this.injectPrefetchLink(target);
+          break;
+        case "hover":
+          break;
+        case "visible":
+          break;
+        case "idle":
+          this.prefetchOnIdle(target);
+          break;
+        case "hybrid":
+          this.prefetchHybrid(target);
+          break;
+        default:
+          console.warn(`\u26A0\uFE0F  Unknown strategy: ${this.strategy}`);
+      }
+    } catch (error) {
+      console.error(`\u274C Error prefetching ${target.route}:`, error);
+    }
+  }
+  /**
+   * Hybrid strategy: prioritize based on probability
+   * FOR TESTING: Fetch all priorities to verify chunks are correct
+   */
+  prefetchHybrid(target) {
+    if (target.priority === "high" || target.probability >= 0.7) {
+      console.log(`   \u26A1 High priority (${(target.probability * 100).toFixed(1)}%) - Prefetching immediately`);
+      this.injectPrefetchLink(target);
+    } else if (target.priority === "medium" || target.probability >= 0.4) {
+      console.log(`   \u23F1\uFE0F  Medium priority (${(target.probability * 100).toFixed(1)}%) - Fetching immediately (TESTING MODE)`);
+      this.injectPrefetchLink(target);
+    } else {
+      console.log(`   \u{1F514} Low priority (${(target.probability * 100).toFixed(1)}%) - Fetching immediately (TESTING MODE)`);
+      this.injectPrefetchLink(target);
+    }
+  }
+  /**
+   * Prefetch during idle time
+   */
+  prefetchOnIdle(target) {
+    if ("requestIdleCallback" in window) {
+      requestIdleCallback(() => {
+        this.injectPrefetchLink(target);
+      });
+    } else {
+      setTimeout(() => {
+        this.injectPrefetchLink(target);
+      }, 1e3);
+    }
+  }
+  /**
+   * Resolve chunk path for the current environment
+   * In production: chunks are built with hashes (e.g., chunks/Privacy-D5qJZu-O.js or js/index-CJMMxcQV.js)
+   * In dev mode: need to resolve to the actual module or use a proxy
+   */
+  resolveChunkPath(chunkPath, route) {
+    const isDev = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
+    if (!isDev) {
+      return `/${chunkPath}`;
+    }
+    let componentName = null;
+    const match1 = chunkPath.match(/\/([A-Z][a-zA-Z]*)-[a-zA-Z0-9_-]+\.js$/);
+    if (match1) {
+      componentName = match1[1];
+    }
+    const match2 = chunkPath.match(/\/(index)-[a-zA-Z0-9_-]+\.js$/);
+    if (match2) {
+      componentName = match2[1];
+    }
+    if (componentName) {
+      const sourceFile = componentName === "index" ? "/src/main.tsx" : `/src/pages/${componentName}.tsx`;
+      if (this.debug) {
+        console.log(`   \u{1F4CD} Dev mode: Resolved ${chunkPath} \u2192 ${sourceFile}`);
+      }
+      return sourceFile;
+    }
+    if (this.debug) {
+      console.log(`   \u26A0\uFE0F  Dev mode: Could not extract component name from ${chunkPath}, using as-is`);
+    }
+    return `/${chunkPath}`;
+  }
+  /**
+   * Inject prefetch link into DOM
+   */
+  injectPrefetchLink(target) {
+    if (this.prefetched.has(target.route)) {
+      if (this.debug) {
+        console.log(`   \u23ED\uFE0F  Already prefetched: ${target.route}`);
+      }
+      return;
+    }
+    const chunkPath = this.resolveChunkPath(target.chunk, target.route);
+    const link = document.createElement("link");
+    link.rel = "modulepreload";
+    link.href = chunkPath;
+    link.setAttribute("data-prefetch-route", target.route);
+    link.setAttribute("data-prefetch-priority", target.priority);
+    link.setAttribute("data-prefetch-probability", target.probability.toString());
+    console.groupCollapsed(`\u{1F517} PREFETCH: ${target.route}`);
+    console.log(`   \u{1F4C4} Page/Route: ${target.route}`);
+    console.log(`   \u{1F4E6} Main Chunk: ${target.chunk}`);
+    console.log(`   \u{1F310} Resolved URL: ${window.location.origin}${chunkPath}`);
+    console.log(`   \u2B50 Priority: ${target.priority}`);
+    console.log(`   \u{1F4CA} Probability: ${(target.probability * 100).toFixed(1)}%`);
+    let totalChunksForThisRoute = 1;
+    const injectedLinks = [];
+    try {
+      document.head.appendChild(link);
+      injectedLinks.push(target.chunk);
+      console.log(`   \u2705 Main chunk link injected: ${target.chunk}`);
+    } catch (e) {
+      console.error(`   \u274C Failed to inject main chunk link:`, e);
+      console.groupEnd();
+      return;
+    }
+    if (target.imports && target.imports.length > 0) {
+      console.log(`   \u{1F4DA} Dependencies (${target.imports.length}):`);
+      target.imports.forEach((importChunk, index) => {
+        const importId = `import:${importChunk}`;
+        if (this.prefetched.has(importId)) {
+          console.log(`      ${index + 1}. ${importChunk} (already prefetched)`);
+          return;
+        }
+        try {
+          const importLink = document.createElement("link");
+          importLink.rel = "modulepreload";
+          importLink.href = `/${importChunk}`;
+          importLink.setAttribute("data-prefetch-import", "true");
+          importLink.setAttribute("data-prefetch-parent", target.route);
+          document.head.appendChild(importLink);
+          this.prefetched.add(importId);
+          totalChunksForThisRoute++;
+          injectedLinks.push(importChunk);
+          console.log(`      ${index + 1}. ${importChunk} \u2705`);
+        } catch (e) {
+          console.error(`      ${index + 1}. ${importChunk} \u274C Error:`, e);
+        }
+      });
+    }
+    this.prefetched.add(target.route);
+    console.log(`   \u2705 Total chunks injected: ${totalChunksForThisRoute}`);
+    console.log(`   \u{1F4C8} Overall prefetched count: ${this.prefetched.size}`);
+    if (this.debug) {
+      console.log(`   DOM Status: ${injectedLinks.length} link tag(s) added to document.head`);
+      console.log(`   Injected URLs:`, injectedLinks.map((c) => `/${c}`));
+      setTimeout(() => {
+        const addedLink = document.querySelector(`link[data-prefetch-route="${target.route}"]`);
+        if (addedLink) {
+          console.log(`   \u2714\uFE0F  DOM Verification: Link exists`);
+          console.log(`   href:`, addedLink.href);
+          console.log(`   as:`, addedLink.getAttribute("as"));
+          console.log(`   rel:`, addedLink.rel);
+          if (addedLink.relList?.contains("modulepreload")) {
+            console.log(`   \u{1F504} Link has modulepreload rel (will fetch)`);
+          }
+        } else {
+          console.error(`   \u274C ERROR: Link tag not found in DOM after 100ms`);
+        }
+        console.log(`   \u{1F4CB} Verifying all injected links in head:`);
+        document.querySelectorAll("link[data-prefetch-route], link[data-prefetch-import]").forEach((el, idx) => {
+          const isMain = el.hasAttribute("data-prefetch-route");
+          const parent = isMain ? el.getAttribute("data-prefetch-route") : el.getAttribute("data-prefetch-parent");
+          console.log(`      ${idx + 1}. ${el.href} (parent: ${parent})`);
+        });
+      }, 50);
+    }
+    console.groupEnd();
+  }
+  /**
+   * Check if prefetching should be performed based on network conditions
+   */
+  shouldPrefetch() {
+    const nav = navigator;
+    const connection = nav.connection || nav.mozConnection || nav.webkitConnection;
+    if (!connection) {
+      return true;
+    }
+    if (connection.saveData) {
+      if (this.debug) console.log("   \u26A0\uFE0F  Data Saver enabled");
+      return false;
+    }
+    const slowConnections = ["slow-2g", "2g"];
+    if (slowConnections.includes(connection.effectiveType)) {
+      if (this.debug) console.log(`   \u26A0\uFE0F  Slow connection: ${connection.effectiveType}`);
+      return false;
+    }
+    if (connection.type === "cellular" && connection.effectiveType !== "4g") {
+      if (this.debug) console.log("   \u26A0\uFE0F  Metered connection");
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Initialize IntersectionObserver for 'visible' strategy
+   */
+  initIntersectionObserver() {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const route = entry.target.getAttribute("data-prefetch-route");
+            if (route && this.config) {
+              Object.values(this.config.routes).forEach((routeConfig) => {
+                const target = routeConfig.prefetch.find((t) => t.route === route);
+                if (target) {
+                  this.injectPrefetchLink(target);
+                }
+              });
+            }
+          }
+        });
+      },
+      {
+        rootMargin: "50px"
+        // Start prefetch 50px before element is visible
+      }
+    );
+  }
+  /**
+   * Observe an element for visibility-based prefetching
+   */
+  observeLink(element, route) {
+    if (this.observer) {
+      element.setAttribute("data-prefetch-route", route);
+      this.observer.observe(element);
+    }
+  }
+  /**
+   * Manually trigger prefetch for a specific route
+   * Useful for hover events
+   */
+  prefetchRoute(route) {
+    if (!this.config) return;
+    Object.values(this.config.routes).forEach((routeConfig) => {
+      const target = routeConfig.prefetch.find((t) => t.route === route);
+      if (target) {
+        this.injectPrefetchLink(target);
+      }
+    });
+  }
+  /**
+   * Get prefetch statistics
+   */
+  getStats() {
+    return {
+      totalPrefetched: this.prefetched.size,
+      prefetchedRoutes: Array.from(this.prefetched),
+      configLoaded: this.config !== null,
+      strategy: this.strategy
+    };
+  }
+  /**
+   * Check if a route has been prefetched
+   */
+  isPrefetched(route) {
+    return this.prefetched.has(route);
+  }
+  /**
+   * Clear all prefetch state
+   */
+  clear() {
+    this.prefetched.clear();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  /**
+   * Get all prefetch link elements currently in the DOM
+   */
+  getActivePrefetchLinks() {
+    return Array.from(document.querySelectorAll('link[rel="modulepreload"][data-prefetch-route]'));
+  }
+  /**
+   * Log current state for debugging
+   */
+  logDebugInfo() {
+    console.group("\u{1F41B} Smart Prefetch Debug Info");
+    console.log("Strategy:", this.strategy);
+    console.log("Config loaded:", this.config !== null);
+    console.log("Total prefetch entries:", this.prefetched.size);
+    console.log("Prefetched items:", Array.from(this.prefetched));
+    const links = this.getActivePrefetchLinks();
+    console.log("\n\u{1F517} Active Link Tags in DOM:", links.length);
+    if (links.length > 0) {
+      console.table(links.map((link) => ({
+        route: link.getAttribute("data-prefetch-route"),
+        chunk: link.href.replace(window.location.origin + "/", ""),
+        priority: link.getAttribute("data-prefetch-priority"),
+        probability: link.getAttribute("data-prefetch-probability")
+      })));
+    }
+    if (this.config) {
+      console.log("\n\u{1F4CA} Configuration Summary:");
+      console.log("Available routes in config:", Object.keys(this.config.routes).length);
+      console.log("Config environment:", this.config.environment);
+      console.group("\u{1F4CB} All configured routes with prefetch targets:");
+      Object.entries(this.config.routes).forEach(([route, data]) => {
+        console.group(`${route}`);
+        data.prefetch.forEach((t, idx) => {
+          console.log(`  ${idx + 1}. ${t.route} (${t.priority}, ${(t.probability * 100).toFixed(1)}%) \u2192 ${t.chunk}`);
+        });
+        console.groupEnd();
+      });
+      console.groupEnd();
+      console.log("\n\u{1F4A1} Current location:", window.location.pathname);
+      console.log("\u{1F4A1} Clean route:", window.location.pathname.split("?")[0].split("#")[0]);
+    }
+    console.groupEnd();
+  }
+  /**
+   * Log all prefetched pages and chunks (summary view)
+   */
+  logPrefetchSummary() {
+    const links = this.getActivePrefetchLinks();
+    const routeLinks = links.filter((l) => !l.getAttribute("data-prefetch-import"));
+    const dependencyLinks = links.filter((l) => l.getAttribute("data-prefetch-import"));
+    console.group("\u{1F4CA} PREFETCH SUMMARY");
+    console.log(`Total pages prefetched: ${routeLinks.length}`);
+    console.log(`Total dependency chunks: ${dependencyLinks.length}`);
+    console.log(`Total overall entries: ${this.prefetched.size}`);
+    if (routeLinks.length > 0) {
+      console.group("\u{1F4C4} Pages/Routes Prefetched:");
+      const pageTable = routeLinks.map((link) => ({
+        route: link.getAttribute("data-prefetch-route"),
+        chunk: link.href.replace(window.location.origin + "/", ""),
+        priority: link.getAttribute("data-prefetch-priority"),
+        probability: `${link.getAttribute("data-prefetch-probability")}`
+      }));
+      console.table(pageTable);
+      console.groupEnd();
+    }
+    if (dependencyLinks.length > 0) {
+      console.group("\u{1F4E6} Dependency Chunks Prefetched:");
+      const depsTable = dependencyLinks.map((link) => ({
+        parentRoute: link.getAttribute("data-prefetch-parent"),
+        chunk: link.href.replace(window.location.origin + "/", "")
+      }));
+      console.table(depsTable);
+      console.groupEnd();
+    }
+    console.groupEnd();
+  }
+};
+
+// src/frameworks/react/usePrefetch.ts
+var managerInstance = null;
+function usePrefetch() {
+  const location = useLocation();
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      const config = window.__SMART_PREFETCH__ || {};
+      const strategy = config.strategy || "hybrid";
+      const debug = config.debug || false;
+      managerInstance = new PrefetchManager(strategy, debug);
+      managerInstance.init();
+      window.__FARMART_PREFETCH_MANAGER__ = managerInstance;
+      initialized.current = true;
+      if (debug) {
+        console.log("\u2705 usePrefetch initialized");
+        console.log("\u2705 Prefetch manager exposed as window.__FARMART_PREFETCH_MANAGER__");
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (managerInstance) {
+      managerInstance.prefetch(location.pathname);
+    }
+  }, [location.pathname]);
+  return managerInstance;
+}
+function getPrefetchManager() {
+  return managerInstance;
+}
+
+// src/frameworks/react/PrefetchLink.tsx
+import React, { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { Link } from "react-router-dom";
+import { jsx } from "react/jsx-runtime";
+var PrefetchLink = React.forwardRef(
+  ({ prefetch, to, children, onMouseEnter, ...props }, forwardedRef) => {
+    const linkRef = useRef2(null);
+    const manager = getPrefetchManager();
+    const route = typeof to === "string" ? to : to.pathname || "";
+    useEffect2(() => {
+      if (prefetch === "visible" && linkRef.current && manager) {
+        manager.observeLink(linkRef.current, route);
+      }
+    }, [prefetch, route, manager]);
+    const handleMouseEnter = (e) => {
+      if (prefetch === "hover" && manager) {
+        manager.prefetchRoute(route);
+      }
+      if (onMouseEnter) {
+        onMouseEnter(e);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Link,
+      {
+        ref: (node) => {
+          if (node) {
+            linkRef.current = node;
+            if (typeof forwardedRef === "function") {
+              forwardedRef(node);
+            } else if (forwardedRef) {
+              forwardedRef.current = node;
+            }
+          }
+        },
+        to,
+        onMouseEnter: handleMouseEnter,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PrefetchLink.displayName = "PrefetchLink";
+
+// src/frameworks/react/PrefetchDebugPanel.tsx
+import { useEffect as useEffect3, useState } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PrefetchDebugPanel({
+  manager,
+  position = "bottom-right",
+  defaultOpen = false
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [stats, setStats] = useState(null);
+  const [links, setLinks] = useState([]);
+  useEffect3(() => {
+    if (!manager) return;
+    const updateStats = () => {
+      setStats(manager.getStats());
+      const linkElements = manager.getActivePrefetchLinks();
+      setLinks(
+        linkElements.map((link) => ({
+          route: link.getAttribute("data-prefetch-route") || "",
+          href: link.href,
+          priority: link.getAttribute("data-prefetch-priority") || "",
+          probability: link.getAttribute("data-prefetch-probability") || ""
+        }))
+      );
+    };
+    updateStats();
+    const interval = setInterval(updateStats, 1e3);
+    return () => clearInterval(interval);
+  }, [manager]);
+  if (!manager) {
+    return null;
+  }
+  const positionStyles = {
+    "top-left": { top: 10, left: 10 },
+    "top-right": { top: 10, right: 10 },
+    "bottom-left": { bottom: 10, left: 10 },
+    "bottom-right": { bottom: 10, right: 10 }
+  };
+  const containerStyle = {
+    position: "fixed",
+    ...positionStyles[position],
+    zIndex: 99999,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "12px"
+  };
+  const buttonStyle = {
+    background: "#4CAF50",
+    color: "white",
+    border: "none",
+    borderRadius: "50%",
+    width: "48px",
+    height: "48px",
+    cursor: "pointer",
+    boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "20px"
+  };
+  const panelStyle = {
+    background: "white",
+    border: "1px solid #ddd",
+    borderRadius: "8px",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+    padding: "12px",
+    minWidth: "320px",
+    maxWidth: "400px",
+    maxHeight: "500px",
+    overflow: "auto",
+    marginBottom: "8px"
+  };
+  const headerStyle = {
+    fontWeight: "bold",
+    marginBottom: "8px",
+    color: "#333",
+    borderBottom: "2px solid #4CAF50",
+    paddingBottom: "4px"
+  };
+  const statStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    padding: "4px 0",
+    borderBottom: "1px solid #eee"
+  };
+  const linkStyle = {
+    background: "#f5f5f5",
+    padding: "8px",
+    borderRadius: "4px",
+    marginBottom: "8px",
+    fontSize: "11px"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+    isOpen && stats && /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
+      /* @__PURE__ */ jsx2("div", { style: headerStyle, children: "\u{1F680} Smart Prefetch Debug" }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
+          /* @__PURE__ */ jsx2("span", { children: "Strategy:" }),
+          /* @__PURE__ */ jsx2("strong", { children: stats.strategy })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
+          /* @__PURE__ */ jsx2("span", { children: "Config Loaded:" }),
+          /* @__PURE__ */ jsx2("strong", { children: stats.configLoaded ? "\u2705" : "\u274C" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
+          /* @__PURE__ */ jsx2("span", { children: "Total Prefetched:" }),
+          /* @__PURE__ */ jsx2("strong", { children: stats.totalPrefetched })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: statStyle, children: [
+          /* @__PURE__ */ jsx2("span", { children: "Link Tags in DOM:" }),
+          /* @__PURE__ */ jsx2("strong", { children: links.length })
+        ] })
+      ] }),
+      stats.prefetchedRoutes.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx2("div", { style: { ...headerStyle, fontSize: "11px" }, children: "Prefetched Routes:" }),
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: "11px", color: "#666", marginBottom: "8px" }, children: stats.prefetchedRoutes.join(", ") })
+      ] }),
+      links.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx2("div", { style: { ...headerStyle, fontSize: "11px" }, children: "Active Link Tags:" }),
+        links.map((link, i) => /* @__PURE__ */ jsxs("div", { style: linkStyle, children: [
+          /* @__PURE__ */ jsx2("div", { children: /* @__PURE__ */ jsx2("strong", { children: link.route }) }),
+          /* @__PURE__ */ jsxs("div", { style: { color: "#666", marginTop: "4px" }, children: [
+            "Priority: ",
+            link.priority,
+            " | Prob: ",
+            (parseFloat(link.probability) * 100).toFixed(1),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx2("div", { style: { color: "#999", marginTop: "2px", wordBreak: "break-all" }, children: link.href.split("/").pop() })
+        ] }, i))
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => {
+            manager.logDebugInfo();
+          },
+          style: {
+            width: "100%",
+            padding: "8px",
+            background: "#2196F3",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            marginTop: "8px"
+          },
+          children: "Log Debug Info to Console"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        style: buttonStyle,
+        onClick: () => setIsOpen(!isOpen),
+        title: "Smart Prefetch Debug Panel",
+        children: "\u{1F517}"
+      }
+    )
+  ] });
+}
+export {
+  PrefetchDebugPanel,
+  PrefetchLink,
+  getPrefetchManager,
+  usePrefetch
+};
+//# sourceMappingURL=index.js.map