@mieweb/ui 0.10.0-dev.17 → 0.10.0-dev.19

package/dist/{chunk-LENW5YOC.js → chunk-GBUVIGD5.js}

@@ -36,15 +36,52 @@ var KEYBOARD_INSET_VAR = "--mieweb-keyboard-inset";
 var VISUAL_VIEWPORT_HEIGHT_VAR = "--mieweb-visual-viewport-height";
 var VISUAL_VIEWPORT_OFFSET_TOP_VAR = "--mieweb-visual-viewport-offset-top";
 var KEYBOARD_OPEN_ATTRIBUTE = "data-keyboard-open";
+var KEYBOARD_SOURCE_ATTRIBUTE = "data-keyboard-source";
 var CLOSED = { keyboardInset: 0, isKeyboardOpen: false };
 function useKeyboardInset(options = {}) {
-  const { enabled = true } = options;
+  const { enabled = true, source = "visual-viewport" } = options;
   const [state, setState] = useState(CLOSED);
   useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
+    const root = document.documentElement;
+    const publish = (keyboardInset) => {
+      const isKeyboardOpen = keyboardInset > 0;
+      root.style.setProperty(KEYBOARD_INSET_VAR, `${keyboardInset}px`);
+      root.toggleAttribute(KEYBOARD_OPEN_ATTRIBUTE, isKeyboardOpen);
+      setState(
+        (previous) => previous.keyboardInset === keyboardInset ? previous : { keyboardInset, isKeyboardOpen }
+      );
+    };
+    const clear = () => {
+      root.style.removeProperty(KEYBOARD_INSET_VAR);
+      root.style.removeProperty(VISUAL_VIEWPORT_HEIGHT_VAR);
+      root.style.removeProperty(VISUAL_VIEWPORT_OFFSET_TOP_VAR);
+      root.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);
+      root.removeAttribute(KEYBOARD_SOURCE_ATTRIBUTE);
+      setState(CLOSED);
+    };
+    if (source === "native") {
+      const handleWillShow = (event) => {
+        publish(
+          Math.max(
+            0,
+            Math.round(event.keyboardHeight ?? 0)
+          )
+        );
+      };
+      const handleWillHide = () => publish(0);
+      root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);
+      publish(0);
+      window.addEventListener("keyboardWillShow", handleWillShow);
+      window.addEventListener("keyboardWillHide", handleWillHide);
+      return () => {
+        window.removeEventListener("keyboardWillShow", handleWillShow);
+        window.removeEventListener("keyboardWillHide", handleWillHide);
+        clear();
+      };
+    }
     const viewport = window.visualViewport;
     if (!viewport) return;
-    const root = document.documentElement;
     let frame = 0;
     const measure = () => {
       frame = 0;
@@ -55,8 +92,6 @@ function useKeyboardInset(options = {}) {
           window.innerHeight - viewport.height - viewport.offsetTop
         )
       );
-      const isKeyboardOpen = keyboardInset > 0;
-      root.style.setProperty(KEYBOARD_INSET_VAR, `${keyboardInset}px`);
       root.style.setProperty(
         VISUAL_VIEWPORT_HEIGHT_VAR,
         `${zoomed ? window.innerHeight : Math.round(viewport.height)}px`
@@ -65,14 +100,12 @@ function useKeyboardInset(options = {}) {
         VISUAL_VIEWPORT_OFFSET_TOP_VAR,
         `${zoomed ? 0 : Math.round(viewport.offsetTop)}px`
       );
-      root.toggleAttribute(KEYBOARD_OPEN_ATTRIBUTE, isKeyboardOpen);
-      setState(
-        (previous) => previous.keyboardInset === keyboardInset ? previous : { keyboardInset, isKeyboardOpen }
-      );
+      publish(keyboardInset);
     };
     const schedule = () => {
       if (frame === 0) frame = requestAnimationFrame(measure);
     };
+    root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);
     measure();
     viewport.addEventListener("resize", schedule);
     viewport.addEventListener("scroll", schedule);
@@ -80,13 +113,9 @@ function useKeyboardInset(options = {}) {
       cancelAnimationFrame(frame);
       viewport.removeEventListener("resize", schedule);
       viewport.removeEventListener("scroll", schedule);
-      root.style.removeProperty(KEYBOARD_INSET_VAR);
-      root.style.removeProperty(VISUAL_VIEWPORT_HEIGHT_VAR);
-      root.style.removeProperty(VISUAL_VIEWPORT_OFFSET_TOP_VAR);
-      root.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);
-      setState(CLOSED);
+      clear();
     };
