@pallasoft/ps-core-components 2.27.0 → 2.29.0

package/dist/components/ps-overview-card.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface PsOverviewCardProps {
+    action?: ReactNode;
+    badge?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+    icon?: ReactNode;
+    summary?: string;
+    title: string;
+}
+export declare const PsOverviewCard: ({ action, badge, children, className, footer, icon, summary, title, }: PsOverviewCardProps) => import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsOverviewCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsOverviewCard = ({ action, badge, children, className, footer, icon, summary, title, }) => ((0, jsx_runtime_1.jsxs)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-4 rounded-ps-panel border border-line bg-surface p-5', className), children: [(0, jsx_runtime_1.jsxs)("header", { className: 'flex min-w-0 items-start gap-3', children: [icon ? (0, jsx_runtime_1.jsx)("span", { className: 'ps-icon-surface h-10 w-10 shrink-0', children: icon }) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [(0, jsx_runtime_1.jsx)("h2", { className: 'text-base font-semibold text-ink', children: title }), badge] }), summary ? (0, jsx_runtime_1.jsx)("p", { className: 'break-words text-sm leading-6 text-ink/60', children: summary }) : null] }), action ? (0, jsx_runtime_1.jsx)("div", { className: 'flex shrink-0 items-center gap-2', children: action }) : null] }), children ? (0, jsx_runtime_1.jsx)("div", { className: 'flex min-w-0 flex-col gap-1', children: children }) : null, footer ? (0, jsx_runtime_1.jsx)("div", { className: 'flex flex-wrap items-center gap-2', children: footer }) : null] }));
+exports.PsOverviewCard = PsOverviewCard;

package/dist/components/ps-rating-display.d.ts

@@ -0,0 +1,9 @@
+import { PsRatingDisplaySize } from '../constants/ps-rating-display-size';
+export interface PsRatingDisplayProps {
+    className?: string;
+    label: string;
+    max?: number;
+    score: number;
+    size?: PsRatingDisplaySize;
+}
+export declare const PsRatingDisplay: ({ className, label, max, score, size, }: PsRatingDisplayProps) => import("react").JSX.Element;

package/dist/components/ps-rating-display.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRatingDisplay = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const ps_rating_display_config_1 = require("../constants/ps-rating-display-config");
+const ps_rating_display_size_1 = require("../constants/ps-rating-display-size");
+const PsRatingDisplay = ({ className, label, max = ps_rating_display_config_1.PsRatingDisplayConfig.defaultMax, score, size = ps_rating_display_size_1.PsRatingDisplaySize.Medium, }) => ((0, jsx_runtime_1.jsx)("div", { "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('flex items-center gap-1', className), role: 'img', children: Array.from({ length: max }, (_, index) => index + 1).map((value) => ((0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { className: ps_design_system_1.PallasoftClassNameService.merge(ps_rating_display_config_1.PsRatingDisplayConfig.iconClassNames[size], value <= score
+            ? ps_rating_display_config_1.PsRatingDisplayConfig.filledClassName
+            : ps_rating_display_config_1.PsRatingDisplayConfig.emptyClassName), iconKey: ps_icons_1.PsIconKey.Star }, value))) }));
+exports.PsRatingDisplay = PsRatingDisplay;

package/dist/components/ps-sortable-list.d.ts

@@ -19,4 +19,4 @@ export interface PsSortableListRowProps<TItem extends PsSortableListItem> {
     item: TItem;
     renderItem: (options: PsSortableListRenderOptions<TItem>) => JSX.Element | null;
 }
-export declare const PsSortableList: <TItem extends PsSortableListItem>({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }: PsSortableListProps<TItem>) => JSX.Element;
+export declare const PsSortableList: <TItem extends PsSortableListItem>({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal, role, items, onMove, renderItem, }: PsSortableListProps<TItem>) => JSX.Element;

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

@@ -30,7 +30,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
             transition: isReduced ? undefined : transition,
         }, children: rendered }));
 };
