@djangocfg/ui-nextjs 2.1.147 → 2.1.149

package/README.md

@@ -16,9 +16,9 @@ pnpm add @djangocfg/ui-nextjs
 
 ```
 @djangocfg/ui-nextjs
-├── Re-exports everything from @djangocfg/ui-core (60 components, 10 hooks)
+├── Re-exports everything from @djangocfg/ui-core (60 components, 13 hooks)
 ├── + Next.js specific components (11)
-├── + Browser storage hooks (5)
+├── + Browser storage hooks (2)
 ├── + Blocks, Theme, Animations
 ```
 
@@ -60,26 +60,51 @@ import { Hero } from '@djangocfg/ui-nextjs/blocks';
 
 ## Hooks
 
-### From ui-core (10)
-`useMediaQuery` `useIsMobile` `useCopy` `useCountdown` `useDebounce` `useDebouncedCallback` `useImageLoader` `useToast` `useEventListener` `useDebugTools`
+### From ui-core (13)
 
-### Next.js/Browser Specific (5)
+| Hook | Description |
+|------|-------------|
+| `useMediaQuery` | Responsive breakpoints |
+| `useIsMobile` | Mobile detection |
+| `useCopy` | Copy to clipboard |
+| `useCountdown` | Countdown timer |
+| `useDebounce` | Debounce values |
+| `useDebouncedCallback` | Debounced callbacks |
+| `useImageLoader` | Image loading state |
+| `useToast` / `toast` | Toast notifications (Sonner) |
+| `useEventListener` | Event bus |
+| `useDebugTools` | Debug utilities |
+| `useHotkey` | Keyboard shortcuts |
+| `useBrowserDetect` | Browser detection |
+| `useDeviceDetect` | Device detection |
+
+### Next.js Specific (2)
 
 | Hook | Description |
 |------|-------------|
+| `useResolvedTheme` | Light/dark theme resolution (next-themes) |
 | `useLocalStorage` | Persistent state in localStorage |
