one/dist/esm/vite/DevHead.native.js

One is a new React Framework that makes Vite serve both native and web.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { VIRTUAL_SSR_CSS_HREF } from "../constants.native.js";
var ROUTE_HMR_SCRIPT = 'import { createHotContext } from "/@vite/client"; const hot = createHotContext("/__one_route_hmr"); hot.on("one:route-update", (data) => { if (window.__oneRouteCache) { if (data?.file) { window.__oneRouteCache.clearFile(data.file); } else { window.__oneRouteCache.clear(); } } window.dispatchEvent(new CustomEvent("one-hmr-update")); });',
  LOADER_HMR_SCRIPT = 'import { createHotContext } from "/@vite/client"; const hot = createHotContext("/__one_loader_hmr"); hot.on("one:loader-data-update", async (data) => { if (data?.routePaths && window.__oneRefetchLoader) { const currentPath = window.location.pathname.replace(/\\/$/, "") || "/"; for (const routePath of data.routePaths) { if (routePath === currentPath) { try { await window.__oneRefetchLoader(routePath); } catch (err) { console.error("[one] Error refetching loader:", err); } } } } });',
  REACT_REFRESH_SCRIPT = 'import { injectIntoGlobalHook } from "/@react-refresh"; injectIntoGlobalHook(window); window.$RefreshReg$ = () => {}; window.$RefreshSig$ = () => (type) => type;',
  ONE_DEVTOOLS_SCRIPT = `
(function() {
  try {
    var host = null;
    var shadow = null;
    var spotlight = null;
    var panel = null;
    var activeTab = 'seo';
    var isDragging = false;
    var dragOffset = { x: 0, y: 0 };
    var panelPos = { x: 20, y: 20 };
    var snappedEdge = { h: null, v: null };

    var LOGO_SVG = '<svg width="24" height="24" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="#FCD34D" stroke="#222" stroke-width="2"/><circle cx="50" cy="35" r="16" fill="white"/><text x="50" y="41" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="bold" fill="#222">1</text></svg>';

    function escapeHtml(str) {
      if (!str) return '';
      return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    function createHost() {
      if (host) return;
      host = document.createElement('div');
      host.id = 'one-devtools';
      shadow = host.attachShadow({ mode: 'open' });

      var css = \`
        * { box-sizing: border-box; margin: 0; padding: 0; }

        .spotlight {
          position: fixed;
          inset: 0;
          z-index: 100000;
          display: none;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(8px);
          background: rgba(0,0,0,0.4);
          opacity: 0;
          transition: opacity 0.12s ease-out;
        }
        .spotlight.visible { display: flex; opacity: 1; }

        .spotlight-box {
          background: #1a1a1a;
          border-radius: 12px;
          width: 320px;
          max-width: 90vw;
          overflow: hidden;
          box-shadow: 0 16px 48px rgba(0,0,0,0.5);
          transform: scale(0.96);
          opacity: 0;
          transition: transform 0.12s ease-out, opacity 0.12s ease-out;
        }
        .spotlight.visible .spotlight-box { transform: scale(1); opacity: 1; }

        .spotlight-header {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          border-bottom: 1px solid #252525;
          gap: 10px;
        }
        .spotlight-header svg { width: 20px; height: 20px; flex-shrink: 0; }
        .spotlight-header-title { font: 13px system-ui, sans-serif; color: #ccc; flex: 1; }
        .spotlight-header-version { font: 11px system-ui, sans-serif; color: #666; }

        .spotlight-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 16px;
          color: #ccc;
          font: 13px system-ui, sans-serif;
          cursor: pointer;
          transition: background 0.1s;
          border-bottom: 1px solid #252525;
        }
        .spotlight-item:last-child { border-bottom: none; }
        .spotlight-item:hover { background: #252525; color: #fff; }
        .spotlight-item .key {
          background: #333;
          color: #888;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 11px;
          margin-left: auto;
        }

        .panel {
          position: fixed;
          width: 420px;
          max-width: calc(100vw - 40px);
          max-height: calc(100vh - 40px);
          background: #161616;
          border-radius: 10px;
          box-shadow: 0 8px 32px rgba(0,0,0,0.4);
          z-index: 99998;
          display: none;
          flex-direction: column;
          overflow: hidden;
          font: 13px system-ui, sans-serif;
          color: #ccc;
        }
        .panel.visible { display: flex; }

        .panel-header {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          background: #1a1a1a;
          cursor: grab;
          user-select: none;
          gap: 8px;
        }
        .panel-header:active { cursor: grabbing; }
        .panel-header svg { width: 18px; height: 18px; }
        .panel-title { font-weight: 500; color: #999; font-size: 12px; flex: 1; }
        .panel-close {
          background: none;
          border: none;
          color: #666;
          cursor: pointer;
          padding: 4px;
          font-size: 16px;
          line-height: 1;
        }
        .panel-close:hover { color: #fff; }

        .tabs {
          display: flex;
          background: #1a1a1a;
          padding: 0 8px;
          gap: 2px;
          overflow-x: auto;
        }
        .tab {
          padding: 8px 12px;
          background: none;
          border: none;
          color: #666;
          font: 12px system-ui, sans-serif;
          cursor: pointer;
          border-bottom: 2px solid transparent;
          transition: all 0.1s;
        }
        .tab:hover { color: #999; }
        .tab.active { color: #fff; border-bottom-color: #666; }

        .content {
          flex: 1;
          overflow-y: auto;
          padding: 12px;
          min-height: 200px;
          max-height: calc(100vh - 140px);
        }

        .section { margin-bottom: 12px; }
        .section-title { font-size: 11px; color: #666; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

        .info-row {
          display: flex;
          gap: 12px;
          padding: 8px 0;
          border-bottom: 1px solid #222;
        }
        .info-row:last-child { border-bottom: none; }
        .info-label { color: #666; font-size: 11px; width: 90px; flex-shrink: 0; padding-top: 1px; }
        .info-value { color: #ccc; font-family: monospace; font-size: 12px; word-break: break-word; line-height: 1.4; flex: 1; }

        .badge {
          display: inline-block;
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 10px;
          text-transform: uppercase;
        }
        .badge-error { background: #3a2020; color: #f87171; }
        .badge-warn { background: #3a3520; color: #fbbf24; }
        .badge-info { background: #202a3a; color: #60a5fa; }
        .badge-success { background: #1a3a20; color: #4ade80; }

        .empty { text-align: center; color: #555; padding: 24px; }

        .error-item {
          background: #1e1e1e;
          border-radius: 6px;
          padding: 10px;
          margin-bottom: 8px;
          border-left: 3px solid #666;
        }
        .error-item.error { border-left-color: #f87171; }
        .error-msg { color: #f87171; font-family: monospace; font-size: 12px; margin-top: 6px; }

        .timing-bar {
          height: 16px;
          background: #252525;
          border-radius: 4px;
          overflow: hidden;
          display: flex;
          margin: 4px 0;
        }
        .timing-segment { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
        .timing-module { background: #555; }
        .timing-exec { background: #888; }

        .preview-card {
          background: #1e1e1e;
          border-radius: 6px;
          padding: 10px;
          margin-bottom: 10px;
        }
        .preview-title { font-size: 11px; color: #666; margin-bottom: 6px; }

        .issue-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 6px 0;
          font-size: 12px;
        }
        .issue-icon { font-size: 10px; }
      \`;

      shadow.innerHTML = '<style>' + css + '</style><div class="spotlight" id="spotlight"><div class="spotlight-box" id="spotlight-box"></div></div><div class="panel" id="panel"></div>';
      document.body.appendChild(host);

      setupSpotlight();
      setupPanel();
      setupKeyboard();
    }

    function setupSpotlight() {
      spotlight = shadow.getElementById('spotlight');
      var box = shadow.getElementById('spotlight-box');

      var items = [
        { id: 'seo', name: 'SEO Preview', key: '\u2325S' },
        { id: 'route', name: 'Route Info', key: '\u2325R' },
        { id: 'loader', name: 'Loader Timing', key: '\u2325L' },
        { id: 'errors', name: 'Errors', key: '\u2325E' },
      ];

      var header = '<div class="spotlight-header">' + LOGO_SVG + '<span class="spotlight-header-title">Dev Tools</span><span class="spotlight-header-version">v1.2.57</span></div>';
      box.innerHTML = header + items.map(function(item) {
        return '<div class="spotlight-item" data-tab="' + item.id + '"><span>' + item.name + '</span><span class="key">' + item.key + '</span></div>';
      }).join('');

      box.addEventListener('click', function(e) {
        var item = e.target.closest('.spotlight-item');
        if (item) {
          activeTab = item.dataset.tab;
          hideSpotlight();
          showPanel();
        }
      });

      spotlight.addEventListener('click', function(e) {
        if (e.target === spotlight) hideSpotlight();
      });
    }

    function setupPanel() {
      panel = shadow.getElementById('panel');
      panel.innerHTML = '<div class="panel-header" id="panel-header">' + LOGO_SVG + '<span class="panel-title">DevTools</span><button class="panel-close" id="panel-close">\xD7</button></div><div class="tabs" id="tabs"><button class="tab active" data-tab="seo">SEO</button><button class="tab" data-tab="route">Route</button><button class="tab" data-tab="loader">Loader</button><button class="tab" data-tab="errors">Errors</button></div><div class="content" id="content"></div>';

      shadow.getElementById('panel-close').addEventListener('click', hidePanel);

      var tabs = shadow.getElementById('tabs');
      tabs.addEventListener('click', function(e) {
        var tab = e.target.closest('.tab');
        if (tab) {
          activeTab = tab.dataset.tab;
          updateTabs();
          updateContent();
        }
      });

      setupDrag();
    }

    function setupDrag() {
      var header = shadow.getElementById('panel-header');

      header.addEventListener('mousedown', function(e) {
        if (e.target.closest('.panel-close')) return;
        isDragging = true;
        var rect = panel.getBoundingClientRect();
        dragOffset.x = e.clientX - rect.left;
        dragOffset.y = e.clientY - rect.top;
        // Store current position before resetting snap state
        panelPos.x = rect.left;
        panelPos.y = rect.top;
        snappedEdge = { h: null, v: null };
      });

      document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
        var x = e.clientX - dragOffset.x;
        var y = e.clientY - dragOffset.y;
        var snapDist = 20;
        var w = window.innerWidth;
        var h = window.innerHeight;
        var pw = panel.offsetWidth;
        var ph = panel.offsetHeight;
        var pad = 10;

        var snapH = null;
        var snapV = null;

        if (x < snapDist) { snapH = 'left'; }
        else if (x + pw > w - snapDist) { snapH = 'right'; }
        if (y < snapDist) { snapV = 'top'; }
        else if (y + ph > h - snapDist) { snapV = 'bottom'; }

        snappedEdge = { h: snapH, v: snapV };

        // Apply horizontal positioning
        if (snapH === 'left') {
          panel.style.left = pad + 'px';
          panel.style.right = 'auto';
        } else if (snapH === 'right') {
          panel.style.left = 'auto';
          panel.style.right = pad + 'px';
        } else {
          panel.style.left = x + 'px';
          panel.style.right = 'auto';
          panelPos.x = x;
        }

        // Apply vertical positioning
        if (snapV === 'top') {
          panel.style.top = pad + 'px';
          panel.style.bottom = 'auto';
        } else if (snapV === 'bottom') {
          panel.style.top = 'auto';
          panel.style.bottom = pad + 'px';
        } else {
          panel.style.top = y + 'px';
          panel.style.bottom = 'auto';
          panelPos.y = y;
        }
      });

      document.addEventListener('mouseup', function() {
        isDragging = false;
      });
    }

    function setupKeyboard() {
      document.addEventListener('keydown', function(e) {
        if (e.altKey && e.code === 'Space') {
          e.preventDefault();
          toggleSpotlight();
        } else if (e.altKey) {
          var tabMap = { KeyS: 'seo', KeyR: 'route', KeyL: 'loader', KeyE: 'errors' };
          var tab = tabMap[e.code];
          if (tab) {
            e.preventDefault();
            activeTab = tab;
            hideSpotlight();
            showPanel();
          }
        } else if (e.code === 'Escape') {
          if (spotlight.classList.contains('visible')) hideSpotlight();
          else if (panel.classList.contains('visible')) hidePanel();
        }
      });
    }

    function toggleSpotlight() {
      if (spotlight.classList.contains('visible')) hideSpotlight();
      else showSpotlight();
    }

    function showSpotlight() {
      if (!host) createHost();
      spotlight.classList.add('visible');
    }

    function hideSpotlight() {
      spotlight.classList.remove('visible');
    }

    function showPanel() {
      if (!host) createHost();
      var pad = 10;
      // Apply horizontal positioning based on snap state
      if (snappedEdge.h === 'left') {
        panel.style.left = pad + 'px';
        panel.style.right = 'auto';
      } else if (snappedEdge.h === 'right') {
        panel.style.left = 'auto';
        panel.style.right = pad + 'px';
      } else {
        panel.style.left = panelPos.x + 'px';
        panel.style.right = 'auto';
      }
      // Apply vertical positioning based on snap state
      if (snappedEdge.v === 'top') {
        panel.style.top = pad + 'px';
        panel.style.bottom = 'auto';
      } else if (snappedEdge.v === 'bottom') {
        panel.style.top = 'auto';
        panel.style.bottom = pad + 'px';
      } else {
        panel.style.top = panelPos.y + 'px';
        panel.style.bottom = 'auto';
      }
      panel.classList.add('visible');
      updateTabs();
      updateContent();
    }

    function hidePanel() {
      panel.classList.remove('visible');
    }

    function updateTabs() {
      shadow.querySelectorAll('.tab').forEach(function(t) {
        t.classList.toggle('active', t.dataset.tab === activeTab);
      });
    }

    function updateContent() {
      var content = shadow.getElementById('content');
      if (activeTab === 'seo') content.innerHTML = getSeoContent();
      else if (activeTab === 'route') content.innerHTML = getRouteContent();
      else if (activeTab === 'loader') content.innerHTML = getLoaderContent();
      else if (activeTab === 'errors') content.innerHTML = getErrorsContent();
    }

    function getSeoContent() {
      var title = document.title || '';
      var desc = document.querySelector('meta[name="description"]')?.content || '';
      var ogTitle = document.querySelector('meta[property="og:title"]')?.content || '';
      var ogDesc = document.querySelector('meta[property="og:description"]')?.content || '';
      var ogImage = document.querySelector('meta[property="og:image"]')?.content || '';

      var issues = [];
      if (!title) issues.push({ type: 'error', msg: 'Missing title' });
      else if (title.length > 60) issues.push({ type: 'warn', msg: 'Title too long (>60)' });
      if (!desc) issues.push({ type: 'error', msg: 'Missing description' });
      else if (desc.length > 160) issues.push({ type: 'warn', msg: 'Description too long (>160)' });
      if (!ogTitle) issues.push({ type: 'warn', msg: 'Missing og:title' });
      if (!ogImage) issues.push({ type: 'warn', msg: 'Missing og:image' });

      var html = '';
      if (issues.length) {
        html += '<div class="section"><div class="section-title">Issues</div>';
        issues.forEach(function(i) {
          html += '<div class="issue-item"><span class="issue-icon">' + (i.type === 'error' ? '\u2716' : '\u26A0') + '</span><span>' + escapeHtml(i.msg) + '</span></div>';
        });
        html += '</div>';
      }

      html += '<div class="section"><div class="section-title">Google Preview</div><div class="preview-card" style="background:#fff;color:#202124;padding:12px;border-radius:8px;">';
      html += '<div style="font-size:12px;color:#202124;margin-bottom:2px;">' + escapeHtml(location.hostname) + '</div>';
      html += '<div style="font-size:16px;color:#1a0dab;margin-bottom:4px;">' + escapeHtml(title || 'No title') + '</div>';
      html += '<div style="font-size:13px;color:#4d5156;">' + escapeHtml(desc ? desc.slice(0,160) : 'No description') + '</div>';
      html += '</div></div>';

      html += '<div class="section"><div class="section-title">Meta Tags</div>';
      html += '<div class="info-row"><div class="info-label">title</div><div class="info-value">' + escapeHtml(title || '-') + '</div></div>';
      html += '<div class="info-row"><div class="info-label">description</div><div class="info-value">' + escapeHtml(desc || '-') + '</div></div>';
      html += '<div class="info-row"><div class="info-label">og:title</div><div class="info-value">' + escapeHtml(ogTitle || '-') + '</div></div>';
      html += '<div class="info-row"><div class="info-label">og:description</div><div class="info-value">' + escapeHtml(ogDesc || '-') + '</div></div>';
      html += '<div class="info-row"><div class="info-label">og:image</div><div class="info-value">' + escapeHtml(ogImage || '-') + '</div></div>';
      html += '</div>';

      return html;
    }

    function getRouteContent() {
      var pathname = location.pathname;
      var segments = pathname.split('/').filter(Boolean);
      var search = location.search;
      var hash = location.hash;
      var devtools = window.__oneDevtools || {};
      var routeInfo = devtools.routeInfo || {};
      var params = routeInfo.params || {};

      var html = '<div class="section"><div class="section-title">Current Route</div>';
      html += '<div class="info-row"><span class="info-label">pathname</span><span class="info-value">' + escapeHtml(pathname) + '</span></div>';
      html += '<div class="info-row"><span class="info-label">segments</span><span class="info-value">' + (segments.length ? segments.map(function(s) { return '<span style="background:#252525;padding:2px 6px;border-radius:4px;margin-right:4px;">' + escapeHtml(s) + '</span>'; }).join('') : '/') + '</span></div>';
      if (search) html += '<div class="info-row"><span class="info-label">search</span><span class="info-value">' + escapeHtml(search) + '</span></div>';
      if (hash) html += '<div class="info-row"><span class="info-label">hash</span><span class="info-value">' + escapeHtml(hash) + '</span></div>';
      html += '</div>';

      if (Object.keys(params).length) {
        html += '<div class="section"><div class="section-title">Route Params</div>';
        Object.entries(params).forEach(function(kv) {
          html += '<div class="info-row"><span class="info-label">' + escapeHtml(kv[0]) + '</span><span class="info-value">' + escapeHtml(String(kv[1])) + '</span></div>';
        });
        html += '</div>';
      }

      html += '<div class="section"><div class="section-title">Full URL</div>';
      html += '<div style="font-family:monospace;font-size:11px;color:#666;word-break:break-all;">' + escapeHtml(location.href) + '</div>';
      html += '</div>';

      return html;
    }

    function getLoaderContent() {
      var devtools = window.__oneDevtools || {};
      var history = typeof devtools.getLoaderTimingHistory === 'function' ? devtools.getLoaderTimingHistory() || [] : [];

      if (!history.length) {
        return '<div class="empty">No loader timings recorded yet</div>';
      }

      var maxTime = Math.max.apply(null, history.map(function(t) { return t.totalTime || 0; }));
      var html = '';

      history.forEach(function(t) {
        var modPct = t.moduleLoadTime && t.totalTime ? (t.moduleLoadTime / t.totalTime) * 100 : 0;
        var execPct = t.executionTime && t.totalTime ? (t.executionTime / t.totalTime) * 100 : 0;
        var widthPct = t.totalTime && maxTime ? (t.totalTime / maxTime) * 100 : 0;

        html += '<div class="error-item' + (t.error ? ' error' : '') + '">';
        html += '<div style="display:flex;justify-content:space-between;align-items:center;">';
        html += '<span style="font-family:monospace;font-size:11px;">' + escapeHtml(t.path) + '</span>';
        html += '<span class="badge badge-' + (t.error ? 'error' : 'success') + '">' + (t.totalTime ? Math.round(t.totalTime) + 'ms' : '-') + '</span>';
        html += '</div>';
        if (!t.error) {
          html += '<div class="timing-bar" style="width:' + Math.max(20, widthPct) + '%;">';
          html += '<div class="timing-segment timing-module" style="width:' + modPct + '%;" title="Module: ' + Math.round(t.moduleLoadTime || 0) + 'ms"></div>';
          html += '<div class="timing-segment timing-exec" style="width:' + execPct + '%;" title="Exec: ' + Math.round(t.executionTime || 0) + 'ms"></div>';
          html += '</div>';
        }
        if (t.error) html += '<div class="error-msg">' + escapeHtml(t.error) + '</div>';
        html += '</div>';
      });

      return html;
    }

    function getErrorsContent() {
      var devtools = window.__oneDevtools || {};
      var errors = devtools.errorHistory || [];

      if (!errors.length) {
        return '<div class="empty">\u2713 No errors recorded</div>';
      }

      var html = '';
      errors.forEach(function(err) {
        html += '<div class="error-item error">';
        html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">';
        html += '<span class="badge badge-error">' + escapeHtml(err.type || 'error') + '</span>';
        html += '<span style="font-size:11px;color:#666;">' + new Date(err.timestamp).toLocaleTimeString() + '</span>';
        html += '</div>';
        html += '<div class="error-msg">' + escapeHtml(err.error?.message || 'Unknown error') + '</div>';
        html += '</div>';
      });

      return html;
    }

    // Initialize
    createHost();

    // Listen for events
    window.addEventListener('one-loader-timing', function() {
      if (panel && panel.classList.contains('visible') && activeTab === 'loader') updateContent();
    });
    window.addEventListener('one-error', function(e) {
      var devtools = window.__oneDevtools = window.__oneDevtools || {};
      devtools.errorHistory = devtools.errorHistory || [];
      devtools.errorHistory.unshift(e.detail);
      if (devtools.errorHistory.length > 20) devtools.errorHistory = devtools.errorHistory.slice(0, 20);
      if (panel && panel.classList.contains('visible') && activeTab === 'errors') updateContent();
    });

    // Update on navigation
    function onNavigate() {
      if (panel && panel.classList.contains('visible')) updateContent();
    }
    window.addEventListener('popstate', onNavigate);
    window.addEventListener('one-hmr-update', onNavigate);
    // Also catch pushState/replaceState
    var origPushState = history.pushState;
    var origReplaceState = history.replaceState;
    history.pushState = function() {
      origPushState.apply(this, arguments);
      setTimeout(onNavigate, 0);
    };
    history.replaceState = function() {
      origReplaceState.apply(this, arguments);
      setTimeout(onNavigate, 0);
    };

  } catch (e) {
    console.error('[One DevTools] Failed to initialize:', e);
  }
})();
`,
  SOURCE_INSPECTOR_SCRIPT = `
(function() {
  try {
    var active = false;
    var host = null;
    var shadow = null;
    var overlay = null;
    var tag = null;
    var holdTimer = null;
    var holdDelay = 500;
    var mousePos = { x: 0, y: 0 };

    function createHost() {
      if (host) return;
      host = document.createElement('div');
      host.id = 'one-source-inspector';
      shadow = host.attachShadow({ mode: 'open' });
      shadow.innerHTML = \`
        <style>
          * { box-sizing: border-box; margin: 0; padding: 0; }
          .overlay {
            position: fixed;
            pointer-events: none;
            z-index: 100000;
            background: rgba(100,100,100,0.2);
            border: 2px solid rgba(100,100,100,0.6);
            border-radius: 2px;
            transition: all 0.05s;
            display: none;
          }
          .tag {
            position: fixed;
            pointer-events: none;
            z-index: 100001;
            background: rgba(60,60,60,0.95);
            color: white;
            padding: 4px 8px;
            font-size: 12px;
            font-family: system-ui, -apple-system, sans-serif;
            border-radius: 4px;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            display: none;
          }
        </style>
        <div class="overlay"></div>
        <div class="tag"></div>
      \`;
      document.body.appendChild(host);
      overlay = shadow.querySelector('.overlay');
      tag = shadow.querySelector('.tag');
    }

    function hideOverlay() {
      if (overlay) overlay.style.display = 'none';
      if (tag) tag.style.display = 'none';
    }

    function showOverlay(el, source) {
      if (!host) createHost();
      var rect = el.getBoundingClientRect();
      overlay.style.display = 'block';
      overlay.style.top = rect.top + 'px';
      overlay.style.left = rect.left + 'px';
      overlay.style.width = rect.width + 'px';
      overlay.style.height = rect.height + 'px';
      tag.style.display = 'block';
      tag.textContent = source;
      var top = rect.top - 28;
      if (top < 0) top = rect.bottom + 4;
      tag.style.top = top + 'px';
      tag.style.left = Math.max(4, Math.min(rect.left, window.innerWidth - 200)) + 'px';
    }

    function cancelHold() {
      clearTimeout(holdTimer);
      holdTimer = null;
    }

    function updateOverlayAtPosition(x, y) {
      // Use elementsFromPoint to get all elements at position, ordered from topmost/innermost to bottom
      var allElements = document.elementsFromPoint(x, y);
      // Find the first (innermost) element with data-one-source
      var el = null;
      for (var i = 0; i < allElements.length; i++) {
        if (allElements[i].hasAttribute('data-one-source')) {
          el = allElements[i];
          break;
        }
      }
      if (el) {
        var source = el.getAttribute('data-one-source');
        var lastColon = source.lastIndexOf(':');
        var filePath = source.slice(0, lastColon);
        var idx = source.slice(lastColon + 1);
        var info = window.__oneSourceInfo && window.__oneSourceInfo[filePath];
        var lineCol = info && info[idx];
        var displaySource = lineCol ? filePath + ':' + lineCol[0] + ':' + lineCol[1] : source;
        showOverlay(el, displaySource);
      } else {
        hideOverlay();
      }
    }

    function activate() {
      active = true;
      // Immediately show overlay at current mouse position
      updateOverlayAtPosition(mousePos.x, mousePos.y);
    }

    function deactivate() {
      cancelHold();
      active = false;
      hideOverlay();
    }

    window.addEventListener('keydown', function(e) {
      // Only trigger on Alt/Option key held alone
      if (e.key !== 'Alt') {
        cancelHold();
        return;
      }
      // Ignore if other modifier keys are pressed
      if (e.metaKey || e.ctrlKey || e.shiftKey) {
        cancelHold();
        return;
      }
      if (e.defaultPrevented) return;
      if (holdTimer) return; // already waiting
      holdTimer = setTimeout(activate, holdDelay);
    });

    window.addEventListener('keyup', function(e) {
      if (e.defaultPrevented) return;
      deactivate();
    });

    window.addEventListener('blur', deactivate);

    document.addEventListener('mousemove', function(e) {
      // Always track mouse position
      mousePos.x = e.clientX;
      mousePos.y = e.clientY;
      if (!active) return;
      updateOverlayAtPosition(e.clientX, e.clientY);
    });

    document.addEventListener('click', function(e) {
      if (!active) return;
      // Use elementsFromPoint to find innermost sourced element
      var allElements = document.elementsFromPoint(e.clientX, e.clientY);
      var el = null;
      for (var i = 0; i < allElements.length; i++) {
        if (allElements[i].hasAttribute('data-one-source')) {
          el = allElements[i];
          break;
        }
      }
      if (el) {
        e.preventDefault();
        e.stopPropagation();
        var source = el.getAttribute('data-one-source');
        // Parse source: "/path/to/file.tsx:index"
        var lastColon = source.lastIndexOf(':');
        var filePath = source.slice(0, lastColon);
        var idx = source.slice(lastColon + 1);
        // Look up actual line/column from source info
        var info = window.__oneSourceInfo && window.__oneSourceInfo[filePath];
        var lineCol = info && info[idx];
        var url = '/__one/open-source?source=' + encodeURIComponent(source);
        if (lineCol) {
          url += '&line=' + lineCol[0] + '&column=' + lineCol[1];
        }
        fetch(url);
      }
    }, true);
  } catch (e) {
    console.error('[Source Inspector] Failed to initialize:', e);
  }
})();
`;
function DevHead() {
  return null;
}
export { DevHead };
//# sourceMappingURL=DevHead.native.js.map