@pigmilcom/a11y 1.0.8 → 1.1.0

package/dist/index.mjs

@@ -3,6 +3,61 @@
 // src/widget.jsx
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+
+// src/license.js
+var _LRE = /^(localhost|127\.\d+\.\d+\.\d+|::1|\[::1\]|0\.0\.0\.0)$/i;
+function _isLocalDev() {
+  try {
+    const { hostname: h, port: p } = location;
+    if (_LRE.test(h)) return true;
+    if (p && p !== "80" && p !== "443") return true;
+    return false;
+  } catch {
+    return true;
+  }
+}
+var _CK = "_pgm_lc";
+function _readCache() {
+  try {
+    const v = sessionStorage.getItem(_CK);
+    if (!v) return null;
+    const p = JSON.parse(v);
+    return Date.now() - (p._ts || 0) < 18e5 ? p : null;
+  } catch {
+    return null;
+  }
+}
+function _writeCache(result) {
+  try {
+    sessionStorage.setItem(_CK, JSON.stringify({ ...result, _ts: Date.now() }));
+  } catch {
+  }
+}
+var _mock = () => Promise.resolve({ ok: true, plan: "free", blocked: false });
+async function validateLicense() {
+  const cached = _readCache();
+  if (cached) return { status: cached.status, plan: cached.plan };
+  if (_isLocalDev()) {
+    const result2 = { status: "dev", plan: "free" };
+    _writeCache(result2);
+    return result2;
+  }
+  const domain = typeof location !== "undefined" ? location.hostname.toLowerCase().replace(/^www\./, "") : "";
+  if (!domain) return { status: "error", plan: "free" };
+  let result;
+  try {
+    const data = await _mock();
+    if (!(data == null ? void 0 : data.ok)) result = { status: "error", plan: "free" };
+    else if (data.blocked) result = { status: "blocked", plan: data.plan || "free" };
+    else result = { status: "valid", plan: data.plan || "free" };
+  } catch {
+    result = { status: "error", plan: "free" };
+  }
+  _writeCache(result);
+  return result;
+}
+
+// src/widget.jsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var STORAGE_KEY = "pgm-a11y";
 var DEFAULTS = {
@@ -127,14 +182,19 @@ var TOGGLES = [
     ] })
   }
 ];
-function A11yWidget({ className }) {
+function A11y({ className }) {
   const [open, setOpen] = useState(false);
   const [prefs, setPrefs] = useState(DEFAULTS);
   const [mounted, setMounted] = useState(false);
+  const [notice, setNotice] = useState(false);
+  const [license, setLicense] = useState({ status: "checking", plan: "free" });
   const triggerRef = useRef(null);
   useEffect(() => {
     setMounted(true);
   }, []);
+  useEffect(() => {
+    validateLicense().then(setLicense);
+  }, []);
   useEffect(() => {
     const saved = load();
     setPrefs(saved);
@@ -148,6 +208,10 @@ function A11yWidget({ className }) {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open]);
+  if (license.status === "checking" || license.status === "error" || license.status === "blocked") {
+    return null;
+  }
+  const isPro = license.plan === "pro";
   const update = (patch) => {
     setPrefs((prev) => {
       const next = { ...prev, ...patch };
@@ -172,7 +236,7 @@ function A11yWidget({ className }) {
         "aria-expanded": open,
         "aria-haspopup": "dialog",
         onClick: () => setOpen((v) => !v),
-        className: `pgm-btn${className ? ` ${className}` : ""}`,
+        className: `pgm-btn a11y-widget-btn${className ? ` ${className}` : ""}`,
         children: [
           /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "pgm-icon-lg", fill: "none", stroke: "currentColor", strokeWidth: 1.8, "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" }),
@@ -198,7 +262,7 @@ function A11yWidget({ className }) {
             role: "dialog",
             "aria-modal": "true",
             "aria-label": "Accessibility settings",
-            className: "pgm-dialog",
+            className: "pgm-dialog a11y-widget-dialog",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "pgm-header", children: [
                 /* @__PURE__ */ jsxs("div", { children: [
@@ -242,7 +306,7 @@ function A11yWidget({ className }) {
                     role: "switch",
                     "aria-checked": on,
                     onClick: () => update({ [key]: !on }),
-                    className: `pgm-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
+                    className: `pgm-toggle-btn a11y-widget-toggle-btn${on ? " pgm-toggle-btn--on" : ""}`,
                     children: [
                       /* @__PURE__ */ jsx("span", { className: `pgm-toggle-icon${on ? " pgm-toggle-icon--on" : ""}`, children: icon }),
                       /* @__PURE__ */ jsxs("span", { className: "pgm-toggle-text", children: [
@@ -268,7 +332,28 @@ function A11yWidget({ className }) {
                 );
               }) }),
               /* @__PURE__ */ jsxs("div", { className: "pgm-footer", children: [
-                /* @__PURE__ */ jsx("span", { className: "pgm-footer-note", children: "Changes apply instantly & persist" }),
+                !isPro && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-expanded": notice,
+                    "aria-controls": "pgm-notice",
+                    onClick: () => setNotice((v) => !v),
+                    className: "pgm-notice-btn",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: "https://cdn.pigmil.com/shared/icon.png",
+                          alt: "Pigmil",
+                          className: "pgm-notice-logo"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: "About this widget" }),
+                      /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-notice-chevron", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", style: { transform: notice ? "rotate(180deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -279,6 +364,37 @@ function A11yWidget({ className }) {
                     children: "Reset all"
                   }
                 )
+              ] }),
+              !isPro && notice && /* @__PURE__ */ jsxs("div", { id: "pgm-notice", className: "pgm-notice", children: [
+                /* @__PURE__ */ jsxs("p", { className: "pgm-notice-text", children: [
+                  "This accessibility widget is provided free of charge by",
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: "https://github.com/pigmilcom/a11y",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "pgm-notice-link",
+                      children: "PIGMIL"
+                    }
+                  ),
+                  " ",
+                  "as an open-source tool to help make the web more accessible. It stores your preferences locally in your browser and sends no data to any server."
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: "https://github.com/pigmilcom/a11y",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "pgm-notice-gh",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "pgm-icon-sm", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }) }),
+                      "View on GitHub"
+                    ]
+                  }
+                )
               ] })
             ]
           }
@@ -289,6 +405,7 @@ function A11yWidget({ className }) {
   ] });
 }
 export {
-  A11yWidget,
-  A11yWidget as default
+  A11y as A11yWidget,
+  A11y as a11y,
+  A11y as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pigmilcom/a11y",
-    "version": "1.0.8",
+    "version": "1.1.0",
     "description": "WCAG 2.1 accessibility widget for React — text size, contrast, dyslexia font, motion reduction, and more.",
     "keywords": [
         "accessibility",

package/src/cdn.jsx

@@ -15,7 +15,7 @@
  */
 
 import { createRoot } from 'react-dom/client';
-import A11yWidget from './widget.jsx';
+import A11y from './widget.jsx';
 
 // Inline the pre-built CSS (widget UI + a11y modifier rules).
 // Imported as a JS module (generated by scripts/build-css.js) so esbuild bundles
@@ -60,7 +60,7 @@ function mount() {
     container.setAttribute('style', `position:fixed;z-index:9998;line-height:0;font-size:0;${posCSS}`);
     document.body.appendChild(container);
     _root = createRoot(container);
-    _root.render(<A11yWidget />);
+    _root.render(<A11y />);
 }
 
 function unmount() {