@sybilion/uilib 1.0.32 → 1.2.0

package/src/sybilion-auth/SybilionAuthProvider.tsx

@@ -0,0 +1,322 @@
+import {
+  Auth0Provider,
+  type RedirectLoginOptions,
+  useAuth0,
+} from '@auth0/auth0-react';
+import type { JSX, ReactNode } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { normalizeApiBaseUrl } from '#uilib/sybilion-auth/authPaths';
+import { exchangeAuth0AccessTokenForSybilionJwt } from '#uilib/sybilion-auth/exchangeSybilionToken';
+
+const DEFAULT_TOKEN_KEY = 'sybilion.standalone.jwt';
+
+export type SybilionAuthProviderProps = {
+  children: ReactNode;
+  apiBaseUrl: string;
+  auth0Domain: string;
+  auth0ClientId: string;
+  redirectUri: string;
+  /**
+   * Defaults match sybilion-client AuthProvider (Management API audience + metadata scope).
+   * Override if your Auth0 SPA app uses a Resource Server audience for `/v1/auth/login`.
+   */
+  authorizationParams?: {
+    audience?: string;
+    scope?: string;
+    redirect_uri?: string;
+  };
+  sybilionTokenStorageKey?: string;
+  logoutReturnTo?: string;
+};
+
+export type SybilionAuthContextValue = {
+  apiBaseUrl: string;
+  isLoading: boolean;
+  /** Auth0 authenticated and Sybilion JWT present. */
+  isAuthenticated: boolean;
+  sybilionAccessToken: string | null;
+  error: string | null;
+  loginWithRedirect: (options?: RedirectLoginOptions) => Promise<void>;
+  logout: () => void;
+  getAuth0AccessToken: () => Promise<string | undefined>;
+  getSybilionAccessToken: () => Promise<string | null>;
+};
+
+const SybilionAuthContext = createContext<SybilionAuthContextValue | null>(
+  null,
+);
+
+export function useSybilionAuth(): SybilionAuthContextValue {
+  const v = useContext(SybilionAuthContext);
+  if (!v) {
+    throw new Error('useSybilionAuth must be used within SybilionAuthProvider');
+  }
+  return v;
+}
+
+/** fetch() relative to Sybilion API base with Bearer Sybilion JWT. */
+export async function sybilionApiFetch(
+  apiBaseUrl: string,
+  bearerToken: string,
+  path: string,
+  init: RequestInit = {},
+): Promise<Response> {
+  const base = normalizeApiBaseUrl(apiBaseUrl);
+  const url = path.startsWith('http')
+    ? path
+    : `${base}${path.startsWith('/') ? path : `/${path}`}`;
+  const headers = new Headers(init.headers);
+  headers.set('Authorization', `Bearer ${bearerToken}`);
+  if (!headers.has('Accept')) headers.set('Accept', 'application/json');
+  return fetch(url, { ...init, headers });
+}
+
+export function createSybilionApiFetch(
+  apiBaseUrl: string,
+  getSybilionAccessToken: () => Promise<string | null>,
+) {
+  return async function sybilionFetch(
+    path: string,
+    init?: RequestInit,
+  ): Promise<Response> {
+    const token = await getSybilionAccessToken();
+    if (!token)
+      throw new Error('Sybilion API: missing token — user not signed in.');
+    return sybilionApiFetch(apiBaseUrl, token, path, init);
+  };
+}
+
+/** Authenticated fetch using {@link useSybilionAuth} context. */
+export function useSybilionApiFetch(): (
+  path: string,
+  init?: RequestInit,
+) => Promise<Response> {
+  const { apiBaseUrl, getSybilionAccessToken } = useSybilionAuth();
+  return useMemo(
+    () => createSybilionApiFetch(apiBaseUrl, getSybilionAccessToken),
+    [apiBaseUrl, getSybilionAccessToken],
+  );
+}
+
+function writeLs(key: string, value: string | null): void {
+  if (typeof localStorage === 'undefined') return;
+  try {
+    if (value === null) localStorage.removeItem(key);
+    else localStorage.setItem(key, value);
+  } catch {
+    /* quota / blocked */
+  }
+}
+
+function InnerSybilionSession({
+  children,
+  apiBaseUrl,
+  storageKey,
+  logoutReturnTo,
+}: {
+  children: ReactNode;
+  apiBaseUrl: string;
+  storageKey: string;
+  logoutReturnTo?: string;
+}): JSX.Element {
+  const auth0 = useAuth0();
+  const auth0Ref = useRef(auth0);
+  auth0Ref.current = auth0;
+
+  const [sybilionToken, setSybilionToken] = useState<string | null>(null);
+  const [exchangeLoading, setExchangeLoading] = useState(false);
+  const [exchangeError, setExchangeError] = useState<string | null>(null);
+
+  const persistToken = useCallback(
+    (t: string | null) => {
+      setSybilionToken(t);
+      writeLs(storageKey, t);
+    },
+    [storageKey],
+  );
+
+  const doLogout = useCallback(() => {
+    persistToken(null);
+    setExchangeError(null);
+    const returnTo =
+      logoutReturnTo ??
+      (typeof window !== 'undefined' ? window.location.origin : undefined);
+    auth0Ref.current.logout({
+      logoutParams: returnTo ? { returnTo } : undefined,
+    });
+  }, [persistToken, logoutReturnTo]);
+
+  useEffect(() => {
+    if (!auth0.isAuthenticated || !auth0.user?.sub) {
+      persistToken(null);
+    }
+  }, [auth0.isAuthenticated, auth0.user?.sub, persistToken]);
+
+  useEffect(() => {
+    if (!auth0.isAuthenticated || !auth0.user?.sub) {
+      setExchangeLoading(false);
+      setExchangeError(null);
+      return;
+    }
+
+    let cancelled = false;
+    const runExchange = async () => {
+      setExchangeLoading(true);
+      setExchangeError(null);
+      try {
+        const access = await auth0Ref.current.getAccessTokenSilently();
+        const jwt = await exchangeAuth0AccessTokenForSybilionJwt(
+          apiBaseUrl,
+          access,
+        );
+        if (cancelled) return;
+        persistToken(jwt);
+      } catch (e) {
+        if (cancelled) return;
+        persistToken(null);
+        const msg =
+          e instanceof Error ? e.message : 'Sybilion auth exchange failed';
+        setExchangeError(msg);
+        doLogout();
+      } finally {
+        if (!cancelled) setExchangeLoading(false);
+      }
+    };
+
+    runExchange();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    apiBaseUrl,
+    auth0.isAuthenticated,
+    auth0.user?.sub,
+    persistToken,
+    doLogout,
+  ]);
+
+  const getAuth0AccessToken = useCallback(async () => {
+    if (!auth0.isAuthenticated) return undefined;
+    try {
+      return await auth0.getAccessTokenSilently();
+    } catch {
+      return undefined;
+    }
+  }, [auth0]);
+
+  const getSybilionAccessToken = useCallback(async (): Promise<
+    string | null
+  > => {
+    return sybilionToken;
+  }, [sybilionToken]);
+
+  const logout = useCallback(() => {
+    doLogout();
+  }, [doLogout]);
+
+  const isAuthenticated = Boolean(
+    auth0.isAuthenticated && sybilionToken && !exchangeError,
+  );
+
+  const isLoading =
+    auth0.isLoading ||
+    exchangeLoading ||
+    (Boolean(auth0.isAuthenticated && auth0.user) &&
+      sybilionToken === null &&
+      exchangeError === null);
+
+  const value = useMemo(
+    (): SybilionAuthContextValue => ({
+      apiBaseUrl,
+      isLoading,
+      isAuthenticated,
+      sybilionAccessToken: sybilionToken,
+      error: exchangeError ?? auth0.error?.message ?? null,
+      loginWithRedirect: auth0.loginWithRedirect,
+      logout,
+      getAuth0AccessToken,
+      getSybilionAccessToken,
+    }),
+    [
+      apiBaseUrl,
+      isLoading,
+      isAuthenticated,
+      sybilionToken,
+      exchangeError,
+      auth0.error?.message,
+      auth0.loginWithRedirect,
+      logout,
+      getAuth0AccessToken,
+      getSybilionAccessToken,
+    ],
+  );
+
+  return (
+    <SybilionAuthContext.Provider value={value}>
+      {children}
+    </SybilionAuthContext.Provider>
+  );
+}
+
+export function SybilionAuthProvider({
+  children,
+  apiBaseUrl,
+  auth0Domain,
+  auth0ClientId,
+  redirectUri,
+  authorizationParams,
+  sybilionTokenStorageKey = DEFAULT_TOKEN_KEY,
+  logoutReturnTo,
+}: SybilionAuthProviderProps): JSX.Element {
+  const mergedAuthParams = useMemo(
+    () => ({
+      redirect_uri: authorizationParams?.redirect_uri ?? redirectUri,
+      audience:
+        authorizationParams?.audience ?? `https://${auth0Domain}/api/v2/`,
+      scope:
+        authorizationParams?.scope ??
+        'openid profile email offline_access update:current_user_metadata',
+    }),
+    [
+      authorizationParams?.audience,
+      authorizationParams?.scope,
+      authorizationParams?.redirect_uri,
+      redirectUri,
+      auth0Domain,
+    ],
+  );
+
+  const cookieOpts =
+    typeof window !== 'undefined'
+      ? { cookieDomain: window.location.hostname }
+      : {};
+
+  return (
+    <Auth0Provider
+      domain={auth0Domain}
+      clientId={auth0ClientId}
+      authorizationParams={mergedAuthParams}
+      cacheLocation="localstorage"
+      useRefreshTokens
+      {...cookieOpts}
+    >
+      <InnerSybilionSession
+        apiBaseUrl={apiBaseUrl}
+        storageKey={sybilionTokenStorageKey}
+        logoutReturnTo={logoutReturnTo}
+      >
+        {children}
+      </InnerSybilionSession>
+    </Auth0Provider>
+  );
+}

