@fullstackunicorn/create-root 1.0.26 → 1.0.28

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/assets/package.md

@@ -1,3 +1,29 @@
+Create-root local flow:
+
+```bash
 yarn cmd website local-push
 yarn cmd website local-assets
 yarn cmd website local-workers
+```
+
+Other supported commands:
+
+```bash
+yarn cmd website workspace-cleanup
+yarn cmd website develop-cleanup
+
+yarn cmd website local-config
+yarn cmd website local-pull
+
+yarn cmd website sv1-config
+yarn cmd website sv1-push
+yarn cmd website sv1-pull
+yarn cmd website sv1-assets
+yarn cmd website sv1-workers
+
+yarn cmd website stage-config
+yarn cmd website stage-push
+yarn cmd website stage-pull
+yarn cmd website stage-assets
+yarn cmd website stage-workers
+```

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/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/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/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/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/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/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)',

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

@@ -109,7 +109,7 @@ class Client {
         if (isFresh) return cachedResponse
 
         config.timeout = 10000
-        if (etag) {
+        if (etag && cachedItem) {
             if (!config.headers) config.headers = {}
             config.headers['If-None-Match'] = etag
         }
@@ -121,6 +121,7 @@ class Client {
                 : await axios[method](endpoint, data, config)
 
             if (cachedItem && response.status === 304) {
+                await cache.setMeta(key, response.headers['etag'] || etag)
                 return cachedResponse
             }
 
@@ -139,21 +140,25 @@ class Client {
 
         const cacheStore = await cache.open(this.cacheNameImg)
         const cachedBlob = await cache.get(cacheStore, key, true)
-        if (!cachedBlob) return null
-        return { key, blob: cachedBlob }
+        if (!cachedBlob?.size) return null
+        return { key, blob: cachedBlob, isCached: true }
 
     }
 
     cacheImgSet = async ({ key, endpoint, config = {} }) => {
         const cacheStore = await cache.open(this.cacheNameImg)
         const cachedBlob = await cache.get(cacheStore, key, true)
-        const cachedResponse = cachedBlob ? { key, blob: cachedBlob } : undefined
+        const cachedResponse = cachedBlob?.size ? { key, blob: cachedBlob, isCached: true } : undefined
         const { etag, timestamp } = await cache.getMeta(key)
 
+        const age = (Date.now() - timestamp) / 1000
+        const isFresh = cachedResponse && age < this.cacheStale
+        if (isFresh) return { ...cachedResponse, isFresh: true }
+
         config.responseType = 'arraybuffer'
         config.timeout = 10000
 
-        if (etag) {
+        if (etag && cachedResponse) {
             if (!config.headers) config.headers = {}
             config.headers['If-None-Match'] = etag
         }
@@ -161,15 +166,19 @@ class Client {
         try {
             const response = await axios.get(endpoint, config)
 
-            if (cachedBlob && response.status === 304) return cachedResponse
+            if (cachedResponse && response.status === 304) {
+                await cache.setMeta(key, response.headers['etag'] || etag)
+                return { ...cachedResponse, isRevalidated: true }
+            }
 
             const blob = cache.getBlob(response.data, response.headers['content-type'])
             await cache.set(cacheStore, key, blob, true)
             await cache.setMeta(key, response.headers['etag'])
 
-            return { key, blob }
+            return { key, blob, isUpdated: true }
 
         } catch (error) {
+            if (error?.code === 'ERR_CANCELED' || config.signal?.aborted) return cachedResponse || { isCanceled: true }
             return await err.cache(error, cachedResponse)
         }
     }
@@ -178,7 +187,7 @@ class Client {
 
         const cacheStore = await cache.open(this.cacheNameFiles)
         const cachedBlob = await cache.get(cacheStore, key, true)
-        const cachedResponse = cachedBlob ? { key, blob: cachedBlob } : undefined
+        const cachedResponse = cachedBlob?.size ? { key, blob: cachedBlob } : undefined
         const { etag, timestamp } = await cache.getMeta(key)
 
         const age = (Date.now() - timestamp) / 1000
@@ -188,7 +197,7 @@ class Client {
         config.responseType = 'arraybuffer'
         config.timeout = 10000
 
-        if (etag) {
+        if (etag && cachedResponse) {
             if (!config.headers) config.headers = {}
             config.headers['If-None-Match'] = etag
         }
@@ -198,7 +207,10 @@ class Client {
                 ? await axios.get(endpoint, config)
                 : await axios[method](endpoint, data, config)
 
-            if (cachedBlob && response.status === 304) return cachedResponse
+            if (cachedResponse && response.status === 304) {
+                await cache.setMeta(key, response.headers['etag'] || etag)
+                return cachedResponse
+            }
 
             const blob = cache.getBlob(response.data, response.headers['content-type'])
             await cache.set(cacheStore, key, blob, true)

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Img.js

@@ -6,6 +6,34 @@ import { api } from '#@/client/@api.js'
 
 export const ImgData = (props) => <ImgDataPod {...props} />
 
+const inFlightImages = new Map()
+
+const retainImageRequest = (src) => {
+    let entry = inFlightImages.get(src)
+
+    if (!entry) {
+        const controller = new AbortController()
+        const promise = api.statics.image(src, 'set', { signal: controller.signal })
+            .finally(() => inFlightImages.delete(src))
+
+        entry = { controller, promise, retainers: 0 }
+        inFlightImages.set(src, entry)
+    }
+
+    let released = false
+    entry.retainers += 1
+
+    const release = () => {
+        if (released) return
+        released = true
+
+        entry.retainers = Math.max(0, entry.retainers - 1)
+        if (entry.retainers === 0) entry.controller.abort()
+    }
+
+    return { promise: entry.promise, release }
+}
+
 export const NoImg = (props) => {
     const statics = useGetStatics()
     return <NoImgPod {...props} svg={statics.visual.svg.picture} />
@@ -19,9 +47,12 @@ export const Img = ({ classes, inline, picture = {} }) => {
     const [isSlow, setIsSlow] = useState(false)
 
     useEffect(() => {
+        if (image.isNoImage || !image.src) return
+
         let mounted = true
         let objectUrl = null
         let slowTimer = null
+        let releaseRequest = null
 
         setSrc(undefined)
         setIsLoaded(false)
@@ -31,25 +62,45 @@ export const Img = ({ classes, inline, picture = {} }) => {
             if (mounted) setIsSlow(true)
         }, 150)
 
+        const setBlob = (blob) => {
+            clearTimeout(slowTimer)
+            if (objectUrl) URL.revokeObjectURL(objectUrl)
+            objectUrl = URL.createObjectURL(blob)
+            setSrc(objectUrl)
+            setIsLoaded(true)
+            setIsSlow(false)
+        }
+
+        const fetchImage = async ({ updateOnly = false } = {}) => {
+            const request = retainImageRequest(image.src)
+            releaseRequest = request.release
+
+            const fetched = await request.promise
+            releaseRequest()
+            releaseRequest = null
+
+            if (fetched?.isCanceled) return fetched
+            if (!mounted) return fetched
+            if (!fetched?.blob) return fetched
+            if (updateOnly && !fetched.isUpdated) return fetched
+
+            setBlob(fetched.blob)
+            return fetched
+        }
+
         const load = async () => {
             const cached = await api.statics.image(image.src, 'get')
 
             if (mounted && cached?.blob) {
-                clearTimeout(slowTimer)
-                objectUrl = URL.createObjectURL(cached.blob)
-                setSrc(objectUrl)
-                setIsLoaded(true)
-                setIsSlow(false)
+                setBlob(cached.blob)
+                fetchImage({ updateOnly: true })
                 return
             }
 
-            const fetched = await api.statics.image(image.src, 'set')
+            const fetched = await fetchImage()
+            if (fetched?.isCanceled) return
 
             if (mounted && fetched?.blob) {
-                clearTimeout(slowTimer)
-                objectUrl = URL.createObjectURL(fetched.blob)
-                setSrc(objectUrl)
-                setIsLoaded(true)
                 return
             }
 
@@ -68,6 +119,7 @@ export const Img = ({ classes, inline, picture = {} }) => {
         return () => {
             mounted = false
             clearTimeout(slowTimer)
+            if (releaseRequest) releaseRequest()
             if (objectUrl) URL.revokeObjectURL(objectUrl)
         }
     }, [image.src])

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Img.pod.js

@@ -17,7 +17,7 @@ export const NoImgPod = ({ classes, inline, svg }) => {
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
     S.box = [...classes, c.base_NN_W700]
-    S.svg = [s.XY, c.item_NN_W750]
+    S.svg = [s.XY100p, c.item_NN_W750]
 
     return (
         <View classes={S.box} inline={inline}>
@@ -37,9 +37,9 @@ export const ImgPod = ({
     B.imgTransition = isSlow ? { transition: '0.3s all ease-in-out', ...inline } : { ...inline }
     B.blurhashTransition = { transition: '0.3s all ease-in-out' }
 
-    S.image = [s.relative, s.overflowXYh, s.row_cXcY, ...classes]
-    S.blurhash = [s.absolute, s.XY, ...B.blurhashOpacity]
-    S.box = [s.absolute, s.XY, s.row_cXcY]
+    S.image = [s.positionRelative, s.overflowHidden, s.row_cXcY, ...classes]
+    S.blurhash = [s.positionAbsolute, s.XY100p, ...B.blurhashOpacity]
+    S.box = [s.positionAbsolute, s.XY100p, s.row_cXcY]
     S.img = [...B.imgOpacity, ...classes]
 
     I.image = { objectFit: 'cover', aspectRatio: ratio, ...inline }

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Scrollable.js

@@ -7,9 +7,18 @@ export const Scrollable = ({
     scrollRef,
     onScroll,
     isPage,
+    x,
+    y,
+    xy,
 }) => {
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
+    B.axis = xy || (x && y) ? 'xy' : x ? 'x' : 'y'
+    B.isXY = B.axis === 'xy' ? [s.overflowScroll] : []
+    B.isX = B.axis === 'x' ? [s.overflowXScroll, s.overflowYHidden] : []
+    B.isY = B.axis === 'y' ? [s.overflowYScroll] : []
+    B.scroll = [...B.isXY, ...B.isX, ...B.isY]
+
     const pageInline = isPage
         ? { paddingBottom: 'env(safe-area-inset-bottom, 0px)' }
         : {}
@@ -22,7 +31,7 @@ export const Scrollable = ({
     return (
         <div
             ref={scrollRef}
-            className={[...classes, s.overflowYs].join(' ')}
+            className={[...classes, ...B.scroll].join(' ')}
             style={{ ...scrollInline, ...inline, ...pageInline }}
             onScroll={onScroll}
         >

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Text.js

@@ -37,9 +37,14 @@ export const Text = (props = {}) => {
 
     F.font = useGetFont(props.font, props.language)
     B.select = props.isNoSelect ? [s.noSelect] : []
+    B.mode = props.ellipsis || props.oneLine
+        ? [s.textline]
+        : props.wrap || props.preserveWhitespace
+            ? [s.textwrap]
+            : [s.textblock]
 
     const next = { ...props }
-    next.classes = [...classes, ...B.select, s.textblock, F.font]
+    next.classes = [...classes, ...B.select, ...B.mode, F.font]
 
     if (props.tag) return <TextTag {...next} />
     else return <TextSpan {...next} />
@@ -62,6 +67,10 @@ export const Textline = (props = {}) => {
     else return <TextSpan {...next} />
 }
 
+export const TextEllipsis = (props = {}) => {
+    return <Textline {...props} ellipsis />
+}
+
 // use it for inline code where u need to pass the style to a span
 export const TextFont = (props = {}) => {
 
@@ -85,7 +94,7 @@ export const TextCodeView = ({
     F.font = useGetFont(f.m1)
 
     B.isInline = type === 'inline' ? [s.textblock] : []
-    B.isBlock = type === 'block' ? [s.textwrap, s.overflowYs] : []
+    B.isBlock = type === 'block' ? [s.textwrap, s.overflowYScroll] : []
     B.isView = type === 'view' ? [s.textwrap] : []
 
     S.classes = [...classes, F.font, ...B.isInline, ...B.isBlock, ...B.isView].join(' ')

package/assets/root.fullstackunicorn.dev/frontend/imports/service.js

@@ -20,8 +20,8 @@ class Service {
         const response = await store.match(key)
         if (!response) return true
         const lastDay = (await response.text()).trim()
-        return true // lastDay < this.todayUTC()
+        return lastDay < this.todayUTC()
     }
 }
 
-export const service = new Service()
+export const service = new Service()

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

@@ -12,13 +12,13 @@
     <meta http-equiv="Expires" content="0">
 
     <meta content="#ffffff" name="msapplication-TileColor" />
-    <meta content="/icons/icon-512.png" name="msapplication-TileImage" />
+    <meta content="/get/media/icons/icon-512.png" name="msapplication-TileImage" />
     <meta content="Carlo" name="apple-mobile-web-app-title" />
-    <link href="/icons/icon-180.png" rel="apple-touch-icon" sizes="180x180" />
+    <link href="/get/media/icons/icon-180.png" rel="apple-touch-icon" sizes="180x180" />
     <link href="/index.webmanifest" rel="manifest" />
     
-    <link href="/favicon.ico" rel="shortcut icon" />
-    <link href="/icons/favicon.png" rel="icon" type="image/png" />
+    <link href="/get/media/icons/favicon.ico" rel="shortcut icon" />
+    <link href="/get/media/icons/favicon.png" rel="icon" type="image/png" />
     
     <!-- {{metadata}} -->
     <!-- {{languages}} -->
@@ -33,4 +33,4 @@
     <script type="module" src="/App.js"></script>
 </body>
 
-</html>
+</html>

package/assets/root.fullstackunicorn.dev/frontend/modules/base/ComingSoon.pod.js

@@ -6,8 +6,8 @@ export const ComingSoonPod = ({ picture }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.box = [s.col_cXsY, s.XY, s.marginB8]
-    S.image = [s.X, s.radiusB16]
+    S.box = [s.col_cXsY, s.XY100p, s.marginB8]
+    S.image = [s.X100p, s.radiusB16]
 
     return (
         <View classes={S.box}>

package/assets/root.fullstackunicorn.dev/frontend/modules/base/PageTitle.pod.js

@@ -6,7 +6,7 @@ export const PageTitlePod = ({ title }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.textbox = [s.row_cXcY, s.Y48, s.X]
+    S.textbox = [s.row_cXcY, s.Y48, s.X100p]
     S.text = t.root.page.title
 
     if (!title) return null

package/assets/root.fullstackunicorn.dev/frontend/modules/layout/Wrapper.pod.js

@@ -5,7 +5,7 @@ export const WrapperPod = ({ paddingX, children }) => {
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.box = [s.X]
+    S.box = [s.X100p]
     S.wrap = []
 
     I.wrap = {

package/assets/root.fullstackunicorn.dev/frontend/modules/modals/select/SelectItem.pod.js

@@ -14,7 +14,7 @@ export const SelectItemPod = ({ onPress=()=>{}, slug, value, img, isHover, setIs
     
     S.item = [s.row_sXcY, s.Y48, s.radius8, s.marginB4, ...B.background, ...B.img]
     S.imgBox = [s.X26, s.Y20, s.marginX7, s.marginY18, s.radius5, s.border1, c.line_NN, c.item_NN_B400]
-    S.img = [s.X24, s.Y18, s.overflowXYh, s.radius4]
+    S.img = [s.X24, s.Y18, s.overflowHidden, s.radius4]
     S.text = [...F.text, s.row_sXcY, s.paddingE12, c.item_NN_B400] 
     
     return (

package/assets/root.fullstackunicorn.dev/frontend/modules/modals/select/SelectPicked.pod.js

@@ -17,7 +17,7 @@ export const SelectPickedPod = ({ value, slug, img, isHover, setIsHover=()=>{},
     
     S.item = [s.row_sXcY, s.Y40, s.radius8, s.Xmin80, s.border1, c.line_NN_W500, ...B.hover, ...B.img]
     S.imgBox = [s.X26, s.Y20, s.marginX7, s.radius5, s.border1, c.line_NN, c.item_NN_B400]
-    S.img = [s.X24, s.Y18, s.overflowXYh, s.radius4]
+    S.img = [s.X24, s.Y18, s.overflowHidden, s.radius4]
     S.textBox = [s.row_cY]
     S.text = [...F.text, s.Xr, c.item_NN_B400] 
     S.icon = [s.XY40, B.icon]

package/assets/root.fullstackunicorn.dev/frontend/panels/slideshows/Slideshow.pod.js

@@ -11,8 +11,8 @@ export const SlideshowPod = ({ svg, onNext, onPrevious, aspectRatio, children })
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.slider = [s.row_cXcY, s.X, s.relative]
-    S.controls = [s.row, s.XY, s.Z3]
+    S.slider = [s.row_cXcY, s.X100p, s.positionRelative]
+    S.controls = [s.row, s.XY100p, s.Z3]
     S.one = [s.row_sXcY, s.XYr]
     S.iconOneBox = [s.XY64, s.col_cXcY, s.Z2]
     S.iconOne = [s.XY40, s.Z2, s.marginX8, c.item_NN_B400, s.radius8, c.base_WW_50]
@@ -46,7 +46,7 @@ export const SlideshowTextualPod = ({ subhead, title, description, href, fontSiz
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.box = [s.row_sXcY, s.absolute, s.XY, s.top0]
+    S.box = [s.row_sXcY, s.positionAbsolute, s.XY100p, s.top0]
     S.textual = [s.col_sXsY]
     S.outline = [s.paddingX4, s.paddingY2, s.margin4, c.item_WW]
 
@@ -76,7 +76,7 @@ export const SlideshowItemPod = ({ isActive, picture, children, aspectRatio, tra
 
     const { s, c, f, t, F, B, S, I, H } = useStyle()
 
-    S.image = [s.X]
+    S.image = [s.X100p]
     I.image = { aspectRatio }
 
     return (

package/assets/root.fullstackunicorn.dev/frontend/templates/cards.js

@@ -5,18 +5,18 @@ export const getCards = (s, c, t) => {
 
     cards.squared = {}
     cards.squared.link = []
-    cards.squared.box = [s.X, s.radius24, s.overflowXYh, c.base_WW]
-    cards.squared.pictureWrap = [s.X, s.padding8]
-    cards.squared.pictureBox = [s.X, s.ratio, s.overflowXYh, s.radius16]
-    cards.squared.picture = [s.cover]
+    cards.squared.box = [s.X100p, s.radius24, s.overflowHidden, c.base_WW]
+    cards.squared.pictureWrap = [s.X100p, s.padding8]
+    cards.squared.pictureBox = [s.X100p, s.ratio, s.overflowHidden, s.radius16]
+    cards.squared.picture = [s.objectCover]
     cards.squared.content = [s.paddingX16, s.paddingY16, s.col]
 
     cards.portrait = {}
-    cards.portrait.link = [s.Y]
-    cards.portrait.box = [s.X, s.Y, s.col, s.padding24, s.radius24, s.overflowXYh, s.border1, c.base_WW, c.line_NN_W600]
-    cards.portrait.pictureWrap = [s.X]
-    cards.portrait.pictureBox = [s.X, s.overflowXYh, s.radius16]
-    cards.portrait.picture = [s.X]
+    cards.portrait.link = [s.Y100p]
+    cards.portrait.box = [s.X100p, s.Y100p, s.col, s.padding24, s.radius24, s.overflowHidden, s.border1, c.base_WW, c.line_NN_W600]
+    cards.portrait.pictureWrap = [s.X100p]
+    cards.portrait.pictureBox = [s.X100p, s.overflowHidden, s.radius16]
+    cards.portrait.picture = [s.X100p]
     cards.portrait.content = [s.paddingT16, s.col, s.Yc] 
     cards.portrait.title = []
     cards.portrait.price = [s.marginT16]

package/assets/root.fullstackunicorn.dev/frontend/templates/page.js

@@ -6,10 +6,10 @@ export const getPage = (s, c, t) => {
 
     page.home = [s.col, s.XYc]
     page.fluid = [s.col, s.XYc]
-    page.fixed = [s.col_cXsY, s.Yc, s.Xx, s.Xmax540, s.paddingX16]
-    page.fixedL = [s.col_cXsY, s.Yc, s.Xx, s.Xmax672, s.paddingX16]
-    page.fixedXL = [s.col_cXsY, s.Yc, s.Xx, s.Xmax960, s.paddingX16]
-    page.docs = [s.col_cXsY, s.Yc, s.Xx, s.Xmax540, s.paddingX16, s.marginT16]
+    page.fixed = [s.col_cXsY, s.Yc, s.Xx100p, s.Xmax540, s.paddingX16]
+    page.fixedL = [s.col_cXsY, s.Yc, s.Xx100p, s.Xmax672, s.paddingX16]
+    page.fixedXL = [s.col_cXsY, s.Yc, s.Xx100p, s.Xmax960, s.paddingX16]
+    page.docs = [s.col_cXsY, s.Yc, s.Xx100p, s.Xmax540, s.paddingX16, s.marginT16]
     page.card = [s.col_cX, s.Yc, s.paddingX16]
 
     return page

package/assets/root.fullstackunicorn.dev/frontend/templates/root.js

@@ -21,7 +21,7 @@ export const getRoot = (s, c, t) => {
     root.cards.text.title = [s.textS, s.fs16, s.lh24, s.fw700]
     root.cards.text.description = [s.textS, s.fs16, s.lh20, s.fw400]
     root.cards.text.label = [s.textS, s.fs16, s.lh24, s.fw600]
-    root.cards.box = [s.col, s.X]
+    root.cards.box = [s.col, s.X100p]
     root.cards.top = [s.col, s.paddingT16, s.paddingB8]
     root.cards.title = [...root.cards.text.title, c.item_NN_B400]
     root.cards.description = [...root.cards.text.description, c.item_NN_B400]

package/assets/root.fullstackunicorn.dev/manager/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/manager/server/router.js

@@ -1,11 +1,21 @@
 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 { sync } from '#@/modules/sync.server.js'
 import { clone } from '#@/modules/clone.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 ]
+
 rs.sync_current = {}
 rs.sync_current.method = 'post'
 rs.sync_current.name = 'sync_current'
@@ -55,4 +65,4 @@ rs.clone.funcs = [rs.clone.auth, rs.clone.resolve]
 
 const router = Router()
 for ( const r of Object.values(rs)) router[r.method](r.path, ...r.funcs)
-export { router, rs as routes }
+export { router, rs as routes }

package/assets/root.fullstackunicorn.dev/workspace/config/workers.json

@@ -15,6 +15,12 @@
             "input": "media/trademarks",
             "output": "get/media/trademarks"
         },
+        "media/graphic": {
+            "worker": "media_graphic",
+            "input": "media/graphic",
+            "output": "get/media/graphic",
+            "file": "get/data/root/statics/@graphic.json"
+        },
         "media/images": {
             "worker": "media_images",
             "input": "media/images",
@@ -25,6 +31,11 @@
             "input": "media/covers",
             "output": "get/media/covers"
         },
+        "docs/pdf": {
+            "worker": "docs_pdf",
+            "input": "docs/pdf",
+            "output": "get/docs/pdf"
+        },
         "data/root": {
             "worker": "data_statics",
             "input": "data/root",
@@ -51,7 +62,8 @@
             "isPublisher": true,
             "worker": "tabulars",
             "input":"tabulars_data_content",
-            "output": "get/data/content"
+            "output": "get/data/content",
+            "outputModules": "get/data/modules"
         }
     }
-}
+}

package/index.cmd.help.js

@@ -0,0 +1,33 @@
+export const help = `
+@fullstackunicorn/create-root
+
+Create a new FullstackUnicorn root scaffold.
+
+Usage:
+  yarn create @fullstackunicorn/root <foldername>
+
+Example:
+  yarn create @fullstackunicorn/root example.project.dev
+
+What this command does:
+  - creates <foldername> in the current working directory
+  - copies the bundled root scaffold
+  - does not initialize dependencies
+  - does not copy client data
+  - does not run root upgrade
+
+After create-root:
+  1. copy the prepared client root.config.app.js into <foldername>/root.config.app.js
+  2. copy prepared icons into <foldername>/workspace/volume/media/icons/
+  3. copy prepared trademarks into <foldername>/workspace/volume/media/trademarks/
+  4. cd <foldername>
+  5. yarn initialize:all
+  6. yarn root upgrade
+
+AI safety rules:
+  - always ask for the target parent path before running this command
+  - always ask for the client data folder before initialization or root upgrade
+  - the client data folder must contain root.config.app.js, icons/, and trademarks/
+  - do not run this command with --help, -help, or help as a folder name
+  - options beginning with "-" are not valid folder names
+`

package/index.cmd.js

@@ -3,17 +3,34 @@
 import '@fullstackunicorn/initialize'
 F3.service = '@fullstackunicorn/create-root'
 import { init } from '#@/index.js'
+import { help } from '#@/index.cmd.help.js'
 
 const [nodePath, nodeScriptPath, foldername] = process.argv
 
+const helpArgs = new Set(['help', '-help', '--help'])
+
+const printHelp = () => console.log(help)
+
 try {
 
+    if (helpArgs.has(foldername)) {
+        printHelp()
+        process.exit(0)
+    }
+
     if (!F3.str.isGood(foldername)) {
         console.error('❌ Error: missing foldername')
         console.error('✅ Suggestion:')
         console.error('👉 yarn create @fullstackunicorn/root foldername')
-        console.error('👉 npm create @fullstackunicorn/root foldername')
-        console.error('👉 npx @fullstackunicorn/create-root foldername')
+        console.error('👉 yarn create @fullstackunicorn/root --help')
+        process.exit(1)
+    }
+
+    if (foldername.startsWith('-')) {
+        console.error(`❌ Error: invalid option "${foldername}"`)
+        console.error('✅ Suggestion:')
+        console.error('👉 yarn create @fullstackunicorn/root foldername')
+        console.error('👉 yarn create @fullstackunicorn/root --help')
         process.exit(1)
     }
 
@@ -23,4 +40,4 @@ try {
 } catch (err) {
     console.error('❌ Error:', err)
     process.exit(1)
-}
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.26",
+  "version": "1.0.28",
   "name": "@fullstackunicorn/create-root",
   "author": "lucanigido (https://fullstackunicorn.dev/author/lucanigido)",
   "description": "create-root: bootstrapper that writes config assets and installs @fullstackunicorn/root",
@@ -9,6 +9,7 @@
   "readme": "package.md",
   "files": [
     "index.cmd.js",
+    "index.cmd.help.js",
     "index.def.js",
     "index.dep.js",
     "index.js",