@swalha1999/a11y-react 1.0.2

package/dist/index.mjs

@@ -0,0 +1,1097 @@
+// src/AccessibilityWidget.tsx
+import { useState as useState3, useRef as useRef2, useEffect as useEffect4, useId } from "react";
+import { createPortal } from "react-dom";
+
+// src/hooks/useAccessibilitySettings.ts
+import { useState, useEffect, useCallback } from "react";
+var DEFAULT_SETTINGS = {
+  textSize: 0,
+  lineHeight: 0,
+  letterSpacing: 0,
+  invertColors: false,
+  grayscale: false,
+  underlineLinks: false,
+  bigCursor: false,
+  readingGuide: false,
+  hideImages: false
+};
+function useAccessibilitySettings({
+  storageKey = "accessibility-settings",
+  defaultSettings,
+  onSettingsChange,
+  disablePersistence = false
+} = {}) {
+  const [settings, setSettings] = useState(() => {
+    const initial = { ...DEFAULT_SETTINGS, ...defaultSettings };
+    if (!disablePersistence && typeof window !== "undefined") {
+      try {
+        const saved = localStorage.getItem(storageKey);
+        if (saved) {
+          return { ...initial, ...JSON.parse(saved) };
+        }
+      } catch {
+      }
+    }
+    return initial;
+  });
+  useEffect(() => {
+    if (!disablePersistence && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(settings));
+      } catch {
+      }
+    }
+    onSettingsChange?.(settings);
+  }, [settings, storageKey, onSettingsChange, disablePersistence]);
+  useEffect(() => {
+    const root = document.documentElement;
+    const body = document.body;
+    const WRAPPER_ID = "a11y-content-wrapper";
+    const PORTAL_ID = "a11y-widget-portal";
+    let wrapper = document.getElementById(WRAPPER_ID);
+    if (!wrapper) {
+      wrapper = document.createElement("div");
+      wrapper.id = WRAPPER_ID;
+      wrapper.style.minHeight = "100vh";
+      wrapper.style.background = "inherit";
+      const children = Array.from(body.children);
+      children.forEach((child) => {
+        if (child.id !== PORTAL_ID && child.id !== WRAPPER_ID) {
+          wrapper.appendChild(child);
+        }
+      });
+      body.insertBefore(wrapper, body.firstChild);
+    }
+    const textScale = 1 + settings.textSize * 0.05;
+    root.style.setProperty("--a11y-text-scale", String(textScale));
+    body.classList.toggle("a11y-text-scaled", settings.textSize !== 0);
+    const lineHeight = 1.5 + settings.lineHeight * 0.2;
+    root.style.setProperty("--a11y-line-height", String(lineHeight));
+    body.classList.toggle("a11y-line-height-active", settings.lineHeight !== 0);
+    const letterSpacing = settings.letterSpacing * 0.05;
+    root.style.setProperty("--a11y-letter-spacing", `${letterSpacing}em`);
+    body.classList.toggle("a11y-letter-spacing-active", settings.letterSpacing !== 0);
+    wrapper.classList.toggle("a11y-invert", settings.invertColors);
+    wrapper.classList.toggle("a11y-grayscale", settings.grayscale);
+    body.classList.toggle("a11y-underline-links", settings.underlineLinks);
+    body.classList.toggle("a11y-big-cursor", settings.bigCursor);
+    body.classList.toggle("a11y-reading-guide", settings.readingGuide);
+    body.classList.toggle("a11y-hide-images", settings.hideImages);
+    return () => {
+      root.style.removeProperty("--a11y-text-scale");
+      root.style.removeProperty("--a11y-line-height");
+      root.style.removeProperty("--a11y-letter-spacing");
+      body.classList.remove(
+        "a11y-text-scaled",
+        "a11y-line-height-active",
+        "a11y-letter-spacing-active",
+        "a11y-underline-links",
+        "a11y-big-cursor",
+        "a11y-reading-guide",
+        "a11y-hide-images"
+      );
+      if (wrapper) {
+        wrapper.classList.remove("a11y-invert", "a11y-grayscale");
+      }
+    };
+  }, [settings]);
+  const updateSetting = useCallback((key, value) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  }, []);
+  const toggleSetting = useCallback((key) => {
+    setSettings((prev) => {
+      const current = prev[key];
+      if (typeof current === "boolean") {
+        return { ...prev, [key]: !current };
+      }
+      return prev;
+    });
+  }, []);
+  const resetSettings = useCallback(() => {
+    setSettings({ ...DEFAULT_SETTINGS, ...defaultSettings });
+  }, [defaultSettings]);
+  const incrementSetting = useCallback((key, min = -2, max = 2) => {
+    setSettings((prev) => ({
+      ...prev,
+      [key]: Math.min(max, prev[key] + 1)
+    }));
+  }, []);
+  const decrementSetting = useCallback((key, min = -2, max = 2) => {
+    setSettings((prev) => ({
+      ...prev,
+      [key]: Math.max(min, prev[key] - 1)
+    }));
+  }, []);
+  return {
+    settings,
+    updateSetting,
+    toggleSetting,
+    resetSettings,
+    incrementSetting,
+    decrementSetting
+  };
+}
+
+// src/hooks/useReadingGuide.ts
+import { useEffect as useEffect2, useRef } from "react";
+function useReadingGuide(enabled, primaryColor = "#2d2d2d") {
+  const lineRef = useRef(null);
+  useEffect2(() => {
+    if (!enabled) {
+      if (lineRef.current) {
+        lineRef.current.remove();
+        lineRef.current = null;
+      }
+      return;
+    }
+    const line = document.createElement("div");
+    line.className = "a11y-reading-guide-line";
+    line.setAttribute("aria-hidden", "true");
+    line.style.cssText = `
+      position: fixed;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: ${primaryColor};
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      pointer-events: none;
+      z-index: 9997;
+      transition: top 0.1s ease-out;
+    `;
+    document.body.appendChild(line);
+    lineRef.current = line;
+    const handleMouseMove = (e) => {
+      if (lineRef.current) {
+        lineRef.current.style.top = `${e.clientY}px`;
+      }
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      if (lineRef.current) {
+        lineRef.current.remove();
+        lineRef.current = null;
+      }
+    };
+  }, [enabled, primaryColor]);
+}
+
+// src/hooks/useBackgroundContrast.ts
+import { useState as useState2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+function useBackgroundContrast(buttonRef) {
+  const [isDarkBackground, setIsDarkBackground] = useState2(false);
+  const detectBackground = useCallback2(() => {
+    const button = buttonRef.current;
+    if (!button) return;
+    const rect = button.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top + rect.height / 2;
+    const originalPointerEvents = button.style.pointerEvents;
+    button.style.pointerEvents = "none";
+    const elementBehind = document.elementFromPoint(x, y);
+    button.style.pointerEvents = originalPointerEvents;
+    if (elementBehind) {
+      const bgColor = window.getComputedStyle(elementBehind).backgroundColor;
+      const rgb = bgColor.match(/\d+/g);
+      if (rgb && rgb.length >= 3) {
+        const luminance = (0.299 * parseInt(rgb[0], 10) + 0.587 * parseInt(rgb[1], 10) + 0.114 * parseInt(rgb[2], 10)) / 255;
+        setIsDarkBackground(luminance < 0.5);
+      }
+    }
+  }, [buttonRef]);
+  useEffect3(() => {
+    detectBackground();
+    window.addEventListener("scroll", detectBackground);
+    window.addEventListener("resize", detectBackground);
+    return () => {
+      window.removeEventListener("scroll", detectBackground);
+      window.removeEventListener("resize", detectBackground);
+    };
+  }, [detectBackground]);
+  return isDarkBackground;
+}
+
+// src/icons.tsx
+import { jsx } from "react/jsx-runtime";
+var AccessibilityIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    role: "img",
+    children: /* @__PURE__ */ jsx("path", { d: "M12 2C13.1 2 14 2.9 14 4S13.1 6 12 6 10 5.1 10 4 10.9 2 12 2M21 9H15V22H13V16H11V22H9V9H3V7H21V9Z" })
+  }
+);
+var TextSizeIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M3 7V5H21V7H3M10 17V9H14V17H10M8 19H16V21H8V19Z" })
+  }
+);
+var LineHeightIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M10 13H22V11H10M10 19H22V17H10M10 7H22V5H10M6 7H8.5L5 3.5L1.5 7H4V17H1.5L5 20.5L8.5 17H6V7Z" })
+  }
+);
+var LetterSpacingIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M11 3L5.5 17H7.75L8.85 14H15.15L16.25 17H18.5L13 3H11M9.55 12L12 5.67L14.45 12H9.55M2 20H22V22H2V20Z" })
+  }
+);
+var InvertIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z" })
+  }
+);
+var GrayscaleIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z" })
+  }
+);
+var LinkIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" })
+  }
+);
+var CursorIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C17.97,19.46 17.76,20.06 17.26,20.28L13.64,21.97Z" })
+  }
+);
+var ReadingGuideIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M21,5C19.89,4.65 18.67,4.5 17.5,4.5C15.55,4.5 13.45,4.9 12,6C10.55,4.9 8.45,4.5 6.5,4.5C4.55,4.5 2.45,4.9 1,6V20.65C1,20.9 1.25,21.15 1.5,21.15C1.6,21.15 1.65,21.1 1.75,21.1C3.1,20.45 5.05,20 6.5,20C8.45,20 10.55,20.4 12,21.5C13.35,20.65 15.8,20 17.5,20C19.15,20 20.85,20.3 22.25,21.05C22.35,21.1 22.4,21.1 22.5,21.1C22.75,21.1 23,20.85 23,20.6V6C22.4,5.55 21.75,5.25 21,5M21,18.5C19.9,18.15 18.7,18 17.5,18C15.8,18 13.35,18.65 12,19.5V8C13.35,7.15 15.8,6.5 17.5,6.5C18.7,6.5 19.9,6.65 21,7V18.5Z" })
+  }
+);
+var ImageIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" })
+  }
+);
+var ResetIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" })
+  }
+);
+var CloseIcon = ({
+  size = 24,
+  className,
+  "aria-hidden": ariaHidden = true
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: size,
+    height: size,
+    className: `a11y-widget-icon ${className || ""}`,
+    "aria-hidden": ariaHidden,
+    children: /* @__PURE__ */ jsx("path", { d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })
+  }
+);
+
+// src/AccessibilityWidget.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var getPortalContainer = () => {
+  const PORTAL_ID = "a11y-widget-portal";
+  let container = document.getElementById(PORTAL_ID);
+  if (!container) {
+    container = document.createElement("div");
+    container.id = PORTAL_ID;
+    document.body.appendChild(container);
+  }
+  return container;
+};
+var AccessibilityWidget = ({
+  translations,
+  dir = "ltr",
+  styles = {},
+  classNames = {},
+  position = "bottom-right",
+  storageKey = "accessibility-settings",
+  onSettingsChange,
+  defaultSettings,
+  zIndex = 9999,
+  disablePersistence = false,
+  buttonIcon,
+  primaryColor = "#6366f1",
+  buttonAriaLabel
+}) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const [portalContainer, setPortalContainer] = useState3(null);
+  const buttonRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const uniqueId = useId();
+  useEffect4(() => {
+    setPortalContainer(getPortalContainer());
+  }, []);
+  const isDarkBackground = useBackgroundContrast(buttonRef);
+  const {
+    settings,
+    toggleSetting,
+    resetSettings,
+    incrementSetting,
+    decrementSetting
+  } = useAccessibilitySettings({
+    storageKey,
+    defaultSettings,
+    onSettingsChange,
+    disablePersistence
+  });
+  useReadingGuide(settings.readingGuide, primaryColor);
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  useEffect4(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        handleClose();
+        buttonRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  useEffect4(() => {
+    if (!isOpen || !panelRef.current) return;
+    const panel = panelRef.current;
+    const focusableElements = panel.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const handleTabKey = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement?.focus();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement?.focus();
+      }
+    };
+    panel.addEventListener("keydown", handleTabKey);
+    firstElement?.focus();
+    return () => panel.removeEventListener("keydown", handleTabKey);
+  }, [isOpen]);
+  const getPositionStyles = () => {
+    const base = { position: "fixed" };
+    const offset = 24;
+    switch (position) {
+      case "bottom-left":
+        return { ...base, bottom: offset, left: offset };
+      case "bottom-right":
+        return { ...base, bottom: offset, right: offset };
+      case "top-left":
+        return { ...base, top: offset, left: offset };
+      case "top-right":
+        return { ...base, top: offset, right: offset };
+      default:
+        return { ...base, bottom: offset, right: offset };
+    }
+  };
+  const getPanelPositionStyles = () => {
+    const base = { position: "fixed" };
+    if (position.includes("bottom")) {
+      base.bottom = 100;
+    } else {
+      base.top = 100;
+    }
+    if (position.includes("left")) {
+      base.left = 24;
+    } else {
+      base.right = 24;
+    }
+    return base;
+  };
+  const buttonStyle = {
+    ...getPositionStyles(),
+    width: 64,
+    height: 64,
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    zIndex,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: isDarkBackground ? "#ffffff" : primaryColor,
+    color: isDarkBackground ? primaryColor : "white",
+    boxShadow: isDarkBackground ? "0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05)" : `0 4px 20px ${primaryColor}40, 0 2px 8px ${primaryColor}20`,
+    ...styles.button,
+    ...isDarkBackground ? styles.buttonLight : styles.buttonDark
+  };
+  const overlayStyle = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "rgba(0, 0, 0, 0.4)",
+    zIndex: zIndex - 1,
+    ...styles.overlay
+  };
+  const panelStyle = {
+    ...getPanelPositionStyles(),
+    width: 400,
+    maxWidth: "calc(100vw - 48px)",
+    maxHeight: "85vh",
+    background: "#ffffff",
+    borderRadius: 24,
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    zIndex,
+    overflow: "hidden",
+    direction: dir,
+    border: "1px solid #e2e8f0",
+    ...styles.panel
+  };
+  const headerStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "24px 28px",
+    background: primaryColor,
+    color: "white",
+    ...styles.panelHeader
+  };
+  const headerTitleStyle = {
+    margin: 0,
+    fontSize: 22,
+    fontWeight: 700,
+    lineHeight: 1.2,
+    letterSpacing: "-0.02em"
+  };
+  const closeButtonStyle = {
+    background: "rgba(255, 255, 255, 0.15)",
+    border: "none",
+    width: 36,
+    height: 36,
+    borderRadius: 12,
+    color: "white",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const contentStyle = {
+    padding: "20px 24px",
+    maxHeight: "calc(85vh - 160px)",
+    overflowY: "auto",
+    overflowX: "hidden",
+    ...styles.panelContent
+  };
+  const getSettingItemStyle = (isToggle) => ({
+    background: "#f8fafc",
+    borderRadius: 16,
+    padding: "18px 20px",
+    marginBottom: 12,
+    border: "1px solid #e2e8f0",
+    cursor: "default",
+    ...isToggle && {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    ...styles.settingItem
+  });
+  const itemHeaderStyle = (isToggle) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    ...isToggle ? { flex: 1 } : { marginBottom: 14 }
+  });
+  const iconContainerStyle = {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    background: `${primaryColor}15`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  const iconStyle = {
+    width: 22,
+    height: 22,
+    color: primaryColor
+  };
+  const labelStyle = {
+    fontWeight: 600,
+    color: "#1e293b",
+    fontSize: 15,
+    lineHeight: 1.4,
+    letterSpacing: "-0.01em"
+  };
+  const controlContainerStyle = {
+    display: "flex",
+    gap: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    background: "#ffffff",
+    padding: "8px 12px",
+    borderRadius: 14
+  };
+  const controlButtonStyle = (disabled) => ({
+    background: disabled ? "#f1f5f9" : primaryColor,
+    border: "none",
+    borderRadius: 10,
+    width: 42,
+    height: 42,
+    fontSize: 16,
+    fontWeight: 700,
+    color: disabled ? "#94a3b8" : "white",
+    cursor: disabled ? "not-allowed" : "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: disabled ? 0.5 : 1,
+    ...styles.controlButton
+  });
+  const valueDisplayStyle = {
+    minWidth: 70,
+    textAlign: "center",
+    fontWeight: 700,
+    color: "#334155",
+    fontSize: 14,
+    fontFamily: "ui-monospace, monospace",
+    background: "#f8fafc",
+    padding: "8px 12px",
+    borderRadius: 8
+  };
+  const toggleTrackStyle = (checked) => ({
+    position: "relative",
+    width: 56,
+    height: 30,
+    flexShrink: 0,
+    display: "inline-block",
+    cursor: "pointer"
+  });
+  const toggleSliderStyle = (checked) => ({
+    position: "absolute",
+    cursor: "pointer",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: checked ? primaryColor : "#e2e8f0",
+    borderRadius: 30,
+    ...styles.toggleTrack
+  });
+  const toggleKnobStyle = (checked) => ({
+    position: "absolute",
+    height: 24,
+    width: 24,
+    left: checked ? 28 : 3,
+    bottom: 3,
+    backgroundColor: "white",
+    borderRadius: "50%",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1)",
+    ...styles.toggleThumb
+  });
+  const dividerStyle = {
+    height: 1,
+    background: "#e2e8f0",
+    margin: "20px 0"
+  };
+  const sectionLabelStyle = {
+    fontSize: 11,
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    color: "#94a3b8",
+    marginBottom: 12,
+    marginTop: 4,
+    paddingLeft: 4
+  };
+  const resetButtonStyle = {
+    width: "100%",
+    padding: "16px 20px",
+    background: "#fef2f2",
+    border: "1px solid #fecaca",
+    borderRadius: 14,
+    color: "#dc2626",
+    fontWeight: 700,
+    fontSize: 15,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    marginTop: 16,
+    ...styles.resetButton
+  };
+  const panelId = `a11y-panel-${uniqueId}`;
+  if (!portalContainer) {
+    return null;
+  }
+  const renderToggleItem = (key, icon, label) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: getSettingItemStyle(true),
+      className: classNames.settingItem,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: itemHeaderStyle(true), children: [
+          /* @__PURE__ */ jsx2("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsx2("span", { style: iconStyle, children: icon }) }),
+          /* @__PURE__ */ jsx2("span", { style: labelStyle, children: label })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { style: toggleTrackStyle(settings[key]), children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              id: `${key}-${uniqueId}`,
+              checked: settings[key],
+              onChange: () => toggleSetting(key),
+              style: { opacity: 0, width: 0, height: 0, position: "absolute" },
+              "aria-label": label,
+              role: "switch",
+              "aria-checked": settings[key]
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { style: toggleSliderStyle(settings[key]), "aria-hidden": "true", children: /* @__PURE__ */ jsx2("span", { style: toggleKnobStyle(settings[key]) }) })
+        ] })
+      ]
+    }
+  );
+  const renderSliderItem = (key, icon, label, decrementLabel = "\u2212", incrementLabel = "+") => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: getSettingItemStyle(false),
+      className: classNames.settingItem,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: itemHeaderStyle(false), children: [
+          /* @__PURE__ */ jsx2("div", { style: iconContainerStyle, children: /* @__PURE__ */ jsx2("span", { style: iconStyle, children: icon }) }),
+          /* @__PURE__ */ jsx2("span", { style: labelStyle, children: label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: controlContainerStyle, role: "group", "aria-label": label, children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => decrementSetting(key),
+              disabled: settings[key] === -2,
+              style: controlButtonStyle(settings[key] === -2),
+              "aria-label": `Decrease ${label}`,
+              children: decrementLabel
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { style: valueDisplayStyle, "aria-live": "polite", children: settings[key] === 0 ? translations.normal : settings[key] > 0 ? `+${settings[key]}` : settings[key] }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => incrementSetting(key),
+              disabled: settings[key] === 2,
+              style: controlButtonStyle(settings[key] === 2),
+              "aria-label": `Increase ${label}`,
+              children: incrementLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          ref: buttonRef,
+          type: "button",
+          className: `a11y-widget-button ${classNames.button || ""}`,
+          style: buttonStyle,
+          onClick: () => isOpen ? handleClose() : handleOpen(),
+          "aria-label": buttonAriaLabel || translations.title,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          "aria-haspopup": "dialog",
+          children: buttonIcon || /* @__PURE__ */ jsx2(AccessibilityIcon, { size: 32 })
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: `a11y-widget-overlay ${classNames.overlay || ""}`,
+            style: overlayStyle,
+            onClick: handleClose,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            id: panelId,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": translations.title,
+            className: `a11y-widget-panel ${classNames.panel || ""}`,
+            style: panelStyle,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: classNames.panelHeader, style: headerStyle, children: [
+                /* @__PURE__ */ jsx2("h2", { style: headerTitleStyle, children: translations.title }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    style: closeButtonStyle,
+                    onClick: handleClose,
+                    "aria-label": translations.close,
+                    children: /* @__PURE__ */ jsx2(CloseIcon, { size: 20 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: classNames.panelContent, style: contentStyle, children: [
+                /* @__PURE__ */ jsx2("div", { style: sectionLabelStyle, children: translations.textAdjustments || "Text Adjustments" }),
+                renderSliderItem("textSize", /* @__PURE__ */ jsx2(TextSizeIcon, {}), translations.textSize, "A\u2212", "A+"),
+                renderSliderItem("lineHeight", /* @__PURE__ */ jsx2(LineHeightIcon, {}), translations.lineSpacing),
+                renderSliderItem("letterSpacing", /* @__PURE__ */ jsx2(LetterSpacingIcon, {}), translations.letterSpacing),
+                /* @__PURE__ */ jsx2("div", { style: dividerStyle, role: "separator", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx2("div", { style: sectionLabelStyle, children: translations.visualAdjustments || "Visual Adjustments" }),
+                renderToggleItem("invertColors", /* @__PURE__ */ jsx2(InvertIcon, {}), translations.invertColors),
+                renderToggleItem("grayscale", /* @__PURE__ */ jsx2(GrayscaleIcon, {}), translations.grayscale),
+                renderToggleItem("hideImages", /* @__PURE__ */ jsx2(ImageIcon, {}), translations.hideImages),
+                /* @__PURE__ */ jsx2("div", { style: dividerStyle, role: "separator", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx2("div", { style: sectionLabelStyle, children: translations.navigationAids || "Navigation Aids" }),
+                renderToggleItem("underlineLinks", /* @__PURE__ */ jsx2(LinkIcon, {}), translations.underlineLinks),
+                renderToggleItem("bigCursor", /* @__PURE__ */ jsx2(CursorIcon, {}), translations.bigCursor),
+                renderToggleItem("readingGuide", /* @__PURE__ */ jsx2(ReadingGuideIcon, {}), translations.readingGuide),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    style: resetButtonStyle,
+                    onClick: resetSettings,
+                    className: classNames.resetButton,
+                    children: [
+                      /* @__PURE__ */ jsx2(ResetIcon, { size: 20 }),
+                      translations.reset
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    portalContainer
+  );
+};
+
+// src/translations/en.ts
+var en = {
+  title: "Accessibility",
+  textSize: "Text Size",
+  lineSpacing: "Line Spacing",
+  letterSpacing: "Letter Spacing",
+  invertColors: "Invert Colors",
+  grayscale: "Grayscale",
+  underlineLinks: "Underline Links",
+  bigCursor: "Big Cursor",
+  readingGuide: "Reading Guide",
+  hideImages: "Hide Images",
+  reset: "Reset All",
+  normal: "Normal",
+  close: "Close accessibility panel",
+  textAdjustments: "Text Adjustments",
+  visualAdjustments: "Visual Adjustments",
+  navigationAids: "Navigation Aids"
+};
+
+// src/translations/ar.ts
+var ar = {
+  title: "\u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  textSize: "\u062D\u062C\u0645 \u0627\u0644\u0646\u0635",
+  lineSpacing: "\u062A\u0628\u0627\u0639\u062F \u0627\u0644\u0623\u0633\u0637\u0631",
+  letterSpacing: "\u062A\u0628\u0627\u0639\u062F \u0627\u0644\u0623\u062D\u0631\u0641",
+  invertColors: "\u0639\u0643\u0633 \u0627\u0644\u0623\u0644\u0648\u0627\u0646",
+  grayscale: "\u062A\u062F\u0631\u062C \u0631\u0645\u0627\u062F\u064A",
+  underlineLinks: "\u062A\u0633\u0637\u064A\u0631 \u0627\u0644\u0631\u0648\u0627\u0628\u0637",
+  bigCursor: "\u0645\u0624\u0634\u0631 \u0643\u0628\u064A\u0631",
+  readingGuide: "\u062F\u0644\u064A\u0644 \u0627\u0644\u0642\u0631\u0627\u0621\u0629",
+  hideImages: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u0635\u0648\u0631",
+  reset: "\u0625\u0639\u0627\u062F\u0629 \u062A\u0639\u064A\u064A\u0646",
+  normal: "\u0639\u0627\u062F\u064A",
+  close: "\u0625\u063A\u0644\u0627\u0642 \u0644\u0648\u062D\u0629 \u0625\u0645\u0643\u0627\u0646\u064A\u0629 \u0627\u0644\u0648\u0635\u0648\u0644",
+  textAdjustments: "\u062A\u0639\u062F\u064A\u0644\u0627\u062A \u0627\u0644\u0646\u0635",
+  visualAdjustments: "\u062A\u0639\u062F\u064A\u0644\u0627\u062A \u0628\u0635\u0631\u064A\u0629",
+  navigationAids: "\u0645\u0633\u0627\u0639\u062F\u0627\u062A \u0627\u0644\u062A\u0646\u0642\u0644"
+};
+
+// src/styles.ts
+function injectAccessibilityStyles() {
+  if (typeof document === "undefined") return;
+  const styleId = "a11y-widget-global-styles";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = `
+    /* Accessibility Widget Global Styles */
+
+    /* Text scaling - only when class is active */
+    body.a11y-text-scaled *:not([class*="a11y-widget"]) {
+      font-size: calc(1em * var(--a11y-text-scale, 1)) !important;
+    }
+
+    /* Line height - only when class is active */
+    body.a11y-line-height-active *:not([class*="a11y-widget"]) {
+      line-height: var(--a11y-line-height, 1.5) !important;
+    }
+
+    /* Letter spacing - only when class is active */
+    body.a11y-letter-spacing-active *:not([class*="a11y-widget"]) {
+      letter-spacing: var(--a11y-letter-spacing, normal) !important;
+    }
+
+    /* Invert colors - applied to content wrapper */
+    #a11y-content-wrapper.a11y-invert {
+      filter: invert(1) hue-rotate(180deg);
+    }
+
+    #a11y-content-wrapper.a11y-invert img:not(.a11y-widget-icon),
+    #a11y-content-wrapper.a11y-invert video,
+    #a11y-content-wrapper.a11y-invert [style*="background-image"],
+    #a11y-content-wrapper.a11y-invert canvas,
+    #a11y-content-wrapper.a11y-invert svg:not(.a11y-widget-icon) {
+      filter: invert(1) hue-rotate(180deg);
+    }
+
+    /* Grayscale - applied to content wrapper */
+    #a11y-content-wrapper.a11y-grayscale {
+      filter: grayscale(100%);
+    }
+
+    /* Underline links */
+    body.a11y-underline-links a {
+      text-decoration: underline !important;
+      text-decoration-thickness: 2px !important;
+      text-underline-offset: 3px !important;
+    }
+
+    /* Big cursor */
+    body.a11y-big-cursor,
+    body.a11y-big-cursor * {
+      cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="%232d2d2d" stroke="white" stroke-width="2" d="M10 3l20 15-8 2-4 9-5-3 4-8-7-2z"/></svg>') 8 8, auto !important;
+    }
+
+    /* Hide images */
+    body.a11y-hide-images img,
+    body.a11y-hide-images [role="img"],
+    body.a11y-hide-images svg:not([class*="a11y"]) {
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    /* Reading guide line is created dynamically by the hook */
+  `;
+  document.head.appendChild(style);
+}
+function removeAccessibilityStyles() {
+  if (typeof document === "undefined") return;
+  const style = document.getElementById("a11y-widget-global-styles");
+  if (style) {
+    style.remove();
+  }
+}
+var accessibilityStylesCSS = `
+/* Accessibility Widget Global Styles */
+
+/* Text scaling - only when class is active */
+body.a11y-text-scaled *:not([class*="a11y-widget"]) {
+  font-size: calc(1em * var(--a11y-text-scale, 1)) !important;
+}
+
+/* Line height - only when class is active */
+body.a11y-line-height-active *:not([class*="a11y-widget"]) {
+  line-height: var(--a11y-line-height, 1.5) !important;
+}
+
+/* Letter spacing - only when class is active */
+body.a11y-letter-spacing-active *:not([class*="a11y-widget"]) {
+  letter-spacing: var(--a11y-letter-spacing, normal) !important;
+}
+
+/* Invert colors - applied to content wrapper */
+#a11y-content-wrapper.a11y-invert {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+#a11y-content-wrapper.a11y-invert img:not(.a11y-widget-icon),
+#a11y-content-wrapper.a11y-invert video,
+#a11y-content-wrapper.a11y-invert [style*="background-image"],
+#a11y-content-wrapper.a11y-invert canvas,
+#a11y-content-wrapper.a11y-invert svg:not(.a11y-widget-icon) {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Grayscale - applied to content wrapper */
+#a11y-content-wrapper.a11y-grayscale {
+  filter: grayscale(100%);
+}
+
+/* Underline links */
+body.a11y-underline-links a {
+  text-decoration: underline !important;
+  text-decoration-thickness: 2px !important;
+  text-underline-offset: 3px !important;
+}
+
+/* Big cursor */
+body.a11y-big-cursor,
+body.a11y-big-cursor * {
+  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path fill="%232d2d2d" stroke="white" stroke-width="2" d="M10 3l20 15-8 2-4 9-5-3 4-8-7-2z"/></svg>') 8 8, auto !important;
+}
+
+/* Hide images */
+body.a11y-hide-images img,
+body.a11y-hide-images [role="img"],
+body.a11y-hide-images svg:not([class*="a11y"]) {
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+`;
+export {
+  AccessibilityIcon,
+  AccessibilityWidget,
+  CloseIcon,
+  CursorIcon,
+  GrayscaleIcon,
+  ImageIcon,
+  InvertIcon,
+  LetterSpacingIcon,
+  LineHeightIcon,
+  LinkIcon,
+  ReadingGuideIcon,
+  ResetIcon,
+  TextSizeIcon,
+  accessibilityStylesCSS,
+  ar,
+  en,
+  injectAccessibilityStyles,
+  removeAccessibilityStyles,
+  useAccessibilitySettings,
+  useBackgroundContrast,
+  useReadingGuide
+};