claw-design 1.0.1

package/out/renderer/assets/overlay-DZl3I3jq.js

@@ -0,0 +1,689 @@
+const scriptRel = /* @__PURE__ */ (function detectScriptRel() {
+  const relList = typeof document !== "undefined" && document.createElement("link").relList;
+  return relList && relList.supports && relList.supports("modulepreload") ? "modulepreload" : "preload";
+})();
+const assetsURL = function(dep, importerUrl) {
+  return new URL(dep, importerUrl).href;
+};
+const seen = {};
+const __vitePreload = function preload(baseModule, deps, importerUrl) {
+  let promise = Promise.resolve();
+  if (deps && deps.length > 0) {
+    let allSettled = function(promises$2) {
+      return Promise.all(promises$2.map((p) => Promise.resolve(p).then((value$1) => ({
+        status: "fulfilled",
+        value: value$1
+      }), (reason) => ({
+        status: "rejected",
+        reason
+      }))));
+    };
+    const links = document.getElementsByTagName("link");
+    const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
+    const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
+    promise = allSettled(deps.map((dep) => {
+      dep = assetsURL(dep, importerUrl);
+      if (dep in seen) return;
+      seen[dep] = true;
+      const isCss = dep.endsWith(".css");
+      const cssSelector = isCss ? '[rel="stylesheet"]' : "";
+      if (!!importerUrl) for (let i$1 = links.length - 1; i$1 >= 0; i$1--) {
+        const link$1 = links[i$1];
+        if (link$1.href === dep && (!isCss || link$1.rel === "stylesheet")) return;
+      }
+      else if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) return;
+      const link = document.createElement("link");
+      link.rel = isCss ? "stylesheet" : scriptRel;
+      if (!isCss) link.as = "script";
+      link.crossOrigin = "";
+      link.href = dep;
+      if (cspNonce) link.setAttribute("nonce", cspNonce);
+      document.head.appendChild(link);
+      if (isCss) return new Promise((res, rej) => {
+        link.addEventListener("load", res);
+        link.addEventListener("error", () => rej(/* @__PURE__ */ new Error(`Unable to preload CSS for ${dep}`)));
+      });
+    }));
+  }
+  function handlePreloadError(err$2) {
+    const e$1 = new Event("vite:preloadError", { cancelable: true });
+    e$1.payload = err$2;
+    window.dispatchEvent(e$1);
+    if (!e$1.defaultPrevented) throw err$2;
+  }
+  return promise.then((res) => {
+    for (const item of res || []) {
+      if (item.status !== "rejected") continue;
+      handlePreloadError(item.reason);
+    }
+    return baseModule().catch(handlePreloadError);
+  });
+};
+const INITIAL_STATE = {
+  mode: "inactive",
+  startX: 0,
+  startY: 0,
+  currentX: 0,
+  currentY: 0,
+  hoveredRect: null,
+  selectionBounds: null
+};
+const MIN_SELECTION_SIZE = 16;
+function transition(state, event) {
+  switch (event.type) {
+    case "ACTIVATE_RECT": {
+      if (state.mode === "inactive" || state.mode === "rect-committed" || state.mode === "elem-committed" || state.mode === "elem-idle" || state.mode === "elem-hovering") {
+        return { ...INITIAL_STATE, mode: "rect-idle" };
+      }
+      return state;
+    }
+    case "ACTIVATE_ELEM": {
+      if (state.mode === "inactive" || state.mode === "rect-committed" || state.mode === "elem-committed" || state.mode === "rect-idle" || state.mode === "rect-drawing") {
+        return { ...INITIAL_STATE, mode: "elem-idle" };
+      }
+      return state;
+    }
+    case "MOUSE_DOWN": {
+      if (state.mode === "rect-idle") {
+        return {
+          ...state,
+          mode: "rect-drawing",
+          startX: event.x,
+          startY: event.y,
+          currentX: event.x,
+          currentY: event.y
+        };
+      }
+      return state;
+    }
+    case "MOUSE_MOVE": {
+      if (state.mode === "rect-drawing") {
+        return {
+          ...state,
+          currentX: event.x,
+          currentY: event.y
+        };
+      }
+      return state;
+    }
+    case "MOUSE_UP": {
+      if (state.mode === "rect-drawing") {
+        const x = Math.min(state.startX, event.x);
+        const y = Math.min(state.startY, event.y);
+        const width = Math.abs(event.x - state.startX);
+        const height = Math.abs(event.y - state.startY);
+        if (width >= MIN_SELECTION_SIZE && height >= MIN_SELECTION_SIZE) {
+          return {
+            ...state,
+            mode: "rect-committed",
+            currentX: event.x,
+            currentY: event.y,
+            selectionBounds: { x, y, width, height }
+          };
+        }
+        return {
+          ...state,
+          mode: "rect-idle",
+          startX: 0,
+          startY: 0,
+          currentX: 0,
+          currentY: 0,
+          selectionBounds: null
+        };
+      }
+      return state;
+    }
+    case "ELEMENT_HOVER": {
+      if (state.mode === "elem-idle" || state.mode === "elem-hovering") {
+        return {
+          ...state,
+          mode: "elem-hovering",
+          hoveredRect: event.rect
+        };
+      }
+      return state;
+    }
+    case "ELEMENT_CLICK": {
+      if (state.mode === "elem-hovering" && state.hoveredRect) {
+        return {
+          ...state,
+          mode: "elem-committed",
+          selectionBounds: state.hoveredRect
+        };
+      }
+      return state;
+    }
+    case "CANCEL": {
+      if (state.mode !== "inactive") {
+        return { ...INITIAL_STATE };
+      }
+      return state;
+    }
+    default:
+      return state;
+  }
+}
+function isInBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+if (isInBrowser()) {
+  let dispatch = function(event) {
+    const prev = state;
+    state = transition(state, event);
+    if (state !== prev) {
+      render(state);
+      if (state.mode !== "inactive" && onModeChange) {
+        onModeChange();
+      }
+    }
+  }, render = function(s) {
+    const selectionRect = document.getElementById("claw-selection-rect");
+    const elementHighlight = document.getElementById("claw-element-highlight");
+    const selectBtn2 = document.getElementById("claw-select-btn");
+    const elemBtn2 = document.getElementById("claw-elem-btn");
+    if (s.mode === "rect-idle" || s.mode === "rect-drawing") {
+      document.body.style.cursor = "crosshair";
+    } else {
+      document.body.style.cursor = "default";
+    }
+    if (selectionRect) {
+      if (s.mode === "rect-drawing" || s.mode === "rect-committed") {
+        selectionRect.hidden = false;
+        if (s.mode === "rect-drawing") {
+          const x = Math.min(s.startX, s.currentX);
+          const y = Math.min(s.startY, s.currentY);
+          const w = Math.abs(s.currentX - s.startX);
+          const h = Math.abs(s.currentY - s.startY);
+          selectionRect.style.left = `${x}px`;
+          selectionRect.style.top = `${y}px`;
+          selectionRect.style.width = `${w}px`;
+          selectionRect.style.height = `${h}px`;
+          selectionRect.classList.add("claw-selection-rect--drawing");
+          selectionRect.classList.remove("claw-selection-rect--committed");
+        } else if (s.mode === "rect-committed" && s.selectionBounds) {
+          selectionRect.style.left = `${s.selectionBounds.x}px`;
+          selectionRect.style.top = `${s.selectionBounds.y}px`;
+          selectionRect.style.width = `${s.selectionBounds.width}px`;
+          selectionRect.style.height = `${s.selectionBounds.height}px`;
+          selectionRect.classList.remove("claw-selection-rect--drawing");
+          selectionRect.classList.add("claw-selection-rect--committed");
+        }
+      } else {
+        selectionRect.hidden = true;
+        selectionRect.classList.remove(
+          "claw-selection-rect--drawing",
+          "claw-selection-rect--committed"
+        );
+      }
+    }
+    if (elementHighlight) {
+      if (s.mode === "elem-hovering" && s.hoveredRect) {
+        elementHighlight.hidden = false;
+        elementHighlight.style.left = `${s.hoveredRect.x}px`;
+        elementHighlight.style.top = `${s.hoveredRect.y}px`;
+        elementHighlight.style.width = `${s.hoveredRect.width}px`;
+        elementHighlight.style.height = `${s.hoveredRect.height}px`;
+        elementHighlight.classList.add("claw-element-highlight--visible");
+        elementHighlight.classList.remove("claw-element-highlight--committed");
+      } else if (s.mode === "elem-committed" && s.selectionBounds) {
+        elementHighlight.hidden = false;
+        elementHighlight.style.left = `${s.selectionBounds.x}px`;
+        elementHighlight.style.top = `${s.selectionBounds.y}px`;
+        elementHighlight.style.width = `${s.selectionBounds.width}px`;
+        elementHighlight.style.height = `${s.selectionBounds.height}px`;
+        elementHighlight.classList.remove("claw-element-highlight--visible");
+        elementHighlight.classList.add("claw-element-highlight--committed");
+      } else {
+        elementHighlight.hidden = true;
+        elementHighlight.classList.remove(
+          "claw-element-highlight--visible",
+          "claw-element-highlight--committed"
+        );
+      }
+    }
+    if (selectBtn2) {
+      if (s.mode === "rect-idle" || s.mode === "rect-drawing" || s.mode === "rect-committed") {
+        selectBtn2.classList.add("claw-toolbar-btn--active");
+      } else {
+        selectBtn2.classList.remove("claw-toolbar-btn--active");
+      }
+    }
+    if (elemBtn2) {
+      if (s.mode === "elem-idle" || s.mode === "elem-hovering" || s.mode === "elem-committed") {
+        elemBtn2.classList.add("claw-toolbar-btn--active");
+      } else {
+        elemBtn2.classList.remove("claw-toolbar-btn--active");
+      }
+    }
+    if ((s.mode === "rect-committed" || s.mode === "elem-committed") && s.selectionBounds) {
+      document.dispatchEvent(
+        new CustomEvent("claw:selection-committed", {
+          detail: { bounds: s.selectionBounds }
+        })
+      );
+    }
+  }, captureToolbarLocalRect = function() {
+    return toolbar ? toolbar.getBoundingClientRect() : null;
+  }, activateOverlaySurface = function(localRect, viewBounds) {
+    if (toolbar && localRect && viewBounds) {
+      toolbar.style.position = "fixed";
+      toolbar.style.left = `${viewBounds.x + localRect.left}px`;
+      toolbar.style.top = `${viewBounds.y + localRect.top}px`;
+      toolbar.style.bottom = "auto";
+      toolbar.style.right = "auto";
+    }
+    document.body.classList.add("claw-overlay--active");
+  }, deactivateOverlaySurface = function() {
+    document.body.classList.remove("claw-overlay--active");
+    if (toolbar) {
+      toolbar.style.position = "";
+      toolbar.style.left = "";
+      toolbar.style.top = "";
+      toolbar.style.bottom = "";
+      toolbar.style.right = "";
+    }
+  }, positionInputBar = function(bounds) {
+    const inputBar = document.getElementById("claw-input-bar");
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const MIN_EDGE_MARGIN = 16;
+    const SPACE_THRESHOLD = 80;
+    const INPUT_GAP = 8;
+    const barWidth = Math.max(240, Math.min(480, bounds.width));
+    inputBar.style.width = `${barWidth}px`;
+    let left = bounds.x;
+    if (left + barWidth > viewportWidth - MIN_EDGE_MARGIN) {
+      left = viewportWidth - MIN_EDGE_MARGIN - barWidth;
+    }
+    if (left < MIN_EDGE_MARGIN) left = MIN_EDGE_MARGIN;
+    inputBar.style.left = `${left}px`;
+    const spaceBelow = viewportHeight - (bounds.y + bounds.height);
+    const spaceAbove = bounds.y;
+    if (spaceBelow >= SPACE_THRESHOLD) {
+      inputBar.style.top = `${bounds.y + bounds.height + INPUT_GAP}px`;
+      inputBar.style.bottom = "";
+    } else if (spaceAbove >= SPACE_THRESHOLD) {
+      inputBar.style.top = "";
+      inputBar.style.bottom = `${viewportHeight - bounds.y + INPUT_GAP}px`;
+    } else {
+      inputBar.style.top = `${bounds.y + bounds.height + INPUT_GAP}px`;
+      inputBar.style.bottom = "";
+    }
+  }, showInputBar = function(bounds) {
+    const inputBar = document.getElementById("claw-input-bar");
+    const textarea2 = document.getElementById("claw-input-textarea");
+    inputBar.hidden = false;
+    positionInputBar(bounds);
+    requestAnimationFrame(() => {
+      inputBar.classList.add("claw-input-bar--visible");
+    });
+    textarea2.value = "";
+    textarea2.style.height = "auto";
+    textarea2.focus();
+  }, hideInputBar = function() {
+    const inputBar = document.getElementById("claw-input-bar");
+    inputBar.classList.remove("claw-input-bar--visible");
+    pastedImages.length = 0;
+    setTimeout(() => {
+      inputBar.hidden = true;
+    }, 100);
+  }, toggleViewportGroup = function() {
+    if (!viewportGroup) return;
+    viewportGroupOpen = !viewportGroupOpen;
+    if (viewportGroupOpen) {
+      viewportGroup.classList.add("claw-viewport-group--open");
+      viewportToggleBtn?.classList.add("claw-toolbar-btn--toggle-open");
+    } else {
+      viewportGroup.classList.remove("claw-viewport-group--open");
+      viewportToggleBtn?.classList.remove("claw-toolbar-btn--toggle-open");
+    }
+  }, updateViewportActiveState = function(preset) {
+    for (const [key, btn] of Object.entries(viewportButtons)) {
+      if (!btn) continue;
+      if (key === preset) {
+        btn.classList.add("claw-toolbar-btn--active");
+      } else {
+        btn.classList.remove("claw-toolbar-btn--active");
+      }
+    }
+    activeViewport = preset;
+  }, showTooltipForBtn = function(btn) {
+    if (!tooltipEl) return;
+    const text = btn.getAttribute("data-tooltip");
+    if (!text) return;
+    if (state.mode !== "inactive") return;
+    tooltipEl.textContent = text;
+    tooltipEl.hidden = false;
+    tooltipActiveBtn = btn;
+    const btnRect = btn.getBoundingClientRect();
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    const left = btnRect.left - tooltipRect.width - 8;
+    const top = btnRect.top + (btnRect.height - tooltipRect.height) / 2;
+    tooltipEl.style.left = `${Math.max(4, left)}px`;
+    tooltipEl.style.top = `${Math.max(4, top)}px`;
+    btn.setAttribute("aria-describedby", "claw-tooltip");
+  }, hideTooltip = function() {
+    if (!tooltipEl) return;
+    tooltipEl.hidden = true;
+    if (tooltipTimer) {
+      clearTimeout(tooltipTimer);
+      tooltipTimer = null;
+    }
+    if (tooltipActiveBtn) {
+      tooltipActiveBtn.removeAttribute("aria-describedby");
+      tooltipActiveBtn = null;
+    }
+  };
+  let state = { ...INITIAL_STATE };
+  let elemHoverRafPending = false;
+  let onModeChange = null;
+  const toolbar = document.getElementById("claw-toolbar");
+  const selectBtn = document.getElementById("claw-select-btn");
+  if (selectBtn) {
+    selectBtn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      if (state.mode === "inactive" || state.mode === "elem-idle" || state.mode === "elem-hovering" || state.mode === "elem-committed") {
+        hideInputBar();
+        const localRect = captureToolbarLocalRect();
+        const viewBounds = await window.claw?.activateSelection();
+        activateOverlaySurface(localRect, viewBounds);
+        dispatch({ type: "ACTIVATE_RECT" });
+      } else if (state.mode === "rect-idle" || state.mode === "rect-drawing" || state.mode === "rect-committed") {
+        hideInputBar();
+        dispatch({ type: "CANCEL" });
+        await window.claw?.deactivateSelection();
+        deactivateOverlaySurface();
+      }
+    });
+  }
+  const elemBtn = document.getElementById("claw-elem-btn");
+  if (elemBtn) {
+    elemBtn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      if (state.mode === "inactive" || state.mode === "rect-idle" || state.mode === "rect-drawing" || state.mode === "rect-committed") {
+        hideInputBar();
+        const localRect = captureToolbarLocalRect();
+        const viewBounds = await window.claw?.activateSelection();
+        activateOverlaySurface(localRect, viewBounds);
+        dispatch({ type: "ACTIVATE_ELEM" });
+      } else if (state.mode === "elem-idle" || state.mode === "elem-hovering" || state.mode === "elem-committed") {
+        hideInputBar();
+        dispatch({ type: "CANCEL" });
+        await window.claw?.deactivateSelection();
+        deactivateOverlaySurface();
+      }
+    });
+  }
+  document.addEventListener("mousedown", (e) => {
+    if (state.mode === "rect-idle") {
+      dispatch({ type: "MOUSE_DOWN", x: e.clientX, y: e.clientY });
+    }
+  });
+  document.addEventListener("mousemove", (e) => {
+    if (state.mode === "rect-drawing") {
+      dispatch({ type: "MOUSE_MOVE", x: e.clientX, y: e.clientY });
+    } else if ((state.mode === "elem-idle" || state.mode === "elem-hovering") && !elemHoverRafPending) {
+      elemHoverRafPending = true;
+      const x = e.clientX;
+      const y = e.clientY;
+      requestAnimationFrame(async () => {
+        elemHoverRafPending = false;
+        try {
+          const rect = await window.claw.getElementAtPoint(x, y);
+          if (rect) {
+            dispatch({ type: "ELEMENT_HOVER", rect });
+          }
+        } catch {
+        }
+      });
+    }
+  });
+  document.addEventListener("mouseup", (e) => {
+    if (state.mode === "rect-drawing") {
+      dispatch({ type: "MOUSE_UP", x: e.clientX, y: e.clientY });
+    }
+  });
+  document.addEventListener("click", (e) => {
+    if (state.mode === "elem-hovering") {
+      e.stopPropagation();
+      dispatch({ type: "ELEMENT_CLICK" });
+    }
+  });
+  document.addEventListener("keydown", async (e) => {
+    if (e.key === "Escape" && state.mode !== "inactive") {
+      hideInputBar();
+      dispatch({ type: "CANCEL" });
+      await window.claw?.deactivateSelection();
+      deactivateOverlaySurface();
+    }
+  });
+  const pastedImages = [];
+  const modelSelect = document.getElementById("claw-model-select");
+  const savedModel = localStorage.getItem("claw-model");
+  if (savedModel && modelSelect.querySelector(`option[value="${savedModel}"]`)) {
+    modelSelect.value = savedModel;
+  }
+  modelSelect.addEventListener("change", () => {
+    localStorage.setItem("claw-model", modelSelect.value);
+  });
+  const textarea = document.getElementById("claw-input-textarea");
+  const submitBtn = document.getElementById("claw-input-submit");
+  textarea.addEventListener("input", () => {
+    textarea.style.height = "auto";
+    const newHeight = Math.min(textarea.scrollHeight, 160);
+    textarea.style.height = `${newHeight}px`;
+    if (textarea.value.trim() || pastedImages.length > 0) {
+      submitBtn.classList.add("claw-input-bar__submit--enabled");
+      submitBtn.removeAttribute("disabled");
+    } else {
+      submitBtn.classList.remove("claw-input-bar__submit--enabled");
+      submitBtn.setAttribute("disabled", "");
+    }
+  });
+  textarea.addEventListener("paste", (e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        e.preventDefault();
+        const blob = item.getAsFile();
+        if (!blob) continue;
+        const reader = new FileReader();
+        reader.onload = () => {
+          const dataUrl = reader.result;
+          const arrayBuf = Uint8Array.from(atob(dataUrl.split(",")[1]), (c) => c.charCodeAt(0)).buffer;
+          pastedImages.push({ dataUrl, buffer: arrayBuf });
+          const imageNum = pastedImages.length;
+          const pos = textarea.selectionStart;
+          const before = textarea.value.slice(0, pos);
+          const after = textarea.value.slice(pos);
+          const tag = `[Image #${imageNum}]`;
+          textarea.value = before + tag + after;
+          textarea.selectionStart = textarea.selectionEnd = pos + tag.length;
+          textarea.style.height = "auto";
+          textarea.style.height = `${Math.min(textarea.scrollHeight, 160)}px`;
+          submitBtn.classList.add("claw-input-bar__submit--enabled");
+          submitBtn.removeAttribute("disabled");
+          textarea.focus();
+        };
+        reader.readAsDataURL(blob);
+      }
+    }
+  });
+  textarea.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  });
+  async function handleSubmit() {
+    const instruction = textarea.value.trim();
+    if (!instruction && pastedImages.length === 0 || !state.selectionBounds) return;
+    const bounds = state.selectionBounds;
+    const [screenshot, dom] = await Promise.all([
+      window.claw.captureScreenshot(bounds),
+      window.claw.extractDom(bounds)
+    ]);
+    const referenceImages = [];
+    for (let i = 0; i < pastedImages.length; i++) {
+      if (instruction.includes(`[Image #${i + 1}]`)) {
+        referenceImages.push(Buffer.from(new Uint8Array(pastedImages[i].buffer)));
+      }
+    }
+    if (pastedImages.length > 0 && referenceImages.length === 0 && !/\[Image #\d+\]/.test(instruction)) {
+      for (const img of pastedImages) {
+        referenceImages.push(Buffer.from(new Uint8Array(img.buffer)));
+      }
+    }
+    await window.claw.submitInstruction({
+      instruction: instruction || "Make the changes shown in the reference image(s)",
+      screenshot,
+      dom,
+      bounds,
+      referenceImages: referenceImages.length > 0 ? referenceImages : void 0,
+      model: modelSelect.value
+    });
+    pastedImages.length = 0;
+    hideInputBar();
+    dispatch({ type: "CANCEL" });
+    await window.claw.deactivateSelection();
+    deactivateOverlaySurface();
+  }
+  submitBtn.addEventListener("click", handleSubmit);
+  document.addEventListener("claw:selection-committed", ((e) => {
+    showInputBar(e.detail.bounds);
+  }));
+  __vitePreload(async () => {
+    const { showToast, dismissToast } = await import("./toast-CLlgwMU_.js");
+    return { showToast, dismissToast };
+  }, true ? [] : void 0, import.meta.url).then(({ showToast, dismissToast }) => {
+    if (window.claw?.onToastShow) {
+      window.claw.onToastShow((data) => showToast(document, data));
+    }
+    if (window.claw?.onToastDismiss) {
+      window.claw.onToastDismiss((data) => dismissToast(document, data.id));
+    }
+  });
+  if (window.claw?.onModeChange) {
+    window.claw.onModeChange((mode) => {
+      console.debug("[claw-overlay] mode:", mode);
+    });
+  }
+  if (window.claw?.onPrefillInstruction) {
+    window.claw.onPrefillInstruction(async (data) => {
+      const ta = document.getElementById("claw-input-textarea");
+      if (ta) {
+        ta.value = data.instruction;
+        ta.dispatchEvent(new Event("input"));
+      }
+      const localRect = captureToolbarLocalRect();
+      const viewBounds = await window.claw?.activateSelection();
+      activateOverlaySurface(localRect, viewBounds);
+      dispatch({ type: "ACTIVATE_RECT" });
+      const inputBar = document.getElementById("claw-input-bar");
+      inputBar.hidden = false;
+      inputBar.style.left = "50%";
+      inputBar.style.transform = "translateX(-50%)";
+      inputBar.style.top = `${Math.round(window.innerHeight * 0.6)}px`;
+      inputBar.style.bottom = "";
+      requestAnimationFrame(() => {
+        inputBar.classList.add("claw-input-bar--visible");
+      });
+      if (ta) {
+        ta.focus();
+      }
+    });
+  }
+  const toolbarHandle = document.querySelector(".claw-toolbar-handle");
+  if (toolbarHandle) {
+    let isDragging = false;
+    let lastScreenX = 0;
+    let lastScreenY = 0;
+    toolbarHandle.addEventListener("mousedown", (e) => {
+      isDragging = true;
+      lastScreenX = e.screenX;
+      lastScreenY = e.screenY;
+      toolbarHandle.style.cursor = "grabbing";
+      e.preventDefault();
+    });
+    document.addEventListener("mousemove", (e) => {
+      if (!isDragging) return;
+      const dx = e.screenX - lastScreenX;
+      const dy = e.screenY - lastScreenY;
+      lastScreenX = e.screenX;
+      lastScreenY = e.screenY;
+      if (dx !== 0 || dy !== 0) {
+        window.claw.dragToolbar(dx, dy);
+      }
+    });
+    document.addEventListener("mouseup", () => {
+      if (!isDragging) return;
+      isDragging = false;
+      toolbarHandle.style.cursor = "";
+      window.claw.dragToolbar(0, 0).then((pos) => {
+        localStorage.setItem("claw-toolbar-pos", JSON.stringify(pos));
+      });
+    });
+    const savedToolbarPos = localStorage.getItem("claw-toolbar-pos");
+    if (savedToolbarPos) {
+      try {
+        const { x, y } = JSON.parse(savedToolbarPos);
+        if (typeof x === "number" && typeof y === "number") {
+          window.claw.setToolbarPosition(x, y);
+        }
+      } catch {
+      }
+    }
+  }
+  let activeViewport = "desktop";
+  let viewportGroupOpen = false;
+  const viewportToggleBtn = document.getElementById("claw-viewport-toggle-btn");
+  const viewportGroup = document.getElementById("claw-viewport-group");
+  const viewportButtons = {
+    desktop: document.getElementById("claw-viewport-desktop-btn"),
+    tablet: document.getElementById("claw-viewport-tablet-btn"),
+    mobile: document.getElementById("claw-viewport-mobile-btn")
+  };
+  if (viewportToggleBtn) {
+    viewportToggleBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleViewportGroup();
+    });
+  }
+  for (const [preset, btn] of Object.entries(viewportButtons)) {
+    if (!btn) continue;
+    btn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      if (activeViewport === preset) return;
+      updateViewportActiveState(preset);
+      await window.claw.setViewport(preset);
+      if (viewportGroupOpen) toggleViewportGroup();
+    });
+  }
+  if (window.claw?.onViewportChanged) {
+    window.claw.onViewportChanged((data) => {
+      updateViewportActiveState(data.preset);
+    });
+  }
+  const tooltipEl = document.getElementById("claw-tooltip");
+  let tooltipTimer = null;
+  let tooltipActiveBtn = null;
+  const tooltipButtons = document.querySelectorAll("[data-tooltip]");
+  for (const btn of tooltipButtons) {
+    btn.addEventListener("mouseenter", () => {
+      tooltipTimer = setTimeout(() => {
+        showTooltipForBtn(btn);
+      }, 400);
+    });
+    btn.addEventListener("mouseleave", () => {
+      hideTooltip();
+    });
+  }
+  onModeChange = hideTooltip;
+  if (window.claw?.onSiteLoaded) {
+    window.claw.onSiteLoaded(() => {
+      const loadingEl = document.getElementById("claw-loading");
+      if (loadingEl) loadingEl.classList.add("claw-loading--hidden");
+    });
+  }
+}