-  }, [enabled]);
+  }, [enabled, source]);
   return state;
 }
 function useKeyboardShortcut(key, callback, options = {}) {
@@ -182,6 +211,6 @@ function useIsMobileOrTablet() {
   return useMediaQuery("(max-width: 1023px)");
 }
 
-export { KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, RTL_LOCALES, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useMediaQuery };
-//# sourceMappingURL=chunk-LENW5YOC.js.map
-//# sourceMappingURL=chunk-LENW5YOC.js.map
+export { KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, KEYBOARD_SOURCE_ATTRIBUTE, RTL_LOCALES, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useMediaQuery };
+//# sourceMappingURL=chunk-GBUVIGD5.js.map
+//# sourceMappingURL=chunk-GBUVIGD5.js.map

package/dist/chunk-GBUVIGD5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardInset.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useState","useEffect"],"mappings":"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","file":"chunk-GBUVIGD5.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useState } from 'react';\n\n/** CSS custom properties written to `<html>` while the hook is mounted. */\nexport const KEYBOARD_INSET_VAR = '--mieweb-keyboard-inset';\nexport const VISUAL_VIEWPORT_HEIGHT_VAR = '--mieweb-visual-viewport-height';\nexport const VISUAL_VIEWPORT_OFFSET_TOP_VAR =\n  '--mieweb-visual-viewport-offset-top';\n/** Boolean attribute set on `<html>` while an on-screen keyboard is open. */\nexport const KEYBOARD_OPEN_ATTRIBUTE = 'data-keyboard-open';\n/** Attribute on `<html>` naming the active {@link KeyboardInsetSource}. */\nexport const KEYBOARD_SOURCE_ATTRIBUTE = 'data-keyboard-source';\n\n/**\n * Where keyboard metrics come from.\n *\n * - `'visual-viewport'` — the Visual Viewport API. Works in any browser, but\n *   iOS only reports the keyboard once its slide-in animation has finished.\n * - `'native'` — `keyboardWillShow` / `keyboardWillHide` window events with a\n *   `keyboardHeight` property, as fired by `cordova-plugin-ionic-keyboard` and\n *   Capacitor's Keyboard plugin. They arrive *before* the keyboard animates,\n *   so layout can move in step with it.\n */\nexport type KeyboardInsetSource = 'visual-viewport' | 'native';\n\nexport interface KeyboardInsetState {\n  /** Pixels of the layout viewport covered by the on-screen keyboard. */\n  keyboardInset: number;\n  /** Whether an on-screen keyboard currently covers part of the page. */\n  isKeyboardOpen: boolean;\n}\n\nexport interface UseKeyboardInsetOptions {\n  /** Track the keyboard; `false` stops tracking and clears the CSS variables. @default true */\n  enabled?: boolean;\n  /** Where keyboard metrics come from. @default 'visual-viewport' */\n  source?: KeyboardInsetSource;\n}\n\ninterface NativeKeyboardEvent extends Event {\n  keyboardHeight?: number;\n}\n\nconst CLOSED: KeyboardInsetState = { keyboardInset: 0, isKeyboardOpen: false };\n\n/**\n * Tracks the on-screen keyboard and publishes it on `<html>`.\n *\n * ### `source: 'native'` (Cordova / Capacitor apps)\n *\n * Listens for the native keyboard plugin's `keyboardWillShow` /\n * `keyboardWillHide` window events. Configure the plugin so the WebView is\n * neither resized nor panned (for `cordova-plugin-ionic-keyboard`:\n * `KeyboardResize=false`), keep the app shell at full height, and move only\n * the composer dock by `--mieweb-keyboard-inset` with a short transition\n * (~250ms) so it rides up with the keyboard. Only `--mieweb-keyboard-inset`,\n * `data-keyboard-open` and `data-keyboard-source` are published; the\n * visual-viewport variables stay unset.\n *\n * ### `source: 'visual-viewport'` (browsers, default)\n *\n * Uses the Visual Viewport API.\n *\n * iOS Safari and WKWebView (Cordova) ignore\n * `interactive-widget=resizes-content`, and `dvh` does not shrink for the\n * keyboard: the page keeps its full height and iOS pans the visual viewport\n * to reveal the focused input, pushing headers off-screen. This hook\n * measures what is actually visible and publishes it on `<html>` so an app\n * shell can follow the visible area instead:\n *\n * - `--mieweb-keyboard-inset` — keyboard height in px (0 when closed)\n * - `--mieweb-visual-viewport-height` — visible height in px\n * - `--mieweb-visual-viewport-offset-top` — how far iOS panned the page\n * - `data-keyboard-open` — present while the keyboard is open\n *\n * On browsers that already resize the layout for the keyboard (Chrome on\n * Android with `interactive-widget=resizes-content`) the inset stays 0 and\n * the variables simply mirror the layout viewport.\n *\n * iOS reports the visual viewport only after the keyboard has finished\n * animating, so a shell sized this way snaps into place once the keyboard\n * lands. Prefer `source: 'native'` wherever a native keyboard plugin exists.\n *\n * Mount it once, near the app root.\n *\n * @example\n * ```tsx\n * function AppShell({ children }) {\n *   useKeyboardInset();\n *   return (\n *     <div\n *       style={{\n *         height: 'var(--mieweb-visual-viewport-height, 100dvh)',\n *         transform: 'translateY(var(--mieweb-visual-viewport-offset-top, 0px))',\n *       }}\n *     >\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Native app (keyboard plugin with WebView resizing disabled)\n * ```tsx\n * function ComposerDock({ children }) {\n *   useKeyboardInset({ source: 'native' });\n *   return (\n *     <div\n *       style={{\n *         paddingBottom: 'calc(var(--mieweb-keyboard-inset, 0px) + 0.5rem)',\n *         transition: 'padding-bottom 250ms ease',\n *       }}\n *     >\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useKeyboardInset(\n  options: UseKeyboardInsetOptions = {}\n): KeyboardInsetState {\n  const { enabled = true, source = 'visual-viewport' } = options;\n  const [state, setState] = useState<KeyboardInsetState>(CLOSED);\n\n  useEffect(() => {\n    if (!enabled || typeof window === 'undefined') return;\n    const root = document.documentElement;\n\n    const publish = (keyboardInset: number) => {\n      const isKeyboardOpen = keyboardInset > 0;\n      root.style.setProperty(KEYBOARD_INSET_VAR, `${keyboardInset}px`);\n      root.toggleAttribute(KEYBOARD_OPEN_ATTRIBUTE, isKeyboardOpen);\n      setState((previous) =>\n        previous.keyboardInset === keyboardInset\n          ? previous\n          : { keyboardInset, isKeyboardOpen }\n      );\n    };\n\n    const clear = () => {\n      root.style.removeProperty(KEYBOARD_INSET_VAR);\n      root.style.removeProperty(VISUAL_VIEWPORT_HEIGHT_VAR);\n      root.style.removeProperty(VISUAL_VIEWPORT_OFFSET_TOP_VAR);\n      root.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);\n      root.removeAttribute(KEYBOARD_SOURCE_ATTRIBUTE);\n      setState(CLOSED);\n    };\n\n    if (source === 'native') {\n      const handleWillShow = (event: Event) => {\n        publish(\n          Math.max(\n            0,\n            Math.round((event as NativeKeyboardEvent).keyboardHeight ?? 0)\n          )\n        );\n      };\n      const handleWillHide = () => publish(0);\n\n      root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);\n      publish(0);\n      window.addEventListener('keyboardWillShow', handleWillShow);\n      window.addEventListener('keyboardWillHide', handleWillHide);\n\n      return () => {\n        window.removeEventListener('keyboardWillShow', handleWillShow);\n        window.removeEventListener('keyboardWillHide', handleWillHide);\n        clear();\n      };\n    }\n\n    const viewport = window.visualViewport;\n    if (!viewport) return;\n\n    let frame = 0;\n\n    const measure = () => {\n      frame = 0;\n      // Pinch-zoom shrinks the visual viewport too; that is not a keyboard.\n      const zoomed = Math.abs(viewport.scale - 1) > 0.01;\n      const keyboardInset = zoomed\n        ? 0\n        : Math.max(\n            0,\n            Math.round(\n              window.innerHeight - viewport.height - viewport.offsetTop\n            )\n          );\n\n      root.style.setProperty(\n        VISUAL_VIEWPORT_HEIGHT_VAR,\n        `${zoomed ? window.innerHeight : Math.round(viewport.height)}px`\n      );\n      root.style.setProperty(\n        VISUAL_VIEWPORT_OFFSET_TOP_VAR,\n        `${zoomed ? 0 : Math.round(viewport.offsetTop)}px`\n      );\n      publish(keyboardInset);\n    };\n\n    // Coalesce the resize + scroll bursts iOS fires while the keyboard\n    // animates into one write per frame.\n    const schedule = () => {\n      if (frame === 0) frame = requestAnimationFrame(measure);\n    };\n\n    root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);\n    measure();\n    viewport.addEventListener('resize', schedule);\n    viewport.addEventListener('scroll', schedule);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      viewport.removeEventListener('resize', schedule);\n      viewport.removeEventListener('scroll', schedule);\n      clear();\n    };\n  }, [enabled, source]);\n\n  return state;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}

package/dist/{chunk-X2PPZJSL.cjs → chunk-LHBWRMNC.cjs}

@@ -38,15 +38,52 @@ var KEYBOARD_INSET_VAR = "--mieweb-keyboard-inset";
 var VISUAL_VIEWPORT_HEIGHT_VAR = "--mieweb-visual-viewport-height";
 var VISUAL_VIEWPORT_OFFSET_TOP_VAR = "--mieweb-visual-viewport-offset-top";
 var KEYBOARD_OPEN_ATTRIBUTE = "data-keyboard-open";
+var KEYBOARD_SOURCE_ATTRIBUTE = "data-keyboard-source";
 var CLOSED = { keyboardInset: 0, isKeyboardOpen: false };
 function useKeyboardInset(options = {}) {
-  const { enabled = true } = options;
+  const { enabled = true, source = "visual-viewport" } = options;
   const [state, setState] = react.useState(CLOSED);
   react.useEffect(() => {
     if (!enabled || typeof window === "undefined") return;
+    const root = document.documentElement;
+    const publish = (keyboardInset) => {
+      const isKeyboardOpen = keyboardInset > 0;
+      root.style.setProperty(KEYBOARD_INSET_VAR, `${keyboardInset}px`);
+      root.toggleAttribute(KEYBOARD_OPEN_ATTRIBUTE, isKeyboardOpen);
+      setState(
+        (previous) => previous.keyboardInset === keyboardInset ? previous : { keyboardInset, isKeyboardOpen }
+      );
+    };
+    const clear = () => {
+      root.style.removeProperty(KEYBOARD_INSET_VAR);
+      root.style.removeProperty(VISUAL_VIEWPORT_HEIGHT_VAR);
+      root.style.removeProperty(VISUAL_VIEWPORT_OFFSET_TOP_VAR);
+      root.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);
+      root.removeAttribute(KEYBOARD_SOURCE_ATTRIBUTE);
+      setState(CLOSED);
+    };
+    if (source === "native") {
+      const handleWillShow = (event) => {
+        publish(
+          Math.max(
+            0,
+            Math.round(event.keyboardHeight ?? 0)
+          )
+        );
+      };
+      const handleWillHide = () => publish(0);
+      root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);
+      publish(0);
+      window.addEventListener("keyboardWillShow", handleWillShow);
+      window.addEventListener("keyboardWillHide", handleWillHide);
+      return () => {
+        window.removeEventListener("keyboardWillShow", handleWillShow);
+        window.removeEventListener("keyboardWillHide", handleWillHide);
+        clear();
+      };
+    }
     const viewport = window.visualViewport;
     if (!viewport) return;
-    const root = document.documentElement;
     let frame = 0;
     const measure = () => {
       frame = 0;
@@ -57,8 +94,6 @@ function useKeyboardInset(options = {}) {
           window.innerHeight - viewport.height - viewport.offsetTop
         )
       );
-      const isKeyboardOpen = keyboardInset > 0;
-      root.style.setProperty(KEYBOARD_INSET_VAR, `${keyboardInset}px`);
       root.style.setProperty(
         VISUAL_VIEWPORT_HEIGHT_VAR,
         `${zoomed ? window.innerHeight : Math.round(viewport.height)}px`
@@ -67,14 +102,12 @@ function useKeyboardInset(options = {}) {
         VISUAL_VIEWPORT_OFFSET_TOP_VAR,
         `${zoomed ? 0 : Math.round(viewport.offsetTop)}px`
       );
-      root.toggleAttribute(KEYBOARD_OPEN_ATTRIBUTE, isKeyboardOpen);
-      setState(
-        (previous) => previous.keyboardInset === keyboardInset ? previous : { keyboardInset, isKeyboardOpen }
-      );
+      publish(keyboardInset);
     };
     const schedule = () => {
       if (frame === 0) frame = requestAnimationFrame(measure);
     };
+    root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);
     measure();
     viewport.addEventListener("resize", schedule);
     viewport.addEventListener("scroll", schedule);
@@ -82,13 +115,9 @@ function useKeyboardInset(options = {}) {
       cancelAnimationFrame(frame);
       viewport.removeEventListener("resize", schedule);
       viewport.removeEventListener("scroll", schedule);
-      root.style.removeProperty(KEYBOARD_INSET_VAR);
-      root.style.removeProperty(VISUAL_VIEWPORT_HEIGHT_VAR);
-      root.style.removeProperty(VISUAL_VIEWPORT_OFFSET_TOP_VAR);
-      root.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);
-      setState(CLOSED);
+      clear();
     };
-  }, [enabled]);
+  }, [enabled, source]);
   return state;
 }
 function useKeyboardShortcut(key, callback, options = {}) {
@@ -186,6 +215,7 @@ function useIsMobileOrTablet() {
 
 exports.KEYBOARD_INSET_VAR = KEYBOARD_INSET_VAR;
 exports.KEYBOARD_OPEN_ATTRIBUTE = KEYBOARD_OPEN_ATTRIBUTE;
+exports.KEYBOARD_SOURCE_ATTRIBUTE = KEYBOARD_SOURCE_ATTRIBUTE;
 exports.RTL_LOCALES = RTL_LOCALES;
 exports.VISUAL_VIEWPORT_HEIGHT_VAR = VISUAL_VIEWPORT_HEIGHT_VAR;
 exports.VISUAL_VIEWPORT_OFFSET_TOP_VAR = VISUAL_VIEWPORT_OFFSET_TOP_VAR;
@@ -201,5 +231,5 @@ exports.useIsTablet = useIsTablet;
 exports.useKeyboardInset = useKeyboardInset;
 exports.useKeyboardShortcut = useKeyboardShortcut;
 exports.useMediaQuery = useMediaQuery;
-//# sourceMappingURL=chunk-X2PPZJSL.cjs.map
-//# sourceMappingURL=chunk-X2PPZJSL.cjs.map
+//# sourceMappingURL=chunk-LHBWRMNC.cjs.map
+//# sourceMappingURL=chunk-LHBWRMNC.cjs.map

package/dist/chunk-LHBWRMNC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardInset.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useState","useEffect","useCallback"],"mappings":"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","file":"chunk-LHBWRMNC.cjs","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useState } from 'react';\n\n/** CSS custom properties written to `<html>` while the hook is mounted. */\nexport const KEYBOARD_INSET_VAR = '--mieweb-keyboard-inset';\nexport const VISUAL_VIEWPORT_HEIGHT_VAR = '--mieweb-visual-viewport-height';\nexport const VISUAL_VIEWPORT_OFFSET_TOP_VAR =\n  '--mieweb-visual-viewport-offset-top';\n/** Boolean attribute set on `<html>` while an on-screen keyboard is open. */\nexport const KEYBOARD_OPEN_ATTRIBUTE = 'data-keyboard-open';\n/** Attribute on `<html>` naming the active {@link KeyboardInsetSource}. */\nexport const KEYBOARD_SOURCE_ATTRIBUTE = 'data-keyboard-source';\n\n/**\n * Where keyboard metrics come from.\n *\n * - `'visual-viewport'` — the Visual Viewport API. Works in any browser, but\n *   iOS only reports the keyboard once its slide-in animation has finished.\n * - `'native'` — `keyboardWillShow` / `keyboardWillHide` window events with a\n *   `keyboardHeight` property, as fired by `cordova-plugin-ionic-keyboard` and\n *   Capacitor's Keyboard plugin. They arrive *before* the keyboard animates,\n *   so layout can move in step with it.\n */\nexport type KeyboardInsetSource = 'visual-viewport' | 'native';\n\nexport interface KeyboardInsetState {\n  /** Pixels of the layout viewport covered by the on-screen keyboard. */\n  keyboardInset: number;\n  /** Whether an on-screen keyboard currently covers part of the page. */\n  isKeyboardOpen: boolean;\n}\n\nexport interface UseKeyboardInsetOptions {\n  /** Track the keyboard; `false` stops tracking and clears the CSS variables. @default true */\n  enabled?: boolean;\n  /** Where keyboard metrics come from. @default 'visual-viewport' */\n  source?: KeyboardInsetSource;\n}\n\ninterface NativeKeyboardEvent extends Event {\n  keyboardHeight?: number;\n}\n\nconst CLOSED: KeyboardInsetState = { keyboardInset: 0, isKeyboardOpen: false };\n\n/**\n * Tracks the on-screen keyboard and publishes it on `<html>`.\n *\n * ### `source: 'native'` (Cordova / Capacitor apps)\n *\n * Listens for the native keyboard plugin's `keyboardWillShow` /\n * `keyboardWillHide` window events. Configure the plugin so the WebView is\n * neither resized nor panned (for `cordova-plugin-ionic-keyboard`:\n * `KeyboardResize=false`), keep the app shell at full height, and move only\n * the composer dock by `--mieweb-keyboard-inset` with a short transition\n * (~250ms) so it rides up with the keyboard. Only `--mieweb-keyboard-inset`,\n * `data-keyboard-open` and `data-keyboard-source` are published; the\n * visual-viewport variables stay unset.\n *\n * ### `source: 'visual-viewport'` (browsers, default)\n *\n * Uses the Visual Viewport API.\n *\n * iOS Safari and WKWebView (Cordova) ignore\n * `interactive-widget=resizes-content`, and `dvh` does not shrink for the\n * keyboard: the page keeps its full height and iOS pans the visual viewport\n * to reveal the focused input, pushing headers off-screen. This hook\n * measures what is actually visible and publishes it on `<html>` so an app\n * shell can follow the visible area instead:\n *\n * - `--mieweb-keyboard-inset` — keyboard height in px (0 when closed)\n * - `--mieweb-visual-viewport-height` — visible height in px\n * - `--mieweb-visual-viewport-offset-top` — how far iOS panned the page\n * - `data-keyboard-open` — present while the keyboard is open\n *\n * On browsers that already resize the layout for the keyboard (Chrome on\n * Android with `interactive-widget=resizes-content`) the inset stays 0 and\n * the variables simply mirror the layout viewport.\n *\n * iOS reports the visual viewport only after the keyboard has finished\n * animating, so a shell sized this way snaps into place once the keyboard\n * lands. Prefer `source: 'native'` wherever a native keyboard plugin exists.\n *\n * Mount it once, near the app root.\n *\n * @example\n * ```tsx\n * function AppShell({ children }) {\n *   useKeyboardInset();\n *   return (\n *     <div\n *       style={{\n *         height: 'var(--mieweb-visual-viewport-height, 100dvh)',\n *         transform: 'translateY(var(--mieweb-visual-viewport-offset-top, 0px))',\n *       }}\n *     >\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n *\n * @example Native app (keyboard plugin with WebView resizing disabled)\n * ```tsx\n * function ComposerDock({ children }) {\n *   useKeyboardInset({ source: 'native' });\n *   return (\n *     <div\n *       style={{\n *         paddingBottom: 'calc(var(--mieweb-keyboard-inset, 0px) + 0.5rem)',\n *         transition: 'padding-bottom 250ms ease',\n *       }}\n *     >\n *       {children}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useKeyboardInset(\n  options: UseKeyboardInsetOptions = {}\n): KeyboardInsetState {\n  const { enabled = true, source = 'visual-viewport' } = options;\n  const [state, setState] = useState<KeyboardInsetState>(CLOSED);\n\n  useEffect(() => {\n    if (!enabled || typeof window === 'undefined') return;\n    const root = document.documentElement;\n\n    const publish = (keyboardInset: number) => {\n      const isKeyboardOpen = keyboardInset > 0;\n      root.style.setProperty(KEYBOARD_INSET_VAR, `${keyboardInset}px`);\n      root.toggleAttribute(KEYBOARD_OPEN_ATTRIBUTE, isKeyboardOpen);\n      setState((previous) =>\n        previous.keyboardInset === keyboardInset\n          ? previous\n          : { keyboardInset, isKeyboardOpen }\n      );\n    };\n\n    const clear = () => {\n      root.style.removeProperty(KEYBOARD_INSET_VAR);\n      root.style.removeProperty(VISUAL_VIEWPORT_HEIGHT_VAR);\n      root.style.removeProperty(VISUAL_VIEWPORT_OFFSET_TOP_VAR);\n      root.removeAttribute(KEYBOARD_OPEN_ATTRIBUTE);\n      root.removeAttribute(KEYBOARD_SOURCE_ATTRIBUTE);\n      setState(CLOSED);\n    };\n\n    if (source === 'native') {\n      const handleWillShow = (event: Event) => {\n        publish(\n          Math.max(\n            0,\n            Math.round((event as NativeKeyboardEvent).keyboardHeight ?? 0)\n          )\n        );\n      };\n      const handleWillHide = () => publish(0);\n\n      root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);\n      publish(0);\n      window.addEventListener('keyboardWillShow', handleWillShow);\n      window.addEventListener('keyboardWillHide', handleWillHide);\n\n      return () => {\n        window.removeEventListener('keyboardWillShow', handleWillShow);\n        window.removeEventListener('keyboardWillHide', handleWillHide);\n        clear();\n      };\n    }\n\n    const viewport = window.visualViewport;\n    if (!viewport) return;\n\n    let frame = 0;\n\n    const measure = () => {\n      frame = 0;\n      // Pinch-zoom shrinks the visual viewport too; that is not a keyboard.\n      const zoomed = Math.abs(viewport.scale - 1) > 0.01;\n      const keyboardInset = zoomed\n        ? 0\n        : Math.max(\n            0,\n            Math.round(\n              window.innerHeight - viewport.height - viewport.offsetTop\n            )\n          );\n\n      root.style.setProperty(\n        VISUAL_VIEWPORT_HEIGHT_VAR,\n        `${zoomed ? window.innerHeight : Math.round(viewport.height)}px`\n      );\n      root.style.setProperty(\n        VISUAL_VIEWPORT_OFFSET_TOP_VAR,\n        `${zoomed ? 0 : Math.round(viewport.offsetTop)}px`\n      );\n      publish(keyboardInset);\n    };\n\n    // Coalesce the resize + scroll bursts iOS fires while the keyboard\n    // animates into one write per frame.\n    const schedule = () => {\n      if (frame === 0) frame = requestAnimationFrame(measure);\n    };\n\n    root.setAttribute(KEYBOARD_SOURCE_ATTRIBUTE, source);\n    measure();\n    viewport.addEventListener('resize', schedule);\n    viewport.addEventListener('scroll', schedule);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      viewport.removeEventListener('resize', schedule);\n      viewport.removeEventListener('scroll', schedule);\n      clear();\n    };\n  }, [enabled, source]);\n\n  return state;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}

package/dist/hooks/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkX2PPZJSL_cjs = require('../chunk-X2PPZJSL.cjs');
+var chunkLHBWRMNC_cjs = require('../chunk-LHBWRMNC.cjs');
 var chunkIXFC7LK2_cjs = require('../chunk-IXFC7LK2.cjs');
 var chunk2O7D6F67_cjs = require('../chunk-2O7D6F67.cjs');
 var chunkVPTASZ2O_cjs = require('../chunk-VPTASZ2O.cjs');
@@ -22,71 +22,75 @@ require('../chunk-EUAMEVVI.cjs');
 
 Object.defineProperty(exports, "KEYBOARD_INSET_VAR", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.KEYBOARD_INSET_VAR; }
+  get: function () { return chunkLHBWRMNC_cjs.KEYBOARD_INSET_VAR; }
 });
 Object.defineProperty(exports, "KEYBOARD_OPEN_ATTRIBUTE", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.KEYBOARD_OPEN_ATTRIBUTE; }
+  get: function () { return chunkLHBWRMNC_cjs.KEYBOARD_OPEN_ATTRIBUTE; }
+});
+Object.defineProperty(exports, "KEYBOARD_SOURCE_ATTRIBUTE", {
+  enumerable: true,
+  get: function () { return chunkLHBWRMNC_cjs.KEYBOARD_SOURCE_ATTRIBUTE; }
 });
 Object.defineProperty(exports, "RTL_LOCALES", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.RTL_LOCALES; }
+  get: function () { return chunkLHBWRMNC_cjs.RTL_LOCALES; }
 });
 Object.defineProperty(exports, "VISUAL_VIEWPORT_HEIGHT_VAR", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.VISUAL_VIEWPORT_HEIGHT_VAR; }
+  get: function () { return chunkLHBWRMNC_cjs.VISUAL_VIEWPORT_HEIGHT_VAR; }
 });
 Object.defineProperty(exports, "VISUAL_VIEWPORT_OFFSET_TOP_VAR", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.VISUAL_VIEWPORT_OFFSET_TOP_VAR; }
+  get: function () { return chunkLHBWRMNC_cjs.VISUAL_VIEWPORT_OFFSET_TOP_VAR; }
 });
 Object.defineProperty(exports, "isRtlLocale", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.isRtlLocale; }
+  get: function () { return chunkLHBWRMNC_cjs.isRtlLocale; }
 });
 Object.defineProperty(exports, "useCommandK", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useCommandK; }
+  get: function () { return chunkLHBWRMNC_cjs.useCommandK; }
 });
 Object.defineProperty(exports, "useDirection", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useDirection; }
+  get: function () { return chunkLHBWRMNC_cjs.useDirection; }
 });
 Object.defineProperty(exports, "useIsDesktop", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useIsDesktop; }
+  get: function () { return chunkLHBWRMNC_cjs.useIsDesktop; }
 });
 Object.defineProperty(exports, "useIsLargeDesktop", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useIsLargeDesktop; }
+  get: function () { return chunkLHBWRMNC_cjs.useIsLargeDesktop; }
 });
 Object.defineProperty(exports, "useIsMobile", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useIsMobile; }
+  get: function () { return chunkLHBWRMNC_cjs.useIsMobile; }
 });
 Object.defineProperty(exports, "useIsMobileOrTablet", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useIsMobileOrTablet; }
+  get: function () { return chunkLHBWRMNC_cjs.useIsMobileOrTablet; }
 });
 Object.defineProperty(exports, "useIsSmallTablet", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useIsSmallTablet; }
+  get: function () { return chunkLHBWRMNC_cjs.useIsSmallTablet; }
 });
 Object.defineProperty(exports, "useIsTablet", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useIsTablet; }
+  get: function () { return chunkLHBWRMNC_cjs.useIsTablet; }
 });
 Object.defineProperty(exports, "useKeyboardInset", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useKeyboardInset; }
+  get: function () { return chunkLHBWRMNC_cjs.useKeyboardInset; }
 });
 Object.defineProperty(exports, "useKeyboardShortcut", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useKeyboardShortcut; }
+  get: function () { return chunkLHBWRMNC_cjs.useKeyboardShortcut; }
 });
 Object.defineProperty(exports, "useMediaQuery", {
   enumerable: true,
-  get: function () { return chunkX2PPZJSL_cjs.useMediaQuery; }
+  get: function () { return chunkLHBWRMNC_cjs.useMediaQuery; }
 });
 Object.defineProperty(exports, "useYouTubeHoverPreview", {
   enumerable: true,

package/dist/hooks/index.d.cts

@@ -226,6 +226,19 @@ declare const VISUAL_VIEWPORT_HEIGHT_VAR = "--mieweb-visual-viewport-height";
 declare const VISUAL_VIEWPORT_OFFSET_TOP_VAR = "--mieweb-visual-viewport-offset-top";
 /** Boolean attribute set on `<html>` while an on-screen keyboard is open. */
 declare const KEYBOARD_OPEN_ATTRIBUTE = "data-keyboard-open";