-const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }) => {
+const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
     const [activeId, setActiveId] = (0, react_1.useState)(null);
     const sensors = (0, use_ps_drag_sensors_1.usePsDragSensors)();
     const activeIndex = items.findIndex((item) => item.id === activeId);
@@ -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: 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.PsDragListLiftFrames, 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-rating-display-config.d.ts

@@ -0,0 +1,10 @@
+export declare const PsRatingDisplayConfig: {
+    readonly defaultMax: 5;
+    readonly filledClassName: "fill-current text-primary";
+    readonly emptyClassName: "text-ink/30 dark:text-white/30";
+    readonly iconClassNames: {
+        readonly large: "h-8 w-8";
+        readonly medium: "h-6 w-6";
+        readonly small: "h-4 w-4";
+    };
+};

package/dist/constants/ps-rating-display-config.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRatingDisplayConfig = void 0;
+const ps_rating_display_size_1 = require("./ps-rating-display-size");
+exports.PsRatingDisplayConfig = {
+    defaultMax: 5,
+    filledClassName: 'fill-current text-primary',
+    emptyClassName: 'text-ink/30 dark:text-white/30',
+    iconClassNames: {
+        [ps_rating_display_size_1.PsRatingDisplaySize.Large]: 'h-8 w-8',
+        [ps_rating_display_size_1.PsRatingDisplaySize.Medium]: 'h-6 w-6',
+        [ps_rating_display_size_1.PsRatingDisplaySize.Small]: 'h-4 w-4',
+    },
+};

package/dist/constants/ps-rating-display-size.d.ts

@@ -0,0 +1,5 @@
+export declare enum PsRatingDisplaySize {
+    Large = "large",
+    Medium = "medium",
+    Small = "small"
+}

package/dist/constants/ps-rating-display-size.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsRatingDisplaySize = void 0;
+var PsRatingDisplaySize;
+(function (PsRatingDisplaySize) {
+    PsRatingDisplaySize["Large"] = "large";
+    PsRatingDisplaySize["Medium"] = "medium";
+    PsRatingDisplaySize["Small"] = "small";
+})(PsRatingDisplaySize || (exports.PsRatingDisplaySize = PsRatingDisplaySize = {}));

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsOverviewCard = ({ action, badge, children, className, footer, icon, summary, title, }) => (_jsxs("section", { className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-4 rounded-ps-panel border border-line bg-surface p-5', className), children: [_jsxs("header", { className: 'flex min-w-0 items-start gap-3', children: [icon ? _jsx("span", { className: 'ps-icon-surface h-10 w-10 shrink-0', children: icon }) : null, _jsxs("div", { className: 'flex min-w-0 flex-1 flex-col gap-1', children: [_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [_jsx("h2", { className: 'text-base font-semibold text-ink', children: title }), badge] }), summary ? _jsx("p", { className: 'break-words text-sm leading-6 text-ink/60', children: summary }) : null] }), action ? _jsx("div", { className: 'flex shrink-0 items-center gap-2', children: action }) : null] }), children ? _jsx("div", { className: 'flex min-w-0 flex-col gap-1', children: children }) : null, footer ? _jsx("div", { className: 'flex flex-wrap items-center gap-2', children: footer }) : null] }));

package/dist/esm/components/ps-rating-display.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
+import { PsRatingDisplayConfig } from '../constants/ps-rating-display-config';
+import { PsRatingDisplaySize } from '../constants/ps-rating-display-size';
+export const PsRatingDisplay = ({ className, label, max = PsRatingDisplayConfig.defaultMax, score, size = PsRatingDisplaySize.Medium, }) => (_jsx("div", { "aria-label": label, className: PallasoftClassNameService.merge('flex items-center gap-1', className), role: 'img', children: Array.from({ length: max }, (_, index) => index + 1).map((value) => (_jsx(PsIcon, { className: PallasoftClassNameService.merge(PsRatingDisplayConfig.iconClassNames[size], value <= score
+            ? PsRatingDisplayConfig.filledClassName
+            : PsRatingDisplayConfig.emptyClassName), iconKey: PsIconKey.Star }, value))) }));

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { DndContext, closestCenter, } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { PsDragClasses, PsDragConfig, PsDragListLiftFrames } from '../constants/ps-drag-config';
 import { usePsDragSensors } from '../hooks/use-ps-drag-sensors';
@@ -27,7 +27,7 @@ const PsSortableListRow = ({ className, handleClassName, handleIcon, getHandleLa
             transition: isReduced ? undefined : transition,
         }, children: rendered }));
 };
-export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, role, items, onMove, renderItem, }) => {
+export const PsSortableList = ({ announcements: texts, className, getHandleLabel, getItemClassName, handleClassName, handleIcon, instructions, isHorizontal = false, role, items, onMove, renderItem, }) => {
     const [activeId, setActiveId] = useState(null);
     const sensors = usePsDragSensors();
     const activeIndex = items.findIndex((item) => item.id === activeId);
@@ -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: 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: PsDragListLiftFrames, children: activeItem !== null
                     ? renderItem({
                         handle: (_jsx(PsSortableListHandle, { className: handleClassName, icon: handleIcon, label: getHandleLabel(activeItem.label) })),
                         index: activeIndex,

package/dist/esm/constants/ps-rating-display-config.js

@@ -0,0 +1,11 @@
+import { PsRatingDisplaySize } from './ps-rating-display-size';
+export const PsRatingDisplayConfig = {
+    defaultMax: 5,
+    filledClassName: 'fill-current text-primary',
+    emptyClassName: 'text-ink/30 dark:text-white/30',
+    iconClassNames: {
+        [PsRatingDisplaySize.Large]: 'h-8 w-8',
+        [PsRatingDisplaySize.Medium]: 'h-6 w-6',
+        [PsRatingDisplaySize.Small]: 'h-4 w-4',
+    },
+};

package/dist/esm/constants/ps-rating-display-size.js

@@ -0,0 +1,6 @@
+export var PsRatingDisplaySize;
+(function (PsRatingDisplaySize) {
+    PsRatingDisplaySize["Large"] = "large";
+    PsRatingDisplaySize["Medium"] = "medium";
+    PsRatingDisplaySize["Small"] = "small";
+})(PsRatingDisplaySize || (PsRatingDisplaySize = {}));

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

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePsChangeQueue } from './use-ps-change-queue';
+import { usePsOptimisticRows } from './use-ps-optimistic-rows';
+export const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+    const [isUnsettled, setIsUnsettled] = useState(false);
+    const submitted = useRef(0);
+    const settle = useRef(null);
+    const sawBusy = useRef(false);
+    const dataBefore = useRef(fetcher.data);
+    const dataSeen = useRef(fetcher.data);
+    const { forgetLast, remember, rows: shown, } = usePsOptimisticRows({
+        apply,
+        isHolding,
+        isSaving: isUnsettled || fetcher.state !== 'idle' || revalidator.state !== 'idle',
+        rows,
+    });
+    useEffect(() => {
+        dataSeen.current = fetcher.data;
+        if (settle.current === null)
+            return;
+        if (fetcher.state !== 'idle') {
+            sawBusy.current = true;
+            return;
+        }
+        if (!sawBusy.current && fetcher.data === dataBefore.current)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        sawBusy.current = false;
+        done(fetcher.data);
+    }, [fetcher.data, fetcher.state]);
+    const submitOne = useCallback((values) => new Promise((resolve) => {
+        settle.current = resolve;
+        sawBusy.current = false;
+        dataBefore.current = dataSeen.current;
+        void fetcher.submit(values, { method: 'post' });
+    }), [fetcher]);
+    const send = useCallback(async (queued) => {
+        for (const submission of merge === undefined ? queued : merge(queued)) {
+            const result = await submitOne(submission);
+            if (!isSuccess(result))
+                throw result;
+        }
+    }, [isSuccess, merge, submitOne]);
+    const revalidate = useCallback(() => {
+        const through = submitted.current;
+        void Promise.resolve(revalidator.revalidate()).finally(() => {
+            if (submitted.current === through)
+                setIsUnsettled(false);
+        });
+    }, [revalidator]);
+    const forgetFailed = useCallback((failed, dropped) => {
+        for (let index = 0; index < failed.length + dropped.length; index += 1)
+            forgetLast();
+    }, [forgetLast]);
+    const queue = usePsChangeQueue({
+        onDrained: revalidate,
+        onFailed: forgetFailed,
+        send,
+    });
+    const submit = useCallback((values) => {
+        submitted.current += 1;
+        setIsUnsettled(true);
+        remember(values);
+        queue.enqueue(values);
+    }, [queue, remember]);
+    return { rows: shown, submit };
+};

package/dist/esm/index.js

@@ -75,6 +75,12 @@ export * from './hooks/use-ps-change-queue';
 export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
+export * from './hooks/use-ps-optimistic-fetcher';
+export * from './interfaces/ps-fetcher-like';
+export * from './interfaces/ps-fetcher-submit-options';
+export * from './interfaces/ps-optimistic-fetcher-input';
+export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';
 export * from './hooks/use-ps-navigation-progress';
@@ -129,6 +135,7 @@ export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
 export * from './components/ps-capped-list';
 export * from './components/ps-detail-list';
+export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
 export * from './components/ps-start-panel';
@@ -147,3 +154,5 @@ export * from './hooks/use-ps-drag-sensors';
 export * from './hooks/use-ps-reduced-motion';
 export * from './components/ps-divider';
 export * from './models/ps-divider-orientation';
+export * from './components/ps-rating-display';
+export * from './constants/ps-rating-display-size';

package/dist/esm/interfaces/ps-fetcher-like.js

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

package/dist/esm/interfaces/ps-fetcher-submit-options.js

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

package/dist/esm/interfaces/ps-optimistic-fetcher-input.js

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

package/dist/esm/interfaces/ps-optimistic-fetcher-result.js

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

package/dist/esm/interfaces/ps-revalidator-like.js

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

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

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

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsOptimisticFetcher = void 0;
+const react_1 = require("react");
+const use_ps_change_queue_1 = require("./use-ps-change-queue");
+const use_ps_optimistic_rows_1 = require("./use-ps-optimistic-rows");
+const usePsOptimisticFetcher = ({ apply, fetcher, isHolding = false, isSuccess, merge, revalidator, rows, }) => {
+    const [isUnsettled, setIsUnsettled] = (0, react_1.useState)(false);
+    const submitted = (0, react_1.useRef)(0);
+    const settle = (0, react_1.useRef)(null);
+    const sawBusy = (0, react_1.useRef)(false);
+    const dataBefore = (0, react_1.useRef)(fetcher.data);
+    const dataSeen = (0, react_1.useRef)(fetcher.data);
+    const { forgetLast, remember, rows: shown, } = (0, use_ps_optimistic_rows_1.usePsOptimisticRows)({
+        apply,
+        isHolding,
+        isSaving: isUnsettled || fetcher.state !== 'idle' || revalidator.state !== 'idle',
+        rows,
+    });
+    (0, react_1.useEffect)(() => {
+        dataSeen.current = fetcher.data;
+        if (settle.current === null)
+            return;
+        if (fetcher.state !== 'idle') {
+            sawBusy.current = true;
+            return;
+        }
+        if (!sawBusy.current && fetcher.data === dataBefore.current)
+            return;
+        const done = settle.current;
+        settle.current = null;
+        sawBusy.current = false;
+        done(fetcher.data);
+    }, [fetcher.data, fetcher.state]);
+    const submitOne = (0, react_1.useCallback)((values) => new Promise((resolve) => {
+        settle.current = resolve;
+        sawBusy.current = false;
+        dataBefore.current = dataSeen.current;
+        void fetcher.submit(values, { method: 'post' });
+    }), [fetcher]);
+    const send = (0, react_1.useCallback)(async (queued) => {
+        for (const submission of merge === undefined ? queued : merge(queued)) {
+            const result = await submitOne(submission);
+            if (!isSuccess(result))
+                throw result;
+        }
+    }, [isSuccess, merge, submitOne]);
+    const revalidate = (0, react_1.useCallback)(() => {
+        const through = submitted.current;
+        void Promise.resolve(revalidator.revalidate()).finally(() => {
+            if (submitted.current === through)
+                setIsUnsettled(false);
+        });
+    }, [revalidator]);
+    const forgetFailed = (0, react_1.useCallback)((failed, dropped) => {
+        for (let index = 0; index < failed.length + dropped.length; index += 1)
+            forgetLast();
+    }, [forgetLast]);
+    const queue = (0, use_ps_change_queue_1.usePsChangeQueue)({
+        onDrained: revalidate,
+        onFailed: forgetFailed,
+        send,
+    });
+    const submit = (0, react_1.useCallback)((values) => {
+        submitted.current += 1;
+        setIsUnsettled(true);
+        remember(values);
+        queue.enqueue(values);
+    }, [queue, remember]);
+    return { rows: shown, submit };
+};
+exports.usePsOptimisticFetcher = usePsOptimisticFetcher;

package/dist/index.d.ts

@@ -75,6 +75,12 @@ export * from './hooks/use-ps-change-queue';
 export * from './interfaces/ps-change-queue-input';
 export * from './interfaces/ps-change-queue-result';
 export * from './hooks/use-ps-optimistic-rows';
+export * from './hooks/use-ps-optimistic-fetcher';
+export * from './interfaces/ps-fetcher-like';
+export * from './interfaces/ps-fetcher-submit-options';
+export * from './interfaces/ps-optimistic-fetcher-input';
+export * from './interfaces/ps-optimistic-fetcher-result';
+export * from './interfaces/ps-revalidator-like';
 export * from './interfaces/ps-optimistic-rows-input';
 export * from './interfaces/ps-optimistic-rows-result';
 export * from './hooks/use-ps-navigation-progress';
@@ -129,6 +135,7 @@ export * from './models/ps-theme-mode-state';
 export * from './models/ps-tool-card-data';
 export * from './components/ps-capped-list';
 export * from './components/ps-detail-list';
+export * from './components/ps-overview-card';
 export * from './components/ps-form-footer';
 export * from './components/ps-start-highlight';
 export * from './components/ps-start-panel';
@@ -147,3 +154,5 @@ export * from './hooks/use-ps-drag-sensors';
 export * from './hooks/use-ps-reduced-motion';
 export * from './components/ps-divider';
 export * from './models/ps-divider-orientation';
+export * from './components/ps-rating-display';
+export * from './constants/ps-rating-display-size';

package/dist/index.js

@@ -91,6 +91,12 @@ __exportStar(require("./hooks/use-ps-change-queue"), exports);
 __exportStar(require("./interfaces/ps-change-queue-input"), exports);
 __exportStar(require("./interfaces/ps-change-queue-result"), exports);
 __exportStar(require("./hooks/use-ps-optimistic-rows"), exports);
+__exportStar(require("./hooks/use-ps-optimistic-fetcher"), exports);
+__exportStar(require("./interfaces/ps-fetcher-like"), exports);
+__exportStar(require("./interfaces/ps-fetcher-submit-options"), exports);
+__exportStar(require("./interfaces/ps-optimistic-fetcher-input"), exports);
+__exportStar(require("./interfaces/ps-optimistic-fetcher-result"), exports);
+__exportStar(require("./interfaces/ps-revalidator-like"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-input"), exports);
 __exportStar(require("./interfaces/ps-optimistic-rows-result"), exports);
 __exportStar(require("./hooks/use-ps-navigation-progress"), exports);
@@ -145,6 +151,7 @@ __exportStar(require("./models/ps-theme-mode-state"), exports);
 __exportStar(require("./models/ps-tool-card-data"), exports);
 __exportStar(require("./components/ps-capped-list"), exports);
 __exportStar(require("./components/ps-detail-list"), exports);
+__exportStar(require("./components/ps-overview-card"), exports);
 __exportStar(require("./components/ps-form-footer"), exports);
 __exportStar(require("./components/ps-start-highlight"), exports);
 __exportStar(require("./components/ps-start-panel"), exports);
@@ -163,3 +170,5 @@ __exportStar(require("./hooks/use-ps-drag-sensors"), exports);
 __exportStar(require("./hooks/use-ps-reduced-motion"), exports);
 __exportStar(require("./components/ps-divider"), exports);
 __exportStar(require("./models/ps-divider-orientation"), exports);
+__exportStar(require("./components/ps-rating-display"), exports);
+__exportStar(require("./constants/ps-rating-display-size"), exports);

package/dist/interfaces/ps-fetcher-like.d.ts

@@ -0,0 +1,6 @@
+import type { PsFetcherSubmitOptions } from './ps-fetcher-submit-options';
+export interface PsFetcherLike<Data> {
+    data: Data | undefined;
+    state: string;
+    submit: (values: Record<string, string>, options: PsFetcherSubmitOptions) => unknown;
+}

package/dist/interfaces/ps-fetcher-like.js

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

package/dist/interfaces/ps-fetcher-submit-options.d.ts

@@ -0,0 +1,3 @@
+export interface PsFetcherSubmitOptions {
+    method: 'post';
+}

package/dist/interfaces/ps-fetcher-submit-options.js

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

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

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

package/dist/interfaces/ps-optimistic-fetcher-input.js

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

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

@@ -0,0 +1,4 @@
+export interface PsOptimisticFetcherResult<Row> {
+    rows: Row[];
+    submit: (values: Record<string, string>) => void;
+}

package/dist/interfaces/ps-optimistic-fetcher-result.js

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

package/dist/interfaces/ps-revalidator-like.d.ts

@@ -0,0 +1,4 @@
+export interface PsRevalidatorLike {
+    revalidate: () => Promise<void> | void;
+    state: string;
+}

package/dist/interfaces/ps-revalidator-like.js

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

package/dist/models/ps-sortable-list.d.ts

@@ -27,6 +27,7 @@ export interface PsSortableListProps<TItem extends PsSortableListItem> {
     handleIcon?: JSX.Element;
     instructions: string;
     items: TItem[];
+    isHorizontal?: boolean;
     onMove: (itemId: string, fromIndex: number, toIndex: number) => void;
     renderItem: (options: PsSortableListRenderOptions<TItem>) => JSX.Element | null;
 }

package/package.json

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