preact-missing-hooks 4.7.0 → 4.9.0

package/dist/react.js

@@ -2161,7 +2161,346 @@ function usePoll(pollFn, options = {}) {
     return { data, done, error, pollCount, start, stop };
 }
 
+const UNKNOWN_BROWSER = { name: "Unknown", version: "" };
+const UNKNOWN_OS = { name: "Unknown", version: "" };
+const SSR_DEVICE_DATA = {
+    userAgent: "",
+    language: "en",
+    languages: ["en"],
+    platform: "",
+    browser: UNKNOWN_BROWSER,
+    os: UNKNOWN_OS,
+    cookieEnabled: false,
+    online: true,
+    maxTouchPoints: 0,
+    vendor: "",
+    touch: false,
+    screen: {
+        width: 0,
+        height: 0,
+        availWidth: 0,
+        availHeight: 0,
+        colorDepth: 24,
+        pixelRatio: 1,
+    },
+    viewport: { width: 0, height: 0 },
+    reducedMotion: false,
+    colorScheme: "no-preference",
+};
+const NOT_A_BRAND = /not.?a.?brand/i;
+/** Parse browser and OS from a user-agent string (sync fallback). */
+function parseUserAgent(userAgent) {
+    var _a;
+    const browser = Object.assign({}, UNKNOWN_BROWSER);
+    const os = Object.assign({}, UNKNOWN_OS);
+    if (!userAgent) {
+        return { browser, os };
+    }
+    const win = userAgent.match(/Windows NT ([\d.]+)/);
+    if (win) {
+        os.name = "Windows";
+        os.version = win[1];
+    }
+    else {
+        const mac = userAgent.match(/Mac OS X ([\d._]+)/);
+        if (mac) {
+            os.name = "macOS";
+            os.version = mac[1].replace(/_/g, ".");
+        }
+        else {
+            const android = userAgent.match(/Android ([\d.]+)/);
+            if (android) {
+                os.name = "Android";
+                os.version = android[1];
+            }
+            else {
+                const ios = userAgent.match(/(?:iPhone OS|CPU OS) ([\d_]+)/);
+                if (ios) {
+                    os.name = "iOS";
+                    os.version = ios[1].replace(/_/g, ".");
+                }
+                else if (/Linux/.test(userAgent)) {
+                    os.name = "Linux";
+                    const linux = userAgent.match(/Linux ([\d.]+)/);
+                    os.version = (_a = linux === null || linux === void 0 ? void 0 : linux[1]) !== null && _a !== void 0 ? _a : "";
+                }
+            }
+        }
+    }
+    const edg = userAgent.match(/Edg(?:A|iOS)?\/([\d.]+)/);
+    const opera = userAgent.match(/OPR\/([\d.]+)/);
+    const firefox = userAgent.match(/Firefox\/([\d.]+)/);
+    const safari = /Version\/([\d.]+)/.test(userAgent) &&
+        /Safari/.test(userAgent) &&
+        !/Chrome|Chromium|Edg|OPR/.test(userAgent)
+        ? userAgent.match(/Version\/([\d.]+)/)
+        : null;
+    const chrome = userAgent.match(/Chrome\/([\d.]+)/);
+    if (edg) {
+        browser.name = "Edge";
+        browser.version = edg[1];
+    }
+    else if (opera) {
+        browser.name = "Opera";
+        browser.version = opera[1];
+    }
+    else if (firefox) {
+        browser.name = "Firefox";
+        browser.version = firefox[1];
+    }
+    else if (safari) {
+        browser.name = "Safari";
+        browser.version = safari[1];
+    }
+    else if (chrome) {
+        browser.name = "Chrome";
+        browser.version = chrome[1];
+    }
+    return { browser, os };
+}
+function pickBrowserBrand(brands) {
+    const meaningful = brands.find((b) => !NOT_A_BRAND.test(b.brand));
+    const pick = meaningful !== null && meaningful !== void 0 ? meaningful : brands[0];
+    if (!pick)
+        return Object.assign({}, UNKNOWN_BROWSER);
+    return { name: pick.brand, version: pick.version };
+}
+function mergeBrowserOsFromUaData(uaData, fallback) {
+    var _a, _b;
+    const browser = ((_a = uaData.brands) === null || _a === void 0 ? void 0 : _a.length)
+        ? pickBrowserBrand(uaData.brands)
+        : Object.assign({}, fallback.browser);
+    const os = {
+        name: ((_b = uaData.platform) === null || _b === void 0 ? void 0 : _b.trim()) || fallback.os.name,
+        version: fallback.os.version,
+    };
+    return { browser, os };
+}
+function getColorScheme() {
+    if (typeof window === "undefined" || !window.matchMedia) {
+        return "no-preference";
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+    }
+    if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+        return "light";
+    }
+    return "no-preference";
+}
+function getReducedMotion() {
+    if (typeof window === "undefined" || !window.matchMedia) {
+        return false;
+    }
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** Reads synchronous device / browser data from Navigator, Screen, and matchMedia. */
+function getDeviceData() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    if (typeof navigator === "undefined") {
+        return SSR_DEVICE_DATA;
+    }
+    const nav = navigator;
+    const screen = typeof globalThis.screen !== "undefined" ? globalThis.screen : null;
+    const win = typeof globalThis.window !== "undefined" ? globalThis.window : null;
+    const ua = (_a = nav.userAgent) !== null && _a !== void 0 ? _a : "";
+    const parsed = parseUserAgent(ua);
+    const uaData = nav.userAgentData;
+    const { browser, os } = uaData
+        ? mergeBrowserOsFromUaData(uaData, parsed)
+        : parsed;
+    const data = {
+        userAgent: ua,
+        language: (_b = nav.language) !== null && _b !== void 0 ? _b : "",
+        languages: nav.languages ? [...nav.languages] : [],
+        platform: (_c = nav.platform) !== null && _c !== void 0 ? _c : "",
+        browser,
+        os,
+        cookieEnabled: Boolean(nav.cookieEnabled),
+        online: Boolean(nav.onLine),
+        maxTouchPoints: (_d = nav.maxTouchPoints) !== null && _d !== void 0 ? _d : 0,
+        vendor: (_e = nav.vendor) !== null && _e !== void 0 ? _e : "",
+        touch: ((_f = nav.maxTouchPoints) !== null && _f !== void 0 ? _f : 0) > 0,
+        screen: {
+            width: (_g = screen === null || screen === void 0 ? void 0 : screen.width) !== null && _g !== void 0 ? _g : 0,
+            height: (_h = screen === null || screen === void 0 ? void 0 : screen.height) !== null && _h !== void 0 ? _h : 0,
+            availWidth: (_j = screen === null || screen === void 0 ? void 0 : screen.availWidth) !== null && _j !== void 0 ? _j : 0,
+            availHeight: (_k = screen === null || screen === void 0 ? void 0 : screen.availHeight) !== null && _k !== void 0 ? _k : 0,
+            colorDepth: (_l = screen === null || screen === void 0 ? void 0 : screen.colorDepth) !== null && _l !== void 0 ? _l : 24,
+            pixelRatio: (_m = win === null || win === void 0 ? void 0 : win.devicePixelRatio) !== null && _m !== void 0 ? _m : 1,
+        },
+        viewport: {
+            width: (_o = win === null || win === void 0 ? void 0 : win.innerWidth) !== null && _o !== void 0 ? _o : 0,
+            height: (_p = win === null || win === void 0 ? void 0 : win.innerHeight) !== null && _p !== void 0 ? _p : 0,
+        },
+        reducedMotion: getReducedMotion(),
+        colorScheme: getColorScheme(),
+    };
+    if (typeof nav.hardwareConcurrency === "number") {
+        data.hardwareConcurrency = nav.hardwareConcurrency;
+    }
+    if (typeof nav.deviceMemory === "number") {
+        data.deviceMemory = nav.deviceMemory;
+    }
+    if (uaData) {
+        data.userAgentData = {
+            mobile: Boolean(uaData.mobile),
+            platform: (_q = uaData.platform) !== null && _q !== void 0 ? _q : "",
+            brands: uaData.brands ? [...uaData.brands] : [],
+        };
+    }
+    return data;
+}
+function readHighEntropyBrowserOs(uaData, current) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        if (!uaData.getHighEntropyValues)
+            return undefined;
+        try {
+            const hints = yield uaData.getHighEntropyValues([
+                "platformVersion",
+                "fullVersionList",
+            ]);
+            const browser = ((_a = hints.fullVersionList) === null || _a === void 0 ? void 0 : _a.length)
+                ? pickBrowserBrand(hints.fullVersionList)
+                : Object.assign({}, current.browser);
+            const os = {
+                name: current.os.name,
+                version: ((_b = hints.platformVersion) === null || _b === void 0 ? void 0 : _b.trim()) || current.os.version,
+            };
+            return { browser, os };
+        }
+        catch (_c) {
+            return undefined;
+        }
+    });
+}
+function readBattery() {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (typeof navigator === "undefined")
+            return undefined;
+        const getBattery = navigator.getBattery;
+        if (!getBattery)
+            return undefined;
+        try {
+            const battery = yield getBattery.call(navigator);
+            return { charging: battery.charging, level: battery.level };
+        }
+        catch (_a) {
+            return undefined;
+        }
+    });
+}
+/**
+ * Extracts device and browser data from native Navigator, Screen, window, and
+ * matchMedia APIs. Updates on resize, orientation, online/offline, and
+ * prefers-color-scheme / prefers-reduced-motion changes. Optionally polls the
+ * Battery Status API when available.
+ *
+ * @param options - `includeBattery` (default true), `batteryPollIntervalMs` (default 60000)
+ * @returns Current {@link DeviceData} snapshot
+ *
+ * @example
+ * ```tsx
+ * function DevicePanel() {
+ *   const device = useDeviceData();
+ *   return (
+ *     <dl>
+ *       <dt>Browser</dt><dd>{device.browser.name} {device.browser.version}</dd>
+ *       <dt>OS</dt><dd>{device.os.name} {device.os.version}</dd>
+ *       <dt>Language</dt><dd>{device.language}</dd>
+ *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
+ *     </dl>
+ *   );
+ * }
+ * ```
+ */
+function useDeviceData(options = {}) {
+    const { includeBattery = true, batteryPollIntervalMs = 60000, includeHighEntropy = true, } = options;
+    const [data, setData] = react.useState(() => getDeviceData());
+    const refresh = react.useCallback(() => {
+        setData((prev) => {
+            const next = getDeviceData();
+            return Object.assign(Object.assign({}, next), (prev.battery ? { battery: prev.battery } : {}));
+        });
+    }, []);
+    react.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (typeof window === "undefined")
+            return;
+        const onResize = () => refresh();
+        window.addEventListener("resize", onResize);
+        window.addEventListener("orientationchange", onResize);
+        window.addEventListener("online", refresh);
+        window.addEventListener("offline", refresh);
+        const reducedMotionMq = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)");
+        const darkMq = (_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, "(prefers-color-scheme: dark)");
+        const lightMq = (_c = window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(window, "(prefers-color-scheme: light)");
+        const onMediaChange = () => refresh();
+        (_d = reducedMotionMq === null || reducedMotionMq === void 0 ? void 0 : reducedMotionMq.addEventListener) === null || _d === void 0 ? void 0 : _d.call(reducedMotionMq, "change", onMediaChange);
+        (_e = darkMq === null || darkMq === void 0 ? void 0 : darkMq.addEventListener) === null || _e === void 0 ? void 0 : _e.call(darkMq, "change", onMediaChange);
+        (_f = lightMq === null || lightMq === void 0 ? void 0 : lightMq.addEventListener) === null || _f === void 0 ? void 0 : _f.call(lightMq, "change", onMediaChange);
+        return () => {
+            var _a, _b, _c;
+            window.removeEventListener("resize", onResize);
+            window.removeEventListener("orientationchange", onResize);
+            window.removeEventListener("online", refresh);
+            window.removeEventListener("offline", refresh);
+            (_a = reducedMotionMq === null || reducedMotionMq === void 0 ? void 0 : reducedMotionMq.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(reducedMotionMq, "change", onMediaChange);
+            (_b = darkMq === null || darkMq === void 0 ? void 0 : darkMq.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(darkMq, "change", onMediaChange);
+            (_c = lightMq === null || lightMq === void 0 ? void 0 : lightMq.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(lightMq, "change", onMediaChange);
+        };
+    }, [refresh]);
+    react.useEffect(() => {
+        if (!includeHighEntropy || typeof navigator === "undefined")
+            return;
+        const uaData = navigator.userAgentData;
+        if (!(uaData === null || uaData === void 0 ? void 0 : uaData.getHighEntropyValues))
+            return;
+        let cancelled = false;
+        const updateHighEntropy = () => __awaiter(this, void 0, void 0, function* () {
+            const base = getDeviceData();
+            const enriched = yield readHighEntropyBrowserOs(uaData, {
+                browser: base.browser,
+                os: base.os,
+            });
+            if (cancelled || !enriched)
+                return;
+            setData((prev) => (Object.assign(Object.assign({}, prev), { browser: enriched.browser, os: enriched.os })));
+        });
+        void updateHighEntropy();
+        return () => {
+            cancelled = true;
+        };
+    }, [includeHighEntropy]);
+    react.useEffect(() => {
+        if (!includeBattery || typeof navigator === "undefined")
+            return;
+        let cancelled = false;
+        let intervalId;
+        const updateBattery = () => __awaiter(this, void 0, void 0, function* () {
+            const battery = yield readBattery();
+            if (cancelled || battery === undefined)
+                return;
+            setData((prev) => (Object.assign(Object.assign({}, prev), { battery })));
+        });
+        void updateBattery();
+        if (batteryPollIntervalMs > 0) {
+            intervalId = setInterval(() => void updateBattery(), batteryPollIntervalMs);
+        }
+        return () => {
+            cancelled = true;
+            if (intervalId !== undefined)
+                clearInterval(intervalId);
+        };
+    }, [includeBattery, batteryPollIntervalMs]);
+    return data;
+}
+
+exports.getDeviceData = getDeviceData;
+exports.parseUserAgent = parseUserAgent;
 exports.useClipboard = useClipboard;
+exports.useDeviceData = useDeviceData;
 exports.useEventBus = useEventBus;
 exports.useIndexedDB = useIndexedDB;
 exports.useLLMMetadata = useLLMMetadata;

package/dist/useDeviceData.d.ts

@@ -0,0 +1,106 @@
+/** Parsed Client Hints from `navigator.userAgentData` when available */
+export interface UserAgentDataInfo {
+    mobile: boolean;
+    platform: string;
+    brands: ReadonlyArray<{
+        brand: string;
+        version: string;
+    }>;
+}
+/** Screen and display metrics from `screen` and `window` */
+export interface DeviceScreenInfo {
+    width: number;
+    height: number;
+    availWidth: number;
+    availHeight: number;
+    colorDepth: number;
+    pixelRatio: number;
+}
+/** Viewport size (`window.innerWidth` / `innerHeight`) */
+export interface DeviceViewportInfo {
+    width: number;
+    height: number;
+}
+/** Battery status from the Battery Status API when available */
+export interface DeviceBatteryInfo {
+    charging: boolean;
+    level: number;
+}
+/** Detected browser name and version */
+export interface DeviceBrowserInfo {
+    name: string;
+    version: string;
+}
+/** Detected operating system name and version */
+export interface DeviceOsInfo {
+    name: string;
+    version: string;
+}
+/** Snapshot of device / browser data from native Navigator and related APIs */
+export interface DeviceData {
+    userAgent: string;
+    language: string;
+    languages: readonly string[];
+    platform: string;
+    /** Detected browser (from Client Hints or user-agent parsing) */
+    browser: DeviceBrowserInfo;
+    /** Detected OS (from Client Hints or user-agent parsing) */
+    os: DeviceOsInfo;
+    cookieEnabled: boolean;
+    online: boolean;
+    hardwareConcurrency?: number;
+    /** Approximate device RAM in GB (Chrome / some browsers only) */
+    deviceMemory?: number;
+    maxTouchPoints: number;
+    vendor: string;
+    touch: boolean;
+    screen: DeviceScreenInfo;
+    viewport: DeviceViewportInfo;
+    userAgentData?: UserAgentDataInfo;
+    reducedMotion: boolean;
+    colorScheme: "light" | "dark" | "no-preference";
+    battery?: DeviceBatteryInfo;
+}
+export interface UseDeviceDataOptions {
+    /** Fetch battery info when the Battery Status API exists (default: true) */
+    includeBattery?: boolean;
+    /** Battery refresh interval in ms (default: 60000) */
+    batteryPollIntervalMs?: number;
+    /**
+     * Request high-entropy Client Hints (`platformVersion`, `fullVersionList`)
+     * when `navigator.userAgentData` supports it (default: true)
+     */
+    includeHighEntropy?: boolean;
+}
+/** Parse browser and OS from a user-agent string (sync fallback). */
+export declare function parseUserAgent(userAgent: string): {
+    browser: DeviceBrowserInfo;
+    os: DeviceOsInfo;
+};
+/** Reads synchronous device / browser data from Navigator, Screen, and matchMedia. */
+export declare function getDeviceData(): DeviceData;
+/**
+ * Extracts device and browser data from native Navigator, Screen, window, and
+ * matchMedia APIs. Updates on resize, orientation, online/offline, and
+ * prefers-color-scheme / prefers-reduced-motion changes. Optionally polls the
+ * Battery Status API when available.
+ *
+ * @param options - `includeBattery` (default true), `batteryPollIntervalMs` (default 60000)
+ * @returns Current {@link DeviceData} snapshot
+ *
+ * @example
+ * ```tsx
+ * function DevicePanel() {
+ *   const device = useDeviceData();
+ *   return (
+ *     <dl>
+ *       <dt>Browser</dt><dd>{device.browser.name} {device.browser.version}</dd>
+ *       <dt>OS</dt><dd>{device.os.name} {device.os.version}</dd>
+ *       <dt>Language</dt><dd>{device.language}</dd>
+ *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
+ *     </dl>
+ *   );
+ * }
+ * ```
+ */
+export declare function useDeviceData(options?: UseDeviceDataOptions): DeviceData;

package/docs/README.md

@@ -41,6 +41,7 @@ Open `docs/index.html` in a browser that supports ES modules and import maps. Th
 | **useWrappedChildren**     | Children buttons get injected styles.                                                                                                                                                                 |
 | **usePreferredTheme**      | Shows light / dark / no-preference from system.                                                                                                                                                       |
 | **useNetworkState**        | Online/offline and connection type.                                                                                                                                                                   |
+| **useDeviceData**          | Live browser/OS name & version (Client Hints + UA parse), language, CPUs, memory, viewport, screen, touch, theme prefs, UA brands, optional battery.                                                    |
 | **usePrefetch**            | Hover or click to prefetch a URL (document or fetch); see prefetched status.                                                                                                                          |
 | **usePoll**                | Poll until done (3 ticks); see poll count and result. Stop button to cancel.                                                                                                                          |
 | **useClipboard**           | Copy and paste; see “Copied!” and pasted text.                                                                                                                                                        |

package/docs/main.js

@@ -23,6 +23,7 @@ const {
   useRBAC,
   usePrefetch,
   usePoll,
+  useDeviceData,
 } = await import(
   isLocal ? '../dist/index.module.js' : 'https://unpkg.com/preact-missing-hooks/dist/index.module.js'
 );
@@ -86,6 +87,51 @@ function DemoNetworkState() {
   );
 }
 
