"use client";

import { createContext, useContext } from "react";

/** Widest `.app` width that gets the phone layout (spec "Mobile layout", ADR 0001 section 3). */
export const COMPACT_MAX_WIDTH = 760;

/** True when `.app` is 760px wide or less. Matches `@container app (max-width: 760px)`. */
export function isCompactWidth(width: number): boolean {
  return width > 0 && width <= COMPACT_MAX_WIDTH;
}

/**
 * Whether the signed-in shell is in the phone layout. AppShell measures `.app`
 * and provides it; outside the shell (tests, other pages) it is false, so the
 * desktop markup renders.
 */
export const CompactLayoutContext = createContext(false);

export function useCompactLayout(): boolean {
  return useContext(CompactLayoutContext);
}