// matchMedia 기반 runes 반응형 flag. 컴포넌트 script 최상위에서만 호출해야
// $effect가 owner를 찾는다. SSR에서는 초기값 false로 가정하고, 클라이언트
// mount 후 실제 값으로 업데이트.
//
// Phase D.1 신규 — documents/+page.svelte 에서 xl 브레이크포인트 기반으로
// 메타 rail(persistent) 과 Drawer(폴백) 중 어느 쪽을 쓸지 분기.
//
// 사용:
//   import { useIsXl } from '$lib/composables/useMedia.svelte';
//   const isXl = useIsXl();
//   {#if isXl.current} ... {/if}
//
// Tailwind v4 xl breakpoint = 1280px (app.css @theme 기본값과 일치).

export interface MediaFlag {
  readonly current: boolean;
}

export function useMedia(query: string): MediaFlag {
  let matches = $state(false);

  $effect(() => {
    if (typeof window === 'undefined') return;
    const mql = window.matchMedia(query);
    matches = mql.matches;
    const handler = (e: MediaQueryListEvent) => (matches = e.matches);
    mql.addEventListener('change', handler);
    return () => mql.removeEventListener('change', handler);
  });

  return {
    get current() {
      return matches;
    },
  };
}

export const useIsXl = (): MediaFlag => useMedia('(min-width: 1280px)');
