@versini/ui-fingerprint 1.1.3 → 1.2.0

package/README.md

@@ -1,6 +1,7 @@
 # @versini/ui-fingerprint
 
 [![npm version](https://img.shields.io/npm/v/@versini/ui-fingerprint?style=flat-square)](https://www.npmjs.com/package/@versini/ui-fingerprint)
+![npm package minimized gzipped size](<https://img.shields.io/bundlejs/size/%40versini%2Fui-fingerprint?style=flat-square&label=size%20(gzip)>)
 
 > A React component for generating unique visual fingerprints built with TypeScript and TailwindCSS.
 

package/dist/index.d.ts

@@ -1,77 +1,25 @@
-type BrowserFP = { browser: string };
-
-type VideoCardFP = {
-	vendor: string;
-	vendorUnmasked: string;
-	renderer: string;
-	rendererUnmasked: string;
-	version: string;
-	shadingLanguageVersion: string;
-};
-
-type HardwareFP = {
-	hardware: {
-		videocard: VideoCardFP;
-		architecture: number;
-		deviceMemory: string;
-		jsHeapSizeLimit: number;
-	};
-};
-
-type CanvasFP = {
-	canvas: {
-		data: string;
-	};
-};
-
-type AudioFP = {
-	audio: {
-		sampleHash: string;
-		oscillator: string;
-		maxChannels: number;
-		channelCountMode: string;
-	};
-};
-
-type SystemFP = {
-	system: {
-		platform: string;
-		cookieEnabled: boolean;
-		productSub: string;
-		product: string;
-	};
-};
-
-type LocalesFP = {
-	locales: {
-		languages: string;
-		timezone: string;
-	};
-};
-
-type ScreenFP = {
-	screen: {
-		colorDepth: number;
-		pixelDepth: number;
-		isTouchScreen: boolean;
-		maxTouchPoints: number;
-		mediaMatches: string[];
-	};
-};
-
-type FontsFP = string[];
-
-type FingerprintData = [
-    AudioFP,
-    BrowserFP,
-    CanvasFP,
-    FontsFP,
-    HardwareFP,
-    LocalesFP,
-    ScreenFP,
-    SystemFP
-];
-declare const getFingerprintData: (debug?: boolean) => Promise<FingerprintData>;
-declare const getFingerprintHash: (debug?: boolean) => Promise<string>;
-
-export { getFingerprintData, getFingerprintHash };
+import type { AudioFP } from '../common/types';
+import type { BrowserFP } from '../common/types';
+import type { CanvasFP } from '../common/types';
+import type { FontsFP } from '../common/types';
+import type { HardwareFP } from '../common/types';
+import type { LocalesFP } from '../common/types';
+import type { ScreenFP } from '../common/types';
+import type { SystemFP } from '../common/types';
+
+declare type FingerprintData = [
+AudioFP,
+BrowserFP,
+CanvasFP,
+FontsFP,
+HardwareFP,
+LocalesFP,
+ScreenFP,
+SystemFP
+];
+
+export declare const getFingerprintData: (debug?: boolean) => Promise<FingerprintData>;
+
+export declare const getFingerprintHash: (debug?: boolean) => Promise<string>;
+
+export { }

package/dist/index.js

@@ -1,359 +1,659 @@
 /*!
-  @versini/ui-fingerprint v1.1.3
+  @versini/ui-fingerprint v1.2.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_FINGERPRINT__ || (window.__VERSINI_UI_FINGERPRINT__ = {
-    version: "1.1.3",
-    buildTime: "08/23/2025 10:08 AM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_FINGERPRINT__) {
+    window.__VERSINI_UI_FINGERPRINT__ = {
+      version: "1.2.0",
+      buildTime: "11/04/2025 03:46 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-const D = (t) => Array.from(t).map((e) => e.toString(16).padStart(2, "0")).join(""), w = async (t) => {
-  if (t === "")
-    return "";
-  const e = new TextEncoder().encode(t), o = await crypto.subtle.digest("SHA-256", e);
-  return Array.from(new Uint8Array(o)).map((s) => s.toString(16).padStart(2, "0")).join("");
+
+
+;// CONCATENATED MODULE: ./src/common/utilities.ts
+const hashFromFloat32Array = (array)=>{
+    const hashArray = Array.from(array).map((b)=>b.toString(16).padStart(2, "0")).join("");
+    return hashArray;
 };
-function y(t, n) {
-  return new Promise((e) => setTimeout(e, t, n));
-}
-async function T(t, n, e = 50) {
-  const o = document;
-  for (; !o.body; )
-    await y(e);
-  const r = o.createElement("iframe");
-  try {
-    for (await new Promise((a, s) => {
-      let l = !1;
-      const m = () => {
-        l = !0, a();
-      }, p = (f) => {
-        l = !0, s(f);
-      };
-      r.onload = m, r.onerror = p;
-      const { style: u } = r;
-      u.setProperty("display", "block", "important"), u.position = "absolute", u.top = "0", u.left = "0", u.visibility = "hidden", r.src = "about:blank", o.body.appendChild(r);
-      const g = () => {
-        l || (r.contentWindow?.document?.readyState === "complete" ? m() : setTimeout(g, 10));
-      };
-      g();
-    }); !r.contentWindow?.document?.body; )
-      await y(e);
-    return await t(r, r.contentWindow);
-  } finally {
-    r.parentNode?.removeChild(r);
-  }
+const hashFromString = async (input)=>{
+    if (input === "") {
+        return "";
+    }
+    const encoder = new TextEncoder();
+    const data = encoder.encode(input);
+    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashHex = hashArray.map((b)=>b.toString(16).padStart(2, "0")).join("");
+    return hashHex;
+};
+function wait(durationMs, resolveWith) {
+    return new Promise((resolve)=>setTimeout(resolve, durationMs, resolveWith));
 }
-const x = {
-  audio: {
-    sampleHash: "",
-    oscillator: "",
-    maxChannels: 0,
-    channelCountMode: ""
-  }
-}, H = async (t) => new Promise((n) => {
-  try {
-    const e = new window.OfflineAudioContext(1, 5e3, 44100), o = e.createBufferSource(), r = e.createOscillator();
-    r.frequency.value = 1e3;
-    const a = e.createDynamicsCompressor();
-    a.threshold.value = -50, a.knee.value = 40, a.ratio.value = 12, a.attack.value = 0, a.release.value = 0.2, r.connect(a), a.connect(e.destination), r.start(), e.startRendering(), e.oncomplete = (s) => {
-      const l = s.renderedBuffer.getChannelData(0);
-      r.disconnect(), a.disconnect(), n({
-        audio: {
-          sampleHash: D(l),
-          oscillator: r.type,
-          maxChannels: e.destination.maxChannelCount,
-          channelCountMode: o.channelCountMode
+/**
+ * Creates and keeps an invisible iframe while the given function runs.
+ * The given function is called when the iframe is loaded and has a body.
+ * The iframe allows to measure DOM sizes inside itself.
+ *
+ * Notice: passing an initial HTML code doesn't work in IE.
+ *
+ * Warning for package users:
+ * This function is out of Semantic Versioning, i.e. can change unexpectedly. Usage is at your own risk.
+ */ async function withIframe(action, initialHtml, domPollInterval = 50) {
+    const d = document;
+    // document.body can be null while the page is loading
+    while(!d.body){
+        await wait(domPollInterval);
+    }
+    const iframe = d.createElement("iframe");
+    try {
+        await new Promise((_resolve, _reject)=>{
+            let isComplete = false;
+            const resolve = ()=>{
+                isComplete = true;
+                _resolve();
+            };
+            const reject = (error)=>{
+                isComplete = true;
+                _reject(error);
+            };
+            iframe.onload = resolve;
+            iframe.onerror = reject;
+            const { style } = iframe;
+            // Required for browsers to calculate the layout
+            style.setProperty("display", "block", "important");
+            style.position = "absolute";
+            style.top = "0";
+            style.left = "0";
+            style.visibility = "hidden";
+            if (initialHtml && "srcdoc" in iframe) {
+                iframe.srcdoc = initialHtml;
+            } else {
+                iframe.src = "about:blank";
+            }
+            d.body.appendChild(iframe);
+            // WebKit in WeChat doesn't fire the iframe's `onload` for some reason.
+            // This code checks for the loading state manually.
+            // See https://github.com/fingerprintjs/fingerprintjs/issues/645
+            const checkReadyState = ()=>{
+                // The ready state may never become 'complete' in Firefox despite the 'load' event being fired.
+                // So an infinite setTimeout loop can happen without this check.
+                // See https://github.com/fingerprintjs/fingerprintjs/pull/716#issuecomment-986898796
+                if (isComplete) {
+                    return;
+                }
+                // Make sure iframe.contentWindow and iframe.contentWindow.document are both loaded
+                // The contentWindow.document can miss in JSDOM (https://github.com/jsdom/jsdom).
+                if (iframe.contentWindow?.document?.readyState === "complete") {
+                    resolve();
+                } else {
+                    setTimeout(checkReadyState, 10);
+                }
+            };
+            checkReadyState();
+        });
+        while(!iframe.contentWindow?.document?.body){
+            await wait(domPollInterval);
         }
-      });
-    };
-  } catch (e) {
-    t && console.error("Error creating audio fingerprint:", e), n({
-      audio: {
+        return await action(iframe, iframe.contentWindow);
+    } finally{
+        iframe.parentNode?.removeChild(iframe);
+    }
+}
+
+;// CONCATENATED MODULE: ./src/components/audio.ts
+
+const emptyAudio = {
+    audio: {
         sampleHash: "",
         oscillator: "",
         maxChannels: 0,
         channelCountMode: ""
-      }
+    }
+};
+const getAudio = async (debug)=>{
+    return new Promise((resolve)=>{
+        try {
+            const audioContext = new window.OfflineAudioContext(1, 5000, 44100);
+            const audioBuffer = audioContext.createBufferSource();
+            const oscillator = audioContext.createOscillator();
+            oscillator.frequency.value = 1000;
+            const compressor = audioContext.createDynamicsCompressor();
+            compressor.threshold.value = -50;
+            compressor.knee.value = 40;
+            compressor.ratio.value = 12;
+            compressor.attack.value = 0;
+            compressor.release.value = 0.2;
+            oscillator.connect(compressor);
+            compressor.connect(audioContext.destination);
+            oscillator.start();
+            audioContext.startRendering();
+            audioContext.oncomplete = (event)=>{
+                const samples = event.renderedBuffer.getChannelData(0);
+                oscillator.disconnect();
+                compressor.disconnect();
+                resolve({
+                    audio: {
+                        sampleHash: hashFromFloat32Array(samples),
+                        oscillator: oscillator.type,
+                        maxChannels: audioContext.destination.maxChannelCount,
+                        channelCountMode: audioBuffer.channelCountMode
+                    }
+                });
+            };
+        } catch (error) {
+            if (debug) {
+                console.error("Error creating audio fingerprint:", error);
+            }
+            resolve({
+                audio: {
+                    sampleHash: "",
+                    oscillator: "",
+                    maxChannels: 0,
+                    channelCountMode: ""
+                }
+            });
+        }
     });
-  }
-}), v = { browser: "" }, P = async (t) => typeof navigator > "u" ? v : { browser: navigator.userAgent }, E = {
-  canvas: {
-    data: ""
-  }
-}, R = async (t) => {
-  try {
-    const o = Array.from(
-      { length: 3 },
-      () => _(300, 30)
-    ), r = N(o, 300, 30);
-    return {
-      canvas: {
-        data: (await w(r.data.toString())).toString()
-      }
-    };
-  } catch (o) {
-    return t && (console.error("Error creating canvas fingerprint"), console.info(o)), E;
-  }
-}, _ = (t, n) => {
-  const e = document.createElement("canvas"), o = e.getContext("2d");
-  if (!o)
-    return new ImageData(1, 1);
-  e.width = t, e.height = n;
-  const r = o.createLinearGradient(0, 0, e.width, e.height);
-  r.addColorStop(0, "red"), r.addColorStop(1 / 6, "orange"), r.addColorStop(2 / 6, "yellow"), r.addColorStop(3 / 6, "green"), r.addColorStop(4 / 6, "blue"), r.addColorStop(5 / 6, "indigo"), r.addColorStop(1, "violet"), o.fillStyle = r, o.fillRect(0, 0, e.width, e.height);
-  const a = "mmMwWLliI0O&1 - Les sanglots longs des violons de l'automne blessent mon coeur d'une langueur monotone";
-  return o.font = "26.321px Arial", o.fillStyle = "black", o.fillText(a, -5, 15), o.fillStyle = "rgba(0, 0, 255, 0.5)", o.fillText(a, -3.3, 17.7), o.beginPath(), o.moveTo(0, 0), o.lineTo(e.width * 2 / 7, e.height), o.strokeStyle = "white", o.lineWidth = 2, o.stroke(), o.getImageData(0, 0, e.width, e.height);
-}, F = (t) => {
-  if (t.length === 0)
-    return 0;
-  const n = {};
-  for (const o of t)
-    n[o] = (n[o] || 0) + 1;
-  let e = t[0];
-  for (const o in n)
-    n[o] > n[e] && (e = parseInt(o, 10));
-  return e;
-}, N = (t, n, e) => {
-  const o = [];
-  for (let s = 0; s < t[0].data.length; s++) {
-    const l = [];
-    for (let m = 0; m < t.length; m++)
-      l.push(t[m].data[s]);
-    o.push(F(l));
-  }
-  const r = o, a = new Uint8ClampedArray(r);
-  return new ImageData(a, n, e);
-}, G = [], L = "mmMwWLliI0O&1", k = "48px", h = ["monospace", "sans-serif", "serif"], S = [
-  "sans-serif-thin",
-  "ARNO PRO",
-  "Agency FB",
-  "Arabic Typesetting",
-  "Arial Unicode MS",
-  "AvantGarde Bk BT",
-  "BankGothic Md BT",
-  "Bitstream Vera Sans Mono",
-  "Calibri",
-  "Century",
-  "Century Gothic",
-  "Clarendon",
-  "EUROSTILE",
-  "Franklin Gothic",
-  "GOTHAM",
-  "Gill Sans",
-  "Helvetica Neue",
-  "Letter Gothic",
-  "Menlo",
-  "MS Outlook",
-  "MS Reference Specialty",
-  "MS UI Gothic",
-  "MT Extra",
-  "MYRIAD PRO",
-  "Marlett",
-  "Microsoft Uighur",
-  "Minion Pro",
-  "Monotype Corsiva",
-  "PMingLiU",
-  "Pristina",
-  "SCRIPTINA",
-  "SimHei",
-  "Small Fonts",
-  "Staccato222 BT",
-  "TRAJAN PRO",
-  "Univers CE 55 Medium",
-  "ZWAdobeF"
-], O = async (t) => T(async (n, { document: e }) => {
-  const o = e.body;
-  o.style.fontSize = k;
-  const r = e.createElement("div");
-  r.style.setProperty("visibility", "hidden", "important");
-  const a = {}, s = {}, l = (i) => {
-    const c = e.createElement("span"), { style: d } = c;
-    return d.position = "absolute", d.top = "0", d.left = "0", d.fontFamily = i, c.textContent = L, r.appendChild(c), c;
-  }, m = (i, c) => l(`'${i}',${c}`), p = () => h.map(l), u = () => {
-    const i = {};
-    for (const c of S)
-      i[c] = h.map(
-        (d) => m(c, d)
-      );
-    return i;
-  }, g = (i) => h.some(
-    (c, d) => i[d].offsetWidth !== a[c] || i[d].offsetHeight !== s[c]
-  ), f = p(), I = u();
-  o.appendChild(r);
-  for (let i = 0; i < h.length; i++)
-    a[h[i]] = f[i].offsetWidth, s[h[i]] = f[i].offsetHeight;
-  return S.filter((i) => g(I[i]));
-}), C = {
-  vendor: "",
-  vendorUnmasked: "",
-  renderer: "",
-  rendererUnmasked: "",
-  version: "",
-  shadingLanguageVersion: ""
-}, A = {
-  hardware: {
-    videocard: C,
-    architecture: 0,
-    deviceMemory: "undefined",
-    jsHeapSizeLimit: 0
-  }
 };
