@pallasoft/ps-core-components 2.42.0 → 2.44.0

package/dist/components/ps-button.js

@@ -5,5 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const ps_button_classes_1 = require("../constants/ps-button-classes");
 const ps_spinner_1 = require("./ps-spinner");
-const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_button_classes_1.PsButtonBaseClassName, 'disabled:cursor-not-allowed disabled:opacity-50', ps_button_classes_1.PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', ps_button_classes_1.PsButtonVariantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? ((0, jsx_runtime_1.jsx)(ps_spinner_1.PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": isLoading || undefined, className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon }) : null, (0, jsx_runtime_1.jsx)("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
+const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_button_classes_1.PsButtonBaseClassName, isLoading && disabled !== true
+        ? 'cursor-progress'
+        : 'disabled:cursor-not-allowed disabled:opacity-50', ps_button_classes_1.PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', ps_button_classes_1.PsButtonVariantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? ((0, jsx_runtime_1.jsx)(ps_spinner_1.PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, (0, jsx_runtime_1.jsxs)("span", { "aria-hidden": isLoading || undefined, className: ps_design_system_1.PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: leadingIcon }) : null, (0, jsx_runtime_1.jsx)("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? (0, jsx_runtime_1.jsx)("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
 exports.PsButton = PsButton;

package/dist/components/ps-reflective-app-shell.d.ts

@@ -4,9 +4,11 @@ export interface PsReflectiveAppShellProps {
     className?: string;
     contentClassName?: string;
     frameClassName?: string;
+    scrollPreventReset?: boolean;
     scrollResetKey?: string;
+    scrollRestoreKey?: string;
     sidebar: ReactNode;
     sidebarWidth?: string;
     topbar: ReactNode;
 }
-export declare const PsReflectiveAppShell: ({ children, className, contentClassName, frameClassName, scrollResetKey, sidebar, sidebarWidth, topbar, }: PsReflectiveAppShellProps) => import("react").JSX.Element;
+export declare const PsReflectiveAppShell: ({ children, className, contentClassName, frameClassName, scrollPreventReset, scrollResetKey, scrollRestoreKey, sidebar, sidebarWidth, topbar, }: PsReflectiveAppShellProps) => import("react").JSX.Element;

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

@@ -4,14 +4,21 @@ exports.PsReflectiveAppShell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, scrollResetKey, sidebar, sidebarWidth = '17rem', topbar, }) => {
+const use_ps_scroll_restoration_1 = require("../hooks/use-ps-scroll-restoration");
+const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, scrollPreventReset, scrollResetKey, scrollRestoreKey, sidebar, sidebarWidth = '17rem', topbar, }) => {
     const contentRef = (0, react_1.useRef)(null);
+    (0, use_ps_scroll_restoration_1.usePsScrollRestoration)({
+        elementRef: contentRef,
+        preventScrollReset: scrollPreventReset,
+        resetKey: scrollResetKey,
+        restoreKey: scrollRestoreKey,
+    });
     (0, react_1.useLayoutEffect)(() => {
-        if (scrollResetKey === undefined)
+        if (scrollResetKey === undefined || scrollRestoreKey !== undefined)
             return;
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
-    }, [scrollResetKey]);
+    }, [scrollResetKey, scrollRestoreKey]);
     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-scroll-restoration.d.ts

@@ -0,0 +1,6 @@
+export interface PsScrollRestorationProps {
+    preventScrollReset?: boolean;
+    resetKey?: string;
+    restoreKey: string;
+}
+export declare const PsScrollRestoration: ({ preventScrollReset, resetKey, restoreKey, }: PsScrollRestorationProps) => null;

package/dist/components/ps-scroll-restoration.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScrollRestoration = void 0;
+const use_ps_scroll_restoration_1 = require("../hooks/use-ps-scroll-restoration");
+const PsScrollRestoration = ({ preventScrollReset, resetKey, restoreKey, }) => {
+    (0, use_ps_scroll_restoration_1.usePsScrollRestoration)({ preventScrollReset, resetKey, restoreKey });
+    return null;
+};
+exports.PsScrollRestoration = PsScrollRestoration;

package/dist/components/ps-skeleton-table.d.ts

