@pallasoft/ps-core-components 2.44.2 → 2.46.0

package/dist/components/ps-data-boundary.d.ts

@@ -1,9 +1,14 @@
 import { type ElementType, type ReactNode } from 'react';
+import { PsDataBoundaryVariant } from '../constants/ps-data-boundary-variant';
 export interface PsDataBoundaryProps<Data> {
     AwaitComponent: ElementType;
-    children: (data: Data) => ReactNode;
+    children: (data: Data, isPending: boolean) => ReactNode;
+    className?: string;
     errorElement: ReactNode;
     fallback: ReactNode;
     resolve: Promise<Data>;
+    retain?: boolean;
+    retainKey?: string;
+    variant?: PsDataBoundaryVariant;
 }
-export declare const PsDataBoundary: <Data>({ AwaitComponent, children, errorElement, fallback, resolve, }: PsDataBoundaryProps<Data>) => import("react").JSX.Element;
+export declare const PsDataBoundary: <Data>({ AwaitComponent, children, className, errorElement, fallback, resolve, retain, retainKey, variant, }: PsDataBoundaryProps<Data>) => import("react").JSX.Element;

package/dist/components/ps-data-boundary.js

@@ -3,5 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDataBoundary = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const PsDataBoundary = ({ AwaitComponent, children, errorElement, fallback, resolve, }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: (0, jsx_runtime_1.jsx)(AwaitComponent, { errorElement: errorElement, resolve: resolve, children: children }) }));
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_data_boundary_config_1 = require("../constants/ps-data-boundary-config");
+const ps_data_boundary_variant_1 = require("../constants/ps-data-boundary-variant");
+const PsDataBoundary = ({ AwaitComponent, children, className, errorElement, fallback, resolve, retain = false, retainKey, variant = ps_data_boundary_variant_1.PsDataBoundaryVariant.Page, }) => {
+    const deferred = (0, react_1.useDeferredValue)({ key: retainKey, resolve });
+    const isRetaining = retain && deferred.key === retainKey;
+    const shown = isRetaining ? deferred.resolve : resolve;
+    const isPending = shown !== resolve;
+    const content = ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback, children: (0, jsx_runtime_1.jsx)(AwaitComponent, { errorElement: errorElement, resolve: shown, children: (data) => children(data, isPending) }) }));
+    if (variant === ps_data_boundary_variant_1.PsDataBoundaryVariant.Page)
+        return content;
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-busy": isPending, className: ps_design_system_1.PallasoftClassNameService.merge(ps_data_boundary_config_1.PsDataBoundaryConfig.sectionClassName, isPending ? ps_data_boundary_config_1.PsDataBoundaryConfig.pendingClassName : null, className), children: content }));
+};
 exports.PsDataBoundary = PsDataBoundary;

package/dist/components/ps-drag-overlay.js

@@ -21,9 +21,7 @@ const PsDragOverlay = ({ children, className, frames, isDropAnimated, }) => {
     const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
     const zIndex = (0, use_ps_layer_z_index_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Popover);
     (0, react_1.useEffect)(() => setIsMounted(true), []);
-    if (!isMounted)
-        return null;
-    const lift = (element) => {
+    const lift = (0, react_1.useCallback)((element) => {
         if (element === null || isReduced || typeof element.animate !== 'function')
             return;
         element.animate(frames, {
@@ -31,7 +29,9 @@ const PsDragOverlay = ({ children, className, frames, isDropAnimated, }) => {
             easing: ps_drag_config_1.PsDragConfig.liftEasing,
             fill: 'forwards',
         });
-    };
+    }, [frames, isReduced]);
+    if (!isMounted)
+        return null;
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: isReduced || isDropAnimated === false ? null : dropAnimation, zIndex: zIndex, children: children === null ? null : ((0, jsx_runtime_1.jsx)("div", { className: className, ref: lift, children: children })) }), document.body);
 };
 exports.PsDragOverlay = PsDragOverlay;

package/dist/components/ps-draggable-grid.js

@@ -9,11 +9,13 @@ const utilities_1 = require("@dnd-kit/utilities");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
 const ps_draggable_grid_1 = require("../constants/ps-draggable-grid");
 const use_ps_drag_sensors_1 = require("../hooks/use-ps-drag-sensors");
+const use_ps_drag_transition_1 = require("../hooks/use-ps-drag-transition");
 const ps_drag_grip_1 = require("./ps-drag-grip");
 const ps_drag_overlay_1 = require("./ps-drag-overlay");
 const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: ps_draggable_grid_1.PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_drag_grip_1.PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ id: item.id });
