@jenesei-software/jenesei-kit-react 1.0.0

package/build/context.hooks-CTi-CVKx.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.hooks-CTi-CVKx.cjs","sources":["../src/contexts/context-app/context.tsx","../src/contexts/context-app/context.styles.ts","../src/contexts/context-app/context.hooks.ts"],"sourcesContent":["import { FC, createContext, useCallback, useEffect, useState } from 'react'\n\nimport { Preview, PreviewAdditionalProps } from '@local/areas/preview'\nimport { JeneseiPalette, IThemePaletteKeys } from '@local/theme'\n\nimport {\n  AppContextProps,\n  ProviderAppOutlet,\n  ProviderAppOutletChildren,\n  ProviderAppOutletFooter,\n  ProviderAppOutletHeader,\n  ProviderAppOutletLeftAside,\n  ProviderAppOutletNav,\n  ProviderAppOutletNotification,\n  ProviderAppOutletRightAside,\n  ProviderAppProps,\n  ProviderAppWrapper\n} from '.'\nimport { useScreenWidth } from '../context-screen-width'\n\nexport const AppContext = createContext<AppContextProps | null>(null)\n\n/**\n * ProviderApp component is a context context that manages various application-level states\n * such as background color, status bar color, background image, title, and description.\n * It uses several custom hooks to handle these states and provides them via the AppContext.\n *\n * @component\n *\n * @param {ProviderAppProps} props - The properties passed to the ProviderApp component.\n * @param {string} props.defaultBgColor - The default background color.\n * @param {string} props.defaultStatusBarColor - The default status bar color.\n * @param {string} [props.defaultBgImage] - The default background image.\n * @param {string} [props.defaultTitle] - The default title.\n * @param {string} [props.defaultDescription] - The default description.\n * @param {boolean} [props.isScrollOutlet] - Determines if the outlet should be scrollable.\n * @param {object} [props.footer] - The footer component and its properties.\n * @param {object} [props.notification] - The notification component and its properties.\n * @param {object} [props.header] - The header component and its properties.\n * @param {object} [props.nav] - The navigation component and its properties.\n * @param {object} [props.leftAside] - The left aside component and its properties.\n * @param {object} [props.rightAside] - The right aside component and its properties.\n * @param {React.ReactNode} props.children - The children components to be rendered inside the ProviderApp.\n *\n * @returns {JSX.Element} The rendered ProviderApp component.\n */\nexport const ProviderApp: FC<ProviderAppProps> = props => {\n  const { bgColor, changeBgColor, historyBgColor, setDefaultBgColor } = useBgColor(props.defaultBgColor)\n  const { statusBarColor, changeStatusBarColor, historyStatusBarColor, setDefaultStatusBarColor } = useStatusBarColor(\n    props.defaultStatusBarColor\n  )\n  const { bgImage, changeBgImage, historyBgImage, setDefaultBgImage } = useBgImage(props.defaultBgImage || null)\n  const { title, changeTitle, setHistoryTitle, setDefaultTitle } = useTitle(props.defaultTitle || null)\n  const { description, changeDescription, historyDescription, setDefaultDescription } = useDescription(\n    props.defaultDescription\n  )\n  const { changePreview, previewProps } = usePreview(props.defaultPreview)\n  const { screenActual } = useScreenWidth()\n\n  return (\n    <AppContext.Provider\n      value={{\n        changePreview,\n        changeStatusBarColor,\n        changeBgColor,\n        changeBgImage,\n        changeTitle,\n        changeDescription,\n        historyStatusBarColor,\n        historyBgColor,\n        historyBgImage,\n        setHistoryTitle,\n        historyDescription,\n        setDefaultStatusBarColor,\n        setDefaultBgColor,\n        setDefaultBgImage,\n        setDefaultTitle,\n        setDefaultDescription\n      }}\n    >\n      <title>{title}</title>\n      <meta name=\"description\" content={description} />\n      <meta name=\"theme-color\" content={JeneseiPalette[statusBarColor]} />\n      <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"default\" />\n      <meta name=\"mobile-web-app-capable\" content=\"yes\" />\n      <Preview {...previewProps}>\n        <ProviderAppWrapper $bgColor={bgColor} $bgImage={bgImage}>\n          <ProviderAppOutlet\n            $isScrollOutlet={props.isScrollOutlet}\n            $footer={props.footer}\n            $notification={props.notification}\n            $header={props.header}\n            $nav={props.nav}\n            $leftAside={props.leftAside}\n            $rightAside={props.rightAside}\n          >\n            {props.notification?.length && props.notification?.length?.[screenActual] ? (\n              <ProviderAppOutletNotification $notification={props.notification}>\n                {props.notification?.component || null}\n              </ProviderAppOutletNotification>\n            ) : null}\n\n            {props.header?.length && props.header?.length?.[screenActual] ? (\n              <ProviderAppOutletHeader $header={props.header}>\n                {props.header?.component || null}\n              </ProviderAppOutletHeader>\n            ) : null}\n\n            {props.nav?.length && props.nav?.length?.[screenActual] ? (\n              <ProviderAppOutletNav $nav={props.nav}>{props.nav?.component || null}</ProviderAppOutletNav>\n            ) : null}\n\n            {props.leftAside?.length && props.leftAside?.length?.[screenActual] ? (\n              <ProviderAppOutletLeftAside $leftAside={props.leftAside}>\n                {props.leftAside?.component || null}\n              </ProviderAppOutletLeftAside>\n            ) : null}\n\n            <ProviderAppOutletChildren $main={props.main}>{props.children}</ProviderAppOutletChildren>\n\n            {props.rightAside?.length && props.rightAside?.length?.[screenActual] ? (\n              <ProviderAppOutletRightAside $rightAside={props.rightAside}>\n                {props.rightAside?.component || null}\n              </ProviderAppOutletRightAside>\n            ) : null}\n\n            {props.footer?.length && props.footer?.length?.[screenActual] ? (\n              <ProviderAppOutletFooter $footer={props.footer}>\n                {props.footer?.component || null}\n              </ProviderAppOutletFooter>\n            ) : null}\n          </ProviderAppOutlet>\n        </ProviderAppWrapper>\n      </Preview>\n    </AppContext.Provider>\n  )\n}\n\n/**\n * Custom hook to manage preview properties.\n */\nconst usePreview = (defaultPreview: ProviderAppProps['defaultPreview']) => {\n  const [previewProps, setPreviewProps] = useState(defaultPreview || { visible: true, defaultVisible: true })\n\n  const changePreview = useCallback((newPreviewProps: PreviewAdditionalProps) => {\n    setPreviewProps(newPreviewProps)\n  }, [])\n\n  useEffect(() => {\n    if (defaultPreview) setPreviewProps(defaultPreview)\n  }, [defaultPreview])\n\n  return { previewProps, changePreview }\n}\n\n/**\n * Custom hook to manage background color state with history tracking.\n */\ntype BgColorState = {\n  bgColor: IThemePaletteKeys\n  bgColorHistory: IThemePaletteKeys[]\n  bgColorIndex: number\n}\n\nexport const useBgColor = (defaultColor: IThemePaletteKeys) => {\n  const [state, setState] = useState<BgColorState>({\n    bgColor: defaultColor,\n    bgColorHistory: [defaultColor],\n    bgColorIndex: 0\n  })\n\n  const changeBgColor = useCallback((color: IThemePaletteKeys) => {\n    setState(prev => {\n      const newHistory = [...prev.bgColorHistory.slice(0, prev.bgColorIndex + 1), color]\n      return {\n        bgColor: color,\n        bgColorHistory: newHistory,\n        bgColorIndex: newHistory.length - 1\n      }\n    })\n  }, [])\n\n  const historyBgColor = useCallback((steps: number) => {\n    setState(prev => {\n      const newIndex = prev.bgColorIndex + steps\n      if (newIndex >= 0 && newIndex < prev.bgColorHistory.length) {\n        return {\n          ...prev,\n          bgColor: prev.bgColorHistory[newIndex],\n          bgColorIndex: newIndex\n        }\n      }\n      return prev\n    })\n  }, [])\n\n  const setDefaultBgColor = useCallback(() => {\n    setState({\n      bgColor: defaultColor,\n      bgColorHistory: [defaultColor],\n      bgColorIndex: 0\n    })\n  }, [defaultColor])\n\n  useEffect(() => {\n    setState({\n      bgColor: defaultColor,\n      bgColorHistory: [defaultColor],\n      bgColorIndex: 0\n    })\n  }, [defaultColor])\n\n  return {\n    bgColor: state.bgColor,\n    changeBgColor,\n    historyBgColor,\n    setDefaultBgColor,\n    bgColorIndex: state.bgColorIndex\n  }\n}\n\n/**\n * Custom hook to manage the status bar color with history tracking.\n */\ntype StatusBarColorState = {\n  statusBarColor: IThemePaletteKeys\n  statusBarColorHistory: IThemePaletteKeys[]\n  statusBarColorIndex: number\n}\n\nexport const useStatusBarColor = (defaultColor: IThemePaletteKeys) => {\n  const [state, setState] = useState<StatusBarColorState>({\n    statusBarColor: defaultColor,\n    statusBarColorHistory: [defaultColor],\n    statusBarColorIndex: 0\n  })\n\n  const changeStatusBarColor = useCallback((color: IThemePaletteKeys) => {\n    setState(prev => {\n      const newHistory = [...prev.statusBarColorHistory.slice(0, prev.statusBarColorIndex + 1), color]\n      return {\n        statusBarColor: color,\n        statusBarColorHistory: newHistory,\n        statusBarColorIndex: newHistory.length - 1\n      }\n    })\n  }, [])\n\n  const historyStatusBarColor = useCallback((steps: number) => {\n    setState(prev => {\n      const newIndex = prev.statusBarColorIndex + steps\n      if (newIndex >= 0 && newIndex < prev.statusBarColorHistory.length) {\n        return {\n          ...prev,\n          statusBarColor: prev.statusBarColorHistory[newIndex],\n          statusBarColorIndex: newIndex\n        }\n      }\n      return prev\n    })\n  }, [])\n\n  const setDefaultStatusBarColor = useCallback(() => {\n    setState({\n      statusBarColor: defaultColor,\n      statusBarColorHistory: [defaultColor],\n      statusBarColorIndex: 0\n    })\n  }, [defaultColor])\n\n  useEffect(() => {\n    setState({\n      statusBarColor: defaultColor,\n      statusBarColorHistory: [defaultColor],\n      statusBarColorIndex: 0\n    })\n  }, [defaultColor])\n\n  return {\n    statusBarColor: state.statusBarColor,\n    changeStatusBarColor,\n    historyStatusBarColor,\n    setDefaultStatusBarColor,\n    statusBarColorIndex: state.statusBarColorIndex\n  }\n}\n\n/**\n * Custom hook to manage background images with history.\n */\ntype BgImageState = {\n  bgImage: string | null\n  bgImageHistory: (string | null)[]\n  bgImageIndex: number\n}\n\nexport const useBgImage = (defaultImage: string | null) => {\n  const [state, setState] = useState<BgImageState>({\n    bgImage: defaultImage,\n    bgImageHistory: [defaultImage],\n    bgImageIndex: 0\n  })\n\n  const changeBgImage = useCallback((image: string | null) => {\n    setState(prev => {\n      const newHistory = [...prev.bgImageHistory.slice(0, prev.bgImageIndex + 1), image]\n      return {\n        bgImage: image,\n        bgImageHistory: newHistory,\n        bgImageIndex: newHistory.length - 1\n      }\n    })\n  }, [])\n\n  const historyBgImage = useCallback((steps: number) => {\n    setState(prev => {\n      const newIndex = prev.bgImageIndex + steps\n      if (newIndex >= 0 && newIndex < prev.bgImageHistory.length) {\n        return {\n          ...prev,\n          bgImage: prev.bgImageHistory[newIndex],\n          bgImageIndex: newIndex\n        }\n      }\n      return prev\n    })\n  }, [])\n\n  const setDefaultBgImage = useCallback(() => {\n    setState({\n      bgImage: defaultImage,\n      bgImageHistory: [defaultImage],\n      bgImageIndex: 0\n    })\n  }, [defaultImage])\n\n  useEffect(() => {\n    setState({\n      bgImage: defaultImage,\n      bgImageHistory: [defaultImage],\n      bgImageIndex: 0\n    })\n  }, [defaultImage])\n\n  return {\n    bgImage: state.bgImage,\n    changeBgImage,\n    historyBgImage,\n    setDefaultBgImage,\n    bgImageIndex: state.bgImageIndex\n  }\n}\n\ntype TitleState = {\n  title: string | null\n  titleHistory: (string | null)[]\n  titleIndex: number\n}\n/**\n * Custom hook to manage the document title with history tracking.\n */\nconst useTitle = (defaultTitle: string | null) => {\n  const [state, setState] = useState<TitleState>({\n    title: defaultTitle,\n    titleHistory: [defaultTitle],\n    titleIndex: 0\n  })\n\n  const changeTitle = useCallback((newTitle: string | null) => {\n    setState(prev => {\n      const newHistory = [...prev.titleHistory.slice(0, prev.titleIndex + 1), newTitle]\n      return {\n        title: newTitle,\n        titleHistory: newHistory,\n        titleIndex: newHistory.length - 1\n      }\n    })\n  }, [])\n\n  const setHistoryTitle = useCallback((steps: number) => {\n    setState(prev => {\n      const newIndex = prev.titleIndex + steps\n      if (newIndex >= 0 && newIndex < prev.titleHistory.length) {\n        return {\n          ...prev,\n          title: prev.titleHistory[newIndex],\n          titleIndex: newIndex\n        }\n      }\n      return prev\n    })\n  }, [])\n\n  const setDefaultTitle = useCallback(() => {\n    setState({\n      title: defaultTitle,\n      titleHistory: [defaultTitle],\n      titleIndex: 0\n    })\n  }, [defaultTitle])\n\n  useEffect(() => {\n    setState({\n      title: defaultTitle,\n      titleHistory: [defaultTitle],\n      titleIndex: 0\n    })\n  }, [defaultTitle])\n\n  return {\n    title: state.title,\n    titleIndex: state.titleIndex,\n    titleHistory: state.titleHistory,\n    changeTitle,\n    setHistoryTitle,\n    setDefaultTitle\n  }\n}\n\n/**\n * Custom hook to manage a description with history tracking.\n */\ntype DescriptionState = {\n  description: string\n  descriptionHistory: string[]\n  descriptionIndex: number\n}\n\nexport const useDescription = (defaultDescription: string) => {\n  const [state, setState] = useState<DescriptionState>({\n    description: defaultDescription,\n    descriptionHistory: [defaultDescription],\n    descriptionIndex: 0\n  })\n\n  const changeDescription = useCallback((newDescription: string) => {\n    setState(prev => {\n      const newHistory = [...prev.descriptionHistory.slice(0, prev.descriptionIndex + 1), newDescription]\n      return {\n        description: newDescription,\n        descriptionHistory: newHistory,\n        descriptionIndex: newHistory.length - 1\n      }\n    })\n  }, [])\n\n  const historyDescription = useCallback((steps: number) => {\n    setState(prev => {\n      const newIndex = prev.descriptionIndex + steps\n      if (newIndex >= 0 && newIndex < prev.descriptionHistory.length) {\n        return {\n          ...prev,\n          description: prev.descriptionHistory[newIndex],\n          descriptionIndex: newIndex\n        }\n      }\n      return prev\n    })\n  }, [])\n\n  const setDefaultDescription = useCallback(() => {\n    setState({\n      description: defaultDescription,\n      descriptionHistory: [defaultDescription],\n      descriptionIndex: 0\n    })\n  }, [defaultDescription])\n\n  useEffect(() => {\n    setState({\n      description: defaultDescription,\n      descriptionHistory: [defaultDescription],\n      descriptionIndex: 0\n    })\n  }, [defaultDescription])\n\n  return {\n    description: state.description,\n    changeDescription,\n    historyDescription,\n    setDefaultDescription,\n    descriptionIndex: state.descriptionIndex\n  }\n}\n","import { css, styled } from 'styled-components'\n\nimport { addGridTransition } from '@local/styles/add'\nimport { JeneseiPalette } from '@local/theme'\n\nimport { ProviderAppOutletChildrenProps, ProviderAppOutletProps, ProviderAppWrapperProps } from '.'\nimport { ScreenWidthProps } from '../context-screen-width'\n\nexport const ProviderAppWrapper = styled.div<ProviderAppWrapperProps>`\n  display: flex;\n  flex-direction: column;\n  max-width: 100dvw;\n  min-height: 100dvh;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n\n  background-color: ${props => JeneseiPalette[props.$bgColor]};\n  background-image: url(${props => props.$bgImage});\n`\n\nconst generateGridTemplateAreas = (props: ProviderAppOutletProps) => {\n  let templateAreas = `\n    \"notification notification notification\"\n    \"header header header\"\n    \"nav nav nav\"\n    \"leftAside children rightAside\"\n    \"footer footer footer\"\n  `\n\n  templateAreas = `\n      \"notification notification notification\"\n      \"${props.$leftAside?.isTopHeader ? 'leftAside' : 'header'} header ${props.$rightAside?.isTopHeader ? 'rightAside' : 'header'}\"\n      \"${props.$leftAside?.isTopHeader ? 'leftAside' : props.$leftAside?.isTopNav ? 'leftAside' : 'nav'} nav ${props.$rightAside?.isTopHeader ? 'rightAside' : props.$rightAside?.isTopNav ? 'rightAside' : 'nav'}\"\n      \"leftAside children rightAside\"\n      \"${props.$leftAside?.isTopFooter ? 'leftAside' : 'footer'} footer ${props.$rightAside?.isTopFooter ? 'rightAside' : 'footer'}\"\n    `\n\n  return templateAreas\n}\n\nfunction toStyledAppOutletCSS(props: {\n  leftAsideWidth: string\n  rightAsideWidth: string\n  notificationHeight: string\n  headerHeight: string\n  navHeight: string\n  footerHeight: string\n}) {\n  return css`\n    grid-template-columns: ${() => `${props.leftAsideWidth} 1fr ${props.rightAsideWidth}`};\n    grid-template-rows: ${() =>\n      `${props.notificationHeight} ${props.headerHeight} ${props.navHeight} 1fr ${props.footerHeight}`};\n  `\n}\nconst addSXAppOutlet = css<ProviderAppOutletProps>`\n  ${props => {\n    const leftAsideWidth = props.$leftAside?.length?.default\n    const rightAsideWidth = props.$rightAside?.length?.default\n    const notificationHeight = props.$notification?.length?.default\n    const headerHeight = props.$header?.length?.default\n    const navHeight = props.$nav?.length?.default\n    const footerHeight = props.$footer?.length?.default\n    return toStyledAppOutletCSS({\n      leftAsideWidth: leftAsideWidth ?? '0px',\n      rightAsideWidth: rightAsideWidth ?? '0px',\n      notificationHeight: notificationHeight ?? '0px',\n      headerHeight: headerHeight ?? '0px',\n      navHeight: navHeight ?? '0px',\n      footerHeight: footerHeight ?? '0px'\n    })\n  }}\n  ${props => {\n    const leftAsideWidth = props.$leftAside?.length\n    const rightAsideWidth = props.$rightAside?.length\n    const notificationHeight = props.$notification?.length\n    const headerHeight = props.$header?.length\n    const navHeight = props.$nav?.length\n    const footerHeight = props.$footer?.length\n\n    return Object.entries(props.theme.screens)\n      .filter(([key]) => key !== 'default')\n      .map(([key]) => {\n        const deviceKey = key as keyof ScreenWidthProps<string | null>\n        const screenWidth = props.theme.screens[deviceKey]?.width\n        if (!screenWidth) return null\n        return css`\n          @media (max-width: ${screenWidth}px) {\n            ${toStyledAppOutletCSS({\n              leftAsideWidth: leftAsideWidth && leftAsideWidth[deviceKey] ? leftAsideWidth[deviceKey] : '0px',\n              rightAsideWidth: rightAsideWidth && rightAsideWidth[deviceKey] ? rightAsideWidth[deviceKey] : '0px',\n              notificationHeight:\n                notificationHeight && notificationHeight[deviceKey] ? notificationHeight[deviceKey] : '0px',\n              headerHeight: headerHeight && headerHeight[deviceKey] ? headerHeight[deviceKey] : '0px',\n              navHeight: navHeight && navHeight[deviceKey] ? navHeight[deviceKey] : '0px',\n              footerHeight: footerHeight && footerHeight[deviceKey] ? footerHeight[deviceKey] : '0px'\n            })}\n          }\n        `\n      })\n  }}\n`\nexport const ProviderAppOutlet = styled.div<ProviderAppOutletProps>`\n  display: grid;\n  width: 100%;\n  height: 100%;\n\n  min-height: 100dvh;\n\n  ${addGridTransition};\n\n  ${props => `\n    grid-template-areas: ${generateGridTemplateAreas(props)};\n  `}\n\n  ${props =>\n    props.$isScrollOutlet\n      ? css`\n          max-height: 100dvh;\n        `\n      : css`\n          max-height: none;\n        `};\n\n  ${addSXAppOutlet};\n`\n\nexport const ProviderAppOutletChildren = styled.main<ProviderAppOutletChildrenProps>`\n  z-index: ${props => props?.$main?.zIndex ?? 'auto'};\n  display: flex;\n  grid-area: children;\n  max-width: 100%;\n  max-height: 100%;\n  overflow: auto;\n`\n\nexport const ProviderAppOutletNotification = styled.section<ProviderAppOutletProps>`\n  z-index: ${props => props?.$notification?.zIndex ?? 'auto'};\n  grid-area: notification;\n  display: flex;\n`\n\nexport const ProviderAppOutletHeader = styled.header<ProviderAppOutletProps>`\n  z-index: ${props => props?.$header?.zIndex ?? 'auto'};\n  grid-area: header;\n  display: flex;\n`\n\nexport const ProviderAppOutletFooter = styled.footer<ProviderAppOutletProps>`\n  z-index: ${props => props?.$footer?.zIndex ?? 'auto'};\n  grid-area: footer;\n  display: flex;\n`\n\nexport const ProviderAppOutletNav = styled.nav<ProviderAppOutletProps>`\n  z-index: ${props => props?.$nav?.zIndex ?? 'auto'};\n  grid-area: nav;\n  display: flex;\n`\n\nexport const ProviderAppOutletLeftAside = styled.aside<ProviderAppOutletProps>`\n  z-index: ${props => props?.$leftAside?.zIndex ?? 'auto'};\n  grid-area: leftAside;\n  display: flex;\n`\n\nexport const ProviderAppOutletRightAside = styled.aside<ProviderAppOutletProps>`\n  z-index: ${props => props?.$rightAside?.zIndex ?? 'auto'};\n  grid-area: rightAside;\n  display: flex;\n`\n","import { useContext } from 'react'\n\nimport { AppContext } from '.'\n\n/**\n * Custom hook to access the AppContext.\n */\nexport const useApp = () => {\n  const context = useContext(AppContext)\n  if (!context) {\n    throw new Error('useApp must be used within an ProviderApp')\n  }\n  return context\n}\n"],"names":["AppContext","createContext","usePreview","defaultPreview","previewProps","setPreviewProps","useState","visible","defaultVisible","changePreview","useCallback","newPreviewProps","useEffect","useBgColor","defaultColor","state","setState","bgColor","bgColorHistory","bgColorIndex","changeBgColor","color","prev","newHistory","slice","length","historyBgColor","steps","newIndex","setDefaultBgColor","useStatusBarColor","statusBarColor","statusBarColorHistory","statusBarColorIndex","changeStatusBarColor","historyStatusBarColor","setDefaultStatusBarColor","useBgImage","defaultImage","bgImage","bgImageHistory","bgImageIndex","changeBgImage","image","historyBgImage","setDefaultBgImage","useTitle","defaultTitle","title","titleHistory","titleIndex","changeTitle","newTitle","setHistoryTitle","setDefaultTitle","useDescription","defaultDescription","description","descriptionHistory","descriptionIndex","changeDescription","newDescription","historyDescription","setDefaultDescription","ProviderAppWrapper","styled","div","props","JeneseiPalette","$bgColor","$bgImage","toStyledAppOutletCSS","css","leftAsideWidth","rightAsideWidth","notificationHeight","headerHeight","navHeight","footerHeight","addSXAppOutlet","_b","_a","$leftAside","default","_d","_c","$rightAside","_f","_e","$notification","_h","_g","$header","_j","_i","$nav","_l","_k","$footer","Object","entries","theme","screens","filter","key","map","deviceKey","screenWidth","width","ProviderAppOutlet","addGridTransition","templateAreas","isTopHeader","isTopNav","isTopFooter","generateGridTemplateAreas","$isScrollOutlet","ProviderAppOutletChildren","main","$main","zIndex","ProviderAppOutletNotification","section","ProviderAppOutletHeader","header","ProviderAppOutletFooter","footer","ProviderAppOutletNav","nav","ProviderAppOutletLeftAside","aside","ProviderAppOutletRightAside","defaultBgColor","defaultStatusBarColor","defaultBgImage","screenActual","useScreenWidth","jsxs","Provider","value","children","jsx","name","content","Preview","isScrollOutlet","notification","leftAside","rightAside","component","_m","_o","_n","_q","_s","_r","_u","_w","_v","context","useContext","Error"],"mappings":"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"}