@@ -1,3 +1,4 @@
+import type { PsSkeletonTableRow } from '../models/ps-skeleton-table-row';
 export interface PsSkeletonTableProps {
     alignments?: ('left' | 'right')[];
     className?: string;
@@ -5,6 +6,7 @@ export interface PsSkeletonTableProps {
     hasFooter?: boolean;
     hasToolbar?: boolean;
     isFramed?: boolean;
+    rowLayout?: PsSkeletonTableRow[];
     rows?: number;
 }
-export declare const PsSkeletonTable: ({ alignments, className, columns, hasFooter, hasToolbar, isFramed, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;
+export declare const PsSkeletonTable: ({ alignments, className, columns, hasFooter, hasToolbar, isFramed, rowLayout, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;

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

@@ -7,7 +7,8 @@ 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 ps_skeleton_group_1 = require("./ps-skeleton-group");
-const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rows = 6, }) => {
+const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rowLayout, rows = 6, }) => {
+    const layout = rowLayout === undefined ? Array.from({ length: rows }, () => ({})) : rowLayout;
     const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
     const isRight = (columnIndex) => alignments !== undefined
         ? alignments[columnIndex] === 'right'
@@ -17,6 +18,18 @@ const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false
             : 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.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] })] }));
+                    : '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))) }), layout.map((row, rowIndex) => {
+                        const isSection = row.isSection === true;
+                        const depth = row.depth === undefined ? 0 : row.depth;
+                        return ((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) => {
+                                if (isSection && columnIndex > 0 && !isRight(columnIndex))
+                                    return (0, jsx_runtime_1.jsx)("span", {}, columnIndex);
+                                if (columnIndex > 0 || (depth === 0 && !isSection))
+                                    return cell(rowIndex, columnIndex, isSection);
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 items-center gap-3', style: {
+                                        paddingInlineStart: `${depth * ps_skeleton_config_1.PsSkeletonConfig.tableIndentRem}rem`,
+                                    }, children: [isSection ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_skeleton_config_1.PsSkeletonConfig.tableSectionMarkerClassName })) : null, cell(rowIndex, columnIndex, isSection)] }, columnIndex));
+                            }) }, 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(layout.length, columnIndex, true)) })) : null] })] }));
 };
 exports.PsSkeletonTable = PsSkeletonTable;

package/dist/constants/ps-flag-param-value.d.ts

@@ -0,0 +1,3 @@
+export declare const PsFlagParamValue: {
+    readonly on: "1";
+};

package/dist/constants/ps-flag-param-value.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsFlagParamValue = void 0;
+exports.PsFlagParamValue = {
+    on: '1',
+};

package/dist/constants/ps-query-param-config.d.ts

@@ -0,0 +1,4 @@
+import type { PsSearchParamsSetOptions } from '../models/ps-search-params-set-options';
+export declare const PsQueryParamConfig: {
+    setOptions: PsSearchParamsSetOptions;
+};

package/dist/constants/ps-query-param-config.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsQueryParamConfig = void 0;
+exports.PsQueryParamConfig = {
+    setOptions: { preventScrollReset: true, replace: true },
+};

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

@@ -0,0 +1,3 @@
+export declare const PsRerenderConfig: {
+    readonly maxTimerMs: 2147483647;
+};

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRerenderConfig = void 0;
+exports.PsRerenderConfig = {
+    maxTimerMs: 2147483647,
+};

package/dist/constants/ps-scroll-restoration-config.d.ts

@@ -0,0 +1,10 @@
+export declare const PsScrollRestorationConfig: {
+    readonly elementScope: "element:";
+    readonly inputEvents: readonly ["wheel", "touchstart", "keydown", "mousedown"];
+    readonly maxEntries: 100;
+    readonly persistThrottleMs: 150;
+    readonly restoreTimeoutMs: 4000;
+    readonly storageKey: "ps-scroll-restoration";
+    readonly tolerancePx: 2;
+    readonly windowScope: "window:";
+};

