accessify-widget 0.2.22 → 0.3.0

package/dist/{index-B9BgMU66.js → index-BiF0o7li.js}

@@ -3441,6 +3441,13 @@ function from_namespace(content, flags2, ns = "svg") {
 function from_svg(content, flags2) {
   return /* @__PURE__ */ from_namespace(content, flags2, "svg");
 }
+function text(value = "") {
+  {
+    var t2 = create_text(value + "");
+    assign_nodes(t2, t2);
+    return t2;
+  }
+}
 function append(anchor, dom) {
   if (anchor === null) {
     return;
@@ -3450,11 +3457,11 @@ function append(anchor, dom) {
     dom
   );
 }
-function set_text(text, value) {
+function set_text(text2, value) {
   var str = value == null ? "" : typeof value === "object" ? `${value}` : value;
-  if (str !== (text.__t ?? (text.__t = text.nodeValue))) {
-    text.__t = str;
-    text.nodeValue = `${str}`;
+  if (str !== (text2.__t ?? (text2.__t = text2.nodeValue))) {
+    text2.__t = str;
+    text2.nodeValue = `${str}`;
   }
 }
 function mount(component, options) {
@@ -4794,7 +4801,16 @@ const deJson = {
   "footer.disclaimer": "Dieses Widget verbessert die Barrierefreiheit, ersetzt aber keine barrierefreie Webentwicklung.",
   "footer.docs": "Dokumentation",
   "footer.github": "GitHub",
-  "bfsg.notice": "Hinweis: Dieses Overlay-Tool allein erfüllt nicht die Anforderungen des BFSG. Professionelle Barrierefreiheit erfordert strukturelle Änderungen am Quellcode."
+  "bfsg.notice": "Hinweis: Dieses Overlay-Tool allein erfüllt nicht die Anforderungen des BFSG. Professionelle Barrierefreiheit erfordert strukturelle Änderungen am Quellcode.",
+  "widget.minimize": "Minimieren",
+  "widget.dockLeft": "Links andocken",
+  "widget.dockRight": "Rechts andocken",
+  "widget.widgetLang": "Widget-Sprache",
+  "widget.translatePage": "Seite übersetzen",
+  "widget.selectLang": "Sprache wählen...",
+  "widget.restoreOriginal": "Original wiederherstellen",
+  "widget.translating": "Seite wird übersetzt",
+  "widget.originalRestored": "Originalsprache wiederhergestellt"
 };
 const enJson = {
   "widget.title": "Accessibility",
@@ -4883,7 +4899,16 @@ const enJson = {
   "footer.disclaimer": "This widget enhances accessibility but does not replace accessible web development.",
   "footer.docs": "Documentation",
   "footer.github": "GitHub",
-  "bfsg.notice": "Note: This overlay tool alone does not meet BFSG requirements. Full accessibility requires structural changes to the source code."
+  "bfsg.notice": "Note: This overlay tool alone does not meet BFSG requirements. Full accessibility requires structural changes to the source code.",
+  "widget.minimize": "Minimize",
+  "widget.dockLeft": "Dock left",
+  "widget.dockRight": "Dock right",
+  "widget.widgetLang": "Widget Language",
+  "widget.translatePage": "Translate Page",
+  "widget.selectLang": "Select language...",
+  "widget.restoreOriginal": "Restore original",
+  "widget.translating": "Translating page",
+  "widget.originalRestored": "Original language restored"
 };
 const EN_BASE = {
   ...enJson,
@@ -5758,10 +5783,11 @@ function t(key, lang = "en") {
   const resolved = getSupportedLang(lang);
   return locales[resolved]?.[key] || EN_BASE[key] || key;
 }
-var root$5 = /* @__PURE__ */ from_html(`<button></button>`);
+var root_1$4 = /* @__PURE__ */ from_html(`<span class="accessify-trigger-badge" aria-hidden="true"> </span>`);
+var root$5 = /* @__PURE__ */ from_html(`<button><!> <!></button>`);
 function TriggerButton($$anchor, $$props) {
   push($$props, true);
-  let lang = prop($$props, "lang", 3, "en"), el = prop($$props, "el", 15, null);
+  let isMinimized = prop($$props, "isMinimized", 3, false), activeCount = prop($$props, "activeCount", 3, 0), lang = prop($$props, "lang", 3, "en"), el = prop($$props, "el", 15, null);
   let isDragging = /* @__PURE__ */ state(false);
   onMount(() => {
     const btn = el();
@@ -5773,7 +5799,6 @@ function TriggerButton($$anchor, $$props) {
     let hasMoved = false;
     let pointerId = null;
     function onDown(e) {
-      if ($$props.isOpen) return;
       const rect = btn.getBoundingClientRect();
       dragStartX = e.clientX;
       dragStartY = e.clientY;
@@ -5822,12 +5847,29 @@ function TriggerButton($$anchor, $$props) {
   });
   var button = root$5();
   let classes;
-  html(button, () => $$props.isOpen ? iconClose() : iconAccessibility(), true);
+  var node = child(button);
+  html(node, iconAccessibility);
+  var node_1 = sibling(node, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_1$4();
+      var text2 = child(span);
+      template_effect(() => set_text(text2, activeCount()));
+      append($$anchor2, span);
+    };
+    if_block(node_1, ($$render) => {
+      if (activeCount() > 0 && !$$props.isOpen) $$render(consequent);
+    });
+  }
   bind_this(button, ($$value) => el($$value), () => el());
   template_effect(
     ($0) => {
-      classes = set_class(button, 1, "accessify-trigger", null, classes, { "accessify-trigger--dragging": get(isDragging) });
-      set_attribute(button, "aria-expanded", $$props.isOpen);
+      classes = set_class(button, 1, "accessify-trigger", null, classes, {
+        "accessify-trigger--dragging": get(isDragging),
+        "accessify-trigger--hidden": $$props.isOpen && !isMinimized(),
+        "accessify-trigger--minimized": isMinimized()
+      });
+      set_attribute(button, "aria-expanded", $$props.isOpen && !isMinimized());
       set_attribute(button, "aria-label", $0);
     },
     [
@@ -5837,31 +5879,49 @@ function TriggerButton($$anchor, $$props) {
   append($$anchor, button);
   pop();
 }
-var root$4 = /* @__PURE__ */ from_html(`<header class="accessify-header"><div class="accessify-header-left"><span class="accessify-logo" aria-label="Accessify"><svg viewBox="0 0 480 80" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="0" y="64" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="72" font-weight="700" letter-spacing="-2">accessify</text></svg></span></div> <div class="accessify-header-actions"><button class="accessify-header-btn"></button> <button class="accessify-header-btn accessify-header-btn--icon accessify-header-btn--close"></button></div></header>`);
+var root$4 = /* @__PURE__ */ from_html(`<header class="accessify-header"><div class="accessify-header-left"><span class="accessify-logo" aria-label="Accessify"><svg viewBox="0 0 480 80" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><text x="0" y="64" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="72" font-weight="700" letter-spacing="-2">accessify</text></svg></span></div> <div class="accessify-header-actions"><div class="accessify-dock-group" role="radiogroup"><button class="accessify-dock-btn" role="radio"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="2" width="4" height="12" rx="1"></rect><rect x="1" y="2" width="14" height="12" rx="2" stroke-dasharray="2 2"></rect></svg></button> <button class="accessify-dock-btn" role="radio"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="11" y="2" width="4" height="12" rx="1"></rect><rect x="1" y="2" width="14" height="12" rx="2" stroke-dasharray="2 2"></rect></svg></button></div> <button class="accessify-header-btn"></button> <button class="accessify-header-btn accessify-header-btn--icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg></button> <button class="accessify-header-btn accessify-header-btn--icon accessify-header-btn--close"></button></div></header>`);
 function PanelHeader($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
   prop($$props, "activeCount", 3, 0);
+  let currentDock = prop($$props, "currentDock", 3, "right");
   var header = root$4();
   var div = sibling(child(header), 2);
-  var button = child(div);
-  html(button, iconReset, true);
+  var div_1 = child(div);
+  var button = child(div_1);
   var button_1 = sibling(button, 2);
-  html(button_1, iconClose, true);
+  var button_2 = sibling(div_1, 2);
+  html(button_2, iconReset, true);
+  var button_3 = sibling(button_2, 2);
+  var button_4 = sibling(button_3, 2);
+  html(button_4, iconClose, true);
   template_effect(
     ($0, $1) => {
-      set_attribute(button, "aria-label", $0);
-      set_attribute(button_1, "aria-label", $1);
+      set_attribute(div_1, "aria-label", lang() === "de" ? "Panel-Position" : "Panel position");
+      set_attribute(button, "aria-checked", currentDock() === "left");
+      set_attribute(button, "aria-label", lang() === "de" ? "Links andocken" : "Dock left");
+      set_attribute(button, "data-active", currentDock() === "left");
+      set_attribute(button_1, "aria-checked", currentDock() === "right");
+      set_attribute(button_1, "aria-label", lang() === "de" ? "Rechts andocken" : "Dock right");
+      set_attribute(button_1, "data-active", currentDock() === "right");
+      set_attribute(button_2, "aria-label", $0);
+      set_attribute(button_3, "aria-label", lang() === "de" ? "Minimieren" : "Minimize");
+      set_attribute(button_4, "aria-label", $1);
     },
     [
       () => t("widget.reset", lang()),
       () => t("widget.close", lang())
     ]
   );
-  delegated("click", button, function(...$$args) {
+  delegated("click", button, () => $$props.ondockchange("left"));
+  delegated("click", button_1, () => $$props.ondockchange("right"));
+  delegated("click", button_2, function(...$$args) {
     $$props.onreset?.apply(this, $$args);
   });
-  delegated("click", button_1, function(...$$args) {
+  delegated("click", button_3, function(...$$args) {
+    $$props.onminimize?.apply(this, $$args);
+  });
+  delegated("click", button_4, function(...$$args) {
     $$props.onclose?.apply(this, $$args);
   });
   append($$anchor, header);
@@ -5925,7 +5985,7 @@ function ProfileSection($$anchor, $$props) {
   var button = child(div);
   var span = child(button);
   var span_1 = sibling(child(span), 2);
-  var text = child(span_1);
+  var text2 = child(span_1);
   var svg = sibling(span, 2);
   let classes;
   var node = sibling(button, 2);
@@ -5978,7 +6038,7 @@ function ProfileSection($$anchor, $$props) {
     ($0, $1) => {
       set_attribute(div, "aria-label", $0);
       set_attribute(button, "aria-expanded", get(isOpen));
-      set_text(text, $1);
+      set_text(text2, $1);
       classes = set_class(svg, 0, "accessify-accordion-chevron", null, classes, { "accessify-accordion-chevron--open": get(isOpen) });
     },
     [
@@ -6015,8 +6075,8 @@ function createProxyService(siteKey, proxyUrl) {
     "X-Site-Key": siteKey
   };
   return {
-    async simplifyText(text, level = "einfache", lang = "de") {
-      const blockId = `b-${simpleHash(text)}`;
+    async simplifyText(text2, level = "einfache", lang = "de") {
+      const blockId = `b-${simpleHash(text2)}`;
       const variant = lang.startsWith("de") ? `de-${level}` : "en-plain";
       try {
         const cacheRes = await fetch(`${base}/v1/cache/query`, {
@@ -6026,7 +6086,7 @@ function createProxyService(siteKey, proxyUrl) {
             pageUrl: typeof window !== "undefined" ? window.location.href : "",
             feature: "simplify",
             variant,
-            blocks: [{ id: blockId, text }]
+            blocks: [{ id: blockId, text: text2 }]
           })
         });
         if (cacheRes.ok) {
@@ -6043,7 +6103,7 @@ function createProxyService(siteKey, proxyUrl) {
             pageUrl: typeof window !== "undefined" ? window.location.href : "",
             feature: "simplify",
             variant,
-            blocks: [{ id: blockId, text }]
+            blocks: [{ id: blockId, text: text2 }]
           })
         });
         if (processRes.ok) {
@@ -6055,7 +6115,7 @@ function createProxyService(siteKey, proxyUrl) {
       const res = await fetch(`${base}/v1/ai/simplify`, {
         method: "POST",
         headers,
-        body: JSON.stringify({ text, level, lang })
+        body: JSON.stringify({ text: text2, level, lang })
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
@@ -6122,7 +6182,7 @@ function createDirectService(config2) {
     "X-Title": "Accessify Widget"
   };
   return {
-    async simplifyText(text, level = "einfache", lang = "de") {
+    async simplifyText(text2, level = "einfache", lang = "de") {
       const systemPrompt = lang.startsWith("de") ? getGermanSimplificationPrompt(level) : getEnglishSimplificationPrompt();
       const response = await fetch(`${OPENROUTER_BASE}/chat/completions`, {
         method: "POST",
@@ -6131,7 +6191,7 @@ function createDirectService(config2) {
           model: config2.textModel || DEFAULTS.textModel,
           messages: [
             { role: "system", content: systemPrompt },
-            { role: "user", content: text }
+            { role: "user", content: text2 }
           ],
           stream: false,
           max_tokens: 2e3
@@ -6351,14 +6411,14 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-cvuhPLSY.js"),
+    "keyboard-nav": () => import("./keyboard-nav-CE8luwx_.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
     "animation-stop": () => import("./animation-stop-C0MwseK0.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-XImoLRLq.js"),
+    "page-structure": () => import("./page-structure-C25HU_D7.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6509,7 +6569,7 @@ function FeatureGrid($$anchor, $$props) {
       var span = child(div_1);
       html(span, () => getIcon("contrast"), true);
       var span_1 = sibling(span, 2);
-      var text = child(span_1);
+      var text2 = child(span_1);
       var div_2 = sibling(div_1, 2);
       each(div_2, 21, () => CONTRAST_MODES, index, ($$anchor3, mode) => {
         var button = root_2$1();
@@ -6531,7 +6591,7 @@ function FeatureGrid($$anchor, $$props) {
       template_effect(
         ($0, $1) => {
           set_attribute(div, "aria-label", $0);
-          set_text(text, $1);
+          set_text(text2, $1);
         },
         [
           () => t("feature.contrast", $$props.config.lang),
@@ -6636,35 +6696,57 @@ function FeatureGrid($$anchor, $$props) {
 }
 delegate(["click"]);
 var root_1$1 = /* @__PURE__ */ from_html(`<span aria-hidden="true">&middot;</span> <a target="_blank" rel="noopener noreferrer"> </a>`, 1);
-var root$1 = /* @__PURE__ */ from_html(`<div class="accessify-footer"><a target="_blank" rel="noopener noreferrer">Accessify Dashboard</a> <!></div>`);
+var root$1 = /* @__PURE__ */ from_html(`<div class="accessify-utility-bar"><button class="accessify-utility-btn accessify-utility-btn--minimize"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg> <span> </span></button> <button class="accessify-utility-btn accessify-utility-btn--close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> <span> </span></button></div> <div class="accessify-footer"><a target="_blank" rel="noopener noreferrer">Accessify Dashboard</a> <!></div>`, 1);
 function PanelFooter($$anchor, $$props) {
   push($$props, true);
   let lang = prop($$props, "lang", 3, "en");
-  var div = root$1();
-  var a = child(div);
+  var fragment = root$1();
+  var div = first_child(fragment);
+  var button = child(div);
+  var span = sibling(child(button), 2);
+  var text2 = child(span);
+  var button_1 = sibling(button, 2);
+  var span_1 = sibling(child(button_1), 2);
+  var text_1 = child(span_1);
+  var div_1 = sibling(div, 2);
+  var a = child(div_1);
   var node = sibling(a, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_1$1();
-      var a_1 = sibling(first_child(fragment), 2);
-      var text = child(a_1);
+      var fragment_1 = root_1$1();
+      var a_1 = sibling(first_child(fragment_1), 2);
+      var text_2 = child(a_1);
       template_effect(
         ($0) => {
           set_attribute(a_1, "href", $$props.statementUrl);
-          set_text(text, $0);
+          set_text(text_2, $0);
         },
         [() => t("widget.statement", lang())]
       );
-      append($$anchor2, fragment);
+      append($$anchor2, fragment_1);
     };
     if_block(node, ($$render) => {
       if ($$props.statementUrl) $$render(consequent);
     });
   }
-  template_effect(() => set_attribute(a, "href", $$props.dashboardUrl || "https://accessify-dashboard.pages.dev"));
-  append($$anchor, div);
+  template_effect(
+    ($0) => {
+      set_text(text2, lang() === "de" ? "Minimieren" : "Minimize");
+      set_text(text_1, $0);
+      set_attribute(a, "href", $$props.dashboardUrl || "https://accessify-dashboard.pages.dev");
+    },
+    [() => t("widget.close", lang())]
+  );
+  delegated("click", button, function(...$$args) {
+    $$props.onminimize?.apply(this, $$args);
+  });
+  delegated("click", button_1, function(...$$args) {
+    $$props.onclose?.apply(this, $$args);
+  });
+  append($$anchor, fragment);
   pop();
 }
+delegate(["click"]);
 let savedTextNodes = [];
 let savedAttrs = [];
 let currentTranslateLang = null;
@@ -6684,13 +6766,13 @@ const TRANSLATABLE_ATTRS = [
   "aria-valuetext"
 ];
 const TRANSLATE_URL = "https://translate.googleapis.com/translate_a/single";
-async function translateSingleText(text, sourceLang, targetLang) {
+async function translateSingleText(text2, sourceLang, targetLang) {
   const params = new URLSearchParams({
     client: "gtx",
     sl: sourceLang,
     tl: targetLang,
     dt: "t",
-    q: text
+    q: text2
   });
   try {
     const res = await fetch(`${TRANSLATE_URL}?${params.toString()}`);
@@ -6705,9 +6787,9 @@ async function translateSingleText(text, sourceLang, targetLang) {
       }
       return parts.join("");
     }
-    return text;
+    return text2;
   } catch {
-    return text;
+    return text2;
   }
 }
 async function translateTexts(texts, sourceLang, targetLang) {
@@ -6716,7 +6798,7 @@ async function translateTexts(texts, sourceLang, targetLang) {
   for (let start = 0; start < texts.length; start += CONCURRENCY) {
     const batch = texts.slice(start, start + CONCURRENCY);
     const translated = await Promise.all(
-      batch.map((text) => translateSingleText(text, sourceLang, targetLang))
+      batch.map((text2) => translateSingleText(text2, sourceLang, targetLang))
     );
     for (let j = 0; j < translated.length; j++) {
       results[start + j] = translated[j];
@@ -6791,9 +6873,9 @@ async function translatePage(targetLang) {
   if (uniqueTexts.length === 0) return;
   const translated = await translateTexts(uniqueTexts, pageLang, targetLang);
   const lookup = /* @__PURE__ */ new Map();
-  uniqueTexts.forEach((text, i) => {
-    if (translated[i] && translated[i] !== text) {
-      lookup.set(text, translated[i]);
+  uniqueTexts.forEach((text2, i) => {
+    if (translated[i] && translated[i] !== text2) {
+      lookup.set(text2, translated[i]);
     }
   });
   observerPaused = true;
@@ -6936,12 +7018,17 @@ function createTextTransformService() {
 }
 var root_3 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>`);
 var root_2 = /* @__PURE__ */ from_html(`<button class="accessify-lang-option" role="option"><span> </span> <!></button>`);
-var root_1 = /* @__PURE__ */ from_html(`<div class="accessify-lang-list" role="listbox"></div>`);
-var root = /* @__PURE__ */ from_html(`<div class="sr-only" role="status" aria-live="polite" aria-atomic="true"> </div> <!> <div class="accessify-panel" role="dialog"><!> <div class="accessify-body"><div class="accessify-lang-dropdown"><button class="accessify-lang-toggle"><span class="accessify-lang-toggle-left"><!> <span> </span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <!></div> <div class="accessify-section-divider"></div> <!> <div class="accessify-section-divider"></div> <!></div> <!></div>`, 1);
+var root_1 = /* @__PURE__ */ from_html(`<div id="accessify-widget-lang-list" class="accessify-lang-list" role="listbox"></div>`);
+var root_6 = /* @__PURE__ */ from_html(`<div class="accessify-translate-status"><span> </span> <button class="accessify-translate-restore"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> <span> </span></button></div>`);
+var root_9 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>`);
+var root_8 = /* @__PURE__ */ from_html(`<button class="accessify-lang-option" role="option"><span> </span> <!></button>`);
+var root_7 = /* @__PURE__ */ from_html(`<div id="accessify-translate-lang-list" class="accessify-lang-list" role="listbox"></div>`);
+var root = /* @__PURE__ */ from_html(`<div class="sr-only" role="status" aria-live="polite" aria-atomic="true"> </div> <!> <div role="dialog"><!> <div class="accessify-body"><div class="accessify-control-section"><span class="accessify-section-label"> </span> <div class="accessify-lang-dropdown"><button class="accessify-lang-toggle" aria-controls="accessify-widget-lang-list"><span class="accessify-lang-toggle-left"><!> <span> </span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <!></div></div> <div class="accessify-control-section"><span class="accessify-section-label"> </span> <div class="accessify-lang-dropdown"><button aria-controls="accessify-translate-lang-list"><span class="accessify-lang-toggle-left"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg> <span><!></span></span> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></button> <!> <!></div></div> <div class="accessify-section-divider"></div> <!> <div class="accessify-section-divider"></div> <!></div> <!></div>`, 1);
 function WidgetApp($$anchor, $$props) {
   push($$props, true);
   let config2 = prop($$props, "config", 7);
   let isOpen = /* @__PURE__ */ state(false);
+  let isMinimized = /* @__PURE__ */ state(false);
   let activeFeatures = /* @__PURE__ */ state(proxy(/* @__PURE__ */ new Map()));
   let currentTheme = /* @__PURE__ */ state("light");
   let panelEl = /* @__PURE__ */ state(null);
@@ -6949,11 +7036,93 @@ function WidgetApp($$anchor, $$props) {
   let announcement = /* @__PURE__ */ state("");
   let widgetLang = /* @__PURE__ */ state("en");
   let activeProfileId = /* @__PURE__ */ state(null);
-  let langDropdownOpen = /* @__PURE__ */ state(false);
+  let widgetLangDropdownOpen = /* @__PURE__ */ state(false);
+  let translateDropdownOpen = /* @__PURE__ */ state(false);
+  let currentDock = /* @__PURE__ */ state("right");
+  let pageTranslateActive = /* @__PURE__ */ state(false);
+  let pageTranslateLang = /* @__PURE__ */ state(null);
   const textTransformService = createTextTransformService();
   const STORAGE_KEY = "accessify-prefs";
+  const DOCK_KEY = "accessify-dock";
   let activeCount = /* @__PURE__ */ user_derived(() => Array.from(get(activeFeatures).values()).filter(Boolean).length);
   let currentLangOption = /* @__PURE__ */ user_derived(() => LANGUAGE_OPTIONS.find((o) => o.code === get(widgetLang)));
+  const TRANSLATE_LANGUAGES = [
+    {
+      code: "de",
+      flag: "🇩🇪",
+      label: "Deutsch"
+    },
+    {
+      code: "en",
+      flag: "🇬🇧",
+      label: "English"
+    },
+    {
+      code: "es",
+      flag: "🇪🇸",
+      label: "Español"
+    },
+    {
+      code: "fr",
+      flag: "🇫🇷",
+      label: "Français"
+    },
+    {
+      code: "it",
+      flag: "🇮🇹",
+      label: "Italiano"
+    },
+    {
+      code: "pt",
+      flag: "🇧🇷",
+      label: "Português"
+    },
+    {
+      code: "zh",
+      flag: "🇨🇳",
+      label: "中文"
+    },
+    {
+      code: "ja",
+      flag: "🇯🇵",
+      label: "日本語"
+    },
+    {
+      code: "ko",
+      flag: "🇰🇷",
+      label: "한국어"
+    },
+    {
+      code: "ar",
+      flag: "🇸🇦",
+      label: "العربية"
+    },
+    {
+      code: "ru",
+      flag: "🇷🇺",
+      label: "Русский"
+    },
+    {
+      code: "tr",
+      flag: "🇹🇷",
+      label: "Türkçe"
+    },
+    {
+      code: "pl",
+      flag: "🇵🇱",
+      label: "Polski"
+    },
+    {
+      code: "hi",
+      flag: "🇮🇳",
+      label: "हिन्दी"
+    },
+    {
+      code: "sv",
+      flag: "🇸🇪",
+      label: "Svenska"
+    }
+  ];
   function announce(message) {
     set(announcement, "");
     requestAnimationFrame(() => {
@@ -6967,6 +7136,12 @@ function WidgetApp($$anchor, $$props) {
         const prefs = JSON.parse(saved);
         set(activeFeatures, new Map(Object.entries(prefs)), true);
       }
+      const dock = localStorage.getItem(DOCK_KEY);
+      if (dock === "left" || dock === "right") {
+        set(currentDock, dock, true);
+      } else {
+        set(currentDock, config2().position?.includes("left") ? "left" : "right", true);
+      }
     } catch {
     }
   }
@@ -7011,6 +7186,7 @@ function WidgetApp($$anchor, $$props) {
   }
   function open() {
     set(isOpen, true);
+    set(isMinimized, false);
     requestAnimationFrame(() => {
       if (get(panelEl)) {
         const first = get(panelEl).querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -7020,12 +7196,40 @@ function WidgetApp($$anchor, $$props) {
   }
   function close() {
     set(isOpen, false);
-    const trigger = $$props.shadow.querySelector(".accessify-trigger");
-    trigger?.focus();
+    set(isMinimized, false);
+    set(widgetLangDropdownOpen, false);
+    set(translateDropdownOpen, false);
+    requestAnimationFrame(() => {
+      const trigger = $$props.shadow.querySelector(".accessify-trigger");
+      trigger?.focus();
+    });
+  }
+  function minimize() {
+    set(isOpen, false);
+    set(isMinimized, true);
+    set(widgetLangDropdownOpen, false);
+    set(translateDropdownOpen, false);
+    requestAnimationFrame(() => {
+      const trigger = $$props.shadow.querySelector(".accessify-trigger");
+      trigger?.focus();
+    });
   }
   function toggleOpen() {
-    if (get(isOpen)) close();
-    else open();
+    if (get(isOpen)) {
+      minimize();
+    } else {
+      open();
+    }
+  }
+  function handleDockChange(dock) {
+    set(currentDock, dock, true);
+    try {
+      localStorage.setItem(DOCK_KEY, dock);
+    } catch {
+    }
+    const newPos = dock === "left" ? config2().position?.replace("right", "left") || "bottom-left" : config2().position?.replace("left", "right") || "bottom-right";
+    config2().position = newPos;
+    window.dispatchEvent(new CustomEvent("accessify:reposition", { detail: { position: newPos } }));
   }
   function handleFeatureToggle(id, enabled) {
     get(activeFeatures).set(id, enabled);
@@ -7041,6 +7245,8 @@ function WidgetApp($$anchor, $$props) {
     set(activeProfileId, null);
     savePrefs();
     textTransformService.restore();
+    set(pageTranslateActive, false);
+    set(pageTranslateLang, null);
     window.dispatchEvent(new CustomEvent("accessify:reset"));
     announce(t("widget.resetConfirm", get(widgetLang)));
   }
@@ -7064,23 +7270,58 @@ function WidgetApp($$anchor, $$props) {
     savePrefs();
     announce(`${t(profile.nameKey, get(widgetLang))} ${t("status.activated", get(widgetLang))}`);
   }
-  function handleLangChange(newLang) {
+  function handleWidgetLangChange(newLang) {
     set(widgetLang, getSupportedLang(newLang), true);
     config2().lang = get(widgetLang);
-    set(langDropdownOpen, false);
+    set(widgetLangDropdownOpen, false);
     applyLanguage();
+    announce(get(widgetLang) === "de" ? `Widget-Sprache: ${get(currentLangOption)?.label}` : `Widget language: ${get(currentLangOption)?.label}`);
+  }
+  function handlePageTranslate(targetLang) {
     const pageLang = document.documentElement.lang?.split("-")[0] || "en";
-    if (get(widgetLang) !== pageLang) {
-      textTransformService.translate(get(widgetLang));
-    } else {
+    set(translateDropdownOpen, false);
+    if (get(pageTranslateLang) === targetLang) {
+      textTransformService.restore();
+      set(pageTranslateActive, false);
+      set(pageTranslateLang, null);
+      announce(get(widgetLang) === "de" ? "Originalsprache wiederhergestellt" : "Original language restored");
+      return;
+    }
+    if (targetLang === pageLang) {
       textTransformService.restore();
+      set(pageTranslateActive, false);
+      set(pageTranslateLang, null);
+      return;
     }
+    set(pageTranslateActive, true);
+    set(pageTranslateLang, targetLang, true);
+    textTransformService.translate(targetLang);
+    const langLabel = TRANSLATE_LANGUAGES.find((l) => l.code === targetLang)?.label || targetLang;
+    announce(get(widgetLang) === "de" ? `Seite wird übersetzt: ${langLabel}` : `Translating page: ${langLabel}`);
+  }
+  function restorePageTranslation() {
+    textTransformService.restore();
+    set(pageTranslateActive, false);
+    set(pageTranslateLang, null);
+    set(translateDropdownOpen, false);
   }
   function handleKeydown(e) {
-    if (e.key === "Escape" && get(isOpen)) {
-      e.preventDefault();
-      close();
-      return;
+    if (e.key === "Escape") {
+      if (get(widgetLangDropdownOpen)) {
+        set(widgetLangDropdownOpen, false);
+        e.preventDefault();
+        return;
+      }
+      if (get(translateDropdownOpen)) {
+        set(translateDropdownOpen, false);
+        e.preventDefault();
+        return;
+      }
+      if (get(isOpen)) {
+        e.preventDefault();
+        minimize();
+        return;
+      }
     }
     if (e.key === "Tab" && get(isOpen) && get(panelEl)) {
       const focusable = get(panelEl).querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -7108,12 +7349,18 @@ function WidgetApp($$anchor, $$props) {
   var fragment = root();
   event("keydown", $window, handleKeydown);
   var div = first_child(fragment);
-  var text = child(div);
+  var text$1 = child(div);
   var node = sibling(div, 2);
   TriggerButton(node, {
     get isOpen() {
       return get(isOpen);
     },
+    get isMinimized() {
+      return get(isMinimized);
+    },
+    get activeCount() {
+      return get(activeCount);
+    },
     get lang() {
       return get(widgetLang);
     },
@@ -7126,6 +7373,7 @@ function WidgetApp($$anchor, $$props) {
     }
   });
   var div_1 = sibling(node, 2);
+  let classes;
   var node_1 = child(div_1);
   PanelHeader(node_1, {
     get lang() {
@@ -7135,27 +7383,35 @@ function WidgetApp($$anchor, $$props) {
       return get(activeCount);
     },
     onclose: close,
-    onreset: resetAll
+    onreset: resetAll,
+    onminimize: minimize,
+    ondockchange: handleDockChange,
+    get currentDock() {
+      return get(currentDock);
+    }
   });
   var div_2 = sibling(node_1, 2);
   var div_3 = child(div_2);
-  var button = child(div_3);
-  var span = child(button);
-  var node_2 = child(span);
+  var span = child(div_3);
+  var text_1 = child(span);
+  var div_4 = sibling(span, 2);
+  var button = child(div_4);
+  var span_1 = child(button);
+  var node_2 = child(span_1);
   html(node_2, iconGlobe);
-  var span_1 = sibling(node_2, 2);
-  var text_1 = child(span_1);
-  var svg = sibling(span, 2);
-  let classes;
+  var span_2 = sibling(node_2, 2);
+  var text_2 = child(span_2);
+  var svg = sibling(span_1, 2);
+  let classes_1;
   var node_3 = sibling(button, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var div_4 = root_1();
-      each(div_4, 21, () => LANGUAGE_OPTIONS, index, ($$anchor3, option) => {
+      var div_5 = root_1();
+      each(div_5, 21, () => LANGUAGE_OPTIONS, index, ($$anchor3, option) => {
         var button_1 = root_2();
-        var span_2 = child(button_1);
-        var text_2 = child(span_2);
-        var node_4 = sibling(span_2, 2);
+        var span_3 = child(button_1);
+        var text_3 = child(span_3);
+        var node_4 = sibling(span_3, 2);
         {
           var consequent = ($$anchor4) => {
             var svg_1 = root_3();
@@ -7168,20 +7424,113 @@ function WidgetApp($$anchor, $$props) {
         template_effect(() => {
           set_attribute(button_1, "aria-selected", get(widgetLang) === get(option).code);
           set_attribute(button_1, "data-active", get(widgetLang) === get(option).code);
-          set_text(text_2, `${(get(option).flag || "") ?? ""} ${get(option).label ?? ""}`);
+          set_text(text_3, `${(get(option).flag || "") ?? ""} ${get(option).label ?? ""}`);
         });
-        delegated("click", button_1, () => handleLangChange(get(option).code));
+        delegated("click", button_1, () => handleWidgetLangChange(get(option).code));
         append($$anchor3, button_1);
       });
-      template_effect(($0) => set_attribute(div_4, "aria-label", $0), [() => t("widget.widgetLang", get(widgetLang))]);
-      append($$anchor2, div_4);
+      template_effect(() => set_attribute(div_5, "aria-label", get(widgetLang) === "de" ? "Widget-Sprache wählen" : "Select widget language"));
+      append($$anchor2, div_5);
     };
     if_block(node_3, ($$render) => {
-      if (get(langDropdownOpen)) $$render(consequent_1);
+      if (get(widgetLangDropdownOpen)) $$render(consequent_1);
+    });
+  }
+  var div_6 = sibling(div_3, 2);
+  var span_4 = child(div_6);
+  var text_4 = child(span_4);
+  var div_7 = sibling(span_4, 2);
+  var button_2 = child(div_7);
+  let classes_2;
+  var span_5 = child(button_2);
+  var span_6 = sibling(child(span_5), 2);
+  var node_5 = child(span_6);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var text_5 = text();
+      template_effect(
+        ($0, $1) => set_text(text_5, `${$0 ?? ""}
+                ${$1 ?? ""}`),
+        [
+          () => TRANSLATE_LANGUAGES.find((l) => l.code === get(pageTranslateLang))?.flag || "",
+          () => TRANSLATE_LANGUAGES.find((l) => l.code === get(pageTranslateLang))?.label || get(pageTranslateLang)
+        ]
+      );
+      append($$anchor2, text_5);
+    };
+    var alternate = ($$anchor2) => {
+      var text_6 = text();
+      template_effect(() => set_text(text_6, get(widgetLang) === "de" ? "Sprache wählen..." : "Select language..."));
+      append($$anchor2, text_6);
+    };
+    if_block(node_5, ($$render) => {
+      if (get(pageTranslateActive) && get(pageTranslateLang)) $$render(consequent_2);
+      else $$render(alternate, -1);
+    });
+  }
+  var svg_2 = sibling(span_5, 2);
+  let classes_3;
+  var node_6 = sibling(button_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var div_8 = root_6();
+      var span_7 = child(div_8);
+      var text_7 = child(span_7);
+      var button_3 = sibling(span_7, 2);
+      var span_8 = sibling(child(button_3), 2);
+      var text_8 = child(span_8);
+      template_effect(
+        ($0) => {
+          set_text(text_7, `${get(widgetLang) === "de" ? "Aktiv" : "Active"}: ${$0 ?? ""}`);
+          set_attribute(button_3, "aria-label", get(widgetLang) === "de" ? "Original wiederherstellen" : "Restore original");
+          set_text(text_8, get(widgetLang) === "de" ? "Zurücksetzen" : "Restore");
+        },
+        [
+          () => TRANSLATE_LANGUAGES.find((l) => l.code === get(pageTranslateLang))?.label || get(pageTranslateLang)
+        ]
+      );
+      delegated("click", button_3, restorePageTranslation);
+      append($$anchor2, div_8);
+    };
+    if_block(node_6, ($$render) => {
+      if (get(pageTranslateActive)) $$render(consequent_3);
+    });
+  }
+  var node_7 = sibling(node_6, 2);
+  {
+    var consequent_5 = ($$anchor2) => {
+      var div_9 = root_7();
+      each(div_9, 21, () => TRANSLATE_LANGUAGES, index, ($$anchor3, option) => {
+        var button_4 = root_8();
+        var span_9 = child(button_4);
+        var text_9 = child(span_9);
+        var node_8 = sibling(span_9, 2);
+        {
+          var consequent_4 = ($$anchor4) => {
+            var svg_3 = root_9();
+            append($$anchor4, svg_3);
+          };
+          if_block(node_8, ($$render) => {
+            if (get(pageTranslateLang) === get(option).code) $$render(consequent_4);
+          });
+        }
+        template_effect(() => {
+          set_attribute(button_4, "aria-selected", get(pageTranslateLang) === get(option).code);
+          set_attribute(button_4, "data-active", get(pageTranslateLang) === get(option).code);
+          set_text(text_9, `${get(option).flag ?? ""} ${get(option).label ?? ""}`);
+        });
+        delegated("click", button_4, () => handlePageTranslate(get(option).code));
+        append($$anchor3, button_4);
+      });
+      template_effect(() => set_attribute(div_9, "aria-label", get(widgetLang) === "de" ? "Zielsprache für Seitenübersetzung" : "Target language for page translation"));
+      append($$anchor2, div_9);
+    };
+    if_block(node_7, ($$render) => {
+      if (get(translateDropdownOpen)) $$render(consequent_5);
     });
   }
-  var node_5 = sibling(div_3, 4);
-  ProfileSection(node_5, {
+  var node_9 = sibling(div_6, 4);
+  ProfileSection(node_9, {
     get lang() {
       return get(widgetLang);
     },
@@ -7190,10 +7539,10 @@ function WidgetApp($$anchor, $$props) {
     },
     onactivate: handleProfileActivate
   });
-  var node_6 = sibling(node_5, 4);
+  var node_10 = sibling(node_9, 4);
   {
     let $0 = /* @__PURE__ */ user_derived(() => ({ ...config2(), lang: get(widgetLang) }));
-    FeatureGrid(node_6, {
+    FeatureGrid(node_10, {
       get config() {
         return get($0);
       },
@@ -7203,8 +7552,8 @@ function WidgetApp($$anchor, $$props) {
       ontoggle: handleFeatureToggle
     });
   }
-  var node_7 = sibling(div_2, 2);
-  PanelFooter(node_7, {
+  var node_11 = sibling(div_2, 2);
+  PanelFooter(node_11, {
     get lang() {
       return get(widgetLang);
     },
@@ -7213,18 +7562,30 @@ function WidgetApp($$anchor, $$props) {
     },
     get dashboardUrl() {
       return config2().dashboardUrl;
-    }
+    },
+    onclose: close,
+    onminimize: minimize
   });
   bind_this(div_1, ($$value) => set(panelEl, $$value), () => get(panelEl));
   template_effect(
     ($0, $1) => {
-      set_text(text, get(announcement));
+      set_text(text$1, get(announcement));
+      classes = set_class(div_1, 1, "accessify-panel", null, classes, { "accessify-panel--left": get(currentDock) === "left" });
       set_attribute(div_1, "aria-label", $0);
       set_attribute(div_1, "aria-hidden", !get(isOpen));
       set_attribute(div_1, "dir", $1);
-      set_attribute(button, "aria-expanded", get(langDropdownOpen));
-      set_text(text_1, `${(get(currentLangOption)?.flag || "") ?? ""} ${(get(currentLangOption)?.label || get(widgetLang)) ?? ""}`);
-      classes = set_class(svg, 0, "accessify-lang-chevron", null, classes, { "accessify-lang-chevron--open": get(langDropdownOpen) });
+      set_text(text_1, get(widgetLang) === "de" ? "Widget-Sprache" : "Widget Language");
+      set_attribute(button, "aria-expanded", get(widgetLangDropdownOpen));
+      set_text(text_2, `${(get(currentLangOption)?.flag || "") ?? ""} ${(get(currentLangOption)?.label || get(widgetLang)) ?? ""}`);
+      classes_1 = set_class(svg, 0, "accessify-lang-chevron", null, classes_1, {
+        "accessify-lang-chevron--open": get(widgetLangDropdownOpen)
+      });
+      set_text(text_4, get(widgetLang) === "de" ? "Seite übersetzen" : "Translate Page");
+      classes_2 = set_class(button_2, 1, "accessify-translate-toggle", null, classes_2, {
+        "accessify-translate-toggle--active": get(pageTranslateActive)
+      });
+      set_attribute(button_2, "aria-expanded", get(translateDropdownOpen));
+      classes_3 = set_class(svg_2, 0, "accessify-lang-chevron", null, classes_3, { "accessify-lang-chevron--open": get(translateDropdownOpen) });
       div_1.dir = div_1.dir;
     },
     [
@@ -7233,7 +7594,12 @@ function WidgetApp($$anchor, $$props) {
     ]
   );
   delegated("click", button, () => {
-    set(langDropdownOpen, !get(langDropdownOpen));
+    set(widgetLangDropdownOpen, !get(widgetLangDropdownOpen));
+    set(translateDropdownOpen, false);
+  });
+  delegated("click", button_2, () => {
+    set(translateDropdownOpen, !get(translateDropdownOpen));
+    set(widgetLangDropdownOpen, false);
   });
   append($$anchor, fragment);
   return pop($$exports);
@@ -7317,10 +7683,24 @@ function createWidgetStyles(config2) {
     }
     .accessify-trigger:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(50,60,100,0.6); }
     .accessify-trigger:active { transform: scale(0.96); }
-    .accessify-trigger[aria-expanded="true"] { opacity:0; pointer-events:none; transform:scale(0.9); }
+    .accessify-trigger--hidden { opacity:0; pointer-events:none; transform:scale(0.9); }
+    .accessify-trigger--minimized {
+      /* Minimized state: trigger stays visible as return button */
+      opacity: 1 !important; pointer-events: auto !important; transform: none !important;
+    }
+    .accessify-trigger--minimized:hover { transform: translateY(-2px) !important; }
     .accessify-trigger svg { width: 26px; height: 26px; }
     .accessify-trigger--dragging { cursor: grabbing !important; opacity: 0.85; }
 
+    /* Active count badge on trigger */
+    .accessify-trigger-badge {
+      position: absolute; top: -4px; right: -4px;
+      min-width: 20px; height: 20px; padding: 0 5px;
+      border-radius: 999px; background: var(--accent); color: #fff;
+      font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
+      pointer-events: none;
+    }
+
     /* ─── Panel ─── */
     .accessify-panel {
       position: fixed; top: 0; bottom: 0;
@@ -7334,6 +7714,15 @@ function createWidgetStyles(config2) {
       box-shadow: var(--shadow);
       transition: opacity 200ms ease, transform 200ms ease;
     }
+    /* Dynamic dock override via class */
+    .accessify-panel--left {
+      left: 0; right: auto;
+      border-radius: 0 20px 20px 0;
+    }
+    .accessify-panel:not(.accessify-panel--left) {
+      right: 0; left: auto;
+      border-radius: 20px 0 0 20px;
+    }
     .accessify-panel[aria-hidden="true"] { opacity:0; transform:${hiddenTransform}; pointer-events:none; display:none; }
     .accessify-panel[aria-hidden="false"] { opacity:1; transform:translateX(0); }
 
@@ -7363,6 +7752,31 @@ function createWidgetStyles(config2) {
     .accessify-header-btn--icon { padding: 0; }
     .accessify-header-btn--close { background: transparent; border-color: transparent; }
 
+    /* ─── Docking buttons ─── */
+    .accessify-dock-group {
+      display: inline-flex; gap: 2px;
+      border-radius: 8px; border: 1px solid var(--border);
+      overflow: hidden;
+    }
+    .accessify-dock-btn {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; border: none;
+      background: transparent; color: var(--text-dim);
+      cursor: pointer; transition: background var(--fast), color var(--fast);
+    }
+    .accessify-dock-btn:hover { background: var(--surface-hover); color: var(--text); }
+    .accessify-dock-btn[data-active="true"] { background: var(--accent-soft); color: var(--accent); }
+    .accessify-dock-btn svg { width: 14px; height: 14px; }
+
+    /* ─── Section Labels ─── */
+    .accessify-control-section {
+      display: flex; flex-direction: column; gap: 6px;
+    }
+    .accessify-section-label {
+      font-size: 11px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.05em; color: var(--text-dim); padding-left: 2px;
+    }
+
     /* ─── Shared Accordion (Language + Profiles) ─── */
     .accessify-lang-dropdown,
     .accessify-accordion {
@@ -7372,6 +7786,7 @@ function createWidgetStyles(config2) {
     }
 
     .accessify-lang-toggle,
+    .accessify-translate-toggle,
     .accessify-accordion-toggle {
       display: flex; align-items: center; justify-content: space-between;
       width: 100%; padding: 14px 14px;
@@ -7381,8 +7796,32 @@ function createWidgetStyles(config2) {
       transition: background var(--fast);
     }
     .accessify-lang-toggle:hover,
+    .accessify-translate-toggle:hover,
     .accessify-accordion-toggle:hover { background: var(--surface-hover); }
 
+    /* Active translation indicator */
+    .accessify-translate-toggle--active {
+      border-left: 3px solid var(--accent);
+    }
+
+    /* Translation active status bar */
+    .accessify-translate-status {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 8px 12px;
+      background: var(--accent-soft);
+      border-top: 1px solid var(--border);
+      font-size: 12px; font-weight: 600; color: var(--accent);
+    }
+    .accessify-translate-restore {
+      display: inline-flex; align-items: center; gap: 4px;
+      padding: 4px 10px; border: none; border-radius: 6px;
+      background: var(--surface); color: var(--text-dim);
+      cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit;
+      transition: background var(--fast), color var(--fast);
+    }
+    .accessify-translate-restore:hover { background: var(--accent); color: #fff; }
+    .accessify-translate-restore svg { width: 12px; height: 12px; }
+
     .accessify-lang-toggle-left,
     .accessify-accordion-toggle-left {
       display: flex; align-items: center; gap: 10px;
@@ -7419,6 +7858,7 @@ function createWidgetStyles(config2) {
       color: var(--text); cursor: pointer;
       font-size: 14px; font-weight: 500; font-family: inherit;
       transition: background var(--fast);
+      min-height: 44px; /* Hit area */
     }
     .accessify-lang-option:hover { background: var(--surface-hover); }
     .accessify-lang-option[data-active="true"] { color: var(--accent); font-weight: 700; }
@@ -7597,6 +8037,26 @@ function createWidgetStyles(config2) {
       flex-shrink: 0;
     }
 
+    /* ─── Utility Bar (bottom of panel) ─── */
+    .accessify-utility-bar {
+      display: flex; gap: 8px;
+      padding: 8px var(--pad);
+      border-top: 1px solid var(--border);
+      background: var(--surface-dim);
+      flex-shrink: 0;
+    }
+    .accessify-utility-btn {
+      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      padding: 10px 12px; min-height: 40px;
+      border: 1px solid var(--border); border-radius: 10px;
+      background: var(--surface); color: var(--text-dim);
+      cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
+      transition: background var(--fast), color var(--fast), border-color var(--fast);
+    }
+    .accessify-utility-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-hl); }
+    .accessify-utility-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
+    .accessify-utility-btn--close:hover { border-color: var(--accent); color: var(--accent); }
+
     /* ─── Footer ─── */
     .accessify-footer {
       display: flex; align-items: center; justify-content: center; gap: 8px;
@@ -7616,6 +8076,7 @@ function createWidgetStyles(config2) {
     /* ─── Mobile ─── */
     @media (max-width: 640px) {
       .accessify-panel { width: 100vw; border-radius: 0; }
+      .accessify-panel--left { border-radius: 0; }
       .accessify-features { gap: 8px; }
       .accessify-body { padding: 8px 12px; }
       .accessify-trigger {
@@ -7623,6 +8084,7 @@ function createWidgetStyles(config2) {
         ${isRight ? "right: 16px" : "left: 16px"};
         width: 50px; height: 50px; border-radius: 14px;
       }
+      .accessify-dock-group { display: none; }
     }
   `;
 }
@@ -8002,7 +8464,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     styleEl = null;
     document.getElementById(STYLE_ID)?.remove();
   }
-  function showDescribeTooltip(text, rect, loading = false) {
+  function showDescribeTooltip(text2, rect, loading = false) {
     hideDescribeTooltip();
     const tip = document.createElement("div");
     tip.className = "accessify-describe-tooltip";
@@ -8022,7 +8484,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       tip.appendChild(loadingEl);
     } else {
       const textEl = document.createElement("div");
-      textEl.textContent = text;
+      textEl.textContent = text2;
       tip.appendChild(textEl);
     }
     document.body.appendChild(tip);
@@ -8318,7 +8780,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       );
     }
   }
-  function showBadge(text, color, count) {
+  function showBadge(text2, color, count) {
     const badge = document.createElement("div");
     badge.className = "accessify-alt-badge";
     badge.setAttribute("role", "status");
@@ -8331,7 +8793,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       badge.appendChild(c);
     }
     const label = document.createElement("span");
-    label.textContent = text;
+    label.textContent = text2;
     badge.appendChild(label);
     document.body.appendChild(badge);
     badgeEl = badge;
@@ -8630,4 +9092,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-B9BgMU66.js.map
+//# sourceMappingURL=index-BiF0o7li.js.map