@pallasoft/ps-core-components 2.35.0 → 2.35.2

package/README.md

@@ -8,3 +8,16 @@ Shared Pallasoft core components package.
 - `npm run lint` runs ESLint using the shared package baseline.
 - `npm run format:check` checks Prettier formatting.
 - `npm run release` publishes through semantic-release.
+
+## Optimistic saves
+
+Apps use `usePsOptimisticSave` for row lists and `usePsOptimisticFetcher` for custom submissions
+(batches go through `merge`). `usePsChangeQueue` is internal plumbing; do not use it in apps.
+
+A change shows at once, is sent in order, and either confirms or rolls back. A change counts as
+failed when the server refuses it (`isSuccess` is false), when no new response arrives (network
+failure or a thrown action), when the request takes longer than
+`PsOptimisticConfig.submitTimeoutMs`, or when the component unmounts mid-request. Rows then roll
+back, including changes queued behind the failed one. Pass the optional `onError` to tell the user:
+`onError({ changes, data, reason })`, where `reason` is `rejected`, `no-response`, `timeout`,
+`unmounted` or `error`.

package/dist/components/ps-action-tile.js

@@ -9,5 +9,5 @@ const variantClassNames = {
     default: 'ps-action-tile',
     primary: 'ps-action-tile ps-action-tile-primary',
 };
-const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-16 w-full rounded-ps-card', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
+const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-16', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Card })) : ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'min-w-0', children: [(0, jsx_runtime_1.jsx)("span", { className: 'block break-words', children: label }), description ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
 exports.PsActionTile = PsActionTile;

package/dist/components/ps-badge.js

@@ -12,5 +12,5 @@ const toneClassNames = {
     success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
     warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
 };
-const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-7 w-20', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
+const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: className, shape: ps_skeleton_shape_1.PsSkeletonShape.Badge })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
 exports.PsBadge = PsBadge;

package/dist/components/ps-card-block-skeleton.js

@@ -4,5 +4,5 @@ exports.PsCardBlockSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsCardBlockSkeleton = ({ height }) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: height, radius: '1.25rem', shape: ps_skeleton_shape_1.PsSkeletonShape.Block, width: '100%' }));
+const PsCardBlockSkeleton = ({ height }) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: height, shape: ps_skeleton_shape_1.PsSkeletonShape.Card }));
 exports.PsCardBlockSkeleton = PsCardBlockSkeleton;

package/dist/components/ps-card.js

@@ -17,5 +17,5 @@ const variantClassNames = {
     glass: 'ps-glass',
     muted: 'ps-card-muted',
 };
-const PsCard = ({ children, className, density = 'normal', eyebrow, isLoading = false, title, trailing, variant = 'default', }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3 rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), label: title === undefined ? 'Loading' : title, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-32' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-20 w-full', shape: ps_skeleton_shape_1.PsSkeletonShape.Block })] })) : ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
+const PsCard = ({ children, className, density = 'normal', eyebrow, isLoading = false, title, trailing, variant = 'default', }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3 rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), label: title === undefined ? 'Loading' : title, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-32' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Control, className: 'h-20' })] })) : ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? ((0, jsx_runtime_1.jsxs)("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0', children: [eyebrow ? (0, jsx_runtime_1.jsx)("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, (0, jsx_runtime_1.jsx)("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? (0, jsx_runtime_1.jsx)("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
 exports.PsCard = PsCard;

package/dist/components/ps-form-fields-skeleton.js

@@ -6,5 +6,5 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_page_skeleton_config_1 = require("../constants/ps-page-skeleton-config");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsFormFieldsSkeleton = ({ columnsClassName = ps_page_skeleton_config_1.PsPageSkeletonConfig.formColumnsClassName, fields = ps_page_skeleton_config_1.PsPageSkeletonConfig.formFields, }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_page_skeleton_config_1.PsPageSkeletonConfig.formLabelClassName }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-ps-control w-full', shape: ps_skeleton_shape_1.PsSkeletonShape.Block })] }, field))) }));
+const PsFormFieldsSkeleton = ({ columnsClassName = ps_page_skeleton_config_1.PsPageSkeletonConfig.formColumnsClassName, fields = ps_page_skeleton_config_1.PsPageSkeletonConfig.formFields, }) => ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col gap-2', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_page_skeleton_config_1.PsPageSkeletonConfig.formLabelClassName }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Control })] }, field))) }));
 exports.PsFormFieldsSkeleton = PsFormFieldsSkeleton;

package/dist/components/ps-intro-skeleton.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsIntroSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsIntroSkeleton = () => ((0, jsx_runtime_1.jsxs)("div", { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: '0.875rem', radius: '999px', width: '6rem' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: '2.5rem', radius: '0.75rem', width: '70%' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: '1.125rem', radius: '0.5rem', width: '85%' })] }));
+const PsIntroSkeleton = () => ((0, jsx_runtime_1.jsxs)("div", { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3.5 w-24' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-10 w-[70%]' }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-[1.125rem] w-[85%]' })] }));
 exports.PsIntroSkeleton = PsIntroSkeleton;

package/dist/components/ps-page-skeleton.js

@@ -8,5 +8,5 @@ const ps_page_layout_1 = require("./ps-page-layout");
 const ps_page_stack_1 = require("./ps-page-stack");
 const ps_section_header_1 = require("./ps-section-header");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, children: (0, jsx_runtime_1.jsxs)(ps_page_stack_1.PsPageStack, { children: [title === undefined ? ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : ((0, jsx_runtime_1.jsx)(ps_page_header_1.PsPageHeader, { actions: hasActions ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: '2.5rem', radius: '9999px', shape: ps_skeleton_shape_1.PsSkeletonShape.Block, width: '9rem' })) : undefined, title: title })), children] }) }));
+const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => ((0, jsx_runtime_1.jsx)(ps_page_layout_1.PsPageLayout, { isNarrow: isNarrow, children: (0, jsx_runtime_1.jsxs)(ps_page_stack_1.PsPageStack, { children: [title === undefined ? ((0, jsx_runtime_1.jsx)(ps_section_header_1.PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : ((0, jsx_runtime_1.jsx)(ps_page_header_1.PsPageHeader, { actions: hasActions ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : undefined, title: title })), children] }) }));
 exports.PsPageSkeleton = PsPageSkeleton;

package/dist/components/ps-pill.js

@@ -12,5 +12,5 @@ const toneClassNames = {
     success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
     warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
 };
-const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge('h-8 w-24', className), shape: ps_skeleton_shape_1.PsSkeletonShape.Block })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-ps-control px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: (0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 break-words', children: children }) }));
+const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: className, shape: ps_skeleton_shape_1.PsSkeletonShape.Pill })) : ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-ps-control px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: (0, jsx_runtime_1.jsx)("span", { className: 'min-w-0 break-words', children: children }) }));
 exports.PsPill = PsPill;

