@leed-ai/cli 0.0.0-stage → 6.19.0

package/dist/static/javascript/versions.json

@@ -0,0 +1,74 @@
+[
+  {
+    "name": "leedUtilsJS",
+    "path": "static/javascript",
+    "originalName": "utilities.js",
+    "destinationName": "utils",
+    "version": 32
+  },
+  {
+    "name": "searchJS",
+    "path": "static/javascript",
+    "originalName": "lunr-search.js",
+    "destinationName": "search",
+    "version": 10
+  },
+  {
+    "name": "liveSearchJS",
+    "path": "static/javascript",
+    "originalName": "live-search.js",
+    "destinationName": "livesearch",
+    "version": 3
+  },
+  {
+    "name": "privacyJS",
+    "path": "static/javascript",
+    "originalName": "detectIncognito.js",
+    "destinationName": "priv",
+    "version": 2
+  },
+  {
+    "name": "fingerprintJS",
+    "path": "static/javascript/fp",
+    "originalName": "fp.js",
+    "destinationName": "fp",
+    "version": 1
+  },
+  {
+    "name": "timerJS",
+    "path": "static/javascript",
+    "originalName": "timeme.js",
+    "destinationName": "timer",
+    "version": 2
+  },
+  {
+    "name": "trackerJS",
+    "entryPoint": "src/trackers/whisper.ts",
+    "path": "static/javascript/tracker",
+    "originalName": "whisper.js",
+    "destinationName": "whisper",
+    "version": 24
+  },
+  {
+    "name": "webmcpJS",
+    "entryPoint": "src/trackers/webmcp.ts",
+    "path": "static/javascript/tracker",
+    "originalName": "webmcp.js",
+    "destinationName": "webmcp",
+    "version": 3
+  },
+  {
+    "name": "documentationJS",
+    "path": "static/javascript",
+    "originalName": "documentation.js",
+    "destinationName": "docs",
+    "version": 23
+  },
+  {
+    "name": "zoomableJS",
+    "path": "static/javascript",
+    "originalName": "zoomable.js",
+    "destinationName": "zoomable",
+    "version": 5
+  }
+]

package/dist/static/javascript/zoomable.js

