@sybilion/uilib 1.1.0 → 1.2.1

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

@@ -1,98 +0,0 @@
-import { buildDataRequestMessage, resolveParentOriginFromReferrer, isTrustedMiniAppParentMessage, parseDataResponseMessage } from './miniAppProtocol.js';
-
-const DEFAULT_TIMEOUT_MS = 10_000;
-/** One listener per browsing context; tracks in-flight bridge requests by `requestId`. */
-function createMiniAppDataClient(options) {
-    const timeoutMs = options?.timeoutMs ?? DEFAULT_TIMEOUT_MS;
-    const pending = new Map();
-    let listening = false;
-    const settle = (rid, fn) => {
-        const p = pending.get(rid);
-        if (!p)
-            return;
-        clearTimeout(p.timer);
-        pending.delete(rid);
-        fn(p);
-    };
-    function ensureListener() {
-        if (listening || typeof window === 'undefined')
-            return;
-        listening = true;
-        window.addEventListener('message', (event) => {
-            if (!isTrustedMiniAppParentMessage(event))
-                return;
-            const msg = parseDataResponseMessage(event.data);
-            if (!msg)
-                return;
-            settle(msg.requestId, p => {
-                if (msg.ok) {
-                    p.resolve(msg.result);
-                }
-                else {
-                    p.reject(new Error(typeof msg.error === 'string'
-                        ? msg.error
-                        : 'Mini-app data request failed'));
-                }
-            });
-        });
-    }
-    function request(payload) {
-        if (typeof window === 'undefined' || window.parent === window) {
-            throw new Error('MiniAppDataClient works only inside an iframe embed');
-        }
-        ensureListener();
-        const requestId = typeof crypto !== 'undefined' && 'randomUUID' in crypto
-            ? crypto.randomUUID()
-            : `miniapp-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-        const envelope = buildDataRequestMessage({
-            ...payload,
-            requestId,
-        });
-        const target = resolveParentOriginFromReferrer();
-        return new Promise((resolve, reject) => {
-            const timer = setTimeout(() => {
-                settle(requestId, p => {
-                    p.reject(new Error('Mini-app data request timed out'));
-                });
-            }, timeoutMs);
-            pending.set(requestId, {
-                resolve,
-                reject,
-                timer,
-            });
-            try {
-                if (target) {
-                    window.parent.postMessage(envelope, target);
-                }
-                else {
-                    window.parent.postMessage(envelope, '*');
-                }
-            }
-            catch (e) {
-                settle(requestId, p => {
-                    p.reject(e instanceof Error ? e : new Error('Mini-app postMessage failed'));
-                });
-            }
-        });
-    }
-    async function rq(op, params) {
-        return request({ op, params });
-    }
-    return {
-        getDatasets: () => rq('getDatasets'),
-        getDataset: id => rq('getDataset', { id }),
-        getForecasts: datasetId => rq('getForecasts', { datasetId }),
-        getForecast: (datasetId, analysisId) => rq('getForecast', { datasetId, analysisId }),
-        getDrivers: (datasetId, analysisId) => rq('getDrivers', { datasetId, analysisId }),
-        getPerformanceData: (datasetId, analysisId) => rq('getPerformanceData', {
-            datasetId,
-            analysisId,
-        }),
-        getDriversComparisonData: (datasetId, analysisId) => rq('getDriversComparisonData', {
-            datasetId,
-            analysisId,
-        }),
-    };
-}
-
-export { createMiniAppDataClient };

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

@@ -1,153 +0,0 @@
-const MINIAPP_CHANNEL = 'sybilion.miniapp';
-const MINIAPP_VERSION = 1;
-function isRecord(v) {
-    return typeof v === 'object' && v !== null && !Array.isArray(v);
-}
-/** Parse parent → child THEME_SYNC (shell uses `buildThemeSyncMessage`). */
-function parseThemeSyncMessage(data) {
-    if (!isRecord(data))
-        return null;
-    if (data.channel !== MINIAPP_CHANNEL)
-        return null;
-    if (data.version !== MINIAPP_VERSION)
-        return null;
-    if (data.type !== 'THEME_SYNC')
-        return null;
-    const payload = data.payload;
-    if (!isRecord(payload))
-        return null;
-    const mode = payload.mode === 'dark' ? 'dark' : 'light';
-    const isDarkMode = typeof payload.isDarkMode === 'boolean'
-        ? payload.isDarkMode
-        : mode === 'dark';
-    return { mode, isDarkMode };
-}
-/** Child → parent READY (optional `appId` for telemetry). */
-function buildReadyMessage(payload = {}) {
-    return {
-        channel: MINIAPP_CHANNEL,
-        version: MINIAPP_VERSION,
-        type: 'READY',
-        payload,
-    };
-}
-function resolveParentOriginFromReferrer() {
-    try {
-        if (typeof document !== 'undefined' && document.referrer) {
-            return new URL(document.referrer).origin;
-        }
-    }
-    catch {
-        /* invalid referrer */
-    }
-    return null;
-}
-function applyThemeToDocument(mode) {
-    if (typeof document === 'undefined')
-        return;
-    const root = document.documentElement;
-    root.classList.remove('light', 'dark');
-    root.classList.add(mode);
-}
-/** Only accept shell messages that appear to come from the real embedding parent. */
-function isTrustedMiniAppParentMessage(event) {
-    if (event.source !== window.parent)
-        return false;
-    const fromReferrer = resolveParentOriginFromReferrer();
-    if (fromReferrer && event.origin !== fromReferrer)
-        return false;
-    return true;
-}
-function buildDataRequestMessage(payload) {
-    return {
-        channel: MINIAPP_CHANNEL,
-        version: MINIAPP_VERSION,
-        type: 'DATA_REQUEST',
-        payload,
-    };
-}
-function buildChatSendMessage(payload) {
-    return {
-        channel: MINIAPP_CHANNEL,
-        version: MINIAPP_VERSION,
-        type: 'CHAT_SEND',
-        payload,
-    };
-}
-/** Parse parent → child DATA_RESPONSE. */
-function parseDataResponseMessage(data) {
-    if (!isRecord(data))
-        return null;
-    if (data.channel !== MINIAPP_CHANNEL)
-        return null;
-    if (data.version !== MINIAPP_VERSION)
-        return null;
-    if (data.type !== 'DATA_RESPONSE')
-        return null;
-    const payload = data.payload;
-    if (!isRecord(payload))
-        return null;
-    const requestId = payload.requestId;
-    if (typeof requestId !== 'string' || requestId.length === 0)
-        return null;
-    const ok = payload.ok === true;
-    const errOk = payload.ok === false;
-    if (!ok && !errOk)
-        return null;
-    const base = {
-        requestId,
-        ok,
-    };
-    if ('result' in payload) {
-        base.result = payload.result;
-    }
-    if (typeof payload.error === 'string') {
-        base.error = payload.error;
-    }
-    return base;
-}
-/** Parse parent → child CHAT_SEND_RESULT (shell uses `buildChatSendResultMessage`). */
-function parseChatSendResultMessage(data) {
-    if (!isRecord(data))
-        return null;
-    if (data.channel !== MINIAPP_CHANNEL)
-        return null;
-    if (data.version !== MINIAPP_VERSION)
-        return null;
-    if (data.type !== 'CHAT_SEND_RESULT')
-        return null;
-    const payload = data.payload;
-    if (!isRecord(payload))
-        return null;
-    const requestId = payload.requestId;
-    if (typeof requestId !== 'string' || requestId.length === 0)
-        return null;
-    if (payload.ok === true) {
-        const result = payload.result;
-        if (!isRecord(result))
-            return null;
-        const responseText = result.response;
-        if (typeof responseText !== 'string')
-            return null;
-        const sidRaw = result.session_id;
-        if (sidRaw !== undefined && sidRaw !== null && typeof sidRaw !== 'string')
-            return null;
-        const session_id = typeof sidRaw === 'string' ? sidRaw : null;
-        return {
-            requestId,
-            ok: true,
-            result: {
-                response: responseText,
-                session_id,
-            },
-        };
-    }
-    if (payload.ok === false) {
-        if (typeof payload.error !== 'string')
-            return null;
-        return { requestId, ok: false, error: payload.error };
-    }
-    return null;
-}
-
-export { MINIAPP_CHANNEL, MINIAPP_VERSION, applyThemeToDocument, buildChatSendMessage, buildDataRequestMessage, buildReadyMessage, isTrustedMiniAppParentMessage, parseChatSendResultMessage, parseDataResponseMessage, parseThemeSyncMessage, resolveParentOriginFromReferrer };

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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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, className, appId, onThemeChange, getThemeConfig, }: MiniAppRootProps): React.ReactElement;

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

@@ -1,10 +0,0 @@
-export { applyThemeToDocument, buildChatSendMessage, buildDataRequestMessage, buildReadyMessage, MINIAPP_CHANNEL, MINIAPP_VERSION, parseChatSendResultMessage, parseDataResponseMessage, parseThemeSyncMessage, isTrustedMiniAppParentMessage, resolveParentOriginFromReferrer, } from './miniAppProtocol';
-export type { MiniAppMessageReady, MiniAppMessageThemeSync, MiniAppMessageDataRequest, MiniAppMessageDataResponse, MiniAppMessageChatSend, MiniAppMessageChatSendResult, MiniAppDataRequestPayload, MiniAppDataResponsePayload, MiniAppChatSendPayload, MiniAppChatSendResultPayload, MiniAppDataOp, ThemeSyncPayload, } from './miniAppProtocol';
-export { createMiniAppDataClient } from './miniAppDataClient';
-export type { MiniAppDataClientOptions, MiniAppDataClient, } from './miniAppDataClient';
-export type { MiniAppDataset, MiniAppDriversComparisonSnapshot, MiniAppForecastMap, MiniAppPerformanceBundle, } from './miniAppDataTypes';
-export { getDefaultMiniAppThemeConfig } from './miniAppThemeConfig';
-export type { MiniAppThemeConfig } from './miniAppThemeConfig';
-export { sendChatMessage } from './miniAppChatBridge';
-export { MiniAppRoot, useMiniAppShellTheme } from './MiniAppRoot';
-export type { MiniAppRootProps, MiniAppShellContextValue } from './MiniAppRoot';

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

@@ -1,6 +0,0 @@
-import type { ChatResponse } from '#uilib/types/chat-api.types';
-/**
- * Ask the Sybilion host to send a chat message with its auth token.
- * Does not update host ChatSheet state — same session as `chatId` on the agent only.
- */
-export declare function sendChatMessage(chatId: string, message: string): Promise<ChatResponse>;

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

@@ -1,16 +0,0 @@
-import type { MiniAppDataset, MiniAppDriversComparisonSnapshot, MiniAppForecastMap, MiniAppPerformanceBundle } from './miniAppDataTypes';
-export type MiniAppDataClientOptions = {
-    /** Default 10000 ms. */
-    timeoutMs?: number;
-};
-export type MiniAppDataClient = {
-    getDatasets(): Promise<MiniAppDataset[]>;
-    getDataset(id: number): Promise<MiniAppDataset | null>;
-    getForecasts(datasetId: number): Promise<MiniAppForecastMap>;
-    getForecast(datasetId: number, analysisId: number): Promise<unknown | null>;
-    getDrivers(datasetId: number, analysisId: number): Promise<unknown[]>;
-    getPerformanceData(datasetId: number, analysisId: number): Promise<MiniAppPerformanceBundle>;
-    getDriversComparisonData(datasetId: number, analysisId: number): Promise<MiniAppDriversComparisonSnapshot>;
-};
-/** One listener per browsing context; tracks in-flight bridge requests by `requestId`. */
-export declare function createMiniAppDataClient(options?: MiniAppDataClientOptions): MiniAppDataClient;

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

@@ -1,89 +0,0 @@
-/**
- * postMessage protocol for Sybilion workspace mini-apps (iframe child).
- * Keep in sync with sybilion-client `src/workspace/miniAppBridge.ts` (channel, version, payloads).
- */
-import type { ChatResponse } from '#uilib/types/chat-api.types';
-export declare const MINIAPP_CHANNEL: "sybilion.miniapp";
-export declare const MINIAPP_VERSION: 1;
-export type ThemeSyncPayload = {
-    mode: 'light' | 'dark';
-    isDarkMode: boolean;
-};
-export type MiniAppMessageReady = {
-    channel: typeof MINIAPP_CHANNEL;
-    version: typeof MINIAPP_VERSION;
-    type: 'READY';
-    payload: Record<string, unknown> | {
-        appId?: string;
-    };
-};
-export type MiniAppMessageThemeSync = {
-    channel: typeof MINIAPP_CHANNEL;
-    version: typeof MINIAPP_VERSION;
-    type: 'THEME_SYNC';
-    payload: ThemeSyncPayload;
-};
-export type MiniAppDataOp = 'getDatasets' | 'getDataset' | 'getForecasts' | 'getForecast' | 'getDrivers' | 'getPerformanceData' | 'getDriversComparisonData';
-export type MiniAppDataRequestPayload = {
-    requestId: string;
-    op: MiniAppDataOp;
-    params?: Record<string, number>;
-};
-export type MiniAppMessageDataRequest = {
-    channel: typeof MINIAPP_CHANNEL;
-    version: typeof MINIAPP_VERSION;
-    type: 'DATA_REQUEST';
-    payload: MiniAppDataRequestPayload;
-};
-export type MiniAppDataResponsePayload = {
-    requestId: string;
-    ok: boolean;
-    result?: unknown;
-    error?: string;
-};
-export type MiniAppMessageDataResponse = {
-    channel: typeof MINIAPP_CHANNEL;
-    version: typeof MINIAPP_VERSION;
-    type: 'DATA_RESPONSE';
-    payload: MiniAppDataResponsePayload;
-};
-export type MiniAppChatSendPayload = {
-    requestId: string;
-    chatId: string;
-    message: string;
-};
-export type MiniAppMessageChatSend = {
-    channel: typeof MINIAPP_CHANNEL;
-    version: typeof MINIAPP_VERSION;
-    type: 'CHAT_SEND';
-    payload: MiniAppChatSendPayload;
-};
-export type MiniAppChatSendResultPayload = {
-    requestId: string;
-    ok: true;
-    result: ChatResponse;
-} | {
-    requestId: string;
-    ok: false;
-    error: string;
-};
-export type MiniAppMessageChatSendResult = {
-    channel: typeof MINIAPP_CHANNEL;
-    version: typeof MINIAPP_VERSION;
-    type: 'CHAT_SEND_RESULT';
-    payload: MiniAppChatSendResultPayload;
-};
-/** Parse parent → child THEME_SYNC (shell uses `buildThemeSyncMessage`). */
-export declare function parseThemeSyncMessage(data: unknown): ThemeSyncPayload | null;
-/** Child → parent READY (optional `appId` for telemetry). */
-export declare function buildReadyMessage(payload?: Record<string, unknown>): MiniAppMessageReady;
-export declare function resolveParentOriginFromReferrer(): string | null;
-export declare function applyThemeToDocument(mode: 'light' | 'dark'): void;
-/** Only accept shell messages that appear to come from the real embedding parent. */
-export declare function isTrustedMiniAppParentMessage(event: MessageEvent): boolean;
-export declare function buildDataRequestMessage(payload: MiniAppDataRequestPayload): MiniAppMessageDataRequest;
-export declare function buildChatSendMessage(payload: MiniAppChatSendPayload): MiniAppMessageChatSend;
-/** Parse parent → child DATA_RESPONSE. */
-export declare function parseDataResponseMessage(data: unknown): MiniAppDataResponsePayload | null;
-/** Parse parent → child CHAT_SEND_RESULT (shell uses `buildChatSendResultMessage`). */
-export declare function parseChatSendResultMessage(data: unknown): MiniAppChatSendResultPayload | null;

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

@@ -1,3 +0,0 @@
-/** 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,51 +0,0 @@
-# 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), and so **`@homecode/ui`’s `<Theme />`** runs with vars matching that mode (`getDefaultMiniAppThemeConfig`; override via props if needed).
-
-## Design system (`@sybilion/uilib`)
-
-**Prefer exported components from `@sybilion/uilib`** for structure, typography, forms, feedback, data display, and charts **when they fit the need**. That keeps spacing, tokens, and behavior aligned with Sybilion and avoids one-off layouts. Use custom markup or CSS **only** when uilib has no suitable primitive.
-
-**For humans and coding agents:** Default to uilib as the component library—do not invent new layout patterns or duplicate design tokens when an existing uilib component (or composition of a few) can do the job. Browse the uilib docs app / package exports before building bespoke UI.
-
-**Page inset:** Do **not** add your own **left/right** padding or margin on the root page or a full-viewport wrapper (no random `px-*` / `mx-*` / `container` max-width hacks for “page margins”). Use uilib layout primitives and spacing tokens—or patterns documented for mini-apps—so horizontal gutters and max width stay consistent with the shell.
-
-1. Import **`@sybilion/uilib/mini-app-global.css`** (slim tokens + font imports; ships in this package).
-2. Wrap the React root:
-
-```tsx
-import { MiniAppRoot } from '@sybilion/uilib';
-import '@sybilion/uilib/mini-app-global.css';
-
-createRoot(document.getElementById('root')!).render(
-  <MiniAppRoot appId="my-mini-app">
-    <App />
-  </MiniAppRoot>,
-);
-```
-
-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.
-
-## Cached data from the host (no extra APIs)
-
-The Sybilion shell can answer read-only **data getters** over the same `postMessage` channel (`DATA_REQUEST` / `DATA_RESPONSE`). Use this when a mini-app should render **the user’s existing Sybilion data** (datasets, forecasts, drivers, performance, drivers comparison) **without** building duplicate backend calls.
-
-- **Cache-only:** The shell returns whatever is **already in memory** (dataset context) or in the **same localStorage cache** the main app uses for Performance (e.g. `performance-<analysisId>`). It does **not** trigger network fetches. If the user never opened a dataset tab or the blob was never loaded, you get **empty objects, `null`, or `[]`** — handle that in UI.
-- **Performance bundle:** `getPerformanceData` returns `{ table, spaghetti }`. `table` is the cached Performance-tab payload (often `null` until the user has opened Performance for that analysis). `spaghetti` is in-memory backtest lines from the host when present.
-- **Usage:** Create one client (e.g. module singleton) with **`createMiniAppDataClient()`** from `@sybilion/uilib`. It only works **inside the iframe** (throws if `window.parent === window`). Methods: **`getDatasets()`**, **`getDataset(id)`**, **`getForecasts(datasetId)`**, **`getForecast(datasetId, analysisId)`**, **`getDrivers(datasetId, analysisId)`**, **`getPerformanceData(datasetId, analysisId)`**, **`getDriversComparisonData(datasetId, analysisId)`**. Types **`MiniAppDataset`**, **`MiniAppForecastMap`**, **`MiniAppPerformanceBundle`**, **`MiniAppDriversComparisonSnapshot`** describe the returned JSON loosely.
-
-**For coding agents:** Prefer these getters when the task is “show the user’s current Sybilion data in the mini-app” so the iframe stays aligned with the host session and avoids inventing parallel data loading.
-
-```tsx
-import { createMiniAppDataClient } from '@sybilion/uilib';
-
-const data = createMiniAppDataClient();
-
-// inside an effect or loader (iframe only)
-const datasets = await data.getDatasets();
-const forecasts = await data.getForecasts(datasetId);
-```

package/src/docs/pages/MiniAppRootPage.tsx

@@ -1,58 +0,0 @@
-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/mini-app/MiniAppRoot.styl

@@ -1,24 +0,0 @@
-@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)