package/build/context.hooks-D13tbrva.cjs

@@ -0,0 +1,2 @@
+"use strict";const i=require("react"),o=require("./jsx-runtime-BcGej2Kr.cjs"),e=i.createContext(null),t=()=>{const[o,e]=i.useState(!1);return i.useEffect(()=>{(async()=>{try{if(window.PublicKeyCredential&&"function"==typeof window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable){const i=await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();e(i)}else e(!1)}catch(i){console.error("Error checking biometric availability:",i),e(!1)}})()},[]),{isBiometricSupported:o}},n=()=>{const[o,e]=i.useState(null);i.useEffect(()=>{"permissions"in window.navigator&&window.navigator.permissions.query({name:"geolocation"}).then(i=>{e(i.state),i.onchange=()=>{e(i.state)}})},[]);return{geolocationPermission:o,requestGeolocationPermission:i.useCallback(()=>{"geolocation"in window.navigator?window.navigator.geolocation.getCurrentPosition(()=>e("granted"),()=>e("denied")):console.warn("Provider Permission. Geolocation is not supported in this browser.")},[])}},s=()=>{const[o,e]=i.useState(null),[t,n]=i.useState(!1),s=i.useCallback(async()=>{if(n(!0),"Notification"in window)try{n(!0);const i=await window.Notification.requestPermission();return e(i),n(!1),i}catch(i){console.error("Provider Permission. Failed to request notification permission:",i)}else console.warn("Provider Permission. Notifications are not supported in this browser.");n(!1)},[]);return i.useEffect(()=>{"Notification"in window&&e(window.Notification.permission)},[]),{notificationPermission:o,requestNotificationPermission:s,isNotificationPermissionLoading:t}},r=()=>{const[o,e]=i.useState(!1);return i.useEffect(()=>{"PushManager"in window&&e(!0)},[]),{pushNotificationSupported:o}};exports.PermissionContext=e,exports.ProviderPermission=i=>{const{pushNotificationSupported:a}=r(),{isBiometricSupported:c}=t(),{notificationPermission:u,requestNotificationPermission:l,isNotificationPermissionLoading:d}=s(),{geolocationPermission:m,requestGeolocationPermission:P}=n();return o.jsxRuntimeExports.jsx(e.Provider,{value:{isBiometricSupported:c,geolocationPermission:m,pushNotificationSupported:a,requestGeolocationPermission:P,notificationPermission:u,requestNotificationPermission:l,isNotificationPermissionLoading:d},children:i.children})},exports.usePermission=()=>{const o=i.useContext(e);if(!o)throw new Error("usePermission must be used within an PermissionProvider");return o};
+//# sourceMappingURL=context.hooks-D13tbrva.cjs.map