package/dist/components/ps-reflective-app-shell.js

@@ -12,6 +12,6 @@ const PsReflectiveAppShell = ({ children, className, contentClassName, frameClas
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: (0, jsx_runtime_1.jsx)("div", { className: 'py-5', children: children }) })] })] }) }));
 };
 exports.PsReflectiveAppShell = PsReflectiveAppShell;

package/dist/components/ps-section-header.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-ps-control w-32', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-2.5 w-24' }) : null, (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-6 w-52' }), description ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { shape: ps_skeleton_shape_1.PsSkeletonShape.Button }) : null] })) : ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? ((0, jsx_runtime_1.jsx)("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, (0, jsx_runtime_1.jsx)("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? ((0, jsx_runtime_1.jsx)("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? ((0, jsx_runtime_1.jsx)("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
 exports.PsSectionHeader = PsSectionHeader;

package/dist/components/ps-skeleton-media.js

@@ -6,5 +6,5 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
 const ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSkeletonMedia = ({ aspect = '16 / 9', className, hasCaption = true, label, }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('w-full', className), label: label, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { aspect: aspect, radius: 'var(--ps-radius-card, 1rem)', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }), hasCaption ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { lines: 2, shape: ps_skeleton_shape_1.PsSkeletonShape.Text }) : null] }));
+const PsSkeletonMedia = ({ aspect = '16 / 9', className, hasCaption = true, label, }) => ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('w-full', className), label: label, children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { aspect: aspect, shape: ps_skeleton_shape_1.PsSkeletonShape.Card }), hasCaption ? (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { lines: 2, shape: ps_skeleton_shape_1.PsSkeletonShape.Text }) : null] }));
 exports.PsSkeletonMedia = PsSkeletonMedia;

package/dist/components/ps-skeleton-table.js

@@ -15,8 +15,8 @@ const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false
     const cell = (rowIndex, columnIndex, isStrong) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_design_system_1.PallasoftClassNameService.merge(isRight(columnIndex)
             ? 'ml-auto w-16'
             : ps_skeleton_config_1.PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length], isStrong ? 'h-3.5' : '') }, columnIndex));
-    return ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'max-w-sm', shape: ps_skeleton_shape_1.PsSkeletonShape.Block }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: ps_skeleton_shape_1.PsSkeletonShape.Block })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: isFramed
-                    ? 'overflow-hidden rounded-[1.25rem] border border-line bg-surface'
+    return ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'max-w-sm', shape: ps_skeleton_shape_1.PsSkeletonShape.Control }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: ps_skeleton_shape_1.PsSkeletonShape.Button })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: isFramed
+                    ? ps_design_system_1.PallasoftClassNameService.merge('overflow-hidden border border-line bg-surface', ps_skeleton_config_1.PsSkeletonConfig.tableFrameClassName)
                     : 'overflow-hidden', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rowIndex, columnIndex, false)) }, rowIndex))), hasFooter ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rows, columnIndex, true)) })) : null] })] }));
 };
 exports.PsSkeletonTable = PsSkeletonTable;

package/dist/components/ps-tab-row-skeleton.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTabRowSkeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
 const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
 const ps_skeleton_1 = require("./ps-skeleton");
-const PsTabRowSkeleton = () => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { height: '2.75rem', radius: '9999px', shape: ps_skeleton_shape_1.PsSkeletonShape.Block, width: '100%' }));
+const ps_skeleton_group_1 = require("./ps-skeleton-group");
+const PsTabRowSkeleton = () => ((0, jsx_runtime_1.jsx)(ps_skeleton_group_1.PsSkeletonGroup, { direction: 'row', gap: 'gap-2', children: Array.from({ length: ps_skeleton_config_1.PsSkeletonConfig.tabCount }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: `${ps_skeleton_config_1.PsSkeletonConfig.compactControlHeightClassName} ${ps_skeleton_config_1.PsSkeletonConfig.tabWidthClassName}`, shape: ps_skeleton_shape_1.PsSkeletonShape.Control }, index))) }));
 exports.PsTabRowSkeleton = PsTabRowSkeleton;

package/dist/constants/ps-optimistic-config.d.ts

@@ -1,3 +1,4 @@
 export declare const PsOptimisticConfig: {
     readonly pendingPrefix: "pending-";
+    readonly submitTimeoutMs: 30000;
 };

package/dist/constants/ps-optimistic-config.js

@@ -3,4 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsOptimisticConfig = void 0;
 exports.PsOptimisticConfig = {
     pendingPrefix: 'pending-',
+    submitTimeoutMs: 30000,
 };

package/dist/constants/ps-skeleton-config.d.ts

@@ -10,6 +10,10 @@ export declare const PsSkeletonConfig: {
     readonly importantPrefix: "!";
     readonly widthUtilityPattern: RegExp;
     readonly heightUtilityPattern: RegExp;
+    readonly compactControlHeightClassName: "h-ps-control-compact";
+    readonly tabWidthClassName: "w-24";
+    readonly tabCount: 4;
+    readonly tableFrameClassName: "rounded-[0.875rem]";
     readonly shapeClassNames: Record<PsSkeletonShape, string>;
     readonly shapeSizes: Record<PsSkeletonShape, PsSkeletonSize>;
 };

package/dist/constants/ps-skeleton-config.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSkeletonConfig = void 0;
 const ps_skeleton_shape_1 = require("./ps-skeleton-shape");