package/dist/constants/ps-scroll-restoration-config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsScrollRestorationConfig = void 0;
+exports.PsScrollRestorationConfig = {
+    elementScope: 'element:',
+    inputEvents: ['wheel', 'touchstart', 'keydown', 'mousedown'],
+    maxEntries: 100,
+    persistThrottleMs: 150,
+    restoreTimeoutMs: 4000,
+    storageKey: 'ps-scroll-restoration',
+    tolerancePx: 2,
+    windowScope: 'window:',
+};

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

@@ -14,6 +14,8 @@ export declare const PsSkeletonConfig: {
     readonly tabWidthClassName: "w-24";
     readonly tabCount: 4;
     readonly tableFrameClassName: "rounded-[0.875rem]";
+    readonly tableIndentRem: 1.25;
+    readonly tableSectionMarkerClassName: "h-5 w-5 shrink-0 rounded-md";
     readonly shapeClassNames: Record<PsSkeletonShape, string>;
     readonly shapeSizes: Record<PsSkeletonShape, PsSkeletonSize>;
 };

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

@@ -20,6 +20,8 @@ exports.PsSkeletonConfig = {
     tabWidthClassName: 'w-24',
     tabCount: 4,
     tableFrameClassName: 'rounded-[0.875rem]',
+    tableIndentRem: 1.25,
+    tableSectionMarkerClassName: 'h-5 w-5 shrink-0 rounded-md',
     shapeClassNames: {
         [ps_skeleton_shape_1.PsSkeletonShape.Badge]: controlRadius,
         [ps_skeleton_shape_1.PsSkeletonShape.Block]: controlRadius,

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

@@ -2,4 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsButtonBaseClassName, PsButtonSizeClassNames, PsButtonVariantClassNames, } from '../constants/ps-button-classes.js';
 import { PsSpinner } from './ps-spinner.js';
-export const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => (_jsxs("button", { className: PallasoftClassNameService.merge(PsButtonBaseClassName, 'disabled:cursor-not-allowed disabled:opacity-50', PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', PsButtonVariantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));
+export const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => (_jsxs("button", { className: PallasoftClassNameService.merge(PsButtonBaseClassName, isLoading && disabled !== true
+        ? 'cursor-progress'
+        : 'disabled:cursor-not-allowed disabled:opacity-50', PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', PsButtonVariantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));

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

@@ -1,13 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, scrollResetKey, sidebar, sidebarWidth = '17rem', topbar, }) => {
+import { usePsScrollRestoration } from '../hooks/use-ps-scroll-restoration.js';
+export const PsReflectiveAppShell = ({ children, className, contentClassName, frameClassName, scrollPreventReset, scrollResetKey, scrollRestoreKey, sidebar, sidebarWidth = '17rem', topbar, }) => {
     const contentRef = useRef(null);
+    usePsScrollRestoration({
+        elementRef: contentRef,
+        preventScrollReset: scrollPreventReset,
+        resetKey: scrollResetKey,
+        restoreKey: scrollRestoreKey,
+    });
     useLayoutEffect(() => {
-        if (scrollResetKey === undefined)
+        if (scrollResetKey === undefined || scrollRestoreKey !== undefined)
             return;
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
-    }, [scrollResetKey]);
+    }, [scrollResetKey, scrollRestoreKey]);
     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-scroll-restoration.js

@@ -0,0 +1,5 @@
+import { usePsScrollRestoration } from '../hooks/use-ps-scroll-restoration.js';
+export const PsScrollRestoration = ({ preventScrollReset, resetKey, restoreKey, }) => {
+    usePsScrollRestoration({ preventScrollReset, resetKey, restoreKey });
+    return null;
+};

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

@@ -4,7 +4,8 @@ import { PsSkeletonConfig } from '../constants/ps-skeleton-config.js';
 import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
 import { PsSkeleton } from './ps-skeleton.js';
 import { PsSkeletonGroup } from './ps-skeleton-group.js';
-export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rows = 6, }) => {
+export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rowLayout, rows = 6, }) => {
+    const layout = rowLayout === undefined ? Array.from({ length: rows }, () => ({})) : rowLayout;
     const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
     const isRight = (columnIndex) => alignments !== undefined
         ? alignments[columnIndex] === 'right'
@@ -14,5 +15,17 @@ export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter
             : 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.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] })] }));