+/** Attribute on `<html>` naming the active {@link KeyboardInsetSource}. */
+declare const KEYBOARD_SOURCE_ATTRIBUTE = "data-keyboard-source";
+/**
+ * Where keyboard metrics come from.
+ *
+ * - `'visual-viewport'` — the Visual Viewport API. Works in any browser, but
+ *   iOS only reports the keyboard once its slide-in animation has finished.
+ * - `'native'` — `keyboardWillShow` / `keyboardWillHide` window events with a
+ *   `keyboardHeight` property, as fired by `cordova-plugin-ionic-keyboard` and
+ *   Capacitor's Keyboard plugin. They arrive *before* the keyboard animates,
+ *   so layout can move in step with it.
+ */
+type KeyboardInsetSource = 'visual-viewport' | 'native';
 interface KeyboardInsetState {
     /** Pixels of the layout viewport covered by the on-screen keyboard. */
     keyboardInset: number;
@@ -235,9 +248,26 @@ interface KeyboardInsetState {
 interface UseKeyboardInsetOptions {
     /** Track the keyboard; `false` stops tracking and clears the CSS variables. @default true */
     enabled?: boolean;
+    /** Where keyboard metrics come from. @default 'visual-viewport' */
+    source?: KeyboardInsetSource;
 }
 /**
- * Tracks the on-screen keyboard via the Visual Viewport API.
+ * Tracks the on-screen keyboard and publishes it on `<html>`.
+ *
+ * ### `source: 'native'` (Cordova / Capacitor apps)
+ *
+ * Listens for the native keyboard plugin's `keyboardWillShow` /
+ * `keyboardWillHide` window events. Configure the plugin so the WebView is
+ * neither resized nor panned (for `cordova-plugin-ionic-keyboard`:
+ * `KeyboardResize=false`), keep the app shell at full height, and move only
+ * the composer dock by `--mieweb-keyboard-inset` with a short transition
+ * (~250ms) so it rides up with the keyboard. Only `--mieweb-keyboard-inset`,
+ * `data-keyboard-open` and `data-keyboard-source` are published; the
+ * visual-viewport variables stay unset.
+ *
+ * ### `source: 'visual-viewport'` (browsers, default)
+ *
+ * Uses the Visual Viewport API.
  *
  * iOS Safari and WKWebView (Cordova) ignore
  * `interactive-widget=resizes-content`, and `dvh` does not shrink for the
@@ -255,6 +285,10 @@ interface UseKeyboardInsetOptions {
  * Android with `interactive-widget=resizes-content`) the inset stays 0 and
  * the variables simply mirror the layout viewport.
  *
+ * iOS reports the visual viewport only after the keyboard has finished
+ * animating, so a shell sized this way snaps into place once the keyboard
+ * lands. Prefer `source: 'native'` wherever a native keyboard plugin exists.
+ *
  * Mount it once, near the app root.
  *
  * @example
@@ -273,6 +307,23 @@ interface UseKeyboardInsetOptions {
  *   );
  * }
  * ```
+ *
+ * @example Native app (keyboard plugin with WebView resizing disabled)
+ * ```tsx
+ * function ComposerDock({ children }) {
+ *   useKeyboardInset({ source: 'native' });
+ *   return (
+ *     <div
+ *       style={{
+ *         paddingBottom: 'calc(var(--mieweb-keyboard-inset, 0px) + 0.5rem)',
+ *         transition: 'padding-bottom 250ms ease',
+ *       }}
+ *     >
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
  */
 declare function useKeyboardInset(options?: UseKeyboardInsetOptions): KeyboardInsetState;
 
@@ -952,4 +1003,4 @@ interface UseTranscriptEditsResult {
  */
 declare function useTranscriptEdits(options: UseTranscriptEditsOptions): UseTranscriptEditsResult;
 
-export { type AnchoredPlacement, DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, type Direction, type DragOverState, type FillerAnalysis, type HoverPreviewState, KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, type KeyboardInsetState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type ResolvedTheme, type SilenceThresholdCount, type Theme, type TranscriptClipboard, type TranscriptEditStats, type UseAnchoredPositionOptions, type UseAnchoredPositionReturn, type UseDragReorderOptions, type UseDragReorderReturn, type UseKeyboardInsetOptions, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, type UseStickToBottomOptions, type UseStickToBottomReturn, type UseTranscriptEditsOptions, type UseTranscriptEditsResult, type UseYouTubeHoverPreviewOptions, type UseYouTubeHoverPreviewReturn, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, buildPlaybackSegments, dragIndicatorClasses, getSpeedAtIndex, initEditableWords, insertSilences, isDarkMode, isRtlLocale, reorderIds, useAnchoredPosition, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useStickToBottom, useStreamEndedBelowFold, useTheme, useTranscriptEdits, useYouTubeHoverPreview };
+export { type AnchoredPlacement, DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, type Direction, type DragOverState, type FillerAnalysis, type HoverPreviewState, KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, KEYBOARD_SOURCE_ATTRIBUTE, type KeyboardInsetSource, type KeyboardInsetState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type ResolvedTheme, type SilenceThresholdCount, type Theme, type TranscriptClipboard, type TranscriptEditStats, type UseAnchoredPositionOptions, type UseAnchoredPositionReturn, type UseDragReorderOptions, type UseDragReorderReturn, type UseKeyboardInsetOptions, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, type UseStickToBottomOptions, type UseStickToBottomReturn, type UseTranscriptEditsOptions, type UseTranscriptEditsResult, type UseYouTubeHoverPreviewOptions, type UseYouTubeHoverPreviewReturn, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, buildPlaybackSegments, dragIndicatorClasses, getSpeedAtIndex, initEditableWords, insertSilences, isDarkMode, isRtlLocale, reorderIds, useAnchoredPosition, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useStickToBottom, useStreamEndedBelowFold, useTheme, useTranscriptEdits, useYouTubeHoverPreview };

package/dist/hooks/index.d.ts

@@ -226,6 +226,19 @@ declare const VISUAL_VIEWPORT_HEIGHT_VAR = "--mieweb-visual-viewport-height";
 declare const VISUAL_VIEWPORT_OFFSET_TOP_VAR = "--mieweb-visual-viewport-offset-top";
 /** Boolean attribute set on `<html>` while an on-screen keyboard is open. */
 declare const KEYBOARD_OPEN_ATTRIBUTE = "data-keyboard-open";
+/** Attribute on `<html>` naming the active {@link KeyboardInsetSource}. */
+declare const KEYBOARD_SOURCE_ATTRIBUTE = "data-keyboard-source";
+/**
+ * Where keyboard metrics come from.
+ *
+ * - `'visual-viewport'` — the Visual Viewport API. Works in any browser, but
+ *   iOS only reports the keyboard once its slide-in animation has finished.
+ * - `'native'` — `keyboardWillShow` / `keyboardWillHide` window events with a
+ *   `keyboardHeight` property, as fired by `cordova-plugin-ionic-keyboard` and
+ *   Capacitor's Keyboard plugin. They arrive *before* the keyboard animates,
+ *   so layout can move in step with it.
+ */
+type KeyboardInsetSource = 'visual-viewport' | 'native';
 interface KeyboardInsetState {
     /** Pixels of the layout viewport covered by the on-screen keyboard. */
     keyboardInset: number;
@@ -235,9 +248,26 @@ interface KeyboardInsetState {
 interface UseKeyboardInsetOptions {
     /** Track the keyboard; `false` stops tracking and clears the CSS variables. @default true */
     enabled?: boolean;
+    /** Where keyboard metrics come from. @default 'visual-viewport' */
+    source?: KeyboardInsetSource;
 }
 /**
- * Tracks the on-screen keyboard via the Visual Viewport API.
+ * Tracks the on-screen keyboard and publishes it on `<html>`.
+ *
+ * ### `source: 'native'` (Cordova / Capacitor apps)
+ *
+ * Listens for the native keyboard plugin's `keyboardWillShow` /
+ * `keyboardWillHide` window events. Configure the plugin so the WebView is
+ * neither resized nor panned (for `cordova-plugin-ionic-keyboard`:
+ * `KeyboardResize=false`), keep the app shell at full height, and move only
+ * the composer dock by `--mieweb-keyboard-inset` with a short transition
+ * (~250ms) so it rides up with the keyboard. Only `--mieweb-keyboard-inset`,
+ * `data-keyboard-open` and `data-keyboard-source` are published; the
+ * visual-viewport variables stay unset.
+ *
+ * ### `source: 'visual-viewport'` (browsers, default)
+ *
+ * Uses the Visual Viewport API.
  *
  * iOS Safari and WKWebView (Cordova) ignore
  * `interactive-widget=resizes-content`, and `dvh` does not shrink for the
@@ -255,6 +285,10 @@ interface UseKeyboardInsetOptions {
  * Android with `interactive-widget=resizes-content`) the inset stays 0 and
  * the variables simply mirror the layout viewport.
  *
+ * iOS reports the visual viewport only after the keyboard has finished
+ * animating, so a shell sized this way snaps into place once the keyboard
+ * lands. Prefer `source: 'native'` wherever a native keyboard plugin exists.
+ *
  * Mount it once, near the app root.
  *
  * @example
@@ -273,6 +307,23 @@ interface UseKeyboardInsetOptions {
  *   );
  * }
  * ```
+ *
+ * @example Native app (keyboard plugin with WebView resizing disabled)
+ * ```tsx
+ * function ComposerDock({ children }) {
+ *   useKeyboardInset({ source: 'native' });
+ *   return (
+ *     <div
+ *       style={{
+ *         paddingBottom: 'calc(var(--mieweb-keyboard-inset, 0px) + 0.5rem)',
+ *         transition: 'padding-bottom 250ms ease',
+ *       }}
+ *     >
+ *       {children}
+ *     </div>
+ *   );
+ * }
+ * ```
  */
 declare function useKeyboardInset(options?: UseKeyboardInsetOptions): KeyboardInsetState;
 
@@ -952,4 +1003,4 @@ interface UseTranscriptEditsResult {
  */
 declare function useTranscriptEdits(options: UseTranscriptEditsOptions): UseTranscriptEditsResult;
 
-export { type AnchoredPlacement, DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, type Direction, type DragOverState, type FillerAnalysis, type HoverPreviewState, KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, type KeyboardInsetState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type ResolvedTheme, type SilenceThresholdCount, type Theme, type TranscriptClipboard, type TranscriptEditStats, type UseAnchoredPositionOptions, type UseAnchoredPositionReturn, type UseDragReorderOptions, type UseDragReorderReturn, type UseKeyboardInsetOptions, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, type UseStickToBottomOptions, type UseStickToBottomReturn, type UseTranscriptEditsOptions, type UseTranscriptEditsResult, type UseYouTubeHoverPreviewOptions, type UseYouTubeHoverPreviewReturn, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, buildPlaybackSegments, dragIndicatorClasses, getSpeedAtIndex, initEditableWords, insertSilences, isDarkMode, isRtlLocale, reorderIds, useAnchoredPosition, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useStickToBottom, useStreamEndedBelowFold, useTheme, useTranscriptEdits, useYouTubeHoverPreview };
+export { type AnchoredPlacement, DEFAULT_FILLER_WORDS, DEFAULT_MIN_SILENCE_MS, DEFAULT_NL_SILENCE_MS, type Direction, type DragOverState, type FillerAnalysis, type HoverPreviewState, KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, KEYBOARD_SOURCE_ATTRIBUTE, type KeyboardInsetSource, type KeyboardInsetState, type KeyboardShortcutOptions, type MediaTransportState, RTL_LOCALES, type ResolvedTheme, type SilenceThresholdCount, type Theme, type TranscriptClipboard, type TranscriptEditStats, type UseAnchoredPositionOptions, type UseAnchoredPositionReturn, type UseDragReorderOptions, type UseDragReorderReturn, type UseKeyboardInsetOptions, type UseMediaTransportOptions, type UseMediaTransportReturn, type UseScrollSpyOptions, type UseScrollSpyReturn, type UseStickToBottomOptions, type UseStickToBottomReturn, type UseTranscriptEditsOptions, type UseTranscriptEditsResult, type UseYouTubeHoverPreviewOptions, type UseYouTubeHoverPreviewReturn, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, buildPlaybackSegments, dragIndicatorClasses, getSpeedAtIndex, initEditableWords, insertSilences, isDarkMode, isRtlLocale, reorderIds, useAnchoredPosition, useClickOutside, useCommandK, useDirection, useDragReorder, useEscapeKey, useFocusTrap, useIsDarkMode, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useLiveAnnouncement, useMediaQuery, useMediaTransport, usePrefersReducedMotion, useScrollSpy, useStickToBottom, useStreamEndedBelowFold, useTheme, useTranscriptEdits, useYouTubeHoverPreview };

package/dist/hooks/index.js

@@ -1,4 +1,4 @@
-export { KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, RTL_LOCALES, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useMediaQuery } from '../chunk-LENW5YOC.js';
+export { KEYBOARD_INSET_VAR, KEYBOARD_OPEN_ATTRIBUTE, KEYBOARD_SOURCE_ATTRIBUTE, RTL_LOCALES, VISUAL_VIEWPORT_HEIGHT_VAR, VISUAL_VIEWPORT_OFFSET_TOP_VAR, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardInset, useKeyboardShortcut, useMediaQuery } from '../chunk-GBUVIGD5.js';
 export { useYouTubeHoverPreview } from '../chunk-POWS35OT.js';
 export { useTheme } from '../chunk-KJZNEVYM.js';
 export { useStickToBottom, useStreamEndedBelowFold } from '../chunk-BM35CACB.js';