@ankhorage/studio 0.3.0 → 0.5.0

package/dist/ui/StudioAuthSettingsOverlay.js

@@ -0,0 +1,607 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DEFAULT_AUTH_FLOW, } from '@ankhorage/contracts';
+import { getSupabaseOAuthProviderDefinition, SUPABASE_OAUTH_PROVIDER_IDS, } from '@ankhorage/supabase-auth';
+import { Heading, IconButton, Text, useZoraTheme } from '@ankhorage/zora';
+import { useRouter } from 'expo-router';
+import React, { useCallback, useEffect, useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, StyleSheet, Switch, TextInput, View, } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { readStudioAuthSettings } from '../authSettings';
+import { getProjectAuthHealth, getProjectAuthSettings, ProjectAuthApiError, saveProjectAuthSettings, } from '../projectAuthApi';
+import { configureProjectOAuthProvider } from '../projectSecretApi';
+const SIGN_IN_IDENTIFIERS = ['email', 'phone', 'username'];
+const PROFILE_FIELDS = [
+    'email',
+    'phone',
+    'username',
+    'firstName',
+    'lastName',
+    'displayName',
+    'avatarUrl',
+];
+export function StudioAuthSettingsOverlay(props) {
+    const { projectId, manifest, onClose } = props;
+    const { theme } = useZoraTheme();
+    const router = useRouter();
+    const [draft, setDraft] = useState(() => readStudioAuthSettings(manifest ?? createFallbackManifest()) ?? createDefaultSettings());
+    const [health, setHealth] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [message, setMessage] = useState(null);
+    const [partialFailure, setPartialFailure] = useState(null);
+    const reload = useCallback(async () => {
+        setLoading(true);
+        try {
+            const [loaded, loadedHealth] = await Promise.all([
+                getProjectAuthSettings(projectId),
+                getProjectAuthHealth({ projectId, environment: 'local' }),
+            ]);
+            setDraft(loaded ?? createDefaultSettings());
+            setHealth(loadedHealth);
+            setPartialFailure(null);
+            setMessage(null);
+        }
+        catch (error) {
+            const local = manifest ? readStudioAuthSettings(manifest) : null;
+            if (local)
+                setDraft(local);
+            setMessage(toMessage(error));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [manifest, projectId]);
+    useEffect(() => {
+        void reload();
+    }, [reload]);
+    const refreshHealth = useCallback(async () => {
+        try {
+            setHealth(await getProjectAuthHealth({ projectId, environment: 'local' }));
+        }
+        catch (error) {
+            setMessage(toMessage(error));
+        }
+    }, [projectId]);
+    const save = useCallback(async () => {
+        setSaving(true);
+        setMessage(null);
+        try {
+            const saved = await saveProjectAuthSettings({ projectId, config: draft });
+            setDraft(saved);
+            setHealth(await getProjectAuthHealth({ projectId, environment: 'local' }));
+            setPartialFailure(null);
+            setMessage('Authentication configuration saved to the Studio manifest draft.');
+        }
+        catch (error) {
+            setMessage(toMessage(error));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [draft, projectId]);
+    const retryPartialFailure = useCallback(async () => {
+        if (!partialFailure)
+            return;
+        setSaving(true);
+        setMessage(null);
+        try {
+            const persisted = (await getProjectAuthSettings(projectId)) ?? createDefaultSettings();
+            const persistedOAuth = persisted.oauth ?? createDefaultOAuth();
+            await saveProjectAuthSettings({
+                projectId,
+                config: {
+                    ...persisted,
+                    oauth: {
+                        ...persistedOAuth,
+                        providers: upsertProvider(persistedOAuth.providers, partialFailure.intendedProvider),
+                    },
+                },
+            });
+            setDraft((current) => {
+                const currentOAuth = current.oauth ?? createDefaultOAuth();
+                return {
+                    ...current,
+                    oauth: {
+                        ...currentOAuth,
+                        providers: upsertProvider(currentOAuth.providers, partialFailure.intendedProvider),
+                    },
+                };
+            });
+            await refreshHealth();
+            setPartialFailure(null);
+            setMessage(`Linked ${partialFailure.credentialsRef} to the provider configuration.`);
+        }
+        catch (error) {
+            setMessage(toMessage(error));
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [partialFailure, projectId, refreshHealth]);
+    const authEnabled = draft.scope !== 'none';
+    const signUpEnabled = draft.signUp !== undefined;
+    const profileEnabled = draft.profile !== undefined;
+    const oauth = draft.oauth ?? createDefaultOAuth();
+    return (_jsxs(SafeAreaView, { style: [
+            styles.overlay,
+            { backgroundColor: theme.colors.background, borderColor: theme.colors.border },
+        ], children: [_jsxs(View, { style: [styles.header, { borderBottomColor: theme.colors.border }], children: [_jsxs(View, { style: styles.grow, children: [_jsx(Heading, { level: 2, text: "Authentication" }), _jsx(Text, { color: "neutral", emphasis: "muted", variant: "bodySmall", children: "Configure canonical auth methods, routes, profile settings, and provider activation." })] }), _jsx(IconButton, { icon: { name: 'close-outline' }, label: "Close authentication settings", color: "neutral", variant: "ghost", onPress: onClose })] }), _jsxs(ScrollView, { contentContainerStyle: styles.content, keyboardShouldPersistTaps: "handled", children: [loading ? _jsx(ActivityIndicator, {}) : null, _jsx(AuthHealthCard, { health: health }), _jsxs(Card, { title: "Overview", children: [_jsx(SwitchSetting, { title: "Authentication enabled", description: "Disabling auth keeps the configuration but sets the canonical scope to none.", value: authEnabled, onValueChange: (enabled) => setDraft((current) => ({ ...current, scope: enabled ? 'global' : 'none' })) }), _jsx(KeyValue, { label: "Provider", value: "Supabase" }), _jsx(KeyValue, { label: "Configuration source", value: "infra.auth" }), _jsx(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: "Roles, RBAC, ABAC, registered users, and user passwords are intentionally not managed here." })] }), _jsxs(Card, { title: "Email and password", children: [_jsx(Text, { weight: "semiBold", children: "Sign-in identifiers" }), _jsx(View, { style: styles.choiceRow, children: SIGN_IN_IDENTIFIERS.map((identifier) => {
+                                    const selected = draft.signIn.identifiers.includes(identifier);
+                                    return (_jsx(Choice, { label: identifier, selected: selected, onPress: () => setDraft((current) => {
+                                            const identifiers = selected
+                                                ? current.signIn.identifiers.filter((value) => value !== identifier)
+                                                : [...current.signIn.identifiers, identifier];
+                                            if (identifiers.length === 0)
+                                                return current;
+                                            return { ...current, signIn: { identifiers } };
+                                        }) }, identifier));
+                                }) }), _jsx(SwitchSetting, { title: "Public sign-up enabled", description: "When disabled, sign-up configuration is removed from the desired state.", value: signUpEnabled, onValueChange: (enabled) => setDraft((current) => enabled
+                                    ? {
+                                        ...current,
+                                        signUp: current.signUp ?? {
+                                            requiredFields: ['email', 'password'],
+                                            optionalFields: [],
+                                            signUpPolicy: 'requireVerification',
+                                        },
+                                    }
+                                    : omitSignUp(current)) }), draft.signUp ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Required sign-up fields (comma-separated)", children: _jsx(Input, { value: draft.signUp.requiredFields.join(', '), autoCapitalize: "none", onChangeText: (value) => setDraft((current) => current.signUp
+                                                ? {
+                                                    ...current,
+                                                    signUp: {
+                                                        ...current.signUp,
+                                                        requiredFields: splitList(value),
+                                                    },
+                                                }
+                                                : current) }) }), _jsx(Field, { label: "Optional sign-up fields (comma-separated)", children: _jsx(Input, { value: (draft.signUp.optionalFields ?? []).join(', '), autoCapitalize: "none", onChangeText: (value) => setDraft((current) => current.signUp
+                                                ? {
+                                                    ...current,
+                                                    signUp: {
+                                                        ...current.signUp,
+                                                        optionalFields: splitList(value),
+                                                    },
+                                                }
+                                                : current) }) }), _jsx(SwitchSetting, { title: "Email confirmation required", description: "Uses the canonical requireVerification sign-up policy.", value: draft.signUp.signUpPolicy === 'requireVerification', onValueChange: (required) => setDraft((current) => current.signUp
+                                            ? {
+                                                ...current,
+                                                signUp: {
+                                                    ...current.signUp,
+                                                    signUpPolicy: required ? 'requireVerification' : 'autoSignIn',
+                                                },
+                                            }
+                                            : current) })] })) : null, _jsx(Field, { label: "Forgot-password route", children: _jsx(Input, { value: draft.flow.forgotPasswordRoute ?? '', autoCapitalize: "none", onChangeText: (forgotPasswordRoute) => setDraft((current) => ({
+                                        ...current,
+                                        flow: {
+                                            ...current.flow,
+                                            ...(forgotPasswordRoute.trim() ? { forgotPasswordRoute } : {}),
+                                        },
+                                    })) }) })] }), _jsxs(Card, { title: "Routes", children: [_jsx(RouteField, { label: "Sign-in route", value: draft.flow.signInRoute, onChange: (signInRoute) => updateFlow(setDraft, { signInRoute }) }), _jsx(RouteField, { label: "Sign-up route", value: draft.flow.signUpRoute ?? '', onChange: (signUpRoute) => updateFlow(setDraft, { signUpRoute }) }), _jsx(RouteField, { label: "Sign-out route", value: draft.flow.signOutRoute ?? '', onChange: (signOutRoute) => updateFlow(setDraft, { signOutRoute }) }), _jsx(RouteField, { label: "Post-sign-in route", value: draft.flow.postSignInRoute, onChange: (postSignInRoute) => updateFlow(setDraft, { postSignInRoute }) }), _jsx(RouteField, { label: "Unauthorized route", value: draft.flow.unauthorizedRoute ?? '', onChange: (unauthorizedRoute) => updateFlow(setDraft, { unauthorizedRoute }) })] }), _jsxs(Card, { title: "OAuth providers", children: [_jsx(SwitchSetting, { title: "OAuth enabled", description: "Provider credentials remain in the server-side secret store.", value: oauth.enabled, onValueChange: (enabled) => setDraft((current) => ({
+                                    ...current,
+                                    oauth: { ...(current.oauth ?? createDefaultOAuth()), enabled },
+                                })) }), _jsx(Field, { label: "Callback route", children: _jsx(Input, { value: oauth.callbackRoute, autoCapitalize: "none", onChangeText: (callbackRoute) => setDraft((current) => ({
+                                        ...current,
+                                        oauth: { ...(current.oauth ?? createDefaultOAuth()), callbackRoute },
+                                    })) }) }), SUPABASE_OAUTH_PROVIDER_IDS.map((providerId) => (_jsx(OAuthProviderSetting, { projectId: projectId, providerId: providerId, oauth: oauth, providerHealth: health?.providers.find((provider) => provider.providerId === providerId), onChange: (nextOAuth, nextMessage) => {
+                                    setDraft((current) => ({ ...current, oauth: nextOAuth }));
+                                    setMessage(nextMessage);
+                                }, onSaved: (nextOAuth, nextMessage) => {
+                                    setDraft((current) => ({ ...current, oauth: nextOAuth }));
+                                    setMessage(nextMessage);
+                                    setPartialFailure(null);
+                                    void refreshHealth();
+                                }, onPartialFailure: (failure) => {
+                                    setPartialFailure(failure);
+                                    setMessage(`${failure.credentialsRef} was saved, but the manifest link failed. Retry the link or open project secrets for cleanup.`);
+                                } }, providerId))), partialFailure ? (_jsxs(View, { style: styles.partialFailure, children: [_jsx(Text, { color: "warning", weight: "semiBold", children: "Credential secret saved, manifest link failed." }), _jsxs(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: ["Ref: ", partialFailure.credentialsRef] }), _jsxs(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: ["Configured fields: ", partialFailure.configuredFields.join(', ') || 'none'] }), _jsxs(View, { style: styles.actions, children: [_jsx(SecondaryButton, { label: "Retry manifest link", onPress: () => void retryPartialFailure() }), _jsx(SecondaryButton, { label: "Open cleanup", onPress: () => {
+                                                    router.push('/ankh/secrets');
+                                                } })] })] })) : null, _jsx(View, { style: styles.actions, children: _jsx(SecondaryButton, { label: "Open project secrets", onPress: () => {
+                                        router.push('/ankh/secrets');
+                                    } }) })] }), _jsxs(Card, { title: "Profile", children: [_jsx(SwitchSetting, { title: "Profile table enabled", description: "Profiles are separate from Supabase Auth users. The users table is not an option.", value: profileEnabled, onValueChange: (enabled) => setDraft((current) => enabled
+                                    ? {
+                                        ...current,
+                                        profile: current.profile ?? {
+                                            table: 'profiles',
+                                            fields: ['email', 'displayName', 'avatarUrl'],
+                                            primaryKey: 'authUserId',
+                                            createStrategy: 'trigger',
+                                            updateStrategy: 'api',
+                                        },
+                                    }
+                                    : omitProfile(current)) }), draft.profile ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Profile table", children: _jsx(Input, { value: draft.profile.table ?? 'profiles', autoCapitalize: "none", onChangeText: (table) => setDraft((current) => current.profile
+                                                ? { ...current, profile: { ...current.profile, table } }
+                                                : current) }) }), _jsx(Text, { weight: "semiBold", children: "Profile fields" }), _jsx(View, { style: styles.choiceRow, children: PROFILE_FIELDS.map((field) => {
+                                            const selected = draft.profile?.fields.includes(field) ?? false;
+                                            return (_jsx(Choice, { label: field, selected: selected, onPress: () => setDraft((current) => {
+                                                    if (!current.profile)
+                                                        return current;
+                                                    const fields = selected
+                                                        ? current.profile.fields.filter((value) => value !== field)
+                                                        : [...current.profile.fields, field];
+                                                    return {
+                                                        ...current,
+                                                        profile: { ...current.profile, fields },
+                                                    };
+                                                }) }, field));
+                                        }) }), _jsx(KeyValue, { label: "Primary key", value: "authUserId" }), _jsx(Field, { label: "Create strategy", children: _jsx(View, { style: styles.choiceRow, children: ['trigger', 'api', 'app'].map((strategy) => (_jsx(Choice, { label: strategy, selected: draft.profile?.createStrategy === strategy, onPress: () => setDraft((current) => current.profile
+                                                    ? {
+                                                        ...current,
+                                                        profile: { ...current.profile, createStrategy: strategy },
+                                                    }
+                                                    : current) }, strategy))) }) }), _jsx(Field, { label: "Update strategy", children: _jsx(View, { style: styles.choiceRow, children: ['api', 'app'].map((strategy) => (_jsx(Choice, { label: strategy, selected: draft.profile?.updateStrategy === strategy, onPress: () => setDraft((current) => current.profile
+                                                    ? {
+                                                        ...current,
+                                                        profile: { ...current.profile, updateStrategy: strategy },
+                                                    }
+                                                    : current) }, strategy))) }) })] })) : null] }), _jsxs(View, { style: styles.footerActions, children: [_jsx(SecondaryButton, { label: "Reload", onPress: () => void reload() }), _jsx(PrimaryButton, { label: "Save authentication", loading: saving, onPress: () => void save() })] }), message ? _jsx(Message, { text: message }) : null] })] }));
+}
+function OAuthProviderSetting(props) {
+    const definition = getSupabaseOAuthProviderDefinition(props.providerId);
+    const current = props.oauth.providers.find((provider) => provider.id === props.providerId);
+    const requiredFields = props.providerHealth?.requiredFields ??
+        definition?.secretFields.map((field) => field.name) ??
+        [];
+    const configuredFields = props.providerHealth?.configuredFields ?? [];
+    const credentialsComplete = definition !== null &&
+        Boolean(current?.credentialsRef) &&
+        requiredFields.length > 0 &&
+        requiredFields.every((field) => configuredFields.includes(field));
+    const enabled = current?.enabled === true;
+    const [credentialValues, setCredentialValues] = useState({});
+    const [savingCredentials, setSavingCredentials] = useState(false);
+    const [credentialMessage, setCredentialMessage] = useState(null);
+    const setEnabled = (nextEnabled) => {
+        if (nextEnabled && !credentialsComplete) {
+            props.onChange(props.oauth, `Complete ${definition?.label ?? props.providerId} credentials before enabling the provider.`);
+            return;
+        }
+        const nextProvider = {
+            ...(current ?? {
+                id: props.providerId,
+                label: definition?.label ?? props.providerId,
+                scopes: [...(definition?.defaultScopes ?? [])],
+            }),
+            enabled: nextEnabled,
+        };
+        props.onChange({
+            ...props.oauth,
+            providers: upsertProvider(props.oauth.providers, nextProvider),
+        }, null);
+    };
+    const saveCredentials = async () => {
+        if (!definition) {
+            setCredentialMessage('The selected OAuth provider is not supported.');
+            return;
+        }
+        const entries = definition.secretFields.map((field) => [field.name, credentialValues[field.name] ?? '']);
+        if (entries.some(([, value]) => !value)) {
+            setCredentialMessage('Enter a complete credential payload. Existing values cannot be merged.');
+            return;
+        }
+        const credentialsRef = current?.credentialsRef ?? `auth/oauth/${props.providerId}`;
+        const intendedProvider = {
+            ...(current ?? {
+                id: props.providerId,
+                label: definition.label,
+                scopes: [...definition.defaultScopes],
+            }),
+            enabled,
+            credentialsRef,
+        };
+        const intendedOAuth = {
+            ...props.oauth,
+            providers: upsertProvider(props.oauth.providers, intendedProvider),
+        };
+        setSavingCredentials(true);
+        setCredentialMessage(null);
+        try {
+            const result = await configureProjectOAuthProvider({
+                projectId: props.projectId,
+                providerId: props.providerId,
+                environment: 'local',
+                credentialsRef,
+                enabled,
+                label: current?.label ?? definition.label,
+                scopes: current?.scopes ?? definition.defaultScopes,
+                payload: Object.freeze(Object.fromEntries(entries)),
+            });
+            if (result.ok) {
+                props.onSaved(mergeOAuthProviderCredentialsRef(intendedOAuth, intendedProvider, result.credentialsRef), `${definition.label} credentials saved through ${result.credentialsRef}.`);
+                return;
+            }
+            if (result.state === 'secret_saved_manifest_failed' &&
+                result.credentialsRef &&
+                result.metadata) {
+                props.onPartialFailure({
+                    state: 'secret_saved_manifest_failed',
+                    providerId: props.providerId,
+                    credentialsRef: result.credentialsRef,
+                    configuredFields: result.metadata.configuredFields,
+                    intendedProvider: {
+                        ...intendedProvider,
+                        credentialsRef: result.credentialsRef,
+                    },
+                });
+                return;
+            }
+            setCredentialMessage(result.error.message);
+        }
+        catch (error) {
+            setCredentialMessage(toMessage(error));
+        }
+        finally {
+            setCredentialValues({});
+            setSavingCredentials(false);
+        }
+    };
+    return (_jsxs(View, { style: styles.providerPanel, children: [_jsxs(View, { style: styles.providerRow, children: [_jsxs(View, { style: styles.grow, children: [_jsx(Text, { weight: "semiBold", children: definition?.label ?? props.providerId }), _jsxs(Text, { color: credentialsComplete ? 'success' : 'warning', emphasis: "muted", variant: "caption", children: [formatProviderHealthStatus(props.providerHealth?.status ?? 'missing'), current?.credentialsRef ? `: ${current.credentialsRef}` : ''] }), _jsxs(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: ["Required fields: ", props.providerHealth?.requiredFields.join(', ') || 'loading'] })] }), _jsx(Switch, { value: enabled, onValueChange: setEnabled })] }), definition?.secretFields.map((field) => (_jsx(Field, { label: field.label, children: _jsx(Input, { value: credentialValues[field.name] ?? '', secureTextEntry: field.secret, autoCapitalize: "none", placeholder: credentialsComplete ? 'Enter complete replacement value' : field.label, onChangeText: (value) => setCredentialValues((currentValues) => ({
+                        ...currentValues,
+                        [field.name]: value,
+                    })) }) }, field.name))), _jsx(View, { style: styles.actions, children: _jsx(PrimaryButton, { label: credentialsComplete ? 'Replace credentials' : 'Save credentials', loading: savingCredentials, onPress: () => void saveCredentials() }) }), credentialMessage ? _jsx(Message, { text: credentialMessage }) : null] }));
+}
+function mergeOAuthProviderCredentialsRef(oauth, provider, credentialsRef) {
+    return {
+        ...oauth,
+        providers: upsertProvider(oauth.providers, {
+            ...provider,
+            credentialsRef,
+        }),
+    };
+}
+function upsertProvider(providers, provider) {
+    const index = providers.findIndex((candidate) => candidate.id === provider.id);
+    if (index < 0)
+        return [...providers, provider];
+    return providers.map((candidate, candidateIndex) => candidateIndex === index ? provider : candidate);
+}
+function updateFlow(setDraft, patch) {
+    setDraft((current) => ({ ...current, flow: { ...current.flow, ...patch } }));
+}
+function omitSignUp(settings) {
+    const { signUp: _signUp, ...rest } = settings;
+    return rest;
+}
+function omitProfile(settings) {
+    const { profile: _profile, ...rest } = settings;
+    return rest;
+}
+function createDefaultSettings() {
+    return {
+        scope: 'none',
+        provider: 'supabase',
+        flow: { ...DEFAULT_AUTH_FLOW },
+        signIn: { identifiers: ['email'] },
+        oauth: createDefaultOAuth(),
+    };
+}
+function createDefaultOAuth() {
+    return {
+        enabled: false,
+        callbackRoute: '/auth/callback',
+        providers: [],
+    };
+}
+function createFallbackManifest() {
+    return {
+        metadata: { name: 'App', slug: 'app', version: '1.0.0', themeId: 'default' },
+        settings: { localization: { defaultLocale: 'en', locales: ['en'] } },
+        infra: { plugins: [] },
+        navigator: { type: 'stack', routes: [] },
+        screens: {},
+        themes: [],
+        activeThemeId: 'default',
+    };
+}
+function splitList(value) {
+    return [
+        ...new Set(value
+            .split(',')
+            .map((entry) => entry.trim())
+            .filter(Boolean)),
+    ];
+}
+function toMessage(error) {
+    if (error instanceof ProjectAuthApiError)
+        return error.message;
+    return error instanceof Error ? error.message : 'Authentication configuration request failed.';
+}
+function AuthHealthCard({ health }) {
+    if (!health) {
+        return (_jsx(Card, { title: "Health", children: _jsx(Text, { color: "neutral", emphasis: "muted", variant: "bodySmall", children: "Auth health is unavailable." }) }));
+    }
+    return (_jsxs(Card, { title: "Health", children: [_jsx(Text, { color: healthStatusColor(health.status), weight: "semiBold", children: formatHealthStatus(health.status) }), _jsx(KeyValue, { label: "Callback route", value: health.callbackUrls.appCallbackRoute }), health.callbackUrls.providerRedirectUrl ? (_jsx(KeyValue, { label: "Provider redirect URL", value: health.callbackUrls.providerRedirectUrl })) : null, health.providers.map((provider) => (_jsxs(View, { style: styles.healthProvider, children: [_jsxs(Text, { weight: "semiBold", children: [provider.label, ": ", formatProviderHealthStatus(provider.status)] }), _jsxs(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: ["Ref: ", provider.credentialsRef ?? 'none'] }), _jsxs(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: ["Required fields: ", provider.requiredFields.join(', ') || 'none'] }), _jsxs(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: ["Configured fields: ", provider.configuredFields.join(', ') || 'none'] }), provider.missingFields.length > 0 ? (_jsxs(Text, { color: "warning", variant: "caption", children: ["Missing fields: ", provider.missingFields.join(', ')] })) : null] }, provider.providerId))), health.diagnostics.map((diagnostic) => (_jsxs(View, { style: styles.diagnostic, children: [_jsx(Text, { color: diagnosticSeverityColor(diagnostic.severity), variant: "bodySmall", children: diagnostic.code }), _jsx(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: diagnostic.message })] }, `${diagnostic.code}:${diagnostic.path ?? ''}`))), health.diagnostics.length === 0 ? (_jsx(Text, { color: "success", variant: "bodySmall", children: "No auth diagnostics." })) : null] }));
+}
+function formatHealthStatus(status) {
+    if (status === 'healthy')
+        return 'Healthy';
+    if (status === 'warning')
+        return 'Warning';
+    if (status === 'error')
+        return 'Error';
+    return 'Not configured';
+}
+function formatProviderHealthStatus(status) {
+    if (status === 'configured')
+        return 'Configured';
+    if (status === 'incomplete')
+        return 'Incomplete';
+    if (status === 'missing')
+        return 'Missing secret';
+    if (status === 'invalid')
+        return 'Invalid';
+    return 'Disabled';
+}
+function healthStatusColor(status) {
+    if (status === 'healthy')
+        return 'success';
+    if (status === 'warning')
+        return 'warning';
+    if (status === 'error')
+        return 'danger';
+    return 'neutral';
+}
+function diagnosticSeverityColor(severity) {
+    if (severity === 'error')
+        return 'danger';
+    if (severity === 'warning')
+        return 'warning';
+    return 'neutral';
+}
+function Card(props) {
+    const { theme } = useZoraTheme();
+    return (_jsxs(View, { style: [
+            styles.card,
+            { backgroundColor: theme.colors.surface, borderColor: theme.colors.border },
+        ], children: [_jsx(Heading, { level: 3, text: props.title }), props.children] }));
+}
+function Field(props) {
+    return (_jsxs(View, { style: styles.field, children: [_jsx(Text, { variant: "bodySmall", weight: "semiBold", children: props.label }), props.children] }));
+}
+function RouteField(props) {
+    return (_jsx(Field, { label: props.label, children: _jsx(Input, { value: props.value, autoCapitalize: "none", onChangeText: props.onChange }) }));
+}
+function Input(props) {
+    const { theme } = useZoraTheme();
+    return (_jsx(TextInput, { ...props, placeholderTextColor: theme.colors.textMuted, style: [
+            styles.input,
+            {
+                color: theme.colors.text,
+                backgroundColor: theme.colors.background,
+                borderColor: theme.colors.border,
+            },
+            props.style,
+        ] }));
+}
+function SwitchSetting(props) {
+    return (_jsxs(View, { style: styles.switchRow, children: [_jsxs(View, { style: styles.grow, children: [_jsx(Text, { weight: "semiBold", children: props.title }), _jsx(Text, { color: "neutral", emphasis: "muted", variant: "caption", children: props.description })] }), _jsx(Switch, { value: props.value, onValueChange: props.onValueChange })] }));
+}
+function Choice(props) {
+    const { theme } = useZoraTheme();
+    return (_jsx(Pressable, { onPress: props.onPress, style: [
+            styles.choice,
+            {
+                borderColor: props.selected ? theme.colors.primary : theme.colors.border,
+                backgroundColor: props.selected ? theme.colors.surface : theme.colors.background,
+            },
+        ], children: _jsx(Text, { color: props.selected ? 'primary' : 'neutral', variant: "bodySmall", weight: "semiBold", children: props.label }) }));
+}
+function KeyValue(props) {
+    return (_jsxs(View, { style: styles.keyValue, children: [_jsx(Text, { color: "neutral", emphasis: "muted", variant: "bodySmall", children: props.label }), _jsx(Text, { weight: "semiBold", children: props.value })] }));
+}
+function PrimaryButton(props) {
+    const { theme } = useZoraTheme();
+    return (_jsx(Pressable, { disabled: props.loading, onPress: props.onPress, style: [styles.primaryButton, { backgroundColor: theme.colors.primary }], children: props.loading ? (_jsx(ActivityIndicator, { color: "#ffffff" })) : (_jsx(Text, { emphasis: "inverse", weight: "semiBold", children: props.label })) }));
+}
+function SecondaryButton(props) {
+    const { theme } = useZoraTheme();
+    return (_jsx(Pressable, { onPress: props.onPress, style: [styles.secondaryButton, { borderColor: theme.colors.border }], children: _jsx(Text, { weight: "semiBold", children: props.label }) }));
+}
+function Message({ text }) {
+    return (_jsx(Text, { color: "info", variant: "bodySmall", children: text }));
+}
+const styles = StyleSheet.create({
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 1000,
+        borderWidth: 1,
+    },
+    header: {
+        minHeight: 72,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 16,
+    },
+    content: {
+        width: '100%',
+        maxWidth: 920,
+        alignSelf: 'center',
+        padding: 20,
+        gap: 16,
+    },
+    card: {
+        borderWidth: 1,
+        borderRadius: 14,
+        padding: 16,
+        gap: 14,
+    },
+    grow: { flex: 1 },
+    field: { gap: 6 },
+    input: {
+        minHeight: 42,
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    switchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 16,
+    },
+    choiceRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    choice: {
+        borderWidth: 1,
+        borderRadius: 999,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    providerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 16,
+        paddingVertical: 8,
+    },
+    providerPanel: {
+        gap: 10,
+        paddingVertical: 8,
+    },
+    partialFailure: {
+        gap: 8,
+        paddingVertical: 10,
+    },
+    healthProvider: {
+        gap: 3,
+        paddingVertical: 8,
+    },
+    diagnostic: {
+        gap: 3,
+        paddingVertical: 6,
+    },
+    keyValue: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 16,
+    },
+    actions: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        gap: 10,
+    },
+    footerActions: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        gap: 10,
+    },
+    primaryButton: {
+        minHeight: 42,
+        borderRadius: 8,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    secondaryButton: {
+        minHeight: 42,
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+//# sourceMappingURL=StudioAuthSettingsOverlay.js.map