import { computed, toValue } from "vue";
import { defaultFonts, themePresets } from "@scalar/themes";
//#region src/v2/features/app/hooks/use-theme.ts
var themePresentsMap = new Map(themePresets.map((theme) => [theme.slug, theme]));
/**
* Wraps theme CSS styles in a style tag for injection into the DOM.
*/
var wrapThemeInStyleTag = (themeStyles, dataTestId = "scalar-theme") => {
	return `<style id="scalar-theme" data-testid="${dataTestId}">${themeStyles}</style>`;
};
/**
* Resolves theme styles by slug from built-in presets or custom themes.
* Returns undefined if the theme is not found.
*/
var resolveThemeStyles = (themeSlug, customThemes) => {
	const addFonts = (themeStyles) => {
		return `${themeStyles}\n${defaultFonts}`;
	};
	if (themePresentsMap.has(themeSlug)) return addFonts(themePresentsMap.get(themeSlug)?.theme ?? "");
	const customTheme = customThemes.find((theme) => theme.slug === themeSlug);
	if (customTheme) return addFonts(customTheme.theme);
};
/**
* useTheme
*
* Reactive Vue.js hook to resolve and generate a <style> tag string based on the current theme.
* Automatically selects the appropriate theme styles in the following priority order:
*    1. Workspace theme (from the provided store, e.g. store.workspace['x-scalar-theme'])
*    2. Fallback theme (from the fallbackThemeSlug prop)
*    3. Default built-in theme (with slug "default")
*
* The returned `themeStyleTag` can be injected into your page to dynamically apply theming.
*
* @example
* ```ts
* // In a Vue component setup() function
* import { ref } from 'vue'
* import { useTheme } from './use-theme.js'
*
* const myThemes = ref([...])
* const workspaceStore = ref(...)
* const fallbackThemeSlug = ref('dark')
*
* const { themeStyleTag } = useTheme({
*   customThemes: myThemes,
*   fallbackThemeSlug,
*   store: workspaceStore
* })
*
* // To inject in template:
* // <div v-html="themeStyleTag"></div>
* ```
*/
var useTheme = ({ fallbackThemeSlug, store, customThemes }) => {
	const themeStyles = computed(() => {
		const defaultThemeStyles = {
			themeStyles: resolveThemeStyles("default", []),
			themeSlug: "default"
		};
		const storeValue = toValue(store);
		const fallbackThemeSlugValue = toValue(fallbackThemeSlug);
		if (storeValue === null) return defaultThemeStyles;
		const workspaceTheme = storeValue.workspace["x-scalar-theme"];
		const themeSlug = workspaceTheme === "none" ? fallbackThemeSlugValue : workspaceTheme;
		if (!themeSlug) {
			const fallbackStyles = resolveThemeStyles(fallbackThemeSlugValue, toValue(customThemes));
			return fallbackStyles ? {
				themeStyles: fallbackStyles,
				themeSlug: fallbackThemeSlugValue
			} : defaultThemeStyles;
		}
		const themeStyles = resolveThemeStyles(themeSlug, toValue(customThemes));
		if (themeStyles) return {
			themeStyles,
			themeSlug
		};
		const fallbackStyles = resolveThemeStyles(fallbackThemeSlugValue, toValue(customThemes));
		if (fallbackStyles) return {
			themeStyles: fallbackStyles,
			themeSlug: fallbackThemeSlugValue
		};
		return defaultThemeStyles;
	});
	return {
		themeStyles,
		themeStyleTag: computed(() => {
			return wrapThemeInStyleTag(themeStyles.value.themeStyles, themeStyles.value.themeSlug);
		})
	};
};
//#endregion
export { useTheme };

//# sourceMappingURL=use-theme.js.map