+                    : '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))) }), layout.map((row, rowIndex) => {
+                        const isSection = row.isSection === true;
+                        const depth = row.depth === undefined ? 0 : row.depth;
+                        return (_jsx("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => {
+                                if (isSection && columnIndex > 0 && !isRight(columnIndex))
+                                    return _jsx("span", {}, columnIndex);
+                                if (columnIndex > 0 || (depth === 0 && !isSection))
+                                    return cell(rowIndex, columnIndex, isSection);
+                                return (_jsxs("div", { className: 'flex min-w-0 items-center gap-3', style: {
+                                        paddingInlineStart: `${depth * PsSkeletonConfig.tableIndentRem}rem`,
+                                    }, children: [isSection ? (_jsx(PsSkeleton, { className: PsSkeletonConfig.tableSectionMarkerClassName })) : null, cell(rowIndex, columnIndex, isSection)] }, columnIndex));
+                            }) }, 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(layout.length, columnIndex, true)) })) : null] })] }));
 };

package/dist/esm/constants/ps-flag-param-value.js

@@ -0,0 +1,3 @@
+export const PsFlagParamValue = {
+    on: '1',
+};

package/dist/esm/constants/ps-query-param-config.js

@@ -0,0 +1,3 @@
+export const PsQueryParamConfig = {
+    setOptions: { preventScrollReset: true, replace: true },
+};

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

@@ -0,0 +1,3 @@
+export const PsRerenderConfig = {
+    maxTimerMs: 2147483647,
+};

package/dist/esm/constants/ps-scroll-restoration-config.js

@@ -0,0 +1,10 @@
+export const PsScrollRestorationConfig = {
+    elementScope: 'element:',
+    inputEvents: ['wheel', 'touchstart', 'keydown', 'mousedown'],
+    maxEntries: 100,
+    persistThrottleMs: 150,
+    restoreTimeoutMs: 4000,
+    storageKey: 'ps-scroll-restoration',
+    tolerancePx: 2,
+    windowScope: 'window:',
+};

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

@@ -17,6 +17,8 @@ export const PsSkeletonConfig = {
     tabWidthClassName: 'w-24',
     tabCount: 4,
     tableFrameClassName: 'rounded-[0.875rem]',
+    tableIndentRem: 1.25,
+    tableSectionMarkerClassName: 'h-5 w-5 shrink-0 rounded-md',
     shapeClassNames: {
         [PsSkeletonShape.Badge]: controlRadius,
         [PsSkeletonShape.Block]: controlRadius,

package/dist/esm/hooks/use-ps-browser-layout-effect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const usePsBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;

package/dist/esm/hooks/use-ps-choice-param.js

@@ -0,0 +1,6 @@
+import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
+import { PsQueryParamService } from '../services/ps-query-param-service.js';
+export const usePsChoiceParam = ([searchParams, setSearchParams], { fallback, name, options, resetParams }) => ({
+    onChange: (value) => setSearchParams((current) => PsQueryParamService.withChoice(current, name, value, fallback, resetParams), PsQueryParamConfig.setOptions),
+    value: PsQueryParamService.choice(searchParams.get(name), options, fallback),
+});

package/dist/esm/hooks/use-ps-flag-param.js

@@ -0,0 +1,6 @@
+import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
+import { PsQueryParamService } from '../services/ps-query-param-service.js';
+export const usePsFlagParam = ([searchParams, setSearchParams], { name, resetParams }) => ({
+    isOn: PsQueryParamService.flag(searchParams.get(name)),
+    onChange: (isOn) => setSearchParams((current) => PsQueryParamService.withFlag(current, name, isOn, resetParams), PsQueryParamConfig.setOptions),
+});

package/dist/esm/hooks/use-ps-rerender-at.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { PsRerenderConfig } from '../constants/ps-rerender-config.js';
+export const usePsRerenderAt = (atMs) => {
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (atMs === null || typeof window === 'undefined')
+            return;
+        let timer = 0;
+        const arm = () => {
+            const remaining = atMs - Date.now();
+            if (remaining <= 0) {
+                setTick((tick) => tick + 1);
+                return;
+            }
+            timer = window.setTimeout(arm, Math.min(remaining, PsRerenderConfig.maxTimerMs));
+        };
+        arm();
+        return () => window.clearTimeout(timer);
+    }, [atMs]);
+    return Date.now();
+};

