@pallasoft/ps-core-components 2.46.0 → 2.47.0

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

@@ -4,6 +4,7 @@ export interface PsDataBoundaryProps<Data> {
     AwaitComponent: ElementType;
     children: (data: Data, isPending: boolean) => ReactNode;
     className?: string;
+    dimWhenPending?: boolean;
     errorElement: ReactNode;
     fallback: ReactNode;
     resolve: Promise<Data>;
@@ -11,4 +12,4 @@ export interface PsDataBoundaryProps<Data> {
     retainKey?: string;
     variant?: PsDataBoundaryVariant;
 }
-export declare const PsDataBoundary: <Data>({ AwaitComponent, children, className, errorElement, fallback, resolve, retain, retainKey, variant, }: PsDataBoundaryProps<Data>) => import("react").JSX.Element;
+export declare const PsDataBoundary: <Data>({ AwaitComponent, children, className, dimWhenPending, errorElement, fallback, resolve, retain, retainKey, variant, }: PsDataBoundaryProps<Data>) => import("react").JSX.Element;

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 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 PsDataBoundary = ({ AwaitComponent, children, className, dimWhenPending = false, 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;
@@ -14,6 +14,6 @@ const PsDataBoundary = ({ AwaitComponent, children, className, errorElement, fal
     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 }));
+    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 && dimWhenPending ? ps_data_boundary_config_1.PsDataBoundaryConfig.pendingClassName : null, className), children: content }));
 };
 exports.PsDataBoundary = PsDataBoundary;

package/dist/components/ps-empty-value.d.ts

@@ -0,0 +1,5 @@
+export interface PsEmptyValueProps {
+    className?: string;
+    label: string;
+}
+export declare const PsEmptyValue: ({ className, label }: PsEmptyValueProps) => import("react").JSX.Element;

package/dist/components/ps-empty-value.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsEmptyValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_empty_value_config_1 = require("../constants/ps-empty-value-config");
+const PsEmptyValue = ({ className, label }) => ((0, jsx_runtime_1.jsxs)("span", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_empty_value_config_1.PsEmptyValueConfig.className, className), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": 'true', children: ps_empty_value_config_1.PsEmptyValueConfig.symbol }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: label })] }));
+exports.PsEmptyValue = PsEmptyValue;

package/dist/components/ps-image.d.ts

@@ -0,0 +1,14 @@
+import { type ImgHTMLAttributes, type ReactNode } from 'react';
+import type { PsImageFit } from '../constants/ps-image-fit';
+export interface PsImageProps {
+    alt: string;
+    className?: string;
+    errorFallback?: ReactNode;
+    fit?: PsImageFit;
+    height?: number | string;
+    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
+    radius?: string;
+    src: string;
+    width?: number | string;
+}
+export declare const PsImage: ({ alt, className, errorFallback, fit, height, loading, radius, src, width, }: PsImageProps) => import("react").JSX.Element | null;

package/dist/components/ps-image.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsImage = 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 ps_image_config_1 = require("../constants/ps-image-config");
+const ps_image_status_1 = require("../constants/ps-image-status");
+const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
+const use_ps_browser_layout_effect_1 = require("../hooks/use-ps-browser-layout-effect");
+const ps_image_service_1 = require("../services/ps-image-service");
+const ps_skeleton_1 = require("./ps-skeleton");
+const PsImage = ({ alt, className, errorFallback, fit, height, loading, radius, src, width, }) => {
+    const element = (0, react_1.useRef)(null);
+    const [state, setState] = (0, react_1.useState)({ src, status: ps_image_status_1.PsImageStatus.Loading });
+    const status = ps_image_service_1.PsImageService.resolve(state, src);
+    (0, use_ps_browser_layout_effect_1.usePsBrowserLayoutEffect)(() => {
+        if (element.current === null)
+            return;
+        const found = ps_image_service_1.PsImageService.statusOf(element.current);
+        if (found !== ps_image_status_1.PsImageStatus.Loading)
+            setState({ src, status: found });
+    }, [src]);
+    if (status === ps_image_status_1.PsImageStatus.Error)
+        return errorFallback === undefined ? null : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: errorFallback });
+    const isLoaded = status === ps_image_status_1.PsImageStatus.Loaded;
+    return ((0, jsx_runtime_1.jsxs)("span", { className: ps_image_config_1.PsImageConfig.rootClassName, style: { borderRadius: radius }, children: [isLoaded ? null : ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_image_config_1.PsImageConfig.skeletonClassName, shape: ps_skeleton_shape_1.PsSkeletonShape.Block })), (0, jsx_runtime_1.jsx)("img", { alt: alt, className: ps_design_system_1.PallasoftClassNameService.merge(ps_image_config_1.PsImageConfig.imageClassName, isLoaded ? ps_image_config_1.PsImageConfig.loadedClassName : ps_image_config_1.PsImageConfig.hiddenClassName, className), decoding: 'async', height: height, loading: loading, onError: () => setState({ src, status: ps_image_status_1.PsImageStatus.Error }), onLoad: () => setState({ src, status: ps_image_status_1.PsImageStatus.Loaded }), ref: element, src: src, style: fit === undefined ? undefined : { objectFit: fit }, width: width })] }));
+};
+exports.PsImage = PsImage;

