nucleus-core-ts 0.9.799 → 0.9.801

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../../utils/cn';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { describedBy } from './formSupport';
 import { Field } from './Primitives';
@@ -9,16 +10,16 @@ import { Field } from './Primitives';
  * decide whether it is used and how carefully.
  */ const theme = integrationsPageTheme;
 const CHECKBOX = 'h-4 w-4 shrink-0 accent-sky-600 dark:accent-sky-500';
-const BASE_URL_HINT = 'The scheme is free. https:// and plain http:// are both accepted and neither is rewritten — calling a service inside the same cluster over http, for example http://hr-service:8080, is a legitimate setup.';
 export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
+    const labels = useLabels();
     return /*#__PURE__*/ _jsxs("section", {
-        "aria-label": "Connection details",
+        "aria-label": labels.connectionForm.sectionLabel,
         className: "flex flex-col gap-3",
         children: [
             /*#__PURE__*/ _jsx(Field, {
                 error: errors.name,
                 htmlFor: "connection-name",
-                label: "Name",
+                label: labels.connectionForm.name,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-name', false, Boolean(errors.name)),
                     className: theme.field.input,
@@ -27,16 +28,16 @@ export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
                     onChange: (event)=>onChange({
                             name: event.target.value
                         }),
-                    placeholder: "Directory service",
+                    placeholder: labels.connectionForm.namePlaceholder,
                     type: "text",
                     value: draft.name
                 })
             }),
             /*#__PURE__*/ _jsx(Field, {
                 error: errors.slug,
-                hint: "Used to refer to this connection elsewhere. It does not change once things point at it.",
+                hint: labels.connectionForm.slugHint,
                 htmlFor: "connection-slug",
-                label: "Slug",
+                label: labels.connectionForm.slug,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-slug', true, Boolean(errors.slug)),
                     className: theme.field.input,
@@ -52,9 +53,9 @@ export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
             }),
             /*#__PURE__*/ _jsx(Field, {
                 error: errors.baseUrl,
-                hint: BASE_URL_HINT,
+                hint: labels.connectionForm.baseUrlHint,
                 htmlFor: "connection-base-url",
-                label: "Base URL",
+                label: labels.connectionForm.baseUrl,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-base-url', true, Boolean(errors.baseUrl)),
                     className: theme.field.input,
@@ -69,9 +70,9 @@ export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
                 })
             }),
             /*#__PURE__*/ _jsx(Field, {
-                hint: "For whoever has to work out what this connection is, months from now.",
+                hint: labels.connectionForm.descriptionHint,
                 htmlFor: "connection-description",
-                label: "Description",
+                label: labels.connectionForm.description,
                 children: /*#__PURE__*/ _jsx("textarea", {
                     "aria-describedby": describedBy('connection-description', true, false),
                     className: cn(theme.field.input, 'h-20 py-2 sm:h-20'),
@@ -80,7 +81,7 @@ export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
                     onChange: (event)=>onChange({
                             description: event.target.value
                         }),
-                    placeholder: "Read-only employee directory used by the nightly import.",
+                    placeholder: labels.connectionForm.descriptionPlaceholder,
                     value: draft.description
                 })
             }),
@@ -102,13 +103,13 @@ export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
                                     }),
                                 type: "checkbox"
                             }),
-                            "Enabled"
+                            labels.connectionForm.enabled
                         ]
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         className: theme.field.hint,
                         id: "connection-enabled-hint",
-                        children: "Turning this off stops every endpoint and import that goes through this connection. The settings are kept."
+                        children: labels.connectionForm.enabledHint
                     })
                 ]
             }),
@@ -130,21 +131,21 @@ export function ConnectionBasicFields({ draft, errors, disabled, onChange }) {
                                     }),
                                 type: "checkbox"
                             }),
-                            "Verify TLS certificate"
+                            labels.connectionForm.tlsVerify
                         ]
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         className: theme.field.hint,
                         id: "connection-tls-verify-hint",