+const controlRadius = 'rounded-ps-control';
+const cardRadius = 'rounded-ps-card';
+const textRadius = 'rounded-full';
+const controlSize = { height: 'h-ps-control', width: 'w-full' };
 exports.PsSkeletonConfig = {
     defaultTextLines: 3,
     lastLineWidth: 'w-2/3',
@@ -12,16 +16,30 @@ exports.PsSkeletonConfig = {
     importantPrefix: '!',
     widthUtilityPattern: /^(w|size)-/,
     heightUtilityPattern: /^(h|size)-/,
+    compactControlHeightClassName: 'h-ps-control-compact',
+    tabWidthClassName: 'w-24',
+    tabCount: 4,
+    tableFrameClassName: 'rounded-[0.875rem]',
     shapeClassNames: {
-        [ps_skeleton_shape_1.PsSkeletonShape.Block]: 'rounded-ps-control',
+        [ps_skeleton_shape_1.PsSkeletonShape.Badge]: controlRadius,
+        [ps_skeleton_shape_1.PsSkeletonShape.Block]: controlRadius,
+        [ps_skeleton_shape_1.PsSkeletonShape.Button]: controlRadius,
+        [ps_skeleton_shape_1.PsSkeletonShape.Card]: cardRadius,
         [ps_skeleton_shape_1.PsSkeletonShape.Circle]: 'shrink-0 rounded-full',
-        [ps_skeleton_shape_1.PsSkeletonShape.Line]: 'rounded-full',
-        [ps_skeleton_shape_1.PsSkeletonShape.Text]: 'rounded-full',
+        [ps_skeleton_shape_1.PsSkeletonShape.Control]: controlRadius,
+        [ps_skeleton_shape_1.PsSkeletonShape.Line]: textRadius,
+        [ps_skeleton_shape_1.PsSkeletonShape.Pill]: controlRadius,
+        [ps_skeleton_shape_1.PsSkeletonShape.Text]: textRadius,
     },
     shapeSizes: {
-        [ps_skeleton_shape_1.PsSkeletonShape.Block]: { height: 'h-ps-control', width: 'w-full' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Badge]: { height: 'h-7', width: 'w-20' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Block]: controlSize,
+        [ps_skeleton_shape_1.PsSkeletonShape.Button]: { height: 'h-ps-control', width: 'w-32' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Card]: { height: 'h-20', width: 'w-full' },
         [ps_skeleton_shape_1.PsSkeletonShape.Circle]: { height: 'h-9', width: 'w-9' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Control]: controlSize,
         [ps_skeleton_shape_1.PsSkeletonShape.Line]: { height: 'h-3', width: 'w-full' },
+        [ps_skeleton_shape_1.PsSkeletonShape.Pill]: { height: 'h-8', width: 'w-24' },
         [ps_skeleton_shape_1.PsSkeletonShape.Text]: { height: 'h-3', width: 'w-full' },
     },
 };

package/dist/constants/ps-skeleton-shape.d.ts

@@ -1,6 +1,11 @@
 export declare enum PsSkeletonShape {
+    Badge = "badge",
     Block = "block",
+    Button = "button",
+    Card = "card",
     Circle = "circle",
+    Control = "control",
     Line = "line",
+    Pill = "pill",
     Text = "text"
 }

package/dist/constants/ps-skeleton-shape.js

@@ -3,8 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsSkeletonShape = void 0;
 var PsSkeletonShape;
 (function (PsSkeletonShape) {
+    PsSkeletonShape["Badge"] = "badge";
     PsSkeletonShape["Block"] = "block";
+    PsSkeletonShape["Button"] = "button";
+    PsSkeletonShape["Card"] = "card";
     PsSkeletonShape["Circle"] = "circle";
+    PsSkeletonShape["Control"] = "control";
     PsSkeletonShape["Line"] = "line";
+    PsSkeletonShape["Pill"] = "pill";
     PsSkeletonShape["Text"] = "text";
 })(PsSkeletonShape || (exports.PsSkeletonShape = PsSkeletonShape = {}));

package/dist/esm/components/ps-action-tile.js

@@ -6,4 +6,4 @@ const variantClassNames = {
     default: 'ps-action-tile',
     primary: 'ps-action-tile ps-action-tile-primary',
 };
-export const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-16 w-full rounded-ps-card', className), shape: PsSkeletonShape.Block })) : (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [_jsxs("span", { className: 'min-w-0', children: [_jsx("span", { className: 'block break-words', children: label }), description ? (_jsx("span", { className: PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? (_jsx("span", { className: PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));
+export const PsActionTile = ({ className, description, icon, isLoading = false, label, type = 'button', variant = 'default', ...props }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-16', className), shape: PsSkeletonShape.Card })) : (_jsxs("button", { className: PallasoftClassNameService.merge('ps-focus-ring w-full', variantClassNames[variant], className), type: type, ...props, children: [_jsxs("span", { className: 'min-w-0', children: [_jsx("span", { className: 'block break-words', children: label }), description ? (_jsx("span", { className: PallasoftClassNameService.merge('mt-0.5 block text-xs font-medium leading-5', variant === 'primary' ? 'text-white/75' : 'text-ink/50'), children: description })) : null] }), icon ? (_jsx("span", { className: PallasoftClassNameService.merge('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', variant === 'primary' ? 'bg-white/15 text-white' : 'ps-icon-surface'), children: icon })) : null] }));

package/dist/esm/components/ps-badge.js

@@ -9,4 +9,4 @@ const toneClassNames = {
     success: 'bg-success-soft text-emerald-700 dark:bg-emerald-400/18 dark:text-emerald-50',
     warning: 'bg-warning-soft text-amber-800 dark:bg-amber-400/18 dark:text-amber-50',
 };
-export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-7 w-20', className), shape: PsSkeletonShape.Block })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));
+export const PsBadge = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: className, shape: PsSkeletonShape.Badge })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-7 w-fit items-center justify-center whitespace-nowrap rounded-ps-control px-3 py-0.5 text-center text-xs font-semibold capitalize', toneClassNames[tone], className), children: children }));

package/dist/esm/components/ps-card-block-skeleton.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsCardBlockSkeleton = ({ height }) => (_jsx(PsSkeleton, { height: height, radius: '1.25rem', shape: PsSkeletonShape.Block, width: '100%' }));
+export const PsCardBlockSkeleton = ({ height }) => (_jsx(PsSkeleton, { height: height, shape: PsSkeletonShape.Card }));

package/dist/esm/components/ps-card.js

@@ -14,4 +14,4 @@ const variantClassNames = {
     glass: 'ps-glass',
     muted: 'ps-card-muted',
 };
