@sybilion/uilib 1.0.26 → 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,9 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, 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 { 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',
@@ -45,10 +46,13 @@ function isTrustedParentMessage(event) {
         return false;
     return true;
 }
-function MiniAppRoot({ children, className, appId, onThemeChange, }) {
+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;
@@ -88,7 +92,7 @@ function MiniAppRoot({ children, className, 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: cn(S.root, className), innerClassName: S.inner, offset: { y: { before: 50, after: 50 } }, autoHide: true, 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/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/mini-app/MiniAppRoot.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 import { type ThemeSyncPayload } from './miniAppProtocol';
+import { type MiniAppThemeConfig } from './miniAppThemeConfig';
 export type MiniAppShellContextValue = {
     theme: ThemeSyncPayload;
 };
@@ -11,5 +12,7 @@ export type MiniAppRootProps = {
     /** 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, className, 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.26",
+  "version": "1.0.27",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/docs/pages/MiniAppRootPage.tsx

@@ -1,4 +1,5 @@
 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';
@@ -44,7 +45,11 @@ export default function MiniAppRootPage() {
         }
       `}</style>
       <PageContentSection style={{ maxHeight: '500px' }}>
-        <MiniAppRoot appId="uilib-docs" className="mini-app-root-page">
+        <MiniAppRoot
+          appId="uilib-docs"
+          className="mini-app-root-page"
+          getThemeConfig={isDarkMode => getThemeConfig(isDarkMode)}
+        >
           <MiniAppThemeDemo />
         </MiniAppRoot>
       </PageContentSection>

package/src/mini-app/MiniAppRoot.tsx

@@ -10,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 {
@@ -20,6 +20,10 @@ import {
   parseThemeSyncMessage,
   resolveParentOriginFromReferrer,
 } from './miniAppProtocol';
+import {
+  type MiniAppThemeConfig,
+  getDefaultMiniAppThemeConfig,
+} from './miniAppThemeConfig';
 
 const defaultTheme: ThemeSyncPayload = {
   mode: 'light',
@@ -76,6 +80,8 @@ export type MiniAppRootProps = {
   /** 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({
@@ -83,6 +89,7 @@ export function MiniAppRoot({
   className,
   appId,
   onThemeChange,
+  getThemeConfig,
 }: MiniAppRootProps): React.ReactElement {
   const [theme, setTheme] = useState<ThemeSyncPayload>(() =>
     isEmbeddedMiniApp() ? defaultTheme : themeFromDocument(),
@@ -90,6 +97,16 @@ export function MiniAppRoot({
   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 } : {};
@@ -131,6 +148,7 @@ export function MiniAppRoot({
 
   return (
     <MiniAppShellContext.Provider value={ctx}>
+      <Theme config={currThemeConfig} />
       <Scroll
         y
         fadeSize="l"

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
+>;