package/dist/esm/hooks/use-ps-scroll-restoration.js

@@ -0,0 +1,103 @@
+import { useEffect, useRef } from 'react';
+import { PsScrollRestoreService } from '../services/ps-scroll-restore-service.js';
+import { PsScrollStorageService } from '../services/ps-scroll-storage-service.js';
+import { PsScrollTargetService } from '../services/ps-scroll-target-service.js';
+import { usePsBrowserLayoutEffect } from './use-ps-browser-layout-effect.js';
+export const usePsScrollRestoration = ({ elementRef, preventScrollReset, resetKey, restoreKey, }) => {
+    const keyRef = useRef(restoreKey);
+    const hasSavedRef = useRef(false);
+    const appliedKeyRef = useRef(undefined);
+    const appliedResetKeyRef = useRef(undefined);
+    const isRestoringRef = useRef(false);
+    const pendingRef = useRef(null);
+    const isEnabled = restoreKey !== undefined;
+    useEffect(() => {
+        if (!isEnabled ||
+            typeof window === 'undefined' ||
+            typeof history === 'undefined' ||
+            !('scrollRestoration' in history))
+            return;
+        const previous = history.scrollRestoration;
+        history.scrollRestoration = 'manual';
+        return () => {
+            history.scrollRestoration = previous;
+        };
+    }, [isEnabled]);
+    usePsBrowserLayoutEffect(() => {
+        keyRef.current = restoreKey;
+        if (typeof window === 'undefined')
+            return;
+        PsScrollStorageService.flush();
+        if (restoreKey === undefined)
+            return;
+        const element = elementRef === undefined ? null : elementRef.current;
+        const saved = PsScrollStorageService.read(PsScrollTargetService.storageKey(element, restoreKey));
+        hasSavedRef.current = saved !== undefined;
+        if (saved === undefined)
+            return;
+        isRestoringRef.current = true;
+        const stop = PsScrollRestoreService.start(element, saved, () => {
+            isRestoringRef.current = false;
+        });
+        return () => {
+            stop();
+            isRestoringRef.current = false;
+        };
+    }, [restoreKey, elementRef]);
+    usePsBrowserLayoutEffect(() => {
+        const previousKey = appliedKeyRef.current;
+        const previousResetKey = appliedResetKeyRef.current;
+        appliedKeyRef.current = restoreKey;
+        appliedResetKeyRef.current = resetKey;
+        if (restoreKey === undefined || typeof window === 'undefined')
+            return;
+        const hasChanged = previousResetKey !== undefined && previousResetKey !== resetKey;
+        const isRestored = previousKey !== restoreKey && hasSavedRef.current;
+        if (!hasChanged || isRestored || preventScrollReset === true)
+            return;
+        PsScrollTargetService.scrollTo(elementRef === undefined ? null : elementRef.current, 0);
+    }, [resetKey, restoreKey, elementRef, preventScrollReset]);
+    useEffect(() => {
+        if (!isEnabled || typeof window === 'undefined')
+            return;
+        const element = elementRef === undefined ? null : elementRef.current;
+        const target = PsScrollTargetService.eventTarget(element);
+        let frame = 0;
+        const flushPending = () => {
+            const pending = pendingRef.current;
+            pendingRef.current = null;
+            if (pending !== null)
+                PsScrollStorageService.write(pending.key, pending.top);
+        };
+        const onScroll = () => {
+            const key = keyRef.current;
+            if (key === undefined || isRestoringRef.current)
+                return;
+            pendingRef.current = {
+                key: PsScrollTargetService.storageKey(element, key),
+                top: PsScrollTargetService.top(element),
+            };
+            if (frame !== 0)
+                return;
+            frame = window.requestAnimationFrame(() => {
+                frame = 0;
+                flushPending();
+            });
+        };
+        const onPageHide = () => {
+            const key = keyRef.current;
+            pendingRef.current = null;
+            if (key !== undefined && !isRestoringRef.current)
+                PsScrollStorageService.write(PsScrollTargetService.storageKey(element, key), PsScrollTargetService.top(element));
+            PsScrollStorageService.flush();
+        };
+        target.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('pagehide', onPageHide);
+        return () => {
+            target.removeEventListener('scroll', onScroll);
+            window.removeEventListener('pagehide', onPageHide);
+            window.cancelAnimationFrame(frame);
+            flushPending();
+        };
+    }, [isEnabled, elementRef]);
+};

