uidex 0.0.1 → 0.1.0

package/dist/index.js

@@ -0,0 +1,3251 @@
+"use client";
+
+// src/react/UidexDevtools.tsx
+import { useEffect, useMemo, useRef } from "react";
+
+// 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;
+  }
+};
+
+// src/react/UidexDevtools.tsx
+function UidexDevtools({
+  components,
+  config,
+  buttonPosition = "bottom-right",
+  disabled = false,
+  onSelect,
+  inspectShortcut
+}) {
+  const uiRef = useRef(null);
+  const stableShortcut = useMemo(
+    () => inspectShortcut,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      inspectShortcut === false ? false : `${inspectShortcut?.key}:${inspectShortcut?.ctrlKey}:${inspectShortcut?.shiftKey}:${inspectShortcut?.altKey}:${inspectShortcut?.metaKey}`
+    ]
+  );
+  useEffect(() => {
+    if (disabled) {
+      return;
+    }
+    const ui = new UidexUI({
+      components,
+      config,
+      buttonPosition,
+      onSelect,
+      inspectShortcut: stableShortcut
+    });
+    ui.mount();
+    uiRef.current = ui;
+    return () => {
+      ui.destroy();
+      uiRef.current = null;
+    };
+  }, [components, config, buttonPosition, disabled, onSelect, stableShortcut]);
+  return null;
+}
+
+// src/react/UidexOverlay.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function UidexOverlay({
+  target,
+  color,
+  borderStyle,
+  borderWidth,
+  label,
+  showLabel,
+  labelPosition,
+  colors
+}) {
+  const overlayRef = useRef2(null);
+  useEffect2(() => {
+    const overlay = new Overlay();
+    overlayRef.current = overlay;
+    return () => {
+      overlay.destroy();
+      overlayRef.current = null;
+    };
+  }, []);
+  useEffect2(() => {
+    overlayRef.current?.updateOptions({
+      color,
+      borderStyle,
+      borderWidth,
+      showLabel,
+      labelPosition,
+      colors
+    });
+  }, [color, borderStyle, borderWidth, showLabel, labelPosition, colors]);
+  useEffect2(() => {
+    if (!overlayRef.current) return;
+    if (target) {
+      overlayRef.current.show(target, label);
+    } else {
+      overlayRef.current.hide();
+    }
+  }, [target, label]);
+  return null;
+}
+export {
+  UidexDevtools,
+  UidexOverlay,
+  classNames,
+  getComponents,
+  getContrastColor,
+  getFeatures,
+  getPages,
+  hexToRgba,
+  registerComponents,
+  registerFeatures,
+  registerPages,
+  resolveColor
+};
+//# sourceMappingURL=index.js.map