package/dist/components/ps-signed-value.d.ts

@@ -0,0 +1,6 @@
+export interface PsSignedValueProps {
+    className?: string;
+    format?: (value: string) => string;
+    value: string;
+}
+export declare const PsSignedValue: ({ className, format, value }: PsSignedValueProps) => import("react").JSX.Element;

package/dist/components/ps-signed-value.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSignedValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_signed_value_classes_1 = require("../constants/ps-signed-value-classes");
+const ps_signed_value_service_1 = require("../services/ps-signed-value-service");
+const PsSignedValue = ({ className, format, value }) => ((0, jsx_runtime_1.jsx)("span", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_signed_value_classes_1.PsSignedValueClasses[ps_signed_value_service_1.PsSignedValueService.direction(value)], className), children: ps_signed_value_service_1.PsSignedValueService.text(value, format) }));
+exports.PsSignedValue = PsSignedValue;

package/dist/constants/ps-empty-value-config.d.ts

@@ -0,0 +1,4 @@
+export declare const PsEmptyValueConfig: {
+    readonly className: "text-ink/40";
+    readonly symbol: "—";
+};

package/dist/constants/ps-empty-value-config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsEmptyValueConfig = void 0;
+exports.PsEmptyValueConfig = {
+    className: 'text-ink/40',
+    symbol: '—',
+};

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

