uidex 0.0.1 → 0.1.0

package/dist/core/index.global.js

@@ -0,0 +1,3199 @@
+"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, {
+    Inspector: () => Inspector,
+    Menu: () => Menu,
+    Modal: () => Modal,
+    Overlay: () => Overlay,
+    UidexUI: () => UidexUI,
+    classNames: () => classNames,
+    createUidexUI: () => createUidexUI,
+    getComponents: () => getComponents,
+    getContrastColor: () => getContrastColor,
+    getFeatures: () => getFeatures,
+    getPages: () => getPages,
+    hexToRgba: () => hexToRgba,
+    injectStyles: () => injectStyles,
+    registerComponents: () => registerComponents,
+    registerFeatures: () => registerFeatures,
+    registerPages: () => registerPages,
+    resolveColor: () => resolveColor
+  });
+
+  // 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 = "#e5e5e5";
+  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`;
+    }
+    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/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 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);
+      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 report = {
+          type: typeSelect.select.value,
+          severity: severitySelect.select.value,
+          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(),
+          viewport: env.viewport,
+          screen: env.screen,
+          userAgent: env.userAgent,
+          screenshot
+        };
+        console.log("[uidex] Feedback submitted:", report);
+        submitBtn.textContent = "Submitted!";
+        setTimeout(() => {
+          submitBtn.textContent = "Submit";
+          submitBtn.disabled = false;
+        }, 1500);
+      });
+      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 {
+  appearance: none;
+  padding: 6px 10px;
+  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);
+  cursor: pointer;
+  outline: none;
+  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-select:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.uidex-form-textarea {
+  padding: 8px 10px;
+  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);
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  min-height: 80px;
+}
+
+.uidex-form-textarea::placeholder {
+  color: var(--uidex-color-text-muted);
+}
+
+.uidex-form-textarea:focus {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.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: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;
+    constructor(options = {}) {
+      this.options = options;
+      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)
+      });
+      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.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.startObserving();
+      this.mounted = true;
+    }
+    destroy() {
+      if (!this.mounted) return;
+      this.stopObserving();
+      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