@fullstackunicorn/create-root 1.0.27 → 1.0.29

package/assets/root.fullstackunicorn.dev/assets/config.cmd.sh

@@ -17,7 +17,7 @@ add() {
         yarn add axios --latest
         yarn add blurhash --latest
         yarn add jszip --latest
-        yarn add sharp --latest
+        yarn add sharp@0.34.5
 
     echo "🚀 [assets] Adding Dev Dependencies"
 
@@ -83,4 +83,4 @@ if declare -F "$cmd" >/dev/null && [[ "$cmd" != "info" ]]; then
 else
     info "$cmd"
 fi
-# ============================================================
+# ============================================================

package/assets/root.fullstackunicorn.dev/backend/modules/loader.js

@@ -1,3 +1,4 @@
+import path from 'path'
 import { fsa } from '#@/index.dep.js'
 import { Def } from '#@/index.def.js'
 import { tools } from '#@/modules/loader.tools.js'

package/assets/root.fullstackunicorn.dev/backend/modules/pulse.js

@@ -0,0 +1,22 @@
+class Pulse {
+
+    get = async () => this.formatDate(new Date())
+
+    formatDate = date => {
+        const parts = new Intl.DateTimeFormat('en-GB', {
+            weekday: 'short',
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+            timeZone: 'UTC'
+        }).formatToParts(date)
+
+        const value = type => parts.find(part => part.type === type)?.value ?? ''
+        return `${value('weekday')} ${value('day')} ${value('month')} ${value('year')} ${value('hour')}:${value('minute')}`
+    }
+}
+
+export { Pulse }

package/assets/root.fullstackunicorn.dev/backend/server/router.js

@@ -1,12 +1,22 @@
 import { Router } from '#@/index.dep.js'
 import { middleware } from '#@/server/middleware.js'
 import { resolver } from '#@/server/resolvers.js'
+import { Pulse } from '#@/modules/pulse.js'
 import { Loader } from '#@/modules/loader.js'
 import { Cookies } from '#@/modules/cookies.js'
 import { Stripe } from '#@/modules/stripe.js'
 
 const rs = {}
 
+// pulse
+
+rs.pulse = {}
+rs.pulse.method = 'get'
+rs.pulse.name = 'pulse'
+rs.pulse.path = '/pulse'
+rs.pulse.resolve = async (...args) => await resolver.resolve(new Pulse().get, rs.pulse.path, ...args)
+rs.pulse.funcs = [ rs.pulse.resolve ]
+
 // loader 
 
 rs.index = {}

package/assets/root.fullstackunicorn.dev/frontend/App.uri.js

@@ -51,10 +51,16 @@ uri.errors.error = `:lang/errors/:message`
 uri.auth = {}
 const { env } = constants
 
-uri.auth.client = {}
-uri.auth.client.login = `${env.SERVER_URL_AUTH}/auth/login`
-uri.auth.client.logout = `${env.SERVER_URL_AUTH}/auth/logout`
-uri.auth.client.refresh = `${env.SERVER_URL_AUTH}/auth/refresh`
+uri.auth.gateway = {}
+uri.auth.gateway.login = `${env.SERVER_URL_AUTH}/auth/login`
+uri.auth.gateway.logout = `${env.SERVER_URL_AUTH}/auth/logout`
+uri.auth.gateway.refresh = `${env.SERVER_URL_AUTH}/auth/refresh`
+
+uri.auth.bff = {}
+uri.auth.bff.login = `${env.SERVER_URL_BFF}/auth/login`
+uri.auth.bff.logout = `${env.SERVER_URL_BFF}/auth/logout`
+uri.auth.bff.sessionMe = `${env.SERVER_URL_BFF}/session/me`
+uri.auth.bff.bootstrap = `${env.SERVER_URL_BFF}/bootstrap`
 
 uri.auth.user = {}
 uri.auth.user.login = `${env.CLIENT_URL_AUTH}/auth?:type&:token`

package/assets/root.fullstackunicorn.dev/frontend/assets/index.webmanifest

@@ -5,17 +5,17 @@
     "display": "fullscreen",
     "icons": [
         {
-            "src": "/icons/icon-192.png",
+            "src": "/get/media/icons/icon-192.png",
             "sizes": "192x192",
             "type": "image/png",
             "purpose": "maskable"
         },
         {
-            "src": "/icons/icon-512.png",
+            "src": "/get/media/icons/icon-512.png",
             "sizes": "512x512",
             "type": "image/png",
             "purpose": "maskable"
         }
     ],
     "theme_color": "#ffffff"
-}
+}