-                        children: draft.tlsVerify ? 'On. Unchecking it applies to requests made through THIS connection only — no other connection and nothing else in the app is affected.' : 'Off. Certificates are not checked for requests made through THIS connection only. Every other connection still verifies. Use it for an internal service with its own certificate authority.'
+                        children: draft.tlsVerify ? labels.connectionForm.tlsVerifyOnHint : labels.connectionForm.tlsVerifyOffHint
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx(Field, {
                 error: errors.timeoutMs,
-                hint: "How long one request may take before it is given up on. Empty means the server default.",
+                hint: labels.connectionForm.timeoutHint,
                 htmlFor: "connection-timeout",
-                label: "Timeout (ms)",
+                label: labels.connectionForm.timeout,
                 children: /*#__PURE__*/ _jsx("input", {
                     "aria-describedby": describedBy('connection-timeout', true, Boolean(errors.timeoutMs)),
                     className: theme.field.input,

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useState } from 'react';
 import { cn } from '../../../utils/cn';
 import { useIntegrationsStore } from '../store';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { Badge, Field, Notice } from './Primitives';
 import { ListSkeleton } from './Skeletons';
@@ -19,6 +20,7 @@ const PAGE_SIZE = 20;
 const SEARCH_DEBOUNCE_MS = 300;
 export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
     const store = useIntegrationsStore();
+    const labels = useLabels();
     const search = store.sourcesSearch;
     const selectedId = store.selectedSourceId;
     const [term, setTerm] = useState(search);
@@ -84,11 +86,11 @@ export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
                         children: [
                             /*#__PURE__*/ _jsx("h2", {
                                 className: theme.header.title,
-                                children: "Connections"
+                                children: labels.connections.heading
                             }),
                             /*#__PURE__*/ _jsx("p", {
                                 className: theme.header.subtitle,
-                                children: list.total === 1 ? '1 connection' : `${list.total} connections`
+                                children: list.total === 1 ? labels.connections.countOne : labels.connections.countMany(list.total)
                             })
                         ]
                     }),
@@ -98,19 +100,19 @@ export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
                             className: theme.button.primary,
                             onClick: handleNew,
                             type: "button",
-                            children: "New connection"
+                            children: labels.connections.create
                         })
                     })
                 ]
             }),
             /*#__PURE__*/ _jsx(Field, {
                 htmlFor: "connection-search",
-                label: "Search",
+                label: labels.connections.searchLabel,
                 children: /*#__PURE__*/ _jsx("input", {
                     className: theme.field.input,
                     id: "connection-search",
                     onChange: (event)=>setTerm(event.target.value),
-                    placeholder: "Name or slug",
+                    placeholder: labels.connections.searchPlaceholder,
                     type: "search",
                     value: term
                 })
@@ -119,7 +121,7 @@ export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
                 rows: 6
             }) : null,
             list.error ? /*#__PURE__*/ _jsxs(Notice, {
-                title: "This list could not be loaded",
+                title: labels.connections.loadFailed,
                 tone: "danger",
                 children: [
                     list.error,
@@ -128,13 +130,13 @@ export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
                         className: theme.button.ghost,
                         onClick: list.reload,
                         type: "button",
-                        children: "Try again"
+                        children: labels.connections.retry
                     })
                 ]
             }) : null,
             !firstLoad && list.items.length === 0 && !list.error ? /*#__PURE__*/ _jsx("p", {
                 className: theme.list.empty,
-                children: search.length > 0 ? `No connection matches “${search}”. Clear the search to see them all.` : 'No connections yet. A connection is one service this app calls — its base URL, how it authenticates and how long it may take. Start with New connection.'
+                children: search.length > 0 ? labels.connections.emptySearch(search) : labels.connections.empty
             }) : null,
             list.items.length > 0 ? /*#__PURE__*/ _jsx("ul", {
                 className: theme.list.wrapper,
@@ -154,7 +156,7 @@ export function ConnectionList({ actions, onNewConnection, reloadToken = 0 }) {
                                         }),
                                         source.enabled === false ? /*#__PURE__*/ _jsx(Badge, {
                                             tone: "neutral",
-                                            children: "Off"
+                                            children: labels.connections.off
                                         }) : null
                                     ]
                                 }),

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

@@ -2,11 +2,19 @@ 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;
+/** What a step has to show about itself beyond its name. */
+export type ConnectionStepState = {
+    /** Shown in place of the number, and in the step's own words. */
+    done?: boolean;
+    /** The step before it is unfinished; still reachable, but said so. */
+    locked?: boolean;
+    /** One short phrase proving the step is done — "3 calls, all sampled". */
+    evidence?: 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>>;
+    steps?: Partial<Record<ConnectionTab, ConnectionStepState>>;
     label?: string;
 };
