@intlayer/design-system 9.4.3 → 9.4.4

package/dist/esm/api/index.mjs

@@ -1,13 +1,12 @@
 import { useAiAPI, useAnalyticsAPI, useAssetAPI, useAuditAPI, useBitbucketAPI, useDictionaryAPI, useEditorAPI, useEnvironmentAPI, useGithubAPI, useGitlabAPI, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useNewsletterAPI, useOAuthAPI, useOrganizationAPI, useProjectAPI, useReviewerAPI, useSearchAPI, useShowcaseProjectAPI, useStripeAPI, useTagAPI, useTranslateAPI, useUserAPI } from "./useIntlayerAPI.mjs";
-import { useAddPasskey, useAskResetPassword, useChangePassword, useDeletePasskey, useDeleteSSOProvider, useDisableTwoFactor, useEnableTwoFactor, useGetUserByAccount, useGetVerifyEmailStatus, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useRegister, useRegisterSSO, useResetPassword, useSignInMagicLink, useSignInPasskey, useSignInSSO, useUnlinkAccount, useVerifyBackupCode, useVerifyEmail, useVerifyTotp } from "./hooks/auth.mjs";
 import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
 import { useSession } from "./useAuth/useSession.mjs";
 import { useAuth } from "./useAuth/useAuth.mjs";
-import { useUser } from "./useUser/index.mjs";
 import { useAskDocQuestion, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditTag, useAutocomplete, useChat, useCustomQuery, useGetAIStats, useTranslateJSONDeclaration } from "./hooks/ai.mjs";
 import { useGetAnalyticsAudience, useGetContentStats, useGetExperimentResults } from "./hooks/analytics.mjs";
 import { useDeleteAsset, useGetAssetById, useGetAssets, useUpdateAsset, useUploadAsset } from "./hooks/asset.mjs";
 import { useAuditScan, useGetRecursiveAuditStatus, useStartRecursiveAudit } from "./hooks/audit.mjs";
+import { useAddPasskey, useAskResetPassword, useChangePassword, useDeletePasskey, useDeleteSSOProvider, useDisableTwoFactor, useEnableTwoFactor, useGetUserByAccount, useGetVerifyEmailStatus, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useRegister, useRegisterSSO, useResetPassword, useSignInMagicLink, useSignInPasskey, useSignInSSO, useUnlinkAccount, useVerifyBackupCode, useVerifyEmail, useVerifyTotp } from "./hooks/auth.mjs";
 import { useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos } from "./hooks/bitbucket.mjs";
 import { useAddDictionary, useDeleteDictionary, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useInfiniteGetDictionaries, usePushDictionaries, useUpdateDictionary } from "./hooks/dictionary.mjs";
 import { useGetDiscussions, useGetDiscussionsData } from "./hooks/discussions.mjs";
@@ -25,5 +24,6 @@ import { useAcceptAffiliateInvitation, useCancelSubscription, useCreatePortalSes
 import { useAddTag, useDeleteTag, useGetTags, useUpdateTag } from "./hooks/tag.mjs";
 import { useFillAllTranslations, usePauseTranslationJob, useResumeTranslationJob, useStopTranslationJob } from "./hooks/translate.mjs";
 import { useCreateUser, useDeleteUser, useGetUserById, useGetUsers, useUpdateUser, useUploadUserAvatar } from "./hooks/user.mjs";
+import { useUser } from "./useUser/index.mjs";
 
 export { useAcceptAffiliateInvitation, useAddDictionary, useAddEnvironment, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAiAPI, useAnalyticsAPI, useAskDocQuestion, useAskResetPassword, useAssetAPI, useAuditAPI, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAuth, useAutocomplete, useBitbucketAPI, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useChat, useContactReviewer, useCreateMission, useCreatePortalSession, useCreatePromoCode, useCreateUser, useCustomQuery, useDeleteAccessKey, useDeleteAsset, useDeleteDictionary, useDeleteEnvironment, useDeleteOrganization, useDeleteOrganizationById, useDeletePasskey, useDeleteProject, useDeleteProjectById, useDeletePromoCode, useDeleteReviewerProfile, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDictionaryAPI, useDisableTwoFactor, useEditorAPI, useEnableTwoFactor, useEnvironmentAPI, useEstimateMission, useFillAllTranslations, useGetAIStats, useGetAdminReviewers, useGetAffiliate, useGetAffiliateAccountSession, useGetAffiliateById, useGetAffiliateInvitation, useGetAffiliateInvitations, useGetAffiliateOnboardingLink, useGetAffiliatePromoCode, useGetAffiliateStats, useGetAffiliates, useGetAnalyticsAudience, useGetAssetById, useGetAssets, useGetCIConfig, useGetChatHistory, useGetContentStats, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetExperimentResults, useGetInvoices, useGetMissionById, useGetMyMissions, useGetMyReviewerProfile, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPaymentMethod, useGetPricing, useGetProjectInsights, useGetProjects, useGetPromoCodeById, useGetPromoCodes, useGetRecursiveAuditStatus, useGetReviewerById, useGetReviewerMarketplace, useGetReviewerPriceDistribution, useGetReviewerReviews, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAPI, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGithubToken, useGitlabAPI, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useGrantAffiliateAccess, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useLinkSocial, useListAccounts, useListPasskeys, useListSSOProviders, useLogin, useLogout, useMigrateEnvironment, useNewsletterAPI, useOAuth2, useOAuthAPI, useOrganizationAPI, usePauseTranslationJob, useProjectAPI, usePushCIConfig, usePushDictionaries, usePushProjectConfiguration, useRefreshAccessKey, useRegister, useRegisterAsReviewer, useRegisterSSO, useResetPassword, useResetToProductionEnvironment, useResumeTranslationJob, useReviewerAPI, useSearchAPI, useSearchDoc, useSelectEnvironment, useSelectOrganization, useSelectProject, useSendAffiliateInvitation, useSendReviewerMessage, useSession, useShowcaseProjectAPI, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useStopTranslationJob, useStripeAPI, useSubmitReview, useSubmitShowcaseProject, useSubscribeToNewsletter, useTagAPI, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateAPI, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnlinkAccount, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateAffiliateStatus, useUpdateAsset, useUpdateDictionary, useUpdateEnvironment, useUpdateMemberAccess, useUpdateMissionStatus, useUpdateOrganization, useUpdateOrganizationMailerConfig, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdatePromoCode, useUpdateReviewerProfile, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUploadAsset, useUploadReviewerCoverPicture, useUploadReviewerMainPicture, useUploadUserAvatar, useUser, useUserAPI, useValidateReviewerProfile, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };

package/dist/esm/api/useUser/index.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useLogout } from "../hooks/auth.mjs";
 import { useAuth } from "../useAuth/useAuth.mjs";
