nucleus-core-ts 0.9.798 → 0.9.800

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;

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

@@ -5,6 +5,8 @@ import gsap from 'gsap';
 import { useEffect, useEffectEvent, useRef, useState } from 'react';
 import { cn } from '../../../utils/cn';
 import { useIntegrationsStore } from '../store';
+import { resolveIntegrationsLabels } from '../text';
+import { IntegrationsLabelsProvider } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { ConnectionList } from './ConnectionList';
 import { ConnectionSettingsTab } from './ConnectionSettingsTab';
@@ -22,8 +24,12 @@ import { RunsTab } from './RunsTab';
  * page from the server rather than being handed a list to slice.
  */ gsap.registerPlugin(useGSAP);
 const theme = integrationsPageTheme;
-export function IntegrationsPage({ title = 'Integrations', subtitle = 'Connect an external service, describe the data you want and import it on your terms.', className, actions, onSubscribeProgress }) {
+export function IntegrationsPage({ title = 'Integrations', subtitle = 'Connect an external service, describe the data you want and import it on your terms.', className, actions, labels: labelsOverride, onSubscribeProgress }) {
     const store = useIntegrationsStore();
+    // Resolved here rather than read from the context, because this component is
+    // the one that PROVIDES it — and passed down so a control four levels deep
+    // does not need a `labels` prop of its own.
+    const labels = resolveIntegrationsLabels(labelsOverride);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
     /**
@@ -74,118 +80,146 @@ export function IntegrationsPage({ title = 'Integrations', subtitle = 'Connect a
     };
     const tab = store.tab;
     const hasConnection = store.selectedSourceId !== null;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: cn(theme.container, className),
-        ref: containerRef,
-        children: [
-            /*#__PURE__*/ _jsx("header", {
-                className: theme.header.wrapper,
-                children: /*#__PURE__*/ _jsxs("div", {
-                    className: "flex min-w-0 flex-col gap-1",
-                    children: [
-                        /*#__PURE__*/ _jsx("h1", {
-                            className: theme.header.title,
-                            children: title
-                        }),
-                        subtitle ? /*#__PURE__*/ _jsx("p", {
-                            className: theme.header.subtitle,
-                            children: subtitle
-                        }) : null
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                "aria-live": "assertive",
-                className: "contents",
-                role: "alert",
-                children: store.error ? /*#__PURE__*/ _jsxs("div", {
-                    className: "relative",
+    /**
+   * What each step can say about itself.
+   *
+   * Evidence rather than a bare count: "3 calls, all tried" answers a question a
+   * number does not — whether the thing was only declared or actually run. A
+   * step whose prerequisite is missing is marked locked rather than hidden,
+   * because a step you cannot see is one you cannot understand the order of.
+   */ const selectedSource = store.sources.find((s)=>s.id === store.selectedSourceId);
+    const sampled = store.endpoints.filter((e)=>(e.sampleResponse?.records?.length ?? 0) > 0).length;
+    const steps = {
+        connection: {
+            done: Boolean(selectedSource),
+            evidence: selectedSource ? labels.journey.evidence.connection(selectedSource.name) : undefined
+        },
+        endpoints: {
+            done: store.endpointsTotal > 0,
+            evidence: store.endpointsTotal > 0 ? labels.journey.evidence.endpoints(store.endpointsTotal, sampled) : undefined
+        },
+        mappings: {
+            done: store.mappingsTotal > 0,
+            locked: store.endpointsTotal === 0,
+            evidence: store.mappingsTotal > 0 ? labels.journey.evidence.mappings(store.mappingsTotal) : undefined
+        },
+        runs: {
+            done: store.runsTotal > 0,
+            locked: store.mappingsTotal === 0,
+            evidence: store.runsTotal > 0 ? labels.journey.evidence.runs(store.runsTotal) : undefined
+        }
+    };
+    return /*#__PURE__*/ _jsx(IntegrationsLabelsProvider, {
+        labels: labels,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: cn(theme.container, className),
+            ref: containerRef,
+            children: [
+                /*#__PURE__*/ _jsx("header", {
+                    className: theme.header.wrapper,
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        className: "flex min-w-0 flex-col gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                className: theme.header.title,
+                                children: title
+                            }),
+                            subtitle ? /*#__PURE__*/ _jsx("p", {
+                                className: theme.header.subtitle,
+                                children: subtitle
+                            }) : null
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    "aria-live": "assertive",
+                    className: "contents",
+                    role: "alert",
+                    children: store.error ? /*#__PURE__*/ _jsxs("div", {
+                        className: "relative",
+                        children: [
+                            /*#__PURE__*/ _jsx(Notice, {
+                                title: labels.common.somethingWentWrong,
+                                tone: "danger",
+                                children: store.error
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                "aria-label": labels.common.dismiss,
+                                className: cn(theme.button.ghost, 'absolute top-1.5 right-1.5 h-8 w-8 px-0 sm:h-8'),
+                                onClick: dismissError,
+                                type: "button",
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    "aria-hidden": "true",
+                                    children: "✕"
+                                })
+                            })
+                        ]
+                    }) : null
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: theme.layout.split,
+                    ref: contentRef,
                     children: [
-                        /*#__PURE__*/ _jsx(Notice, {
-                            title: "Something went wrong",
-                            tone: "danger",
-                            children: store.error
+                        /*#__PURE__*/ _jsx("aside", {
+                            "aria-label": labels.connections.heading,
+                            className: theme.layout.aside,
+                            children: /*#__PURE__*/ _jsx(ConnectionList, {
+                                actions: actions,
+                                reloadToken: sourcesReloadToken
+                            })
                         }),
-                        /*#__PURE__*/ _jsx("button", {
-                            "aria-label": "Dismiss error",
-                            className: cn(theme.button.ghost, 'absolute top-1.5 right-1.5 h-8 w-8 px-0 sm:h-8'),
-                            onClick: dismissError,
-                            type: "button",
-                            children: /*#__PURE__*/ _jsx("span", {
-                                "aria-hidden": "true",
-                                children: "✕"
+                        /*#__PURE__*/ _jsx("section", {
+                            "aria-label": "Connection detail",
+                            className: theme.layout.main,
+                            children: hasConnection ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(ConnectionTabs, {
+                                        onChange: changeTab,
+                                        steps: steps,
+                                        value: tab
+                                    }),
+                                    /*#__PURE__*/ _jsxs("section", {
+                                        "aria-labelledby": connectionTabId(tab),
+                                        className: theme.layout.main,
+                                        id: connectionTabPanelId(tab),
+                                        role: "tabpanel",
+                                        children: [
+                                            tab === 'connection' ? /*#__PURE__*/ _jsx(ConnectionSettingsTab, {
+                                                actions: actions,
+                                                onSaved: handleSourceSaved
+                                            }) : null,
+                                            tab === 'endpoints' ? /*#__PURE__*/ _jsx(EndpointsTab, {
+                                                actions: actions
+                                            }) : null,
+                                            tab === 'mappings' ? /*#__PURE__*/ _jsx(MappingsTab, {
+                                                actions: actions
+                                            }) : null,
+                                            tab === 'runs' ? /*#__PURE__*/ _jsx(RunsTab, {
+                                                actions: actions
+                                            }) : null
+                                        ]
+                                    })
+                                ]
+                            }) : // Not a dead end. With nothing selected the only useful thing on this
+                            // screen is creating a connection, so that is what it shows — the
+                            // previous message told an operator to select from a list that is
+                            // empty on a fresh install, with no way to add the first one.
+                            /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: theme.list.empty,
+                                        children: "Select a connection on the left, or set up a new one here."
+                                    }),
+                                    /*#__PURE__*/ _jsx(ConnectionSettingsTab, {
+                                        actions: actions,
+                                        onSaved: handleSourceSaved
+                                    })
+                                ]
                             })
                         })
                     ]
-                }) : null
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: theme.layout.split,
-                ref: contentRef,
-                children: [
-                    /*#__PURE__*/ _jsx("aside", {
-                        "aria-label": "Connections",
-                        className: theme.layout.aside,
-                        children: /*#__PURE__*/ _jsx(ConnectionList, {
-                            actions: actions,
-                            reloadToken: sourcesReloadToken
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx("section", {
-                        "aria-label": "Connection detail",
-                        className: theme.layout.main,
-                        children: hasConnection ? /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx(ConnectionTabs, {
-                                    counts: {
-                                        endpoints: store.endpointsTotal,
-                                        mappings: store.mappingsTotal,
-                                        runs: store.runsTotal
-                                    },
-                                    onChange: changeTab,
-                                    value: tab
-                                }),
-                                /*#__PURE__*/ _jsxs("section", {
-                                    "aria-labelledby": connectionTabId(tab),
-                                    className: theme.layout.main,
-                                    id: connectionTabPanelId(tab),
-                                    role: "tabpanel",
-                                    children: [
-                                        tab === 'connection' ? /*#__PURE__*/ _jsx(ConnectionSettingsTab, {
-                                            actions: actions,
-                                            onSaved: handleSourceSaved
-                                        }) : null,
-                                        tab === 'endpoints' ? /*#__PURE__*/ _jsx(EndpointsTab, {
-                                            actions: actions
-                                        }) : null,
-                                        tab === 'mappings' ? /*#__PURE__*/ _jsx(MappingsTab, {
-                                            actions: actions
-                                        }) : null,
-                                        tab === 'runs' ? /*#__PURE__*/ _jsx(RunsTab, {
-                                            actions: actions
-                                        }) : null
-                                    ]
-                                })
-                            ]
-                        }) : // Not a dead end. With nothing selected the only useful thing on this
-                        // screen is creating a connection, so that is what it shows — the
-                        // previous message told an operator to select from a list that is
-                        // empty on a fresh install, with no way to add the first one.
-                        /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx("p", {
-                                    className: theme.list.empty,
-                                    children: "Select a connection on the left, or set up a new one here."
-                                }),
-                                /*#__PURE__*/ _jsx(ConnectionSettingsTab, {
-                                    actions: actions,
-                                    onSaved: handleSourceSaved
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
+                })
+            ]
+        })
     });
 }

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent } from 'react';
 import { useIntegrationsStore } from '../store';
+import { useLabels } from '../text/context';
 import { integrationsPageTheme } from '../theme';
 import { Notice } from './Primitives';
 import { RunHistoryRow } from './RunHistoryRow';
@@ -17,6 +18,7 @@ import { useInfiniteList } from './useInfiniteList';
 const PAGE_SIZE = 20;
 export function RunHistory({ actions, mappingId, refreshKey, onRefresh }) {
     const store = useIntegrationsStore();
+    const labels = useLabels();
     const list = useInfiniteList({
         load: (page)=>actions.listRuns({
                 page,
@@ -69,7 +71,7 @@ export function RunHistory({ actions, mappingId, refreshKey, onRefresh }) {
                 children: [
                     /*#__PURE__*/ _jsx("h3", {
                         className: theme.card.title,
-                        children: "History"
+                        children: labels.runs.historyHeading
                     }),
                     /*#__PURE__*/ _jsx("span", {
                         className: theme.field.hint,

package/dist/fe/components/IntegrationsPage/components/RunPanel.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 { Notice } from './Primitives';
 import { RunConfirmStep } from './RunConfirmStep';
@@ -19,6 +20,7 @@ import { StatGridSkeleton } from './Skeletons';
  */ const theme = integrationsPageTheme;
 export function RunPanel({ mapping, actions, onSubscribeProgress, onRunSettled }) {
     const store = useIntegrationsStore();
+    const labels = useLabels();
     const [confirming, setConfirming] = useState(false);
     const [starting, setStarting] = useState(false);
     const [cancelling, setCancelling] = useState(false);
@@ -103,7 +105,7 @@ export function RunPanel({ mapping, actions, onSubscribeProgress, onRunSettled }
                             }),
                             /*#__PURE__*/ _jsx("p", {
                                 className: theme.field.hint,
-                                children: `Writes into ${mapping.targetEntity} · ${mapping.writeMode} · missing rows: ${mapping.missingRecordPolicy}`
+                                children: labels.runs.summary(mapping.targetEntity, mapping.writeMode, mapping.missingRecordPolicy)
                             })
                         ]
                     }),
@@ -150,7 +152,7 @@ export function RunPanel({ mapping, actions, onSubscribeProgress, onRunSettled }
                     }) : null,
                     !(store.planning || plan || activeRunId) ? /*#__PURE__*/ _jsx(Notice, {
                         tone: "info",
-                        title: "Preview before you run",
+                        title: labels.runs.previewExplainTitle,
                         children: "A preview reads the source without writing anything, and reports how many rows would be created, updated, skipped, and how many rows in the target the source no longer returns."
                     }) : null
                 ]

package/dist/fe/components/IntegrationsPage/components/RunPlanIssues.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';
 /**
  * The records the planner could not use, folded away.
@@ -18,13 +19,14 @@ import { integrationsPageTheme } from '../theme';
     }).join(', ');
 }
 export function RunPlanIssues({ issues }) {
+    const labels = useLabels();
     if (issues.length === 0) return null;
     return /*#__PURE__*/ _jsxs("details", {
         className: cn(theme.card.wrapper, 'px-3 py-2.5 sm:px-4 sm:py-3'),
         children: [
             /*#__PURE__*/ _jsx("summary", {
                 className: cn(theme.card.title, 'cursor-pointer'),
-                children: `${issues.length} record(s) the plan could not use`
+                children: labels.runs.unusable(issues.length)
             }),
             /*#__PURE__*/ _jsx("ul", {
                 className: "mt-2 flex flex-col gap-2",
@@ -41,15 +43,15 @@ export function RunPlanIssues({ issues }) {
                             }),
                             issue.dedupKey ? /*#__PURE__*/ _jsx("span", {
                                 className: theme.field.hint,
-                                children: `Dedup key: ${issue.dedupKey}`
+                                children: `${labels.runs.dedupKey}: ${issue.dedupKey}`
                             }) : null,
                             issue.keptRow ? /*#__PURE__*/ _jsx("span", {
                                 className: theme.field.hint,
-                                children: `Kept — ${describeRow(issue.keptRow)}`
+                                children: `${labels.runs.kept} — ${describeRow(issue.keptRow)}`
                             }) : null,
                             issue.row ? /*#__PURE__*/ _jsx("span", {
                                 className: theme.field.hint,
-                                children: issue.keptRow ? `Skipped — ${describeRow(issue.row)}` : describeRow(issue.row)
+                                children: issue.keptRow ? `${labels.runs.skipped} — ${describeRow(issue.row)}` : describeRow(issue.row)
                             }) : null
                         ]
                     }, `${issue.sourceIndex}-${issue.kind}-${index}`))

package/dist/fe/components/IntegrationsPage/components/RunPlanSummary.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 { Badge, Notice, Stat } from './Primitives';
 import { RunPlanIssues } from './RunPlanIssues';
@@ -17,6 +18,7 @@ import { RunPlanIssues } from './RunPlanIssues';
     return undefined;
 }
 export function RunPlanSummary({ plan }) {
+    const labels = useLabels();
     // A source that reports a total and hands over a different number of records
     // is the loudest symptom of a wrong pagination profile, and the run that
     // follows treats everything it never saw as missing.
@@ -54,28 +56,28 @@ export function RunPlanSummary({ plan }) {
                 className: theme.stat.grid,
                 children: [
                     /*#__PURE__*/ _jsx(Stat, {
-                        label: "To create",
+                        label: labels.runs.toCreate,
                         value: plan.toCreate
                     }),
                     /*#__PURE__*/ _jsx(Stat, {
-                        label: "To update",
+                        label: labels.runs.toUpdate,
                         value: plan.toUpdate
                     }),
                     /*#__PURE__*/ _jsx(Stat, {
-                        label: "To skip",
+                        label: labels.runs.toSkip,
                         value: plan.toSkip
                     }),
                     /*#__PURE__*/ _jsx(Stat, {
-                        label: "Missing",
+                        label: labels.runs.missing,
                         tone: missingTone(plan),
                         value: plan.missing
                     }),
                     /*#__PURE__*/ _jsx(Stat, {
-                        label: "Already there",
+                        label: labels.runs.alreadyThere,
                         value: plan.existingCount
                     }),
                     /*#__PURE__*/ _jsx(Stat, {
-                        label: "Fetched",
+                        label: labels.runs.fetched,
                         value: plan.totalFetched
                     })
                 ]

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

@@ -2,11 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useIntegrationsStore } from '../store';
+import { useLabels } from '../text/context';
 import { Notice } from './Primitives';
 import { RunHistory } from './RunHistory';
 import { RunPanel } from './RunPanel';
 export function RunsTab({ actions, onSubscribeProgress }) {
     const store = useIntegrationsStore();
+    const labels = useLabels();
     // A lookup by id, not a list operation: the selected mapping is on the page the
     // server already returned, and nothing here filters, sorts or pages it.
     const selectedId = store.selectedMappingId;
@@ -25,7 +27,7 @@ export function RunsTab({ actions, onSubscribeProgress }) {
                 onSubscribeProgress: onSubscribeProgress
             }) : /*#__PURE__*/ _jsx(Notice, {
                 tone: "info",
-                title: "Choose a mapping to preview or run an import",
+                title: labels.runs.chooseMappingTitle,
                 children: "A mapping is what says which endpoint feeds which target entity, and how missing rows are treated. Pick one on the Mappings tab; the history below still lists every run of this connection."
             }),
             /*#__PURE__*/ _jsx(RunHistory, {

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

@@ -13,6 +13,8 @@ export type { InfiniteListPage, UseInfiniteListOptions, UseInfiniteListResult, }
 export { useInfiniteList } from './components/useInfiniteList';
 export { useIntegrationsStore } from './store';
 export type { ConnectionTab } from './store/state';
+export type { IntegrationsLabels, IntegrationsLabelsOverride } from './text';
+export { defaultIntegrationsLabels, resolveIntegrationsLabels } from './text';
 export type { IntegrationsPageTheme } from './theme';
 export { extendIntegrationsTheme, integrationsPageTheme } from './theme';
 export type * from './types';

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

@@ -8,4 +8,5 @@ export { RunsTab } from './components/RunsTab';
 export { CardSkeleton, ListSkeleton, StatGridSkeleton } from './components/Skeletons';
 export { useInfiniteList } from './components/useInfiniteList';
 export { useIntegrationsStore } from './store';
+export { defaultIntegrationsLabels, resolveIntegrationsLabels } from './text';
 export { extendIntegrationsTheme, integrationsPageTheme } from './theme';

package/dist/fe/components/IntegrationsPage/store/index.js

@@ -85,6 +85,12 @@ export const { useStore: useIntegrationsStore } = createStore(initial, {
                 // A plan belongs to the mapping it was computed for. Showing it against a
                 // different one would have an operator approve counts from another import.
                 store.plan = null;
+                // And so does a RUN, which says something stronger than a plan does: that
+                // this import happened. Seen live — the Ünvanlar run stayed on screen
+                // under a header reading "Writes into locations", for a mapping that had
+                // never been run at all.
+                store.activeRunId = null;
+                store.progress = null;
             }),
     setRuns: (store)=>(items, total)=>batch(()=>{
                 store.runs = items;

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

@@ -0,0 +1,7 @@
+import { type IntegrationsLabels } from './index';
+export declare function IntegrationsLabelsProvider({ labels, children, }: {
+    labels: IntegrationsLabels;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** The resolved labels. Falls back to English when no provider is above. */
+export declare function useLabels(): IntegrationsLabels;

package/dist/fe/components/IntegrationsPage/text/context.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { defaultIntegrationsLabels } from './index';
+/**
+ * The panel's words, reachable from any depth without prop-drilling.
+ *
+ * A context rather than a prop because the strings are needed by controls four
+ * levels down — a field row, a badge, a stat cell — and threading them through
+ * would put a `labels` prop on components that otherwise take none.
+ */ const LabelsContext = /*#__PURE__*/ createContext(defaultIntegrationsLabels);
+export function IntegrationsLabelsProvider({ labels, children }) {
+    return /*#__PURE__*/ _jsx(LabelsContext.Provider, {
+        value: labels,
+        children: children
+    });
+}
+/** The resolved labels. Falls back to English when no provider is above. */ export function useLabels() {
+    return useContext(LabelsContext);
+}

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

@@ -0,0 +1,117 @@
+/**
+ * Every word the panel says, in one place — and overridable by the app.
+ *
+ * The theme could already be replaced slice by slice; the text could not, so a
+ * Turkish intranet rendered a Turkish page header above an entirely English
+ * panel. From the operator's side that does not read as "in another language",
+ * it reads as no explanation at all: `upsert`, `Deduplication column`,
+ * `missing rows: ignore` mean nothing to the person whose job this screen is.
+ *
+ * English stays the default so an app that says nothing still gets sentences,
+ * and every group is overridable on its own — an app translating the steps does
+ * not have to restate the buttons.
+ */
+export type IntegrationsLabels = {
+    /** The four phases of the work, in the order they happen. */
+    journey: {
+        heading: string;
+        /** Shown once, above the steps: what this screen is for. */
+        intro: string;
+        connection: {
+            name: string;
+            purpose: string;
+        };
+        endpoints: {
+            name: string;
+            purpose: string;
+        };
+        mappings: {
+            name: string;
+            purpose: string;
+        };
+        runs: {
+            name: string;
+            purpose: string;
+        };
+        /** Marks a step whose prerequisite is not done yet. */
+        lockedHint: string;
+        doneHint: string;
+        /** One short phrase per step proving it is done. */
+        evidence: {
+            connection: (name: string) => string;
+            endpoints: (total: number, sampled: number) => string;
+            mappings: (total: number) => string;
+            runs: (total: number) => string;
+        };
+    };
+    connections: {
+        heading: string;
+        countOne: string;
+        countMany: (n: number) => string;
+        searchLabel: string;
+        searchPlaceholder: string;
+        create: string;
+        empty: string;
+        emptySearch: (term: string) => string;
+        loadFailed: string;
+        retry: string;
+        off: string;
+    };
+    runs: {
+        /** The one-line summary above the buttons. */
+        summary: (target: string, writeMode: string, missing: string) => string;
+        preview: string;
+        start: string;
+        cancel: string;
+        previewExplainTitle: string;
+        previewExplainBody: string;
+        historyHeading: string;
+        historyEmpty: string;
+        chooseMappingTitle: string;
+        chooseMappingBody: string;
+        toCreate: string;
+        toUpdate: string;
+        toSkip: string;
+        missing: string;
+        alreadyThere: string;
+        fetched: string;
+        unusable: (n: number) => string;
+        kept: string;
+        skipped: string;
+        dedupKey: string;
+    };
+    writeMode: {
+        upsert: string;
+        append: string;
+        replace: string;
+    };
+    missingPolicy: {
+        ignore: string;
+        deactivate: string;
+        delete: string;
+    };
+    common: {
+        save: string;
+        cancel: string;
+        delete: string;
+        deleting: string;
+        saving: string;
+        somethingWentWrong: string;
+        dismiss: string;
+    };
+};
+/** What every app gets before it says otherwise. */
+export declare const defaultIntegrationsLabels: IntegrationsLabels;
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends (...args: never[]) => unknown ? T[K] : T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+export type IntegrationsLabelsOverride = DeepPartial<IntegrationsLabels>;
+/**
+ * Fills the gaps in an app's labels from the defaults.
+ *
+ * Two levels deep is everything this shape has, so a group is merged rather
+ * than replaced — an app naming the four steps does not lose the sentences that
+ * explain them.
+ */
+export declare function resolveIntegrationsLabels(overrides?: IntegrationsLabelsOverride): IntegrationsLabels;
+export {};

package/dist/fe/components/IntegrationsPage/text/index.js

@@ -0,0 +1,127 @@
+/**
+ * Every word the panel says, in one place — and overridable by the app.
+ *
+ * The theme could already be replaced slice by slice; the text could not, so a
+ * Turkish intranet rendered a Turkish page header above an entirely English
+ * panel. From the operator's side that does not read as "in another language",
+ * it reads as no explanation at all: `upsert`, `Deduplication column`,
+ * `missing rows: ignore` mean nothing to the person whose job this screen is.
+ *
+ * English stays the default so an app that says nothing still gets sentences,
+ * and every group is overridable on its own — an app translating the steps does
+ * not have to restate the buttons.
+ */ /** What every app gets before it says otherwise. */ export const defaultIntegrationsLabels = {
+    journey: {
+        heading: 'How an import works',
+        intro: 'Data is brought in from another service and written into one of your own tables. Four steps, in this order — each one is only useful once the one before it is done.',
+        connection: {
+            name: 'Connection',
+            purpose: 'Which service, at which address, and how we prove who we are.'
+        },
+        endpoints: {
+            name: 'Calls',
+            purpose: 'Which call to make, and what it really returns — try it and see.'
+        },
+        mappings: {
+            name: 'Mapping',
+            purpose: 'Which field from the answer lands in which column of your table.'
+        },
+        runs: {
+            name: 'Import',
+            purpose: 'See what would happen, then let it happen.'
+        },
+        lockedHint: 'Finish the step before this one first.',
+        doneHint: 'Done',
+        evidence: {
+            connection: (name)=>`Connected to ${name}`,
+            endpoints: (total, sampled)=>sampled === total ? `${total} call(s), all tried` : `${total} call(s), ${sampled} tried`,
+            mappings: (total)=>`${total} mapping(s)`,
+            runs: (total)=>`${total} import(s) run`
+        }
+    },
+    connections: {
+        heading: 'Connections',
+        countOne: '1 connection',
+        countMany: (n)=>`${n} connections`,
+        searchLabel: 'Search',
+        searchPlaceholder: 'Name or slug',
+        create: 'New connection',
+        empty: '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.',
+        emptySearch: (term)=>`No connection matches “${term}”. Clear the search to see them all.`,
+        loadFailed: 'This list could not be loaded',
+        retry: 'Try again',
+        off: 'Off'
+    },
+    runs: {
+        summary: (target, writeMode, missing)=>`Writes into ${target} · ${writeMode} · missing rows: ${missing}`,
+        preview: 'Preview',
+        start: 'Run import',
+        cancel: 'Cancel',
+        previewExplainTitle: 'Preview before you run',
+        previewExplainBody: 'A preview reads the source without writing anything, and reports how many rows would be created, updated, skipped, and how many rows in the target the source no longer returns.',
+        historyHeading: 'History',
+        historyEmpty: 'Nothing has run yet. A preview writes nothing; the first entry appears here once an import is started.',
+        chooseMappingTitle: 'Choose a mapping to preview or run an import',
+        chooseMappingBody: 'A mapping is what says which endpoint feeds which target entity, and how missing rows are treated.',
+        toCreate: 'To create',
+        toUpdate: 'To update',
+        toSkip: 'To skip',
+        missing: 'Missing',
+        alreadyThere: 'Already there',
+        fetched: 'Fetched',
+        unusable: (n)=>`${n} record(s) the plan could not use`,
+        kept: 'Kept',
+        skipped: 'Skipped',
+        dedupKey: 'Dedup key'
+    },
+    writeMode: {
+        upsert: 'update what matches, insert the rest',
+        append: 'always insert, never match',
+        replace: 'empty the table, then insert'
+    },
+    missingPolicy: {
+        ignore: 'leave them exactly as they are',
+        deactivate: 'mark them inactive',
+        delete: 'delete them'
+    },
+    common: {
+        save: 'Save',
+        cancel: 'Cancel',
+        delete: 'Delete',
+        deleting: 'Deleting…',
+        saving: 'Saving…',
+        somethingWentWrong: 'Something went wrong',
+        dismiss: 'Dismiss error'
+    }
+};
+/**
+ * Fills the gaps in an app's labels from the defaults.
+ *
+ * Two levels deep is everything this shape has, so a group is merged rather
+ * than replaced — an app naming the four steps does not lose the sentences that
+ * explain them.
+ */ export function resolveIntegrationsLabels(overrides) {
+    if (!overrides) return defaultIntegrationsLabels;
+    const merged = {
+        ...defaultIntegrationsLabels
+    };
+    for (const [group, value] of Object.entries(overrides)){
+        const base = defaultIntegrationsLabels[group];
+        if (!value || typeof value !== 'object' || !base || typeof base !== 'object') {
+            merged[group] = value ?? base;
+            continue;
+        }
+        const groupMerged = {
+            ...base
+        };
+        for (const [key, inner] of Object.entries(value)){
+            const innerBase = groupMerged[key];
+            groupMerged[key] = inner && typeof inner === 'object' && innerBase && typeof innerBase === 'object' ? {
+                ...innerBase,
+                ...inner
+            } : inner ?? innerBase;
+        }
+        merged[group] = groupMerged;
+    }
+    return merged;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/fe/components/IntegrationsPage/text/text.test.js

@@ -0,0 +1,67 @@
+import { describe, expect, test } from 'bun:test';
+import { defaultIntegrationsLabels, resolveIntegrationsLabels } from './index';
+/**
+ * The panel shipped English inside a Turkish app, which does not read as
+ * "another language" to the person using it — it reads as no explanation at
+ * all. Apps can now say it their own way, and the point of merging rather than
+ * replacing is that translating one group never blanks the rest.
+ */ describe('resolveIntegrationsLabels', ()=>{
+    test('saying nothing gets the English defaults, not empty strings', ()=>{
+        expect(resolveIntegrationsLabels()).toBe(defaultIntegrationsLabels);
+        expect(resolveIntegrationsLabels(undefined).connections.heading).toBe('Connections');
+    });
+    test('overriding one key inside a group keeps that group’s other keys', ()=>{
+        const labels = resolveIntegrationsLabels({
+            connections: {
+                heading: 'Bağlantılar'
+            }
+        });
+        expect(labels.connections.heading).toBe('Bağlantılar');
+        expect(labels.connections.searchLabel).toBe(defaultIntegrationsLabels.connections.searchLabel);
+        expect(labels.runs.preview).toBe(defaultIntegrationsLabels.runs.preview);
+    });
+    test('a nested group merges too — naming a step keeps its explanation', ()=>{
+        const labels = resolveIntegrationsLabels({
+            journey: {
+                connection: {
+                    name: 'Bağlantı'
+                }
+            }
+        });
+        expect(labels.journey.connection.name).toBe('Bağlantı');
+        expect(labels.journey.connection.purpose).toBe(defaultIntegrationsLabels.journey.connection.purpose);
+        expect(labels.journey.endpoints.name).toBe(defaultIntegrationsLabels.journey.endpoints.name);
+    });
+    test('a function label can be replaced, and is called with the same arguments', ()=>{
+        const labels = resolveIntegrationsLabels({
+            connections: {
+                countMany: (n)=>`${n} bağlantı`
+            },
+            runs: {
+                summary: (t)=>`${t} tablosuna yazar`
+            }
+        });
+        expect(labels.connections.countMany(3)).toBe('3 bağlantı');
+        expect(labels.runs.summary('departments', 'upsert', 'ignore')).toBe('departments tablosuna yazar');
+    });
+    test('the defaults are never mutated by an override', ()=>{
+        resolveIntegrationsLabels({
+            connections: {
+                heading: 'Bağlantılar'
+            }
+        });
+        expect(defaultIntegrationsLabels.connections.heading).toBe('Connections');
+    });
+    test('every step has both a name and a sentence saying what it is for', ()=>{
+        const { journey } = defaultIntegrationsLabels;
+        for (const step of [
+            journey.connection,
+            journey.endpoints,
+            journey.mappings,
+            journey.runs
+        ]){
+            expect(step.name.length).toBeGreaterThan(0);
+            expect(step.purpose.length).toBeGreaterThan(10);
+        }
+    });
+});

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

@@ -43,6 +43,22 @@ export type IntegrationsPageTheme = {
         active: string;
         inactive: string;
     };
+    /** The four phases of an import, as a strip of steps rather than flat tabs. */
+    steps: {
+        intro: string;
+        wrapper: string;
+        item: string;
+        itemActive: string;
+        itemDone: string;
+        itemLocked: string;
+        marker: string;
+        markerActive: string;
+        markerDone: string;
+        markerLocked: string;
+        name: string;
+        purpose: string;
+        evidence: string;
+    };
     field: {
         wrapper: string;
         label: string;

package/dist/fe/components/IntegrationsPage/theme/index.js

@@ -46,6 +46,24 @@ export const integrationsPageTheme = {
         active: 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-slate-100',
         inactive: 'text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100'
     },
+    // A step is a card, not a tab: it has to carry a name, a sentence saying what
+    // the step is for, and a line of evidence that it is done. Four of those do
+    // not fit on a phone side by side, so they stack and become a row at sm.
+    steps: {
+        intro: 'text-slate-600 text-sm leading-relaxed sm:max-w-3xl dark:text-slate-400',
+        wrapper: 'grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4',
+        item: 'flex min-w-0 items-start gap-2.5 rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-left transition-colors hover:border-slate-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 focus-visible:outline-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:hover:border-slate-700',
+        itemActive: 'border-sky-400 bg-sky-50 ring-1 ring-sky-400 hover:border-sky-400 dark:border-sky-600 dark:bg-sky-950 dark:ring-sky-600',
+        itemDone: 'border-emerald-200 dark:border-emerald-900',
+        itemLocked: 'opacity-70',
+        marker: 'flex size-6 shrink-0 items-center justify-center rounded-full border font-semibold text-[11px] tabular-nums',
+        markerActive: 'border-sky-500 bg-sky-500 text-white dark:border-sky-500 dark:bg-sky-500',
+        markerDone: 'border-emerald-300 bg-emerald-100 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-400',
+        markerLocked: 'border-slate-200 bg-slate-100 text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500',
+        name: 'font-semibold text-slate-900 text-sm dark:text-slate-100',
+        purpose: 'mt-0.5 text-slate-600 text-xs leading-snug dark:text-slate-400',
+        evidence: 'mt-1 font-medium text-[11px] text-emerald-700 dark:text-emerald-400'
+    },
     field: {
         wrapper: 'flex flex-col gap-1.5',
         label: 'font-medium text-slate-700 text-xs dark:text-slate-300',

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

@@ -1,4 +1,5 @@
 import type { FilterCondition, SortCondition } from '../../../types';
+import type { IntegrationsLabelsOverride } from '../text';
 import type { IntegrationEndpoint, IntegrationMapping, IntegrationRun, IntegrationSource } from './records';
 import type { ConnectionTestValue, EndpointSampleValue, RunPlanValue, RunProgressValue } from './results';
 /**
@@ -84,6 +85,14 @@ export type IntegrationsPageProps = {
     subtitle?: string;
     className?: string;
     actions: IntegrationsActions;
+    /**
+     * The panel's own words, in the app's language.
+     *
+     * Anything left out falls back to English. Without this the panel was English
+     * inside apps that are not — which does not read as "another language" to the
+     * person using it, it reads as no explanation at all.
+     */
+    labels?: IntegrationsLabelsOverride;
     /** Realtime run progress, when the app wires the pub/sub topic. */
     onSubscribeProgress?: (handler: (progress: RunProgressValue) => void) => () => void;
 };

package/dist/fe/index.d.ts

@@ -21,8 +21,9 @@ export type { ForgotPasswordAction, ForgotPasswordFormProps, ForgotPasswordHeade
 export { ForgotPasswordPage, useForgotPasswordStore, } from './components/ForgotPasswordPage';
 export type { FormBuilderProps, FormFieldConfig, FormFieldProps, FormFieldRenderProps, FormFooterRenderProps, FormLayout, FormMode, FormSize, FormState, UseFormBuilderOptions, UseFormBuilderReturn, } from './components/FormBuilder';
 export { FormBuilder, FormField, formBuilderTheme, useFormBuilder, } from './components/FormBuilder';
-export { extendIntegrationsTheme, IntegrationsPage, integrationsPageTheme, useIntegrationsStore, } from './components/IntegrationsPage';
+export { defaultIntegrationsLabels, extendIntegrationsTheme, IntegrationsPage, integrationsPageTheme, resolveIntegrationsLabels, useIntegrationsStore, } from './components/IntegrationsPage';
 export type { ConnectionTab } from './components/IntegrationsPage/store/state';
+export type { IntegrationsLabels, IntegrationsLabelsOverride, } from './components/IntegrationsPage/text';
 export type { IntegrationsPageTheme } from './components/IntegrationsPage/theme';
 export type * from './components/IntegrationsPage/types';
 export type { LoginAction, LoginFeatureConfig, LoginFormData, LoginFormProps, LoginHeaderProps, LoginPageConfig, LoginPageProps, LoginPageVariant, LogoutAction, MeAction, } from './components/LoginPage';

package/dist/fe/index.js

@@ -15,7 +15,7 @@ export { ComponentCanvas, ComponentSidebar, createDefaultRegistry, DesignSystemP
 export { DeviceCard, DevicesHeader, DevicesPage, useDevicesStore } from './components/DevicesPage';
 export { ForgotPasswordPage, useForgotPasswordStore } from './components/ForgotPasswordPage';
 export { FormBuilder, FormField, formBuilderTheme, useFormBuilder } from './components/FormBuilder';
-export { extendIntegrationsTheme, IntegrationsPage, integrationsPageTheme, useIntegrationsStore } from './components/IntegrationsPage';
+export { defaultIntegrationsLabels, extendIntegrationsTheme, IntegrationsPage, integrationsPageTheme, resolveIntegrationsLabels, useIntegrationsStore } from './components/IntegrationsPage';
 export { LoginPage, useLoginStore } from './components/LoginPage';
 export { MagicLinkVerifyPage, magicLinkVerifyPageTheme, useMagicLinkVerifyStore } from './components/MagicLinkVerifyPage';
 export { extendNotificationCenterTheme, NotificationBell, NotificationCenter, notificationCenterTheme, useNotificationCenterStore } from './components/NotificationCenter';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nucleus-core-ts",
-	"version": "0.9.798",
+	"version": "0.9.800",
 	"description": "Production-ready, enterprise-grade TypeScript framework for building multi-tenant APIs",
 	"author": "Hidayet Can Özcan <hidayetcan@gmail.com>",
 	"license": "SEE LICENSE IN LICENSE",