@sybilion/uilib 1.0.24 → 1.0.26

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

@@ -1,11 +1,26 @@
 import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
 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 = {
     mode: 'light',
     isDarkMode: false,
 };
+function isEmbeddedMiniApp() {
+    return typeof window !== 'undefined' && window.parent !== window;
+}
+function themeFromDocument() {
+    if (typeof document === 'undefined')
+        return defaultTheme;
+    const isDark = document.documentElement.classList.contains('dark');
+    return {
+        mode: isDark ? 'dark' : 'light',
+        isDarkMode: isDark,
+    };
+}
 const MiniAppShellContext = createContext(null);
 function useMiniAppShellTheme() {
     const v = useContext(MiniAppShellContext);
@@ -30,8 +45,8 @@ function isTrustedParentMessage(event) {
         return false;
     return true;
 }
-function MiniAppRoot({ children, appId, onThemeChange, }) {
-    const [theme, setTheme] = useState(defaultTheme);
+function MiniAppRoot({ children, className, appId, onThemeChange, }) {
+    const [theme, setTheme] = useState(() => isEmbeddedMiniApp() ? defaultTheme : themeFromDocument());
     const onThemeChangeRef = useRef(onThemeChange);
     onThemeChangeRef.current = onThemeChange;
     const sendReady = useCallback(() => {
@@ -48,6 +63,8 @@ function MiniAppRoot({ children, appId, onThemeChange, }) {
         }
     }, [appId]);
     useEffect(() => {
+        if (!isEmbeddedMiniApp())
+            return;
         applyThemeToDocument(theme.mode);
     }, [theme.mode]);
     useEffect(() => {
@@ -71,7 +88,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: cn(S.root, className), innerClassName: S.inner, offset: { y: { before: 50, after: 50 } }, autoHide: true, 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{height:100vh;min-height:0;overflow:hidden;position:relative;width:100%}@media (max-width:768px){.MiniAppRoot_root__UVklz{flex:1;height:auto;min-height:0}}.MiniAppRoot_inner__1ZFfl{box-sizing:border-box;max-height:100%;padding:var(--page-y-padding) var(--page-x-padding);width:100%}";
+var S = {"root":"MiniAppRoot_root__UVklz","inner":"MiniAppRoot_inner__1ZFfl"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/types/src/docs/pages/MiniAppRootPage.d.ts

@@ -0,0 +1 @@
+export default function MiniAppRootPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/mini-app/MiniAppRoot.d.ts

@@ -7,8 +7,9 @@ export type MiniAppShellContextValue = {
 export declare function useMiniAppShellTheme(): MiniAppShellContextValue;
 export type MiniAppRootProps = {
     children: ReactNode;
+    className?: string;
     /** Included in READY payload when set. */
     appId?: string;
     onThemeChange?: (theme: ThemeSyncPayload) => void;
 };
-export declare function MiniAppRoot({ children, appId, onThemeChange, }: MiniAppRootProps): React.ReactElement;
+export declare function MiniAppRoot({ children, className, appId, onThemeChange, }: MiniAppRootProps): React.ReactElement;

package/package.json

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

package/src/docs/pages/MiniAppRootPage.tsx

@@ -0,0 +1,53 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { MiniAppRoot, useMiniAppShellTheme } from '#uilib/mini-app';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+function MiniAppThemeDemo() {
+  const { theme } = useMiniAppShellTheme();
+
+  return (
+    <>
+      <p style={{ margin: 0 }}>
+        Context theme: <code>{theme.mode}</code>, isDarkMode:{' '}
+        <code>{String(theme.isDarkMode)}</code>
+      </p>
+      <p style={{ margin: 0, color: 'var(--muted-foreground)' }}>
+        Long content below — scroll should stay inside the mini-app shell (not
+        only the docs page), matching iframe workspace apps.
+      </p>
+      {Array.from({ length: 36 }, (_, i) => (
+        <p key={i} style={{ margin: 0, lineHeight: 1.6 }}>
+          Block {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua.
+        </p>
+      ))}
+    </>
+  );
+}
+
+export default function MiniAppRootPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'MiniAppRoot' }]}
+        title="MiniAppRoot"
+        subheader="Workspace mini-app shell: syncs document light/dark from parent THEME_SYNC postMessage, exposes theme via useMiniAppShellTheme. When embedded in Sybilion, child posts READY to parent; on this top-level docs page READY is skipped (no iframe parent)."
+        actions={<DocsHeaderActions />}
+      />
+      <style>{`
+        .mini-app-root-page {
+          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+          border-radius: var(--p-4);
+        }
+      `}</style>
+      <PageContentSection style={{ maxHeight: '500px' }}>
+        <MiniAppRoot appId="uilib-docs" className="mini-app-root-page">
+          <MiniAppThemeDemo />
+        </MiniAppRoot>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/registry.ts

@@ -156,6 +156,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Layout',
     load: () => import('./pages/InteractiveContentPage'),
   },
+  {
+    slug: 'mini-app-root',
+    title: 'MiniAppRoot',
+    section: 'Layout',
+    load: () => import('./pages/MiniAppRootPage'),
+  },
   {
     slug: 'label',
     title: 'Label',

package/src/mini-app/MiniAppRoot.styl

@@ -0,0 +1,24 @@
+@import 'lib/theme.styl'
+
+// Scroll root must stay flex row: [scrollable inner | y-bar]. column stacks inner
+// + scrollbar → inner grows with content → overflow-y never engages (clips via overflow:hidden).
+.root
+  overflow hidden
+
+  position relative
+  width 100%
+  height 100vh
+  min-height 0
+
+  @media (max-width MOBILE)
+    height auto
+    flex 1
+    min-height 0
+
+// Match PageScroll: constrain inner so homecode Scroll max-height:100% + overflow-y work
+.inner
+  width 100%
+  // min-height 0
+  max-height 100%
+  box-sizing border-box
+  padding var(--page-y-padding) var(--page-x-padding)

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

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'inner': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/mini-app/MiniAppRoot.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import type { ReactNode } from 'react';
 import React, {
   createContext,
@@ -9,6 +10,9 @@ import React, {
   useState,
 } from 'react';
 
+import { Scroll } from '@homecode/ui';
+
+import S from './MiniAppRoot.styl';
 import {
   type ThemeSyncPayload,
   applyThemeToDocument,
@@ -22,6 +26,19 @@ const defaultTheme: ThemeSyncPayload = {
   isDarkMode: false,
 };
 
+function isEmbeddedMiniApp(): boolean {
+  return typeof window !== 'undefined' && window.parent !== window;
+}
+
+function themeFromDocument(): ThemeSyncPayload {
+  if (typeof document === 'undefined') return defaultTheme;
+  const isDark = document.documentElement.classList.contains('dark');
+  return {
+    mode: isDark ? 'dark' : 'light',
+    isDarkMode: isDark,
+  };
+}
+
 export type MiniAppShellContextValue = {
   theme: ThemeSyncPayload;
 };
@@ -55,6 +72,7 @@ function isTrustedParentMessage(event: MessageEvent): boolean {
 
 export type MiniAppRootProps = {
   children: ReactNode;
+  className?: string;
   /** Included in READY payload when set. */
   appId?: string;
   onThemeChange?: (theme: ThemeSyncPayload) => void;
@@ -62,10 +80,13 @@ export type MiniAppRootProps = {
 
 export function MiniAppRoot({
   children,
+  className,
   appId,
   onThemeChange,
 }: MiniAppRootProps): React.ReactElement {
-  const [theme, setTheme] = useState<ThemeSyncPayload>(defaultTheme);
+  const [theme, setTheme] = useState<ThemeSyncPayload>(() =>
+    isEmbeddedMiniApp() ? defaultTheme : themeFromDocument(),
+  );
   const onThemeChangeRef = useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
 
@@ -83,6 +104,7 @@ export function MiniAppRoot({
   }, [appId]);
 
   useEffect(() => {
+    if (!isEmbeddedMiniApp()) return;
     applyThemeToDocument(theme.mode);
   }, [theme.mode]);
 
@@ -109,7 +131,16 @@ export function MiniAppRoot({
 
   return (
     <MiniAppShellContext.Provider value={ctx}>
-      {children}
+      <Scroll
+        y
+        fadeSize="l"
+        className={cn(S.root, className)}
+        innerClassName={S.inner}
+        offset={{ y: { before: 50, after: 50 } }}
+        autoHide
+      >
+        {children}
+      </Scroll>
     </MiniAppShellContext.Provider>
   );
 }