+function DemoDeviceData() {
+  const device = useDeviceData({ includeBattery: true, includeHighEntropy: true });
+  const formatBrowser = () =>
+    device.browser.name + (device.browser.version ? ' ' + device.browser.version : '');
+  const formatOs = () =>
+    device.os.name + (device.os.version ? ' ' + device.os.version : '');
+  const rows = [
+    ['Browser', formatBrowser()],
+    ['OS', formatOs()],
+    ['Language', device.language],
+    ['Platform (navigator)', device.platform || '—'],
+    ['CPUs', device.hardwareConcurrency != null ? String(device.hardwareConcurrency) : '—'],
+    ['Memory (GB)', device.deviceMemory != null ? String(device.deviceMemory) : '—'],
+    ['Viewport', device.viewport.width + '×' + device.viewport.height],
+    ['Screen', device.screen.width + '×' + device.screen.height + ' @' + device.screen.pixelRatio + 'x'],
+    ['Touch', device.touch ? 'yes' : 'no'],
+    ['Color scheme', device.colorScheme],
+    ['Reduced motion', device.reducedMotion ? 'yes' : 'no'],
+    ['Online', device.online ? 'yes' : 'no'],
+  ];
+  if (device.userAgentData?.mobile) {
+    rows.push(['Mobile (Client Hints)', 'yes']);
+  }
+  if (device.userAgentData?.brands?.length) {
+    rows.push([
+      'UA brands',
+      device.userAgentData.brands.map((b) => b.brand + '/' + b.version).join(', '),
+    ]);
+  }
+  if (device.battery) {
+    rows.push([
+      'Battery',
+      Math.round(device.battery.level * 100) + '%' + (device.battery.charging ? ' (charging)' : ''),
+    ]);
+  }
+  return h('div', { class: 'status', style: { fontSize: '0.85rem' } },
+    rows.map(([label, value]) =>
+      h('div', { key: label, style: { marginBottom: '0.25rem' } },
+        h('strong', {}, label + ': '),
+        value
+      )
+    )
+  );
+}
+
 function DemoPrefetch() {
   const { prefetch, isPrefetched } = usePrefetch();
   const [lastUrl, setLastUrl] = useState('');
@@ -562,6 +608,13 @@ const HOOKS = [
     code: `const state = useNetworkState();\n// state.online, state.effectiveType, ...`,
     Live: DemoNetworkState,
   },
+  {
+    name: 'useDeviceData',
+    flow: 'Component → useDeviceData() → Client Hints + UA parse → browser/os → Screen + matchMedia (+ battery)',
+    summary: 'Device/browser snapshot: browser name & version, OS name & version (Client Hints + UA fallback), language, CPUs, memory, viewport, screen, touch, theme prefs, optional battery.',
+    code: `const device = useDeviceData({ includeHighEntropy: true });\n// device.browser.name, device.browser.version\n// device.os.name, device.os.version\n// device.viewport, device.colorScheme, device.battery`,
+    Live: DemoDeviceData,
+  },
   {
     name: 'usePrefetch',
     flow: 'Component → usePrefetch() → prefetch(url, options?) → link rel=prefetch or fetch()',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-missing-hooks",
-  "version": "4.7.0",
+  "version": "4.9.0",
   "description": "A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.",
   "author": "Prakhar Dubey",
   "license": "MIT",
@@ -102,6 +102,11 @@
       "import": "./dist/usePoll.module.js",
       "require": "./dist/usePoll.js"
     },
+    "./useDeviceData": {
+      "types": "./dist/useDeviceData.d.ts",
+      "import": "./dist/useDeviceData.module.js",
+      "require": "./dist/useDeviceData.js"
+    },
     "./react": {
       "types": "./dist/index.d.ts",
       "import": "./dist/react.module.js",
@@ -109,7 +114,7 @@
     }
   },
   "scripts": {
-    "build": "microbundle --alias react=preact/compat && npm run build:react && node scripts/generate-entry.cjs",
+    "build": "node scripts/ensure-microbundle-patch.cjs && microbundle --alias react=preact/compat && npm run build:react && node scripts/generate-entry.cjs",
     "llm:generate": "hayagriva-llm generate --mode ai --include-src --verbose",
     "build:react": "rollup -c scripts/rollup.react.config.cjs",
     "dev": "microbundle watch",
@@ -122,7 +127,7 @@
     "lint": "eslint src",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
-    "prepare": "husky",
+    "prepare": "husky && node scripts/ensure-microbundle-patch.cjs",
     "clean:cache": "node -e \"try{require('fs').rmSync('node_modules/.cache',{recursive:true,force:true});console.log('Cache cleared');}catch(e){}\"",
     "size": "npm run clean:cache && npm run build && size-limit"
   },
