@nimrobo/wand-web 0.1.0

package/dist/client.js

@@ -0,0 +1,1559 @@
+"use strict";
+(() => {
+  // node_modules/html-to-image/es/util.js
+  function resolveUrl(url, baseUrl) {
+    if (url.match(/^[a-z]+:\/\//i)) {
+      return url;
+    }
+    if (url.match(/^\/\//)) {
+      return window.location.protocol + url;
+    }
+    if (url.match(/^[a-z]+:/i)) {
+      return url;
+    }
+    const doc = document.implementation.createHTMLDocument();
+    const base = doc.createElement("base");
+    const a = doc.createElement("a");
+    doc.head.appendChild(base);
+    doc.body.appendChild(a);
+    if (baseUrl) {
+      base.href = baseUrl;
+    }
+    a.href = url;
+    return a.href;
+  }
+  var uuid = /* @__PURE__ */ (() => {
+    let counter = 0;
+    const random = () => (
+      // eslint-disable-next-line no-bitwise
+      `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
+    );
+    return () => {
+      counter += 1;
+      return `u${random()}${counter}`;
+    };
+  })();
+  function toArray(arrayLike) {
+    const arr = [];
+    for (let i = 0, l = arrayLike.length; i < l; i++) {
+      arr.push(arrayLike[i]);
+    }
+    return arr;
+  }
+  var styleProps = null;
+  function getStyleProperties(options = {}) {
+    if (styleProps) {
+      return styleProps;
+    }
+    if (options.includeStyleProperties) {
+      styleProps = options.includeStyleProperties;
+      return styleProps;
+    }
+    styleProps = toArray(window.getComputedStyle(document.documentElement));
+    return styleProps;
+  }
+  function px(node, styleProperty) {
+    const win = node.ownerDocument.defaultView || window;
+    const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
+    return val ? parseFloat(val.replace("px", "")) : 0;
+  }
+  function getNodeWidth(node) {
+    const leftBorder = px(node, "border-left-width");
+    const rightBorder = px(node, "border-right-width");
+    return node.clientWidth + leftBorder + rightBorder;
+  }
+  function getNodeHeight(node) {
+    const topBorder = px(node, "border-top-width");
+    const bottomBorder = px(node, "border-bottom-width");
+    return node.clientHeight + topBorder + bottomBorder;
+  }
+  function getImageSize(targetNode, options = {}) {
+    const width = options.width || getNodeWidth(targetNode);
+    const height = options.height || getNodeHeight(targetNode);
+    return { width, height };
+  }
+  function getPixelRatio() {
+    let ratio;
+    let FINAL_PROCESS;
+    try {
+      FINAL_PROCESS = process;
+    } catch (e) {
+    }
+    const val = FINAL_PROCESS && FINAL_PROCESS.env ? FINAL_PROCESS.env.devicePixelRatio : null;
+    if (val) {
+      ratio = parseInt(val, 10);
+      if (Number.isNaN(ratio)) {
+        ratio = 1;
+      }
+    }
+    return ratio || window.devicePixelRatio || 1;
+  }
+  var canvasDimensionLimit = 16384;
+  function checkCanvasDimensions(canvas) {
+    if (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) {
+      if (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit) {
+        if (canvas.width > canvas.height) {
+          canvas.height *= canvasDimensionLimit / canvas.width;
+          canvas.width = canvasDimensionLimit;
+        } else {
+          canvas.width *= canvasDimensionLimit / canvas.height;
+          canvas.height = canvasDimensionLimit;
+        }
+      } else if (canvas.width > canvasDimensionLimit) {
+        canvas.height *= canvasDimensionLimit / canvas.width;
+        canvas.width = canvasDimensionLimit;
+      } else {
+        canvas.width *= canvasDimensionLimit / canvas.height;
+        canvas.height = canvasDimensionLimit;
+      }
+    }
+  }
+  function createImage(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        img.decode().then(() => {
+          requestAnimationFrame(() => resolve(img));
+        });
+      };
+      img.onerror = reject;
+      img.crossOrigin = "anonymous";
+      img.decoding = "async";
+      img.src = url;
+    });
+  }
+  async function svgToDataURL(svg) {
+    return Promise.resolve().then(() => new XMLSerializer().serializeToString(svg)).then(encodeURIComponent).then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
+  }
+  async function nodeToDataURL(node, width, height) {
+    const xmlns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(xmlns, "svg");
+    const foreignObject = document.createElementNS(xmlns, "foreignObject");
+    svg.setAttribute("width", `${width}`);
+    svg.setAttribute("height", `${height}`);
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    foreignObject.setAttribute("width", "100%");
+    foreignObject.setAttribute("height", "100%");
+    foreignObject.setAttribute("x", "0");
+    foreignObject.setAttribute("y", "0");
+    foreignObject.setAttribute("externalResourcesRequired", "true");
+    svg.appendChild(foreignObject);
+    foreignObject.appendChild(node);
+    return svgToDataURL(svg);
+  }
+  var isInstanceOfElement = (node, instance) => {
+    if (node instanceof instance)
+      return true;
+    const nodePrototype = Object.getPrototypeOf(node);
+    if (nodePrototype === null)
+      return false;
+    return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
+  };
+
+  // node_modules/html-to-image/es/clone-pseudos.js
+  function formatCSSText(style) {
+    const content = style.getPropertyValue("content");
+    return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
+  }
+  function formatCSSProperties(style, options) {
+    return getStyleProperties(options).map((name) => {
+      const value = style.getPropertyValue(name);
+      const priority = style.getPropertyPriority(name);
+      return `${name}: ${value}${priority ? " !important" : ""};`;
+    }).join(" ");
+  }
+  function getPseudoElementStyle(className, pseudo, style, options) {
+    const selector = `.${className}:${pseudo}`;
+    const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
+    return document.createTextNode(`${selector}{${cssText}}`);
+  }
+  function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
+    const style = window.getComputedStyle(nativeNode, pseudo);
+    const content = style.getPropertyValue("content");
+    if (content === "" || content === "none") {
+      return;
+    }
+    const className = uuid();
+    try {
+      clonedNode.className = `${clonedNode.className} ${className}`;
+    } catch (err) {
+      return;
+    }
+    const styleElement = document.createElement("style");
+    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
+    clonedNode.appendChild(styleElement);
+  }
+  function clonePseudoElements(nativeNode, clonedNode, options) {
+    clonePseudoElement(nativeNode, clonedNode, ":before", options);
+    clonePseudoElement(nativeNode, clonedNode, ":after", options);
+  }
+
+  // node_modules/html-to-image/es/mimes.js
+  var WOFF = "application/font-woff";
+  var JPEG = "image/jpeg";
+  var mimes = {
+    woff: WOFF,
+    woff2: WOFF,
+    ttf: "application/font-truetype",
+    eot: "application/vnd.ms-fontobject",
+    png: "image/png",
+    jpg: JPEG,
+    jpeg: JPEG,
+    gif: "image/gif",
+    tiff: "image/tiff",
+    svg: "image/svg+xml",
+    webp: "image/webp"
+  };
+  function getExtension(url) {
+    const match = /\.([^./]*?)$/g.exec(url);
+    return match ? match[1] : "";
+  }
+  function getMimeType(url) {
+    const extension = getExtension(url).toLowerCase();
+    return mimes[extension] || "";
+  }
+
+  // node_modules/html-to-image/es/dataurl.js
+  function getContentFromDataUrl(dataURL) {
+    return dataURL.split(/,/)[1];
+  }
+  function isDataUrl(url) {
+    return url.search(/^(data:)/) !== -1;
+  }
+  function makeDataUrl(content, mimeType) {
+    return `data:${mimeType};base64,${content}`;
+  }
+  async function fetchAsDataURL(url, init, process2) {
+    const res = await fetch(url, init);
+    if (res.status === 404) {
+      throw new Error(`Resource "${res.url}" not found`);
+    }
+    const blob = await res.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = reject;
+      reader.onloadend = () => {
+        try {
+          resolve(process2({ res, result: reader.result }));
+        } catch (error) {
+          reject(error);
+        }
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+  var cache = {};
+  function getCacheKey(url, contentType, includeQueryParams) {
+    let key = url.replace(/\?.*/, "");
+    if (includeQueryParams) {
+      key = url;
+    }
+    if (/ttf|otf|eot|woff2?/i.test(key)) {
+      key = key.replace(/.*\//, "");
+    }
+    return contentType ? `[${contentType}]${key}` : key;
+  }
+  async function resourceToDataURL(resourceUrl, contentType, options) {
+    const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
+    if (cache[cacheKey] != null) {
+      return cache[cacheKey];
+    }
+    if (options.cacheBust) {
+      resourceUrl += (/\?/.test(resourceUrl) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
+    }
+    let dataURL;
+    try {
+      const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
+        if (!contentType) {
+          contentType = res.headers.get("Content-Type") || "";
+        }
+        return getContentFromDataUrl(result);
+      });
+      dataURL = makeDataUrl(content, contentType);
+    } catch (error) {
+      dataURL = options.imagePlaceholder || "";
+      let msg = `Failed to fetch resource: ${resourceUrl}`;
+      if (error) {
+        msg = typeof error === "string" ? error : error.message;
+      }
+      if (msg) {
+        console.warn(msg);
+      }
+    }
+    cache[cacheKey] = dataURL;
+    return dataURL;
+  }
+
+  // node_modules/html-to-image/es/clone-node.js
+  async function cloneCanvasElement(canvas) {
+    const dataURL = canvas.toDataURL();
+    if (dataURL === "data:,") {
+      return canvas.cloneNode(false);
+    }
+    return createImage(dataURL);
+  }
+  async function cloneVideoElement(video, options) {
+    if (video.currentSrc) {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = video.clientWidth;
+      canvas.height = video.clientHeight;
+      ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataURL2 = canvas.toDataURL();
+      return createImage(dataURL2);
+    }
+    const poster = video.poster;
+    const contentType = getMimeType(poster);
+    const dataURL = await resourceToDataURL(poster, contentType, options);
+    return createImage(dataURL);
+  }
+  async function cloneIFrameElement(iframe, options) {
+    var _a;
+    try {
+      if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
+        return await cloneNode(iframe.contentDocument.body, options, true);
+      }
+    } catch (_b) {
+    }
+    return iframe.cloneNode(false);
+  }
+  async function cloneSingleNode(node, options) {
+    if (isInstanceOfElement(node, HTMLCanvasElement)) {
+      return cloneCanvasElement(node);
+    }
+    if (isInstanceOfElement(node, HTMLVideoElement)) {
+      return cloneVideoElement(node, options);
+    }
+    if (isInstanceOfElement(node, HTMLIFrameElement)) {
+      return cloneIFrameElement(node, options);
+    }
+    return node.cloneNode(isSVGElement(node));
+  }
+  var isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
+  var isSVGElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SVG";
+  async function cloneChildren(nativeNode, clonedNode, options) {
+    var _a, _b;
+    if (isSVGElement(clonedNode)) {
+      return clonedNode;
+    }
+    let children = [];
+    if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
+      children = toArray(nativeNode.assignedNodes());
+    } else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
+      children = toArray(nativeNode.contentDocument.body.childNodes);
+    } else {
+      children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
+    }
+    if (children.length === 0 || isInstanceOfElement(nativeNode, HTMLVideoElement)) {
+      return clonedNode;
+    }
+    await children.reduce((deferred, child) => deferred.then(() => cloneNode(child, options)).then((clonedChild) => {
+      if (clonedChild) {
+        clonedNode.appendChild(clonedChild);
+      }
+    }), Promise.resolve());
+    return clonedNode;
+  }
+  function cloneCSSStyle(nativeNode, clonedNode, options) {
+    const targetStyle = clonedNode.style;
+    if (!targetStyle) {
+      return;
+    }
+    const sourceStyle = window.getComputedStyle(nativeNode);
+    if (sourceStyle.cssText) {
+      targetStyle.cssText = sourceStyle.cssText;
+      targetStyle.transformOrigin = sourceStyle.transformOrigin;
+    } else {
+      getStyleProperties(options).forEach((name) => {
+        let value = sourceStyle.getPropertyValue(name);
+        if (name === "font-size" && value.endsWith("px")) {
+          const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
+          value = `${reducedFont}px`;
+        }
+        if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value === "inline") {
+          value = "block";
+        }
+        if (name === "d" && clonedNode.getAttribute("d")) {
+          value = `path(${clonedNode.getAttribute("d")})`;
+        }
+        targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+      });
+    }
+  }
+  function cloneInputValue(nativeNode, clonedNode) {
+    if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
+      clonedNode.innerHTML = nativeNode.value;
+    }
+    if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
+      clonedNode.setAttribute("value", nativeNode.value);
+    }
+  }
+  function cloneSelectValue(nativeNode, clonedNode) {
+    if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
+      const clonedSelect = clonedNode;
+      const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
+      if (selectedOption) {
+        selectedOption.setAttribute("selected", "");
+      }
+    }
+  }
+  function decorate(nativeNode, clonedNode, options) {
+    if (isInstanceOfElement(clonedNode, Element)) {
+      cloneCSSStyle(nativeNode, clonedNode, options);
+      clonePseudoElements(nativeNode, clonedNode, options);
+      cloneInputValue(nativeNode, clonedNode);
+      cloneSelectValue(nativeNode, clonedNode);
+    }
+    return clonedNode;
+  }
+  async function ensureSVGSymbols(clone, options) {
+    const uses = clone.querySelectorAll ? clone.querySelectorAll("use") : [];
+    if (uses.length === 0) {
+      return clone;
+    }
+    const processedDefs = {};
+    for (let i = 0; i < uses.length; i++) {
+      const use = uses[i];
+      const id = use.getAttribute("xlink:href");
+      if (id) {
+        const exist = clone.querySelector(id);
+        const definition = document.querySelector(id);
+        if (!exist && definition && !processedDefs[id]) {
+          processedDefs[id] = await cloneNode(definition, options, true);
+        }
+      }
+    }
+    const nodes = Object.values(processedDefs);
+    if (nodes.length) {
+      const ns = "http://www.w3.org/1999/xhtml";
+      const svg = document.createElementNS(ns, "svg");
+      svg.setAttribute("xmlns", ns);
+      svg.style.position = "absolute";
+      svg.style.width = "0";
+      svg.style.height = "0";
+      svg.style.overflow = "hidden";
+      svg.style.display = "none";
+      const defs = document.createElementNS(ns, "defs");
+      svg.appendChild(defs);
+      for (let i = 0; i < nodes.length; i++) {
+        defs.appendChild(nodes[i]);
+      }
+      clone.appendChild(svg);
+    }
+    return clone;
+  }
+  async function cloneNode(node, options, isRoot) {
+    if (!isRoot && options.filter && !options.filter(node)) {
+      return null;
+    }
+    return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode, options)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+  }
+
+  // node_modules/html-to-image/es/embed-resources.js
+  var URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
+  var URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
+  var FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+  function toRegex(url) {
+    const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+    return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
+  }
+  function parseURLs(cssText) {
+    const urls = [];
+    cssText.replace(URL_REGEX, (raw, quotation, url) => {
+      urls.push(url);
+      return raw;
+    });
+    return urls.filter((url) => !isDataUrl(url));
+  }
+  async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
+    try {
+      const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
+      const contentType = getMimeType(resourceURL);
+      let dataURL;
+      if (getContentFromUrl) {
+        const content = await getContentFromUrl(resolvedURL);
+        dataURL = makeDataUrl(content, contentType);
+      } else {
+        dataURL = await resourceToDataURL(resolvedURL, contentType, options);
+      }
+      return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
+    } catch (error) {
+    }
+    return cssText;
+  }
+  function filterPreferredFontFormat(str, { preferredFontFormat }) {
+    return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, (match) => {
+      while (true) {
+        const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
+        if (!format) {
+          return "";
+        }
+        if (format === preferredFontFormat) {
+          return `src: ${src};`;
+        }
+      }
+    });
+  }
+  function shouldEmbed(url) {
+    return url.search(URL_REGEX) !== -1;
+  }
+  async function embedResources(cssText, baseUrl, options) {
+    if (!shouldEmbed(cssText)) {
+      return cssText;
+    }
+    const filteredCSSText = filterPreferredFontFormat(cssText, options);
+    const urls = parseURLs(filteredCSSText);
+    return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
+  }
+
+  // node_modules/html-to-image/es/embed-images.js
+  async function embedProp(propName, node, options) {
+    var _a;
+    const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
+    if (propValue) {
+      const cssString = await embedResources(propValue, null, options);
+      node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
+      return true;
+    }
+    return false;
+  }
+  async function embedBackground(clonedNode, options) {
+    ;
+    await embedProp("background", clonedNode, options) || await embedProp("background-image", clonedNode, options);
+    await embedProp("mask", clonedNode, options) || await embedProp("-webkit-mask", clonedNode, options) || await embedProp("mask-image", clonedNode, options) || await embedProp("-webkit-mask-image", clonedNode, options);
+  }
+  async function embedImageNode(clonedNode, options) {
+    const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
+    if (!(isImageElement && !isDataUrl(clonedNode.src)) && !(isInstanceOfElement(clonedNode, SVGImageElement) && !isDataUrl(clonedNode.href.baseVal))) {
+      return;
+    }
+    const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
+    const dataURL = await resourceToDataURL(url, getMimeType(url), options);
+    await new Promise((resolve, reject) => {
+      clonedNode.onload = resolve;
+      clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+        try {
+          resolve(options.onImageErrorHandler(...attributes));
+        } catch (error) {
+          reject(error);
+        }
+      } : reject;
+      const image = clonedNode;
+      if (image.decode) {
+        image.decode = resolve;
+      }
+      if (image.loading === "lazy") {
+        image.loading = "eager";
+      }
+      if (isImageElement) {
+        clonedNode.srcset = "";
+        clonedNode.src = dataURL;
+      } else {
+        clonedNode.href.baseVal = dataURL;
+      }
+    });
+  }
+  async function embedChildren(clonedNode, options) {
+    const children = toArray(clonedNode.childNodes);
+    const deferreds = children.map((child) => embedImages(child, options));
+    await Promise.all(deferreds).then(() => clonedNode);
+  }
+  async function embedImages(clonedNode, options) {
+    if (isInstanceOfElement(clonedNode, Element)) {
+      await embedBackground(clonedNode, options);
+      await embedImageNode(clonedNode, options);
+      await embedChildren(clonedNode, options);
+    }
+  }
+
+  // node_modules/html-to-image/es/apply-style.js
+  function applyStyle(node, options) {
+    const { style } = node;
+    if (options.backgroundColor) {
+      style.backgroundColor = options.backgroundColor;
+    }
+    if (options.width) {
+      style.width = `${options.width}px`;
+    }
+    if (options.height) {
+      style.height = `${options.height}px`;
+    }
+    const manual = options.style;
+    if (manual != null) {
+      Object.keys(manual).forEach((key) => {
+        style[key] = manual[key];
+      });
+    }
+    return node;
+  }
+
+  // node_modules/html-to-image/es/embed-webfonts.js
+  var cssFetchCache = {};
+  async function fetchCSS(url) {
+    let cache2 = cssFetchCache[url];
+    if (cache2 != null) {
+      return cache2;
+    }
+    const res = await fetch(url);
+    const cssText = await res.text();
+    cache2 = { url, cssText };
+    cssFetchCache[url] = cache2;
+    return cache2;
+  }
+  async function embedFonts(data, options) {
+    let cssText = data.cssText;
+    const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
+    const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
+    const loadFonts = fontLocs.map(async (loc) => {
+      let url = loc.replace(regexUrl, "$1");
+      if (!url.startsWith("https://")) {
+        url = new URL(url, data.url).href;
+      }
+      return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
+        cssText = cssText.replace(loc, `url(${result})`);
+        return [loc, result];
+      });
+    });
+    return Promise.all(loadFonts).then(() => cssText);
+  }
+  function parseCSS(source) {
+    if (source == null) {
+      return [];
+    }
+    const result = [];
+    const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
+    let cssText = source.replace(commentsRegex, "");
+    const keyframesRegex = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
+    while (true) {
+      const matches = keyframesRegex.exec(cssText);
+      if (matches === null) {
+        break;
+      }
+      result.push(matches[0]);
+    }
+    cssText = cssText.replace(keyframesRegex, "");
+    const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
+    const combinedCSSRegex = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})";
+    const unifiedRegex = new RegExp(combinedCSSRegex, "gi");
+    while (true) {
+      let matches = importRegex.exec(cssText);
+      if (matches === null) {
+        matches = unifiedRegex.exec(cssText);
+        if (matches === null) {
+          break;
+        } else {
+          importRegex.lastIndex = unifiedRegex.lastIndex;
+        }
+      } else {
+        unifiedRegex.lastIndex = importRegex.lastIndex;
+      }
+      result.push(matches[0]);
+    }
+    return result;
+  }
+  async function getCSSRules(styleSheets, options) {
+    const ret = [];
+    const deferreds = [];
+    styleSheets.forEach((sheet) => {
+      if ("cssRules" in sheet) {
+        try {
+          toArray(sheet.cssRules || []).forEach((item, index) => {
+            if (item.type === CSSRule.IMPORT_RULE) {
+              let importIndex = index + 1;
+              const url = item.href;
+              const deferred = fetchCSS(url).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
+                try {
+                  sheet.insertRule(rule, rule.startsWith("@import") ? importIndex += 1 : sheet.cssRules.length);
+                } catch (error) {
+                  console.error("Error inserting rule from remote css", {
+                    rule,
+                    error
+                  });
+                }
+              })).catch((e) => {
+                console.error("Error loading remote css", e.toString());
+              });
+              deferreds.push(deferred);
+            }
+          });
+        } catch (e) {
+          const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
+          if (sheet.href != null) {
+            deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
+              inline.insertRule(rule, inline.cssRules.length);
+            })).catch((err) => {
+              console.error("Error loading remote stylesheet", err);
+            }));
+          }
+          console.error("Error inlining remote css file", e);
+        }
+      }
+    });
+    return Promise.all(deferreds).then(() => {
+      styleSheets.forEach((sheet) => {
+        if ("cssRules" in sheet) {
+          try {
+            toArray(sheet.cssRules || []).forEach((item) => {
+              ret.push(item);
+            });
+          } catch (e) {
+            console.error(`Error while reading CSS rules from ${sheet.href}`, e);
+          }
+        }
+      });
+      return ret;
+    });
+  }
+  function getWebFontRules(cssRules) {
+    return cssRules.filter((rule) => rule.type === CSSRule.FONT_FACE_RULE).filter((rule) => shouldEmbed(rule.style.getPropertyValue("src")));
+  }
+  async function parseWebFontRules(node, options) {
+    if (node.ownerDocument == null) {
+      throw new Error("Provided element is not within a Document");
+    }
+    const styleSheets = toArray(node.ownerDocument.styleSheets);
+    const cssRules = await getCSSRules(styleSheets, options);
+    return getWebFontRules(cssRules);
+  }
+  function normalizeFontFamily(font) {
+    return font.trim().replace(/["']/g, "");
+  }
+  function getUsedFonts(node) {
+    const fonts = /* @__PURE__ */ new Set();
+    function traverse(node2) {
+      const fontFamily = node2.style.fontFamily || getComputedStyle(node2).fontFamily;
+      fontFamily.split(",").forEach((font) => {
+        fonts.add(normalizeFontFamily(font));
+      });
+      Array.from(node2.children).forEach((child) => {
+        if (child instanceof HTMLElement) {
+          traverse(child);
+        }
+      });
+    }
+    traverse(node);
+    return fonts;
+  }
+  async function getWebFontCSS(node, options) {
+    const rules = await parseWebFontRules(node, options);
+    const usedFonts = getUsedFonts(node);
+    const cssTexts = await Promise.all(rules.filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))).map((rule) => {
+      const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
+      return embedResources(rule.cssText, baseUrl, options);
+    }));
+    return cssTexts.join("\n");
+  }
+  async function embedWebFonts(clonedNode, options) {
+    const cssText = options.fontEmbedCSS != null ? options.fontEmbedCSS : options.skipFonts ? null : await getWebFontCSS(clonedNode, options);
+    if (cssText) {
+      const styleNode = document.createElement("style");
+      const sytleContent = document.createTextNode(cssText);
+      styleNode.appendChild(sytleContent);
+      if (clonedNode.firstChild) {
+        clonedNode.insertBefore(styleNode, clonedNode.firstChild);
+      } else {
+        clonedNode.appendChild(styleNode);
+      }
+    }
+  }
+
+  // node_modules/html-to-image/es/index.js
+  async function toSvg(node, options = {}) {
+    const { width, height } = getImageSize(node, options);
+    const clonedNode = await cloneNode(node, options, true);
+    await embedWebFonts(clonedNode, options);
+    await embedImages(clonedNode, options);
+    applyStyle(clonedNode, options);
+    const datauri = await nodeToDataURL(clonedNode, width, height);
+    return datauri;
+  }
+  async function toCanvas(node, options = {}) {
+    const { width, height } = getImageSize(node, options);
+    const svg = await toSvg(node, options);
+    const img = await createImage(svg);
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    const ratio = options.pixelRatio || getPixelRatio();
+    const canvasWidth = options.canvasWidth || width;
+    const canvasHeight = options.canvasHeight || height;
+    canvas.width = canvasWidth * ratio;
+    canvas.height = canvasHeight * ratio;
+    if (!options.skipAutoScale) {
+      checkCanvasDimensions(canvas);
+    }
+    canvas.style.width = `${canvasWidth}`;
+    canvas.style.height = `${canvasHeight}`;
+    if (options.backgroundColor) {
+      context.fillStyle = options.backgroundColor;
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    context.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  }
+  async function toPng(node, options = {}) {
+    const canvas = await toCanvas(node, options);
+    return canvas.toDataURL();
+  }
+
+  // src/runtime/dom.ts
+  var overlayAttribute = "data-wand-ui";
+  function pickElementAtPoint(x, y) {
+    for (const element of document.elementsFromPoint(x, y)) {
+      if (!(element instanceof HTMLElement)) continue;
+      if (element.closest(`[${overlayAttribute}]`)) continue;
+      return element;
+    }
+    return null;
+  }
+  function selectorFor(element) {
+    if (element.id) return `#${cssEscape(element.id)}`;
+    const segments = [];
+    for (let current = element; current && current !== document.body; current = current.parentElement) {
+      let segment = current.tagName.toLowerCase();
+      const siblings = current.parentElement ? Array.from(current.parentElement.children).filter((child) => child.tagName === current.tagName) : [];
+      if (siblings.length > 1) {
+        segment += `:nth-of-type(${siblings.indexOf(current) + 1})`;
+      }
+      segments.unshift(segment);
+    }
+    return segments.join(" > ");
+  }
+  function domPathFor(element) {
+    const path = [];
+    for (let current = element; current; current = current.parentElement) {
+      path.unshift(selectorSegment(current));
+      if (current === document.documentElement) break;
+    }
+    return path;
+  }
+  function attributesFor(element) {
+    return Object.fromEntries(
+      Array.from(element.attributes).map((attribute) => [attribute.name, attribute.value])
+    );
+  }
+  function htmlFor(element) {
+    const clone = element.cloneNode(true);
+    clone.querySelectorAll("[data-wand-root]").forEach((node) => node.remove());
+    return clone.outerHTML;
+  }
+  function reactOwnerHintsFor(element) {
+    const fiberKey = Object.keys(element).find((key) => key.startsWith("__reactFiber$"));
+    const fiber = fiberKey ? element[fiberKey] : null;
+    const hints = [];
+    let cursor = asFiber(fiber);
+    while (cursor && hints.length < 6) {
+      const name = typeof cursor.type === "string" ? cursor.type : cursor.type?.displayName ?? cursor.type?.name ?? null;
+      const source = cursor._debugSource ? `${cursor._debugSource.fileName}:${cursor._debugSource.lineNumber}` : null;
+      if (name || source) {
+        hints.push({
+          name,
+          key: cursor.key ?? null,
+          source
+        });
+      }
+      cursor = cursor.return ?? null;
+    }
+    return hints;
+  }
+  function selectorSegment(element) {
+    if (element.id) return `#${cssEscape(element.id)}`;
+    return element.tagName.toLowerCase();
+  }
+  function cssEscape(value) {
+    return globalThis.CSS?.escape ? globalThis.CSS.escape(value) : value.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+  }
+  function asFiber(value) {
+    return value && typeof value === "object" ? value : null;
+  }
+
+  // src/runtime/capture.ts
+  function viewportCaptureOptions(metrics) {
+    const documentWidth = Math.max(metrics.documentWidth, metrics.viewportWidth);
+    const documentHeight = Math.max(metrics.documentHeight, metrics.viewportHeight);
+    return {
+      cacheBust: true,
+      width: metrics.viewportWidth,
+      height: metrics.viewportHeight,
+      canvasWidth: metrics.viewportWidth,
+      canvasHeight: metrics.viewportHeight,
+      style: {
+        width: `${documentWidth}px`,
+        height: `${documentHeight}px`,
+        transform: `translate(${-metrics.scrollX}px, ${-metrics.scrollY}px)`
+      }
+    };
+  }
+
+  // src/runtime/panel.ts
+  function setComposerSending(panel, sending) {
+    const sendButton = panel.querySelector('[data-action="send"]');
+    const queueButton = panel.querySelector('[data-action="queue"]');
+    if (!sendButton || !queueButton) return;
+    sendButton.disabled = sending;
+    queueButton.disabled = sending;
+    sendButton.classList.toggle("wand-sending", sending);
+    sendButton.innerHTML = sending ? `<span class="wand-spinner" aria-hidden="true"></span><span>Sending...</span>` : "Send to agent";
+  }
+  function formatJsonPreview(value, maxLength = 180) {
+    let json;
+    try {
+      json = JSON.stringify(value) ?? "null";
+    } catch {
+      json = "[unserializable]";
+    }
+    if (json.length <= maxLength) return json;
+    if (maxLength <= 3) return ".".repeat(maxLength);
+    return `${json.slice(0, maxLength - 3)}...`;
+  }
+
+  // src/runtime/styles.ts
+  var styles = `
+.wand-launcher,
+.wand-panel,
+.wand-frame,
+.wand-toast {
+  box-sizing: border-box;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+.wand-launcher {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 2147483647;
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(17, 24, 39, 0.15);
+  border-radius: 999px;
+  background: rgba(17, 24, 39, 0.94);
+  color: white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+.wand-launcher svg { width: 18px; height: 18px; }
+.wand-frame {
+  position: fixed;
+  z-index: 2147483645;
+  pointer-events: none;
+  border: 2px solid #3c7ce6;
+  background: rgba(60, 124, 230, 0.08);
+  box-shadow: 0 0 0 1px rgba(60, 124, 230, 0.28);
+  transition: left 120ms ease-out, top 120ms ease-out, width 120ms ease-out, height 120ms ease-out;
+}
+.wand-panel {
+  position: fixed;
+  right: 18px;
+  bottom: 72px;
+  z-index: 2147483647;
+  width: min(360px, calc(100vw - 36px));
+  border: 1px solid rgba(17, 24, 39, 0.14);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.98);
+  color: #111827;
+  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+}
+.wand-panel-header,
+.wand-panel-section {
+  padding: 12px;
+}
+.wand-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
+  font-size: 13px;
+  font-weight: 600;
+}
+.wand-panel textarea {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-height: 92px;
+  resize: vertical;
+  border: 1px solid rgba(17, 24, 39, 0.16);
+  border-radius: 6px;
+  padding: 9px 10px;
+  color: #111827;
+  background: white;
+  font: inherit;
+}
+.wand-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+.wand-agent-picker {
+  display: grid;
+  gap: 5px;
+  margin-top: 10px;
+}
+.wand-agent-picker select {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid rgba(17, 24, 39, 0.16);
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: #111827;
+  background: white;
+  font: inherit;
+}
+.wand-agent-picker select:disabled {
+  color: rgba(17, 24, 39, 0.42);
+  background: #f8fafc;
+}
+.wand-actions button,
+.wand-queue-item button {
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+.wand-actions button:disabled {
+  cursor: wait;
+  opacity: 0.72;
+}
+.wand-actions button:first-child {
+  background: #111827;
+  color: white;
+}
+.wand-actions button:last-child,
+.wand-queue-item button {
+  background: #eef2f7;
+  color: #111827;
+}
+.wand-queue {
+  border-top: 1px solid rgba(17, 24, 39, 0.08);
+}
+.wand-queue-item {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid rgba(17, 24, 39, 0.06);
+  font-size: 12px;
+}
+.wand-queue-item:first-child { border-top: 0; }
+.wand-queue-controls { display: flex; gap: 8px; }
+.wand-agent-run {
+  background: rgba(60, 124, 230, 0.08);
+}
+.wand-run-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wand-run-title {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+.wand-run-header button {
+  flex: none;
+}
+.wand-run-message {
+  overflow: hidden;
+  margin: 0;
+  color: rgba(17, 24, 39, 0.76);
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.wand-sending {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.wand-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(255, 255, 255, 0.38);
+  border-top-color: currentColor;
+  border-radius: 999px;
+  animation: wand-spin 700ms linear infinite;
+}
+@keyframes wand-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wand-spinner { animation: none; }
+}
+.wand-muted {
+  color: rgba(17, 24, 39, 0.58);
+  font-size: 12px;
+}
+.wand-toast {
+  position: fixed;
+  right: 18px;
+  bottom: 72px;
+  z-index: 2147483647;
+  max-width: min(320px, calc(100vw - 36px));
+  border-radius: 6px;
+  background: rgba(17, 24, 39, 0.94);
+  color: white;
+  padding: 9px 11px;
+  font-size: 12px;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+`;
+
+  // src/runtime/index.ts
+  var defaultServerUrl = typeof process !== "undefined" && process.env.NEXT_PUBLIC_WAND_SERVER_URL ? process.env.NEXT_PUBLIC_WAND_SERVER_URL : "http://127.0.0.1:4711";
+  function mountWand(options = {}) {
+    if (typeof window === "undefined" || document.querySelector("[data-wand-root]")) return;
+    const serverUrl2 = options.serverUrl ?? defaultServerUrl;
+    const state = {
+      active: false,
+      selected: null,
+      hovered: null,
+      runs: [],
+      queue: [],
+      agentConfig: {
+        availableAdapters: [],
+        selectedAdapter: null
+      },
+      runsEventSource: null,
+      composerFor: null,
+      composerDraft: "",
+      composerFocused: false,
+      composerSelectionStart: null,
+      composerSelectionEnd: null,
+      composerSelectionDirection: null
+    };
+    const root = document.createElement("div");
+    root.dataset.wandRoot = "true";
+    root.dataset.wandUi = "true";
+    const shadow = root.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<style>${styles}</style>`;
+    document.body.append(root);
+    const frame = document.createElement("div");
+    frame.className = "wand-frame";
+    frame.hidden = true;
+    frame.dataset.wandUi = "true";
+    const launcher = document.createElement("button");
+    launcher.type = "button";
+    launcher.className = "wand-launcher";
+    launcher.dataset.wandUi = "true";
+    launcher.setAttribute("aria-label", "Toggle Wand inspector");
+    launcher.innerHTML = inspectIcon();
+    shadow.append(frame, launcher);
+    launcher.addEventListener("click", async () => {
+      state.active = !state.active;
+      if (!state.active) {
+        state.selected = null;
+        state.hovered = null;
+        resetComposerState(state, null);
+        frame.hidden = true;
+        stopRunsStream(state);
+        renderPanel(shadow, state, serverUrl2, frame);
+      } else {
+        await Promise.all([
+          refreshQueue(state, serverUrl2),
+          refreshRuns(state, serverUrl2),
+          refreshAgentConfig(state, serverUrl2)
+        ]);
+        renderPanel(shadow, state, serverUrl2, frame);
+        syncRunsStream(shadow, state, serverUrl2, frame);
+      }
+      launcher.innerHTML = state.active ? closeIcon() : inspectIcon();
+    });
+    window.addEventListener(
+      "pointermove",
+      (event) => {
+        if (!state.active || state.selected) return;
+        state.hovered = pickElementAtPoint(event.clientX, event.clientY);
+        renderFrame(frame, state.hovered);
+      },
+      true
+    );
+    window.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (!state.active) return;
+        if (event.button !== 0) return;
+        if (event.target instanceof Element && event.target.closest("[data-wand-root]")) return;
+        const target = pickElementAtPoint(event.clientX, event.clientY);
+        if (!target) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (state.selected !== target) resetComposerState(state, target);
+        state.selected = target;
+        renderFrame(frame, target);
+        renderPanel(shadow, state, serverUrl2, frame);
+      },
+      true
+    );
+    window.addEventListener(
+      "click",
+      (event) => {
+        if (!state.active) return;
+        if (event.target instanceof Element && event.target.closest("[data-wand-root]")) return;
+        if (!pickElementAtPoint(event.clientX, event.clientY)) return;
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      true
+    );
+    window.addEventListener(
+      "keydown",
+      (event) => {
+        if (!state.active || event.key !== "Escape") return;
+        state.active = false;
+        state.selected = null;
+        state.hovered = null;
+        resetComposerState(state, null);
+        frame.hidden = true;
+        stopRunsStream(state);
+        launcher.innerHTML = inspectIcon();
+        renderPanel(shadow, state, serverUrl2, frame);
+      },
+      true
+    );
+    window.addEventListener("resize", () => renderFrame(frame, state.selected ?? state.hovered));
+    window.addEventListener("scroll", () => renderFrame(frame, state.selected ?? state.hovered), true);
+  }
+  function renderPanel(shadow, state, serverUrl2, frame) {
+    rememberComposerState(shadow, state);
+    shadow.querySelector(".wand-panel")?.remove();
+    if (!state.active) return;
+    const panel = document.createElement("section");
+    panel.className = "wand-panel";
+    panel.dataset.wandUi = "true";
+    panel.innerHTML = `
+    <div class="wand-panel-header">
+      <span>${state.selected ? "Describe the change" : "Select an element"}</span>
+      <span class="wand-muted wand-run-count">${runCountText(state)}</span>
+    </div>
+    ${state.selected ? `
+      <div class="wand-panel-section">
+        <textarea placeholder="What should change?"></textarea>
+        <div class="wand-actions">
+          <button type="button" data-action="send" ${state.agentConfig.selectedAdapter ? "" : "disabled"}>Send to agent</button>
+          <button type="button" data-action="queue">Queue it</button>
+        </div>
+        <label class="wand-agent-picker">
+          <span class="wand-muted">Agent</span>
+          <select data-action="select-adapter" ${state.agentConfig.availableAdapters.length === 0 ? "disabled" : ""}>
+            ${adapterOptionsHtml(state.agentConfig)}
+          </select>
+        </label>
+      </div>
+    ` : `<div class="wand-panel-section wand-muted">Move the cursor, then click a page element.</div>`}
+    <div class="wand-queue">
+      ${queueItemsHtml(state)}
+    </div>
+  `;
+    panel.addEventListener("change", async (event) => {
+      const target = event.target;
+      if (target.dataset.action !== "select-adapter") return;
+      const adapter = target.value;
+      if (!state.agentConfig.availableAdapters.includes(adapter)) return;
+      try {
+        state.agentConfig = await request(serverUrl2, "/api/agent-config", {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ adapter })
+        });
+        renderPanel(shadow, state, serverUrl2, frame);
+      } catch (error) {
+        toast(shadow, error instanceof Error ? error.message : String(error));
+        await refreshAgentConfig(state, serverUrl2);
+        renderPanel(shadow, state, serverUrl2, frame);
+      }
+    });
+    panel.addEventListener("click", async (event) => {
+      const target = event.target;
+      const action = target.dataset.action;
+      if (!action) return;
+      try {
+        if (action === "send" || action === "queue") {
+          const textarea = panel.querySelector("textarea");
+          const prompt = textarea.value.trim();
+          if (!prompt || !state.selected) return;
+          if (action === "send" && !state.agentConfig.selectedAdapter) return;
+          if (action === "send") setComposerSending(panel, true);
+          try {
+            const capture = await captureSelection(state.selected);
+            if (action === "send") {
+              toast(shadow, "Sending to agent...");
+              await post(serverUrl2, "/api/send", {
+                prompt,
+                capture,
+                adapter: state.agentConfig.selectedAdapter
+              });
+              toast(shadow, "Agent started.");
+              state.selected = null;
+              resetComposerState(state, null);
+              frame.hidden = true;
+            } else {
+              await post(serverUrl2, "/api/queue", { prompt, capture });
+              toast(shadow, "Queued.");
+              state.selected = null;
+              resetComposerState(state, null);
+            }
+            await Promise.all([refreshQueue(state, serverUrl2), refreshRuns(state, serverUrl2)]);
+            renderPanel(shadow, state, serverUrl2, frame);
+            syncRunsStream(shadow, state, serverUrl2, frame);
+            return;
+          } finally {
+            if (action === "send" && panel.isConnected) setComposerSending(panel, false);
+          }
+        }
+        if (action === "stop-run") {
+          const item2 = target.closest("[data-run-id]");
+          const id2 = item2?.dataset.runId;
+          if (!id2) return;
+          await request(serverUrl2, `/api/runs/${encodeURIComponent(id2)}`, { method: "DELETE" });
+          await refreshRuns(state, serverUrl2);
+          renderPanel(shadow, state, serverUrl2, frame);
+          return;
+        }
+        const item = target.closest("[data-queue-id]");
+        const id = item?.dataset.queueId;
+        if (!id) return;
+        const queued = state.queue.find((entry) => entry.id === id);
+        if (!queued) return;
+        if (action === "send-queued") {
+          toast(shadow, "Sending queued request...");
+          await post(serverUrl2, "/api/send", { prompt: queued.prompt, context: queued.context });
+          await request(serverUrl2, `/api/queue/${encodeURIComponent(id)}`, { method: "DELETE" });
+          toast(shadow, "Queued request started.");
+        } else if (action === "delete-queued") {
+          await request(serverUrl2, `/api/queue/${encodeURIComponent(id)}`, { method: "DELETE" });
+        }
+        await Promise.all([refreshQueue(state, serverUrl2), refreshRuns(state, serverUrl2)]);
+        renderPanel(shadow, state, serverUrl2, frame);
+      } catch (error) {
+        toast(shadow, error instanceof Error ? error.message : String(error));
+      }
+    });
+    shadow.append(panel);
+    restoreComposerState(shadow, panel, state);
+  }
+  async function captureSelection(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+      id: crypto.randomUUID(),
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      url: window.location.href,
+      route: `${window.location.pathname}${window.location.search}${window.location.hash}`,
+      title: document.title,
+      selector: selectorFor(element),
+      domPath: domPathFor(element),
+      tagName: element.tagName,
+      text: (element.textContent ?? "").trim().slice(0, 500),
+      attributes: attributesFor(element),
+      rect: {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      },
+      reactOwnerHints: reactOwnerHintsFor(element),
+      elementHtml: htmlFor(element),
+      viewportDataUrl: await toPng(
+        document.documentElement,
+        viewportCaptureOptions({
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          scrollX: window.scrollX,
+          scrollY: window.scrollY,
+          documentWidth: document.documentElement.scrollWidth,
+          documentHeight: document.documentElement.scrollHeight
+        })
+      ),
+      elementDataUrl: await toPng(element, { cacheBust: true })
+    };
+  }
+  function renderFrame(frame, target) {
+    if (!target) {
+      frame.hidden = true;
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    frame.hidden = false;
+    frame.style.left = `${rect.left}px`;
+    frame.style.top = `${rect.top}px`;
+    frame.style.width = `${rect.width}px`;
+    frame.style.height = `${rect.height}px`;
+  }
+  async function refreshQueue(state, serverUrl2) {
+    try {
+      state.queue = await request(serverUrl2, "/api/queue");
+    } catch {
+      state.queue = [];
+    }
+  }
+  async function refreshRuns(state, serverUrl2) {
+    try {
+      state.runs = await request(serverUrl2, "/api/runs");
+    } catch {
+      state.runs = [];
+    }
+  }
+  async function refreshAgentConfig(state, serverUrl2) {
+    try {
+      state.agentConfig = await request(serverUrl2, "/api/agent-config");
+    } catch {
+      state.agentConfig = {
+        availableAdapters: [],
+        selectedAdapter: null
+      };
+    }
+  }
+  function syncRunsStream(shadow, state, serverUrl2, frame) {
+    if (!state.active || state.runsEventSource !== null) return;
+    const source = new EventSource(`${serverUrl2}/api/runs/events`);
+    source.addEventListener("runs", (event) => {
+      state.runs = JSON.parse(event.data);
+      if (state.active) {
+        renderQueue(shadow, state);
+        renderRunCount(shadow, state);
+      }
+    });
+    state.runsEventSource = source;
+  }
+  function stopRunsStream(state) {
+    state.runsEventSource?.close();
+    state.runsEventSource = null;
+  }
+  async function post(serverUrl2, pathname, body) {
+    return request(serverUrl2, pathname, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body)
+    });
+  }
+  async function request(serverUrl2, pathname, init) {
+    const response = await fetch(`${serverUrl2}${pathname}`, init);
+    const payload = await response.json();
+    if (!response.ok) throw new Error(payload.error ?? `Request failed: ${response.status}`);
+    return payload;
+  }
+  function toast(shadow, message) {
+    shadow.querySelector(".wand-toast")?.remove();
+    const node = document.createElement("div");
+    node.className = "wand-toast";
+    node.textContent = message;
+    shadow.append(node);
+    window.setTimeout(() => node.remove(), 2400);
+  }
+  function escapeHtml(value) {
+    return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+  }
+  function renderQueue(shadow, state) {
+    const queue = shadow.querySelector(".wand-queue");
+    if (!queue) return;
+    queue.innerHTML = queueItemsHtml(state);
+  }
+  function renderRunCount(shadow, state) {
+    const count = shadow.querySelector(".wand-run-count");
+    if (!count) return;
+    count.textContent = runCountText(state);
+  }
+  function runCountText(state) {
+    return `${state.runs.length} running / ${state.queue.length} queued`;
+  }
+  function adapterOptionsHtml(config) {
+    const placeholder = config.selectedAdapter ? "" : `<option value="">Choose agent</option>`;
+    return `${placeholder}${config.availableAdapters.map(
+      (adapter) => `<option value="${adapter}" ${adapter === config.selectedAdapter ? "selected" : ""}>${adapterLabel(adapter)}</option>`
+    ).join("")}`;
+  }
+  function adapterLabel(adapter) {
+    switch (adapter) {
+      case "claude-code":
+        return "Claude Code";
+      case "opencode":
+        return "OpenCode";
+      case "codex":
+        return "Codex";
+    }
+  }
+  function queueItemsHtml(state) {
+    return `
+    ${state.runs.map(
+      (run) => `
+      <div class="wand-queue-item wand-agent-run" data-run-id="${run.id}">
+        <div class="wand-run-header">
+          <div class="wand-run-title">${escapeHtml(run.prompt)}</div>
+          <button type="button" data-action="stop-run">Stop</button>
+        </div>
+        <pre class="wand-run-message">${escapeHtml(formatJsonPreview(run.latestMessage))}</pre>
+      </div>
+    `
+    ).join("")}
+    ${state.queue.map(
+      (item) => `
+      <div class="wand-queue-item" data-queue-id="${item.id}">
+        <div>${escapeHtml(item.prompt)}</div>
+        <div class="wand-muted">${new Date(item.createdAt).toLocaleString()}</div>
+        <div class="wand-queue-controls">
+          <button type="button" data-action="send-queued">Send</button>
+          <button type="button" data-action="delete-queued">Delete</button>
+        </div>
+      </div>
+    `
+    ).join("")}
+  `;
+  }
+  function rememberComposerState(shadow, state) {
+    const textarea = shadow.querySelector(".wand-panel textarea");
+    if (!textarea || state.composerFor !== state.selected) return;
+    syncComposerState(shadow, textarea, state);
+  }
+  function restoreComposerState(shadow, panel, state) {
+    const textarea = panel.querySelector("textarea");
+    if (!textarea || !state.selected) return;
+    if (state.composerFor !== state.selected) resetComposerState(state, state.selected);
+    textarea.value = state.composerDraft;
+    const sync = () => syncComposerState(shadow, textarea, state);
+    textarea.addEventListener("input", sync);
+    textarea.addEventListener("focus", sync);
+    textarea.addEventListener("blur", sync);
+    textarea.addEventListener("select", sync);
+    textarea.addEventListener("keyup", sync);
+    textarea.addEventListener("click", sync);
+    if (!state.composerFocused) return;
+    const selectionStart = state.composerSelectionStart;
+    const selectionEnd = state.composerSelectionEnd;
+    const selectionDirection = state.composerSelectionDirection;
+    textarea.focus();
+    if (selectionStart !== null && selectionEnd !== null) {
+      textarea.setSelectionRange(
+        selectionStart,
+        selectionEnd,
+        selectionDirection ?? "none"
+      );
+    }
+    sync();
+  }
+  function syncComposerState(shadow, textarea, state) {
+    state.composerDraft = textarea.value;
+    state.composerFocused = shadow.activeElement === textarea;
+    state.composerSelectionStart = textarea.selectionStart;
+    state.composerSelectionEnd = textarea.selectionEnd;
+    state.composerSelectionDirection = textarea.selectionDirection;
+  }
+  function resetComposerState(state, selected) {
+    state.composerFor = selected;
+    state.composerDraft = "";
+    state.composerFocused = false;
+    state.composerSelectionStart = null;
+    state.composerSelectionEnd = null;
+    state.composerSelectionDirection = null;
+  }
+  function inspectIcon() {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg>`;
+  }
+  function closeIcon() {
+    return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>`;
+  }
+
+  // src/client.ts
+  var script = document.currentScript;
+  var serverUrl = script instanceof HTMLScriptElement ? script.dataset.wandServerUrl : void 0;
+  mountWand(serverUrl ? { serverUrl } : {});
+})();