+    const dragTransition = (0, use_ps_drag_transition_1.usePsDragTransition)();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: ((0, jsx_runtime_1.jsx)(PsDraggableGridHandle, { attributes: attributes, label: item.label, listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,

package/dist/components/ps-sortable-list.js

@@ -8,13 +8,13 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
 const use_ps_drag_sensors_1 = require("../hooks/use-ps-drag-sensors");
-const use_ps_reduced_motion_1 = require("../hooks/use-ps-reduced-motion");
+const use_ps_drag_transition_1 = require("../hooks/use-ps-drag-transition");
 const ps_drag_grip_1 = require("./ps-drag-grip");
 const ps_drag_overlay_1 = require("./ps-drag-overlay");
 const PsSortableListHandle = ({ attributes, className, icon, label, listeners, setActivatorNodeRef, }) => ((0, jsx_runtime_1.jsx)("button", { ...attributes, ...listeners, "aria-label": label, className: className === undefined ? ps_drag_config_1.PsDragClasses.handle : className, ref: setActivatorNodeRef, title: label, type: 'button', children: icon === undefined ? (0, jsx_runtime_1.jsx)(ps_drag_grip_1.PsDragGrip, {}) : icon }));
 const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLabel, index, isDisabled, item, renderItem, }) => {
-    const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled, id: item.id });
+    const dragTransition = (0, use_ps_drag_transition_1.usePsDragTransition)();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled, id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: ((0, jsx_runtime_1.jsx)(PsSortableListHandle, { attributes: attributes, className: handleClassName, icon: handleIcon, label: getHandleLabel(item.label), listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,
@@ -27,7 +27,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
     return ((0, jsx_runtime_1.jsx)("div", { className: `${ps_drag_config_1.PsDragClasses.listItem} ${className} ${isDragging ? ps_drag_config_1.PsDragClasses.placeholder : ''}`, ref: setNodeRef, style: {
             opacity: isDragging ? ps_drag_config_1.PsDragConfig.placeholderOpacity : undefined,
             transform: utilities_1.CSS.Translate.toString(transform),
-            transition: isReduced ? undefined : transition,
+            transition,
         }, children: rendered }));
 };
 const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
@@ -66,7 +66,7 @@ const PsSortableList = ({ announcements: texts, className, getHandleLabel, getIt
         onMove(String(active.id), from, to);
     };
     const activeGroup = activeItem === null ? undefined : activeItem.groupKey;
-    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: isHorizontal ? sortable_1.horizontalListSortingStrategy : sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: className, role: role, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), (0, jsx_runtime_1.jsx)(ps_drag_overlay_1.PsDragOverlay, { className: ps_drag_config_1.PsDragClasses.lifted, frames: ps_drag_config_1.PsDragListLiftFrames, children: activeItem !== null
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: core_1.closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items.map((item) => item.id), strategy: isHorizontal ? sortable_1.horizontalListSortingStrategy : sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)("div", { className: className, role: role, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), (0, jsx_runtime_1.jsx)(ps_drag_overlay_1.PsDragOverlay, { className: ps_drag_config_1.PsDragClasses.lifted, frames: ps_drag_config_1.PsDragRowLiftFrames, children: activeItem !== null
                     ? renderItem({
                         handle: ((0, jsx_runtime_1.jsx)(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
                         index: activeIndex,

package/dist/constants/ps-data-boundary-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsDataBoundaryConfig: {
+    readonly pendingClassName: "opacity-60 transition-opacity";
+    readonly sectionClassName: "transition-opacity";
+};

package/dist/constants/ps-data-boundary-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDataBoundaryConfig = void 0;
+exports.PsDataBoundaryConfig = {
+    pendingClassName: 'opacity-60 transition-opacity',
+    sectionClassName: 'transition-opacity',
+};

package/dist/constants/ps-data-boundary-variant.d.ts

@@ -0,0 +1,4 @@
+export declare enum PsDataBoundaryVariant {
+    Page = "page",
+    Section = "section"
+}

package/dist/constants/ps-data-boundary-variant.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDataBoundaryVariant = void 0;
+var PsDataBoundaryVariant;
+(function (PsDataBoundaryVariant) {
+    PsDataBoundaryVariant["Page"] = "page";
+    PsDataBoundaryVariant["Section"] = "section";
+})(PsDataBoundaryVariant || (exports.PsDataBoundaryVariant = PsDataBoundaryVariant = {}));

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

@@ -5,6 +5,8 @@ export declare const PsDragConfig: {
     readonly liftDuration: 200;
     readonly liftEasing: "cubic-bezier(0.2, 0.9, 0.3, 1.2)";
     readonly placeholderOpacity: "0.4";
+    readonly sortDuration: 250;
+    readonly sortEasing: "ease";
     readonly touchDelay: 180;
     readonly touchTolerance: 6;
 };
@@ -15,4 +17,5 @@ export declare const PsDragClasses: {
     readonly placeholder: "outline-dashed outline-2 outline-offset-[-2px] outline-primary/35";
 };
 export declare const PsDragLiftFrames: Keyframe[];
+export declare const PsDragRowLiftFrames: Keyframe[];
 export declare const PsDragListLiftFrames: Keyframe[];

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PsDragListLiftFrames = exports.PsDragLiftFrames = exports.PsDragClasses = exports.PsDragConfig = void 0;
+exports.PsDragListLiftFrames = exports.PsDragRowLiftFrames = exports.PsDragLiftFrames = exports.PsDragClasses = exports.PsDragConfig = void 0;
 exports.PsDragConfig = {
     activationDistance: 6,
     dropDuration: 220,
@@ -8,6 +8,8 @@ exports.PsDragConfig = {
     liftDuration: 200,
     liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
     placeholderOpacity: '0.4',
+    sortDuration: 250,
+    sortEasing: 'ease',
     touchDelay: 180,
     touchTolerance: 6,
 };
@@ -24,7 +26,11 @@ exports.PsDragLiftFrames = [
         transform: 'scale(1.035) rotate(-1.2deg)',
     },
 ];
-exports.PsDragListLiftFrames = [
-    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1)' },
-    { boxShadow: '0 18px 40px -16px rgb(15 23 42 / 0.45)', transform: 'scale(1.015)' },
+exports.PsDragRowLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-0.25deg)',
+    },
 ];
+exports.PsDragListLiftFrames = exports.PsDragRowLiftFrames;

package/dist/constants/ps-draggable-grid.d.ts

@@ -5,6 +5,8 @@ export declare const PsDraggableGridConfig: {
     readonly liftDuration: 200;
     readonly liftEasing: "cubic-bezier(0.2, 0.9, 0.3, 1.2)";
     readonly placeholderOpacity: "0.4";
+    readonly sortDuration: 250;
+    readonly sortEasing: "ease";
     readonly touchDelay: 180;
     readonly touchTolerance: 6;
 };

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

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

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

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

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

@@ -10,6 +10,7 @@ export declare const PsSkeletonConfig: {
     readonly importantPrefix: "!";
     readonly widthUtilityPattern: RegExp;
     readonly heightUtilityPattern: RegExp;
+    readonly radiusUtilityPattern: RegExp;
     readonly compactControlHeightClassName: "h-ps-control-compact";
     readonly tabWidthClassName: "w-24";
     readonly tabCount: 4;

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

@@ -16,6 +16,7 @@ exports.PsSkeletonConfig = {
     importantPrefix: '!',
     widthUtilityPattern: /^(w|size)-/,
     heightUtilityPattern: /^(h|size)-/,
+    radiusUtilityPattern: /^rounded(-|$)/,
     compactControlHeightClassName: 'h-ps-control-compact',
     tabWidthClassName: 'w-24',
     tabCount: 4,

package/dist/esm/components/ps-data-boundary.js

@@ -1,3 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Suspense } from 'react';
-export const PsDataBoundary = ({ AwaitComponent, children, errorElement, fallback, resolve, }) => (_jsx(Suspense, { fallback: fallback, children: _jsx(AwaitComponent, { errorElement: errorElement, resolve: resolve, children: children }) }));
+import { Suspense, useDeferredValue } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsDataBoundaryConfig } from '../constants/ps-data-boundary-config.js';
+import { PsDataBoundaryVariant } from '../constants/ps-data-boundary-variant.js';
+export const PsDataBoundary = ({ AwaitComponent, children, className, errorElement, fallback, resolve, retain = false, retainKey, variant = PsDataBoundaryVariant.Page, }) => {
+    const deferred = useDeferredValue({ key: retainKey, resolve });
+    const isRetaining = retain && deferred.key === retainKey;
+    const shown = isRetaining ? deferred.resolve : resolve;
+    const isPending = shown !== resolve;
+    const content = (_jsx(Suspense, { fallback: fallback, children: _jsx(AwaitComponent, { errorElement: errorElement, resolve: shown, children: (data) => children(data, isPending) }) }));
+    if (variant === PsDataBoundaryVariant.Page)
+        return content;
+    return (_jsx("div", { "aria-busy": isPending, className: PallasoftClassNameService.merge(PsDataBoundaryConfig.sectionClassName, isPending ? PsDataBoundaryConfig.pendingClassName : null, className), children: content }));
+};

package/dist/esm/components/ps-drag-overlay.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { PallasoftZIndex } from '@pallasoft/ps-design-system';
 import { createPortal } from 'react-dom';
@@ -18,9 +18,7 @@ export const PsDragOverlay = ({ children, className, frames, isDropAnimated, })
     const isReduced = usePsReducedMotion();
     const zIndex = usePsLayerZIndex(PallasoftZIndex.Popover);
     useEffect(() => setIsMounted(true), []);
-    if (!isMounted)
-        return null;
-    const lift = (element) => {
+    const lift = useCallback((element) => {
         if (element === null || isReduced || typeof element.animate !== 'function')
             return;
         element.animate(frames, {
@@ -28,6 +26,8 @@ export const PsDragOverlay = ({ children, className, frames, isDropAnimated, })
             easing: PsDragConfig.liftEasing,
             fill: 'forwards',
         });
-    };
+    }, [frames, isReduced]);
+    if (!isMounted)
+        return null;
     return createPortal(_jsx(DragOverlay, { dropAnimation: isReduced || isDropAnimated === false ? null : dropAnimation, zIndex: zIndex, children: children === null ? null : (_jsx("div", { className: className, ref: lift, children: children })) }), document.body);
 };

package/dist/esm/components/ps-draggable-grid.js

@@ -6,11 +6,13 @@ import { CSS } from '@dnd-kit/utilities';
 import { PsDragConfig } from '../constants/ps-drag-config.js';
 import { PsDraggableGridClasses, PsDraggableGridLiftFrames } from '../constants/ps-draggable-grid.js';
 import { usePsDragSensors } from '../hooks/use-ps-drag-sensors.js';
+import { usePsDragTransition } from '../hooks/use-ps-drag-transition.js';
 import { PsDragGrip } from './ps-drag-grip.js';
 import { PsDragOverlay } from './ps-drag-overlay.js';
 const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: _jsx(PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id });
+    const dragTransition = usePsDragTransition();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: (_jsx(PsDraggableGridHandle, { attributes: attributes, label: item.label, listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,

package/dist/esm/components/ps-sortable-list.js

@@ -3,15 +3,15 @@ import { useState } from 'react';
 import { DndContext, closestCenter, } from '@dnd-kit/core';
 import { SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { PsDragClasses, PsDragConfig, PsDragListLiftFrames } from '../constants/ps-drag-config.js';
+import { PsDragClasses, PsDragConfig, PsDragRowLiftFrames } from '../constants/ps-drag-config.js';
 import { usePsDragSensors } from '../hooks/use-ps-drag-sensors.js';
-import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion.js';
+import { usePsDragTransition } from '../hooks/use-ps-drag-transition.js';
 import { PsDragGrip } from './ps-drag-grip.js';
 import { PsDragOverlay } from './ps-drag-overlay.js';
 const PsSortableListHandle = ({ attributes, className, icon, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": label, className: className === undefined ? PsDragClasses.handle : className, ref: setActivatorNodeRef, title: label, type: 'button', children: icon === undefined ? _jsx(PsDragGrip, {}) : icon }));
 const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLabel, index, isDisabled, item, renderItem, }) => {
-    const isReduced = usePsReducedMotion();
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ disabled: isDisabled, id: item.id });
+    const dragTransition = usePsDragTransition();
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ disabled: isDisabled, id: item.id, transition: dragTransition });
     const rendered = renderItem({
         handle: (_jsx(PsSortableListHandle, { attributes: attributes, className: handleClassName, icon: handleIcon, label: getHandleLabel(item.label), listeners: listeners, setActivatorNodeRef: setActivatorNodeRef })),
         index,
@@ -24,7 +24,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
     return (_jsx("div", { className: `${PsDragClasses.listItem} ${className} ${isDragging ? PsDragClasses.placeholder : ''}`, ref: setNodeRef, style: {
             opacity: isDragging ? PsDragConfig.placeholderOpacity : undefined,
             transform: CSS.Translate.toString(transform),
-            transition: isReduced ? undefined : transition,
+            transition,
         }, children: rendered }));
 };
 export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
@@ -63,7 +63,7 @@ export const PsSortableList = ({ announcements: texts, className, getHandleLabel
         onMove(String(active.id), from, to);
     };
     const activeGroup = activeItem === null ? undefined : activeItem.groupKey;
-    return (_jsxs(DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: isHorizontal ? horizontalListSortingStrategy : verticalListSortingStrategy, children: _jsx("div", { className: className, role: role, children: items.map((item, index) => (_jsx(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeItem !== null
+    return (_jsxs(DndContext, { accessibility: { announcements, screenReaderInstructions: { draggable: instructions } }, collisionDetection: closestCenter, onDragCancel: () => setActiveId(null), onDragEnd: handleDragEnd, onDragStart: ({ active }) => setActiveId(String(active.id)), sensors: sensors, children: [_jsx(SortableContext, { items: items.map((item) => item.id), strategy: isHorizontal ? horizontalListSortingStrategy : verticalListSortingStrategy, children: _jsx("div", { className: className, role: role, children: items.map((item, index) => (_jsx(PsSortableListRow, { className: itemClassName(item), getHandleLabel: getHandleLabel, handleClassName: handleClassName, handleIcon: handleIcon, index: index, isDisabled: activeItem !== null && item.groupKey !== activeGroup, item: item, renderItem: renderItem }, item.id))) }) }), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragRowLiftFrames, children: activeItem !== null
                     ? renderItem({
                         handle: (_jsx(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
                         index: activeIndex,

package/dist/esm/constants/ps-data-boundary-config.js

@@ -0,0 +1,4 @@
+export const PsDataBoundaryConfig = {
+    pendingClassName: 'opacity-60 transition-opacity',
+    sectionClassName: 'transition-opacity',
+};

package/dist/esm/constants/ps-data-boundary-variant.js

@@ -0,0 +1,5 @@
+export var PsDataBoundaryVariant;
+(function (PsDataBoundaryVariant) {
+    PsDataBoundaryVariant["Page"] = "page";
+    PsDataBoundaryVariant["Section"] = "section";
+})(PsDataBoundaryVariant || (PsDataBoundaryVariant = {}));

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

@@ -5,6 +5,8 @@ export const PsDragConfig = {
     liftDuration: 200,
     liftEasing: 'cubic-bezier(0.2, 0.9, 0.3, 1.2)',
     placeholderOpacity: '0.4',
+    sortDuration: 250,
+    sortEasing: 'ease',
     touchDelay: 180,
     touchTolerance: 6,
 };
@@ -21,7 +23,11 @@ export const PsDragLiftFrames = [
         transform: 'scale(1.035) rotate(-1.2deg)',
     },
 ];
-export const PsDragListLiftFrames = [
-    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1)' },
-    { boxShadow: '0 18px 40px -16px rgb(15 23 42 / 0.45)', transform: 'scale(1.015)' },
+export const PsDragRowLiftFrames = [
+    { boxShadow: '0 0 0 0 rgb(15 23 42 / 0)', transform: 'scale(1) rotate(0deg)' },
+    {
+        boxShadow: '0 28px 64px -18px rgb(15 23 42 / 0.5)',
+        transform: 'scale(1.035) rotate(-0.25deg)',
+    },
 ];
+export const PsDragListLiftFrames = PsDragRowLiftFrames;

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

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

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

@@ -13,6 +13,7 @@ export const PsSkeletonConfig = {
     importantPrefix: '!',
     widthUtilityPattern: /^(w|size)-/,
     heightUtilityPattern: /^(h|size)-/,
+    radiusUtilityPattern: /^rounded(-|$)/,
     compactControlHeightClassName: 'h-ps-control-compact',
     tabWidthClassName: 'w-24',
     tabCount: 4,

package/dist/esm/hooks/use-ps-drag-sensors.js

@@ -1,11 +1,11 @@
 import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { PsDragConfig } from '../constants/ps-drag-config.js';
-export const usePsDragSensors = () => useSensors(useSensor(MouseSensor, {
+export const usePsDragSensors = (coordinateGetter = sortableKeyboardCoordinates) => useSensors(useSensor(MouseSensor, {
     activationConstraint: { distance: PsDragConfig.activationDistance },
 }), useSensor(TouchSensor, {
     activationConstraint: {
         delay: PsDragConfig.touchDelay,
         tolerance: PsDragConfig.touchTolerance,
     },
-}), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+}), useSensor(KeyboardSensor, { coordinateGetter }));

package/dist/esm/hooks/use-ps-drag-transition.js

@@ -0,0 +1,10 @@
+import { PsDragConfig } from '../constants/ps-drag-config.js';
+import { usePsReducedMotion } from './use-ps-reduced-motion.js';
+const transition = {
+    duration: PsDragConfig.sortDuration,
+    easing: PsDragConfig.sortEasing,
+};
+export const usePsDragTransition = () => {
+    const isReduced = usePsReducedMotion();
+    return isReduced ? null : transition;
+};

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

@@ -1,17 +1,28 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { PsOptimisticConfig } from '../constants/ps-optimistic-config.js';
+import { PsOptimisticReleaseService } from '../services/ps-optimistic-release-service.js';
 export const usePsOptimisticRows = ({ apply, isHolding = false, isSaving, rows, }) => {
-    const [remembered, setRemembered] = useState({
-        base: rows,
-        changes: [],
-    });
+    const [remembered, setRemembered] = useState(() => PsOptimisticReleaseService.empty(rows));
     const isActive = isSaving || isHolding;
-    const isStale = remembered.base !== rows && !isActive;
-    if (isStale)
-        setRemembered({ base: rows, changes: [] });
-    const changes = isStale ? [] : remembered.changes;
+    const current = PsOptimisticReleaseService.next(remembered, rows, isActive, apply);
+    if (current !== remembered)
+        setRemembered(current);
+    const { changes } = current;
+    const isHeld = changes.length > 0 && !isActive;
     const shown = useMemo(() => (changes.length === 0 ? rows : apply(rows, changes)), [apply, changes, rows]);
-    const remember = useCallback((change) => setRemembered((current) => ({ base: rows, changes: [...current.changes, change] })), [rows]);
-    const forgetLast = useCallback(() => setRemembered((current) => ({ base: current.base, changes: current.changes.slice(0, -1) })), []);
-    const rollback = useCallback(() => setRemembered({ base: rows, changes: [] }), [rows]);
+    useEffect(() => {
+        if (!isHeld)
+            return undefined;
+        const timer = setTimeout(() => setRemembered(PsOptimisticReleaseService.empty(rows)), PsOptimisticConfig.releaseTimeoutMs);
+        return () => clearTimeout(timer);
+    }, [isHeld, changes, rows]);
+    const remember = useCallback((change) => setRemembered((previous) => ({
+        base: rows,
+        changes: [...previous.changes, change],
+        drainBase: null,
+        wasActive: previous.wasActive,
+    })), [rows]);
+    const forgetLast = useCallback(() => setRemembered((previous) => ({ ...previous, changes: previous.changes.slice(0, -1) })), []);
+    const rollback = useCallback(() => setRemembered(PsOptimisticReleaseService.empty(rows)), [rows]);
     return { forgetLast, remember, rollback, rows: shown };
 };

package/dist/esm/hooks/use-ps-promise-value.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+export const usePsPromiseValue = (promise, initial) => {
+    const [value, setValue] = useState(initial);
+    useEffect(() => {
+        let isCurrent = true;
+        void promise.then((resolved) => {
+            if (isCurrent)
+                setValue(resolved);
+        }, () => undefined);
+        return () => {
+            isCurrent = false;
+        };
+    }, [promise]);
+    return value;
+};

package/dist/esm/hooks/use-ps-retained-promise.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+export const usePsRetainedPromise = (promise) => {
+    const [state, setState] = useState({
+        hasFailed: false,
+        value: null,
+    });
+    useEffect(() => {
+        let isCurrent = true;
+        void promise.then((value) => {
+            if (isCurrent)
+                setState({ hasFailed: false, value });
+        }, () => {
+            if (isCurrent)
+                setState((previous) => ({ ...previous, hasFailed: true }));
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [promise]);
+    return state;
+};

package/dist/esm/index.js

@@ -127,6 +127,12 @@ export * from './components/ps-active-filter-chip.js';
 export * from './components/ps-back-link.js';
 export * from './components/ps-card-block-skeleton.js';
 export * from './components/ps-data-boundary.js';
+export * from './constants/ps-data-boundary-config.js';
+export * from './constants/ps-data-boundary-variant.js';
+export * from './hooks/use-ps-retained-promise.js';
+export * from './hooks/use-ps-promise-value.js';
+export * from './interfaces/ps-retained-promise-data.js';
+export * from './services/ps-deep-equal-service.js';
 export * from './components/ps-faq-answer.js';
 export * from './components/ps-feature-grid.js';
 export * from './components/ps-feature-card.js';
@@ -188,6 +194,8 @@ export * from './models/ps-summary-item.js';
 export * from './components/ps-drag-grip.js';
 export * from './components/ps-drag-overlay.js';
 export * from './hooks/use-ps-drag-sensors.js';
+export * from './hooks/use-ps-drag-transition.js';
+export * from './models/ps-drag-transition.js';
 export * from './hooks/use-ps-list-keys.js';
 export * from './interfaces/ps-list-keys-result.js';
 export * from './services/ps-list-key-service.js';

package/dist/esm/interfaces/ps-retained-promise-data.js

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

package/dist/esm/models/ps-drag-transition.js

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

package/dist/esm/services/ps-deep-equal-service.js

@@ -0,0 +1,31 @@
+export class PsDeepEqualService {
+    static isEqual(left, right) {
+        if (Object.is(left, right))
+            return true;
+        if (typeof left !== 'object' || typeof right !== 'object')
+            return false;
+        if (left === null || right === null)
+            return false;
+        if (Array.isArray(left) || Array.isArray(right))
+            return PsDeepEqualService.isArrayEqual(left, right);
+        if (left instanceof Date || right instanceof Date) {
+            return left instanceof Date && right instanceof Date && left.getTime() === right.getTime();
+        }
+        return PsDeepEqualService.isRecordEqual(left, right);
+    }
+    static isArrayEqual(left, right) {
+        if (!Array.isArray(left) || !Array.isArray(right))
+            return false;
+        if (left.length !== right.length)
+            return false;
+        return left.every((item, index) => PsDeepEqualService.isEqual(item, right[index]));
+    }
+    static isRecordEqual(left, right) {
+        const leftEntries = Object.entries(left);
+        const rightRecord = { ...right };
+        if (leftEntries.length !== Object.keys(rightRecord).length)
+            return false;
+        return leftEntries.every(([key, value]) => Object.prototype.hasOwnProperty.call(rightRecord, key) &&
+            PsDeepEqualService.isEqual(value, rightRecord[key]));
+    }
+}

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

@@ -0,0 +1,32 @@
+import { PsDeepEqualService } from './ps-deep-equal-service.js';
+export class PsOptimisticReleaseService {
+    static empty(rows) {
+        return { base: rows, changes: [], drainBase: null, wasActive: false };
+    }
+    static next(remembered, rows, isActive, apply) {
+        if (isActive) {
+            if (remembered.wasActive && remembered.drainBase === null)
+                return remembered;
+            return { ...remembered, drainBase: null, wasActive: true };
+        }
+        if (remembered.changes.length === 0) {
+            if (remembered.base === rows && !remembered.wasActive)
+                return remembered;
+            return PsOptimisticReleaseService.empty(rows);
+        }
+        if (remembered.wasActive) {
+            if (!PsDeepEqualService.isEqual(rows, remembered.base)) {
+                return PsOptimisticReleaseService.empty(rows);
+            }
+            return { ...remembered, drainBase: rows, wasActive: false };
+        }
+        const reference = remembered.drainBase === null ? remembered.base : remembered.drainBase;
+        if (!PsDeepEqualService.isEqual(rows, reference)) {
+            return PsOptimisticReleaseService.empty(rows);
+        }
+        if (PsDeepEqualService.isEqual(apply(rows, remembered.changes), rows)) {
+            return PsOptimisticReleaseService.empty(rows);
+        }
+        return remembered;
+    }
+}

package/dist/esm/services/ps-skeleton-class-service.js

@@ -10,8 +10,18 @@ export class PsSkeletonClassService {
             : [];
         const hasWidth = utilities.some((utility) => PsSkeletonConfig.widthUtilityPattern.test(utility));
         const hasHeight = utilities.some((utility) => PsSkeletonConfig.heightUtilityPattern.test(utility));
+        const hasRadius = utilities.some((utility) => PsSkeletonConfig.radiusUtilityPattern.test(utility));
         const size = PsSkeletonConfig.shapeSizes[shape];
-        return PallasoftClassNameService.merge(PsSkeletonConfig.baseClassName, PsSkeletonConfig.shapeClassNames[shape], hasHeight ? null : size.height, hasWidth ? null : size.width, className);
+        const shapeClassName = hasRadius
+            ? PsSkeletonClassService.withoutRadius(PsSkeletonConfig.shapeClassNames[shape])
+            : PsSkeletonConfig.shapeClassNames[shape];
+        return PallasoftClassNameService.merge(PsSkeletonConfig.baseClassName, shapeClassName, hasHeight ? null : size.height, hasWidth ? null : size.width, className);
+    }
+    static withoutRadius(className) {
+        return className
+            .split(PsSkeletonConfig.classSeparator)
+            .filter((token) => !PsSkeletonConfig.radiusUtilityPattern.test(token))
+            .join(' ');
     }
     static withoutImportant(token) {
         return token.startsWith(PsSkeletonConfig.importantPrefix) ? token.slice(1) : token;

package/dist/hooks/use-ps-drag-sensors.d.ts

@@ -1,2 +1,2 @@
-import { type SensorDescriptor, type SensorOptions } from '@dnd-kit/core';
-export declare const usePsDragSensors: () => SensorDescriptor<SensorOptions>[];
+import { type KeyboardCoordinateGetter, type SensorDescriptor, type SensorOptions } from '@dnd-kit/core';
+export declare const usePsDragSensors: (coordinateGetter?: KeyboardCoordinateGetter) => SensorDescriptor<SensorOptions>[];

package/dist/hooks/use-ps-drag-sensors.js

@@ -4,12 +4,12 @@ exports.usePsDragSensors = void 0;
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const ps_drag_config_1 = require("../constants/ps-drag-config");
-const usePsDragSensors = () => (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
+const usePsDragSensors = (coordinateGetter = sortable_1.sortableKeyboardCoordinates) => (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, {
     activationConstraint: { distance: ps_drag_config_1.PsDragConfig.activationDistance },
 }), (0, core_1.useSensor)(core_1.TouchSensor, {
     activationConstraint: {
         delay: ps_drag_config_1.PsDragConfig.touchDelay,
         tolerance: ps_drag_config_1.PsDragConfig.touchTolerance,
     },
-}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter }));
 exports.usePsDragSensors = usePsDragSensors;

package/dist/hooks/use-ps-drag-transition.d.ts

@@ -0,0 +1,2 @@
+import type { PsDragTransition } from '../models/ps-drag-transition';
+export declare const usePsDragTransition: () => PsDragTransition | null;

package/dist/hooks/use-ps-drag-transition.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsDragTransition = void 0;
+const ps_drag_config_1 = require("../constants/ps-drag-config");
+const use_ps_reduced_motion_1 = require("./use-ps-reduced-motion");
+const transition = {
+    duration: ps_drag_config_1.PsDragConfig.sortDuration,
+    easing: ps_drag_config_1.PsDragConfig.sortEasing,
+};
+const usePsDragTransition = () => {
+    const isReduced = (0, use_ps_reduced_motion_1.usePsReducedMotion)();
+    return isReduced ? null : transition;
+};
+exports.usePsDragTransition = usePsDragTransition;

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

@@ -2,20 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePsOptimisticRows = void 0;
 const react_1 = require("react");
+const ps_optimistic_config_1 = require("../constants/ps-optimistic-config");
+const ps_optimistic_release_service_1 = require("../services/ps-optimistic-release-service");
 const usePsOptimisticRows = ({ apply, isHolding = false, isSaving, rows, }) => {
-    const [remembered, setRemembered] = (0, react_1.useState)({
-        base: rows,
-        changes: [],
-    });
+    const [remembered, setRemembered] = (0, react_1.useState)(() => ps_optimistic_release_service_1.PsOptimisticReleaseService.empty(rows));
     const isActive = isSaving || isHolding;
-    const isStale = remembered.base !== rows && !isActive;
-    if (isStale)
-        setRemembered({ base: rows, changes: [] });
-    const changes = isStale ? [] : remembered.changes;
+    const current = ps_optimistic_release_service_1.PsOptimisticReleaseService.next(remembered, rows, isActive, apply);
+    if (current !== remembered)
+        setRemembered(current);
+    const { changes } = current;
+    const isHeld = changes.length > 0 && !isActive;
     const shown = (0, react_1.useMemo)(() => (changes.length === 0 ? rows : apply(rows, changes)), [apply, changes, rows]);
-    const remember = (0, react_1.useCallback)((change) => setRemembered((current) => ({ base: rows, changes: [...current.changes, change] })), [rows]);
-    const forgetLast = (0, react_1.useCallback)(() => setRemembered((current) => ({ base: current.base, changes: current.changes.slice(0, -1) })), []);
-    const rollback = (0, react_1.useCallback)(() => setRemembered({ base: rows, changes: [] }), [rows]);
+    (0, react_1.useEffect)(() => {
+        if (!isHeld)
+            return undefined;
+        const timer = setTimeout(() => setRemembered(ps_optimistic_release_service_1.PsOptimisticReleaseService.empty(rows)), ps_optimistic_config_1.PsOptimisticConfig.releaseTimeoutMs);
+        return () => clearTimeout(timer);
+    }, [isHeld, changes, rows]);
+    const remember = (0, react_1.useCallback)((change) => setRemembered((previous) => ({
+        base: rows,
+        changes: [...previous.changes, change],
+        drainBase: null,
+        wasActive: previous.wasActive,
+    })), [rows]);
+    const forgetLast = (0, react_1.useCallback)(() => setRemembered((previous) => ({ ...previous, changes: previous.changes.slice(0, -1) })), []);
+    const rollback = (0, react_1.useCallback)(() => setRemembered(ps_optimistic_release_service_1.PsOptimisticReleaseService.empty(rows)), [rows]);
     return { forgetLast, remember, rollback, rows: shown };
 };
 exports.usePsOptimisticRows = usePsOptimisticRows;

package/dist/hooks/use-ps-promise-value.d.ts

@@ -0,0 +1 @@
+export declare const usePsPromiseValue: <Value>(promise: Promise<Value>, initial: Value) => Value;

package/dist/hooks/use-ps-promise-value.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsPromiseValue = void 0;
+const react_1 = require("react");
+const usePsPromiseValue = (promise, initial) => {
+    const [value, setValue] = (0, react_1.useState)(initial);
+    (0, react_1.useEffect)(() => {
+        let isCurrent = true;
+        void promise.then((resolved) => {
+            if (isCurrent)
+                setValue(resolved);
+        }, () => undefined);
+        return () => {
+            isCurrent = false;
+        };
+    }, [promise]);
+    return value;
+};
+exports.usePsPromiseValue = usePsPromiseValue;

package/dist/hooks/use-ps-retained-promise.d.ts

@@ -0,0 +1,2 @@
+import type { PsRetainedPromiseData } from '../interfaces/ps-retained-promise-data';
+export declare const usePsRetainedPromise: <Value>(promise: Promise<Value>) => PsRetainedPromiseData<Value>;

package/dist/hooks/use-ps-retained-promise.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsRetainedPromise = void 0;
+const react_1 = require("react");
+const usePsRetainedPromise = (promise) => {
+    const [state, setState] = (0, react_1.useState)({
+        hasFailed: false,
+        value: null,
+    });
+    (0, react_1.useEffect)(() => {
+        let isCurrent = true;
+        void promise.then((value) => {
+            if (isCurrent)
+                setState({ hasFailed: false, value });
+        }, () => {
+            if (isCurrent)
+                setState((previous) => ({ ...previous, hasFailed: true }));
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [promise]);
+    return state;
+};
+exports.usePsRetainedPromise = usePsRetainedPromise;

package/dist/index.d.ts

@@ -127,6 +127,12 @@ export * from './components/ps-active-filter-chip';
 export * from './components/ps-back-link';
 export * from './components/ps-card-block-skeleton';
 export * from './components/ps-data-boundary';
+export * from './constants/ps-data-boundary-config';
+export * from './constants/ps-data-boundary-variant';
+export * from './hooks/use-ps-retained-promise';
+export * from './hooks/use-ps-promise-value';
+export * from './interfaces/ps-retained-promise-data';
+export * from './services/ps-deep-equal-service';
 export * from './components/ps-faq-answer';
 export * from './components/ps-feature-grid';
 export * from './components/ps-feature-card';
@@ -188,6 +194,8 @@ export * from './models/ps-summary-item';
 export * from './components/ps-drag-grip';
 export * from './components/ps-drag-overlay';
 export * from './hooks/use-ps-drag-sensors';
+export * from './hooks/use-ps-drag-transition';
+export * from './models/ps-drag-transition';
 export * from './hooks/use-ps-list-keys';
 export * from './interfaces/ps-list-keys-result';
 export * from './services/ps-list-key-service';

package/dist/index.js

@@ -143,6 +143,12 @@ __exportStar(require("./components/ps-active-filter-chip"), exports);
 __exportStar(require("./components/ps-back-link"), exports);
 __exportStar(require("./components/ps-card-block-skeleton"), exports);
 __exportStar(require("./components/ps-data-boundary"), exports);
+__exportStar(require("./constants/ps-data-boundary-config"), exports);
+__exportStar(require("./constants/ps-data-boundary-variant"), exports);
+__exportStar(require("./hooks/use-ps-retained-promise"), exports);
+__exportStar(require("./hooks/use-ps-promise-value"), exports);
+__exportStar(require("./interfaces/ps-retained-promise-data"), exports);
+__exportStar(require("./services/ps-deep-equal-service"), exports);
 __exportStar(require("./components/ps-faq-answer"), exports);
 __exportStar(require("./components/ps-feature-grid"), exports);
 __exportStar(require("./components/ps-feature-card"), exports);
@@ -204,6 +210,8 @@ __exportStar(require("./models/ps-summary-item"), exports);
 __exportStar(require("./components/ps-drag-grip"), exports);
 __exportStar(require("./components/ps-drag-overlay"), exports);
 __exportStar(require("./hooks/use-ps-drag-sensors"), exports);
+__exportStar(require("./hooks/use-ps-drag-transition"), exports);
+__exportStar(require("./models/ps-drag-transition"), exports);
 __exportStar(require("./hooks/use-ps-list-keys"), exports);
 __exportStar(require("./interfaces/ps-list-keys-result"), exports);
 __exportStar(require("./services/ps-list-key-service"), exports);

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

@@ -1,4 +1,6 @@
 export interface PsOptimisticChanges<Row, Change> {
     base: Row[];
     changes: Change[];
+    drainBase: Row[] | null;
+    wasActive: boolean;
 }

package/dist/interfaces/ps-retained-promise-data.d.ts

@@ -0,0 +1,4 @@
+export interface PsRetainedPromiseData<Value> {
+    hasFailed: boolean;
+    value: Value | null;
+}

package/dist/interfaces/ps-retained-promise-data.js

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

package/dist/models/ps-drag-transition.d.ts

@@ -0,0 +1,4 @@
+export interface PsDragTransition {
+    duration: number;
+    easing: string;
+}

package/dist/models/ps-drag-transition.js

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

package/dist/services/ps-deep-equal-service.d.ts

@@ -0,0 +1,5 @@
+export declare class PsDeepEqualService {
+    static isEqual(left: unknown, right: unknown): boolean;
+    private static isArrayEqual;
+    private static isRecordEqual;
+}

package/dist/services/ps-deep-equal-service.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsDeepEqualService = void 0;
+class PsDeepEqualService {
+    static isEqual(left, right) {
+        if (Object.is(left, right))
+            return true;
+        if (typeof left !== 'object' || typeof right !== 'object')
+            return false;
+        if (left === null || right === null)
+            return false;
+        if (Array.isArray(left) || Array.isArray(right))
+            return PsDeepEqualService.isArrayEqual(left, right);
+        if (left instanceof Date || right instanceof Date) {
+            return left instanceof Date && right instanceof Date && left.getTime() === right.getTime();
+        }
+        return PsDeepEqualService.isRecordEqual(left, right);
+    }
+    static isArrayEqual(left, right) {
+        if (!Array.isArray(left) || !Array.isArray(right))
+            return false;
+        if (left.length !== right.length)
+            return false;
+        return left.every((item, index) => PsDeepEqualService.isEqual(item, right[index]));
+    }
+    static isRecordEqual(left, right) {
+        const leftEntries = Object.entries(left);
+        const rightRecord = { ...right };
+        if (leftEntries.length !== Object.keys(rightRecord).length)
+            return false;
+        return leftEntries.every(([key, value]) => Object.prototype.hasOwnProperty.call(rightRecord, key) &&
+            PsDeepEqualService.isEqual(value, rightRecord[key]));
+    }
+}
+exports.PsDeepEqualService = PsDeepEqualService;

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

@@ -0,0 +1,5 @@
+import type { PsOptimisticChanges } from '../interfaces/ps-optimistic-changes';
+export declare class PsOptimisticReleaseService {
+    static empty<Row, Change>(rows: Row[]): PsOptimisticChanges<Row, Change>;
+    static next<Row, Change>(remembered: PsOptimisticChanges<Row, Change>, rows: Row[], isActive: boolean, apply: (rows: Row[], changes: Change[]) => Row[]): PsOptimisticChanges<Row, Change>;
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOptimisticReleaseService = void 0;
+const ps_deep_equal_service_1 = require("./ps-deep-equal-service");
+class PsOptimisticReleaseService {
+    static empty(rows) {
+        return { base: rows, changes: [], drainBase: null, wasActive: false };
+    }
+    static next(remembered, rows, isActive, apply) {
+        if (isActive) {
+            if (remembered.wasActive && remembered.drainBase === null)
+                return remembered;
+            return { ...remembered, drainBase: null, wasActive: true };
+        }
+        if (remembered.changes.length === 0) {
+            if (remembered.base === rows && !remembered.wasActive)
+                return remembered;
+            return PsOptimisticReleaseService.empty(rows);
+        }
+        if (remembered.wasActive) {
+            if (!ps_deep_equal_service_1.PsDeepEqualService.isEqual(rows, remembered.base)) {
+                return PsOptimisticReleaseService.empty(rows);
+            }
+            return { ...remembered, drainBase: rows, wasActive: false };
+        }
+        const reference = remembered.drainBase === null ? remembered.base : remembered.drainBase;
+        if (!ps_deep_equal_service_1.PsDeepEqualService.isEqual(rows, reference)) {
+            return PsOptimisticReleaseService.empty(rows);
+        }
+        if (ps_deep_equal_service_1.PsDeepEqualService.isEqual(apply(rows, remembered.changes), rows)) {
+            return PsOptimisticReleaseService.empty(rows);
+        }
+        return remembered;
+    }
+}
+exports.PsOptimisticReleaseService = PsOptimisticReleaseService;

package/dist/services/ps-skeleton-class-service.d.ts

@@ -1,5 +1,6 @@
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
 export declare class PsSkeletonClassService {
     static resolve(shape: PsSkeletonShape, className?: string): string;
+    private static withoutRadius;
     private static withoutImportant;
 }

package/dist/services/ps-skeleton-class-service.js

@@ -13,8 +13,18 @@ class PsSkeletonClassService {
             : [];
         const hasWidth = utilities.some((utility) => ps_skeleton_config_1.PsSkeletonConfig.widthUtilityPattern.test(utility));
         const hasHeight = utilities.some((utility) => ps_skeleton_config_1.PsSkeletonConfig.heightUtilityPattern.test(utility));
+        const hasRadius = utilities.some((utility) => ps_skeleton_config_1.PsSkeletonConfig.radiusUtilityPattern.test(utility));
         const size = ps_skeleton_config_1.PsSkeletonConfig.shapeSizes[shape];
-        return ps_design_system_1.PallasoftClassNameService.merge(ps_skeleton_config_1.PsSkeletonConfig.baseClassName, ps_skeleton_config_1.PsSkeletonConfig.shapeClassNames[shape], hasHeight ? null : size.height, hasWidth ? null : size.width, className);
+        const shapeClassName = hasRadius
+            ? PsSkeletonClassService.withoutRadius(ps_skeleton_config_1.PsSkeletonConfig.shapeClassNames[shape])
+            : ps_skeleton_config_1.PsSkeletonConfig.shapeClassNames[shape];
+        return ps_design_system_1.PallasoftClassNameService.merge(ps_skeleton_config_1.PsSkeletonConfig.baseClassName, shapeClassName, hasHeight ? null : size.height, hasWidth ? null : size.width, className);
+    }
+    static withoutRadius(className) {
+        return className
+            .split(ps_skeleton_config_1.PsSkeletonConfig.classSeparator)
+            .filter((token) => !ps_skeleton_config_1.PsSkeletonConfig.radiusUtilityPattern.test(token))
+            .join(' ');
     }
     static withoutImportant(token) {
         return token.startsWith(ps_skeleton_config_1.PsSkeletonConfig.importantPrefix) ? token.slice(1) : token;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-core-components",
-	"version": "2.44.2",
+	"version": "2.46.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",