package/src/sybilion-auth/authPaths.ts

@@ -0,0 +1,6 @@
+/** Sybilion platform auth exchange route (joined with trimmed API base URL). */
+export const SYBILION_AUTH_LOGIN_PATH = '/v1/auth/login';
+
+export function normalizeApiBaseUrl(url: string): string {
+  return url.replace(/\/$/, '');
+}

package/src/sybilion-auth/exchangeSybilionToken.ts

@@ -0,0 +1,47 @@
+import {
+  SYBILION_AUTH_LOGIN_PATH,
+  normalizeApiBaseUrl,
+} from '#uilib/sybilion-auth/authPaths';
+
+/** POST `{ identity: auth0AccessToken, type: 'auth0' }` → Sybilion API JWT string. */
+export async function exchangeAuth0AccessTokenForSybilionJwt(
+  apiBaseUrl: string,
+  auth0AccessToken: string,
+): Promise<string> {
+  const base = normalizeApiBaseUrl(apiBaseUrl);
+  const res = await fetch(`${base}${SYBILION_AUTH_LOGIN_PATH}`, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ identity: auth0AccessToken, type: 'auth0' }),
+  });
+
+  const json: unknown = await res.json().catch(() => ({}));
+  const pickToken = (): string | undefined => {
+    if (!json || typeof json !== 'object') return undefined;
+    const o = json as Record<string, unknown>;
+    const nested = o.data;
+    if (nested && typeof nested === 'object' && 'token' in nested) {
+      const t = (nested as { token?: unknown }).token;
+      return typeof t === 'string' ? t : undefined;
+    }
+    const t = o.token;
+    return typeof t === 'string' ? t : undefined;
+  };
+
+  const token = pickToken();
+  if (!res.ok || token === undefined) {
+    const msg =
+      json &&
+      typeof json === 'object' &&
+      'message' in json &&
+      typeof (json as { message?: unknown }).message === 'string'
+        ? (json as { message: string }).message
+        : `Sybilion auth failed (${res.status})`;
+    throw new Error(msg);
+  }
+
+  return token;
+}