-export const PsCard = ({ children, className, density = 'normal', eyebrow, isLoading = false, title, trailing, variant = 'default', }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3 rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), label: title === undefined ? 'Loading' : title, children: [_jsx(PsSkeleton, { className: 'h-3 w-32' }), _jsx(PsSkeleton, { className: 'h-20 w-full', shape: PsSkeletonShape.Block })] })) : (_jsxs("section", { className: PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? (_jsxs("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [_jsxs("div", { className: 'min-w-0', children: [eyebrow ? _jsx("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, _jsx("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? _jsx("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));
+export const PsCard = ({ children, className, density = 'normal', eyebrow, isLoading = false, title, trailing, variant = 'default', }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3 rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), label: title === undefined ? 'Loading' : title, children: [_jsx(PsSkeleton, { className: 'h-3 w-32' }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Control, className: 'h-20' })] })) : (_jsxs("section", { className: PallasoftClassNameService.merge('min-w-0 overflow-hidden rounded-ps-card', variantClassNames[variant], densityClassNames[density], className), children: [title ? (_jsxs("div", { className: 'mb-3 flex min-w-0 items-start justify-between gap-3', children: [_jsxs("div", { className: 'min-w-0', children: [eyebrow ? _jsx("p", { className: 'ps-eyebrow break-words', children: eyebrow }) : null, _jsx("h2", { className: 'mt-1 break-words text-base font-bold text-ink', children: title })] }), trailing ? _jsx("div", { className: 'shrink-0', children: trailing }) : null] })) : null, children] }));

package/dist/esm/components/ps-form-fields-skeleton.js

@@ -3,4 +3,4 @@ import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config.js';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsFormFieldsSkeleton = ({ columnsClassName = PsPageSkeletonConfig.formColumnsClassName, fields = PsPageSkeletonConfig.formFields, }) => (_jsx("div", { className: PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsSkeleton, { className: PsPageSkeletonConfig.formLabelClassName }), _jsx(PsSkeleton, { className: 'h-ps-control w-full', shape: PsSkeletonShape.Block })] }, field))) }));
+export const PsFormFieldsSkeleton = ({ columnsClassName = PsPageSkeletonConfig.formColumnsClassName, fields = PsPageSkeletonConfig.formFields, }) => (_jsx("div", { className: PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsSkeleton, { className: PsPageSkeletonConfig.formLabelClassName }), _jsx(PsSkeleton, { shape: PsSkeletonShape.Control })] }, field))) }));

package/dist/esm/components/ps-intro-skeleton.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsIntroSkeleton = () => (_jsxs("div", { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4', children: [_jsx(PsSkeleton, { height: '0.875rem', radius: '999px', width: '6rem' }), _jsx(PsSkeleton, { height: '2.5rem', radius: '0.75rem', width: '70%' }), _jsx(PsSkeleton, { height: '1.125rem', radius: '0.5rem', width: '85%' })] }));
+export const PsIntroSkeleton = () => (_jsxs("div", { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4', children: [_jsx(PsSkeleton, { className: 'h-3.5 w-24' }), _jsx(PsSkeleton, { className: 'h-10 w-[70%]' }), _jsx(PsSkeleton, { className: 'h-[1.125rem] w-[85%]' })] }));

package/dist/esm/components/ps-page-skeleton.js

@@ -5,4 +5,4 @@ import { PsPageLayout } from './ps-page-layout.js';
 import { PsPageStack } from './ps-page-stack.js';
 import { PsSectionHeader } from './ps-section-header.js';
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: hasActions ? (_jsx(PsSkeleton, { height: '2.5rem', radius: '9999px', shape: PsSkeletonShape.Block, width: '9rem' })) : undefined, title: title })), children] }) }));
+export const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: hasActions ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : undefined, title: title })), children] }) }));

package/dist/esm/components/ps-pill.js

@@ -9,4 +9,4 @@ const toneClassNames = {
     success: 'bg-emerald-50 text-emerald-700 ring-emerald-100 dark:bg-emerald-400/18 dark:text-emerald-50 dark:ring-emerald-200/22',
     warning: 'bg-amber-50 text-amber-800 ring-amber-100 dark:bg-amber-400/18 dark:text-amber-50 dark:ring-amber-200/24',
 };
-export const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge('h-8 w-24', className), shape: PsSkeletonShape.Block })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-ps-control px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: _jsx("span", { className: 'min-w-0 break-words', children: children }) }));
+export const PsPill = ({ children, className, isLoading = false, tone = 'neutral', }) => isLoading ? (_jsx(PsSkeleton, { className: className, shape: PsSkeletonShape.Pill })) : (_jsx("span", { className: PallasoftClassNameService.merge('inline-flex min-h-8 min-w-[5.5rem] max-w-full items-center justify-center rounded-ps-control px-5 py-1 text-center text-[0.72rem] font-black capitalize tracking-[0.01em] ring-1 ring-inset', toneClassNames[tone], className), children: _jsx("span", { className: 'min-w-0 break-words', children: children }) }));

package/dist/esm/components/ps-reflective-app-shell.js

@@ -9,5 +9,5 @@ export const PsReflectiveAppShell = ({ children, className, contentClassName, fr
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: _jsx("div", { className: 'py-5', children: children }) })] })] }) }));
 };

package/dist/esm/components/ps-section-header.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { className: 'h-ps-control w-32', shape: PsSkeletonShape.Block }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));
+export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { shape: PsSkeletonShape.Button }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));

package/dist/esm/components/ps-skeleton-media.js

@@ -3,4 +3,4 @@ import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSkeletonMedia = ({ aspect = '16 / 9', className, hasCaption = true, label, }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('w-full', className), label: label, children: [_jsx(PsSkeleton, { aspect: aspect, radius: 'var(--ps-radius-card, 1rem)', shape: PsSkeletonShape.Block }), hasCaption ? _jsx(PsSkeleton, { lines: 2, shape: PsSkeletonShape.Text }) : null] }));
+export const PsSkeletonMedia = ({ aspect = '16 / 9', className, hasCaption = true, label, }) => (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('w-full', className), label: label, children: [_jsx(PsSkeleton, { aspect: aspect, shape: PsSkeletonShape.Card }), hasCaption ? _jsx(PsSkeleton, { lines: 2, shape: PsSkeletonShape.Text }) : null] }));

package/dist/esm/components/ps-skeleton-table.js

