nucleus-core-ts 0.9.805 → 0.9.807

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { AUTH_TYPE_OPTIONS, authTypeHint, toAuthType } from './authOptions';
 import { ConnectionOauthFields } from './ConnectionOauthFields';
@@ -16,15 +17,16 @@ import { Field } from './Primitives';
  * because they are written and never read back.
  */ const theme = integrationsPageTheme;
 export function ConnectionAuthFields(props) {
+    const labels = useLabels();
     const { draft, disabled, onChange } = props;
     return /*#__PURE__*/ _jsxs("section", {
-        "aria-label": "Authentication",
+        "aria-label": labels.auth.sectionLabel,
         className: "flex flex-col gap-3",
         children: [
             /*#__PURE__*/ _jsx(Field, {
                 hint: authTypeHint(draft.authType),
                 htmlFor: "connection-auth-type",
-                label: "Auth type",
+                label: labels.auth.type,
                 children: /*#__PURE__*/ _jsx("select", {
                     "aria-describedby": describedBy('connection-auth-type', true, false),
                     className: theme.field.input,
@@ -44,9 +46,9 @@ export function ConnectionAuthFields(props) {
                 })
             }),
             usesHeaderName(draft.authType) ? /*#__PURE__*/ _jsx(Field, {
-                hint: "Empty means Authorization. Set it when the service reads the credential from a header of its own.",
+                hint: labels.auth.headerNameHint,
                 htmlFor: "connection-auth-header",
-                label: "Header name",
+                label: labels.auth.headerName,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-auth-header', true, false),
                     className: theme.field.input,
@@ -55,15 +57,15 @@ export function ConnectionAuthFields(props) {
                     onChange: (event)=>onChange({
                             authHeaderName: event.target.value
                         }),
-                    placeholder: "X-Api-Key",
+                    placeholder: labels.auth.headerNamePlaceholder,
                     type: "text",
                     value: draft.authHeaderName
                 })
             }) : null,
             usesQueryParam(draft.authType) ? /*#__PURE__*/ _jsx(Field, {
-                hint: "Use this instead of a header when the key belongs in the query string. Fill in one or the other, not both.",
+                hint: labels.auth.queryParamHint,
                 htmlFor: "connection-auth-query",
-                label: "Query parameter",
+                label: labels.auth.queryParam,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-auth-query', true, false),
                     className: theme.field.input,
@@ -72,7 +74,7 @@ export function ConnectionAuthFields(props) {
                     onChange: (event)=>onChange({
                             authQueryParam: event.target.value
                         }),
-                    placeholder: "api_key",
+                    placeholder: labels.auth.queryParamPlaceholder,
                     type: "text",
                     value: draft.authQueryParam
                 })

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { CLIENT_AUTH_OPTIONS, GRANT_TYPE_OPTIONS, toClientAuth, toGrantType } from './authOptions';
 import { usesOauth } from './connectionDraft';
@@ -13,14 +14,15 @@ import { Field } from './Primitives';
  * place instead of at every field.
  */ const theme = integrationsPageTheme;
 export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
+    const labels = useLabels();
     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.",
+                hint: labels.auth.tokenUrlHint,
                 htmlFor: "connection-token-url",
-                label: "Token URL",
+                label: labels.auth.tokenUrl,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-token-url', true, Boolean(errors.tokenUrl)),
                     className: theme.field.input,
@@ -29,15 +31,15 @@ export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
                     onChange: (event)=>onChange({
                             tokenUrl: event.target.value
                         }),
-                    placeholder: "https://api.example.com/oauth/token",
+                    placeholder: labels.auth.tokenUrlPlaceholder,
                     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.",
+                hint: labels.auth.grantTypeHint,
                 htmlFor: "connection-grant-type",
-                label: "Grant type",
+                label: labels.auth.grantType,
                 children: /*#__PURE__*/ _jsx("select", {
                     "aria-describedby": describedBy('connection-grant-type', true, false),
                     className: theme.field.input,
@@ -58,7 +60,7 @@ export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
             }),
             /*#__PURE__*/ _jsx(Field, {
                 htmlFor: "connection-client-id",
-                label: "Client ID",
+                label: labels.auth.clientId,
                 children: /*#__PURE__*/ _jsx("input", {
                     className: theme.field.input,
                     disabled: disabled,
@@ -66,14 +68,14 @@ export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
                     onChange: (event)=>onChange({
                             oauthClientId: event.target.value
                         }),
-                    placeholder: "integration-client",
+                    placeholder: labels.auth.clientIdPlaceholder,
                     type: "text",
                     value: draft.oauthClientId
                 })
             }),
             draft.oauthGrantType === 'password' ? /*#__PURE__*/ _jsx(Field, {
                 htmlFor: "connection-oauth-username",
-                label: "User name",
+                label: labels.auth.username,
                 children: /*#__PURE__*/ _jsx("input", {
                     autoComplete: "off",
                     className: theme.field.input,
@@ -82,15 +84,15 @@ export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
                     onChange: (event)=>onChange({
                             oauthUsername: event.target.value
                         }),
-                    placeholder: "service-account",
+                    placeholder: labels.auth.usernamePlaceholder,
                     type: "text",
                     value: draft.oauthUsername
                 })
             }) : null,
             /*#__PURE__*/ _jsx(Field, {
-                hint: "Space-separated. Leave it empty to take whatever the token endpoint grants by default.",
+                hint: labels.auth.scopeHint,
                 htmlFor: "connection-scope",
-                label: "Scope",
+                label: labels.auth.scope,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-scope', true, false),
                     className: theme.field.input,
@@ -99,7 +101,7 @@ export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
                     onChange: (event)=>onChange({
                             oauthScope: event.target.value
                         }),
-                    placeholder: "read:records",
+                    placeholder: labels.auth.scopePlaceholder,
                     type: "text",
                     value: draft.oauthScope
                 })
@@ -107,7 +109,7 @@ export function ConnectionOauthFields({ draft, errors, disabled, onChange }) {
             /*#__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",
+                label: labels.auth.clientAuth,
                 children: /*#__PURE__*/ _jsx("select", {
                     "aria-describedby": describedBy('connection-client-auth', true, false),
                     className: theme.field.input,

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from 'react';
 import { cn } from '../../../utils/cn';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { errorText } from './formSupport';
 import { Badge, Notice } from './Primitives';
@@ -15,6 +16,7 @@ import { CardSkeleton } from './Skeletons';
  * sends the operator back to guessing.
  */ const theme = integrationsPageTheme;
 export function ConnectionTest({ actions, source, loading = false }) {
+    const labels = useLabels();
     const [testing, setTesting] = useState(false);
     const [result, setResult] = useState(null);
     // A result describes the connection it was run against. Leaving it up under
@@ -45,7 +47,7 @@ export function ConnectionTest({ actions, source, loading = false }) {
     };
     if (loading) return /*#__PURE__*/ _jsx(CardSkeleton, {});
     return /*#__PURE__*/ _jsxs("section", {
-        "aria-label": "Connection test",
+        "aria-label": labels.auth.testHeading,
         className: theme.card.wrapper,
         children: [
             /*#__PURE__*/ _jsxs("div", {
@@ -53,7 +55,7 @@ export function ConnectionTest({ actions, source, loading = false }) {
                 children: [
                     /*#__PURE__*/ _jsx("h2", {
                         className: theme.card.title,
-                        children: "Connection test"
+                        children: labels.auth.testHeading
                     }),
                     result ? /*#__PURE__*/ _jsx(Badge, {
                         tone: result.ok ? 'success' : 'danger',
@@ -76,13 +78,13 @@ export function ConnectionTest({ actions, source, loading = false }) {
                         children: "Save the connection first — there is nothing to call yet."
                     }),
                     result?.ok ? /*#__PURE__*/ _jsxs(Notice, {
-                        title: "Connection succeeded",
+                        title: labels.auth.testOkTitle,
                         tone: "info",
                         children: [
                             /*#__PURE__*/ _jsx("p", {
                                 children: /*#__PURE__*/ _jsx(Badge, {
                                     tone: "success",
-                                    children: "Reachable"
+                                    children: labels.auth.testOkBadge
                                 })
                             }),
                             result.detail ? /*#__PURE__*/ _jsx("p", {
@@ -92,7 +94,7 @@ export function ConnectionTest({ actions, source, loading = false }) {
                         ]
                     }) : null,
                     result && !result.ok ? /*#__PURE__*/ _jsx(Notice, {
-                        title: "Connection failed",
+                        title: labels.auth.testFailedTitle,
                         tone: "danger",
                         children: /*#__PURE__*/ _jsx("p", {
                             className: cn(theme.notice.body, 'whitespace-pre-wrap break-words font-mono'),

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from 'react';
 import { useIntegrationsStore } from '../store';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { CredentialSlotRow } from './CredentialSlotRow';
 import { hintFromResult, patchFor, slotsForSource, storedHint } from './credentialSlots';
@@ -18,6 +19,7 @@ import { CardSkeleton } from './Skeletons';
  * button per field.
  */ const theme = integrationsPageTheme;
 export function CredentialFields({ actions, source, loading = false }) {
+    const labels = useLabels();
     const store = useIntegrationsStore();
     const [values, setValues] = useState({});
     const [hints, setHints] = useState({});
@@ -39,10 +41,10 @@ export function CredentialFields({ actions, source, loading = false }) {
     if (loading) return /*#__PURE__*/ _jsx(CardSkeleton, {});
     if (!source) {
         return /*#__PURE__*/ _jsx(Notice, {
-            title: "Save the connection first",
+            title: labels.auth.saveFirstTitle,
             tone: "info",
             children: /*#__PURE__*/ _jsx("p", {
-                children: "Secrets are stored against a saved connection, so there is somewhere to put them."
+                children: labels.auth.saveFirstBody
             })
         });
     }
@@ -114,21 +116,21 @@ export function CredentialFields({ actions, source, loading = false }) {
         });
     };
     return /*#__PURE__*/ _jsxs("section", {
-        "aria-label": "Credentials",
+        "aria-label": labels.auth.credentialsHeading,
         className: theme.card.wrapper,
         children: [
             /*#__PURE__*/ _jsx("div", {
                 className: theme.card.header,
                 children: /*#__PURE__*/ _jsx("h2", {
                     className: theme.card.title,
-                    children: "Credentials"
+                    children: labels.auth.credentialsHeading
                 })
             }),
             /*#__PURE__*/ _jsxs("div", {
                 className: theme.card.body,
                 children: [
                     /*#__PURE__*/ _jsx(Notice, {
-                        title: "Written once, never read back",
+                        title: labels.auth.writeOnlyTitle,
                         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."

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from 'react';
 import { useIntegrationsStore } from '../store';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { EndpointFormFields } from './EndpointFormFields';
 import { formatJsonObject, parseJsonObject } from './jsonObjectField';
@@ -17,6 +18,7 @@ import { pathParamNames } from './pathParams';
  * a list page arriving in the background.
  */ const theme = integrationsPageTheme;
 export function EndpointForm({ sourceId, endpoint, actions, onSaved, onDeleted, onCancel }) {
+    const labels = useLabels();
     const store = useIntegrationsStore();
     const [saving, setSaving] = useState(false);
     const [deleting, setDeleting] = useState(false);
@@ -123,7 +125,7 @@ export function EndpointForm({ sourceId, endpoint, actions, onSaved, onDeleted,
                 className: theme.card.header,
                 children: /*#__PURE__*/ _jsx("h3", {
                     className: theme.card.title,
-                    children: endpoint ? 'Edit endpoint' : 'New endpoint'
+                    children: endpoint ? labels.endpoints.editTitle : labels.endpoints.newTitle
                 })
             }),
             /*#__PURE__*/ _jsxs("div", {
@@ -163,20 +165,20 @@ export function EndpointForm({ sourceId, endpoint, actions, onSaved, onDeleted,
                         disabled: busy,
                         onClick: remove,
                         type: "button",
-                        children: deleting ? 'Deleting…' : 'Delete'
+                        children: deleting ? labels.common.deleting : labels.common.delete
                     }) : null,
                     /*#__PURE__*/ _jsx("button", {
                         className: theme.button.secondary,
                         disabled: busy,
                         onClick: onCancel,
                         type: "button",
-                        children: "Cancel"
+                        children: labels.common.cancel
                     }),
                     /*#__PURE__*/ _jsx("button", {
                         className: theme.button.primary,
                         disabled: busy || !canSave,
                         type: "submit",
-                        children: saving ? 'Saving…' : 'Save endpoint'
+                        children: saving ? labels.common.saving : labels.endpoints.save
                     })
                 ]
             })

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
 import { cn } from '../../../utils/cn';
 import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
@@ -20,6 +21,14 @@ const METHODS = [
 ];
 export function EndpointFormFields({ draft, disabled, errors, onChange }) {
     const labels = useLabels();
+    /**
+   * Unique per instance.
+   *
+   * These ids were literals — `endpoint-tag`, `endpoint-name` — which is fine
+   * for one form on a page and wrong the moment there are two: every `<label
+   * htmlFor>` binds to whichever rendered first, so clicking a label focuses the
+   * OTHER record's field. `useId` makes that structurally impossible.
+   */ const uid = useId();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsxs("div", {
@@ -27,13 +36,13 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
                 children: [
                     /*#__PURE__*/ _jsx(Field, {
                         hint: labels.endpoints.tagHint,
-                        htmlFor: "endpoint-tag",
+                        htmlFor: `${uid}-tag`,
                         label: labels.endpoints.tag,
                         children: /*#__PURE__*/ _jsx("input", {
-                            "aria-describedby": "endpoint-tag-hint",
+                            "aria-describedby": `${uid}-tag-hint`,
                             className: theme.field.input,
                             disabled: disabled,
-                            id: "endpoint-tag",
+                            id: `${uid}-tag`,
                             onChange: (event)=>onChange({
                                     tag: event.target.value
                                 }),
@@ -43,12 +52,12 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
                         })
                     }),
                     /*#__PURE__*/ _jsx(Field, {
-                        htmlFor: "endpoint-name",
+                        htmlFor: `${uid}-name`,
                         label: labels.endpoints.name,
                         children: /*#__PURE__*/ _jsx("input", {
                             className: theme.field.input,
                             disabled: disabled,
-                            id: "endpoint-name",
+                            id: `${uid}-name`,
                             onChange: (event)=>onChange({
                                     name: event.target.value
                                 }),
@@ -65,12 +74,12 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
                     /*#__PURE__*/ _jsx("div", {
                         className: "sm:w-32",
                         children: /*#__PURE__*/ _jsx(Field, {
-                            htmlFor: "endpoint-method",
+                            htmlFor: `${uid}-method`,
                             label: labels.endpoints.method,
                             children: /*#__PURE__*/ _jsx("select", {
                                 className: theme.field.input,
                                 disabled: disabled,
-                                id: "endpoint-method",
+                                id: `${uid}-method`,
                                 onChange: (event)=>{
                                     for (const method of METHODS){
                                         if (method === event.target.value) onChange({
@@ -90,13 +99,13 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
                         className: "min-w-0 flex-1",
                         children: /*#__PURE__*/ _jsx(Field, {
                             hint: labels.endpoints.pathHint,
-                            htmlFor: "endpoint-path",
+                            htmlFor: `${uid}-path`,
                             label: labels.endpoints.path,
                             children: /*#__PURE__*/ _jsx("input", {
-                                "aria-describedby": "endpoint-path-hint",
+                                "aria-describedby": `${uid}-path-hint`,
                                 className: theme.field.input,
                                 disabled: disabled,
-                                id: "endpoint-path",
+                                id: `${uid}-path`,
                                 onChange: (event)=>onChange({
                                         path: event.target.value
                                     }),
@@ -110,13 +119,13 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
             }),
             /*#__PURE__*/ _jsx(Field, {
                 hint: labels.endpoints.rootPathHint,
-                htmlFor: "endpoint-root",
+                htmlFor: `${uid}-root`,
                 label: labels.endpoints.rootPath,
                 children: /*#__PURE__*/ _jsx("input", {
-                    "aria-describedby": "endpoint-root-hint",
+                    "aria-describedby": `${uid}-root-hint`,
                     className: theme.field.input,
                     disabled: disabled,
-                    id: "endpoint-root",
+                    id: `${uid}-root`,
                     onChange: (event)=>onChange({
                             responseRootPath: event.target.value
                         }),
@@ -128,13 +137,13 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
             /*#__PURE__*/ _jsx(Field, {
                 error: errors?.queryParams,
                 hint: labels.endpoints.queryParamsHint,
-                htmlFor: "endpoint-query",
+                htmlFor: `${uid}-query`,
                 label: labels.endpoints.queryParams,
                 children: /*#__PURE__*/ _jsx("textarea", {
-                    "aria-describedby": describedBy('endpoint-query', true, Boolean(errors?.queryParams)),
+                    "aria-describedby": describedBy(`${uid}-query`, true, Boolean(errors?.queryParams)),
                     className: cn(theme.field.input, 'h-auto min-h-16 py-2 font-mono text-xs'),
                     disabled: disabled,
-                    id: "endpoint-query",
+                    id: `${uid}-query`,
                     onChange: (event)=>onChange({
                             queryParams: event.target.value
                         }),
@@ -146,13 +155,13 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
             draft.method === 'GET' ? null : /*#__PURE__*/ _jsx(Field, {
                 error: errors?.requestBody,
                 hint: labels.endpoints.requestBodyHint,
-                htmlFor: "endpoint-body",
+                htmlFor: `${uid}-body`,
                 label: labels.endpoints.requestBody,
                 children: /*#__PURE__*/ _jsx("textarea", {
-                    "aria-describedby": describedBy('endpoint-body', true, Boolean(errors?.requestBody)),
+                    "aria-describedby": describedBy(`${uid}-body`, true, Boolean(errors?.requestBody)),
                     className: cn(theme.field.input, 'h-auto min-h-20 py-2 font-mono text-xs'),
                     disabled: disabled,
-                    id: "endpoint-body",
+                    id: `${uid}-body`,
                     onChange: (event)=>onChange({
                             requestBody: event.target.value
                         }),
@@ -162,12 +171,12 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
                 })
             }),
             /*#__PURE__*/ _jsx(Field, {
-                htmlFor: "endpoint-description",
+                htmlFor: `${uid}-description`,
                 label: labels.endpoints.description,
                 children: /*#__PURE__*/ _jsx("textarea", {
                     className: cn(theme.field.input, 'h-auto min-h-20 py-2'),
                     disabled: disabled,
-                    id: "endpoint-description",
+                    id: `${uid}-description`,
                     onChange: (event)=>onChange({
                             description: event.target.value
                         }),
@@ -178,13 +187,13 @@ export function EndpointFormFields({ draft, disabled, errors, onChange }) {
             }),
             /*#__PURE__*/ _jsxs("label", {
                 className: "flex items-center gap-2",
-                htmlFor: "endpoint-enabled",
+                htmlFor: `${uid}-enabled`,
                 children: [
                     /*#__PURE__*/ _jsx("input", {
                         checked: draft.enabled,
                         className: "size-4 shrink-0 accent-sky-600 dark:accent-sky-500",
                         disabled: disabled,
-                        id: "endpoint-enabled",
+                        id: `${uid}-enabled`,
                         onChange: (event)=>onChange({
                                 enabled: event.target.checked
                             }),

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

@@ -107,7 +107,7 @@ export function EndpointList({ sourceId, actions, onNewEndpoint, onSelect, reloa
                             }),
                             /*#__PURE__*/ _jsx("p", {
                                 className: theme.header.subtitle,
-                                children: list.total === 1 ? '1 endpoint' : `${list.total} endpoints`
+                                children: list.total === 1 ? labels.endpoints.countOne : labels.endpoints.countMany(list.total)
                             })
                         ]
                     }),
@@ -117,7 +117,7 @@ export function EndpointList({ sourceId, actions, onNewEndpoint, onSelect, reloa
                             className: theme.button.primary,
                             onClick: handleNew,
                             type: "button",
-                            children: "New endpoint"
+                            children: labels.endpoints.create
                         })
                     })
                 ]
@@ -153,7 +153,7 @@ export function EndpointList({ sourceId, actions, onNewEndpoint, onSelect, reloa
             }) : null,
             !firstLoad && list.items.length === 0 && !list.error ? /*#__PURE__*/ _jsx("p", {
                 className: theme.list.empty,
-                children: search.length > 0 ? `No endpoint matches “${search}”. Clear the search to see them all.` : 'No endpoints yet. An endpoint is one call this connection can make — a method, a path, and where the records sit in the answer. Start with New endpoint.'
+                children: search.length > 0 ? labels.endpoints.emptySearch(search) : labels.endpoints.empty
             }) : null,
             list.items.length > 0 ? /*#__PURE__*/ _jsx("ul", {
                 className: theme.list.wrapper,

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

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from 'react';
 import { useIntegrationsStore } from '../store';
 import { useLabels } from '../text/context';
@@ -18,14 +18,24 @@ export function EndpointsTab({ actions }) {
     const labels = useLabels();
     const store = useIntegrationsStore();
     const sourceId = store.selectedSourceId;
-    const [selected, setSelected] = useState(null);
     const [creating, setCreating] = useState(false);
     const [reloadToken, setReloadToken] = useState(0);
-    // Another connection is another set of endpoints. A form left open across the
+    /**
+   * The selection is the STORE's, and only the store's.
+   *
+   * It used to be kept here as well, and the two were reconciled by comparing
+   * them on every render. Clicking a second call then left the first form on
+   * screen and added the new one under it — two live editors of two different
+   * records, both writing to the same hard-coded field ids, growing by one card
+   * per click. One source of truth, and one keyed container below, is what makes
+   * that impossible rather than unlikely.
+   */ const selectedId = store.selectedEndpointId;
+    const editing = selectedId ? store.endpoints.find((e)=>e.id === selectedId) ?? null : null;
+    // Another connection is another set of calls. A form left open across the
     // change would be editing a record this connection does not own.
     const reset = useEffectEvent(()=>{
-        setSelected(null);
         setCreating(false);
+        store.selectEndpoint(null);
     });
     useEffect(()=>{
         reset();
@@ -33,29 +43,26 @@ export function EndpointsTab({ actions }) {
         sourceId
     ]);
     const handleNew = ()=>{
-        setSelected(null);
+        store.selectEndpoint(null);
         setCreating(true);
     };
     const handleSelect = (endpoint)=>{
-        setSelected(endpoint);
         setCreating(false);
+        store.selectEndpoint(endpoint.id);
     };
     const handleSaved = (saved)=>{
-        setSelected(saved);
         setCreating(false);
-        // Re-selecting drops the old sample: it described the endpoint as it was
+        // Re-selecting drops the old sample: it described the call as it was
         // configured a moment ago, and the mapping would be built from it.
         store.selectEndpoint(saved.id);
         setReloadToken((token)=>token + 1);
     };
     const handleDeleted = ()=>{
-        setSelected(null);
         setCreating(false);
         store.selectEndpoint(null);
         setReloadToken((token)=>token + 1);
     };
     const handleCancel = ()=>{
-        setSelected(null);
         setCreating(false);
         store.selectEndpoint(null);
     };
@@ -65,9 +72,6 @@ export function EndpointsTab({ actions }) {
             children: labels.endpoints.selectConnection
         });
     }
-    // Guarded against the store: the selection is the store's, and a record left
-    // over from the previous one must not be what the form shows.
-    const editing = selected && selected.id === store.selectedEndpointId ? selected : null;
     return /*#__PURE__*/ _jsxs("div", {
         className: "grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,18rem)_minmax(0,1fr)] xl:gap-5",
         children: [
@@ -78,26 +82,28 @@ export function EndpointsTab({ actions }) {
                 reloadToken: reloadToken,
                 sourceId: sourceId
             }, sourceId),
-            /*#__PURE__*/ _jsxs("div", {
+            /*#__PURE__*/ _jsx("div", {
                 className: theme.layout.main,
-                children: [
-                    editing || creating ? /*#__PURE__*/ _jsx(EndpointForm, {
-                        actions: actions,
-                        endpoint: editing,
-                        onCancel: handleCancel,
-                        onDeleted: handleDeleted,
-                        onSaved: handleSaved,
-                        sourceId: sourceId
-                    }, editing?.id ?? 'new') : /*#__PURE__*/ _jsx("p", {
-                        className: theme.list.empty,
-                        children: "Select an endpoint to edit it, or add one. An endpoint is a single call — a method, a path, and where in the answer the records sit."
-                    }),
-                    editing ? /*#__PURE__*/ _jsx(EndpointSample, {
-                        actions: actions,
-                        endpoint: editing
-                    }, editing.id) : null
-                ]
-            })
+                children: editing || creating ? /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(EndpointForm, {
+                            actions: actions,
+                            endpoint: editing,
+                            onCancel: handleCancel,
+                            onDeleted: handleDeleted,
+                            onSaved: handleSaved,
+                            sourceId: sourceId
+                        }),
+                        editing ? /*#__PURE__*/ _jsx(EndpointSample, {
+                            actions: actions,
+                            endpoint: editing
+                        }) : null
+                    ]
+                }) : /*#__PURE__*/ _jsx("p", {
+                    className: theme.list.empty,
+                    children: labels.endpoints.pickOne
+                })
+            }, editing?.id ?? (creating ? 'new' : 'none'))
         ]
     });
 }