@sybilion/uilib 1.0.25 → 1.0.27

package/assets/mini-app-global.css

@@ -139,12 +139,12 @@
   --header-height: 94px;
   --page-x-padding: var(--p-16);
   --page-y-padding: var(--p-12);
-  --page-color: oklch(1 0 0);
-  --page-color-alpha-800: oklch(from var(--page-color) l c h / 0.8);
-  --background: var(--sb-slate-100);
-  --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);
+  --page-color: var(--sb-slate-100);
+  --page-color-alpha-800: var(--sb-slate-100);
+  --background: oklch(1 0 0);
+  --background-alpha-800: oklch(0.99 0 0 / 0.8);
+  --background-alpha-700: oklch(0.99 0 0 / 0.7);
+  --background-alpha-500: oklch(0.99 0 0 / 0.5);
   --foreground: oklch(0.15 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.15 0 0);
@@ -196,12 +196,12 @@
 }
 
 .dark {
-  --page-color: oklch(0.14 0 0);
-  --page-color-alpha-800: oklch(from var(--page-color) l c h / 0.95);
-  --background: oklch(0.22 0 0);
-  --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);
+  --page-color: oklch(0.22 0 0);
+  --page-color-alpha-800: oklch(0.2242 0 0 / 0.8);
+  --background: oklch(0.14 0 0);
+  --background-alpha-800: oklch(0.14 0 0 / 0.95);
+  --background-alpha-700: oklch(0.14 0 0 / 0.7);
+  --background-alpha-500: oklch(0.14 0 0 / 0.5);
   --foreground: oklch(0.95 0 0);
   --card: oklch(0.1 0 0);
   --card-foreground: oklch(0.95 0 0);

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { MINIAPP_CHANNEL, MINIAPP_VERSION, applyThemeToDocument, buildReadyMessage, parseThemeSyncMessage, resolveParentOriginFromReferrer } from './mini-app/miniAppProtocol.js';
+export { getDefaultMiniAppThemeConfig } from './mini-app/miniAppThemeConfig.js';
 export { MiniAppRoot, useMiniAppShellTheme } from './mini-app/MiniAppRoot.js';
 export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';

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

@@ -1,13 +1,27 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { Scroll } from '@homecode/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { Theme, Scroll } from '@homecode/ui';
 import S from './MiniAppRoot.styl.js';
 import { resolveParentOriginFromReferrer, applyThemeToDocument, buildReadyMessage, parseThemeSyncMessage } from './miniAppProtocol.js';
+import { getDefaultMiniAppThemeConfig } from './miniAppThemeConfig.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);
@@ -32,10 +46,13 @@ function isTrustedParentMessage(event) {
         return false;
     return true;
 }