@@ -12,7 +12,7 @@ export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter
     const cell = (rowIndex, columnIndex, isStrong) => (_jsx(PsSkeleton, { className: PallasoftClassNameService.merge(isRight(columnIndex)
             ? 'ml-auto w-16'
             : PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % PsSkeletonConfig.lineWidths.length], isStrong ? 'h-3.5' : '') }, columnIndex));
-    return (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? (_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx(PsSkeleton, { className: 'max-w-sm', shape: PsSkeletonShape.Block }), _jsx(PsSkeleton, { className: 'ml-auto w-24', shape: PsSkeletonShape.Block })] })) : null, _jsxs("div", { className: isFramed
-                    ? 'overflow-hidden rounded-[1.25rem] border border-line bg-surface'
+    return (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? (_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx(PsSkeleton, { className: 'max-w-sm', shape: PsSkeletonShape.Control }), _jsx(PsSkeleton, { className: 'ml-auto w-24', shape: PsSkeletonShape.Button })] })) : null, _jsxs("div", { className: isFramed
+                    ? PallasoftClassNameService.merge('overflow-hidden border border-line bg-surface', PsSkeletonConfig.tableFrameClassName)
                     : 'overflow-hidden', children: [_jsx("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => (_jsx(PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), Array.from({ length: rows }, (_, rowIndex) => (_jsx("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rowIndex, columnIndex, false)) }, rowIndex))), hasFooter ? (_jsx("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(rows, columnIndex, true)) })) : null] })] }));
 };

package/dist/esm/components/ps-tab-row-skeleton.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { PsSkeletonConfig } from '../constants/ps-skeleton-config.js';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
-export const PsTabRowSkeleton = () => (_jsx(PsSkeleton, { height: '2.75rem', radius: '9999px', shape: PsSkeletonShape.Block, width: '100%' }));
+import { PsSkeletonGroup } from './ps-skeleton-group.js';
+export const PsTabRowSkeleton = () => (_jsx(PsSkeletonGroup, { direction: 'row', gap: 'gap-2', children: Array.from({ length: PsSkeletonConfig.tabCount }, (_, index) => (_jsx(PsSkeleton, { className: `${PsSkeletonConfig.compactControlHeightClassName} ${PsSkeletonConfig.tabWidthClassName}`, shape: PsSkeletonShape.Control }, index))) }));

package/dist/esm/constants/ps-optimistic-config.js

@@ -1,3 +1,4 @@
 export const PsOptimisticConfig = {
     pendingPrefix: 'pending-',
+    submitTimeoutMs: 30000,
 };

package/dist/esm/constants/ps-skeleton-config.js

@@ -1,4 +1,8 @@
 import { PsSkeletonShape } from './ps-skeleton-shape.js';
+const controlRadius = 'rounded-ps-control';
+const cardRadius = 'rounded-ps-card';
+const textRadius = 'rounded-full';
+const controlSize = { height: 'h-ps-control', width: 'w-full' };
 export const PsSkeletonConfig = {
     defaultTextLines: 3,
     lastLineWidth: 'w-2/3',
@@ -9,16 +13,30 @@ export const PsSkeletonConfig = {
     importantPrefix: '!',
     widthUtilityPattern: /^(w|size)-/,
     heightUtilityPattern: /^(h|size)-/,
+    compactControlHeightClassName: 'h-ps-control-compact',
+    tabWidthClassName: 'w-24',
+    tabCount: 4,
+    tableFrameClassName: 'rounded-[0.875rem]',
     shapeClassNames: {
-        [PsSkeletonShape.Block]: 'rounded-ps-control',
+        [PsSkeletonShape.Badge]: controlRadius,
+        [PsSkeletonShape.Block]: controlRadius,
+        [PsSkeletonShape.Button]: controlRadius,
+        [PsSkeletonShape.Card]: cardRadius,
         [PsSkeletonShape.Circle]: 'shrink-0 rounded-full',
-        [PsSkeletonShape.Line]: 'rounded-full',
-        [PsSkeletonShape.Text]: 'rounded-full',
+        [PsSkeletonShape.Control]: controlRadius,
+        [PsSkeletonShape.Line]: textRadius,
+        [PsSkeletonShape.Pill]: controlRadius,
+        [PsSkeletonShape.Text]: textRadius,
     },
     shapeSizes: {
-        [PsSkeletonShape.Block]: { height: 'h-ps-control', width: 'w-full' },
+        [PsSkeletonShape.Badge]: { height: 'h-7', width: 'w-20' },
+        [PsSkeletonShape.Block]: controlSize,
+        [PsSkeletonShape.Button]: { height: 'h-ps-control', width: 'w-32' },
+        [PsSkeletonShape.Card]: { height: 'h-20', width: 'w-full' },
         [PsSkeletonShape.Circle]: { height: 'h-9', width: 'w-9' },
+        [PsSkeletonShape.Control]: controlSize,
         [PsSkeletonShape.Line]: { height: 'h-3', width: 'w-full' },
+        [PsSkeletonShape.Pill]: { height: 'h-8', width: 'w-24' },
         [PsSkeletonShape.Text]: { height: 'h-3', width: 'w-full' },
     },
 };

package/dist/esm/constants/ps-skeleton-shape.js

@@ -1,7 +1,12 @@
 export var PsSkeletonShape;
 (function (PsSkeletonShape) {
+    PsSkeletonShape["Badge"] = "badge";
     PsSkeletonShape["Block"] = "block";
+    PsSkeletonShape["Button"] = "button";
+    PsSkeletonShape["Card"] = "card";
     PsSkeletonShape["Circle"] = "circle";
+    PsSkeletonShape["Control"] = "control";
     PsSkeletonShape["Line"] = "line";
+    PsSkeletonShape["Pill"] = "pill";
     PsSkeletonShape["Text"] = "text";
 })(PsSkeletonShape || (PsSkeletonShape = {}));

package/dist/esm/hooks/use-ps-change-queue.js

@@ -14,10 +14,15 @@ export const usePsChangeQueue = ({ onDrained, onFailed, send, }) => {
         while (pending.current.length > 0) {
             const batch = pending.current;
             pending.current = [];
-            await latest.current.send(batch).catch(() => {
+            await new Promise((resolve) => resolve(latest.current.send(batch))).catch(() => {
                 const dropped = pending.current;
                 pending.current = [];
-                latest.current.onFailed(batch, dropped);
+                try {
+                    latest.current.onFailed(batch, dropped);
+                }
+                catch {
+                    return;
+                }
             });
         }
         isRunning.current = false;

package/dist/esm/hooks/use-ps-optimistic-fetcher.js

@@ -1,13 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsOptimisticConfig } from '../constants/ps-optimistic-config.js';
+import { PsOptimisticFetcherService } from '../services/ps-optimistic-fetcher-service.js';
 import { usePsChangeQueue } from './use-ps-change-queue.js';
 import { usePsOptimisticRows } from './use-ps-optimistic-rows.js';
-export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, onError, revalidator, rows, }) => {
     const [isUnsettled, setIsUnsettled] = useState(false);
     const submitted = useRef(0);
     const settle = useRef(null);
     const sawBusy = useRef(false);
     const dataBefore = useRef(fetcher.data);
     const dataSeen = useRef(fetcher.data);
+    const failure = useRef(null);
     const { forgetLast, remember, rows: shown, } = usePsOptimisticRows({
         apply,
         isHolding,
@@ -27,32 +30,67 @@ export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSu
         const done = settle.current;
         settle.current = null;
         sawBusy.current = false;
-        done(fetcher.data);
+        done(PsOptimisticFetcherService.outcome(fetcher.data, dataBefore.current));
     }, [fetcher.data, fetcher.state]);
+    useEffect(() => () => {
+        if (settle.current === null)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        done({ data: undefined, reason: 'unmounted' });
+    }, []);
     const submitOne = useCallback((values) => new Promise((resolve) => {
-        settle.current = resolve;
+        const finish = (outcome) => {
+            clearTimeout(timer);
+            if (settle.current === finish)
+                settle.current = null;
+            resolve(outcome);
+        };
+        const timer = setTimeout(() => finish({ data: undefined, reason: 'timeout' }), PsOptimisticConfig.submitTimeoutMs);
+        settle.current = finish;
         sawBusy.current = false;
         dataBefore.current = dataSeen.current;
-        void fetcher.submit(values, { defaultShouldRevalidate: false, method: 'post' });
+        try {
+            void Promise.resolve(fetcher.submit(values, { defaultShouldRevalidate: false, method: 'post' })).catch(() => finish({ data: undefined, reason: 'no-response' }));
+        }
+        catch {
+            finish({ data: undefined, reason: 'no-response' });
+        }
     }), [fetcher]);
     const send = useCallback(async (queued) => {
+        failure.current = null;
         for (const submission of merge === undefined ? queued : merge(queued)) {
-            const result = await submitOne(submission);
-            if (!isSuccess(result))
-                throw result;
+            const outcome = await submitOne(submission);
+            const reason = PsOptimisticFetcherService.failureReason(outcome, isSuccess);
+            if (reason !== null) {
+                failure.current = { data: outcome.data, reason };
+                throw new Error(reason);
+            }
         }
     }, [isSuccess, merge, submitOne]);
     const revalidate = useCallback(() => {
         const through = submitted.current;
-        void Promise.resolve(revalidator.revalidate()).finally(() => {
+        const release = () => {
             if (submitted.current === through)
                 setIsUnsettled(false);
-        });
+        };
+        void new Promise((resolve) => resolve(revalidator.revalidate()))
+            .catch(() => undefined)
+            .then(release);
     }, [revalidator]);
     const forgetFailed = useCallback((failed, dropped) => {
         for (let index = 0; index < failed.length + dropped.length; index += 1)
             forgetLast();
-    }, [forgetLast]);
+        const cause = failure.current;
+        failure.current = null;
+        if (onError === undefined)
+            return;
+        if (cause === null) {
+            onError({ changes: [...failed, ...dropped], data: undefined, reason: 'error' });
+            return;
+        }
+        onError({ ...cause, changes: [...failed, ...dropped] });
+    }, [forgetLast, onError]);
     const queue = usePsChangeQueue({
         onDrained: revalidate,
         onFailed: forgetFailed,

package/dist/esm/hooks/use-ps-optimistic-save.js

@@ -1,12 +1,13 @@
 import { useCallback } from 'react';
 import { PsOptimisticSaveService } from '../services/ps-optimistic-save-service.js';
 import { usePsOptimisticFetcher } from './use-ps-optimistic-fetcher.js';
-export const usePsOptimisticSave = ({ fetcher, isSuccess, revalidator, rows, scopeId, spec, }) => {
+export const usePsOptimisticSave = ({ fetcher, isSuccess, onError, revalidator, rows, scopeId, spec, }) => {
     const apply = useCallback((base, changes) => PsOptimisticSaveService.apply(base, changes, spec), [spec]);
     const optimistic = usePsOptimisticFetcher({
         apply,
         fetcher,
         isSuccess,
+        onError,
         revalidator,
         rows,
     });

package/dist/esm/index.js

@@ -95,6 +95,8 @@ export * from './interfaces/ps-live-input.js';
 export * from './interfaces/ps-live-open-options.js';
 export * from './interfaces/ps-optimistic-fetcher-input.js';
 export * from './interfaces/ps-optimistic-fetcher-result.js';
+export * from './interfaces/ps-optimistic-failure.js';
+export * from './interfaces/ps-optimistic-failure-reason.js';
 export * from './interfaces/ps-revalidator-like.js';
 export * from './interfaces/ps-optimistic-rows-input.js';
 export * from './interfaces/ps-optimistic-rows-result.js';

package/dist/esm/interfaces/ps-optimistic-failure-reason.js

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

package/dist/esm/interfaces/ps-optimistic-failure.js

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

package/dist/esm/interfaces/ps-optimistic-outcome.js

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

package/dist/esm/services/ps-optimistic-fetcher-service.js

@@ -0,0 +1,12 @@
+export class PsOptimisticFetcherService {
+    static outcome(data, before) {
+        if (data === before)
+            return { data: undefined, reason: 'no-response' };
+        return { data, reason: 'settled' };
+    }
+    static failureReason(outcome, isSuccess) {
+        if (outcome.reason !== 'settled')
+            return outcome.reason;
+        return isSuccess(outcome.data) ? null : 'rejected';
+    }
+}

package/dist/hooks/use-ps-change-queue.js

@@ -17,10 +17,15 @@ const usePsChangeQueue = ({ onDrained, onFailed, send, }) => {
         while (pending.current.length > 0) {
             const batch = pending.current;
             pending.current = [];
-            await latest.current.send(batch).catch(() => {
+            await new Promise((resolve) => resolve(latest.current.send(batch))).catch(() => {
                 const dropped = pending.current;
                 pending.current = [];
-                latest.current.onFailed(batch, dropped);
+                try {
+                    latest.current.onFailed(batch, dropped);
+                }
+                catch {
+                    return;
+                }
             });
         }
         isRunning.current = false;

package/dist/hooks/use-ps-optimistic-fetcher.d.ts

@@ -1,3 +1,3 @@
 import type { PsOptimisticFetcherInput } from '../interfaces/ps-optimistic-fetcher-input';
 import type { PsOptimisticFetcherResult } from '../interfaces/ps-optimistic-fetcher-result';
-export declare const usePsOptimisticFetcher: <Row, Data>({ apply, fetcher, isHolding, isSuccess, merge, revalidator, rows, }: PsOptimisticFetcherInput<Row, Data>) => PsOptimisticFetcherResult<Row>;
+export declare const usePsOptimisticFetcher: <Row, Data>({ apply, fetcher, isHolding, isSuccess, merge, onError, revalidator, rows, }: PsOptimisticFetcherInput<Row, Data>) => PsOptimisticFetcherResult<Row>;

package/dist/hooks/use-ps-optimistic-fetcher.js

@@ -2,15 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsOptimisticFetcher = void 0;
 const react_1 = require("react");
+const ps_optimistic_config_1 = require("../constants/ps-optimistic-config");
+const ps_optimistic_fetcher_service_1 = require("../services/ps-optimistic-fetcher-service");
 const use_ps_change_queue_1 = require("./use-ps-change-queue");
 const use_ps_optimistic_rows_1 = require("./use-ps-optimistic-rows");
-const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, onError, revalidator, rows, }) => {
     const [isUnsettled, setIsUnsettled] = (0, react_1.useState)(false);
     const submitted = (0, react_1.useRef)(0);
     const settle = (0, react_1.useRef)(null);
     const sawBusy = (0, react_1.useRef)(false);
     const dataBefore = (0, react_1.useRef)(fetcher.data);
     const dataSeen = (0, react_1.useRef)(fetcher.data);
+    const failure = (0, react_1.useRef)(null);
     const { forgetLast, remember, rows: shown, } = (0, use_ps_optimistic_rows_1.usePsOptimisticRows)({
         apply,
         isHolding,
@@ -30,32 +33,67 @@ const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess,
         const done = settle.current;
         settle.current = null;
         sawBusy.current = false;
-        done(fetcher.data);
+        done(ps_optimistic_fetcher_service_1.PsOptimisticFetcherService.outcome(fetcher.data, dataBefore.current));
     }, [fetcher.data, fetcher.state]);
+    (0, react_1.useEffect)(() => () => {
+        if (settle.current === null)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        done({ data: undefined, reason: 'unmounted' });
+    }, []);
     const submitOne = (0, react_1.useCallback)((values) => new Promise((resolve) => {
-        settle.current = resolve;
+        const finish = (outcome) => {
+            clearTimeout(timer);
+            if (settle.current === finish)
+                settle.current = null;
+            resolve(outcome);
+        };
+        const timer = setTimeout(() => finish({ data: undefined, reason: 'timeout' }), ps_optimistic_config_1.PsOptimisticConfig.submitTimeoutMs);
+        settle.current = finish;
         sawBusy.current = false;
         dataBefore.current = dataSeen.current;
-        void fetcher.submit(values, { defaultShouldRevalidate: false, method: 'post' });
+        try {
+            void Promise.resolve(fetcher.submit(values, { defaultShouldRevalidate: false, method: 'post' })).catch(() => finish({ data: undefined, reason: 'no-response' }));
+        }
+        catch {
+            finish({ data: undefined, reason: 'no-response' });
+        }
     }), [fetcher]);
     const send = (0, react_1.useCallback)(async (queued) => {
+        failure.current = null;
         for (const submission of merge === undefined ? queued : merge(queued)) {
-            const result = await submitOne(submission);
-            if (!isSuccess(result))
-                throw result;
+            const outcome = await submitOne(submission);
+            const reason = ps_optimistic_fetcher_service_1.PsOptimisticFetcherService.failureReason(outcome, isSuccess);
+            if (reason !== null) {
+                failure.current = { data: outcome.data, reason };
+                throw new Error(reason);
+            }
         }
     }, [isSuccess, merge, submitOne]);
     const revalidate = (0, react_1.useCallback)(() => {
         const through = submitted.current;
-        void Promise.resolve(revalidator.revalidate()).finally(() => {
+        const release = () => {
             if (submitted.current === through)
                 setIsUnsettled(false);
-        });
+        };
+        void new Promise((resolve) => resolve(revalidator.revalidate()))
+            .catch(() => undefined)
+            .then(release);
     }, [revalidator]);
     const forgetFailed = (0, react_1.useCallback)((failed, dropped) => {
         for (let index = 0; index < failed.length + dropped.length; index += 1)
             forgetLast();
-    }, [forgetLast]);
+        const cause = failure.current;
+        failure.current = null;
+        if (onError === undefined)
+            return;
+        if (cause === null) {
+            onError({ changes: [...failed, ...dropped], data: undefined, reason: 'error' });
+            return;
+        }
+        onError({ ...cause, changes: [...failed, ...dropped] });
+    }, [forgetLast, onError]);
     const queue = (0, use_ps_change_queue_1.usePsChangeQueue)({
         onDrained: revalidate,
         onFailed: forgetFailed,

package/dist/hooks/use-ps-optimistic-save.d.ts

@@ -1,3 +1,3 @@
 import type { PsOptimisticSaveInput } from '../interfaces/ps-optimistic-save-input';
 import type { PsOptimisticSaveResult } from '../interfaces/ps-optimistic-save-result';
-export declare const usePsOptimisticSave: <Row, Values, Data>({ fetcher, isSuccess, revalidator, rows, scopeId, spec, }: PsOptimisticSaveInput<Row, Values, Data>) => PsOptimisticSaveResult<Row, Values>;
+export declare const usePsOptimisticSave: <Row, Values, Data>({ fetcher, isSuccess, onError, revalidator, rows, scopeId, spec, }: PsOptimisticSaveInput<Row, Values, Data>) => PsOptimisticSaveResult<Row, Values>;

package/dist/hooks/use-ps-optimistic-save.js

@@ -4,12 +4,13 @@ exports.usePsOptimisticSave = void 0;
 const react_1 = require("react");
 const ps_optimistic_save_service_1 = require("../services/ps-optimistic-save-service");
 const use_ps_optimistic_fetcher_1 = require("./use-ps-optimistic-fetcher");
-const usePsOptimisticSave = ({ fetcher, isSuccess, revalidator, rows, scopeId, spec, }) => {
+const usePsOptimisticSave = ({ fetcher, isSuccess, onError, revalidator, rows, scopeId, spec, }) => {
     const apply = (0, react_1.useCallback)((base, changes) => ps_optimistic_save_service_1.PsOptimisticSaveService.apply(base, changes, spec), [spec]);
     const optimistic = (0, use_ps_optimistic_fetcher_1.usePsOptimisticFetcher)({
         apply,
         fetcher,
         isSuccess,
+        onError,
         revalidator,
         rows,
     });

package/dist/index.d.ts

@@ -95,6 +95,8 @@ export * from './interfaces/ps-live-input';
 export * from './interfaces/ps-live-open-options';
 export * from './interfaces/ps-optimistic-fetcher-input';
 export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-optimistic-failure';
+export * from './interfaces/ps-optimistic-failure-reason';
 export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';

package/dist/index.js

@@ -111,6 +111,8 @@ __exportStar(require("./interfaces/ps-live-input"), exports);
 __exportStar(require("./interfaces/ps-live-open-options"), exports);
 __exportStar(require("./interfaces/ps-optimistic-fetcher-input"), exports);
 __exportStar(require("./interfaces/ps-optimistic-fetcher-result"), exports);
+__exportStar(require("./interfaces/ps-optimistic-failure"), exports);
+__exportStar(require("./interfaces/ps-optimistic-failure-reason"), exports);
 __exportStar(require("./interfaces/ps-revalidator-like"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-input"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-result"), exports);

package/dist/interfaces/ps-optimistic-failure-reason.d.ts

@@ -0,0 +1 @@
+export type PsOptimisticFailureReason = 'error' | 'no-response' | 'rejected' | 'timeout' | 'unmounted';

package/dist/interfaces/ps-optimistic-failure-reason.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-optimistic-failure.d.ts

@@ -0,0 +1,6 @@
+import type { PsOptimisticFailureReason } from './ps-optimistic-failure-reason';
+export interface PsOptimisticFailure<Data> {
+    changes: Record<string, string>[];
+    data: Data | undefined;
+    reason: PsOptimisticFailureReason;
+}

package/dist/interfaces/ps-optimistic-failure.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-optimistic-fetcher-input.d.ts

@@ -1,4 +1,5 @@
 import type { PsFetcherLike } from './ps-fetcher-like';
+import type { PsOptimisticFailure } from './ps-optimistic-failure';
 import type { PsRevalidatorLike } from './ps-revalidator-like';
 export interface PsOptimisticFetcherInput<Row, Data> {
     apply: (rows: Row[], changes: Record<string, string>[]) => Row[];
@@ -6,6 +7,7 @@ export interface PsOptimisticFetcherInput<Row, Data> {
     isHolding?: boolean;
     isSuccess: (data: Data | undefined) => boolean;
     merge?: (changes: Record<string, string>[]) => Record<string, string>[];
+    onError?: (failure: PsOptimisticFailure<Data>) => void;
     revalidator: PsRevalidatorLike;
     rows: Row[];
 }

package/dist/interfaces/ps-optimistic-outcome.d.ts

@@ -0,0 +1,5 @@
+import type { PsOptimisticFailureReason } from './ps-optimistic-failure-reason';
+export interface PsOptimisticOutcome<Data> {
+    data: Data | undefined;
+    reason: PsOptimisticFailureReason | 'settled';
+}

package/dist/interfaces/ps-optimistic-outcome.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/ps-optimistic-save-input.d.ts

@@ -1,9 +1,11 @@
 import type { PsFetcherLike } from './ps-fetcher-like';
+import type { PsOptimisticFailure } from './ps-optimistic-failure';
 import type { PsOptimisticSaveSpec } from './ps-optimistic-save-spec';
 import type { PsRevalidatorLike } from './ps-revalidator-like';
 export interface PsOptimisticSaveInput<Row, Values, Data> {
     fetcher: PsFetcherLike<Data>;
     isSuccess: (data: Data | undefined) => boolean;
+    onError?: (failure: PsOptimisticFailure<Data>) => void;
     revalidator: PsRevalidatorLike;
     rows: Row[];
     scopeId: string;

package/dist/services/ps-optimistic-fetcher-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsOptimisticFailureReason } from '../interfaces/ps-optimistic-failure-reason';
+import type { PsOptimisticOutcome } from '../interfaces/ps-optimistic-outcome';
+export declare class PsOptimisticFetcherService {
+    static outcome<Data>(data: Data | undefined, before: Data | undefined): PsOptimisticOutcome<Data>;
+    static failureReason<Data>(outcome: PsOptimisticOutcome<Data>, isSuccess: (data: Data | undefined) => boolean): PsOptimisticFailureReason | null;
+}

package/dist/services/ps-optimistic-fetcher-service.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOptimisticFetcherService = void 0;
+class PsOptimisticFetcherService {
+    static outcome(data, before) {
+        if (data === before)
+            return { data: undefined, reason: 'no-response' };
+        return { data, reason: 'settled' };
+    }
+    static failureReason(outcome, isSuccess) {
+        if (outcome.reason !== 'settled')
+            return outcome.reason;
+        return isSuccess(outcome.data) ? null : 'rejected';
+    }
+}
+exports.PsOptimisticFetcherService = PsOptimisticFetcherService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.35.0",
+	"version": "2.35.2",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -33,8 +33,6 @@
 	"scripts": {
 		"husky:prepare": "npx husky",
 		"build": "tsc && tsc -p tsconfig.esm.json && tsc-esm-fix --target=dist/esm --ext=.js && node -e \"require('fs').writeFileSync('dist/esm/package.json', JSON.stringify({ type: 'module' }))\"",
-		"setup:graphify": "sh scripts/graphify-setup.sh",
-		"update:graphify": "sh scripts/graphify-update.sh",
 		"lint": "npm run lint:eslint",
 		"lint:fix": "npm run lint:eslint:fix",
 		"format:check": "npx prettier --check --ignore-unknown \"src/**/*.{ts,tsx,json,md}\"",