@ui-context-kit/overlay 0.1.0

package/dist/chunk-ISOPDZ5A.js

@@ -0,0 +1,823 @@
+// src/ui/overlay.ts
+var hostEl = null;
+var shadowRoot = null;
+var highlightEl = null;
+function createOverlay() {
+  hostEl = document.createElement("div");
+  hostEl.id = "ui-context-host";
+  hostEl.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;";
+  document.body.appendChild(hostEl);
+  shadowRoot = hostEl.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = `
+    .highlight {
+      position: fixed;
+      border: 2px solid #3b82f6;
+      background: rgba(59, 130, 246, 0.1);
+      pointer-events: none;
+      transition: all 0.1s ease;
+      border-radius: 4px;
+      z-index: 2147483647;
+    }
+    .highlight-label {
+      position: absolute;
+      top: -24px;
+      left: -2px;
+      background: #3b82f6;
+      color: white;
+      font-size: 11px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      padding: 2px 6px;
+      border-radius: 3px 3px 0 0;
+      white-space: nowrap;
+      pointer-events: none;
+    }
+  `;
+  shadowRoot.appendChild(style);
+  highlightEl = document.createElement("div");
+  highlightEl.className = "highlight";
+  highlightEl.style.display = "none";
+  const labelEl = document.createElement("div");
+  labelEl.className = "highlight-label";
+  highlightEl.appendChild(labelEl);
+  shadowRoot.appendChild(highlightEl);
+  return {
+    highlight(rect, label) {
+      if (!rect || !highlightEl) {
+        if (highlightEl) highlightEl.style.display = "none";
+        return;
+      }
+      highlightEl.style.display = "block";
+      highlightEl.style.top = rect.top + "px";
+      highlightEl.style.left = rect.left + "px";
+      highlightEl.style.width = rect.width + "px";
+      highlightEl.style.height = rect.height + "px";
+      const lbl = highlightEl.querySelector(".highlight-label");
+      if (lbl && label) {
+        lbl.textContent = label;
+        lbl.style.display = "block";
+      } else if (lbl) {
+        lbl.style.display = "none";
+      }
+    },
+    destroy() {
+      hostEl?.remove();
+      hostEl = null;
+      shadowRoot = null;
+      highlightEl = null;
+    }
+  };
+}
+
+// src/ui/toast.ts
+var toastContainer = null;
+var toastShadow = null;
+function ensureContainer() {
+  if (toastContainer) return;
+  toastContainer = document.createElement("div");
+  toastContainer.id = "ui-context-toast";
+  toastContainer.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;pointer-events:none;";
+  document.body.appendChild(toastContainer);
+  toastShadow = toastContainer.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = `
+    .toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      background: #1e293b;
+      color: #f1f5f9;
+      padding: 12px 20px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      pointer-events: auto;
+      animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
+      z-index: 2147483647;
+    }
+    @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+  `;
+  toastShadow.appendChild(style);
+}
+function showToast(message, duration = 3e3) {
+  ensureContainer();
+  if (!toastShadow) return;
+  const el = document.createElement("div");
+  el.className = "toast";
+  el.textContent = message;
+  toastShadow.appendChild(el);
+  setTimeout(() => el.remove(), duration);
+}
+
+// src/ui/toolbar.ts
+function createToolbar(opts) {
+  const host = document.createElement("div");
+  host.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483647;";
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = `
+    .toolbar {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 12px;
+      padding: 8px 12px;
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+    }
+    .toolbar-btn {
+      background: #3b82f6;
+      color: white;
+      border: none;
+      padding: 6px 14px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    .toolbar-btn:hover { background: #2563eb; }
+    .toolbar-btn.secondary { background: #475569; }
+    .toolbar-btn.secondary:hover { background: #64748b; }
+    .toolbar-btn.freeze { background: #475569; }
+    .toolbar-btn.freeze:hover { background: #64748b; }
+    .toolbar-btn.freeze.active { background: #f59e0b; color: #1e293b; }
+    .toolbar-btn.freeze.active:hover { background: #d97706; }
+    .toolbar-label {
+      color: #94a3b8;
+      font-size: 12px;
+      padding: 0 4px;
+    }
+    .badge {
+      display: inline-block;
+      background: #f59e0b;
+      color: #1e293b;
+      font-size: 10px;
+      font-weight: 700;
+      padding: 1px 5px;
+      border-radius: 10px;
+      margin-left: 4px;
+    }
+    .badge.hidden { display: none; }
+    .divider {
+      width: 1px;
+      height: 20px;
+      background: #334155;
+    }
+  `;
+  shadow.appendChild(style);
+  const toolbar = document.createElement("div");
+  toolbar.className = "toolbar";
+  toolbar.innerHTML = `
+    <span class="toolbar-label">UI Context</span>
+    <div class="divider"></div>
+    <button class="toolbar-btn capture">Capture</button>
+    <button class="toolbar-btn secondary capture-all" style="display:none">Capture All <span class="badge hidden">0</span></button>
+    <div class="divider"></div>
+    <button class="toolbar-btn freeze" title="Freeze DOM (Ctrl+Shift+F)">Freeze</button>
+    <button class="toolbar-btn secondary close">\u2715</button>
+  `;
+  shadow.appendChild(toolbar);
+  const captureBtn = toolbar.querySelector(".capture");
+  const captureAllBtn = toolbar.querySelector(".capture-all");
+  const freezeBtn = toolbar.querySelector(".freeze");
+  const closeBtn = toolbar.querySelector(".close");
+  const badge = toolbar.querySelector(".badge");
+  captureBtn.addEventListener("click", opts.onCapture);
+  captureAllBtn.addEventListener("click", () => opts.onCaptureAll?.());
+  freezeBtn.addEventListener("click", () => opts.onFreeze?.());
+  closeBtn.addEventListener("click", opts.onClose);
+  return {
+    el: host,
+    destroy() {
+      host.remove();
+    },
+    updateBadge(count) {
+      if (count > 0) {
+        captureAllBtn.style.display = "";
+        badge.textContent = String(count);
+        badge.classList.remove("hidden");
+      } else {
+        captureAllBtn.style.display = "none";
+        badge.classList.add("hidden");
+      }
+    },
+    updateFreezeState(frozen) {
+      if (frozen) {
+        freezeBtn.classList.add("active");
+        freezeBtn.textContent = "Frozen";
+      } else {
+        freezeBtn.classList.remove("active");
+        freezeBtn.textContent = "Freeze";
+      }
+    }
+  };
+}
+
+// src/fiber-walker.ts
+function extractComponentHierarchy(el) {
+  const fiber = getFiber(el);
+  if (!fiber) return [];
+  const hierarchy = [];
+  let current = fiber;
+  while (current) {
+    if (typeof current.type === "function" || typeof current.type === "object") {
+      const name = typeof current.type === "function" ? current.type.displayName || current.type.name : current.type?.displayName || current.type?.render?.displayName || current.type?.render?.name;
+      if (name && !name.startsWith("_") && name !== "Fragment") {
+        hierarchy.unshift(name);
+      }
+    }
+    current = current.return;
+  }
+  return hierarchy;
+}
+function getFiber(el) {
+  const key = Object.keys(el).find(
+    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
+  );
+  return key ? el[key] : null;
+}
+
+// src/context-extractor.ts
+var STYLE_PROPERTIES = [
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "backgroundColor",
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "borderRadius",
+  "display",
+  "flexDirection",
+  "justifyContent",
+  "alignItems",
+  "gap",
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "overflow",
+  "position",
+  "zIndex",
+  "opacity",
+  "border",
+  "boxShadow",
+  "lineHeight",
+  "letterSpacing",
+  "textAlign"
+];
+function extractSource(el) {
+  const file = el.getAttribute("data-source-file");
+  const line = el.getAttribute("data-source-line");
+  const col = el.getAttribute("data-source-col");
+  if (!file || !line) return null;
+  return {
+    file,
+    line: parseInt(line, 10),
+    col: parseInt(col || "0", 10),
+    component: el.getAttribute("data-source-component") || void 0
+  };
+}
+function extractContext(el) {
+  const computed = getComputedStyle(el);
+  const rect = el.getBoundingClientRect();
+  const styles = {};
+  for (const prop of STYLE_PROPERTIES) {
+    const value = computed.getPropertyValue(
+      prop.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase())
+    );
+    if (value && value !== "none" && value !== "normal" && value !== "auto" && value !== "0px" && value !== "rgba(0, 0, 0, 0)") {
+      styles[prop] = value;
+    }
+  }
+  return {
+    source: extractSource(el),
+    tagName: el.tagName.toLowerCase(),
+    classes: typeof el.className === "string" ? el.className : "",
+    computedStyles: styles,
+    dimensions: { width: rect.width, height: rect.height, x: rect.x, y: rect.y },
+    componentHierarchy: extractComponentHierarchy(el),
+    url: window.location.href
+  };
+}
+
+// src/screenshot.ts
+async function captureElementScreenshot(el) {
+  try {
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return void 0;
+    const canvas = document.createElement("canvas");
+    const dpr = window.devicePixelRatio || 1;
+    const padding = 8;
+    const captureWidth = Math.ceil(rect.width + padding * 2);
+    const captureHeight = Math.ceil(rect.height + padding * 2);
+    canvas.width = captureWidth * dpr;
+    canvas.height = captureHeight * dpr;
+    canvas.style.width = captureWidth + "px";
+    canvas.style.height = captureHeight + "px";
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return void 0;
+    ctx.scale(dpr, dpr);
+    const screenshot = await captureViaSvgForeignObject(el, rect, ctx, canvas, padding);
+    if (screenshot) return screenshot;
+    return await captureViaRange(el, rect, canvas, ctx, padding);
+  } catch {
+    return void 0;
+  }
+}
+async function captureViaSvgForeignObject(el, rect, ctx, canvas, padding) {
+  try {
+    const clone = el.cloneNode(true);
+    copyComputedStyles(el, clone);
+    const width = Math.ceil(rect.width + padding * 2);
+    const height = Math.ceil(rect.height + padding * 2);
+    const svgNs = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNs, "svg");
+    svg.setAttribute("width", String(width));
+    svg.setAttribute("height", String(height));
+    svg.setAttribute("xmlns", svgNs);
+    const foreignObject = document.createElementNS(svgNs, "foreignObject");
+    foreignObject.setAttribute("width", "100%");
+    foreignObject.setAttribute("height", "100%");
+    const container = document.createElement("div");
+    container.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+    container.style.cssText = `
+      width: ${width}px;
+      height: ${height}px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: white;
+      padding: ${padding}px;
+      box-sizing: border-box;
+    `;
+    container.appendChild(clone);
+    foreignObject.appendChild(container);
+    svg.appendChild(foreignObject);
+    const svgString = new XMLSerializer().serializeToString(svg);
+    const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(svgBlob);
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        ctx.drawImage(img, 0, 0);
+        URL.revokeObjectURL(url);
+        try {
+          resolve(canvas.toDataURL("image/png"));
+        } catch {
+          resolve(void 0);
+        }
+      };
+      img.onerror = () => {
+        URL.revokeObjectURL(url);
+        resolve(void 0);
+      };
+      img.src = url;
+    });
+  } catch {
+    return void 0;
+  }
+}
+async function captureViaRange(_el, rect, canvas, ctx, padding) {
+  try {
+    const width = canvas.width / (window.devicePixelRatio || 1);
+    const height = canvas.height / (window.devicePixelRatio || 1);
+    ctx.fillStyle = "#f8fafc";
+    ctx.fillRect(0, 0, width, height);
+    ctx.strokeStyle = "#3b82f6";
+    ctx.lineWidth = 2;
+    ctx.strokeRect(padding, padding, rect.width, rect.height);
+    ctx.fillStyle = "#64748b";
+    ctx.font = "11px -apple-system, BlinkMacSystemFont, sans-serif";
+    ctx.fillText(
+      `${Math.round(rect.width)} x ${Math.round(rect.height)}px`,
+      padding + 4,
+      padding + rect.height / 2 + 4
+    );
+    return canvas.toDataURL("image/png");
+  } catch {
+    return void 0;
+  }
+}
+function copyComputedStyles(source, target) {
+  const computed = getComputedStyle(source);
+  const important = [
+    "display",
+    "width",
+    "height",
+    "padding",
+    "margin",
+    "border",
+    "border-radius",
+    "background",
+    "background-color",
+    "color",
+    "font-size",
+    "font-weight",
+    "font-family",
+    "line-height",
+    "text-align",
+    "box-shadow",
+    "opacity",
+    "flex-direction",
+    "justify-content",
+    "align-items",
+    "gap",
+    "overflow"
+  ];
+  for (const prop of important) {
+    target.style.setProperty(prop, computed.getPropertyValue(prop));
+  }
+  const sourceChildren = source.children;
+  const targetChildren = target.children;
+  for (let i = 0; i < sourceChildren.length && i < targetChildren.length; i++) {
+    if (sourceChildren[i] instanceof HTMLElement && targetChildren[i] instanceof HTMLElement) {
+      copyComputedStyles(sourceChildren[i], targetChildren[i]);
+    }
+  }
+}
+
+// src/selection.ts
+function createSelectionHandler(opts) {
+  let isActive = false;
+  let selectedEl = null;
+  const multiSelected = /* @__PURE__ */ new Set();
+  function handleMouseMove(e) {
+    if (!isActive) return;
+    const target = e.target;
+    if (target.id === "ui-context-host" || target.id === "ui-context-toast" || target.closest("#ui-context-host")) return;
+    opts.onHover(target);
+  }
+  function handleClick(e) {
+    if (!isActive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const target = e.target;
+    if (target.id === "ui-context-host" || target.closest("#ui-context-host")) return;
+    if (e.shiftKey) {
+      if (multiSelected.has(target)) {
+        multiSelected.delete(target);
+        target.style.outline = "";
+      } else {
+        multiSelected.add(target);
+        target.style.outline = "2px dashed #f59e0b";
+      }
+      opts.onSelectionChange?.(multiSelected.size);
+      return;
+    }
+    selectedEl = target;
+    const context = extractContext(target);
+    captureElementScreenshot(target).then((screenshot) => {
+      if (screenshot) context.screenshotDataUrl = screenshot;
+      opts.onSelect(context);
+    });
+  }
+  return {
+    activate() {
+      isActive = true;
+      document.addEventListener("mousemove", handleMouseMove, true);
+      document.addEventListener("click", handleClick, true);
+      document.body.style.cursor = "crosshair";
+    },
+    deactivate() {
+      isActive = false;
+      selectedEl = null;
+      for (const el of multiSelected) {
+        el.style.outline = "";
+      }
+      multiSelected.clear();
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.body.style.cursor = "";
+      opts.onHover(null);
+    },
+    get isActive() {
+      return isActive;
+    },
+    get selectedElement() {
+      return selectedEl;
+    },
+    get multiSelectedElements() {
+      return multiSelected;
+    },
+    get multiSelectedCount() {
+      return multiSelected.size;
+    },
+    async captureMultiSelection() {
+      const contexts = [];
+      for (const el of multiSelected) {
+        const ctx = extractContext(el);
+        const screenshot = await captureElementScreenshot(el);
+        if (screenshot) ctx.screenshotDataUrl = screenshot;
+        contexts.push(ctx);
+      }
+      return contexts;
+    },
+    clearMultiSelection() {
+      for (const el of multiSelected) {
+        el.style.outline = "";
+      }
+      multiSelected.clear();
+      opts.onSelectionChange?.(0);
+    }
+  };
+}
+
+// src/transport.ts
+var ws = null;
+var wsUrl = "";
+function initTransport(url) {
+  wsUrl = url || `ws://${location.hostname}:${location.port}`;
+}
+function sendContext(context) {
+  return new Promise((resolve) => {
+    try {
+      if (typeof import.meta !== "undefined" && import.meta.hot) {
+        import.meta.hot.send("ui-context:capture", context);
+        resolve(true);
+        return;
+      }
+      if (!ws || ws.readyState !== WebSocket.OPEN) {
+        ws = new WebSocket(wsUrl);
+        ws.onopen = () => {
+          ws.send(JSON.stringify({ type: "ui-context:capture", data: context }));
+          resolve(true);
+        };
+        ws.onerror = () => resolve(false);
+      } else {
+        ws.send(JSON.stringify({ type: "ui-context:capture", data: context }));
+        resolve(true);
+      }
+    } catch {
+      resolve(false);
+    }
+  });
+}
+
+// src/ui/onboarding.ts
+var STORAGE_KEY = "ui-context-kit-onboarding-dismissed";
+function showOnboarding(shortcut) {
+  try {
+    if (localStorage.getItem(STORAGE_KEY)) return;
+  } catch {
+    return;
+  }
+  const host = document.createElement("div");
+  host.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;z-index:2147483646;";
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = `
+    .banner {
+      position: fixed;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+      border: 1px solid #334155;
+      border-radius: 12px;
+      padding: 12px 20px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+      animation: slideUp 0.4s ease;
+      max-width: 480px;
+    }
+    @keyframes slideUp {
+      from { opacity: 0; transform: translateX(-50%) translateY(20px); }
+      to { opacity: 1; transform: translateX(-50%) translateY(0); }
+    }
+    .icon {
+      font-size: 20px;
+      flex-shrink: 0;
+    }
+    .text {
+      color: #e2e8f0;
+      font-size: 13px;
+      line-height: 1.4;
+    }
+    .text strong {
+      color: #60a5fa;
+    }
+    .kbd {
+      display: inline-block;
+      background: #334155;
+      color: #e2e8f0;
+      padding: 1px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-family: monospace;
+      border: 1px solid #475569;
+    }
+    .close-btn {
+      background: none;
+      border: none;
+      color: #64748b;
+      cursor: pointer;
+      padding: 4px;
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+    .close-btn:hover { color: #94a3b8; }
+  `;
+  shadow.appendChild(style);
+  const shortcutDisplay = shortcut.split("+").map(
+    (k) => k.charAt(0).toUpperCase() + k.slice(1)
+  ).join(" + ");
+  const banner = document.createElement("div");
+  banner.className = "banner";
+  banner.innerHTML = `
+    <span class="icon">\u{1F3AF}</span>
+    <span class="text">
+      <strong>UI Context Kit</strong> is ready!
+      Press <kbd class="kbd">${shortcutDisplay}</kbd> to select any UI element and capture its context for AI.
+      Use <strong>Shift+Click</strong> for multi-select, <strong>Ctrl+Shift+F</strong> to freeze state.
+    </span>
+    <button class="close-btn" title="Dismiss">\u2715</button>
+  `;
+  shadow.appendChild(banner);
+  banner.querySelector(".close-btn").addEventListener("click", () => {
+    host.remove();
+    try {
+      localStorage.setItem(STORAGE_KEY, "1");
+    } catch {
+    }
+  });
+  setTimeout(() => {
+    if (host.parentNode) {
+      banner.style.transition = "opacity 0.3s ease";
+      banner.style.opacity = "0";
+      setTimeout(() => host.remove(), 300);
+    }
+  }, 8e3);
+}
+
+// src/index.ts
+function initUIContext(options = {}) {
+  const { shortcut = "alt+x" } = options;
+  initTransport(options.wsUrl);
+  let overlay = null;
+  let toolbar = null;
+  let isFrozen = false;
+  let frozenObservers = [];
+  const selection = createSelectionHandler({
+    onHover(el) {
+      if (!el) {
+        overlay?.highlight(null);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const source = extractSource(el);
+      const label = source ? `${source.component || el.tagName.toLowerCase()} \xB7 ${source.file}:${source.line}` : el.tagName.toLowerCase();
+      overlay?.highlight(rect, label);
+    },
+    async onSelect(context) {
+      showToast("Capturing context...");
+      const success = await sendContext(context);
+      if (success) {
+        showToast("Context captured!");
+      } else {
+        showToast("Failed to send context. Is the dev server running?");
+      }
+    },
+    onSelectionChange(count) {
+      toolbar?.updateBadge(count);
+    }
+  });
+  function activate() {
+    if (selection.isActive) return;
+    overlay = createOverlay();
+    toolbar = createToolbar({
+      onCapture() {
+        if (selection.selectedElement) {
+          const context = extractContext(selection.selectedElement);
+          sendContext(context);
+        }
+      },
+      async onCaptureAll() {
+        if (selection.multiSelectedCount === 0) {
+          showToast("No elements selected. Use Shift+Click to select multiple.");
+          return;
+        }
+        showToast(`Capturing ${selection.multiSelectedCount} elements...`);
+        const contexts = await selection.captureMultiSelection();
+        const success = await sendContext(contexts);
+        if (success) {
+          showToast(`${contexts.length} elements captured!`);
+          selection.clearMultiSelection();
+        } else {
+          showToast("Failed to send context. Is the dev server running?");
+        }
+      },
+      onClose() {
+        deactivate();
+      },
+      onFreeze() {
+        toggleFreeze();
+      }
+    });
+    selection.activate();
+    showToast("UI Context active \u2014 click to capture, Shift+click for multi-select");
+  }
+  function deactivate() {
+    if (isFrozen) unfreezeDOM();
+    selection.deactivate();
+    overlay?.destroy();
+    toolbar?.destroy();
+    overlay = null;
+    toolbar = null;
+  }
+  function toggleFreeze() {
+    if (isFrozen) {
+      unfreezeDOM();
+      showToast("DOM unfrozen");
+    } else {
+      freezeDOM();
+      showToast("DOM frozen \u2014 hover states preserved");
+    }
+    toolbar?.updateFreezeState(isFrozen);
+  }
+  function freezeDOM() {
+    isFrozen = true;
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (node instanceof HTMLElement && !node.id?.includes("ui-context")) {
+            node.remove();
+          }
+        }
+        if (mutation.type === "attributes" && mutation.target instanceof HTMLElement) {
+          if (!mutation.target.id?.includes("ui-context")) {
+            const old = mutation.oldValue;
+            if (old !== null) {
+              mutation.target.setAttribute(mutation.attributeName, old);
+            }
+          }
+        }
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeOldValue: true
+    });
+    frozenObservers.push(observer);
+  }
+  function unfreezeDOM() {
+    isFrozen = false;
+    for (const obs of frozenObservers) {
+      obs.disconnect();
+    }
+    frozenObservers = [];
+  }
+  document.addEventListener("keydown", (e) => {
+    const keys = shortcut.split("+");
+    const needsAlt = keys.includes("alt");
+    const needsCtrl = keys.includes("ctrl");
+    const needsShift = keys.includes("shift");
+    const mainKey = keys[keys.length - 1].toLowerCase();
+    if (e.altKey === needsAlt && e.ctrlKey === needsCtrl && e.shiftKey === needsShift && e.key.toLowerCase() === mainKey) {
+      e.preventDefault();
+      if (selection.isActive) {
+        deactivate();
+      } else {
+        activate();
+      }
+      return;
+    }
+    if (selection.isActive && e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "f") {
+      e.preventDefault();
+      toggleFreeze();
+    }
+  });
+  showOnboarding(shortcut);
+  return { activate, deactivate };
+}
+
+export {
+  initUIContext
+};
+//# sourceMappingURL=chunk-ISOPDZ5A.js.map