{"version":3,"file":"useMediaQuery.mjs","names":[],"sources":["../../../../package/common/hooks/useMediaQuery.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react';\n\nfunction supported(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n}\n\n/**\n * `true` while `query` matches, kept current so a resize or an input-mode change re-renders.\n *\n * `useSyncExternalStore` rather than `useState` + `useEffect`: callers pick *markup* with this,\n * so hydration has to start from the server's answer. Reading `matchMedia` in a `useState`\n * initialiser makes the client's first render disagree with the server's HTML.\n */\nexport function useMediaQuery(query: string): boolean {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (!supported()) return () => {};\n      const mql = window.matchMedia(query);\n      mql.addEventListener('change', onChange);\n      return () => mql.removeEventListener('change', onChange);\n    },\n    [query],\n  );\n\n  const getSnapshot = useCallback(() => supported() && window.matchMedia(query).matches, [query]);\n\n  /** No media query exists on the server, so the tree renders as if nothing matched. */\n  const getServerSnapshot = useCallback(() => false, []);\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nexport default useMediaQuery;\n"],"mappings":"2EAEA,SAAS,GAAqB,CAC5B,OAAO,OAAO,OAAW,KAAe,OAAO,OAAO,YAAe,UACvE,CASA,SAAgB,EAAc,EAAwB,CACpD,IAAM,EAAY,EACf,GAAyB,CACxB,GAAI,CAAC,EAAU,EAAG,UAAa,CAAC,EAChC,IAAM,EAAM,OAAO,WAAW,CAAK,EAEnC,OADA,EAAI,iBAAiB,SAAU,CAAQ,MAC1B,EAAI,oBAAoB,SAAU,CAAQ,CACzD,EACA,CAAC,CAAK,CACR,EAEM,EAAc,MAAkB,EAAU,GAAK,OAAO,WAAW,CAAK,CAAC,CAAC,QAAS,CAAC,CAAK,CAAC,EAGxF,EAAoB,MAAkB,GAAO,CAAC,CAAC,EAErD,OAAO,EAAqB,EAAW,EAAa,CAAiB,CACvE"}