@sybilion/uilib 1.0.25 → 1.0.26

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

@@ -1,4 +1,5 @@
 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';
@@ -8,6 +9,18 @@ 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);
@@ -32,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(() => {
@@ -50,6 +63,8 @@ function MiniAppRoot({ children, appId, onThemeChange, }) {
         }
     }, [appId]);
     useEffect(() => {
+        if (!isEmbeddedMiniApp())
+            return;
         applyThemeToDocument(theme.mode);
     }, [theme.mode]);
     useEffect(() => {
@@ -73,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: jsx(Scroll, { y: true, fadeSize: "l", className: S.root, 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

@@ -1,7 +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"};
+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.25",
+  "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

@@ -1,15 +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
-  display flex
   width 100%
   height 100vh
-  flex-direction column
+  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

@@ -1,2 +1,8 @@
-const mod: { [cls: string]: string }
-export default mod
+// 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,
@@ -25,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;
 };
@@ -58,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;
@@ -65,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;
 
@@ -86,6 +104,7 @@ export function MiniAppRoot({
   }, [appId]);
 
   useEffect(() => {
+    if (!isEmbeddedMiniApp()) return;
     applyThemeToDocument(theme.mode);
   }, [theme.mode]);
 
@@ -112,7 +131,14 @@ export function MiniAppRoot({
 
   return (
     <MiniAppShellContext.Provider value={ctx}>
-      <Scroll y fadeSize="l" className={S.root}>
+      <Scroll
+        y
+        fadeSize="l"
+        className={cn(S.root, className)}
+        innerClassName={S.inner}
+        offset={{ y: { before: 50, after: 50 } }}
+        autoHide
+      >
         {children}
       </Scroll>
     </MiniAppShellContext.Provider>