package/build/context.hooks-D13tbrva.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.hooks-D13tbrva.cjs","sources":["../src/contexts/context-permission/context.tsx","../src/contexts/context-permission/context.hooks.ts"],"sourcesContent":["import { createContext, useCallback, useEffect, useState } from 'react'\n\nimport { PermissionContextProps, ProviderPermissionProps } from '.'\n\nexport const PermissionContext = createContext<PermissionContextProps | null>(null)\n\nexport const ProviderPermission = (props: ProviderPermissionProps) => {\n  const { pushNotificationSupported } = usePushNotificationSupported()\n  const { isBiometricSupported } = useBiometricSupported()\n  const { notificationPermission, requestNotificationPermission, isNotificationPermissionLoading } =\n    useNotificationPermission()\n  const { geolocationPermission, requestGeolocationPermission } = useGeolocationPermission()\n\n  return (\n    <PermissionContext.Provider\n      value={{\n        isBiometricSupported,\n        geolocationPermission,\n        pushNotificationSupported,\n        requestGeolocationPermission,\n        notificationPermission,\n        requestNotificationPermission,\n        isNotificationPermissionLoading\n      }}\n    >\n      {props.children}\n    </PermissionContext.Provider>\n  )\n}\n\nconst useBiometricSupported = () => {\n  const [isBiometricSupported, setIsBiometricSupported] = useState(false)\n\n  useEffect(() => {\n    const checkBiometricAvailability = async () => {\n      try {\n        if (\n          window.PublicKeyCredential &&\n          typeof window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable === 'function'\n        ) {\n          const available = await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()\n          setIsBiometricSupported(available)\n        } else {\n          setIsBiometricSupported(false)\n        }\n      } catch (error) {\n        console.error('Error checking biometric availability:', error)\n        setIsBiometricSupported(false)\n      }\n    }\n\n    checkBiometricAvailability()\n  }, [])\n\n  return { isBiometricSupported }\n}\n\nconst useGeolocationPermission = () => {\n  // eslint-disable-next-line no-undef\n  const [geolocationPermission, setGeolocationPermission] = useState<PermissionState | null>(null)\n\n  useEffect(() => {\n    if ('permissions' in window.navigator) {\n      window.navigator.permissions.query({ name: 'geolocation' }).then(permissionStatus => {\n        setGeolocationPermission(permissionStatus.state)\n        permissionStatus.onchange = () => {\n          setGeolocationPermission(permissionStatus.state)\n        }\n      })\n    }\n  }, [])\n\n  const requestGeolocationPermission = useCallback(() => {\n    if ('geolocation' in window.navigator) {\n      window.navigator.geolocation.getCurrentPosition(\n        () => setGeolocationPermission('granted'),\n        () => setGeolocationPermission('denied')\n      )\n    } else {\n      console.warn('Provider Permission. Geolocation is not supported in this browser.')\n    }\n  }, [])\n\n  return { geolocationPermission, requestGeolocationPermission }\n}\n\nconst useNotificationPermission = () => {\n  // eslint-disable-next-line no-undef\n  const [notificationPermission, setNotificationPermission] = useState<NotificationPermission | null>(null)\n  const [isNotificationPermissionLoading, setIsNotificationPermissionLoading] = useState<boolean>(false)\n\n  const requestNotificationPermission = useCallback(async () => {\n    setIsNotificationPermissionLoading(true)\n    if ('Notification' in window) {\n      try {\n        setIsNotificationPermissionLoading(true)\n        const permission = await window.Notification.requestPermission()\n        setNotificationPermission(permission)\n        setIsNotificationPermissionLoading(false)\n        return permission\n      } catch (error) {\n        console.error('Provider Permission. Failed to request notification permission:', error)\n      }\n    } else {\n      console.warn('Provider Permission. Notifications are not supported in this browser.')\n    }\n    setIsNotificationPermissionLoading(false)\n  }, [])\n\n  useEffect(() => {\n    if ('Notification' in window) {\n      setNotificationPermission(window.Notification.permission)\n    }\n  }, [])\n\n  return { notificationPermission, requestNotificationPermission, isNotificationPermissionLoading }\n}\n\nconst usePushNotificationSupported = () => {\n  const [pushNotificationSupported, setPushNotificationSupported] = useState<boolean>(false)\n\n  useEffect(() => {\n    if ('PushManager' in window) {\n      setPushNotificationSupported(true)\n    }\n  }, [])\n\n  return { pushNotificationSupported }\n}\n","import { useContext } from 'react'\n\nimport { PermissionContext, PermissionContextProps } from '.'\n\n/**\n * Custom hook to access the PermissionContext.\n */\nexport const usePermission = (): PermissionContextProps => {\n  const context = useContext(PermissionContext)\n  if (!context) {\n    throw new Error('usePermission must be used within an PermissionProvider')\n  }\n  return context\n}\n"],"names":["PermissionContext","createContext","useBiometricSupported","isBiometricSupported","setIsBiometricSupported","useState","useEffect","async","window","PublicKeyCredential","isUserVerifyingPlatformAuthenticatorAvailable","available","error","console","checkBiometricAvailability","useGeolocationPermission","geolocationPermission","setGeolocationPermission","navigator","permissions","query","name","then","permissionStatus","state","onchange","requestGeolocationPermission","useCallback","geolocation","getCurrentPosition","warn","useNotificationPermission","notificationPermission","setNotificationPermission","isNotificationPermissionLoading","setIsNotificationPermissionLoading","requestNotificationPermission","permission","Notification","requestPermission","usePushNotificationSupported","pushNotificationSupported","setPushNotificationSupported","props","jsx","Provider","value","children","context","useContext","Error"],"mappings":"8EAIaA,EAAoBC,EAAAA,cAA6C,MA0BxEC,EAAwB,KAC5B,MAAOC,EAAsBC,GAA2BC,EAAAA,UAAS,GAuBjE,OArBAC,EAAAA,UAAU,KAC2BC,WACjC,IACE,GACEC,OAAOC,qBAC6E,mBAA7ED,OAAOC,oBAAoBC,8CAClC,CACA,MAAMC,QAAkBH,OAAOC,oBAAoBC,gDACnDN,EAAwBO,EAAS,MAEjCP,GAAwB,EAC1B,OACOQ,GACPC,QAAQD,MAAM,yCAA0CA,GACxDR,GAAwB,EAAK,GAIjCU,IACC,IAEI,CAAEX,yBAGLY,EAA2B,KAE/B,MAAOC,EAAuBC,GAA4BZ,EAAAA,SAAiC,MAE3FC,EAAAA,UAAU,KACJ,gBAAiBE,OAAOU,WAC1BV,OAAOU,UAAUC,YAAYC,MAAM,CAAEC,KAAM,gBAAiBC,KAAKC,IAC/DN,EAAyBM,EAAiBC,OAC1CD,EAAiBE,SAAW,KAC1BR,EAAyBM,EAAiBC,WAI/C,IAaH,MAAO,CAAER,wBAAuBU,6BAXKC,EAAAA,YAAY,KAC3C,gBAAiBnB,OAAOU,UAC1BV,OAAOU,UAAUU,YAAYC,mBAC3B,IAAMZ,EAAyB,WAC/B,IAAMA,EAAyB,WAGjCJ,QAAQiB,KAAK,uEAEd,MAKCC,EAA4B,KAEhC,MAAOC,EAAwBC,GAA6B5B,EAAAA,SAAwC,OAC7F6B,EAAiCC,GAAsC9B,EAAAA,UAAkB,GAE1F+B,EAAgCT,EAAAA,YAAYpB,UAEhD,GADA4B,GAAmC,GAC/B,iBAAkB3B,OACpB,IACE2B,GAAmC,GACnC,MAAME,QAAmB7B,OAAO8B,aAAaC,oBAG7C,OAFAN,EAA0BI,GAC1BF,GAAmC,GAC5BE,CAAA,OACAzB,GACPC,QAAQD,MAAM,kEAAmEA,EAAK,MAGxFC,QAAQiB,KAAK,yEAEfK,GAAmC,IAClC,IAQH,OANA7B,EAAAA,UAAU,KACJ,iBAAkBE,QACpByB,EAA0BzB,OAAO8B,aAAaD,aAE/C,IAEI,CAAEL,yBAAwBI,gCAA+BF,oCAG5DM,EAA+B,KACnC,MAAOC,EAA2BC,GAAgCrC,EAAAA,UAAkB,GAQpF,OANAC,EAAAA,UAAU,KACJ,gBAAiBE,QACnBkC,GAA6B,IAE9B,IAEI,CAAED,qFAzHwBE,IACjC,MAAMF,0BAAEA,GAA8BD,KAChCrC,qBAAEA,GAAyBD,KAC3B8B,uBAAEA,EAAAI,8BAAwBA,EAAAF,gCAA+BA,GAC7DH,KACIf,sBAAEA,EAAAU,6BAAuBA,GAAiCX,IAEhE,SACE6B,kBAAAA,IAAC5C,EAAkB6C,SAAlB,CACCC,MAAO,CACL3C,uBACAa,wBACAyB,4BACAf,+BACAM,yBACAI,gCACAF,mCAGDa,SAAAJ,EAAMI,kCClBgB,KAC3B,MAAMC,EAAUC,EAAAA,WAAWjD,GAC3B,IAAKgD,EACH,MAAM,IAAIE,MAAM,2DAElB,OAAOF"}

package/build/context.hooks-gyzZSaVi.js

@@ -0,0 +1,527 @@
+import { createContext, useState, useCallback, useEffect, useContext } from "react";
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { P as Preview } from "./area-BnAddPtl.js";
+import { J as JeneseiPalette } from "./theme.global-bN9HlSWE.js";
+import { styled, css } from "styled-components";
+import { d as addGridTransition } from "./style-CEGJOjRW.js";
+import { u as useScreenWidth } from "./context.hooks-BmwyZ1p3.js";
+const AppContext = createContext(null);
+const ProviderApp = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+  const { bgColor, changeBgColor, historyBgColor, setDefaultBgColor } = useBgColor(props.defaultBgColor);
+  const { statusBarColor, changeStatusBarColor, historyStatusBarColor, setDefaultStatusBarColor } = useStatusBarColor(
+    props.defaultStatusBarColor
+  );
+  const { bgImage, changeBgImage, historyBgImage, setDefaultBgImage } = useBgImage(props.defaultBgImage || null);
+  const { title, changeTitle, setHistoryTitle, setDefaultTitle } = useTitle(props.defaultTitle || null);
+  const { description, changeDescription, historyDescription, setDefaultDescription } = useDescription(
+    props.defaultDescription
+  );
+  const { changePreview, previewProps } = usePreview(props.defaultPreview);
+  const { screenActual } = useScreenWidth();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    AppContext.Provider,
+    {
+      value: {
+        changePreview,
+        changeStatusBarColor,
+        changeBgColor,
+        changeBgImage,
+        changeTitle,
+        changeDescription,
+        historyStatusBarColor,
+        historyBgColor,
+        historyBgImage,
+        setHistoryTitle,
+        historyDescription,
+        setDefaultStatusBarColor,
+        setDefaultBgColor,
+        setDefaultBgImage,
+        setDefaultTitle,
+        setDefaultDescription
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { name: "description", content: description }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { name: "theme-color", content: JeneseiPalette[statusBarColor] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { name: "apple-mobile-web-app-status-bar-style", content: "default" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("meta", { name: "mobile-web-app-capable", content: "yes" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Preview, { ...previewProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppWrapper, { $bgColor: bgColor, $bgImage: bgImage, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          ProviderAppOutlet,
+          {
+            $isScrollOutlet: props.isScrollOutlet,
+            $footer: props.footer,
+            $notification: props.notification,
+            $header: props.header,
+            $nav: props.nav,
+            $leftAside: props.leftAside,
+            $rightAside: props.rightAside,
+            children: [
+              ((_a = props.notification) == null ? void 0 : _a.length) && ((_c = (_b = props.notification) == null ? void 0 : _b.length) == null ? void 0 : _c[screenActual]) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletNotification, { $notification: props.notification, children: ((_d = props.notification) == null ? void 0 : _d.component) || null }) : null,
+              ((_e = props.header) == null ? void 0 : _e.length) && ((_g = (_f = props.header) == null ? void 0 : _f.length) == null ? void 0 : _g[screenActual]) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletHeader, { $header: props.header, children: ((_h = props.header) == null ? void 0 : _h.component) || null }) : null,
+              ((_i = props.nav) == null ? void 0 : _i.length) && ((_k = (_j = props.nav) == null ? void 0 : _j.length) == null ? void 0 : _k[screenActual]) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletNav, { $nav: props.nav, children: ((_l = props.nav) == null ? void 0 : _l.component) || null }) : null,
+              ((_m = props.leftAside) == null ? void 0 : _m.length) && ((_o = (_n = props.leftAside) == null ? void 0 : _n.length) == null ? void 0 : _o[screenActual]) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletLeftAside, { $leftAside: props.leftAside, children: ((_p = props.leftAside) == null ? void 0 : _p.component) || null }) : null,
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletChildren, { $main: props.main, children: props.children }),
+              ((_q = props.rightAside) == null ? void 0 : _q.length) && ((_s = (_r = props.rightAside) == null ? void 0 : _r.length) == null ? void 0 : _s[screenActual]) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletRightAside, { $rightAside: props.rightAside, children: ((_t = props.rightAside) == null ? void 0 : _t.component) || null }) : null,
+              ((_u = props.footer) == null ? void 0 : _u.length) && ((_w = (_v = props.footer) == null ? void 0 : _v.length) == null ? void 0 : _w[screenActual]) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderAppOutletFooter, { $footer: props.footer, children: ((_x = props.footer) == null ? void 0 : _x.component) || null }) : null
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+const usePreview = (defaultPreview) => {
+  const [previewProps, setPreviewProps] = useState(defaultPreview || { visible: true, defaultVisible: true });
+  const changePreview = useCallback((newPreviewProps) => {
+    setPreviewProps(newPreviewProps);
+  }, []);
+  useEffect(() => {
+    if (defaultPreview) setPreviewProps(defaultPreview);
+  }, [defaultPreview]);
+  return { previewProps, changePreview };
+};
+const useBgColor = (defaultColor) => {
+  const [state, setState] = useState({
+    bgColor: defaultColor,
+    bgColorHistory: [defaultColor],
+    bgColorIndex: 0
+  });
+  const changeBgColor = useCallback((color) => {
+    setState((prev) => {
+      const newHistory = [...prev.bgColorHistory.slice(0, prev.bgColorIndex + 1), color];
+      return {
+        bgColor: color,
+        bgColorHistory: newHistory,
+        bgColorIndex: newHistory.length - 1
+      };
+    });
+  }, []);
+  const historyBgColor = useCallback((steps) => {
+    setState((prev) => {
+      const newIndex = prev.bgColorIndex + steps;
+      if (newIndex >= 0 && newIndex < prev.bgColorHistory.length) {
+        return {
+          ...prev,
+          bgColor: prev.bgColorHistory[newIndex],
+          bgColorIndex: newIndex
+        };
+      }
+      return prev;
+    });
+  }, []);
+  const setDefaultBgColor = useCallback(() => {
+    setState({
+      bgColor: defaultColor,
+      bgColorHistory: [defaultColor],
+      bgColorIndex: 0
+    });
+  }, [defaultColor]);
+  useEffect(() => {
+    setState({
+      bgColor: defaultColor,
+      bgColorHistory: [defaultColor],
+      bgColorIndex: 0
+    });
+  }, [defaultColor]);
+  return {
+    bgColor: state.bgColor,
+    changeBgColor,
+    historyBgColor,
+    setDefaultBgColor,
+    bgColorIndex: state.bgColorIndex
+  };
+};
+const useStatusBarColor = (defaultColor) => {
+  const [state, setState] = useState({
+    statusBarColor: defaultColor,
+    statusBarColorHistory: [defaultColor],
+    statusBarColorIndex: 0
+  });
+  const changeStatusBarColor = useCallback((color) => {
+    setState((prev) => {
+      const newHistory = [...prev.statusBarColorHistory.slice(0, prev.statusBarColorIndex + 1), color];
+      return {
+        statusBarColor: color,
+        statusBarColorHistory: newHistory,
+        statusBarColorIndex: newHistory.length - 1
+      };
+    });
+  }, []);
+  const historyStatusBarColor = useCallback((steps) => {
+    setState((prev) => {
+      const newIndex = prev.statusBarColorIndex + steps;
+      if (newIndex >= 0 && newIndex < prev.statusBarColorHistory.length) {
+        return {
+          ...prev,
+          statusBarColor: prev.statusBarColorHistory[newIndex],
+          statusBarColorIndex: newIndex
+        };
+      }
+      return prev;
+    });
+  }, []);
+  const setDefaultStatusBarColor = useCallback(() => {
+    setState({
+      statusBarColor: defaultColor,
+      statusBarColorHistory: [defaultColor],
+      statusBarColorIndex: 0
+    });
+  }, [defaultColor]);
+  useEffect(() => {
+    setState({
+      statusBarColor: defaultColor,
+      statusBarColorHistory: [defaultColor],
+      statusBarColorIndex: 0
+    });
+  }, [defaultColor]);
+  return {
+    statusBarColor: state.statusBarColor,
+    changeStatusBarColor,
+    historyStatusBarColor,
+    setDefaultStatusBarColor,
+    statusBarColorIndex: state.statusBarColorIndex
+  };
+};
+const useBgImage = (defaultImage) => {
+  const [state, setState] = useState({
+    bgImage: defaultImage,
+    bgImageHistory: [defaultImage],
+    bgImageIndex: 0
+  });
+  const changeBgImage = useCallback((image) => {
+    setState((prev) => {
+      const newHistory = [...prev.bgImageHistory.slice(0, prev.bgImageIndex + 1), image];
+      return {
+        bgImage: image,
+        bgImageHistory: newHistory,
+        bgImageIndex: newHistory.length - 1
+      };
+    });
+  }, []);
+  const historyBgImage = useCallback((steps) => {
+    setState((prev) => {
+      const newIndex = prev.bgImageIndex + steps;
+      if (newIndex >= 0 && newIndex < prev.bgImageHistory.length) {
+        return {
+          ...prev,
+          bgImage: prev.bgImageHistory[newIndex],
+          bgImageIndex: newIndex
+        };
+      }
+      return prev;
+    });
+  }, []);
+  const setDefaultBgImage = useCallback(() => {
+    setState({
+      bgImage: defaultImage,
+      bgImageHistory: [defaultImage],
+      bgImageIndex: 0
+    });
+  }, [defaultImage]);
+  useEffect(() => {
+    setState({
+      bgImage: defaultImage,
+      bgImageHistory: [defaultImage],
+      bgImageIndex: 0
+    });
+  }, [defaultImage]);
+  return {
+    bgImage: state.bgImage,
+    changeBgImage,
+    historyBgImage,
+    setDefaultBgImage,
+    bgImageIndex: state.bgImageIndex
+  };
+};
+const useTitle = (defaultTitle) => {
+  const [state, setState] = useState({
+    title: defaultTitle,
+    titleHistory: [defaultTitle],
+    titleIndex: 0
+  });
+  const changeTitle = useCallback((newTitle) => {
+    setState((prev) => {
+      const newHistory = [...prev.titleHistory.slice(0, prev.titleIndex + 1), newTitle];
+      return {
+        title: newTitle,
+        titleHistory: newHistory,
+        titleIndex: newHistory.length - 1
+      };
+    });
+  }, []);
+  const setHistoryTitle = useCallback((steps) => {
+    setState((prev) => {
+      const newIndex = prev.titleIndex + steps;
+      if (newIndex >= 0 && newIndex < prev.titleHistory.length) {
+        return {
+          ...prev,
+          title: prev.titleHistory[newIndex],
+          titleIndex: newIndex
+        };
+      }
+      return prev;
+    });
+  }, []);
+  const setDefaultTitle = useCallback(() => {
+    setState({
+      title: defaultTitle,
+      titleHistory: [defaultTitle],
+      titleIndex: 0
+    });
+  }, [defaultTitle]);
+  useEffect(() => {
+    setState({
+      title: defaultTitle,
+      titleHistory: [defaultTitle],
+      titleIndex: 0
+    });
+  }, [defaultTitle]);
+  return {
+    title: state.title,
+    titleIndex: state.titleIndex,
+    titleHistory: state.titleHistory,
+    changeTitle,
+    setHistoryTitle,
+    setDefaultTitle
+  };
+};
+const useDescription = (defaultDescription) => {
+  const [state, setState] = useState({
+    description: defaultDescription,
+    descriptionHistory: [defaultDescription],
+    descriptionIndex: 0
+  });
+  const changeDescription = useCallback((newDescription) => {
+    setState((prev) => {
+      const newHistory = [...prev.descriptionHistory.slice(0, prev.descriptionIndex + 1), newDescription];
+      return {
+        description: newDescription,
+        descriptionHistory: newHistory,
+        descriptionIndex: newHistory.length - 1
+      };
+    });
+  }, []);
+  const historyDescription = useCallback((steps) => {
+    setState((prev) => {
+      const newIndex = prev.descriptionIndex + steps;
+      if (newIndex >= 0 && newIndex < prev.descriptionHistory.length) {
+        return {
+          ...prev,
+          description: prev.descriptionHistory[newIndex],
+          descriptionIndex: newIndex
+        };
+      }
+      return prev;
+    });
+  }, []);
+  const setDefaultDescription = useCallback(() => {
+    setState({
+      description: defaultDescription,
+      descriptionHistory: [defaultDescription],
+      descriptionIndex: 0
+    });
+  }, [defaultDescription]);
+  useEffect(() => {
+    setState({
+      description: defaultDescription,
+      descriptionHistory: [defaultDescription],
+      descriptionIndex: 0
+    });
+  }, [defaultDescription]);
+  return {
+    description: state.description,
+    changeDescription,
+    historyDescription,
+    setDefaultDescription,
+    descriptionIndex: state.descriptionIndex
+  };
+};
+const ProviderAppWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: 100dvw;
+  min-height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+
+  background-color: ${(props) => JeneseiPalette[props.$bgColor]};
+  background-image: url(${(props) => props.$bgImage});
+`;
+const generateGridTemplateAreas = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  let templateAreas = `
+    "notification notification notification"
+    "header header header"
+    "nav nav nav"
+    "leftAside children rightAside"
+    "footer footer footer"
+  `;
+  templateAreas = `
+      "notification notification notification"
+      "${((_a = props.$leftAside) == null ? void 0 : _a.isTopHeader) ? "leftAside" : "header"} header ${((_b = props.$rightAside) == null ? void 0 : _b.isTopHeader) ? "rightAside" : "header"}"
+      "${((_c = props.$leftAside) == null ? void 0 : _c.isTopHeader) ? "leftAside" : ((_d = props.$leftAside) == null ? void 0 : _d.isTopNav) ? "leftAside" : "nav"} nav ${((_e = props.$rightAside) == null ? void 0 : _e.isTopHeader) ? "rightAside" : ((_f = props.$rightAside) == null ? void 0 : _f.isTopNav) ? "rightAside" : "nav"}"
+      "leftAside children rightAside"
+      "${((_g = props.$leftAside) == null ? void 0 : _g.isTopFooter) ? "leftAside" : "footer"} footer ${((_h = props.$rightAside) == null ? void 0 : _h.isTopFooter) ? "rightAside" : "footer"}"
+    `;
+  return templateAreas;
+};
+function toStyledAppOutletCSS(props) {
+  return css`
+    grid-template-columns: ${() => `${props.leftAsideWidth} 1fr ${props.rightAsideWidth}`};
+    grid-template-rows: ${() => `${props.notificationHeight} ${props.headerHeight} ${props.navHeight} 1fr ${props.footerHeight}`};
+  `;
+}
+const addSXAppOutlet = css`
+  ${(props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const leftAsideWidth = (_b = (_a = props.$leftAside) == null ? void 0 : _a.length) == null ? void 0 : _b.default;
+  const rightAsideWidth = (_d = (_c = props.$rightAside) == null ? void 0 : _c.length) == null ? void 0 : _d.default;
+  const notificationHeight = (_f = (_e = props.$notification) == null ? void 0 : _e.length) == null ? void 0 : _f.default;
+  const headerHeight = (_h = (_g = props.$header) == null ? void 0 : _g.length) == null ? void 0 : _h.default;
+  const navHeight = (_j = (_i = props.$nav) == null ? void 0 : _i.length) == null ? void 0 : _j.default;
+  const footerHeight = (_l = (_k = props.$footer) == null ? void 0 : _k.length) == null ? void 0 : _l.default;
+  return toStyledAppOutletCSS({
+    leftAsideWidth: leftAsideWidth ?? "0px",
+    rightAsideWidth: rightAsideWidth ?? "0px",
+    notificationHeight: notificationHeight ?? "0px",
+    headerHeight: headerHeight ?? "0px",
+    navHeight: navHeight ?? "0px",
+    footerHeight: footerHeight ?? "0px"
+  });
+}}
+  ${(props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const leftAsideWidth = (_a = props.$leftAside) == null ? void 0 : _a.length;
+  const rightAsideWidth = (_b = props.$rightAside) == null ? void 0 : _b.length;
+  const notificationHeight = (_c = props.$notification) == null ? void 0 : _c.length;
+  const headerHeight = (_d = props.$header) == null ? void 0 : _d.length;
+  const navHeight = (_e = props.$nav) == null ? void 0 : _e.length;
+  const footerHeight = (_f = props.$footer) == null ? void 0 : _f.length;
+  return Object.entries(props.theme.screens).filter(([key]) => key !== "default").map(([key]) => {
+    var _a2;
+    const deviceKey = key;
+    const screenWidth = (_a2 = props.theme.screens[deviceKey]) == null ? void 0 : _a2.width;
+    if (!screenWidth) return null;
+    return css`
+          @media (max-width: ${screenWidth}px) {
+            ${toStyledAppOutletCSS({
+      leftAsideWidth: leftAsideWidth && leftAsideWidth[deviceKey] ? leftAsideWidth[deviceKey] : "0px",
+      rightAsideWidth: rightAsideWidth && rightAsideWidth[deviceKey] ? rightAsideWidth[deviceKey] : "0px",
+      notificationHeight: notificationHeight && notificationHeight[deviceKey] ? notificationHeight[deviceKey] : "0px",
+      headerHeight: headerHeight && headerHeight[deviceKey] ? headerHeight[deviceKey] : "0px",
+      navHeight: navHeight && navHeight[deviceKey] ? navHeight[deviceKey] : "0px",
+      footerHeight: footerHeight && footerHeight[deviceKey] ? footerHeight[deviceKey] : "0px"
+    })}
+          }
+        `;
+  });
+}}
+`;
+const ProviderAppOutlet = styled.div`
+  display: grid;
+  width: 100%;
+  height: 100%;
+
+  min-height: 100dvh;
+
+  ${addGridTransition};
+
+  ${(props) => `
+    grid-template-areas: ${generateGridTemplateAreas(props)};
+  `}
+
+  ${(props) => props.$isScrollOutlet ? css`
+          max-height: 100dvh;
+        ` : css`
+          max-height: none;
+        `};
+
+  ${addSXAppOutlet};
+`;
+const ProviderAppOutletChildren = styled.main`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$main) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  display: flex;
+  grid-area: children;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+`;
+const ProviderAppOutletNotification = styled.section`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$notification) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  grid-area: notification;
+  display: flex;
+`;
+const ProviderAppOutletHeader = styled.header`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$header) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  grid-area: header;
+  display: flex;
+`;
+const ProviderAppOutletFooter = styled.footer`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$footer) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  grid-area: footer;
+  display: flex;
+`;
+const ProviderAppOutletNav = styled.nav`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$nav) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  grid-area: nav;
+  display: flex;
+`;
+const ProviderAppOutletLeftAside = styled.aside`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$leftAside) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  grid-area: leftAside;
+  display: flex;
+`;
+const ProviderAppOutletRightAside = styled.aside`
+  z-index: ${(props) => {
+  var _a;
+  return ((_a = props == null ? void 0 : props.$rightAside) == null ? void 0 : _a.zIndex) ?? "auto";
+}};
+  grid-area: rightAside;
+  display: flex;
+`;
+const useApp = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useApp must be used within an ProviderApp");
+  }
+  return context;
+};
+export {
+  AppContext as A,
+  ProviderApp as P,
+  useStatusBarColor as a,
+  useBgImage as b,
+  useDescription as c,
+  ProviderAppWrapper as d,
+  ProviderAppOutlet as e,
+  ProviderAppOutletChildren as f,
+  ProviderAppOutletNotification as g,
+  ProviderAppOutletHeader as h,
+  ProviderAppOutletFooter as i,
+  ProviderAppOutletNav as j,
+  ProviderAppOutletLeftAside as k,
+  ProviderAppOutletRightAside as l,
+  useApp as m,
+  useBgColor as u
+};
+//# sourceMappingURL=context.hooks-gyzZSaVi.js.map