uidex 0.2.1 → 0.3.0

package/dist/core/index.js

@@ -1,3444 +0,0 @@
-// src/core/menu.ts
-var POSITION_CLASSES = {
-  "bottom-right": "uidex-bottom-right",
-  "bottom-left": "uidex-bottom-left",
-  "top-right": "uidex-top-right",
-  "top-left": "uidex-top-left"
-};
-var NS = "http://www.w3.org/2000/svg";
-function createIconSVG(children) {
-  const svg = document.createElementNS(NS, "svg");
-  svg.setAttribute("class", "uidex-trigger-icon");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("fill", "none");
-  svg.setAttribute("stroke", "currentColor");
-  svg.setAttribute("stroke-width", "2");
-  svg.setAttribute("stroke-linecap", "round");
-  svg.setAttribute("stroke-linejoin", "round");
-  for (const child of children) svg.appendChild(child);
-  return svg;
-}
-function createListSVG() {
-  const lines = [6, 12, 18].map((y) => {
-    const line = document.createElementNS(NS, "line");
-    line.setAttribute("x1", "4");
-    line.setAttribute("y1", String(y));
-    line.setAttribute("x2", "20");
-    line.setAttribute("y2", String(y));
-    return line;
-  });
-  return createIconSVG(lines);
-}
-function createSelectSVG() {
-  const path1 = document.createElementNS(NS, "path");
-  path1.setAttribute("d", "M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z");
-  const path2 = document.createElementNS(NS, "path");
-  path2.setAttribute("d", "M13 13l6 6");
-  return createIconSVG([path1, path2]);
-}
-function createCopySVG() {
-  const rect = document.createElementNS(NS, "rect");
-  rect.setAttribute("x", "9");
-  rect.setAttribute("y", "9");
-  rect.setAttribute("width", "13");
-  rect.setAttribute("height", "13");
-  rect.setAttribute("rx", "2");
-  const path = document.createElementNS(NS, "path");
-  path.setAttribute("d", "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1");
-  return createIconSVG([rect, path]);
-}
-function createFeedbackSVG() {
-  const path = document.createElementNS(NS, "path");
-  path.setAttribute("d", "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z");
-  return createIconSVG([path]);
-}
-var Menu = class {
-  container = null;
-  group = null;
-  expandBtn = null;
-  inspectBtn = null;
-  copyBtn = null;
-  feedbackBtn = null;
-  options;
-  // Drag state
-  isDragging = false;
-  dragStartX = 0;
-  dragStartY = 0;
-  dragStartLeft = 0;
-  dragStartTop = 0;
-  hasDragged = false;
-  boundPointerDown;
-  boundPointerMove;
-  boundPointerUp;
-  constructor(options = {}) {
-    this.options = options;
-    this.boundPointerDown = this.handlePointerDown.bind(this);
-    this.boundPointerMove = this.handlePointerMove.bind(this);
-    this.boundPointerUp = this.handlePointerUp.bind(this);
-  }
-  getContainer() {
-    return this.container;
-  }
-  /** Update a button's active state. */
-  setButtonActive(btn, active) {
-    if (!btn) return;
-    btn.classList.toggle("uidex-trigger-btn--active", active);
-    btn.setAttribute("aria-pressed", String(active));
-  }
-  setInspectActive(active) {
-    this.setButtonActive(this.inspectBtn, active);
-  }
-  setCopyActive(active) {
-    this.setButtonActive(this.copyBtn, active);
-  }
-  setFeedbackActive(active) {
-    this.setButtonActive(this.feedbackBtn, active);
-  }
-  createButton(modifier, ariaLabel, title, icon, onClick, toggle = false) {
-    const btn = document.createElement("button");
-    btn.className = `uidex-trigger-btn uidex-trigger-btn--${modifier}`;
-    btn.setAttribute("aria-label", ariaLabel);
-    if (toggle) btn.setAttribute("aria-pressed", "false");
-    btn.title = title;
-    btn.appendChild(icon);
-    btn.addEventListener("click", () => {
-      if (this.hasDragged) return;
-      onClick();
-    });
-    return btn;
-  }
-  create() {
-    this.container = document.createElement("div");
-    this.container.className = "uidex-container";
-    this.group = document.createElement("div");
-    this.group.className = "uidex-trigger-group";
-    this.inspectBtn = this.createButton("inspect", "Toggle select mode", "Select mode", createSelectSVG(), () => this.options.onInspectToggle?.(), true);
-    this.copyBtn = this.createButton("copy", "Toggle copy mode", "Copy mode", createCopySVG(), () => this.options.onCopyToggle?.(), true);
-    this.feedbackBtn = this.createButton("feedback", "Toggle feedback mode", "Feedback mode", createFeedbackSVG(), () => this.options.onFeedbackToggle?.(), true);
-    this.expandBtn = this.createButton("expand", "Open panel", "Open panel", createListSVG(), () => this.options.onExpandClick?.());
-    const buttons = [this.inspectBtn, this.copyBtn, this.feedbackBtn, this.expandBtn];
-    for (let i = 0; i < buttons.length; i++) {
-      if (i > 0) {
-        const divider = document.createElement("div");
-        divider.className = "uidex-trigger-divider";
-        this.group.appendChild(divider);
-      }
-      this.group.appendChild(buttons[i]);
-    }
-    this.group.addEventListener("pointerdown", this.boundPointerDown);
-    this.container.appendChild(this.group);
-    return this.container;
-  }
-  destroy() {
-    document.removeEventListener("pointermove", this.boundPointerMove);
-    document.removeEventListener("pointerup", this.boundPointerUp);
-    if (this.container && this.container.parentNode) {
-      this.container.parentNode.removeChild(this.container);
-    }
-    this.container = null;
-    this.group = null;
-    this.expandBtn = null;
-    this.inspectBtn = null;
-    this.copyBtn = null;
-    this.feedbackBtn = null;
-  }
-  // ——— Drag handling ———
-  handlePointerDown(e) {
-    if (!this.container) return;
-    this.hasDragged = false;
-    this.isDragging = true;
-    this.dragStartX = e.clientX;
-    this.dragStartY = e.clientY;
-    const rect = this.container.getBoundingClientRect();
-    this.dragStartLeft = rect.left;
-    this.dragStartTop = rect.top;
-    this.container.classList.add("uidex-container--dragging");
-    document.addEventListener("pointermove", this.boundPointerMove);
-    document.addEventListener("pointerup", this.boundPointerUp);
-  }
-  handlePointerMove(e) {
-    if (!this.isDragging || !this.container) return;
-    const dx = e.clientX - this.dragStartX;
-    const dy = e.clientY - this.dragStartY;
-    if (!this.hasDragged && Math.abs(dx) < 4 && Math.abs(dy) < 4) return;
-    this.hasDragged = true;
-    const newLeft = this.dragStartLeft + dx;
-    const newTop = this.dragStartTop + dy;
-    this.container.classList.remove(
-      "uidex-bottom-right",
-      "uidex-bottom-left",
-      "uidex-top-right",
-      "uidex-top-left"
-    );
-    this.container.style.left = `${newLeft}px`;
-    this.container.style.top = `${newTop}px`;
-    this.container.style.right = "auto";
-    this.container.style.bottom = "auto";
-  }
-  handlePointerUp() {
-    if (!this.isDragging || !this.container) return;
-    this.isDragging = false;
-    this.container.classList.remove("uidex-container--dragging");
-    document.removeEventListener("pointermove", this.boundPointerMove);
-    document.removeEventListener("pointerup", this.boundPointerUp);
-    if (!this.hasDragged) return;
-    this.snapToCorner();
-  }
-  snapToCorner() {
-    if (!this.container) return;
-    const rect = this.container.getBoundingClientRect();
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-    const vpW = window.innerWidth;
-    const vpH = window.innerHeight;
-    const isRight = centerX > vpW / 2;
-    const isBottom = centerY > vpH / 2;
-    let corner;
-    if (isBottom && isRight) corner = "bottom-right";
-    else if (isBottom && !isRight) corner = "bottom-left";
-    else if (!isBottom && isRight) corner = "top-right";
-    else corner = "top-left";
-    this.container.style.left = "";
-    this.container.style.top = "";
-    this.container.style.right = "";
-    this.container.style.bottom = "";
-    this.container.classList.add(POSITION_CLASSES[corner]);
-  }
-};
-
-// src/core/utils.ts
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-function getContrastColor(hexColor) {
-  const hex = hexColor.replace("#", "");
-  const r = parseInt(hex.substring(0, 2), 16);
-  const g = parseInt(hex.substring(2, 4), 16);
-  const b = parseInt(hex.substring(4, 6), 16);
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.5 ? "#000000" : "#ffffff";
-}
-function hexToRgba(hex, alpha) {
-  const hexValue = hex.replace("#", "");
-  const r = parseInt(hexValue.substring(0, 2), 16);
-  const g = parseInt(hexValue.substring(2, 4), 16);
-  const b = parseInt(hexValue.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-function resolveColor(color, colorMap) {
-  if (!color) return void 0;
-  if (color.startsWith("#")) return color;
-  return colorMap?.[color] ?? color;
-}
-
-// src/core/overlay.ts
-var DEFAULT_COLOR = "#3b82f6";
-var DEFAULT_BORDER_STYLE = "solid";
-var DEFAULT_BORDER_WIDTH = 2;
-var DEFAULT_LABEL_POSITION = "top-left";
-var LABEL_POSITION_CLASSES = {
-  "top-left": "uidex-label-top-left",
-  "top-right": "uidex-label-top-right",
-  "bottom-left": "uidex-label-bottom-left",
-  "bottom-right": "uidex-label-bottom-right"
-};
-var Overlay = class {
-  element = null;
-  labelElement = null;
-  target = null;
-  options;
-  boundUpdatePosition;
-  rafId = null;
-  constructor(options = {}) {
-    this.options = options;
-    this.boundUpdatePosition = () => {
-      if (this.rafId !== null) return;
-      this.rafId = requestAnimationFrame(() => {
-        this.rafId = null;
-        this.updatePosition();
-      });
-    };
-  }
-  show(target, label) {
-    this.target = target;
-    if (!this.element) {
-      this.createElement();
-    }
-    if (label !== void 0) {
-      this.options.label = label;
-    }
-    this.updateLabel();
-    this.updatePosition();
-    this.addListeners();
-    if (this.element && !this.element.parentNode) {
-      document.body.appendChild(this.element);
-    }
-  }
-  hide() {
-    this.removeListeners();
-    if (this.element && this.element.parentNode) {
-      this.element.parentNode.removeChild(this.element);
-    }
-    this.target = null;
-  }
-  destroy() {
-    this.hide();
-    this.element = null;
-    this.labelElement = null;
-  }
-  updateOptions(options) {
-    this.options = { ...this.options, ...options };
-    this.updateStyles();
-    this.updateLabel();
-  }
-  createElement() {
-    this.element = document.createElement("div");
-    this.element.className = "uidex-overlay";
-    this.element.setAttribute("data-testid", "annotation-overlay");
-    this.element.style.position = "fixed";
-    this.element.style.pointerEvents = "none";
-    this.element.style.zIndex = "2147483645";
-    this.labelElement = document.createElement("span");
-    this.element.appendChild(this.labelElement);
-    this.updateStyles();
-  }
-  updateStyles() {
-    if (!this.element) return;
-    const {
-      color,
-      borderStyle = DEFAULT_BORDER_STYLE,
-      borderWidth = DEFAULT_BORDER_WIDTH,
-      colors
-    } = this.options;
-    const resolvedColor = resolveColor(color, colors) ?? DEFAULT_COLOR;
-    this.element.style.borderColor = resolvedColor;
-    this.element.style.borderWidth = `${borderWidth}px`;
-    this.element.style.borderStyle = borderStyle;
-  }
-  updateLabel() {
-    if (!this.labelElement) return;
-    const {
-      label,
-      showLabel = true,
-      labelPosition = DEFAULT_LABEL_POSITION,
-      color,
-      colors
-    } = this.options;
-    if (!showLabel || !label) {
-      this.labelElement.style.display = "none";
-      return;
-    }
-    const resolvedColor = resolveColor(color, colors) ?? DEFAULT_COLOR;
-    this.labelElement.style.display = "";
-    this.labelElement.className = classNames(
-      "uidex-label",
-      LABEL_POSITION_CLASSES[labelPosition]
-    );
-    this.labelElement.style.position = "absolute";
-    this.labelElement.style.fontFamily = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
-    this.labelElement.style.fontSize = "11px";
-    this.labelElement.style.fontWeight = "500";
-    this.labelElement.style.padding = "2px 6px";
-    this.labelElement.style.borderRadius = "4px";
-    this.labelElement.style.whiteSpace = "nowrap";
-    this.labelElement.style.backgroundColor = resolvedColor;
-    this.labelElement.style.color = getContrastColor(resolvedColor);
-    this.labelElement.textContent = label;
-    this.applyLabelPosition(labelPosition);
-  }
-  applyLabelPosition(position) {
-    if (!this.labelElement) return;
-    this.labelElement.style.top = "";
-    this.labelElement.style.bottom = "";
-    this.labelElement.style.left = "";
-    this.labelElement.style.right = "";
-    this.labelElement.style.transform = "";
-    switch (position) {
-      case "top-left":
-        this.labelElement.style.top = "-8px";
-        this.labelElement.style.left = "-2px";
-        this.labelElement.style.transform = "translateY(-100%)";
-        break;
-      case "top-right":
-        this.labelElement.style.top = "-8px";
-        this.labelElement.style.right = "-2px";
-        this.labelElement.style.transform = "translateY(-100%)";
-        break;
-      case "bottom-left":
-        this.labelElement.style.bottom = "-8px";
-        this.labelElement.style.left = "-2px";
-        this.labelElement.style.transform = "translateY(100%)";
-        break;
-      case "bottom-right":
-        this.labelElement.style.bottom = "-8px";
-        this.labelElement.style.right = "-2px";
-        this.labelElement.style.transform = "translateY(100%)";
-        break;
-    }
-  }
-  updatePosition() {
-    if (!this.element || !this.target) return;
-    const rect = this.target.getBoundingClientRect();
-    this.element.style.top = `${rect.top}px`;
-    this.element.style.left = `${rect.left}px`;
-    this.element.style.width = `${rect.width}px`;
-    this.element.style.height = `${rect.height}px`;
-    this.clampLabel(rect);
-  }
-  /** Move the label inside the overlay when there is no room outside. */
-  clampLabel(rect) {
-    if (!this.labelElement || this.labelElement.style.display === "none") return;
-    const {
-      labelPosition = DEFAULT_LABEL_POSITION
-    } = this.options;
-    const isTop = labelPosition === "top-left" || labelPosition === "top-right";
-    const labelHeight = 20;
-    if (isTop && rect.top < labelHeight) {
-      this.labelElement.style.top = "4px";
-      this.labelElement.style.transform = "";
-    } else if (!isTop && window.innerHeight - rect.bottom < labelHeight) {
-      this.labelElement.style.bottom = "4px";
-      this.labelElement.style.transform = "";
-    }
-  }
-  addListeners() {
-    window.addEventListener("resize", this.boundUpdatePosition);
-    window.addEventListener("scroll", this.boundUpdatePosition, { capture: true, passive: true });
-  }
-  removeListeners() {
-    window.removeEventListener("resize", this.boundUpdatePosition);
-    window.removeEventListener("scroll", this.boundUpdatePosition, { capture: true });
-    if (this.rafId !== null) {
-      cancelAnimationFrame(this.rafId);
-      this.rafId = null;
-    }
-  }
-};
-
-// src/core/inspector.ts
-var DEFAULT_SHORTCUT = {
-  key: "u",
-  shiftKey: true,
-  metaKey: true
-};
-var INSPECTING_CLASS = "uidex-inspecting";
-var INSPECTING_STYLE_ID = "uidex-inspecting-style";
-var INSPECTING_CSS = `body.${INSPECTING_CLASS},body.${INSPECTING_CLASS} *{cursor:crosshair!important}`;
-function isEditableTarget(target) {
-  if (!(target instanceof HTMLElement)) return false;
-  return target.isContentEditable || target.getAttribute("contenteditable") === "true" || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
-}
-function matchesShortcut(e, shortcut) {
-  return e.key.toLowerCase() === shortcut.key.toLowerCase() && !!e.ctrlKey === !!shortcut.ctrlKey && !!e.shiftKey === !!shortcut.shiftKey && !!e.altKey === !!shortcut.altKey && !!e.metaKey === !!shortcut.metaKey;
-}
-function findAnnotatedAncestor(target) {
-  if (!(target instanceof Element)) return null;
-  if (target.closest(".uidex-container")) return null;
-  const annotated = target.closest("[data-uidex]");
-  if (!(annotated instanceof HTMLElement)) return null;
-  const id = annotated.getAttribute("data-uidex");
-  if (!id) return null;
-  return { element: annotated, id };
-}
-var Inspector = class {
-  active = false;
-  shortcut;
-  currentTarget = null;
-  onHighlight;
-  onSelect;
-  onActivate;
-  onDeactivate;
-  boundKeyDown;
-  boundMouseMove;
-  boundClick;
-  constructor(options = {}) {
-    this.shortcut = options.shortcut ?? DEFAULT_SHORTCUT;
-    this.onHighlight = options.onHighlight;
-    this.onSelect = options.onSelect;
-    this.onActivate = options.onActivate;
-    this.onDeactivate = options.onDeactivate;
-    this.boundKeyDown = this.handleKeyDown.bind(this);
-    this.boundMouseMove = this.handleMouseMove.bind(this);
-    this.boundClick = this.handleClick.bind(this);
-  }
-  mount() {
-    document.addEventListener("keydown", this.boundKeyDown);
-    if (!document.getElementById(INSPECTING_STYLE_ID)) {
-      const style = document.createElement("style");
-      style.id = INSPECTING_STYLE_ID;
-      style.textContent = INSPECTING_CSS;
-      document.head.appendChild(style);
-    }
-  }
-  destroy() {
-    if (this.active) {
-      this.deactivate();
-    }
-    document.removeEventListener("keydown", this.boundKeyDown);
-    document.getElementById(INSPECTING_STYLE_ID)?.remove();
-  }
-  activate() {
-    if (this.active) return;
-    this.active = true;
-    this.currentTarget = null;
-    document.addEventListener("mousemove", this.boundMouseMove);
-    document.addEventListener("click", this.boundClick, true);
-    document.body.classList.add(INSPECTING_CLASS);
-    this.onActivate?.();
-  }
-  deactivate() {
-    if (!this.active) return;
-    this.active = false;
-    this.currentTarget = null;
-    document.removeEventListener("mousemove", this.boundMouseMove);
-    document.removeEventListener("click", this.boundClick, true);
-    document.body.classList.remove(INSPECTING_CLASS);
-    this.onHighlight?.(null, null);
-    this.onDeactivate?.();
-  }
-  isActive() {
-    return this.active;
-  }
-  handleKeyDown(e) {
-    if (this.active && e.key === "Escape") {
-      e.preventDefault();
-      this.deactivate();
-      return;
-    }
-    if (isEditableTarget(e.target)) return;
-    if (matchesShortcut(e, this.shortcut)) {
-      e.preventDefault();
-      if (this.active) {
-        this.deactivate();
-      } else {
-        this.activate();
-      }
-    }
-  }
-  handleMouseMove(e) {
-    const result = findAnnotatedAncestor(e.target);
-    if (result) {
-      if (result.element !== this.currentTarget) {
-        this.currentTarget = result.element;
-        this.onHighlight?.(result.element, result.id);
-      }
-    } else if (this.currentTarget) {
-      this.currentTarget = null;
-      this.onHighlight?.(null, null);
-    }
-  }
-  handleClick(e) {
-    if (!(e.target instanceof Element)) return;
-    if (e.target.closest(".uidex-container")) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const result = findAnnotatedAncestor(e.target);
-    if (result) {
-      this.onSelect?.(result.element, result.id);
-    }
-    this.deactivate();
-  }
-};
-
-// src/core/ingest.ts
-var MAX_CONSOLE_LOGS = 50;
-var MAX_NETWORK_ERRORS = 20;
-var nativeFetch = null;
-function safeStringify(value) {
-  if (typeof value === "string") return value;
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-var IngestCapture = class {
-  constructor(captureConsole, captureNetwork) {
-    this.captureConsole = captureConsole;
-    this.captureNetwork = captureNetwork;
-  }
-  consoleLogs = [];
-  networkErrors = [];
-  originalConsoleWarn = null;
-  originalConsoleError = null;
-  originalFetch = null;
-  start() {
-    this.consoleLogs = [];
-    this.networkErrors = [];
-    if (this.captureConsole) this.interceptConsole();
-    if (this.captureNetwork) this.interceptNetwork();
-  }
-  stop() {
-    this.restoreConsole();
-    this.restoreNetwork();
-  }
-  getConsoleLogs() {
-    return [...this.consoleLogs];
-  }
-  getNetworkErrors() {
-    return [...this.networkErrors];
-  }
-  interceptConsole() {
-    if (this.originalConsoleWarn) return;
-    this.originalConsoleWarn = console.warn;
-    this.originalConsoleError = console.error;
-    console.warn = (...args) => {
-      this.addConsoleLog("warn", args);
-      this.originalConsoleWarn.apply(console, args);
-    };
-    console.error = (...args) => {
-      this.addConsoleLog("error", args);
-      this.originalConsoleError.apply(console, args);
-    };
-  }
-  addConsoleLog(level, args) {
-    this.consoleLogs.push({
-      level,
-      message: args.map(safeStringify).join(" "),
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    if (this.consoleLogs.length > MAX_CONSOLE_LOGS) {
-      this.consoleLogs.shift();
-    }
-  }
-  restoreConsole() {
-    if (this.originalConsoleWarn) {
-      console.warn = this.originalConsoleWarn;
-      this.originalConsoleWarn = null;
-    }
-    if (this.originalConsoleError) {
-      console.error = this.originalConsoleError;
-      this.originalConsoleError = null;
-    }
-  }
-  interceptNetwork() {
-    if (this.originalFetch) return;
-    this.originalFetch = window.fetch;
-    if (!nativeFetch) nativeFetch = this.originalFetch;
-    window.fetch = async (...args) => {
-      try {
-        const response = await this.originalFetch.apply(window, args);
-        if (!response.ok) {
-          this.addNetworkError(args[0], args[1]?.method, response.status, response.statusText);
-        }
-        return response;
-      } catch (error) {
-        this.addNetworkError(
-          args[0],
-          args[1]?.method,
-          null,
-          error instanceof Error ? error.message : "Network error"
-        );
-        throw error;
-      }
-    };
-  }
-  addNetworkError(input, method, status, statusText) {
-    let url;
-    if (typeof input === "string") {
-      url = input;
-    } else if (input instanceof URL) {
-      url = input.href;
-    } else {
-      url = input.url;
-      method ??= input.method;
-    }
-    this.networkErrors.push({
-      url,
-      method: method ?? "GET",
-      status,
-      statusText,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    if (this.networkErrors.length > MAX_NETWORK_ERRORS) {
-      this.networkErrors.shift();
-    }
-  }
-  restoreNetwork() {
-    if (this.originalFetch) {
-      window.fetch = this.originalFetch;
-      this.originalFetch = null;
-    }
-  }
-};
-function generateSessionId() {
-  if (typeof crypto !== "undefined" && crypto.randomUUID) {
-    return crypto.randomUUID();
-  }
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    const v = c === "x" ? r : r & 3 | 8;
-    return v.toString(16);
-  });
-}
-async function submitFeedback(endpoint, apiKey, report) {
-  const fetchFn = nativeFetch ?? fetch;
-  const response = await fetchFn(endpoint, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${apiKey}`
-    },
-    body: JSON.stringify(report)
-  });
-  if (!response.ok) {
-    const text = await response.text().catch(() => "");
-    throw new Error(`Ingest failed (${response.status}): ${text}`);
-  }
-  return response.json();
-}
-
-// src/core/modal.ts
-var Modal = class _Modal {
-  backdrop = null;
-  sidebar = null;
-  mainContent = null;
-  renderTarget = document.body;
-  boundKeyDown;
-  data = {
-    pages: [],
-    features: [],
-    components: {},
-    presentIds: /* @__PURE__ */ new Set()
-  };
-  currentView = null;
-  modalType = null;
-  sidebarLevel = "root";
-  expandedGroups = /* @__PURE__ */ new Set();
-  searchQuery = "";
-  searchInput = null;
-  options;
-  static VIEW_TYPE_TO_LEVEL = {
-    page: "pages",
-    feature: "features",
-    component: "components",
-    graph: "root"
-  };
-  /** Strip the scanner root dir (e.g. "app") so pages display as routes: app → /, app/foo → /foo */
-  static formatPageDir(dir) {
-    const parts = dir.split("/");
-    const route = parts.slice(1).join("/");
-    return "/" + route;
-  }
-  constructor(options = {}) {
-    this.options = options;
-    this.boundKeyDown = this.handleKeyDown.bind(this);
-  }
-  /** Set the shadow root to render modals into. */
-  setShadowRoot(root) {
-    this.renderTarget = root;
-  }
-  /** Update the data model. Refreshes sidebar and content if modal is open. */
-  setData(data) {
-    this.data = data;
-    if (this.backdrop) {
-      this.renderSidebar();
-      if (this.currentView) {
-        this.renderMainContent(this.currentView);
-      }
-    }
-  }
-  /** Open the modal. If already open, navigates to the given view. */
-  open(view) {
-    if (this.backdrop && this.modalType === "panel") {
-      if (view) this.navigateTo(view);
-      return;
-    }
-    this.createShell();
-    const targetView = view ?? this.getDefaultView();
-    if (targetView) {
-      this.navigateTo(targetView);
-    }
-  }
-  /** Navigate to a view within the open modal. */
-  navigateTo(view) {
-    this.currentView = view;
-    if (this.searchQuery) {
-      this.searchQuery = "";
-      if (this.searchInput) this.searchInput.value = "";
-    }
-    const newLevel = _Modal.VIEW_TYPE_TO_LEVEL[view.type];
-    const levelChanged = this.sidebarLevel !== newLevel;
-    if (levelChanged) {
-      this.sidebarLevel = newLevel;
-    }
-    if (view.type === "component") {
-      this.expandedGroups.add(this.getComponentPrefix(view.id));
-    }
-    if (levelChanged || view.type === "component") {
-      this.renderSidebar();
-    } else {
-      this.updateSidebarActive();
-    }
-    this.renderMainContent(view);
-    if (view.type === "component") {
-      this.options.onComponentNavigate?.(view.id);
-    }
-  }
-  hide() {
-    if (this.backdrop && this.backdrop.parentNode) {
-      this.backdrop.parentNode.removeChild(this.backdrop);
-    }
-    this.backdrop = null;
-    this.sidebar = null;
-    this.mainContent = null;
-    this.currentView = null;
-    this.modalType = null;
-    this.sidebarLevel = "root";
-    this.expandedGroups = /* @__PURE__ */ new Set();
-    this.searchQuery = "";
-    this.searchInput = null;
-    document.removeEventListener("keydown", this.boundKeyDown);
-  }
-  destroy() {
-    this.hide();
-  }
-  isOpen() {
-    return this.backdrop !== null;
-  }
-  // ——— Default view selection ———
-  getDefaultView() {
-    const visiblePage = this.data.pages.find(
-      (p) => p.componentIds.some((id) => this.data.presentIds.has(id))
-    );
-    if (visiblePage) return { type: "page", dir: visiblePage.dir };
-    if (this.data.pages.length > 0)
-      return { type: "page", dir: this.data.pages[0].dir };
-    if (this.data.features.length > 0)
-      return { type: "feature", dir: this.data.features[0].dir };
-    const firstPresent = [...this.data.presentIds][0];
-    if (firstPresent) return { type: "component", id: firstPresent };
-    const firstId = Object.keys(this.data.components)[0];
-    if (firstId) return { type: "component", id: firstId };
-    return null;
-  }
-  // ——— Shell creation ———
-  /**
-   * Create the shared modal frame: backdrop, dialog, header (title + close), and mount.
-   * Returns the dialog and header elements so callers can append extra header/body content.
-   */
-  createModalFrame(opts) {
-    this.hide();
-    this.modalType = opts.type;
-    this.backdrop = document.createElement("div");
-    this.backdrop.className = "uidex-modal-backdrop";
-    this.backdrop.addEventListener("click", (e) => {
-      if (e.target === this.backdrop) this.hide();
-    });
-    const dialog = document.createElement("div");
-    dialog.className = `uidex-modal uidex-modal--${opts.type}`;
-    dialog.setAttribute("role", "dialog");
-    dialog.setAttribute("aria-label", opts.ariaLabel);
-    const header = document.createElement("div");
-    header.className = "uidex-modal-header";
-    const title = document.createElement("h2");
-    title.className = "uidex-modal-title";
-    title.textContent = opts.title;
-    header.appendChild(title);
-    return { dialog, header };
-  }
-  /** Finalize modal frame: append close button to header, header to dialog, mount to DOM. */
-  mountModalFrame(dialog, header) {
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "uidex-modal-close";
-    closeBtn.setAttribute("aria-label", "Close");
-    closeBtn.textContent = "\xD7";
-    closeBtn.addEventListener("click", () => this.hide());
-    header.appendChild(closeBtn);
-    dialog.appendChild(header);
-    this.backdrop.appendChild(dialog);
-    this.renderTarget.appendChild(this.backdrop);
-    document.addEventListener("keydown", this.boundKeyDown);
-  }
-  createShell() {
-    const { dialog, header } = this.createModalFrame({
-      type: "panel",
-      title: "uidex",
-      ariaLabel: "uidex"
-    });
-    this.searchInput = document.createElement("input");
-    this.searchInput.type = "text";
-    this.searchInput.className = "uidex-search-input";
-    this.searchInput.placeholder = "Search\u2026";
-    this.searchInput.addEventListener("input", () => {
-      this.searchQuery = this.searchInput.value;
-      this.renderSidebar();
-    });
-    this.searchInput.addEventListener("keydown", (e) => {
-      if (e.key !== "Escape" || this.searchQuery) {
-        e.stopPropagation();
-      }
-      if (e.key === "Enter") {
-        const results = this.getSearchResults();
-        if (results.pages.length > 0) {
-          this.navigateTo({ type: "page", dir: results.pages[0].dir });
-        } else if (results.features.length > 0) {
-          this.navigateTo({ type: "feature", dir: results.features[0].dir });
-        } else if (results.components.length > 0) {
-          this.navigateTo({ type: "component", id: results.components[0] });
-        }
-        e.preventDefault();
-      }
-      if (e.key === "Escape" && this.searchQuery) {
-        this.searchQuery = "";
-        this.searchInput.value = "";
-        this.renderSidebar();
-      }
-    });
-    header.appendChild(this.searchInput);
-    this.mountModalFrame(dialog, header);
-    const body = document.createElement("div");
-    body.className = "uidex-panel-body";
-    this.sidebar = document.createElement("div");
-    this.sidebar.className = "uidex-panel-sidebar";
-    this.renderSidebar();
-    this.mainContent = document.createElement("div");
-    this.mainContent.className = "uidex-panel-main";
-    body.appendChild(this.sidebar);
-    body.appendChild(this.mainContent);
-    dialog.appendChild(body);
-  }
-  // ——— Sidebar ———
-  renderSidebar() {
-    if (!this.sidebar) return;
-    this.sidebar.innerHTML = "";
-    if (this.searchQuery) {
-      this.renderSearchResults();
-    } else if (this.sidebarLevel === "root") {
-      this.renderSidebarRoot();
-    } else {
-      this.renderSidebarSublevel(this.sidebarLevel);
-    }
-    this.updateSidebarActive();
-  }
-  renderSidebarRoot() {
-    if (!this.sidebar) return;
-    const categories = [];
-    if (this.data.pages.length > 0) {
-      categories.push({ label: "Pages", level: "pages", count: this.data.pages.length });
-    }
-    if (this.data.features.length > 0) {
-      categories.push({ label: "Features", level: "features", count: this.data.features.length });
-    }
-    const componentCount = Object.keys(this.data.components).length;
-    if (componentCount > 0) {
-      categories.push({ label: "Components", level: "components", count: componentCount });
-    }
-    for (const cat of categories) {
-      const item = document.createElement("div");
-      item.className = `uidex-sidebar-root-item uidex-sidebar-root-item--${cat.level}`;
-      item.addEventListener("click", () => {
-        this.sidebarLevel = cat.level;
-        this.renderSidebar();
-        if (!this.currentView || !this.currentViewMatchesLevel(cat.level)) {
-          const firstView = this.getFirstViewForLevel(cat.level);
-          if (firstView) this.navigateTo(firstView);
-        }
-      });
-      const label = document.createElement("span");
-      label.className = "uidex-sidebar-root-label";
-      label.textContent = cat.label;
-      item.appendChild(label);
-      const count = document.createElement("span");
-      count.className = "uidex-sidebar-count";
-      count.textContent = `(${cat.count})`;
-      item.appendChild(count);
-      const chevron = document.createElement("span");
-      chevron.className = "uidex-sidebar-chevron";
-      chevron.textContent = "\u203A";
-      item.appendChild(chevron);
-      this.sidebar.appendChild(item);
-    }
-    const hasRelationships = this.data.pages.length > 0 || this.data.features.length > 0;
-    if (hasRelationships) {
-      const divider = document.createElement("div");
-      divider.className = "uidex-sidebar-divider";
-      this.sidebar.appendChild(divider);
-      const mapItem = document.createElement("div");
-      mapItem.className = "uidex-sidebar-root-item";
-      mapItem.dataset.viewType = "graph";
-      mapItem.addEventListener("click", () => this.navigateTo({ type: "graph" }));
-      const mapLabel = document.createElement("span");
-      mapLabel.className = "uidex-sidebar-root-label";
-      mapLabel.textContent = "Map";
-      mapItem.appendChild(mapLabel);
-      const mapChevron = document.createElement("span");
-      mapChevron.className = "uidex-sidebar-chevron";
-      mapChevron.textContent = "\u203A";
-      mapItem.appendChild(mapChevron);
-      this.sidebar.appendChild(mapItem);
-    }
-  }
-  renderSidebarSublevel(level) {
-    if (!this.sidebar) return;
-    const labelMap = { pages: "Pages", features: "Features", components: "Components" };
-    const back = document.createElement("div");
-    back.className = "uidex-sidebar-back";
-    back.addEventListener("click", () => {
-      this.sidebarLevel = "root";
-      this.renderSidebar();
-    });
-    const arrow = document.createElement("span");
-    arrow.className = "uidex-sidebar-back-arrow";
-    arrow.textContent = "\u2039";
-    back.appendChild(arrow);
-    const backLabel = document.createElement("span");
-    backLabel.textContent = labelMap[level];
-    back.appendChild(backLabel);
-    this.sidebar.appendChild(back);
-    if (level === "pages") {
-      for (const page of this.data.pages) {
-        const hasVisible = page.componentIds.some((id) => this.data.presentIds.has(id));
-        const item = this.createSidebarItem(_Modal.formatPageDir(page.dir), !hasVisible);
-        item.classList.add("uidex-sidebar-item--mono", "uidex-sidebar-item--pages");
-        item.dataset.viewType = "page";
-        item.dataset.viewId = page.dir;
-        item.addEventListener("click", () => this.navigateTo({ type: "page", dir: page.dir }));
-        this.sidebar.appendChild(item);
-      }
-    } else if (level === "features") {
-      for (const feature of this.data.features) {
-        const hasVisible = feature.componentIds.some((id) => this.data.presentIds.has(id));
-        const item = this.createSidebarItem(feature.title, !hasVisible);
-        item.classList.add("uidex-sidebar-item--features");
-        item.dataset.viewType = "feature";
-        item.dataset.viewId = feature.dir;
-        item.addEventListener("click", () => this.navigateTo({ type: "feature", dir: feature.dir }));
-        this.sidebar.appendChild(item);
-      }
-    } else {
-      const groups = this.groupComponentsByPrefix(Object.keys(this.data.components));
-      if (groups.size === 1) {
-        const onlyKey = groups.keys().next().value;
-        this.expandedGroups.add(onlyKey);
-      }
-      for (const [prefix, ids] of groups) {
-        const isExpanded = this.expandedGroups.has(prefix);
-        const header = document.createElement("div");
-        header.className = "uidex-sidebar-group-header";
-        if (isExpanded) header.classList.add("uidex-sidebar-group-header--expanded");
-        header.addEventListener("click", () => {
-          if (this.expandedGroups.has(prefix)) {
-            this.expandedGroups.delete(prefix);
-          } else {
-            this.expandedGroups.add(prefix);
-          }
-          this.renderSidebar();
-        });
-        const chevron = document.createElement("span");
-        chevron.className = "uidex-sidebar-group-chevron";
-        chevron.textContent = "\u203A";
-        header.appendChild(chevron);
-        const label = document.createElement("span");
-        label.className = "uidex-sidebar-group-label";
-        label.textContent = prefix;
-        header.appendChild(label);
-        const count = document.createElement("span");
-        count.className = "uidex-sidebar-group-count";
-        count.textContent = `${ids.length}`;
-        header.appendChild(count);
-        this.sidebar.appendChild(header);
-        if (isExpanded) {
-          for (const id of ids) {
-            const isPresent = this.data.presentIds.has(id);
-            const item = this.createSidebarItem(id, !isPresent);
-            item.classList.add("uidex-sidebar-item--mono", "uidex-sidebar-item--grouped", "uidex-sidebar-item--components");
-            item.dataset.viewType = "component";
-            item.dataset.viewId = id;
-            item.addEventListener("click", () => this.navigateTo({ type: "component", id }));
-            this.sidebar.appendChild(item);
-          }
-        }
-      }
-    }
-  }
-  currentViewMatchesLevel(level) {
-    if (!this.currentView) return false;
-    return _Modal.VIEW_TYPE_TO_LEVEL[this.currentView.type] === level;
-  }
-  getFirstViewForLevel(level) {
-    if (level === "pages" && this.data.pages.length > 0) {
-      return { type: "page", dir: this.data.pages[0].dir };
-    }
-    if (level === "features" && this.data.features.length > 0) {
-      return { type: "feature", dir: this.data.features[0].dir };
-    }
-    if (level === "components") {
-      const firstId = Object.keys(this.data.components)[0];
-      if (firstId) return { type: "component", id: firstId };
-    }
-    return null;
-  }
-  getComponentPrefix(id) {
-    const dashIndex = id.indexOf("-");
-    return dashIndex === -1 ? id : id.substring(0, dashIndex);
-  }
-  groupComponentsByPrefix(ids) {
-    const groups = /* @__PURE__ */ new Map();
-    for (const id of ids) {
-      const prefix = this.getComponentPrefix(id);
-      let group = groups.get(prefix);
-      if (!group) {
-        group = [];
-        groups.set(prefix, group);
-      }
-      group.push(id);
-    }
-    return groups;
-  }
-  createSidebarItem(text, dimmed) {
-    const item = document.createElement("div");
-    item.className = "uidex-sidebar-item";
-    if (dimmed) item.classList.add("uidex-sidebar-item--dimmed");
-    item.textContent = text;
-    return item;
-  }
-  updateSidebarActive() {
-    if (!this.sidebar || !this.currentView) return;
-    const mapItem = this.sidebar.querySelector('[data-view-type="graph"]');
-    if (mapItem) {
-      mapItem.classList.toggle(
-        "uidex-sidebar-root-item--active",
-        this.currentView.type === "graph"
-      );
-    }
-    if (this.currentView.type === "graph") return;
-    const activeId = this.currentView.type === "component" ? this.currentView.id : this.currentView.dir;
-    for (const el of this.sidebar.querySelectorAll(".uidex-sidebar-item")) {
-      const item = el;
-      const matches = item.dataset.viewType === this.currentView.type && item.dataset.viewId === activeId;
-      item.classList.toggle("uidex-sidebar-item--active", matches);
-    }
-  }
-  // ——— Search ———
-  getSearchResults() {
-    const q = this.searchQuery.toLowerCase();
-    return {
-      pages: this.data.pages.filter(
-        (p) => p.title.toLowerCase().includes(q) || _Modal.formatPageDir(p.dir).toLowerCase().includes(q)
-      ),
-      features: this.data.features.filter(
-        (f) => f.title.toLowerCase().includes(q) || f.dir.toLowerCase().includes(q)
-      ),
-      components: Object.keys(this.data.components).filter((id) => {
-        if (id.toLowerCase().includes(q)) return true;
-        const doc = this.data.components[id]?.find((l) => l.doc)?.doc;
-        return doc ? doc.toLowerCase().includes(q) : false;
-      })
-    };
-  }
-  renderSearchResults() {
-    if (!this.sidebar) return;
-    const results = this.getSearchResults();
-    const hasResults = results.pages.length > 0 || results.features.length > 0 || results.components.length > 0;
-    if (!hasResults) {
-      const empty = document.createElement("div");
-      empty.className = "uidex-search-empty";
-      empty.textContent = "No results";
-      this.sidebar.appendChild(empty);
-      return;
-    }
-    if (results.pages.length > 0) {
-      const label = document.createElement("div");
-      label.className = "uidex-search-group-label uidex-search-group-label--pages";
-      label.textContent = "Pages";
-      this.sidebar.appendChild(label);
-      for (const page of results.pages) {
-        const item = this.createSidebarItem(_Modal.formatPageDir(page.dir), false);
-        item.classList.add("uidex-sidebar-item--mono", "uidex-sidebar-item--pages");
-        item.addEventListener(
-          "click",
-          () => this.navigateTo({ type: "page", dir: page.dir })
-        );
-        this.sidebar.appendChild(item);
-      }
-    }
-    if (results.features.length > 0) {
-      const label = document.createElement("div");
-      label.className = "uidex-search-group-label uidex-search-group-label--features";
-      label.textContent = "Features";
-      this.sidebar.appendChild(label);
-      for (const feature of results.features) {
-        const item = this.createSidebarItem(feature.title, false);
-        item.classList.add("uidex-sidebar-item--features");
-        item.addEventListener(
-          "click",
-          () => this.navigateTo({ type: "feature", dir: feature.dir })
-        );
-        this.sidebar.appendChild(item);
-      }
-    }
-    if (results.components.length > 0) {
-      const label = document.createElement("div");
-      label.className = "uidex-search-group-label uidex-search-group-label--components";
-      label.textContent = "Components";
-      this.sidebar.appendChild(label);
-      for (const id of results.components) {
-        const item = this.createSidebarItem(id, false);
-        item.classList.add("uidex-sidebar-item--mono", "uidex-sidebar-item--components");
-        item.addEventListener(
-          "click",
-          () => this.navigateTo({ type: "component", id })
-        );
-        this.sidebar.appendChild(item);
-      }
-    }
-  }
-  // ——— Main content rendering ———
-  renderMainContent(view) {
-    if (!this.mainContent) return;
-    this.mainContent.innerHTML = "";
-    this.mainContent.scrollTop = 0;
-    switch (view.type) {
-      case "page":
-        this.renderPageView(view.dir);
-        break;
-      case "feature":
-        this.renderFeatureView(view.dir);
-        break;
-      case "component":
-        this.renderComponentView(view.id);
-        break;
-      case "graph":
-        this.renderGraphView();
-        break;
-    }
-  }
-  renderPageView(dir) {
-    const page = this.data.pages.find((p) => p.dir === dir);
-    if (!page || !this.mainContent) return;
-    const title = document.createElement("h3");
-    title.className = "uidex-main-title";
-    title.textContent = page.title;
-    this.mainContent.appendChild(title);
-    const dirCode = document.createElement("code");
-    dirCode.className = "uidex-modal-code";
-    dirCode.textContent = _Modal.formatPageDir(page.dir);
-    this.mainContent.appendChild(dirCode);
-    if (page.content.trim()) {
-      const section = document.createElement("div");
-      section.className = "uidex-modal-section uidex-modal-section--spaced";
-      section.appendChild(this.renderMarkdown(page.content));
-      this.mainContent.appendChild(section);
-    }
-    const pageComponentSet = new Set(page.componentIds);
-    const relatedFeatures = this.data.features.filter(
-      (f) => f.componentIds.some((cid) => pageComponentSet.has(cid))
-    );
-    if (relatedFeatures.length > 0) {
-      this.mainContent.appendChild(
-        this.createFeatureChipsSection(relatedFeatures)
-      );
-    }
-    if (page.componentIds.length > 0) {
-      this.mainContent.appendChild(
-        this.createComponentChipsSection(
-          page.componentIds,
-          (id) => this.navigateTo({ type: "component", id })
-        )
-      );
-    }
-  }
-  renderFeatureView(dir) {
-    const feature = this.data.features.find((f) => f.dir === dir);
-    if (!feature || !this.mainContent) return;
-    const badge = document.createElement("div");
-    badge.className = "uidex-badge uidex-badge--features";
-    badge.textContent = "Feature";
-    this.mainContent.appendChild(badge);
-    const title = document.createElement("h3");
-    title.className = "uidex-main-title";
-    title.textContent = feature.title;
-    this.mainContent.appendChild(title);
-    const dirCode = document.createElement("code");
-    dirCode.className = "uidex-modal-code";
-    dirCode.textContent = feature.dir;
-    this.mainContent.appendChild(dirCode);
-    if (feature.content.trim()) {
-      const section = document.createElement("div");
-      section.className = "uidex-modal-section uidex-modal-section--spaced";
-      section.appendChild(this.renderMarkdown(feature.content));
-      this.mainContent.appendChild(section);
-    }
-    if (feature.componentIds.length > 0) {
-      const absentIds = new Set(
-        feature.componentIds.filter((id) => !this.data.presentIds.has(id))
-      );
-      this.mainContent.appendChild(
-        this.createComponentChipsSection(
-          feature.componentIds,
-          (id) => this.navigateTo({ type: "component", id }),
-          absentIds
-        )
-      );
-    }
-  }
-  renderComponentView(id) {
-    if (!this.mainContent) return;
-    const locations = this.data.components[id] ?? [];
-    const element = this.options.elementGetter?.(id) ?? null;
-    const title = document.createElement("h3");
-    title.className = "uidex-main-title uidex-main-title--mono";
-    title.textContent = id;
-    this.mainContent.appendChild(title);
-    if (!this.data.presentIds.has(id)) {
-      const notice = document.createElement("div");
-      notice.className = "uidex-absent-notice";
-      notice.textContent = "Not on current page";
-      this.mainContent.appendChild(notice);
-    }
-    const parentFeatures = this.data.features.filter(
-      (f) => f.componentIds.includes(id)
-    );
-    if (parentFeatures.length > 0) {
-      this.mainContent.appendChild(
-        this.createFeatureChipsSection(parentFeatures)
-      );
-    }
-    const doc = locations.find((l) => l.doc)?.doc;
-    if (doc) {
-      const docSection = document.createElement("div");
-      docSection.className = "uidex-modal-section";
-      const docLabel = document.createElement("div");
-      docLabel.className = "uidex-modal-label";
-      docLabel.textContent = "Description";
-      const docText = document.createElement("p");
-      docText.className = "uidex-modal-doc";
-      docText.textContent = doc;
-      docSection.appendChild(docLabel);
-      docSection.appendChild(docText);
-      this.mainContent.appendChild(docSection);
-    }
-    if (element) {
-      const elSection = document.createElement("div");
-      elSection.className = "uidex-modal-section";
-      const elLabel = document.createElement("div");
-      elLabel.className = "uidex-modal-label";
-      elLabel.textContent = "Element";
-      const elCode = document.createElement("code");
-      elCode.className = "uidex-modal-code";
-      elCode.textContent = this.describeElement(element);
-      elSection.appendChild(elLabel);
-      elSection.appendChild(elCode);
-      this.mainContent.appendChild(elSection);
-    }
-    if (locations.length > 0) {
-      const locSection = document.createElement("div");
-      locSection.className = "uidex-modal-section";
-      const locLabel = document.createElement("div");
-      locLabel.className = "uidex-modal-label";
-      locLabel.textContent = locations.length === 1 ? "Source" : "Sources";
-      locSection.appendChild(locLabel);
-      for (const loc of locations) {
-        const row = document.createElement("div");
-        row.className = "uidex-modal-location";
-        const pathText = document.createElement("code");
-        pathText.className = "uidex-modal-code";
-        pathText.textContent = `${loc.filePath}:${loc.line}`;
-        const copyBtn = document.createElement("button");
-        copyBtn.className = "uidex-modal-copy";
-        copyBtn.textContent = "Copy";
-        copyBtn.addEventListener("click", () => {
-          navigator.clipboard.writeText(`${loc.filePath}:${loc.line}`).then(() => {
-            copyBtn.textContent = "Copied!";
-            setTimeout(() => {
-              copyBtn.textContent = "Copy";
-            }, 1500);
-          }).catch(() => {
-          });
-        });
-        row.appendChild(pathText);
-        row.appendChild(copyBtn);
-        locSection.appendChild(row);
-      }
-      this.mainContent.appendChild(locSection);
-    }
-    const env = this.collectEnv();
-    const envSection = document.createElement("div");
-    envSection.className = "uidex-modal-section";
-    const envLabel = document.createElement("div");
-    envLabel.className = "uidex-modal-label";
-    envLabel.textContent = "Environment";
-    envSection.appendChild(envLabel);
-    const envItems = [
-      `${env.viewport.width} \xD7 ${env.viewport.height} viewport`,
-      env.browserName,
-      window.location.hostname + window.location.pathname
-    ];
-    for (const item of envItems) {
-      const envLine = document.createElement("div");
-      envLine.className = "uidex-modal-env-item";
-      envLine.textContent = item;
-      envSection.appendChild(envLine);
-    }
-    this.mainContent.appendChild(envSection);
-  }
-  // ——— Graph view ———
-  renderGraphView() {
-    if (!this.mainContent) return;
-    const pages = this.data.pages;
-    const features = this.data.features;
-    const allComponentIds = Object.keys(this.data.components);
-    const connectedIds = /* @__PURE__ */ new Set();
-    for (const p of pages) {
-      for (const cid of p.componentIds) {
-        if (this.data.components[cid]) connectedIds.add(cid);
-      }
-    }
-    for (const f of features) {
-      for (const cid of f.componentIds) {
-        if (this.data.components[cid]) connectedIds.add(cid);
-      }
-    }
-    const shownComponentIds = allComponentIds.filter((id) => connectedIds.has(id));
-    const unconnectedCount = allComponentIds.length - shownComponentIds.length;
-    if (shownComponentIds.length === 0 && pages.length === 0 && features.length === 0) {
-      const empty = document.createElement("div");
-      empty.className = "uidex-empty-message";
-      empty.textContent = "No relationships to display";
-      this.mainContent.appendChild(empty);
-      return;
-    }
-    const SVG_W = 440;
-    const NODE_W = 110;
-    const NODE_H = 24;
-    const NODE_GAP = 6;
-    const COL_HEADER_Y = 14;
-    const START_Y = 28;
-    const columns = [];
-    if (pages.length > 0) columns.push({ type: "pages", x: 0 });
-    if (features.length > 0) columns.push({ type: "features", x: 0 });
-    if (shownComponentIds.length > 0) columns.push({ type: "components", x: 0 });
-    const colSpacing = SVG_W / columns.length;
-    for (let i = 0; i < columns.length; i++) {
-      columns[i].x = colSpacing * i + colSpacing / 2;
-    }
-    const colX = {};
-    for (const c of columns) colX[c.type] = c.x;
-    const nodes = [];
-    const posOf = {};
-    const addNodes = (type, items, cx) => {
-      items.forEach((item, i) => {
-        const y = START_Y + i * (NODE_H + NODE_GAP);
-        nodes.push({ type, key: item.key, label: item.label, x: cx, y });
-        posOf[item.key] = { x: cx, y };
-      });
-    };
-    if (colX["pages"] !== void 0) {
-      addNodes(
-        "page",
-        pages.map((p) => ({ key: `page:${p.dir}`, label: _Modal.formatPageDir(p.dir) })),
-        colX["pages"]
-      );
-    }
-    if (colX["features"] !== void 0) {
-      addNodes(
-        "feature",
-        features.map((f) => ({ key: `feature:${f.dir}`, label: f.title })),
-        colX["features"]
-      );
-    }
-    if (colX["components"] !== void 0) {
-      addNodes(
-        "component",
-        shownComponentIds.map((id) => ({ key: `component:${id}`, label: id })),
-        colX["components"]
-      );
-    }
-    const edges = [];
-    for (const p of pages) {
-      for (const cid of p.componentIds) {
-        if (connectedIds.has(cid)) {
-          edges.push({ fromKey: `page:${p.dir}`, toKey: `component:${cid}`, type: "page" });
-        }
-      }
-    }
-    for (const f of features) {
-      for (const cid of f.componentIds) {
-        if (connectedIds.has(cid)) {
-          edges.push({ fromKey: `feature:${f.dir}`, toKey: `component:${cid}`, type: "feature" });
-        }
-      }
-    }
-    const maxItems = Math.max(pages.length, features.length, shownComponentIds.length);
-    const svgH = START_Y + maxItems * (NODE_H + NODE_GAP) + 12;
-    const NS2 = "http://www.w3.org/2000/svg";
-    const svg = document.createElementNS(NS2, "svg");
-    svg.setAttribute("viewBox", `0 0 ${SVG_W} ${svgH}`);
-    svg.style.width = "100%";
-    svg.style.height = "auto";
-    svg.classList.add("uidex-graph-svg");
-    const headerLabels = {
-      pages: "PAGES",
-      features: "FEATURES",
-      components: "COMPONENTS"
-    };
-    for (const col of columns) {
-      const text = document.createElementNS(NS2, "text");
-      text.setAttribute("x", String(col.x));
-      text.setAttribute("y", String(COL_HEADER_Y));
-      text.setAttribute("text-anchor", "middle");
-      text.classList.add("uidex-graph-header", `uidex-graph-header--${col.type}`);
-      text.textContent = headerLabels[col.type];
-      svg.appendChild(text);
-    }
-    const edgeGroup = document.createElementNS(NS2, "g");
-    for (const edge of edges) {
-      const from = posOf[edge.fromKey];
-      const to = posOf[edge.toKey];
-      if (!from || !to) continue;
-      const x1 = from.x + NODE_W / 2;
-      const y1 = from.y + NODE_H / 2;
-      const x2 = to.x - NODE_W / 2;
-      const y2 = to.y + NODE_H / 2;
-      const midX = (x1 + x2) / 2;
-      const path = document.createElementNS(NS2, "path");
-      path.setAttribute(
-        "d",
-        `M${x1},${y1} C${midX},${y1} ${midX},${y2} ${x2},${y2}`
-      );
-      path.classList.add("uidex-graph-edge", `uidex-graph-edge--${edge.type}`);
-      path.dataset.from = edge.fromKey;
-      path.dataset.to = edge.toKey;
-      edgeGroup.appendChild(path);
-    }
-    svg.appendChild(edgeGroup);
-    const nodeGroup = document.createElementNS(NS2, "g");
-    const truncate = (s, max) => s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
-    for (const node of nodes) {
-      const g = document.createElementNS(NS2, "g");
-      g.classList.add("uidex-graph-node", `uidex-graph-node--${node.type}`);
-      g.dataset.key = node.key;
-      const rect = document.createElementNS(NS2, "rect");
-      rect.setAttribute("x", String(node.x - NODE_W / 2));
-      rect.setAttribute("y", String(node.y));
-      rect.setAttribute("width", String(NODE_W));
-      rect.setAttribute("height", String(NODE_H));
-      g.appendChild(rect);
-      const text = document.createElementNS(NS2, "text");
-      text.setAttribute("x", String(node.x));
-      text.setAttribute("y", String(node.y + NODE_H / 2 + 3.5));
-      text.setAttribute("text-anchor", "middle");
-      text.classList.add("uidex-graph-label");
-      text.textContent = truncate(node.label, 14);
-      g.appendChild(text);
-      g.addEventListener("click", () => {
-        if (node.type === "page") {
-          this.navigateTo({ type: "page", dir: node.key.slice(5) });
-        } else if (node.type === "feature") {
-          this.navigateTo({ type: "feature", dir: node.key.slice(8) });
-        } else {
-          this.navigateTo({ type: "component", id: node.key.slice(10) });
-        }
-      });
-      g.addEventListener("mouseenter", () => {
-        svg.classList.add("uidex-graph--hover");
-        g.classList.add("uidex-graph-node--highlighted");
-        for (const edge of edgeGroup.children) {
-          const el = edge;
-          if (el.dataset.from === node.key || el.dataset.to === node.key) {
-            el.classList.add("uidex-graph-edge--highlighted");
-            const otherKey = el.dataset.from === node.key ? el.dataset.to : el.dataset.from;
-            const otherNode = nodeGroup.querySelector(`[data-key="${otherKey}"]`);
-            if (otherNode) otherNode.classList.add("uidex-graph-node--highlighted");
-          }
-        }
-      });
-      g.addEventListener("mouseleave", () => {
-        svg.classList.remove("uidex-graph--hover");
-        for (const el of svg.querySelectorAll(".uidex-graph-node--highlighted")) {
-          el.classList.remove("uidex-graph-node--highlighted");
-        }
-        for (const el of svg.querySelectorAll(".uidex-graph-edge--highlighted")) {
-          el.classList.remove("uidex-graph-edge--highlighted");
-        }
-      });
-      nodeGroup.appendChild(g);
-    }
-    svg.appendChild(nodeGroup);
-    const title = document.createElement("h3");
-    title.className = "uidex-main-title";
-    title.textContent = "Map";
-    this.mainContent.appendChild(title);
-    const container = document.createElement("div");
-    container.className = "uidex-graph";
-    container.appendChild(svg);
-    this.mainContent.appendChild(container);
-    if (unconnectedCount > 0) {
-      const note = document.createElement("div");
-      note.className = "uidex-graph-note";
-      note.textContent = `${unconnectedCount} component${unconnectedCount === 1 ? "" : "s"} without page or feature connections`;
-      this.mainContent.appendChild(note);
-    }
-  }
-  // ——— Feedback ———
-  /** Open a dedicated feedback modal for a specific component. */
-  openFeedback(id) {
-    this.createFeedbackShell(id);
-  }
-  createFeedbackShell(id) {
-    const locations = this.data.components[id] ?? [];
-    const element = this.options.elementGetter?.(id) ?? null;
-    const { dialog, header } = this.createModalFrame({
-      type: "feedback",
-      title: "Feedback",
-      ariaLabel: "Feedback"
-    });
-    const componentLabel = document.createElement("code");
-    componentLabel.className = "uidex-modal-code uidex-modal-code--inline";
-    componentLabel.textContent = id;
-    header.appendChild(componentLabel);
-    const spacer = document.createElement("div");
-    spacer.className = "uidex-header-spacer";
-    header.appendChild(spacer);
-    this.mountModalFrame(dialog, header);
-    this.mainContent = document.createElement("div");
-    this.mainContent.className = "uidex-modal-body";
-    this.renderFeedbackContext(id, locations);
-    this.renderFeedbackFormContent(id, locations, element);
-    dialog.appendChild(this.mainContent);
-  }
-  /** Render component context (features, pages, doc) above the feedback form. */
-  renderFeedbackContext(id, locations) {
-    if (!this.mainContent) return;
-    let hasContext = false;
-    const parentFeatures = this.data.features.filter(
-      (f) => f.componentIds.includes(id)
-    );
-    if (parentFeatures.length > 0) {
-      const container = this.createChipContainer();
-      for (const feature of parentFeatures) {
-        const chip = document.createElement("span");
-        chip.className = "uidex-chip uidex-chip--features";
-        chip.textContent = feature.title;
-        container.appendChild(chip);
-      }
-      this.mainContent.appendChild(container);
-      hasContext = true;
-    }
-    const parentPage = this.data.pages.find(
-      (p) => p.componentIds.includes(id)
-    );
-    if (parentPage) {
-      const container = this.createChipContainer();
-      const chip = document.createElement("span");
-      chip.className = "uidex-chip uidex-chip--pages";
-      chip.textContent = _Modal.formatPageDir(parentPage.dir);
-      container.appendChild(chip);
-      this.mainContent.appendChild(container);
-      hasContext = true;
-    }
-    const doc = locations.find((l) => l.doc)?.doc;
-    if (doc) {
-      const docText = document.createElement("p");
-      docText.className = "uidex-modal-doc uidex-modal-doc--spaced";
-      docText.textContent = doc;
-      this.mainContent.appendChild(docText);
-      hasContext = true;
-    }
-    if (hasContext) {
-      const divider = document.createElement("div");
-      divider.className = "uidex-main-divider";
-      this.mainContent.appendChild(divider);
-    }
-  }
-  createChipContainer() {
-    const container = document.createElement("div");
-    container.className = "uidex-chips uidex-chips--spaced";
-    return container;
-  }
-  renderFeedbackFormContent(id, locations, element) {
-    if (!this.mainContent) return;
-    const form = document.createElement("form");
-    form.className = "uidex-form";
-    form.addEventListener("submit", (e) => e.preventDefault());
-    const typeSelect = this.createSelect("Type", [
-      { value: "bug", label: "Bug Report" },
-      { value: "feature", label: "Feature Request" },
-      { value: "improvement", label: "Improvement" },
-      { value: "question", label: "Question" }
-    ]);
-    form.appendChild(typeSelect.group);
-    const severitySelect = this.createSelect(
-      "Severity",
-      [
-        { value: "low", label: "Low" },
-        { value: "medium", label: "Medium" },
-        { value: "high", label: "High" },
-        { value: "critical", label: "Critical" }
-      ],
-      "medium"
-    );
-    form.appendChild(severitySelect.group);
-    const titleGroup = this.createFormGroup("Title");
-    const titleInput = document.createElement("input");
-    titleInput.type = "text";
-    titleInput.className = "uidex-form-input";
-    titleInput.placeholder = "Brief summary (optional)";
-    titleInput.maxLength = 200;
-    titleGroup.appendChild(titleInput);
-    form.appendChild(titleGroup);
-    const descGroup = this.createFormGroup("Description");
-    const textarea = document.createElement("textarea");
-    textarea.className = "uidex-form-textarea";
-    textarea.placeholder = "Describe the issue or idea...";
-    textarea.rows = 4;
-    descGroup.appendChild(textarea);
-    form.appendChild(descGroup);
-    let emailInput;
-    let nameInput;
-    if (this.options.ingest && !this.options.ingest.reporter) {
-      const reporterGroup = this.createFormGroup("Reporter");
-      nameInput = document.createElement("input");
-      nameInput.type = "text";
-      nameInput.className = "uidex-form-input";
-      nameInput.placeholder = "Name (optional)";
-      reporterGroup.appendChild(nameInput);
-      emailInput = document.createElement("input");
-      emailInput.type = "email";
-      emailInput.className = "uidex-form-input";
-      emailInput.placeholder = "Email (optional)";
-      reporterGroup.appendChild(emailInput);
-      form.appendChild(reporterGroup);
-    }
-    const screenshotGroup = document.createElement("div");
-    screenshotGroup.className = "uidex-form-group";
-    const screenshotLabel = document.createElement("label");
-    screenshotLabel.className = "uidex-form-toggle";
-    const screenshotCheckbox = document.createElement("input");
-    screenshotCheckbox.type = "checkbox";
-    screenshotCheckbox.className = "uidex-form-checkbox";
-    screenshotCheckbox.checked = true;
-    screenshotLabel.appendChild(screenshotCheckbox);
-    const screenshotText = document.createElement("span");
-    screenshotText.className = "uidex-form-toggle-text";
-    screenshotText.textContent = "Include screenshot";
-    screenshotLabel.appendChild(screenshotText);
-    screenshotGroup.appendChild(screenshotLabel);
-    form.appendChild(screenshotGroup);
-    const submitBtn = document.createElement("button");
-    submitBtn.type = "button";
-    submitBtn.className = "uidex-form-submit";
-    submitBtn.textContent = "Submit";
-    submitBtn.addEventListener("click", async () => {
-      if (!textarea.value.trim()) {
-        textarea.focus();
-        return;
-      }
-      submitBtn.disabled = true;
-      let screenshot;
-      if (screenshotCheckbox.checked) {
-        const freshElement = this.options.elementGetter?.(id) ?? element;
-        if (freshElement) {
-          submitBtn.textContent = "Capturing\u2026";
-          screenshot = await this.captureElementScreenshot(freshElement) ?? void 0;
-        }
-      }
-      const env = this.collectEnv();
-      const page = this.data.pages.find((p) => p.componentIds.includes(id));
-      const { ingest } = this.options;
-      const reporterEmail = ingest?.reporter?.email || emailInput?.value.trim() || void 0;
-      const reporterName = ingest?.reporter?.name || nameInput?.value.trim() || void 0;
-      const titleValue = titleInput.value.trim();
-      const report = {
-        type: typeSelect.select.value,
-        severity: severitySelect.select.value,
-        ...titleValue ? { title: titleValue } : {},
-        description: textarea.value.trim(),
-        componentId: id,
-        element: element ? this.describeElement(element) : null,
-        sources: locations.map((l) => ({ filePath: l.filePath, line: l.line })),
-        url: env.url,
-        path: window.location.pathname,
-        route: page?.dir ?? null,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        pageTitle: document.title,
-        locale: navigator.language,
-        sessionId: this.options.sessionId ?? "",
-        viewport: env.viewport,
-        screen: env.screen,
-        userAgent: env.userAgent,
-        screenshot,
-        ...reporterEmail ? { reporterEmail } : {},
-        ...reporterName ? { reporterName } : {},
-        ...ingest?.environment ? { environment: ingest.environment } : {},
-        ...ingest?.appVersion ? { appVersion: ingest.appVersion } : {},
-        ...ingest?.metadata ? { metadata: ingest.metadata } : {}
-      };
-      const consoleLogs = this.options.getConsoleLogs?.();
-      if (consoleLogs && consoleLogs.length > 0) {
-        report.consoleLogs = consoleLogs;
-      }
-      const networkErrors = this.options.getNetworkErrors?.();
-      if (networkErrors && networkErrors.length > 0) {
-        report.networkErrors = networkErrors;
-      }
-      const showSuccess = (autoClose) => {
-        submitBtn.textContent = "Submitted!";
-        if (autoClose) {
-          setTimeout(() => this.hide(), 1500);
-        } else {
-          setTimeout(() => {
-            submitBtn.textContent = "Submit";
-            submitBtn.disabled = false;
-          }, 1500);
-        }
-      };
-      if (ingest) {
-        submitBtn.textContent = "Submitting\u2026";
-        try {
-          const serverResult = await submitFeedback(
-            ingest.endpoint,
-            ingest.apiKey,
-            report
-          );
-          this.options.onSubmit?.(report, {
-            ok: true,
-            id: serverResult.id,
-            sequenceNumber: serverResult.sequenceNumber
-          });
-          showSuccess(true);
-        } catch (err) {
-          const errorMessage = err instanceof Error ? err.message : "Unknown error";
-          console.warn("[uidex] Feedback submission failed:", errorMessage);
-          this.options.onSubmit?.(report, { ok: false, error: errorMessage });
-          submitBtn.textContent = "Failed \u2014 retry?";
-          submitBtn.disabled = false;
-        }
-      } else {
-        if (!this.options.onSubmit) {
-          console.log("[uidex] Feedback submitted:", report);
-        }
-        this.options.onSubmit?.(report, { ok: true, id: "", sequenceNumber: 0 });
-        showSuccess(false);
-      }
-    });
-    form.appendChild(submitBtn);
-    this.mainContent.appendChild(form);
-  }
-  // ——— Component chips ———
-  createComponentChip(id, onComponentClick, absent) {
-    const chip = document.createElement("span");
-    chip.className = "uidex-chip uidex-chip--components";
-    if (absent) chip.classList.add("uidex-chip--absent");
-    chip.textContent = id;
-    if (onComponentClick) {
-      chip.style.cursor = "pointer";
-      chip.addEventListener("click", () => onComponentClick(id));
-    }
-    return chip;
-  }
-  createFeatureChipsSection(features) {
-    const section = document.createElement("div");
-    section.className = "uidex-modal-section";
-    const label = document.createElement("div");
-    label.className = "uidex-modal-label";
-    label.textContent = features.length === 1 ? "Feature" : "Features";
-    section.appendChild(label);
-    const container = document.createElement("div");
-    container.className = "uidex-chips";
-    for (const feature of features) {
-      const chip = document.createElement("span");
-      chip.className = "uidex-chip uidex-chip--features";
-      chip.textContent = feature.title;
-      chip.style.cursor = "pointer";
-      chip.addEventListener(
-        "click",
-        () => this.navigateTo({ type: "feature", dir: feature.dir })
-      );
-      container.appendChild(chip);
-    }
-    section.appendChild(container);
-    return section;
-  }
-  createComponentChipsSection(componentIds, onComponentClick, absentIds) {
-    const section = document.createElement("div");
-    section.className = "uidex-modal-section";
-    const label = document.createElement("div");
-    label.className = "uidex-modal-label";
-    label.textContent = `Components (${componentIds.length})`;
-    section.appendChild(label);
-    const container = document.createElement("div");
-    container.className = "uidex-chips";
-    for (const id of componentIds) {
-      container.appendChild(
-        this.createComponentChip(id, onComponentClick, absentIds?.has(id))
-      );
-    }
-    section.appendChild(container);
-    return section;
-  }
-  // ——— Form helpers ———
-  createFormGroup(labelText) {
-    const group = document.createElement("div");
-    group.className = "uidex-form-group";
-    const label = document.createElement("label");
-    label.className = "uidex-form-label";
-    label.textContent = labelText;
-    group.appendChild(label);
-    return group;
-  }
-  createSelect(labelText, options, defaultValue) {
-    const group = this.createFormGroup(labelText);
-    const select = document.createElement("select");
-    select.className = "uidex-form-select";
-    for (const opt of options) {
-      const option = document.createElement("option");
-      option.value = opt.value;
-      option.textContent = opt.label;
-      if (opt.value === defaultValue) option.selected = true;
-      select.appendChild(option);
-    }
-    group.appendChild(select);
-    return { group, select };
-  }
-  // ——— Markdown rendering ———
-  createChecklistItem(text, checked = false) {
-    const li = document.createElement("li");
-    li.className = "uidex-checklist-item";
-    const label = document.createElement("label");
-    label.className = "uidex-checklist-label";
-    const checkbox = document.createElement("input");
-    checkbox.type = "checkbox";
-    checkbox.className = "uidex-checklist-checkbox";
-    checkbox.checked = checked;
-    label.appendChild(checkbox);
-    const span = document.createElement("span");
-    span.textContent = text;
-    label.appendChild(span);
-    li.appendChild(label);
-    return li;
-  }
-  renderMarkdown(content) {
-    const container = document.createElement("div");
-    container.className = "uidex-page-content";
-    const lines = content.split("\n");
-    let currentList = null;
-    let skippedFirstH1 = false;
-    let inAcceptanceSection = false;
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (!trimmed) {
-        currentList = null;
-        continue;
-      }
-      const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)/);
-      if (headingMatch) {
-        if (!skippedFirstH1 && headingMatch[1].length === 1) {
-          skippedFirstH1 = true;
-          continue;
-        }
-        currentList = null;
-        inAcceptanceSection = /^acceptance$/i.test(headingMatch[2].trim());
-        const level = headingMatch[1].length;
-        const tag = ["h1", "h2", "h3", "h4", "h5", "h6"][level - 1];
-        const heading = document.createElement(tag);
-        heading.textContent = headingMatch[2];
-        container.appendChild(heading);
-        continue;
-      }
-      const checkboxMatch = trimmed.match(/^- \[([ xX])\]\s+(.*)/);
-      if (checkboxMatch) {
-        if (!currentList) {
-          currentList = document.createElement("ul");
-          currentList.className = "uidex-checklist";
-          container.appendChild(currentList);
-        }
-        currentList.appendChild(
-          this.createChecklistItem(checkboxMatch[2], checkboxMatch[1] !== " ")
-        );
-        continue;
-      }
-      if (trimmed.startsWith("- ")) {
-        if (!currentList) {
-          currentList = document.createElement("ul");
-          currentList.className = "uidex-checklist";
-          container.appendChild(currentList);
-        }
-        const text = trimmed.slice(2);
-        if (inAcceptanceSection) {
-          currentList.appendChild(this.createChecklistItem(text));
-        } else {
-          const li = document.createElement("li");
-          li.className = "uidex-checklist-item";
-          li.textContent = text;
-          currentList.appendChild(li);
-        }
-        continue;
-      }
-      currentList = null;
-      const p = document.createElement("p");
-      p.textContent = trimmed;
-      container.appendChild(p);
-    }
-    return container;
-  }
-  // ——— Screenshot capture ———
-  /**
-   * Capture an element by cloning it with inlined computed styles into an
-   * SVG foreignObject, rendering to canvas via an <img> data-URI, and
-   * returning a PNG data-URL.
-   */
-  async captureElementScreenshot(element) {
-    try {
-      const rect = element.getBoundingClientRect();
-      const width = Math.ceil(rect.width);
-      const height = Math.ceil(rect.height);
-      if (width <= 0 || height <= 0 || width > 4096 || height > 4096)
-        return null;
-      const clone = element.cloneNode(true);
-      this.inlineComputedStyles(element, clone);
-      const wrapper = document.createElement("div");
-      wrapper.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      wrapper.style.width = `${width}px`;
-      wrapper.style.height = `${height}px`;
-      wrapper.style.overflow = "hidden";
-      wrapper.appendChild(clone);
-      const serialized = new XMLSerializer().serializeToString(wrapper);
-      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><foreignObject width="100%" height="100%">` + serialized + `</foreignObject></svg>`;
-      const img = new Image();
-      img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
-      return await Promise.race([
-        new Promise((resolve) => {
-          img.onload = () => {
-            try {
-              const canvas = document.createElement("canvas");
-              canvas.width = width;
-              canvas.height = height;
-              const ctx = canvas.getContext("2d");
-              if (!ctx) return resolve(null);
-              ctx.drawImage(img, 0, 0);
-              resolve(canvas.toDataURL("image/png"));
-            } catch {
-              resolve(null);
-            }
-          };
-          img.onerror = () => resolve(null);
-        }),
-        new Promise((resolve) => setTimeout(() => resolve(null), 5e3))
-      ]);
-    } catch {
-      return null;
-    }
-  }
-  /** Visual CSS properties worth inlining for a screenshot clone. */
-  static VISUAL_PROPS = [
-    "display",
-    "position",
-    "box-sizing",
-    "width",
-    "min-width",
-    "max-width",
-    "height",
-    "min-height",
-    "max-height",
-    "margin",
-    "padding",
-    "border",
-    "border-radius",
-    "overflow",
-    "flex-direction",
-    "flex-wrap",
-    "flex-grow",
-    "flex-shrink",
-    "flex-basis",
-    "align-items",
-    "justify-content",
-    "gap",
-    "grid-template-columns",
-    "grid-template-rows",
-    "grid-column",
-    "grid-row",
-    "color",
-    "background",
-    "background-color",
-    "background-image",
-    "font-family",
-    "font-size",
-    "font-weight",
-    "font-style",
-    "line-height",
-    "letter-spacing",
-    "text-align",
-    "text-decoration",
-    "text-transform",
-    "white-space",
-    "word-break",
-    "opacity",
-    "visibility",
-    "transform",
-    "box-shadow",
-    "text-shadow",
-    "vertical-align",
-    "list-style",
-    "text-overflow"
-  ];
-  /** Recursively copy visual computed styles from source onto a cloned target. */
-  inlineComputedStyles(source, target) {
-    if (source instanceof HTMLElement && target instanceof HTMLElement) {
-      const computed = window.getComputedStyle(source);
-      for (const prop of _Modal.VISUAL_PROPS) {
-        const value = computed.getPropertyValue(prop);
-        if (value) {
-          target.style.setProperty(prop, value);
-        }
-      }
-    }
-    const srcChildren = source.children;
-    const tgtChildren = target.children;
-    for (let i = 0; i < srcChildren.length; i++) {
-      if (tgtChildren[i]) {
-        this.inlineComputedStyles(srcChildren[i], tgtChildren[i]);
-      }
-    }
-  }
-  // ——— Utilities ———
-  collectEnv() {
-    return {
-      viewport: { width: window.innerWidth, height: window.innerHeight },
-      screen: { width: screen.width, height: screen.height },
-      userAgent: navigator.userAgent,
-      browserName: this.getBrowserName(),
-      url: window.location.href
-    };
-  }
-  getBrowserName() {
-    const ua = navigator.userAgent;
-    if (ua.includes("Firefox/")) return "Firefox";
-    if (ua.includes("Edg/")) return "Edge";
-    if (ua.includes("Chrome/")) return "Chrome";
-    if (ua.includes("Safari/") && !ua.includes("Chrome")) return "Safari";
-    return "Unknown browser";
-  }
-  describeElement(element) {
-    const tag = element.tagName.toLowerCase();
-    const id = element.id ? `#${element.id}` : "";
-    const classes = element.className ? `.${String(element.className).split(/\s+/).join(".")}` : "";
-    return `<${tag}${id}${classes}>`;
-  }
-  handleKeyDown(e) {
-    if (e.key === "Escape") {
-      this.hide();
-    }
-  }
-};
-
-// src/core/registry.ts
-var registeredComponents = null;
-var registeredPages = null;
-var registeredFeatures = null;
-function registerComponents(components) {
-  registeredComponents = components;
-}
-function getComponents() {
-  return registeredComponents;
-}
-function registerPages(pages) {
-  registeredPages = pages;
-}
-function getPages() {
-  return registeredPages;
-}
-function registerFeatures(features) {
-  registeredFeatures = features;
-}
-function getFeatures() {
-  return registeredFeatures;
-}
-
-// src/core/css-text.ts
-var cssText = `/* Design tokens \u2014 :host targets the shadow root, :where(:root) for standalone use */
-/* Theme: shadcn lyra \u2014 monochromatic, sharp, monospace */
-:where(:host, :root) {
-  /* Colors \u2014 dark theme (lyra neutral) */
-  --uidex-color-primary: #e5e5e5;
-  --uidex-color-primary-hover: #ffffff;
-  --uidex-color-bg: #1c1c1c;
-  --uidex-color-bg-elevated: #2e2e2e;
-  --uidex-color-text: #f9f9f9;
-  --uidex-color-text-strong: #ffffff;
-  --uidex-color-text-muted: #ababab;    /* chrome: labels, counts, placeholders */
-  --uidex-color-text-secondary: #ababab; /* content: doc text, descriptions */
-  --uidex-color-surface-hover: rgba(255, 255, 255, 0.08);
-  --uidex-color-surface-active: rgba(255, 255, 255, 0.12);
-  --uidex-color-border: rgba(255, 255, 255, 0.1);
-  --uidex-color-border-light: rgba(255, 255, 255, 0.06);
-  --uidex-color-backdrop: rgba(0, 0, 0, 0.6);
-
-  /* Category colors */
-  --uidex-color-pages: #60a5fa;
-  --uidex-color-features: #a78bfa;
-  --uidex-color-components: #34d399;
-
-  /* Shadows \u2014 minimal, border-driven definition */
-  --uidex-shadow-sm: none;
-  --uidex-shadow-md: 0 0 0 1px var(--uidex-color-border);
-  --uidex-shadow-lg: 0 0 0 1px var(--uidex-color-border);
-
-  /* Border radius \u2014 lyra: none */
-  --uidex-radius-sm: 0;
-  --uidex-radius-md: 0;
-  --uidex-radius-lg: 0;
-  --uidex-radius-full: 0;
-
-  /* Z-index \u2014 high enough to stay above app UI */
-  --uidex-z-container: 2147483644;
-  --uidex-z-overlay: 2147483645;
-  --uidex-z-modal: 2147483646;
-
-  /* Typography \u2014 mono-first (lyra). Both stacks are mono by default;
-     consumers can override --uidex-font-sans to restore a proportional body font. */
-  --uidex-font-sans: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  --uidex-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  --uidex-font-size-xs: 11px;
-  --uidex-font-size-sm: 12px;
-  --uidex-font-size-md: 13px;
-  --uidex-font-size-lg: 14px;
-
-  /* Transitions */
-  --uidex-transition-fast: 0.1s ease;
-  --uidex-transition-normal: 0.15s ease;
-  --uidex-transition-smooth: 0.2s ease;
-}
-
-/* \u2014\u2014\u2014 Container \u2014\u2014\u2014 */
-.uidex-container {
-  position: fixed;
-  z-index: var(--uidex-z-container);
-  pointer-events: auto;
-  font-family: var(--uidex-font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.uidex-bottom-right { bottom: 20px; right: 20px; }
-.uidex-bottom-left  { bottom: 20px; left: 20px; }
-.uidex-top-right    { top: 20px; right: 20px; }
-.uidex-top-left     { top: 20px; left: 20px; }
-
-/* \u2014\u2014\u2014 Trigger button group \u2014\u2014\u2014 */
-.uidex-trigger-group {
-  display: flex;
-  align-items: center;
-  border-radius: 0;
-  background: var(--uidex-color-bg);
-  border: 1px solid var(--uidex-color-border);
-  overflow: hidden;
-  user-select: none;
-  height: 32px;
-}
-
-.uidex-trigger-group:hover {
-  border-color: rgba(255, 255, 255, 0.16);
-}
-
-.uidex-trigger-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 100%;
-  padding: 0 10px;
-  border: none;
-  background: transparent;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 500;
-  font-family: var(--uidex-font-mono);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast);
-}
-
-.uidex-trigger-btn:hover {
-  background: var(--uidex-color-surface-hover);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-trigger-btn:active {
-  background: var(--uidex-color-surface-active);
-  transform: translateY(1px);
-}
-
-.uidex-trigger-btn--active {
-  color: var(--uidex-color-text-strong);
-  background: var(--uidex-color-surface-active);
-}
-
-.uidex-trigger-btn--active:hover {
-  background: rgba(255, 255, 255, 0.16);
-}
-
-.uidex-trigger-divider {
-  width: 1px;
-  height: 16px;
-  background: var(--uidex-color-border);
-  flex-shrink: 0;
-}
-
-.uidex-trigger-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-/* \u2014\u2014\u2014 Draggable \u2014\u2014\u2014 */
-.uidex-container--dragging {
-  transition: none !important;
-}
-
-.uidex-container--dragging .uidex-trigger-btn {
-  cursor: grabbing !important;
-}
-
-/* \u2014\u2014\u2014 Inspect mode cursor \u2014\u2014\u2014 */
-body.uidex-inspecting,
-body.uidex-inspecting * {
-  cursor: crosshair !important;
-}
-
-/* \u2014\u2014\u2014 Modal \u2014\u2014\u2014 */
-.uidex-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--uidex-z-modal);
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--uidex-color-backdrop);
-}
-
-.uidex-modal {
-  background: var(--uidex-color-bg);
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  max-width: calc(100vw - 32px);
-  max-height: calc(100vh - 64px);
-  font-family: var(--uidex-font-sans);
-}
-
-.uidex-modal-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--uidex-color-border);
-}
-
-.uidex-modal-title {
-  margin: 0;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text-strong);
-  font-family: var(--uidex-font-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.uidex-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid transparent;
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text-muted);
-  font-size: 18px;
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast), border-color var(--uidex-transition-fast);
-}
-
-.uidex-modal-close:hover {
-  background: var(--uidex-color-surface-hover);
-  border-color: var(--uidex-color-border);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-modal-close:active {
-  transform: translateY(1px);
-}
-
-.uidex-modal-body {
-  padding: 12px 16px;
-}
-
-.uidex-modal-section {
-  margin-bottom: 12px;
-}
-
-.uidex-modal-section:last-child {
-  margin-bottom: 0;
-}
-
-.uidex-modal-label {
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--uidex-color-text-muted);
-  margin-bottom: 6px;
-}
-
-.uidex-modal-section--spaced {
-  margin-top: 12px;
-}
-
-.uidex-modal-doc {
-  margin: 0;
-  font-size: var(--uidex-font-size-sm);
-  line-height: 1.5;
-  color: var(--uidex-color-text-secondary);
-}
-
-.uidex-modal-code {
-  display: block;
-  font-family: var(--uidex-font-mono);
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text);
-  background: var(--uidex-color-bg-elevated);
-  padding: 6px 10px;
-  border-radius: 0;
-  border: 1px solid var(--uidex-color-border);
-  word-break: break-all;
-}
-
-.uidex-modal-location {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.uidex-modal-location:last-child {
-  margin-bottom: 0;
-}
-
-.uidex-modal-location .uidex-modal-code {
-  flex: 1;
-  min-width: 0;
-}
-
-.uidex-modal-copy {
-  flex-shrink: 0;
-  padding: 4px 10px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: var(--uidex-color-bg-elevated);
-  color: var(--uidex-color-text-secondary);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 500;
-  font-family: var(--uidex-font-mono);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast), color var(--uidex-transition-fast);
-  white-space: nowrap;
-}
-
-.uidex-modal-copy:hover {
-  background: var(--uidex-color-surface-hover);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-modal-copy:active {
-  transform: translateY(1px);
-}
-
-.uidex-modal-env-item {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-secondary);
-  line-height: 1.6;
-}
-
-.uidex-empty-message {
-  padding: 16px 12px;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-sm);
-  text-align: center;
-}
-
-/* \u2014\u2014\u2014 Panel layout (sidebar modal) \u2014\u2014\u2014 */
-.uidex-modal--panel {
-  width: calc(100vw - 32px);
-  max-width: 720px;
-  height: calc(100vh - 64px);
-  max-height: 600px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.uidex-panel-body {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.uidex-panel-sidebar {
-  width: 200px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--uidex-color-border);
-  overflow-y: auto;
-  padding: 0;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
-}
-
-.uidex-panel-sidebar::-webkit-scrollbar {
-  width: 6px;
-}
-
-.uidex-panel-sidebar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.uidex-panel-sidebar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0;
-}
-
-.uidex-panel-main {
-  flex: 1;
-  min-width: 0;
-  overflow-y: auto;
-  padding: 16px 20px;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
-}
-
-.uidex-panel-main::-webkit-scrollbar {
-  width: 6px;
-}
-
-.uidex-panel-main::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.uidex-panel-main::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 0;
-}
-
-/* \u2014\u2014\u2014 Sidebar navigation \u2014\u2014\u2014 */
-.uidex-sidebar-back {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  margin: 0;
-  border-bottom: 1px solid var(--uidex-color-border);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text-secondary);
-  cursor: pointer;
-  transition: color var(--uidex-transition-fast);
-  position: sticky;
-  top: 0;
-  background: var(--uidex-color-bg);
-  z-index: 1;
-}
-
-.uidex-sidebar-back:hover {
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-sidebar-back-arrow {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.uidex-sidebar-root-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 500;
-  color: var(--uidex-color-text);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-}
-
-.uidex-sidebar-root-item:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-sidebar-root-label {
-  flex: 0 0 auto;
-}
-
-.uidex-sidebar-count {
-  font-size: var(--uidex-font-size-xs);
-  color: var(--uidex-color-text-muted);
-  font-weight: 400;
-}
-
-.uidex-sidebar-chevron {
-  margin-left: auto;
-  font-size: 16px;
-  line-height: 1;
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-sidebar-item {
-  padding: 4px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.uidex-sidebar-item:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-sidebar-item--active {
-  background: var(--uidex-color-surface-active);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-sidebar-item--active:hover {
-  background: var(--uidex-color-surface-active);
-}
-
-.uidex-sidebar-item--dimmed {
-  opacity: 0.5;
-}
-
-.uidex-sidebar-item--mono {
-  font-family: var(--uidex-font-mono);
-}
-
-.uidex-sidebar-item--grouped {
-  padding-left: 24px;
-}
-
-/* Sidebar category colors */
-.uidex-sidebar-item--pages.uidex-sidebar-item--active {
-  color: var(--uidex-color-pages);
-}
-
-.uidex-sidebar-item--features.uidex-sidebar-item--active {
-  color: var(--uidex-color-features);
-}
-
-.uidex-sidebar-item--components.uidex-sidebar-item--active {
-  color: var(--uidex-color-components);
-}
-
-.uidex-sidebar-root-item--pages .uidex-sidebar-root-label {
-  color: var(--uidex-color-pages);
-}
-
-.uidex-sidebar-root-item--features .uidex-sidebar-root-label {
-  color: var(--uidex-color-features);
-}
-
-.uidex-sidebar-root-item--components .uidex-sidebar-root-label {
-  color: var(--uidex-color-components);
-}
-
-/* \u2014\u2014\u2014 Sidebar component groups \u2014\u2014\u2014 */
-.uidex-sidebar-group-header {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: 0;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-  user-select: none;
-}
-
-.uidex-sidebar-group-header:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-sidebar-group-chevron {
-  font-size: 14px;
-  line-height: 1;
-  color: var(--uidex-color-text-muted);
-  width: 14px;
-  text-align: center;
-  flex-shrink: 0;
-  transition: transform var(--uidex-transition-normal);
-  transform: rotate(0deg);
-}
-
-.uidex-sidebar-group-header--expanded .uidex-sidebar-group-chevron {
-  transform: rotate(90deg);
-}
-
-.uidex-sidebar-group-count {
-  margin-left: auto;
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 400;
-  color: var(--uidex-color-text-muted);
-}
-
-/* \u2014\u2014\u2014 Search \u2014\u2014\u2014 */
-.uidex-search-input {
-  flex: 1;
-  min-width: 0;
-  padding: 4px 8px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text);
-  font-size: var(--uidex-font-size-sm);
-  font-family: var(--uidex-font-mono);
-  outline: none;
-  box-sizing: border-box;
-}
-
-.uidex-search-input::placeholder {
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-search-input:focus {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.uidex-search-group-label {
-  padding: 8px 10px 2px;
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-search-group-label--pages { color: var(--uidex-color-pages); }
-.uidex-search-group-label--features { color: var(--uidex-color-features); }
-.uidex-search-group-label--components { color: var(--uidex-color-components); }
-
-.uidex-search-empty {
-  padding: 20px 10px;
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
-  text-align: center;
-}
-
-.uidex-sidebar-divider {
-  height: 1px;
-  background: var(--uidex-color-border);
-  margin: 4px 10px;
-}
-
-.uidex-sidebar-root-item--active {
-  background: var(--uidex-color-surface-active);
-}
-
-/* \u2014\u2014\u2014 Main content \u2014\u2014\u2014 */
-.uidex-main-title {
-  margin: 0 0 8px;
-  font-size: var(--uidex-font-size-lg);
-  font-weight: 600;
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-main-title--mono {
-  font-family: var(--uidex-font-mono);
-  color: var(--uidex-color-text-strong);
-}
-
-.uidex-main-divider {
-  height: 1px;
-  background: var(--uidex-color-border);
-  margin: 16px 0;
-}
-
-.uidex-absent-notice {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
-  font-style: italic;
-  margin-bottom: 12px;
-}
-
-/* \u2014\u2014\u2014 Page content in modal \u2014\u2014\u2014 */
-.uidex-page-content {
-  font-size: var(--uidex-font-size-sm);
-  line-height: 1.6;
-  color: var(--uidex-color-text);
-}
-
-.uidex-page-content h2,
-.uidex-page-content h3,
-.uidex-page-content h4,
-.uidex-page-content h5,
-.uidex-page-content h6 {
-  margin: 12px 0 6px;
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  color: var(--uidex-color-text-strong);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.uidex-page-content h2 {
-  font-size: var(--uidex-font-size-md);
-}
-
-.uidex-page-content p {
-  margin: 0 0 8px;
-}
-
-.uidex-checklist {
-  list-style: none;
-  margin: 0 0 8px;
-  padding-left: 0;
-}
-
-.uidex-checklist-item {
-  margin-bottom: 4px;
-}
-
-.uidex-checklist-label {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  cursor: pointer;
-}
-
-.uidex-checklist-checkbox {
-  flex-shrink: 0;
-  margin: 0;
-  accent-color: var(--uidex-color-text-strong);
-}
-
-/* \u2014\u2014\u2014 Chips \u2014\u2014\u2014 */
-.uidex-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.uidex-chip {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 0;
-  background: transparent;
-  border: 1px solid var(--uidex-color-border);
-  font-family: var(--uidex-font-mono);
-  font-size: var(--uidex-font-size-xs);
-  color: var(--uidex-color-text);
-  transition: background-color var(--uidex-transition-fast);
-}
-
-.uidex-chip:hover {
-  background: var(--uidex-color-surface-hover);
-}
-
-.uidex-chip--absent {
-  opacity: 0.4;
-}
-
-.uidex-chip--pages {
-  color: var(--uidex-color-pages);
-  border-color: color-mix(in srgb, var(--uidex-color-pages) 30%, transparent);
-}
-
-.uidex-chip--features {
-  color: var(--uidex-color-features);
-  border-color: color-mix(in srgb, var(--uidex-color-features) 30%, transparent);
-}
-
-.uidex-chip--components {
-  color: var(--uidex-color-components);
-  border-color: color-mix(in srgb, var(--uidex-color-components) 30%, transparent);
-}
-
-/* \u2014\u2014\u2014 Category badges \u2014\u2014\u2014 */
-.uidex-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 0;
-  border: 1px solid var(--uidex-color-border);
-  background: transparent;
-  color: var(--uidex-color-text-muted);
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 12px;
-}
-
-.uidex-badge--pages {
-  color: var(--uidex-color-pages);
-  border-color: color-mix(in srgb, var(--uidex-color-pages) 30%, transparent);
-}
-
-.uidex-badge--features {
-  color: var(--uidex-color-features);
-  border-color: color-mix(in srgb, var(--uidex-color-features) 30%, transparent);
-}
-
-.uidex-badge--components {
-  color: var(--uidex-color-components);
-  border-color: color-mix(in srgb, var(--uidex-color-components) 30%, transparent);
-}
-
-/* \u2014\u2014\u2014 Feedback modal \u2014\u2014\u2014 */
-.uidex-modal--feedback {
-  width: calc(100vw - 32px);
-  max-width: 400px;
-}
-
-.uidex-modal-code--inline {
-  border: none;
-  background: none;
-  padding: 0;
-}
-
-.uidex-header-spacer {
-  flex: 1;
-}
-
-.uidex-chips--spaced {
-  margin-bottom: 8px;
-}
-
-.uidex-modal-doc--spaced {
-  margin-bottom: 12px;
-}
-
-/* \u2014\u2014\u2014 Feedback form \u2014\u2014\u2014 */
-.uidex-form {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.uidex-form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.uidex-form-label {
-  font-size: var(--uidex-font-size-xs);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-form-select,
-.uidex-form-input,
-.uidex-form-textarea {
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: transparent;
-  color: var(--uidex-color-text);
-  font-size: var(--uidex-font-size-sm);
-  font-family: var(--uidex-font-mono);
-  outline: none;
-}
-
-.uidex-form-select:focus,
-.uidex-form-input:focus,
-.uidex-form-textarea:focus {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.uidex-form-input::placeholder,
-.uidex-form-textarea::placeholder {
-  color: var(--uidex-color-text-muted);
-}
-
-.uidex-form-select {
-  appearance: none;
-  padding: 6px 10px;
-  cursor: pointer;
-  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 fill='%23ababab' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-right: 26px;
-}
-
-.uidex-form-input {
-  padding: 6px 10px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.uidex-form-input + .uidex-form-input {
-  margin-top: 6px;
-}
-
-.uidex-form-textarea {
-  padding: 8px 10px;
-  line-height: 1.5;
-  resize: vertical;
-  min-height: 80px;
-}
-
-.uidex-form-submit {
-  padding: 6px 16px;
-  border: 1px solid var(--uidex-color-border);
-  border-radius: 0;
-  background: var(--uidex-color-primary);
-  color: var(--uidex-color-bg);
-  font-size: var(--uidex-font-size-sm);
-  font-weight: 600;
-  font-family: var(--uidex-font-mono);
-  cursor: pointer;
-  transition: background-color var(--uidex-transition-fast);
-  align-self: flex-end;
-}
-
-.uidex-form-submit:hover {
-  background: var(--uidex-color-primary-hover);
-}
-
-.uidex-form-submit:not(:disabled):active {
-  transform: translateY(1px);
-}
-
-.uidex-form-submit:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-/* \u2014\u2014\u2014 Form toggle \u2014\u2014\u2014 */
-.uidex-form-toggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-}
-
-.uidex-form-checkbox {
-  flex-shrink: 0;
-  margin: 0;
-  accent-color: var(--uidex-color-text-strong);
-}
-
-.uidex-form-toggle-text {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-secondary);
-}
-
-/* \u2014\u2014\u2014 Responsive \u2014\u2014\u2014 */
-@media (max-width: 600px) {
-  .uidex-modal--panel {
-    width: auto;
-  }
-
-  .uidex-panel-body {
-    flex-direction: column;
-  }
-
-  .uidex-panel-sidebar {
-    width: auto;
-    max-height: 200px;
-    border-right: none;
-    border-bottom: 1px solid var(--uidex-color-border);
-  }
-}
-
-/* \u2014\u2014\u2014 Graph \u2014\u2014\u2014 */
-.uidex-graph {
-  margin-top: 8px;
-}
-
-.uidex-graph-svg {
-  display: block;
-}
-
-.uidex-graph-header {
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-}
-
-.uidex-graph-header--pages { fill: var(--uidex-color-pages); }
-.uidex-graph-header--features { fill: var(--uidex-color-features); }
-.uidex-graph-header--components { fill: var(--uidex-color-components); }
-
-.uidex-graph-node {
-  cursor: pointer;
-}
-
-.uidex-graph-node rect {
-  fill: var(--uidex-color-bg-elevated);
-  stroke: var(--uidex-color-border);
-  stroke-width: 1;
-}
-
-.uidex-graph-node:hover rect {
-  fill: var(--uidex-color-surface-hover);
-}
-
-.uidex-graph-node--page rect { stroke: color-mix(in srgb, var(--uidex-color-pages) 50%, transparent); }
-.uidex-graph-node--feature rect { stroke: color-mix(in srgb, var(--uidex-color-features) 50%, transparent); }
-.uidex-graph-node--component rect { stroke: color-mix(in srgb, var(--uidex-color-components) 50%, transparent); }
-
-.uidex-graph-label {
-  font-size: 10px;
-  font-family: var(--uidex-font-mono);
-  fill: var(--uidex-color-text);
-}
-
-.uidex-graph-edge {
-  fill: none;
-  stroke-width: 1;
-  opacity: 0.3;
-}
-
-.uidex-graph-edge--page { stroke: var(--uidex-color-pages); }
-.uidex-graph-edge--feature { stroke: var(--uidex-color-features); }
-
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-edge { opacity: 0.08; }
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-node { opacity: 0.3; }
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-edge--highlighted { opacity: 0.6; stroke-width: 1.5; }
-.uidex-graph-svg.uidex-graph--hover .uidex-graph-node--highlighted { opacity: 1; }
-
-.uidex-graph-note {
-  font-size: var(--uidex-font-size-sm);
-  color: var(--uidex-color-text-muted);
-  margin-top: 12px;
-  font-style: italic;
-}
-
-/* \u2014\u2014\u2014 Overlay \u2014\u2014\u2014
-   NOTE: The overlay renders in document.body (outside the Shadow DOM)
-   so all its styles are set inline in overlay.ts. These CSS classes
-   are retained only for consumers who import style.css standalone. */
-.uidex-overlay {
-  position: fixed;
-  pointer-events: none;
-  z-index: 2147483645;
-}
-`;
-var css_text_default = cssText;
-
-// src/core/shadow.ts
-function injectStyles(shadowRoot) {
-  const style = document.createElement("style");
-  style.textContent = css_text_default;
-  shadowRoot.appendChild(style);
-}
-
-// src/core/uidex-ui.ts
-var UidexUI = class {
-  menu;
-  overlay;
-  modal;
-  inspector;
-  options;
-  mounted = false;
-  shadowHost = null;
-  shadowRoot = null;
-  observer = null;
-  refreshTimer = null;
-  copyTimer = null;
-  currentPresentIds = [];
-  activeMode = null;
-  sessionId;
-  capture = null;
-  constructor(options = {}) {
-    this.options = options;
-    this.sessionId = generateSessionId();
-    if (options.ingest?.captureConsole || options.ingest?.captureNetwork) {
-      this.capture = new IngestCapture(
-        options.ingest.captureConsole ?? false,
-        options.ingest.captureNetwork ?? false
-      );
-    }
-    this.overlay = new Overlay({
-      color: options.config?.defaults?.color,
-      borderStyle: options.config?.defaults?.borderStyle,
-      borderWidth: options.config?.defaults?.borderWidth,
-      showLabel: options.config?.defaults?.showLabel,
-      labelPosition: options.config?.defaults?.labelPosition,
-      colors: options.config?.colors
-    });
-    this.modal = new Modal({
-      onComponentNavigate: (id) => {
-        const element = this.findElement(id);
-        if (element && typeof element.scrollIntoView === "function") {
-          element.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-        this.options.onSelect?.(id);
-      },
-      elementGetter: (id) => this.findElement(id),
-      ingest: options.ingest,
-      onSubmit: options.onSubmit,
-      sessionId: this.sessionId,
-      getConsoleLogs: () => this.capture?.getConsoleLogs() ?? [],
-      getNetworkErrors: () => this.capture?.getNetworkErrors() ?? []
-    });
-    this.menu = new Menu({
-      onInspectToggle: () => this.toggleMode("inspect"),
-      onCopyToggle: () => this.toggleMode("copy"),
-      onFeedbackToggle: () => this.toggleMode("feedback"),
-      onExpandClick: () => this.handleExpandClick()
-    });
-    if (options.inspectShortcut === false) {
-      this.inspector = null;
-    } else {
-      this.inspector = new Inspector({
-        shortcut: options.inspectShortcut,
-        onHighlight: (_element, id) => this.handleHighlight(id),
-        onSelect: (_element, id) => this.handleSelect(id),
-        onActivate: () => {
-          this.updateMenuActiveStates();
-        },
-        onDeactivate: () => {
-          this.overlay.hide();
-          this.activeMode = null;
-          this.updateMenuActiveStates();
-        }
-      });
-    }
-  }
-  mount(container) {
-    if (this.mounted) return;
-    const components = this.getComponentsMap();
-    const componentIds = Object.keys(components);
-    if (componentIds.length === 0) return;
-    this.shadowHost = document.createElement("div");
-    this.shadowHost.id = "uidex-root";
-    this.shadowHost.style.position = "fixed";
-    this.shadowHost.style.top = "0";
-    this.shadowHost.style.left = "0";
-    this.shadowHost.style.width = "0";
-    this.shadowHost.style.height = "0";
-    this.shadowHost.style.pointerEvents = "none";
-    this.shadowHost.style.zIndex = "2147483646";
-    this.shadowRoot = this.shadowHost.attachShadow({ mode: "open" });
-    injectStyles(this.shadowRoot);
-    const presentIds = this.scanPresentIds(componentIds);
-    const menuContainer = this.menu.create();
-    const position = this.options.buttonPosition ?? "bottom-right";
-    menuContainer.classList.add(POSITION_CLASSES[position]);
-    const mountTarget = container ?? document.body;
-    mountTarget.appendChild(this.shadowHost);
-    this.shadowRoot.appendChild(menuContainer);
-    this.modal.setShadowRoot(this.shadowRoot);
-    this.updateModalData(presentIds);
-    this.inspector?.mount();
-    this.capture?.start();
-    this.startObserving();
-    this.mounted = true;
-  }
-  destroy() {
-    if (!this.mounted) return;
-    this.stopObserving();
-    this.capture?.stop();
-    if (this.copyTimer !== null) {
-      clearTimeout(this.copyTimer);
-      this.copyTimer = null;
-    }
-    this.inspector?.destroy();
-    this.menu.destroy();
-    this.overlay.destroy();
-    this.modal.destroy();
-    if (this.shadowHost && this.shadowHost.parentNode) {
-      this.shadowHost.parentNode.removeChild(this.shadowHost);
-    }
-    this.shadowHost = null;
-    this.shadowRoot = null;
-    this.mounted = false;
-  }
-  startInspect() {
-    this.inspector?.activate();
-  }
-  stopInspect() {
-    this.inspector?.deactivate();
-  }
-  isInspecting() {
-    return this.inspector?.isActive() ?? false;
-  }
-  /** Open the modal panel, optionally to a specific view. */
-  openPanel(view) {
-    this.modal.open(view);
-  }
-  toggleMode(mode) {
-    if (this.inspector?.isActive()) {
-      if (this.activeMode === mode) {
-        this.inspector.deactivate();
-      } else {
-        this.activeMode = mode;
-        this.updateMenuActiveStates();
-      }
-    } else {
-      this.activeMode = mode;
-      this.inspector?.activate();
-    }
-  }
-  updateMenuActiveStates() {
-    this.menu.setInspectActive(this.activeMode === "inspect");
-    this.menu.setCopyActive(this.activeMode === "copy");
-    this.menu.setFeedbackActive(this.activeMode === "feedback");
-  }
-  getComponentsMap() {
-    return this.options.components ?? getComponents() ?? {};
-  }
-  getPagesArray() {
-    return this.options.pages ?? getPages() ?? [];
-  }
-  getFeaturesArray() {
-    return this.options.features ?? getFeatures() ?? [];
-  }
-  extractPageTitle(content) {
-    const match = content.match(/^#\s+(.+)/m);
-    return match ? match[1].trim() : "Untitled";
-  }
-  /** Hamburger button handler — open modal to default (current page) view. */
-  handleExpandClick() {
-    this.inspector?.deactivate();
-    this.overlay.hide();
-    this.modal.open();
-  }
-  /** Selection handler — routes by active mode. */
-  handleSelect(id) {
-    switch (this.activeMode) {
-      case "inspect":
-        this.overlay.hide();
-        this.modal.open({ type: "component", id });
-        break;
-      case "copy":
-        this.handleCopySelect(id);
-        break;
-      case "feedback":
-        this.overlay.hide();
-        this.modal.openFeedback(id);
-        break;
-    }
-  }
-  handleCopySelect(id) {
-    const components = this.getComponentsMap();
-    const locations = components[id];
-    if (!locations || locations.length === 0) return;
-    const loc = locations[0];
-    const text = `${loc.filePath}:${loc.line}`;
-    navigator.clipboard.writeText(text).catch(() => {
-    });
-    const element = this.findElement(id);
-    if (element instanceof HTMLElement) {
-      this.overlay.show(element, "Copied!");
-      this.copyTimer = setTimeout(() => {
-        this.copyTimer = null;
-        this.overlay.hide();
-      }, 600);
-    }
-  }
-  findElement(id) {
-    return document.querySelector(`[data-uidex="${id}"]`);
-  }
-  handleHighlight(id) {
-    if (id) {
-      const element = this.findElement(id);
-      if (element instanceof HTMLElement) {
-        this.overlay.show(element, id);
-      }
-    } else {
-      this.overlay.hide();
-    }
-  }
-  /** Push current pages/features/components/presentIds to the modal. */
-  updateModalData(presentIds) {
-    const pages = this.getPagesArray();
-    const features = this.getFeaturesArray();
-    const components = this.getComponentsMap();
-    this.modal.setData({
-      pages: pages.map((p) => ({
-        title: this.extractPageTitle(p.content),
-        dir: p.dir,
-        content: p.content,
-        componentIds: p.componentIds
-      })),
-      features: features.map((f) => ({
-        title: this.extractPageTitle(f.content),
-        dir: f.dir,
-        content: f.content,
-        componentIds: f.componentIds
-      })),
-      components,
-      presentIds: new Set(presentIds)
-    });
-  }
-  // ——— DOM observation for SPA navigation ———
-  /** Scan which registered component IDs are currently in the DOM. */
-  scanPresentIds(allIds) {
-    const componentIds = allIds ?? Object.keys(this.getComponentsMap());
-    const found = /* @__PURE__ */ new Set();
-    for (const el of document.querySelectorAll("[data-uidex]")) {
-      const id = el.getAttribute("data-uidex");
-      if (id) found.add(id);
-    }
-    const presentIds = componentIds.filter((id) => found.has(id));
-    this.currentPresentIds = presentIds;
-    return presentIds;
-  }
-  /** Schedule a debounced refresh of the modal data after DOM mutations. */
-  scheduleRefresh() {
-    if (this.refreshTimer !== null) return;
-    this.refreshTimer = setTimeout(() => {
-      this.refreshTimer = null;
-      this.refresh();
-    }, 100);
-  }
-  /** Re-scan the DOM and update modal data if the set of present IDs changed. */
-  refresh() {
-    const oldIds = this.currentPresentIds;
-    const newIds = this.scanPresentIds();
-    if (newIds.length === oldIds.length && newIds.every((id, i) => id === oldIds[i])) {
-      return;
-    }
-    this.updateModalData(newIds);
-  }
-  startObserving() {
-    this.observer = new MutationObserver(() => this.scheduleRefresh());
-    this.observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["data-uidex"]
-    });
-  }
-  stopObserving() {
-    if (this.refreshTimer !== null) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-    this.observer?.disconnect();
-    this.observer = null;
-  }
-};
-function createUidexUI(options = {}) {
-  return new UidexUI(options);
-}
-export {
-  IngestCapture,
-  Inspector,
-  Menu,
-  Modal,
-  Overlay,
-  UidexUI,
-  classNames,
-  createUidexUI,
-  generateSessionId,
-  getComponents,
-  getContrastColor,
-  getFeatures,
-  getPages,
-  hexToRgba,
-  injectStyles,
-  registerComponents,
-  registerFeatures,
-  registerPages,
-  resolveColor,
-  submitFeedback
-};
-//# sourceMappingURL=index.js.map