@sybilion/uilib 1.0.23 → 1.0.25

package/assets/mini-app-global.css

@@ -140,11 +140,11 @@
   --page-x-padding: var(--p-16);
   --page-y-padding: var(--p-12);
   --page-color: oklch(1 0 0);
-  --page-color-alpha-800: oklch(0.99 0 0 / 0.8);
+  --page-color-alpha-800: oklch(from var(--page-color) l c h / 0.8);
   --background: var(--sb-slate-100);
-  --background-alpha-800: var(--sb-slate-100);
-  --background-alpha-700: oklch(0.9622 0.0035 219.53 / 0.7);
-  --background-alpha-500: oklch(0.9622 0.0035 219.53 / 0.5);
+  --background-alpha-800: oklch(from var(--background) l c h / 0.8);
+  --background-alpha-700: oklch(from var(--background) l c h / 0.7);
+  --background-alpha-500: oklch(from var(--background) l c h / 0.5);
   --foreground: oklch(0.15 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.15 0 0);
@@ -197,11 +197,11 @@
 
 .dark {
   --page-color: oklch(0.14 0 0);
-  --page-color-alpha-800: oklch(0.14 0 0 / 0.95);
+  --page-color-alpha-800: oklch(from var(--page-color) l c h / 0.95);
   --background: oklch(0.22 0 0);
-  --background-alpha-800: oklch(0.2242 0 0 / 0.8);
-  --background-alpha-700: oklch(0.22 0 0 / 0.7);
-  --background-alpha-500: oklch(0.22 0 0 / 0.5);
+  --background-alpha-800: oklch(from var(--background) l c h / 0.95);
+  --background-alpha-700: oklch(from var(--background) l c h / 0.7);
+  --background-alpha-500: oklch(from var(--background) l c h / 0.5);
   --foreground: oklch(0.95 0 0);
   --card: oklch(0.1 0 0);
   --card-foreground: oklch(0.95 0 0);

package/dist/esm/mini-app/MiniAppRoot.js

@@ -1,5 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { Scroll } from '@homecode/ui';
+import S from './MiniAppRoot.styl.js';
 import { resolveParentOriginFromReferrer, applyThemeToDocument, buildReadyMessage, parseThemeSyncMessage } from './miniAppProtocol.js';
 
 const defaultTheme = {
@@ -71,7 +73,7 @@ function MiniAppRoot({ children, appId, onThemeChange, }) {
         return () => window.removeEventListener('load', sendReady);
     }, [sendReady]);
     const ctx = useMemo(() => ({ theme }), [theme]);
-    return (jsx(MiniAppShellContext.Provider, { value: ctx, children: children }));
+    return (jsx(MiniAppShellContext.Provider, { value: ctx, children: jsx(Scroll, { y: true, fadeSize: "l", className: S.root, children: children }) }));
 }
 
 export { MiniAppRoot, useMiniAppShellTheme };

package/dist/esm/mini-app/MiniAppRoot.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.MiniAppRoot_root__UVklz{display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative;width:100%}@media (max-width:768px){.MiniAppRoot_root__UVklz{flex:1;height:auto;min-height:0}}";
+var S = {"root":"MiniAppRoot_root__UVklz"};
+styleInject(css_248z);
+
+export { S as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/mini-app/MiniAppRoot.styl

@@ -0,0 +1,15 @@
+@import 'lib/theme.styl'
+
+.root
+  overflow hidden
+
+  position relative
+  display flex
+  width 100%
+  height 100vh
+  flex-direction column
+
+  @media (max-width MOBILE)
+    height auto
+    flex 1
+    min-height 0

package/src/mini-app/MiniAppRoot.styl.d.ts

@@ -0,0 +1,2 @@
+const mod: { [cls: string]: string }
+export default mod

package/src/mini-app/MiniAppRoot.tsx

@@ -9,6 +9,9 @@ import React, {
   useState,
 } from 'react';
 
+import { Scroll } from '@homecode/ui';
+
+import S from './MiniAppRoot.styl';
 import {
   type ThemeSyncPayload,
   applyThemeToDocument,
@@ -109,7 +112,9 @@ export function MiniAppRoot({
 
   return (
     <MiniAppShellContext.Provider value={ctx}>
-      {children}
+      <Scroll y fadeSize="l" className={S.root}>
+        {children}
+      </Scroll>
     </MiniAppShellContext.Provider>
   );
 }