-function MiniAppRoot({ children, appId, onThemeChange, }) {
-    const [theme, setTheme] = useState(defaultTheme);
+function MiniAppRoot({ children, className, appId, onThemeChange, getThemeConfig, }) {
+    const [theme, setTheme] = useState(() => isEmbeddedMiniApp() ? defaultTheme : themeFromDocument());
     const onThemeChangeRef = useRef(onThemeChange);
     onThemeChangeRef.current = onThemeChange;
+    const getThemeConfigRef = useRef(getThemeConfig ?? getDefaultMiniAppThemeConfig);
+    getThemeConfigRef.current = getThemeConfig ?? getDefaultMiniAppThemeConfig;
+    const currThemeConfig = useMemo(() => getThemeConfigRef.current(theme.isDarkMode), [theme.isDarkMode]);
     const sendReady = useCallback(() => {
         if (!window.parent || window.parent === window)
             return;
@@ -50,6 +67,8 @@ function MiniAppRoot({ children, appId, onThemeChange, }) {
         }
     }, [appId]);
     useEffect(() => {
+        if (!isEmbeddedMiniApp())
+            return;
         applyThemeToDocument(theme.mode);
     }, [theme.mode]);
     useEffect(() => {
@@ -73,7 +92,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 (jsxs(MiniAppShellContext.Provider, { value: ctx, children: [jsx(Theme, { config: currThemeConfig }), 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/mini-app/miniAppThemeConfig.js

@@ -0,0 +1,40 @@
+import { ThemeHelpers, ThemeDefaults } from '@homecode/ui';
+
+const { colors, getColors, getConfig } = ThemeDefaults;
+const defaultPalette = getColors();
+const colorsConfig = {
+    light: {
+        ...ThemeHelpers.colorsConfigToVars({
+            ...getColors({
+                accent: colors.dark,
+                decent: colors.light,
+            }),
+        }),
+    },
+    dark: {
+        ...ThemeHelpers.colorsConfigToVars({
+            ...getColors({
+                accent: colors.light,
+                decent: colors.dark,
+            }),
+        }),
+    },
+};
+/** Homecode `<Theme config={...}>` shape for workspace mini-apps (generic palette). */
+function getDefaultMiniAppThemeConfig(isDarkMode) {
+    return {
+        ...getConfig(),
+        ...colorsConfig[isDarkMode ? 'dark' : 'light'],
+        ...ThemeHelpers.colorsConfigToVars({
+            active: {
+                color: '#00a9c7',
+                mods: {
+                    // @ts-ignore — extend defaults so --active-color-alpha-* variants match Homecode
+                    alpha: [0, 50, 100, 200, ...defaultPalette.active.mods.alpha],
+                },
+            },
+        }),
+    };
+}
+
+export { getDefaultMiniAppThemeConfig };

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

@@ -1,14 +1,18 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import { type ThemeSyncPayload } from './miniAppProtocol';
+import { type MiniAppThemeConfig } from './miniAppThemeConfig';
 export type MiniAppShellContextValue = {
     theme: ThemeSyncPayload;
 };
 export declare function useMiniAppShellTheme(): MiniAppShellContextValue;
 export type MiniAppRootProps = {
     children: ReactNode;
+    className?: string;
     /** Included in READY payload when set. */
     appId?: string;
     onThemeChange?: (theme: ThemeSyncPayload) => void;
+    /** Overrides `@homecode/ui` `<Theme config>` builder (defaults to generic mini-app palette). */
+    getThemeConfig?: (isDarkMode: boolean) => MiniAppThemeConfig;
 };
-export declare function MiniAppRoot({ children, appId, onThemeChange, }: MiniAppRootProps): React.ReactElement;
+export declare function MiniAppRoot({ children, className, appId, onThemeChange, getThemeConfig, }: MiniAppRootProps): React.ReactElement;

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

@@ -1,4 +1,6 @@
 export { applyThemeToDocument, buildReadyMessage, MINIAPP_CHANNEL, MINIAPP_VERSION, parseThemeSyncMessage, resolveParentOriginFromReferrer, } from './miniAppProtocol';
 export type { MiniAppMessageReady, MiniAppMessageThemeSync, ThemeSyncPayload, } from './miniAppProtocol';
-export { MiniAppRoot, useMiniAppShellTheme, } from './MiniAppRoot';
-export type { MiniAppRootProps, MiniAppShellContextValue, } from './MiniAppRoot';
+export { getDefaultMiniAppThemeConfig } from './miniAppThemeConfig';
+export type { MiniAppThemeConfig } from './miniAppThemeConfig';
+export { MiniAppRoot, useMiniAppShellTheme } from './MiniAppRoot';
+export type { MiniAppRootProps, MiniAppShellContextValue } from './MiniAppRoot';

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

@@ -0,0 +1,3 @@
+/** Homecode `<Theme config={...}>` shape for workspace mini-apps (generic palette). */
+export declare function getDefaultMiniAppThemeConfig(isDarkMode: boolean): any;
+export type MiniAppThemeConfig = ReturnType<typeof getDefaultMiniAppThemeConfig>;

package/docs/workspace-mini-apps.md

@@ -1,6 +1,6 @@
 # Workspace mini-apps (Sybilion iframe)
 
-The Sybilion client embeds mini-apps in an **iframe** and syncs theme with `postMessage`. Use **`MiniAppRoot`** so this document’s `<html>` gets **`light` / `dark`** (uilib uses `.dark { … }` for tokens).
+The Sybilion client embeds mini-apps in an **iframe** and syncs theme with `postMessage`. Use **`MiniAppRoot`** so this document’s `<html>` gets **`light` / `dark`** (uilib uses `.dark { … }` for tokens), and so **`@homecode/ui`’s `<Theme />`** runs with vars matching that mode (`getDefaultMiniAppThemeConfig`; override via props if needed).
 
 1. Import **`@sybilion/uilib/mini-app-global.css`** (slim tokens + font imports; ships in this package).
 2. Wrap the React root:
@@ -18,4 +18,6 @@ createRoot(document.getElementById('root')!).render(
 
 3. Optional: **`useMiniAppShellTheme()`** for **`{ theme: { mode, isDarkMode } }`** under the provider (object leaves room for more shell fields later).
 
+4. Optional: **`getThemeConfig`** on **`MiniAppRoot`** — passed **`(isDarkMode) => config`** like the Sybilion app’s **`getThemeConfig`** from **`src/lib/theme.ts`**, so iframe UI matches host accent/danger tokens.
+
 **Bridge:** `MiniAppRoot` handles `THEME_SYNC`, sends `READY` on mount/load, and checks `event.source === window.parent` plus `document.referrer` origin when present. If the referrer is missing (strict `Referrer-Policy`), `READY` may use `targetOrigin` `*` — document that for your host.

package/package.json

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

package/src/docs/pages/MiniAppRootPage.tsx

@@ -0,0 +1,58 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { getThemeConfig } from '#uilib/docs/lib/theme';
+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"
+          getThemeConfig={isDarkMode => getThemeConfig(isDarkMode)}
+        >
+          <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,
@@ -9,7 +10,7 @@ import React, {
   useState,
 } from 'react';
 
-import { Scroll } from '@homecode/ui';
+import { Scroll, Theme } from '@homecode/ui';
 
 import S from './MiniAppRoot.styl';
 import {
@@ -19,12 +20,29 @@ import {
   parseThemeSyncMessage,
   resolveParentOriginFromReferrer,
 } from './miniAppProtocol';
+import {
+  type MiniAppThemeConfig,
+  getDefaultMiniAppThemeConfig,
+} from './miniAppThemeConfig';
 
 const defaultTheme: ThemeSyncPayload = {
   mode: 'light',
   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,20 +76,37 @@ function isTrustedParentMessage(event: MessageEvent): boolean {
 
 export type MiniAppRootProps = {
   children: ReactNode;
+  className?: string;
   /** Included in READY payload when set. */
   appId?: string;
   onThemeChange?: (theme: ThemeSyncPayload) => void;
+  /** Overrides `@homecode/ui` `<Theme config>` builder (defaults to generic mini-app palette). */
+  getThemeConfig?: (isDarkMode: boolean) => MiniAppThemeConfig;
 };
 
 export function MiniAppRoot({
   children,
+  className,
   appId,
   onThemeChange,
+  getThemeConfig,
 }: MiniAppRootProps): React.ReactElement {
-  const [theme, setTheme] = useState<ThemeSyncPayload>(defaultTheme);
+  const [theme, setTheme] = useState<ThemeSyncPayload>(() =>
+    isEmbeddedMiniApp() ? defaultTheme : themeFromDocument(),
+  );
   const onThemeChangeRef = useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
 
+  const getThemeConfigRef = useRef(
+    getThemeConfig ?? getDefaultMiniAppThemeConfig,
+  );
+  getThemeConfigRef.current = getThemeConfig ?? getDefaultMiniAppThemeConfig;
+
+  const currThemeConfig = useMemo(
+    () => getThemeConfigRef.current(theme.isDarkMode),
+    [theme.isDarkMode],
+  );
+
   const sendReady = useCallback(() => {
     if (!window.parent || window.parent === window) return;
     const payload = appId ? { appId } : {};
@@ -86,6 +121,7 @@ export function MiniAppRoot({
   }, [appId]);
 
   useEffect(() => {
+    if (!isEmbeddedMiniApp()) return;
     applyThemeToDocument(theme.mode);
   }, [theme.mode]);
 
@@ -112,7 +148,15 @@ export function MiniAppRoot({
 
   return (
     <MiniAppShellContext.Provider value={ctx}>
-      <Scroll y fadeSize="l" className={S.root}>
+      <Theme config={currThemeConfig} />
+      <Scroll
+        y
+        fadeSize="l"
+        className={cn(S.root, className)}
+        innerClassName={S.inner}
+        offset={{ y: { before: 50, after: 50 } }}
+        autoHide
+      >
         {children}
       </Scroll>
     </MiniAppShellContext.Provider>

package/src/mini-app/index.ts

@@ -11,11 +11,7 @@ export type {
   MiniAppMessageThemeSync,
   ThemeSyncPayload,
 } from './miniAppProtocol';
-export {
-  MiniAppRoot,
-  useMiniAppShellTheme,
-} from './MiniAppRoot';
-export type {
-  MiniAppRootProps,
-  MiniAppShellContextValue,
-} from './MiniAppRoot';
+export { getDefaultMiniAppThemeConfig } from './miniAppThemeConfig';
+export type { MiniAppThemeConfig } from './miniAppThemeConfig';
+export { MiniAppRoot, useMiniAppShellTheme } from './MiniAppRoot';
+export type { MiniAppRootProps, MiniAppShellContextValue } from './MiniAppRoot';

package/src/mini-app/miniAppThemeConfig.ts

@@ -0,0 +1,45 @@
+import { ThemeDefaults, ThemeHelpers } from '@homecode/ui';
+
+const { colors, getColors, getConfig } = ThemeDefaults;
+
+const defaultPalette = getColors();
+
+const colorsConfig = {
+  light: {
+    ...ThemeHelpers.colorsConfigToVars({
+      ...getColors({
+        accent: colors.dark,
+        decent: colors.light,
+      }),
+    }),
+  },
+  dark: {
+    ...ThemeHelpers.colorsConfigToVars({
+      ...getColors({
+        accent: colors.light,
+        decent: colors.dark,
+      }),
+    }),
+  },
+};
+
+/** Homecode `<Theme config={...}>` shape for workspace mini-apps (generic palette). */
+export function getDefaultMiniAppThemeConfig(isDarkMode: boolean) {
+  return {
+    ...getConfig(),
+    ...colorsConfig[isDarkMode ? 'dark' : 'light'],
+    ...ThemeHelpers.colorsConfigToVars({
+      active: {
+        color: '#00a9c7',
+        mods: {
+          // @ts-ignore — extend defaults so --active-color-alpha-* variants match Homecode
+          alpha: [0, 50, 100, 200, ...defaultPalette.active.mods.alpha],
+        },
+      },
+    }),
+  };
+}
+
+export type MiniAppThemeConfig = ReturnType<
+  typeof getDefaultMiniAppThemeConfig
+>;