@@ -0,0 +1,488 @@
+/**
+ * Forked from https://github.com/benbjurstrom/alpinejs-zoomable/commit/8f3b023a4d08d23bb3169df2a95273bd71689c0f
+ * baseScale has a bug. We need to fix it. So two lines have been commented out.
+ */
+/**
+ * `openImage`, once Alpine has initialized and the container exists.
+ *
+ * Delegated handlers below need to open a diagram without an Alpine directive
+ * on it, and `alpine:init` may fire after `DOMContentLoaded` — so this is read
+ * at click time rather than captured at bind time, and is null until then.
+ */
+let openZoomable = null;
+
+function setupZoomable(Alpine) {
+  let isFullscreen = false;
+  let isDragging = false;
+  let startX = 0;
+  let startY = 0;
+  let translateX = 0;
+  let translateY = 0;
+  let currentScale = 1;
+  const baseScale = 1;
+
+  // Attempt to find existing container in the DOM
+  let container = document.querySelector(".zoomable-fullscreen-container");
+  if (!container) {
+    container = document.createElement("div");
+    container.className = "zoomable-fullscreen-container";
+    container.setAttribute("role", "dialog");
+    container.setAttribute("aria-modal", "true");
+    container.setAttribute("aria-label", "Image fullscreen modal");
+    document.body.appendChild(container);
+  }
+
+  // Make sure we have the loading indicator
+  let loadingIndicator = container.querySelector(".zoomable-loading-indicator");
+  if (!loadingIndicator) {
+    loadingIndicator = document.createElement("div");
+    loadingIndicator.className = "zoomable-loading-indicator";
+    loadingIndicator.setAttribute("role", "status");
+    loadingIndicator.setAttribute("aria-live", "polite");
+
+    const spinner = document.createElement("div");
+    spinner.className = "zoomable-spinner";
+    const loadingText = document.createElement("div");
+    loadingText.textContent = "Loading Image...";
+    loadingIndicator.appendChild(spinner);
+    loadingIndicator.appendChild(loadingText);
+    container.appendChild(loadingIndicator);
+  }
+
+  // Make sure we have the controls panel
+  let controlsPanel = container.querySelector(".zoomable-controls-panel");
+  if (!controlsPanel) {
+    controlsPanel = document.createElement("div");
+    controlsPanel.className = "zoomable-controls-panel";
+
+    const zoomInBtn = document.createElement("button");
+    zoomInBtn.className = "zoomable-control-button zoomable-zoom-in";
+    zoomInBtn.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" ' +
+      'stroke-width="1.5" stroke="currentColor">' +
+      '<path stroke-linecap="round" stroke-linejoin="round" ' +
+      'd="M12 4.5v15m7.5-7.5h-15" />' +
+      "</svg>";
+    zoomInBtn.setAttribute("aria-label", "Zoom in");
+    zoomInBtn.setAttribute("tabindex", "0");
+
+    const zoomOutBtn = document.createElement("button");
+    zoomOutBtn.className = "zoomable-control-button zoomable-zoom-out";
+    zoomOutBtn.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" ' +
+      'stroke-width="1.5" stroke="currentColor">' +
+      '<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />' +
+      "</svg>";
+    zoomOutBtn.setAttribute("aria-label", "Zoom out");
+    zoomOutBtn.setAttribute("tabindex", "0");
+
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "zoomable-control-button zoomable-close";
+    closeBtn.innerHTML =
+      '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" ' +
+      'stroke-width="1.5" stroke="currentColor">' +
+      '<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />' +
+      "</svg>";
+    closeBtn.setAttribute("aria-label", "Close fullscreen view");
+    closeBtn.setAttribute("tabindex", "0");
+
+    controlsPanel.appendChild(zoomInBtn);
+    controlsPanel.appendChild(zoomOutBtn);
+    controlsPanel.appendChild(closeBtn);
+    container.appendChild(controlsPanel);
+  }
+
+  // Make sure we have the fullscreen <img>
+  let fullscreenImg = container.querySelector("img.zoomable-fullscreen-image");
+  if (!fullscreenImg) {
+    fullscreenImg = document.createElement("img");
+    fullscreenImg.className = "zoomable-fullscreen-image";
+    fullscreenImg.setAttribute("alt", "");
+    container.appendChild(fullscreenImg);
+  }
+
+  /**
+   * The second stage, for inline SVG — a Mermaid diagram, in practice.
+   *
+   * An SVG cannot go through the <img> above. `img.src` needs a URL, and
+   * serializing the diagram to a data: URI would make it a separate document:
+   * every `var(--token)` in it would stop resolving, because the page's custom
+   * properties are not in scope there. A themed diagram would arrive unstyled.
+   *
+   * So the node is cloned into the page instead, where the cascade still
+   * reaches it. It shares `.zoomable-fullscreen-image` so the positioning,
+   * sizing and transition CSS is the same one rule; the second class is only
+   * a hook for the parts that differ.
+   */
+  let fullscreenSvg = container.querySelector(".zoomable-fullscreen-svg");
+  if (!fullscreenSvg) {
+    fullscreenSvg = document.createElement("div");
+    fullscreenSvg.className = "zoomable-fullscreen-image zoomable-fullscreen-svg";
+    container.appendChild(fullscreenSvg);
+  }
+
+  /**
+   * Whichever of the two is showing. Zoom, drag and the transform all act on
+   * this rather than on the <img>, which is the whole reason they did not need
+   * to learn about SVG.
+   */
+  let stage = fullscreenImg;
+
+  // -----------------------------
+  // Focus trapping helpers
+  // -----------------------------
+  const focusableSelectors = "button";
+  let focusableElements = [];
+  let firstFocusableElement = null;
+  let lastFocusableElement = null;
+
+  function trapFocus(e) {
+    if (!isFullscreen) return;
+    if (e.key === "Tab") {
+      if (focusableElements.length === 0) return;
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          lastFocusableElement.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+        }
+      }
+    }
+  }
+
+  function setFocusTrap() {
+    // Skip for touch devices
+    if ("ontouchstart" in window || navigator.maxTouchPoints > 0) {
+      return;
+    }
+    focusableElements = container.querySelectorAll(focusableSelectors);
+    if (focusableElements.length > 0) {
+      firstFocusableElement = focusableElements[0];
+      lastFocusableElement = focusableElements[focusableElements.length - 1];
+      firstFocusableElement.focus();
+    }
+  }
+
+  // -----------------------------
+  // Opening/closing image logic
+  // -----------------------------
+  /**
+   * Fit the active stage to the window, given the source's aspect ratio.
+   *
+   * The same arithmetic for both kinds — only where the ratio comes from
+   * differs, which is the one thing an <img> and an <svg> genuinely disagree
+   * about.
+   */
+  function fitStage(ratio) {
+    const windowRatio = window.innerWidth / window.innerHeight;
+    // const ratioMismatch = Math.abs(windowRatio - ratio)
+    // baseScale = ratioMismatch > 0.75 ? 1.75 : 1
+    currentScale = baseScale;
+
+    if (ratio > windowRatio) {
+      stage.style.width = `${window.innerWidth}px`;
+      stage.style.height = "auto";
+    } else {
+      stage.style.height = `${window.innerHeight}px`;
+      stage.style.width = "auto";
+    }
+
+    updateImagePosition();
+    loadingIndicator.hidden = true;
+    setFocusTrap();
+  }
+
+  /** Show one stage and put the other away, so only one is ever transformed. */
+  function useStage(next) {
+    stage = next;
+    const idle = next === fullscreenImg ? fullscreenSvg : fullscreenImg;
+    idle.hidden = true;
+    next.hidden = false;
+  }
+
+  function openImage(source) {
+    // If container was removed from DOM (e.g. due to wire:navigate),
+    // re-append it and re-attach event listeners.
+    if (!document.body.contains(container)) {
+      document.body.appendChild(container);
+      attachContainerListeners();
+    }
+
+    const isSvg = source.tagName.toLowerCase() === "svg";
+    useStage(isSvg ? fullscreenSvg : fullscreenImg);
+
+    container.style.display = "block";
+    isFullscreen = true;
+    document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", trapFocus);
+
+    // Nothing is fetched for an SVG, so there is nothing to wait for and a
+    // spinner would flash for one frame and leave.
+    loadingIndicator.hidden = isSvg;
+    translateX = 0;
+    translateY = 0;
+    currentScale = 1;
+    updateImagePosition();
+
+    if (isSvg) {
+      const copy = source.cloneNode(true);
+      // Mermaid writes an inline `max-width` sized for the column it rendered
+      // into. Left on, the diagram would refuse to grow past that however far
+      // it is zoomed, which is the entire point of being here.
+      copy.style.removeProperty("max-width");
+      copy.removeAttribute("width");
+      copy.removeAttribute("height");
+      copy.setAttribute("width", "100%");
+      copy.setAttribute("height", "100%");
+
+      /**
+       * The diagram's own container comes along with it.
+       *
+       * Cloning the <svg> by itself is enough for `var(--token)` — those
+       * resolve against :root, which is why the note above says the cascade
+       * still reaches it. Selectors are the half that does not survive. A site
+       * correcting Mermaid's hardcoded colors writes them against the element
+       * the diagram sits in — `pre.mermaid svg { ... }` — and against a bare
+       * copy those rules match nothing. The zoomed diagram then quietly loses
+       * every correction while the one on the page keeps them, which reads as
+       * "zoom changes the colors" rather than as a missing rule.
+       *
+       * A shallow clone of the parent carries its tag and its classes and none
+       * of its children, so the site's own selectors match here exactly as
+       * they do in the document. The id does not come: it is still on the
+       * element in the page, and two of them would break `getElementById` and
+       * any `#id` rule pointing at the original.
+       *
+       * The carrier gives up its box in defaults.css — it is here to be
+       * matched, not to lay anything out.
+       */
+      const host = source.parentElement?.cloneNode(false) ?? null;
+      if (host) {
+        host.removeAttribute("id");
+        host.appendChild(copy);
+      }
+      fullscreenSvg.replaceChildren(host ?? copy);
+
+      // The viewBox is the SVG's own idea of its proportions and is what
+      // `naturalWidth`/`naturalHeight` would have told us about a bitmap. Fall
+      // back to the rendered box for an SVG that carries no viewBox.
+      const box = source.viewBox?.baseVal;
+      const rect = source.getBoundingClientRect();
+      const ratio = box?.width && box.height ? box.width / box.height : rect.width / rect.height || 1;
+
+      fitStage(ratio);
+      return;
+    }
+
+    fullscreenImg.src = source.src;
+    fullscreenImg.alt = source.alt || "Enlarged image view";
+
+    fullscreenImg.onload = () => {
+      fitStage(fullscreenImg.naturalWidth / fullscreenImg.naturalHeight);
+    };
+
+    fullscreenImg.onerror = () => {
+      loadingIndicator.hidden = true;
+      setFocusTrap();
+    };
+  }
+
+  function closeImage() {
+    container.style.display = "none";
+    isFullscreen = false;
+    document.body.style.overflow = "";
+    document.removeEventListener("keydown", trapFocus);
+  }
+
+  // -----------------------------
+  // Zoom & drag logic
+  // -----------------------------
+  function updateImagePosition() {
+    stage.style.transform = `translate(calc(-50% + ${translateX}px), calc(-50% + ${translateY}px)) scale(${currentScale})`;
+  }
+
+  function zoomIn() {
+    currentScale = Math.min(currentScale * 1.5, baseScale * 4);
+    updateImagePosition();
+  }
+
+  function zoomOut() {
+    currentScale = Math.max(currentScale / 1.5, baseScale * 0.5);
+    updateImagePosition();
+  }
+
+  function startDragging(e) {
+    if (!isFullscreen) return;
+    // If user clicked inside the controls panel, don’t drag the image
+    if (e.target.closest(".controls-panel")) {
+      return;
+    }
+    // If user clicked the blank area behind the image, treat that as close
+    if (e.target === container) {
+      closeImage();
+      return;
+    }
+
+    isDragging = true;
+    stage.classList.add("dragging");
+
+    const clientX = e.clientX || e.touches?.[0].clientX;
+    const clientY = e.clientY || e.touches?.[0].clientY;
+
+    startX = clientX - translateX;
+    startY = clientY - translateY;
+    e.preventDefault();
+  }
+
+  function stopDragging() {
+    isDragging = false;
+    stage.classList.remove("dragging");
+  }
+
+  function drag(e) {
+    if (!isDragging) return;
+
+    const clientX = e.clientX || e.touches?.[0].clientX;
+    const clientY = e.clientY || e.touches?.[0].clientY;
+
+    translateX = clientX - startX;
+    translateY = clientY - startY;
+
+    updateImagePosition();
+    e.preventDefault();
+  }
+
+  function onKeyDown(e) {
+    if (isFullscreen && e.key === "Escape") {
+      closeImage();
+    }
+  }
+
+  function preventDefault(e) {
+    if (isFullscreen) {
+      e.preventDefault();
+    }
+  }
+
+  // -----------------------------
+  // Helper to attach button & global listeners
+  // -----------------------------
+  function addButtonListeners(button, handler) {
+    const handleTouch = (e) => {
+      e.preventDefault();
+      handler(e);
+    };
+    button.addEventListener("click", handler);
+    button.addEventListener("touchend", handleTouch);
+
+    // Return a cleanup function if needed
+    return () => {
+      button.removeEventListener("click", handler);
+      button.removeEventListener("touchend", handleTouch);
+    };
+  }
+
+  function attachContainerListeners() {
+    // If we've already attached them and container is still in the DOM, skip
+    if (container.dataset.hasListeners === "true") return;
+
+    // Mark as attached
+    container.dataset.hasListeners = "true";
+
+    // Attach button listeners
+    const zoomInBtn = container.querySelector(".zoomable-zoom-in");
+    const zoomOutBtn = container.querySelector(".zoomable-zoom-out");
+    const closeBtn = container.querySelector(".zoomable-close");
+
+    addButtonListeners(zoomInBtn, zoomIn);
+    addButtonListeners(zoomOutBtn, zoomOut);
+    addButtonListeners(closeBtn, closeImage);
+    // Attach global event listeners
+    container.addEventListener("mousedown", startDragging);
+    window.addEventListener("mousemove", drag);
+    window.addEventListener("mouseup", stopDragging);
+
+    container.addEventListener("touchstart", startDragging, { passive: false });
+    container.addEventListener("touchmove", drag, { passive: false });
+    container.addEventListener("touchend", stopDragging);
+    container.addEventListener("touchmove", preventDefault, { passive: false });
+
+    document.addEventListener("keydown", onKeyDown);
+  }
+
+  // Attach them once on page load
+  attachContainerListeners();
+
+  // Hand the opener to the delegated listeners at the foot of this file.
+  openZoomable = openImage;
+
+  // -----------------------------
+  // Alpine directive
+  // -----------------------------
+  Alpine.directive("zoomable", (el, { expression }, { cleanup }) => {
+    const tag = el.tagName.toLowerCase();
+    if (tag !== "img" && tag !== "svg") {
+      console.error("The x-zoomable directive can only be used on an <img> or <svg> element, but found:", el.tagName);
+      return;
+    }
+
+    const onClick = () => openImage(el);
+    el.addEventListener("click", onClick);
+
+    // On directive cleanup, only remove the <img> click event
+    // Do NOT remove the container’s global event listeners here—
+    // those are meant to be persistent throughout.
+    cleanup(() => {
+      el.removeEventListener("click", onClick);
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("#leed-docs-copy img").forEach((img) => {
+    if (img.parentElement.tagName !== "A") {
+      img.setAttribute("x-zoomable", "");
+    }
+  });
+
+  /**
+   * Mermaid diagrams open on a delegated click rather than the directive.
+   *
+   * They do not exist yet. Mermaid renders after this event and replaces each
+   * `<pre>`'s contents, and again on every `prefers-color-scheme` change — so
+   * anything bound to the SVG here would be bound to a node that is about to
+   * be thrown away. Delegation has nothing to rebind.
+   *
+   * `closest` rather than the target itself, because a click lands on whatever
+   * rect or text is under the pointer, never on the `<svg>`.
+   */
+  document.addEventListener("click", (event) => {
+    if (event.target.closest?.(".zoomable-fullscreen-container")) return;
+    const diagram = event.target.closest?.("pre.mermaid svg");
+    if (diagram && openZoomable) {
+      openZoomable(diagram);
+    }
+  });
+
+  document.addEventListener("click", (event) => {
+    // The <img> stage is the target itself; on the SVG stage the target is
+    // some node inside the cloned diagram, so ask what it sits in.
+    const onStage =
+      event.target.classList?.contains("zoomable-fullscreen-image") ||
+      event.target.closest?.(".zoomable-fullscreen-svg");
+    if (onStage) {
+      const closeButton = document.querySelector(".zoomable-close");
+      if (closeButton) {
+        closeButton.click();
+      }
+    }
+  });
+});
+
+document.addEventListener("alpine:init", () => {
+  setupZoomable(Alpine);
+});