@koine/next 2.0.0-beta.1 → 2.0.0-beta.11

package/12/ThemeProvider.mjs

@@ -1,13 +1,15 @@
 "use client";
-import { __spreadArray } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState, memo } from "react";
 import NextScript from "next/script";
+import { memo, useCallback, useEffect, useState } from "react";
 import isServer from "@koine/utils/isServer";
 import { ThemeContext } from "./ThemeContext";
-var colorSchemes = ["light", "dark"];
-var MEDIA = "(prefers-color-scheme: dark)";
-var THEME_STORAGE_KEY = "theme";
+const colorSchemes = [
+    "light",
+    "dark"
+];
+const MEDIA = "(prefers-color-scheme: dark)";
+const THEME_STORAGE_KEY = "theme";
 /**
  * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
  *
@@ -16,51 +18,39 @@ var THEME_STORAGE_KEY = "theme";
  * - enableColorScheme: `false` by default (instead of `true`), this plays more
  * nicely with tailwind `dark` class mode as dark theme is supposed to be only
  * controlled by tailwind modifiers
- */
-export var ThemeProvider = function (_a) {
-    var forcedTheme = _a.forcedTheme, _b = _a.disableTransitionOnChange, disableTransitionOnChange = _b === void 0 ? false : _b, _c = _a.enableSystem, enableSystem = _c === void 0 ? true : _c, enableColorScheme = _a.enableColorScheme, _d = _a.themes, themes = _d === void 0 ? ["light", "dark"] : _d, _e = _a.defaultTheme, defaultTheme = _e === void 0 ? enableSystem ? "system" : "light" : _e, _f = _a.attribute, attribute = _f === void 0 ? "data-theme" : _f, value = _a.value, children = _a.children, nonce = _a.nonce;
-    var _g = useState(function () {
-        return getTheme(THEME_STORAGE_KEY, defaultTheme);
-    }), theme = _g[0], setThemeState = _g[1];
-    var _h = useState(function () {
-        return getTheme(THEME_STORAGE_KEY);
-    }), resolvedTheme = _h[0], setResolvedTheme = _h[1];
-    var attrs = !value ? themes : Object.values(value);
-    var applyTheme = useCallback(function (theme) {
-        var _a;
-        var resolved = theme;
-        if (isServer || !resolved)
-            return;
+ */ export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme, themes = [
+    "light",
+    "dark"
+], defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce })=>{
+    const [theme, setThemeState] = useState(()=>getTheme(THEME_STORAGE_KEY, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = useState(()=>getTheme(THEME_STORAGE_KEY));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = useCallback((theme)=>{
+        let resolved = theme;
+        if (isServer || !resolved) return;
         // If theme is system, resolve it before setting theme
         if (theme === "system" && enableSystem) {
             resolved = getSystemTheme();
         }
-        var name = value ? value[resolved] : resolved;
-        var enable = disableTransitionOnChange ? disableAnimation() : null;
-        var d = document.documentElement;
+        const name = value ? value[resolved] : resolved;
+        const enable = disableTransitionOnChange ? disableAnimation() : null;
+        const d = document.documentElement;
         if (attribute === "class") {
-            (_a = d.classList).remove.apply(_a, attrs);
-            if (name)
-                d.classList.add(name);
-        }
-        else {
+            d.classList.remove(...attrs);
+            if (name) d.classList.add(name);
+        } else {
             if (name) {
                 d.setAttribute(attribute, name);
-            }
-            else {
+            } else {
                 d.removeAttribute(attribute);
             }
         }
         if (enableColorScheme) {
-            var fallback = colorSchemes.includes(defaultTheme)
-                ? defaultTheme
-                : "";
-            var colorScheme = colorSchemes.includes(resolved)
-                ? resolved
-                : fallback;
+            const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : "";
+            const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
             d.style.colorScheme = colorScheme;
         }
-        enable === null || enable === void 0 ? void 0 : enable();
+        enable?.();
     }, [
         attribute,
         attrs,
@@ -68,168 +58,188 @@ export var ThemeProvider = function (_a) {
         disableTransitionOnChange,
         enableColorScheme,
         enableSystem,
-        value,
+        value
     ]);
-    var setTheme = useCallback(function (theme) {
+    const setTheme = useCallback((theme)=>{
         setThemeState(theme);
         // Save to storage
         try {
             localStorage.setItem(THEME_STORAGE_KEY, theme);
-        }
-        catch (e) {
-            // Unsupported
+        } catch (e) {
+        // Unsupported
         }
     }, []);
-    var handleMediaQuery = useCallback(function (e) {
-        var resolved = getSystemTheme(e);
+    const handleMediaQuery = useCallback((e)=>{
+        const resolved = getSystemTheme(e);
         setResolvedTheme(resolved);
         if (theme === "system" && enableSystem && !forcedTheme) {
             applyTheme("system");
         }
-    }, [theme, enableSystem, forcedTheme, applyTheme]);
+    }, [
+        theme,
+        enableSystem,
+        forcedTheme,
+        applyTheme
+    ]);
     // Always listen to System preference
-    useEffect(function () {
-        var media = window.matchMedia(MEDIA);
+    useEffect(()=>{
+        const media = window.matchMedia(MEDIA);
         // Intentionally use deprecated listener methods to support iOS & old browsers
         media.addListener(handleMediaQuery);
         handleMediaQuery(media);
-        return function () { return media.removeListener(handleMediaQuery); };
-    }, [handleMediaQuery]);
+        return ()=>media.removeListener(handleMediaQuery);
+    }, [
+        handleMediaQuery
+    ]);
     // localStorage event handling
-    useEffect(function () {
-        var handleStorage = function (e) {
+    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)
-            var theme = e.newValue || defaultTheme;
+            const theme = e.newValue || defaultTheme;
             setTheme(theme);
         };
         window.addEventListener("storage", handleStorage);
-        return function () { return window.removeEventListener("storage", handleStorage); };
-    }, [defaultTheme, setTheme]);
+        return ()=>window.removeEventListener("storage", handleStorage);
+    }, [
+        defaultTheme,
+        setTheme
+    ]);
     // Whenever theme or forcedTheme changes, apply it
-    useEffect(function () {
-        applyTheme(forcedTheme !== null && forcedTheme !== void 0 ? forcedTheme : theme);
-    }, [applyTheme, forcedTheme, theme]);
-    return (_jsxs(ThemeContext.Provider, { value: {
-            theme: theme,
-            setTheme: setTheme,
-            forcedTheme: forcedTheme,
+    useEffect(()=>{
+        applyTheme(forcedTheme ?? theme);
+    }, [
+        applyTheme,
+        forcedTheme,
+        theme
+    ]);
+    return /*#__PURE__*/ _jsxs(ThemeContext.Provider, {
+        value: {
+            theme,
+            setTheme,
+            forcedTheme,
             resolvedTheme: theme === "system" ? resolvedTheme : theme,
-            themes: enableSystem ? __spreadArray(__spreadArray([], themes, true), ["system"], false) : themes,
-            systemTheme: (enableSystem ? resolvedTheme : undefined),
-        }, children: [_jsx(ThemeScript, { forcedTheme: forcedTheme, disableTransitionOnChange: disableTransitionOnChange, enableSystem: enableSystem, enableColorScheme: enableColorScheme, themes: themes, defaultTheme: defaultTheme, attribute: attribute, value: value, children: children, attrs: attrs, nonce: nonce }), children] }));
+            themes: enableSystem ? [
+                ...themes,
+                "system"
+            ] : themes,
+            systemTheme: enableSystem ? resolvedTheme : undefined
+        },
+        children: [
+            /*#__PURE__*/ _jsx(ThemeScript, {
+                forcedTheme,
+                disableTransitionOnChange,
+                enableSystem,
+                enableColorScheme,
+                themes,
+                defaultTheme,
+                attribute,
+                value,
+                children,
+                attrs,
+                nonce
+            }),
+            children
+        ]
+    });
 };
-var ThemeScript = memo(function (_a) {
-    var forcedTheme = _a.forcedTheme, attribute = _a.attribute, enableSystem = _a.enableSystem, enableColorScheme = _a.enableColorScheme, defaultTheme = _a.defaultTheme, value = _a.value, attrs = _a.attrs, nonce = _a.nonce;
-    var defaultSystem = defaultTheme === "system";
+const ThemeScript = /*#__PURE__*/ memo(({ forcedTheme, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce })=>{
+    const defaultSystem = defaultTheme === "system";
     // Code-golfing the amount of characters in the script
-    var optimization = (function () {
-        var removeClasses = "d.remove(".concat(attrs
-            .map(function (t) { return "'".concat(t, "'"); })
-            .join(","), ")");
-        return "var d=document.documentElement.classList;".concat(removeClasses, ";");
+    const optimization = (()=>{
+        const removeClasses = `d.remove(${attrs.map((t)=>`'${t}'`).join(",")})`;
+        return `var d=document.documentElement.classList;${removeClasses};`;
     })();
-    var fallbackColorScheme = (function () {
+    const fallbackColorScheme = (()=>{
         if (!enableColorScheme) {
             return "";
         }
-        var fallback = colorSchemes.includes(defaultTheme)
-            ? defaultTheme
-            : null;
+        const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null;
         if (fallback) {
-            return "if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'".concat(defaultTheme, "'");
-        }
-        else {
-            return "if(e==='light'||e==='dark')d.style.colorScheme=e";
+            return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+        } else {
+            return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
         }
     })();
-    var updateDOM = function (name, literal, setColorScheme) {
-        if (literal === void 0) { literal = false; }
-        if (setColorScheme === void 0) { setColorScheme = true; }
-        var resolvedName = value ? value[name] : name;
-        var val = literal ? name + "|| ''" : "'".concat(resolvedName, "'");
-        var text = "";
+    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 = '".concat(name, "';");
+        if (enableColorScheme && setColorScheme && !literal && colorSchemes.includes(name)) {
+            text += `d.style.colorScheme = '${name}';`;
         }
         if (attribute === "class") {
             if (literal || resolvedName) {
-                text += "d.add(".concat(val, ")");
+                text += `d.add(${val})`;
+            } else {
+                text += `null`;
             }
-            else {
-                text += "null";
-            }
-        }
-        else {
+        } else {
             if (resolvedName) {
-                text += "d[s](n, ".concat(val, ")");
+                text += `d[s](n, ${val})`;
             }
         }
         return text;
     };
-    var scriptSrc = (function () {
+    const scriptSrc = (()=>{
         if (forcedTheme) {
-            return "!function(){".concat(optimization).concat(updateDOM(forcedTheme), "}()");
+            return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
         }
         if (enableSystem) {
-            return "!function(){try {".concat(optimization, "var e=localStorage.getItem('").concat(THEME_STORAGE_KEY, "');if(\"system\"===e||(!e&&").concat(defaultSystem, ")){var t=\"").concat(MEDIA, "\",m=window.matchMedia(t);if(m.media!==t||m.matches){").concat(updateDOM("dark"), "}else{").concat(updateDOM("light"), "}}else if(e){").concat(value ? "var x=".concat(JSON.stringify(value), ";") : "").concat(updateDOM(value ? "x[e]" : "e", true), "}").concat(!defaultSystem
-                ? "else{" + updateDOM(defaultTheme, false, false) + "}"
-                : "").concat(fallbackColorScheme, "}catch(e){}}()");
+            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{".concat(optimization, "var e=localStorage.getItem(\"").concat(THEME_STORAGE_KEY, "\");if(e){").concat(value ? "var x=".concat(JSON.stringify(value), ";") : "").concat(updateDOM(value ? "x[e]" : "e", true), "}else{").concat(updateDOM(defaultTheme, false, false), ";}").concat(fallbackColorScheme, "}catch(t){}}();");
+        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
-    var encodedScript = "data:text/javascript;base64,".concat(encodeBase64(scriptSrc));
-    return (_jsx(NextScript, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
-}, 
-// Never re-render this component
-function () { return true; });
+    const encodedScript = `data:text/javascript;base64,${encodeBase64(scriptSrc)}`;
+    return /*#__PURE__*/ _jsx(NextScript, {
+        id: "next-theme-script",
+        strategy: "beforeInteractive",
+        src: encodedScript,
+        nonce: nonce
+    });
+}, // Never re-render this component
+()=>true);
 // Helpers
-var getTheme = function (key, fallback) {
-    if (isServer)
-        return undefined;
-    var theme;
+const getTheme = (key, fallback)=>{
+    if (isServer) return undefined;
+    let theme;
     try {
         theme = localStorage.getItem(key) || undefined;
-    }
-    catch (e) {
-        // Unsupported
+    } catch (e) {
+    // Unsupported
     }
     return theme || fallback;
 };
-var disableAnimation = function () {
-    var d = document;
-    var css = d.createElement("style");
-    css.appendChild(d.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}"));
+const disableAnimation = ()=>{
+    const d = document;
+    const css = d.createElement("style");
+    css.appendChild(d.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
     d.head.appendChild(css);
-    return function () {
+    return ()=>{
         // Force restyle
-        (function () { return window.getComputedStyle(d.body); })();
+        (()=>window.getComputedStyle(d.body))();
         // Wait for next tick before removing
-        setTimeout(function () {
+        setTimeout(()=>{
             d.head.removeChild(css);
         }, 1);
     };
 };
-var getSystemTheme = function (e) {
-    if (!e)
-        e = window.matchMedia(MEDIA);
-    var isDark = e.matches;
-    var systemTheme = isDark ? "dark" : "light";
+const getSystemTheme = (e)=>{
+    if (!e) e = window.matchMedia(MEDIA);
+    const isDark = e.matches;
+    const systemTheme = isDark ? "dark" : "light";
     return systemTheme;
 };
-var encodeBase64 = function (str) {
+const encodeBase64 = (str)=>{
     return isServer ? Buffer.from(str).toString("base64") : btoa(str);
 };
 export default ThemeProvider;

package/12/TransText.mjs

@@ -1,4 +1,4 @@
 "use client";
 import _TransText from "next-translate/TransText";
-export var TransText = _TransText;
+export const TransText = _TransText;
 export default TransText;

package/12/app/AppHead.mjs

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Head from "next/head";
-export var AppHead = function () {
-    return (_jsx(Head, { children: _jsx("meta", { name: "viewport", content: "width=device-width" }) }));
+import React from "react";
+export const AppHead = ()=>{
+    return /*#__PURE__*/ _jsx(Head, {
+        children: /*#__PURE__*/ _jsx("meta", {
+            name: "viewport",
+            content: "width=device-width"
+        })
+    });
 };
 export default AppHead;

package/12/app/AppMain.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-import type { AppProps as NextAppProps } from "next/app";
 import type { HTMLMotionProps } from "framer-motion";
-import type { SeoDefaultsProps } from "../SeoDefaults";
-import type { NextProgressProps } from "../NextProgress";
+import type { AppProps as NextAppProps } from "next/app";
+import React from "react";
 import type { MotionProviderFeatures } from "@koine/react/m";
+import type { NextProgressProps } from "../NextProgress";
+import type { SeoDefaultsProps } from "../SeoDefaults";
 export type AppMainBaseProps = NextAppProps & {
     /**
      * A wrapping layout component

package/12/app/AppMain.mjs

@@ -1 +1 @@
-export {};
+import React from "react";

package/12/app/css/AppMain.mjs

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { SeoDefaults } from "../../SeoDefaults";
@@ -6,9 +5,20 @@ import { SeoDefaults } from "../../SeoDefaults";
  * App main
  *
  * It does not imply any specific styling or animation solution
- */
-export var AppMain = function (_a) {
-    var Component = _a.Component, pageProps = _a.pageProps, Layout = _a.Layout, seo = _a.seo, pre = _a.pre, post = _a.post;
-    return (_jsxs(React.Fragment, { children: [_jsx(SeoDefaults, __assign({}, seo)), pre, _jsx(Layout, { children: _jsx(Component, __assign({}, pageProps)) }), post] }));
+ */ export const AppMain = ({ Component, pageProps, Layout, seo, pre, post })=>{
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(SeoDefaults, {
+                ...seo
+            }),
+            pre,
+            /*#__PURE__*/ _jsx(Layout, {
+                children: /*#__PURE__*/ _jsx(Component, {
+                    ...pageProps
+                })
+            }),
+            post
+        ]
+    });
 };
 export default AppMain;

package/12/app/css/AppTheme.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { type AppProps as NextAppProps } from "next/app";
+import React from "react";
 import { type ThemeProviderProps } from "../../ThemeProvider";
 export type AppThemeProps = React.PropsWithChildren<NextAppProps & {
     theme: ThemeProviderProps["defaultTheme"];

package/12/app/css/AppTheme.mjs

@@ -1,14 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 // import { ThemeVanillaProvider, ThemeVanillaValue } from "@koine/react/styles";
 import { ThemeProvider } from "../../ThemeProvider";
 /**
  * App theme with vanilla class based theme (good for `tailwindcss`)
- */
-export var AppTheme = function (_a) {
-    var theme = _a.theme, children = _a.children;
+ */ export const AppTheme = ({ theme, children })=>{
     // return (
     //   <ThemeVanillaProvider initialTheme={theme}>{children}</ThemeVanillaProvider>
     // );
-    return (_jsx(ThemeProvider, { defaultTheme: theme, attribute: "class", children: children }));
+    return /*#__PURE__*/ _jsx(ThemeProvider, {
+        defaultTheme: theme,
+        attribute: "class",
+        children: children
+    });
 };
 export default AppTheme;

package/12/app/css/auth/index.d.ts

@@ -1,6 +1,6 @@
 import type { AppProps } from "next/app";
-import { type AppThemeProps } from "../AppTheme";
 import { type AppMainProps } from "../AppMain";
+import { type AppThemeProps } from "../AppTheme";
 export type NextAppProps = AppProps<{
     session: any;
 }> & AppThemeProps & AppMainProps;

package/12/app/css/auth/index.mjs

@@ -1,13 +1,24 @@
-import { __assign } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SessionProvider } from "next-auth/react";
 import { AppHead } from "../../AppHead";
-import { AppTheme } from "../AppTheme";
 import { AppMain } from "../AppMain";
+import { AppTheme } from "../AppTheme";
 /**
  * App with authentication provided by `next-auth`
- */
-export var NextApp = function (props) {
-    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(SessionProvider, { session: props.pageProps.session, children: _jsx(AppTheme, __assign({}, props, { children: _jsx(AppMain, __assign({}, props)) })) })] }));
+ */ export const NextApp = (props)=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(AppHead, {}),
+            /*#__PURE__*/ _jsx(SessionProvider, {
+                session: props.pageProps.session,
+                children: /*#__PURE__*/ _jsx(AppTheme, {
+                    ...props,
+                    children: /*#__PURE__*/ _jsx(AppMain, {
+                        ...props
+                    })
+                })
+            })
+        ]
+    });
 };
 export default NextApp;

package/12/app/css/index.d.ts

@@ -1,6 +1,6 @@
 import { AppProps } from "next/app";
-import { type AppThemeProps } from "./AppTheme";
 import { type AppMainProps } from "./AppMain";
+import { type AppThemeProps } from "./AppTheme";
 export type NextAppProps = AppProps & AppThemeProps & AppMainProps;
 /**
  * App

package/12/app/css/index.mjs

@@ -1,8 +1,7 @@
-import { __assign } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AppHead } from "../AppHead";
-import { AppTheme } from "./AppTheme";
 import { AppMain } from "./AppMain";
+import { AppTheme } from "./AppTheme";
 /**
  * App
  *
@@ -50,8 +49,17 @@ import { AppMain } from "./AppMain";
  * }
  *
  * ```
- */
-export var NextApp = function (props) {
-    return (_jsxs(_Fragment, { children: [_jsx(AppHead, {}), _jsx(AppTheme, __assign({}, props, { children: _jsx(AppMain, __assign({}, props)) }))] }));
+ */ export const NextApp = (props)=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(AppHead, {}),
+            /*#__PURE__*/ _jsx(AppTheme, {
+                ...props,
+                children: /*#__PURE__*/ _jsx(AppMain, {
+                    ...props
+                })
+            })
+        ]
+    });
 };
 export default NextApp;

package/12/app/sc/AppMain.mjs

@@ -1,25 +1,58 @@
-import { __assign } from "tslib";
-import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRouter } from "next/router";
+import { createElement as _createElement } from "react";
 import { AnimatePresence, m } from "framer-motion";
+import { useRouter } from "next/router";
+import React from "react";
 import { MotionProvider } from "@koine/react/m";
-import { SeoDefaults } from "../../SeoDefaults";
 import { NextProgress } from "../../NextProgress";
+import { SeoDefaults } from "../../SeoDefaults";
 /**
  * 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)
- */
-export var AppMain = function (_a) {
-    var Component = _a.Component, pageProps = _a.pageProps, Layout = _a.Layout, ProgressOverlay = _a.ProgressOverlay, seo = _a.seo, motion = _a.motion, _b = _a.transition, transition = _b === void 0 ? {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-    } : _b, pre = _a.pre, post = _a.post;
-    var pathname = useRouter().pathname;
-    return (_jsxs(_Fragment, { children: [_jsx(SeoDefaults, __assign({}, seo)), pre, _jsxs(MotionProvider, { features: motion, children: [ProgressOverlay && _jsx(NextProgress, { Overlay: ProgressOverlay }), _jsx(Layout, { children: _jsx(AnimatePresence, { exitBeforeEnter: true, initial: false, children: _jsx(m.div, __assign({}, transition, { children: _createElement(Component, __assign({}, pageProps, { key: pathname })) }), pathname) }) })] }), post] }));
+ */ export const AppMain = ({ Component, pageProps, Layout, ProgressOverlay, seo, motion, transition = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0
+    }
+}, pre, post })=>{
+    const { pathname } = useRouter();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(SeoDefaults, {
+                ...seo
+            }),
+            pre,
+            /*#__PURE__*/ _jsxs(MotionProvider, {
+                features: motion,
+                children: [
+                    ProgressOverlay && /*#__PURE__*/ _jsx(NextProgress, {
+                        Overlay: ProgressOverlay
+                    }),
+                    /*#__PURE__*/ _jsx(Layout, {
+                        children: /*#__PURE__*/ _jsx(AnimatePresence, {
+                            exitBeforeEnter: true,
+                            initial: false,
+                            children: /*#__PURE__*/ _jsx(m.div, {
+                                ...transition,
+                                children: /*#__PURE__*/ _createElement(Component, {
+                                    ...pageProps,
+                                    key: pathname
+                                })
+                            }, pathname)
+                        })
+                    })
+                ]
+            }),
+            post
+        ]
+    });
 };
 export default AppMain;

package/12/app/sc/AppTheme.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import { type AppProps as NextAppProps } from "next/app";
+import React from "react";
 import { Theme } from "@koine/react/sc";
 export type AppThemeProps = React.PropsWithChildren<NextAppProps & {
     /**