package/dist/esm/index.js

@@ -59,6 +59,7 @@ export * from './components/ps-skeleton.js';
 export * from './services/ps-scroll-lock-service.js';
 export * from './services/ps-skeleton-class-service.js';
 export * from './models/ps-skeleton-size.js';
+export * from './models/ps-skeleton-table-row.js';
 export * from './constants/ps-skeleton-shape.js';
 export * from './components/ps-skeleton-card.js';
 export * from './components/ps-skeleton-group.js';
@@ -192,3 +193,27 @@ export * from './components/ps-divider.js';
 export * from './models/ps-divider-orientation.js';
 export * from './components/ps-rating-display.js';
 export * from './constants/ps-rating-display-size.js';
+export * from './constants/ps-scroll-restoration-config.js';
+export * from './models/ps-scroll-offsets-data.js';
+export * from './models/ps-scroll-restoration-options.js';
+export * from './services/ps-scroll-storage-service.js';
+export * from './services/ps-scroll-target-service.js';
+export * from './services/ps-scroll-restore-service.js';
+export * from './hooks/use-ps-scroll-restoration.js';
+export * from './components/ps-scroll-restoration.js';
+export * from './hooks/use-ps-browser-layout-effect.js';
+export * from './models/ps-scroll-pending-save-data.js';
+export * from './constants/ps-flag-param-value.js';
+export * from './constants/ps-query-param-config.js';
+export * from './models/ps-search-params-set-options.js';
+export * from './models/ps-search-params-setter.js';
+export * from './models/ps-search-params-state.js';
+export * from './models/ps-choice-param-data.js';
+export * from './models/ps-flag-param-data.js';
+export * from './models/ps-choice-param-options.js';
+export * from './models/ps-flag-param-options.js';
+export * from './services/ps-query-param-service.js';
+export * from './hooks/use-ps-choice-param.js';
+export * from './hooks/use-ps-flag-param.js';
+export * from './constants/ps-rerender-config.js';
+export * from './hooks/use-ps-rerender-at.js';

package/dist/esm/models/ps-choice-param-data.js

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

package/dist/esm/models/ps-choice-param-options.js

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

package/dist/esm/models/ps-flag-param-data.js

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

package/dist/esm/models/ps-flag-param-options.js

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

package/dist/esm/models/ps-scroll-offsets-data.js

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

package/dist/esm/models/ps-scroll-pending-save-data.js

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

package/dist/esm/models/ps-scroll-restoration-options.js

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

package/dist/esm/models/ps-search-params-set-options.js

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

package/dist/esm/models/ps-search-params-setter.js

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

package/dist/esm/models/ps-search-params-state.js

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

package/dist/esm/models/ps-skeleton-table-row.js

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

package/dist/esm/services/ps-query-param-service.js

@@ -0,0 +1,32 @@
+import { PsFlagParamValue } from '../constants/ps-flag-param-value.js';
+export class PsQueryParamService {
+    static choice(value, options, fallback) {
+        const match = options.find((option) => option === value);
+        return match === undefined ? fallback : match;
+    }
+    static withChoice(params, name, value, fallback, resetParams = []) {
+        const next = PsQueryParamService.cleared(params, resetParams);
+        if (value === fallback)
+            next.delete(name);
+        else
+            next.set(name, value);
+        return next;
+    }
+    static flag(value) {
+        return value === PsFlagParamValue.on;
+    }
+    static withFlag(params, name, isOn, resetParams = []) {
+        const next = PsQueryParamService.cleared(params, resetParams);
+        if (isOn)
+            next.set(name, PsFlagParamValue.on);
+        else
+            next.delete(name);
+        return next;
+    }
+    static cleared(params, resetParams) {
+        const next = new URLSearchParams(params);
+        for (const name of resetParams)
+            next.delete(name);
+        return next;
+    }
+}