nucleus-core-ts 0.9.800 → 0.9.802

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,52 +10,57 @@ 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",
-        className: "flex flex-col gap-3",
+        "aria-label": labels.connectionForm.sectionLabel,
+        className: "flex flex-col gap-4",
         children: [
-            /*#__PURE__*/ _jsx(Field, {
-                error: errors.name,
-                htmlFor: "connection-name",
-                label: "Name",
-                children: /*#__PURE__*/ _jsx("input", {
-                    "aria-describedby": describedBy('connection-name', false, Boolean(errors.name)),
-                    className: theme.field.input,
-                    disabled: disabled,
-                    id: "connection-name",
-                    onChange: (event)=>onChange({
-                            name: event.target.value
-                        }),
-                    placeholder: "Directory service",
-                    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.",
-                htmlFor: "connection-slug",
-                label: "Slug",
-                children: /*#__PURE__*/ _jsx("input", {
-                    "aria-describedby": describedBy('connection-slug', true, Boolean(errors.slug)),
-                    className: theme.field.input,
-                    disabled: disabled,
-                    id: "connection-slug",
-                    onChange: (event)=>onChange({
-                            slug: event.target.value
-                        }),
-                    placeholder: "hr-service",
-                    type: "text",
-                    value: draft.slug
-                })
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+                children: [
+                    /*#__PURE__*/ _jsx(Field, {
+                        error: errors.name,
+                        htmlFor: "connection-name",
+                        label: labels.connectionForm.name,
+                        children: /*#__PURE__*/ _jsx("input", {
+                            "aria-describedby": describedBy('connection-name', false, Boolean(errors.name)),
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: "connection-name",
+                            onChange: (event)=>onChange({
+                                    name: event.target.value
+                                }),
+                            placeholder: labels.connectionForm.namePlaceholder,
+                            type: "text",
+                            value: draft.name
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Field, {
+                        error: errors.slug,
+                        hint: labels.connectionForm.slugHint,
+                        htmlFor: "connection-slug",
+                        label: labels.connectionForm.slug,
+                        children: /*#__PURE__*/ _jsx("input", {
+                            "aria-describedby": describedBy('connection-slug', true, Boolean(errors.slug)),
+                            className: theme.field.input,
+                            disabled: disabled,
+                            id: "connection-slug",
+                            onChange: (event)=>onChange({
+                                    slug: event.target.value
+                                }),
+                            placeholder: "hr-service",
+                            type: "text",
+                            value: draft.slug
+                        })
+                    })
+                ]
             }),
             /*#__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 +75,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,71 +86,76 @@ 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
                 })
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: theme.field.wrapper,
+                className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
                 children: [
-                    /*#__PURE__*/ _jsxs("label", {
-                        className: cn(theme.field.label, 'flex items-center gap-2'),
-                        htmlFor: "connection-enabled",
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.field.wrapper, 'rounded-xl border border-slate-200 p-3 dark:border-slate-800'),
                         children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                "aria-describedby": "connection-enabled-hint",
-                                checked: draft.enabled,
-                                className: CHECKBOX,
-                                disabled: disabled,
-                                id: "connection-enabled",
-                                onChange: (event)=>onChange({
-                                        enabled: event.target.checked
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: cn(theme.field.label, 'flex items-center gap-2 normal-case tracking-normal text-slate-700 text-sm dark:text-slate-200'),
+                                htmlFor: "connection-enabled",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        "aria-describedby": "connection-enabled-hint",
+                                        checked: draft.enabled,
+                                        className: CHECKBOX,
+                                        disabled: disabled,
+                                        id: "connection-enabled",
+                                        onChange: (event)=>onChange({
+                                                enabled: event.target.checked
+                                            }),
+                                        type: "checkbox"
                                     }),
-                                type: "checkbox"
+                                    labels.connectionForm.enabled
+                                ]
                             }),
-                            "Enabled"
+                            /*#__PURE__*/ _jsx("span", {
+                                className: theme.field.hint,
+                                id: "connection-enabled-hint",
+                                children: labels.connectionForm.enabledHint
+                            })
                         ]
                     }),
-                    /*#__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."
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: theme.field.wrapper,
-                children: [
-                    /*#__PURE__*/ _jsxs("label", {
-                        className: cn(theme.field.label, 'flex items-center gap-2'),
-                        htmlFor: "connection-tls-verify",
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.field.wrapper, 'rounded-xl border border-slate-200 p-3 dark:border-slate-800'),
                         children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                "aria-describedby": "connection-tls-verify-hint",
-                                checked: draft.tlsVerify,
-                                className: CHECKBOX,
-                                disabled: disabled,
-                                id: "connection-tls-verify",
-                                onChange: (event)=>onChange({
-                                        tlsVerify: event.target.checked
+                            /*#__PURE__*/ _jsxs("label", {
+                                className: cn(theme.field.label, 'flex items-center gap-2 normal-case tracking-normal text-slate-700 text-sm dark:text-slate-200'),
+                                htmlFor: "connection-tls-verify",
+                                children: [
+                                    /*#__PURE__*/ _jsx("input", {
+                                        "aria-describedby": "connection-tls-verify-hint",
+                                        checked: draft.tlsVerify,
+                                        className: CHECKBOX,
+                                        disabled: disabled,
+                                        id: "connection-tls-verify",
+                                        onChange: (event)=>onChange({
+                                                tlsVerify: event.target.checked
+                                            }),
+                                        type: "checkbox"
                                     }),
-                                type: "checkbox"
+                                    labels.connectionForm.tlsVerify
+                                ]
                             }),
-                            "Verify TLS certificate"
+                            /*#__PURE__*/ _jsx("span", {
+                                className: theme.field.hint,
+                                id: "connection-tls-verify-hint",
+                                children: draft.tlsVerify ? labels.connectionForm.tlsVerifyOnHint : labels.connectionForm.tlsVerifyOffHint
+                            })
                         ]
-                    }),
-                    /*#__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.'
                     })
                 ]
             }),
             /*#__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/IntegrationsPage.js

@@ -45,6 +45,35 @@ export function IntegrationsPage({ title = 'Integrations', subtitle = 'Connect a
     const handleSourceSaved = ()=>{
         setSourcesReloadToken((token)=>token + 1);
     };
+    /**
+   * How far this connection has got, asked for directly.
+   *
+   * The step strip promises to say where you are, so it cannot depend on having
+   * VISITED the step that counts — on a fresh load every total was zero and the
+   * strip told an operator with five calls, three mappings and two finished
+   * imports to "finish the previous step first". Three counting requests, one
+   * row each, are the price of a strip that is telling the truth.
+   */ const loadProgress = useEffectEvent((sourceId)=>{
+        const one = {
+            page: 1,
+            limit: 1
+        };
+        const total = (result)=>result.meta?.totalItems ?? 0;
+        actions.listEndpoints(sourceId, one).then((r)=>store.setEndpointsTotal(total(r))).catch(()=>{});
+        actions.listMappings(sourceId, one).then((r)=>store.setMappingsTotal(total(r))).catch(()=>{});
+    // Runs are deliberately NOT counted here. A run records the mapping it came
+    // from and nothing about the connection, so the only count available is
+    // every run of every connection — which on the second connection would be
+    // a number that looks like this one's and is not. The Runs tab sets the
+    // real figure for the mapping it is showing; until then the step says
+    // nothing rather than something wrong.
+    });
+    useEffect(()=>{
+        if (store.selectedSourceId) loadProgress(store.selectedSourceId);
+    }, [
+        store.selectedSourceId,
+        sourcesReloadToken
+    ]);
     // One measured entrance. Anything longer makes an operator wait to read counts
     // they came here to check.
     useGSAP(()=>{

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

@@ -49,6 +49,9 @@ export const { useStore: useIntegrationsStore } = createStore(initial, {
                 store.endpointsTotal = total;
                 store.endpointsLoading = false;
             }),
+    setEndpointsTotal: (store)=>(total)=>{
+            store.endpointsTotal = total;
+        },
     setEndpointsPage: (store)=>(page)=>{
             store.endpointsPage = page;
         },
@@ -70,6 +73,9 @@ export const { useStore: useIntegrationsStore } = createStore(initial, {
                 store.mappingsTotal = total;
                 store.mappingsLoading = false;
             }),
+    setMappingsTotal: (store)=>(total)=>{
+            store.mappingsTotal = total;
+        },
     setMappingsPage: (store)=>(page)=>{
             store.mappingsPage = page;
         },
@@ -97,6 +103,9 @@ export const { useStore: useIntegrationsStore } = createStore(initial, {
                 store.runsTotal = total;
                 store.runsLoading = false;
             }),
+    setRunsTotal: (store)=>(total)=>{
+            store.runsTotal = total;
+        },
     setRunsPage: (store)=>(page)=>{
             store.runsPage = page;
         },

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

@@ -57,16 +57,25 @@ export type Actions = {
     selectSource: (id: string | null) => void;
     setTab: (tab: ConnectionTab) => void;
     setEndpoints: (items: IntegrationEndpoint[], total: number) => void;
+    /**
+     * Just the count, without the rows.
+     *
+     * The step strip reports how far a connection has got, and it cannot wait for
+     * the tab that lists the rows to have been opened — so it counts directly.
+     */
+    setEndpointsTotal: (total: number) => void;
     setEndpointsPage: (page: number) => void;
     setEndpointsSearch: (search: string) => void;
     setEndpointsLoading: (loading: boolean) => void;
     selectEndpoint: (id: string | null) => void;
     setMappings: (items: IntegrationMapping[], total: number) => void;
+    setMappingsTotal: (total: number) => void;
     setMappingsPage: (page: number) => void;
     setMappingsSearch: (search: string) => void;
     setMappingsLoading: (loading: boolean) => void;
     selectMapping: (id: string | null) => void;
     setRuns: (items: IntegrationRun[], total: number) => void;
+    setRunsTotal: (total: number) => void;
     setRunsPage: (page: number) => void;
     setRunsLoading: (loading: boolean) => void;
     setSample: (sample: EndpointSampleValue | null) => void;

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

@@ -80,6 +80,26 @@ export type IntegrationsLabels = {
         skipped: string;
         dedupKey: string;
     };
+    /** The connection form — the first screen anyone meets. */
+    connectionForm: {
+        sectionLabel: string;
+        name: string;
+        namePlaceholder: string;
+        slug: string;
+        slugHint: string;
+        baseUrl: string;
+        baseUrlHint: string;
+        description: string;
+        descriptionHint: string;
+        descriptionPlaceholder: string;
+        enabled: string;
+        enabledHint: string;
+        tlsVerify: string;
+        tlsVerifyOnHint: string;
+        tlsVerifyOffHint: string;
+        timeout: string;
+        timeoutHint: string;
+    };
     writeMode: {
         upsert: string;
         append: string;

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

@@ -74,6 +74,25 @@
         skipped: 'Skipped',
         dedupKey: 'Dedup key'
     },
+    connectionForm: {
+        sectionLabel: 'Connection details',
+        name: 'Name',
+        namePlaceholder: 'Directory service',
+        slug: 'Slug',
+        slugHint: 'Used to refer to this connection elsewhere. It does not change once things point at it.',
+        baseUrl: 'Base URL',
+        baseUrlHint: '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.',
+        description: 'Description',
+        descriptionHint: 'For whoever has to work out what this connection is, months from now.',
+        descriptionPlaceholder: 'Read-only employee directory used by the nightly import.',
+        enabled: 'Enabled',
+        enabledHint: 'Turning this off stops every endpoint and import that goes through this connection. The settings are kept.',
+        tlsVerify: 'Verify TLS certificate',
+        tlsVerifyOnHint: 'On. Unchecking it applies to requests made through THIS connection only — no other connection and nothing else in the app is affected.',
+        tlsVerifyOffHint: '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.',
+        timeout: 'Timeout (ms)',
+        timeoutHint: 'How long one request may take before it is given up on. Empty means the server default.'
+    },
     writeMode: {
         upsert: 'update what matches, insert the rest',
         append: 'always insert, never match',

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

@@ -7,106 +7,120 @@
  *
  * An app can replace any slice of this with {@link extendIntegrationsTheme}
  * without forking the components.
- */ /** Shared so a control and its skeleton cannot drift apart in height. */ const CONTROL = 'h-10 rounded-lg text-sm sm:h-9';
+ */ /** Shared so a control and its skeleton cannot drift apart in height. */ const CONTROL = 'h-11 rounded-lg text-sm sm:h-10';
+/**
+ * Micro-caps for field labels.
+ *
+ * A form of twenty identical `text-sm` labels reads as a wall. Making the label
+ * smaller and wider-tracked than its value gives every row an obvious top and
+ * bottom, which is what lets an eye skip the ones it does not need.
+ */ const LABEL = 'font-semibold text-[11px] uppercase tracking-wider';
 export const integrationsPageTheme = {
-    container: 'flex flex-col gap-4 text-slate-900 sm:gap-5 dark:text-slate-100',
+    container: 'flex flex-col gap-5 text-slate-900 sm:gap-6 dark:text-slate-100',
     header: {
-        wrapper: 'flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between',
-        title: 'font-semibold text-lg tracking-tight sm:text-xl',
-        subtitle: 'text-slate-600 text-sm dark:text-slate-400',
+        wrapper: 'flex flex-col gap-2 border-slate-200 border-b pb-4 sm:flex-row sm:items-end sm:justify-between dark:border-slate-800',
+        title: 'font-bold text-slate-900 text-xl tracking-tight sm:text-2xl dark:text-slate-50',
+        subtitle: 'max-w-2xl text-slate-600 text-sm leading-relaxed dark:text-slate-400',
         actions: 'flex flex-wrap items-center gap-2'
     },
-    // One column on a phone; the connection list becomes a rail from lg upward,
-    // where there is finally room for both without either being cramped.
+    // The rail is a chooser, not the work. It gets the narrower column and the
+    // detail gets the rest — before this they were near enough equal, so a form
+    // of twenty fields was squeezed beside a list of one.
     layout: {
-        split: 'grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,20rem)_minmax(0,1fr)] lg:gap-5',
+        split: 'grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,17rem)_minmax(0,1fr)] lg:gap-6',
         aside: 'flex min-w-0 flex-col gap-3',
-        main: 'flex min-w-0 flex-col gap-4'
+        main: 'flex min-w-0 flex-col gap-4 sm:gap-5'
     },
+    // Cards sit on a tinted page, so a white surface separates on its own instead
+    // of relying on a shadow that light mode barely renders.
     card: {
-        wrapper: 'rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900',
-        header: 'flex flex-col gap-2 border-slate-200 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800',
-        title: 'font-medium text-slate-900 text-sm dark:text-slate-100',
-        body: 'flex flex-col gap-3 p-4',
-        footer: 'flex flex-wrap items-center justify-end gap-2 border-slate-200 border-t px-4 py-3 dark:border-slate-800'
+        wrapper: 'overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-slate-200/50 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:shadow-none',
+        header: 'flex flex-col gap-2 border-slate-200/80 border-b bg-slate-50/80 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5 dark:border-slate-800 dark:bg-slate-950/40',
+        title: 'font-semibold text-slate-900 text-sm dark:text-slate-100',
+        body: 'flex flex-col gap-4 p-4 sm:gap-5 sm:p-5',
+        footer: 'flex flex-wrap items-center justify-end gap-2 border-slate-200/80 border-t bg-slate-50/80 px-4 py-3 sm:px-5 dark:border-slate-800 dark:bg-slate-950/40'
     },
     list: {
         wrapper: 'flex flex-col gap-1.5',
-        item: 'flex w-full flex-col gap-0.5 rounded-lg border border-transparent px-3 py-2.5 text-left transition-colors hover:bg-slate-100 dark:hover:bg-slate-800',
-        itemSelected: 'border-sky-300 bg-sky-50 hover:bg-sky-50 dark:border-sky-700 dark:bg-sky-950 dark:hover:bg-sky-950',
-        itemTitle: 'truncate font-medium text-slate-900 text-sm dark:text-slate-100',
+        item: 'flex w-full flex-col gap-0.5 rounded-xl border border-transparent px-3 py-2.5 text-left transition-all hover:border-slate-200 hover:bg-white dark:hover:border-slate-700 dark:hover:bg-slate-900',
+        // A selected row is the only thing on the rail that carries the accent, so
+        // it is legible at a glance from across the screen.
+        itemSelected: 'border-sky-400 bg-white shadow-sky-100 shadow-sm hover:border-sky-400 hover:bg-white dark:border-sky-600 dark:bg-slate-900 dark:shadow-none',
+        itemTitle: 'truncate font-semibold text-slate-900 text-sm dark:text-slate-100',
         itemMeta: 'truncate text-slate-500 text-xs dark:text-slate-400',
-        empty: 'rounded-lg border border-slate-200 border-dashed px-4 py-8 text-center text-slate-500 text-sm dark:border-slate-700 dark:text-slate-400',
+        empty: 'rounded-xl border border-slate-300 border-dashed px-4 py-10 text-center text-slate-500 text-sm leading-relaxed dark:border-slate-700 dark:text-slate-400',
         // Watched by the infinite scroller; the next page is requested when it appears.
         sentinel: 'h-8 w-full shrink-0'
     },
     tabs: {
-        wrapper: 'flex gap-1 overflow-x-auto rounded-lg border border-slate-200 bg-slate-50 p-1 dark:border-slate-800 dark:bg-slate-900',
-        button: 'shrink-0 rounded-md px-3 py-1.5 font-medium text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 focus-visible:outline-offset-2',
+        wrapper: 'flex gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-slate-50 p-1 dark:border-slate-800 dark:bg-slate-900',
+        button: 'shrink-0 rounded-lg px-3 py-1.5 font-medium text-sm transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 focus-visible:outline-offset-2',
         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.
+    // not fit on a phone side by side, so they stack and become a row at lg.
     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',
+        wrapper: 'grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-4',
+        item: 'flex min-w-0 items-start gap-3 rounded-2xl border border-slate-200/80 bg-white px-3.5 py-3 text-left shadow-slate-200/40 shadow-sm transition-all hover:border-slate-300 hover:shadow dark:border-slate-800 dark:bg-slate-900 dark:shadow-none dark:hover:border-slate-700',
+        itemActive: 'border-sky-400 bg-sky-50/60 ring-1 ring-sky-400 hover:border-sky-400 dark:border-sky-600 dark:bg-sky-950/40 dark:ring-sky-600',
+        itemDone: 'border-emerald-200 dark:border-emerald-900/70',
+        itemLocked: 'opacity-60',
+        marker: 'flex size-7 shrink-0 items-center justify-center rounded-full border font-bold text-[11px] tabular-nums',
+        markerActive: 'border-sky-500 bg-sky-500 text-white shadow-sky-200 shadow-sm dark:border-sky-500 dark:bg-sky-500 dark:shadow-none',
         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'
+        name: 'font-semibold text-slate-900 text-sm tracking-tight dark:text-slate-100',
+        purpose: 'mt-1 text-slate-600 text-xs leading-relaxed dark:text-slate-400',
+        evidence: 'mt-1.5 font-semibold 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',
-        input: `w-full border border-slate-300 bg-white px-3 text-slate-900 outline-none transition-colors placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/20 disabled:opacity-60 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:placeholder:text-slate-500 ${CONTROL}`,
-        hint: 'text-slate-500 text-xs dark:text-slate-400',
-        error: 'text-rose-600 text-xs dark:text-rose-400'
+        label: `${LABEL} text-slate-500 dark:text-slate-400`,
+        input: `w-full border border-slate-300 bg-white px-3 text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-sky-500 focus:ring-4 focus:ring-sky-500/15 disabled:opacity-60 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:placeholder:text-slate-500 ${CONTROL}`,
+        hint: 'text-slate-500 text-xs leading-relaxed dark:text-slate-400',
+        error: 'font-medium text-rose-600 text-xs dark:text-rose-400'
     },
     button: {
-        primary: `inline-flex items-center justify-center gap-1.5 bg-sky-600 px-3.5 font-medium text-white transition-colors hover:bg-sky-700 disabled:opacity-50 dark:bg-sky-500 dark:hover:bg-sky-400 dark:text-slate-950 ${CONTROL}`,
-        secondary: `inline-flex items-center justify-center gap-1.5 border border-slate-300 bg-white px-3.5 font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800 ${CONTROL}`,
-        ghost: `inline-flex items-center justify-center gap-1.5 px-2.5 font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 disabled:opacity-50 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100 ${CONTROL}`,
-        danger: `inline-flex items-center justify-center gap-1.5 bg-rose-600 px-3.5 font-medium text-white transition-colors hover:bg-rose-700 disabled:opacity-50 dark:bg-rose-600 dark:hover:bg-rose-500 ${CONTROL}`
+        primary: `inline-flex items-center justify-center gap-1.5 rounded-lg bg-sky-600 px-4 font-semibold text-white shadow-sky-200 shadow-sm transition-all hover:bg-sky-700 hover:shadow disabled:opacity-50 disabled:shadow-none dark:bg-sky-500 dark:text-slate-950 dark:shadow-none dark:hover:bg-sky-400 ${CONTROL}`,
+        secondary: `inline-flex items-center justify-center gap-1.5 rounded-lg border border-slate-300 bg-white px-4 font-semibold text-slate-700 transition-colors hover:border-slate-400 hover:bg-slate-50 disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800 ${CONTROL}`,
+        ghost: `inline-flex items-center justify-center gap-1.5 rounded-lg px-3 font-semibold text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 disabled:opacity-50 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100 ${CONTROL}`,
+        danger: `inline-flex items-center justify-center gap-1.5 rounded-lg bg-rose-600 px-4 font-semibold text-white shadow-rose-200 shadow-sm transition-all hover:bg-rose-700 disabled:opacity-50 dark:bg-rose-600 dark:shadow-none dark:hover:bg-rose-500 ${CONTROL}`
     },
     badge: {
-        base: 'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-medium text-xs',
-        neutral: 'border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300',
+        base: 'inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 font-semibold text-[11px]',
+        neutral: 'border-slate-200 bg-slate-100 text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300',
         success: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-400',
         warning: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-400',
         danger: 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-400',
         info: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-400'
     },
+    // The counts are the point of the preview, so they are the largest type on
+    // the screen — before this they were the same size as the labels beneath them.
     stat: {
-        grid: 'grid grid-cols-2 gap-2 xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-6',
-        cell: 'flex flex-col items-center gap-0.5 rounded-lg border border-slate-200 bg-white px-2 py-3 text-center dark:border-slate-800 dark:bg-slate-900',
-        value: 'font-semibold text-lg tabular-nums',
-        label: 'text-[11px] text-slate-500 leading-tight dark:text-slate-400'
+        grid: 'grid grid-cols-2 gap-2.5 xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-6',
+        cell: 'flex flex-col items-center gap-1 rounded-xl border border-slate-200/80 bg-white px-2 py-3.5 text-center shadow-slate-200/40 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:shadow-none',
+        value: 'font-bold text-2xl tabular-nums tracking-tight',
+        label: `${LABEL} text-slate-500 leading-tight dark:text-slate-400`
     },
     notice: {
-        info: 'rounded-lg border border-sky-200 bg-sky-50 p-3 dark:border-sky-900 dark:bg-sky-950',
-        warning: 'rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950',
-        danger: 'rounded-lg border border-rose-200 bg-rose-50 p-3 dark:border-rose-900 dark:bg-rose-950',
-        title: 'font-medium text-sm',
-        body: 'mt-0.5 text-sm leading-relaxed opacity-90'
+        info: 'rounded-xl border border-sky-200 bg-sky-50 p-3.5 text-sky-900 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-100',
+        warning: 'rounded-xl border border-amber-200 bg-amber-50 p-3.5 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100',
+        danger: 'rounded-xl border border-rose-200 bg-rose-50 p-3.5 text-rose-900 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-100',
+        title: 'font-semibold text-sm',
+        body: 'mt-1 text-sm leading-relaxed opacity-90'
     },
-    code: 'block overflow-x-auto rounded-lg border border-slate-200 bg-slate-50 p-3 font-mono text-[11px] text-slate-700 leading-relaxed sm:text-xs dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300',
+    code: 'block max-h-80 overflow-auto rounded-xl border border-slate-200 bg-slate-50 p-3.5 font-mono text-[11px] text-slate-700 leading-relaxed sm:text-xs dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300',
     skeleton: {
-        line: 'h-3 animate-pulse rounded bg-slate-200 dark:bg-slate-800',
-        block: 'animate-pulse rounded-lg bg-slate-200 dark:bg-slate-800'
+        line: 'h-3 animate-pulse rounded-full bg-slate-200 dark:bg-slate-800',
+        block: 'animate-pulse rounded-xl bg-slate-200 dark:bg-slate-800'
     },
     progress: {
-        track: 'h-1.5 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800',
+        track: 'h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-800',
         bar: 'h-full rounded-full bg-sky-600 transition-[width] duration-300 ease-out dark:bg-sky-500',
-        label: 'text-slate-600 text-xs tabular-nums dark:text-slate-400'
+        label: 'font-medium text-slate-600 text-xs tabular-nums dark:text-slate-400'
     }
 };
 /**

package/package.json

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