@koine/next 1.0.8 → 1.0.9

package/node/Theme/Theme.js

@@ -0,0 +1,241 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.useTheme = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file
+ *
+ * Adapted from [next-themes](https://github.com/pacocoursey/next-themes)
+ */
+const react_1 = require("react");
+const script_1 = tslib_1.__importDefault(require("next/script"));
+const utils_1 = require("@koine/utils");
+const THEME_STORAGE_KEY = "theme";
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const ThemeContext = (0, react_1.createContext)({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setTheme: (_) => { },
+    themes: [],
+});
+const useTheme = () => (0, react_1.useContext)(ThemeContext);
+exports.useTheme = useTheme;
+const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, themes = ["light", "dark"], defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, }) => {
+    const [theme, setThemeState] = (0, react_1.useState)(() => getTheme(THEME_STORAGE_KEY, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = (0, react_1.useState)(() => getTheme(THEME_STORAGE_KEY));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = (0, react_1.useCallback)((theme) => {
+        let resolved = theme;
+        if (utils_1.isServer || !resolved)
+            return;
+        // If theme is system, resolve it before setting theme
+        if (theme === "system" && enableSystem) {
+            resolved = getSystemTheme();
+        }
+        const name = value ? value[resolved] : resolved;
+        const enable = disableTransitionOnChange ? disableAnimation() : null;
+        const d = document.documentElement;
+        if (attribute === "class") {
+            d.classList.remove(...attrs);
+            if (name)
+                d.classList.add(name);
+        }
+        else {
+            if (name) {
+                d.setAttribute(attribute, name);
+            }
+            else {
+                d.removeAttribute(attribute);
+            }
+        }
+        if (enableColorScheme) {
+            const fallback = colorSchemes.includes(defaultTheme)
+                ? defaultTheme
+                : "";
+            const colorScheme = colorSchemes.includes(resolved)
+                ? resolved
+                : fallback;
+            d.style.colorScheme = colorScheme;
+        }
+        enable?.();
+    }, [
+        attribute,
+        attrs,
+        defaultTheme,
+        disableTransitionOnChange,
+        enableColorScheme,
+        enableSystem,
+        value,
+    ]);
+    const setTheme = (0, react_1.useCallback)((theme) => {
+        setThemeState(theme);
+        // Save to storage
+        try {
+            localStorage.setItem(THEME_STORAGE_KEY, theme);
+        }
+        catch (e) {
+            // Unsupported
+        }
+    }, []);
+    const handleMediaQuery = (0, react_1.useCallback)((e) => {
+        const resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, enableSystem, forcedTheme, applyTheme]);
+    // Always listen to System preference
+    (0, react_1.useEffect)(() => {
+        const media = window.matchMedia(MEDIA);
+        // Intentionally use deprecated listener methods to support iOS & old browsers
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return () => media.removeListener(handleMediaQuery);
+    }, [handleMediaQuery]);
+    // localStorage event handling
+    (0, react_1.useEffect)(() => {
+        const handleStorage = (e) => {
+            if (e.key !== THEME_STORAGE_KEY) {
+                return;
+            }
+            // If default theme set, use it if localstorage === null (happens on local storage manual deletion)
+            const theme = e.newValue || defaultTheme;
+            setTheme(theme);
+        };
+        window.addEventListener("storage", handleStorage);
+        return () => window.removeEventListener("storage", handleStorage);
+    }, [defaultTheme, setTheme]);
+    // Whenever theme or forcedTheme changes, apply it
+    (0, react_1.useEffect)(() => {
+        applyTheme(forcedTheme ?? theme);
+    }, [applyTheme, forcedTheme, theme]);
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext.Provider, { value: {
+            theme,
+            setTheme,
+            forcedTheme,
+            resolvedTheme: theme === "system" ? resolvedTheme : theme,
+            themes: enableSystem ? [...themes, "system"] : themes,
+            systemTheme: (enableSystem ? resolvedTheme : undefined),
+        }, children: [(0, jsx_runtime_1.jsx)(ThemeScript, { ...{
+                    forcedTheme,
+                    disableTransitionOnChange,
+                    enableSystem,
+                    enableColorScheme,
+                    themes,
+                    defaultTheme,
+                    attribute,
+                    value,
+                    children,
+                    attrs,
+                    nonce,
+                } }), children] }));
+};
+exports.ThemeProvider = ThemeProvider;
+const ThemeScript = (0, react_1.memo)(({ forcedTheme, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, }) => {
+    const defaultSystem = defaultTheme === "system";
+    // Code-golfing the amount of characters in the script
+    const optimization = (() => {
+        const removeClasses = `d.remove(${attrs
+            .map((t) => `'${t}'`)
+            .join(",")})`;
+        return `var d=document.documentElement.classList;${removeClasses};`;
+    })();
+    const fallbackColorScheme = (() => {
+        if (!enableColorScheme) {
+            return "";
+        }
+        const fallback = colorSchemes.includes(defaultTheme)
+            ? defaultTheme
+            : null;
+        if (fallback) {
+            return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+        }
+        else {
+            return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+        }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+        const resolvedName = value ? value[name] : name;
+        const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+        let text = "";
+        // MUCH faster to set colorScheme alongside HTML attribute/class
+        // as it only incurs 1 style recalculation rather than 2
+        // This can save over 250ms of work for pages with big DOM
+        if (enableColorScheme &&
+            setColorScheme &&
+            !literal &&
+            colorSchemes.includes(name)) {
+            text += `d.style.colorScheme = '${name}';`;
+        }
+        if (attribute === "class") {
+            if (literal || resolvedName) {
+                text += `d.add(${val})`;
+            }
+            else {
+                text += `null`;
+            }
+        }
+        else {
+            if (resolvedName) {
+                text += `d[s](n, ${val})`;
+            }
+        }
+        return text;
+    };
+    const scriptSrc = (() => {
+        if (forcedTheme) {
+            return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+        }
+        if (enableSystem) {
+            return `!function(){try {${optimization}var e=localStorage.getItem('${THEME_STORAGE_KEY}');if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM("dark")}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem
+                ? `else{` + updateDOM(defaultTheme, false, false) + "}"
+                : ""}${fallbackColorScheme}}catch(e){}}()`;
+        }
+        return `!function(){try{${optimization}var e=localStorage.getItem("${THEME_STORAGE_KEY}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(defaultTheme, false, false)};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    // We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
+    // However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
+    // But our script cannot be external because it changes at runtime based on React props
+    // so we trick next/script by passing `src` as a base64 JS script
+    const encodedScript = `data:text/javascript;base64,${encodeBase64(scriptSrc)}`;
+    return ((0, jsx_runtime_1.jsx)(script_1.default, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
+}, 
+// Never re-render this component
+() => true);
+// Helpers
+const getTheme = (key, fallback) => {
+    if (utils_1.isServer)
+        return undefined;
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
+    }
+    catch (e) {
+        // Unsupported
+    }
+    return theme || fallback;
+};
+const disableAnimation = () => {
+    const css = document.createElement("style");
+    css.appendChild(document.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+    document.head.appendChild(css);
+    return () => {
+        // Force restyle
+        (() => window.getComputedStyle(document.body))();
+        // Wait for next tick before removing
+        setTimeout(() => {
+            document.head.removeChild(css);
+        }, 1);
+    };
+};
+const getSystemTheme = (e) => {
+    if (!e)
+        e = window.matchMedia(MEDIA);
+    const isDark = e.matches;
+    const systemTheme = isDark ? "dark" : "light";
+    return systemTheme;
+};
+const encodeBase64 = (str) => {
+    return utils_1.isServer ? Buffer.from(str).toString("base64") : btoa(str);
+};

package/node/Theme/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Theme"), exports);

package/node/app/AppHead.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppHead = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const head_1 = tslib_1.__importDefault(require("next/head"));
+const AppHead = () => {
+    return ((0, jsx_runtime_1.jsx)(head_1.default, { children: (0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width" }) }));
+};
+exports.AppHead = AppHead;

package/node/app/AppMain.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/app/css/AppMain.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppMain = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Seo_1 = require("../../Seo");
+/**
+ * App main
+ *
+ * It does not imply any specific styling or animation solution
+ */
+const AppMain = ({ Component, pageProps, Layout, seo, pre, post, }) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Seo_1.SeoDefaults, { ...seo }), pre, (0, jsx_runtime_1.jsx)(Layout, { children: (0, jsx_runtime_1.jsx)(Component, { ...pageProps }) }), post] }));
+};
+exports.AppMain = AppMain;

package/node/app/css/AppTheme.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppTheme = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import { ThemeVanillaProvider, ThemeVanillaValue } from "@koine/react";
+const Theme_1 = require("../../Theme");
+/**
+ * App theme with vanilla class based theme (good for `tailwindcss`)
+ */
+const AppTheme = ({ theme, children }) => {
+    // return (
+    //   <ThemeVanillaProvider initialTheme={theme}>{children}</ThemeVanillaProvider>
+    // );
+    return ((0, jsx_runtime_1.jsx)(Theme_1.ThemeProvider, { defaultTheme: theme, attribute: "class", children: children }));
+};
+exports.AppTheme = AppTheme;

package/node/app/css/auth/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("next-auth/react");
+const AppHead_1 = require("../../AppHead");
+const AppTheme_1 = require("../AppTheme");
+const AppMain_1 = require("../AppMain");
+/**
+ * App with authentication provided by `next-auth`
+ */
+const NextApp = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.StrictMode, { children: [(0, jsx_runtime_1.jsx)(AppHead_1.AppHead, {}), (0, jsx_runtime_1.jsx)(react_2.SessionProvider, { session: props.pageProps.session, children: (0, jsx_runtime_1.jsx)(AppTheme_1.AppTheme, { ...props, children: (0, jsx_runtime_1.jsx)(AppMain_1.AppMain, { ...props }) }) })] }));
+};
+exports.NextApp = NextApp;
+exports.default = exports.NextApp;

package/node/app/css/index.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const AppHead_1 = require("../AppHead");
+const AppTheme_1 = require("./AppTheme");
+const AppMain_1 = require("./AppMain");
+/**
+ * App
+ *
+ * @example
+ *
+ * ```tsx
+ * import { NextApp, NextAppProps } from "@koine/next/app/css/auth";
+ * import { Favicon, AnalyticsGoogle } from "@koine/next";
+ * import { theme } from "src/helpers/theme";
+ * import { Layout } from "src/components/Layout";
+ * // import "@fontsource/myfont/800.css";
+ * // import "src/helpers/theme.css";
+ *
+ * const motion = () => import("@koine/react/m/max").then((m) => m.default);
+ *
+ * export default function App(props: NextAppProps) {
+ *   return (
+ *     <NextApp
+ *       {...props}
+ *       Layout={Layout}
+ *       theme={theme}
+ *       seo={{
+ *         titleTemplate: "%s | MyApp",
+ *         defaultTitle: "MyApp",
+ *         openGraph: {
+ *           type: "website",
+ *           locale: "en_US",
+ *           url: "https://myapp.com/",
+ *           site_name: "MyApp",
+ *         },
+ *         twitter: {
+ *           handle: "@MklrNl",
+ *           site: "@MyApp",
+ *           cardType: "summary_large_image",
+ *         },
+ *       }}
+ *       pre={
+ *         <>
+ *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
+ *           <Favicon name="MyApp" color="#000000" />
+ *         </>
+ *       }
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ */
+const NextApp = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.StrictMode, { children: [(0, jsx_runtime_1.jsx)(AppHead_1.AppHead, {}), (0, jsx_runtime_1.jsx)(AppTheme_1.AppTheme, { ...props, children: (0, jsx_runtime_1.jsx)(AppMain_1.AppMain, { ...props }) })] }));
+};
+exports.NextApp = NextApp;
+exports.default = exports.NextApp;

package/node/app/em/AppMain.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppMain = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+const framer_motion_1 = require("framer-motion");
+const m_1 = require("@koine/react/m");
+const Seo_1 = require("../../Seo");
+const NextProgress_1 = require("../../NextProgress");
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+const AppMain = ({ Component, pageProps, Layout, ProgressOverlay, seo, motion, transition = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+}, pre, post, }) => {
+    const { pathname } = (0, router_1.useRouter)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Seo_1.SeoDefaults, { ...seo }), pre, (0, jsx_runtime_1.jsxs)(m_1.MotionProvider, { features: motion, children: [ProgressOverlay && (0, jsx_runtime_1.jsx)(NextProgress_1.NextProgress, { Overlay: ProgressOverlay }), (0, jsx_runtime_1.jsx)(Layout, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: false, children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { ...transition, children: (0, react_1.createElement)(Component, { ...pageProps, key: pathname }) }, pathname) }) })] }), post] }));
+};
+exports.AppMain = AppMain;