+import { useLogout } from "../hooks/auth.mjs";
 
 //#region src/api/useUser/index.ts
 const useUser = () => {

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from "../Button/Button.mjs";
 import { useUser } from "../../api/useUser/index.mjs";
+import { Button } from "../Button/Button.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
@@ -7,7 +8,6 @@ import { Container } from "../../Container/index.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { SwitchSelector } from "../../SwitchSelector/SwitchSelector.mjs";
-import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { renameKey } from "./object.mjs";
 import { Label } from "../../Label/index.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
@@ -16,9 +16,9 @@ import { SafeHtmlRenderer } from "./SafeHtmlRenderer.mjs";
 import { Fragment, Suspense, lazy, memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash, WandSparkles } from "lucide-react";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getLocaleName } from "@intlayer/core/localization";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { camelCaseToSentence } from "@intlayer/config/client";

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs

@@ -1,9 +1,9 @@
 'use client';
 
-import { Button } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAddDictionary } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
+import { Button } from "../../Button/Button.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { InputElement } from "../../Form/elements/InputElement.mjs";

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs

@@ -1,16 +1,16 @@
 'use client';
 
 import { cn } from "../../../utils/cn.mjs";
-import { Loader } from "../../Loader/index.mjs";
-import { Button } from "../../Button/Button.mjs";
-import { Container } from "../../Container/index.mjs";
-import { Checkbox } from "../../Input/Checkbox.mjs";
-import { Input } from "../../Input/Input.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuditContentDeclarationMetadata } from "../../../api/hooks/ai.mjs";
 import { useGetDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useGetProjects } from "../../../api/hooks/project.mjs";
 import { useGetTags } from "../../../api/hooks/tag.mjs";
+import { Loader } from "../../Loader/index.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { Container } from "../../Container/index.mjs";
+import { Checkbox } from "../../Input/Checkbox.mjs";
+import { Input } from "../../Input/Input.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { FormItem } from "../../Form/FormItem.mjs";
@@ -30,8 +30,8 @@ import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { WandSparkles } from "lucide-react";
-import { useIntlayer } from "react-intlayer";
 import { useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { useWatch } from "react-hook-form";
 import { AnimatePresence, motion } from "framer-motion";
 

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs

@@ -13,8 +13,8 @@ import { StructureEditor } from "./StructureEditor.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from "lucide-react";
-import { useIntlayer } from "react-intlayer";
 import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true, rightContent }) => {

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -5,8 +5,8 @@ import { getIsEditableSection } from "../getIsEditableSection.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Plus } from "lucide-react";
-import { useIntlayer } from "react-intlayer";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/DictionaryFieldEditor/NodeEditor.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { Container } from "../Container/index.mjs";
 import { useGetDictionaries } from "../../api/hooks/dictionary.mjs";
+import { Container } from "../Container/index.mjs";
 import { LocaleSwitcherContent } from "../LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs";
 import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
 import { Pagination } from "../Pagination/Pagination.mjs";
@@ -10,8 +10,8 @@ import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
 import { useCallback, useDeferredValue, useEffect, useMemo, useState, useTransition } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getContentNodeByKeyPath } from "@intlayer/core/dictionaryManipulator";
 
 //#region src/components/DictionaryFieldEditor/NodeEditor.tsx

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs

@@ -1,17 +1,17 @@
 'use client';
 
 import { cn } from "../../../utils/cn.mjs";
-import { Button } from "../../Button/Button.mjs";
 import { useSession } from "../../../api/useAuth/useSession.mjs";
 import { useAuth } from "../../../api/useAuth/useAuth.mjs";
 import { useDeleteDictionary, usePushDictionaries } from "../../../api/hooks/dictionary.mjs";
 import { useWriteDictionary } from "../../../api/hooks/editor.mjs";
+import { Button } from "../../Button/Button.mjs";
 import { Modal } from "../../Modal/Modal.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
-import { useIntlayer } from "react-intlayer";
 import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs

@@ -6,8 +6,8 @@ import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash } from "lucide-react";
-import { useIntlayer } from "react-intlayer";
 import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/IDE/MarkDownRender.mjs

@@ -1,6 +1,6 @@
 import { Code } from "./Code.mjs";
-import { jsx } from "react/jsx-runtime";
 import cn from "cnfast";
+import { jsx } from "react/jsx-runtime";
 import { MarkdownRenderer as MarkdownRenderer$1 } from "react-intlayer/markdown";
 
 //#region src/components/IDE/MarkDownRender.tsx

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -107,21 +107,32 @@ const bgStyle = "bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blu
 * @param props - MobileNavbar component props
 * @returns Mobile navigation with rollable full-screen menu
 */