package/src/sybilion-auth/index.ts

@@ -0,0 +1,16 @@
+export type {
+  SybilionAuthProviderProps,
+  SybilionAuthContextValue,
+} from '#uilib/sybilion-auth/SybilionAuthProvider';
+export {
+  SybilionAuthProvider,
+  useSybilionAuth,
+  sybilionApiFetch,
+  createSybilionApiFetch,
+  useSybilionApiFetch,
+} from '#uilib/sybilion-auth/SybilionAuthProvider';
+export {
+  SYBILION_AUTH_LOGIN_PATH,
+  normalizeApiBaseUrl,
+} from '#uilib/sybilion-auth/authPaths';
+export { exchangeAuth0AccessTokenForSybilionJwt } from '#uilib/sybilion-auth/exchangeSybilionToken';

package/src/{mini-app/miniAppDataTypes.ts → types/sybilionDatasetSnapshots.ts}

@@ -1,9 +1,8 @@
 /**
- * Serializable shapes returned by the shell for mini-app data getters.
- * Subset of Sybilion `Dataset` / API types — use `unknown` where payloads are large or evolving.
+ * Loose JSON shapes aligned with Sybilion dataset payloads (standalone apps / widgets).
  */
 
-export type MiniAppDataset = {
+export type SybilionDatasetSnapshot = {
   id: number;
   user_id?: number;
   name: string;
@@ -24,16 +23,14 @@ export type MiniAppDataset = {
 };
 
 /** `forecastData` slice: analysis id (string) → forecast series blob. */
-export type MiniAppForecastMap = Record<string, unknown>;
+export type SybilionForecastMap = Record<string, unknown>;
 
-export type MiniAppPerformanceBundle = {
-  /** Cached Performance-tab API payload, or null if user never opened Performance / cache empty. */
+export type SybilionPerformanceSnapshot = {
   table: unknown;
-  /** In-memory spaghetti lines from shell context, or null. */
   spaghetti: unknown;
 };
 
-export type MiniAppDriversComparisonSnapshot = {
+export type SybilionDriversComparisonSnapshot = {
   byRegion: unknown;
   byCountry: unknown;
   byCategory: unknown;

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

@@ -1,82 +0,0 @@
-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, isTrustedMiniAppParentMessage, 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);
-    if (!v) {
-        throw new Error('useMiniAppShellTheme must be used within MiniAppRoot');
-    }
-    return v;
-}
-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;
-        const payload = appId ? { appId } : {};
-        const msg = buildReadyMessage(payload);
-        const target = resolveParentOriginFromReferrer();
-        if (target) {
-            window.parent.postMessage(msg, target);
-        }
-        else {
-            window.parent.postMessage(msg, '*');
-        }
-    }, [appId]);
-    useEffect(() => {
-        if (!isEmbeddedMiniApp())
-            return;
-        applyThemeToDocument(theme.mode);
-    }, [theme.mode]);
-    useEffect(() => {
-        const onMessage = (event) => {
-            if (!isTrustedMiniAppParentMessage(event))
-                return;
-            const parsed = parseThemeSyncMessage(event.data);
-            if (!parsed)
-                return;
-            setTheme(parsed);
-            onThemeChangeRef.current?.(parsed);
-        };
-        window.addEventListener('message', onMessage);
-        return () => window.removeEventListener('message', onMessage);
-    }, []);
-    useEffect(() => {
-        sendReady();
-        if (document.readyState === 'complete')
-            return;
-        window.addEventListener('load', sendReady);
-        return () => window.removeEventListener('load', sendReady);
-    }, [sendReady]);
-    const ctx = useMemo(() => ({ theme }), [theme]);
-    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 +0,0 @@
-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/mini-app/miniAppChatBridge.js

@@ -1,45 +0,0 @@
-import { resolveParentOriginFromReferrer, buildChatSendMessage, isTrustedMiniAppParentMessage, parseChatSendResultMessage } from './miniAppProtocol.js';
-
-const DEFAULT_TIMEOUT_MS = 60_000;
-/**
- * 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.
- */
-async function sendChatMessage(chatId, message) {
-    if (typeof window === 'undefined' || window.parent === window) {
-        throw new Error('sendChatMessage requires an embedded mini-app (iframe)');
-    }
-    const requestId = crypto.randomUUID();
-    const target = resolveParentOriginFromReferrer();
-    const payload = { requestId, chatId, message };
-    const msg = buildChatSendMessage(payload);
-    return new Promise((resolve, reject) => {
-        const onMessage = (event) => {
-            if (!isTrustedMiniAppParentMessage(event))
-                return;
-            const parsed = parseChatSendResultMessage(event.data);
-            if (!parsed || parsed.requestId !== requestId)
-                return;
-            window.removeEventListener('message', onMessage);
-            clearTimeout(timer);
-            if (parsed.ok === true) {
-                resolve(parsed.result);
-                return;
-            }
-            reject(new Error(parsed.error));
-        };
-        window.addEventListener('message', onMessage);
-        const timer = setTimeout(() => {
-            window.removeEventListener('message', onMessage);
-            reject(new Error('Mini-app chat request timed out'));
-        }, DEFAULT_TIMEOUT_MS);
-        if (target) {
-            window.parent.postMessage(msg, target);
-        }
-        else {
-            window.parent.postMessage(msg, '*');
-        }
-    });
-}
-
-export { sendChatMessage };

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