@@ -0,0 +1,7 @@
+export declare const PsImageConfig: {
+    readonly hiddenClassName: "opacity-0";
+    readonly imageClassName: "col-start-1 row-start-1";
+    readonly loadedClassName: "opacity-100 animate-ps-fade-in motion-reduce:animate-none";
+    readonly rootClassName: "inline-grid shrink-0 max-w-full overflow-hidden align-middle";
+    readonly skeletonClassName: "col-start-1 row-start-1 h-full w-full rounded-[inherit]";
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsImageConfig = void 0;
+exports.PsImageConfig = {
+    hiddenClassName: 'opacity-0',
+    imageClassName: 'col-start-1 row-start-1',
+    loadedClassName: 'opacity-100 animate-ps-fade-in motion-reduce:animate-none',
+    rootClassName: 'inline-grid shrink-0 max-w-full overflow-hidden align-middle',
+    skeletonClassName: 'col-start-1 row-start-1 h-full w-full rounded-[inherit]',
+};

package/dist/constants/ps-image-fit.d.ts

@@ -0,0 +1,7 @@
+export declare enum PsImageFit {
+    Contain = "contain",
+    Cover = "cover",
+    Fill = "fill",
+    None = "none",
+    ScaleDown = "scale-down"
+}

package/dist/constants/ps-image-fit.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsImageFit = void 0;
+var PsImageFit;
+(function (PsImageFit) {
+    PsImageFit["Contain"] = "contain";
+    PsImageFit["Cover"] = "cover";
+    PsImageFit["Fill"] = "fill";
+    PsImageFit["None"] = "none";
+    PsImageFit["ScaleDown"] = "scale-down";
+})(PsImageFit || (exports.PsImageFit = PsImageFit = {}));

package/dist/constants/ps-image-status.d.ts

@@ -0,0 +1,5 @@
+export declare enum PsImageStatus {
+    Error = "error",
+    Loaded = "loaded",
+    Loading = "loading"
+}

package/dist/constants/ps-image-status.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsImageStatus = void 0;
+var PsImageStatus;
+(function (PsImageStatus) {
+    PsImageStatus["Error"] = "error";
+    PsImageStatus["Loaded"] = "loaded";
+    PsImageStatus["Loading"] = "loading";
+})(PsImageStatus || (exports.PsImageStatus = PsImageStatus = {}));

package/dist/constants/ps-signed-value-classes.d.ts

@@ -0,0 +1,2 @@
+import { AmountDirection } from '@pallasoft/ps-utilities';
+export declare const PsSignedValueClasses: Record<AmountDirection, string>;

package/dist/constants/ps-signed-value-classes.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsSignedValueClasses = void 0;
+const ps_utilities_1 = require("@pallasoft/ps-utilities");
+exports.PsSignedValueClasses = {
+    [ps_utilities_1.AmountDirection.In]: 'tabular-nums text-success',
+    [ps_utilities_1.AmountDirection.Neutral]: 'tabular-nums text-ink',
+    [ps_utilities_1.AmountDirection.Out]: 'tabular-nums text-danger',
+};

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

@@ -3,7 +3,7 @@ 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, }) => {
+export const PsDataBoundary = ({ AwaitComponent, children, className, dimWhenPending = false, 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;
@@ -11,5 +11,5 @@ export const PsDataBoundary = ({ AwaitComponent, children, className, errorEleme
     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 }));
+    return (_jsx("div", { "aria-busy": isPending, className: PallasoftClassNameService.merge(PsDataBoundaryConfig.sectionClassName, isPending && dimWhenPending ? PsDataBoundaryConfig.pendingClassName : null, className), children: content }));
 };

package/dist/esm/components/ps-empty-value.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsEmptyValueConfig } from '../constants/ps-empty-value-config.js';
+export const PsEmptyValue = ({ className, label }) => (_jsxs("span", { className: PallasoftClassNameService.merge(PsEmptyValueConfig.className, className), children: [_jsx("span", { "aria-hidden": 'true', children: PsEmptyValueConfig.symbol }), _jsx("span", { className: 'sr-only', children: label })] }));

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

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsImageConfig } from '../constants/ps-image-config.js';
+import { PsImageStatus } from '../constants/ps-image-status.js';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { usePsBrowserLayoutEffect } from '../hooks/use-ps-browser-layout-effect.js';
+import { PsImageService } from '../services/ps-image-service.js';
+import { PsSkeleton } from './ps-skeleton.js';
+export const PsImage = ({ alt, className, errorFallback, fit, height, loading, radius, src, width, }) => {
+    const element = useRef(null);
+    const [state, setState] = useState({ src, status: PsImageStatus.Loading });
+    const status = PsImageService.resolve(state, src);
+    usePsBrowserLayoutEffect(() => {
+        if (element.current === null)
+            return;
+        const found = PsImageService.statusOf(element.current);
+        if (found !== PsImageStatus.Loading)
+            setState({ src, status: found });
+    }, [src]);
+    if (status === PsImageStatus.Error)
+        return errorFallback === undefined ? null : _jsx(_Fragment, { children: errorFallback });
+    const isLoaded = status === PsImageStatus.Loaded;
+    return (_jsxs("span", { className: PsImageConfig.rootClassName, style: { borderRadius: radius }, children: [isLoaded ? null : (_jsx(PsSkeleton, { className: PsImageConfig.skeletonClassName, shape: PsSkeletonShape.Block })), _jsx("img", { alt: alt, className: PallasoftClassNameService.merge(PsImageConfig.imageClassName, isLoaded ? PsImageConfig.loadedClassName : PsImageConfig.hiddenClassName, className), decoding: 'async', height: height, loading: loading, onError: () => setState({ src, status: PsImageStatus.Error }), onLoad: () => setState({ src, status: PsImageStatus.Loaded }), ref: element, src: src, style: fit === undefined ? undefined : { objectFit: fit }, width: width })] }));
+};

package/dist/esm/components/ps-signed-value.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsSignedValueClasses } from '../constants/ps-signed-value-classes.js';
+import { PsSignedValueService } from '../services/ps-signed-value-service.js';
+export const PsSignedValue = ({ className, format, value }) => (_jsx("span", { className: PallasoftClassNameService.merge(PsSignedValueClasses[PsSignedValueService.direction(value)], className), children: PsSignedValueService.text(value, format) }));

package/dist/esm/constants/ps-empty-value-config.js