package/assets/root.fullstackunicorn.dev/frontend/base/account/@use.js

@@ -1,6 +1,6 @@
-import { atom, useAtom, useSetAtom, useGetAtom, makeId } from '#@/imports/npm.js'
-import { useNavigateUrl } from '#@/imports/router.js'
-import { storage } from '#@/imports/storage.js'
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+import { getCurrentHref, useNavigate, useNavigateUrl } from '#@/imports/router.js'
+import { useSetAlerts } from '#@/base/alerts/@use.js'
 import { uri } from '#@/App.uri.js'
 import { abs } from '#@/abstracts/abs.js'
 import { api } from '#@/client/@api.js'
@@ -14,7 +14,7 @@ export const initializeUser = atom(
     (get) => get(isUserInitialized),
     async (get, set, value) => {
 
-        const userInit = await api.auth.init()
+        const userInit = await api.auth.bootstrap()
         const userInitialized = userInit?.id ? userInit : {}
 
         set(user, userInitialized)
@@ -38,16 +38,8 @@ export const useAuthLogin = () => {
 
         if (!types.includes(type)) return
 
-        const tokenRaw = {}
-        tokenRaw.nonce = makeId()
-        tokenRaw.request_type = type
-        tokenRaw.client_id = env.CLIENT_ID
-        tokenRaw.protocol = env.PROTOCOL_AUTH
-
-        storage.set(type, tokenRaw.nonce)
-
-        const token = abs.jwt.encode(tokenRaw)
-        const authLink = F3.fabUrl(uri.auth.user.login, { type, token })
+        const returnUrl = encodeURIComponent(getCurrentHref())
+        const authLink = `${uri.auth.bff.login}?type=${type}&client_id=${env.CLIENT_ID}&return_url=${returnUrl}`
 
         navigateUrl(authLink)
     }
@@ -58,6 +50,8 @@ export const useAuthLogout = () => {
 
     const { lang } = useUrl()
     const setUser = useSetUser()
+    const setAlerts = useSetAlerts()
+    const navigate = useNavigate()
 
     const authLogout = async () => {
 
@@ -69,8 +63,7 @@ export const useAuthLogout = () => {
             navigate(F3.fabUrl(uri.errors, { message, lang }))
         }
         else {
-            storage.remove('accessToken')
-            storage.remove('refreshToken')
+            api.auth.cleanUp()
             setUser({})
         }
     }

package/assets/root.fullstackunicorn.dev/frontend/base/alerts/Alert.pod.js

@@ -11,8 +11,8 @@ export const AlertPod = ({ close, message, svg, isError }) => {
 
     B.color = isError ? c.item_RR : c.item_OR
 
-    S.overlay = [s.row_cXsY, s.absolute, s.overflowXYh, s.paddingY96, s.paddingX32, s.XY, s.G1, s.Z15, c.base_NN_B750_40]
-    S.alert = [s.col_cX, s.X330, s.overflowXYh, s.padding32, s.radius20, c.base_NN_W700]
+    S.overlay = [s.row_cXsY, s.positionAbsolute, s.overflowHidden, s.paddingY96, s.paddingX32, s.XY100p, s.G1, s.Z15, c.base_NN_B750_40]
+    S.alert = [s.col_cX, s.X330, s.overflowHidden, s.padding32, s.radius20, c.base_NN_W700]
     S.message = [...F.message, s.row_cXcY, s.textC, s.marginY16, c.item_NN_B400]
     S.icon = [s.row_cXcY, s.XY40, B.color]
 

package/assets/root.fullstackunicorn.dev/frontend/base/callout/Callout.pod.js

@@ -9,10 +9,10 @@ export const CalloutPod = ({ text, link, linkTo }) => {
 
     F.text = [s.fs16, s.lh24, s.fw500]
 
-    // S.alpha = [s.col_cXcY, s.absolute, s.bottom0, s.Y64, s.X, c.base_RR]
-    S.alpha = [s.col_cXcY, s.Y64, s.X, c.base_RR_B400]
+    // S.alpha = [s.col_cXcY, s.positionAbsolute, s.bottom0, s.Y64, s.X100p, c.base_RR]
+    S.alpha = [s.col_cXcY, s.Y64, s.X100p, c.base_RR_B400]
     S.link = [s.row_cXcY, s.Xc, ]
-    S.text = [...F.text, s.textC, s.Xx, c.item_NN_W700]
+    S.text = [...F.text, s.textC, s.Xx100p, c.item_NN_W700]
 
     return (
         <View classes={S.alpha}>

package/assets/root.fullstackunicorn.dev/frontend/base/cookies/@tools.js

@@ -1,4 +1,5 @@
 import { constants } from '#@/root/constants.js'
+import { getSubmitMetadata } from '#@/imports/device.js'
 
 class Tools {
 
@@ -15,52 +16,7 @@ class Tools {
     getSubmit = async (device_id) => {
         const { env } = constants
 
-        const battery = navigator.getBattery ? await navigator.getBattery() : {}
-        const metadataObj = {
-            timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            language: window.navigator.language,
-            pageTitle: document.title,
-            referrer: document.referrer,
-            pageURL: window.location.href,
-            platform: window.navigator.platform,
-            deviceMemory: navigator.deviceMemory,
-            screenWidth: window.screen.width,
-            screenHeight: window.screen.height,
-            colorDepth: window.screen.colorDepth,
-            maxScreenWidth: window.screen.width * window.devicePixelRatio,
-            maxScreenHeight: window.screen.height * window.devicePixelRatio,
-            pixelRatio: window.devicePixelRatio,
-            screenOrientation: screen?.orientation?.type,
-            hardwareConcurrency: navigator.hardwareConcurrency,
-            touchSupport: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
-            colorGamut: window.matchMedia("(color-gamut: srgb)").matches
-                ? "srgb"
-                : window.matchMedia("(color-gamut: p3)").matches
-                    ? "p3"
-                    : window.matchMedia("(color-gamut: rec2020)").matches
-                        ? "rec2020"
-                        : "unknown",
-            rtt: navigator?.connection?.rtt,
-            hasGamepad: navigator.getGamepads ? navigator.getGamepads().length > 0 : false,
-            keyboardEnabled: "onkeydown" in document,
-            cookieEnabled: navigator.cookieEnabled,
-            javaEnabled: navigator.javaEnabled ? navigator.javaEnabled() : false,
-            doNotTrack: navigator.doNotTrack,
-            networkType: navigator?.connection?.effectiveType,
-            downlinkSpeed: navigator?.connection?.downlink,
-            batteryLevel: battery?.level * 100,
-            batteryCharging: battery?.charging
-        }
-
-        const metadata = {
-            submit_timestamp: new Date().toISOString(),
-            submit_device_id: device_id,
-            submit_client_id: env.CLIENT_ID,
-            submit_user_agent: window.navigator.userAgent,
-            submit_metadata: Object.entries(metadataObj).map(([key, value]) => `${key}:${value ? value : 'unknown'}`).join(" | ")
-        }
-
-        return metadata
+        return await getSubmitMetadata({ clientId: env.CLIENT_ID, deviceId: device_id })
     }
 }
 

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Header.pod.js

@@ -8,8 +8,8 @@ export const HeaderPod = ({ auth, center, back, logo, svg }) => {
 
     H.icon = [[c.base_NN_W700]]
     
-    S.header = [s.col_sY, s.X, c.base_WW]
-    S.box = [s.row_cY, s.X, s.Y64]
+    S.header = [s.col_sY, s.X100p, c.base_WW]
+    S.box = [s.row_cY, s.X100p, s.Y64]
     S.one = [s.row_sX]
     S.middle = [s.row_cXcY, s.Xr]
     S.two = [s.row_eX]

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Layout.pod.js

@@ -7,9 +7,9 @@ export const LayoutPod = ({ sidebarTwo, iconTwo,
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.root = [s.col, s.X, s.Yc, s.Ymin0]
-    S.layout = [s.col, s.X, s.Yc, s.Ymin0]
-    S.body = [s.col_cX, s.X, s.Yc, s.Ymin0, s.overflowXh, c.base_NN_W750]
+    S.root = [s.col, s.X100p, s.Yc, s.Ymin0]
+    S.layout = [s.col, s.X100p, s.Yc, s.Ymin0]
+    S.body = [s.col_cX, s.X100p, s.Yc, s.Ymin0, s.overflowXHidden, c.base_NN_W750]
 
     return (
         <View classes={S.root} inline={I.root}>

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/IconTwo.pod.js

@@ -11,7 +11,7 @@ export const IconTwoPod = ({ svg, onPress, isOn }) => {
 
     B.isOn = isOn ? s.Z10 : s.Z1
 
-    S.iconBox = [s.absolute, s.row_cXcY, s.X48, s.Y64, s.end0, B.isOn]
+    S.iconBox = [s.positionAbsolute, s.row_cXcY, s.X48, s.Y64, s.end0, B.isOn]
     S.icon = [s.XY40, s.marginX4, s.marginY12, s.radius32, c.item_NN_B600]
     
     return (

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/SidebarTwo.pod.js

@@ -8,11 +8,11 @@ export const SidebarTwoPod = ({ isClosed, menu, onPress }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.overlay = [s.col, s.absolute, s.overflowXYh, s.X, s.Y, s.Z4, s.flex1]
+    S.overlay = [s.col, s.positionAbsolute, s.overflowHidden, s.X100p, s.Y100p, s.Z4, s.flex1]
     S.main = [s.row_sX_r, s.Xc,  s.Yc,]
     S.external = [s.col, s.Xmax320, s.G100, s.paddingX8, c.base_WW]
     S.header = [s.col_cY, s.Y64, s.paddingX4, s.Xc, c.base_WW]
-    S.bodyExt = [s.col, s.Yc, s.X, s.paddingX4]
+    S.bodyExt = [s.col, s.Yc, s.X100p, s.paddingX4]
     S.space = [s.row, s.Xmin16, s.XYr]
 
     return (

package/assets/root.fullstackunicorn.dev/frontend/base/loader/@tools.js

@@ -11,6 +11,7 @@ class Tools {
         if (user.isOffline) setAlerts({ id: 'offline', onClose: () => setIsAuthRun(true) })
         else if (user.isError) navigate(`/errors/${user.error || 'login-failed'}`)
         else {
+            api.auth.cleanUp()
             setUser(user)
             navigate('/user')
         }
@@ -108,4 +109,4 @@ class Tools {
     }
 }
 
-export const tools = new Tools()
+export const tools = new Tools()

package/assets/root.fullstackunicorn.dev/frontend/base/modals/Modal.pod.js

@@ -15,8 +15,8 @@ export const ModalPod = ({ children, title, svg, actions, isCloseDisabled, style
     B.isMax = style.isMax ? [s.Xr, s.Xmax600] : [s.Xr]
     B.margin = style.margin
 
-    S.overlay = [s.row_cXcY, s.absolute, s.overflowXYh, s.paddingX16, s.XY, s.G1, s.Z10, c.base_NN_B750_40]
-    S.modal = [s.col, s.Yr, s.Ymin0, s.overflowXYh, s.paddingX20, s.radius20, s.marginY16, ...B.isMax, ...B.margin, c.base_NN_W700]
+    S.overlay = [s.row_cXcY, s.positionAbsolute, s.overflowHidden, s.paddingX16, s.XY100p, s.G1, s.Z10, c.base_NN_B750_40]
+    S.modal = [s.col, s.Yr, s.Ymin0, s.overflowHidden, s.paddingX20, s.radius20, s.marginY16, ...B.isMax, ...B.margin, c.base_NN_W700]
     S.layout = [s.col, s.XYc, s.Ymin0]
     S.header = [s.row_cXcY, s.Xr, s.Y40, s.marginY20]
     S.icon = [s.XY32, s.margin4, c.item_NN_B400]

package/assets/root.fullstackunicorn.dev/frontend/base/modals/ModalPopup.pod.js

@@ -13,9 +13,9 @@ export const ModalPopupPod = ({ children, title, svg, actions, isCloseDisabled,
 
     B.disabled = isCloseDisabled ? c.item_NN_B600_30 : c.item_NN_B600
 
-    S.overlay = [s.row_cXcY, s.absolute, s.overflowXYh, s.paddingX16, s.XY, s.G1, s.Z10, c.base_NN_B750_40]
-    S.modal = [s.col, s.Xx360, s.Yy360, s.overflowXYh, s.paddingX20, s.radius20, s.marginY16, c.base_NN_W700]
-    S.layout = [s.col, s.X, s.Y]
+    S.overlay = [s.row_cXcY, s.positionAbsolute, s.overflowHidden, s.paddingX16, s.XY100p, s.G1, s.Z10, c.base_NN_B750_40]
+    S.modal = [s.col, s.Xx360, s.Yy360, s.overflowHidden, s.paddingX20, s.radius20, s.marginY16, c.base_NN_W700]
+    S.layout = [s.col, s.X100p, s.Y100p]
     S.header = [s.row_cXcY, s.Xr, s.Y40, s.marginY20]
     S.icon = [s.XY32, s.margin4, c.item_NN_B400]
     S.iconCancel = [s.XY32, s.margin4, B.disabled]

package/assets/root.fullstackunicorn.dev/frontend/client/auth.js

@@ -8,9 +8,23 @@ import { storage } from '#@/imports/storage'
 class Auth {
 
     config = { headers: { 'Content-Type': 'application/json' } }
+    sessionConfig = { headers: { 'Content-Type': 'application/json' }, withCredentials: true }
     env = constants.env
 
     getUser = (token = {}) => ({ id: token.sub, logo: token.logo })
+    getSessionUser = (payload = {}) => ({ id: payload?.user?.id, logo: payload?.user?.logo })
+    getBootstrapUser = (payload = {}) => {
+        const user = this.getSessionUser(payload)
+        return {
+            ...user,
+            bootstrap: payload?.bootstrap || {},
+            permissions: payload?.permissions || [],
+            groups: payload?.groups || [],
+            entities: payload?.entities || {},
+            client: payload?.client || null,
+            features: payload?.features || {}
+        }
+    }
 
     loginOps = ['login', 'signup']
 
@@ -25,17 +39,9 @@ class Auth {
 
             const nonce = storage.get(type)
 
-            // const isValid = nonce === token.nonce
-            // if (!isValid) throw new Error('abort')
-
-            // const rawToken = {}
-            // rawToken.authcode = token.authcode
-            // // rawToken.nonce = nonce
-            // rawToken.client_id = env.CLIENT_ID
-
             const config = this.config
             const data = { token: token_encoded, nonce }
-            const endpoint = uri.auth.client.login
+            const endpoint = uri.auth.gateway.login
 
             const response = await client.post(endpoint, data, config)
 
@@ -50,38 +56,45 @@ class Auth {
 
             return this.getUser(response.access_token)
 
-        } catch (error) { 
+        } catch (error) {
             console.log("error", error)
-            return err.cleanup(() => storage.remove(type), { isError: true }) }
+            return err.cleanup(() => storage.remove(type), { isError: true })
+        }
     }
 
     refresh = async (refresh_token) => {
 
         const config = this.config
         const data = { refresh_token, client_id: this.env.CLIENT_ID }
-        const endpoint = uri.auth.client.refresh
+        const endpoint = uri.auth.gateway.refresh
 
         return await client.post(endpoint, data, config)
 
     }
 
     logout = async () => {
+        const endpoint = uri.auth.bff.logout
+        const response = await client.post(endpoint, {}, this.sessionConfig)
+        return response?.isLogout ? response : { isLogout: true }
 
-        const refresh_token = storage.get('refreshToken') || ''
-        const access_token = storage.get('accessToken') || ''
-
-        if (!refresh_token && !access_token) return { isLogout: true }
-
-        const config = this.config
-        const data = { access_token, refresh_token, client_id: this.env.CLIENT_ID }
-        const endpoint = uri.auth.client.logout
-
-        const response = await client.post(endpoint, data, config)
+    }
 
-        const isLogout = response.access_token && response.refresh_token
+    bootstrap = async () => {
+        try {
+            const response = await client.data({
+                key: uri.auth.bff.bootstrap,
+                method: 'get',
+                endpoint: uri.auth.bff.bootstrap,
+                config: this.sessionConfig
+            }, true)
 
-        return isLogout || response
+            if (response.isOffline) return { isOffline: true }
+            if (response.isError) throw new Error('is-logout')
+            if (!response?.user?.id) throw new Error('is-logout')
 
+            this.cleanUp()
+            return this.getBootstrapUser(response)
+        } catch (error) { return { isLogout: true } }
     }
 
     handleAccessToken = (accessToken) => {
@@ -156,57 +169,30 @@ class Auth {
     init = async () => {
 
         try {
+            const bootstrapped = await this.bootstrap()
+            if (bootstrapped?.id || bootstrapped?.isOffline) return bootstrapped
 
-            const accessToken = storage.get('accessToken')
-            if (!accessToken) throw new Error('is-logout')
-
-            const refreshToken = storage.get('refreshToken')
-            if (!refreshToken) throw new Error('is-logout')
+            const response = await client.data({
+                key: uri.auth.bff.sessionMe,
+                method: 'get',
+                endpoint: uri.auth.bff.sessionMe,
+                config: this.sessionConfig
+            }, true)
 
-            let access
-
-            access = this.handleAccessToken(accessToken)
-            if (access.decoded?.sub) return this.getUser(access.decoded)
-
-            access = await this.handleRefreshToken(refreshToken)
-            if (access.decoded?.sub) return this.getUser(access.decoded)
-
-            if (access.isOffline) {
-                const user = this.getUserOffline(accessToken)
-                if (user.id) return user
-                new Error('is-logout')
-            }
+            if (response.isOffline) return { isOffline: true }
+            if (response.isError) throw new Error('is-logout')
+            if (!response?.user?.id) throw new Error('is-logout')
 
-            throw new Error('is-logout')
+            this.cleanUp()
+            return this.getSessionUser(response)
 
-        } catch (error) { 
+        } catch (error) {
             return { isLogout: true }
-            // return err.cleanup(this.cleanUp, { isLogout: true }) 
         }
     }
 
     getAccessToken = async () => {
-
-        try {
-
-            const accessToken = storage.get('accessToken')
-            if (!accessToken) throw new Error('is-logout')
-
-            const refreshToken = storage.get('refreshToken')
-            if (!refreshToken) throw new Error('is-logout')
-
-            let access
-
-            access = this.handleAccessToken(accessToken)
-            if (access.token) return { accessToken: access.token }
-
-            access = await this.handleRefreshToken(refreshToken)
-            if (access.token) return { accessToken: access.token }
-
-            if (access.isOffline) return { isOffline: true }
-            throw new Error('is-logout')
-
-        } catch (error) { return err.cleanup(this.cleanUp, { isLogout: true }) }
+        return { isLogout: true }
     }
 }
 

package/assets/root.fullstackunicorn.dev/frontend/client/statics.js

@@ -30,12 +30,13 @@ class Statics {
         return response
     }
 
-    image = async (path, type) => {
+    image = async (path, type, config = {}) => {
 
         const payload = {}
         payload.method = 'get'
         payload.endpoint = path
         payload.key = abs.makeKey(payload.endpoint, payload.method)
+        payload.config = config
 
         const response = await client.image(payload, type)
 
@@ -44,4 +45,4 @@ class Statics {
     }
 }
 
-export const statics = new Statics()
+export const statics = new Statics()

package/assets/root.fullstackunicorn.dev/frontend/configure/env.json

@@ -4,5 +4,6 @@
   "CLIENT_ID": "clientxx-xxxx-4xxx-8xxx-xxxxxxxxxxxx",
   "CLIENT_URL_AUTH": "https://auth.minderable.com",
   "CLIENT_URL_ACCOUNT": "https://account.minderable.com",
+  "SERVER_URL_BFF": "http://localhost:4820",
   "SERVER_URL_AUTH": "https://api.auth.minderable.com"
 }

package/assets/root.fullstackunicorn.dev/frontend/configure/env.prod.json

@@ -4,5 +4,6 @@
   "CLIENT_ID": "clientxx-xxxx-4xxx-8xxx-xxxxxxxxxxxx",
   "CLIENT_URL_AUTH": "https://auth.minderable.com",
   "CLIENT_URL_ACCOUNT": "https://account.minderable.com",
+  "SERVER_URL_BFF": "https://bff.minderable.com",
   "SERVER_URL_AUTH": "https://api.auth.minderable.com"
 }

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Button.js

@@ -56,9 +56,9 @@ export const ControlButton = ({ onPress = () => { }, classes = [], children }) =
             onMouseUp={() => setIsPressed(false)}
             onMouseLeave={() => setIsPressed(false)}
             style={containerStyle}
-            className={[...classes, s.relative].join(' ')}
+            className={[...classes, s.positionRelative].join(' ')}
         >
-            <div className={[...classes, s.relative].join(' ')} style={iconStyle}>
+            <div className={[...classes, s.positionRelative].join(' ')} style={iconStyle}>
                 {children}
             </div>
         </div>

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/Crossfader.js

@@ -13,7 +13,7 @@ export const Crossfader = ({ isActive, children, transitionMs = 600, instantMoun
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.box = [s.absolute, s.XY, s.noSelect]
+    S.box = [s.positionAbsolute, s.XY100p, s.noSelect]
 
     I.box = {
         width: '100%',

package/assets/root.fullstackunicorn.dev/frontend/imports/animated/HoverCard.js

@@ -7,7 +7,7 @@ export const HoverCard = ({ children, classes = [] }) => {
 
     const [isHover, setIsHover] = useState(false)
 
-    S.box = [s.relative, s.radius24, s.overflowXYh, ...classes]
+    S.box = [s.positionRelative, s.radius24, s.overflowHidden, ...classes]
 
     I.box = {
         transition: 'transform 240ms cubic-bezier(0.2, 0, 0, 1), box-shadow 240ms cubic-bezier(0.2, 0, 0, 1)',