blissful-web-agentation 1.0.0

package/dist/agentation.cjs.js

@@ -0,0 +1,851 @@
+'use strict';
+
+const STORAGE_KEY = "agentation-prefs";
+const defaults = {
+  active: false,
+  highlightColor: "#0063F7",
+  theme: "dark"
+};
+function loadPrefs() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      return { ...defaults, ...parsed };
+    }
+  } catch {
+  }
+  return { ...defaults };
+}
+const prefs = loadPrefs();
+const state = {
+  active: false,
+  hoveredElement: null,
+  selectedElement: null,
+  panelVisible: false,
+  shadowHost: null,
+  shadowRoot: null,
+  highlightColor: prefs.highlightColor,
+  theme: prefs.theme
+};
+const savedActive = prefs.active;
+function savePrefs() {
+  try {
+    const data = {
+      active: state.active,
+      highlightColor: state.highlightColor,
+      theme: state.theme
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+  } catch {
+  }
+}
+function resetState() {
+  state.active = false;
+  state.hoveredElement = null;
+  state.selectedElement = null;
+  state.panelVisible = false;
+  state.highlightColor = "#0063F7";
+  state.theme = "dark";
+}
+
+var cssText = "/* ============================================\n   Agentation — Element Inspector Styles\n   ============================================\n   Edit these to customize the inspector's look.\n   All styles are scoped inside Shadow DOM so they\n   won't leak into the host page.\n   ============================================ */\n\n/* --- Host container (don't remove) --- */\n\n@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');\n\n:host {\n  position: fixed !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 0 !important;\n  height: 0 !important;\n  overflow: visible !important;\n  z-index: 2147483647 !important;\n  pointer-events: none !important;\n  font-family: \"Geist\", sans-serif;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n/* --- Highlight overlay (blue border on hover) --- */\n\n.ag-highlight {\n  position: fixed;\n  pointer-events: none;\n  border: 2px solid #0063F7;\n  background: #0063f717;\n  border-radius: 2px;\n  transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1), left 0.15s cubic-bezier(0.4, 0, 0.2, 1), width 0.15s cubic-bezier(0.4, 0, 0.2, 1), height 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 2147483646;\n}\n\n/* --- Floating label (tag name badge) --- */\n\n.ag-label {\n  position: fixed;\n  pointer-events: none;\n  background: #28293D;\n  color: #f1f5f9;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  padding: 4px 8px;\n  border-radius: 4px;\n  white-space: nowrap;\n  z-index: 2147483647;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n.ag-label .ag-tag {\n  color: #57EBA1;\n  font-weight: 600;\n}\n\n.ag-label .ag-class {\n  color: #DDA5E9;\n}\n\n.ag-label .ag-dims {\n  color: #94a3b8;\n  margin-left: 6px;\n}\n\n/* --- Toolbar (bottom-right bar) --- */\n\n.ag-toolbar {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  pointer-events: auto;\n  z-index: 2147483647;\n  background: #1a1a1a;\n  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  border-radius: 10px;\n  border: 0.5px solid rgba(255, 255, 255, 0.08);\n  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.75), 0 0.5px 0 0 rgba(255, 255, 255, 0.05) inset, 0 -0.5px 0 0 rgba(0, 0, 0, 0.05) inset, 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset;\n  padding: 2px;\n}\n\n.ag-toolbar:active {\n  transform: scale(.99);\n  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.ag-toolbar.ag-light {\n  background: #ffff;\n  border-color: none;\n  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);\n}\n\n.ag-toolbar-divider {\n  width: 1px;\n  height: 20px;\n  background: rgba(255, 255, 255, 0.1);\n  flex-shrink: 0;\n  margin: 0 2px;\n}\n\n.ag-toolbar.ag-light .ag-toolbar-divider {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n/* --- Toggle button (inside toolbar) --- */\n\n.ag-toggle {\n  height: 34px;\n  border-radius: 8px;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n  transition: all 0.15s ease;\n  font-family: \"Geist\", sans-serif;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n}\n\n.ag-toggle:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.ag-toggle.active {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.ag-toolbar.ag-light .ag-toggle {\n  color: rgba(0, 0, 0, 0.45);\n}\n\n.ag-toolbar.ag-light .ag-toggle:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.ag-toolbar.ag-light .ag-toggle.active {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n.ag-toggle-label {\n  pointer-events: none;\n}\n\n.ag-toggle-track {\n  width: 40px;\n  height: 24px;\n  border-radius: 12px;\n  background: rgba(255, 255, 255, 0.12);\n  position: relative;\n  transition: background 0.2s ease;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\n.ag-toggle.active .ag-toggle-track {\n  background: #0063F7;\n}\n\n.ag-toolbar.ag-light .ag-toggle-track {\n  background: rgba(0, 0, 0, 0.15);\n}\n\n.ag-toolbar.ag-light .ag-toggle.active .ag-toggle-track {\n  background: #0063F7;\n}\n\n.ag-toggle-knob {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 1);\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 0.5px 0 0 rgba(255, 255, 255, 0.20) inset, 0 -0.5px 0 0 rgba(0, 0, 0, 0.10) inset, 0 0 0 0.5px rgba(0, 0, 0, 0.15) inset;\n  transition: all 0.2s ease;\n}\n\n.ag-toggle.active .ag-toggle-knob {\n  left: 19px;\n  background: #fff;\n}\n\n/* --- Color picker --- */\n\n.ag-color-picker {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  cursor: pointer;\n  border-radius: 8px;\n  transition: background 0.15s ease;\n  position: relative;\n}\n\n.ag-color-picker:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.ag-toolbar.ag-light .ag-color-picker:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.ag-color-swatch {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 2px solid rgba(255, 255, 255, 0.2);\n  pointer-events: none;\n}\n\n.ag-toolbar.ag-light .ag-color-swatch {\n  border-color: rgba(0, 0, 0, 0.15);\n}\n\n.ag-color-picker input[type=\"color\"] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n}\n\n/* --- Theme toggle --- */\n\n@keyframes ag-icon-out {\n  from { transform: scale(1); opacity: 1; filter: blur(0); }\n  to   { transform: scale(0.5); opacity: 0.5; filter: blur(2px); }\n}\n\n@keyframes ag-icon-in {\n  from { transform: scale(0.5); opacity: 0.5; filter: blur(2px); }\n  to   { transform: scale(1); opacity: 1; filter: blur(0); }\n}\n\n.ag-theme-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  background: transparent;\n  border: none;\n  color: rgba(255, 255, 255, 0.4);\n  cursor: pointer;\n  border-radius: 8px;\n  transition: background 0.15s ease, color 0.15s ease;\n}\n\n.ag-theme-btn:hover {\n  background: rgba(255, 255, 255, 0.06);\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.ag-toolbar.ag-light .ag-theme-btn {\n  color: rgba(0, 0, 0, 0.35);\n}\n\n.ag-toolbar.ag-light .ag-theme-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: rgba(0, 0, 0, 0.75);\n}\n\n.ag-theme-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ag-theme-icon.ag-icon-out {\n  animation: ag-icon-out 0.15s ease forwards;\n}\n\n.ag-theme-icon.ag-icon-in {\n  animation: ag-icon-in 0.15s ease forwards;\n}\n\n/* --- Style panel (dark) --- */\n\n.ag-panel {\n  position: fixed;\n  pointer-events: auto;\n  background: #000;\n  color: #fff;\n  border-radius: 12px;\n  width: 340px;\n  max-height: 480px;\n  overflow-y: auto;\n  overscroll-behavior: none;\n  font-size: 12px;\n  line-height: 1.5;\n  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.75), 0 4px 24px rgba(0, 0, 0, 0.5), 0 0.5px 0 0 rgba(255, 255, 255, 0.05) inset, 0 -0.5px 0 0 rgba(0, 0, 0, 0.05) inset, 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset;\n  z-index: 2147483647;\n\n  /* enter/exit animation */\n  opacity: 0;\n  filter: blur(4px);\n  transform: scale(0.96) translateY(4px);\n  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;\n}\n\n.ag-panel.ag-panel-visible {\n  opacity: 1;\n  filter: blur(0);\n  transform: scale(1) translateY(0);\n}\n\n.ag-panel.ag-panel-hiding {\n  opacity: 0;\n  filter: blur(4px);\n  transform: scale(0.96) translateY(4px);\n}\n\n.ag-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 14px;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  position: sticky;\n  top: 0;\n  background: #000;\n  border-radius: 12px 12px 0 0;\n  z-index: 1;\n}\n\n.ag-panel-title {\n  font-weight: 600;\n  color: #57EBA1;\n  font-size: 14px;\n}\n\n.ag-panel-actions {\n  display: flex;\n  gap: 6px;\n}\n\n.ag-panel-btn {\n  background: #1a1a1a;\n  color: #888;\n  border: 1px solid #2a2a2a;\n  border-radius: 6px;\n  padding: 4px 8px;\n  cursor: pointer;\n  font-size: 11px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  pointer-events: auto;\n  transition: all 0.1s ease;\n}\n\n.ag-panel-btn:hover {\n  background: #2a2a2a;\n  color: #fff;\n  border-color: #444;\n}\n\n.ag-panel-btn.copied {\n  background: #065f46;\n  color: #6ee7b7;\n  border-color: #059669;\n}\n\n.ag-panel-close {\n  background: none;\n  border: none;\n  color: rgba(255, 255, 255, 0.5);\n  cursor: pointer;\n  padding-left: 12px;\n  border-left: 1px solid #2a2a2a;\n  display: flex;\n  align-items: center;\n  pointer-events: auto;\n  transition: all 0.1s ease;\n}\n\n.ag-panel-close:hover {\n  color: rgba(255, 255, 255, 1);\n}\n\n/* --- Selector display --- */\n\n.ag-selector {\n  padding: 8px 14px;\n  background: #28293D;\n  font-family: \"Geist Mono\", monospace;\n  font-size: 11px;\n  color: #DDA5E9;\n  word-break: break-all;\n}\n\n/* --- Style sections --- */\n\n.ag-section {\n  padding: 10px 14px 0 14px;\n  /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */\n}\n\n.ag-section:last-child {\n  padding-bottom: 14px;\n  border-bottom: none;\n}\n\n.ag-section-title {\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.5);\n  text-transform: uppercase;\n  font-size: 10px;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n/* --- Code block (property list) --- */\n\n.ag-code {\n  background: #1a1a1a;\n  border-radius: 8px;\n  padding: 10px 14px;\n  font-family: \"Geist Mono\", monospace;\n  font-size: 12px;\n  line-height: 1.7;\n}\n\n.ag-code-line {\n  white-space: normal;\n  word-break: break-all;\n}\n\n.ag-prop-name {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.ag-prop-value {\n  color: #DDA5E9;\n}\n\n/* --- Scrollbar --- */\n\n.ag-panel::-webkit-scrollbar {\n  display: none;\n}\n\n/* ============================================\n   Light theme overrides\n   ============================================ */\n\n.ag-panel.ag-light {\n  background: #fff;\n  color: #1a1a1a;\n  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 24px rgba(0, 0, 0, 0.12);\n}\n\n.ag-panel.ag-light .ag-panel-header {\n  background: #fff;\n  border-bottom-color: rgba(0, 0, 0, 0.08);\n}\n\n.ag-panel.ag-light .ag-panel-title {\n  color: #0d7c4a;\n}\n\n.ag-panel.ag-light .ag-panel-btn {\n  background: #f0f0f0;\n  color: #666;\n  border-color: #e0e0e0;\n}\n\n.ag-panel.ag-light .ag-panel-btn:hover {\n  background: #e0e0e0;\n  color: #111;\n  border-color: #ccc;\n}\n\n.ag-panel.ag-light .ag-panel-close {\n  color: rgba(0, 0, 0, 0.4);\n  border-left-color: #e0e0e0;\n}\n\n.ag-panel.ag-light .ag-panel-close:hover {\n  color: rgba(0, 0, 0, 0.85);\n}\n\n.ag-panel.ag-light .ag-selector {\n  background: #f0f0f5;\n  color: #8b5cf6;\n}\n\n.ag-panel.ag-light .ag-section {\n  border-bottom-color: rgba(0, 0, 0, 0.06);\n}\n\n.ag-panel.ag-light .ag-section-title {\n  color: rgba(0, 0, 0, 0.45);\n}\n\n.ag-panel.ag-light .ag-code {\n  background: #f5f5f5;\n}\n\n.ag-panel.ag-light .ag-prop-name {\n  color: rgba(0, 0, 0, 0.75);\n}\n\n.ag-panel.ag-light .ag-prop-value {\n  color: #7c3aed;\n}\n";
+
+const STYLES = cssText;
+
+const HOST_ID = "agentation-inspector";
+function createShadowHost() {
+  const existing = document.getElementById(HOST_ID);
+  if (existing) existing.remove();
+  const host = document.createElement("div");
+  host.id = HOST_ID;
+  host.setAttribute("data-agentation", "true");
+  host.style.cssText = "position:fixed!important;top:0!important;left:0!important;width:0!important;height:0!important;overflow:visible!important;z-index:2147483647!important;pointer-events:none!important;";
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = STYLES;
+  shadow.appendChild(style);
+  document.body.appendChild(host);
+  state.shadowHost = host;
+  state.shadowRoot = shadow;
+  return shadow;
+}
+function destroyShadowHost() {
+  if (state.shadowHost) {
+    state.shadowHost.remove();
+    state.shadowHost = null;
+    state.shadowRoot = null;
+  }
+}
+
+const ICONS = {
+  close: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+  copy: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,
+  check: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
+  sun: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`,
+  moon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`
+};
+
+const SKIP_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "LINK",
+  "META",
+  "HEAD",
+  "TITLE",
+  "BR",
+  "WBR",
+  "NOSCRIPT",
+  "TEMPLATE"
+]);
+function isInteractable(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  if (SKIP_TAGS.has(el.tagName)) return false;
+  const rect = el.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return false;
+  return true;
+}
+function isOwnElement(el) {
+  if (!state.shadowHost) return false;
+  return state.shadowHost === el || state.shadowHost.contains(el);
+}
+
+let highlightEl = null;
+function ensureHighlight() {
+  if (highlightEl && state.shadowRoot?.contains(highlightEl)) {
+    return highlightEl;
+  }
+  highlightEl = document.createElement("div");
+  highlightEl.className = "ag-highlight";
+  state.shadowRoot?.appendChild(highlightEl);
+  return highlightEl;
+}
+function showHighlight(target) {
+  const el = ensureHighlight();
+  const rect = target.getBoundingClientRect();
+  el.style.top = `${rect.top}px`;
+  el.style.left = `${rect.left}px`;
+  el.style.width = `${rect.width}px`;
+  el.style.height = `${rect.height}px`;
+  el.style.borderColor = state.highlightColor;
+  el.style.background = state.highlightColor + "17";
+  el.style.display = "block";
+}
+function hideHighlight() {
+  if (highlightEl) {
+    highlightEl.style.display = "none";
+  }
+}
+function destroyHighlight() {
+  if (highlightEl) {
+    highlightEl.remove();
+    highlightEl = null;
+  }
+}
+
+function formatDimensions(width, height) {
+  return `${Math.round(width)} \xD7 ${Math.round(height)}`;
+}
+
+let labelEl = null;
+function ensureLabel() {
+  if (labelEl && state.shadowRoot?.contains(labelEl)) {
+    return labelEl;
+  }
+  labelEl = document.createElement("div");
+  labelEl.className = "ag-label";
+  state.shadowRoot?.appendChild(labelEl);
+  return labelEl;
+}
+function showLabel(target) {
+  const el = ensureLabel();
+  const rect = target.getBoundingClientRect();
+  const tag = target.tagName.toLowerCase();
+  const classes = Array.from(target.classList).slice(0, 3).map((c) => `.${c}`).join("");
+  const dims = formatDimensions(rect.width, rect.height);
+  el.innerHTML = `<span class="ag-tag">${tag}</span>` + (classes ? `<span class="ag-class">${classes}</span>` : "") + `<span class="ag-dims">${dims}</span>`;
+  const labelHeight = 24;
+  const gap = 6;
+  let top = rect.top - labelHeight - gap;
+  if (top < 4) {
+    top = rect.bottom + gap;
+  }
+  let left = rect.left;
+  el.style.display = "block";
+  el.style.top = `${top}px`;
+  el.style.left = `${Math.max(4, left)}px`;
+  requestAnimationFrame(() => {
+    const labelRect = el.getBoundingClientRect();
+    if (labelRect.right > window.innerWidth - 4) {
+      el.style.left = `${window.innerWidth - labelRect.width - 4}px`;
+    }
+  });
+}
+function hideLabel() {
+  if (labelEl) {
+    labelEl.style.display = "none";
+  }
+}
+function destroyLabel() {
+  if (labelEl) {
+    labelEl.remove();
+    labelEl = null;
+  }
+}
+
+const FRAMEWORK_CLASS_PATTERNS = [
+  /^v-/,
+  /^ng-/,
+  /^_ng/,
+  /^svelte-/,
+  /^css-/,
+  /^jsx-/,
+  /^sc-/,
+  /^__/,
+  /^css-\d/,
+  /^rs-/,
+  /^emotion-/,
+  /^[a-zA-Z]{1,3}[A-Z][a-zA-Z0-9]{4,8}$/
+  // CSS-module hashes like "aBcDeFgH"
+];
+function isFrameworkClass(cls) {
+  return FRAMEWORK_CLASS_PATTERNS.some((p) => p.test(cls));
+}
+function escapeSelector(str) {
+  if (typeof CSS !== "undefined" && CSS.escape) {
+    return CSS.escape(str);
+  }
+  return str.replace(/([\0-\x1f\x7f]|^-?\d|^-$|[^\x80-\uFFFF\w-])/g, (ch) => {
+    if (ch === "\0") return "\uFFFD";
+    return "\\" + ch;
+  });
+}
+function getNthChildIndex(el) {
+  let index = 1;
+  let sibling = el.previousElementSibling;
+  while (sibling) {
+    if (sibling.tagName === el.tagName) index++;
+    sibling = sibling.previousElementSibling;
+  }
+  return index;
+}
+function getSiblingCount(el) {
+  let count = 0;
+  const parent = el.parentElement;
+  if (!parent) return 0;
+  for (let i = 0; i < parent.children.length; i++) {
+    if (parent.children[i].tagName === el.tagName) count++;
+  }
+  return count;
+}
+function buildSegment(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.id && !isFrameworkClass(el.id)) {
+    return `#${escapeSelector(el.id)}`;
+  }
+  const classes = Array.from(el.classList).filter((c) => !isFrameworkClass(c));
+  if (classes.length > 0) {
+    const classSelector = tag + classes.map((c) => `.${escapeSelector(c)}`).join("");
+    const parent = el.parentElement;
+    if (parent) {
+      const matches = parent.querySelectorAll(`:scope > ${classSelector}`);
+      if (matches.length === 1) return classSelector;
+    }
+  }
+  if (getSiblingCount(el) > 1) {
+    return `${tag}:nth-of-type(${getNthChildIndex(el)})`;
+  }
+  return tag;
+}
+function generateSelector(el) {
+  if (el.id && !isFrameworkClass(el.id)) {
+    const id = `#${escapeSelector(el.id)}`;
+    if (document.querySelectorAll(id).length === 1) return id;
+  }
+  const parts = [];
+  let current = el;
+  while (current && current !== document.documentElement && current !== document.body) {
+    const segment = buildSegment(current);
+    parts.unshift(segment);
+    if (segment.startsWith("#")) break;
+    const candidate = parts.join(" > ");
+    try {
+      if (document.querySelectorAll(candidate).length === 1) break;
+    } catch {
+    }
+    current = current.parentElement;
+  }
+  const selector = parts.join(" > ");
+  try {
+    if (document.querySelectorAll(selector).length !== 1) {
+      return "body > " + selector;
+    }
+  } catch {
+  }
+  return selector;
+}
+
+const CATEGORIES = [
+  {
+    name: "Typography",
+    props: [
+      "font-family",
+      "font-size",
+      "font-weight",
+      "font-style",
+      "line-height",
+      "letter-spacing",
+      "text-align",
+      "text-decoration",
+      "text-transform",
+      "color"
+    ]
+  },
+  {
+    name: "Box Model",
+    props: [
+      "width",
+      "height",
+      "padding",
+      "margin",
+      "border",
+      "border-radius"
+    ]
+  },
+  {
+    name: "Background",
+    props: [
+      "background-color",
+      "background-image",
+      "background-size",
+      "background-position",
+      "opacity"
+    ]
+  },
+  {
+    name: "Layout",
+    props: [
+      "display",
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "overflow",
+      "float",
+      "clear"
+    ]
+  },
+  {
+    name: "Flexbox / Grid",
+    props: [
+      "flex-direction",
+      "flex-wrap",
+      "justify-content",
+      "align-items",
+      "align-content",
+      "gap",
+      "grid-template-columns",
+      "grid-template-rows",
+      "grid-column",
+      "grid-row"
+    ]
+  }
+];
+function isDefaultValue(prop, value) {
+  const defaults = {
+    "font-style": /* @__PURE__ */ new Set(["normal"]),
+    "letter-spacing": /* @__PURE__ */ new Set(["normal", "0px"]),
+    "text-decoration": /* @__PURE__ */ new Set(["none", "none solid rgb(0, 0, 0)"]),
+    "text-transform": /* @__PURE__ */ new Set(["none"]),
+    "background-image": /* @__PURE__ */ new Set(["none"]),
+    "background-size": /* @__PURE__ */ new Set(["auto"]),
+    "background-position": /* @__PURE__ */ new Set(["0% 0%"]),
+    "opacity": /* @__PURE__ */ new Set(["1"]),
+    "top": /* @__PURE__ */ new Set(["auto"]),
+    "right": /* @__PURE__ */ new Set(["auto"]),
+    "bottom": /* @__PURE__ */ new Set(["auto"]),
+    "left": /* @__PURE__ */ new Set(["auto"]),
+    "z-index": /* @__PURE__ */ new Set(["auto"]),
+    "overflow": /* @__PURE__ */ new Set(["visible"]),
+    "float": /* @__PURE__ */ new Set(["none"]),
+    "clear": /* @__PURE__ */ new Set(["none"]),
+    "flex-direction": /* @__PURE__ */ new Set(["row"]),
+    "flex-wrap": /* @__PURE__ */ new Set(["nowrap"]),
+    "grid-template-columns": /* @__PURE__ */ new Set(["none"]),
+    "grid-template-rows": /* @__PURE__ */ new Set(["none"]),
+    "grid-column": /* @__PURE__ */ new Set(["auto", "auto / auto"]),
+    "grid-row": /* @__PURE__ */ new Set(["auto", "auto / auto"])
+  };
+  return defaults[prop]?.has(value) ?? false;
+}
+function readShorthand(cs, prop) {
+  if (prop === "padding") {
+    const t = cs.paddingTop, r = cs.paddingRight, b = cs.paddingBottom, l = cs.paddingLeft;
+    if (t === r && r === b && b === l) return t;
+    if (t === b && r === l) return `${t} ${r}`;
+    return `${t} ${r} ${b} ${l}`;
+  }
+  if (prop === "margin") {
+    const t = cs.marginTop, r = cs.marginRight, b = cs.marginBottom, l = cs.marginLeft;
+    if (t === r && r === b && b === l) return t;
+    if (t === b && r === l) return `${t} ${r}`;
+    return `${t} ${r} ${b} ${l}`;
+  }
+  if (prop === "border") {
+    return `${cs.borderTopWidth} ${cs.borderTopStyle} ${cs.borderTopColor}`;
+  }
+  if (prop === "border-radius") {
+    const tl = cs.borderTopLeftRadius, tr = cs.borderTopRightRadius;
+    const br = cs.borderBottomRightRadius, bl = cs.borderBottomLeftRadius;
+    if (tl === tr && tr === br && br === bl) return tl;
+    return `${tl} ${tr} ${br} ${bl}`;
+  }
+  return cs.getPropertyValue(prop);
+}
+function extractStyles(el) {
+  const cs = getComputedStyle(el);
+  const result = [];
+  for (const cat of CATEGORIES) {
+    const properties = [];
+    for (const prop of cat.props) {
+      const value = readShorthand(cs, prop);
+      if (value && !isDefaultValue(prop, value)) {
+        properties.push({ name: prop, value });
+      }
+    }
+    if (properties.length > 0) {
+      result.push({ name: cat.name, properties });
+    }
+  }
+  return result;
+}
+function formatStylesForClipboard(categories) {
+  const lines = [];
+  for (const cat of categories) {
+    lines.push(`/* ${cat.name} */`);
+    for (const p of cat.properties) {
+      lines.push(`${p.name}: ${p.value};`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n").trim();
+}
+
+async function copyToClipboard(text) {
+  if (navigator.clipboard && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.left = "-9999px";
+  textarea.style.top = "-9999px";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  try {
+    const ok = document.execCommand("copy");
+    return ok;
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+let panelEl = null;
+let pageClickX = 0;
+let pageClickY = 0;
+function createPanelHTML(el, selector) {
+  const categories = extractStyles(el);
+  const tag = el.tagName.toLowerCase();
+  let sectionsHTML = "";
+  for (const cat of categories) {
+    let linesHTML = "";
+    for (const p of cat.properties) {
+      linesHTML += `<div class="ag-code-line"><span class="ag-prop-name">${p.name}</span>: <span class="ag-prop-value">${escapeHTML(p.value)}</span>;</div>`;
+    }
+    sectionsHTML += `<div class="ag-section"><div class="ag-section-title">${cat.name}</div><div class="ag-code">${linesHTML}</div></div>`;
+  }
+  return `
+    <div class="ag-panel-header">
+      <span class="ag-panel-title">&lt;${tag}&gt;</span>
+      <div class="ag-panel-actions">
+        <button class="ag-panel-btn" data-action="copy-selector" title="Copy selector">
+          ${ICONS.copy} Selector
+        </button>
+        <button class="ag-panel-btn" data-action="copy-styles" title="Copy all styles">
+          ${ICONS.copy} Styles
+        </button>
+        <button class="ag-panel-close" data-action="close" title="Close panel">
+          ${ICONS.close}
+        </button>
+      </div>
+    </div>
+    <div class="ag-selector">${escapeHTML(selector)}</div>
+    ${sectionsHTML}
+  `;
+}
+function escapeHTML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function positionPanel() {
+  if (!panelEl) return;
+  const panelWidth = 340;
+  const gap = 12;
+  const viewX = pageClickX - window.scrollX;
+  const viewY = pageClickY - window.scrollY;
+  let left = viewX + gap;
+  if (left + panelWidth > window.innerWidth - 8) {
+    left = viewX - panelWidth - gap;
+    if (left < 8) {
+      left = window.innerWidth - panelWidth - 8;
+    }
+  }
+  let top = viewY - 20;
+  if (top + 480 > window.innerHeight - 8) {
+    top = Math.max(8, window.innerHeight - 488);
+  }
+  if (top < 8) top = 8;
+  panelEl.style.top = `${top}px`;
+  panelEl.style.left = `${left}px`;
+}
+function handlePanelClick(e) {
+  const target = e.target;
+  const btn = target.closest("[data-action]");
+  if (!btn) return;
+  const action = btn.dataset.action;
+  if (action === "close") {
+    hidePanel();
+    return;
+  }
+  if (action === "copy-selector" && state.selectedElement) {
+    const selector = generateSelector(state.selectedElement);
+    copyToClipboard(selector).then(() => flashCopied(btn));
+    return;
+  }
+  if (action === "copy-styles" && state.selectedElement) {
+    const categories = extractStyles(state.selectedElement);
+    const text = formatStylesForClipboard(categories);
+    copyToClipboard(text).then(() => flashCopied(btn));
+    return;
+  }
+}
+function flashCopied(btn) {
+  const original = btn.innerHTML;
+  btn.innerHTML = `${ICONS.check} Copied!`;
+  btn.classList.add("copied");
+  setTimeout(() => {
+    btn.innerHTML = original;
+    btn.classList.remove("copied");
+  }, 1500);
+}
+function showPanel(target, cursorX, cursorY) {
+  hidePanel(true);
+  state.selectedElement = target;
+  state.panelVisible = true;
+  pageClickX = cursorX + window.scrollX;
+  pageClickY = cursorY + window.scrollY;
+  const selector = generateSelector(target);
+  panelEl = document.createElement("div");
+  panelEl.className = "ag-panel" + (state.theme === "light" ? " ag-light" : "");
+  panelEl.innerHTML = createPanelHTML(target, selector);
+  panelEl.addEventListener("click", handlePanelClick);
+  state.shadowRoot?.appendChild(panelEl);
+  positionPanel();
+  requestAnimationFrame(() => {
+    panelEl?.classList.add("ag-panel-visible");
+  });
+}
+function hidePanel(immediate = false) {
+  if (!panelEl) return;
+  if (immediate) {
+    panelEl.removeEventListener("click", handlePanelClick);
+    panelEl.remove();
+    panelEl = null;
+    state.selectedElement = null;
+    state.panelVisible = false;
+    return;
+  }
+  const el = panelEl;
+  el.classList.remove("ag-panel-visible");
+  el.classList.add("ag-panel-hiding");
+  const onDone = () => {
+    el.removeEventListener("transitionend", onDone);
+    el.removeEventListener("click", handlePanelClick);
+    el.remove();
+    if (panelEl === el) panelEl = null;
+  };
+  el.addEventListener("transitionend", onDone, { once: true });
+  setTimeout(onDone, 250);
+  state.selectedElement = null;
+  state.panelVisible = false;
+}
+function repositionPanel() {
+  if (panelEl && state.panelVisible) {
+    positionPanel();
+  }
+}
+function destroyPanel() {
+  hidePanel(true);
+}
+
+function onMouseMove(e) {
+  if (!state.active) return;
+  const target = e.target;
+  if (!target || isOwnElement(target) || !isInteractable(target)) {
+    return;
+  }
+  const el = target;
+  if (state.hoveredElement === el) return;
+  state.hoveredElement = el;
+  showHighlight(el);
+  showLabel(el);
+}
+function onClick(e) {
+  if (!state.active) return;
+  const target = e.target;
+  if (!target || isOwnElement(target)) return;
+  if (!isInteractable(target)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  const el = target;
+  if (state.panelVisible && state.selectedElement === el) {
+    hidePanel();
+  } else {
+    showPanel(el, e.clientX, e.clientY);
+  }
+}
+function bindMouseEvents() {
+  document.addEventListener("mousemove", onMouseMove, true);
+  document.addEventListener("click", onClick, true);
+}
+function unbindMouseEvents() {
+  document.removeEventListener("mousemove", onMouseMove, true);
+  document.removeEventListener("click", onClick, true);
+  hideHighlight();
+  hideLabel();
+}
+
+let toggleCallback = null;
+function onKeyDown(e) {
+  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === "A") {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleCallback?.();
+    return;
+  }
+  if (e.key === "Escape" && state.active) {
+    e.preventDefault();
+    if (state.panelVisible) {
+      hidePanel();
+    } else {
+      toggleCallback?.();
+    }
+    return;
+  }
+}
+function bindKeyboardEvents(onToggle) {
+  toggleCallback = onToggle;
+  document.addEventListener("keydown", onKeyDown, true);
+}
+function unbindKeyboardEvents() {
+  document.removeEventListener("keydown", onKeyDown, true);
+  toggleCallback = null;
+}
+
+let rafId = null;
+function update() {
+  rafId = null;
+  if (!state.active) return;
+  if (state.hoveredElement) {
+    showHighlight(state.hoveredElement);
+    showLabel(state.hoveredElement);
+  }
+  if (state.panelVisible) {
+    repositionPanel();
+  }
+}
+function onScrollOrResize() {
+  if (rafId !== null) return;
+  rafId = requestAnimationFrame(update);
+}
+function bindScrollResize() {
+  window.addEventListener("scroll", onScrollOrResize, true);
+  window.addEventListener("resize", onScrollOrResize, true);
+}
+function unbindScrollResize() {
+  window.removeEventListener("scroll", onScrollOrResize, true);
+  window.removeEventListener("resize", onScrollOrResize, true);
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+}
+
+let toolbar = null;
+let themeBtn = null;
+class Inspector {
+  constructor() {
+    this.initialized = false;
+  }
+  init() {
+    if (this.initialized) return;
+    this.initialized = true;
+    const shadow = createShadowHost();
+    this.createToolbar(shadow);
+    bindKeyboardEvents(() => this.toggle());
+    bindScrollResize();
+    if (state.theme === "light") {
+      toolbar?.classList.add("ag-light");
+    }
+    if (savedActive) {
+      this.activate();
+    }
+  }
+  createToolbar(shadow) {
+    toolbar = document.createElement("div");
+    toolbar.className = "ag-toolbar";
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "ag-toggle";
+    toggleBtn.innerHTML = `<span class="ag-toggle-label">Inspect</span><span class="ag-toggle-track"><span class="ag-toggle-knob"></span></span>`;
+    toggleBtn.title = "Toggle Element Inspector (Ctrl+Shift+A)";
+    toggleBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggle();
+    });
+    const div1 = document.createElement("span");
+    div1.className = "ag-toolbar-divider";
+    const colorWrap = document.createElement("label");
+    colorWrap.className = "ag-color-picker";
+    colorWrap.title = "Highlight color";
+    const colorSwatch = document.createElement("span");
+    colorSwatch.className = "ag-color-swatch";
+    colorSwatch.style.background = state.highlightColor;
+    const colorInput = document.createElement("input");
+    colorInput.type = "color";
+    colorInput.value = state.highlightColor;
+    colorInput.addEventListener("input", (e) => {
+      e.stopPropagation();
+      const val = e.target.value;
+      state.highlightColor = val;
+      colorSwatch.style.background = val;
+      if (state.hoveredElement) {
+        showHighlight(state.hoveredElement);
+      }
+      savePrefs();
+    });
+    colorInput.addEventListener("click", (e) => e.stopPropagation());
+    colorWrap.appendChild(colorSwatch);
+    colorWrap.appendChild(colorInput);
+    const div2 = document.createElement("span");
+    div2.className = "ag-toolbar-divider";
+    themeBtn = document.createElement("button");
+    themeBtn.className = "ag-theme-btn";
+    themeBtn.title = "Toggle light/dark panel";
+    const initIcon = state.theme === "dark" ? ICONS.sun : ICONS.moon;
+    themeBtn.innerHTML = `<span class="ag-theme-icon">${initIcon}</span>`;
+    themeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleTheme();
+    });
+    toolbar.appendChild(toggleBtn);
+    toolbar.appendChild(div1);
+    toolbar.appendChild(colorWrap);
+    toolbar.appendChild(div2);
+    toolbar.appendChild(themeBtn);
+    shadow.appendChild(toolbar);
+  }
+  toggleTheme() {
+    state.theme = state.theme === "dark" ? "light" : "dark";
+    if (themeBtn) {
+      const iconWrap = themeBtn.querySelector(".ag-theme-icon");
+      if (iconWrap) {
+        iconWrap.classList.add("ag-icon-out");
+        setTimeout(() => {
+          const newIcon = state.theme === "dark" ? ICONS.sun : ICONS.moon;
+          iconWrap.innerHTML = newIcon;
+          iconWrap.classList.remove("ag-icon-out");
+          iconWrap.classList.add("ag-icon-in");
+          iconWrap.addEventListener("animationend", () => {
+            iconWrap.classList.remove("ag-icon-in");
+          }, { once: true });
+        }, 150);
+      }
+    }
+    state.shadowRoot?.querySelector(".ag-panel")?.classList.toggle("ag-light", state.theme === "light");
+    toolbar?.classList.toggle("ag-light", state.theme === "light");
+    savePrefs();
+  }
+  activate() {
+    if (state.active) return;
+    state.active = true;
+    toolbar?.querySelector(".ag-toggle")?.classList.add("active");
+    bindMouseEvents();
+    savePrefs();
+  }
+  deactivate() {
+    if (!state.active) return;
+    state.active = false;
+    toolbar?.querySelector(".ag-toggle")?.classList.remove("active");
+    unbindMouseEvents();
+    hideHighlight();
+    hideLabel();
+    hidePanel();
+    state.hoveredElement = null;
+    savePrefs();
+  }
+  toggle() {
+    if (state.active) {
+      this.deactivate();
+    } else {
+      this.activate();
+    }
+  }
+  destroy() {
+    this.deactivate();
+    unbindKeyboardEvents();
+    unbindScrollResize();
+    destroyHighlight();
+    destroyLabel();
+    destroyPanel();
+    destroyShadowHost();
+    resetState();
+    toolbar = null;
+    themeBtn = null;
+    this.initialized = false;
+  }
+  get isActive() {
+    return state.active;
+  }
+}
+
+let instance = null;
+function init() {
+  if (!instance) {
+    instance = new Inspector();
+  }
+  instance.init();
+  return instance;
+}
+function destroy() {
+  instance?.destroy();
+  instance = null;
+}
+function getInstance() {
+  return instance;
+}
+
+exports.Inspector = Inspector;
+exports.destroy = destroy;
+exports.generateSelector = generateSelector;
+exports.getInstance = getInstance;
+exports.init = init;
+//# sourceMappingURL=agentation.cjs.js.map