uidex 0.2.1 → 0.3.0

package/dist/core/index.global.js

@@ -1,3469 +0,0 @@
-"use strict";
-var UidexCore = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
-  };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-    }
-    return to;
-  };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-  // src/core/index.ts
-  var index_exports = {};
-  __export(index_exports, {
-    IngestCapture: () => IngestCapture,
-    Inspector: () => Inspector,
-    Menu: () => Menu,
-    Modal: () => Modal,
-    Overlay: () => Overlay,
-    UidexUI: () => UidexUI,
-    classNames: () => classNames,
-    createUidexUI: () => createUidexUI,
-    generateSessionId: () => generateSessionId,
-    getComponents: () => getComponents,
-    getContrastColor: () => getContrastColor,
-    getFeatures: () => getFeatures,
-    getPages: () => getPages,
-    hexToRgba: () => hexToRgba,
-    injectStyles: () => injectStyles,
-    registerComponents: () => registerComponents,
-    registerFeatures: () => registerFeatures,
-    registerPages: () => registerPages,
-    resolveColor: () => resolveColor,
-    submitFeedback: () => submitFeedback
-  });
-
-  // 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);
-  }
-  return __toCommonJS(index_exports);
-})();
-//# sourceMappingURL=index.global.js.map