-const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems, rollable = true }) => {
+const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems, rollable = true, isActive = true }) => {
 	const [isHidden, setIsHidden] = useState(false);
 	const [isUnrolled, setIsUnrolled] = useState(false);
 	const [headerHeight, setHeaderHeight] = useState(0);
 	const navRef = useRef(null);
 	useScrollBlockage({
-		disableScroll: rollable,
+		disableScroll: isActive && rollable,
 		key: "mobile_nav"
 	});
 	useScrollDetection({
 		onScrollUp: () => setIsHidden(false),
 		onScrollDown: () => setIsHidden(true),
-		isEnabled: !isUnrolled && rollable
+		isEnabled: isActive && !isUnrolled && rollable
 	});
 	/**
+	* Clears the transient state when the desktop layout takes over. Without it,
+	* a viewport that grows past the breakpoint while the header is scrolled away
+	* — or while the menu is open — restores that state on the way back, and the
+	* user returns to a navbar that is translated off screen.
+	*/
+	useEffect(() => {
+		if (isActive) return;
+		setIsHidden(false);
+		setIsUnrolled(false);
+	}, [isActive]);
+	/**
 	* Measures the collapsed header so the rolled-down panel can size itself to
 	* the rest of the viewport.
 	*

package/dist/esm/components/Navbar/MobileNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport {\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n  const [headerHeight, setHeaderHeight] = useState<number>(0);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled && rollable,\n  });\n\n  /**\n   * Measures the collapsed header so the rolled-down panel can size itself to\n   * the rest of the viewport.\n   *\n   * Reading `clientHeight` from the render body forced a layout on every\n   * render, and `useScrollDetection` re-renders this component on each wheel\n   * event — so the measurement ran once per scroll frame. A `ResizeObserver`\n   * callback runs *after* layout, which makes the same read free, and the\n   * height is published only when it actually changed.\n   */\n  useEffect(() => {\n    const headerElement = navRef.current;\n\n    if (!headerElement) return;\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n\n      // Border box, to stay equivalent to the `clientHeight` this replaces:\n      // `contentRect` would drop the header's vertical padding.\n      const measuredHeight =\n        entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n      setHeaderHeight((previousHeight) =>\n        previousHeight === measuredHeight ? previousHeight : measuredHeight\n      );\n    });\n\n    resizeObserver.observe(headerElement);\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  const backDivHeight = isHidden ? 0 : headerHeight;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"flex w-full flex-col pt-10 pb-[20%] text-foreground text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-100 items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;CAAI,EAC1D;CACA,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;CAAG,EAC5D;AACF;;;;;AAMA,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,CAAC,GACf,gBACA,iBAAiB,CAAC,GAClB,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,KAAK;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,KAAK;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,CAAC;CAE1D,MAAM,SAAS,OAAuB,IAAI;CAE1C,kBAAkB;EAChB,eAAe;EACf,KAAK;CACP,CAAC;CAED,mBAAmB;EACjB,kBAAkB,YAAY,KAAK;EACnC,oBAAoB,YAAY,IAAI;EACpC,WAAW,CAAC,cAAc;CAC5B,CAAC;;;;;;;;;;;CAYD,gBAAgB;EACd,MAAM,gBAAgB,OAAO;EAE7B,IAAI,CAAC,eAAe;EAEpB,MAAM,iBAAiB,IAAI,gBAAgB,CAAC,WAAW;GACrD,IAAI,CAAC,OAAO;GAIZ,MAAM,iBACJ,MAAM,gBAAgB,EAAE,EAAE,aAAa,MAAM,YAAY;GAE3D,iBAAiB,mBACf,mBAAmB,iBAAiB,iBAAiB,cACvD;EACF,CAAC;EAED,eAAe,QAAQ,aAAa;EAEpC,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,WAAW,IAAI;CAErC,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,eACnC;EACA,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,IAEJ,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,UAAU;IACzD,EAEA;KACF;MAEL,oBAAC,OAAD;GACE,WAAW,GACT,SACA,kDACF;aAEA,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,KAAK;KAClC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,KACxC;eAPF;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,cACE;;MAEL,oBAAC,OAAD;OAAK,WAAU;iBACZ;MACE;KACA;;GACU;EAChB,EACF;;AAET"}
+{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport {\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\n  /**\n   * Whether this navbar is the one on screen. The responsive switch is done in\n   * CSS, so the desktop layout keeps this component mounted but hidden; a\n   * hidden navbar must not lock the page scroll or answer scroll events.\n   * Defaults to `true`, for the standalone use of this component.\n   */\n  isActive?: boolean;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\n  isActive = true,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n  const [headerHeight, setHeaderHeight] = useState<number>(0);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isActive && rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: isActive && !isUnrolled && rollable,\n  });\n\n  /**\n   * Clears the transient state when the desktop layout takes over. Without it,\n   * a viewport that grows past the breakpoint while the header is scrolled away\n   * — or while the menu is open — restores that state on the way back, and the\n   * user returns to a navbar that is translated off screen.\n   */\n  useEffect(() => {\n    if (isActive) return;\n\n    setIsHidden(false);\n    setIsUnrolled(false);\n  }, [isActive]);\n\n  /**\n   * Measures the collapsed header so the rolled-down panel can size itself to\n   * the rest of the viewport.\n   *\n   * Reading `clientHeight` from the render body forced a layout on every\n   * render, and `useScrollDetection` re-renders this component on each wheel\n   * event — so the measurement ran once per scroll frame. A `ResizeObserver`\n   * callback runs *after* layout, which makes the same read free, and the\n   * height is published only when it actually changed.\n   */\n  useEffect(() => {\n    const headerElement = navRef.current;\n\n    if (!headerElement) return;\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n\n      // Border box, to stay equivalent to the `clientHeight` this replaces:\n      // `contentRect` would drop the header's vertical padding.\n      const measuredHeight =\n        entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;\n\n      setHeaderHeight((previousHeight) =>\n        previousHeight === measuredHeight ? previousHeight : measuredHeight\n      );\n    });\n\n    resizeObserver.observe(headerElement);\n\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  const backDivHeight = isHidden ? 0 : headerHeight;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"flex w-full flex-col pt-10 pb-[20%] text-foreground text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-100 items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiDA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;CAAI,EAC1D;CACA,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;CAAG,EAC5D;AACF;;;;;AAMA,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,CAAC,GACf,gBACA,iBAAiB,CAAC,GAClB,YACA,WAAW,MACX,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,KAAK;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,KAAK;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAiB,CAAC;CAE1D,MAAM,SAAS,OAAuB,IAAI;CAE1C,kBAAkB;EAChB,eAAe,YAAY;EAC3B,KAAK;CACP,CAAC;CAED,mBAAmB;EACjB,kBAAkB,YAAY,KAAK;EACnC,oBAAoB,YAAY,IAAI;EACpC,WAAW,YAAY,CAAC,cAAc;CACxC,CAAC;;;;;;;CAQD,gBAAgB;EACd,IAAI,UAAU;EAEd,YAAY,KAAK;EACjB,cAAc,KAAK;CACrB,GAAG,CAAC,QAAQ,CAAC;;;;;;;;;;;CAYb,gBAAgB;EACd,MAAM,gBAAgB,OAAO;EAE7B,IAAI,CAAC,eAAe;EAEpB,MAAM,iBAAiB,IAAI,gBAAgB,CAAC,WAAW;GACrD,IAAI,CAAC,OAAO;GAIZ,MAAM,iBACJ,MAAM,gBAAgB,EAAE,EAAE,aAAa,MAAM,YAAY;GAE3D,iBAAiB,mBACf,mBAAmB,iBAAiB,iBAAiB,cACvD;EACF,CAAC;EAED,eAAe,QAAQ,aAAa;EAEpC,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,WAAW,IAAI;CAErC,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,eACnC;EACA,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,IAEJ,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,UAAU;IACzD,EAEA;KACF;MAEL,oBAAC,OAAD;GACE,WAAW,GACT,SACA,kDACF;aAEA,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,KAAK;KAClC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,KACxC;eAPF;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,cACE;;MAEL,oBAAC,OAAD;OAAK,WAAU;iBACZ;MACE;KACA;;GACU;EAChB,EACF;;AAET"}

package/dist/esm/components/Navbar/index.mjs

@@ -4,25 +4,32 @@ import { useDevice } from "../../hooks/useDevice.mjs";
 import { DesktopNavbar } from "./DesktopNavbar.mjs";
 import { Burger } from "./Burger.mjs";
 import { MobileNavbar } from "./MobileNavbar.mjs";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Navbar/index.tsx
 const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSections = [], mobileBottomChildren, mobileBottomSections = [], rightItemsDesktop, rightItemsMobile, selectedChoice, mobileRollable = true }) => {
 	const { isMobile } = useDevice("lg");
-	return isMobile ? /* @__PURE__ */ jsx(MobileNavbar, {
-		topChildren: mobileTopChildren,
-		topSections: mobileTopSections,
-		bottomChildren: mobileBottomChildren,
-		bottomSections: mobileBottomSections,
-		logo,
-		rightItems: rightItemsMobile,
-		rollable: mobileRollable
-	}) : /* @__PURE__ */ jsx(DesktopNavbar, {
-		sections: desktopSections,
-		rightItems: rightItemsDesktop,
-		logo,
-		selectedChoice
-	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "contents lg:hidden",
+		children: /* @__PURE__ */ jsx(MobileNavbar, {
+			topChildren: mobileTopChildren,
+			topSections: mobileTopSections,
+			bottomChildren: mobileBottomChildren,
+			bottomSections: mobileBottomSections,
+			logo,
+			rightItems: rightItemsMobile,
+			rollable: mobileRollable,
+			isActive: isMobile === true
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		className: "hidden lg:contents",
+		children: /* @__PURE__ */ jsx(DesktopNavbar, {
+			sections: desktopSections,
+			rightItems: rightItemsDesktop,
+			logo,
+			selectedChoice
+		})
+	})] });
 };
 
 //#endregion

package/dist/esm/components/Navbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AA+FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,CAAC,GACnB,oBAAoB,CAAC,GACrB,sBACA,uBAAuB,CAAC,GACxB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,IAAI;CAEnC,OAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;CACX,KAED,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;CACjB;AAEL"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Both are mounted and CSS picks one, so server-rendered and prerendered\n *   markup paints the right layout with no swap once the bundle hydrates\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  // Only decides which navbar *behaves*, never which one is shown: the media\n  // query cannot resolve before hydration, and picking the layout in JS baked\n  // the desktop navbar into the prerendered HTML — mobile visitors watched it\n  // swap once the bundle arrived. CSS makes the first paint already correct.\n  const { isMobile } = useDevice('lg');\n\n  return (\n    <>\n      {/* `contents` keeps the wrapper out of the layout, so each navbar still\n          sticks and stretches exactly as it did when rendered on its own. */}\n      <div className=\"contents lg:hidden\">\n        <MobileNavbar\n          topChildren={mobileTopChildren}\n          topSections={mobileTopSections}\n          bottomChildren={mobileBottomChildren}\n          bottomSections={mobileBottomSections}\n          logo={logo}\n          rightItems={rightItemsMobile}\n          rollable={mobileRollable}\n          isActive={isMobile === true}\n        />\n      </div>\n      <div className=\"hidden lg:contents\">\n        <DesktopNavbar\n          sections={desktopSections}\n          rightItems={rightItemsDesktop}\n          logo={logo}\n          selectedChoice={selectedChoice}\n        />\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;AAgGA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,CAAC,GACnB,oBAAoB,CAAC,GACrB,sBACA,uBAAuB,CAAC,GACxB,mBACA,kBACA,gBACA,iBAAiB,WACG;CAKpB,MAAM,EAAE,aAAa,UAAU,IAAI;CAEnC,OACE,4CAGE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,cAAD;GACE,aAAa;GACb,aAAa;GACb,gBAAgB;GAChB,gBAAgB;GACV;GACN,YAAY;GACZ,UAAU;GACV,UAAU,aAAa;EACxB;CACE,IACL,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,eAAD;GACE,UAAU;GACV,YAAY;GACN;GACU;EACjB;CACE,EACL;AAEN"}

package/dist/esm/components/Pattern/GridDistortionPattern.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useTheme } from "../../providers/ThemeProvider.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useTheme } from "../../providers/ThemeProvider.mjs";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/esm/components/Status/index.mjs

