/** Portrait shell gate. SSR defaults desktop to avoid hydration flip. */
export function useIsMobile() {
  const isMobile = useState('studio2.isMobile', () => false)

  function read() {
    if (!import.meta.client) return false
    return window.matchMedia('(max-width: 767px)').matches
  }

  function sync() {
    isMobile.value = read()
  }

  if (import.meta.client) {
    onMounted(() => {
      sync()
      const mq = window.matchMedia('(max-width: 767px)')
      const onChange = () => { isMobile.value = mq.matches }
      mq.addEventListener?.('change', onChange)
      window.addEventListener('resize', sync)
      onBeforeUnmount(() => {
        mq.removeEventListener?.('change', onChange)
        window.removeEventListener('resize', sync)
      })
    })
  }

  return { isMobile }
}