/**
 * Shared profile switcher bar — injected into all HTML pages.
 *
 * CSS and JS are self-contained. The bar auto-hides when no profiles
 * are configured. Profile changes take effect immediately via
 * POST /profiles/active — no page reload needed.
 */
/**
 * Canonical Meridian theme — purple brand palette.
 *
 * Every inline HTML page (landing, telemetry dashboard, profiles,
 * settings, plugins) prepends this block before its own styles so
 * `var(--bg)`, `var(--accent)` etc. resolve consistently everywhere.
 *
 * Extra variables (--queue, --ttfb, --upstream, --blue, --purple) exist
 * so the telemetry waterfall and lineage-colored badges keep their
 * semantic meaning without needing per-page overrides.
 */
export declare const themeCss = "\n  :root {\n    /* Cool-gray neutral palette \u2014 matches the original dashboard/profiles/\n       settings look. Better for data-dense dashboards: high contrast,\n       surface/border separation, no color cast muddying the text. Purple\n       accents are retained as secondary brand color for hover states,\n       gradients, and a handful of telemetry badges. */\n    --bg:        #0d1117;\n    --surface:   #161b22;\n    --surface2:  #1c2128;\n    --border:    #30363d;\n    /* Text */\n    --text:      #e6edf3;\n    --muted:     #8b949e;\n    /* Brand \u2014 blue primary, purple secondary */\n    --accent:    #58a6ff;\n    --accent2:   #bc8cff;\n    --violet:    #bc8cff;\n    --lavender:  #d2a8ff;\n    /* Semantic */\n    --green:     #3fb950;\n    --yellow:    #d29922;\n    --red:       #f85149;\n    /* Telemetry-specific aliases (waterfall + lineage badges) */\n    --blue:      #58a6ff;\n    --purple:    #bc8cff;\n    --queue:     #d29922;\n    --ttfb:      #58a6ff;\n    --upstream:  #3fb950;\n  }\n";
export declare const profileBarCss = "\n  .meridian-profile-bar {\n    position: sticky; top: 0; z-index: 100;\n    display: none; align-items: center; gap: 12px;\n    padding: 8px 24px;\n    background: rgba(13, 17, 23, 0.92);\n    backdrop-filter: blur(12px);\n    border-bottom: 1px solid var(--border, #30363d);\n    font-size: 12px;\n    color: var(--muted, #8b949e);\n  }\n  .meridian-profile-bar.visible { display: flex; }\n  .meridian-profile-bar .profile-label {\n    font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;\n    font-size: 10px; color: var(--muted, #8b949e);\n  }\n  .meridian-profile-bar select {\n    background: var(--surface, #161b22); color: var(--text, #e6edf3);\n    border: 1px solid var(--border, #30363d); border-radius: 6px;\n    padding: 4px 24px 4px 10px; font-size: 12px; cursor: pointer;\n    appearance: none;\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238b949e' stroke-width='1.5'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat; background-position: right 6px center;\n  }\n  .meridian-profile-bar select:hover { border-color: var(--accent, #58a6ff); }\n  .meridian-profile-bar select:focus { outline: none; border-color: var(--accent, #58a6ff); box-shadow: 0 0 0 1px var(--accent, #58a6ff); }\n  .meridian-profile-bar .profile-status {\n    font-size: 11px; color: var(--green, #3fb950); opacity: 0;\n    transition: opacity 0.3s;\n  }\n  .meridian-profile-bar .profile-status.show { opacity: 1; }\n  .meridian-profile-bar .profile-type {\n    font-size: 10px; padding: 2px 8px; border-radius: 4px;\n    background: var(--surface, #161b22); border: 1px solid var(--border, #30363d);\n  }\n  .meridian-profile-bar .spacer { flex: 1; }\n  .meridian-profile-bar .profile-nav a {\n    color: var(--muted, #8b949e); text-decoration: none; font-size: 11px;\n    padding: 4px 8px; border-radius: 4px; transition: color 0.15s;\n  }\n  .meridian-profile-bar .profile-nav a:hover { color: var(--text, #e6edf3); }\n  .meridian-profile-bar .profile-nav a.active { color: var(--accent, #58a6ff); }\n";
export declare const profileBarHtml = "\n<div class=\"meridian-profile-bar\" id=\"meridianProfileBar\">\n  <span class=\"profile-label\">Profile</span>\n  <select id=\"meridianProfileSelect\"></select>\n  <span class=\"profile-type\" id=\"meridianProfileType\"></span>\n  <span class=\"profile-status\" id=\"meridianProfileStatus\">\u2713 Switched</span>\n  <div class=\"spacer\"></div>\n  <div class=\"profile-nav\">\n    <a href=\"/\" id=\"nav-home\">Home</a>\n    <a href=\"/settings\" id=\"nav-settings\">Settings</a>\n    <a href=\"/profiles\" id=\"nav-profiles\">Profiles</a>\n    <a href=\"/telemetry\" id=\"nav-telemetry\">Telemetry</a>\n    <a href=\"/plugins\" id=\"nav-plugins\">Plugins</a>\n  </div>\n</div>\n";
export declare const profileBarJs = "\n(function() {\n  var profileBar = document.getElementById('meridianProfileBar');\n  var profileSelect = document.getElementById('meridianProfileSelect');\n  var profileType = document.getElementById('meridianProfileType');\n  var profileStatus = document.getElementById('meridianProfileStatus');\n  var statusTimeout;\n\n  // Highlight active nav link\n  var path = location.pathname;\n  var navLinks = document.querySelectorAll('.profile-nav a');\n  navLinks.forEach(function(a) {\n    if (a.getAttribute('href') === path || (path === '/telemetry' && a.id === 'nav-telemetry') || (path === '/' && a.id === 'nav-home')) {\n      a.classList.add('active');\n    }\n  });\n\n  function esc(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }\n\n  function loadProfiles() {\n    fetch('/profiles/list').then(function(r) { return r.json(); }).then(function(data) {\n      if (!data.profiles || data.profiles.length === 0) {\n        profileBar.classList.remove('visible');\n        return;\n      }\n      profileBar.classList.add('visible');\n      var current = data.profiles.find(function(p) { return p.isActive; });\n      profileSelect.innerHTML = data.profiles.map(function(p) {\n        return '<option value=\"' + esc(p.id) + '\"' + (p.isActive ? ' selected' : '') + '>' + esc(p.id) + '</option>';\n      }).join('');\n      if (current) profileType.textContent = current.type;\n    }).catch(function() {});\n  }\n\n  profileSelect.onchange = function() {\n    fetch('/profiles/active', {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ profile: profileSelect.value })\n    }).then(function(r) { return r.json(); }).then(function(data) {\n      if (data.success) {\n        profileStatus.classList.add('show');\n        clearTimeout(statusTimeout);\n        statusTimeout = setTimeout(function() { profileStatus.classList.remove('show'); }, 2000);\n        loadProfiles();\n      }\n    }).catch(function() {});\n  };\n\n  loadProfiles();\n  setInterval(loadProfiles, 10000);\n})();\n";
//# sourceMappingURL=profileBar.d.ts.map