@pallasoft/ps-core-components 2.41.0 → 2.43.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-portable-text-image.d.ts

@@ -0,0 +1,7 @@
+import type { PortableTextTypeComponentProps } from '@portabletext/react';
+import type { PsPortableTextImageData } from '../models/ps-portable-text-image-data';
+export interface PsPortableTextImageProps extends PortableTextTypeComponentProps<PsPortableTextImageData> {
+    hiddenLabel: string;
+    isShown: boolean;
+}
+export declare const PsPortableTextImage: ({ hiddenLabel, isShown, value }: PsPortableTextImageProps) => import("react").JSX.Element | null;

package/dist/components/ps-portable-text-image.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_portable_text_message_config_1 = require("../constants/ps-portable-text-message-config");
+const ps_portable_text_link_service_1 = require("../services/ps-portable-text-link-service");
+const PsPortableTextImage = ({ hiddenLabel, isShown, value }) => {
+    if (typeof value.src !== 'string' || !ps_portable_text_link_service_1.PsPortableTextLinkService.isSafeImage(value.src))
+        return null;
+    const alt = typeof value.alt === 'string' ? value.alt : '';
+    if (!isShown)
+        return ((0, jsx_runtime_1.jsx)("div", { className: ps_portable_text_message_config_1.PsPortableTextMessageConfig.placeholderClassName, children: alt === '' ? hiddenLabel : alt }));
+    return ((0, jsx_runtime_1.jsx)("img", { alt: alt, className: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageClassName, decoding: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageDecoding, loading: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageLoading, referrerPolicy: ps_portable_text_message_config_1.PsPortableTextMessageConfig.imageReferrerPolicy, src: value.src }));
+};
+exports.PsPortableTextImage = PsPortableTextImage;

package/dist/components/ps-portable-text-message.d.ts

@@ -0,0 +1,2 @@
+import type { PsPortableTextMessageProps } from '../models/ps-portable-text-message-props';
+export declare const PsPortableTextMessage: ({ containerClasses, containerStyles, imageLabels, isImagesShown, linkClassName, LinkComponent, text, }: PsPortableTextMessageProps) => import("react").JSX.Element;