@@ -0,0 +1,4 @@
+export const PsEmptyValueConfig = {
+    className: 'text-ink/40',
+    symbol: '—',
+};

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

@@ -0,0 +1,7 @@
+export const PsImageConfig = {
+    hiddenClassName: 'opacity-0',
+    imageClassName: 'col-start-1 row-start-1',
+    loadedClassName: 'opacity-100 animate-ps-fade-in motion-reduce:animate-none',
+    rootClassName: 'inline-grid shrink-0 max-w-full overflow-hidden align-middle',
+    skeletonClassName: 'col-start-1 row-start-1 h-full w-full rounded-[inherit]',
+};

package/dist/esm/constants/ps-image-fit.js

@@ -0,0 +1,8 @@
+export var PsImageFit;
+(function (PsImageFit) {
+    PsImageFit["Contain"] = "contain";
+    PsImageFit["Cover"] = "cover";
+    PsImageFit["Fill"] = "fill";
+    PsImageFit["None"] = "none";
+    PsImageFit["ScaleDown"] = "scale-down";
+})(PsImageFit || (PsImageFit = {}));

package/dist/esm/constants/ps-image-status.js

@@ -0,0 +1,6 @@
+export var PsImageStatus;
+(function (PsImageStatus) {
+    PsImageStatus["Error"] = "error";
+    PsImageStatus["Loaded"] = "loaded";
+    PsImageStatus["Loading"] = "loading";
+})(PsImageStatus || (PsImageStatus = {}));

package/dist/esm/constants/ps-signed-value-classes.js

@@ -0,0 +1,6 @@
+import { AmountDirection } from '@pallasoft/ps-utilities';
+export const PsSignedValueClasses = {
+    [AmountDirection.In]: 'tabular-nums text-success',
+    [AmountDirection.Neutral]: 'tabular-nums text-ink',
+    [AmountDirection.Out]: 'tabular-nums text-danger',
+};

package/dist/esm/hooks/use-ps-cursor-pages.js

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsCursorPagesService } from '../services/ps-cursor-pages-service.js';
+import { PsRemoteReadService } from '../services/ps-remote-read-service.js';
+export const usePsCursorPages = (input) => {
+    const { reloadKey } = input;
+    const firstUrl = input.url(null);
+    const [state, setState] = useState(() => PsCursorPagesService.initialState());
+    const inputRef = useRef(input);
+    const stateRef = useRef(state);
+    const inflight = useRef(null);
+    inputRef.current = input;
+    stateRef.current = state;
+    useEffect(() => {
+        setState((current) => (current.isLoadingMore ? { ...current, isLoadingMore: false } : current));
+        if (firstUrl === null)
+            return;
+        const controller = new AbortController();
+        inflight.current = controller;
+        PsRemoteReadService.read(firstUrl, inputRef.current.parse, controller.signal).then((page) => {
+            if (controller.signal.aborted)
+                return;
+            inflight.current = null;
+            setState({
+                error: null,
+                hasMore: PsCursorPagesService.hasMore(page.length, inputRef.current.pageSize),
+                isLoadingMore: false,
+                rows: page,
+                settled: { reloadKey, url: firstUrl },
+            });
+        }, (failure) => {
+            if (controller.signal.aborted)
+                return;
+            inflight.current = null;
+            setState({
+                error: failure,
+                hasMore: false,
+                isLoadingMore: false,
+                rows: [],
+                settled: { reloadKey, url: firstUrl },
+            });
+        });
+        return () => {
+            controller.abort();
+            inflight.current = null;
+        };
+    }, [firstUrl, reloadKey]);
+    const loadMore = useCallback(() => {
+        const current = stateRef.current;
+        const latest = inputRef.current;
+        if (!current.hasMore || inflight.current !== null)
+            return;
+        const nextUrl = latest.url(latest.cursorOf(current.rows));
+        if (nextUrl === null)
+            return;
+        const controller = new AbortController();
+        inflight.current = controller;
+        setState((existing) => ({ ...existing, error: null, isLoadingMore: true }));
+        PsRemoteReadService.read(nextUrl, latest.parse, controller.signal).then((page) => {
+            if (controller.signal.aborted)
+                return;
+            inflight.current = null;
+            setState((existing) => ({
+                ...existing,
+                hasMore: PsCursorPagesService.hasMore(page.length, inputRef.current.pageSize),
+                isLoadingMore: false,
+                rows: PsCursorPagesService.append(existing.rows, page, inputRef.current.keyOf),
+            }));
+        }, (failure) => {
+            if (controller.signal.aborted)
+                return;
+            inflight.current = null;
+            setState((existing) => ({ ...existing, error: failure, isLoadingMore: false }));
+        });
+    }, []);
+    return {
+        error: state.error,
+        hasMore: state.hasMore,
+        isLoading: PsRemoteReadService.isPending(state.settled, firstUrl, reloadKey) || state.isLoadingMore,
+        loadMore,
+        rows: state.rows,
+    };
+};

