preact-missing-hooks 4.8.0 → 4.9.0

package/dist/react.js

@@ -2161,11 +2161,15 @@ 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,
@@ -2183,6 +2187,95 @@ const SSR_DEVICE_DATA = {
     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";
@@ -2210,11 +2303,19 @@ function getDeviceData() {
     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: (_a = nav.userAgent) !== null && _a !== void 0 ? _a : "",
+        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,
@@ -2241,7 +2342,6 @@ function getDeviceData() {
     if (typeof nav.deviceMemory === "number") {
         data.deviceMemory = nav.deviceMemory;
     }
-    const uaData = nav.userAgentData;
     if (uaData) {
         data.userAgentData = {
             mobile: Boolean(uaData.mobile),
@@ -2251,6 +2351,30 @@ function getDeviceData() {
     }
     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")
@@ -2282,22 +2406,22 @@ function readBattery() {
  *   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>CPUs</dt><dd>{device.hardwareConcurrency ?? '—'}</dd>
  *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
- *       <dt>Theme</dt><dd>{device.colorScheme}</dd>
  *     </dl>
  *   );
  * }
  * ```
  */
 function useDeviceData(options = {}) {
-    const { includeBattery = true, batteryPollIntervalMs = 60000 } = 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 prev.battery ? Object.assign(Object.assign({}, next), { battery: prev.battery }) : next;
+            return Object.assign(Object.assign({}, next), (prev.battery ? { battery: prev.battery } : {}));
         });
     }, []);
     react.useEffect(() => {
@@ -2327,6 +2451,28 @@ function useDeviceData(options = {}) {
             (_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;
@@ -2352,6 +2498,7 @@ function useDeviceData(options = {}) {
 }
 
 exports.getDeviceData = getDeviceData;
+exports.parseUserAgent = parseUserAgent;
 exports.useClipboard = useClipboard;
 exports.useDeviceData = useDeviceData;
 exports.useEventBus = useEventBus;

package/dist/useDeviceData.d.ts

@@ -26,12 +26,26 @@ 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;
@@ -52,7 +66,17 @@ export interface UseDeviceDataOptions {
     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;
 /**
@@ -70,10 +94,10 @@ export declare function getDeviceData(): DeviceData;
  *   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>CPUs</dt><dd>{device.hardwareConcurrency ?? '—'}</dd>
  *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
- *       <dt>Theme</dt><dd>{device.colorScheme}</dd>
  *     </dl>
  *   );
  * }

package/docs/README.md

@@ -41,7 +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 device/browser snapshot: language, CPUs, memory, viewport, screen, touch, color scheme, reduced motion, Client Hints.                                                                              |
+| **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

@@ -88,21 +88,39 @@ function DemoNetworkState() {
 }
 
 function DemoDeviceData() {
-  const device = useDeviceData({ includeBattery: false });
+  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', device.platform || device.userAgentData?.platform || '—'],
+    ['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],
+    ['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 (UA-CH)', 'yes']);
+    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]) =>
@@ -592,9 +610,9 @@ const HOOKS = [
   },
   {
     name: 'useDeviceData',
-    flow: 'Component → useDeviceData() → Navigator + Screen + matchMedia (+ optional Battery API)',
-    summary: 'Extracts device/browser data: language, platform, CPUs, memory, screen, viewport, touch, color scheme, reduced motion, Client Hints, and optional battery.',
-    code: `const device = useDeviceData();\n// device.language, device.hardwareConcurrency, device.viewport, device.colorScheme`,
+    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,
   },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-missing-hooks",
-  "version": "4.8.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",

package/src/useDeviceData.ts

@@ -29,12 +29,28 @@ export interface DeviceBatteryInfo {
   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;
@@ -56,12 +72,21 @@ export interface UseDeviceDataOptions {
   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;
 }
 
 interface NavigatorUAData {
   mobile?: boolean;
   platform?: string;
   brands?: Array<{ brand: string; version: string }>;
+  getHighEntropyValues?: (hints: string[]) => Promise<{
+    platformVersion?: string;
+    fullVersionList?: Array<{ brand: string; version: string }>;
+  }>;
 }
 
 type NavigatorWithExtras = Navigator & {
@@ -69,11 +94,16 @@ type NavigatorWithExtras = Navigator & {
   userAgentData?: NavigatorUAData;
 };
 
+const UNKNOWN_BROWSER: DeviceBrowserInfo = { name: "Unknown", version: "" };
+const UNKNOWN_OS: DeviceOsInfo = { name: "Unknown", version: "" };
+
 const SSR_DEVICE_DATA: DeviceData = {
   userAgent: "",
   language: "en",
   languages: ["en"],
   platform: "",
+  browser: UNKNOWN_BROWSER,
+  os: UNKNOWN_OS,
   cookieEnabled: false,
   online: true,
   maxTouchPoints: 0,
@@ -92,6 +122,102 @@ const SSR_DEVICE_DATA: DeviceData = {
   colorScheme: "no-preference",
 };
 
+const NOT_A_BRAND = /not.?a.?brand/i;
+
+/** Parse browser and OS from a user-agent string (sync fallback). */
+export function parseUserAgent(userAgent: string): {
+  browser: DeviceBrowserInfo;
+  os: DeviceOsInfo;
+} {
+  const browser: DeviceBrowserInfo = { ...UNKNOWN_BROWSER };
+  const os: DeviceOsInfo = { ...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 = linux?.[1] ?? "";
+        }
+      }
+    }
+  }
+
+  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: Array<{ brand: string; version: string }>
+): DeviceBrowserInfo {
+  const meaningful = brands.find((b) => !NOT_A_BRAND.test(b.brand));
+  const pick = meaningful ?? brands[0];
+  if (!pick) return { ...UNKNOWN_BROWSER };
+  return { name: pick.brand, version: pick.version };
+}
+
+function mergeBrowserOsFromUaData(
+  uaData: NavigatorUAData,
+  fallback: { browser: DeviceBrowserInfo; os: DeviceOsInfo }
+): { browser: DeviceBrowserInfo; os: DeviceOsInfo } {
+  const browser = uaData.brands?.length
+    ? pickBrowserBrand(uaData.brands)
+    : { ...fallback.browser };
+  const os: DeviceOsInfo = {
+    name: uaData.platform?.trim() || fallback.os.name,
+    version: fallback.os.version,
+  };
+  return { browser, os };
+}
+
 function getColorScheme(): DeviceData["colorScheme"] {
   if (typeof window === "undefined" || !window.matchMedia) {
     return "no-preference";
@@ -124,11 +250,20 @@ export function getDeviceData(): DeviceData {
   const win =
     typeof globalThis.window !== "undefined" ? globalThis.window : null;
 
+  const ua = nav.userAgent ?? "";
+  const parsed = parseUserAgent(ua);
+  const uaData = nav.userAgentData;
+  const { browser, os } = uaData
+    ? mergeBrowserOsFromUaData(uaData, parsed)
+    : parsed;
+
   const data: DeviceData = {
-    userAgent: nav.userAgent ?? "",
+    userAgent: ua,
     language: nav.language ?? "",
     languages: nav.languages ? [...nav.languages] : [],
     platform: nav.platform ?? "",
+    browser,
+    os,
     cookieEnabled: Boolean(nav.cookieEnabled),
     online: Boolean(nav.onLine),
     maxTouchPoints: nav.maxTouchPoints ?? 0,
@@ -157,7 +292,6 @@ export function getDeviceData(): DeviceData {
     data.deviceMemory = nav.deviceMemory;
   }
 
-  const uaData = nav.userAgentData;
   if (uaData) {
     data.userAgentData = {
       mobile: Boolean(uaData.mobile),
@@ -169,6 +303,29 @@ export function getDeviceData(): DeviceData {
   return data;
 }
 
+async function readHighEntropyBrowserOs(
+  uaData: NavigatorUAData,
+  current: { browser: DeviceBrowserInfo; os: DeviceOsInfo }
+): Promise<{ browser: DeviceBrowserInfo; os: DeviceOsInfo } | undefined> {
+  if (!uaData.getHighEntropyValues) return undefined;
+  try {
+    const hints = await uaData.getHighEntropyValues([
+      "platformVersion",
+      "fullVersionList",
+    ]);
+    const browser = hints.fullVersionList?.length
+      ? pickBrowserBrand(hints.fullVersionList)
+      : { ...current.browser };
+    const os: DeviceOsInfo = {
+      name: current.os.name,
+      version: hints.platformVersion?.trim() || current.os.version,
+    };
+    return { browser, os };
+  } catch {
+    return undefined;
+  }
+}
+
 async function readBattery(): Promise<DeviceBatteryInfo | undefined> {
   if (typeof navigator === "undefined") return undefined;
   const getBattery = (
@@ -203,24 +360,31 @@ async function readBattery(): Promise<DeviceBatteryInfo | undefined> {
  *   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>CPUs</dt><dd>{device.hardwareConcurrency ?? '—'}</dd>
  *       <dt>Viewport</dt><dd>{device.viewport.width}×{device.viewport.height}</dd>
- *       <dt>Theme</dt><dd>{device.colorScheme}</dd>
  *     </dl>
  *   );
  * }
  * ```
  */
 export function useDeviceData(options: UseDeviceDataOptions = {}): DeviceData {
-  const { includeBattery = true, batteryPollIntervalMs = 60_000 } = options;
+  const {
+    includeBattery = true,
+    batteryPollIntervalMs = 60_000,
+    includeHighEntropy = true,
+  } = options;
 
   const [data, setData] = useState<DeviceData>(() => getDeviceData());
 
   const refresh = useCallback(() => {
     setData((prev) => {
       const next = getDeviceData();
-      return prev.battery ? { ...next, battery: prev.battery } : next;
+      return {
+        ...next,
+        ...(prev.battery ? { battery: prev.battery } : {}),
+      };
     });
   }, []);
 
@@ -255,6 +419,35 @@ export function useDeviceData(options: UseDeviceDataOptions = {}): DeviceData {
     };
   }, [refresh]);
 
+  useEffect(() => {
+    if (!includeHighEntropy || typeof navigator === "undefined") return;
+
+    const uaData = (navigator as NavigatorWithExtras).userAgentData;
+    if (!uaData?.getHighEntropyValues) return;
+
+    let cancelled = false;
+
+    const updateHighEntropy = async () => {
+      const base = getDeviceData();
+      const enriched = await readHighEntropyBrowserOs(uaData, {
+        browser: base.browser,
+        os: base.os,
+      });
+      if (cancelled || !enriched) return;
+      setData((prev) => ({
+        ...prev,
+        browser: enriched.browser,
+        os: enriched.os,
+      }));
+    };
+
+    void updateHighEntropy();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [includeHighEntropy]);
+
   useEffect(() => {
     if (!includeBattery || typeof navigator === "undefined") return;