package/dist/components/ps-portable-text-message.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextMessage = 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 react_2 = require("@portabletext/react");
+const ps_linked_text_link_rel_1 = require("../constants/ps-linked-text-link-rel");
+const ps_portable_text_auto_link_type_1 = require("../constants/ps-portable-text-auto-link-type");
+const ps_portable_text_message_config_1 = require("../constants/ps-portable-text-message-config");
+const ps_portable_text_link_service_1 = require("../services/ps-portable-text-link-service");
+const ps_portable_text_image_1 = require("./ps-portable-text-image");
+const ps_text_link_1 = require("./ps-text-link");
+const PsPortableTextMessage = ({ containerClasses, containerStyles, imageLabels, isImagesShown, linkClassName, LinkComponent, text, }) => {
+    const config = ps_portable_text_message_config_1.PsPortableTextMessageConfig;
+    const [isShown, setIsShown] = (0, react_1.useState)(isImagesShown);
+    const labels = { ...config.defaultLabels, ...imageLabels };
+    const linkClasses = linkClassName === undefined ? config.linkClassName : linkClassName;
+    const components = {
+        types: {
+            [config.imageType]: ({ value, ...props }) => ((0, jsx_runtime_1.jsx)(ps_portable_text_image_1.PsPortableTextImage, { ...props, hiddenLabel: labels.imageHidden, isShown: isShown, value: value })),
+        },
+        marks: {
+            code: ({ children }) => (0, jsx_runtime_1.jsx)("code", { className: config.codeClassName, children: children }),
+            em: ({ children }) => (0, jsx_runtime_1.jsx)("em", { children: children }),
+            strong: ({ children }) => (0, jsx_runtime_1.jsx)("strong", { children: children }),
+            underline: ({ children }) => (0, jsx_runtime_1.jsx)("u", { children: children }),
+            [ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType]: ({ children, value }) => ((0, jsx_runtime_1.jsx)("a", { className: linkClasses, href: value.href, rel: ps_linked_text_link_rel_1.PsLinkedTextLinkRel, target: config.linkTarget, children: children })),
+            link: ({ children, value }) => typeof value?.href === 'string' && ps_portable_text_link_service_1.PsPortableTextLinkService.isSafeLink(value.href) ? ((0, jsx_runtime_1.jsx)(LinkComponent, { className: linkClasses, href: value.href, rel: config.linkRel, target: config.linkTarget, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })),
+        },
+        list: {
+            bullet: ({ children }) => (0, jsx_runtime_1.jsx)("ul", { className: config.bulletListClassName, children: children }),
+            number: ({ children }) => (0, jsx_runtime_1.jsx)("ol", { className: config.numberListClassName, children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => (0, jsx_runtime_1.jsx)("li", { className: config.listItemClassName, children: children }),
+            number: ({ children }) => (0, jsx_runtime_1.jsx)("li", { className: config.listItemClassName, children: children }),
+        },
+        block: {
+            normal: ({ children }) => (0, jsx_runtime_1.jsx)("p", { className: config.paragraphClassName, children: children }),
+            blockquote: ({ children }) => ((0, jsx_runtime_1.jsx)("blockquote", { className: config.quoteClassName, children: children })),
+            h1: ({ children }) => (0, jsx_runtime_1.jsx)("h3", { className: config.headingClassNames.h1, children: children }),
+            h2: ({ children }) => (0, jsx_runtime_1.jsx)("h4", { className: config.headingClassNames.h2, children: children }),
+            h3: ({ children }) => (0, jsx_runtime_1.jsx)("h5", { className: config.headingClassNames.h3, children: children }),
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(config.rootClassName, containerClasses), style: containerStyles, children: [!isShown && ps_portable_text_link_service_1.PsPortableTextLinkService.hasImages(text) ? ((0, jsx_runtime_1.jsxs)("p", { className: config.imageBarClassName, children: [(0, jsx_runtime_1.jsx)("span", { children: labels.imagesHidden }), (0, jsx_runtime_1.jsx)(ps_text_link_1.PsTextLink, { onClick: () => setIsShown(true), size: 'compact', children: labels.showImages })] })) : null, (0, jsx_runtime_1.jsx)(react_2.PortableText, { components: components, value: ps_portable_text_link_service_1.PsPortableTextLinkService.linkify(text) })] }));
+};
+exports.PsPortableTextMessage = PsPortableTextMessage;

package/dist/components/ps-portable-text.d.ts

@@ -1,10 +1,14 @@
 import type { CSSProperties, ElementType, ReactNode } from 'react';
 import { TypedObject } from '@portabletext/types';
+import { PsPortableTextVariant } from '../constants/ps-portable-text-variant';
+import type { PsPortableTextImageLabels } from '../models/ps-portable-text-image-labels';
 export interface PsPortableTextProps {
     bodyClasses?: string;
     containerClasses?: string;
     containerStyles?: CSSProperties;
     headerClasses?: string;
+    imageLabels?: Partial<PsPortableTextImageLabels>;
+    isImagesShown?: boolean;
     isLargeBodyFont?: boolean;
     linkClassName?: string;
     LinkComponent?: ElementType<{
@@ -16,5 +20,6 @@ export interface PsPortableTextProps {
     }>;
     listClasses?: string;
     text: TypedObject[];
+    variant?: PsPortableTextVariant;
 }
-export declare const PsPortableText: ({ bodyClasses, containerClasses, containerStyles, headerClasses, isLargeBodyFont, linkClassName, LinkComponent, listClasses, text, }: PsPortableTextProps) => import("react").JSX.Element;
+export declare const PsPortableText: ({ bodyClasses, containerClasses, containerStyles, headerClasses, imageLabels, isImagesShown, isLargeBodyFont, linkClassName, LinkComponent, listClasses, text, variant, }: PsPortableTextProps) => import("react").JSX.Element;

package/dist/components/ps-portable-text.js

@@ -7,19 +7,24 @@ const react_1 = require("@portabletext/react");
 const ps_linked_text_link_rel_1 = require("../constants/ps-linked-text-link-rel");
 const ps_portable_text_auto_link_type_1 = require("../constants/ps-portable-text-auto-link-type");
 const ps_portable_text_link_class_name_1 = require("../constants/ps-portable-text-link-class-name");
+const ps_portable_text_variant_1 = require("../constants/ps-portable-text-variant");
 const ps_text_wrap_class_name_1 = require("../constants/ps-text-wrap-class-name");
 const ps_portable_text_link_service_1 = require("../services/ps-portable-text-link-service");
-const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = ps_portable_text_link_class_name_1.PsPortableTextLinkClassName, LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
+const ps_portable_text_message_1 = require("./ps-portable-text-message");
+const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', imageLabels, isImagesShown = false, isLargeBodyFont = false, linkClassName, LinkComponent = 'a', listClasses = 'text-ink', text, variant = ps_portable_text_variant_1.PsPortableTextVariant.Article, }) => {
+    if (variant === ps_portable_text_variant_1.PsPortableTextVariant.Message)
+        return ((0, jsx_runtime_1.jsx)(ps_portable_text_message_1.PsPortableTextMessage, { containerClasses: containerClasses, containerStyles: containerStyles, imageLabels: imageLabels, isImagesShown: isImagesShown, linkClassName: linkClassName, LinkComponent: LinkComponent, text: text }));
+    const articleLinkClassName = linkClassName === undefined ? ps_portable_text_link_class_name_1.PsPortableTextLinkClassName : linkClassName;
     const hasContainerStyles = Object.keys(containerStyles).length > 0;
     const getBodyClass = hasContainerStyles ? '' : bodyClasses;
     const getHeaderClass = hasContainerStyles ? '' : headerClasses;
     const getListClass = hasContainerStyles ? '' : listClasses;
     const components = {
         marks: {
-            [ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType]: ({ children, value }) => ((0, jsx_runtime_1.jsx)("a", { href: value.href, target: '_blank', rel: ps_linked_text_link_rel_1.PsLinkedTextLinkRel, className: linkClassName, children: children })),
+            [ps_portable_text_auto_link_type_1.PsPortableTextAutoLinkType]: ({ children, value }) => ((0, jsx_runtime_1.jsx)("a", { href: value.href, target: '_blank', rel: ps_linked_text_link_rel_1.PsLinkedTextLinkRel, className: articleLinkClassName, children: children })),
             link: ({ children, value }) => {
                 const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
-                return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+                return ((0, jsx_runtime_1.jsx)(LinkComponent, { href: value.href, rel: rel, className: articleLinkClassName, "aria-label": value.children, children: children }));
             },
         },
         list: {

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/constants/ps-portable-text-message-config.d.ts

@@ -0,0 +1,32 @@
+export declare const PsPortableTextMessageConfig: {
+    readonly rootClassName: "flex min-w-0 flex-col gap-3 text-sm leading-6 text-inherit [overflow-wrap:anywhere]";
+    readonly paragraphClassName: "whitespace-pre-line";
+    readonly quoteClassName: "whitespace-pre-line border-l-2 border-line pl-3 opacity-80";
+    readonly linkClassName: "underline underline-offset-2";
+    readonly codeClassName: "rounded bg-ink/10 px-1 font-mono text-[0.85em]";
+    readonly bulletListClassName: "flex list-disc flex-col gap-1 pl-5";
+    readonly numberListClassName: "flex list-decimal flex-col gap-1 pl-5";
+    readonly listItemClassName: "whitespace-pre-line";
+    readonly defaultLabels: {
+        imageHidden: string;
+        imagesHidden: string;
+        showImages: string;
+    };
+    readonly imageBarClassName: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs opacity-70";
+    readonly placeholderClassName: "flex min-h-10 items-center rounded-ps-control border border-dashed border-line px-3 py-2 text-xs opacity-70";
+    readonly imageClassName: "h-auto max-w-full rounded-ps-control border border-line";
+    readonly headingClassNames: {
+        readonly h1: "mt-1 text-lg font-semibold leading-snug";
+        readonly h2: "mt-1 text-base font-semibold leading-snug";
+        readonly h3: "mt-1 text-sm font-semibold leading-snug";
+    };
+    readonly linkRel: "noopener noreferrer";
+    readonly linkTarget: "_blank";
+    readonly imageLoading: "lazy";
+    readonly imageDecoding: "async";
+    readonly imageReferrerPolicy: "no-referrer";
+    readonly imageType: "image";
+    readonly imageProtocolPattern: RegExp;
+    readonly relativePrefix: "/";
+    readonly protocolRelativePrefix: "//";
+};

package/dist/constants/ps-portable-text-message-config.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextMessageConfig = void 0;
+exports.PsPortableTextMessageConfig = {
+    rootClassName: 'flex min-w-0 flex-col gap-3 text-sm leading-6 text-inherit [overflow-wrap:anywhere]',
+    paragraphClassName: 'whitespace-pre-line',
+    quoteClassName: 'whitespace-pre-line border-l-2 border-line pl-3 opacity-80',
+    linkClassName: 'underline underline-offset-2',
+    codeClassName: 'rounded bg-ink/10 px-1 font-mono text-[0.85em]',
+    bulletListClassName: 'flex list-disc flex-col gap-1 pl-5',
+    numberListClassName: 'flex list-decimal flex-col gap-1 pl-5',
+    listItemClassName: 'whitespace-pre-line',
+    defaultLabels: {
+        imageHidden: 'Image not shown',
+        imagesHidden: 'Images are hidden to protect your privacy.',
+        showImages: 'Show images',
+    },
+    imageBarClassName: 'flex flex-wrap items-center gap-x-2 gap-y-1 text-xs opacity-70',
+    placeholderClassName: 'flex min-h-10 items-center rounded-ps-control border border-dashed border-line px-3 py-2 text-xs opacity-70',
+    imageClassName: 'h-auto max-w-full rounded-ps-control border border-line',
+    headingClassNames: {
+        h1: 'mt-1 text-lg font-semibold leading-snug',
+        h2: 'mt-1 text-base font-semibold leading-snug',
+        h3: 'mt-1 text-sm font-semibold leading-snug',
+    },
+    linkRel: 'noopener noreferrer',
+    linkTarget: '_blank',
+    imageLoading: 'lazy',
+    imageDecoding: 'async',
+    imageReferrerPolicy: 'no-referrer',
+    imageType: 'image',
+    imageProtocolPattern: /^https?:\/\//i,
+    relativePrefix: '/',
+    protocolRelativePrefix: '//',
+};

package/dist/constants/ps-portable-text-variant.d.ts

@@ -0,0 +1,4 @@
+export declare enum PsPortableTextVariant {
+    Article = "article",
+    Message = "message"
+}

package/dist/constants/ps-portable-text-variant.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsPortableTextVariant = void 0;
+var PsPortableTextVariant;
+(function (PsPortableTextVariant) {
+    PsPortableTextVariant["Article"] = "article";
+    PsPortableTextVariant["Message"] = "message";
+})(PsPortableTextVariant || (exports.PsPortableTextVariant = PsPortableTextVariant = {}));

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-text-link-gap.d.ts

@@ -0,0 +1,4 @@
+export declare const PsTextLinkGap: {
+    readonly text: " ";
+    readonly trailingSpacePattern: RegExp;
+};

package/dist/constants/ps-text-link-gap.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTextLinkGap = void 0;
+exports.PsTextLinkGap = {
+    text: ' ',
+    trailingSpacePattern: /\s$/,
+};

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-portable-text-image.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsPortableTextMessageConfig } from '../constants/ps-portable-text-message-config.js';
+import { PsPortableTextLinkService } from '../services/ps-portable-text-link-service.js';
+export const PsPortableTextImage = ({ hiddenLabel, isShown, value }) => {
+    if (typeof value.src !== 'string' || !PsPortableTextLinkService.isSafeImage(value.src))
+        return null;
+    const alt = typeof value.alt === 'string' ? value.alt : '';
+    if (!isShown)
+        return (_jsx("div", { className: PsPortableTextMessageConfig.placeholderClassName, children: alt === '' ? hiddenLabel : alt }));
+    return (_jsx("img", { alt: alt, className: PsPortableTextMessageConfig.imageClassName, decoding: PsPortableTextMessageConfig.imageDecoding, loading: PsPortableTextMessageConfig.imageLoading, referrerPolicy: PsPortableTextMessageConfig.imageReferrerPolicy, src: value.src }));
+};

package/dist/esm/components/ps-portable-text-message.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PortableText as Text } from '@portabletext/react';
+import { PsLinkedTextLinkRel } from '../constants/ps-linked-text-link-rel.js';
+import { PsPortableTextAutoLinkType } from '../constants/ps-portable-text-auto-link-type.js';
+import { PsPortableTextMessageConfig } from '../constants/ps-portable-text-message-config.js';
+import { PsPortableTextLinkService } from '../services/ps-portable-text-link-service.js';
+import { PsPortableTextImage } from './ps-portable-text-image.js';
+import { PsTextLink } from './ps-text-link.js';
+export const PsPortableTextMessage = ({ containerClasses, containerStyles, imageLabels, isImagesShown, linkClassName, LinkComponent, text, }) => {
+    const config = PsPortableTextMessageConfig;
+    const [isShown, setIsShown] = useState(isImagesShown);
+    const labels = { ...config.defaultLabels, ...imageLabels };
+    const linkClasses = linkClassName === undefined ? config.linkClassName : linkClassName;
+    const components = {
+        types: {
+            [config.imageType]: ({ value, ...props }) => (_jsx(PsPortableTextImage, { ...props, hiddenLabel: labels.imageHidden, isShown: isShown, value: value })),
+        },
+        marks: {
+            code: ({ children }) => _jsx("code", { className: config.codeClassName, children: children }),
+            em: ({ children }) => _jsx("em", { children: children }),
+            strong: ({ children }) => _jsx("strong", { children: children }),
+            underline: ({ children }) => _jsx("u", { children: children }),
+            [PsPortableTextAutoLinkType]: ({ children, value }) => (_jsx("a", { className: linkClasses, href: value.href, rel: PsLinkedTextLinkRel, target: config.linkTarget, children: children })),
+            link: ({ children, value }) => typeof value?.href === 'string' && PsPortableTextLinkService.isSafeLink(value.href) ? (_jsx(LinkComponent, { className: linkClasses, href: value.href, rel: config.linkRel, target: config.linkTarget, children: children })) : (_jsx(_Fragment, { children: children })),
+        },
+        list: {
+            bullet: ({ children }) => _jsx("ul", { className: config.bulletListClassName, children: children }),
+            number: ({ children }) => _jsx("ol", { className: config.numberListClassName, children: children }),
+        },
+        listItem: {
+            bullet: ({ children }) => _jsx("li", { className: config.listItemClassName, children: children }),
+            number: ({ children }) => _jsx("li", { className: config.listItemClassName, children: children }),
+        },
+        block: {
+            normal: ({ children }) => _jsx("p", { className: config.paragraphClassName, children: children }),
+            blockquote: ({ children }) => (_jsx("blockquote", { className: config.quoteClassName, children: children })),
+            h1: ({ children }) => _jsx("h3", { className: config.headingClassNames.h1, children: children }),
+            h2: ({ children }) => _jsx("h4", { className: config.headingClassNames.h2, children: children }),
+            h3: ({ children }) => _jsx("h5", { className: config.headingClassNames.h3, children: children }),
+        },
+    };
+    return (_jsxs("div", { className: PallasoftClassNameService.merge(config.rootClassName, containerClasses), style: containerStyles, children: [!isShown && PsPortableTextLinkService.hasImages(text) ? (_jsxs("p", { className: config.imageBarClassName, children: [_jsx("span", { children: labels.imagesHidden }), _jsx(PsTextLink, { onClick: () => setIsShown(true), size: 'compact', children: labels.showImages })] })) : null, _jsx(Text, { components: components, value: PsPortableTextLinkService.linkify(text) })] }));
+};

package/dist/esm/components/ps-portable-text.js

@@ -4,19 +4,24 @@ import { PortableText as Text } from '@portabletext/react';
 import { PsLinkedTextLinkRel } from '../constants/ps-linked-text-link-rel.js';
 import { PsPortableTextAutoLinkType } from '../constants/ps-portable-text-auto-link-type.js';
 import { PsPortableTextLinkClassName } from '../constants/ps-portable-text-link-class-name.js';
+import { PsPortableTextVariant } from '../constants/ps-portable-text-variant.js';
 import { PsTextWrapClassName } from '../constants/ps-text-wrap-class-name.js';
 import { PsPortableTextLinkService } from '../services/ps-portable-text-link-service.js';
-export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', isLargeBodyFont = false, linkClassName = PsPortableTextLinkClassName, LinkComponent = 'a', listClasses = 'text-ink', text, }) => {
+import { PsPortableTextMessage } from './ps-portable-text-message.js';
+export const PsPortableText = ({ bodyClasses = 'text-ink', containerClasses = '', containerStyles = {}, headerClasses = 'text-ink', imageLabels, isImagesShown = false, isLargeBodyFont = false, linkClassName, LinkComponent = 'a', listClasses = 'text-ink', text, variant = PsPortableTextVariant.Article, }) => {
+    if (variant === PsPortableTextVariant.Message)
+        return (_jsx(PsPortableTextMessage, { containerClasses: containerClasses, containerStyles: containerStyles, imageLabels: imageLabels, isImagesShown: isImagesShown, linkClassName: linkClassName, LinkComponent: LinkComponent, text: text }));
+    const articleLinkClassName = linkClassName === undefined ? PsPortableTextLinkClassName : linkClassName;
     const hasContainerStyles = Object.keys(containerStyles).length > 0;
     const getBodyClass = hasContainerStyles ? '' : bodyClasses;
     const getHeaderClass = hasContainerStyles ? '' : headerClasses;
     const getListClass = hasContainerStyles ? '' : listClasses;
     const components = {
         marks: {
-            [PsPortableTextAutoLinkType]: ({ children, value }) => (_jsx("a", { href: value.href, target: '_blank', rel: PsLinkedTextLinkRel, className: linkClassName, children: children })),
+            [PsPortableTextAutoLinkType]: ({ children, value }) => (_jsx("a", { href: value.href, target: '_blank', rel: PsLinkedTextLinkRel, className: articleLinkClassName, children: children })),
             link: ({ children, value }) => {
                 const rel = !value.href.startsWith('/') ? 'noreferrer noopener' : undefined;
-                return (_jsx(LinkComponent, { href: value.href, rel: rel, className: linkClassName, "aria-label": value.children, children: children }));
+                return (_jsx(LinkComponent, { href: value.href, rel: rel, className: articleLinkClassName, "aria-label": value.children, children: children }));
             },
         },
         list: {

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/constants/ps-portable-text-message-config.js

@@ -0,0 +1,32 @@
+export const PsPortableTextMessageConfig = {
+    rootClassName: 'flex min-w-0 flex-col gap-3 text-sm leading-6 text-inherit [overflow-wrap:anywhere]',
+    paragraphClassName: 'whitespace-pre-line',
+    quoteClassName: 'whitespace-pre-line border-l-2 border-line pl-3 opacity-80',
+    linkClassName: 'underline underline-offset-2',
+    codeClassName: 'rounded bg-ink/10 px-1 font-mono text-[0.85em]',
+    bulletListClassName: 'flex list-disc flex-col gap-1 pl-5',
+    numberListClassName: 'flex list-decimal flex-col gap-1 pl-5',
+    listItemClassName: 'whitespace-pre-line',
+    defaultLabels: {
+        imageHidden: 'Image not shown',
+        imagesHidden: 'Images are hidden to protect your privacy.',
+        showImages: 'Show images',
+    },
+    imageBarClassName: 'flex flex-wrap items-center gap-x-2 gap-y-1 text-xs opacity-70',
+    placeholderClassName: 'flex min-h-10 items-center rounded-ps-control border border-dashed border-line px-3 py-2 text-xs opacity-70',
+    imageClassName: 'h-auto max-w-full rounded-ps-control border border-line',
+    headingClassNames: {
+        h1: 'mt-1 text-lg font-semibold leading-snug',
+        h2: 'mt-1 text-base font-semibold leading-snug',
+        h3: 'mt-1 text-sm font-semibold leading-snug',
+    },
+    linkRel: 'noopener noreferrer',
+    linkTarget: '_blank',
+    imageLoading: 'lazy',
+    imageDecoding: 'async',
+    imageReferrerPolicy: 'no-referrer',
+    imageType: 'image',
+    imageProtocolPattern: /^https?:\/\//i,
+    relativePrefix: '/',
+    protocolRelativePrefix: '//',
+};

package/dist/esm/constants/ps-portable-text-variant.js

@@ -0,0 +1,5 @@
+export var PsPortableTextVariant;
+(function (PsPortableTextVariant) {
+    PsPortableTextVariant["Article"] = "article";
+    PsPortableTextVariant["Message"] = "message";
+})(PsPortableTextVariant || (PsPortableTextVariant = {}));

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-text-link-gap.js

@@ -0,0 +1,4 @@
+export const PsTextLinkGap = {
+    text: ' ',
+    trailingSpacePattern: /\s$/,
+};

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;