package/dist/esm/hooks/use-ps-draft-state.js

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+import { PsDraftStateService } from '../services/ps-draft-state-service.js';
+export const usePsDraftState = (initial, options) => {
+    const [state, setState] = useState(() => PsDraftStateService.fresh(initial));
+    const isCurrent = PsDraftStateService.isEqual(initial, state.baseline, options);
+    if (!isCurrent)
+        setState(PsDraftStateService.fresh(initial));
+    const setValue = useCallback((next) => setState((current) => ({ ...current, value: next })), []);
+    const update = useCallback((updater) => setState((current) => ({ ...current, value: updater(current.value) })), []);
+    const reset = useCallback(() => setState((current) => ({ ...current, value: structuredClone(current.baseline) })), []);
+    return {
+        isDirty: !PsDraftStateService.isEqual(state.value, state.baseline, options),
+        reset,
+        setValue,
+        update,
+        value: state.value,
+    };
+};

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

@@ -4,7 +4,7 @@ import { PsOptimisticReleaseService } from '../services/ps-optimistic-release-se
 export const usePsOptimisticRows = ({ apply, isHolding = false, isSaving, rows, }) => {
     const [remembered, setRemembered] = useState(() => PsOptimisticReleaseService.empty(rows));
     const isActive = isSaving || isHolding;
-    const current = PsOptimisticReleaseService.next(remembered, rows, isActive, apply);
+    const current = PsOptimisticReleaseService.next(remembered, rows, isActive, isHolding, apply);
     if (current !== remembered)
         setRemembered(current);
     const { changes } = current;
@@ -21,6 +21,7 @@ export const usePsOptimisticRows = ({ apply, isHolding = false, isSaving, rows,
         changes: [...previous.changes, change],
         drainBase: null,
         wasActive: previous.wasActive,
+        wasHolding: previous.wasHolding,
     })), [rows]);
     const forgetLast = useCallback(() => setRemembered((previous) => ({ ...previous, changes: previous.changes.slice(0, -1) })), []);
     const rollback = useCallback(() => setRemembered(PsOptimisticReleaseService.empty(rows)), [rows]);

package/dist/esm/hooks/use-ps-remote-read.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+import { PsRemoteReadService } from '../services/ps-remote-read-service.js';
+export const usePsRemoteRead = ({ parse, reloadKey, url, }) => {
+    const [state, setState] = useState(() => PsRemoteReadService.initialState());
+    const parseRef = useRef(parse);
+    parseRef.current = parse;
+    useEffect(() => {
+        if (url === null)
+            return;
+        const controller = new AbortController();
+        PsRemoteReadService.read(url, parseRef.current, controller.signal).then((data) => {
+            if (controller.signal.aborted)
+                return;
+            setState({ data, error: null, settled: { reloadKey, url } });
+        }, (failure) => {
+            if (controller.signal.aborted)
+                return;
+            setState((current) => ({
+                data: current.data,
+                error: failure,
+                settled: { reloadKey, url },
+            }));
+        });
+        return () => controller.abort();
+    }, [reloadKey, url]);
+    return {
+        data: state.data,
+        error: state.error,
+        isLoading: PsRemoteReadService.isPending(state.settled, url, reloadKey),
+    };
+};

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

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
+import { PsQueryParamService } from '../services/ps-query-param-service.js';
+import { usePsDebouncedValue } from './use-ps-debounced-value.js';
+export const usePsTextParam = ([searchParams, setSearchParams], { debounceMs, name, resetParams }) => {
+    const raw = searchParams.get(name);
+    const committed = raw === null ? '' : raw;
+    const [value, setValue] = useState(committed);
+    const settled = usePsDebouncedValue(value, debounceMs);
+    useEffect(() => {
+        if (settled === committed)
+            return;
+        setSearchParams((current) => PsQueryParamService.withChoice(current, name, settled, '', resetParams), PsQueryParamConfig.setOptions);
+    }, [settled]);
+    return { committed, onChange: setValue, value };
+};