@@ -156,6 +161,7 @@
     "useClipboard",
     "usePrefetch",
     "usePoll",
+    "useDeviceData",
     "useRageClick",
     "rage click",
     "sentry",

package/scripts/ensure-microbundle-patch.cjs

@@ -0,0 +1,46 @@
+/**
+ * Patches microbundle to pass clean: true to rollup-plugin-typescript2.
+ * In rpt2, "clean" disables the RollingCache (noCache), avoiding EPERM rename
+ * failures on Windows during UMD/CJS/ESM builds.
+ */
+const fs = require("fs");
+const path = require("path");
+
+const cliPath = path.join(
+  __dirname,
+  "..",
+  "node_modules",
+  "microbundle",
+  "dist",
+  "cli.js",
+);
+
+if (!fs.existsSync(cliPath)) {
+  console.warn(
+    "ensure-microbundle-patch: microbundle not installed, skipping patch",
+  );
+  process.exit(0);
+}
+
+const src = fs.readFileSync(cliPath, "utf8");
+const marker = "clean: true,";
+
+if (src.includes(marker)) {
+  process.exit(0);
+}
+
+const needle =
+  "(useTypescript || emitDeclaration) && typescript__default['default']({";
+const replacement = `${needle} clean: true,`;
+
+if (!src.includes(needle)) {
+  console.error(
+    "ensure-microbundle-patch: microbundle cli.js format changed; update the patch script",
+  );
+  process.exit(1);
+}
+
+fs.writeFileSync(cliPath, src.replace(needle, replacement), "utf8");
+console.log(
+  "Patched microbundle (rollup-plugin-typescript2 clean:true for Windows EPERM)",
+);

package/src/index.ts

@@ -16,3 +16,4 @@ export * from "./useRefPrint";
 export * from "./useRBAC";
 export * from "./usePrefetch";
 export * from "./usePoll";
+export * from "./useDeviceData";