@@ -1,6 +1,6 @@
 import { useTheme } from "../../providers/ThemeProvider.mjs";
-import { jsx } from "react/jsx-runtime";
 import cn from "cnfast";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Status/index.tsx
 const Status = ({ className, ...props }) => {

package/dist/esm/hooks/useDevice.mjs

@@ -1,19 +1,18 @@
 'use client';
 
-import { useEffect, useState } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 //#region src/hooks/useDevice.ts
-const getBreakpointFromSize = (breakpoint) => {
-	switch (breakpoint) {
-		case "xs": return 480;
-		case "sm": return 640;
-		case "md": return 768;
-		case "lg": return 1024;
-		case "xl": return 1280;
-		case "2xl": return 1536;
-		default: return breakpoint;
-	}
+/** Tailwind's breakpoints, in pixels. */
+const BREAKPOINT_WIDTHS = {
+	xs: 480,
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536
 };
+const getBreakpointFromSize = (breakpoint) => typeof breakpoint === "number" ? breakpoint : BREAKPOINT_WIDTHS[breakpoint] ?? BREAKPOINT_WIDTHS.md;
 const checkIsMobileUserAgent = () => {
 	if (typeof window === "undefined") return;
 	const userAgent = window.navigator?.userAgent;
@@ -55,33 +54,102 @@ const calculateIsMobile = (breakpoint = "md") => {
 		isMac: checkIsMac()
 	};
 };
-const useDevice = (breakpoint = "md") => {
-	const [result, setResult] = useState({
-		isMobileScreen: void 0,
-		isMobileUserAgent: void 0,
-		isMobile: void 0,
-		isIOS: void 0,
-		isMac: void 0
+/**
+* Snapshot served while rendering on the server and while hydrating, where no
+* viewport exists. Frozen and shared so every consumer reads the very same
+* reference — `useSyncExternalStore` compares snapshots by identity.
+*/
+const SERVER_SNAPSHOT = Object.freeze({
+	isMobileScreen: void 0,
+	isMobileUserAgent: void 0,
+	isMobile: void 0,
+	isIOS: void 0,
+	isMac: void 0
+});
+/** The user agent never changes within a document, so parse it once. */
+let userAgentFlags;
+const getUserAgentFlags = () => {
+	userAgentFlags ??= {
+		isMobileUserAgent: checkIsMobileUserAgent(),
+		isIOS: checkIsIOS(),
+		isMac: checkIsMac()
+	};
+	return userAgentFlags;
+};
+/**
+* One store per breakpoint, shared by every component asking for it.
+*
+* A page mounts this hook from a dozen components; giving each its own
+* `MediaQueryList`, state and effect made the browser evaluate the same query a
+* dozen times and React commit a dozen separate post-hydration renders. Reading
+* from a single store collapses those into one subscription and one commit.
+*/
+const breakpointStores = /* @__PURE__ */ new Map();
+const createBreakpointStore = (breakpointValue) => {
+	const mediaQuery = window.matchMedia(`(max-width: ${breakpointValue}px)`);
+	const listeners = /* @__PURE__ */ new Set();
+	const buildSnapshot = (isMobileScreen) => ({
+		...getUserAgentFlags(),
+		isMobileScreen,
+		isMobile: isMobileScreen
 	});
-	useEffect(() => {
-		const breakpointValue = getBreakpointFromSize(breakpoint);
-		const mobileScreenQuery = window.matchMedia(`(max-width: ${breakpointValue}px)`);
-		const isMobileUserAgent = checkIsMobileUserAgent();
-		const isIOS = checkIsIOS();
-		const isMac = checkIsMac();
-		const applyMatches = (isMobileScreen) => setResult({
-			isMobileScreen,
-			isMobileUserAgent,
-			isMobile: isMobileScreen,
-			isIOS,
-			isMac
-		});
-		applyMatches(mobileScreenQuery.matches);
-		const handleChange = (event) => applyMatches(event.matches);
-		mobileScreenQuery.addEventListener("change", handleChange);
-		return () => mobileScreenQuery.removeEventListener("change", handleChange);
-	}, [breakpoint]);
-	return result;
+	let snapshot = buildSnapshot(mediaQuery.matches);
+	/**
+	* Replaces the snapshot only when the viewport actually crossed the
+	* breakpoint. `useSyncExternalStore` compares snapshots by identity, so
+	* rebuilding an equal object would schedule a render for nothing.
+	*
+	* @returns Whether the snapshot changed.
+	*/
+	const refreshSnapshot = (isMobileScreen) => {
+		if (snapshot.isMobileScreen === isMobileScreen) return false;
+		snapshot = buildSnapshot(isMobileScreen);
+		return true;
+	};
+	const handleChange = (event) => {
+		if (!refreshSnapshot(event.matches)) return;
+		for (const listener of listeners) listener();
+	};
+	return {
+		subscribe: (onStoreChange) => {
+			if (listeners.size === 0) {
+				refreshSnapshot(mediaQuery.matches);
+				mediaQuery.addEventListener("change", handleChange);
+			}
+			listeners.add(onStoreChange);
+			return () => {
+				listeners.delete(onStoreChange);
+				if (listeners.size === 0) mediaQuery.removeEventListener("change", handleChange);
+			};
+		},
+		getSnapshot: () => snapshot
+	};
+};
+const getBreakpointStore = (breakpointValue) => {
+	const existingStore = breakpointStores.get(breakpointValue);
+	if (existingStore) return existingStore;
+	const store = createBreakpointStore(breakpointValue);
+	breakpointStores.set(breakpointValue, store);
+	return store;
+};
+const getServerSnapshot = () => SERVER_SNAPSHOT;
+/**
+* Reports whether the current device is mobile, and which platform it runs.
+*
+* Server renders — including the prerendered HTML both apps ship — resolve to
+* `undefined`, then settle to the real values in a single commit once the
+* browser takes over.
+*
+* @example
+* ```tsx
+* const { isMobile } = useDevice('lg');
+* ```
+*/
+const useDevice = (breakpoint = "md") => {
+	const breakpointValue = getBreakpointFromSize(breakpoint);
+	const subscribe = useCallback((onStoreChange) => getBreakpointStore(breakpointValue).subscribe(onStoreChange), [breakpointValue]);
+	const getSnapshot = useCallback(() => getBreakpointStore(breakpointValue).getSnapshot(), [breakpointValue]);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 //#endregion

package/dist/esm/hooks/useDevice.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.mjs","names":[],"sources":["../../../src/hooks/useDevice.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport const getBreakpointFromSize = (breakpoint: SizeType | number) => {\n  switch (breakpoint) {\n    case 'xs':\n      return 480;\n    case 'sm':\n      return 640;\n    case 'md':\n      return 768;\n    case 'lg':\n      return 1024;\n    case 'xl':\n      return 1280;\n    case '2xl':\n      return 1536;\n    default:\n      return breakpoint;\n  }\n};\n\nexport const checkIsMobileUserAgent = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  return /android|bb\\d+|meego|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(?:hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(?:ob|in)i|palm(?: os)?|phone|p(?:ixi|re)\\/|plucker|pocket|psp|series(?:4|6)0|symbian|treo|up\\.(?:browser|link)|vodafone|wap|windows ce|windows phone|xda|xiino|zte-/i.test(\n    userAgent\n  );\n};\n\nexport const checkIsIphoneOrSafariDevice = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  /* 1 . is it Safari?  (Chrome & co. also contain “Safari/…”, so exclude them) */\n  const isSafari =\n    /Safari\\/\\d/i.test(userAgent) && // has “Safari/xxx”\n    !/Chrome|CriOS|FxiOS|Edg|OPR/i.test(userAgent); // …but not the other browsers\n\n  /* 2. is it an Apple device? (macOS or iOS/iPadOS) */\n  const isAppleDevice = /Macintosh|iP(?:hone|ad|od)/.test(userAgent);\n\n  return isSafari && isAppleDevice; // true for mac-Safari & iOS-Safari\n};\n\nexport const checkIsIOS = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for iOS devices: iPhone, iPad, iPod\n  return /iP(?:hone|ad|od)/.test(userAgent);\n};\n\nexport const checkIsMac = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for macOS/Mac devices\n  return /Macintosh|MacIntel|Mac OS X/.test(userAgent);\n};\n\nexport const checkIsMobileScreen = (\n  breakpoint: number\n): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  return (window?.innerWidth ?? 0) <= breakpoint;\n};\n\ntype UseDeviceState = {\n  isMobileScreen: boolean | undefined;\n  isMobileUserAgent: boolean | undefined;\n  isMobile: boolean | undefined;\n  isIOS: boolean | undefined;\n  isMac: boolean | undefined;\n};\n\nexport const calculateIsMobile = (breakpoint: SizeType | number = 'md') => {\n  const breakpointValue = getBreakpointFromSize(breakpoint);\n\n  const isMobileUserAgent = checkIsMobileUserAgent();\n  const isMobileScreen = checkIsMobileScreen(breakpointValue);\n  const isMobile = isMobileScreen ?? isMobileUserAgent;\n  const isIOS = checkIsIOS();\n  const isMac = checkIsMac();\n\n  return {\n    isMobileScreen, // Is the screen width within a mobile breakpoint.\n    isMobileUserAgent, // Is the user agent indicative of a mobile device.\n    isMobile, // Combines both checks to determine if the device is mobile.\n    isIOS, // Is the device running iOS (iPhone, iPad, iPod).\n    isMac, // Is the device a Mac computer (macOS).\n  };\n};\n\nexport const useDevice = (breakpoint: SizeType | number = 'md') => {\n  const [result, setResult] = useState<UseDeviceState>({\n    isMobileScreen: undefined,\n    isMobileUserAgent: undefined,\n    isMobile: undefined,\n    isIOS: undefined,\n    isMac: undefined,\n  });\n\n  useEffect(() => {\n    const breakpointValue = getBreakpointFromSize(breakpoint);\n    const mobileScreenQuery = window.matchMedia(\n      `(max-width: ${breakpointValue}px)`\n    );\n\n    const isMobileUserAgent = checkIsMobileUserAgent();\n    const isIOS = checkIsIOS();\n    const isMac = checkIsMac();\n\n    const applyMatches = (isMobileScreen: boolean) =>\n      setResult({\n        isMobileScreen,\n        isMobileUserAgent,\n        isMobile: isMobileScreen,\n        isIOS,\n        isMac,\n      });\n\n    applyMatches(mobileScreenQuery.matches);\n\n    const handleChange = (event: MediaQueryListEvent) =>\n      applyMatches(event.matches);\n\n    mobileScreenQuery.addEventListener('change', handleChange);\n\n    return () => mobileScreenQuery.removeEventListener('change', handleChange);\n  }, [breakpoint]);\n\n  return result;\n};\n"],"mappings":";;;;;AAMA,MAAa,yBAAyB,eAAkC;CACtE,QAAQ,YAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,MAAa,+BAAoD;CAC/D,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAEtC,OAAO,mVAAmV,KACxV,SACF;AACF;AAEA,MAAa,oCAAyD;CACpE,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAGpC,MAAM,WACJ,cAAc,KAAK,SAAS,KAC5B,CAAC,8BAA8B,KAAK,SAAS;CAG/C,MAAM,gBAAgB,6BAA6B,KAAK,SAAS;CAEjE,OAAO,YAAY;AACrB;AAEA,MAAa,mBAAwC;CACnD,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAGtC,OAAO,mBAAmB,KAAK,SAAS;AAC1C;AAEA,MAAa,mBAAwC;CACnD,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAGtC,OAAO,8BAA8B,KAAK,SAAS;AACrD;AAEA,MAAa,uBACX,eACwB;CACxB,IAAI,OAAO,WAAW,aAAa;CAEnC,QAAQ,QAAQ,cAAc,MAAM;AACtC;AAUA,MAAa,qBAAqB,aAAgC,SAAS;CACzE,MAAM,kBAAkB,sBAAsB,UAAU;CAExD,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,iBAAiB,oBAAoB,eAAe;CAK1D,OAAO;EACL;EACA;EACA,UAPe,kBAAkB;EAQjC,OAPY,WAOR;EACJ,OAPY,WAOR;CACN;AACF;AAEA,MAAa,aAAa,aAAgC,SAAS;CACjE,MAAM,CAAC,QAAQ,aAAa,SAAyB;EACnD,gBAAgB;EAChB,mBAAmB;EACnB,UAAU;EACV,OAAO;EACP,OAAO;CACT,CAAC;CAED,gBAAgB;EACd,MAAM,kBAAkB,sBAAsB,UAAU;EACxD,MAAM,oBAAoB,OAAO,WAC/B,eAAe,gBAAgB,IACjC;EAEA,MAAM,oBAAoB,uBAAuB;EACjD,MAAM,QAAQ,WAAW;EACzB,MAAM,QAAQ,WAAW;EAEzB,MAAM,gBAAgB,mBACpB,UAAU;GACR;GACA;GACA,UAAU;GACV;GACA;EACF,CAAC;EAEH,aAAa,kBAAkB,OAAO;EAEtC,MAAM,gBAAgB,UACpB,aAAa,MAAM,OAAO;EAE5B,kBAAkB,iBAAiB,UAAU,YAAY;EAEzD,aAAa,kBAAkB,oBAAoB,UAAU,YAAY;CAC3E,GAAG,CAAC,UAAU,CAAC;CAEf,OAAO;AACT"}
+{"version":3,"file":"useDevice.mjs","names":[],"sources":["../../../src/hooks/useDevice.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\nexport type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Tailwind's breakpoints, in pixels. */\nconst BREAKPOINT_WIDTHS: Readonly<Record<SizeType, number>> = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n};\n\nexport const getBreakpointFromSize = (breakpoint: SizeType | number): number =>\n  typeof breakpoint === 'number'\n    ? breakpoint\n    : (BREAKPOINT_WIDTHS[breakpoint] ?? BREAKPOINT_WIDTHS.md);\n\nexport const checkIsMobileUserAgent = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  return /android|bb\\d+|meego|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(?:hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(?:ob|in)i|palm(?: os)?|phone|p(?:ixi|re)\\/|plucker|pocket|psp|series(?:4|6)0|symbian|treo|up\\.(?:browser|link)|vodafone|wap|windows ce|windows phone|xda|xiino|zte-/i.test(\n    userAgent\n  );\n};\n\nexport const checkIsIphoneOrSafariDevice = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  /* 1 . is it Safari?  (Chrome & co. also contain “Safari/…”, so exclude them) */\n  const isSafari =\n    /Safari\\/\\d/i.test(userAgent) && // has “Safari/xxx”\n    !/Chrome|CriOS|FxiOS|Edg|OPR/i.test(userAgent); // …but not the other browsers\n\n  /* 2. is it an Apple device? (macOS or iOS/iPadOS) */\n  const isAppleDevice = /Macintosh|iP(?:hone|ad|od)/.test(userAgent);\n\n  return isSafari && isAppleDevice; // true for mac-Safari & iOS-Safari\n};\n\nexport const checkIsIOS = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for iOS devices: iPhone, iPad, iPod\n  return /iP(?:hone|ad|od)/.test(userAgent);\n};\n\nexport const checkIsMac = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for macOS/Mac devices\n  return /Macintosh|MacIntel|Mac OS X/.test(userAgent);\n};\n\nexport const checkIsMobileScreen = (\n  breakpoint: number\n): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  return (window?.innerWidth ?? 0) <= breakpoint;\n};\n\nexport type DeviceState = {\n  /** Is the screen width within a mobile breakpoint. */\n  isMobileScreen: boolean | undefined;\n  /** Is the user agent indicative of a mobile device. */\n  isMobileUserAgent: boolean | undefined;\n  /** Combines both checks to determine if the device is mobile. */\n  isMobile: boolean | undefined;\n  /** Is the device running iOS (iPhone, iPad, iPod). */\n  isIOS: boolean | undefined;\n  /** Is the device a Mac computer (macOS). */\n  isMac: boolean | undefined;\n};\n\nexport const calculateIsMobile = (\n  breakpoint: SizeType | number = 'md'\n): DeviceState => {\n  const breakpointValue = getBreakpointFromSize(breakpoint);\n\n  const isMobileUserAgent = checkIsMobileUserAgent();\n  const isMobileScreen = checkIsMobileScreen(breakpointValue);\n  const isMobile = isMobileScreen ?? isMobileUserAgent;\n  const isIOS = checkIsIOS();\n  const isMac = checkIsMac();\n\n  return { isMobileScreen, isMobileUserAgent, isMobile, isIOS, isMac };\n};\n\n/**\n * Snapshot served while rendering on the server and while hydrating, where no\n * viewport exists. Frozen and shared so every consumer reads the very same\n * reference — `useSyncExternalStore` compares snapshots by identity.\n */\nconst SERVER_SNAPSHOT: DeviceState = Object.freeze({\n  isMobileScreen: undefined,\n  isMobileUserAgent: undefined,\n  isMobile: undefined,\n  isIOS: undefined,\n  isMac: undefined,\n});\n\ntype UserAgentFlags = Pick<\n  DeviceState,\n  'isMobileUserAgent' | 'isIOS' | 'isMac'\n>;\n\n/** The user agent never changes within a document, so parse it once. */\nlet userAgentFlags: UserAgentFlags | undefined;\n\nconst getUserAgentFlags = (): UserAgentFlags => {\n  userAgentFlags ??= {\n    isMobileUserAgent: checkIsMobileUserAgent(),\n    isIOS: checkIsIOS(),\n    isMac: checkIsMac(),\n  };\n\n  return userAgentFlags;\n};\n\ntype BreakpointStore = {\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => DeviceState;\n};\n\n/**\n * One store per breakpoint, shared by every component asking for it.\n *\n * A page mounts this hook from a dozen components; giving each its own\n * `MediaQueryList`, state and effect made the browser evaluate the same query a\n * dozen times and React commit a dozen separate post-hydration renders. Reading\n * from a single store collapses those into one subscription and one commit.\n */\nconst breakpointStores = new Map<number, BreakpointStore>();\n\nconst createBreakpointStore = (breakpointValue: number): BreakpointStore => {\n  const mediaQuery = window.matchMedia(`(max-width: ${breakpointValue}px)`);\n  const listeners = new Set<() => void>();\n\n  const buildSnapshot = (isMobileScreen: boolean): DeviceState => ({\n    ...getUserAgentFlags(),\n    isMobileScreen,\n    isMobile: isMobileScreen,\n  });\n\n  let snapshot = buildSnapshot(mediaQuery.matches);\n\n  /**\n   * Replaces the snapshot only when the viewport actually crossed the\n   * breakpoint. `useSyncExternalStore` compares snapshots by identity, so\n   * rebuilding an equal object would schedule a render for nothing.\n   *\n   * @returns Whether the snapshot changed.\n   */\n  const refreshSnapshot = (isMobileScreen: boolean): boolean => {\n    if (snapshot.isMobileScreen === isMobileScreen) return false;\n\n    snapshot = buildSnapshot(isMobileScreen);\n\n    return true;\n  };\n\n  const handleChange = (event: MediaQueryListEvent) => {\n    if (!refreshSnapshot(event.matches)) return;\n\n    for (const listener of listeners) listener();\n  };\n\n  return {\n    subscribe: (onStoreChange) => {\n      if (listeners.size === 0) {\n        // The viewport may have moved while nothing was listening; React reads\n        // the snapshot again right after subscribing, so refreshing it here is\n        // what keeps a remounted consumer from rendering a stale width.\n        refreshSnapshot(mediaQuery.matches);\n        mediaQuery.addEventListener('change', handleChange);\n      }\n\n      listeners.add(onStoreChange);\n\n      return () => {\n        listeners.delete(onStoreChange);\n\n        if (listeners.size === 0) {\n          mediaQuery.removeEventListener('change', handleChange);\n        }\n      };\n    },\n    getSnapshot: () => snapshot,\n  };\n};\n\nconst getBreakpointStore = (breakpointValue: number): BreakpointStore => {\n  const existingStore = breakpointStores.get(breakpointValue);\n\n  if (existingStore) return existingStore;\n\n  const store = createBreakpointStore(breakpointValue);\n\n  breakpointStores.set(breakpointValue, store);\n\n  return store;\n};\n\nconst getServerSnapshot = (): DeviceState => SERVER_SNAPSHOT;\n\n/**\n * Reports whether the current device is mobile, and which platform it runs.\n *\n * Server renders — including the prerendered HTML both apps ship — resolve to\n * `undefined`, then settle to the real values in a single commit once the\n * browser takes over.\n *\n * @example\n * ```tsx\n * const { isMobile } = useDevice('lg');\n * ```\n */\nexport const useDevice = (\n  breakpoint: SizeType | number = 'md'\n): DeviceState => {\n  const breakpointValue = getBreakpointFromSize(breakpoint);\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) =>\n      getBreakpointStore(breakpointValue).subscribe(onStoreChange),\n    [breakpointValue]\n  );\n\n  const getSnapshot = useCallback(\n    () => getBreakpointStore(breakpointValue).getSnapshot(),\n    [breakpointValue]\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n"],"mappings":";;;;;;AAOA,MAAM,oBAAwD;CAC5D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAa,yBAAyB,eACpC,OAAO,eAAe,WAClB,aACC,kBAAkB,eAAe,kBAAkB;AAE1D,MAAa,+BAAoD;CAC/D,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAEtC,OAAO,mVAAmV,KACxV,SACF;AACF;AAEA,MAAa,oCAAyD;CACpE,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAGpC,MAAM,WACJ,cAAc,KAAK,SAAS,KAC5B,CAAC,8BAA8B,KAAK,SAAS;CAG/C,MAAM,gBAAgB,6BAA6B,KAAK,SAAS;CAEjE,OAAO,YAAY;AACrB;AAEA,MAAa,mBAAwC;CACnD,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAGtC,OAAO,mBAAmB,KAAK,SAAS;AAC1C;AAEA,MAAa,mBAAwC;CACnD,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAGtC,OAAO,8BAA8B,KAAK,SAAS;AACrD;AAEA,MAAa,uBACX,eACwB;CACxB,IAAI,OAAO,WAAW,aAAa;CAEnC,QAAQ,QAAQ,cAAc,MAAM;AACtC;AAeA,MAAa,qBACX,aAAgC,SAChB;CAChB,MAAM,kBAAkB,sBAAsB,UAAU;CAExD,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,iBAAiB,oBAAoB,eAAe;CAK1D,OAAO;EAAE;EAAgB;EAAmB,UAJ3B,kBAAkB;EAImB,OAHxC,WAG4C;EAAG,OAF/C,WAEmD;CAAE;AACrE;;;;;;AAOA,MAAM,kBAA+B,OAAO,OAAO;CACjD,gBAAgB;CAChB,mBAAmB;CACnB,UAAU;CACV,OAAO;CACP,OAAO;AACT,CAAC;;AAQD,IAAI;AAEJ,MAAM,0BAA0C;CAC9C,mBAAmB;EACjB,mBAAmB,uBAAuB;EAC1C,OAAO,WAAW;EAClB,OAAO,WAAW;CACpB;CAEA,OAAO;AACT;;;;;;;;;AAeA,MAAM,mCAAmB,IAAI,IAA6B;AAE1D,MAAM,yBAAyB,oBAA6C;CAC1E,MAAM,aAAa,OAAO,WAAW,eAAe,gBAAgB,IAAI;CACxE,MAAM,4BAAY,IAAI,IAAgB;CAEtC,MAAM,iBAAiB,oBAA0C;EAC/D,GAAG,kBAAkB;EACrB;EACA,UAAU;CACZ;CAEA,IAAI,WAAW,cAAc,WAAW,OAAO;;;;;;;;CAS/C,MAAM,mBAAmB,mBAAqC;EAC5D,IAAI,SAAS,mBAAmB,gBAAgB,OAAO;EAEvD,WAAW,cAAc,cAAc;EAEvC,OAAO;CACT;CAEA,MAAM,gBAAgB,UAA+B;EACnD,IAAI,CAAC,gBAAgB,MAAM,OAAO,GAAG;EAErC,KAAK,MAAM,YAAY,WAAW,SAAS;CAC7C;CAEA,OAAO;EACL,YAAY,kBAAkB;GAC5B,IAAI,UAAU,SAAS,GAAG;IAIxB,gBAAgB,WAAW,OAAO;IAClC,WAAW,iBAAiB,UAAU,YAAY;GACpD;GAEA,UAAU,IAAI,aAAa;GAE3B,aAAa;IACX,UAAU,OAAO,aAAa;IAE9B,IAAI,UAAU,SAAS,GACrB,WAAW,oBAAoB,UAAU,YAAY;GAEzD;EACF;EACA,mBAAmB;CACrB;AACF;AAEA,MAAM,sBAAsB,oBAA6C;CACvE,MAAM,gBAAgB,iBAAiB,IAAI,eAAe;CAE1D,IAAI,eAAe,OAAO;CAE1B,MAAM,QAAQ,sBAAsB,eAAe;CAEnD,iBAAiB,IAAI,iBAAiB,KAAK;CAE3C,OAAO;AACT;AAEA,MAAM,0BAAuC;;;;;;;;;;;;;AAc7C,MAAa,aACX,aAAgC,SAChB;CAChB,MAAM,kBAAkB,sBAAsB,UAAU;CAExD,MAAM,YAAY,aACf,kBACC,mBAAmB,eAAe,CAAC,CAAC,UAAU,aAAa,GAC7D,CAAC,eAAe,CAClB;CAEA,MAAM,cAAc,kBACZ,mBAAmB,eAAe,CAAC,CAAC,YAAY,GACtD,CAAC,eAAe,CAClB;CAEA,OAAO,qBAAqB,WAAW,aAAa,iBAAiB;AACvE"}