@geniee-inc/sfa-kit 1.6.0

package/src/lib/auth/SfaLoginGate.js

@@ -0,0 +1,462 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SfaProvider } from '../provider/SfaProvider';
+import { color, font, radius, space, baseContainerStyle, baseButtonStyle, } from '../theme';
+import { SFA_KIT_VERSION } from '../version';
+import { DevToolbar } from './DevToolbar';
+import { parseInboundMessage, sendToHost } from './embed-protocol';
+import { exchangeCode } from './exchange-code';
+import { authenticate } from './keystone-auth';
+import { loadSession, saveSession, clearSession, loadLastOrgId, } from './session-store';
+import { StandalonePreviewCtx } from './StandalonePreviewContext';
+import { EmbedContextValue } from './useEmbedContext';
+const DEFAULT_API_BASE = 'https://keystone-api.chikyu.mobi';
+const REFRESH_BUFFER_SECONDS = 120;
+/** After this many consecutive exchange failures, stop retrying and show session_expired. */
+const MAX_CONSECUTIVE_FAILURES = 3;
+/** Seconds to wait for the host to send a code before showing a connection error. */
+const CODE_TIMEOUT_SECONDS = 15;
+/**
+ * @description Returns true when the page is running inside an iframe.
+ */
+function isEmbedded() {
+    try {
+        return window.parent !== window;
+    }
+    catch (_a) {
+        // Cross-origin access to window.parent throws; that means we're embedded.
+        return true;
+    }
+}
+/**
+ * @description Returns true when the page was served with a content token (`_t`).
+ *
+ * The presence of `_t` means the Keystone content endpoint already authenticated
+ * the request, so the page is running in the SFA embed context. This lets us
+ * auto-detect embed mode without requiring the server to inject `trustedOrigin`.
+ */
+function hasContentToken() {
+    try {
+        return new URLSearchParams(window.location.search).has('_t');
+    }
+    catch (_a) {
+        return false;
+    }
+}
+/**
+ * @description Derives the trusted origin for postMessage validation.
+ *
+ * Priority: explicit `trustedOrigin` prop > `document.referrer` (the parent
+ * page that loaded this iframe). Falls back to undefined if neither is available.
+ */
+function resolveTrustedOrigin(explicitOrigin) {
+    if (explicitOrigin != null)
+        return explicitOrigin;
+    try {
+        if (document.referrer)
+            return new URL(document.referrer).origin;
+    }
+    catch (_a) {
+        // malformed referrer
+    }
+    return undefined;
+}
+/**
+ * @description Universal auth wrapper for sfa-kit pages.
+ *
+ * Auto-detects its context:
+ * - **Embedded (iframe with `_t`)**: when the page is inside an iframe and
+ *   was served with a content token (`_t` query parameter), uses the
+ *   postMessage code-exchange flow. No login form. The trusted origin for
+ *   postMessage validation is derived from `document.referrer` (or the
+ *   explicit `trustedOrigin` prop if provided).
+ * - **Standalone**: shows a GENIEE SFA/CRM-branded login form. Org is resolved
+ *   automatically from the API (auto-selected for multi-org accounts when
+ *   defaultOrganizationId is set, or the first org is used by default).
+ */
+export function SfaLoginGate({ apiBase = DEFAULT_API_BASE, trustedOrigin, defaultOrganizationId, objectKey, level, children, }) {
+    const shouldEmbed = isEmbedded() && (trustedOrigin != null || hasContentToken());
+    const resolvedOrigin = resolveTrustedOrigin(trustedOrigin);
+    if (shouldEmbed && resolvedOrigin != null) {
+        return (_jsx(EmbedFlow, { trustedOrigin: resolvedOrigin, apiBase: apiBase, children: children }));
+    }
+    return (_jsx(StandaloneFlow, { apiBase: apiBase, defaultOrganizationId: defaultOrganizationId, objectKey: objectKey, level: level, children: children }));
+}
+function EmbedFlow({ trustedOrigin, apiBase, children, }) {
+    const [phase, setPhase] = useState({ step: 'waiting_for_code' });
+    const refreshTimerRef = useRef(null);
+    const exchangingRef = useRef(false);
+    const failureCountRef = useRef(0);
+    const normalizedBase = useMemo(() => apiBase.replace(/\/+$/, ''), [apiBase]);
+    const clearRefreshTimer = useCallback(() => {
+        if (refreshTimerRef.current != null) {
+            clearTimeout(refreshTimerRef.current);
+            refreshTimerRef.current = null;
+        }
+    }, []);
+    const scheduleRefresh = useCallback((expiresInSeconds) => {
+        clearRefreshTimer();
+        const refreshAfterMs = (expiresInSeconds - REFRESH_BUFFER_SECONDS) * 1000;
+        if (refreshAfterMs <= 0) {
+            sendToHost({ type: 'sfa-kit:code-request' }, trustedOrigin);
+            return;
+        }
+        refreshTimerRef.current = setTimeout(() => {
+            sendToHost({ type: 'sfa-kit:code-request' }, trustedOrigin);
+        }, refreshAfterMs);
+    }, [trustedOrigin, clearRefreshTimer]);
+    const handleCodeReceived = useCallback((code, context) => __awaiter(this, void 0, void 0, function* () {
+        if (exchangingRef.current)
+            return;
+        exchangingRef.current = true;
+        setPhase({ step: 'exchanging' });
+        try {
+            const session = yield exchangeCode(normalizedBase, code);
+            failureCountRef.current = 0;
+            setPhase({ step: 'authenticated', session, context });
+            const expiresInSeconds = Math.max(0, Math.floor((session.expiresAt - Date.now()) / 1000));
+            scheduleRefresh(expiresInSeconds);
+        }
+        catch (thrown) {
+            failureCountRef.current += 1;
+            if (failureCountRef.current >= MAX_CONSECUTIVE_FAILURES) {
+                setPhase({ step: 'session_expired' });
+            }
+            else {
+                const message = thrown instanceof Error ? thrown.message : 'Code exchange failed';
+                setPhase({ step: 'error', message });
+            }
+        }
+        finally {
+            exchangingRef.current = false;
+        }
+    }), [normalizedBase, scheduleRefresh]);
+    const handleAuthError = useCallback(() => {
+        clearRefreshTimer();
+        failureCountRef.current += 1;
+        if (failureCountRef.current >= MAX_CONSECUTIVE_FAILURES) {
+            setPhase({ step: 'session_expired' });
+            return;
+        }
+        sendToHost({ type: 'sfa-kit:code-request' }, trustedOrigin);
+        setPhase({ step: 'waiting_for_code' });
+    }, [trustedOrigin, clearRefreshTimer]);
+    useEffect(() => {
+        const handleMessage = (event) => {
+            var _a;
+            const parsed = parseInboundMessage(event, trustedOrigin);
+            if (!parsed)
+                return;
+            if (parsed.type === 'sfa-kit:code') {
+                void handleCodeReceived(parsed.code, (_a = parsed.context) !== null && _a !== void 0 ? _a : null);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        sendToHost({ type: 'sfa-kit:ready' }, trustedOrigin);
+        // If the host never sends a code (e.g. mintSfaKitExchangeCode is not
+        // implemented or the host page doesn't support the embed protocol),
+        // show an error instead of hanging on "Connecting..." forever.
+        const codeTimeout = setTimeout(() => {
+            setPhase(current => {
+                if (current.step !== 'waiting_for_code')
+                    return current;
+                return {
+                    step: 'error',
+                    message: 'SFA/CRM との接続がタイムアウトしました。ページを再読み込みしてください。',
+                };
+            });
+        }, CODE_TIMEOUT_SECONDS * 1000);
+        return () => {
+            window.removeEventListener('message', handleMessage);
+            clearTimeout(codeTimeout);
+            clearRefreshTimer();
+        };
+    }, [trustedOrigin, handleCodeReceived, clearRefreshTimer]);
+    const auth = useMemo(() => {
+        if (phase.step !== 'authenticated')
+            return null;
+        return { accessToken: phase.session.accessToken };
+    }, [phase]);
+    if (phase.step === 'session_expired') {
+        return (_jsx(EmbedStatus, { title: "\u30BB\u30C3\u30B7\u30E7\u30F3\u671F\u9650\u5207\u308C", message: "SFA/CRM \u306E\u30BB\u30C3\u30B7\u30E7\u30F3\u304C\u7D42\u4E86\u3057\u307E\u3057\u305F\u3002\u30DA\u30FC\u30B8\u3092\u518D\u8AAD\u307F\u8FBC\u307F\u3057\u3066\u304F\u3060\u3055\u3044\u3002", showReload: true }));
+    }
+    if (phase.step === 'error') {
+        return (_jsx(EmbedStatus, { title: "\u63A5\u7D9A\u30A8\u30E9\u30FC", message: phase.message, showReload: true }));
+    }
+    if (phase.step === 'waiting_for_code' || phase.step === 'exchanging') {
+        return (_jsx(EmbedStatus, { title: phase.step === 'exchanging' ? '認証中...' : 'SFA/CRM に接続中...', message: "\u30DB\u30B9\u30C8\u30A2\u30D7\u30EA\u30B1\u30FC\u30B7\u30E7\u30F3\u304B\u3089\u306E\u5FDC\u7B54\u3092\u5F85\u3063\u3066\u3044\u307E\u3059\u3002" }));
+    }
+    if (!auth)
+        return null;
+    return (_jsx(EmbedContextValue.Provider, { value: phase.context, children: _jsx(SfaProvider, { apiBase: normalizedBase, auth: auth, mode: "direct", organizationId: phase.session.organizationId, onAuthError: handleAuthError, children: children }) }));
+}
+function EmbedStatus({ title, message, showReload, }) {
+    const handleReload = useCallback(() => {
+        window.location.reload();
+    }, []);
+    return (_jsx("div", { style: styles.backdrop, children: _jsxs("div", { style: Object.assign(Object.assign({}, styles.card), { textAlign: 'center' }), children: [_jsxs("div", { style: loginStyles.logoGroup, children: [_jsx(GenieeLogoMark, {}), _jsxs("div", { style: loginStyles.logoText, children: [_jsx("span", { style: loginStyles.logoGeniee, children: "GENIEE" }), _jsx("span", { style: loginStyles.logoProduct, children: "SFA/CRM" })] })] }), _jsx("h2", { style: styles.title, children: title }), _jsx("p", { style: styles.subtitle, children: message }), showReload && (_jsx("button", { type: "button", style: styles.reloadButton, onClick: handleReload, children: "\u30DA\u30FC\u30B8\u3092\u518D\u8AAD\u307F\u8FBC\u307F" })), _jsxs("div", { style: styles.versionFooter, children: ["@geniee-inc/sfa-kit v", SFA_KIT_VERSION] })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Standalone flow (login form + DevToolbar)
+// ---------------------------------------------------------------------------
+function StandaloneFlow({ apiBase, defaultOrganizationId, objectKey, level, children, }) {
+    const [session, setSession] = useState(() => loadSession());
+    const [activeBase, setActiveBase] = useState(() => { var _a; return (_a = session === null || session === void 0 ? void 0 : session.apiBase) !== null && _a !== void 0 ? _a : apiBase.replace(/\/+$/, ''); });
+    const [status, setStatus] = useState('idle');
+    const [error, setError] = useState(null);
+    // NOTE: level を渡さない既存ページのために、objectKey の有無から補う。
+    // 以前は objectKey があること自体が「record レベル」を意味していた
+    const resolvedLevel = level !== null && level !== void 0 ? level : (objectKey != null && objectKey !== '' ? 'record' : 'object');
+    // Preview context state managed by DevToolbar.
+    // When objectKey is provided, pre-populate it.
+    const [previewObjectKey, setPreviewObjectKey] = useState(objectKey !== null && objectKey !== void 0 ? objectKey : '');
+    const [previewRecordId, setPreviewRecordId] = useState('');
+    const [fetchGeneration, setFetchGeneration] = useState(0);
+    const triggerFetch = useCallback(() => {
+        setFetchGeneration(prev => prev + 1);
+    }, []);
+    const previewControls = useMemo(() => ({
+        state: previewObjectKey !== ''
+            ? Object.assign({ object_key: previewObjectKey }, (previewRecordId !== '' ? { record_id: previewRecordId } : {})) : null,
+        setObjectKey: setPreviewObjectKey,
+        setRecordId: setPreviewRecordId,
+        triggerFetch,
+        fetchGeneration,
+    }), [previewObjectKey, previewRecordId, triggerFetch, fetchGeneration]);
+    const completeLogin = useCallback((newSession, normalizedBase) => {
+        const sessionWithBase = Object.assign(Object.assign({}, newSession), { apiBase: normalizedBase });
+        saveSession(sessionWithBase);
+        setSession(sessionWithBase);
+        setActiveBase(normalizedBase);
+        setStatus('idle');
+    }, []);
+    const handleLogin = useCallback((email_1, password_1, base_1, orgId_1, ...args_1) => __awaiter(this, [email_1, password_1, base_1, orgId_1, ...args_1], void 0, function* (email, password, base, orgId, isRetry = false) {
+        var _a, _b, _c;
+        setStatus('loading');
+        setError(null);
+        const normalizedBase = base.replace(/\/+$/, '');
+        try {
+            const result = yield authenticate(normalizedBase, email, password, orgId);
+            if (result.status === 'choose_organization') {
+                if (isRetry) {
+                    // Prevent infinite recursion: if org selection already failed once,
+                    // don't retry (the API returned 409 again despite an explicit orgId).
+                    setError('組織の自動選択に失敗しました。別の組織をお試しください。');
+                    setStatus('error');
+                    return;
+                }
+                // Auto-select priority:
+                // 1. User-entered orgId (already passed to authenticate, shouldn't 409)
+                // 2. defaultOrganizationId prop
+                // 3. Last successfully authenticated org (from localStorage)
+                // 4. First available org
+                const orgs = result.availableOrganizations;
+                const lastOrgIdStr = loadLastOrgId();
+                const lastOrgId = lastOrgIdStr != null ? parseInt(lastOrgIdStr, 10) : null;
+                const autoOrg = (_c = (_b = (_a = (orgId != null
+                    ? orgs.find(o => o.organization_id === orgId)
+                    : undefined)) !== null && _a !== void 0 ? _a : (defaultOrganizationId != null
+                    ? orgs.find(o => o.organization_id === defaultOrganizationId)
+                    : undefined)) !== null && _b !== void 0 ? _b : (lastOrgId != null
+                    ? orgs.find(o => o.organization_id === lastOrgId)
+                    : undefined)) !== null && _c !== void 0 ? _c : orgs[0];
+                if (autoOrg) {
+                    yield handleLogin(email, password, base, autoOrg.organization_id, true);
+                    return;
+                }
+                setError('アカウントに利用可能な組織がありません');
+                setStatus('error');
+                return;
+            }
+            completeLogin(result.session, normalizedBase);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'ログインに失敗しました');
+            setStatus('error');
+        }
+    }), [completeLogin, defaultOrganizationId]);
+    const handleLogout = useCallback(() => {
+        clearSession();
+        setSession(null);
+    }, []);
+    const auth = useMemo(() => (session ? { accessToken: session.accessToken } : null), [session]);
+    if (!session || !auth) {
+        return (_jsx(LoginForm, { defaultApiBase: apiBase, defaultOrganizationId: defaultOrganizationId, onSubmit: handleLogin, status: status, error: error }));
+    }
+    return (_jsx(SfaProvider, { apiBase: activeBase, auth: auth, mode: "direct", organizationId: session.organizationId, onAuthError: handleLogout, children: _jsxs(StandalonePreviewCtx.Provider, { value: previewControls, children: [_jsx(DevToolbar, { organizationId: session.organizationId, preview: previewControls, objectKey: objectKey, level: resolvedLevel, onLogout: handleLogout }), children] }) }));
+}
+// ---------------------------------------------------------------------------
+// GENIEE SFA/CRM-branded login form
+// ---------------------------------------------------------------------------
+function LoginForm({ defaultApiBase, defaultOrganizationId, onSubmit, status, error, }) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [apiBase, setApiBase] = useState(defaultApiBase);
+    // Pre-fill with the org used at build time (metadata fetch), fall back to last login
+    const [orgIdInput, setOrgIdInput] = useState(() => {
+        var _a, _b;
+        return (_b = (_a = (defaultOrganizationId != null ? String(defaultOrganizationId) : null)) !== null && _a !== void 0 ? _a : loadLastOrgId()) !== null && _b !== void 0 ? _b : '';
+    });
+    const [showConfig, setShowConfig] = useState(false);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!email.trim() || !password)
+            return;
+        const orgId = orgIdInput.trim()
+            ? parseInt(orgIdInput.trim(), 10)
+            : undefined;
+        onSubmit(email.trim(), password, apiBase.trim(), Number.isFinite(orgId) ? orgId : undefined);
+    };
+    return (_jsx("div", { style: loginStyles.backdrop, children: _jsxs("form", { style: loginStyles.card, onSubmit: handleSubmit, children: [_jsxs("div", { style: loginStyles.logoGroup, children: [_jsx(GenieeLogoMark, {}), _jsxs("div", { style: loginStyles.logoText, children: [_jsx("span", { style: loginStyles.logoGeniee, children: "GENIEE" }), _jsx("span", { style: loginStyles.logoProduct, children: "SFA/CRM" })] })] }), error && (_jsx("div", { role: "alert", style: styles.error, children: error })), _jsxs("label", { style: loginStyles.label, children: [_jsx("span", { style: loginStyles.labelText, children: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9*" }), _jsx("input", { style: loginStyles.input, type: "text", value: email, onChange: e => setEmail(e.target.value), autoComplete: "email", required: true, disabled: status === 'loading' })] }), _jsxs("label", { style: loginStyles.label, children: [_jsx("span", { style: loginStyles.labelText, children: "\u30D1\u30B9\u30EF\u30FC\u30C9*" }), _jsx("input", { style: loginStyles.input, type: "password", value: password, onChange: e => setPassword(e.target.value), autoComplete: "current-password", required: true, disabled: status === 'loading' })] }), _jsx("button", { style: Object.assign(Object.assign({}, loginStyles.submitButton), { opacity: status === 'loading' ? 0.7 : 1 }), type: "submit", disabled: status === 'loading', children: status === 'loading' ? 'ログイン中...' : 'ログイン' }), _jsx("button", { type: "button", style: loginStyles.configToggle, onClick: () => setShowConfig(prev => !prev), children: showConfig ? '▾ 接続設定を隠す' : '▸ 接続設定' }), showConfig && (_jsxs("div", { style: loginStyles.configSection, children: [_jsxs("label", { style: loginStyles.label, children: [_jsx("span", { style: loginStyles.configLabel, children: "API Base" }), _jsx("input", { style: loginStyles.input, type: "text", value: apiBase, onChange: e => setApiBase(e.target.value), placeholder: "https://keystone-api.chikyu.mobi", disabled: status === 'loading' })] }), _jsxs("label", { style: loginStyles.label, children: [_jsx("span", { style: loginStyles.configLabel, children: "Organization ID" }), _jsx("input", { style: loginStyles.input, type: "text", value: orgIdInput, onChange: e => setOrgIdInput(e.target.value), placeholder: "\u81EA\u52D5\u9078\u629E (\u7A7A\u6B04)", disabled: status === 'loading' })] })] })), _jsxs("div", { style: styles.versionFooter, children: ["@geniee-inc/sfa-kit v", SFA_KIT_VERSION] })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Geniee logo mark (inline SVG)
+// ---------------------------------------------------------------------------
+function GenieeLogoMark() {
+    return (_jsxs("svg", { viewBox: "0 0 40 40", width: "40", height: "40", style: { flexShrink: 0 }, "aria-hidden": "true", children: [_jsx("circle", { cx: "20", cy: "20", r: "19", fill: "#2C3E82" }), _jsx("circle", { cx: "22", cy: "13", r: "4.5", fill: "#ffffff" }), _jsx("path", { d: "M27 19 C33 22 30 37 20 37 C13 37 11 29 14 26 C16 24 20 22 24 19 Z", fill: "#ffffff" })] }));
+}
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+const GENIEE_DARK_BLUE = '#2C3E82';
+const loginStyles = {
+    backdrop: Object.assign(Object.assign({}, baseContainerStyle), { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', backgroundColor: '#f7f8fa' }),
+    card: {
+        width: '100%',
+        maxWidth: 440,
+        padding: `${space.xl + 8}px ${space.xl}px ${space.xl}px`,
+        backgroundColor: '#ffffff',
+        borderRadius: 8,
+        border: `1px solid ${color.border}`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.lg,
+        boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+    },
+    logoGroup: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+        marginBottom: space.sm,
+    },
+    logoText: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    logoGeniee: {
+        fontSize: 13,
+        fontWeight: 700,
+        color: GENIEE_DARK_BLUE,
+        letterSpacing: '0.08em',
+        lineHeight: 1,
+    },
+    logoProduct: {
+        fontSize: 28,
+        fontWeight: 700,
+        color: GENIEE_DARK_BLUE,
+        lineHeight: 1.1,
+        letterSpacing: '-0.01em',
+    },
+    label: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0,
+        position: 'relative',
+    },
+    labelText: {
+        fontSize: 12,
+        fontWeight: 400,
+        color: color.textSecondary,
+        position: 'absolute',
+        top: -8,
+        left: 12,
+        backgroundColor: '#ffffff',
+        padding: '0 4px',
+        zIndex: 1,
+    },
+    input: {
+        padding: '14px 14px',
+        border: `1px solid ${color.border}`,
+        borderRadius: 4,
+        fontSize: 16,
+        color: color.textPrimary,
+        backgroundColor: '#ffffff',
+        fontFamily: font.family,
+        outline: 'none',
+        transition: 'border-color 0.15s',
+        lineHeight: '22px',
+    },
+    submitButton: Object.assign(Object.assign({}, baseButtonStyle), { padding: '14px 16px', backgroundColor: GENIEE_DARK_BLUE, color: '#ffffff', border: 'none', fontSize: 16, fontWeight: 700, borderRadius: 4, marginTop: space.xs }),
+    configToggle: {
+        background: 'none',
+        border: 'none',
+        color: color.textSecondary,
+        fontSize: font.sizeSm,
+        cursor: 'pointer',
+        textAlign: 'left',
+        padding: 0,
+        fontFamily: font.family,
+    },
+    configSection: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.md,
+        padding: space.sm,
+        backgroundColor: color.bgDefault,
+        borderRadius: radius.sm,
+        border: `1px solid ${color.border}`,
+    },
+    configLabel: {
+        fontSize: 11,
+        fontWeight: 400,
+        color: color.textSecondary,
+        position: 'absolute',
+        top: -8,
+        left: 12,
+        backgroundColor: color.bgDefault,
+        padding: '0 4px',
+        zIndex: 1,
+    },
+};
+const styles = {
+    backdrop: Object.assign(Object.assign({}, baseContainerStyle), { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', backgroundColor: color.bgDefault }),
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        padding: space.xl,
+        backgroundColor: color.bgSurface,
+        borderRadius: radius.sm,
+        border: `1px solid ${color.border}`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.md,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: font.weightMedium,
+        margin: 0,
+        color: color.textPrimary,
+    },
+    subtitle: {
+        fontSize: font.sizeMd,
+        color: color.textSecondary,
+        margin: 0,
+    },
+    error: {
+        padding: `10px ${space.sm}px`,
+        backgroundColor: color.errorLight,
+        border: `1px solid ${color.error}`,
+        borderRadius: radius.sm,
+        color: color.error,
+        fontSize: font.sizeMd,
+    },
+    reloadButton: Object.assign(Object.assign({}, baseButtonStyle), { padding: '12px 24px', backgroundColor: GENIEE_DARK_BLUE, color: '#ffffff', border: 'none', fontSize: font.sizeMd, fontWeight: font.weightMedium, borderRadius: 4 }),
+    versionFooter: {
+        textAlign: 'center',
+        fontSize: font.sizeXs,
+        color: color.textMuted,
+        marginTop: space.xs,
+    },
+};

package/src/lib/auth/StandalonePreviewContext.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @description State managed by the DevToolbar in standalone (non-embedded) mode.
+ * Mirrors the shape of EmbedContext so useEmbedContext() can fall back to it.
+ */
+export interface StandalonePreviewState {
+    readonly object_key: string;
+    readonly record_id?: string;
+}
+export interface StandalonePreviewControls {
+    readonly state: StandalonePreviewState | null;
+    readonly setObjectKey: (key: string) => void;
+    readonly setRecordId: (id: string) => void;
+    readonly triggerFetch: () => void;
+    /** Increments on each triggerFetch call so consumers can react. */
+    readonly fetchGeneration: number;
+}
+/**
+ * @description React context carrying standalone preview state.
+ * Populated only in standalone mode by StandaloneFlow's DevToolbar.
+ * useEmbedContext() checks this as a fallback when EmbedContext is null.
+ */
+export declare const StandalonePreviewCtx: import("react").Context<StandalonePreviewControls | null>;
+/**
+ * @description Hook to access standalone preview controls from the DevToolbar.
+ * Returns null when not in standalone mode (i.e. when embedded).
+ */
+export declare function useStandalonePreview(): StandalonePreviewControls | null;

package/src/lib/auth/StandalonePreviewContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+/**
+ * @description React context carrying standalone preview state.
+ * Populated only in standalone mode by StandaloneFlow's DevToolbar.
+ * useEmbedContext() checks this as a fallback when EmbedContext is null.
+ */
+export const StandalonePreviewCtx = createContext(null);
+/**
+ * @description Hook to access standalone preview controls from the DevToolbar.
+ * Returns null when not in standalone mode (i.e. when embedded).
+ */
+export function useStandalonePreview() {
+    return useContext(StandalonePreviewCtx);
+}

package/src/lib/auth/embed-protocol.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @description postMessage protocol between the SFA/CRM host and
+ * an embedded sfa-kit iframe. Both sides MUST validate origins:
+ * the sender uses an explicit targetOrigin, the receiver checks event.origin.
+ */
+/** Sent by the iframe after its message listener is registered. */
+export interface EmbedReadyMessage {
+    readonly type: 'sfa-kit:ready';
+}
+/**
+ * @description Runtime context injected by the SFA/CRM host alongside the
+ * exchange code. Tells the embedded page which object and (for record-level
+ * pages) which record it should display.
+ */
+export interface EmbedContext {
+    readonly object_key: string;
+    readonly record_id?: string;
+}
+/** Sent by the host to deliver a single-use exchange code. */
+export interface EmbedCodeMessage {
+    readonly type: 'sfa-kit:code';
+    readonly code: string;
+    readonly context?: EmbedContext;
+}
+/** Sent by the iframe to request a fresh code (pre-expiry refresh or 401 fallback). */
+export interface EmbedCodeRequestMessage {
+    readonly type: 'sfa-kit:code-request';
+}
+export type EmbedInboundMessage = EmbedCodeMessage;
+export type EmbedOutboundMessage = EmbedReadyMessage | EmbedCodeRequestMessage;
+/**
+ * @description Type-guard for messages arriving from the host.
+ * Returns the typed message only when both the shape and the origin match.
+ */
+export declare function parseInboundMessage(event: MessageEvent, trustedOrigin: string): EmbedInboundMessage | null;
+/**
+ * @description Send a typed message to the host frame with an explicit targetOrigin.
+ * Never uses '*' as targetOrigin.
+ */
+export declare function sendToHost(message: EmbedOutboundMessage, targetOrigin: string): void;

package/src/lib/auth/embed-protocol.js

@@ -0,0 +1,56 @@
+/**
+ * @description postMessage protocol between the SFA/CRM host and
+ * an embedded sfa-kit iframe. Both sides MUST validate origins:
+ * the sender uses an explicit targetOrigin, the receiver checks event.origin.
+ */
+const VALID_INBOUND_TYPES = new Set(['sfa-kit:code']);
+/**
+ * @description Type-guard for messages arriving from the host.
+ * Returns the typed message only when both the shape and the origin match.
+ */
+export function parseInboundMessage(event, trustedOrigin) {
+    if (event.origin !== trustedOrigin)
+        return null;
+    const data = event.data;
+    if (typeof data !== 'object' || data == null)
+        return null;
+    const candidate = data;
+    if (typeof candidate['type'] !== 'string')
+        return null;
+    if (!VALID_INBOUND_TYPES.has(candidate['type']))
+        return null;
+    if (candidate['type'] === 'sfa-kit:code') {
+        if (typeof candidate['code'] !== 'string')
+            return null;
+        if (candidate['code'].length === 0)
+            return null;
+        const result = {
+            type: 'sfa-kit:code',
+            code: candidate['code'],
+        };
+        const rawContext = candidate['context'];
+        if (typeof rawContext === 'object' && rawContext != null) {
+            const ctx = rawContext;
+            if (typeof ctx['object_key'] === 'string' &&
+                ctx['object_key'].length > 0) {
+                const context = { object_key: ctx['object_key'] };
+                if (typeof ctx['record_id'] === 'string' &&
+                    ctx['record_id'].length > 0) {
+                    return Object.assign(Object.assign({}, result), { context: Object.assign(Object.assign({}, context), { record_id: ctx['record_id'] }) });
+                }
+                return Object.assign(Object.assign({}, result), { context });
+            }
+        }
+        return result;
+    }
+    return null;
+}
+/**
+ * @description Send a typed message to the host frame with an explicit targetOrigin.
+ * Never uses '*' as targetOrigin.
+ */
+export function sendToHost(message, targetOrigin) {
+    if (!window.parent || window.parent === window)
+        return;
+    window.parent.postMessage(message, targetOrigin);
+}

package/src/lib/auth/exchange-code.d.ts

@@ -0,0 +1,14 @@
+import type { SfaSession } from './types';
+/**
+ * @description Exchange a single-use code for a Keystone JWT via POST /v1/auth/exchange.
+ * The code is consumed on verification regardless of outcome. On any failure,
+ * obtain a fresh code from the host rather than retrying the same one.
+ */
+export declare function exchangeCode(apiBase: string, code: string): Promise<SfaSession>;
+/**
+ * @description Error from the exchange endpoint with the HTTP status preserved.
+ */
+export declare class ExchangeError extends Error {
+    readonly httpStatus: number;
+    constructor(message: string, httpStatus: number);
+}

package/src/lib/auth/exchange-code.js

@@ -0,0 +1,45 @@
+import { __awaiter } from "tslib";
+import { authTimeoutSignal, decodeJwtPayload } from './keystone-auth';
+/**
+ * @description Exchange a single-use code for a Keystone JWT via POST /v1/auth/exchange.
+ * The code is consumed on verification regardless of outcome. On any failure,
+ * obtain a fresh code from the host rather than retrying the same one.
+ */
+export function exchangeCode(apiBase, code) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const response = yield globalThis.fetch(`${apiBase}/v1/auth/exchange`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ code }),
+            signal: authTimeoutSignal(),
+        });
+        if (response.status === 503) {
+            throw new ExchangeError('SFA/CRM is temporarily unavailable. A new code will be requested.', 503);
+        }
+        if (!response.ok) {
+            const text = yield response.text().catch(() => '');
+            throw new ExchangeError(`Exchange failed: ${response.status} ${response.statusText}${text ? ` — ${text}` : ''}`, response.status);
+        }
+        const data = (yield response.json());
+        if (!data.access_token || typeof data.expires_in !== 'number') {
+            throw new ExchangeError('Exchange response missing access_token or expires_in', 0);
+        }
+        const claims = decodeJwtPayload(data.access_token);
+        return {
+            accessToken: data.access_token,
+            expiresAt: Date.now() + data.expires_in * 1000,
+            organizationId: String((_a = claims['organization_id']) !== null && _a !== void 0 ? _a : ''),
+        };
+    });
+}
+/**
+ * @description Error from the exchange endpoint with the HTTP status preserved.
+ */
+export class ExchangeError extends Error {
+    constructor(message, httpStatus) {
+        super(message);
+        this.name = 'ExchangeError';
+        this.httpStatus = httpStatus;
+    }
+}