package/node/app/em/AppTheme.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppTheme = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("@emotion/react");
+const CssBaseline_1 = tslib_1.__importDefault(require("@mui/material/CssBaseline"));
+const react_2 = require("@emotion/react");
+const sc_1 = require("@koine/react/sc");
+const emotion_cache_1 = require("../../utils/emotion-cache");
+// client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = (0, emotion_cache_1.createEmotionCache)();
+/**
+ * App theme with `emotion` (good for `@mui`)s
+ */
+const AppTheme = ({ emotionCache = clientSideEmotionCache, theme, children, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.CacheProvider, { value: emotionCache, children: (0, jsx_runtime_1.jsxs)(styles_1.ThemeProvider, { theme: theme, children: [(0, jsx_runtime_1.jsx)(CssBaseline_1.default, {}), (0, jsx_runtime_1.jsx)(react_2.Global, { styles: (0, react_2.css) `
+            ${sc_1.stylesGlobal}
+          ` }), children] }) }));
+};
+exports.AppTheme = AppTheme;

package/node/app/em/auth/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("next-auth/react");
+const AppHead_1 = require("../../AppHead");
+const AppTheme_1 = require("../AppTheme");
+const AppMain_1 = require("../AppMain");
+/**
+ * App with authentication provided by `next-auth`
+ */
+const NextApp = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.StrictMode, { children: [(0, jsx_runtime_1.jsx)(AppHead_1.AppHead, {}), (0, jsx_runtime_1.jsx)(react_2.SessionProvider, { session: props.pageProps.session, children: (0, jsx_runtime_1.jsx)(AppTheme_1.AppTheme, { ...props, children: (0, jsx_runtime_1.jsx)(AppMain_1.AppMain, { ...props }) }) })] }));
+};
+exports.NextApp = NextApp;
+exports.default = exports.NextApp;

