nucleus-core-ts 0.9.781 → 0.9.783

package/dist/fe/components/IntegrationsPage/components/ConnectionOauthFields.js

@@ -0,0 +1,131 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { integrationsPageTheme } from '../theme';
+import { CLIENT_AUTH_OPTIONS, GRANT_TYPE_OPTIONS, toClientAuth, toGrantType } from './authOptions';
+import { usesOauth } from './connectionDraft';
+import { describedBy } from './formSupport';
+import { Field } from './Primitives';
+/**
+ * The OAuth 2 half of the auth section.
+ *
+ * It renders nothing at all for the other auth types, so the caller can place it
+ * unconditionally and the question "is this connection OAuth" is answered in one
+ * place instead of at every field.
+ */ const theme = integrationsPageTheme;
+export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
+    if (!usesOauth(draft.authType)) return null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Field, {
+                error: errors.tokenUrl,
+                hint: "The full URL the token is fetched from. Same rule as the base URL: any scheme, http included.",
+                htmlFor: "connection-token-url",
+                label: "Token URL",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-token-url', true, Boolean(errors.tokenUrl)),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-token-url",
+                    onChange: (event)=>onChange({
+                            tokenUrl: event.target.value
+                        }),
+                    placeholder: "https://api.example.com/oauth/token",
+                    type: "text",
+                    value: draft.tokenUrl
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                hint: "Client credentials calls as the application. Password calls as a named user and needs that user's name and password.",
+                htmlFor: "connection-grant-type",
+                label: "Grant type",
+                children: /*#__PURE__*/ _jsx("select", {
+                    "aria-describedby": describedBy('connection-grant-type', true, false),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-grant-type",
+                    onChange: (event)=>{
+                        const next = toGrantType(event.target.value);
+                        if (next) onChange({
+                            oauthGrantType: next
+                        });
+                    },
+                    value: draft.oauthGrantType,
+                    children: GRANT_TYPE_OPTIONS.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                htmlFor: "connection-client-id",
+                label: "Client ID",
+                children: /*#__PURE__*/ _jsx("input", {
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-client-id",
+                    onChange: (event)=>onChange({
+                            oauthClientId: event.target.value
+                        }),
+                    placeholder: "integration-client",
+                    type: "text",
+                    value: draft.oauthClientId
+                })
+            }),
+            draft.oauthGrantType === 'password' ? /*#__PURE__*/ _jsx(Field, {
+                htmlFor: "connection-oauth-username",
+                label: "User name",
+                children: /*#__PURE__*/ _jsx("input", {
+                    autoComplete: "off",
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-oauth-username",
+                    onChange: (event)=>onChange({
+                            oauthUsername: event.target.value
+                        }),
+                    placeholder: "service-account",
+                    type: "text",
+                    value: draft.oauthUsername
+                })
+            }) : null,
+            /*#__PURE__*/ _jsx(Field, {
+                hint: "Space-separated. Leave it empty to take whatever the token endpoint grants by default.",
+                htmlFor: "connection-scope",
+                label: "Scope",
+                children: /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": describedBy('connection-scope', true, false),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-scope",
+                    onChange: (event)=>onChange({
+                            oauthScope: event.target.value
+                        }),
+                    placeholder: "read:records",
+                    type: "text",
+                    value: draft.oauthScope
+                })
+            }),
+            /*#__PURE__*/ _jsx(Field, {
+                hint: "Where the client ID and secret go on the token request. A server accepts one or the other; if the token call comes back with an invalid-client error, try the other.",
+                htmlFor: "connection-client-auth",
+                label: "Client authentication",
+                children: /*#__PURE__*/ _jsx("select", {
+                    "aria-describedby": describedBy('connection-client-auth', true, false),
+                    className: theme.field.input,
+                    disabled: disabled,
+                    id: "connection-client-auth",
+                    onChange: (event)=>{
+                        const next = toClientAuth(event.target.value);
+                        if (next) onChange({
+                            oauthClientAuth: next
+                        });
+                    },
+                    value: draft.oauthClientAuth,
+                    children: CLIENT_AUTH_OPTIONS.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/ConnectionSettingsTab.d.ts

@@ -0,0 +1,21 @@
+import type { IntegrationSource, IntegrationsActions } from '../types';
+export type ConnectionSettingsTabProps = {
+    actions: IntegrationsActions;
+    /** Called after a NEW connection is saved, so the list can pick it up. */
+    onSaved?: (source: IntegrationSource) => void;
+};
+/**
+ * Everything about the connection itself: its address and authentication, its
+ * credentials, and whether it answers.
+ *
+ * These three were written and then never reachable — the shell mounted the
+ * connection list and the three child tabs and nothing else, so the panel could
+ * show you connections but gave you no way to create or edit one. That is the
+ * first screen an operator needs and it was the one screen missing.
+ *
+ * Credentials sit between the form and the test on purpose: an operator fills in
+ * the address, enters the secret, then presses test. Putting the test above the
+ * credential boxes invites pressing it before there is anything to authenticate
+ * with, and reading the failure as "the address is wrong".
+ */
+export declare function ConnectionSettingsTab({ actions, onSaved }: ConnectionSettingsTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/ConnectionSettingsTab.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme as theme } from '../theme';
+import { ConnectionForm } from './ConnectionForm';
+import { ConnectionTest } from './ConnectionTest';
+import { CredentialFields } from './CredentialFields';
+/**
+ * Everything about the connection itself: its address and authentication, its
+ * credentials, and whether it answers.
+ *
+ * These three were written and then never reachable — the shell mounted the
+ * connection list and the three child tabs and nothing else, so the panel could
+ * show you connections but gave you no way to create or edit one. That is the
+ * first screen an operator needs and it was the one screen missing.
+ *
+ * Credentials sit between the form and the test on purpose: an operator fills in
+ * the address, enters the secret, then presses test. Putting the test above the
+ * credential boxes invites pressing it before there is anything to authenticate
+ * with, and reading the failure as "the address is wrong".
+ */ export function ConnectionSettingsTab({ actions, onSaved }) {
+    const store = useIntegrationsStore();
+    const source = store.sources.find((candidate)=>candidate.id === store.selectedSourceId) ?? null;
+    // The list holds only the current page, so a connection selected before a
+    // later page loaded may not be in it yet. Saying so beats an empty form that
+    // looks like the record was lost.
+    const missingFromPage = store.selectedSourceId !== null && source === null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: theme.layout.main,
+        children: [
+            /*#__PURE__*/ _jsx(ConnectionForm, {
+                actions: actions,
+                loading: store.sourcesLoading || missingFromPage,
+                onSaved: onSaved,
+                source: source
+            }),
+            /*#__PURE__*/ _jsx(CredentialFields, {
+                actions: actions,
+                loading: store.sourcesLoading || missingFromPage,
+                source: source
+            }),
+            /*#__PURE__*/ _jsx(ConnectionTest, {
+                actions: actions,
+                loading: store.sourcesLoading || missingFromPage,
+                source: source
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/ConnectionTabs.d.ts

@@ -0,0 +1,12 @@
+import type { ConnectionTab } from '../store/state';
+/** Shared with the panel so `aria-controls` and `aria-labelledby` line up. */
+export declare function connectionTabId(tab: ConnectionTab): string;
+export declare function connectionTabPanelId(tab: ConnectionTab): string;
+export type ConnectionTabsProps = {
+    value: ConnectionTab;
+    onChange: (tab: ConnectionTab) => void;
+    /** Server-reported totals. A zero is left off rather than shown as "0". */
+    counts?: Partial<Record<ConnectionTab, number>>;
+    label?: string;
+};
+export declare function ConnectionTabs({ value, onChange, counts, label, }: ConnectionTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/ConnectionTabs.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+/**
+ * The strip that switches between a connection's own settings, its endpoints,
+ * its mappings and its runs.
+ *
+ * It is a real ARIA tablist: one tab is in the tab order and the arrow keys move
+ * between the rest. A row of separately tabbable buttons would make a keyboard
+ * user press Tab three times to leave a control they were never inside.
+ */ const theme = integrationsPageTheme;
+const TABS = [
+    {
+        value: 'connection',
+        label: 'Connection'
+    },
+    {
+        value: 'endpoints',
+        label: 'Endpoints'
+    },
+    {
+        value: 'mappings',
+        label: 'Mappings'
+    },
+    {
+        value: 'runs',
+        label: 'Runs'
+    }
+];
+/** Shared with the panel so `aria-controls` and `aria-labelledby` line up. */ export function connectionTabId(tab) {
+    return `integrations-tab-${tab}`;
+}
+export function connectionTabPanelId(tab) {
+    return `integrations-panel-${tab}`;
+}
+export function ConnectionTabs({ value, onChange, counts, label = 'Connection sections' }) {
+    const buttonsRef = useRef({});
+    const select = (index)=>{
+        const next = TABS[(index % TABS.length + TABS.length) % TABS.length];
+        if (!next) return;
+        onChange(next.value);
+        // Selection follows focus, so the focus has to follow the selection too —
+        // otherwise the next arrow press starts from the tab the user just left.
+        buttonsRef.current[next.value]?.focus();
+    };
+    const handleKeyDown = (event, tab)=>{
+        const index = TABS.findIndex((entry)=>entry.value === tab);
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            select(index + 1);
+        } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            select(index - 1);
+        } else if (event.key === 'Home') {
+            event.preventDefault();
+            select(0);
+        } else if (event.key === 'End') {
+            event.preventDefault();
+            select(TABS.length - 1);
+        }
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        "aria-label": label,
+        className: theme.tabs.wrapper,
+        role: "tablist",
+        children: TABS.map((tab)=>{
+            const selected = tab.value === value;
+            const count = counts?.[tab.value];
+            return /*#__PURE__*/ _jsxs("button", {
+                "aria-controls": connectionTabPanelId(tab.value),
+                "aria-selected": selected,
+                className: cn(theme.tabs.button, selected ? theme.tabs.active : theme.tabs.inactive),
+                id: connectionTabId(tab.value),
+                onClick: ()=>onChange(tab.value),
+                onKeyDown: (event)=>handleKeyDown(event, tab.value),
+                ref: (node)=>{
+                    buttonsRef.current[tab.value] = node;
+                },
+                role: "tab",
+                // Roving tabindex: the tablist is ONE stop in the tab order.
+                tabIndex: selected ? 0 : -1,
+                type: "button",
+                children: [
+                    tab.label,
+                    typeof count === 'number' && count > 0 ? /*#__PURE__*/ _jsx("span", {
+                        className: cn(theme.progress.label, 'ml-1.5'),
+                        children: count
+                    }) : null
+                ]
+            }, tab.value);
+        })
+    });
+}

package/dist/fe/components/IntegrationsPage/components/ConnectionTest.d.ts

@@ -0,0 +1,9 @@
+import type { IntegrationSource, IntegrationsActions } from '../types';
+export type ConnectionTestProps = {
+    actions: IntegrationsActions;
+    /** The saved connection to call, or null before it exists. */
+    source: IntegrationSource | null;
+    /** True while that record is still on its way. */
+    loading?: boolean;
+};
+export declare function ConnectionTest({ actions, source, loading }: ConnectionTestProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/ConnectionTest.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useState } from 'react';
+import { cn } from '../../../utils/cn';
+import { integrationsPageTheme } from '../theme';
+import { errorText } from './formSupport';
+import { Badge, Notice } from './Primitives';
+import { CardSkeleton } from './Skeletons';
+/**
+ * One real call to the service, reported exactly as it came back.
+ *
+ * The failure text is printed whole. The server already names the setting that
+ * has to change — a timeout, a certificate it would not accept, a 401 from the
+ * token endpoint — and every word of that is worth more than a tidy summary that
+ * sends the operator back to guessing.
+ */ const theme = integrationsPageTheme;
+export function ConnectionTest({ actions, source, loading = false }) {
+    const [testing, setTesting] = useState(false);
+    const [result, setResult] = useState(null);
+    // A result describes the connection it was run against. Leaving it up under
+    // the next one would read as a verdict on settings never tested.
+    const clear = useEffectEvent(()=>{
+        setResult(null);
+        setTesting(false);
+    });
+    useEffect(()=>{
+        clear();
+    }, [
+        source?.id
+    ]);
+    const handleTest = ()=>{
+        if (!source) return;
+        setTesting(true);
+        setResult(null);
+        actions.testSource(source.id).then((value)=>{
+            setTesting(false);
+            setResult(value);
+        }).catch((reason)=>{
+            setTesting(false);
+            setResult({
+                ok: false,
+                error: errorText(reason, 'The test could not be run.')
+            });
+        });
+    };
+    if (loading) return /*#__PURE__*/ _jsx(CardSkeleton, {});
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": "Connection test",
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.header,
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: theme.card.title,
+                        children: "Connection test"
+                    }),
+                    result ? /*#__PURE__*/ _jsx(Badge, {
+                        tone: result.ok ? 'success' : 'danger',
+                        children: result.ok ? 'Reachable' : 'Not reachable'
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.body,
+                children: [
+                    source ? /*#__PURE__*/ _jsxs("p", {
+                        className: theme.field.hint,
+                        children: [
+                            "Calls ",
+                            source.baseUrl,
+                            " with the settings and credentials as they are stored right now."
+                        ]
+                    }) : /*#__PURE__*/ _jsx("p", {
+                        className: theme.field.hint,
+                        children: "Save the connection first — there is nothing to call yet."
+                    }),
+                    result?.ok ? /*#__PURE__*/ _jsxs(Notice, {
+                        title: "Connection succeeded",
+                        tone: "info",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                children: /*#__PURE__*/ _jsx(Badge, {
+                                    tone: "success",
+                                    children: "Reachable"
+                                })
+                            }),
+                            result.detail ? /*#__PURE__*/ _jsx("p", {
+                                className: cn(theme.notice.body, 'mt-2 whitespace-pre-wrap break-words font-mono'),
+                                children: result.detail
+                            }) : null
+                        ]
+                    }) : null,
+                    result && !result.ok ? /*#__PURE__*/ _jsx(Notice, {
+                        title: "Connection failed",
+                        tone: "danger",
+                        children: /*#__PURE__*/ _jsx("p", {
+                            className: cn(theme.notice.body, 'whitespace-pre-wrap break-words font-mono'),
+                            children: result.error ?? 'The server reported a failure without a message.'
+                        })
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.card.footer,
+                children: /*#__PURE__*/ _jsx("button", {
+                    className: theme.button.secondary,
+                    disabled: !source || testing,
+                    onClick: handleTest,
+                    type: "button",
+                    children: testing ? 'Testing…' : 'Test connection'
+                })
+            })
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/CredentialFields.d.ts

@@ -0,0 +1,9 @@
+import type { IntegrationSource, IntegrationsActions } from '../types';
+export type CredentialFieldsProps = {
+    actions: IntegrationsActions;
+    /** The saved connection the secrets belong to, or null before it exists. */
+    source: IntegrationSource | null;
+    /** True while that record is still on its way. */
+    loading?: boolean;
+};
+export declare function CredentialFields({ actions, source, loading }: CredentialFieldsProps): import("react/jsx-runtime").JSX.Element;

package/dist/fe/components/IntegrationsPage/components/CredentialFields.js

@@ -0,0 +1,171 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useState } from 'react';
+import { useIntegrationsStore } from '../store';
+import { integrationsPageTheme } from '../theme';
+import { CredentialSlotRow } from './CredentialSlotRow';
+import { hintFromResult, patchFor, slotsForSource, storedHint } from './credentialSlots';
+import { errorText } from './formSupport';
+import { Notice } from './Primitives';
+import { CardSkeleton } from './Skeletons';
+/**
+ * The secrets, written and never read.
+ *
+ * Nothing on this screen has ever seen a stored value and nothing here asks for
+ * one: the record carries a masked hint, a save returns a new masked hint, and
+ * that is the whole conversation. An empty box therefore cannot mean "make it
+ * empty" — it means "leave it alone" — which is why clearing is a separate
+ * button per field.
+ */ const theme = integrationsPageTheme;
+export function CredentialFields({ actions, source, loading = false }) {
+    const store = useIntegrationsStore();
+    const [values, setValues] = useState({});
+    const [hints, setHints] = useState({});
+    const [busy, setBusy] = useState(false);
+    const [status, setStatus] = useState(null);
+    // A different connection means different secrets. Carrying a typed value
+    // across would post it to the wrong service.
+    const reset = useEffectEvent(()=>{
+        setValues({});
+        setHints({});
+        setBusy(false);
+        setStatus(null);
+    });
+    useEffect(()=>{
+        reset();
+    }, [
+        source?.id
+    ]);
+    if (loading) return /*#__PURE__*/ _jsx(CardSkeleton, {});
+    if (!source) {
+        return /*#__PURE__*/ _jsx(Notice, {
+            title: "Save the connection first",
+            tone: "info",
+            children: /*#__PURE__*/ _jsx("p", {
+                children: "Secrets are stored against a saved connection, so there is somewhere to put them."
+            })
+        });
+    }
+    const sourceRecord = source;
+    const slots = slotsForSource(sourceRecord);
+    const hintOf = (slot)=>slot in hints ? hints[slot] ?? null : storedHint(sourceRecord, slot);
+    const applyHints = (result)=>{
+        setHints((current)=>{
+            const next = {
+                ...current
+            };
+            for (const slot of slots){
+                const hint = hintFromResult(result, slot);
+                if (hint !== undefined) next[slot] = hint;
+            }
+            return next;
+        });
+    };
+    const handleSave = ()=>{
+        const payload = {};
+        let filled = 0;
+        for (const slot of slots){
+            const value = values[slot] ?? '';
+            if (value.length > 0) {
+                payload[slot] = value;
+                filled += 1;
+            }
+        }
+        if (filled === 0) {
+            setStatus('Nothing to save — every box is empty, so the stored values are untouched.');
+            return;
+        }
+        setBusy(true);
+        setStatus(null);
+        store.setError(null);
+        actions.saveCredentials(sourceRecord.id, payload).then((result)=>{
+            setBusy(false);
+            // The typed values are dropped here and not kept anywhere: what was
+            // stored can only ever be looked at as the mask below.
+            setValues({});
+            applyHints(result);
+            setStatus('Saved. Only the masked hints below come back.');
+        }).catch((reason)=>{
+            setBusy(false);
+            store.setError(errorText(reason, 'The credentials could not be saved.'));
+        });
+    };
+    const handleClear = (slot)=>{
+        setBusy(true);
+        setStatus(null);
+        store.setError(null);
+        actions.saveCredentials(sourceRecord.id, patchFor(slot, '')).then((result)=>{
+            setBusy(false);
+            setValues((current)=>({
+                    ...current,
+                    ...patchFor(slot, '')
+                }));
+            setHints((current)=>{
+                const next = {
+                    ...current
+                };
+                next[slot] = hintFromResult(result, slot) ?? null;
+                return next;
+            });
+            setStatus('Cleared. Nothing is stored for that field any more.');
+        }).catch((reason)=>{
+            setBusy(false);
+            store.setError(errorText(reason, 'The credential could not be cleared.'));
+        });
+    };
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": "Credentials",
+        className: theme.card.wrapper,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: theme.card.header,
+                children: /*#__PURE__*/ _jsx("h2", {
+                    className: theme.card.title,
+                    children: "Credentials"
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: theme.card.body,
+                children: [
+                    /*#__PURE__*/ _jsx(Notice, {
+                        title: "Written once, never read back",
+                        tone: "info",
+                        children: /*#__PURE__*/ _jsx("p", {
+                            children: "A value typed here is stored and from then on only ever sent to the service. It is not returned to this screen, or to any other, no matter who asks — all that comes back is a masked hint. Leave a box empty to keep whatever is already stored."
+                        })
+                    }),
+                    slots.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        className: theme.list.empty,
+                        children: "This connection is set to no authentication, so there is no secret to store. Pick an auth type above to see the fields it needs."
+                    }) : null,
+                    slots.map((slot)=>/*#__PURE__*/ _jsx(CredentialSlotRow, {
+                            disabled: busy,
+                            maskedHint: hintOf(slot),
+                            onChange: (value)=>setValues((current)=>({
+                                        ...current,
+                                        ...patchFor(slot, value)
+                                    })),
+                            onClear: ()=>handleClear(slot),
+                            slot: slot,
+                            source: sourceRecord,
+                            value: values[slot] ?? ''
+                        }, slot)),
+                    status ? /*#__PURE__*/ _jsx("p", {
+                        className: theme.field.hint,
+                        children: status
+                    }) : null
+                ]
+            }),
+            slots.length > 0 ? /*#__PURE__*/ _jsx("div", {
+                className: theme.card.footer,
+                children: /*#__PURE__*/ _jsx("button", {
+                    className: theme.button.primary,
+                    disabled: busy,
+                    onClick: handleSave,
+                    type: "button",
+                    children: busy ? 'Saving…' : 'Save credentials'
+                })
+            }) : null
+        ]
+    });
+}

package/dist/fe/components/IntegrationsPage/components/CredentialSlotRow.d.ts

@@ -0,0 +1,13 @@
+import type { IntegrationSource } from '../types';
+import { type CredentialSlot } from './credentialSlots';
+export type CredentialSlotRowProps = {
+    slot: CredentialSlot;
+    source: IntegrationSource;
+    value: string;
+    /** The masked preview of the stored value, or null when nothing is stored. */
+    maskedHint: string | null;
+    disabled: boolean;
+    onChange: (value: string) => void;
+    onClear: () => void;
+};
+export declare function CredentialSlotRow({ slot, source, value, maskedHint, disabled, onChange, onClear, }: CredentialSlotRowProps): import("react/jsx-runtime").JSX.Element;