package/dist/esm/index.js

@@ -228,3 +228,33 @@ 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';
+export * from './models/ps-remote-settled-data.js';
+export * from './models/ps-remote-read-state.js';
+export * from './interfaces/ps-remote-read-input.js';
+export * from './interfaces/ps-remote-read-result.js';
+export * from './services/ps-remote-read-service.js';
+export * from './hooks/use-ps-remote-read.js';
+export * from './interfaces/ps-cursor-pages-input.js';
+export * from './interfaces/ps-cursor-pages-result.js';
+export * from './models/ps-cursor-pages-state.js';
+export * from './services/ps-cursor-pages-service.js';
+export * from './hooks/use-ps-cursor-pages.js';
+export * from './models/ps-text-param-options.js';
+export * from './models/ps-text-param-data.js';
+export * from './hooks/use-ps-text-param.js';
+export * from './interfaces/ps-draft-state-options.js';
+export * from './interfaces/ps-draft-state-result.js';
+export * from './models/ps-draft-state-data.js';
+export * from './services/ps-draft-state-service.js';
+export * from './hooks/use-ps-draft-state.js';
+export * from './constants/ps-empty-value-config.js';
+export * from './components/ps-empty-value.js';
+export * from './constants/ps-signed-value-classes.js';
+export * from './services/ps-signed-value-service.js';
+export * from './components/ps-signed-value.js';
+export * from './constants/ps-image-status.js';
+export * from './constants/ps-image-fit.js';
+export * from './constants/ps-image-config.js';
+export * from './models/ps-image-state-data.js';
+export * from './services/ps-image-service.js';
+export * from './components/ps-image.js';

package/dist/esm/interfaces/ps-cursor-pages-input.js

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

package/dist/esm/interfaces/ps-cursor-pages-result.js

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

package/dist/esm/interfaces/ps-draft-state-options.js

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

package/dist/esm/interfaces/ps-draft-state-result.js

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

package/dist/esm/interfaces/ps-remote-read-input.js

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

package/dist/esm/interfaces/ps-remote-read-result.js

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

package/dist/esm/models/ps-cursor-pages-state.js

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

package/dist/esm/models/ps-draft-state-data.js

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

package/dist/esm/models/ps-image-state-data.js

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

package/dist/esm/models/ps-remote-read-state.js

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

package/dist/esm/models/ps-remote-settled-data.js

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

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

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

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

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

package/dist/esm/services/ps-cursor-pages-service.js

@@ -0,0 +1,14 @@
+export class PsCursorPagesService {
+    static append(existing, page, keyOf) {
+        if (keyOf === undefined)
+            return [...existing, ...page];
+        const known = new Set(existing.map(keyOf));
+        return [...existing, ...page.filter((row) => !known.has(keyOf(row)))];
+    }
+    static hasMore(pageLength, pageSize) {
+        return pageLength >= pageSize;
+    }
+    static initialState() {
+        return { error: null, hasMore: false, isLoadingMore: false, rows: [], settled: null };
+    }
+}

package/dist/esm/services/ps-draft-state-service.js

@@ -0,0 +1,11 @@
+import { PsDeepEqualService } from './ps-deep-equal-service.js';
+export class PsDraftStateService {
+    static fresh(initial) {
+        return { baseline: initial, value: structuredClone(initial) };
+    }
+    static isEqual(left, right, options) {
+        if (options !== undefined && options.isEqual !== undefined)
+            return options.isEqual(left, right);
+        return PsDeepEqualService.isEqual(left, right);
+    }
+}

package/dist/esm/services/ps-image-service.js

@@ -0,0 +1,11 @@
+import { PsImageStatus } from '../constants/ps-image-status.js';
+export class PsImageService {
+    static resolve(state, src) {
+        return state.src === src ? state.status : PsImageStatus.Loading;
+    }
+    static statusOf(element) {
+        if (!element.complete)
+            return PsImageStatus.Loading;
+        return element.naturalWidth > 0 ? PsImageStatus.Loaded : PsImageStatus.Error;
+    }
+}