package/node/app/em/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const AppHead_1 = require("../AppHead");
+const AppTheme_1 = require("./AppTheme");
+const AppMain_1 = require("./AppMain");
+/**
+ * App
+ */
+const NextApp = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.StrictMode, { children: [(0, jsx_runtime_1.jsx)(AppHead_1.AppHead, {}), (0, jsx_runtime_1.jsx)(AppTheme_1.AppTheme, { ...props, children: (0, jsx_runtime_1.jsx)(AppMain_1.AppMain, { ...props }) })] }));
+};
+exports.NextApp = NextApp;
+exports.default = exports.NextApp;

package/node/app/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AppHead"), exports);
+tslib_1.__exportStar(require("./AppMain"), exports);

package/node/app/sc/AppMain.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppMain = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+const framer_motion_1 = require("framer-motion");
+const m_1 = require("@koine/react/m");
+const Seo_1 = require("../../Seo");
+const NextProgress_1 = require("../../NextProgress");
+/**
+ * App main
+ *
+ * It implies a setup for `styled-components` and `framer-motion` libraries.
+ *
+ * About the page transition [wallis' blog post](https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion)
+ */
+const AppMain = ({ Component, pageProps, Layout, ProgressOverlay, seo, motion, transition = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+}, pre, post, }) => {
+    const { pathname } = (0, router_1.useRouter)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Seo_1.SeoDefaults, { ...seo }), pre, (0, jsx_runtime_1.jsxs)(m_1.MotionProvider, { features: motion, children: [ProgressOverlay && (0, jsx_runtime_1.jsx)(NextProgress_1.NextProgress, { Overlay: ProgressOverlay }), (0, jsx_runtime_1.jsx)(Layout, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, initial: false, children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { ...transition, children: (0, react_1.createElement)(Component, { ...pageProps, key: pathname }) }, pathname) }) })] }), post] }));
+};
+exports.AppMain = AppMain;