-function U() {
-  const t = document.createElement("canvas"), n = t.getContext("webgl") ?? t.getContext("experimental-webgl");
-  if (n && "getParameter" in n) {
-    const e = n.getExtension("WEBGL_debug_renderer_info");
-    return {
-      vendor: (n.getParameter(n.VENDOR) || "").toString(),
-      vendorUnmasked: e ? (n.getParameter(e.UNMASKED_VENDOR_WEBGL) || "").toString() : "",
-      renderer: (n.getParameter(n.RENDERER) || "").toString(),
-      rendererUnmasked: e ? (n.getParameter(e.UNMASKED_RENDERER_WEBGL) || "").toString() : "",
-      version: (n.getParameter(n.VERSION) || "").toString(),
-      shadingLanguageVersion: (n.getParameter(n.SHADING_LANGUAGE_VERSION) || "").toString()
+
+;// CONCATENATED MODULE: ./src/components/browser.ts
+const emptyBrowser = {
+    browser: ""
+};
+const getBrowser = async (_debug)=>{
+    return typeof navigator === "undefined" ? emptyBrowser : {
+        browser: navigator.userAgent
     };
-  }
-  return C;
+};
+
+;// CONCATENATED MODULE: ./src/components/canvas.ts
+
+const emptyCanvas = {
+    canvas: {
+        data: ""
+    }
+};
+const getCanvas = async (debug)=>{
+    const WIDTH = 300;
+    const HEIGHT = 30;
+    try {
+        /**
+		 * Creating 3 identical image data with same text and same colors,
+		 * and extracting the common pixels from them. This is a fingerprint
+		 * busting technique to defeat canvas counter-fingerprinting.
+		 */ const imageData = Array.from({
+            length: 3
+        }, ()=>generateImageData(WIDTH, HEIGHT));
+        const commonImageData = getCommonPixels(imageData, WIDTH, HEIGHT);
+        const hashedData = (await hashFromString(commonImageData.data.toString())).toString();
+        return {
+            canvas: {
+                data: hashedData
+            }
+        };
+    } catch (error) {
+        if (debug) {
+            console.error("Error creating canvas fingerprint");
+            console.info(error);
+        }
+        return emptyCanvas;
+    }
+};
+const generateImageData = (width, height)=>{
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        return new ImageData(1, 1);
+    }
+    canvas.width = width;
+    canvas.height = height;
+    // Create rainbow gradient for the background rectangle
+    const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+    gradient.addColorStop(0, "red");
+    gradient.addColorStop(1 / 6, "orange");
+    gradient.addColorStop(2 / 6, "yellow");
+    gradient.addColorStop(3 / 6, "green");
+    gradient.addColorStop(4 / 6, "blue");
+    gradient.addColorStop(5 / 6, "indigo");
+    gradient.addColorStop(1, "violet");
+    // Draw background rectangle with the rainbow gradient
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    // Draw some random text
+    // We use m or w because these two characters take up the maximum width.
+    // And we use a LLi so that the same matching fonts can get separated.
+    const randomText = "mmMwWLliI0O&1 - Les sanglots longs des violons de l'automne blessent mon coeur d'une langueur monotone";
+    ctx.font = "26.321px Arial";
+    ctx.fillStyle = "black";
+    ctx.fillText(randomText, -5, 15);
+    // Draw the same text with an offset, different color, and slight transparency
+    ctx.fillStyle = "rgba(0, 0, 255, 0.5)";
+    ctx.fillText(randomText, -3.3, 17.7);
+    // Draw a line crossing the image at an arbitrary angle
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(canvas.width * 2 / 7, canvas.height);
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    return imageData;
+};
+const getMostFrequent = (arr)=>{
+    if (arr.length === 0) {
+        return 0;
+    }
+    const frequencyMap = {};
+    for (const num of arr){
+        frequencyMap[num] = (frequencyMap[num] || 0) + 1;
+    }
+    let mostFrequent = arr[0];
+    // Find the number with the highest frequency
+    for(const num in frequencyMap){
+        if (frequencyMap[num] > frequencyMap[mostFrequent]) {
+            mostFrequent = parseInt(num, 10);
+        }
+    }
+    return mostFrequent;
+};
+const getCommonPixels = (images, width, height)=>{
+    const finalData = [];
+    for(let i = 0; i < images[0].data.length; i++){
+        const indice = [];
+        for(let u = 0; u < images.length; u++){
+            indice.push(images[u].data[i]);
+        }
+        finalData.push(getMostFrequent(indice));
+    }
+    const pixelData = finalData;
+    const pixelArray = new Uint8ClampedArray(pixelData);
+    return new ImageData(pixelArray, width, height);
+};
+
+;// CONCATENATED MODULE: ./src/components/fonts.ts
+
+const emptyFonts = [];
+// We use m or w because these two characters take up the maximum width.
+// And we use a LLi so that the same matching fonts can get separated.
+const testString = "mmMwWLliI0O&1";
+// We test using 48px font size, we may use any size. I guess larger the better.
+const textSize = "48px";
+// A font will be compared against all the three default fonts.
+// And if for any default fonts it doesn't match, then that font is available.
+const baseFonts = [
+    "monospace",
+    "sans-serif",
+    "serif"
+];
+const fontList = [
+    "sans-serif-thin",
+    "ARNO PRO",
+    "Agency FB",
+    "Arabic Typesetting",
+    "Arial Unicode MS",
+    "AvantGarde Bk BT",
+    "BankGothic Md BT",
+    "Bitstream Vera Sans Mono",
+    "Calibri",
+    "Century",
+    "Century Gothic",
+    "Clarendon",
+    "EUROSTILE",
+    "Franklin Gothic",
+    "GOTHAM",
+    "Gill Sans",
+    "Helvetica Neue",
+    "Letter Gothic",
+    "Menlo",
+    "MS Outlook",
+    "MS Reference Specialty",
+    "MS UI Gothic",
+    "MT Extra",
+    "MYRIAD PRO",
+    "Marlett",
+    "Microsoft Uighur",
+    "Minion Pro",
+    "Monotype Corsiva",
+    "PMingLiU",
+    "Pristina",
+    "SCRIPTINA",
+    "SimHei",
+    "Small Fonts",
+    "Staccato222 BT",
+    "TRAJAN PRO",
+    "Univers CE 55 Medium",
+    "ZWAdobeF"
+];
+const getFonts = async (_debug)=>{
+    return withIframe(async (_, { document })=>{
+        const holder = document.body;
+        holder.style.fontSize = textSize;
+        // div to load spans for the default fonts and the fonts to detect
+        const spansContainer = document.createElement("div");
+        spansContainer.style.setProperty("visibility", "hidden", "important");
+        const defaultWidth = {};
+        const defaultHeight = {};
+        // creates a span where the fonts will be loaded
+        const createSpan = (fontFamily)=>{
+            const span = document.createElement("span");
+            const { style } = span;
+            style.position = "absolute";
+            style.top = "0";
+            style.left = "0";
+            style.fontFamily = fontFamily;
+            span.textContent = testString;
+            spansContainer.appendChild(span);
+            return span;
+        };
+        // creates a span and load the font to detect and a base font for fallback
+        const createSpanWithFonts = (fontToDetect, baseFont)=>{
+            return createSpan(`'${fontToDetect}',${baseFont}`);
+        };
+        // creates spans for the base fonts and adds them to baseFontsDiv
+        const initializeBaseFontsSpans = ()=>{
+            return baseFonts.map(createSpan);
+        };
+        // creates spans for the fonts to detect and adds them to fontsDiv
+        const initializeFontsSpans = ()=>{
+            // Stores {fontName : [spans for that font]}
+            const spans = {};
+            for (const font of fontList){
+                spans[font] = baseFonts.map((baseFont)=>createSpanWithFonts(font, baseFont));
+            }
+            return spans;
+        };
+        // checks if a font is available
+        const isFontAvailable = (fontSpans)=>{
+            return baseFonts.some((baseFont, baseFontIndex)=>fontSpans[baseFontIndex].offsetWidth !== defaultWidth[baseFont] || fontSpans[baseFontIndex].offsetHeight !== defaultHeight[baseFont]);
+        };
+        // create spans for base fonts
+        const baseFontsSpans = initializeBaseFontsSpans();
+        // create spans for fonts to detect
+        const fontsSpans = initializeFontsSpans();
+        // add all the spans to the DOM
+        holder.appendChild(spansContainer);
+        // get the default width for the three base fonts
+        for(let index = 0; index < baseFonts.length; index++){
+            defaultWidth[baseFonts[index]] = baseFontsSpans[index].offsetWidth; // width for the default font
+            defaultHeight[baseFonts[index]] = baseFontsSpans[index].offsetHeight; // height for the default font
+        }
+        // check available fonts
+        return fontList.filter((font)=>isFontAvailable(fontsSpans[font]));
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/hardware.ts
+const emptyVideoCard = {
+    vendor: "",
+    vendorUnmasked: "",
+    renderer: "",
+    rendererUnmasked: "",
+    version: "",
+    shadingLanguageVersion: ""
+};
+const emptyHardware = {
+    hardware: {
+        videocard: emptyVideoCard,
+        architecture: 0,
+        deviceMemory: "undefined",
+        jsHeapSizeLimit: 0
+    }
+};
+function getVideoCard() {
+    const canvas = document.createElement("canvas");
+    const gl = canvas.getContext("webgl") ?? canvas.getContext("experimental-webgl");
+    if (gl && "getParameter" in gl) {
+        const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        return {
+            vendor: (gl.getParameter(gl.VENDOR) || "").toString(),
+            vendorUnmasked: debugInfo ? (gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) || "").toString() : "",
+            renderer: (gl.getParameter(gl.RENDERER) || "").toString(),
+            rendererUnmasked: debugInfo ? (gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || "").toString() : "",
+            version: (gl.getParameter(gl.VERSION) || "").toString(),
+            shadingLanguageVersion: (gl.getParameter(gl.SHADING_LANGUAGE_VERSION) || "").toString()
+        };
+    }
+    return emptyVideoCard;
 }
-function B() {
-  const t = new Float32Array(1), n = new Uint8Array(t.buffer);
-  return t[0] = 1 / 0, t[0] = t[0] - t[0], n[3];
+function getArchitecture() {
+    const f = new Float32Array(1);
+    const u8 = new Uint8Array(f.buffer);
+    f[0] = Infinity;
+    f[0] = f[0] - f[0];
+    return u8[3];
 }
-const W = () => navigator.deviceMemory || 0, V = () => window.performance && window.performance.memory || {
-  jsHeapSizeLimit: 0
-}, z = async (t) => new Promise((n) => {
-  try {
-    const e = W(), o = V();
-    n({
-      hardware: {
-        videocard: U(),
-        architecture: B(),
-        deviceMemory: e.toString() || "undefined",
-        jsHeapSizeLimit: o.jsHeapSizeLimit || 0
-      }
+// @ts-ignore
+const getDeviceMemory = ()=>navigator.deviceMemory || 0;
+const getMemoryInfo = ()=>window.performance && window.performance.memory || {
+        jsHeapSizeLimit: 0
+    };
+const getHardware = async (debug)=>{
+    return new Promise((resolve)=>{
+        try {
+            const deviceMemory = getDeviceMemory();
+            const memoryInfo = getMemoryInfo();
+            resolve({
+                hardware: {
+                    videocard: getVideoCard(),
+                    architecture: getArchitecture(),
+                    deviceMemory: deviceMemory.toString() || "undefined",
+                    jsHeapSizeLimit: memoryInfo.jsHeapSizeLimit || 0
+                }
+            });
+        } catch (error) {
+            if (debug) {
+                console.error("Error getting hardware data");
+                console.info(error);
+            }
+            resolve(emptyHardware);
+        }
     });
-  } catch (e) {
-    t && (console.error("Error getting hardware data"), console.info(e)), n(A);
-  }
-}), j = {
-  locales: {
-    languages: "",
-    timezone: ""
-  }
-}, $ = async (t) => new Promise((n) => {
-  n({
+};
+
+;// CONCATENATED MODULE: ./src/components/locale.ts
+const emptyLocales = {
     locales: {
-      languages: navigator.language,
-      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+        languages: "",
+        timezone: ""
     }
-  });
-}), M = {
-  screen: {
-    colorDepth: 0,
-    pixelDepth: 0,
-    isTouchScreen: !1,
-    maxTouchPoints: 0,
-    mediaMatches: []
-  }
-}, q = async (t) => new Promise((n) => {
-  try {
-    const e = window.screen, o = {
-      screen: {
-        colorDepth: e.colorDepth,
-        pixelDepth: e.pixelDepth,
-        isTouchScreen: navigator.maxTouchPoints > 0,
-        maxTouchPoints: navigator.maxTouchPoints,
-        mediaMatches: J()
-      }
+};
+const getLocales = async (_debug)=>{
+    return new Promise((resolve)=>{
+        resolve({
+            locales: {
+                languages: navigator.language,
+                timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+            }
+        });
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/screen.ts
+const emptyScreen = {
+    screen: {
+        colorDepth: 0,
+        pixelDepth: 0,
+        isTouchScreen: false,
+        maxTouchPoints: 0,
+        mediaMatches: []
+    }
+};
+const getScreen = async (debug)=>{
+    return new Promise((resolve)=>{
+        try {
+            const screen = window.screen;
+            const screenData = {
+                screen: {
+                    colorDepth: screen.colorDepth,
+                    pixelDepth: screen.pixelDepth,
+                    isTouchScreen: navigator.maxTouchPoints > 0,
+                    maxTouchPoints: navigator.maxTouchPoints,
+                    mediaMatches: mediaMatches()
+                }
+            };
+            resolve(screenData);
+        } catch (error) {
+            if (debug) {
+                console.error("Error creating screen fingerprint");
+                console.info(error);
+            }
+            resolve(emptyScreen);
+        }
+    });
+};
+function mediaMatches() {
+    const results = [];
+    const mediaQueries = {
+        "prefers-contrast": [
+            "high",
+            "more",
+            "low",
+            "less",
+            "forced",
+            "no-preference"
+        ],
+        "any-hover": [
+            "hover",
+            "none"
+        ],
+        "any-pointer": [
+            "none",
+            "coarse",
+            "fine"
+        ],
+        pointer: [
+            "none",
+            "coarse",
+            "fine"
+        ],
+        hover: [
+            "hover",
+            "none"
+        ],
+        update: [
+            "fast",
+            "slow"
+        ],
+        "inverted-colors": [
+            "inverted",
+            "none"
+        ],
+        "prefers-reduced-motion": [
+            "reduce",
+            "no-preference"
+        ],
+        "prefers-reduced-transparency": [
+            "reduce",
+            "no-preference"
+        ],
+        scripting: [
+            "none",
+            "initial-only",
+            "enabled"
+        ],
+        "forced-colors": [
+            "active",
+            "none"
+        ],
+        "color-gamut": [
+            "srgb",
+            "p3",
+            "rec2020"
+        ]
     };
-    n(o);
-  } catch (e) {
-    t && (console.error("Error creating screen fingerprint"), console.info(e)), n(M);
-  }
-});
-function J() {
-  const t = [], n = {
-    "prefers-contrast": [
-      "high",
-      "more",
-      "low",
-      "less",
-      "forced",
-      "no-preference"
-    ],
-    "any-hover": ["hover", "none"],
-    "any-pointer": ["none", "coarse", "fine"],
-    pointer: ["none", "coarse", "fine"],
-    hover: ["hover", "none"],
-    update: ["fast", "slow"],
-    "inverted-colors": ["inverted", "none"],
-    "prefers-reduced-motion": ["reduce", "no-preference"],
-    "prefers-reduced-transparency": ["reduce", "no-preference"],
-    scripting: ["none", "initial-only", "enabled"],
-    "forced-colors": ["active", "none"],
-    "color-gamut": ["srgb", "p3", "rec2020"]
-  };
-  return Object.keys(n).forEach((e) => {
-    n[e].forEach((o) => {
-      matchMedia(`(${e}: ${o})`).matches && t.push(`${e}: ${o}`);
+    Object.keys(mediaQueries).forEach((key)=>{
+        mediaQueries[key].forEach((value)=>{
+            if (matchMedia(`(${key}: ${value})`).matches) {
+                results.push(`${key}: ${value}`);
+            }
+        });
     });
-  }), t;
+    return results;
 }
-const K = async (t) => {
-  try {
-    return {
-      system: {
-        platform: navigator.platform,
-        cookieEnabled: navigator.cookieEnabled,
-        productSub: navigator.productSub,
-        product: navigator.product
-      }
-    };
-  } catch (n) {
-    return t && (console.error("Error getting system data"), console.info(n)), b;
-  }
-}, b = {
-  system: {
-    platform: "",
-    cookieEnabled: !1,
-    productSub: "",
-    product: ""
-  }
-}, Z = async (t) => {
-  try {
-    return Promise.all([
-      H(t),
-      P(),
-      R(t),
-      O(),
-      z(t),
-      $(),
-      q(t),
-      K(t)
-    ]);
-  } catch {
-    return [
-      x,
-      v,
-      E,
-      G,
-      A,
-      j,
-      M,
-      b
-    ];
-  }
-}, Q = async (t) => {
-  try {
-    const n = await Z(t);
-    return await w(JSON.stringify(n));
-  } catch (n) {
-    return t && (console.error("Error getting fingerprint hash"), console.info(n)), "";
-  }
+
+;// CONCATENATED MODULE: ./src/components/system.ts
+const getSystem = async (debug)=>{
+    try {
+        return {
+            system: {
+                platform: navigator.platform,
+                cookieEnabled: navigator.cookieEnabled,
+                productSub: navigator.productSub,
+                product: navigator.product
+            }
+        };
+    } catch (error) {
+        if (debug) {
+            console.error("Error getting system data");
+            console.info(error);
+        }
+        return emptySystem;
+    }
+};
+const emptySystem = {
+    system: {
+        platform: "",
+        cookieEnabled: false,
+        productSub: "",
+        product: ""
+    }
 };
-export {
-  Z as getFingerprintData,
-  Q as getFingerprintHash
+
+;// CONCATENATED MODULE: ./src/common/fingerprint.ts
+
+
+
+
+
+
+
+
+
+const getFingerprintData = async (debug)=>{
+    try {
+        return Promise.all([
+            getAudio(debug),
+            getBrowser(debug),
+            getCanvas(debug),
+            getFonts(debug),
+            getHardware(debug),
+            getLocales(debug),
+            getScreen(debug),
+            getSystem(debug)
+        ]);
+    } catch (_error) {
+        return [
+            emptyAudio,
+            emptyBrowser,
+            emptyCanvas,
+            emptyFonts,
+            emptyHardware,
+            emptyLocales,
+            emptyScreen,
+            emptySystem
+        ];
+    }
+};
+const getFingerprintHash = async (debug)=>{
+    try {
+        const data = await getFingerprintData(debug);
+        return await hashFromString(JSON.stringify(data));
+    } catch (_error) {
+        if (debug) {
+            console.error("Error getting fingerprint hash");
+            console.info(_error);
+        }
+        return "";
+    }
 };
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+export { getFingerprintData, getFingerprintHash };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-fingerprint",
-	"version": "1.1.3",
+	"version": "1.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -34,5 +34,5 @@
 		"test:watch": "vitest",
 		"test": "vitest run"
 	},
-	"gitHead": "a1afd6e4613b1da7abf61d10a72614611521fb39"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }