accessify-widget 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessify-widget",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Accessify-Widget accessibility widget for any website",
   "license": "MIT",
   "homepage": "https://github.com/maddesv1-ctrl/accessify-widget",
@@ -36,6 +36,14 @@
     "dist/",
     "README.md"
   ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && BUILD_WIDGET=true vite build && node scripts/build-loader.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "lint": "eslint src/ --ext .ts,.svelte"
+  },
   "devDependencies": {
     "@axe-core/playwright": "^4.9.0",
     "@playwright/test": "^1.45.0",
@@ -49,13 +57,5 @@
   },
   "dependencies": {
     "axe-core": "^4.9.0"
-  },
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build && BUILD_WIDGET=true vite build && node scripts/build-loader.js",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:e2e": "playwright test",
-    "lint": "eslint src/ --ext .ts,.svelte"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Accessify Contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/alt-text-CgzNGvdT.js

@@ -1,567 +0,0 @@
-import { R as RateLimitError } from "./index-qmiN2JAz.js";
-function createAltTextModule(aiService, lang = "de") {
-  let enabled = false;
-  let styleEl = null;
-  let badgeEl = null;
-  let activePanelEl = null;
-  let missingAltImages = [];
-  const processedImages = /* @__PURE__ */ new Map();
-  const STYLE_ID = "accessify-alt-text-styles";
-  const HIGHLIGHT_CLASS = "accessify-alt-missing";
-  const BADGE_CLASS = "accessify-alt-badge";
-  const PANEL_CLASS = "accessify-alt-panel";
-  function getStyles() {
-    return `
-      .${HIGHLIGHT_CLASS} {
-        outline: 3px dashed #e63946 !important;
-        outline-offset: 3px !important;
-        position: relative !important;
-        cursor: pointer !important;
-        transition: outline-color 0.2s ease !important;
-      }
-      .${HIGHLIGHT_CLASS}:hover {
-        outline-color: #f77f00 !important;
-        outline-style: solid !important;
-      }
-      .${HIGHLIGHT_CLASS}::after {
-        content: 'ALT';
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        padding: 2px 6px;
-        background: #e63946;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 10px;
-        font-weight: 700;
-        border-radius: 3px;
-        line-height: 1.4;
-        pointer-events: none;
-        z-index: 1;
-      }
-
-      .${HIGHLIGHT_CLASS}.accessify-alt-processed {
-        outline-color: #2a9d8f !important;
-        outline-style: solid !important;
-      }
-      .${HIGHLIGHT_CLASS}.accessify-alt-processed::after {
-        content: '\\2713 ALT';
-        background: #2a9d8f;
-      }
-
-      .${BADGE_CLASS} {
-        position: fixed;
-        top: 12px;
-        right: 12px;
-        z-index: 2147483646;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 8px 14px;
-        background: #1a1a2e;
-        color: #f0f0f0;
-        border-radius: 8px;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 13px;
-        user-select: none;
-        animation: accessify-alt-fade-in 0.2s ease;
-      }
-      .${BADGE_CLASS}-count {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 22px;
-        height: 22px;
-        padding: 0 6px;
-        background: #e63946;
-        color: #fff;
-        font-size: 12px;
-        font-weight: 700;
-        border-radius: 11px;
-      }
-
-      .${PANEL_CLASS} {
-        position: absolute;
-        z-index: 2147483646;
-        width: 360px;
-        max-width: 90vw;
-        padding: 16px;
-        background: #1a1a2e;
-        color: #f0f0f0;
-        border-radius: 12px;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
-        animation: accessify-alt-fade-in 0.2s ease;
-      }
-      .${PANEL_CLASS}-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
-      }
-      .${PANEL_CLASS}-header h3 {
-        margin: 0;
-        font-size: 14px;
-        font-weight: 600;
-        color: #4ea8de;
-      }
-      .${PANEL_CLASS}-close {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        padding: 0;
-        border: none;
-        border-radius: 4px;
-        background: transparent;
-        color: #888;
-        font-size: 16px;
-        cursor: pointer;
-      }
-      .${PANEL_CLASS}-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
-      .${PANEL_CLASS}-close:focus-visible { outline: 2px solid #4ea8de; outline-offset: 1px; }
-
-      .${PANEL_CLASS}-disclaimer {
-        padding: 6px 10px;
-        margin-bottom: 10px;
-        background: rgba(255,193,7,0.1);
-        border: 1px solid rgba(255,193,7,0.25);
-        border-radius: 6px;
-        font-size: 11px;
-        color: #ffd166;
-      }
-
-      .${PANEL_CLASS}-preview {
-        max-width: 100%;
-        max-height: 120px;
-        border-radius: 6px;
-        margin-bottom: 10px;
-        object-fit: contain;
-        background: rgba(255,255,255,0.05);
-      }
-
-      .${PANEL_CLASS}-textarea {
-        width: 100%;
-        min-height: 60px;
-        padding: 10px;
-        border: 1px solid rgba(255,255,255,0.15);
-        border-radius: 8px;
-        background: rgba(255,255,255,0.04);
-        color: #f0f0f0;
-        font-family: inherit;
-        font-size: 13px;
-        line-height: 1.5;
-        resize: vertical;
-        margin-bottom: 10px;
-        box-sizing: border-box;
-      }
-      .${PANEL_CLASS}-textarea:focus {
-        border-color: #4ea8de;
-        outline: none;
-      }
-      .${PANEL_CLASS}-textarea:read-only {
-        opacity: 0.7;
-        cursor: default;
-      }
-
-      .${PANEL_CLASS}-actions {
-        display: flex;
-        gap: 6px;
-        justify-content: flex-end;
-      }
-      .${PANEL_CLASS}-actions button {
-        padding: 6px 14px;
-        border: 1px solid rgba(255,255,255,0.15);
-        border-radius: 6px;
-        background: rgba(255,255,255,0.08);
-        color: #f0f0f0;
-        font-size: 12px;
-        cursor: pointer;
-        transition: background 0.15s ease;
-      }
-      .${PANEL_CLASS}-actions button:hover { background: rgba(255,255,255,0.18); }
-      .${PANEL_CLASS}-actions button:focus-visible { outline: 2px solid #4ea8de; outline-offset: 1px; }
-      .${PANEL_CLASS}-actions button.primary {
-        background: rgba(78,168,222,0.2);
-        color: #4ea8de;
-        border-color: rgba(78,168,222,0.3);
-      }
-      .${PANEL_CLASS}-actions button.primary:hover { background: rgba(78,168,222,0.35); }
-      .${PANEL_CLASS}-actions button.success {
-        background: rgba(42,157,143,0.2);
-        color: #2a9d8f;
-        border-color: rgba(42,157,143,0.3);
-      }
-      .${PANEL_CLASS}-actions button.success:hover { background: rgba(42,157,143,0.35); }
-
-      .${PANEL_CLASS}-spinner {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding: 16px 0;
-        justify-content: center;
-        color: #888;
-        font-size: 13px;
-      }
-      .${PANEL_CLASS}-spinner::before {
-        content: '';
-        width: 18px;
-        height: 18px;
-        border: 2px solid rgba(78,168,222,0.3);
-        border-top-color: #4ea8de;
-        border-radius: 50%;
-        animation: accessify-alt-spin 0.6s linear infinite;
-      }
-
-      .${PANEL_CLASS}-error {
-        padding: 10px;
-        background: rgba(220,53,69,0.12);
-        border: 1px solid rgba(220,53,69,0.3);
-        border-radius: 8px;
-        color: #f0a0a8;
-        font-size: 13px;
-        margin-bottom: 10px;
-      }
-
-      @keyframes accessify-alt-fade-in {
-        from { opacity: 0; transform: translateY(4px); }
-        to { opacity: 1; transform: translateY(0); }
-      }
-      @keyframes accessify-alt-spin {
-        to { transform: rotate(360deg); }
-      }
-    `;
-  }
-  function injectStyles() {
-    if (document.getElementById(STYLE_ID)) return;
-    styleEl = document.createElement("style");
-    styleEl.id = STYLE_ID;
-    styleEl.textContent = getStyles();
-    document.head.appendChild(styleEl);
-  }
-  function removeStyles() {
-    styleEl?.remove();
-    styleEl = null;
-    document.getElementById(STYLE_ID)?.remove();
-  }
-  function scanForMissingAlt() {
-    const allImages = document.querySelectorAll("img");
-    const missing = [];
-    allImages.forEach((img) => {
-      if (img.closest("#accessify-root")) return;
-      if (img.width < 20 || img.height < 20) return;
-      const alt = img.getAttribute("alt");
-      if (alt === null || alt.trim() === "") {
-        missing.push(img);
-      }
-    });
-    return missing;
-  }
-  function highlightImages() {
-    missingAltImages = scanForMissingAlt();
-    missingAltImages.forEach((img) => {
-      img.classList.add(HIGHLIGHT_CLASS);
-      if (processedImages.has(img) && processedImages.get(img).applied) {
-        img.classList.add("accessify-alt-processed");
-      }
-      img.addEventListener("click", handleImageClick);
-    });
-    updateBadge();
-  }
-  function removeHighlights() {
-    missingAltImages.forEach((img) => {
-      img.classList.remove(HIGHLIGHT_CLASS, "accessify-alt-processed");
-      img.removeEventListener("click", handleImageClick);
-    });
-    missingAltImages = [];
-  }
-  function updateBadge() {
-    removeBadge();
-    const remaining = missingAltImages.filter(
-      (img) => !processedImages.has(img) || !processedImages.get(img).applied
-    ).length;
-    if (remaining === 0 && missingAltImages.length > 0) {
-      showBadge(
-        lang.startsWith("de") ? "Alle Bilder haben Alt-Text!" : "All images have alt text!",
-        "#2a9d8f",
-        0
-      );
-      return;
-    }
-    if (remaining === 0) return;
-    showBadge(
-      lang.startsWith("de") ? `${remaining} ${remaining === 1 ? "Bild" : "Bilder"} ohne Alt-Text` : `${remaining} ${remaining === 1 ? "image" : "images"} missing alt text`,
-      "#e63946",
-      remaining
-    );
-  }
-  function showBadge(text, color, count) {
-    const badge = document.createElement("div");
-    badge.className = BADGE_CLASS;
-    badge.setAttribute("role", "status");
-    badge.setAttribute("aria-live", "polite");
-    if (count > 0) {
-      const countEl = document.createElement("span");
-      countEl.className = `${BADGE_CLASS}-count`;
-      countEl.style.background = color;
-      countEl.textContent = String(count);
-      badge.appendChild(countEl);
-    }
-    const label = document.createElement("span");
-    label.textContent = text;
-    badge.appendChild(label);
-    document.body.appendChild(badge);
-    badgeEl = badge;
-  }
-  function removeBadge() {
-    badgeEl?.remove();
-    badgeEl = null;
-  }
-  function handleImageClick(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    const img = e.currentTarget;
-    showAltTextPanel(img);
-  }
-  function showAltTextPanel(img) {
-    removeActivePanel();
-    const panel = document.createElement("div");
-    panel.className = PANEL_CLASS;
-    panel.setAttribute("role", "dialog");
-    panel.setAttribute("aria-label", lang.startsWith("de") ? "Alt-Text erzeugen" : "Generate Alt Text");
-    const imgRect = img.getBoundingClientRect();
-    const top = imgRect.bottom + window.scrollY + 8;
-    const left = Math.min(
-      Math.max(8, imgRect.left + window.scrollX),
-      window.innerWidth - 380
-    );
-    panel.style.top = `${top}px`;
-    panel.style.left = `${left}px`;
-    const header = document.createElement("div");
-    header.className = `${PANEL_CLASS}-header`;
-    const title = document.createElement("h3");
-    title.textContent = lang.startsWith("de") ? "Alt-Text erzeugen" : "Generate Alt Text";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = `${PANEL_CLASS}-close`;
-    closeBtn.setAttribute("aria-label", lang.startsWith("de") ? "Schließen" : "Close");
-    closeBtn.innerHTML = "&times;";
-    closeBtn.addEventListener("click", () => removeActivePanel());
-    header.appendChild(title);
-    header.appendChild(closeBtn);
-    panel.appendChild(header);
-    const disclaimer = document.createElement("div");
-    disclaimer.className = `${PANEL_CLASS}-disclaimer`;
-    disclaimer.textContent = lang.startsWith("de") ? "KI-generiert – bitte überprüfen" : "AI-generated – please review";
-    panel.appendChild(disclaimer);
-    const preview = document.createElement("img");
-    preview.className = `${PANEL_CLASS}-preview`;
-    preview.src = img.src;
-    preview.alt = "Preview of image being described";
-    panel.appendChild(preview);
-    const existing = processedImages.get(img);
-    if (existing && existing.generatedAlt) {
-      renderEditableResult(panel, img, existing.generatedAlt, existing.applied);
-    } else {
-      generateAndShow(panel, img);
-    }
-    document.body.appendChild(panel);
-    activePanelEl = panel;
-    closeBtn.focus();
-    const handleEsc = (e) => {
-      if (e.key === "Escape") {
-        removeActivePanel();
-        document.removeEventListener("keydown", handleEsc);
-      }
-    };
-    document.addEventListener("keydown", handleEsc);
-  }
-  async function generateAndShow(panel, img) {
-    if (!aiService) {
-      showPanelError(
-        panel,
-        lang.startsWith("de") ? "Bitte konfigurieren Sie einen OpenRouter API-Schlüssel, um KI-generierte Bildbeschreibungen zu nutzen." : "Please configure an OpenRouter API key to use AI alt-text generation."
-      );
-      return;
-    }
-    const spinner = document.createElement("div");
-    spinner.className = `${PANEL_CLASS}-spinner`;
-    spinner.textContent = lang.startsWith("de") ? "Alt-Text wird erzeugt..." : "Generating alt text...";
-    panel.appendChild(spinner);
-    try {
-      const context = gatherImageContext(img);
-      const altText = await aiService.generateAltText(img.src, context);
-      spinner.remove();
-      if (!altText) {
-        showPanelError(
-          panel,
-          lang.startsWith("de") ? "Keine Beschreibung erhalten. Bitte versuchen Sie es erneut." : "No description received. Please try again."
-        );
-        return;
-      }
-      processedImages.set(img, {
-        element: img,
-        generatedAlt: altText,
-        applied: false
-      });
-      renderEditableResult(panel, img, altText, false);
-    } catch (err) {
-      spinner.remove();
-      if (err instanceof RateLimitError) {
-        showPanelError(
-          panel,
-          lang.startsWith("de") ? "Kostenlose API-Grenze erreicht. Bitte versuchen Sie es in einer Minute erneut oder hinterlegen Sie einen eigenen API-Schlüssel." : "Free tier rate limit reached. Please try again in a minute or configure your own API key."
-        );
-      } else {
-        const msg = err?.message || "";
-        const is401 = msg.includes("401");
-        showPanelError(
-          panel,
-          is401 ? lang.startsWith("de") ? "OpenRouter API-Schlüssel fehlt oder ungültig. Erstellen Sie einen kostenlosen Key auf openrouter.ai und übergeben Sie ihn als openRouterKey in der Widget-Konfiguration." : "OpenRouter API key missing or invalid. Create a free key at openrouter.ai and pass it as openRouterKey in the widget config." : lang.startsWith("de") ? "Fehler beim Erzeugen des Alt-Texts. Bitte versuchen Sie es erneut." : "Error generating alt text. Please try again."
-        );
-      }
-    }
-  }
-  function renderEditableResult(panel, img, altText, alreadyApplied) {
-    panel.querySelectorAll(
-      `.${PANEL_CLASS}-textarea, .${PANEL_CLASS}-actions, .${PANEL_CLASS}-error, .${PANEL_CLASS}-spinner`
-    ).forEach((el) => el.remove());
-    const textarea = document.createElement("textarea");
-    textarea.className = `${PANEL_CLASS}-textarea`;
-    textarea.value = altText;
-    textarea.readOnly = true;
-    textarea.setAttribute("aria-label", lang.startsWith("de") ? "Alt-Text Beschreibung" : "Alt text description");
-    panel.appendChild(textarea);
-    const actions = document.createElement("div");
-    actions.className = `${PANEL_CLASS}-actions`;
-    const editBtn = document.createElement("button");
-    editBtn.textContent = lang.startsWith("de") ? "Bearbeiten" : "Edit";
-    editBtn.addEventListener("click", () => {
-      textarea.readOnly = !textarea.readOnly;
-      if (!textarea.readOnly) {
-        textarea.focus();
-        editBtn.textContent = lang.startsWith("de") ? "Fertig" : "Done";
-      } else {
-        editBtn.textContent = lang.startsWith("de") ? "Bearbeiten" : "Edit";
-        const entry = processedImages.get(img);
-        if (entry) entry.generatedAlt = textarea.value;
-      }
-    });
-    const regenBtn = document.createElement("button");
-    regenBtn.textContent = lang.startsWith("de") ? "Neu erzeugen" : "Regenerate";
-    regenBtn.addEventListener("click", () => {
-      processedImages.delete(img);
-      textarea.remove();
-      actions.remove();
-      generateAndShow(panel, img);
-    });
-    const applyBtn = document.createElement("button");
-    applyBtn.classList.add(alreadyApplied ? "success" : "primary");
-    applyBtn.textContent = alreadyApplied ? lang.startsWith("de") ? "Angewendet" : "Applied" : lang.startsWith("de") ? "Übernehmen" : "Apply";
-    applyBtn.addEventListener("click", () => {
-      const finalText = textarea.value.trim();
-      if (!finalText) return;
-      img.alt = finalText;
-      img.setAttribute("alt", finalText);
-      const entry = processedImages.get(img) || {
-        element: img,
-        generatedAlt: finalText,
-        applied: false
-      };
-      entry.applied = true;
-      entry.generatedAlt = finalText;
-      processedImages.set(img, entry);
-      img.classList.add("accessify-alt-processed");
-      applyBtn.classList.remove("primary");
-      applyBtn.classList.add("success");
-      applyBtn.textContent = lang.startsWith("de") ? "Angewendet!" : "Applied!";
-      updateBadge();
-      setTimeout(() => removeActivePanel(), 1200);
-    });
-    actions.appendChild(editBtn);
-    actions.appendChild(regenBtn);
-    actions.appendChild(applyBtn);
-    panel.appendChild(actions);
-  }
-  function showPanelError(panel, message) {
-    const errorEl = document.createElement("div");
-    errorEl.className = `${PANEL_CLASS}-error`;
-    errorEl.setAttribute("role", "alert");
-    errorEl.textContent = message;
-    panel.appendChild(errorEl);
-  }
-  function removeActivePanel() {
-    activePanelEl?.remove();
-    activePanelEl = null;
-  }
-  function gatherImageContext(img) {
-    const parts = [];
-    if (img.title) parts.push(`Title: ${img.title}`);
-    try {
-      const url = new URL(img.src, window.location.href);
-      const filename = url.pathname.split("/").pop();
-      if (filename) parts.push(`Filename: ${filename}`);
-    } catch {
-    }
-    const figure = img.closest("figure");
-    if (figure) {
-      const caption = figure.querySelector("figcaption");
-      if (caption?.textContent?.trim()) {
-        parts.push(`Caption: ${caption.textContent.trim()}`);
-      }
-    }
-    const parent = img.parentElement;
-    if (parent) {
-      const heading = parent.querySelector("h1, h2, h3, h4, h5, h6");
-      if (heading?.textContent?.trim()) {
-        parts.push(`Nearby heading: ${heading.textContent.trim()}`);
-      }
-    }
-    const describedBy = img.getAttribute("aria-describedby");
-    if (describedBy) {
-      const descEl = document.getElementById(describedBy);
-      if (descEl?.textContent?.trim()) {
-        parts.push(`Description: ${descEl.textContent.trim()}`);
-      }
-    }
-    return parts.join(". ");
-  }
-  function activate() {
-    if (enabled) return;
-    enabled = true;
-    injectStyles();
-    highlightImages();
-  }
-  function deactivate() {
-    enabled = false;
-    removeActivePanel();
-    removeHighlights();
-    removeBadge();
-    removeStyles();
-  }
-  return {
-    id: "alt-text",
-    name: () => lang.startsWith("de") ? "Alt-Text erzeugen" : "Alt-Text Generator",
-    description: lang.startsWith("de") ? "Bildbeschreibungen automatisch erstellen" : "Auto-generate image descriptions",
-    icon: "alt-text",
-    category: "ai",
-    activate,
-    deactivate,
-    getState: () => ({
-      id: "alt-text",
-      enabled,
-      value: {
-        missingCount: missingAltImages.length,
-        processedCount: processedImages.size,
-        appliedCount: [...processedImages.values()].filter((p) => p.applied).length
-      }
-    })
-  };
-}
-export {
-  createAltTextModule as default
-};
-//# sourceMappingURL=alt-text-CgzNGvdT.js.map