-| `useSessionStorage` | Session-scoped state |
-| `useTheme` | Light/dark theme (next-themes) |
-| `useQueryParams` | URL query params (next/router) |
-| `useCfgRouter` | Enhanced Next.js router |
+
+Note: `useSessionStorage` is also available in ui-core.
+
+## Dialog Service
+
+The dialog service from ui-core is available for replacing native dialogs:
+
+```tsx
+import { DialogProvider, useDialog, dialog } from '@djangocfg/ui-core/lib/dialog-service';
+```
+
+See ui-core README for full documentation.
 
 ## Usage
 
 ```tsx
 import {
   Button, Card, Input,  // from ui-core
-  NextButtonLink, Sidebar, useLocalStorage  // Next.js specific
+  NextButtonLink, Sidebar  // Next.js specific
 } from '@djangocfg/ui-nextjs';
+import { useLocalStorage } from '@djangocfg/ui-nextjs/hooks';
 
 function Example() {
   const [saved, setSaved] = useLocalStorage('form', null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.147",
+  "version": "2.1.149",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -80,9 +80,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.147",
-    "@djangocfg/ui-core": "^2.1.147",
-    "@djangocfg/ui-tools": "^2.1.147",
+    "@djangocfg/api": "^2.1.149",
+    "@djangocfg/ui-core": "^2.1.149",
+    "@djangocfg/ui-tools": "^2.1.149",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -101,12 +101,10 @@
     "cytoscape": "^3.33.1",
     "cytoscape-cose-bilkent": "^4.1.0",
     "next-themes": "^0.4.6",
-    "react-chartjs-2": "^5.3.0",
-    "react-device-detect": "^2.2.3",
-    "react-hotkeys-hook": "^5.2.1"
+    "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.147",
+    "@djangocfg/typescript-config": "^2.1.149",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",

package/src/hooks/index.ts

@@ -9,14 +9,23 @@
 export { useResolvedTheme } from './useResolvedTheme';
 export type { ResolvedTheme } from './useResolvedTheme';
 
-// Keyboard shortcuts
-export { useHotkey, useHotkeysContext, HotkeysProvider, isHotkeyPressed } from './useHotkey';
-export type { UseHotkeyOptions, HotkeyCallback, Keys } from './useHotkey';
+// Re-export from ui-core
+export {
+  // Keyboard shortcuts
+  useHotkey,
+  useHotkeysContext,
+  HotkeysProvider,
+  isHotkeyPressed,
+  // Device detection
+  useDeviceDetect,
+  // Browser detection
+  useBrowserDetect,
+} from '@djangocfg/ui-core/hooks';
 
-// Device detection
-export { useDeviceDetect } from './useDeviceDetect';
-export type { DeviceDetectResult } from './useDeviceDetect';
-
-// Browser detection (advanced - detects Chromium browsers correctly)
-export { useBrowserDetect } from './useBrowserDetect';
-export type { BrowserInfo } from './useBrowserDetect';
+export type {
+  UseHotkeyOptions,
+  HotkeyCallback,
+  Keys,
+  DeviceDetectResult,
+  BrowserInfo,
+} from '@djangocfg/ui-core/hooks';

package/src/hooks/useBrowserDetect.ts

@@ -1,384 +0,0 @@
-/**
- * Advanced browser detection hook
- *
- * Detects modern browsers including Chromium-based browsers that may
- * incorrectly report as Safari (Arc, Brave, Vivaldi, Comet, etc.)
- */
-
-'use client';
-
-import { useMemo } from 'react';
-
-export interface BrowserInfo {
-  // Core browser types
-  isChrome: boolean;
-  isChromium: boolean; // Any Chromium-based browser
-  isSafari: boolean; // Real Safari (WebKit on macOS/iOS)
-  isFirefox: boolean;
-  isEdge: boolean;
-  isOpera: boolean;
-
-  // Modern Chromium-based browsers
-  isBrave: boolean;
-  isArc: boolean;
-  isVivaldi: boolean;
-  isYandex: boolean;
-  isSamsungBrowser: boolean;
-  isUCBrowser: boolean;
-
-  // Additional browsers
-  isComet: boolean; // Perplexity's Comet browser (Chromium-based, supports push)
-  isOperaMini: boolean; // Opera Mini (does NOT support push notifications)
-  isIE: boolean; // Internet Explorer (does NOT support push notifications)
-
-  // In-App Browsers (WebViews) - typically do NOT support push notifications
-  isFacebookInApp: boolean; // Facebook's in-app browser
-  isInstagramInApp: boolean; // Instagram's in-app browser
-  isTikTokInApp: boolean; // TikTok's in-app browser
-  isSnapchatInApp: boolean; // Snapchat's in-app browser
-  isWeChatInApp: boolean; // WeChat's in-app browser
-  isThreadsInApp: boolean; // Threads' in-app browser
-  isLinkedInInApp: boolean; // LinkedIn's in-app browser (uses Chrome WebView - supports push on Android)
-  isTwitterInApp: boolean; // Twitter/X's in-app browser (uses Chrome WebView - supports push on Android)
-  isInAppBrowser: boolean; // Any in-app browser detected
-  isWebView: boolean; // Generic WebView detection
-
-  // Browser name
-  browserName: string;
-
-  // Engine
-  isWebKit: boolean; // Safari's engine
-  isBlink: boolean; // Chromium's engine
-  isGecko: boolean; // Firefox's engine
-
-  // Push notification support
-  /**
-   * Whether the browser supports Web Push Notifications.
-   * Returns false for browsers known to NOT support push:
-   * - Opera Mini (no service worker support)
-   * - Internet Explorer (deprecated, no Push API)
-   * - UC Browser (unreliable push support)
-   * - In-App browsers (Facebook, Instagram, TikTok, Snapchat, etc.)
-   * - Generic WebViews (except Twitter/LinkedIn on Android which use Chrome WebView)
-   *
-   * Note: Comet (Perplexity) is Chromium-based and DOES support push notifications.
-   * Note: This is a browser-level check. For full push support,
-   * also check 'serviceWorker' in navigator && 'PushManager' in window
-   */
-  supportsPushNotifications: boolean;
-
-  // iOS specific
-  isIOSBrowser: boolean; // Any browser on iOS (all use WebKit, limited push support)
-
-  // For debugging
-  userAgent: string;
-}
-
-/**
- * Detect browser with improved accuracy for Chromium-based browsers
- *
- * @example
- * ```tsx
- * const browser = useBrowserDetect();
- *
- * if (browser.isSafari && !browser.isChromium) {
- *   // Real Safari
- * }
- *
- * if (browser.isChromium) {
- *   // Any Chromium-based browser (Chrome, Edge, Brave, Arc, etc.)
- * }
- * ```
- */
-export function useBrowserDetect(): BrowserInfo {
-  return useMemo(() => {
-    if (typeof window === 'undefined') {
-      return {
-        isChrome: false,
-        isChromium: false,
-        isSafari: false,
-        isFirefox: false,
-        isEdge: false,
-        isOpera: false,
-        isBrave: false,
-        isArc: false,
-        isVivaldi: false,
-        isYandex: false,
-        isSamsungBrowser: false,
-        isUCBrowser: false,
-        isComet: false,
-        isOperaMini: false,
-        isIE: false,
-        isFacebookInApp: false,
-        isInstagramInApp: false,
-        isTikTokInApp: false,
-        isSnapchatInApp: false,
-        isWeChatInApp: false,
-        isThreadsInApp: false,
-        isLinkedInInApp: false,
-        isTwitterInApp: false,
-        isInAppBrowser: false,
-        isWebView: false,
-        browserName: 'unknown',
-        isWebKit: false,
-        isBlink: false,
-        isGecko: false,
-        supportsPushNotifications: false,
-        isIOSBrowser: false,
-        userAgent: '',
-      };
-    }
-
-    const ua = window.navigator.userAgent.toLowerCase();
-
-    // Check for specific browsers first (most specific to least specific)
-
-    // Edge (Chromium-based)
-    const isEdge = ua.includes('edg/') || ua.includes('edge/');
-
-    // Brave (check for Brave-specific API)
-    const isBrave = !!(window.navigator as any).brave;
-
-    // Arc (check for Arc-specific markers in UA)
-    const isArc = ua.includes('arc/');
-
-    // Vivaldi
-    const isVivaldi = ua.includes('vivaldi');
-
-    // Yandex Browser
-    const isYandex = ua.includes('yabrowser');
-
-    // Samsung Internet
-    const isSamsungBrowser = ua.includes('samsungbrowser');
-
-    // UC Browser
-    const isUCBrowser = ua.includes('ucbrowser') || ua.includes('uc browser');
-
-    // Comet Browser (Perplexity's AI browser, Chromium-based)
-    // May have 'comet' in UA or can be detected by specific markers
-    const isComet = ua.includes('comet') || ua.includes('perplexity');
-
-    // Opera Mini (does NOT support service workers or push)
-    const isOperaMini = ua.includes('opera mini') || ua.includes('opios');
-
-    // Internet Explorer (deprecated, no Push API support)
-    const isIE = ua.includes('msie') || ua.includes('trident/');
-
-    // ============================================================================
-    // In-App Browsers Detection (WebViews)
-    // These browsers typically do NOT support web push notifications
-    // ============================================================================
-
-    // Facebook In-App Browser
-    // UA contains: FBAN (Facebook App Name) or FBAV (Facebook App Version)
-    const isFacebookInApp = ua.includes('fban') || ua.includes('fbav') || ua.includes('fb_iab');
-
-    // Instagram In-App Browser
-    // UA contains: Instagram
-    const isInstagramInApp = ua.includes('instagram');
-
-    // TikTok In-App Browser
-    // UA contains: TikTok or BytedanceWebview or ByteLocale
-    const isTikTokInApp = ua.includes('tiktok') || ua.includes('bytedancewebview') || ua.includes('bytelocale');
-
-    // Snapchat In-App Browser
-    // UA contains: Snapchat
-    const isSnapchatInApp = ua.includes('snapchat');
-
-    // WeChat In-App Browser
-    // UA contains: MicroMessenger
-    const isWeChatInApp = ua.includes('micromessenger');
-
-    // Threads In-App Browser (Meta's app)
-    // UA contains: Threads or uses same markers as Instagram
-    const isThreadsInApp = ua.includes('barcelona'); // Threads codename is Barcelona
-
-    // LinkedIn In-App Browser
-    // UA contains: LinkedIn - NOTE: Uses Chrome WebView on Android, may support push
-    const isLinkedInInApp = ua.includes('linkedinapp');
-
-    // Twitter/X In-App Browser
-    // UA contains: Twitter - NOTE: Uses Chrome WebView on Android, may support push
-    const isTwitterInApp = ua.includes('twitter');
-
-    // Pinterest In-App Browser
-    const isPinterestInApp = ua.includes('pinterest');
-
-    // Telegram In-App Browser
-    const isTelegramInApp = ua.includes('telegram');
-
-    // Line In-App Browser
-    const isLineInApp = ua.includes('line/');
-
-    // Kakao In-App Browser (Korea)
-    const isKakaoInApp = ua.includes('kakaotalk');
-
-    // Generic WebView detection
-    // Android WebView: contains 'wv' in UA or specific WebView markers
-    // iOS WebView: WKWebView doesn't have distinct UA, but some markers exist
-    const isWebView = ua.includes('wv)') || // Android WebView marker
-                     ua.includes('webview') ||
-                     ua.includes('; wv') ||
-                     (ua.includes('iphone') && !ua.includes('safari')) || // iOS WebView (no Safari)
-                     (ua.includes('ipad') && !ua.includes('safari'));
-
-    // Aggregate: Any in-app browser
-    const isInAppBrowser = isFacebookInApp ||
-                          isInstagramInApp ||
-                          isTikTokInApp ||
-                          isSnapchatInApp ||
-                          isWeChatInApp ||
-                          isThreadsInApp ||
-                          isLinkedInInApp ||
-                          isTwitterInApp ||
-                          isPinterestInApp ||
-                          isTelegramInApp ||
-                          isLineInApp ||
-                          isKakaoInApp;
-
-    // iOS detection (all iOS browsers use WebKit, limited push support)
-    const isIOSBrowser = ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod');
-
-    // Opera (modern Chromium-based)
-    const isOpera = (ua.includes('opr/') || ua.includes('opera')) && !isOperaMini;
-
-    // Chrome (not Edge, not other Chromium browsers)
-    const isChrome = ua.includes('chrome') &&
-                    !isEdge &&
-                    !isOpera &&
-                    !isYandex &&
-                    !isSamsungBrowser &&
-                    !isVivaldi &&
-                    !isArc &&
-                    !isBrave &&
-                    !isComet;
-
-    // Firefox
-    const isFirefox = ua.includes('firefox') && !ua.includes('seamonkey');
-
-    // Safari (real Safari, not Chromium pretending to be Safari)
-    // Safari will have 'safari' in UA but NOT 'chrome' or 'chromium'
-    // Real Safari uses WebKit engine
-    // Additional check: Safari has 'version/' in UA, Chromium browsers don't combine it with Safari
-    const hasSafariUA = ua.includes('safari');
-    const hasChrome = ua.includes('chrome') || ua.includes('crios');
-    const hasVersion = ua.includes('version/'); // Real Safari includes Version/XX.X
-    const isSafari = hasSafariUA && !hasChrome && hasVersion;
-
-    // Chromium detection (any browser using Chromium/Blink engine)
-    // If it has "chrome" in UA or is one of the known Chromium browsers
-    const isChromium = hasChrome ||
-                      isEdge ||
-                      isOpera ||
-                      isYandex ||
-                      isSamsungBrowser ||
-                      isVivaldi ||
-                      isArc ||
-                      isBrave ||
-                      isUCBrowser ||
-                      isComet;
-
-    // Engine detection
-    const isWebKit = !isChromium && isSafari;
-    const isBlink = isChromium;
-    const isGecko = isFirefox;
-
-    // Determine browser name
-    // In-app browsers take priority in naming
-    let browserName = 'unknown';
-    if (isFacebookInApp) browserName = 'Facebook In-App';
-    else if (isInstagramInApp) browserName = 'Instagram In-App';
-    else if (isTikTokInApp) browserName = 'TikTok In-App';
-    else if (isSnapchatInApp) browserName = 'Snapchat In-App';
-    else if (isWeChatInApp) browserName = 'WeChat In-App';
-    else if (isThreadsInApp) browserName = 'Threads In-App';
-    else if (isLinkedInInApp) browserName = 'LinkedIn In-App';
-    else if (isTwitterInApp) browserName = 'Twitter In-App';
-    else if (isPinterestInApp) browserName = 'Pinterest In-App';
-    else if (isTelegramInApp) browserName = 'Telegram In-App';
-    else if (isLineInApp) browserName = 'Line In-App';
-    else if (isKakaoInApp) browserName = 'KakaoTalk In-App';
-    else if (isComet) browserName = 'Comet';
-    else if (isOperaMini) browserName = 'Opera Mini';
-    else if (isIE) browserName = 'Internet Explorer';
-    else if (isBrave) browserName = 'Brave';
-    else if (isArc) browserName = 'Arc';
-    else if (isVivaldi) browserName = 'Vivaldi';
-    else if (isYandex) browserName = 'Yandex';
-    else if (isSamsungBrowser) browserName = 'Samsung Internet';
-    else if (isUCBrowser) browserName = 'UC Browser';
-    else if (isEdge) browserName = 'Edge';
-    else if (isOpera) browserName = 'Opera';
-    else if (isChrome) browserName = 'Chrome';
-    else if (isSafari) browserName = 'Safari';
-    else if (isFirefox) browserName = 'Firefox';
-    else if (isWebView) browserName = 'WebView';
-
-    // Determine push notification support
-    // These browsers are known to NOT support Web Push:
-    // - Opera Mini: no service worker support
-    // - Internet Explorer: deprecated, no Push API
-    // - UC Browser: unreliable push support on many versions
-    // - Most In-App browsers (Facebook, Instagram, TikTok, etc.)
-    // - Generic WebViews (except Twitter/LinkedIn on Android)
-    //
-    // Note: Comet (Perplexity) is Chromium-based and DOES support push notifications.
-    // Note: Twitter and LinkedIn on Android use Chrome WebView and DO support push.
-    // However, we err on the side of caution and disable for all in-app browsers.
-    const browserBlocksPush = isOperaMini ||
-                             isIE ||
-                             isUCBrowser ||
-                             isFacebookInApp ||
-                             isInstagramInApp ||
-                             isTikTokInApp ||
-                             isSnapchatInApp ||
-                             isWeChatInApp ||
-                             isThreadsInApp ||
-                             isPinterestInApp ||
-                             isTelegramInApp ||
-                             isLineInApp ||
-                             isKakaoInApp ||
-                             isWebView;
-
-    // Twitter and LinkedIn on Android use Chrome WebView - they actually support push
-    // But only on Android, not iOS
-    const twitterLinkedInAndroid = (isTwitterInApp || isLinkedInInApp) && !isIOSBrowser;
-
-    const supportsPushNotifications = !browserBlocksPush || twitterLinkedInAndroid;
-
-    return {
-      isChrome,
-      isChromium,
-      isSafari,
-      isFirefox,
-      isEdge,
-      isOpera,
-      isBrave,
-      isArc,
-      isVivaldi,
-      isYandex,
-      isSamsungBrowser,
-      isUCBrowser,
-      isComet,
-      isOperaMini,
-      isIE,
-      isFacebookInApp,
-      isInstagramInApp,
-      isTikTokInApp,
-      isSnapchatInApp,
-      isWeChatInApp,
-      isThreadsInApp,
-      isLinkedInInApp,
-      isTwitterInApp,
-      isInAppBrowser,
-      isWebView,
-      browserName,
-      isWebKit,
-      isBlink,
-      isGecko,
-      supportsPushNotifications,
-      isIOSBrowser,
-      userAgent: window.navigator.userAgent,
-    };
-  }, []);
-}

package/src/hooks/useDeviceDetect.ts

@@ -1,270 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-
-// Safe defaults for SSR
-const defaultSelectors = {
-  isMobile: false,
-  isTablet: false,
-  isDesktop: false,
-  isBrowser: false,
-  isMobileOnly: false,
-  isSmartTV: false,
-  isConsole: false,
-  isWearable: false,
-  isEmbedded: false,
-  isAndroid: false,
-  isIOS: false,
-  isWindows: false,
-  isMacOs: false,
-  isWinPhone: false,
-  isChrome: false,
-  isFirefox: false,
-  isSafari: false,
-  isOpera: false,
-  isIE: false,
-  isEdge: false,
-  isEdgeChromium: false,
-  isLegacyEdge: false,
-  isChromium: false,
-  isMobileSafari: false,
-  isYandex: false,
-  isMIUI: false,
-  isSamsungBrowser: false,
-  isElectron: false,
-  osVersion: 'unknown',
-  osName: 'unknown',
-  fullBrowserVersion: 'unknown',
-  browserVersion: 'unknown',
-  browserName: 'unknown',
-  mobileVendor: 'unknown',
-  mobileModel: 'unknown',
-  engineName: 'unknown',
-  engineVersion: 'unknown',
-  getUA: '',
-  deviceType: 'unknown',
-  isIOS13: false,
-  isIPad13: false,
-  isIPhone13: false,
-  isIPod13: false,
-};
-
-const defaultDeviceData = {
-  deviceType: 'unknown',
-  osName: 'unknown',
-  osVersion: 'unknown',
-  browserName: 'unknown',
-  browserVersion: 'unknown',
-  fullBrowserVersion: 'unknown',
-  mobileVendor: 'unknown',
-  mobileModel: 'unknown',
-  engineName: 'unknown',
-  engineVersion: 'unknown',
-  getUA: '',
-};
-
-const defaultOrientation = {
-  isPortrait: false,
-  isLandscape: false,
-  orientation: 'portrait' as 'portrait' | 'landscape',
-};
-
-/**
- * Device detection hook wrapper for react-device-detect
- * 
- * Provides a convenient interface to access device information including:
- * - Device type (mobile, tablet, desktop, etc.)
- * - Browser information (name, version, etc.)
- * - OS information (name, version, etc.)
- * - Orientation (portrait/landscape)
- * 
- * @param userAgent - Optional user agent string (useful for SSR)
- * @returns Device detection object with all available information
- * 
- * @example
- * ```tsx
- * const device = useDeviceDetect();
- * 
- * if (device.isMobile) {
- *   return <MobileView />;
- * }
- * 
- * return <DesktopView />;
- * ```
- */
-export function useDeviceDetect(userAgent?: string) {
-  const [deviceInfo, setDeviceInfo] = useState<{
-    selectors: typeof defaultSelectors;
-    deviceData: typeof defaultDeviceData;
-    orientation: {
-      isPortrait: boolean;
-      isLandscape: boolean;
-      orientation: 'portrait' | 'landscape';
-    };
-  }>({
-    selectors: defaultSelectors,
-    deviceData: defaultDeviceData,
-    orientation: defaultOrientation,
-  });
-
-  useEffect(() => {
-    // Only run on client side
-    if (typeof window === 'undefined') return;
-
-    // Dynamic import to avoid SSR issues
-    import('react-device-detect').then((deviceDetect) => {
-      // Get user agent string
-      const ua = userAgent || (typeof window !== 'undefined' ? window.navigator.userAgent : '');
-      
-      if (!ua) {
-        console.warn('No user agent available');
-        return;
-      }
-
-      // Parse user agent using library's parseUserAgent function
-      const parsed = deviceDetect.parseUserAgent(ua);
-      
-      if (!parsed) {
-        console.warn('Failed to parse user agent');
-        return;
-      }
-
-      // Build selectors using library's buildSelectorsObject
-      // We need to import buildSelectorsObject, but it's not exported
-      // So we'll use getSelectorsByUserAgent which is exported
-      const selectors = deviceDetect.getSelectorsByUserAgent(ua) || defaultSelectors;
-      
-      // Extract device data from parsed result
-      const deviceData = {
-        deviceType: parsed.device?.type || 'unknown',
-        osName: parsed.os?.name || 'unknown',
-        osVersion: parsed.os?.version || 'unknown',
-        browserName: parsed.browser?.name || 'unknown',
-        browserVersion: parsed.browser?.version || 'unknown',
-        fullBrowserVersion: parsed.browser?.version || 'unknown',
-        mobileVendor: parsed.device?.vendor || 'unknown',
-        mobileModel: parsed.device?.model || 'unknown',
-        engineName: parsed.engine?.name || 'unknown',
-        engineVersion: parsed.engine?.version || 'unknown',
-        getUA: parsed.ua || ua,
-      };
-
-      // Get orientation - use library's hook if available, otherwise calculate
-      let orientation = defaultOrientation;
-      
-      try {
-        // Try to use the hook, but we can't call hooks conditionally
-        // So we'll calculate orientation manually
-        if (typeof window !== 'undefined') {
-          const isPortrait = window.innerHeight > window.innerWidth;
-          orientation = {
-            isPortrait,
-            isLandscape: !isPortrait,
-            orientation: (isPortrait ? 'portrait' : 'landscape') as 'portrait' | 'landscape',
-          };
-        }
-      } catch (error) {
-        console.warn('Failed to get orientation:', error);
-      }
-      
-      setDeviceInfo({ selectors, deviceData, orientation });
-    }).catch((error) => {
-      console.warn('Failed to load device detection:', error);
-    });
-  }, [userAgent]);
-
-  // Update orientation on window resize
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const handleResize = () => {
-      const isPortrait = window.innerHeight > window.innerWidth;
-      setDeviceInfo((prev) => ({
-        ...prev,
-        orientation: {
-          isPortrait,
-          isLandscape: !isPortrait,
-          orientation: (isPortrait ? 'portrait' : 'landscape') as 'portrait' | 'landscape',
-        },
-      }));
-    };
-
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('orientationchange', handleResize);
-    
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('orientationchange', handleResize);
-    };
-  }, []);
-
-  const { selectors, deviceData, orientation } = deviceInfo;
-
-  return useMemo(() => {
-    return {
-      // Device type selectors
-      isMobile: selectors.isMobile ?? false,
-      isTablet: selectors.isTablet ?? false,
-      isDesktop: selectors.isDesktop ?? false,
-      isBrowser: selectors.isBrowser ?? false,
-      isMobileOnly: selectors.isMobileOnly ?? false,
-      isSmartTV: selectors.isSmartTV ?? false,
-      isConsole: selectors.isConsole ?? false,
-      isWearable: selectors.isWearable ?? false,
-      isEmbedded: selectors.isEmbedded ?? false,
-
-      // OS selectors
-      isAndroid: selectors.isAndroid ?? false,
-      isIOS: selectors.isIOS ?? false,
-      isWindows: selectors.isWindows ?? false,
-      isMacOs: selectors.isMacOs ?? false,
-      isWinPhone: selectors.isWinPhone ?? false,
-
-      // Browser selectors
-      isChrome: selectors.isChrome ?? false,
-      isFirefox: selectors.isFirefox ?? false,
-      isSafari: selectors.isSafari ?? false,
-      isOpera: selectors.isOpera ?? false,
-      isIE: selectors.isIE ?? false,
-      isEdge: selectors.isEdge ?? false,
-      isEdgeChromium: selectors.isEdgeChromium ?? false,
-      isLegacyEdge: selectors.isLegacyEdge ?? false,
-      isChromium: selectors.isChromium ?? false,
-      isMobileSafari: selectors.isMobileSafari ?? false,
-      isYandex: selectors.isYandex ?? false,
-      isMIUI: selectors.isMIUI ?? false,
-      isSamsungBrowser: selectors.isSamsungBrowser ?? false,
-      isElectron: selectors.isElectron ?? false,
-
-      // iOS version selectors
-      isIOS13: selectors.isIOS13 ?? false,
-      isIPad13: selectors.isIPad13 ?? false,
-      isIPhone13: selectors.isIPhone13 ?? false,
-      isIPod13: selectors.isIPod13 ?? false,
-
-      // Device information
-      deviceType: deviceData.deviceType ?? 'unknown',
-      osName: deviceData.osName ?? 'unknown',
-      osVersion: deviceData.osVersion ?? 'unknown',
-      browserName: deviceData.browserName ?? 'unknown',
-      browserVersion: deviceData.browserVersion ?? 'unknown',
-      fullBrowserVersion: deviceData.fullBrowserVersion ?? 'unknown',
-      mobileVendor: deviceData.mobileVendor ?? 'unknown',
-      mobileModel: deviceData.mobileModel ?? 'unknown',
-      engineName: deviceData.engineName ?? 'unknown',
-      engineVersion: deviceData.engineVersion ?? 'unknown',
-      getUA: deviceData.getUA ?? '',
-
-      // Orientation
-      isPortrait: orientation.isPortrait,
-      isLandscape: orientation.isLandscape,
-      orientation: orientation.orientation,
-
-      // Raw data (for advanced usage)
-      selectors,
-      deviceData,
-    };
-  }, [selectors, deviceData, orientation]);
-}
-
-export type DeviceDetectResult = ReturnType<typeof useDeviceDetect>;

package/src/hooks/useHotkey.ts

@@ -1,104 +0,0 @@
-'use client';
-
-import type { RefObject } from 'react';
-import { Options as HotkeysOptions, useHotkeys } from 'react-hotkeys-hook';
-
-import type { HotkeyCallback, Keys } from 'react-hotkeys-hook';
-
-/**
- * Options for the useHotkey hook
- */
-export interface UseHotkeyOptions extends Omit<HotkeysOptions, 'enabled'> {
-  /** Whether the hotkey is enabled (default: true) */
-  enabled?: boolean;
-  /** Scope for the hotkey - useful for context-specific shortcuts */
-  scope?: string;
-  /** Only trigger when focus is within a specific element */
-  scopes?: string[];
-  /** Prevent default browser behavior */
-  preventDefault?: boolean;
-  /** Enable in input fields and textareas */
-  enableOnFormTags?: boolean | readonly ('input' | 'textarea' | 'select')[];
-  /** Enable when contentEditable element is focused */
-  enableOnContentEditable?: boolean;
-  /** Split key for multiple hotkey combinations (default: ',') */
-  splitKey?: string;
-  /** Key up/down events */
-  keyup?: boolean;
-  keydown?: boolean;
-  /** Description for the hotkey (useful for help dialogs) */
-  description?: string;
-}
-
-/**
- * Simple wrapper hook for react-hotkeys-hook
- *
- * @example
- * // Single key
- * useHotkey('escape', () => closeModal());
- *
- * @example
- * // Key combination
- * useHotkey('ctrl+s', (e) => {
- *   e.preventDefault();
- *   saveDocument();
- * });
- *
- * @example
- * // Multiple keys (any of them will trigger)
- * useHotkey(['ArrowLeft', '['], () => goToPrevious());
- * useHotkey(['ArrowRight', ']'], () => goToNext());
- *
- * @example
- * // With options
- * useHotkey('/', () => focusSearch(), {
- *   preventDefault: true,
- *   enableOnFormTags: false,
- *   description: 'Focus search input'
- * });
- *
- * @example
- * // Scoped hotkeys
- * useHotkey('delete', () => deleteItem(), { scopes: ['list-view'] });
- *
- * @param keys - Hotkey or array of hotkeys (e.g., 'ctrl+s', 'ArrowLeft', ['[', 'ArrowLeft'])
- * @param callback - Function to call when hotkey is pressed
- * @param options - Configuration options
- * @returns Ref to attach to element for scoped hotkeys
- */
-export function useHotkey<T extends HTMLElement = HTMLElement>(
-  keys: Keys,
-  callback: HotkeyCallback,
-  options: UseHotkeyOptions = {}
-): RefObject<T | null> {
-  const {
-    enabled = true,
-    preventDefault = false,
-    enableOnFormTags = false,
-    enableOnContentEditable = false,
-    description: _description,
-    ...restOptions
-  } = options;
-
-  return useHotkeys<T>(
-    keys,
-    (event, handler) => {
-      if (preventDefault) {
-        event.preventDefault();
-      }
-      callback(event, handler);
-    },
-    {
-      enabled,
-      enableOnFormTags,
-      enableOnContentEditable,
-      ...restOptions,
-    }
-  );
-}
-
-// Re-export useful utilities from react-hotkeys-hook
-export { useHotkeysContext, HotkeysProvider, isHotkeyPressed } from 'react-hotkeys-hook';
-
-// Re-export types
-export type { HotkeyCallback, Keys } from 'react-hotkeys-hook';