package/node/app/sc/AppTheme.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppTheme = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = require("styled-components");
+const sc_1 = require("@koine/react/sc");
+/**
+ * App theme with `styled-components`
+ */
+const AppTheme = ({ theme, children }) => {
+    return ((0, jsx_runtime_1.jsxs)(styled_components_1.ThemeProvider, { theme: theme, children: [(0, jsx_runtime_1.jsx)(sc_1.StylesGlobal, {}), children] }));
+};
+exports.AppTheme = AppTheme;

package/node/app/sc/auth/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("next-auth/react");
+const AppHead_1 = require("../../AppHead");
+const AppTheme_1 = require("../AppTheme");
+const AppMain_1 = require("../AppMain");
+/**
+ * App with authentication provided by `next-auth`
+ */
+const NextApp = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.StrictMode, { children: [(0, jsx_runtime_1.jsx)(AppHead_1.AppHead, {}), (0, jsx_runtime_1.jsx)(react_2.SessionProvider, { session: props.pageProps.session, children: (0, jsx_runtime_1.jsx)(AppTheme_1.AppTheme, { ...props, children: (0, jsx_runtime_1.jsx)(AppMain_1.AppMain, { ...props }) }) })] }));
+};
+exports.NextApp = NextApp;
+exports.default = exports.NextApp;