-export declare function ConnectionTabs({ value, onChange, counts, label, }: ConnectionTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectionTabs({ value, onChange, steps, label, }: ConnectionTabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,32 +2,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { cn } from '../../../utils/cn';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 /**
- * The strip that switches between a connection's own settings, its endpoints,
- * its mappings and its runs.
+ * The four phases of an import, in the order they happen.
  *
- * 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.
+ * These were four flat tabs — Connection, Endpoints, Mappings, Runs — sitting
+ * side by side with nothing to say that they are a SEQUENCE, that a mapping is
+ * meaningless before a call has been tried, or which of them the operator had
+ * already finished. People opened the middle one first and met a dead end.
+ *
+ * So each is a step: a number, its name, one sentence saying what it is for, and
+ * a line of evidence once it is done. What is on screen now answers "where am I,
+ * what is this for, and what have I already got".
+ *
+ * It remains a real ARIA tablist — one stop in the tab order, arrow keys between
+ * the steps. A row of separately tabbable cards would make a keyboard user press
+ * Tab four times to leave a strip 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'
-    }
+const ORDER = [
+    'connection',
+    'endpoints',
+    'mappings',
+    'runs'
 ];
 /** Shared with the panel so `aria-controls` and `aria-labelledby` line up. */ export function connectionTabId(tab) {
     return `integrations-tab-${tab}`;
@@ -35,18 +32,25 @@ const TABS = [
 export function connectionTabPanelId(tab) {
     return `integrations-panel-${tab}`;
 }
-export function ConnectionTabs({ value, onChange, counts, label = 'Connection sections' }) {
+export function ConnectionTabs({ value, onChange, steps, label = 'Import steps' }) {
+    const labels = useLabels();
     const buttonsRef = useRef({});
+    const copy = {
+        connection: labels.journey.connection,
+        endpoints: labels.journey.endpoints,
+        mappings: labels.journey.mappings,
+        runs: labels.journey.runs
+    };
     const select = (index)=>{
-        const next = TABS[(index % TABS.length + TABS.length) % TABS.length];
+        const next = ORDER[(index % ORDER.length + ORDER.length) % ORDER.length];
         if (!next) return;
-        onChange(next.value);
+        onChange(next);
         // 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();
+        // otherwise the next arrow press starts from the step the user just left.
+        buttonsRef.current[next]?.focus();
     };
     const handleKeyDown = (event, tab)=>{
-        const index = TABS.findIndex((entry)=>entry.value === tab);
+        const index = ORDER.indexOf(tab);
         if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
             event.preventDefault();
             select(index + 1);
@@ -58,38 +62,68 @@ export function ConnectionTabs({ value, onChange, counts, label = 'Connection se
             select(0);
         } else if (event.key === 'End') {
             event.preventDefault();
-            select(TABS.length - 1);
+            select(ORDER.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);
-        })
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-2.5",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.steps.intro,
+                children: labels.journey.intro
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                "aria-label": label,
+                className: theme.steps.wrapper,
+                role: "tablist",
+                children: ORDER.map((tab, index)=>{
+                    const selected = tab === value;
+                    const state = steps?.[tab] ?? {};
+                    const { name, purpose } = copy[tab];
+                    return /*#__PURE__*/ _jsxs("button", {
+                        "aria-controls": connectionTabPanelId(tab),
+                        "aria-selected": selected,
+                        className: cn(theme.steps.item, state.done && !selected && theme.steps.itemDone, state.locked && !selected && theme.steps.itemLocked, selected && theme.steps.itemActive),
+                        id: connectionTabId(tab),
+                        onClick: ()=>onChange(tab),
+                        onKeyDown: (event)=>handleKeyDown(event, tab),
+                        ref: (node)=>{
+                            buttonsRef.current[tab] = node;
+                        },
+                        role: "tab",
+                        // Roving tabindex: the whole strip is ONE stop in the tab order.
+                        tabIndex: selected ? 0 : -1,
+                        type: "button",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                className: cn(theme.steps.marker, selected ? theme.steps.markerActive : state.done ? theme.steps.markerDone : state.locked ? theme.steps.markerLocked : theme.steps.markerLocked),
+                                children: state.done && !selected ? '✓' : index + 1
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: "min-w-0 flex-1",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: cn(theme.steps.name, 'block'),
+                                        children: name
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: cn(theme.steps.purpose, 'block'),
+                                        children: purpose
+                                    }),
+                                    state.evidence ? /*#__PURE__*/ _jsx("span", {
+                                        className: cn(theme.steps.evidence, 'block'),
+                                        children: state.evidence
+                                    }) : state.locked ? /*#__PURE__*/ _jsx("span", {
+                                        className: cn(theme.field.hint, 'mt-1 block'),
+                                        children: labels.journey.lockedHint
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    }, tab);
+                })
+            })
+        ]
     });
 }

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

@@ -1,2 +1,2 @@
 import type { IntegrationsPageProps } from '../types';
-export declare function IntegrationsPage({ title, subtitle, className, actions, onSubscribeProgress, }: IntegrationsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function IntegrationsPage({ title, subtitle, className, actions, labels: labelsOverride, onSubscribeProgress, }: IntegrationsPageProps): import("react/jsx-runtime").JSX.Element;