package/node/app/sc/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextApp = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const AppHead_1 = require("../AppHead");
+const AppTheme_1 = require("./AppTheme");
+const AppMain_1 = require("./AppMain");
+/**
+ * App
+ *
+ * @example
+ *
+ * ```tsx
+ * import { NextApp, NextAppProps } from "@koine/next/app/sc/auth";
+ * import { Favicon, AnalyticsGoogle } from "@koine/next";
+ * import { theme } from "src/helpers/theme";
+ * import { Layout, ProgressOverlay } from "src/components/Layout";
+ * // import "@fontsource/myfont/800.css";
+ * // import "src/helpers/theme.css";
+ *
+ * const motion = () => import("@koine/react/m/max").then((m) => m.default);
+ *
+ * export default function App(props: NextAppProps) {
+ *   return (
+ *     <NextApp
+ *       {...props}
+ *       Layout={Layout}
+ *       ProgressOverlay={ProgressOverlay}
+ *       theme={theme}
+ *       motion={motion}
+ *       seo={{
+ *         titleTemplate: "%s | MyApp",
+ *         defaultTitle: "MyApp",
+ *         openGraph: {
+ *           type: "website",
+ *           locale: "en_US",
+ *           url: "https://myapp.com/",
+ *           site_name: "MyApp",
+ *         },
+ *         twitter: {
+ *           handle: "@MklrNl",
+ *           site: "@MyApp",
+ *           cardType: "summary_large_image",
+ *         },
+ *       }}
+ *       pre={
+ *         <>
+ *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
+ *           <Favicon name="MyApp" color="#000000" />
+ *         </>
+ *       }
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ */
+const NextApp = (props) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.StrictMode, { children: [(0, jsx_runtime_1.jsx)(AppHead_1.AppHead, {}), (0, jsx_runtime_1.jsx)(AppTheme_1.AppTheme, { ...props, children: (0, jsx_runtime_1.jsx)(AppMain_1.AppMain, { ...props }) })] }));
+};
+exports.NextApp = NextApp;
+exports.default = exports.NextApp;